body {
    font-family: Arial, sans-serif; /* Set a default font for the body */
    background-image: url('https://raw.githubusercontent.com/StevenCodes1234/NaturSoils/refs/heads/main/Welcome%20Webpage_Revision_Background_042325.png'); /* Background image */
    background-size: cover; /* Make the background image cover the entire viewport */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    min-height: 100vh; /* Ensure the body is at least the height of the viewport */
    width: 100%; /* Allow the width to adjust to the content */
}

.logo {
    display: block; /* Ensure the logo is displayed as a block-level element */
    margin: 20px auto; /* Center the logo horizontally and add space above */
    max-width: 30%; /* Set a reasonable size for the logo */
    height: auto; /* Maintain aspect ratio */
    position: relative; /* Ensure it doesn't overlap with other elements */
    z-index: 3; /* Ensure it appears above other elements */
}

.logo-2 {
    position: absolute; /* Position the logo relative to the top-left corner */
    top: 60px; /* Position it below the menu bar */
    left: 50px; /* Add space from the left edge */
    width: 15%; /* Set a reasonable size for the logo */
    height: auto; /* Maintain aspect ratio */
    z-index: 2; /* Ensure it appears above other elements if needed */
}

.logo-3 {
    display: block; /* Make the logo a block-level element */
    margin: 20px auto; /* Center the logo horizontally and add space above */
    max-width: 25%; /* Ensure the logo scales properly */
    height: auto; /* Maintain aspect ratio */
}

.logo-4 {
    display: block; /* Make the logo a block-level element */
    margin: 20px auto; /* Center the logo horizontally and add space above */
    width: 35%; /* Set a reasonable size for the logo */
    height: auto; /* Maintain aspect ratio */
    z-index: 2; /* Ensure it appears above other elements if needed */
}

.bottom {
    display: flex; /* Use flexbox to align items side by side */
    justify-content: center; /* Center the images horizontally */
    align-items: center; /* Align the images vertically */
    gap: 20px; /* Add spacing between the images */
    margin: 20px auto; /* Center the container and add space above */
    width: 100%; /* Ensure the container spans the full width */
    max-width: 90%; /* Limit the width of the container */
    height: auto; /* Maintain aspect ratio */
    position: relative; /* Allow positioning adjustments */
    box-sizing: border-box; /* Include padding in the container's width */
}

.bottom img {
    max-width: 20%; /* Ensure each image takes up 45% of the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure images are block-level elements */
}


.menu {
    display: flex; /* Align menu items side by side */
    justify-content: center; /* Center the menu items horizontally */
    align-items: center; /* Align items vertically */
    background: #96c93b; /* Background color for the menu */
    max-width: 100%; /* Set a maximum width for the menu */
    padding: 10px; /* Add padding around the menu */
    margin: 0; /* Remove default margin */
    list-style: none; /* Remove bullet points */
}

.menu li {
    margin: 0 15px; /* Add spacing between menu items */
}

.menu a {
    text-decoration: none; /* Remove underline from links */
    color: white; /* Set link text color */
    font-weight: bold; /* Make the text bold */
    padding: 5px 10px; /* Add padding around the links */
    border-radius: 5px; /* Optional: Add rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.menu a:hover {
    background-color: #6fa563; /* Change background color on hover */
}

@media screen and (max-width: 768px) {
    body {
        background-image: url(https://raw.githubusercontent.com/StevenCodes1234/NaturSoils/refs/heads/main/0eabcd06-08c7-4221-b96e-56fe9327dfcf.jpg); /* Change background image for mobile */
        background-size: 100% 110%; /* Ensure the background image covers the entire screen */
        background-position: bottom; /* Keep the background centered */
        background-repeat: no-repeat; /* Prevent the background from repeating */
        background-attachment: scroll; /* Allow the background to scroll on mobile */
        min-height: 100vh; /* Ensure the body is at least the height of the viewport */
        width: 100%; /* Ensure the width spans the entire screen */
    }

    .logo {
        max-width: 45%; /* Reduce the logo size for smaller screens */
        margin: 10px auto; /* Center the logo with less margin */
        justify-content: center; /* Center the logo */
        position: relative; /* Ensure it doesn't overlap with other elements */
        top: 20%; /* Adjust position for mobile */
    }

    .logo-2 {
        width: 20%; /* Adjust logo size for mobile */
        max-width: 35%; /* Ensure it doesn't exceed the screen width */
        margin: 10px auto; /* Center the logo with less margin */
        top: 15%; /* Adjust position for mobile */
        left: 35px; /* Adjust position for mobile */
    }

    .logo-3 {
        width: 90%; /* Adjust logo size for mobile */
        max-width: 120%; /* Ensure it doesn't exceed the screen width */
        margin: 10px auto; /* Center the logo with less margin */
        margin-top: 5%; /* Adjust position for mobile */
        position: relative; /* Ensure it doesn't overlap with other elements */ 
    }

    .logo-4 {
        display: block; /* Make the logo a block-level element */
        margin: 10px auto; /* Center the logo horizontally and add space above */
        width: 70%; /* Adjust logo sizes for mobile */
        max-width: 70%; /* Ensure it doesn't exceed the screen width */
        height: auto; /* Maintain aspect ratio */
        position: relative; /* Ensure it doesn't overlap with other elements */
    }

    .soil, .organic {
        display: block !important; /* Ensure the images are block-level elements */
        margin: 20px auto !important; /* Center the images horizontally */
        width: 30% !important; /* Adjust the width for mobile */
        max-width: 90% !important; /* Ensure the images don't exceed the screen width */
        height: auto !important; /* Maintain aspect ratio */
        position: relative !important; /* Ensure they don't overlap with other elements */
    }
    

    .menu {
        flex-direction: row; /* Stack menu items vertically */
        align-items: center; /* Center the menu items */
        justify-content: center; /* Center the menu items */
        flex-wrap: wrap; /* Allow wrapping of menu items */
    }

    .menu li {
        margin: 10px 0; /* Add spacing between menu items */
    }

    .menu a {
        padding: 10px 20px; /* Adjust padding for smaller screens */
        font-size: 14px; /* Adjust font size for smaller screens */
    }
}