body {
    background-color: #141414;
    color: #fff;
    background-image: url('images/back.svg'); /* Путь к файлу */
    background-repeat: repeat; /* Повторение по всей странице */
    background-size: 25%; /* Уменьшение фона в 2 раза */
    background-position: top left; /* Начало с верхнего левого угла */
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}

/* Устанавливаем глобальный шрифт для всей страницы */
body {
    font-family: 'Montserrat', sans-serif;
}

/* Обновление шрифтов для карточек */
.game-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;  /* Жирный шрифт для заголовков */
}

.promo-code {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;  /* Обычный шрифт */
}

/* Если где-то используется Arial, обновляем на Montserrat */
* {
    font-family: 'Montserrat', sans-serif !important;
}


/* Общие стили для шапки */
.header {
    position: fixed;
    width: 100%;
    height: 220px; /* Можно изменить под требования */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Фоновое изображение */
.header-background {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/header-back-dark.c6bd8c0b.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: -1;
}

/* Контейнер для контента внутри header */
.header-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    padding: 20px;
}

/* Профиль */
.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    margin-bottom: 5px;
}

.profile-name {
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    margin: -3px;
}

.profile-subtitle {
    font-size: 18px;
    color: #ddd;
    margin-top: -3px;
}

/* Социальные иконки */
.social-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-icons a img {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-icons a:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Адаптивные стили */

@media (max-width: 920px) {
    .header-background {
        top: -100px;
        background-size: cover;
    }
}

@media (max-width: 1030px) {
    .header-background {
        top: -100px;
        background-size: cover;
    }
}

@media (max-width: 1440px) {
    .header-background {
        top: -100px;
        background-size: cover;
    }
}

@media (max-width: 768px) {
    body {
        background-size: 50%;
    }
    .header {
        height: auto;
    }

    .header-background {
        top: -30px;
        background-size: cover;
    }
    .header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .profile-img {
        width: 100px;
        height: 100px;
        border: 2px solid #fff;
        margin-top: -3px;
    }

    .profile-name {
        font-size: 20px;
    }

    .profile-subtitle {
        font-size: 16px;
    }

    .social-icons {
        gap: 15px;
        margin-top: -5px;
    }

    .social-icons a img {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .profile-img {
        width: 80px;
        height: 80px;
    }

    .profile-name {
        font-size: 20px;
    }

    .profile-subtitle {
        font-size: 14px;
    }

    .social-icons a img {
        width: 35px;
        height: 35px;
    }
}



/* Стили для уведомления */
.promo-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #28a745;
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    font-size: 16px;
}


/* Общий контейнер */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 210px 20px 20px;
}

/* Грид-сетка для десктопа */
#card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Карточка казино */
.casino-card {
    background-color: #1e1e1e;
    border-radius: 15px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Контейнер для логотипа и заголовка */
.casino-header {
    display: flex;
    align-items: center;  /* Центрируем по вертикали */
    justify-content: flex-start; /* Разделение элементов */
    gap: 15px; /* Отступ между элементами */
}

/* Логотип казино */
.casino-logo {
    height: 225px;
    border-radius: 15px;
    object-fit: cover;
}

/* Логотип казино (занимает 30%) */
.casino-logo-mobile {
    width: 30%;  /* Занимает 30% родительского контейнера */
    max-width: 150px; /* Ограничение максимального размера */
    height: auto; 
    object-fit: cover;
    border-radius: 10px;
}

/* Контент карточки */
.casino-content {
    flex-grow: 1;
}

/* Заголовок */
.game-title {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;

}

/* Заголовок (занимает 70%) */
.game-title-mobile {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
    width: 70%;  /* Занимает 70% ширины */
    word-wrap: break-word; /* Перенос слов при нехватке места */
}

/* Бонусы */
.bonuses {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;

}

.bonuses-mobile {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    width: 340px;
}

/* Основные стили бонусов */
.bonus {
    width: 310px;
    background-color: #ffcc00;
    padding: 5px;
    border-radius: 10px;
    font-weight: bold;
    color: #000;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
}

.bonus-mobile {
    background-color: #ffcc00;
    border-radius: 10px;
    font-weight: bold;
    color: #000;
    flex: 1;
    text-align: center;
    
    justify-content: center;
    align-items: center;
}

/* Стиль для основного текста бонуса */
.bonus-text {
    font-family: 'Montserrat', sans-serif; /* Основной шрифт */
    font-weight: 800;
    font-size: 18px;
    color: #000;
}

/* Стиль для описания бонуса */
.bonus-desc {
    font-family: 'Montserrat', sans-serif; /* Новый шрифт для описания */
    font-weight: 600;
    font-size: 14px;
    color: #333; /* Более светлый цвет */
    
}

/* Стили для блока промокода */
.promo-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #444;
    padding: 3px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 5px;
}

.promo-code-mobile {
    width: 335px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #444;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: -10px;
}

.promo-code:hover {
    background-color: #555;
}

/* Стили для текста промокода */
.promo-text {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

/* Иконка копирования */
.copy-icon {
    width: 24px;
    height: 24px;
}

/* Уведомление */
.promo-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #28a745;
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    text-align: center;
}

/* Стили для кнопки ЗАБРАТЬ БОНУС */
.bonus-button {
    display: block;
    width: 350px;
    text-align: center;
    background-color: #eaff00; /* Золотистый цвет */
    color: #000; /* Черный цвет текста */
    font-weight: bold;
    font-size: 16px;
    padding: 15px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.3s ease;
    margin-top: 5px; /* Отступ сверху */
}

.bonus-button:hover {
    background-color: #ff9900; /* Темнее при наведении */
}

.bonus-button-mobile {
    display: block;
    width: 325px;
    text-align: center;
    background-color: #eaff00; /* Золотистый цвет */
    color: #000; /* Черный цвет текста */
    font-weight: bold;
    font-size: 14px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.3s ease;
    margin-top: -10px;
}

/* Адаптивность */
@media (max-width: 768px) {
    #card-container {
        grid-template-columns: 1fr;
    }

    .casino-card {
        flex-direction: column;
        align-items: center;
    }

    .casino-logo {
        width: 80px;
        height: 80px;
    }

    .game-title {
        font-size: 18px;
        text-align: center;
    }

    .bonuses {
        flex-direction: column;
    }
}

.casino-link {
    text-decoration: none;
    color: inherit; /* Наследование цвета текста от родителя */
}