.heading-50 {
    position: relative;
    padding: 20px 0;
    display: inline-block; /* Ensures the heading takes the width of the content */
}

.heading-50::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; /* This will be dynamically adjusted based on the content */
    height: 2px;
    background: linear-gradient(90deg,
        #6366f1 0%,
        #f59e0b 50%,
        #6366f1 100%
    );
    animation: quantumWave 2s infinite;
    display: block;
}

@keyframes quantumWave {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }
    50% {
        transform: scaleX(1);
        transform-origin: left;
    }
    50.1% {
        transform: scaleX(1);
        transform-origin: right;
    }
    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}