/* ═══════════════════════════════════════════════
 * Valley Header — sticky glass effect
 * Applies a dark, frosted-glass background to ANY Elementor section
 * (or container) that has scrolled past its sticky-effects threshold.
 *
 * Elementor configuration on the section:
 *   Advanced → Motion Effects → Sticky      = Top
 *   Advanced → Motion Effects → Effects Offset = 100  (or your taste)
 *
 * Elementor toggles two classes natively as the user scrolls:
 *   .elementor-sticky                  — element has sticky enabled
 *   .elementor-sticky--effects         — scroll has passed the effects offset
 *
 * No JS required.
 * ═══════════════════════════════════════════════ */

/* Smooth fade between transparent and glass states. Apply to any Elementor
 * section/container with the sticky class so the transition is pre-armed. */
.elementor-section.elementor-sticky, .e-con.elementor-sticky {
	transition: background-color 280ms ease, -webkit-backdrop-filter 280ms ease, backdrop-filter 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

/* Effects state — clean frosted-glass overlay once scroll passes the offset.
 * Very translucent slight-navy tint + strong blur reads as glass on most
 * backgrounds (light or dark hero). */
.elementor-section.elementor-sticky--effects, .e-con.elementor-sticky--effects {
	background-color: rgba(20, 30, 50, .32) !important;
	background-image: none !important;
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	backdrop-filter: saturate(180%) blur(22px);
	box-shadow: 0 4px 30px rgba(0, 0, 0, .12);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.elementor-section.elementor-sticky--effects.nitro-lazy, .e-con.elementor-sticky--effects.nitro-lazy {
	background-image: none !important;
}

/* When the parent sticky section enters effects state, also flatten any
 * inner column/container backgrounds so the glass shows through cleanly. */
.elementor-section.elementor-sticky--effects > .elementor-container > .elementor-column > .elementor-widget-wrap, .elementor-section.elementor-sticky--effects > .elementor-container, .e-con.elementor-sticky--effects > .e-con-inner {
	background-color: transparent !important;
	background-image: none !important;
}

.elementor-section.elementor-sticky--effects > .elementor-container > .elementor-column > .elementor-widget-wrap.nitro-lazy, .elementor-section.elementor-sticky--effects > .elementor-container.nitro-lazy, .e-con.elementor-sticky--effects > .e-con-inner.nitro-lazy {
	background-image: none !important;
}