/* Сброс стандартных отступов */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Включает плавную прокрутку */
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

/* --- Хедер и Меню --- */
.header {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 2rem 3rem;
    z-index: 10;
}

.nav-links {
    display: flex;
    justify-content: flex-end;
    /* Меню справа */
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 0.7;
}

/* --- Hero Section (Главный экран) --- */
.hero-section {
    position: relative;
    /* Вместо flex: 1 ставим четкую высоту */
    min-height: 100vh;
    /* 100% высоты экрана */
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background-image: url('img/IMG_1641.JPG');
    /* Ваш путь к фону */
    background-size: cover;
    background-position: center;
}

/* Затемнение фона для читаемости текста */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(80, 80, 80, 0.6);
    /* Полупрозрачный серый слой */
}

.hero-content {
    position: relative;
    z-index: 2;
    /* Чтобы текст был поверх затемнения */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Типографика */
.welcome-text {
    font-size: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1rem;
}

.crown-icon {
    width: 460px;
    /* Настройка размера иконки */
    margin-bottom: 0.5rem;
    /* Делаем иконку белой, если она черная */
}

.main-title {
    font-family: 'Cinzel', serif;
    /* Похожий шрифт с засечками */
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.subtitle {
    font-size: 1.2rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 0.5rem;
    color: #e0e0e0;
}

/* --- Кнопка --- */
.cta-button {
    margin-top: 2rem;
    background-color: #6d1c1c;
    /* Темно-красный цвет с макета */
    color: white;
    padding: 1rem 2.5rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #8a2424;
}

/* --- Нижняя полоса --- */
.bottom-bar {
    height: 20px;
    background-color: #581c1c;
    /* Тот же красный оттенок */
    width: 100%;
}

/* --- Секция О Нас --- */
.about-section {
    background-color: #581c1c;
    /* Тоже ставим 100% высоты экрана */
    min-height: 100vh;
    width: 100%;

    /* Центрируем контент внутри блока */
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2rem;
    /* Немного отступов, чтобы контент не прилипал к краям на маленьких экранах */
}

.about-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    /* Расстояние между текстом и фото */
}

/* Текстовая часть */
.about-text {
    flex: 1;
    /* Занимает половину ширины */
    max-width: 500px;
}

.section-title {
    font-family: 'Montserrat', sans-serif;
    /* Или Cinzel, если хотите как в заголовке */
    font-size: 3.5rem;
    font-weight: 400;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.about-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 300;
}

/* Галерея с наложением фото */
.about-gallery {
    flex: 1;
    position: relative;
    height: 400px;
    /* Фиксируем высоту для композиции */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    position: absolute;
    width: 220px;
    /* Примерная ширина карточек */
    height: 320px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

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

/* Позиционирование карточек */

/* Левая карточка (на заднем плане) */
.card-left {
    transform: translateX(-140px) scale(0.9);
    z-index: 1;
    opacity: 0.8;
    /* Немного затемняем */
}

/* Правая карточка (на заднем плане) */
.card-right {
    transform: translateX(140px) scale(0.9);
    z-index: 1;
    opacity: 0.8;
}

/* Центральная карточка (на переднем плане) */
.card-center {
    z-index: 2;
    transform: scale(1.1);
    /* Чуть больше остальных */
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Стрелки навигации */
.slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 10px;
    pointer-events: none;
    /* Чтобы клики проходили сквозь контейнер */
}

.nav-btn {
    pointer-events: auto;
    /* Включаем клики для кнопок */
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Адаптив для мобильных (простой вариант) */
@media (max-width: 900px) {
    .about-container {
        flex-direction: column;
        text-align: center;
    }

    .about-gallery {
        margin-top: 2rem;
        width: 100%;
        transform: scale(0.8);
        /* Уменьшаем всю галерею, чтобы влезла */
    }
}

/* --- Секция Видео --- */
.video-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Фоновое изображение для всей секции (замените на свое) */
    background-image: url('img/bg-dancers.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Затемнение фона, чтобы телефон выделялся */
.video-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Сильное затемнение */
    z-index: 1;
}

/* Контейнер телефона */
.phone-container {
    position: relative;
    z-index: 2;
    transform: scale(0.9);
    /* Можно менять масштаб всего телефона здесь */
}

/* --- Сам телефон (Рамка) --- */
.phone-frame {
    width: 320px;
    /* Ширина телефона */
    height: 650px;
    /* Высота телефона */
    background: #000;
    border-radius: 40px;
    box-shadow:
        0 0 0 2px #333,
        /* Тонкая серая обводка */
        0 20px 50px rgba(0, 0, 0, 0.8);
    /* Тень от телефона */
    padding: 12px;
    /* Толщина рамок экрана */
    position: relative;
    box-sizing: content-box;
    /* Чтобы padding не сжимал контент */
}

/* "Челка" сверху (Notch) */
.notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #000;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 5;
}

/* Экран внутри */
.screen-content {
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border-radius: 30px;
    /* Закругление экрана внутри */
    overflow: hidden;
    position: relative;
}

/* Видео */
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Видео заполнит экран без черных полос */
    display: block;
}

/* --- Кнопка Play --- */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    /* Полупрозрачный круг */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 10;
}

.play-icon {
    font-size: 30px;
    color: white;
    margin-left: 5px;
    /* Визуальная компенсация треугольника */
}

.play-button:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Класс, который мы добавим через JS, чтобы скрыть кнопку */
.hidden {
    opacity: 0;
    pointer-events: none;
}

/* --- Секция Описание Танцев --- */
.dance-descriptions {
    background-color: #050505;
    /* Очень темный, почти черный фон */
    color: #fff;
    padding: 5rem 2rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('img/Dancer-4.JPG');
    background-size: cover;
}


.dance-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6rem;
    /* Большое расстояние между блоками */
}

.tag-wrapper {
    width: 100%;
    text-align: center;
    /* Выравниваем по центру */
    margin-bottom: 4rem;
    /* Отступ снизу до текста "Бастау" */
}

.section-tag {
    background-color: #ffffff;
    /* Белый фон */
    color: #000000;
    /* Черный текст */
    padding: 0.6rem 2rem;
    /* Размер кнопки (верх/низ, лево/право) */
    border-radius: 50px;
    /* Сильное закругление (эффект таблетки) */

    font-family: 'Cinzel', serif;
    /* Ваш фирменный шрифт */
    font-size: 2.2rem;
    font-weight: 600;
    /* Жирность */
    text-transform: uppercase;
    /* Все буквы заглавные */
    letter-spacing: 2px;
    /* Расстояние между буквами */

    display: inline-block;
    /* Чтобы размер был по тексту */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* Легкая тень для объема */
}

/* Адаптив для мобильных (чуть поменьше) */
@media (max-width: 600px) {
    .section-tag {
        font-size: 2rem;
        padding: 0.5rem 1.5rem;
        margin-bottom: 1rem;
    }

    .tag-wrapper {
        margin-bottom: 3rem;
    }
}

.dance-item {
    display: flex;
    align-items: center;
    /* Выравнивание по центру вертикально */
    justify-content: space-between;
    gap: 4rem;
}

/* Это правило меняет порядок элементов для второго блока */
.dance-item.reverse {
    flex-direction: row-reverse;
    text-align: right;
    /* Текст выравниваем вправо для красоты */
}

/* Текстовая часть */
.dance-info {
    flex: 1;
    /* Занимает 1 часть пространства */
    max-width: 550px;
}

.dance-title {
    font-family: 'Cinzel', serif;
    /* Красивый шрифт с засечками */
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.dance-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #cccccc;
    /* Чуть серый текст для читаемости на черном */
}

/* Видео часть */
.dance-video-wrapper {
    flex: 1;
    /* Занимает 1 часть пространства */
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    /* Тень под видео */
    background: #000;
}

.dance-video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    /* Фиксируем формат видео 16:9 */
}

/* --- Адаптив для телефонов --- */
@media (max-width: 900px) {

    .dance-item,
    .dance-item.reverse {
        flex-direction: column;
        /* Все блоки друг под другом */
        text-align: center;
        /* Текст по центру */
    }

    .dance-title {
        font-size: 1.8rem;
    }
}

/* --- Секция Fusion и Восток --- */
.fusion-section {
    position: relative;
    /* Укажите путь к фото с красно-черными костюмами */
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('img/IMG_1670.JPG');
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */
}

/* Добавляем затемнение поверх фона, иначе текст не будет видно */


/* Поднимаем контент над затемнением */
.fusion-section .dance-container {
    position: relative;
    z-index: 2;
}

/* --- Европейский Блок --- */
.euro-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;

    /* Фон: поставьте фото зала или вальса */
    background-image: url('img/IMG_1920.JPG');
    background-size: cover;
    background-position: center;
}

/* Затемнение фона */
.euro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Темный слой */
    z-index: 1;
}

.euro-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
    /* Центрируем вертикально */
    justify-content: space-between;
    gap: 4rem;
}

/* Текстовая часть */
.euro-text {
    flex: 1;
    color: #fff;
}

.euro-title {
    font-family: 'Cinzel', serif;
    /* Или Montserrat, если хотите строже */
    font-size: 3rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.euro-list {
    list-style: none;
    /* Убираем стандартные точки браузера */
}

.euro-list li {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    /* Отступ между пунктами */
    position: relative;
    padding-left: 1.5rem;
    /* Место для нашей точки */
}

/* Создаем свои красивые точки (буллиты) */
.euro-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #fff;
    /* Цвет точки */
    font-size: 1.5rem;
    line-height: 1.6rem;
}

/* Фотографии справа */
.euro-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Расстояние между двумя фото */
}

.euro-img-wrapper {
    width: 100%;
    height: 300px;
    /* Высота каждого фото */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
}

.euro-img-wrapper:hover {
    transform: scale(1.02);
    /* Легкое увеличение при наведении */
}

.euro-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Адаптив для мобильных */
@media (max-width: 900px) {
    .euro-container {
        flex-direction: column;
    }

    .euro-title {
        font-size: 2rem;
        text-align: center;
    }
}

/* --- Секция Отзывы --- */
.review-section {
    position: relative;
    min-height: 60vh;
    /* Высота поменьше, чем у других блоков (60% экрана) */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    padding: 3rem 1rem;

    /* Фоновое изображение */
    background-image: url('img/dancer-3.JPG');
    /* Фото свадьбы/тоста */
    background-size: cover;
    background-position: center;
}

/* Делаем фон черно-белым и затемненным */
.review-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Сильное затемнение */
    backdrop-filter: grayscale(100%);
    /* Обесцвечиваем фон, если он цветной */
    z-index: 1;
}

.review-content {
    position: relative;
    z-index: 2;
    /* Текст поверх затемнения */
    max-width: 900px;
    /* Ограничиваем ширину текста, чтобы не растягивался на весь экран */
}

.review-title {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    margin-bottom: 2.5rem;
    font-weight: 400;
}

.review-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-style: italic;
    /* Курсив, как на фото */
    line-height: 1.8;
    font-weight: 300;
}

/* Адаптив для телефонов */
@media (max-width: 600px) {
    .review-title {
        font-size: 2rem;
    }

    .review-text {
        font-size: 1rem;
    }
}

/* --- Секция Вальс (Финальное видео) --- */
.waltz-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;

    /* Фон с дымом и девушками */
    background-image: url('img/bg-waltz.jpg');
    background-size: cover;
    background-position: center;
}

/* Затемнение фона, чтобы видео выделялось */
.waltz-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.waltz-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    /* Ограничиваем ширину плеера */
}

/* --- Стилизация "Окна" плеера --- */
.video-window {
    background: #000;
    border-radius: 12px;
    /* Закругленные углы */
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
    /* Глубокая тень для эффекта парения */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Шапка окна */
.window-header {
    background: #1f1f1f;
    /* Темно-серый цвет шапки */
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Цветные точки (как в Mac) */
.window-controls {
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.red {
    background-color: #ff5f56;
}

.yellow {
    background-color: #ffbd2e;
}

.green {
    background-color: #27c93f;
}

/* Заголовок в центре шапки */
.window-title {
    color: #888;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-right: auto;
    margin-left: 20px;
    /* Сдвигаем чуть правее от точек */
}

/* Контент (Видео) */
.window-content video {
    width: 100%;
    height: auto;
    display: block;
    /* Убирает лишние отступы снизу */
    aspect-ratio: 16 / 9;
    /* Фиксирует пропорции кино */
}

/* Адаптив */
@media (max-width: 600px) {
    .waltz-section {
        padding: 1rem;
    }

    .window-title {
        display: none;
        /* На телефонах скрываем надпись, чтобы не мешала */
    }
}

/* --- Секция KAZAKH PARTY --- */
.party-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: hidden;

    /* Фон: Вам нужно собрать коллаж из фото, как на скрине, и сохранить как одну картинку */
    background-image: url('img/bg-party-collage.jpg');
    background-size: cover;
    background-position: center;
}

/* Затемнение, чтобы белый текст читался на пестром фоне */
.party-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    /* Довольно темное затемнение (75%) */
    z-index: 1;
}

/* Добавляем эффект золотых конфетти (через фоновую картинку или CSS) */
/* Если конфетти уже есть на фото-фоне, этот блок не нужен */

.party-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Текст слева, телефон справа */
    gap: 4rem;
}

/* Стили текста */
.party-text-content {
    flex: 1;
    color: #fff;
    text-align: left;
}

.party-title {
    font-family: 'Cinzel', serif;
    font-size: 4.5rem;
    /* Очень крупный заголовок */
    line-height: 1;
    margin-bottom: 2rem;
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.party-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 300;
    color: #e0e0e0;
}

/* Обертка для телефона, чтобы он не был гигантским */
.party-phone-wrapper {
    flex: 0 0 auto;
    /* Не растягиваться */
    transform: scale(0.9);
    /* Чуть уменьшаем масштаб телефона для аккуратности */
}

/* Адаптив для телефонов */
@media (max-width: 900px) {
    .party-container {
        flex-direction: column;
        /* Вертикальное расположение */
        text-align: center;
    }

    .party-text-content {
        text-align: center;
        margin-bottom: 3rem;
    }

    .party-title {
        font-size: 3rem;
    }

    .party-desc {
        font-size: 1rem;
    }
}

/* --- Финальная Секция --- */
.final-section {
    position: relative;
    min-height: 100vh;
    /* Секция на весь экран */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Контент начинается сверху */
    padding-top: 25vh;
    /* Отступ сверху для кнопки (15% от высоты экрана) */

    /* Фон с девушками на черном */
    background-image: url('img/bg-final.jpg');
    background-size: cover;
    background-position: bottom center;
    /* Важно! Прижимаем фото к низу */
    background-color: #050505;
    /* Цвет фона, если картинка не загрузится */
}

/* Легкое затемнение только сверху, чтобы текст читался */
.final-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    /* Занимает только верхнюю половину */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    z-index: 1;
}

.final-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    /* Расстояние между кнопкой и текстом */
}

/* Стили кнопки (чуть крупнее обычной) */
.final-btn {
    background-color: #6d1c1c;
    /* Темно-красный */
    padding: 1.5rem 4rem;
    font-size: 1.1rem;
    line-height: 1.4;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(109, 28, 28, 0.3);
    /* Красное свечение */
    text-align: center;
}

.final-btn:hover {
    background-color: #8a2424;
    transform: translateY(-2px);
}

/* Стили цитаты */
.final-quote {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-style: italic;
    /* Курсив */
    color: #fff;
    max-width: 900px;
    line-height: 1.6;
    padding: 0 1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* style.css */

/* Заголовок контактов */
.contact-title {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Контейнер для кнопок */
.social-buttons {
    display: flex;
    gap: 1.5rem;
    /* Расстояние между кнопками */
    margin-bottom: 2rem;
    flex-wrap: wrap;
    /* Чтобы на маленьких экранах переносились */
    justify-content: center;
}

/* Общий стиль кнопок */
.social-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 2rem;
    border-radius: 50px;
    /* Круглые края */
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    transition: transform 0.3s, box-shadow 0.3s;
    min-width: 180px;
    /* Одинаковая ширина */
    justify-content: center;
}

.social-btn:hover {
    transform: translateY(-3px);
    /* Легкий подъем при наведении */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Стиль для Instagram */
.instagram {
    /* Градиент Instagram */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4);
}

/* Стиль для WhatsApp */
.whatsapp {
    background-color: #25D366;
    /* Зеленый WhatsApp */
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

/* Иконки внутри кнопок */
.icon {
    font-size: 1.4rem;
}

/* Текстовый номер телефона */
phone-number {
    font-family: 'Montserrat', sans-serif;

    /* 1. Делаем шрифт крупнее */
    font-size: 1.8rem;
    /* Было 1.2rem */

    /* 2. Делаем жирным */
    font-weight: 700;

    /* 3. Убираем прозрачность, чтобы был ярко-белым */
    opacity: 1;
    /* Было 0.8 */

    margin-top: 1rem;
    /* Отступ сверху от кнопок */
    margin-bottom: 3rem;
    letter-spacing: 2px;

    /* (Опционально) Добавляем легкую тень, чтобы выделялся на фоне */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
    .contact-title {
        font-size: 2rem;
    }

    .social-buttons {
        flex-direction: column;
        /* Кнопки друг под другом на телефоне */
        gap: 1rem;
        width: 100%;
        padding: 0 2rem;
    }

    .social-btn {
        width: 100%;
        /* Кнопка на всю ширину */
    }
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
    .final-section {
        padding-top: 10vh;
        background-position: center bottom;
        /* Центрируем, чтобы всех девушек было видно */
    }

    .final-quote {
        font-size: 1rem;
    }

    .final-btn {
        padding: 1rem 3rem;
        font-size: 1rem;
    }

    .phone-number {
        font-size: 1.4rem;
    }
}


/* Начальное состояние элемента (скрыт и сдвинут вниз) */
.hidden-element {
    opacity: 0;
    transform: translateY(50px);
    /* Сдвинут вниз на 50px */
    transition: all 1s ease-out;
    /* Плавное появление за 1 секунду */
}

/* Конечное состояние (виден и на месте) */
.show-element {
    opacity: 1;
    transform: translateY(0);
}

/* --- Стили для Логотипа на главном экране --- */
.hero-main-logo {
    display: block;
    width: 100%;

    /* Увеличиваем это значение, чтобы лого стало огромным */
    max-width: 1000px;
    /* Попробуйте 1000px или даже 1200px */

    height: auto;
    margin: 0 auto 3rem auto;
    /* Центрируем */

    /* Убираем фильтр цвета, оставляем только тень для контраста */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

/* На мобильных телефонах делаем поменьше, чтобы влезало в экран */
@media (max-width: 600px) {
    .hero-main-logo {
        max-width: 90%;
        /* Логотип займет 90% ширины экрана телефона */
        margin-bottom: 2rem;
    }
}

/* --- Исправления для мобильных телефонов (Финальная версия) --- */
@media (max-width: 900px) {


    .about-text,
    .euro-text,
    .party-text-content,
    .review-content,
    .dance-info {
        padding: 0 20px !important;
        /* Отступы слева и справа по 20px */
        width: 100%;
        box-sizing: border-box;
        /* Чтобы отступы не увеличивали ширину блока */
    }

    body,
    html {
        overflow-x: hidden;
        /* Обрезает всё, что торчит сбоку */
        width: 100%;
        position: relative;
    }

    /* 1. ШАПКА И ЛОГОТИП */
    .header {
        padding: 1rem;
        position: absolute;
    }

    .nav-links {
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .nav-links a {
        font-size: 0.75rem;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    }

    .hero-content {
        margin-top: 80px;
        gap: 1rem;
    }

    .hero-main-logo {
        max-width: 70% !important;
        margin-bottom: 1rem !important;
    }

    .cta-button {
        margin-top: 0.5rem;
    }

    /* 2. ИСПРАВЛЕНИЕ "О НАС" - РЕЖИМ BLOCK */
    /* Отключаем flexbox и делаем обычные блоки друг под другом */

    .about-section {
        display: block !important;
        /* Убираем центрирование экрана */
        height: auto !important;
        /* Разрешаем растягиваться */
        min-height: 100vh;
        padding-top: 7rem;
        /* Отступ сверху для заголовка */
        padding-bottom: 4rem;
    }

    .about-container {
        display: block !important;
        /* Важно: отключаем flex */
        width: 100%;
        max-width: 100%;
        padding: 0 1rem;
    }

    .about-text {
        width: 100%;
        max-width: 100%;
        margin-bottom: 4rem !important;
        /* ЖЕСТКИЙ отступ снизу от текста */
        display: block;
    }

    .about-gallery {
        display: block !important;
        /* Тоже блок */
        width: 100%;
        height: 400px;
        /* Фиксируем высоту галереи */
        margin-top: 2rem !important;
        transform: scale(0.9);
        /* Чуть уменьшаем, чтобы влезло */
        transform-origin: center top;
        /* Масштабируем от верха */
        position: relative;
        z-index: 1;
    }

    /* Дополнительно: поправляем карточки, чтобы они были по центру */
    .card {
        left: 50%;
        /* Сдвигаем начало карточки в центр */
        margin-left: -110px;
        /* Сдвигаем обратно на половину ширины (220px / 2) */
    }

    .nav-btn {
        width: 60px !important;
        /* Было 40px */
        height: 60px !important;
        /* Было 40px */
        font-size: 1.5rem !important;
        background: rgba(0, 0, 0, 0.5) !important;
        /* Полупрозрачный фон, чтобы было видно */
        border: 2px solid #fff;
        z-index: 100;
        /* Чтобы точно были поверх картинки */
    }

    /* Раздвигаем стрелки чуть шире, чтобы не закрывали лицо */
    .slider-nav {
        width: 120% !important;
        /* Кнопки выйдут за пределы центральной картинки */
        left: -10% !important;
    }

    /* Сброс позиций для боковых карточек, чтобы они не улетали */
    .card-left {
        transform: translateX(-140px) scale(0.9);
    }

    .card-right {
        transform: translateX(140px) scale(0.9);
    }

    .card-center {
        transform: scale(1.1);
    }
}

/* style.css */

/* Контейнер для чата */
.chat-container {
    width: 100%;
    max-width: 600px;
    /* Ограничиваем ширину, чтобы было похоже на телефон */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Сообщение прижато влево (как входящее) */
}

/* Сам пузырь сообщения */
.message-bubble {
    background: rgba(255, 255, 255, 0.15);
    /* Полупрозрачный белый */
    backdrop-filter: blur(10px);
    /* Размытие фона под сообщением */
    -webkit-backdrop-filter: blur(10px);
    /* Для Safari */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Тонкая рамка */

    border-radius: 20px;
    border-bottom-left-radius: 5px;
    /* Делаем "хвостик" слева внизу */

    padding: 1.5rem;
    text-align: left;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Имя отправителя */
.sender-name {
    display: block;
    color: #ffbd2e;
    /* Золотистый цвет имени (или любой другой) */
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-family: 'Montserrat', sans-serif;
}

/* Текст сообщения */
.message-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 0.5rem;
    font-style: normal;
    /* Убираем курсив, делаем обычный текст */
}

/* Подвал сообщения (Время и галочки) */
.message-footer {
    display: flex;
    justify-content: flex-end;
    /* Прижимаем вправо */
    align-items: center;
    gap: 5px;
    opacity: 0.7;
}

.message-time {
    font-size: 0.75rem;
    color: #ddd;
}

.read-status {
    font-size: 0.8rem;
    color: #4cd964;
    /* Зеленый цвет галочек (как в WhatsApp) */
    letter-spacing: -2px;
    /* Сдвигаем галочки ближе друг к другу */
}

/* Адаптив для телефонов */
@media (max-width: 600px) {
    .message-bubble {
        margin: 0 1rem;
        /* Отступы от краев экрана */
        padding: 1rem;
    }

    .message-text {
        font-size: 0.9rem;
    }
}

/* style.css */

/* Линия разделителя */
.national-divider {
    width: 100%;
    height: 5px;
    /* Золотой градиент: прозрачный -> золотой -> прозрачный */
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    margin: 4rem 0;
    /* Отступы сверху и снизу (чтобы не слипалось) */
    position: relative;
    opacity: 0.8;
}

/* Ромб (Орнамент) по центру */
.national-divider::after {
    content: '◆';
    /* Символ ромба */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Центрируем ровно посередине */

    background-color: #050505;
    /* Цвет фона сайта (чтобы перекрыть линию) */
    padding: 0 15px;
    /* Отступы вокруг ромба */

    color: #ffffff;
    /* Тот же золотой цвет */
    font-size: 1.5rem;
    /* Размер ромба */
    font-family: 'Cinzel', serif;
    /* Красивый шрифт */
}

/* Адаптив для мобильных */
@media (max-width: 900px) {
    .national-divider {
        margin: 3rem 0;
        /* Чуть меньше отступы на телефоне */
        width: 80%;
        /* Линия не на весь экран */
        left: 10%;
        /* Центрируем линию */
    }
}