.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  height: 100%;
  z-index: 100;
  overflow: hidden;
}

/* .no-js .header{
  position: relative;
  clip-path: none!important;
} */

.header__container {
  position: relative;
  margin-inline: auto;
  padding: calc(var(--outer-padding) * 1.5);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;


}


.nav__footer{
  font-size: 11px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.nav__footer a{
  text-transform: uppercase;
}

.nav__socials{
  margin-top: auto;
  margin-bottom: 1rem;
  font-size: 11px;
}
.nav__socials svg {
  width: 22px;

}

.nav__overlay {
  display: block;
  background-color: rgb(28, 28, 28);
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;

}






.toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 2;
  position: absolute;
  z-index: 1;
  top:1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
}




@media (min-width: 899.5px) {
  .nav__overlay {
    opacity: 1;
  }
  .toggler {
    display: none;
    z-index: 1;
  }
}


.nav__logo {
  width: auto;
  width: 100%;
  height: 40px;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  z-index: 1;

}

.nav__logo svg {
  color:#fff;
  width:100%;
  height:auto;
}

.nav__logo img {
  color:#fff;
  width: 100%;
}




.nav {
  margin-top: auto;
}

.nav__list {
  position: relative;
  display: flex;
  flex-direction: column;
  list-style: none;

}

.nav__item {}

.nav__link {
  position: relative;
  /* font-size: .8rem; */
  line-height: 1.5;
  letter-spacing: .05em;
  font-weight: 300;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: .5em 0;

}

.nav__link span{
  position: relative;
}
.nav__link span::after {
  margin-top: 1em;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transition: all 0.3s ease;
  will-change: transform;
  transform-origin: 0 0;
  transform:scaleX(0);
}

.nav__link[data-active] span::after {
  transform:scaleX(1);
}


.lang__link{

}

.nav__socials a{
display: inline-flex;
}
.nav__socials a>*{
  pointer-events: none;
}
.nav__socials a:not(:first-child){
  margin-left:.5rem;
}



@media (max-width: 900px) {

  .nav__logo {
    width:calc(100% - 3rem);
    display: flex;
    align-items: center;
    max-width: 178px;
    height: 40px;

  }
  .nav__logo img{
    width: auto;
    }


  .header{
    transition: clip-path .35s;
    max-width: unset;
    /* will-change: clip-path; */
    clip-path: polygon(0% 0%, 100% 0%, 100% 80px, 0 80px );
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80px, 0 80px );
  }

  .header.is-opened{
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100% );
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100% );
  }

/*
  .nav__overlay {
    transition: transform .35s ease;
    transform: translateY(calc( -100% + 80px));
  }

  .is-opened .nav__overlay {
    transform: translateY(0)!important;
  }

  .is-scrolled .nav__overlay{
    transform: translateY(-100%);
  } */





  .nav {
    pointer-events: none;
  }
  .is-opened .nav {
    pointer-events: all;
    visibility: visible;
  }
  .nav__list {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .nav__link {
    font-size: 1.1rem;
  }

  .nav__languages{
    font-size: 11px;
  }





  .fx {
    transition: transform 0.35s ease , opacity .3s ;
  }

  .stagger .fx {
    transform-origin: 50% 0%;
    transition-duration: 0s !important;
    opacity: 0;
    transform: translateY(10px) scaleY(1);
  }

  .is-opened .stagger .fx {
    opacity: 1;
    transition-duration: 0.35s !important;
    transform: translateY(0);
    transition-delay: calc(0.05s * var(--i, 1));
  }

  .fx2{
    opacity: 0;
    transition: opacity .35s;
  }
  .is-opened .stagger .fx2 {
    opacity: 1;
    transition-delay: calc(0.055s * var(--i, 1));
  }



}



.burger-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.burger-button {
  position: relative;
  width: 36px;
  height: 36px;
  transition: all 0.3s;
}

.burger-button::before,
.burger-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 18px;
  height: 1px;
  background-color: #fff;
  transition: all 0.3s ease;
  will-change: transform;
}

.burger-button::before {
  transform: translate(8px, 13px)
}

.burger-button::after {
  transform: translate(8px, 20px)
}

.is-opened .burger-button::before {
  transform: translate(8px, 16px) rotate(45deg);
}

.is-opened .burger-button::after {
  transform: translate(8px, 16px) rotate(-45deg);
}


/** for click handeling**/
.nav__logo>*,
.nav__link >*{
  pointer-events: none;
}



.pattern-bg {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='69.141' height='40' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 16%, 1)'/><path d='M69.212 40H46.118L34.57 20 46.118 0h23.094l11.547 20zM57.665 60H34.57L23.023 40 34.57 20h23.095l11.547 20zm0-40H34.57L23.023 0 34.57-20h23.095L69.212 0zM34.57 60H11.476L-.07 40l11.547-20h23.095l11.547 20zm0-40H11.476L-.07 0l11.547-20h23.095L46.118 0zM23.023 40H-.07l-11.547-20L-.07 0h23.094L34.57 20z'  stroke-width='1' stroke='hsla(0, 0%, 12%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}