.underline-effect {
    display: inline-block;
    position: relative;
    font-size: 2.5rem;
    font-weight: bold;
    padding-bottom: 20px;
}

.underline-effect::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, rgba(255, 165, 0, 0.3) 0%, rgba(255, 165, 0, 1) 100%);
    border-radius: 12rem;
    transform-origin: left;
    transform: scaleY(1);
    animation: grow 1s forwards;
}

@keyframes grow {
    30% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(2);
    }
}