/* ================= RESPONSIVE ================= */

@media (max-width: 1600px) {
	.services .feature h3 {font-size: 1.5rem;}
	.services .feature p {font-size: 13px;}

}

@media (max-width: 1540px) {
	.feature h3 {font-size: 1.5rem;}
	.feature p {font-size: 13px;}

}

@media (max-width: 1280px) {
.hero {
	position: relative;
	height: 50vh;       /* scale with viewport height */
	max-height: 400px;  /* never taller than 800px */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000; /* fallback color */
}


/* Background video */
.hero-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;       /* full width */
	height: auto;      /* auto height to preserve ratio */
	transform: translate(-50%, -50%);
	z-index: 1;
}

.feature h3 {font-size: 1.25rem;}
.feature p {font-size: 13px;}

	.services .feature h3 {font-size: 1.2rem;}
.services .feature p {font-size: 13px;}

}

@media (max-width: 1024px) {
	.hero {
		position: relative;
		height: 40vh;       /* scale with viewport height */
		max-height: 300px;  /* never taller than 800px */
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #000; /* fallback color */
	}
	
	/* Background video */
	.hero-video {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;       /* full width */
		height: auto;      /* auto height to preserve ratio */
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	.hero-inner {
		flex-direction: column;
		text-align: center;
	}

	.features-inner {
		grid-template-columns: 1fr;
		
	}
	
	.devices-text h2, .devices-feature-text h2 {
	  font-size: 1.7rem;
	  margin-bottom: 20px;
	  text-align: left;
	}
	
	.feature h3 {color:#FFF;font-weight: 600;font-size: 1.875rem;}
	.feature p {color:#d3e1bb;font-size: 1.2rem;}
	
	.services .feature h3  {color:#FFF;font-weight: 600;font-size: 1.875rem;}
	.services .feature p {color:#d3e1bb;font-size: 1.2rem;}

}


@media (max-width: 768px) {
	
	.exx-form-input,
	.exx-form-textarea, .exx-form-select  {
		width: 100%;
		max-width:420px;
	}
	
	.feature h3 {font-size: 1.5rem;}
	
	.services .feature h3   {font-size: 1.3rem;}
	
	.services .feature p {color:#d3e1bb;font-size: 1rem;}
	
	
	.hero-text h1 {
	  font-size: clamp(1.5rem, 2vw, 2.5rem);
	  margin-bottom: 8px !important;
	}
	
	.hero-text p {
	  font-size: 1rem;
	  max-width: 700px;
	  margin: 0 auto;
	}
	
	.menu-toggle {
		display: flex;
	}

	.nav-right {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #212020;
		display: none;
		z-index: 999;
	}

	.nav-right.open {
		display: block;
	}

	.nav-links {
		flex-direction: column;
		gap: 0;
	}

	.nav-links li {
		border-top: 1px solid rgba(255,255,255,0.15);
	}

	.nav-links a {
		display: block;
		padding: 1rem 1.25rem;
	}
	
	.nav-links li a::after {
		content: "›"; /* clean chevron like Infinite Campus */
		position: relative;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 16px;
		line-height: 1;
		opacity: 0.7;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.devices-text h2 {
	  font-size: 1.5rem;
	  margin-bottom: 20px;
	  text-align: left;
	}
	
	.responsive-feature-text h2 {
	  font-size: 1.5rem;
	  margin-bottom: 20px;
	  text-align: left;
	}

	.button-row {
		grid-template-columns: 1fr;
	}
	
	.hero {
		position: relative;
		height: 30vh;       /* scale with viewport height */
		max-height: 200px;  /* never taller than 800px */
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #000; /* fallback color */
	}
	
	/* Background video */
	.hero-video {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;       /* full width */
		height: auto;      /* auto height to preserve ratio */
		transform: translate(-50%, -50%);
		z-index: 1;
	}
}
@media (max-width: 479px) {
	
	.exx-form-input,
.exx-form-textarea, .exx-form-select  {
	width: 100%;
	max-width:370px;
}
}