/* .text-overlay-wrapper {
    position: relative;
    display: inline-block;
    --animation-duration: 2s;
    z-index: 1;
}

.text-overlay-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2;
    transform: scaleX(1);
    transform-origin: left;
}

.text-overlay-wrapper.animate::before {
    animation: slideInOut var(--animation-duration) ease forwards;
} */
.mainBannerTextBox .mainBannerText {
    --animation-duration: 3s; /* Configurable animation duration */
}
.mainBannerTextBox .mainBannerText .mainBannerAnimatedText *:not(strong, em, a, span, i) {
	position: relative;
    display: inline-block;
    z-index: 1;
}
.mainBannerTextBox .mainBannerText .mainBannerAnimatedText h1 {display: block;}
.mainBannerTextBox .mainBannerText .mainBannerAnimatedText *:not(strong, em, a, span, i)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2;
    transform: scaleX(1);
    transform-origin: left;
}

.mainBannerTextBox .mainBannerText .mainBannerAnimatedText *.animate::before {
    animation: slideInOut var(--animation-duration) ease forwards;
}

@keyframes slideInOut {
    0% {
        transform: scaleX(1);
        transform-origin: right;
    }
    /* 0% {
        transform: scaleX(1);
        transform-origin: left;
    }
    30% {
        transform: scaleX(1);
        transform-origin: left;
    }
    30.01% {
        transform: scaleX(1);
        transform-origin: right;
    } */
    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}