/* Скрываем главную страницу на мобильных устройствах */
@media screen and (max-width: 768px) {
    .main-content {
        display: block !important; /* Гарантируем отображение на мобильных устройствах */
    }

    /* Стили для бургера */
    .menu-icon {
        font-size: 36px; /* Размер бургера */
        color: black; /* Цвет бургера */
        cursor: pointer; /* Курсор при наведении */
        z-index: 1002; /* Убедимся, что бургер поверх всех */
    }

   /* Скрыть блоки с классами .uc-menu и .uc-menu-sub на мобильных устройствах */
@media screen and (max-width: 768px) {
    .uc-menu,
    .uc-menu-sub {
        display: none !important;
    }
}

    /* Стили для мобильного меню */
    .mobile-menu {
        display: none; /* Скрыто по умолчанию */
        position: fixed;
        top: 60px; /* Отступ сверху для меню, чтобы оно не перекрывалось хедером */
        left: 0;
        width: 100%;
        height: calc(100% - 60px); /* Уменьшаем высоту меню, чтобы оно не перекрывало экран */
        background-color: white; /* Белый фон страницы */
        z-index: 1000;
        font-family: TildaSans, sans-serif; /* Устанавливаем шрифт */
    }

    .mobile-menu ul {
        list-style-type: none; /* Убираем маркеры списка */
        align-items: center; /* Центрируем пункты по горизонтали */
    }

    .mobile-menu li {
        text-align: center;      /* Центрируем текст внутри каждого пункта меню */
    }

    .mobile-menu.active {
        display: block; /* Показываем меню при активации */
    }

    /* Добавляем заголовок "ClickRush" */
    .menu-header {
        background-color: white; /* Белый фон */
        color: black; /* Черный цвет текста */
        padding: 10px 20px;
        font-size: 24px;
        font-weight: bold;
        width: 100%; /* Фон растягивается на всю ширину */
        text-align: left;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1001; /* Делаем, чтобы он был поверх меню */
    }

    /* Стили для кнопки назад */
    .back-btn {
        position: absolute;
        bottom: 10px; /* Ставим кнопку вниз */
        left: 10px;  /* Выравниваем по левому краю */
        padding: 10px;
        color: #00000; /* Черные буквы */
        border-radius: 30px;
        cursor: pointer;
        font-family: TildaSans, sans-serif; /* Шрифт для кнопки */
    }

    /* Стили для пунктов меню */
    .mobile-menu a {
        text-decoration: none;
        color: black !important; /* Убираем возможные переопределяющие стили */
        font-size: 18px;
    }

    .mobile-menu li {
        text-align: center;
        margin: 20px 0; /* Увеличиваем расстояние между пунктами */
    }

    .mobile-menu a {
        text-decoration: none;
        color: black; /* Черный цвет текста */
        font-size: 18px; /* Уменьшаем размер шрифта */
        font-weight: bold; /* Делаем текст жирным */
        font-family: TildaSans, sans-serif; /* Шрифт для пунктов */
        display: block; /* Чтобы элементы меню занимали всю ширину */
        padding: 10px;
    }
}

/* Убираем маркеры списка */
.mobile-menu ul {
    list-style-type: none; /* Убираем точки */
}

/* Стиль для мобильного меню, чтобы оно не закрывало бургер */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001; /* Устанавливаем более высокий z-index, чтобы бургер был выше меню */
    width: 100%;
    background-color: white; /* Белый фон для бургер-блока */
    padding: 10px; /* Отступы внутри блока */
    display: flex; /* Размещаем элементы по горизонтали */
    justify-content: space-between; /* Располагаем элементы по краям */
    align-items: center; /* Центрируем по вертикали */
}

/* Стили для надписи ClickRush */
.clickrush-text {
    font-family: 'TildaSans', sans-serif; /* Применяем шрифт TildaSans */
    font-size: 20px; /* Размер шрифта */
    color: #2e2e2e; /* Цвет текста */
    font-weight: bold; /* Выделяем жирным */
    z-index: 1000; /* Для текста можно оставить меньший z-index */
    margin-left: auto; /* Отталкиваем текст от бургера, чтобы он оказался справа */
    margin-right: 20px; /* Добавляем отступ справа */
}

.mobile-menu li {
    text-align: center;      /* Центрируем текст внутри каждого пункта меню */
    width: 100%;             /* Убедимся, что li занимает всю доступную ширину */
}

.menu-icons {
    display: flex;
    justify-content: center; /* Центрируем иконки */
    gap: 10px; /* Отступы между иконками */
    margin-top: 20px; /* Отступ сверху от меню */
}

.menu-icons a svg {
    width: 30px; /* Размер иконки */
    height: 30px;
    color: black;
    transition: transform 0.2s; /* Анимация при наведении */
}

.menu-icons a svg:hover {
    transform: scale(1.2); /* Увеличение при наведении */
}

/* Скрыть мобильное меню на десктопе */
@media screen and (min-width: 1024px) {
    .mobile-menu {
        display: none;
    }
}
.uc-menu-sub .t396__artboard {
    position: fixed;
    top: 70px;
    left: 0;
    z-index: 999998;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px); /* Начальная позиция для эффекта */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Плавная анимация */
}

.uc-menu-sub .t396__artboard.active {
    pointer-events: all;
    transform: translateY(0); /* Конечная позиция */
    opacity: 1; /* Появление */
}