/*
  KIDORA MAIN STYLESHEET
  ==================================================================
  This remains one CSS file. Rules are organized by global settings,
  shared components, individual page sections, and responsive rules.

  TABLE OF CONTENTS
  ------------------------------------------------------------------
  01. Design Tokens
  02. Base and Reset
  03. Global Utilities
  04. Shared Section Components
  05. Header and Navigation
  06. Buttons and Interactive States
  07. Home / Hero Section
  08. Welcome Section
  09. About Us Section
  10. Classes Section
  11. Gallery Section
  12. Our Team Section
  13. Testimonials Section
  14. Resources and FAQ Section
  15. Contact Section
  16. Footer
  17. Animations
  18. Responsive Design

  IMPORTANT
  ------------------------------------------------------------------
  The declarations and responsive behavior are preserved from the
  supplied stylesheet. Only organization and comments were improved.
*/

/* =========================================================
   01. DESIGN TOKENS
   Brand colors, fonts, spacing, shadows, and reusable values
========================================================= */

:root {
  
  --color-primary: #40358f;
  --color-primary-dark: #30266f;
  --color-primary-mid: #6d60c7;
  --color-primary-light: #8c80d7;
  --color-primary-soft: #f0edff;
  --color-primary-soft-2: #f7f5ff;

  
  --color-yellow: #ffd95a;
  --color-teal: #70d4cd;
  --color-teal-soft: #eafaf8;

  --color-ink: #30295f;
  --color-text: #625d79;
  --color-white: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #faf9fe;
  --color-border: #e4e0f0;

  --font-display: "Baloo 2", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", Arial, sans-serif;

  --shadow-sm: 0 10px 28px rgba(64, 53, 143, 0.09);
  --shadow-md: 0 18px 50px rgba(64, 53, 143, 0.14);
  --shadow-lg: 0 30px 82px rgba(64, 53, 143, 0.2);

  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 40px;
  --radius-pill: 999px;

  --container: 1180px;
  --section-space: 7.2rem;
  --header-height: 80px;

  --transition: 220ms ease;

  /* =========================================================
     SECTION HEADER SIZE CONTROLS
     Edit only these values to resize all section headers
  ========================================================= */

  /* Section label: Welcome, About Us, Classes, Gallery, etc. */
  --section-label-font-size: 1.05rem;
  --section-label-icon-size: 30px;
  --section-label-gap: 0.7rem;
  --section-label-bottom-space: 1.15rem;

  /* Main section title and description */
  --section-title-font-size: clamp(2.25rem, 4.8vw, 3.75rem);
  --section-description-font-size: 1.05rem;

  /* Complete section-header layout */
  --section-header-max-width: 780px;
  --section-header-bottom-space: 3.25rem;

}

/* =========================================================
   02. BASE AND RESET
   Font import, browser normalization, typography, and element defaults
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.8rem;
  color: var(--color-ink);
  font-family: var(--font-display);
  line-height: 1.1;
}

h1 {
  font-size: clamp(3.1rem, 7vw, 5.8rem);
  letter-spacing: -0.05em;
}

h2 {
  font-size: clamp(2.25rem, 4.8vw, 3.75rem);
  letter-spacing: -0.035em;
}

h3 {
  font-size: clamp(1.28rem, 2.3vw, 1.78rem);
}

p {
  margin: 0 0 1rem;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  color: #fff;
  background: var(--color-primary);
}

/* =========================================================
   03. GLOBAL UTILITIES
   Accessibility, containers, visibility helpers, and reduced-motion support
========================================================= */


/* ---------------------------------------------------------
   Skip Link
--------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 1000;
  padding: 0.8rem 1rem;
  color: #fff;
  background: var(--color-primary);
  border-radius: 0 0 12px 12px;
  transform: translateY(-120%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}


/* ---------------------------------------------------------
   Container and General Helpers
--------------------------------------------------------- */

.container {
  width: min(calc(100% - 2rem), var(--container));
  margin-inline: auto;
}

.muted {
  color: var(--color-text);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---------------------------------------------------------
   Reduced Motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   04. SHARED SECTION COMPONENTS
   Reusable section spacing, backgrounds, headings, labels,
   icons, and split layouts
========================================================= */

/* ---------------------------------------------------------
   General Section Layout
--------------------------------------------------------- */

.section {
  position: relative;
  padding: var(--section-space) 0;
}

.page-section {
  scroll-margin-top: var(--header-height);
}

/* ---------------------------------------------------------
   Section Backgrounds
--------------------------------------------------------- */

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

.section--soft-purple {
  background:
    radial-gradient(
      circle at 94% 5%,
      rgba(109, 96, 199, 0.12),
      transparent 20rem
    ),
    linear-gradient(
      180deg,
      var(--color-primary-soft-2),
      var(--color-primary-soft)
    );
}

.section--outlined {
  border-top: 0;
}

/* ---------------------------------------------------------
   Shared Section Heading

   Size controls are located in Section 01 inside :root.
--------------------------------------------------------- */

.section-heading {
  max-width: var(--section-header-max-width);
  margin: 0 auto var(--section-header-bottom-space);
  text-align: center;
}

.section-heading--left {
  margin-inline: 0;
  text-align: left;
}

.section-heading h2 {
  font-size: var(--section-title-font-size);
}

.section-heading p {
  color: var(--color-text);
  font-size: var(--section-description-font-size);
}

/* ---------------------------------------------------------
   Shared Section Label With Icon

   Used by Home, Welcome, About Us, Classes, Gallery,
   Our Team, Testimonials, Resources, and Contact.
--------------------------------------------------------- */

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--section-label-gap);
  margin-bottom: var(--section-label-bottom-space);
  color: var(--color-primary);
  font-size: var(--section-label-font-size);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.section-kicker__icon {
  display: inline-flex;
  width: var(--section-label-icon-size);
  height: var(--section-label-icon-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.section-kicker__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.section-kicker__text {
  display: inline-block;
}

/* ---------------------------------------------------------
   Shared Two-Column Layout
--------------------------------------------------------- */

.split-layout {
  display: grid;
  align-items: center;
  gap: 4.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* =========================================================
   05. HEADER AND NAVIGATION
   Floating sticky header, brand icon, navigation, and mobile menu
========================================================= */

/* ---------------------------------------------------------
   Floating Sticky Header
--------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
  padding-top: 14px;
  background: transparent;
  border: 0;
}

.header-inner {
  display: flex;
  min-height: 94px;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 0.7rem 1.15rem;
  background: transparent;
  border: 1px solid rgba(64, 53, 143, 0.2);
  border-radius: 30px;
  box-shadow: 0 14px 36px rgba(48, 38, 111, 0.12);
}

/* ---------------------------------------------------------
   Brand Icon and Supporting Text
--------------------------------------------------------- */

.brand {
  display: inline-flex;
  width: 220px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  text-align: center;
}

.brand-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.brand-copy {
  display: grid;
  justify-items: center;
  line-height: 1.12;
}

.brand-tagline {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.brand-accreditation {
  display: block;
  max-width: 215px;
  margin-top: 0.15rem;
  color: var(--color-text);
  font-size: 0.61rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.3;
}

/* ---------------------------------------------------------
   Desktop Navigation
--------------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.nav-link {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 0.7rem;
  color: var(--color-ink);
  border-radius: 10px;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition:
    color var(--transition),
    transform var(--transition);
}

.nav-link::after {
  position: absolute;
  right: 0.72rem;
  bottom: 5px;
  left: 0.72rem;
  height: 2px;
  content: "";
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: scaleX(0.35);
  transition:
    opacity var(--transition),
    transform var(--transition);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--color-primary);
  background: transparent;
}

.nav-link:hover {
  transform: translateY(-1px);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ---------------------------------------------------------
   Contact Button
--------------------------------------------------------- */

.header-contact-button {
  min-height: 44px;
  margin-left: 0.45rem;
  padding: 0.7rem 1.05rem;
  font-size: 0.91rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(64, 53, 143, 0.18);
}

/* ---------------------------------------------------------
   Mobile Navigation Toggle
--------------------------------------------------------- */

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid rgba(64, 53, 143, 0.24);
  border-radius: 16px;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 3px;
  transition: var(--transition);
}

.nav-toggle span {
  position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 0;
  content: "";
}

.nav-toggle span::before {
  top: -7px;
}

.nav-toggle span::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* =========================================================
   06. BUTTONS AND INTERACTIVE STATES
   Primary, outline, small buttons, and keyboard focus states
========================================================= */

.btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.35rem;
  color: #fff;
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 25px rgba(64, 53, 143, 0.24);
  font-weight: 900;
  line-height: 1;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.btn:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 17px 32px rgba(64, 53, 143, 0.3);
}

.btn--outline {
  color: var(--color-primary);
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: none;
}

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

.btn--small {
  min-height: 42px;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
}

.btn:focus-visible,
.nav-link:focus-visible,
.nav-toggle:focus-visible,
.carousel-button:focus-visible,
.contact-card a:focus-visible {
  outline: 4px solid rgba(112, 212, 205, 0.4);
  outline-offset: 4px;
}

/* =========================================================
   07. HOME / HERO SECTION
   Hero layout, supporting artwork, actions, avatars, and decorative wave
========================================================= */

.hero {
  position: relative;
  min-height: 760px;
  display: grid;
  align-items: center;
  padding: 6rem 0 8rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 25%, rgba(255, 217, 90, 0.38), transparent 17rem),
    radial-gradient(circle at 85% 22%, rgba(112, 212, 205, 0.2), transparent 20rem),
    linear-gradient(135deg, #fbfaff 0%, #f0edff 58%, #edfafa 100%);
}

.hero::before,
.hero::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  opacity: 0.55;
}

.hero::before {
  top: 8rem;
  right: -3rem;
  width: 170px;
  height: 170px;
  background: repeating-linear-gradient(45deg, var(--color-primary), var(--color-primary) 8px, transparent 8px, transparent 18px);
  opacity: 0.08;
}

.hero::after {
  bottom: 8rem;
  left: -5rem;
  width: 190px;
  height: 190px;
  border: 24px solid rgba(64, 53, 143, 0.13);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  gap: 4rem;
  grid-template-columns: 0.95fr 1.05fr;
}

.hero-copy {
  max-width: 640px;
}

/* Home uses the shared section-label styles from Section 04. */

.hero-copy h1 span {
  color: var(--color-primary);
}

.hero-copy > p {
  max-width: 600px;
  color: var(--color-text);
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.7rem;
}


.hero-art {
  position: relative;
}

.hero-art img {
  width: min(100%, 690px);
  margin-inline: auto;
  animation: float 6s ease-in-out infinite;
}

.floating-note {
  position: absolute;
  right: 2%;
  bottom: 8%;
  width: min(230px, 44%);
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(64, 53, 143, 0.15);
  border-left: 6px solid var(--color-primary);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transform: rotate(2deg);
}

.floating-note strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--color-primary);
}

.floating-note span {
  color: var(--color-text);
  font-size: 0.85rem;
}

.wave-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 90px;
  color: #fff;
}

.wave-bottom svg {
  width: 100%;
  height: 100%;
}

/* =========================================================
   08. WELCOME SECTION
   What makes KIDORA different
========================================================= */

/* ---------------------------------------------------------
   Feature Card Grid

   Desktop: three cards per row
--------------------------------------------------------- */

.feature-grid {
  display: grid;
  align-items: stretch;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------------------------------------------------------
   Individual Feature Card
--------------------------------------------------------- */

.feature-card {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  overflow: hidden;

  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--color-primary);
  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* Decorative circle in the top-right corner */
.feature-card::after {
  position: absolute;
  top: -28px;
  right: -28px;

  width: 100px;
  height: 100px;

  content: "";

  background: var(--color-primary-soft);
  border-radius: 50%;
}

/* ---------------------------------------------------------
   Feature Card Icon
--------------------------------------------------------- */

.icon-tile {
  position: relative;
  z-index: 1;

  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;

  margin-bottom: 1.15rem;

  color: #fff;
  background: var(--color-primary);
  border-radius: 18px;

  box-shadow:
    0 10px 20px
    rgba(64, 53, 143, 0.2);
}

.icon-tile svg {
  width: 29px;
  height: 29px;
}

/* Repeat the original three-card color pattern */
.feature-card:nth-child(3n + 2) .icon-tile {
  background: var(--color-primary-mid);
}

.feature-card:nth-child(3n) .icon-tile {
  color: var(--color-primary);
  background: var(--color-yellow);
}

/* ---------------------------------------------------------
   Feature Card Content
--------------------------------------------------------- */

.feature-card h3 {
  position: relative;
  z-index: 1;

  margin-bottom: 0.75rem;

  color: var(--color-ink);
  font-size: clamp(1.3rem, 2vw, 1.62rem);
}

.feature-card p {
  position: relative;
  z-index: 1;

  margin: 0;
  color: var(--color-text);
  font-size: 0.96rem;
  line-height: 1.75;
}

/* =========================================================
   09. ABOUT US SECTION
   About KIDORA, Our Mission, and Our Vision
========================================================= */

/* ---------------------------------------------------------
   Complete About Us Layout
--------------------------------------------------------- */

.about-content-stack {
  display: grid;
  gap: 6rem;
}

/* ---------------------------------------------------------
   Individual Content Row
--------------------------------------------------------- */

.about-block {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Mission: text on the left and image on the right */
.about-block--mission {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------------------------------------------------------
   Images

   No background, border, decorative shape, or overlay.
   Only a simple shadow is applied.
--------------------------------------------------------- */

.about-block__media {
  min-width: 0;
}

.about-block__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Text Content
--------------------------------------------------------- */

.about-block__content {
  min-width: 0;
}

.about-block__content h3 {
  margin-bottom: 1.35rem;
  color: var(--color-primary);
  font-size: clamp(2rem, 4vw, 3rem);
}

.about-block__content p {
  margin-bottom: 1.15rem;
  color: var(--color-text);
  font-size: 1.03rem;
  line-height: 1.8;
}

.about-block__content p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   Responsive Layout
--------------------------------------------------------- */

@media (max-width: 980px) {
  .about-content-stack {
    gap: 4.5rem;
  }

  .about-block,
  .about-block--mission {
    gap: 2.5rem;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .about-content-stack {
    gap: 3.5rem;
  }

  .about-block {
    gap: 2rem;
  }


  .about-block__content h3 {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .about-block__content p {
    font-size: 1rem;
    line-height: 1.75;
  }
}
/* =========================================================
   ABOUT SECTION — MOBILE CONTENT ORDER
   Keeps every About block consistent:
   Image → Heading → Description
========================================================= */

@media (max-width: 760px) {
  .about-block,
  .about-block--reverse,
  .about-block:nth-child(even) {
    display: flex;
    flex-direction: column;
  }

  .about-block .about-block__media,
  .about-block--reverse .about-block__media,
  .about-block:nth-child(even) .about-block__media {
    order: 1;
    width: 100%;
  }

  .about-block .about-block__content,
  .about-block--reverse .about-block__content,
  .about-block:nth-child(even) .about-block__content {
    order: 2;
    width: 100%;
  }
}
/* =========================================================
   10. CLASSES SECTION
   Kidora programs and specialized development services
========================================================= */

/* ---------------------------------------------------------
   Program Grid

   Desktop layout: two cards per row.
   The specialized services card spans the complete third row.
--------------------------------------------------------- */

.class-grid {
  display: grid;
  align-items: stretch;
  gap: 1.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------------------------------------------------------
   Standard Program Card
--------------------------------------------------------- */

.class-card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;

  background: #fff;
  border: 1px solid rgba(64, 53, 143, 0.12);
  border-bottom: 6px solid var(--color-primary);
  border-radius: 25px;

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.class-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------
   Program Image
--------------------------------------------------------- */

.class-art {
  position: relative;
  min-height: 240px;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #ece8ff,
      #f7f5ff
    );
}

.class-art::before,
.class-art::after {
  position: absolute;
  z-index: 1;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}

.class-art::before {
  top: -24px;
  right: -18px;
  width: 100px;
  height: 100px;
  background: rgba(255, 217, 90, 0.7);
}

.class-art::after {
  bottom: -12px;
  left: -15px;
  width: 70px;
  height: 70px;
  background: rgba(112, 212, 205, 0.34);
}

.class-art img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}

/* Alternate image-area backgrounds */
.class-card:nth-child(2n) .class-art {
  background:
    linear-gradient(
      135deg,
      #e7f9f7,
      #f0edff
    );
}

/* ---------------------------------------------------------
   Program Content
--------------------------------------------------------- */

.class-body {
  display: flex;
  min-width: 0;
  height: 100%;
  flex: 1;
  flex-direction: column;
  padding: 1.65rem;
}

.class-card__content {
  flex: 1;
}

.class-body h3 {
  margin-bottom: 0.8rem;
  color: var(--color-ink);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
}

.class-program-label {
  display: inline-block;
  margin-bottom: 0.7rem;

  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.class-description p {
  margin-bottom: 0.9rem;
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.75;
}

.class-description p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   Age Group and Schedule

   One unified information panel replaces the two separate
   card-within-card boxes.
--------------------------------------------------------- */

.class-meta {
  display: grid;
  margin-top: 1.6rem;

  background:
    linear-gradient(
      135deg,
      rgba(247, 245, 255, 0.96),
      rgba(240, 237, 255, 0.72)
    );

  border: 1px solid rgba(64, 53, 143, 0.12);
  border-radius: 16px;

  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Used when only Schedule is available */
.class-meta--single {
  grid-template-columns: 1fr;
}

.class-meta__item {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;

  padding: 1rem 1.15rem;
}

/* Divider between Age Group and Schedule */
.class-meta__item + .class-meta__item {
  border-left: 1px solid rgba(64, 53, 143, 0.14);
}

/* Small label */
.class-meta__label {
  color: var(--color-text);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Main value */
.class-meta__value {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

/* Small purple accent line */
.class-meta__item::after {
  width: 28px;
  height: 3px;
  margin-top: 0.2rem;
  content: "";

  background: var(--color-primary);
  border-radius: var(--radius-pill);
  opacity: 0.7;
}

/* ---------------------------------------------------------
   Specialized Child Development Services

   This card occupies the complete third row.
--------------------------------------------------------- */

.class-card--featured {
  grid-column: 1 / -1;
}

.class-art--featured {
  min-height: 300px;
}

.class-art--featured img {
  height: 300px;
}

.class-body--featured {
  padding: clamp(1.75rem, 3vw, 2.35rem);
}

.class-card--featured .class-meta {
  max-width: 520px;
}

.class-services-title {
  margin: 1.5rem 0 0.9rem;

  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.class-services {
  display: grid;
  gap: 0.75rem 1.75rem;
  margin: 0;
  padding: 0;

  list-style: none;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.class-services li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;

  color: var(--color-text);
  font-size: 0.96rem;
  line-height: 1.55;
}

.class-services li::before {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  place-items: center;

  content: "✓";

  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;

  font-size: 0.7rem;
  font-weight: 900;
}

.class-closing-text {
  margin: 1.5rem 0 0;

  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.75;
}

/* ---------------------------------------------------------
   Responsive Classes Layout
--------------------------------------------------------- */

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

  .class-card--featured {
    grid-column: auto;
  }

  .class-services {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .class-art,
  .class-art img,
  .class-art--featured,
  .class-art--featured img {
    height: 215px;
    min-height: 215px;
  }

  .class-body {
    padding: 1.4rem;
  }
}

@media (max-width: 430px) {
  .class-meta {
    grid-template-columns: 1fr;
  }

  .class-meta__item + .class-meta__item {
    border-top: 1px solid rgba(64, 53, 143, 0.14);
    border-left: 0;
  }
}

/* =========================================================
   11. GALLERY SECTION
   Layered rotating gallery of KIDORA memories
========================================================= */

/* ---------------------------------------------------------
   Gallery Section
--------------------------------------------------------- */

.gallery-section {
  overflow: hidden;
  padding-bottom: 5.5rem;
}

/* ---------------------------------------------------------
   Complete Gallery Carousel
--------------------------------------------------------- */

.gallery-showcase {
  --gallery-center-width: clamp(270px, 27vw, 380px);
  --gallery-near-shift: clamp(195px, 22vw, 305px);
  --gallery-far-shift: clamp(350px, 39vw, 535px);

  position: relative;
  width: min(1240px, 100%);
  margin-inline: auto;
  padding: 0 4.5rem 1rem;
  outline: none;
}

.gallery-stage {
  position: relative;
  height: clamp(410px, 48vw, 555px);
  perspective: 1400px;
}

/* ---------------------------------------------------------
   Gallery Slides
--------------------------------------------------------- */

.gallery-slide {
  position: absolute;
  top: 50%;
  left: 50%;

  width: var(--gallery-center-width);
  margin: 0;
  overflow: hidden;

  aspect-ratio: 4 / 5;

  background: var(--color-primary-soft);
  border: 4px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;

  box-shadow:
    0 24px 55px rgba(48, 38, 111, 0.22);

  opacity: 0;
  pointer-events: none;

  transform:
    translate3d(-50%, -50%, 0)
    scale(0.55);

  /*
    Only transform and opacity are animated.

    Animating filter and box-shadow on several large images
    can make the carousel appear to stutter.
  */
  transition:
    transform 1050ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 750ms ease-in-out;

  transform-origin: center center;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change:
    transform,
    opacity;
}

.gallery-slide img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: translateZ(0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---------------------------------------------------------
   Active Center Image
--------------------------------------------------------- */

.gallery-slide[data-position="0"] {
  z-index: 5;

  opacity: 1;
  pointer-events: auto;

  filter: none;

  transform:
    translate3d(-50%, -50%, 0)
    scale(1);

  box-shadow:
    0 30px 72px rgba(48, 38, 111, 0.28);
}

/* ---------------------------------------------------------
   Images Immediately Beside the Center
--------------------------------------------------------- */

.gallery-slide[data-position="-1"] {
  z-index: 4;

  opacity: 0.98;
  pointer-events: auto;

  filter: saturate(0.94);

  transform:
    translate3d(
      calc(-50% - var(--gallery-near-shift)),
      -50%,
      0
    )
    scale(0.82);
}

.gallery-slide[data-position="1"] {
  z-index: 4;

  opacity: 0.98;
  pointer-events: auto;

  filter: saturate(0.94);

  transform:
    translate3d(
      calc(-50% + var(--gallery-near-shift)),
      -50%,
      0
    )
    scale(0.82);
}

/* ---------------------------------------------------------
   Partially Visible Outer Images
--------------------------------------------------------- */

.gallery-slide[data-position="-2"] {
  z-index: 3;

  opacity: 0.72;
  pointer-events: auto;

  filter:
    saturate(0.82)
    brightness(0.94);

  transform:
    translate3d(
      calc(-50% - var(--gallery-far-shift)),
      -50%,
      0
    )
    scale(0.65);
}

.gallery-slide[data-position="2"] {
  z-index: 3;

  opacity: 0.72;
  pointer-events: auto;

  filter:
    saturate(0.82)
    brightness(0.94);

  transform:
    translate3d(
      calc(-50% + var(--gallery-far-shift)),
      -50%,
      0
    )
    scale(0.65);
}

/* ---------------------------------------------------------
   Hidden Slides Beyond the Gallery Edges

   These positions prevent hidden slides from waiting in the
   center and then visibly jumping toward an outer position.
--------------------------------------------------------- */

.gallery-slide[data-position="-3"] {
  z-index: 1;

  opacity: 0;
  pointer-events: none;

  transform:
    translate3d(
      calc(
        -50% -
        var(--gallery-far-shift) -
        var(--gallery-center-width)
      ),
      -50%,
      0
    )
    scale(0.55);
}

.gallery-slide[data-position="3"] {
  z-index: 1;

  opacity: 0;
  pointer-events: none;

  transform:
    translate3d(
      calc(
        -50% +
        var(--gallery-far-shift) +
        var(--gallery-center-width)
      ),
      -50%,
      0
    )
    scale(0.55);
}

/*
  This class is applied only while an image wraps from one
  end of the gallery to the opposite end.

  It prevents that image from visibly crossing the entire
  gallery during the last-to-first transition.
*/
.gallery-slide--wrapping {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

/* ---------------------------------------------------------
   Previous and Next Controls
--------------------------------------------------------- */

.gallery-control {
  position: absolute;
  top: 50%;
  z-index: 12;

  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;

  padding: 0;

  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(64, 53, 143, 0.16);
  border-radius: 50%;

  box-shadow:
    0 12px 28px rgba(48, 38, 111, 0.18);

  transform: translateY(-50%);

  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.gallery-control svg {
  width: 23px;
  height: 23px;
}

.gallery-control--previous {
  left: 1rem;
}

.gallery-control--next {
  right: 1rem;
}

.gallery-control:hover {
  color: var(--color-white);
  background: var(--color-primary);

  transform:
    translateY(-50%)
    scale(1.06);

  box-shadow:
    0 16px 34px rgba(48, 38, 111, 0.24);
}

.gallery-control:focus-visible {
  outline: 4px solid rgba(112, 212, 205, 0.42);
  outline-offset: 4px;
}

/* ---------------------------------------------------------
   Gallery Navigation Dots
--------------------------------------------------------- */

.gallery-dots {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;

  margin-top: 0.5rem;
}

.gallery-dot {
  width: 9px;
  height: 9px;

  padding: 0;

  background: rgba(64, 53, 143, 0.25);
  border: 0;
  border-radius: var(--radius-pill);

  transition:
    width var(--transition),
    background var(--transition),
    transform var(--transition);
}

.gallery-dot:hover {
  background: var(--color-primary-mid);
  transform: scale(1.15);
}

.gallery-dot.is-active {
  width: 30px;
  background: var(--color-primary);
}

.gallery-dot:focus-visible {
  outline: 3px solid rgba(112, 212, 205, 0.45);
  outline-offset: 4px;
}

/* ---------------------------------------------------------
   Tablet Gallery
--------------------------------------------------------- */

@media (max-width: 980px) {
  .gallery-showcase {
    --gallery-center-width: clamp(250px, 40vw, 340px);
    --gallery-near-shift: clamp(180px, 32vw, 260px);

    padding-inline: 3.5rem;
  }

  .gallery-stage {
    height: clamp(390px, 62vw, 500px);
  }

  .gallery-slide[data-position="-2"],
  .gallery-slide[data-position="2"] {
    opacity: 0;
    pointer-events: none;
  }

  .gallery-control--previous {
    left: 0.6rem;
  }

  .gallery-control--next {
    right: 0.6rem;
  }
}

/* ---------------------------------------------------------
   Mobile Gallery
--------------------------------------------------------- */

@media (max-width: 620px) {
  .gallery-section {
    padding-bottom: 4rem;
  }

  .gallery-showcase {
    --gallery-center-width: min(76vw, 310px);
    --gallery-near-shift: 57vw;

    padding-inline: 2.8rem;
  }

  .gallery-stage {
    height: clamp(390px, 112vw, 460px);
  }

  .gallery-slide {
    border-width: 3px;
    border-radius: 18px;
  }

  .gallery-slide[data-position="-1"],
  .gallery-slide[data-position="1"] {
    opacity: 0.4;

    transform:
      translate3d(
        calc(
          -50% +
          (
            var(--gallery-near-shift) *
            var(--gallery-direction, 1)
          )
        ),
        -50%,
        0
      )
      scale(0.72);
  }

  .gallery-slide[data-position="-1"] {
    --gallery-direction: -1;
  }

  .gallery-slide[data-position="1"] {
    --gallery-direction: 1;
  }

  /*
    Do not use display: none here.

    Display cannot animate, so it causes images to disappear
    and reappear abruptly during rotation.
  */
  .gallery-slide[data-position="-2"],
  .gallery-slide[data-position="2"] {
    opacity: 0;
    pointer-events: none;
  }

  .gallery-control {
    width: 42px;
    height: 42px;
  }

  .gallery-control--previous {
    left: 0.3rem;
  }

  .gallery-control--next {
    right: 0.3rem;
  }

  .gallery-dot {
    width: 8px;
    height: 8px;
  }

  .gallery-dot.is-active {
    width: 25px;
  }
}




/* =========================================================
   12. OUR TEAM SECTION
   Circular portraits with direct CV links
========================================================= */

/* ---------------------------------------------------------
   Team Grid

   Three members on the first row and two centered members
   on the second row.
--------------------------------------------------------- */

.team-grid {
  display: grid;
  align-items: start;
  gap: 3.25rem 2rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.team-card {
  min-width: 0;
  text-align: center;
  grid-column: span 2;
}

.team-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.team-card:nth-child(5) {
  grid-column: 4 / span 2;
}

/* ---------------------------------------------------------
   Circular Team Portrait
--------------------------------------------------------- */

.team-photo {
  width: min(100%, 270px);
  margin: 0 auto 1.4rem;
  overflow: hidden;

  aspect-ratio: 1;
  border-radius: 50%;

  box-shadow:
    0 16px 38px rgba(48, 38, 111, 0.13);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition:
    transform 350ms ease;
}

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

  box-shadow:
    0 22px 48px rgba(48, 38, 111, 0.18);
}

.team-card:hover .team-photo img {
  transform: scale(1.04);
}

/* ---------------------------------------------------------
   Team Member Information
--------------------------------------------------------- */

.team-card__content {
  max-width: 280px;
  margin-inline: auto;
}

.team-card h3 {
  margin-bottom: 0.25rem;
  color: var(--color-primary);
  font-size: clamp(1.3rem, 2vw, 1.55rem);
}

.team-card p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------
   Direct PDF Link
--------------------------------------------------------- */

.team-details-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  margin-top: 0.7rem;
  padding: 0;

  color: var(--color-primary);
  border-bottom: 1px solid transparent;

  font-size: 0.87rem;
  font-weight: 700;
  line-height: 1.4;

  transition:
    color var(--transition),
    border-color var(--transition),
    gap var(--transition);
}

.team-details-link svg {
  width: 16px;
  height: 16px;
}

.team-details-link:hover {
  gap: 0.5rem;
  color: var(--color-primary-dark);
  border-bottom-color: currentColor;
}

.team-details-link:focus-visible {
  outline: 3px solid rgba(112, 212, 205, 0.45);
  outline-offset: 5px;
  border-radius: 3px;
}

/* ---------------------------------------------------------
   Responsive Team Layout
--------------------------------------------------------- */

@media (max-width: 980px) {
  .team-grid {
    gap: 2.75rem 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-card,
  .team-card:nth-child(4),
  .team-card:nth-child(5) {
    grid-column: auto;
  }

  .team-card:last-child:nth-child(odd) {
    width: min(100%, 320px);
    margin-inline: auto;
    grid-column: 1 / -1;
  }

  .team-photo {
    width: min(100%, 245px);
  }
}

@media (max-width: 620px) {
  .team-grid {
    gap: 2.5rem;
    grid-template-columns: 1fr;
  }

  .team-card:last-child:nth-child(odd) {
    width: 100%;
    grid-column: auto;
  }

  .team-photo {
    width: min(100%, 230px);
  }
}

/* =========================================================
   13. TESTIMONIALS SECTION
   Slides, quote styling, author details, and carousel controls
========================================================= */

.testimonial-shell {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}

.testimonial-slide {
  display: none;
  padding: 3rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 7px solid var(--color-primary);
  border-radius: 34px;
  box-shadow: var(--shadow-md);
}

.testimonial-slide.is-active {
  display: block;
  animation: fadeUp 450ms ease both;
}

.quote-mark {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  margin: 0 auto 1.3rem;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 2.7rem;
  line-height: 1;
}

.testimonial-slide blockquote {
  max-width: 730px;
  margin: 0 auto 1.5rem;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.55;
}

.testimonial-author {
  color: var(--color-primary);
  font-weight: 900;
}

.testimonial-role {
  color: var(--color-text);
  font-size: 0.86rem;
}

.testimonial-controls {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.carousel-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--color-primary);
  background: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  transition: color var(--transition), background var(--transition);
}

.carousel-button:hover {
  color: #fff;
  background: var(--color-primary);
}

/* =========================================================
   14. RESOURCES AND FAQ SECTION
   Resource cards, illustration layout, and accordion styling
========================================================= */

.resource-grid {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(3, 1fr);
}

.resource-card {
  position: relative;
  padding: 2rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.resource-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.resource-card p {
  color: var(--color-text);
}

.resource-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 1.1rem;
  color: #fff;
  background: var(--color-primary);
  border-radius: 16px;
  font-size: 1.4rem;
}

.faq-list {
  display: grid;
  max-width: 940px;
  gap: 0.85rem;
  margin: 3rem auto 0;
}

.faq-item {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-primary);
  border-radius: 18px;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  content: "+";
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--color-text);
}

.resources-layout {
  display: grid;
  align-items: center;
  gap: 4rem;
  grid-template-columns: 0.9fr 1.1fr;
}

.resources-illustration img {
  width: 100%;
  border: 4px solid #fff;
  border-bottom: 8px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   15. CONTACT SECTION
   Informational contact cards, banner, phone, and email actions
========================================================= */

.contact-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-card {
  display: grid;
  align-items: start;
  gap: 1rem;
  padding: 1.65rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-primary);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  grid-template-columns: auto 1fr;
}

.contact-card__icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #fff;
  background: var(--color-primary);
  border-radius: 17px;
  font-size: 1.35rem;
}

.contact-card span {
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-card h3 {
  margin: 0.25rem 0 0.45rem;
  font-size: 1.22rem;
}

.contact-card p {
  margin: 0;
  color: var(--color-text);
}

.contact-card a {
  color: var(--color-primary);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.contact-banner {
  display: grid;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  padding: 2.4rem;
  color: #fff;
  background:
    radial-gradient(circle at 92% 15%, rgba(255, 217, 90, 0.32), transparent 13rem),
    var(--color-primary);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
  grid-template-columns: 1fr auto;
}

.contact-banner h3 {
  margin: 0;
  color: #fff;
}

.contact-banner__label {
  color: var(--color-yellow);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contact-banner .btn {
  background: #fff;
  border-color: #fff;
  color: var(--color-primary);
  box-shadow: none;
}

.contact-banner .btn:hover {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
}

.contact-banner .btn--outline {
  color: #fff;
  background: transparent;
  border-color: #fff;
}

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

.contact-section {
  background: #ffffff;
}

/* =========================================================
   16. FOOTER
   Footer columns, links, social icons, and copyright row
========================================================= */

.site-footer {
  position: relative;
  padding: 5rem 0 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(circle at 92% 5%, rgba(255, 217, 90, 0.18), transparent 18rem),
    var(--color-primary-dark);
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 1fr;
}

.footer-brand img {
  width: 380px;
  margin-bottom: 1rem;
  padding: 0.35rem;
  background: #fff;
  border-radius: 14px;
}

.footer-brand p {
  max-width: 360px;
}

.footer-title {
  margin-bottom: 1rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
}

.footer-links {
  display: grid;
  gap: 0.55rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.9);
}

.footer-links a:hover {
  color: var(--color-yellow);
}

.social-links {
  display: flex;
  gap: 0.55rem;
  margin-top: 1rem;
}

.social-links a {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--color-primary);
  background: #fff;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 900;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.85rem;
}

/* =========================================================
   17. ANIMATIONS
   Hero float, testimonial entrance, and gallery movement
========================================================= */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

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


/* =========================================================
   18. RESPONSIVE DESIGN
   Desktop, tablet, and mobile adjustments organized by breakpoint
========================================================= */


/* ---------------------------------------------------------
   Large Screens — 1180px and Below
--------------------------------------------------------- */

@media (max-width: 1180px) {
  .header-inner {
    gap: 1rem;
    padding-inline: 0.9rem;
  }

  .brand {
    width: 200px;
  }

  .brand-icon {
    width: 48px;
    height: 48px;
  }

  .nav-link {
    padding-inline: 0.52rem;
    font-size: 0.89rem;
  }

  .header-contact-button {
    margin-left: 0.25rem;
    padding-inline: 0.9rem;
    font-size: 0.86rem;
  }
}


/* ---------------------------------------------------------
   Tablet and Mobile Navigation — 980px and Below
--------------------------------------------------------- */

@media (max-width: 980px) {

  /* Global spacing */
  :root {
    --section-space: 5.4rem;
    --header-height: 102px;
  }

  /* Header and navigation */
  .site-header {
    padding-top: 10px;
  }

  .header-inner {
    min-height: 88px;
    padding: 0.6rem 0.85rem;
    border-radius: 24px;
  }

  .brand {
    width: 190px;
  }

  .brand-icon {
    width: 42px;
    height: 42px;
  }

  .brand-tagline {
    font-size: 0.78rem;
  }

  .brand-accreditation {
    max-width: 185px;
    font-size: 0.56rem;
  }

  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    top: calc(var(--header-height) + 10px);
    right: 1rem;
    left: 1rem;
    display: grid;
    max-height: calc(100vh - var(--header-height) - 28px);
    align-items: stretch;
    gap: 0.2rem;
    padding: 1rem;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(64, 53, 143, 0.18);
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
      opacity var(--transition),
      transform var(--transition);
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-link {
    min-height: 46px;
    justify-content: center;
    font-size: 0.96rem;
  }

  .nav-link::after {
    right: 42%;
    left: 42%;
  }

  .header-contact-button {
    width: 100%;
    margin: 0.45rem 0 0;
  }

  /* Home / Hero section */
  .hero {
      min-height: auto;
      padding-top: 4.5rem;
    }
  .hero-grid {
      grid-template-columns: 1fr;
    }
  .hero-copy {
      margin-inline: auto;
      text-align: center;
    }
  .hero-copy > p {
      margin-inline: auto;
    }
.hero-actions {
  justify-content: center;
}
  .hero-art {
      max-width: 720px;
      margin-inline: auto;
    }

  /* Shared, About, and Resources layouts */
  .split-layout {
      grid-template-columns: 1fr;
    }
  .resources-layout {
      grid-template-columns: 1fr;
    }

  /* Welcome and resource grids */
.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
  .resource-grid {
      grid-template-columns: 1fr;
    }

  /* Classes and team grids */
  .class-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  .team-grid {
      grid-template-columns: repeat(2, 1fr);
    }

  /* Contact section */
  .contact-banner {
      text-align: center;
      grid-template-columns: 1fr;
    }
  .contact-banner__actions {
      justify-content: center;
    }

  /* Footer */
  .footer-grid {
      grid-template-columns: repeat(2, 1fr);
    }

  /* Gallery */
  .gallery-carousel {
      --gallery-gap: 5rem;
    }
  .gallery-collage {
      width: min(650px, 92vw);
    }
}


/* ---------------------------------------------------------
   Contact Cards — 700px and Below
--------------------------------------------------------- */

@media (max-width: 700px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
}


/* ---------------------------------------------------------
   Small Mobile Screens — 620px and Below
--------------------------------------------------------- */

@media (max-width: 620px) {

  /* Global sizing */
  :root {
    --section-space: 4.2rem;
    --header-height: 94px;
  }
  body {
      font-size: 15px;
    }
  .container {
      width: min(calc(100% - 1.25rem), var(--container));
    }

  /* Header */
  .site-header {
    padding-top: 8px;
  }

  .header-inner {
    min-height: 82px;
    padding: 0.5rem 0.65rem;
    border-radius: 21px;
  }

  .brand {
    width: 158px;
  }

  .brand-icon {
    width: 36px;
    height: 36px;
  }

  .brand-tagline {
    font-size: 0.7rem;
  }

  .brand-accreditation {
    max-width: 150px;
    font-size: 0.5rem;
    line-height: 1.2;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .site-nav {
    top: calc(var(--header-height) + 8px);
  }

  /* Home / Hero section */
  .hero {
      padding: 3.2rem 0 6rem;
    }
  .hero-actions {
      display: grid;
    }
  .hero-actions .btn {
      width: 100%;
    }
  .floating-note {
      right: 0;
      bottom: 2%;
      width: 56%;
      padding: 0.75rem;
    }

  /* Classes and team grids */
  .class-grid {
      grid-template-columns: 1fr;
    }
  .team-grid {
      grid-template-columns: 1fr;
    }

  /* Testimonials and contact */
  .testimonial-slide {
      padding: 1.5rem;
    }
  .contact-banner {
      padding: 1.5rem;
    }
  .contact-banner__actions {
      display: grid;
    }
  .contact-banner__actions .btn {
      width: 100%;
    }

  /* Gallery */
  .gallery-carousel {
      --gallery-gap: 3rem;
      padding-block: 0.4rem 1.5rem;
    }
  .gallery-collage {
      width: 94vw;
    }

  /* Footer */
  .footer-grid {
      grid-template-columns: 1fr;
    }
  .footer-bottom {
      flex-direction: column;
    }
  .feature-grid {
  grid-template-columns: 1fr;
}
}
/* =========================================================
   HEADER DESIGN CORRECTIONS
   Floating transparent header with readable navigation
========================================================= */

:root {
  --header-height: 116px;
}

/* ---------------------------------------------------------
   Fixed Floating Header

   Position fixed removes the separate white space that was
   appearing above the Home section.
--------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  min-height: 0;
  padding: 12px 0 0;
  background: transparent;
  border: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Rounded Glass Header Container

   The section background remains visible through the header,
   while the light glass effect keeps navigation readable.
--------------------------------------------------------- */

.header-inner {
  display: flex;
  min-height: 94px;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem 1.15rem;

  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(64, 53, 143, 0.18);
  border-radius: 30px;

  box-shadow:
    0 12px 34px rgba(48, 38, 111, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);

  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);

  pointer-events: auto;
}

/* ---------------------------------------------------------
   Brand Icon and Description
--------------------------------------------------------- */

.brand {
  display: inline-flex;
  width: 210px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
}

.brand-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.brand-description {
  display: block;
  max-width: 205px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.25;
}

/* ---------------------------------------------------------
   Navigation
--------------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 0.72rem;

  color: var(--color-ink);
  background: transparent;
  border-radius: 11px;

  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0;

  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}

/* Navigation underline */
.nav-link::after {
  position: absolute;
  right: 0.72rem;
  bottom: 4px;
  left: 0.72rem;

  height: 2px;
  content: "";

  background: var(--color-primary);
  border-radius: var(--radius-pill);

  opacity: 0;
  transform: scaleX(0.35);

  transition:
    opacity var(--transition),
    transform var(--transition);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--color-primary);
  background: rgba(64, 53, 143, 0.07);
}

.nav-link:hover {
  transform: translateY(-1px);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ---------------------------------------------------------
   Header Contact Button
--------------------------------------------------------- */

.header-contact-button {
  min-height: 43px;
  margin-left: 0.4rem;
  padding: 0.68rem 1.05rem;

  font-size: 0.9rem;
  font-weight: 700;

  box-shadow: 0 7px 16px rgba(64, 53, 143, 0.16);
}

/* ---------------------------------------------------------
   Mobile Navigation Toggle
--------------------------------------------------------- */

.nav-toggle {
  flex: 0 0 auto;
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(64, 53, 143, 0.22);
}

/* ---------------------------------------------------------
   Home Section Position

   The Home background now begins at the top of the page.
   Additional top padding prevents the header from covering
   the Home content.
--------------------------------------------------------- */

.hero {
  padding-top: calc(6rem + var(--header-height));
}

/* =========================================================
   HEADER RESPONSIVE CORRECTIONS
========================================================= */

@media (max-width: 1180px) {
  .header-inner {
    gap: 0.9rem;
    padding-inline: 0.9rem;
  }

  .brand {
    width: 190px;
  }

  .brand-icon {
    width: 46px;
    height: 46px;
  }

  .brand-description {
    max-width: 185px;
    font-size: 0.6rem;
  }

  .nav-link {
    padding-inline: 0.52rem;
    font-size: 0.89rem;
  }

  .header-contact-button {
    margin-left: 0.2rem;
    padding-inline: 0.9rem;
    font-size: 0.86rem;
  }
}

@media (max-width: 980px) {
  :root {
    --header-height: 104px;
  }

  .site-header {
    padding-top: 9px;
  }

  .header-inner {
    min-height: 86px;
    padding: 0.58rem 0.82rem;
    border-radius: 24px;
  }

  .brand {
    width: 180px;
  }

  .brand-icon {
    width: 42px;
    height: 42px;
  }

  .brand-description {
    max-width: 175px;
    font-size: 0.56rem;
  }

  .site-nav {
    position: fixed;
    top: calc(var(--header-height) + 8px);
    right: 1rem;
    left: 1rem;

    display: grid;
    max-height: calc(100vh - var(--header-height) - 25px);
    align-items: stretch;
    gap: 0.2rem;

    padding: 1rem;
    overflow-y: auto;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(64, 53, 143, 0.18);
    border-radius: 24px;

    box-shadow: var(--shadow-md);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .nav-link {
    min-height: 47px;
    justify-content: center;
    font-size: 0.97rem;
  }

  .nav-link::after {
    right: 42%;
    left: 42%;
  }

  .header-contact-button {
    width: 100%;
    margin: 0.45rem 0 0;
  }

  .hero {
    padding-top: calc(4.5rem + var(--header-height));
  }
}

@media (max-width: 620px) {
  :root {
    --header-height: 94px;
  }

  .site-header {
    padding-top: 7px;
  }

  .header-inner {
    min-height: 80px;
    padding: 0.48rem 0.62rem;
    border-radius: 20px;
  }

  .brand {
    width: 150px;
  }

  .brand-icon {
    width: 36px;
    height: 36px;
  }

  .brand-description {
    max-width: 145px;
    font-size: 0.49rem;
    line-height: 1.2;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .site-nav {
    top: calc(var(--header-height) + 7px);
  }

  .hero {
    padding-top: calc(3.2rem + var(--header-height));
  }
}
/* =========================================================
   HEADER LOGO-ONLY UPDATE
   Removes the supporting text and gives the SVG more space
========================================================= */

.brand {
  display: inline-flex;
  width: 155px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.brand-icon {
  display: block;
  width: 125px;
  height: 70px;
  object-fit: contain;
}

/* The old branding text is no longer displayed */
.brand-copy,
.brand-tagline,
.brand-accreditation,
.brand-description {
  display: none;
}

@media (max-width: 1180px) {
  .brand {
    width: 140px;
  }

  .brand-icon {
    width: 112px;
    height: 64px;
  }
}

@media (max-width: 980px) {
  .brand {
    width: 125px;
  }

  .brand-icon {
    width: 100px;
    height: 58px;
  }
}

@media (max-width: 620px) {
  .brand {
    width: 108px;
  }

  .brand-icon {
    width: 88px;
    height: 52px;
  }
}