/* Banner container to ensure no overflow */
.banner {
    width: 100%; /* Ensures the container spans the full width of the viewport */
    overflow: hidden; /* Prevents any overflow content */
    text-align: center; /* Centers the image if necessary */
}

/* Responsive image to adjust to screen size */
.responsive-banner {
    max-width: 100%; /* Limits the image width to the container's width */
    height: auto; /* Maintains the aspect ratio */
    display: block; /* Ensures no inline spacing below the image */
}

/* Optional: Adjust height dynamically for smaller devices */
@media screen and (max-width: 768px) {
    .responsive-banner {
        height: auto; /* Maintains the aspect ratio on smaller screens */
    }
}