html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
button {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

html {
    scroll-behavior: smooth;
}


body {}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

img {
    display: block;
}


ul,
ol {
    list-style-type: none;
}

h2,
h3,
h4 {
    color: var(--color-white);
}

h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

h2 {
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    vertical-align: middle;
    text-transform: uppercase;
}

h3 {
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    vertical-align: middle;
    text-transform: uppercase;
}

h4 {
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
}

p {
    font-size: 16px;
    line-height: 1.6;
    vertical-align: middle;
}

section>*+* {
    margin-top: 20px;
}

.summary__content>*+* {
    margin-top: 20px;
}

nav ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

:root {

    --color-dark: #0D1016;
    --color-yellow: #00CFA6;
    --color-white: #ffffff;
    --color-black-text: #121212;
    --color-bg: #6F6F6F;
    --color-btn-bg: #3B3B3B;
    --transition-duration: 0.3s;
    --box-shadow: 0 0 200px rgba(254, 205, 14, 0.2);
    --bg-blur: #FECD0E1F;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
    color: black;
}



body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-white);
    background: #0D1016;
    overflow-x: clip;
}


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

/* Ограничитель ширины всей страницы */
.wrapper {
    padding-left: max(20px, calc(50% - 800px));
    padding-right: max(20px, calc(50% - 800px));
    position: relative;
    z-index: 0;
    overflow: visible;
}

/* Фиксированный хедер */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-dark);
    color: white;
    /* display: flex; */
    align-items: center;
    z-index: 1000;
    padding: 0 20px;
}

/* Отступ под хедером */
.hero {
    margin-top: 70px;
    margin-bottom: 20px;
}

.main-layout {
    display: flex;
}

.sidebar {
    width: 178px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    height: fit-content;
    background: var(--color-dark);
    border-radius: 8px;
    margin-bottom: 20px;
    z-index: 1;

}

.aside__top ul {

    padding: 0 16px;


}

.aside__top ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
	padding:8px;

}

.aside__top ul li img {
    width: 24px;
    height: 24px;
}

.aside__top ul li span {
    color: #80858F;
    font-size: 14px;
    transition: var(--transition-duration);
}

.aside__top ul li span:hover {
    color: var(--color-white);
    transition: var(--transition-duration);
}

/* Кнопка с заголовком */
.sidebar__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;
    color: #80858F;
    cursor: pointer;
    padding: 11px 16px;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    line-height: 18px;
}

/* Стрелка */
.arrow__nav {
    transition: transform 0.3s ease;
    width: 12px;
}

.aside__wrap {
    position: relative;
    overflow: visible !important;
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
}

/* Список ссылок */
.sidebar__links-list {
    overflow: hidden;
    max-height: 1000px;
}

.sidebar__links-list>li {
	margin-bottom:8px;

}

.sidebar__links-list>li:first-of-type {
    margin-top: 12px;

}


.sidebar__links-list a {
    font-size: 14px;
    font-weight: 400;
    color: #80858F;
    transition: var(--transition-duration);
}

.sidebar__links-list a:hover {
    color: #ffffff;
    transition: var(--transition-duration);
}



/* Только список — скрывается */
.sidebar__section.collapsed .sidebar__links-list {
    max-height: 0;
}

/* Поворачиваем стрелку */
.sidebar__section.collapsed .arrow__nav {
    transform: rotate(-180deg);
}

/* Контент не трогаем! */
.content {
    flex: 1;
}

.content {
    margin-left: 198px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: max(0px, calc(50% - 800px));
    padding-right: max(0px, calc(50% - 800px));
    height: 100%;
    gap: 20px;
}

/* ===== Бургер ===== */
.burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Анимация крестика */
.burger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Навигация */

.nav-links {
    display: flex;
    gap: 24px;
}

.nav-links div {
    display: flex;
    gap: 4px;
    align-items: center;
}

.nav-links a {
    color: #80858F;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    transition: var(--transition-duration);
}

.nav-links a:hover {
    color: var(--color-white);
    transition: var(--transition-duration);
}

/* Кнопки */
.header-buttons .btn {
    padding: 4px 12px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    line-height: 24px;
    font-size: 16px;
    color: var(--color-white);
	text-align:center;
}

.header-buttons .register {
    background: #FF2400;
    min-width: 135px;
    padding: 8px;
    transition-duration: var(--transition-duration);
}

.header-buttons .register:hover {
    background: #FFC329;
    transition-duration: var(--transition-duration);
}

.header-buttons .login {
    background: transparent;
    color: var(--color-white);
    transition: var(--transition-duration);
    border: 1px solid #FF2400;
    min-width: 92px;
    padding: 8px;
    border-radius: 4px;
}

.header-buttons .login:hover {
    background: #FFC329;
    transition: var(--transition-duration);
}

/* Часы */
.clock {
    font-size: 12px;
    padding: 9px;
    border-left: 1px solid var(--color-btn-bg);
    border-right: 1px solid var(--color-btn-bg);
    line-height: 1;
}

/* Языки */
.language-selector {
    position: relative;
    padding: 4px;
    border-radius: 8px;

}

.language-selector:hover {
    background: var(--color-btn-bg);
    border-radius: 8px;
    transition: var(--transition-duration);
}

.language-selector.open {
    background: var(--color-white);
    padding: 4px;
    border-radius: 8px;
}



.lang-button {
    position: relative;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-white);
    cursor: pointer;
    background: none;
    border: none;
    transition: var(--transition-duration);
}


.language-selector.open .lang-button {
    color: var(--color-black-text);
    /* filter: brightness(0) invert(0); */
}

.lang-button .arrow {
    width: 10px;
    height: 10px;
    transition: var(--transition-duration);
}


.language-selector.open .lang-button .arrow {
    transform: rotate(180deg);
    filter: brightness(0) invert(0);
}



.lang-list {
    position: absolute;
    top: 32px;
    right: -11px;
    background: white;
    color: black;
    list-style: none;
    margin: 0;
    border-radius: 8px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.language-selector.open .lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
	min-width:150px;
}

.language-selector.open .lang-button::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 50%;
    left: 50%;
    width: 0;
    color: #D8D8D8;
    transform: translateX(-50%);
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    z-index: 101;
    filter: none;
}

.lang-list li a {
    display: flex;
    align-items: center;
    padding: 8px;
    font-size: 12px;
    text-decoration: none;
    color: black;
    gap: 8px;
    border-bottom: 1px solid #E8E8E8;
}

.lang-list li:last-child a {
    border-bottom: none;
}

.lang-list li a img {
    width: 21px;
    height: 21px;
	border-radius: 50%;
}

.lang-list li a:hover {
    background: #E8E8E8;
}


.logo {
    display: block;
    width: 154px;
    height: 58px;
    padding-left: 24px;
}


.logo img {
    display: block;
    width: 154px;
    height: 58px;
}

.logo__block {
    display: flex;
    align-items: center;
    gap: 50px;
}


.btn__block {
    display: flex;
    gap: 16px;
    align-items: center;
}

.list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}


.list li {
    position: relative;
    color: var(--color-white);
    padding-left: 34px;
    margin-bottom: 12px;

}

.list li:last-of-type {

    margin-bottom: 0;

}



.list li::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: var(--color-yellow);
    border-radius: 100%;
    flex-shrink: 0;
    top: 9px;
    left: 16px;
}

.btn__block>a {
    padding: 6px 7px;
    background: var(--color-btn-bg);
    border-radius: 8px;
    transition: var(--transition-duration);

}

.btn__block>a:hover {
    padding: 6px 7px;
    background: #6E6E6E;
    transition: var(--transition-duration);

}

.header-buttons {
    display: flex;
    gap: 8px;
}

.hero {
    /* position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    min-height: 450px;
    padding: 65px 0;
    display: flex; */
    position: relative;
    overflow: hidden;
    min-height: 480px;
    padding: 30px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 12px;
}

.hero__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero__background img {
    width: 100%;
    display: block;
    overflow: hidden;
    max-width: none;
    max-height: none;
    height: 100%;
}

.hero__content {

    width: 50%;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    align-items: start;
    /* padding: 20px; пока убрать, когда добавиться фон для текст, то добавить */
    color: white;
    z-index: 2;
}



.review {
    position: relative;
    z-index: 0;
}

.all__button {
    display: block;
    text-align: center;
    max-width: 151px;
    min-width: 113px;
    margin-top: 20px;
    padding: 8px;
    background: #FF2400;
    color: var(--color-white);
    border-radius: 6px;
    font-size: 16px;
    line-height: 24px;
    transition: var(--transition-duration);

}

.all__button:hover {
    transition: var(--transition-duration);
    background: #ffd66d;
    ;
}

.rating {
    display: flex;
    gap: 12px;
}

.rating p {
    color: var(--color-yellow);
    font-weight: 700;
    line-height: 1;
}

.content section {

    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--color-bg);
    overflow: visible;
	
}

.content section:first-of-type {
    background:none;
    border: none;

}

html {
    overflow-x: clip;
}


section .table-wrap {
    position: relative;
    background: #13171F;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--color-bg);
    ;
}

section table {
    position: relative;
    min-width: 800px;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

section table::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 12px;
    pointer-events: none;
}

section table th,
section table td {
    box-sizing: border-box;
    padding: 16px;
    vertical-align: top;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

section table td {
    padding: 20px 16px;
    color: var(--color-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    /* 22.4px */
}



section table tbody tr {
    background-color: var(--color-light-blue);
    border-bottom: 1px solid var(--color-bg);
}

section table tbody tr:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}

section table th {
    color: var(--color-black-text);
    background: var(--color-yellow);
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
    text-transform: uppercase;
}

.table-wrap::-webkit-scrollbar {
    height: 8px;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.pros__cons {
    display: flex;
    gap: 16px;
}

.review table thead tr>th:nth-child(1),
.review table tbody tr>td:nth-child(1) {
    width: 30%;
    min-width: 260px;
}

.review table thead tr>th:nth-child(2),
.review table tbody tr>td:nth-child(2) {
    width: 70%;
    min-width: 500px;
}

.casino__slots table thead tr>th:nth-child(1),
.casino__slots table tbody tr>td:nth-child(1),
.casino__slots table thead tr>th:nth-child(2),
.casino__slots table tbody tr>td:nth-child(2),
.casino__slots table thead tr>th:nth-child(3),
.casino__slots table tbody tr>td:nth-child(3),
.casino__slots table thead tr>th:nth-child(4),
.casino__slots table tbody tr>td:nth-child(4),
.casino__slots table thead tr>th:nth-child(5),
.casino__slots table tbody tr>td:nth-child(5) {
    width: 20%;
    min-width: 160px;
}

.casino__slots:last-of-type table thead tr>th:nth-child(1),
.casino__slots:last-of-type table tbody tr>td:nth-child(1),
.casino__slots:last-of-type table thead tr>th:nth-child(2),
.casino__slots:last-of-type table tbody tr>td:nth-child(2),
.casino__slots:last-of-typetable thead tr>th:nth-child(3) {
    width: 33.3333%;
    min-width: 266px;
}



.regulation__double__pros,
.regulation__double__cons {
    position: relative;
    width: 100%;
    padding: 16px;
    background: #13171F;
    border-radius: 12px;
    z-index: 2;
}

section.ratings table td:nth-of-type(2n) {
    display: flex;
}

section.ratings table td img {
    width: 26px;
    height: 26px;
}



.regulation__double__pros::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 12px;
    padding: 1px;
    /* толщина рамки */
    background: linear-gradient(to right,
            rgba(204, 204, 204, 0.3),
            rgba(46, 46, 46, 0.2));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.regulation__double__cons::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 12px;
    padding: 1px;
    /* толщина рамки */
    background: linear-gradient(to right,
            rgba(204, 204, 204, 0.3),
            rgba(46, 46, 46, 0.2));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.regulation__double__pros>div,
.regulation__double__cons>div {
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right,
            rgba(0, 207, 166, 0) 0%,
            rgba(0, 207, 166, 0.35) 28%,
            rgba(0, 207, 166, 0.7) 53%,
            rgba(0, 207, 166, 0.35) 74%,
            rgba(0, 207, 166, 0) 100%);
    border-image-slice: 1;

}

.regulation__double__pros>div>span,
.regulation__double__cons>div>span {
    display: flex;
    margin-right: 16px;
    width: 33px;
    height: 0px;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12.5px;
    border-radius: 8px;
    background: var(--color-black-text);
}

.regulation__double__pros>div>h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-yellow);
    line-height: 1;
    text-transform: uppercase;
}

.regulation__double__cons>div>h3 {
    font-size: 20px;
    font-weight: 700;
    color: #FF2400;
    line-height: 1;
    text-transform: uppercase;
}

.regulation__double__pros>ul,
.regulation__double__cons>ul {
    padding: 0 0 0 16px;
}

.regulation__double__pros>ul>li,
.regulation__double__cons>ul>li {
    position: relative;
    display: flex;

}

.regulation__double__pros>ul>li>p,
.regulation__double__cons>ul>li>p {
    padding-left: 18px;
    margin: 0;
}

.regulation__double__pros>ul>li:not(:last-child),
.regulation__double__cons>ul>li:not(:last-child) {
    margin-bottom: 16px;
}

.regulation__double__pros>ul>li>::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: var(--color-yellow);
    border-radius: 100%;
    flex-shrink: 0;
    top: 9px;
    left: 0;
}

.regulation__double__cons>ul>li>::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #FF2400;
    border-radius: 100%;
    flex-shrink: 0;
    top: 9px;
    left: 0;
}


tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

/* Правый нижний угол */
tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.bonus__section {
    position: relative;
    overflow: hidden;
    min-height: 358px;
    padding: 30px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 12px;
}

.bonus__baner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.bonus__baner img {

    width: 100%;
    object-fit: cover;
    display: block;
    overflow: hidden;
    max-width: none;
    max-height: none;
    height: 100%;
}

.bonus__text {
    width: 54%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 10px 10px 10px 120px;
    color: white;
    z-index: 2;
    overflow-wrap: anywhere;
}

.content section.bonus__section {
    border: none;
	background:none;


}

.content section.hero .hero__content {
    margin-bottom: 0;
}


.content section.bonus__section .bonus__text {
    margin-bottom: 0;
}

.bonus__section>.bonus__text p {
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

.restr {
    position: relative;
}

.restr ol {
    position: relative;
    border-radius: 16px;
    padding: 16px 24px;

    /* фон — сама картинка */
    background:
        url("../img/text+row.png"),
        #0b0b0b;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* цветной градиент поверх картинки, без блюра */
.restr ol::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 85% center,
            /* смещаем вправо (~85%) */
            rgba(208, 101, 250, 46%) 0%,
            /* яркий центр справа */
            rgba(208, 101, 250, 0.4) 20%,
            /* плавный переход */
            rgba(208, 101, 250, 0) 60%
            /* прозрачность к середине */
        );

    z-index: 1;
    pointer-events: none;
}

.restr2 {
    position: relative;
}

.restr2 ol {
    position: relative;
    border-radius: 16px;
    padding: 16px 24px;

    /* фон — сама картинка */
    background:
        url("../img/text+row.png"),
        #0b0b0b;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* цветной градиент поверх картинки, без блюра */
.restr2 ol::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 85% center,
            /* смещаем вправо (~85%) */
            rgba(3, 200, 141, 0.72) 0%,
            /* яркий центр справа */
            rgba(3, 200, 141, 0.4) 20%,
            /* плавный переход */
            rgba(3, 200, 141, 0) 60%
            /* прозрачность к середине */
        );


    z-index: 1;
    pointer-events: none;
}

.restr2 .restr__img {
    position: absolute;
    top: -40px;
    right: 100px;
    height: 340px;
    z-index: 20;
    pointer-events: none;
}

/* контент поверх */
.restr ol li,
.restr ol p,
.restr ol h4 {
    position: relative;
    color: #fff;
}


/* контент списка */
.restr ol li,
.restr ol p,
.restr ol h4 {
    position: relative;
    z-index: 21;
    color: #fff;
}


.restr .restr__img {
    position: absolute;
    top: -35px;
    right: 25px;
    height: 420px;
    z-index: 20;
    pointer-events: none;
}

ol {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
}


ol li {
    position: relative;
    color: var(--color-white);
    padding: 18px 0;
    padding-left: 42px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right,
            rgba(0, 207, 166, 1) 0%,
            rgba(0, 207, 166, 0) 100%);
    border-image-slice: 1;
   z-index:21;
    line-height: 1.6;
}


ol li::before {
    content: counter(step);
    counter-increment: step;
    position: absolute;
    left: 0;
    top: 15px;
    width: 30px;
    height: 30px;
    background-color: var(--color-yellow);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    line-height: 1;
}

.restr ol li p {
    font-weight: 700;
}



.regi__img {
    content: "";
    position: absolute;
    top: -6%;
    right: -42%;
    z-index: -1;

}


.img__text {
    display: flex;
    gap: 20px;
}


.img__text ul {
   margin-bottom:20px;
}


.img__text img {
    width: 50%;
    border-radius: 16px;
	object-fit: cover;
}

.live_betting .img__text {
    flex-direction: row-reverse;
}

.support .img__text {
    flex-direction: row-reverse;
}

.img__text h2 {
    margin-bottom: 20px;
}

.app_pin-up .img__text {
    flex-direction: row-reverse;
}

.ul__app h3 {
    font-size: 20px;
}


.app_pin-up .img__text p {
    margin-bottom: 20px;
}

.app_pin-up .ul__app {
    margin-bottom: 10px;
    display: flex;
    gap: 16px;
}

.app_pin-up .ul__app ol {
    width: 67%;
}

.app_pin-up .ul__app div {
    width: 50%;
    padding: 16px;
    position: relative;
    z-index: 1;
    border-radius: 16px;
    background:
        radial-gradient(circle at 85% center,
            rgb(3 200 141 / 55%) 0%,
            rgb(3 200 141 / 45%) 20%,
            rgba(3, 200, 141, 0) 70%),
        #0b0b0b;
}

/* — зелёная рамка — */
.app_pin-up .ul__app div::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(#0b0b0b, #0b0b0b) padding-box,
        linear-gradient(to right,
            rgba(3, 200, 141, 100%) 0%,
            rgba(3, 200, 141, 0.35) 25%,
            rgba(3, 200, 141, 0.7) 50%,
            rgba(3, 200, 141, 0.35) 75%,
            rgba(3, 200, 141, 0) 100%) border-box;

    background-clip: content-box, border-box;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* === 🎨 Последний элемент — фиолетовый фон и бордер === */
.app_pin-up .ul__app div:last-child {
    background:
        radial-gradient(circle at 85% center,
            rgb(208 101 250 / 55%) 0%,
            rgb(208 101 250 / 35%) 45%,
            rgba(208, 101, 250, 0) 80%),
        #0b0b0b;
}

.app_pin-up .ul__app div:last-child::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(#0b0b0b, #0b0b0b) padding-box,
        linear-gradient(to right,
            rgba(208, 101, 250, 100%) 0%,
            rgba(208, 101, 250, 0.35) 25%,
            rgba(208, 101, 250, 0.7) 50%,
            rgba(208, 101, 250, 0.35) 75%,
            rgba(208, 101, 250, 0) 100%) border-box;

    background-clip: content-box, border-box;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}



.app_pin-up div img {
    position: absolute;
    top: -55px;
    right: 18px;
    height: 467px;
    z-index: 20;
    pointer-events: none;
    border-radius: 27px;
}


.ul__app {
    margin-bottom: 10px;
    display: flex;
    gap: 16px;
}

.ul__app ol {
    width: 67%;
}

.ul__app div {
    width: 50%;
    padding: 24px;
    position: relative;
    z-index: 1;
    border-radius: 16px;
    background:
        radial-gradient(circle at 85% center,
            rgb(3 200 141 / 55%) 0%,
            rgb(3 200 141 / 45%) 20%,
            rgba(3, 200, 141, 0) 70%),
        #0b0b0b;
}

.ul__app div {
    background:
        radial-gradient(circle at 85% center,
            rgb(96, 15, 128) 0%,
            rgba(154, 55, 193, 0.35) 45%,
            rgba(208, 101, 250, 0) 80%),
        #0b0b0b;
}

.ul__app div::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(#0b0b0b, #0b0b0b) padding-box,
        linear-gradient(to right,
            rgba(208, 101, 250, 100%) 0%,
            rgba(208, 101, 250, 0.35) 25%,
            rgba(208, 101, 250, 0.7) 50%,
            rgba(208, 101, 250, 0.35) 75%,
            rgba(208, 101, 250, 0) 100%) border-box;

    background-clip: content-box, border-box;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}


.bon__prom .ul__app:nth-of-type(2n) div {
    width: 50%;
    padding: 24px;
    position: relative;
    z-index: 1;
    border-radius: 16px;
    background:
        radial-gradient(circle at 85% center,
            rgb(3 200 141 / 55%) 0%,
            rgb(3 200 141 / 45%) 20%,
            rgba(3, 200, 141, 0) 70%),
        #0b0b0b;
}

.bon__prom .ul__app:nth-of-type(2n) div::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(#0b0b0b, #0b0b0b) padding-box,
        linear-gradient(to right,
            rgba(3, 200, 141, 100%) 0%,
            rgba(3, 200, 141, 0.35) 25%,
            rgba(3, 200, 141, 0.7) 50%,
            rgba(3, 200, 141, 0.35) 75%,
            rgba(3, 200, 141, 0) 100%) border-box;

    background-clip: content-box, border-box;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}


.bon__prom .ul__app div img {
    position: absolute;
    top: -32px;
    right: -18px;
    height: 298px;
    z-index: 20;
    pointer-events: none;
    border-radius: 27px;
}

.bon__prom .ul__app:nth-of-type(2n) div img {
    position: absolute;
    top: -7px;
    right: -18px;
    height: 233px;
    z-index: 20;
    pointer-events: none;
    border-radius: 27px;
}

.bon__prom .ul__app>div>span {
    background: linear-gradient(180deg, #FFC700 0%, #FF8A00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-weight: bold;
    font-size: 48px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
    line-height: 1.1;
	position:relative;
	z-index:21;
}

.bon__prom .ul__app>div>p {
    text-transform: uppercase;
    font-size: 20px;
    color: var(--color-white);
    margin-bottom: 8px;
    display: block;
    line-height: 1.1;
		position:relative;
	z-index:21;
}

.bon__prom .ul__app>div:last-of-type>p:nth-of-type(2n) {
    text-transform: uppercase;
    font-size: 20px;
    background: linear-gradient(90deg, #FFC700 0%, #FF8A00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ul__app.ul__dep>div {
    background:
        radial-gradient(circle at 85% center,
            rgb(208 101 250 / 55%) 0%,
            rgb(208 101 250 / 35%) 45%,
            rgba(208, 101, 250, 0) 80%),
        #0b0b0b;
}

.ul__app.ul__dep div::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(#0b0b0b, #0b0b0b) padding-box,
        linear-gradient(to right,
            rgba(208, 101, 250, 100%) 0%,
            rgba(208, 101, 250, 0.35) 25%,
            rgba(208, 101, 250, 0.7) 50%,
            rgba(208, 101, 250, 0.35) 75%,
            rgba(208, 101, 250, 0) 100%) border-box;

    background-clip: content-box, border-box;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.ul__app.ul__dep>div>p::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    background-image: url("../img/coin6.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.ul__app.ul__dep>div>p {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    font-weight: 700;
    align-items: center;
    margin-bottom: 16px;
}

.dep {
    display: flex;
    align-items: center;
    gap: 16px;
}


.bon__prom .ul__app div .dep img {
    width: 20px;
    height: 20px;
    position: relative;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: #FF2400;
    padding: 5px;
    transform: rotate(270deg);
}


.ul__app.ul__dep>div>div>span {
    background: linear-gradient(180deg, #FFC700 0%, #FF8A00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
    display: block;
    line-height: 1.1;
}

.ul__app.ul__dep>div>div {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
}

.ul__app.ul__dep>div>div::before {
    background: none;
}

.vip__ul {
    position: relative;
    padding: 16px 24px;

    /* фон — сама картинка */
    background:
        url("../img/text+row.png"),
        #0b0b0b;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 16px;
}

.vip__ul ul,
.vip__ul p {
    margin-bottom: 20px;
    width: 67%;
	z-index: 21;
    position: relative;
}

.deposits .vip__ul ul {
    margin-bottom: 0;
}

.vip__ul p {
    margin-bottom: 0px;
}


/* цветной градиент поверх картинки, без блюра */
.vip__ul::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border-radius: inherit;
    background: radial-gradient(circle at 85% center,
            /* смещаем вправо (~85%) */
            rgba(3, 200, 141, 0.72) 0%,
            /* яркий центр справа */
            rgba(3, 200, 141, 0.4) 20%,
            /* плавный переход */
            rgba(3, 200, 141, 0) 60%
            /* прозрачность к середине */
        );


    z-index: 1;
    pointer-events: none;
}

.vip__ul img {
    position: absolute;
    bottom: 0;
    right: 164px;
    height: 507px;
    z-index: 20;
    pointer-events: none;
}

.deposits .vip__ul img {
    position: absolute;
    bottom: 0;
    right: 164px;
    height: 476px;
    z-index: 20;
    pointer-events: none;
}

.tournaments ol {
    position: relative;
    padding: 16px 24px;

    /* фон — сама картинка */
    background:
        url("../img/text+row.png"),
        #0b0b0b;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 16px;
}


/* цветной градиент поверх картинки, без блюра */
.tournaments ol::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border-radius: inherit;
    background: radial-gradient(circle at 85% center,
            /* смещаем вправо (~85%) */
            rgba(3, 200, 141, 0.72) 0%,
            /* яркий центр справа */
            rgba(3, 200, 141, 0.4) 20%,
            /* плавный переход */
            rgba(3, 200, 141, 0) 60%
            /* прозрачность к середине */
        );


    z-index: 1;
    pointer-events: none;
}

.tournaments ol img {
    position: absolute;
    bottom: 0;
    right: 164px;
    height: 507px;
    z-index: 20;
    pointer-events: none;
}

/* контент поверх */
.tournaments ol li,
.tournaments ol p,
.tournaments ol h4 {
    position: relative;
    z-index: 2;
    color: #fff;
}


/* контент списка */
.tournaments ol li,
.tournaments ol p,
.tournaments ol h4 {
    position: relative;
    z-index: 20;
    color: #fff;
}

.tournaments ol img {
    position: absolute;
    top: -37px;
    right: 140px;
    height: 330px;
    z-index: 20;
    pointer-events: none;
}

.vip__ul ul li {
    position: relative;
    color: var(--color-white);
    padding: 16px 0 23px 0;
    padding-left: 42px;
    font-weight: 700;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right,
            rgba(0, 207, 166, 0) 0%,
            /* полностью прозрачный слева */
            rgba(0, 207, 166, 0.5) 35%,
            /* появляется цвет */
            rgba(0, 207, 166, 1) 50%,
            /* максимум в центре */
            rgba(0, 207, 166, 0.5) 65%,
            /* снова светлее */
            rgba(0, 207, 166, 0) 100%
            /* исчезает справа */
        );
    border-image-slice: 1;

    line-height: 1.4;
}


.vip__ul ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 26px;
    height: 30px;
    background-image: url(../img/pin.png);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    line-height: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.result .img__text p {
    margin-bottom: 20px;

}

ol li p {
    font-weight: 700;
}

ol li {
    font-weight: 700;
}

.tournaments .ul__app div {
    padding: 24px 16px;
}

.tournaments .ul__app.ul__dep div::before {
    background: none;
}

.tournaments .ul__app.ul__dep>div>div>span {
    -webkit-text-fill-color: var(--color-white);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: none;
}

.tournaments .ul__app.ul__dep>div>p {
    background: linear-gradient(180deg, #FFC700 0%, #FF8A00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 26px;
    text-transform: uppercase;
    display: block;
    line-height: 1.1;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: start;
}

.tournaments .ul__app.ul__dep>div>p::before {
    content: "";
    display: inline-block;
    width: 49px;
    height: 46px;
    margin-right: 8px;
    background-image: url(../img/image12.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 0;
}

.ol__img {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ol__img ol li {
    font-weight: 700;
}

.ol__img img {
    width: 50%;
}

.ol__img h4 {
    margin-bottom: 16px;
}

.ol__img:last-of-type {
    flex-direction: row-reverse;
}

.app h4:last-of-type {
    margin: 20px 0;
}

.deposit__box {
    display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 50px 10px;
}

.deposit__box>div {
    background: -webkit-linear-gradient(top, #212121 0%, #2E2E2E 100%);
    background: linear-gradient(to bottom, #212121 0%, #2E2E2E 100%);
    /* border: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(204, 204, 204, 0.3), rgba(46, 46, 46, 0.2));
    border-image-slice: 1; */
    border-radius: 12px;
    padding: 60px 20px 40px;
    position: relative;
    max-width: 346px;
    max-height: 173px;
    text-align: center;
    flex: 1 1 calc(33.333% - 20px);
    box-shadow: var(--box-shadow);
}

.deposit__box>div:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(to right, rgba(204, 204, 204, 0.3), rgba(46, 46, 46, 0.2));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    /* Safari */
    mask-composite: exclude;
    /* Chrome / Edge */
    z-index: 1;
}

.deposit__box>div>* {
    position: relative;
    z-index: 2;
}

.deposit__box>div>img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 64px;
}

.deposit__box>div>h4 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1;
    color: var(--color-yellow);
    text-transform: uppercase;
}

.deposit__box>div>p {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
    text-transform: uppercase;
}

.img__text p {
    margin-bottom: 20px;
}

.img__text p:last-of-type {
    margin-bottom: 0px;
}

.faq {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-item {
    background: var(--color-yellow);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #6F6F6F;
    transition-duration: var(--transition-duration);

}

.faq-item:hover {
    background: #00cfa6d9;
    transition-duration: var(--transition-duration);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 16px;
    color: var(--color-black-text);
    font-size: 20px;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.faq-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 20px;
    background: #212121;
    color: #fff;
}



.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 16px;
}

.faq-item.active .faq-arrow {
    transform: rotate(0deg);
}

.user_reviews {
    position: relative;
}

.user_reviews>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.user_reviews>div>div {
    background: #13171F;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    flex: 1 1 calc(33.333% - 20px);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 340px;
    text-align: center;
    gap: 16px;
}

.user_reviews>div>div img {
    position: absolute;
    width: 160px;
    height: 169px;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
	z-index:2;
}

.user_reviews>div>div::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(to right, rgba(204, 204, 204, 0.3), rgba(46, 46, 46, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
}

.user_reviews>div>div h3 {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    color: var(--color-yellow);
}

.summary {
    position: relative;
}

.summary img {
    position: absolute;
    max-width: 1100px;
    bottom: -277px;
    right: -296px;
    z-index: -1;
}

.summary h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-yellow);
}

footer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 5;
    max-width: 1402px;
    margin-left: 198px;
    padding: 20px;
	background: #0D1016;
}

footer>div {
    background: var(--color-dark);
    border-radius: 8px;
}

.footer__info {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer__info>div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__info>div>a {
    transition: var(--transition-duration);
    color: #80858F;
    display: flex;
    position: relative;
    padding-left: 12px;

}

.footer__info>div>a::before {
    content: "";
    background: #80858F;
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    top: 5px;
    left: 0px;
    border-radius: 50%;

}

.footer__info>div>a:hover {
    transition: var(--transition-duration);
    color: var(--color-yellow);
}


.footer__info p {
    font-weight: 500;
    font-size: 16px;
    line-height: 1;

}

.footer__info a {
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: var(--color-white);

}

.footer__info__app>div {
    display: flex;
    flex-direction: column;
    gap: 4px;

}

.footer__info__app>div a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 50px;
    min-width: 152px;
    border-radius: 4px;
    border: 1px solid #444852;
    transition: var(--transition-duration);
    font-size: 14px;

}



.footer__info__app>div ae:hover {
    transition: var(--transition-duration);
    background: #1A1A1A;

}



.footer__info__app>div img {
    width: 24px;
    height: 24px;

}

.footer__info__contact {
    display: flex;
    background: transparent;
    padding: 0;
    margin: 0 72px;
    align-items: center;

}

.footer__info__contact div {
    margin-left: 24px;

}

.footer__info__contact p {
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.4;
    color: #80858F;
    text-align: center;
    margin-bottom: 14px;

}


.footer__info__contact p:last-of-type {

    margin-bottom: 0px;

}

.footer__info__contact p a {
    font-size: 12px;
    line-height: 14px;
    color: var(--color-white);
    text-decoration: underline;

}

.footer__info__contact p a:hover {

    text-decoration: none;
}

.footer__info__contact img {
    max-width: 150px;
    height: 85px;
    margin-right: 12px;
}

.footer__info__contact img:nth-of-type(2n) {
    width: 40px;
    height: 40px;
    margin-right: 0;
}

.footer__info__18 {
    display: flex;
    background: transparent;
    gap: 8px;
    padding: 0;
}

.footer__info__18 img {
    text-align: center;
    padding: 12px;
    background: var(--color-dark);
    flex: 1;
    object-fit: contain;
    object-position: center;
    width: 56px;
    height: 56px;
    border-radius: 8px;
}

.footer__info__lust {
    background: transparent;
    display: flex;
    padding: 0;
    gap: 8px;
}

.footer__info__lust>div {
    flex: 1;
}

.footer__info__lust .support {
    display: flex;
    gap: 8px;
}

.footer__info__lust .support p {
    padding: 27px 12px;
    background: var(--color-dark);
    border-radius: 8px;
    padding: 27px 12px;
    font-size: 12px;
    line-height: 1;
    color: #C2C2C2;
    flex: 1 1 50%;
}

.footer__info__lust .support a {
    padding: 27px 12px;
    background: var(--color-dark);
    border-radius: 8px;
    padding: 24px 12px;
    font-size: 12px;
    line-height: 1;
    color: #C2C2C2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 1 1 50%;

}

.footer__info__lust .support a>img {
    width: 48px;
    height: 48px;
}

.footer__sponsor{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.footer__sponsor div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
     border-bottom: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    rgba(128, 133, 143, 0) 0%,      /* прозрачный край слева */
    rgba(128, 133, 143, 0.6) 25%,   /* появляется */
    rgba(128, 133, 143, 1) 50%,     /* максимум в центре */
    rgba(128, 133, 143, 0.6) 75%,   /* затухает */
    rgba(128, 133, 143, 0) 100%     /* прозрачный справа */
  );
  border-image-slice: 1;
  margin-bottom: 12px;
  padding: 5px 0 6px;
}

.footer__sponsor div:last-of-type{
    margin-bottom: 0;
    border: none;
    justify-content: center;
}

.footer__sponsor div img{
  max-width: 120px;
}


.social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.social>div {
    display: flex;
    gap: 8px;
}

.social>div>div:first-of-type {
    display: flex;
    justify-content: center;
    gap: 12px;
    background: var(--color-dark);
    padding: 12px;
    border-radius: 8px;
    width: 100%;
}

.social>div>div:first-of-type img {
    width: 32px;
    height: 32px;
}

.social>div>div:last-of-type {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: var(--color-dark);
    padding: 12px;
    border-radius: 8px;
    min-width: 130px;
}

.social>div>div:last-of-type p {
    font-size: 20px;
    line-height: 24px;
}

.social>p {
    background: var(--color-dark);
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}


.arrow__scroll {
    position: fixed;
    right: 15%;
    bottom: 4.5%;
    z-index: 999;
}

.arrow__scroll a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #fff;
    border-radius: 50%;
    background: #6F6F6F;
    transition: var(--transition-duration);
}

.arrow__scroll a img {
    transform: rotate(180deg);
}

.arrow__scroll.stop {
    position: absolute;
    bottom: 200px;
    /* здесь укажи "точку остановки" */
}

.arrow__scroll a:hover {
    transform: scale(1.1);
}

.scroll-up {
    position: fixed;
    right: max(40px, calc(50% - 776px));
    bottom: 24px;
    width: 36px;
    height: 36px;
    border: none;
    cursor: pointer;
    display: flex;
    background: transparent;
    justify-content: center;
    align-items: center;
    opacity: 0;
    z-index: 9999;
    transition: var(--transition-duration);
}

.scroll-up img {
    width: 24px;
    /* регулируй под нужный размер */
    height: 24px;
    object-fit: contain;
    transform: rotate(0deg);
}

.scroll-up.visible {
    opacity: 1;
}

.scroll-up:hover {
    transform: scale(1.1);
}


.scroll-up.visible {
    opacity: 1;
}

.scroll-up:hover {
    transform: scale(1.2);
}

.scroll-up.stop {
    transform: translateY(-2000px);
}



/* фиксируем сайдбар */
.sidebar {
    position: fixed;
    display: flex;
    flex-direction: column;
    background: var(--color-dark);
    border-radius: 8px;
    overflow: hidden;
    z-index: 5;
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom,
            rgba(27, 31, 40, 1) 0%,
            /* тёмный верх */
            rgba(27, 31, 40, 0.2) 100%
            /* прозрачный низ */
        );
    border-image-slice: 1;

}


.sidebar__section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 14px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(0, 207, 166, 0) 0%, rgba(0, 207, 166, 0.35) 28%, rgba(0, 207, 166, 0.7) 53%, rgba(0, 207, 166, 0.35) 74%, rgba(0, 207, 166, 0) 100%);
    border-image-slice: 1
}


.sidebar__links-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE */
}

.sidebar__links-list::-webkit-scrollbar {
    display: none;
}

.language-selector {
    position: relative;
    overflow: visible;
}

.lang-list {
    max-height: 75vh;
    overflow-y: auto;
}

.lang-list::-webkit-scrollbar {
    width: 6px;
}

.lang-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.lang-list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.lang-list {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE и Edge */
}

.sidebar__section .sidebar__links-list {

    overflow: hidden;
}

.sidebar__section.collapsed .sidebar__links-list {
    max-height: 0 !important;
    overflow: hidden;
}

.sidebar__section:not(.collapsed) .sidebar__links-list {
    max-height: 1000px;
}

.sidebar__section.collapsed .arrow__nav {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.sidebar__section:not(.collapsed) .arrow__nav {
    transform: rotate(180deg);
}

.sidebar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.sidebar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.footer__languages-list {
  padding: 12px 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  border-radius: 8px;
	border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(128, 133, 143, 0) 0%, /* прозрачный край слева */ rgba(128, 133, 143, 0.6) 25%, /* появляется */ rgba(128, 133, 143, 1) 50%, /* максимум в центре */ rgba(128, 133, 143, 0.6) 75%, /* затухает */ rgba(128, 133, 143, 0) 100% /* прозрачный справа */);
    border-image-slice: 1;
	margin-bottom:24px;
}

.footer__languages-item > a {
  padding:7px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #6f6f6f;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-text-color);
  line-height: normal;
  transition: background-color var(--transition-duration);
}

.footer__languages-item > a img{
	border-radius:50%;
}

.footer__languages-item > a:hover,
.footer__languages-item > a:active,
.footer__languages-item > a:focus {
  background-color: var(--primary-bg-color);
}