/* 
========================================================================
   TEMPLE ADVENTURES - ULTRA PREMIUM DEEP OCEAN THEME DESIGN SYSTEM
========================================================================
*/

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

:root {
  /* HSL Deep Ocean Color System */
  --bg-deep-abyss: hsl(220, 60%, 3%);
  --bg-abyss-gradient: linear-gradient(180deg, hsl(205, 80%, 8%) 0%, hsl(215, 65%, 4%) 40%, hsl(220, 60%, 2%) 100%);
  --bg-shallow: hsl(205, 80%, 10%);
  
  /* Primary Aqua Glows */
  --color-cyan-glow: hsl(182, 100%, 50%);
  --color-cyan-muted: hsl(182, 80%, 40%);
  --color-blue-glow: hsl(200, 100%, 50%);
  --color-blue-dark: hsl(210, 60%, 12%);
  
  /* High Contrast Warm Coral Accents */
  --color-coral: hsl(355, 95%, 63%);
  --color-coral-hover: hsl(355, 100%, 70%);
  --color-gold: hsl(38, 100%, 55%);
  
  /* Text System */
  --color-text-pure: hsl(0, 0%, 100%);
  --color-text-body: hsl(210, 20%, 88%);
  --color-text-muted: hsl(210, 14%, 65%);
  
  /* Premium Typography Tokens */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-accent: 'Playfair Display', serif;
  
  /* High-end Glassmorphism & Borders */
  --glass-bg: hsla(210, 60%, 8%, 0.45);
  --glass-border: hsla(182, 100%, 50%, 0.12);
  --glass-border-hover: hsla(182, 100%, 50%, 0.3);
  --glass-blur: blur(16px);
  --glass-shadow: 0 12px 40px 0 rgba(0, 4, 12, 0.6);
  --neon-glow: 0 0 20px hsla(182, 100%, 50%, 0.35);
  --coral-glow: 0 0 25px hsla(355, 95%, 63%, 0.4);
  
  /* Standard Layout Spacing */
  --section-padding: 8.5rem 2rem;
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 28px;
  --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-snappy: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 
========================================================================
   RESET & SYSTEM BASICS 
========================================================================
*/

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-deep-abyss);
  color: var(--color-text-body);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  min-height: 100vh;
  background: var(--bg-abyss-gradient);
  overflow: hidden;
}

/* Premium Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep-abyss);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-cyan-glow), var(--color-blue-glow));
  border-radius: 10px;
  border: 2px solid var(--bg-deep-abyss);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-cyan-glow);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-snappy);
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 
========================================================================
   GLOBAL IMMERSIVE EFFECTS (BUBBLES & RAYS)
========================================================================
*/

#ambient-bubbles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.bubble {
  position: absolute;
  bottom: -50px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(0, 242, 254, 0.1) 60%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  pointer-events: none;
  transform: translateX(0);
}

/* Shimmering Sunlit Rays (Over Hero Background) */
.light-rays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  animation: shine-rays 12s ease-in-out infinite alternate;
}

@keyframes shine-rays {
  0% { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0.9; transform: scale(1.08) rotate(2deg); }
}

/* 
========================================================================
   INTERACTIVE DEPTH TRACKER (SIDEBAR WIDGET)
========================================================================
*/

.depth-tracker {
  position: fixed;
  right: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  height: 300px;
  width: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

@media (max-width: 1024px) {
  .depth-tracker {
    display: none; /* Hide on smaller screens to prioritize viewport spacing */
  }
}

.depth-bar-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--color-cyan-glow), var(--color-blue-glow));
  border-radius: 10px;
  box-shadow: var(--neon-glow);
  transition: height 0.3s ease-out;
}

.depth-marker {
  position: relative;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  width: 35px;
  text-align: right;
  right: 25px;
  transition: var(--transition-snappy);
}

.depth-marker.active {
  color: var(--color-cyan-glow);
  text-shadow: var(--neon-glow);
  transform: scale(1.15);
}

.depth-bubble-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-text-pure);
  border: 2px solid var(--color-cyan-glow);
  box-shadow: var(--neon-glow);
  top: 0;
  transform: translate(-5px, -7px);
  transition: top 0.3s ease-out;
}

/* 
========================================================================
   UI TYPOGRAPHY UTILITIES
========================================================================
*/

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-pure);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.glowing-text-cyan {
  color: var(--color-cyan-glow);
  text-shadow: 0 0 15px hsla(182, 100%, 50%, 0.4);
}

.glowing-text-coral {
  color: var(--color-coral);
  text-shadow: 0 0 15px hsla(355, 95%, 63%, 0.4);
}

.accent-text-italic {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
}

.section-label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-cyan-glow);
  display: block;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 10px hsla(182, 100%, 50%, 0.2);
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  max-width: 650px;
  line-height: 1.6;
}

.title-center-group {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 5rem;
}

/* 
========================================================================
   BUTTON SYSTEMS & INTERACTION
========================================================================
*/

.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.15rem 2.5rem;
  background: var(--color-coral);
  color: var(--color-text-pure);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--coral-glow);
  z-index: 2;
  transition: var(--transition-smooth);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transition: var(--transition-smooth);
}

.btn-primary:hover {
  background: var(--color-coral-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px hsla(355, 95%, 63%, 0.6);
}

.btn-primary:hover::before {
  left: 100%;
  transition: 0.8s ease-out;
}

.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 2.4rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-pure);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: var(--glass-blur);
  z-index: 2;
  transition: var(--transition-smooth);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-cyan-glow);
  box-shadow: var(--neon-glow);
  transform: translateY(-3px);
}

/* Glassmorphism Containers */
.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--border-radius-md);
  box-shadow: var(--glass-shadow);
  transition: var(--transition-smooth);
}

.glass-panel:hover {
  border-color: var(--glass-border-hover);
}

/* 
========================================================================
   SCROLL REVEAL STYLES (JS-CONNECTED)
========================================================================
*/

.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* 
========================================================================
   SECTION 1: FLOATING HEADER & HERO ABYSS
========================================================================
*/

/* Clean Premium Header Styles */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: var(--transition-smooth);
}

.main-header.scrolled {
  background: rgba(3, 11, 30, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  transition: var(--transition-smooth);
}

.main-header.scrolled .navbar-inner {
  padding: 0.85rem 4rem;
}

@media (max-width: 1200px) {
  .navbar-inner {
    padding: 1.25rem 2rem;
  }
  .main-header.scrolled .navbar-inner {
    padding: 0.85rem 2rem;
  }
}

@media (max-width: 768px) {
  .navbar-inner {
    padding: 1rem 1.5rem !important;
  }
  .main-header.scrolled .navbar-inner {
    padding: 0.75rem 1.5rem !important;
  }
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.logo-img-left {
  height: 52px;
  width: auto;
  object-fit: contain;
  transition: var(--transition-smooth);
}

.main-header.scrolled .logo-img-left {
  height: 44px;
}

.logo-img-right {
  height: 68px;
  width: auto;
  object-fit: contain;
  transition: var(--transition-smooth);
}

.main-header.scrolled .logo-img-right {
  height: 58px;
}

@media (max-width: 768px) {
  .logo-img-left {
    height: 40px;
  }
  .main-header.scrolled .logo-img-left {
    height: 34px;
  }
  .logo-img-right {
    height: 52px;
  }
  .main-header.scrolled .logo-img-right {
    height: 44px;
  }
}

.nav-container-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  flex-grow: 1;
}

.announcement-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.7rem, 1.4vw, 1.05rem);
  letter-spacing: 0.05em;
  color: #ffffff;
  text-transform: uppercase;
  text-align: right;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.nav-menu-row {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1150px) {
  .nav-links {
    display: none; /* Hide on mobile/tablet widths */
  }
  .announcement-title {
    display: none; /* Hide top bar on mobile/tablet */
  }
}

.nav-links a {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition-snappy);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.nav-links a i {
  font-size: 0.75rem;
  color: var(--color-cyan-glow);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-cyan-glow);
  box-shadow: var(--neon-glow);
  transition: var(--transition-snappy);
}

.nav-links a:hover {
  color: var(--color-cyan-glow);
  text-shadow: var(--neon-glow);
}

.nav-links a:hover::after {
  width: 100%;
}

.btn-book-now {
  padding: 0.75rem 2rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: #0099ff;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 153, 255, 0.4);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-snappy);
}

.btn-book-now:hover {
  background: #00b3ff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 179, 255, 0.6);
}


/* Hero Section */
.hero-abyss {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(3, 11, 30, 0.05) 0%, rgba(3, 11, 30, 0.45) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  padding: 0 2rem;
  margin-top: 4rem;
}

.hero-title-main {
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  line-height: 1.05;
  font-weight: 800;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.hero-title-main span {
  display: block;
}

.hero-desc {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--color-text-body);
  max-width: 680px;
  margin: 0 auto 2.5rem auto;
  line-height: 1.65;
}

.hero-btn-row {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

@media (max-width: 580px) {
  .hero-btn-row {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .hero-btn-row a {
    width: 100%;
  }
}

.scroll-prompt {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-snappy);
}

.scroll-prompt:hover {
  color: var(--color-cyan-glow);
}

.scroll-prompt-mouse {
  width: 22px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  position: relative;
}

.scroll-prompt-wheel {
  width: 4px;
  height: 8px;
  background: var(--color-cyan-glow);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: mouse-scroll 1.8s infinite;
}

@keyframes mouse-scroll {
  0% { transform: translate(-50%, 0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, 14px); opacity: 0; }
}

/* 
========================================================================
   SECTION 2: EXPLORE OUR WORLDS (THE DESTINATIONS)
========================================================================
*/

.section-explore {
  position: relative;
  padding: var(--section-padding);
  background: linear-gradient(180deg, hsl(220, 60%, 2%) 0%, hsl(205, 80%, 8%) 100%);
  z-index: 10;
}

.explore-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

@media (max-width: 1024px) {
  .explore-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
}

.explore-card {
  position: relative;
  height: 520px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem 2.2rem;
  z-index: 2;
  transition: var(--transition-smooth);
}

.explore-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.explore-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(3, 11, 30, 0.1) 0%, rgba(3, 11, 30, 0.85) 100%);
  z-index: 1;
  transition: var(--transition-smooth);
}

.explore-card-content {
  position: relative;
  z-index: 2;
  transform: translateY(20px);
  transition: var(--transition-smooth);
}

.explore-card-tag {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-cyan-glow);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  display: block;
}

.explore-card-title {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.explore-card-text {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  opacity: 0;
  transition: var(--transition-smooth);
}

.explore-meta {
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-pure);
  opacity: 0;
  transform: translateY(10px);
  transition: var(--transition-smooth);
}

.explore-meta span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.explore-meta i {
  color: var(--color-cyan-glow);
}

/* Hover States for Explore Cards */
.explore-card:hover {
  border-color: var(--color-cyan-glow);
  box-shadow: 0 15px 45px rgba(0, 242, 254, 0.18);
  transform: translateY(-10px);
}

.explore-card:hover .explore-card-bg {
  transform: scale(1.1);
}

.explore-card:hover .explore-card-overlay {
  background: linear-gradient(180deg, rgba(3, 11, 30, 0) 0%, rgba(3, 11, 30, 0.95) 100%);
}

.explore-card:hover .explore-card-content {
  transform: translateY(0);
}

.explore-card:hover .explore-card-text {
  opacity: 1;
}

.explore-card:hover .explore-meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* 
========================================================================
   SECTION 3: WHY TEMPLE ADVENTURES? (DIVE ASCENT TIMELINE)
========================================================================
*/

.section-why-us {
  position: relative;
  padding: var(--section-padding);
  background: linear-gradient(180deg, hsl(205, 80%, 8%) 0%, hsl(210, 60%, 12%) 100%);
  z-index: 10;
  overflow: hidden;
}

.why-timeline-container {
  max-width: 1200px;
  margin: 5rem auto 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2rem 0;
}

.why-timeline-line {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 1;
}

.why-timeline-progress {
  position: absolute;
  top: 60px;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-cyan-glow), var(--color-blue-glow));
  box-shadow: var(--neon-glow);
  z-index: 2;
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-node {
  position: relative;
  z-index: 10;
  width: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.why-node-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--bg-shallow);
  border: 3px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text-muted);
  box-shadow: var(--glass-shadow);
  transition: var(--transition-smooth);
  margin-bottom: 2rem;
  cursor: pointer;
}

.why-node-circle span {
  z-index: 2;
}

.why-node:hover .why-node-circle,
.why-node.active .why-node-circle {
  border-color: var(--color-cyan-glow);
  color: var(--color-cyan-glow);
  box-shadow: var(--neon-glow);
  transform: scale(1.1);
}

.why-node-title {
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  transition: var(--transition-snappy);
}

.why-node:hover .why-node-title,
.why-node.active .why-node-title {
  color: var(--color-cyan-glow);
}

.why-node-desc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .why-timeline-container {
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
    padding-left: 2rem;
  }
  .why-timeline-line {
    top: 0;
    left: 70px;
    width: 4px;
    height: 100%;
  }
  .why-timeline-progress {
    top: 0;
    left: 70px;
    width: 4px;
    height: 0%;
  }
  .why-node {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 2rem;
  }
  .why-node-circle {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
  }
}

/* 
========================================================================
   SECTION 4: IMPACT IN NUMBERS (DIVER STATS)
========================================================================
*/

.section-stats {
  position: relative;
  padding: 6.5rem 2rem;
  background: hsl(210, 60%, 12%);
  z-index: 10;
  border-top: 1px solid rgba(0, 242, 254, 0.06);
  border-bottom: 1px solid rgba(0, 242, 254, 0.06);
}

.stats-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.stat-card {
  padding: 3rem 2rem;
  text-align: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--color-cyan-glow);
  background: rgba(0, 242, 254, 0.06);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.1);
}

.stat-number {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: var(--color-text-pure);
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.stat-number span {
  background: linear-gradient(135deg, var(--color-text-pure), var(--color-cyan-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* 
========================================================================
   SECTION 5: TEMPLE REEF FOUNDATION
========================================================================
*/

.section-foundation {
  position: relative;
  padding: var(--section-padding);
  background: linear-gradient(180deg, hsl(210, 60%, 12%) 0%, hsl(215, 60%, 8%) 100%);
  z-index: 10;
}

.foundation-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6rem;
}

@media (max-width: 1024px) {
  .foundation-container {
    flex-direction: column;
    gap: 4rem;
  }
}

.foundation-content {
  flex: 1;
}

.foundation-content p {
  color: var(--color-text-muted);
  line-height: 1.75;
  font-size: 1.05rem;
  margin-bottom: 2.2rem;
}

.foundation-btn-row {
  display: flex;
  gap: 1.5rem;
}

.foundation-visual {
  flex: 1.1;
  position: relative;
  width: 100%;
}

.foundation-card {
  width: 100%;
  height: 480px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--glass-border);
}

.foundation-card-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foundation-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.15) 0%, rgba(3, 11, 30, 0.8) 80%);
}

.coral-nursery-visual {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 242, 254, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotate-coral 30s linear infinite;
}

@keyframes rotate-coral {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.coral-node-pulse {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-cyan-glow);
  box-shadow: var(--neon-glow);
  animation: pulse-node 2.5s infinite alternate;
}

.coral-node-pulse::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-cyan-glow);
  animation: pulse-wave 2.5s infinite;
}

@keyframes pulse-node {
  0% { transform: scale(0.85); box-shadow: 0 0 10px hsla(182, 100%, 50%, 0.2); }
  100% { transform: scale(1.15); box-shadow: 0 0 25px hsla(182, 100%, 50%, 0.7); }
}

@keyframes pulse-wave {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* 
========================================================================
   SECTION 6: CURRENTS OF THE MONTH (HAPPENINGS SLIDER)
========================================================================
*/

.section-happenings {
  position: relative;
  padding: var(--section-padding);
  background: linear-gradient(180deg, hsl(215, 60%, 8%) 0%, hsl(215, 55%, 6%) 100%);
  z-index: 10;
  overflow: hidden;
}

.happenings-carousel {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

.happenings-track-container {
  overflow: hidden;
  padding: 2rem 0;
}

.happenings-track {
  display: flex;
  gap: 2.5rem;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.happening-card {
  width: 420px;
  flex-shrink: 0;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  transition: var(--transition-smooth);
}

.happening-img-holder {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
}

.happening-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.happening-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: var(--color-cyan-glow);
  color: var(--bg-deep-abyss);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 30px;
  box-shadow: var(--neon-glow);
}

.happening-body {
  padding: 2.2rem;
}

.happening-title {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  transition: var(--transition-snappy);
}

.happening-desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1.8rem;
}

.happening-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 1.25rem;
}

.happening-price {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-cyan-glow);
}

.happening-price span {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.happening-link {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-pure);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.happening-link i {
  color: var(--color-cyan-glow);
  transition: var(--transition-snappy);
}

/* Happening Card Hover States */
.happening-card:hover {
  border-color: var(--color-cyan-glow);
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,242,254,0.12);
}

.happening-card:hover .happening-img {
  transform: scale(1.08);
}

.happening-card:hover .happening-title {
  color: var(--color-cyan-glow);
}

.happening-card:hover .happening-link i {
  transform: translateX(5px);
}

.carousel-nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  color: var(--color-text-pure);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glass-shadow);
  transition: var(--transition-snappy);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.carousel-nav-btn:hover {
  border-color: var(--color-cyan-glow);
  color: var(--color-cyan-glow);
  box-shadow: var(--neon-glow);
  transform: translateY(-50%) scale(1.08);
}

.carousel-nav-prev { left: -2.5rem; }
.carousel-nav-next { right: -2.5rem; }

@media (max-width: 1400px) {
  .carousel-nav-prev { left: 1rem; }
  .carousel-nav-next { right: 1rem; }
}

/* 
========================================================================
   SECTION 7: PADI CERTIFICATION JOURNEYS
========================================================================
*/

.section-courses {
  position: relative;
  padding: var(--section-padding);
  background: linear-gradient(180deg, hsl(215, 55%, 6%) 0%, hsl(210, 60%, 10%) 100%);
  z-index: 10;
}

.courses-tabs {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 4rem;
}

.course-tab-btn {
  padding: 1rem 2.2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
  transition: var(--transition-snappy);
}

.course-tab-btn.active, .course-tab-btn:hover {
  background: linear-gradient(135deg, var(--color-cyan-glow), var(--color-blue-glow));
  color: var(--bg-deep-abyss);
  border-color: transparent;
  box-shadow: var(--neon-glow);
}

.courses-container {
  max-width: 1400px;
  margin: 0 auto;
}

.course-view-pane {
  display: none;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 6rem;
  align-items: center;
}

.course-view-pane.active {
  display: grid;
  animation: fade-in-tab 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fade-in-tab {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
  .course-view-pane {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

.course-showcase-content h3 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.course-showcase-content p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 2.2rem;
}

.course-perks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.course-perk-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-pure);
}

.course-perk-item i {
  color: var(--color-cyan-glow);
}

.course-showcase-deck {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.course-deck-card {
  position: absolute;
  width: 320px;
  height: 420px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.course-deck-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-deck-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(3, 11, 30, 0) 40%, rgba(3, 11, 30, 0.9) 100%);
}

.course-deck-card-info {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  z-index: 2;
}

.course-deck-card-title {
  font-size: 1.4rem;
  margin-bottom: 0.3rem;
}

.course-deck-card-level {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-cyan-glow);
}

/* Card Deck Stack Layout Placement */
.course-deck-card-1 {
  transform: translate(0, 0) rotate(0deg);
  z-index: 10;
}
.course-deck-card-2 {
  transform: translate(25px, 15px) rotate(4deg);
  z-index: 9;
  opacity: 0.85;
}
.course-deck-card-3 {
  transform: translate(50px, 30px) rotate(8deg);
  z-index: 8;
  opacity: 0.7;
}

/* Hover Deck Expansion Effect */
.course-showcase-deck:hover .course-deck-card-1 {
  transform: translate(-90px, -10px) rotate(-6deg);
}
.course-showcase-deck:hover .course-deck-card-2 {
  transform: translate(15px, 0) rotate(0deg);
  opacity: 1;
}
.course-showcase-deck:hover .course-deck-card-3 {
  transform: translate(110px, 15px) rotate(6deg);
  opacity: 1;
}

/* 
========================================================================
   SECTION 8: ECO-SCUBA & RECYCLING (POLAROIDS COLLAGE)
========================================================================
*/

.section-eco {
  position: relative;
  padding: var(--section-padding);
  background: linear-gradient(180deg, hsl(210, 60%, 10%) 0%, hsl(205, 80%, 7%) 100%);
  z-index: 10;
  overflow: hidden;
}

.eco-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 5rem;
}

@media (max-width: 1024px) {
  .eco-container {
    flex-direction: column;
    gap: 5rem;
  }
}

.eco-content {
  flex: 0.95;
}

.eco-content p {
  color: var(--color-text-muted);
  line-height: 1.75;
  font-size: 1.05rem;
  margin-bottom: 2.2rem;
}

.eco-perk-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.eco-perk-card {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 1.8rem;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

.eco-perk-card-icon {
  font-size: 1.5rem;
  color: var(--color-cyan-glow);
}

.eco-perk-card-title {
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}

.eco-perk-card-desc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.eco-collage {
  flex: 1.05;
  position: relative;
  width: 100%;
  height: 480px;
}

.polaroid-frame {
  position: absolute;
  width: 250px;
  padding: 1.25rem 1.25rem 3rem 1.25rem;
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.3s;
}

.polaroid-frame-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin-bottom: 1.25rem;
}

.polaroid-frame-title {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: #1a1a1a;
}

/* Stagger placement of Polaroid photos */
.polaroid-1 {
  top: 15px;
  left: 20px;
  transform: rotate(-8deg);
  z-index: 5;
}
.polaroid-2 {
  top: 80px;
  right: 40px;
  transform: rotate(6deg);
  z-index: 4;
}
.polaroid-3 {
  bottom: 20px;
  left: 120px;
  transform: rotate(-3deg);
  z-index: 6;
}

.polaroid-frame:hover {
  transform: scale(1.08) rotate(0deg);
  z-index: 20;
  box-shadow: 0 15px 45px rgba(0,0,0,0.5);
}

@media (max-width: 580px) {
  .eco-collage {
    height: 400px;
  }
  .polaroid-frame {
    width: 180px;
  }
  .polaroid-frame-img {
    height: 120px;
  }
}

/* 
========================================================================
   SECTION 9: DIVE EQUIPMENT SHOWCASE
========================================================================
*/

.section-equipment {
  position: relative;
  padding: var(--section-padding);
  background: linear-gradient(180deg, hsl(205, 80%, 7%) 0%, hsl(210, 60%, 10%) 100%);
  z-index: 10;
}

.eq-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem;
}

@media (max-width: 1024px) {
  .eq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .eq-grid {
    grid-template-columns: 1fr;
    max-width: 350px;
  }
}

.eq-card {
  padding: 2.5rem 1.8rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.eq-img-holder {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
}

.eq-img-circle {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: 0;
  transition: var(--transition-smooth);
}

.eq-img {
  max-height: 180px;
  object-fit: contain;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.eq-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.eq-price {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-cyan-glow);
  margin-bottom: 1.5rem;
}

.eq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-pure);
  transition: var(--transition-snappy);
}

.eq-cta-btn i {
  font-size: 0.85rem;
}

/* Eq Card Hover States */
.eq-card:hover {
  border-color: var(--color-cyan-glow);
  box-shadow: 0 10px 30px rgba(0,242,254,0.08);
  transform: translateY(-5px);
}

.eq-card:hover .eq-img-circle {
  transform: scale(1.3);
  background: radial-gradient(circle, rgba(0, 242, 254, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
}

.eq-card:hover .eq-img {
  transform: scale(1.1) rotate(3deg);
}

.eq-card:hover .eq-cta-btn {
  background: var(--color-cyan-glow);
  border-color: transparent;
  color: var(--bg-deep-abyss);
  box-shadow: var(--neon-glow);
}

.eq-bottom-btn {
  text-align: center;
  margin-top: 4.5rem;
}

/* 
========================================================================
   SECTION 10: VOICES OF THE DEEP (TESTIMONIALS)
========================================================================
*/

.section-testimonials {
  position: relative;
  padding: var(--section-padding);
  background: linear-gradient(180deg, hsl(210, 60%, 10%) 0%, hsl(215, 65%, 6%) 100%);
  z-index: 10;
  overflow: hidden;
}

.testimonials-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.testimonial-slide-wrap {
  position: relative;
  width: 100%;
  height: 380px;
}

@media (max-width: 768px) {
  .testimonial-slide-wrap {
    height: 480px;
  }
}

.testimonial-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  padding: 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;
}

.testimonial-card.active {
  opacity: 1;
  visibility: visible;
}

.testimonial-quote-icon {
  font-size: 3rem;
  color: rgba(0, 242, 254, 0.12);
  margin-bottom: 1.5rem;
  display: block;
}

.testimonial-quote-text {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.65;
  color: var(--color-text-pure);
  margin-bottom: 2.2rem;
}

.testimonial-user {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial-avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 2px solid var(--color-cyan-glow);
  box-shadow: var(--neon-glow);
  object-fit: cover;
  margin-bottom: 1rem;
}

.testimonial-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.testimonial-role {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-cyan-glow);
  letter-spacing: 0.05em;
}

.testimonials-pagination {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2rem;
}

.pagination-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: var(--transition-snappy);
}

.pagination-dot.active {
  background: var(--color-cyan-glow);
  box-shadow: var(--neon-glow);
  width: 25px;
  border-radius: 5px;
}

/* 
========================================================================
   SECTION 11: MEET THE FLEET (INSTRUCTORS)
========================================================================
*/

.section-crew {
  position: relative;
  padding: var(--section-padding);
  background: linear-gradient(180deg, hsl(215, 65%, 6%) 0%, hsl(220, 60%, 3%) 100%);
  z-index: 10;
}

.crew-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

@media (max-width: 1024px) {
  .crew-grid {
    grid-template-columns: 1fr;
    max-width: 450px;
  }
}

.crew-card {
  position: relative;
  height: 500px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem 2rem;
  z-index: 2;
  transition: var(--transition-smooth);
  perspective: 1000px;
}

.crew-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.crew-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(3, 11, 30, 0) 20%, rgba(3, 11, 30, 0.95) 100%);
  z-index: 1;
}

.crew-card-content {
  position: relative;
  z-index: 2;
  transform: translateY(15px);
  transition: var(--transition-smooth);
}

.crew-card-role {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-cyan-glow);
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
  display: block;
}

.crew-card-name {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.crew-card-fact {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  opacity: 0;
  transition: var(--transition-smooth);
}

.crew-social {
  display: flex;
  gap: 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: var(--transition-smooth);
}

.crew-social-link {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--color-text-pure);
  transition: var(--transition-snappy);
}

.crew-social-link:hover {
  border-color: var(--color-cyan-glow);
  color: var(--color-cyan-glow);
  box-shadow: var(--neon-glow);
  transform: translateY(-2px);
}

/* Crew Hover states */
.crew-card:hover {
  border-color: var(--color-cyan-glow);
  box-shadow: 0 15px 45px rgba(0, 242, 254, 0.18);
  transform: translateY(-10px);
}

.crew-card:hover .crew-card-bg {
  transform: scale(1.08);
}

.crew-card:hover .crew-card-content {
  transform: translateY(0);
}

.crew-card:hover .crew-card-fact {
  opacity: 1;
}

.crew-card:hover .crew-social {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* 
========================================================================
   SECTION 12: FOOTER (THE DEEP SEA FLOOR)
========================================================================
*/

footer {
  background: #01040a;
  border-top: 1px solid rgba(0, 242, 254, 0.08);
  padding: 6.5rem 2rem 3rem 2rem;
  position: relative;
  z-index: 10;
}

.footer-wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  overflow: hidden;
  line-height: 0;
}

.footer-wave svg {
  position: relative;
  display: block;
  width: calc(150% + 1.3px);
  height: 100px;
  transform: rotate(180deg);
}

.footer-wave .shape-fill {
  fill: #01040a;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 5rem;
  margin-bottom: 3rem;
}

@media (max-width: 1024px) {
  .footer-top {
    flex-direction: column;
    gap: 4rem;
  }
}

.footer-info {
  flex: 1.2;
}

.footer-info-desc {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 380px;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.footer-newsletter {
  flex: 1.5;
}

.footer-newsletter-title {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.footer-newsletter-desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.newsletter-form {
  display: flex;
  gap: 1rem;
  max-width: 520px;
}

.newsletter-input-wrap {
  flex: 1;
  position: relative;
}

.newsletter-input {
  width: 100%;
  padding: 1.15rem 1.5rem;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-pure);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition-snappy);
}

.newsletter-input:focus {
  border-color: var(--color-cyan-glow);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.1);
}

@media (max-width: 580px) {
  .newsletter-form {
    flex-direction: column;
  }
}

.footer-bottom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  margin-bottom: 4rem;
}

@media (max-width: 768px) {
  .footer-bottom-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .footer-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.footer-col-title {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  color: var(--color-text-pure);
}

.footer-col-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-col-links a {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.footer-col-links a:hover {
  color: var(--color-cyan-glow);
  transform: translateX(3px);
}

.footer-contact-item {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.footer-contact-item i {
  color: var(--color-cyan-glow);
  margin-top: 0.2rem;
}

.footer-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 2rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .footer-meta-row {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
}

.footer-socials {
  display: flex;
  gap: 1rem;
}

/* 
========================================================================
   INTERACTIVE SEAWATER CLICK RIPPLES (DYNAMIC SEAFOAM EFFECT)
========================================================================
*/

.click-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--color-cyan-glow);
  box-shadow: 0 0 15px var(--color-cyan-glow);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: ripple-out 0.85s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  z-index: 99999;
}

@keyframes ripple-out {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-width: 4px;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0;
    border-width: 1px;
  }
}

@keyframes sound-wave-jump {
  0% {
    height: 4px;
  }
  100% {
    height: 22px;
  }
}

.announcement-bar {
  background: linear-gradient(90deg, var(--color-blue-dark) 0%, hsl(205, 80%, 15%) 50%, var(--color-blue-dark) 100%);
  color: var(--color-text-pure);
  text-align: center;
  padding: 0.65rem 2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0, 242, 254, 0.15);
  position: relative;
  z-index: 1001;
  text-shadow: var(--neon-glow);
}

/* Floating Cruise Mode Widget */
.floating-cruise-container {
  position: fixed;
  bottom: 2rem;
  right: 2.5rem;
  z-index: 999;
}

.floating-cruise-btn {
  padding: 0.8rem 1.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(3, 11, 30, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-cyan-glow);
  border-radius: 50px;
  box-shadow: var(--neon-glow);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.floating-cruise-btn:hover {
  background: rgba(0, 242, 254, 0.15);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 25px hsla(182, 100%, 50%, 0.5);
  border-color: #ffffff;
}

.floating-cruise-btn i {
  font-size: 0.95rem;
  color: var(--color-cyan-glow);
}

@media (max-width: 768px) {
  .floating-cruise-container {
    bottom: 1.5rem;
    right: 1.5rem;
  }
  .floating-cruise-btn {
    padding: 0.7rem 1.2rem;
    font-size: 0.78rem;
  }
}


/* ================================================================
   FINAL PROFESSIONAL HEADER + RESPONSIVE POLISH OVERRIDES
   Added for screenshot-style CDC underwater header and mobile fixes
================================================================ */
body { overflow-x: hidden !important; overflow-y: auto !important; }
.ta-premium-header{
  background:
    radial-gradient(circle at 12% 110%, rgba(0,224,255,.42), transparent 18%),
    radial-gradient(circle at 88% 110%, rgba(0,224,255,.34), transparent 20%),
    linear-gradient(180deg, rgba(0,27,55,.94), rgba(0,10,28,.84) 62%, rgba(0,6,18,.96));
  box-shadow: 0 18px 45px rgba(0,0,0,.35), inset 0 -1px rgba(0,240,255,.26);
  border-bottom: 2px solid rgba(0,238,255,.55);
  overflow: visible;
}
.ta-premium-header::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.85;
  background:
    radial-gradient(ellipse at 50% -30%, rgba(0,241,255,.35), transparent 36%),
    linear-gradient(105deg, transparent 0 40%, rgba(255,255,255,.10) 47%, transparent 56%);
  mix-blend-mode: screen;
}
.header-ocean-bubbles{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.header-ocean-bubbles span{position:absolute; bottom:-20px; width:14px; height:14px; border-radius:50%; border:1px solid rgba(170,250,255,.75); box-shadow:inset 0 0 8px rgba(255,255,255,.55),0 0 12px rgba(0,221,255,.45); animation: headerBubble 9s linear infinite; opacity:.75}
.header-ocean-bubbles span:nth-child(1){left:4%; width:17px;height:17px; animation-duration:10s}.header-ocean-bubbles span:nth-child(2){left:30%; animation-duration:7s; animation-delay:1s}.header-ocean-bubbles span:nth-child(3){left:58%; width:19px;height:19px; animation-delay:2s}.header-ocean-bubbles span:nth-child(4){left:75%; width:10px;height:10px; animation-duration:8s}.header-ocean-bubbles span:nth-child(5){left:93%; width:18px;height:18px; animation-delay:.6s}.header-ocean-bubbles span:nth-child(6){left:42%; width:11px;height:11px; animation-duration:11s}
@keyframes headerBubble{from{transform:translateY(35px) translateX(0);opacity:.1}30%{opacity:.8}to{transform:translateY(-150px) translateX(25px);opacity:0}}
.premium-nav-inner{position:relative; z-index:3; max-width:100%; padding:1.05rem 2.25rem 1.45rem; gap:1.5rem; align-items:center}
.main-header.scrolled .premium-nav-inner{padding:.75rem 2.25rem 1rem}.premium-logo-wrap{gap:1rem; min-width:300px}.brand-logo-link{display:block}.logo-separator{width:1px;height:86px;background:linear-gradient(transparent,rgba(0,238,255,.55),transparent)}
.ta-premium-header .logo-img-left{height:78px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}.ta-premium-header .logo-img-right{height:86px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}.main-header.scrolled .logo-img-left{height:62px}.main-header.scrolled .logo-img-right{height:70px}
.premium-nav-right{gap:1.15rem}.header-top-line{width:100%; display:flex; justify-content:flex-end; align-items:center; gap:1rem; color:#b8fbff; text-transform:uppercase; letter-spacing:.18em; font:800 clamp(.62rem,1vw,.86rem)/1 var(--font-heading); text-align:center}.line-dot{height:1px; flex:1; max-width:135px; background:linear-gradient(90deg,transparent,#03eaff,transparent)}
.header-phone{margin-left:1rem; display:flex; align-items:center; gap:.6rem; color:#fff; letter-spacing:0; text-transform:none; text-align:left}.header-phone i{font-size:1.35rem; color:#00f0ff; background:rgba(0,238,255,.12); width:42px; height:42px; display:grid; place-items:center; border-radius:50%; box-shadow:0 0 18px rgba(0,238,255,.35)}.header-phone small{display:block; font-size:.65rem; color:#c6d7e4; font-weight:500}.header-phone strong{display:block; font-size:.82rem}
.premium-menu-row{gap:.8rem}.ta-premium-header .nav-links{gap:.55rem}.ta-premium-header .nav-links a{padding:.92rem 1.05rem; border-radius:13px; background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04)); border:1px solid rgba(164,225,255,.22); box-shadow:inset 0 0 18px rgba(255,255,255,.05), 0 10px 25px rgba(0,0,0,.25); font-size:.78rem; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap}.ta-premium-header .nav-links a::after{display:none}.ta-premium-header .nav-links a i{font-size:1rem;color:#00f2ff}.ta-premium-header .nav-links a:hover{background:linear-gradient(180deg,rgba(0,240,255,.25),rgba(0,125,180,.22)); color:#fff; transform:translateY(-2px); box-shadow:0 0 22px rgba(0,235,255,.28)}.ta-premium-header .nav-links b{font-size:.72rem;color:#e8fbff}
.premium-book-btn{border-radius:14px; padding:.98rem 1.3rem; background:linear-gradient(135deg,#1df5ff,#048dff); color:#fff; box-shadow:0 0 24px rgba(0,238,255,.48), inset 0 0 18px rgba(255,255,255,.18); gap:.7rem; white-space:nowrap}.premium-book-btn i{font-size:1.05rem}.premium-book-btn:hover{background:linear-gradient(135deg,#0be7ff,#006bd6)}
.header-wave{position:absolute; left:0; right:0; bottom:-1px; height:28px; z-index:2; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,85 250,8 420,36 C580,62 640,82 760,52 C900,18 1030,28 1160,50 C1280,70 1360,58 1440,38 L1440,80 L0,80 Z' fill='%23000818'/%3E%3Cpath d='M0,45 C150,80 250,4 420,32 C580,58 640,78 760,48 C900,14 1030,24 1160,46 C1280,66 1360,54 1440,34' fill='none' stroke='%2300efff' stroke-width='3'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
.mobile-menu-toggle{display:none; width:46px; height:46px; border-radius:13px; border:1px solid rgba(0,238,255,.35); background:rgba(0,18,38,.85); box-shadow:0 0 18px rgba(0,238,255,.18); align-items:center; justify-content:center; flex-direction:column; gap:5px}.mobile-menu-toggle span{width:22px;height:2px;background:#00f2ff;border-radius:5px;transition:.25s}.mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobile-menu-toggle.active span:nth-child(2){opacity:0}.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero-abyss{padding-top:120px; min-height:100vh}
section{max-width:100%; overflow:hidden}.section-title{word-break:normal}.explore-grid,.stats-grid,.courses-grid,.equipment-grid,.crew-grid,.testimonial-grid{width:min(100%,1400px); margin-left:auto; margin-right:auto}.glass-panel,.explore-card,.course-card,.equipment-card,.crew-card,.happening-card{max-width:100%}
footer{background:radial-gradient(circle at 20% 0%,rgba(0,224,255,.16),transparent 30%),linear-gradient(180deg,#001228,#01040a 42%,#000); overflow:hidden}.footer-container{position:relative}.footer-info .logo{font-size:clamp(1.35rem,2.5vw,2.1rem)}#footer-bubbles .footer-bubble, #footer-bubbles span{width:34px!important;height:34px!important;box-shadow:inset 0 0 18px rgba(255,255,255,.45),0 0 24px rgba(0,238,255,.28)!important}
@media (max-width:1400px){.premium-nav-inner{padding-left:1.1rem;padding-right:1.1rem}.ta-premium-header .nav-links a{padding:.82rem .72rem;font-size:.72rem}.premium-logo-wrap{min-width:270px}.ta-premium-header .logo-img-left{height:66px}.ta-premium-header .logo-img-right{height:76px}.header-top-line{letter-spacing:.13em}.header-phone{margin-left:.2rem}}
@media (max-width:1150px){.premium-nav-inner{align-items:center}.premium-logo-wrap{min-width:0}.mobile-menu-toggle{display:flex; order:1}.premium-book-btn{order:3}.ta-premium-header .nav-links{display:none; position:absolute; top:100%; right:1rem; left:1rem; background:rgba(0,13,34,.97); backdrop-filter:blur(18px); border:1px solid rgba(0,238,255,.28); border-radius:18px; padding:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; box-shadow:0 25px 70px rgba(0,0,0,.55)}.ta-premium-header .nav-links.open{display:grid}.ta-premium-header .nav-links a{justify-content:flex-start;width:100%;font-size:.82rem;padding:1rem}.header-top-line{display:none}.premium-nav-right{flex-grow:0}.premium-menu-row{gap:.7rem}.hero-abyss{padding-top:96px}}
@media (max-width:768px){:root{--section-padding:4.5rem 1rem}.premium-nav-inner{padding:.8rem 1rem 1.05rem!important}.ta-premium-header .logo-img-left{height:47px}.ta-premium-header .logo-img-right{height:54px}.main-header.scrolled .logo-img-left{height:42px}.main-header.scrolled .logo-img-right{height:48px}.logo-separator{height:54px}.premium-book-btn{font-size:.72rem;padding:.78rem .82rem}.premium-book-btn i{display:none}.mobile-menu-toggle{width:42px;height:42px}.ta-premium-header .nav-links{grid-template-columns:1fr; right:.7rem; left:.7rem}.hero-abyss{height:74vh;min-height:560px;padding-top:84px}.scroll-prompt{display:none}.section-title{font-size:clamp(1.65rem,7vw,2.25rem)!important;line-height:1.12}.section-subtitle{font-size:.95rem!important;max-width:100%}.title-center-group{padding-left:1rem;padding-right:1rem}.explore-grid,.stats-grid,.courses-grid,.equipment-grid,.crew-grid,.footer-bottom-grid{grid-template-columns:1fr!important;gap:1.25rem!important}.why-timeline-container{padding-left:0!important;padding-right:0!important}.why-node{width:100%!important;margin-bottom:1.5rem}.footer-top{gap:2rem!important;padding-bottom:2.5rem!important}.newsletter-form{max-width:100%}.footer-meta-row{font-size:.75rem}.footer-contact-item{font-size:.88rem}}
@media (max-width:480px){.premium-logo-wrap{gap:.45rem}.ta-premium-header .logo-img-left{height:38px}.ta-premium-header .logo-img-right{height:45px}.logo-separator{height:44px}.premium-book-btn{padding:.7rem .62rem;font-size:.65rem}.mobile-menu-toggle{width:39px;height:39px}.hero-abyss{min-height:500px}.footer-bottom-grid{grid-template-columns:1fr!important}.footer-info-desc{max-width:100%}}
#footer-bubbles .bubble{min-width:22px!important;min-height:22px!important;border-width:2px!important;opacity:.32!important;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),rgba(0,242,254,.22) 55%,rgba(255,255,255,0) 72%)!important;}

/* =========================================================
   FINAL CLIENT FIX: stylish premier why section + mobile polish
   ========================================================= */
.why-premier{
  background: radial-gradient(circle at 88% 18%, rgba(0,194,255,.12), transparent 30%), linear-gradient(180deg,#ffffff 0%,#f5fbff 100%) !important;
  color:#233047 !important;
  padding: 7rem 2rem !important;
  overflow:hidden;
}
.why-premier:before{content:"";position:absolute;inset:auto -8% -80px -8%;height:170px;background:radial-gradient(ellipse at center, rgba(0,190,230,.18), transparent 65%);filter:blur(10px)}
.why-premier-wrap{max-width:1450px;margin:0 auto;display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:4.5rem;position:relative;z-index:2}
.why-premier .section-label{color:#00b8d9 !important;font-weight:900;letter-spacing:.055em;font-size:1rem}
.why-premier .section-title{color:#2b2f3a !important;text-align:left;margin:1.2rem 0 1.4rem;line-height:.98;font-size:clamp(2.7rem,4.8vw,5.3rem);max-width:760px}
.why-premier .glowing-text-cyan{color:#00bde7;text-shadow:none}
.why-lead{color:#53687c;font-size:1.12rem;line-height:1.75;max-width:720px;margin-bottom:2rem}
.why-premier-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0}
.why-premier-point{display:flex;gap:1rem;padding:1.15rem;border-radius:24px;background:rgba(255,255,255,.8);border:1px solid rgba(0,188,230,.18);box-shadow:0 18px 45px rgba(14,58,92,.09);transition:.35s ease}
.why-premier-point:hover{transform:translateY(-6px);box-shadow:0 24px 55px rgba(0,188,230,.17)}
.why-premier-point i{width:48px;height:48px;min-width:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#00eaff,#028eea);color:white;box-shadow:0 10px 25px rgba(0,174,230,.3)}
.why-premier-point h3{font-size:1.05rem;color:#26313d;margin:0 0 .35rem;font-weight:900}
.why-premier-point p{font-size:.92rem;line-height:1.55;color:#63778a;margin:0}
.why-premier-actions{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-top:1.5rem}
.why-premier .btn-primary{background:#ff8d4c;color:#fff;box-shadow:0 14px 28px rgba(255,141,76,.28)}
.why-text-link{display:inline-flex;gap:.7rem;align-items:center;color:#ff8d4c;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.why-text-link i{font-size:1.45rem}
.why-premier-visual{position:relative;min-height:560px}
.why-blob-img{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(760px,100%);height:430px;border-radius:42% 0 0 42% / 50% 0 0 50%;background:linear-gradient(90deg,rgba(0,170,210,.05),rgba(0,188,230,.2)), url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1200&q=85') center/cover;box-shadow:0 30px 80px rgba(0,80,120,.22);overflow:hidden}
.why-blob-img:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(0,72,110,.18))}
.why-fish{position:absolute;font-size:5.2rem;filter:drop-shadow(0 14px 18px rgba(0,0,0,.18));animation:whyFloat 4.8s ease-in-out infinite}
.fish-one{left:2%;top:17%;transform:rotate(-18deg)}.fish-two{right:5%;bottom:15%;font-size:4rem;animation-delay:1s}
.why-badge-card{position:absolute;background:rgba(255,255,255,.92);border:1px solid rgba(0,185,230,.22);border-radius:22px;padding:1rem 1.25rem;box-shadow:0 18px 40px rgba(0,70,110,.18);text-align:center;backdrop-filter:blur(12px)}
.why-badge-card strong{display:block;font-size:1.45rem;color:#00bde7}.why-badge-card span{font-size:.8rem;color:#53687c;font-weight:800;text-transform:uppercase}.badge-one{left:0;bottom:10%}.badge-two{right:12%;top:8%}
@keyframes whyFloat{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-22px) rotate(-3deg)}}

/* Fix mobile overlapping polaroid/explore issue */
@media (max-width:1024px){
  .why-premier-wrap{grid-template-columns:1fr;gap:2.5rem}.why-premier-visual{min-height:420px}.why-blob-img{left:0;right:auto;width:100%;height:360px;border-radius:42px}.why-premier .section-title{text-align:left}
  .eco-container{align-items:stretch !important}.eco-collage{height:auto !important;min-height:0 !important;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:relative;margin-top:1rem}.polaroid-frame{position:relative !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;width:100% !important;transform:none !important;padding:.8rem .8rem 1rem !important;border-radius:18px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(0,234,255,.2);box-shadow:0 18px 40px rgba(0,0,0,.22)}.polaroid-frame-title{color:#fff;font-family:var(--font-heading);font-style:normal;font-size:.9rem}.polaroid-frame-img{height:150px !important;border-radius:14px;margin-bottom:.8rem}
}
@media (max-width:640px){
  .why-premier{padding:4.5rem 1rem !important}.why-premier .section-title{font-size:2.25rem;line-height:1.05}.why-lead{font-size:1rem}.why-premier-points{grid-template-columns:1fr}.why-premier-point{border-radius:18px;padding:1rem}.why-premier-visual{min-height:310px}.why-blob-img{height:260px;border-radius:30px}.why-fish{font-size:3.2rem}.fish-two{font-size:2.8rem}.why-badge-card{padding:.75rem .9rem}.eco-collage{grid-template-columns:1fr !important}.polaroid-frame-img{height:180px !important}.eco-content p{font-size:.98rem}.eco-perk-card{padding:1.1rem;border-radius:18px}.btn-primary,.btn-secondary{width:100%;justify-content:center;text-align:center}
}

/* Footer colorful big water bubble background like reference */
footer{background:radial-gradient(circle at 50% 0%,#18d3ee 0%,#077ca5 34%,#034966 68%,#021521 100%) !important;overflow:hidden !important;border-top:0 !important}
footer:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 38%,rgba(255,255,255,.16),transparent 9%),radial-gradient(circle at 87% 45%,rgba(255,255,255,.18),transparent 11%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,34,56,.3));pointer-events:none;z-index:0}
#footer-bubbles .bubble,.bubble{border:1px solid rgba(255,255,255,.68);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.9),rgba(109,229,255,.32) 38%,rgba(255,255,255,.04) 72%);box-shadow:inset 0 0 12px rgba(255,255,255,.55),0 0 18px rgba(82,226,255,.38);border-radius:50%;position:absolute;}
.footer-container{position:relative;z-index:4;background:rgba(0,18,32,.28);border:1px solid rgba(255,255,255,.12);border-radius:34px;padding:2.2rem;backdrop-filter:blur(10px);box-shadow:0 30px 70px rgba(0,0,0,.2)}
.footer-wave .shape-fill{fill:#07364d !important}.footer-info-desc,.footer-newsletter-desc,.footer-col-links a,.footer-contact-item{color:rgba(232,250,255,.86) !important}.footer-col-title,.footer-newsletter-title{color:#fff !important}
@media(max-width:580px){footer{padding:4rem 1rem 2rem!important}.footer-container{padding:1.2rem;border-radius:24px}.footer-top{gap:2rem!important;padding-bottom:2.5rem!important}.footer-bottom-grid{gap:1.8rem!important}.footer-info-desc{max-width:100%}.footer-wave{display:none}}

/* ========================================================================
   FINAL CLIENT FIX: DARK OCEAN WHY SECTION + DEEP BUBBLE FOOTER
======================================================================== */
.why-premier{
  background:
    radial-gradient(circle at 12% 18%, rgba(0,242,254,.20), transparent 34%),
    radial-gradient(circle at 85% 15%, rgba(0,153,255,.18), transparent 38%),
    linear-gradient(180deg, #03172a 0%, #04101f 48%, #020712 100%) !important;
  color:#fff !important;
  overflow:hidden;
}
.why-premier:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 65%, rgba(0,242,254,.28) 0 3px, transparent 5px),
    radial-gradient(circle at 75% 25%, rgba(255,255,255,.25) 0 2px, transparent 4px),
    radial-gradient(circle at 90% 72%, rgba(0,242,254,.22) 0 4px, transparent 6px);
  background-size:140px 140px,190px 190px,160px 160px,220px 220px;
  opacity:.45;
  animation: finalBubbleRise 16s linear infinite;
}
.why-premier .section-label{color:#00f2fe !important;text-shadow:0 0 18px rgba(0,242,254,.45)}
.why-premier .section-title{color:#ffffff !important;text-shadow:0 16px 36px rgba(0,0,0,.45)}
.why-premier .glowing-text-cyan{color:#00eaff !important;text-shadow:0 0 22px rgba(0,234,255,.45)}
.why-lead{color:#cde9f5 !important}
.why-premier-point{
  background:linear-gradient(145deg, rgba(4,28,50,.86), rgba(3,11,30,.72)) !important;
  border:1px solid rgba(0,242,254,.22) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(12px);
}
.why-premier-point:hover{box-shadow:0 28px 70px rgba(0,242,254,.18), inset 0 1px 0 rgba(255,255,255,.10) !important}
.why-premier-point h3{color:#ffffff !important}
.why-premier-point p{color:#b8d9e8 !important}
.why-badge-card{
  background:rgba(3,18,35,.82) !important;
  border:1px solid rgba(0,242,254,.32) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.42), 0 0 28px rgba(0,242,254,.15) !important;
}
.why-badge-card span{color:#d4eff7 !important}
.why-blob-img{box-shadow:0 30px 90px rgba(0,0,0,.42), 0 0 55px rgba(0,242,254,.16) !important}
.why-text-link{color:#00eaff !important}
.why-premier .btn-primary{background:linear-gradient(135deg,#00eaff,#008cff) !important;color:#00111e !important;box-shadow:0 16px 35px rgba(0,242,254,.28) !important}

footer{
  background:
    radial-gradient(circle at 50% -10%, rgba(0,242,254,.25), transparent 35%),
    radial-gradient(circle at 12% 75%, rgba(0,153,255,.22), transparent 32%),
    linear-gradient(180deg, #03192c 0%, #021020 45%, #00040a 100%) !important;
  overflow:hidden;
}
footer:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.58) 0 2px, rgba(0,242,254,.20) 3px, transparent 8px),
    radial-gradient(circle, rgba(255,255,255,.42) 0 1px, rgba(0,180,255,.22) 3px, transparent 7px),
    radial-gradient(circle, rgba(255,255,255,.65) 0 3px, rgba(0,242,254,.18) 5px, transparent 12px);
  background-size:95px 95px,145px 145px,210px 210px;
  background-position:0 0, 40px 80px, 90px 30px;
  opacity:.62;
  animation: finalBubbleRise 18s linear infinite;
}
footer:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,4,10,.35) 100%);
}
.footer-container{position:relative;z-index:2}
.footer-wave .shape-fill{fill:#03192c !important}
@keyframes finalBubbleRise{from{background-position:0 260px,40px 350px,90px 300px,0 220px}to{background-position:0 -260px,40px -180px,90px -240px,0 -200px}}
@media (max-width:768px){
  .why-premier{padding:4.5rem 1rem !important}
  .why-premier .section-title{color:#fff !important}
  .why-premier-visual{margin-top:1rem}
  footer{padding-top:5rem !important}
}


/* ===== FINAL FOOTER FIX: no box, full dark ocean, only 5 premium bubbles ===== */
footer#footer{
  background:
    radial-gradient(circle at 18% 10%, rgba(0, 218, 255, .16), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(0, 145, 255, .12), transparent 24%),
    linear-gradient(180deg, #001e33 0%, #00101f 45%, #000812 100%) !important;
  width:100% !important;
  padding: 5.5rem 0 2rem !important;
  border-top:1px solid rgba(0,238,255,.18) !important;
  overflow:hidden !important;
  position:relative !important;
}
footer#footer:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(180deg, rgba(0,238,255,.08), transparent 32%, rgba(0,0,0,.18)),
    radial-gradient(circle at 50% 100%, rgba(0,213,255,.12), transparent 44%) !important;
  pointer-events:none !important;
  z-index:0 !important;
}
footer#footer:after{
  content:"" !important;
  position:absolute !important;
  inset:auto 0 0 0 !important;
  height:160px !important;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.32)) !important;
  pointer-events:none !important;
  z-index:0 !important;
}
footer#footer .footer-container{
  max-width: 1540px !important;
  width: min(92%, 1540px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  position:relative !important;
  z-index:3 !important;
}
footer#footer .footer-top{
  padding-bottom: 3.5rem !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}
footer#footer .footer-wave{display:none !important;}
#footer-bubbles{
  position:absolute !important;
  inset:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:1 !important;
}
#footer-bubbles .bubble{
  position:absolute !important;
  border-radius:50% !important;
  border:1px solid rgba(210,250,255,.55) !important;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.82), rgba(84,220,255,.24) 42%, rgba(0,172,255,.08) 70%, transparent 78%) !important;
  box-shadow:inset 0 0 18px rgba(255,255,255,.38), 0 0 22px rgba(0,220,255,.20) !important;
  opacity:.34 !important;
  animation: footerFloatSoft 13s ease-in-out infinite !important;
}
#footer-bubbles .fb1{width:86px!important;height:86px!important;left:6%!important;bottom:18%!important;animation-delay:0s!important;}
#footer-bubbles .fb2{width:124px!important;height:124px!important;right:8%!important;top:9%!important;animation-delay:1.2s!important;}
#footer-bubbles .fb3{width:58px!important;height:58px!important;left:44%!important;top:28%!important;animation-delay:2.1s!important;}
#footer-bubbles .fb4{width:94px!important;height:94px!important;right:24%!important;bottom:12%!important;animation-delay:.6s!important;}
#footer-bubbles .fb5{width:68px!important;height:68px!important;left:74%!important;bottom:35%!important;animation-delay:1.8s!important;}
@keyframes footerFloatSoft{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(14px,-22px,0) scale(1.05);}
}
footer#footer .footer-info-desc,
footer#footer .footer-newsletter-desc,
footer#footer .footer-col-links a,
footer#footer .footer-contact-item{color:rgba(230,248,255,.84) !important;}
footer#footer .footer-col-title,
footer#footer .footer-newsletter-title{color:#fff !important;}
@media(max-width:768px){
  footer#footer{padding:4rem 0 1.7rem !important;}
  footer#footer .footer-container{width:min(90%, 1540px)!important;}
  footer#footer .footer-top{padding-bottom:2rem!important;}
  #footer-bubbles .fb2{width:82px!important;height:82px!important;right:4%!important;top:6%!important;}
  #footer-bubbles .fb4{width:70px!important;height:70px!important;right:8%!important;bottom:10%!important;}
  #footer-bubbles .fb1,#footer-bubbles .fb3,#footer-bubbles .fb5{display:none!important;}
}

/* ========================================================================
   FINAL POLISH: Professional footer bubbles + smaller Why heading
======================================================================== */
.why-premier .section-title{
  font-size:clamp(2.25rem, 3.8vw, 4.15rem) !important;
  line-height:1.05 !important;
  max-width:680px !important;
  letter-spacing:-.045em !important;
}
.why-premier .section-label{font-size:.88rem !important;}
.why-lead{font-size:clamp(1rem,1.35vw,1.18rem) !important;line-height:1.75 !important;max-width:760px !important;}
@media(max-width:1024px){
  .why-premier .section-title{font-size:clamp(2rem,6vw,3.25rem) !important;max-width:100% !important;}
}
@media(max-width:580px){
  .why-premier .section-title{font-size:clamp(1.82rem,8.5vw,2.35rem) !important;line-height:1.12 !important;letter-spacing:-.025em !important;}
  .why-premier .section-label{font-size:.76rem !important;letter-spacing:.04em !important;}
  .why-lead{font-size:.95rem !important;line-height:1.65 !important;}
}

footer#footer{
  background:
    radial-gradient(circle at 15% 5%, rgba(0,224,255,.13), transparent 28%),
    radial-gradient(circle at 85% 8%, rgba(11,116,255,.12), transparent 26%),
    linear-gradient(180deg,#00172b 0%,#000d1b 52%,#00050c 100%) !important;
}
footer#footer:before{
  background:
    linear-gradient(180deg,rgba(0,238,255,.06),transparent 35%,rgba(0,0,0,.25)),
    radial-gradient(ellipse at 50% 105%,rgba(0,214,255,.10),transparent 48%) !important;
  opacity:1 !important;
}
#footer-bubbles .bubble{
  opacity:.55 !important;
  border:1px solid rgba(185,246,255,.58) !important;
  background:
    radial-gradient(circle at 28% 25%, rgba(255,255,255,.92) 0 6%, rgba(210,251,255,.45) 7% 17%, transparent 18%),
    radial-gradient(circle at 68% 72%, rgba(255,255,255,.24) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(87,218,255,.18), rgba(8,86,126,.20) 52%, rgba(255,255,255,.03) 70%, transparent 74%) !important;
  box-shadow:
    inset -12px -14px 22px rgba(0,24,42,.36),
    inset 10px 10px 20px rgba(255,255,255,.20),
    0 0 30px rgba(0,219,255,.14) !important;
  filter:blur(.05px) saturate(1.05) !important;
  animation: footerBubblePremium 16s ease-in-out infinite !important;
}
#footer-bubbles .fb1{width:58px!important;height:58px!important;left:7%!important;bottom:14%!important;top:auto!important;}
#footer-bubbles .fb2{width:92px!important;height:92px!important;right:8%!important;top:8%!important;}
#footer-bubbles .fb3{width:42px!important;height:42px!important;left:48%!important;top:22%!important;}
#footer-bubbles .fb4{width:78px!important;height:78px!important;right:26%!important;bottom:8%!important;}
#footer-bubbles .fb5{width:50px!important;height:50px!important;left:76%!important;bottom:38%!important;}
@keyframes footerBubblePremium{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  35%{transform:translate3d(10px,-18px,0) scale(1.04);}
  70%{transform:translate3d(-8px,-30px,0) scale(.98);}
}
footer#footer .footer-info .logo{font-size:clamp(1.7rem,3vw,2.7rem) !important;}
footer#footer .footer-container{width:min(92%,1540px)!important;}
@media(max-width:768px){
  footer#footer{padding:3.5rem 0 1.5rem!important;}
  footer#footer .footer-top{gap:1.8rem!important;}
  footer#footer .footer-bottom-grid{gap:1.6rem!important;}
  #footer-bubbles .fb1{display:block!important;width:46px!important;height:46px!important;left:8%!important;bottom:9%!important;}
  #footer-bubbles .fb2{display:block!important;width:68px!important;height:68px!important;right:5%!important;top:6%!important;}
  #footer-bubbles .fb3{display:block!important;width:34px!important;height:34px!important;left:54%!important;top:30%!important;}
  #footer-bubbles .fb4{display:block!important;width:54px!important;height:54px!important;right:12%!important;bottom:12%!important;}
  #footer-bubbles .fb5{display:none!important;}
}
@media(max-width:480px){
  footer#footer .footer-container{width:min(90%,1540px)!important;}
  footer#footer .footer-info .logo{font-size:1.85rem!important;}
  footer#footer .newsletter-form{display:grid!important;grid-template-columns:1fr!important;gap:.85rem!important;}
  footer#footer .newsletter-form .btn-primary{width:100%!important;}
}

/* ========================================================================
   FINAL CLIENT FIX: Clean single glass footer bubbles (no inner bubbles)
======================================================================== */
#footer-bubbles .bubble,
#footer-bubbles span,
.footer-bubble{
  position:absolute !important;
  border-radius:50% !important;
  opacity:.42 !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(190,248,255,.42) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.10),
    inset -10px -12px 22px rgba(0,18,35,.26),
    0 0 24px rgba(0,220,255,.12) !important;
  filter:none !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
  animation: footerBubbleClean 15s ease-in-out infinite !important;
}
#footer-bubbles .bubble::before,
#footer-bubbles .bubble::after,
#footer-bubbles span::before,
#footer-bubbles span::after,
.footer-bubble::before,
.footer-bubble::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
}
#footer-bubbles .fb1{width:54px!important;height:54px!important;left:7%!important;bottom:14%!important;top:auto!important;}
#footer-bubbles .fb2{width:86px!important;height:86px!important;right:8%!important;top:8%!important;}
#footer-bubbles .fb3{width:38px!important;height:38px!important;left:48%!important;top:22%!important;}
#footer-bubbles .fb4{width:72px!important;height:72px!important;right:26%!important;bottom:8%!important;}
#footer-bubbles .fb5{width:46px!important;height:46px!important;left:76%!important;bottom:38%!important;}
@keyframes footerBubbleClean{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(8px,-22px,0) scale(1.035);}
}
.why-premier .section-title{
  font-size:clamp(2rem,3.35vw,3.75rem) !important;
  line-height:1.08 !important;
  max-width:650px !important;
}
@media(max-width:768px){
  .why-premier .section-title{font-size:clamp(1.65rem,7.5vw,2.15rem) !important;line-height:1.14 !important;}
  #footer-bubbles .fb1{display:block!important;width:42px!important;height:42px!important;left:8%!important;bottom:9%!important;}
  #footer-bubbles .fb2{display:block!important;width:62px!important;height:62px!important;right:5%!important;top:6%!important;}
  #footer-bubbles .fb3{display:block!important;width:32px!important;height:32px!important;left:54%!important;top:30%!important;}
  #footer-bubbles .fb4{display:block!important;width:50px!important;height:50px!important;right:12%!important;bottom:12%!important;}
  #footer-bubbles .fb5{display:none!important;}
}