mobile.css

/* -------------------------------- */
/* Add this media query at the end of your existing CSS */

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



    #nav {
        padding: 10px 0;
        /* Adjust the padding for smaller screens */
    }

    #nleft,
    #nright {
        gap: 20px;
        /* Adjust the gap between elements for smaller screens */
    }

    #nav a {
        display: none;
    }

    #hero{
        margin-top: 20vh;
        display: flex;
        flex-direction: column;
    }

    #heroleft .elem{
        height: 20vw;
        /* display: none; */
        /* min-width: 100%; */
        /* Take up the full width on smaller screens */
        /* Adjust the margin for smaller screens */
    }

    #heroleft .elem h1 {
        font-size: 80px;/* Adjust the font size for h1 on smaller screens */
    }


    #heroleft button {
        margin-top: 5vw;
        /* Adjust the margin for the button on smaller screens */
        font-size: 20px;
        /* Adjust the font size for the button on smaller screens */
    }

    #heroright {
        /* background-color: blue;
        width: 80vw; 
        margin-top: 10vw;  */
        display: none;
        /* Take up the full width on smaller screens  */
    }

    /* #heroright p {
        font-size: 12px;
        /* Adjust the font size for paragraphs on smaller screens 
    }

    #heroright #imgdiv {
        margin-top: 10px;
        /* Adjust the margin for the image on smaller screens 
        margin-bottom: 20px;
        /* Adjust the margin for the image on smaller screens 
        height: 200px;
        /* Adjust the height for the image on smaller screens 
    }

    #heroright :nth-child(3) {
        margin-bottom: 50px;
        Adjust the margin for the third child on smaller screens 
    } */
}