/* Start:/local/templates/novatek/components/bitrix/news.detail/about_main_block/style.css?17684012648201*/
/* Основной контейнер */


section.about-block {
 padding-top:148px;
}

/* Заголовок */
.about-block__title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 40px;
    line-height: 1.2;
}

/* Сетка (Левая часть текст, Правая фото) */
.about-block__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr; /* Левая колонка чуть шире */
    gap: 40px;
    align-items: start;
}

/* Текст */
.about-block__text {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 60px;
}
.about-block__text p {
    margin-bottom: 20px;
}

/* Блок KPI */
.about-kpi {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.about-kpi__item {
    flex: 1;
    min-width: 140px;
}

.about-kpi__value {
    font-size: 32px; /* Размер цифр */
    font-weight: 900;
    color: #E31E24; /* Красный цвет Novatek */
    margin-bottom: 10px;
    white-space: nowrap;
}

.about-kpi__desc {
    font-size: 14px;
    line-height: 1.3;
    color: #333;
}

/* Правая колонка с картинками (Коллаж) */
.about-block__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    height: 100%;
}

.about-img-wrapper {
    overflow: hidden;
    border-radius: 10px; /* Скругление углов как на макете */
}

.about-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Логика для коллажа:
   Предполагаем 2 картинки.
   Вторая картинка (высокая) должна занимать всю высоту справа,
   а первая быть слева. Но на макете сложнее.

   Упрощенная реализация под макет:
   Делаем так, чтобы правая часть просто вмещала картинки.
   Если нужно точное соответствие макету (одна слева, одна высокая справа):
*/

.about-block__images {
    display: flex;
    flex-direction: row;
    height: 400px; /* Фиксируем высоту коллажа для красоты */
}

.about-img-small {
    width: 45%;
    margin-right: 15px;
}

.about-img-tall {
    width: 55%;
}


/* АДАПТИВНОСТЬ (Мобильные устройства) */
@media (max-width: 992px) {
    .about-block__grid {
        grid-template-columns: 1fr; /* Одна колонка */
    }

    .about-block__images {
        height: 300px;
        order: -1; /* На мобильном картинки можно поднять выше или оставить внизу */
        margin-bottom: 30px;
    }

    .about-kpi__value {
        font-size: 28px;
    }
}

@media (max-width: 600px) {
    .about-kpi {
        flex-direction: column;
        gap: 30px;
    }

    .about-block__title {
        font-size: 32px;
    }
}

/* --- Блок Галереи --- */

/* --- Основной блок --- */
.gallery-block {

    padding: 0 !important;
}

.gallery-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* --- Сетка (Grid) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    grid-template-rows: repeat(2, 250px); /* 2 ряда по 250px */
    gap: 20px;
    min-height: 520px; /* Чтобы блок не прыгал при смене страниц */
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #f0f0f0;
    /* Анимация появления */
    animation: fadeIn 0.4s ease-in-out;
}

.gallery-item.hidden {
    display: none; /* Скрываем элементы не на текущей странице */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

/* Ховер эффекты */
.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.gallery-overlay svg {
    /* Изначально чуть уменьшена для эффекта анимации */
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Эффект пружины */

    /* На всякий случай адаптив, если экран очень маленький */
    max-width: 60px;
    max-height: 60px;
}

/* При наведении на карточку иконка увеличивается до нормального размера */
.gallery-item:hover .gallery-overlay svg {
    transform: scale(1);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* --- Навигация внизу --- */
.gallery-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

/* Точки */
.gallery-dots {
    display: flex;
    gap: 16px;
}

.gallery-dot {
    width: 10px;
    height: 10px;
    background-color: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.gallery-dot.active {
    background-color: #2b5faa; /* Синий Novatek */
}

/* Стрелки переключения страниц */
.gallery-arrows {
    display: flex;
    gap: 15px;
}

.gallery-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #2b5faa;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.gallery-btn:hover {
    background-color: #1e4580;
}

.gallery-btn:disabled {
    background-color: #ccc;
    cursor: default;
}

/* --- Модальное окно (Lightbox) --- */
.lightbox {
    position: fixed;
    z-index: 9999;
    top: 0; left: 0; width: 100%; height: 100%;
    display: none; /* Скрыто по умолчанию */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.open {
    display: flex;
    opacity: 1;
}

.lightbox-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.lightbox-content {
    position: relative;
    z-index: 10000;
    max-width: 90%;
    max-height: 90%;
}

#lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    padding: 15px;
    cursor: pointer;
    font-size: 24px;
    border-radius: 5px;
    transition: background 0.3s;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.lightbox-nav.prev { left: -60px; }
.lightbox-nav.next { right: -60px; }

.lightbox-counter {
    text-align: center;
    color: #ccc;
    margin-top: 10px;
    font-size: 14px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Адаптив */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    }
}
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* 1 колонка */
    }
    .lightbox-nav { display: none; }
}

/* End */


/* Start:/local/templates/novatek/components/custom/feedback.ajax/inline/style.css?17695921533675*/
.tech-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;

    /* Скрыто по умолчанию */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;

    /* Центрирование содержимого */
    align-items: center;     /* Вертикально */
    justify-content: center; /* Горизонтально */
}

/* Когда окно активно, включаем Flexbox */
.tech-modal.active {
    display: flex;
    opacity: 1;
}

/* Оверлей (затемнение) */
.tech-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(21, 20, 22, 0.9);
    cursor: pointer;
    z-index: 1; /* Оверлей лежит под контентом */
}

/* Обертка контента */
.tech-modal-wrap {
    position: relative;
    z-index: 2; /* Контент лежит над оверлеем */

    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;

    /* Убрали margin-top: 222px и добавили авто-отступы на всякий случай */
    margin: auto;
}

/* Кнопка закрытия */
.tech-modal-close {
    position: absolute;
    top: -50px; /* Выносим над контентом */
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s;
}
.tech-modal-close:hover {
    transform: scale(1.1);
}
.tech-modal-wrap.form-wrap-style {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 0px 40px rgba(64, 97, 166, 0.4);

    width: 100%;
    max-width: 600px;

    /* 1. Задаем жесткое ограничение высоты относительно окна браузера */
    max-height: 90vh; /* Занимаем до 90% высоты экрана */
    height: auto;

    /* 2. Включаем Flex для самой обертки */
    display: flex;
    flex-direction: column;

    padding: 0;
    position: relative;
    z-index: 10;
    overflow: hidden;
}


/* Крестик */
.form-wrap-style .tech-modal-close svg path { stroke: #151416; }
.form-wrap-style .tech-modal-close {
    top: 24px;
    right: 24px;
    z-index: 20;
}
.tech-form-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
}
.tech-success-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    animation: fadeIn 0.4s ease;
}
.success-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* Градиентный круг как на скрине */
    background: linear-gradient(135deg, #4061A6 0%, #5BB2E8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(24px, 0.02853vh, 32px);
    box-shadow: 0 10px 20px rgba(64, 97, 166, 0.3);
}
@media (max-width: 480px) {
    .tech-modal-wrap.form-wrap-style {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .form-wrap-style .tech-modal-close {
        top: 15px;
        right: 15px; /* Крестик в углу */
    }
}

@media (max-width: 768px) {
    .tech-modal-wrap.form-wrap-style {
        padding: 24px;
        max-width: 90%;
        margin-top: 20px;
    }
}
/* End */
/* /local/templates/novatek/components/bitrix/news.detail/about_main_block/style.css?17684012648201 */
/* /local/templates/novatek/components/custom/feedback.ajax/inline/style.css?17695921533675 */