/* ================================= */
/* ROOT VARIABLES */
/* ================================= */

html{
scroll-behavior:smooth;
}

*:focus{
outline:none;
}

body{
caret-color: transparent;
overflow-x:hidden;
}

:root {

/* BANNER */

--banner-height: 150px;
--banner-padding-x: 40px;
--banner-gap: 24px;

--logo-height: 120px;
--logo-text-height: 150px;

--banner-link-size: 18px;
--banner-border-width: 2px;
--banner-border-color: white;

/* HERO */

--hero-title-size: 90px;
--hero-gap: 50px;
--hero-image-width: 530px;


/* TAGLINE */

--tagline-size: 70px;

/* FONTS */

--font-primary: "The Youngest", sans-serif;
--font-secondary: Georgia, "Times New Roman", serif;

/* COLORS */

--color-background: #C5D6FF;
--color-text: #111;
--color-white: #ffffff;
--color-box: #ffffff;
--color-border: #000;


/* TYPOGRAPHY */

--font-main: Georgia, "Times New Roman", serif;
--font-sans: Arial, Helvetica, sans-serif;

--font-title: 114px;
--font-subtitle: 70px;
--font-section: 80px;
--font-paragraph: 22px;
--font-list-title: 30px;
--font-list-description: 18px;
--font-number: 40px;


/* LAYOUT */

--page-width: 1200px;
--section-spacing: 100px;
--content-gap: 40px;

/* IMAGE STYLE */

--image-radius: 20px;

/* BOX STYLE */

--box-radius: 20px;
--box-padding: 40px;
--box-border: 2px solid var(--color-border);

/* ========= BOOKING THEME ========= */
--rr-section-bg: #111111;
--rr-text: #FFF8F8;

--rr-input-bg: #1a1a1a;
--rr-input-text: #FFF8F8;
--rr-placeholder: rgba(255,255,255,0.45);
--rr-border: #333333;

--rr-accent: #f5cb5c;
--rr-accent-hover: #ffd66b;
--rr-error: #ff7b7b;

/* ========= BOOKING LAYOUT CONTROLS ========= */
--booking-card-max-width: 920px;
--booking-card-radius: 22px;
--booking-form-max-width: 900px;

--booking-input-radius: 0.4rem;
--booking-input-pad-y: 0.55rem;
--booking-input-pad-x: 0.70rem;

--booking-focus-bg: #1e1e1e;
--booking-focus-border: #366ED8;
--booking-focus-glow: rgba(54,110,216,0.35);

--booking-filled-bg: #1a1a1a;
--booking-filled-border: #333333;
--booking-filled-text: #FFF8F8;

--booking-date-icon-filter: invert(1);

/* ========= CALENDAR CONTROLS ========= */
--calendar-day-size: 44px;
--calendar-gap: 0.4rem;
--calendar-pad: 1rem;

--booking-right-col-width: 380px;

--calendar-box-width: calc(
  (7 * var(--calendar-day-size)) +
  (6 * var(--calendar-gap)) +
  (2 * var(--calendar-pad)) + 2px
);

  /* Control for: how wide the black card can be */
  --booking-card-max: 980px;

  /* Control for: card padding (inside black box) */
  --booking-card-pad-y: 1rem;
  --booking-card-pad-x: 1rem;

  --booking-card-pad-top: 1.5rem;
  --booking-card-pad-right: 2rem;
  --booking-card-pad-bottom: 0rem;
  --booking-card-pad-left: 2rem;

  /* Control for: space outside card (section padding) */
  --booking-section-pad-y: 0rem;

  /* Control for: gap between LEFT and RIGHT columns */
  --booking-col-gap: 1.3rem;

  /* Control for: right column width (makes right inputs shorter) */
  --booking-right-width: 420px;

  /* Control for: vertical spacing between stacked items */
  --booking-stack-gap: 1rem;

  /* Calendar sizing */
  --cal-day: 38px;     /* Control for: day square size */
  --cal-gap: 0.4rem;   /* Control for: spacing between day squares */
  --cal-pad: 1rem;     /* Control for: padding inside calendar box */

  /* Inputs */
  --booking-input-pad-y: 0.70rem;
  --booking-input-pad-x: 0.85rem;
  --booking-input-radius: 12px;
  --booking-textarea-minh: 88px;

  /* Control for: minimum calendar grid height so card DOES NOT JUMP while loading */
  --cal-grid-minh: calc((6 * var(--cal-day)) + (5 * var(--cal-gap)));


  /* ABOUT US social icons */
  --about-social-icon-size: 28px;
  --about-social-icon-gap: 18px;

  /* Itinerary */
  --itinerary-collapsed-count: 6;



  /* REVIEWS */
  --color-card-bg: #ffffff;            /* card background */
  --color-card-border: #dddddd;        /* card border */
  --color-card-meta: #666666;          /* card meta text */
  --color-about-text: #ffffff;         /* about section text */
  --width-review-card: 340px;
  --height-review-card-min: 420px;
  --radius-review-card: 16px;
  --gap-review-cards: 40px;
  --shadow-review-card: 0 8px 24px rgba(0,0,0,0.12);

  --font-size-review-card-h3: 20px;
  --font-size-body-small: 15px;
  --font-size-small: 13px;

  --page-side-padding: 40px;

}



/* ================================= */
/* GLOBAL RESET */
/* ================================= */

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

body{

font-family:var(--font-primary);
color:var(--color-text);

background:
linear-gradient(
90deg,
#C5D6FF 0%,
#E6EEFF 40%,
#E6EEFF 60%,
#C5D6FF 100%
);

}



/* ================================= */
/* GENERAL SECTION LAYOUT */
/* ================================= */

section{

max-width: var(--page-width);
margin: var(--section-spacing) auto;

padding-left: 40px;
padding-right: 40px;

}



/* ================================= */
/* BANNER */
/* ================================= */

.banner{
height:var(--banner-height);

display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;

max-width:var(--page-width);
margin:auto;

padding:0 40px;

position:relative;
}

.banner::after{

content:"";

position:absolute;
left:50%;
transform:translateX(-50%);

bottom:0;

width:100vw;
height:2px;

background:white;

}

/* LOGO */

.logo svg{
height:var(--logo-height);
width:auto;
display:block;
}



/* CENTER TITLE */

.logo-text{

display:flex;
justify-content:center;

}

.logo-text svg{
height:var(--logo-text-height);
width:auto;
}



/* ABOUT LINK */

.banner-nav{

display:flex;
justify-content:flex-end;
gap:20px;
}

.banner-nav a{

font-family:var(--font-primary);
font-size:var(--banner-link-size);

text-decoration:none;
color:var(--color-text);

font-weight:400;

}

.banner-nav a:hover{
font-weight:700;
}


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

.hero{

display:grid;
grid-template-columns: 1fr auto;

align-items:center;

gap:var(--hero-gap);

max-width:var(--page-width);
margin:80px auto;

}

.hero h1{

font-family:var(--font-primary);
font-size:var(--hero-title-size);
line-height:1.05;

}

.hero-image img{

width:var(--hero-image-width);
border-radius:var(--image-radius);

}


/* ================================= */
/* TAGLINE */
/* ================================= */

.tagline{

margin-top: 60px;

}

.tagline h2{

font-family:var(--font-primary);
font-size:var(--tagline-size);

line-height:1.15;

}



/* ================================= */
/* DESCRIPTION */
/* ================================= */

.description{
margin-top: -120px;
display:grid;
grid-template-columns: 1.3fr 1fr;

gap:var(--content-gap);
align-items:center;

}

.description p{

font-size:var(--font-paragraph);
line-height:1.6;

}

.description-image img{

width:100%;
border-radius:var(--image-radius);

}



/* ================================= */
/* SECTION TITLES */
/* ================================= */

.section-title{

font-size:var(--font-section);

margin-bottom:40px;

}



/* ================================= */
/* WHAT YOU'LL SEE */
/* ================================= */

.see-gallery{

display:grid;
grid-template-columns: 1fr 1fr 1fr;

gap:20px;

}

.gallery-left{
display:grid;
grid-template-rows:1fr 1fr;
gap:20px;
}

.gallery-center img,
.gallery-right img{
display:block;
height:100%;
width:100%;
object-fit:cover;
border-radius:var(--image-radius);
transition:transform 0.25s ease;
}

.gallery-left img{
display:block;
width:100%;
height:100%;
object-fit:cover;
border-radius:var(--image-radius);
transition:transform 0.25s ease;
}

.see-gallery img:hover{
transform:scale(1.05);
}

.gallery-modal{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;

background:rgba(0,0,0,0.75);
backdrop-filter:blur(8px);

display:none;
justify-content:center;
align-items:center;

z-index:1000;
}

.gallery-modal-content{
display:flex;
gap:40px;
overflow-x:auto;
padding:40px;
max-width:100vw;
scrollbar-width:none;
align-items:center;
}

.gallery-modal-content::-webkit-scrollbar{
display:none;
}

.gallery-modal img{
max-height:85vh;
max-width:calc(100vw - 120px);

object-fit:contain;

border-radius:var(--image-radius);
flex-shrink:0;
}

.gallery-close{
position:absolute;
top:30px;
right:40px;
font-size:40px;
color:white;
cursor:pointer;
}

.gallery img,
.stops-box,
.review-card {
  transform: translateZ(0);
  will-change: transform;
}

.gallery img,
.stops-box,
.review-card {
  transform: translateZ(0);
  will-change: transform;
}

/* ================================= */
/* TOUR STOPS */
/* ================================= */

.stops-box{

background:var(--color-box);

border:var(--box-border);
border-radius:var(--box-radius);

padding:var(--box-padding);

display:flex;
flex-direction:column;

gap:30px;

}

.stop{

display:flex;
gap:25px;

}

.stop-number{

font-size:var(--font-number);
font-weight:bold;

min-width:60px;

}

.stop-text h3{

font-size:var(--font-list-title);

margin-bottom:6px;

}

.stop-text p{

font-size:var(--font-list-description);
line-height:1.4;

}



/* ================================= */
/* BOOKING */
/* ================================= */

/* =========================================================
   BOOKING SECTION — FINAL (single source of truth)
   ========================================================= */

/* =========================
   Section wrapper
   ========================= */
.booking-section{
  padding: var(--booking-section-pad-y) 0rem; /* Control for: outer margins above/below card */
  background: var(--color-bg);
  font-family: var(--font-family-base);
}

/* Center the card and prevent full-width stretching */
.booking-wrap{
  max-width: var(--booking-card-max); /* Control for: card overall max width */
  margin: 0 auto;                     /* centers */
  justify-content: center;
  display: flex;
}

/* =========================
   Main card
   ========================= */
#booking-form.booking-form{
  max-width: var(--booking-card-max); /* Safety: stops full-width */
  margin: 0 auto;                     /* centers */
  background: var(--rr-section-bg, #0b0b0b);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 26px;
  padding: var(--booking-card-pad-top) var(--booking-card-pad-right) var(--booking-card-pad-bottom) var(--booking-card-pad-left);
  box-shadow: 0 16px 45px rgba(0,0,0,0.35);
  color: var(--rr-text, #f1f1f1);
  width: fit-content;   /* card hugs the grid */
}

/* =========================
   Title block (restored)
   ========================= */
#booking-form .booking-head{
  text-align: center;
  margin-bottom: 1.2rem; /* Control for: space under title block */
}

#booking-form .booking-title{
  margin: 0;
  font-size: 2.0rem;
  font-weight: 900;
  letter-spacing: 0.2px;
}

#booking-form .booking-subtitle{
  margin: 0.35rem 0 0;
  opacity: 0.9;
  font-size: 1.0rem;
}

#booking-form .booking-meta{
  margin: 0.35rem 0 0;
  opacity: 0.7;
  font-size: 0.9rem;
}

/* =========================
   Grid layout
   ========================= */
#booking-form .booking-grid{
  display: grid;

  /* Control for: left hugs calendar, right is fixed */
  grid-template-columns: max-content var(--booking-right-width);

  /* Control for: middle space between columns */
  column-gap: var(--booking-col-gap);

  row-gap: 1rem;
  align-items: start;
}

/* Columns */
#booking-form .booking-left,
#booking-form .booking-right{
  display: flex;
  flex-direction: column;
  gap: var(--booking-stack-gap);
}

#booking-form .rr-full{ grid-column: 1 / -1; }

/* =========================
   Labels
   ========================= */
#booking-form .form-field label{
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  opacity: 0.95;
  color: var(--rr-text, #f1f1f1);
}

/* =========================
   Inputs (dark boxes) — force override
   ========================= */
#booking-form .form-field input,
#booking-form .form-field textarea{
  width: 100%;
  background: var(--rr-input-bg, rgba(255,255,255,0.04)) !important;
  border: 1px solid var(--rr-border, rgba(255,255,255,0.12)) !important;
  border-radius: var(--booking-input-radius);
  padding: var(--booking-input-pad-y) var(--booking-input-pad-x);
  color: var(--rr-input-text, #f3f3f3) !important;
  font: inherit;
  outline: none;
  box-shadow: none;
}

/* Fix: “Name becomes white after typing” (usually browser autofill / global :valid styles) */
#booking-form input:valid,
#booking-form textarea:valid{
  background: var(--rr-input-bg, rgba(255,255,255,0.04)) !important;
  color: var(--rr-input-text, #f3f3f3) !important;
}

#booking-form input:-webkit-autofill,
#booking-form input:-webkit-autofill:hover,
#booking-form input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--rr-input-text, #f3f3f3) !important;
  box-shadow: 0 0 0 1000px var(--rr-input-bg, rgba(255,255,255,0.04)) inset !important;
  transition: background-color 999999s ease-out 0s;
}

#booking-form .form-field textarea{
  resize: vertical;
  min-height: var(--booking-textarea-minh);
}

#booking-form .form-field input::placeholder,
#booking-form .form-field textarea::placeholder{
  color: var(--rr-placeholder, rgba(255,255,255,0.45));
  opacity: 1;
}

#booking-form .form-field input:focus,
#booking-form .form-field textarea:focus{
  border-color: var(--booking-focus-border, rgba(246,209,105,0.9));
  box-shadow: 0 0 0 4px var(--booking-focus-glow, rgba(246,209,105,0.18));
}

/* Hide number arrows */
#booking-form input[type="number"]::-webkit-outer-spin-button,
#booking-form input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
#booking-form input[type="number"]{ -moz-appearance: textfield; }

/* =========================
   Guests width = calendar width
   ========================= */
#booking-form .rr-calendar{
  width: calc((7 * var(--cal-day)) + (6 * var(--cal-gap)) + (2 * var(--cal-pad)) + 2px);
}
#booking-form input#guests{
  width: calc((7 * var(--cal-day)) + (6 * var(--cal-gap)) + (2 * var(--cal-pad)) + 2px);
  max-width: calc((7 * var(--cal-day)) + (6 * var(--cal-gap)) + (2 * var(--cal-pad)) + 2px);
}

/* Force vertical stacking on right */
#booking-form .booking-right .form-row-2{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--booking-stack-gap);
}

/* =========================
   Calendar
   ========================= */
#booking-form .rr-calendar{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  padding: var(--cal-pad);
}

#booking-form .rr-cal-header{
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  margin-bottom: 0.7rem;
}

#booking-form .rr-cal-title{
  text-align: center;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--rr-text, #fff);
}

#booking-form .rr-cal-nav{
  width: 38px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.30);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
}

#booking-form .rr-cal-weekdays{
  display: grid;
  grid-template-columns: repeat(7, var(--cal-day));
  gap: var(--cal-gap);
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
}
#booking-form .rr-cal-weekdays > div{ text-align: center; }

/* IMPORTANT: fixed min-height so it doesn’t collapse before data arrives */
#booking-form .rr-cal-grid{
  display: grid;
  grid-template-columns: repeat(7, var(--cal-day));
  gap: var(--cal-gap);
  min-height: var(--cal-grid-minh); /* Control for: no layout jump on load */
}

#booking-form .rr-cal-day{
  width: var(--cal-day);
  height: var(--cal-day);
  border-radius: 10px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Disabled days (closed / full / past) */
#booking-form .rr-cal-day.is-blank{ visibility: hidden; }
#booking-form .rr-cal-day.is-past{ opacity: 0.25; cursor: not-allowed; }
#booking-form .rr-cal-day.is-disabled{ opacity: 0.45; cursor: not-allowed; filter: saturate(0.9); }

#booking-form .rr-cal-day.is-open{
  background: #78d37a;
  border-color: #78d37a;
  color: #0a0a0a;
}

#booking-form .rr-cal-day.is-closed{
  background: #ea6b6b;
  border-color: #ea6b6b;
  color: #0a0a0a;
}

#booking-form .rr-cal-day.is-selected{
  outline: 2px solid rgba(246,209,105,0.9);
  outline-offset: 2px;
}

/* Legend */
#booking-form .rr-cal-legend{
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.7rem;
  font-size: 0.9rem;
}
#booking-form .legend-item{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  opacity: 0.95;
}
#booking-form .legend-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
#booking-form .legend-dot.available{ background: #78d37a; }
#booking-form .legend-dot.unavailable{ background: #ea6b6b; }

#booking-form .rr-cal-selected{
  margin-top: 0.5rem;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* Loading state (optional subtle) */
#booking-form .rr-calendar.is-loading .rr-cal-grid{
  opacity: 0.75;
}

/* =========================
   Notes / Consent / Button
   ========================= */
#booking-form .tour-time-note{
  margin-top: 0.6rem;
  text-align: left;
  font-size: 1.0rem;
  opacity: 0.9;
}

#booking-form .form-consent{
  margin-top: 0.35rem;
  text-align: left;
}

#booking-form .checkbox-label{
  display: inline-flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 1.0rem;
}
#booking-form .checkbox-label input{
  accent-color: #f6d169;
  margin-top: 0.2rem;
}

/* Submit */
#booking-form .booking-submit{
  display: block;
  margin: 1.0rem auto 0;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  border: none;
  background: var(--rr-accent, #f6d169);
  color: #111;
  font-weight: 900;
  cursor: pointer;
}

#booking-form .booking-message{
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.95rem;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px){
  :root{ --booking-right-width: 1fr; }

  #booking-form .booking-grid{
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  #booking-form .rr-calendar,
  #booking-form input#guests{
    width: 100%;
    max-width: 100%;
  }

  #booking-form .rr-cal-weekdays,
  #booking-form .rr-cal-grid{
    grid-template-columns: repeat(7, 1fr);
  }

  #booking-form .rr-cal-day{
    width: 100%;
    height: 42px;
  }
}

#rr-cal-grid.is-loading { pointer-events: none; }



/* ================================= */
/* HOW IT WORKS */
/* ================================= */

.how-box{

background:var(--color-box);

border:var(--box-border);
border-radius:var(--box-radius);

padding:var(--box-padding);

font-size:var(--font-paragraph);

line-height:1.6;

}



/* ================================= */
/* REVIEWS */
/* ================================= */

/* FULL-WIDTH track, but start aligned with the title */
.reviews-fullwidth{
  width: 100%;
  margin-left: 0;          /* aligns with title because section padding handles left edge */
  overflow: visible;
}

/* Track: scrollable row */
.reviews-track{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap-review-cards);

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory; /* smoother than mandatory */
  /* symmetric center padding */
scroll-padding-left: calc((100% - var(--width-review-card)) / 2);
scroll-padding-right: calc((100% - var(--width-review-card)) / 2);

padding: 0 0 32px 0;

  margin: 0;

  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar{ display:none; }




/* Cards */
.review-card{
  flex: 0 0 var(--width-review-card);
  min-height: var(--height-review-card-min);
  background: var(--color-card-bg);
  border-radius: var(--radius-review-card);
  box-shadow: var(--shadow-review-card);
  padding: 18px 20px 16px;

  display: flex;
  flex-direction: column;

  scroll-snap-align: center;
}

/* Stars evenly spaced */
.review-stars{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.review-stars img{
  display: block;
  width: 18px;
  height: 18px;
}

.review-card h3{
  font-size: var(--font-size-review-card-h3);
  margin-bottom: 4px;
}

.review-rule{
  border: none;
  border-top: 1px solid var(--color-card-border);
  margin: 10px 0 12px;
}

.review-text{
  flex: 1;
  font-size: var(--font-size-body-small);
  line-height: 1.4;
  overflow: hidden;
  margin-bottom: 10px;
}

/* Expand (DESKTOP): LONGER (taller), not wider — match mobile behavior */
.review-card.is-expanded{
  height: auto;
  min-height: var(--height-review-card-min);
  flex: 0 0 var(--width-review-card);
  max-width: var(--width-review-card);
}
.review-card.is-expanded .review-text{
  overflow: visible;                    /* full text visible */
  display: block;
}

.review-more{
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 8px;

  font: inherit;
  text-decoration: none;   /* kill underline */
  cursor: pointer;
}

.review-meta{
  font-size: var(--font-size-small);
  color: var(--color-card-meta);
  text-align: right;
}




/* ===========================
   ABOUT US (FINAL)
   =========================== */

.about-banner {
  background-image: url("../images/aboutUs_background_v1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #ffffff;
  padding: 90px 0 35px;

  /* override global section constraints */
  max-width:none;
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  
  margin-bottom: -80px;
}



.about-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-side-padding);

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.about-text-block h2 {
  color: #ffffff;
  margin-bottom: 16px;
}

.about-text-block-text{
  color: #ffffff;
  line-height: 1.55;
  max-width: var(--about-text-width);
}

.about-social-row {
  width: var(--about-text-width);
  margin: 22px 0 18px;
  display: flex;
  justify-content: space-between; /* uniform spacing across full row */
  align-items: center;
  gap: 0;                         /* spacing controlled by space-between */
  flex-wrap: nowrap;              /* keep one row on desktop */
}

.about-social-row img {
  width: var(--about-social-icon-size);
  height: var(--about-social-icon-size);
  filter: invert(1);
  opacity: 0.9;
}

.about-contact,
.about-contact a {
  color: #ffffff;
}

.about-contact{
  max-width: 520px; /* match about paragraph */
  text-align: center;
}

.about-contact{
  max-width: var(--about-text-width);
  text-align: center;
}

.about-logo-block {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-logo-img {
  max-width: 280px;
  width: 100%;
}

/* COPYRIGHT */
.about-footer {
  text-align: center;
  margin-top: 30px;
  font-size: 0.9rem;
  opacity: 0.8;
  color: #ffffff;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .about-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-text-block-text {
    margin-left: auto;
    margin-right: auto;
  }

  .about-social-row {
    justify-content: center;
  }
  .about-contact{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}




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

@media (max-width:1000px){

.hero{

grid-template-columns:1fr;

}

.description{

grid-template-columns:1fr;

}

.see-gallery{

grid-template-columns:1fr 1fr;

}

}



@media (max-width:600px){

.hero h1{

font-size:60px;

}

.tagline h2{

font-size:40px;

}

.section-title{

font-size:50px;

}

.see-gallery{

grid-template-columns:1fr;

}

}

/* ========================================================================================================== */
/* ========================================================================================================== */
/* MOBILE VERSIONS */
/* ========================================================================================================== */
/* ========================================================================================================== */

/* =======================================================
   MOBILE VERSION — FIRST PASS
   Append at the very end of main_css.css
   ======================================================= */

@media (max-width: 768px){

  /* =================================
     MOBILE CONTROL VARIABLES
     ================================= */
  :root{
    /* Global page margins */
    --mobile-side-margin: 16px;

    /* General vertical rhythm */
    --mobile-section-spacing: 60px;
    --font-section:40px;

    /* White / boxed sections */
    
    --mobile-box-padding-y: 28px;

    /* Hero */
    --mobile-hero-gap: 22px;
    --mobile-hero-title-size: 60px;
    --mobile-hero-image-height: 250px;
    --mobile-tagline-size: 42px;
    --mobile-tagline-to-description-gap: 34px;

    /* Stops */
    --mobile-box-padding-x: 15px;
    --mobile-stop-gap: 5px;
    --mobile-stop-number-size: 20px;
    --mobile-stop-number-min-width: 25px;
    --mobile-stop-title-size: 16px;
    --mobile-stop-text-size: 14px;

    /* Booking */
    --mobile-booking-title-size: 1.65rem;
    --mobile-booking-subtitle-size: 0.96rem;
    --mobile-booking-card-pad-top: 1.25rem;
    --mobile-booking-card-pad-right: 1rem;
    --mobile-booking-card-pad-bottom: 0.4rem;
    --mobile-booking-card-pad-left: 1rem;

    /* Reviews */
    --mobile-review-card-width: calc(100vw - (2 * var(--mobile-side-margin)));
    --mobile-review-card-min-height: 450px;

    /* About */
    --mobile-about-icon-size: 34px;
  }

  /* =================================
     GLOBAL SAFETY
     ================================= */
  html,
  body{
    overflow-x:hidden;
    max-width:100%;
  }

  body{
    caret-color:transparent;
  }

  section{
    margin: var(--mobile-section-spacing) auto;
    padding-left: var(--mobile-side-margin);
    padding-right: var(--mobile-side-margin);
  }

  /* =================================
     BANNER
     Only centered logo on mobile
     ================================= */
 .banner{
grid-template-columns:1fr;
height: 80 px;
justify-items:center;
}

.banner-nav{
display:none;
}

.logo-text{
display:none;
}

.logo{
justify-self:center;
}

  /* =================================
     HERO
     Title centered, guide image below
     ================================= */
  .hero{
    grid-template-columns:1fr;
    gap:var(--mobile-hero-gap);
    margin:48px auto 0;
    text-align:center;
  }

  .hero h1{
    font-size:var(--mobile-hero-title-size);
    line-height:1.02;
    text-align:center;
  }

  .hero-image{
    display:flex;
    justify-content:center;
  }

  .hero-image img{
    width:100%;
    max-width:calc(100vw - (2 * var(--mobile-side-margin)));
    height:var(--mobile-hero-image-height);
    object-fit:cover;
    object-position:center 38%;
    border-radius:var(--image-radius);
    display:block;
    margin:0 auto;
  }

  /* =================================
     TAGLINE + DESCRIPTION
     ================================= */
  .tagline{
    margin-top:52px;
    text-align:center;
  }

  .tagline h2{
    font-size:var(--mobile-tagline-size);
    line-height:1.1;
    text-align:center;
  }

  .description{
    margin-top:var(--mobile-tagline-to-description-gap);
    grid-template-columns:1fr;
    gap:26px;
  }

  .description p{
    text-align:justify;
    text-justify:inter-word;
  }

  .description-image{
    display:flex;
    justify-content:center;
  }

  .description-image img{
    width:100%;
    max-width:calc(100vw - (2 * var(--mobile-side-margin)));
    display:block;
    margin:0 auto;
  }

  /* =================================
     SECTION TITLES
     Less side pressure on mobile
     ================================= */
  .section-title{
    font-size:var(--font-section);
    line-height:1.02;
    margin-bottom:22px;
  }

  /* =================================
     WHAT YOU'LL SEE
     Less margins
     ================================= */
  .see{
    margin-top:64px;
  }

  .see-gallery{
    gap:14px;
  }

  .gallery-left{
    gap:14px;
  }

  /* No hover enlargement on touch devices */
  .see-gallery img:hover{
    transform:none;
  }

  /* =================================
     TOUR STOPS / MEETING POINTS
     Smaller numbers, tighter layout
     ================================= */
  .stops{
    margin-top:64px;
  }

  .stops-box{
    padding:var(--mobile-box-padding-y) var(--mobile-box-padding-x);
    gap:22px;
  }

  .stop{
    gap:var(--mobile-stop-gap);
    align-items:flex-start;
  }

  .stop-number{
    font-size:var(--mobile-stop-number-size);
    min-width:var(--mobile-stop-number-min-width);
    line-height:1;
  }

  .stop-text h3{
  font-size:var(--mobile-stop-title-size);
  line-height:1.08;
  margin-bottom:3px;
}

.stop-text p{
  font-size:var(--mobile-stop-text-size);
  line-height:1.32;
}

  /* =================================
     BOOKING
     More usable width on mobile
     ================================= */
  .booking{
    margin-top:64px;
  }

  .booking-section{
    padding-left:0;
    padding-right:0;
  }

  #booking-form.booking-form{
    width:100%;
    max-width:calc(100vw - (2 * var(--mobile-side-margin)));
    padding:
      var(--mobile-booking-card-pad-top)
      var(--mobile-booking-card-pad-right)
      var(--mobile-booking-card-pad-bottom)
      var(--mobile-booking-card-pad-left);
  }

  #booking-form .booking-head{
    margin-bottom:1rem;
  }

  #booking-form .booking-title{
    font-size:var(--mobile-booking-title-size);
  }

  #booking-form .booking-title::after{
    content:"";
  }

  #booking-form .booking-subtitle{
    font-size:var(--mobile-booking-subtitle-size);
    line-height:1.4;
  }

  /* Replace visually:
     "Book your Roots & Roads tour" -> "Book your Tour"
     and force line break in subtitle */
  #booking-form .booking-title{
    visibility:hidden;
    position:relative;
  }

  #booking-form .booking-title::before{
    content:"Book your Tour";
    visibility:visible;
    position:absolute;
    inset:0;
  }

  #booking-form .booking-subtitle{
    visibility:hidden;
    position:relative;
    min-height:2.8em;
  }

  #booking-form .booking-subtitle::before{
    content:"Reserve your spot in 30 seconds.\A We’ll confirm by email.";
    white-space:pre-line;
    visibility:visible;
    position:absolute;
    inset:0;
  }

  /* =================================
     HOW IT WORKS
     Less margin, more horizontal text room
     ================================= */
  .how{
    margin-top:64px;
  }

  .how-box{
    padding:var(--mobile-box-padding-y) var(--mobile-box-padding-x);
    text-align:justify;
    text-justify:inter-word;
  }

  .how-box p + p{
    margin-top:14px;
  }

  /* =================================
     REVIEWS
     Fit to mobile width, center snapping,
     longer cards
     ================================= */
  .reviews{
    margin-top:64px;
  }

  .reviews-fullwidth{
    width:100vw;
    margin-left:calc(50% - 50vw);
    overflow:visible;
  }

  .reviews-track{
    gap:18px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:calc((100vw - var(--mobile-review-card-width)) / 2);
    scroll-padding-right:calc((100vw - var(--mobile-review-card-width)) / 2);
    padding:0 0 24px 0;
    scrollbar-width:none;
  }

  .reviews-track::-webkit-scrollbar{
    display:none;
  }

  .reviews-track::before,
  .reviews-track::after{
    content:"";
    flex:0 0 calc((100vw - var(--mobile-review-card-width)) / 2);
  }

  .review-card{
    flex:0 0 var(--mobile-review-card-width);
    max-width:var(--mobile-review-card-width);
    min-height:var(--mobile-review-card-min-height);
    height:auto;
    padding:18px 18px 16px;
    scroll-snap-align:center;
  }

  .review-text{
  font-size: 18px;
  line-height:1.5;
}

  .review-card.is-expanded{
    flex:0 0 var(--mobile-review-card-width);
    max-width:var(--mobile-review-card-width);
    min-height:var(--mobile-review-card-min-height);
    height:auto;
  }

  /* =================================
     ABOUT US
     Rotated background, better icon grid,
     justified text
     ================================= */
  .about-banner{

  background-image:url("../images/rotatedAboutUs_background_v1.webp");

  background-size:cover;      /* fill section */
  background-position:center; /* center pattern */
  background-repeat:no-repeat;

  padding:54px 0 26px;
}

  .about-inner{
    grid-template-columns:1fr;
    gap:26px;
    padding:0 var(--mobile-side-margin);
    text-align:left;
  }

  .about-text-block h2{
    text-align:center;
  }

  .about-text-block-text{
    font-size: 18px;
    text-align:justify;
    text-justify:inter-word;
    max-width:none;
  }

  .about-social-row{
    width:100%;
    max-width:none;
    margin:18px 0 12px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    justify-items:center;
    row-gap:14px;
    column-gap:10px;
  }

  .about-social-row img{
    width:var(--mobile-about-icon-size);
    height:var(--mobile-about-icon-size);
  }

  .about-contact{
    max-width:none;
    text-align:center;
  }

  .about-logo-block{
    margin-top:6px;
  }

  .about-logo-img{
    max-width:240px;
    width:100%;
  }

  .about-footer{
    margin-top:20px;
    padding:0 var(--mobile-side-margin);
  }

  /* =================================
     GALLERY MODAL
     Keep centered and non-overflowing
     ================================= */
  .gallery-modal{
    padding:0;
  }

  .gallery-modal-content{
    max-width:100vw;
    max-height:100vh;
    padding:20px;
    align-items:center;
  }

  .gallery-modal img{
    max-width:calc(100vw - 40px);
    max-height:calc(100vh - 40px);
    flex-shrink:0;
    border-radius:var(--image-radius);
    display:block;
  }

  .gallery-close{
    top:18px;
    right:18px;
  }
}

.stops,
.booking,
.reviews,
.about {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}