/* ================================
   Navbar Styles using common.css
   ================================ */

 .navbar {
     position: sticky;
     top: 0;
     width: 100%;
     background: var(--white-color);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
     z-index: 1000;
     transition: background 0.3s ease;
 }

 .nav-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 14px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .nav-logo img {
     height: 60px;
     border-radius: 5px;
     transition: transform 0.3s ease;
 }

 .nav-logo:hover img {
     transform: scale(1.02);
 }

 /* Navigation Links */
 .nav-menu ul {
     list-style: none;
     display: flex;
     align-items: center;
     gap: 28px;
     margin: 0;
     padding: 0;
 }

 .nav-menu a {
     text-decoration: none;
     color: var(--dark-charcoal-color);
     font-weight: 600;
     position: relative;
     transition: color 0.3s ease;
 }

 .nav-menu a:hover,
 .nav-menu a.active {
     color: var(--lime-green-color);
 }

 /* Dropdown Menu */
 .dropdown {
     position: relative;
 }

 .dropdown .mega-menu {
     position: absolute;
     top: 20px;
     left: 0;
     background: var(--white-color);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     border-radius: 8px;
     padding: 18px 24px;
     display: none;
     animation: fadeDown 0.3s ease;
     min-width: 240px;
 }

 .dropdown:hover .mega-menu {
     display: block;
 }

 @keyframes fadeDown {
     from {
         opacity: 0;
         transform: translateY(-8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .mega-column {
     display: flex;
     flex-direction: column;
 }

 .mega-column h4 {
     font-size: 15px;
     color: var(--lime-green-color);
     margin-bottom: 10px;
     font-weight: 600;
 }

 .mega-column a {
     color: var(--dark-charcoal-color);
     padding: 6px 0;
     transition: color 0.3s ease, padding-left 0.3s ease;
 }

 .mega-column a:hover {
     color: var(--vista-blue-color);
     padding-left: 6px;
 }

 /* Apply Now Button */
 .btn-apply {
     background: var(--lime-green-color);
     color: var(--white-color) !important;
     padding: 10px 22px;
     border-radius: 25px;
     transition: all 0.3s ease;
     font-weight: 600;
     display: inline-block;
     text-align: center;
 }

 .btn-apply:hover {
     background: var(--vista-blue-color);
     transform: translateY(-2px);
 }

 /* Hamburger Menu */
 .nav-toggle {
     display: none;
     flex-direction: column;
     width: 25px;
     height: 18px;
     justify-content: space-between;
     cursor: pointer;
 }

 .nav-toggle span {
     display: block;
     height: 3px;
     background: var(--dark-charcoal-color);
     border-radius: 2px;
     transition: all 0.3s ease;
 }

 /* ===========================
   Mobile Responsive
   =========================== */
 @media (max-width: 1080px) {
     .nav-menu {
         position: fixed;
         top: 90px;
         right: -100%;
         width: 270px;
         height: calc(100vh - 70px);
         background: var(--white-color);
         box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
         transition: right 0.4s ease;
         padding-top: 30px;
         display: flex;
         flex-direction: column;
         border-top-left-radius: 5px;
         overflow-y: auto;
         scrollbar-width: thin;
         scrollbar-color: var(--gainsboro-color) transparent;
     }

     .nav-menu::-webkit-scrollbar {
         width: 6px;
     }

     .nav-menu::-webkit-scrollbar-thumb {
         background: var(--gainsboro-color);
         border-radius: 10px;
     }

     .nav-menu.open {
         right: 0;
     }

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

     .dropdown .mega-menu {
         position: static;
         display: none;
         box-shadow: none;
         padding: 10px 20px;
         animation: slideDown 0.3s ease;
     }

     @keyframes slideDown {
         from {
             opacity: 0;
             transform: translateY(-10px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     .dropdown.open .mega-menu {
         display: flex;
         flex-direction: column;
     }

     .nav-toggle {
         display: flex;
     }

     .nav-toggle.active span:nth-child(1) {
         transform: rotate(45deg) translateY(7px);
     }

     .nav-toggle.active span:nth-child(2) {
         opacity: 0;
     }

     .nav-toggle.active span:nth-child(3) {
         transform: rotate(-45deg) translateY(-7px);
     }
 }