/* Styling for the banner section */
.banner {
    height: 50vh; /* Adjusted to 50% of the viewport height */
    width: 100%;
    margin: auto;
}

.banner-image {
    height: 100%; /* Ensures the image fills the entire height of the banner */
}

.banner-image img {
    width: 100%; /* Ensures the image fills the entire width of its container */
    height: 100%; /* Ensures the image fills the entire height of its container */
    object-fit: cover; /* Ensures the image maintains its aspect ratio and covers the entire container */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .banner {
        height: 40vh; /* Adjusted for smaller screens */
    }
}