/*
 * SuperByte Elementor Hero v1.5
 * Critical 3D rendering rules only.
 *
 * IMPORTANT:
 * This plugin does NOT set the hero height.
 * Elementor remains fully responsible for the section/container height.
 */

.sb-phone-side {
	perspective: 1800px !important;
	-webkit-perspective: 1800px !important;
	overflow: visible !important;
}

.sb-phone-scroll,
.sb-phone-base-rotation,
.sb-phone-tilt,
.css-phone,
.css-phone-layer,
.chassis {
	transform-style: preserve-3d !important;
	-webkit-transform-style: preserve-3d !important;
}

.css-phone {
	filter: none !important;
	transform-origin: 50% 50%;
	will-change: transform;
}

.css-phone-front {
	transform: translateZ(9px) !important;
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
}

.css-phone-back {
	transform: translateZ(-9px) rotateY(180deg) !important;
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
}

.camera-bump {
	transform: translateZ(4px) !important;
	transform-style: preserve-3d !important;
	-webkit-transform-style: preserve-3d !important;
}

.lens,
.flash {
	transform: translateZ(3px);
}

.sb-tech-label {
	will-change: opacity, transform;
}

/*
 * Desktop only: the track owns the additional scroll distance while the
 * measured Elementor hero keeps its original visual dimensions.
 */
@media (min-width: 768px) {
	.sb-hero-scroll-track {
		position: relative;
		box-sizing: border-box;
		flex: 0 1 var(--sb-hero-natural-width);
		align-self: center;
		width: var(--sb-hero-natural-width);
		max-width: 100%;
		min-width: 0;
		margin-right: auto;
		margin-left: auto;
	}

	.sb-hero-scroll-track > .sb-hero {
		position: sticky !important;
		top: var(--sb-hero-sticky-top, 0px) !important;
		box-sizing: border-box;
		width: 100% !important;
		height: var(--sb-hero-natural-height) !important;
		min-height: var(--sb-hero-natural-height) !important;
		max-height: var(--sb-hero-natural-height) !important;
		margin: 0 !important;
		z-index: 2;
	}
}

@media (max-width: 767px) {
	.css-phone-front {
		transform: translateZ(7px) !important;
	}

	.css-phone-back {
		transform: translateZ(-7px) rotateY(180deg) !important;
	}
}