body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--text);
    width: 100%;
    background-color: var(--header);
    -webkit-text-size-adjust: 100%;
}

.main {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

.background>img {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    object-fit: cover;
    object-position: right;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.image>img {
    display: block;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.button {
    display: inline-block;
    position: relative;
    width: auto;
    height: auto;
    border-radius: 25px;
    background-color: var(--btn);
    box-shadow: 0px 4px 4px 0px #00000040;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform:uppercase;
    text-align: center;
    white-space: nowrap;
    color: var(--text);
    cursor: pointer;
    padding: 11.5px 23px;
    transition: all 0.5s;
}

.button:hover {
    transform: translateY(-5px);
    z-index: 10;
}

h1,
h2,
h3,
.title {
    display: block;
    position: relative;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    text-transform:uppercase;
}

h1,
.title.general {
    font-weight: 800;
    font-size: 32px;
    line-height: 32px;
    color: var(--text);
    text-align: left;
}

h2,
.title.high {
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    color: var(--text);
    text-align: center;
}

.title.with-bg {
    width: 100%;
    border-bottom: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, rgba(90, 176, 96, 0) 0%, #5AB060 50%, rgba(90, 176, 96, 0) 100%);
    padding: 8.5px 20px;
}


.content {
    display: block;
    position: relative;
    overflow: hidden;
    height: auto;
    border-radius: 12px;
    background: linear-gradient(180deg, #0D5057 0%, #0D5057 100%);
    border: 2px solid var(--border);
    padding: 20px;
} 

.content + .content {
    margin-top: 20px; 
}

/**-------------- HEADER --------------*/

.header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header__logo img {
    max-width: 130px;
}

.menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.header__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-menu__list:hover {
    background-color: var(--header);
}

.header-menu__list a:hover {
    color: var(--btn);
}

.header-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-menu__list>ul.header__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-menu__list>ul.header__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-dropdown__list a:hover {
    color: var(--btn);
}

.header__button-auth {
    margin-left: auto;
}

.header__button-login {
    margin-right: 16px;
}

.button.green {
    background-color: var(--btn-green);
    padding-left: 29.5px;
    padding-right: 29.5px;
}

.header__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header__watch span {
    font-size: 13px;
    line-height: 13px;
    color: var(--bg-content);
}

.header__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO --------------*/

.hero__content {
   border-radius: 0;
   border: none;
   padding: 86px 0 85px 164px;
   margin-top: 75px;
   margin-bottom: 20px;
}

.hero__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero__rating {
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    
}

.hero__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero__button {
    margin-top: 20px;
}

/**-------------- INFO --------------*/

.info__team {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.info__table {
    width: 100%;
    max-width: 590px;
    overflow: visible;
    border-collapse: separate;
    border-spacing: 0 20px;
}

.info__table tr {
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
}

.info__table td {
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    background-color: var(--header);
    border-radius: 6px;
    border: 4px solid var(--bg-menu);
    padding: 12px 20px;
}

.info__table tr td:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.info__table td+td {
    background-color: transparent;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/**-------------- BANNER --------------*/

.banner__content {
    padding: 113px 65px 113px 0;
}

.banner__info {
    position: relative;
    max-width: 401px;
    text-align: center;
    margin-left: auto;
    z-index: 1;
}

.banner__title {
    font-size: 36px;
    line-height: 43px;
}

.banner__info span {
    display: block;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 30px;
}

/**-------------- GAMES --------------*/

.games__content {
    background: transparent;
    overflow: visible;
    border: none;
    padding: 0;
}

.games-panel__list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.games-panel__list li {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    width: 295px;
}

.games-panel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.games-panel__hover {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000000CC;
    border: 2px solid var(--border);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}


.games-panel__list li:hover .games-panel__hover {
    opacity: 1;
    visibility: visible;
}

.games__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.games__button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url("../img/demo.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin: 14px 14px 14px 18px;

}

/**-------------- NAVIGATION --------------*/

.navigation__content {
    overflow: hidden;
    padding: 0;
}

.navigation__general {
    background-color:transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation__general.active button::after {
    transform: rotate(180deg);
}

.navigation__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation__general.active + .navigation__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation__menu li a:hover {
    font-weight: 700;
}

/**-------------- ARTICLE --------------*/

.article {
    text-align: left;
}

.article *+* {
    margin-top: 16px;
}


.article p a {
    font-weight: 700;
    color: var(--text);
}


.article ul li::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    background-color: var(--text);
    border-radius: 50%;
    margin-right: 8px;
}

.article ul li {
    display: flex;
    align-items: center;
}

.article ol {
    counter-reset: num; 
}

.article li {
    border-bottom: 2px solid;
    border-image-slice: 1;
    border-image-source: 
            linear-gradient(90deg, 
            rgba(255, 73, 73, 0) 0%, #FF4949 50%, 
            rgba(255, 73, 73, 0) 100%);
    padding-bottom: 10px;
    margin-top: 8px;
}

.article ol li::before {
    counter-increment: num;
    content: counter(num) ".";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: var(--text);
    margin-right: 8px;
}

.article__button {
    display: block;
    max-width: max-content;
    margin: 16px auto 0;
}

/**-------------- FAQ --------------*/

.faq__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq__list {
    counter-reset: faq;
}

.faq__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq__list li.active .faq__question::after {
    transform: rotate(180deg);
}

.faq__list li.active .faq__question {
    border-radius: 6px 6px 0 0;
}

.faq__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-answer__inner {
    padding: 13px 20px;
}

.faq__list li.active .faq__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER --------------*/

.footer__content {
    max-width: 100%;
    background: var(--text);
    border-radius: 0;
    border: none;
    margin-top: 20px;
}

.footer__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer__navigation a:hover {
    color: var(--btn);
}

.footer__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- SCROLL --------------*/

.scroll__button {
    display: none;
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    background-color: var(--header);
    background-image: url("../img/vector.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    transition: all 0.5s;
    z-index: 999;
}

.scroll__button:hover {
    box-shadow: 0px 4px 4px 0px var(--btn);
}

/**-------------- BONUSES PAGE --------------*/

.main-bonuses {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- BONUSES --------------*/

.header-bonuses {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-bonuses__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-bonuses__logo img {
    max-width: 130px;
}

.header-bonuses__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-bonuses-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-bonuses-menu__list:hover {
    background-color: var(--header);
}

.header-bonuses-menu__list a:hover {
    color: var(--btn);
}

.header-bonuses-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-bonuses-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-bonuses-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-bonuses-menu__list>ul.header-bonuses__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-bonuses-menu__list>ul.header-bonuses__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-bonuses-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-bonuses-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-bonuses-dropdown__list a:hover {
    color: var(--btn);
}

.header-bonuses__button-auth {
    margin-left: auto;
}

.header-bonuses__button-login {
    margin-right: 16px;
}

.header-bonuses__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-bonuses__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-bonuses__watch span {
    font-size: 13px;
    line-height: 13px;
    color: var(--bg-content);
}

.header-bonuses__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-bonuses__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-bonuses__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-BONUSES --------------*/

.hero-bonuses__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-bonuses__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-bonuses__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-bonuses__info span {
    display: block;
    font-weight: 400;
    color: var(--text);
}

.hero-bonuses__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-bonuses__button {
    margin-top: 20px;
}

.breadcrumbs__link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.breadcrumbs__link a {
    display: inline-block;
    white-space: nowrap;
    text-transform: capitalize;
    transition: font-weight 0.3s;
}

.breadcrumbs__link li {
    position: relative;
    display: flex;
    align-items: center;
}

.breadcrumbs__link li:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 12px;
    background-color: var(--text);
    margin: 0 8px; 
}

.breadcrumbs__link a[href]:hover {
    font-weight: 400;
}

.breadcrumbs__link a:not([href]) {
    font-weight: 700;
    pointer-events: none; 
}

/**-------------- NAVIGATION-BONUSES --------------*/

.navigation-bonuses__content {
    overflow: hidden;
    padding: 0;
}

.navigation-bonuses__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-bonuses__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-bonuses__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-bonuses__general.active button::after {
    transform: rotate(180deg);
}

.navigation-bonuses__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-bonuses__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-bonuses__general.active+.navigation-bonuses__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-bonuses__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-bonuses__menu li a:hover {
    font-weight: 700;
}

/**-------------- BONUS --------------*/

.bonus__content {
    background: transparent;
    border-radius: 0;
    border: none;
    padding: 0;
}

.bonus__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.bonus__list li {
    position: relative;
    width: calc((100% - 20px) / 2);
    max-width: 610px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.bonus__info {
    position: relative;
    border-radius: 6px;
    background-color: var(--bonus-bg);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 30px;
    margin: 265.5px 20px 20.5px 20px;
    z-index: 1;
}

.bonus__title {
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    margin-bottom: 20px;
}

.bonus__text {
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.bonus__buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.bonus__button {
    font-size: 12px;
    line-height: 17.5px;
    padding: 14px 17.5px;
}

/**-------------- FAQ-BONUSES --------------*/

.faq-bonuses__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-bonuses__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-bonuses__list {
    counter-reset: faq;
}

.faq-bonuses__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-bonuses__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-bonuses__list li.active .faq-bonuses__question::after {
    transform: rotate(180deg);
}

.faq-bonuses__list li.active .faq-bonuses__question {
    border-radius: 6px 6px 0 0;
}

.faq-bonuses__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-bonuses-answer__inner {
    padding: 13px 20px;
}

.faq-bonuses__list li.active .faq-bonuses__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-BONUSES --------------*/

.footer-bonuses__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-bonuses__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-bonuses__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-bonuses__navigation a:hover {
    color: var(--btn);
}

.footer-bonuses__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-bonuses__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-bonuses__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- FREE-SPINS PAGE --------------*/

.main-spins {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-SPINS --------------*/

.header-spins {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-spins__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-spins__logo img {
    max-width: 130px;
}

.header-spins__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-spins-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-spins-menu__list:hover {
    background-color: var(--header);
}

.header-spins-menu__list a:hover {
    color: var(--btn);
}

.header-spins-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-spins-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-spins-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-spins-menu__list>ul.header-spins__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-spins-menu__list>ul.header-spins__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-spins-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-spins-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-spins-dropdown__list a:hover {
    color: var(--btn);
}

.header-spins__button-auth {
    margin-left: auto;
}

.header-spins__button-login {
    margin-right: 16px;
}

.header-spins__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-spins__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-spins__watch span {
    font-size: 13px;
    line-height: 13px;
    color: var(--bg-content);
}

.header-spins__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-spins__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-spins__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-SPINS --------------*/

.hero-spins__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-spins__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-spins__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-spins__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-spins__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-spins__button {
    margin-top: 20px;
}

/**-------------- BANNER-SPINS --------------*/

.banner-spins__content {
    padding: 113px 65px 113px 0;
}

.banner-spins__info {
    position: relative;
    max-width: 401px;
    text-align: center;
    margin-left: auto;
    z-index: 1;
}

.banner-spins__title {
    font-size: 36px;
    line-height: 43px;
}

.banner-spins__info span {
    display: block;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 30px;
}

/**-------------- NAVIGATION-SPINS --------------*/

.navigation-spins__content {
    overflow: hidden;
    padding: 0;
}

.navigation-spins__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-spins__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-spins__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-spins__general.active button::after {
    transform: rotate(180deg);
}

.navigation-spins__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-spins__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-spins__general.active+.navigation-spins__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-spins__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-spins__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-SPINS --------------*/

.faq-spins__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-spins__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-spins__list {
    counter-reset: faq;
}

.faq-spins__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-spins__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-spins__list li.active .faq-spins__question::after {
    transform: rotate(180deg);
}

.faq-spins__list li.active .faq-spins__question {
    border-radius: 6px 6px 0 0;
}

.faq-spins__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-spins-answer__inner {
    padding: 13px 20px;
}

.faq-spins__list li.active .faq-spins__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-SPINS --------------*/

.footer-spins__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-spins__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-spins__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-spins__navigation a:hover {
    color: var(--btn);
}

.footer-spins__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-spins__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-spins__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- PROMO-CODE PAGE --------------*/

.main-promo {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-PROMO --------------*/

.header-promo {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-promo__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-promo__logo img {
    max-width: 130px;
}

.header-promo__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-promo-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-promo-menu__list:hover {
    background-color: var(--header);
}

.header-promo-menu__list a:hover {
    color: var(--btn);
}

.header-promo-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-promo-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-promo-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-promo-menu__list>ul.header-promo__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-promo-menu__list>ul.header-promo__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-promo-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-promo-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-promo-dropdown__list a:hover {
    color: var(--btn);
}

.header-promo__button-auth {
    margin-left: auto;
}

.header-promo__button-login {
    margin-right: 16px;
}

.header-promo__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-promo__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-promo__watch span {
    font-size: 13px;
    line-height: 13px;
    color: var(--bg-content);
}

.header-promo__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-promo__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-promo__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-PROMO --------------*/

.hero-promo__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-promo__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-promo__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-promo__info span {
    display: block;
    font-weight: 400;
}

.hero-promo__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-promo__button {
    margin-top: 20px;
}

/**-------------- BANNER-PROMO --------------*/

.banner-promo__content {
    padding: 113px 65px 113px 0;
}

.banner-promo__info {
    position: relative;
    max-width: 401px;
    text-align: center;
    margin-left: auto;
    z-index: 1;
}

.banner-promo__title {
    font-size: 36px;
    line-height: 43px;
}

.banner-promo__info span {
    display: block;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 30px;
}

/**-------------- NAVIGATION-PROMO --------------*/

.navigation-promo__content {
    overflow: hidden;
    padding: 0;
}

.navigation-promo__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-promo__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-promo__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-promo__general.active button::after {
    transform: rotate(180deg);
}

.navigation-promo__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-promo__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-promo__general.active+.navigation-promo__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-promo__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-promo__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-PROMO --------------*/

.faq-promo__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-promo__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-promo__list {
    counter-reset: faq;
}

.faq-promo__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-promo__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-promo__list li.active .faq-promo__question::after {
    transform: rotate(180deg);
}

.faq-promo__list li.active .faq-promo__question {
    border-radius: 6px 6px 0 0;
}

.faq-promo__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-promo-answer__inner {
    padding: 13px 20px;
}

.faq-promo__list li.active .faq-promo__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-PROMO --------------*/

.footer-promo__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-promo__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-promo__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-promo__navigation a:hover {
    color: var(--btn);
}

.footer-promo__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}


.footer-promo__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-promo__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- WELCOME-BONUS PAGE --------------*/

.main-welcome {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-WELCOME --------------*/

.header-welcome {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-welcome__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-welcome__logo img {
    max-width: 130px;
}

.header-welcome__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-welcome-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-welcome-menu__list:hover {
    background-color: var(--header);
}

.header-welcome-menu__list a:hover {
    color: var(--btn);
}

.header-welcome-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-welcome-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-welcome-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-welcome-menu__list>ul.header-welcome__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-welcome-menu__list>ul.header-welcome__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-welcome-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-welcome-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-welcome-dropdown__list a:hover {
    color: var(--btn);
}

.header-welcome__button-auth {
    margin-left: auto;
}

.header-welcome__button-login {
    margin-right: 16px;
}

.header-welcome__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-welcome__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-welcome__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-welcome__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-welcome__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-welcome__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-WELCOME --------------*/

.hero-welcome__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-welcome__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-welcome__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-welcome__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-welcome__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-welcome__button {
    margin-top: 20px;
}

/**-------------- BANNER-WELCOME --------------*/

.banner-welcome__content {
    padding: 113px 65px 113px 0;
}

.banner-welcome__info {
    position: relative;
    max-width: 401px;
    text-align: center;
    margin-left: auto;
    z-index: 1;
}

.banner-welcome__title {
    font-size: 36px;
    line-height: 43px;
}

.banner-welcome__info span {
    display: block;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 30px;
}

/**-------------- NAVIGATION-WELCOME --------------*/

.navigation-welcome__content {
    overflow: hidden;
    padding: 0;
}

.navigation-welcome__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-welcome__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-welcome__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-welcome__general.active button::after {
    transform: rotate(180deg);
}

.navigation-welcome__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-welcome__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-welcome__general.active+.navigation-welcome__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-welcome__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-welcome__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-WELCOME --------------*/

.faq-welcome__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-welcome__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-welcome__list {
    counter-reset: faq;
}

.faq-welcome__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-welcome__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-welcome__list li.active .faq-welcome__question::after {
    transform: rotate(180deg);
}

.faq-welcome__list li.active .faq-welcome__question {
    border-radius: 6px 6px 0 0;
}

.faq-welcome__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-welcome-answer__inner {
    padding: 13px 20px;
}

.faq-welcome__list li.active .faq-welcome__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-WELCOME --------------*/

.footer-welcome__content {
    max-width: 100%;
    background: var(--text);
    border-radius: 0;
    margin-top: 20px;
}

.footer-welcome__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-welcome__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-welcome__navigation a:hover {
    color: var(--btn);
}

.footer-welcome__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}


.footer-welcome__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-welcome__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- VIP PAGE --------------*/

.main-vip {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-VIP --------------*/

.header-vip {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-vip__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-vip__logo img {
    max-width: 130px;
}

.header-vip__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-vip-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-vip-menu__list:hover {
    background-color: var(--header);
}

.header-vip-menu__list a:hover {
    color: var(--btn);
}

.header-vip-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-vip-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-vip-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-vip-menu__list>ul.header-vip__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-vip-menu__list>ul.header-vip__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-vip-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-vip-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-vip-dropdown__list a:hover {
    color: var(--btn);
}

.header-vip__button-auth {
    margin-left: auto;
}

.header-vip__button-login {
    margin-right: 16px;
}

.header-vip__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-vip__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-vip__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-vip__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-vip__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-vip__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-VIP --------------*/

.hero-vip__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-vip__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-vip__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-vip__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-vip__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-vip__button {
    margin-top: 20px;
}

/**-------------- BANNER-VIP --------------*/

.banner-vip__content {
    padding: 113px 65px 113px 0;
}

.banner-vip__info {
    position: relative;
    max-width: 401px;
    text-align: center;
    margin-left: auto;
    z-index: 1;
}

.banner-vip__title {
    font-size: 36px;
    line-height: 43px;
}

.banner-vip__info span {
    display: block;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 30px;
}

/**-------------- NAVIGATION-VIP --------------*/

.navigation-vip__content {
    overflow: hidden;
    padding: 0;
}

.navigation-vip__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-vip__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-vip__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-vip__general.active button::after {
    transform: rotate(180deg);
}

.navigation-vip__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-vip__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-vip__general.active+.navigation-vip__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-vip__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-vip__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-VIP --------------*/

.faq-vip__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-vip__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-vip__list {
    counter-reset: faq;
}

.faq-vip__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-vip__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-vip__list li.active .faq-vip__question::after {
    transform: rotate(180deg);
}

.faq-vip__list li.active .faq-vip__question {
    border-radius: 6px 6px 0 0;
}

.faq-vip__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-vip-answer__inner {
    padding: 13px 20px;
}

.faq-vip__list li.active .faq-vip__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-VIP --------------*/

.footer-vip__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-vip__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-vip__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-vip__navigation a:hover {
    color: var(--btn);
}

.footer-vip__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-vip__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-vip__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- APP PAGE --------------*/

.main-app {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-APP --------------*/

.header-app {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-app__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-app__logo img {
    max-width: 130px;
}

.header-app__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-app-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-app-menu__list:hover {
    background-color: var(--header);
}

.header-app-menu__list a:hover {
    color: var(--btn);
}

.header-app-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-app-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-app-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-app-menu__list>ul.header-app__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-app-menu__list>ul.header-app__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-app-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-app-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-app-dropdown__list a:hover {
    color: var(--btn);
}

.header-app__button-auth {
    margin-left: auto;
}

.header-app__button-login {
    margin-right: 16px;
}

.header-app__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-app__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-app__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-app__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-app__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-app__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-APP --------------*/

.hero-app__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-app__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-app__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-app__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-app__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-app__buttons {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 20px;
}

.hero-app__button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 200px;
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    text-wrap: wrap;
    text-align: left;
    border-radius: 50px;
    padding: 13px 24px;
}

.hero-app__button::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    flex-shrink: 0;
    background-image: url("../img/apple.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
}

.hero-app__button-android::before {
    background-image: url("../img/android.svg");
}

/**-------------- NAVIGATION-APP --------------*/

.navigation-app__content {
    overflow: hidden;
    padding: 0;
}

.navigation-app__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-app__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-app__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-app__general.active button::after {
    transform: rotate(180deg);
}

.navigation-app__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-app__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-app__general.active+.navigation-app__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-app__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-app__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-APP --------------*/

.faq-app__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-app__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-app__list {
    counter-reset: faq;
}

.faq-app__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-app__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-app__list li.active .faq-app__question::after {
    transform: rotate(180deg);
}

.faq-app__list li.active .faq-app__question {
    border-radius: 6px 6px 0 0;
}

.faq-app__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-app-answer__inner {
    padding: 13px 20px;
}

.faq-app__list li.active .faq-app__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-APP --------------*/

.footer-app__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-app__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-app__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-app__navigation a:hover {
    color: var(--btn);
}

.footer-app__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-app__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-app__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- DEPOSIT PAGE --------------*/

.main-deposit {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-DEPOSIT --------------*/

.header-deposit {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-deposit__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-deposit__logo img {
    max-width: 130px;
}

.header-deposit__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-deposit-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-deposit-menu__list:hover {
    background-color: var(--header);
}

.header-deposit-menu__list a:hover {
    color: var(--btn);
}

.header-deposit-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-deposit-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-deposit-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-deposit-menu__list>ul.header-deposit__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-deposit-menu__list>ul.header-deposit__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-deposit-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-deposit-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-deposit-dropdown__list a:hover {
    color: var(--btn);
}

.header-deposit__button-auth {
    margin-left: auto;
}

.header-deposit__button-login {
    margin-right: 16px;
}

.header-deposit__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-deposit__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-deposit__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-deposit__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-deposit__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-deposit__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-DEPOSIT --------------*/

.hero-deposit__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-deposit__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-deposit__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-deposit__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-deposit__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-deposit__button {
    margin-top: 20px;
}

/**-------------- NAVIGATION-DEPOSIT --------------*/

.navigation-deposit__content {
    overflow: hidden;
    padding: 0;
}

.navigation-deposit__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-deposit__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-deposit__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-deposit__general.active button::after {
    transform: rotate(180deg);
}

.navigation-deposit__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-deposit__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-deposit__general.active+.navigation-deposit__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-deposit__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-deposit__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-DEPOSIT --------------*/

.faq-deposit__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-deposit__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-deposit__list {
    counter-reset: faq;
}

.faq-deposit__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-deposit__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-deposit__list li.active .faq-deposit__question::after {
    transform: rotate(180deg);
}

.faq-deposit__list li.active .faq-deposit__question {
    border-radius: 6px 6px 0 0;
}

.faq-deposit__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-deposit-answer__inner {
    padding: 13px 20px;
}

.faq-deposit__list li.active .faq-deposit__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-DEPOSIT --------------*/

.footer-deposit__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-deposit__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-deposit__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-deposit__navigation a:hover {
    color: var(--btn);
}

.footer-deposit__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-deposit__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-deposit__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- CASINO PAGE --------------*/

.main-casino {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto
}

/**-------------- HEADER-CASINO --------------*/

.header-casino {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-casino__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-casino__logo img {
    max-width: 130px;
}

.header-casino__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-casino-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-casino-menu__list:hover {
    background-color: var(--header);
}

.header-casino-menu__list a:hover {
    color: var(--btn);
}

.header-casino-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-casino-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-casino-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-casino-menu__list>ul.header-casino__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-casino-menu__list>ul.header-casino__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-casino-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-casino-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-casino-dropdown__list a:hover {
    color: var(--btn);
}

.header-casino__button-auth {
    margin-left: auto;
}

.header-casino__button-login {
    margin-right: 16px;
}

.header-casino__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-casino__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-casino__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-casino__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-casino__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-casino__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-CASINO --------------*/

.hero-casino__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-casino__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-casino__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-casino__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-casino__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-casino__button {
    margin-top: 20px;
}

/**-------------- GAMES-CASINO --------------*/

.games-casino__content {
    background: transparent;
    overflow: visible;
    border: none;
    padding: 0;
}

.games-casino-panel__list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.games-casino-panel__list li {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    width: 295px;
}

.games-casino-panel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.games-casino-panel__hover {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000000CC;
    border: 2px solid var(--border);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}


.games-casino-panel__list li:hover .games-casino-panel__hover {
    opacity: 1;
    visibility: visible;
}

.games-casino__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.games-casino__button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url("../img/demo.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin: 14px 14px 14px 18px;

}

/**-------------- NAVIGATION-CASINO --------------*/

.navigation-casino__content {
    overflow: hidden;
    padding: 0;
}

.navigation-casino__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-casino__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-casino__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-casino__general.active button::after {
    transform: rotate(180deg);
}

.navigation-casino__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-casino__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-casino__general.active+.navigation-casino__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-casino__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-casino__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-CASINO --------------*/

.faq-casino__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-casino__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-casino__list {
    counter-reset: faq;
}

.faq-casino__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-casino__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-casino__list li.active .faq-casino__question::after {
    transform: rotate(180deg);
}

.faq-casino__list li.active .faq-casino__question {
    border-radius: 6px 6px 0 0;
}

.faq-casino__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-casino-answer__inner {
    padding: 13px 20px;
}

.faq-casino__list li.active .faq-casino__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-CASINO --------------*/

.footer-casino__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-casino__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-casino__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-casino__navigation a:hover {
    color: var(--btn);
}

.footer-casino__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-casino__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-casino__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- SLOTS PAGE --------------*/

.main-slots {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-SLOTS --------------*/

.header-slots {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-slots__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-slots__logo img {
    max-width: 130px;
}

.header-slots__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-slots-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-slots-menu__list:hover {
    background-color: var(--header);
}

.header-slots-menu__list a:hover {
    color: var(--btn);
}

.header-slots-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-slots-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-slots-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-slots-menu__list>ul.header-slots__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-slots-menu__list>ul.header-slots__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-slots-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-slots-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-slots-dropdown__list a:hover {
    color: var(--btn);
}

.header-slots__button-auth {
    margin-left: auto;
}

.header-slots__button-login {
    margin-right: 16px;
}

.header-slots__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-slots__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-slots__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-slots__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-slots__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-slots__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-SLOTS --------------*/

.hero-slots__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-slots__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-slots__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-slots__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-slots__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-slots__button {
    margin-top: 20px;
}

/**-------------- GAMES-SLOTS --------------*/

.games-slots__content {
    background: transparent;
    overflow: visible;
    border: none;
    padding: 0;
}

.games-slots-panel__list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.games-slots-panel__list li {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    width: 295px;
}

.games-slots-panel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.games-slots-panel__hover {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000000CC;
    border: 2px solid var(--border);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}


.games-slots-panel__list li:hover .games-slots-panel__hover {
    opacity: 1;
    visibility: visible;
}

.games-slots__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.games-slots__button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url("../img/demo.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin: 14px 14px 14px 18px;
}

/**-------------- NAVIGATION-SLOTS --------------*/

.navigation-slots__content {
    overflow: hidden;
    padding: 0;
}

.navigation-slots__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-slots__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-slots__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-slots__general.active button::after {
    transform: rotate(180deg);
}

.navigation-slots__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-slots__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-slots__general.active+.navigation-slots__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-slots__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-slots__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-SLOTS --------------*/

.faq-slots__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-slots__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-slots__list {
    counter-reset: faq;
}

.faq-slots__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-slots__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-slots__list li.active .faq-slots__question::after {
    transform: rotate(180deg);
}

.faq-slots__list li.active .faq-slots__question {
    border-radius: 6px 6px 0 0;
}

.faq-slots__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-slots-answer__inner {
    padding: 13px 20px;
}

.faq-slots__list li.active .faq-slots__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-SLOTS --------------*/

.footer-slots__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-slots__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-slots__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-slots__navigation a:hover {
    color: var(--btn);
}

.footer-slots__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-slots__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-slots__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- LIVE PAGE --------------*/

.main-live {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-LIVE --------------*/

.header-live {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-live__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-live__logo img {
    max-width: 130px;
}

.header-live__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-live-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-live-menu__list:hover {
    background-color: var(--header);
}

.header-live-menu__list a:hover {
    color: var(--btn);
}

.header-live-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-live-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-live-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-live-menu__list>ul.header-live__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-live-menu__list>ul.header-live__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-live-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-live-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-live-dropdown__list a:hover {
    color: var(--btn);
}

.header-live__button-auth {
    margin-left: auto;
}

.header-live__button-login {
    margin-right: 16px;
}

.header-live__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-live__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-live__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-live__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-live__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-live__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-LIVE --------------*/

.hero-live__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-live__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-live__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-live__info span {
    display: block;
    font-weight: 400;
}

.hero-live__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-live__button {
    margin-top: 20px;
}

/**-------------- GAMES-LIVE --------------*/

.games-live__content {
    background: transparent;
    overflow: visible;
    border: none;
    padding: 0;
}

.games-live-panel__list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.games-live-panel__list li {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    width: 295px;
}

.games-live-panel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.games-live-panel__hover {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000000CC;
    border: 2px solid var(--border);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}


.games-live-panel__list li:hover .games-live-panel__hover {
    opacity: 1;
    visibility: visible;
}

.games-live__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.games-live__button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url("../img/demo.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin: 14px 14px 14px 18px;

}

/**-------------- NAVIGATION-LIVE --------------*/

.navigation-live__content {
    overflow: hidden;
    padding: 0;
}

.navigation-live__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-live__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-live__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-live__general.active button::after {
    transform: rotate(180deg);
}

.navigation-live__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-live__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-live__general.active+.navigation-live__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-live__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-live__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-LIVE --------------*/

.faq-live__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-live__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-live__list {
    counter-reset: faq;
}

.faq-live__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-live__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-live__list li.active .faq-live__question::after {
    transform: rotate(180deg);
}

.faq-live__list li.active .faq-live__question {
    border-radius: 6px 6px 0 0;
}

.faq-live__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-live-answer__inner {
    padding: 13px 20px;
}

.faq-live__list li.active .faq-live__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-LIVE --------------*/

.footer-live__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-live__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-live__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-live__navigation a:hover {
    color: var(--btn);
}

.footer-live__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-live__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-live__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- SUPPORT PAGE --------------*/

.main-support {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-SUPPORT --------------*/

.header-support {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-support__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-support__logo img {
    max-width: 130px;
}

.header-support__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-support-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-support-menu__list:hover {
    background-color: var(--header);
}

.header-support-menu__list a:hover {
    color: var(--btn);
}

.header-support-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-support-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-support-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-support-menu__list>ul.header-support__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-support-menu__list>ul.header-support__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-support-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-support-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-support-dropdown__list a:hover {
    color: var(--btn);
}

.header-support__button-auth {
    margin-left: auto;
}

.header-support__button-login {
    margin-right: 16px;
}

.header-support__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-support__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-support__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-support__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-support__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-support__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-SUPPORT --------------*/

.hero-support__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-support__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-support__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-support__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-support__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-support__button {
    margin-top: 20px;
}

/**-------------- NAVIGATION-SUPPORT --------------*/

.navigation-support__content {
    overflow: hidden;
    padding: 0;
}

.navigation-support__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-support__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-support__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-support__general.active button::after {
    transform: rotate(180deg);
}

.navigation-support__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-support__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-support__general.active+.navigation-support__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-support__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-support__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-SUPPORT --------------*/

.faq-support__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-support__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-support__list {
    counter-reset: faq;
}

.faq-support__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-support__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-support__list li.active .faq-support__question::after {
    transform: rotate(180deg);
}

.faq-support__list li.active .faq-support__question {
    border-radius: 6px 6px 0 0;
}

.faq-support__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-support-answer__inner {
    padding: 13px 20px;
}

.faq-support__list li.active .faq-support__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-SUPPORT --------------*/

.footer-support__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-support__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-support__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-support__navigation a:hover {
    color: var(--btn);
}

.footer-support__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-support__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-support__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- LOGIN PAGE --------------*/

.main-login {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-LOGIN --------------*/

.header-login {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-login__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-login__logo img {
    max-width: 130px;
}

.header-login__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-login-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-login-menu__list:hover {
    background-color: var(--header);
}

.header-login-menu__list a:hover {
    color: var(--btn);
}

.header-login-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-login-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-login-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-login-menu__list>ul.header-login__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-login-menu__list>ul.header-login__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-login-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-login-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-login-dropdown__list a:hover {
    color: var(--btn);
}

.header-login__button-auth {
    margin-left: auto;
}

.header-login__button-login {
    margin-right: 16px;
}

.header-login__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-login__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-login__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-login__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-login__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-login__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-LOGIN --------------*/

.hero-login__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-login__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-login__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-login__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-login__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-login__button {
    margin-top: 20px;
}

/**-------------- NAVIGATION-LOGIN --------------*/

.navigation-login__content {
    overflow: hidden;
    padding: 0;
}

.navigation-login__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-login__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-login__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-login__general.active button::after {
    transform: rotate(180deg);
}

.navigation-login__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-login__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-login__general.active+.navigation-login__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-login__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-login__menu li a:hover {
    font-weight: 700;
}

/**-------------- FAQ-LOGIN --------------*/

.faq-login__list li {
    overflow: hidden;
    border-radius: 6px;
    margin-top: 20px;
}

.faq-login__question {
    counter-increment: faq;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-wrap: wrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(90deg, #126871 0%, #126871 100%);
    box-shadow: 0px 4px 4px 0px #0A2B2E;
    padding: 13px 20px;
    margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}

.faq-login__list {
    counter-reset: faq;
}

.faq-login__question::before {
    content: counter(faq) ".";
    color: var(--text);
    flex-shrink: 0;
    margin-right: 20px;
}

.faq-login__question::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    flex-shrink: 0;
    background: url("../img/arrow-down.svg") center no-repeat;
    transition: transform 0.4s ease;
}

.faq-login__list li.active .faq-login__question::after {
    transform: rotate(180deg);
}

.faq-login__list li.active .faq-login__question {
    border-radius: 6px 6px 0 0;
}

.faq-login__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: transparent;
    transition:
        height 0.5s ease,
        opacity 0.3s ease;
}

.faq-login-answer__inner {
    padding: 13px 20px;
}

.faq-login__list li.active .faq-login__answer {
    border-radius: 0 0 6px 6px;
    opacity: 1;
}

/**-------------- FOOTER-LOGIN --------------*/

.footer-login__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-login__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-login__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-login__navigation a:hover {
    color: var(--btn);
}

.footer-login__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-login__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-login__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- RESPONSIBLE GAMING PAGE --------------*/

.main-gaming {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-GAMING --------------*/

.header-gaming {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-gaming__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-gaming__logo img {
    max-width: 130px;
}

.header-gaming__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-gaming-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-gaming-menu__list:hover {
    background-color: var(--header);
}

.header-gaming-menu__list a:hover {
    color: var(--btn);
}

.header-gaming-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-gaming-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-gaming-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-gaming-menu__list>ul.header-gaming__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-gaming-menu__list>ul.header-gaming__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-gaming-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-gaming-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-gaming-dropdown__list a:hover {
    color: var(--btn);
}

.header-gaming__button-auth {
    margin-left: auto;
}

.header-gaming__button-login {
    margin-right: 16px;
}

.header-gaming__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-gaming__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-gaming__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-gaming__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-gaming__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-gaming__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-GAMING --------------*/

.hero-gaming__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-gaming__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-gaming__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-gaming__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-gaming__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-gaming__button {
    margin-top: 20px;
}

/**-------------- NAVIGATION-GAMING --------------*/

.navigation-gaming__content {
    overflow: hidden;
    padding: 0;
}

.navigation-gaming__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-gaming__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-gaming__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-gaming__general.active button::after {
    transform: rotate(180deg);
}

.navigation-gaming__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-gaming__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-gaming__general.active+.navigation-gaming__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-gaming__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-gaming__menu li a:hover {
    font-weight: 700;
}

/**-------------- FOOTER-GAMING --------------*/

.footer-gaming__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-gaming__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-gaming__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-gaming__navigation a:hover {
    color: var(--btn);
}

.footer-gaming__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-gaming__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-gaming__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- PRIVACY POLICY PAGE --------------*/

.main-privacy {
    width: 100%;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0 auto;
}

/**-------------- HEADER-PRIVACY --------------*/

.header-privacy {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

.header-privacy__content {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    height: 75px;
    background-color: var(--header);
    border-radius: 0;
    border: none;
    padding: 15px 30px;
}

.header-privacy__logo img {
    max-width: 130px;
}

.header-privacy__menu ul {
    background-color: var(--bg-menu);
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 129px;
}

.header-privacy-menu__list {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.header-privacy-menu__list:hover {
    background-color: var(--header);
}

.header-privacy-menu__list a:hover {
    color: var(--btn);
}

.header-privacy-dropdown__link {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--bg-content);
    padding: 10px 28px;
}

.header-privacy-dropdown__toggle {
    width: 16px;
    height: 16px;
    background: url("../img/arrow-down.svg") no-repeat center / contain;
    vertical-align: middle;
    transition: transform 0.3s;
}

.header-privacy-dropdown__toggle.active {
    transform: rotate(180deg);
}

.header-privacy-menu__list>ul.header-privacy__dropdown {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 161px;
    white-space: nowrap;
    background-color: var(--bg-menu);
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.header-privacy-menu__list>ul.header-privacy__dropdown.show {
    display: flex;
    border-radius: 0 0 12px 12px;
    opacity: 1;
    transform: translateY(0);
}

.header-privacy-dropdown__list {
    display: block;
    padding: 8px 16px;
}

.header-privacy-dropdown__list a {
    color: var(--bg-content);
    transition: color 0.2s;
}

.header-privacy-dropdown__list a:hover {
    color: var(--btn);
}

.header-privacy__button-auth {
    margin-left: auto;
}

.header-privacy__button-login {
    margin-right: 16px;
}

.header-privacy__watch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24px;
    margin-right: 24px;
}

.header-privacy__watch::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("../img/watch.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
}

.header-privacy__watch span {
    font-size: 13px;
    line-height: 13px;
}

.header-privacy__lang {
    display: flex;
    align-items: center;
    background-color: transparent;
}

.header-privacy__lang img {
    display: block;
    width: 24px;
    height: 24px;
}

.header-privacy__lang span {
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-left: 8px;
}

/**-------------- HERO-PRIVACY --------------*/

.hero-privacy__content {
    border-radius: 0;
    border: none;
    padding: 86px 0 85px 164px;
    margin-top: 75px;
    margin-bottom: 20px;
}

.hero-privacy__image {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero-privacy__info {
    position: relative;
    max-width: 516px;
    background-color: transparent;
    padding-left: 20px;
    z-index: 1;
}

.hero-privacy__info span {
    display: block;
    font-weight: 400;
    color: var(--bg-content);
}

.hero-privacy__title {
    margin-top: 20px;
    margin-bottom: 10px;
}

.hero-privacy__button {
    margin-top: 20px;
}

/**-------------- NAVIGATION-PRIVACY --------------*/

.navigation-privacy__content {
    overflow: hidden;
    padding: 0;
}

.navigation-privacy__general {
    background-color: transparent;
    border: 2px solid var(--header);
    border-radius: 12px;
    padding: 12px 15px;
}

.navigation-privacy__general button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    text-wrap: wrap;
    text-align: left;
    color: var(--text);
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.navigation-privacy__general button::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
}

.navigation-privacy__general.active button::after {
    transform: rotate(180deg);
}

.navigation-privacy__general.active {
    background-color: transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.navigation-privacy__menu {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.navigation-privacy__general.active+.navigation-privacy__menu {
    max-height: 500px;
    background-color: transparent;
    opacity: 1;
}

.navigation-privacy__menu li a {
    display: block;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid #093B4033;
    margin-bottom: 8px;
    transition: transform 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

.navigation-privacy__menu li a:hover {
    font-weight: 700;
}

/**-------------- FOOTER-PRIVACY --------------*/

.footer-privacy__content {
    max-width: 100%;
    background: var(--text);
    border: none;
    border-radius: 0;
    margin-top: 20px;
}

.footer-privacy__navigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.footer-privacy__navigation li a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.5s;
}

.footer-privacy__navigation a:hover {
    color: var(--btn);
}

.footer-privacy__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-privacy__bottom {
    display: flex;
    justify-content: center;
    max-width: 996px;
    margin: 32px auto 0;
}

.footer-privacy__details {
    color: var(--header);
    text-align: center;
    margin-right: 82px;
}

/**-------------- BURGER BUTTON--------------*/

.burger__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--btn);
    border-radius: 8px;
    z-index: 1001;
    order: 99;
    cursor: pointer;
  }
  
  .burger__button span {
    position: absolute;
    width: 22px;
    height: 3px;
    background-color: var(--btn);
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  .burger__button span:nth-child(1) {
    top: 50%;
    transform: translateY(-10px);
  }
  
  .burger__button span:nth-child(2) {
    top: 50%;
    transform: translateY(0);
  }
  
  .burger__button span:nth-child(3) {
    top: 50%;
    transform: translateY(10px);
  }
 
  .burger-toggle:checked + .burger__button span:nth-child(1) {
    transform: translateY(0) rotate(45deg);
  }
  
  .burger-toggle:checked + .burger__button span:nth-child(2) {
    opacity: 0;
  }
  
  .burger-toggle:checked + .burger__button span:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
  }