@media (max-width:700px) {

    html {
        font-size: 14px;
    }

    .heading {
        font-size: 2.5rem;
        /* color: black; */
    }

    nav .left img {
        height: 60%;
    }

    section.hero {
        padding-left: 1rem;
    }

    section.hero .container h1 {
        font-size: 2.4rem;
    }

    /*  */
    section.howitworks .container .div {
        flex-direction: column;
        margin-bottom: 5rem;
    }

    section.howitworks .container .div .one {
        /* align-items: center; */
        justify-content: left;
    }

    section.howitworks .container .div .two h1 {
        width: 100%;
    }

    section.howitworks .container .div .two h2 {
        width: 100%;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    section.howitworks .container .div .two h3 {
        width: 100%;
        margin-bottom: 1rem;
    }

    /*  */

    section.gallary .buttonSection {
        width: 100%;
        flex-wrap: wrap;
    }



    section.gallary .buttonSection button {
        font-size: 1.3em;
    }



    section.gallary .imgSection>div {
        width: 95%;
    }


    section.gallary .imgSection>div img {
        width: 100%;
        margin-top: .3rem;
    }

    section.gallary .imgSection img {
        width: 100%;
    }
}