@font-face {
    font-family: 'CustomFont';
    /* Проверь, чтобы путь и название файла были ТОЧНЫМИ (с учетом регистра) */
    src: url('../fonts/Corrfix-Regular.woff2') format('woff2'),
         url('../fonts/Corrfix-Regular.woff') format('woff');
    font-weight: 400; /* Это критически важно */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/Corrfix-Medium.woff2') format('woff2'),
         url('fonts/Corrfix-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/Corrfix-DemiBold.woff2') format('woff2'),
         url('fonts/Corrfix-DemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* 2. Общие стили — ОБЪЕДИНЕННЫЙ body */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'CustomFont'; /* Твой основной шрифт */
    background-color: #ffffff;
    font-weight: 400;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased; /* Чтобы шрифт был четче */
}


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

/* Основная обертка хедера */



.header-top {
   position: fixed;
    top: 20px; /* Отступ от верха экрана, как на макете */
    left: 50%; /* Сдвигаем на середину */
    transform: translateX(-50%); /* Точная центровка по горизонтали */
    
    /* ОГРАНИЧЕНИЕ ШИРИНЫ */
    width: 100%; /* На мобилках почти на весь экран */
    max-width: 1200px; /* На десктопе фиксированная ширина */
    
    background: #ffffff;
    padding: 20px 50px;
    border-radius: 30px; /* Овальная форма */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 99999 !important;
    overflow: visible !important;

    /* ВЫРАВНИВАНИЕ ВНУТРИ */
    display: flex;
    justify-content: space-between; /* Логотип слева, кнопки справа */
    align-items: center; /* Всё строго по одной линии по вертикали */
}

body {
    padding-top: 130px; /* Укажи здесь примерную высоту своего Top Bar */
}

/* На мобилках (чтобы не теснились) */
@media (max-width: 1024px) {
    .header-top {
        width: 95%;
        padding: 20px 50px;
    border-radius: 20px; /* Овальная форма */
    }

    /* Скрываем лишние детали текста, если не влезают */
    .header-info-text { display: none; } 
}


@media (max-width: 768px) {
    .header-top {
    width: 95%;
    padding: 12px 15px !important;  

    border-radius: 30px; /* Овальная форма */
    }

    }
    /* Скрываем лишние детали текста, если не влезают */
    .header-info-text { display: none; } 
   


/* Группа с логотипом */
.logo {
   text-decoration: none;
    display: inline-block; /* Чтобы ссылка плотно облегала картинку */
    line-height: 0;        /* Убирает лишние пиксели снизу картинки */
}


.logo-img {
    height: 50px; /* Высота иконки "CF" */
    width: auto;
}

.logo-text {
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
}

/* Группа с адресом и временем */
.header-info {
    display: flex;
    gap: 20px; /* Расстояние между адресом и временем */
    margin-left: auto;    /* МАГИЯ: толкает этот блок (и всё что после него) вправо */
    margin-right: 40px; 
    
}

.info-item {
    display: flex;
    /* Изменяем center на flex-start, чтобы прижать иконку к верху */
    align-items: flex-start; 
    gap: 5px;
    /* Добавим небольшой отступ сверху для иконки, 
       чтобы она стояла идеально вровень с первой строкой текста */
    padding-top: 2px; 
}

.info-item img {
    /* Если иконки слишком большие, ограничиваем их, 
       чтобы они не растягивали строку */
    width: 12px; 
    height: auto;
}

.icon-placeholder {
    width: 0px;
    height: 0px;
    background-color: #f1f1f1;
    border-radius: 50%;
}

.info-text p {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    line-height: 1.3;
}

/* Кнопки в правой части */
.header-actions {
    display: flex;
    gap: 15px;
}

.btn {
    display: inline-block;
    text-decoration: none;
    padding: 15px 25px;
    border-radius: 15px; /* Скругленные края */
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-gray {
    background-color: #f2f2f2;
    color: #333;
}

.btn-yellow {
    background-color: #ffea05; /* Яркий желтый */
    color: #000;
    font-weight: 500
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}





/* Блок навигации */
.main-nav {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 0px solid #f0f0f0; /* Легкая разделительная линия снизу */
}

.nav-wrapper {
    display: flex;
    justify-content: center; /* Центрируем меню по горизонтали */
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 16px; /* Расстояние между кнопками */
    flex-wrap: wrap; /* Чтобы кнопки не вылезали на планшетах */
}

/* Стили кнопок-ссылок */
.nav-link {
    display: inline-block;
    text-decoration: none;
    color: #000;
    padding: 12px 25px;
    border: 2px solid #2a2a2a; /* Тонкая черная рамка */
    border-radius: 50px; /* Форма пилюли */
    font-size: 14px;
    font-weight: 500; /* Используем Medium */
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-link:hover {
    background-color: #000000;
    color: #fff;
}

/* Специфический стиль для кнопки Магазин */
.nav-link-shop {
    background-color: #feffa5; /* Светло-желтый фон */
    border-color: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link-shop:hover {
    background-color: #000000;
    color: #ffffff;
}

/* Стили для мобильного меню (пока скрыто) */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #000;
}

/* --- Адаптивность для меню --- */
@media (max-width: 1024px) {
    .nav-list {
        gap: 15px;
    }
    .nav-link {
        padding: 8px 1px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .nav-list {
        display: none; /* Прячем обычное меню на мобилках */
    }
    .mobile-menu-toggle {
        display: flex; /* Показываем гамбургер */
    }
    .main-nav {
        height: 70px; /* Уменьшаем высоту на мобильных */
    }
}

/* По умолчанию скрываем мобильные элементы на десктопе */
.mobile-actions .btn-menu-trigger {
    display: none;
}

/* --- ПЛАНШЕТНАЯ ВЕРСИЯ (от 768px до 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    
    /* 1. Контейнер: уменьшаем боковые отступы, чтобы выиграть место */
    .container {
        padding: 0 20px;
    }

    /* 2. Top Bar: уменьшаем общие отступы секции */
    .header-top {
        padding: 5px 0;
        gap: 10px;
    }

    /* 3. Логотип: можно чуть уменьшить масштаб */
    .logo-img {
        height: 40px; 
    }

    /* 4. Контакты: уменьшаем расстояние между ними и шрифт */
    .header-info {
        gap: 15px; 
    }
    
    .info-text p {
        font-size: 12px;
    }

    /* 5. Кнопки в шапке: делаем их компактнее */
    .btn {
        padding: 10px 18px;
        font-size: 14px;
    }

    /* 6. Навигационное меню: уменьшаем отступы между ссылками */
    .main-nav {
        height: 80px; /* Промежуточная высота */
    }

    .nav-list {
        gap: 8px;
    }

    .nav-link {
        padding: 8px 15px;
        font-size: 13px;
        border-width: 1px; /* Можно сделать рамку тоньше */
    }

    /* Специфическая кнопка Магазин */
    .nav-link-shop {
        padding: 8px 15px;
    }
}
/* --- МОБИЛЬНАЯ АДАПТАЦИЯ (Меньше 768px) --- */
@media (max-width: 768px) {
    
    /* 1. Скрываем десктопные блоки */
    .header-info, 
    .main-nav,
    .desktop-only {
        display: none !important;
    }

    /* 2. Настраиваем кнопки в шапке */
    .header-top {
        padding: 40px 0;
        justify-content: space-between;
    }

    .header-actions {
        display: flex;
        align-items: center;
    }

    .mobile-actions {
        display: flex;
        gap: 10px; /* Расстояние между Меню и Записаться */
        align-items: center;
    }

    /* Кнопка "Меню ☰" */
    .btn-menu-trigger {
        display: flex !important; /* Показываем её */
        align-items: center;
        gap: 8px;
        background-color: #e5e5e5;
        border: none;
        padding: 10px 15px;
        border-radius: 15px; /* Радиус как на макете */
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }
    #openMenu, .menu-btn-mobile {
    color: #000000 !important; /* Принудительно черный цвет текста */
    text-decoration: none !important; /* Убираем подчеркивание, если оно есть */
    
    /* Дополнительно убедимся, что при нажатии цвет не меняется */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* На всякий случай сбрасываем стили для ссылок внутри этой кнопки */
#openMenu a, 
#openMenu:visited, 
#openMenu:active {
    color: #000000 !important;
}




    /* Кнопка "Записаться" на мобильном */
    .mobile-actions .btn-yellow {
        padding: 10px 15px;
        border-radius: 15px; /* Сильное скругление для мобилки */
        font-size: 14px;
    }

    /* Логотип на мобильном чуть меньше */
    .logo-img {
        display: flex;
     align-items: center;
    height: 42px;
    }
}

/* Базовый стиль для будущего затемнения фона */
.overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: none;
    
    /* Анимация появления */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(0px);
}

.overlay.active {
    display: block !important;
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(5px);
}

/* 1. ВЫПАДАЮЩЕЕ МЕНЮ */
.mobile-dropdown {
    position: fixed;
    top: 100px; /* Если кнопка меню высоко, можно поставить 80px или 90px */
    right: 15px;
    width: 310px;
    background: #fff;
    border-radius: 25px;
    padding: 30px;
    
    /* СЛОЙ: должен быть САМЫМ верхним, чтобы не перекрываться фоном */
    z-index: 100000 !important; 

    /* АНИМАЦИЯ: начальное состояние (скрыто) */
    display: none; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Состояние МЕНЮ при открытии */
.mobile-dropdown.active {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 2. ЗАТЕМНЕНИЕ ФОНА (Оверлей вынесен отдельно) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    
    /* СЛОЙ: чуть ниже меню, но выше контента сайта */
    z-index: 998 !important; 
    
    display: none; /* Скрыт по умолчанию */
}

/* Состояние ОВЕРЛЕЯ при открытии */
.overlay.active {
    display: block !important;
}

/* 3. ЭЛЕМЕНТЫ ВНУТРИ МЕНЮ (Стрелочка и список) */
.dropdown-arrow {
    position: absolute;
    top: -10px;
    right: 155px; /* Настраивай этот параметр, чтобы стрелка была под кнопкой */
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
}

.dropdown-list {
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.dropdown-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2; /* Сделал полоску видимой, чтобы разделять пункты */
    font-size: 15px;
}

.dropdown-list li a span {
    color: #000000;
    font-size: 20px;
}

.btn-consult {
    display: block;
    background-color: #ffea05;
    text-decoration: none;
    color: #000;
    font-weight: 600;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-align: center;
}

.dropdown-info p {
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    color: #bebebe;
    line-height: 1.4;
    margin: 0;
}



/* Контейнер модалки */
/* Базовое состояние фона (невидимый) */
.modal {
    display: flex;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    padding: 15px;
    align-items: center;
    justify-content: center;
    
    /* Анимация появления фона */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(0px);
}

.modal.active {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(5px);
}

/* Белое окно контента */
.modal-content {
    background: #fff;
    width: 100%;
    max-width: 400px; /* Немного расширил для баланса */
    border-radius: 15px; /* Сделал скругление больше, как на макете */
    padding: 30px 25px 30px; /* Увеличил верхний отступ для заголовка */
    position: relative;
    
    /* Анимация окна (выплывание снизу + масштаб) */
    transform: translateY(50px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal.active .modal-content {
    transform: translateY(0) scale(1);
}

/* Заголовок формы */
.modal-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 22px; /* Больше воздуха под заголовком */
    color: #000;
}

/* Группы полей ввода */
.input-group {
    margin-bottom: 15px; /* Увеличил расстояние МЕЖДУ полями */
    position: relative;
}

.input-group input, 
.input-group select {
    width: 100%;
    padding: 18px 25px;
    border: 2px solid #f0f0f0;
    border-radius: 15px;
    font-size: 14px;
    font-family: inherit; /* ИСПРАВЛЕНО: добавлено inherit */
    outline: none;
    appearance: none;
    background-color: #fff;
    transition: border-color 0.3s;
}

.select-arrow {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px; height: 7px;
    /* ИСПРАВЛЕНО: чистый и рабочий SVG путь */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>') no-repeat;
    background-size: contain;
    pointer-events: none;
}

/* Блок согласия */
.policy-check {
    display: flex;
    gap: 12px;
    background: #f8f8f8;
    padding: 18px;
    border-radius: 15px;
    margin: 10px 0; /* Больше отступа от полей и до кнопки */
    align-items: flex-start;
}

.policy-check label {
    font-size: 14px;
    color: #777;
    line-height: 1.4;
}

.policy-check a { color: #000; text-decoration: underline;}

/* Кнопка отправки */
.btn-submit-main {
    width: 100%;
    background: #ffea05; 
    border: none;
    padding: 20px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s;

    color: #000000 !important; /* Принудительно черный цвет текста */
    font-size: 16px;           /* Оптимальный размер для мобилки */
    font-weight: 700;          /* Жирное начертание (Demibold/Bold) */
}
.btn-submit-main:active {
    background-color: #ffea05;
    transform: scale(0.98);
}

.btn-submit-main:hover {
    background-color: #f0db00;
}

.btn-submit-main:active { transform: scale(0.97); }

/* Кнопка закрытия (крестик) */
.close-modal {
    position: absolute;
    top: 25px; right: 25px;
    background: none; border: none;
    font-size: 32px; 
    cursor: pointer; 
    color: #d1d1d1;
    line-height: 1;
    transition: color 0.3s;
}

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


/* Стиль для поля "Консультация" */
.input-readonly {
    background-color: #f9f9f9 !important;
    color: #888 !important;
    cursor: not-allowed;
    border-color: #eee !important;
}

/* Стиль для поля Консультация */
.input-group textarea {
    width: 100%;
    height: 100px;
    padding: 18px 25px;
    border: 2px solid #f0f0f0;
    border-radius: 15px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    resize: none; /* Запрещаем менять размер вручную */
    transition: border-color 0.3s;
}

.input-group textarea:focus {
    color: #000000 !important;;
}
@media (max-width: 768px) {
    /* Контейнер для чекбокса и текста */
    .policy-check {
        display: flex;
        align-items: flex-start; /* Выравнивание по верхнему краю текста */
        gap: 15px;               /* Увеличиваем разрыв между галочкой и текстом */
        padding: 15px;
    }

    /* Увеличиваем саму "коробочку" чекбокса */
    .policy-check input[type="checkbox"] {
        appearance: none;        /* Убираем стандартный вид браузера */
        -webkit-appearance: none;
        width: 20px;             /* Новая ширина */
        height: 20px;            /* Новая высота */
        border: 2px solid #ccc;  /* Рамка */
        border-radius: 6px;      /* Скругление углов */
        background: #fff;
        cursor: pointer;
        flex-shrink: 0;          /* Чтобы чекбокс не сжимался */
        position: relative;
        margin-top: 2px;         /* Совмещаем по центру первой строки текста */
    }

    /* Рисуем галочку при нажатии */
    .policy-check input[type="checkbox"]:checked {
        background-color: #000;  /* Черный фон при выборе */
        border-color: #000;
    }

    .policy-check input[type="checkbox"]:checked::after {
        content: "✓";            /* Символ галочки */
        position: absolute;
        color: #fff;
        font-size: 18px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* Настройка текста рядом */
    .policy-check label {
        font-size: 12px;         /* Чуть крупнее для читаемости */
        line-height: 1.4;
        color: #666;
    }
}





/* Страница Антикоррозийная обработка*/

/* Основной баннер с меню Антикоррозийная обработка*/

.antikor-hero {
    position: relative;
    width: 100%;
    height: 560px; /* Твоя высота */
    display: flex;
    justify-content: center; /* Центрируем контейнер */
    padding-top: 30px; /* Отступ меню от верхнего края */
     content-visibility: auto; 
    contain-intrinsic-size: 1px 560px;
    
}

/* ФОНОВЫЙ БЛОК */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    transform: translateZ(0); 
    
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Фото заполняет блок без искажений */
    border-radius: 80px; /* Скругление всего блока как на фото */
    image-rendering: -webkit-optimize-contrast; 
}

/* МЕНЮ */
.antikor-hero .container {
    position: relative;
    z-index: 10; /* Поднимаем кнопки над фото */
    width: 100%;
    max-width: 1200px;
}

.hero-nav {
    display: flex;
    justify-content: center; /* Центрируем кнопки в ряд */
    align-items: center;
    gap: 12px; /* Расстояние между кнопками */
}

/* Базовый стиль кнопок в баннере */
.hero-btn {
    height: 50px;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/*  Кнопка Антикор (Желтая) */
.btn-yell {
    /* 1. Делаем элемент гибким для центровки текста */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* 2. Размеры и форма */
    width: 130px; /* Немного увеличил, чтобы тексту "Антикор" было просторнее */
    height: 50px;
    border-radius: 25px;
    
    /* 3. Цвета и шрифт */
    background-color: #ffea05;
    color: #000000 !important; /* Принудительно черный */
    font-weight: 600;
    font-size: 15px;
    
    /* 4. Убираем лишнее оформление ссылок */
    text-decoration: none !important; /* Убирает подчеркивание */
    border: none;
}


/* 8. Кнопка Магазин (Белая) */
.btn-white {
    width: 110px;
    background-color: #fff;
    color: #000;
}

/* Анимация кнопок меню главной страницы*/
.hero-btn.btn-outline {
    border: 2px solid #fff; /* Белая рамка, если фон темный */
    color: #fff;
    background: transparent;
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ (для всех кнопок главной) */
.hero-btn:hover {
    background-color: #ffea05 !important; /* Наш фирменный желтый */
    color: #000 !important;               /* Текст всегда черный на желтом */
    border-color: #ffea05 !important;     /* Рамка сливается с фоном */
    transform: translateY(-3px) scale(1.02); /* Твоя "живая" анимация */
    box-shadow: 0 8px 25px rgba(255, 234, 5, 0.4); /* Яркое свечение */
}

/* Особое поведение для изначально желтой кнопки (Антикор), 
   чтобы она не просто оставалась желтой, а давала отклик */
.btn-yell:hover {
    background-color: #fce300 !important; /* Чуть более насыщенный желтый */
    box-shadow: 0 10px 30px rgba(255, 234, 5, 0.5);
}

/* Для белой кнопки (Магазин) */
.btn-white:hover {
    /* При наведении она тоже станет желтой для единообразия */
    background-color: #ffea05 !important;
}



/* Общий стиль для кнопок с обводкой */
.btn-outline {
    border: 1px solid #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.1); /* Легкий эффект стекла */
    backdrop-filter: blur(4px);
}

.btn-outline:hover {
    background: #fff;
    color: #ffea05;
}


/* Индивидуальные ширины по ТЗ */
.btn-w-165 { width: 134px; }
.btn-w-152 { width: 145px; }
.btn-uslugi { width: 130px; }
.btn-w-118 { width: 86px; }
.btn-w-109 { width: 111px; }
.btn-school { width:120px; }
.btn-w-125 { width: 122px; }



/* 2. Мобильная версия (исправленная структура) */
@media (max-width: 768px) {
    .antikor-hero {
        position: relative;
        margin-top: -20px;
        height: 100%;
        min-height: 350px;
        
        overflow: hidden; /* Добавь — обрезает всё, что вылезает */
    }

     .hero-bg {
        width: 100%;
        overflow-x: hidden;
        word-wrap: break-word;
    }
    
    .hero-bg img {
        border-radius: 40px;
    }


}

/* 3. Анимация (чтобы точно сработало) */
/* Анимация баннера 
1. Скрываем кнопки по умолчанию */
.antikor-hero {
    animation: fadeIn 1.2s ease-out forwards; /* Плавное проявление фона */
}
.hero-nav .hero-btn {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out forwards;
}

/* 2. Назначаем индивидуальную задержку для каждой кнопки (шаг 0.1 секунды) */
.hero-nav .hero-btn:nth-child(1) { animation-delay: 0.1s; }
.hero-nav .hero-btn:nth-child(2) { animation-delay: 0.2s; }
.hero-nav .hero-btn:nth-child(3) { animation-delay: 0.3s; }
.hero-nav .hero-btn:nth-child(4) { animation-delay: 0.4s; }
.hero-nav .hero-btn:nth-child(5) { animation-delay: 0.5s; }
.hero-nav .hero-btn:nth-child(6) { animation-delay: 0.6s; }
.hero-nav .hero-btn:nth-child(7) { animation-delay: 0.7s; }
.hero-nav .hero-btn:nth-child(8) { animation-delay: 0.8s; }

/* 3. Анимация появления заголовка и текста (должна идти ПОСЛЕ всех кнопок) */
.hero-content {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 1.2s forwards; /* Начнется через 1.2 сек */
}

/* Сама анимация (убедись, что она у тебя уже прописана выше) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Заголовок H1 */


.antikor-intro {
    padding: 80px 0 0px; /* Большой отступ сверху от баннера */
    background-color: #fff;
}


.main-page-title {
    font-size: 90px; /* Внушительный размер для H1 */
    font-weight: 500; /* Твой Medium */
    line-height: 0.9;
    text-align: center;
    color: #000;
    margin-bottom: 40px;
    max-width: 1200px;
    letter-spacing: -2px; /* Чуть сблизим буквы для стиля */
}



/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 1024px) {
    .main-page-title {
        font-size: 60px;
    }
}

@media (max-width: 768px) {
    .antikor-intro {
        padding: 30px 0 0px;
    }
    
    .main-page-title {
        
        font-size: 44px;
        letter-spacing: -1px;
        text-align: center;
        line-height: 1;
        margin-bottom: 30px;
        
    }
}





/* С ЧЕМ РАБОТАЕМ 3 КАРТОЧКИ */

.info-badges {
    padding: 20px 0;
    background-color: #fff;
}

.badges-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Расстояние между карточками */
}

.badge-item {
    flex: 1; /* Чтобы все карточки были одинаковой ширины */
    background-color: #f5f5f7; /* Тот самый светло-серый фон */
    padding: 30px 40px;
    border-radius: 30px; /* Большое скругление под твой стиль */
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.3s ease;
}

.badge-item:hover {
    transform: translateY(-5px); /* Легкий эффект при наведении */
}

.badge-label {
    font-size: 20px;
    text-align: center;
    color: #292929; /* Серый цвет для подписи */
    font-weight: 400;
}

.badge-value {
    font-size: 38px;
    text-align: center;
    color: #000;
    font-weight: 500; /* Жирный шрифт для главного */
    line-height: 0.7;
}

/* --- АДАПТИВНОСТЬ ДЛЯ МОБИЛОК --- */
@media (max-width: 768px) {
    .badges-wrapper {
        flex-direction: column; /* Карточки встают друг под друга */
        gap: 15px;
    }

    .badge-item {
        padding: 25px 30px;
        border-radius: 30px;
    }

  
.badge-label {
    font-size: 18px;
    color: #292929; /* Серый цвет для подписи */
    font-weight: 400;
}

.badge-value {
    font-size: 26px;
    color: #000;
    font-weight: 500; /* Жирный шрифт для главного */
    line-height: 0.8;
}

}


/* --- Блок Стоимость --- */

.price {
    padding: 100px 0;
    background-color: #fff;
    text-align: center;
    border-radius: 80px;
}

.price-header {
    margin-bottom: 60px;
}

.price-title {
    font-size: 48px;
    letter-spacing: -1px;
    font-weight: 600;
    margin-bottom: 10px;
}

.price-subtitle-box {
    display: inline-block;
    background-color: #feffa5;
    padding: 8px 25px;
    border-radius: 50px;
}

.price-subtitle-box p {
    font-size: 22px;
    font-weight: 400;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
@media (max-width: 768px) {

.price {
    padding: 80px 0;
    background-color: #fff;
    text-align: center;
    border-radius: 80px;
}

.price-header {
    margin-bottom: 0px;
}

.price-title {
    font-size: 36px;
    text-align: center;
    letter-spacing: -1px;
    font-weight: 600;
    margin-bottom: 5px;
}

.price-subtitle-box {
    margin-top: 20px;
    display: inline-block;
    background-color: #feffa5;
    padding: 15px 20px;
    border-radius: 30px;
}

.price-subtitle-box p {
    font-size: 18px;
    text-align: center;
    font-weight: 400;
}
}



/* Блок Стоимость*/


.calc-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 60px 0;
}

/* ЛЕВАЯ ПАНЕЛЬ: Выбор авто */
.calc-panel {
    flex: 0 0 320px;
    background: #ffea05;
    padding: 30px 30px;
    border-radius: 40px;
}

.calc-panel h3 {
    font-size: 24px;
    color: #000000;
    margin-bottom: 40px;
    line-height: 1.1;
}

.select-group select {
    color: #000000 !important; /* Принудительно черный цвет */
    -webkit-appearance: none;  /* Еще раз для iOS, чтобы убрать системные стили */
    appearance: none;
    width: 100%;
    height: 60px;
    border-radius: 20px;
    border: none;
    padding: 0 20px;
    margin-bottom: 20px;
    font-size: 16px;
    appearance: none; /* Убираем стандартную стрелку браузера */
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 20px center;
    cursor: pointer;
}

.select-group select:focus {
    color: #000000;
    outline: none;
}

/* Цвет для невыбранного элемента (плейсхолдера) */
.select-group select option:first-child {
    color: #86868b; /* Серый цвет для "Выберите марку" */
}

/* Цвет для всех остальных опций внутри списка */
.select-group select option {
    color: #000000;
    background-color: #fff;
}

/* ПРАВАЯ ПАНЕЛЬ: Карточки цен */
.price-cards {
    display: flex;
    gap: 20px;
    flex-grow: 1;
}

.p-card {
    flex: 1;
    background: #f5f5f5; /* Тот самый нежно-желтый фон с макета */
    padding: 30px;
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Выделенная карточка (Защита +) */

.p-amount {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
}

.p-type {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 30px;
    color: #000000;
}

.p-type strong {
    font-size: 20px;
    display: block;
}

/* Текст "Выбор клиентов" */
.p-choice {
    color: #07a007; /* Ярко-зеленый как на макете */
    font-weight: 600;
    font-size: 18px;
    margin-top: -25px;
    margin-bottom: 25px;
}

/* Кнопка "Узнать что входит" */
.p-info {
    display: inline-block;    /* ВАЖНО: элемент сжимается до ширины текста */
    width: auto;              /* Убираем растягивание */
    background: none;
    border: none;
    color: #000000 !important;
    font-size: 14px;
    cursor: pointer;
    margin: 0 auto 20px;      /* Центрируем саму кнопку и даем отступ снизу */
    padding-bottom: 2px;      /* Зазор между текстом и пунктиром */
    
    text-decoration: none;
    outline: none;
    border-bottom: 1px dashed #000; /* Теперь линия только под текстом */
    
    /* Если кнопка внутри Flex-контейнера, это поможет ей остаться по центру */
    align-self: center; 
}

/* Желтая кнопка "Записаться" */
.p-card .btn-yellow {
    width: 100%;
    height: 55px;
    background: #ffea05;
    border: none;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
    margin-top: auto; /* Прижимает кнопку к низу */
}

/* АДАПТИВНОСТЬ */
@media (max-width: 1024px) {
    .calc-wrapper {
        flex-direction: column;
    }
    .calc-panel, .price-cards {
        width: 100%;
    }
    .price-cards {
        flex-wrap: wrap;
    }
    .p-card {
        min-width: 280px;
    }
}

@media (max-width: 480px) {
    .p-card {
        width: 100%;
    }

    .calc-panel h3 {
    font-size: 24px;
    margin: 10px;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.1;
}

.calc-panel {
    flex: 0 0 350px;
    padding: 30px 30px;
    color: #ffea05 !important; /* Принудительно черный цвет */
    -webkit-appearance: none;  /* Еще раз для iOS, чтобы убрать системные стили */
    appearance: none;
    border-radius: 40px;
    padding: 20 20px;
    font-size: 16px;
    appearance: none; /* Убираем стандартную стрелку браузера */
    background: #ffea05 url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") 
    no-repeat right 20px center;
    cursor: pointer;
}
 .calc-panel {
        flex: none;
        width: 100%;
        padding: 30px 25px;
        border-radius: 40px;
    }
}


/* Всплывабщее окно "Узнать что входит" */
.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;  /* Увеличиваем ширину */
    height: 40px; /* Увеличиваем высоту */
    background: none;
    border: none;
    font-size: 35px; /* Размер самого символа × */
    color: #bebebe;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* САМОЕ ВАЖНОЕ */
    z-index: 101000 !important; 
    pointer-events: auto !important; /* Гарантируем, что клики проходят */
    padding: 0;
    line-height: 1;
}

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


.info-modal-content {
    width: calc(100% - 0px);
    margin-top: 80px;
    max-width: 450px;
    max-height: 770px;
    background: #fff;
    border-radius: 40px;
    padding: 30px 25px;
    position: relative;
    box-sizing: border-box; /* Важно: чтобы падинги не раздували ширину */
}

.info-header {
    position: relative;
    margin-bottom: 20px;
}

.info-subtitle { font-size: 18px; color: #000; }
.info-title { font-size: 32px; font-weight: 600; margin-top:-5px; }



.info-divider {
    height: 1px;
    background: #f2f2f2;
    margin: 20px 0;
}

.info-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.info-list li {
    position: relative;
    text-align: left;
    padding-left: 30px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.4;
    transition: all 0.3s ease;

     display: block;
    white-space: normal; 
    /* Подбираем ширину, чтобы "пластиковых защит" ушло вниз */
    max-width: 280px; 
}

.info-list li::before {
    content: "";
    position: absolute;
    left: 0; 
    top: 4px; /* Точка всегда напротив первой строки */
    width: 12px; 
    height: 12px;
    border-radius: 50%;
}

/* Зеленые точки для активных услуг */
.info-list li.active::before {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 14px; height: 14px;
    background: #4cd964; /* Сочный зеленый */
    border-radius: 50%;
}

/* Серые точки и зачеркнутый текст для недоступных */
.info-list li.disabled {
    color: #bebebe;
    text-decoration: line-through;
}

.info-list li.disabled::before {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 14px; height: 14px;
    background: #e5e5e5;
    border-radius: 50%;
}


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

    #infoModal {
    display: none; /* По умолчанию скрыто */
    align-items: flex-start; /* Окно будет начинаться сверху, а не центрироваться */
    padding-top: 100px; /* Опускаем окно ниже Top Bar */
    overflow-y: auto; /* Разрешаем скролл всей подложки */
}

#infoModal.active {
    display: flex !important;
}


    .info-modal-content {
          width: 95%;
    max-width: 450px;
    margin: 0 auto 40px;
        padding: 15px 20px; /* Уменьшаем внутренние отступы */
        border-radius: 30px;
        box-sizing: border-box;
    position: relative;
    }

    .info-title {
        font-size: 24px; /* Чуть меньше заголовок */
    }

    .info-list li {
        white-space: normal; 
    word-wrap: break-word;
    max-width: 100%; 
        max-width: 240px;
        font-size: 16px; /* Компактный текст */
        margin-bottom: 14px;
    }
    
}



/* --- Блок Этапы обработки --- */


/* Базовые сбросы */
.advantages,
.advantage-card,
.btn-pulse {
    box-sizing: border-box;
}

.advantages {
width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    /* Твои стили */
    background-color: #000;
    padding: 100px 0;
    border-radius: 80px;
}


.advantages-header {
    margin-bottom: 120px;
}

.advantages-title {
    font-size: 90px;
    color: #fff;
    text-align: center;
    letter-spacing: -1px;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 0px;
}


.advantages-subtitle-box p {
    font-size: 22px;
    color: #fff;
    font-weight: 400;
    margin: 0;
}

/* Сетка карточек */
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}


.advantage-card h3{
    color: #ffea05;
}

.advantage-card {
    background: #252525;
    padding: 35px 35px;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    text-align: left;
    transition: transform 0.3s ease;
    will-change: transform;
}

.advantage-card:hover {
    transform: translateY(-10px);
}

.advantage-icon-placeholder {
    width: 60px;
    height: 60px;
    background: #1a1a1a;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-weight: 700;
    color: #ffea05;
    font-size: 22px;
}

/* Настройка самой картинки внутри */
.advantage-icon-placeholder img {
    width: 40px;            /* Размер иконки внутри плашки */
    height: 40px;
    display: block;

}

.advantage-card h3 {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 15px;
}

.advantage-card p {
    font-size: 18px;
    color: #dadada;
    font-weight: 400;
    line-height: 1.6;
}

.advantage-card p .highlight {
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 90%;
    font-weight: 600;
    color: #fff;
}

.btn-large {
    padding: 20px 60px;
    font-size: 18px;
}

/* Пульсирующая кнопка */
.btn-pulse {
    box-shadow: 0 0 0 0 rgba(255, 234, 5, 0.7);
    animation: pulse 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50px;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    color: #000;
    font-weight: 600;
    will-change: transform, box-shadow;
}

.btn-large.btn-pulse {
    width: 430px;
    padding: 20px;
    font-size: 18px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 234, 5, 0.7);
    }
    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 15px rgba(255, 234, 5, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 234, 5, 0);
    }
}

/* Анимация появления */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Задержки для карточек */
.advantages-grid .advantage-card:nth-child(1) { transition-delay: 0.1s; }
.advantages-grid .advantage-card:nth-child(2) { transition-delay: 0.2s; }
.advantages-grid .advantage-card:nth-child(3) { transition-delay: 0.3s; }
.advantages-grid .advantage-card:nth-child(4) { transition-delay: 0.4s; }
.advantages-grid .advantage-card:nth-child(5) { transition-delay: 0.5s; }
.advantages-grid .advantage-card:nth-child(6) { transition-delay: 0.6s; }

/* Адаптивность */
@media (max-width: 1024px) {
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .advantages {
        padding: 80px 15px;
        margin-top: 20px;
        border-radius: 40px;
    }

    .advantages-header {
        margin-bottom: 35px;
    }

    .advantages-title {
        font-size: 42px;
        line-height: 1.1;
        margin-bottom: 30px;
        text-align: center;
    }

    .advantages-subtitle-box {
        border-radius: 20px;
        padding: 5px 15px;
    }
    
    .advantages-subtitle-box p {
        text-align: center;
        font-size: 16px;
        line-height: 1.3;
        margin: 0;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    /* Убираем задержки на мобилках */
    .advantages-grid .advantage-card {
        transition-delay: 0s !important;
    }

    .advantage-card {
        padding: 25px;
        border-radius: 20px;
        height: auto;
    }

    .advantage-card h3 {
        font-size: 28px;
        text-align: center;
    }

    .advantage-card p {
        text-align: center;
    }
        
 .advantage-icon-placeholder {
    /* 1. Делаем контейнер гибким */
    display: flex;
    align-items: center;    /* Центровка по вертикали */
    justify-content: center; /* Центровка по горизонтали */

    /* 2. Размеры и форма (как на макете) */
    width: 60px;
    height: 60px;
    background: #1a1a1a;    /* Темно-серый фон плашки */
    border-radius: 20px;    /* Скругление углов */
    margin: 0 auto 10px; 
    padding: 0;
    overflow: hidden;
}

/* Настройка самой картинки внутри */
.advantage-icon-placeholder img {
    width: 30px;            /* Размер иконки внутри плашки */
    height: 30px;
    display: block;

}


    .btn-large.btn-pulse {
        width: 100%;
        padding: 18px 10px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .action-hint {
        font-size: 13px;
        margin-bottom: 10px;
    }
}




/*Блок Вопрос-Ответы*/

.faq-main-card {
    padding: 0px 0px;
    background-color: #fff; /* Светлый фон вокруг черного блока */
}

/* Главная черная плашка из дизайна */
.faq-main-card {
     width: 90%;
    background: #fff;
    margin: 0 auto;
    padding: 160px 0px 40px;
    border-radius: 80px; /* Большое скругление как на фото */
    color: #fff;
    text-align: center;
}

.faq-title {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 10px;
     color: #000;
}

.faq-subtitle {
    font-size: 22px;
    color: #000; /* Тусклый серый текст */
    margin-bottom: 50px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Расстояние между кнопками-вопросами */
    max-width: 1200px;
    margin: 0 auto;
}

/* Базовая плашка вопроса (серая) */
.faq-item {
    background: #d9d9d9; /* Темно-серый, почти черный */
    border-radius: 50px; /* Овальные края */
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Активная плашка (желтая) */
.faq-item.active {
    background: #ffea05;
}

/* Стили для кнопки вопроса (заменяет div) */
.faq-question {
    width: 100%;
    padding: 10px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 19px;
    font-weight: 500;
    text-align: left;
    color: #000;
    background: none;
    border: none;
    font-family: inherit;
    transition: all 0.3s ease;
}

/* Фокус для клавиатуры (доступность) */
.faq-question:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    border-radius: 40px;
}

/* Черный текст для активной желтой плашки */
.faq-item.active .faq-question {
    color: #000;
}

.faq-icon {
    font-size: 34px;
    font-weight: 400;
    flex-shrink: 0;
    margin-left: 15px;
}

/* Скрытый ответ */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease-out;
    padding: 0 35px;
    text-align: left;
    color: #000; /* Текст ответа на желтом фоне черный */
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding-bottom: 25px;
}

@media (max-width: 768px) {
    /* 1. Секция и черная карточка */
    .faq-section {
        padding: auto; /* Уменьшаем внешние отступы */
    }

    .faq-main-card {
        padding: 100px 0px; /* Уменьшаем внутренний отступ черного блока */
        border-radius: 40px; /* Скругление меньше, чем на десктопе */
    }

    /* 2. Заголовки */
    .faq-title {
        font-size: 36px; /* Уменьшаем заголовок */
        margin-bottom: 5px;
    }

    .faq-subtitle {
        font-size: 16px; /* Подзаголовок делаем читабельнее */
        margin-bottom: 30px;
        line-height: 1.4;
    }

    /* 3. Список вопросов */
    .faq-list {
        gap: 10px; /* Чуть меньше зазор между вопросами */
    }

    .faq-item {
        border-radius: 20px; /* Уменьшаем скругление плашек */
    }

    .faq-question {
        padding: 15px 20px; /* Увеличиваем высоту кликабельной зоны (UX) */
        font-size: 15px;    /* Комфортный размер текста вопроса */
        line-height: 1.3;
    }

    .faq-question:focus-visible {
        border-radius: 20px;
    }

    .faq-icon {
        font-size: 24px;   /* Плюс (+) делаем чуть аккуратнее */
        margin-left: 10px;
    }

    /* 4. Ответ (текст внутри) */
    .faq-answer {
        padding: 0 20px;   /* Совпадают отступы с вопросом */
    }

    .faq-answer p {
        font-size: 14px;
        line-height: 1.5;
        padding-bottom: 0px;
    }

    /* Расширяем высоту раскрытого ответа для мобилок */
    .faq-item.active .faq-answer {
        max-height: 500px; /* На мобилках текст может вытянуться сильно вниз */
    }
}

.spacer-divider {
    height: 100px;
    width: 100%;
    background-color: #fff; /* Цвет фона сайта */
    display: block;
    clear: both;
}

@media (max-width: 768px) {
    .spacer-divider {
        height: 50px; /* На мобилках поменьше */
    }
}
/*Блок Отзывы*/

.reviews {
    /* Используем padding вместо margin, чтобы избежать схлопывания */
    padding-top: 120px; 
    padding-bottom: 80px;
    
    background-color: #f5f5f5;
    text-align: left;
    width: 100%;
    display: block;
    clear: both; /* Очистка на случай плавающих элементов */
}

.reviews-header {
    margin-bottom: 60px;
    text-align: center;
}

.reviews-title {
    font-size: 48px;
    letter-spacing: -1px;
    font-weight: 600;
    margin-bottom: 10px;
    
}

.reviews-subtitle-box {
    display: inline-block;
    background-color: #feffa5;
    padding: 8px 25px;
    border-radius: 50px;
}

.reviews-subtitle-box p {
    font-size: 22px;
    font-weight: 400;
}

.feedback-link, 
.feedback-link:visited, 
.feedback-link:active, 
.feedback-link:focus {
    color: #000 !important; 
    text-decoration: none;      /* Убираем стандартное подчеркивание */
    outline: none;              /* Убираем рамку при клике */
    border-bottom: 1px dashed #000; /* Оставляем аккуратный пунктир снизу */
}

.feedback-link:hover {
    color: #c3c3c3 !important;
    border-bottom-color: #fff;
}

/* Форма отзывов */

.reviews {
    padding: 0px 0;
    background-color: #fff; /* Светло-серый фон секции */
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;

    /* ОГРАНИЧЕНИЕ ШИРИНЫ */
    max-width: 1200px; /* Устанавливаем твой стандарт ширины */
    margin-left: auto;  /* Центрируем блок */
    margin-right: auto; /* Центрируем блок */
    
    /* Добавим падинги, чтобы на планшетах карточки не липли к краям */
    padding: 0 20px; 
}

.review-card {
    max-height: 1200px;
    background: #f5f5f5;
    padding: 25px 30px;
    border-radius: 35px; /* Крупное скругление как на макете */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    border: 1px solid #f0f0f0; /* Едва заметная рамка */
}

.y-logo {
     width: 24px;  /* Уменьши до 20px или 22px, если 32px много */
    height: 24px; 
}

/* Верхняя часть: Имя и Звезда */

.review-top {
    display: flex;             /* Включаем гибкий контейнер */
    justify-content: space-between; /* Располагаем элементы по краям (имя слева, 5 справа) */
    align-items: center;       /* Выравниваем их строго по одной горизонтальной оси */
    margin-bottom: 15px;       /* Отступ снизу до текста отзыва */
    width: 100%;               /* Растягиваем на всю ширину карточки */
}

/* Настройки для имени */
.review-author{
    margin: 0;                 /* Убираем стандартные отступы заголовка */
    font-size: 17px;
    font-weight: 600;
}

/* Настройки для рейтинга */
.review-stars {
    display: flex;             /* Чтобы звезда и цифра 5 тоже были в ряд */
    align-items: center;
    font-weight: 700;
    font-size: 15px;
}

.star {
    color: #e51e00;            /* Красный цвет Яндекса */
    margin-right: 4px;         /* Небольшой зазор перед цифрой 5 */
    font-size: 18px;
    font-weight: 600;           /* Размер самой звезды */
}

/* Текст отзыва */
.review-body {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 20px;
    
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Футер карточки */
.review-footer {
    display: flex;
    justify-content: space-between;
    align-items: right;
}


.read-full {
    font-size: 14px;
    font-weight: 500;
    color: #b0b0b0; /* Очень светлый серый как на макете */
    text-decoration: none;
}

.read-full:hover {
    color: #000;
}

/* --- Адаптивность для мобилок --- */
@media (max-width: 1024px) {
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .reviews-grid { 
        grid-template-columns: 1fr;
        padding: 0px 0px 0px;
    }

  
    .review-card { min-height: auto;    
       }
    
    
}


.spacer-divider {
    height: 100px;
    width: 100%;
    background-color: #fff; /* Цвет фона сайта */
    display: block;
    clear: both;
}

@media (max-width: 768px) {
    .spacer-divider {
        height: 50px; /* На мобилках поменьше */
    }

.reviews {
    /* Используем padding вместо margin, чтобы избежать схлопывания */
    padding-top: 0px; 
    padding-bottom: 80px;
    
    background-color: #fff;
    text-align: left;
    width: 100%;
    display: block;
    clear: both; /* Очистка на случай плавающих элементов */
}

.reviews-header {
    margin-bottom: 0px;
    text-align: left;
}

.reviews-title {
    text-align: center;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -1px;
    font-weight: 600;
    margin-bottom: 25px;
    
}

.reviews-subtitle-box {
    display: inline-block;
    background-color: #feffa5;
    padding: 10px 15px;
    text-align: center;
    border-radius: 20px;
}

.reviews-subtitle-box p {
    font-size: 18px;
    font-weight: 400;
}

/* Футер карточки */
.review-footer {
    display: flex;
    justify-content: space-between;
    align-items: right;
    margin-top: 25px;
}

Пустой блок для расстояния 
.read-full {
    font-size: 14px;
    font-weight: 500;
    color: #b0b0b0; /* Очень светлый серый как на макете */
    text-decoration: none;
    margin-bottom: 0px;
}

.read-full:hover {
    color: #000;
}

}





/* Контакты */


.contacts-wrapper {
    display: flex;
    gap: 0px;
    padding: 180px 0;
}

/* Карта */
.img-container {
    width: 100%;
    height: 550px;
    margin: 0;
    border-radius: 60px;
    overflow: hidden;
}

/* Инфо-панель */
.contacts-info {
    width: 600px;
    height: 550px;
    background: #ffea05;
    border-radius: 60px;
    padding: 60px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box; /* Чтобы паддинги не раздували ширину */
}


.map-overlay-btn {
    position: absolute;
    height: 50px;
    transform: translateX(-50%);
    margin-top: 100px;
    background: #fff;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 100 !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.contacts-info h2 {
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 30px;
}

.address-box {
    font-style: normal;
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 30px;
    font-weight: 600;
}

.address-box strong { display: block; }

.work-hours {
    font-size: 20px;
    margin-bottom: 50px;
}

/* Блок подписки */
.subscribe-box {
    background: #feffa5;
    padding: 25px;
    border-radius: 40px;
    margin-top: auto;
    font-size: 18px;
}

.subscribe-form {
    display: flex;
    gap: 10px;
    margin-top: 15px;

}

.subscribe-form input {
    width: 300px;
    height: 50px;
    border-radius: 20px;
    border: none;
    padding: 0 20px;
    font-size: 14px;
}
.btn-black {
    width: 150px;
    height: 50px;
    background: #000;
    color: #fff;
    border: none;
    padding: 0 25px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
}

/* АДАПТИВНОСТЬ */
@media (max-width: 1240px) {
    .contacts-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .img-container{
    width:100%;
    height: 300px;
        
    }
   .contacts-info {
        width: 100%; /* На мобилках на всю ширину */
        max-width: 600px; /* Но не шире 600px */
        height: auto;
        min-height: 450px;
    }
}

@media (max-width: 480px) {
    .contacts-wrapper {
    display: flex;
    gap: 0px;
    padding: 60px 0;
}
    
    .contacts-info {
       
        text-align: center;
        padding: 60px 25px;
        border-radius: 40px;
    }

    .contacts-info h2 {
 font-size: 36px;
    }

    .work-hours{
         font-size: 22px;
    }
    .subscribe-form {
        flex-direction: column;
        
    
 .map-container, .contacts-info {
        width: 100%; /* На мобилках на всю ширину */
        max-width: 600px; /* Но не шире 600px */
        height: auto;
        min-height: 450px;
    }
}
/* Блок подписки */
.subscribe-box {
    width:auto;
    align-items: center;
    background: #feffa5;
    padding: 25px;
    border-radius: 40px;
    margin-top: auto;
    font-size: 16px;
}

.subscribe-form {
    
    display: flex;
    gap: 10px;
    margin-top: 20px;

}


.subscribe-form input {
    align-items: center;
    width: auto;
    height: 50px;
    border-radius: 20px;
    border: none;
    padding: 0 20px;
    font-size: 14px;
}
.btn-black {
    align-items: center;
    width: auto;
    height: 50px;
    background: #000;
    color: #fff;
    border: none;
    padding: 0 25px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
}

.map-container {
    width: 100%;
    height: 250px; /* Уменьшаем высоту до комфортной */
    background: #f4f4f4;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
}





/* Футер */
.footer-main {
    background: #000;
    color: #fff;
    border-radius: 80px 80px 0 0; /* Скругление только сверху */
    padding: 100px 0 40px;
    margin-top: -100px; /* "Наезжаем" на карту */
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 80px;
}

.footer-address { font-size: 28px; font-weight: 500; margin-bottom: 25px; line-height: 1.1; }
.footer-hours { color: #888; font-size: 16px; }

.footer-phone { font-size: 28px; font-weight: 500; text-decoration: none; color: #fff; display: block; margin-bottom: 10px; }
.footer-email { color: #888; margin-bottom: 30px; font-size: 16px; }

/* Желтая кнопка "Позвонить" */
.btn-call-yellow {
    display: inline-flex; align-items: center; gap: 25px;
    background: #ffea05; color: #000; padding: 15px 25px;
    border-radius: 40px; text-decoration: none; font-weight: 600;
}

.arrow-circle {
    width: 30px; height: 30px; background: #000; color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

.footer-col p { margin-bottom: 25px; font-size: 20px; font-weight: 500; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: #888; text-decoration: none; transition: 0.3s; }
.footer-links a:hover { color: #ffea05; }

.footer-bottom {
    border-top: 1px solid #222; padding-top: 40px;
    display: flex; justify-content: space-between; align-items: flex-end;
    font-size: 16px; color: #cecece;
}
.footer-bottom-links a { color: #cecece; text-decoration: none; margin-left: 20px; }

@media (max-width: 768px) {
    /* 1. Уменьшаем наезд футера на карту и скругление */
    .footer-main {
        margin-top: -50px; /* Уменьшенный наезд, чтобы карту было видно */
        padding: 60px 20px 40px; /* Немного меньше отступы */
        border-radius: 40px 40px 0 0; /* Уменьшенное скругление для узких экранов */
        text-align: Left; /* Центрируем весь текст внутри */
    }

    .map-overlay-btn {
    position: center; top: 80%; right: 15%;
    transform: translateY(-50%);
    background: #fff;
    padding: 15px 20px;
    border-radius: 30px;
    display: flex; align-items: left; gap: 10px;
    text-decoration: none; color: #000; font-weight: 400;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

    /* 2. Сетка в один столбик */
    .footer-grid {
        grid-template-columns: 1fr; /* Колонки друг под другом */
        gap: 50px; /* Расстояние между блоками */
        margin-bottom: 60px;
    }

    /* 3. Шрифты и кнопки */
    .footer-address {
        font-size: 24px;
        margin-bottom: 15px;
    }


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

    /* Центрируем кнопку "Позвонить" */
    .btn-call-yellow {
        width: 100%; /* На мобилках кнопка на всю ширину удобнее */
        max-width: 300px; /* Но ограничиваем, чтобы не была слишком длинной */
        margin: 0 auto;
        justify-content: center;
    }

    /* 4. Нижняя часть футера */
    .footer-bottom {
        flex-direction: column; /* Элементы друг под другом */
        align-items: center;
        gap: 20px;
        text-align: left;
        padding-top: 30px;
        font-size: 14px;
    }

   .footer-bottom-links {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start; /* Ссылки тоже влево */
        width: 100%;
    }

  .footer-bottom-links a {
        margin-left: 0;         /* Сбрасываем десктопный отступ */
        text-align: left;
    }

    /* Настройка заголовков колонок */
    .footer-col h4 {
        margin-bottom: 15px;
    }
}


    

/* СТРАНИЦА БЛОГ" */


/* Меню" */
    .blog-hero {
    position: relative;
    height: 110px; /* Твоя высота */
    display: flex;
    justify-content: center; /* Центрируем контейнер */
    padding-top: 10px; /* Отступ меню от верхнего края */
    content-visibility: auto;     
}

/* ФОНОВЫЙ БЛОК */
.blog-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    transform: translateZ(0); 
    
}


.blog-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
}

/* Общий стиль всех кнопок в меню */
.blog-btn, .blog-btn-yell, .blog-btn-white {
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease; /* Твоя анимация */
}

/* Контурные кнопки (общий стиль) */
.blog-btn-outline {
    border: 2px solid #000;
    color: #000;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* --- ПОРЯДКОВАЯ НАСТРОЙКА ШИРИНЫ --- */

.nav-1 { width: 165px; } /* Антикор */
.nav-2 { width: 165px; } /* Стоимость */
.nav-3 { width: 152px; } /* Наши работы */
.nav-4 { width: 140px; } /* Доп.услуги */

.nav-5 { /* Блог - Желтая */
    width: 100px;
    background-color: #000;
    color: #fff !important;
    font-weight: 600;
}

.nav-6 { width: 109px; } /* Отзывы */
.nav-7 { width: 125px; } /* Контакты */
.nav-8 { width: 130px; } /* Обучение */

.nav-9 { /* Магазин - Белая */
    width: 110px;
    border: 2px solid #000;
    color: #000 !important;
}



.blog-btn-outline {
    border: 2px solid #000;
    color: #000;
    background-color: transparent;
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ ДЛЯ ВСЕХ КНОПОК (кроме уже желтой) */
.blog-btn:hover, 
.blog-btn-outline:hover, 
.blog-btn-white:hover {
    background-color: #ffea05 !important; /* Фирменный желтый */
    color: #000 !important;               /* Черный текст */
    border-color: #ffea05 !important;     /* Рамка тоже желтеет */
    transform: translateY(-3px) scale(1.02); /* Смещение вверх + легкое увеличение */
    box-shadow: 0 8px 20px rgba(255, 234, 5, 0.3); /* Мягкое желтое свечение */
}

/* Специальный стиль для кнопки Блог (она у тебя черная nav-5) */
.nav-5:hover {
    background-color: #333 !important; /* Делаем чуть светлее при наведении */
    transform: translateY(-3px);
    color: #fff !important;
}

/* Специальный стиль для кнопки Магазин (nav-9) */
.nav-9:hover {
    background-color: #ffea05 !important;
    border-color: #ffea05 !important;
    color: #000 !important;
}

/* Убираем конфликт с анимацией появления ( fadeInUp) */
.blog-nav a {
    /* Чтобы ховер работал корректно после того, как кнопка "выпрыгнула" */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}



/* 2. Мобильная версия (исправленная структура) */
@media (max-width: 768px) {
    .blog-hero {
        position: relative;
        margin-top: 0px;
        height: 100%;
        min-height: 350px;
        display: none;
        overflow: hidden; /* Добавь — обрезает всё, что вылезает */
    }

     .blog-bg {
        width: 100%;
        overflow-x: hidden;
        word-wrap: break-word;
    }
    
    .blog-bg img {
        border-radius: 40px;
    }


}

/* 3. Анимация (чтобы точно сработало) */

.blog-hero {
    animation: fadeIn 1.2s ease-out forwards; /* Плавное проявление фона */
}

/* Все кнопки по умолчанию невидимы и смещены вниз */
.blog-nav .blog-btn, 
.blog-nav .blog-btn-yell, 
.blog-nav .blog-btn-white {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.2s ease-out forwards;
}

/* 2. ИНДИВИДУАЛЬНЫЕ ЗАДЕРЖКИ (ПО ПОРЯДКУ) */
/* Используем nth-child, чтобы не привязываться к именам классов */

.blog-nav a:nth-child(1) { animation-delay: 0.1s; } /* Антикор */
.blog-nav a:nth-child(2) { animation-delay: 0.2s; } /* Стоимость */
.blog-nav a:nth-child(3) { animation-delay: 0.3s; } /* Наши работы */
.blog-nav a:nth-child(4) { animation-delay: 0.4s; } /* Доп.услуги */
.blog-nav a:nth-child(5) { animation-delay: 0.5s; } /* Блог */
.blog-nav a:nth-child(6) { animation-delay: 0.6s; } /* Отзывы */
.blog-nav a:nth-child(7) { animation-delay: 0.7s; } /* Контакты */
.blog-nav a:nth-child(8) { animation-delay: 0.8s; } /* Обучение */
.blog-nav a:nth-child(9) { animation-delay: 0.9s; } /* Магазин */

/* 3. АНИМАЦИЯ КОНТЕНТА (После появления всех кнопок) */
.blog-hero-content {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 1.2s forwards;
}

/* 4. ОПРЕДЕЛЕНИЕ КЛЮЧЕВЫХ КАДРОВ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* 5. ПОРЯДКОВАЯ ШИРИНА (Desktop) */
.nav-1, .nav-2 { width: 165px; }
.nav-3 { width: 152px; }
.nav-4 { width: 140px; }
.nav-5 { width: 100px; background-color: #000000; color: #ffffff !important; }
.nav-6 { width: 109px; }
.nav-7 { width: 125px; }
.nav-8 { width: 130px; }
.nav-9 { width: 110px; background-color: #fff; color: #000 !important; }






/* Баннер с текстом и фильтрами */



/* Основной фон блока (светло-серый/бежевый) */
.banner-blog-hero {
    background-color: #f5f5f5; /* Цвет фона из макета */
    padding: 60px 0 40px 0;
    border-radius: 60px;
}

.banner-blog-hero-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
}

.banner-blog-main-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    color: #1a1a1a;
}

/* Карточка мастера (желтый блок) */
.banner-blog-master-card {
    display: flex;
    align-items: center;
    background-color: #ffea00; /* Твой фирменный желтый */
    border-radius: 40px;
    padding: 20px 30px;
    max-width: 415px;
    position: relative;
}

.master-quote {
    font-size: 16px;
    line-height: 1.4;
    color: #1a1a1a;
    padding-right: 120px; /* Место под фото */
}

.master-photo {
    position: absolute;
    right: 20px;
    bottom: 0;
    width: 135px; /* Размер фото мастера */
    height: 209px;
}

.master-photo img {
    width: 100%;
    display: block;
}

/* БЕЛАЯ ПОЛОСА ФИЛЬТРОВ */
.banner-blog-filter-bar {
    background: #e6e6e6;
    border-radius: 40px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.filter-btn {
    background: none;
    border: none;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 30px;
}

.filter-btn.active {
    background-color: #fff; /* Серый овал для активной кнопки */
    color: #000;
    font-weight: 600;
    
}

.filter-btn:hover:not(.active) {
    color: #000;
    
}

/* АНИМАЦИЯ Весь блок (фон) проявляется первым */
.banner-blog-hero {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

/* Заголовок (появляется через 0.3 сек) */
.banner-blog-main-title {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

/* Желтая карточка мастера (эффект зума через 0.5 сек) */
.banner-blog-master-card {
    opacity: 0;
    animation: zoomIn 0.8s cubic-bezier(0.17, 0.67, 0.83, 0.67) 0.5s forwards;
}

/* Белая полоса фильтров (выплывает последней через 0.8 сек) */
.banner-blog-filter-bar {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

.banner-blog-master-card {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

/* Индивидуальная анимация кнопок внутри полосы (по желанию) */
.filter-btn {
    transition: all 0.3s ease; /* Плавная смена цвета при наведении и клике */
}


/* Хлебные крошки */

.breadcrumbs {
    padding: 40px 0 0px 0; /* Отступ от верхнего баннера */
    background-color: #fff;
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.breadcrumbs li span {
    font-size: 14px;
    color: #1a1a1a;
    opacity: 0.6; /* Делаем текст мягче */
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.breadcrumbs li a {
    text-decoration: none;
}

.breadcrumbs li a:hover span {
    opacity: 1; /* Проявляется при наведении */
}

/* Разделитель как маленькая точка или черточка */
.breadcrumbs .separator::before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background-color: #ccc;
    border-radius: 50%; /* Делает разделитель точкой */
}

/* Адаптив */
@media (max-width: 768px) {

.breadcrumbs {
    padding: 0px 0 0px 0; /* Отступ от верхнего баннера */}

 .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap; /* Позволяет элементам переноситься на вторую строку */
        gap: 8px 12px;   /* Отступы: 8px между рядами, 12px между словами */
        padding: 0 15px;
    }

    .breadcrumbs li {
        display: flex;
        align-items: center;
    }

    /* Делаем так, чтобы длинный заголовок статьи всегда начинался с новой строки */
    .breadcrumbs li:last-child {
        flex-basis: 100%; /* Занимает всю ширину, толкая себя вниз */
        margin-top: 0px;  /* Небольшой отступ от верхнего ряда */
    }

    /* Убираем разделитель перед заголовком на второй строке, если он мешает */
    .breadcrumbs li:last-child::before {
        display: none; 
    }

    .breadcrumbs li span, 
    .breadcrumbs li a span {
        font-size: 13px;
        line-height: 1.4;
        white-space: normal; /* Разрешаем тексту заголовка переноситься, если он очень длинный */
    }
}


/* --- СЕТКА СТАТЕЙ (3 КОЛОНКИ) --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px;
    margin-top: 40px;
}

.blog-item-link { text-decoration: none; color: inherit; }

.blog-item-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #f4f4f4;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 15px;
}

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

.blog-item-info {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
}

.blog-item-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
}

/* --- ПАГИНАЦИЯ (ЖЕЛТЫЙ КРУГ) --- */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
    padding-bottom: 170px;
    padding-top: 100px;
}

.page-num {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 400;
    transition: 0.3s;
}

.page-num.active {
    background-color: #ffea05; /* Твой желтый */
}

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ --- */
@media (max-width: 1024px) {
    .blog-filters-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    .filters-container { align-items: flex-start; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .blog-filters-section {
        padding: 40px 0;
        border-radius: 40px; /* Уменьшаем скругление для мобилок */
        height: auto; /* Сбрасываем высоту */
    }

    .blog-filters-wrapper {
        flex-direction: column; /* Заголовок над кнопками */
        align-items: flex-start;
        gap: 30px;
    }

    .blog-title {
        font-size: 32px; /* Уменьшаем текст, чтобы не ломал экран */
    }

    .filters-container {
        align-items: flex-start; /* Кнопки прижимаем влево */
        width: 100%;
    }

    .filters-row {
        flex-wrap: wrap; /* Разрешаем кнопкам переноситься на новые строки */
        justify-content: flex-start;
    }

    .filter-btn {
        padding: 14px 18px; /* Делаем кнопки компактнее */
        font-size: 14px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшетах */
        margin-top: 20px;
    }
}

@media (max-width: 600px) {
    .blog-page {
margin-top: 0px;
    }
    .blog-grid {
        grid-template-columns: 1fr; /* 1 колонка на телефонах */
    }
    
    .blog-pagination {
        padding-bottom: 120px;
        padding-top: 80px;
    }

    .blog-item-title{
    font-size: 20px;
    }
}


/* --- МОБИЛЬНАЯ ВЕРСИЯ БАННЕРА БЛОГА --- */

@media (max-width: 991px) {
    .banner-blog-hero {
        padding: 40px 15px; /* Уменьшаем отступы и добавляем боковые */
        border-radius: 40px; /* Более аккуратное скругление */
        margin: 0px !important /* Чтобы блок не прилипал к краям экрана */
    }

    .banner-blog-hero-main {
        flex-direction: column; /* Элементы друг под другом */
        align-items: flex-start;
        gap: 30px;
        margin-bottom: 30px;
    }

    .banner-blog-main-title {
        font-size: 32px; /* Уменьшаем заголовок для мобильных */
        text-align: left;
    }

    /* Адаптация карточки мастера */
    .banner-blog-master-card {
        max-width: 100%; /* На всю ширину */
        padding: 20px;
        min-height: 180px; /* Резервируем место под фото */
    }

    .master-quote {
        font-size: 14px;
        padding-right: 90px; /* Оставляем место под уменьшенное фото */
    }

    .master-photo {
        width: 100px; /* Уменьшаем фото мастера */
        height: auto;
        right: 10px;
    }

    /* --- ФИЛЬТРЫ: ПРЕВРАЩАЕМ В СКРОЛЛ-ЛЕНТУ --- */
    .banner-blog-filter-bar {
        background: #e6e6e6;
        padding: 5px;
        overflow-x: auto; /* Включаем горизонтальный скролл */
        display: flex;
        justify-content: flex-start; /* Кнопки идут по порядку */
        gap: 5px;
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iPhone */
        scrollbar-width: none; /* Прячем скроллбар в Firefox */
        border-radius: 30px;
    }

    /* Прячем скроллбар в Chrome/Safari */
    .banner-blog-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        padding: 16px 15px;
        font-size: 14px;
        white-space: nowrap; /* Важно: чтобы текст кнопки не переносился */
        flex-shrink: 0; /* Чтобы кнопки не сжимались */
    }
}

@media (max-width: 480px) {
    .banner-blog-main-title {
        font-size: 32px;
    }
    
    .banner-blog-hero {
        padding: 30px 15px;
    }

    .master-quote {
        font-size: 14px;
        padding-right: 60px;
    }

    .master-photo {
        width: 90px;
    }
}












/* --- КЛЮЧЕВЫЕ КАДРЫ АНИМАЦИИ НОВОСТЕЙ --- */

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

@keyframes blogFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* --- ПРИМЕНЕНИЕ К БЛОКАМ --- */

/* 1. Весь зеленый блок проявляется плавно */
.blog-filters-section {
    opacity: 0;
    animation: blogFadeIn 0.8s ease-out forwards;
}

/* 2. Заголовок и кнопки внутри него */
.blog-title, .filters-container {
    opacity: 0;
    animation: blogFadeUp 0.6s ease-out 0.3s forwards; /* Задержка 0.3с */
}

/* 3. Карточки новостей (Stagger effect) */
.blog-item {
    opacity: 0;
    animation: blogFadeUp 0.7s ease-out forwards;
}

/* Назначаем задержку для каждой карточки, чтобы они появлялись по очереди */
.blog-item:nth-child(1) { animation-delay: 0.5s; }
.blog-item:nth-child(2) { animation-delay: 0.6s; }
.blog-item:nth-child(3) { animation-delay: 0.7s; }
.blog-item:nth-child(4) { animation-delay: 0.8s; }
.blog-item:nth-child(5) { animation-delay: 0.9s; }
.blog-item:nth-child(6) { animation-delay: 1.0s; }



/* Состояние скрытой карточки новостей при фильтрации*/
.blog-item.hide {
    display: none; /* Полностью убираем из потока */
}

/* Анимация появления при фильтрации */
.blog-item.show {
    animation: fadeInFilter 0.4s ease forwards;
}

@keyframes fadeInFilter {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Настройка анимации для крошек */
.animate-breadcrumbs {
    opacity: 0;
    /* Используем уже созданную нами ранее анимацию blogFadeUp */
    animation: blogFadeUp 0.8s ease-out 0.4s forwards;
}


/* Если blogFadeUp еще не определена в этом файле, добавь её: */
@keyframes blogFadeUp {
    from {
        opacity: 0;
        transform: translateY(15px); /* Небольшое смещение вверх */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Блок со статьей  */


.article-title{
    font-size: 48px;
    line-height: 1.1;
    margin-top: 40px;
    padding: 10px;
}

.article-text{
    font-size: 18px;
    margin-top: 40px;
}


.article-date{
   
    display: block; /* Важно: чтобы margin сработал, дата должна быть блочным элементом */
    font-size: 14px;
    color: #999;
    margin-top: 15px; /* Можно добавить и здесь для точности */
   
}
.article-layout {
    display: grid;
    grid-template-columns: 1fr 350px; /* Основной текст и узкий сайдбар */
    gap: 60px;
    margin-top: 40px;
    border-radius: 40px;
}

/* Сайдбар, который "едет" за пользователем */
.sidebar-sticky {
    position: sticky;
    top: 100px; /* Отступ от твоего фиксированного меню */
    background: #f8faff; /* Светлый фон как на макете */
    padding: 30px;
    border-radius: 25px;
   
}
/* Контейнер для главного фото */
.article-main-image {
    width: 100%;
    margin-bottom: 20px;
    /* Убеждаемся, что картинка не "вылезет" за скругленные углы */
    overflow: hidden; 
}

.article-main-image img {
    width: 100%;
    height: auto;
    display: block;
    /* Скругление углов (80px как на твоих кнопках или чуть меньше для баланса) */
    border-radius: 40px; 
    /* Добавляем легкую оптимизацию для четкости фото */
    object-fit: cover;
}

/* Стиль подписи под фото (Изображение: BYD Company Limited) */
.image-caption {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    font-style: normal;
}

.table-of-contents h3 {
    font-size: 22px;

}

.table-of-contents ul {
    list-style: none;
    padding: 0;
    margin: 40px 0px;
    font-weight:500;
}

.table-of-contents li {
    margin-bottom: 15px;
}

.sidebar-footer{
font-weight: 500;
    display: flex;
    justify-content: space-between; /* Расталкивает элементы в разные стороны */
    align-items: center;           /* Центрирует по вертикали */
    width: 100%;
}

.btn-yellow-share {
     display: flex; /* Чтобы margin работал корректно */
    margin-left: auto;
    /* Убрал лишнюю точку с запятой и поправил отступы */
    padding: 20px 25px; 
    border-radius: 20px;
    
    /* Установил фирменный жёлтый (вместо белого #fff) */
    background-color: #000; 
    color: #fff;
    
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Добавим эффект при наведении, раз это кнопка */
.btn-yellow-share:hover {
    background-color: #f0db04;
    transform: translateY(-2px);
}

.table-of-contents a {
    color: #007bff;
    text-decoration: none;
    font-size: 15px;
    
}

/* Стили для CTA блока (Желто-черный) */
.article-cta-block {
    background: #e8f9e7;
    border-radius: 30px;
    padding: 40px;
    margin-top: 50px;
    text-align: center;
}

/* Продолжение статьи текст */
.article-section {
    margin-top: 60px;
    max-width: 760px; /* Ограничиваем ширину текста для удобства чтения */
}

.section-title {
    font-size: 32px;

    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 30px;
    color: #1a1a1a;
}

.section-intro {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 40px;
}

.reason-item {
    margin-bottom: 35px;
}

.reason-header {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.reason-text {
    font-size: 17px;
    line-height: 1.6;
    color: #333;
    padding-left: 20px; /* Небольшой отступ, чтобы выделить текст под тире */
}

/* Плавное появление при скролле (если нужно) */
.reason-item {
    opacity: 1;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.reason-item.visible {
    opacity: 1;
    transform: translateY(0);
}


/* Контейнер для главного фото */
.article-image {
    width: 100%;       /* Занимает всю ширину родителя */
    max-width: 760px;  /* Но не больше своего оригинального размера */
    height: auto;      /* Высота подстроится пропорционально */
    margin-bottom: 20px;
    overflow: hidden; 
    border-radius: 40px; /* Переносим скругление на контейнер */
}

.article-image img {
    width: 760px;
    height: 435px;
    display: block;
    /* Скругление углов (80px как на твоих кнопках или чуть меньше для баланса) */
    border-radius: 40px; 
    /* Добавляем легкую оптимизацию для четкости фото */
    object-fit: cover;
}

/* Стиль подписи под фото (Изображение: BYD Company Limited) */
.image-caption {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    font-style: normal;
}


.article-steps {
    padding: 15px;
    margin-top: 30px;
    max-width: 760px; 
}

.step-item {
    margin-bottom: 40px;
}

.step-item h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.step-item p {
    font-size: 17px;
    line-height: 1.6;
    color: #333;
}

/* Зеленый блок (Ворнинг) */
.alert-box.green {
    background-color: #e8f9e7; /* Светло-зеленый фон как на макете */
    border-radius: 20px;
    padding: 20px 30px;
    margin: 25px 0;
    border-left: 5px solid #4caf50; /* Акцентная линия слева */
}

.alert-box.green p {
    font-size: 16px;
    font-weight: 500;
    color: #1b5e20; /* Темно-зеленый текст для читабельности */
    margin: 0;
}


/* Несколько фото нашей обработки BYD */

.article-work-showcase {
    margin-bottom: 40px; 
    width: 100%;
    max-width: 760px; /* Выравниваем по ширине текста статьи */
}

.work-showcase-card {
    background-color: #fff8a8; /* Нежно-желтый фон как на макете */
    border-radius: 40px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.work-info {
    flex: 1;
    
}

.work-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: #1a1a1a;
    margin-bottom: 25px;
}

/* Кнопка внутри блока */
.btn-work-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 35px;
    background-color: #ffea05; /* Ярко-желтый */
    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    border-radius: 30px;
    transition: transform 0.3s ease;
}

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

/* Галерея */
.work-gallery {
    display: flex;
    gap: 15px;
    flex: 2;
}

.work-img-item {
    flex: 1;
    aspect-ratio: 1 / 1.2; /* Делаем картинки вертикальными прямоугольниками */
    border-radius: 25px;
    overflow: hidden;
}

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


/* Список советов */
.tips-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 50px 0;
}

.tips-list li {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    color: #333;
}

.tips-list li span {
    color: #1a1a1a;
    font-weight: 700;
}

/* Заключение */
.article-conclusion {
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
}

/* Финальный блок CTA */
.article-final-cta {
    width: 100%;             /* Фон на всю ширину экрана */
    background-color: #e6e6e6; /* Серый фон как на макете */
    padding: 0px 0;
    padding-left: 10px;        
    margin-top: 0px;
    border-radius: 40px;
}

/* Настраиваем контейнер внутри футера статьи */
.article-final-cta .container {
    max-width: 1200px;       /* Твоя стандартная ширина */
    padding: 20px 20px;         /* Отступы, чтобы текст не лип к краям на планшетах */
    
    display: flex;
    flex-direction: column;  /* Текст и кнопка друг под другом */
    align-items: flex-start; /* Выравнивание по левому краю контейнера */

}

.cta-title {
    font-size: 28px;
    font-weight:500;
    line-height: 1.2;
    margin-bottom: 20px;
    max-width: 850px;        /* Чтобы заголовок не растягивался в одну длинную нитку */
}

/* Большая желтая кнопка */
.btn-yell{
    width: 140px;
    height: 55px;
    background: #ffed2b;
    text-align: center;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
    
}

.article-final-cta h3{
   align-items: center;
}

.article-tips{
padding: 15px;
}

.article-conclusion{
padding: 15px;
}

/* АДАПТИВНОСТЬ */
@media (max-width: 768px) {
    .work-showcase-card {
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
    }

    .work-gallery {
        width: 100%;
    }
    
    .work-img-item:last-child {
        display: none; /* Скрываем одну картинку на мобилках для компактности */
    }

.article-image {
        border-radius: 20px; /* На маленьких экранах огромные углы смотрятся хуже */
        margin-bottom: 15px;
    }
    
    /* Если хочешь сохранить фиксированную пропорцию как на десктопе (435/760) */
    

    .image-caption {
        font-size: 11px;
        padding: 0 10px; /* Чтобы подпись не липла к краям экрана */
    }
}



@media (max-width: 991px) {
    /* 1. Переводим общую сетку статьи в одну колонку */
    .article-layout {
        display: flex;
        flex-direction: column; /* Элементы идут друг под другом */
        gap: 30px;
    }

    /* 2. Сайдбар (Содержание) ставим вторым по порядку */
    .article-sidebar {
        order: 1; /* Если у картинки нет порядка, она будет 0, а сайдбар станет под ней */
        width: 100%;
        margin-bottom: 0px;
    }

    /* 3. Основной контент (Текст) ставим третьим */
    .article-content {
        order: 2;
    }

    /* 4. Настраиваем внешний вид содержания на мобилках */
    .sidebar-sticky {
        position: static; /* Отключаем "прилипание", оно не нужно в середине текста */
        padding: 25px;
        background: #f8faff;
        border-radius: 30px;
    }

    /* 5. Делаем подвал сайдбара (кнопка и время) в одну строку для экономии места */
    .sidebar-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #e0e0e0;
    }

    .sidebar-footer .read-time {
        font-size: 13px;
        line-height: 1.2;
    }

    .btn-yellow-share {
        padding: 15px 20px; /* Уменьшаем кнопку для мобилок */
        font-size: 14px;
    }
}

@media (max-width: 991px) {

.article-header h1{
    font-size: 36px;
}

.article-title {
   
    font-size: 38px; /* или твой размер */
    font-weight: 600;
    line-height: 1.1;

    color: #1a1a1a;
}


.article-date{
    padding: 15px;
    display: block; /* Важно: чтобы margin сработал, дата должна быть блочным элементом */
    font-size: 14px;
    color: #999;
    margin-top: 15px; /* Можно добавить и здесь для точности */
   
}

.sidebar-footer .read-time{
    font-size: 16px;
}

.article-text{
    padding: 15px;
    line-height: 1.5;
    font-weight: 400;
    font-size: 18px;

}
.image-caption{
    padding: 15px;
     margin-bottom: 0px;
}
.article-section{
    padding: 15px;
   
}

.section-intro{
    font-size: 18px;
}

}



/* Вам также может быть интересно */

.related-posts {
    padding: 120px 0;
    margin-bottom: 100px;
    background-color: #ffffff;
    border-top: 1px solid #eee;
}

.related-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 40px;
    text-align: left;
}

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

.related-card a {
    text-decoration: none;
    color: inherit;
}

.related-img {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    margin-bottom: 15px;
}

.related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.related-card:hover img {
    transform: scale(1.05); /* Легкий зум при наведении */
}

.related-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #feffa5;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.related-body h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
}

.related-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
}

/* Адаптив под 768px */
@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: 1fr; /* На мобилках в одну колонку */
    }
}


/* Страница Пескоструйная обработка*/

/* Основной баннер с меню Пескоструйная обработка*/

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.sandblast-hero {
    margin: 7px 0px 0px; /* Отступы от краев экрана */
    height: 400px; /* Можно настроить высоту под контент */
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), 
                url('../img/peskostrui-polock-bg.png') no-repeat center center;
    background-size: cover;
    border-radius: 40px; /* Закругление самого фона */
    display: flex;
    align-items: flex-start;
    padding-top: 40px;
    overflow: hidden;}


/* Контейнер навигации внутри баннера */
.hero-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Базовый стиль кнопок в баннере */
.hero-btn {
    height: 50px;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* 1. Кнопка Главная (Черная) */
.btn-black {
    width: 110px;
    background-color: #000;
    color: #fff;
}

/* 8. Кнопка Магазин (Белая) */
.btn-white {
    width: 126px;
    background-color: #fff;
    color: #000;
}

/* Общий стиль для кнопок с обводкой */
.btn-outline {
    border: 1px solid #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.1); /* Легкий эффект стекла */
    backdrop-filter: blur(4px);
}

.btn-outline:hover {
    background: #fff;
    color: #000;
}

/* Индивидуальные ширины по ТЗ */
.btn-w-165 { width: 165px; }
.btn-w-152 { width: 152px; }
.btn-w-133 { width: 133px; }
.btn-w-118 { width: 118px; }
.btn-w-109 { width: 109px; }
.btn-w-125 { width: 125px; }

/* Адаптивность: на мобилках убираем фиксированную ширину */
@media (max-width: 768px) {
    .sandblast-hero {
        /* Перезаписываем маржин для телефона */
        margin: -25px 10px 0px !important; 
        
        height: auto;
        min-height: 250px;
        border-radius: 30px;
    }


    @media (max-width: 768px) {
    .sandblast-hero {
        background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                          url('../img/sandblast-bg-mobile.png');
        background-position: center;
        background-size: cover;
    }
}
    .hero-content {
        margin-top: 0; /* Поднимаем текст выше */
    }
}
/* Анимация баннера 
1. Скрываем кнопки по умолчанию */
.sandblast-hero {
    animation: fadeIn 1.2s ease-out forwards; /* Плавное проявление фона */
}
.hero-nav .hero-btn {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out forwards;
}

/* 2. Назначаем индивидуальную задержку для каждой кнопки (шаг 0.1 секунды) */
.hero-nav .hero-btn:nth-child(1) { animation-delay: 0.1s; }
.hero-nav .hero-btn:nth-child(2) { animation-delay: 0.2s; }
.hero-nav .hero-btn:nth-child(3) { animation-delay: 0.3s; }
.hero-nav .hero-btn:nth-child(4) { animation-delay: 0.4s; }
.hero-nav .hero-btn:nth-child(5) { animation-delay: 0.5s; }
.hero-nav .hero-btn:nth-child(6) { animation-delay: 0.6s; }
.hero-nav .hero-btn:nth-child(7) { animation-delay: 0.7s; }
.hero-nav .hero-btn:nth-child(8) { animation-delay: 0.8s; }

/* 3. Анимация появления заголовка и текста (должна идти ПОСЛЕ всех кнопок) */
.hero-content {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 1.2s forwards; /* Начнется через 1.2 сек */
}

/* Сама анимация (убедись, что она у тебя уже прописана выше) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Заголовок H1 */


.sandblast-intro {
    padding: 60px 0 0px; /* Большой отступ сверху от баннера */
    background-color: #ffff;
}

.advantages-pesok {
    /* Добавляем отступ сверху */
    margin-top: 80px; /* Настрой это число (60px, 100px), как тебе нравится */
    
    padding: 100px 0;
    background-color: #fcfcfc;
    text-align: center;
}

.main-page-title-pesok {
    font-size: 95px; /* Внушительный размер для H1 */
    font-weight: 500; /* Твой Medium */
    line-height: 1.0;
    color: #000;
    margin-bottom: 40px;
    max-width: 1200px;
    letter-spacing: -2px; /* Чуть сблизим буквы для стиля */
}

.intro-description-box {
    background-color: #ffea05; /* Твой желтый */
    padding: 25px 35px;
    border-radius: 35px 35px 35px 35px; /* Сильное скругление справа */
    max-width: 1200px;
    display: inline-block;
}

.intro-description-box p {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    color: #000;
}


/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 1024px) {
    .main-page-title-pesok {
        font-size: 60px;
    }
}

@media (max-width: 768px) {
    .sandblast-intro-pesok {
        padding: 20px 0 20px;
    }
    
    .main-page-title-pesok {
        font-size: 48px;
        letter-spacing: -1px;
        line-height: 1;
        margin-bottom: 30px;
    }
    
    .intro-description-box-pesok {
        padding: 20px 25px;
        border-radius: 20px; /* На мобилке лучше симметрично */
    }
    
    .intro-description-box p {
        font-size: 15px;
    }
}



/* --- Блок "Преимущества" --- */
.advantages-pesok {
    padding: 100px 0;
    background-color: #f5f5f5;
    text-align: center;
    border-radius: 80px;
}

.advantages-header {
    margin-bottom: 60px;
}

.advantages-title-pesok {
    font-size: 48px;
    letter-spacing: -1px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #000;
}

.advantages-subtitle-box-pesok {
    display: inline-block;
    background-color: #feffa5;
    padding: 8px 25px;
    border-radius: 50px;
}

.advantages-subtitle-box-pesok p {
    font-size: 22px;
    font-weight: 400;
    color: #000;
}

/* Сетка карточек */

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

.advantages-grid-pesok h3 {
color: #000;
}

.advantage-card-pesok {
    background: #fff;
    padding: 35px 35px;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    text-align: left;
    transition: transform 0.3s ease;
}

.advantage-card-pesok:hover {
    transform: translateY(-10px);
}

.advantage-icon-placeholder-pesok {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-weight: 700;
    color: #ffea05;
    font-size: 22px;
}


.advantage-card-pesok h3 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 15px;
}


.advantage-card-pesok p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
}

.advantage-card-pesok p .highlight {
    background: linear-gradient(120deg, rgba(255, 234, 5, 0.4) 0%, rgba(255, 234, 5, 0.4) 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%; /* Высота полоски */
    background-position: 0 90%; /* Положение полоски под текстом */
    font-weight: 600; /* Немного выделим жирностью */
    color: #333; /* Цвет самого текста */
}

.btn-large {
    padding: 20px 60px;
    font-size: 18px;
}

/* --- Стили для анимации появления --- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Адаптивность */

@media (max-width: 1024px) {
    .advantages-grid-pesok { 
        grid-template-columns: repeat(2, 1fr); 
    }
}
@media (max-width: 768px) {
    .advantages-pesok {
        padding: 50px 15px;
        margin-top: 20px;
        border-radius: 40px;
    }

    .advantages-header-pesok {
        margin-bottom: 35px;
    }

    .advantages-title-pesok {
        font-size: 36px;
        line-height: 1.1;
        margin-bottom: 30px;
        text-align: left;
    }

    .advantages-subtitle-box-pesok {
  
        border-radius: 20px;


    }
    .advantages-subtitle-box-pesok p{
        text-align: left;
        font-size: 16px;
        line-height: 1.2;
         padding: 5px 5px;
        margin-top: 0px;
        border-radius: 30px;

  }
    /* Сетка карточек: теперь это правило работает ТОЛЬКО до 768px */
    .advantages-grid-pesok {
        grid-template-columns: 1fr; 
        gap: 20px;
        margin-bottom: 40px;
    }

    .advantage-card-pesok {
        padding: 25px;
        border-radius: 20px;
        height: auto;
    }

    .advantage-card-pesok h3 {
        font-size: 28px;
    }

    .btn-large.btn-pulse {
        width: 100%;
        padding: 18px 10px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .action-hint {
        font-size: 13px;
        margin-bottom: 10px;
        
    }
} 

/* Пульсирующая кнопка для привлечения внимания */
/* 1. ОБЩИЕ СТИЛИ (для всех версий) */
.btn-pulse {
    box-shadow: 0 0 0 0 rgba(255, 234, 5, 0.7);
    animation: pulse 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50px;
    margin-left: auto;  /* Центрирование кнопки */
    margin-right: auto; /* Центрирование кнопки */
    text-decoration: none;
    color: #000;
    font-weight: 600;
}

/* 2. ДЕКСTOП ВЕРСИЯ (по умолчанию) */
.btn-large.btn-pulse {
    width: 430px; /* Твои 430px для компьютера */
    padding: 20px;
    font-size: 18px;
}

/* 3. МОБИЛЬНАЯ ВЕРСИЯ (оставляем как было) */
@media (max-width: 768px) {
    .btn-large.btn-pulse {
        width: 100%; /* На мобилках на всю ширину */
        padding: 18px 10px;
        font-size: 16px;
    }
    
    .action-hint {
        font-size: 13px;
        margin-bottom: 10px;
    }
}

/* АНИМАЦИЯ */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 234, 5, 0.7); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 15px rgba(255, 234, 5, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 234, 5, 0); }
}

/* Настройка каскадного появления (улучшаем плавность) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Добавим задержку появления для каждой карточки, чтобы они шли по очереди */
.advantages-grid .advantage-card:nth-child(1) { transition-delay: 0.1s; }
.advantages-grid .advantage-card:nth-child(2) { transition-delay: 0.2s; }
.advantages-grid .advantage-card:nth-child(3) { transition-delay: 0.3s; }
.advantages-grid .advantage-card:nth-child(4) { transition-delay: 0.4s; }
.advantages-grid .advantage-card:nth-child(5) { transition-delay: 0.5s; }
.advantages-grid .advantage-card:nth-child(6) { transition-delay: 0.6s; }


/* Блок Наши работы */

.works-section {
    padding: 60px 0;
    background: #ffffff;
    width: 100%;
    /* Скрываем только то, что вылетает за границы ВСЕГО экрана */
    overflow: hidden; 
    position: relative;
}

.works-title {
    text-align: center;
    font-size: clamp(32px, 5vw, 48px);
    margin-bottom: 60px;
    font-weight: 600;
    color: #000;
}

/* --- КОНТЕЙНЕР СЛАЙДЕРА --- */
.works-slider-container {
    width: 100%;
    /* ВАЖНО: разрешаем слайдам "торчать" по бокам от центра */
    overflow: hidden !important; 
    padding: 20px 0 40px;
    cursor: grab;
}



/* --- САМ СЛАЙД --- */
.swiper-slide {
  display: flex;
  flex-direction: row; /* явно указать */
    /* Жесткая ширина на ПК ( Swiper добавит margin-right из JS ) */
    width: 450px !important; 
    height: auto;
    /* Запрещаем слайду сжиматься, чтобы отступы были видны */
    flex-shrink: 0 !important; 
    transition: opacity 0.3s ease;
    background: #ffffff;
    
}
.mySwiper .swiper-wrapper {
  gap: 0px;  /* современный способ, работает в Swiper */
display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Запрещаем перенос на новую строку */
}




/* --- КАРТОЧКА (Серый блок внутри слайда) --- */
.work-card {
    display: block;
    position: relative;
    width: 100%;
    height: 500px;
    background: #f2f2f2;
    border-radius: 40px;
    overflow: hidden;
    text-decoration: none;
    
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);

    /* 2. УБИРАЕМ СИНИЙ ЦВЕТ И ПОДЧЕРКИВАНИЕ ТЕКСТА */
    text-decoration: none;
    color: transparent; /* Скрываем лишний текст ссылки, если он есть */
}

.work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



.work-card:hover {
    transform: scale(1.02);
}

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ (768px) --- */
@media (max-width: 768px) {


.works-title {
 font-size: 32px;
    letter-spacing: -1px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
    font-size: 55px;
    font-size: clamp(32px, 5vw, 48px);
    margin: bottom 20PX; 

    font-weight: 600;
    color: #000;
}

    .swiper-slide {
    
    width: 90% !important;            /* 90% от ширины контейнера */
    max-width: 450px;
    margin: 0 auto;
}

.work-card {
    height: 400px;
    border-radius: 35px;
}
    
    .work-label {
        bottom: 20px;
        left: 20px;
        right: 20px;
        padding: 15px;
        font-size: 14px;
    }
}

/* --- СТРЕЛКИ НАВИГАЦИИ (Под слайдером) --- */
.slider-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.btn-prev, .btn-next {
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: 0.3s;
    pointer-events: auto;  /* должно быть auto, а не none */
    z-index: 10;           /* чтобы быть поверх других элементов */
    position: relative;    /* или absolute, но с корректным z-index */
}

.btn-prev:hover, .btn-next:hover {
    background: #ffea05;
}






/* Блок СТОИМОСТЬ */

.pricing { padding: 80px 0; background-color: #fff; }
.price-header { text-align: center; margin-bottom: 60px; }
.price-main-title { font-size: 48px; font-weight: 600; line-height: 1.9;}

.price-subtitle { color: #888; font-size: 22px; }


.price-subtitle {
    display: inline-block;
    background-color: #feffa5;
    padding: 8px 25px;
    border-radius: 50px;
}

.price-subtitle {
    font-size: 22px;
    font-weight: 400;
    color: #000;
}

/* Сетка цен */

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


.price-card {
    display: flex;
    background: #f8f7fc;
    padding: 30px;
    border-radius: 30px;
    
    /* ИСПРАВЛЕНО: выравниваем всё содержимое по верхнему краю */
    align-items: flex-start; 
    
    gap: 25px;
}

.card-image {
    position: relative;
    width: 100px;
    flex-shrink: 0;
    
    /* ДОБАВЛЕНО: микро-отступ сверху для идеального попадания в уровень шрифта */
    padding-top: 5px; 
}

.card-image img {
    width: 95%;
    height: auto;
    display: block; /* Убирает лишний отступ снизу у картинки */
}

/* Желтая карточка "Днище" */
.highlight-card { background-color: #ffea05; }

.card-image { position: relative; width: 120px; flex-shrink: 0; }
.card-image img { width: 90%; height: auto; }

/* Бейдж Акция */
.badge-promo {
    position: absolute; bottom: -20px; right: 15px;
    background: #3db83d; color: #ffffff;
    font-size: 18px; font-weight:500;
    padding: 7px 20px; border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.card-content { flex-grow: 1; }
.card-content h3 { font-size: 22px; margin-bottom: 15px; font-weight: 600; }

.price-table { width: 100%; font-size: 18px; }
.table-header { 
    display: flex; justify-content: space-between; 
    color: #888; font-weight: 600; margin-bottom: 10px; 
}
.table-row { 
    display: flex; justify-content: space-between; 
    padding: 0px 0; border-top: 1px solid rgba(0,0,0,0.05); 
}
.table-row strong { font-weight: 700; color: #000; }

/* Эффект для обычных карточек */
.price-card:hover {
    transform: translateY(-8px); /* Приподнимаем карточку на 8 пикселей */
    background-color: #feffa5;    /* Делаем фон чисто белым при наведении */
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); /* Делаем тень глубже и мягче */
    border-color: #ffea05;       /* Опционально: можно добавить тонкую желтую рамку */
}

/* Специфический эффект для желтой карточки "Днище" */
.highlight-card:hover {
    background-color: #feffa5;    /* Делаем желтый чуть ярче/светлее */
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); 
}

/* Плавность перехода (добавь это в основной блок .price-card, если еще нет) */
.price-card {
    /* ... твои старые стили ... */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Очень плавный "дорогой" переход */
    cursor: pointer; /* Указатель пальца при наведении */
}

/* Эффект для иконок внутри при наведении на карточку */
.price-card:hover .card-image img {
    transform: scale(1.05); /* Картинка детали чуть увеличивается */
    transition: transform 0.4s ease;
}


/* Футер цен */
.price-footer {
    background-color: #f5f5f5;
    padding: 30px 50px;
    border-radius: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-text h4 { font-size: 20px; font-weight: 600; margin-bottom: 5px; }
.footer-text p { font-size: 15px; color: #666; }

/* Контейнер футера цен */
.price-footer {
    background-color: #f5f5f5; /* Светло-серый фон со скриншота */
    padding: 25px 60px;
    border-radius: 40px; /* Большой радиус скругления */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    gap: 30px;
}

/* Текстовая часть */
.footer-text h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 0px;
    color: #000;
}

.footer-text p {
    font-size: 22px;
    color: #666;
    line-height: 1.4;
}

.btn-special-price {
    /* Убираем подчеркивание и стандартный цвет ссылки */
    text-decoration: none !important; 
    color: #000000 !important;
    
    /* Остальные стили */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #feffa5;
    width: 300px;
    height: 70px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    transition: all 0.3s ease;
    border: none;
}

/* Убираем подчеркивание при наведении (на всякий случай) */
.btn-special-price:hover {
    text-decoration: none !important;
    background-color: #ffea05 !important;
    transform: translateY(-5px);
}

@media (max-width: 768px) {

    .pricing { padding: 10px 0; background-color: #fff; }
    
.price-header { text-align: left;  line-height: 1.1;  letter-spacing: 0.1px; margin-bottom: 40px; }
.price-main-title { font-size: 36px; font-weight: 600; line-height: 1.1;  letter-spacing: -1px; padding: 15px ;}

.price-subtitle { color: #888; font-size: 22px; }


.price-subtitle {
    display: inline-block;
    background-color: #feffa5;
    padding: 15px 20px;
    border-radius: 20px;
}

.price-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #000;
}

    /* 1. Секция и сетка */
   
    .price-grid {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 20px;
    }

    /* 2. Карточка */
   
  .price-card, .card-supports, .card-disks {
        flex-direction: column !important; /* Картинка сверху */
        align-items: center !important;
        text-align: center !important;
        padding: 30px 20px;
        border-radius: 25px;
    }

     .card-content h3 {
        width: 100%;
        margin-bottom: 25px;
        font-weight: 600;
    }

    /* ИНДИВИДУАЛЬНЫЕ НАСТРОЙКИ (Пишем в самом конце) */
    
    /* Суппорты */

    .card-supports h3 {
        font-size: 28px !important; 
        color: #000;
        font-weight: 600;
    }

    .card-supports .card-image {
    margin-bottom: -10px !important; /* Настрой индивидуально для этой карточки */
}

  .col-name {
    font-size: 18px !important; 
}

.col-price {
    font-size: 18px !important;
     text-align: left !important;
     align-items: left !important;
}



/* Диски */
    .card-disks h3 {
        font-size: 28px !important;
    }
.card-disks .card-image {
margin-bottom: 0px !important;

}

.badge-promo {
bottom: -20px; right: 5px;

}

/* Подрамник */

.card-podramnik h3 {
        font-size: 28px !important;
        text-align: center;
    }
.card-podramnik {

    font-size: 18px !important;
     text-align: left !important;
     align-items: left !important;
     
}

.card-podramnik .card-image {
margin-bottom: -10px !important;

}

.card-podramnik col.price {
 text-align: left !important; /* Теперь заголовок и цена будут на одной вертикальной линии */
        padding-left: 0;
         display: block;
         display: block;
        width: 100%;
    }

.card-podramnik .table-row strong {
    text-align: left !important;
    align-items: left !important;
  
}

/* Фаркоп */

.card-farkop .card-image {
margin-bottom: -10px !important;
}

.card-farkop{
     text-align: left !important;
    align-items: left !important;
}

.card-farkop h3{
text-align: center;
}

/* Элементы подвески" */

.card-podveska {
    text-align: left !important;
    align-items: left !important;
}

.card-podveska .card-image {
margin-bottom: -10px !important;

}

.card-podveska h3 {
text-align: center;

}



.card-usilitel {
    text-align: left !important;
    align-items: left !important;
}

.card-usilitel .card-image {
margin-bottom: -10px !important;

}

.card-usilitel .table-row strong {
text-align: left !important;
    align-items: left !important;
}

.card-usilitel h3 {
text-align: center;

}


/* Кузов и элементы */

.card-kuzov .card-image{
    margin-bottom: -10px !important;
}

.card-kuzov{
    text-align: left !important;
    align-items: left !important;
}

.card-kuzov h3{
    text-align: center;
}

/* Днище */

.highlight-card .card-image {
     margin-bottom: -10px !important;
}

.highlight-card {
 text-align: left !important;
    align-items: left !important;
}

.highlight-card h3{
    text-align: center;
}






    .card-image {
        width: 90px;           /* Чуть меньше иконка */
        margin-bottom: 20px;   /* Отступ до заголовка */
        padding-top: 0;        /* Сбрасываем десктопный отступ */
    }

    .card-content {
        width: 100%;           /* Контент на всю ширину */
    }

    .card-content h3 {
        font-size: 28px;
        margin-bottom: 25px;
    }

    /* 3. Таблица цен (выравнивание) */
    .table-header, .table-row {
        /* Уменьшаем колонку цены для узких экранов */
        grid-template-columns: 1fr 100px; 
        gap: 10px;
    }

    .col-name {
        font-size: 14px;
        text-align: left; /* Текст работ все равно лучше слева */
    }

    .col-price {
        font-size: 10px;
        text-align: right; /* На мобилке цену лучше прижать вправо для компактности */
    }

    /* 4. Футер цен (CTA блок) */
    .price-footer {
        flex-direction: column; /* Текст и кнопка в колонку */
        padding: 35px 20px;
        border-radius: 30px;
        text-align: center;
        margin-top: 30px;
    
    }

 .price-footer p{
        flex-direction: column; /* Текст и кнопка в колонку */
        padding: 0px 0px;
        border-radius: 20px;
        text-align: center;
        margin-top: 0px;
        font-size: 18px;
    }

    .footer-text {
        margin-bottom: 0px;
    }

    .footer-text h3 {
        font-size: 22px;
        padding: 10px;
    }

    /* Наша специальная кнопка на мобилке */
    .btn-special-price {
        width: 100% !important; /* Кнопка на всю ширину для удобства */
        height: 70px !important;
        font-size: 18px;
        margin-bottom: -1px;
    }
}



Блок Вопрос-Ответы

.faq-section-pesok {
    padding: 60px 20px;
    background-color: #ffffff; /* Светлый фон вокруг черного блока */
}

/* Главная черная плашка из дизайна */
.faq-main-card-pesok {
    background: #000;
    margin: 0 auto;
    padding: 80px 80px;
    border-radius: 80px; /* Большое скругление как на фото */
    color: #fff;
    text-align: center;
}

.faq-title-pesok {
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 10px;
     color: #fff;
}

.faq-subtitle-pesok {
    font-size: 22px;
    color: #9f9f9f; /* Тусклый серый текст */
    margin-bottom: 50px;
}

.faq-list-pesok {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Расстояние между кнопками-вопросами */
    max-width: 1200px;
    margin: 0 auto;
}

/* Базовая плашка вопроса (серая) */
.faq-item-pesok {
    background: #292929; /* Темно-серый, почти черный */
    border-radius: 50px; /* Овальные края */
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Активная плашка (желтая) */
.faq-item-pesok.active {
    background: #ffea05;
}

.faq-question-pesok {
    padding: 10px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 19px;
    font-weight: 500;
    text-align: left;
    color: #fff; /* Белый текст для серых плашек */
}

/* Черный текст для активной желтой плашки */
.faq-item-pesok.active .faq-question-pesok {
    color: #000;
}

.faq-icon-pesok {
    font-size: 34px;
    font-weight: 400;
}

/* Скрытый ответ */
.faq-answer-pesok {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease-out;
    padding: 0 35px;
    text-align: left;
    color: #000; /* Текст ответа на желтом фоне черный */
}

.faq-item-pesok.active .faq-answer-pesok {
    max-height: 200px;
    padding-bottom: 25px;
}

@media (max-width: 768px) {
    /* 1. Секция и черная карточка */
    .faq-section-pesok {
        padding: auto; /* Уменьшаем внешние отступы */
    }

    .faq-main-card-pesok {
        padding: 40px 15px; /* Уменьшаем внутренний отступ черного блока */
        border-radius: 40px; /* Скругление меньше, чем на десктопе */
    }

    /* 2. Заголовки */
    .faq-title-pesok {
        font-size: 32px; /* Уменьшаем заголовок */
        margin-bottom: 5px;
    }

    .faq-subtitle-pesok {
        font-size: 16px; /* Подзаголовок делаем читабельнее */
        margin-bottom: 30px;
        line-height: 1.4;
    }

    /* 3. Список вопросов */
    .faq-list-pesok {
        gap: 10px; /* Чуть меньше зазор между вопросами */
    }

    .faq-item-pesok {
        border-radius: 20px; /* Уменьшаем скругление плашек */
    }

    .faq-question-pesok {
        padding: 15px 20px; /* Увеличиваем высоту кликабельной зоны (UX) */
        font-size: 15px;    /* Комфортный размер текста вопроса */
        line-height: 1.3;
    }

    .faq-icon {
        font-size: 24px;   /* Плюс (+) делаем чуть аккуратнее */
        margin-left: 10px;
    }

    /* 4. Ответ (текст внутри) */
    .faq-answer-pesok {
        padding: 0 20px;   /* Совпадают отступы с вопросом */
    }

    .faq-answer-pesok p {
        font-size: 14px;
        line-height: 1.5;
        padding-bottom: 0px;
    }

    /* Расширяем высоту раскрытого ответа для мобилок */
    .faq-item-pesok.active .faq-answer-pesok {
        max-height: 500px; /* На мобилках текст может вытянуться сильно вниз */
    }
}


.spacer-divider {
    height: 100px;
    width: 100%;
    background-color: #ffffff; /* Цвет фона сайта */
    display: block;
    clear: both;
}

@media (max-width: 768px) {
    .spacer-divider {
        height: 50px; /* На мобилках поменьше */
    }
}

Блок Отзывы

.reviews {
    /* Используем padding вместо margin, чтобы избежать схлопывания */
    padding-top: 120px; 
    padding-bottom: 80px;
    
    background-color: #f5f5f5;
    text-align: center;
    width: 100%;
    display: block;
    clear: both; /* Очистка на случай плавающих элементов */
}

.reviews-header {
    margin-bottom: 60px;
    text-align: center;
}

.reviews-title {
    font-size: 48px;
    letter-spacing: -1px;
    font-weight: 600;
    margin-bottom: 10px;
    
}

.reviews-subtitle-box {
    display: inline-block;
    background-color: #feffa5;
    padding: 8px 25px;
    border-radius: 50px;
}

.reviews-subtitle-box p {
    font-size: 22px;
    font-weight: 400;
}


Форма отзывов

.reviews {
    padding: 80px 0;
    background-color: #ffffff; /* Светло-серый фон секции */
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;

    /* ОГРАНИЧЕНИЕ ШИРИНЫ */
    max-width: 1200px; /* Устанавливаем твой стандарт ширины */
    margin-left: auto;  /* Центрируем блок */
    margin-right: auto; /* Центрируем блок */
    
    /* Добавим падинги, чтобы на планшетах карточки не липли к краям */
    padding: 0 20px; 
}

.review-card {
    max-height: 1200px;
    background: #f5f5f5;
    padding: 25px 30px;
    border-radius: 35px; /* Крупное скругление как на макете */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    border: 1px solid #f0f0f0; /* Едва заметная рамка */
}

.y-logo {
     width: 24px;  /* Уменьши до 20px или 22px, если 32px много */
    height: 24px; 
}

/* Верхняя часть: Имя и Звезда */

.review-top {
    display: flex;             /* Включаем гибкий контейнер */
    justify-content: space-between; /* Располагаем элементы по краям (имя слева, 5 справа) */
    align-items: center;       /* Выравниваем их строго по одной горизонтальной оси */
    margin-bottom: 15px;       /* Отступ снизу до текста отзыва */
    width: 100%;               /* Растягиваем на всю ширину карточки */
}

/* Настройки для имени */
.review-author{
    margin: 0;                 /* Убираем стандартные отступы заголовка */
    font-size: 17px;
    font-weight: 600;
}

/* Настройки для рейтинга */
.review-stars {
    display: flex;             /* Чтобы звезда и цифра 5 тоже были в ряд */
    align-items: center;
    font-weight: 700;
    font-size: 15px;
}

.star {
    color: #e51e00;            /* Красный цвет Яндекса */
    margin-right: 4px;         /* Небольшой зазор перед цифрой 5 */
    font-size: 18px;
    font-weight: 600;           /* Размер самой звезды */
}

/* Текст отзыва */
.review-body {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 20px;
    
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Футер карточки */
.review-footer {
    display: flex;
    justify-content: space-between;
    align-items: right;
}


.read-full {
    font-size: 14px;
    font-weight: 500;
    color: #b0b0b0; /* Очень светлый серый как на макете */
    text-decoration: none;
}

.read-full:hover {
    color: #000000;
}

/* --- Адаптивность для мобилок --- */
@media (max-width: 1024px) {
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .reviews-grid { 
        grid-template-columns: 1fr;
        padding: 0 15px;
    }
    .review-card { min-height: auto; }
}


.spacer-divider {
    height: 100px;
    width: 100%;
    background-color: #ffffff; /* Цвет фона сайта */
    display: block;
    clear: both;
}

@media (max-width: 768px) {
    .spacer-divider {
        height: 50px; /* На мобилках поменьше */
    }

.reviews {
    /* Используем padding вместо margin, чтобы избежать схлопывания */
    padding-top: 0px; 
    padding-bottom: 80px;
    
    background-color: #ffffff;
    text-align: left;
    width: 100%;
    display: block;
    clear: both; /* Очистка на случай плавающих элементов */
}

.reviews-header {
    margin-bottom: 60px;
    text-align: left;
}

.reviews-title {
    font-size: 32px;
    letter-spacing: -1px;
    font-weight: 600;
    margin-bottom: 15px;
    
}

.reviews-subtitle-box {
    display: inline-block;
    background-color: #feffa5;
    padding: 10px 15px;
    border-radius: 20px;
}

.reviews-subtitle-box p {
    font-size: 18px;
    font-weight: 400;
}

/* Футер карточки */
.review-footer {
    display: flex;
    justify-content: space-between;
    align-items: right;
    margin-top: 25px;
}

Пустой блок для расстояния 
.read-full {
    font-size: 14px;
    font-weight: 500;
    color: #b0b0b0; /* Очень светлый серый как на макете */
    text-decoration: none;
    margin-bottom: 0px;
}

.read-full:hover {
    color: #000000;
}

}

Карта и Подвал

.contacts-footer { padding-top: 60px; background: #fff; }

/* Карта */
.map-container {
    position: relative;
    height: 500px;
    width: 100%; /* Не на всю ширину, чтобы края футера были видны */
    margin: 0 auto;
    border-radius: 60px;
    overflow: hidden;
    z-index: 1;
}

.yandex-map { width: 100%; height: 100%; background: #eee; }

.map-overlay-btn {
    position: absolute; top: 65%; right: 5%;
    transform: translateY(-50%);
    background: #fff;
    padding: 15px 25px;
    border-radius: 50px;
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: #000; font-weight: 400;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Футер */
.footer-main {
    background: #000;
    color: #fff;
    border-radius: 80px 80px 0 0; /* Скругление только сверху */
    padding: 100px 0 40px;
    margin-top: -100px; /* "Наезжаем" на карту */
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 80px;
}

.footer-address { font-size: 28px; font-weight: 500; margin-bottom: 25px; line-height: 1.1; }
.footer-hours { color: #888; font-size: 16px; }

.footer-phone { font-size: 28px; font-weight: 500; text-decoration: none; color: #fff; display: block; margin-bottom: 10px; }
.footer-email { color: #888; margin-bottom: 30px; font-size: 16px; }

/* Желтая кнопка "Позвонить" */
.btn-call-yellow {
    display: inline-flex; align-items: center; gap: 25px;
    background: #ffea05; color: #000; padding: 15px 25px;
    border-radius: 40px; text-decoration: none; font-weight: 600;
}

.arrow-circle {
    width: 30px; height: 30px; background: #000; color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

.footer-col h4 { margin-bottom: 25px; font-size: 20px; font-weight: 500; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: #888; text-decoration: none; transition: 0.3s; }
.footer-links a:hover { color: #ffea05; }

.footer-bottom {
    border-top: 1px solid #222; padding-top: 40px;
    display: flex; justify-content: space-between; align-items: flex-end;
    font-size: 16px; color: #555;
}
.footer-bottom-links a { color: #555; text-decoration: none; margin-left: 20px; }

@media (max-width: 768px) {
    /* 1. Уменьшаем наезд футера на карту и скругление */
    .footer-main {
        margin-top: -50px; /* Уменьшенный наезд, чтобы карту было видно */
        padding: 60px 20px 40px; /* Немного меньше отступы */
        border-radius: 40px 40px 0 0; /* Уменьшенное скругление для узких экранов */
        text-align: Left; /* Центрируем весь текст внутри */
    }

    .map-overlay-btn {
    position: center; top: 80%; right: 15%;
    transform: translateY(-50%);
    background: #fff;
    padding: 15px 20px;
    border-radius: 30px;
    display: flex; align-items: left; gap: 10px;
    text-decoration: none; color: #000; font-weight: 400;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

    /* 2. Сетка в один столбик */
    .footer-grid {
        grid-template-columns: 1fr; /* Колонки друг под другом */
        gap: 50px; /* Расстояние между блоками */
        margin-bottom: 60px;
    }

    /* 3. Шрифты и кнопки */
    .footer-address {
        font-size: 24px;
        margin-bottom: 15px;
    }


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

    /* Центрируем кнопку "Позвонить" */
    .btn-call-yellow {
        width: 100%; /* На мобилках кнопка на всю ширину удобнее */
        max-width: 300px; /* Но ограничиваем, чтобы не была слишком длинной */
        margin: 0 auto;
        justify-content: center;
    }

    /* 4. Нижняя часть футера */
    .footer-bottom {
        flex-direction: column; /* Элементы друг под другом */
        align-items: center;
        gap: 20px;
        text-align: left;
        padding-top: 30px;
        font-size: 14px;
    }

   .footer-bottom-links {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start; /* Ссылки тоже влево */
        width: 100%;
    }

  .footer-bottom-links a {
        margin-left: 0;         /* Сбрасываем десктопный отступ */
        text-align: left;
    }

    /* Настройка заголовков колонок */
    .footer-col h4 {
        margin-bottom: 15px;
    }
  
}