@media (min-width: 1024px) {
    * {
        cursor: none !important;
    }

    @keyframes expand {
        0% {
            width: 8px;
            height: 8px;
            background-color: rgba(255, 255, 255, 0.5);
            filter: blur(0.1rem);
        }
        100% {
            width: 377px;
            height: 377px;
            background-color: rgba(236, 255, 250, 0);
            filter: blur(5rem);
        }
    }


    @keyframes expand-hover {
        0% {
            width: 8px;
            height: 8px;
            background-color: rgba(255, 255, 255, 0.8);
            filter: blur(0.1rem);
        }
        100% {
            width: 255px;
            height: 255px;
            background-color: rgba(236, 255, 250, 0);
            filter: blur(5rem);
        }
    }

    .custom-cursor {
        position: absolute;
        pointer-events: none;
        z-index: 2147483647;
        will-change: width, height, filter;
    }

    .custom-cursor.hover-interactive .inner-circle {
        width: 15px;
        height: 15px;
        border: solid #6e6ec6 1px;
        border-radius: 50%;
        background-color: #ababf9;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2147483647;

    }

    .custom-cursor.hover-interactive .circle {
        width: 1px;
        height: 1px;
        border-radius: 50%;
        background-color: #ababf9;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation-name: expand-hover;
        animation-iteration-count: infinite;
        animation-duration: 1.5s;
        animation-timing-function: ease-in;
    }

    .inner-circle {
        width: 13px;
        height: 13px;
        border: solid #1f8c8d 1px;
        border-radius: 50%;
        background-color: rgba(203, 231, 231, 1);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2147483647;
    }

    .circle {
        width: 1px;
        height: 1px;
        border-radius: 50%;
        background-color: rgba(203, 231, 231, 1);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation-name: expand;
        animation-iteration-count: infinite;
        animation-duration: 3s;
        animation-timing-function: ease-in;
    }

    .shadowed {
        position: relative;
    }

}