/*========================*/
/* HEADER */
/*========================*/

#header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(17, 25, 51, 0.22);
  transition: background-color 0.3s linear;
}

#header.add-bg{  background-color: var(--color-dark);  }

.nav-wrap{
  --pd-vert: 15px;
  padding: var(--pd-vert) 30px;
  background-color: transparent;
}

@media only screen and (max-width: 1080px){
  .nav-wrap{
    --pd-vert: 9px;
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* ============================================== */
/* NAVIGATION */
/* ============================================== */

.nav{
  flex-grow: 1;
}
.nav.active{  transform: translate3d(0,0,0);  }

.nav-item{
  transition: color 0.2s linear;
  line-height: 1;
}

.nav-item:not(:last-child){  margin:0 20px 0 0;  }

.nav-item.current-item, .nav-item:hover{
  color: var(--color-green);
}

.nav-btn.btn{
  padding: 8px 24px;
}

.nav-btn:not(:last-child){
  margin-right: 10px;
}

.nav-btn.first-btn{
  margin-right: 25px;
}

.nav-btn:hover{
  background-color: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-dark);
}

@media only screen and (max-width: 1080px){
  .nav{
      width: min(100%, 320px);
      height: calc(100vh - var(--header-h));
      padding: 40px 20px 20px;
      position: absolute;
      right: max(-100%, -320px);
      right: 0;
      transform: translate3d(100%,0,0);
      top: var(--header-h);
      background-color: var(--color-black);
      transition: transform 0.3s ease;
  }

  .nav-item{
      padding: 10px 0;
      text-align: center;
  }

  .nav-item:not(:last-child){  margin:0 0 10px 0;  }

  .nav-btn:not(:last-child){
    margin-right: 0;
  }
  .nav-btn{
      margin: 10px 0 0;
  }
  .first-btn{
    margin: 0 0 20px;
  }
}

/* ============================================== */
/* LOGO */
/* ============================================== */

.logo img{
  height: 40px;
}

@media screen and (max-width: 1080px){
  .logo img{
    height: 30px;
  }
}

/*========================*/
/* HAMBURGER */
/*========================*/

.hamburger{
  --size: 42px;
  --bar-h: 2px;
  --bar-w: 60%;
  --bar-gap: 5px;
  --border-w: 0;
  --border-rd: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--size);
  height: var(--size);
  border: var(--border-w) solid #fff;
  border-radius: var(--border-rd);
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.2s linear;
}
.hamburger:hover, .hamburger.active{
  background-color: var(--color-black);
  border-color: var(--color-black);
}
.hamburger span{
  display: block;
  width: var(--bar-w);
  height: var(--bar-h);
  background-color: #fff;
  border-radius: calc( var(--bar-h) / 2 );
  transition-property: transform, opacity, background-color;
  transition: 0.2s linear;
}
.hamburger span:first-child{
  transform: translate3d(0,calc(var(--bar-gap) * -1),0);
}
.hamburger span:last-child{
  transform: translate3d(0,var(--bar-gap),0);
}
.hamburger.active span:first-child{
  transform: translate3d(0,var(--bar-h),0) rotate3d(0,0,1,-45deg);
}
.hamburger.active span:last-child{
  transform: translate3d(0,calc(var(--bar-h) * -1),0) rotate3d(0,0,1,45deg);
}
.hamburger.active span:nth-child(2){
  transform: scale3d(0,0,0);
  opacity: 0;
}
.hamburger:hover span, .hamburger.active span{
  background-color: var(--color-green);
}

@media only screen and (min-width: 1081px){
  .hamburger{  display: none;  }
}

/*========================*/
/* ANCHORS */
/*========================*/

.anchor:not(#home){
  transform: translateY(calc(var(--header-h) * -1 + 5px));
}
html{  scroll-behavior: smooth;  }

/*========================*/
/* LANG SWITCHER */
/*========================*/

#lang-btn{
  padding: 7px;
  border: none;
  /* background-color: var(--color-black); */
  background-color: transparent;
  transition: background-color 0.2s ease-out;
}
#lang-btn:hover{
  background-color: var(--color-black);
}
.lang-btn--icon{
  --size: 27px;
  width: var(--size);
  height: var(--size);
}
.st0{
  fill: #fff;
  transition: fill 0.2s ease;
}
:is(#lang-btn:hover, #lang-btn.active) .st0{
  fill: var(--color-green);
}

#lang-options{
  top: 100%;
  left: 0;
  max-height: 300px;
  min-width: 100px;
  transition: max-height, padding;
  transition: 0.3s linear;
  padding: 20px;
  background-color: var(--color-dark);
  z-index: 1;
}
#lang-options:not(.active){
  max-height: 0;
  padding: 0 20px;
}

.lang-switcher{
  margin-left: 40px;
  position: relative;
}
.lang-switcher a{
  padding: 3px 0;
  background-color: transparent;
  font-size: 14px;
  color: #fff;
  transition-property: border-color, background-color, color;
  transition: 0.2s ease-out;
}
.lang-switcher a:not(:last-child){
  margin-bottom: 5px;
}
.lang-switcher :is(a.active, a:hover){
  color: var(--color-green);
}
.lang-flag{
  width: 14px;
  margin-right: 3px;
}

@media only screen and (max-width: 1080px){
  .lang-switcher{
    margin-right: 20px;
    margin-left: auto;
  }
  #lang-options{
    left: auto;
    right: 0;
  }
}