/*==================================================
BAREILLY TAXI
PREMIUM HERO v6.0
==================================================*/

.bt-hero{

position:relative;

padding:110px 0 170px;

overflow:hidden;

background:
linear-gradient(
90deg,
rgba(7,33,92,.95),
rgba(17,69,155,.82)
),

url("../images/hero-bg.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}

/* Dark Overlay */

.bt-hero::before{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.20);

z-index:1;

}

/* Container */

.bt-container{

width:92%;

max-width:1320px;

margin:auto;

position:relative;

z-index:2;

}

/* Grid */

.bt-hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}

/* Left */

.bt-hero-left{

color:#fff;

}

/* Badge */

.bt-top-badge{

display:inline-block;

padding:10px 22px;

background:#ffc107;

color:#111;

font-size:15px;

font-weight:700;

border-radius:6px;

margin-bottom:25px;

}

/* Title */

.bt-hero-title{

font-size:62px;

line-height:1.15;

font-weight:800;

margin:0;

color:#fff;

}

/* Subtitle */

.bt-hero-subtitle{

margin-top:12px;

font-size:52px;

font-weight:800;

color:#FFC107;

}

/* Description */

.bt-hero-description{

margin-top:25px;

font-size:23px;

line-height:38px;

color:#e7eefb;

max-width:620px;

}

/* Buttons */

.bt-hero-buttons{

display:flex;

gap:18px;

margin-top:40px;

flex-wrap:wrap;

}

.bt-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:17px 34px;

border-radius:8px;

font-size:17px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.bt-primary{

background:#FFC107;

color:#111;

}

.bt-primary:hover{

transform:translateY(-3px);

}

.bt-secondary{

background:#0f62fe;

color:#fff;

}

.bt-secondary:hover{

transform:translateY(-3px);

}

/* Features */

.bt-features{

display:flex;

gap:40px;

margin-top:55px;

flex-wrap:wrap;

}

.bt-feature{

display:flex;

align-items:center;

gap:15px;

}

.bt-icon{

width:60px;

height:60px;

border-radius:50%;

background:#ffffff18;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

}

.bt-feature h4{

margin:0;

font-size:20px;

color:#fff;

}

.bt-feature p{

margin:5px 0 0;

font-size:15px;

color:#d8e5ff;

}

/* Right */

.bt-hero-right{

position:relative;

}

/* Car */

.bt-car-image{

text-align:center;

}

.bt-car-image img{

width:100%;

max-width:760px;

display:block;

margin:auto;

}

/* Rating Card */

.bt-rating-card{

position:absolute;

right:0;

top:20px;

background:#fff;

padding:25px;

border-radius:18px;

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

text-align:center;

width:180px;

z-index:50;

}

.bt-google{

font-size:18px;

font-weight:700;

}

.bt-rating-number{

font-size:44px;

font-weight:800;

margin-top:8px;

color:#111;

}

.bt-stars{

color:#FFC107;

font-size:24px;

margin-top:5px;

}

.bt-rating-card p{

margin-top:10px;

font-weight:600;

color:#666;

}/*==================================================
PREMIUM HERO EFFECTS
==================================================*/

/* Car Animation */

.bt-car-image img{

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

transition:.4s;

}

.bt-car-image img:hover{

transform:scale(1.03);

}

@keyframes btCarFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/* Rating Card */

.bt-rating-card{

animation:btRating 1.2s ease;

}

@keyframes btRating{

from{

opacity:0;

transform:translateY(-40px);

}

to{

opacity:1;

transform:none;

}

}

/* Left Content */

.bt-hero-left{

animation:btLeft .8s ease;

}

@keyframes btLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:none;

}

}

/* Right */

.bt-hero-right{

animation:btRight .9s ease;

}

@keyframes btRight{

from{

opacity:0;

transform:translateX(70px);

}

to{

opacity:1;

transform:none;

}

}

/* Buttons */

.bt-btn:hover{

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

}

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

@media(max-width:991px){

.bt-hero{

padding:90px 0 150px;

}

.bt-hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.bt-hero-title{

font-size:46px;

}

.bt-hero-subtitle{

font-size:38px;

}

.bt-hero-description{

font-size:19px;

margin:auto;

}

.bt-hero-buttons{

justify-content:center;

}

.bt-features{

justify-content:center;

}

.bt-rating-card{

position:relative;

right:auto;

top:auto;

margin:0 auto 30px;

}

.bt-car-image img{

max-width:600px;

}

}

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

@media(max-width:768px){

.bt-hero{

padding:70px 0 120px;

}

.bt-top-badge{

font-size:13px;

padding:8px 16px;

}

.bt-hero-title{

font-size:34px;

}

.bt-hero-subtitle{

font-size:28px;

}

.bt-hero-description{

font-size:17px;

line-height:30px;

}

.bt-hero-buttons{

flex-direction:column;

}

.bt-btn{

width:100%;

}

.bt-features{

flex-direction:column;

gap:20px;

}

.bt-feature{

justify-content:center;

}

.bt-rating-card{

width:100%;

max-width:280px;

}

.bt-car-image img{

max-width:100%;

}

}