:root {
   --white: #F1F5F8;
   --blueLight: #31C3F2;
   --blue: #0064E0;
   --darkLight: #18191D;
   --dark: #141416;
}

@media (min-height: 570px) {
  .modal__content--md {
      min-height: 540px;
   }
}

@media only screen and (max-width: 1599px) {
   .menu__list {
      gap: 0;
   }

   .picocelling,
   .where,
   .stay-in-touch {
      min-height: 0;
   }

   .section-padding {
      padding-block: 80px;
   }
}

@media only screen and (max-width: 1439px) {
   .brands-slider .brands-slider__wrapper {
      padding-right: 0;
   }

   .section-padding {
      padding-block: 60px;
   }
}

@media only screen and (max-width: 1199px) {
   .advantages__grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .advantages-item:nth-child(3) .advantages-item__step {
      display: none;
   }

   .video-slider .swiper:after,
   .video-slider .swiper:before {
      width: 11%;
   }

}

@media only screen and (max-width: 959px) {
   .feedback__wrapper {
      grid-template-columns: 1fr;
      justify-items: center;
   }

   .feedback__col {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   .feedback__img {
      margin-top: -75px;
      margin-bottom: 10px;
      margin-inline: -35px;
   }

   .contacts__container,
   .turnkey__container,
   .suit-me__grid {
      grid-template-columns: 1fr;
   }

   .suit-me__col--1 {
      grid-template-columns: 1fr 1fr;
   }

   .video-slider .swiper:after,
   .video-slider .swiper:before {
      width: 8%;
   }

   .advantages__grid {
      gap: 20px;
   }

   .illustration {
      display: none;
   }

   .section-inner__grid {
      display: block;
   }

   .section-inner__img {
      display: block;
      position: relative;
      z-index: -1;
   }

   .section-inner__img img {
      width: 100%;
   }

   .picocelling__img {
      margin-top: -25%;
      margin-bottom: -65%;
   }

   .stay-in-touch__img {
      margin-top: -45%;
      margin-bottom: -65%;
   }

   .cases__img {
      margin-top: -55%;
      margin-bottom: -70%;
   }

   .where__img {
      margin-top: -60%;
      margin-bottom: -80%;
   }

   .contacts-data {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
   }

}

@media only screen and (max-width: 767px) {

   .menu,
   .video-slider .swiper:after,
   .video-slider .swiper:before {
      display: none;
   }

   .video-slider .swiper {
      padding-block: 0;
   }

   .video-slider .swiper-slide-active {
      transform: scale(1);
   }

   #mob-menu {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 25px;
      position: fixed;
      top: 0;
      bottom: 0;
      right: -100%;
      height: 100dvh;
      width: 100%;

      z-index: 110;
      overflow-y: auto;
      padding: 15px;
      background: var(--dark) url("../img/menu-bg.png") no-repeat right bottom;
      background-size: cover;
      transition: all 0.5s;
   }

   #mob-menu.__open {
      right: 0;
   }

   header {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 102;
      background: var(--dark);
   }

   .header__container {
      gap: 0;
   }

   #content {
      padding-top: 122px;
   }

   /*bars*/
   .bars {
      height: 52px;
      width: 52px;
      padding-inline: 14px;
      background: #2B2B2E;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      cursor: pointer;
   }

   .bars span {
      display: inline-block;
      width: 100%;
      height: 2px;
      background: var(--white);
      margin-bottom: 6px;
      transition: all 0.3s;
   }

   .bars span:nth-child(3) {
      margin-bottom: 0;
   }

   .first {
      transform: translate(4px, -0.5px) rotate(45deg);
      transform-origin: left top;
   }

   .middle {
      transform: scale(0);
   }

   .last {
      transform: translate(-3px, -17px) rotate(-45deg);
      transform-origin: right bottom;
   }

   .footer__container,
   .menu__list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      text-align: center;
   }

   .logo {
      width: 200px;
   }
}

@media only screen and (max-width: 719px) {
   body {
      font-size: 18px;
   }

   .title-h1 {
      font-size: 48px;
   }

   .title-h2 {
      font-size: 32px;
   }

   .title-h3 {
      font-size: 24px;
   }

   .subtitle {
      font-size: 16px;
   }

   .body-medium {
      font-size: 12px;
   }

   .mb-60 {
      margin-bottom: 40px;
   }

   .mb-40 {
      margin-bottom: 30px;
   }

   .advantages-item__step,
   .feedback__link {
      display: none;
   }

   .brands-slider .brands-slider__title,
   .review-slider__buttons {
      text-align: center;
   }

   .advantages__grid {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .advantages-item {
      flex-direction: row;
      margin-left: 55px;
      gap: 20px;
   }

   .advantages-item:before {
      content: "";
      display: block;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      border: 2px solid var(--white);
      position: absolute;
      top: 45px;
      left: -45px;
      background: var(--dark);
      z-index: 2;
   }

   .advantages-item__text {
      max-width: none;
      text-align: left;
   }

   .advantages__grid::after {
      content: "";
      display: block;
      position: absolute;
      left: 15px;
      top: 55px;
      width: 1px;
      height: calc(100% - 110px);
      background-image: repeating-linear-gradient(to bottom,
            #0064e0 0,
            #0064e0 6px,
            /* довжина штриха */
            transparent 6px,
            transparent 12px
            /* відстань між штрихами */
         );
      opacity: 0.3;
   }

   .section-padding {
      padding-block: 40px;
   }

   .item-accordion__title {
      padding: 12px 20px;
   }

   .item-accordion__desc {
      padding: 12px 20px 10px;
   }

   .suit-me__col--1 {
      grid-template-columns: 1fr;
   }

   .brands-slider .swiper-slide {
      width: 122px;
   }

   .feedback__wrapper {
      padding-inline: 26px;
   }

   .feedback__img {
      margin-top: -60px;
      margin-inline: -26px;
   }
}

@media only screen and (max-width: 639px) {
   .contacts-data {
      display: grid;
   }

   .map {
      min-height: 250px;
   }
}

@media only screen and (max-width: 575px) {
   .cases__grid {
      grid-template-columns: 1fr;
   }
}

@media only screen and (max-width: 479px) {
   .advantages-item {
      margin-left: 30px;
      gap: 10px;
   }

   .advantages-item:before {
      left: -20px;
   }

   .slider-grid {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .slider-grid .title-h3 {
      text-align: center;
   }

   .slider-grid .slider-buttons {
      order: 3;
      justify-content: center;
   }

   .contacts__container {
      font-size: 12px;
   }

   .contacts__list li::before {
      top: 6px;
      height: 4px;
      width: 4px;
   }

   .suit-me-item {
      padding: 12px;
   }

   .close_modal_window.icon {
      position: absolute;
      top: 6px;
      right: 6px;
   }

   .modal__title {
      font-size: 20px;
   }

   .modal__head .cases-item__icon {
      height: 48px;
      width: 48px;
      flex: 0 0 48px;
      font-size: 20px;
   }

   .modal__content {
      padding: 24px;
   }
}

@media only screen and (max-width: 389px) {
   .header__container,
   .footer__container,
   .container,
   .container-inner {
      padding-inline: 8px;
   }


   .button--2 {
      font-size: 16px;
   }

   .feedback__wrapper {
      padding-inline: 12px;
   }

   .feedback__img {
      margin-inline: -12px;
   }

}

/*min-width*/
@media only screen and (min-width: 959px) {
   .feedback__img {
      position: absolute;
      top: 50%;
      right: 0px;
      transform: translateY(-55%);
      width: 37%;
   }
}

/*min-max-width*/
@media (min-width: 959px) and (max-width: 1400px) {
   .title-h1 {
      font-size: clamp(3rem, 0.818rem + 3.64vw, 4rem);
   }
}

@media (min-width: 959px) and (max-width: 1200px) {
   .cases__grid {
      grid-template-columns: 1fr;
   }
}

@media (min-width: 768px) and (max-width: 960px) {
   .menu__list--2 .menu__link {
      font-size: 14px;
      padding-left: 15px;
   }

}