/* CSS Document */

/* MAX-WIDTH: 1250 */
@media only screen and (max-width: 1250px) {
}

/* MAX-WIDTH: 1100 */
@media only screen and (max-width: 1100px) {
    #offer {margin: 0 20px;}
}

/* MAX-WIDTH: 992 */
/* @media only screen and (max-width: 992px) {
    .site-header__inner {
        gap: 16px;
        padding: 10px 16px;
    }
    .site-header__logo img {
        height: 36px;
    }
    .site-header__nav {
        gap: 16px;
    }
    .site-header__nav a{
        font-size: 13px;
    }
    .site-header__phone {
        font-size: 13px;
    }
    .site-header__cta.button {
        padding: 12px 16px;
        font-size: 12px;
    }
    .hero__inner {
        flex-direction: column;
        min-height: 480px;
        position: relative;
        padding-bottom: 40px;
    }
    .hero__content {
        flex: none;
        padding: 100px 24px 60px;
        background-color: rgba(255, 255, 255, 0.6);
        position: relative;
        z-index: 2;
        margin: 0 -20px;
    }
    .hero__visual {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex: none;
        width: 100%;
        min-height: 100%;
        margin-right: 0;
        z-index: 1;
        pointer-events: none;
    }
    .hero__mosaic {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 480px;
    }
    .hero__cell--black,
    .hero__cell--red,
    .hero__cell--exhibition {
        display: none;
    }
    .hero__cell--photo {
        position: absolute;
        top: 0;
        right: 20px;
        left: 50%;
        padding: 0;
        z-index: 1;
    }
    .hero__cell--photo img {
        width: 100%;
        max-width: 100%;
    }
    .hero__title {font-size: 28px;}


    #description {background-position-x: center;}
    #about div {padding: 50px 5%;}
    #about div:last-of-type p {padding: 50px 10%;}
    .hero__title {font-size: 34px;}
} */



/* MAX-WIDTH: 992 */
@media only screen and (max-width: 992px) {
    .site-header__inner {
        gap: 16px;
        padding: 10px 16px;
    }
    .site-header__logo img {
        height: 36px;
    }
    .site-header__nav {
        gap: 16px;
    }
    .site-header__nav a {
        font-size: 13px;
    }
    .site-header__phone {
        font-size: 13px;
    }
    .site-header__cta.button {
        padding: 12px 16px;
        font-size: 12px;
    }

    /* ===== HERO MOBILE ===== */
    .hero__inner {
        flex-direction: column;
        min-height: auto;
        position: relative;
        padding: 0 16px 30px;
    }

    .hero__content {
        flex: none;
        width: 100%;
        padding: 90px 0 24px;
        background-color: transparent;   /* убираем полупрозрачность */
        position: relative;
        z-index: 2;
        margin: 0;
        order: 1;
    }

    .hero__visual {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        flex: none;
        width: 100%;
        min-height: auto;
        margin-right: 0;
        z-index: 1;
        pointer-events: auto;
        order: 2;
    }

    .hero__mosaic {
        position: relative;
        width: 100%;
        height: auto;
        min-height: auto !important;
    }

    .hero__cell--black,
    .hero__cell--red,
    .hero__cell--exhibition {
        display: none !important;
    }

    .hero__cell--photo {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        padding: 0;
        margin: 0 0 10px;
        z-index: 1;
    }

    .hero__cell--photo img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        display: block;
        object-fit: cover;
    }

    .hero__title {
        font-size: 28px;
        max-width: 100%;
    }

    .hero__description,
    .hero__badge {
        max-width: 100%;
    }

    /* остальные стили из этого медиа-запроса оставляем */
    #description {background-position-x: center;}
    #about div {padding: 50px 5%;}
    #about div:last-of-type p {padding: 50px 10%;}
}




/* MAX-WIDTH: 860 */
@media only screen and (max-width: 860px) {
    .blocks4 li, .blocks4 div, .blocks4 article {
        flex-basis: calc(50% - 15px);
        margin-bottom: 20px;
    }
    .side-img-block {margin: 50px 0;}
    .side-img-block div:nth-child(1),
    .side-img-block div:nth-child(2),
    .side-img-block figure {
        flex-basis: 100%;
        max-width: 100%;
    }
    .side-img-block article {
        background: var(--bg-image) no-repeat right center;
        background-size: calc(100% - 200px);
        background-size: cover;
        background-position-x: 150px;
    }

    article#benefits {background-position-x: left;}
    .side-img-block figure H2 {
        max-width: none;
        padding: 20px;
        text-align: right;
        color: white;
        text-shadow: 2px 2px 2px #222;
    }
    #features figure, #benefits figure {
        background: none;
        margin-bottom: -60px;
    }
    #features figure {order: -1;}
    #about2 ul.list {margin-bottom: 50px;}
    ul.list strong {
        margin-bottom: 20px;
        background-position-y: center;
        background-size: 140px;
    }
    #process H2 {flex-basis: calc(50% - 20px);}
}

/* MAX-WIDTH: 768 */
@media only screen and (max-width: 768px) {
    H1 {line-height: 1em; }
    article, .content {padding: 30px 20px;}
    .site-header__inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 16px;
        position: relative;
    }
    .site-header__contact-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: 2;
        margin-left: auto;
        width: 44px;
        height: 38px;
        padding: 0;
        background: #fff;
        color: var(--text1-color);
        font-size: 0;
        cursor: pointer;
        position: relative;
    }
    .site-header__contact-toggle::before,
    .site-header__contact-toggle::after {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 0.2s ease, top 0.2s ease, box-shadow 0.2s ease;
    }
    .site-header__contact-toggle::before {
        top: 13px;
        box-shadow: 0 6px 0 currentColor;
    }
    .site-header__contact-toggle::after {
        top: 25px;
    }
    .site-header__contact-menu-toggle:checked + .site-header__contact-toggle {
        border-color: var(--add-color);
        color: var(--add-color);
    }
    .site-header__contact-menu-toggle:checked + .site-header__contact-toggle::before {
        top: 18px;
        box-shadow: none;
        transform: rotate(45deg);
    }
    .site-header__contact-menu-toggle:checked + .site-header__contact-toggle::after {
        top: 18px;
        transform: rotate(-45deg);
    }

    .site-header__menu {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 32px 0;
        background: #EFEFF4;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        z-index: 20;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        transition: all .3s;
    }
    .site-header__contact-menu-toggle:checked ~ .site-header__menu {
        opacity: 1;
        visibility: visible;
    }
    .site-header__nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-right: 0;
    }
    .site-header__nav a {
        font-size: 15px;
        text-align: center;
    }
    .site-header__contacts {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .site-header__contacts .site-header__phone {
        margin-left: 0;
        font-size: 15px;
        text-align: center;
        display: block;
    }
    .site-header__contacts .site-header__cta.button {
        padding: 12px 16px;
        font-size: 13px;
        text-align: center;
        margin-left: 0;
        max-width: 185px;
        width: 100%;
    }
    /* .hero__mosaic {
        min-height: 420px;
    }
    .hero__cell--photo {
        top: -48px;
        left: 40%;
        width: 80%;
    } */
    .hero__overline {
        width: 68%;
        letter-spacing: 0;
    }
    #offer address {
        padding-left: 70px;
    }
    #offer article {flex-direction: column; }
    #offer H2, #offer article div {width: auto; max-width: 100%;}
    #offer H2 {
        font-size: 5vw;
        color: #37B;
        background: none;
        margin-right: 0px;
        &:before, &:after
        {display: none;}
    }
    #offer H3 {
        margin-bottom: auto;
        font-size: 4vw;
    }
    .arrow {bottom: 0; }
    #faq li {
        flex-basis: 100%;
        min-height: 5em;
    }
    #faq li:nth-child(4n-1) {
        margin-left: 0;
    }
    #faq li:nth-child(even) {
        margin-left: 5%;
        flex-basis: 90%;
        background-color: rgba(255, 255, 255, .5);
    }
    .blocks3 li, .blocks3 div, .blocks3 article {
        flex-basis: 49%;
    }
    FOOTER .request {flex-basis: 100%; }
}

/* MAX-WIDTH: 640 */
@media only screen and (max-width: 640px) {
    .hero__title {font-size: 28px;}
    .hero__description {font-size: 15px;}
    .hero__btn.button {
        width: 100%;
        text-align: center;
    }
    #about2 div:last-child {padding: 30px;}
    #about2 ul.list {
        margin-top: -20px;
        background-size: 150px;
    }
    .side-img-block { }
    #process li {
        min-height: auto;
    }
    H2 {font-size: 36px;}
    .blocks2 li, .blocks2 div, .blocks2 article {flex-basis: 100%;}
    FOOTER article:first-child {flex-direction: column;	}
}

/* MAX-WIDTH: 480 */
@media only screen and (max-width: 480px) {
    H1 {
        font-size: 43px;
        margin: 30px 0;
    }
    H2 {font-size: 30px;}
    H3 {font-size: 23px;}
    .site-header__contacts .site-header__phone {display: block;}
    .site-header__contacts .site-header__cta.button {margin-left: 0;}
    section {margin-bottom: 30px; }
    .side-img-block ul {margin: 0px 0 0;	}
    .side-img-block div:nth-of-type(1),
    .side-img-block div:nth-of-type(2) {
        padding: 50px 20px;
    }
    #features li {
        padding: 15px 15px 15px 90px
        &:after {
        width: 60px;
        height: 60px;
        top: calc(50% - 30px);
        left: 15px;}
    }
    #about2 ul.list {
        /*margin-top: -60px;
        padding-right: 20px;*/
        background-size: 100px;
        background-position-y: 45px;
    }
    ul.list strong {margin: 0 0px 25px 0;}
    .blocks3 li, .blocks3 div, .blocks3 article {
        flex-basis: 100%;
    }
    .blocks4 li, .blocks4 div, .blocks4 article {
        margin-bottom: 20px;
        flex-basis: 100%;
    }
    #benefits H2 {text-align: left;}
    #benefits li {flex-wrap: wrap;}
    #benefits H4 {flex-basis: calc(100% - 10px);}
    #benefits span {flex-basis: calc(100% - 35px);}
    #process H2 {
        flex-basis: 100%;
        background: none;
        color: black;
    }
    #process H2 span {
        display: block;
        padding: 0;
        background: none;
        text-align: left;
    }
    FOOTER address {
        background-position-x: 18px;
        padding: 6px 20px 3px 75px;
        background-size: 45px;
    }
    FOOTER address:nth-of-type(3),
    FOOTER address:nth-of-type(4) {
        padding-left: 18px;
    }
    FOOTER address:nth-of-type(3) .fa,
    FOOTER address:nth-of-type(4) .fa {
        width: 45px;
        height: 45px;
        font-size: 40px;
    }
    FOOTER section, FOOTER article {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* MAX-WIDTH: 360 */
@media only screen and (max-width: 360px) {
    article, .content {
        padding: 20px 10px;
    }
    .side-img-block div:nth-of-type(1), .side-img-block div:nth-of-type(2) {
        padding: 50px 10px;
    }
    #reviews li {
        width: 320px;
        margin: 0 5px;
    }
}




/* MIN-WIDTH: 480 */
@media only screen and (min-width: 480px) {
}

/* MIN-WIDTH: 768 */
@media only screen and (min-width: 768px) {
}

/* MIN-WIDTH: 992 */
@media only screen and (min-width: 992px) {
}

/* MIN-WIDTH: 1100 */
@media only screen and (min-width: 1100px) {
}

/* MIN-WIDTH: 1250 */
@media only screen and (min-width: 1250px) {
}