@import url('/assets/font/font.css');
@import url('/assets/style/variables.css');
@import url('/assets/style/base.css');
@import url('/assets/style/layout.css');

/* HERO */

/* video */
.hero {
    position: relative;
    width: 100%;
    height: 755px;
    overflow: hidden;
    background: #1A1534;
}

.hero-video {
    position: absolute;
    top: 0;
    left: -130px;
    width: calc(100% + 130px);
    height: 550px;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 768px) {
    .hero {
        height: 570px;
    }

    .hero-video {
        height: auto;

        left: 0;
        width: calc(100% + 500px);

    }
}

@media (min-width: 1440px) {
    .hero {
        height: 852px;
    }

    .hero-video {
        height: 852px;
        left: 0;
        width: 100%;
    }
}

/* video  end */

.hero-content {
    position: relative;
    z-index: 1;
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 26px;
    margin-bottom: 300px;
}

.header-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-logo div {
    font-size: 23px;
}

.header-arrow {
    display: none;
}

.header-link {
    font-size: 20px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    background: none;
    outline: none;
    border: none;
    font-family: var(--font-family-primary);
    cursor: pointer;
}

.header-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 3px;
    width: 100%;
    background: linear-gradient(to right, #EB83FD, #9D44DF, #3573CF, #1FCAEF);
}

.content-body-warn {
    font-family: var(--font-family-secondary);
    font-size: 22px;
    color: #19EB99;
    margin-bottom: 23px;
}

.content-body-title {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 23px;
    max-width: 300px;
}

.content-body-desc {
    font-family: var(--font-family-secondary);
    font-size: 22px;
    margin-bottom: 23px;
    max-width: 280px;
}

.content-body-link {
    font-size: 20px;
    width: 100%;
    height: 68px;
    gap: 40px;
    font-family: var(--font-family-primary);
    border: none;
    border-radius: 15px;
    background: linear-gradient(92.68deg, #19EB99 26.57%, #1FCFF1 80.16%);
    background-size: 200%;
    background-position: center;
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.content-body-link:hover {
    background-position: right;
    box-shadow: 0 10px 25px rgba(0, 255, 200, 0.4);
    transform: translateY(-2px);
}

@media (min-width: 768px) {
    .content-header::after {
        content: '';
        position: absolute;
        display: block;
        height: 17%;
        top: 0;
        width: 150vw;
        left: -200px;
        z-index: -1;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 1) 11%, rgba(0, 0, 0, 0) 100%);
    }

    .content-header {
        margin-bottom: 48px;
    }

    .content-body-title {
        font-size: 68px;
        max-width: 543px;
        line-height: 0.9;
    }

    .content-body-link {
        width: 303px;
    }
}

@media (min-width: 1440px) {
    .content-header::after {
        display: none;
    }

    .content-header {
        padding-top: 74px;
    }

    .header-arrow {
        display: block;
    }

    .content-header {
        margin-bottom: 183px;
    }
}

/* HERO END */

/* WORKFLOW */

.workflow {
    background: #2b204b;
    position: relative;
    margin-top: -1px;
}

.workflow::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 400px;
    background: linear-gradient(180deg, rgba(26, 21, 52, 0.95) 7%, rgba(0, 0, 0, 0) 71%);
    z-index: 0;
}

.workflow_header {
    position: relative;
    z-index: 1;
}

.workflow_header div {
    font-size: 40px;
    margin-bottom: 10px;
}

.workflow_header_down {
    opacity: 0;
    visibility: hidden;
}

.workflow_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.workflow_content-card {
    max-height: 505px;
    height: 505px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px 50px 40px;
    border: 1px solid #51427E;
    background: #2B204B;
    position: relative;
    overflow: hidden;
}

.card-img-wrapper {
    position: relative;
    width: 100%;
    height: 241px;
}

.card-img-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.card-img-wrapper img:first-of-type {
    opacity: 1;
    z-index: 1;
}

.card-img-wrapper img:nth-of-type(2) {
    opacity: 0;
    z-index: 2;
}


.workflow_content-card:hover .card-img-wrapper img:first-of-type {
    opacity: 0;
}

.workflow_content-card:hover .card-img-wrapper img:nth-of-type(2) {
    opacity: 1;
}

/* 
.workflow_content-card:nth-of-type(3) .card-img-wrapper {
  transform: translateY(0px); 
    margin-bottom: 50px;
} */

.workflow_content-card:nth-child(2n) {
    background: #372B5B;
    border: 1px solid #675599;
}

.workflow_content-card>img {
    margin-bottom: 20px;
    max-width: 254px;
}

.workflow_content-card>span {
    display: block;
    max-width: 240px;
    font-family: var(--font-family-secondary);
    font-size: 22px;
    margin-bottom: 7px;
}

.workflow_content-card:nth-child(2)>span>span {
    color: #9EFFCA;
}

.workflow_content-card:nth-child(4)>span>span {
    color: #19EB99;
}

.workflow_content-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 245px;
    margin-top: auto;

}

.workflow_content-bottom span {
    font-size: 60px;
    color: #51427E;
}

.workflow_content-wrapper_card {
    padding-left: 1rem;
    padding-right: 1rem;
}

.workflow_background {
    position: relative;
    height: 435px;
    overflow-x: hidden;
}

.workflow_join-link {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    transform: translate(-42%, -230px);
    font-size: 20px;
    text-transform: uppercase;
}

.workflow_join-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 3px;
    width: 100%;
    z-index: 22;
    background: linear-gradient(to right, #EB83FD, #9D44DF, #3573CF, #1FCAEF);
}

.workflow_background img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-52%);
    z-index: 0;
    width: 520px;
    max-width: none;
}


@media (min-width: 576px) {
    .workflow_content-wrapper_card {
        padding-left: calc((100vw - 540px + 2rem) / 2);
        padding-right: calc((100vw - 540px + 2rem) / 2);
    }
}

@media (min-width: 768px) {

    .workflow::after {
        content: '';
        position: absolute;
        left: 0;
        top: -80px;
        width: 100%;
        height: 80px;
        background: white;
        background: linear-gradient(0deg, rgba(43, 32, 75, 1) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
    }

    .workflow_header_down {
        opacity: 1;
        visibility: visible;
        display: block;
        margin-left: auto;
        margin-bottom: 20px;
    }

    .workflow_content {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .workflow_content::-webkit-scrollbar {
        display: none;
    }

    .workflow_content-wrapper_card {
        display: flex;
        width: max-content;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-left: calc((100vw - 720px + 2rem) / 2);
        margin-right: calc((100vw - 720px + 2rem) / 2);
        padding-right: 0;
    }

    .workflow_content-wrapper_card::-webkit-scrollbar {
        display: none;
    }

    .workflow_background {
        position: relative;
        height: 480px;
        overflow: hidden;
    }

    .workflow_background img {
        width: 700px;
    }

    .workflow_join-link {
        transform: translate(-41%, -212px);
    }
}

@media (min-width: 992px) {
    .workflow_content-wrapper_card {
        padding-left: calc((100vw - 960px + 2rem) / 2);
        margin-right: calc((100vw - 960px + 2rem) / 2);
    }
}

@media (min-width: 1200px) {
    .workflow_content-wrapper_card {
        padding-left: calc((100vw - 1140px + 2rem) / 2);
        margin-right: calc((100vw - 1140px + 2rem) / 2);
    }
}

@media (min-width: 1400px) {
    .workflow_content-wrapper_card {
        padding-left: calc((100vw - 1320px + 2rem) / 2);
        margin-right: calc((100vw - 1320px + 2rem) / 2);
    }
}

@media (min-width: 1440px) {
    .workflow {
        overflow: hidden;
        margin-top: -6px;
        max-height: 1280px;
    }

    .workflow::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 450px;
        background: linear-gradient(180deg, rgba(26, 21, 50, 1) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;
    }

    .workflow_header_down {
        opacity: 0;
        visibility: hidden;
        display: initial;
        margin-left: initial;
        margin-bottom: initial;
    }

    .workflow_content-wrapper_card {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .workflow_content-card {
        z-index: 1;
        padding-left: 84px;
        padding-right: 84px;
    }

    .workflow_background {
        transform: translate(420px, -500px);
        z-index: 0;
        height: 800px;
    }

    .workflow_background img {
        width: 790px;
    }

    .workflow_content {
        z-index: 1;
    }


    .workflow_join-link {
        transform: translate(385px, -375px);
        z-index: 111;
        left: 50%;
    }
}

/* WORKFLOW END */


/* FAQ */

.faq {
    background: #372b5b;
    padding: 61px 0 45px;
    border: 1px solid #675599;
}

.faq_title {
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.faq-question {
    background: #51437B;
    border: 1px solid #675599;
    padding: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    cursor: pointer;
}

.faq-question span {
    line-height: 1;
    display: block;
    max-width: 170px;
    letter-spacing: 0.7px;
}

.faq-question img {
    width: 52px;
}

.faq-answer {
    max-height: 0;
    height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, height 0.4s ease;
    margin-bottom: 6px;
    position: relative;

    background-image: linear-gradient(rgba(81, 66, 126, 0.7), rgba(81, 66, 126, 0.7)),
        url('/assets/img/faq_bg.png');
    background-size: 275%;
    background-position: 37% 36%;
    background-repeat: no-repeat;
}

.faq-item.active .faq-question {
    background: #403070;
}

.faq-item.active .faq-answer {
    height: 100%;
    max-height: 1000px;
    transition: max-height 0.4s ease, height 0.4s ease;
    padding: 43px 20px 0;
    border: 1px solid #51427E;
}

.faq-item.active {
    position: relative;
}

.faq-answer-question {
    font-family: var(--font-family-secondary);
    font-size: 22px;
    margin-bottom: 35px;
}

.faq-answer-answer {
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 35px;
}

.faq-answer-answer a {
    text-decoration: initial;
    color: initial;
}

.faq-answer > span {
    white-space: nowrap;
    font-family: var(--font-family-primary);
    display: block;
    /* position: absolute; */
    /* bottom: -19px; */
    /* left: 50%; */
    transform: translate(0 ,18px);
    text-align: center;
    font-size: 69px;
}

.faq_wrapper-desktop {
    display: none;
}

.faq-item .faq-answer div,
.faq-item .faq-answer img,
.faq-item .faq-answer span {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.faq-item .faq-answer .faq-answer-question {
    padding: 43px 20px 0;
}

.faq-item.active .faq-answer .faq-answer-question {
    padding: 0px;
}

.faq-item .faq-answer .faq-answer-answer,
.faq-item .faq-answer img {
    padding-left: 20px;
}

.faq-item.active .faq-answer .faq-answer-answer,
.faq-item.active .faq-answer img {
    padding-left: 0;
}

.faq-item.active .faq-answer div,
.faq-item.active .faq-answer img,
.faq-item.active .faq-answer span {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

@media (min-width: 768px) {
    .faq-answer {
        background-size: 120% auto;
        background-position: 5% 0;
        background-image: linear-gradient(rgba(81, 66, 126, 0.5), rgba(81, 66, 126, 0.5)),
            url('/assets/img/faq_bg.png');
    }

    .faq-answer.faq-item.active {
        padding-left: 28px;
        padding-right: 28px;
    }

    .faq_title {
        font-size: 50px;
    }

    .faq-question {
        font-size: 23px;
    }

    .faq-question span {
        max-width: 375px;
        line-height: 1.2;
        letter-spacing: 1px;

    }

    .faq-item.active .faq-answer {
        height: 100%;
    }

    .faq-answer-question,
    .faq-answer-answer {
        width: 320px;
    }

    .faq-answer span {
        right: 0;
        transform: translate(150px, -10px);
        font-size: 69px;
        z-index: 3;
    }
}

@media (min-width: 1440px) {
    .faq_wrapper {
        display: flex;
        gap: 129px;
    }

    .faq_item-wrapper {
        flex: 0 0 55%;
    }

    .faq_wrapper-desktop-answer {
        height: 854px;

        background-image: linear-gradient(rgba(81, 66, 126, 0.5), rgba(81, 66, 126, 0.5)),
            url('/assets/img/faq_bg.png');
        background-size: 244%;
        background-position: 40% center;
        background-repeat: no-repeat;
    }

    .faq_wrapper-desktop {
        display: block;
        flex: 0 0 35%;
        position: relative;
    }



    .faq-answer {
        display: none;
    }

    .faq-question {
        height: 116px;
    }

    .faq_wrapper-desktop-answer {
        padding: 45px;
    }

    .faq_wrapper-desktop-answer-question {
        font-size: 22px;
        margin-bottom: 35px;
        font-family: var(--font-family-secondary);
    }

    .faq_wrapper-desktop-answer-answer {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .faq_wrapper-desktop-answer > span {
        position: absolute;
        bottom: 0;
        left: 50%;
        font-size: 80px;
        text-wrap: nowrap;
        transform: translate(-50%, 0);
    }

    .faq-item::after {
        opacity: 0;
        content: "";
        position: absolute;
        right: -110px;
        top: 50%;
        transform: translateY(-50%);
        width: 90px;
        height: 20px;
        background-image: url('/assets/img/arrow.svg');
        background-size: contain;
        background-repeat: no-repeat;
        transition: opacity 0.3s ease;
    }

    .faq-item.active::after {
        opacity: 1;
        transition: opacity 0.3s ease;

    }

    .faq_wrapper-desktop-answer-question,
    .faq_wrapper-desktop-answer-answer {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .faq_wrapper-desktop-answer-question.show,
    .faq_wrapper-desktop-answer-answer.show {
        opacity: 1;
    }

}

/* FAQ END */

/* CONNECT */

.connect {
    background-image: url('/assets/img/connect-bg-mobile.png');
    background-size: cover;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 582px;
}

.connect>.container {
    height: inherit;
}

.connect-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0 112px;
    height: inherit;
}

.connect-text_bg {
    font-size: 70px;
    text-transform: uppercase;
    opacity: 0.3;
    line-height: 0.8;
    margin-bottom: 17px;
}

.connect-title {
    font-size: 40px;
}

.connect-button {
    margin-top: auto;
    font-size: 20px;
    width: 100%;
    height: 68px;
    gap: 40px;
    font-family: var(--font-family-primary);
    border: none;
    border-radius: 15px;
    background: linear-gradient(92.68deg, #19EB99 26.57%, #1FCFF1 80.16%);
    background-size: 200%;
    background-position: right;
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    max-width: 303px;
}


.connect-button:hover {
    background-size: 100%;
    background-position: right;
    box-shadow: 0 10px 25px rgba(0, 255, 200, 0.4);
    transform: translateY(-2px);
}

.connect-button span {
    text-transform: uppercase;
    font-size: 20px;
}

@media (min-width: 768px) {
    .connect {
        background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
            url('/assets/img/connect-bg.png');
        background-size: cover;
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
        height: 509px;
    }

    .connect-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .connect-button {
        margin-top: initial;
    }

    .connect-text_bg {
        font-size: 150px;
    }

    .connect-title {
        font-size: 72px;
        margin-top: -38px;
        margin-bottom: 20px;
    }

    .connect-button {
        max-width: 303px;
        height: 68px;

    }

    .connect-text_bg {
        opacity: 0.3;
    }
}

@media (min-width: 1330px) {
    .connect {
        background-size: auto 110%;
        height: 509px;
    }
}

@media (min-width: 1440px) {
    .connect {
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
            url('/assets/img/connect-bg.png');
        background-size: cover;
        height: 731px;
    }

    .connect-text_bg {
        font-size: 285px;
    }

    .connect-title {
        margin-top: -70px;
    }

    .connect .connect-block {
        transform: translateY(50px);
    }
}


/* CONNECT END */

/* CONTACT */

.contacts {
    background: #372B5B;
    padding-top: 53px;
    height: 650px;
}

.contacts_left-title {
    font-size: 40px;
    margin-bottom: 33px;
}

.contacts_left-desc {
    font-size: 22px;
    font-family: var(--font-family-secondary);
    max-width: 290px;
}

.contacts_right {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 276px;
}

.contacts_right-bg {
    position: absolute;
    width: 100%;
    max-width: 350px;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
}


.contacts_right-button {
    position: relative;
    z-index: 5;
    font-family: var(--font-family-primary);
    border: none;
    text-transform: uppercase;
    border-radius: 15px;
    background: linear-gradient(270deg, #EB83FD 0%, #9D44DF 28.26%, #3573CF 64.79%, #1FCAEF 101.32%);
    background-size: 180%;
    background-position: right;
    transition: all 0.4s ease;
    width: 320px;
    font-size: 20px;
    height: 68px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.contacts_right-button:hover {
    background-size: 100%;
    background-position: center;
    box-shadow: 0 10px 25px rgba(102, 78, 238, 0.8);
    transform: translateY(-2px);
}

@media (min-width: 768px) {
    .contacts .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 44px;
    }

    .contacts {
        padding-top: 78px;
        overflow: hidden;
        height: 400px;
    }

    .contacts_left-title {
        white-space: nowrap;
    }

    .contacts_left-title {
        font-size: 50px;
        position: relative;
        z-index: 55;
    }

    .contacts_left-desc {
        min-width: 373px;
    }

    .contacts_right-button {
        width: 241px;
        height: 66px;
    }

    .contacts_right-bg {
        width: 400px;
        top: -20px;
    }
}

@media (min-width: 1440px) {
    .contacts {
        padding-top: 124px;
        height: 450px;
    }

    .contacts_left-title {
        font-size: 50px;
    }

    .contacts_right-bg {
        left: 70%;
    }

    .contacts_right-button {
        width: 303px;
        height: 68px;
    }
}

/* CONTACT END */

/* FOOTER */


.footer::before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 400px;
    background: linear-gradient(180deg, rgba(55, 43, 91, 1) 0%, rgba(55, 43, 91, 0) 100%);
}

.footer {
    position: relative;
    background-image: url('/assets/img/footer-bg.png');
    background-size: 1920px;
    background-position: center -435px;
    background-repeat: no-repeat;
    height: 400px;
}

.footer_content {
    position: relative;
    z-index: 77;
}

.footer_content-textbg {
    font-size: 100px;
    text-transform: uppercase;
    opacity: 0.1;
    padding-top: 10px;
    transform: translateX(-5px);
    text-align: center;
}

.footer_content-copyright {
    font-size: 22px;
    font-family: var(--font-family-secondary);
    max-width: 174px;
    display: block;
    text-align: center;
    margin: 0 auto;
    transform: translateY(0px);
}

@media (min-width: 768px) {
    .footer {
        background-size: 1440px;
        background-position: center -175px;
        height: 450px;
    }

    .footer_content-textbg {
        font-size: 225px;
        padding-top: 0px;
        transform: translate(-40px, -30px);
    }

    .footer_content-copyright {
        font-size: 22px;
        max-width: initial;
        display: block;
        text-align: center;
        margin: 0 auto;
        transform: translateY(-185px);
    }

    @media (min-width: 1440px) {
        .footer {
            background-size: cover;
            background-position: center -225px;
            height: 400px;
        }

        .footer::before {
            top: -3px;
        }
    }
}

/* FOOTER END */

.faq-answer-answer a,
.faq_wrapper-desktop-answer-answer a {
    text-decoration: underline;
    color:  #EB83FD;
    transform: translateY(-2px);
    display: inline-block;
}

.faq-answer-answer a:hover,
.faq_wrapper-desktop-answer-answer a:hover {
    color:  rgb(168, 149, 168);
}