/* Prevent layout shift for all screen sizes */
@media (min-width: 320px) {
    /* Reserve space for images with explicit dimensions */
    img[width][height] {
        height: auto;
        display: block;
    }

    /* Reserve space for hero section to prevent layout shift */
    .review__area {
        min-height: 600px;
    }

    /* Ensure images don't cause layout shift */
    .header__logo img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* Prevent layout shift from Google review images */
    .google__icon img,
    .star__group img {
        display: block;
        height: auto;
    }

    /* Call symbol images */
    .call__symbol img {
        display: block;
        height: auto;
    }
}

/* SM Small Device :320px. */
@media only screen and (min-width: 320px) and (max-width: 767px) {

    /* Prevent layout shift on mobile */
    body {
        overflow-x: hidden;
    }

    main {
        contain: layout style;
    }

    .device__noSmall {
        display: none;
    }

    .device__small {
        display: block;
    }

    .offcanva__trigger {
        display: flex;
    }

    .offcanva__trigger img {
        width: 51px;
        height: auto;
        aspect-ratio: 51 / 31;
        display: block;
    }

    header {
        padding-top: 40px;
    }

    .header__logo {
        display: flex;
        align-items: center;
        min-height: 74px;
    }

    .header__logo img {
        width: 176px;
        height: auto;
        max-width: none;
        flex-shrink: 0;
        display: block;
        aspect-ratio: 176 / 73.56;
    }

    .header__content {
        align-items: normal;
    }
    .films__content {
        width: 100%;
    }
    .review__text p {
        font-weight: 400; /* Regular */
        font-size: 16px;
        line-height: 135.1%; /* или 1.351 */
        letter-spacing: 0;

        /* Улучшение рендеринга */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;

        /* Попробуйте добавить */
        font-synthesis: none;
        font-feature-settings: 'liga' 1, 'calt' 1;


        margin-bottom: 16px;
    }
    .single__films:first-child, .single__films:nth-child(2), .single__films:last-child {
        padding-bottom: 40px;
    }
    .single__films {
        padding: 43px 16px 0 39px;
        border-radius: 32px;
        width: 100%;
    }

    .review__block {
        padding: 4px 13px;
        top: 32px;
        min-height: 50px;
        contain-intrinsic-size: auto 50px;
    }

    .single__review__block p {
        font-size: 13px;
        line-height: 104.3%;
    }

    .single__review__block svg {
        width: 15px;
    }

    .review__block .single__review__block:first-child {
        width: 28%;
    }

    .single__review__block:last-child {
        width: 29%;
    }

    .single__review__block {
        width: 38%;
    }

    /* Hide desktop image on mobile */
    .review__image img:not(.review__image__mobile) {
        display: none !important;
    }

    /* Show mobile image on mobile */
    .review__image .review__image__mobile {
        display: block !important;
        width: 100%;
        height: auto;
        aspect-ratio: 382 / 299;
    }

    .review__image {
        contain-intrinsic-size: 382px 299px;
        content-visibility: auto;
    }

    .call__symbol {
        bottom: 30px;
        left: 50%;
        width: 80px;
        height: 80px;
        transform: translateX(-50%);
    }

    .call__symbol img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
    }

    .review__wrapper {
        position: relative;
        min-height: 330px;
        contain-intrinsic-size: auto 330px;
    }
    .review__google {
        border-radius: 40.19px;
    }

    .google__icon h6 {
        font-size: 16.08px;
        line-height: 1.2;
        letter-spacing: 0;
        margin-top: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;

        font-synthesis: none;
        font-feature-settings: 'liga' 1, 'calt' 1;
    }

    .films__list ul li p {
        font-size: 16px;
    }

    .google__icon {
        justify-content: center;
        margin-bottom: 0;
    }

    .films__list ul li svg {
        width: 16px;
        height: 16px;
    }

    .review__text a {
        padding: 13px 90px;
        border-radius: 12px;
        font-size: 18px;
        line-height: 135%;
        margin-bottom: 0;
    }

    .google__icon a span {
        font-size: 30.14px;
    }

    .google__icon a img {
        width: 46px;
        height: 45px;
        display: block;
        aspect-ratio: 46 / 45;
    }

    .review__star span {
        font-size: 28px;
    }

    .star__group img {
        width: 154px;
        height: auto;
        display: block;
        aspect-ratio: 154 / 39.71;
    }

    .review__text h4 {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 8px;
    }

    .google__icon a {
        gap: 13px;
    }

    .review__google {
        max-width: 100%;
        margin: auto;
        padding: 21px 47px 25px 42px;
    }

    .films__area {
        padding-block: 30px 0;
    }

    .review__area {
        padding-block: 20px 30px;
        min-height: 750px;
    }
    .quickcomparison__area .container {
        padding-inline: 6px;
    }
    .quickcomparison__area {
        padding-block: 50px;
    }
    .quickcomparison__content {
        width: 100%;
    }
    .quickcomparison__content h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .comparison__table--desktop {
        display: none;
    }

    .comparison__table--mobile {
        display: grid;
        padding: 10px 4px;
        gap: 5px 3px;
        overflow-x: auto;
        border-radius: 9.57px;
    }

    .table__cell {
        padding: 7px 4px;
        font-size: 10px;
        min-height: 32px;
        font-weight: 400;
        border-radius: 3px;
        font-family: var(--inter-font);
    }

    .table__header .table__cell {
        font-size: 10px;

    }

    .table__row-header {
        font-size: 10px;
        font-weight: 600;
    }

    .trusted__area .container {
        padding-inline: 0;
    }

    .trusted__area {
        padding-block: 10px;
    }
    .table__row .table__cell:last-child {
        width: 100%;
    }
    .trusted__item:not(:first-child) {
        gap: 4px;
        flex-direction: row;
        align-items: center;
        display: inline-flex;
    }

    .trusted__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .trusted__items-row {
        display: flex;
        flex-direction: row;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .trusted__item {
        gap: 3px;
    }
    .trusted__text {
        font-weight: 600;
        font-size: 24px;
    }

    .trusted__icon {
        width: 16px;
        height: 16px;
    }

    .trusted__label {
        font-size: 14px;
        font-weight: 600;
    }

    .whychooseus__area {
        padding-block: 50px;
        width: 100%;
    }

    .why_choose_us{
        width: 100%;
        padding: 0 15px;
    }

    .whychooseus__area h2 {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .whychooseus__content {
        flex-direction: column;
        gap: 30px;
        min-height: auto;
    }

    .whychooseus__right {
        order: -1;
    }

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

    .whychooseus__block {
        padding: 30px 15px 30px 30px;
        gap: 12px;
        min-height: 100px;
        margin: 0 8.5px;
    }

    .block__icon img {
        width: 32px;
        height: 32px;
    }

    .block__content h3 {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 3px;
    }

    .block__content p {
        font-size: 16px;
        font-weight: 400;
        line-height: 135.1%;
        /* Улучшение рендеринга */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;

        /* Попробуйте добавить */
        font-synthesis: none;
        font-feature-settings: 'liga' 1, 'calt' 1;
    }

    .faq__area {
        padding-block: 0;
    }

    .faq__content h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .faq__accordion {
        width: 100%;
        gap: 8px;
        margin-bottom: 25px;
    }

    .faq__item {
        border-radius: 14.36px;
        border: 0.24px solid var(--color3);
    }

    .faq__question {
        padding: 10px 20px;
        height: auto;
    }

    .faq__question h3 {
        font-size: 16px;
        font-weight: 600;
    }

    .faq__toggle {
        width: 30px;
        height: 30px;
    }

    .faq__icon {
        width: 13.66px;
        height: 13.66px;
    }

    .faq__answer p {
        font-size: 14px;
        padding: 18px 0;
    }

    .faq__item.active .faq__answer {
        padding: 0 20px;
    }

    .watch__more__btn {
        padding: 12px 50px;
        font-size: 18px;
        border-radius: 12px;
        width: 269px;
        height: 50px;
    }

    .contact__area {
        padding-block: 50px;
    }

    .contact__content h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .contact__form {
        gap: 15px;
        width: 100%;
    }

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

    .form__field input,
    .form__field textarea {
        padding: 14px 20px;
        font-size: 14px;
        border-radius: 31.88px;
    }

    .spam__prevention {
        gap: 10px;
        text-align: center;
    }

    .spam__input {
        width: 60px;
    }

    .spam__input input {
        padding: 10px 12px;
        font-size: 14px;
    }

    .contact__btn {
        padding: 14px 40px;
        font-size: 16px;
        border-radius: 12.59px;
        width: 300px;
        height: 50px;
    }

    .getfreequote__area {
        padding-block: 50px;
    }

    .getfreequote__content h2 {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .getfreequote__content p {
        font-size: 18px;
        margin-bottom: 0;
    }

    .getfreequote__content p:last-of-type {
        margin-bottom: 25px;
    }

    .getfreequote__btn {
        padding: 16px 40px;
        font-size: 16px;
        border-radius: 20px;
        width: 269px;
        height: 50px;
    }

    .films__title h5 {
        font-size: 20px;
        margin-bottom: 24px;
        line-height: 24px;
    }

    .single__films h4 {
        font-size: 22px;
        line-height: 26px;
        margin-bottom: 8px;
    }

    .single__films h5 {
        font-size: 18px;
        line-height: 135.1%;
        margin-bottom: 8px;
    }

    .films__reason h4 {
        font-size: 18px;
        line-height: 22px;
    }
    .films__button {
        padding: 10px;
    }
    .films__button img {
        width: 93.67px;
    }

    .footer__area {
        padding: 30px 0 20px;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
    }

    .footer__main {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 25px;
    }

    .footer__left {
        max-width: 100%;
    }
    .footer__logo img {
        height: 103px;
        margin: 0 auto;
    }

    .footer__call__btn {
        display: flex;
        width: 293px;
        height: 59.39px;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        gap: 10px;
        font-size: 18px;
        margin: 20px auto;
        padding: 0;
        border-radius: 15.83px;
    }

    .footer__call__btn svg {
        flex-shrink: 0; /* чтобы иконка не сжималась */
    }

    .footer__google__badge,
    .footer__warranty__badge {
        padding: 28px 20px;
    }
    .footer__google__badge {
        max-width: 293px;
        margin: -10px auto 0 auto;
        padding: 15px;
        gap: 0;
        border-radius: 33.64px;
    }
    .footer__warranty__badge {
        max-width: 293px;
        margin: 0 auto;
        padding: 15px;
        border-radius: 37.26px;
        align-self: center;
    }

    .footer__column {
        align-items: center;
    }

    .google__text {
        font-size: 25.23px;
    }

    .google__reviews {
        font-size: 13.46px;
    }

    .rating__number {
        font-size: 22.43px;
    }

    .rating__stars img {
        height: 100%;
        width: 119px;
    }

    .warranty__text span {
        font-size: 22.25px;
    }

    .footer__column__title {
        font-size: 24px;
        text-align: center;
    }

    .footer__navigation {
        align-items: center;
    }

    .footer__navigation a {
        font-size: 18px;
    }
    .footer__navigation.spec a {
        font-weight: 600;
    }
    .footer__contact__info {
        align-items: center;
        text-align: center;
    }

    .contact__company, .contact__location {
        font-size: 18px;
        margin: -5px;
        font-weight: 400;
    }
    .contact__location {
        margin-bottom: 10px;
    }

    .contact__item span {
        font-size: 18px;
    }

    .footer__bottom__content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .footer__main {
        margin-bottom: 30px;
    }
    .footer__bottom {
        padding-top: 0;
    }
    .footer__copyright p,
    .footer__legal a {
        font-size: 14px;
    }
    .footer__legal {
        margin-top: 20px;
    }
    .header__navigation {
        display: none;
    }

    .header__contact {
        display: none;
    }

    .review__left {
        width: 100%;
    }

    .review__right {
        width: 100%;
        margin-top: 24px;
        max-width: 400px;
        margin-inline: auto;
        min-height: auto;
    }


    .review__text {
        text-align: center;
    }

    .films__flex {
        gap: 30px;
    }
    /* Hide desktop content on mobile */
    .show-web {
        display: none !important;
    }

    /* Show mobile content on mobile */
    .hide-web {
        display: block !important;
    }

    /* For inline elements like img that should stay inline */
    img.hide-web {
        display: inline-block !important;
    }

    img.show-web {
        display: none !important;
    }
}
/* Mobile CTA */
@media only screen and (max-width: 767px) {
    .sticky-mobile-cta {
        display: block;
    }
}
/* Extra small screens adjustments */
@media (max-width: 480px) {
    .main-image {
        /* Ensure image loads immediately */
        content-visibility: auto;
        contain-intrinsic-size: 345px 430px;
    }

    .review__image {
        content-visibility: auto;
        contain-intrinsic-size: 382px 299px;
    }

    .sticky-mobile-cta {
        padding: 12px 15px;
    }

    .sticky-cta-button {
        padding: 14px 16px;
    }

    .sticky-cta-text {
        font-size: 16px;
    }

    .sticky-phone-info {
        font-size: 14px;
    }

    .sticky-phone-icon {
        width: 16px;
        height: 16px;
    }
}
/* Custom Page */
@media (max-width: 480px) {
    /* Section Text Page */
    .text_section {
        padding-block: 40px;
    }

    .text_section h1 {
        font-size: 28px;
    }

    .text_section h2 {
        font-size: 22px;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .text_section p {
        font-size: 16px;
        margin-bottom: 7px;
    }

    .text_section ul {
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .text_section ul li {
        font-size: 16px;
        margin-bottom: 10px;
        list-style-type: disc;
        margin-left: 20px;
    }
    .warranty_show {
        display: none;
    }
    .warranty_hide {
        display: flex !important;
    }

}