/* fix for foldable / narrow screens: keep "TECHNOLOGY" visible */

/* Target the banner title span pushed to the right and reset transforms */
.infetech-banner-area .title span {
	transform: none !important;
	-webkit-transform: none !important;
	display: inline-block !important;
	margin-left: 0 !important;
}

/* For small narrow screens (phones and folded inner panes) force break and left alignment */
@media (max-width: 420px) {
	.infetech-banner-area .title {
		text-align: left !important;
		font-size: 26px !important;
		line-height: 1.02 !important;
	}
	.infetech-banner-area .title span {
		display: block !important;
		transform: translateX(0) !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
}

/* Foldable-specific rule (Chromium "spanning" feature): nudge left and reduce size */
@media (spanning: single-fold-vertical) and (max-width: 900px) {
	.infetech-banner-area .title {
		font-size: calc(5.5vw + 6px) !important;
		text-align: left !important;
	}
	.infetech-banner-area .title span {
		display: block !important;
		transform: translateX(0) !important;
		margin-left: 0 !important;
		padding-left: env(fold-left, 0px) !important;
	}
}

/* Safety: prevent horizontal overflow from the banner */
.infetech-banner-area {
	overflow-x: hidden !important;
}

/* Force TECHNOLOGY to sit directly below FUTURE and align flush left on small phones */
@media (max-width: 420px) {
	.infetech-banner-area .title {
		margin-left: 0 !important;
		padding-left: 0 !important;
		text-align: left !important;
		display: block !important;
		font-size: 26px !important;
		line-height: 1.02 !important;
	}

	.infetech-banner-area .title span {
		display: block !important;
		transform: none !important;
		-webkit-transform: none !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
		position: relative !important;
		left: 0 !important;
		width: 100% !important;
		text-align: left !important;
		margin-top: 0.1em !important;
	}

	/* Remove any left offset introduced by parent utility classes */
	.infetech-banner-area [class*="ml-"] {
		margin-left: 0 !important;
	}
}

/* Move the heading block so its left edge aligns with the viewport left edge
	 This overcomes container `ml-` offsets so the second line starts at the screen edge.
*/
@media (max-width: 420px) {
	.infetech-banner-area .title {
		position: relative !important;
		left: calc(50% - 50vw) !important;
		width: 100vw !important;
		box-sizing: border-box !important;
		padding-left: 12px !important; /* small breathing room from the absolute edge */
		padding-right: 12px !important;
	}

	.infetech-banner-area .title span {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}
}

/* Strong override: pin the title block to the absolute left edge of the viewport
	 This forces both lines (FUTURE / TECHNOLOGY) to start at the screen's left.
*/
@media (max-width: 420px) {
	.infetech-banner-area {
		overflow-x: hidden !important;
	}

	.infetech-banner-area .title {
		position: absolute !important;
		left: 0 !important;
		top: 14% !important; /* keep vertical placement similar to original; tweak if needed */
		width: 100vw !important;
		max-width: 100vw !important;
		transform: none !important;
		-webkit-transform: none !important;
		padding-left: 14px !important; /* small inset from the physical edge */
		padding-right: 14px !important;
		box-sizing: border-box !important;
		z-index: 15 !important;
		text-align: left !important;
	}

	.infetech-banner-area .title span {
		display: block !important;
		transform: none !important;
		left: 0 !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
		width: auto !important;
		text-align: left !important;
	}

	/* also neutralize any container offsets that may push content right */
	/* Use attribute selectors to match utility classes (avoids escaping special chars) */
	.infetech-banner-area [class*="flex"], .infetech-banner-area [class*="w-max"], .infetech-banner-area [class*="ml-10"] {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}


/* Stretch and shift the background video on very narrow screens so it covers
	 the heading even when the heading is shifted left. Tweak left/width values
	 if your Fold viewport differs. */
@media (max-width: 420px) {
	.infetech-banner-area video {
		position: absolute !important;
		top: 0 !important;
		left: -10vw !important; /* shift left so video extends beyond right edge */
		width: 120vw !important; /* make video wider than viewport to ensure coverage */
		height: 100% !important;
		min-width: 120vw !important;
		object-fit: cover !important;
		object-position: left center !important;
		z-index: 1 !important;
	}
}


}