mark {
    text-decoration: none;
    background: linear-gradient(-45deg, #d5e1ed, #cfbebe, #d9d0b6, #ffffff);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gradient Animation */
@keyframes gradient {
    0% {
        background-position: 0 50%;
    }

    20% {
        background-position: 20% 50%;
    }

    40% {
        background-position: 40% 50%;
    }

    60% {
        background-position: 60% 50%;
    }

    80% {
        background-position: 80% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* Base Button Styles */
.button-css {
    display: inline-block;
    background-image: linear-gradient(-45deg, #d5e1ed, #cfbebe, #d9d0b6, #ffffff);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover Glow Effect */
.hover-animation:hover {
    background-size: 400% 400%;
    animation: gradient 3s ease infinite;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
        0 0 40px rgba(255, 255, 255, 0.5),
        0 0 60px rgba(255, 255, 255, 0.3);
}