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

/* Hidden on Desktop */

.mobile-overlay,
.mobile-drawer{
    display:none;
}

/*=========================================
        MOBILE ONLY
==========================================*/

@media (max-width:992px){

/*-------------------------
Overlay
-------------------------*/

.mobile-overlay{

    display:block;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(8px);

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

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9997;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

/*-------------------------
Drawer
-------------------------*/

.mobile-drawer{

    display:flex;

    flex-direction:column;

    position:fixed;

    top:0;

    right:-100%;

    width:88%;

    max-width:380px;

    height:100dvh;

    background:#08111f;

    transition:.45s cubic-bezier(.22,1,.36,1);

    z-index:9998;

    box-shadow:-15px 0 40px rgba(0,0,0,.35);

    overflow-y:auto;

    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

}

.mobile-drawer.active{

    right:0;

}

/*-------------------------
Header
-------------------------*/

.mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

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

}

.mobile-header img{

    height:46px;

}

.mobile-close{

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:26px;

    cursor:pointer;

    transition:.3s;

}

.mobile-close:hover{

    background:#2563eb;

    transform:rotate(90deg);

}

/*-------------------------
Brand
-------------------------*/

.mobile-brand{

    padding:35px 25px 15px;
    opacity:0;
transform:translateY(-15px);
transition:.45s;

}

.mobile-drawer.active .mobile-brand{

    opacity:1;

    transform:none;

}

.mobile-brand h2{

    color:#fff;

    font-size:30px;

    letter-spacing:2px;

    margin-bottom:8px;

}

.mobile-brand p{

    color:#8fa5c8;

    letter-spacing:1px;

    text-transform:uppercase;

    font-size:12px;

}

/*-------------------------
Navigation
-------------------------*/

.mobile-nav{

    display:flex;

    flex-direction:column;

    margin-top:25px;

}

.mobile-nav a{

    color:#fff;

    text-decoration:none;

    font-size:22px;

    font-weight:600;

    padding:18px 25px;

    transition:.3s;

    border-left:3px solid transparent;

}

.mobile-nav a{

    position:relative;

}

.mobile-nav a::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

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

    width:3px;

    height:65%;

    background:#2563eb;

    transition:.3s;

}

.mobile-nav a:hover{

    padding-left:40px;

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

}

.mobile-nav a:hover::before{

    transform:translateY(-50%) scaleY(1);

}

/*-------------------------
Footer
-------------------------*/

.mobile-footer{

    margin-top:auto;

    padding:25px;

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

}

/* CTA */

.mobile-cta{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:60px;

    border-radius:14px;

    background:linear-gradient(135deg,#2563eb,#06b6d4);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    margin-bottom:30px;

    transition:.35s;

}

.mobile-cta:hover{

    transform:translateY(-4px) scale(1.02);

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

}

/* Contact */

.mobile-contact{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.mobile-contact a{

    color:#9eb0ca;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

}

}



/*=========================================
        LINK ANIMATION
=========================================*/

.mobile-nav a{

    opacity:0;

    transform:translateX(30px);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        opacity .45s;

}

.mobile-drawer.active .mobile-nav a{

    opacity:1;

    transform:translateX(0);

}

.mobile-nav a:nth-child(1){transition-delay:.08s;}
.mobile-nav a:nth-child(2){transition-delay:.14s;}
.mobile-nav a:nth-child(3){transition-delay:.20s;}
.mobile-nav a:nth-child(4){transition-delay:.26s;}
.mobile-nav a:nth-child(5){transition-delay:.32s;}


/*=========================================
        ACTIVE MENU ITEM
=========================================*/

.mobile-nav a.active{

    color:#ffffff;

    background:rgba(37,99,235,.12);

    border-left:3px solid #2563eb;

    padding-left:38px;

}
.mobile-nav a.active::before{

    transform:translateY(-50%) scaleY(1);

}