:root {

    /* --- Цветовая палитра (Colors) --- */

    /* Основные цвета фона и элементов */

    --white: #FFFFFF;

    --gray: #E1E1E3;

    --gray_2: #F5F5F5;

    --gray_3: #A9A9A9;



    --gray_4: #4F4F4F;

    --gray_4-50: rgba(79, 79, 79, 0.5);

    /* Версия с прозрачностью */



    /* Фиолетовые оттенки */

    --purple_gray: #C2C0CB;

    --purple_dark: #272630;

    --purple: #7E7EAA;



    /* Текстовые цвета (Semantic Text Colors) */

    --text: #514F5C;

    /* text */

    --h_color: #31313D;

    /* H_color */





    /* --- Типографика (Typography) --- */

    --involve: 'Involve', sans-serif;

    --tilda-sans: 'Tilda Sans', sans-serif;

    --czizh: 'Czizh';



    /* --- Радиусы (Radius) --- */

    --radius-sm: 4px;



    --radius-md: 10px;

}



body {

    font-family: var(--involve);
    line-height: 110%;
     overflow-x: hidden;
}





.container {

    width: 100%;

    max-width: 1440px;

    margin: 0 auto !important;

    padding: 0 40px;

}



h2 {

    font-size: 50px;

    line-height: 110%;

}



h3 {

    font-size: 32px;

}



h4 {

    font-size: 24px;

}



.breadcrumbs {

    font-family: var(--font-primary);

    font-size: 14px;

    color: var(--text);

    margin-bottom: 30px;

    padding-top: 50px;

}



.button-primary {

    background: transparent;

    border-radius: 2px;

    border: 1px solid var(--gray);

    color: var(--purple_dark);

    text-align: center;

    font-family: Involve;

    font-size: 18px;

    font-style: normal;

    font-weight: 600;

    line-height: 110%;

    transition: all 0.3s ease;

    padding: 14px;

}



.button-primary:hover {

    border-radius: 2px;

    background: var(--purple_dark);

    color: var(--white);

    text-align: center;

    font-family: Involve;

    font-size: 18px;

    font-style: normal;

    font-weight: 600;

    line-height: 110%;

    transition: all 0.3s ease;

}



.breadcrumbs a {

    color: var(--gray_3, #A9A9A9);

    text-align: center;

    font-family: "Involve";

    font-size: 20px;

    font-style: normal;

    font-weight: 500;

    line-height: 110%;

}

.modal-overlay {
    display: none;
    /* Скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.modal-body {
    position: relative;
}

/* Контейнер модалки */
.modal-container {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    position: relative;
    max-width: 1050px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-body form {
    position: relative;
    z-index: 2;
    max-width: 75%;
}

.logo-modal {
    position: absolute;
    top: 0;
    right: -25px;
    max-width: 300px;
    z-index: 1;
}

.modal-header__title {
    font-size: 38px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 110%;
}

.modal__subtitle {
    font-size: 16px;
    color: rgba(81, 79, 92, 1);
    font-weight: 400;
    margin-bottom: 20px;
}

/* Кнопка закрытия */
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #333;
}

.modal-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* остальные стили из прошлого ответа */
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    display: flex;
    /* если используете flex для центрирования */
}

.success-overlay {
    display: none;
    /* Скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Почти белый фон, как на макете */
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Контейнер */
.success-container {
    text-align: center;
    max-width: 500px;
    width: 90%;
    padding: 20px;
    background: #fff;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Заголовок */
.success-title {
    font-size: 36px;
    font-weight: 700;
    color: #33363b;
    margin-bottom: 25px;
    line-height: 1.2;
    font-family: var(--involve);
}

/* Текст */
.success-text {
    font-size: 16px;
    color: #7a7a7a;
    line-height: 1.5;
    margin-bottom: 40px;
    font-family: var(--tilda-sans);
}

/* Кнопка "Подробнее" (Ghost button) */
.success-btn {
    display: inline-block;
    background: transparent;
    border: 1px solid #e0e0e0;
    /* Светлая тонкая рамка */
    color: #33363b;
    padding: 15px 80px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    min-width: 320px;
}

/* Класс для активации */
.success-overlay.is-active {
    display: flex;
    opacity: 1;
}

.breadcrumbs .breadcrumb_last {

    color: var(--text, #514F5C);

    text-align: center;

    font-family: "Involve";

    font-size: 20px;

    font-style: normal;

    font-weight: 500;

    line-height: 110%;

}



.breadcrumbs .container span:first-child {

    color: var(--gray_3, #A9A9A9);

    font-size: 20px;

}



.section-title {

    font-family: var(--involve);

    font-size: 50px;

    font-style: normal;

    font-weight: 500;

    line-height: 110%;

    margin-bottom: 30px;

}



.pagination-wrapper {

    margin-top: 30px;

    margin-bottom: 50px;

    /* Отступ от постов */

    display: flex;

    justify-content: center;

    /* Или flex-start, если нужно слева */

}



section,

.section {

    padding-bottom: 50px;

    padding-top: 50px;

}



.main {

    flex: 1;

}



.site-wrapper {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    /* 100% высоты окна */

}



/* Убираем стандартные стили списка WP */

.nav-links {

    display: flex;

    align-items: center;

    gap: 15px;

    /* Расстояние между цифрами */

    font-family: var(--font-primary);

    /* Involve */

    font-size: 18px;

    justify-content: center;

    /* Размер цифр */

}



/* --- Общий стиль для всех цифр --- */

.nav-links a.page-numbers,

.nav-links span.page-numbers {

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: var(--color-gray-3);

    /* Серый цвет для неактивных (A9A9A9) */

    transition: all 0.3s ease;

    padding: 0 5px;

    /* Небольшой отступ по бокам */

    min-width: 30px;

    /* Минимальная ширина цифры */

}



/* Ховер эффект для обычных цифр */

.nav-links a.page-numbers:not(.next):not(.prev):hover {

    color: var(--color-purple-dark);

}



/* --- АКТИВНАЯ страница (Черный прямоугольник) --- */

.nav-links span.page-numbers.current {

    background-color: var(--purple_dark);

    color: var(--white);

    padding: 12px 18px;

    border-radius: 2px;

    font-weight: 400;

}





.nav-links a.prev,

.nav-links a.next {

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    background: none;

    padding: 0 20px;

}



.arrow-icon svg {

    width: 40px;

    height: auto;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5px;

    transition: stroke 0.3s;

}



/* Цвет стрелок */

.nav-links a.prev {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='23' viewBox='0 0 47 23' fill='none'%3E%3Cpath d='M45.5 12.5459H47V9.54593H45.5V11.0459V12.5459ZM0.439339 9.98527C-0.146446 10.5711 -0.146446 11.5208 0.439339 12.1066L9.98528 21.6525C10.5711 22.2383 11.5208 22.2383 12.1066 21.6525C12.6924 21.0667 12.6924 20.117 12.1066 19.5312L3.62132 11.0459L12.1066 2.56065C12.6924 1.97486 12.6924 1.02511 12.1066 0.439327C11.5208 -0.14646 10.5711 -0.14646 9.98528 0.439327L0.439339 9.98527ZM45.5 11.0459V9.54593L1.5 9.54593V11.0459V12.5459L45.5 12.5459V11.0459Z' fill='%23514F5C'/%3E%3C/svg%3E");

    background-size: contain;

    background-repeat: no-repeat;

    display: inline-block;

    width: 47px;

    height: 23px;

}



.nav-links a.next {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='23' viewBox='0 0 47 23' fill='none'%3E%3Cpath d='M1.5 9.54593H0V12.5459H1.5V11.0459V9.54593ZM46.5607 12.1066C47.1464 11.5208 47.1464 10.5711 46.5607 9.98527L37.0147 0.439327C36.4289 -0.14646 35.4792 -0.14646 34.8934 0.439327C34.3076 1.02511 34.3076 1.97486 34.8934 2.56065L43.3787 11.0459L34.8934 19.5312C34.3076 20.117 34.3076 21.0667 34.8934 21.6525C35.4792 22.2383 36.4289 22.2383 37.0147 21.6525L46.5607 12.1066ZM1.5 11.0459V12.5459H45.5V11.0459V9.54593H1.5V11.0459Z' fill='%23514F5C'/%3E%3C/svg%3E");

    background-size: contain;

    background-repeat: no-repeat;

    display: inline-block;

    width: 47px;

    height: 23px;

}



.nav-links a.prev:hover,

.nav-links a.next:hover {

    color: var(--color-purple);

}



/* Отключение точек (...) */

.page-numbers.dots {

    color: var(--color-gray-3);

}



.articles-slider .swiper-slide {

    height: auto !important;

}



.articles-slider .blog-card {

    height: 100%;

}



.container-pr-0--no-mob {

    padding-right: 0 !important;

}



.container-pl-0--no-mob {

    padding-left: 0 !important;

}



.about__hero {

    width: 100%;

    display: flex;

    /*align-items: flex-start;*/

    gap: 60px;

    align-items: center;

}



/* Левая колонка */

.about-content {

    flex: 1;

    /* Занимает доступное пространство */

    max-width: 600px;

    /* Ограничиваем ширину текста для читаемости */

}



.about-content h1,

.about-content h2,

.about-content h3,

.about-content h4,

.about-content h5,

.about-content h6 {

    font-family: var(--involve);

    color: #1B1B24;

}



.about-content h2 {

    margin-bottom: 30px;

}



.block-subtitle {

    font-family: var(--tilda-sans);

    font-size: 24px;

    font-weight: 400;

    color: var(--purple_gray);

    /* Серый цвет подзаголовка как на макете */

    margin-bottom: 15px;

    line-height: 110%;

}



/* Основной текст */

.text-body {

    font-size: 16px;

    color: var(--text);

    line-height: 120%;

    font-family: var(--tilda-sans);

}



/* Список */

.philosophy-list {

    list-style: none;

    /* Убираем стандартные точки */

    padding: 0;

    margin-bottom: 15px;

}



.philosophy-list li {

    position: relative;

    padding-left: 20px;

}



/* Кастомные буллеты (точки) */

.philosophy-list li::before {

    content: "•";

    position: absolute;

    left: 0;

    color: var(--purple_gray);

    font-weight: bold;

}



/* Правая колонка с картинками */

.about-images {

    flex: 1;

    position: relative;

    min-height: 530px;

    transition: min-height 0.3s ease;

}



.img-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* Большое изображение (на заднем плане, справа) */

.img-large {

    width: 85%;

    height: calc(100% - 10%);

    position: absolute;

    top: 0;

    right: 0;

    z-index: 1;

}



/* Маленькое изображение (на переднем плане, слева) */

.img-small {

    width: 100%;

    max-width: 180px;

    height: 240px;

    position: absolute;

    bottom: 0;

    left: 0;

    z-index: 2;

    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);

    /* Легкая тень для отделения планов */



}



.reverse {

    flex-direction: row-reverse;

}



.img-reverse {

    left: auto;

    right: 0;

}



.img-large-reverse {

    left: 0;

    right: auto;

}



.dark-about-section {

    padding: 50px 0;

    color: #fff;

    position: relative;

}



/* Сетка: Текст слева (пошире), Картинки справа (поуже) */

.dark-about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    /* Левая часть чуть шире */

    gap: 60px;

    /* Большое пространство между текстом и фото */

    align-items: start;

    /* Выравнивание по верху */

    /*position: relative;*/

    z-index: 2;

}



/* --- Левая часть (Текст) --- */

.dark-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    height: 100%;

    /* Отступ снизу */

    position: relative;

    z-index: 1;



}



.dark-title {

    font-size: 42px;

    font-weight: 500;

    color: #ffffff;

    margin-top: 0;

    margin-bottom: 30px;

    letter-spacing: -0.5px;

}



.dark-text {

    font-family: var(--tilda-sans);

    font-size: 16px;

    line-height: 110%;

    max-width: 650px;

    color: var(--white);

    font-weight: 400;

}



.dark-text p {

    margin-bottom: 25px;

}



.dark-text p:last-child {

    margin-bottom: 0;

}



/* --- Правая часть (Картинки) --- */

.dark-images {

    display: flex;

    flex-direction: column;

    gap: 20px;

    /* Отступ между верхней и нижней картинкой */

}



.image-item {

    width: 100%;

    overflow: hidden;

    position: relative;

}



.image-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.top-image {

    order: 2;

    position: absolute;

    height: 109%;

    top: -4%;

    max-width: 550px;

    right: 0;

}



.bottom-image {

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    filter: brightness(0.2);

}



.is-provider-youtube iframe {

    width: 100%;

    height: 671px;

}



ol.process-list {

    list-style: none !important;

    /* Отключаем стандартные цифры */

    padding: 0;

    margin: 40px 0;

    counter-reset: process-counter;

    /* Инициализация счетчика */

    max-width: 900px;

}



/* Элемент списка */

ol.process-list>li {

    position: relative;

    padding-left: 60px;

    /* Отступ слева под цифру */

    padding-bottom: 30px;

    /* Отступ снизу */

    margin-bottom: 0;

    counter-increment: process-counter;

    /* +1 к счетчику */

}



ol.process-list>li:last-child {

    padding-bottom: 0;

}



/* --- КВАДРАТ С ЦИФРОЙ (::before) --- */

ol.process-list>li::before {

    content: counter(process-counter);

    /* Генерируем цифру */

    position: absolute;

    top: 0;

    left: 0;

    width: 36px;

    height: 36px;

    background-color: #A9A8B0;

    /* Серый фон */

    color: #fff;

    font-size: 18px;

    font-weight: 500;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 2px;

    z-index: 2;

    line-height: 110%;

}



/* --- ПУНКТИРНАЯ ЛИНИЯ (::after) --- */

ol.process-list>li::after {

    content: '';

    position: absolute;

    top: 10px;

    left: 0px;

    /* Центр квадрата (36/2 - 1px) */

    width: 0;

    height: 100%;

    border-left: 2px dotted #C2C0CB;

    z-index: 1;

}



/* Скрываем линию у последнего элемента */

ol.process-list>li:last-child::after {

    display: none;

}



/* --- СТИЛИ ЗАГОЛОВКА И ТЕКСТА --- */



/* Контейнер контента */

ol.process-list .process-content {

    padding-top: 2px;

    /* Выравнивание по верхнему краю цифры */

}



/* Заголовок (h3) */

ol.process-list h3 {

    color: var(--h_color, #31313D);

    margin-bottom: 10px;

    font-family: var(--involve);

    font-size: 24px;

    font-style: normal;

    font-weight: 500;

    line-height: 110%;

}



/* Описание */

ol.process-list .process-desc {

    color: var(--text, #514F5C);

    /* main */

    font-family: var(--tilda-sans);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 110%;

}

.diz-block-about {
    display: flex;
    gap: 10px;
    align-items: center;
}

.diz-img-block img {
    border-radius: 10px;
    height: 80px;
}

.diz-dscr-block-name {
    color: var(--text) !important;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    /* 28.8px */
}

.nad-proektom-rab {
    margin-bottom: 22px;
    margin-top: 20px;
    color: var(--text) !important;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    /* 35.2px */
}

.diz-dscr-block .complex-card__address {
    margin-top: 0;
}

.text-body ul {
    padding-left: 20px;
}

.text-body ul li {
    list-style: disc;
}

.text-body ol li {
    list-style: desc;
}

.custom-video-block {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    /* Можно убрать, если не нужно */
}

.custom-video-block .video-preview {
    position: relative;
    /* Чтобы оверлей позиционировался внутри */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    background-color: #000;
}

/* Темный оверлей */
.custom-video-block .video-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    transition: background-color 0.3s ease;
    z-index: 1;
}

/* При наведении делаем чуть темнее */
.custom-video-block:hover .video-preview::before {

    background-color: rgba(0, 0, 0, 0.4);
    /* 0.4 — степень затемнения (от 0 до 1) */
}

/* Поднимаем кнопку выше оверлея */
.custom-video-block .play-button {
    position: relative;
    z-index: 2;
    /* Больше, чем у оверлея */
    width: 80px;
    height: 80px;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.custom-video-block .play-button svg {
    width: 100%;
    height: 100%;
}

.custom-video-block:hover .play-button {
    opacity: 1;
    transform: scale(1.1);
}

.custom-video-block iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 1024px) {

    .about__hero {

        flex-direction: column-reverse;

    }



    .about-images {

        min-height: auto;

        width: 100%;

    }



    .img-large {

        height: auto;

        position: static;

        width: 100%;

    }



    .about__hero {

        gap: 30px;

    }



    .img-wrapper img {

        width: 100%;

        height: 400px;

    }



    .img-small {

        width: 100%;

        max-width: 180px;

        height: 200px;

        left: auto;

        right: 30px;



    }



    .img-wrapper.img-small img {

        height: 200px !important;

    }



    .dark-about-grid {

        grid-template-columns: 1fr;

        gap: 40px;



    }



    .top-image {

        position: relative;

        height: 372px;

        top: auto;

        max-width: 100%;

        right: auto;

        order: 1;

    }



    .dark-content {

        padding-bottom: 0;

        order: 2;

        position: relative;

    }



    .dark-images {

        order: 2;

        flex-direction: row;

        /* На планшете картинки можно в ряд */

        gap: 15px;

    }

}



@media (max-width: 900px) {

    .container {

        padding: 0 20px;

    }



    .container-pr-0--no-mob {

        padding-right: 20px !important;

    }



    .container-pl-0--no-mob {

        padding-left: 20px !important;

    }

}



@media (max-width: 768px) {
    .modal-header__title {
        font-size: 22px;
    }

    .modal-body .form-row-2-col {
        flex-direction: column;
    }

    .modal-body form {
        max-width: 100%;
    }

    .container {

        padding: 0 34px;

    }



    .img-small {

        height: 187px;

        max-width: 140px;

        right: 0;

    }



    .container-pr-0--no-mob {

        padding-right: 34px !important;

    }



    .container-pl-0--no-mob {

        padding-left: 34px !important;

    }



    section,

    .section {

        padding-bottom: 30px;

        padding-top: 30px;

    }

    .breadcrumbs a,
    .breadcrumbs span, .breadcrumbs .breadcrumb_last {
        font-size: 18px;
    }


}



@media (max-width: 576px) {

    .container {

        padding: 0 20px;

    }



    .is-provider-youtube iframe {

        height: 400px;

        border-radius: 20px;

    }



    .section-title {

        font-size: 32px;

    }



    .container-pr-0--no-mob {

        padding-right: 20px !important;

    }



    .container-pl-0--no-mob {

        padding-left: 20px !important;

    }



    h2 {

        font-size: 32px;

    }



    h3 {

        font-size: 20px;

    }



    .top-image {

        height: 372px;

    }



    ol.process-list>li {

        padding-left: 50px;

    }



    ol.process-list>li::before {

        width: 30px;

        height: 30px;

        font-size: 16px;

    }



    ol.process-list>li::after {

        left: 14px;

    }



    ol.process-list .process-title {

        font-size: 20px;

    }

}



@media (max-width: 360px) {

    .container {

        padding: 0 16px;

    }



    .container-pr-0--no-mob {

        padding-right: 16px !important;

    }



    .container-pl-0--no-mob {

        padding-left: 16px !important;

    }

}