.top-banner__logo {
    filter: invert(1);
}

.innovations-section {
    width: 100%;
    /* Занимает всю доступную ширину */
    max-width: 1231px;
    /* Ограничиваем максимальную ширину как в оригинале */
    margin: 0 auto;
    /* Центрируем блок на странице */
    text-align: start;
    /* Центрируем текст заголовка */
    font-size: 25px;
    color: #000;
    font-family: Inter;
    padding: 20px 0;
    /* Добавляем небольшой внутренний отступ сверху/снизу */
}

/* .location-map-container {


    border-radius: 10px;
} */
#map>ymaps {
    border-radius: 10px;
    overflow: hidden;
}

.innovations-title {
    text-transform: uppercase;
    margin-bottom: 30px;
    /* Отступ снизу для заголовка, чтобы отделить от карточек */
    font-size: inherit;
    /* Использует размер шрифта родителя, если не переопределено */
    color: inherit;
    /* Использует цвет родителя */
}


.innovation-cards-grid {
    display: grid;
    /* Используем CSS Grid для раскладки карточек */
    grid-template-columns: repeat(2, 600px);
    /* Две колонки, каждая шириной 600px */
    gap: 20px 31px;
    /* Вертикальный отступ 20px, горизонтальный 31px */
    justify-content: center;
    /* Центрирует сетку в innovations-section, если innovations-section шире */
    width: fit-content;
    /* Ширина сетки по содержимому (2 * 600px + 31px) */
    margin: 0 auto;
    /* Центрирует саму сетку, если ее ширина меньше max-width родителя */

    /* Эти свойства из оригинального .group больше не нужны или перенесены */
    /* position: absolute; top: 60px; left: 0px; width: 1231px; height: 320px; */

    font-size: 16px;
    /* Размер шрифта для текста в карточках */
    color: #fff;
    /* Цвет текста в карточках */
    font-family: Roboto;
    /* Шрифт для текста в карточках */
}

.innovation-card {
    border-radius: 10px;
    background-color: var(--bg-accent-alt);
    width: 600px;
    /* Фиксированная ширина карточки */
    height: 150px;
    /* Фиксированная высота карточки */
    overflow: hidden;
    /* Обрезаем содержимое, выходящее за пределы карточки */
    position: relative;
    /* Важно: для абсолютного позиционирования содержимого внутри карточки */

    /* Эти свойства из оригинальных .div2, .div4, .div6, .div8 больше не нужны */
    /* position: absolute; top: ...; left: ...; */
}

.innovation-card-image {
    position: absolute;
    /* Позиционируем изображение абсолютно относительно .innovation-card */
    top: 0px;
    left: 0px;
    width: 100%;
    /* Изображение занимает всю ширину карточки */
    height: 100%;
    /* Изображение занимает всю высоту карточки */
    object-fit: cover;
    /* Изображение покрывает всю область, обрезая лишнее, если нужно */
}

.innovation-card-content {
    position: absolute;
    /* Позиционируем текст абсолютно относительно .innovation-card */
    top: 0px;
    left: 21px;
    display: flex;
    align-items: center;
    /* Выравниваем текст по центру по вертикали */
    width: calc(100% - 42px);
    /* Ширина контента с учетом отступов по бокам (21px слева + 21px справа) */
    height: 100%;
    /* Высота контента занимает всю высоту карточки */
    text-align: left;
    /* Переопределяем text-align, чтобы текст в карточке был слева */
}

.innovation-card-text {
    width: 100%;
}

.innovation-card-list {
    margin: 0;
    font-family: 'Inter';
    font-size: inherit;
    padding-left: 21px;
    /* Отступ для маркеров списка */
}

/* Для мобильных устройств (пример) */
@media (max-width: 1250px) {

    /* Если ширина экрана меньше, чем две карточки + отступы */
    .innovation-cards-grid {
        grid-template-columns: 1fr;
        /* Одна колонка, карточки занимают всю доступную ширину */
        max-width: 600px;
        /* Ограничиваем ширину сетки для одной карточки */
        gap: 20px;
        /* Только вертикальный отступ */
    }

    .innovation-card {
        width: 100%;
        /* Карточка занимает всю ширину колонки */
        height: auto;
        /* Высота карточки адаптируется к содержимому */
    }

    .innovation-card-image {
        position: relative;
        /* Изображение теперь в потоке документа */
        height: 150px;
        /* Фиксированная высота для изображения, чтобы оно не становилось слишком высоким */
        width: 100%;
    }

    .innovation-card-content {
        position: relative;
        /* Контент теперь в потоке документа */
        height: auto;
        /* Высота контента адаптируется */
        padding: 20px 21px;
        /* Добавляем отступы сверху/снизу */
        width: 100%;
        /* Сбрасываем calc, так как padding уже есть */
        box-sizing: border-box;
        /* Учитываем padding в ширине */
    }

    .innovation-card-list {
        padding-left: 20px;
        /* Отступ для списка */
    }
}

@media (max-width: 600px) {

    /* Еще меньше экраны, для изображений с текстом */
    .innovation-card-image {
        object-position: top;
        /* Можно настроить, чтобы показать верхнюю часть изображения */
    }
}

/* Renamed .div to .company-info__name */
.company-info__name {
    /* position: absolute; top: 7.84px; left: 0px; -- REMOVED */
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 30px;
}

/* The .icon class is general and not related to absolute positioning issues in the original snippet, so it remains. */
.icon {
    width: 25px;
    position: relative;
    /* Kept as it might be needed for specific icon internal styling */
    height: 25px;
}

/* The .div1 class is unused in the provided HTML, so it remains as is. */
.div1 {
    position: relative;
}


/* Renamed .group-parent to .company-info__platform-status */
.company-info__platform-status {
    /* position: absolute; top: 0px; left: 330px; -- REMOVED */
    position: relative;
    /* Establishes a positioning context for its absolutely positioned children */
    width: 247px;
    height: 50px;
    margin-left: 2em;
    font-size: 12px;
    /* No top/left are needed here anymore, as form__item's flexbox handles its position */
}

/* Renamed .rectangle-parent to .company-info__platform-status-badge-wrapper */
.company-info__platform-status-badge-wrapper {}

/* Renamed .group-child to .company-info__platform-status-background */
.company-info__platform-status-background {
    position: absolute;
    /* Positions relative to .company-info__platform-status */
    top: 12px;
    /* Adjusted to be relative to .company-info__platform-status */
    left: 2px;
    /* Adjusted to be relative to .company-info__platform-status */
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #146eb4;
    box-sizing: border-box;
    width: 247px;
    height: 27px;
}

/* Renamed .group-item to .company-info__platform-status-icon-circle */
.company-info__platform-status-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* Positions relative to .company-info__platform-status */
    top: 0px;
    /* Adjusted to be relative to .company-info__platform-status */
    left: 0px;
    /* Adjusted to be relative to .company-info__platform-status */
    border-radius: 50%;
    background-color: #146eb4;
    border: 1px solid #146eb4;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
}

/* Renamed .group-inner to .company-info__platform-status-icon */
.company-info__platform-status-icon {
    position: absolute;
    /* Positions relative to .company-info__platform-status */
    top: 13px;
    /* Stays the same, as it was originally relative to .group-parent */
    left: 13px;
    /* Stays the same, as it was originally relative to .group-parent */
    width: 24px;
    height: 24px;
}

/* Renamed .div2 to .company-info__platform-status-text */
.company-info__platform-status-text {
    position: absolute;
    /* Positions relative to .company-info__platform-status */
    top: 17px;
    /* Stays the same, as it was originally relative to .group-parent */
    left: 52px;
    /* Stays the same, as it was originally relative to .group-parent */
}

.center_div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.block_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.block-3 {
    width: 100%;
    position: relative;

    text-align: center;
    font-size: 16px;
    color: #000;
    font-family: Inter;
}

.group-icon {
    width: 320px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 112px;
    object-fit: contain;
}

.h_2_block_3 {
    width: 659px;
    position: relative;
    font-size: 16px;
    font-family: Inter;
    color: #000;
    text-align: center;
    display: inline-block;
}



.stats-container {

    width: 100%;
    /* Чтобы блок занимал всю доступную ширину до max-width */
    box-sizing: border-box;
    /* Учитываем padding в общей ширине */
    text-align: center;
    /* Центрируем содержимое по умолчанию, особенно для нижнего ряда */
}

.stats-row {
    display: flex;
    justify-content: space-around;
    /* Распределяем элементы по ширине с равными отступами */
    gap: 30px;
    /* Отступ между элементами */
    flex-wrap: wrap;
    /* Позволяет элементам переноситься на новую строку при уменьшении экрана */
}

.top-row {
    margin-bottom: 50px;
    /* Отступ между верхней и нижней строкой */
}

.stats-item {
    flex: 1;
    /* Элементы будут занимать равное пространство */
    min-width: 200px;
    /* Минимальная ширина для каждого элемента, чтобы они не были слишком узкими */
    padding: 10px;
    text-align: center;
    /* Центрируем текст внутри каждого элемента */
}

.stats-number {
    font-size: 4.5em;
    /* Большой размер шрифта для чисел */
    font-weight: 700;
    /* Жирный шрифт */
    color: #146EB4;
    /* Синий цвет, как на изображении */
    line-height: 1.1;
    /* Межстрочный интервал для чисел */
    margin-bottom: 10px;
    /* Отступ под числом */
}

.stats-description {
    font-size: 16px;
    /* Размер шрифта для описания */
    color: #333;
    /* Темно-серый цвет для текста */
    line-height: 1.4;
    /* Межстрочный интервал для описания */

    margin: 0 auto;
    /* Центрируем описание, если оно уже чем max-width */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .stats-row {
        flex-direction: column;
        /* Элементы выстраиваются в столбец */
        align-items: center;
        /* Центрируем элементы по горизонтали, когда они в столбец */
    }

    .stats-item {
        min-width: unset;
        /* Снимаем минимальную ширину */
        width: 100%;
        /* Занимаем всю доступную ширину */
        margin-bottom: 30px;
        /* Отступ между элементами в столбце */
    }

    .stats-item:last-child {
        margin-bottom: 0;
        /* Убираем отступ у последнего элемента, чтобы не было лишнего пространства */
    }

    .stats-number {
        font-size: 3.5em;
        /* Чуть меньше размер чисел на мобильных */
    }
}

.slider-wrapper {
    max-width: 1200px;
    /* Максимальная ширина всего слайдера */
    /* width: 95%; */
    /* Адаптивная ширина */
    margin: 40px 0;
    /* Центрируем и добавляем отступы */
    position: relative;
    /* Для позиционирования прогресс-бара, если нужно */
    padding: 2em;
    border-radius: 10px;
    background: #F2F2F2;
}

/* Стили для самого контейнера Slick Slider */
/*  */

/* Общие стили для карточки */
.card {
    background-color: #fff;
    border-radius: 12px;
    /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); */
    margin: 0 15px;
    /* Отступы между карточками, управляются Slick */
    /* Slick управляет шириной карточек, основываясь на slidesToShow */
    overflow: hidden;
    /* Чтобы радиус скругления работал для содержимого */
}

.card:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

}

.card-image-wrapper {
    position: relative;
    height: 200px;
    /* Высота области изображения */
    margin-bottom: 25px;
    /* Отступ между изображением и заголовком */
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Обрезает изображение, сохраняя пропорции */
    display: block;
    border-top-left-radius: 12px;
    /* Скругление верхних углов изображения */
    border-top-right-radius: 12px;
    z-index: 2;
    /* Над фоновой фигурой */
    position: relative;
}

.image-bg-shape {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    right: -50px;
    /* Смещение фигуры */
    top: -50px;
    /* Смещение фигуры */
    z-index: 1;
    /* Под изображением */
}

.image-bg-shape.blue {
    background-color: #007bff;
    /* Синий цвет, как на изображении */
}

.image-bg-shape.yellow {
    background-color: #ffc107;
    /* Желтый цвет */
}

.card-title {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    margin-top: 0;
    margin-left: 20px;
}

.card-specs {
    list-style: none;
    padding: 0 20px;
    margin: 0;
}

.card-specs li {
    font-size: 0.95em;
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 10px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #000;
    padding: 10px;
}

.card-specs li:last-child {
    margin-bottom: 0;
}

.card-specs span {
    display: block;
    /* Заголовок характеристики на отдельной строке */
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 10px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #000;
}

/* Скрываем стрелки и точки Slick, если они не нужны */
/* .slick-prev,
.slick-next {
    display: none !important;
} */

/* .slick-dots {
    display: none !important;
} */

/* Индикатор прогресса слайдера */
.slider-progress-bar {
    width: 300px;
    /* Ширина всей полоски прогресса */
    height: 6px;
    background-color: #e0e0e0;
    /* Цвет неактивной части */
    border-radius: 3px;
    margin: 0 auto;
    /* Центрируем полоску */
    position: relative;
    overflow: hidden;
    /* Обрезает индикатор если он выходит за границы */
}

.progress-indicator {
    position: absolute;
    height: 100%;
    width: 80px;
    /* Примерная ширина активной части, подбирается */
    background-color: #007bff;
    /* Цвет активной части */
    border-radius: 3px;
    left: 0;
    transform: translateX(0);
    /* Начальная позиция */
    transition: transform 0.2s ease-out;
    /* Плавное движение индикатора */
}

/* Адаптивность для прогресс-бара */
@media (max-width: 768px) {
    .slider-progress-bar {
        width: 200px;
        /* Уменьшаем ширину полоски */
    }

    .progress-indicator {
        width: 60px;
        /* Уменьшаем ширину индикатора */
    }
}

.locations-section {
    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    font-family: Inter;
}

.locations-title {
    font-size: 25px;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 30px;
    text-align: left;
}


.location-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 30px;
    justify-content: center;
    margin-bottom: 40px;
    color: #000;
}

.location-card {
    border-radius: 10px;
    background-color: #e9e9e9;
    width: 100%;
    height: 285px;
    overflow: hidden;
    position: relative;
}

.location-card-image {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* filter: blur(5px); */
}

.location-card-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: calc(100% - 40px);
    max-width: 180px;
    color: #000;
    z-index: 1;
}

.location-card-text-line {
    margin: 0;
    padding: 2px 0;
}

.show-all-button-wrapper {
    border-radius: 10px;
    background-color: #146eb4;
    overflow: hidden;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 13px 30px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.show-all-button-text {
    position: relative;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 1200px) {
    .location-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .locations-title {
        /* Корректировка заголовка на мобильных */
        text-align: center;
        /* Центрируем заголовок на узких экранах */
        padding-left: 0;
        margin-bottom: 20px;
    }

    .location-cards-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .location-card {
        height: 200px;
    }

    .location-card-content {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .locations-section {
        padding: 15px 10px;
    }

    .locations-title {
        font-size: 20px;
    }

    .location-card-content {
        width: calc(100% - 20px);
        max-width: none;
    }

    .show-all-button-wrapper {
        padding: 10px 20px;
        font-size: 13px;
    }
}

.news-section {
    width: 100%;
    /* Занимает всю доступную ширину */
    max-width: 1230px;
    /* Ограничиваем максимальную ширину */
    margin: 0 auto;
    /* Центрируем блок на странице */
    padding: 20px 0;
    /* Добавляем небольшой внутренний отступ */
    text-align: left;
    /* Текст по умолчанию выровнен по левому краю */
    font-size: 12px;
    color: #000;
    font-family: Inter;
}

.news-title {
    font-size: 25px;
    /* Как у оригинального заголовка */
    text-transform: uppercase;
    margin-bottom: 30px;
    /* Отступ снизу для заголовка */
    /* padding-left: 10px; */
    /* Небольшой отступ слева, если сетка карточек центрирована */
}

.news-cards-grid {
    display: grid;
    /* Используем CSS Grid для раскладки карточек */
    /* Адаптивный grid: колонки минимум 390px, максимум 1fr. */
    /* auto-fit создаст столько колонок, сколько поместится. */
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    gap: 30px;
    /* Отступ между карточками (исходя из оригинального макета 420px - 390px = 30px) */
    justify-content: center;
    /* Центрирует карточки внутри сетки, если их общая ширина меньше max-width */

    /* Эти свойства из оригинального .group-container больше не нужны */
    /* position: absolute; top: 60px; left: 0px; width: 1230px; height: 370px; */
}

.news-card {
    /* position: absolute; top: ...; left: ...; - удалены */
    width: 100%;
    /* Карточка занимает всю ширину своей колонки в Grid */
    /* height: 370px; - оригинальная высота, можно сохранить или сделать auto */
    height: auto;
    /* Позволяет высоте адаптироваться к содержимому */
    overflow: hidden;
    border-radius: 10px;
    /* Добавляем для единообразия, если карточки имеют фон */
    background-color: #fff;
    /* Пример: белый фон для карточек */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Легкая тень для визуального разделения */
}

.news-card-image {
    width: 100%;
    height: 272px;
    /* Оригинальная высота изображения */
    object-fit: cover;
    /* Изображение покрывает всю область, обрезая лишнее */
    display: block;
    /* Убирает лишние отступы под изображением */
}

.news-card-content {
    /* position: absolute; top: 292px; left: 0px; - удалены */
    padding: 20px;
    /* Внутренние отступы для текста и даты */
    text-align: left;
    /* Обеспечиваем выравнивание по левому краю внутри карточки */
}

.news-card-meta {
    /* position: absolute; top: 58px; left: 0px; - удалены */
    display: flex;
    /* Используем flexbox для иконки и даты */
    align-items: center;
    /* Выравниваем по центру по вертикали */
    gap: 5px;
    /* Отступ между иконкой и датой */
    margin-bottom: 10px;
    /* Отступ снизу для мета-информации */
    color: #555;
    /* Более темный цвет для даты, чтобы отличался от заголовка */
}

.news-card-time-icon {
    /* position: absolute; top: 0px; left: 0px; - удалены */
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    /* Чтобы иконка не сжималась */
}

.news-card-date {
    /* position: absolute; top: 3px; left: 25px; - удалены */
    white-space: pre-wrap;
    /* Сохраняем, если были специфические пробелы */
    font-size: 12px;
    /* Размер шрифта для даты */
}

.news-card-description {
    /* position: absolute; top: 0px; left: 0px; - удалены */
    font-size: 18px;
    /* Размер шрифта для описания */
    line-height: 1.4;
    /* Межстрочный интервал для читаемости */
}

.news-card-description-line {
    margin: 0;
    /* Удаляем стандартные отступы у параграфов */
}

/* Медиа-запросы для адаптивности */
@media (max-width: 1230px) {

    /* Если экран меньше максимальной ширины секции */
    .news-cards-grid {
        gap: 20px;
        /* Уменьшаем отступ между карточками */
    }
}

@media (max-width: 768px) {

    /* Для планшетов и мобильных устройств */
    .news-title {
        text-align: center;
        /* Центрируем заголовок на узких экранах */
        padding-left: 0;
        margin-bottom: 20px;
        font-size: 20px;
    }

    .news-cards-grid {
        grid-template-columns: 1fr;
        /* Одна колонка на узких экранах */
        max-width: 400px;
        /* Ограничиваем ширину сетки для одной карточки */
        margin-left: auto;
        margin-right: auto;
    }

    .news-card-image {
        height: 200px;
        /* Немного уменьшаем высоту изображения на мобильных */
    }

    .news-card-description {
        font-size: 16px;
        /* Уменьшаем шрифт описания */
    }
}

@media (max-width: 480px) {

    /* Для очень маленьких экранов */
    .news-section {
        padding: 15px 10px;
    }

    .news-card-content {
        padding: 15px;
    }

    .news-card-description {
        font-size: 15px;
    }
}

.contact-info-section {
    width: 100%;
    /* Занимает всю доступную ширину */
    max-width: 1230px;
    /* Ограничиваем максимальную ширину как в оригинале */
    margin: 0 auto;
    /* Центрируем блок на странице */
    padding: 20px 0;
    /* Добавляем небольшой внутренний отступ */
    text-align: left;
    /* Текст по умолчанию выровнен по левому краю */
    font-size: 14px;
    color: #000;
    font-family: Inter;
}

.contact-info-title {
    font-size: 25px;
    text-transform: uppercase;
    margin-bottom: 30px;
    /* Отступ снизу для заголовка */
    /* padding-left: 10px; */
    /* Небольшой отступ слева, если сетка карточек центрирована */
}

.contact-details-grid {
    display: grid;
    /* Используем CSS Grid для раскладки элементов */
    /* Две колонки, каждая шириной 600px. Адаптируется на меньших экранах. */
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    /* От 300px до 1fr для гибкости */
    gap: 21px 30px;
    /* Вертикальный отступ 21px, горизонтальный 30px (на основе оригинального макета) */
    justify-content: center;
    /* Центрирует элементы внутри сетки */
    /* max-width: 1230px; - можно указать здесь, если нужно жестко ограничить ширину сетки */

    /* Эти свойства из оригинального .group-container больше не нужны */
    /* position: absolute; top: 60px; left: 0px; width: 1230px; height: 347px; */
}

.contact-item {
    /* position: absolute; top: ...; left: ...; - удалены */
    width: 100%;
    /* Элемент занимает всю ширину своей колонки в Grid */
    height: auto;
    /* Высота адаптируется к содержимому */
    /* Оригинальные элементы имели общую высоту 71px (метка + значение) */
    /* Можно оставить минимальную высоту или дать содержимому определять ее */
}

.contact-item-label {
    /* position: absolute; top: 0px; left: 0px; - удалены */
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8px;
    /* Отступ между меткой и полем значения */
    display: block;
    /* Убеждаемся, что метка занимает свою строку */
}

.contact-item-value-wrapper {
    /* position: absolute; top: 20px; left: 0px; - удалены */
    border-radius: 10px;
    background-color: #e9e9e9;
    width: 100%;
    /* Занимает всю доступную ширину */
    height: 51px;
    /* Фиксированная высота поля значения */
    display: flex;
    /* Используем flexbox для вертикального центрирования текста */
    align-items: center;
    /* Центрируем текст по вертикали */
}

.contact-item-value {
    /* position: absolute; top: 17px; left: 20px; - удалены */
    padding-left: 20px;
    /* Отступ слева для текста значения */
    /* font-size: 14px; - уже задан в .contact-info-section, но можно переопределить */
    word-break: break-word;
    /* Для длинных строк, чтобы они переносились */
}

/* Медиа-запросы для адаптивности */
@media (max-width: 1230px) {

    /* Если экран меньше максимальной ширины секции */
    .contact-details-grid {
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        /* Можно уменьшить minmax */
        gap: 20px;
        /* Уменьшаем отступы */
    }
}

@media (max-width: 768px) {

    /* Для планшетов и мобильных устройств */
    .contact-info-title {
        text-align: center;
        /* Центрируем заголовок на узких экранах */
        padding-left: 0;
        margin-bottom: 20px;
        font-size: 20px;
    }

    .contact-details-grid {
        grid-template-columns: 1fr;
        /* Одна колонка на узких экранах */
        max-width: 400px;
        /* Ограничиваем ширину сетки для одной колонки */
        margin-left: auto;
        margin-right: auto;
    }

    .contact-item-value-wrapper {
        height: auto;
        /* Позволяем высоте адаптироваться, если текст очень длинный */
        min-height: 51px;
        /* Минимальная высота, чтобы не было слишком маленьким */
        padding: 10px 0;
        /* Дополнительные отступы сверху/снизу для адаптивной высоты */
    }

    .contact-item-value {
        padding-right: 20px;
        /* Отступ справа для адаптивной высоты */
    }
}

@media (max-width: 480px) {

    /* Для очень маленьких экранов */
    .contact-info-section {
        padding: 15px 10px;
    }

    .contact-info-title {
        font-size: 18px;
    }

    .contact-item-label {
        font-size: 11px;
    }

    .contact-item-value {
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

.company-about-section {
    width: 100%;
    /* Занимает всю доступную ширину */
    max-width: 1229px;
    /* Ограничиваем максимальную ширину как в оригинале */
    margin: 0 auto;
    /* Центрируем блок на странице */
    padding: 20px 0;
    /* Добавляем небольшой внутренний отступ */
    text-align: left;
    /* Текст по умолчанию выровнен по левому краю */
    font-size: 14px;
    color: #000;
    font-family: Inter;
}

.company-about-header {
    display: flex;
    /* Используем Flexbox для выравнивания элементов в шапке */
    justify-content: space-between;
    /* Распределяет элементы по ширине */
    align-items: center;
    /* Выравнивает элементы по центру по вертикали */
    flex-wrap: wrap;
    /* Позволяет элементам переноситься на новую строку на узких экранах */
    gap: 20px;
    /* Отступ между элементами */
    margin-bottom: 50px;
    /* Отступ снизу для шапки */
}

.company-name {
    font-family: Inter;
    font-weight: 400;
    font-style: Regular;
    font-size: 30px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    display: flex;
    align-items: center;
}

.platform-participant-badge {
    display: flex;
    /* Flexbox для бейджа */
    align-items: center;
    flex-shrink: 0;
    /* Предотвращает сжатие бейджа */
    order: 1;
    margin-left: 1em;
    /* Порядок элемента в Flex-контейнере, по умолчанию 0 */
}

.badge-circle-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #146eb4;
    border: 1px solid #146eb4;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.tech-gallery {
    width: 100%;
}

.tech-gallery .swiper-slide {
    height: auto;
}

.tech-gallery__item img {
    display: block;
    width: 100%;
    height: 220px;
    /* подровняли карточки */
    object-fit: cover;
    /* аккуратно обрезает */
    border-radius: 12px;
}

.badge-circle-icon-wrapper-none {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #C8C8C8;
    border: 1px solid #146eb4;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.badge-icon {
    width: 24px;
    height: 24px;
}

.badge-text-content {
    background-color: #fff;
    border: 1px solid #146eb4;
    border-radius: 10px;
    height: 27px;
    /* Оригинальная высота */
    display: flex;
    align-items: center;
    /* Выравнивает текст по вертикали */
    padding: 0px 5px 0px 25px;
    /* Отступы, чтобы текст не начинался сразу после круга */
    margin-left: -20px;
    /* Отрицательный отступ для создания перекрытия с кругом */
    z-index: 1;
    /* Чтобы текст был поверх круга в месте перекрытия */
    white-space: nowrap;
    text-transform: none;
    /* Предотвращаем перенос текста, если нужно */
}

.badge-text {
    font-size: 12px;
}

.website-button {
    display: inline-flex;
    /* Используем inline-flex для кнопки */
    align-items: center;
    justify-content: center;
    padding: 13px 30px;
    text-decoration: none;
    gap: 15px;
    background-color: #146eb4;
    color: #fff;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    /* Предотвращает сжатие кнопки */
    order: 2;
    /* Порядок элемента в Flex-контейнере */
}

.website-button-icon {
    width: 25px;
    height: 25px;
}

.website-button-text {
    position: relative;
}

.company-logo {
    display: block;
    /* Делаем изображение блочным для центрирования */
    margin: 50px auto;
    /* Центрируем по горизонтали и задаем вертикальные отступы */
    max-width: 320px;
    /* Ограничиваем максимальную ширину */
    height: auto;
    /* Сохраняем пропорции */
}

.company-about-content {
    display: flex;
    /* Flexbox для основного контента */
    flex-direction: column;
    /* Элементы располагаются друг под другом */
    align-items: center;
    /* Центрирует элементы по горизонтали */
}

.company-description {
    text-align: center;
    /* Центрируем текст описания */
    margin: 0 auto 50px auto;
    /* Центрируем блок, отступ снизу */
    max-width: 800px;
    /* Ограничиваем ширину описания для читаемости */
    font-size: 16px;
}

.company-description-line {
    margin: 0;
    /* Удаляем стандартные отступы у параграфов */
}

.company-stats-container {
    display: flex;
    /* Flexbox для контейнера статистики */
    flex-direction: column;
    /* Элементы располагаются друг под другом (сетка 3х и одиночная) */
    align-items: center;
    /* Центрирует статистические блоки */
    gap: 50px;
    /* Отступ между блоками статистики */
    width: 100%;
}

.company-main-stats-grid {
    display: grid;
    /* Используем CSS Grid для 3-х элементов статистики */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Адаптивные колонки */
    gap: 30px;
    /* Отступ между элементами */
    justify-items: center;
    /* Центрирует элементы в ячейках Grid */
    max-width: 1228px;
    /* Ограничиваем ширину сетки */
    width: 100%;
}

.stat-item {
    display: flex;
    /* Flexbox для каждого элемента статистики */
    flex-direction: column;
    /* Метка под значением */
    align-items: center;
    /* Центрируем содержимое по горизонтали */
    text-align: center;
    /* Центрируем текст */
    width: 100%;
    /* Занимает всю ширину своей ячейки */
}

.company-foundation-stat {
    /* Дополнительные стили, если одиночный элемент статистики должен отличаться */
    max-width: 390px;
    /* Если он должен быть такой же ширины, как исходный */
}

.stat-value {
    font-size: 96px;
    color: #146eb4;
    line-height: 1;
    /* Убираем лишний интервал */
    margin-bottom: 10px;
    /* Отступ от метки */
    display: block;
    /* Для корректного применения отступов и размеров */
}

.stat-label {
    font-size: 16px;
    line-height: 1.3;
    max-width: 250px;
    /* Ограничиваем ширину метки для читаемости */
}

/* Медиа-запросы для адаптивности */
@media (max-width: 1200px) {
    .company-about-header {
        justify-content: center;
        /* Центрируем элементы шапки */
    }

    .company-name {
        width: 100%;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .platform-participant-badge {
        order: unset;
        margin-left: 0em;
        margin-top: 1em;
        /* Сброс порядка, чтобы они шли естественным образом */
    }

    .website-button {
        order: unset;
        /* Сброс порядка */
        width: 100%;
        /* Кнопка занимает всю ширину */
        max-width: 300px;
        /* Ограничиваем максимальную ширину кнопки */
    }
}

@media (max-width: 768px) {
    .company-about-header {
        flex-direction: column;
        /* Элементы шапки в столбец */
        gap: 15px;
    }

    .company-name {
        font-size: 24px;
    }

    .platform-participant-badge {
        margin-left: 0;
        /* Сброс маржина для центрирования */
    }

    .company-logo {
        margin: 30px auto;
        max-width: 250px;
    }

    .company-description {
        font-size: 14px;
        margin-bottom: 30px;
    }

    .company-main-stats-grid {
        grid-template-columns: 1fr;
        /* Одна колонка на узких экранах */
        max-width: 300px;
        /* Ограничиваем ширину сетки для одной колонки */
    }

    .stat-value {
        font-size: 64px;
        /* Уменьшаем размер цифр */
    }

    .stat-label {
        font-size: 14px;
    }

    .company-stats-container {
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .company-about-section {
        padding: 15px 10px;
    }

    .company-name {
        font-size: 20px;
    }

    .website-button {
        padding: 10px 20px;
        font-size: 13px;
    }

    .badge-text-content {
        height: auto;
        /* Позволяем высоте адаптироваться */
        padding: 5px 10px 5px 30px;
        /* Корректируем отступы */
        white-space: normal;
        /* Разрешаем перенос текста */
    }

    .badge-text {
        font-size: 11px;
    }

    .company-logo {
        max-width: 200px;
        margin: 20px auto;
    }

    .stat-value {
        font-size: 48px;
    }

    .stat-label {
        font-size: 13px;
    }
}

.about-company-section {
    width: 100%;
    /* Занимает всю доступную ширину */
    max-width: 1230px;
    /* Ограничиваем максимальную ширину */
    margin: 0 auto;
    /* Центрируем блок на странице */
    padding: 20px 0;
    /* Добавляем небольшой внутренний отступ */
    text-align: left;
    /* Текст по умолчанию выровнен по левому краю */
    font-size: 14px;
    /* Базовый размер шрифта для секции */
    color: #000;
    font-family: Inter;
}

.about-company-title {
    font-size: 25px;
    /* Как у оригинального заголовка */
    text-transform: uppercase;
    margin-bottom: 30px;
    /* Отступ снизу для заголовка */
    /* padding-left: 10px; */
    /* Небольшой отступ слева, если секция центрирована */
}

.about-company-main-container {
    /* Это бывший .group-parent, на который перенесены стили фона и рамки */
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    padding: 23px 74px;
    /* Внутренние отступы, как у оригинального контента */
    height: auto;
    /* Высота теперь определяется содержимым */
    position: relative;
    /* Для возможного позиционирования элементов внутри */

    /* Эти свойства из оригинального .group-parent и .rectangle-wrapper больше не нужны */
    /* position: absolute; top: 60px; left: 0px; width: 1230px; height: 405px; */
    /* .rectangle-wrapper и .group-child удалены */
}

.tabs-navigation {
    display: flex;
    /* Flexbox для кнопок табов */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /* Выравнивание табов по левому краю */
    gap: 10px;
    /* Отступ между табами */
    margin-bottom: 20px;
    /* Отступ между навигацией и контентом табов */
    font-size: 14px;
    color: #000;
    /* Цвет по умолчанию для неактивных табов */

    /* Эти свойства из оригинального .container больше не нужны */
    /* position: absolute; top: 0px; left: 1px; */
}

.tab-button {
    border-radius: 5px;
    background-color: #e9e9e9;
    /* Фон для неактивных табов */
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border: none;
    /* Убираем стандартную границу кнопки */
    cursor: pointer;
    color: #000;
    /* Цвет текста неактивной кнопки */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Плавный переход */
}

.tab-button.active {
    background-color: #146eb4;
    /* Фон для активного таба */
    color: #fff;
    /* Цвет текста активного таба */
}

.tab-button:hover:not(.active) {
    background-color: #d0d0d0;
    /* Эффект при наведении на неактивные табы */
}

.tab-content-area {
    /* Это бывший .group-container, теперь контейнер для панелей табов */
    /* position: absolute; top: 23px; left: 74px; - удалены, так как padding уже на родителе */
    height: auto;
    /* Высота адаптируется к содержимому активной вкладки */
    min-height: 250px;
    /* Минимальная высота, чтобы не "прыгало" при переключении */
    font-size: 14px;
    /* Базовый размер шрифта для контента табов */
    color: #000;
}




.about-text-content {
    margin-bottom: 20px;
    /* Отступ между текстом и кнопкой "Читать далее" */
    line-height: 1.6;
    /* Улучшенная читаемость */
}

.about-text-paragraph {
    margin: 0;
    /* Удаляем стандартные отступы у параграфов */
    padding-bottom: 10px;
    /* Небольшой отступ между параграфами */
}

.read-more-button {
    /* Это бывший .group */
    display: inline-flex;
    /* Используем inline-flex для кнопки */
    align-items: center;
    gap: 10px;
    /* Отступ между текстом и иконкой */
    background: none;
    /* Прозрачный фон */
    border: none;
    /* Без рамки */
    cursor: pointer;
    padding: 0;
    /* Убираем стандартные отступы кнопки */
    font-size: 16px;
    /* Размер шрифта, как в оригинале */
    color: #146eb4;
    /* Цвет текста кнопки */
    text-decoration: none;
    /* Убрать подчеркивание, если это будет ссылка */
    transition: color 0.3s ease;
    /* Плавный переход цвета */

    /* Эти свойства из оригинального .group больше не нужны */
    /* position: absolute; top: 233px; left: 0px; width: 121px; height: 15.1px; */
}

.read-more-button:hover {
    color: #0e4c7a;
    /* Цвет при наведении */
}

.read-more-icon {
    /* Это бывший .icon */
    width: 15px;
    height: 10.1px;
    flex-shrink: 0;
    /* Предотвращает сжатие иконки */
    transition: transform 0.3s ease;
    /* Плавный переход для иконки */
}

.read-more-button:hover .read-more-icon {
    transform: translateX(5px);
    /* Сдвиг иконки при наведении */
}

.read-more-text {
    /* Это бывший .div2 */
    position: relative;
    /* Сохраняем, если нужны были специфические эффекты */
}


/* Медиа-запросы для адаптивности */
@media (max-width: 1230px) {

    /* Если экран меньше максимальной ширины секции */
    .about-company-main-container {
        padding: 20px 40px;
        /* Уменьшаем горизонтальные отступы */
    }
}

@media (max-width: 768px) {

    /* Для планшетов и мобильных устройств */
    .about-company-title {
        text-align: center;
        /* Центрируем заголовок на узких экранах */
        padding-left: 0;
        margin-bottom: 20px;
        font-size: 20px;
    }

    .about-company-main-container {
        padding: 15px 20px;
        /* Еще уменьшаем отступы */
    }

    .tabs-navigation {
        flex-wrap: wrap;
        /* Позволяет кнопкам табов переноситься на новую строку */
        justify-content: center;
        /* Центрируем табы */
        gap: 8px;
        /* Уменьшаем отступ между табами */
    }

    .tab-button {
        padding: 10px 20px;
        /* Уменьшаем отступы кнопок табов */
        font-size: 13px;
    }

    .about-text-content {
        font-size: 13px;
    }

    .read-more-button {
        font-size: 14px;
    }
}

@media (max-width: 480px) {

    /* Для очень маленьких экранов */
    .about-company-section {
        padding: 15px 10px;
    }

    .about-company-title {
        font-size: 18px;
    }

    .about-company-main-container {
        padding: 10px 15px;
    }

    .tab-button {
        padding: 8px 15px;
    }

    .about-text-content {
        line-height: 1.5;
    }
}

.official-website-section {
    width: 100%;
    /* Занимает всю доступную ширину */
    /* max-width: 920px; */
    /* Общая максимальная ширина блока (376px + 30px gap + 184px button = ~590px, но оригинально 610px width для group-parent, и он был смещен на 310px. Оставим 920px как общую ширину для центрирования) */
    margin: 0 auto;
    /* Центрируем блок на странице */
    padding: 20px 0;
    /* Добавляем небольшой внутренний отступ */
    text-align: left;
    /* Текст по умолчанию выровнен по левому краю */
    font-size: 14px;
    /* Базовый размер шрифта для секции */
    color: #000;
    font-family: Inter;
}

.official-website-title {
    font-size: 25px;
    /* Как у оригинального заголовка */
    text-transform: uppercase;
    margin-bottom: 30px;
    /* Отступ снизу для заголовка */
    /* padding-left: 10px; */
    /* Небольшой отступ слева, если секция центрирована */
}

.website-action-container {
    display: flex;
    /* Используем Flexbox для расположения элементов в одну строку */
    align-items: flex-end;
    /* Выравниваем элементы по нижнему краю (чтобы кнопка была на уровне URL-поля) */
    gap: 20px;
    /* Отступ между блоком URL и кнопкой */
    flex-wrap: wrap;
    /* Разрешаем элементам переноситься на новую строку на узких экранах */
    justify-content: center;
    /* Центрируем элементы, если они переносятся или не занимают всю ширину */

    /* Эти свойства из оригинального .group-parent больше не нужны */
    /* position: absolute; top: 60px; left: 310px; width: 610px; height: 71px; */
}

.website-info-block {
    /* Это бывший .group-container */
    width: 376px;
    /* Ширина блока URL, как в оригинале */
    flex-shrink: 0;
    /* Предотвращаем сжатие блока */
    /* position: absolute; top: 0px; left: 0px; width: 376px; height: 71px; - удалены */
}

.website-url-label {
    /* Это бывший .div2 */
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8px;
    /* Отступ между меткой и полем URL */
    display: block;
    /* Гарантируем, что метка занимает свою строку */
}

.website-url-display {
    /* Это бывший .rectangle-parent */
    border-radius: 10px;
    background-color: #e9e9e9;
    width: 100%;
    /* Занимает всю ширину родительского .website-info-block */
    height: 51px;
    /* Фиксированная высота поля URL */
    display: flex;
    /* Используем Flexbox для вертикального и горизонтального центрирования текста */
    align-items: center;
    /* Центрируем текст по вертикали */
    justify-content: center;
    /* Центрируем текст по горизонтали */

    /* Это бывший .group-child */
    /* position: absolute; top: 0px; left: 0px; border-radius: 10px; background-color: #e9e9e9; width: 376px; height: 51px; - удалены */
}

.website-url-text {
    /* Это бывший .wwwliftindustriaru */
    position: relative;
    /* Сохраняем, если нужны были специфические эффекты */
    /* top: 17px; left: calc(50% - 65px); - удалены благодаря flexbox */
}

.visit-website-button {
    /* Это бывший .group */
    display: inline-flex;
    /* Используем inline-flex для кнопки */
    align-items: center;
    justify-content: center;
    padding: 13px 30px;
    gap: 15px;
    background-color: #146eb4;
    color: #fff;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    /* Предотвращаем сжатие кнопки */
    height: 51px;
    /* Высота кнопки, чтобы совпадала с полем URL */
    box-sizing: border-box;
    /* Учитываем padding в высоте */
    transition: background-color 0.3s ease;
    /* Плавный переход */

    /* Эти свойства из оригинального .group больше не нужны */
    /* position: absolute; top: 20px; left: 396px; */
}

.visit-website-button:hover {
    background-color: #0e4c7a;
    /* Цвет при наведении */
}

.visit-website-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    /* Чтобы иконка не сжималась */
}

.visit-website-text {
    position: relative;
    /* Сохраняем, если нужны были специфические эффекты */
}


/* Медиа-запросы для адаптивности */
@media (max-width: 920px) {

    /* Если экран меньше максимальной ширины секции */
    .official-website-section {
        padding: 20px 20px;
        /* Уменьшаем горизонтальные отступы */
    }
}

@media (max-width: 650px) {

    /* Для узких экранов, когда элементы начнут переноситься */
    .official-website-title {
        text-align: center;
        /* Центрируем заголовок */
        padding-left: 0;
        margin-bottom: 20px;
        font-size: 20px;
    }

    .website-action-container {
        flex-direction: column;
        /* Элементы в столбец */
        align-items: center;
        /* Центрируем по горизонтали */
        gap: 15px;
        /* Уменьшаем отступ */
    }

    .website-info-block {
        width: 100%;
        /* Занимает всю ширину */
        max-width: 376px;
        /* Но ограничиваем максимальную ширину */
    }

    .website-url-display {
        justify-content: flex-start;
        /* Выравниваем текст URL по левому краю внутри поля */
        padding-left: 20px;
        padding-right: 20px;
        /* Добавляем отступ справа */
    }

    .visit-website-button {
        width: 100%;
        /* Кнопка занимает всю ширину */
        max-width: 376px;
        /* Но ограничиваем максимальную ширину */
    }
}

@media (max-width: 480px) {

    /* Для очень маленьких экранов */
    .official-website-section {
        padding: 15px 10px;
    }

    .official-website-title {
        font-size: 18px;
    }

    .website-info-block,
    .visit-website-button {
        max-width: 300px;
        /* Еще уменьшаем максимальную ширину */
    }

    .website-url-display {
        padding-left: 15px;
    }

    .visit-website-button {
        padding: 10px 20px;
        font-size: 13px;
        height: auto;
        /* Позволяем высоте кнопки адаптироваться */
        min-height: 45px;
        /* Минимальная высота */
    }

    .visit-website-icon {
        width: 20px;
        height: 20px;
    }
}

/* Общие стили для секции каталога */
/* Общие стили для секции каталога */
.catalog-section {
    width: 100%;
    /* Больше не ограничиваем ширину здесь! */
    margin: 0 auto;
    padding: 20px 0;
    text-align: left;
    font-size: 14px;
    color: #000;
    font-family: Inter;
}

/* Заголовок секции */
.catalog-title {
    font-size: 25px;
    text-transform: uppercase;
    margin-bottom: 30px;
    padding-left: 10px;

    /* Центрируем заголовок на узких экранах, если секция центрирована */
    @media (max-width: 768px) {
        text-align: center;
        padding-left: 0;
        font-size: 20px;
    }

    @media (max-width: 580px) {
        font-size: 18px;
    }
}

/* Обертка для основного контента каталога (серый фон) */
.catalog-content-wrapper {
    background-color: #f2f2f2;
    border-radius: 10px;
    /* Здесь определяем отступы серой области от краев всего блока. */
    /* Эти 32px будут внешними для видимой области слайдера. */
    padding: 30px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Центрируем содержимое по горизонтали */
    gap: 30px;
    /* Отступ между слайдером и пагинацией */
    width: 100%;
    box-sizing: border-box;
    position: relative;
    /* Важно: для позиционирования стрелок Slick */
    max-width: 1231px;
    /* Максимальная ширина содержимого */
    margin: 0 auto;

    /* Центрируем содержимое */
    /* Адаптация padding для обертки */
    @media (max-width: 768px) {
        padding: 15px 15px;
    }

    @media (max-width: 580px) {
        padding: 10px 10px;
    }
}

/* Контейнер для карточек - здесь инициализируется Slick Slider */
.product-cards-container {
    width: 100%;
    height: 90%;
    /* Занимает всю ширину родителя (catalog-content-wrapper с его padding) */
    box-sizing: border-box;
    display: flex;
    /* У Slick есть своя внутренняя логика отступов. */
    /* Важно, чтобы у этого элемента не было своего горизонтального padding, */
    /* который бы конфликтовал с margin slick-list и margin slick-slide */
}

/* Карточка продукта */
.product-card {
    margin: 25px 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Slick сам управляет шириной слайда, но min-width важен */
    min-width: 228px;
    /* Базовая минимальная ширина для расчета */
    /* height: 470px; */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    /* Адаптация высоты и мин. ширины карточки */
    @media (max-width: 768px) {
        /* min-width: 250px; */
        /* Ширина для 2х в ряд */
        height: auto;
        min-height: 350px;
    }

    @media (max-width: 580px) {
        /* min-width: 100%; */
        /* Ширина для 1 в ряд */
        /* min-height: 300px; */
    }
}

.product-card::before {
    content: "";
    align-self: flex-end;
    margin-top: -3.125em;
    margin-right: -1.5625em;
    width: 15em;
    height: 15em;
    border-radius: 50%;
    background-color: var(--clr-accent-alt);
    transition: background-color .3s
}

.product-card:hover {
    box-shadow: 0px 10px 20px 0px #0A355A80;

}

/* Важно: Отступы между слайдами через margin на .slick-slide */
/* И компенсация этого отступа через отрицательный margin на .slick-list */
/* .product-cards-container .slick-slide {
    margin: 0px 15px 30px 15px;
} */
/* 
.product-cards-container.slick-initialized .slick-list {
    margin: 0 -15px;
   
} */

.catalog-categories__item::before {
    width: 13em !important;
    height: 13em !important;
}

/* Изображение продукта */
.product-card-image {
    position: absolute;
    top: -15px;
    right: 0;
    /* width: 65%; */
    /* height: 50%; */
    object-fit: none;
    z-index: 1;

    /* На мобильных - изображение в потоке, сверху */
    @media (max-width: 768px) {
        /* position: relative; */
        /* height: 200px; */
        /* border-radius: 10px 10px 0 0; */
    }

    @media (max-width: 580px) {
        height: 250px;
    }
}


/* Наложение с деталями продукта */
.product-details-overlay {
    /* position: absolute; */
    /* На больших экранах текст поверх изображения */
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 33px;
    /* height: 322px; */
    /* background: linear-gradient(0deg, #FFFFFF 34.87%, rgba(255, 255, 255, 0) 100%); */
    background: linear-gradient(0deg, #FFFFFF 83.87%, rgba(255, 255, 255, 0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;

    /* На мобильных - текст под изображением */
    @media (max-width: 768px) {
        /* position: relative; */
        height: auto;
        /* background: #fff; */
        /* Сплошной белый фон для читаемости */
        padding: 15px;
        border-radius: 0 0 10px 10px;
        box-shadow: none;
    }

    @media (max-width: 580px) {
        padding: 10px;
    }
}

/* Блок с названием продукта */
.product-name-block {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 16px;
    color: #000;
    text-align: left;

    @media (max-width: 768px) {
        padding: 0;
        /* text-align: center; */
        margin-bottom: 10px;
    }
}

.product-name {
    margin: 0;

    @media (max-width: 580px) {
        font-size: 16px;
    }
}

/* Список характеристик продукта */
.product-specs-list {
    padding: 44px 11px 17px 11px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 10px;
    color: #000;
    text-transform: uppercase;
    text-align: left;

    @media (max-width: 768px) {
        padding: 10px 0 0;
        /* align-items: center; */
        /* text-align: center; */
    }

    @media (max-width: 580px) {
        font-size: 10px;
    }
}

.spec-item {
    line-height: 1.2;
}

.spec-label,
.spec-value {
    margin: 0;
}













/* About Company Section */
.about-company-section {
    max-width: 1230px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.about-company-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
}

/* Tabs Navigation */
.tabs-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.tab-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    background-color: #e9e9e9;
    color: #000;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.tab-button:hover {
    background-color: #dcdcdc;
    cursor: pointer;
}

.tab-button.active {
    background-color: #146eb4;
    color: #fff;
}

/* Description Tab - Collapsible Content */
.about-text-content {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    overflow: hidden;
    /* Important for collapsing */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    /* Smooth transition */
}

.about-text-content.collapsedn {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;

}

.about-text-content.expanded {
    /* max-height: 1000px; */
    /* A large enough value to show all content, adjust as needed */
    opacity: 1;
}

.read-more-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: #146eb4;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    margin-left: -1rem;
    /* Adjust to align with text if needed */
}

.read-more-button:hover {
    color: #0e4b7e;
}

.read-more-icon {
    transform: rotate(0deg);
    /* Default state for collapse button */
    transition: transform 0.2s ease-in-out;
}

/* Production Tab - General Styling for Cards */
.production-overview-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.production-overview-card {
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 1.5rem;
    background-color: #fff;
}

/* Production Details Collapsible */
.production-details-collapsible {
    overflow: hidden;
    /* Important for collapsing */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    /* Removed default border/padding, as child cards have their own */
}

.production-details-collapsible.collapsedn {
    max-height: 0;
    /* Fully collapsedn */
    opacity: 0;
    /* Important: When fully collapsedn, remove margins/gaps that would take up space */
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
}

.production-details-collapsible.expanded {
    max-height: 2000px;
    /* Arbitrarily large to ensure all content is visible */
    opacity: 1;
    /* Restore any margins/gaps for the expanded state if they were removed */
    margin-top: 1.5rem;
    /* Example: add space above if needed */
    margin-bottom: 0;
}


/* General Info Card */
.general-info__title {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: #333;
}

.general-info__title-text--uppercase {
    text-transform: uppercase;
}

.general-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem 2rem;
}

.fact-item {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

.fact-item__label {
    font-weight: 500;
    color: #555;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

.fact-item__value {
    font-size: 1rem;
    color: #000;
}

.fact-item--full-width {
    grid-column: 1 / -1;
}

.fact-item--large-value .fact-item__value {
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Key Metrics Card */
.key-metrics__title {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: #333;
}

.key-metrics__content-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.key-metrics__column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.key-metrics__column .fact-item__value--wrap {
    text-align: left;
}

/* Production Catalogs Card (Slick Slider) */
.production-catalogs {
    text-align: left;
    margin-top: 1.5rem;
    /* Space between Key Metrics and Catalogs when expanded */
}

.production-catalogs__title {
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: #333;
}

.production-catalogs__slider {
    margin: 0 -10px;
}

/* .production-catalogs__slider .slick-slide {
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
} */

.catalog-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 150px;
    text-align: center;
    margin-bottom: 1rem;
}

.catalog-card__image {
    width: 100px;
    height: 141px;
    object-fit: cover;
    margin-bottom: 0.75rem;
}

.catalog-card__link {
    font-size: 0.85rem;
    color: #146eb4;
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
}

.catalog-card__link:hover {
    color: #0e4b7e;
}

/* Collapse Button for Production Tab */
.collapse-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #146eb4;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1.5rem;
    padding: 0.5rem 0;
    align-self: flex-start;
    transition: color 0.2s ease-in-out;
    margin-left: 0;
}

.collapse-button:hover {
    color: #0e4b7e;
}

.collapse-button__icon {
    width: 15px;
    height: 10.1px;
    object-fit: contain;
    transform: rotate(0deg);
    /* Default state for collapse button (pointing right) */
    transition: transform 0.2s ease-in-out;
}


/* Certificates Tab - Slick Slider Specific Styling */
/* .slick-slider-container {
    padding: 1rem 0;
    position: relative;
} */

.certificate-slider {
    padding: 0 10px;
    display: flex !important;
    justify-content: center;
    align-items: stretch;
}

.certificate-card {
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    height: 100%;
    text-decoration: none;
}

.certificate-card__image {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.certificate-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
    flex-grow: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3em 20.8px;

}

.certificate-card__download-section {
    display: block;
    width: 100%;
    text-decoration: none;
    color: #146eb4;
    transition: color 0.2s ease-in-out;
}

.certificate-card__download-section:hover {
    color: #0e4b7e;
}

.certificate-card__download-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    border-top: 1px solid #eee;
    margin-top: auto;
}

.certificate-card__download-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.certificate-card__download-icon {
    width: 20px;
    height: 20px;
    fill: #146eb4;
}

.certificate-card__download-text {
    font-size: 0.9rem;
    font-weight: 600;
}

.certificate-card__download-size {
    font-size: 0.8rem;
    color: #777;
}

/* Slick Slider Default Overrides (Dots and Arrows) */
/* .slick-prev,
.slick-next {
    font-size: 0;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, box-shadow 0.2s;
    z-index: 10;
} */

/* .slick-prev:hover,
.slick-next:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.slick-prev:before,
.slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    color: #146eb4;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
} */

/* [dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
} */

/* .slick-next {
    right: -25px;
    left: auto;
}

[dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
} */

/* Arrows for production slider (might need slightly different positioning) */
/* .production-catalogs__slider .slick-prev {
    left: -35px;
} */

/* .production-catalogs__slider .slick-next {
    right: -35px;
} */

/* Dots */
/* .slick-dots {
    position: absolute;
    bottom: -30px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
} */

/* .slick-dots li {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 15px;
    height: 15px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #146eb4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    color: #146eb4;
    opacity: .75;
} */

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {

    /* .slick-prev,
    .slick-next {
        width: 30px;
        height: 30px;
    }

    .slick-prev:before,
    .slick-next:before {
        font-size: 16px;
    }

    .slick-prev {
        left: 0px;
    } */

    /* .slick-next {
        right: 0px;
    } */

    /* .production-catalogs__slider .slick-prev {
        left: 0;
    } */

    /* .production-catalogs__slider .slick-next {
        right: 0;
    } */
}

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

    .key-metrics__content-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .key-metrics__column--right {
        border-left: none;
        padding-left: 0;
        padding-top: 1.5rem;
        border-top: 1px solid #d9d9d9;
    }

    .key-metrics__column:first-child {
        padding-right: 0;
    }

    /* .slick-prev,
    .slick-next {
        display: none !important;
    } */

    /* .production-catalogs__slider .slick-slide,
    .certificate-slider .slick-slide {
        padding: 0 5px;
    } */
}








/* Контейнер для слайдера и стрелок */
.slick-catalog-wrapper {
    position: relative;
    max-width: 1300px;
    /* Пример: Максимальная ширина, чтобы стрелки были видны по бокам */
    margin: 0 auto;
    /* Центрируем контейнер */
    padding: 0 60px;
    /* Добавляем отступы для стрелок */
    box-sizing: border-box;
    /* Учитываем padding в ширине */
}

/* Стили для кнопок-стрелок */
.slick-prev-arrow,
.slick-next-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Центрируем по вертикали */
    z-index: 10;
    /* Помещаем поверх слайдов */
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    width: 40px;
    /* Увеличиваем кликабельную область */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slick-prev-arrow {
    left: 10px;
    /* Позиционируем левую стрелку */
}

.slick-next-arrow {
    right: 10px;
    /* Позиционируем правую стрелку */
    transform: translateY(-50%) rotate(180deg);
    /* Поворачиваем SVG для правой стрелки */
}

/* Стили для SVG внутри кнопок (опционально, если хотите изменить размер SVG) */
.slick-prev-arrow svg,
.slick-next-arrow svg {
    width: 12px;
    /* Исходная ширина SVG */
    height: 20px;
    /* Исходная высота SVG */
    /* fill: #146EB4; - это уже встроено в SVG, но можно переопределить */
}

/* Медиа-запросы для скрытия стрелок на маленьких экранах, если они мешают */
@media (max-width: 768px) {
    .slick-catalog-wrapper {
        padding: 0 15px;
        /* Уменьшаем отступы, чтобы слайдер был шире */
    }

    .slick-prev-arrow,
    .slick-next-arrow {
        display: none;
        /* Скрываем стрелки, т.к. на мобильных часто используются точки */
    }
}





/* Контейнер для слайдера и стрелок */
.catalog-product-slider-wrapper {
    position: relative;
    max-width: 100%;
    /* Должен занимать всю ширину родителя */
    /* Если вам нужно центрировать и ограничить по ширине, добавьте: */
    /* max-width: 1400px; */
    /* margin: 0 auto; */
    padding: 0 60px;
    /* Отступы для стрелок */
    box-sizing: border-box;
    /* Учитываем padding в ширине */
}

/* Стили для кнопок-стрелок */
.catalog-slick-prev-arrow,
.catalog-slick-next-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Центрируем по вертикали */
    z-index: 10;
    /* Помещаем поверх слайдов */
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    width: 40px;
    /* Увеличиваем кликабельную область */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-slick-prev-arrow {
    left: 10px;
    /* Позиционируем левую стрелку */
}

.catalog-slick-next-arrow {
    right: 10px;
    /* Позиционируем правую стрелку */
    transform: translateY(-50%) rotate(180deg);
    /* Поворачиваем SVG для правой стрелки */
}

/* Стили для SVG внутри кнопок (опционально) */
.catalog-slick-prev-arrow svg,
.catalog-slick-next-arrow svg {
    width: 12px;
    /* Исходная ширина SVG */
    height: 20px;
    /* Исходная высота SVG */
    /* fill: #146EB4; - это уже встроено в SVG, но можно переопределить */
}

/* Медиа-запросы для скрытия стрелок на маленьких экранах */
@media (max-width: 768px) {
    .catalog-product-slider-wrapper {
        padding: 0 15px;
        /* Уменьшаем отступы, чтобы слайдер был шире */
    }

    .catalog-slick-prev-arrow,
    .catalog-slick-next-arrow {
        display: none;
        /* Скрываем стрелки, т.к. на мобильных часто используются точки */
    }

    .catalog-content-wrapper {
        max-width: 400px;
    }
}

/* Стили для карточек, чтобы они выглядели хорошо внутри слайдера */
.product-cards-container .slick-slide {
    /* padding: 0 10px; */
    /* Отступ между карточками в слайдере */
    box-sizing: border-box;
}

/* Если вы используете Slick Dots, возможно, вы захотите скрыть или удалить оригинальный .catalog-pagination */
.catalog-pagination {
    display: none;
    /* Скрываем, если используем Slick Dots */
}



.company-page {
    width: 100%;
    /* Changed from 1230px to 100% to handle responsiveness */
    max-width: 1230px;
    /* Max width remains the same */
    margin: 0 auto;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    padding: 30px 75px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Отступы между основными секциями: табами, контентом, кнопкой */
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #000;
}

/* Стили для навигации по табам */
.tab-list-wrapper {
    width: 100%;
}

.tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tab-list__item {
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 5px;
    background-color: #e9e9e9;
    padding: 15px 30px;
    font-size: 14px;
    color: #000;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tab-list__item:hover {
    background-color: #d1d1d1;
}

.tab-list__item--active {
    background-color: #146eb4;
    color: #fff;
}

/* Контейнер для содержимого табов */
.tab-content-wrapper {
    display: flex;
    flex-direction: column;
}

/* Стили для панелей табов (содержимого) */
.tab-pane {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-in-out, opacity 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 30px;

    pointer-events: none;
    /* Предотвращаем взаимодействие с содержимым, когда оно скрыто */
}

.tab-pane--active {
    max-height: 4000px;
    /* Достаточно большое значение для любого контента */
    opacity: 1;
    overflow: visible;
    /* Разрешить overflow для дочерних элементов */
    margin-top: 0;
    /* Восстановить отступ, когда вкладка активна */
    pointer-events: auto;
    /* Включаем взаимодействие */
}

/* Стили для свернутого состояния АКТИВНОЙ вкладки */
.tab-pane--active.collapsed {
    /* ВОТ ЭТОТ КЛАСС ВАЖЕН */
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    /* Убедимся, что отступ убран */
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.company-page__description {
    margin-bottom: 2em;

}

/* Стили для текстового описания внутри вкладки "Описание" */
.company-page__description-paragraph {
    margin: 0;
    line-height: 1.5;
}

/* Переиспользуемые стили для информационных карточек (Общая, Подробная инфо) */
.info-card {
    width: 100%;
    margin: 1em 0;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card__title {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    height: 28px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

.info-card__content--two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gap: 40px; */
}

.info-card__section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card__section--left {
    padding-right: 20px;
    border-right: 1px solid #d9d9d9;
}

.info-card__section--right {
    padding-left: 20px;
}

.info-card__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.info-card__item--stacked {
    flex-direction: column;
    align-items: flex-start;
}

.info-card__label {
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    text-align: left;
}

.info-card__value {
    font-size: 14px;
    text-align: right;
    flex-grow: 1;
}

.info-card__value--align-right {
    text-align: right;
}

/* Стили для карточки каталогов */
.catalogs-card {
    margin-bottom: 2em;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.catalogs-card__title {
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
    margin: 0;
    padding: 0;
}

/* Existing grid styles */
.catalogs-card__list {
    /* Keep these as the default for when Slick is active or there are many items */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 20px;
    justify-content: center;
    text-align: center;
}

/* New styles for when Slick slider is NOT active (e.g., fewer than 6 items) */
.catalogs-card__list--no-slider {
    display: flex;
    /* Change to flexbox for a row layout */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line if space runs out */
    justify-content: center;
    /* Center the items horizontally */
    gap: 20px;
    /* Maintain the gap between items */
}

.catalogs-card__list--no-slider .catalogs-card__item {
    flex: 0 0 148px;
    /* Do not grow, do not shrink, base width 148px (consistent with minmax) */
    max-width: 100%;
    /* Ensure it doesn't overflow on very small screens */
}

.text-opis-proiz {
    width: 100%;
    position: relative;
    font-size: 14px;
    font-family: Inter;
    color: #000;
    text-align: left;
    display: inline-block;
}

.catalogs-card__item {
    width: 148px;
    height: 172px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}

.catalogs-card__image {
    width: 100px;
    height: 141px;
    object-fit: cover;
    margin-bottom: 5px;
}

.catalogs-card__link {
    font-size: 12px;
    color: #146eb4;
    text-decoration: underline;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Переиспользуемая кнопка "свернуть/развернуть" */
.toggle-button {
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    font-size: 16px;
    color: #146eb4;
    padding: 0;
    align-self: flex-start;
    /* Прижать к левому краю */
    margin-top: 10px;
    /* Отступ от предыдущего блока */
}

.toggle-button__icon {
    width: 15px;
    height: 10.1px;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
}

.toggle-button__icon.rotated {
    transform: rotate(180deg);
}

/* Адаптивность */
@media (max-width: 1250px) {
    .company-page {
        padding: 20px;
        /* Reduced padding from 75px */
    }

    /* Ensure two column layouts still have reasonable space */
    .info-card__section--left {
        padding-right: 15px;
    }

    .info-card__section--right {
        padding-left: 15px;
    }

    .info-card__content--two-columns {
        gap: 20px;
    }
}

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

    .info-card__section--left {
        border-right: none;
        border-bottom: 1px solid #d9d9d9;
        padding-right: 0;
        padding-bottom: 15px;
    }

    .info-card__section--right {
        padding-left: 0;
        padding-top: 15px;
    }

    .catalogs-card__list {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 480px) {
    .tab-list {
        justify-content: center;
    }
}










/* Контейнер для слайдера и стрелок */
.certificate-slider-wrapper {
    position: relative;
    max-width: 1300px;
    /* Пример: Максимальная ширина, чтобы стрелки были видны по бокам */
    margin: 0 auto;
    /* Центрируем контейнер */
    padding: 0 60px;
    /* Добавляем отступы для стрелок */
    box-sizing: border-box;
    /* Учитываем padding в ширине */
}

/* Стили для кнопок-стрелок */
.certificate-slick-prev-arrow,
.certificate-slick-next-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Центрируем по вертикали */
    z-index: 10;
    /* Помещаем поверх слайдов */
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    width: 40px;
    /* Увеличиваем кликабельную область */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certificate-slick-prev-arrow {
    left: 10px;
    /* Позиционируем левую стрелку */
}

.certificate-slick-next-arrow {
    right: 10px;
    /* Позиционируем правую стрелку */
    transform: translateY(-50%) rotate(180deg);
    /* Поворачиваем SVG для правой стрелки */
}

/* Стили для SVG внутри кнопок (опционально) */
.certificate-slick-prev-arrow svg,
.certificate-slick-next-arrow svg {
    width: 12px;
    /* Исходная ширина SVG */
    height: 20px;
    /* Исходная высота SVG */
    /* fill: #146EB4; - это уже встроено в SVG, но можно переопределить */
}

/* Медиа-запросы для скрытия стрелок на маленьких экранах */
@media (max-width: 768px) {
    .certificate-slider-wrapper {
        padding: 0 15px;
        /* Уменьшаем отступы, чтобы слайдер был шире */
    }

    .certificate-slick-prev-arrow,
    .certificate-slick-next-arrow {
        display: none;
        /* Скрываем стрелки, т.к. на мобильных часто используются точки */
    }
}


.slick-dots li button {

    width: 6px;
    height: 6px;

    /* background: blueviolet; */
    background: transparent;
    border-radius: 50%;
    border: 1px solid #D9D9D9;
    box-shadow: 0px 1px 1px 0px #00000040;

}

.slick-dots .slick-active button {
    background: #146EB4;
}































/* Базовые стили для табов и панелей */
.tab-pane {
    display: none;
    /* Скрывает все панели по умолчанию */
}

.tab-pane--active {
    display: block;
    /* Показывает активную панель */
}



/* Стили для сворачиваемого/разворачиваемого блока */
.company-page__expandable-section {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    /* Плавный переход для max-height */
    /* max-height будет установлен JS */
}

.company-page__expandable-section.is-collapsed {
    max-height: 0;
    /* Высота 0 для свернутого состояния */
}

/* Стили для кнопки "Свернуть/Развернуть" */
.company-page__expand-collapse {
    display: inline-flex;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
    /* Добавил отступ снизу для кнопки */
    /* color: blue; */
    /* Примерный цвет ссылки */
    cursor: pointer;
    text-decoration: none;
}

.toggle-button__icon {
    margin-left: 8px;
    width: 16px;
    /* Размер иконки */
    height: 16px;
    transition: transform 0.3s ease-out;
}

/* Иконка поворачивается:
       - По умолчанию (свернуто, кнопка "Развернуть"): стрелка смотрит вниз
       - Когда контент развернут (кнопка "Свернуть"): стрелка смотрит вверх
    */
/* Начальное состояние (при загрузке) - свернуто, поэтому стрелка должна быть "вниз" */
.company-page__expand-collapse.is-collapsed .toggle-button__icon {
    transform: rotate(360deg);
    /* Повернули вниз (из "вбок") */
}

.company-page__expand-collapse.is-expanded .toggle-button__icon {
    transform: rotate(180deg);
    /* Повернули вверх (из "вбок") */
}



















/* Styling for the Manufacturer Images Slider */

/* Wrapper for the entire slider, including arrows and dots */
.tech-gallery-slick-wrapper {
    position: relative;
    /* Essential for absolute positioning of arrows */
    padding: 0 40px;
    /* Creates horizontal space for arrows outside the main image track */
    margin-bottom: 40px;
    /* Creates vertical space for dots below */
}

/* Style for individual slider items */
.tech-gallery__item {
    padding: 0 8px;
    /* Creates a gap/gutter between images */
    box-sizing: border-box;
    /* Include padding in element's total width/height */
}

/* Style for the images themselves */
.tech-gallery__item img {
    width: 100%;
    height: 250px;
    /* Fixed height for visual consistency, adjust as needed */
    object-fit: cover;
    /* Ensures images cover the area without distortion, cropping if necessary */
    border-radius: 8px;
    /* Optional: adds rounded corners to images */
    display: block;
    /* Removes extra space below image */
}

/* Styling for the custom navigation arrows */
.tech-slick-prev-arrow,
.tech-slick-next-arrow {
    position: absolute;
    top: 50%;
    /* Vertically center */
    transform: translateY(-50%);
    /* Adjust for exact vertical centering */
    z-index: 10;
    /* Ensure arrows are above images */
    cursor: pointer;
    width: 24px;
    /* Adjust clickable area size */
    height: 24px;
    display: flex;
    /* Helps center the SVG inside */
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    /* Smooth hover effect */
}

.tech-slick-prev-arrow {
    left: 0;
    /* Position at the left edge of the padding */
}

.tech-slick-next-arrow {
    right: 0;
    /* Position at the right edge of the padding */
}

/* Since both arrows use the same left-pointing SVG, rotate the 'next' arrow */
.tech-slick-next-arrow svg {
    transform: rotate(180deg);
}

/* Styling for Slick Slider's pagination dots */
.tech-gallery-list.slick-slider .slick-dots {
    position: absolute;
    /* Relative to the .tech-gallery-list which becomes .slick-slider */
    bottom: -30px;
    /* Position below the slider, adjusting based on margin-bottom of wrapper */
    width: 100%;
    left: 0;
    text-align: center;
    list-style: none;
    /* Remove default list styling */
    padding: 0;
    /* Remove default padding */
    margin: 0;
    /* Remove default margin */
}

.tech-gallery-list.slick-slider .slick-dots li {
    display: inline-block;
    /* Arrange dots horizontally */
    margin: 0 5px;
    /* Spacing between dots */
    padding: 0;
    cursor: pointer;
}

.tech-gallery-list.slick-slider .slick-dots li button {
    font-size: 0;
    /* Hide default button text */
    line-height: 0;
    display: block;
    width: 10px;
    /* Dot size */
    height: 10px;
    /* Dot size */
    padding: 5px;
    /* Clickable area */
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: #ccc;
    /* Inactive dot color */
    border-radius: 50%;
    /* Make dots round */
    transition: background-color 0.3s ease;
}

.tech-gallery-list.slick-slider .slick-dots li.slick-active button {
    background: #146EB4;
    /* Active dot color */
}

/* Adjust Slick's default .slick-list padding if it conflicts with .tech-gallery__item padding */
.tech-gallery-list.slick-slider .slick-list {
    margin: 0 -8px;
    /* Counteract padding on .tech-gallery__item for a flush edge */
}

@media (max-width: 768px) {
    .company-page {
        padding: 15px;
        gap: 20px;
        /* Smaller gap between sections */
    }

    /* Tabs */
    .tab-list {
        justify-content: center;
    }

    .tab-list__item {
        padding: 10px 15px;
        font-size: 13px;
    }

    /* Info Card collapsing */
    .info-card__content--two-columns {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .info-card__section--left {
        border-right: none;
        border-bottom: 1px solid #d9d9d9;
        padding-right: 0;
        padding-bottom: 15px;
    }

    .info-card__section--right {
        padding-left: 0;
        padding-top: 15px;
    }

    .info-card {
        padding: 15px;
        gap: 15px;
    }

    .info-card__label {
        font-size: 11px;
    }

    .info-card__title {
        font-size: 13px;
    }


    /* Ensure text description fits well */
    .company-page__description-paragraph {
        font-size: 13px;
    }

    /* Hide Slick Arrows on smaller screens, rely on dots */
    .slick-catalog-wrapper,
    .tech-gallery-slick-wrapper,
    .certificate-slider-wrapper {
        padding: 0 10px;
        /* Adjust wrapper padding */
    }

    /* Explicitly hide custom arrows */
    .slick-prev-arrow,
    .slick-next-arrow,
    .tech-slick-prev-arrow,
    .tech-slick-next-arrow,
    .certificate-slick-prev-arrow,
    .certificate-slick-next-arrow {
        display: none;
    }
}

/* Smaller mobile screens (<= 480px) */
@media (max-width: 480px) {
    .company-page {
        padding: 10px;
    }

    /* Stack label and value in info cards for very tight screens */
    .info-card__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .info-card__value {
        text-align: left;
    }

    .info-card__value--align-right {
        text-align: left;
        /* Override align-right for stacking */
    }

    .info-card__title {
        font-size: 12px;
    }
}


/* ... (The rest of the extensive CSS provided in the original input goes here) ... */

.top-banner__logo {
    filter: invert(1);
}

/* ... (Rest of original CSS) ... */
.company-page {
    /* This is the original definition, overridden by media queries above */
    /* width: 1230px; */
    max-width: 1230px;
    width: 100%;
    /* Ensure it's responsive by default */
    margin: 0 auto;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    padding: 30px 75px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #000;
}

/* ... (The remainder of the original 1500+ lines of CSS continues here) ... */

/* Ensure custom arrow/dot wrappers defined later also respect mobile hiding */

/* ... (Slick Arrow wrappers defined later) ... */

/* Existing media query for info cards (retained) */
@media (max-width: 768px) {
    .info-card__content--two-columns {
        grid-template-columns: 1fr;
    }

    .info-card__section--left {
        border-right: none;
        border-bottom: 1px solid #d9d9d9;
        padding-right: 0;
        padding-bottom: 15px;
    }

    .info-card__section--right {
        padding-left: 0;
        padding-top: 15px;
    }

    .catalogs-card__list {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* --- COMPANY PAGE SPECIFIC CSS REFINEMENTS FOR MOBILE --- */
.company-page {
    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
    /* Убеждаемся, что горизонтальный скролл отсутствует, если Slick пытается выйти за границы */
    overflow-x: hidden;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    padding: 30px 75px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #000;
}

/* 1. Убираем сложное скрытие/показ табов (display: none/block надежнее для Slick) */
.tab-pane {
    display: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.tab-pane--active {
    display: flex;
    /* Tabs content uses flex column layout */
}

/* 2. Убираем "Читать далее" - контент всегда открыт */
.company-page__expandable-section {
    max-height: none !important;
    /* Контент всегда развернут */
    overflow: visible !important;
    opacity: 1 !important;
    transition: none;
}

/* Скрываем кнопку, которая управляла сворачиванием */
.company-page__expand-collapse {
    display: none !important;
}


/* 3. Оптимизация отступов для слайдеров (Уменьшаем пространство для стрелок) */

/* Общая обертка для каталогов в "Профиле Компании" */
.slick-catalog-wrapper {
    padding: 0 40px;
    /* Уменьшаем с 60px до 40px */
}

/* Общая обертка для изображений в "Производстве" */
.tech-gallery-slick-wrapper {
    padding: 0 40px;
}

/* Общая обертка для сертификатов */
.certificate-slider-wrapper {
    padding: 0 40px;
    /* Уменьшаем с 60px до 40px */
}

/* 4. Адаптация для экранов <= 1250px (Desktop/Tablet Transition) */
@media (max-width: 1250px) {
    .company-page {
        padding: 20px;
    }

    /* Уменьшаем отступы для двухколоночных блоков */
    .info-card__section--left {
        padding-right: 15px;
    }

    .info-card__section--right {
        padding-left: 15px;
    }

    .info-card__content--two-columns {
        gap: 20px;
    }
}

/* 5. Адаптация для мобильных экранов <= 768px */
@media (max-width: 768px) {
    .company-page {
        padding: 15px;
        gap: 20px;
    }

    /* Убираем отступы слайдеров полностью, т.к. стрелки скрыты */
    .slick-catalog-wrapper,
    .tech-gallery-slick-wrapper,
    .certificate-slider-wrapper {
        padding: 0 5px;
        /* Минимальный отступ, чтобы контент не прилипал к краям */
    }

    /* Скрываем стрелки, чтобы не вызывали горизонтальный скролл */
    .slick-prev-arrow,
    .slick-next-arrow,
    .tech-slick-prev-arrow,
    .tech-slick-next-arrow,
    .certificate-slick-prev-arrow,
    .certificate-slick-next-arrow {
        display: none !important;
    }

    /* Информационные карточки - в одну колонку */
    .info-card__content--two-columns {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .info-card__section--left {
        border-right: none;
        border-bottom: 1px solid #d9d9d9;
        padding-right: 0;
        padding-bottom: 15px;
    }

    .info-card__section--right {
        padding-left: 0;
        padding-top: 15px;
    }
}

/* 6. Адаптация для очень маленьких экранов <= 480px */
@media (max-width: 480px) {
    .company-page {
        padding: 10px;
    }

    /* Складываем элементы карточек вертикально для лучшей читаемости */
    .info-card__item:not(.info-card__item--stacked) {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .info-card__value {
        text-align: left;
    }

    .info-card__value--align-right {
        text-align: left;
    }
}

/* Обновляем базовые стили для секции каталога */
.catalog-section {
    width: 100%;
    max-width: 1230px;
    /* Ограничиваем максимальную ширину */
    margin: 0 auto;
    padding: 20px 0;
    text-align: left;
    font-size: 14px;
    color: #000;
    font-family: Inter;
    /* Убеждаемся, что эта секция не вызывает горизонтальный скролл */
    overflow-x: hidden;
}


/* Контейнер для слайдера и стрелок */
.catalog-product-slider-wrapper {
    position: relative;
    max-width: 100%;
    padding: 0 60px;
    /* Исходные отступы для стрелок */
    box-sizing: border-box;
}

/* Стили для кнопок-стрелок */
.catalog-slick-prev-arrow,
.catalog-slick-next-arrow {
    position: absolute;
    top: 50%;
    /* transform: translateY(-50%); */
    z-index: 10;
    cursor: pointer;
    /* ... (остальные стили) ... */
}

/* Медиа-запросы для адаптивности секции "Каталог" */
@media (max-width: 1250px) {
    .catalog-content-wrapper {
        padding: 20px 20px;
    }
}

@media (max-width: 768px) {
    .catalog-title {
        text-align: center;
        padding-left: 0;
        font-size: 20px;
    }

    .catalog-content-wrapper {
        max-width: 100%;
        padding: 15px 15px;
        /* Уменьшаем отступы серой обертки */
    }

    .catalog-product-slider-wrapper {
        padding: 0 5px;
        /* Минимальный отступ, т.к. стрелки будут скрыты */
    }

    /* Скрываем стрелки, чтобы не вызывали горизонтальный скролл */
    .catalog-slick-prev-arrow,
    .catalog-slick-next-arrow {
        display: none !important;
    }

    /* Дополнительная адаптация для карточек внутри слайдера */
    .product-details-overlay {
        padding: 10px;
    }

    .product-name-block {
        padding: 0 10px;
    }

    .product-specs-list {
        padding: 10px 10px 10px;
    }
}

@media (max-width: 480px) {
    .catalog-title {
        font-size: 18px;
    }

    .catalog-content-wrapper {
        padding: 10px;
    }

    .product-name {
        font-size: 14px;
    }

    .product-specs-list {
        font-size: 9px;
    }
}

/* ========================================================= */
/* Стили для табов: Возвращаем max-height/opacity для плавности и Slick */
/* ========================================================= */

.company-page {
    /* Добавляем overflow-x: hidden к основному контейнеру, чтобы скрыть лишний горизонтальный скролл */
    overflow-x: hidden;
}

.tab-content-wrapper {
    /* Убеждаемся, что контент вкладок не вызывает проблем */
    overflow-x: hidden;
}

.tab-pane {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-in-out, opacity 0.5s ease-in-out;
    display: flex;
    /* Важно: оставляем flex, чтобы Slick мог видеть ширину */
    flex-direction: column;
    gap: 30px;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    width: 100%;
    /* Должен занимать 100% ширины */
}

.tab-pane--active {
    max-height: 4000px;
    opacity: 1;
    overflow: visible;
    margin-top: 0;
    padding-top: 0;
    /* Убираем лишний padding, если он был */
    padding-bottom: 0;
    pointer-events: auto;
}

/* ========================================================= */
/* Корректировка оберток слайдеров для предотвращения скролла */
/* ========================================================= */

/* Слайдер "Каталоги" в Профиле Компании */
.slick-catalog-wrapper {
    padding: 0 40px;
}

/* Слайдер "Изображения производителя" */
.tech-gallery-slick-wrapper {
    padding: 0 40px;
}

/* Слайдер "Сертификаты" */
.certificate-slider-wrapper {
    padding: 0 40px;
}

/* Адаптация для мобильных (<= 768px): Скрываем стрелки и убираем padding */
@media (max-width: 768px) {

    .slick-catalog-wrapper,
    .tech-gallery-slick-wrapper,
    .certificate-slider-wrapper {
        padding: 0 5px;
        /* Минимальный отступ, т.к. стрелки скрыты */
    }

    /* Убеждаемся, что стрелки скрыты */
    .slick-prev-arrow,
    .slick-next-arrow,
    .tech-slick-prev-arrow,
    .tech-slick-next-arrow,
    .certificate-slick-prev-arrow,
    .certificate-slick-next-arrow {
        display: none !important;
    }
}

/* Секция "Каталог" (вне вкладок) */
.catalog-section {
    overflow-x: hidden;
    /* ... остальные стили ... */
}

.catalog-product-slider-wrapper {
    padding: 0 60px;
    /* Десктопный отступ */
}

@media (max-width: 768px) {
    .catalog-product-slider-wrapper {
        padding: 0 5px;
        /* Мобильный отступ */
    }

    .catalog-slick-prev-arrow,
    .catalog-slick-next-arrow {
        display: none !important;
    }
}

/* ========================================================= */
/* 1. Стили для карточек в секции "Каталог" (вне табов) */
/* ========================================================= */






/* ========================================================= */
/* 2. Стили для слайдера Сертификатов */
/* ========================================================= */

.certificate-slider {
    padding: 0;
    /* Убеждаемся, что нет лишнего padding, который вызывает скролл */
    /* display: flex !important; -- Убедитесь, что эта строка удалена, если она была */
}

.certificate-slider .slick-slide {
    padding: 0 10px;
    /* Отступы между карточками */
    box-sizing: border-box;
}

.certificate-slide-item {
    width: 100%;
    height: auto;
    display: block;
    /* Важно для Slick */
}

.certificate-card {
    /* Фиксируем высоту карточки сертификата для выравнивания */

    height: 100%;
    justify-content: space-between;
    /* Распределяем контент между верхом и низом */
}

/* ========================================================= */
/* 3. Адаптивность для фиксации высоты */
/* ========================================================= */

@media (max-width: 768px) {

    /* Разрешаем карточкам адаптировать высоту, но задаем минимум */
    .product-card,
    .certificate-card {
        /* height: auto; */
        /* min-height: 350px; */
    }
}

.tech-gallery__item a {
    display: block;
    cursor: pointer;
    line-height: 0;
    /* Убираем лишний отступ под изображением */
    border-radius: 8px;
    overflow: hidden;
}

.tech-gallery__item img {
    /* ... (стили изображения остаются) ... */
    transition: transform 0.3s ease;
}

.tech-gallery__item a:hover img {
    transform: scale(1.03);
    /* Небольшой эффект при наведении */
}

.construction-accordion {
    width: 100%;
}

.construction-accordion__item {
    border-bottom: 1px solid #d9d9d9;
    padding: 10px 0;
}

.construction-accordion__item:last-child {
    border-bottom: none;
}

.construction-accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
    transition: background-color 0.2s;
}

.construction-accordion__header:hover {
    background-color: #f9f9f9;
}

.construction-accordion__title {
    font-size: 16px;
    font-weight: 700;
    color: rgb(20, 110, 180);
    /* Акцентный цвет для заголовка категории */
    margin: 0;
}

.construction-accordion__icon {
    transition: transform 0.3s ease;
    transform: rotate(90deg);
    /* Исходное состояние: стрелка вправо */
}

/* Класс для активного (открытого) аккордеона */
.construction-accordion__item.is-active .construction-accordion__icon {
    transform: rotate(180deg);
    /* Повернута вниз */
}

/* Контент аккордеона (скрываемый) */
.construction-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 10px;
}

.construction-accordion__item.is-active .construction-accordion__content {
    /* Max-height будет задаваться через JS для корректной анимации */
}

.construction-accordion__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    /* Убираем лишний padding, если он был */
    margin-bottom: 15px;
    /* Отступ после списка, если идет новая подкатегория */
}

/* Удаляем лишний отступ снизу у последнего списка в контенте */
.construction-accordion__list:last-child {
    margin-bottom: 0;
}

.construction-accordion__file-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background-color: #e9e9e9;
    border-radius: 5px;
    text-decoration: none;
    color: #000;
    transition: background-color 0.2s;
}

.construction-accordion__file-link:hover {
    background-color: #d1d1d1;
}

.construction-accordion__file-name {
    font-size: 14px;
    margin-right: 15px;
    word-break: break-word;
}

.download-file__icon {
    fill: rgb(20, 110, 180) !important;
    flex-shrink: 0;
}


/* Новый стиль для заголовка подкатегории */
.construction-accordion__subcategory-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 15px 0 10px 0;
    /* Отступы сверху и снизу */
    padding-left: 5px;
    /* Небольшой отступ для визуального выравнивания */
    border-left: 3px solid #146eb4;
    /* Небольшая синяя полоса слева */
}