body, body * {
    cursor: none !important; /* Default cursor is hidden */
}
@media (min-width: 768px) {
    .small-circle {
        position: absolute;
        width: 6px; /* Circle diameter (3px radius) */
        height: 6px;
        background-color: #ffffff; /* White color */
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s ease, background-color 0.3s ease;
        z-index: 15000; /* Always on top */
    }

    .large-circle {
        position: absolute;
        width: 50px; /* 25px radius */
        height: 50px;
        border: 1px solid #ffffff; /* 1px White border */
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
        z-index: 15000; /* Always on top */
    }

    .hover-target:hover ~ .small-circle {
        opacity: 0;
    }

    .hover-target:hover ~ .large-circle {
        width: 40px; /* Shrink by 5px on each side */
        height: 40px;
        border-color: transparent;
        background-color: rgba(255, 255, 255, 0.5); /* White background with 50% opacity */
    }
}