@media (max-width:1160px) {

    .header__logo {
        padding-left: 20px;
        font-size: 22px;
    }


    .header__menu {
        gap: 20px;
    }


    .header__link {
        font-size: 14px;
        white-space: nowrap;
    }


    .header__contacts {
        padding-right: 20px;
        gap: 15px;
    }


    .header__phone {
        font-size: 15px;
    }


    .header__button {
        padding: 0 18px;
        font-size: 13px;
        white-space: nowrap;
    }

}

/* =================================
   1024px — маленький ноутбук
================================= */

@media (max-width:1024px) {


    /* HEADER */

    .header__logo {
        padding-left: 20px;
        font-size: 22px;
    }


    .header__menu {
        gap: 20px;
    }


    .header__contacts {
        gap: 15px;
    }


    .header__phone {
        font-size: 15px;
    }


    .header__button {
        padding: 0 18px;
    }

.header__link {
    white-space: nowrap;
}

    /* HERO */

    .hero__content {
        padding-left: 30px;
    }


    .hero__service {
        font-size: 96px;
    }


    .hero__brand {
        font-size: 58px;
    }


    .hero__slogan {
        font-size: 24px;
        padding-top: 35px;
        padding-bottom: 35px;
    }



    /* TRUST */

    .trust {
        padding: 80px 0;
    }


    .trust__container {
        gap: 25px;
    }


    .trust-card {
        padding: 20px;
    }


    .trust-card__title {
        font-size: 20px;
    }



    /* APPOINTMENT */

    .appointment__wrapper {
        gap: 30px;
    }


    .appointment__content {
        padding-left: 20px;
    }



    /* CONTACTS */

    .contacts__container {
        gap: 40px;
        padding: 80px 30px;
    }


    .contacts__title {
        font-size: 36px;
    }

    .contacts__button {
        width: 240px;
        font-size: 13px;
    }

    /* FOOTER */

    .footer__container {
        padding-left: 30px;
        padding-right: 30px;
    }


    .footer__top {
        gap: 40px;
    }

}

@media (max-width:930px) {

    .header__button {
        padding: 0 15px;
        font-size: 10px;
    }
}
/* =================================
   900px — переходный режим
================================= */

@media (max-width:900px) {


    /* HEADER */

    .header__wrapper {
        gap: 20px;
    }


    .header__menu {
        gap: 15px;
    }


    .header__link {
        font-size: 15px;
    }


    .header__phone {
        font-size: 14px;
    }


    .header__button {
        height: 42px;
        padding: 0 15px;
        font-size: 11px;
    }
    
    .header__phone {
        display: none;
    }



    /* HERO */

    .hero {
        background-size: auto 100%;
    }

    .hero__content {
        padding-left: 20px;
    }


    .hero__service {
        font-size: 64px;
    }


    .hero__brand {
        font-size: 42px;
    }


    .hero__slogan {
        font-size: 22px;
    }

    .header__button {
        font-size: 9px;
        padding: 0 18px;
    }

    .hero__content {
    padding-left: 30px;
}

.hero__service {
    font-size: 70px;
}

.hero__brand {
    font-size: 45px;
}

.hero__slogan {
    font-size: 24px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.hero {
    overflow-x: hidden;
}

.hero__service {
        font-size: 65px;
    }

    /* TRUST */

    .trust__container {
        gap: 20px;
    }


    .trust-card {
        padding: 18px;
    }


    .trust-card__title {
        font-size: 18px;
    }


    .trust-card__text {
        font-size: 15px;
    }

    .trust__container {
        grid-template-columns: 1fr;
    }


    .trust__image {
        width: 100%;
    }


    .trust__image img {
        width: 100%;
        max-width: 100%;
    }


    .trust__content {
        width: 100%;
    }
    .booking__header {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }


    .booking__form-wrapper {
        margin-left: 0;
        margin-right: 0;
        padding: 40px;
    }

    .booking__title {
        white-space: normal;
        font-size: 32px;
    }

    /* APPOINTMENT */

.appointment__title {
    font-size: 22px;
}


.appointment__wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
}


.appointment__image {
    display: none;
}


.appointment__content {
    padding-left: 0;
}


.appointment__button {
    height: 50px;
    font-size: 14px;
}

    /* CONTACTS */

    .contacts__container {
        gap: 30px;
    }


    .contacts__map {
        height: 600px;
    }
/* ================= CONTACTS ================= */

.contacts__container {
    flex-direction: column;
    gap: 30px;
}


.contacts__info {
        width: 100%;
        height: auto;
        padding: 20px;
    }


    .contacts__map {
        width: 100%;
        height: 450px;

    }
    .contacts__title {
    font-size: 34px;
    margin-bottom: 25px;
    margin-top: 0;
}


.contacts__item {
    margin-bottom: 20px;
}


.contacts__label {
    font-size: 16px;
    margin-bottom: 8px;
}


.contacts__text,
.contacts__link {
    font-size: 15px;
    line-height: 1.5;
}
.contacts__button {
    width: 260px;
    height: 45px;
    font-size: 13px;
}

    /* ================= REVIEWS ================= */

.reviews__card {
    padding: 20px;
}


.reviews__text {
    font-size: 15px;
    line-height: 1.5;
}


.reviews__name {
    font-size: 16px;
}


.reviews__list {
    gap: 20px;
}

.reviews__list {
    grid-template-columns: repeat(2, 1fr);
}



    /* FOOTER */

    .footer__top {
        gap: 30px;
    }

}

/* ==============================
   Appointment transition
============================== */

@media (max-width:850px) {

    .appointment__wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .appointment__image {
        order: -1;
    }


    .appointment__image img {
        max-width: 100%;
        height: 350px;
    }


    .appointment__content {
        padding-left:0;
    }

    

}

/* =================================
   768px — планшет
================================= */

@media (max-width:768px) {


    /* ================= HEADER ================= */

    .header__wrapper {
        min-height: 70px;
    }


    .header__logo {
        padding-left: 20px;
        font-size: 20px;
    }


    .header__menu {
        gap: 15px;
    }


    .header__link {
        font-size: 14px;
    }


    .header__contacts {
        gap: 15px;
    }


    .header__phone {
        font-size: 14px;
    }


    .header__button {
        height: 40px;
        padding: 0 10px;
        font-size: 9px;
    }



    /* ================= HERO ================= */


    .hero {
        min-height: 700px;
    }


    .hero__wrapper {
        min-height: 700px;
    }


    .hero__content {
        padding-left: 20px;
    }


    .hero__slogan {
        font-size: 22px;
        padding-top: 30px;
        padding-bottom: 30px;
    }


    .hero__button {
        height: 50px;
        padding: 0 30px;
        font-size: 14px;
    }

     .hero__call {
        font-size: 14px;
     }
    



    /* ================= TRUST ================= */


    .trust {
        padding: 70px 0;
    }


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


    .trust__image {
        height: 350px;
    }


    .trust__grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .trust-card {
        padding: 20px;
        min-height: 150px;
    }


    .trust-card__title {
        font-size: 18px;
    }


    .trust-card__text {
        font-size: 14px;
    }
    .trust__image {
        height: 450px;
    }

    .trust__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .footer__contacts {
        display: none;
    }


    /* ================= SERVICES ================= */

.services {
    padding: 50px 0;
}


.services__item {
    padding: 15px 20px 15px 10px;
    font-size: 20px;
    gap: 15px;
}


.services__icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
}


.services__icon img {
    width: 35px;
    height: 35px;
}

.advantages .section-title,
    .payment__title,
    .prices .section-title,
    .services__title,
    .brands__heading,
    .reviews__title
    .booking__title {
        font-size: 32px;
    }

    

}

/* =================================
   730px — выравнивание контактов
================================= */



/* =================================
   710px — исправление Booking
================================= */

@media (max-width:710px) {

    .payment__list {
        grid-template-columns: 1fr;
    }


    .payment__item {
        padding: 20px;
    }

    .header__button {
        height: 35px;
        padding: 0 8px;
        font-size: 8px;
    }

    .reviews__item {
    min-height: 220px;

    flex: 0 0 calc((100% - 40px) / 3);

    padding: 25px;
}
@media (max-width:710px) {

    .reviews__item {
        flex: 0 0 100%;
        min-height: auto;
        padding: 20px;
    }

}
     /* REVIEWS */

    /*.reviews__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }


    .reviews__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }


    .reviews__card {
        padding: 15px 15px 10px;
        height: auto;
        min-height: 0;
    }


    .reviews__rating {
        margin-top: 5px;
    } */

}

/* =================================
   650px — переход шапки
================================= */

@media (max-width:680px) {

    .header__wrapper {
        flex-wrap: wrap;
        padding: 15px 20px;
        gap: 15px;
    }


    .header__logo {
        padding-left: 0;
        font-size: 22px;
    }


    .header__menu {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 20px;
    }


    .header__contacts {
        margin-left: auto;
    }


    .header__button {
        height: 40px;
        padding: 0 15px;
        font-size: 9px;
    }
    
.brands__botton {
    width: 100%;
    max-width: 600px;
}
}

/* =================================
   600px — большой телефон / маленький планшет
================================= */


@media (max-width:600px) {


    .header__wrapper {
        flex-wrap: wrap;
        padding: 15px 20px;
        gap: 10px;
    }


    .header__menu {
        width: 100%;
        order: 3;
        justify-content: center;
        gap: 15px;
    }


    .header__link {
        font-size: 12px;
    }


    .header__logo {
        font-size: 20px;
    }


   

    .hero {
        min-height: 600px;
    }


    .hero__wrapper {
        min-height: 650px;
    }


    .hero__content {
        padding-left: 20px;
        padding-right: 20px;
    }

     .hero__brand {
        font-size: 42px;
    }


    .hero__service {
        font-size: 55px;
    }
   
    .hero__slogan {
        font-size: 18px;
        padding-top: 25px;
        padding-bottom: 25px;
    }



    .hero__slogan {
        font-size: 20px;
    }


    .hero__description {
        font-size: 16px;
    }


    .hero__button {
        height: 48px;
        padding: 0 25px;
        font-size: 13px;
    }

    .hero__call {
        height: 48px;
        font-size: 13px;
    }

    .brands__heading {
        font-size: 25px;
    }

    .services__item {
        padding: 12px 15px 12px 10px;
    }


    .services__icon {
        margin-left: 5px;
    }

    .advantages__item {
    padding: 12px 15px 12px 10px;
    gap: 12px;
}

.advantages__icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    margin-left: 5px;
}

.advantages__icon img {
    width: 30px;
    height: 30px;
}

.advantages__text {
    font-size: 17px;
}


    /* ================= TRUST ================= */

    .trust {
        padding: 50px 0;
    }


    .trust__grid {
        grid-template-columns: 1fr;
    }


    .trust-card {
        padding: 15px;
    }


    .trust-card__title {
        font-size: 17px;
    }


    .trust-card__text {
        font-size: 14px;
    }


    .trust__image {
        height: 350px;
    }



    /* ================= SERVICES ================= */

    .services {
        padding: 50px 0;
    }


    .services__item {
        padding: 12px 15px;
        gap: 12px;
        font-size: 17px;
    }


    .services__icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }


    .services__icon img {
        width: 30px;
        height: 30px;
    }



    /* ================= APPOINTMENT ================= */

    .appointment__title {
        font-size: 20px;
    }


    .appointment__content {
        padding-left: 0;
    }


    .appointment__button {
        width: 100%;
        height: 45px;
        font-size: 13px;
    }



    /* ================= PAYMENT ================= */

    .payment__item {
        padding: 15px;
    }

    .advantages .section-title,
.payment__title,
.prices .section-title,
.services__title,
.brands__heading,
.reviews__title,
.booking__title {
    font-size: 24px;
}


    /* ================= REVIEWS ================= */


    .reviews__title {
        font-size: 24px;
    }

    .reviews__item {
        flex: 0 0 100%;
        min-height: auto;
        padding: 20px;
    }


    .reviews__text {
        font-size: 15px;
    }


    .reviews__name {
        font-size: 16px;
    }


    .reviews__rating {
        font-size: 14px;
    }



   
    /* ================= FOOTER ================= */

    .footer__container {
        padding: 60px 20px 30px;
    }


    .footer__top {
        gap: 25px;
    }


    .footer__title {
        font-size: 20px;
    }


    .footer__link {
        font-size: 14px;
    }


}

@media (max-width:500px) {
.footer__button {
    width: 150px;
    height: 50px;
    margin-top: 30px;
    padding: 0;
        
        display: flex;
        justify-content: center;
        align-items: center;
}
.brands__heading {
        font-size: 20px;
    }
}

/* =================================
   480px — большой смартфон
================================= */

/* =================================
   480px — услуги
================================= */





@media (max-width:480px) {

    .hero__brand {
        font-size: 34px;
    }


    .hero__service {
        font-size: 48px;
    }

    .services__name {
        font-size: 16px;
    }

    .services__text {
        font-size: 14px;
    }

    .reviews__item {
    flex: 0 0 100%;
    width: 100%;
    padding: 20px;
}



    .booking__row {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }


    .booking__input {
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
    }


    .booking__form-wrapper {
        padding: 20px;
    }

    .booking__title {
        font-size: 24px;
        white-space: normal;
        line-height: 1.2;
    }

    
    .footer__container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer__logo {
        font-size: 26px;
    }

    .footer__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }


    .footer__button {
        width: 150px;
        height: 50px;
        margin-top: 0;
    }


}

@media (max-width:425px) {

    .hero {
        min-height: 520px;
    }

    .hero__wrapper {
        min-height: 520px;
    }

    .hero__brand {
        font-size: 32px;
    }

    .hero__service {
        font-size: 42px;
    }

    .hero__slogan {
        font-size: 16px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .hero__buttons {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .reviews__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }


    .reviews__rating {
        margin-top: 0;
    }

    .reviews__item {
        padding: 12px;
    }

    .reviews__name {
        font-size: 15px;
    }

    .services__item {
        padding: 10px 12px 10px 5px;
        gap: 10px;
        font-size: 13px;
    }


    .services__icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        margin-left: 0;
    }


    .services__icon img {
        width: 25px;
        height: 25px;
    }


    .services__name {
        font-size: 13px;
        line-height: 1.3;
    } 

    .advantages__item {
    padding: 10px 12px 10px 5px;
    gap: 10px;
}

.advantages__icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    margin-left: 0;
}

.advantages__icon img {
    width: 25px;
    height: 25px;
}

.advantages__text {
    font-size: 13px;
    line-height: 1.3;
}



    .prices__select {
        padding: 16px 20px;
    }


    .prices__current {
        font-size: 16px;
    }


    .prices__arrow {
        font-size: 14px;
    }


    .prices__item {
        padding: 14px 20px;
        font-size: 14px;
    }


    .prices__row {
        padding: 14px 15px;
    }


    .prices__service,
    .prices__price {
        font-size: 14px;
    }

    .contacts__button {
        width: 220px;
        font-size: 13px;
        padding: 0 15px;
    }

    .brands__botton {
        font-size: 13px;
    }

    .footer__policy {
        font-size: 13px;
    }

.advantages .section-title,
.payment__title,
.prices .section-title,
.services__title,
.brands__heading,
.reviews__title,
.appointment__title {
    font-size: 20px;
}



}


/* =================================
   390px — iPhone / Android
================================= */

@media (max-width:390px) {

.footer__logo {
    font-size: 22px;
}

  .brands__botton {
        font-size: 12px;
    }

}


/* =================================
   375px — маленькие телефоны
================================= */

@media (max-width:375px) {

      .hero__brand {
        font-size: 24px;
    }

    .hero__service {
        font-size: 34px;
    }

    .services__name {
        font-size: 12px;
        line-height: 1.3;
        word-break: normal;
    }
    
    /*.services__name {
        font-size: 11px;
        line-height: 1.3;
    } */

    .services__text {
        font-size: 12px;
        line-height: 1.4;
    }


    .services__item {
        padding: 8px 10px 8px 5px;
        gap: 8px;
    }

    .advantages__item {
    padding: 8px 10px 8px 5px;
    gap: 8px;
}

.advantages__icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
}

.advantages__icon img {
    width: 22px;
    height: 22px;
}

.advantages__text {
    font-size: 12px;
    line-height: 1.3;
    word-break: normal;
}

    .prices__item {
        padding: 13px 15px;
        font-size: 14px;
    }

    .contacts__title {
        font-size: 28px;
        margin-bottom: 20px;
    }


    .contacts__item {
        margin-bottom: 15px;
    }


    .contacts__label {
        font-size: 15px;
        margin-bottom: 6px;
    }


    .contacts__text,
    .contacts__link {
        font-size: 14px;
        line-height: 1.4;
    }


    .contacts__button {
        width: 186px;
        height: 40px;
        font-size: 12px;
        padding: 0 10px;
    }

    .advantages .section-title,
.payment__title,
.prices .section-title,
.services__title,
.brands__heading,
.reviews__title,
.appointment__title,
.booking__title {
    font-size: 18px;
    font-weight: 800;
}



    .appointment__input {
        font-size: 14px;
        padding: 0 12px;
    }


    .footer__policy {
        font-size: 11px;
    }
}


@media (max-width:340px) {

    
    .appointment__input {
        font-size: 13px;
        padding: 0 12px;
    }
}