/* ============================================ */
/* ===== ОБЩИЕ СБРОСЫ ===== */
/* ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background: #ffffff;
    color: #000000;
}

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

/* ============================================ */
/* ===== ШАПКА ===== */
/* ============================================ */
.header {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    flex-wrap: wrap;
    gap: 15px;
}

/* ============================================ */
/* ===== ЛОГОТИП ===== */
/* ============================================ */
.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.1;
}

.logo-icon {
    width: 40px;
    height: 40px;
    display: block;
    flex-shrink: 0;
}

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

.logo-inspect {
    font-size: 28px;
    font-weight: 800;
    color: #ffff01;
    letter-spacing: 1.5px;
}

.logo-sub {
    font-size: 12px;
    font-weight: 600;
    color: #000000;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ============================================ */
/* ===== ПРАВЫЙ БЛОК ===== */
/* ============================================ */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* ============================================ */
/* ===== КОНТАКТЫ ===== */
/* ============================================ */
.header-contacts {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.header-phones {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-phone {
    font-size: 22px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    transition: color 0.3s;
    line-height: 1.2;
}

.header-phone:hover {
    color: #ffff01;
}

.header-phone-second {
    font-size: 22px;
    font-weight: 500;
    color: #000000;
}

.header-phone-second:hover {
    color: #ffff01;
}

/* ============================================ */
/* ===== КНОПКА "НАПИСАТЬ В MAX!" ===== */
/* ============================================ */
.messenger-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    padding: 8px 32px;
    background: #000000;
    border: 1.5px solid #000000;
    border-radius: 0px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.messenger-link:hover {
    background: #ffffff;
    transform: translateY(-2px);
    color: #000000;
    border-color: #ffffff;
}

.messenger-icon {
    width: 32px;
    height: 32px;
    display: block;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

.messenger-link:hover .messenger-icon {
    filter: brightness(0) invert(0);
}

/* ============================================ */
/* ===== КНОПКА "ЗАКАЗАТЬ КОНСУЛЬТАЦИЮ" ===== */
/* ============================================ */
.btn-consult {
    display: inline-block;
    padding: 17px 32px;
    background: #ffff01;
    color: #000000;
    font-weight: 700;
    font-size: 15px;
    border-radius: 0px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.btn-consult:hover {
    background: #e0a530;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.692);
}

/* ============================================ */
/* ===== НАВИГАЦИЯ ===== */
/* ============================================ */
.header-nav {
    background: #ffffff;
    border-top: none;
}

.header-nav .container {
    border-top: 2px solid #e2e2e2;
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    gap: 0;
}

.nav-list li {
    margin: 0;
}

.nav-list a {
    display: block;
    padding: 14px 30px;
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: #ffff01;
    transition: all 0.3s ease;
}

.nav-list a:hover::after {
    width: 80%;
}

.nav-list a:hover {
    transform: translateY(-3px);
}

.nav-list a.active {
    color: #000000;
    font-weight: 700;
}

.nav-list a.active::after {
    width: 80%;
    background: #ffff01;
}

.nav-list a.active:hover {
    transform: translateY(-3px);
}

/* ============================================ */
/* ===== ВЫПАДАЮЩЕЕ МЕНЮ (УСЛУГИ) ===== */
/* ============================================ */

/* Контейнер для пункта "Услуги" */
.dropdown-item {
    position: relative; /* Чтобы меню позиционировалось относительно этого пункта */
}

/* Текст "Услуги" (теперь это span, а не ссылка) */
.dropdown-toggle {
    display: block;
    padding: 14px 30px;
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer; /* Курсор-рука при наведении */
    transition: all 0.3s ease;
}

/* Стрелочка ▼ рядом со словом Услуги */
.dropdown-arrow {
    font-size: 8px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

/* Эффект при наведении ... */
.dropdown-item:hover .dropdown-toggle {
    transform: translateY(-3px);
}

/* Скрытое по умолчанию меню */
.dropdown-menu {
    display: none; /* Скрыто */
    position: absolute;
    top: 100%; /* Появляется сразу под пунктом */
    left: 0;
    min-width: 280px;
    background: #2b2b2b; /* Темно-серый фон как на скрине */
    padding: 10px 0;
    list-style: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-radius: 0 0 6px 6px;
    z-index: 1000;
}

/* Треугольник сверху над меню */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px; 
    left: 35px; /* Центрируем треугольник примерно над словом "Услуги" */
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #2b2b2b; /* Цвет совпадает с фоном меню */
}

/* Ссылки внутри выпадающего списка */
.dropdown-menu li a {
    display: block;
    padding: 12px 25px;
    color: #ffffff !important; /* Белый цвет текста */
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.2s ease;
}

.dropdown-menu li a::after {
    display: none !important; /* Убираем желтую полоску снизу у подменю */
}

/* Эффект при наведении на пункты меню */
.dropdown-menu li a:hover {
    background: #3d3d3d; /* Светлее при наведении */
}

/* ===== АНИМАЦИЯ ПОЯВЛЕНИЯ (HOVER) ===== */

/* Показываем меню при наведении на li (родителя) */
.dropdown-item:hover .dropdown-menu {
    display: block;
    animation: fadeDropDown 0.3s ease;
}

/* Сама анимация плавного появления */
@keyframes fadeDropDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================ */
/* ===== ГЛАВНЫЙ ЭКРАН (ЗАМЕНИЛ БЛОГ КОМПАНИИ) ===== */
/* ============================================ */
.main-header {
    background-image: url("../images/podval.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 8vh 0;
    border-bottom: 3px solid #ffff01;
}

/* Затемнение фона */
.main-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.main-header .container {
    position: relative;
    z-index: 2;
}

/* Сетка (Две колонки) */
.main-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% на 50% */
    gap: 60px;
    align-items: center; /* Центрируем по вертикали */
}

/* === ЛЕВАЯ КОЛОНКА === */
.main-header-left {
    display: flex;
    flex-direction: column;
}

.main-title {
    font-size: clamp(32px, 4.5vw, 34px);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 20% 0;
    line-height: 1.2;
}

.yellow-text {
    color: #ffff01;
}

/* === ПРАВАЯ КОЛОНКА (ФОРМА) === */
.main-header-right {
    display: flex;
    justify-content: center;
}

.main-form-box {
    background: #ffffff;
    padding: 3% 5%;
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.main-form-title {
    font-size: 24px;
    font-weight: 800;
    color: #000000;
    margin: 0 5% 10% 2%;
    line-height: 1.2;
}

/* Переопределяем стили формы для этого блока */
.main-form-custom {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.main-form-custom .footer-input,
.main-form-custom .footer-btn {
    width: 100%;
    box-sizing: border-box;
}

.main-form-custom .footer-checkbox {
    align-self: flex-start;
}

/* ============================================ */
/* ===== ПРЕИМУЩЕСТВА (ИКОНКИ + ТЕКСТ) ===== */
/* ============================================ */
.advantages {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.advantage-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    color: #ffff01;
}

.advantage-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

.advantage-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffff01;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.advantage-desc {
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
}

/* ============================================ */
/* ===== БЛОК УСЛУГ (КАРУСЕЛЬ) ===== */
/* ============================================ */
.services-section {
    background: #fcfcfc;
    padding: 60px 0 80px 0;
}

.services-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.services-title {
    font-size: clamp(15px, 4vw, 42px);
    font-weight: 800;
    color: #000000;
    margin: 0;
}

.services-nav {
    display: flex;
    gap: 15px;
}

.services-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #ffff01;
    border: none;
    color: #000000;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.services-btn:hover {
    background: #e0a530;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 0, 0.4);
}

.services-scroll {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding: 10px 5px 20px 5px;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.services-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.service-card {
    flex: 0 0 300px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.service-content {
    position: relative;
    padding: 20px;
    background: #ffffff;
    margin-top: -40px; /* Наезжает на картинку */
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(30,30,30,0.95) 40%);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.service-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.service-desc {
    font-size: 14px;
    color: #cccccc;
    margin: 0 0 20px 0;
    line-height: 1.4;
}

.service-btn {
    display: inline-block;
    padding: 10px 24px;
    background: #ffff01;
    color: #000000;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50px;
    text-decoration: none;
    align-self: flex-start;
    transition: all 0.3s ease;
}

.service-btn:hover {
    background: #e0a530;
    transform: translateY(-2px);
}

/* ============================================ */
/* ===== БЛОК УСЛУГ (АККОРДЕОН) ===== */
/* ============================================ */
.faq-section {
    background: #ffffff;
    padding: 60px 0 80px 0;
}

.faq-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 40px 0;
    line-height: 1.2;
}

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

/* Блок услуги */
.faq-item {
    background: #fffce6;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* Заголовок (название) + кнопка */
.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    cursor: pointer;
    user-select: none;
    transition: background 0.3s ease;
}

.faq-header:hover {
    background: #fff7cc;
}

.faq-name {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
}

/* Круглая желтая кнопка + / × */
.faq-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #ffff01;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
    margin-left: 20px;
}

/* Линии крестика через CSS (плюс) */
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background: #000000;
    border-radius: 2px;
    transition: transform 0.3s ease;
}

.faq-icon::before {
    width: 16px;
    height: 2px;
}

.faq-icon::after {
    width: 2px;
    height: 16px;
}

/* Текст внутри раскрытого блока - СКРЫТ ПО УМОЛЧАНИЮ */
.faq-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 30px;
    color: #333333;
    font-size: 16px;
    line-height: 1.6;
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
    opacity: 0; /* Делаем текст прозрачным */
}

.faq-body p {
    margin-bottom: 15px;
}
.faq-body p:last-child {
    margin-bottom: 0;
}

/* ===== КЛАССЫ ДЛЯ JS (ОТКРЫТОЕ СОСТОЯНИЕ) ===== */
.faq-item.active .faq-icon {
    background: #ffff01;
}

.faq-item.active .faq-icon::before {
    transform: rotate(0deg);
}

.faq-item.active .faq-icon::after {
    transform: rotate(90deg);
}

.faq-item.active .faq-body {
    max-height: 1000px; /* Достаточно для любого текста */
    padding: 0 30px 25px 30px;
    opacity: 1;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .faq-title {
        font-size: 32px;
        margin-bottom: 25px;
    }
    .faq-header {
        padding: 15px 20px;
    }
    .faq-name {
        font-size: 16px;
    }
    .faq-body {
        padding: 0 20px;
        font-size: 14px;
    }
    .faq-item.active .faq-body {
        padding: 0 20px 20px 20px;
    }
    .faq-icon {
        width: 32px;
        height: 32px;
    }
    .faq-icon::before {
        width: 14px;
    }
    .faq-icon::after {
        height: 14px;
    }
}

/* ============================================ */
/* ===== ТЕКСТОВЫЙ БЛОК О КОМПАНИИ ===== */
/* ============================================ */
.about-text-section {
    background: #ffffff;
    padding: 30px 0 60px 0;
}

.about-text-content {
    /* Убираем центрирование и жесткий max-width. 
       Ограничиваем ширину, чтобы блок был аккуратным, 
       но привязан к левому краю контейнера */
    max-width: 850px; 
    margin: 0; /* Прижимаем к левому краю */
}

.about-text-content p {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 20px;
}

.about-text-content p:last-child {
    margin-bottom: 0;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .about-text-content p {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* ============================================ */
/* ===== БЛОК ПРЕИМУЩЕСТВ (ПОЧЕМУ ВЫБИРАЮТ НАС) ===== */
/* ============================================ */
.why-us-section {
    background: #ffffff;
    padding: 60px 0 80px 0;
}
/* Переносим линию на контейнер, чтобы она была ровно под аккордеоном (как в шапке) */
.why-us-section .container {
    border-top: 2px solid #e2e2e2; /* Такая же тонкая серая линия внутри контейнера */
    padding-top: 50px; /* Отступ от линии до заголовка "Почему выбирают именно нас?" */
}

.why-us-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 50px 0;
    line-height: 1.2;
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Карточка преимущества - теперь Flexbox */
.why-us-item {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрируем содержимое по вертикали */
    align-items: center;     /* Центрируем содержимое по горизонтали */
    text-align: center;      /* Текст тоже выравниваем по центру */
    position: relative;
    padding: 20px 10px;      /* Внутренние отступы, чтобы текст не прилипал */
    min-height: 250px;       /* Минимальная высота, чтобы большие цифры не ломали верстку */
}

/* Огромная желтая цифра на фоне */
.why-us-number {
    position: absolute;
    top: 50%; /* Опускаем вниз на половину высоты родителя */
    left: 50%; /* Сдвигаем вправо на половину ширины родителя */
    transform: translate(-50%, -50%); /* Сдвигаем на себя, чтобы встать ровно в центр */
    font-size: 140px;
    font-weight: 900;
    color: #ffff01;
    line-height: 0.8;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.why-us-heading {
    position: relative;
    z-index: 2;
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.why-us-text {
    position: relative;
    z-index: 2;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin: 0;
}

/* Адаптив для планшетов и телефонов */
@media (max-width: 820px) {
    .why-us-grid {
        grid-template-columns: 1fr; /* На телефонах в 1 колонку */
        gap: 50px;
    }
    
    .why-us-number {
        font-size: 100px; /* Чуть меньше цифра на мобилках */
    }

    .why-us-item {
        min-height: 180px; /* Уменьшаем минимальную высоту для телефонов */
    }
}

@media (max-width: 480px) {
    .why-us-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    .why-us-number {
        font-size: 80px;
    }
    .why-us-heading {
        font-size: 20px;
    }
    .why-us-text {
        font-size: 15px;
    }
}

/* ============================================ */
/* ===== БЛОК "ПОЧЕМУ НЕОБХОДИМО ПРОЙТИ ОБУЧЕНИЕ" ===== */
/* ============================================ */
.training-why-section {
    background: #ffffff;
    padding: 0 0 80px 0; /* Убрали верхний отступ (60px), чтобы линия прилегала к предыдущему блоку */
}

/* ДОБАВЛЯЕМ ЭТОТ БЛОК: Переносим линию на контейнер */
.training-why-section .container {
    border-top: 2px solid #e2e2e2; /* Такая же тонкая серая линия */
    padding-top: 60px; /* Отступ от линии до заголовка "Почему необходимо..." */
}

.training-why-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Левая колонка уже, правая шире */
    gap: 50px;
    align-items: center;
}

/* ЛЕВАЯ КОЛОНКА */
.training-why-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.training-why-title {
    font-size: clamp(24px, 3vw, 36px); /* БЫЛО 32-48, СТАЛО 24-36 */
    font-weight: 800;
    color: #000000;
    margin: 0 0 30px 0;
    line-height: 1.1;
}

.training-why-btn {
    display: inline-block;
    padding: 15px 45px;
    background: #ffff01;
    color: #000000;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border-radius: 0px;
    transition: all 0.3s ease;
}

.training-why-btn:hover {
    background: #e0a530;
    transform: translateY(-2px);
}

/* ПРАВАЯ КОЛОНКА */
.training-why-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.training-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fffce6; /* Светло-желтый фон */
    padding: 15px 25px;
    border-radius: 8px;
}

.training-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: #ffff01;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px; /* Небольшое смещение вниз для выравнивания по тексту */
}

.training-icon svg {
    width: 70%;
    height: 70%;
}

.training-text {
    font-size: 18px; /* БЫЛО 16px, СТАЛО 18px (текст стал крупнее) */
    line-height: 1.6; /* Немного увеличили межстрочный интервал для удобства чтения */
    color: #000000;
    margin: 0;
}

/* АДАПТИВ ДЛЯ ПЛАНШЕТОВ И ТЕЛЕФОНОВ */
@media (max-width: 820px) {
    .training-why-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильных */
        gap: 40px;
    }
    
    .training-why-left {
        align-items: flex-start;
    }
    
    .training-why-btn {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .training-why-title {
        font-size: 28px;
    }
    .training-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ============================================ */
/* ===== БЕГУЩАЯ СТРОКА (ССЫЛКА) ===== */
/* ============================================ */
.telegram-marquee-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

/* ============================================ */
/* ===== БЕГУЩАЯ СТРОКА ===== */
/* ============================================ */
.telegram-marquee {
    background: #ffff01;
    padding: 0.1% 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid #ffff01;
    border-bottom: 1px solid #ffff01;
}

.marquee-track {
    display: flex;
    gap: 60px;
    animation: marqueeScroll 20s linear infinite;
    white-space: nowrap;
}

.marquee-track span {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(5px, 3vw, 20px);
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 4px;
    flex-shrink: 0;
}

.marquee-icon {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ===== ПАУЗА ПРИ НАВЕДЕНИИ ===== */
.telegram-marquee-link:hover .marquee-track {
    animation-play-state: paused;
}

/* ============================================ */
/* ===== БЛОК "ОХРАНА ТРУДА ПОД КЛЮЧ" ===== */
/* ============================================ */
.turnkey-section {
    background: #ffffff;
    padding: 0 0 60px 0; /* Сверху отступа нет, чтобы линия прилегала к предыдущему блоку */
}

/* Серая черта перед блоком (точно как в навигации и других блоках) */
.turnkey-section .container {
    border-top: 2px solid #e2e2e2; /* Тонкая серая линия */
    padding-top: 60px; /* Отступ от линии до заголовка */
}

.turnkey-title {
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

.turnkey-text {
    max-width: 900px; /* Ограничиваем ширину текста, чтобы он не растягивался на весь экран */
    margin: 0; /* Прижимаем к левому краю, чтобы выровнять с заголовком */
}

.turnkey-text p {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .turnkey-title {
        font-size: 32px;
    }
    .turnkey-text p {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* ============================================ */
/* ===== БЛОК "ЭТАПЫ РАБОТ" (ЦИФРЫ 1, 2) ===== */
/* ============================================ */
.steps-section {
    background: #ffffff;
    padding: 0 0 60px 0; /* Сверху отступа нет, чтобы линия прилегала к предыдущему блоку */
}

/* Серая черта перед блоком */
.steps-section .container {
    padding-top: 60px;
}

.steps-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

/* Огромная желтая цифра слева */
.step-number {
    flex-shrink: 0;
    font-size: 140px;
    font-weight: 900;
    color: #ffff01;
    line-height: 0.8;
    width: 110px; /* Фиксируем ширину, чтобы текст ровно выравнивался */
    text-align: right;
    margin-top: -5px; /* Чуть подтягиваем вверх для визуального выравнивания */
    user-select: none;
}

.step-content {
    padding-top: 15px; /* Небольшой отступ, чтобы текст не прилипал к верху */
}

.step-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.step-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin: 0;
    max-width: 600px;
}

/* Сдвигаем четные элементы (2 и 4) вправо */
.step-item:nth-child(even) {
    justify-content: flex-end; /* Прижимаем контент к правому краю */
    text-align: left;          /* ТЕКСТ ВЫРАВНИВАЕМ ПО ЛЕВОМУ КРАЮ! */
}

.step-item:nth-child(even) .step-number {
    text-align: right;
    margin-left: 30px;
    margin-right: 0;
}

.step-item:nth-child(even) .step-content {
    order: 1; /* Текст уходит влево (становится первым по порядку) */
    padding-top: 15px;
    padding-right: 20px; /* Небольшой отступ справа, чтобы текст не прилипал к цифре */
    text-align: left;    /* Текст строго по левому краю */
}

.step-item:nth-child(even) .step-desc {
    text-align: left; /* Описание тоже строго по левому краю */
}

/* На мобильных устройствах отменяем шахматный порядок */
@media (max-width: 768px) {
    .step-item:nth-child(even) {
        justify-content: flex-start; /* Возвращаем к левому краю */
        text-align: left;
        padding-left: 0;
    }
}

/* Адаптив для планшетов и телефонов */
@media (max-width: 768px) {
    .step-item {
        gap: 20px;
    }
    .step-number {
        font-size: 80px;
        width: 60px;
        margin-top: 0;
    }
    .step-content {
        padding-top: 5px;
    }
    .step-title {
        font-size: 20px;
    }
    .step-desc {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .steps-grid {
        gap: 40px;
    }
    .step-number {
        font-size: 60px;
        width: 45px;
    }
    .step-title {
        font-size: 18px;
    }
}

/* ============================================ */
/* ===== ПОДВАЛ ===== */
/* ============================================ */
.footer {
    color: #ffffff;
}

/* ===== ВЕРХНЯЯ ЧАСТЬ ===== */
.footer-top {
    background: #ffffff;
    padding: 50px 0 40px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    align-items: start;
}

/* ===== ЛЕВАЯ КОЛОНКА (КОНТАКТЫ) ===== */
.footer-contacts-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-title {
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    margin: 0;
    line-height: 1.1;
    white-space: nowrap;
}

.footer-phone {
    display: block;
    font-size: 28px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    transition: color 0.3s;
    line-height: 1.2;
}

.footer-phone:hover {
    color: #ffff01;
}

.footer-email {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    transition: color 0.3s;
    line-height: 1.2;
}

.footer-email:hover {
    color: #ffff01;
}

/* ===== ЦЕНТРАЛЬНАЯ КОЛОНКА (ФОРМА) ===== */
.footer-form-bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
    margin: 15%;
    align-items: flex-start;
}

.footer-input {
    padding: 20px 18px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.9);
    color: #1a3a5c;
    font-size: 15px;
    transition: border-color 0.3s;
    outline: none;
    width: 100%;
}

.footer-input::placeholder {
    color: #999999;
}

.footer-input:focus {
    border-color: #ffff01;
}

.footer-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #666666;
    cursor: pointer;
    text-align: left;
}

.footer-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #ffff01;
    cursor: pointer;
}

.footer-checkbox a {
    color: #1a3a5c;
    text-decoration: underline;
}

.footer-checkbox a:hover {
    color: #ffff01;
}

.footer-btn {
    padding: 20px 32px;
    background: #ffff01;
    color: #000000;
    font-weight: 700;
    font-size: 16px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.footer-btn:hover {
    background: #e0a530;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

/* ===== НИЖНЯЯ ЧАСТЬ (ЛОГОТИП + ИНФО) ===== */
.footer-bottom {
    background-image: url("../images/podval.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 60px 0;
}

.footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
    z-index: 1;
}

.footer-bottom-container {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.footer-logo {
    width: 128px;
    height: 128px;
    display: block;
    object-fit: contain;
    margin-bottom: 10px;
}

.footer-org-name {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.footer-bottom-phone {
    font-size: 22px;
    font-weight: 700;
    color: #ffff01;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-bottom-phone:hover {
    color: #e0a530;
}

.footer-bottom-email {
    font-size: 18px;
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-bottom-email:hover {
    color: #ffff01;
}

.footer-bottom-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 5px;
}

.footer-bottom-links a {
    font-size: 14px;
    color: #999999;
    text-decoration: underline;
    transition: color 0.3s;
}

.footer-bottom-links a:hover {
    color: #ffff01;
}

.footer-bottom-separator {
    color: #555555;
}

/* ============================================ */
/* ===== АДАПТИВ (МОБИЛЬНЫЕ УСТРОЙСТВА) ===== */
/* ============================================ */
@media (max-width: 1024px) {
    .main-header-grid {
        gap: 40px;
    }
    .main-title {
        font-size: clamp(28px, 4vw, 42px);
    }
}

@media (max-width: 820px) {
    .main-header-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: left;
    }
    
    .main-header-right {
        justify-content: stretch;
    }
    
    .main-form-box {
        max-width: 100%;
        padding: 30px 25px;
    }

    .advantage-icon {
        width: 45px;
        height: 45px;
    }
    .advantage-title {
        font-size: 18px;
    }
    .advantage-desc {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 12px;
        padding: 12px 20px;
    }

    .logo {
        align-items: center;
        justify-content: center;
    }

    .logo-icon {
        width: 32px;
        height: 32px;
    }

    .logo-inspect {
        font-size: 24px;
    }

    .logo-sub {
        font-size: 10px;
    }

    .header-right {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .header-contacts {
        flex-direction: column;
        justify-content: center;
        gap: 12px;
    }

    .header-phones {
        align-items: center;
    }

    .header-phone {
        font-size: 18px;
    }

    .header-phone-second {
        font-size: 15px;
    }

    .messenger-link {
        font-size: 13px;
        padding: 6px 14px;
        justify-content: center;
    }

    .messenger-icon {
        width: 28px;
        height: 28px;
    }

    .btn-consult {
        text-align: center;
        padding: 10px 20px;
        font-size: 14px;
        width: 100%;
    }

    .nav-list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-list a {
        padding: 10px 16px;
        font-size: 14px;
    }

    /* ===== ПОДВАЛ НА МОБИЛКАХ ===== */
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: left;
    }

    .footer-title {
        font-size: 36px;
        white-space: normal;
    }

    .footer-phone {
        font-size: 24px;
    }

    .footer-form-bottom {
        max-width: 100%;
        align-items: stretch;
        margin: 0;
    }

    .footer-btn {
        align-self: center;
        width: 100%;
    }

    .footer-checkbox {
        text-align: left;
    }

    .footer-logo {
        width: 100px;
        height: 100px;
    }

    .footer-org-name {
        font-size: 16px;
    }

    .footer-bottom-phone {
        font-size: 20px;
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: 8px;
    }

    .footer-bottom-separator {
        display: none;
    }

    .service-card {
        flex: 0 0 280px;
    }
}

@media (max-width: 480px) {
    .header-contacts {
        flex-direction: column;
        gap: 8px;
    }

    .messenger-link {
        justify-content: center;
    }

    .header-phone {
        font-size: 16px;
    }

    .header-phone-second {
        font-size: 14px;
    }

    .btn-consult {
        font-size: 13px;
        padding: 10px 16px;
    }

    .nav-list a {
        padding: 8px 12px;
        font-size: 13px;
    }

    .footer-title {
        font-size: 28px;
    }

    .footer-phone {
        font-size: 20px;
    }

    .footer-email {
        font-size: 16px;
    }

    .footer-logo {
        width: 80px;
        height: 80px;
    }

    .footer-bottom-phone {
        font-size: 18px;
    }

    .footer-bottom-email {
        font-size: 16px;
    }

    .main-title {
        font-size: 26px;
    }
    .main-form-title {
        font-size: 20px;
    }
    .main-form-box {
        padding: 25px 20px;
    }
    .advantage-icon {
        width: 40px;
        height: 40px;
    }

    .services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .service-card {
        flex: 0 0 260px;
    }
    .services-title {
        font-size: 28px;
    }
}

/* ============================================ */
/* ===== МОДАЛЬНОЕ ОКНО ===== */
/* ============================================ */
.modal-overlay {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal-window {
    background: #ffffff;
    max-width: 500px;
    width: 100%;
    padding: 40px 30px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.modal-close:hover {
    color: #000;
}

.modal-title {
    font-size: 28px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 15px;
    line-height: 1.2;
}

.modal-desc {
    font-size: 16px;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Поля формы */
.form-group {
    margin-bottom: 15px;
}

.form-input {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
    background: #fcfcfc;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: #ffff01;
    background: #ffffff;
}

/* Чекбокс */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #333;
    margin: 20px 0 25px;
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #ffff01;
    cursor: pointer;
}

.form-checkbox a, .modal-footer-note a {
    color: #000;
    text-decoration: underline;
}

/* Кнопка */
.modal-submit-btn {
    width: 100%;
    padding: 18px;
    background: #ffde00; /* Желтый цвет как на скрине */
    color: #000000;
    font-weight: 700;
    font-size: 18px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-submit-btn:hover {
    background: #e6c800;
    transform: translateY(-2px);
}

.modal-footer-note {
    margin-top: 20px;
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.4;
}

/* Адаптив для мобильных */
@media (max-width: 480px) {
    .modal-window { padding: 30px 20px; }
    .modal-title { font-size: 24px; }
}

/* ============================================ */
/* ===== СТИЛИ ДЛЯ СТРАНИЦЫ СОУТ (sout.html) ===== */
/* ============================================ */
.sout-hero {
    padding: 80px 0 100px 0;
    position: relative;
}

/* Картинку и белый слой вешаем НА КОНТЕЙНЕР, а не на секцию */
.sout-hero .container {
    position: relative;
    background-image: url("../images/back_sout.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px; /* Добавим скругление углов для красоты */
    padding: 10% 4%;
    overflow: hidden; /* Чтобы белый слой не вылезал за скругления */
}

/* Полупрозрачный белый слой поверх картинки (только внутри контейнера) */
.sout-hero .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1;
}

/* Чтобы текст, форма и чекбокс были ПОВЕРХ белого слоя */
.sout-hero .container > * {
    position: relative;
    z-index: 2;
}

.sout-hero-title {
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.sout-hero-sub {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 500;
    color: #444444;
    margin: 0 0 40px 0;
}

/* Форма (в одну строку) */
.sout-hero-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    max-width: 900px;
    margin-bottom: 20px;
}

/* Обертки для полей (чтобы растягивались одинаково) */
.sout-input-wrapper {
    flex: 1;
    min-width: 200px;
}

.sout-input {
    width: 100%;
    padding: 18px 20px;
    border: 2px solid #ffff01;
    border-radius: 50px;
    background: #ffffff;
    font-size: 16px;
    outline: none;
    color: #000000;
    box-sizing: border-box;
}

.sout-input:focus {
    border-color: #e0a530;
}

.sout-input::placeholder {
    color: #999999;
}

/* Кнопка */
.sout-submit-btn {
    padding: 18px 40px;
    background: #ffff01;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.sout-submit-btn:hover {
    background: #e0a530;
    transform: translateY(-2px);
}

/* Чекбокс */
.sout-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #ffff01;
    cursor: pointer;
    max-width: 700px;
}

.sout-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: #ffff01;
    cursor: pointer;
}

.sout-checkbox a {
    color: #000000;
    text-decoration: underline;
}

.sout-checkbox a:hover {
    color: #ffff01;
}

/* Адаптив для страницы СОУТ */
@media (max-width: 768px) {
    .sout-hero {
        padding: 50px 0 60px 0;
    }
    .sout-hero .container {
        padding: 30px 20px;
    }
    .sout-hero-form {
        flex-direction: column;
        align-items: stretch;
    }
    .sout-submit-btn {
        width: 100%;
        text-align: center;
    }
    .sout-checkbox {
        font-size: 13px;
    }
}

/* ============================================ */
/* ===== БЛОК "ЧТО ВХОДИТ В УСЛУГУ" (sout.html) ===== */
/* ============================================ */
.sout-includes-section {
    background: #ffffff;
    padding: 60px 0 80px 0;
}

.sout-includes-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 40px 0;
    line-height: 1.2;
}

.sout-includes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    background: #fffce6; /* Светло-желтый фон */
    border-radius: 16px;
    padding: 40px;
    gap: 0; /* Убираем gap, будем использовать border */
}

/* Колонки */
.sout-includes-col {
    padding: 0 30px;
    position: relative;
}

/* Тонкие вертикальные линии между колонками */
.sout-includes-col:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background: #dcdcdc; /* Светло-серая линия */
}

.sout-includes-heading {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.sout-includes-text {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin: 0;
}

/* Адаптив для планшетов и телефонов */
@media (max-width: 820px) {
    .sout-includes-grid {
        grid-template-columns: 1fr; /* На телефонах в 1 колонку */
        gap: 30px;
        padding: 30px 20px;
    }
    
    .sout-includes-col {
        padding: 0;
    }
    
    /* Убираем вертикальные линии на мобильных */
    .sout-includes-col:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .sout-includes-title {
        font-size: 28px;
    }
    .sout-includes-heading {
        font-size: 18px;
    }
    .sout-includes-text {
        font-size: 15px;
    }
}

/* ============================================ */
/* ===== БЛОК "НАШИ ПРЕИМУЩЕСТВА" (sout.html) ===== */
/* ============================================ */
.sout-advantages-section {
    background: #ffffff;
    padding: 0 0 80px 0;
}

.sout-advantages-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 40px 0;
    line-height: 1.2;
}

.sout-advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Карточка */
.sout-advantage-card {
    border-radius: 20px;
    padding: 35px 30px;
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Фоны для карточек */
.card-gray {
    background: #f5f5f5;
}
.card-beige {
    background: #fffce6;
}
.card-yellow {
    background: #ffff01;
}

/* Иконка в карточке */
.sout-adv-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 25px;
    flex-shrink: 0;
}

.sout-adv-icon svg {
    width: 100%;
    height: 100%;
}

.sout-adv-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.sout-adv-text {
    font-size: 15px;
    line-height: 1.6;
    color: #000000;
    margin: 0;
}

/* Адаптив для планшетов и телефонов */
@media (max-width: 820px) {
    .sout-advantages-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .sout-advantage-card {
        min-height: auto;
        padding: 25px 25px;
    }
    
    .sout-adv-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .sout-advantages-title {
        font-size: 28px;
    }
    .sout-adv-title {
        font-size: 18px;
    }
    .sout-adv-text {
        font-size: 14px;
    }
}

/* ============================================ */
/* ===== БЛОК "ЧТО ТАКОЕ СОУТ?" (sout.html) ===== */
/* ============================================ */
.sout-info-section {
    background: #ffffff;
    padding: 0 0 80px 0;
}

.sout-info-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.sout-info-text {
    max-width: 900px;
    margin: 0;
}

.sout-info-text p {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 25px;
}

.sout-info-text p:last-child {
    margin-bottom: 0;
}

.sout-info-text strong {
    font-weight: 700;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .sout-info-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    .sout-info-text p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 20px;
    }
}

/* ============================================ */
/* ===== БЛОК "ШТРАФЫ ЗА НЕПРОВЕДЕНИЕ СОУТ" (sout.html) ===== */
/* ============================================ */
.sout-fines-section {
    background: #ffffff;
    padding: 0 0 80px 0;
}

.sout-fines-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 30px 0;
    line-height: 1.2;
}

/* Список со стилями (точки) */
.sout-list {
    padding-left: 25px;
    margin: 0 0 25px 0;
    list-style-type: disc;
}

.sout-list li {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 8px;
}

.sout-list li:last-child {
    margin-bottom: 0;
}

/* Переиспользуем стили текста из предыдущего блока, 
   но добавим для списков и жирного шрифта */
.sout-fines-section .sout-info-text p {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 25px;
}

.sout-fines-section .sout-info-text p:last-child {
    margin-bottom: 0;
}

.sout-fines-section .sout-info-text strong {
    font-weight: 700;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .sout-fines-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    .sout-fines-section .sout-info-text p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 20px;
    }
    .sout-list li {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 6px;
    }
}

/* Копируем стили для страницы Обучения (training.html) */
.training-hero {
    padding: 80px 0 100px 0;
    position: relative;
}

/* Картинку и белый слой вешаем НА КОНТЕЙНЕР */
.training-hero .container {
    position: relative;
    background-image: url("../images/back_sout.png"); /* Используем ту же картинку */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 10% 4%;
    overflow: hidden;
}

/* Полупрозрачный белый слой поверх картинки */
.training-hero .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1;
}

/* Чтобы текст, форма и чекбокс были ПОВЕРХ белого слоя */
.training-hero .container > * {
    position: relative;
    z-index: 2;
}

/* ============================================ */
/* ===== БЛОК ТЕКСТА НА ТЕМНОМ ФОНЕ (training.html) ===== */
/* ============================================ */
.training-dark-section {
    background: #3a3a3a; /* Темно-серый фон */
    padding: 60px 0 60px 0;
    margin-top: 40px; /* Небольшой отступ от верхнего блока */
}

.training-dark-content {
    max-width: 900px;
    margin: 0; /* Прижимаем к левому краю, как и остальной контент */
}

.training-dark-title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 25px 0;
    line-height: 1.3;
}

.training-dark-text {
    font-size: 18px;
    line-height: 1.7;
    color: #e0e0e0; /* Светло-серый текст для мягкости */
    margin: 0;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .training-dark-section {
        padding: 40px 0 40px 0;
        margin-top: 30px;
    }
    .training-dark-title {
        font-size: 22px;
    }
    .training-dark-text {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* ============================================ */
/* ===== БЛОК "КОМУ НЕОБХОДИМО ОБУЧЕНИЕ" (training.html) ===== */
/* ============================================ */
.training-who-section {
    background: #ffffff;
    padding: 60px 0 80px 0;
}

.training-who-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

.training-who-content {
    max-width: 900px;
    margin: 0;
}

.training-who-intro {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 15px;
}

/* Список со стилями (точки) */
.training-who-list {
    padding-left: 25px;
    margin: 0;
    list-style-type: disc;
}

.training-who-list li {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 8px;
}

.training-who-list li:last-child {
    margin-bottom: 0;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .training-who-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    .training-who-intro {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 12px;
    }
    .training-who-list li {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 6px;
    }
}

/* ============================================ */
/* ===== БЛОК "ЦЕЛИ И ЗАДАЧИ ОБУЧЕНИЯ" (training.html) ===== */
/* ============================================ */
.training-goals-section {
    background: #ffffff;
    padding: 0 0 80px 0;
}

.training-goals-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.training-goals-intro-wrapper {
    max-width: 900px;
    margin: 0 0 35px 0;
}

.training-goals-intro {
    font-size: 18px;
    line-height: 1.6;
    color: #000000;
    margin: 0;
}

/* Сетка 2x2 */
.training-goals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 40px;
    max-width: 900px;
    margin: 0;
}

/* Элемент списка */
.training-goal-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Желтая иконка галочки */
.training-goal-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-top: 2px; /* Небольшое смещение для выравнивания по первой строке текста */
}

.training-goal-icon svg {
    width: 100%;
    height: 100%;
}

.training-goal-text {
    font-size: 18px;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* Адаптив */
@media (max-width: 820px) {
    .training-goals-grid {
        grid-template-columns: 1fr; /* На планшетах и телефонах в 1 колонку */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .training-goals-title {
        font-size: 32px;
    }
    .training-goals-intro {
        font-size: 16px;
    }
    .training-goal-text {
        font-size: 16px;
    }
    .training-goal-icon {
        width: 28px;
        height: 28px;
    }
}

/* ============================================ */
/* ===== СТИЛИ ДЛЯ СТРАНИЦЫ РАЗРАБОТКИ (docs.html) ===== */
/* ============================================ */
.docs-hero {
    padding: 80px 0 100px 0;
    position: relative;
}

.docs-hero .container {
    position: relative;
    background-image: url("../images/back_sout.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 10% 4%;
    overflow: hidden;
}

.docs-hero .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1;
}

.docs-hero .container > * {
    position: relative;
    z-index: 2;
}

/* ============================================ */
/* ===== БЛОК "ПОЧЕМУ ЭТО НЕ ФОРМАЛЬНОСТЬ?" (docs.html) ===== */
/* ============================================ */
.docs-why-section {
    background: #ffffff;
    padding: 60px 0 80px 0;
}

.docs-why-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

.docs-why-content {
    max-width: 900px;
    margin: 0;
}

.docs-why-list {
    padding-left: 25px;
    margin: 0;
    list-style-type: disc;
}

.docs-why-list li {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 12px;
}

.docs-why-list li:last-child {
    margin-bottom: 0;
}

.docs-why-list li strong {
    font-weight: 700;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .docs-why-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    .docs-why-list li {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 10px;
    }
}

/* ============================================ */
/* ===== БЛОК "ЧТО МЫ ПРЕДЛАГАЕМ" (docs.html) ===== */
/* ============================================ */
.docs-offer-section {
    background: #ffffff;
    padding: 0 0 80px 0;
}

.docs-offer-title {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 35px 0;
    line-height: 1.2;
}

.docs-offer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 40px;
    max-width: 900px;
    margin: 0;
}

/* Элемент списка */
.docs-offer-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Желтая круглая иконка с галочкой */
.docs-offer-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #ffff01;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
}

.docs-offer-icon svg {
    width: 20px;
    height: 20px;
    stroke: #000000; /* Черная галочка внутри круга */
}

.docs-offer-text {
    font-size: 18px;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* Адаптив */
@media (max-width: 820px) {
    .docs-offer-grid {
        grid-template-columns: 1fr; /* На планшетах и телефонах в 1 колонку */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .docs-offer-title {
        font-size: 28px;
    }
    .docs-offer-text {
        font-size: 16px;
    }
    .docs-offer-icon {
        width: 32px;
        height: 32px;
    }
    .docs-offer-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================ */
/* ===== СТИЛИ ДЛЯ СТРАНИЦЫ РИСКОВ (risks.html) ===== */
/* ============================================ */
.risks-hero {
    padding: 80px 0 100px 0;
    position: relative;
}

.risks-hero .container {
    position: relative;
    background-image: url("../images/back_sout.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 10% 4%;
    overflow: hidden;
}

.risks-hero .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1;
}

.risks-hero .container > * {
    position: relative;
    z-index: 2;
}

/* ============================================ */
/* ===== БЛОК "КОМУ ТРЕБУЕТСЯ ОЦЕНКА ПРОФРИСКОВ" (risks.html) ===== */
/* ============================================ */
.risks-who-section {
    background: #ffffff;
    padding: 60px 0 80px 0;
}

.risks-who-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

.risks-who-content {
    max-width: 900px;
    margin: 0;
}

.risks-who-content p {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 20px;
}

.risks-who-content p:last-child {
    margin-bottom: 0;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .risks-who-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    .risks-who-content p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 18px;
    }
}

/* ============================================ */
/* ===== БЛОК "РАЗРЕШИТЕЛЬНАЯ ДОКУМЕНТАЦИЯ" (risks.html) ===== */
/* ============================================ */
.risks-docs-section {
    background: #ffffff;
    padding: 0 0 80px 0;
}

.risks-docs-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

.risks-docs-content {
    max-width: 900px;
    margin: 0;
}

.risks-docs-content p {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 20px;
}

.risks-docs-content p:last-child {
    margin-bottom: 0;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .risks-docs-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    .risks-docs-content p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 18px;
    }
}

/* ============================================ */
/* ===== БЛОК "ОТВЕТСТВЕННОСТЬ" (risks.html) ===== */
/* ============================================ */
.risks-liability-section {
    background: #ffffff;
    padding: 0 0 80px 0;
}

.risks-liability-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #000000;
    margin: 0 0 25px 0;
    line-height: 1.2;
}

.risks-liability-content {
    max-width: 900px;
    margin: 0;
}

.risks-liability-content p {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .risks-liability-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    .risks-liability-content p {
        font-size: 16px;
        line-height: 1.6;
    }
}