/* ================================
   SCODA SPORTS ACADEMY DESIGN SYSTEM
================================ */

/* ---------- ROOT VARIABLES ---------- */

/* ---------- ROOT VARIABLES (US SPORTS STANDARD) ---------- */

:root {

  /* PRIMARY BRAND — Athletic Navy */
  --primary: #0B2545;        /* deep sports navy */

  /* ACCENT — Performance Red */
  --secondary: #E63946;      /* energetic athletic red */

  /* NEUTRALS */
  --white: #FFFFFF;
  --light-gray: #F5F7FA;     /* modern sports background */
  --text-dark: #111827;      /* near-black for readability */

  /* SUPPORT COLORS */
  --success: #16A34A;        /* signup success */
  --info: #2563EB;           /* links & highlights */
  --border-color: #E5E7EB;

  /* CTA DARK (used already in CTA section) */
  --athletic-dark: #020617;  /* stadium-night tone */

  /* Layout */
  --max-width: 1200px;
}

/* ---------- RESET ---------- */

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

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
}

/* ---------- CONTAINER ---------- */

.container {
  width: 90%;
  max-width: var(--max-width);
  margin: auto;
}

/* ---------- TYPOGRAPHY ---------- */

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--primary);
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }

p {
  font-size: 16px;
  margin-bottom: 15px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}

a:hover {
    opacity: 0.8;
}
/* ---------- SECTION SPACING ---------- */

.section {
  padding: 80px 0;
}

.section-light {
  background: var(--light-gray);
}

.section-dark {
  background: var(--primary);
  color: var(--white);
}

.section-dark h2 {
  color: var(--white);
}

/* ---------- BUTTON SYSTEM ---------- */

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

/* Primary CTA */
.btn-primary {
  background: var(--secondary);
  color: var(--white);
}

.btn-primary:hover {
  background: #c61c1c;
}

/* Secondary Button */
.btn-secondary {
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-secondary:hover {
  background: var(--primary);
  color: var(--white);
}

/* ---------- HEADER ---------- */

header {
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
}

.nav-menu a {
  margin-left: 25px;
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
}

.nav-menu a:hover {
  color: var(--primary);
}

/* ---------- HERO SECTION ---------- */

/* =================================
   US SPORTS ACADEMY HERO
================================= */

.hero {
    position: relative;
    height: 90vh;
    min-height: 650px;
    background-image: url('../images/hero.jpg'); /* change image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

/* Athletic gradient overlay */
.hero-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(2,6,23,0.92) 0%,
            rgba(11,37,69,0.85) 45%,
            rgba(11,37,69,0.55) 70%,
            rgba(0,0,0,0.2) 100%
        );
}

/* Content alignment */
.hero-content {
    max-width: 700px;
    color: #fff;
}

/* Small recruitment label */
.hero-tag {
    display: inline-block;
    background: rgba(230,57,70,0.15);
    color: #fff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(230,57,70,0.4);
}

/* Headline */
.hero h1 {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
    letter-spacing: -1px;
}

/* Supporting text */
.hero p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 35px;
}

/* Buttons layout */
.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Secondary button refinement */
.btn-secondary {
    border: 2px solid #fff;
    color: #fff;
}

.btn-secondary:hover {
    background: #fff;
    color: var(--primary);
}

/* Subtle entrance animation */
.hero-content {
    animation: heroFade 0.8s ease forwards;
}

@keyframes heroFade {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MOBILE OPTIMIZATION */

@media (max-width: 768px) {

    .hero {
        height: auto;
        padding: 120px 0;
    }

    .hero h1 {
        font-size: 38px;
    }

    .hero p {
        font-size: 16px;
    }
}

/* ---------- CARD SYSTEM ---------- */

.card {
  background: var(--white);
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

/* ---------- GRID ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* ---------- FOOTER ---------- */

footer {
  background: var(--primary);
  color: var(--white);
  padding: 50px 0;
}

footer a {
  color: var(--white);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Grid wrapper for programs */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;           /* spacing between cards */
    justify-items: center; /* center cards inside grid cells */
    margin-top: 30px;
}

/* Program Card */
.program-card {
    width: 100%;
    max-width: 300px;       /* max width for neat cards */
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.program-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* Image inside card */
.program-image {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.4s ease;
}

.program-card:hover .program-image {
    transform: scale(1.05);
}

/* Badge for age group */
.program-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--secondary, #ff6347);
    color: #fff;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 20px;
    font-weight: 600;
}

/* Content below image */
.program-content {
    padding: 15px 20px;
}

.program-content h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.program-content p {
    font-size: 15px;
    color: #555;
    margin-bottom: 15px;
}

/* Optional button */
.program-content .btn {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--secondary);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s;
}

.program-content .btn:hover {
    background-color: #c1121f;
}

/* ---------- COACH CARD ---------- */

.coach-card {
  text-align: center;
  overflow: hidden;
}

.coach-image {
  height: 260px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  margin-bottom: 15px;
}

.coach-role {
  display: block;
  color: var(--secondary);
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 14px;
}

.coach-content p {
  font-size: 15px;
}

.coach-image {
  transition: transform 0.4s ease;
}

.coach-card:hover .coach-image {
  transform: scale(1.05);
}
/* ---------- TESTIMONIAL CARD ---------- */

.testimonial-card {
  text-align: center;
  padding: 30px 20px;
}

.testimonial-image {
  width: 90px;
  height: 90px;
  margin: auto;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-bottom: 15px;
  border: 4px solid var(--primary);
}

.testimonial-message {
  font-style: italic;
  margin-bottom: 15px;
  font-size: 15px;
}

.testimonial-role {
  display: block;
  color: var(--secondary);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.testimonial-achievement {
  font-size: 13px;
  background: var(--light-gray);
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-block;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  transition: 0.3s ease;
}

/* Gallery grid */
/* Section styling */
.gallery-preview {
    padding: 50px 20px;
    background-color: #f9f9f9;
}

.gallery-preview .section-title {
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
    color: #333;
}

/* Grid layout */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-items: center; /* prevent full-width stretching */
}

/* Card styling */
.gallery-item {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    width: 100%;          /* fill grid cell */
    max-width: 300px;     /* max width of card */
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Image inside card */
.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* crop large images nicely */
    display: block;
}

/* Title below image */
.gallery-item .title {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: #333;
}

/* Center button */
.gallery-preview .center {
    text-align: center;
    margin-top: 30px;
}

.btn-primary {
    display: inline-block;
    padding: 10px 25px;
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #0056b3;
}

/* =====================
   CTA SECTION
===================== */

/* =====================
   CTA SECTION (US STYLE)
===================== */

.cta-section {
    background: #0f172a; /* deep athletic navy */
    color: #ffffff;
    padding: 90px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* subtle texture overlay */
.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.04),
        transparent 60%
    );
}

/* content wrapper */
.cta-wrapper {
    max-width: 720px;
    margin: auto;
    position: relative;
    z-index: 2;
}

.cta-section h2 {
    font-size: 2.2rem;
    margin-bottom: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.cta-section p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* buttons layout */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Primary Button (Enrollment) */
.btn-primary {
    background: #e11d48; /* athletic red accent */
    color: #ffffff;
    padding: 14px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s ease;
}

.btn-primary:hover {
    background: #be123c;
    transform: translateY(-2px);
}

/* WhatsApp Button (Secondary Action) */
.btn-whatsapp {
    background: transparent;
    color: #ffffff;
    padding: 14px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid rgba(255,255,255,0.4);
    transition: all 0.25s ease;
}

.btn-whatsapp:hover {
    background: rgba(255,255,255,0.1);
    border-color: #ffffff;
}

/* entrance animation */
.cta-section {
    animation: fadeUp 0.7s ease;
}

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

/* ================================
   REGISTRATION SECTION
================================ */

.registration-section {
    background: #f7f9fc;
    padding: 80px 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    max-width: 900px;
    margin: auto;
}

/* Header */

.reg-header {
    text-align: center;
    margin-bottom: 40px;
}

.reg-header h2 {
    font-size: 36px;
    color: #0b2c5f;
    margin-bottom: 10px;
}

.reg-header p {
    color: #555;
    font-size: 16px;
}

/* Form Box */

.registration-form {
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Grid Layout */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Section Titles */

.form-title {
    grid-column: span 2;
    margin-top: 20px;
    font-size: 20px;
    color: #0b2c5f;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

/* Inputs */

.registration-form input,
.registration-form select,
.registration-form textarea {
    width: 100%;
    padding: 14px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 15px;
    transition: 0.3s;
}

.registration-form textarea {
    grid-column: span 2;
    min-height: 120px;
    resize: vertical;
}

/* Focus Effect */

.registration-form input:focus,
.registration-form select:focus,
.registration-form textarea:focus {
    border-color: #0b2c5f;
    outline: none;
    box-shadow: 0 0 5px rgba(11,44,95,0.2);
}

/* Button */

.register-btn {
    margin-top: 30px;
    width: 100%;
    padding: 16px;
    background: #0b2c5f;
    color: white;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.register-btn:hover {
    background: #081f42;
}

/* Responsive */

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

    .form-title,
    .registration-form textarea {
        grid-column: span 1;
    }

    .registration-form {
        padding: 25px;
    }
}
/* =================================
   STICKY TRANSPARENT NAVBAR
================================= */

.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.35s ease;
}

/* Transparent state (hero area) */
.header.transparent {
    background: transparent;
    box-shadow: none;
}

/* Scrolled state */
.header.scrolled {
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Navbar layout */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
}

/* Logo */
.logo img {
    height: 55px;
    transition: 0.3s;
}

/* Menu links */
.nav-menu a {
    margin-left: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

/* WHITE TEXT over hero */
.header.transparent .nav-menu a {
    color: #ffffff;
}

/* DARK TEXT after scroll */
.header.scrolled .nav-menu a {
    color: var(--text-dark);
}

.nav-menu a:hover {
    color: var(--secondary);
}

/* Enroll button spacing */
.nav-cta {
    margin-left: 30px;
}
.hero {
    margin-top: -80px;
}
/* =========================
   STATS BAR
========================= */

.stats-bar {
  background: linear-gradient(135deg, #0d47a1, #1976d2);
  color: #fff;
  padding: 60px 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.stat-item h3 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.stat-item p {
  font-size: 16px;
  opacity: 0.9;
  letter-spacing: 0.5px;
}

/* Hover effect */
.stat-item {
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
}

/* Mobile */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .stat-item h3 {
    font-size: 32px;
  }
}

/* =========================
   PROGRAMS SECTION
========================= */

.programs-section {
  background: #f7f9fc;
  padding: 80px 20px;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: auto;
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 36px;
  margin-bottom: 15px;
  color: #0d47a1;
}

.section-header p {
  color: #666;
  line-height: 1.6;
}

/* GRID */

.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Card polish (applies to your program-card) */

.program-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  transition: all 0.35s ease;
}

.program-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.program-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* CTA below grid */

.programs-cta {
  text-align: center;
  margin-top: 40px;
}

.btn-outline {
  border: 2px solid #0d47a1;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  color: #0d47a1;
  font-weight: 600;
  transition: 0.3s;
}

.btn-outline:hover {
  background: #0d47a1;
  color: #fff;
}

/* Responsive */

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

@media (max-width: 600px) {
  .programs-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   TRUST / STANDARDS SECTION
========================= */

.trust-section {
    padding: 80px 20px;
    background: #f7f9fc;
    text-align: center;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #0a2a66;
}

.section-subtitle {
    max-width: 650px;
    margin: auto;
    margin-bottom: 50px;
    color: #666;
    line-height: 1.6;
}

/* grid */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
}

/* card */
.trust-item {
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0,0,0,0.06);
    transition: 0.3s ease;
}

.trust-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* icon */
.trust-icon {
    font-size: 34px;
    margin-bottom: 15px;
}

.trust-item h4 {
    color: #0a2a66;
    margin-bottom: 10px;
}

.trust-item p {
    font-size: 15px;
    color: #555;
}
/* ======================
   WHY SCODA SECTION
====================== */

.why-scoda {
    padding: 80px 20px;
    background: #ffffff;
}

.why-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.why-text h2 {
    color: #0a2a66;
    margin-bottom: 20px;
}

.why-text p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}

.why-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.why-list li {
    margin-bottom: 10px;
    font-size: 16px;
}

.why-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* mobile */
@media(max-width: 900px) {
    .why-wrapper {
        grid-template-columns: 1fr;
    }
}
/* =========================
   MOBILE NAVIGATION
========================= */

.logo img {
  height: 55px;
}

/* hamburger hidden on desktop */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
  transition: 0.3s;
}

/* NAV MENU DEFAULT */
.nav-menu {
  display: flex;
  align-items: center;
}

/* =========================
   MOBILE STYLE
========================= */

@media (max-width: 900px) {

  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 260px;
    height: 100vh;
    background: #0f172a;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 25px;
    gap: 20px;
    transition: 0.35s ease;
    z-index: 999;
  }

  .nav-menu a {
    color: #fff;
    font-size: 18px;
    margin: 0;
  }

  .nav-menu.active {
    right: 0;
  }

  /* overlay effect */
  body.menu-open {
    overflow: hidden;
  }

  .nav-cta {
    margin-top: 10px;
  }
}
/* =========================
   STICKY HEADER (HERO AWARE)
========================= */

/* DEFAULT — over hero: transparent */
#siteHeader {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  transition: all 0.35s ease;
}

/* nav links white when over hero */
#siteHeader.hero-over .nav-menu a {
  color: #ffffff;
}

/* SCROLLED STATE — when not over hero */
#siteHeader.scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* change link color after scroll */
#siteHeader.scrolled .nav-menu a {
  color: var(--text-dark);
}

/* navbar animation */
.navbar {
  transition: padding 0.3s ease;
}

#siteHeader.scrolled .navbar {
  padding: 10px 0;
}

/* logo shrink */
.logo img {
  transition: 0.3s ease;
}

#siteHeader.scrolled .logo img {
  height: 45px;
}
/* =========================
   PROGRAM DETAIL PAGE
========================= */

.program-hero {
    height: 65vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}

.program-hero-overlay {
    width: 100%;
    padding: 120px 20px;
    background: linear-gradient(
        rgba(15,23,42,0.85),
        rgba(15,23,42,0.65)
    );
    color: #fff;
    text-align: center;
}

.program-age {
    background: var(--secondary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 15px;
}

.program-hero h1 {
    color: #fff;
    font-size: 48px;
    margin-bottom: 15px;
}

.program-details {
    max-width: 800px;
}

.focus-list {
    list-style: none;
    margin-top: 25px;
}

.focus-list li {
    padding: 14px 18px;
    background: var(--light-gray);
    margin-bottom: 12px;
    border-radius: 8px;
    font-weight: 500;
    position: relative;
}

.focus-list li::before {
    content: "⚽";
    margin-right: 10px;
}
/* =========================
   PAGE HERO
========================= */

/* =========================
   PREMIUM SPORTS HERO
========================= */

.page-hero {
    position: relative;
    padding: 220px 0 140px;
    margin-top: -80px; /* header overlap */
    text-align: center;
    color: #fff;
    overflow: hidden;

    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 40%),
        linear-gradient(135deg, #0b1220, #111c2f 60%, #0f172a);
}

/* Subtle light texture layer */
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/images/noise.png');
    opacity: 0.05;
    pointer-events: none;
}

/* Keep content above overlays */
.page-hero .container {
    position: relative;
    z-index: 2;
}

/* Content width */
.page-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Eyebrow */
.page-eyebrow {
    display: inline-block;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 20px;
    position: relative;
}

.page-eyebrow::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: var(--color-secondary);
    margin: 10px auto 0;
}

/* Main heading */
.page-hero h1 {
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1px;

    background: linear-gradient(90deg, #60a5fa, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
}

/* Description */
.page-hero p {
    font-size: 1.2rem;
    max-width: 650px;
    margin: 0 auto;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
}

/* Entrance animation */
.page-hero-content {
    animation: fadeUp 1s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================
   RELATED PROGRAMS
========================= */

.related-programs {
    background: var(--color-light-gray);
}
/* =========================
   BREADCRUMB
========================= */

.breadcrumb {
    padding: 20px 0;
    background: #fff;
    font-size: 0.9rem;
}

.breadcrumb nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .current {
    color: #666;
    font-weight: 500;
}
.program-hero {
    margin-bottom: 40px; /* pushes next section down */
}
.breadcrumb {
    position: relative;
    z-index: 5;
    padding: 20px 0 40px; /* extra bottom space */
}
.program-hero::before {
    pointer-events: none;
}
/* =========================
   PROGRAM QUICK FACTS — ATHLETIC NAVY
========================= */

/* =========================
   PROGRAM QUICK FACTS — ELITE STYLE
========================= */

.program-facts {
    background: var(--color-primary); /* Athletic Navy */
    padding: 60px 0;
    position: relative;
    z-index: 2;
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.fact-item {
    padding: 25px 20px;
    border-radius: 12px;
    background: #1a1f4b; /* darker blue box */
    transition: all 0.3s ease;
}

.fact-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.fact-icon {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 12px;
}

.fact-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #f5f5f5;
    margin-bottom: 8px;
    font-weight: 600;
}

.fact-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .facts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .facts-grid {
        grid-template-columns: 1fr;
    }
}
.fact-icon { font-size: 1.8rem; color: #fff; }

.related-programs .section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 40px;
    text-decoration: none !important; /* remove underline */
}
.program-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.program-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

.program-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.program-card-content {
    padding: 20px;
}

.program-card-content h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.program-card-content p {
    font-size: 0.9rem;
    color: #555;
}
.related-programs .section-title a {
    text-decoration: none;
    color: inherit; /* keeps primary color */
}
.about-hero {
    text-align: center;
    padding-top: 120px;
}

.narrow {
    max-width: 750px;
    margin: 0 auto;
}

.bg-light {
    background: #f7f9fc;
}

.highlight-text {
    font-size: 1.2rem;
    margin-top: 20px;
}

.info-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.philosophy-list {
    margin: 20px 0;
    padding-left: 20px;
}

.philosophy-list li {
    margin-bottom: 10px;
}

.founder-signature {
    margin-top: 20px;
    font-weight: 600;
}

.cta-section {
    text-align: center;
}

.section-lg {
    padding: 140px 0 80px;
}

.page-title {
    font-size: 3rem;
    margin-bottom: 15px;
}

.page-subtitle {
    max-width: 650px;
    margin: auto;
    font-size: 1.2rem;
    opacity: .8;
}

.statement {
    font-size: 1.25rem;
    margin-top: 20px;
}

.image-block img {
    width: 100%;
    border-radius: 12px;
}

.philosophy-grid .pillar {
    background: #fff;
    padding: 25px;
    text-align: center;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
}



.founder-text {
    font-size: 1.3rem;
    font-style: italic;
}

.founder-name {
    display: block;
    margin-top: 15px;
    font-weight: 600;
}
/* =====================================
   PREMIUM SPLIT SECTION FOR SSA
===================================== */

.about-split.premium .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: auto;
}

/* IMAGE SIDE */
.about-split.premium .about-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
    transition: transform 0.5s ease;
}

.about-split.premium .about-image img:hover {
    transform: scale(1.02);
}

/* TEXT SIDE */
.about-split.premium .about-content {
    max-width: 520px;
}

.about-split.premium .tag {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #d32f2f; /* Scoda primary red accent */
    margin-bottom: 10px;
    display: inline-block;
}

.about-split.premium h2 {
    font-size: 38px;
    line-height: 1.3;
    margin-bottom: 18px;
    font-weight: 700;
}

.about-split.premium p {
    margin-bottom: 16px;
    line-height: 1.7;
    font-size: 1.05rem;
    color: #1b1b1b;
}

.about-split.premium .statement {
    font-size: 1.25rem;
    margin-top: 20px;
    font-weight: 500;
}

/* BUTTON */
.about-split.premium .btn-primary {
    margin-top: 25px;
    padding: 12px 28px;
    border-radius: 40px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.about-split.premium .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* MOBILE */
@media (max-width: 768px) {
    .about-split.premium .container {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .about-split.premium .about-image img {
        height: 300px;
    }

    .about-split.premium .about-content {
        max-width: 100%;
    }
}
/* ================= PHILOSOPHY PREMIUM (Font Awesome) ================= */

.philosophy-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

.pillar-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
}

/* Font Awesome icons */
.pillar-icon {
    font-size: 2.5rem; /* adjusts icon size */
    color: #d32f2f; /* SSA performance red */
    margin-bottom: 18px;
}

.pillar-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1b1b1b;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .philosophy-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pillar-card {
        padding: 25px 15px;
    }

    .pillar-icon {
        font-size: 2rem;
    }
}
/* MISSION & VISION PREMIUM */
.mission-band-premium {
    background: linear-gradient(135deg, #fef9f8, #fff5f5);
    padding: 80px 20px;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: auto;
}

.mission-card {
    background: #fff;
    padding: 40px 25px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 60px rgba(0,0,0,0.12);
}

.mission-icon {
    font-size: 2.5rem;
    color: #d32f2f; /* SSA red accent */
    margin-bottom: 18px;
}

.mission-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 18px;
}

.mission-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #1b1b1b;
}

/* MOBILE */
@media (max-width: 768px) {
    .mission-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .mission-card {
        padding: 30px 20px;
    }

    .mission-icon {
        font-size: 2rem;
    }

    .mission-card h3 {
        font-size: 1.4rem;
    }
}
/* PREMIUM MISSION & VISION BAND WITH DEEP BLUE CARDS */
.mission-band-premium {
    background: #f5f7fa; /* light overall background */
    padding: 80px 20px;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: auto;
}

/* CARD STYLING */
.mission-card {
    background: #0b1e45; /* Deep Blue */
    color: #ffffff;       /* White text */
    padding: 40px 25px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 60px rgba(0,0,0,0.18);
}

/* ICON */
.mission-icon {
    font-size: 2.5rem;
    color: #f0c040; /* optional gold accent for icons */
    margin-bottom: 18px;
}

/* HEADINGS */
.mission-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 18px;
}

/* PARAGRAPH TEXT */
.mission-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #ffffff; /* white for readability */
}

/* MOBILE */
@media (max-width: 768px) {
    .mission-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .mission-card {
        padding: 30px 20px;
    }

    .mission-icon {
        font-size: 2rem;
    }

    .mission-card h3 {
        font-size: 1.4rem;
    }
}
/* Force Mission & Vision card headings to white */
.mission-band-premium .mission-card h3 {
    color: #ffffff !important; /* force white */
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 18px;
}
/* WHAT MAKES SSA PREMIUM */
.what-ssa-premium {
    background: #f5f7fa; /* subtle light background */
    padding: 80px 20px;
}

/* OLD: .feature-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; } */

/* NEW: Fixed 4-card layout */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* force 4 columns on desktop */
    gap: 30px;
    margin-top: 50px;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .feature-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
    .feature-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-card {
        padding: 25px 15px;
    }

    .feature-icon {
        font-size: 2rem;
    }

    .feature-card h4 {
        font-size: 1.1rem;
    }
}

.feature-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
}

.feature-icon {
    font-size: 2.5rem;
    color: #d32f2f; /* SSA accent red */
    margin-bottom: 18px;
}

.feature-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #1b1b1b;
}

/* MOBILE RESPONSIVE */
@media (max-width: 1024px) {
    .feature-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .feature-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-card {
        padding: 25px 15px;
    }

    .feature-icon {
        font-size: 2rem;
    }

    .feature-card h4 {
        font-size: 1.1rem;
    }
}
/* WHAT MAKES SSA UNIQUE - SECTION BACKGROUND */
.what-ssa-premium {
    background: #f0f2f5; /* subtle light gray shade */
    padding: 80px 20px;
}
/* ABOUT PAGE HERO */
.about-hero {
    position: relative;
    width: 100%;
    height: 450px; /* adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ensures full cover without distortion */
    object-position: center;
    display: block;
}

.hero-background .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 30, 69, 0.55); /* SSA deep blue overlay */
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    max-width: 900px;
    text-align: center;
    padding: 0 20px;
}

/* Headings and subtitle styling remain the same */
.hero-content .page-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.hero-content .page-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* CTA */
.hero-content .hero-cta {
    padding: 14px 28px;
    font-size: 1.1rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .about-hero {
        height: 400px;
    }

    .hero-content .page-title {
        font-size: 2.4rem;
    }

    .hero-content .page-subtitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .about-hero {
        height: 350px;
    }

    .hero-content .page-title {
        font-size: 1.8rem;
    }

    .hero-content .page-subtitle {
        font-size: 1rem;
    }

    .hero-content .hero-cta {
        padding: 12px 24px;
        font-size: 1rem;
    }
}
/* HERO IMAGE */
.about-hero {
    position: relative;
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-background .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11,30,69,0.55);
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
}

.page-title { font-size: 3rem; font-weight: 700; text-shadow: 0 4px 15px rgba(0,0,0,0.4); margin-bottom: 15px; }
.page-subtitle { font-size: 1.25rem; line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }

/* CORE PILLARS GRID */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.pillar-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
}

.pillar-icon {
    font-size: 2.5rem;
    color: #d32f2f; /* SSA red accent */
    margin-bottom: 18px;
}

.pillar-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.pillar-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #1b1b1b;
}

/* WHY PHILOSOPHY MATTERS */
.philosophy-value { text-align: center; margin: 80px 0; max-width: 800px; margin-left:auto; margin-right:auto; }

/* CTA */
.cta-philosophy { text-align: center; padding: 60px 20px; background: #0b1e45; color: #fff; border-radius: 12px; }
.cta-philosophy .btn { margin-top: 20px; }

/* RESPONSIVE */
@media (max-width: 1024px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .pillars-grid { grid-template-columns: 1fr; } }
/* HERO */
.about-hero { position: relative; width: 100%; height: 450px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-background img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-background .overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(11,30,69,0.55); }
.hero-content { position: relative; z-index:2; text-align:center; color:#fff; max-width:900px; padding:0 20px; }
.page-title { font-size:3rem; font-weight:700; text-shadow:0 4px 15px rgba(0,0,0,0.4); margin-bottom:15px; }
.page-subtitle { font-size:1.25rem; line-height:1.6; text-shadow:0 2px 10px rgba(0,0,0,0.3); }
.hero-cta { margin-top:20px; }

/* PILLARS */
.pillars-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:30px; margin-top:50px; }
.pillar-card { background:#fff; padding:35px 25px; border-radius:12px; text-align:center; box-shadow:0 15px 35px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pillar-card:hover { transform: translateY(-6px); box-shadow:0 20px 45px rgba(0,0,0,0.12); }
.pillar-icon { font-size:2.5rem; color:#d32f2f; margin-bottom:18px; }
.pillar-card h4 { font-size:1.25rem; font-weight:600; margin-bottom:12px; }
.pillar-card p { font-size:1rem; line-height:1.6; color:#1b1b1b; }

/* SPLIT SECTIONS */
.split-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; margin-top:60px; }
.split-image img { width:100%; border-radius:12px; box-shadow:0 15px 35px rgba(0,0,0,0.08); }
.split-content h3 { font-size:1.75rem; margin-bottom:20px; }
.split-content p { font-size:1rem; line-height:1.6; color:#1b1b1b; }

/* YOUTH DEVELOPMENT GRID */
.dev-model-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; }
.model-card { background:#fff; padding:35px 25px; border-radius:12px; text-align:center; box-shadow:0 15px 35px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.model-icon { font-size:2.5rem; color:#0b1e45; margin-bottom:18px; }
.model-card h4 { font-size:1.25rem; font-weight:600; margin-bottom:12px; }
.model-card p { font-size:1rem; line-height:1.6; }

/* VALUE SECTION */
.philosophy-value { text-align:center; max-width:800px; margin:80px auto; }

/* CTA */
.cta-philosophy { text-align:center; padding:60px 20px; background:#0b1e45; color:#fff; border-radius:12px; }
.cta-philosophy .btn { margin-top:20px; }

/* RESPONSIVE */
@media(max-width:1024px){ .pillars-grid, .dev-model-grid { grid-template-columns:repeat(2,1fr); } .split-grid{grid-template-columns:1fr; gap:40px;} }
@media(max-width:768px){ .pillars-grid, .dev-model-grid { grid-template-columns:1fr; } .about-hero{height:350px;} .page-title{font-size:1.8rem;} .page-subtitle{font-size:1rem;} }
/* HERO */
.about-hero { position: relative; width: 100%; height: 400px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-background img { width:100%; height:100%; object-fit:cover; }
.hero-background .overlay { position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(11,30,69,0.55); }
.hero-content { position:relative; z-index:2; color:#fff; text-align:center; max-width:900px; padding:0 20px; }
.page-title{ font-size:2.5rem; font-weight:700; margin-bottom:15px; text-shadow:0 4px 15px rgba(0,0,0,0.4);}
.page-subtitle{ font-size:1.2rem; line-height:1.5; text-shadow:0 2px 10px rgba(0,0,0,0.3); }

/* CONDUCT LIST */
.conduct-list { margin-top:30px; padding-left:20px; color:#1b1b1b; line-height:1.8; font-size:1rem; }
.conduct-list li { margin-bottom:12px; }
.conduct-list li strong { color:#0b1e45; }
.statement { font-weight:600; margin-top:15px; }

/* SECTION HEADER */
.section-header { margin-bottom:40px; }
.section-header h2 { font-size:2rem; font-weight:700; margin-bottom:10px; }
.section-header i { display:block; margin-top:10px; }

/* BG LIGHT */
.bg-light { background:#f5f7fa; }

/* RESPONSIVE */
@media(max-width:768px){
    .about-hero{height:300px;}
    .page-title{font-size:1.8rem;}
    .page-subtitle{font-size:1rem;}
    .conduct-list{padding-left:15px;}
}
/* HERO */
.about-hero { position: relative; width: 100%; height: 400px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-background img { width:100%; height:100%; object-fit:cover; }
.hero-background .overlay { position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(11,30,69,0.55); }
.hero-content { position:relative; z-index:2; color:#fff; text-align:center; max-width:900px; padding:0 20px; }
.page-title{ font-size:2.5rem; font-weight:700; margin-bottom:15px; text-shadow:0 4px 15px rgba(0,0,0,0.4);}
.page-subtitle{ font-size:1.2rem; line-height:1.5; text-shadow:0 2px 10px rgba(0,0,0,0.3); }

/* SECTION HEADER */
.section-header { margin-bottom:30px; }
.section-header h2 { font-size:2rem; font-weight:700; margin-bottom:10px; }
.section-header i { display:block; margin-top:10px; }

/* LISTS */
.refund-list { margin-top:20px; padding-left:20px; font-size:1rem; line-height:1.8; color:#1b1b1b; }
.refund-list li { margin-bottom:12px; }
.refund-list li ul { margin-top:8px; margin-left:20px; list-style-type: disc; }

/* CTA */
.cta-refund { text-align:center; padding:40px 20px; border-radius:12px; }
.cta-refund a.btn { margin-top:15px; }

/* BG LIGHT */
.bg-light { background:#f5f7fa; }

/* RESPONSIVE */
@media(max-width:768px){
    .about-hero{height:300px;}
    .page-title{font-size:1.8rem;}
    .page-subtitle{font-size:1rem;}
    .refund-list{padding-left:15px;}
}
/* NAV DROPDOWN */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown a { display: flex; align-items: center; gap:5px; }
.nav-dropdown .dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border-radius: 8px;
    z-index: 999;
    flex-direction: column;
}
.nav-dropdown .dropdown-content a {
    padding: 12px 18px;
    color: #0b1e45;
    font-weight:500;
    transition: background 0.2s ease;
}
.nav-dropdown .dropdown-content a:hover { background: #f5f7fa; }

.nav-dropdown:hover .dropdown-content { display: flex; }

/* Caret icon rotation */
.nav-dropdown a i { transition: transform 0.3s ease; }
.nav-dropdown:hover a i { transform: rotate(180deg); }

/* Responsive dropdown (hamburger) */
@media(max-width:1024px){
    .nav-dropdown .dropdown-content { position: relative; box-shadow:none; }
}
.coach-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.coach-modal.active {
    display: flex;
}

.coach-modal-inner {
    background: #fff;
    max-width: 900px;
    width: 90%;
    border-radius: 12px;
    padding: 40px;
    position: relative;
}

.modal-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
}

.modal-image {
    height: 350px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}

.modal-close {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    cursor: pointer;
}

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

    .modal-image {
        height: 250px;
    }
}
/* Coaches Page Card */
.coach-card-full {
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.coach-card-full:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.coach-card-full .coach-image {
    width: 100%;
    padding-top: 70%; /* 16:9 ratio */
    background-size: cover;
    background-position: center;
}

.coach-card-full .coach-content {
    padding: 20px;
}

.coach-card-full .coach-content h3 {
    margin-top: 0;
    color: #004080;
}

.coach-card-full .coach-content .coach-role {
    display: block;
    font-weight: 500;
    margin-bottom: 15px;
}

.coach-card-full .coach-content .short-bio {
    margin-bottom: 10px;
    line-height: 1.6;
}

.coach-card-full .coach-content .full-bio {
    display: none; /* optionally toggle with JS if needed */
    line-height: 1.6;
    margin-top: 10px;
}
/* Coaches Page Grid */
.coaches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Responsive */
@media(max-width:1024px){
    .coaches-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px){
    .coaches-grid { grid-template-columns: 1fr; }
}

/* Coach Card Full */
.coach-card-full {
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.coach-card-full:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.coach-card-full .coach-image {
    width: 100%;
    padding-top: 70%; /* 16:9 aspect */
    background-size: cover;
    background-position: center;
}

.coach-card-full .coach-content {
    padding: 20px;
}

.coach-card-full .coach-content h3 {
    margin-top: 0;
    color: #004080;
}

.coach-card-full .coach-content .coach-role {
    display: block;
    font-weight: 500;
    margin-bottom: 15px;
}

.coach-card-full .coach-content .short-bio,
.coach-card-full .coach-content .full-bio {
    line-height: 1.6;
    margin-bottom: 10px;
}
/* Hero section with overlay */
.coach-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    color: #fff;
    text-align: center;
}

.coach-hero::after {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background-color: rgba(0,0,0,0.5); /* dark overlay */
}

.coach-hero .hero-content {
    position: relative;
    z-index: 2;
}

.coach-hero .page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.coach-hero .coach-role {
    font-size: 1.2rem;
    font-weight: 500;
    color: #f2f2f2;
}

/* Coach detail two-column layout */
.coach-detail .grid-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.coach-detail-image {
    flex: 1;
    min-width: 300px;
}

.coach-detail-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.coach-detail-content {
    flex: 1;
    min-width: 300px;
}

.coach-detail-content h3 {
    margin-top: 20px;
    color: #004080;
    font-size: 1.8rem;
}

.coach-detail-content p {
    line-height: 1.7;
    margin-bottom: 15px;
    color: #333;
}

/* Back button */
.coach-detail-content .btn-secondary {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 8px;
    background-color: #004080;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s;
}

.coach-detail-content .btn-secondary:hover {
    background-color: #002e5d;
}

/* Responsive */
@media (max-width: 992px) {
    .coach-detail .grid-2 {
        flex-direction: column;
    }

    .coach-hero .page-title {
        font-size: 2rem;
    }
}
/* Coach top info */
.coach-top-info .grid-2 {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.coach-image-column {
    flex: 1;
    min-width: 300px;
}

.coach-image-column img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.coach-basic-info {
    flex: 1;
    min-width: 300px;
}

.coach-basic-info h1 {
    margin-top: 0;
    color: #004080;
    font-size: 2rem;
}

.coach-basic-info .coach-role {
    display: block;
    font-weight: 500;
    margin-bottom: 20px;
    color: #f04a2b;
}

.coach-basic-info p {
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #333;
}

/* Full bio section */
.coach-full-bio h2 {
    color: #004080;
    margin-bottom: 15px;
}

.coach-full-bio p {
    line-height: 1.7;
    color: #333;
}

/* Back button */
.btn-secondary {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 8px;
    background-color: #004080;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    margin: 30px 0;
    transition: background 0.3s;
}

.btn-secondary:hover {
    background-color: #002e5d;
}

/* Responsive */
@media(max-width: 992px){
    .coach-top-info .grid-2 {
        flex-direction: column;
    }
}
/* Contact section grid */
.contact-section .grid-2 {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.contact-form-column, .contact-info-column {
    flex: 1;
    min-width: 300px;
}

/* Form styles */
.contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #004080;
}

.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    font-size: 1rem;
}

.contact-form button.btn-primary {
    background-color: #004080;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-form button.btn-primary:hover {
    background-color: #002e5d;
}

/* Success / error messages */
.form-success { color: green; margin-bottom: 15px; }
.form-error { color: red; margin-bottom: 15px; }

/* Responsive */
@media(max-width: 992px){
    .contact-section .grid-2 { flex-direction: column; }
}
/* Contact section grid */
.contact-section .grid-2 {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.contact-form-column, .contact-info-column {
    flex: 1;
    min-width: 300px;
}

/* Form styles */
.contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #004080;
}

.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    font-size: 1rem;
}

.contact-form button.btn-primary {
    background-color: #004080;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-form button.btn-primary:hover {
    background-color: #002e5d;
}

/* Quick Enquiry Cards */
.contact-cards .grid-3 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.contact-card {
    flex: 1;
    min-width: 250px;
    background: #004080;
    color: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

.contact-card a.btn-secondary {
    margin-top: 15px;
    display: inline-block;
    background-color: #f04a2b;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
}

.contact-card a.btn-secondary:hover {
    background-color: #c4371d;
}

/* Success / error messages */
.form-success { color: green; margin-bottom: 15px; }
.form-error { color: red; margin-bottom: 15px; }

/* Responsive */
@media(max-width: 992px){
    .contact-section .grid-2,
    .contact-cards .grid-3 { flex-direction: column; }
}
.contact-info .info-card {
    background: #1d3557; /* premium deep blue */
    color: #fff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s;
}
.contact-info .info-card:hover { transform: translateY(-5px); }

.contact-form-section { padding: 80px 0; }
.contact-form-left, .contact-form-right { padding: 20px; }
.contact-form-left form input, .contact-form-left form textarea {
    width: 100%; padding: 12px; margin-bottom: 15px; border-radius: 8px; border: 1px solid #ccc;
}
.contact-form-left button { width: auto; }
.inquiry-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:40px;
}

.inquiry-card{
background:#fff;
padding:35px;
text-align:center;
border-radius:14px;
cursor:pointer;
box-shadow:0 10px 25px rgba(0,0,0,.06);
transition:.3s;
}

.inquiry-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.contact-card{
background:#0b3d91;
color:#fff;
padding:25px;
border-radius:12px;
margin-bottom:20px;
}

.success-message{
background:#e8f7ec;
padding:15px;
margin-bottom:15px;
border-radius:8px;
}

.error-message{
background:#fdeaea;
padding:15px;
margin-bottom:15px;
border-radius:8px;
}

@media(max-width:900px){
.inquiry-grid{grid-template-columns:1fr 1fr;}
.grid-2{grid-template-columns:1fr;}
}
/* =========================
   CONTACT INFO SECTION
========================= */

.contact-info-section{
    padding:70px 20px;
    background:#f7f9fc;
}

.section-header{
    text-align:center;
    margin-bottom:50px;
}

.section-header h2{
    font-size:32px;
    margin-bottom:10px;
}

.section-header p{
    color:#666;
    max-width:600px;
    margin:auto;
}

/* GRID */
.contact-info-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:25px;
}

/* CARD */
.contact-card{
    background:#fff;
    padding:35px 25px;
    text-align:center;
    border-radius:10px;
    box-shadow:0 5px 18px rgba(0,0,0,0.08);
    transition:0.3s ease;
}

.contact-card:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 28px rgba(0,0,0,0.12);
}

.contact-card i{
    font-size:32px;
    color:#0b5ed7;
    margin-bottom:15px;
}

.contact-card h4{
    margin-bottom:10px;
    font-size:18px;
}

.contact-card p{
    color:#555;
    font-size:15px;
}

/* =========================
   RESPONSIVE
========================= */

/* Tablet */
@media(max-width:992px){
    .contact-info-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Mobile */
@media(max-width:576px){
    .contact-info-grid{
        grid-template-columns:1fr;
    }
}
.gallery-section{
padding:70px 20px;
background:#f8fafc;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

.gallery-card{
position:relative;
overflow:hidden;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,.1);
}

.gallery-card img{
width:100%;
height:260px;
object-fit:cover;
transition:.4s;
}

.gallery-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
background:linear-gradient(transparent,rgba(0,0,0,.85));
color:#fff;
padding:20px;
opacity:0;
transition:.4s;
}

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

.gallery-card:hover .gallery-overlay{
opacity:1;
}
/* FILTER BUTTONS */
.gallery-filters{
text-align:center;
margin-bottom:40px;
}

.filter-btn{
border:none;
background:#f1f1f1;
padding:10px 18px;
margin:5px;
border-radius:30px;
cursor:pointer;
transition:.3s;
font-weight:600;
}

.filter-btn.active,
.filter-btn:hover{
background:#0d6efd;
color:#fff;
}

/* GRID */
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
}

.gallery-item{
position:relative;
overflow:hidden;
border-radius:12px;
cursor:pointer;
}

.gallery-item img{
width:100%;
height:260px;
object-fit:cover;
transition:.4s;
}

.gallery-item:hover img{
transform:scale(1.08);
}

/* OVERLAY */
.gallery-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
background:linear-gradient(transparent,rgba(0,0,0,.7));
color:#fff;
padding:15px;
opacity:0;
transition:.3s;
}

.gallery-item:hover .gallery-overlay{
opacity:1;
}
/* ============================
   PREMIUM GALLERY CTA
============================ */

.gallery-cta{
    position:relative;
    padding:110px 20px;
    text-align:center;
    overflow:hidden;

    background:url('assets/images/training-bg.jpg')
    center/cover no-repeat;
}

/* Dark overlay */
.gallery-cta::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(6,25,60,.95),
        rgba(12,55,120,.92)
    );
    z-index:1;
}

/* subtle glow */
.gallery-cta::after{
    content:'';
    position:absolute;
    width:600px;
    height:600px;
    background:radial-gradient(
        rgba(255,255,255,.12),
        transparent 70%
    );
    top:-150px;
    right:-150px;
    z-index:1;
}

.cta-content{
    position:relative;
    z-index:2;
    color:#fff;
}

/* academy tag */
.cta-tag{
    display:inline-block;
    background:rgba(255,255,255,.15);
    padding:6px 14px;
    border-radius:30px;
    font-size:13px;
    letter-spacing:1px;
    margin-bottom:20px;
}

/* headline */
.gallery-cta h2{
    font-size:44px;
    line-height:1.2;
    margin-bottom:20px;
    color:#fff;
}

.gallery-cta h2 strong{
    color:#ffd24a;
}

/* text */
.gallery-cta p{
    max-width:700px;
    margin:0 auto 40px;
    font-size:18px;
    opacity:.92;
}

/* buttons */
.cta-buttons{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.btn-lg{
    padding:16px 34px;
    font-size:16px;
}

/* ghost button */
.btn-ghost{
    border:2px solid #fff;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    transition:.35s ease;
}

.btn-ghost:hover{
    background:#fff;
    color:#07234e;
}

/* primary enhancement */
.gallery-cta .btn-primary{
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    transform:translateY(0);
    transition:.3s;
}

.gallery-cta .btn-primary:hover{
    transform:translateY(-3px);
}

/* MOBILE */
@media(max-width:768px){

.gallery-cta{
    padding:80px 20px;
}

.gallery-cta h2{
    font-size:30px;
}

}

/* COLUMN HEADINGS */
.footer-column h4{
    color:#ffffff;              /* ✅ FIX — white headings */
    font-size:18px;
    font-weight:600;
    margin-bottom:18px;
    position:relative;
}

/* small underline accent */
.footer-column h4::after{
    content:'';
    width:40px;
    height:3px;
    background:#f4b400; /* academy accent color */
    display:block;
    margin-top:8px;
}
/* ICON SPACING */
.footer-column i{
    margin-right:8px;
    color:#f4b400;
}

.site-footer {
    background: #0b1d3a;
    color: #fff;
    padding: 50px 0 20px;
    font-family: Arial, sans-serif;
}
.site-footer a {
    color: #fff;
    text-decoration: none;
}
.site-footer a:hover {
    text-decoration: underline;
}
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.footer-column {
    flex: 1 1 200px;
    min-width: 200px;
}
.footer-column h4 {
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 2px solid #fff;
    display: inline-block;
    padding-bottom: 5px;
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column ul li {
    margin-bottom: 10px;
}
.footer-social {
    margin-top: 15px;
}
.footer-social a {
    margin-right: 10px;
    font-size: 18px;
    display: inline-block;
    transition: 0.3s;
}
.footer-social a:hover {
    color: #f5a623;
}
.footer-bottom {
    text-align: center;
    margin-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 15px;
    font-size: 14px;
    color: #ccc;
}
@media(max-width:768px){
    .footer-grid {
        flex-direction: column;
    }
    .footer-column {
        margin-bottom: 20px;
    }
}
.news-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.news-card{
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
text-decoration:none;
color:#222;
}

.news-card:hover{
transform:translateY(-6px);
}

.news-card img{
width:100%;
height:220px;
object-fit:cover;
}

.news-content{
padding:20px;
}

.news-category{
color:#0b5ed7;
font-weight:600;
font-size:13px;
}
/* BLOG META */
.blog-meta {
    font-size: 14px;
    color: #777;
    margin: 8px 0 15px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.blog-meta i {
    color: var(--primary);
    margin-right: 5px;
}
/* =========================
   SMART STICKY HEADER
========================= */

#siteHeader {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.35s ease;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#siteHeader a {
    color: #222;
    transition: 0.3s ease;
}

/* Transparent when over hero */
#siteHeader.transparent {
    background: transparent;
    box-shadow: none;
}

#siteHeader.transparent a {
    color: #fff;
}

/* Solid when scrolled */
#siteHeader.scrolled {
    background: rgba(255,255,255,0.97);
}

#siteHeader.scrolled a {
    color: #222;
}
.dropdown-content {
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.dropdown-content a {
    color: #222;
}


/* =========================
   DROPDOWN WHEN HEADER IS TRANSPARENT
========================= */

#siteHeader.transparent .dropdown-content {
    background: rgba(0, 0, 0, 0.65); /* glass dark overlay */
    backdrop-filter: blur(8px);
}

#siteHeader.transparent .dropdown-content a {
    color: #ffffff;
}

#siteHeader.transparent .dropdown-content a:hover {
    color: #000;
}