/* ================= БАЗОВЫЕ НАСТРОЙКИ ================= */

body {  /* Основные настройки для body */
    overflow-x: hidden;  /* Отключаем горизонтальную прокрутку */
    margin: 0;  /* Убираем стандартные отступы браузера */
    font-family: Lora, sans-serif;  /* Шрифт по умолчанию (был Arial)*/
    color: #333;  /* Цвет текста */
    background-color: #f5f5f5;  /* Цвет фона */
}

/* Контейнер для центрального контента */
.container {
    width: 100%;            /* Ширина контейнера - 100% */
    max-width: 100%;        /* Ограничение на максимальную ширину */
    margin: 0 auto;         /* Центрируем контейнер */
    padding: 0 20px;        /* Добавляем отступы по бокам для мобильных */
    box-sizing: border-box; /* Включаем правильную работу с отступами */
}

/* ================= ШАПКА ================= */

.header {  /* Шапка страницы */
    position: fixed;  /* Фиксированное положение шапки */
    top: 0;  /* Привязываем к верхней части */
    left: 0;  /* Привязываем к левому краю */
    width: 100%;  /* Ширина на всю страницу */
    z-index: 1000;  /* Слои для фиксации поверх контента */
    background-color: #e6e6e6;  /* Цвет фона шапки */
    border-bottom: 1px solid #ccc;  /* Граница снизу */
    padding: 10px 0;  /* Отступы сверху и снизу */
    box-sizing: border-box; /* Учитываем отступы в ширине */
}

/* Контейнер внутри шапки */
.header .container {
    display: flex;  /* Флекс-контейнер для шапки */
    justify-content: space-between;  /* Элементы шапки по бокам */
    align-items: center;  /* Вертикальное выравнивание */
    width: 1200px;  /* Увеличенная ширина */
    max-width: 100%;  /* Адаптивность */
    margin: 0 auto;  /* Центрируем */
}

/* Навигационные ссылки в шапке */
.nav a {
    margin-left: 20px;  /* Отступ слева */
    text-decoration: none;  /* Убираем подчёркивание */
    color: #333;  /* Цвет текста */
    /* font-size: 16px; */  /* РЕЗЕРВ: размер шрифта для мобильных */
}

/* ================= ЛОГОТИП ================= */

.header .logo img {
    width: 140px;  /* Ширина логотипа */
    height: auto;  /* Сохраняем пропорции */
    /* opacity: 0.9; */  /* РЕЗЕРВ: прозрачность */
}

/* ================= ПЕРВЫЙ ЭКРАН ================= */

.hero {  /* Стиль первого экрана с фоном */
    background: url('images/chertyozh.png') no-repeat center center;  /* Фоновое изображение */
    background-size: cover;     /* Растягиваем на весь экран */
    background-position: center center; /* Центрируем фон */
    padding: 120px 0;            /* Вертикальные отступы, чтобы текст помещался */
    position: relative;          /* Для кнопки */
    color: #fff;                 /* Цвет текста */
    display: flex;               /* Используем flexbox для выравнивания */
    justify-content: center;     /* Центрируем содержимое по горизонтали */
    align-items: center;         /* Центрируем содержимое по вертикали */
    text-align: center;          /* Центрируем текст */
    /*position: relative; */         /* Для позиционирования кнопки */
    /*pointer-events: none; */ /* Отключаем клики на всём первом экране */
}

.hero-link {  /* Ссылка на изображение */
    display: block;
    text-decoration: none;  /* Убираем подчеркивание */
    color: inherit;  /* Наследуем цвет текста */
pointer-events: none;  /* Отключаем клики на элементе */
}

/* Заголовок на первом экране */
.hero h1 {
    font-size: 36px;             /* Размер шрифта для заголовка */
    margin: 0;                   /* Убираем отступы */
    padding: 0 20px;             /* Добавляем отступы по бокам, чтобы текст не заходил за края */
}

/* Подзаголовок на первом экране */
.hero .subtitle {
    font-size: 20px;             /* Размер подзаголовка */
    margin: 10px 0;              /* Отступы сверху и снизу */
    line-height: 1.4;            /* Межстрочный интервал */
    max-width: 90%;              /* Максимальная ширина для текста */
    padding: 0 20px;             /* Добавляем отступы, чтобы текст не уходил за края */
    /* font-weight: bold; */  /* РЕЗЕРВ: жирность текста */
}

/* Кнопка "Консультация" */
.consultation-btn {
    position: absolute;  /* Абсолютное позиционирование */
    right: 30px;  /* Отступ справа */
    bottom: 30px;  /* Отступ снизу */
    padding: 12px 25px;
    background: #555;  /* Цвет кнопки */
    color: #fff;  /* Цвет текста */
    text-decoration: none;  /* Убираем подчеркивание */
    font-weight: bold;  /* Жирный шрифт */
    border-radius: 5px;  /* Скругленные углы */
    transition: background 0.3s;  /* Плавный переход при наведении */
}

/* Эффект наведения на кнопку */
.consultation-btn:hover {
    background: #333;  /* Цвет кнопки при наведении */
}

/* ================= УСЛУГИ ================= */

.service-grid {  /* Сетка для услуг */
    display: grid;  /* Используем grid для колонок */
    grid-template-columns: repeat(2, 1fr);  /* 2 колонки */
    grid-template-rows: auto auto;  /* 2 строки */
    gap: 20px;  /* Расстояние между строками */
    margin-bottom: 60px;  /* Отступ снизу */
}

/* Карточка услуги */
.service-card {
    background: #fff;  /* Белый фон */
    padding: 20px;  /* Внутренние отступы */
    border: 1px solid #ccc;  /* Граница */
    text-align: center;  /* Центрируем текст */
    display: flex;  /* Flex-контейнер */
    flex-direction: column;  /* Элементы по вертикали */
    justify-content: space-between;  /* Равномерное распределение */
    height: 240px;  /* Фиксированная высота */
    min-width: 500px;  /* Минимальная ширина */
}

.service-card img {
    width: 140px;  /* Ширина изображения */
    height: auto;  /* Сохраняем пропорции */
    max-width: 100%;  /* Не растягиваем изображение */
    margin-bottom: 20px;  /* Отступ снизу */
}

/* Название услуги */
.service-card h3 {
    margin-bottom: 10px;  /* Отступ снизу */
}

/* Список услуг */
.service-card ul {
    padding-left: 20px;  /* Отступ слева */
}

/* Цена услуги */
.service-card .price {
    font-weight: bold;  /* Жирный шрифт */
    margin-top: 10px;  /* Отступ сверху */
}

/* Ссылка на услугу */
.link {
    display: inline-block;
    margin-top: 15px;  /* Отступ сверху */
    text-decoration: none;  /* Убираем подчеркивание */
    color: #444;  /* Цвет текста */
    font-weight: bold;  /* Жирный текст */
}

/* ================= ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ================= */

.extra {  /* Дополнительные услуги */
    background: #f2f2f2;  /* Светлый фон */
    padding: 40px 0;  /* Внутренние отступы */
    margin-top: 20px;  /* Отступ сверху */
}

.extra-list {
    padding-left: 10px;  /* Отступ слева */
    margin-top: 0;  /* Убираем отступ сверху */
    list-style-position: inside;  /* Стилизация точек */
}

.extra-list li {
    margin-bottom: 5px;  /* Уменьшаем отступы между пунктами */
}

/* ================= РЕГИОН ================= */

.region {  /* Блок для региона */
    background: #f2f2f2;  /* Цвет фона */
    padding: 50px 0;  /* Отступы сверху и снизу */
}

/* ================= ЗАГОЛОВКИ ================= */

h2 {  /* Заголовки второго уровня */
    text-align: center;  /* Выравнивание по центру */
    margin-bottom: 30px 0;  /* Отступ снизу */
    font-size: 24px;  /* Размер шрифта */
    /* color: #333; */  /* РЕЗЕРВ: цвет заголовков */
}

/* ================= ПОДВАЛ ================= */

.footer {  /* Подвал сайта */
    background: #dcdcdc;         /* Цвет фона */
    padding: 30px 0;             /* Внутренние отступы */
    font-size: 14px;             /* Размер шрифта */
    text-align: center;          /* Центрируем текст */
    width: 100%;                 /* Задаём ширину 100% */
    box-sizing: border-box;      /* Для правильных отступов */
    /*margin: 0 auto;  */            /* Центрируем блок по горизонтали */
}

/* ================= ОТЗЫВЫ ================= */

.reviews {  /* Блок отзывов */
    background: #dcdcdc;  /* Цвет фона */
    padding: 30px 0;  /* Внутренние отступы */
    margin-top: 60px;  /* Отступ сверху */
}

.review-text {  /* Текст отзыва */
    background: #dcdcdc;  /* Фон отзыва */
    padding: 30px 0;  /* Внутренние отступы */
    font-style: italic;  /* Курсив */
    line-height: 1.5;  /* Межстрочный интервал */
}

.review-text span {  /* Имя автора отзыва */
    display: block;
    margin-top: 10px;
    font-weight: bold;  /* Жирный текст */
}

.review-scan img {  /* Изображения с отзывами */
    max-width: 300px;  /* Ограничиваем ширину */
    border: 1px solid #ccc;  /* Граница */
}

/* ================= Сетка для СРО ================= */
.sro-grid {
    display: flex;                   /* Используем flexbox для выравнивания */
    justify-content: space-between;   /* Равномерное распределение между картинками */
    gap: 20px;                        /* Расстояние между изображениями */
    flex-wrap: wrap;                  /* Разрешаем перенос изображений на новые строки */
    margin-bottom: 60px;
}

.sro-grid a {
    display: block;                  /* Чтобы ссылка занимала всю ширину */
    max-width: 100%;                  /* Ограничиваем максимальную ширину */
}

.sro-grid img {
    width: 100%;                     /* Устанавливаем изображения на 100% ширины контейнера */
    height: auto;                    /* Сохраняем пропорции изображений */
    object-fit: cover;               /* Применяем сохранение пропорций и растягивание */
}


/* ========================================================= */
/* =============== АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ ================= */
/* ========================================================= */

/* ---------- Планшеты и ниже (≤ 1024px) ---------- */
@media (max-width: 1024px) {

    .container {
        width: 100%;            /* Контейнер занимает всю ширину экрана */
        max-width: 100%;        /* Убираем ограничение ширины */
        padding: 0 15px;        /* Боковые отступы для дыхания */
    }

    .service-card {
        min-width: 0;           /* ❗ СНИМАЕМ min-width, который ломал мобильную верстку */
        height: auto;           /* Высота по контенту */
    }
}

/* ---------- Телефоны (≤ 768px) ---------- */
@media (max-width: 768px) {

    /* ===== ШАПКА ===== */
    .header {
        padding: 8px 0;         /* Уменьшаем высоту шапки */
    }

    .header .container {
      /*  flex-direction: column; */ /* Элементы шапки в колонку */
        align-items: center;    /* Центрируем */
        gap: 10px;              /* Расстояние между логотипом и меню */
    }

    .nav a {
        margin: 0 10px;         /* Горизонтальные отступы ссылок */
        font-size: 14px;        /* Уменьшаем шрифт меню */
    }

    /* ===== ПЕРВЫЙ ЭКРАН ===== */
    .hero {
        padding: 160px 0 80px;  /* Увеличиваем верхний отступ из-за fixed-шапки */
    }

    .hero h1 {
        font-size: 24px;        /* Уменьшаем заголовок */
    }

    .hero .subtitle {
        font-size: 16px;        /* Уменьшаем подзаголовок */
        line-height: 1.4;       /* Читаемость */
    }

    .consultation-btn {
        position: static;       /* ❗ Убираем absolute */
        margin: 20px auto 0;    /* Центрируем кнопку */
        display: inline-block;  /* Корректное отображение */
    }

    /* ===== УСЛУГИ ===== */
    .service-grid {
        grid-template-columns: 1fr; /* ❗ ОДНА КОЛОНКА НА ТЕЛЕФОНЕ */
        grid-template-rows: auto;    /* Автоматическая высота строк */
    }

    .service-card {
        height: auto;           /* Высота по содержимому */
        padding: 15px;          /* Меньше внутренних отступов */
    }

    .service-card h3 {
        font-size: 18px;        /* Размер заголовка услуги */
    }

    .service-card ul {
        padding-left: 15px;     /* Чуть меньше отступ списка */
        font-size: 14px;        /* Размер текста списка */
    }

    .service-card img {
        width: 100px;           /* Уменьшаем изображения */
    }

    /* ===== ЗАГОЛОВКИ ===== */
    h2 {
        font-size: 20px;        /* Уменьшаем заголовки секций */
    }

    /* ===== ПОДВАЛ ===== */
    .footer {
        font-size: 12px;        /* Компактный текст подвала */
        text-align: center;     /* Центрируем текст */
    }
}

/* ---------- Очень маленькие экраны (≤ 480px) ---------- */
@media (max-width: 480px) {

    .hero h1 {
        font-size: 20px;        /* Ещё меньше заголовок */
    }

    .hero .subtitle {
        font-size: 14px;        /* Мелкий, но читаемый текст */
    }

    .nav a {
        font-size: 13px;        /* Меню не ломается */
    }
}


/* ================= ЖЕСТКАЯ МОБИЛЬНАЯ ПРАВКА ================= */

@media screen and (max-width: 768px) {

    .service-grid {
       /* display: block;  */          /* ❗ УБИВАЕМ GRID */
        grid-template-columns: 1fr;          /* 1 колонка на мобильных устройствах */
        grid-template-rows: auto;            /* Высота строк по содержимому */
        gap: 15px;                           /* Уменьшаем расстояние между карточками */
    }

    .service-card {
       /* width: 100%; */              /* Карточка на всю ширину */
       /* min-width: 0; */             /* Снимаем ограничение */
       /* margin-bottom: 20px; */      /* Отступ между карточками */
       height: auto;                        /* Высота по содержимому (убираем фиксированную высоту) */
        min-width: 0;                        /* Убираем минимальную ширину */
        padding: 15px;                       /* Уменьшаем внутренние отступы для мобильных */
    }
}

@media screen and (max-width: 768px) {

    .nav {
        display: flex;             /* Используем flexbox для выравнивания */
        flex-direction: column;/* Меню будет в одну колонку на мобильных */
 /*flex-wrap: wrap; */          /* ❗ РАЗРЕШАЕМ ПЕРЕНОС */
        justify-content: center;   /* Центрируем */
        align-items: center;   /* Центрируем меню */
        gap: 10px;                  /* Расстояние между ссылками */
    }

    .nav a {
        margin: 0 10px;                 /* Убираем левые отступы */
        font-size: 14px;           /* ЧИТАЕМЫЙ размер */
       /*  white-space: nowrap; */      /* Не ломаем слова */
    }
}
@media screen and (max-width: 768px) {
    .footer {
        padding: 20px 0;  /* Меньше отступов для мобильных */
        font-size: 12px;   /* Меньше размер шрифта */
    }
}
@media screen and (max-width: 768px) {
    .sro-grid {
        flex-direction: column;         /* Переводим изображения в колонку на мобильных */
        align-items: center;            /* Центрируем изображения */
    }

    .sro-grid img {
        max-width: 100%;                /* Ограничиваем ширину изображений до 100% */
        height: auto;                   /* Устанавливаем высоту в зависимости от ширины */
    }
}


@media screen and (max-width: 768px) {
    .header {
        padding: 8px 0;   /* Меньше отступов на мобильных устройствах */
      /*  height: auto;    */    /* Убираем фиксированную высоту */
    }

    /* Добавляем отступ сверху для первого экрана */
    .hero {
        padding-top: 120px;  /* Отступ сверху, чтобы шапка не перекрывала текст */
    }

    .nav {
        display: flex;         /* Используем flexbox для выравнивания */
        flex-direction: column;/* Меню будет в одну колонку на мобильных */
        align-items: center;   /* Центрируем меню */
        gap: 10px;             /* Расстояние между элементами */
    }
}