/* /assets/css/hopon-city-tours.css - Hop On City Tours marketplace branding and homepage presentation. */
:root {
  --hopon-navy: #062a4e;
  --hopon-navy-deep: #031d36;
  --hopon-blue: #08b8ee;
  --hopon-blue-dark: #0498ce;
  --hopon-red: #ff2738;
  --hopon-yellow: #ffbd24;
  --hopon-green: #22a861;
  --hopon-purple: #7b35d1;
  --hopon-pink: #f52d87;
  --hopon-ink: #102b47;
  --hopon-muted: #60758c;
  --hopon-soft: #f4f9fc;
  --hopon-white: #ffffff;
  --hopon-shadow: 0 18px 44px rgba(6, 42, 78, 0.14);
}

body.hopon-city-tours,
body.home {
  color: var(--hopon-ink);
  background: #fff;
}

body.home .wrap,
body.home .content,
body.home .inner-container {
  margin: 0;
  padding: 0;
  max-width: none;
}

body.home .banner.navbar {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 0;
  box-shadow: 0 4px 22px rgba(5, 38, 69, 0.09);
}

.banner.navbar .navbar-brand,
.banner.navbar .navbar-brand img,
.banner.navbar .navbar-header img {
  max-height: 66px !important;
  width: auto !important;
}

.banner.navbar .navbar-nav > li > a {
  color: var(--hopon-navy) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.banner.navbar .navbar-nav > li > a:hover,
.banner.navbar .navbar-nav > .active > a {
  color: var(--hopon-blue-dark) !important;
}

.btn-primary,
.th-btn-primary,
.button,
input[type="submit"] {
  background: var(--hopon-blue) !important;
  border-color: var(--hopon-blue) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 800;
}

.btn-primary:hover,
.th-btn-primary:hover,
.button:hover,
input[type="submit"]:hover {
  background: var(--hopon-blue-dark) !important;
  border-color: var(--hopon-blue-dark) !important;
}

.hopon-home {
  overflow: hidden;
  background: #fff;
}

.hopon-container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.hopon-hero {
  position: relative;
  isolation: isolate;
  padding: 82px 0 70px;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 189, 36, 0.20), transparent 30%),
    radial-gradient(circle at 10% 35%, rgba(8, 184, 238, 0.16), transparent 28%),
    linear-gradient(135deg, #f8fcff 0%, #eef9ff 50%, #ffffff 100%);
}

.hopon-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(to bottom right, transparent 49%, #fff 50%);
  z-index: -1;
}

.hopon-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 46px;
  align-items: center;
}

.hopon-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--hopon-navy);
  background: rgba(255, 189, 36, 0.22);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hopon-hero h1 {
  margin: 18px 0 18px;
  max-width: 690px;
  color: var(--hopon-navy);
  font-size: clamp(2.75rem, 5.2vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 900;
}

.hopon-hero h1 .hopon-accent {
  color: var(--hopon-blue-dark);
}

.hopon-hero-copy {
  max-width: 650px;
  margin: 0 0 28px;
  color: var(--hopon-muted);
  font-size: 1.17rem;
  line-height: 1.7;
}

.hopon-search {
  display: flex;
  gap: 10px;
  max-width: 720px;
  padding: 9px;
  background: #fff;
  border: 1px solid rgba(6, 42, 78, 0.09);
  border-radius: 18px;
  box-shadow: var(--hopon-shadow);
}

.hopon-search-field {
  position: relative;
  flex: 1 1 auto;
}

.hopon-search-field::before {
  content: "⌖";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hopon-red);
  font-size: 1.35rem;
}

.hopon-search input[type="search"] {
  width: 100%;
  height: 54px;
  border: 0;
  outline: none;
  padding: 0 16px 0 47px;
  background: transparent;
  color: var(--hopon-ink);
  font-size: 1rem;
}

.hopon-search button {
  min-width: 150px;
  border: 0;
  border-radius: 13px;
  padding: 0 22px;
  background: linear-gradient(135deg, var(--hopon-blue), var(--hopon-blue-dark));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(8, 184, 238, 0.28);
}

.hopon-search button:hover {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.hopon-popular-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.hopon-popular-inline a {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--hopon-navy);
  background: #fff;
  border: 1px solid rgba(6, 42, 78, 0.10);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.hopon-popular-inline a:hover {
  color: #fff;
  background: var(--hopon-navy);
}

.hopon-hero-art {
  position: relative;
}

.hopon-hero-art img {
  display: block;
  width: 100%;
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(5, 39, 72, 0.24);
}

.hopon-trust-card {
  position: absolute;
  left: -22px;
  bottom: -25px;
  display: flex;
  gap: 13px;
  align-items: center;
  max-width: 300px;
  padding: 15px 18px;
  background: rgba(255,255,255,0.96);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(5, 39, 72, 0.20);
}

.hopon-trust-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: rgba(34,168,97,0.13);
  color: var(--hopon-green);
  font-size: 1.35rem;
}

.hopon-trust-card strong,
.hopon-trust-card span {
  display: block;
}

.hopon-trust-card strong {
  color: var(--hopon-navy);
  font-size: 0.93rem;
}

.hopon-trust-card span {
  margin-top: 3px;
  color: var(--hopon-muted);
  font-size: 0.78rem;
}

.hopon-section {
  padding: 76px 0;
}

.hopon-section-soft {
  background: var(--hopon-soft);
}

.hopon-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 32px;
}

.hopon-section-head h2 {
  margin: 0;
  color: var(--hopon-navy);
  font-size: clamp(2rem, 3vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 900;
}

.hopon-section-head p {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--hopon-muted);
  line-height: 1.6;
}

.hopon-city-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.hopon-city-card {
  position: relative;
  min-height: 215px;
  overflow: hidden;
  border-radius: 22px;
  padding: 24px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(145deg, var(--hopon-navy), #0b5c8f);
  box-shadow: 0 14px 30px rgba(6,42,78,0.12);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.hopon-city-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -35px;
  top: -38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
}

.hopon-city-card:nth-child(2n) { background: linear-gradient(145deg, #084a76, #08aeda); }
.hopon-city-card:nth-child(3n) { background: linear-gradient(145deg, #7c2b44, #ff5b4d); }
.hopon-city-card:nth-child(4n) { background: linear-gradient(145deg, #3b357f, #865be2); }

.hopon-city-card:hover {
  transform: translateY(-5px);
  color: #fff;
  box-shadow: 0 22px 46px rgba(6,42,78,0.19);
}

.hopon-city-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,0.16);
  font-size: 1.6rem;
}

.hopon-city-card strong {
  display: block;
  font-size: 1.28rem;
  font-weight: 900;
}

.hopon-city-card span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,0.80);
  font-size: 0.9rem;
}

.hopon-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.hopon-category-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 21px;
  border: 1px solid rgba(6, 42, 78, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(6,42,78,0.07);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.hopon-category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(6,42,78,0.12);
}

.hopon-category-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 16px;
  color: #fff;
  background: var(--hopon-blue);
  font-size: 1.5rem;
}

.hopon-category-card:nth-child(2) .hopon-category-icon { background: var(--hopon-red); }
.hopon-category-card:nth-child(3) .hopon-category-icon { background: var(--hopon-green); }
.hopon-category-card:nth-child(4) .hopon-category-icon { background: var(--hopon-purple); }
.hopon-category-card:nth-child(5) .hopon-category-icon { background: #ff811a; }
.hopon-category-card:nth-child(6) .hopon-category-icon { background: var(--hopon-pink); }
.hopon-category-card:nth-child(7) .hopon-category-icon { background: #1685d2; }
.hopon-category-card:nth-child(8) .hopon-category-icon { background: #7347c7; }

.hopon-category-card strong,
.hopon-category-card span {
  display: block;
}

.hopon-category-card strong {
  color: var(--hopon-navy);
  font-size: 1.02rem;
  font-weight: 900;
}

.hopon-category-card span {
  margin-top: 4px;
  color: var(--hopon-muted);
  font-size: 0.82rem;
}

.hopon-booking-band {
  padding: 0 0 84px;
}

.hopon-booking-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
  padding: 52px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 20%, rgba(255,189,36,0.25), transparent 30%),
    linear-gradient(135deg, var(--hopon-navy-deep), var(--hopon-navy));
  color: #fff;
  box-shadow: 0 24px 60px rgba(3, 29, 54, 0.20);
}

.hopon-booking-card h2 {
  margin: 0 0 15px;
  color: #fff;
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hopon-booking-card p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 1.04rem;
  line-height: 1.7;
}

.hopon-booking-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hopon-booking-point {
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 15px;
  background: rgba(255,255,255,0.07);
  font-weight: 800;
}

.footer,
.footer-btm-bar {
  background: var(--hopon-navy-deep) !important;
}

.footer,
.footer a,
.footer p,
.footer .widget-title {
  color: rgba(255,255,255,0.86) !important;
}

.footer-btm-bar {
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}

@media (max-width: 991px) {
  .hopon-hero-grid,
  .hopon-booking-card {
    grid-template-columns: 1fr;
  }
  .hopon-city-grid,
  .hopon-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hopon-hero-art {
    margin-top: 10px;
  }
  .hopon-trust-card {
    left: 18px;
  }
}

@media (max-width: 640px) {
  .hopon-container {
    width: min(100% - 28px, 1180px);
  }
  .hopon-hero {
    padding: 55px 0 58px;
  }
  .hopon-search {
    flex-direction: column;
    border-radius: 16px;
  }
  .hopon-search button {
    min-height: 50px;
  }
  .hopon-section {
    padding: 58px 0;
  }
  .hopon-section-head {
    display: block;
  }
  .hopon-city-grid,
  .hopon-category-grid,
  .hopon-booking-points {
    grid-template-columns: 1fr;
  }
  .hopon-booking-card {
    padding: 30px 22px;
  }
  .hopon-trust-card {
    position: static;
    max-width: none;
    margin-top: 12px;
  }
}

/* /assets/css/hopon-city-tours.css - Extends the marketplace styles for destination directories and city pages. */
.hopon-kicker { display:block; margin-bottom:8px; color:var(--hopon-blue-dark); font-size:.78rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.hopon-text-link { color:var(--hopon-navy); font-weight:900; text-decoration:none; white-space:nowrap; }
.hopon-text-link:hover { color:var(--hopon-blue-dark); }
.hopon-destination-picker { display:flex; gap:10px; max-width:720px; padding:9px; background:#fff; border:1px solid rgba(6,42,78,.09); border-radius:18px; box-shadow:var(--hopon-shadow); }
.hopon-destination-picker select { flex:1; min-width:0; height:54px; padding:0 18px; border:0; outline:0; background:#fff; color:var(--hopon-ink); font-weight:700; }
.hopon-destination-picker button { min-width:155px; border:0; border-radius:13px; padding:0 22px; background:linear-gradient(135deg,var(--hopon-blue),var(--hopon-blue-dark)); color:#fff; font-weight:900; }
.hopon-value-strip { padding:0 0 12px; background:#fff; }
.hopon-value-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid rgba(6,42,78,.08); border-radius:20px; background:rgba(6,42,78,.08); box-shadow:0 12px 30px rgba(6,42,78,.07); }
.hopon-value-grid>div { padding:22px 24px; background:#fff; }
.hopon-value-grid strong,.hopon-value-grid span { display:block; }
.hopon-value-grid strong { color:var(--hopon-navy); font-size:1rem; }
.hopon-value-grid span { margin-top:5px; color:var(--hopon-muted); font-size:.88rem; }
.hopon-city-card em { display:block; margin-top:auto; padding-top:20px; color:var(--hopon-blue-dark); font-style:normal; font-weight:900; }
.hopon-primary-btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:999px; background:linear-gradient(135deg,var(--hopon-blue),var(--hopon-blue-dark)); color:#fff!important; font-weight:900; text-decoration:none!important; box-shadow:0 10px 24px rgba(8,184,238,.25); }
.hopon-primary-btn:hover { transform:translateY(-1px); filter:brightness(.97); }
.hopon-primary-btn-light { background:#fff; color:var(--hopon-navy)!important; box-shadow:none; }
.hopon-disclosure { margin:14px 0 0; color:var(--hopon-muted); font-size:.78rem; line-height:1.5; }
.hopon-orlando-feature { padding:82px 0; background:linear-gradient(135deg,#052f56 0%,#074f7b 58%,#0aaee4 100%); color:#fff; }
.hopon-orlando-feature-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:center; }
.hopon-orlando-feature h2 { margin:16px 0 16px; color:#fff; font-size:clamp(2.4rem,4vw,4.6rem); font-weight:900; letter-spacing:-.04em; }
.hopon-orlando-feature p { max-width:680px; margin:0 0 26px; color:rgba(255,255,255,.82); font-size:1.08rem; line-height:1.7; }
.hopon-orlando-badge { display:grid; place-items:center; min-height:280px; padding:30px; border:1px solid rgba(255,255,255,.18); border-radius:32px; background:rgba(255,255,255,.1); box-shadow:0 24px 60px rgba(0,0,0,.15); text-align:center; backdrop-filter:blur(10px); }
.hopon-orlando-badge span { font-size:5rem; }
.hopon-orlando-badge strong { display:block; margin-top:6px; font-size:2.35rem; letter-spacing:.06em; }
.hopon-orlando-badge small { font-size:1rem; text-transform:uppercase; letter-spacing:.2em; opacity:.78; }
.hopon-directory-hero,.hopon-city-hero { padding:82px 0 68px; background:radial-gradient(circle at 80% 10%,rgba(255,189,36,.22),transparent 26%),linear-gradient(135deg,#f8fcff,#eef9ff); }
.hopon-directory-hero h1,.hopon-city-hero h1 { margin:16px 0; color:var(--hopon-navy); font-size:clamp(2.8rem,5vw,5rem); line-height:1; letter-spacing:-.04em; font-weight:900; }
.hopon-directory-hero p { max-width:690px; color:var(--hopon-muted); font-size:1.15rem; line-height:1.7; }
.hopon-destination-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.hopon-destination-card { display:flex; flex-direction:column; min-height:300px; padding:28px; border:1px solid rgba(6,42,78,.08); border-radius:24px; background:#fff; color:var(--hopon-ink)!important; text-decoration:none!important; box-shadow:0 14px 36px rgba(6,42,78,.08); transition:.2s ease; }
.hopon-destination-card:hover { transform:translateY(-5px); box-shadow:0 22px 48px rgba(6,42,78,.15); }
.hopon-destination-emoji { font-size:3rem; }
.hopon-destination-state { margin-top:20px; color:var(--hopon-blue-dark); font-size:.75rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.hopon-destination-card h2 { margin:4px 0 10px; color:var(--hopon-navy); font-size:2rem; font-weight:900; }
.hopon-destination-card p { color:var(--hopon-muted); line-height:1.6; }
.hopon-destination-card strong { margin-top:auto; color:var(--hopon-blue-dark); }
.hopon-city-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center; }
.hopon-back-link { display:inline-block; margin-bottom:18px; color:var(--hopon-navy); font-weight:800; text-decoration:none; }
.hopon-city-lede { max-width:720px; margin:0 0 24px; color:var(--hopon-muted); font-size:1.12rem; line-height:1.75; }
.hopon-city-visual { min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; border-radius:32px; background:linear-gradient(135deg,var(--hopon-navy),#0b78aa); color:#fff; text-align:center; box-shadow:var(--hopon-shadow); }
.hopon-city-emoji { font-size:7rem; line-height:1; }
.hopon-city-visual-copy strong,.hopon-city-visual-copy span { display:block; }
.hopon-city-visual-copy strong { margin-top:22px; font-size:2.5rem; font-weight:900; }
.hopon-city-visual-copy span { max-width:360px; margin-top:8px; color:rgba(255,255,255,.8); line-height:1.5; }
.hopon-tour-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.hopon-tour-category-card { position:relative; min-height:210px; display:flex; flex-direction:column; padding:24px; border:1px solid rgba(6,42,78,.08); border-radius:22px; background:#fff; color:var(--hopon-ink)!important; text-decoration:none!important; box-shadow:0 12px 30px rgba(6,42,78,.08); transition:.2s ease; }
.hopon-tour-category-card:hover { transform:translateY(-4px); border-color:rgba(8,184,238,.35); box-shadow:0 20px 44px rgba(6,42,78,.13); }
.hopon-card-number { color:var(--hopon-blue-dark); font-size:.8rem; font-weight:900; letter-spacing:.1em; }
.hopon-tour-category-card h3 { margin:28px 0 12px; color:var(--hopon-navy); font-size:1.35rem; font-weight:900; }
.hopon-card-cta { margin-top:auto; color:var(--hopon-blue-dark); font-weight:900; }
.hopon-editorial { max-width:900px; font-size:1.02rem; line-height:1.75; }
.hopon-city-cta { padding:0 0 84px; background:#fff; }
.hopon-city-cta-card { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:42px; border-radius:28px; background:linear-gradient(135deg,var(--hopon-navy),#07577e); color:#fff; }
.hopon-city-cta-card h2 { margin:12px 0 10px; color:#fff; font-size:clamp(2rem,3vw,3.2rem); font-weight:900; }
.hopon-city-cta-card p { margin:0; color:rgba(255,255,255,.78); }

@media (max-width: 991px) {
  .hopon-hero-grid,.hopon-city-hero-grid,.hopon-orlando-feature-grid { grid-template-columns:1fr; }
  .hopon-destination-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hopon-tour-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hopon-value-grid { grid-template-columns:1fr; }
  .hopon-city-visual { min-height:260px; }
}
@media (max-width: 767px) {
  .hopon-container { width:min(100% - 28px,1180px); }
  .hopon-hero,.hopon-directory-hero,.hopon-city-hero { padding:54px 0 48px; }
  .hopon-destination-picker { display:grid; }
  .hopon-destination-picker button { min-height:50px; }
  .hopon-destination-grid,.hopon-tour-category-grid { grid-template-columns:1fr; }
  .hopon-section-head { align-items:flex-start; flex-direction:column; }
  .hopon-city-cta-card { align-items:flex-start; flex-direction:column; padding:30px; }
}

/* /assets/css/hopon-city-tours.css - v2.3 header and hero align the live site with the Hop On marketplace concept. */
.hopon-site-header {
  margin: 0 !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 3px 18px rgba(6, 42, 78, 0.10);
  position: relative;
  z-index: 1000;
}

.hopon-topbar {
  min-height: 46px;
  background: linear-gradient(90deg, #087fa8 0%, #005b91 55%, #064b7d 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.hopon-topbar-inner {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.hopon-topbar-message,
.hopon-topbar-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hopon-topbar-message { gap: 9px; }
.hopon-topbar-pin { color: #fff; font-size: 10px; }
.hopon-topbar-links a,
.hopon-topbar-links span {
  color: #fff !important;
  text-decoration: none;
  opacity: .97;
}
.hopon-topbar-links a:hover { opacity: .78; }

.hopon-nav-shell {
  min-height: 122px;
  display: flex;
  align-items: center;
}

.hopon-navbar-header {
  flex: 0 0 330px;
  min-width: 330px;
}

#logo.hopon-menu-logo {
  margin: 0 !important;
  padding: 10px 0 !important;
}

#logo.hopon-menu-logo a {
  display: inline-flex;
  align-items: center;
}

#logo.hopon-menu-logo img,
.banner.navbar #logo.hopon-menu-logo img.logo-reg {
  display: block;
  width: 260px !important;
  height: auto !important;
  max-width: 260px !important;
  max-height: 104px !important;
  object-fit: contain;
}

.hopon-main-nav {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 0 !important;
}

.hopon-main-nav .hopon-nav-list {
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  float: none !important;
}

.hopon-main-nav .hopon-nav-list > li > a {
  padding: 49px 17px 45px !important;
  color: #072b50 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.hopon-main-nav .hopon-nav-list > li > a:hover,
.hopon-main-nav .hopon-nav-list > li.current-menu-item > a,
.hopon-main-nav .hopon-nav-list > li.current_page_item > a {
  color: #078ed8 !important;
  background: transparent !important;
}

.hopon-main-nav .hopon-nav-list > li.current-menu-item > a::after,
.hopon-main-nav .hopon-nav-list > li.current_page_item > a::after {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 31px;
  height: 3px;
  border-radius: 10px;
  background: #11aeea;
}

.hopon-nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.hopon-nav-search {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #072b50 !important;
  font-size: 30px;
  line-height: 1;
  text-decoration: none !important;
}

.hopon-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b7ee, #087fd6);
  color: #fff !important;
  font-weight: 900;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(8, 145, 214, .23);
}
.hopon-nav-cta:hover { transform: translateY(-1px); filter: brightness(.98); }

.hopon-hero-v23 {
  min-height: 610px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.48) 0 8%, transparent 9%),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.34) 0 10%, transparent 11%),
    linear-gradient(180deg, #29a9e4 0%, #58c8ee 38%, #96def4 72%, #dff5fb 100%);
}

.hopon-hero-v23::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  opacity: .55;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(3,53,88,.25) 5% 7%, transparent 7% 10%, rgba(3,53,88,.18) 10% 12%, transparent 12% 16%, rgba(3,53,88,.22) 16% 20%, transparent 20% 25%, rgba(3,53,88,.18) 25% 29%, transparent 29% 34%, rgba(3,53,88,.22) 34% 38%, transparent 38% 43%, rgba(3,53,88,.17) 43% 48%, transparent 48% 55%, rgba(3,53,88,.22) 55% 60%, transparent 60% 67%, rgba(3,53,88,.18) 67% 72%, transparent 72% 78%, rgba(3,53,88,.22) 78% 82%, transparent 82% 88%, rgba(3,53,88,.16) 88% 93%, transparent 93% 100%);
  clip-path: polygon(0 100%,0 75%,5% 75%,5% 45%,8% 45%,8% 68%,12% 68%,12% 32%,15% 32%,15% 58%,19% 58%,19% 18%,23% 18%,23% 69%,27% 69%,27% 44%,31% 44%,31% 73%,35% 73%,35% 28%,39% 28%,39% 64%,44% 64%,44% 40%,48% 40%,48% 68%,53% 68%,53% 21%,57% 21%,57% 60%,62% 60%,62% 42%,66% 42%,66% 70%,71% 70%,71% 33%,75% 33%,75% 58%,80% 58%,80% 24%,84% 24%,84% 63%,89% 63%,89% 39%,93% 39%,93% 72%,100% 72%,100% 100%);
}

.hopon-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,65,105,.08), rgba(2,65,105,.22));
  pointer-events: none;
}

.hopon-hero-center {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100% - 40px));
  text-align: center;
  padding: 72px 0 86px;
}

.hopon-hero-script {
  display: block;
  color: #fff;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(3.2rem, 7vw, 6.7rem);
  line-height: .92;
  text-shadow: 0 3px 18px rgba(2,43,75,.20);
  transform: rotate(-2deg);
}

.hopon-hero-v23 h1 {
  margin: 18px 0 14px !important;
  max-width: none !important;
  color: #fff !important;
  font-size: clamp(3rem, 6.8vw, 6.7rem) !important;
  line-height: .92 !important;
  letter-spacing: -.035em !important;
  font-weight: 900 !important;
  text-shadow: 0 4px 22px rgba(2,43,75,.22);
}

.hopon-hero-v23 p {
  margin: 0 auto 30px;
  max-width: 760px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(2,43,75,.20);
}

.hopon-destination-picker-hero {
  display: flex;
  align-items: center;
  max-width: 730px;
  min-height: 66px;
  margin: 0 auto;
  padding: 7px 7px 7px 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0,59,98,.24);
}

.hopon-picker-pin {
  color: #082e55;
  margin-right: 12px;
  font-size: 12px;
}

.hopon-destination-picker-hero select {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 15px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #586d80;
  font-weight: 700;
  box-shadow: none;
}

.hopon-destination-picker-hero button {
  flex: 0 0 auto;
  height: 50px;
  min-width: 165px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #12b9ef, #0788d9);
  color: #fff;
  font-weight: 900;
  padding: 0 24px;
}

.hopon-popular-hero {
  margin: 18px auto 0;
  justify-content: center;
  align-items: center;
}
.hopon-popular-hero strong { color: #fff; margin-right: 2px; }
.hopon-popular-hero a {
  background: rgba(255,255,255,.94);
  border: 0;
  box-shadow: 0 6px 18px rgba(2,60,98,.12);
}

@media (max-width: 1199px) {
  .hopon-navbar-header { flex-basis: 270px; min-width: 270px; }
  #logo.hopon-menu-logo img,
  .banner.navbar #logo.hopon-menu-logo img.logo-reg { width: 220px !important; max-width: 220px !important; }
  .hopon-main-nav { gap: 12px; }
  .hopon-main-nav .hopon-nav-list > li > a { padding-left: 10px !important; padding-right: 10px !important; font-size: 14px !important; }
  .hopon-nav-cta { min-width: 120px; padding: 0 18px; }
}

@media (max-width: 991px) {
  .hopon-topbar-links { display: none; }
  .hopon-topbar-inner { justify-content: center; text-align: center; }
  .hopon-nav-shell { display: block; min-height: auto; }
  .hopon-navbar-header { min-width: 0; width: 100%; min-height: 88px; display: flex; align-items: center; justify-content: space-between; }
  #logo.hopon-menu-logo img,
  .banner.navbar #logo.hopon-menu-logo img.logo-reg { width: 190px !important; max-width: 190px !important; }
  .hopon-navbar-header .navbar-toggle { margin-top: 25px; margin-right: 0; }
  .hopon-main-nav { display: none !important; width: 100%; padding: 0 0 22px !important; }
  .hopon-main-nav.in { display: block !important; }
  .hopon-main-nav .hopon-nav-list { display: block; width: 100%; }
  .hopon-main-nav .hopon-nav-list > li { float: none; }
  .hopon-main-nav .hopon-nav-list > li > a { padding: 13px 2px !important; }
  .hopon-main-nav .hopon-nav-list > li.current-menu-item > a::after,
  .hopon-main-nav .hopon-nav-list > li.current_page_item > a::after { display: none; }
  .hopon-nav-actions { padding-top: 12px; }
  .hopon-nav-search { display: none; }
  .hopon-hero-v23 { min-height: 530px; }
}

@media (max-width: 600px) {
  .hopon-topbar { font-size: 12px; }
  .hopon-hero-center { padding-top: 55px; padding-bottom: 65px; }
  .hopon-hero-script { font-size: 3.1rem; }
  .hopon-hero-v23 h1 { font-size: 3.05rem !important; }
  .hopon-hero-v23 p { font-size: 15px; }
  .hopon-destination-picker-hero { border-radius: 20px; padding: 8px; flex-wrap: wrap; }
  .hopon-picker-pin { display: none; }
  .hopon-destination-picker-hero select { width: 100%; flex-basis: 100%; padding: 0 14px; }
  .hopon-destination-picker-hero button { width: 100%; }
  .hopon-popular-hero strong { flex-basis: 100%; }
}


/* /assets/css/hopon-city-tours.css - v2.12 styles for direct Viator product cards on destination pages. */
.hopon-featured-tours-section { background: #fff; }
.hopon-featured-tour-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.hopon-featured-tour-card { display:flex; flex-direction:column; min-height:100%; padding:28px; border:1px solid #dfe8f3; border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(16,55,92,.08); }
.hopon-featured-tour-topline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.hopon-featured-badge { display:inline-flex; align-items:center; border-radius:999px; padding:6px 10px; background:#f5b335; color:#122a44; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.hopon-featured-meta { color:#5d6f82; font-size:14px; font-weight:700; }
.hopon-featured-tour-card h3 { margin:0 0 12px; color:#12395b; font-size:24px; line-height:1.2; }
.hopon-featured-tour-card p { margin:0 0 22px; color:#52677a; line-height:1.7; }
.hopon-tour-book-btn { align-self:flex-start; margin-top:auto; }
@media (max-width: 760px) { .hopon-featured-tour-grid { grid-template-columns:1fr; } .hopon-featured-tour-card { padding:22px; } }


/* /assets/css/hopon-city-tours.css - v2.13 internal experience-category landing pages. */
.hopon-category-hero { padding:72px 0 58px; background:linear-gradient(135deg,#eaf8ff 0%,#fff 58%,#eef7ff 100%); border-bottom:1px solid #dcebf6; }
.hopon-category-hero h1 { margin:10px 0 16px; color:#10395c; font-size:clamp(38px,5vw,64px); line-height:1.04; }
.hopon-category-hero p { max-width:840px; margin:0; color:#536b7e; font-size:18px; line-height:1.75; }
.hopon-category-breadcrumbs { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:24px; color:#6a8194; font-size:14px; font-weight:700; }
.hopon-category-breadcrumbs a { color:#137db7; text-decoration:none; }
.hopon-category-results-section { background:#fff; }
.hopon-experience-landing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.hopon-experience-landing-card { position:relative; display:flex; flex-direction:column; padding:30px; border:1px solid #dce8f1; border-radius:20px; background:#fff; box-shadow:0 12px 32px rgba(18,57,91,.08); overflow:hidden; }
.hopon-experience-landing-card h3 { margin:0 0 12px; padding-right:42px; color:#12395b; font-size:24px; line-height:1.22; }
.hopon-experience-landing-card p { margin:0 0 24px; color:#53697c; line-height:1.7; }
.hopon-experience-number { position:absolute; top:20px; right:22px; color:#d6e6f0; font-size:34px; font-weight:900; line-height:1; }
.hopon-more-experiences { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:34px; padding:26px 28px; border:1px solid #dce8f1; border-radius:18px; background:#f5fbff; }
.hopon-more-experiences h3 { margin:0 0 6px; color:#12395b; }
.hopon-more-experiences p { margin:0; color:#607386; }
.hopon-secondary-btn { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding:14px 20px; border:2px solid #0aaee8; border-radius:999px; color:#0879a6; font-weight:800; text-decoration:none; transition:.2s ease; }
.hopon-secondary-btn:hover { background:#0aaee8; color:#fff; text-decoration:none; }
@media (max-width:760px) {
  .hopon-category-hero { padding:52px 0 42px; }
  .hopon-experience-landing-grid { grid-template-columns:1fr; }
  .hopon-experience-landing-card { padding:24px; }
  .hopon-more-experiences { align-items:flex-start; flex-direction:column; }
  .hopon-secondary-btn { width:100%; }
}