body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.banner {
    width: 100%;
    height: 181px; /* Fixed height for larger screens */
    background-image: url('bg181.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    height: 181px; /* Initial fixed height */
    width: auto; /* Maintain aspect ratio */
    max-height: 100%; /* Ensure it doesn't overflow the banner */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .banner {
        height: auto; /* Allow the height to adjust */
        padding: 20px 0; /* Adjust padding to maintain spacing */
    }

    .logo {
        height: auto; /* Adjust height automatically */
        max-width: 90%; /* Limit width to prevent overflow */
        margin: auto; /* Center logo horizontally */
    }
}