@media screen and (max-width: 1600px){
    .container {
        max-width: 1400px;
    }
}

@media screen and (max-width: 1440px){
    .container {
        max-width: 1300px;
    }

    .btn__whatsapp-tablet{
        display: block;
        text-decoration: none;
    }

    .btn__whatsapp{
        display: none;
    }

    .footer-btn{
        display: block;
    }

    .footer__nav{
        flex-direction: column;
        gap: 50px;
    }
}

@media screen and (max-width: 1330px){
    .container {
        max-width: 1200px;
    }

    .header__navigation ul li a, .footer__nav ul li a{
        font-size: 16px;
    }

    .header__navigation ul li, .footer__nav ul li{
        padding: 16px;
    }


    .cta-form__form{
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }


}

@media screen and (max-width: 1250px){
    .container {
        max-width: 1100px;
    }

    .header__logo {
        width: 240px;
    }

    .header__navigation{
        gap: 60px;
    }

    h1{
        font-size: 50px;
        font-style: normal;
        font-weight: 700;
    }

    h2{
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    h3{
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .subtitle{
        font-size: 20px;
    }

    .hero__main-info-title{
        max-width: 650px;
    }

    .hero__main-info-subtitle{
        max-width: 600px;
    }

    .services-card-img{
        width: 100%;
        max-width: 500px;
    }
}

@media screen and (max-width: 1100px){
    .container {
        max-width: 900px;
    }
  .header__navigation{ display: flex; justify-content: center; align-items: center; gap: 0; }
  .header__navigation ul{ display: none; }      /* прячем только списки */
  .header__logo{ display: block; width: 180px; height: auto; } /* логотип оставляем */

  .btn__whatsapp, .btn__whatsapp-tablet{ display: none !important; }
  .burger{ display: inline-flex; }

  .header__wrapper{
    justify-content: space-between; align-items: center;
    gap: 16px; padding: 0 16px;
  }

  .hero{
    padding-top: 200px;
  }

  .hero__advantages { overflow: visible; }

  .hero__advantages-cards{
    display: flex;
    gap: 16px;

    /* горизонтальный свайп без кнопок/точек */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    /* СЛЕВА — ровно по контейнеру (без доп. отступа) */
    padding-left: 0;

    /* СПРАВА — выход к краю вьюпорта:
       смещаем правую границу трека за пределы контейнера */
    margin-right: calc(50% - 50vw);            /* тянем вправо за контейнер */
    padding-right: calc(50vw - 50% + 16px);    /* добавляем внутреннее поле у края экрана */

    /* немного нижнего воздуха под трек */
    padding-bottom: 24px;

    /* прячем скроллбар */
    scrollbar-width: none;
  }
  .hero__advantages-cards::-webkit-scrollbar { display: none; }

  .hero__advantages-card{
    flex: 0 0 clamp(300px, 84vw, 420px);  /* ширина слайда */
    scroll-snap-align: start;
    /* по желанию: ровная высота */
    /* min-height: 100%; */
  }

  .hero__wrapper{
    gap: 100px;
  }

  .services-card-img{
    display: none;
  }

  .services-card-img-xs{
    display: block;
    margin: 0 10px;
    width: 100%;
  }

  .main__card .process__card-description{
    max-width: 180px;
  }

  .reviews{ overflow-x: clip; }

  .reviews__cards{
    /* превращаем в свайп-трек */
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 24px;

    /* СЛЕВА — ровно по контейнеру */
    padding-left: 0;

    /* СПРАВА — «выносим» трек до края вьюпорта,
       как у hero__advantages-cards */
    margin-right: calc(50% - 50vw);
    padding-right: calc(50vw - 50% + 16px); /* 16px = твой gap справа у края */

    /* прячем скроллбар */
    scrollbar-width: none;
  }
  .reviews__cards::-webkit-scrollbar{ display: none; }

  .reviews__card{
    flex: 0 0 clamp(280px, 84vw, 420px);
    scroll-snap-align: start;
  }

  /* анти-выползание контента */
  .reviews__cards, .reviews__card{ min-width: 0; }
  .reviews__card *{ min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
  .reviews__card img{ max-width: 100%; height: auto; display: block; }

  .cta-form__form{
    max-width: 520px;

  }

  .footer-btn{
    display: flex!important;
  }

  .hero__main-info-title{
    line-height: 70px;
  }
}

/* тач-улучшения */
@media (hover: none) and (pointer: coarse){
  .mobile-dropdown__nav li a{ padding: 16px 14px; }
  .btn--whatsapp-mobile{ min-height: 48px; }
}

@media screen and (max-width: 1024px){
    .footer{
        background-image: url('../img/footer-bg-tablet.webp');
    }
}

@media screen and (max-width: 940px){
    .container {
        max-width: 800px;
    }

    .process__top {
        display: flex;
        flex-direction: column;
    }

    .process__bottom{
        display: flex;
        flex-direction: column;
    }

    .main__card .process__card-description{
        max-width: 100%;
    }

    .footer__nav{
        margin-top: 100px;  
    }
}

@media screen and (max-width: 840px){
    .container {
        max-width: 700px;
    }

    .services__card{
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    .services__card-info{
        text-align: center;
        align-items: center;
    }

    .ants{
        top: -90px;
    }

    .contact__us-img{
        right: -30%;
    }

    .footer__nav ul{
        gap: 40px;
    }
}

@media screen and (max-width: 768px){
    .footer__wrapper{
        padding-right: 50px;
    }

    .footer__contacts{
        gap: 30px;
    }

    .cta-form__form p{
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 740px){
    .container {
        max-width: 600px;
    }

    .ants{
        top: -80px;
    }

    .contact__us-img{
        right: -40%;
    }

    .footer__nav ul{
        gap: 30px;
    }

    .footer__nav ul li{
        padding: 10px;
    }
}

@media screen and (max-width: 640px){
    .container {
        max-width: none;
        padding: 0 20px;
    }

    h1{
        font-size: 36px;
    }

    .subtitle, .services__subtitle{
        font-size: 20px;
    }

    h2{
        font-size: 28px;
    }

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

    .process__card-description, .services__card-description, .reviews__card-body, .reviews__card-bottom p{
        font-size: 14px;
    }

    .hero__main-info-title{
        max-width: 500px;
        line-height: 40px;
    }

    .process__card-number{
        font-size: 32px;
    }

    .process__card-header img{
        max-width: 36px;
    }

    .ants{
        display: none;
    }

    .ants-xs{
        display: block;
        position: absolute;
        top: -300px;
        width: 100%;
        left: 0px;
        z-index: 23;
    }

    .contact__us-img{
        right: -50%;
    }

    .footer__nav ul{
        display: none;
    }
}

@media screen and (max-width: 550px){
    .ants-xs{
        top: -250px;

    }

    .contact__us-img{
        right: -66%;
    }
}

@media screen and (max-width: 500px){
    .hero{
        background-image: url('../img/hero-bg-mobile.webp');
    }

    .reviews{
        background-image: url('../img/reviews-bg-mobile.webp');
    }

    .ants-xs{
        top: -220px;
    }

    .services-process__wrapper{
        gap: 150px;
    }

    .cta-form__form{
        padding: 32px;
        border-radius: 24px;
    }
}

@media screen and (max-width: 450px){
    .ants-xs{
        top: -180px;
    }

    .contact__us-img{
        right: -80%;
    }

    .footer__wrapper{
        padding-right: 0;
    }

    .cta-form__form h3{
        margin-bottom: 0;
    }

    .cta-form__form p{
        margin-bottom: 30px;}
}

@media screen and (max-width: 410px){
    .ants-xs{
        top: -180px;
    }

    .contact__us-img{
        right: -95%;
    }
}
@media screen and (max-width: 390px){
    .ants-xs{
        top: -170px;
    }
}