/* =========================================================
   Сброс стилей и глобальные настройки
   ========================================================= */
html, body {
    margin: 0;
    padding: 0;
    background-color: #faf8f7;
    background-image: url('../img/background-img/glemp_bez_lestnici.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

* {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

a {
    color: black;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* =========================================================
   ШАПКА — glassmorphism, фиксированная
   ========================================================= */
header {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1200px;
    z-index: 1000;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Три колонки внутри шапки: лого | навигация | действия */
header .fixed-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: 62px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Логотип --- */
.header-logo {
    flex-shrink: 0;
}

.logo-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

/* --- Навигация по центру — равные отступы через gap --- */
.header-links {
    display: flex;
    gap: 40px;
    align-items: center;
}

.header-links a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
    margin: 0;
}

.header-links a:hover {
    color: #fff;
    text-decoration: none;
}

/* --- Телефон + кнопка справа --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.header-phone {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    text-decoration: none;
    white-space: nowrap;
}
.header-phone:hover {
    color: #fff;
    text-decoration: none;
}

/* Общий стиль для всех кнопок light-button */
.header-button{
    display: inline-block;       /* чтобы margin-auto и размеры работали */
    padding: 12px 28px;          /* отступы внутри кнопки */
    border-radius: 30px;         /* скругление */
    font-weight: 600;
    font-size: 18px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;  /* плавная анимация */
    background: linear-gradient(90deg, #ff8c00, #ffa500); /* основной цвет */
    color: #fff;                 /* текст */
    text-align: center;
}

/* Ховер-эффект для всех light-button */
.header-button:hover {
    transform: scale(1.05);       /* немного увеличиваем */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* тень */
    background: linear-gradient(90deg, #ffa500, #ff8c00); /* плавный градиент на ховер */
}

/* =========================================================
   Бургер-кнопка — скрыта на десктопе
   ========================================================= */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 16px;
    position: absolute;
    right: 16px;
    top: 12px;
    transform: none;
}
.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.25s ease;
}
.burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Мобильное меню — скрыто по умолчанию
   ========================================================= */
.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0 20px 16px;
}

.mobile-menu a,
.mobile-menu button {
    color: #fff;
    font-size: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    text-decoration: none;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: left;
    cursor: pointer;
    font-weight: 500;
}

/* Стиль для кнопки "Забронировать" в мобильном меню */
.mobile-menu .booking-button {
    /* Убираем стили обычных ссылок */
    border-bottom: none;
    padding: 12px 24px;  /* Отступы как у кнопки */
    /* Градиентный фон */
    background: linear-gradient(90deg, #ff8c00, #ffa500);
    /* Скругление */
    border-radius: 30px;
    /* Центрируем текст */
    text-align: center;
    /* Жирный шрифт */
    font-weight: 600;
    font-size: 16px;
    /* Отступ сверху */
    margin-top: 12px;
    /* Плавный переход */
    transition: all 0.3s ease;
    /* Убираем подчеркивание */
    text-decoration: none !important;
}

/* Hover эффект */
.mobile-menu .booking-button:hover {
    background: linear-gradient(90deg, #ffa500, #ff8c00);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
    text-decoration: none;
}

.mobile-menu.open {
    display: flex;
}

/* =========================================================
   Ссылки по всему сайту
   ========================================================= */
.fixed-container {
    max-width: 1200px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   Секции
   ========================================================= */
section {
    padding: 40px;
}

.second-section {
    margin-bottom: 60px;
}

/* =========================================================
   ПЕРВЫЙ БЛОК (Hero)
   ========================================================= */
.first-block {
    padding-top: 250px;
    padding-bottom: 130px;
    display: flex;
    justify-content: center;
}

.hero-inner {
    width: calc(100% - 40px);
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 44px 40px 36px;
}

.hero-location {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.hero-title {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 14px;
    line-height: 1.1;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 28px;
    max-width: 500px;
}

.hero-address {
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 28px;
    max-width: 500px;
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 32px;
}

.hero-tags span {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 16px;
    white-space: nowrap;
}
.hero-tags-link a {
    color: inherit;
    text-decoration: none;
    display: block;
}

/* чтобы ссылка выглядела как обычный тег */
.hero-tags-link {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 16px;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.2s ease;
}

/* hover эффект как у UI-кнопки */
.hero-tags-link:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.25);
}

.hero-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 100px;
}

.hero-hint,
.hero-price {
    color: rgba(255, 255, 255, 0.55);
    font-size: 20px;
}

/* =========================================================
   Кнопки
   ========================================================= */
button {
    padding: 10px 30px;
    cursor: pointer;
    border-radius: 5px;
}

.light-button {
    border: 1px solid black;
    background-color: transparent;
    border-radius: 5px;
}

.dark-button {
    background-color: #3d52fe;
    border: 1px solid #3d52fe;
    border-radius: 5px;
    color: #fff;
    margin-top: 20px;
}


/* =========================================================
   ВТОРОЙ БЛОК ( Сервисы) - Адаптивная версия
   ========================================================= */
.second-section {
    margin-bottom: 60px;
}

.second-section .fixed-container {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 20px;             /* немного уменьшили для маленьких экранов */
    width: 90%;                /* резиновая ширина */
    max-width: 1200px;         /* ограничение на больших экранах */
    margin: 0 auto;            /* центрирование */
    box-sizing: border-box;    /* чтобы padding не ломал ширину */
}

.fixed-container h2 {
    text-align: left;                 /* центрируем текст */
    background: rgba(255,255,255,0.15); /* полупрозрачный фон */
    padding: 10px 20px;                 /* внутренние отступы сверху/снизу и слева/справа */
    border-radius: 15px;                /* скругляем углы */
    display: inline-block;              /* чтобы фон обтекал только текст, а не всю строку */
    font-size: clamp(24px, 4vw, 40px);  /* адаптивный размер заголовка */
    color: #fff;                        /* белый текст */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.25); /* тень для читаемости */
    margin-left: 45px;                /* отступ снизу от блока сервисов */
}

.services {
    display: flex;
    flex-wrap: wrap;           /* блоки переносятся на новую строку на узких экранах */
    justify-content: center;   /* центрирование при переносе */
    gap: 20px;                 /* отступы между блоками гибкие */
    margin-bottom: 30px;
}

.services > div {
    flex: 1 1 200px;           /* гибкая ширина: min 200px, растет по мере возможности */
    max-width: 250px;          /* ограничение по ширине блока */
    box-sizing: border-box;
    text-align: center;        /* текст по центру блока */
}

.services img {
    width: 100%;               /* картинка занимает всю ширину блока */
    height: 160px;             /* фиксированная высота */
    object-fit: cover;         /* обрезает лишнее, чтобы все картинки одинаково выглядели */
    margin-bottom: 15px;
    border-radius: 20px;
}

.services p {
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 16px;

    font-weight: 600; /* делает текст чуть жирнее */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4); /* лёгкая тень для контраста */
    line-height: 1.4; /* чуть больше межстрочного интервала, читаемость */
}

/* =========================================================
   Кнопки второго блока
   ========================================================= */
.second-section-button {
    display: inline-block;          /* важно для hover/transform */

    margin-left: 45px;              /* твой текущий сдвиг */

    padding: 12px 28px;
    border-radius: 30px;

    font-weight: 600;
    font-size: 18px;

    border: none;
    cursor: pointer;

    background: linear-gradient(90deg, #ff8c00, #ffa500);
    color: #fff;

    text-decoration: none;          /* убираем подчёркивание */

    transition: all 0.3s ease;
    text-align: center;
}

/* hover эффект (как в третьем блоке) */
.second-section-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-decoration: none;
}

/* защита от underline в любых состояниях */
.second-section-button:visited,
.second-section-button:active,
.second-section-button:focus {
    text-decoration: none;
}


/* =========================================================
   Второй блок мобильный адаптив
   ========================================================= */
@media (max-width: 768px) {
    .second-section-button {
        margin-left: 0; /* убираем старый сдвиг */
        display: block;
        margin: 20px auto;
        text-align: center;
    }
}

/* =========================================================
   ТРЕТИЙ БЛОК (Удобства / Hero)
   ========================================================= */
.third-section {
    margin-bottom: 60px;
}

.third-section .fixed-container {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 20px;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.third-section h2 {
    text-align: left;
    background: rgba(255,255,255,0.15);
    padding: 10px 20px;
    border-radius: 15px;
    display: inline-block;
    font-size: clamp(24px, 4vw, 40px);
    color: #fff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.25);
    margin-left: 45px;
}

.third-section .services div img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 10px;
}


/* Кнопка третьего блока */
.third-section-button {
    display: inline-block;          /* Чтобы margin-auto сработал */
    margin: 0 auto;          /* Центрируем кнопку по горизонтали */
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 18px;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, #ff8c00, #ffa500);
    color: #fff;
    transition: all 0.3s ease;
    margin-left: 45px;
}

.third-section-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* защита от underline в любых состояниях */
.third-section-button:visited,
.third-section-button:active,
.third-section-button:focus {
    text-decoration: none;
}

/* =========================================================
   МОБИЛЬНЫЙ АДАПТИВ ТРЕТЬЕГО БЛОКА class="third-section"
   ========================================================= */
@media (max-width: 768px) {

    /* ===== 3 БЛОК КОНТЕЙНЕР ===== */
    .third-section .fixed-container {
        padding: 20px 16px;   /* делаем как у всех блоков */
    }

    /* ===== ЗАГОЛОВОК ===== */
    .third-section h2 {
        margin-left: 0;       /* убираем смещение */
        text-align: center;   /* центрируем */
        display: block;
        margin-bottom: 40px;
        font-size: clamp(22px, 6vw, 32px);
        margin-top: 0px;
    }

    /* ===== КАРТОЧКИ ===== */
    .third-section .services {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ===== КАРТОЧКА ===== */
    .third-section .services > div {
        width: 100%;
        text-align: center;
    }

    /* ===== КАРТИНКИ ===== */
    .third-section .services img {
        width: 100%;
        height: 220px;   /* 👈 важно: уменьшаем с 450px */
        object-fit: cover;
        border-radius: 16px;
        margin-bottom: 5px;
    }

    /* ===== ТЕКСТ ===== */
    .third-section .services p {
        font-size: 15px;
        margin-top: 1px;
    }

    /* ===== КНОПКА ===== */
    .third-section-button {
        margin: 20px auto 0;
        display: block;
        text-align: center;
    }
}



/* =========================================================
   ЧЕТВЕРНЫЙ БЛОК (price-info) ЦЕНЫ
   ========================================================= */

.price-info {
    /* Создает плавный переход цвета под углом 135 градусов от синего к светло-синему */
    background: linear-gradient(135deg, #3d52fe, #5b6cff);
    /* Устанавливает белый цвет текста для хорошего контраста с темным фоном */
    color: #fff;
    /* Внутренние отступы: 80px сверху/снизу (делает блок высоким) и 20px по бокам */
    padding: 80px 20px;
    /* Внешний отступ снизу: отодвигает следующий контент на 60px, чтобы не прилипал */
    margin-bottom: 60px;
}

.price-info .fixed-container {
    /* Ограничивает ширину блока, чтобы контент не растягивался на весь экран */
    max-width: 1200px;
    /* Центрирует блок по горизонтали внутри родителя */
    margin: 0 auto;
    /* Полупрозрачный белый фон (всего 8% непрозрачности) */
    background: rgba(255, 255, 255, 0.08);
    /* Размывает то, что находится ПОД блоком (эффект матового стекла) */
    backdrop-filter: blur(10px);
    /* Поддержка размытия фона для браузеров Safari */
    -webkit-backdrop-filter: blur(10px);
    /* Тонкая полупрозрачная рамка, создающая эффект грани стекла */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Сильное закругление углов (20px) */
    border-radius: 20px;
    /* Внутренние отступы, чтобы текст не прижимался к краям карточки */
    padding: 40px;
    /* Гарантирует, что padding не увеличит общую ширину блока (останется ровно 1100px) */
    box-sizing: border-box;
}


.price-subtitle {
    /* Фиксированный размер шрифта (хорошо читается на большинстве экранов) */
    font-size: 18px;
    /* Делает текст слегка прозрачным (85%), чтобы визуально отделить его от главного заголовка */
    opacity: 0.85;
    /* Отступ снизу, чтобы создать свободное пространство перед следующим элементом */
    margin-bottom: 30px;
}

.price-info h2 {
    /* «Умный» размер шрифта: минимум 26px, максимум 42px, а в промежутке плавно меняется как 4% от ширины экрана */
    font-size: clamp(26px, 4vw, 42px);
    /* Отступ снизу, чтобы заголовок не «прилипал» к основному тексту */
    margin-bottom: 20px;
    /* Межстрочный интервал: делает текст компактнее (обычно стандарт 1.4-1.5, здесь 1.2 для плотности) */
    line-height: 1.2;
    margin-left: 0;
}

.price-features {
    /* Включает режим сетки (Grid Layout) для управления дочерними элементами */
    display: grid;
    /* Делит блок на 2 колонки равной ширины (1fr — одна часть свободного места) */
    grid-template-columns: repeat(2, 1fr);
    /* Отступы в сетке: 14px между строками и 24px между колонками */
    gap: 14px 24px;
    /* Внешний отступ снизу, чтобы отделить список от следующего блока */
    margin-bottom: 30px;
}
.feature {
    /* Включает Flexbox, чтобы иконка и текст встали в одну горизонтальную линию */
    display: flex;
    /* Устанавливает фиксированный отступ в 10px между иконкой и текстом */
    gap: 10px;
    /* Выравнивает иконку и текст строго по центру их общей горизонтальной оси */
    align-items: center;
    /* Базовый размер шрифта для комфортного чтения описания преимуществ */
    font-size: 16px;
    /* Межстрочный интервал: добавляет немного «воздуха» между строками текста */
    line-height: 1.4;
}
.price-conditions {
    /* Уменьшенный размер шрифта для второстепенной информации */
    font-size: 14px;
    /* Делает текст еще менее заметным (70% непрозрачности), чем основной контент */
    opacity: 0.7;
    /* Тонкая полупрозрачная линия сверху, отделяющая условия от основного списка */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    /* Отступ сверху от линии, чтобы текст не «прилипал» к разделителю */
    padding-top: 20px;
}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ ЧЕТВЕРТОГО БЛОКА (price-info) ЦЕНЫ
   ========================================================= */
/* Условие: стили внутри сработают только если ширина экрана 768px или меньше */
@media (max-width: 768px) {
    .price-info {
        /* Уменьшает внешние отступы всего блока (было 80px/20px), чтобы сэкономить место */
        padding: 40px 16px;
    }
    .price-info .fixed-container {
        /* Делает внутренний отступ карточки компактнее (было 40px) */
        padding: 20px;
    }
    .price-features {
        /* Перестраивает сетку: вместо двух колонок теперь одна (элементы встают друг под друга) */
        grid-template-columns: 1fr;
    }
    .price-info h2 {
        /* Фиксирует размер заголовка на 26px, отключая динамический clamp для стабильности */
        font-size: 26px;
    }
}


/* =========================
   ПОДВАЛ сайта (основной контейнер футера с картой)
========================= */

.footer-map {
    position: relative; /* создаём контекст для absolute (карта и overlay будут внутри) */
    min-height: 380px;  /* минимальная высота футера (чтобы карта не схлопнулась) */
    overflow: hidden;   /* обрезаем всё, что выходит за границы блока */
    color: #fff;        /* базовый цвет текста внутри футера */
}

/* =========================
   КАРТА (фон футера)
========================= */

.map-bg {
    position: absolute; /* выводим карту из потока документа */
    inset: 0;           /* top:0 right:0 bottom:0 left:0 (растягиваем на весь футер) */
    z-index: 0;         /* самый нижний слой */
}

.map-bg iframe {
    width: 100%;        /* карта по ширине контейнера */
    height: 100%;       /* карта по высоте контейнера */
    border: 0;          /* убираем рамку iframe */
}

/* =========================
   ЗАТЕМНЕНИЕ ПОВЕРХ КАРТЫ
========================= */

.overlay {
    position: absolute;        /* накладываем поверх карты */
    inset: 0;                  /* растягиваем на весь футер */
    background: rgba(0,0,0,0.55); /* затемнение (делает текст читаемым) */
    z-index: 1;                /* слой выше карты */
}

/* =========================
   КОНТЕНТ ФУТЕРА (ссылки, контакты, кнопки)
========================= */

.footer-map .fixed-container {
    position: relative;
    z-index: 2;

    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;  /* ← ИЗМЕНИЛ с flex-start на center */

    padding: 40px;
    box-sizing: border-box;

    min-height: 380px;  /* ← ДОБАВИЛ: минимальная высота = высоте карты */
}

/* =========================
   БЛОКИ ВНУТРИ ФУТЕРА
========================= */

.footer-links,
.contacts,
.action {
    display: flex;        /* включаем flex */
    flex-direction: column; /* элементы идут вертикально */
    gap: 40px;            /* расстояние между элементами */
}

/* =========================
   ССЫЛКИ И КОНТАКТЫ
========================= */

.footer-links a,
.contacts a,
.contacts span {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;

    font-size: 30px;        /* 👈 увеличили текст */
    font-weight: 500;       /* 👈 чуть жирнее, уже “премиум” */
    letter-spacing: 0.3px;  /* 👈 воздух между буквами */
    font-family: 'Roboto', sans-serif;

    opacity: 1;
    transition: all 0.25s ease;
    cursor: pointer;
}

/* hover эффект (при наведении) */
.footer-links a:hover,
.contacts a:hover {
    color: #ffffff;

    transform: translateX(4px); /* лёгкое движение */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);

    font-weight: 600; /* становится чуть жирнее */
}
/* =========================
   КНОПКА(ССЫЛКА НА ЯНДЕКС КАРТУ) В ФУТЕРЕ
========================= */
.map-button {
    display: inline-block; /* делает ссылку как кнопку (можно задавать размеры) */

    padding: 12px 22px; /* внутренние отступы: сверху/снизу 12px, по бокам 22px */

    border-radius: 10px; /* скругление углов */

    color: #fff; /* цвет текста — белый */

    text-decoration: none; /* убираем подчёркивание ссылки */

    font-size: 15px; /* размер текста */

    font-weight: 500; /* немного жирнее обычного текста */

    background: linear-gradient(
        270deg,
        #00c6ff,
        #0072ff,
        #00ffb3,
        #00c6ff
    ); /* градиент (синий + зелёный) */

    background-size: 300% 300%; /* увеличиваем градиент для анимации */

    transition: transform 0.2s ease, box-shadow 0.2s ease; /* плавность эффектов */

    box-shadow: 0 0 10px rgba(0, 150, 255, 0.4); /* лёгкое свечение */

    animation: gradientMove 6s ease infinite; /* анимация переливания */
}

/* ✨ анимация градиента */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%; /* стартовая позиция */
    }
    50% {
        background-position: 100% 50%; /* середина (сдвиг градиента) */
    }
    100% {
        background-position: 0% 50%; /* возвращаем назад */
    }
}

/* 🖱 при наведении */
.map-button:hover {
    transform: translateY(-2px); /* кнопка чуть “поднимается” вверх */

    box-shadow: 0 0 20px rgba(0, 200, 255, 0.7); /* усиливаем свечение */
}

/* 🖱 при клике */
.map-button:active {
    transform: scale(0.97); /* лёгкое нажатие */
}

.action button {
    margin-bottom: 20px; /* отступ между кнопкой и иконками */
}

/* =========================
   КНОПКА (Забронировать) В ФУТЕРЕ
========================= */

.footer-button {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    /* создаём градиентный фон: голубой → синий (эффект современного UI) */

    border: none;
    /* убираем стандартную рамку браузера */

    color: #fff;
    /* цвет текста — белый для контраста */

    padding: 12px 22px;
    /* внутренние отступы:
       12px сверху/снизу, 22px слева/справа (размер кнопки) */

    border-radius: 10px;
    /* скругляем углы (делает кнопку мягкой и современной) */

    font-size: 15px;
    /* размер текста внутри кнопки */

    font-weight: 600;
    /* делаем текст полужирным (CTA выглядит сильнее) */

    cursor: pointer;
    /* курсор “рука” при наведении (показывает кликабельность) */

    box-shadow: 0 0 15px rgba(0, 150, 255, 0.35);
    /* мягкое голубое свечение вокруг кнопки (эффект “подсветки”) */

    transition: all 0.25s ease;
    /* плавная анимация всех изменений (hover / active) */
}

/* =========================
   ЭФФЕКТ ПРИ НАВЕДЕНИИ
========================= */

.footer-button:hover {
    transform: translateY(-2px);
    /* кнопка немного поднимается вверх (эффект “живости”) */

    box-shadow: 0 0 25px rgba(0, 200, 255, 0.6);
    /* усиливаем свечение при наведении */

    filter: brightness(1.1);
    /* слегка увеличиваем яркость кнопки */
}

/* =========================
   ЭФФЕКТ ПРИ НАЖАТИИ
========================= */

.footer-button:active {
    transform: scale(0.97);
    /* кнопка немного “сжимается” при клике (эффект нажатия) */
}


/* =========================
   СОЦИАЛЬНЫЕ ИКОНКИ
========================= */

.icons {
    display: flex; /* размещаем иконки в ряд */
    gap: 80px;     /* расстояние между иконками */
}

.icons img {
    width: 50px;   /* размер иконки */
    height: 50px;  /* фиксируем высоту */
    cursor: pointer; /* курсор "рука" */
    opacity: 0.85;   /* слегка приглушаем */
    transition: 0.2s; /* плавная анимация при hover */
}

/* hover эффект для иконок */
.icons img:hover {
    opacity: 1;         /* делаем ярче */
    transform: scale(1.1); /* лёгкое увеличение */
}

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

@media (max-width: 768px) {

    .footer-map .fixed-container {
        flex-direction: column; /* колонки становятся вертикальными */
        align-items: center;    /* центрируем всё */
        text-align: center;     /* текст по центру */
        gap: 25px;              /* расстояние между блоками */
        padding: 20px;          /* уменьшаем отступы */
    }

    .footer-links,
    .contacts,
    .action {
        align-items: center; /* центрируем элементы внутри блоков */
    }

    .icons {
        justify-content: center; /* центрируем иконки */
    }
}

/* =========================================================
   Попап
   ========================================================= */
.popup-container {
    background-color: #000000e3;
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.popup {
    background-color: white;
    width: 300px;
    height: 300px;
    padding: 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.popup-container button {
    font-size: 20px;
    width: 200px;
    height: 50px;
    background-color: green;
    border-radius: 10px;
    border-color: white;
}

.popup input {
    font-size: 16px;
    width: 100%;
    height: 40px;
    display: block;
    margin-bottom: 40px;
}

/* =========================================================
   МОБИЛЬНЫЙ АДАПТИВ (смартфоны до 768px)
   ========================================================= */
@media (max-width: 768px) {

    header .fixed-container {
        padding: 0 30px;
        position: relative;
    }

    .header-links,
    .header-actions {
        display: none;
    }

    .burger {
        display: flex;
    }

    section {
        width: 100%;
        padding: 20px 0;
    }

    .first-block {
        height: auto;
        min-height: 280px;
        padding-top: 100px;
    }

    .first-block h1 {
        font-size: 32px;
    }

    .first-block > div {
        background-image: none;
    }




/* =========================================================
   МОБИЛЬНЫЙ АДАПТИВ ВТОРОГО БЛОКА
   ========================================================= */

/* Настройка заголовка второго блока */
@media  (max-width: 768px) {
    .second-section .fixed-container h2 {
        margin-top: 0; /* Расстояние от предыдущего блока минимальное, можно чуть увеличить, если нужно больше воздуха */
        margin-bottom: 50px; /* Расстояние до первой картинки блока — заголовок «дышит» */
        margin-left: 0; /* Убираем левый отступ для мобильной версии, чтобы центрирование было корректным */
        text-align: center; /* Центрируем заголовок по ширине экрана */
        padding: 10px 16px; /* Внутренние отступы вокруг текста, чтобы фон стекла не прилегал к краям */
        font-size: clamp(22px, 6vw, 32px); /* Адаптивный размер: минимум 22px, максимум 32px, растет относительно ширины экрана */
        display: block; /* Чтобы элемент занимал всю доступную ширину и центрирование работало */
    }
}

/* Настройка изображений второго блока */
@media (max-width: 768px) {
    .services > div {
        width: 100%; /* Блоки сервисов занимают всю ширину контейнера на мобильных */
        margin: 0 auto; /* Центрируем блоки горизонтально */
        text-align: center; /* Внутренний текст (если есть) тоже центрируем */
    }

    .second-section .services img {
        width: 100%; /* Изображение занимает всю ширину блока */
        height: auto; /* Высота пропорциональна ширине */
        margin-bottom: 15px; /* Отступ снизу между картинкой и текстом */
        border-radius: 20px; /* Скругление углов сохраняем */
        object-fit: cover; /* Изображение обрезается по размеру блока, чтобы не искажалось */
    }

    .services p {
        margin-top: -10px; /* Сдвигаем текст чуть выше, ближе к картинке */
        padding: 6px 12px; /* Внутренние отступы для стеклянного фона */
        font-size: 15px; /* Мелкий шрифт для мобильных устройств */
        margin-bottom: 20px; /* Отступ после текста для разделения блоков */
    }
}


    /* Примеры работ — в колонку */
    .work-examples {
        flex-direction: column;
        gap: 24px;
    }

    .work-examples > div {
        width: 100%;
    }

    .work-examples img {
        width: 100%;
    }


    footer .fixed-container {
        flex-direction: column;
        gap: 28px;
        padding: 30px 16px;
    }
}

/* кнопка "Выйти" как ссылка в header-links */
.link-button {
    background: none;
    border: none;

    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 500;

    font-family: inherit;
    cursor: pointer;

    padding: 0;
    margin: 0;

    white-space: nowrap;

    transition: color 0.2s ease;
}

/* hover — как у ссылок */
.link-button:hover {
    color: #fff;
    text-decoration: none;
}