/* HEADER */

  .contacts-dsk,
  .pages-dsk a{
    display: none;
  }

  .header{
    border-bottom: 1px solid var(--black10);
  }

  .header-container{
    width: min(472px, 80%);
    margin: 0 auto;
  

    display: flex;
    justify-content: space-between;
    align-items: center;

    overflow: hidden;
  }

  .logo{
    padding-block: 2rem;
    z-index: -15;
  }

  .header-hamburger-menu{
    position: absolute;
    right: 2rem;
    top: 2.2rem;
  }

  .fa-bars, .fa-xmark{
    font-size: 1.5rem;
  }

  .fa-xmark{
    position: absolute;
    left: 2rem;
    top: 2rem;
  }

  .header-navigation-menu{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;

    overflow: hidden;

    background-color: var(--light-bg);
    box-shadow: 0 0 10rem 1rem var(--black75);

    z-index: 10;

    transition: left 350ms ease-in-out;
  }

  .open{
    left: 50%;
  }

  .header-navigation-menu a{
    text-decoration: none;
    font-family: var(--roboto);
    line-height: 2rem;
    color: var(--black75);
  }

  .header-navigation-menu ul{
    margin-top: -3rem;
  }

  .header-navigation-menu li{
    margin-top: 3rem;
    font-size: 4vw;
    font-weight: 400;
  }

  .overlay{
    position: absolute;

    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;

    background-color: var(--black75);

  }

  .active{
    left: 0;
    z-index: 5;
  }

  .header-navigation-menu ul {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


 .contacts{
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);

    text-align: center;
 }

 .contacts p{
  font-family: var(--roboto);
  line-height: 1.5rem;
  color: var(--black75);
  
  word-wrap: break-word;
  font-size: .8rem;
 }

 .contacts p + p{
    margin-top: 0.5rem;
 }

 .social{
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
 }

 .social i+i{
  margin-left: 2.5vw;
 }

 .social-tb-dkt{
  display: none;
 }


 @media (min-width: 600px) and (max-width: 1200px){

  .logo{
    padding-block: 1rem ;
  }

  .social-tb-dkt{
    display: inline;
    margin-right: 5vw;
    margin-left: 25%;
  }

  .social-tb-dkt i + i{
    margin-left: 2.5vw;
  }

  .social{
    display: none;
  }

  .header-container,
  .hero{
    width: 80%;
  }

  .vl1{
    height: 1rem;
    width: 1px;
    background-color: var(--black50);
    
    margin-right: 4rem;
  }

  .header-hamburger-menu{
    top: auto;
  }


 }

 @media (min-width: 1200px){
  .header-container{
    width: 90%;
    margin: 0 auto;

    justify-content:start;
  }
  
  .logo{
    display: inline-block;

    margin-right: 2rem;

    height: 3rem;

    position: relative;
  }

  .logo img{
    transform: translateY(-50%);
  }

  .header-container a{
    display: inline;

    margin-left: 2rem;
  }

  .header-hamburger-menu,
  .header-navigation-menu{display: none;}

  .social-tb-dkt{
    display: inline;
  }

  .social-tb-dkt i + i {
    margin-left: 1rem;
  }

  .vl{
    height: 1rem;
    width: 1px;
    margin-right: 4rem;

    background-color: var(--black50);

  }
  .contacts-dsk{
    margin-left: auto;
    margin-right: 4rem;

    display: flex;

    gap: 2rem;
  }

  .contacts-dsk p{
      text-decoration: none;

      color: var(--black100);

      font-family: var(--roboto);
      font-size: 1rem;

      font-weight: 700;
  }



  .pages-dsk a{
    text-decoration: none;

    color: var(--black100);

    font-family: var(--roboto);
    font-size: 1rem;

    font-weight: 700;

  }

  #email{
    color: var(--accent);
  }
  
 }