@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap");

*,
::before,
::after {
    box-sizing: border-box; /* 1 */
    border-width: 0; /* 2 */
}

html,
:host {
    line-height: 1.5; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -moz-tab-size: 4; /* 3 */
    -o-tab-size: 4;
    tab-size: 4; /* 3 */
    -webkit-tap-highlight-color: transparent; /* 7 */
}

.fixed {
    position: fixed;
}

.hidden {
    display: none;
}

button {
    cursor: pointer;
}

/* КОНТЕЙНЕР ДЛЯ ВСЕЙ СТРАНИЧКИ */
.container-width {
    max-width: 1300px;
    box-sizing: border-box;
    font-family: "Exo 2", sans-serif;
    color: black;
    margin: 320px auto 0 auto;
    position: relative;
}

/* СЕКЦИЯ 1 */
.hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-section::before {
    content: "";
    position: absolute;
    background-image: url("../img/sec-1.png");
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: -100px;
    right: -100px;
    min-width: 600px;
    min-height: 700px;
    overflow-y: visible;
}

.hero-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1300px;
}

.hero-text {
    text-align: center;
    margin-bottom: 4vh;
    margin-left: -550px;
}

.hero-title {
    font-size: 52px;
    font-weight: 600 !important;
    color: rgb(143, 150, 176);
    margin-bottom: 1vh;
    text-transform: uppercase;
}

.hero-subtitle {
    text-align: start;
    font-size: 24px;
    color: black;
    text-indent: -26px;
    margin-left: 26px;
}

.hero-bonus {
    margin-top: 110px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.hero-bonus-text {
    font-size: 20px;
    color: rgb(143, 150, 176);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 13px;
}

.hero-bonus-btn {
    font-size: 20px;
    width: 287px;
    height: 50px;
    color: white;
    background: rgb(154, 202, 60);
    border-radius: 5px;
    box-shadow: 0 5px 8px 0 rgba(154, 202, 60, 0.64);
    align-items: center;
}

.hero-bonus-btn-1 {
    width: 557px;
    height: 61px;
}

.hero-image {
    right: 221px;
    position: absolute;
    width: auto;
    height: auto;
    top: 200px;
    z-index: -1;
}

.hero-features {
    display: flex;
    justify-content: space-between;
    margin: 158px auto 0 auto;
    width: 100%;
    text-align: center;
    align-items: center;
    border-radius: 15px;
}

.feature {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 33.3%;
    height: 240px;
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: white;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1vh 0;
}

.feature-text {
    font-size: 20px;
    font-weight: 600;
    color: black;
    margin: 0;
    text-align: left;
}


/* СЕКЦИЯ 2 */
.warehouse-doors-section {
    position: relative;
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    max-width: 1300px;
    margin: 79px auto;
}

.section-container-1 {
    margin: 79px auto;
}

.section-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 52px;
    align-items: center;
    text-align: center;
    font-weight: bold !important;
    margin-bottom: 72px;
    color: rgb(143, 150, 176);
}

.section-title-2 {
    text-align: left;
    align-items: start;
    justify-content: start;
    font-weight: bold !important;
    margin-bottom: 51px;
    color: rgb(143, 150, 176);
    display: flex;
    flex-direction: column;
    font-size: 52px;
}

.section-title-2-mobile {
    display: none;
}

.door-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

/* Стили для карточек дверей */
.door-card {
    display: flex;
    flex-direction: column;
    /*width: 33%;*/
    overflow: hidden;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    width: calc((100% - 40px) / 3); /* 100% - (2 * gap) делим на 3 карточки */
    margin-bottom: 20px;
}

.door-card-title {
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    margin-top: 16px;
}

.door-card-subtitle {
    font-size: 22px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    margin-top: 13px;
    margin-bottom: 35px;
}

.door-card-image {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.door-card-details-container {
    margin: 35px auto;
    width: 100%;
    color: rgb(154, 202, 60);
    text-decoration: none;
    font-size: 24px;
}


.door-card-details {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: rgb(154, 202, 60);
    text-decoration: none;
    font-size: 24px;
    margin-bottom: 18px;
    padding: 0 27px;
}

.door-card-hidden {
    display: none;
}

.show-models {
    display: flex;
    gap: 1vw;
    color: rgb(143, 150, 176);
    justify-content: center;
    margin-top: 5vh;
}

.show-models-btn {
    font-size: 20px;
    display: flex;
    gap: 17px;
    background: #fff;
    cursor: pointer;
    color: rgba(143, 150, 176, 1);
}

.button-zamer {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

/* СЕКЦИЯ 3 */

.section-container {
    max-width: 1300px;
    margin: 0 auto;
}

.aluminum-edge-section {
    position: relative;
    background-color: #fff;
    margin: 62px auto 132px auto;
    display: flex;
    justify-content: space-between;
}

.edge-description {
    width: 48%;
    display: flex;
    flex-direction: column;
}

.edge-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
}

.main-edge-image {
    max-width: 553px;
    max-height: 553px;
}

.edge-text {
    font-size: 24px;
    color: black;
    text-indent: 30px;
    margin-bottom: 20px; /* Было 3vh, заменено на 20px */
}

.edge-features {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Было 2vh, заменено на 15px */
    margin-bottom: 20px; /* Было 3vh, заменено на 20px */
    font-size: 24px;
}

.feature-description {
    font-size: 24px;
    margin: 0;
    width: 622px;
    display: flex;
    align-items: center; /* Для вертикального центрирования точки */
}

.feature-description::before {
    content: "";
    min-width: 10px;
    height: 10px;
    background-color: rgb(154, 202, 60);
    border-radius: 50%;
    margin-right: 25px;
}

.edge-durability {
    text-indent: 1.5vw;
    font-size: 24px;
    margin-top: 2vh;
}

.edge-zoom {
    position: absolute;
    right: 0;
    bottom: 20%;
    background: white;
    border-radius: 50%;
    padding: 1vh;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zoom-image {
    width: 8vw;
    height: 8vw;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.zoom-label {
    font-size: 1rem;
    color: black;
    text-align: center;
    margin-top: 0.5vh;
    white-space: nowrap;
}

/* СЕКЦИЯ 4 С ТРЕМЯ КАРТИНКАМИ */

.door-finishing-section {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.finishing-options {
    display: flex;
    justify-content: space-between;
}

.finishing-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 33%;
    position: relative;
}

.finishing-image {
    max-width: 397px;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 1.5vh;
    position: relative;
}

.finishing-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: all 0.3s ease;
}

.finishing-option:hover .finishing-image img {
    filter: brightness(0.7);
}

.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    color: rgba(143, 150, 176, 1);
    text-align: center;
    z-index: 10;
    font-size: 24px;
}

.finishing-option:hover .hover-overlay {
    display: flex;
    color: rgba(143, 150, 176, 1);
}

.hover-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*background: rgba(255, 255, 255, 0.7);*/
    color: rgba(143, 150, 176, 1);
    padding: 10px 15px;
    border-radius: 10px;
    gap: 10px;
}

.dwnld-btn {
    width: 30px !important;
    height: 30px;
}

.finishing-name {
    font-size: 24px;
    color: rgb(154, 202, 60);
    text-align: left;
    margin-top: 10px;
}

.finishing-image:hover {
    cursor: pointer;
}

/* СЕКЦИЯ 5 С ТАБАМИ */

.door-components-section {
    position: relative;
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    margin-top: 91px;
}

.components-tabs {
    width: 100%;
}

.tab-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 88px;
    position: relative;
}

.tab-button {
    display: flex;
    align-items: center;
    gap: 1vw;
    justify-content: center;
    align-content: center;
    background-color: rgb(233, 234, 239);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 80px;
    width: 18%;
    position: relative;

}

.tab-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: white;
    color: black;
    border: 1px solid rgb(154, 202, 60);
    border-radius: 50%;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;

}

.tab-button.active .tab-number {
    background-color: rgb(154, 202, 60);
    color: white;
    border: none;
}

.tab-button.active .tab-number::before {
    content: '';
    position: absolute;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(154, 202, 60, 0.5);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.tab-name {
    font-size: 24px;
    font-weight: 600;
    color: black;
}

.tab-content-container {
    position: relative;
    background-color: rgb(233, 234, 239);
    padding: 32px 60px 32px 60px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    height: 441px;
}

.tab-content {
    display: none; /* Начальное состояние - скрыто */
    opacity: 0;
    transition: opacity 0.3s ease;
    width: 100%;
    /* Стили из .component-details */
    justify-content: space-between;
    align-items: start;
    height: 100%;
}

.tab-content.active {
    display: flex; /* При активации показываем как flex */
    opacity: 1;
}

.component-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.component-info {
    flex: 1;
    max-width: 65%;
    height: 100%;
}

.component-title {
    font-size: 52px;
    font-weight: 600 !important;
    /*margin-bottom: 28px;*/
    width: 927px;
    line-height: 100%;
}

.component-features {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin-top: 36px;
}

.component-features li {
    position: relative;
    padding-left: 20px;
    font-weight: 600;
    margin-bottom: 28px;
    font-size: 24px;
    white-space: pre-line;
    line-height: 1.2;
}

.component-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: black;
    font-weight: 600;
}

.component-image {
    flex: 1;
    max-width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.component-image img {
    max-width: 100%;
    max-height: 350px;
    -o-object-fit: contain;
    object-fit: contain;
}

.my-request {
    display: flex;
    justify-content: space-between;
    margin-top: 66px;
    align-items: center;
    margin-bottom: 208px;
}

.my-request-text {
    color: black;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}

.my-request-btn {
    color: white;
    background: rgb(154, 202, 60);
    border-radius: 5px;
    box-shadow: 0 5px 8px 0 rgba(154, 202, 60, 0.64);
    /*text-transform: uppercase;*/
    height: 100%;
    font-size: 20px;
    font-variant-caps: small-caps;
    width: 100%;
    font-weight: 600;
}

.btn-last {
    margin-top: 0;
    height: 58px;
    max-width: 397px;
    width: 100%;
}


#popup-overlay {
    position: fixed;
    top: 150px;
    left: 40%;
    display: none;
    justify-content: center;
    align-items: center;
}

#popup-overlay1 {
    position: fixed;
    top: 25%;
    left: calc(50% - 225px);
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

#popup-overlay2 {
    position: fixed;
    top: 25%;
    left: calc(50% - 225px);
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

#popup-overlay3 {
    position: fixed;
    top: 25%;
    left: calc(50% - 225px);
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

#popup {
    position: relative;
    width: 450px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#popup1 {
    position: relative;
    width: 450px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    background: none;
    border: none;
}

.popup-title {
    font-size: 24px;
    text-align: center;
    font-weight: 600 !important;
    margin-bottom: 30px;
    margin-top: 10px;
    color: black;
}

.form-group {
    font-size: 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

.form-group:nth-child(3) {
    width: 100%;
}

.form-group label {
    display: block;
    color: rgba(143, 150, 176, 1);
    margin: auto;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
}

.checkbox-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap;
    /*gap: 34px;*/
}

.checkbox-container:nth-child(3) {
    width: 100%;
}

.policy-text {
    font-size: 13px;
    color: black;
    text-align: center;
    /*margin: auto;*/
    margin-left: 30px;
}

.policy-link {
    color: #a4d65e;
    text-decoration: none;
}


.submit-button {
    width: 100%;
    padding: 15px;
    background-color: rgba(154, 202, 60, 1);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    text-transform: lowercase;
}

input {
    max-width: 239px;
}

.hidden-doors-checkbox {
    border-color: rgb(154, 202, 60);
}

.hidden-doors-checkbox:checked {
    color: rgb(154, 202, 60);
}

.error-message {
    color: #ff3b30;
    font-size: 12px;
    margin-top: 4px;
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
}

.form-group {
    position: relative;
    margin-bottom: 25px;
}

.form-control.error {
    border: 1px solid #ff3b30;
}

.checkbox-error {
    color: #ff3b30;
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 15px;
    display: none;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.success-notice {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #4cd964;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.error-notice {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff3b30;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@font-face {
    font-family: "Exo2";
    src: url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap");
}


.warehouse-doors-section-mobile {
    display: none;
}

.swiper-button-next::after, .swiper-container-rtl .swiper-button-prev::after {
    display: none;
}

.swiper-button-next::after, .swiper-button-prev::after {
    display: none;
}

.mobile-slider-container-2 {
    display: none;
}

.section-title-not-hidden {
    display: none;
}

/* Адаптивные стили для мобильных устройств */
@media screen and (max-width: 430px) {
    /* Основной контейнер */
    .container-width {
        max-width: 375px;
        padding: 0 15px;
        margin: 320px auto 0 auto;
        box-sizing: border-box;
        position: relative;
    }

    /* СЕКЦИЯ 1 - Герой секция */
    .hero-section::before {
        background-image: url("../img/mobile-sec-1.png") !important;
        top: 50px;
        left: 105px;
        right: 0;
        min-width: auto;
        min-height: auto;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 171px;
    }

    .hero-title {
        font-size: 36px;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        display: none;
    }

    /* Стили для текста бонуса - используем оригинальный селектор */
    .hero-bonus-text {
        font-size: 14px !important; /* Принудительно устанавливаем размер */
        color: rgb(143, 150, 176);
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 13px;
        max-width: 102px;
    }

    /* Стили для кнопки - используем оригинальный селектор */
    .hero-bonus-btn {
        font-size: 14px !important; /* Принудительно устанавливаем размер */
        width: 89px !important;
        height: 24px !important;
        color: white;
        background: rgb(154, 202, 60);
        border-radius: 5px;
        box-shadow: 0 5px 8px 0 rgba(154, 202, 60, 0.64);
        align-items: center;
    }

    /* Иконки в герой секции */
    .hero-features {
        margin-top: 40px;
        /*flex-wrap: wrap;*/
        justify-content: space-between;
        gap: 15px;
    }

    .feature {
        width: calc(50% - 10px);
        height: auto;
        padding: 10px 0;
    }

    .feature-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .feature-text {
        font-size: 10px !important;
        color: rgba(143, 150, 176, 1);
        /*text-align: center;*/
    }

    /* СЕКЦИЯ 2 - Варианты дверей */
    .section-title {
        font-size: 18px;
        margin-bottom: 30px;
        text-align: left;
        align-items: flex-start;
    }

    /* Скрываем оригинальную секцию на мобильных */
    .warehouse-doors-section {
        display: none;
    }

    .warehouse-doors-section-mobile {
        display: block;
        margin-top: 34px;
    }

    /* Показываем мобильный слайдер */
    .mobile-doors-slider-section {
        display: block;
    }

    /* Уменьшаем размер стрелок на мобильных */
    .swiper-button-prev:after, .swiper-button-next:after {
        font-size: 20px;
    }

    .door-options {
        justify-content: center;
        gap: 15px;
    }

    .door-card {
        width: 100%;
        margin-bottom: 15px;
    }

    .door-card-title {
        font-size: 18px;
        margin-top: 10px;
    }

    .door-card-subtitle {
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .door-card-image {
        max-width: 100%;
        height: auto;
    }

    .door-card-details-container {
        margin: 15px auto;
    }

    .door-card-details {
        font-size: 16px;
        padding: 0 15px;
        margin-bottom: 10px;
    }

    .show-models {
        margin-top: 20px;
    }

    .show-models-btn {
        font-size: 14px;
    }

    .hero-bonus-btn-1 {
        width: 100%;
        height: 50px;
        font-size: 14px;
    }


    /* секция 2 мобилка слайдер */
    .mobile-slider-container {
        width: 251px;
        margin: 0 auto;
        position: relative;
    }

    .slider-title {
        font-size: 18px;
        color: rgb(143, 150, 176);
        text-align: left;
        margin-bottom: 20px;
        font-weight: 600;
    }

    .slider-wrapper {
        position: relative;
        width: 251px;
        height: 475px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .slider-slide {
        width: 251px;
        height: 475px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
        display: flex;
        flex-direction: column;
        background: white;
        border-radius: 10px;
        overflow: hidden;
    }

    .slider-slide.active {
        border-radius: 0;
        opacity: 1;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .door-title {
        text-align: center;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 600;
        padding: 16px 0 5px;
    }

    .door-subtitle {
        text-align: center;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 400;
        padding-bottom: 15px;
    }

    .door-image {
        width: 100%;
        height: 280px;
        object-fit: cover;
    }

    .door-details {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 15px;
        color: rgb(154, 202, 60);
    }

    .door-price-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .slider-controls {
        display: none;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
    }


    .slider-dot {
        width: 5px;
        height: 5px;
        background-color: #ccc;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
    }

    .slider-dot.active {
        background-color: rgb(154, 202, 60);
    }

    .slider-arrow {
        position: absolute;
        top: 26%;
        /*transform: translateY(-50%);*/
        width: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 20;
    }

    .slider-arrow-left {
        left: 0;
    }

    .slider-arrow-right {
        right: 0;
    }

    .slider-arrow svg {
        width: 20px;
        height: 20px;
    }

    .mobile-btn-2 {
        width: 287px !important;
        height: 50px !important;
    }

    /* СЕКЦИЯ 3 - Алюминиевая кромка   */
    /* ОБЯЗАТЕЛЬНО ПЕРЕПИСАТЬ ЭТУ ХУЙНЮ */
    .aluminum-edge-section {
        flex-direction: column;
        margin: 40px 0;
        gap: 20px;
        position: relative;
    }

    /*.aluminum-edge-section::before {*/
    /*    content: 'Алюминиевая кромка';*/
    /*    display: block;*/
    /*    font-size: 16px;*/
    /*    color: rgb(143, 150, 176);*/
    /*    margin-bottom: 10px;*/
    /*    text-align: left;*/
    /*}*/
    /* Стиль для заголовка */
    .section-title-2 {
        display: none;
        font-size: 18px;
        color: rgb(143, 150, 176);
        order: 0; /* Заголовок над всем */
        text-align: left;
        margin-bottom: 20px;
    }

    .section-title-2-mobile {
        text-align: left;
        align-items: start;
        justify-content: start;
        font-weight: bold !important;
        color: rgb(143, 150, 176);
        display: flex;
        flex-direction: column;
        font-size: 18px;
    }

    /* Контейнер с текстом */
    .edge-description {
        width: 100%;
        order: 1; /* После изображения */
        position: relative;
    }

    /* Контейнер с изображением */
    .edge-image {
        width: 100%;
        order: 0; /* После заголовка, до текста */
        position: relative;
    }

    /* Скрываем надпись слева от изображения */
    .aluminum-edge-section > h2.section-title-2 {
        display: none;
    }

    .main-edge-image {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

    /* Стили для состояния по умолчанию (свернутое) */
    .edge-text, .edge-features {
        display: none;
    }

    /* Добавляем текст "Алюминиевая кромка представляет собой..." */
    .edge-description::before {
        content: "Алюминиевая кромка представляет собой металлическую ленту, которую крепят по периметру дверного полотна.";
        display: inline-block; /* Изменил на inline-block */
        font-size: 14px;
        line-height: 1.4;
        color: black;
        margin-bottom: 0;
        width: 100%; /* Добавил полную ширину */
        text-indent: 30px;
    }

    .edge-description::after {
        content: " Подробнее...";
        display: inline-block; /* Изменил на inline-block */
        color: rgb(154, 202, 60);
        font-size: 14px;
        cursor: pointer;
        margin-top: -18px;
        margin-right: 30px;
        width: auto; /* Автоматическая ширина */
        text-align: right; /* Выравнивание вправо */
    }

    /* Стили для развернутого состояния */
    .edge-description.expanded::before,
    .edge-description.expanded::after {
        display: none; /* Убираем текст-заменитель и кнопку "Подробнее" */
    }

    /* Показываем оригинальные элементы в развернутом состоянии */
    .edge-description.expanded .edge-text,
    .edge-description.expanded .edge-features {
        display: block;
    }

    /* Стили для текста в развернутом состоянии */
    .edge-description.expanded .edge-text {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    /* Стили для пунктов в развернутом состоянии */
    .edge-description.expanded .feature-description {
        font-size: 14px;
        margin-bottom: 10px;
        position: relative;
        padding-left: 15px;
        width: auto;
    }

    .edge-description.expanded .feature-description::before {
        min-width: 8px;
        height: 8px;
        margin-right: 10px;
    }

    /* Добавляем кнопку "свернуть" в развернутом состоянии */
    .edge-description.expanded::after {
        content: "свернуть";
        display: block;
        color: rgb(154, 202, 60);
        font-size: 14px;
        cursor: pointer;
        margin-top: 10px;
    }

    /* СЕКЦИЯ 4 - Виды отделки */
    .door-finishing-section {
        margin: 40px 0;
    }

    .slide-number {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 12px;
        z-index: 10;
    }

    .mobile-slider-container-2 {
        display: block;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .slider-wrapper-2 {
        display: flex;
        position: relative;
        width: 100%;
        transition: transform 0.3s ease;
    }

    .slider-slide-2 {
        min-width: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease;
    }

    .slider-slide-2.active {
        opacity: 1;
        position: relative;
    }

    .slider-controls-2 {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .slider-dot {
        width: 5px;
        height: 5px;
        background-color: #ccc;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
    }

    .slider-dot.active {
        background-color: rgb(154, 202, 60);
    }

    .finishing-image img {
        width: 100%;
        height: auto;
    }

    .finishing-name {
        text-align: center;
        margin-top: 10px;
        font-size: 16px;
    }


    .section-title-not-hidden {
        display: block;
    }

    .finishing-options {
        display: none;
        flex-direction: column;
        gap: 20px;
    }

    .finishing-option {
        width: 100%;
    }

    .finishing-image {
        max-width: 100%;
        margin: 0 auto;
    }

    .finishing-name {
        font-size: 16px;
        text-align: center;
        margin-top: 10px;
    }

    /* СЕКЦИЯ 5 - Комплектация с табами */
    .door-components-section {
        margin-top: 40px;
    }

    .components-slider-container {

        margin: 0 auto;
        position: relative;
    }

    .section-title-3 {
        display: block;
    }

    .components-tabs {
        display: none;
        width: 100%;
    }

    .door-components-section-mobile {
        display: block;
        margin-top: 40px;
    }

    .component-slide-content {
        background: rgba(233, 234, 239, 1);
        border-radius: 10px;
        padding: 11px 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        width: 335px;
        height: 224px;
        position: relative;
    }

    .component-slide-content h3 {
        font-size: 14px;
        margin-bottom: 18px;
        font-weight: 600 !important;
    }

    .component-slide-content ul {
        list-style-type: disc;
        padding-left: 20px;
        margin-bottom: 15px;
    }

    .component-slide-content ul li {
        font-size: 12px;
        font-weight: 400 !important;
        margin-bottom: 10px;
        line-height: 1.2;
        white-space: pre-line;
    }

    .component-slide-image {
        position: absolute; /* Абсолютное позиционирование */
        bottom: 20px; /* Прикрепляем к нижнему краю */
        right: 20px; /* Прикрепляем к правому краю */
        width: 105px; /* Устанавливаем ширину изображения */
        height: auto;
    }

    .component-slide-image img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .my-request {
        flex-direction: column;
        margin-top: 30px;
        margin-bottom: 40px;
        text-align: left;
        gap: 15px;
    }

    .my-request-text {
        font-size: 14px;
    }

    .btn-last {
        max-width: 100%;
    }

    .my-request-btn {
        width: 334px;
        height: 44px;
        font-size: 14px;
    }

    /* Попапы и формы */
    #popup-overlay1, #popup-overlay2, #popup-overlay3 {
        left: calc(50% - 160px);
        /*width: 100%;*/
        /*height: 100%;*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #popup1 {
        /*width: 90%;*/
        max-width: 320px;
        padding: 15px;
    }

    .popup-title {
        font-size: 16px;
        margin-bottom: 34px;
    }

    .form-group {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        margin-bottom: 20px;
        font-size: 12px;
    }

    .form-control {
        padding: 8px;
        font-size: 14px;
        width: unset;
    }

    input {
        max-width: 100%;
    }

    .submit-button {
        padding: 12px;
        font-size: 14px;
    }

    .policy-text {
        font-size: 12px;
        margin-left: 30px;
    }

    .checkbox-container {
        /*flex-wrap: nowrap;*/
    }

    .checkbox-error {
        font-size: 10px;
    }

    .error-message {
        font-size: 10px;
    }

    .petlya-img {
        right: 15px;
        bottom: 10px;
    }

    .zamok {
        right: 0;
        bottom: 0;
    }
}

/* Адаптив для планшетов и малых десктопов (431px - 1200px) */
@media screen and (min-width: 431px) and (max-width: 1200px) {
    /* Основной контейнер */
    .container-width {
        max-width: 100%;
        padding: 0 30px;
        margin: 220px auto 0 auto;
    }

    /* СЕКЦИЯ 1 - Герой секция */
    .hero-section::before {
        background-size: 80%;
        top: -80px;
        right: -50px;
    }

    .hero-text {
        margin-left: -250px;
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-subtitle {
        font-size: 20px;
        text-indent: -20px;
        margin-left: 20px;
    }

    .hero-bonus {
        margin-top: 80px;
    }

    .hero-bonus-text {
        font-size: 18px;
    }

    .hero-bonus-btn {
        font-size: 18px;
        width: 240px;
        height: 45px;
    }

    .hero-bonus-btn-1 {
        width: 450px;
        height: 55px;
    }

    .hero-image {
        right: 100px;
        top: 150px;
        max-width: 40%;
    }

    .hero-features {
        margin-top: 120px;
    }

    .feature-icon {
        width: 50px;
        height: 50px;
    }

    .feature-text {
        font-size: 16px;
    }

    /* СЕКЦИЯ 2 - Варианты дверей */
    .warehouse-doors-section {
        margin: 60px auto;
    }

    .section-title {
        font-size: 42px;
        margin-bottom: 50px;
    }

    .section-title-2 {
        font-size: 42px;
    }

    .door-card {
        width: calc((100% - 30px) / 2); /* 2 карточки в ряд с интервалом */
    }

    .door-card-title {
        font-size: 20px;
    }

    .door-card-subtitle {
        font-size: 18px;
    }

    .door-card-details {
        font-size: 20px;
        padding: 0 20px;
    }

    .button-zamer {
        margin-top: 30px;
    }

    /* СЕКЦИЯ 3 - Алюминиевая кромка */
    .aluminum-edge-section {
        margin: 50px 0 100px 0;
    }

    .edge-text {
        font-size: 20px;
    }

    .feature-description {
        font-size: 20px;
        width: 100%;
    }

    .feature-description::before {
        margin-right: 15px;
    }

    .main-edge-image {
        max-width: 100%;
        max-height: 450px;
    }

    .zoom-image {
        width: 80px;
        height: 80px;
    }

    /* СЕКЦИЯ 4 - Виды отделки */
    .finishing-options {
        flex-wrap: wrap;
        gap: 20px; /* Добавляем отступ между элементами */
    }

    .finishing-option {
        width: calc(50% - 20px); /* Ширина с учетом отступа */
        margin-bottom: 30px;
    }

    .finishing-name {
        font-size: 20px;
    }

    /* Дополнительное правило для экранов меньше 600px */
    @media screen and (min-width: 431px) and (max-width: 857px) {
        .finishing-options {
            flex-direction: column;
            gap: 30px;
        }

        .finishing-option {
            width: 100%;
            margin-bottom: 0;
        }

        .finishing-image {
            max-width: 100%;
            height: auto;
            margin: 0 auto;
        }

        .finishing-name {
            text-align: center;
        }
    }

    /* СЕКЦИЯ 5 - Комплектация с табами */
    .door-components-section {
        margin-top: 70px;
    }

    .tab-buttons {
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 50px;
    }

    .tab-button {
        width: 48%;
        min-height: 70px;
    }

    .tab-number {
        width: 35px;
        height: 35px;
    }

    .tab-name {
        font-size: 20px;
    }

    .tab-content-container {
        padding: 25px 40px;
        height: auto;
        min-height: 400px;
    }

    .component-title {
        font-size: 38px;
        width: 100%;
    }

    .component-features li {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .component-image img {
        max-height: 300px;
    }

    .my-request {
        margin-top: 50px;
        margin-bottom: 150px;
    }

    .my-request-text {
        font-size: 20px;
    }

    .my-request-btn {
        font-size: 18px;
    }

    /* Попапы */
    #popup, #popup1 {
        width: 400px;
    }

    /* Для устройств ближе к 431px */
    @media screen and (min-width: 431px) and (max-width: 768px) {
        .hero-text {
            margin-left: -150px;
        }

        .hero-title {
            font-size: 36px;
        }

        .hero-subtitle {
            font-size: 18px;
        }

        .hero-section::before {
            top: 20px;
            right: -115px;
        }

        .hero-features {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .door-card {
            width: 80%;
        }

        .door-options {
            justify-content: center;
        }

        .feature {
            width: 48%; /* По 2 элемента в ряду с небольшим отступом */
            margin-bottom: 20px;
        }


        .component-info {
            max-width: 100%;
        }

        .component-image {
            display: none; /* Скрываем изображение на самых маленьких из этого диапазона */
        }

        .feature-description {
            font-size: 18px;
        }

        .aluminum-edge-section {
            flex-direction: column;
        }

        .edge-description, .edge-image {
            width: 100%;
        }

        .edge-image {
            order: -1; /* Изображение сверху на малых планшетах */
            margin-bottom: 20px;
        }
    }

    /* Для устройств ближе к 1200px */
    @media screen and (min-width: 769px) and (max-width: 1200px) {
        .component-info {
            max-width: 60%;
        }

        .door-card {
            width: calc((100% - 30px) / 2); /* 2 карточки в ряд */
        }

        .aluminum-edge-section {
            flex-direction: row;
        }

        .edge-description, .edge-image {
            width: 48%;
        }

        .finishing-option {
            align-content: center;
            align-items: center;
        }
    }
}