@import url('./vars.css');

body:has(nav.menu-open),
body:has(.popup-cookie.isPopupActive),
body:has(.become-agent__popup-overlay.isPopupActive) {
    overflow: hidden;
    width: 100%;
    height: 100%;
    touch-action: none;
    overscroll-behavior: none;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
        background: transparent;
        width: 0;
    }
}

/* HEADER */
header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    background-color: var(--black);

    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 100%;
        padding: 16px 40px;

        .logo {
            width: 168px;
            height: 52px;
            z-index: 5;
            cursor: pointer;
        }

        nav ul {
            display: flex;
            align-items: center;
            text-align: center;
            gap: 40px;

            li a {
                font-size: 18px;
                color: var(--white);
                text-transform: uppercase;
                cursor: pointer;
                transition: transform .1s ease-in-out, color .1s ease-in-out;

                &:hover {
                    transform: translateY(-2px);
                    color: var(--green);
                }
            }
        }

        .links-wrap {
            display: flex;
            align-items: center;
            gap: 40px;

            .mainBtn {
                border: 1px solid var(--green);
                border-radius: 3px;
                background-color: var(--green);
                color: var(--black);
                padding: 11.5px 42px;
                transition: background-color .2s ease, color .2s ease;

                &:hover {
                    background-color: transparent;
                    color: var(--green);
                }

                span {
                    font-size: 18px;
                    font-weight: 600;
                    text-transform: uppercase;
                }
            }

            .burger-menu {
                display: none;
                flex-direction: column;

                .burger-menu__btn {
                    position: relative;
                    z-index: 5;
                    width: 20px;
                    height: 12px;
                    background: none;
                    border: none;
                    padding: 0;
                    cursor: pointer;

                    span,
                    &::before,
                    &::after {
                        content: '';
                        position: absolute;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        background-color: var(--white);
                        transition: transform .3s ease, background-color .3s ease;
                    }

                    span {
                        top: 5.5px;
                    }

                    &::before {
                        top: 0;
                    }

                    &::after {
                        bottom: 0;
                    }

                    &.active {
                        span {
                            background-color: transparent;
                        }

                        &::before {
                            transform: rotate(45deg);
                            top: 5.5px;
                        }

                        &::after {
                            transform: rotate(-45deg);
                            bottom: 5.5px;
                        }
                    }
                }

                nav {
                    position: absolute;
                    z-index: 1;
                    inset: 0;
                    width: 100%;
                    height: 100dvh;
                    background-color: var(--black);
                    transform: translateY(-100%);
                    opacity: 0;
                    pointer-events: none;
                    transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
                    will-change: transform;

                    ul {
                        position: absolute;
                        top: 84px;
                        left: 10px;
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;

                        li {
                            width: 100%;

                            a {
                                display: block;
                                font-family: 'TT Squares Condensed', sans-serif;
                                font-size: 26px;
                                line-height: calc(32 / 26);
                                text-align: left;
                                padding: 20px 0;
                                color: transparent;
                                border-bottom: 1px solid var(--white);
                                border-bottom: 1px solid var(--gray);
                                -webkit-text-stroke: 1px var(--white);
                            }
                        }
                    }
                }

                nav.menu-open {
                    transform: translateY(0);
                    opacity: 1;
                    pointer-events: auto;
                }
            }
        }

        .language-select {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 5;

            button {
                font-size: 18px;
                color: var(--white);
                background-color: transparent;
                border: none;
                cursor: pointer;
            }

            .active-lang {
                display: flex;
                align-items: center;
                gap: 11px;
                font-size: 18px;
                cursor: pointer;

                img {
                    width: 22px;
                    height: 22px;
                }
            }

            .lang-list {
                display: none;
                flex-direction: column;
                gap: 4px;
                position: absolute;
                top: 50%;
                right: 50%;
                transform: translate(15%, 15%);
                z-index: 10;
                padding: 4px;
                background-color: var(--black);
                border: 1px solid var(--green);
                border-radius: 3px;

                li {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    cursor: pointer;

                    button {
                        border: none;
                        border-radius: 3px;
                        background-color: var(--green);
                        padding: 2px 8px;
                        transition: color .2s ease;

                        &:hover {
                            color: var(--black);
                        }
                    }
                }
            }

            .lang-list.active {
                display: flex;
            }
        }
    }
}

/* MAIN */
main {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* INTRO SECTION */
#intro {
    position: relative;
    padding-top: 160px;

    .main-banner {
        position: absolute;
        top: 0;
        z-index: -1;
        width: 100%;
        object-fit: contain;
    }

    .main-banner__mobile {
        display: none;
    }

    .container {
        display: flex;
        flex-direction: column;
        gap: 48px;

        .intro__title {
            display: flex;
            flex-direction: column;
            gap: 30px;
            /*max-width: 761px;*/
            max-width: 818px;

            h1 {
                font-family: 'TT Squares Condensed', sans-serif;
                font-weight: 900;
                font-size: 72px;
                line-height: calc(86 / 72);
                text-transform: uppercase;

                span:last-of-type {
                    color: var(--green);
                }
            }

            h2 {
                font-size: 18px;
                font-weight: 400;
                line-height: calc(28 / 18);
            }
        }

        .intro__links {
            display: flex;
            gap: 40px;

            a {
                border: 1px solid var(--green);
                border-radius: 3px;
                background-color: var(--green);
                color: var(--black);
                padding: 11.5px 42px;
                text-transform: uppercase;
                transition: background-color .2s ease, color .2s ease;

                &:hover {
                    background-color: transparent;
                    color: var(--green);
                }

                span {
                    font-size: 18px;
                    font-weight: 600;
                }
            }

            a:last-child {
                border: 1px solid var(--purple);
                color: var(--white);
                background-color: transparent;
                transition: background-color .2s ease, color .2s ease;

                &:hover {
                    background-color: var(--purple);
                    color: var(--black);
                }
            }
        }

        .intro__agent-steps {
            display: flex;
            gap: 45px;

            .agent-step {
                display: flex;
                flex-direction: column;
                gap: 10px;
                cursor: pointer;

                a {
                    color: var(--white);
                    font-family: 'TT Squares Condensed', sans-serif;
                    font-size: 14px;
                    line-height: calc(14 / 14);
                    text-transform: uppercase;
                }

                img {
                    width: 60px;
                    height: 60px;
                }
            }
        }
    }
}

/* TRUST SECTION */
#trust {
    margin-top: 15vw;
    border-radius: 3px;
    border-top: 1px solid var(--green);
    border-bottom: 1px solid var(--green);
    background: linear-gradient(54deg, rgba(0, 0, 0, 0) 11.7%, rgba(63, 214, 43, .5) 95.77%);

    .container {
        display: flex;
        justify-content: space-between;
        max-width: 1260px;
        padding: 61px 20px;

        .trust__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            text-transform: uppercase;

            p {
                font-family: 'TT Squares Condensed', sans-serif;
                font-size: 50px;
                line-height: calc(60 / 50);
                color: transparent;
                -webkit-text-stroke: 2px var(--green);
            }

            img {
                width: 100px;
                height: 100px;
            }
        }
    }
}

/* general class for sections with a large title */
.title-section {
    padding: 0 40px;

    h2 {
        font-family: 'TT Squares Condensed', sans-serif;
        font-size: 64px;
        font-weight: 900;
        color: transparent;
        -webkit-text-stroke: 2px var(--white);
        text-transform: uppercase;
        margin-bottom: 84px;

        .accent {
            display: block;
            -webkit-text-stroke: 2px var(--green);
        }
    }
}

/* NEW-WAY SECTION */
#new-way {
    .container {
        display: flex;
        justify-content: space-between;

        .new-way__text {
            display: flex;
            flex-direction: column;
            gap: 22px;
            max-width: 658px;

            p {
                line-height: calc(22 / 16);
            }
        }

        .new-way__steps {
            h3 {
                font-size: 16px;
                font-weight: 400;
                line-height: calc(22 / 16);
                opacity: .6;
                margin-bottom: 22px;
            }

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

                span:nth-child(1) {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 12px;
                    line-height: calc(17 / 14);

                    &:before {
                        content: '';
                        position: absolute;
                        display: block;
                        background-image: url('../assets/img/step-round-border.png');
                        background-repeat: no-repeat;
                        width: 41px;
                        height: 42px;
                    }
                }

                span:nth-child(2) {
                    font-family: 'TT Squares Condensed', sans-serif;
                    font-weight: 900;
                    font-size: 18px;
                    line-height: calc(22 / 18);
                    text-transform: uppercase;
                }
            }

            .step:not(:last-child) {
                margin-bottom: 42px;
            }
        }
    }
}

/* BENEFIT SECTION */
#benefit {
    .container {
        display: flex;
        justify-content: space-between;

        .benefit__steps {
            display: flex;
            flex-direction: column;
            gap: 40px;
            max-width: 564px;

            .step {
                display: flex;
                gap: 40px;

                img {
                    width: 88px;
                    height: 88px;
                }

                .step__text {
                    p {
                        font-weight: 700;
                        line-height: calc(22 / 16);

                        .accent {
                            color: var(--green);
                        }
                    }

                    span {
                        line-height: calc(22 / 16);
                    }
                }
            }
        }

        .benefit__banner {
            position: relative;
            max-width: 800px;
            width: 100%;

            .benefit__banner-image {
                position: absolute;
                left: 0;
                top: 0;
                transform: translate(18%, -23%);
                width: 100%;
                object-fit: contain;
            }

            .titles-wrap {
                position: absolute;
                bottom: 0;
                left: 0;
                transform: rotate(361deg) translate(14%, 34%);
                width: 340px;
                height: 340px;

                img {
                    position: absolute;
                    z-index: 1;
                    width: 370px;
                    height: 370px;
                }

                .benefit__banner-title {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: rotate(368deg) translate(-46%, -33%);
                    z-index: 1;

                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    gap: 10px;

                    p, span {
                        font-family: 'TT Squares Condensed', sans-serif;
                        font-weight: 900;
                        line-height: calc(22 / 16);
                        max-width: 185px;
                        text-transform: uppercase;
                        z-index: 5;
                    }

                    p:last-child {
                        max-width: 215px;
                    }

                    span {
                        max-width: 229px;
                        color: var(--green);
                        font-size: 22px;
                        line-height: calc(22 / 22);
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

/* ADVANTAGES SECTION */
#advantages {
    z-index: 5;
    background-color: var(--green);
    padding: 80px 40px 128px;
    margin-top: 180px;

    h2 {
        -webkit-text-stroke: 2px var(--black);
        text-transform: uppercase;
        margin-bottom: 84px;

        span {
            display: inline-block;
        }

        .accent {
            color: #000;
            -webkit-text-stroke: unset;
        }
    }

    .container {
        display: flex;
        justify-content: space-between;
        gap: 85px;

        .advantages__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            max-width: 286px;

            img {
                width: 100px;
                height: 100px;
            }

            p {
                text-align: center;
                color: var(--black);
                font-size: 18px;
                font-weight: 700;
                line-height: calc(24 / 18);

                .accent {
                    text-decoration: underline;
                }
            }
        }
    }
}

/* AGENT SECTION */
#agent {
    .container {
        display: flex;
        justify-content: space-between;
        position: relative;

        .agent__text-wrap {
            display: flex;
            flex-direction: column;
            gap: 60px;
            z-index: 1;

            .agent__steps {
                display: flex;
                flex-direction: column;
                gap: 40px;

                .step {
                    display: flex;
                    align-items: center;
                    gap: 40px;
                    max-width: 568px;
                    width: 100%;
                    padding: 16px 0;
                    border-radius: 3px;
                    background: linear-gradient(66deg, rgba(0, 0, 0, 0.00) 27.59%, rgba(63, 214, 43, 0.50) 100.85%);

                    img {
                        width: 88px;
                        height: 88px;
                    }

                    p {
                        color: var(--white);
                        font-weight: 700;
                        line-height: calc(22 / 16);

                        .accent {
                            color: var(--green);
                        }
                    }
                }
            }

            .mainBtn {
                border: 1px solid var(--green);
                text-align: center;
                max-width: 260px;
                border-radius: 3px;
                background-color: var(--green);
                color: var(--black);
                padding: 11.5px 42px;
                transition: background-color .2s ease, color .2s ease;

                &:hover {
                    background-color: transparent;
                    color: var(--green);
                }

                span {
                    font-size: 18px;
                    font-weight: 600;
                    text-transform: uppercase;
                }
            }
        }

        .agent__banner {
            position: absolute;
            right: -8.5%;
            top: -31%;
            z-index: -1;
            max-width: 800px;
            width: 100%;
            height: auto;
        }
    }
}

/* COOPERATION SECTION */
#cooperation {
    margin-top: 130px;

    h2 {
        span {
            display: inline-block;
        }
    }

    .container {
        .tabs__container {
            display: flex;
            flex-direction: column;
            gap: 65px;
            margin-bottom: 50px;

            .tabs {
                display: flex;
                justify-content: center;
                gap: 30px;
                max-width: 658px;

                .tab {
                    font-family: 'Inter', sans-serif;
                    font-size: 18px;
                    font-weight: 600;
                    min-width: 200px;
                    padding: 12px 22px;
                    color: var(--white);
                    border-radius: 3px;
                    border: 1px solid var(--purple);
                    background-color: var(--purple);
                    text-transform: uppercase;
                    transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
                    cursor: pointer;

                    &[aria-selected="false"] {
                        background-color: transparent;
                        color: var(--white);

                        &:hover {
                            color: var(--white);
                        }
                    }

                    &:hover {
                        background: var(--purple);
                    }
                }
            }

            .panels {
                .panel {
                    display: flex;
                    gap: 200px;
                    position: absolute;
                    opacity: 0;
                    height: 0;
                    pointer-events: none;

                    &.isActive {
                        opacity: 1;
                        height: auto;
                        pointer-events: auto;
                        position: relative;
                    }

                    .panel__text {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        max-width: 658px;

                        h3 {
                            font-size: 16px;
                            font-weight: 700;
                            line-height: calc(22 / 16);
                        }

                        p {
                            font-weight: 700;
                            line-height: calc(22 / 16);
                        }
                    }

                    .panel__steps {
                        display: flex;
                        flex-direction: column;
                        gap: 6px;

                        .step {
                            display: flex;
                            align-items: center;
                            gap: 32px;
                            text-transform: uppercase;

                            span {
                                font-family: 'TT Squares Condensed', sans-serif;
                                font-size: 50px;
                                font-weight: 900;
                                line-height: calc(60 / 50);
                                color: transparent;
                                -webkit-text-stroke: 1px var(--purple);
                            }

                            p {
                                font-family: 'TT Squares Condensed', sans-serif;
                                font-size: 14px;
                                font-weight: 900;
                                line-height: calc(22 / 14);
                                max-width: 250px;
                            }
                        }
                    }

                    .betshop__banner {
                        display: block;
                        object-fit: cover;
                        max-width: 398px;
                        width: 100%;
                        height: auto;
                    }
                }
            }
        }

        .mainBtn {
            border: 1px solid var(--green);
            text-align: center;
            border-radius: 3px;
            background-color: var(--green);
            color: var(--black);
            padding: 11.5px 42px;
            transition: background-color .2s ease, color .2s ease;

            &:hover {
                background-color: transparent;
                color: var(--green);
            }

            span {
                font-size: 18px;
                font-weight: 600;
                text-transform: uppercase;
            }
        }
    }
}

/* SHARK SECTION */
#shark {
    background-color: var(--green);
    margin-top: 60px;
    position: relative;

    .container {
        position: relative;
        padding: 80px 20px 100px 20px;

        h2 {
            position: relative;
            z-index: 5;
            font-family: 'TT Squares Condensed', sans-serif;
            font-weight: 900;
            font-size: 40px;
            line-height: calc(52 / 40);
            text-transform: uppercase;
            color: var(--black);
            max-width: 700px;
            margin-bottom: 38px;
        }

        .mainBtn {
            border: 1px solid var(--black);
            position: relative;
            z-index: 5;
            text-align: center;
            border-radius: 3px;
            background-color: var(--black);
            color: var(--green);
            padding: 11.5px 42px;
            transition: background-color .2s ease, color .2s ease;

            &:hover {
                background-color: var(--green);
                color: var(--black);
            }

            span {
                font-size: 18px;
                font-weight: 600;
                text-transform: uppercase;
            }
        }

        .shark__banner,
        .shark__mobile-banner {
            position: absolute;
            right: -12%;
            top: -23%;
            z-index: 1;
        }

        .shark__mobile-banner {
            display: none;
        }
    }
}

/* SOLUTIONS SECTION */
#solutions {
    margin-top: 40px;

    h2 {
        span {
            display: inline-block;
        }
    }

    .container {
        display: flex;
        justify-content: space-between;

        .tabs {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;

            .tab {
                display: flex;
                align-items: center;
                gap: 20px;
                font-family: 'TT Squares Condensed', sans-serif;
                font-weight: 900;
                font-size: 22px;
                line-height: calc(22 / 22);
                padding: 12px 0;
                color: var(--white);
                border: none;
                cursor: pointer;
                background-color: transparent;

                &[aria-selected="true"],
                &[aria-selected="false"]:hover {
                    color: var(--green);
                }

                img {
                    width: 88px;
                    height: 88px;
                }
            }
        }

        .tabs__inner,
        .tabs__inner-mobile {
            display: flex;
            flex-direction: unset;
            gap: 30px;

            .tab {
                justify-content: center;
                font-family: 'Inter', sans-serif;
                font-size: 18px;
                font-weight: 600;
                /*width: 268px;*/
                width: 200px;
                color: var(--white);
                border-radius: 3px;
                border: 1px solid var(--purple);
                background-color: transparent;
                transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
                cursor: pointer;

                &[aria-selected="false"],
                &[aria-selected="true"] {
                    background-color: transparent;
                    color: var(--white);

                    &:hover {
                        color: var(--white);
                    }
                }

                &[aria-selected="true"] {
                    background-color: var(--purple);
                }


                &:hover {
                    background: var(--purple);
                }
            }
        }

        /* tabs for mobile */

        .tabs__inner-mobile {
            display: none;
            flex-direction: column;
            gap: 10px;
            width: 100%;

            .tab {
                padding: 0;

                > h3 {
                    padding: 12px 20px;
                    width: 100%;
                    background-color: var(--purple);
                }

                &[aria-selected="true"] {
                    width: 100%;
                    background-color: transparent;
                }

                .panel {
                    padding: 20px;
                }
            }
        }

        .panels {
            max-width: 1048px;
            width: 100%;
            padding: 40px 20px 40px 40px;
            background-color: var(--dark-gray);

            .panel {
                display: flex;
                flex-direction: column;
                gap: 30px;
                overflow-y: auto;
                border-radius: 3px;
                position: absolute;
                opacity: 0;
                height: 0;
                pointer-events: none;

                &.isActive {
                    opacity: 1;
                    height: 440px;
                    pointer-events: auto;
                    position: relative;
                }

                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    padding-inline-start: 25px;
                }

                h3 {
                    text-transform: uppercase;
                }

                h3, p, li {
                    font-size: 16px;
                    line-height: calc(22 / 16);
                }

                li {
                    list-style-type: disc;
                }

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-track {
                    background-color: var(--black);
                }

                &::-webkit-scrollbar-thumb {
                    background-color: var(--green);
                    border-radius: 50px;
                }

                &::-webkit-scrollbar-corner {
                    background-color: transparent;
                }
            }

            #panel-main-bet.panel {
                background-color: transparent;
                padding: 0;

                .panel-bet-cash__wrap {
                    display: flex;
                    flex-direction: column;
                    gap: 30px;
                    height: 440px;
                    overflow-y: auto;
                    background-color: var(--dark-gray);
                    border-radius: 3px;

                    &::-webkit-scrollbar {
                        width: 6px;
                    }

                    &::-webkit-scrollbar-track {
                        background-color: var(--black);
                    }

                    &::-webkit-scrollbar-thumb {
                        background-color: var(--green);
                        border-radius: 50px;
                    }

                    &::-webkit-scrollbar-corner {
                        background-color: transparent;
                    }

                    .panel {
                        padding: 0;
                    }
                }
            }
        }
    }
}

/* WHY-FANSPORT SECTION */
#why-fansport {
    h2 {
        span {
            display: inline-block;
        }
    }

    .container {
        position: relative;

        .container__inner {
            display: flex;
            margin-bottom: 21vw;

            .text__wrap {
                display: flex;
                flex-direction: column;
                gap: 30px;
                max-width: 658px;
                position: relative;
                z-index: 2;

                p {
                    .accent {
                        font-weight: 700;
                    }
                }
            }

            .why-fansport__banner {
                position: absolute;
                right: -11%;
                top: -24%;
                z-index: 1;
                max-width: 973px;
                max-height: 805px;
                height: 56vw;
            }

            .why-fansport__banner-mobile {
                display: none;
            }
        }

        .medals-img {
            max-width: 1400px;
            width: 100%;
        }
    }
}

/* FAQ SECTION */
#faq {
    .container {
        .accordion {
            display: flex;
            flex-direction: column;
            cursor: pointer;

            > li {
                display: flex;
                flex-direction: column;
                border-top: 1px solid var(--green);
                border-bottom: 1px solid var(--green);

                h3 {
                    position: relative;
                    color: var(--white);
                    transition: color .2s ease-in-out;
                    padding: 30px 0;

                    &:hover {
                        color: var(--green);
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        top: 30px;
                        right: 0;
                        background-image: url('../assets/icons/plus.svg');
                        width: 22px;
                        height: 22px;
                    }

                    &.isActive:before {
                        background-image: url('../assets/icons/minus.svg');
                    }

                    &.isActive {
                        color: var(--green);
                    }
                }

                .accordion__inner {
                    display: grid;
                    grid-template-rows: 0fr;
                    align-items: center;
                    overflow: hidden;
                    transition: grid-template-rows .2s ease-in-out;

                    &.isOpen {
                        grid-template-rows: 1fr;
                        margin-bottom: 30px;
                    }

                    .accordion__content {
                        display: flex;
                        flex-direction: column;
                        gap: 30px;
                        overflow: hidden;
                        min-height: 0;

                        .accent {
                            font-weight: 700;
                        }

                        ol {
                            display: flex;
                            flex-direction: column;
                            gap: 14px;
                            padding-left: 1.4rem;

                            li {
                                list-style-type: unset;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* RUNNING-LINE SECTION */
#running-line {
    background-color: var(--green);
    overflow: hidden;
    margin-top: 80px;

    .container {
        display: flex;
        gap: 80px;
        padding: 30px 40px;
        max-width: none;
        width: fit-content;
        animation: scroll 20s linear infinite;

        .running-line__content {
            display: flex;
            gap: 60px;

            div {
                display: flex;
                gap: 10px;

                span {
                    font-family: 'TT Squares Condensed', sans-serif;
                    font-weight: 900;
                    font-size: 40px;
                    line-height: calc(40 / 40);
                    color: var(--black);
                    text-transform: uppercase;
                    white-space: nowrap;
                }
            }
        }
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* YOUTUBE SECTION */
#youtube {
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .youtube__banner {
            max-width: 568px;
            width: 100%;
            height: 100%;
            border-radius: 20px;

            iframe {
                width: 100%;
                height: 100%;
                border: 0;
                aspect-ratio: 16 / 9;
            }
        }

        .reviews {
            position: relative;

            .reviewsSwiper {
                .swiper-wrapper {
                    max-width: 658px;

                    .swiper-slide {
                        height: auto;
                    }
                }
            }

            .reviews__item {
                display: flex;
                flex-direction: column;
                gap: 22px;

                .reviews__header {
                    h3 {
                        color: var(--white);
                        font-size: 18px;
                        line-height: calc(24 / 18);
                        font-weight: 700;
                        margin-bottom: 4px;
                    }

                    p {
                        font-size: 16px;
                        line-height: calc(22 / 16);
                        opacity: .6;
                    }
                }

                .reviews__content {
                    display: flex;
                    flex-direction: column;
                    gap: 24px;

                    p {
                        line-height: calc(22 / 16);
                    }
                }
            }

            .reviews__navigation {
                display: flex;
                gap: 44px;
                margin-top: 32px;

                button {
                    background: transparent;
                    border: none;
                    cursor: pointer;
                    transition: opacity .3s ease;

                    &:hover {
                        opacity: .7;
                    }

                    &:last-child {
                        transform: rotate(180deg) translateY(8%);
                    }

                    img {
                        width: 44px;
                        height: 44px;
                    }
                }
            }
        }
    }
}

/* BECOME-AGENT SECTION */
#become-agent {
    position: relative;

    .container {
        display: flex;
        gap: 140px;

        .agent-form {
            max-width: 600px;
            width: 100%;

            .contact-form {
                display: flex;
                flex-direction: column;
                position: relative;
            }

            .form-input {
                color: var(--white);
                padding: 11px 0;
                font-size: 16px;
                transform: scale(0.875);
                width: 114%;
                transform-origin: top left;
                border: none;
                border-bottom: 1px solid rgba(255, 255, 255, .3);
                background-color: transparent;

                &::placeholder {
                    color: var(--gray);
                }

                &:focus {
                    outline: none;
                }

                &:not(:last-of-type) {
                    margin-bottom: 22px;
                }

                &:last-of-type {
                    margin-bottom: 40px;
                }
            }

            .form-submit {
                border: 1px solid var(--green);
                font-size: 18px;
                font-weight: 600;
                border-radius: 3px;
                background-color: var(--green);
                color: var(--black);
                max-width: 260px;
                padding: 11px 41px;
                text-transform: uppercase;
                cursor: pointer;
                transition: background-color .2s ease, color .2s ease;

                &:hover {
                    background-color: transparent;
                    color: var(--green);
                }
            }

            .success-popup__overlay {
                display: none;
            }

            .success-popup__overlay.active {
                display: flex;
                position: fixed;
                inset: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 10000;
                align-items: center;
                justify-content: center;
            }

            .success-popup {
                padding: 40px 30px;
                background-color: #1a1a1a;
                max-width: 420px;
                border-radius: 12px;
                margin: 0 20px;
                position: relative;

                .success-popup__close {
                    font-size: 30px;
                    position: absolute;
                    top: -5px;
                    right: 5px;
                    cursor: pointer;
                }

                .success-popup__message {
                    font-style: italic;
                    font-weight: 700;
                    font-size: 18px;
                    line-height: 140%;
                    text-align: center;
                }
            }
        }

        .agent-contacts {
            display: flex;
            flex-direction: column;
            gap: 36px;

            .contact-label {
                color: var(--gray);
                font-size: 11px;
                margin-bottom: 6px;
            }

            a {
                color: var(--white);
                font-size: 18px;
                border-bottom: 1px solid rgba(255, 255, 255, .3);
                padding-block: 6px;
                padding-right: 30px;
            }
        }

        .plane-banner {
            max-height: 400px;
            width: 100%;
        }
    }
}

/* START EARNING SECTION */
#start-earning {
    position: relative;
    margin-top: 70px;

    h2 {
        .accent {
            display: inline-block;
        }
    }

    .container {
        display: flex;

        .start-earning__text {
            display: flex;
            flex-direction: column;
            gap: 25px;
            max-width: 658px;
            width: 100%;

            p {
                line-height: calc(22 / 16);
            }

            .mainBtn {
                border: 1px solid var(--green);
                max-width: 260px;
                border-radius: 3px;
                padding: 11.5px 13px;
                background-color: var(--green);
                color: var(--black);
                text-align: center;
                transition: border .2s ease, background-color .2s ease, color .2s ease;

                &:hover {
                    background-color: transparent;
                    color: var(--green);
                }

                span {
                    font-size: 18px;
                    font-weight: 600;
                    text-transform: uppercase;
                }
            }
        }

        .start-earning__banner {
            position: absolute;
            top: -20%;
            right: 6.5%;
            z-index: -1;
            max-width: 800px;
            width: 100%;
            height: auto;
        }
    }
}

/* FOOTER */
footer {
    background-color: var(--dark-gray);
    margin-top: 212px;

    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 100%;
        padding: 50px 40px;

        .logo {
            width: 168px;
            height: 52px;
            cursor: pointer;
        }

        nav ul {
            display: flex;
            gap: 40px;

            li a {
                color: var(--white);
                font-size: 18px;
                text-transform: uppercase;
                cursor: pointer;
                transition: transform .1s ease-in-out, color .1s ease-in-out;

                &:hover {
                    transform: translateY(-2px);
                    color: var(--green);
                }
            }
        }

        .copyright-text {
            max-width: 414px;

            p {
                opacity: .6;
                font-size: 11px;;
                line-height: calc(18 / 11);
            }
        }
    }
}

/* POPUP COOKIE */
.popup-cookie {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
    z-index: 9999;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;

    &.isPopupActive {
        opacity: 1;
        visibility: visible;
    }

    .close-btn {
        position: absolute;
        top: 50px;
        right: 10px;
        z-index: 5;
        width: 20px;
        height: 12px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;

        &::before,
        &::after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: var(--white);
        }

        &::before {
            transform: rotate(45deg);
            top: 5.5px;
        }

        &::after {
            transform: rotate(-45deg);
            bottom: 5.5px;
        }
    }

    .popup-cookie__wrap {
        position: relative;
        max-width: 640px;
        max-height: 640px;
        height: 100%;
        overflow-y: auto;
        background: var(--dark-gray);
        padding: 20px;
        border-radius: 20px;

        &::-webkit-scrollbar {
            width: 6px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--green);
            border-radius: 50px;
        }
    }

    .popup-cookie__title {
        font-family: 'TT Squares Condensed', sans-serif;
        font-weight: 900;
        font-size: 22px;
        line-height: calc(22 / 22);
        margin-bottom: 18px;
        text-align: center;
        text-transform: uppercase;

        .accent {
            color: var(--green);
        }
    }

    .popup-cookie__text {
        display: flex;
        flex-direction: column;
        gap: 24px;

        p {
            font-size: 16px;
            line-height: calc(24 / 16);
        }

        ol, ul {
            padding-left: 1.4rem;

            li {
                list-style-type: unset;
            }
        }

        .list-browsers {
            li {
                text-decoration: underline;
            }
        }
    }

    .popup-cookie__subtitle {
        text-transform: uppercase;
    }
}

/* POPUP FORM BECOME AGENT */
.become-agent__popup-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;

    &.isPopupActive {
        opacity: 1;
        visibility: visible;
    }

    .become-agent__popup {
        background-color: var(--dark-gray);
        padding: 20px 20px 60px;
        border-radius: 12px;
        max-width: 640px;
        width: 100%;
        margin: 0 20px;
        position: relative;

        .close-btn {
            position: absolute;
            top: 50px;
            right: 10px;
            z-index: 5;
            width: 20px;
            height: 12px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;

            &::before,
            &::after {
                content: '';
                position: absolute;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: var(--white);
            }

            &::before {
                transform: rotate(45deg);
                top: 5.5px;
            }

            &::after {
                transform: rotate(-45deg);
                bottom: 5.5px;
            }
        }

        .contact-form {
            display: flex;
            flex-direction: column;

            h2 {
                font-family: 'TT Squares Condensed', sans-serif;
                font-weight: 900;
                font-size: 22px;
                line-height: calc(22 / 22);
                text-transform: uppercase;
                text-align: center;

                .accent {
                    color: var(--green);
                }
            }

            .form-input {
                color: var(--white);
                padding: 11px 0;
                font-size: 16px;
                transform: scale(0.875);
                width: 114%;
                transform-origin: top left;
                border: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                background: transparent;

                &::placeholder {
                    color: var(--gray);
                }

                &:focus {
                    outline: none;
                }

                &:not(:last-of-type) {
                    margin-bottom: 22px;
                }

                &:last-of-type {
                    margin-bottom: 40px;
                }
            }

            .form-submit {
                font-size: 18px;
                font-weight: 600;
                border: 1px solid var(--green);
                border-radius: 3px;
                background-color: var(--green);
                color: var(--black);
                padding: 12px 42px;
                text-transform: uppercase;
                cursor: pointer;

                transition: background-color .2s ease, color .2s ease;

                &:hover {
                    background-color: transparent;
                    color: var(--green);
                }
            }
        }

        .success-popup__overlay {
            display: none;
        }

        .success-popup__overlay.active {
            display: flex;
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }

        .success-popup {
            padding: 40px 30px;
            background-color: #1a1a1a;
            max-width: 420px;
            border-radius: 12px;
            margin: 0 20px;
            position: relative;

            .success-popup__close {
                font-size: 30px;
                position: absolute;
                top: -5px;
                right: 5px;
                cursor: pointer;
            }

            .success-popup__message {
                font-style: italic;
                font-weight: 700;
                font-size: 18px;
                line-height: 140%;
                text-align: center;
            }
        }
    }
}