/* Media query for devices with a max width of 768px (typically mobile devices) */
@media only screen and (max-width: 768px) {
    
    /* Hide elements with class 'desktop-only' on mobile */
    .desktop-only {
        display: none !important; /* Ensures these elements are not displayed */
    }

    /* Show elements with class 'mobile-only' on mobile */
    .mobile-only {
        display: flex !important; /* Makes these elements visible and uses flexbox layout */
    }

    /* Prevent horizontal overflow and set maximum width for html and body */
    html, body {
        max-width: 100vw; /* Limits width to 100% of viewport width */
        overflow-x: hidden; /* Hides horizontal scrollbars */
    }

    /* Style for navigation items */
    .nav-item a {
        font-size: 1.5rem; /* Increases font size for nav links */
    }

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

    /* Styling for the main heading in section one */
    .section-one h1 {
        margin-top: 17vh; /* Adds top margin to center vertically */
        font-size: 3.5rem; /* Sets a large font size for the heading */
    }

    /* Styling for paragraph text in section one */
    .section-one p {
        font-size: 1.2rem; /* Sets a slightly larger font size for readability */
    }

    /* Margin for the button in section one */
    #section-one-button {
        margin-top: 2vh; /* Adds space above the button */
    }

    /* Style for button text */
    #section-one-button p {
        font-size: 0.8rem !important; /* Sets smaller font size for button text */
    }

    /* Style for the heading in the right section of section two */
    .section-two-section-right h1 {
        font-size: 1.3rem; /* Sets font size for section two heading */
    }

    /* Style for paragraph text in the right section of section two */
    .section-two-section-right p {
        font-size: 0.75rem; /* Sets smaller font size for paragraph text */
    }

    /* Style for card containers */
    .card-container {
        transform: scale(0.8); /* Scales down card containers for mobile */
    }

    /* Scale effect on hover for card containers */
    .card-container:hover {
        transform: scale(0.9); /* Slightly enlarges card on hover */
    }

    /* Margin for columns with class 'col-md-4' */
    .col-md-4 {
        margin-top: 0vh; /* Resets margin-top for columns */
    }

    /* Style for the third section */
    .section-three {
        margin-top: 0vh; /* Resets margin-top for the third section */
    }

    /* Style for the heading in section three */
    .section-three h1 {
        font-size: 1.3rem; /* Sets font size for section three heading */
        margin-bottom: 5vh; /* Adds space below the heading */
    }

    /* Style for paragraph text in section three */
    .section-three p {
        font-size: 0.75rem; /* Sets smaller font size for paragraph text */
    }

    /* Style for footer paragraph text */
    footer p {
        font-size: 0.7rem; /* Sets even 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 class 'mobile-only' on larger screens */
    body .mobile-only {
        display: none !important; /* Ensures these elements are not displayed */
    }
}