/* ==========================================================
   ALANYA INVEST — SLIDER FINAL
   Desktop / tablet / mobile
   PHP + JS НЕ ТРОГАЕМ
   ========================================================== */

/* Страница должна иметь только основной вертикальный scroll.
   Горизонтальный overflow от старой верстки запрещён. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Сам hero никогда не становится отдельным scroll-контейнером. */
.top_sec_modern,
.top_sec_modern .fade_img,
.top_sec_modern .fade_img .hold,
.top_sec_modern .fade_img .hold ul {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* ==========================================================
   ALANYA INVEST — NEW HERO / SLIDER
   DESKTOP ONLY
   Планшет и мобильная версия здесь НЕ ТРОГАЮТСЯ.
   ========================================================== */

@media screen and (min-width: 801px) {

    /* ----------------------------------------------------------
       1. HERO / SLIDER — базовая геометрия
       ---------------------------------------------------------- */

    .top_sec_modern {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 470px !important;
        min-height: 470px !important;
        max-height: 470px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .top_sec_modern .fade_img {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 470px !important;
        min-height: 470px !important;
        max-height: 470px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /*
     * ВАЖНО:
     * Старый JS слайдера работает с абсолютными li.
     * Без этих правил первый слайд может быть виден,
     * а остальные превращаются в пустое место.
     */
    .top_sec_modern .fade_img .hold {
        position: relative !important;
        width: 100% !important;
        height: 470px !important;
        min-height: 470px !important;
        max-height: 470px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .top_sec_modern .fade_img .hold ul {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 470px !important;
        min-height: 470px !important;
        max-height: 470px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    .top_sec_modern .fade_img .hold ul li {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 470px !important;
        min-height: 470px !important;
        max-height: 470px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 1;

        overflow: hidden !important;
        box-sizing: border-box !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /*
     * Именно active должен лежать поверх остальных.
     * Это часть исходной логики старого fade-слайдера.
     */
    .top_sec_modern .fade_img .hold ul li.active {
        z-index: 2 !important;
    }


    /* ----------------------------------------------------------
       2. НЕ ПОЗВОЛЯЕМ СЛАЙДЕРУ СОЗДАВАТЬ ВТОРОЙ СКРОЛЛ
       ---------------------------------------------------------- */

    .top_sec_modern,
    .top_sec_modern .fade_img,
    .top_sec_modern .fade_img .hold,
    .top_sec_modern .fade_img .hold ul,
    .top_sec_modern .fade_img .hold ul li {
        overflow: hidden !important;
    }


    /* ----------------------------------------------------------
       3. ФОТО + ГРАДИЕНТ
       ---------------------------------------------------------- */

    .top_sec_modern .fade_img .hold ul li:after {
        content: "" !important;

        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        pointer-events: none !important;

        background: linear-gradient(
            90deg,
            rgba(6,18,29,.82) 0%,
            rgba(6,18,29,.68) 28%,
            rgba(6,18,29,.20) 55%,
            rgba(6,18,29,.03) 78%,
            rgba(6,18,29,0) 100%
        ) !important;

        z-index: 5 !important;
    }


    /* ----------------------------------------------------------
       4. ШРИФТ СЛАЙДЕРА
       ---------------------------------------------------------- */

    /*
     * Шапка уже подключает Manrope через Google Fonts.
     * Принудительно задаём Manrope всему hero,
     * чтобы старый Open Sans / браузерный serif не вылезал.
     */

    .top_sec_modern,
    .top_sec_modern *,
    .top_sec_modern a,
    .top_sec_modern span,
    .top_sec_modern div,
    .top_sec_modern p,
    .top_sec_modern h1,
    .top_sec_modern h2,
    .top_sec_modern h3 {
        font-family: "Manrope", Arial, sans-serif !important;
    }


    /* ----------------------------------------------------------
       5. ТЕКСТОВЫЙ КОНТЕЙНЕР
       ---------------------------------------------------------- */

    .top_sec_modern .top_sec_txt_wrap {
        position: relative !important;
        z-index: 11 !important;

        width: 100% !important;
        max-width: 1140px !important;

        height: auto !important;

        margin: 0 auto !important;
        padding: 48px 0 30px !important;

        box-sizing: border-box !important;

        text-align: left !important;
    }


    /* ----------------------------------------------------------
       6. EYEBROW
       ---------------------------------------------------------- */

    .top_sec_modern .slider_eyebrow {
        display: flex !important;
        align-items: center !important;

        gap: 13px !important;

        width: auto !important;

        margin: 0 0 16px !important;
        padding: 0 !important;

        color: #fff !important;

        font-family: "Manrope", Arial, sans-serif !important;
        font-size: 15px !important;
        line-height: 20px !important;
        font-weight: 500 !important;
        letter-spacing: .2px !important;
    }

    .top_sec_modern .slider_eyebrow span {
        display: block !important;

        width: 66px !important;
        min-width: 66px !important;
        height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #f47f45 !important;

        flex: 0 0 66px !important;
    }


    /* ----------------------------------------------------------
       7. ЗАГОЛОВОК
       ---------------------------------------------------------- */

    .top_sec_modern .top_sec_head {
        width: 650px !important;
        max-width: 650px !important;

        margin: 0 0 16px !important;
        padding: 0 !important;

        font-size: 0 !important;
        line-height: 1.1 !important;

        box-sizing: border-box !important;
    }

    .top_sec_modern .slider_title {
        display: block !important;

        width: 100% !important;

        margin: 0 0 16px !important;
        padding: 0 !important;

        color: #fff !important;

        font-family: "Manrope", Arial, sans-serif !important;
        font-size: 48px !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;

        letter-spacing: -.6px !important;

        text-shadow: 0 2px 4px rgba(0,0,0,.25) !important;
    }


    /* ----------------------------------------------------------
       8. ЦЕНА
       ---------------------------------------------------------- */

    .top_sec_modern .top_sec_head .top_sec_bdTxt {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;

        height: 54px !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 0 17px !important;

        box-sizing: border-box !important;

        border: 2px solid #f47f45 !important;
        border-radius: 0 !important;

        background: rgba(10,24,35,.28) !important;

        color: #fff !important;

        font-family: "Manrope", Arial, sans-serif !important;
        font-size: 28px !important;
        line-height: 50px !important;
        font-weight: 700 !important;
    }

    .top_sec_modern .top_sec_head .top_sec_bdTxt:after {
        display: none !important;
        content: none !important;
    }


    /* ----------------------------------------------------------
       9. ПРЕИМУЩЕСТВА
       ---------------------------------------------------------- */

    .top_sec_modern .slider_benefits {
        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        align-items: stretch !important;

        width: 820px !important;
        max-width: 820px !important;

        margin: 0 0 20px !important;
        padding: 8px 14px !important;

        box-sizing: border-box !important;

        background: rgba(7,20,30,.48) !important;
    }

    .top_sec_modern .slider_benefit {
        display: flex !important;
        align-items: center !important;

        min-width: 0 !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 0 16px !important;

        box-sizing: border-box !important;

        border-right: 1px solid #f47f45 !important;

        color: #fff !important;

        font-family: "Manrope", Arial, sans-serif !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    .top_sec_modern .slider_benefit:last-child {
        border-right: 0 !important;
    }

    .top_sec_modern .slider_benefit > span:last-child {
        min-width: 0 !important;
    }


    /* ----------------------------------------------------------
       10. МАРКЕРЫ ПРЕИМУЩЕСТВ
       Маленький оранжевый квадрат вместо галочки.
       Разделитель между преимуществами — тонкая оранжевая линия.
       ---------------------------------------------------------- */

    .top_sec_modern .slider_benefit {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 48px;

        padding: 0 16px;
        margin: 0;

        box-sizing: border-box;

        /* Тонкий оранжевый разделитель */
        border-right: 1px solid #f47f45;

        color: #fff;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 500;
    }

    .top_sec_modern .slider_benefit:last-child {
        border-right: 0;
    }

    /* Никакой дополнительной линии перед названием */
    .top_sec_modern .slider_benefit:before {
        display: none !important;
        content: none !important;
    }

    /* Маленький оранжевый квадрат вместо круга с галочкой */
    .top_sec_modern .slider_benefit_icon {
        width: 6px !important;
        min-width: 6px !important;

        height: 6px !important;
        min-height: 6px !important;

        margin: 0 9px 0 0 !important;
        padding: 0 !important;

        flex: 0 0 6px !important;

        box-sizing: border-box !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: #f47f45 !important;

        opacity: 1 !important;
    }

    /* Убираем старую галочку */
    .top_sec_modern .slider_benefit_icon:after {
        display: none !important;
        content: none !important;
    }

    /* ----------------------------------------------------------
       11. CTA
       ---------------------------------------------------------- */

    .top_sec_modern .slider_button_wrap {
        margin: 0 !important;
        padding: 0 !important;
    }

    .top_sec_modern .top_sec_txt_wrap .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 22px !important;

        width: auto !important;
        min-width: 240px !important;

        height: 54px !important;

        margin: 0 !important;
        padding: 0 28px !important;

        box-sizing: border-box !important;

        border: 0 !important;
        border-radius: 30px !important;

        background: #fdca31 !important;

        color: #111 !important;

        font-family: "Manrope", Arial, sans-serif !important;
        font-size: 17px !important;
        line-height: 54px !important;
        font-weight: 700 !important;

        text-decoration: none !important;

        transition: transform .18s ease, box-shadow .18s ease !important;
    }

    .top_sec_modern .top_sec_txt_wrap .btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 5px 16px rgba(0,0,0,.22) !important;
    }

    .top_sec_modern .slider_arrow {
        font-family: Arial, sans-serif !important;
        font-size: 25px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
        margin-top: -1px !important;
    }


    /* ----------------------------------------------------------
       12. СТРЕЛКИ
       ---------------------------------------------------------- */

    .top_sec_modern .fade_img .prev,
    .top_sec_modern .fade_img .next {
        position: absolute !important;

        top: 50% !important;
        bottom: auto !important;

        width: 70px !important;
        min-width: 70px !important;

        height: 70px !important;
        min-height: 70px !important;

        margin-top: -35px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        border: 0 !important;
        border-radius: 50% !important;

        background: #f47f45 !important;

        box-shadow: 0 4px 16px rgba(0,0,0,.22) !important;

        opacity: 1 !important;

        z-index: 30 !important;

        cursor: pointer !important;

        transition: transform .18s ease, box-shadow .18s ease !important;
    }

    .top_sec_modern .fade_img .prev {
        left: 26px !important;
        right: auto !important;
    }

    .top_sec_modern .fade_img .next {
        right: 26px !important;
        left: auto !important;
    }

    .top_sec_modern .fade_img .prev:before,
    .top_sec_modern .fade_img .next:before {
        content: "" !important;

        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        width: 16px !important;
        height: 16px !important;

        margin-top: -8px !important;

        box-sizing: border-box !important;

        border-top: 3px solid #fff !important;
        border-right: 3px solid #fff !important;
    }

    .top_sec_modern .fade_img .prev:before {
        margin-left: -5px !important;
        transform: rotate(-135deg) !important;
    }

    .top_sec_modern .fade_img .next:before {
        margin-left: -11px !important;
        transform: rotate(45deg) !important;
    }

    .top_sec_modern .fade_img .prev:hover,
    .top_sec_modern .fade_img .next:hover {
        transform: scale(1.08) !important;
        box-shadow: 0 7px 22px rgba(0,0,0,.28) !important;
    }

    .top_sec_modern .fade_img .prev:active,
    .top_sec_modern .fade_img .next:active {
        transform: scale(1.14) !important;
    }


    /* ----------------------------------------------------------
       13. ТОЧКИ
       ---------------------------------------------------------- */

    .top_sec_modern .fade_img .pagination,
    .top_sec_modern .fade_img .dots,
    .top_sec_modern .fade_img .slick-dots {
        display: none !important;
    }


    /* ----------------------------------------------------------
       14. ПК 801–1200
       ---------------------------------------------------------- */

    @media screen and (min-width: 801px) and (max-width: 1200px) {

        .top_sec_modern .top_sec_txt_wrap {
            padding-left: 35px !important;
            padding-right: 35px !important;
        }

        .top_sec_modern .top_sec_head {
            width: 600px !important;
            max-width: 600px !important;
        }

        .top_sec_modern .slider_title {
            font-size: 42px !important;
        }

        .top_sec_modern .slider_benefits {
            width: 760px !important;
            max-width: 760px !important;
        }
    }
}


/* ==========================================================
   ALANYA INVEST — TABLET + MOBILE
   Desktop (801px+) выше не изменяется.
   ========================================================== */


/* ==========================================================
   TABLET — 601–800px
   ========================================================== */

@media screen and (min-width: 601px) and (max-width: 800px) {

    .top_sec_modern {
        position: relative !important;
        width: 100% !important;
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
        overflow: hidden !important;
    }

    .top_sec_modern .fade_img,
    .top_sec_modern .fade_img .hold,
    .top_sec_modern .fade_img .hold ul {
        width: 100% !important;
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
        overflow: hidden !important;
    }

    .top_sec_modern .fade_img .hold ul li {
        width: 100% !important;
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    .top_sec_modern .fade_img .hold ul li:after {
        background: linear-gradient(
            90deg,
            rgba(6,18,29,.82) 0%,
            rgba(6,18,29,.65) 34%,
            rgba(6,18,29,.25) 64%,
            rgba(6,18,29,.03) 100%
        ) !important;
    }

    .top_sec_modern .top_sec_txt_wrap {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 48px 55px 25px !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 11 !important;
        text-align: left !important;
    }

    .top_sec_modern .slider_eyebrow {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 0 13px !important;
        font-size: 13px !important;
        line-height: 18px !important;
        font-weight: 500 !important;
    }

    .top_sec_modern .slider_eyebrow span {
        width: 48px !important;
        min-width: 48px !important;
        height: 2px !important;
        flex: 0 0 48px !important;
    }

    .top_sec_modern .top_sec_head {
        width: 560px !important;
        max-width: calc(100vw - 160px) !important;
        margin: 0 0 14px !important;
    }

    .top_sec_modern .slider_title {
        font-size: 39px !important;
        line-height: 1.07 !important;
        letter-spacing: -.45px !important;
        margin: 0 0 13px !important;
    }

    .top_sec_modern .top_sec_head .top_sec_bdTxt {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 14px !important;
        font-size: 24px !important;
        line-height: 44px !important;
    }

    .top_sec_modern .slider_benefits {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: min(700px, calc(100vw - 160px)) !important;
        max-width: calc(100vw - 160px) !important;
        margin: 0 0 17px !important;
        padding: 6px 10px !important;
    }

    .top_sec_modern .slider_benefit {
        min-width: 0 !important;
        min-height: 43px !important;
        padding: 0 11px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        border-right: 1px solid #f47f45 !important;
    }

    .top_sec_modern .slider_benefit:last-child {
        border-right: 0 !important;
    }

    .top_sec_modern .slider_benefit_icon {
        width: 6px !important;
        min-width: 6px !important;
        height: 6px !important;
        min-height: 6px !important;
        margin-right: 7px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f47f45 !important;
        flex: 0 0 6px !important;
    }

    .top_sec_modern .slider_benefit_icon:after {
        display: none !important;
        content: none !important;
    }

    .top_sec_modern .slider_button_wrap {
        margin-top: 0 !important;
    }

    .top_sec_modern .top_sec_txt_wrap .btn {
        min-width: 215px !important;
        height: 50px !important;
        padding: 0 23px !important;
        font-size: 16px !important;
        line-height: 50px !important;
        gap: 18px !important;
    }

    .top_sec_modern .slider_arrow {
        font-size: 22px !important;
    }

    .top_sec_modern .fade_img .prev,
    .top_sec_modern .fade_img .next {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        margin-top: -27px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 14px rgba(0,0,0,.20) !important;
    }

    .top_sec_modern .fade_img .prev {
        left: 16px !important;
    }

    .top_sec_modern .fade_img .next {
        right: 16px !important;
    }

    .top_sec_modern .fade_img .prev:before,
    .top_sec_modern .fade_img .next:before {
        width: 13px !important;
        height: 13px !important;
        margin-top: -6px !important;
        border-top-width: 2px !important;
        border-right-width: 2px !important;
    }

    .top_sec_modern .fade_img .prev:before {
        margin-left: -4px !important;
    }

    .top_sec_modern .fade_img .next:before {
        margin-left: -9px !important;
    }
}


/* ==========================================================
   MOBILE — до 600px
   ========================================================== */

@media screen and (max-width: 600px) {

    .top_sec_modern {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .top_sec_modern .fade_img,
    .top_sec_modern .fade_img .hold,
    .top_sec_modern .fade_img .hold ul {
        width: 100% !important;
        height: clamp(410px, 112vw, 560px) !important;
        min-height: 410px !important;
        max-height: 560px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .top_sec_modern .fade_img .hold ul li {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    .top_sec_modern .fade_img .hold ul li:after {
        background: linear-gradient(
            180deg,
            rgba(6,18,29,.18) 0%,
            rgba(6,18,29,.28) 30%,
            rgba(6,18,29,.72) 68%,
            rgba(6,18,29,.90) 100%
        ) !important;
    }

    .top_sec_modern .top_sec_txt_wrap {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 205px 24px 24px !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 11 !important;
        text-align: center !important;
    }

    .top_sec_modern .slider_eyebrow {
        display: none !important;
    }

    .top_sec_modern .top_sec_head {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto 10px !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    .top_sec_modern .slider_title {
        display: block !important;
        width: 100% !important;
        max-width: 390px !important;
        margin: 0 auto 10px !important;
        color: #fff !important;
        font-size: clamp(27px, 7.5vw, 34px) !important;
        line-height: 1.04 !important;
        font-weight: 700 !important;
        letter-spacing: -.35px !important;
        text-align: center !important;
        text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
    }

    .top_sec_modern .top_sec_head .top_sec_bdTxt {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 11px !important;
        margin: 0 auto 11px !important;
        border: 2px solid #f47f45 !important;
        border-radius: 0 !important;
        background: rgba(10,24,35,.30) !important;
        color: #fff !important;
        font-size: 18px !important;
        line-height: 36px !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    .top_sec_modern .top_sec_head .top_sec_bdTxt:after {
        display: none !important;
        content: none !important;
    }

    .top_sec_modern .slider_benefits {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 auto 12px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .top_sec_modern .slider_benefit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        border: 0 !important;
        color: #fff !important;
        font-size: 13px !important;
        line-height: 18px !important;
        font-weight: 500 !important;
        text-align: left !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.7) !important;
    }

    .top_sec_modern .slider_benefit:last-child {
        margin-bottom: 0 !important;
    }

    /* Квадрат вместо круга/галочки */
    .top_sec_modern .slider_benefit_icon {
        display: block !important;
        width: 6px !important;
        min-width: 6px !important;
        height: 6px !important;
        min-height: 6px !important;
        margin: 0 8px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f47f45 !important;
        box-sizing: border-box !important;
        flex: 0 0 6px !important;
        opacity: 1 !important;
    }

    .top_sec_modern .slider_benefit_icon:after {
        display: none !important;
        content: none !important;
    }

    .top_sec_modern .slider_button_wrap {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .top_sec_modern .top_sec_txt_wrap .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 11px !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 auto !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 24px !important;
        background: #fdca31 !important;
        color: #111 !important;
        font-size: 14px !important;
        line-height: 44px !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }

    .top_sec_modern .slider_arrow {
        font-size: 18px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .top_sec_modern .fade_img .prev,
    .top_sec_modern .fade_img .next {
        position: absolute !important;
        top: 42% !important;
        bottom: auto !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: -17px 0 0 !important;
        padding: 0 !important;
        background: #f47f45 !important;
        border: 0 !important;
        border-radius: 50% !important;
        box-shadow: 0 3px 10px rgba(0,0,0,.18) !important;
        opacity: 1 !important;
        z-index: 30 !important;
    }

    .top_sec_modern .fade_img .prev {
        left: 10px !important;
        right: auto !important;
    }

    .top_sec_modern .fade_img .next {
        right: 10px !important;
        left: auto !important;
    }

    .top_sec_modern .fade_img .prev:before,
    .top_sec_modern .fade_img .next:before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 9px !important;
        height: 9px !important;
        margin-top: -4px !important;
        box-sizing: border-box !important;
        border-top: 2px solid #fff !important;
        border-right: 2px solid #fff !important;
    }

    .top_sec_modern .fade_img .prev:before {
        margin-left: -3px !important;
        transform: rotate(-135deg) !important;
    }

    .top_sec_modern .fade_img .next:before {
        margin-left: -6px !important;
        transform: rotate(45deg) !important;
    }

    .top_sec_modern .fade_img .pagination,
    .top_sec_modern .fade_img .dots,
    .top_sec_modern .fade_img .slick-dots {
        display: none !important;
    }
}


/* ==========================================================
   SMALL MOBILE — до 380px
   ========================================================== */

@media screen and (max-width: 380px) {

    .top_sec_modern .fade_img,
    .top_sec_modern .fade_img .hold,
    .top_sec_modern .fade_img .hold ul {
        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
    }

    .top_sec_modern .top_sec_txt_wrap {
        padding-left: 18px !important;
        padding-right: 18px !important;
        padding-top: 190px !important;
        padding-bottom: 20px !important;
    }

    .top_sec_modern .slider_title {
        max-width: 300px !important;
        font-size: 27px !important;
    }

    .top_sec_modern .top_sec_head .top_sec_bdTxt {
        font-size: 17px !important;
    }

    .top_sec_modern .slider_benefit {
        font-size: 12px !important;
    }
}


/* ==========================================================
   FINAL SLIDE LAYER FIX
   Старые правила не должны возвращать li в normal flow.
   ========================================================== */
.top_sec_modern .fade_img .hold {
    position: relative !important;
}

.top_sec_modern .fade_img .hold > ul {
    position: relative !important;
}

.top_sec_modern .fade_img .hold > ul > li {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    margin: 0 !important;
}

.top_sec_modern .fade_img .hold > ul > li.active {
    z-index: 2 !important;
}

.top_sec_modern .fade_img .hold > ul > li:not(.active) {
    z-index: 1 !important;
}

/* ==========================================================
   FINAL RESPONSIVE FIX — RESIZED DESKTOP / TABLET
   Только CSS. PHP/JS и данные слайдера не трогаем.
   ========================================================== */

/* Один основной вертикальный scroll у страницы */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    /* hidden + visible превращается браузером в auto и создаёт второй scroll */
    overflow-x: clip !important;
    overflow-y: visible !important;
}

@media screen and (max-width: 1160px) {
    /* Старый wrapper не должен становиться отдельной областью прокрутки */
    .wrapper,
    .content,
    main {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* hidden + visible => auto. Используем clip, чтобы не создавать второй scroll */
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    /* Hero занимает всю доступную ширину, без белой полосы справа */
    .top_sec_modern {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* На ресайзе сохраняем тот же шрифт, что и на desktop */
    .top_sec_modern,
    .top_sec_modern * {
        font-family: "Manrope", Arial, sans-serif !important;
    }

    .top_sec_modern .slider_title,
    .top_sec_modern .top_sec_head,
    .top_sec_modern .top_sec_bdTxt,
    .top_sec_modern .slider_benefit,
    .top_sec_modern .btn {
        font-family: "Manrope", Arial, sans-serif !important;
    }
}

/* Tablet 601–800: не оставляем фиксированную desktop-ширину */
@media screen and (min-width: 601px) and (max-width: 800px) {
    .top_sec_modern .top_sec_txt_wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 55px !important;
        padding-right: 55px !important;
    }

    .top_sec_modern .top_sec_head {
        width: 100% !important;
        max-width: 560px !important;
    }

    .top_sec_modern .slider_benefits {
        width: 100% !important;
        max-width: 700px !important;
    }
}

/* ==========================================================
   RESIZE FIX v2 — tablet/mobile
   1) возвращаем тёмное затемнение под текстом, как на desktop
   2) hero растягиваем на всю ширину viewport, включая scrollbar gutter
   ========================================================== */
@media screen and (max-width:800px) {
  /* Не даём белой полосе справа обрезать сам hero при resize. */
  .top_sec_modern {
    width:100vw !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow:hidden !important;
  }

  .top_sec_modern .fade_img,
  .top_sec_modern .fade_img .hold,
  .top_sec_modern .fade_img .hold ul,
  .top_sec_modern .fade_img .hold ul li {
    width:100vw !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  /* То же затемнение, что используется на desktop.
     Оно должно быть поверх фотографии, но под текстом/кнопками. */
  .top_sec_modern .fade_img .hold ul li:after {
    content:"" !important;
    position:absolute !important;
    z-index:2 !important;
    left:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    pointer-events:none !important;
    background:linear-gradient(
      90deg,
      rgba(6,18,29,.78) 0%,
      rgba(6,18,29,.60) 30%,
      rgba(6,18,29,.24) 58%,
      rgba(6,18,29,.06) 82%,
      rgba(6,18,29,0) 100%
    ) !important;
  }

  .top_sec_modern .top_sec_txt_wrap {
    position:relative !important;
    z-index:11 !important;
    font-family:'Manrope',Arial,Helvetica,sans-serif !important;
  }

  .top_sec_modern .slider_title,
  .top_sec_modern .top_sec_head,
  .top_sec_modern .top_sec_head .top_sec_bdTxt,
  .top_sec_modern .slider_benefit,
  .top_sec_modern .top_sec_txt_wrap .btn {
    font-family:'Manrope',Arial,Helvetica,sans-serif !important;
  }
}


/* ==========================================================
   RESIZE v3 — УБИРАЕМ ПРИЧИНУ ВТОРОГО SCROLLBAR
   ВАЖНО: overflow-x:hidden + overflow-y:visible вычисляется
   браузером как auto. Именно это давало внутренний scrollbar.
   ========================================================== */
@media screen and (max-width:800px) {
    html {
        overflow-x: clip !important;
        overflow-y: auto !important;
    }

    body,
    .wrapper,
    .content,
    main,
    main.content {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    /* Только сам слайдер остаётся обрезанным по краям. */
    .top_sec_modern,
    .top_sec_modern .fade_img,
    .top_sec_modern .fade_img .hold,
    .top_sec_modern .fade_img .hold ul,
    .top_sec_modern .fade_img .hold ul li {
        overflow: hidden !important;
    }

    /* Мобильное выпадающее меню должно продолжать работать как overlay. */
    .ai-header-mobile-overlay {
        overflow: hidden !important;
    }
}

/* ==========================================================
   RESIZE v4 — TABLET 601–800
   1) Убираем белый зазор между шапкой и hero.
   2) Возвращаем нормальный отступ правой стрелки от края.
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {
    /* Старый layout оставляет около 15px пустого верхнего поля
       перед hero. Hero должен начинаться сразу под шапкой. */
    .top_sec_modern {
        margin-top: -15px !important;
    }

    /* Стрелки не должны быть прижаты к самому краю. */
    .top_sec_modern .fade_img .prev {
        left: 24px !important;
    }

    .top_sec_modern .fade_img .next {
        right: 24px !important;
    }
}

/* ==========================================================
   RESIZE v5 — УБИРАЕМ ВИДИМУЮ БЕЛУЮ ПОЛОСУ И ПРИЖАТУЮ СТРЕЛКУ
   601–800px. Основной scroll страницы сохраняется.
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {
    /* Белая полоса справа — это визуальный track системного scrollbar.
       Не создаём второй scroll, а делаем системный scrollbar невидимым. */
    html {
        scrollbar-width: none !important;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        background: transparent !important;
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        background: transparent !important;
    }

    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb {
        background: transparent !important;
        border: 0 !important;
    }

    /* Правая стрелка отодвинута от края так же уверенно, как левая. */
    .top_sec_modern .fade_img .prev {
        left: 28px !important;
        right: auto !important;
        margin-left: 0 !important;
    }

    .top_sec_modern .fade_img .next {
        right: 28px !important;
        left: auto !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================
   RESIZE v6 — УБИРАЕМ ПОСЛЕДНЮЮ 1px ПОЛОСУ МЕЖДУ HEADER И HERO
   На tablet 601–800px в старом каскаде остаётся ровно 1px
   фоновой полосы между <header> и первым блоком слайдера.
   Сдвигаем только hero на 1px вверх — без изменения его высоты.
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {
    .top_sec_modern {
        margin-top: -16px !important;
    }

    /* Стрелки остаются с нормальным отступом от краёв. */
    .top_sec_modern .fade_img .prev {
        left: 28px !important;
        right: auto !important;
        margin-left: 0 !important;
    }

    .top_sec_modern .fade_img .next {
        right: 28px !important;
        left: auto !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================
   FINAL v7 — tablet/mobile: точное соответствие desktop
   1) Цена — тот же orange #f47f45, что на desktop.
   2) Преимущества — маленькие оранжевые квадраты,
      без старых круглых галочек.
   Эти правила имеют повышенную специфичность, чтобы
   перекрыть CSS компонента slider, который подключается
   после основного slider.css.
   ========================================================== */
@media screen and (max-width:800px) {

    /* Цена: тот же цвет рамки, что на desktop */
    .top_sec_modern .fade_img .hold ul li .top_sec_txt_wrap .top_sec_head .top_sec_bdTxt {
        border: 2px solid #f47f45 !important;
        border-color: #f47f45 !important;
        border-radius: 0 !important;
    }

    /* Полностью отключаем старый круг/галочку */
    .top_sec_modern .fade_img .hold ul li .slider_benefit:before,
    .top_sec_modern .fade_img .hold ul li .slider_benefit:after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        border: 0 !important;
        background: none !important;
    }

    .top_sec_modern .fade_img .hold ul li .slider_benefit .slider_benefit_icon,
    .top_sec_modern .fade_img .hold ul li .slider_benefit > .slider_benefit_icon {
        display: block !important;
        position: relative !important;
        width: 7px !important;
        min-width: 7px !important;
        height: 7px !important;
        min-height: 7px !important;
        flex: 0 0 7px !important;
        margin: 0 8px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f47f45 !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

    .top_sec_modern .fade_img .hold ul li .slider_benefit .slider_benefit_icon:before,
    .top_sec_modern .fade_img .hold ul li .slider_benefit .slider_benefit_icon:after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        border: 0 !important;
        background: none !important;
    }
}

/* ==========================================================
   FINAL v8 — фиксированная кнопка + ровная колонка квадратов
   ========================================================== */

@media screen and (min-width:601px) and (max-width:800px) {
    .top_sec_modern .top_sec_txt_wrap {
        position: relative !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    /* Кнопка всегда на одной нижней линии слайда */
    .top_sec_modern .top_sec_txt_wrap .slider_button_wrap {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 22px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        z-index: 20 !important;
    }

    /* Преимущества — одна ровная вертикальная колонка */
    .top_sec_modern .slider_benefits {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 300px !important;
        max-width: calc(100% - 40px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .top_sec_modern .slider_benefit {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 100% !important;
        min-height: 28px !important;
        margin: 0 0 2px !important;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .top_sec_modern .slider_benefit:last-child {
        margin-bottom: 0 !important;
    }

    .top_sec_modern .slider_benefit .slider_benefit_icon,
    .top_sec_modern .slider_benefit > .slider_benefit_icon {
        flex: 0 0 7px !important;
        width: 7px !important;
        min-width: 7px !important;
        height: 7px !important;
        min-height: 7px !important;
        margin: 0 9px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f47f45 !important;
    }

    .top_sec_modern .slider_benefit .slider_benefit_icon:before,
    .top_sec_modern .slider_benefit .slider_benefit_icon:after {
        display: none !important;
        content: none !important;
    }
}

@media screen and (max-width:600px) {
    .top_sec_modern .top_sec_txt_wrap {
        position: relative !important;
    }

    /* Кнопка всегда внизу мобильного hero */
    .top_sec_modern .top_sec_txt_wrap .slider_button_wrap {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 20px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        z-index: 20 !important;
    }

    /* Одна вертикальная линия квадратов */
    .top_sec_modern .slider_benefits {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 250px !important;
        max-width: calc(100% - 40px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .top_sec_modern .slider_benefit {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 100% !important;
        min-height: 24px !important;
        margin: 0 0 3px !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .top_sec_modern .slider_benefit .slider_benefit_icon,
    .top_sec_modern .slider_benefit > .slider_benefit_icon {
        flex: 0 0 7px !important;
        width: 7px !important;
        min-width: 7px !important;
        height: 7px !important;
        min-height: 7px !important;
        margin: 0 8px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f47f45 !important;
    }

    .top_sec_modern .slider_benefit .slider_benefit_icon:before,
    .top_sec_modern .slider_benefit .slider_benefit_icon:after {
        display: none !important;
        content: none !important;
    }
}

/* ==========================================================
   FINAL v9 — фиксированные зоны цены и CTA для tablet 601–800
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {
    /*
       Цена всегда находится в одной точке слайда.
       Центр ценового блока совпадает с вертикальным центром стрелок.
       При этом длинный/короткий заголовок больше не двигает цену.
    */
    .top_sec_modern .fade_img .hold ul li .top_sec_txt_wrap .top_sec_head {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .top_sec_modern .fade_img .hold ul li .top_sec_txt_wrap .top_sec_head .top_sec_bdTxt {
        position: absolute !important;
        top: 196px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 15 !important;
        white-space: nowrap !important;
    }

    /* Заголовок остаётся сверху и не влияет на положение цены. */
    .top_sec_modern .fade_img .hold ul li .top_sec_txt_wrap .slider_title {
        position: relative !important;
        z-index: 14 !important;
    }

    /* Преимущества находятся в отдельной фиксированной зоне под ценой. */
    .top_sec_modern .fade_img .hold ul li .top_sec_txt_wrap .slider_benefits {
        position: absolute !important;
        top: 250px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 15 !important;
        margin: 0 !important;
    }

    /* CTA уже привязан к низу hero; усиливаем фиксацию. */
    .top_sec_modern .fade_img .hold ul li .top_sec_txt_wrap .slider_button_wrap {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 22px !important;
        margin: 0 !important;
        z-index: 20 !important;
    }
}

/* ==========================================================
   FINAL v10 — CTA привязан непосредственно к нижнему краю hero
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {
    /*
       Важно: кнопка больше НЕ позиционируется относительно
       текстового блока. Она привязана непосредственно к li слайда,
       поэтому не может оказаться выше цены из-за высоты заголовка.
    */
    .top_sec_modern .fade_img .hold > ul > li {
        position: absolute !important;
    }

    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .slider_button_wrap,
    .top_sec_modern .fade_img .hold > ul > li .slider_button_wrap {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 22px !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        z-index: 30 !important;
    }

    /* Цена — фиксированная точка, по центру hero/стрелок. */
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .top_sec_head .top_sec_bdTxt {
        top: 196px !important;
        bottom: auto !important;
    }
}

/* ==========================================================
   FINAL v11 — фиксируем CTA и цену относительно самого слайда
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {
    /* Ключевой фикс: текстовый контейнер больше не является
       containing block для абсолютных элементов. */
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap {
        position: static !important;
        height: auto !important;
    }

    /* И заголовок тоже не должен быть containing block для цены. */
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .top_sec_head {
        position: static !important;
    }

    /* Цена фиксирована относительно самого hero.
       Центр блока: 220px — ровно центр стрелок при высоте hero 440px. */
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .top_sec_head .top_sec_bdTxt {
        position: absolute !important;
        top: 196px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 25 !important;
    }

    /* Преимущества — фиксированная зона под ценой. */
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .slider_benefits {
        position: absolute !important;
        top: 250px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 25 !important;
    }

    /* Кнопка фиксирована относительно самого li, а не текста. */
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .slider_button_wrap {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 22px !important;
        width: 100% !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        z-index: 30 !important;
    }
}

/* ==========================================================
   FINAL v12 — КНОПКА И ЦЕНА ПРИВЯЗАНЫ К САМОМУ LI
   ========================================================== */
@media screen and (max-width:800px) {
    /* Сам слайд является единственным containing block. */
    .top_sec_modern .fade_img .hold > ul > li {
        position: absolute !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
    }

    /* Убираем влияние старого layout текстового контейнера. */
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ЦЕНА: строго по вертикальному центру hero,
       как центр стрелок. */
    .top_sec_modern .fade_img .hold > ul > li .top_sec_head .top_sec_bdTxt {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 25 !important;
        white-space: nowrap !important;
    }

    /* КНОПКА: непосредственно у нижнего края самого слайда. */
    .top_sec_modern .fade_img .hold > ul > li .slider_button_wrap {
        position: absolute !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: 24px !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 50 !important;
        text-align: center !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .top_sec_modern .fade_img .hold > ul > li .slider_button_wrap .btn,
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .slider_button_wrap .btn {
        position: relative !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
    }

    /* Преимущества — ниже цены, перед кнопкой. */
    .top_sec_modern .fade_img .hold > ul > li .slider_benefits {
        position: absolute !important;
        top: calc(50% + 48px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 25 !important;
    }
}

@media screen and (max-width:600px) {
    .top_sec_modern .fade_img .hold > ul > li .slider_button_wrap {
        bottom: 22px !important;
    }

    .top_sec_modern .fade_img .hold > ul > li .top_sec_head .top_sec_bdTxt {
        top: 50% !important;
    }

    .top_sec_modern .fade_img .hold > ul > li .slider_benefits {
        top: calc(50% + 42px) !important;
    }
}


/* ==========================================================
   FINAL v13 — MOBILE: ЧИТАЕМОСТЬ + РОВНАЯ КОЛОНКА + ЦЕНА НА
   ВЫСОТЕ ЦЕНТРА СТРЕЛОК
   ========================================================== */
@media screen and (max-width:600px) {

    /* Более плотное затемнение именно в зоне центрального текста.
       Фотография остаётся видимой, но белый текст не теряется. */
    .top_sec_modern .fade_img .hold > ul > li:after {
        background:
            linear-gradient(
                180deg,
                rgba(6,18,29,.66) 0%,
                rgba(6,18,29,.48) 42%,
                rgba(6,18,29,.22) 68%,
                rgba(6,18,29,.08) 100%
            ),
            linear-gradient(
                90deg,
                rgba(6,18,29,.76) 0%,
                rgba(6,18,29,.38) 42%,
                rgba(6,18,29,.08) 78%,
                rgba(6,18,29,0) 100%
            ) !important;
    }

    /* Текст строго белый и с более выраженной тенью,
       как на desktop. */
    .top_sec_modern .slider_title {
        color:#fff !important;
        opacity:1 !important;
        text-shadow:
            0 2px 3px rgba(0,0,0,.72),
            0 4px 10px rgba(0,0,0,.42) !important;
    }

    .top_sec_modern .slider_eyebrow,
    .top_sec_modern .slider_benefit,
    .top_sec_modern .slider_benefit > span:last-child {
        color:#fff !important;
        opacity:1 !important;
        text-shadow:0 2px 4px rgba(0,0,0,.55) !important;
    }

    /* Цена остаётся фиксированной, но теперь её центр совпадает
       с высотой центра стрелок. */
    .top_sec_modern .fade_img .hold > ul > li .top_sec_head .top_sec_bdTxt {
        top:calc(50% - 22px) !important;
        transform:translate(-50%, -50%) !important;
    }

    /* Преимущества — одна общая колонка:
       первая колонка всегда квадрат, вторая — текст. */
    .top_sec_modern .fade_img .hold > ul > li .slider_benefits {
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        width:250px !important;
        max-width:calc(100% - 40px) !important;
        padding:0 !important;
        margin:0 !important;
    }

    .top_sec_modern .fade_img .hold > ul > li .slider_benefit {
        display:grid !important;
        grid-template-columns:7px minmax(0,1fr) !important;
        column-gap:8px !important;
        align-items:center !important;
        justify-content:initial !important;
        width:100% !important;
        min-width:100% !important;
        min-height:24px !important;
        margin:0 0 3px !important;
        padding:0 !important;
        border:0 !important;
        box-sizing:border-box !important;
        text-align:left !important;
    }

    .top_sec_modern .fade_img .hold > ul > li .slider_benefit .slider_benefit_icon {
        grid-column:1 !important;
        grid-row:1 !important;
        display:block !important;
        width:7px !important;
        min-width:7px !important;
        height:7px !important;
        min-height:7px !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:#f47f45 !important;
        flex:none !important;
    }

    .top_sec_modern .fade_img .hold > ul > li .slider_benefit > span:last-child {
        grid-column:2 !important;
        grid-row:1 !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
        text-align:left !important;
    }

    .top_sec_modern .fade_img .hold > ul > li .slider_benefit .slider_benefit_icon:before,
    .top_sec_modern .fade_img .hold > ul > li .slider_benefit .slider_benefit_icon:after {
        display:none !important;
        content:none !important;
    }
}

/* ==========================================================
   FINAL v14 — MOBILE: ТЕКСТ ПОВЕРХ ЗАТЕМНЕНИЯ + КОМПАКТНЕЕ
   ПРЕИМУЩЕСТВА НАД CTA
   ========================================================== */
@media screen and (max-width:600px) {

    /* Текстовый слой находится НАД затемнением фотографии.
       Поэтому белый текст больше не выглядит серым/затуманенным. */
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap {
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-height:100% !important;
        margin:0 !important;
        padding:0 20px !important;
        box-sizing:border-box !important;
        z-index:20 !important;
        text-align:center !important;
    }

    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_title,
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .top_sec_head,
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefits,
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_button_wrap {
        z-index:21 !important;
    }

    /* Немного уменьшаем заголовок. */
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_title {
        font-size:clamp(25px, 7vw, 31px) !important;
        line-height:1.04 !important;
        color:#fff !important;
        opacity:1 !important;
        text-shadow:0 2px 4px rgba(0,0,0,.72), 0 4px 10px rgba(0,0,0,.42) !important;
    }

    /* Преимущества всегда находятся непосредственно НАД кнопкой,
       поэтому на неё больше не налезают. */
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefits {
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        bottom:78px !important;
        top:auto !important;
        transform:translateX(-50%) !important;
        width:250px !important;
        max-width:calc(100% - 40px) !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-end !important;
        background:transparent !important;
    }

    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefit {
        display:grid !important;
        grid-template-columns:7px minmax(0,1fr) !important;
        column-gap:8px !important;
        align-items:center !important;
        width:100% !important;
        min-width:100% !important;
        min-height:22px !important;
        height:22px !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        box-sizing:border-box !important;
        text-align:left !important;
        color:#fff !important;
        opacity:1 !important;
    }

    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefit .slider_benefit_icon {
        grid-column:1 !important;
        grid-row:1 !important;
        width:7px !important;
        min-width:7px !important;
        height:7px !important;
        min-height:7px !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:#f47f45 !important;
        opacity:1 !important;
    }

    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefit > span:last-child {
        grid-column:2 !important;
        grid-row:1 !important;
        margin:0 !important;
        padding:0 !important;
        text-align:left !important;
        color:#fff !important;
        opacity:1 !important;
    }
}

/* ==========================================================
   FINAL v15 — RESIZE DESKTOP / TABLET 601–800px
   Мобильный режим <=600px НЕ ТРОГАЕМ.
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {

    /* Hero остаётся фиксированной высоты 440px. */
    .top_sec_modern,
    .top_sec_modern .fade_img,
    .top_sec_modern .fade_img .hold,
    .top_sec_modern .fade_img .hold > ul,
    .top_sec_modern .fade_img .hold > ul > li {
        height:440px !important;
        min-height:440px !important;
        max-height:440px !important;
    }

    /* Текстовый слой занимает весь слайд и не влияет на
       положение цены/преимуществ/кнопки. */
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap {
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:440px !important;
        min-height:440px !important;
        padding:0 !important;
        margin:0 !important;
        z-index:20 !important;
        text-align:center !important;
    }

    /* Заголовок — отдельная верхняя фиксированная зона. */
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_title {
        position:absolute !important;
        top:32px !important;
        left:50% !important;
        width:560px !important;
        max-width:calc(100% - 120px) !important;
        transform:translateX(-50%) !important;
        margin:0 !important;
        padding:0 !important;
        font-family:"Manrope",Arial,sans-serif !important;
        font-size:39px !important;
        line-height:1.07 !important;
        color:#fff !important;
        opacity:1 !important;
        text-align:center !important;
        text-shadow:0 2px 4px rgba(0,0,0,.78),0 4px 10px rgba(0,0,0,.42) !important;
        z-index:30 !important;
    }

    /* Цена: центр строго совпадает с центром стрелок.
       При высоте hero 440px центр стрелок = 220px. */
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .top_sec_head .top_sec_bdTxt {
        position:absolute !important;
        top:220px !important;
        left:50% !important;
        right:auto !important;
        bottom:auto !important;
        transform:translate(-50%,-50%) !important;
        margin:0 !important;
        z-index:35 !important;
        border:2px solid #f47f45 !important;
        border-color:#f47f45 !important;
        border-radius:0 !important;
        color:#fff !important;
        font-family:"Manrope",Arial,sans-serif !important;
    }

    /* Преимущества — строго над кнопкой. */
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefits {
        position:absolute !important;
        top:250px !important;
        left:50% !important;
        right:auto !important;
        bottom:auto !important;
        transform:translateX(-50%) !important;
        width:300px !important;
        max-width:calc(100% - 80px) !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        background:transparent !important;
        z-index:35 !important;
    }

    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefit {
        display:grid !important;
        grid-template-columns:7px minmax(0,1fr) !important;
        column-gap:8px !important;
        align-items:center !important;
        width:100% !important;
        min-width:100% !important;
        height:24px !important;
        min-height:24px !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        box-sizing:border-box !important;
        color:#fff !important;
        opacity:1 !important;
        text-align:left !important;
        font-family:"Manrope",Arial,sans-serif !important;
        text-shadow:0 2px 4px rgba(0,0,0,.65) !important;
    }

    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefit .slider_benefit_icon {
        grid-column:1 !important;
        grid-row:1 !important;
        width:7px !important;
        min-width:7px !important;
        height:7px !important;
        min-height:7px !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:#f47f45 !important;
        box-shadow:none !important;
    }

    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefit > span:last-child {
        grid-column:2 !important;
        grid-row:1 !important;
        margin:0 !important;
        padding:0 !important;
        color:#fff !important;
        opacity:1 !important;
        text-align:left !important;
    }

    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefit .slider_benefit_icon:before,
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_benefit .slider_benefit_icon:after {
        display:none !important;
        content:none !important;
    }

    /* Кнопка — непосредственно у нижнего края hero.
       Она всегда видима и не зависит от длины текста. */
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_button_wrap {
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        top:auto !important;
        bottom:22px !important;
        width:auto !important;
        height:50px !important;
        min-height:50px !important;
        margin:0 !important;
        padding:0 !important;
        transform:translateX(-50%) !important;
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        z-index:50 !important;
        text-align:center !important;
    }

    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_button_wrap .btn {
        display:inline-flex !important;
        visibility:visible !important;
        opacity:1 !important;
        height:50px !important;
        min-height:50px !important;
        margin:0 !important;
    }
}

/* ==========================================================
   FINAL v16 — точечные правки
   <=600px: только заголовок чуть ниже.
   601–800px: цена всегда ровно по центру фактической высоты hero.
   Остальные настройки не меняем.
   ========================================================== */
@media screen and (max-width:600px) {
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_title {
        position:relative !important;
        top:8px !important;
    }
}

@media screen and (min-width:601px) and (max-width:800px) {
    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .top_sec_head .top_sec_bdTxt {
        top:50% !important;
        transform:translate(-50%,-50%) !important;
    }
}

/* ==========================================================
   FINAL v17 — RESIZE 601–800px
   Мобильную версию <=600px НЕ ТРОГАЕМ.
   Цена и стрелки находятся строго по центру высоты hero.
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {
    .top_sec_modern .fade_img .prev,
    .top_sec_modern .fade_img .next {
        top:50% !important;
    }

    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .top_sec_head .top_sec_bdTxt {
        top:50% !important;
        transform:translate(-50%, -50%) !important;
    }
}

/* ==========================================================
   FINAL v18 — RESIZE 601–800px
   Только цена: немного выше геометрического центра hero.
   <=600px НЕ ТРОГАЕМ.
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .top_sec_head .top_sec_bdTxt {
        top:50% !important;
        transform:translate(-50%, calc(-50% - 9px)) !important;
    }
}

/* ==========================================================
   FINAL v19 — RESIZE 601–800px
   Цена поднята выше — на уровень центра стрелок.
   <=600px НЕ ТРОГАЕМ.
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .top_sec_head .top_sec_bdTxt {
        top:50% !important;
        transform:translate(-50%, calc(-50% - 27px)) !important;
    }
}

/* V20 — resize 601–800: цена ещё выше. Mobile <=600 не трогаем. */
@media screen and (min-width:601px) and (max-width:800px) {
    .top_sec_modern .top_sec_head .top_sec_bdTxt {
        transform: translateY(-28px) !important;
    }
}

/* ==========================================================
   FINAL v21 — RESIZE 601–800px
   Цена и кнопка ещё на 10px выше.
   Mobile <=600px НЕ ТРОГАЕМ.
   ========================================================== */
@media screen and (min-width:601px) and (max-width:800px) {
    .top_sec_modern .fade_img .hold > ul > li .top_sec_txt_wrap .top_sec_head .top_sec_bdTxt {
        top:50% !important;
        transform:translate(-50%, calc(-50% - 37px)) !important;
    }

    .top_sec_modern .fade_img .hold > ul > li > .top_sec_txt_wrap .slider_button_wrap,
    .top_sec_modern .fade_img .hold > ul > li .slider_button_wrap {
        bottom:32px !important;
    }
}
