/* ------------------------------------------------ */
/* 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: 240px;
    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: 9.5rem;
}

.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: 180px;
    
    margin-left: 3rem;
}


/* 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 .img {
        width: 280px;
    }
    
}

/* 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: 280px;

        margin-top: 10.2rem;
    }
    

    .hero__section .image__container .img {
        width: 240px;
        
        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: 255px;

        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 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;

    gap: 2rem;
} */

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

    gap: 3rem;
}

.pricing__card__grid__wrapper {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */

    gap: 1.8rem;
}

.pricing__card {
    background-color: var(--clr-dark-bg-green);
    border: 1px solid var(--clr-border-green);
    border-radius: 1rem;
    
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    padding: 2.6rem 1.4rem;
    gap: 2.5rem;
}

.pricing__card__details__section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    gap: 2rem;
}

.pricing__card__details__section .text__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    gap: 0.5rem;
}

.pricing__card__details__section .text__container .meta__data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    gap: 0.2rem;
}

.package__name {
    color: var(--clr-white);
    font-size: var(--size-2xl);
    font-weight: 300;
}

.pricing__card__details__section .text__container .meta__data .duration {
    color: var(--clr-ddd-black-title);
    font-size: var(--size-xl);
    font-size: var(--size-lg);
    font-weight: 400;
}

/* .package__name .most__popular__btn {
    color: var(--clr-white);
    font-size: var(--size-xs);
    font-weight: 300;
    background-color: #122400;
    border: 1px solid var(--clr-main-green);
    border-radius: 0.43rem;
    cursor: pointer;

    padding: 0.2rem 0.625rem;
    margin-left: 0.2rem;
} */

.package__pricing__text {
    /* display: none; */
    color: var(--clr-white);
    font-size: var(--size-5xl);
    font-weight: 300;
}

.package__pricing__text .pricing__text__currency__symbol {
    font-size: var(--size-sub-heading);
    font-size: var(--size-2xl);
}

.package__description__text {
    color: var(--clr-ddd-black-title);
    font-size: var(--size-sm-text);
    font-weight: 300;
    text-align: start;
}

.green__white__btn {
    width: 100%;
    background-color: var(--clr-bg-green);
    color: var(--clr-white);
    font-weight: 400;
    font-size: var(--size-xl);
    padding: 12px 34px 12px 34px;
    border: 1px solid var(--clr-btn-green);
    border-radius: 0.8rem;
    transition: all 0.3s;
    display: inline;
}

.green__white__btn:hover {
    background-color: var(--clr-white);
    color: var(--clr-black);
    border: 1px solid var(--clr-white);
}

.solid__green__btn {
    background-color: var(--clr-btn-green);
    color: var(--clr-black);
    border: 1px solid var(--clr-btn-green);
}

.solid__green__btn:hover {
    background-color: var(--clr-white);
    border: 1px solid var(--clr-white);
}

.package__content__divider__line {
    width: 100%;
    border: none;
    border-top: 1px solid var(--clr-white);
}

.package__inclution__list {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;

    gap: 0.8rem;
}

.package__inclution__list__item {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    gap: 0.5rem;
}

.package__inclution__list__item__3 {
    align-items: start;
}

.package__inclution__list__item__3 .fa-check {
    padding-top: 0.25rem;
}

.package__inclution__list__item p {
    line-height: 1.4rem;
}

.package__inclution__list__item__3 .highlight__text {
    color: var(--clr-ccc-black);
    font-size: var(--size-sm);
    font-weight: 300;
    line-height: 1rem;
}

.package__inclution__list__item .fa-check {
    color: var(--clr-btn-green);
}

.package__inclution__list__item p {
    color: var(--clr-white);
    font-size: var(--size-base);
    font-weight: 400;
}




.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;
    /* grid-template-columns: 1.5fr repeat(3, 1fr); */
    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(1, 400px); */
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
    
        gap: 1.2rem;
    }

    .package__name {
        color: var(--clr-white);
        font-size: var(--size-2xl);
        font-weight: 300;
    }
    
    /* .package__pricing__text {
        font-size: var(--size-3xl);
        font-weight: 300;
    } */
    
    /* .package__pricing__text .pricing__text__currency__symbol {
        font-size: var(--size-base);
    } */
    
    .package__description__text {
        font-size: var(--size-xs);
        font-weight: 300;
    }
    
    .green__white__btn {
        font-weight: 500;
        font-size: var(--size-base);
        border-radius: 0.8rem;

        padding: 12px 34px 12px 34px;
    }

    .package__inclution__list {  
        gap: 0.8rem;
    }

    .package__inclution__list__item .fa-check {
        font-size: var(--size-xs);
    }

    .package__inclution__list__item p {
        font-size: var(--size-xs);
        font-weight: 400;
    }

    .package__inclution__list__item__3 .highlight__text {
        font-size: var(--size-xs);
    }

    .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 {
        
        grid-template-columns: repeat(3, 1fr);
        justify-content: stretch;
        gap: 1.5rem;
    }

    .package__inclution__list {  
        gap: 0.8rem;
    }

    .green__white__btn {
        font-size: var(--size-sm);
    }

    .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;
        /* grid-template-columns: repeat(1, 400px); */
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
    
        gap: 1.2rem;
    }

    .package__name {
        color: var(--clr-white);
        font-size: var(--size-2xl);
        font-weight: 300;
    }
    
    /* .package__pricing__text {
        font-size: var(--size-3xl);
        font-weight: 300;
    } */
    
    /* .package__pricing__text .pricing__text__currency__symbol {
        font-size: var(--size-base);
    } */
    
    .package__description__text {
        font-size: var(--size-sm);
        font-weight: 300;
    }
    
    .green__white__btn {
        font-weight: 500;
        font-size: var(--size-lg);
        border-radius: 0.8rem;

        padding: 12px 34px 12px 34px;
    }

    .package__inclution__list {  
        gap: 0.8rem;
    }

    .package__inclution__list__item .fa-check {
        font-size: var(--size-xs);
    }

    .package__inclution__list__item p {
        font-size: var(--size-sm);
        font-weight: 300;
    }

    .package__inclution__list__item__3 .highlight__text {
        font-size: var(--size-xs);
    }


    .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) {

    .pricing__card__grid__wrapper {
        justify-content: stretch;
        gap: 1.8rem;
    }

    .package__name {
        color: var(--clr-white);
        font-size: var(--size-2xl);
        font-weight: 300;
    }
    
    /* .package__pricing__text {
        font-size: var(--size-5xl);
        font-weight: 300;
    } */
    
    /* .package__pricing__text .pricing__text__currency__symbol {
        font-size: var(--size-base);
    } */
    
    .package__description__text {
        font-size: var(--size-sm-text);
        font-weight: 300;
    }
    
    /* .green__white__btn {
        font-weight: 500;
        font-size: var(--size-2xl);
        border-radius: 0.8rem;

        padding: 12px 34px 12px 34px;
    } */

    .package__inclution__list__item .fa-check {
        font-size: var(--size-base);
    }

    .package__inclution__list__item p {
        font-size: var(--size-base);
        font-weight: 400;
    }

    .package__inclution__list__item__3 .highlight__text {
        font-size: var(--size-sm);
    }
}


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


/* ------------------------------------------------ */
/* WHAT'S INCLUDED SECTION END */
/* ------------------------------------------------ */

.whats__included__section .whats__included__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;
}

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

    gap: 0.5rem;
}

.whats__included__banner__container .grid__item__1 {
    align-items: start;
    text-align: start;
    
    gap: 1rem;
}

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

    gap: 0.4rem;
}

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

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

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

.whats__included__banner__container .grid__item .number {
    color: var(--clr-btn-green);
    font-size: var(--size-2xl);
    font-weight: 300;
}

.whats__included__banner__container .grid__item .title {
    color: var(--clr-white);
    font-size: var(--size-xl);
    font-weight: 400;
}


/* 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) {

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

    .whats__included__banner__container .grid__item .title {
        color: var(--clr-white);
        font-size: var(--size-2xl);
        font-weight: 400;
    }
}

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

    .whats__included__section .whats__included__banner__container {
        gap: 3.5rem 1rem;
        padding: 2.5rem 1.8rem;
    }
}

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

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

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

    .whats__included__banner__container .grid__item .title {
        color: var(--clr-white);
        font-size: var(--size-xl);
        font-weight: 400;
    }
}

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


/* ------------------------------------------------ */
/* WHAT'S INCLUDED SECTION START */
/* ------------------------------------------------ */