/*
==========================================================
TaxiERP Premium Dynamic Hero
Part 2 — Premium Hero CSS
File:
assets/css/hero.css
==========================================================
*/


/* ==========================================================
   ROOT
========================================================== */

.bt-premium-hero{

	position:relative;

	width:100%;

	overflow:hidden;

	background:#eef6fc;

	color:#15233b;

	box-sizing:border-box;

}

.bt-premium-hero *,
.bt-premium-hero *::before,
.bt-premium-hero *::after{

	box-sizing:border-box;

}


/* ==========================================================
   BACKGROUND
========================================================== */

.bt-hero-background{

	position:absolute;

	inset:0;

	z-index:0;

	pointer-events:none;

	overflow:hidden;

}

.bt-hero-sky{

	position:absolute;

	inset:0;

	background:

		linear-gradient(
			180deg,
			#dceef9 0%,
			#edf6fb 48%,
			#f8fbfd 100%
		);

}

.bt-hero-glow{

	position:absolute;

	width:520px;

	height:520px;

	border-radius:50%;

	filter:blur(80px);

	opacity:.35;

}

.bt-hero-glow-one{

	top:-260px;

	right:4%;

	background:rgba(255,193,7,.28);

}

.bt-hero-glow-two{

	bottom:-300px;

	left:-160px;

	background:rgba(42,104,153,.18);

}


/* ==========================================================
   MAIN CONTAINER
========================================================== */

.bt-hero-container{

	position:relative;

	z-index:2;

	width:min(1400px, calc(100% - 60px));

	min-height:650px;

	margin:0 auto;

	display:grid;

	grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);

	align-items:center;

	gap:30px;

	padding:65px 0 105px;

}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.bt-hero-content{

	position:relative;

	z-index:5;

	max-width:690px;

}

.bt-hero-eyebrow{

	display:inline-flex;

	align-items:center;

	gap:10px;

	margin-bottom:20px;

	padding:8px 15px;

	border:1px solid rgba(21,35,59,.10);

	border-radius:50px;

	background:rgba(255,255,255,.72);

	box-shadow:0 8px 25px rgba(21,35,59,.06);

	font-size:14px;

	font-weight:700;

	letter-spacing:.2px;

	color:#334766;

	backdrop-filter:blur(10px);

}

.bt-hero-eyebrow-dot{

	width:9px;

	height:9px;

	flex:0 0 9px;

	border-radius:50%;

	background:#f8b400;

	box-shadow:0 0 0 5px rgba(248,180,0,.12);

	animation:btHeroPulse 1.8s ease-in-out infinite;

}


@keyframes btHeroPulse{

	0%,
	100%{

		transform:scale(1);

		opacity:1;

	}

	50%{

		transform:scale(1.35);

		opacity:.65;

	}

}


/* ==========================================================
   TITLE
========================================================== */

.bt-hero-title{

	margin:0;

	max-width:720px;

	font-size:clamp(38px, 5vw, 68px);

	line-height:1.04;

	font-weight:800;

	letter-spacing:-2px;

	color:#15233b;

}

.bt-hero-title-highlight{

	display:block;

	margin-top:12px;

	font-size:clamp(22px, 2.5vw, 34px);

	line-height:1.2;

	font-weight:700;

	letter-spacing:-.7px;

	color:#344c6c;

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.bt-hero-description{

	max-width:650px;

	margin:26px 0 0;

	font-size:18px;

	line-height:1.75;

	color:#506581;

}


/* ==========================================================
   CTA
========================================================== */

.bt-hero-actions{

	display:flex;

	flex-wrap:wrap;

	align-items:center;

	gap:13px;

	margin-top:32px;

}

.bt-hero-btn{

	position:relative;

	display:inline-flex;

	align-items:center;

	justify-content:center;

	min-height:58px;

	padding:0 27px;

	border-radius:14px;

	border:2px solid transparent;

	text-decoration:none !important;

	font-size:16px;

	font-weight:800;

	line-height:1;

	overflow:hidden;

	transition:

		transform .25s ease,

		box-shadow .25s ease,

		background .25s ease;

}

.bt-hero-btn:hover{

	transform:translateY(-3px);

}

.bt-hero-btn-primary{

	background:#f8b400;

	color:#111d31 !important;

	box-shadow:0 14px 30px rgba(248,180,0,.28);

}

.bt-hero-btn-primary:hover{

	background:#ffbf18;

	box-shadow:0 18px 38px rgba(248,180,0,.34);

}

.bt-hero-btn-dark{

	background:#101a30;

	color:#fff !important;

	box-shadow:0 14px 30px rgba(16,26,48,.20);

}

.bt-hero-btn-dark:hover{

	background:#17243e;

}

.bt-hero-btn-whatsapp{

	background:#f8b400;

	color:#111d31 !important;

	box-shadow:0 14px 30px rgba(248,180,0,.24);

}

.bt-hero-btn-whatsapp:hover{

	background:#ffbf18;

}


/* ==========================================================
   SERVICE HIGHLIGHTS
========================================================== */

.bt-hero-highlights{

	display:grid;

	grid-template-columns:repeat(4, minmax(0, 1fr));

	gap:12px;

	margin-top:42px;

	max-width:680px;

}

.bt-hero-highlight{

	min-width:0;

	padding-right:16px;

	border-right:1px solid rgba(21,35,59,.13);

}

.bt-hero-highlight:last-child{

	border-right:0;

}

.bt-hero-highlight strong{

	display:block;

	margin-bottom:5px;

	font-size:18px;

	font-weight:800;

	color:#15233b;

}

.bt-hero-highlight span{

	display:block;

	font-size:13px;

	line-height:1.4;

	color:#657a96;

}


/* ==========================================================
   RIGHT VISUAL
========================================================== */

.bt-hero-visual{

	position:relative;

	width:100%;

	min-height:510px;

	display:flex;

	align-items:center;

	justify-content:center;

}

.bt-road-scene{

	position:relative;

	width:100%;

	height:510px;

	overflow:hidden;

	border-radius:34px;

	background:

		linear-gradient(
			180deg,
			rgba(255,255,255,.32),
			rgba(255,255,255,0)
		);

}


/* ==========================================================
   HORIZON
========================================================== */

.bt-road-horizon{

	position:absolute;

	top:18%;

	left:0;

	width:100%;

	height:150px;

	z-index:1;

}

.bt-horizon-line{

	position:absolute;

	left:8%;

	right:8%;

	top:72%;

	height:2px;

	background:rgba(71,94,121,.13);

	box-shadow:0 18px 35px rgba(71,94,121,.07);

}


/* ==========================================================
   VEHICLE STAGE
========================================================== */

.bt-vehicle-stage{

	position:absolute;

	left:50%;

	top:35%;

	width:650px;

	height:240px;

	transform:translate(-50%, -50%);

	z-index:6;

}

.bt-vehicle-slider{

	position:relative;

	width:100%;

	height:100%;

}

.bt-vehicle-slide{

	position:absolute;

	inset:0;

	display:flex;

	align-items:center;

	justify-content:center;

	opacity:0;

	visibility:hidden;

	transform:

		translateX(80px)

		scale(.92);

	transition:

		opacity .65s ease,

		transform .75s cubic-bezier(.22,.61,.36,1),

		visibility .65s ease;

}

.bt-vehicle-slide.is-active{

	opacity:1;

	visibility:visible;

	transform:

		translateX(0)

		scale(1);

}


/* ==========================================================
   VEHICLE SHADOW
========================================================== */

.bt-vehicle-shadow{

	position:absolute;

	left:50%;

	bottom:72px;

	width:430px;

	height:45px;

	transform:translateX(-50%);

	border-radius:50%;

	background:rgba(24,43,65,.22);

	filter:blur(20px);

	z-index:2;

}


/* ==========================================================
   GENERIC VEHICLE BODY
========================================================== */

.bt-vehicle-body{

	position:relative;

	width:470px;

	height:150px;

	border-radius:75px 82px 35px 35px;

	background:

		linear-gradient(
			180deg,
			#f7f9fb 0%,
			#d9e2ec 45%,
			#b7c4d3 100%
		);

	border:5px solid #34445b;

	box-shadow:

		0 20px 30px rgba(27,44,66,.22),

		inset 0 8px 15px rgba(255,255,255,.55);

	transform:perspective(500px) rotateX(3deg);

}


/* ==========================================================
   VEHICLE WINDOWS
========================================================== */

.bt-vehicle-window{

	position:absolute;

	top:22px;

	height:58px;

	border:4px solid #34445b;

	background:

		linear-gradient(
			145deg,
			#d8e5f1 0%,
			#9aaec5 55%,
			#73879f 100%
		);

	box-shadow:

		inset 0 5px 10px rgba(255,255,255,.3);

}

.bt-vehicle-window-front{

	left:180px;

	width:120px;

	border-radius:25px 30px 8px 8px;

}

.bt-vehicle-window-rear{

	left:55px;

	width:105px;

	border-radius:30px 8px 8px 8px;

}


/* ==========================================================
   VEHICLE DOOR
========================================================== */

.bt-vehicle-door{

	position:absolute;

	left:170px;

	top:91px;

	width:2px;

	height:47px;

	background:rgba(52,68,91,.45);

}


/* ==========================================================
   TAXI STRIPE
========================================================== */

.bt-vehicle-stripe{

	position:absolute;

	left:55px;

	right:55px;

	top:91px;

	height:30px;

	display:flex;

	align-items:center;

	justify-content:center;

	background:#f8b400;

	border-left:12px solid #15233b;

	border-right:12px solid #15233b;

	color:#111d31;

	font-size:14px;

	font-weight:900;

	letter-spacing:1.5px;

}


/* ==========================================================
   WHEELS
========================================================== */

.bt-vehicle-wheel{

	position:absolute;

	bottom:-30px;

	width:70px;

	height:70px;

	border-radius:50%;

	background:#182338;

	border:7px solid #34445b;

	box-shadow:

		inset 0 0 0 8px #73839a,

		0 8px 15px rgba(20,32,50,.25);

}

.bt-vehicle-wheel span{

	position:absolute;

	left:50%;

	top:50%;

	width:17px;

	height:17px;

	border-radius:50%;

	background:#dce3ea;

	transform:translate(-50%, -50%);

}

.bt-vehicle-wheel-front{

	right:55px;

}

.bt-vehicle-wheel-rear{

	left:55px;

}


/* ==========================================================
   DIFFERENT VEHICLE SHAPES
========================================================== */

.bt-vehicle-dzire{

	width:500px;

	height:142px;

	border-radius:68px 55px 30px 30px;

}

.bt-vehicle-ertiga{

	width:500px;

	height:165px;

	border-radius:72px 72px 30px 30px;

}

.bt-vehicle-innova{

	width:535px;

	height:175px;

	border-radius:78px 85px 32px 32px;

}

.bt-vehicle-traveller{

	width:570px;

	height:190px;

	border-radius:48px 55px 28px 28px;

}


/* ==========================================================
   VEHICLE LIGHT
========================================================== */

.bt-vehicle-light{

	position:absolute;

	left:50%;

	bottom:73px;

	width:600px;

	height:180px;

	transform:translateX(-50%);

	background:

		radial-gradient(
			ellipse at center,
			rgba(255,255,255,.48) 0%,
			rgba(255,255,255,.12) 42%,
			transparent 72%
		);

	filter:blur(5px);

	z-index:-1;

}


/* ==========================================================
   VEHICLE INFORMATION CARD
========================================================== */

.bt-vehicle-info-card{

	position:absolute;

	right:18px;

	top:29%;

	z-index:10;

	min-width:180px;

	padding:20px 22px;

	border:1px solid rgba(255,255,255,.75);

	border-radius:18px;

	background:rgba(255,255,255,.86);

	box-shadow:

		0 18px 45px rgba(29,48,73,.16);

	backdrop-filter:blur(14px);

}

.bt-vehicle-info-label{

	display:block;

	margin-bottom:7px;

	font-size:13px;

	color:#71839c;

}

.bt-current-vehicle{

	display:block;

	font-size:21px;

	line-height:1.15;

	color:#15233b;

}

.bt-current-vehicle-type{

	display:block;

	margin-top:5px;

	font-size:12px;

	font-weight:700;

	color:#778aa2;

}


/* ==========================================================
   ROAD
========================================================== */

.bt-road{

	position:absolute;

	left:-5%;

	right:-5%;

	bottom:-4%;

	height:180px;

	z-index:4;

	background:

		linear-gradient(
			180deg,
			#74869d 0%,
			#596b83 22%,
			#46566c 100%
		);

	transform:perspective(600px) rotateX(48deg);

	transform-origin:center bottom;

	border-top:10px solid #aab7c5;

	box-shadow:

		0 -8px 25px rgba(40,59,82,.16);

}

.bt-road-edge{

	position:absolute;

	left:0;

	width:100%;

	height:7px;

	background:rgba(255,255,255,.72);

}

.bt-road-edge-top{

	top:20px;

	opacity:.55;

}

.bt-road-edge-bottom{

	bottom:15px;

	opacity:.14;

}


/* ==========================================================
   ROAD LANE
========================================================== */

.bt-road-lane{

	position:absolute;

	left:0;

	right:0;

	top:72px;

	height:7px;

	display:flex;

	justify-content:space-around;

	gap:70px;

}

.bt-road-lane span{

	display:block;

	width:145px;

	height:8px;

	border-radius:10px;

	background:rgba(255,255,255,.86);

	box-shadow:0 2px 4px rgba(20,30,45,.12);

}


/* ==========================================================
   ROAD MOTION
========================================================== */

.bt-road-motion{

	position:absolute;

	left:0;

	right:0;

	bottom:20px;

	height:100px;

	z-index:5;

	overflow:hidden;

	pointer-events:none;

}

.bt-road-motion span{

	position:absolute;

	display:block;

	height:3px;

	width:80px;

	border-radius:10px;

	background:rgba(255,255,255,.35);

	transform:rotate(-8deg);

	animation:btRoadMotion 1.4s linear infinite;

}

.bt-road-motion span:nth-child(1){

	left:8%;

	top:20%;

	animation-delay:0s;

}

.bt-road-motion span:nth-child(2){

	left:32%;

	top:65%;

	animation-delay:.35s;

}

.bt-road-motion span:nth-child(3){

	left:65%;

	top:35%;

	animation-delay:.7s;

}

.bt-road-motion span:nth-child(4){

	left:87%;

	top:75%;

	animation-delay:1.05s;

}


@keyframes btRoadMotion{

	0%{

		transform:translateX(0) rotate(-8deg);

		opacity:0;

	}

	20%{

		opacity:.5;

	}

	100%{

		transform:translateX(-180px) rotate(-8deg);

		opacity:0;

	}

}


/* ==========================================================
   VEHICLE INDICATORS
========================================================== */

.bt-vehicle-indicators{

	position:absolute;

	left:50%;

	bottom:31px;

	z-index:15;

	display:flex;

	align-items:center;

	gap:7px;

	transform:translateX(-50%);

}

.bt-vehicle-indicator{

	width:9px;

	height:9px;

	padding:0;

	border:0;

	border-radius:50%;

	background:rgba(255,255,255,.55);

	cursor:pointer;

	transition:

		width .25s ease,

		background .25s ease;

}

.bt-vehicle-indicator.is-active{

	width:28px;

	border-radius:10px;

	background:#f8b400;

}


/* ==========================================================
   BOTTOM SEO STRIP
========================================================== */

.bt-hero-bottom-strip{

	position:absolute;

	left:0;

	right:0;

	bottom:0;

	z-index:20;

	background:rgba(13,24,43,.96);

	box-shadow:0 -10px 30px rgba(13,24,43,.12);

}

.bt-hero-bottom-inner{

	width:min(1400px, calc(100% - 60px));

	min-height:54px;

	margin:0 auto;

	display:flex;

	align-items:center;

	justify-content:center;

	flex-wrap:wrap;

	gap:0;

}

.bt-hero-bottom-inner span{

	position:relative;

	padding:0 18px;

	font-size:12px;

	font-weight:700;

	color:#d9e3ee;

	white-space:nowrap;

}

.bt-hero-bottom-inner span:not(:last-child)::after{

	content:"";

	position:absolute;

	right:0;

	top:50%;

	width:4px;

	height:4px;

	border-radius:50%;

	background:#f8b400;

	transform:translateY(-50%);

}


/* ==========================================================
   HOVER / FOCUS
========================================================== */

.bt-hero-btn:focus-visible{

	outline:3px solid rgba(248,180,0,.45);

	outline-offset:3px;

}

.bt-vehicle-indicator:focus-visible{

	outline:2px solid #f8b400;

	outline-offset:3px;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1100px){

	.bt-hero-container{

		width:min(100% - 40px, 1000px);

		grid-template-columns:1fr;

		padding-top:55px;

		padding-bottom:105px;

	}

	.bt-hero-content{

		max-width:850px;

		margin:0 auto;

		text-align:center;

	}

	.bt-hero-eyebrow{

		margin-left:auto;

		margin-right:auto;

	}

	.bt-hero-title{

		max-width:850px;

		margin-left:auto;

		margin-right:auto;

	}

	.bt-hero-description{

		margin-left:auto;

		margin-right:auto;

	}

	.bt-hero-actions{

		justify-content:center;

	}

	.bt-hero-highlights{

		margin-left:auto;

		margin-right:auto;

	}

	.bt-hero-visual{

		min-height:500px;

	}

	.bt-road-scene{

		max-width:850px;

		margin:0 auto;

	}

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px){

	.bt-premium-hero{

		min-height:0;

	}

	.bt-hero-container{

		width:calc(100% - 28px);

		min-height:0;

		padding:40px 0 92px;

		gap:12px;

	}

	.bt-hero-eyebrow{

		font-size:11px;

		padding:7px 11px;

	}

	.bt-hero-title{

		font-size:38px;

		line-height:1.06;

		letter-spacing:-1.3px;

	}

	.bt-hero-title-highlight{

		margin-top:9px;

		font-size:20px;

		line-height:1.25;

	}

	.bt-hero-description{

		margin-top:18px;

		font-size:15px;

		line-height:1.65;

	}

	.bt-hero-actions{

		display:grid;

		grid-template-columns:1fr 1fr;

		gap:9px;

		margin-top:24px;

	}

	.bt-hero-btn{

		width:100%;

		min-height:52px;

		padding:0 10px;

		font-size:14px;

		border-radius:12px;

	}

	.bt-hero-btn-whatsapp{

		grid-column:1 / -1;

	}

	.bt-hero-highlights{

		grid-template-columns:repeat(2, 1fr);

		gap:0;

		margin-top:28px;

	}

	.bt-hero-highlight{

		margin-bottom:15px;

		padding:5px 10px;

		text-align:left;

		border-right:1px solid rgba(21,35,59,.12);

	}

	.bt-hero-highlight:nth-child(2){

		border-right:0;

	}

	.bt-hero-highlight strong{

		font-size:16px;

	}

	.bt-hero-highlight span{

		font-size:11px;

	}

	.bt-hero-visual{

		min-height:350px;

	}

	.bt-road-scene{

		height:350px;

		border-radius:22px;

	}

	.bt-road-horizon{

		top:5%;

	}

	.bt-vehicle-stage{

		top:40%;

		width:100%;

		height:190px;

	}

	.bt-vehicle-body{

		width:280px;

		height:100px;

		border-width:4px;

		border-radius:52px 58px 25px 25px;

	}

	.bt-vehicle-dzire{

		width:295px;

		height:96px;

	}

	.bt-vehicle-ertiga{

		width:300px;

		height:108px;

	}

	.bt-vehicle-innova{

		width:315px;

		height:115px;

	}

	.bt-vehicle-traveller{

		width:325px;

		height:125px;

	}

	.bt-vehicle-window{

		top:14px;

		height:38px;

		border-width:3px;

	}

	.bt-vehicle-window-front{

		left:112px;

		width:75px;

		border-radius:15px 18px 5px 5px;

	}

	.bt-vehicle-window-rear{

		left:35px;

		width:67px;

		border-radius:18px 5px 5px 5px;

	}

	.bt-vehicle-door{

		left:106px;

		top:60px;

		height:29px;

	}

	.bt-vehicle-stripe{

		left:34px;

		right:34px;

		top:60px;

		height:20px;

		border-left-width:7px;

		border-right-width:7px;

		font-size:8px;

		letter-spacing:.8px;

	}

	.bt-vehicle-wheel{

		width:47px;

		height:47px;

		bottom:-21px;

		border-width:5px;

	}

	.bt-vehicle-wheel span{

		width:11px;

		height:11px;

	}

	.bt-vehicle-wheel-front{

		right:34px;

	}

	.bt-vehicle-wheel-rear{

		left:34px;

	}

	.bt-vehicle-shadow{

		bottom:55px;

		width:280px;

		height:30px;

	}

	.bt-vehicle-info-card{

		right:10px;

		top:12px;

		min-width:125px;

		padding:12px 14px;

		border-radius:13px;

	}

	.bt-vehicle-info-label{

		margin-bottom:4px;

		font-size:10px;

	}

	.bt-current-vehicle{

		font-size:16px;

	}

	.bt-current-vehicle-type{

		font-size:10px;

	}

	.bt-road{

		height:125px;

		bottom:-2%;

		border-top-width:7px;

	}

	.bt-road-edge-top{

		top:13px;

	}

	.bt-road-lane{

		top:52px;

		gap:20px;

	}

	.bt-road-lane span{

		width:75px;

		height:5px;

	}

	.bt-vehicle-indicators{

		bottom:18px;

	}

	.bt-hero-bottom-strip{

		position:absolute;

	}

	.bt-hero-bottom-inner{

		width:100%;

		min-height:48px;

		padding:7px 10px;

		overflow:hidden;

		justify-content:flex-start;

		flex-wrap:nowrap;

		gap:0;

	}

	.bt-hero-bottom-inner span{

		padding:0 12px;

		font-size:10px;

	}

	.bt-hero-bottom-inner span:nth-child(n+4){

		display:none;

	}

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:420px){

	.bt-hero-container{

		width:calc(100% - 20px);

		padding-top:30px;

	}

	.bt-hero-title{

		font-size:32px;

	}

	.bt-hero-title-highlight{

		font-size:18px;

	}

	.bt-hero-actions{

		grid-template-columns:1fr;

	}

	.bt-hero-btn-whatsapp{

		grid-column:auto;

	}

	.bt-hero-visual{

		min-height:320px;

	}

	.bt-road-scene{

		height:320px;

	}

	.bt-vehicle-body{

		transform:perspective(500px) rotateX(3deg) scale(.86);

	}

	.bt-vehicle-info-card{

		top:8px;

		right:6px;

	}

}


/* ==========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion:reduce){

	.bt-hero-eyebrow-dot,
	.bt-road-motion span{

		animation:none;

	}

	.bt-vehicle-slide{

		transition:none;

	}

	.bt-hero-btn{

		transition:none;

	}

}