/**
 * Alternating main Elementor container backgrounds.
 *
 * This stylesheet is intentionally isolated. JavaScript adds the classes only
 * to top-level page-content containers, excluding header/footer/popup templates
 * and all nested containers.
 */

body.sp-alt-gradients-active {
	--sp-alt-gradient-1: radial-gradient(circle at 12% 8%, rgba(82, 103, 255, 0.16), transparent 34%), linear-gradient(145deg, #070914 0%, #0b0d1c 52%, #0d0b1a 100%);
	--sp-alt-gradient-2: radial-gradient(circle at 88% 12%, rgba(132, 83, 255, 0.14), transparent 33%), linear-gradient(145deg, #0d0f18 0%, #11131b 55%, #090b13 100%);
}

body.sp-alt-gradients-active .sp-alt-gradient-section {
	--background-transition: 0s;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
}

body.sp-alt-gradients-active .sp-alt-gradient-section.sp-alt-gradient-1 {
	background-image: var(--sp-alt-gradient-1) !important;
}

body.sp-alt-gradients-active .sp-alt-gradient-section.sp-alt-gradient-2 {
	background-image: var(--sp-alt-gradient-2) !important;
}

/* Remove only the selected main container's own Elementor overlay/background. */
body.sp-alt-gradients-active .sp-alt-gradient-section::before {
	background-color: transparent !important;
	background-image: none !important;
	opacity: 0 !important;
}

body.sp-alt-gradients-active .sp-alt-gradient-section > .elementor-background-overlay {
	display: none !important;
}

/*
 * Existing full-section custom widget surfaces are made transparent only when
 * they sit inside a selected main container. Cards and all nested element
 * styling remain untouched.
 */
body.sp-alt-gradients-active .sp-alt-gradient-section .hero-wrapper,
body.sp-alt-gradients-active .sp-alt-gradient-section .sp-hero2,
body.sp-alt-gradients-active .sp-alt-gradient-section .srv-wrapper,
body.sp-alt-gradients-active .sp-alt-gradient-section .sp-pg-widget,
body.sp-alt-gradients-active .sp-alt-gradient-section .sp-tp-root,
body.sp-alt-gradients-active .sp-alt-gradient-section .sp-faq-root,
body.sp-alt-gradients-active .sp-alt-gradient-section .industries-wrapper,
body.sp-alt-gradients-active .sp-alt-gradient-section .sp-single-project-wrapper,
body.sp-alt-gradients-active .sp-alt-gradient-section .spf-single-portfolio-wrapper {
	background-color: transparent !important;
	background-image: none !important;
}

/* Preserve smooth visual continuity without changing any widget animation. */
@media (prefers-reduced-motion: no-preference) {
	body.sp-alt-gradients-active .sp-alt-gradient-section {
		transition: background-image 180ms ease;
	}
}