/* =========================================================
   Bareilly Taxi Core
   Premium Dynamic Homepage Hero
   ========================================================= */

.bt-premium-hero{
	position:relative;
	overflow:hidden;
	min-height:760px;
	background:
		linear-gradient(135deg,#061a35 0%,#0b3159 48%,#17649a 100%);
	color:#fff;
	isolation:isolate;
}

.bt-hero-background{
	position:absolute;
	inset:0;
	z-index:-3;
	overflow:hidden;
}

.bt-hero-sky{
	position:absolute;
	inset:0;
	background:
		linear-gradient(
			90deg,
			rgba(3,18,39,.96) 0%,
			rgba(5,31,61,.82) 45%,
			rgba(15,76,117,.48) 100%
		);
}

.bt-hero-glow{
	position:absolute;
	border-radius:50%;
	filter:blur(80px);
	pointer-events:none;
}

.bt-hero-glow-one{
	width:420px;
	height:420px;
	left:-180px;
	top:-120px;
	background:rgba(245,158,11,.24);
}

.bt-hero-glow-two{
	width:500px;
	height:500px;
	right:-200px;
	bottom:-180px;
	background:rgba(25,118,210,.28);
}


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

.bt-hero-container{
	position:relative;
	z-index:5;
	width:min(1240px,calc(100% - 40px));
	margin:0 auto;
	min-height:700px;
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(500px,1fr);
	align-items:center;
	gap:50px;
	padding:90px 0 120px;
}


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

.bt-hero-content{
	max-width:680px;
}

.bt-hero-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:9px;
	padding:9px 15px;
	margin-bottom:22px;
	border:1px solid rgba(255,255,255,.20);
	border-radius:999px;
	background:rgba(255,255,255,.08);
	backdrop-filter:blur(10px);
	font-size:13px;
	font-weight:800;
}

.bt-hero-eyebrow-dot{
	width:8px;
	height:8px;
	border-radius:50%;
	background:#fdb813;
	box-shadow:0 0 0 5px rgba(253,184,19,.13);
}

.bt-hero-title{
	margin:0;
	color:#fff;
	font-size:clamp(42px,5vw,68px);
	line-height:1.02;
	letter-spacing:-.045em;
	font-weight:850;
}

.bt-hero-title-highlight{
	display:block;
	margin-top:9px;
	color:#fdb813;
}

.bt-hero-description{
	max-width:640px;
	margin:25px 0 0;
	color:rgba(255,255,255,.86);
	font-size:18px;
	line-height:1.7;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.bt-hero-actions{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:30px;
}

.bt-hero-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:52px;
	padding:13px 21px;
	border-radius:13px;
	text-decoration:none;
	font-size:14px;
	font-weight:800;
	transition:
		transform .2s ease,
		box-shadow .2s ease,
		background .2s ease;
}

.bt-hero-btn:hover{
	transform:translateY(-2px);
}

.bt-hero-btn-primary{
	background:#fdb813;
	border:1px solid #fdb813;
	color:#111827;
	box-shadow:0 14px 32px rgba(253,184,19,.25);
}

.bt-hero-btn-primary:hover{
	background:#f59e0b;
	color:#111827;
}

.bt-hero-btn-dark{
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.35);
	color:#fff;
	backdrop-filter:blur(10px);
}

.bt-hero-btn-dark:hover{
	background:rgba(255,255,255,.15);
	color:#fff;
}

.bt-hero-btn-whatsapp{
	background:#16a34a;
	border:1px solid #16a34a;
	color:#fff;
	box-shadow:0 12px 30px rgba(22,163,74,.22);
}

.bt-hero-btn-whatsapp:hover{
	background:#15803d;
	color:#fff;
}


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

.bt-hero-highlights{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:9px;
	margin-top:30px;
}

.bt-hero-highlight{
	padding:12px 10px;
	border:1px solid rgba(255,255,255,.14);
	border-radius:13px;
	background:rgba(255,255,255,.06);
	backdrop-filter:blur(10px);
}

.bt-hero-highlight strong{
	display:block;
	color:#fdb813;
	font-size:14px;
	line-height:1.2;
}

.bt-hero-highlight span{
	display:block;
	margin-top:5px;
	color:rgba(255,255,255,.72);
	font-size:10px;
	line-height:1.3;
}


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

.bt-hero-visual{
	position:relative;
	min-height:520px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.bt-road-scene{
	position:relative;
	width:100%;
	height:520px;
}

.bt-road-horizon{
	position:absolute;
	left:5%;
	right:5%;
	top:37%;
	height:1px;
}

.bt-horizon-line{
	width:100%;
	height:1px;
	background:rgba(255,255,255,.20);
}


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

.bt-vehicle-stage{
	position:absolute;
	left:0;
	right:0;
	top:18%;
	height:290px;
	z-index:5;
}

.bt-vehicle-shadow{
	position:absolute;
	left:18%;
	right:18%;
	bottom:18px;
	height:35px;
	border-radius:50%;
	background:rgba(0,0,0,.45);
	filter:blur(14px);
}

.bt-vehicle-slider{
	position:absolute;
	inset:0;
}

.bt-vehicle-slide{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	transform:translateX(35px) scale(.96);
	transition:
		opacity .55s ease,
		transform .55s ease;
	pointer-events:none;
}

.bt-vehicle-slide.is-active{
	opacity:1;
	transform:translateX(0) scale(1);
}

.bt-vehicle-body{
	position:relative;
	width:390px;
	height:145px;
	border-radius:75px 105px 28px 28px;
	background:linear-gradient(180deg,#ffffff 0%,#e7edf2 100%);
	border:2px solid rgba(0,0,0,.10);
	box-shadow:
		0 22px 30px rgba(0,0,0,.25),
		inset 0 -12px 18px rgba(0,0,0,.08);
}

.bt-vehicle-dzire{
	width:410px;
	height:135px;
	border-radius:70px 90px 25px 25px;
}

.bt-vehicle-ertiga{
	width:420px;
	height:155px;
	border-radius:70px 100px 28px 28px;
}

.bt-vehicle-innova{
	width:440px;
	height:165px;
	border-radius:72px 105px 30px 30px;
}

.bt-vehicle-traveller{
	width:460px;
	height:190px;
	border-radius:45px 70px 25px 25px;
}


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

.bt-vehicle-window{
	position:absolute;
	top:18px;
	height:55px;
	background:linear-gradient(135deg,#18344f,#081b30);
	border:2px solid rgba(255,255,255,.35);
}

.bt-vehicle-window-front{
	left:42%;
	width:23%;
	clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);
}

.bt-vehicle-window-rear{
	left:18%;
	width:22%;
	clip-path:polygon(0 0,85% 0,100% 100%,15% 100%);
}


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

.bt-vehicle-door{
	position:absolute;
	left:39%;
	top:77px;
	width:2px;
	height:52px;
	background:rgba(0,0,0,.16);
}


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

.bt-vehicle-stripe{
	position:absolute;
	left:0;
	right:0;
	top:73px;
	height:17px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fdb813;
	color:#111827;
	font-size:8px;
	font-weight:900;
	letter-spacing:1px;
}

.bt-vehicle-stripe span{
	transform:translateY(-1px);
}


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

.bt-vehicle-wheel{
	position:absolute;
	bottom:-25px;
	width:55px;
	height:55px;
	border-radius:50%;
	background:#101820;
	border:6px solid #263544;
	box-shadow:inset 0 0 0 5px #050b10;
}

.bt-vehicle-wheel span{
	position:absolute;
	inset:12px;
	border-radius:50%;
	background:#a9b7c4;
	border:3px solid #506070;
}

.bt-vehicle-wheel-front{
	right:48px;
}

.bt-vehicle-wheel-rear{
	left:48px;
}


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

.bt-vehicle-light{
	position:absolute;
	top:43%;
	right:9%;
	width:15px;
	height:28px;
	border-radius:7px;
	background:#fff4c7;
	box-shadow:0 0 20px rgba(255,245,190,.7);
	z-index:10;
}


/* =========================================================
   INFO CARD
   ========================================================= */

.bt-vehicle-info-card{
	position:absolute;
	top:14%;
	right:0;
	z-index:10;
	min-width:155px;
	padding:14px 16px;
	border:1px solid rgba(255,255,255,.20);
	border-radius:15px;
	background:rgba(5,26,49,.68);
	backdrop-filter:blur(13px);
	box-shadow:0 18px 35px rgba(0,0,0,.20);
}

.bt-vehicle-info-label{
	display:block;
	color:rgba(255,255,255,.58);
	font-size:9px;
	text-transform:uppercase;
	font-weight:800;
	letter-spacing:.08em;
}

.bt-current-vehicle{
	display:block;
	margin-top:5px;
	color:#fff;
	font-size:16px;
	line-height:1.2;
}

.bt-current-vehicle-type{
	display:block;
	margin-top:3px;
	color:#fdb813;
	font-size:10px;
	font-weight:700;
}


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

.bt-road{
	position:absolute;
	left:-10%;
	right:-10%;
	bottom:0;
	height:145px;
	transform:perspective(180px) rotateX(10deg);
	background:linear-gradient(180deg,#172536,#07111d);
	border-top:1px solid rgba(255,255,255,.14);
}

.bt-road-edge{
	position:absolute;
	left:0;
	right:0;
	height:3px;
	background:#fdb813;
	opacity:.65;
}

.bt-road-edge-top{
	top:15px;
}

.bt-road-edge-bottom{
	bottom:10px;
	opacity:.2;
}

.bt-road-lane{
	position:absolute;
	left:50%;
	top:38px;
	transform:translateX(-50%);
	display:flex;
	gap:70px;
}

.bt-road-lane span{
	width:70px;
	height:5px;
	border-radius:99px;
	background:rgba(255,255,255,.45);
}


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

.bt-vehicle-indicators{
	position:absolute;
	left:50%;
	bottom:40px;
	z-index:20;
	display:flex;
	gap:7px;
	transform:translateX(-50%);
}

.bt-vehicle-indicator{
	width:8px;
	height:8px;
	padding:0;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.40);
	cursor:pointer;
	transition:all .2s ease;
}

.bt-vehicle-indicator.is-active{
	width:26px;
	border-radius:999px;
	background:#fdb813;
}


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

.bt-road-motion{
	position:absolute;
	left:15%;
	right:15%;
	bottom:25px;
	display:flex;
	justify-content:space-between;
	opacity:.30;
}

.bt-road-motion span{
	width:50px;
	height:3px;
	border-radius:99px;
	background:#fff;
	animation:btRoadMove 1.8s linear infinite;
}

.bt-road-motion span:nth-child(2){
	animation-delay:.3s;
}

.bt-road-motion span:nth-child(3){
	animation-delay:.6s;
}

.bt-road-motion span:nth-child(4){
	animation-delay:.9s;
}

@keyframes btRoadMove{
	0%{transform:translateX(-25px);opacity:.1}
	50%{opacity:.7}
	100%{transform:translateX(25px);opacity:.1}
}


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

.bt-hero-bottom-strip{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	z-index:30;
	border-top:1px solid rgba(255,255,255,.14);
	background:rgba(3,18,36,.72);
	backdrop-filter:blur(13px);
}

.bt-hero-bottom-inner{
	width:min(1240px,calc(100% - 40px));
	margin:0 auto;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:0;
}

.bt-hero-bottom-inner span{
	padding:13px 18px;
	border-right:1px solid rgba(255,255,255,.12);
	color:rgba(255,255,255,.78);
	font-size:11px;
	font-weight:700;
}

.bt-hero-bottom-inner span:last-child{
	border-right:0;
}


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

@media(max-width:1050px){

	.bt-premium-hero{
		min-height:auto;
	}

	.bt-hero-container{
		grid-template-columns:1fr;
		gap:20px;
		padding:90px 0 100px;
	}

	.bt-hero-content{
		max-width:760px;
		margin:0 auto;
		text-align:center;
	}

	.bt-hero-description{
		margin-left:auto;
		margin-right:auto;
	}

	.bt-hero-actions{
		justify-content:center;
	}

	.bt-hero-highlights{
		max-width:650px;
		margin-left:auto;
		margin-right:auto;
	}

	.bt-hero-visual{
		min-height:480px;
	}

	.bt-road-scene{
		height:480px;
	}

}


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

@media(max-width:700px){

	.bt-premium-hero{
		min-height:auto;
	}

	.bt-hero-container{
		width:calc(100% - 24px);
		padding:70px 0 90px;
	}

	.bt-hero-title{
		font-size:clamp(34px,10vw,48px);
	}

	.bt-hero-description{
		font-size:14px;
		line-height:1.6;
	}

	.bt-hero-actions{
		display:grid;
		grid-template-columns:1fr;
	}

	.bt-hero-btn{
		width:100%;
		min-height:48px;
	}

	.bt-hero-highlights{
		grid-template-columns:repeat(2,1fr);
	}

	.bt-hero-visual{
		min-height:380px;
	}

	.bt-road-scene{
		height:380px;
	}

	.bt-vehicle-stage{
		top:14%;
		height:230px;
		transform:scale(.72);
	}

	.bt-vehicle-info-card{
		top:5%;
		right:0;
		transform:scale(.85);
		transform-origin:top right;
	}

	.bt-road{
		height:110px;
	}

	.bt-road-lane{
		gap:35px;
	}

	.bt-road-lane span{
		width:45px;
	}

	.bt-hero-bottom-strip{
		position:relative;
	}

	.bt-hero-bottom-inner{
		width:100%;
		overflow:hidden;
		flex-wrap:nowrap;
		justify-content:flex-start;
	}

	.bt-hero-bottom-inner span{
		flex:0 0 auto;
		padding:11px 13px;
		font-size:9px;
	}

}

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

	.bt-vehicle-slide,
	.bt-road-motion span{
		transition:none;
		animation:none;
	}

}