body {
  /* Add padding top to prevent content from hiding behind the fixed navbar */
  /* Adjust this value (e.g., 60px, 70px) based on your actual navbar height */
  padding-top: 60px;

  /* Parallax Background */
  /* --- REPLACE THIS URL with your actual background image --- */
  background-image: url('../images/background.jpg');

  /* Set a specific height */
  min-height: 100vh; /* Ensure body takes at least full viewport height */

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Add a semi-transparent overlay to content sections for readability */
.content-section {
  background-color: rgba(255, 255, 255, 0.85); /* White background with 85% opacity */
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Style the footer */
.footer {
  background-color: rgba(33, 37, 41, 0.9); /* Bootstrap dark color with 90% opacity */
  color: white;
}

/* Optional: Make carousel images slightly less tall on smaller screens */
@media (max-width: 767px) {
  .carousel-item img {
      max-height: 250px; /* Adjust as needed */
      object-fit: cover; /* Ensures image covers the area */
  }
   /* Adjust body padding for smaller screens if navbar height changes */
  body {
      padding-top: 56px; /* Example adjustment if navbar is shorter */
  }
}

/* You generally won't need specific styles for the navbar itself unless
 you want to heavily customize it beyond Bootstrap's default classes. */
 /* --- Custom Navbar Styles --- */

.navbar {
  /* Very dark blue background like the image */
  background-color: #101A4D; /* Adjust this hex code if needed */
}

/* Style for the navigation links */
.navbar .navbar-nav .nav-link {
  background-color: #FFFF66; /* Bright yellow background */
  color: #333300; /* Dark text color for contrast on yellow */
  margin-left: 5px; /* Small space between links */
  margin-right: 5px;
  padding-top: 0.5rem; /* Adjust padding as needed */
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: bold; /* Make text bold like example */
  border-radius: 0; /* Sharp corners */
}

/* Optional: Style for the currently active link (matches non-active in the image) */
/* If you want active to look different, modify this */
.nav-link.active-link {
   background-color: #FFFF66; Same yellow
   color: #333300; /* Same dark text */
}

/* Optional: Hover effect - slightly change background or text */
.nav-link:hover {
  background-color: #F0F050; /* Slightly different yellow on hover */
  color: #000000;
}

/* --- Make Navbar Toggler Icon Visible --- */
/* Bootstrap's default toggler icon is dark. We need to make it visible on our dark background. */
/* This uses SVG filter to make it white. */
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Style for the toggler button border */
.navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3); /* Lighter border for the button */
}
.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25); /* Focus outline color */
}


/* Ensure brand (logo) area is distinct if needed */
/* In the example image, the logo has a white background, separate from the blue bar. */
/* Achieving that perfectly might require changing the HTML structure slightly. */
/* This CSS keeps the logo within the blue bar as per standard Bootstrap structure. */
.navbar .navbar-brand {
  color: #fff; /* Make text next to logo white if you add any */
  padding-top: 0; /* Adjust padding around logo if needed */
  padding-bottom: 0;
  margin-right: 1rem; /* Space between logo and nav items */
}
.navbar .navbar-brand:hover {
   color: #eee;
}

.hidden { display: none!important;}

/* --- Map Section Styles --- */
.map-section {
  background-color: #101A4D; /* Dark Blue Background - same as navbar */
  /* Or use a different dark blue if you prefer: e.g., #0D243F; */
}

/* Make the embedded map responsive */
.map-responsive {
  overflow: hidden;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  /* Adjust percentage for different aspect ratios: e.g., 75% for 4:3 */
  position: relative;
  height: 0;
  border: 1px solid #ddd; /* Optional: subtle border around the map */
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

/* --- End Map Section Styles --- */