.animated-text-container-bf52c4be {
    position: relative;
    width: 100%;
}

.animated-text-container-bf52c4be.equal-height {
    display: grid;
    /* Default vertical align, can be overridden by Elementor control */
    align-items: center; 
}

.animated-text-container-bf52c4be.equal-height .animated-sentence {
    grid-area: 1 / 1 / 2 / 2;
}

.animated-text-container-bf52c4be:not(.equal-height) {
    /* When not equal height, we need the container to collapse to the active item,
       but the absolute positioning technique makes that tricky without JS calculating heights.
       For pure CSS, we rely on the first item being relative to prop open the container.
       We'll add overflow hidden to prevent absolute items from breaking layout. */
    overflow: hidden;
}

.animated-text-container-bf52c4be:not(.equal-height) .animated-sentence {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.animated-text-container-bf52c4be:not(.equal-height) .animated-sentence.is-active {
    position: relative;
}

.animated-text-container-bf52c4be .animated-sentence {
    opacity: 0;
    transition: opacity var(--transition-speed, 500ms) ease-in-out;
    pointer-events: none;
    z-index: 0;
}

.animated-text-container-bf52c4be .animated-sentence.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}