:root {

    --toastify-color-light: #fff;

    --toastify-color-dark: #121212;

    --toastify-color-info: #3498db;

    --toastify-color-success: #07bc0c;

    --toastify-color-warning: #f1c40f;

    --toastify-color-error: hsl(6, 78%, 57%);

    --toastify-color-transparent: rgba(255, 255, 255, 0.7);

    --toastify-icon-color-info: var(--toastify-color-info);

    --toastify-icon-color-success: var(--toastify-color-success);

    --toastify-icon-color-warning: var(--toastify-color-warning);

    --toastify-icon-color-error: var(--toastify-color-error);

    --toastify-container-width: fit-content;

    --toastify-toast-width: 320px;

    --toastify-toast-offset: 16px;

    --toastify-toast-top: max(

        var(--toastify-toast-offset),

        env(safe-area-inset-top)

    );

    --toastify-toast-right: max(

        var(--toastify-toast-offset),

        env(safe-area-inset-right)

    );

    --toastify-toast-left: max(

        var(--toastify-toast-offset),

        env(safe-area-inset-left)

    );

    --toastify-toast-bottom: max(

        var(--toastify-toast-offset),

        env(safe-area-inset-bottom)

    );

    --toastify-toast-background: #fff;

    --toastify-toast-padding: 14px;

    --toastify-toast-min-height: 64px;

    --toastify-toast-max-height: 800px;

    --toastify-toast-bd-radius: 6px;

    --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);

    --toastify-font-family: sans-serif;

    --toastify-z-index: 9999;

    --toastify-text-color-light: #757575;

    --toastify-text-color-dark: #fff;

    --toastify-text-color-info: #fff;

    --toastify-text-color-success: #fff;

    --toastify-text-color-warning: #fff;

    --toastify-text-color-error: #fff;

    --toastify-spinner-color: #616161;

    --toastify-spinner-color-empty-area: #e0e0e0;

    --toastify-color-progress-light: linear-gradient(

        to right,

        #4cd964,

        #5ac8fa,

        #007aff,

        #34aadc,

        #5856d6,

        #ff2d55

    );

    --toastify-color-progress-dark: #bb86fc;

    --toastify-color-progress-info: var(--toastify-color-info);

    --toastify-color-progress-success: var(--toastify-color-success);

    --toastify-color-progress-warning: var(--toastify-color-warning);

    --toastify-color-progress-error: var(--toastify-color-error);

    --toastify-color-progress-bgo: 0.2;

}



.Toastify__toast-container {

    z-index: var(--toastify-z-index);

    -webkit-transform: translate3d(0, 0, var(--toastify-z-index));

    position: fixed;

    width: var(--toastify-container-width);

    box-sizing: border-box;

    color: #fff;

    display: flex;

    flex-direction: column;

}



.Toastify__toast-container--top-left {

    top: var(--toastify-toast-top);

    left: var(--toastify-toast-left);

}



.Toastify__toast-container--top-center {

    top: var(--toastify-toast-top);

    left: 50%;

    transform: translate(-50%);

    align-items: center;

}



.Toastify__toast-container--top-right {

    top: var(--toastify-toast-top);

    right: var(--toastify-toast-right);

    align-items: end;

}



.Toastify__toast-container--bottom-left {

    bottom: var(--toastify-toast-bottom);

    left: var(--toastify-toast-left);

}



.Toastify__toast-container--bottom-center {

    bottom: var(--toastify-toast-bottom);

    left: 50%;

    transform: translate(-50%);

    align-items: center;

}



.Toastify__toast-container--bottom-right {

    bottom: var(--toastify-toast-bottom);

    right: var(--toastify-toast-right);

    align-items: end;

}



.Toastify__toast {

    --y: 0;

    position: relative;

    touch-action: none;

    width: var(--toastify-toast-width);

    min-height: var(--toastify-toast-min-height);

    box-sizing: border-box;

    margin-bottom: 1rem;

    padding: var(--toastify-toast-padding);

    border-radius: var(--toastify-toast-bd-radius);

    box-shadow: var(--toastify-toast-shadow);

    max-height: var(--toastify-toast-max-height);

    font-family: var(--toastify-font-family);

    z-index: 0;

    display: flex;

    flex: 1 auto;

    align-items: center;

    word-break: break-word;

}



@media only screen and (max-width: 480px) {

    .Toastify__toast-container {

        width: 100vw;

        left: env(safe-area-inset-left);

        margin: 0;

    }



    .Toastify__toast-container--top-left,

    .Toastify__toast-container--top-center,

    .Toastify__toast-container--top-right {

        top: env(safe-area-inset-top);

        transform: translate(0);

    }



    .Toastify__toast-container--bottom-left,

    .Toastify__toast-container--bottom-center,

    .Toastify__toast-container--bottom-right {

        bottom: env(safe-area-inset-bottom);

        transform: translate(0);

    }



    .Toastify__toast-container--rtl {

        right: env(safe-area-inset-right);

        left: initial;

    }



    .Toastify__toast {

        --toastify-toast-width: 100%;

        margin-bottom: 0;

        border-radius: 0;

    }

}



.Toastify__toast-container[data-stacked='true'] {

    width: var(--toastify-toast-width);

}



.Toastify__toast--stacked {

    position: absolute;

    width: 100%;

    transform: translate3d(0, var(--y), 0) scale(var(--s));

    transition: transform 0.3s;

}



.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,

.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {

    transition: opacity 0.1s;

}



.Toastify__toast--stacked[data-collapsed='false'] {

    overflow: visible;

}



.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {

    opacity: 0;

}



.Toastify__toast--stacked:after {

    content: '';

    position: absolute;

    left: 0;

    right: 0;

    height: calc(var(--g) * 1px);

    bottom: 100%;

}



.Toastify__toast--stacked[data-pos='top'] {

    top: 0;

}



.Toastify__toast--stacked[data-pos='bot'] {

    bottom: 0;

}



.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {

    transform-origin: top;

}



.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {

    transform-origin: bottom;

}



.Toastify__toast--stacked:before {

    content: '';

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100%;

    transform: scaleY(3);

    z-index: -1;

}



.Toastify__toast--rtl {

    direction: rtl;

}



.Toastify__toast--close-on-click {

    cursor: pointer;

}



.Toastify__toast-icon {

    margin-inline-end: 10px;

    width: 22px;

    flex-shrink: 0;

    display: flex;

}



.Toastify--animate {

    animation-fill-mode: both;

    animation-duration: 0.5s;

}



.Toastify--animate-icon {

    animation-fill-mode: both;

    animation-duration: 0.3s;

}



.Toastify__toast-theme--dark {

    background: var(--toastify-color-dark);

    color: var(--toastify-text-color-dark);

}



.Toastify__toast-theme--light,

.Toastify__toast-theme--colored.Toastify__toast--default {

    background: var(--toastify-color-light);

    color: var(--toastify-text-color-light);

}



.Toastify__toast-theme--colored.Toastify__toast--info {

    color: var(--toastify-text-color-info);

    background: var(--toastify-color-info);

}



.Toastify__toast-theme--colored.Toastify__toast--success {

    color: var(--toastify-text-color-success);

    background: var(--toastify-color-success);

}



.Toastify__toast-theme--colored.Toastify__toast--warning {

    color: var(--toastify-text-color-warning);

    background: var(--toastify-color-warning);

}



.Toastify__toast-theme--colored.Toastify__toast--error {

    color: var(--toastify-text-color-error);

    background: var(--toastify-color-error);

}



.Toastify__progress-bar-theme--light {

    background: var(--toastify-color-progress-light);

}



.Toastify__progress-bar-theme--dark {

    background: var(--toastify-color-progress-dark);

}



.Toastify__progress-bar--info {

    background: var(--toastify-color-progress-info);

}



.Toastify__progress-bar--success {

    background: var(--toastify-color-progress-success);

}



.Toastify__progress-bar--warning {

    background: var(--toastify-color-progress-warning);

}



.Toastify__progress-bar--error {

    background: var(--toastify-color-progress-error);

}



.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {

    background: var(--toastify-color-transparent);

}



.Toastify__close-button {

    color: #fff;

    position: absolute;

    top: 6px;

    right: 6px;

    background: transparent;

    outline: none;

    border: none;

    padding: 0;

    cursor: pointer;

    opacity: 0.7;

    transition: 0.3s ease;

    z-index: 1;

}



.Toastify__toast--rtl .Toastify__close-button {

    left: 6px;

    right: unset;

}



.Toastify__close-button--light {

    color: #000;

    opacity: 0.3;

}



.Toastify__close-button > svg {

    fill: currentColor;

    height: 16px;

    width: 14px;

}



.Toastify__close-button:hover,

.Toastify__close-button:focus {

    opacity: 1;

}



@keyframes Toastify__trackProgress {

    0% {

        transform: scaleX(1);

    }



    to {

        transform: scaleX(0);

    }

}



.Toastify__progress-bar {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    opacity: 0.7;

    transform-origin: left;

}



.Toastify__progress-bar--animated {

    animation: Toastify__trackProgress linear 1 forwards;

}



.Toastify__progress-bar--controlled {

    transition: transform 0.2s;

}



.Toastify__progress-bar--rtl {

    right: 0;

    left: initial;

    transform-origin: right;

    border-bottom-left-radius: initial;

}



.Toastify__progress-bar--wrp {

    position: absolute;

    overflow: hidden;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 5px;

    border-bottom-left-radius: var(--toastify-toast-bd-radius);

    border-bottom-right-radius: var(--toastify-toast-bd-radius);

}



.Toastify__progress-bar--wrp[data-hidden='true'] {

    opacity: 0;

}



.Toastify__progress-bar--bg {

    opacity: var(--toastify-color-progress-bgo);

    width: 100%;

    height: 100%;

}



.Toastify__spinner {

    width: 20px;

    height: 20px;

    box-sizing: border-box;

    border: 2px solid;

    border-radius: 100%;

    border-color: var(--toastify-spinner-color-empty-area);

    border-right-color: var(--toastify-spinner-color);

    animation: Toastify__spin 0.65s linear infinite;

}



@keyframes Toastify__bounceInRight {

    0%,

    60%,

    75%,

    90%,

    to {

        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    }



    0% {

        opacity: 0;

        transform: translate3d(3000px, 0, 0);

    }



    60% {

        opacity: 1;

        transform: translate3d(-25px, 0, 0);

    }



    75% {

        transform: translate3d(10px, 0, 0);

    }



    90% {

        transform: translate3d(-5px, 0, 0);

    }



    to {

        transform: none;

    }

}



@keyframes Toastify__bounceOutRight {

    20% {

        opacity: 1;

        transform: translate3d(-20px, var(--y), 0);

    }



    to {

        opacity: 0;

        transform: translate3d(2000px, var(--y), 0);

    }

}



@keyframes Toastify__bounceInLeft {

    0%,

    60%,

    75%,

    90%,

    to {

        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    }



    0% {

        opacity: 0;

        transform: translate3d(-3000px, 0, 0);

    }



    60% {

        opacity: 1;

        transform: translate3d(25px, 0, 0);

    }



    75% {

        transform: translate3d(-10px, 0, 0);

    }



    90% {

        transform: translate3d(5px, 0, 0);

    }



    to {

        transform: none;

    }

}



@keyframes Toastify__bounceOutLeft {

    20% {

        opacity: 1;

        transform: translate3d(20px, var(--y), 0);

    }



    to {

        opacity: 0;

        transform: translate3d(-2000px, var(--y), 0);

    }

}



@keyframes Toastify__bounceInUp {

    0%,

    60%,

    75%,

    90%,

    to {

        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    }



    0% {

        opacity: 0;

        transform: translate3d(0, 3000px, 0);

    }



    60% {

        opacity: 1;

        transform: translate3d(0, -20px, 0);

    }



    75% {

        transform: translate3d(0, 10px, 0);

    }



    90% {

        transform: translate3d(0, -5px, 0);

    }



    to {

        transform: translateZ(0);

    }

}



@keyframes Toastify__bounceOutUp {

    20% {

        transform: translate3d(0, calc(var(--y) - 10px), 0);

    }



    40%,

    45% {

        opacity: 1;

        transform: translate3d(0, calc(var(--y) + 20px), 0);

    }



    to {

        opacity: 0;

        transform: translate3d(0, -2000px, 0);

    }

}



@keyframes Toastify__bounceInDown {

    0%,

    60%,

    75%,

    90%,

    to {

        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    }



    0% {

        opacity: 0;

        transform: translate3d(0, -3000px, 0);

    }



    60% {

        opacity: 1;

        transform: translate3d(0, 25px, 0);

    }



    75% {

        transform: translate3d(0, -10px, 0);

    }



    90% {

        transform: translate3d(0, 5px, 0);

    }



    to {

        transform: none;

    }

}



@keyframes Toastify__bounceOutDown {

    20% {

        transform: translate3d(0, calc(var(--y) - 10px), 0);

    }



    40%,

    45% {

        opacity: 1;

        transform: translate3d(0, calc(var(--y) + 20px), 0);

    }



    to {

        opacity: 0;

        transform: translate3d(0, 2000px, 0);

    }

}



.Toastify__bounce-enter--top-left,

.Toastify__bounce-enter--bottom-left {

    animation-name: Toastify__bounceInLeft;

}



.Toastify__bounce-enter--top-right,

.Toastify__bounce-enter--bottom-right {

    animation-name: Toastify__bounceInRight;

}



.Toastify__bounce-enter--top-center {

    animation-name: Toastify__bounceInDown;

}



.Toastify__bounce-enter--bottom-center {

    animation-name: Toastify__bounceInUp;

}



.Toastify__bounce-exit--top-left,

.Toastify__bounce-exit--bottom-left {

    animation-name: Toastify__bounceOutLeft;

}



.Toastify__bounce-exit--top-right,

.Toastify__bounce-exit--bottom-right {

    animation-name: Toastify__bounceOutRight;

}



.Toastify__bounce-exit--top-center {

    animation-name: Toastify__bounceOutUp;

}



.Toastify__bounce-exit--bottom-center {

    animation-name: Toastify__bounceOutDown;

}



@keyframes Toastify__zoomIn {

    0% {

        opacity: 0;

        transform: scale3d(0.3, 0.3, 0.3);

    }



    50% {

        opacity: 1;

    }

}



@keyframes Toastify__zoomOut {

    0% {

        opacity: 1;

    }



    50% {

        opacity: 0;

        transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);

    }



    to {

        opacity: 0;

    }

}



.Toastify__zoom-enter {

    animation-name: Toastify__zoomIn;

}



.Toastify__zoom-exit {

    animation-name: Toastify__zoomOut;

}



@keyframes Toastify__flipIn {

    0% {

        transform: perspective(400px) rotateX(90deg);

        animation-timing-function: ease-in;

        opacity: 0;

    }



    40% {

        transform: perspective(400px) rotateX(-20deg);

        animation-timing-function: ease-in;

    }



    60% {

        transform: perspective(400px) rotateX(10deg);

        opacity: 1;

    }



    80% {

        transform: perspective(400px) rotateX(-5deg);

    }



    to {

        transform: perspective(400px);

    }

}



@keyframes Toastify__flipOut {

    0% {

        transform: translate3d(0, var(--y), 0) perspective(400px);

    }



    30% {

        transform: translate3d(0, var(--y), 0) perspective(400px)

            rotateX(-20deg);

        opacity: 1;

    }



    to {

        transform: translate3d(0, var(--y), 0) perspective(400px) rotateX(90deg);

        opacity: 0;

    }

}



.Toastify__flip-enter {

    animation-name: Toastify__flipIn;

}



.Toastify__flip-exit {

    animation-name: Toastify__flipOut;

}



@keyframes Toastify__slideInRight {

    0% {

        transform: translate3d(110%, 0, 0);

        visibility: visible;

    }



    to {

        transform: translate3d(0, var(--y), 0);

    }

}



@keyframes Toastify__slideInLeft {

    0% {

        transform: translate3d(-110%, 0, 0);

        visibility: visible;

    }



    to {

        transform: translate3d(0, var(--y), 0);

    }

}



@keyframes Toastify__slideInUp {

    0% {

        transform: translate3d(0, 110%, 0);

        visibility: visible;

    }



    to {

        transform: translate3d(0, var(--y), 0);

    }

}



@keyframes Toastify__slideInDown {

    0% {

        transform: translate3d(0, -110%, 0);

        visibility: visible;

    }



    to {

        transform: translate3d(0, var(--y), 0);

    }

}



@keyframes Toastify__slideOutRight {

    0% {

        transform: translate3d(0, var(--y), 0);

    }



    to {

        visibility: hidden;

        transform: translate3d(110%, var(--y), 0);

    }

}



@keyframes Toastify__slideOutLeft {

    0% {

        transform: translate3d(0, var(--y), 0);

    }



    to {

        visibility: hidden;

        transform: translate3d(-110%, var(--y), 0);

    }

}



@keyframes Toastify__slideOutDown {

    0% {

        transform: translate3d(0, var(--y), 0);

    }



    to {

        visibility: hidden;

        transform: translate3d(0, 500px, 0);

    }

}



@keyframes Toastify__slideOutUp {

    0% {

        transform: translate3d(0, var(--y), 0);

    }



    to {

        visibility: hidden;

        transform: translate3d(0, -500px, 0);

    }

}



.Toastify__slide-enter--top-left,

.Toastify__slide-enter--bottom-left {

    animation-name: Toastify__slideInLeft;

}



.Toastify__slide-enter--top-right,

.Toastify__slide-enter--bottom-right {

    animation-name: Toastify__slideInRight;

}



.Toastify__slide-enter--top-center {

    animation-name: Toastify__slideInDown;

}



.Toastify__slide-enter--bottom-center {

    animation-name: Toastify__slideInUp;

}



.Toastify__slide-exit--top-left,

.Toastify__slide-exit--bottom-left {

    animation-name: Toastify__slideOutLeft;

    animation-timing-function: ease-in;

    animation-duration: 0.3s;

}



.Toastify__slide-exit--top-right,

.Toastify__slide-exit--bottom-right {

    animation-name: Toastify__slideOutRight;

    animation-timing-function: ease-in;

    animation-duration: 0.3s;

}



.Toastify__slide-exit--top-center {

    animation-name: Toastify__slideOutUp;

    animation-timing-function: ease-in;

    animation-duration: 0.3s;

}



.Toastify__slide-exit--bottom-center {

    animation-name: Toastify__slideOutDown;

    animation-timing-function: ease-in;

    animation-duration: 0.3s;

}



@keyframes Toastify__spin {

    0% {

        transform: rotate(0);

    }



    to {

        transform: rotate(360deg);

    }

}



/* Generated Design System CSS */



* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}



html,

body {

    width: 100vw;

    height: 100vh;

    overflow-x: hidden;

}



#root {

    width: 100%;

    height: 100%;

}



.app {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    color: white;

    font-family: Inter, sans-serif;

}



main {

    flex: 1 0 auto;

}



h1,

h2,

h3,

h4 {

    font-family: Anton, sans-serif;

}



.nav {

    margin: 20px 0;

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}



.nav-link {

    padding: 10px 20px;

    color: white;

    text-decoration: none;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    border: 2px solid transparent;

    transition: all 0.3s ease;

    display: inline-block;

}



.nav-link:hover {

    background: rgba(255, 255, 255, 0.2);

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}



.nav-link.active {

    background: rgba(255, 255, 255, 0.2);

    border: 2px solid white;

}



.page-container {

    background: rgba(255, 255, 255, 0.1);

    padding: 30px;

    border-radius: 15px;

    margin: 20px 0;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.page-title {

    color: white;

    text-align: center;

    margin-bottom: 20px;

    font-size: 2rem;

    font-weight: 600;

}



.page-content {

    color: rgba(255, 255, 255, 0.9);

    text-align: center;

    line-height: 1.6;

    font-size: 1.1rem;

}



.card {

    background: linear-gradient(

        135deg,

        rgba(255, 255, 255, 0.1),

        rgba(255, 255, 255, 0.05)

    );

    padding: 20px;

    border-radius: 10px;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.2);

    transition: all 0.3s ease;

}



.card:hover {

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}



.button {

    width: 100%;

    padding: 12px;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    border: none;

    border-radius: 8px;

    font-size: 1.1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

}



.button:hover {

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}



.button:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none;

}



.input {

    width: 100%;

    padding: 12px;

    border: 2px solid rgba(255, 255, 255, 0.2);

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.1);

    color: white;

    font-size: 1.1rem;

    transition: all 0.3s ease;

    box-sizing: border-box;

}



.input::placeholder {

    color: rgba(255, 255, 255, 0.7);

}



.input:focus {

    outline: none;

    border-color: #667eea;

    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);

}



.error-text {

    color: #ff6b6b;

    margin: 5px 0 0 0;

    font-size: 0.9rem;

}



.success-message {

    background: rgba(76, 175, 80, 0.2);

    border: 1px solid #4caf50;

    color: #4caf50;

    padding: 10px;

    border-radius: 8px;

    margin-bottom: 15px;

}



.grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 15px;

    margin-top: 20px;

}



/* Utility classes */

.text-center {

    text-align: center;

}



.mb-sm {

    margin-bottom: 10px;

}



.mb-md {

    margin-bottom: 15px;

}



.mb-lg {

    margin-bottom: 20px;

}



.mt-sm {

    margin-top: 10px;

}



.mt-md {

    margin-top: 15px;

}



.mt-lg {

    margin-top: 20px;

}



.disclaimer {

    width: 100%;

    padding: 30px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #020f1f;

}



@media all and (min-width: 769px) {

    .disclaimer {

        padding: 50px 40px;

    }

}



.disclaimer__container {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .disclaimer__container {

        font-size: 16px;

        line-height: 24px;

    }

}



.disclaimer__container {

    width: 100%;

    max-width: 1200px;

    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 30px;

    border-radius: 16px;

    background-color: #020f1f;

    border: 1px solid #f0ca0c;

    text-align: left;

}



@media all and (min-width: 769px) {

    .disclaimer__container {

        flex-direction: row;

    }

}



.disclaimer__head {

    display: flex;

    align-items: flex-start;

    width: 100%;

    gap: 20px;

}



@media all and (min-width: 769px) {

    .disclaimer__head {

        width: auto;

    }

}



.disclaimer__icon {

    min-width: 58px;

    height: 58px;

}



.disclaimer__icon svg {

    width: 100%;

    height: 100%;

}



@media all and (min-width: 769px) {

    .disclaimer__icon {

        width: 52px;

        height: 52px;

    }

}



@media all and (min-width: 1025px) {

    .disclaimer__icon {

        width: 70px;

        height: 70px;

    }

}



.disclaimer__title {

    font-family: Anton, sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}



@media all and (min-width: 769px) {

    .disclaimer__title {

        font-size: 18px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .disclaimer__title {

        font-size: 24px;

        line-height: 32px;

    }

}



@media all and (min-width: 769px) {

    .disclaimer__title {

        width: 172px;

    }

}



@media all and (min-width: 1025px) {

    .disclaimer__title {

        width: 385px;

    }

}



.disclaimer__content {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.disclaimer__list {

    padding-left: 20px;

}



.disclaimer__list a {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .disclaimer__list a {

        font-size: 16px;

        line-height: 24px;

    }

}



.disclaimer__list a {

    color: #ffffff;

}



footer {

    background-color: #020f1f;

    display: flex;

    padding: 30px 20px;

}



@media all and (min-width: 769px) {

    footer {

        padding: 50px 40px;

    }

}



footer .footer {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 30px;

    color: #ffffff;

}



footer .footer .top-block {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 50px;

}



@media all and (min-width: 769px) {

    footer .footer .top-block {

        flex-direction: row;

        justify-content: space-between;

    }

}



footer .footer__links {

    display: flex;

    flex-direction: column;

    gap: 30px;

    align-items: center;

    text-align: center;

}



@media all and (min-width: 769px) {

    footer .footer__links {

        gap: 50px;

        flex-direction: row;

    }

}



footer .footer__link {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    footer .footer__link {

        font-size: 16px;

        line-height: 24px;

    }

}



footer .footer__link {

    color: inherit;

}



footer .footer .safety {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 40px;

    align-items: center;

    padding: 30px 0;

}



@media all and (min-width: 769px) {

    footer .footer .safety {

        flex-direction: row;

        justify-content: space-between;

    }

}



footer .footer__safety-image {

    width: auto;

    height: 70px;

    max-width: 100%;

    object-fit: contain;

}



@media all and (min-width: 769px) {

    footer .footer__safety-image {

        max-width: 209px;

    }

}



header {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #060f1b;

    padding: 13px 20px;

}



@media all and (min-width: 769px) {

    header {

        padding: 13px 40px;

    }

}



header .header {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



header .header__links {

    display: none;

}



@media all and (min-width: 769px) {

    header .header__links {

        display: flex;

        width: auto;

        align-items: center;

        gap: 100px;

    }

}



header .header__links-link {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    header .header__links-link {

        font-size: 16px;

        line-height: 24px;

    }

}



header .header__links-link {

    color: #ffffff;

    text-decoration: none;

    transition: all 0.3s ease-in-out;

}



header .header__links-link:hover {

    color: #f0ca0c;

    text-decoration: underline;

}



header .header__buttons {

    width: auto;

    display: flex;

    gap: 6px;

    align-items: stretch;

    justify-content: center;

}



header .header__buttons-btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    header .header__buttons-btn {

        font-size: 16px;

        line-height: 24px;

    }

}



header .header__buttons-btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



header .header__buttons-btn:hover {

    background-color: #ffb509;

}



header .header__buttons-btn {

    text-decoration: none;

    color: #060f1b;

    border: none;

}



header .header__buttons-btn:first-child {

    background-color: #ffffff;

}



header .header__buttons-btn:last-child {

    background-color: #f0ca0c;

}



header .header__buttons-btn:hover {

    background-color: #ffb509;

}



@media all and (min-width: 769px) {

    header .header__buttons {

        gap: 20px;

    }

}



.notification {

    padding: 10px 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background-color: #ce1919;

    color: #ffffff;

}



.notification__icon {

    min-width: 24px;

    height: 24px;

}



.notification__icon svg {

    width: 100%;

    height: 100%;

}



.notification__text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .notification__text {

        font-size: 16px;

        line-height: 24px;

    }

}



.splide__container {

    box-sizing: border-box;

    position: relative;

}



.splide__list {

    backface-visibility: hidden;

    display: -ms-flexbox;

    display: flex;

    height: 100%;

    margin: 0 !important;

    padding: 0 !important;

}



.splide.is-initialized:not(.is-active) .splide__list {

    display: block;

}



.splide__pagination {

    -ms-flex-align: center;

    align-items: center;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -ms-flex-pack: center;

    justify-content: center;

    margin: 0;

    pointer-events: none;

}



.splide__pagination li {

    display: inline-block;

    line-height: 1;

    list-style-type: none;

    margin: 0;

    pointer-events: auto;

}



.splide:not(.is-overflow) .splide__pagination {

    display: none;

}



.splide__progress__bar {

    width: 0;

}



.splide {

    position: relative;

    visibility: hidden;

}



.splide.is-initialized,

.splide.is-rendered {

    visibility: visible;

}



.splide__slide {

    backface-visibility: hidden;

    box-sizing: border-box;

    -ms-flex-negative: 0;

    flex-shrink: 0;

    list-style-type: none !important;

    margin: 0;

    position: relative;

}



.splide__slide img {

    vertical-align: bottom;

}



.splide__spinner {

    animation: splide-loading 1s linear infinite;

    border: 2px solid #999;

    border-left-color: transparent;

    border-radius: 50%;

    bottom: 0;

    contain: strict;

    display: inline-block;

    height: 20px;

    left: 0;

    margin: auto;

    position: absolute;

    right: 0;

    top: 0;

    width: 20px;

}



.splide__sr {

    clip: rect(0 0 0 0);

    border: 0;

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

}



.splide__toggle.is-active .splide__toggle__play,

.splide__toggle__pause {

    display: none;

}



.splide__toggle.is-active .splide__toggle__pause {

    display: inline;

}



.splide__track {

    overflow: hidden;

    position: relative;

    z-index: 0;

}



@keyframes splide-loading {

    0% {

        transform: rotate(0);

    }



    to {

        transform: rotate(1turn);

    }

}



.splide__track--draggable {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -ms-user-select: none;

    user-select: none;

}



.splide__track--fade > .splide__list > .splide__slide {

    margin: 0 !important;

    opacity: 0;

    z-index: 0;

}



.splide__track--fade > .splide__list > .splide__slide.is-active {

    opacity: 1;

    z-index: 1;

}



.splide--rtl {

    direction: rtl;

}



.splide__track--ttb > .splide__list {

    display: block;

}



.splide__arrow {

    -ms-flex-align: center;

    align-items: center;

    background: #ccc;

    border: 0;

    border-radius: 50%;

    cursor: pointer;

    display: -ms-flexbox;

    display: flex;

    height: 2em;

    -ms-flex-pack: center;

    justify-content: center;

    opacity: 0.7;

    padding: 0;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 2em;

    z-index: 1;

}



.splide__arrow svg {

    fill: #000;

    height: 1.2em;

    width: 1.2em;

}



.splide__arrow:hover:not(:disabled) {

    opacity: 0.9;

}



.splide__arrow:disabled {

    opacity: 0.3;

}



.splide__arrow:focus-visible {

    outline: 3px solid #0bf;

    outline-offset: 3px;

}



.splide__arrow--prev {

    left: 1em;

}



.splide__arrow--prev svg {

    transform: scaleX(-1);

}



.splide__arrow--next {

    right: 1em;

}



.splide.is-focus-in .splide__arrow:focus {

    outline: 3px solid #0bf;

    outline-offset: 3px;

}



.splide__pagination {

    bottom: 0.5em;

    left: 0;

    padding: 0 1em;

    position: absolute;

    right: 0;

    z-index: 1;

}



.splide__pagination__page {

    background: #ccc;

    border: 0;

    border-radius: 50%;

    display: inline-block;

    height: 8px;

    margin: 3px;

    opacity: 0.7;

    padding: 0;

    position: relative;

    transition: transform 0.2s linear;

    width: 8px;

}



.splide__pagination__page.is-active {

    background: #fff;

    transform: scale(1.4);

    z-index: 1;

}



.splide__pagination__page:hover {

    cursor: pointer;

    opacity: 0.9;

}



.splide__pagination__page:focus-visible {

    outline: 3px solid #0bf;

    outline-offset: 3px;

}



.splide.is-focus-in .splide__pagination__page:focus {

    outline: 3px solid #0bf;

    outline-offset: 3px;

}



.splide__progress__bar {

    background: #ccc;

    height: 3px;

}



.splide__slide {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



.splide__slide:focus {

    outline: 0;

}



@supports (outline-offset: -3px) {

    .splide__slide:focus-visible {

        outline: 3px solid #0bf;

        outline-offset: -3px;

    }

}



@media screen and (-ms-high-contrast: none) {

    .splide__slide:focus-visible {

        border: 3px solid #0bf;

    }

}



@supports (outline-offset: -3px) {

    .splide.is-focus-in .splide__slide:focus {

        outline: 3px solid #0bf;

        outline-offset: -3px;

    }

}



@media screen and (-ms-high-contrast: none) {

    .splide.is-focus-in .splide__slide:focus {

        border: 3px solid #0bf;

    }



    .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {

        border-color: #0bf;

    }

}



.splide__toggle {

    cursor: pointer;

}



.splide__toggle:focus-visible {

    outline: 3px solid #0bf;

    outline-offset: 3px;

}



.splide.is-focus-in .splide__toggle:focus {

    outline: 3px solid #0bf;

    outline-offset: 3px;

}



.splide__track--nav > .splide__list > .splide__slide {

    border: 3px solid transparent;

    cursor: pointer;

}



.splide__track--nav > .splide__list > .splide__slide.is-active {

    border: 3px solid #000;

}



.splide__arrows--rtl .splide__arrow--prev {

    left: auto;

    right: 1em;

}



.splide__arrows--rtl .splide__arrow--prev svg {

    transform: scaleX(1);

}



.splide__arrows--rtl .splide__arrow--next {

    left: 1em;

    right: auto;

}



.splide__arrows--rtl .splide__arrow--next svg {

    transform: scaleX(-1);

}



.splide__arrows--ttb .splide__arrow {

    left: 50%;

    transform: translate(-50%);

}



.splide__arrows--ttb .splide__arrow--prev {

    top: 1em;

}



.splide__arrows--ttb .splide__arrow--prev svg {

    transform: rotate(-90deg);

}



.splide__arrows--ttb .splide__arrow--next {

    bottom: 1em;

    top: auto;

}



.splide__arrows--ttb .splide__arrow--next svg {

    transform: rotate(90deg);

}



.splide__pagination--ttb {

    bottom: 0;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-direction: column;

    flex-direction: column;

    left: auto;

    padding: 1em 0;

    right: 0.5em;

    top: 0;

}



.age-check {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(6, 15, 27, 0.8);

    backdrop-filter: blur(30px);

    z-index: 99;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 12px;

}



.age-check__content {

    width: 100%;

    max-width: 320px;

    padding: 20px;

    background-color: #ffffff;

    color: #060f1b;

    border-radius: 16px;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



@media all and (min-width: 769px) {

    .age-check__content {

        max-width: 820px;

        padding: 30px;

    }

}



.age-check__title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .age-check__title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .age-check__title {

        font-size: 35px;

        line-height: 40px;

    }

}



.age-check__text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .age-check__text {

        font-size: 16px;

        line-height: 24px;

    }

}



.age-check__buttons {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



@media all and (min-width: 769px) {

    .age-check__buttons {

        flex-direction: row;

    }

}



.age-check__btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .age-check__btn {

        font-size: 16px;

        line-height: 24px;

    }

}



.age-check__btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



.age-check__btn:hover {

    background-color: #ffb509;

}



.age-check__btn {

    width: 100%;

    cursor: pointer;

}



.age-check__btn--agree {

    background-color: #f0ca0c;

    color: #060f1b;

}



.age-check__btn--decline {

    text-decoration: none;

    border: 1px solid #060f1b;

    color: #060f1b;

}



.age-check__btn--decline:hover {

    border-color: #f0ca0c;

}



.contact {

    width: 100%;

    height: 100%;

    max-height: 100vh;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 99;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px;

    background-color: rgba(6, 15, 27, 0.6);

}



.contact__close-btn {

    width: 24px;

    height: 24px;

    position: absolute;

    right: 20px;

    top: 20px;

    outline: none;

    border: none;

    background-color: transparent;

    cursor: pointer;

    z-index: 2;

}



@media all and (min-width: 769px) {

    .contact__close-btn {

        width: 42px;

        height: 42px;

    }

}



.contact__close-btn svg {

    width: 100%;

    height: 100%;

}



.contact__container {

    width: 100%;

    max-height: 100%;

    max-width: 580px;

    padding: 30px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;

    position: relative;

    background-color: #221f33;

    border-radius: 16px;

    overflow: auto;

}



@media all and (min-width: 769px) {

    .contact__container {

        padding: 30px;

    }

}



.contact__form {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 32px;

}



.contact__form__inputs {

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 32px;

}



@media all and (min-width: 769px) {

    .contact__form__inputs {

        flex-direction: row;

        gap: 20px;

    }

}



.contact__form__checkbox {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.contact__form__checkbox label {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    text-align: left;

    gap: 8px;

    cursor: pointer;

    user-select: none;

}



.contact__form__checkbox label span {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .contact__form__checkbox label span {

        font-size: 16px;

        line-height: 24px;

    }

}



.contact__form__checkbox label span {

    color: #ffffff;

}



.contact__form__checkbox label span a {

    color: inherit;

}



.contact__form__checkbox-icon {

    min-width: 16px;

    height: 16px;

}



.contact__form__checkbox-icon svg {

    width: 100%;

    height: 100%;

}



.contact__form .input {

    width: 100%;

    padding: 0;

    border: none;

    display: flex;

    flex-direction: column;

    gap: 10px;

    background-color: transparent;

    position: relative;

}



.contact__form .input__label {

    font-family: Inter, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: 600;

    line-height: 17px;

}



@media all and (min-width: 769px) {

    .contact__form .input__label {

        font-size: 16px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .contact__form .input__label {

        font-size: 18px;

        line-height: 32px;

    }

}



.contact__form .input__field {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .contact__form .input__field {

        font-size: 16px;

        line-height: 24px;

    }

}



.contact__form .input__field {

    width: 100%;

    padding: 16px;

    border-radius: 15px;

    border: 3px solid transparent;

    outline: none;

    resize: vertical;

}



.contact__form .input__field:focus-visible,

.contact__form .input__field:focus {

    border: 3px solid #1e71b9;

}



.contact__form .input__eye {

    width: 24px;

    height: 24px;

    position: absolute;

    cursor: pointer;

    top: 44px;

    right: 16px;

}



.contact__form .input__eye svg {

    width: 100%;

    height: 100%;

}



@media all and (min-width: 769px) {

    .contact__form .input__eye {

        top: 53px;

    }

}



@media all and (min-width: 1025px) {

    .contact__form .input__eye {

        top: 61px;

    }

}



.contact__form .input__error {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .contact__form .input__error {

        font-size: 16px;

        line-height: 24px;

    }

}



.contact__form .input__error {

    color: #ce1919;

    margin-top: -6px;

}



.contact__form__controls {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.contact__form__controls-btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .contact__form__controls-btn {

        font-size: 16px;

        line-height: 24px;

    }

}



.contact__form__controls-btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



.contact__form__controls-btn:hover {

    background-color: #ffb509;

}



.contact__form__controls-btn {

    width: 100%;

    color: #060f1b;

    background-color: #f0ca0c;

    cursor: pointer;

}



.contact__form__controls-link {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .contact__form__controls-link {

        font-size: 16px;

        line-height: 24px;

    }

}



.contact__form__controls-link {

    color: #f0ca0c;

    text-decoration: none;

    width: 100%;

    text-align: center;

}



.cta {

    background-color: #221f33;

    padding: 30px 20px;

}



@media all and (min-width: 769px) {

    .cta {

        padding: 50px 40px;

    }

}



@media all and (min-width: 1025px) {

    .cta {

        padding: 100px 40px;

    }

}



.cta__wrapper {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 20px;

    color: #ffffff;

    text-align: center;

    align-items: center;

}



.cta__title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .cta__title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .cta__title {

        font-size: 35px;

        line-height: 40px;

    }

}



.cta__description {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .cta__description {

        font-size: 16px;

        line-height: 24px;

    }

}



.cta__btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .cta__btn {

        font-size: 16px;

        line-height: 24px;

    }

}



.cta__btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



.cta__btn:hover {

    background-color: #ffb509;

}



.cta__btn {

    cursor: pointer;

    background-color: #f0ca0c;

    max-width: 145px;

    margin-top: 10px;

}



.quote {

    background-color: #020f1f;

    padding: 30px 20px;

    width: 100%;

}



@media all and (min-width: 769px) {

    .quote {

        padding: 80px 40px;

    }

}



.quote__wrap {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.quote__title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .quote__title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .quote__title {

        font-size: 35px;

        line-height: 40px;

    }

}



.quote__title {

    text-align: left;

}



.quote__text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .quote__text {

        font-size: 16px;

        line-height: 24px;

    }

}



.quote__text {

    width: 100%;

    padding-left: 20px;

    margin-top: 24px;

    max-width: 714px;

}



@media all and (min-width: 769px) {

    .quote__text {

        margin-left: auto;

    }

}



@media all and (min-width: 1025px) {

    .quote__text {

        max-width: 836px;

    }

}



.quote__name {

    font-family: Anton, sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}



@media all and (min-width: 769px) {

    .quote__name {

        font-size: 18px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .quote__name {

        font-size: 24px;

        line-height: 32px;

    }

}



.quote__name {

    text-align: right;

}



.gallery {

    width: 100%;

    padding: 30px 20px;

    display: flex;

    background-color: #020f1f;

}



@media all and (min-width: 769px) {

    .gallery {

        padding: 100px 40px;

    }

}



.gallery__wrapper {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



@media all and (min-width: 769px) {

    .gallery__wrapper {

        gap: 30px;

    }

}



.gallery__head {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.gallery__title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .gallery__title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .gallery__title {

        font-size: 35px;

        line-height: 40px;

    }

}



.gallery__text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .gallery__text {

        font-size: 16px;

        line-height: 24px;

    }

}



.gallery__body {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.gallery__body img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    border-radius: 15px;

}



@media all and (min-width: 769px) {

    .gallery__body img {

        height: 244px;

    }

}



@media all and (min-width: 1025px) {

    .gallery__body img {

        height: 400px;

    }

}



@media all and (min-width: 769px) {

    .gallery__body {

        flex-direction: row;

    }

}



.feature {

    background-color: #020f1f;

    padding: 30px 20px;

}



@media all and (min-width: 769px) {

    .feature {

        padding: 50px 40px;

    }

}



@media all and (min-width: 1025px) {

    .feature {

        padding: 60px 40px;

    }

}



.feature__wrapper {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 32px;

    max-width: 1200px;

    margin: 0 auto;

}



@media all and (min-width: 769px) {

    .feature__wrapper {

        flex-direction: row;

    }

}



.feature__info {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

}



@media all and (min-width: 769px) {

    .feature__info {

        align-items: flex-start;

    }

}



.feature__info-title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .feature__info-title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .feature__info-title {

        font-size: 35px;

        line-height: 40px;

    }

}



.feature__info-text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .feature__info-text {

        font-size: 16px;

        line-height: 24px;

    }

}



.feature__info-btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .feature__info-btn {

        font-size: 16px;

        line-height: 24px;

    }

}



.feature__info-btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



.feature__info-btn:hover {

    background-color: #ffb509;

}



.feature__info-btn {

    width: 100%;

    margin-top: 12px;

    max-width: 202px;

    background-color: #f0ca0c;

    text-decoration: none;

    color: #060f1b;

}



.feature__image {

    width: 280px;

    height: 292px;

    object-fit: cover;

    border-radius: 15px;

}



@media all and (min-width: 769px) {

    .feature__image {

        width: 381px;

        height: 500px;

    }

}



@media all and (min-width: 1025px) {

    .feature__image {

        width: 500px;

    }

}



.join {

    background-color: #020f1f;

    padding: 30px 20px;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}



@media all and (min-width: 769px) {

    .join {

        padding: 50px 40px;

    }

}



.join__container {

    width: 100%;

    max-width: 1200px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;

}



@media all and (min-width: 769px) {

    .join__container {

        flex-direction: row;

        gap: 100px;

    }

}



.join__count {

    width: 100%;

    max-width: 216px;

    height: 216px;

    border-radius: 1000px;

    border: 1px solid #f0ca0c;

    display: flex;

    align-items: center;

    justify-content: center;

}



.join__count-value {

    font-family: Anton, sans-serif;

    font-size: 26px;

    font-style: normal;

    font-weight: 400;

    line-height: 34px;

}



@media all and (min-width: 769px) {

    .join__count-value {

        font-size: 34px;

        line-height: 46px;

    }

}



@media all and (min-width: 1025px) {

    .join__count-value {

        font-size: 54px;

        line-height: 56px;

    }

}



.join__count-value {

    font-size: 54px;

    line-height: 56px;

}



.join__info {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.join__info-title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .join__info-title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .join__info-title {

        font-size: 35px;

        line-height: 40px;

    }

}



.join__info-text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .join__info-text {

        font-size: 16px;

        line-height: 24px;

    }

}



.recent-games {

    width: 100%;

    padding: 30px 20px;

    background-color: #020f1f;

}



.recent-games__container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;

}



.recent-games__title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .recent-games__title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .recent-games__title {

        font-size: 35px;

        line-height: 40px;

    }

}



.recent-games__list {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.recent-games__card {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 20px 10px;

    position: relative;

    border-radius: 15px;

}



.recent-games__card picture {

    position: absolute;

    z-index: 0;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



@media all and (min-width: 769px) {

    .recent-games__card {

        height: 100px;

        flex-direction: row;

        gap: 30px;

        align-items: center;

        padding: 20px;

    }

}



@media all and (min-width: 1025px) {

    .recent-games__card {

        gap: 130px;

        padding: 0 50px;

        justify-content: space-between;

    }

}



.recent-games__card-image {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 0;

    object-fit: cover;

    border-radius: 15px;

}



.recent-games__card-date {

    display: flex;

    width: 100%;

    gap: 10px;

    z-index: 1;

}



.recent-games__card-date__icon {

    width: 24px;

    height: 24px;

}



.recent-games__card-date__icon svg {

    width: 100%;

    height: 100%;

}



.recent-games__card-date__text {

    font-family: Anton, sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}



@media all and (min-width: 769px) {

    .recent-games__card-date__text {

        font-size: 18px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .recent-games__card-date__text {

        font-size: 24px;

        line-height: 32px;

    }

}



.recent-games__card-name {

    font-family: Anton, sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}



@media all and (min-width: 769px) {

    .recent-games__card-name {

        font-size: 18px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .recent-games__card-name {

        font-size: 24px;

        line-height: 32px;

    }

}



.recent-games__card-name {

    width: 100%;

    z-index: 1;

    color: #f0ca0c;

}



.recent-games__card-balls {

    width: 100%;

    display: flex;

    gap: 5px;

    align-items: stretch;

    justify-content: flex-start;

    z-index: 1;

}



@media all and (min-width: 769px) {

    .recent-games__card-balls {

        justify-content: flex-end;

    }

}



.recent-games__card-ball {

    width: 100%;

    max-width: 31px;

    height: 31px;

    background-color: #f0ca0c;

    color: #060f1b;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

}



.recent-games__card-ball:last-child {

    background-color: transparent;

    border: 1px solid #f0ca0c;

    color: #ffffff;

}



.about {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 20px;

    padding: 30px 20px;

    background-color: #221f33;

}



@media all and (min-width: 769px) {

    .about {

        padding: 50px 40px;

    }

}



@media all and (min-width: 1025px) {

    .about {

        gap: 30px;

    }

}



.about__title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .about__title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .about__title {

        font-size: 35px;

        line-height: 40px;

    }

}



.about__title {

    width: 100%;

    max-width: 1200px;

}



.about__description {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .about__description {

        font-size: 16px;

        line-height: 24px;

    }

}



.about__description {

    width: 100%;

    max-width: 1200px;

}



.reviews {

    width: 100%;

    background-color: #020f1f;

    padding: 30px 20px;

}



@media all and (min-width: 769px) {

    .reviews {

        padding: 50px 40px;

    }

}



@media all and (min-width: 1025px) {

    .reviews {

        padding: 100px 40px;

    }

}



.reviews__wrap {

    width: 100%;

    max-width: 1440px;

    padding: 0;

    margin: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 40px;

}



@media all and (min-width: 1025px) {

    .reviews__wrap {

        padding: 0 120px;

    }

}



.reviews__header {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.reviews__title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .reviews__title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .reviews__title {

        font-size: 35px;

        line-height: 40px;

    }

}



.reviews__description {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .reviews__description {

        font-size: 16px;

        line-height: 24px;

    }

}



.reviews__slider {

    width: 100%;

}



@media all and (min-width: 769px) {

    .reviews__slider {

        display: none;

    }

}



.reviews__body {

    display: none;

}



@media all and (min-width: 769px) {

    .reviews__body {

        display: flex;

        width: 100%;

        gap: 20px;

        justify-content: center;

    }

}



.reviews__item {

    width: 100%;

    max-width: 280px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}



.reviews__item-text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .reviews__item-text {

        font-size: 16px;

        line-height: 24px;

    }

}



.reviews__item-stars {

    width: 166px;

    height: 30px;

    object-fit: contain;

}



.reviews__item-name {

    font-family: Anton, sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}



@media all and (min-width: 769px) {

    .reviews__item-name {

        font-size: 18px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .reviews__item-name {

        font-size: 24px;

        line-height: 32px;

    }

}



.hero {

    width: 100%;

    padding: 50px 20px;

    background-position: center;

    background-size: cover;

}



@media all and (min-width: 769px) {

    .hero {

        padding: 134px 40px;

    }

}



@media all and (min-width: 1025px) {

    .hero {

        padding: 150px 40px;

    }

}



.hero__cont {

    width: 100%;

    max-width: 1200px;

    display: flex;

    flex-direction: column;

    gap: 20px;

    align-items: flex-start;

    margin: 0 auto;

}



.hero__info {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 20px;

    max-width: 483px;

}



@media all and (min-width: 1025px) {

    .hero__info {

        max-width: 687px;

    }

}



.hero__title {

    font-family: Anton, sans-serif;

    font-size: 26px;

    font-style: normal;

    font-weight: 400;

    line-height: 34px;

}



@media all and (min-width: 769px) {

    .hero__title {

        font-size: 34px;

        line-height: 46px;

    }

}



@media all and (min-width: 1025px) {

    .hero__title {

        font-size: 54px;

        line-height: 56px;

    }

}



.hero__title {

    width: 100%;

}



.hero__text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .hero__text {

        font-size: 16px;

        line-height: 24px;

    }

}



.hero__text {

    width: 100%;

}



.hero__btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .hero__btn {

        font-size: 16px;

        line-height: 24px;

    }

}



.hero__btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



.hero__btn:hover {

    background-color: #ffb509;

}



.hero__btn {

    background-color: #f0ca0c;

    width: 100%;

    max-width: 140px;

    text-decoration: none;

    color: #060f1b;

}



.hero .timer {

    display: flex;

    flex-direction: column;

    gap: 10px;

    max-width: 483px;

}



@media all and (min-width: 769px) {

    .hero .timer {

        gap: 20px;

    }

}



@media all and (min-width: 1025px) {

    .hero .timer {

        max-width: 687px;

    }

}



.hero .timer__draw {

    font-family: Anton, sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}



@media all and (min-width: 769px) {

    .hero .timer__draw {

        font-size: 18px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .hero .timer__draw {

        font-size: 24px;

        line-height: 32px;

    }

}



.hero .timer__wrapper {

    width: 100%;

    display: flex;

    padding: 10px 0;

    background-color: #060f1b;

    border-radius: 15px;

}



@media all and (min-width: 769px) {

    .hero .timer__wrapper {

        padding: 20px 0;

    }

}



@media all and (min-width: 1025px) {

    .hero .timer__wrapper {

        padding: 20px;

    }

}



.hero .timer__split {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 0 10px;

    border-right: 1px solid #ffffff;

}



@media all and (min-width: 769px) {

    .hero .timer__split {

        padding: 0 20px;

    }

}



@media all and (min-width: 1025px) {

    .hero .timer__split {

        padding: 0 30px;

    }



    .hero .timer__split:first-child {

        padding-left: 0;

    }



    .hero .timer__split:last-child {

        padding-right: 0;

    }

}



.hero .timer__split:last-child {

    border-right: none;

}



.hero .timer__split-name {

    font-family: Inter, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: 600;

    line-height: 17px;

}



@media all and (min-width: 769px) {

    .hero .timer__split-name {

        font-size: 16px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .hero .timer__split-name {

        font-size: 18px;

        line-height: 32px;

    }

}



.hero .timer__split-value {

    font-family: Anton, sans-serif;

    font-size: 24px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .hero .timer__split-value {

        font-size: 50px;

        line-height: 50px;

    }

}



@media all and (min-width: 1025px) {

    .hero .timer__split-value {

        font-size: 80px;

        line-height: 80px;

    }

}



.hero .timer__split-value {

    color: #f0ca0c;

}



.discover {

    padding: 20px;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #020f1f;

}



@media all and (min-width: 769px) {

    .discover {

        padding: 40px;

    }

}



@media all and (min-width: 1025px) {

    .discover {

        padding: 60px 40px;

    }

}



.discover__wrapper {

    width: 100%;

    max-width: 1200px;

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.discover__header {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;

    align-items: center;

    text-align: center;

}



.discover__title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .discover__title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .discover__title {

        font-size: 35px;

        line-height: 40px;

    }

}



.discover__descriptoin {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .discover__descriptoin {

        font-size: 16px;

        line-height: 24px;

    }

}



.discover__body {

    display: none;

}



@media all and (min-width: 769px) {

    .discover__body {

        width: 100%;

        display: flex;

        gap: 32px;

    }

}



@media all and (min-width: 1025px) {

    .discover__body {

        gap: 64px;

    }

}



.discover__slider {

    width: 100%;

    padding-bottom: 54px;

}



@media all and (min-width: 769px) {

    .discover__slider {

        display: none;

    }

}



.discover__slider .splide__pagination {

    bottom: 0;

    padding: 8px 0;

    display: flex;

    gap: 8px;

}



.discover__slider .splide__pagination__page {

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background-color: #221f33;

    opacity: 1;

    margin: 0;

}



.discover__slider .splide__pagination__page.is-active {

    background-color: #f0ca0c;

    transform: none;

}



.discover__item {

    width: 100%;

    max-width: 250px;

    display: flex;

    flex-direction: column;

    gap: 24px;

    align-items: center;

    text-align: center;

}



@media all and (min-width: 769px) {

    .discover__item {

        max-width: 100%;

    }

}



.discover__item-header {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 24px;

    text-align: center;

    padding-bottom: 12px;

    border-bottom: 1px solid #f0ca0c;

}



.banner {

    width: 100%;

    background-color: #020f1f;

    padding: 20px;

}



@media all and (min-width: 769px) {

    .banner {

        padding: 40px;

    }

}



@media all and (min-width: 1025px) {

    .banner {

        padding: 60px 40px;

    }

}



.banner__container {

    width: 100%;

    display: flex;

    max-width: 1200px;

    margin: 0 auto;

}



.banner__block {

    width: 100%;

    display: none;

}



@media all and (min-width: 769px) {

    .banner__block {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 32px;

    }

}



.banner__slider {

    width: 100%;

    padding-bottom: 50px;

}



@media all and (min-width: 769px) {

    .banner__slider {

        display: none;

    }

}



.banner__slider .splide__pagination {

    bottom: 0;

    padding: 8px 0;

    display: flex;

    gap: 8px;

}



.banner__slider .splide__pagination__page {

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background-color: #221f33;

    opacity: 1;

    margin: 0;

}



.banner__slider .splide__pagination__page.is-active {

    background-color: #f0ca0c;

    transform: none;

}



.banner__item {

    width: 100%;

    max-width: 250px;

    display: flex;

    flex-direction: column-reverse;

    gap: 32px;

}



@media all and (min-width: 769px) {

    .banner__item {

        max-width: 100%;

        flex-direction: row;

        align-items: center;

        justify-content: center;

    }



    .banner__item:last-child {

        flex-direction: row-reverse;

    }

}



.banner__item-image {

    width: 100%;

    height: 280px;

    object-fit: cover;

}



@media all and (min-width: 769px) {

    .banner__item-image {

        max-width: 361px;

        height: 300px;

    }

}



@media all and (min-width: 1025px) {

    .banner__item-image {

        max-width: 500px;

        height: 500px;

    }

}



.banner__item-info {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



@media all and (min-width: 769px) {

    .banner__item-info {

        max-width: 361px;

    }

}



@media all and (min-width: 1025px) {

    .banner__item-info {

        max-width: 456px;

    }

}



.banner__item-title {

    font-family: Anton, sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}



@media all and (min-width: 769px) {

    .banner__item-title {

        font-size: 18px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .banner__item-title {

        font-size: 24px;

        line-height: 32px;

    }

}



.banner__item-text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .banner__item-text {

        font-size: 16px;

        line-height: 24px;

    }

}



.banner__item-btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .banner__item-btn {

        font-size: 16px;

        line-height: 24px;

    }

}



.banner__item-btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



.banner__item-btn:hover {

    background-color: #ffb509;

}



.banner__item-btn {

    width: 100%;

    max-width: 142px;

    background-color: #f0ca0c;

    text-decoration: none;

    color: #060f1b;

}



.auth {

    width: 100%;

    height: 100%;

    background-color: #020f1f;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0;

    padding: 0;

}



@media all and (min-width: 769px) {

    .auth {

        flex-direction: row;

    }

}



.auth .wrap {

    width: 100%;

    max-width: 1200px;

    display: flex;

}



.auth__head {

    padding: 20px;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}



@media all and (min-width: 769px) {

    .auth__head {

        height: calc(100% - 200px);

        width: 180px;

        box-sizing: content-box;

        padding: 100px 40px;

        gap: 100px;

        justify-content: flex-start;

        align-items: flex-start;

    }

}



@media all and (min-width: 1025px) {

    .auth__head {

        width: 251px;

        padding: 100px 120px;

    }

}



.auth__tab {

    width: 100%;

    height: 100%;

    padding: 30px 20px;

    background-color: #221f33;

    display: flex;

    align-items: center;

    justify-content: center;

}



@media all and (min-width: 769px) {

    .auth__tab {

        padding: 60px 30px;

    }

}



@media all and (min-width: 1025px) {

    .auth__tab {

        padding: 120px 50px;

    }

}



.auth__title {

    font-family: Anton, sans-serif;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



@media all and (min-width: 769px) {

    .auth__title {

        font-size: 28px;

        line-height: 38px;

    }

}



@media all and (min-width: 1025px) {

    .auth__title {

        font-size: 35px;

        line-height: 40px;

    }

}



.auth__control {

    display: flex;

    width: 100%;

    align-items: center;

    justify-content: center;

    gap: 10px;

}



@media all and (min-width: 769px) {

    .auth__control {

        flex-direction: column;

        gap: 20px;

        max-width: 177px;

    }

}



@media all and (min-width: 1025px) {

    .auth__control {

        max-width: 251px;

    }

}



.auth__control-btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .auth__control-btn {

        font-size: 16px;

        line-height: 24px;

    }

}



.auth__control-btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



.auth__control-btn:hover {

    background-color: #ffb509;

}



.auth__control-btn {

    width: 100%;

    color: #ffffff;

    text-decoration: none;

    background-color: transparent;

}



.auth__control-btn:last-child {

    color: #f0ca0c;

}



.auth__control-btn.active {

    background-color: #221f33;

}



.auth__control-btn:hover:not(.active) {

    color: #060f1b;

}



.login-form {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 32px;

}



.login-form__inputs {

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 32px;

}



@media all and (min-width: 769px) {

    .login-form__inputs {

        flex-direction: row;

        gap: 20px;

    }

}



.login-form .input {

    width: 100%;

    padding: 0;

    border: none;

    display: flex;

    flex-direction: column;

    gap: 10px;

    background-color: transparent;

    position: relative;

}



.login-form .input__label {

    font-family: Inter, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: 600;

    line-height: 17px;

}



@media all and (min-width: 769px) {

    .login-form .input__label {

        font-size: 16px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .login-form .input__label {

        font-size: 18px;

        line-height: 32px;

    }

}



.login-form .input__field {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .login-form .input__field {

        font-size: 16px;

        line-height: 24px;

    }

}



.login-form .input__field {

    width: 100%;

    padding: 16px;

    border-radius: 15px;

    border: 3px solid transparent;

    outline: none;

}



.login-form .input__field:focus-visible,

.login-form .input__field:focus {

    border: 3px solid #1e71b9;

}



.login-form .input__eye {

    width: 24px;

    height: 24px;

    position: absolute;

    cursor: pointer;

    top: 44px;

    right: 16px;

}



.login-form .input__eye svg {

    width: 100%;

    height: 100%;

}



@media all and (min-width: 769px) {

    .login-form .input__eye {

        top: 53px;

    }

}



@media all and (min-width: 1025px) {

    .login-form .input__eye {

        top: 61px;

    }

}



.login-form .input__error {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .login-form .input__error {

        font-size: 16px;

        line-height: 24px;

    }

}



.login-form .input__error {

    color: #ce1919;

    margin-top: -6px;

}



.login-form__controls {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.login-form__controls-btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .login-form__controls-btn {

        font-size: 16px;

        line-height: 24px;

    }

}



.login-form__controls-btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



.login-form__controls-btn:hover {

    background-color: #ffb509;

}



.login-form__controls-btn {

    width: 100%;

    color: #060f1b;

    background-color: #f0ca0c;

    cursor: pointer;

}



.login-form__controls-link {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .login-form__controls-link {

        font-size: 16px;

        line-height: 24px;

    }

}



.login-form__controls-link {

    color: #f0ca0c;

    text-decoration: none;

    width: 100%;

    text-align: center;

}



.form {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 32px;

}



.form__inputs {

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 32px;

}



@media all and (min-width: 769px) {

    .form__inputs {

        flex-direction: row;

        gap: 20px;

    }

}



.form__checkbox {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.form__checkbox label {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    text-align: left;

    gap: 8px;

    cursor: pointer;

    user-select: none;

}



.form__checkbox label span {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .form__checkbox label span {

        font-size: 16px;

        line-height: 24px;

    }

}



.form__checkbox label span {

    color: #ffffff;

}



.form__checkbox label span a {

    color: inherit;

}



.form__checkbox-icon {

    min-width: 16px;

    height: 16px;

}



.form__checkbox-icon svg {

    width: 100%;

    height: 100%;

}



.form .input {

    width: 100%;

    padding: 0;

    border: none;

    display: flex;

    flex-direction: column;

    gap: 10px;

    background-color: transparent;

    position: relative;

}



.form .input__label {

    font-family: Inter, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: 600;

    line-height: 17px;

}



@media all and (min-width: 769px) {

    .form .input__label {

        font-size: 16px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .form .input__label {

        font-size: 18px;

        line-height: 32px;

    }

}



.form .input__field {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .form .input__field {

        font-size: 16px;

        line-height: 24px;

    }

}



.form .input__field {

    width: 100%;

    padding: 16px;

    border-radius: 15px;

    border: 3px solid transparent;

    outline: none;

}



.form .input__field:focus-visible,

.form .input__field:focus {

    border: 3px solid #1e71b9;

}



.form .input__eye {

    width: 24px;

    height: 24px;

    position: absolute;

    cursor: pointer;

    top: 44px;

    right: 16px;

}



.form .input__eye svg {

    width: 100%;

    height: 100%;

}



@media all and (min-width: 769px) {

    .form .input__eye {

        top: 53px;

    }

}



@media all and (min-width: 1025px) {

    .form .input__eye {

        top: 61px;

    }

}



.form .input__error {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .form .input__error {

        font-size: 16px;

        line-height: 24px;

    }

}



.form .input__error {

    color: #ce1919;

    margin-top: -6px;

}



.form__controls {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.form__controls-btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .form__controls-btn {

        font-size: 16px;

        line-height: 24px;

    }

}



.form__controls-btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



.form__controls-btn:hover {

    background-color: #ffb509;

}



.form__controls-btn {

    width: 100%;

    max-width: 200px;

    color: #060f1b;

    background-color: #f0ca0c;

    cursor: pointer;

}



.form__controls-link {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .form__controls-link {

        font-size: 16px;

        line-height: 24px;

    }

}



.form__controls-link {

    color: #f0ca0c;

    text-decoration: none;

    width: 100%;

    text-align: center;

}



.age-decline {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background-color: #020f1f;

}



@media all and (min-width: 769px) {

    .age-decline {

        padding: 40px;

    }

}



.age-decline__wrapper {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 20px;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.age-decline__title {

    font-family: Anton, sans-serif;

    font-size: 26px;

    font-style: normal;

    font-weight: 400;

    line-height: 34px;

}



@media all and (min-width: 769px) {

    .age-decline__title {

        font-size: 34px;

        line-height: 46px;

    }

}



@media all and (min-width: 1025px) {

    .age-decline__title {

        font-size: 54px;

        line-height: 56px;

    }

}



.age-decline__text {

    font-family: Anton, sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}



@media all and (min-width: 769px) {

    .age-decline__text {

        font-size: 18px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .age-decline__text {

        font-size: 24px;

        line-height: 32px;

    }

}



.age-decline__text {

    margin-top: 20px;

}



@media all and (min-width: 769px) {

    .age-decline__text {

        margin-top: 40px;

    }

}



.not-found {

    width: 100%;

    background-color: #ffffff;

    color: #060f1b;

    padding: 150px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}



@media all and (min-width: 769px) {

    .not-found {

        padding: 200px 40px;

    }

}



.not-found__container {

    width: 100%;

    max-width: 600px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 50px;

}



.not-found__404-icon {

    width: 73px;

    height: 43px;

}



@media all and (min-width: 769px) {

    .not-found__404-icon {

        width: 118px;

        height: 70px;

    }

}



@media all and (min-width: 1025px) {

    .not-found__404-icon {

        width: 146px;

        height: 87px;

    }

}



.not-found__404-icon svg {

    width: 100%;

    height: 100%;

}



.not-found__text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .not-found__text {

        font-size: 16px;

        line-height: 24px;

    }

}



.policy {

    background-color: #ffffff;

    width: 100%;

    padding: 60px 20px;

    color: #060f1b;

}



.policy__wrap {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 50px;

}



.policy__title {

    font-family: Anton, sans-serif;

    font-size: 26px;

    font-style: normal;

    font-weight: 400;

    line-height: 34px;

}



@media all and (min-width: 769px) {

    .policy__title {

        font-size: 34px;

        line-height: 46px;

    }

}



@media all and (min-width: 1025px) {

    .policy__title {

        font-size: 54px;

        line-height: 56px;

    }

}



.policy__text {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .policy__text {

        font-size: 16px;

        line-height: 24px;

    }

}



.policy__text a {

    color: #060f1b;

}



.policy__list {

    padding-left: 25px;

}



.policy__list-item {

    font-family: Anton, sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

}



@media all and (min-width: 769px) {

    .policy__list-item {

        font-size: 18px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .policy__list-item {

        font-size: 24px;

        line-height: 32px;

    }

}



.policy__links {

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 20px;

}



@media all and (min-width: 769px) {

    .policy__links {

        flex-direction: row;

        gap: 150px;

    }

}



.policy__links-url {

    font-family: Inter, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: 600;

    line-height: 17px;

}



@media all and (min-width: 769px) {

    .policy__links-url {

        font-size: 16px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .policy__links-url {

        font-size: 18px;

        line-height: 32px;

    }

}



.policy__links-url {

    color: #060f1b;

}



.forgot-pass {

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #221f33;

    padding: 30px 20px;

}



@media all and (min-width: 769px) {

    .forgot-pass {

        padding: 50px 100%;

    }

}



@media all and (min-width: 1025px) {

    .forgot-pass {

        padding: 100px;

    }

}



.forgot-pass__content {

    width: 100%;

    max-width: 920px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;

}



.reset-form {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    gap: 32px;

}



.reset-form__inputs {

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 32px;

}



@media all and (min-width: 769px) {

    .reset-form__inputs {

        flex-direction: row;

        gap: 20px;

    }

}



.reset-form .input {

    width: 100%;

    padding: 0;

    border: none;

    display: flex;

    flex-direction: column;

    gap: 10px;

    background-color: transparent;

    position: relative;

}



.reset-form .input__label {

    font-family: Inter, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: 600;

    line-height: 17px;

}



@media all and (min-width: 769px) {

    .reset-form .input__label {

        font-size: 16px;

        line-height: 24px;

    }

}



@media all and (min-width: 1025px) {

    .reset-form .input__label {

        font-size: 18px;

        line-height: 32px;

    }

}



.reset-form .input__field {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .reset-form .input__field {

        font-size: 16px;

        line-height: 24px;

    }

}



.reset-form .input__field {

    width: 100%;

    padding: 16px;

    border-radius: 15px;

    border: 3px solid transparent;

    outline: none;

}



.reset-form .input__field:focus-visible,

.reset-form .input__field:focus {

    border: 3px solid #1e71b9;

}



.reset-form .input__eye {

    width: 24px;

    height: 24px;

    position: absolute;

    cursor: pointer;

    top: 44px;

    right: 16px;

}



.reset-form .input__eye svg {

    width: 100%;

    height: 100%;

}



@media all and (min-width: 769px) {

    .reset-form .input__eye {

        top: 53px;

    }

}



@media all and (min-width: 1025px) {

    .reset-form .input__eye {

        top: 61px;

    }

}



.reset-form .input__error {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .reset-form .input__error {

        font-size: 16px;

        line-height: 24px;

    }

}



.reset-form .input__error {

    color: #ce1919;

    margin-top: -6px;

}



.reset-form__controls {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.reset-form__controls-btn {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .reset-form__controls-btn {

        font-size: 16px;

        line-height: 24px;

    }

}



.reset-form__controls-btn {

    width: auto;

    padding: 14px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s ease-in-out;

    border-radius: 15px;

    border: 2px solid transparent;

    outline: none;

}



.reset-form__controls-btn:hover {

    background-color: #ffb509;

}



.reset-form__controls-btn {

    width: 100%;

    color: #060f1b;

    background-color: #f0ca0c;

    cursor: pointer;

}



.reset-form__controls-link {

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

}



@media all and (min-width: 769px) {

    .reset-form__controls-link {

        font-size: 16px;

        line-height: 24px;

    }

}



.reset-form__controls-link {

    color: #f0ca0c;

    text-decoration: none;

    width: 100%;

    text-align: center;

}