.nav-container {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1500px;
    height: 76px;
    background: var(--nav-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-wrap .logo {
    height: 40px;
    display: block;
    border-radius: 3px;
}

/* СБРОС ТОЧЕК У ВСЕХ СПИСКОВ */
.menu, .nav-tools, .submenu, .lang-submenu {
    list-style: none;
    margin: 0; 
    padding: 0;
}

/* ОБЩИЙ СТИЛЬ ССЫЛОК И ЯЗЫКА */
.menu, .nav-tools {
    display: flex;
    align-items: center;
}

.menu li a, 
.lang-current {
    display: flex;
    align-items: center;
    padding: 24px 20px;
    font-size: 20px;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none !important;
    cursor: pointer;
    transition: 0.3s;
}

.menu li a:hover, 
.lang-current:hover {
    color: var(--primary-color);
}

.menu li a.active {
    color: var(--primary-color) !important;
    font-weight: 700;
}

/* ИКОНКИ И ФЛАГИ */
.menu-arrow {
    width: 12px;
    height: 12px;
    margin-left: 8px;
    transition: 0.3s;
}

.flag-icon {
    width: 22px;
    height: 15px;
    margin-left: 10px;
    border-radius: 2px;
}

/* ПОДМЕНЮ ПРОДУКЦИИ (Центрируем) */
.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: var(--nav-bg);
    border-radius: 10px;
    min-width: 220px;
    padding: 10px 0;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.has-submenu {
    position: relative;
}

.has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

/* ПОДМЕНЮ ЯЗЫКА */
.lang-switcher-wrap {
    position: relative;
}

.lang-submenu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--nav-bg);
    border-radius: 10px;
    min-width: 80px;
    padding: 10px 0;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.lang-switcher-wrap:hover .lang-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

/* СТИЛЬ ССЫЛОК ВНУТРИ ПОДМЕНЮ (Продукция и Языки) */
.submenu li a, 
.lang-submenu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px !important;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-main) !important;
    text-decoration: none !important;
    transition: background 0.3s, color 0.3s;
    width: 100%;
}

.submenu li a:hover, 
.lang-submenu li a:hover {
    background: rgba(0, 99, 206, 0.1);
    color: var(--primary-color) !important;
}

/* ВРАЩЕНИЕ СТРЕЛОЧЕК */
.has-submenu:hover > a .menu-arrow,
.lang-switcher-wrap:hover .menu-arrow {
    transform: rotate(180deg);
}

/* SWITCH TOGGLE */
.theme-toggle-item {
    margin-left: 15px;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.theme-switch input { display: none; }

.slider-toggle {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #333;
    transition: .4s;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.slider-toggle:before {
    position: absolute;
    content: "";
    height: 22px; 
    width: 22px;
    left: 4px; 
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    z-index: 5;
}

/* Стили для картинок */
.theme-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    transition: opacity 0.4s ease;
    z-index: 1;
}

/* СОСТОЯНИЕ: ДЕНЬ (Чекбокс не нажат) */
/* Солнце слева (скрыто бегунком), Луна справа (видна) */
.sun-img { 
    opacity: 0; 
}
.moon-img { 
    opacity: 1; 
}

/* СОСТОЯНИЕ: НОЧЬ (Чекбокс нажат) */
input:checked + .slider-toggle { 
    background-color: var(--primary-color); 
}

/* Сдвиг бегунка вправо (закрытие луны) */
input:checked + .slider-toggle:before { 
    transform: translateX(30px); 
}

/* Показываем солнце слева, скрываем луну справа */
input:checked + .slider-toggle .sun-img { 
    opacity: 1; 
}
input:checked + .slider-toggle .moon-img { 
    opacity: 0; 
}

.burger { display: none; }

/* ======================== INFO SECTION ======================== */
.info {
    padding: 120px 0 40px 0;
    background: var(--bg-body);
    transition: background var(--transition);
}

.info-container {
    max-width: 1300px;
    margin: 0 auto;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 80px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
}

.info-item.logo-box {
    margin-right: 40px; 
}

/* Фото-иконки 63x63 и эффект при наведении */
.info-img-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.info-item:hover .info-img-icon {
    transform: scale(1.15);
}

/* Текстовые стили */
.logo-text-group {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.1;
}

.logo-text {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-main);
    margin: 4px 0 0 0;
    opacity: 0.9;
}

.info-address {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-main);
    line-height: 1.4;
}

.phone-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.3s;
}

.phone-number:hover {
    color: var(--primary-color);
}

/* ======================== Секция слайдера ======================== */
.article {
    max-width: 1500px;
    width: 95%;
    margin: 0 auto;
}

.article-container {
    max-width: 1500px;
    height: 698px;
    background-color: var(--primary-color);
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.8s ease;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    padding: 72px 100px 0 100px; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Боковые Кнопки */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #fff;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.prev-btn { left: 15px; }
.next-btn { right: 15px; }

.slider-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.article-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 500px;
    z-index: 2;
}

.article-title {
    font-family: 'Exo 2', sans-serif;
    font-size: 50px;
    color: #fff;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 30px;
}

.article-badge {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.article-badge .info-label {
    font-family: 'Roboto', sans-serif;
    display: block;
    font-size: 22px;
    color: #ffffff;
    margin-bottom: -15px;
}

.article-badge .info-value {
    font-family: 'Exo 2', sans-serif;
    font-size: 50px;
    color: #ffffff;
    font-weight: 700;
}

.article-text {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    color: #fff;
    line-height: 1.5;
    margin-top: 50px;
    margin-bottom: 20px;
}

.article-image-wrap {
    position: absolute;
    left: 617px;
    top: 72px;
    right: 72px;
    bottom: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.article-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.btn-consult {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    height: 70px;
    background: #ffffff;
    border-radius: 50px;
    text-decoration: none;
    margin-top: auto; 
    margin-bottom: 72px;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    transition: 0.3s ease;
}

.btn-consult span {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.btn-consult:hover {
    transform: scale(1.05);
}

/* ======================== СЕКЦИЯ ПОПУЛЯРНЫЕ / КАТАЛОГ (СЕТКА ТОВАРОВ) ======================== */
.popular {
    padding-top: 100px;             /* Отступ всей секции от шапки сайта */
}

.popular-wrapper {
    max-width: 1500px;              /* Максимальная ширина всей зоны контента */
    width: 95%;                     /* Ширина контейнера на узких экранах */
    margin: 0 auto;                 /* Центрирование всего блока по центру страницы */
    padding-bottom: 30px;           /* Отступ снизу под сеткой */
}

.popular-main-title {
    font-family: var(--font-exo);   /* Шрифт заголовка */
    font-size: 42px;                /* Размер шрифта заголовка */
    font-weight: 700;               /* Жирность заголовка */
    margin-bottom: 30px;            /* Расстояние от заголовка до сетки товаров */
    color: var(--text-main);        /* Цвет текста заголовка */
}

/* Стиль ссылки "Смотреть все" (если она внутри заголовка) */
.popular-main-title a {
    color: inherit;                 /* Наследует цвет от заголовка */
    text-decoration: none;          /* Убирает подчеркивание ссылки */
}
.popular-main-title a:hover {
    color: var(--primary-color);    /* Цвет ссылки при наведении мышки */
}

.popular-grid {
    display: grid;                  /* Включает режим сетки */
    grid-template-columns: repeat(5, 1fr); /* Создает ровно 5 колонок одинаковой ширины */
    gap: 25px;                      /* Расстояние (промежуток) между карточками товаров */
    margin-bottom: 10px;            /* Отступ снизу под всей сеткой */
}

.popular-case {
    width: 100%;                    /* Карточка занимает всю ширину своей колонки */
    min-height: 300px;              /* Минимальная высота карточки */
    height: auto;                   /* Разрешает карточке расти вниз, если текста много */
    background: var(--nav-bg);      /* Цвет фона карточки */
    border-radius: 20px;            /* Скругление углов карточки */
    display: flex;                  /* Включает гибкий контейнер для выравнивания */
    box-shadow: var(--shadow);      /* Тень карточки */
    transition: var(--transition);  /* Плавность всех эффектов (наведение, тень) */
    border: 1px solid transparent;  /* Прозрачная рамка (нужна для появления при наведении) */

    padding: 15px;                  /* Внутренний отступ ОТ КРАЕВ карточки СО ВСЕХ СТОРОН */
    box-sizing: border-box;         /* Чтобы отступы не увеличивали общую ширину карточки */
}

.popular-case:hover {
    box-shadow: 0 8px 25px rgba(0, 99, 206, 0.2); /* Усиление тени при наведении */
    border-color: var(--primary-color);           /* Появление цветной рамки при наведении */
}

.popular-inner {
    width: 100%;                    /* Внутренний блок занимает всю ширину внутри padding */
    display: flex;                  /* Включает колонку для элементов внутри */
    flex-direction: column;         /* Выстраивает фото, текст и кнопку сверху вниз */
    gap: 8px;                      /* Фиксированный ПРОМЕЖУТОК МЕЖДУ ВСЕМИ элементами внутри */
}

.popular-img {
    width: 100%;                    /* Контейнер фото занимает всю ширину */
    height: 248px;                  /* Размер (высота) блока фото для пропорции 248x248 */
    display: flex;                  /* Центрирует картинку внутри */
    justify-content: center;        /* Центрирует картинку по горизонтали */
    align-items: center;            /* Центрирует картинку по вертикали */
    background-size: cover;         /* Растягивает фоновое изображение (если есть) */
    background-position: center;    /* Центрирует фоновое изображение */
    border-radius: 15px;            /* Скругление углов блока фото */
}

/* Фоны для прозрачных товаров (названия классов из твоего кода) */
.bg-1 { background-image: url('/BPStest2/img/katalog/bg-1.png'); }
.bg-2 { background-image: url('/BPStest2/img/katalog/bg-2.png'); }
.bg-3 { background-image: url('/BPStest2/img/katalog/bg-3.png'); }

.popular-img img {
    max-width: 100%;                /* Картинка не вылазит за ширину блока */
    max-height: 100%;               /* Картинка не вылазит за высоту блока */
    object-fit: contain;            /* Сохраняет пропорции фото товара без обрезки */
    border-radius: 15px;            /* Скругление углов самой картинки */
}

.popular-title {
    font-family: var(--font-exo);   /* Шрифт названия товара */
    font-size: 20px;                /* Размер шрифта названия */
    font-weight: 700;               /* Жирность шрифта названия */
    margin: 0;                      /* Убирает лишние отступы (используем gap выше) */
    color: var(--text-main);        /* Цвет названия товара */
}

.popular-label {
    font-family: var(--font-roboto);/* Шрифт характеристик */
    font-size: 14px;                /* Размер шрифта характеристик */
    color: var(--text-main);        /* Цвет шрифта характеристик */
    opacity: 0.8;                   /* Прозрачность текста характеристик */
    flex-grow: 1;                   /* Растягивает этот блок, выталкивая кнопку вниз */
    margin: 0;                      /* Убирает лишние отступы */
}

.btn-popular {                                     
    width: 100%;                    /* Кнопка на всю ширину карточки */
    height: 48px;                   /* Высота кнопки */
    min-height: 48px;               /* Запрещает кнопке сжиматься по высоте */
    background: rgb(162, 207, 255); /* Цвет фона кнопки */
    border-radius: 15px;            /* Скругление углов кнопки */
    display: flex;                  /* Включает центрирование текста внутри кнопки */
    align-items: center;            /* Центрирует текст кнопки по вертикали */
    justify-content: center;        /* Центрирует текст кнопки по горизонтали */
    text-decoration: none;          /* Убирает подчеркивание текста ссылки */
    transition: 0.3s ease;          /* Скорость смены цвета при наведении */
}

.btn-popular span { 
    font-weight: 700;               /* Жирность текста на кнопке */
    font-size: 18px;                /* Размер шрифта на кнопке */
    color: #333;                    /* Цвет текста на кнопке */
}

.btn-popular:hover { background: var(--primary-color); } /* Цвет кнопки при наведении */
.btn-popular:hover span { color: #fff; }                 /* Цвет текста на кнопке при наведении */

/* Блок с кнопкой "Смотреть все" под сеткой */
.popular-footer {
    display: flex;                  /* Включает центрирование кнопки */
    justify-content: center;        /* Ставит кнопку ровно по центру страницы */
    width: 100%;                    /* Растягивает контейнер на всю ширину */
    margin-top: 40px;               /* Отступ кнопки от сетки товаров */
    margin-bottom: 20px;            /* Отступ снизу страницы */
}

/* КНОПКА "СМОТРЕТЬ ВСЕ" */
.view-all-link {
    width: 220px;                   /* Ширина кнопки */
    height: 55px;                   /* Высота кнопки */
    background: var(--nav-bg);      /* Цвет фона кнопки */
    display: flex;                  /* Центрирование текста внутри */
    align-items: center;            /* Центрирование текста по вертикали */
    justify-content: center;        /* Центрирование текста по горизонтали */
    text-decoration: none;          /* Убирает подчеркивание */
    border-radius: 25px;            /* Овальное скругление кнопки */
    font-family: var(--font-exo);   /* Шрифт кнопки */
    font-weight: 700;               /* Жирность шрифта */
    font-size: 18px;                /* Размер шрифта */
    color: var(--primary-color);    /* Цвет текста (основной синий) */
    box-shadow: var(--shadow);      /* Тень кнопки */
    border: 1px solid var(--primary-color); /* Рамка вокруг кнопки */
    transition: 0.3s ease;          /* Плавность эффектов */
    cursor: pointer;                /* Меняет курсор на "палец" при наведении */
}

/* Эффект при наведении на "Смотреть все" */
.view-all-link:hover {
    background: var(--primary-color);               /* Кнопка заливается синим */
    color: #fff;                                    /* Текст становится белым */
    transform: translateY(-3px);                    /* Кнопка слегка "всплывает" вверх */
    box-shadow: 0 6px 20px rgba(0, 99, 206, 0.3);   /* Тень становится мягче и больше */
}

/* ТЕМНАЯ ТЕМА */
[data-theme="dark"] .view-all-link {
    background: #1e1e1e;            /* Темный фон кнопки в темной теме */
    border-color: var(--primary-color); /* Синяя рамка остается */
    color: #fff;                    /* Текст белый */
}

/* ======================== НАВИГАЦИЯ В КАТАЛОГЕ (КНОПКИ) ======================== */
.catalog-fast-nav {
    display: flex !important;      /* Включаем гибкий контейнер */
    flex-wrap: wrap;               /* Разрешаем перенос на мобильных */
    gap: 12px;                     /* Расстояние между кнопками */
    margin: 20px 0 40px 0;         /* Отступы вокруг блока */
    justify-content: center;       /* Центрируем кнопки */
    width: 100%;
}

.fast-nav-item {
    display: inline-block !important; /* Делаем ссылку блоком, чтобы padding сработал */
    padding: 10px 22px;               /* Внутренние отступы (высота и ширина кнопки) */
    background: var(--nav-bg);        /* Берем твой цвет из переменных */
    border: 1px solid var(--border-color);
    border-radius: 50px;              /* Делаем края круглыми */
    
    text-decoration: none;            /* Убираем синее подчеркивание */
    color: var(--text-main);          /* Твой цвет текста */
    font-family: var(--font-exo);
    font-weight: 700;
    font-size: 15px;
    
    transition: all 0.3s ease;        /* Плавность анимации */
    box-shadow: var(--shadow);        /* Твоя стандартная тень */
}

.fast-nav-item:hover {
    background: var(--primary-color); /* При наведении — синий фон */
    color: #fff;                      /* Белый текст */
    transform: translateY(-2px);      /* Кнопка чуть подпрыгивает */
    box-shadow: 0 5px 15px rgba(0, 99, 206, 0.3);
}

/* Плавная прокрутка к разделам */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   ИЗОЛИРОВАННЫЕ СТИЛИ СТРАНИЦЫ КАТАЛОГА
   ========================================================================== */

.catalog-page-section { padding: 140px 0 80px; }
.catalog-container-fixed { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.catalog-title-main { font-family: var(--font-exo); font-size: 36px; font-weight: 700; color: var(--text-main); text-align: center; margin-bottom: 50px; }

.catalog-nav-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }

.catalog-nav-item {
    display: flex;
    flex-direction: column;
    background: var(--nav-bg);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transition: all var(--transition);
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.catalog-nav-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 99, 206, 0.15);
    border-color: var(--primary-color);
}

.catalog-nav-img-wrapper {
    width: 100%;
    height: 200px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #ffffff;
    transition: background var(--transition);
}

[data-theme="dark"] .catalog-nav-img-wrapper { 
    background: var(--nav-bg);
}

.catalog-nav-img-wrapper img { 
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform var(--transition);
    border-radius: 20px;
}
.catalog-nav-item:hover .catalog-nav-img-wrapper img {
    transform: scale(1.08);
}

.catalog-nav-info { 
    padding: 10px 10px 25px;
    text-align: center;
}
.catalog-nav-label { 
    display: block;
    font-family: var(--font-exo);
    font-weight: 700;
    font-size: 17px;
    color: var(--text-main);
    transition: color var(--transition);
}
.catalog-nav-item:hover .catalog-nav-label {
    color: var(--primary-color);
}


/* ======================== МОДАЛЬНОЕ ОКНО ======================== */
.modal {
    display: none; 
    position: fixed;
    z-index: 3000;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}

.modal-content {
    background: var(--nav-bg);
    margin: 5% auto;
    padding: 35px;
    border-radius: 25px;
    width: 90%;
    max-width: 800px;
    position: relative;
    color: var(--text-main);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.close-modal {
    position: absolute;
    right: 20px; 
    top: 15px;
    font-size: 30px; 
    cursor: pointer; 
    color: inherit;
    transition: 0.3s;
}

.close-modal:hover {
    color: #ADFF2F;
    transform: rotate(90deg);
}

.modal-body {
    display: flex;
    gap: 40px;
    align-items: stretch; /* Растягивает правую колонку по высоте картинки */
}

.modal-img-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 15px;
    padding: 10px;
}

.modal-img-wrap img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.modal-info {
    flex: 1.2;
    display: flex;
    flex-direction: column; /* Элементы выстраиваются в колонку */
}

.modal-info h2 { 
    font-family: var(--font-exo); 
    font-size: 28px; 
    margin-bottom: 15px; 
}

.modal-text {
    flex-grow: 1; /* Занимает всё свободное место, выталкивая кнопку вниз */
    margin-bottom: 20px;
}

/* Кнопка "Заказать расчет" - СТИЛЬ И ПОЛОЖЕНИЕ */
.btn-modal-order {
    margin-top: auto; /* Пружина: прижимает кнопку к самому низу */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 55px; /* Высота как у кнопки Подробно */
    background: #0066cc;
    border-radius: 15px;
    text-decoration: none;
    transition: 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-modal-order span {
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
}

.btn-modal-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(47, 172, 255, 0.3);
}

/* ТЕМНАЯ ТЕМА (дополнение) */
[data-theme="dark"] .popular-img {
    background-blend-mode: multiply;
    background-color: #444;
}


/* ======================== БРЕНДЫ (Бесконечная лента) ======================== */
.brand {
    padding: 20px 0;
    overflow: hidden;
    background: var(--bg-page);
}

.brand-slider {
    width: 100%;
    display: flex;
}

.brand-track {
    display: flex;
    align-items: center;
    gap: 60px; /* Расстояние между логотипами */
    animation: scroll 40s linear infinite;
}

.brand-track img {
    width: 160px;
    height: auto;
    border-radius: 15px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* Увеличение при наведении */
.brand-track img:hover {
    transform: scale(1.1);
}

/* Остановка анимации при наведении */
.brand-track:hover {
    animation-play-state: paused;
}

/* Анимация скролла */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { 
        /* Смещение на половину ширины трека (ширина 10 логотипов + gap) */
        transform: translateX(calc(-160px * 10 - 60px * 10)); 
    }
}

/* ====== Секция О КОМПАНИИ + (Страница) ====== */
.company {
    background: var(--bg-page);
    padding: 20px 0 20px 0; 
    transition: background var(--transition);
}

.company.page-first {
    padding-top: 130px;
    padding-bottom: 10px;
}

.company-wrapper {
    max-width: 1500px;
    width: 95%;
    margin: 0 auto;
}

.company-main-title {                       
    font-family: var(--font-exo);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-main);
    text-align: left;
    position: relative;
    padding-bottom: 10px;
}

.company-main-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-color);
    opacity: 0.3;
}

.company-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.company-text {                         
    display: flex;
    flex-direction: column;
}

.company-text p {
    font-family: var(--font-roboto);
    font-size: 21px;
    line-height: 1.6;
    color: var(--text-main);
    margin-bottom: 10px;
}

.btn-company {                      
    width: 300px;
    height: 50px;
    background: rgb(162, 207, 255); 
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s ease;
    margin: 20px auto 0; 
}

.btn-company span {
    font-family: var(--font-roboto);
    font-weight: 700;
    font-size: 18px;
    color: #333;
}

.btn-company:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 99, 206, 0.4);
    background: var(--primary-color);
}

.btn-company:hover span {
    color: #fff;
}

.company-image img {
    width: 100%;
    height: auto;
    border-radius: 25px;
    box-shadow: var(--shadow);
    display: block;
}

/* ======================== Фото производство (Слайдер) ======================== */
.production {
    background: var(--bg-page);
    padding: 20px 0 50px 0;
    position: relative;
}

.production-wrapper {
    max-width: 1500px;
    width: 95%;
    margin: 0 auto;
}

.production-title {
    font-family: var(--font-exo);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: left;
    color: var(--text-main);
}

#production-slider {
    padding: 0 70px; 
    position: relative;
}

.splide__slide img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    box-shadow: var(--shadow);
}

/* СТРЕЛКИ */
#production-slider .splide__arrows .splide__arrow {
    width: 50px;
    height: 50px;
    background-color: rgb(162, 207, 255);
    opacity: 1;
    border-radius: 50px;
    transition: 0.3s;
}

#production-slider .splide__arrows .splide__arrow--prev { left: 0; }
#production-slider .splide__arrows .splide__arrow--next { right: 0; }

#production-slider .splide__arrows .splide__arrow svg {
    fill: #333;
    width: 20px;
}

#production-slider .splide__arrows .splide__arrow:hover {
    background-color: var(--primary-color);
}
#production-slider .splide__arrows .splide__arrow:hover svg {
    fill: #fff;
}

/* ПАГИНАЦИЯ (Кружочки) */
#production-slider .splide__pagination {
    bottom: -30px;
    position: relative;
}

#production-slider .splide__pagination__page {
    background: #ccc;
    transition: 0.3s;
}

#production-slider .splide__pagination__page.is-active {
    background-color: var(--primary-color);
    transform: scale(1.4);
}


/* ======================== Блок Услуги ======================== */
.services {
    background: var(--bg-page);
    padding: 30px 0;
}

.services-wrapper {
    max-width: 1500px;
    width: 95%;
    margin: 0 auto;
    padding: 20px 0;
}

.services-main-title {
    font-family: var(--font-exo);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--text-main);
    text-align: left;
}

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

/* Карточка */
.service-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    background-color: var(--nav-bg);
    box-shadow: var(--shadow);
}

/* Блок для фото */
.service-img-wrap {
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    background-color: #fff;
    overflow: hidden;
}

.service-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.service-card:hover .service-img-wrap img {
    transform: scale(1.1);
}

/* Блок с текстом */
.service-info {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-title {
    font-family: var(--font-roboto);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* --------- СТРАНИЦА КОНТАКТОВ --------- */
.contacts-page {
    padding: 140px 0 80px;
}

.contacts-container {
    max-width: 1400px; /* Немного увеличим для широкой строки */
    margin: 0 auto;
    padding: 0 20px;
}

.contacts-main-title {
    text-align: center;
    font-family: var(--font-exo);
    font-size: 32px;
    margin-bottom: 50px;
    color: var(--text-main);
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px;
}

.contact-card {
    background: var(--nav-bg);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-info {
    padding: 30px;
    flex-grow: 1;
}

.factory-name {
    font-family: var(--font-exo);
    color: var(--primary-color);
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: 700;
    text-align: center;
}

/* НОВАЯ СЕТКА ВНУТРИ КАРТОЧКИ */
.contact-details {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.details-left, .details-right {
    flex: 1;
}

.contact-info p {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-main);
}

.contact-map {
    width: 100%;
    height: 250px;
}

.contact-map iframe {
    border: 0;
}

[data-theme="dark"] .contact-map {
    filter: invert(90%) hue-rotate(180deg) brightness(0.9);
}


/* --------- СТРАНИЦА УСЛУГ --------- */
.services-page {
    padding: 140px 0 80px;
}

.services-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.services-main-title {
    text-align: center;
    font-family: var(--font-exo);
    font-size: 32px;
    margin-bottom: 50px;
    color: var(--text-main);
}

/* СЕТКА: Используем Grid для идеального выравнивания высоты */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    gap: 30px;
    align-items: stretch; /* Растягивает карточки по высоте самой высокой в ряду */
}

/* КАРТОЧКА */
.service-card {
    background: var(--nav-bg);
    border-radius: 20px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column; /* Вертикальный стек внутри */
    overflow: hidden;
    height: 100%; /* Занимает всю высоту ячейки сетки */
}

/* ВНУТРЕННИЙ КОНТЕЙНЕР */
.service-info {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1; /* Заставляет этот блок занять всё свободное место */
}

.service-name {
    font-family: var(--font-exo);
    color: var(--primary-color);
    font-size: 22px;
    margin-bottom: 25px;
    font-weight: 700;
    text-align: center;
}

/* ДЕТАЛИ: 2 колонки, выравнивание влево */
.service-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.details-left, .details-right {
    text-align: left;
}

.service-info p {
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--text-main);
}

/* ГАЛЕРЕЯ: Прижимаем к самому низу */
.service-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: auto; /* ВАЖНО: создает пустое пространство над фото, если текста мало */
}

.s-img-item {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.s-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --------- СТРАНИЦА ВАКАНСИЙ --------- */
.vacancies-page {
    padding: 140px 0 80px;
}

.vacancies-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.vacancies-main-title {
    text-align: center;
    font-family: var(--font-exo);
    margin-bottom: 50px;
}

/* Сетка: по 2 в ряд, нечетные по центру */
.vacancies-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch; /* Одинаковая высота карточек */
    gap: 30px;
}

.vacancy-card {
    background: var(--nav-bg);
    border-radius: 20px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0.05);
    flex: 0 1 calc(50% - 15px);
    min-width: 320px;
    display: flex;
    flex-direction: column;
}

.vacancy-info {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Растягивает контент */
}

.vacancy-name {
    font-family: var(--font-exo);
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}

.vacancy-salary {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--text-main);
}

.on-hand {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.7;
}

/* Две колонки данных (как в услугах) */
.vacancy-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    text-align: left;
}

.vacancy-details p {
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-main);
}

/* Кнопка внизу */
.vacancy-actions {
    margin-top: auto; /* Прижимает кнопку к низу карточки */
}

.btn-vacancy {
    display: block;
    width: 100%;
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-vacancy:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}


/* ======================== Фоотер ======================== */
.footer {
    background-color: #1a1c20; /* Глубокий темный цвет */
    color: #e0e0e0;
    font-family: var(--font-roboto);
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 4px solid var(--primary-color);
    margin-top: 3px;
}

.footer-wrapper {
    max-width: 1500px;
    width: 95%;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.8fr; /* Разная ширина колонок */
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-title {
    color: #fff;
    font-family: var(--font-exo);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-logo-img {
    max-width: 140px;
    margin-bottom: 15px;
    filter: brightness(1.1);
    border-radius: 3px;
}

.footer-logo-text {
    font-size: 14px;
    line-height: 1.6;
    color: #bbb;
}

.footer-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.footer-icon-box {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-link {
    color: #e0e0e0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--primary-color);
}

.footer-social-grid {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    gap: 12px;
}

.footer-social-link img {
    width: 36px;
    height: 36px;
    transition: transform 0.3s ease;
}

.footer-social-link:hover img {
    transform: translateY(-5px);
}

.footer-copyright {
    border-top: 1px solid #333;
    padding-top: 25px;
    text-align: center;
    font-size: 13px;
    color: #777;
}