/* Media query for screens with a maximum width of 768 pixels */
@media only screen and (max-width: 768px) {
    
    /* Hide elements with the class 'desktop-only' on mobile devices */
    .desktop-only {
        display: none !important; /* !important is used to override any other display rules */
    }

    /* Show elements with the class 'mobile-only' on mobile devices */
    .mobile-only {
        display: flex !important; /* Use flexbox for layout on mobile */
    }

    /* Ensure no horizontal scrolling occurs and the content doesn't exceed the viewport width */
    html, body {
        max-width: 100vw; /* Sets the maximum width to the viewport width */
        overflow-x: hidden; /* Hides any overflow on the x-axis */
    }

    /* Adjust the font size for navigation links on mobile devices */
    .nav-item a {
        font-size: 1.5rem; /* Increase font size for better readability */
    }

    /* Make forms take the full width of their container */
    form {
        width: 100%; /* Sets the form width to 100% of its parent element */
    }

    /* Adjust the font size of the main heading in section one */
    .section-one h1 {
        font-size: 3.5rem; /* Make the heading larger for better visibility */
    }

    /* Adjust the font size of paragraph text within forms */
    form p {
        font-size: 1rem; /* Set a standard readable font size for paragraphs */
    }

    /* Adjust the font size of footer text */
    footer p {
        font-size: 0.7rem; /* Set a smaller font size for footer text */
    }
}

/* Media query for screens with a minimum width of 768 pixels */
@media only screen and (min-width: 768px) {
    
    /* Hide elements with the class 'mobile-only' on larger screens */
    body .mobile-only {
        display: none !important; /* Prevents mobile-specific elements from displaying */
    }
}