/* === plenkindom theme bundle (auto-generated, do not edit) === */

/* ---- style.css ---- */
body {
    font-family: 'Manrope', Arial, sans-serif;
    margin: 0;
    overflow-x: hidden;
    background-color: #eeeff2;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

h1, h2 {
    font-size: 3.4vh;
    font-weight: 700;
    margin: 0;
}
h1 span,
h2 span,
h3 span {
    display: block;
}

a {
    color: #c60000;
    font-weight: 500;
    transition: color 0.3s ease;
    text-decoration: none;
    /* font-size: 1.5vh !important; */
}

a:hover {
    /* color: #c60000; */
}
/* Тёмный фон-заглушка только для hero-слайдера (пока картинка не загрузилась) */
.slider-container .swiper-slide {
    background-color: #1D2327;
}
span {display:block;}
.marquee {
    background-color: #E31E24;
    color: white;
    overflow: hidden;
    position: relative;
    padding: 5px 0;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee__inner {
    display: flex;
    width: 200%; /* Делаем ширину контейнера в 2 раза больше */
    animation: marquee 10s linear infinite;
}

.marquee__content {
    flex: 0 0 50%; /* Задаем ширину контента как половину от общей ширины */
    padding-right: 50px; /* Расстояние между повторяющимся текстом */
    display: inline-block;
    white-space: nowrap;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
#secondary ul {
  list-style-type: none;

  padding: 0;
  }
#secondary ul li {
 margin-bottom:10px;
 font-size: 1.7vh !important;
 }


.widget-area {
    width: 18%;
    float: right;
    padding: 2% 0;
}

.widget {
    margin-bottom: 20px;
}

.widget-title {
    font-size: 2.5vh;
    margin-bottom: 10px;
    color: #333;
}

/* Медиа-запросы */
@media (max-width: 1200px) {
 .widget-area {
        width: 18%;
        float: none;
        padding: 10px;
    }
    .project-single {
        width: 100%; /* Увеличить основное содержание на всю ширину */
    }
}

@media (max-width: 1024px) {
    .widget-area {
        display: none;
    }

    h1, h2 {
        font-size: 2.5vh;
    }

    p {
        font-size: 1.5vh;
    }
}

@media (max-width: 768px) {
    .widget-area {
        width: 100%;
        padding: 0;
    }
    .slick-dots {
  bottom: -25px  !important;
}

    .widget {
        margin-bottom: 15px;
    }

    .container {
        padding: 0 10px;
    }
    .marquee__inner {
    display: flex;
    animation: marquee 9s linear infinite;
}

}

.base-page {
    width: 100%;
    padding: 0 2%;
    border-radius: 6px;
    /* box-shadow: 0px 0px 3px rgb(0 0 0 / 13%); */
}

.base-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px 0 0;
}

.base-description {
    margin-right: 10%;
}

.flexible .base-description {
    margin-right: 0;
}

.flexible .base-title {
    flex: 1;
    text-transform: uppercase;
    line-height: 1.4;
    max-width: 30%; /* Минимальная ширина блока */
    min-width: 20%;
}
.base-title span{
    display:block;

}

 

.flexible .base-divider {
    width: 0.5rem;
    height: 11vh!important;
    background-color: red;
    margin: 0 30px;
}

.base-title {
    flex: 1;
    text-transform: uppercase;
    line-height: 1.4;
}

.base h1 {
    font-size: 24px;
    color: #000000;
    margin: 0;
    text-transform: uppercase;
}

.base-divider {
    width: 1vh;
    height: 7vh;
    background-color: red;
    margin: 0 40px;
}

.base-description p {
    flex: 2;
    font-size: 2.1vh !important;
    color: #303030;
}

.certificates-list {
    width: 100%;
}

.certificates-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    width: 100%;
    margin: 0 auto;
}

.certificate-item {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.certificate-item:hover {
    box-shadow: 0px 7px 30px rgb(147 73 73 / 12%);
}

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

.certificate-title {
    font-size: 1.4vh;
    color: #333333;
    font-weight: 600;
    padding: 10px 10px 0;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 767px) {
    .base-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 5px;
    }
    
    .base-page {
        width: 100%;
        padding: 4%;
    }

    .base-divider, .flexible .base-divider {
        width: 100%;
        height: 4px!important;
        margin: 0;
    }

    .base-description, .flexible {
        max-width: 100%;
        width: 100%;
        margin: -10px 0 0;
    }
    
    .base-description p {
        font-size: 1.8vh !important;
    }

    .certificates-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .base-title, .flexible .base-title  {
        font-size: 1.4vh;
        color: #333333;
        font-weight: 600;
        min-width: 100%;
        padding: 0 5px;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 23000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.5s ease;
    justify-content: center;
    align-items: center;
}

.modal.show {
    opacity: 1;
}

.modal-content {
    width: 80%;
    max-width: 500px;
    max-height: 100%;
    overflow: hidden;
    transform: perspective(1000px) rotateX(-95deg) scale(0.6);
    opacity: 0;
    transition: transform 0.7s ease, opacity 0.7s ease;
}

.modal.show .modal-content {
    transform: perspective(800px) rotateX(0deg) scale(1);
    opacity: 1;
}

.modal-content img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    object-fit: contain;
}

.modal-close {
    position: absolute;
    top: 80px;
    right: 17px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
    color: #bbbbbb;
    text-decoration: none;
    cursor: pointer;
}

.letters-gallery {
    width: 100%;
}

.letters-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    width: 100%;
    margin: 0 auto;
}

.letter-item {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.letter-item:hover {
    box-shadow: 0px 7px 30px rgb(147 73 73 / 12%);
}

.letter-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 767px) {
    .letters-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

.videos-list {
    width: 100%;
}

.videos-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    margin: 0 auto;
}

.video-item {
    background-color: #ffffff;
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.video-item a {
    display: block;
    position: relative;
}

.video-thumbnail {
    width: 100%;
    height: 40vh;
    display: block;
    object-fit: cover;
    object-position: center;
}

.video-description p {
    font-size: 2vh;
    font-weight: 600;
    padding: 10px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    color: #E31E24;
    text-shadow: 2px 2px 14px rgb(0 0 0 / 36%);
    cursor: pointer;
    z-index: 10;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 767px) {
    .videos-items {
        grid-template-columns: 1fr;
    }

    .video-thumbnail {
        height: 26vh;
    }
}

.fancybox__content {
    overflow: hidden !important;
    border-radius: 8px;
}

.job-listing {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 30px 0;
    align-items: center;
    background: #f0f0f099;
    border-radius: 8px;
    padding: 20px;
    /* width: 100%; */
}

.job-item {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: flex-start;
}

.job-image {
    width: 40%;
}

.job-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.job-content {
    width: 60%;
}

.job-content h2 {
    font-size: 24px;
    margin-bottom: 15px;
}

.job-content p {
    font-size: 16px;
    line-height: 1.6;
}

.apply-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #E31E24;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
}

.apply-button:hover {
    background-color: #cc252a;
    color: white;
}

.project-container {
    display: flex;
    gap: 30px;
}

.project-single {
    flex: 1;
}

.top-section .base-header {
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .job-listing {
        padding: 10px;
    }

    .job-image {
        width: 100%;
    }

    .job-content {
        width: 100%;
    }

    .job-item {
        flex-direction: column;
        padding: 5px;
    }

    .apply-button {
        margin-top: 10px;
        font-weight: bold;
    }

    .job-listing {
        margin: 0;
    }
}
   /* Стили для кнопки меню */
            .menu-icon {
                width: 35px;
                height: 35px;
                background-color: #E31E24;
                display: flex;
                border-radius: 3px;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                position: relative;
                z-index: 1002;
            }

            .menu-icon div {
                width: 24px;
                height: 3px;
                background-color: #fff;
                position: absolute;
                transition: transform 0.4s ease, opacity 0.4s ease;
            }

            .menu-icon .bar1 {
                top: 6px;
            }

            .menu-icon .bar2 {
                top: 50%;
                transform: translateY(-110%);
            }

            .menu-icon .bar3 {
                bottom: 6px;
            }

            .menu-icon.change .bar1 {
                transform: rotate(45deg);
                top: 40%;
            }

            .menu-icon.change .bar2 {
                opacity: 0;
            }

            .menu-icon.change .bar3 {
                transform: rotate(-45deg);
                top: 40%;
            }

            /* Стили для модального окна меню */
            .unique-mobile-menu-overlay {
                position: fixed;
                top: 0;
                left: -100%;
                /* Начальное положение за пределами экрана */
                width: 75%;
                /* Ширина меню */
                height: 100vh;
                background-color: #141414;
                display: flex;
                justify-content: center;
                z-index: 1000;
                transition: left 0.5s ease;
                overflow-y: auto;
            }

            .unique-mobile-menu-overlay.show {
                left: 0;
                /* Перемещаем меню на экран */
            }

            .unique-mobile-menu-content {
                width: 100%;
                max-height: 100vh;
                background-color: #ffffff;
                box-sizing: border-box;
                overflow-y: auto;
                padding: 35px 0 97px;
            }

            .unique-nav-menu {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

            .unique-nav-menu li {
                margin: 0;
                list-style: none;
                border-bottom: 1px solid #e5e5e554;
            }

            .unique-nav-menu .sub-menu li a {
                margin: 0;
            }

            .unique-nav-menu li:last-child {
                border-bottom: none;
            }

            .unique-nav-menu a {
                color: #262626;
                font-size: 14px;
                text-transform: uppercase;
                text-decoration: none;
                display: block;
                padding-right: 40px;
                position: relative;
                padding: 12px 20px;
                transition: color 0.3s ease, background-color 0.3s ease;
            }

            .unique-nav-menu a:hover {
                color: #cc252a;
            }

            /* Стили для раскрытого меню */
            .unique-nav-menu .sub-menu {
                display: none;
                padding-left: 0;
                background-color: #f2f2f2;
            }

            .unique-nav-menu .menu-item-has-children > a::after {
                content: "\f105";
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                color: #cc252a;
                font-size: 22px;
                position: absolute;
                right: 25px;
                top: 50%;
                transform: translateY(-50%);
                transition: transform 0.3s ease, color 0.3s ease;
            }

            .unique-nav-menu .menu-item-has-children.open > a {
                background-color: #cc252a;
                color: #cc252a;
            }

            .unique-nav-menu .menu-item-has-children.open > a::after {
                content: "\f107";
                color: #ffffff;
            }

            .unique-nav-menu .menu-item-has-children.open .sub-menu {
                display: block;
            }
/* Добавляем плавный переход для фона и цвета текста */
.unique-nav-menu .menu-item-has-children > a {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.unique-nav-menu .menu-item-has-children.open > a {
    background-color: #cc252a;
    color: #ffffff;
}

/* Плавный переход для иконки */
.unique-nav-menu .menu-item-has-children > a::after {
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Переход для раскрытия подменю */
.unique-nav-menu .menu-item-has-children .sub-menu {
    /* max-height: 0; */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.unique-nav-menu .menu-item-has-children.open .sub-menu {
    /* max-height: 500px; */ /* Достаточное значение для полного раскрытия подменю */
}

            .unique-nav-menu .menu-item-has-children.open .sub-menu a {
                color: #292929;
            }

            .unique-nav-menu .menu-item-has-children.open .sub-menu a:hover {
                color: #cc252a;
            }

            /* Блокировка прокрутки */
            body.lock-scroll {
                overflow: hidden;
            }

            
   /* Карусель работ услуги */

           /* Основные стили карусели */
.slick-carousel {
 
    position: relative; /* Добавляем относительное позиционирование для родителя */
}
.raboty {
    margin: 5vh 0 15vh!important;
    text-align: center;
}
.raboty h2
{
    font-size: 4vh;
    text-transform: uppercase;
    margin: 30px 0;
}

.project-item {
    background-color: white;
    border: 1px solid #eaeaea;
    margin: 20px;
    text-align: center;
}

/* Изображения в карусели */
.project-item img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* === Slick карусели — единые стрелки и пагинация для всех слайдеров === */

/* Слайдер-контейнер с отступом для пагинации, чтобы точки не наезжали на следующий блок */
.slick-slider,
.slick-list { padding-bottom: 0; }
.slick-slider { margin-bottom: 48px; }

/* Стрелки — белые круглые кнопки с тёмной стрелкой */
.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    z-index: 10;
    font-size: 0 !important; /* скрыть текст "Предыдущий" / "Следующий" */
    color: transparent !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    line-height: 0;
}
.slick-prev { left: -12px !important; }
.slick-next { right: -12px !important; }

.slick-prev:hover,
.slick-next:hover {
    background: #e51c23 !important;
    box-shadow: 0 4px 16px rgba(229, 28, 35, 0.3);
}

.slick-prev:before,
.slick-next:before {
    content: '' !important;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #1a1a1a;
    border-right: 2px solid #1a1a1a;
    transition: border-color 0.2s ease;
    opacity: 1 !important;
    font-size: 0 !important;
    color: transparent !important;
}
.slick-prev:before { transform: translate(-40%, -50%) rotate(-135deg); }
.slick-next:before { transform: translate(-60%, -50%) rotate(45deg); }

.slick-prev:hover:before,
.slick-next:hover:before {
    border-color: #fff;
}

.slick-prev.slick-disabled,
.slick-next.slick-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Пагинация — точки/полоски снизу */
.slick-dots {
    position: absolute;
    bottom: -32px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.slick-dots li {
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    background: #000;            /* Чёрные неактивные */
    border-radius: 0;            /* Прямоугольные */
    transition: width 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.slick-dots li button {
    display: none !important;
}

.slick-dots li.slick-active {
    width: 25px;
    background: #e51c23;         /* Красная активная */
}

@media (max-width: 768px) {
    .project-item { margin: 10px; }
    .slick-prev, .slick-next { width: 38px !important; height: 38px !important; }
    .slick-prev { left: 4px !important; }
    .slick-next { right: 4px !important; }
    .raboty h2 { font-size: 3vh; text-transform: uppercase; }
}
   .slick-slide
{
   
    margin: 10px;
   
}

.filter-buttons {
    margin-bottom: 15px;

}

.filter-button {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 2.3vh;
    margin: 5px;
    border-radius: 4px;
}

.filter-button:hover,
.filter-button.active {
    background-color: #e51c23;
    color: #fff;
    border-color: #e51c23;
        border-radius: 4px;
}
.header-menu,
.mob_header {
    position: relative; /* По умолчанию - обычное позиционирование */
    width: 100%; /* Занимает всю ширину экрана */
    background-color: #fff; /* Фон, чтобы предотвратить прозрачность */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Небольшая тень для разделения */
    z-index: 10000; /* Устанавливаем высокий z-index для отображения поверх других элементов */
    transition: top 0.3s ease; /* Плавное перемещение при фиксировании */
}

/* Стили для фиксированного состояния */
.sticky {
    position: fixed; /* Фиксируем элемент */
    top: 0; /* Прикрепляем к верхней части экрана */
    left: 0; /* Прикрепляем к левой части экрана */
    width: 100%; /* Занимаем всю ширину экрана */
    z-index: 10000; /* Высокий z-index для отображения поверх других элементов */
}
.fancybox__carousel.is-draggable .fancybox__slide,.fancybox__carousel.is-draggable .fancybox__slide .fancybox__content {
    cursor: move;
    cursor: auto;
}
.fancybox__container   
{z-index: 10050;}


    .map-container {
        position: relative;
        height: 444px; /* Установите высоту в соответствии с вашим дизайном */
    }

    .map-overlay {
        position: absolute;
        top: 0;
        
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 10; /* Этот слой будет поверх карты и блокировать интерактивность */
    }
    .custom-page-block {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    flex-direction: row;
    align-items: flex-end;
}

.custom-page-block {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: flex-end;
}

.page-item {
    width: calc(25% - 20px);
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.page-thumbnail {
    position: relative;
    height: 35vh;
    overflow: hidden;
    border-radius: 5px;
}

.page-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 5px;
}

.page-thumbnail::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgb(0 0 0 / 92%), rgba(0, 0, 0, 0));
    border-radius: 5px;
    z-index: 1;
}

.page-title h3 {
    position: absolute;
    bottom: 0;
    left: 20px;
    z-index: 2;
    color: #fff;
    font-size: 2.8vh;
    text-transform: none;
    text-align:left;
    font-weight: 400;
}

/* Адаптивные медиазапросы для изменения количества колонок */

/* На больших экранах показываем 4 колонки */
@media (min-width: 1200px) {
    .page-item {
        width: calc(25% - 20px);
    }

}

/* На средних экранах показываем 3 колонки */
@media (min-width: 768px) and (max-width: 1199px) {
    .page-item {
        width: calc(33.33% - 20px);
    }
      .page-thumbnail {
 
    height: 25vh;
 
}
.page-title h3 {
 
    font-size: 2vh;
     bottom: 20px;
    left: 10px;
}
}

/* На экранах меньше 768px показываем 2 колонки */
@media (max-width: 767px) {
    .page-item {
        width: calc(50% - 20px);
    }
    .page-thumbnail {
 
    height: 20vh;
 
}
.page-title h3 {
 font-size: 1.6vh;
 bottom: 0px;
 left: 10px;
}
}
.post-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    height: auto
}

.post-item {
    display: flex;
    justify-content: space-between;
    background: #f9f9f9;
    overflow: hidden;
border-radius: 5px;
    transition: transform .3s ease,box-shadow .3s ease
}

.post-item:hover {
   
    box-shadow: 0px 8px 30px rgb(128 59 59/10%)
}

.post-inner {
    display: flex;
    width: 100%
}

.post-image {
    flex: 1;
    max-width: 25%;
    overflow: hidden;
    max-height: 250px; /* Пример ограничения по высоте */
}


.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.post-content {
    flex: 2;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center
}
.post-content a{
     font-weight: 700;
    color: #e60000;
   text-decoration:underline;
}
.stat  h2 {
    font-size: 4vh;
    text-align:center;
    text-transform: uppercase;
    margin: 30px 0;
}
.post-content h3, .post-content h2 {
    font-size: clamp(16px,2vw,22px);
    font-weight: 700;
    color: #e60000;
    text-transform:inherit;
    text-align: left;
    margin: 0 0 10px;
    /* Фикс высоты заголовка — всегда 2 строки */
    line-height: 1.3;
    min-height: calc(1.3em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-content p {
    font-size: clamp(12px,2vw,16px);
    color: #333;
    line-height: 1.4;
    margin: 0;
    /* Фикс высоты текста — всегда 3 строки */
    min-height: calc(1.4em * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    font-size: clamp(14px,2vw,20px);
    color: #e60000;
    text-decoration: underline;
    align-self: flex-start;
    transition: color .3s
}

.read-more:hover {
    color: #a00000
}
.arhiv_progect {
    padding: clamp(10px, 4%, 45px);
}
.arhiv_progect h1 {
    font-size: 4vh;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .post-grid {
        grid-template-columns: 1fr;
    }

    .post-item {
        flex-direction: column;
    }

    .post-image {
        width: 100%; /* Изображение на всю ширину */
        max-height: 300px; /* Ограничение высоты */
    }

    .post-content {
        padding: 15px; /* Уменьшить внутренние отступы */
    }
        .arhiv_progect h1 {
    font-size: 4vh;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
              margin-top: 10px;
}
}

.contain h1 {
    color: #c60000;
    font-size: 12vw;
    line-height: 1;
}

.contain {
    text-align: center;
    padding: 4vw;
    /* height:100vh; */
    background-color: #fff
}

.contain p {
    font-size: 2vw
}

.contain a {
    background-color: #d9232d;
    color: #fff;
    padding: 10px 20px;
    font-size: clamp(1vw, 1.1vw + 0.2vw, 2.1vw);
    min-width: 300px;
    margin-top: 20px;
    border: none;
    line-height: 3;
    border-radius: 1vw;
    cursor: pointer;
    width: auto
}
@media (max-width: 768px) {
    .contain h1 {
 
    font-size: 20vh;
    
}

   .contain p {
        font-size: 6vw
    }
    .contain {
     
             padding: 10vw 6vw;
    }

 

    .contain a {
     
        font-size: 3vw;
       
    }
}

/* ---- css/custom-page-styles.css ---- */
/* Базовые стили заголовков и текста */
.flexible-content p {
    font-size: 2.1vh;
}
.flexible-content ol li, .flexible-content ul li {
    font-size: 2.1vh;
    margin-bottom:10px
}


.flexible-content h2, .flexible-content h3 {
    font-size: 4vh;
    /* text-transform: uppercase; */
}

/* Стили для блока с двумя колонками */
 .two-column-block {
    display: flex;
    padding: 2%;
    background-size: contain!important;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: -2.2%;
    margin-right: -2.2%;
    gap: 2.4vh;
    border-radius: 50px;
    box-sizing: border-box;
}

.two-column-block .column {
    width: 50%;
   
}

.two-column-block .column-1 img, 
.two-column-block .column-1 video {
    max-width: 100%;
    height: auto;
    border-radius: 25px;
}

.two-column-block .column-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Стили для кнопок */
.button-container {
    display: flex;
}

.button-container .btn {
    font-size: 1.9vh;
    padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 24px);
    text-decoration: none;
    border: 2px solid;
    border-radius: 6px;
    display: inline-block;
    margin-top: 10px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    width: auto;
    max-width: none;
    box-sizing: border-box;
    white-space: nowrap;
}

.button-container .btn:hover {
    opacity: 0.8;
}

/* Стили для блока с текстом и изображением */
.text-image-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
    margin: 8vh 0;
}

.text-image-block .text-column {
    flex: 1;
    /* padding-right: 20px; */
}

.text-image-block .image-column {
    flex: 1;
    text-align: right;
}

.text-image-block .image-column img {
    max-width: 100%;
    height: clamp(300px, 40vw, 1000px);
    border-radius: 10px;
    object-fit: cover;
}

/* Порядок для варианта "Изображение слева, текст справа" */
.text-image-block.image-left {
    flex-direction: row-reverse;
}

.image-left .image-column {
    flex: 1;
    text-align: left;
}

/* Если изображения нет, текст занимает всю ширину */
.text-image-block.no-image .text-column {
    flex: 1;
    padding-right: 0;
    width: 100%;
}

.text-image-block.no-image .image-column {
    display: none;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    .flexible-content .two-column-block {
        flex-direction: column;
    }
    
    .two-column-block .column {
        width: 100%;
        padding: 0;
    }
    
    .flexible-content .two-column-block {
        /* padding: 10% 2%; */
        margin-left: -4.3%;
        margin-right: -4.3%;
    }
    
    .flexible-content h2, .flexible-content h3 {
        font-size: 2.8vh;
    }
    
    .text-image-block {
        flex-direction: column;
        gap: 10px;
    }

    .text-image-block .text-column,
    .text-image-block .image-column {
        width: 100%;
        padding: 0;
    }
}

/* Стили для блока с преимуществами */
.advantages-block {
    padding: 7% 2%;
    border-radius: 40px;
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    margin-left: -2.2%;
    margin-right: -2.2%;
    position: relative;
    margin-top: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.advantages-block h2 {
    font-size: 6vh;
    margin-bottom: 20px;
    max-width: 67vw;
    z-index: 10;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    z-index: 10;
    width: 100%;
}
.advantage-item  img {
 max-width: 60px;
 height: auto;
 object-fit: contain; /* Сохранение пропорций изображения */
 display: block; /* Устранение лишних отступов */
}
.advantages-text {
    text-align:center;
    /* max-width: 400px; */
    /* padding: 0 5%; */
}
.advantage-item {
    flex: 1 1 200px;
    padding: 7%;
    display: flex;
    gap: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    align-content: flex-start;
    align-items: center;
}

.advantage-item h3 {
    font-size: 2.5vh;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1;
}

.advantage-item p {
    font-size: 1.8vh;
    margin: 10px 0 0;
}

.corner-image {
    position: absolute;
    top: -7.08rem;
    left: 0;
    width: 17vw;
    height: auto;
    z-index: 1;
}

@media (max-width: 768px) {
    .corner-image {
        top: -2.7rem;
        width: 30vw;
    }
    .advantages-text {
    text-align:left;
}
    
    .advantage-item p {
        font-size: 1.5vh;
    }
    .advantage-item {
    flex: 1 1 200px;
    padding: 20px;
    display: flex;
    gap: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
}
    .advantage-item img {
    max-width: 40px;

}
    
    .advantages-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
    
    .advantages-block {
        padding: 14% 5%;
        margin-left: -4.3%;
        margin-right: -4.3%;
        gap: 10px;
    }

    .advantages-block h2 {
        font-size: 3.4vh;
        max-width: 80%;
        z-index: 2000;
    }

    .text-image-block {
        flex-direction: column;
        gap: 10px;
    }
    .text-image-block.image-left {
    flex-direction: column;
}

    .text-image-block .text-column,
    .text-image-block .image-column {
        width: 100%;
        padding: 0;
    }
}

/* Стили для блока с текстом, заголовком и видео */
.text-video-block {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 8vh 0;
    flex-direction: row; /* Изначальное направление для видео */
}

.text-video-block.video-left {
    flex-direction: row; /* Видео слева, текст справа */
}

.text-video-block.video-right {
    flex-direction: row-reverse; /* Видео справа, текст слева */
}

.text-video-block .text-column {
    flex: 1;
    padding: 10px;
}

.text-video-block .text-column h2 {
    /* font-size: 2.5vh; */
    margin-bottom: 10px;
}

.text-video-block .video-column {
    flex: 1;
}

.text-video-block .video-column video {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.two-column-block {
    display: flex;
    gap: 20px;
    padding: 20px;
    /* margin: 0 -2%; */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex-direction: row;
}

.two-column-block .column-1 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.two-column-block .column-2 {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #ffffff;
}

.two-column-block .column-2 ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.two-column-block .column-2 ul li {
    position: relative;
    padding-left: 30px; /* Увеличиваем отступ для размещения галочки */
    font-size: 2vh;
    font-weight: 600;
    margin-bottom: 10px;
}
.two-column-block .column-2 p {

    font-size: 2vh;
     font-weight: 600;
}

.two-column-block .column-2 ul li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 50%; /* Центрирование по вертикали */
    transform: translateY(-50%); /* Сдвиг галочки вверх на 50% для идеального центрирования */
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    .text-video-block {
        flex-direction: column;
        gap: 10px;
    }
    .two-column-block {flex-direction: column;margin-left: -4.3%;margin-right: -4.3%;}
    .text-video-block .text-column,
    .text-video-block .video-column {
        
        width: 100%;
        padding: 0;
    }
    .text-video-block.video-left {
        flex-direction: column; /* Видео слева, текст справа */
    }
    
    .text-video-block.video-right {
        flex-direction: column; /* Видео справа, текст слева */
    }
}
.project-details p {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Обрезать после двух строк */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* Установите нужную ширину */
}
.contact-block {
    display: flex;
    padding: 20px;
    border-radius: 15px;
    margin-top: 20px;
    gap: 20px;
}

.cont-info {
    flex: 1;
    font-size: 16px;
    line-height: 1.5;
}

.cont-info p {
    margin: 5px 0;
    font-size: 2.6vh;
    color: white; /* Белый цвет для текста */
}

.cont-info p strong {
    font-weight: bold;
    margin-top: 20px;
    display: block;
}

.cont-info a {
    color: white; /* Белый цвет для ссылок */
    text-decoration: none;
}

.cont-info a:hover {
    text-decoration: underline;
}



/* Настройки для мобильных устройств */
@media (max-width: 768px) {
    .contact-block {
        flex-direction: column;
    }
}

/* ---- css/header.css ---- */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 2%;
    background-color: #fff;
}


.header-content .logo {
    display: flex;
    justify-content: flex-start;
}

.header-content .header-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 40%; /* Ограничивает ширину центрального блока */
    padding: 0 10px; /* Добавляет небольшие отступы */
}

.header-content .phone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}


.header-content .logo img {
    max-width: 43vh;
    height: auto;
}

.header-content .column {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.header-info {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирование содержимого колонки */
}

.icon-title {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Выравнивание содержимого по левому краю */
    width: 100%; /* Ширина 100%, чтобы использовать justify-content */
    margin-bottom: 10px; /* Добавление отступа между заголовком и текстом */
}

.icon-title img {
    width: 200px; /* Ширина иконки */
    height: auto;
    margin-right: 10px; /* Отступ справа */
}

.icont{
    margin: 0;
    font-weight: bold;
    font-size: 2.3vh;
    text-align: left;
}

.header-info p {
    margin: 0;
    text-align: left; /* Выравнивание текста слева */
    width: 100%; /* Ширина 100%, чтобы использовать text-align */
    font-size: 0.8vw;
}
.contact-info {
    text-align: left;
}

.contact-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.contact-info p,
.contact-info a {
    margin: 2px 0;
    font-size: 2.3vh;
    font-weight: 600;
}

.contact-info a.download-link, .phone a.callback-link {
    color: #E31E24;
    font-weight: bold;
}

.phone {
    text-align: right;
}

.phone-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Выравнивание элементов по левому краю */
}

.phone-content div {
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* Отступ между строками телефонов */
}

.phone img {
    vertical-align: middle;
    margin-right: 10px;
    width: 2.5vh; /* уменьшение размера иконок телефонов */
    height: auto;
}

.phone p,
.phone a {
    margin: 2px 0;
    font-size: 2.3vh;
    font-weight: 600;
}

.phone .callback-link {
    align-self: flex-end; /* Выровнять ссылку по правой стороне */
}
.mob_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #d1d1d1;
    padding: 10px;
}

.logo_mob {
    display: flex;
    align-items: center;
}

.logo_mob img {
    height: 20px;
    margin-right: 10px;
}

.logo_mob div {
    display: flex;
    flex-direction: column;
}

.logo_mob div div:first-child {
    font-weight: bold;
}

.contact_mob {
    text-align: right;
    font-size: 14px;
}

.contact_mob a {
    color: red;
    text-decoration: none;
}

.menu-icon {
    width: 30px;
    height: 30px;
    background-color: red;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.menu-icon div {
    width: 20px;
    height: 2px;
    background-color: white;
    margin: 2px 0;
}

@media (max-width: 768px) {
    .logo_dicr {
        font-size: 1.04vh;
    }
    .logo_name {
        font-size: 1.7vh;
    }
    .download-link {
        font-size: 1.4vh;
    }
    .contact_mob {
        font-size: 1.6vh;
        font-weight: 600;
    }
    .logo_mob img {
        height: 4.9vh;
    }
}

/* Mobile Header */
.mob_header {
    display: none; /* Скрываем мобильную шапку по умолчанию */
}

/* Desktop Header */
.header-desk {
    display: block; /* Показываем десктопную шапку по умолчанию */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .mob_header {
        display: flex; /* Показываем мобильную шапку на мобильных устройствах */
    }
    .header-desk {
        display: none; /* Скрываем десктопную шапку на мобильных устройствах */
    }
}

/* Адаптивность для десктопов */
@media (min-width: 769px) {
    .mob_header {
        display: none; /* Скрываем мобильную шапку на десктопах */
    }
    .header-desk {
        display: block; /* Показываем десктопную шапку на десктопах */
        /* background-color: #EEEFF2; */
    }
}



/* ---- css/header_menu.css ---- */
.header-menu {
    background-color: #0a0a0a;
    color: #f2f2f2;
    padding: 10px 1.5%;
    text-align: center;
    font-size: 2vh;
    width: 100%; /* Добавлено для растяжения по ширине экрана */
    box-sizing: border-box;
    /* overflow-x: hidden; */
}

.header-menu a {
    color: #fff;
    text-decoration: none;
    padding: 0 15px;
}


/* Основные стили для меню */
.nav-menu {
    list-style: none; /* Убираем точки */
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; /* Растягивание пунктов меню по ширине */
    /* background-color: #333; */
    position: relative;
}

.nav-menu li {
    position: relative;
}

 

.nav-menu a {
    color: #e6e6e6; /* Цвет ссылок */
    padding: 10px 15px;
    display: block;
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #E31E24; /* Цвет ссылок при наведении */
}

/* Стили для выпадающего меню */
.nav-menu li ul {
    display: none; /* Скрываем выпадающее меню по умолчанию */
    position: absolute;
    z-index: 4000;
    top: 100%;
    left: 400%; /* Центрирование по горизонтали */
    transform: translateX(-50%);
    background-color: #0a0a0a;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    width: 110vh; /* Ширина выпадающего меню */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки */
    text-align: left;
}

.nav-menu li:hover > ul {
    display: grid;
    opacity: 1;
    visibility: visible;
    justify-content: center; /* Центрирование подменю */
}

.nav-menu li ul li {
    padding: 10px;
}

.nav-menu li ul li a {
    padding: 5px 10px;
    color: #e6e6e6;
    display: block;
}

.nav-menu li ul li a:hover {
    color: #E31E24;
}

.nav-menu .has-submenu::after {
    content: "▼"; /* Добавляем треугольник */
    color: red;
    margin-left: 5px;
}



/* ---- css/footer.css ---- */
footer {
    background-color: #0A0A0A;
    color: #cacaca;
    padding: 2%;
    width: 100%;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
   
  
    gap: 60px;
    flex-direction: row;
}

.footer-column {
    flex: 1;
}

.contact-phone {
    font-weight: 600;
    margin: 0 0 5px !important;
    font-size: 2vh  !important;
}

.footer-column-contact {
    text-align: left;
}

.footer-column-logo img {
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    font-size: 1.8vh;
}

.footer-menu li {
    margin-bottom: 10px;
}

.footer-menu li a {
    color: #cacaca;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-menu li a:hover {
    color: #e31e24;
}

.footer-column-contact p,
.footer-column-contact a {
    margin: 0 0 10px;
    font-size: 1.9vh;
}

.footer-bottom {
    text-align: left;
    font-size: 1.9vh;
    margin-top: 40px;
}

.footer-bottom p,
.footer-bottom a {
    margin: 2px;
    color: #cacaca;
}

.footer-bottom a {
    text-decoration: underline;
    color: #e31e24;
}

.footer-column-logo-button {
    display: flex;
    justify-content: flex-end;
}

.logo-button-wrapper {
    text-align: center;
}

.logo-button-wrapper img {
    display: block;
    margin: 0 auto;
    max-width: 28vh;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e31e24;
    color: #fff;
    text-decoration: none;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    text-align: right;
    font-size: 1.8vh;
    font-weight: bold;
}

.button:hover {
    background-color: #d21d21;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    .footer-content {
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-column {
        width: 50%;
        text-align: left;
    }

    .footer-column-contact {
        text-align: right;
        order: 1;
    }

    .footer-column-menu1 {
        order: 2;
    }

    .footer-column-menu2, .footer-column-logo-button{
        display: none; /* Скрываем третий блок и футер на мобильных устройствах */
    }
    .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* margin: 0 3%; */
    /* padding: 20px 0; */
    gap: 60px;
    flex-direction: row-reverse;
}
    footer {
    background-color: #0A0A0A;
    color: #cacaca;
    padding: 4%;
    width: 100%;
}
}
.custom-modal-content 
.wrapper-box {
    background-color: white;
    border-radius: 40px;
    display: flex;
    padding: 0;
    margin: 0;
    align-items: center;
    position: relative; /* Устанавливаем позиционирование контейнера относительно его содержимого */
}
 .custom-modal-content  .form-block
{
   padding: 0;
}
 .custom-modal-content  .submit-button {
    background-color: #d9232d;
    color: white;
    padding: 10px 20px;
    font-size: clamp(1vh, 1.1vh + 1vw, 2.1vh);
    min-width: auto;
     width: 100%;
    margin-top: 20px;
    border: none;
    line-height: 3;
    border-radius: 15px;
    cursor: pointer;
    display: inline-block;
    
}
.wrapper-box {
    background-color: white;
    border-radius: 40px;
    display: flex;
    padding: 4%;
    margin: 2% 2%  7%;
    align-items: center;
    position: relative; /* Устанавливаем позиционирование контейнера относительно его содержимого */
}

.decor-image {
    position: absolute; /* Абсолютное позиционирование */
    bottom: -70px; /* Отступ снизу */
    right: -25px; /* Отступ справа */
    max-width: 200px; /* Ограничиваем максимальную ширину изображения */
    height: auto; /* Автоматическая высота для сохранения пропорций */
}

.info-block {
    flex: 1;
    padding-bottom: 40px;
    /* border-right: 1px solid #ddd; */
}

.info-title {
    font-size: 4vh;

    margin-bottom: 20px;
}

.contact-item {
       font-size: clamp(1.4vh, 1.5vh + 1vw, 3vh);
    color: #d9232d;
    margin: 10px 0;
}

.contact-link {
    text-decoration:;
    color: #d9232d;
}

.form-block {
    flex: 1;
    padding-left: 50px;
}

.form-text {
      font-size: clamp(1.4vh, 1.5vh + 1vw, 3vh);
      color: #262626;
      font-weight: 600;
      margin-bottom: 30px;
}

.contact-form {
    /* display: flex; */
    flex-direction: column;
}

.form-input {
    margin-bottom: 14px;
    padding: 10px 15px;
      font-size: clamp(1vh, 1.1vh + 1vw, 2.1vh);
    line-height: 3;
    width: 100%;
    border: 1px solid #dddddd5e;
    border-radius: 15px;
    background: #eeeff254;
}

.submit-button {
    background-color: #d9232d;
    color: white;
    padding: 10px 20px; /* Устанавливаем отступы для кнопки */
     font-size: clamp(1vh, 1.1vh + 1vw, 2.1vh);
    min-width: 300px;
    margin-top: 20px;
    border: none;
    line-height: 3;
    border-radius: 15px;
    cursor: pointer;
    display: inline-block; /* Отображение кнопки как блочного элемента в строке */
    width: auto; /* Ширина устанавливается автоматически, чтобы не растягиваться */
}

.submit-button:hover {
    background-color: #850106;
}
@media (max-width: 768px) {
.wrapper-box {
    
    border-radius: 40px;
    display: flex;
    padding: 10% 5%;
    margin: 4%;
    align-items: center;
    flex-direction: column;
}
.form-block {
   padding-left: 0;
   text-align: center;
}
.submit-button {
    width: 100%;
    display: block;
}
.decor-image {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 0; /* Отступ снизу */
    right: 0; /* Отступ справа */
    top: -20px;
    max-width: 130px; /* Ограничиваем максимальную ширину изображения */
    height: auto; /* Автоматическая высота для сохранения пропорций */
}
    .footer-column-contact p, .footer-column-contact a {
    margin: 0 0 10px;
    font-size: 1.7vh;
}

    
.contact-phone {
    font-weight: 600;
    margin: 0 0 5px !important;
    font-size: 1.9vh  !important;
}
}
/* Стили для модального окна */
.custom-modal {
    position: fixed;
    z-index: 10000; /* Увеличенный z-index для отображения поверх всех элементов */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Запретить прокрутку внутри модального окна */
    background-color: rgba(0, 0, 0, 0.5);
    display: flex; /* Flexbox для центрирования */
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
    opacity: 0; /* Скрыто по умолчанию */
    visibility: hidden; /* Невидимо по умолчанию */
    transition: opacity 0.3s ease; /* Переход для плавного отображения */
}

/* Начальное состояние для модального окна */
.custom-modal-content {
    background-color: #fefefe;
    padding: 40px;
    border: 1px solid #888;
    width: 90%;
    max-width: 800px;
    border-radius: 30px;
    position: relative;
    opacity: 0;
    transform: perspective(1000px) rotateX(-30deg) translateY(-200px); /* Начальное положение с наклоном и выше экрана */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Быстрая анимация */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень для контраста */
}

/* Появление модального окна */
.custom-modal.show {
    opacity: 1; /* Показываем фон */
    visibility: visible; /* Делаем видимым */
}

.custom-modal.show .custom-modal-content {
    animation: slideIn 0.3s ease-out forwards; /* Быстрая анимация появления */
}

/* Анимация появления окна */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(-30deg) translateY(-200px);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0) translateY(0);
    }
}

/* Анимация закрытия окна */
.custom-modal.hide .custom-modal-content {
    animation: slideOut 0.3s ease-out forwards; /* Быстрая анимация закрытия */
}

@keyframes slideOut {
    0% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0) translateY(0);
    }
    100% {
        opacity: 0;
        transform: perspective(1000px) rotateX(-30deg) translateY(-200px);
    }
}

.custom-close-button {
    color: #ff0000;
    float: right;
    font-size: 48px;
    font-weight: bold;
    cursor: pointer;
    top: -5px;
    right: 15px;
    position: absolute;
}

.custom-close-button:hover,
.custom-close-button:focus {
    color: black;
    text-decoration: none;
}
 .mobile-contact-bar {
        display: none;
    }
@media only screen and (max-width: 768px) {
    .mobile-contact-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #212121;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px 0 12px;
        z-index: 8000;
    }

    .master-call-button {
        background-color: #c9383d;
        color: white;
        padding: 8px 14px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 2vh;
    }

    .contact-icon {
        color: white;
        font-size: 2.4vh;
        padding: 8px;
        width: 5vh;
        height: 5vh;
        border-radius: 50%;
        background-color: #c9383d;
        display: flex;
        justify-content: center;
        align-items: center;
    }
  .contact-icon_wats {
        color: white;
        font-size: 2.4vh;
        padding: 8px;
        width: 5vh;
        height: 5vh;
        border-radius: 50%;
        background-color: #089237;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .contact-icon .fa-envelope {
        color: #ffffff;
    }

    .contact-icon .fa-whatsapp {
        color: #ffffff;
    }

    .contact-icon .fa-phone-alt {
        color: #ffffff;
    }
}

.otzya {
    width:100%;
    max-width:750px;
    height:800px;
    padding-top:20px;
    overflow:hidden;
    position:relative;
}
/* ---- css/slider.css ---- */
/* Общие стили */
.slider-wrapper {
    position: relative;
    margin-top: 15px;  /* Отступ сверху */
    margin-bottom: 15px; /* Отступ снизу */
}

.slider-container {
    width: 100%;
    height: 400px; /* Высота слайдера */
    position: relative;
    overflow-x: hidden; /* Предотвращение горизонтальной прокрутки */
}

.swiper-pagination {
    text-align: center;
    margin-top: 10px; /* Отступ сверху для пагинации */
    position: relative; /* Позиционирование внутри wrapper */
}

.swiper-slide {
    background-size: cover;
    background-position: center;
    position: relative;
    width: 60%;
    opacity: 0.9;
    transition: opacity 0.5s ease, transform 0.5s ease;
    cursor: grab; /* Добавляем курсор "рука" при наведении */
}

/* Размытие боковых слайдов — только для hero-слайдера на главной (.slider-container),
   иначе применяется ко всем .swiper-slide на сайте, включая миниатюры и галереи проектов. */
.slider-container .swiper-slide:not(.swiper-slide-active) {
    filter: blur(3px);
    transform: scale(0.9);
}

.slider-container .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    border-radius: 6px;
}

.slide-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    /* background-color: rgba(0, 0, 0, 0.5); */ /* Закомментирован фон */
    padding: 10px;
    max-width: 500px;
    border-radius: 5px;
}

.slide-content a{
    font-size: 2rem;
    margin-bottom: 10px;
      margin-top: 0;
    font-weight: 700;
     color: white;
    text-transform: uppercase;
}
 
.slide-content p {
    font-size: 1.3rem;
    margin: 20px 0;
}

 .slider-container .button {
    background-color: #e51c23;
    color: #ffffff;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 1rem!important;
    border-radius: 4px;
    text-decoration: none;
    }

/* Пагинация hero-слайдера — единый стиль с slick (чёрные квадраты, красный активный) */
.slider-wrapper .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background-color: #000 !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    margin: 0 5px !important;
    transition: width 0.3s ease, background-color 0.3s ease !important;
}

.slider-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #e51c23 !important;
    width: 25px !important;
    height: 8px !important;
    transform: none !important;
}

/* Курсор "рука" при клике */
.swiper-slide:active {
    cursor: grabbing;
}

@media (max-width: 768px) {
    .slider-container {
        height: 350px; /* Уменьшаем высоту слайдера на планшетах */
        overflow-x: hidden; /* Предотвращение горизонтальной прокрутки */
    }

    .swiper-slide {
        width: 95%; /* Увеличиваем ширину центрального слайда до 95% */
    }

    .slide-content a {
        font-size: 1.2rem; /* Уменьшаем размер заголовков */
    }

    .slide-content p {
        font-size: 0.85rem; /* Уменьшаем размер текста */
    }

    .slide-content {
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        padding: 20px 25px;
        max-width: 500px;
        border-radius: 5px;
    }

    .slider-container .button {
        background-color: #e51c23;
        color: white;
        padding: 10px 20px;
        font-weight: 400;
        font-size: 0.9rem!important;
        text-decoration: none;
    }
}
/* ---- css/projects-catalog.css ---- */
.project-catalog {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 2%;
}

.project-item {
    background-color: white;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.project-item:hover {
    box-shadow: 0px 8px 30px rgb(128 59 59 / 10%);
}

.project-item img {
    width: 100%;
    height: 32vh;
    object-fit: cover;
    margin-bottom: 10px;
}

.project-content {
    padding: 15px;
}

.project-item h3 {
    color: #e51c23;
    font-size: 2.2vh;
    margin: 0 0 10px;
    /* min-height: 30px; */
    text-transform: initial;
        white-space: nowrap;      /* Устанавливаем текст в один ряд */
    overflow: hidden;         /* Скрываем лишний текст */
    text-overflow: ellipsis;  /* Добавляем многоточие, если текст обрезается */
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .project-catalog {
        grid-template-columns: 1fr 1fr;
        padding: 4%;
    }
}

@media (max-width: 480px) {
    .project-catalog {
        grid-template-columns: 1fr;
    }
}


.project-details p {
    font-size: 1.5vh!important; /* Устанавливаем нужный размер */
    margin: 3px 0;
    color: #333;
    text-align: left;
 
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Обрезать после двух строк */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* Установите нужную ширину */
 
}
.project-details {
min-height: 105px;
}

.project-content {
    display: flex;
    flex-direction: column;
}

.project-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #e80000;
    margin-bottom: 15px;
    width: 100%;
    text-align: left;
}

.project-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    align-content: flex-start;
    flex-direction: row;
}

.project-details {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.project-info-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    min-width: 130px;
}

.ploshchad {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 16px;
        display: block;
}

.project-info-right .more-link {
      display: inline-block;
    background-color: transparent;
    color: #e51c23;
    border: 1px solid #e51c23;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

 

.project-info-right .cost {
    display: block;
   
    margin-top: 10px;
        margin: 0 0 10px;
    font-size: 2vh;
    font-weight: 600;
}
/* ---- css/works-catalog.css ---- */
.works-catalog {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px
}

.work-item {
    background-color: #fff;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-direction: column
}

.work-item:hover {
    box-shadow: 0px 8px 30px rgb(128 59 59/10%)
}

.work-item img {
    width: 100%;
    height: 33vh;
    object-fit: cover;
    margin-bottom: 10px
}

.work-content {
    padding: 15px;
    text-align: left
}

.work-item h3 {
    color: #e51c23;
    font-size: 2vh;
    margin: 0;
    padding: 5px 15px
}

.work-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

.work-info {
    line-height: 1.5;
    text-align: left
}

.work-info p {
    margin: 0 0 5px;
    font-size: 1.5vh;
    line-height: 1.4;
    color: #404040
}

.work-cost {
    font-size: 1.8vh;
    text-align: right;
    min-width: 140px
}

.work-cost p {
    margin: 0 0 10px;
    font-size: 2vh;
    font-weight: 600
}

.work-more {
    display: inline-block;
    background-color: transparent;
    color: #e51c23;
    border: 1px solid #e51c23;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .3s ease
}

@media (max-width: 768px) {
    .works-catalog {
        grid-template-columns:1fr 1fr
    }

    .works-catalog {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 20px;
        padding: 4%
    }
}

@media (max-width: 480px) {
    .works-catalog {
        grid-template-columns:1fr
    }
}

.work-info p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px
}

.call-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.call-modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    display: flex;
    max-width: 380px;
    text-align: center;
    position: relative;
    box-shadow: 0px 4px 15px rgba(0,0,0,.2);
    animation: fadeIn .3s ease-in-out;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
    align-items: stretch
}

.call-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 34px;
    cursor: pointer;
    color: #666
}

.call-btn {
    display: block;
    padding: 18px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
    border: none
}

.call-btn.phone {
    background: #23a455;
    display: inline;
    color: #fff;
    text-align: center
}

.call-modal-title {
    font-size: 20px;
    font-weight: 700
}

.call-btn.whatsapp {
    background: #25d366;
    color: #fff
}

.cancel-btn {
    background: #fff;
    border: 2px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    min-width: 180px;
    margin: 0 auto;
    font-size: 16px
}

.callback-section p {
    margin: .5vw;
    font-size: 13px
}

input {
    color: #1b1b1b;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #33333373
}

.submit-btn {
    background: #a03337;
    border: none;
    color: #fff;
    padding: 10px 12px;
    border-radius: 4px
}

#callbackForm {
    margin-top: 2vw
}

.callback-section {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 10px;
    margin-top: 30px
}

.callback-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #555
}

/* ---- css/single-work.css ---- */
 
.work-container {
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: 2%;
}

/* Сайдбар */
.sidebar-area {
    width: 20%; /* Сайдбар занимает 20% ширины */
    padding-right: 20px;
    box-sizing: border-box;
}

/* Основной контейнер для записи */
.work-single {
    width: 80%; /* Основной контент занимает 80% ширины */
    padding: 2%;
    display: flex;
    flex-direction: column;
}

.work-single h2 {
    font-size: 2.3vh;
    padding: 0;
    margin: 0;
}

/* Верхняя секция: левая и правая колонки */
.top-section {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    /* border: 1px solid #92929240; */
    padding: 2%;
    align-content: center;
    align-items: flex-start;
    background: #fff;
    border-radius: 6px;
    /* box-shadow: 0px 0px 3px rgb(0 0 0 / 13%); */
}

/* Галерея и главное изображение */
.work-gallery {
    display: flex;
    width: 40%;
    /* max-height: 60vh; */
    align-content: space-around;
}

.main-image {
    flex: 1;
    width: 100%;
    height: 400px; /* Фиксированная высота для контейнера изображения */
    position: relative;
    margin-left: 20px; /* Отступ от миниатюр */
    overflow: hidden; /* Скрываем выходящее за границы содержимое */
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Растягиваем изображение по контейнеру */
    object-position: center; /* Центрируем изображение */
}

/* Галерея миниатюр */
.work-container .gallery-thumbnails {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 400px;
    justify-content: flex-start;
}

.work-container .gallery-thumbnail {
    cursor: pointer;
    width: 10vh;
    height: 10vh;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.work-container .gallery-thumbnail:hover {
    border-color: #333;
}

/* Правая колонка */
.work-container .right-column {
    flex: 1;
    padding-left: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 350px;
    gap: 10px;
}

/* Нижняя секция с описанием */
.work-container .bottom-section {
    width: 100%;
    border-radius: 6px;
    /* box-shadow: 0px 0px 3px rgb(0 0 0 / 13%); */
    padding: 2%;
    background: #fff;
}

/* Заголовок записи */
.work-container.work-content h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Контейнер для характеристик */
.work-characteristics {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.characteristics-column {
    flex: 1;
    margin-right: 20px;
}

.characteristics-column:last-child {
    margin-right: 0;
}

.characteristics-column p {
    margin: 10px 0; 
}

/* Контейнер с ценой и кнопкой */
.work-container .price-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f5f5f5;
       border-radius: 6px;
    box-shadow: 0px 0px 30px rgb(135 76 76 / 8%);
}
    margin-top: 10px;
}

.price-description p {
    font-size: 2.2vh;
    font-weight: bold;
    color: #161616;
    margin: 0;
}

.work-container .price-info {
    text-align: right;
}

.price-value {
    font-size: 3vh!important;
    font-weight: bold;
    margin: 0;
}

.btn-call-master {
    display: inline-block;
    margin-top: 10px;
    
    padding: 10px 20px;
    background-color: #E31E24;
    font-size: 1.8vh;
    color: #fff;  
    border-radius: 4px;
   
}
    text-decoration: none;
}

.btn-call-master:hover {
    background-color: #d62828;
    color: #fff;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .work-container {
        flex-direction: column;
        padding: 2%;
    }
.top-section, .bottom-section  {
   
    padding: 4%;
 
}
    .work-single {
        width: 100%;
    }

    .work-container .sidebar-area {
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
    }

    .top-section {
        flex-direction: column;
    }

    .work-gallery {
        width: 100%;
        margin-bottom: 20px;
    }

  .work-container  .main-image {
        margin-left: 0;
        height: 400px; /* На мобильных устройствах изображение возвращается к авто */
    }

  .work-container  .right-column {
        padding-left: 0;
    }

    .work-characteristics {
        /* flex-direction: column; */
    }

    .characteristics-column {
        margin-right: 0;
    }

    .price-container {
        flex-direction: column;
        text-align: center;
    }

    .price-info {
        margin-top: 15px;
    }

    .price-value {
        font-size: 20px;
    }
}
.work-characteristics-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 16px;
}

.work-characteristics-table th,
.work-characteristics-table td {
    padding: 10px;
    border: 1px solid #d4d4d4;
    text-align: left;
}

.work-characteristics-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

/* Дефолтное отображение для ПК: две колонки */
.work-characteristics {
    display: flex;
}

.work-characteristics-table {
    display: none;
}

/* Мобильное отображение: скрываем колонки и показываем таблицу */
@media (max-width: 768px) {
    .work-characteristics {
        display: none;
    }
  .price-info {
        text-align: center;
        margin-top: 5px;
    }
.work-gallery {
    display: flex;
    /* max-height: 40vh; */
    height: 400px;
    align-content: space-around;
    flex-direction: column-reverse;
    /* overflow: hidden; */
}
   
.work-container .gallery-thumbnails {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: auto;
    justify-content: flex-start;
}
    .price-value {
        font-size: 20px;
        margin: 0 auto;
    }
    .work-characteristics-table {
        display: table;
        
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        font-size: 16px;
    }
    .work-characteristics-table tr {
    border-bottom: 1px solid #d4d4d4; /* Добавляем нижний бордер только для строк */
}

    .work-characteristics-table th,
    .work-characteristics-table td {
        padding: 10px;
            border: none; /* Убираем все бордеры */
        text-align: left;
    }

    .work-characteristics-table th {
        background-color: #f5f5f5;
        font-weight: bold;
    }
}

/* ---- css/single-project.css ---- */
/* === Страница одного проекта (single-projects.php) === */

.project-page {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    padding: clamp(16px, 3vw, 36px);
    max-width: 1400px;
    margin: 0 auto;
}

.project-page__sidebar {
    align-self: start;
    background: #fff;
    border-radius: 16px;
    padding: 18px 18px 12px;
    box-shadow: 0 2px 16px rgba(20, 20, 20, 0.06);
}

/* Перебиваем правила .widget-area из style.css (width:18%, float:right, display:none на 1024px) */
.project-page__sidebar .widget-area {
    width: 100%;
    float: none;
    padding: 0;
    display: block;
}

.project-page__sidebar .widget-title,
.project-page__sidebar h2 {
    margin: 0 0 12px;
    padding: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    border-bottom: 2px solid #e51c23;
}

.project-page__sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.project-page__sidebar li {
    margin: 0;
}

.project-page__sidebar a {
    display: block;
    padding: 8px 10px;
    color: #444;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
    word-break: normal;
    overflow-wrap: anywhere;
}

.project-page__sidebar a:hover {
    background: #fff5f5;
    color: #e51c23;
    padding-left: 14px;
}

.project-page__sidebar a:focus-visible {
    outline: 2px solid #e51c23;
    outline-offset: 2px;
}

.project-page__main {
    background: #fff;
    border-radius: 16px;
    padding: clamp(16px, 2.5vw, 32px);
    box-shadow: 0 2px 16px rgba(20, 20, 20, 0.06);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: min-content auto;
    grid-template-areas:
        "title       title"
        "slider      info";
    column-gap: 28px;
    row-gap: 16px;
    min-width: 0;
    align-items: start;
}

.project-page__title {
    grid-area: title;
    margin: 0;
    padding: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.25;
    color: #1a1a1a;
    text-transform: none;
}

.project-page__description {
    grid-area: info;
    align-self: stretch;
}

/* ---- Слайдер галереи ---- */
.project-gallery-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f3f4;
}

.project-gallery-slider .swiper-wrapper,
.project-gallery-slider .swiper-slide { height: 100%; }

.project-gallery-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f3f4;
}

.project-gallery-slider__slide-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.project-gallery-slider__slide-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Стрелки */
.project-gallery-slider .swiper-button-prev,
.project-gallery-slider .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    margin: 0;
    color: #1a1a1a;
}

.project-gallery-slider .swiper-button-prev::after,
.project-gallery-slider .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
    color: inherit;
}

.project-gallery-slider .swiper-button-prev { left: 12px; }
.project-gallery-slider .swiper-button-next { right: 12px; }

.project-gallery-slider .swiper-button-prev:hover,
.project-gallery-slider .swiper-button-next:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.project-gallery-slider .swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

/* Пагинация (точки) */
.project-gallery-slider .swiper-pagination {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    z-index: 4;
    text-align: center;
}

.project-gallery-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #fff;
    opacity: 0.65;
    border-radius: 0;
    margin: 0 5px !important;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.project-gallery-slider .swiper-pagination-bullet-active {
    background: #e51c23;
    opacity: 1;
    width: 25px;
    border-radius: 0;
}

/* Контейнер галереи (главный слайдер + миниатюры) */
.project-gallery {
    grid-area: slider;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Миниатюры под главным слайдером */
.project-gallery-thumbs {
    width: 100%;
    overflow: hidden;
}

.project-gallery-thumbs .swiper-wrapper {
    display: flex;
}

.project-gallery-thumbs__slide {
    width: 96px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: outline-color 0.2s ease, transform 0.2s ease;
    outline: 2px solid transparent;
    outline-offset: 0;
    box-sizing: border-box;
}

.project-gallery-thumbs__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-gallery-thumbs__slide:hover {
    outline-color: rgba(229, 28, 35, 0.4);
}

.project-gallery-thumbs__slide.swiper-slide-thumb-active {
    outline-color: #e51c23;
}

/* ---- Описание ---- */
.project-page__description {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.project-specs {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-specs__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
    background: #fafafa;
    border-radius: 8px;
}

.project-specs__row dt {
    margin: 0;
    font-size: 13px;
    color: #555;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.project-specs__row dt i {
    color: #e51c23;
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.project-specs__row dd {
    margin: 0;
    font-size: 15px;
    color: #1a1a1a;
    font-weight: 500;
    line-height: 1.4;
}

.project-specs__row dd a {
    color: #e51c23;
    text-decoration: none;
    font-weight: 600;
}

.project-specs__row dd a:hover { text-decoration: underline; }

.project-page__content {
    color: #444;
    font-size: 15px;
    line-height: 1.6;
}

.project-page__content p { margin: 0 0 12px; }

/* ---- CTA ---- */
.project-page__cta {
    margin-top: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    background: #f7f7f8;
    border-radius: 10px;
    border: 1px solid #ececec;
}

.project-page__cta p {
    margin: 0;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}

.project-page__cta .btn-call-master {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: #e51c23;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
}

.project-page__cta .btn-call-master:hover {
    background: #c2161d;
    transform: translateY(-1px);
}

/* ---- Адаптив ---- */
/* На планшете двухколонник внутри main сворачивается в одну колонку */
@media (max-width: 900px) {
    .project-page__main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "slider"
            "info";
    }
}

/* Сайдбар уезжает под main */
@media (max-width: 1024px) {
    .project-page {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .project-page__sidebar { order: 2; }
    .project-page__main    { order: 1; }
}

@media (max-width: 600px) {
    .project-page { padding: 12px; }
    .project-page__main {
        padding: 16px;
    }
    .project-gallery-slider .swiper-button-prev,
    .project-gallery-slider .swiper-button-next {
        width: 38px;
        height: 38px;
    }
}

/* === Блок "Работы с этой плёнкой" — между галереей и описанием, на всю ширину === */
.related-works {
    margin: 0 0 20px;
    padding: 20px 24px;
    background: #fff;
    border-radius: 6px;
}

.related-works__title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: none;
    letter-spacing: 0;
}

.related-works__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.related-works__card {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: #fafafa;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease, transform 0.2s ease;
    min-width: 0;
}

.related-works__card:hover {
    background: #fff5f5;
    transform: translateY(-1px);
}

.related-works__image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #eee;
}

.related-works__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-works__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.related-works__name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-works__card:hover .related-works__name { color: #e51c23; }

.related-works__meta {
    margin: 0;
    font-size: 12px;
    color: #888;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-works__link {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: #e51c23;
    font-weight: 600;
    transition: color 0.2s ease, transform 0.2s ease;
}

.related-works__card:hover .related-works__link {
    color: #c2161d;
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .related-works__grid {
        grid-template-columns: 1fr;
    }
}

/* === Страница плёнки: краткое описание и блок описания === */
.work-page__short {
    margin: 0;
    padding: 12px 14px;
    background: #fff5f5;
    border-radius: 8px;
    color: #444;
    font-size: 15px;
    line-height: 1.5;
}

.work-page__price p strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
    color: #e51c23;
}

.work-description {
    padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 36px);
    background: #fff;
}

.work-description__inner {
    max-width: 1400px;
    margin: 0 auto;
}

.work-description__inner h2 {
    margin: 0 0 16px;
    font-size: clamp(20px, 2.4vw, 26px);
    color: #1a1a1a;
    text-transform: none;
}

.work-description__content {
    color: #333;
    font-size: 15px;
    line-height: 1.6;
}

.work-description__content p { margin: 0 0 12px; }
.work-description__content p:last-child { margin-bottom: 0; }

/* === Секция "Другие работы" === */

.other-projects {
    padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 36px) 32px;
    background: #f7f7f8;
}

.other-projects__inner {
    max-width: 1400px;
    margin: 0 auto;
}

.other-projects__title {
    margin: 0 0 20px;
    font-size: clamp(20px, 2.4vw, 28px);
    color: #1a1a1a;
    text-transform: none;
    text-align: center;
}

/* Обёртка слайдера — НЕ обрезает: стрелки могут торчать наружу */
.other-projects-slider-wrap {
    position: relative;
    padding: 0 56px; /* место под стрелки слева и справа */
}

.other-projects-slider {
    position: relative;
    overflow: hidden;
    padding: 4px;
}

.other-projects-slider .swiper-wrapper {
    align-items: stretch;
}

.other-projects-slider .swiper-slide {
    height: auto;
}

.other-projects__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(20, 20, 20, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.other-projects__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(128, 59, 59, 0.1);
}

.other-projects__image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f3f4;
    text-decoration: none;
}

.other-projects__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.other-projects__card:hover .other-projects__image img {
    transform: scale(1.05);
}

.other-projects__body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.other-projects__name-link {
    text-decoration: none;
    display: block;
}

.other-projects__name {
    margin: 0 0 12px;
    font-size: 1.1em;
    font-weight: 700;
    color: #e80000;
    line-height: 1.25;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.other-projects__details {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
}

.other-projects__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.other-projects__info p {
    margin: 0;
    font-size: 13px;
    color: #333;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.other-projects__label {
    color: #888;
    font-weight: 500;
}

.other-projects__cost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 10px;
    min-width: 100px;
}

.other-projects__area {
    font-size: 1.4em;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.other-projects__more {
    display: inline-block;
    background: transparent;
    color: #e51c23;
    border: 1px solid #e51c23;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.other-projects__more:hover {
    background: #e51c23;
    color: #fff;
}

/* Стрелки — позиционированы относительно обёртки, лежат ВНЕ слайдера */
.other-projects-slider-wrap > .swiper-button-prev,
.other-projects-slider-wrap > .swiper-button-next {
    position: absolute;
    top: calc(50% - 22px); /* минус половина пагинации */
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    z-index: 5;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    color: #1a1a1a;
    cursor: pointer;
    margin: 0;
}

.other-projects-slider-wrap > .swiper-button-prev { left: 4px; }
.other-projects-slider-wrap > .swiper-button-next { right: 4px; }

.other-projects-slider-wrap > .swiper-button-prev:hover,
.other-projects-slider-wrap > .swiper-button-next:hover {
    background: #e51c23;
    color: #fff;
    box-shadow: 0 4px 16px rgba(229, 28, 35, 0.3);
}

.other-projects-slider-wrap > .swiper-button-prev::after,
.other-projects-slider-wrap > .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
    color: inherit;
}

.other-projects-slider-wrap > .swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Пагинация */
.other-projects-slider-wrap > .swiper-pagination {
    position: relative;
    margin-top: 16px;
    text-align: center;
}

.other-projects-slider-wrap .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #000;
    opacity: 1;
    border-radius: 0;
    margin: 0 5px !important;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.other-projects-slider-wrap .swiper-pagination-bullet-active {
    background: #e51c23;
    width: 25px;
    border-radius: 0;
}

/* ---- css/utilities.css ---- */
/* === Утилитарные классы (бывшие inline-стили) === */

/* Видео в адаптивном контейнере */
.video-cover {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.video-bg {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.video-fg {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* Flex / позиционирование */
.flex-1       { flex: 1; }
.pos-relative { position: relative; }

/* Контейнер Яндекс-карты */
.map-container {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
}

/* Скрытый pixel для трекера / noscript */
.visually-hidden {
    position: absolute;
    left: -9999px;
}

/* Динамические цвета — задаются через CSS-переменные на элементе */
.advantage-item {
    background-color: var(--bg, transparent);
}

.advantages-block {
    background-color: var(--bg, transparent);
    background-image: var(--bg-image, none);
    background-size: var(--bg-size, cover);
    background-position: var(--bg-pos, center);
    background-repeat: no-repeat;
    color: var(--text, inherit);
}

.contact-block {
    background-color: var(--bg, transparent);
    color: var(--text, inherit);
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}
.contact-block a {
    color: inherit; /* наследует от --text родителя */
}

.two-column-block {
    background-color: var(--block-bg, transparent);
    background-image: var(--block-bg-image, none);
    color: var(--block-text, inherit);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 40px;
}

/* Применяется только когда передан CSS-var --btn-bg (из flexible-блока):
   без fallback'а пропуск переменной = invalid value, исходные стили кнопки не перетираются. */
.btn-call-master.form_b[style*="--btn-bg"] {
    background-color: var(--btn-bg);
}
.btn-call-master.form_b[style*="--btn-text"] {
    color: var(--btn-text);
}
.btn-call-master.form_b[style*="--btn-border"] {
    border-color: var(--btn-border);
}

/* ---- css/city-switcher.css ---- */
/* === Переключатель городов === */
.city-switcher {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    z-index: 50;
}

/* В шапке: переключатель — отдельной строкой над логотипом (десктоп + моб) */
.header-content .logo,
.logo_mob {
    flex-direction: column;
    align-items: flex-start;
}
.logo.column .city-switcher,
.logo_mob .city-switcher {
    display: block;
    margin-bottom: 6px;
    align-self: flex-start;
}

.city-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: #1a1a1a;
    white-space: nowrap;
    line-height: 1.2;
    transition: color 0.15s ease;
}

.city-switcher__toggle:hover,
.city-switcher__toggle[aria-expanded="true"] {
    color: #e51c23;
}

.city-switcher__label {
    color: #888;
}

.city-switcher__current {
    font-weight: 700;
    color: #e51c23;
    border-bottom: 1px dashed #e51c23;
}

.city-switcher__arrow {
    color: #e51c23;
    font-size: 10px;
    transition: transform 0.2s ease;
    line-height: 1;
}

.city-switcher__toggle[aria-expanded="true"] .city-switcher__arrow {
    transform: rotate(180deg);
}

.city-switcher__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.city-switcher.is-open .city-switcher__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.city-switcher__item {
    margin: 0;
}

.city-switcher__item a {
    display: block;
    padding: 8px 14px;
    color: #1a1a1a;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.city-switcher__item a:hover {
    background: #fff5f5;
    color: #e51c23;
}

.city-switcher__item.is-active a {
    background: #e51c23;
    color: #fff;
    font-weight: 600;
    pointer-events: none;
}