/* ------------------------ Yellow Underline Start ------------------------ */

.yellow-underline-wrapper{
    display: inline-block;
    /* background-color: #34bcd2; */
}

.yellow-underline-text::after{
    content: "";
    z-index: 3;
    width: 100%;
    height: 3px;
    background: #fdca1f;
    display: block;
    position: relative;
    top: -7px;
    margin: auto;
}


.blue-underline-text::after{
    content: "";
    z-index: 3;
    width: 100%;
    height: 3px;
    background: #50b9ba;
    display: block;
    position: relative;
    top: -7px;
    margin: auto;
}

.green-underline-text::after{
    content: "";
    z-index: 3;
    width: 100%;
    height: 3px;
    background: #63dd73;
    display: block;
    position: relative;
    top: -7px;
    margin: auto;
}

.yellow-underline-text-opacity::after{
    content: "";
    z-index: 3;
    width: 100%;
    height: 3px;
    background: #fdca1f;
    display: block;
    position: relative;
    top: -7px;
    margin: auto;
    opacity:0%;
    animation: underline-transition-transformX 0.8s ease-in forwards alternate 2.5s;
    
}

.yellow-underline-text-transformX::after{
    content: '';
    z-index: 3;
    width: 100%;
    height: 3px;
    background: #fdca1f;
    display: block;
    position: relative;
    top: -7px;
    margin: auto;
    animation: underline-transition-transformX 1s ease-in forwards alternate 1.5s;
    opacity:0%;
    transform: translateX(-80%);
    
}

@keyframes underline-transition-opacity{
    0%{
        opacity: 0%;
    }
    30%{
        opacity: 20%;
    }
    100%{
        opacity: 100%;
    }
}

@keyframes underline-transition-transformX{
    0%{
        opacity: 0%;
    }
    30%{
        opacity: 40%;
    }
    100%{
        opacity: 100%;
        transform: translateX(0%)
    }
}

@media (max-width: 1100px){
    .yellow-underline-text-opacity::after{
        top: -6px;
    }
    .yellow-underline-text-transformX::after{
        top: -6px;
    }  
}