.diagonal-reveal-container {
    position: relative;
    width: 100%;
    height: 400px; /* Adjust height as necessary */
    overflow: hidden;
}

.diagonal-reveal-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-reveal {
    width: 100%; /* Take the full width */
    height: 100%; /* Cover the full height */
    object-fit: cover; /* Ensure image covers the container */
    clip-path: inset(0 50% 0 0); /* Initially only show half of the image */
    transition: clip-path 0.5s ease; /* Smooth transition for reveal effect */
}

.diagonal-overlay {
    position: absolute;
    background: rgba(0.1, 0.1, 1, 0.8); /* Overlay color */
    top: 0;
    left: 50%; /* Start at the middle */
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 0%, 100%, 0%, 100%); /* Create diagonal shape */
    transition: left 0.5s ease; /* Smooth transition */
}

/* Reveal effect on hover */
.diagonal-reveal-container:hover .image-reveal {
    clip-path: inset(0 0 0 0); /* Show the entire image */
}