.image-container { /* Optional: Container for the image if needed for positioning etc. */
 position: relative; /* Needed if you want to use absolute positioning for overlays, etc. */
 overflow: hidden; /* Helps prevent any scaling issues with the hover effect */
}

.image-container img {
 padding-top: 20px;
 padding-bottom: 20px;
 transition: filter 0.3s ease; /* Smooth transition for the filter property */
 display: block; /* Prevents potential spacing issues below the image */
}

.image-container img:hover {
 filter: brightness(1.1); /* Adjust the brightness value (1.1, 1.2, etc.) to control the lightening effect */
}


/* Alternative using opacity (less bright, but a different look) */
.image-container img:hover {
 opacity: 0.9; /* Adjust opacity value (0.9, 0.8, etc.) */
}

/* Example with a pseudo-element overlay (more control, can add other effects) */
.image-container {
 position: relative;
 overflow: hidden;
}

.image-container img {
 display: block;
 transition: transform 0.3s ease; /* Optional: Add a transition for scaling */
}

.image-container::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(255, 255, 255, 0); /* Start with transparent white overlay */
 transition: background-color 0.3s ease; /* Transition for the overlay color */
 pointer-events: none; /* Prevent the overlay from blocking clicks on the image */
}

.image-container:hover::after {
 background-color: rgba(255, 255, 255, 0.2); /* Slightly visible white overlay on hover */
}

/*.image-container:hover img {
 transform: scale(1.02); Optional: Slight scale effect on hover 
}*/