.affiliate-navbar[data-astro-cid-47skvhc7] {
    position: absolute;
    padding: 32px;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9
}

.affiliate-navbar[data-astro-cid-47skvhc7] .navbar-logo[data-astro-cid-47skvhc7] {
    flex-shrink: 0
}

.affiliate-navbar[data-astro-cid-47skvhc7] .navbar-logo[data-astro-cid-47skvhc7] img[data-astro-cid-47skvhc7] {
    width: 203px
}

.affiliate-navbar[data-astro-cid-47skvhc7] .navbar-end[data-astro-cid-47skvhc7] {
    margin-left: 0
}

.button[data-astro-cid-47skvhc7] {
    padding: 6px 16px;
    background: #fff;
    border-radius: 32px;
    font-size: 14px;
    color: #0d0e0e;
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 20px;
    margin-inline-end: 32px;
    white-space: nowrap;
    font-weight: 500
}

.register[data-astro-cid-47skvhc7] {
    color: #0d0e0e;
    margin-inline-end: 8px
}

.login[data-astro-cid-47skvhc7] {
    background-color: #e5dae51a;
    color: #fff
}

.lang[data-astro-cid-47skvhc7] {
    font-size: 14px
}

.divider[data-astro-cid-47skvhc7] {
    display: block;
    width: 1px;
    background: #fff6;
    height: 20px;
    margin-right: 4px
}

.is-align-items-center[data-astro-cid-47skvhc7] {
    align-items: center !important
}

.navbar-dropdown-affiliate[data-astro-cid-47skvhc7] {
    padding-top: 20px;
    box-shadow: none !important
}

.navbar-dropdown-rtl[data-astro-cid-47skvhc7] {
    right: auto;
    left: 0
}

.lang-link[data-astro-cid-47skvhc7] .dropdown-icon[data-astro-cid-47skvhc7] {
    width: 24px
}

@media screen and (max-width: 768px) {
    .affiliate-navbar[data-astro-cid-47skvhc7] {
        padding: 6px 0 0 6px
    }
    .affiliate-navbar[data-astro-cid-47skvhc7] .navbar-logo[data-astro-cid-47skvhc7] img[data-astro-cid-47skvhc7] {
        width: 100px
    }
    .button[data-astro-cid-47skvhc7] {
        padding: .125rem .5rem;
        font-size: .75rem;
        margin-inline-end: .5rem
    }
    .navbar-end[data-astro-cid-47skvhc7] .login[data-astro-cid-47skvhc7] {
        margin-right: .5rem
    }
    .navbar-end[data-astro-cid-47skvhc7] .lang-link[data-astro-cid-47skvhc7] {
        padding: 0 .5rem
    }
    .navbar-end[data-astro-cid-47skvhc7] .lang-link[data-astro-cid-47skvhc7] .navbar-item[data-astro-cid-47skvhc7] .navbar-item-inner[data-astro-cid-47skvhc7] svg[data-astro-cid-47skvhc7] {
        width: 1rem
    }
    .navbar-end[data-astro-cid-47skvhc7] .lang-link[data-astro-cid-47skvhc7] .navbar-item[data-astro-cid-47skvhc7] .navbar-item-inner[data-astro-cid-47skvhc7] .lang[data-astro-cid-47skvhc7] {
        font-size: .75rem;
        padding: 0 .5rem;
        display: none
    }
    .navbar-end[data-astro-cid-47skvhc7] .lang-link[data-astro-cid-47skvhc7] .navbar-item[data-astro-cid-47skvhc7] .navbar-item-inner[data-astro-cid-47skvhc7] .dropdown-icon[data-astro-cid-47skvhc7] {
        display: none
    }
}

body {
    font-family: RedotPay;
    color: #10051c
}

.header {
    font-family: RedotPay;
    background: url(/img/affiliate/header-bg.png);
    width: 100%;
    height: 56.328125vw;
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.header .title {
    z-index: 2;
    font-family: RedotPayBold;
    font-size: 72px;
    color: #fff;
    line-height: 1.3;
    max-width: 1040px;
    padding-top: 10vw;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 48px
}

.header .subtitle {
    z-index: 2;
    width: 1240px;
    z-index: 1;
    font-size: 32px;
    line-height: 48px;
    color: #fff9;
    text-align: center;
    font-weight: 400
}

.header .header-btn {
    z-index: 2;
    position: absolute;
    bottom: 5rem
}

.header .trangle {
    position: absolute;
    bottom: 0;
    z-index: 1;
    transform: translateY(95%)
}

.header .trangle svg {
    width: 54px;
    height: auto
}

.mask {
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    opacity: .6;
    z-index: 1
}

.video {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0
}

.video video {
    width: 100%
}

.video video::-webkit-media-controls {
    display: none !important
}

.btn {
    font-family: RedotPayBold;
    padding: 20px 48px;
    background-color: #e11d5c;
    border-radius: 64px;
    border: none;
    outline: none;
    color: #fff;
    font-size: 18px
}

.btn a {
    display: inline-flex;
    align-items: center;
    -moz-column-gap: 14px;
    column-gap: 14px;
    text-transform: uppercase;
    color: #fff
}

.btn:hover {
    border: none;
    outline: none
}

.btn svg {
    width: 22px
}

@media screen and (max-width: 768px) {
    .btn {
        padding: .5rem 1rem;
        font-size: 1rem
    }
}

.title {
    font-family: RedotPayBold;
    font-size: 54px;
    max-width: 969px;
    text-align: center;
    margin-bottom: 80px;
    text-transform: uppercase
}

.container {
    padding: 120px 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    max-width: 100%
}

.features {
    font-family: RedotPay;
    background: #f8f9fb
}

.features .title {
    max-width: 842px
}

.features .features-container {
    width: 1240px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
}

.features .features-container .features-item {
    background: #f3f5f9;
    border: 1px solid rgba(16, 5, 28, .1);
    border-radius: 20px;
    padding: 32px
}

.features .features-container .features-item .feature-title {
    font-size: 36px;
    font-family: RedotPayBold
}

.features .features-container .features-item .feature-subtitle {
    margin-top: 4px;
    color: #10051c99;
    font-size: 16px
}

.features .features-container .features-item img {
    width: 80px
}

.steps {
    background-color: #0d0e0e;
    color: #fff
}

.steps .step-container {
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 16px;
    column-gap: 16px;
    max-width: 1240px;
    width: 100%
}

.steps .step-container .item {
    border-radius: 20px;
    background: linear-gradient(24deg, #ffffff1a 30.95%, #ffffff2e 83.96%);
    padding: 40px 24px;
    width: 284px;
    height: 300px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center
}

.steps .step-container .item .step {
    width: 220px;
    height: 62px;
    font-size: 38px;
    color: #fff;
    font-family: RedotPayBold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/img/affiliate/arrow-bg.svg);
    background-size: 100% auto
}

.steps .step-container .item .step-title {
    margin-top: 24px;
    font-size: 20px;
    width: 100%;
    text-align: center;
    font-weight: 500
}

.steps .step-container .item .icon {
    width: 143px;
    position: absolute;
    right: 0;
    bottom: 4px;
    z-index: 0
}

.steps .step-container .line-item {
    display: flex;
    align-items: center;
    flex: 1
}

.steps .step-container .line-item .dot {
    width: 12px;
    height: 12px;
    border: 2px solid #e11d5c;
    border-radius: 50%;
    flex-shrink: 0
}

.steps .step-container .line-item .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #e11d5c;
    flex: 1
}

.steps .step-btn {
    margin-top: 196px;
    background-color: #fff;
    color: #0d0e0e
}

.steps .step-btn a {
    color: #0d0e0e
}

.steps .step-btn svg path {
    fill: #0d0e0e
}

.desc {
    background-color: #f3f5f9
}

.desc .desc-container {
    display: grid;
    -moz-column-gap: 74px;
    column-gap: 74px;
    grid-template-columns: 1fr auto
}

.desc .desc-container .left {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1
}

.desc .desc-container .left .text {
    font-size: 24px;
    font-weight: 500;
    line-height: 150%;
    display: block;
    flex: 2
}

.desc .desc-container .left .list {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    background: #fff;
    padding: 32px 24px;
    border-radius: 20px
}

.desc .desc-container .left .list .list-item {
    display: flex;
    align-items: center;
    -moz-column-gap: 14px;
    column-gap: 14px
}

.desc .desc-container .left .list .list-item .icon {
    display: inline-block;
    background-color: #e11d5c0d;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    width: 48px;
    height: 48px;
    flex-shrink: 0
}

.desc .desc-container .left .list .list-item .icon svg {
    width: 24px;
    height: auto
}

.desc .desc-container .left .list .list-item .list-item-text {
    font-size: 20px;
    line-height: 28px
}

.desc .desc-container .right {
    flex-shrink: 0;
    width: 566px;
    max-width: 100%
}

.desc .desc-container .right img {
    width: 100%
}

.desc .bottom-items {
    margin-top: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 32px;
    column-gap: 32px
}

.desc .bottom-items .bottom-item {
    padding: 12px 24px;
    display: flex;
    -moz-column-gap: 8px;
    column-gap: 8px;
    align-items: center;
    border: 1px solid rgba(16, 5, 28, .1);
    border-radius: 32px;
    cursor: pointer
}

.desc .bottom-items .bottom-item svg {
    width: 32px;
    height: auto
}

.desc .bottom-items .bottom-item .text {
    font-size: 20px;
    font-weight: 500
}

.desc .bottom-items .bottom-item.selected {
    background: #fff
}

.advantages {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 159px;
    background: #0d0e0e;
    color: #fff
}

.advantages .title {
    max-width: 764px
}

.advantages .advantages-list {
    width: 100%;
    max-width: 1240px;
    gap: 32px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.advantages .advantages-list .list-item {
    display: inline-block;
    width: 392px;
    height: 418px;
    background: #252727;
    padding: 40px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0
}

.advantages .advantages-list .list-item .icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3a3c3c;
    border-radius: 20px;
    margin-bottom: 48px
}

.advantages .advantages-list .list-item .icon svg {
    width: 52px;
    height: auto
}

.advantages .advantages-list .list-item .item-title {
    font-size: 25px;
    font-family: RedotPayBold
}

.advantages .advantages-list .list-item .item-subtitle {
    color: #fff9;
    font-size: 15px;
    margin-top: 4px;
    line-height: 150%;
    white-space: pre-wrap
}

.questions {
    display: flex;
    flex-direction: column;
    padding-top: 120px;
    align-items: center;
    padding-bottom: 120px;
    background: #f8f9fb
}

.questions .symbol {
    max-width: 1240px;
    width: 100%;
    position: absolute;
    top: 60px
}

.questions .symbol svg {
    width: 106px
}

.questions .questions-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 120px;
    max-width: 1240px;
    row-gap: 16px;
    width: 100%
}

.questions .questions-list .list-item {
    background: #fff;
    padding: 32px 40px;
    border-radius: 20px
}

.questions .questions-list .list-item .item-title {
    font-size: 24px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.questions .questions-list .list-item .item-title .icon {
    width: 24px;
    height: auto;
    transition: transform .2s
}

.questions .questions-list .list-item .item-text {
    margin-top: 16px;
    font-size: 16px;
    list-style: 150%;
    color: #10051c99
}

.questions .questions-list .list-item.selected .item-title .icon {
    transform: rotate(-180deg)
}

.questions .bottom {
    color: #fff;
    width: 1240px;
    max-width: 100%;
    background-image: url(/img/affiliate/footer-bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 541px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 119px;
    position: relative;
    border-radius: 20px;
    transform: rotate(0);
    -webkit-transform: rotate(0deg);
    overflow: hidden
}

.questions .bottom .bottom-title {
    z-index: 2;
    width: 720px;
    max-width: 100%;
    font-size: 54px;
    font-style: normal;
    line-height: 72px;
    text-transform: uppercase;
    font-family: RedotPayBold;
    text-align: center;
    margin-bottom: 16px
}

.questions .bottom .bottom-desc {
    z-index: 2;
    width: 700px;
    max-width: 100%;
    font-size: 24px;
    font-weight: 400;
    line-height: 150%;
    color: #fff9;
    text-align: center
}

.questions .bottom .questions-btn {
    position: absolute;
    z-index: 1;
    bottom: 73px
}

@media screen and (min-width: 1720px) {
    .header .header-btn {
        bottom: 10vw
    }
}

@media screen and (max-width: 1240px) {
    .header .title {
        font-size: 45px;
        padding: 0 32px;
        padding-top: 13vw;
        width: 720px;
        margin-bottom: 16px
    }
    .header .subtitle {
        font-size: 20px;
        width: 720px;
        line-height: 1.2;
        margin-top: 20px
    }
}

@media screen and (max-width: 768px) {
    .header .title {
        font-size: 1.25rem;
        max-width: 100%;
        width: 600px;
        padding: 0;
        padding-top: 18vw;
        margin-bottom: 1rem
    }
    .header .subtitle {
        font-size: .75rem;
        max-width: 100%;
        width: 600px;
        padding: 0 16px;
        margin: 0;
        display: none
    }
    .header .trangle {
        transform: translateY(70%)
    }
    .header .trangle svg {
        width: 1.25rem
    }
    .header .header-btn {
        bottom: 2rem
    }
    .title {
        font-size: 1.5rem;
        margin-bottom: 2rem
    }
    .container {
        padding: 2.25rem 1rem
    }
    .features .features-container {
        grid-template-columns: repeat(1, 1fr);
        max-width: 100%
    }
    .features .features-container .features-item {
        padding: 1rem;
        border-radius: .5rem
    }
    .features .features-container .features-item img {
        width: 4rem
    }
    .features .features-container .features-item .feature-title {
        font-size: 1.25rem
    }
    .features .features-container .features-item .feature-subtitle {
        margin-top: .5rem;
        font-size: .75rem
    }
    .steps .step-container {
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
        justify-content: center
    }
    .steps .step-container .item {
        padding: 1rem;
        width: 100%;
        height: auto;
        border-radius: .5rem
    }
    .steps .step-container .item .step {
        width: 110px;
        height: 31px;
        font-size: 1.25rem;
        text-transform: uppercase
    }
    .steps .step-container .item .step-title {
        font-size: 1rem
    }
    .steps .step-container .line-item {
        display: none
    }
    .steps .step-btn {
        margin-top: 2rem
    }
    .desc .desc-container {
        display: flex;
        flex-direction: column;
        row-gap: 1.5rem
    }
    .desc .desc-container .left {
        width: 100%;
        max-width: 100%
    }
    .desc .desc-container .left .text {
        font-size: .875rem;
        margin-bottom: 2rem;
        width: 100%
    }
    .desc .desc-container .left .list {
        border-radius: 20px;
        background: #fff;
        padding: 16px;
        border-radius: .5rem;
        width: 100%
    }
    .desc .desc-container .left .list .icon {
        width: 2rem;
        height: 2rem
    }
    .desc .desc-container .left .list .list-item .list-item-text {
        font-size: .875rem;
        line-height: 1.5
    }
    .desc .desc-container .right {
        width: 100%
    }
    .desc .bottom-items {
        margin-top: 2rem;
        -moz-column-gap: .5rem;
        column-gap: .5rem
    }
    .desc .bottom-items .bottom-item {
        padding: .25rem .5rem;
        -moz-column-gap: 4px;
        column-gap: 4px
    }
    .desc .bottom-items .bottom-item .text {
        font-size: .75rem
    }
    .desc .bottom-items .bottom-item svg {
        width: 2rem
    }
    .advantages .advantages-list {
        row-gap: 1rem
    }
    .advantages .advantages-list .list-item {
        width: 100%;
        height: auto;
        padding: 1rem;
        border-radius: .5rem
    }
    .advantages .advantages-list .list-item .icon {
        width: 4rem;
        height: 4rem;
        margin-bottom: 1rem;
        border-radius: .5rem
    }
    .advantages .advantages-list .list-item .icon svg {
        width: 2rem
    }
    .advantages .advantages-list .list-item .item-title {
        font-size: 1.25rem
    }
    .advantages .advantages-list .list-item .item-subtitle {
        font-size: .875rem
    }
    .questions .symbol {
        top: 0;
        left: 1rem
    }
    .questions .symbol svg {
        width: 2ch
    }
    .questions .questions-list {
        margin-bottom: 1.5rem
    }
    .questions .questions-list .list-item {
        padding: 1rem;
        border-radius: .5rem
    }
    .questions .questions-list .list-item .item-title {
        font-size: 1rem;
        -moz-column-gap: .5rem;
        column-gap: .5rem
    }
    .questions .questions-list .list-item .icon svg {
        width: .75rem
    }
    .questions .questions-list .list-item .item-text {
        font-size: .875rem
    }
    .questions .bottom {
        width: 100vw;
        height: 43.6290322581vw;
        overflow: hidden;
        text-align: center;
        padding: 1rem;
        border-radius: .5rem
    }
    .questions .bottom .bottom-title {
        margin-top: 1rem;
        font-size: 1.25rem;
        padding: 0;
        line-height: 1;
        margin-bottom: .5rem
    }
    .questions .bottom .bottom-desc {
        font-size: .75rem;
        width: 100%;
        display: none
    }
    .questions .bottom .questions-btn {
        bottom: 2rem
    }
}