.dark-overlay {
    position: relative;
    width: 100%;
    height: 250px;
}

.dark-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5); /* This creates a black overlay with 30% opacity. You can adjust the 0.3 value to make it lighter or darker. */
    pointer-events: none; /* This ensures that the overlay doesn't interfere with any interactions with the image or other elements inside the .dark-overlay div. */
}