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

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

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

.under-construction {
    display: block; /* Ensure the image is treated as a block-level element */
    margin: 20px auto; /* Center the image horizontally and add space above */
    max-width: 100%; /* Ensure the image scales properly */
    height: auto; /* Maintain aspect ratio */
    text-align: center; /* Center-align any text inside the container (if applicable) */
}

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

footer {
    text-align: center; /* Center the footer text */
    padding: 20px; /* Add padding around the footer */
    background-color: #96c93b; /* Background color for the footer */
    color: white; /* Text color for the footer */
    position: fixed; /* Fix the footer at the bottom of the page */
    width: 100%; /* Full width of the page */
    bottom: 0; /* Position at the bottom */
}


@media screen and (max-width: 768px) {
    body {
        padding: 10px; /* Add padding to the body on small screens */
    }

    .logo, .logo-3 {
        width: 50%; /* Make logos take full width */
    }

    .logo-2 {
        width: 20%; /* Adjust logo size for mobile */
        margin: 10px auto; /* Center the logo with less margin */
        top: 17%; /* Adjust position for mobile */
        left: 25px; /* Adjust position for mobile */
    }

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