/* Scroll Color Effects for Elementor — effect is contained to the tagged section only */

/* The tagged section itself transitions its background and text */
[data-sce-bg],
[data-sce-text] {
	transition: background-color 0.8s ease, color 0.8s ease;
}

[data-sce-text] h1,
[data-sce-text] h2,
[data-sce-text] h3,
[data-sce-text] h4,
[data-sce-text] h5,
[data-sce-text] h6,
[data-sce-text] p,
[data-sce-text] span,
[data-sce-text] li,
[data-sce-text] a {
	transition: color 0.8s ease;
}

/* Active state: section shows its chosen colors */
.sce-on[data-sce-bg] {
	background-color: var(--sce-bg) !important;
	background-image: none !important;
}

.sce-on[data-sce-text],
.sce-on[data-sce-text] h1,
.sce-on[data-sce-text] h2,
.sce-on[data-sce-text] h3,
.sce-on[data-sce-text] h4,
.sce-on[data-sce-text] h5,
.sce-on[data-sce-text] h6,
.sce-on[data-sce-text] p,
.sce-on[data-sce-text] span,
.sce-on[data-sce-text] li,
.sce-on[data-sce-text] a {
	color: var(--sce-text) !important;
}


@media (prefers-reduced-motion: reduce) {
	[data-sce-bg],
	[data-sce-text],
	[data-sce-text] * {
		transition: none !important;
	}
}

/* Inner Elementor wrappers must not hide the section color while active */
.sce-on > .elementor-container,
.sce-on > .e-con-inner {
	background: transparent !important;
}