/* 
Theme Name: Your New Site
Theme URI: https://github.com/elementor/hello-theme/
Description: Welcome to your new site
Author: Rooftop Twenty Two
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/



/* If using Containers (Flexbox) */
.io-col-left { 
  position: sticky; 
  top: 80px; 
}
.io-col-left .e-con-inner {        /* parent that holds the stack */
  position: relative;
  min-height: 60vh;                /* the visual height of the image stack */
}
.io-frame {                        /* apply to a container that wraps an Image widget */
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
}
.io-frame.is-active { opacity: 1; }

/* Right column spacing */
.io-step { padding: 80px 0; }

/* Mobile fallback */
@media (max-width: 767px) {
  .io-col-left { position: static; }
  .io-col-left .e-con-inner { min-height: auto; }
  .io-frame { position: static; opacity: 1; }
}

/* 1) Make sure ancestors don't kill sticky */
.io-scroller { overflow: visible; }
.io-scroller > .e-con { overflow: visible; } /* immediate child containers */
.io-scroller .e-con.e-flex { overflow: visible; } /* safety for flex parents */

/* 2) Sticky on the LEFT COLUMN (the column container, not the inner) */
.io-col-left {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;                  /* adjust for your header */
  align-self: flex-start;     /* important inside flex parents */
  z-index: 2;                 /* keep above backgrounds if any */
}

/* 3) The stacking area for images */
.io-col-left .e-con-inner {
  position: relative;         /* for absolutely positioned frames */
  min-height: 60vh;           /* visual height of the image area */
}

/* 4) Stack frames absolutely inside the inner wrapper */
.io-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
}
.io-frame.is-active { opacity: 1; }

/* Right column spacing for triggers */
.io-step { padding: 80px 0; }

/* Mobile fallback */
@media (max-width: 767px) {
  .io-col-left { position: static; }
  .io-col-left .e-con-inner { min-height: auto; }
  .io-frame { position: static; opacity: 1; }
}