.navbar {
  
  padding: 12px 20px;
  position: relative;
}

.menu-icon {
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  display: none;
}

/* Desktop Menu */
.nav-links {
  list-style: none;
  display: flex;
  gap: 10px;
}

.nav-links li a {
   color: #006852; text-decoration: none;
      font-size: 1.0rem;
      padding: 8PX 10px;
      border-radius: 3px;
  display: block;
  transition: 0.3s;
}

/* Hover Effect */
.nav-links li:hover > a {
   background-color: #006852;
      color: white;
}

/* Active Class */
.nav-links li.active > a {
  background-color: #006852;
      color: white;
}

/* Dropdown Container */
.dropdown {
  position: relative;
  padding-bottom: 5px; /* Smooth gap fix */
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #111; color: white;
  min-width: 160px;
  padding: 10px 0;
  border-radius: 4px;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-in-out;
  z-index: 999;
}

/* Fix flicker/blinking issue */
.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
  display: block; list-style: none;
  opacity: 1;  background-color: #34495e;
      color: white;
  visibility: visible;
}

/* Dropdown links */
.dropdown-menu li a {
  padding: 10px 15px; 
  white-space: nowrap;
  transition: 0.3s; color: #fff;
}

.dropdown-menu li:hover a {
  color: #fff;
}

/* Mobile Responsive */
@media (max-width: 850px) {
  .menu-icon {
    display: block; background:#006852; margin:10px 0;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100%;
    width: 260px;
    background: #000;
    flex-direction: column;
    padding-top: 60px;
    gap: 15px;
    transition: 0.4s;
    z-index: 9999;
  }

  .nav-links li {
    padding-left: 20px;
  }

  .dropdown-menu {
    position: static;
    background: #222;
    opacity: 1;
    visibility: visible;
    display: none;
    border-radius: 0;
    margin-left: 20px;
  }

  /* Open dropdown on click in mobile */
  .dropdown.open .dropdown-menu {
    display: block;
  }

  .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
  }
}

/* Mobile show menu */
.nav-links.show {
  right: 0;
}

/* Hide close button on desktop */
.close-btn {
  display: none;
}

/* Show close button only on mobile */
@media (max-width: 850px) {
  .close-btn {
    display: block;
  }
}


/* Close button hidden by default (desktop) */
.close-btn {
  display: none;
  cursor: pointer;
  color: #fff;
  font-size: 30px;
}

/* Mobile view */
@media (max-width: 850px) {
  .close-btn {
    display: block;
    position: absolute;
    top: 15px;
    right: 20px;
  }
}

@media only screen and (max-width:580px)
{
.menu-icon {
    font-size: 19px; padding:10px 12px;
color: #fff;} }