/* This class is for the parent container of the heading. */
.gsap-gradient-pan .elementor-heading-title {
    /* Define your gradient with more colors */
    background-image: linear-gradient(
        120deg,
        #00FFFF,   /* Vibrant Cyan */
        #8A2BE2,   /* Bright Blue Violet */
        #FF00FF,   /* Electric Fuchsia */
        #00FFFF,   /* Repeating Cyan */
        #00FF7F,   /* Bright Spring Green */
        #8A2BE2,    /* Blue Violet */
      	#00FFFF  /* Vibrant Cyan */
    );

    /* Keep the large background size for smooth panning */
    background-size: 300% 100%;

    /* The magic that clips the background to the text */
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Add a text shadow for a glowing effect
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.7), 0 0 20px rgba(0, 170, 255, 0.4); */
}


/* Hide the default mouse cursor */
body, a, button, .elementor-button {
    /*cursor: none !important;*/
}

/* Styling for the custom cursor dot */
.custom-cursor {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    mix-blend-mode: difference;
    z-index: 9999;
    transform: translate(-50%, -50%);
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0; /* Starts hidden */
    transition: opacity 0.3s ease-in-out;
}

/* Styling for the glossy outer glow/ring */
.custom-cursor-follower {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    mix-blend-mode: difference;
    z-index: 9999;
    transform: translate(-50%, -50%);
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.5);
    opacity: 0; /* Starts hidden */
    transition: opacity 0.3s ease-in-out;
}

/* When the mouse is over an interactive element */
a:hover .custom-cursor, button:hover .custom-cursor, .elementor-button:hover .custom-cursor {
    transform: scale(0.5); /* Shrink the dot */
    opacity: 1;
}
a:hover .custom-cursor-follower, button:hover .custom-cursor-follower, .elementor-button:hover .custom-cursor-follower {
    transform: scale(1.5); /* Grow the glow */
    opacity: 1;
}

/* Make cursor visible when it's inside the body */
body:hover .custom-cursor, body:hover .custom-cursor-follower {
    opacity: 1;
}