/* tablet 768px */
@media (width<600px) {

   .header__wrapper {
   padding: 36px 10px;
   font-size: 12px;
   }
   .header__logo {
      margin-top: 0px;
   }
   .logo__img {
      margin: 0;
   }
   .menu__list {
   gap: 10px;
}

   .welcome__wrapper {
      padding: 24px 25px;
   }
   .welcome__img {
      display: none;
   }
   .welcome__title {
         font-size: 25px;
         line-height: 35px;
   }
   .welcome__info {
      margin-top: 23px;
      padding-left: 0px;
   }
      .welcome__btn {
      margin-top: 25px;
      width: 100px;
      height: 33px;
      font-size: 10px;
      line-height: 20px;
      }
.about__wrapper {
   flex-direction: column;
   padding: 30px 25px 0 25px;
   margin-bottom: -26px;
}

.about__title {
   font-size: 25px;
   line-height: 33px;

}
.about__text {
   margin-top: 14px;
   font-size: 15px;
   line-height: 25px;
}
.about__img {
   margin: 0 auto;
   margin-top:-52px ;

}
.about__icon {
   width: 150px;
}

.service__wrapper {
   margin: 0 auto;
   width:100vw;
   padding: 30px 25px 27px 25px;
   
}
.service__blok {
   flex-direction: column;
   align-items: flex-start;
}
.service__title {
   font-size: 25px;
   line-height: 33px;
   max-width:187px ;
}
.service__buttons {
   margin-top: 10px;
   padding-left: 0px;
}
.service__button {
   width: 121px;
   height: 35px;
   font-size: 15px;
line-height: 20px;
}
.service__button:first-child {
   padding-right: 0px;
}
.service__button:not(:first-child){
   margin-left: 6px;
}
.service__button:last-child{
   margin-top: 9px;
   margin-left: -0px;
}
.service__content {
   grid-template-columns: repeat(1,1fr);
   grid-template-rows: repeat(6,1fr);
   gap: 34px 106px;
}

.content__blok {
   text-align: center;
   width: 280px;
}
.content__items:not(:first-child){
   margin-left:0px;
}
.content__items:nth-child(4) {
   margin-left: -1px;
}
.img__shadow {
   filter: contrast(0.88);
}
.content__img {
   width: 280px;
   object-fit: cover;
}

.content__info {
   margin: 0 auto;
   margin-top: 10px;
   max-width: 201px;
}
.prices__wrapper {
   margin: 0 auto;
   width:100vw;
   padding: 24px 0 6px 0;
   display: flex;
   flex-direction: column;
}
.prices__col1,
.prices__col2 {
   display: flex;
   flex-direction: column;
}
.prices__title {
   font-size: 25px;
   line-height: 30px;
   padding-left: 0px;
   text-align: center;
}
.prices__accourdion {
   margin: 0 auto;
   margin-top: 38px;
   width: 224px;
   min-height: 235px;
   display: flex;
   flex-direction: column;
   gap: 14px;
   align-items:center;
   padding:29px 22px;
}
.accourdion__items {
   margin-top:0px;
   width: 180px;
}
.accourdion__items:not(:first-child) {
   margin-top: 0px;
}
.accourdion__title {
   font-size: 15px;
   line-height: 20px;
}

.prices__col2 {
   align-items:flex-end;
   max-width: 230px;
   margin: 0 auto;

}
.prices__text {
   margin-top: 19px;
   font-size: 20px;
   line-height: 35px;
   text-align: center;
}
.prices__button {
   margin: 0 auto;
   margin-top: 20px;
   width: 121px;
   height: 35px;
   font-size: 15px;
line-height: 20px;
}
.prices__leaf {
   display: none;
}


.contacts__wrapper {
   margin: 0 auto;
   width:100vw;
   padding: 25px 0px 0 0;
   display: flex;
   flex-direction: column;
   align-items:center;
}
.contacts__img {
   margin: 0;
   margin-left: 20px;
   padding-top: 250px;
   width: 200px;
      order: 3;
}
.contacts__title {
   margin: 0;
   order: 0;
   padding-top: 0px;
   font-size: 25px;
line-height: 33px;
}
.contacts__blok {
   display: flex;
   justify-content:space-between;
}
.contacts__list {
   order: 2;
   margin-top: 80px;
   width: 300px;
   height: 50px;
}
.contacts__button {
   position: relative;
   width: 16px;
   height: 16px;
   background: #D9D9D9;
   border-radius: 50%;
}
.contacts__button::before {
   position: absolute;
   display: block;
   top: 50%;
   left: 45%;
   content:'';
   width: 2px;
   height: 0.5px;
   background-color: #fff;
   transform: rotate(-45deg);
   border-radius:5px;
}

.contacts__button::after {
   position: absolute;
   display: block;
   top: 50%;
   right: 50%;
   content:'';
   width: 2px;
   height: 0.5px;
   background-color: #fff;
   transform: rotate(45deg);
   border-radius:5px;
}
.contacts__items {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-size: 20px;
   line-height: 40px;
   letter-spacing: 0.05em;
   color: #717171;
   width: 300px;
}
.contacts__select{
   max-width: 300px;
}
.select__items {
   max-width:274px ;
}
.contacts__img {
   margin: 0 auto;
   margin-top: 132px;
   width: 100px;
   padding: 0;
}
.contacts__info{
   margin:40px 0 0 0;
   max-width: 282px;
   padding:0 ;
}
.footer__wrapper {
   margin: 0 auto;
   width:100vw;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items:center;
   padding: 0px;
}
.footer__data {
   margin-top: 10px;
   margin-left: -5px;
   gap: 19px;
}
.contacts__img._none{
   visibility: hidden;
   /* margin: 0 auto; */
}
.footer__git-hub {
   padding-left: 5px;
}
.footer__social {
   margin-top:0px;
   display: flex;
   gap: 28px;
   align-items:center;
}
.footer__school {
   margin-top: -10px;
   padding-left: 0px;
}

}
@media (width <381px) {
      .header__menu {
      display: none;
   }
      .header__wrapper {
   padding: 36px 25px;
   font-size: 16px;
line-height: 21px;
   }

   /* Burger menu */
   .menu__icon {
      z-index: 5;
      display: block;
      position: relative;
      width: 40px;
      height: 24px;
      cursor: pointer;
   }
   .menu__icon::before,
   .menu__icon::after,
   .menu__icon >span {
      right:0 ;
      position:absolute;
      height: 2px;
      width: 100%;
      transition: all 0.3s ease 0s;
      background-color: #717171;
   }
   .menu__icon::before,
   .menu__icon::after {
      content:'';
   }
   .header__logo {
      z-index: 55;
   }
   .menu__icon::before {
      top: 0;
   }
   .menu__icon::after {
      bottom: 0;
   }
   .menu__icon >.icon__first {
      top: 8px;
      transform: scale(1) translate(0px, -50%);
   }
   .menu__icon >.icon__second {
      bottom: 6px;
      transform: scale(1) translate(0px, -50%);
   }
   .header__menu {
      display: block;
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 275px;
      background-color:#EDF2EC;
      margin-top: 75px;
      padding-left: 25px;
      transition: all 0.5s ease-out 0s;
      overflow: auto;
      font-size: 26px;
      z-index: -5;
   }
   .menu__list {
      position: absolute;
      flex-direction: column;
      }

   .menu__items {
      margin-top: 20px;
   }
   .header__menu._active {
      visibility: visible;
      z-index: 5;
      left: 40%;
   }
   .menu__icon._active span{
      transform: scale(0);
   }
   .menu__icon._active::before {
      top: 50%;
      transform: rotate(-45deg) translate(0px, -50%);
   }
   .menu__icon._active::after {
   top: 50%;
   transform: rotate(45deg) translate(0px, -50%);
   }
}