body {
    font-family: Arial, sans-serif; /* Set a default font for the body */
    background-color: #f6f4b5; /* Light background color */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.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: 50%; /* 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: 20px; /* Add space from the left edge */
    width: 200px; /* 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 */
    width: 400px; /* Set a reasonable size for the logo */
    max-width: 600px; /* Ensure the logo scales properly */
    height: auto; /* Maintain aspect ratio */
}

.columns-container {
    display: flex; /* Use flexbox to align columns side by side */
    justify-content: center; /* Center the columns horizontally */
    align-items: flex-start; /* Align the columns at the top */
    gap: 40px; /* Add spacing between the columns */
    margin: 50px auto; /* Center the container vertically and add space above and below */
    max-width: 90%; /* Limit the width of the container */
    padding: 0 20px 50px; /* Add padding to prevent content from touching edges and bottom */
    box-sizing: border-box; /* Include padding in the container's width */
    position: relative; /* Allow positioning adjustments */
}

.collumn-1 img,
.collumn-2 img {
    display: row; /* Ensure images are block-level elements */
    justify-content: row-wrap; /* Allow images to wrap if necessary */
    align-items: center; /* Center images vertically */
    margin: 10px auto; /* Center images horizontally and add spacing */
    max-width: 100%; /* Ensure images scale properly */
    height: auto; /* Maintain aspect ratio */
    padding: 5px 20px 40px; /* Add padding around images */
}


.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 */
    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) {
    .columns-container {
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the columns and images horizontally */
        gap: 20px; /* Add spacing between items */
        margin: 20px auto; /* Center the container vertically */
        padding: 0 10px 20px; /* Add padding at the bottom */
    }

    .logo-2 {
        position: absolute; /* Position the logo relative to the top-left corner */
        top: 17%; /* Position it below the menu bar */
        left: 20px; /* Add space from the left edge */
        width: 15%; /* Keep the original width */
        height: auto; /* Maintain aspect ratio */
        margin: 0; /* Remove any additional margin */
        z-index: 2; /* Ensure it appears above other elements if needed */
    }

    .collumn-1,
    .collumn-2 {
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Stack images vertically */
        align-items: center; /* Center images horizontally */
        width: 100%; /* Ensure columns take full width */
    }

    .collumn-1 img,
    .collumn-2 img {
        max-width: 80%; /* Resize images to fit within the screen */
        height: auto; /* Maintain aspect ratio */
        margin: 10px 0; /* Add spacing between images */
    }

    .collumn-1:last-child,
.collumn-2:last-child {
    margin-bottom: 50px; /* Add space below the last column */
}
}

    .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 */
    }