/*==================================================
NAVBAR
==================================================*/

.navbar{
    transition:
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        backdrop-filter .35s ease;
}

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:99999;

    background:transparent;
    border-bottom:1px solid transparent;

    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.navbar.scrolled{

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    box-shadow:
        0 10px 30px rgba(15,23,42,.08);
}
/*==================================================
CONTAINER
==================================================*/

.navbar .container{

    max-width:1400px;

    margin:auto;

    padding:0 32px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*==================================================
LOGO
==================================================*/

.nav-logo img{
    height:80px;
    width:auto;
    display:block;
}

/*==================================================
MENU
==================================================*/

.nav-menu{

    margin-left:auto;

    margin-right:auto;

}

.nav-menu ul{

    display:flex;

    align-items:center;

    gap:34px;

    list-style:none;

    margin:0;

    padding:0;

}

.nav-menu li{

    position:relative;

}

.nav-menu a{

    position:relative;

    display:flex;

    align-items:center;

    text-decoration:none;

    color:#475569;

    font-size:.96rem;

    font-weight:600;

    transition:.3s;

}

.navbar.scrolled .nav-menu a{

    color:#475569;

}

.navbar.scrolled .nav-menu a:hover{

    color:#2563eb;

}

/*==================================================
UNDERLINE
==================================================*/

.nav-menu a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    transform:translateX(-50%);

    width:0;

    height:3px;

    border-radius:20px;

    background:

        linear-gradient( 
            90deg,
            #2563eb,
            #60a5fa
        );

    transition:.35s;

}

.nav-menu a:hover{

    color:#2563eb;

}

.nav-menu a:hover::after{

    width:100%;

}

/*==================================================
RIGHT SIDE
==================================================*/

.nav-right{

    display:flex;

    align-items:center;

    gap:18px;

}



/*==================================================
CTA BUTTON
==================================================*/
 
.nav-cta{

    position:relative;

    overflow: hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:14px 28px;

    text-decoration:none;

    color:#fff;

    font-size:.95rem;

    font-weight:700;

    border-radius:16px;

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    box-shadow:

        0 15px 35px rgba(37,99,235,.22);

    transition:
        transform .35s,
        box-shadow .35s;

}

/* Shine */

.nav-cta::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:

        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    transform:skewX(-22deg);

    transition:1s;

}

.nav-cta:hover::before{

    left:170%;

}

.nav-cta:hover{

    transform:translateY(-4px);

    box-shadow:

        0 22px 45px rgba(37,99,235,.30);

}

.nav-cta i{

    transition:.35s;

}

.nav-cta:hover i{

    transform:translateX(6px);

}

/*==================================================
MENU TOGGLE
==================================================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    outline:none;

    cursor:pointer;

    border-radius:14px;
    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    color:#0f172a;
    font-size:1.35rem;

    transition:
        .35s,
        transform .35s;

    border:1px solid #e5e7eb;

}

.navbar.scrolled .menu-toggle{

    background:#ffffff;

    border:1px solid #e5e7eb;

    color:#0f172a;
}

.menu-toggle:hover{

    background:#eff6ff;

    border-color:#bfdbfe;

    color:#2563eb;

    transform:rotate(90deg);

}

/*==================================================
ACTIVE MENU ICON
==================================================*/

.menu-toggle.active{

    background:#2563eb;

    color:#ffffff;

    border-color:#2563eb;

}

/*==================================================
MICRO ANIMATION
==================================================*/

.nav-phone,
.nav-cta,
.menu-toggle{

    will-change:transform;

}

/*==================================================
NAVBAR SHADOW ON SCROLL
(Optional JS adds .scrolled)
==================================================*/


/*========================================
MOBILE TOGGLE
========================================*/

.menu-toggle{

    display:none;

    width:48px;
    height:48px;

    border:none;
    outline:none;

    cursor:pointer;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:14px;

    transition:.35s;

}

@media (hover: hover) {

    .menu-toggle:hover{
        border-color:#2563eb;
        color:#2563eb;
        box-shadow:0 12px 30px rgba(37,99,235,.12);
    }

}

.menu-toggle i{

    font-size:1.35rem;

}


/*========================================
MOBILE CTA
========================================*/

.mobile-cta{

    display:none;

}


/*========================================
SCROLL EFFECT
========================================*/

/*==================================================
TABLET & MOBILE
==================================================*/

@media (max-width:992px){

    .navbar .container{
        height:72px;
        padding:0 20px;
    }

    .nav-logo img{
        height:58px;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .nav-phone,
    .nav-cta{
        display:none;
    }

    .nav-menu{

        position:absolute;

        top:100%;
        left:0;

        width:100%;

        background:#fff;

        margin:0;

        padding:18px;

        border-top:1px solid #e5e7eb;

        box-shadow:0 20px 50px rgba(15,23,42,.08);

        display:none;

        animation:menuReveal .35s ease;
    }

    .nav-menu.active{
        display:block;
    }

    .nav-menu ul{

        flex-direction:column;

        gap:8px;

        align-items:stretch;
    }

    .nav-menu li{
        width:100%;
    }

    .nav-menu a{

        display:flex;

        justify-content:space-between;

        align-items:center;

        padding:15px 18px;

        border-radius:12px;
    }

    .nav-menu a:hover{

        background:#f8fafc;
    }

    .nav-menu a::after{
        display:none;
    }

    /* dropdown */

    .services-popup,
    .training-popup{

        position:static;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:none;

        width:100%;

        margin-top:10px;

        display:none;

        box-shadow:none;

        border:1px solid #edf2f7;
    }

    .services-menu.open .services-popup,
    .training-menu.open .training-popup{

        display:block;
    }

    .services-menu.open .services-arrow,
    .training-menu.open .training-arrow{

        transform:rotate(180deg);
    }

}


/*========================================
MENU ANIMATION
========================================*/

@keyframes menuReveal{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*========================================
ACTIVE LINK
========================================*/

.nav-links a.active{

    color:#2563eb;

}

.nav-links a.active::after{

    width:100%;

}


/*========================================
PREMIUM HOVER GLOW
========================================*/

.nav-links a:hover{

    text-shadow:
        0 0 10px rgba(37,99,235,.15);

}

.nav-btn:hover{

    transform:translateY(-2px);

}




/*==========================================
TRAINING POPUP
==========================================*/

.training-menu{

    position:relative;

}

.training-link{

    display:flex;
    align-items:center;
    gap:8px;

}

.training-arrow{

    font-size:11px;

    transition:.35s;

}
.services-link{

    display:flex;
    align-items:center;
    gap:8px;
}

.services-arrow{

    font-size:11px;

    transition:.35s;
}
.training-menu:hover .training-arrow{

    transform:rotate(180deg);

}


.services-menu{
    position:relative;
}

.services-menu::after{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    height:12px;
}

/*==========================================*/

.training-popup{

    position:absolute;

    top:calc(100% + 10px);

    left:50%;

    transform:translateX(-50%) translateY(12px);

    width:290px;

    background:#fff;

    border-radius:20px;

    border:1px solid #e8edf5;

    box-shadow:
        0 25px 60px rgba(15,23,42,.12);

    padding:14px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.3s;

    z-index:9999;

}

/* hover bridge */

.training-menu::after{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    height:12px;
}

/* show */

.training-menu:hover .training-popup{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(0);

}

/*==========================================*/

.popup-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:14px 16px;

    border-radius:14px;

    color:#475569;

    text-decoration:none;

    transition:.25s;

}

.popup-item::after{

    display:none !important;

}

.popup-item i{

    width:22px;

    color:#2563eb;

    text-align:center;

    font-size:15px;

}

.popup-item span{

    flex:1;

}

.popup-item:hover{

    background:#f4f8ff;

    color:#2563eb;

    transform:translateX(4px);

}

/*==========================================*/

.popup-divider{

    height:1px;

    margin:14px 0;

    background:#e5e7eb;

}

/*==========================================*/

.popup-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:14px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.popup-btn::after{

    display:none !important;

}

.popup-btn:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:
        0 18px 35px rgba(37,99,235,.25);

}

.popup-btn i{

    transition:.3s;

}

.popup-btn:hover i{

    transform:translateX(5px);

}


/*==================================================
SERVICES DROPDOWN
==================================================*/

.services-menu{
    position:relative;
}

/* arrow animation */

.services-arrow{
    font-size:.8rem;
    margin-left:6px;
    transition:.3s;
}

/* popup box */

.services-popup{

    position:absolute;

    top:100%;
    margin-top:12px;
    left:50%;

    transform:translateX(-50%) translateY(10px);

    width:300px;

    padding:14px;

    background:#ffffff;

    border:1px solid #e8edf5;

    border-radius:20px;

    box-shadow:
        0 25px 60px rgba(15,23,42,.12);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .3s,
        transform .3s;

    z-index:9999;
}
/* show on hover */

.services-menu:hover .services-popup{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(0);
}

/* rotate arrow */

.services-menu:hover .services-arrow{
    transform:rotate(180deg);
}

/* popup items reuse training style */

.services-popup .popup-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:13px 15px;

    border-radius:14px;

    text-decoration:none;

    color:#475569;

    transition:.3s;
}

.services-popup .popup-item:hover{

    background:#f4f8ff;

    color:#2563eb;

    transform:translateX(4px);
}
.services-popup .popup-item::after{

    display:none;
}

/* icon */

.services-popup .popup-item i{

    width:22px;

    color:#2563eb;

    font-size:15px;

    text-align:center;
}

/* divider */

.services-popup .popup-divider{

    height:1px;

    background:#e5e7eb;

    margin:14px 0;
}

/* CTA button */

.services-popup .popup-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );
    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.services-popup .popup-btn::after{

    display:none;
}

.services-popup .popup-btn:hover i{

    transform:translateX(5px);
}

.services-popup .popup-btn i{

    transition:.3s;
}

.services-popup .popup-btn:hover{

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:
        0 18px 35px rgba(37,99,235,.25);
}
/*========================================
CURRENT PAGE INDICATOR
========================================*/

/* Text */

.nav-menu a.active,
.nav-menu li.active > a{
    color:#2563eb;
    font-weight:700;
}

/* Underline */

.nav-menu a.active::after,
.nav-menu li.active > a::after{
    width:100%;
    height:3px;
    background:linear-gradient(90deg,#2563eb,#60a5fa);
}

/* Glow */

.nav-menu a.active::before,
.nav-menu li.active > a::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:130%;
    height:110%;
    border-radius:50px;
    z-index:-1;
}

/* Arrow color */

.services-menu.active .services-arrow,
.training-menu.active .training-arrow{
    color:#2563eb;
}

/* Keep arrow rotated on active page */

.services-menu.active .services-arrow,
.training-menu.active .training-arrow,
.services-menu:hover .services-arrow,
.training-menu:hover .training-arrow{
    transform:rotate(180deg);
}