body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Убираем горизонтальный скролл */
    font-family: 'Montserrat', sans-serif;
    background-color: #020c22;
    background-image: url('../img/bg.png');
    background-repeat: repeat;
    color: white;
}

.header {
    width: 100%;
    padding: 50px 80px 5px 80px; /* Паддинг сверху и с обеих сторон */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    margin-right: auto;
    width: 130px; /* Устанавливаем ширину логотипа */
    height: auto;
}

.right-group {
    display: flex;
    align-items: center;
}

.header-button button {
    height: 48px;
    background-color: #F85A00;
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    color: white;
    cursor: pointer;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 500;
    line-height: 23.44px;
    text-align: center;
}

.header-button button:hover {
    background-color: darkorange;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 0px; /* Внутренние отступы для контента */
    box-sizing: border-box;
}

.intro-text h1 {
    font-size: 48px;
    font-weight: 700;
    margin: 40px 0;
    text-align: center;
}



/* Стили для баннеров и других секций можно добавить здесь */

/* Продолжение основных стилей... */



/* Продолжение основных стилей... */

.welcome-section {
    background: radial-gradient(
      80% 50% at 50% 50%, 
      rgba(54, 62, 74, 0.5) 0%, /* полупрозрачный центральный цвет */
      rgba(2, 12, 34, 0.5) 100% /* полупрозрачный внешний цвет */
    );
    /* Остальные стили остаются без изменений */
}

.container {
    text-align: center;
}

.welcome-title {
    color: #ffffff;
    font-size: 48px;
    margin-bottom: 24px;
}

.welcome-content {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.welcome-left, .welcome-right {
    flex: 1;
}

.wheel-image {
    max-width: 90%;
    height: auto;
}

.bonus-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bonus-detail {
    background-color: #1C2539;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px;
    margin-bottom: 16px;
    color: #ffffff;
    font-size: 18px;
    text-align: left;
    width: 592px; /* Фиксированная ширина */
    box-sizing: border-box; /* Учитываем padding и border в ширине */
}

.claim-button {
    background-color: #F85A00;
    
    height: 64px;
    color: #ffffff;
    font-size: 24px;
    padding: 7px 10px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    float: left;
}

.claim-button:hover {
    background-color: #FF7C1E; /* Цвет при наведении */
}


@media (max-width: 960px) {
    .welcome-content {
        flex-direction: column; 
        align-items: center;
    }

    .welcome-right {
        align-items: center;
        padding: 0 20px 0 20px;
    }

    .bonus-info {
        align-items: center;
    }

    .bonus-detail {
        width: 100%; /* Позволяет блокам расширяться на всю доступную ширину */
    }
}



.features-section { 
    padding: 60px 0;
    text-align: center;
}

.features-title {
    color: #ffffff;
    margin-bottom: 145px;
    font-size: 48px;
    padding: 0 15px 0px 15px;
}

.feature-block {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 30px;
}

.feature-block.reverse {
    flex-direction: row-reverse;
}

.feature-info {
    max-width: 592px;
    text-align: left;
    margin: 0 0 0 170px;
}

.feature-info h3 {
    color: #ffffff;
    font-size: 64px;
    margin-bottom: 5px;
    padding: 0 15px 0px 0px;
}

.feature-info p {
    color: #CAC6DD;
    font-size: 40px;
}



.more-bonuses-button {
    background-color: #F85A00;
    color: #ffffff;
    height: 64px;
    border: none;
    border-radius: 16px;
    padding: 10px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s;
    
}

.more-bonuses-button:hover {
    background-color: #FF7C1E;
}

@media (max-width: 768px) {
    .feature-block {
        flex-direction: column;
    }

    .feature-block.reverse {
        flex-direction: column-reverse;
    }
    
    .feature-info {
        text-align: center;
    }
}


.cryptocurrency-section {
    background: radial-gradient(
        80% 50% at 50% 50%, 
        rgba(54, 62, 74, 0.5) 0%, 
        rgba(2, 12, 34, 0.5) 100%
    );
    padding: 0 0 30px 0;
    text-align: center;
}

.cryptocurrency-title {
    font-size: 48px;
    color: #ffffff;
    margin-bottom: -35px;
}

.cryptocurrency-image {
    position: relative;
}

.cryptocurrency-image img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    
}

.info {
    position: absolute;
    text-align: center;
    color: #ffffff;
}

.info.safe {
    width: 248px;
    top: 21%; /* Регулируйте в соответствии с положением на картинке */
    left: 14.5%; /* Регулируйте в соответствии с положением на картинке */
}

.info.fast {
    width: 260px;
    top: 17.2%; /* Регулируйте в соответствии с положением на картинке */
    right: 13.8%; /* Регулируйте в соответствии с положением на картинке */
}

.info.anonymous {
    width: 340px;
    bottom: 7%; /* Регулируйте в соответствии с положением на картинке */
    left: 30%; /* Регулируйте в соответствии с положением на картинке */
}

.info h3 {
    font-size: 32px;
    margin-bottom: -10px;
}

.info p {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 23.44px; /* Обратите внимание, что в CSS обычно используется значение без единиц измерения, например 'line-height: 1.4' */
    text-align: center;
    color: #D6DDF8;
}



.crypto-section {
    text-align: center;
    padding: 60px 0;
}

.content-container {
    width: 100%; /* Занимает 100% ширины родителя */
    max-width: 1400px; /* Ограничивает ширину до 1400px */
    margin: 0 auto; /* Центрирование контейнера по горизонтали */
}

.coins-image {
    margin-bottom: 30px; /* Добавляем немного места перед кнопкой */
    background-image: url('../img/coin.png'); /* Установка стандартного изображения */
    background-repeat: no-repeat; /* Предотвращает повторение изображения */
    background-position: center; /* Центрирует изображение в блоке */
    background-size: 85%;
    padding-top: 35.25%; /* Пропорция для сохранения аспекта изображения, может быть изменена */
}

@media (max-width: 768px) {
    .coins-image {
    background-image: url('../img/coinm.svg'); /* Замена изображения для мобильных устройств */
    margin-bottom: 30px; /* Добавляем немного места перед кнопкой */
    background-repeat: no-repeat; /* Предотвращает повторение изображения */
    background-position: center; /* Центрирует изображение в блоке */
    background-size: 100%;
    padding-top: 160%; /* Пропорция для сохранения аспекта изображения, может быть изменена */
    }
}

.choose-crypto-button {
    background-color: #F85A00;
    color: #ffffff;
    
    height: 64px;
    border: none;
    border-radius: 16px;
    padding: 10px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.choose-crypto-button:hover {
    background-color: #FF7C1E;
}




.steps-section {
    text-align: center;
    padding: 60px 0;
}

.steps-title {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 48px;
    margin-bottom: 40px;
}

.steps-image-container {
    position: relative;
    margin: auto; /* Центрирование картинки */
}

.steps-image {
    width: 100%;
    height: auto;
}

.step-text {
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    font-size: 40px; /* Указанный размер для текста шагов */
    font-weight: 500;
    line-height: 46.88px;
    text-align: center;
    position: absolute;
    width: 100%;
    /* Позиционирование текста нужно настроить в соответствии с вашим изображением */
}

.step-text-1 {
    width: 520px;
    top: 23%; /* Примерное положение */
    left: 2%;
}

.step-text-2 {
    width: 557px;
    top: 56%; /* Примерное положение */
    right: 1%;
}

.step-text-3 {
    width: 514px;
    bottom: 1%; /* Примерное положение */
    left: 2%;
}

.join-button {
    background-color: #F85A00;
    color: #ffffff;
    
    height: 80px;
    border: none;
    border-radius: 16px;
    padding: 10px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.join-button:hover {
    background-color: #FF7C1E;
}

/* Дополнительные медиа запросы, если нужно */


.site-footer {
    background-color: #020D24;
    padding: 0 80px; /* Отступы слева и справа */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Это растянет лого и текст на противоположные стороны */
}

.footer-logo img {
    height: 80%; /* Можно установить конкретную высоту для логотипа */
}

.footer-text {
    color: #ffffff;
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    line-height: 23.44px;
    text-align: center;

}

.language-selector {
    position: relative;
    display: flex;
    align-items: center;
}

.current-lang {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 15px; /* Добавляем паддинги для кнопки */
}

.current-lang .arrow {
    margin-left: 5px;
}

.arrow {
    transition: transform 0.3s ease; /* Добавляем плавный переход */
}

.arrow.up {
    transform: rotate(180deg); /* Поворачиваем стрелку вверх */
}

.languages-list {
    display: none;
    position: absolute;
    top: 100%;
    left: -85px;
    background-color: #1b2438;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(2, 2, 2, 0.2);
    z-index: 1;
    padding: 0;
    margin-top: 5px;
    overflow: hidden; /* Добавляем это свойство */
}

.languages-list li:first-child {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.languages-list li:last-child {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.languages-list li {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.languages-list li:hover, .languages-list li a:hover {
    background-color: #333B4C;
}

.languages-list li a {
    color: white;
    text-decoration: none;
    display: block;
}


.parallax-container {
    
    width: 100%; /* Убедитесь, что контейнер занимает нужную ширину */
    max-width: 1920px;
    position: relative;
    margin: 0 auto;
    z-index: -1; /* Устанавливаем контекст наложения для параллакса */
}

.parallax-container1 {
    
    width: 100%; /* Убедитесь, что контейнер занимает нужную ширину */
    max-width: 1920px;
    position: relative;
    margin: 0 auto;
    z-index: 0; /* Устанавливаем контекст наложения для параллакса */
}

.parallax-element {
    position: absolute;
    z-index: -1; /* Убедитесь, что параллакс элементы находятся под основным контентом */
    /* Пример начального позиционирования через проценты или единицы вьюпорта */
    top: 10vh;
    right: 10vw;
    will-change: transform; /* Для оптимизации анимации */
}

@media only screen and (max-width: 1600px) {
    .parallax-element {
        display: none; /* Скрывать элементы параллакса на мобильных устройствах */
    }
}


.cryptocurrency-image {
    background-image: url('img/spintr.svg'); /* Изображение для десктопной версии */
    background-size: cover; /* Покрыть полностью контейнер */
    background-position: center; /* Центрировать изображение */
    background-repeat: no-repeat; /* Не повторять изображение */
}

@media only screen and (max-width: 768px) {
    .cryptocurrency-image {
        background-image: url('img/spinm.png'); /* Изображение для мобильной версии */
        /* Примените необходимые стили background-size, если они отличаются от десктопной версии */
    }

    .info {
        /* Изменения для блоков с информацией */
        position: static; /* Сбросить абсолютное позиционирование */
        display: block;
        background-color: #0c1325; /* Фон информационных блоков */
        border: 2px solid #5822a0; /* Обводка */
        margin: 10px 0; /* Отступы для разделения блоков */
        padding: 10px; /* Внутренние отступы */
    }

    .info h3, .info p {
        text-align: left; /* Выравнивание текста слева */
    }

    .cryptocurrency-image {
        width: auto; /* Позволить изображению быть по ширине контейнера */
        padding: 0 15px 0px 15px;
    }
}



/* Медиа-запрос для мобильной версии */
@media only screen and (max-width: 768px) {
    /* Уменьшаем размер шрифта заголовка */
    .intro-text h1 {
        font-size: 24px; /* Размер шрифта заголовка для мобильных устройств */
        margin: 0 0 20px 0;
    }

    .welcome-title {
        font-size: 24px; /* Размер шрифта заголовка для мобильных устройств */
        padding: 0 15px 0px 15px;
    }

    .banner-header h2 {
        font-size: 24px; /* Размер шрифта заголовка для мобильных устройств */
    }

    .banner li {
        font-size: 14px; /* Размер шрифта заголовка для мобильных устройств */
    }

    .claim-button {
        font-size: 16px;
        width: 100%;
        height: 48px;
        float:none;
    }

    .bonus-detail {
        font-size: 16px; /* Размер шрифта заголовка для мобильных устройств */
    }

    .features-section {
        padding: 15px 0;
        text-align: center;
    }
    
    .features-title {
        color: #ffffff;
        margin-bottom: 48px; /* Уменьшенный нижний отступ для заголовка */
        font-size: 24px;
    }
    
    .feature-block {
        display: flex;
        flex-direction: column; /* Изменено на вертикальное направление */
        align-items: center; /* Центрирование элементов по горизонтали */
        margin-bottom: 15px; /* Отступ между блоками */
    }
    
    /* Стиль для блока, который должен быть в обратном порядке, больше не нужен */
    .feature-block.reverse {
        flex-direction: column;
    }
    
    .feature-info {
        max-width: 100%; /* Разрешаем блоку занимать всю ширину */
        text-align: center; /* Центрируем текст */
        margin: 20px 0; /* Добавляем вертикальный отступ */
    }
    
    .feature-info h3 {
        color: #ffffff;
        font-size: 24px; /* Уменьшенный размер шрифта для заголовков функций */
        margin-bottom: 5px;
    }
    
    .feature-info p {
        color: #CAC6DD;
        font-size: 16px; /* Уменьшенный размер шрифта для описания */
    }
    
    .feature-icon {
        width: 50%; /* Увеличиваем ширину для лучшего отображения на мобильных устройствах */
        margin-bottom: 20px; /* Добавляем отступ снизу для иконок */
    
    }
    .feature-iconbox {
        width: 65%; /* Увеличиваем ширину для лучшего отображения на мобильных устройствах */
        margin-bottom: 20px; /* Добавляем отступ снизу для иконок */
    }
    .more-bonuses-button {
        margin-top: -15px; 
        width: 90%;
        height: 48px;
        font-size: 16px;
        
    }

    .cryptocurrency-title {
        font-size: 24px; /* Размер шрифта заголовка для мобильных устройств */
        padding: 0 15px 0px 15px;
    }

    /* Можно добавить стили для уменьшения отступов или изменения размеров кнопок, если необходимо */
    .header {
        padding: 10px; /* Уменьшенные отступы для мобильных устройств */
    }

    .header-button button, .language-selector button {
        padding: 5px 10px; /* Уменьшаем размеры кнопок на мобильных устройствах */
        font-size: 14px; /* Меньший размер шрифта для кнопок */
        width: auto;
        height: 32px
    }
    .choose-crypto-button {
        width: 90%;
        height: 48px;
        font-size: 16px;
       
    }
   
    .steps-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 24px;
    }
    .step-text {
        font-family: 'Roboto', sans-serif;
        color: #ffffff;
        font-size: 24px;
       
    }

    .join-button {
        width: 90%;
        height: 48px;
        font-size: 16px;
    }

    .site-footer {
        padding: 0 8px;
    }
    .footer-text {
        font-size: 12px;
    }
    
    .footer-logo {
        width: 18%; /* Можно установить конкретную высоту для логотипа */
    }

    .steps-section {
        padding: 0px 0;
    }
    .crypto-section {
        padding: 0px 0;
    }
    .logo img {
        margin-right: auto;
        width: 72px;
        height: auto;
    }
}

@media only screen and (max-width: 768px) {
    /* Стили для информационных блоков, как ранее описано */
    .container2 {
        display: flex;
        flex-direction: column;
        align-items: center; /* Выравнивание по центру по горизонтали */
        justify-content: center; /* Опционально, для выравнивания по центру по вертикали, если контейнер имеет фиксированную высоту или высоту во весь экран */
        width: 100%; /* Занимает всю ширину родителя */
    }
    
    .info {
        /* Ваши существующие стили */
        position: static;
        background-color: #0c1325;
        border: 2px solid #5822a0;
        margin: 10px 0;
        padding: 10px;
        text-align: left;
    
        /* Добавленные стили */
        border-radius: 16px; /* Закругление углов */
        width: 100%; /* Ширина блока, можно адаптировать в зависимости от размеров экрана с помощью медиазапросов */
        max-width: 600px; /* Максимальная ширина, чтобы блоки не были слишком широкими на больших экранах */
        box-sizing: border-box; /* Чтобы padding и border не увеличивали общую ширину элемента */
    }

    .info h3 {
        text-align: center;
        font-size: 24px;
        margin: 0px;
    }
    .info p{
        text-align: center;
        font-size: 16px;
        margin: 5px;
    }
    .info.safe {
        width: 100%;
        /* Регулируйте в соответствии с положением на картинке */
    }
    
    .info.fast {
        width: 100%;
    }
    
    .info.anonymous {
        width: 100%;
       
    }
    
}

/* CSS */
.image-container {
    width: 100%; /* Желаемая ширина изображения */
    height: 899px; /* Желаемая высота изображения */
    background-image: url('../img/spintr.svg');
    background-size: contain; /* Изображение пропорционально уменьшается, чтобы полностью поместиться в контейнер */
    background-repeat: no-repeat; /* Чтобы изображение не повторялось */
    background-position: center; /* Центрирование изображения */
  }
  
  /* Медиазапрос для устройств с максимальной шириной 768px */
  @media (max-width: 768px) {
    .image-container {
      width: 100%; /* Желаемая ширина изображения */
      height: 230px; /* Желаемая высота изображения */
      background-image: url('../img/spinm.png');
      margin-top: 62px;
      background-size: contain;
      background-position: center; /* Центрирование изображения */
    }
  }


  /* Стили для десктопов остаются без изменений */

@media (max-width: 768px) {
    /* Скрываем изначальное изображение на мобильных устройствах */
    .steps-image-container .steps-image {
        display: none;
    }
    /* Меняем структуру и стили под мобильные устройства */
    .steps-image-container .step-text {
        position: static;
        font-size: 24px; /* Меньший размер текста для мобильных устройств */
        margin: 20px 0; /* Добавляем отступы между текстом и картинками */
        width: auto;
        padding: 0 15px 0px 15px;
    }
    /* Добавляем картинки перед текстом для мобильной версии */
    .step-text-1::before, .step-text-2::before, .step-text-3::before {
        content: '';
        display: block;
        margin: auto;
        height: 150px; /* Примерная высота картинок */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .step-text-1::before {
        background-image: url('../img/1.png');
    }
    .step-text-2::before {
        background-image: url('../img/2.png');
    }
    .step-text-3::before {
        background-image: url('../img/3.png');
    }

}



/* Стили для экранов шире 768px остаются неизменными */


.banners {
    display: flex;
    justify-content: space-between;
    margin-top: 40px; /* Расстояние между баннерами и текстом выше */
    padding: 0 20px 0 20px;
}

.banner {
    width: 680px;
    height: 920px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-right: 40px; /* Отступ между баннерами */
    border-radius: 20px; /* Закругленные углы */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Распределение пространства */
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Белая обводка с прозрачностью 10% */
}

.banner-header h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    color: #ffffff;
    margin: 20px 0; /* Отступ сверху и снизу для заголовка */
    text-align: left;
    padding: 0 32px; /* Отступы для текста внутри баннера */
}

.banner-body {
    padding: 0 20px; /* Отступы для текста внутри баннера */
}

.banner ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.banner li {
    font-size: 26px;
    text-align: left;
    margin-bottom: 10px;
    list-style: none; /* Убираем дефолтные маркеры списка */
    position: relative; /* Для позиционирования иконки */
    padding-left: 34px; /* Отступ для текста с учётом иконки */
}

.star-icon {
    position: absolute; /* Абсолютное позиционирование относительно элемента списка */
    left: 0; /* Иконка будет у левого края текста списка */
    top: 50%; /* Вертикальное центрирование */
    transform: translateY(-50%); /* Смещение для точного центрирования */
    width: 24px; /* Размер иконки */
    height: 24px; /* Размер иконки */
    background-image: url('../img/star_b.png'); /* Неактивная иконка */
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-image 0.3s ease; /* Плавное изменение иконки */
}

.banner:hover .star-icon {
    background-image: url('../img/star.png'); /* Иконка при наведении на баннер */
}

.left-banner-active .banner-button{
    background-color: #FF7C1E; /* Изменённый цвет кнопки */
}
.right-banner-active .banner-button {
    background-color: #9948FF; /* Изменённый цвет кнопки */
}

.banner-button {
    width: 100%; /* Ширина кнопки */
    height: 64px;
    background-color: #333B4C; /* Цвет фона в неактивном состоянии */
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    font-family: Roboto;
    font-size: 24px;
    line-height: 28.13px;
    text-align: center;
    margin-top: 20px; /* Отступ сверху кнопки */
    margin-bottom: 20px; /* Отступ снизу кнопки */
    
}

.left-banner {
    background-image: url('../img/s1b.png'); /* Стандартное фоновое изображение для левого баннера */
}

.right-banner {
    background-image: url('../img/s2b.png'); /* Стандартное фоновое изображение для правого баннера */
}

.left-banner-active {
    background-image: url('../img/s1.png'), linear-gradient(220.64deg, #6300FF -5.91%, #7538FF 36.09%, #4719FF 84.74%, #5A17C8 130.41%);
    box-shadow: 
        0px 4px 88px 28px rgba(109, 30, 255, 0.3), /* Существующая тень */
        0 0 0 1px rgba(255, 255, 255, 0.1); /* Дополнительная "обводка" */
}

.right-banner-active {
    background-image: url('../img/s2.png'), linear-gradient(244.19deg, rgba(245, 16, 89, 0.943854) 6.79%, #FB3289 30.3%, rgba(250, 25, 97, 0.943854) 53.8%, rgba(254, 41, 140, 0.89) 77.31%);
    box-shadow: 0px 4px 88px 28px rgba(245, 16, 89, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1);
    
}

.banner:last-child {
    margin-right: 0; /* Убираем отступ у последнего баннера */
}
/* Медиазапросы для экранов меньше 768px */
@media (max-width: 768px) {
    
    .banners {
        height: 472px;
        padding-top: 22px;
        margin-top: 20px;
        display: flex;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        
    }
    
    .banner {
        flex: 0 0 calc(90vw - 10px); /* Уменьшаем ширину, чтобы добавить отступы */
        margin-right: 0px; /* Поддерживаем текущий отступ справа */
        height: 450px; /* Высота подстраивается под содержимое */
    }
    
    
    .banner-header h2 {
        font-size: 24px;
    }
    
    .banner li {
        font-size: 14px;
    }
    
    .star-icon {
        width: 18px; /* Размер иконки */
        height: 18px; /* Размер иконки */
    }
    
    .banner-button {
        height: 48px;
        font-size: 16px;
        
    }

    .banner.active {
        margin-left: 10px;
        margin-right: 10px;
    }

    .left-banner-active {
        background-image: url('../img/s1.png'), linear-gradient(220.64deg, #6300FF -5.91%, #7538FF 36.09%, #4719FF 84.74%, #5A17C8 130.41%);
        box-shadow: 
            0px 2px 18px 8px rgba(109, 30, 255, 0.3), /* Существующая тень */
            0 0 0 1px rgba(255, 255, 255, 0.1); /* Дополнительная "обводка" */
    }
    
    .right-banner-active {
        background-image: url('../img/s2.png'), linear-gradient(244.19deg, rgba(245, 16, 89, 0.943854) 6.79%, #FB3289 30.3%, rgba(250, 25, 97, 0.943854) 53.8%, rgba(254, 41, 140, 0.89) 77.31%);
        box-shadow: 0px 2px 18px 8px rgba(245, 16, 89, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
        
    }
} 

.active-banner .star-icon {
    background-image: url(../img/star.png);
}

@media (min-width: 769px) {
    .info.safe,
    .info.fast,
    .info.anonymous {
        display: none; /* Скрытие текстовых блоков на экранах шире 768px */
    }
}

/* Медиазапросы для экранов меньше 768px */
@media (min-width: 1024px) and (max-width: 1360px) {
    
    .feature-info h3 {
        color: #ffffff;
        font-size: 54px;
        margin-bottom: 5px;
        padding: 0 15px 0px 0px;
    }

    .feature-info p {
    color: #CAC6DD;
    font-size: 36px;
}

.crypto-section {
    padding: 0px 0;
}
.banners {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding: 0 20px 0 20px;
}
.bonus-info {
    padding: 0 20px 0 0;
}
    
    .star-icon {
        width: 18px; /* Размер иконки */
        height: 18px; /* Размер иконки */
    }

    .steps-image {
        width: 83%;
        height: auto;    
    }

    .banner-button {
        height: 48px;
        font-size: 16px;
        
    }

    .step-text {
        font-size: 30px;
    }

    .step-text-1 {
        width: 445px;
        top: 23%;
        left: 2%;
    }    

    .step-text-2 {
        width: 520px;
        top: 56%;
        right: 1%;
    } 

    .step-text-3 {
        width: 400px;
        bottom: -2%;
        left: 5%;
    }  

} 


/* Медиазапросы для экранов меньше 768px */
@media (min-width: 769px) and (max-width: 1023px) {
    
    .feature-info h3 {
        color: #ffffff;
        font-size: 54px;
        margin-bottom: 5px;
        padding: 0 15px 0px 0px;
    }

    .feature-info p {
    color: #CAC6DD;
    font-size: 36px;
}

.crypto-section {
    padding: 0px 0;
}
.banners {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding: 0 20px 0 20px;
}
.bonus-info {
    padding: 0 20px 0 0;
}
    
    .star-icon {
        width: 18px; /* Размер иконки */
        height: 18px; /* Размер иконки */
    }

    .steps-image {
        width: 83%;
        height: auto;    
    }

    .banner-button {
        height: 48px;
        font-size: 16px;
        
    }

    .step-text {
        font-size: 24px;
    }

    .step-text-1 {
        width: 35%;
        top: 23%;
        left: 2%;
    }    

    .step-text-2 {
        width: 40%;
        top: 56%;
        right: 1%;
    } 

    .step-text-3 {
        width: 33%;
        bottom: -2%;
        left: 5%;
    }  

}