/* Luxury Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F7FAFC;
}

::-webkit-scrollbar-thumb {
    background: #8bc3e8;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #66b1e2;
}


/* ═══════════════════════════════════════════════
       NAVBAR — Premium Smooth Edition
    ═══════════════════════════════════════════════ */

        /* Base navbar */
        #navbar {
            backdrop-filter: blur(18px) saturate(180%);
            -webkit-backdrop-filter: blur(18px) saturate(180%);
            transition: padding .5s cubic-bezier(.22, 1, .36, 1),
                background .5s cubic-bezier(.22, 1, .36, 1),
                box-shadow .5s cubic-bezier(.22, 1, .36, 1),
                border-color .5s cubic-bezier(.22, 1, .36, 1);
        }

        #navbar.scrolled {
            box-shadow: 0 4px 32px rgba(15, 23, 42, 0.10);
            background: rgba(255, 255, 255, 0.97) !important;
        }

        /* Nav CTA button */
        .nav-cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #0F172A;
            color: #fff !important;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .22em;
            text-transform: uppercase;
            text-decoration: none;
            padding: 10px 22px;
            border-radius: 100px;
            white-space: nowrap;
            opacity: 1 !important;
            animation: none !important;
            transition: background .3s cubic-bezier(.22, 1, .36, 1),
                transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s cubic-bezier(.22, 1, .36, 1);
        }

        .nav-cta-btn:hover {
            background: #478ECE;
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(71, 142, 206, .35);
        }

        /* Desktop nav links */
        .nav-link {
            position: relative;
            padding: .45rem 0.85rem;
            border-radius: 0.4rem;
            font-weight: 600;
            color: #0F172A;
            text-decoration: none;
            transition:
                background .3s cubic-bezier(.22, 1, .36, 1),
                color .3s cubic-bezier(.22, 1, .36, 1),
                transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s cubic-bezier(.22, 1, .36, 1);
            white-space: nowrap;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 50%;
            right: 50%;
            height: 2px;
            background: #478ECE;
            border-radius: 2px;
            transition: left .3s cubic-bezier(.22, 1, .36, 1), right .3s cubic-bezier(.22, 1, .36, 1), opacity .3s;
            opacity: 0;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            left: 12px;
            right: 12px;
            opacity: 1;
        }

        .nav-link:hover,
        .nav-link:focus {
            background: transparent;
            color: #478ECE !important;
        }

        .nav-link.active {
            background: transparent;
            color: #478ECE !important;
            font-weight: 700;
        }

        /* Services dropdown trigger */
        .group>a.nav-link .fa-chevron-down {
            transition: transform .35s cubic-bezier(.22, 1, .36, 1);
        }

        .group:hover>a.nav-link .fa-chevron-down,
        .group:focus-within>a.nav-link .fa-chevron-down {
            transform: rotate(180deg);
        }

        /* Dropdown panel */
        .dropdown-panel {
            background: rgba(255, 255, 255, 0.98);
            border-radius: 1.25rem;
            box-shadow: 0 24px 60px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .05);
            padding: 1.25rem;
            backdrop-filter: blur(12px);
        }

        .dropdown-panel a {
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .7rem 1rem;
            border-radius: .6rem;
            transition:
                background .28s cubic-bezier(.22, 1, .36, 1),
                color .28s cubic-bezier(.22, 1, .36, 1),
                transform .28s cubic-bezier(.22, 1, .36, 1);
            font-size: 13px;
            font-weight: 600;
            color: #0F172A;
            text-decoration: none;
        }

        .dropdown-panel a:hover {
            background: rgba(71, 142, 206, .09);
            color: #478ECE;
            transform: translateX(4px);
        }

        .dropdown-panel .icon-wrap {
            width: 32px;
            height: 32px;
            background: #478ECE;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: .4rem;
            flex-shrink: 0;
            transition: transform .28s cubic-bezier(.22, 1, .36, 1), background .28s;
        }

        .dropdown-panel a:hover .icon-wrap {
            transform: scale(1.1) rotate(-3deg);
            background: #2B6DAE;
        }

        /* Dropdown wrap — slide-down + fade */
        .dropdown-wrap {
            transform: translateX(-50%) translateY(-12px) scale(.97);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition:
                opacity .38s cubic-bezier(.22, 1, .36, 1),
                transform .38s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear .38s;
            will-change: transform, opacity;
            z-index: 250;
            transform-origin: top center;
        }

        .group:hover .dropdown-wrap,
        .group:focus-within .dropdown-wrap {
            transform: translateX(-50%) translateY(0) scale(1);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition:
                opacity .38s cubic-bezier(.22, 1, .36, 1),
                transform .38s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear 0s;
        }

        /* ── HAMBURGER ICON → X MORPH ── */
        #menu-btn {
            width: 38px;
            height: 38px;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            border: 1.5px solid rgba(15, 23, 42, .1);
            background: rgba(255, 255, 255, .6);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            transition: background .3s, border-color .3s, transform .2s cubic-bezier(.22, 1, .36, 1);
            cursor: pointer;
        }

        /* Show only below xl (1280px) */
        @media (max-width: 1279px) {
            #menu-btn {
                display: flex;
            }
        }

        @media (min-width: 1280px) {
            #menu-btn {
                display: none !important;
            }
        }

        #menu-btn:hover {
            background: rgba(71, 142, 206, .08);
            border-color: rgba(71, 142, 206, .3);
            transform: scale(1.05);
        }

        #menu-btn i {
            transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s;
        }

        /* ── MOBILE BACKDROP ── */
        #mobile-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, .45);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transition: opacity .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .42s;
        }

        #mobile-backdrop.open {
            opacity: 1;
            visibility: visible;
            transition: opacity .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s;
        }

        /* ── MOBILE MENU PANEL ── */
        #mobile-menu {
            position: fixed;
            top: 0;
            right: 0;
            width: min(85vw, 380px);
            height: 100vh;
            height: 100dvh;
            background: #fff;
            z-index: 9999;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 0;
            /* slide from right */
            transform: translateX(100%);
            transition: transform .48s cubic-bezier(.22, 1, .36, 1);
            will-change: transform;
            box-shadow: -20px 0 60px rgba(15, 23, 42, .15);
            display: flex;
            flex-direction: column;
        }

        #mobile-menu.mobile-open {
            transform: translateX(0);
        }

        /* Staggered link entry animations */
        .mobile-nav-link {
            opacity: 0;
            transform: translateX(24px);
            transition:
                opacity .4s cubic-bezier(.22, 1, .36, 1),
                transform .4s cubic-bezier(.22, 1, .36, 1),
                background .25s,
                color .25s;
        }

        #mobile-menu.mobile-open .mobile-nav-link {
            opacity: 1;
            transform: translateX(0);
        }

        /* Delay each link */
        #mobile-menu.mobile-open .mobile-nav-link:nth-child(1) {
            transition-delay: .08s;
        }

        #mobile-menu.mobile-open .mobile-nav-link:nth-child(2) {
            transition-delay: .13s;
        }

        #mobile-menu.mobile-open .mobile-nav-link:nth-child(3) {
            transition-delay: .18s;
        }

        #mobile-menu.mobile-open .mobile-nav-link:nth-child(4) {
            transition-delay: .23s;
        }

        #mobile-menu.mobile-open .mobile-nav-link:nth-child(5) {
            transition-delay: .28s;
        }

        #mobile-menu.mobile-open .mobile-nav-link:nth-child(6) {
            transition-delay: .33s;
        }

        /* Mobile services sub-menu */
        #mobile-services-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
            opacity: 0;
        }

        #mobile-services-list.expanded {
            max-height: 800px;
            opacity: 1;
        }

        #mobile-services-toggle .chevron-icon {
            transition: transform .35s cubic-bezier(.22, 1, .36, 1);
        }

        #mobile-services-toggle.expanded .chevron-icon {
            transform: rotate(180deg);
        }

        /* mobile-link base (desktop overwritten below) */
        .mobile-link {
            display: flex;
            align-items: center;
            font-size: 15px;
            font-weight: 600;
            color: #0F172A;
            padding: .9rem 1.5rem;
            text-decoration: none;
            transition: background .2s, color .2s, transform .2s cubic-bezier(.22, 1, .36, 1);
            border-radius: 0;
        }

        .mobile-link:hover {
            background: rgba(71, 142, 206, .08);
            color: #478ECE;
            transform: translateX(4px);
        }