/* CTA HERO */

.cta-test{
    background-color: white;
    border-radius: 15px;
    padding: 18px;
    padding-right:80px;
    display: flex;
    align-items: center;
    gap: 24px;
    color: rgba(30, 30, 30, 0.5);
    position: relative;

}
.background-ico-test{
    background-color: #D7F300;
    border-radius:12px;
    padding: 14px;
    position: absolute;
    right:5px;
    width: 56px;
    translate:0;
    height: 90%;
    transition: 
        width 1.4s cubic-bezier(0.64, 0.02, 0.34, 0.99),
        translate 0.8s ease-out .5s,
        border-radius .4s ease-out .5s,
        height .8s ease-out .5s;
    display: flex;
    justify-content: end;
    mix-blend-mode: multiply;   
    align-items: center;

}
.arrow-ico-test{
    width:24px;
    height: 24px;
    overflow: hidden;
    display: flex;
    color: black;
}
.cta-test .arrow-ico-test .ico-cta-test{
    transform: translate3d(-24px, 0, 0);
    transition: transform .8s ease-out;
}
.cta-test:hover{
    color: black;
    transition: color 2.5s ease-in .8s;
}
.cta-test:hover .arrow-ico-test .ico-cta-test{
    transform: translate3d(0, 0, 0);
    transition: transform .8s ease-out;

}
.cta-test:hover .background-ico-test{
    width: 100%;
    height:100%;
    translate:5px;
    border-radius:15px;
    transition: 
        width .8s cubic-bezier(0.64, 0.02, 0.34, 0.99),
        translate 0.8s ease-out .5s,
        border-radius .4s ease-out .5s,
        height .8s ease-out .5s;
}