.navbar{
position:fixed;
top:0;
left:0;
width:100%;
height:4em;

display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;

padding:0 4rem;

background:#070403;

z-index:2000;
}



.nav-left{
display:flex;
gap:15rem;
justify-self:start;
}

.nav-right{
display:flex;
gap:15rem;
justify-self:end;
}


/* LOGO */

.nav-logo{
justify-self:center;
display:flex;
align-items:center;
}

.nav-logo img{
height:1.8em;
display:block;
}


/* LINKS */

.navbar a{
color:#e6e6e6;
text-decoration:none;
font-size:1.05rem;
letter-spacing:1px;
font-weight:300;
transition:0.2s ease;
}

.navbar a:hover{
color:#FE6100;
}


/* HAMBURGER BUTTON*/

.nav-toggle{
display:none;
flex-direction:column;
gap:5px;

background:none;
border:none;
cursor:pointer;
}

.nav-toggle span{
width:26px;
height:3px;
background:#FE6100;
display:block;

transition:transform 0.3s ease, opacity 0.2s ease;
}




.mobile-menu{
display:none;
}




@media (max-width:1360px){

.nav-left,
.nav-right{
gap:10rem;
}

}
@media (max-width:1024px){

.nav-left,
.nav-right{
gap:5rem;
}

.navbar a{
font-size:0.95rem;
}

}



@media (max-width:768px){




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



.nav-toggle{
display:flex;
position:absolute;
right:1.5rem;
top:1.2rem;
z-index:3000;
}



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




.nav-toggle.active span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2){
opacity:0;
}

.nav-toggle.active span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}




.mobile-menu{
position:fixed;

top:4em;
left:0;

width:100%;
height:0;

background:#070403;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

gap:2.5rem;

overflow:hidden;

opacity:0;
transform:translateY(-10px);

transition:
height 0.45s cubic-bezier(.22,1,.36,1),
opacity 0.3s ease,
transform 0.45s cubic-bezier(.22,1,.36,1);

z-index:1500;
}


.mobile-menu.active{
height:calc(100vh - 4em);
opacity:1;
transform:translateY(0);
}

.mobile-menu a{
font-size:1.3rem;
letter-spacing:0.05em;
}

}