/* ================================================
   SoftClean Pro – Luxury Dark/Light Theme
   Editable, commented, and readable
   ================================================ */

/* === COLOR & FONT VARIABLES ===================== */
:root {
  /* Fonts */
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-base);

  /* Dark theme colors (default) */
  --color-bg1: #0a0a0a;
  --color-bg2: #1a1a1a;
  --color-text: #f5f5f5;
  --color-text-muted: #b5b5b5;
  --color-accent: #d4af37;
  --color-accent-light: #e6c45a;
  --color-shadow: rgba(0, 0, 0, 0.5);
}

/* === GLOBAL BASE STYLES ========================== */
* { box-sizing: border-box; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  background: linear-gradient(180deg, var(--color-bg1), var(--color-bg2));
  color: var(--color-text);
  line-height: 1.6;
  transition: background-color 0.5s ease, color 0.5s ease;
  overflow-x: hidden;
}

.theme-transition {
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* === TEXT ELEMENTS =============================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

p { color: var(--color-text); }
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover { color: var(--color-accent-light); }

/* === NAVBAR ====================================== */
.navbar {
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
[data-theme="light"] .navbar {
  background: rgba(255,255,255,0.85);
  color: var(--color-text);
}

.brand-logo { height: 80px; width: auto; }
[data-theme="light"] .brand-logo {
  filter: brightness(0) saturate(100%) invert(74%) sepia(66%) saturate(395%) hue-rotate(10deg) brightness(101%) contrast(93%);
}

.brand-name { font-size: 2rem; color: var(--color-accent); font-weight: 700; }

.navbar .nav-link {
  color: var(--color-text) !important;
  font-weight: 600;
  transition: color 0.3s ease;
}
.navbar .nav-link:hover {
  color: var(--color-accent-light) !important;
}

#langBtn, #themeToggle {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
#langBtn:hover, #themeToggle:hover {
  background: var(--color-accent);
  color: #000;
}

/* === HERO SECTION ================================ */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.9));
}
[data-theme="light"] .hero-overlay {
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.8));
}
.hero-content { position: relative; z-index: 2; }
.text-gold { color: var(--color-accent); }

.btn-gold {
  background: var(--color-accent);
  color: #000;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(212,175,55,0.4);
  transition: all 0.4s ease;
}
.btn-gold:hover {
  background: var(--color-accent-light);
  box-shadow: 0 0 16px rgba(230,196,90,0.6);
}

/* === SECTION SPACING & HEADINGS ================== */
.section-space { padding: 80px 0; }
.section-heading-box {
  display: inline-block;
  background: rgba(212,175,55,0.1);
  padding: 0.6rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
[data-theme="light"] .section-heading-box {
  background: rgba(212,175,55,0.15);
}

/* === CARDS (Glass style) ========================= */
.card.glass {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
[data-theme="light"] .card.glass {
  background: rgba(255,255,255,0.8);
  border-color: rgba(212,175,55,0.25);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.card.glass:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 40px rgba(212,175,55,0.15);
  border-color: rgba(212,175,55,0.5);
}
.card-title { color: var(--color-accent); font-weight: 700; }

/* === BUILDER ===================================== */
#builderList .row-item {
  display: grid;
  grid-template-columns: 1fr 160px 100px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  margin-bottom: 10px;
}
#builderList .qtybtn {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  width: 34px; height: 34px;
  border-radius: 8px;
  font-weight: 700;
  transition: 0.3s;
}
#builderList .qtybtn:hover {
  background: var(--color-accent);
  color: #000;
}
#builderList span[id^="q-"] { width: 28px; text-align: center; display: inline-block; font-weight: 700; }
#builderList .priceCell { text-align: right; color: var(--color-accent-light); }

/* === FORMS ======================================= */
form .form-label {
  color: var(--color-accent-light);
  font-weight: 600;
}
form .form-control,
form .form-select,
form textarea {
  background: #111;
  border: 1px solid #333;
  color: var(--color-text);
}
[data-theme="light"] form .form-control,
[data-theme="light"] form .form-select,
[data-theme="light"] form textarea {
  background: #fff;
  border-color: #ddd;
  color: var(--color-text);
}
form .btn-primary {
  background: var(--color-accent);
  border: none;
  color: #000;
  font-weight: 700;
}
form .btn-primary:hover {
  background: var(--color-accent-light);
}

/* === FOOTER ====================================== */
.footer {
  background: #000;
  color: var(--color-text-muted);
}
[data-theme="light"] .footer {
  background: #faf5ef;
  color: var(--color-text-muted);
}
.footer .text-gold { color: var(--color-accent); }
.link-gold { color: var(--color-accent); }
.link-gold:hover { color: var(--color-accent-light); }

/* === COOKIE BANNER =============================== */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.95);
  color: var(--color-text);
  padding: 12px 0;
  display: none;
  z-index: 2000;
}
[data-theme="light"] .cookie-banner {
  background: rgba(255,255,255,0.95);
}

/* === ANIMATIONS ================================== */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s ease forwards;
}
.fade-up.delay-1 { animation-delay: 0.4s; }
.fade-up.delay-2 { animation-delay: 0.8s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* === RESPONSIVE ================================== */
@media (max-width: 768px) {
  .brand-logo { height: 60px; }
  .brand-name { font-size: 1.6rem; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
}
/* === COLOR FIXES: REPLACE NAVY WITH GOLD/WHITE === */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .navy,
[data-theme="light"] .text-navy {
  color: var(--color-accent); /* gold for headings */
}

[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] li,
[data-theme="light"] label {
  color: var(--color-text); /* dark brown body text in light mode */
}

[data-theme="dark"] .navy,
[data-theme="dark"] .text-navy {
  color: var(--color-text); /* white in dark mode */
}
/* === Global white text for dark cards === */
.card.glass,
.card.glass .card-body,
.card.glass .card-text,
.card.glass ul,
.card.glass li,
.card.glass p,
.card.glass h3,
.card.glass h4,
.card.glass h5,
.card.glass h6,
.card.glass strong,
.card.glass span {
  color: #fff !important;
}

/* Optional: make list bullets visible */
.card.glass ul li::marker {
  color: #d4af37; /* gold bullets for contrast */
}

/* Optional: ensure builder section text is readable */
#builder,
#builderList {
  color: #fff !important;
}

/* Optional: ensure payment cards stay readable */
#payments .card-body {
  color: #fff !important;
}
/* Change color of the blue info box */
.confirm-box,
.alert-info {
  background-color: #2b2b2b !important;  /* dark background */
  color: #fff !important;                 /* white text */
  border: 1px solid #d4af37;              /* optional gold border */
}

/* === Glistening gold hover effect for section headings === */
.section-heading-box {
  position: relative;
  background: rgba(212,175,55,0.1);
  border-radius: 12px;
  padding: 0.6rem 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: all 0.4s ease;
}

.section-heading-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 230, 150, 0.4),
    transparent
  );
  transition: all 0.6s ease;
}

.section-heading-box:hover {
  box-shadow: 0 0 25px rgba(212,175,55,0.5);
  background: rgba(212,175,55,0.15);
  transform: translateY(-3px);
}

.section-heading-box:hover::after {
  left: 100%;
}
/* === LIGHT MODE FIX: Make all white text dark === */
[data-theme="light"] .card.glass,
[data-theme="light"] .card.glass .card-body,
[data-theme="light"] .card.glass .card-text,
[data-theme="light"] .card.glass ul,
[data-theme="light"] .card.glass li,
[data-theme="light"] .card.glass p,
[data-theme="light"] .card.glass h3,
[data-theme="light"] .card.glass h4,
[data-theme="light"] .card.glass h5,
[data-theme="light"] .card.glass h6,
[data-theme="light"] .card.glass strong,
[data-theme="light"] .card.glass span {
  color: #2b1a0a !important; /* deep brown for readability on ivory background */
}
/* === LIGHT MODE: fix "Build your own package" card === */
[data-theme="light"] #builderList,
[data-theme="light"] #builderList * {
  color: var(--color-text) !important;     /* force all text dark */
}

/* make each row readable on ivory */
[data-theme="light"] #builderList .row-item {
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--line-color, rgba(212,175,55,0.35));
}

/* prices keep a gold-ish accent */
[data-theme="light"] #builderList .priceCell {
  color: var(--color-accent-light) !important;
}

/* qty buttons in light mode */
[data-theme="light"] #builderList .qtybtn {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
  background: transparent !important;
}
[data-theme="light"] #builderList .qtybtn:hover {
  background: var(--color-accent) !important;
  color: #000 !important;
}
[data-theme="light"] .confirm-box,
[data-theme="light"] .alert-info {
  background-color: #fefbf5 !important; /* soft ivory background */
  color: #2b1a0a !important;            /* dark brown text */
  border: 1px solid #d4af37;            /* gold accent border */
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); /* subtle golden glow */
}
/* === Make all service images equal height (car image included) === */
#services .card.glass {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
}

/* Force all images to have the same consistent height */
#services .card.glass .card-img-top {
  width: 100%;
  height: 520px; /* 👈 fixed uniform height for ALL images */
  object-fit: cover;
  display: block;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Unified text block under each image */
#services .card.glass .card-body {
  background: #111;
  padding: 1.5rem;
  flex-grow: 1;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
@media (max-width: 992px) {
  #services .card.glass .card-img-top {
    height: 360px;
  }
}
/* REVERT: apply to annual cards EXCEPT airbnb + fresh-plans */
#annual-wrapper :not(#airbnb):not(#fresh-plans) .card.glass .card-body {
  display: block !important;
  text-align: left !important;
  align-items: unset !important;
  justify-content: unset !important;
}

#annual-wrapper :not(#airbnb):not(#fresh-plans) .card.glass ul {
  list-style-position: outside !important;
  padding-left: 1.25rem !important;
  text-align: left !important;
}

/* titles normal alignment */
#annual-wrapper .card.glass .card-title,
#annual-wrapper .price {
  text-align: left !important;
}
/* Center text inside all package boxes without changing layout */
#annual-wrapper .card.glass .card-body {
  text-align: center;
}

#annual-wrapper .card.glass .card-title {
  display: block;
  text-align: center;
  margin-bottom: 0.5rem;
}

#annual-wrapper .card.glass .price,
#annual-wrapper .card.glass ul,
#annual-wrapper .card.glass p {
  text-align: center;
  margin: 0 auto;
}
/* === Center and highlight main package titles === */
#annual-wrapper .card.glass .card-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: #d4af37;
  position: relative;
  margin-bottom: 0.75rem;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 40%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.4), 0 0 12px rgba(255, 215, 0, 0.2);
}

/* === Subtext (pricing, bullets) centered neatly below === */
#annual-wrapper .card.glass .price,
#annual-wrapper .card.glass ul,
#annual-wrapper .card.glass p {
  text-align: center;
  color: #fff;
  font-size: 0.95rem;
  margin: 0 auto;
}

/* === Optional subtle glow on hover for interactive feel === */
#annual-wrapper .card.glass:hover .card-title {
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.4);
  transform: scale(1.02);
  transition: all 0.3s ease-in-out;
}

/* Keep them centered in their row */
#annual-wrapper .col-12 > h3.text-uppercase.text-center,
#annual-wrapper .col-12 > [data-key="hotels-heading"],
#annual-wrapper .col-12 > [data-key="fleets-heading"] {
  display: inline-block;
}

/* 1) Stop the glossy text effect from bleeding into the badge */
#annual-wrapper .card.glass .card-title .badge {
  -webkit-text-fill-color: #fff !important;   /* restore solid text color */
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
  filter: none !important;
}

/* 2) Theme the 24/7 badge to look crisp and premium */
#annual-wrapper .card.glass .card-title .badge.bg-success {
  /* glossy green pill */
  background: linear-gradient(145deg, #1a8038, #26c76a) !important;
  color: #fff !important;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  line-height: 1;
  padding: 0.35rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 4px 12px rgba(37, 199, 106, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.12);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
  display: inline-block;
}

/* 3) Subtle hover polish (optional) */
#annual-wrapper .card.glass .card-title .badge.bg-success:hover {
  background: linear-gradient(145deg, #22a95a, #2ee87a) !important;
  box-shadow:
    0 0 10px rgba(46, 232, 122, 0.55),
    0 0 22px rgba(46, 232, 122, 0.35);
  transform: scale(1.04);
}
/* =========================================================
   SERVICES: glossy gold heading + glow + lift on hover
   (Only affects the SERVICES section)
   ========================================================= */

/* Base card look (keeps your current glass style but enhances it a touch) */
#services .card.glass {
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.18); /* subtle gold edge */
  border-radius: 16px;
  background: rgba(255,255,255,0.04);        /* glassy panel */
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Lift + gold glow on hover */
#services .card.glass:hover {
  transform: translateY(-8px);
  box-shadow:
    0 0 24px rgba(212,175,55,.28),
    0 12px 50px rgba(0,0,0,.45);
  border-color: rgba(212,175,55,0.45);
}

/* Gold halo around the whole card when hovered (very subtle) */
#services .card.glass::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(1200px 200px at 50% -60%,
              rgba(212,175,55,.20), rgba(212,175,55,0) 60%);
  transition: opacity .35s ease;
}
#services .card.glass:hover::before { opacity: 1; }

/* ---------- Title: glossy gold + soft glow ---------- */
#services .card.glass .card-body :is(h1,h2,h3,h4,h5,h6):first-child {
  /* Glossy gold gradient text */
  background: linear-gradient(180deg, #f7e7a5 0%, #f0d36a 32%, #d4af37 65%, #b7922d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  letter-spacing: .3px;
  margin-bottom: .65rem;

  /* Soft outer glow */
  text-shadow:
    0 0 8px rgba(212,175,55,.32),
    0 0 16px rgba(212,175,55,.18);

  /* Nice underline bar (glow) */
  position: relative;
}
#services .card.glass .card-body :is(h1,h2,h3,h4,h5,h6):first-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.45rem;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(247,231,165,.9), rgba(212,175,55,.85));
  box-shadow:
    0 0 10px rgba(212,175,55,.6),
    0 0 20px rgba(212,175,55,.35);
  transition: width .35s ease, box-shadow .35s ease;
}

/* On hover, extend underline and intensify the glow on the title */
#services .card.glass:hover .card-body :is(h1,h2,h3,h4,h5,h6):first-child {
  text-shadow:
    0 0 10px rgba(247,231,165,.45),
    0 0 22px rgba(212,175,55,.35);
}
#services .card.glass:hover .card-body :is(h1,h2,h3,h4,h5,h6):first-child::after {
  width: 100px;
  box-shadow:
    0 0 14px rgba(247,231,165,.7),
    0 0 28px rgba(212,175,55,.5);
}

/* Body text remains readable; you already have good contrast */
#services .card.glass .card-body {
  color: #fff;
}

/* Light theme: tone down background, keep the gold */
[data-theme="light"] #services .card.glass {
  background: rgba(255,255,255,0.86);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
[data-theme="light"] #services .card.glass .card-body {
  color: #2b1a0a; /* your light text color */
}
[data-theme="light"] #services .card.glass:hover {
  box-shadow:
    0 0 24px rgba(212,175,55,.28),
    0 10px 30px rgba(0,0,0,.10);
}
/* =========================================================
   LOGO – Golden glossy lighting to match section headlines
   ========================================================= */

/* --- For the logo image itself --- */
.brand-logo {
  filter: brightness(1.2) saturate(1.4)
          drop-shadow(0 0 6px rgba(212,175,55,0.4))
          drop-shadow(0 0 18px rgba(212,175,55,0.25));
  transition: all 0.4s ease-in-out;
}

/* On hover, logo glows brighter */
.brand-logo:hover {
  filter: brightness(1.4) saturate(1.6)
          drop-shadow(0 0 12px rgba(247,231,165,0.8))
          drop-shadow(0 0 24px rgba(212,175,55,0.6));
  transform: scale(1.03);
}

/* --- For the brand name text next to the logo --- */
.brand-name {
  background: linear-gradient(180deg, #f7e7a5 0%, #f0d36a 32%, #d4af37 65%, #b7922d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 10px rgba(212,175,55,0.3),
    0 0 20px rgba(212,175,55,0.15);
  transition: text-shadow 0.4s ease-in-out;
}

/* On hover, increase glow for the text */
.brand-name:hover {
  text-shadow:
    0 0 12px rgba(247,231,165,0.6),
    0 0 26px rgba(212,175,55,0.4);
}
/* --- Centered layout --- */
#fleets {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --- Card centering and styling --- */
.fleet-package-box {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 16px;
  background: rgba(20, 20, 20, 0.9);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.15);
  transition: all 0.4s ease;
}

.fleet-package-box:hover {
  box-shadow: 0 0 35px rgba(212, 175, 55, 0.25);
  transform: translateY(-5px);
}

/* --- Glowing gold text effect --- */
.gold-glow {
  color: #d4af37;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4),
               0 0 25px rgba(212, 175, 55, 0.2),
               0 0 45px rgba(247, 231, 165, 0.15);
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
}

/* --- Subtle underline for section title --- */
.gold-glow::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, rgba(247,231,165,0.8), #d4af37, rgba(247,231,165,0.8));
  border-radius: 2px;
}
/* --- Center fleet section --- */
#fleets {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 0;
}

/* --- Centered Fleet Box --- */
.fleet-package-box {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem;
  border-radius: 16px;
  background: rgba(20, 20, 20, 0.9);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.15);
  transition: all 0.4s ease;
  text-align: center;
}

/* --- Hover glow --- */
.fleet-package-box:hover {
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.25);
  transform: translateY(-6px);
}

/* --- Center everything inside the box --- */
.fleet-package-box .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* --- Text adjustments --- */
.fleet-package-box ul {
  text-align: center;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.fleet-package-box li {
  margin-bottom: 0.5rem;
}

/* --- Glowing gold title --- */
.fleet-package-box .card-title {
  color: #d4af37;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4),
               0 0 25px rgba(212, 175, 55, 0.2),
               0 0 45px rgba(247, 231, 165, 0.15);
  position: relative;
  margin-bottom: 1rem;
}

/* --- Gold underline --- */
.fleet-package-box .card-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, rgba(247,231,165,0.8), #d4af37, rgba(247,231,165,0.8));
  border-radius: 2px;
}

/* --- Center footer note --- */
.fleet-package-box p {
  text-align: center;
  margin-top: 1.5rem;
  color: #fff;
}
/* Center the whole fleets row and its children */
#fleets {
  justify-content: center !important;   /* center the flex children (Bootstrap row) */
}

/* Make both .col-12 wrappers center their content */
#fleets > .col-12 {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

/* 1) Center the "CAR FLEETS" (h3) heading */
#fleets > .col-12:first-child h3 {
  text-align: center !important;
  margin: 0 auto !important;
}

/* 2) Center the card itself and give it a max width */
#fleets .card.glass {
  width: 100%;
  max-width: 1100px;            /* adjust to taste */
  margin: 0 auto !important;    /* centers the card in the row */
}

/* 3) Center everything inside the card */
#fleets .card.glass .card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* The UL and bullets */
#fleets .card.glass ul {
  list-style: none;
  padding-left: 0;
  margin: 0 auto !important;
  text-align: center !important;
}

#fleets .card.glass li {
  display: block;
  margin-bottom: .5rem;
}

/* Optional: make the "Fleet Package" title look consistent and centered */
#fleets .card.glass .card-title {
  text-align: center !important;
  margin: 0 auto 1rem auto !important;
  color: #d4af37;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow:
    0 0 10px rgba(212, 175, 55, 0.4),
    0 0 25px rgba(212, 175, 55, 0.2),
    0 0 45px rgba(247, 231, 165, 0.15);
  position: relative;
}

#fleets .card.glass .card-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, rgba(247,231,165,0.8), #d4af37, rgba(247,231,165,0.8));
  border-radius: 2px;
}

/* Center the footnote paragraph */
#fleets .card.glass p {
  text-align: center !important;
  margin-top: 1.25rem;
}
/* === Make "Build Your Own Package" identical to OUR SERVICES & PAKIETY === */
#builder h2 {
  display: inline-block;
  background: rgba(255, 204, 0, 0.1);
  color: #d4af37;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.8rem 2.5rem;
  border-radius: 16px;
  box-shadow:
    0 0 30px rgba(212, 175, 55, 0.4),
    inset 0 0 10px rgba(212, 175, 55, 0.15);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  transition: all 0.3s ease;
  font-size: 1.5rem;
  letter-spacing: 1px;
}

/* Hover effect — soft golden glow, identical to OUR SERVICES */
#builder h2:hover {
  box-shadow:
    0 0 45px rgba(212, 175, 55, 0.6),
    inset 0 0 15px rgba(212, 175, 55, 0.3);
  transform: translateY(-2px);
}

/* Center it horizontally like other buttons */
#builder {
  text-align: center;
}

/* Keep the golden glow and lighting consistent */
#annual-wrapper h3,
#services h3,
#fleets h3 {
  color: #ffcc33;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 204, 51, 0.6),
               0 0 20px rgba(255, 204, 51, 0.3);
}
/* 3D flip — only for the six small cards */
.flip-card{
  position: relative;
  min-height: 220px;               /* keep height similar to your current cards */
  border-radius: 1rem;             /* matches .glass radius */
  overflow: hidden;
  perspective: 1000px;             /* depth */
}

.flip-inner{
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2,.7,.2,1);
}

.flip-card.is-flipped .flip-inner{
  transform: rotateY(180deg);
}

.flip-face{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 1rem 1.25rem;
  backface-visibility: hidden;
  text-align: center;
}

.flip-front small.text-gold-weak{
  color: rgba(255, 208, 80, .85);
  letter-spacing: .2px;
}

.flip-back{
  transform: rotateY(180deg);
}

.flip-btn{
  position: absolute; inset: 0;
  background: transparent; border: 0;
  cursor: pointer;
}
.flip-btn:focus-visible{
  outline: 2px solid rgba(255,208,80,.85);
  outline-offset: 2px;
  border-radius: 1rem;
}

/* subtle hover/focus depth */
.flip-card:hover .flip-inner,
.flip-card:has(.flip-btn:focus-visible) .flip-inner{
  box-shadow: 0 0 28px rgba(255,208,80,.12);
}

/* motion preference */
@media (prefers-reduced-motion: reduce){
  .flip-inner{ transition: none; }
}
/* =========================================================
   FLIP-CARD TITLES — glossy gold + lighting line on hover
   (CSS-only, no HTML/JS edits needed)
   ========================================================= */

/* 1) Base look for the title on the FRONT side */
#services .flip-card .flip-front :is(h1,h2,h3,h4,h5,h6) {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .6px;

  /* same glossy gold text used elsewhere */
  background: linear-gradient(180deg, #f7e7a5 0%, #f0d36a 32%, #d4af37 65%, #b7922d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* subtle idle halo */
  text-shadow: 0 0 8px rgba(212,175,55,.28), 0 0 16px rgba(212,175,55,.16);

  margin-bottom: .65rem;
  transition: text-shadow .28s ease;
}

/* underline "lighting line" (short by default) */
#services .flip-card .flip-front :is(h1,h2,h3,h4,h5,h6)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.45rem;
  width: 72px;                /* short */
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(247,231,165,.9), rgba(212,175,55,.85));
  box-shadow: 0 0 10px rgba(212,175,55,.55), 0 0 20px rgba(212,175,55,.32);
  opacity: .95;
  pointer-events: none;
  transition: width .28s ease, box-shadow .28s ease;
}

/* 2) WORD-ONLY shine triggers:
      - when the WORD is hovered/focused, OR
      - when the OVERLAY BUTTON is hovered/focused (since it sits on top)
*/
#services .flip-card .flip-front :is(h1,h2,h3,h4,h5,h6):hover,
#services .flip-card .flip-front :is(h1,h2,h3,h4,h5,h6):focus-visible,
#services .flip-card:has(.flip-btn:hover) .flip-front :is(h1,h2,h3,h4,h5,h6),
#services .flip-card:has(.flip-btn:focus-visible) .flip-front :is(h1,h2,h3,h4,h5,h6) {
  text-shadow: 0 0 10px rgba(247,231,165,.48), 0 0 22px rgba(212,175,55,.36);
  outline: 2px solid rgba(212,175,55,.45);
  outline-offset: 4px;
  border-radius: 6px;
}

#services .flip-card .flip-front :is(h1,h2,h3,h4,h5,h6):hover::after,
#services .flip-card .flip-front :is(h1,h2,h3,h4,h5,h6):focus-visible::after,
#services .flip-card:has(.flip-btn:hover) .flip-front :is(h1,h2,h3,h4,h5,h6)::after,
#services .flip-card:has(.flip-btn:focus-visible) .flip-front :is(h1,h2,h3,h4,h5,h6)::after {
  width: 100px; /* extends while interacting */
  box-shadow: 0 0 14px rgba(247,231,165,.7), 0 0 28px rgba(212,175,55,.5);
}

/* 3) Ensure other global rules don't override this look on dark cards */
.card.glass h3,
.card.glass h4,
.card.glass h5,
.card.glass h6 {
  /* allow gradient fill above to show */
  -webkit-text-fill-color: initial;
}

/* 4) Light theme tweak: keep glossy text visible on ivory */
[data-theme="light"] #services .flip-card .flip-front :is(h1,h2,h3,h4,h5,h6) {
  -webkit-text-fill-color: transparent;
}
/* WINDOW CLEANING (service4) — digital-only price on back */
#services .flip-card .flip-back .price-amt,
#services .flip-card .flip-back .line-amount {
  background: linear-gradient(180deg, #fff7c2 0%, #f6e27a 35%, #e5c95e 60%, #d4af37 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 8px rgba(255, 236, 170, .55), 0 0 18px rgba(212, 175, 55, .35);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =====================================================
   Airbnb Packages — match "Window Cleaning" digital style
   ===================================================== */

/* Remove underline under PLN */
#annual-wrapper #airbnb .price .amount-main::after {
  display: none !important;
}

/* Big number — gold luminous, same as Window Cleaning */
#annual-wrapper #airbnb .price .amount-main {
  display: block;
  font-size: clamp(32px, 3.8vw, 46px);
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #ffdc73;
  text-shadow:
    0 0 8px rgba(255, 220, 115, 0.65),
    0 0 22px rgba(212, 175, 55, 0.45),
    0 0 45px rgba(212, 175, 55, 0.25);
  text-align: center;
  margin-bottom: 0.25rem;
}

/* The "/ month + VAT" line — golden glow, small digital style */
#annual-wrapper #airbnb .price .amount-sub {
  display: block;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  color: #ffd966;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: 0.4px;
  text-shadow:
    0 0 6px rgba(255, 220, 115, 0.55),
    0 0 16px rgba(212, 175, 55, 0.35);
}

/* Center Airbnb cards vertically and evenly */
#annual-wrapper #airbnb .card.glass .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
}

/* === FRESH PLANS – identical to Airbnb === */
#annual-wrapper #fresh-plans .price .amount-main {
  display: block;
  font-size: clamp(32px, 3.8vw, 46px);
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #ffdc73;
  text-shadow:
    0 0 8px rgba(255, 220, 115, 0.65),
    0 0 22px rgba(212, 175, 55, 0.45),
    0 0 45px rgba(212, 175, 55, 0.25);
  text-align: center;
  margin-bottom: 0.25rem;
  white-space: nowrap;
}

#annual-wrapper #fresh-plans .price .amount-sub {
  display: block;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  color: #ffd966;
  text-align: center;
  letter-spacing: 0.4px;
  text-shadow:
    0 0 6px rgba(255, 220, 115, 0.55),
    0 0 16px rgba(212, 175, 55, 0.35);
  white-space: nowrap;
}

#annual-wrapper #fresh-plans .card.glass .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
}

/* Title identical to Airbnb */
#annual-wrapper #fresh-plans .card.glass .card-title {
  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 45%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.35),
    0 0 14px rgba(255, 215, 0, 0.18);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
}

/* =========================================================
   CAR INTERIOR CLEANING (service5) — digital-only price
   ========================================================= */

/* 1) Hide the front helper line for this one card */
#services .flip-card:has(.flip-front [data-key="service5"]) .flip-front small {
  display: none !important;
}

/* 2) Hide all back content and show a luxe price only */
#services .flip-card:has(.flip-front [data-key="service5"]) .flip-back > * {
  display: none !important;
}

#services .flip-card:has(.flip-front [data-key="service5"]) .flip-back {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2.25rem 1.5rem;
}

/* PRICE — edit this number if needed */
#services .flip-card:has(.flip-front [data-key="service5"]) .flip-back::before {
  content: "300 PLN"; /* ← update here if the price changes */
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;

  /* glossy gold “digital” vibe */
  background: linear-gradient(180deg, #fff7c2 0%, #f6e27a 35%, #e5c95e 60%, #d4af37 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 8px rgba(255, 236, 170, .55),
    0 0 18px rgba(212, 175, 55, .35);

  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3) Digital golden underline */
#services .flip-card:has(.flip-front [data-key="service5"]) .flip-back::after {
  content: "";
  position: absolute;
  bottom: clamp(16px, 3.2vh, 24px);
  left: 50%;
  transform: translateX(-50%);
  width: min(160px, 60%);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(247,231,165,.95) 0%, #d4af37 65%, rgba(212,175,55,0) 100%);
  box-shadow:
    0 0 10px rgba(212,175,55,.55),
    0 0 22px rgba(212,175,55,.35);
}

/* 4) Hover shine */
#services .flip-card:has(.flip-front [data-key="service5"]):hover .flip-back::before {
  text-shadow:
    0 0 10px rgba(255,236,170,.7),
    0 0 26px rgba(212,175,55,.5);
}
#services .flip-card:has(.flip-front [data-key="service5"]):hover .flip-back::after {
  box-shadow:
    0 0 14px rgba(247,231,165,.75),
    0 0 30px rgba(212,175,55,.5);
}

/* Light mode compatibility */
[data-theme="light"] #services .flip-card:has(.flip-front [data-key="service5"]) .flip-back::before {
  -webkit-text-fill-color: transparent;
}
/* Lift the CAR FLEETS section upward */
#fleets {
  margin-top: -60px; /* move up */
  position: relative;
  z-index: 2;
}

/* Optional: tighten the space below too */
#fleets {
  padding-top: 20px; /* reduces top whitespace within */
}

/* Keep visual balance between title and card */
#fleets h3, 
#fleets h4 {
  margin-bottom: 10px;
}
/* Simple banner that sits above each service title */
.service-banner{
  width: 100%;
  height: 220px;                 /* the visible image area */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 14px;
  margin-bottom: 14px;
  display: block;
  box-shadow: 0 0 10px rgba(212,175,55,.15);
  transition: filter .35s ease, box-shadow .35s ease, transform .25s ease;
}
.service-card:hover .service-banner{
  filter: brightness(1.18) saturate(1.12);
  box-shadow: 0 0 26px rgba(212,175,55,.4), 0 0 48px rgba(212,175,55,.22);
  transform: translateY(-2px);
}

@media (max-width: 768px){
  .service-banner{ height: 180px; }
}
/* was: text-transform: lowercase; */
#annual-wrapper #airbnb .price .amount-sub {
  display: block;
  font-weight: 700;
  /* keep the whole "/ miesiąc + VAT" on one line */
  white-space: nowrap;
  text-transform: none;         /* << stop lowercasing */
}

/* optional: keep the big number on one line too */
#annual-wrapper #airbnb .price .amount-main {
  white-space: nowrap;
}
.service-banner-img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 14px;
  display: block;
  box-shadow: 0 0 10px rgba(212,175,55,.15);
  transition: filter .35s ease, box-shadow .35s ease, transform .25s ease;
}
.service-card:hover .service-banner-img{
  filter: brightness(1.18) saturate(1.12);
  box-shadow: 0 0 26px rgba(212,175,55,.4), 0 0 48px rgba(212,175,55,.22);
  transform: translateY(-2px);
}
@media (max-width: 768px){
  .service-banner-img{ height: 180px; }
}
.flip-card { position: relative; }
.flip-inner { position: relative; }
.flip-face { position: absolute; inset: 0; }
.flip-btn { position: absolute; inset: 0; z-index: 3; } /* ensure on top */
/* --- Services: fix banner framing & alignment inside flip cards --- */
#services .flip-card{
  /* more room for banner + title + helper line */
  min-height: 360px;            /* adjust to taste (320–380 works) */
}

/* give both faces some inner padding so the card border/frame shows */
#services .flip-card .flip-front,
#services .flip-card .flip-back{
  padding: 16px;                /* ensures the “frame” isn’t eaten */
  box-sizing: border-box;
}

/* stack content from the top instead of centering vertically */
#services .flip-card .flip-front{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  /* key change */
  gap: 10px;                    /* space between image, title, small text */
}

/* banner image sizing + rounded corners inside the frame */
.service-banner-img{
  width: 100%;
  height: 220px;                /* same as you used before */
  object-fit: cover;
  border-radius: 12px;          /* slightly smaller than card radius */
  margin: 0;                    /* no extra negative spacing */
}

/* tidy title spacing */
#services .flip-card .flip-front h3{
  margin: .25rem 0 0;
  text-align: center;
}

/* tidy helper line spacing */
#services .flip-card .flip-front small{
  margin-top: .15rem;
}

/* optional: smaller cards on mobile */
@media (max-width: 768px){
  #services .flip-card{ min-height: 320px; }
  .service-banner-img{ height: 180px; }
}
/* === GLOW EFFECT ON SERVICE CARDS === */
.flip-card.glass {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 20px;
  overflow: hidden;
}

/* glowing border + image brightness lift on hover */
.flip-card.glass:hover {
  box-shadow: 0 0 25px 5px rgba(255, 215, 0, 0.35); /* warm gold glow */
  transform: translateY(-4px); /* gentle lift */
}

.flip-card.glass:hover .service-banner-img {
  filter: brightness(1.1);
  transition: filter 0.3s ease;
}

/* ensure images fill their area cleanly */
.service-banner-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transition: filter 0.3s ease;
}
/* --- Fix inconsistent glow (removes internal halo) --- */
.flip-card.glass {
  background: rgba(20, 20, 20, 0.8); /* uniform dark base */
  box-shadow: none; /* remove any inner shadow or light bleed */
  border: 1px solid rgba(255, 215, 0, 0.15); /* subtle gold edge */
}

/* consistent hover for ALL cards */
.flip-card.glass:hover {
  box-shadow: 0 0 25px 5px rgba(255, 215, 0, 0.35); /* external glow only */
  transform: translateY(-4px);
}

/* prevent image from glowing separately */
.flip-card.glass:hover .service-banner-img {
  filter: brightness(1.1);
  box-shadow: none;
}
/* ===== Luxe pricing on flip-back ===== */
#services .flip-card .flip-back{
  padding: 18px 22px;
  display: grid;
  place-items: center;
}

#services .flip-card .flip-back ul{
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 520px;
}

#services .flip-card .flip-back li{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .6rem;
  padding: .45rem .75rem;
  border-radius: 12px;
  line-height: 1.45;
  letter-spacing: .2px;
  color: #eaeaea;                 /* elegant white */
  font-variant-numeric: tabular-nums;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

#services .flip-card .flip-back li + li{
  margin-top: .35rem;
  border-top: 1px solid rgba(212,175,55,.12);
  padding-top: .6rem;
}

/* left side (name / size) */
#services .flip-card .flip-back .item-label{
  color: rgba(255,255,255,.85);
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0,0,0,.25);
}

/* arrow/separator */
#services .flip-card .flip-back .sep{
  color: var(--color-accent-light);
  opacity: .9;
}

/* right side (price) – glossy gold */
#services .flip-card .flip-back .price-amt{
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
  background: linear-gradient(180deg,#fff7c2 0%,#f6e27a 35%,#e5c95e 60%,#d4af37 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 8px rgba(255,236,170,.38),
    0 0 18px rgba(212,175,55,.28);
}

/* hover polish on each row */
#services .flip-card .flip-back li:hover{
  background: rgba(255,255,255,.05);
  box-shadow:
    0 0 16px rgba(212,175,55,.16),
    inset 0 0 0 1px rgba(212,175,55,.18);
  transform: translateY(-1px);
}

[data-theme="light"] #services .flip-card .flip-back li{
  color: #2b1a0a;
}
[data-theme="light"] #services .flip-card .flip-back .item-label{ color:#2b1a0a; }
/* === SERVICE PRICE LISTS — ELEGANT GOLD TEXT, NO BOX BACKGROUNDS === */
#services .flip-card .flip-back ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

#services .flip-card .flip-back ul li {
  background: none !important;          /* remove boxes */
  box-shadow: none !important;          /* remove card shadow */
  font-size: clamp(16px, 1.2vw, 20px);  /* balanced sizing */
  font-weight: 500;
  color: #f8e7b4;                       /* warm gold base */
  text-shadow:
    0 0 4px rgba(255, 215, 0, 0.5),
    0 0 12px rgba(255, 215, 0, 0.3),
    0 0 22px rgba(255, 190, 0, 0.25);   /* glowing light */
  line-height: 1.7;
  letter-spacing: 0.3px;
  margin: 6px 0;
}

/* Label + arrow slightly dimmer for contrast */
#services .flip-card .flip-back .line-label,
#services .flip-card .flip-back .line-sep {
  color: #f6d670;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.25);
  font-weight: 400;
}

/* The amount — strong, glowing gold */
#services .flip-card .flip-back .line-amount {
  color: #ffefaf;
  font-weight: 700;
  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.8),
    0 0 14px rgba(255, 215, 0, 0.45),
    0 0 26px rgba(255, 200, 0, 0.3);
}

/* Light mode balance */
[data-theme="light"] #services .flip-card .flip-back ul li {
  color: #b78d1d;
  text-shadow: 0 0 3px rgba(247, 231, 165, 0.45);
}
[data-theme="light"] #services .flip-card .flip-back .line-amount {
  color: #d4af37;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.45);
}
/* === Make the six service card images match the 3 featured images === */

/* the flip card clips and owns the rounding like your featured cards */
#services .flip-card.glass {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* remove any internal padding that creates a frame gap */
#services .flip-card .flip-front,
#services .flip-card .flip-back {
  padding: 0 !important;
}

/* IMAGE: identical metrics to .card-img-top on featured cards */
#services .flip-card .service-banner-img {
  display: block !important;
  width: 100% !important;
  height: 200px !important;              /* ← same as featured cards */
  object-fit: cover !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* keep the title/helper line below the image with some padding */
#services .flip-card .flip-front h3,
#services .flip-card .flip-front small {
  padding: 12px 16px !important;
}

/* responsive height identical to featured cards */
@media (max-width: 992px) {
  #services .flip-card .service-banner-img {
    height: 360px !important;            /* ← same as featured cards on tablet/mobile */
  }
}

/* ---- service5: 300 PLN ---- */
#services .flip-card:has(.flip-front [data-key="service5"]) .flip-back::before {
  content: "300 PLN";
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(180deg,#fff7c2 0%,#f6e27a 35%,#e5c95e 60%,#d4af37 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 8px rgba(255,236,170,.55), 0 0 18px rgba(212,175,55,.35);
  font-variant-numeric: tabular-nums;
}
#services .flip-card:has(.flip-front [data-key="service5"]) .flip-back::after {
  content: "";
  position: absolute;
  bottom: clamp(16px,3.2vh,24px);
  left: 50%;
  transform: translateX(-50%);
  width: min(160px, 60%);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(247,231,165,.95) 0%, #d4af37 65%, rgba(212,175,55,0) 100%);
  box-shadow: 0 0 10px rgba(212,175,55,.55), 0 0 22px rgba(212,175,55,.35);
}

#services .flip-card:has(.flip-front [data-key="service5"]) .flip-back::after {
  position: absolute;         /* ⬅ same problem for service5 */
  bottom: clamp(16px, 3.2vh, 24px);
  left: 50%;
  transform: translateX(-50%);
}

#services .flip-card:has(.flip-front [data-key="service5"]) .flip-back::after{
  position: static !important;  /* overrides position:absolute */
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: block;
  width: 120px;
  height: 6px;
  margin-top: 12px;             /* gap below the number */
  border-radius: 999px;
}

#services .flip-card:has(.flip-front [data-key="service5"]) .flip-back{
  position: absolute !important;   /* the face already uses inset:0 */
  inset: 0 !important;              /* fill the whole card */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;  /* vertical center */
  align-items: center !important;       /* horizontal center */
  text-align: center !important;
  padding: 0 !important;               /* avoid shifting from padding */
  min-height: 100% !important;
}

/* keep the underline directly under the number while centered */
#services .flip-card:has(.flip-front [data-key="service5"]) .flip-back::after{
  position: static !important;   /* not bottom of the card */
  margin-top: 12px !important;   /* gap below the number */
}
/* === REMOVE LIGHT MODE TOGGLE BUTTON COMPLETELY === */
#themeToggle,
[data-theme-toggle],
button[onclick*="theme"],
button[id*="theme"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* === HOTELS: glossy titles + glowing list lines === */
#hotels .card.glass .card-title{
  background: linear-gradient(180deg,#f7e7a5 0%,#f0d36a 32%,#d4af37 65%,#b7922d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow:
    0 0 8px rgba(212,175,55,.35),
    0 0 18px rgba(212,175,55,.2);
  position: relative;
  margin-bottom: .85rem;
}
#hotels .card.glass .card-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-.45rem;
  width:78px; height:3px; border-radius:999px;
  background: linear-gradient(90deg,rgba(247,231,165,.9),rgba(212,175,55,.85));
  box-shadow: 0 0 10px rgba(212,175,55,.55), 0 0 20px rgba(212,175,55,.32);
}

/* List container */
#hotels .card.glass ul{
  list-style:none;               /* custom bullets below */
  margin:0; padding-left:0;
}

/* Each line: soft gold text + glow */
#hotels .card.glass ul li{
  position: relative;
  padding: .35rem .5rem .35rem 1.6rem; /* room for the bullet */
  color:#f8e7b4;
  text-shadow:
    0 0 4px rgba(255,215,0,.45),
    0 0 12px rgba(255,215,0,.25),
    0 0 20px rgba(255,190,0,.18);
  letter-spacing:.2px;
  line-height:1.6;
  border-radius:10px;
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}

/* Glowing bullet */
#hotels .card.glass ul li::before{
  content:"•";
  position:absolute; left:.35rem; top:.1rem;
  font-size:1.15rem; line-height:1;
  color:#ffd666;
  text-shadow:
    0 0 8px rgba(255,215,0,.75),
    0 0 18px rgba(212,175,55,.55);
}

/* Amounts in strong: glossy gold digits */
#hotels .card.glass ul li strong{
  background: linear-gradient(180deg,#fff7c2 0%,#f6e27a 35%,#e5c95e 60%,#d4af37 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:800;
  text-shadow:
    0 0 8px rgba(255,236,170,.45),
    0 0 18px rgba(212,175,55,.35);
  white-space: nowrap;
}

/* Hover polish per line */
#hotels .card.glass ul li:hover{
  background: rgba(255,255,255,.05);
  box-shadow:
    0 0 16px rgba(212,175,55,.16),
    inset 0 0 0 1px rgba(212,175,55,.18);
  transform: translateY(-1px);
}

/* Optional: slight extra glow when the card itself is hovered */
#hotels .card.glass:hover{
  box-shadow:
    0 0 24px rgba(212,175,55,.22),
    0 12px 50px rgba(0,0,0,.45);
  border-color: rgba(212,175,55,.45);
}

/* ===== Form placeholder visibility fix ===== */

/* Make all form input and textarea placeholders white and readable */
::placeholder {
  color: #fff !important;         /* solid white */
  opacity: 1 !important;          /* disable gray transparency */
}

/* Also apply to Bootstrap’s form-control elements explicitly */
.form-control::placeholder {
  color: #fff !important;
  opacity: 1 !important;
}

/* Optional: keep text color consistent when typing */
.form-control, 
.form-select, 
textarea.form-control {
  color: #fff;
}
/* District dropdown styling (dark theme) */
#districtSelect,
#districtSelect option,
.form-select {
  color: #fff;
  background-color: #0f0f0f;
  border-color: rgba(242,201,76,.35);
}

#districtSelect:focus {
  border-color: #F2C94C;
  box-shadow: 0 0 0 .2rem rgba(242,201,76,.25);
}

/* Make the placeholder (first disabled option) readable */
#districtSelect option[disabled] {
  color: rgba(255,255,255,.7);
}
/* ===== MOBILE-ONLY FIXES (no desktop changes, no size changes) ===== */
@media (max-width: 576px) {

  /* 1) Stop headings/text from getting cut off */
  .card.glass,
  .flip-card,
  .flip-inner,
  .flip-face {
    overflow: visible !important;
  }
  .card-title,
  .section-heading,
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal !important;
  }

  /* 2) Images behave (no giant fixed heights on phone) */
  .card-img-top,
  .service-banner-img,
  #services .card.glass .card-img-top,
  #services .flip-card .service-banner-img {
    max-width: 100%;
    height: auto !important;     /* remove fixed heights only on phone */
    object-fit: cover;           /* keep them neat without stretching */
  }

  /* 3) Prevent accidental horizontal scroll */
  html, body { overflow-x: hidden; }

  /* 4) Keep hero text from overflowing */
  .hero .display-4,
  .hero .lead { white-space: normal !important; }

  /* 5) Small padding to avoid edge clipping on phones (not desktop) */
  .section-space { padding-left: 12px; padding-right: 12px; }

  /* 6) iPhone safe areas so header/footer don’t collide with notch/home bar */
  .navbar { padding-top: env(safe-area-inset-top); }
  .footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
/* ===== Fleets pricing: no bullets; pill appears ONLY on hover ===== */
#fleets .card.glass ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#fleets .card.glass ul li {
  position: relative;
  /* no bullet indent */
  padding: .60rem 1rem;
  margin: .60rem 0;

  /* default: plain text line (no pill) */
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px;
  box-shadow: none !important;

  color: #f8e7b4;
  line-height: 1.6;
  letter-spacing: .2px;
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}

/* remove any prior custom bullets */
#fleets .card.glass ul li::before { display: none !important; }

/* glossy gold numbers remain like hotels */
#fleets .card.glass ul li strong{
  background: linear-gradient(180deg,#fff7c2 0%,#f6e27a 35%,#e5c95e 60%,#d4af37 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  white-space: nowrap;
  text-shadow:
    0 0 8px rgba(255,236,170,.45),
    0 0 18px rgba(212,175,55,.35);
}

/* HOVER: show pill with subtle gold outline + glow (like your screenshot) */
#fleets .card.glass ul li:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(242,201,76,.35) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.35),             /* drop shadow */
    0 0 18px rgba(242,201,76,.18),          /* outer gold glow */
    inset 0 0 0 1px rgba(242,201,76,.18);   /* crisp inner line */
  transform: translateY(-1px);
}
/* ===== PHONE-ONLY alignment fixes for SERVICES (no size changes) ===== */
@media (max-width: 576px) {

  /* 1) Prevent clipping/cropping in flip cards */
  #services .flip-card,
  #services .flip-inner,
  #services .flip-face {
    overflow: visible !important;
  }

  /* 2) Keep content stacked neatly from the top on the FRONT/BACK faces */
  #services .flip-card .flip-front,
  #services .flip-card .flip-back {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* 3) Make all service images consistent without changing their desktop sizes */
  #services .flip-card .service-banner-img {
    width: 100% !important;
    height: auto !important;          /* let the phone decide height */
    aspect-ratio: 16 / 10 !important; /* same visual height for every card */
    object-fit: cover !important;
    display: block !important;
  }

  /* 4) Headings and helper lines won’t wrap weirdly */
  #services .flip-card h3,
  #services .flip-card small {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    margin: 0 12px !important;        /* keeps edges clean on narrow phones */
  }

  /* 5) Remove tiny misalign caused by column padding on some devices */
  #services .row.g-4 > [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 6) No horizontal scroll on the services area */
  #services { overflow-x: hidden !important; }
}
/* === MAKE "PRICE CALCULATOR" GLOW LIKE AIRBNB / APARTHOTEL === */
#calculator h2 {
  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 45%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.35),
    0 0 14px rgba(255, 215, 0, 0.18);

  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}
/* --- EXTRA GLOW ON HOVER --- */
#calculator h2:hover {
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 20px rgba(255, 215, 0, 0.35),
    0 0 20px rgba(255, 215, 0, 0.35); 
  transform: translateY(-2px);
  transition: all 0.25s ease;
}
/* --- MATCH EXACT GLOW FOR ALL THESE SECTIONS --- */
#booking h2:hover,
#payments h2:hover,
#contact h2:hover,
#faq h2:hover {
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 20px rgba(255, 215, 0, 0.35);
  transform: translateY(-2px);
  transition: all 0.25s ease;
}
/* === MAKE ALL SECTION HEADINGS GLOW LIKE PRICE CALCULATOR === */
#booking h2,
#payments h2,
#contact h2,
#faq h2 {
  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 45%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.35),
    0 0 14px rgba(255, 215, 0, 0.18);

  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}
/* --- LUXURY TEXT STYLE FOR WHY CHOOSE US --- */
#why-box p {
  font-size: 1.05rem;       /* slightly larger, elegant */
  line-height: 1.75;        /* more breathing room */
  letter-spacing: 0.3px;    /* subtle luxury spacing */
  color: #e6e6e6;           /* softer premium white */
  font-weight: 300;         /* light, refined look */
  font-family: 'Poppins', sans-serif; /* matches your brand */
}
/* === GLOW FOR "WHY CHOOSE US" / "DLACZEGO MY" === */
#why h2 {
  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 45%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.35),
    0 0 14px rgba(255, 215, 0, 0.18);

  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
  transition: all 0.25s ease;
}

/* Hover glow — SAME INTENSITY AS THE OTHERS */
#why h2:hover {
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 22px rgba(255, 215, 0, 0.4),
    0 0 35px rgba(255, 215, 0, 0.35);
  transform: translateY(-2px);
}
#why {
  margin-top: -60px; /* lift the entire section upward */
}

#why h2 {
  margin-bottom: 30px; /* add clean spacing between title and text */
}
/* Neon flicker animation for WHY CHOOSE US text block */
#why p {
  animation: neonPulse 2.8s infinite ease-in-out;
}

@keyframes neonPulse {
  0% {
    opacity: 0.75;
    text-shadow: 
      0 0 6px rgba(255, 215, 0, 0.25),
      0 0 12px rgba(255, 215, 0, 0.2);
  }
  50% {
    opacity: 1;
    text-shadow: 
      0 0 10px rgba(255, 215, 0, 0.45),
      0 0 20px rgba(255, 215, 0, 0.35),
      0 0 35px rgba(255, 215, 0, 0.25);
  }
  100% {
    opacity: 0.75;
    text-shadow: 
      0 0 6px rgba(255, 215, 0, 0.25),
      0 0 12px rgba(255, 215, 0, 0.2);
  }
}
#why p[data-key="why-desc"] {
  font-size: 1.3rem;     /* increase size */
  line-height: 1.6;      /* smoother luxury spacing */
  text-align: center;    /* horizontal centered line */
  max-width: 900px;      /* prevents too-long stretching */
  margin: 0 auto;        /* centers the block */
}
/* === Make HOTELS pricing identical to AIRBNB pricing === */
#hotels .price .amount-main {
  display: block;
  font-size: clamp(32px, 3.8vw, 46px);
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #ffdc73;
  text-shadow:
    0 0 8px rgba(255, 220, 115, 0.65),
    0 0 22px rgba(212, 175, 55, 0.45),
    0 0 45px rgba(212, 175, 55, 0.25);
  text-align: center;
  margin-bottom: 0.25rem;
  white-space: nowrap;
}

#hotels .price .amount-sub {
  display: block;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  color: #ffd966;
  text-align: center;
  letter-spacing: 0.4px;
  text-shadow:
    0 0 6px rgba(255, 220, 115, 0.55),
    0 0 16px rgba(212, 175, 55, 0.35);
  white-space: nowrap;
}

/* identical card spacing as Airbnb */
#hotels .card.glass .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
}

/* identical glossy section heading */
#hotels .col-12 h3 {
  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 45%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.35),
    0 0 14px rgba(255, 215, 0, 0.18);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 1px;
}
/* === MONTHLY SUBSCRIPTIONS TITLE (same style as AIRBNB/APARTHOTELE) === */
#subscriptions-title {
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;

  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 45%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.35),
    0 0 22px rgba(255, 215, 0, 0.2);

  transition: all .25s ease;
  cursor: default;
}

/* Hover lighting — identical to your AIRBNB section */
#subscriptions-title:hover {
  text-shadow:
    0 0 12px rgba(255, 215, 0, 0.6),
    0 0 26px rgba(255, 215, 0, 0.4),
    0 0 32px rgba(255, 215, 0, 0.25);
  transform: translateY(-2px);
}
.section-gold-title {
  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 45%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.35),
    0 0 14px rgba(255, 215, 0, 0.18);

  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 20px;
  transition: all 0.25s ease;
}

/* Hover glow */
.section-gold-title:hover {
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 22px rgba(255, 215, 0, 0.4),
    0 0 35px rgba(255, 215, 0, 0.35);
  transform: translateY(-2px);
}
.sub-feature-list {
  list-style: none;
  padding: 0;
  margin: 25px auto 0;
  max-width: 260px;
}

.sub-feature-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 1rem;
  color: #fff;
  opacity: 0.9;
  letter-spacing: 0.2px;
  position: relative;
}

.sub-feature-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 215, 0, 0.15),
    rgba(255, 215, 0, 0.03)
  );
}

.sub-feature-price {
  font-weight: 700;
  color: #ffeb9a;
  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.55),
    0 0 14px rgba(255, 215, 0, 0.35);
}
.coming-soon-placeholder {
  height: 520px; /* same height as images */
  background: linear-gradient(135deg, #1a1a1a 0%, #262626 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #d4b76e; /* gold */
}

.coming-soon-placeholder span {
  display: block;
  font-size: 18px;
  margin-top: 6px;
  letter-spacing: 4px;
  opacity: 0.9;
}
.builder-category {
  padding: 10px 15px;
  margin: 10px 0 5px;
  font-weight: 600;
  color: #d4b76e; /* gold */
  border-bottom: 1px solid rgba(255,255,255,0.08);
  opacity: 0.9;
  font-size: 1rem;
}
/* Fix apartment-cleaning input text visibility */
#builderList input[type="number"] {
    color: var(--bs-body-color) !important;
}

/* Prevent disappearing text when input loses focus */
#builderList input[type="number"]:not(:focus) {
    color: var(--bs-body-color) !important;
    opacity: 1 !important;
}

/* Fix placeholder so it's not overriding the text */
#builderList input[type="number"]::placeholder {
    color: #888 !important;
    opacity: 0.6;
}
.intro-label {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.intro-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: linear-gradient(90deg, #d4af37, #f5d76e);
  border-radius: 2px;
}
/* GOLD GLISTEN EFFECT */
.gold-glisten {
  color: #f5d77a;
  text-shadow:
    0 0 6px rgba(245, 215, 122, 0.35),
    0 0 18px rgba(245, 215, 122, 0.25);
  position: relative;
}

/* subtle animated shimmer */
.gold-glisten::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 220, 140, 0.55) 50%,
    transparent 70%
  );
  opacity: 0;
  animation: goldShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes goldShimmer {
  0%   { opacity: 0; transform: translateX(-40%); }
  45%  { opacity: 0.9; }
  55%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(40%); }
}
/* Annual membership copy clarity */

.annual-lead {
  font-size: 1.25rem;   /* bigger, readable */
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.annual-sub {
  font-size: 0.95rem;   /* clearly secondary */
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
}
/* Airbnb styling works even if #airbnb is NOT inside #annual-wrapper */
#airbnb .price .amount-main::after { display: none !important; }

#airbnb .price .amount-main {
  display: block;
  font-size: clamp(32px, 3.8vw, 46px);
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #ffdc73;
  text-shadow: 0 0 8px rgba(255, 220, 115, 0.65),
               0 0 22px rgba(212, 175, 55, 0.45),
               0 0 45px rgba(212, 175, 55, 0.25);
  text-align: center;
  margin-bottom: 0.25rem;
  white-space: nowrap;
}

#airbnb .price .amount-sub {
  display: block;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  color: #ffd966;
  text-align: center;
  letter-spacing: 0.4px;
  text-shadow: 0 0 6px rgba(255, 220, 115, 0.55),
               0 0 16px rgba(212, 175, 55, 0.35);
  white-space: nowrap;
  text-transform: none;
}

#airbnb .card.glass .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
}
/* === FORCE: AIRBNB / APARTHOTELE headings match Annual Membership === */
html body #annual-wrapper h3,
html body #annual-wrapper .col-12 > h3,
html body #annual-wrapper h3.text-uppercase,
html body #annual-wrapper h3.text-center,
html body #annual-wrapper h3.text-uppercase.text-center {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;

  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 45%, #b8860b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  text-shadow: 0 0 6px rgba(255,215,0,.35),
               0 0 14px rgba(255,215,0,.18) !important;
}

html body #annual-wrapper h3:hover,
html body #annual-wrapper .col-12 > h3:hover {
  text-shadow: 0 0 10px rgba(255,215,0,.6),
               0 0 22px rgba(255,215,0,.35) !important;
  transform: translateY(-2px);
  transition: all .25s ease;
}
/* === FIX: Airbnb / Aparthotele section headings (works even if not in #annual-wrapper) === */
#airbnb h3,
#airbnb h2,
#fresh-plans h3,
#fresh-plans h2,
#hotels h3,
#hotels h2 {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;

  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 45%, #b8860b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  text-shadow: 0 0 6px rgba(255,215,0,.35),
               0 0 14px rgba(255,215,0,.18) !important;
}

#airbnb h3:hover,
#airbnb h2:hover,
#fresh-plans h3:hover,
#fresh-plans h2:hover,
#hotels h3:hover,
#hotels h2:hover {
  text-shadow: 0 0 10px rgba(255,215,0,.6),
               0 0 22px rgba(255,215,0,.35) !important;
  transform: translateY(-2px);
  transition: all .25s ease;
}
/* === FIX: Annual subline — white + same size as lead === */
.annual-sub {
  color: #ffffff !important;
  font-size: 1.25rem !important;   /* same as .annual-lead */
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
/* === FIX: Annual main title — glow + gold gradient (same as membership styling) === */
#packages .section-heading,
#packages h2.section-heading,
#packages h2 {
  background: linear-gradient(180deg, #f6e27a 0%, #d4af37 45%, #b8860b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;

  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.35),
    0 0 14px rgba(255, 215, 0, 0.18),
    0 0 28px rgba(212, 175, 55, 0.15) !important;

  transition: all 0.25s ease;
}

/* Hover glow — optional but matches the rest */
#packages .section-heading:hover,
#packages h2.section-heading:hover,
#packages h2:hover {
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 22px rgba(255, 215, 0, 0.4),
    0 0 36px rgba(255, 215, 0, 0.3) !important;
  transform: translateY(-2px);
}
.hero-heading {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e3c14a;
  text-shadow:
    0 0 12px rgba(227,193,74,0.45),
    0 0 28px rgba(227,193,74,0.25);
}