/* =========================================================
   DoctorLabs — Cleaned & Consolidated stylesheet
   ========================================================= */

/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', sans-serif;
  background: #0b0f17;
  color: #f5f5f5;
  line-height: 1.6;
  /* Reserve space for sticky header when using #anchors */
  scroll-padding-top: 128px;
}

/* CONTAINERS */
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* BUTTONS (shared) */
.btn-primary {
  background: #58d1c5;
  padding: 10px 20px;
  border-radius: 8px;
  color: #08303a !important;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; line-height: 1;
}
.btn-secondary {
  background: transparent;
  border: 2px solid #4fd1c5;
  padding: 10px 20px;
  border-radius: 5px;
  color: #4fd1c5;
  font-weight: 600;
  transition: .25s;
}
.btn-secondary:hover { background: #4fd1c5; color: #111; }

/* =========================================================
   HEADER (Two-bar, Pathlabs-style)
   NOTE: Header markup must use <header class="dl-header"> …
   ========================================================= */
.dl-header { position: sticky; top: 0; z-index: 1000; }

/* Top blue bar */
.dl-topbar {
  background: linear-gradient(90deg, #1554c2, #0f4db1);
  color: #fff;
  font-size: 14px;
}
.dl-topbar__row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px;
}
.dl-brand { display: flex; align-items: center; }
.dl-brand img { height: 48px; width: auto; display: block; object-fit: contain; }

.dl-topbar__links { display: flex; align-items: center; gap: 12px; }
.dl-topbar__links a { color: #e9f3ff; text-decoration: none; }
.dl-topbar__links a.item { display: inline-flex; align-items: center; gap: 6px; }
.dl-topbar__links .dot { opacity: .6; color: #cfe1ff; }

/* White nav bar */
.dl-navwrap { background: #fff; border-bottom: 1px solid #eef1f6; color: #1a2a3a; }
.dl-nav {
  display: grid; align-items: center;
  grid-template-columns: auto 1fr auto; gap: 16px;
  min-height: 64px;
}

/* Location pill */
.dl-locpill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 2px solid #db1d1d; border-radius: 30px;
  background: #fff; cursor: pointer;
  font-weight: 600; color: #1a2a3a;
}
.dl-locpill .pin { color: #1e4ca1; }
.dl-locpill .chev { color: #1e4ca1; font-weight: 700; }

/* Main menu */
.dl-menu ul { list-style: none; display: flex; gap: 22px; align-items: center; justify-content: center; }
.dl-menu a {
  color: #1a2a3a; text-decoration: none; font-weight: 600;
  padding: 8px 6px; border-radius: 6px;
}
.dl-menu a:hover, .dl-menu a.active { color: #0f4db1; }

/* Right actions */
.dl-actions { display: flex; align-items: center; gap: 14px; }
.dl-link { text-decoration: none; color: #314558; font-weight: 600; }
.dl-link.muted { color: #70869b; }
.dl-cart { position: relative; text-decoration: none; color: #1a2a3a; font-size: 18px; }
.dl-cart .badge {
  position: absolute; top: -8px; right: -10px;
  background: #0f4db1; color: #fff; font-size: 12px;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.dl-burger { display: none; background: #fff; border: 1px solid #d7deea; border-radius: 8px; width: 40px; height: 40px; }

/* Mobile drawer */
.dl-drawer {
  display: none; background: #fff; border-top: 1px solid #eef1f6;
  box-shadow: 0 12px 30px rgba(16,38,70,.08);
}
.dl-drawer a { display: block; padding: 14px 20px; color: #1a2a3a; text-decoration: none; border-bottom: 1px solid #f4f6fb; }
.dl-drawer a:last-child { border-bottom: 0; }
.dl-drawer .btn-primary.full { margin: 10px 20px 16px; }

/* Responsive header */
@media (max-width: 1024px) {
  .dl-menu { display: none; }
  .dl-burger { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 768px) {
  .dl-topbar__row { min-height: 56px; }
  .dl-brand img { height: 40px; }
  .dl-actions .dl-link { display: none; } /* hide welcome on small screens */
  .dl-locpill { padding: 8px 12px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  background: url('assets/hero-banner.jpg') center/cover no-repeat;
  height: 90vh; display: flex; align-items: center; text-align: center;
}
.hero h1 { font-size: 2.8rem; margin-bottom: 15px; }
.hero p  { font-size: 1.2rem; margin-bottom: 20px; }

/* =========================================================
   SECTIONS
   ========================================================= */
section { padding: 60px 0; }
h2 { text-align: center; margin-bottom: 40px; font-size: 2rem; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: #1a202c; padding: 20px; border-radius: 10px; text-align: center;
  transition: .3s;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,.4); }

/* =========================================================
   FOOTER
   ========================================================= */
footer { background: #111; padding: 40px 20px 20px; }
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;
}
.footer-logo { width: 150px; margin-bottom: 10px; }
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #333; color: #888; }

/* =========================================================
   MOBILE MENU (legacy anchors smooth scrolling)
   ========================================================= */
@media (max-width: 768px) {
  /* nothing else needed here since header is using .dl-* classes */
}

/* === HERO SPLIT LAYOUT === */
.hero-split { background: transparent; padding: 40px 0; }
.hero-grid {
  display: grid; gap: 24px;
  grid-template-columns: 2fr 1fr;
  align-items: stretch;
}
.hero-banner {
  margin: 0; background: #0f1320;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.hero-banner img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Book card */
.hero-book {
  background: #f7fbff;
  color: #0f2336;
  border-radius: 16px;
  padding: 22px 22px;
  box-shadow: 0 14px 34px rgba(16,38,70,.25);
  border: 1px solid #e8eef6;
}
.hero-book h3 {
  font-size: 1.2rem; letter-spacing: .3px; color: #1b4fb6;
  text-transform: uppercase; margin-bottom: 14px; font-weight: 800;
}

/* Form */
#bookTestForm .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#bookTestForm label { font-size: .9rem; font-weight: 700; color: #12314a; }
#bookTestForm input {
  background: #fff; color: #0e2435;
  padding: 12px 12px; border-radius: 10px;
  border: 1.5px solid #dbe6f2; outline: none; transition: .2s;
}
#bookTestForm input:focus { border-color: #1b4fb6; box-shadow: 0 0 0 3px rgba(27,79,182,.12); }
#bookTestForm .hint { color: #6a7f93; font-size: .75rem; }

.btn-block { width: 100%; margin-top: 6px; }

/* Quick links (optional) */
.quick-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px; }
.ql-item {
  background: #e9f2ff; color: #0f3a7a; text-decoration: none;
  padding: 10px 12px; border-radius: 10px; text-align: center; font-weight: 700;
  border: 1px solid #d7e6ff;
}
.ql-item:hover { background: #dcebff; }

/* Responsive */
@media (max-width: 1024px){
  .hero-grid { grid-template-columns: 1.5fr 1fr; }
}
@media (max-width: 900px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-book { order: -1; }  /* card on top on mobile */
}

/* === HERO SPLIT LAYOUT (keeps your existing grid) === */
.hero-split { background: transparent; padding: 40px 0; }
.hero-grid { display: grid; gap: 24px; grid-template-columns: 2fr 1fr; align-items: stretch; }

/* === MARQUEE (left) === */
.marquee{
  position: relative;
  height: clamp(220px, 42vw, 520px);
  border-radius: 16px;
  overflow: hidden;
  background: #0f1320;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.marquee-track{
  display: flex; align-items: center; gap: 16px; height: 100%;
  will-change: transform;
  --marquee-speed: 5s;                     /* adjust speed here */
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}
.marquee-track img{
  height: 100%; width: auto; aspect-ratio: 16/7; object-fit: cover;
  border-radius: 14px; user-select: none; pointer-events: none;
  background: #0b0f17;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }     /* we’ll duplicate slides in JS */
}

/* === CTA CARD (right) === */
.hero-book{
  background: #f7fbff; color: #0f2336; border-radius: 16px;
  padding: 22px; border: 1px solid #e8eef6;
  box-shadow: 0 14px 34px rgba(16,38,70,.25);
}
.hero-cta-only h3{
  font-size: 1.2rem; letter-spacing: .3px; color: #1b4fb6;
  text-transform: uppercase; margin-bottom: 10px; font-weight: 800;
}
.hero-cta-only .sub{ color:#3a5570; margin-bottom: 14px; }
.btn-block{ width: 100%; }

/* Quick links row */
.quick-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.ql-item{
  background:#e9f2ff; color:#0f3a7a; text-decoration:none;
  padding:10px 12px; border-radius:10px; text-align:center; font-weight:700;
  border:1px solid #d7e6ff;
}
.ql-item:hover{ background:#dcebff; }

/* Responsive */
@media (max-width:1024px){ .hero-grid { grid-template-columns: 1.5fr 1fr; } }
@media (max-width:900px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-book { order: -1; }                 /* card above on mobile */
  .marquee { height: clamp(200px, 55vw, 420px); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track { animation-duration: 0.001s; animation-iteration-count: 1; }
}

/* === HERO MARQUEE (multi-slide visible) === */
.hero-split { background: transparent; padding: 40px 0; }
.hero-grid { display: grid; gap: 24px; grid-template-columns: 2fr 1fr; align-items: stretch; }

.marquee{
  position: relative;
  height: clamp(220px, 42vw, 520px);
  border-radius: 16px;
  overflow: hidden;
  background: #0f1320;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.marquee-track{
  display: flex; align-items: center; gap: 16px; height: 100%;
  will-change: transform;
  --marquee-speed: 5s;                   /* adjust speed as needed */
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}

/* Each slide is a fixed “card” width so multiple are visible */
.marquee-track .slide{
  flex: 0 0 clamp(280px, 36vw, 520px);   /* ~2–3 slides visible depending on screen */
  height: 100%;
  border-radius: 14px; overflow: hidden;
  background: #0b0f17;
}
.marquee-track .slide img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Pause on hover */
.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* we duplicate slides in JS */
}

@media (max-width: 1024px){
  .hero-grid { grid-template-columns: 1.5fr 1fr; }
}
@media (max-width: 900px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-book { order: -1; }
  .marquee { height: clamp(200px, 55vw, 420px); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation-duration: .001s; animation-iteration-count: 1; }
}

/* ===== HERO SPLIT GRID (keeps your layout) ===== */
.hero-split { background: transparent; padding: 40px 0; }
.hero-grid { display: grid; gap: 24px; grid-template-columns: 2fr 1fr; align-items: stretch; }
@media (max-width:1024px){ .hero-grid{ grid-template-columns: 1.5fr 1fr; } }
@media (max-width:900px){ .hero-grid{ grid-template-columns: 1fr; } .hero-book{ order:-1; } }

/* ===== VANILLA SLICK-LIKE SLIDER ===== */
.dl-slider{
  position: relative;
  height: clamp(220px, 42vw, 520px);
  border-radius: 16px;
  overflow: hidden;
  background: #0f1320;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.slider-viewport{ height:100%; overflow:hidden; }
.slider-track{
  display:flex; height:100%;
  will-change: transform;
  transition: transform 500ms ease;   /* JS toggles this for jumps */
  cursor: grab;
}
.slider-track:active{ cursor: grabbing; }
.slide{ flex: 0 0 100%; height:100%; }
.slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Arrows */
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background: rgba(10,14,24,.55); color:#fff; font-size:20px;
  display:inline-flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px);
}
.slider-btn:hover{ background: rgba(10,14,24,.8); }
.slider-btn.prev{ left:12px; }
.slider-btn.next{ right:12px; }

/* Dots */
.slider-dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:8px; padding:6px 10px; border-radius:20px;
  background: rgba(0,0,0,.25); backdrop-filter: blur(4px);
}
.slider-dots button{
  width:10px; height:10px; border-radius:50%; border:0;
  background:#c6d5ff; opacity:.55; cursor:pointer;
}
.slider-dots button[aria-current="true"]{ opacity:1; background:#4a79ff; transform:scale(1.15); }

/* Pause animation while hovering controls (UX) */
.dl-slider:hover .slider-track{ transition-timing-function: ease; }

/* ===== CTA CARD (right) ===== */
.hero-book{
  background: #f7fbff; color: #0f2336; border-radius: 16px;
  padding: 22px; border: 1px solid #e8eef6; box-shadow: 0 14px 34px rgba(16,38,70,.25);
}
.hero-cta-only h3{ font-size:1.2rem; letter-spacing:.3px; color:#1b4fb6; text-transform:uppercase; margin-bottom:10px; font-weight:800; }
.hero-cta-only .sub{ color:#3a5570; margin-bottom:14px; }
.btn-block{ width:100%; }

/* Quick links */
.quick-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.ql-item{
  background:#e9f2ff; color:#0f3a7a; text-decoration:none;
  padding:10px 12px; border-radius:10px; text-align:center; font-weight:700; border:1px solid #d7e6ff;
}
.ql-item:hover{ background:#dcebff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ .slider-track{ transition-duration: 1ms; } }

/* ===== Packages Page ===== */

/* Breadcrumb */
.crumb { display:flex; align-items:center; gap:8px; padding:16px 0 8px; color:#a9b7c7; }
.crumb a { color:#dbe7ff; text-decoration:none; }
.crumb strong { color:#fff; }

/* Filter Card */
.pkg-card {
  background:#fff; color:#0f2336; border:1px solid #eef1f6; border-radius:16px;
  padding:18px; box-shadow:0 10px 24px rgba(16,38,70,.08);
}
.pkg-card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pkg-card__head h1 { font-size:1.4rem; color:#0d2c5a; }

/* Toggle */
.toggle { display:flex; align-items:center; gap:10px; }
.toggle-label { color:#223a52; font-weight:700; }
.switch { position:relative; display:inline-block; width:46px; height:26px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
  background:#c6d4e6; transition:.2s; border-radius:26px;
}
.slider:before{ content:""; position:absolute; height:20px; width:20px; left:3px; top:3px;
  background:#fff; transition:.2s; border-radius:50%;
}
.switch input:checked + .slider{ background:#1b4fb6; }
.switch input:checked + .slider:before{ transform:translateX(20px); }

/* Tabs */
.tabs{ display:flex; gap:8px; margin:12px 0 10px; }
.tab{ padding:10px 14px; border-radius:10px; border:1px solid #dfe7f4; background:#f2f6ff;
  color:#0f2b55; font-weight:800; cursor:pointer;
}
.tab.active{ background:#173c8d; color:#fff; border-color:#173c8d; }

/* Search row */
.searchrow{ display:grid; grid-template-columns: 180px 1fr; gap:10px; }
.select{
  height:42px; border:1px solid #dbe6f2; border-radius:10px; padding:0 10px; background:#fff; color:#12314a;
}
.searchbox{ display:flex; border:1px solid #dbe6f2; border-radius:10px; overflow:hidden; }
.searchbox input{ flex:1; border:0; padding:0 12px; height:42px; outline:none; }
.searchbox button{ width:44px; border:0; background:#ffcc4d; cursor:pointer; }

/* Alphabet chips */
.alpha{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.chip{
  border:0; padding:8px 12px; border-radius:999px; background:#eef2f7; color:#23354a;
  cursor:pointer; font-weight:700;
}
.chip.active{ background:#dfe9ff; color:#143c8d; box-shadow: inset 0 0 0 2px #143c8d33; }

/* Results */
.results-head{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px; }
.results-head h2{ margin:0; color:#fff; }
.results-head .count{ color:#a9b7c7; }

.pkg-grid{
  display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.pkg-carditem{
  background:#162132; color:#e6eef7; border-radius:12px; padding:14px; border:1px solid #1e2b3d;
  display:flex; flex-direction:column; gap:10px;
}
.pkg-carditem h3{ font-size:1rem; line-height:1.25; color:#fff; }
.pkg-meta{ display:flex; gap:8px; flex-wrap:wrap; color:#9db0c6; font-size:.9rem; }
.price{ display:flex; align-items:center; gap:8px; }
.price .mrp{ text-decoration:line-through; color:#7f90a6; font-size:.9rem; }
.badge{ background:#0f4db1; color:#fff; font-size:.75rem; padding:4px 8px; border-radius:999px; }
.badge.green{ background:#3bb385; }

.pkg-actions{ display:flex; gap:10px; margin-top:auto; }
.pkg-actions .btn-primary{ height:38px; padding:0 12px; }
.pkg-actions .btn-secondary{ height:38px; padding:0 12px; border-radius:8px; }

.more{ display:flex; justify-content:center; padding:18px 0 40px; }

/* Responsive */
@media (max-width:768px){
  .searchrow{ grid-template-columns: 1fr; }
}

/* Login button (header) */
.dl-actions .btn-login{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 14px; border-radius:8px; font-weight:700;
  border:2px solid #0f4db1; color:#0f4db1; background:#fff; text-decoration:none;
}
.dl-actions .btn-login:hover{
  background:#0f4db1; color:#fff;
}

/* Drawer variant */
.dl-drawer .btn-login.drawer{
  margin:10px 20px 0; display:block; text-align:center;
  border:2px solid #0f4db1; color:#0f4db1; border-radius:8px; padding:10px 0;
}
.dl-drawer .btn-login.drawer:hover{ background:#0f4db1; color:#fff; }

/* ===== Popular Packages (index) ===== */
.popular { padding: 30px 0 8px; }
.popular-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.popular-head h2{ color:#fff; font-weight:800; }
.popular-head .view-all{ color:#1b4fb6; text-decoration:none; font-weight:800; }

.card-slider{ position:relative; }
.card-track{
  --gap: 18px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2*var(--gap))/3); /* 3 per view */
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}
.card-track::-webkit-scrollbar{ height:8px; }
.card-track::-webkit-scrollbar-thumb{ background:#243448; border-radius:8px; }

/* Card */
.pkg-card{
  scroll-snap-align: start;
  background:#fff; color:#0f2336; border-radius:18px;
  box-shadow:0 10px 24px rgba(16,38,70,.10);
  overflow:hidden; display:flex; flex-direction:column;
}
.pkg-ribbon{
  background:#f6c447; color:#1b263b; font-weight:800; letter-spacing:.3px;
  padding:12px 16px; border-bottom:1px solid #f0d789;
}
.pkg-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:12px; }
.pkg-feats{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.pkg-feats li{ display:flex; gap:8px; align-items:flex-start; color:#324b66; }
.pkg-feats a{ color:#1b4fb6; text-decoration:none; }

/* Price row */
.pkg-price-row{ display:flex; align-items:center; justify-content:space-between; }
.price-left{ display:flex; align-items:center; gap:8px; }
.price{ font-weight:800; color:#173c8d; }
.mrp{ text-decoration:line-through; color:#7f90a6; }

/* Discount badge (blob-like) */
.disc-badge{
  position:relative; background:#ffcc4d; color:#2b2b2b;
  padding:8px 10px; border-radius:50px; text-align:center; min-width:70px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}
.disc-badge b{ font-size:14px; }
.disc-badge span{ display:block; font-size:11px; margin-top:-2px; }

/* Actions */
.pkg-actions{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.btn-book{ background:#173c8d; color:#fff !important; }
.btn-book .arrow{ display:inline-block; margin-left:8px; font-weight:900; }
.link-more{ color:#1b4fb6; font-weight:700; text-decoration:none; }

/* Slider nav */
.card-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background: rgba(10,14,24,.55); color:#fff; font-size:20px;
  display:inline-flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px);
}
.card-btn.prev{ left: -4px; }
.card-btn.next{ right: -4px; }
.card-btn:hover{ background:rgba(10,14,24,.8); }

/* Dots */
.card-dots{
  display:flex; gap:8px; justify-content:center; margin:14px 0 0;
}
.card-dots button{
  width:8px; height:8px; border-radius:50%; border:0; background:#7da2ff; opacity:.45; cursor:pointer;
}
.card-dots button[aria-current="true"]{ opacity:1; background:#1b4fb6; transform:scale(1.15); }

/* Responsive columns */
@media (max-width: 1024px){
  .card-track{ grid-auto-columns: calc((100% - var(--gap))/2); } /* 2 per view */
}
@media (max-width: 680px){
  .card-track{ grid-auto-columns: 100%; } /* 1 per view */
  .card-btn{ display:none; }
}

/* ==== Popular Packages: Blue + Red theme override ==== */
:root{
  --pkg-blue: #0f4db1;      /* primary blue */
  --pkg-blue-dark: #173c8d;
  --pkg-red: #e53935;       /* accent red */
}

/* Ribbon at the top of each card */
.popular .pkg-card .pkg-ribbon{
  background: linear-gradient(180deg, var(--pkg-blue) 0%, var(--pkg-blue-dark) 100%);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

/* “Book Now” stays blue for consistency */
.popular .pkg-card .btn-book{
  background: var(--pkg-blue);
  color:#fff !important;
}

/* Links & View All use blue */
.popular-head .view-all,
.popular .pkg-feats a,
.popular .link-more{
  color: var(--pkg-blue);
}

/* Discount badge switches from yellow to red */
.popular .disc-badge{
  background: var(--pkg-red);
  color:#fff;
  box-shadow: 0 6px 16px rgba(229,57,53,.25);
}
.popular .disc-badge b,
.popular .disc-badge span{ color:#fff; }

/* Dots: subtle blue hue */
.popular .card-dots button{ background:#86a9ff; }
.popular .card-dots button[aria-current="true"]{ background: var(--pkg-blue); }

/* ===== Premium Services (Blue + Red) ===== */
:root{
  --svc-blue: #0f4db1;
  --svc-blue-d: #173c8d;
  --svc-red:  #e53935;
  --svc-surface: #121a27;
  --svc-border:  #1e2b3d;
}

.premium-services{ padding-top: 50px; }
.premium-services .services-head{
  text-align:center; margin-bottom: 22px;
}
.premium-services .services-head h2{
  font-size: 2rem; font-weight: 900; color:#ffffff;
}
.premium-services .services-head h2 span{
  color:#cfe2ff; font-weight:700;
}
.premium-services .services-head .tagline{
  color:#99b2cc; margin-top: 6px;
}

/* Grid */
.services-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Card */
.svc-card{
  position:relative;
  background: linear-gradient(180deg, rgba(15,77,177,.08), rgba(229,57,53,.06));
  border:1px solid var(--svc-border);
  border-radius:16px; padding:18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color:#eaf2ff;
}
.svc-card::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:4px;
  background: linear-gradient(90deg, var(--svc-blue), var(--svc-red));
  border-top-left-radius:16px; border-top-right-radius:16px;
}
.svc-card:hover{
  transform: translateY(-6px);
  border-color: rgba(79,168,255,.45);
  box-shadow: 0 16px 40px rgba(15,77,177,.25);
}
.svc-card h3{
  font-size:1.05rem; margin:10px 0 6px; color:#fff; font-weight:800;
}
.svc-card p{
  font-size:.95rem; color:#b6c7db;
}

/* Icon chip */
.svc-icon{
  width:48px; height:48px; border-radius:50%;
  display:inline-grid; place-items:center;
  background: radial-gradient(110% 110% at 30% 20%, rgba(15,77,177,.35), rgba(229,57,53,.35));
  color:#ffffff;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 0 8px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.25);
}
.svc-icon svg{
  width:26px; height:26px; stroke:currentColor; fill:none;
}

/* Footnote */
.svc-note{
  color:#8ea3ba; margin-top:14px; text-align:center; font-size:.9rem;
}

/* === Services slider (reuses card-slider styles) === */
.svc-slider .card-track{
  --gap: 18px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3*var(--gap))/4); /* 4 per view desktop */
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}
.svc-slider .card-track::-webkit-scrollbar{ height:8px; }
.svc-slider .card-track::-webkit-scrollbar-thumb{ background:#243448; border-radius:8px; }

/* arrows positioned a bit outside */
.svc-slider .card-btn.prev{ left:-4px; }
.svc-slider .card-btn.next{ right:-4px; }

/* dots spacing */
.svc-slider .card-dots{ margin-top: 14px; }

/* responsive columns */
@media (max-width: 1200px){
  .svc-slider .card-track{ grid-auto-columns: calc((100% - 2*var(--gap))/3); } /* 3 */
}
@media (max-width: 900px){
  .svc-slider .card-track{ grid-auto-columns: calc((100% - var(--gap))/2); }   /* 2 */
}
@media (max-width: 640px){
  .svc-slider .card-track{ grid-auto-columns: 100%; }                            /* 1 */
  .svc-slider .card-btn{ display:none; }
}

/* ===== WHY CHOOSE (Blue + Red, light surface) ===== */
:root{
  --why-blue: #0f4db1;
  --why-blue-d: #173c8d;
  --why-red:  #e53935;
  --why-bg:   #f4f7ff;
  --why-card: #ffffff;
  --why-text: #0f2336;
  --why-muted:#4b627d;
}

.why-choose{
  background: var(--why-bg);
  color: var(--why-text);
  padding: 48px 0;
}
.why-head h2{
  font-weight: 900; font-size: 2rem; color: #14243a;
}
.why-head p{ color:#3b526d; margin-top:6px; }

/* Slider layout: 3 / 2 / 1 per view */
.why-slider .card-track{
  --gap: 18px;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2*var(--gap))/3);
  gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 14px 0 8px;
}
.why-slider .card-track::-webkit-scrollbar{ height:8px; }
.why-slider .card-track::-webkit-scrollbar-thumb{ background:#cdd9ef; border-radius:8px; }

/* Card */
.why-card{
  scroll-snap-align: start;
  background: var(--why-card);
  border: 1px solid #e6eef8;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(16,38,70,.08);
  display: flex; flex-direction: column; gap: 8px;
}
.why-card h3{
  font-size: 1.05rem; font-weight: 900; color:#122a4a; margin-top:6px;
}
.why-card p{ color: var(--why-muted); }

/* Icon */
.why-ico{
  width: 54px; height: 54px; border-radius: 12px;
  display: grid; place-items: center;
  color:#fff;
  background: linear-gradient(135deg, var(--why-blue) 0%, var(--why-blue-d) 60%, var(--why-red) 120%);
  box-shadow: 0 6px 16px rgba(15,77,177,.25);
}
.why-ico svg{ width:28px; height:28px; }

/* Arrows & dots (reuse global slider styles if present) */
.why-slider .card-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  background:#ffffff; color:var(--why-blue); font-size:20px;
  box-shadow: 0 6px 18px rgba(15,77,177,.15);
}
.why-slider .card-btn.prev{ left:-4px; }
.why-slider .card-btn.next{ right:-4px; }
.why-slider .card-btn:hover{ background:#eaf1ff; }

.why-slider .card-dots{ display:flex; gap:8px; justify-content:center; margin:14px 0 0; }
.why-slider .card-dots button{
  width:8px; height:8px; border-radius:50%; border:0; background:#9fb8ff; opacity:.55;
}
.why-slider .card-dots button[aria-current="true"]{ opacity:1; background:var(--why-blue); }

/* Responsive */
@media (max-width: 1024px){
  .why-slider .card-track{ grid-auto-columns: calc((100% - var(--gap))/2); }
}
@media (max-width: 680px){
  .why-slider .card-track{ grid-auto-columns: 100%; }
  .why-slider .card-btn{ display:none; }
}

/* ===== Testimonials (Blue + Red, slider) ===== */
:root{
  --testi-blue:#0f4db1;
  --testi-blue-d:#173c8d;
  --testi-red:#e53935;
}

.testi{ padding: 40px 0 28px; background: transparent; }
.testi-head h2{
  color:#fff; font-weight:900;
  position:relative; display:inline-block; padding-bottom:6px;
}
.testi-head h2::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:120px;
  background: linear-gradient(90deg, var(--testi-blue), var(--testi-red));
  border-radius:3px;
}

/* track: 3 / 2 / 1 per view */
.testi-slider .card-track{
  --gap:18px;
  display:grid; grid-auto-flow:column;
  grid-auto-columns: calc((100% - 2*var(--gap))/3);
  gap:var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding: 14px 0 8px;
}
@media (max-width:1024px){ .testi-slider .card-track{ grid-auto-columns: calc((100% - var(--gap))/2); } }
@media (max-width:680px){  .testi-slider .card-track{ grid-auto-columns: 100%; } .testi-slider .card-btn{ display:none; }}

/* card */
.testi-card{
  scroll-snap-align:start;
  background:#fff; color:#0f2336;
  border:1px solid #e7eef7; border-radius:18px;
  box-shadow:0 12px 28px rgba(16,38,70,.08);
  padding:18px; display:flex; flex-direction:column; gap:14px;
}
.testi-card .quote{
  position:relative; color:#2a425d; line-height:1.5;
  background:#fffdf5; border:1px dashed #ffe3c2; border-radius:12px; padding:16px 16px 18px 44px;
}
.testi-card .quote::before{
  content:"“"; position:absolute; left:12px; top:-6px; font-size:42px; line-height:1;
  background: linear-gradient(180deg, var(--testi-blue), var(--testi-red));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900;
}

/* author row */
.testi-author{ display:flex; align-items:center; gap:12px; }
.testi-author img{
  width:54px; height:54px; border-radius:50%; object-fit:cover;
  border:2px solid var(--testi-blue);
}
.testi-author .who h4{ margin:0; color:var(--testi-blue); font-weight:900; }
.testi-author .who p{ margin:2px 0 0; color:#6b83a0; }

/* Ensure author row lays out correctly */
.testi-author{ display:flex; align-items:center; gap:12px; }
.testi-author .who{ display:flex; flex-direction:column; }
.testi-author .who h4{ margin:0; color:var(--testi-blue); font-weight:900; }
.testi-author .who p{ margin:2px 0 0; color:#6b83a0; }

/* ✅ Fallback avatar only on the IMG */
.testi-author img{
  width:54px; height:54px; border-radius:50%;
  object-fit:cover; border:2px solid var(--testi-blue);
}

/* When the image fails, keep the same box and paint a gradient */
.testi-author img.avatar-fallback{
  background: radial-gradient(120% 120% at 30% 20%, var(--testi-blue), var(--testi-red));
  /* keep size, border, and radius as above */
}

/* arrows + dots tint */
.testi-slider .card-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(10,14,24,.55); color:#fff; font-size:20px; backdrop-filter:blur(4px);
}
.testi-slider .card-btn:hover{ background:rgba(10,14,24,.8); }
.testi-slider .card-btn.prev{ left:-4px; } .testi-slider .card-btn.next{ right:-4px; }

.testi-slider .card-dots{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
.testi-slider .card-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:#86a9ff; opacity:.45; }
.testi-slider .card-dots button[aria-current="true"]{ opacity:1; background:var(--testi-blue); transform:scale(1.1); }

/* Centered social footer */
.site-footer{ background:#111; }
.footer-center{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:22px 0 8px;
}

/* Round icon buttons */
.footer-center .social{
  width:48px; height:48px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
  background: radial-gradient(120% 120% at 30% 20%, #0f4db1 0%, #173c8d 60%, #e53935 120%);
  border:1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s;
}
.footer-center .social:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.45); }

/* Phone chip: show number next to the icon */
.footer-center .social.phone{
  border-radius:999px; padding:0 14px; gap:10px; width:auto; height:44px;
  background:#162132; border:1px solid #223143; color:#e6eef7;
}
.footer-center .social.phone:hover{ background:#1b2638; }
.footer-center .social.phone span{ font-weight:700; letter-spacing:.2px; }

/* Keep copyright line readable */
.footer-bottom{ text-align:center; padding:14px 0 24px; border-top:1px solid #222; color:#888; }

/* Small screens: add some spacing */
@media (max-width: 520px){
  .footer-center{ gap:12px; flex-wrap:wrap; }
}
/* ===== Book a Test Online — Red & Blue UI ===== */
:root{
  --dl-blue: #0f4db1;
  --dl-blue-d: #173c8d;
  --dl-red:  #e53935;
}

/* Card */
.hero-book{
  position: relative;
  background:
    radial-gradient(140% 120% at 10% 0%, rgba(15,77,177,.10), transparent 55%),
    radial-gradient(140% 120% at 110% -10%, rgba(229,57,53,.10), transparent 45%),
    #f7fbff;                               /* light base to keep form readable */
  color: #0f2336;
  border: 1px solid #e3ecf8;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 14px 34px rgba(16,38,70,.15);
  overflow: hidden;
}

/* Gradient top accent */
.hero-book::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px; height:6px;
  background: linear-gradient(90deg, var(--dl-blue), var(--dl-red));
  border-top-left-radius:16px; border-top-right-radius:16px;
}

/* Title */
.hero-book h3{
  color: var(--dl-blue);
  text-transform: uppercase;
  letter-spacing:.4px;
  font-weight: 900;
  margin-bottom: 10px;
}

/* Rows / labels / hints */
.hero-book .form-row{ margin-bottom: 14px; }
.hero-book label{
  display:block; font-weight:800; color:#133055; margin-bottom:6px;
}
.hero-book .hint{ color:#6b83a0; font-size:.85rem; margin-top:6px; }

/* Inputs */
.hero-book input{
  width:100%;
  height: 46px;
  background:#fff;
  border:1.5px solid #d7e6ff;
  border-radius:12px;
  padding:0 14px;
  color:#0f2336;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.hero-book input::placeholder{ color:#9ab0c9; }
.hero-book input:focus{
  border-color: var(--dl-blue);
  box-shadow: 0 0 0 3px rgba(15,77,177,.25);
}
.hero-book input:invalid[required]{ border-color:#f2b8b5; }

/* CTA button (blue→red gradient) */
.hero-book .btn-primary{
  height: 48px;
  border-radius:12px;
  border:0;
  color:#fff !important;
  background: linear-gradient(135deg, var(--dl-blue) 0%, var(--dl-blue-d) 55%, var(--dl-red) 140%);
  box-shadow: 0 10px 24px rgba(15,77,177,.30);
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.hero-book .btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,77,177,.34);
}
.hero-book .btn-primary:active{ transform: translateY(0); }

/* Mobile spacing */
@media (max-width: 768px){
  .hero-book{ padding:18px; }
}
/* ==== Hero slider: show full image (no crop) + red/blue UI ==== */
:root{
  --hero-blue:#0f4db1;
  --hero-blue-d:#173c8d;
  --hero-red:#e53935;
}

/* keep your current height */
.dl-slider.contain-images { background:#0f1320; border-radius:16px; overflow:hidden; }

/* Each slide gets a blurred backdrop from the same image (set via JS below) */
.dl-slider.contain-images .slide{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:10px;             /* breathing room around posters */
}
.dl-slider.contain-images .slide::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bg, linear-gradient(120deg,#0f1320,#0b0f17)) center/cover no-repeat;
  filter: blur(22px) saturate(1.12);
  transform: scale(1.06);   /* hide blur edges */
  opacity:.38;
}

/* Show full image (no cropping) */
.dl-slider.contain-images .slide img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit: contain;      /* <-- key change (was cover) */
  border-radius:12px;
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
  background: transparent;
  image-rendering: auto;
}

/* Arrows: red/blue */
.dl-slider.redblue .slider-btn{
  border:1px solid rgba(255,255,255,.25);
  background: linear-gradient(135deg,var(--hero-blue),var(--hero-blue-d));
  color:#fff;
}
.dl-slider.redblue .slider-btn:hover{
  background: linear-gradient(135deg,var(--hero-blue-d),var(--hero-red));
}

/* Dots: blue inactive, red active */
.dl-slider.redblue .slider-dots button{ background:#7da2ff; opacity:.55; }
.dl-slider.redblue .slider-dots button[aria-current="true"]{
  background: var(--hero-red); opacity:1; transform:scale(1.15);
}

/* Make the viewport respect the slide padding on small screens */
@media (max-width: 780px){
  .dl-slider.contain-images .slide{ padding:6px; }
}
/* ===== Cart Drawer (Red & Blue) ===== */
:root{ --cart-blue:#0f4db1; --cart-blue-d:#173c8d; --cart-red:#e53935; }

.dl-cart{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display:none; z-index: 10000;
}
.dl-cart[aria-hidden="false"]{ display:block; }
.cart-panel{
  position:absolute; right:0; top:0; height:100%; width:min(420px, 92vw);
  background:#0f141d; color:#eaf1ff; border-left:1px solid #1e2b3d;
  box-shadow: -12px 0 36px rgba(0,0,0,.4); padding:18px; overflow:auto;
}
.cart-panel h3{
  margin:0 0 12px; font-weight:900;
  background: linear-gradient(90deg, var(--cart-blue), var(--cart-red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cart-close{
  position:absolute; right:10px; top:8px; width:36px; height:36px;
  border-radius:50%; border:1px solid #2a384d; background:#0f141d; color:#fff; cursor:pointer;
}
.cart-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cart-item{
  display:grid; grid-template-columns: 1fr auto auto auto; gap:10px; align-items:center;
  padding:12px; border:1px solid #1f2b3e; border-radius:12px; background:#111a28;
}
.item-name{ font-weight:700; }
.item-price{ color:#b9c8de; }
.qty{ display:inline-flex; align-items:center; gap:8px; }
.qty button{ width:28px; height:28px; border-radius:6px; border:1px solid #2a3a52; background:#0f1a2a; color:#fff; cursor:pointer; }
.btn-remove{ border:0; background:transparent; color:#f19797; cursor:pointer; font-size:18px; }

.cart-summary{
  margin:12px 0; padding:12px; border:1px solid #1f2b3e; border-radius:12px; background:#0e1826;
}
.cart-summary div{ display:flex; align-items:center; justify-content:space-between; }

#cartCheckout .row{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
#cartCheckout label{ color:#9fb3c9; font-weight:700; }
#cartCheckout input{
  height:44px; border-radius:10px; border:1px solid #2a3a52; background:#0c1422; color:#eaf1ff; padding:0 12px;
}
#cartCheckout input:focus{ outline:none; border-color:var(--cart-blue); box-shadow:0 0 0 3px rgba(15,77,177,.25); }
#cartCheckout .btn-submit{
  width:100%; height:46px; border:0; border-radius:10px; color:#fff;
  background: linear-gradient(135deg, var(--cart-blue), var(--cart-blue-d) 60%, var(--cart-red) 140%);
}
.cart-msg{ margin-top:8px; color:#9fe1c7; min-height:20px; }

/* small cart trigger */
#openCartBtn{ position:fixed; right:16px; bottom:16px; z-index:9999; }
#cartCount{ margin-left:6px; font-weight:800; }

.toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #00c36d;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.35s ease;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}