:root {
  --navy: #0A2342;         /* deep navy */
  --ink: #1b214a;          /* brand dark */
  --violet: #3b2e7a;       /* brand violet */
  --sky: #5aa2ff;          /* light blue accent */
  --aqua: #1FC3C8;         /* aqua accent */
  /* Washmart + Practo inspired */
  --brand-blue: #0f66dc;   /* royal blue */
  --brand-cyan: #14bef0;   /* practo cyan */
  --brand-ink: #1b2a4a;    /* dark ink for text */
  --silver: #C0C0C0;
  --silver-80: rgba(192, 192, 192, 0.8);
  --silver-70: rgba(192, 192, 192, 0.7);
}

body {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  color: #101418;
}

h1, h2, h3, h4, h5, h6, .navbar-brand strong {
  font-family: 'Poppins', sans-serif;
}

.bg-navy { background: linear-gradient(90deg, var(--ink) 0%, var(--navy) 45%, var(--violet) 100%); }
.text-aqua { color: var(--aqua) !important; }
.bg-aqua { background-color: var(--aqua) !important; }
.text-silver-80 { color: var(--silver-80) !important; }
.text-silver-70 { color: var(--silver-70) !important; }

.btn-gradient-primary {
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan));
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px rgba(15, 102, 220, 0.25);
  transition: box-shadow 180ms ease, transform 180ms ease, filter 180ms ease;
}
.btn-gradient-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(20, 190, 240, 0.28);
}

/* Outline primary aligned to brand */
.btn-outline-primary {
  color: var(--brand-blue);
  border-color: rgba(15,102,220,0.35);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow: 0 8px 20px rgba(15, 102, 220, 0.24);
}

.brand-logo { height: 44px; width: auto; display: block; }
.brand-title { color: var(--brand-blue); letter-spacing: 0.2px; }
.brand-tagline { color: #556070; }
.brand-stack { padding-top: 2px; padding-bottom: 2px; }

.pt-7 { padding-top: 6rem; }
.py-6 { padding: 4.5rem 0; }
.bg-glass { backdrop-filter: blur(6px); background: rgba(255,255,255,0.65); }

/* Hero Visual */
.hero { background: radial-gradient(1200px 400px at 80% -20%, rgba(31,195,200,0.15), transparent), linear-gradient(180deg, rgba(10,35,66,0.1), transparent 40%); }
.shimmer { position: relative; overflow: hidden; border-radius: 1rem; background: linear-gradient(100deg, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.4) 40%, rgba(255,255,255,0.2) 60%); background-size: 200% 100%; animation: shimmer 2.5s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.hero-visual-layer { position: relative; width: 100%; height: 100%; }
.van { position: absolute; bottom: 12%; left: 6%; font-size: 40px; color: var(--navy); }
.path-animation { animation: drive 6s linear infinite; }
@keyframes drive { 0% { transform: translateX(0); } 50% { transform: translateX(70%); } 100% { transform: translateX(0); } }
.ripples::before, .ripples::after { content: ""; position: absolute; width: 140px; height: 140px; border: 2px solid rgba(31,195,200,0.35); border-radius: 50%; top: 20%; right: 10%; animation: ripple 5s ease-in-out infinite; }
.ripples::after { width: 200px; height: 200px; top: 10%; right: 5%; animation-delay: 1.2s; }
@keyframes ripple { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.2); opacity: 0.2; } }

.icon-lg { font-size: 32px; }
.icon-xl { font-size: 40px; }

.service-card.highlight { border: 1px solid rgba(31,195,200,0.4); box-shadow: 0 10px 30px rgba(31,195,200,0.15); }

/* Align service card buttons at bottom */
.service-card .card-body { display: flex; flex-direction: column;box-shadow: 0px 0px 10px 0px #0000004d;
} 
.service-card .btn { margin-top: auto; }

/* Desktop/tablet: center buttons */
@media (min-width: 576px) {
  .service-card .btn { align-self: center; }
}

/* Mobile: full-width buttons */
@media (max-width: 575.98px) {
  .service-card .btn { align-self: stretch; width: 100%; }
}

/* Technology section background */
.tech-bg { background: linear-gradient(180deg, #f7f8fa, #eef5f7); }
.tech-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 10%, rgba(31,195,200,0.08), transparent 40%), radial-gradient(circle at 80% 30%, rgba(10,35,66,0.07), transparent 35%); pointer-events: none; }

/* Gallery tiles */
.gallery-tile { height: 160px; border-radius: 1rem; background: linear-gradient(135deg, #e8eef2, #f6f8fa); position: relative; overflow: hidden; }
.gallery-tile::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(closest-side, rgba(31,195,200,0.15), transparent); transform: translate(25%, -15%); filter: blur(10px); }

/* WhatsApp FAB */
.whatsapp-fab { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; display: grid; place-items: center; z-index: 1050; box-shadow: 0 10px 20px rgba(16,20,24,0.25); }

/* Navbar link active on scroll */
.navbar .nav-link.active { color: var(--brand-blue) !important; }

/* Practo-like clean, sticky white header */
.navbar-modern { border-bottom: 1px solid rgba(15,102,220,0.08); box-shadow: 0 6px 20px rgba(10, 25, 41, 0.06); }
.navbar-modern .nav-link { color: #27364b; font-weight: 500; }
.navbar-modern .nav-link:hover { color: var(--brand-blue); }
.navbar-modern .navbar-brand .brand-title { color: var(--brand-blue); }

/* Clean dropdown styling */
.dropdown-menu-clean { border: 1px solid rgba(15,102,220,0.12); box-shadow: 0 18px 48px rgba(0,0,0,0.10); border-radius: 12px; padding: 8px; }
.dropdown-menu-clean .dropdown-item { border-radius: 8px; padding: 8px 12px; }
.dropdown-menu-clean .dropdown-item:hover { background-color: rgba(20,190,240,0.08); color: var(--brand-blue); }
.dropdown-menu-clean .dropdown-header { font-size: 0.74rem; color: #6b7a90; text-transform: uppercase; font-weight: 700; padding: 6px 12px; }
.dropdown-menu-clean .dropdown-divider { margin: 6px 8px; }

/* Card elevation for visibility */
.card { box-shadow: 0 6px 22px rgba(16, 24, 40, 0.06); transition: box-shadow 180ms ease, transform 180ms ease; }
.card:hover { box-shadow: 0 12px 34px rgba(16, 24, 40, 0.10); }
.service-card.card { box-shadow: 0 10px 28px rgba(20, 190, 240, 0.12); }
.service-card.card.highlight { box-shadow: 0 14px 36px rgba(20, 190, 240, 0.18); }

/* Hero visual card */
.hero-visual.card { box-shadow: 0 16px 48px rgba(15, 102, 220, 0.15); }

/* Gallery tiles subtle depth */
.gallery-tile { box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06); }

/* Tables elevation */
table.table { box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08); }

/* Modal */
.modal-content { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); border: 0; }
.auth-modal { border-radius: 16px; }
.auth-modal .nav-pills .nav-link { background: #f3f7ff; color: #29405a; border-radius: 999px; padding: 8px 14px; }
.auth-modal .nav-pills .nav-link.active { background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); color: #fff; box-shadow: 0 8px 22px rgba(15,102,220,0.25); }
.auth-modal .input-group-text { background-color: #f3f6fb; color: #52637a; border: 1px solid #e4e9f1; }
.auth-modal .form-control { border: 1px solid #e4e9f1; }
.auth-modal .form-control:focus { border-color: rgba(15,102,220,0.5); box-shadow: 0 0 0 .25rem rgba(20,190,240,.15); }
/* Beautiful/easier form helpers */
.input-elevated { box-shadow: 0 4px 16px rgba(16,24,40,0.04); }
.form-hint { color: #6b7a90; }

/* Tables */
table.table { border-radius: 12px; overflow: hidden; }

/* Utility links */
a.link-light:hover { color: var(--aqua) !important; }

/* 3D Services Cards */
#services .row { perspective: 1000px; }
.service-card.card { border-radius: 16px; transform-style: preserve-3d; transition: transform 220ms ease, box-shadow 220ms ease; will-change: transform; }
.service-card.card:hover { box-shadow: 0 24px 60px rgba(20, 190, 240, 0.25), 0 10px 30px rgba(16,24,40,0.12); }
.service-card.card::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0)); opacity: 0; transition: opacity 220ms ease; pointer-events: none; }
.service-card.card:hover::before { opacity: 1; }
.service-card .icon-lg { transform: translateZ(24px); }
.service-card h5 { transform: translateZ(18px); }
.service-card p { transform: translateZ(12px); }
.service-card .btn { transform: translateZ(28px); }

/* When JS sets tilt variables */
.service-card.card { --rx: 0deg; --ry: 0deg; }
.service-card.card.tilted { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) scale(1.01); }

@media (prefers-reduced-motion: reduce) {
  .service-card.card,
  .service-card.card:hover { transition: none; transform: none !important; }
}

/* Header booking form */
.header-booking { background: #ffffff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 18px 48px rgba(16, 24, 40, 0.10); }
.header-booking .form-control, .header-booking .form-select { height: 46px; }
.header-booking .form-label { color: #516070; }

/* Attractive promo band */
.attract-band { position: relative; background: linear-gradient(90deg, rgba(15,102,220,1) 0%, rgba(20,190,240,1) 100%); overflow: hidden; }
.attract-band::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 60%); transform: translate(30%, -10%); filter: blur(20px); pointer-events: none; }
.attract-band .btn { box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.attract-stats i { color: #ffd166; }
.feature-pill { display: none; }
.attract-visual { box-shadow: 0 24px 64px rgba(10, 25, 41, 0.22); border-radius: 20px; padding: 6px; background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.18)); }


/* Pickup section */
.pickup-card { border: 1px solid rgba(15,102,220,0.12); border-radius: 16px; }
.pickup-card .form-control, .pickup-card .form-select { border: 1px solid #e4e9f1; }
.pickup-card .form-control:focus, .pickup-card .form-select:focus { border-color: rgba(15,102,220,0.5); box-shadow: 0 0 0 .25rem rgba(20,190,240,.15); }