/* Общие стили */
body {
    font-family: 'Copperplate', 'Copperplate Gothic Light', serif; /* Необычный и элегантный шрифт */
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    font-size: clamp(14px, 2vw, 18px); /* Минимальный размер 12px, масштабируемый от 2vw до 18px */
    margin-top: 60px; /* Отступ сверху для основного контента, равный высоте шапки */
}

h1, h2, h3, p {
    margin: 0;
}

/* Шапка и навигация */
header {
    position: fixed; /* Фиксированное позиционирование для шапки */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    padding: 0;
    border-bottom: 1px solid transparent;
    z-index: 1000; /* Высокий z-index, чтобы шапка была поверх других элементов */
    display: flex; /* Используем Flexbox */
    align-items: center; /* Выравнивание элементов по вертикали */
    justify-content: space-between; /* Распределение элементов по краям */
}

header::before,
header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px; /* Толщина полоски */
    background-color: #ccc; /* Цвет полоски */
}

header::before {
    top: 0; /* Полоска сверху */
}

header::after {
    bottom: 0; /* Полоска снизу */
}

.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto; /* Центрируем контейнер */
    padding: 0 20px; /* Внутренние отступы для контейнера */
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    margin-right: auto; /* Логотип слева */
    flex-shrink: 0; /* Логотип не сжимается */
    padding-left: 20px; /* Добавьте отступ, если необходимо отодвинуть от левого края */
}

.logo-icon {
    width: 100px; /* Размер значка */
    height: 63px;
    margin-right: 10px; /* Отступ между значком и текстом */
}

.logo h1 {
    font-size: 26px;
    white-space: nowrap; /* Предотвращает перенос текста */
}

.nav-list {
    list-style: none;
    padding: 0;
    display: flex; /* Убедитесь, что элементы отображаются в строку */
    justify-content: flex-start; /* Выравнивание элементов по левому краю */
    margin: 0;
    white-space: nowrap; /* Запрещает перенос текста */
    flex-wrap: nowrap; /* Запрещает перенос элементов */
}

.nav-list li {
    margin: 0 15px; /* Отступы между элементами */
}

.nav-list li a {
    position: relative; /* Для правильного позиционирования */
    color: #000;
    text-decoration: none;
    font-size: clamp(16px, 2vw, 20px) !important; /* Увеличенный базовый размер шрифта */
    transition: background-color 0.3s, color 0.3s; /* Плавный переход цвета */
    padding: 15px 20px; /* Регулируйте отступы, чтобы высота соответствовала шапке */
    display: inline-block; /* Позволяет работать с padding по высоте */
    border-radius: 8px; /* Округлённые углы */
}

.nav-list li a:hover {
    background-color: #2C3E50; /* Темно-синий цвет фона при наведении */
    color: #fff; /* Белый цвет текста при наведении */
}
/* Псевдоэлемент для белой полоски прямо под текстом основного меню */
.nav-list > li > a::after {
    content: ''; /* Пустое содержимое */
    position: absolute; /* Абсолютное позиционирование */
    left: 50%; /* Центрируем относительно текста */
    bottom: 12px; /* Расположено ближе к тексту */
    height: 2px; /* Толщина полоски */
    background-color: white; /* Белый цвет полоски */
    transition: transform 0.3s ease; /* Плавный переход для анимации */
    transform: translateX(-50%) scaleX(0); /* Центрирование и уменьшение ширины до 0 */
}

.nav-list > li > a:hover::after {
    transform: translateX(-50%) scaleX(1); /* Полоска расширяется до ширины текста */
}

/* Эффект при наведении */
.nav-list li a:hover::after {
    width: 80%; /* Полоска занимает 60% ширины текста при наведении */
}

.nav-item {
    position: relative; /* Добавляем относительное позиционирование к элементу навигации */
}

.nav-item > a.active {
    text-decoration: underline; /* Подчеркивание */
    text-decoration-thickness: 1px; /* Толщина подчеркивания уменьшена до 1px */
    text-underline-offset: 6px; /* Отступ подчеркивания снизу увеличен до 6px */
    color: #ffffff; /* Цвет текста при активации */
    background-color: #2C3E50; /* Темно-синий цвет фона для активного элемента */
}

.nav-item > a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px; /* Толщина подчеркивания уменьшена до 1px */
    background-color: #ffffff; /* Цвет подчеркивания */
    left: 0;
    bottom: -6px; /* Позиционирование ниже текста */
    transition: width 0.3s; /* Плавный переход */
}

/* Подменю */
.sub-menu {
    display: none; /* Подменю скрыто по умолчанию */
    position: absolute; 
    top: 100%; 
    left: 0; 
    background-color: #fff; 
    border-radius: 8px; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 
    padding: 5px 10px; /* Сохраняем padding для отступов */
    z-index: 1500; 
    min-width: 200px; 
    white-space: nowrap; 
    border: 2px solid #333; 
    text-align: left; /* Выровняем текст по левому краю */
}

.sub-menu.active {
    display: block; /* Делаем подменю видимым */
}

.sub-menu ul {
    display: block; /* Размещаем элементы в блок */
    padding: 0;
    margin: 0;
    list-style: none; /* Убираем точки */
}

.sub-menu li {
    margin: 0; /* Убираем внешние отступы */
    border-bottom: 1px solid #ccc; /* Горизонтальная линия между заголовками */
    padding: 8px 10px; /* Отступы для элементов подменю */
    text-align: left; /* Выровняем текст по левому краю */
}

.sub-menu li:last-child {
    border-bottom: none; /* Убираем полоску у последнего элемента */
}


.sub-menu li a {
    display: block; /* Используем блоковое отображение для ссылки */
    padding: 8px 15px; /* Отступы, увеличили слева для лучшего выравнивания */
    border-radius: 4px; /* Скругленные углы */
    transition: background-color 0.3s, color 0.3s; /* Плавный переход при наведении */
    font-size: 14px; /* Размер шрифта */
    color: #333; /* Основной цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
    text-align: left; /* Выровняем текст по левому краю */
    position: relative; /* Для абсолютного позиционирования псевдоэлемента */
}
/* Псевдоэлемент для подчеркивания текста по левому краю */
.sub-menu li a::before {
    content: ''; /* Пустое содержимое */
    position: absolute; /* Абсолютное позиционирование */
    left: 3; /* Привязка к левому краю */
    bottom: 5px; /* Позиционирование линии ближе к тексту */
    width: 0; /* Изначальная ширина */
    height: 2px; /* Толщина линии */
    background-color: #ffffff; /* Цвет подчеркивания */
    transition: width 1.1s ease; /* Плавный переход */
}

.sub-menu li a:hover {
    background-color: #2C3E50; /* Цвет фона при наведении */
    color: #ffffff; /* Цвет текста при наведении */
}
.sub-menu li a:hover::before {
    width: 100%; /* Полоска занимает всю ширину текста при наведении */
}
/* Основной контент и секции */
#hero {
    position: relative;
    text-align: left; /* Текст слева */
    color: white;
    margin-top: 0; /* Начинается сразу под шапкой */
}


.hero-text {
    position: absolute; /* Абсолютное позиционирование внутри hero */
    top: clamp(10px, 2vw, 100px); /* Адаптивный отступ сверху */
    left: clamp(10px, 2vw, 100px); /* Адаптивный отступ слева */
    max-width: clamp(187px, 50%, 562px); /* Адаптивный max-width */
    text-align: left;
    color: #ffffff; /* Белый текст */
    overflow-wrap: break-word; /* Перенос слов, если они слишком длинные */
    word-wrap: break-word; /* Перенос слов для совместимости */
    overflow: visible; /* Позволяет блоку увеличиваться */
    white-space: normal; /* Разрешает перенос текста */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
    border-radius: 31px; /* Скругленные углы */
    padding: 20px; /* Внутренний отступ */
}

.hero-text h2 {
    font-size: clamp(14px, 4vw, 24px); /* Адаптивный размер шрифта для заголовка */
}


.heading {
    margin-left: 20px; /* Устанавливает отступ снаружи элемента */
    padding-left: 10px; /* Дополнительный отступ внутри элемента, если нужно */
    font-size: 20px; /* Настройка размера шрифта */
    color: #333; /* Цвет текста */
}

#info-table {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

.info-row {
    display: flex;
    gap: 20px;
    text-align: center;
}

.info-item {
    background-color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    flex: 1;
    min-width: 150px;
}

/* Стилевые блоки, подкатегории и элементы */
.directions-table {
    display: flex;
    flex-wrap: wrap; /* Позволяет элементам переноситься на следующую строку */
    gap: 20px;
    padding: 20px;
}

.direction-item {
    flex: 1 1 calc(33.333% - 20px); /* Задает ширину в одну треть строки */
    max-width: calc(33.333% - 20px); /* Ограничивает максимальную ширину до одной трети */
    background-color: #ecf0f1;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Упорядочивает содержимое по вертикали */
    align-items: center; /* Центрирует содержимое */
    box-sizing: border-box; /* Включает padding в расчет ширины */
}

.direction-header {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    background-color: #f0f0f0;
    transition: background-color 0.3s;
    width: 100%; /* Заполняет ширину контейнера */
}

.direction-header img {
    width: 150px; /* Настройка размера изображения */
    height: 150px;
    margin-right: 15px;
}

.direction-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
    flex: 1; /* Заставляет заголовок занимать оставшееся пространство */
    white-space: nowrap; /* Отключает перенос слов */
    overflow: hidden; /* Скрывает текст, если он слишком длинный */
    text-overflow: ellipsis; /* Добавляет многоточие, если текст слишком длинный */
}

.subcategories {
    max-height: 0; /* Начальное состояние скрытое */
    overflow: hidden; /* Скрытие содержимого */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Плавный переход */
    padding: 0; /* Убираем padding при закрытии */
}

.subcategories.active {
    max-height: 500px; /* Достаточно большая высота для раскрытия контента */
    padding: 10px; /* Восстанавливаем padding при открытии */
    background-color: #f0f0f0; /* Устанавливаем фон */
}

.subcategory-item {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.subcategory-item img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.subcategory-item p {
    font-size: 16px;
    color: #333;
}

/* Таблицы и сетки */
.grid-container {
    display: flex;
    flex-wrap: wrap; /* Позволяет кнопкам переноситься на следующую строку */
    gap: 20px;
    justify-content: center; /* Центрируем содержимое */
    padding: 20px;
}

.grid-category {
    border: 1px solid #ddd; /* Границы категории */
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
    width: 250px; /* Ширина категории */
    margin: 10px;
    text-align: left; /* Выравнивание заголовков категорий */
}

.grid-category h3 {
    margin-top: 0;
    color: #2c3e50; /* Цвет заголовков категорий */
}

.grid-item {
    display: block;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 10px; /* Отступы между кнопками */
}

.grid-item:hover {
    background-color: #2C3E50;
    color: #fff;
}

.autn-item {
    margin-top: 30px; /* Отступ сверху для "АУТН" */
}

.sub-column {
    display: flex;
    flex-direction: column; /* Размещаем элементы в столбик */
    gap: 10px; /* Расстояние между элементами */
    flex: 1; /* Каждый столбец занимает равное пространство */
    background-color: #f5f5f5; /* Более светлый серый цвет для подкатегорий */
    padding: 15px; /* Внутренние отступы для подкатегорий */
    border-radius: 8px; /* Скругленные углы */
    border: 1px solid #ddd; /* Граница для подкатегорий */
    margin-top: 10px; /* Отступ сверху */
}

/* Футер */
.footer {
    background-color: #2c3e50; /* Тёмно-синий фон */
    color: #ffffff; /* Белый текст */
    padding: 40px 20px;
    font-size: 14px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    border-top: 1px solid #444;
}

.footer-column {
    flex: 1;
    margin: 0 20px;
}

.footer-column h4 {
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ffffff; /* Белая линия под заголовком */
    padding-bottom: 5px;
}

.footer-column a {
    color: #ffffff; /* Белый текст ссылок */
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column a:hover {
    color: #1abc9c; /* Зелёный цвет при наведении */
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #444;
    margin-top: 20px;
    font-size: 12px;
    color: #bbb;
}

.company-logos {
    display: flex;
    gap: 20px;
}

.company-logos a img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s;
}

.company-logos a img:hover {
    transform: scale(1.1);
}

/* Меню и боковая панель */
.nav-container {
    display: flex;
    flex: 1; /* Занимает оставшееся пространство */
    justify-content: center; /* Центрируем заголовки */
    align-items: center;
    position: relative;
}



.sidebar {
    position: fixed;
    top: 0;
    right: -300px; /* Меню скрыто */
    width: 250px;
    height: 100%;
    background-color: #f0f0f0;
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: right 0.4s ease-in-out; /* Плавный переход */
}
.sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li {
    margin: 20px 0;
}

.sidebar-nav a {
    color: #333; /* Черные буквы для лучшей читабельности */
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
}

.sidebar-nav a:hover {
    color: #1abc9c; /* Легкое выделение цветом при наведении */
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

/* Строка поиска */
.search-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Центрируем строку поиска */
    padding: 20px; /* Увеличиваем отступы */
    background-color: #f0f0f0; /* Фон */
    margin-top: 20px; /* Отступ сверху для разделения */
}

.search-input {
    width: 230px; /* Увеличенная ширина поля ввода */
    padding: 3px; /* Увеличенные отступы внутри */
    border-radius: 8px 0 0 8px; /* Скругленные углы слева */
    font-size: 16px; /* Увеличенный размер шрифта */
    outline: none; /* Убираем контур при фокусе */
}

.search-button {
    border-left: none; /* Убираем левую границу для слияния с полем ввода */
    background-color: #ddd; /* Фон кнопки */
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-button:hover {
    background-color: #ccc; /* Легкое выделение при наведении */
}

.search-icon {
    width: 20px; /* Размер иконки */
    height: 20px;
}

/* Медиазапросы */
@media (max-width: 600px) {
    .direction-item {
        flex: 1 1 100%; /* Задает ширину на всю строку */
    }
}
.menu-toggle {
    display: none; /* По умолчанию скрыта */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #000; /* Чёрный цвет */
    position: absolute;
    right: 0; /* Привязка к правой стороне */
    z-index: 2000; /* Высокий z-index */
}


@media (max-width: 1200px) {
    .menu-toggle {
        display: block; /* Показать на маленьких экранах */
    }

    .nav-list {
        display: none; /* Скрыть основное меню на маленьких экранах */
    }
}
/* Стили для слайдера */
.slider {
    position: relative;
    width: 100%;
    height: 650px;
    margin: auto;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.6s ease;
    width: 100%;
    height: 100%;
}

.slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

/* Для псевдоэлемента */
.slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2); /* Полупрозрачный черный цвет */
    z-index: 2; /* z-index ниже, чем у текста (.caption) */
}

/* Если используете div затемняющий слой */
.darken-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Полупрозрачный черный цвет */
    z-index: 2; /* z-index ниже, чем у текста (.caption) */
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; /* Белый цвет текста */
    text-align: center;
    font-size: 24px;
    font-family: 'Arial', sans-serif;
    z-index: 3; /* Убедитесь, что z-index выше, чем у затемняющего слоя */
    padding: 10px 20px;
    background: transparent;
    border: none;
}

/* Стили кнопок переключения */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 0; /* Ставим в верхнюю часть слайда */
    width: 100px; /* Увеличили ширину кнопок */
    height: 100%; /* Кнопки по всей высоте слайда */
    padding: 0 20px; /* Внутренние отступы по бокам для удобства нажатия */
    color: #ffffff; /* Белый цвет стрелки */
    background-color: rgba(85, 85, 85, 0.2); /* Полупрозрачный фон */
    border: none; /* Убрали границу */
    user-select: none;
    z-index: 4; /* Высокий z-index для отображения поверх слайдов */
    transition: background-color 0.3s ease, opacity 0.3s ease; /* Плавные переходы */
    opacity: 0.7; /* Начальная прозрачность */
    display: flex;
    align-items: center; /* Центрируем стрелки по вертикали */
    justify-content: center; /* Центрируем стрелки по горизонтали */
}

.prev {
    left: 0; /* Ставим в край слева */
}

.next {
    right: 0; /* Ставим в край справа */
}

/* Эффект при наведении */
.prev:hover, .next:hover {
    background-color: rgba(200, 200, 203, 0.5); /* Более насыщенный фон при наведении */
    opacity: 1; /* Убираем прозрачность при наведении */
}

/* Стили стрелок */
.prev::before, .next::before {
    content: '\2039'; /* Стрелка назад */
    font-size: 48px; /* Увеличенный размер стрелки */
    font-weight: bold;
}

.next::before {
    content: '\203A'; /* Стрелка вперед */
}


/* Индикаторы */
.indicators {
    text-align: center;
    position: absolute;
    bottom: 15px;
    width: 100%;
    z-index: 4; /* Установите более высокий z-index для индикаторов */
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.65); /* Измените цвет на нужный вам (например, #888 для более темного серого) */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.8s ease;
}

.active, .dot:hover {
    background-color: #ffffff; /* Цвет для активного состояния или при наведении */
}

/* Основной контейнер для текста "О компании" */
.company-content {
    background-color: #fff; /* Белый фон для основного контента */
    border-radius: 8px; /* Скругленные углы */
    padding: 30px; /* Внутренние отступы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень для выделения */
    margin: 20px auto; /* Центрируем и добавляем внешний отступ */
    max-width: 800px; /* Максимальная ширина для улучшения читабельности */
    line-height: 1.6; /* Межстрочный интервал для улучшенной читаемости */
}

/* Основной текст (параграфы) с отступами */
.company-content p {
    font-size: 1.15em; /* Размер шрифта для лучшей читаемости */
    margin: 0 0 20px; /* Внешний отступ снизу для отделения абзацев */
    padding-left: 20px; /* Добавлен отступ слева для текста */
    color: #333; /* Темный цвет текста */
    text-align: justify; /* Выравнивание текста по ширине */
    line-height: 1.8; /* Увеличенный межстрочный интервал для читабельности */
    text-indent: 20px; /* Отступ первой строки абзаца */
}

/* Стили для заголовка */
.company-content h1 {
    font-size: 2.5em; /* Увеличенный размер заголовка */
    color: #2c3e50; /* Темно-синий цвет */
    border-bottom: 3px solid #3498db; /* Подчеркивание снизу */
    padding-bottom: 10px; /* Отступ снизу */
    margin-bottom: 30px; /* Внешний отступ */
    text-align: left; /* Выравнивание по левому краю */
}

/* Стили для списков */
.company-content ul {
    padding-left: 40px; /* Увеличенный отступ слева */
    margin-bottom: 20px; /* Внешний отступ для списков */
    color: #444; /* Цвет текста в списках */
    list-style-type: disc; /* Используем маркеры-диски */
}

.company-content ul li {
    margin-bottom: 10px; /* Отступ между элементами списка */
    line-height: 1.6; /* Межстрочный интервал в списках */
}
.production-image {
    display: block; /* Блочное отображение */
    margin: 0 auto 30px; /* Центрируем изображение и добавляем отступ снизу */
    max-width: 50%; /* Изображение не выходит за пределы контейнера */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень для выделения */
}
.directions-section {
    padding: 40px 20px;
    background-color: #f4f4f4;
    text-align: center;
}

.section-title {
    font-size: 2em;
    color: #333;
    margin-bottom: 30px;
}

.directions-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.direction-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    max-width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.direction-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.direction-card h3 {
    font-size: 1.5em;
    color: #2c3e50;
    margin-bottom: 15px;
}

.direction-card p {
    font-size: 1em;
    color: #555;
}
.vacancies-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    position: relative;
}

.vacancies-table thead th {
    position: sticky;
    top: 0;
    background-color: #f4f4f4;
    z-index: 10;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}.vacancies-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto; /* Добавлено для предотвращения обрезки таблицы */
}

.vacancies-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.vacancies-table th, .vacancies-table td {
    padding: 20px;  /* Увеличенный отступ */
    border: 1px solid #ddd;
    vertical-align: top;
    text-align: left;
    font-size: 16px;  /* Увеличенный размер шрифта */
}

.vacancies-table th {
    background-color: #f4f4f4;
    font-weight: bold;
    font-size: 18px;  /* Более крупный шрифт для заголовков */
    position: sticky;  /* Фиксированное положение при прокрутке */
    top: 0;  /* Фиксация заголовков в верхней части */
    z-index: 10;  /* Увеличенный z-index для наложения над контентом */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Легкая тень для разделения заголовков */
}

.vacancies-table tr:nth-child(even) {
    background-color: #f9f9f9;  /* Чередование цветов строк */
}

.vacancies-table tr:hover {
    background-color: #f1f1f1;  /* Эффект наведения */
}

.vacancies-table h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #2c3e50;
}

.vacancies-table ul {
    padding-left: 20px;
    margin: 0;
    list-style-type: disc;
}

.vacancies-table ul li {
    margin-bottom: 10px;
    line-height: 1.5;  /* Улучшенное межстрочное расстояние */
}