/* Start custom CSS *//* ===================================================
   DESTINATION TRINIDAD & TOBAGO - MODERN 2026 STYLES
   =================================================== */

/* UNIVERSAL RESET FOR BUTTONS & LINKS */
.elementor-32 button,
.elementor-32 a,
.elementor-32 .e-button-base {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}

/* 1. CINEMATIC 100VH HERO */
[configuration-id="hero-wrap"] {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background-image: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.85) 100%), url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1800&q=80') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  padding: 160px 24px 80px 24px !important;
  text-align: center !important;
}

[configuration-id="hero-inner"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 900px !important;
  width: 100% !important;
}

[configuration-id="hero-tag"] p,
[configuration-id="hero-tag"] span {
  display: inline-block !important;
  padding: 8px 20px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fef08a !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
}

[configuration-id="hero-h1"] h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 24px 0 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[configuration-id="hero-p"] p {
  font-size: clamp(1.15rem, 2vw, 1.35rem) !important;
  line-height: 1.6 !important;
  color: #f1f5f9 !important;
  max-width: 720px !important;
  margin: 0 0 40px 0 !important;
}

[configuration-id="hero-actions"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: center !important;
  margin-bottom: 50px !important;
}

[configuration-id="hero-btn-1"] a,
[configuration-id="hero-btn-1"] button {
  padding: 16px 36px !important;
  border-radius: 9999px !important;
  background: #e11d48 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  box-shadow: 0 10px 25px rgba(225, 29, 72, 0.45) !important;
  transition: transform 0.2s, background 0.2s !important;
}
[configuration-id="hero-btn-1"] a:hover {
  background: #be123c !important;
  transform: translateY(-2px) !important;
}

[configuration-id="hero-btn-2"] a,
[configuration-id="hero-btn-2"] button {
  padding: 16px 36px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  transition: transform 0.2s, background 0.2s !important;
}
[configuration-id="hero-btn-2"] a:hover {
  background: rgba(255, 255, 255, 0.26) !important;
  transform: translateY(-2px) !important;
}

/* SEARCH CAPSULE */
[configuration-id="search-capsule"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 880px !important;
  width: 100% !important;
  padding: 14px 28px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
  text-align: left !important;
  gap: 16px !important;
}

[configuration-id="sc-field-1"],
[configuration-id="sc-field-2"],
[configuration-id="sc-field-3"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 140px !important;
}
[configuration-id="sc-field-2"],
[configuration-id="sc-field-3"] {
  border-left: 1px solid #e2e8f0 !important;
  padding-left: 18px !important;
}

[configuration-id="search-capsule"] span {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #64748b !important;
}
[configuration-id="search-capsule"] h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 4px 0 0 0 !important;
}

[configuration-id="sc-btn"] a,
[configuration-id="sc-btn"] button {
  padding: 14px 30px !important;
  border-radius: 9999px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  transition: background 0.2s !important;
}
[configuration-id="sc-btn"] a:hover {
  background: #0369a1 !important;
}

/* 2. PROOF STRIP */
[configuration-id="proof-strip"] {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-around !important;
  max-width: 1180px !important;
  width: calc(100% - 48px) !important;
  margin: -40px auto 80px auto !important;
  z-index: 10 !important;
  position: relative !important;
  padding: 28px 36px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08) !important;
  gap: 24px !important;
}

[configuration-id="proof-strip"] > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

[configuration-id="proof-strip"] h3 {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
}
[configuration-id="proof-strip"] span {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

/* 3. BENTO GRID SECTION */
[configuration-id="bento-section"] {
  max-width: 1240px !important;
  margin: 0 auto 100px auto !important;
  padding: 0 24px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

[configuration-id="bento-intro"] {
  text-align: center !important;
  max-width: 680px !important;
  margin-bottom: 50px !important;
}
[configuration-id="bento-tag"] p {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #e11d48 !important;
  text-transform: uppercase !important;
}
[configuration-id="bento-h2"] h2 {
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 8px 0 16px 0 !important;
}
[configuration-id="bento-desc"] p {
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  color: #64748b !important;
}

[configuration-id="bento-grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
}

[configuration-id="bento-card-1"],
[configuration-id="bento-card-2"],
[configuration-id="bento-card-3"],
[configuration-id="bento-card-4"] {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  min-height: 420px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
[configuration-id="bento-card-1"]:hover,
[configuration-id="bento-card-2"]:hover,
[configuration-id="bento-card-3"]:hover,
[configuration-id="bento-card-4"]:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

[configuration-id="bento-grid"] img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

[configuration-id="bento-grid"] > div > div {
  position: relative !important;
  z-index: 2 !important;
  margin-top: auto !important;
  padding: 32px 28px !important;
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.92) 55%) !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
}

[configuration-id="bento-grid"] span {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #fde047 !important;
  margin-bottom: 6px !important;
}
[configuration-id="bento-grid"] h3 {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
}
[configuration-id="bento-grid"] p {
  font-size: 0.92rem !important;
  line-height: 1.4 !important;
  color: #cbd5e1 !important;
  margin: 0 !important;
}

/* 4. TOURS SECTION */
[configuration-id="tours-sec"] {
  background: #ffffff !important;
  padding: 90px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
[configuration-id="tours-intro"] {
  text-align: center !important;
  max-width: 680px !important;
  margin-bottom: 48px !important;
}
[configuration-id="t-tag"] p {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #0284c7 !important;
  text-transform: uppercase !important;
}
[configuration-id="t-h2"] h2 {
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 8px 0 16px 0 !important;
}
[configuration-id="t-desc"] p {
  font-size: 1.1rem !important;
  color: #64748b !important;
}

[configuration-id="tours-cards"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 32px !important;
  max-width: 1240px !important;
  width: 100% !important;
}

[configuration-id="tours-cards"] > div {
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
[configuration-id="tours-cards"] > div:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

[configuration-id="tours-cards"] img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
}

[configuration-id="tours-cards"] [configuration-id*="t-body"] {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

[configuration-id="tours-cards"] [configuration-id*="t-badge-row"] {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
[configuration-id="tours-cards"] [configuration-id*="t-price"] p {
  padding: 4px 12px !important;
  border-radius: 6px !important;
  background: #ecfdf5 !important;
  color: #059669 !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
}
[configuration-id="tours-cards"] [configuration-id*="t-dur"] p {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

[configuration-id="tours-cards"] h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.35 !important;
}
[configuration-id="tours-cards"] [configuration-id*="t-p"] p {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  margin: 0 0 24px 0 !important;
  flex: 1 !important;
}

[configuration-id="tours-cards"] button,
[configuration-id="tours-cards"] a {
  width: 100% !important;
  padding: 13px !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  transition: background 0.2s !important;
}
[configuration-id="tours-cards"] a:hover {
  background: #e11d48 !important;
}

/* 5. NEWSLETTER */
[configuration-id="newsletter-sec"] {
  width: 100% !important;
  background: linear-gradient(135deg, #be123c 0%, #e11d48 50%, #f97316 100%) !important;
  padding: 90px 24px !important;
  text-align: center !important;
  color: #ffffff !important;
  display: flex !important;
  justify-content: center !important;
}

[configuration-id="nl-box"] {
  max-width: 680px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

[configuration-id="nl-h2"] h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
}
[configuration-id="nl-p"] p {
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
  color: #ffe4e6 !important;
  margin: 0 0 36px 0 !important;
}

[configuration-id="nl-btn"] a,
[configuration-id="nl-btn"] button {
  padding: 16px 36px !important;
  border-radius: 9999px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
}
[configuration-id="nl-btn"] a:hover {
  background: #0284c7 !important;
}/* End custom CSS */