/* ============================================
   NAVBAR STYLES - Shared across all pages
   ============================================ */

.navbar {
   transition: all 0.3s ease;
}

.nav-background {
   background-color: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   box-shadow: 0 2px 8px rgba(43, 58, 103, 0.08);
}

.navbar-nav .nav-item .nav-link {
   border-radius: 12px;
   width: 140px;
   text-align: center;
   line-height: 20px;
   padding: 8px 12px;
   font-size: 1.1rem;
   font-weight: 500;
   color: #2B3A67;
   transition: all 0.3s ease;
}

.navbar-nav .nav-item:hover .nav-link {
   background: linear-gradient(135deg, #7ADFBB 0%, #9AAEF2 100%);
   color: #fff;
   transform: translateY(-2px);
}

.nav-item.dropdown:hover .nav-link::after {
   transform: rotate(180deg);
}

/* Navbar Brand */
.navbar-brand {
   margin-left: 20px;
   margin-bottom: 10px;
   transition: transform 0.3s ease;
}

.navbar-brand:hover {
   transform: scale(1.02);
}

/* Dropdown Menu */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
   display: block;
}

.dropdown-menu {
   border: none;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(43, 58, 103, 0.12);
   overflow: hidden;
}

.dropdown-menu .dropdown-item {
   font-size: 1.1rem;
   padding: 12px 20px;
   text-decoration: none;
   color: #1e2134;
   transition: all 0.2s ease;
}

.navbar-nav>li>.dropdown-menu a:hover {
   background: linear-gradient(135deg, #7ADFBB 0%, #9AAEF2 100%);
   color: #fff;
   padding-left: 25px;
}

/* Override Bootstrap active state for dropdown items */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
   background: linear-gradient(135deg, #7ADFBB 0%, #9AAEF2 100%);
   color: #fff;
}

.navbar>.navbar-nav>li>.navbar-right {
   margin-left: 50px;
}

/* Navbar Toggler for mobile */
.navbar-toggler {
   border: none;
   padding: 8px 12px;
}

.navbar-toggler:focus {
   box-shadow: none;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (min-width: 1200px) and (max-width: 1000px) {
   .navbar-brand {
      width: 190px;
      height: 50px;
   }
}

@media (min-width: 770px) and (max-width: 1200px) {
   .navbar-brand {
      width: 130px;
      height: 50px;
   }
}

@media (max-width: 950px) {
   .navbar-collapse .nav-item .nav-link {
      justify-content: flex-end;
      width: 150px;
      margin-left: 30px;
      text-align: left;
   }

   .navbar-nav>li>.dropdown-menu a {
      justify-content: flex-end;
      font-size: 1.1rem;
   }
}

@media (max-width: 576px) {
   .navbar-brand {
      margin-left: 10px;
   }
   
   .navbar-brand img {
      width: 140px;
      height: auto;
   }
}