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

    /* Show elements with the class 'mobile-only' on mobile devices */
    .mobile-only {
        display: flex !important; /* Use flex to enable flexible layout and override any other display properties */
    }

    /* Prevent horizontal scrolling by setting max-width and overflow properties */
    html, body {
        max-width: 100vw; /* Limit maximum width to 100% of the viewport width */
        overflow-x: hidden; /* Hide any horizontal overflow */
    }

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

    /* Set height for the first section */
    .section-one {
        height: 60vh; /* Set height to 60% of the viewport height */
    }

    /* Adjust heading size in the first section */
    .section-one h1 {
        font-size: 3.5rem; /* Increase font size for the main heading */
    }

    /* Adjust paragraph size in the first section */
    .section-one p {
        font-size: 1.2rem; /* Slightly increase font size for paragraphs */
    }

    /* Margin adjustment for the button in the first section */
    #section-one-button {
        margin-top: 2vh; /* Add margin on top to space it from the above element */
    }

    /* Adjust font size for button text in the first section */
    #section-one-button p {
        font-size: 0.8rem !important; /* Set font size for button text, using !important to ensure it takes precedence */
    }

    /* Adjust heading size in the right section of the second section */
    .section-two-section-right h1 {
        font-size: 1.3rem; /* Decrease font size for headings */
    }

    /* Adjust paragraph size in the right section of the second section */
    .section-two-section-right p {
        font-size: 0.75rem; /* Decrease font size for paragraphs */
    }

    /* Adjust heading size in the left section of the third section */
    .section-three-section-left h1 {
        font-size: 1.3rem; /* Decrease font size for headings */
    }

    /* Adjust paragraph size in the left section of the third section */
    .section-three-section-left p {
        font-size: 0.75rem; /* Decrease font size for paragraphs */
    }

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

/* Media query for devices with a min-width of 768px (typically tablets and desktops) */
@media only screen and (min-width: 768px) {
    /* Hide elements with the class 'mobile-only' on larger devices */
    body .mobile-only {
        display: none !important; /* Use !important to override any other display properties */
    }
}