/* ============================================================
   FILE: css/style.css
   PURPOSE: All visual styling for the JomShuttle website.
            Edit colours, fonts and spacing here.

   QUICK COLOUR GUIDE (change these CSS variables to retheme):
     --blue       : main dark blue (nav, headings)
     --blue-light : bright blue (buttons, links, accents)
     --yellow     : yellow (logo accent, highlights)
     --orange     : orange (prices, hot badges)
     --teal       : teal (gradient accents)
     --green      : WhatsApp green (book now buttons)
   ============================================================ */

/* ---- CSS VARIABLES (global theme colours & sizes) ---- */
:root {
  --blue:        #003580;   /* Main brand dark blue */
  --blue-light:  #006ce4;   /* Bright blue for buttons & links */
  --yellow:      #FFD700;   /* Yellow for logo & highlights */
  --orange:      #FF6B00;   /* Orange for prices & badges */
  --teal:        #009FE3;   /* Teal for gradient accents */
  --green:       #25D366;   /* WhatsApp green */
  --white:       #fff;
  --bg:          #f2f6fe;   /* Light blue-grey page background */
  --text:        #1a1a2e;   /* Main text colour */
  --muted:       #6b7a99;   /* Faded/secondary text */
  --card-bg:     #fff;      /* Card background */
  --radius:      14px;      /* Default border radius */
  --shadow:      0 4px 24px rgba(0,53,128,0.10);       /* Soft card shadow */
  --shadow-hover:0 10px 40px rgba(0,108,228,0.18);     /* Hover card shadow */
}

/* ---- RESET — removes default browser spacing ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- SMOOTH SCROLLING ---- */
html { scroll-behavior: smooth; }

/* ---- BASE BODY ---- */
body {
  font-family: 'Nunito', sans-serif;  /* Main font — change here if needed */
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ============================================================
   NAVIGATION BAR
   ============================================================ */
nav {
  background: var(--blue);
  position: sticky;    /* Stays at top while scrolling */
  top: 0;
  z-index: 999;        /* Always on top of everything */
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
}
.nav-inner {
  max-width: 1200px; margin: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 64px;
}
/* Logo container */
.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  animation: fadeInLeft .6s both;  /* Slides in on load */
}
/* Yellow van icon box in logo */
.logo-icon {
  background: var(--yellow); border-radius: 10px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.logo-text { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.logo-sub  { color: var(--yellow); font-size: .65rem; font-weight: 600; letter-spacing: .04em; display: block; }

/* Desktop nav links */
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; }
.nav-links a {
  color: #e8eeff; text-decoration: none; font-weight: 700; font-size: .92rem;
  padding: 6px 13px; border-radius: 8px; transition: all .2s;
  display: flex; align-items: center; gap: 5px;
}
.nav-links a:hover,
.nav-links a.active { background: var(--blue-light); color: #fff; }

/* "Book Now" button in nav — yellow */
.nav-cta {
  background: var(--yellow) !important;
  color: var(--blue) !important;
  border-radius: 8px !important;
  padding: 7px 16px !important;
  font-weight: 900 !important;
}
.nav-cta:hover { background: #ffe033 !important; transform: scale(1.04); }

/* Hamburger menu button (mobile only) */
.hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; }
.hamburger span { width: 26px; height: 3px; background: #fff; border-radius: 2px; display: block; }

/* Mobile dropdown menu */
.mobile-menu { display: none; background: var(--blue); padding: 0 20px 16px; flex-direction: column; gap: 2px; }
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: #e8eeff; text-decoration: none; font-weight: 700; font-size: .98rem;
  padding: 10px 8px; border-radius: 8px;
  display: flex; align-items: center; gap: 8px; transition: background .2s;
}
.mobile-menu a:hover { background: var(--blue-light); }

/* ============================================================
   PAGE SHOW/HIDE — single page app navigation
   ============================================================ */
.page { display: none; animation: fadeIn .4s both; }
.page.active { display: block; }

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes fadeIn     { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }
@keyframes fadeInUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes pulse      { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  background: linear-gradient(135deg, #003580 0%, #006ce4 50%, #009FE3 100%);
  min-height: 88vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 60px 20px 80px;
}
/* Dot pattern overlay on hero background */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Blurred colour blobs behind hero */
.hero-blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:.25; pointer-events:none; }
.blob1 { width:500px; height:500px; background:#FFD700; top:-100px; right:-100px; animation:float 8s ease-in-out infinite; }
.blob2 { width:300px; height:300px; background:#00897B; bottom:-80px; left:-60px;  animation:float 10s ease-in-out infinite 2s; }

.hero-content { max-width:1200px; margin:auto; width:100%; position:relative; z-index:2; display:flex; gap:50px; align-items:center; }
.hero-left { flex:1; }

/* "Most Trusted" badge above headline */
.hero-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,215,0,.18); border:1.5px solid rgba(255,215,0,.4);
  color:var(--yellow); border-radius:50px; padding:6px 16px;
  font-size:.85rem; font-weight:800; margin-bottom:22px;
  animation: fadeInUp .6s .1s both;
}
.hero h1 {
  font-family:'Poppins',sans-serif; font-weight:800;
  font-size:clamp(2rem, 5vw, 3.4rem);   /* Responsive font size */
  color:#fff; line-height:1.15; margin-bottom:16px;
  animation:fadeInUp .6s .2s both;
}
.hero h1 span { color:var(--yellow); }  /* Highlighted word in headline */
.hero-sub { color:#c8deff; font-size:1.08rem; line-height:1.7; margin-bottom:34px; animation:fadeInUp .6s .3s both; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; animation:fadeInUp .6s .4s both; }

/* Van card on right side of hero */
.hero-right { flex:0 0 380px; animation:fadeInUp .7s .5s both; }
.hero-van {
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.2); border-radius:20px;
  padding:30px; text-align:center;
}
.van-emoji { font-size:90px; display:block; animation:float 6s ease-in-out infinite; }

/* Stats row inside van card */
.hero-stats { display:flex; gap:14px; margin-top:22px; }
.stat { flex:1; background:rgba(255,255,255,.15); border-radius:12px; padding:14px 10px; text-align:center; }
.stat-num { font-family:'Poppins',sans-serif; font-size:1.6rem; font-weight:800; color:var(--yellow); }
.stat-lbl { font-size:.72rem; color:#c8deff; font-weight:700; margin-top:2px; }

/* ============================================================
   SEARCH WIDGET (below hero)
   ============================================================ */
.search-section { background:var(--blue); padding-bottom:0; }
.search-wrap {
  max-width:1200px; margin:auto;
  background:#fff; border-radius:18px 18px 0 0;
  padding:28px 30px 0; margin-top:-30px;
  position:relative; z-index:10;
  box-shadow:0 -8px 40px rgba(0,53,128,.15);
}
.search-tabs { display:flex; gap:6px; margin-bottom:20px; border-bottom:2px solid #e8eeff; }
.search-tab {
  padding:10px 20px; border-radius:10px 10px 0 0;
  font-weight:800; font-size:.92rem; cursor:pointer;
  border:none; background:none; color:var(--muted);
  transition:all .2s; display:flex; align-items:center; gap:6px;
  margin-bottom:-2px;  /* Overlaps the border-bottom */
}
.search-tab.active { background:var(--blue); color:#fff; }
.search-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; padding-bottom:24px; }
.search-field { flex:1; min-width:160px; }
.search-field label {
  font-weight:800; font-size:.8rem; color:var(--blue);
  display:block; margin-bottom:6px;
  text-transform:uppercase; letter-spacing:.04em;
}
.search-field select, .search-field input {
  width:100%; padding:12px 14px; border:2px solid #dde8ff; border-radius:10px;
  font-family:'Nunito',sans-serif; font-size:.97rem; color:var(--text);
  outline:none; background:#f7faff; transition:border .2s; appearance:none;
}
.search-field select:focus, .search-field input:focus { border-color:var(--blue-light); background:#fff; }

/* ============================================================
   GENERAL SECTION LAYOUT
   ============================================================ */
section { padding:60px 20px; }
.container { max-width:1200px; margin:auto; }

/* Section title block with pill badge above heading */
.section-title { text-align:center; margin-bottom:40px; }
.section-title h2 { font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(1.5rem,4vw,2.2rem); color:var(--blue); }
.section-title p  { color:var(--muted); font-size:1.05rem; margin-top:8px; }
.section-title .pill {
  display:inline-block; background:#e8f0ff; color:var(--blue-light);
  padding:4px 14px; border-radius:50px; font-size:.78rem; font-weight:800;
  margin-bottom:10px; letter-spacing:.05em; text-transform:uppercase;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:10px; font-weight:800; font-size:1rem;
  text-decoration:none; transition:all .22s; cursor:pointer;
  border:none; font-family:'Nunito',sans-serif;
}
.btn-primary { background:var(--yellow); color:var(--blue); }
.btn-primary:hover { background:#ffe033; transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,215,0,.35); }
.btn-outline { background:rgba(255,255,255,.12); color:#fff; border:2px solid rgba(255,255,255,.35); }
.btn-outline:hover { background:rgba(255,255,255,.22); transform:translateY(-2px); }
.btn-green { background:#25D366; color:#fff; }
.btn-green:hover { background:#1ebe5a; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.3); }
.btn-blue { background:var(--blue-light); color:#fff; }
.btn-blue:hover { background:#0059cc; transform:translateY(-2px); }
.btn-sm { padding:9px 18px; font-size:.88rem; }  /* Smaller button variant */

/* ============================================================
   DESTINATION CARDS (homepage grid)
   ============================================================ */
.dest-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
.dest-card {
  background:var(--card-bg); border-radius:var(--radius); padding:22px 14px;
  text-align:center; cursor:pointer; border:2px solid transparent;
  transition:all .22s; box-shadow:var(--shadow);
  text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.dest-card:hover { border-color:var(--blue-light); box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.dest-icon { font-size:2rem; }
.dest-name { font-weight:800; font-size:.88rem; color:var(--blue); }
.dest-type { font-size:.72rem; color:var(--muted); }

/* ============================================================
   FEATURES SECTION (Why Choose Us)
   ============================================================ */
.features-bg { background:linear-gradient(135deg,#003580,#006ce4); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:22px; }
.feature-card {
  background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.18); border-radius:16px;
  padding:28px 22px; transition:all .22s;
}
.feature-card:hover { background:rgba(255,255,255,.18); transform:translateY(-4px); }
.feature-icon  { font-size:2.4rem; margin-bottom:14px; }
.feature-title { font-weight:800; font-size:1.05rem; color:#fff; margin-bottom:8px; }
.feature-desc  { color:#c8deff; font-size:.9rem; line-height:1.6; }

/* ============================================================
   TOUR PACKAGE CARDS
   ============================================================ */
.tours-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:24px; }
.tour-card {
  background:var(--card-bg); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow); transition:all .25s; cursor:pointer;
  border:2px solid transparent;
}
.tour-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-6px); border-color:#dde8ff; }
/* Coloured image area at top of card */
.tour-img { height:200px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.tour-img-bg { position:absolute; inset:0; }
.tour-emoji { font-size:80px; position:relative; z-index:1; }
.tour-badge {
  position:absolute; top:14px; left:14px; z-index:2;
  color:#fff; border-radius:8px; padding:4px 10px; font-size:.75rem; font-weight:900;
}
.tour-body   { padding:22px; }
.tour-title  { font-family:'Poppins',sans-serif; font-weight:800; font-size:1.1rem; color:var(--blue); margin-bottom:6px; }
.tour-info   { display:flex; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.tour-tag    { display:flex; align-items:center; gap:4px; font-size:.8rem; color:var(--muted); font-weight:700; }
.tour-price  { font-family:'Poppins',sans-serif; font-size:1.5rem; font-weight:800; color:var(--orange); }
.tour-price span { font-size:.8rem; font-weight:600; color:var(--muted); }

/* ============================================================
   STATE CARDS (All Destinations page)
   ============================================================ */
.state-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px; }
.state-card {
  background:var(--card-bg); border-radius:var(--radius); padding:20px 18px;
  box-shadow:var(--shadow); border:2px solid transparent;
  cursor:pointer; transition:all .22s;
  display:flex; align-items:center; gap:14px;
}
.state-card:hover { border-color:var(--blue-light); box-shadow:var(--shadow-hover); transform:translateY(-3px); }
.state-flag  { font-size:1.8rem; }
.state-name  { font-weight:800; font-size:.95rem; color:var(--blue); }
.state-route { font-size:.76rem; color:var(--muted); margin-top:2px; }
.state-arrow { color:var(--blue-light); font-size:1.1rem; }

/* ============================================================
   HOW IT WORKS — STEPS
   ============================================================ */
.steps { display:flex; gap:0; position:relative; }
/* Horizontal connecting line between steps */
.steps::before {
  content:''; position:absolute; top:34px; left:10%; right:10%; height:3px;
  background:linear-gradient(90deg, var(--blue-light), var(--teal));
  border-radius:2px; z-index:0;
}
.step { flex:1; text-align:center; position:relative; z-index:1; padding:0 10px; }
.step-num {
  width:68px; height:68px; border-radius:50%; background:var(--blue);
  color:#fff; font-family:'Poppins',sans-serif; font-weight:900; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  border:4px solid #fff; box-shadow:0 4px 20px rgba(0,108,228,.3); transition:all .3s;
}
.step:hover .step-num { background:var(--orange); transform:scale(1.1); }
.step-title { font-weight:800; font-size:1rem; color:var(--blue); margin-bottom:6px; }
.step-desc  { font-size:.85rem; color:var(--muted); line-height:1.6; }

/* ============================================================
   GALLERY GRID
   ============================================================ */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px; }
.gallery-item {
  border-radius:14px; overflow:hidden; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  font-size:5rem; transition:all .3s; cursor:pointer;
}
.gallery-item:hover { transform:scale(1.03); box-shadow:var(--shadow-hover); }
/* Individual gradient colours per gallery item */
.gallery-item:nth-child(1) { background:linear-gradient(135deg,#003580,#006ce4); }
.gallery-item:nth-child(2) { background:linear-gradient(135deg,#006ce4,#009FE3); }
.gallery-item:nth-child(3) { background:linear-gradient(135deg,#009FE3,#00897B); }
.gallery-item:nth-child(4) { background:linear-gradient(135deg,#FF6B00,#FFD700); }
.gallery-item:nth-child(5) { background:linear-gradient(135deg,#00897B,#009FE3); }
.gallery-item:nth-child(6) { background:linear-gradient(135deg,#003580,#FF6B00); }

/* ============================================================
   BOOKING FORM FIELDS
   ============================================================ */
.form-field { display:flex; flex-direction:column; }
.form-label {
  font-weight:800; font-size:.8rem; color:var(--blue);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em;
}
.form-input {
  padding:12px 14px; border:2px solid #dde8ff; border-radius:10px;
  font-family:'Nunito',sans-serif; font-size:.97rem; color:var(--text);
  outline:none; background:#f7faff; transition:border .2s; width:100%;
}
.form-input:focus { border-color:var(--blue-light); background:#fff; }
textarea.form-input { resize:vertical; min-height:80px; }

/* ============================================================
   PAGE HEADER BANNER (used on inner pages like Tours, KL)
   ============================================================ */
.page-header {
  background:linear-gradient(135deg,#003580 0%,#006ce4 100%);
  padding:54px 20px 44px; position:relative; overflow:hidden;
}
/* Curved bottom edge of page header */
.page-header::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0; height:40px;
  background:var(--bg); border-radius:40px 40px 0 0;
}
.page-header-inner { max-width:1200px; margin:auto; position:relative; z-index:1; }
.back-btn {
  display:inline-flex; align-items:center; gap:7px;
  color:rgba(255,255,255,.8); font-size:.88rem; font-weight:700;
  background:rgba(255,255,255,.12); border:none; cursor:pointer;
  padding:7px 14px; border-radius:8px; margin-bottom:14px; transition:all .2s;
}
.back-btn:hover { background:rgba(255,255,255,.22); color:#fff; }
.page-header h1 { font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(1.6rem,4vw,2.5rem); color:#fff; }
.page-header .sub { color:#c8deff; font-size:1rem; margin-top:8px; }

/* ============================================================
   BOOKING CARDS (used on KL routes & tour detail pages)
   ============================================================ */
.booking-card {
  background:#fff; border-radius:18px; padding:28px; margin-bottom:18px;
  box-shadow:var(--shadow); border:2px solid transparent; transition:all .22s;
}
.booking-card:hover { border-color:var(--blue-light); box-shadow:var(--shadow-hover); }
.booking-card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; flex-wrap:wrap; gap:12px;
}
.booking-card-title { font-family:'Poppins',sans-serif; font-weight:800; font-size:1.15rem; color:var(--blue); }
.booking-price-big  { font-family:'Poppins',sans-serif; font-size:2rem; font-weight:900; color:var(--orange); }
.booking-price-big span { font-size:.85rem; font-weight:600; color:var(--muted); }

/* Capacity tags (e.g. "7–13 pax with luggage") */
.capacity-tags { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.cap-tag {
  background:#e8f0ff; color:var(--blue); border-radius:8px;
  padding:7px 14px; font-size:.85rem; font-weight:800;
  display:flex; align-items:center; gap:6px;
}

/* ============================================================
   ITINERARY (tour detail pages)
   ============================================================ */
.itin-day { margin-bottom:22px; }
.itin-day-title {
  background:var(--blue); color:#fff; border-radius:8px;
  padding:8px 16px; font-weight:800; font-size:.92rem; margin-bottom:10px;
  display:inline-flex; align-items:center; gap:8px;
}
/* Timeline line on the left of items */
.itin-items { display:flex; flex-direction:column; gap:6px; padding-left:12px; border-left:3px solid #e8eeff; }
.itin-item  { font-size:.9rem; color:var(--text); line-height:1.6; padding:4px 0; }

/* ============================================================
   FLOATING WHATSAPP BUTTON (bottom right corner, always visible)
   ============================================================ */
.wa-float {
  position:fixed; bottom:28px; right:24px; z-index:9999;
  background:#25D366; color:#fff; width:62px; height:62px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; box-shadow:0 6px 28px rgba(37,211,102,.5);
  cursor:pointer; text-decoration:none;
  animation:pulse 2.5s ease-in-out infinite;
  transition:transform .2s;
}
.wa-float:hover { transform:scale(1.12) !important; animation:none; }
/* Tooltip that appears on hover */
.wa-tooltip {
  position:absolute; right:72px; top:50%; transform:translateY(-50%);
  background:var(--blue); color:#fff; padding:7px 14px; border-radius:10px;
  font-size:.82rem; font-weight:700; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.wa-float:hover .wa-tooltip { opacity:1; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:#001f4d; color:#8aa4cc; padding:52px 20px 24px; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px;
  max-width:1200px; margin:auto; margin-bottom:36px;
}
.footer-brand p { color:#8aa4cc; font-size:.9rem; line-height:1.7; margin-top:12px; }
.footer-col h4  { color:#fff; font-weight:800; margin-bottom:16px; font-size:.95rem; }
.footer-col a, .footer-col span {
  display:block; color:#8aa4cc; text-decoration:none;
  font-size:.88rem; margin-bottom:8px; transition:color .2s; cursor:pointer;
}
.footer-col a:hover { color:var(--yellow); }
.footer-bottom {
  border-top:1px solid #003580; padding-top:20px;
  text-align:center; font-size:.82rem; color:#5a7499;
  max-width:1200px; margin:auto;
}
.footer-hours { background:var(--blue-light); color:#fff; border-radius:10px; padding:14px 16px; margin-top:14px; }
.footer-hours .h-num { font-size:1.1rem; font-weight:900; }

/* ============================================================
   RESPONSIVE — TABLET (max 900px)
   ============================================================ */
@media(max-width:900px) {
  .hero-content  { flex-direction:column; }        /* Stack hero vertically */
  .hero-right    { flex:none; width:100%; max-width:380px; }
  .steps         { flex-direction:column; gap:20px; }
  .steps::before { display:none; }                  /* Hide connecting line */
  .footer-grid   { grid-template-columns:1fr 1fr; }
  .tours-grid    { grid-template-columns:1fr; }
}

/* ============================================================
   RESPONSIVE — MOBILE (max 640px)
   ============================================================ */
@media(max-width:640px) {
  .nav-links   { display:none; }           /* Hide desktop nav, show hamburger */
  .hamburger   { display:flex; }
  .hero        { padding:40px 16px 60px; }
  .hero h1     { font-size:1.9rem; }
  .search-wrap { padding:20px 16px 0; }
  .search-row  { flex-direction:column; }  /* Stack search fields vertically */
  .dest-grid   { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1fr; }
  .state-grid  { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .gallery-grid  { grid-template-columns:1fr 1fr; }
  .hero-stats    { flex-direction:column; gap:8px; }
  .hero-stats .stat { display:flex; align-items:center; gap:12px; }
  /* Stack booking form grid on mobile */
  .booking-card div[style*="grid-template-columns:1fr 1fr"],
  .booking-card div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
/* ============================================================
   END OF style.css
   ============================================================ */