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

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:all .35s ease;
}

.site-header.scrolled{

    background:rgba(20,35,70,.65);

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

    box-shadow:0 10px 30px rgba(0,0,0,.18);

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

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

.navbar{

    height:var(--header-height);

    display:flex;

    align-items:center;

    justify-content:space-between;
}

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

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;
}

.logo img{

    width:46px;
    height:46px;

    object-fit:contain;
}

.logo-text{

    display:flex;

    flex-direction:column;
}

.logo-text strong{

    color:#fff;

    font-size:20px;

    font-family:'Poppins',sans-serif;

    font-weight:700;

    line-height:1.1;
}

.logo-text span{

    color:var(--muted);

    font-size:13px;
}


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

.back-button{

    width:46px;
    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

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

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

    transition:.3s;
}

.back-button:hover{

    background:var(--accent);

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(255,87,34,.35);
}

.back-button svg{

    transition:.25s;
}

.back-button:hover svg{

    transform:translateX(-3px);
}

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

.nav-menu{

    display:flex;

    align-items:center;

    list-style:none;

    gap:34px;
}

.nav-menu li{

    position:relative;
}

.nav-menu a{

    color:#fff;

    font-weight:500;

    font-size:15px;

    padding:8px 0;

    position:relative;
}

/* underline */

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-4px;

    width:0;

    height:2px;

    border-radius:10px;

    background:var(--accent);

    transition:.3s;
}

.nav-menu a:hover{

    color:#fff;
}

.nav-menu a:hover::after{

    width:100%;
}

.nav-menu .active::after{

    width:100%;
}

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

.nav-right{

    display:flex;

    align-items:center;

    gap:18px;
}

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

.nav-cta{

    height:46px;

    padding:0 24px;

    border-radius:999px;

    background:var(--accent);

    color:#fff;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-weight:600;

    transition:.3s;
}

.nav-cta:hover{

    background:var(--accent-hover);

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(255,87,34,.30);
}

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

.mobile-toggle{

    width:46px;
    height:46px;

    display:none;

    cursor:pointer;

    border:none;

    border-radius:12px;

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

    align-items:center;

    justify-content:center;

    transition:.3s;
}

.mobile-toggle:hover{

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

/* ===========================================================
   HAMBURGER
=========================================================== */

.mobile-toggle span{

    display:block;

    width:22px;

    height:2px;

    background:#fff;

    position:relative;

    transition:.3s;
}

.mobile-toggle span::before,
.mobile-toggle span::after{

    content:"";

    position:absolute;

    left:0;

    width:22px;

    height:2px;

    background:#fff;

    transition:.3s;
}

.mobile-toggle span::before{

    top:-7px;
}

.mobile-toggle span::after{

    top:7px;
}

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

.mobile-toggle.active span{

    background:transparent;
}

.mobile-toggle.active span::before{

    top:0;

    transform:rotate(45deg);
}

.mobile-toggle.active span::after{

    top:0;

    transform:rotate(-45deg);
}

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

.mobile-menu{

    position:absolute;

    top:100%;
    left:0;

    width:100%;

    background:rgba(20,35,70,.96);

    backdrop-filter:blur(20px);

    display:none;

    flex-direction:column;

    padding:20px;

    border-top:1px solid rgba(255,255,255,.08);
}

.mobile-menu a{

    color:#fff;

    padding:16px 0;

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

.mobile-menu a:last-child{

    border-bottom:none;
}

.mobile-menu.show{

    display:flex;

    animation:mobileMenu .35s ease;
}

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

.mobile-menu .btn{

    margin-top:18px;

    width:100%;
}

/* ===========================================================
   KEYFRAME
=========================================================== */

@keyframes mobileMenu{

    from{

        opacity:0;

        transform:translateY(-15px);
    }

    to{

        opacity:1;

        transform:none;
    }
}