@media screen and (max-width: 768px) {
 

    .container {
        width: 90%;

    }
    /* Section1 Starts Here ---------------------------------------- */

    .section1 {
        gap: 10vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        width: 90%;
    }

    .sec-1-backround {
        height: calc(100vh - 64px);
        gap: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: url(/img/background.svg) no-repeat center center/cover;
    }

    .sec-1-backround::after {
        top: 0;
        left: 0;
        background: none;
        height: 60%;
        width: 100%;
    }

    .section1 p {
        color: white;
        font-size: 10vw;
    }

    .button-primary {
        color: white;
        border-radius: 50px;
        font-size: 3vw;
        font-weight: 300;
        gap: 0.8rem;
        padding: 10px 13px;
    }

    .button-primary img {
        height: 1.8vh;
    }


    /* Section3 Starts Here ----------------------------------------------> */

    /* Heading Starts Here --------------------- */
    .sec-3-heading {
        width: 90%;
        gap: 7vh;
        padding: 7vh 0;
    }

    .sec-3-heading h4 {
        font-size: 2rem;
    }

    br {
        display: none;
    }

    .sec-3-heading p {
        font-size: 1.2rem;
    }

    /* Section 3 Container 1 Starts Here --------------------- */

    .sec-3-box-container1 {
        width: 100%;
        flex-direction: column;
        gap: 4vh;
        align-items: flex-start;
        padding-bottom: 7vh ;

    }

    .sec-3-left-box {
        height: 40vh;
        width: 85%;
        align-self: end;
    }

    .section3 img{
        height: unset;
    }

    .sec-3-right-box {
        height: 40vh;
        width: 85%;
    }

    /* Section 3 Container 2 Starts Here --------------------- */

    .sec-3-box-container2 {
        width: 100%;
        flex-direction: column;
        gap: 4vh;
        justify-content: space-between;
        padding: 28px 0;
    }

    .sec3-con2-left-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: auto;
        gap: 4vh;
    }

    .sec3-con2-left-box>.sec3-con2-left-top-box:nth-child(odd) {
        height: 30vh;
        width: 75%;
        margin-left: auto;
        margin-right: 0;
    }

    .sec3-con2-left-box>.sec3-con2-left-bottom-box:nth-child(even) {
        height: 30vh;
        width: 75%;
        margin-left: 0;
        margin-right: auto;
    }

    .sec3-con2-right-box {
        height: 30vh;
        width: 75%;
        margin-left: auto;
        /* Push the right box to the right */
    }

    /* Section 3 Container 3 Starts Here --------------------- */

    .sec-3-box-container3 {
        width: 100%;
        flex-direction: column-reverse;
        gap: 4vh;
        justify-content: space-between;
        padding: 28px 0;
    }

    .sec3-con3-right-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: auto;
        gap: 4vh;
    }

    .sec3-con3-right-box>.sec3-con3-right-top-box:nth-child(odd) {
        height: 30vh;
        width: 100%;
        margin-left: auto;
        margin-right: 0;
    }

    .sec3-con3-right-box>.sec3-con3-right-bottom-box:nth-child(even) {
        height: 30vh;
        width: 75%;
        margin-left: 0;
        margin-right: auto;
    }

    .sec3-con3-left-box {
        height: 30vh;
        width: 100%;
        margin-left: auto;
    }

}



@media (min-width:768px) and (max-width:1024px) {
    :root{
        --font-heading-size: 3rem;
      }
    .sec-1-backround {
        height: calc(90vh - 64px);
        gap: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: url(/img/background.svg) no-repeat center center/cover;
    }
    .section1 p {
        font-size: 3rem;
        width: 67%;
    }

    .button-primary {
        font-size: 1rem;
        font-weight: 300;
    }

    .sec-3-box-container1 {
        width: 90%;
    }

    .sec-3-box-container1 {
        
        padding-bottom: 8vh;
    }

    .sec-3-heading {
        gap: 6vh;
        padding: 8vh 0;
    }

    .sec-3-left-box {
        height: 50vh;
    }

    .sec-3-right-box {
        height: 30vh;

    }

    .sec3-con2-right-box,
    .sec3-con2-left-box {
        height: 50vh;
    }


    .sec3-con3-right-box,
    .sec3-con3-left-box {
        height: 50vh;
    }


}