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

.aq-header{

    position:fixed;

    top:0;
    right:0;
    left:0;

    width:100%;

    z-index:999999;

    transition:.35s ease;

    padding:24px 0;
}


/* =================================================
SCROLLED
================================================= */

.aq-header.scrolled{

    padding:14px 0;

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

    backdrop-filter:
    blur(18px);

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

    box-shadow:
    0 10px 40px rgba(0,0,0,.05);

    border-bottom:
    1px solid rgba(255,255,255,.18);
}


/* =================================================
INNER
================================================= */

.aq-header-inner{

    width:min(1380px,94%);

    margin:auto;

    padding:0 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}


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

.aq-logo{

    font-size:38px;

    font-weight:900;

    color:#fff;

    text-decoration:none;

    letter-spacing:-1px;

    transition:.3s ease;
}

.aq-header.scrolled .aq-logo{

    color:#111827;
}


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

.aq-nav{

    display:flex;

    align-items:center;

    gap:42px;
}

.aq-nav a{

    position:relative;

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

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;
}

.aq-header.scrolled .aq-nav a{

    color:#111827;
}

.aq-nav a::after{

    content:"";

    position:absolute;

    right:0;
    bottom:-12px;

    width:0;
    height:3px;

    border-radius:20px;

    background:#8B5CF6;

    transition:.3s ease;
}

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

    width:100%;
}


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

.aq-actions{

    display:flex;

    align-items:center;

    gap:22px;
}


/* =================================================
LOGIN
================================================= */

.aq-login{

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

    font-weight:700;

    text-decoration:none;
}

.aq-header.scrolled .aq-login{

    color:#111827;
}


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

.aq-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:56px;

    padding:0 32px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #6D28D9,
        #8B5CF6
    );

    color:#fff;

    text-decoration:none;

    font-weight:800;

    transition:.3s ease;
}


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

.aq-mobile-toggle{

    width:54px;
    height:54px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    cursor:pointer;
}

.aq-mobile-toggle span{

    width:24px;
    height:2px;

    background:#fff;

    border-radius:20px;
}

.aq-header.scrolled .aq-mobile-toggle{

    background:#fff;
}

.aq-header.scrolled .aq-mobile-toggle span{

    background:#111827;
}


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

.aq-mobile-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:999997;
}

.aq-mobile-overlay.active{

    opacity:1;

    visibility:visible;
}


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

.aq-mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:340px;

    max-width:90%;

    height:100vh;

    background:#fff;

    z-index:999998;

    transition:.4s ease;

    padding:34px;

    display:flex;

    flex-direction:column;
}

.aq-mobile-menu.active{

    right:0;
}


/* =================================================
CLOSE
================================================= */

.aq-mobile-close{

    width:52px;
    height:52px;

    border-radius:18px;

    background:#F3F4F6;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    cursor:pointer;

    margin-bottom:34px;
}


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

.aq-mobile-logo{

    font-size:34px;

    font-weight:900;

    color:#111827;

    margin-bottom:40px;
}


/* =================================================
MOBILE NAV
================================================= */

.aq-mobile-nav{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.aq-mobile-nav a{

    display:flex;

    align-items:center;

    height:64px;

    padding:0 22px;

    border-radius:20px;

    background:#F9FAFB;

    color:#111827;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    transition:.3s ease;
}

.aq-mobile-nav a:hover,
.aq-mobile-nav a.active{

    background:#6D28D9;

    color:#fff;
}


/* =================================================
MOBILE ACTIONS
================================================= */

.aq-mobile-actions{

    margin-top:auto;

    display:flex;

    flex-direction:column;

    gap:16px;
}


/* =================================================
MOBILE LOGIN
================================================= */

.aq-mobile-login{

    height:58px;

    border-radius:18px;

    background:#F3F4F6;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#111827;

    text-decoration:none;

    font-weight:700;
}


/* =================================================
MOBILE BUTTON
================================================= */

.aq-mobile-btn{

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
        135deg,
        #6D28D9,
        #8B5CF6
    );

    color:#fff;

    text-decoration:none;

    font-weight:800;
}


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

@media(max-width:992px){

    .aq-nav,
    .aq-actions{

        display:none;
    }

    .aq-mobile-toggle{

        display:flex;
    }

}


/* =================================================
DESKTOP
================================================= */

@media(min-width:993px){

    .aq-mobile-menu,
    .aq-mobile-overlay{

        display:none !important;
    }

}