#container {
	padding-top: 0;
}

.background-layer .color {
	z-index: 1;
}
.background-layer .img {
	z-index: 2;
}
.background-layer .vid {
	z-index: 3;
}
.hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Performance optimizations */
	will-change: auto;
	/* Ensure video covers container */
	position: absolute;
	top: 0;
	left: 0;
	/* Prevent video controls from showing */
	pointer-events: none;
	/* Smooth transitions */
	transition: opacity 0.3s ease;
	/* Safari-specific optimizations */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	/* Force hardware acceleration on Safari */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/* Fallback for older browsers that don't support object-fit */
.hero-video[data-object-fit="cover"] {
	object-fit: cover;
	font-family: 'object-fit: cover;'; /* polyfill */
}

.ultimate-hero-block .hero-content h1, .ultimate-hero-block .hero-content h4 {
	line-height:1;
}

.hero-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.shade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

h4.super-title a {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 20px;
	transition: all .5s ease;
	font-size: 22px;
	font-weight: 500;
}
h4.super-title a:hover {
	text-decoration: none;
	color: var(--mn8-orange) !important;
}

h4.super-title a svg path { transition: all .5s ease; }

h4.super-title a:hover svg path {
	fill: var(--mn8-orange);
}

/* Mobile optimizations */
@media (max-width: 768px) {
	.hero-video {
		/* Reduce video complexity on mobile */
		image-rendering: optimizeSpeed;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: optimize-contrast;
	}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.hero-video {
		/* Optimize for high DPI screens */
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}
.hero-content {
	z-index: 2;
}
.mn8-dots {
	display: flex;
	flex-direction: column;
	gap: 56px;
	position: absolute;
	right: 72px;
	bottom: 68px;
	z-index: 2;
}
.play-pause-flex {
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 2px;
	left: 50%;
	transform:translate(-50%,0);
	z-index: 2;
}
/* Ensure play/pause buttons are interactive */
.play-pause-flex .play,
.play-pause-flex .pause {
	cursor: pointer;
	pointer-events: auto;
	transition: opacity 0.2s ease;
}
.play-pause-flex .play:hover,
.play-pause-flex .pause:hover {
	opacity: 0.8;
}
.play-pause-flex .hide {
	display: none;
}

@media screen and (max-width: 1024px) {
	.mn8-dots svg {
		width: 63px; height: 63px;
	}
	.mn8-dots { gap: 32px; right: 0px; bottom: 42px; }
}


@media screen and (max-width: 768px) {
	h4.super-title a { font-size: 14px; }
	.ultimate-hero-block .hero-content { padding-top: 0px !important; width: 100% !important; }
	.ultimate-hero-block {
		padding: 50vh 0 52px !important;
	}
}