/*==================================================
  CHEHAR CAB - PREMIUM ALL ROUTES CSS
==================================================*/

:root{
--bg:#070b12;
--bg2:#0d1420;
--card:#111827;
--card2:#182232;
--gold:#f5c518;
--gold2:#ffdd55;
--text:#f8fafc;
--muted:#94a3b8;
--green:#25d366;
}

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

body{
font-family:'Poppins',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

.container{
width:92%;
max-width:1320px;
margin:auto;
}

/*=========================
 HERO
==========================*/

.routes-hero{
position:relative;
padding:120px 0 90px;
background:
radial-gradient(circle at 80% 20%,rgba(245,197,24,.12),transparent 28%),
radial-gradient(circle at 15% 75%,rgba(124,58,237,.10),transparent 30%),
linear-gradient(135deg,#04070c,#0c1422,#13111d);
overflow:hidden;
}

.hero-overlay{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:40px 40px;
opacity:.18;
}

.routes-hero .container{
position:relative;
z-index:2;
text-align:center;
}

.hero-tag{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px;
border:1px solid rgba(245,197,24,.25);
border-radius:40px;
background:rgba(245,197,24,.08);
color:var(--gold);
font-size:13px;
font-weight:700;
letter-spacing:1px;
margin-bottom:18px;
}

.routes-hero h1{
font-size:clamp(42px,6vw,72px);
line-height:1.05;
font-weight:900;
margin-bottom:18px;
letter-spacing:-2px;
}

.routes-hero p{
max-width:760px;
margin:auto;
font-size:18px;
line-height:1.8;
color:#cbd5e1;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
margin-top:30px;
}

.btn-book,
.btn-wa{
padding:15px 28px;
border-radius:12px;
font-weight:700;
text-decoration:none;
transition:.35s;
display:inline-flex;
align-items:center;
gap:10px;
}

.btn-book{
background:linear-gradient(90deg,var(--gold),#f59e0b);
color:#111;
}

.btn-book:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(245,197,24,.3);
}

.btn-wa{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
color:#fff;
}

.btn-wa:hover{
background:var(--green);
border-color:var(--green);
transform:translateY(-4px);
}

/*=========================
 SEARCH
==========================*/

.route-search{
max-width:720px;
margin:45px auto 0;
display:flex;
align-items:center;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10);
border-radius:15px;
padding:0 20px;
backdrop-filter:blur(10px);
}

.route-search i{
color:var(--gold);
font-size:20px;
}

.route-search input{
width:100%;
height:60px;
border:none;
outline:none;
background:none;
color:#fff;
font-size:16px;
padding-left:15px;
}

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

.routes-page{
padding:80px 0;
}

.route-section{
margin-bottom:70px;
}

.section-title{
text-align:center;
margin-bottom:35px;
}

.section-tag{
display:inline-block;
padding:7px 14px;
background:rgba(245,197,24,.08);
border:1px solid rgba(245,197,24,.22);
color:var(--gold);
border-radius:40px;
font-size:12px;
font-weight:700;
margin-bottom:12px;
}

.section-title h2{
font-size:40px;
margin-bottom:10px;
}

.section-title p{
color:var(--muted);
font-size:16px;
}

/*=========================
 FARE
==========================*/

.fare-section{
padding:35px;
border-radius:22px;
background:linear-gradient(145deg,#191200,#0f1015);
border:1px solid rgba(245,197,24,.25);
margin-bottom:70px;
}

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

.fare-card{
padding:25px;
border-radius:16px;
background:#111827;
border:1px solid rgba(245,197,24,.15);
transition:.35s;
}

.fare-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(245,197,24,.15);
}

.fare-icon{
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(245,197,24,.08);
color:var(--gold);
font-size:24px;
margin-bottom:18px;
}

.fare-card h3{
font-size:22px;
margin-bottom:10px;
}

.fare-card strong{
display:block;
font-size:32px;
color:var(--gold);
margin-bottom:8px;
}

.fare-card span{
color:var(--muted);
}

/*=========================
 ROUTE CARDS
==========================*/

.route-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:22px;
}

.route-card{
position:relative;
padding:24px;
border-radius:18px;
background:linear-gradient(145deg,var(--card),var(--card2));
border:1px solid rgba(255,255,255,.08);
overflow:hidden;
transition:.35s;
}

.route-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:2px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
transition:.6s;
}

.route-card:hover::before{
left:100%;
}

.route-card:hover{
transform:translateY(-10px);
border-color:rgba(245,197,24,.35);
box-shadow:
0 20px 45px rgba(0,0,0,.35),
0 0 35px rgba(245,197,24,.08);
}

.route-icon{
width:62px;
height:62px;
display:flex;
align-items:center;
justify-content:center;
border-radius:15px;
background:rgba(245,197,24,.08);
color:var(--gold);
font-size:26px;
margin-bottom:18px;
}

.route-card h3{
font-size:24px;
margin-bottom:10px;
}

.route-card p{
color:var(--muted);
font-size:15px;
line-height:1.6;
margin-bottom:18px;
}

.route-card a{
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 20px;
background:linear-gradient(90deg,var(--gold),#f59e0b);
color:#111;
text-decoration:none;
font-weight:700;
border-radius:10px;
transition:.3s;
}

.route-card a:hover{
transform:translateX(4px);
}

/*=========================
 LOCAL GLOW
==========================*/

.local-section{
padding:35px;
border-radius:22px;
background:linear-gradient(145deg,#181305,#0f1015);
border:1px solid rgba(245,197,24,.28);
}

.local{
box-shadow:0 0 20px rgba(245,197,24,.05);
}

.local:hover{
box-shadow:
0 18px 40px rgba(245,197,24,.20),
0 0 25px rgba(245,197,24,.12);
}

/*=========================
 BADGES
==========================*/

.badge{
position:absolute;
top:18px;
right:18px;
padding:6px 12px;
border-radius:30px;
font-size:11px;
font-weight:700;
}

.popular-badge{
background:linear-gradient(90deg,#f59e0b,var(--gold));
color:#111;
}

.airport-badge{
background:#2563eb;
color:#fff;
}

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

.route-cta{
margin-top:80px;
padding:55px;
border-radius:25px;
background:
radial-gradient(circle at 100% 0,rgba(245,197,24,.12),transparent 35%),
linear-gradient(135deg,#111827,#0b1220);
border:1px solid rgba(245,197,24,.20);
text-align:center;
}

.cta-tag{
display:inline-block;
padding:8px 16px;
border-radius:40px;
background:rgba(245,197,24,.08);
color:var(--gold);
margin-bottom:15px;
font-size:12px;
font-weight:700;
}

.route-cta h2{
font-size:44px;
margin-bottom:15px;
}

.route-cta p{
max-width:700px;
margin:auto;
color:var(--muted);
line-height:1.8;
margin-bottom:30px;
}

.cta-buttons{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
}

.call-btn,
.wa-btn{
padding:15px 30px;
border-radius:12px;
font-weight:700;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:10px;
transition:.35s;
}

.call-btn{
background:linear-gradient(90deg,var(--gold),#f59e0b);
color:#111;
}

.call-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(245,197,24,.3);
}

.wa-btn{
background:var(--green);
color:#fff;
}

.wa-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(37,211,102,.3);
}

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

.whatsapp-float,
.scroll-top{
position:fixed;
right:22px;
width:56px;
height:56px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:24px;
z-index:999;
transition:.3s;
}

.whatsapp-float{
bottom:90px;
background:var(--green);
color:#fff;
box-shadow:0 10px 25px rgba(37,211,102,.4);
}

.scroll-top{
bottom:20px;
background:var(--gold);
color:#111;
box-shadow:0 10px 25px rgba(245,197,24,.35);
opacity:0;
pointer-events:none;
}

.scroll-top.show{
opacity:1;
pointer-events:auto;
}

.whatsapp-float:hover,
.scroll-top:hover{
transform:scale(1.1);
}

/*=========================
 ANIMATIONS
==========================*/

.route-card,
.fare-card{
animation:fadeUp .6s ease both;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(35px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/*=========================
 RESPONSIVE
==========================*/

@media(max-width:992px){

.routes-hero{
padding:90px 0 70px;
}

.section-title h2{
font-size:32px;
}

.route-cta h2{
font-size:34px;
}

}

@media(max-width:768px){

.routes-hero h1{
font-size:42px;
}

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

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

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

.route-search input{
font-size:15px;
}

.route-cta{
padding:35px 25px;
}

.cta-buttons{
flex-direction:column;
}

.call-btn,
.wa-btn{
width:100%;
justify-content:center;
}

}

@media(max-width:480px){

.hero-tag{
font-size:11px;
}

.section-title h2{
font-size:28px;
}

.route-card h3{
font-size:21px;
}

.route-icon{
width:56px;
height:56px;
font-size:22px;
}

.route-search{
padding:0 15px;
}

.route-search input{
height:54px;
}

}