@import url("/fonts/fonts.css");

* {
    margin: 0;
    padding: 0;
}

body {
    font-style: italic;
    font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

@media screen and (max-width: 1440px) {
    .container {
        max-width: 1280px;
    }
}

@media screen and (max-width: 1280px) {
    .container {
        max-width: 1024px;
    }
}

@media screen and (max-width: 1024px) {
    .container {
        max-width: 768px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        max-width: 729px;
    }
}

:root {
    /*- ======================
            ---Colors--- 
    ========================== */
    --primary-color: #fe6501;
    --hero-bg-color: #f5f1f1;
    --black-text-color: #000000;
    --white-text-color: #ffffff;
    --hero-card-text-color: #483f3f;
    --hero-card-second-text-color: #3f3a3a;
    --hero-card-bg-color: #fbfbfb99;
    --section-cards-bg-color: #fff8f3;
    --section-card-second-text-color: #5a5555;
    --section-cards-text-color: #584f4f;
    --footer-card-bg-color: #010101;
    --footer-card-text-color: #868585;

    /*==============X==============X==============X==============*/

    /*- ======================
        ---FONTS WEIGHTS--- 
    ========================== */

    --f-weight-700: 700;
    --f-weight-600: 600;

    /*==============X==============X==============X==============*/

    /*- ======================
        ---FONTS SIZES--- 
    ========================== */

    /* For Quotation marks in feedback card*/
    --f-size-164px: 10.25rem;
    /* For Quotation marks in feedback card*/

    --f-size-75px: 4.75rem;
    --f-size-60px: 3.75rem;
    --f-size-44px: 2.75rem;
    --f-size-40px: 2.5rem;
    --f-size-36px: 2.25rem;
    --f-size-32px: 2rem;
    --f-size-30px: 1.875rem;
    --f-size-24px: 1.5rem;
    --f-size-22px: 1.375rem;

    /*==============X==============X==============X==============*/

    /*- ======================
        ---LINE HEIGHTS--- 
    ========================== */

    /* For Quotation marks in feedback card*/
    --l-height-205px: 12.813rem;
    /* For Quotation marks in feedback card*/

    --l-height-85px: 5.3rem;
    --l-height-75px: 4.688rem;
    --l-height-60px: 3.75rem;
    --l-height-55px: 3.438rem;
    --l-height-50px: 3.125rem;
    --l-height-45px: 2.813rem;
    --l-height-35px: 2.188rem;
    --l-height-34px: 2.125rem;

    /*==============X==============X==============X==============*/
}

@media screen and (max-width: 1440px) {
    :root {
        /*- ======================
            ---FONTS SIZES--- 
        ========================== */
        --f-size-75px: 3.75rem;
        --f-size-60px: 3.125rem;
        --f-size-44px: 2.5rem;
        --f-size-40px: 2.25rem;
        --f-size-36px: 2rem;
        --f-size-32px: 1.875rem;
        --f-size-30px: 1.75rem;
        --f-size-24px: 1.5rem;
        --f-size-22px: 1.375rem;

        /*==============X==============X==============X==============*/

        /*- ======================
            ---LINE HEIGHTS--- 
        ========================== */
        --l-height-85px: 4.688rem;
        --l-height-75px: 4.375rem;
        --l-height-60px: 3.75rem;
        --l-height-55px: 3.438rem;
        --l-height-50px: 3.125rem;
        --l-height-45px: 2.813rem;
        --l-height-35px: 2.188rem;
        --l-height-34px: 2.125rem;

        /*==============X==============X==============X==============*/
    }
}

@media screen and (max-width: 1280px) {
    :root {
        /*- ======================
            ---FONTS SIZES--- 
        ========================== */
        --f-size-75px: 3.5rem;
        --f-size-60px: 3rem;
        --f-size-44px: 2.25rem;
        --f-size-40px: 2rem;
        --f-size-36px: 1.875rem;
        --f-size-32px: 1.75rem;
        --f-size-30px: 1.625rem;
        --f-size-24px: 1.375rem;
        --f-size-22px: 1.25rem;

        /*==============X==============X==============X==============*/

        /*- ======================
            ---LINE HEIGHTS--- 
        ========================== */
        --l-height-85px: 4.375rem;
        --l-height-75px: 4.063rem;
        --l-height-60px: 3.75rem;
        --l-height-55px: 3.438rem;
        --l-height-50px: 3.125rem;
        --l-height-45px: 2.813rem;
        --l-height-35px: 2.188rem;
        --l-height-34px: 2.125rem;

        /*==============X==============X==============X==============*/
    }
}

@media screen and (max-width: 1024px) {
    :root {
        /*- ======================
            ---FONTS SIZES--- 
        ========================== */
        --f-size-75px: 3.25rem;
        --f-size-60px: 2.75rem;
        --f-size-44px: 2rem;
        --f-size-40px: 1.875rem;
        --f-size-36px: 1.75rem;
        --f-size-32px: 1.625rem;
        --f-size-30px: 1.5rem;
        --f-size-24px: 1.25rem;
        --f-size-22px: 1.125rem;

        /*==============X==============X==============X==============*/

        /*- ======================
            ---LINE HEIGHTS--- 
        ========================== */
        --l-height-85px: 4.063rem;
        --l-height-75px: 3.75rem;
        --l-height-60px: 3.438rem;
        --l-height-55px: 3.125rem;
        --l-height-50px: 3.125rem;
        --l-height-45px: 2.813rem;
        --l-height-35px: 2.188rem;
        --l-height-34px: 2.125rem;

        /*==============X==============X==============X==============*/
    }

}

@media screen and (max-width: 481px) {
    :root {
        /*- ======================
            ---FONTS SIZES--- 
        ========================== */
        --f-size-75px: 3rem;
        --f-size-60px: 2.5rem;
        --f-size-44px: 1.75rem;
        --f-size-40px: 1.625rem;
        --f-size-36px: 1.5rem;
        --f-size-32px: 1.375rem;
        --f-size-30px: 1.25rem;
        --f-size-24px: 1.125rem;
        --f-size-22px: 1rem;

        /*==============X==============X==============X==============*/

        /*- ======================
            ---LINE HEIGHTS--- 
        ========================== */
        --l-height-85px: 3.75rem;
        --l-height-75px: 3.438rem;
        --l-height-60px: 3.125rem;
        --l-height-55px: 3.125rem;
        --l-height-50px: 3.125rem;
        --l-height-45px: 2.813rem;
        --l-height-35px: 2.188rem;
        --l-height-34px: 2.125rem;

        /*==============X==============X==============X==============*/
    }
}

/*==============X==============X==============X==============X
*
*                XX-- Table of Contents --XX
*
/*==============X==============X==============X==============X
*
*   -0.0 - Header
*
**    --0.1 - Hero-Left
***     ---0.1.1 - Content
***     ---0.1.2 - Button
*
**    --0.2 - Hero-Right
***     ---0.2.1 - Image
***     ---0.2.2 - Card List
*
*==================================*
*
*   -1.0 - Section First
*
**    --1.1 - Inner Container
***     ---1.1.1 - Headings
***     ---1.1.2 - Process Cards
*
**    --1.2 - Google Ads
***     ---1.2.1 - Banner Upper
***     ---1.2.2 - Banner Lower
*
*==================================*
*
*   -2.0 - Section Second
*
**    --2.1 - Inner Content
***     ---2.1.1 - Heading + Para
***     ---2.1.2 - Button
***     ---2.1.3 - Link
*
*==================================*
*
*   -3.0 - Section Third 
*
**   --3.1 - Cards Boxes
*
**   --3.1.1 - Feedback Box
***   ---3.1.2 - Heading
***   ---3.1.2 - Review
*
**   --3.1.2 - Video Box
*
*==================================*
*
*   -4.0 - Footer
*
**   --4.1 - Certified
*
**   --4.2 - Links
*
X==============X==============X==============X==============*/

/*- ======================
 -0.0 - Header 
========================== */

header {
    background-color: var(--hero-bg-color);
    padding-top: 1rem;
    padding-left: 7rem;
    padding-right: 7rem;
}

header .hero {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

/*- ======================
--0.1 - Hero-Left
========================== */

#hero-left {
    display: flex;
    flex-direction: column;
    width: 50%;
    row-gap: 50px;
    z-index: 999;
}

/*- ======================
---0.1.1 - Content
========================== */

#hero-left_heading-content {
    display: flex;
    flex-direction: column;
    row-gap: 25px;
    width: 98%;
}

#hero-left_heading-content h1 {
    font-size: var(--f-size-75px);
    font-weight: var(--f-weight-700);
    line-height: var(--l-height-85px);
}

#hero-left_heading-content h4 {
    font-size: var(--f-size-36px);
    font-weight: var(--f-weight-600);
    line-height: var(--l-height-55px);
}

/*- ======================
---0.1.2 - Button
========================== */

#hero-left_btn {
    display: flex;
}

#hero-left_btn a {
    display: flex;
    align-items: center;
    column-gap: 40px;
    text-decoration: none;
    background-color: var(--primary-color);
    color: var(--white-text-color);
    font-size: var(--f-size-36px);
    padding: 20px 30px;
    border-radius: 100px;
}

/*- ======================
--0.2 - Hero-Right
========================== */

#hero-right {
    position: relative;
    width: 50%;
    transform: scale(0.9);
    left: 0rem;
    bottom: -2rem;
}

/*- ======================
---0.2.1 - Image
========================== */

#hero-right .image-box {
    width: 45rem;
    height: 50rem;
    transform: scaleX(-1);
    /* bottom: -5rem; */
    position: relative;
}

#hero-right .image-box img {
    width: 100%;
    height: auto;
    position: relative;
    top: 0rem;
    left: 8rem;
}

#hero-right .image-box::before {
    content: "";
    position: absolute;
    background: #fe6501;
    border-radius: 100vw;
    width: 400px;
    height: 400px;
    left: 14rem;
    top: 12rem;
    z-index: -111;
}

/*- ======================
  ---0.2.2 - Card List
========================== */

#hero-right #cards {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    position: absolute;
    top: 20rem;
    left: 16rem;
    transform: scale(0.85);
}

#hero-right #cards svg {
    position: absolute;
    top: -9rem;
    left: 12rem;
}

#hero-right .card {
    font-size: var(--f-size-24px);
    font-weight: var(--f-weight-600);
    border: 3px solid var(--white-text-color);
    background-color: var(--hero-card-bg-color);
    color: var(--hero-card-text-color);
    padding: 20px;
    width: 450px;
    display: flex;
    column-gap: 10px;
    border-radius: 40px;
    backdrop-filter: blur(45px);
    line-height: 1.5;
}

#hero-right .card .numbers {
    color: var(--hero-card-second-text-color);
    font-size: var(--f-size-40px);
    font-weight: var(--f-weight-600);
}

#hero-right .card #primary-color {
    color: var(--primary-color);
}

/*==============X==============X==============X==============*/

/*- ======================
 -1.0 - Section First
========================== */

section {
    padding: 8rem 0;
}

/*- ======================
 --1.1 - Inner Container
========================== */

section .inner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 90px;
}

/*- ======================
 ---1.1.1 - Headings
========================== */

#headings {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

#headings h3 {
    font-weight: var(--f-weight-700);
    font-size: var(--f-size-60px);
    line-height: var(--l-height-75px);
}

#headings h4 {
    font-weight: var(--f-weight-600);
    font-size: var(--f-size-36px);
    line-height: var(--l-height-55px);
}

/*- ======================
 ---1.1.2 - Process Cards
========================== */

#process {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    width: 100%;
}

#process .process_card {
    background-color: var(--section-cards-bg-color);
    display: flex;
    flex-direction: column;
    gap: 76px;
    padding: 80px 35px 50px 40px;
    border-radius: 20px;
    width: calc(33.33% - 95px);
}

#process .process_card .card_content {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

#process .process_card .card_content h4 {
    font-weight: var(--f-weight-700);
    font-size: var(--f-size-40px);
    line-height: var(--l-height-50px);
    color: var(--black-text-color);
}

#process .process_card .card_content h5 {
    font-weight: var(--f-weight-600);
    font-size: var(--f-size-24px);
    line-height: var(--l-height-35px);
    color: var(--section-cards-text-color);
}

@media screen and (max-width: 1024px) {
    #process .process_card {
        width: calc(50% - 90px);
        padding: 60px 30px 40px 35px;
    }
}

@media screen and (max-width: 729px) {
    #process .process_card {
        width: 100%;
    }
}

/*- ======================
 --1.2 - Google Ads
========================== */

#google-ads-banner {
    margin-top: 90px;
    display: none;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: center;
}

/*- ======================
 ---1.2.1 - Banner Upper
========================== */

.banner_upper .leaderboard {
    width: 728px;
    height: 90px;
    background-color: #ff4100;
}

/*- ======================
 ---1.2.2 - Banner Lower
========================== */

.banner_lower {
    display: flex;
    gap: 56px;
}

.banner_lower .large-rectangle {
    width: 336px;
    height: 280px;
    background-color: #ff4100;
}

/*==============X==============X==============X==============*/

/*- ======================
 -2.0 - Section Second
========================== */

section#second {
    background-color: var(--primary-color);
    color: var(--white-text-color);
    padding: 8rem 0 16rem;
}

/*- ======================
 --2.1 - Inner Content
========================== */

#second .inner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 45px;
}

#second .inner-content .heading-para {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#second .inner-content .heading-para h2 {
    font-weight: var(--f-weight-700);
    font-size: var(--f-size-60px);
    line-height: var(--l-height-75px);
    text-align: center;
}

#second .inner-content .heading-para p {
    font-weight: var(--f-weight-600);
    font-size: var(--f-size-36px);
    line-height: var(--l-height-55px);
    text-align: center;
}

/*- ======================
 ---2.1.2 - Button
========================== */

#earn-button a {
    display: flex;
    background-color: var(--white-text-color);
    border-radius: 100px;
    padding: 20px 30px;
    text-decoration: none;
    color: var(--footer-card-bg-color);
    font-weight: var(--f-weight-700);
    font-size: var(--f-size-36px);
    line-height: var(--l-height-60px);
}

/*- ======================
---2.1.3 - Link
========================== */

#register p {
    font-weight: var(--f-weight-600);
    font-size: var(--f-size-44px);
    line-height: var(--l-height-55px);
    text-align: center;
}

#register a {
    color: var(--white-text-color);
}

/*==============X==============X==============X==============*/

/*- ======================
 -3.0 - Section Third
========================== */

section#third {
    padding: 0;
    position: relative;
    top: -8rem;
}

/*- ======================
 --3.1 - Cards Boxes
========================== */

#card-boxes {
    width: 100%;
    display: flex;
    gap: 30px;
    color: var(--white-text-color);
}

/*- ======================
 --3.1.1 - Feedback Box
========================== */

#feedback {
    width: fit-content;
    background-color: var(--black-text-color);
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 48px;
    padding: 80px 70px;
    border-radius: 50px;
}

/*- ======================
 ---3.1.2 - Heading
========================== */

#feedback h2 {
    font-weight: var(--f-weight-700);
    font-size: var(--f-size-60px);
    line-height: var(--l-height-75px);
    text-align: center;
}

/*- ======================
 ---3.1.2 - Review
========================== */

.review {
    display: flex;
    gap: 80px;
}

.review .left .largest-font {
    color: var(--primary-color);
    font-weight: var(--f-weight-700);
    font-size: var(--f-size-164px);
    line-height: var(--l-height-205px);
    text-align: center;
}

.review .right h3 {
    text-align: center;
    font-weight: var(--f-weight-600);
    font-size: var(--f-size-32px);
    line-height: var(--l-height-55px);
}

.review .right p {
    color: var(--footer-card-text-color);
    font-weight: var(--f-weight-600);
    font-size: var(--f-size-30px);
    line-height: var(--l-height-45px);
}

.review .right p .white {
    color: var(--white-text-color);
}

/*- ======================
 --3.1.2 - Video Box
========================== */

#video-box {
    width: 50%;
    /* height: 600px; */
    position: relative;
}

#video-box #myVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
}

@media screen and (max-width: 1024px) {
    #card-boxes {
        flex-direction: column;
    }

    #video-box {
        width: 100%;
    }

    .review {
        flex-direction: column;
        gap: 0;
    }

    .review .left {
        display: none;
    }
}

/*==============X==============X==============X==============*/

/*- ======================
 -4.0 - Footer
========================== */

footer {
    background-color: var(--black-text-color);
    padding: 8rem 0;
    color: var(--white-text-color);
}

/*- ======================
 --4.1 - Footer Content
========================== */

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 45px;
    align-items: center;
}

/*- ======================
 --4.1.1 - Certified
========================== */

span#certified {
    font-size: var(--f-size-36px);
    line-height: var(--l-height-45px);
    font-weight: var(--f-weight-600);
    text-align: center;
}

/*- ======================
 --4.1.2 - Links
========================== */

#links p {
    color: var(--white-text-color);
    font-size: var(--f-size-24px);
    line-height: var(--l-height-45px);
    text-align: center;
}

#links p a {
    color: var(--white-text-color);
}

/*==============X==============X==============X==============*/

@media only screen and (min-width: 1680px) {
    header {
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
}

@media only screen and (max-width: 1355px) and (min-width: 1100px) {
    #hero-right #cards {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        position: absolute;
        top: 13.7rem;
        left: 25%;
        transform: scale(0.68);
    }

    header {
        background-color: var(--hero-bg-color);
        padding-top: 1rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }

    #hero-right .image-box {
        width: 37rem;
        height: 42rem;
        transform: scaleX(-1);
        /* bottom: -5rem; */
        position: relative;
    }

    #hero-right .image-box img {
        width: 36rem;
        height: auto;
        position: relative;
        top: 0.6rem;
        left: 8.5rem;
    }

    #hero-left_heading-content h1 {
        font-size: var(--f-size-60px);
        line-height: 1.5;
    }

    #hero-left_heading-content h4 {
        font-size: var(--f-size-32px);
        line-height: 1.5;
    }

    #hero-right #cards svg {
        width: 23%;
        position: absolute;
        top: -10rem;
        left: 9rem;
    }

    #hero-right .card {
        width: 500px;
    }

    #hero-right .image-box::before {
        content: "";
        position: absolute;
        background: #fe6501;
        border-radius: 100vw;
        width: 350px;
        height: 350px;
        left: 12.8rem;
        top: 12rem;
        z-index: -111;
    }

    #hero-right {
        position: relative;
        width: 50%;
        transform: scale(0.9);
        left: 0rem;
        bottom: -3rem;
    }
}

@media screen and (max-width: 1100px) {
    #hero-right .image-box {
        display: none !important;
    }

    #hero-right #cards {
        position: relative;
        top: 0;
        left: 0;
    }

    #hero-right #cards {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
        position: relative;
        left: auto;
        top: auto;
    }

    #hero-right .card {
        width: 450px;
        left: 0;
        position: relative;
        font-size: var(--f-size-30px);
    } 

    #hero-left_btn {
        display: flex;
        width: auto;
    }

    #hero-right #cards svg {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 40px;
    }

    #hero-right {
        position: static;
        width: auto;
        transform: scale(1);
    }

}

@media only screen and (max-width: 1100px) and (min-width: 730px) {
    header {
        padding-left: 4rem;
        padding-right: 4rem;
        padding-top: 4rem;
        padding-bottom: 6rem;
    }

    header .hero {
        display: flex;
        align-items: center;
        row-gap: 20px;
        flex-direction: column;
    }

    #hero-right .image-box::before {
        content: "";
        position: absolute;
        background: #fe6501;
        border-radius: 100vw;
        width: 400px;
        height: 400px;
        left: 15%;
        top: 12rem;
        z-index: -111;
    }

  

    #hero-left {
        text-align: center;
        display: flex;
        flex-direction: column;
        width: 100%;
        row-gap: 50px;
        z-index: 999;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

}

@media screen and (max-width: 500px) {
    #hero-right #cards .card {
        width: 100%;
    }

    #hero-left_btn a {
        font-size: var(--f-size-30px);
    }
}

@media only screen and (max-width: 729px) and (min-width: 400px) {
    header {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 4rem;
        padding-bottom: 3rem;
    }

    header .hero {
        display: flex;
        align-items: center;
        row-gap: 20px;
        flex-direction: column;
    }

    /* #hero-right .image-box {
        width: 100%;
        transform: scaleX(-1);
        bottom: -5rem;
        position: relative;
        height: 50rem;
    } */



    #hero-left {
        text-align: center;
        display: flex;
        flex-direction: column;
        width: 100%;
        row-gap: 50px;
        z-index: 999;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    /* #hero-right #cards {
        left: 0%;
        transform: scale(1);
        width: 90%;
    }

    #hero-right .image-box img {
        width: 25rem;
        left: 17px;
    }

    #hero-right .card {
        width: 100%;
        left: 0;
        position: relative;
    } */

    #hero-left_btn {
        display: flex;
        width: auto;
    }

    /* #hero-right .image-box::before {
        content: "";
        position: absolute;
        background: #fe6501;
        border-radius: 100vw;
        width: 280px;
        height: 280px;
        left: 3.5rem;
        top: 8rem;
        z-index: -111;
    } */

    #hero-left_heading-content h1 {
        font-size: var(--f-size-60px);
        line-height: 1.5;
    }

    #hero-left_heading-content h4 {
        font-size: var(--f-size-32px);
    }

    /* #hero-right #cards svg {
        position: absolute;
        top: -14rem;
        left: 17rem;
        width: 20%;
    } */

    section {
        padding: 5rem 0;
    }

    section .inner-container {
        gap: 45px;
    }

    #headings {
        padding: 10px;
    }

    #earn-button a {
        padding: 10px 25px;
    }

    #feedback {
        padding: 60px 40px;
    }
}

@media only screen and (max-width: 400px) {
    header {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    header .hero {
        display: flex;
        align-items: center;
        row-gap: 20px;
        flex-direction: column;
    }

    #hero-left_btn a {
        padding: 8px 15px;
        column-gap: 20px;
    }

    #hero-left_btn svg {
        transform: scale(.6);
    }

    /* #hero-right .image-box {
        width: 100%;
        transform: scaleX(-1);
        bottom: -5rem;
        position: relative;
        height: 50rem !important;
    } */

    #hero-right {
        position: relative;
        width: 18rem;
        transform: scale(1);
        left: 0rem;
        bottom: -2rem;
    }

    #hero-left {
        text-align: center;
        display: flex;
        flex-direction: column;
        width: 100%;
        row-gap: 50px;
        z-index: 999;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    /* #hero-right #cards {
        left: -4%;
        transform: scale(1);
        width: 90%;
    }

    #hero-right .image-box img {
        width: 21rem;
        left: -6px;
    }

    #hero-right .card {
        width: 100%;
        left: 0;
        position: relative;
    } */

    #hero-left_btn {
        display: flex;
        width: auto;
    }

    /* #hero-right .image-box::before {
        content: "";
        position: absolute;
        background: #fe6501;
        border-radius: 100vw;
        width: 280px;
        height: 280px;
        left: 0rem;
        top: 8rem;
        z-index: -111;
    } */

    #hero-left_heading-content h1 {
        font-size: var(--f-size-75px);
        line-height: 1.5;
    }

    #hero-left_heading-content h4 {
        font-size: var(--f-size-32px);
    }

    /* #hero-right #cards svg {
        position: absolute;
        top: -14.5rem;
        left: 13.7rem;
        width: 20%;
    } */

    section {
        padding: 3rem 0;
    }

    section .inner-container {
        gap: 30px;
    }

    #headings {
        padding: 0px;
    }

    #earn-button a {
        padding: 5px 15px;
    }

    #feedback {
        padding: 30px;
    }

    #process .process_card {
        padding: 30px;
    }
}



/* @media only screen and (min-width: 1101px) and (max-width:1354px) {
        #hero-right .image-box {
            width: 100%;
            transform: scaleX(-1);
            /* bottom: -5rem; 
            position: relative;
            height: 56rem !important;
        }
    }*/

.hidden {
    display: none;
}