/*==================================================
 Bareilly Taxi Premium Theme
 Hero CSS
 Version : 12.0
 File : assets/css/hero.css
==================================================*/

/*==========================================
 Hero
==========================================*/

.bt-hero{

	position:relative;

	min-height:100vh;

	display:flex;

	align-items:center;

	overflow:hidden;

	background:#081B33;

	padding:170px 0 100px;

}

/*==========================================
 Background
==========================================*/

.bt-hero-bg{

	position:absolute;

	inset:0;

	z-index:1;

}

.bt-hero-bg img{

	width:100%;

	height:100%;

	object-fit:cover;

	object-position:center;

}

.bt-hero-bg::before{

	content:"";

	position:absolute;

	inset:0;

	background:

	linear-gradient(

		90deg,

		rgba(8,27,51,.88) 0%,

		rgba(8,27,51,.72) 35%,

		rgba(8,27,51,.30) 100%

	);

	z-index:2;

}

/*==========================================
 Animated Shapes
==========================================*/

.bt-hero-shape{

	position:absolute;

	border-radius:50%;

	filter:blur(80px);

	opacity:.20;

	z-index:2;

	animation:btFloat 8s ease-in-out infinite;

}

.bt-shape-1{

	width:320px;

	height:320px;

	top:-120px;

	left:-100px;

	background:#FDB813;

}

.bt-shape-2{

	width:260px;

	height:260px;

	right:-80px;

	bottom:80px;

	background:#0F4C81;

	animation-delay:2s;

}

@keyframes btFloat{

	0%{

		transform:translateY(0);

	}

	50%{

		transform:translateY(-25px);

	}

	100%{

		transform:translateY(0);

	}

}

/*==========================================
 Hero Layout
==========================================*/

.bt-hero .bt-container{

	position:relative;

	z-index:5;

	display:grid;

	grid-template-columns:1.1fr .9fr;

	align-items:center;

	gap:70px;

}

/*==========================================
 Hero Content
==========================================*/

.bt-hero-content{

	color:#ffffff;

}

.bt-hero-content h1{

	color:#ffffff;

	font-size:clamp(46px,5vw,64px);

	line-height:1.08;

	margin-bottom:28px;

	max-width:760px;

}

.bt-hero-content p{

	color:rgba(255,255,255,.88);

	font-size:19px;

	max-width:650px;

	margin-bottom:35px;

}

/*==========================================
 Hero Badge
==========================================*/

.bt-hero-badge{

	display:inline-flex;

	align-items:center;

	gap:10px;

	padding:12px 22px;

	margin-bottom:28px;

	border-radius:100px;

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

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

	backdrop-filter:blur(12px);

	color:#ffffff;

	font-weight:700;

	font-size:14px;

}

.bt-hero-badge i{

	color:#FDB813;

}

/*==========================================
 Hero Buttons
==========================================*/

.bt-hero-buttons{

	display:flex;

	flex-wrap:wrap;

	gap:18px;

	margin-top:40px;

}

/*==========================================
 Hero Features
==========================================*/

.bt-hero-features{

	display:flex;

	flex-wrap:wrap;

	gap:16px;

	margin-top:45px;

}

.bt-hero-feature{

	display:flex;

	align-items:center;

	gap:10px;

	padding:14px 18px;

	border-radius:16px;

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

	backdrop-filter:blur(12px);

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

	color:#ffffff;

	font-size:14px;

	font-weight:600;

}

.bt-hero-feature i{

	color:#FDB813;

}

/*==========================================
 Hero Image
==========================================*/

.bt-hero-image{

	position:relative;

	display:flex;

	align-items:center;

	justify-content:center;

}

.bt-hero-image img{

	width:100%;

	max-width:720px;

	animation:btCar 5s ease-in-out infinite;

	filter:drop-shadow(0 40px 70px rgba(0,0,0,.35));

}

@keyframes btCar{

	0%{

		transform:translateY(0);

	}

	50%{

		transform:translateY(-12px);

	}

	100%{

		transform:translateY(0);

	}

}/*==========================================
 Premium Booking Card
==========================================*/

.bt-booking-card{

	position:relative;

	z-index:10;

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

	backdrop-filter:blur(25px);

	border-radius:28px;

	padding:35px;

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

	box-shadow:0 35px 90px rgba(15,23,42,.18);

}

.bt-booking-card h3{

	font-size:28px;

	margin-bottom:10px;

	color:var(--bt-heading);

}

.bt-booking-card p{

	margin-bottom:28px;

	font-size:15px;

	color:var(--bt-light);

}

/*==========================================
 Booking Form
==========================================*/

.bt-booking-form{

	display:grid;

	gap:18px;

}

.bt-form-group{

	display:flex;

	flex-direction:column;

}

.bt-form-group label{

	font-size:14px;

	font-weight:700;

	margin-bottom:8px;

	color:var(--bt-heading);

}

.bt-form-group input,

.bt-form-group select{

	width:100%;

	height:56px;

	padding:0 18px;

	border:1px solid var(--bt-border);

	border-radius:14px;

	background:#fff;

	font-size:15px;

	outline:none;

	transition:.30s;

}

.bt-form-group input:focus,

.bt-form-group select:focus{

	border-color:var(--bt-primary);

	box-shadow:0 0 0 4px rgba(15,76,129,.08);

}

.bt-form-group textarea{

	width:100%;

	min-height:120px;

	padding:16px 18px;

	border:1px solid var(--bt-border);

	border-radius:14px;

	resize:vertical;

	outline:none;

}

.bt-booking-submit{

	margin-top:10px;

}

/*==========================================
 Google Rating Card
==========================================*/

.bt-google-rating{

	position:absolute;

	top:30px;

	right:-20px;

	background:#ffffff;

	border-radius:18px;

	padding:18px 22px;

	box-shadow:0 25px 60px rgba(15,23,42,.12);

	animation:btPulse 3s infinite;

}

.bt-google-rating h4{

	font-size:30px;

	margin-bottom:5px;

	color:var(--bt-primary);

}

.bt-google-rating span{

	display:block;

	font-size:14px;

	font-weight:700;

	color:#64748B;

}

.bt-google-rating .stars{

	color:#FDB813;

	font-size:18px;

	margin-top:8px;

}

@keyframes btPulse{

	0%,100%{

		transform:translateY(0);

	}

	50%{

		transform:translateY(-8px);

	}

}

/*==========================================
 Floating Statistics
==========================================*/

.bt-hero-stats{

	display:flex;

	gap:20px;

	margin-top:50px;

	flex-wrap:wrap;

}

.bt-stat{

	min-width:140px;

	padding:20px;

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

	backdrop-filter:blur(12px);

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

	border-radius:18px;

	text-align:center;

}

.bt-stat strong{

	display:block;

	font-size:30px;

	font-weight:800;

	color:#FDB813;

	margin-bottom:8px;

}

.bt-stat span{

	color:#ffffff;

	font-size:14px;

}

/*==========================================
 Scroll Indicator
==========================================*/

.bt-scroll-down{

	position:absolute;

	left:50%;

	bottom:30px;

	transform:translateX(-50%);

	z-index:20;

	display:flex;

	flex-direction:column;

	align-items:center;

	color:#ffffff;

	font-size:13px;

	font-weight:600;

}

.bt-scroll-mouse{

	width:28px;

	height:48px;

	border:2px solid rgba(255,255,255,.70);

	border-radius:30px;

	margin-bottom:10px;

	position:relative;

}

.bt-scroll-mouse::before{

	content:"";

	position:absolute;

	left:50%;

	top:8px;

	transform:translateX(-50%);

	width:6px;

	height:10px;

	border-radius:10px;

	background:#FDB813;

	animation:btScroll 2s infinite;

}

@keyframes btScroll{

	0%{

		opacity:0;

		top:8px;

	}

	50%{

		opacity:1;

	}

	100%{

		opacity:0;

		top:24px;

	}

}

/*==========================================
 Floating Contact Buttons
==========================================*/

.bt-floating-contact{

	position:fixed;

	right:20px;

	bottom:25px;

	display:flex;

	flex-direction:column;

	gap:15px;

	z-index:999;

}

.bt-floating-contact a{

	width:60px;

	height:60px;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:24px;

	color:#fff;

	box-shadow:0 20px 40px rgba(0,0,0,.18);

	transition:.30s;

}

.bt-floating-contact a:hover{

	transform:translateY(-5px) scale(1.08);

}

.bt-floating-whatsapp{

	background:#25D366;

}

.bt-floating-call{

	background:#0F4C81;

}

/*==========================================
 Responsive
==========================================*/

@media(max-width:992px){

	.bt-hero{

		padding:140px 0 80px;

		min-height:auto;

	}

	.bt-hero .bt-container{

		grid-template-columns:1fr;

		gap:50px;

	}

	.bt-hero-content{

		text-align:center;

	}

	.bt-hero-content p{

		margin-left:auto;

		margin-right:auto;

	}

	.bt-hero-buttons,

	.bt-hero-features,

	.bt-hero-stats{

		justify-content:center;

	}

	.bt-google-rating{

		position:relative;

		top:auto;

		right:auto;

		margin:25px auto 0;

		width:max-content;

	}

}

@media(max-width:768px){

	.bt-booking-card{

		padding:24px;

		border-radius:20px;

	}

	.bt-hero-buttons{

		flex-direction:column;

	}

	.bt-hero-feature{

		width:100%;

		justify-content:center;

	}

	.bt-stat{

		flex:1;

		min-width:130px;

	}

	.bt-floating-contact a{

		width:54px;

		height:54px;

		font-size:22px;

	}

}

@media(max-width:576px){

	.bt-hero{

		padding:120px 0 60px;

	}

	.bt-hero-content h1{

		font-size:38px;

	}

	.bt-booking-card{

		padding:20px;

	}

	.bt-scroll-down{

		display:none;

	}

}