/*==================================================
    REMUNERX WEBSITE V2
    NAVBAR
==================================================*/

/*==============================
    HEADER
===============================*/

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:.35s ease;

    padding:18px 0;

}

.header.scrolled{

    padding:12px 0;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(226,232,240,.8);

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

}

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

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

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

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    height:48px;

    width:auto;

    transition:.3s ease;

}

.header.scrolled .logo img{

    height:42px;

}

/*==============================
    NAVIGATION
===============================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:34px;

    margin-left:auto;

}

.nav-links li{

    position:relative;

}

.nav-links a{

    position:relative;

    font-size:15px;

    font-weight:600;

    color:var(--dark);

    transition:.3s ease;

    padding:8px 0;

}

.nav-links a:hover{

    color:var(--primary);

}

/* underline animation */

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    border-radius:2px;

    background:var(--primary);

    transition:width .3s ease;

}

.nav-links a:hover::after,
.nav-links a.active::after{

    width:100%;

}

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

.nav-links li.active a{

    color:var(--primary);

}

.nav-links li.active a::after{

    width:100%;

}

/*==============================
    NAV ACTIONS
===============================*/

.nav-actions{

    display:flex;

    align-items:center;

    gap:14px;

    margin-left:20px;

}

.nav-actions .btn{

    padding:14px 24px;

    border-radius:14px;

    font-size:15px;

}

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

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:14px;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s ease;

}

.menu-toggle:hover{

    background:var(--primary);

    color:#fff;

}

.menu-toggle i{

    font-size:22px;

}

/*=========================================
    MOBILE NAVIGATION
==========================================*/

@media (max-width: 992px){

    .menu-toggle{

        display:flex;

        z-index:1002;

    }

    .nav-actions{

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

    }

    .nav-links{

        position:fixed;

        top:0;

        right:-100%;

        width:340px;

        max-width:90%;

        height:100vh;

        background:#ffffff;

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

        gap:0;

        padding:110px 35px 40px;

        margin:0;

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

        transition:right .4s ease;

        overflow-y:auto;

        z-index:1001;

    }

    .nav-links.active{

        right:0;

    }

    .nav-links li{

        width:100%;

        border-bottom:1px solid var(--border);

    }

    .nav-links li:last-child{

        border-bottom:none;

    }

    .nav-links a{

        display:flex;

        align-items:center;

        justify-content:space-between;

        width:100%;

        padding:18px 0;

        font-size:17px;

        font-weight:600;

    }

    .nav-links a::after{

        display:none;

    }

    .nav-links a:hover{

        color:var(--primary);

        padding-left:8px;

    }

}

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

.mobile-actions{

    display:none;

}

@media(max-width:992px){

    .mobile-actions{

        display:flex;

        flex-direction:column;

        width:100%;

        gap:15px;

        margin-top:30px;

    }

    .mobile-actions .btn{

        width:100%;

    }

}

/*=========================================
    OVERLAY
==========================================*/

.nav-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(3px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:1000;

}

.nav-overlay.active{

    opacity:1;

    visibility:visible;

}

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

.menu-toggle.active{

    background:var(--primary);

    color:#fff;

}

.menu-toggle i{

    transition:.3s ease;

}

.menu-toggle.active i{

    transform:rotate(90deg);

}

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

.has-dropdown{

    position:relative;

}

.has-dropdown>a{

    display:flex;

    align-items:center;

    gap:8px;

}

.has-dropdown>a i{

    font-size:12px;

    transition:.3s ease;

}

.dropdown{

    position:absolute;

    top:calc(100% + 20px);

    left:0;

    min-width:240px;

    background:#fff;

    border-radius:18px;

    border:1px solid var(--border);

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

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.3s ease;

    overflow:hidden;

}

.has-dropdown:hover .dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.has-dropdown:hover>a i{

    transform:rotate(180deg);

}

.dropdown li{

    border-bottom:1px solid var(--border);

}

.dropdown li:last-child{

    border-bottom:none;

}

.dropdown a{

    display:block;

    padding:15px 20px;

    font-size:15px;

    color:var(--text);

    transition:.3s ease;

}

.dropdown a:hover{

    background:var(--primary-light);

    color:var(--primary);

    padding-left:28px;

}

/*=========================================
    MOBILE DROPDOWN ACCORDION
==========================================*/

@media (max-width:992px){

    .has-dropdown{

        width:100%;

    }

    .has-dropdown > a{

        display:flex;

        align-items:center;

        justify-content:space-between;

        width:100%;

    }

    .has-dropdown > a i{

        transition:.35s ease;

    }

    .has-dropdown.open > a i{

        transform:rotate(180deg);

    }

    .dropdown{

        position:static;

        min-width:100%;

        max-height:0;

        opacity:1;

        visibility:visible;

        transform:none;

        overflow:hidden;

        border:none;

        border-radius:0;

        background:#F8FAFC;

        box-shadow:none;

        transition:max-height .35s ease;

    }

    .has-dropdown.open .dropdown{

        max-height:500px;

    }

    .dropdown li{

        border:none;

    }

    .dropdown a{

        padding:14px 20px 14px 30px;

        font-size:15px;

        color:var(--muted);

    }

    .dropdown a:hover{

        background:#EFF6FF;

        color:var(--primary);

        padding-left:36px;

    }

}

/*=========================================
    SCROLL PROGRESS BAR
==========================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary),
        var(--accent)
    );

    z-index:10000;

    transition:width .15s linear;

}

/*=========================================
    NAVBAR SHADOW ANIMATION
==========================================*/

.header::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(37,99,235,.15),
        transparent
    );

    opacity:0;

    transition:.3s ease;

}

.header.scrolled::after{

    opacity:1;

}

/*=========================================
    BUTTON ENHANCEMENTS
==========================================*/

.nav-actions .btn-primary{

    min-width:150px;

}

.nav-actions .btn-primary:hover{

    transform:translateY(-3px);

}

.nav-actions .btn-secondary:hover{

    transform:translateY(-3px);

}

/*=========================================
    NAV LINK EFFECT
==========================================*/

.nav-links a{

    overflow:hidden;

}

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

.logo:hover img{

    transform:scale(1.04);

}

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

@media(max-width:768px){

    .header{

        padding:14px 0;

    }

    .header.scrolled{

        padding:10px 0;

    }

    .logo img{

        height:40px;

    }

    .header.scrolled .logo img{

        height:36px;

    }

    .nav-links{

        width:300px;

        padding:90px 25px 30px;

    }

}

@media(max-width:576px){

    .nav-links{

        width:100%;

        max-width:100%;

        right:-100%;

    }

    .menu-toggle{

        width:44px;

        height:44px;

    }

    .menu-toggle i{

        font-size:20px;

    }

}

/*=========================================
    ACCESSIBILITY
==========================================*/

.nav-links a:focus,

.btn:focus,

.menu-toggle:focus{

    outline:2px solid var(--primary);

    outline-offset:4px;

}

/* Remove browser focus border from menu links */
.nav-links a,
.nav-links a:link,
.nav-links a:visited{
    outline:none;
}

.nav-links a:hover,
.nav-links a:focus,
.nav-links a:focus-visible,
.nav-links a:active{

    outline:none !important;
    box-shadow:none !important;

}

.nav-links a{
    -webkit-tap-highlight-color:transparent;
}

@media (max-width:768px){

    .navbar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:14px 16px;
        gap:8px;
    }

    .nav-actions{
        display:flex;
        align-items:center;
        margin-left:auto;
        margin-right:0;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        flex-shrink:0;
        margin-left:8px;
    }

    .logo img{
        width:150px;
        height:auto;
    }

}

/*=========================================
    END OF NAVBAR.CSS
==========================================*/