@import url('pe-icon-7-stroke.css');

/* Кнопка быстрого запроса (перенесено из itl_ironhub) */
.phone_button {
    position: fixed;
    bottom: 40px;
    right: 30px;
    z-index: 1;
}

.phone_button_img a.phone-call-link {
    display: inline-block;
    background: transparent;
    border: 0;
    line-height: 0;
    text-decoration: none;
    transition: transform 0.4s ease;
}

.phone_button_img a.phone-call-link:hover {
    transform: scale(1.12);
}

.phone_button_img img {
    width: 80px;
    animation: phone-pulse 4.4s ease-in-out infinite;
}

@keyframes phone-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.04) rotate(-4deg); }
    50% { transform: scale(1.06) rotate(0deg); }
    75% { transform: scale(1.04) rotate(4deg); }
}

/* Кнопка "наверх" — переносим влево, чтобы не мешала кнопке запроса */
.sp-scroll-up {
    right: auto;
    left: 30px;
}

/* Модал поверх фиксированной шапки (у шапки z-index 9999) */
.modal-backdrop {
    z-index: 14999;
}

.modal {
    z-index: 15000;
}

#myModal {
    text-align: center;
}

/* Компактный заголовок формы в модале */
#myModal .cf-content-wrap {
    padding-top: 6px;
    padding-bottom: 0;
}

#myModal .cf-content-text h3 {
    margin: 0;
}

#myModal .cf-form-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Форма в модале: отступ от шапки модала */
#myModal .modal-body {
    padding-top: 12px;
}

#myModal .modal-body .convertforms {
    text-align: left;
    margin-top: 0;
}

/* Блог: список статей с превью-картинками */
ul.mod-articlescategory.category-module {
    list-style: none;
    margin: 0;
    padding: 0;
}

li.fd-blog-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

li.fd-blog-item:last-child {
    border-bottom: 0;
}

.fd-blog-image {
    display: block;
    margin-bottom: 15px;
}

.fd-blog-image img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    border-radius: 4px;
}

.fd-blog-title a {
    font-size: 20px;
    font-weight: 700;
    color: #313131;
    text-decoration: none;
}

.fd-blog-title a:hover {
    color: #19ccfe;
}

.fd-blog-item .mod-articles-category-introtext {
    color: #777;
    margin-top: 8px;
}

.fd-blog-item .mod-articles-category-readmore a {
    color: #f7a301;
    font-weight: 700;
    text-decoration: none;
}

/* =========================================================
   Page Title — точная копия поведения оригинала (itl_ironhub)
   - высота: padding 75px (вместо 30px)
   - "липкий" фон: background-attachment: fixed (параллакс)
   - типографика заголовка и хлебных крошек
   ========================================================= */
#sp-title .sp-page-title {
    padding: 75px 0;
    /* Явно возвращаем cover/центрирование/без повтора: shorthand
       `.sp-page-title{background:...}` из preset5.css сбрасывает
       эти свойства в дефолт (auto/0% 0%/repeat), из-за чего фоновая
       картинка показывается в натуральную ширину и справа остаётся
       серая полоса (обнажённый край изображения). */
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#sp-title .sp-page-title .sp-page-title-heading {
    font-size: 30px;
    line-height: 1.8;
    margin-bottom: 20px;
    letter-spacing: .3em;
    text-transform: uppercase;
    opacity: .9;
    color: #fff;
}

#sp-title .sp-page-title .sp-page-title-sub-heading {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
}

#sp-title .sp-page-title .mod-breadcrumbs__wrapper .breadcrumb {
    font-size: 12px;
    font-weight: 400;
    margin: 25px 0 0;
    padding: 0;
    letter-spacing: .4em;
    text-transform: uppercase;
    background: none;
    -webkit-transition: all .27s cubic-bezier(0, 0, .58, 1);
    transition: all .27s cubic-bezier(0, 0, .58, 1);
}

#sp-title .sp-page-title .mod-breadcrumbs__wrapper .breadcrumb a {
    color: rgba(255, 255, 255, .9);
}

#sp-title .sp-page-title .mod-breadcrumbs__wrapper .breadcrumb .active,
#sp-title .sp-page-title .mod-breadcrumbs__wrapper .breadcrumb > .active {
    color: rgba(255, 255, 255, .8);
}

/* =========================================================
   Стандарт кнопки форм "Узнать персональный расчет"
   (как на главной: фон #19ccfe, наведение #f7a301)
   Применяется ко всем формам simplecallback
   ========================================================= */
.simplecallback button[type="submit"] {
    background: #19ccfe;
    color: #ffffff;
    border-radius: 3px;
    padding: 12px 30px;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

.simplecallback button[type="submit"]:hover {
    background: #f7a301;
    color: #ffffff;
}

/* Поля форм simplecallback: на всю ширину, единый стиль
   (исправляет поле "Сообщение" — textarea не растягивалась) */
.simplecallback .control-group input[type="text"],
.simplecallback .control-group input[type="tel"],
.simplecallback .control-group input[type="email"],
.simplecallback .control-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #cccccc;
    border-radius: 3px;
}

.simplecallback .control-group textarea {
    resize: vertical;
}

/* =========================================================
   Timeline «Запуск чистоты квартиры в 4 шагах»
   (точная копия оформления оригинального сайта freedom-stage)
   ========================================================= */
.sppb-addon-timeline .sppb-addon-timeline-text-wrap {
    margin-bottom: 10px;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper {
    list-style: none;
    position: relative;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper:before {
    background-color: #0095eb;
    bottom: 0;
    content: " ";
    left: 50%;
    position: absolute;
    top: 8px;
    width: 2px;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-badge {
    height: 90px;
    position: absolute;
    left: 50%;
    z-index: 5;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-badge:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .3s;
    transition: all .3s;
    font-size: 30px;
    background-color: #fff;
    border: 3px solid #0095eb;
    height: 20px;
    width: 20px;
    border-radius: 100%;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-badge:after {
    background: #0095eb none repeat scroll 0 0;
    content: "";
    height: 2px;
    left: 10px;
    position: absolute;
    top: 37px;
    width: 20px;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement {
    position: relative;
    padding-top: 0;
    padding-bottom: 30px;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper > .timeline-movement:last-child {
    padding-bottom: 0;
    bottom: -15px;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel {
    text-align: initial;
    padding: 20px;
    border: solid 1px #dfdfdf;
    border-radius: 5px;
    position: relative;
    width: 345px;
    margin-left: 15px;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel .title {
    font-size: 18px;
    margin: 0 0 10px;
    position: relative;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel .details {
    font-size: 14px;
    margin: 0;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement.even .timeline-badge {
    height: 76px;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel.left-part {
    text-align: right;
    margin-right: 15px;
    float: right;
    padding: 13px 20px;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel.left-part .title:after {
    right: -80px;
    left: inherit;
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel.left-part:before {
    left: inherit;
    right: 1px;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel:before {
    content: '';
    position: absolute;
    top: 32px;
    left: 1px;
    width: 0;
    height: 0;
    border-width: 8px;
    border-color: #fff #fff transparent transparent;
    border-style: solid;
    -webkit-transform: rotate(-135deg) translateY(-50%);
    transform: rotate(-135deg) translateY(-50%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 3px -3px 1px -2px rgba(0, 0, 0, .2);
    box-shadow: 3px -3px 1px -2px rgba(0, 0, 0, .2);
}
.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-date {
    font-size: 16px;
    line-height: 90px;
    margin: 0 0 0 30px;
    color: #0095eb;
    font-weight: bold;
}
.timeline-movement.even {
    display: table;
    width: 100%;
    margin: 0 auto;
}
.timeline-movement.even:before {
    background-color: #0095eb;
    bottom: 10px;
    content: " ";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    top: auto;
    width: 100%;
    margin: auto;
}
.timeline-movement.even:after {
    background: #fff none repeat scroll 0 0;
    border: 2px solid #0095eb;
    border-radius: 50%;
    bottom: .1em;
    content: "";
    height: 20px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: auto;
    width: 20px;
}
@media screen and (max-width: 767px) {
    .sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel {
        float: none !important;
        margin: 0 auto !important;
        width: 95%;
        text-align: center;
    }
    .sppb-col-xs-12.timeline-item {
        width: 50%;
        flex: none;
    }
}
@media screen and (max-width: 480px) {
    .sppb-col-xs-12.timeline-item {
        width: 100%;
    }
    .sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel {
        width: 100%;
    }
    .sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel.left-part,
    .sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement.even .timeline-item .timeline-date,
    .sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement.odd .timeline-item .timeline-date {
        text-align: center;
        margin: 0;
    }
    .sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-badge::after,
    .sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-badge::before,
    .sppb-addon-timeline .sppb-addon-timeline-wrapper::before {
        display: none;
    }
}

/* ===== Блог (страница блога в стиле шаблона) ===== */
.fd-blog-card {
    padding: 0;
    margin-bottom: 10px;
}

.fd-blog-card__img {
    display: block;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 4px;
}

.fd-blog-card__img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.fd-blog-card__img:hover img {
    transform: scale(1.03);
}

.fd-blog-card .article-header {
    margin-bottom: 12px;
}

.fd-blog-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.fd-blog-card__title a {
    color: #313131;
    text-decoration: none;
}

.fd-blog-card__title a:hover {
    color: #19ccfe;
}

.fd-blog-card__intro {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.fd-blog-card__readmore {
    margin-top: 4px;
}

/* Кнопка в стиле сайта (как "Узнать персональный расчет" в форме на главной) */
.fd-btn {
    display: inline-block;
    background: #19ccfe;
    color: #ffffff;
    border-radius: 3px;
    padding: 12px 30px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    border: none;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.fd-btn:hover,
.fd-btn:focus {
    background: #f7a301;
    color: #ffffff;
    text-decoration: none;
}

/* Полноширинный блок заголовка страницы на com_content-страницах (блог, статьи):
   делаем .sp-page-title на всю ширину, как на SP Page Builder страницах */
#sp-main-body > .container > .container-inner > .row #sp-title .sp-page-title {
    margin-left: calc(-1 * (100vw - 100%) / 2);
    margin-right: calc(-1 * (100vw - 100%) / 2);
}

/* Убираем верхний отступ #sp-main-body, когда есть блок заголовка (блог, статьи):
   заголовок прижат к хидеру, как на SP Page Builder страницах */
#sp-main-body:has(#sp-title .sp-page-title) {
    padding-top: 0;
}

/* =========================================================
   Портфолио: hover-анимация карточек (аналог freedom-stage)
   При наведении на фото:
   - картинка слегка увеличивается и затемняется;
   - появляется тёмный оверлей;
   - внутри карточки появляется жёлтая рамка (#f7a301);
   - в центре появляется кнопка «Увеличить» (открывает лайтбокс).
   Селекторы привязаны к классам .spf-masonry/.spf-item,
   которые создаются скриптом только на странице «Портфолио».
   ========================================================= */
.spf-masonry .spf-item .sppb-addon-single-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

.spf-masonry .spf-item .sppb-addon-single-image-container img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-transition: transform .5s ease, opacity .5s ease;
    transition: transform .5s ease, opacity .5s ease;
}

/* Тёмный оверлей поверх изображения */
.spf-masonry .spf-item .sppb-addon-single-image-container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    -webkit-transition: opacity .4s ease-in;
    transition: opacity .4s ease-in;
}

/* Жёлтая рамка внутри карточки */
.spf-masonry .spf-item .sppb-addon-single-image-container::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    border: 3px solid #f7a301;
    opacity: 0;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
    pointer-events: none;
}

/* Кнопка «Увеличить»: переоформляем штатный лайтбокс-«+»
   (ссылка .sppb-addon-image-overlay-icon уже открывает лайтбокс) */
.spf-masonry .spf-item .sppb-addon-single-image-container .sppb-addon-image-overlay-icon {
    display: block;
    width: auto;
    height: auto;
    line-height: 1;
    font-size: 0; /* прячем «+» */
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 13px 28px;
    color: #fff;
    background: #f7a301;
    border-radius: 3px;
    z-index: 4;
    opacity: 0;
    /* Отключаем штатную анимацию SP Page Builder (zoomIn .2s),
       чтобы не конфликтовала с transform: translate(-50%,-50%) */
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transform: translate(-50%, -50%) scale(.75);
    transform: translate(-50%, -50%) scale(.75);
    -webkit-transition: opacity .3s ease, background-color .3s ease, -webkit-transform .3s ease;
    transition: opacity .3s ease, background-color .3s ease, transform .3s ease;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}

.spf-masonry .spf-item .sppb-addon-single-image-container .sppb-addon-image-overlay-icon::after {
    content: "Увеличить";
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Состояние наведения */
.spf-masonry .spf-item:hover .sppb-addon-single-image-container img {
    opacity: .7;
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
}

.spf-masonry .spf-item:hover .sppb-addon-single-image-container::before {
    opacity: 1;
}

.spf-masonry .spf-item:hover .sppb-addon-single-image-container::after {
    opacity: 1;
}

.spf-masonry .spf-item:hover .sppb-addon-single-image-container .sppb-addon-image-overlay-icon {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.spf-masonry .spf-item .sppb-addon-single-image-container .sppb-addon-image-overlay-icon:hover {
    background: #19ccfe;
    color: #fff;
}

/* Подпись (название + категория) в оверлее карточки — как в оригинале */
.spf-masonry .spf-item .sppb-addon-single-image-container .spf-overlay-caption {
    position: absolute;
    top: calc(50% + 52px);
    left: 50%;
    z-index: 5;
    width: 88%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    pointer-events: none;
}

.spf-masonry .spf-item .spf-overlay-caption .spf-overlay-title {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.3;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .75);
}

.spf-masonry .spf-item .spf-overlay-caption .spf-overlay-tags {
    display: block;
    margin-top: 6px;
    color: #f7a301;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

.spf-masonry .spf-item:hover .sppb-addon-single-image-container .spf-overlay-caption {
    opacity: 1;
}

/* Скрываем текст под картинкой — название теперь показывается
   в оверлее при наведении, чтобы не дублировалось */
.spf-masonry .spf-item .sppb-addon-title {
    display: none !important;
}

/* Локализация текста кнопки для украинской версии */
html[lang="uk-UA"] .spf-masonry .spf-item .sppb-addon-single-image-container .sppb-addon-image-overlay-icon::after {
    content: "Збільшити";
}

@media (max-width: 575px) {
    .spf-masonry .spf-item .sppb-addon-single-image-container .sppb-addon-image-overlay-icon {
        padding: 10px 20px;
    }
    .spf-masonry .spf-item .sppb-addon-single-image-container .sppb-addon-image-overlay-icon::after {
        font-size: 13px;
    }
}

/* ===== Страница «Про нас» (pro-nas) — перенос из itl_ironhub ===== */

/* Счётчики (iron-counter dark) — общие и для text_block-разметки */
.iron-counter .sppb-addon-animated-number,
.sppb-animated-number {
    padding-right: 0;
}
.iron-counter .sppb-animated-number,
.sppb-animated-number {
    font-family: Dosis, sans-serif;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    font-size: 40px;
    color: rgba(49, 49, 49, 1);
}
.iron-counter .sppb-animated-number-title,
.sppb-animated-number-title {
    margin-top: 10px;
    display: block;
    text-transform: uppercase;
    color: #fff;
}
.dark .sppb-animated-number-title {
    color: #9c9c9c;
}
/* Выравнивание по правому краю для счётчиков */
.sppb-addon-animated-number.sppb-text-left .animated-number-icon {
    display: inline-block;
    margin-right: 10px;
}
.sppb-addon-animated-number.sppb-text-left .content-wrap {
    display: inline-block;
}
.sppb-addon-animated-number.sppb-text-right .animated-number-icon {
    display: inline-block;
    margin-left: 20px;
}
.sppb-addon-animated-number.sppb-text-right .content-wrap {
    display: inline-block;
    text-align: left;
}

/* Гарантируем 2x2 сетку счётчиков: две колонки по 25% рядом */
#section-id-1492277987716 #column-wrap-id-1491765626754,
#section-id-1492277987716 #column-wrap-id-1492184652288 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
@media (max-width: 991.98px) {
    #section-id-1492277987716 #column-wrap-id-1491765626754,
    #section-id-1492277987716 #column-wrap-id-1492184652288 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Табы (tabstyleone) — как на старом сайте */
.tabstyleone .sppb-addon-tab .sppb-nav-lines > li > a {
    font-size: 20px;
}
.tabstyleone .sppb-addon-tab .sppb-tab-content {
    background: #fff;
    padding: 30px;
}
.tabstyleone .sppb-addon-tab .sppb-tab-content .sppb-tab-pane h4,
.tabstyleone .sppb-addon-tab .sppb-tab-content .sppb-tab-pane span {
    color: #feb019;
    font-size: 22px;
    font-family: 'Exo 2', sans-serif !important;
    margin-top: 0;
    text-transform: uppercase;
    padding: 4px 0;
}
.tabstyleone .sppb-addon-tab .sppb-tab-content .sppb-tab-pane h2 {
    margin-bottom: 20px;
}
.tabstyleone .sppb-addon-tab .sppb-tab-content .sppb-tab-pane p {
    margin-bottom: 27px;
}

/* Секция «Декілька слів» — фоновая картинка во всю ширину.
   Используется обрезанная версия bg4-full.jpg (без белой полосы слева),
   чтобы фото занимало секцию от левого до правого края.
   cover + position 50% 50% — фото покрывает всю секцию без искажений. */
#about-section.sppb-section {
    background-image: url(/images/demo_img/background/bg4-full.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: 50% 50%;
}
#about-section #column-id-1492277987742 {
    background-color: rgba(242, 242, 242, 1);
    padding: 60px;
}
@media (max-width: 767px) {
    #about-section #column-id-1492277987742 {
        padding: 30px;
    }
}

/* Секция team-b (#section-id-1490614506359): отступ сверху у внутреннего
   контейнера .sppb-row-container на больших экранах (margin-top: 50px),
   чтобы блок не был впритык к предыдущей секции. */
@media (min-width: 1400px) {
    #section-id-1490614506359 .sppb-row-container {
        max-width: 1320px;
        margin-top: 50px;
    }
}

/* =========================================================
   Страница «Контакты» (#contacts-block) — точная копия оригинала
   (freedom-stage / itl_ironhub dop.css):
   - телефоны (ссылки tel:) тёмные и видимые на белом фоне
   - иконки (phone / envelope / map) — фирменный цвет #19ccfe
   ========================================================= */
#contacts-block .sppb-icon-container {
    color: #19ccfe !important;
}

#sppb-addon-1486581922587 a,
#sppb-addon-1490553750200 a {
    color: #2b2b2b !important;
}

/* =========================================================
   Слайдер «До\После» (Smart Slider 3, n2-ss-3) — адаптивность.

   Проблема: Smart Slider в режиме "auto" ставит на обёртку
   #n2-ss-3-align жёсткие min-width:675px / max-width:675px,
   поэтому на телефоне слайдер не уменьшается и вылезает за экран.
   Решение: на мобильных снимаем жёсткую ширину и растягиваем
   слайдер на всю ширину контейнера; соотношение сторон картинки
   сохраняется слайдером автоматически.
   ========================================================= */
@media (max-width: 900px) {
    div#n2-ss-3-align {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    div#n2-ss-3,
    div#n2-ss-3 .n2-ss-slider-1,
    div#n2-ss-3 .n2-ss-slider-2,
    div#n2-ss-3 .n2-ss-slider-3,
    div#n2-ss-3 .n2-ss-slider-4 {
        width: 100% !important;
    }
}

/* =========================================================
   Главный слайдер (Smart Slider 3, модуль «Главный слайдер»)
   Кнопки «Все услуги / Сделать уборку / Контакты» (RU — n2-ss-2)
   и «Всі послуги / Замовити прибирання / Контакти» (UK — n2-ss-4).

   Правила применяются ко ВСЕМ слайдам обоих слайдеров
   (в каждом слайдере по 7 слайдов со своим рядом кнопок),
   поэтому селекторы общие — по структуре ряда с кнопками,
   а не по уникальным классам конкретного слайда.

   Проблема: на мобильных Smart Slider оставляет 3 колонки по ~33%
   внутри ряда шириной 400px — кнопки с длинным текстом не помещаются
   и становятся невидимыми.
   Решение: на мобильных ставим колонки по 100% (кнопки друг под
   другом, «в три ряда»), сами кнопки делаем чуть меньше и по центру,
   с постепенным уменьшением по мере сужения экрана.
   ========================================================= */
@media (max-width: 900px) {
    /* ряд кнопок: разрешаем перенос и растягиваем колонки на всю ширину */
    div#n2-ss-2 .n2-ss-slide .n2-ss-layer[data-sstype="row"]:has(.n2-ss-button-container) > .n2-ss-layer-row > .n2-ss-layer-row-inner,
    div#n2-ss-4 .n2-ss-slide .n2-ss-layer[data-sstype="row"]:has(.n2-ss-button-container) > .n2-ss-layer-row > .n2-ss-layer-row-inner {
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
    }
    div#n2-ss-2 .n2-ss-slide .n2-ss-layer[data-sstype="row"]:has(.n2-ss-button-container) > .n2-ss-layer-row > .n2-ss-layer-row-inner > .n2-ss-layer[data-sstype="col"],
    div#n2-ss-4 .n2-ss-slide .n2-ss-layer[data-sstype="row"]:has(.n2-ss-button-container) > .n2-ss-layer-row > .n2-ss-layer-row-inner > .n2-ss-layer[data-sstype="col"] {
        width: 100% !important;
        margin: 2px 0 !important;
    }
    /* ряд на всю ширину слайдера (вместо жёстких 400px) */
    div#n2-ss-2 .n2-ss-slide .n2-ss-layer[data-sstype="row"]:has(.n2-ss-button-container),
    div#n2-ss-4 .n2-ss-slide .n2-ss-layer[data-sstype="row"]:has(.n2-ss-button-container) {
        max-width: 100% !important;
    }
    /* сами кнопки: по центру, чуть меньше */
    div#n2-ss-2 .n2-ss-slide .n2-ss-button-container,
    div#n2-ss-4 .n2-ss-slide .n2-ss-button-container {
        text-align: center;
    }
    div#n2-ss-2 .n2-ss-slide .n2-ss-button-container a,
    div#n2-ss-4 .n2-ss-slide .n2-ss-button-container a {
        display: inline-block;
        font-size: 13px !important;
        padding: 0.55em 1.3em !important;
        white-space: normal !important;
    }
}
@media (max-width: 700px) {
    div#n2-ss-2 .n2-ss-slide .n2-ss-button-container a,
    div#n2-ss-4 .n2-ss-slide .n2-ss-button-container a {
        font-size: 11px !important;
        padding: 0.4em 0.9em !important;
    }
}
@media (max-width: 480px) {
    div#n2-ss-2 .n2-ss-slide .n2-ss-button-container a,
    div#n2-ss-4 .n2-ss-slide .n2-ss-button-container a {
        font-size: 10px !important;
        padding: 0.35em 0.85em !important;
    }
}
@media (max-width: 360px) {
    div#n2-ss-2 .n2-ss-slide .n2-ss-button-container a,
    div#n2-ss-4 .n2-ss-slide .n2-ss-button-container a {
        font-size: 9px !important;
        padding: 0.3em 0.8em !important;
    }
}

/* ===== Convert Forms: форма «Сделать заявку на расчёт» (7 = RU, 8 = UA) — по центру и компактнее ===== */
.convertforms[data-id="7"],
.convertforms[data-id="8"] {
    margin-left: auto;
    margin-right: auto;
}

.convertforms[data-id="7"] .cf-control-group,
.convertforms[data-id="8"] .cf-control-group {
    margin-bottom: 8px;
}

/* компактный блок загрузки фото/файла — для ВСЕХ форм Convert Forms */
.convertforms .tf-file-upload-editor .dz-message {
    padding: 12px !important;
    gap: 2px;
}

.convertforms .tf-file-upload-editor .dz-message svg {
    width: 26px;
    height: 18px;
}

.convertforms .tf-file-upload-editor {
    min-height: 0 !important;
}

/* заголовок над формой «Сделать заявку» — тоже по центру */
.addon-root-module .sppb-addon-title,
.sppb-addon-module .sppb-addon-title,
.sppb-addon-module:has(.convertforms[data-id="7"]) .sppb-addon-title,
.sppb-addon-module:has(.convertforms[data-id="8"]) .sppb-addon-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box;
}

/* текст согласия (чекбокс) — мелким шрифтом */
.convertforms[data-id="7"] .cf-checkbox-group label.cf-label,
.convertforms[data-id="8"] .cf-checkbox-group label.cf-label {
    font-size: 10px !important;
    line-height: 1.4;
    color: #6b6b6b;
}

/* метки полей Convert Forms в модулях "center-form" — по левому краю (как в остальных формах),
   а не по центру из-за text-align:center родителя */
.sp-module.center-form .convertforms {
    text-align: left !important;
}

/* Единый стиль кнопок для ВСЕХ форм Convert Forms —
   как у кнопки в форме «Оставьте Ваш номер» на главной (cf_1) */
.convertforms .cf-btn {
    background: #19ccfe !important;
    color: #ffffff !important;
    border-radius: 3px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    border: none !important;
}
.convertforms .cf-btn:hover {
    background: #f7a301 !important;
}