/* ===================================
	Stack Section
====================================== */
.cstk-stack-widget {
	width: 100%;
}

.stack-box {
	position: relative;
	z-index: 1;
}

/*
 * CSS sticky is a graceful-degradation fallback only.
 * The JS in stack-section-wp-init.js overrides this with position:fixed !important
 * once the page loads, bypassing Elementor ancestor overflow/transform issues.
 */
.stack-box .stack-box-contain {
	height: 100vh;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.stack-box .stack-item {
	height: 100vh;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	/*
	 * isolation:isolate creates a self-contained stacking context so that
	 * z-index values inside one slide cannot bleed into a neighbouring slide.
	 */
	isolation: isolate;
}

/*
 * Initial z-index matches what JS sets: slide 1 on top (99), slide 2 next (98),
 * slide 3 underneath (97).  Matching prevents a visible flash before JS runs.
 */
.stack-box .stack-item:nth-child(1) { z-index: 99; }
.stack-box .stack-item:nth-child(2) { z-index: 98; }
.stack-box .stack-item:nth-child(3) { z-index: 97; }
.stack-box .stack-item:nth-child(4) { z-index: 98; }

/*
 * The Elementor root wrapper inside each slide.
 * position:absolute fills the slide; z-index:0 (not -1) keeps it above the
 * slide's transparent background so content is always visible.
 */
.stack-box .stack-item > .elementor {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	height: 100vh;
}

/* Dynamic slides (admin-managed) */
.stack-box .stack-item__inner,
.stack-box .cstk-stack-item-inner {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
}

.cstk-stack-slide {
	display: flex;
	flex-direction: row;
	width: 100%;
	min-height: 100vh;
	align-items: stretch;
	flex-wrap: wrap;
}

.cstk-stack-col--left {
	flex: 0 0 50%;
	max-width: 50%;
	position: relative;
	overflow: hidden;
	min-height: 100vh;
}

.cstk-stack-col--right {
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 0 12%;
	box-sizing: border-box;
}

.cstk-stack-col--left {
	position: relative;
}

/* Stack Section 02 */
.stack-card .stack-item {
	position: -webkit-sticky;
	position: sticky;
	margin-bottom: 50px;
}
.stack-card .stack-item:last-child {
	margin-bottom: 0;
}
.stack-card .stack-item .stack-card-item {
	will-change: scale;
	transform-origin: center top;
    -webkit-transform-origin: center top;
    transition: scale .5s;
}
.stack-card .stack-item .e-parent > div:first-child {
 	translate: none;
	rotate: none;
	scale: none;
	will-change: auto;
}
.stack-card .stack-item > img:first-child {
	position: absolute;
	left: -115px;
	bottom: -80px;
}

/* Stack Section 03 */
.stack-card.stack-section-3 .stack-item {
	margin-bottom: 0px;
}

/* Responsive — disable stack layout below 1200 px */
@media (max-width: 1199px) {
	.stack-box {
		height: auto !important;
	}
	.stack-box .stack-box-contain {
		height: auto;
		position: relative;
	}
	.stack-box .stack-item {
		height: auto;
		position: relative;
		display: block;
		isolation: auto;
	}
	.stack-box .stack-item .stack-item-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		height: auto;
	}
	.stack-box .stack-item > .elementor,
	.stack-box .stack-item__inner,
	.stack-box .cstk-stack-item-inner {
		position: relative;
		height: auto;
	}

	.cstk-stack-col--left,
	.cstk-stack-col--right {
		flex: 0 0 100%;
		max-width: 100%;
		min-height: auto;
	}
}

@media (max-width: 767px) {
	.stack-card .stack-item > img:first-child {
		bottom: -30px;
	}
}