.elementor-image-sequence-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background-color: transparent;
}

.elementor-image-sequence-bg canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ensure the wrapper container has relative positioning to act as absolute boundary */
.elementor-element[data-image-sequence-active="true"] {
    position: relative !important;
    overflow: hidden !important;
}

/* Ensure Elementor background overlay (::before pseudo-element or .elementor-background-overlay div) is stacked above the canvas */
.elementor-element[data-image-sequence-active="true"]::before,
.elementor-element[data-image-sequence-active="true"] > .elementor-background-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Ensure child elements (content, text, widgets) are stacked on top of the overlay and canvas */
.elementor-element[data-image-sequence-active="true"] > *:not(.elementor-image-sequence-bg):not(.elementor-background-overlay) {
    position: relative;
    z-index: 2;
}

/* Specifically for Elementor flex container child wrappers */
.elementor-element[data-image-sequence-active="true"] > .elementor-container,
.elementor-element[data-image-sequence-active="true"] > .elementor-widget-wrap,
.elementor-element[data-image-sequence-active="true"] > .e-con-inner {
    position: relative;
    z-index: 2;
}