/* bus-page.css : 27 Seater Bus on Rent page
   Siya Travels theme: orange gradient + dark ink + Josefin Sans. Sab classes "bp-" se shuru hoti hain. */

.bp {
  --o1: #FF8A00; --o2: #FF5500;
  --grad: linear-gradient(135deg, #FF8A00 0%, #FF5500 100%);
  --ink: #0F1113; --asp: #2B2F36; --paper: #F8F9FA; --line: #E5E7EB;
  --txt: #4a5059; --mut: #A7ADB6;
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: Arial, Helvetica, sans-serif; line-height: 1.6; color: var(--ink);
  overflow-x: clip;
}
.bp *, .bp *::before, .bp *::after { box-sizing: border-box; }
.bp h1, .bp h2, .bp h3, .bp p, .bp ul, .bp figure { margin: 0; padding: 0; }
.bp ul { list-style: none; }
.bp a { text-decoration: none; color: inherit; }
.bp img { display: block; max-width: 100%; }
.bp :focus-visible { outline: 3px solid #FF8A00; outline-offset: 3px; border-radius: 6px; }
.bp-wrap { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }
.bp-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- shared: headings, eyebrow, buttons ---------- */
.bp-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.bp-head h2, .bp-intro h2 {
  font-family: 'Josefin Sans', Arial, sans-serif; font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; color: var(--ink);
}
.bp-head h2 span, .bp-intro h2 span, .bp-prose h3 span {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.bp-head p { color: var(--txt); font-size: 16.5px; margin-top: 14px; }
.bp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 16px;
  font-family: 'Josefin Sans', Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: #FF5500; background: #fff; border: 1px solid #FFD9B8; border-radius: 999px; box-shadow: 0 8px 20px rgba(255, 85, 0, .1);
}
.bp-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); animation: bpPulse 1.8s ease-in-out infinite; }
.bp-eyebrow-dark { color: #FF8A00; background: rgba(255, 138, 0, .1); border-color: rgba(255, 138, 0, .35); box-shadow: none; }

.bp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-family: 'Josefin Sans', Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: #fff !important;
  background: var(--grad); border: 0; border-radius: 10px; padding: 12px 18px;
  box-shadow: 0 10px 22px rgba(255, 85, 0, .32); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.bp-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(255, 85, 0, .5); color: #fff; }
.bp-btn-dark { background: var(--asp); box-shadow: 0 8px 18px rgba(15, 17, 19, .25); }
.bp-btn-dark:hover { background: var(--ink); box-shadow: 0 14px 26px rgba(15, 17, 19, .4); }
.bp-btn-ghost { background: #000; color: var(--asp); border: 1px solid var(--line); box-shadow: 0 8px 18px rgba(15, 17, 19, .08); }
.bp-btn-ghost:hover { color: var(--o2); border-color: #FFB070; background: #fff; }

/* image placeholder (jab tak image na mile) */
.bp-ph { position: relative; overflow: hidden; background: radial-gradient(circle at 70% 30%, #fff, transparent 55%), linear-gradient(160deg, #EEF0F3, #DFE3E8); }
.bp-ph::before {
  content: ""; position: absolute; inset: 24% 18%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M4 40V20a6 6 0 0 1 6-6h40c6 0 9 2 12 6l10 11c2 2 4 4 4 8v1z' fill='%23D5D9E0'/%3E%3Cpath d='M12 20h36l-2 10H12zM52 20h8l8 10H52z' fill='%23EEF0F3'/%3E%3Ccircle cx='24' cy='42' r='6' fill='%23B9BFC9'/%3E%3Ccircle cx='62' cy='42' r='6' fill='%23B9BFC9'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bp-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .7s var(--ease); }

/* ---------- 1. BANNER ---------- */
.bp-banner {
  position: relative; overflow: hidden; text-align: center; background: var(--ink); color: #fff;
  padding: clamp(70px, 9vw, 120px) clamp(18px, 5vw, 64px) clamp(84px, 9vw, 120px);
}
.bp-banner-bg {
  position: absolute; inset: -5%;
  background: linear-gradient(90deg, rgba(15, 17, 19, .9), rgba(15, 17, 19, .55)), url('../images/bus-banner.webp') center/cover no-repeat, linear-gradient(180deg, #161a1f 0%, #2a1d18 70%, #7a2e10 100%);
  animation: bpKen 30s ease-in-out infinite alternate;
}
.bp-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(0deg, var(--ink), transparent); pointer-events: none; }
.bp-banner h1 { font-family: 'Josefin Sans', Arial, sans-serif; font-weight: 700; letter-spacing: -.025em; font-size: clamp(36px, 6vw, 68px); line-height: 1.05; color: #fff; }
.bp-crumb { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 18px; font-size: 15px; color: #D3D6DB; background: rgba(43, 47, 54, .6); border: 1px solid #3a3f47; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bp-crumb a { color: #fff; transition: color .2s; }
.bp-crumb a:hover { color: var(--o1); }
.bp-crumb span[aria-current] { color: var(--o1); }
.bp-streak { position: absolute; z-index: 1; left: -40%; height: 2px; width: 34%; background: linear-gradient(90deg, transparent, #FF8A00, transparent); opacity: .7; animation: bpStreak 7s linear infinite; }
.bp-streak.s1 { bottom: 22%; }
.bp-streak.s2 { bottom: 15%; width: 22%; animation-duration: 5s; animation-delay: -2s; opacity: .45; }
.bp-road { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, #FF8A00 0 26px, transparent 26px 52px); background-size: 52px 3px; animation: bpRoad 1.2s linear infinite; opacity: .9; }

/* ---------- 2. INTRO ---------- */
.bp-intro { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 110px) clamp(18px, 5vw, 64px); background: var(--paper); }
.bp-intro::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 30px 30px; opacity: .6; pointer-events: none; }
.bp-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.bp-intro h2 { margin-bottom: 18px; }
.bp-intro p { color: var(--txt); font-size: 16px; margin-bottom: 14px; }
.bp-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 28px; }
.bp-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 14px; font-weight: 700; color: #3d434b; background: #FFF4EA; border: 1px solid #FFE0C4; border-radius: 999px; }
.bp-pills .bp-ic { width: 18px; height: 18px; color: var(--o2); }
.bp-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.bp-cta .bp-btn { padding: 15px 26px; font-size: 17px; }
.bp-intro-img { min-height: 420px; border-radius: 20px; box-shadow: 0 30px 70px rgba(15, 17, 19, .22); border: 8px solid #fff; }
.bp-intro-img:hover > img { transform: scale(1.05); }
.bp-float {
  position: absolute; z-index: 2; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  color: #fff; background: var(--grad); border-radius: 14px; box-shadow: 0 14px 30px rgba(255, 85, 0, .45); animation: bpFloat 3.6s ease-in-out infinite;
}
.bp-float b { font-family: 'Josefin Sans', Arial, sans-serif; font-size: 40px; line-height: 1; }
.bp-float span { font-size: 13px; font-weight: 700; line-height: 1.25; }
.bp-deco { position: absolute; z-index: 1; fill: none; stroke: #FF8A00; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .22; pointer-events: none; }
.bp-d1 { width: 76px; top: 40px; right: 5%; animation: bpDeco 7s ease-in-out infinite; }
.bp-d2 { width: 60px; bottom: 40px; left: 3%; animation: bpDeco 6s ease-in-out -2s infinite; }

/* ---------- 3. FEATURES (dark) ---------- */
.bp-features { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 110px) clamp(18px, 5vw, 64px); color: #fff;
  background: radial-gradient(720px 420px at 8% 0%, rgba(255, 138, 0, .20), transparent 70%), radial-gradient(640px 380px at 100% 100%, rgba(255, 85, 0, .14), transparent 70%), var(--ink); }
.bp-features::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%); }
.bp-features .bp-head h2 { color: #fff; }
.bp-features .bp-head p { color: var(--mut); }
.bp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bp-feat {
  position: relative; overflow: hidden; padding: 30px 28px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.bp-feat::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--grad); transition: width .5s var(--ease); }
.bp-feat:hover { transform: translateY(-8px); border-color: rgba(255, 138, 0, .55); box-shadow: 0 28px 64px rgba(0, 0, 0, .5), 0 0 60px rgba(255, 85, 0, .15); }
.bp-feat:hover::after { width: 100%; }
.bp-feat-ic { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 20px; border-radius: 16px; background: var(--grad); box-shadow: 0 14px 30px rgba(255, 85, 0, .4); transition: transform .5s var(--ease); }
.bp-feat:hover .bp-feat-ic { transform: rotate(-6deg) scale(1.08); }
.bp-feat-ic .bp-ic { width: 30px; height: 30px; color: #fff; }
.bp-feat h3 { font-family: 'Josefin Sans', Arial, sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 23px; line-height: 1.15; color: #fff; margin-bottom: 10px; }
.bp-feat p { font-size: 15px; color: var(--mut); }

/* ---------- 4. BUS HIRE (light) ---------- */
.bp-hire { position: relative; padding: clamp(64px, 8vw, 110px) clamp(18px, 5vw, 64px); background: radial-gradient(700px 360px at 90% 0%, rgba(255, 138, 0, .10), transparent 70%), #fff; }
.bp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bp-cards-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 54px; }
.bp-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 2px 6px rgba(15, 17, 19, .05), 0 14px 34px rgba(15, 17, 19, .08); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.bp-card:hover { transform: translateY(-8px); border-color: #FFB070; box-shadow: 0 2px 6px rgba(15, 17, 19, .06), 0 26px 54px rgba(15, 17, 19, .16), 0 40px 80px rgba(255, 85, 0, .14); }
.bp-card:hover .bp-ph > img { transform: scale(1.07); }
.bp-card-img { height: 250px; }
.bp-card-sm .bp-card-img { height: 200px; }
.bp-badge { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 4px 11px; font-family: 'Josefin Sans', Arial, sans-serif; font-weight: 700; font-size: 12px; color: #fff; background: var(--grad); border-radius: 8px; box-shadow: 0 6px 14px rgba(255, 85, 0, .4); }
.bp-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 22px; }
.bp-stars { display: inline-flex; gap: 3px; margin-bottom: 8px; }
.bp-stars svg { width: 16px; height: 16px; fill: #FF8A00; stroke: none; }
.bp-stars svg.off { fill: #D8DBE0; }
.bp-card h3 { font-family: 'Josefin Sans', Arial, sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 21px; line-height: 1.15; color: var(--ink); margin-bottom: 14px; }
.bp-card h3 a { transition: color .2s; }
.bp-card h3 a:hover { color: var(--o2); }
.bp-card-sm h3 { font-size: 19px; margin-bottom: 4px; }
.bp-sub { font-size: 13.5px; color: #6a7079; margin-bottom: 12px; }
.bp-spec { display: grid; gap: 9px; margin-bottom: 18px; }
.bp-spec li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #3d434b; }
.bp-spec .bp-ic { width: 18px; height: 18px; margin-top: 2px; color: var(--o2); }
.bp-spec b { color: var(--ink); }
.bp-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.bp-actions .bp-btn { padding: 11px 12px; font-size: 14.5px; }

/* ---------- 5. GUIDE (dark) ---------- */
.bp-guide { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 110px) clamp(18px, 5vw, 64px); color: #fff;
  background: radial-gradient(640px 380px at 100% 0%, rgba(255, 85, 0, .16), transparent 70%), radial-gradient(600px 340px at 0% 100%, rgba(255, 138, 0, .12), transparent 70%), var(--ink); }
.bp-guide .bp-head { margin-bottom: 36px; max-width: 880px; }
.bp-guide .bp-head h2 { color: #fff; }
.bp-prose { max-width: 960px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bp-prose p { color: #C4C9D0; font-size: 16px; margin-bottom: 14px; }
.bp-prose p:last-child { margin-bottom: 0; }
.bp-prose strong { color: #fff; }
.bp-prose h3 { font-family: 'Josefin Sans', Arial, sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: clamp(22px, 3vw, 30px); color: #fff; margin: 28px 0 12px; padding-bottom: 12px; position: relative; }
.bp-prose h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; border-radius: 3px; background: var(--grad); }

/* ---------- 6. DESTINATIONS (light) ---------- */
.bp-dest { position: relative; padding: clamp(64px, 8vw, 110px) clamp(18px, 5vw, 64px); background: radial-gradient(640px 340px at 92% 0%, rgba(255, 138, 0, .12), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, #FFF8F1 100%); }
.bp-dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bp-tile { display: block; min-height: 270px; border-radius: 16px; color: #fff; box-shadow: 0 14px 34px rgba(15, 17, 19, .14); transition: transform .35s var(--ease), box-shadow .35s; }
.bp-tile::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(15, 17, 19, .88) 0%, rgba(15, 17, 19, .15) 60%, transparent 100%); }
.bp-tile:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(15, 17, 19, .28), 0 30px 70px rgba(255, 85, 0, .18); }
.bp-tile:hover > img { transform: scale(1.1); }
.bp-tile-txt { position: absolute; z-index: 3; left: 20px; right: 64px; bottom: 18px; display: block; }
.bp-tile-txt b { display: block; font-family: 'Josefin Sans', Arial, sans-serif; font-weight: 700; letter-spacing: -.01em; font-size: 23px; line-height: 1.15; }
.bp-tile-txt small { display: block; margin-top: 4px; font-size: 13.5px; color: #D3D6DB; }
.bp-tile-go { position: absolute; z-index: 3; right: 18px; bottom: 18px; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--grad); color: #fff; box-shadow: 0 8px 18px rgba(255, 85, 0, .45); transition: transform .35s var(--ease); }
.bp-tile:hover .bp-tile-go { transform: translateX(4px) rotate(-45deg); }

/* ---------- scroll reveal (JS na chale to content visible rehta hai) ---------- */
.bp-js .bp-rv { opacity: 0; transform: translateY(36px); }
.bp-js .bp-rv.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease), box-shadow .3s, border-color .3s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }
.bp-js .bp-card.bp-rv.in:hover, .bp-js .bp-tile.bp-rv.in:hover, .bp-js .bp-feat.bp-rv.in:hover { transform: translateY(-8px); transition-delay: 0s; }

/* ---------- animations ---------- */
@keyframes bpKen { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, -1%); } }
@keyframes bpStreak { to { transform: translateX(420%); } }
@keyframes bpRoad { to { background-position: -52px 0; } }
@keyframes bpPulse { 50% { transform: scale(1.5); opacity: .6; } }
@keyframes bpFloat { 50% { transform: translateY(-6px); } }
@keyframes bpDeco { 50% { transform: translateY(-16px) rotate(4deg); } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .bp-cards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .bp-intro-grid { grid-template-columns: 1fr; }
  .bp-intro-img { min-height: 340px; order: -1; }
  .bp-feat-grid, .bp-dest-grid { grid-template-columns: repeat(2, 1fr); }
  .bp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bp-feat-grid, .bp-dest-grid, .bp-cards, .bp-cards-4 { grid-template-columns: 1fr; }
  .bp-head { margin-bottom: 36px; }
  .bp-cta .bp-btn { flex: 1 1 100%; }
  .bp-tile { min-height: 230px; }
  .bp-card-img { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp *, .bp *::before, .bp *::after { animation: none !important; transition: none !important; }
  .bp-js .bp-rv { opacity: 1; transform: none; }
}