/* Styling for the blur effect */
.blur-effect {
    position: absolute;
    width: 750px;
    /* Set the size of the image */
    height: 750px;
    pointer-events: none;
    background-image: url('/assets/images/sections/our-advantages/circular-blur-for-cursor-effect.webp');
    /* Your blur image */
    background-size: contain;
    z-index: 10;
    /* Make sure it stays above other content */
    transform: translate(-50%, -50%);
    /* To center the image around the cursor */
}

/* Ensuring the section has relative positioning */
#blur-section {
    position: relative;
    overflow: hidden;
    /* Hide the blur if it goes out of bounds */
}