@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  --theme: #2BB6AB;
  --header: #0B3D5C;
  --bg: #F7FAFC;
}

body,
input,
button,
textarea,
select,
.theme-btn {
  font-family: "Poppins", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.loading--text {
  font-family: "Playfair Display", serif;
}

/* Guaranteed preloader fallback: the theme's own JS (GSAP) plays the reveal
   on DOM ready, but if that ever fails, this pure-CSS timeout ensures the
   preloader never blocks the page indefinitely. Long enough not to cut the
   reveal short on a slow connection. */
.preloader--three {
  animation: force-hide-preloader 0.01s ease-in 4s forwards;
}
@keyframes force-hide-preloader {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* The hero's small stat-badge thumbnail has no sized container in the
   theme CSS — only `width/height:100%` on the <img>, with nothing to
   resolve that percentage against. The original demo's photo already
   happened to be a small pre-cropped thumbnail, so this never mattered.
   Our real, full-resolution stingray photos render at native size
   instead, ballooning the badge and overlapping the paragraph below it.
   Giving the thumb an explicit fixed size fixes that regardless of the
   source image's resolution. */
.hero-1 .hero-bg .hero-right-item .hero-box .thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
}

/* Same width/height:initial trap as the hero thumb above, this time for
   the "group-image" overlapping avatar circles in the About section's
   stat widget — the theme's small client-photo avatars never needed
   explicit sizing, but our full-resolution photos do. */
.about-wrapper-1 .about-left-item .info-item .group-image-item .group-image {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 100px;
  overflow: hidden;
}
.about-wrapper-1 .about-left-item .info-item .group-image-item .group-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.hero-1 .hero-bg .hero-right-item .hero-box .thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

/* "Why Visit" feature photo: the theme overlays it (position:absolute) on a
   decorative circle image, which has been removed. Put it back in normal
   flow so it gives the column its height, and let it fill the column. */
.feature-wrapper .feature-image .mask-image {
  position: static !important;
  transform: none !important;
  width: 100%;
  max-width: 640px !important;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
}
.feature-wrapper .feature-image .mask-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The theme positions .swiming-man at bottom:200px within the About
   section, sized for the original design's taller left column (which had
   a stats widget we removed). Our shorter content means that position
   falls outside the section's rendered height, so it renders off-screen
   below the visible content. Anchoring from the top instead keeps it
   reliably in view regardless of how tall the section ends up. */
.about-section-1 .swiming-man {
  top: -20px;
  bottom: auto;
  left: 3%;
  width: 440px;
  z-index: 5;
}

/* A second instance of the same animated swimming-stingray element
   (same .swiming-man base styles/animation, reusing the theme's
   swimMove/swimBody keyframes), positioned over the coral artwork at
   the bottom of the section instead of the top. */
.about-section-1 .swiming-man-bottom {
     top: auto;
    bottom: 220px;
    left: auto;
    right: 35%;
    width: 650px;
}

/* Real brand logo (public/images/logo.webp, cropped to the icon+wordmark
   for header/footer use as public/images/logo-header.webp) — has no sized
   container in the theme, which assumed a small, wide SVG wordmark.
   Sized further down (review item 1) alongside the always-white header. */

/* Flat black, low-opacity overlay across the full hero photo, on top of
   the theme's existing top-to-bottom gradient — keeps the headline and
   body copy readable over busy/bright parts of the photo (like the sandy
   seafloor) that the gradient alone (fades to transparent lower down)
   doesn't darken. */
.hero-1 .hero-bg::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
  /* ::after is the last generated box, so with everything else at
     z-index:auto it would otherwise paint on top of (and darken) the
     hero text instead of sitting behind it — pin it under the content
     explicitly rather than relying on source order. */
  z-index: 1;
}
.hero-1 .hero-bg .hero-content {
  z-index: 2;
}

/* The dive-wrapper's fixed 488px height assumed the original short
   two-line heading only; the map now sits beside the copy as its own
   column (not stacked underneath it), so the wrapper just needs to
   grow with whichever column is taller. It previously used the photo
   background's `.bg-cover` class for its positioning context (that
   class also sets position: relative) — now that the photo is gone,
   this rule provides that directly. */
.dive-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: auto;
  min-height: 488px;
  padding-top: 50px;
  padding-bottom: 50px;
  background: linear-gradient(135deg, #0B3D5C 0%, #0E4A68 55%, #0A2F42 100%);
}
.dive-content .dive-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 15px;
  max-width: 480px;
}
/* Overrides main.css's `.dive-wrapper .dive-left-item .dive-image`
   (same specificity, so it must match that selector exactly to win):
   that rule pulls the map up with a -47px margin to tuck it under a
   short two-line heading in the original template. Our heading now
   wraps to two lines plus a full paragraph above it, so the negative
   margin instead drags the map up over the text. */
.dive-wrapper .dive-left-item .dive-image {
  margin-top: 0;
}
.dive-image {
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  min-height: 280px;
}
.dive-image iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}
@media (max-width: 991px) {
  .dive-image {
    min-height: 320px;
  }
  .dive-image iframe {
    min-height: 320px;
  }
}

/* A soft brand-teal glow in the corner instead of a flat panel — subtle
   enough to still read as a clean, professional card rather than a
   photo background. */
.dive-wrapper::after {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  content: "";
  background: radial-gradient(
    circle,
    rgba(43, 182, 171, 0.25) 0%,
    rgba(43, 182, 171, 0) 70%
  );
  pointer-events: none;
  z-index: 1;
}

.dive-wrapper > .row {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* The Rescue/Protect/Nurture/Inspire cards have no explicit height, so
   each one shrinks to fit its own caption — if one caption wraps to more
   lines than its neighbours, that card ends up taller and the row looks
   uneven. The columns are already equal height (Bootstrap's row/col
   flex), so stretching the card to fill its column keeps all four
   symmetrical regardless of exact caption length. */
.feature-card-item {
  height: 100%;
}

/* ------------------------------------------------------------------
   Client review pass (Stingray_Haven_Website_Review.docx)
   ------------------------------------------------------------------ */

/* 1. Header — the base theme keeps .header-1 transparent/floating over
   the hero photo until JS adds .sticky on scroll (only then does it get
   a white background and swap to the dark logo). The review wants an
   always-white header, so force the .sticky treatment on at all times
   instead of waiting for scroll, and give the logo more room/size. */
.header-1 {
  background-color: var(--white);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.header-1 .header-main .header-left .shape,
.header-1 .header-main .header-right .shape-2,
.header-1 .heder-bg-shape {
  display: none;
}
.header-1 .header-main .header-left .header-logo {
  display: none;
}
.header-1 .header-main .header-left .header-logo-2 {
  display: inline-block;
}
.header-1 .header-main .main-menu ul li a {
  color: var(--header);
}
.header-1 .header-main .header-right .header-btn h4 {
  color: var(--header);
}
.header-1 .header-main .header-right .header-btn h4 img {
  filter: brightness(0);
}
.header-1 .header-main .header-right .header-btn h4 a {
  color: var(--header);
}
.header-1 .header-main .header-right .header-btn .sidebar__toggle img {
  filter: brightness(0);
}
.header-1 .header-main .header-right .header-btn .sidebar__toggle i {
  color: var(--header);
}
.logo img,
.offcanvas__logo img,
.search_logo img {
  width: 150px;
}
@media (max-width: 575px) {
  .logo img {
    width: 150px !important;
  }
}
.header-main {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 2. Hero — collapsed to a single slide (home-content.html), so the
   swiper's pagination dot (originally meant to navigate between 3
   slides) has nothing left to do and would otherwise sit there as a
   single inert dot. */
.hero-1 .swiper-dot {
  display: none;
}

/* 6. Footer — lighten the near-opaque navy overlay (main.css's
   .footer-section::before) so the "Let's Meet" CTA doesn't read as
   oversaturated/dark, and give the Stingray Haven wordmark in the
   footer more presence than the small header lockup. */
.footer-section::before {
  background: linear-gradient(
    180deg,
    rgba(10, 37, 64, 0.55) 0%,
    rgba(0, 0, 0) 100%
  );
}
.footer-mid-item > a > img {
  width: 260px;
  height: auto;
}
@media (max-width: 575px) {
  .footer-mid-item > a > img {
    width: 180px;
  }
}

/* 5/12. Conservation section — reuses .feature-section-1's card grid,
   but each card now carries a full value description instead of a one
   line caption, so the theme's bold/244px-capped caption styling (meant
   for a short tagline) needs to read as normal body copy instead. */
#conservation.feature-section-1 .feature-card-item .content h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--header);
}
#conservation.feature-section-1 .feature-card-item .content p {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  max-width: none;
  color: rgba(10, 37, 64, 0.75);
}
#conservation.feature-section-1 .section-title {
  margin-bottom: 50px;
}
#conservation.feature-section-1 .section-title .text {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* 6. Spacing and page rhythm — with ~10 sections now stacked on one
   page (not spread across a multi-page demo), the theme's 120px
   top+bottom .section-padding on every one of them compounds into a
   240px dead zone at each section boundary, and the page reads as
   much longer/more disconnected than its actual content. Tightening
   the shared class pulls every section using it into line at once. */
.section-padding {
  padding: 90px 0;
}
@media (max-width: 1199px) {
  .section-padding {
    padding: 70px 0;
  }
}
@media (max-width: 991px) {
  .section-padding {
    padding: 55px 0;
  }
}

/* The brand-statement strip (home-content.html's "People Protect What
   They / Learn to Love") reuses the theme's .adventure-content, which
   was designed to anchor near the very bottom of a long single-purpose
   page and so carries a desktop-only 560px top / 205px bottom padding
   — on ≥1400px screens that's over 750px of empty space around two
   lines of text. Bring it down to match the rest of the page's rhythm;
   the theme's own <1400px breakpoints (100px, then 80px) were already
   reasonable and are left as-is. */
@media (min-width: 1400px) {
  .adventure-content {
    padding: 240px 0;
  }
}

/* .dive-section (Location) carries no vertical spacing of its own in
   the theme — it sits flush against whatever padding the sections
   above/below happen to have, breaking the otherwise-consistent gap
   rhythm between sections. Give it the same breathing room as its
   neighbours. */
.dive-section {
  padding: 90px 0;
}
@media (max-width: 1199px) {
  .dive-section {
    padding: 70px 0;
  }
}
@media (max-width: 991px) {
  .dive-section {
    padding: 55px 0;
  }
}

/* 14/15. FAQ intro paragraph — the theme's .faq-wrapper .faq-content
   .text rule caps it at max-width:519px but never centers the box
   itself (no auto margins), so despite sitting in a text-center
   wrapper it still hugs the container's left edge instead of sitting
   under the centered "Frequently Asked Questions" heading above it. */
.faq-wrapper .faq-content .text {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------
   Second review pass (client feedback on testing.stingrayhaven.com)
   ------------------------------------------------------------------ */

/* Hero — supporting copy, secondary line and reassurance strip added
   per the original brief; .hero-1 only styled h1 for this hero
   variant, so these need their own rules from scratch. */
.hero-1 .hero-bg .hero-content .hero-supporting-text {
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  max-width: 560px;
  margin: 20px 0 30px;
  opacity: 0.95;
}
.hero-1 .hero-bg .hero-content .hero-secondary-line {
  color: var(--white);
  font-size: 17px;
  font-weight: 600;
  margin: 22px 0 0;
}
.hero-1 .hero-bg .hero-content .hero-reassurance-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.hero-1 .hero-bg .hero-content .hero-reassurance-strip li {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
  position: relative;
}
.hero-1 .hero-bg .hero-content .hero-reassurance-strip li + li::before {
  content: "\2022";
  margin-right: 18px;
  color: var(--theme);
}
@media (max-width: 575px) {
  .hero-1 .hero-bg .hero-content .hero-supporting-text {
    font-size: 16px;
  }
}

/* Final CTA — rebuilt to the brief's actual copy and a real button.
   The theme's .footer-text-item styled its CTA as a giant 110px
   hollow/transparent-fill heading (text-stroke outline only, matching
   the equally huge "Let's Meet" text) — visually it read as ghost
   decorative text, not a clickable button, which is exactly what the
   review flagged ("no button"). Overriding to a plain centered block
   with the site's real .theme-btn pill button instead. */
/* Matches main.css's `.footer-widget-wrapper .footer-text-item`
   selector weight (2 classes) — otherwise that rule's own `display:
   flex` wins regardless of file order and lays the heading, subheading
   and button out as a flex row instead of stacking them. */
.footer-widget-wrapper .footer-text-item.final-cta-item {
  display: block;
  text-align: left;
  padding-bottom: 60px;
}
/* Matches main.css's `.footer-widget-wrapper .footer-text-item h2`
   selector weight (2 classes) rather than the single `.final-cta-item`
   class used below — otherwise that more-specific rule wins regardless
   of file order, and its white-to-transparent gradient clip keeps
   showing through despite `background: none` here. */
.footer-widget-wrapper .footer-text-item.final-cta-item h2 {
  font-size: 56px;
  background: none;
  -webkit-text-fill-color: var(--white);
  color: var(--white);
}
@media (max-width: 767px) {
  .footer-widget-wrapper .footer-text-item.final-cta-item h2 {
    font-size: 36px;
  }
}
.final-cta-item .final-cta-subheading {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  font-weight: 500;
  margin-top: 14px;
  margin-bottom: 30px;
}
/* .footer-widget-wrapper .footer-text-item span (main.css) targets
   ANY span inside .footer-text-item with a 110px hollow/text-stroke
   treatment meant for the old giant decorative CTA text — it was also
   catching the real button's <span class="txt">, rendering "Book
   Stingray Haven" as giant outlined ghost text instead of a normal
   button label. Reset it back to the theme's actual button styling. */
.final-cta-item .theme-btn .txt {
  color: var(--white);
  -webkit-text-stroke-width: 0;
  -webkit-text-fill-color: var(--white);
  font-size: 16px;
  font-weight: 700;
}

/* Sticky mobile "Book Now" button — the brief calls for a persistent
   booking CTA on mobile that stays on screen while scrolling; the
   theme has no such element, so this is new. Desktop already has the
   header's always-visible "Book Your Experience" button, so this only
   needs to render below that breakpoint. */
.mobile-sticky-book {
  display: none;
}
@media (max-width: 991px) {
  .mobile-sticky-book {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(11, 61, 92, 0.95);
    backdrop-filter: blur(6px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }
  .mobile-sticky-book .theme-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* Testimonials — the brief explicitly allows this section to stay
   hidden until real guest reviews exist; keeping the markup in place
   (rather than omitting it) means it's a single class toggle to
   publish once reviews are ready. */
.testimonial-section-hidden {
  display: none;
}

/* Body copy was rendering as Capitalized Every Word (e.g. the email
   address showed as "Info@Stingrayhaven.Com") because the theme's base
   stylesheet puts `text-transform: capitalize` directly on the bare
   `p` and `span` elements (main.css ~L218/224) — every paragraph and
   inline span on the page, not just headings/labels. All of this
   project's actual copy was already written in correct sentence/title
   case by hand, so the fix is simply to stop forcing a transform on
   top of it; headings keep their own capitalize rule (main.css h1–h6)
   and are unaffected. */
p,
span {
  text-transform: none;
}

/* Legal pages (Privacy Policy, Terms & Conditions, Cancellation &
   Refund Policy, Cookie Policy) reuse the theme's base typography,
   which zeroes out ul/ol list markers and heading/paragraph spacing
   for the marketing sections elsewhere on the site. This scopes
   readable prose styling to just those pages' content column. */
.legal-content h2 {
  text-transform: none;
  font-size: 32px;
  margin-top: 48px;
  margin-bottom: 16px;
}
.legal-content h2:first-child {
  margin-top: 0;
}
.legal-content h3 {
  text-transform: none;
  font-size: 20px;
  margin-top: 28px;
  margin-bottom: 10px;
}
.legal-content p {
  margin-bottom: 16px;
}
.legal-content ul,
.legal-content ol {
  list-style: disc;
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal-content ol {
  list-style: decimal;
}
.legal-content li {
  margin-bottom: 8px;
}
.legal-content a {
  text-decoration: underline;
}
.legal-content .legal-updated {
  font-style: italic;
  margin-bottom: 32px;
}

/* "The Real Experience" gallery — replaces the theme's original
   parallax-stacked, differently-sized image layout with a plain
   four-column CSS masonry grid (no JS masonry library needed: a
   multi-column container naturally flows items of different heights
   down the shortest column). Lightbox is the theme's existing
   Magnific Popup wiring for `.img-popup` (see main.js), already
   configured with `gallery: { enabled: true }` so these thumbnails
   open as one navigable set. */
.gallery-intro {
  max-width: 640px;
  margin: 16px auto 0;
  color: var(--text);
}
.simple-gallery {
  column-count: 4;
  column-gap: 20px;
  margin-top: 50px;
}
.simple-gallery-item {
  margin-bottom: 20px;
  break-inside: avoid;
}
.simple-gallery-item a {
  display: block;
  border-radius: 15px;
  overflow: hidden;
}
.simple-gallery-item img {
  display: block;
  width: 100%;
  transition: transform 0.4s ease;
}
.simple-gallery-item a:hover img {
  transform: scale(1.05);
}
@media (max-width: 991px) {
  .simple-gallery {
    column-count: 2;
  }
}
@media (max-width: 575px) {
  .simple-gallery {
    column-count: 1;
  }
}

/* ------------------------------------------------------------------
   Third review pass (Website Edits & Action Checklist)
   ------------------------------------------------------------------ */

.hero-1 .hero-bg .hero-content .hero-reassurance-strip li {
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
}
@media (max-width: 575px) {
  .hero-1 .hero-bg .hero-content .hero-reassurance-strip li {
    font-size: 16px;
  }
}

.section-title .sub-title,
.dive-wrapper .dive-left-item .dive-content span {
  font-size: 20px;
  line-height: 1.3;
}
#conservation .section-title .sub-title,
#booking .section-title .sub-title {
  font-size: 26px;
}
@media (max-width: 575px) {
  .section-title .sub-title,
  .dive-wrapper .dive-left-item .dive-content span {
    font-size: 17px;
  }
  #conservation .section-title .sub-title,
  #booking .section-title .sub-title {
    font-size: 20px;
  }
}

/* stingray-05 is 4:3 while the other pricing photos are 3:2, which made
   the Groups card taller than its neighbours. */
.courses-card-item .courses-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.booking-price-note {
  text-align: center;
  margin: 30px 0 0;
  font-size: 15px;
  opacity: 0.8;
}
.booking-cta {
  margin-top: 25px;
}
.courses-section.section-padding {
  padding-bottom: 60px;
}
.dive-section {
  padding: 50px 0;
}
.adventure-show-section.section-padding {
  padding-top: 70px;
}
@media (max-width: 991px) {
  .courses-section.section-padding {
    padding-bottom: 45px;
  }
  .dive-section {
    padding: 40px 0;
  }
  .adventure-show-section.section-padding {
    padding-top: 50px;
  }
}

/* Phone icon + number: keep on one line, icon vertically centred. */
.header-1 .header-main .header-right .header-btn h4,
.feature-wrapper .feature-content .button-item h3,
.footer-widget-wrapper .footer-mid-item span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.header-1 .header-main .header-right .header-btn h4 img,
.feature-wrapper .feature-content .button-item h3 img,
.footer-widget-wrapper .footer-mid-item span img {
  display: block;
  flex-shrink: 0;
  margin: 0;
}
@media (max-width: 1399px) {
  .header-1 .header-main .header-right .header-btn h4 {
    display: none;
  }
}

/* "Why Visit" checklist: two equal top-aligned columns (the theme centred
   them vertically, so the shorter list sat lower), and each item's icon
   kept beside its text so wrapped lines align with the text, not the icon. */
.feature-wrapper .feature-content .list-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  align-items: start;
  gap: 15px 30px;
}
/* Both <ul>s join one grid, so items in the two columns share row heights. */
.feature-wrapper .feature-content .list-item .list {
  display: contents;
}
.feature-wrapper .feature-content .list-item .list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  margin-bottom: 0 !important;
}
.feature-wrapper .feature-content .list-item .list li i {
  margin: 0.2em 0 0;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .feature-wrapper .feature-content .list-item {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}