.short-header{
     
    position:relative;
    z-index:100;
}

.logo{
    font-size:24px;
    font-weight:bold;
}

.nav{
    display:flex;
    gap:32px;
}

.nav .nav-link{
  
}

.hamburger{
    width:40px;
    height:40px;
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    border:none;
    background:none;
    padding:0;
}

.hamburger span{
    width:100%;
    height:3px;
    background:#222;
    transition:.3s;
}

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    opacity:0;
    visibility:hidden;
    transition:.3s;
}

.overlay.active{
    opacity:1;
    visibility:visible;
}

/* Mobile */



/* Hamburger Animation */

.hamburger.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

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

.hamburger.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}