<header class="header" id="header">
         <div class="header__top">
            <div class="header__logo">
               <img src="./image/header/SWD-white_300ppi 1.svg" alt="">
            </div>
            <div class="header__number">
               <a href="tel:+380968858899">+38 096 885 88 99</a>
               <div class="header__btn"><a href="#form">
                     Заказать проект
                  </a></div>
            </div>
         </div>
         <div class="header__content">
            <div class="header__wrap">
               <div class="header__menu "  unselectable="on">
      <div class="header__hamburger-menu">
         <input id="menu__toggle" type="checkbox" />
         <label class="menu__btn" for="menu__toggle">
            <span class="icon"></span>
         </label>

         <ul class="menu__box">
            <li><a class="menu__item" href="./index.html">Главная</a></li>
            <li><a class="menu__item" href="./contacs.html">Контакты</a></li>
            <li><a class="menu__item" href="./services.html">Услуги</a></li>
            <li><a class="menu__item" href="./portfolio.html">Портфолио</a></li>
            <li><a class="menu__item" href="./about-us.html">О нас</a></li>
         </ul>
      </div>
      <div class="header__mail">
         <a href="mailto:hello@swd.com">hello@swd.com</a>
      </div>
                </div>
               <div class="header__body">
                  <div class="header__text anim-items ">
                     <div class="header__text_1 ">
                        <p class="anim-items"><span class="anim-items">s</span>tudio</p>
                        <span>Web</span>
                        <p class="anim-items">Devel</p>
                     </div>
                     <div class="header__text_image anim-items">
                        <span><img src="./image/header/photo-1531493731235-b5c309dca387 1.png" alt=""></span>
                     </div>
                     <p class="header__text_2 anim-items ">
                        oper
                     </p>
                  </div>
                  <p class="header__subscribe">
                     Разработка / Продвижение / обучение
                  </p>
                  <div class="header__social ">
                     <a href="#">Instagram</a>
                     <a href="#">Facebook</a>
                  </div>
               </div>
            </div>
            <div class="header__arrow">
               <a href="#header">
                  <img src="./image/header/Vector 4.svg" alt="">
               </a>
            </div>
         </div>
      </header>

// обнуление
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
}

a.text:active,
a.text:hover,
a.text {
  text-decoration: none;
  color: #666;
}

a, input, label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

//

$maxWidth: 1280;

@mixin adaptiv-font($pcSize, $mobSize) {
   $addSize: $pcSize - $mobSize;
   $addMobSize: $addSize + $addSize * 0.7;
  @media (max-width: 767px) {
   font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 350px) / #{$maxWidth}));
  }
  @media (min-width: 767px) {
   font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
  }
}

 
body {
   background-color: black;
  
}
.header {
   max-width: 1350px;
   margin: 0 auto;
   margin-bottom: 214px;

   &__wrap {
      display: flex;
      @media (min-width: 1200px) {
         width: 100%;
      }
   }
   

   &__top {
      display: flex;
      justify-content: space-between;
      margin: 20px 15px 13px 15px;
   }

   &__number {
      display: flex;

      & a {
         @include adaptiv-font(18, 14);
         font-family: "Inter";
         line-height: 120%;
         color: #f6f6f6;
         margin-right: 39px;
      }
   }

   &__btn {
      margin-top: 9px;

      & a {
         font-family: "Jost";
         font-weight: 700;
         @include adaptiv-font(11, 9);
         line-height: 123.29%;
         text-align: center;
         letter-spacing: 0.07em;
         text-transform: uppercase;
         color: #0d0d0d;
         background: linear-gradient(180deg, #eccc5a 0.98%, #e7b234 54.86%, #d2992d 100%);
         padding: 14px 27px;
      }
   }

   &__menu {
      z-index: 10;
      position: fixed;
      top: 0;
   }
   @media (max-height: 550px) {
      &__menu {
         margin-top: 0;
         top: 45%;
      }
      &__mail {
         margin-top: 50px !important;
      }
   }

   &__hamburger-menu {
      #menu__toggle {
         opacity: 0;
      }

      #menu__toggle:checked~.menu__btn {
         margin-left: 300px;
      }

      #menu__toggle:checked~.menu__btn>span {
         transform: rotate(45deg);
      }

      #menu__toggle:checked~.menu__btn>span::before {
         top: 0;
         transform: rotate(0);
      }

      #menu__toggle:checked~.menu__btn>span::after {
         top: 0;
         transform: rotate(90deg);
      }

      #menu__toggle:checked~.menu__box {
         visibility: visible;
         left: 0;
         width: 400px;
      }

      .menu__btn {
         display: flex;
         align-items: center;
         width: 26px;
         height: 26px;
         position: relative;
         cursor: pointer;
         z-index: 10;
         top: 300px;
         -webkit-user-select: none;
            -moz-user-select: none;
             -ms-user-select: none;
                 user-select: none;
      }

      .icon,
      .icon::before,
      .icon::after {
         display: block;
         position: absolute;
         width: 21px;
         height: 1px;
         background-color: #ffffff;
         transition-duration: 0.35s;
      }

      .menu__btn>span::before {
         content: "";
         top: -8px;
      }

      .menu__btn>span::after {
         content: "";
         top: 8px;
      }

      .menu__box {
         display: block;
         position: fixed;
         visibility: hidden;
         top: 0;
         left: -100%;
         width: 0px;
         height: 100%;
         margin: 0;
         padding: 80px 0;
         list-style: none;
         background: #000000de;
         box-shadow: 1px 0px 6px rgb(0, 0, 0);
         transition-duration: 0.25s;
      }

      .menu__item {
         position: relative;
         display: inline-block;
         padding: 12px 24px;
         z-index: 3;
         color: #ffffff;
         font-family: "Roboto", sans-serif;
         @include adaptiv-font(20, 19);
         font-weight: 600;
         text-decoration: none;
         pointer-events: all;
         -webkit-user-select: none;
            -moz-user-select: none;
             -ms-user-select: none;
                 user-select: none;
      }
   }

   &__mail {
      position: relative;
      top: 500px;
      -webkit-writing-mode: vertical-lr;
          -ms-writing-mode: tb-lr;
              writing-mode: vertical-lr;
      transform: rotate(180deg);
      margin-right: 10px;

      & a {
         font-family: "Plain";
         @include adaptiv-font(14, 12);
         line-height: 128.79%;
         letter-spacing: 0.01em;
         -webkit-text-decoration-line: underline;
                 text-decoration-line: underline;
         color: #ffffff;
      }
   }

   &__content {
      display: flex;
   }

   &__body {
      max-width: 80vw;
      margin: 0 auto;
      position: relative;
      z-index: 1;
   }

   &__text {
      width: 80vw;
      transition: 2s;
      display: flex;
      background: url("../image/header/animation/Ellipse\ 28.svg") 100% 100% no-repeat;
      background-size: 40%;
      padding-bottom: 60px;
      background-position: 100% 90%;

      &_1 {
         font-family: "Josefin Sans";
         letter-spacing: 0.105em;
         text-transform: uppercase;
         color: #e7b234;

         & p:first-child {
            transition: 2s;
            @include adaptiv-font(50, 30);
         }

         & span {
            transition: 2s;
            @include adaptiv-font(135, 47);
         }

         & p:last-child {
            @include adaptiv-font(135, 47);
            transition: 2s;
         }
      }

      &_image>span {
         display: inline-block;
         border: 1px solid;
         border-image-source: linear-gradient(180deg, #eccc5a 0.98%, #e7b234 54.86%, #d2992d 100%);
         border-image-slice: 1;
         padding: 25px 17px;

         & img {
            transition: 2s;
         }
      }

      &_image {
         transition: 2s;
         position: absolute;
         bottom: 180px;
         left: 38.5%;
         z-index: -1;
         @media (max-width: 1450px){
            left: 41%;
         }
         @media (min-width: 1600px){
            left: 38%;
         }
         @media (min-width: 1920px){
            left: 36%;
         }
      }

      &_2 {
         transition: 1.5s;
         align-self: flex-end;
         font-family: "Josefin Sans";
         letter-spacing: 0.105em;
         text-transform: uppercase;
         color: #e7b234;
         @include adaptiv-font(135, 49);
         margin-left: 330px;
      }
   }

   /*ANIMATION*/
   &__text.active {
      background-size: 100%;
      transition: 1.5s;
      transition-delay: 1.3s;
   }

   &__text {
      &_1 {
         & p.active {
            transition: 1.5s;
            transition-delay: 1.3s;
            color: black;
            text-shadow: -0 -1px 0 #d2992d, 0 -1px 0 #d2992d, -0 1px 0 #d2992d, 0 1px 0 #d2992d, -1px -0 0 #d2992d,
               1px -0 0 #d2992d, -1px 0 0 #d2992d, 1px 0 0 #d2992d, -1px -1px 0 #d2992d, 1px -1px 0 #d2992d,
               -1px 1px 0 #d2992d, 1px 1px 0 #d2992d, -1px -1px 0 #d2992d, 1px -1px 0 #d2992d, -1px 1px 0 #d2992d,
               1px 1px 0 #d2992d;
         }
      }

      & span.active {
         transition: 1.5s;
         transition-delay: 1.3s;
         color: black;
         text-shadow: -0 -1px 0 #d2992d, 0 -1px 0 #d2992d, -0 1px 0 #d2992d, 0 1px 0 #d2992d, -1px -0 0 #d2992d,
            1px -0 0 #d2992d, -1px 0 0 #d2992d, 1px 0 0 #d2992d, -1px -1px 0 #d2992d, 1px -1px 0 #d2992d,
            -1px 1px 0 #d2992d, 1px 1px 0 #d2992d, -1px -1px 0 #d2992d, 1px -1px 0 #d2992d, -1px 1px 0 #d2992d,
            1px 1px 0 #d2992d;
      }

      &_2.active {
         transition: 1.5s;
         transition-delay: 1.3s;
         color: black;
         text-shadow: -0 -1px 0 #d2992d, 0 -1px 0 #d2992d, -0 1px 0 #d2992d, 0 1px 0 #d2992d, -1px -0 0 #d2992d,
            1px -0 0 #d2992d, -1px 0 0 #d2992d, 1px 0 0 #d2992d, -1px -1px 0 #d2992d, 1px -1px 0 #d2992d,
            -1px 1px 0 #d2992d, 1px 1px 0 #d2992d, -1px -1px 0 #d2992d, 1px -1px 0 #d2992d, -1px 1px 0 #d2992d,
            1px 1px 0 #d2992d;
      }

      &_image.active {
         transition: 1.5s;
         transition-delay: 1.3s;
         transform: rotate(35deg);

         & img {
            transition: 1.5s;
            transition-delay: 1.3s;
            transform: rotate(-35deg);
         }
      }
   }

   &__subscribe {
      font-family: "Jost";
      @include adaptiv-font(14, 12);
      line-height: 20px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #f6f6f6;
      opacity: 0.9;
      margin-top: -50px;
      margin-bottom: 150px;
   }

   &__arrow {
      margin-bottom: 58px;
      width: 30px;
      pointer-events: all;
      & img {
         transform: rotate(-44deg);
         height: 16px;
         z-index: 7;
         position: fixed;
         right: 5%;
         top: 550px;
      }

      & img:hover {
         border: 1px solid;
         border-image-source: linear-gradient(180deg, #eccc5a 0.98%, #e7b234 54.86%, #d2992d 100%);
         border-image-slice: 1;
         transition: 2s;
      }
   }

   &__social {
      margin-bottom: 40px;
      display: flex;
      justify-content: end;
      border-bottom: 1px solid;
      border-image-source: linear-gradient(180deg, #eccc5a 0.98%, #e7b234 54.86%, #d2992d 100%);
      border-image-slice: 1;
      padding-bottom: 14px;
      position: absolute;
      bottom: 0;
      width: 100%;
      & a {
      font-family: "Jost";
      @include adaptiv-font(13, 12);
      line-height: 19px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: linear-gradient(180deg, #eccc5a 0.98%, #e7b234 54.86%, #d2992d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      }
      & a::after {
         content: url("../image/header/Vector\ 4.svg");
         margin: 0 30px 0 7px;
      }

      & a:first-child {
         margin-right: 20px;
         border-right: 1px solid;
         border-image-source: linear-gradient(180deg, #eccc5a 0.98%, #e7b234 54.86%, #d2992d 100%);
         border-image-slice: 1;
      }

      & a:last-child {
         margin-right: 30px;
      }
   }
}