/* NAV */



.nav{

  position:fixed;

  z-index:100;

  top:0;

  left:0;

  right:0;

  padding:26px 0;

  background:linear-gradient(#050504f0,#05050400);

  backdrop-filter:blur(10px);

}



.nav .wrap{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:28px;

}



.logo{

  font-family:Georgia,serif;

  font-size:26px;

  line-height:.9;

  text-transform:uppercase;

  letter-spacing:.05em;

  flex-shrink:0;

}



.logo small{

  display:block;

  font-family:Inter,Arial,sans-serif;

  font-size:9px;

  letter-spacing:.28em;

  color:#bdb7ae;

  margin-top:7px;

}



.menu a.active{

  color:var(--gold);

}



.menu{

  display:flex;

  gap:34px;

  align-items:center;



  text-transform:uppercase;

  font-size:11px;

  font-weight:700;

  letter-spacing:.16em;



  color:#c8c0b8;

}



.menu a{

  transition:.2s ease;

}



.menu a:hover{

  color:var(--gold2);

}



.logo{

  display:flex;

  align-items:center;

  gap:16px;

  flex-shrink:0;

}



.logo img{

  width:58px;

  height:58px;

  object-fit:contain;

  display:block;

}



.logo-text{

  font-family:Georgia,serif;

  font-size:24px;

  line-height:.9;

  text-transform:uppercase;

  letter-spacing:.05em;

}



.logo-text small{

  display:block;



  margin-top:8px;



  font-family:Inter,Arial,sans-serif;

  font-size:9px;

  letter-spacing:.28em;



  color:#bdb7ae;

}



.footer-logo img{

  width:54px;

  height:54px;

}



/* RESPONSIVE */



@media(max-width:700px){



  .logo{

    gap:12px;

  }



  .logo img{

    width:50px;

    height:50px;

  }



  .logo-text{

    font-size:20px;

  }



}



@media(max-width:480px){



  .logo img{

    width:44px;

    height:44px;

  }



  .logo-text{

    font-size:17px;

  }



  .logo-text small{

    font-size:8px;

    letter-spacing:.18em;

  }



}



.btn{

  display:inline-flex;

  align-items:center;

  gap:18px;

  border:1px solid var(--line);

  padding:16px 24px;

  text-transform:uppercase;

  font-size:12px;

  font-weight:700;

  letter-spacing:.16em;

  transition:.25s ease;

}



.btn:hover{

  border-color:var(--gold);

  color:var(--gold2);

}



/* HAMBURGER */



.hamburger{

  display:none;



  width:46px;

  height:46px;



  padding:0;



  background:none;

  border:0;

  cursor:pointer;



  position:relative;

  z-index:120;

}



.hamburger span{

  position:absolute;

  left:10px;



  width:26px;

  height:2px;



  background:#f2eee8;



  transition:.25s ease;

}



.hamburger span:nth-child(1){

  top:14px;

}



.hamburger span:nth-child(2){

  top:22px;

}



.hamburger span:nth-child(3){

  top:30px;

}



.hamburger.active span:nth-child(1){

  transform:rotate(45deg);

  top:22px;

}



.hamburger.active span:nth-child(2){

  opacity:0;

}



.hamburger.active span:nth-child(3){

  transform:rotate(-45deg);

  top:22px;

}



/* FOOTER */



.footer{

  padding:34px 0;

  border-top:1px solid var(--line);

}



.footer-wrap{

  display:flex;

  align-items:end;

  justify-content:space-between;

  gap:40px;

}



.footer-brand small{

  display:block;

  margin-top:18px;

  color:#7f7972;

  font-size:11px;

  line-height:1.7;

  letter-spacing:.14em;

  text-transform:uppercase;

}



.footer-facebook{

  display:inline-flex;

  align-items:center;

  gap:14px;



  color:#d7d1ca;



  font-size:12px;

  font-weight:700;

  letter-spacing:.16em;

  text-transform:uppercase;



  transition:.25s ease;

}



.footer-facebook:hover{

  color:var(--gold2);

}



.footer-facebook svg{

  width:18px;

  height:18px;

}



/* RESPONSIVE */



@media(max-width:850px){



  .hamburger{

    display:block;

  }



  .menu{

    position:fixed;



    top:0;

    right:-100%;



    width:320px;

    height:100vh;



    padding:120px 40px;



    background:#050504;



    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;



    gap:26px;



    transition:.35s ease;

  }



  .menu.active{

    right:0;

  }



  .menu a{

    font-size:12px;

  }



}



@media(max-width:650px){



  .footer-wrap{

    flex-direction:column;

    align-items:flex-start;

    gap:26px;

  }



}



@media(max-width:480px){



  .menu{

    width:100%;

  }



  .logo{

    font-size:22px;

  }



  .logo small{

    font-size:8px;

  }



}