@font-face {
    font-family: 'Benzin-Bold';
    src: url('../fonts/benzin-bold.eot');
    src: url('../fonts/benzin-bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/benzin-bold.woff2') format('woff2'),
        url('../fonts/benzin-bold.woff') format('woff'),
        url('../fonts/benzin-bold.ttf') format('truetype'),
        url('../fonts/benzin-bold.svg#benzin-bold') format('svg');
}

:root {
    --color-bg: #141415;
    --color-dark: #1D1E20;
    --color-white: #fff;
    --color-black: #000;

    /* Прозрачные */
    --color-border: #FFFFFF40;
    --color-border-light: #FFFFFF26;
    --color-overlay: rgba(255, 255, 255, 0.2);
    --color-overlay-active: rgba(255, 255, 255, 0.15);

    --color-text-secondary: #8E8E8F;
}

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

body {
    background-color: var(--color-bg);
}

.container {
    max-width: 1140px;
    margin: 0 auto;
}

#copy-notice {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1BF1FF;
    color: #000000;
    padding: 8px 12px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 500;
}

#copy-notice.show {
    opacity: 1;
}

.header {
   background: linear-gradient(94.52deg, #029DFD 0%, #0347CD 100%);
    position: relative;
    margin-top: 40px;
    border-radius: 40px 40px 0 0;
}

.bg {
    width: 100%;
    height: 100%;
    background-image: url('../img/bg_1.png');
    background-size: cover;
    background-position: right;
    position: absolute;
    border-radius: 40px 40px 0 0;
 

}

.header__top {
    max-width: 660px;
    padding: 36px 0 37px 60px;
    z-index: 9;
    position: relative;
}

.header__title {
    font-family: Benzin-Bold;
    font-weight: 400;
    font-size: 36px;
    line-height: 52px;
    text-transform: uppercase;
    color: var(--color-white);

}

.header__text-bold {

    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    color: var(--color-white);
}

.header__text {
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-white);
    padding: 16px 0 0 0px;
    padding-bottom: 29px;
}

.header__buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header__buttons a {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    text-decoration: none;
    letter-spacing: 0;
    color: var(--color-white);
    position: relative;
    display: flex;
    width: fit-content;
    padding: 14px 33px 14px 33px;
}


.btn {

    border: 1px solid #FFFFFF40;
    background: linear-gradient(180deg, #C164FF 0%, #8A2EFF 100%);
    border-radius: 14px;
}

.btn:hover {
    background: linear-gradient(180deg, #D27FFF 0%, #9D4BFF 100%);
    transform: scale(0.98);
}

.btn:active {
    background: linear-gradient(180deg, #A64DFF 0%, #7420E6 100%);
}

.header__button span,
.header__button--secondary span {
    padding-left: 11px;

}

.header__button--secondary {
    backdrop-filter: blur(8px);
    border: 1px solid var(--color-border);
    background: var(--color-border);
    border-radius: 14px;
}

.header__button--secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.header__button--secondary:active {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0.99);
}

/*  Бонус */
.bonus {
    height: 139px;
    background-color: var(--color-dark);
    background:
        linear-gradient(270deg, rgba(3, 71, 205, 0) 50%, rgba(2, 157, 253, 0.5) 100%),
        linear-gradient(95.56deg, rgba(138, 46, 255, 0) 50%, rgba(193, 100, 255, 0.5) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0 0 40px 40px;
    padding: 0 60px;
}

.bonus__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    background-image: url('../icons/gift.svg');
    justify-content: center;
    align-items: center;

}

.anim9 {
    animation: anim9 3s infinite linear;
}

@keyframes anim9 {
    0% {
        box-shadow: 0 0 10px #1BF1FF;
    }

    50% {
        box-shadow: 0 0 25px #0855C4;
    }

    100% {
        box-shadow: 0 0 10px #1BF1FF;
    }
}

.bonus__content {
    font-family: 'Montserrat';
    font-size: 18px;
    padding-left: 19px;
    padding-right: 10px;
    flex: 1;
}

.bonus__title {

    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 7px;
}

.bonus__text {
    color: var(--color-white);
}

.bonus__code {
    width: 199px;
    height: 56px;

    display: flex;
    cursor: pointer;
}

.code__left {
    height: 100%;
    width: 25px;
    background: url("../icons/code-left.svg") no-repeat center/auto 100%;

}

.code__center {
    flex: 1;
    background: url("../icons/code-center.svg") repeat-x center/auto 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.code__right {
    height: 100%;
    width: 25px;
    background: url("../icons/code-right.svg") no-repeat center/auto 100%;
}

.bonus__copy-img {
    padding-left: 12px;
}

.bonus__code:hover {
    filter: brightness(0.9);
}

.bonus__code:active {
    filter: brightness(0.8);
}

.bonus__info {
    display: flex;
    flex: 1;
    align-items: center;
}

.bonus__code span {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-white);
}

.bonus__code img {
    cursor: pointer;
}

.content {
    background: var(--color-dark);

    border-radius: 40px;
    margin: 30px 0;
}

.content__block {
    border-bottom: 1px solid var(--color-border-light);
    padding: 45px 60px 52px 60px;
}

.content__title, h2 {
    font-family: 'Benzin-Bold';
    font-weight: 400;
    font-size: 24px;
    line-height: 35px;
    text-transform: uppercase;
    color: var(--color-white);
    padding-bottom: 8px;
}

.content__text,
ol, ul {
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-white);
    padding-top: 10px;
}

ol, ul {
    padding-left: 35px;
}

ol li , ul li {
    padding: 5px 0;
}

.content__img-foto {
    margin: 33px auto 0;
    display: block;
    border-radius: 20px;
}

.content__img_text {
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-text-secondary);
    text-align: center;
    padding: 16px 0 23px 0px;
}

.content__img-foto {
    width: 100%;
    max-width: 752px;
    height: auto;
}

.footer {
    width: 100%;
    height: auto;
    background-image: url('../icons/footer-bg.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 30px;
    border-radius: 20px;
}

.footer__content {
    padding: 24px 24px 24px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer__buttons a {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    text-decoration: none;
    letter-spacing: 0;
    color: var(--color-white);
    position: relative;
    display: flex;
    width: fit-content;
    padding: 14px 33px 14px 33px;
}

.header__bonus_5 {
    width: 199px;
}

@media (max-width: 1100px) {
    .footer__content {
        flex-direction: column;
        padding: 24px;
    }

    .footer__buttons {

        margin-top: 15px;
    }
    .footer__logo{
        padding-bottom: 16px;
    }
}

@media (max-width: 1080px) {


    .header__top {
        max-width: 670px;
    }
}

@media (max-width: 1040px) {

    .header {
        margin-top: 0;
    }

    .header,
    .bg,
    .bonus {
        border-radius: 0;
    }

    .bg {
        background: url(../img/bg2_1.png) top center no-repeat;
    }

    .header__top {
        max-width: 710px;
        margin: 0 auto;
        padding: 269px 30px 40px 30px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


}

@media (max-width: 950px) {
    .header__title {

        font-size: 31px;
    }

    .footer__buttons {
        flex-direction: column;
        width: 100%;
    }

    .footer__buttons a {
        width: 100%;
        justify-content: center;
    }

    .footer {
        background-image: url('../icons/footer-bg-m.svg');
    }

    .header__bonus_6 {
        width: 100%;
    }
}

@media (max-width: 830px) {
    .bonus {
        height: auto;
        display: flex;
        flex-direction: column;
    }


    .bonus__info {
        margin: 35px 0 0px 0;
    }

    .header__bonus_5 {
        margin: 32px 0;
        width: 100%;
    }
}

@media (max-width: 750px) {
    .header__title {

        font-size: 26px;
    }

    .header__text,
    .header__buttons a {
        width: 100%;
        font-size: 17px;
        justify-content: center;
    }

    .header__buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 27px;
    }

    .header__button--secondary {
        margin-left: 0;
    }

    .bonus {
        padding: 0 40px;
    }

    .content__block {
        padding: 45px 40px 52px 40px;
    }
}

@media (max-width: 600px) {
    .content__block {
        padding: 25px 20px 32px 20px;
    }

    .bonus {
        padding: 0 20px;
    }
}

@media (max-width: 500px) {
    .header__title {

        font-size: 21px;
    }

    .header__text,
    .header__buttons a {

        font-size: 16px;

    }

    .header__top {
        padding: 269px 15px 40px 15px;
    }
}