@-webkit-keyframes slider-autoplay {
    0%, 28%, to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    33%, 61% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    66%, 94% {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}

@keyframes slider-autoplay {
    0%, 28%, to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    33%, 61% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    66%, 94% {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}

@-webkit-keyframes dot-1 {
    0%, 28% { background: #fff; width: 24px; }
    33%, to { background: rgba(255, 255, 255, .4352941176); width: 8px; }
}

@keyframes dot-1 {
    0%, 28% { background: #fff; width: 24px; }
    33%, to { background: rgba(255, 255, 255, .4352941176); width: 8px; }
}

@-webkit-keyframes dot-2 {
    0%, 28%, 66%, to { background: rgba(255, 255, 255, .4352941176); width: 8px; }
    33%, 61% { background: #fff; width: 24px; }
}

@keyframes dot-2 {
    0%, 28%, 66%, to { background: rgba(255, 255, 255, .4352941176); width: 8px; }
    33%, 61% { background: #fff; width: 24px; }
}

@-webkit-keyframes dot-3 {
    0%, 61%, to { background: rgba(255, 255, 255, .4352941176); width: 8px; }
    66%, 94% { background: #fff; width: 24px; }
}

@keyframes dot-3 {
    0%, 61%, to { background: rgba(255, 255, 255, .4352941176); width: 8px; }
    66%, 94% { background: #fff; width: 24px; }
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    min-width: 360px;
    scroll-behavior: smooth;
    background: #1c4368;
}

::-webkit-scrollbar { display: none; }
::-webkit-scrollbar-thumb { display: none; }

body {
    font: 400 16px/1.2 system-ui, sans-serif;
    overflow-x: hidden;
    overflow-y: scroll;
    color: #fff;
}

.container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
}

@media (min-width: 1480px) {
    .container { max-width: 1920px; }
}

a {
    text-decoration: none;
    color: unset;
    cursor: pointer;
}

section.mt { margin-top: 24px; }

@media (min-width: 601px) {
    section.mt { margin-top: 32px; }
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    border-radius: 8px;
    width: fit-content;
    text-transform: uppercase;
}

@media (min-width: 601px) {
    .btn { font-size: 14px; height: 32px; }
}

.btn-main, .header__bonus::after {
    background: #7eac2f;
    color: #fff;
}

.btn-secondary {
    background: #276aa5;
    color: #fff;
}

.btn-light {
    background: #fff;
    color: #3b3b3b;
}

.btn-big {
    background: #7eac2f;
    width: 100%;
    color: #fff;
    padding: 8px 16px;
    height: 36px;
    font-weight: 500;
}

.header {
    background: #1c4368;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.header-container { padding: 0 8px; }

.header-wrap, .header__logo { display: flex; }
.header-wrap { gap: 24px; }

.header__logo {
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 0;
}

.header__logo img { width: 90px; height: auto; }

@media (min-width: 991px) {
    .header__logo img { width: 122px; }
    .header__logo { margin: 0 8px; }
}

.header__btns {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
    height: 40px;
    gap: 8px;
}

@media (min-width: 601px) {
    .header__btns { height: 48px; }
}

.header__bonus {
    background: #276aa5;
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #93c738;
    position: relative;
}

@media (min-width: 991px) {
    .header__bonus { display: flex; }
}

.header__bonus::after {
    box-sizing: border-box;
    position: absolute;
    content: "1";
    top: 4px;
    right: 4px;
    font-size: 8px;
    max-width: 12px;
    width: 12px;
    height: 12px;
    max-height: 12px;
    border-radius: 50%;
    padding: 1.5px 4px;
}

.header__topup {
    background: #276aa5;
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #93c738;
}

@media (min-width: 991px) {
    .header__topup { display: flex; }
}

.header__settings {
    background: #276aa5;
    height: 32px;
    display: none;
    align-items: center;
    border-radius: 8px;
}

@media (min-width: 751px) {
    .header__settings { display: flex; }
}

.header__settings-left, .header__settings-right {
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 4px;
    color: #fff;
}

.header__settings-left { border-right: 1px solid #1c4368; }
.header__settings-left .icon-settings { color: #93c738; }
.header__settings-right { font-size: 12px; }

.header__settings-right img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #fff;
}

.header__nav {
    background: #205582;
    width: 100%;
    margin-bottom: 8px;
    border-radius: 8px;
    color: #fff;
    min-height: 40px;
    padding-left: 4px;
    display: none;
}

@media (min-width: 751px) {
    .header__nav { display: flex; }
}

.header__nav-item, .header__nav-items {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header__nav-items {
    position: relative;
    max-width: calc(100vw - 146px - 48px - 16px - 28px - 8px);
    mask-image: linear-gradient(to right, #000 90%, transparent);
}

.header__nav-item {
    white-space: nowrap;
    text-transform: uppercase;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
}

.header__nav-item:last-of-type { margin-left: -4px; }
.header__nav-item .icon-win { color: #93c738; }
.header__nav-more { margin-left: 8px; }

.header__nav-vegas {
    text-transform: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 16px !important;
}

.icon {
    background: currentColor;
    display: block;
    mask: no-repeat center/contain;
}

.icon-chevron-down { mask-image: url(/img/chevron-down.svg); }
.icon-dragon { mask-image: url(/img/dragon.svg); }
.icon-gift { mask-image: url(/img/gift.svg); }
.icon-settings { mask-image: url(/img/settings.svg); }
.icon-win { mask-image: url(/img/win.svg); }
.icon-star { mask-image: url(/img/star.svg); }
.icon-dollar { mask-image: url(/img/dollar.svg); }
.icon-back { mask-image: url(/img/back.svg); }
.icon-like { mask-image: url(/img/like.svg); }
.icon-live { mask-image: url(/img/live.svg); }
.icon-youtube { mask-image: url(/img/youtube.svg); }
.icon-globe { mask-image: url(/img/globe.svg); }
.icon-mobile-menu { mask-image: url(/img/mobile-menu.svg); }
.icon-mobile-home { mask-image: url(/img/mobile-home.svg); }
.icon-mobile-casino { mask-image: url(/img/mobile-casino.svg); }
.icon-mobile-money { mask-image: url(/img/mobile-money.svg); }
.icon-mobile-sport { mask-image: url(/img/mobile-sport.svg); }
.icon-football { mask-image: url(/img/football.svg); }
.icon-tennis { mask-image: url(/img/tennis.svg); }
.icon-basketball { mask-image: url(/img/basketball.svg); }
.icon-hockey { mask-image: url(/img/hockey.svg); }
.icon-volleyball { mask-image: url(/img/volleyball.svg); }
.icon-table { mask-image: url(/img/table.svg); }
.icon-cricket { mask-image: url(/img/cricket.svg); }
.icon-esport { mask-image: url(/img/esport.svg); }
.icon-fifa { mask-image: url(/img/fifa.svg); }
.icon-mortal { mask-image: url(/img/mortal.svg); }
.icon-athletics { mask-image: url(/img/athletics.svg); }
.icon-badminton { mask-image: url(/img/badminton.svg); }
.icon-baseball { mask-image: url(/img/baseball.svg); }
.icon-bowling { mask-image: url(/img/bowling.svg); }
.icon-polo { mask-image: url(/img/polo.svg); }
.icon-handball { mask-image: url(/img/handball.svg); }

.main-container {
    position: relative;
    display: grid;
    gap: 8px;
    padding-top: 40px;
    grid-template-areas: "aside body scrollbar";
    grid-template-columns: 32px auto 32px;
}

@media (min-width: 601px) {
    .main-container { padding-top: 48px; }
}

@media (min-width: 751px) {
    .main-container { padding-top: 96px; }
}

@media (min-width: 991px) {
    .main-container { grid-template-columns: 249px auto 32px; }
}

.main-aside { grid-area: aside; }

.main-wrap {
    grid-area: body;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.main-scrollbar {
    grid-area: scrollbar;
    min-width: 32px;
}

@media (max-width: 600px) {
    main { margin-top: 4px; }
}

.slider { position: relative; width: 100%; }
.slider__viewport { overflow: hidden; width: 100%; }

.slider__slide, .slider__track {
    display: flex;
    position: relative;
    width: 100%;
}

.slider__track {
    animation: slider-autoplay 8s infinite;
}

.slider__slide {
    height: 248px;
    flex: 0 0 100%;
    border-radius: 8px;
    overflow: hidden;
}

.slider__slide-backdrop, .slider__slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.slider__slide-backdrop {
    pointer-events: none;
    left: -30%;
    background: linear-gradient(to right, #000 0, rgba(0, 0, 0, .9) 40%, transparent 70%, transparent 100%);
    z-index: 1;
    width: 100%;
}

@media (min-width: 601px) {
    .slider__slide-backdrop { inset: 0; }
}

.slider__slide-wrap {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 600px;
    padding: 38px 22px 8px;
}

@media (min-width: 601px) {
    .slider__slide-wrap {
        padding-top: 8px;
        justify-content: center;
    }
}

@media (min-width: 991px) {
    .slider__slide-wrap {
        padding-right: 56px;
        padding-left: 32px;
    }
}

.slider__slide-title {
    font-size: 24px;
    font-weight: 700;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 30px;
    text-transform: uppercase;
}

@media (min-width: 601px) {
    .slider__slide-title { font-size: 28px; line-height: 35px; }
}

@media (min-width: 991px) {
    .slider__slide-title { font-size: 35px; line-height: 42px; }
}

.slider__slide-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 14px;
    line-height: 16px;
    margin-top: 8px;
}

@media (min-width: 601px) {
    .slider__slide-text { -webkit-line-clamp: 2; }
}

.slider__slide .btn { margin-top: 16px; }

.slider__dots {
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 12px 0;
    z-index: 9;
}

.slider__dot {
    margin: 4px;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .4352941176);
}

.slider__dot:nth-child(1) { animation: dot-1 8s infinite; }
.slider__dot:nth-child(2) { animation: dot-2 8s infinite; }
.slider__dot:nth-child(3) { animation: dot-3 8s infinite; }

.nav-mobile {
    background: #205582;
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 0;
    width: 100vw;
}

@media (min-width: 601px) {
    .nav-mobile { display: none; }
}

.nav-mobile__item, .nav-mobile__wrap {
    display: flex;
    align-items: center;
}

.nav-mobile__item {
    padding: 8px;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.nav-mobile__item.featured { color: #93c738; }