#our-facilities-menu {
  text-decoration: none;
  position: relative; /* Ensure the parent <li> is the reference for positioning */
}

#mainHeader a {
  color: white !important; /* Change the text color to white */
  text-decoration: none; /* Remove underline from links */
  font-size: 16px !important; /* Increase font size */
  height: 22px;
}

#our-facilities-menu .overlay-menunav {
  display: none; /* Hide the menu by default */
  position: absolute;
  text-decoration: none;
  top: 100%; /* Position it below the parent <li> */
  left: 0;
  width: 200px; /* Adjust width as needed */
  background-color: #1f8ec1; /* Semi-transparent black background */
  color: white;
  list-style: none;
  padding: 10px 0;
  z-index: 1000; /* Ensure it appears above other elements */
  margin-left: -50px;
}

#our-facilities-menu .overlay-menunav li {
  padding: 10px;
  text-align: center;
}

#our-facilities-menu .overlay-menunav li a {
  color: white;
  text-decoration: none;
}

/* #our-facilities-menu .overlay-menunav li a:hover {
  text-decoration: underline;
} */

#our-facilities-menu:hover .overlay-menunav {
  display: block; /* Show the menu when the parent <li> is hovered */
}

/* Add hover effect for li elements */
#our-facilities-menu .overlay-menunav li:hover {
  background-color: #265275; /* Change background color on hover */
  text-decoration: none; /* Remove underline on hover */
  cursor: pointer; /* Change cursor to pointer */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.facility-container {
  align-items: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0px; /* Space between image and text */
  width: 40%;
  transition: transform 0.3s ease; /* Smooth scaling effect */
}

.facility-container h2 {
  font-size: 26px;
  margin-top: -10px;
  font-weight: 500;
  margin-bottom: -5px;
  color: #1f8ec1; /* Change the color to match the theme */
}
.facility-container a {
  text-decoration: none;
  width: 100%;
}
.facility-container:hover {
  transform: scale(1.1); /* Slightly enlarge the image on hover */
}

/* cards-container  */
.cards-container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping to the next row */
  justify-content: space-between; /* Add space between columns */
  gap: 20px; /* Optional: Add spacing between items */
  margin-bottom: 50px;
}

.cards-container > * {
  flex: 0 1 calc(50% - 20px); /* Each item takes 50% width minus gap */
  box-sizing: border-box; /* Ensure padding and border are included in width */
}
/* Mobile design for cards-container */
@media (max-width: 768px) {
  .cards-container {
    flex-direction: column; /* Stack items vertically */
    gap: 20px; /* Maintain spacing between items */
  }

  .cards-container > * {
    flex: 0 1 100%; /* Each item takes 100% width */
  }
  .facility-container {
    width: 100%; /* Ensure full width on mobile */
  }
}

/* Mobile Header */
#mobileHeader {
  display: none; /* Hidden by default, shown only on smaller screens */
}

/* Mobile Navigation Menu */
#mobileNav {
  display: none; /* Hidden by default */
  flex-direction: column;
  background-color: #1f8ec1;
  padding: 10px;
  transition: all 0.9s ease; /* Smooth transition for opening/closing */
}

#mobileNav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#mobileNav li {
  margin: 10px 0;
}

#mobileNav a {
  color: white;
  text-decoration: none;
}

/* Show mobile header on smaller screens */
@media (max-width: 900px) {
  #mainHeader {
    display: none; /* Hide the desktop header */
  }

  #mobileHeader {
    display: block; /* Show the mobile header */
  }
}