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

@media(max-width:992px){


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

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

gap:15px;

height:80px;

}

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

.logo{

display:flex;

align-items:center;

gap:12px;

flex:1;

min-width:0;


}


.logo img{

width:50px;

height:50px;

flex-shrink:0;

}

.logo span{

display:block;

font-size:0.88rem;

font-weight:700;

line-height:1.15;

max-width:180px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

color:#fff;

}

.header.scrolled .logo span{

color:var(--dark);

}

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

.nav-btn{

display:none;

}






    .menu-toggle{

display:flex;

justify-content:center;

align-items:center;

z-index:10002;

margin-left:auto;

flex-shrink:0;

}

.navbar{

position:fixed;

top:95px;

left:50%;

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

width:calc(100% - 30px);

max-width:420px;

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

backdrop-filter:blur(22px);

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

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

border-radius:22px;

padding:30px;

opacity:0;

visibility:hidden;

pointer-events:none;

transition:

opacity .35s ease,

transform .35s ease;

box-shadow:

0 25px 50px rgba(0,0,0,.30);

}

.navbar.active{

opacity:1;

visibility:visible;

pointer-events:auto;

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

}

.nav-links{

flex-direction:column;

align-items:stretch;

gap:10px;

}

.nav-links li{

width:100%;

}

.nav-links a{

display:flex;

align-items:center;

justify-content:center;

padding:16px;

border-radius:14px;

font-size:1.05rem;

color:#fff;

background:transparent;

transition:.3s;

}

.nav-links a:hover{

    background: rgba(255,193,7,.12);

    color: var(--accent);

}

.nav-links a.active{

    background: rgba(255,193,7,.12);

    color: #ffffff;

}

.nav-links a::after{

display:none;

}



}






@media(max-width:768px){


.navbar .nav-links a{
    color:#fff;
}

.navbar .nav-links a:hover,
.navbar .nav-links a.active{
    color:var(--accent);
}

.logo img{

width:46px;

height:46px;

}

.logo span{

font-size:0.82rem;

line-height:1.1;

max-width:160px;

}




    .navbar{

top:88px;

padding:25px;

}

.nav-links a{

padding:15px;

font-size:1rem;

}

}






@media(max-width:480px){


.logo img{

width:42px;

height:42px;

}

.logo span{

font-size:0.76rem;

line-height:1.1;

max-width:140px;

}






    .navbar{

width:calc(100% - 20px);

padding:20px;

border-radius:18px;

}

.nav-links a{

padding:14px;

font-size:.95rem;

}

}