.image-container {
    /* 1. Set the container to position: relative */
    position: relative;
    /* 2. Define the size of your final circular image/container */
    width: 280px;
    height: 280px;
    /* 3. Ensure content (the image) outside the circular shape is cropped */
    overflow: hidden;
    /* 4. Apply border-radius to the container to make the image circular */
    border-radius: 50%;
}

.image-container img {
    /* Ensure the image fills the container */
    width: 280px;
    height: 280px;
    /* Optional: Use object-fit for better image cropping within the circle */
    object-fit: cover;
}

.circle-overlay {
    /* 1. Position the overlay absolutely within the container */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 2. Ensure the overlay covers the entire container */
    width: 100%;
    height: 100%;
    /* 3. Apply border-radius to match the circular shape of the container */
    border-radius: 50%;
}

/* Optional: Add hover effect to change opacity or other styles */
.image-container:hover .circle-overlay {
    opacity: 0.7; /* Change transparency on hover */
    cursor: pointer;
}