@media (max-width:700px) {

    /* 
    todo -------------------------------------------------------------------------
    todo                                 Starting               
    todo -------------------------------------------------------------------------
    */


    /* ? ------------------ Basic Code ------------------ */

    html {
        font-size: 14px;
    }

    /* ? ------------------ Repetitive Code ------------------ */

    section {
        padding-top: 1rem;
    }

    .heading {
        letter-spacing: -0.1rem;
        font-size: 2.5rem;
        text-align: center;
        margin: 3rem 0;
    }

    /* ? ------------------ Nav ------------------ */

    nav {
        padding: 0 1rem;
    }

    nav .left img {
        height: 50%;
    }

    nav .right {
        background: white;
        position: absolute;
        right: -50%;
        top: 10vh;
        align-items: start;
        flex-direction: column;
        width: 50%;
        height: 100vh;
        padding: 1rem;
        gap: 0.8rem;
    }

    nav .right a {
        font-size: 1rem;
    }

    nav .toggleDiv {
        display: block;
    }

    /* 
    todo -------------------------------------------------------------------------
    todo                                 SECTIONS               
    todo -------------------------------------------------------------------------
    */

    /* ? ------------------ Hero ------------------ */

    section.hero .container {
        width: 90%;
        margin: auto;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ? ------------------ News ------------------ */

    section.news {
        padding-top: 4rem;
    }

    section.news .container {
        width: 90%;
    }

    section.news {
        padding-top: 2rem;
    }

    /* ? ------------------ Reviews ------------------ */

    .reviews .container {
        width: 95%;
        margin: auto;
        columns: 1;
    }

    .reviews .container img {
        margin-top: 1rem;
    }

    /* ? ------------------ Batches ------------------ */

    .flex-3 {
        flex-direction: column;
    }

    section.batches .container {
        width: 100%;
    }

    section.batches .container .box {
        padding: 1rem;
        width: 90%;
    }

    section.batches .container .box h1,
    section.batches .container .box h2 {
        text-align: center;
    }

    /* ? ------------------ Map ------------------ */

    .map .container {
        width: 90%;
    }

    .map iframe {
        border-radius: 20px;
        width: 100%;
        aspect-ratio: 1;
    }

    /* ? ------------------ Contact ------------------ */

    section.contact .container {
        width: 90%;
    }

    .radio-inputs {
        width: 100%;
        font-size: 1.2rem;
    }

    section.contact .container2 {
        /* flex-direction: column; */
        gap: 2rem;
    }

    /* ? ------------------ Gallary ------------------ */

    section.gallary .container {
        columns: 1;
        padding: 0 0.5rem;
    }

    section.gallary .container .img {
        margin: 0.2rem 0;
    }

    section.gallary .container .img img {
        border-radius: 0;
    }

    /* 
    todo -------------------------------------------------------------------------
    todo                                 Footer               
    todo -------------------------------------------------------------------------
    */


    /* ? ------------------ Footer ------------------ */
    section.footer {
        padding-top: 2rem;
    }

    section.footer .links-container h1 {
        font-size: 1rem;
    }

    section.gallary .options p {
        font-size: 1.3rem;
    }

    /*  */

    section.youtube .container {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

}

/* @media (min-width:700px) {
    .flex-3>* {
        flex: 1;
    }
} */