/* NAVBAR BACKGROUND GRADIENT */
.bg-primary-blue {
    background: linear-gradient(to right, #1e844990 0%, #ffffff9b 100%) !important;
}
@media (max-width: 991px) {
  .mobile-menu {
    background: linear-gradient(to right, 
        #ffffff 0%,       /* Left white */
        #1e8449 40%,      /* Middle green */
        #ffffff 100%   )  ;  /* dark overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;    /* full height */
    padding-top: 80px;
    text-align: center;
    z-index: 1050;
  }
  /* Change hamburger icon to black */



  .mobile-menu ul {
    flex-direction: column;
    gap: 20px;
  }

  .mobile-menu .nav-link {
    font-size: 1.3rem;
    color: #0fe6a1 !important; /* teal like screenshot */
    background: none !important;
  }

  .mobile-menu .nav-link.active {
    color: #fff !important;
    font-weight: bold;
  }

    .navbar-toggler {
    border: none;
    z-index: 1100;
  }
  .navbar-toggler:focus {
    box-shadow: none;
  }
}
/* NAV LINKS STYLE */
.navbar .nav-link {
    color: white !important;
    position: relative;
    padding: 8px 15px;
    background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(30,132,73,0.7) 100%);
    background-size: 200% auto;
    border-radius: 5px;
    transition: background-position 0.4s ease, color 0.4s ease;
}

.navbar .nav-link:hover {
    background-position: right center;
    color: #fff !important;
}

.navbar .nav-link.active {
    background: linear-gradient(90deg, #1e8449 0%, #145a32 100%);
    background-size: 200% auto;
    color: #fff !important;
}

/* LOGO STYLING */
.custom-navbar .navbar-brand img {
    height: 70px;
    width: auto;
    background-color: transparent !important;
}
/* Keep SVCE logo exact aspect ratio */
.svce-logo {
  height: 50px;          /* control the size */
  width: auto;           /* auto keeps natural aspect ratio */
  object-fit: contain;   /* prevents stretching */
}

@media (max-width: 999px) {
  .svce-logo {
    height: 40px;   /* smaller but still keeps shape */
    width: auto;
  }
}
@media (min-width: 999px) {
  .svce-logo {
    max-height: 40px;  /* smaller in laptop view */
  }
}

img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .custom-navbar .navbar-brand img {
    height: 50px !important;
  }
  .svce-logo {
    max-width: 150px !important;
  }
  .carousel-img {
    height: 300px !important;
  }
}

.custom-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.custom-navbar .navbar-toggler {
  border: none;      /* optional: remove border */
  background: none;  /* keep background transparent */
}
/* Transparent dropdown */
.transparent-dropdown {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: none;
  backdrop-filter: blur(8px); /* glassmorphism effect */
}

.transparent-dropdown .dropdown-item {
  color: #1e8449 !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.transparent-dropdown .dropdown-item:hover {
  background-color: rgba(30, 132, 73, 0.2);
  color: #0A2647 !important;
}
/* keep your existing styles ... */

/* DEFAULT: gradient for all links */
.navbar .nav-link {
  color: white !important;
  position: relative;
  padding: 8px 15px;
  background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(30,132,73,0.7) 100%);
  background-size: 200% auto;
  border-radius: 5px;
  transition: background-position 0.4s ease, color 0.4s ease;
}
.navbar .nav-link:hover {
  background-position: right center;
  color: #fff !important;
}

/* ACTIVE: solid dark green highlight */
.navbar .nav-link.active,
.transparent-dropdown .dropdown-item.active {
  background: #145a32 !important;   /* dark green */
  color: #fff !important;
  font-weight: 600;
}

/* optional: show active dropdown item clearly */
.transparent-dropdown .dropdown-item.active:hover {
  background: #0b3d2e !important;
}

/* keep your existing mobile rules; this one keeps active white on mobile */
.mobile-menu .nav-link.active { color: #fff !important; }