/* =========================================
   1. BASE STRUCTURE
   ========================================= */
.gsap-stacked-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
}

.gsap-slide-item {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #fff;
    margin: 0; padding: 0;
    overflow: hidden;
    will-change: transform;
    display: flex;
    transform-style: preserve-3d;
    transform: translate3d(0,0,0);
}

.gsap-inner {
    display: flex;
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
}
.gsap-inner.row-reverse { flex-direction: row-reverse; }

/* =========================================
   2. CONTENT & Z-INDEX
   ========================================= */
.gsap-col-content {
    flex: 1; height: 100%;
    /* display: flex;*/
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    box-sizing: border-box;
    position: relative;
    z-index: 50 !important;
    transform: translate3d(0,0,20px);
    transition: background-color 0.3s;
}

.gsap-col-image {
    width: 50%; height: 100%;
    position: relative; overflow: hidden;
    z-index: 1 !important;
    transform-style: preserve-3d;
}

/* =========================================
   3. MEDIA (VIDEO FIX)
   ========================================= */
.gsap-parallax-bg {
    width: 100%; height: 130%;
    position: absolute; top: -15%; left: 0;
    will-change: transform;
    z-index: 1;
    transform-style: preserve-3d;
}
.gsap-img-el {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    display: block;
}
.gsap-video-el {
    width: 100%; height: 100%; object-fit: cover;
    display: block; position: relative; pointer-events: none;
    z-index: -1 !important;
    transform: translate3d(0,0,-10px) !important;
}
.bg-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.3; pointer-events: none;
    z-index: 2 !important;
    transform: translate3d(0,0,1px);
}

/* =========================================
   4. LAYOUTS
   ========================================= */
.gsap-col-content.align-left { text-align: left; align-items: flex-start; }
.gsap-col-content.align-center { text-align: center; align-items: center; }
.gsap-col-content.align-right { text-align: right; align-items: flex-end; }
.gsap-inner.layout-text_only .gsap-col-content { width: 100%; flex: none; }
.gsap-inner.layout-full_bg { display: block; }
.gsap-inner.layout-full_bg .gsap-col-image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1 !important; }
.gsap-inner.layout-full_bg .gsap-col-content { width: 100%; height: 100%; position: relative; z-index: 50 !important; background-color: transparent !important; }
.gsap-stacked-wrapper[data-bg-effect="fixed"] .gsap-parallax-bg { height: 100% !important; top: 0 !important; transform: none !important; }

/* =========================================
   5. CURTAIN EFFECT TARGET
   ========================================= */
.gsap-curtain-next-row,
.material .gsap-curtain-next-row.wpb_row,
.material .gsap-curtain-next-row .wpb_content_element {
    position: relative !important;
    z-index: 10 !important; /* Critical */
    transform: none !important;
    background-clip: padding-box;
}

#footer-outer.gsap-curtain-next-row {
    z-index: 10 !important;
    position: relative !important;
}

/* =========================================
   6. RESPONSIVE
   ========================================= */
@media (max-width: 991px) {
    .gsap-slide-item { height: auto; min-height: 100vh; display: block; transform: none !important; }
    .gsap-inner, .gsap-inner.row-reverse { flex-direction: column-reverse; }
    .layout-split .gsap-col-content, .layout-split .gsap-col-image { width: 100%; height: 50vh; }
    .layout-split .gsap-col-content { height: auto; min-height: 50vh; padding: 40px 20px; }
    .layout-full_bg .gsap-col-image { position: absolute; height: 100%; width: 100%; top: 0; left: 0; }
    .gsap-parallax-bg { height: 100% !important; top: 0 !important; transform: none !important; }
}

/* Editor Fixes */
.vc_editor .gsap-slide-item, body.compose-mode .gsap-slide-item {
    height: auto !important; min-height: 200px !important; display: block !important; margin-bottom: 20px !important; border: 1px dashed #ccc; transform: none !important;
}
.vc_editor .gsap-col-content, body.compose-mode .gsap-col-content {
    width: 100% !important; display: block !important; position: relative !important; z-index: 100 !important; background: #f5f5f5;
}
.vc_editor .gsap-col-image, body.compose-mode .gsap-col-image {
    position: relative !important; width: 100% !important; height: 150px !important; opacity: 0.5; z-index: 1 !important;
}
.vc_editor .gsap-parallax-bg, body.compose-mode .gsap-parallax-bg {
    transform: none !important; position: absolute !important; height: 100% !important; top: 0 !important;
}