.navbar{
position:fixed;
top:0;
left:0;
width:100%;
height:75px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 60px;
z-index:1000;
transition:.4s ease;
background:transparent;
}

.navbar.scrolled{
background:rgba(8,12,28,.72);
backdrop-filter:blur(20px);
border-bottom:1px solid rgba(255,255,255,.1);
box-shadow:0 15px 50px rgba(0,0,0,.35);
}

.nav-left{
display:flex;
align-items:center;
gap:16px;
margin-left:45px;
}

.server-logo{
width:48px;
height:48px;
object-fit:contain;
}

.server-info h2{
font-size:19px;
font-weight:900;
letter-spacing:-.4px;
line-height:1.1;
font-family:"Orbitron",sans-serif;
}

.server-info span{
display:block;
margin-top:5px;
font-family:"Orbitron",sans-serif;
font-size:15px;
letter-spacing:2px;
font-weight:600;
word-spacing:4px;
background:linear-gradient(90deg,#52ffe0,#64dcff,#9b7bff);
-webkit-background-clip:text;
color:transparent;
text-shadow:0 0 18px rgba(100,220,255,.3);
opacity:.95;
}

.nav-center{
display:flex;
align-items:center;
gap:55px;
position:absolute;
left:50%;
transform:translateX(-50%);
}

.nav-center a{
font-size:18px;
font-weight:750;
color:#dce5ff;
position:relative;
padding:10px 0;
transition:.3s ease;
}

.nav-center a:after{
content:"";
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:0;
height:2px;
border-radius:20px;
background:linear-gradient(90deg,#52ffe0,#64dcff,#9b7bff);
transition:.35s ease;
}

.nav-center a:hover,
.nav-center a.active{
color:#fff;
}

.nav-center a:hover:after,
.nav-center a.active:after{
width:100%;
}

.nav-right{
display:flex;
align-items:center;
margin-right:30px;
}

.store-button{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 25px;
border-radius:16px;
font-size:17px;
font-weight:850;
color:white;
background:linear-gradient(145deg,#7ee8ff,#9b7bff);
border:1px solid rgba(255,255,255,.35);
box-shadow:
inset 0 3px 8px rgba(255,255,255,.35),
inset 0 -6px 12px rgba(60,90,180,.35),
0 8px 0 #4c5fc4,
0 14px 25px rgba(0,0,0,.35);
transition:.25s ease;
position:relative;
}

.store-button:hover{
transform:translateY(-4px);
box-shadow:
inset 0 3px 8px rgba(255,255,255,.45),
inset 0 -6px 12px rgba(60,90,180,.35),
0 12px 0 #4c5fc4,
0 20px 30px rgba(0,0,0,.4);
}

.store-button:active{
transform:translateY(5px);
box-shadow:
inset 0 3px 8px rgba(255,255,255,.3),
inset 0 -4px 8px rgba(60,90,180,.3),
0 3px 0 #4c5fc4,
0 8px 15px rgba(0,0,0,.3);
}

@media(max-width:1200px){

.navbar{
padding:0 40px;
}

.nav-left{
margin-left:15px;
}

.nav-center{
gap:40px;
}

.nav-center a{
font-size:16px;
}

.store-button{
padding:11px 22px;
font-size:16px;
}

}

@media(max-width:900px){

.navbar{
padding:0 20px;
height:70px;
}

.nav-left{
margin-left:0;
gap:12px;
}

.server-logo{
width:42px;
height:42px;
}

.server-info h2{
font-size:17px;
}

.server-info span{
font-size:10px;
}

.nav-right{
margin-right:0;
}

.store-button{
padding:11px 18px;
font-size:15px;
}

.store-button svg{
width:20px;
height:20px;
}

}

.mobile-menu-button{
display:none;
}

.mobile-menu{
display:none;
}

@media(max-width:900px){

.navbar{
height:70px;
padding:0 20px;
}

.mobile-menu-button{
display:flex;
width:32px;
height:25px;
flex-direction:column;
justify-content:space-between;
cursor:pointer;
z-index:1100;
}

.mobile-menu-button span{
width:100%;
height:3px;
border-radius:10px;
background:white;
transition:.3s ease;
}


.nav-left{
position:absolute;
left:50%;
transform:translateX(-50%);
margin-left:0;
gap:0;
}


.server-logo{
display:none;
}


.server-info h2{
font-size:17px;
text-align:center;
}


.server-info span{
display:none;
}


.nav-center,
.nav-right{
display:none;
}


.mobile-menu{

position:absolute;
top:70px;
left:0;
width:100%;
padding:25px 20px;
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
background:rgba(8,12,28,.95);
backdrop-filter:blur(20px);
border-bottom:1px solid rgba(255,255,255,.1);
box-shadow:0 20px 40px rgba(0,0,0,.35);

opacity:0;
visibility:hidden;
transform:translateY(-20px);
transition:.35s ease;

}


.mobile-menu a{

font-family:"Orbitron",sans-serif;
font-size:17px;
font-weight:700;
color:#dce5ff;
text-decoration:none;
transition:.3s ease;

}


.mobile-menu a:hover,
.mobile-menu a.active{

color:#64dcff;

}


.mobile-menu.active{

opacity:1;
visibility:visible;
transform:translateY(0);

}

}

.mobile-menu-button.active span:nth-child(1){
transform:translateY(11px) rotate(45deg);
}

.mobile-menu-button.active span:nth-child(2){
opacity:0;
}

.mobile-menu-button.active span:nth-child(3){
transform:translateY(-11px) rotate(-45deg);
}