/* --- Base Styles --- */
.nav {
  background: #0F3D59;
  font-family: sans-serif;
  position: relative;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu li a,
.drop-label {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

/* Hover highlight for desktop */
.menu li:hover > a,
.menu li:hover > .drop-label {
  background: #9c0f17;
}

/* --- Burger Icon --- */
.burger {
  display: none;
  cursor: pointer;
  padding: 15px;
}

.burger span {
  display: block;
  width: 28px;
  height: 4px;
  margin: 5px 0;
  background: white;
  border-radius: 2px;
}

/* Hide checkbox */
#menu-toggle,
#drop1 {
  display: none;
}

/* Hide checkbox */
#menu-toggle,
#drop2 {
  display: none;
}

/* Hide checkbox */
#menu-toggle,
#drop3 {
  display: none;
}

/* --- Dropdown Styles --- */
.dropdown {
  position: relative;
}

.submenu {
  background: #F7F7F7;
  list-style: none;
  position: absolute;
  min-width: 180px;
  display: none;
  padding: 0;
  margin: 0;
}

.submenu li a {
  color: #000;
  padding: 10px 15px;
}

.submenu li a:hover {
  background: #ddd;
}

/* Show submenu on desktop hover */
.dropdown:hover .submenu {
  display: block;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
  }

  #menu-toggle:checked ~ .menu {
    display: flex;
  }

  .burger {
    display: block;
  }

  /* Mobile dropdown expand using checkbox */
  .dropdown:hover .submenu {
    display: none;
  }

  #drop1:checked + .drop-label + .submenu {
    display: block;
    position: static;
  }
  
  #drop2:checked + .drop-label + .submenu {
    display: block;
    position: static;
  }
  #drop3:checked + .drop-label + .submenu {
    display: block;
    position: static;
  }

  .submenu li a {
    background: #F7F7F7;
  }
}





/* Ensure menu is always above all page elements */
nav,
.menu-container {
    position: relative;       /* or fixed if it's a sticky/floating menu */
    z-index: 9999;            /* very high value to stay on top */
}




.responsive-img {
    width: 100%;
    height: auto;
    max-width: 200px; /* Optional: your preferred desktop size */
    display: block;
}