/* Hero banner */
.hero {
    background: url(/wp-content/themes/ecos-m/assets/img/affiliate-program/hero-bg.jpg) no-repeat center/cover;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 312px;
    padding: 20px 0;
}

.hero__title {
    color: #fff;
    font-size: 56px;
    line-height: 62px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.hero__button {
    min-width: 180px;
}

@media (max-width: 989px) {
    .hero {
        background-image: url(/wp-content/themes/ecos-m/assets/img/affiliate-program/hero-bg-small.jpg);
    }

    .hero__content {
        height: 215px;
        align-items: center;
    }

    .hero__title {
        font-size: 30px;
        line-height: 36px;
        text-align: center;
        margin-bottom: 8px;
    }
}

/* Page header */
.page-header {
    padding: 40px 0;
    border-bottom: 1px solid #eaecf0;
}

.page-header__title {
    color: #101828;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 989px) {
    .page-header {
        padding: 24px 0;
    }

    .page-header__title {
        font-size: 24px;
        line-height: 32px;
    }
}

/* Section navigation */
.section-navigation {
    padding: 32px 0;
}

.section-navigation__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px 12px;
}

.section-navigation__list a {
    display: block;
    color: #98A2B3;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 6px;
    transition: all 0.2s ease-out;
}

.section-navigation__list a:hover {
    color: #101828;
    background: #EAECF0;
    padding: 6px 24px;
}

@media (max-width: 989px) {
    .section-navigation {
        padding: 24px 0;
    }

    .section-navigation__list a {
        font-size: 16px;
    }
}

/* Earn section */
.earn {
    background: var(--Grey-100, #F2F4F7);
}

.earn__inner {
    display: flex;
    gap: 60px;
    height: 540px;
}

.earn__content {
    flex: 1 1 auto;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
}

.earn__title {
    color: var(--Grey-900, #101828);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    /* 133.333% */
}

.earn__desc {
    color: var(--Grey-900, #101828);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin-top: 12px;
}

.earn__image--for-phone {
    display: none;
}

.earn__benefits {
    margin-top: 32px;
}

.earn__benefits-title {
    color: var(--Grey-900, #101828);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 15px;
}

.earn__benefits-list {
    display: flex;
    align-items: center;
    gap: 24px;
}

.earn__benefits-list li {
    color: var(--Primary-600, #1570EF);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    padding-left: 34px;
    position: relative;
}

.earn__benefits-list li::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M8.74992 13.9999L12.2499 17.4999L19.2499 10.4999M25.6666 13.9999C25.6666 20.4432 20.4432 25.6666 13.9999 25.6666C7.5566 25.6666 2.33325 20.4432 2.33325 13.9999C2.33325 7.5566 7.5566 2.33325 13.9999 2.33325C20.4432 2.33325 25.6666 7.5566 25.6666 13.9999Z" stroke="%231570EF" stroke-width="2.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center;
    position: absolute;
    top: calc(50% - 14px);
    left: 0;
}

.earn__button {
    margin-top: 40px;
}

.earn__image-wrapper {
    flex: 0 0 480px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

@media (max-width: 989px) {
    .earn {
        padding: 32px 0;
    }

    .earn__inner {
        flex-direction: column;
        gap: 0;
        height: inherit;
    }

    .earn__content {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .earn__title {
        font-size: 20px;
        line-height: 30px;
        text-align: center;
    }

    .earn__desc {
        color: #475467;
        font-size: 18px;
        line-height: 28px;
        text-align: center;
        margin-top: 4px;
    }

    .earn__image--for-phone {
        display: block;
        margin: 24px 0;
    }

    .earn__benefits {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        width: 100%;
    }

    .earn__benefits-title {
        font-size: 16px;
        line-height: 24px;
    }

    .earn__benefits-list {
        flex-direction: column;
        align-items: start;
        gap: 8px;
    }

    .earn__benefits-list li {
        font-size: 16px;
        line-height: 24px;
    }

    .earn__button {
        margin-top: 24px;
    }

    .earn__image-wrapper {
        display: none;
    }
}

/* How it works section */
.how-it-works {}

.how-it-works__title {}

.how-it-works__subtitle {}

.how-it-works__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
}

.how-it-works__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
}

.how-it-works__step::before {
    content: '';
    display: block;
    width: 50%;
    border-bottom: 1.5px dashed #1570EF;
    position: absolute;
    top: 20px;
    left: -8px;
}

.how-it-works__step::after {
    content: '';
    display: block;
    width: 50%;
    border-bottom: 1.5px dashed #1570EF;
    position: absolute;
    top: 20px;
    right: -8px;
}

.how-it-works__step:first-child:before,
.how-it-works__step:last-child:after {
    display: none;
}

.how-it-works__label {
    color: var(--Primary-600, #1570EF);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    padding: 6px 24px;
    border-radius: 100px;
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1.4px solid var(--Primary-600, #1570EF);
}

.how-it-works__card {
    flex: 1 1 auto;
    border-radius: 10px;
    border: 1px solid var(--Grey-200, #EAECF0);
    background: #FFF;
    overflow: hidden;
    width: 100%;
}

.how-it-works__card img {
    width: 100%;
    border-radius: 10px;
}

.how-it-works__card-body {
    padding: 22px 44px;
}

.how-it-works__card-name {
    color: #545360;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

.how-it-works__card-desc {
    color: #545360;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-top: 8px;
}

@media (max-width: 989px) {
    .how-it-works__grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 16px;
    }

    .how-it-works__step::before,
    .how-it-works__step::after {
        display: none;
    }

    .how-it-works__card-body {
        padding: 22px;
    }
}

/* Benefits */
.benefits {
    padding: 72px 0;
    background: var(--Grey-50, #F9FAFB);
}

.benefits__title {}

.benefits__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 54px;
}

.benefits__item {
    color: var(--Grey-600, #475467);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 12px;
    background: var(--Base-White, #FFF);
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
}

.benefits__item-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 100px;
    border-radius: 8px;
    border: 1px solid #57B5E7;
    background: #57B5E7;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

@media (max-width: 989px) {
    .benefits {
        padding: 32px 0;
    }

    .benefits__grid {
        gap: 8px 16px;
        margin-top: 16px;
    }

    .benefits__item {
        font-size: 14px;
        line-height: 16px;
        gap: 8px;
        border-radius: 8px;
    }

    .benefits__item-icon {
        width: 36px;
        height: 108px;
    }
}

/* Promote section */
.promote {}

.promote__title {}

.promote__content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 48px;
}

.promote__item {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    color: var(--Grey-600, #475467);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 12px 20px;
    border-right: 1px solid #D0D5DD;
}

.promote__item:last-child {
    border: none;
}

@media (max-width: 989px) {
    .promote {
        margin-bottom: 0;
    }

    .promote__title {}

    .promote__content {
        grid-template-columns: 1fr 1fr;
        margin-top: 24px;
        border-top: 1px solid #D0D5DD;
        border-bottom: 1px solid #D0D5DD;
    }

    .promote__item {
        gap: 10px;
        font-size: 14px;
        line-height: 20px;
        padding: 20px 16px;
        border: none;
    }

    .promote__item:first-child,
    .promote__item:nth-child(2) {
        border-bottom: 1px solid #D0D5DD;
    }

    .promote__item:first-child,
    .promote__item:nth-child(3) {
        border-right: 1px solid #D0D5DD;
    }

    .promote__item:last-child {
        border: none;
    }
}

@media (max-width: 989px) {
    .promote__content {
        margin: 0 -16px;
        margin-top: 24px;
    }
}

/* Who can join section */
.who-can-join {
    background: var(--Grey-50, #F9FAFB);
    padding: 72px 0;
}

.who-can-join__title {}

.who-can-join__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 32px;
    margin-top: 40px;
    margin-bottom: 48px;
}

.who-can-join__item {
    color: #000;
    font-size: 18px;
    line-height: 28px;
    /* 155.556% */
}

.who-can-join__item img {
    margin-bottom: 24px;
}

.who-can-join__message {
    color: var(--Grey-600, #475467);
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid #EAECF0;
}

.who-can-join__message p {
    max-width: 770px;
    margin-left: auto;
    margin-right: auto;
}

.who-can-join__message p:first-child {
    margin-top: 0;
}

.who-can-join__message p:last-child {
    margin-bottom: 0;
}

@media (max-width: 989px) {
    .who-can-join {
        padding: 32px 0;
    }

    .who-can-join__grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
        margin-top: 16px;
    }

    .who-can-join__item {
        font-size: 14px;
        line-height: 20px;
    }

    .who-can-join__item img {
        margin-bottom: 8px;
    }

    .who-can-join__message {
        padding-top: 32px;
    }
}

/* Testimonials section */
.testimonials {}

.testimonials__title {}

.testimonials__desc {}

.testimonials__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    margin-top: 40px;
}

.testimonials__item {
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--Grey-200, #EAECF0);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
}

.testimonials__stars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}

.testimonials__text {
    color: var(--Grey-600, #475467);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 24px;
}

.testimonials__text ol,
.testimonials__text ul {
    margin: 0;
    padding: 0;
    padding-left: 20px;
}

.testimonials__author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.testimonials__author img {
    flex: none;
    max-width: 56px;
    border-radius: 50%;
}

.testimonials__author-name {
    color: var(--Gray-900, #101828);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    /* 155.556% */
    margin-bottom: 4px;
}

.testimonials__author-link {
    color: var(--Primary-600, #1570EF);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    /* 150% */
}

.testimonials__author-link::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    transform: translateY(4px);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5.83325 14.1667L14.1666 5.83333M14.1666 5.83333H5.83325M14.1666 5.83333V14.1667" stroke="%231570EF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

@media (max-width: 989px) {
    .testimonials__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599px) {
    .testimonials__grid {
        display: flex;
        gap: 16px;
        margin: 0 -16px;
        padding: 0 16px;
        margin-top: 24px;
        overflow: auto;
    }

    .testimonials__item {
        flex: 0 0 300px;
        width: 300px;
    }
}

/* Join now section */
.join-now {}

.join-now__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 32px;
    border-radius: 12px;
    background: var(--Grey-100, #F2F4F7);
}

.join-now__image {
    max-width: 120px;
    margin-bottom: 32px;
}

.join-now__title {
    color: var(--Grey-900, #101828);
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 24px;
}

.join-now__button {}


.contacts {}

.contacts__inner {
    color: var(--Grey-900, #101828);
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.contacts__buttons {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contacts__button {
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.telegram {
    background: #5BBBE8;
}

.whatsapp {
    background: #53B752;
}

@media (max-width: 989px) {
    .contacts__inner{
        font-size: 20px;
        line-height: 30px;
        flex-direction: column;
        gap: 16px;
    }

    .contacts__buttons{
        width: 100%;
    }

    .contacts__button span{
        display: none;
    }
}