/* ==========================================
   HITANSH CAB SERVICE
   STYLE.CSS V9.0 ULTRA
   PART 1
========================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Reset */

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

:root{

--primary:#FFC107;
--secondary:#111111;
--white:#ffffff;
--light:#f8f9fa;
--gray:#666666;
--shadow:0 15px 40px rgba(0,0,0,.12);
--radius:18px;

}

body{

font-family:'Poppins',sans-serif;
background:var(--light);
color:#222;
overflow-x:hidden;
line-height:1.7;

}

.container{

width:92%;
max-width:1280px;
margin:auto;

}

a{

text-decoration:none;

}

img{

max-width:100%;
display:block;

}

/* ==========================
Loader
========================== */

#loader{

position:fixed;
inset:0;
background:#111;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:99999;
color:#fff;

}

.loader-car{

width:90px;
height:90px;
border-radius:50%;
background:var(--primary);
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
color:#111;
animation:loaderSpin 1.5s infinite;

}

@keyframes loaderSpin{

0%{transform:rotate(0deg);}
50%{transform:rotate(180deg);}
100%{transform:rotate(360deg);}

}

#loader p{

margin-top:20px;
font-size:18px;
font-weight:600;

}

/* ==========================
Header
========================== */

.header{

position:fixed;
top:0;
left:0;
width:100%;
background:rgba(17,17,17,.92);
backdrop-filter:blur(12px);
z-index:1000;
transition:.35s;

}

.navbar{

display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;

}

.logo{

display:flex;
align-items:center;
gap:12px;
font-size:28px;
font-weight:700;
color:var(--primary);

}

.logo i{

font-size:34px;

}

#navMenu{

display:flex;
list-style:none;
gap:30px;

}

#navMenu li a{

color:#fff;
font-weight:500;
transition:.3s;

}

#navMenu li a:hover{

color:var(--primary);

}

.menu-btn{

display:none;
font-size:30px;
color:#fff;
cursor:pointer;

}

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

.hero{

height:100vh;
background:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url("images/hero-bg.jpg") center/cover no-repeat;
display:flex;
align-items:center;
position:relative;
color:#fff;

}

.overlay{

position:absolute;
inset:0;
background:rgba(0,0,0,.25);

}

.hero-content{

position:relative;
z-index:2;
text-align:center;

}

.hero h1{

font-size:64px;
font-weight:800;
margin-bottom:18px;

}

.hero p{

font-size:22px;
margin-bottom:35px;
opacity:.95;

}

.hero-search{

display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
margin-bottom:30px;

}

.hero-search input{

width:280px;
padding:16px;
border:none;
border-radius:50px;
font-size:16px;
outline:none;

}

.hero-search button{

padding:16px 30px;
border:none;
border-radius:50px;
background:var(--primary);
font-size:16px;
font-weight:700;
cursor:pointer;
transition:.3s;

}

.hero-search button:hover{

transform:translateY(-3px);

}

.hero-buttons{

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;

}

.btn{

padding:16px 32px;
border-radius:50px;
font-weight:700;
transition:.3s;

}

.primary{

background:var(--primary);
color:#111;

}

.primary:hover{

transform:translateY(-4px);

}

.whatsapp{

background:#25D366;
color:#fff;

}

.whatsapp:hover{

transform:translateY(-4px);

}

/* ==========================
Quick Services
========================== */

.quick-services{

padding:80px 0;
background:#fff;

}

.quick-services .container{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}

.service-box{

background:#fff;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:var(--shadow);
transition:.35s;

}

.service-box:hover{

transform:translateY(-10px);

}

.service-box i{

font-size:48px;
color:var(--primary);
margin-bottom:18px;

}

.service-box h3{

font-size:22px;

}
/* ==========================================
   STYLE.CSS V9.0 ULTRA
   PART 2
   BOOKING + FARE CALCULATOR
========================================== */

/* Section */

.booking-section,
.fare-section{

padding:100px 0;
background:#f8f9fa;

}

.section-title{

font-size:42px;
font-weight:700;
text-align:center;
margin-bottom:50px;
color:#111;

}

/* Booking Card */

.booking-card{

display:grid;
grid-template-columns:2fr 1fr;
gap:35px;

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

backdrop-filter:blur(20px);

border-radius:25px;

padding:40px;

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

}

.booking-left h2{

font-size:34px;
margin-bottom:10px;

}

.booking-left p{

color:#666;
margin-bottom:25px;

}

/* Form */

#bookingForm{

display:flex;
flex-direction:column;
gap:18px;

}

#bookingForm input,
#bookingForm select,
#bookingForm textarea{

width:100%;
padding:16px;

border:2px solid #ececec;

border-radius:14px;

font-size:16px;

font-family:Poppins,sans-serif;

outline:none;

transition:.3s;

}

#bookingForm input:focus,
#bookingForm select:focus,
#bookingForm textarea:focus{

border-color:#FFC107;

box-shadow:0 0 0 4px rgba(255,193,7,.15);

}

.row{

display:grid;
grid-template-columns:1fr 1fr;
gap:15px;

}

.book-btn{

background:#25D366;

color:#fff;

border:none;

padding:18px;

border-radius:14px;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.book-btn:hover{

transform:translateY(-3px);

box-shadow:0 15px 30px rgba(37,211,102,.35);

}

/* Right Card */

.booking-right{

background:#111;

color:#fff;

padding:35px;

border-radius:20px;

}

.booking-right h3{

color:#FFC107;

margin-bottom:20px;

}

.booking-right ul{

list-style:none;

}

.booking-right li{

padding:10px 0;

border-bottom:1px solid rgba(255,255,255,.08);

}

/* Fare Card */

.fare-card{

max-width:700px;

margin:auto;

background:#fff;

padding:35px;

border-radius:25px;

box-shadow:0 20px 45px rgba(0,0,0,.10);

display:flex;

flex-direction:column;

gap:18px;

}

.fare-card input,
.fare-card select{

padding:16px;

border:2px solid #eee;

border-radius:14px;

font-size:16px;

outline:none;

transition:.3s;

}

.fare-card input:focus,
.fare-card select:focus{

border-color:#FFC107;

}

.fare-btn{

padding:18px;

background:#FFC107;

border:none;

border-radius:14px;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.fare-btn:hover{

background:#ffb300;

transform:translateY(-2px);

}

.fare-result{

background:#111;

color:#fff;

padding:30px;

border-radius:18px;

text-align:center;

}

.fare-result h3{

margin-bottom:10px;

color:#FFC107;

}

.fare-result h1{

font-size:48px;

margin-bottom:10px;

}

.fare-result p{

color:#ccc;

font-size:14px;

}

/* Search Suggestions */

#searchResults{

display:none;

background:#fff;

border-radius:14px;

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

overflow:hidden;

max-height:260px;

overflow-y:auto;

}

.search-item{

padding:14px 18px;

cursor:pointer;

transition:.3s;

border-bottom:1px solid #eee;

}

.search-item:hover{

background:#FFC107;

color:#111;

font-weight:600;

}
/* ==========================================
   STYLE.CSS V9.0 ULTRA
   PART 3
   FLEET + COUNTER + WHY + REVIEWS
========================================== */

/* Fleet Section */

.fleet-section{
padding:100px 0;
background:#ffffff;
}

.fleet-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;
}

.fleet-card{
position:relative;
background:#fff;
border-radius:22px;
padding:35px;
text-align:center;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
overflow:hidden;
}

.fleet-card:hover{
transform:translateY(-12px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.fleet-card i{
font-size:60px;
color:#FFC107;
margin-bottom:20px;
}

.fleet-card h3{
font-size:28px;
margin-bottom:15px;
}

.fleet-card p{
color:#666;
margin:8px 0;
}

.fleet-btn{
margin-top:20px;
padding:14px 28px;
background:#111;
color:#fff;
border:none;
border-radius:40px;
cursor:pointer;
font-weight:600;
transition:.3s;
}

.fleet-btn:hover{
background:#FFC107;
color:#111;
}

.premium{
border:3px solid #FFC107;
}

.popular-tag{
position:absolute;
top:15px;
right:-40px;
background:#FFC107;
color:#111;
padding:8px 45px;
transform:rotate(45deg);
font-size:13px;
font-weight:700;
}

/* Counter */

.counter-section{
padding:90px 0;
background:#111;
color:#fff;
}

.counter-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
}

.counter-box{
background:#1c1c1c;
padding:35px;
text-align:center;
border-radius:18px;
transition:.3s;
}

.counter-box:hover{
background:#FFC107;
color:#111;
transform:translateY(-8px);
}

.counter-box h2{
font-size:44px;
margin-bottom:10px;
}

.counter-box p{
font-size:18px;
}

/* Why Choose Us */

.why-section{
padding:100px 0;
background:#f7f7f7;
}

.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.why-card{
background:#fff;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
}

.why-card:hover{
transform:translateY(-10px);
}

.why-card i{
font-size:52px;
color:#FFC107;
margin-bottom:18px;
}

.why-card h3{
margin-bottom:12px;
font-size:24px;
}

.why-card p{
color:#666;
}

/* Reviews */

.reviews-section{
padding:100px 0;
background:#fff;
}

.reviews-slider{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
margin-top:45px;
}

.review-card{
background:#f9f9f9;
padding:35px;
border-radius:20px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
transition:.3s;
}

.review-card:hover{
transform:translateY(-10px);
}

.review-card p{
margin:20px 0;
color:#555;
line-height:1.8;
}

.review-card h4{
color:#111;
font-size:20px;
}

.review-card::before{
content:"★★★★★";
display:block;
font-size:22px;
color:#FFC107;
margin-bottom:12px;
}
/* ==========================================
   STYLE.CSS V9.0 ULTRA
   PART 4
   GALLERY + MAP + FAQ + CONTACT
========================================== */

/* Gallery */

.gallery-section{
padding:100px 0;
background:#f8f9fa;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
margin-top:45px;
}

.gallery-grid img{
width:100%;
height:240px;
object-fit:cover;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.10);
transition:.35s;
cursor:pointer;
}

.gallery-grid img:hover{
transform:scale(1.05);
box-shadow:0 25px 45px rgba(0,0,0,.18);
}

/* Map */

.map-section{
padding:100px 0;
background:#ffffff;
}

.map-section iframe{
width:100%;
height:450px;
border:none;
border-radius:22px;
box-shadow:0 15px 40px rgba(0,0,0,.12);
}

/* FAQ */

.faq-section{
padding:100px 0;
background:#f8f9fa;
}

.faq-item{
background:#fff;
padding:25px;
margin-bottom:20px;
border-radius:18px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
transition:.3s;
}

.faq-item:hover{
transform:translateY(-6px);
}

.faq-item h3{
font-size:22px;
margin-bottom:12px;
color:#111;
}

.faq-item p{
color:#666;
line-height:1.8;
}

/* Contact */

.contact-section{
padding:100px 0;
background:#fff;
}

.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
margin-top:45px;
}

.contact-card{
background:#f8f9fa;
padding:35px;
border-radius:22px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
}

.contact-card:hover{
transform:translateY(-8px);
}

.contact-card h3{
font-size:28px;
margin-bottom:20px;
color:#111;
}

.contact-card p{
display:flex;
align-items:center;
gap:12px;
margin:15px 0;
font-size:17px;
color:#555;
}

.contact-card i{
font-size:22px;
color:#FFC107;
min-width:28px;
}

/* Floating WhatsApp */

.floating-whatsapp{
position:fixed;
right:20px;
bottom:25px;
width:65px;
height:65px;
background:#25D366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:34px;
text-decoration:none;
box-shadow:0 15px 30px rgba(37,211,102,.35);
z-index:999;
transition:.3s;
}

.floating-whatsapp:hover{
transform:scale(1.1);
}

/* Scroll Top */

#topBtn{
position:fixed;
right:20px;
bottom:105px;
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#FFC107;
color:#111;
font-size:22px;
cursor:pointer;
display:none;
justify-content:center;
align-items:center;
box-shadow:0 15px 30px rgba(0,0,0,.20);
transition:.3s;
z-index:998;
}

#topBtn:hover{
transform:translateY(-5px);
}
/* ==========================================
   STYLE.CSS V9.0 ULTRA
   PART 5
   FOOTER + MOBILE NAVIGATION
========================================== */

/* Footer */

.footer{
background:#111;
color:#fff;
padding:80px 0 30px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:35px;
margin-bottom:40px;
}

.footer-box h3{
font-size:24px;
margin-bottom:20px;
color:#FFC107;
}

.footer-box p{
color:#ccc;
line-height:1.8;
margin-bottom:12px;
}

.footer-box ul{
list-style:none;
}

.footer-box ul li{
margin-bottom:12px;
}

.footer-box ul li a{
color:#ccc;
text-decoration:none;
transition:.3s;
}

.footer-box ul li a:hover{
color:#FFC107;
padding-left:8px;
}

.footer hr{
border:none;
height:1px;
background:rgba(255,255,255,.1);
margin:30px 0;
}

/* Social Icons */

.social-links{
display:flex;
justify-content:center;
gap:18px;
margin-bottom:25px;
}

.social-links a{
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#222;
color:#fff;
font-size:20px;
transition:.3s;
}

.social-links a:hover{
background:#FFC107;
color:#111;
transform:translateY(-6px);
}

/* Copyright */

.copyright{
text-align:center;
font-size:15px;
color:#bbb;
}

/* Mobile Bottom Navigation */

.mobile-nav{
position:fixed;
left:0;
bottom:0;
width:100%;
background:#111;
display:flex;
justify-content:space-around;
align-items:center;
padding:12px 0;
z-index:999;
box-shadow:0 -5px 20px rgba(0,0,0,.20);
}

.mobile-nav a{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
text-decoration:none;
color:#fff;
font-size:13px;
transition:.3s;
}

.mobile-nav a i{
font-size:22px;
}

.mobile-nav a:hover{
color:#FFC107;
}

/* Desktop */

@media(min-width:769px){

.mobile-nav{
display:none;
}

}

/* Ripple Animation */

.btn,
.book-btn,
.fare-btn,
.fleet-btn{
position:relative;
overflow:hidden;
}

.ripple{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,.45);
transform:scale(0);
animation:rippleEffect .6s linear;
pointer-events:none;
}

@keyframes rippleEffect{

to{
transform:scale(4);
opacity:0;
}

}

/* Fade Animation */

.fade-up{
opacity:0;
transform:translateY(30px);
transition:.7s;
}

.fade-up.show{
opacity:1;
transform:translateY(0);
}

/* Smooth Hover */

.service-box,
.fleet-card,
.review-card,
.why-card,
.contact-card,
.faq-item,
.gallery-grid img{
transition:all .35s ease;
}
/* ==========================================
   STYLE.CSS V9.0 ULTRA
   PART 6
   RESPONSIVE + FINAL
========================================== */

/* Tablet */

@media (max-width:992px){

.hero h1{
font-size:48px;
}

.hero p{
font-size:18px;
}

.booking-card{
grid-template-columns:1fr;
}

.quick-services .container{
grid-template-columns:repeat(2,1fr);
}

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

}

/* Mobile */

@media (max-width:768px){

.menu-btn{
display:block;
}

#navMenu{
position:absolute;
top:100%;
left:0;
width:100%;
background:#111;
display:none;
flex-direction:column;
padding:20px 0;
text-align:center;
}

#navMenu.active{
display:flex;
}

.hero{
padding:120px 0 80px;
height:auto;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:16px;
}

.hero-search{
flex-direction:column;
}

.hero-search input,
.hero-search button{
width:100%;
}

.quick-services .container,
.fleet-grid,
.counter-grid,
.why-grid,
.reviews-slider,
.gallery-grid,
.contact-grid{
grid-template-columns:1fr;
}

.row{
grid-template-columns:1fr;
}

.section-title{
font-size:30px;
}

.booking-card,
.fare-card,
.contact-card,
.review-card,
.fleet-card,
.why-card{
padding:25px;
}

.footer-grid{
grid-template-columns:1fr;
text-align:center;
}

.footer-box{
margin-bottom:25px;
}

.social-links{
justify-content:center;
}

.floating-whatsapp{
right:15px;
bottom:90px;
}

#topBtn{
right:15px;
bottom:165px;
}

}

/* Small Mobile */

@media (max-width:480px){

.container{
width:95%;
}

.hero h1{
font-size:28px;
}

.hero p{
font-size:15px;
}

.logo{
font-size:22px;
}

.logo i{
font-size:28px;
}

.section-title{
font-size:26px;
}

.fare-result h1{
font-size:34px;
}

.book-btn,
.fare-btn,
.hero-search button{
font-size:16px;
padding:15px;
}

}

/* Hide Loader */

body.loaded #loader{
opacity:0;
visibility:hidden;
transition:.5s;
}

/* Selection */

::selection{
background:#FFC107;
color:#111;
}

/* Scrollbar */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
background:#FFC107;
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:#e0a800;
}

/* Images */

img{
user-select:none;
-webkit-user-drag:none;
}

/* Buttons */

button{
font-family:'Poppins',sans-serif;
}

/* End */

html{
scroll-padding-top:90px;
}