/* Container Overlay CSS */
.spotlight {
    position: relative;
    overflow: hidden; /* Prevents overflow */
    --x: 50%;
    --y: 50%;
    width: 100%; /* Adjust as needed */
   
}

.spotlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 1); /* Initial opacity covering the content */
    transition: background 0.5s ease-in-out, opacity 0.5s ease-in-out;
    pointer-events: none; /* Ensures it doesn't block interaction */
}


.spotlight:hover::before,
.spotlight.active::before {
    background: radial-gradient(circle at var(--x) var(--y), transparent 0, transparent 225px, rgba(0, 0, 0, 0.9) 226px);
    opacity: 0.4; /* Overall opacity on hover */
}

.spotlight:hover,
.spotlight.active {
    --x: var(--mouse-x, 50%);
    --y: var(--mouse-y, 50%);
}

@media (max-width: 768px) {
    .spotlight::before {
        background: none; /* Remove the background effect */
        opacity: 0; /* Set opacity to 0 to hide the overlay */
    }

    .spotlight:hover::before,
    .spotlight.active::before {
        background: none; /* Remove the background effect */
        opacity: 0; /* Set opacity to 0 to hide the overlay */
    }
}