@media (max-width: 768px) {
    .menu-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный фон */
        z-index: 9999; /* Убедитесь, что попап сверху */
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        padding: 20px;
    }

    /* Стиль контента внутри pop-up */
    .menu-content {
        background-color: #333;
        padding: 40px;
        border-radius: 10px;
        text-align: center;
        display: flex;
        justify-content: flex-start; /* Выравнивание по вертикали сверху */
        align-items: center; /* Центрирование по горизонтали */
        width: 120%; /* Ширина блока меню */
        height: 100%; /* Высота блока меню */
        flex-direction: column; /* Элементы выравниваются по вертикали */
    }
    /* Стиль кнопки */
    .close-menu-button {
        background-color: #F6B31C; /* Жёлтый цвет */
        color: #026F57;
        font-family: 'Montserrat', sans-serif; /* Шрифт Montserrat */
        font-weight: 700; /* Толщина шрифта 700 */
        font-size: 16px; /* Размер шрифта 16px */
        line-height: 15.84px; /* Межстрочное расстояние 15.84px */
        padding: 10px 20px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 80px;
        z-index: 1002; /* Эта кнопка должна быть поверх всего */
    }

        .close-menu-button:hover {
            background-color: #FFA500; /* Темнее жёлтый при наведении */
        }

    /* Стиль для контейнера с кнопками */
    .menu-content .button-container {
        display: flex;
        flex-direction: column; /* Кнопки идут по вертикали */
        gap: 50px; /* Расстояние между кнопками */
        margin-top: -100px; /* Отступ сверху */
        align-items: center; /* Центрирование кнопок по горизонтали */
        justify-content: center; /* Центрирование кнопок по вертикали */
        height: 100%; /* Занимаем всю доступную высоту для центрирования */
    }

    /* Стиль для кнопки "Home" */
    .home-button {
        background-color: transparent; /* Прозрачный фон */
        color: white; /* Тёмный цвет текста */
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 15.84px;
        padding: 10px 20px;
        cursor: pointer;
        border: none; /* Убирает рамку */
    }

    /* Стиль для кнопки "Join The Quest" */
    .join-quest-button {
        background-color: #F6B31C; /* Жёлтый фон */
        color: #026F57; /* Тёмный цвет текста */
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 15.84px;
        padding: 12px 30px; /* Круглая продолговатая форма */
        border: none;
        border-radius: 50px; /* Круглые края */
        cursor: pointer;
    }

    /* Стиль для кнопки "Learn More" */
    .learn-more-button {
        background-color: transparent; /* Прозрачный фон */
        color: white; /* Тёмный цвет текста */
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 15.84px;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        border: none; /* Убирает рамку */
    }


    .info-cards {
        flex-direction: column; /* На мобильных устройствах карточки в колонку */
        gap: 15px; /* Уменьшаем отступы между карточками */
    }

    .custom-heading {
        font-size: 28px; /* Размер шрифта для h1 на мобильных */
        line-height: 24px; /* Высота строки для h1 на мобильных */
    }

    .custom-subheading {
        font-weight: 400;
        font-size: 16px; /* Размер шрифта для p на мобильных */
        line-height: 15.84px; /* Высота строки 15.84px */
    }

        .custom-subheading p {
            font-size: 16px; /* Размер шрифта для текста на мобильных */
            line-height: 24px; /* Высота строки для текста на мобильных */
        }

    .dreams-section h2 {
        font-size: 24px; /* Размер шрифта заголовка на мобильных */
        line-height: 32px; /* Высота строки заголовка на мобильных */
    }

    .dreams-description {
        font-size: 16px; /* Размер шрифта текста на мобильных */
        line-height: 15.84px; /* Высота строки 15.84px */
    }

    .menu-button {
        display: inline-block; /* или flex, если кнопка внутри flex-контейнера */
    }

    /* Скрываем первые две кнопки на мобильных устройствах */
    .button-container .learn-more {
        display: none;
    }
    /* Скрываем первые две кнопки на мобильных устройствах */
    .button-container .join-the-quest {
        display: none;
    }

    .menu-button {
        background-color: #F6B31C;
        color: #026F57;
        border: none;
        outline: none;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-align: center;
        padding: 0;
        box-sizing: border-box;
        transition: background-color 0.3s ease;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 15.84px;
        text-align: center;
    }

    .button-container {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;
    }

        .button-container button {
            margin: 0;
        }

    .button-container {
        border: none;
        outline: none;
        margin-top: 60px;
    }

    .wheel-section .card.white {
        display: flex;
        flex-direction: column; /* Вертикальное расположение элементов */
        align-items: center; /* Центрирование элементов по горизонтали */
        justify-content: center; /* Центрирование элементов по вертикали */
        text-align: center; /* Центрирование текста */
        padding: 20px;
    }

    .wheel-container {
        position: relative;
        width: 300px;
        height: 300px;
        margin-bottom: 20px;
    }

    .Button-text h4 {
        display: none; /* Скрывает элемент */
    }

    .Button-text p {
        font-size: 14px; /* Уменьшение размера шрифта на мобильных устройствах */
        line-height: 20px; /* Меньше межстрочного расстояния */
        padding: 0 10px; /* Меньше отступов на мобильных */
        font-family: 'Montserrat', sans-serif; /* Шрифт Montserrat */
        font-weight: 700; /* Толщина шрифта 700 */
        font-size: 16px; /* Размер шрифта 16px */
        line-height: 19.84px; /* Межстрочное расстояние 19.84px */
        text-align: center; /* Выравнивание текста по центру */
    }

    .Button-text {
        width: 300px;
        height: 250px;
    }
    /* Можно добавить отступы или настройки, если есть скрытие */
    .learn-more, .join-the-quest {
        display: block; /* Убедитесь, что они не скрыты */
    }

    .tazion-heading {
        font-family: 'Montserrat', sans-serif; /* Шрифт Montserrat */
        font-weight: 700; /* Вес шрифта */
        font-size: 24px; /* Размер шрифта */
        line-height: 23.76px; /* Высота строки */
        text-align: center; /* Выравнивание по центру */
    }

    .card.yellow h4 {
        font-family: 'Montserrat', sans-serif; /* Шрифт Montserrat */
        font-weight: 700; /* Вес шрифта */
        font-size: 24px; /* Размер шрифта */
        line-height: 23.76px; /* Высота строки */
    }

    .card.yellow p {
        font-family: 'Montserrat', sans-serif; /* Шрифт Montserrat */
        font-weight: 400; /* Вес шрифта */
        font-size: 16px; /* Размер шрифта */
        line-height: 15.84px; /* Высота строки */
    }
    /* Общие стили для заголовков в карточках */
    .card.red h4,
    .card.grey h4 {
        font-family: 'Montserrat', sans-serif; /* Шрифт Montserrat */
        font-weight: 700; /* Жирность */
        font-size: 24px; /* Размер шрифта */
        line-height: 23.76px; /* Высота строки */
        text-align: center; /* Выравнивание текста по центру */
    }

    /* Общие стили для абзацев в карточках */
    .card.red p,
    .card.grey p {
        font-family: 'Montserrat', sans-serif; /* Шрифт Montserrat */
        font-weight: 400; /* Вес шрифта */
        font-size: 16px; /* Размер шрифта */
        line-height: 15.84px; /* Высота строки */
        text-align: center; /* Выравнивание текста по центру */
    }

    .intro-section .main-heading {
        font-family: 'Montserrat', sans-serif; /* Шрифт Montserrat */
        font-weight: 700; /* Жирность 700 */
        font-size: 24px; /* Размер шрифта 24px */
        line-height: 23.76px; /* Высота строки 23.76px */
        text-align: center; /* Выравнивание текста по центру */
    }

    .intro-section .subheading-text {
        font-family: 'Montserrat', sans-serif; /* Шрифт Montserrat */
        font-weight: 500; /* Толщина шрифта 500 */
        font-size: 16px; /* Размер шрифта 16px */
        line-height: 15.84px; /* Высота строки 15.84px */
    }

    .intro-section {
        padding-right: 50px;
        padding-bottom: 40px;
        padding-left: 50px;
        gap: 54px;
    }

    .footer-logo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 15px;
        width: 100%; /* Обеспечиваем, чтобы футер не вылезал за края */
        box-sizing: border-box; /* Чтобы padding не выходил за пределы */
    }

        /* Изменение размера логотипа для мобильных устройств */
        .footer-logo img {
            max-width: 80px; /* Уменьшаем размер логотипа */
        }

        /* Кнопки в футере, размещенные по вертикали */
        .footer-logo .footer-buttons {
            display: flex;
            flex-direction: column; /* Выставляем кнопки по вертикали */
            gap: 15px;
            margin-top: -90px; /* Поднятие кнопок выше (меньше, чтобы не выходили за пределы) */
            margin-left: 90px;
            align-items: center; /* Выравниваем кнопки по центру */
        }

    /* Текст футера */
    .footer-text {
        margin-top: 15px;
        font-size: 12px;
        text-align: center; /* Центрируем текст */
    }

    /* Блок правых элементов футера */
    .footer-right {
        display: flex;
        flex-direction: row; /* Изменяем направление на горизонтальное */
        align-items: center; /* Выравниваем элементы по центру по вертикали */
        gap: 10px; /* Расстояние между изображениями */
        width: 100%; /* Устанавливаем ширину для правого блока */
        justify-content: flex-start; /* Располагаем элементы слева */
        padding-left: 15px; /* Добавляем отступ слева, чтобы элементы не выходили за пределы */
        margin-left: -300px;
        margin-bottom: -100px;
    }

    .additional-block {
        width: 300px;
        padding-left: 0;
        padding-right: 0;
    }

    .footer {
        height: 500px;
    }

    .close-button {
        position: absolute;
        top: 20px; /* Расстояние от верхней части окна */
        left: 50%; /* Смещение к центру по горизонтали */
        transform: translateX(-50%); /* Центровка относительно ширины кнопки */
        background-color: white;
        color: black;
        border: none;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        font-size: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

        .close-button:hover {
            background-color: #f2f2f2;
        }

    .WinPng {
        width: 300px; /* Уменьшите ширину картинки */
        margin: 0 auto; /* Центрирование картинки по горизонтали */
        display: block; /* Делаем картинку блочным элементом для центрирования */
        margin-top: -100px;
        margin-left: -5px;
    }

    .modal-content p {
        font-size: 2rem;
        color: white;
        position: absolute;
        z-index: 1; /* Ensure text stays above the image */
        margin-top: -120px;
        left: 47%; /* Центрирует текст относительно модального окна */
        transform: translateX(-25%); /* Сдвигает текст вправо от центра */
    }

    .text-block {
        margin-left: -500px;
        margin-top: 400px;
    }

    .modal-text {
        display: none;
    }
}