/* Header Section - "News & Events" */
        .header-section {
            position: relative;
            width: 100%;
            height: 400px; /* Height of the header image area */
            background-color: #a0aec0; /* Placeholder color for the image */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .header-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(41, 128, 185, 0.7), rgba(52, 152, 219, 0.7)); /* Blue gradient overlay */
            z-index: 1;
        }

        .header-content {
            position: relative;
            z-index: 2;
            color: white;
            font-size: 3rem;
            font-weight: bold;
            text-align: center;
            padding: 0 1rem;
        }

        /* Main Content Area - Blank for future additions */
        .main-content-area {
            background-color: #f3f4f6; /* Same as body background */
            padding: 4rem 0; /* Ample padding for content to be added */
            min-height: 300px; /* Ensure some height even when blank */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            color: #777;
            text-align: center;
        }

/* New styles for the image gallery */
.image-gallery {
    display: flex; /* Use flexbox for side-by-side layout */
    justify-content: center; /* Center the images horizontally */
    flex-wrap: wrap; /* Allow images to wrap to the next line on smaller screens */
    gap: 20px; /* Space between images */
    max-width: 1200px; /* Max width of the gallery */
    margin: 0 auto; /* Center the gallery */
    padding: 20px; /* Add some padding around the gallery */
}

.image-item {
    flex: 1; /* Allow items to grow and shrink */
    min-width: 280px; /* Minimum width for each image item before wrapping */
    max-width: 350px; /* Maximum width for each image item */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for each image block */
    border-radius: 8px; /* Slightly rounded corners */
    overflow: hidden; /* Hide anything outside the border-radius */
    background-color: #fff; /* Background for the image block */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.image-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

.image-item img {
    width: 100%; /* Make image fill its container */
    height: 250px; /* Fixed height for consistency */
    object-fit: cover; /* Cover the area, cropping if necessary */
    display: block; /* Remove extra space below image */
    border-radius: 8px 8px 0 0; /* Apply border radius only to top corners of image */
}