/* ------------------------------------------------ */
/* HERO SECTION START */
/* ------------------------------------------------ */

.hero__section {
    display: grid;
    justify-content: stretch;
    align-items: start;

    gap: 1.8rem;
}

.hero__section .text__container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: start;

    gap: 1rem;
}

.hero__section .text__container .header__container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: start;

    gap: 0.5rem;
}

.hero__section .header__container .sub__title {
    color: var(--clr-border-black);
    font-size: var(--size-text);
    font-weight: 400;
}

.hero__section .header__container .title {
    color: var(--clr-ddd-black-title);
    font-size: var(--size-6xl);
    font-weight: 300;
}

.hero__section .header__container .title .white__highlight {
    color: var(--clr-white);
    font-weight: 600;
}

.hero__section .header__container .title .green__highlight {
    color: var(--clr-spc-green);
    font-weight: 600;
}

.hero__section .description__container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    gap: 3.4rem;
}

.hero__section .description__container .description {
    color: var(--clr-e6e-black);
    font-size: var(--size-text);
    font-weight: 300;
}

.hero__section .description__container .description .blue__highlight {
    color: var(--clr-main-blue);
    font-weight: 600;
}

.hero__section .description__container .description .red__highlight {
    color: var(--clr-main-red);
    font-weight: 600;
}

.hero__section .description__container .btn__container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    gap: 0.8rem;
}

.hero__section .description__container .btn__container button {
    width: 80%;
}

.hero__section .image__container {
    width: 100%;
    height: 210px;
    position: relative;
    background-color: var(--clr-dark-bg-green);
    background-image: url(../../assets/srfx-global-trading-graph-view-transparent.webp);
    background-size: cover;
    border: 1px solid var(--clr-border-green);
    border-radius: 1rem;

    margin-top: 8rem;
}

.hero__section .image__container .img__wrapper {
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;

    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: center;

    margin-left: 2rem;
}

.hero__section .image__container .img {
    width: 450px;
    
    margin-left: 1rem;
}


/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
@media (min-width: 380px) {

    .hero__section .image__container .img {
        margin-right: 1.4rem;
    }
}

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {

    .hero__section .header__container .title {
        font-size: var(--size-7xl);
    }

    .hero__section .image__container {
        height: 350px;

        margin-top: 15.5rem;
    }

    .hero__section .description__container .btn__container {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    
        gap: 0.8rem;
    }
    
    .hero__section .description__container .btn__container button {
        width: 100%;
    }

    .hero__section .image__container {
        height: 330px;

        margin-top: 8rem;
    }

    .hero__section .image__container .img {
        width: 525px;
    }
    
}

/* lg */
@media (min-width: 1024px) {

    .hero__section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: stretch;
        align-items: start;
    
        gap: 1.8rem;
    }

    .hero__section .header__container .title {
        font-size: var(--size-5xl);
        font-size: var(--size-3xl);
    }

    .hero__section .description__container .description {
        font-size: var(--size-sm-text);
    }

    .hero__section .description__container .btn__container {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
    
        gap: 0.8rem;
    }
    
    .hero__section .description__container .btn__container button {
        width: 75%;
    }

    .hero__section .image__container {
        height: 240px;

        margin-top: 6.5rem;
    }
    

    .hero__section .image__container .img {
        width: 510px;
        
        margin-right: 1rem;
    }
}

/* xl */
@media (min-width: 1280px) {

    .hero__section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: stretch;
        align-items: start;
    
        gap: 1.8rem;
    }

    .hero__section .header__container .title {
        font-size: var(--size-6xl);
    }

    .hero__section .description__container .description {
        font-size: var(--size-text);
    }

    .hero__section .description__container .btn__container {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    
        gap: 0.8rem;
    }

    .hero__section .description__container .btn__container button {
        width: 100%;
    }

    .hero__section .image__container {
        height: 290px;
        
        margin-top: 10.5rem;
    }

    .hero__section .image__container .img {
        width: 525px;
        object-fit: cover;

        margin-right: 1rem;
    }
}

/* 2xl */
@media (min-width: 1536px) {

    .hero__section .header__container .title {
        font-size: var(--size-7xl);

        margin-right: 2rem;
    }

    .hero__section .image__container {
        margin-top: 11.5rem;
    }
}



/* ------------------------------------------------ */
/* HERO SECTION END */
/* ------------------------------------------------ */

/* ------------------------------------------------ */
/* PRICING SECTION START */
/* ------------------------------------------------ */


.pricing__section .pricing__card__container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    gap: 3rem;
}

.pricing__section .affiliate__partner__banner__container {
    background-color: var(--clr-dark-bg-green);
    border: 1px solid var(--clr-border-green);
    border-radius: 1rem;

    display: grid;
    align-items: center;
    justify-content: stretch;

    gap: 4.2rem;
    padding: 2.5rem 1.8rem;
}

.affiliate__partner__banner__container .grid__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    gap: 1rem;
}

.affiliate__partner__banner__container .grid__item__1 {
    align-items: start;
    text-align: start;
}

.affiliate__partner__banner__container .grid__item__1 .heading__container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: start;

    gap: 0.4rem;
}

.affiliate__partner__banner__container .grid__item__1 .heading__container .or__text {
    color: var(--clr-white);
    font-size: var(--size-lg-text);
    font-weight: 300;
}

.affiliate__partner__banner__container .grid__item__1 .heading__container .title {
    color: var(--clr-white);
    font-size: var(--size-sub-heading);
    font-weight: 400;
}

.affiliate__partner__banner__container .grid__item__1 .description {
    color: var(--clr-border-black);
    font-size: var(--size-text);
    font-weight: 400;
}

.affiliate__partner__banner__container .grid__item .img {
    height: 40px;
}

.affiliate__partner__banner__container .grid__item .text__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 0.8rem;
}

.affiliate__partner__banner__container .grid__item .text__container .title {
    color: var(--clr-white);
    font-size: var(--size-xl);
    font-size: var(--size-lg-text);
    font-weight: 400;
}

.affiliate__partner__banner__container .grid__item .text__container .title .gry__highlight {
    color: var(--clr-border-black);
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {

    .pricing__card__grid__wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    
        gap: 1.2rem;
    }

    .pricing__section .affiliate__partner__banner__container {
        grid-template-columns: 1.25fr 1fr;
        gap: 4.2rem;
        padding: 2.5rem 1.8rem;
    }
}

/* lg */
@media (min-width: 1024px) {

    .pricing__card__grid__wrapper {
        justify-content: stretch;

        gap: 1.5rem;
        padding: 0rem 3rem;
    }

    .pricing__section .affiliate__partner__banner__container {
        gap: 3.5rem 1rem;
        padding: 2.5rem 1.8rem;
    }
    
}

/* xl */
@media (min-width: 1280px) {

    .pricing__card__grid__wrapper {
        display: grid;
        justify-content: center;
    
        gap: 1.2rem;
        padding: 0rem 10rem;
    }

    .pricing__section .affiliate__partner__banner__container {
        grid-template-columns: 1.5fr repeat(3, 1fr);

        gap: 1rem;
        padding: 2.5rem 1.8rem;
    }
}

/* 2xl */
/* @media (min-width: 1536px) {} */


/* ------------------------------------------------ */
/* OUR PRICING SECTION END */
/* ------------------------------------------------ */


/* ------------------------------------------------ */
/* TERMS AND CONDITIONS SECTION START */
/* ------------------------------------------------ */


.text__block__section {
    background-color: var(--clr-white);
    color: var(--clr-black);
    border-radius: 1.8rem;

    padding: 2.8rem 1.2rem;
}

.text__block__section .text__block__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    gap: 2rem;
}

.text__block__section .text__block__wrapper .title {
    color: var(--clr-bg-green);
    font-size: var(--size-page-header);
    font-size: var(--size-3xl);
    font-weight: 500;
}

.text__block__section .text__block__wrapper .title .green__highlight {
    color: var(--clr-border-green);
    font-weight: 600;
}

.text__block__section .text__block__wrapper .body {
    color: var(--clr-black);
    font-size: var(--size-text);
    font-weight: 400;

    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    gap: 2.4rem;
}

.text__block__wrapper .body .text__points__container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    gap: 1.5rem;
}

.text__block__wrapper .body .text__points__container .text__point__item {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    gap: 0rem;
}

.text__block__wrapper .body .text__points__container .text__point__item .sub__title {
    font-size: var(--size-lg-text);
    font-weight: 500;
}


/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {

    .text__block__section {
        background-color: var(--clr-white);
        color: var(--clr-black);
        border-radius: 2.5rem;
    
        padding: 4rem 0rem;
    }

    .text__block__section .text__block__wrapper .title {
        color: var(--clr-bg-green);
        font-size: var(--size-page-header);
        font-size: var(--size-4xl);
        font-weight: 500;
    }
}

/* lg */
@media (min-width: 1024px) {

    .text__block__section {
        background-color: var(--clr-white);
        color: var(--clr-black);
        border-radius: 4rem;
    
        padding: 6rem 0rem;
    }

    .text__block__section .text__block__wrapper .title {
        color: var(--clr-bg-green);
        font-size: var(--size-page-header);
        font-size: var(--size-5xl);
        font-weight: 500;
    }
}

/* xl */
@media (min-width: 1280px) {

    .text__block__section {
        background-color: var(--clr-white);
        color: var(--clr-black);
        border-radius: 5rem;
    
        padding: 7rem 0rem;
    }

    .text__block__section .text__block__wrapper .title {
        color: var(--clr-bg-green);
        font-size: var(--size-page-header);
        font-weight: 500;
    }
}

/* 2xl */
/* @media (min-width: 1536px) {} */



/* ------------------------------------------------ */
/* TERMS AND CONDITIONS SECTION END */
/* ------------------------------------------------ */


/* ------------------------------------------------ */
/* PRICING SECTION START */
/* ------------------------------------------------ */


.affiliate__partner__banner__section .affiliate__partner__banner__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    gap: 3rem;
}

.affiliate__partner__banner__section .affiliate__partner__banner__container {
    background-color: var(--clr-dark-bg-green);
    border: 1px solid var(--clr-border-green);
    border-radius: 1rem;

    display: grid;
    align-items: center;
    justify-content: stretch;

    gap: 4.2rem;
    padding: 2.5rem 1.8rem;
}

.affiliate__partner__banner__container .grid__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    gap: 1rem;
}

.affiliate__partner__banner__container .grid__item__1 {
    align-items: start;
    text-align: start;
}

.affiliate__partner__banner__container .grid__item__1 .heading__container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: start;

    gap: 0.4rem;
}

.affiliate__partner__banner__container .grid__item__1 .heading__container .or__text {
    color: var(--clr-white);
    font-size: var(--size-lg-text);
    font-weight: 300;
}

.affiliate__partner__banner__container .grid__item__1 .heading__container .title {
    color: var(--clr-white);
    font-size: var(--size-sub-heading);
    font-weight: 400;
}

.affiliate__partner__banner__container .grid__item__1 .description {
    color: var(--clr-border-black);
    font-size: var(--size-text);
    font-weight: 400;
}

.affiliate__partner__banner__container .grid__item .img {
    height: 40px;
}

.affiliate__partner__banner__container .grid__item .text__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 0.8rem;
}

.affiliate__partner__banner__container .grid__item .text__container .title {
    color: var(--clr-white);
    font-size: var(--size-xl);
    font-size: var(--size-lg-text);
    font-weight: 400;
}

.affiliate__partner__banner__container .grid__item .text__container .title .gry__highlight {
    color: var(--clr-border-black);
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {

    .pricing__card__grid__wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    
        gap: 1.2rem;
    }

    .affiliate__partner__banner__section .affiliate__partner__banner__container {
        grid-template-columns: 1.25fr 1fr;
        gap: 4.2rem;
        padding: 2.5rem 1.8rem;
    }
}

/* lg */
@media (min-width: 1024px) {

    .pricing__card__grid__wrapper {
        justify-content: stretch;

        gap: 1.5rem;
        padding: 0rem 3rem;
    }

    .affiliate__partner__banner__section .affiliate__partner__banner__container {
        gap: 3.5rem 1rem;
        padding: 2.5rem 1.8rem;
    }
    
}

/* xl */
@media (min-width: 1280px) {

    .pricing__card__grid__wrapper {
        display: grid;
        justify-content: center;
    
        gap: 1.2rem;
        padding: 0rem 10rem;
    }

    .affiliate__partner__banner__section .affiliate__partner__banner__container {
        grid-template-columns: 1.5fr repeat(3, 1fr);

        gap: 1rem;
        padding: 2.5rem 1.8rem;
    }
}

/* 2xl */
/* @media (min-width: 1536px) {} */


/* ------------------------------------------------ */
/* OUR PRICING SECTION END */
/* ------------------------------------------------ */