/* Container for banner headers */
    .banner-header-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Two columns layout, adjusts based on screen width */
        gap: 15px; /* Space between banners */
        /* padding: 10px; */ /* Padding around the container */
        justify-content: center; /* Center the grid items */
    }

    /* Style for each banner header */
    .banner-header {
        border-radius: 8px; /* Rounded corners */
        overflow: hidden; /* Ensure images stay within the rounded corners */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-color: #fff; /* Background color for contrast */
        display: flex; /* Flexbox to center content */
        align-items: center; /* Center content vertically */
        justify-content: center; /* Center content horizontally */
    }

    /* Style for images inside banner headers */
    .banner-header img {
        width: 100%; /* Make the image fill the container */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Remove extra space below the image */
    }

    /* Hover effects for banner headers */
    .banner-header:hover {
        transform: scale(1.05); /* Slight zoom effect on hover */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
    }

    /* Media query for smaller screens */
    @media (max-width: 768px) {
        .banner-header-container {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust columns for smaller screens */
        }
    }

    @media (max-width: 576px) {
        .banner-header-container {
            grid-template-columns: 1fr; /* Single column layout on very small screens */
        }
    }