/* ==========================================================================
   2B2 WEBSITE - MASTER STYLESHEET
   Clean Bootstrap Grid (.container, .row, .col-*) + Figma "Desktop - 2" Design System
   ========================================================================== */

/* --- CSS Variables & Design Tokens --- */
:root {
  --color-primary: #3C1765;
  --color-primary-dark: #2A0E4B;
  --color-primary-purple: #42227E;
  --color-purple-accent: #8461C6;
  --color-purple-light: #673FB2;
  --color-purple-soft: #D6C0FF;
  --color-purple-bg: #F7F3FF;
  --color-purple-tint: #F1EAFF;
  --color-purple-pale: #F9F6FF;

  --color-teal: #42AFC3;
  --color-teal-hover: #3197AA;
  --color-teal-light: #D5F9FF;
  --color-cyan: #22D3EE;
  --color-yellow: #F6C52A;

  --color-bg-base: #FFFFFF;
  --color-bg-light: #FAF8FD;
  --color-text-main: #1C0D37;
  --color-text-dark: #0F0C15;
  --color-text-muted: #574F6B;
  --color-text-light: #89809E;

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --shadow-sm: 0 4px 14px rgba(66, 34, 126, 0.06);
  --shadow-md: 0 10px 28px rgba(66, 34, 126, 0.09);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.12);
  --shadow-purple: 0 10px 24px rgba(132, 97, 198, 0.35);
  --shadow-teal: 0 10px 24px rgba(66, 175, 195, 0.35);

  --radius-full: 9999px;
  --radius-pill: 27px;
  --radius-corner: 25.6px 0 25.6px 0;
  --radius-card: 22px 0 20px 0;

  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Global Reset & Base Typography --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Custom Themed Scrollbar --- */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #8461C6 #F4EFFE;
}

/* Chrome, Edge, Safari, Opera */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #F4EFFE;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #9C77E0 0%, #764FB7 100%);
  border-radius: 10px;
  border: 2px solid #F4EFFE;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8461C6 0%, #5B359E 100%);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #6B42B0 0%, #482386 100%);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

main {
  overflow: clip;
}

.container {
  width: 100%;
  max-width: 1440px;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  margin-right: auto;
  margin-left: auto;
}

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

p {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px */
  line-height: 1.6;
  color: var(--color-text-main);
  margin-bottom: 1rem;
}

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

/* ==========================================================================
   COMMON REUSABLE TYPOGRAPHY & CLASSES
   ========================================================================== */

/* 1. Common Section Title */
.section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 3.375rem;
  /* 54px in Figma */
  line-height: 1.08;
  color: var(--color-primary-purple);
  margin-bottom: 0.2rem;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
}

.section-title .accent-italic,
.section-title em,
.section-title i {
  font-style: italic;
  font-weight: 700;
  color: var(--color-teal);
}

.section-title .text-black {
  color: #000000;
}

/* Figma signature underline accent bar */
.section-title-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 1.2rem;
}

.title-accent-bar {
  display: block;
  height: 11.8px;
  background-color: var(--color-purple-soft);
  border-radius: 6px;
  margin-top: -6px;
  position: relative;
  z-index: -1;
}

/* 2. Common Reused Subtitles & Eyebrow Badges */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-purple-accent);
  background: transparent;
  color: var(--color-purple-light);
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.2rem;
  width: fit-content;
}

.section-tag.tag-filled {
  background: var(--color-purple-accent);
  color: #FFFFFF;
  border-color: var(--color-purple-accent);
  box-shadow: 0 4px 14px rgba(132, 97, 198, 0.25);
}

.section-tag.tag-teal {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

.section-subtitle {
  font-size: 1.1875rem;
  /* 19px in Figma */
  font-weight: 600;
  color: var(--color-text-main);
  line-height: 1.45;
  margin-bottom: 1.5rem;
}

.section-desc {
  font-size: 1.125rem;
  /* 18px in Figma */
  color: var(--color-text-dark);
  line-height: 1.78;
  /* 32px in Figma */
}

/* 3. Common Card & Block Titles */
.title {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-text-main);
}

.card-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.5rem;
  /* 24px in Figma */
  color: #000000;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

/* 4. Common Button (primary-btn) */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 63px;
  padding: 0 34px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.25rem;
  /* 20px in Figma */
  color: #FFFFFF;
  background-color: #8461C6;
  border-radius: 0 25.643px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(132, 97, 198, 0.2);
  position: relative;
  z-index: 2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.primary-btn:hover {
  background-color: #673FB2;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(132, 97, 198, 0.32);
}

.primary-btn.btn-teal {
  background-color: #42AFC3;
  box-shadow: 0 4px 12px rgba(66, 175, 195, 0.2);
}

.primary-btn.btn-teal:hover {
  background-color: #3197AA;
  box-shadow: 0 8px 20px rgba(66, 175, 195, 0.32);
}

.primary-btn.btn-outline {
  background-color: transparent;
  border-radius: 0 25.643px;
  border: 3px solid #8461C6;
  color: #000000;
  box-shadow: none;
}

.primary-btn.btn-outline:hover {
  background-color: #8461C6;
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Text link with arrow */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  /* 18px */
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.link-more:hover {
  color: var(--color-primary-purple);
  gap: 0.8rem;
}

/* Section Header Dragonfly Icon Badge */
.section-dragonfly-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  position: relative;
}

.section-dragonfly-badge.center {
  margin-left: auto;
  margin-right: auto;
}

.section-dragonfly-badge .dragonfly-actor {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
}

.section-dragonfly-badge svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(132, 97, 198, 0.35));
}

/* Decorative Sparkle Stars & Curves */
.sparkle-star {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  animation: floatStar 4s ease-in-out infinite alternate;
  left: 5%;
  top: 38%;
}

@keyframes floatStar {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  100% {
    transform: translateY(-8px) rotate(12deg) scale(1.08);
  }
}

.deco-ribbon-left {
  position: absolute;
  left: -35px;
  top: 10%;
  width: 130px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.deco-ribbon-right {
  position: absolute;
  right: -35px;
  top: 25%;
  width: 130px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================================
   1. HEADER SECTION (.site-header)
   ========================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-block: 10px;
  box-shadow: 0 4px 20px rgba(66, 34, 126, 0.08);
  animation: headerSlideDown 0.35s ease forwards;
  z-index: 99999;
}

@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

.site-header.sticky .header-logo-img {
  height: 68px;
}

.site-header.sticky .btn-header-school,
.site-header.sticky .btn-header-donate {
  height: 50px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.header-logo-img {
  width: auto;
  object-fit: contain;
  display: block;
}

/* Navigation Menu (Tag target CSS inside .main-navigation) */
.main-navigation {
  display: flex;
  align-items: center;
}

.main-navigation ul {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation ul li {
  position: relative;
  list-style: none;
  display: inline-flex;
  align-items: center;
}

.main-navigation ul li a {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px */
  font-weight: 500;
  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
  transition: var(--transition-smooth);
  position: relative;
}

.main-navigation ul li a:hover {
  color: var(--color-purple-accent);
}

/* Active Item (only li.current-menu-item or li.current_page_item) */
.main-navigation ul li.current-menu-item,
.main-navigation ul li.current_page_item {
  display: inline-flex;
  align-items: center;
}

/* Dot before active text (on li so dot has no underline) */
.main-navigation ul li.current-menu-item::before,
.main-navigation ul li.current_page_item::before {
  content: '';
  width: 6.5px;
  height: 6.5px;
  background-color: var(--color-purple-accent);
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Underline only on text */
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_item a {
  color: var(--color-purple-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-purple-accent);
  text-underline-offset: 6px;
  text-decoration-thickness: 2.5px;
}

/* Header Buttons matching Figma / Screenshot (Layered Wrapper Architecture) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ==========================================================================
   UNIVERSAL LAYERED BUTTON TABS COMPONENT (.btn-layered-wrap)
   ========================================================================== */
.btn-layered-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Default Purple Button Tabs (Lavender #DDD1F8) */
.btn-layered-wrap::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0px;
  width: 55%;
  height: 80%;
  background-color: #DFCEFF;
  border-radius: 0 25.643px;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.btn-layered-wrap::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 0;
  width: 55%;
  height: 80%;
  background-color: #DFCEFF;
  border-radius: 0 25.643px;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.25s ease;
}

/* Teal Variant Tabs (Cyan #C8F3F8) */
.btn-layered-wrap.teal-wrap::before,
.btn-layered-wrap.donate-wrap::before {
  background-color: #C8F3F8;
}

.btn-layered-wrap.teal-wrap::after,
.btn-layered-wrap.donate-wrap::after {
  background-color: #C8F3F8;
}

/* Universal Hover Dynamics on Layered Wrap */
.btn-layered-wrap:hover::before {
  transform: translate(-1.5px, -1.5px);
}

.btn-layered-wrap:hover::after {
  transform: translate(1.5px, 1.5px);
}

.btn-layered-wrap:hover .primary-btn:not(.btn-teal):not(.btn-outline) {
  background-color: #673FB2;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(132, 97, 198, 0.32);
}

.btn-layered-wrap:hover .primary-btn.btn-teal {
  background-color: #3197AA;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(66, 175, 195, 0.32);
}

/* Header Specific Button Styling Refinements */
.btn-header-school,
.btn-header-donate {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 34px;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  /* 20px in Figma */
  font-weight: 600;
  border-radius: 0 25.643px;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-header-school {
  background-color: #8461C6;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(132, 97, 198, 0.2);
}

.btn-header-school:hover {
  background-color: #673FB2;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(132, 97, 198, 0.32);
}

.btn-header-donate {
  background-color: #42AFC3;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(66, 175, 195, 0.2);
  gap: 10px;
}

.btn-header-donate:hover {
  background-color: #3197AA;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(66, 175, 195, 0.32);
}

.btn-header-donate .icon-heart {
  width: 22px;
  height: 20px;
  stroke: #FFFFFF;
  stroke-width: 2.4;
  fill: none;
  flex-shrink: 0;
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background-color: var(--color-primary-purple);
  border-radius: 2px;
}

/* Offcanvas Dark Backdrop Overlay */
.offcanvas-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(28, 13, 55, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}

.offcanvas-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   2. HERO SECTION (.hero-section)
   ========================================================================== */
.hero-section {
  position: relative;
  width: 100%;
  padding-bottom: 16px;
}

.hero-shape {
  position: relative;
  width: 100%;
  min-height: 960px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  padding-top: 80px;
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  clip-path: polygon(100% -2.8%, 0% -2.8%, 0% 84.3%, 0% 84.3%, 0.2% 84.3%, 0.6% 84.3%, 1% 84.2%, 1.6% 84.2%, 2.3% 84.1%, 3.1% 84.1%, 3.9% 84%, 4.9% 83.9%, 5.9% 83.9%, 7.1% 83.8%, 8.3% 83.7%, 9.5% 83.7%, 10.8% 83.6%, 12.2% 83.6%, 13.6% 83.5%, 15.1% 83.5%, 16.6% 83.4%, 18.1% 83.4%, 19.6% 83.4%, 21.2% 83.4%, 22.7% 83.4%, 24.3% 83.5%, 25.8% 83.5%, 27.3% 83.6%, 28.8% 83.7%, 30.3% 83.8%, 31.8% 84%, 33.2% 84.1%, 34.6% 84.3%, 36.2% 84.6%, 37.8% 85%, 39.4% 85.5%, 40.9% 86%, 42.4% 86.6%, 43.9% 87.3%, 45.3% 88%, 46.7% 88.8%, 48% 89.6%, 49.4% 90.4%, 50.7% 91.2%, 52% 92%, 53.3% 92.9%, 54.6% 93.7%, 55.9% 94.5%, 57.2% 95.3%, 58.5% 96%, 59.8% 96.7%, 61.1% 97.4%, 62.4% 98%, 63.8% 98.5%, 65.1% 99%, 66.5% 99.4%, 67.9% 99.7%, 69.4% 99.9%, 70.8% 100%, 72.4% 99.9%, 73.9% 99.8%, 75.5% 99.5%, 77.2% 99.1%, 78.1% 98.8%, 79.1% 98.5%, 80.1% 98.1%, 81.1% 97.6%, 82.1% 97.1%, 83.1% 96.6%, 84.1% 96%, 85.2% 95.4%, 86.2% 94.8%, 87.2% 94.1%, 88.2% 93.4%, 89.2% 92.8%, 90.2% 92.1%, 91.1% 91.4%, 92% 90.7%, 92.9% 90.1%, 93.8% 89.4%, 94.6% 88.8%, 95.4% 88.2%, 96.1% 87.6%, 96.8% 87%, 97.4% 86.5%, 98% 86%, 98.5% 85.6%, 98.9% 85.2%, 99.3% 84.9%, 99.6% 84.7%, 99.8% 84.5%, 99.9% 84.4%, 100% 84.3%);
}

.hero-shape2 {
  clip-path: polygon(100% 0%, 0% 0%, 0% 81.2%, 0.1% 81.2%, 0.3% 81.2%, 0.6% 81.2%, 1.1% 81.2%, 1.6% 81.3%, 2.3% 81.3%, 3.1% 81.3%, 4% 81.4%, 4.9% 81.5%, 6% 81.5%, 7.1% 81.6%, 8.3% 81.7%, 9.6% 81.8%, 10.9% 81.9%, 12.2% 82%, 13.7% 82.1%, 15.1% 82.2%, 16.6% 82.3%, 18.1% 82.4%, 19.6% 82.6%, 21.2% 82.7%, 22.7% 82.9%, 24.3% 83%, 25.8% 83.2%, 27.4% 83.3%, 28.9% 83.5%, 30.4% 83.7%, 31.8% 83.9%, 33.2% 84.1%, 34.6% 84.3%, 36.3% 84.6%, 37.9% 85%, 39.4% 85.5%, 41% 86%, 42.4% 86.6%, 43.9% 87.3%, 45.3% 88%, 46.7% 88.8%, 48.1% 89.5%, 49.4% 90.4%, 50.7% 91.2%, 52.1% 92%, 53.4% 92.8%, 54.7% 93.7%, 55.9% 94.5%, 57.2% 95.3%, 58.5% 96%, 59.8% 96.7%, 61.1% 97.4%, 62.5% 98%, 63.8% 98.5%, 65.2% 99%, 66.6% 99.4%, 68% 99.7%, 69.4% 99.9%, 70.9% 100%, 72.4% 100%, 74% 99.8%, 75.5% 99.5%, 77.2% 99.1%, 78.1% 98.8%, 79.1% 98.5%, 80.1% 98%, 81.1% 97.5%, 82.1% 97%, 83.1% 96.4%, 84.2% 95.7%, 85.2% 95%, 86.2% 94.3%, 87.2% 93.6%, 88.2% 92.8%, 89.2% 92%, 90.2% 91.3%, 91.2% 90.5%, 92.1% 89.7%, 93% 88.9%, 93.8% 88.1%, 94.6% 87.4%, 95.4% 86.7%, 96.1% 86%, 96.8% 85.4%, 97.5% 84.8%, 98% 84.2%, 98.5% 83.7%, 99% 83.3%, 99.3% 82.9%, 99.6% 82.6%, 99.8% 82.4%, 100% 82.3%, 100% 82.2%);
  position: absolute;
  inset: 0;
  background: #8461C6;
  z-index: -1;
}

.hero-shape3 {
  clip-path: polygon(0% -2.7%, 100% -2.7%, 100% 84.3%, 99.9% 84.3%, 99.7% 84.3%, 99.4% 84.3%, 98.9% 84.2%, 98.4% 84.2%, 97.7% 84.1%, 96.9% 84.1%, 96% 84%, 95.1% 83.9%, 94% 83.9%, 92.9% 83.8%, 91.7% 83.7%, 90.4% 83.7%, 89.1% 83.6%, 87.8% 83.5%, 86.3% 83.5%, 84.9% 83.4%, 83.4% 83.4%, 81.9% 83.4%, 80.4% 83.4%, 78.8% 83.4%, 77.3% 83.4%, 75.7% 83.5%, 74.2% 83.5%, 72.6% 83.6%, 71.1% 83.7%, 69.6% 83.8%, 68.2% 83.9%, 66.8% 84.1%, 65.4% 84.3%, 63.7% 84.6%, 62.1% 85%, 60.6% 85.5%, 59% 86%, 57.6% 86.6%, 56.1% 87.3%, 54.7% 88%, 53.3% 88.8%, 51.9% 89.5%, 50.6% 90.3%, 49.3% 91.2%, 47.9% 92%, 46.6% 92.8%, 45.3% 93.6%, 44.1% 94.4%, 42.8% 95.2%, 41.5% 96%, 40.2% 96.7%, 38.9% 97.3%, 37.5% 97.9%, 36.2% 98.5%, 34.8% 98.9%, 33.4% 99.3%, 32% 99.6%, 30.6% 99.8%, 29.1% 99.9%, 27.6% 99.9%, 26% 99.7%, 24.5% 99.5%, 22.8% 99.1%, 21.9% 98.8%, 20.9% 98.4%, 19.9% 98%, 18.9% 97.6%, 17.9% 97.1%, 16.9% 96.5%, 15.8% 96%, 14.8% 95.4%, 13.8% 94.7%, 12.8% 94.1%, 11.8% 93.4%, 10.8% 92.7%, 9.8% 92.1%, 8.8% 91.4%, 7.9% 90.7%, 7% 90%, 6.2% 89.4%, 5.4% 88.7%, 4.6% 88.1%, 3.9% 87.6%, 3.2% 87%, 2.5% 86.5%, 2% 86%, 1.5% 85.6%, 1% 85.2%, 0.7% 84.9%, 0.4% 84.7%, 0.2% 84.5%, 0% 84.3%, 0% 84.3%);
  position: absolute;
  inset: 0;
  background: #F1EAFF;
  z-index: -2;
}

.hero-shape::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #F1EAFF 6.46%, rgba(221, 202, 255, 0.00) 33.45%);
}

.hero-shape::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(88deg, #F1EAFF 35.46%, rgba(221, 202, 255, 0.00) 76.45%);
}

.hero-content {
  position: relative;
  z-index: 12;
  max-width: 640px;
  padding-bottom: 12%;
}

.hero-badge-wrap {
  display: block;
  margin-bottom: 24px;
}

.hero-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 195.3px;
  height: 36.97px;
  background-color: var(--color-purple-accent);
  border-radius: 27px;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  /* 20px in Figma */
  font-weight: 700;
  line-height: 18px;
  margin-bottom: 0;
  box-shadow: 0 4px 14px rgba(132, 97, 198, 0.25);
}

.hero-content .section-title-wrap {
  display: block;
  position: relative;
  margin-bottom: 1.4rem;
}

.hero-title-main {
  font-family: var(--font-serif);
  font-size: 3.8125rem;
  /* 61px in Figma */
  line-height: 1.1;
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.02em;
  margin: 0;
}

.hero-title-main em,
.hero-title-main .accent-italic {
  font-style: italic;
  font-weight: 700;
  color: var(--color-teal);
  display: inline-block;
}

.hero-title-prefix {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.hero-underline-bar {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: -4px;
  width: auto;
  height: 9px;
  background-color: #8461C6;
  border-radius: 4px;
  z-index: -1;
}

.hero-description {
  max-width: 586px;
  font-size: 1.1875rem;
  /* 19px in Figma */
  font-weight: 600;
  color: var(--color-text-main);
  line-height: 27px;
  margin-bottom: 38px;
}

.hero-btn-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-hero-mission {
  padding: 0 32px;
  white-space: nowrap;
}

.hero-btn-group .primary-btn.btn-hero-explore,
.hero-btn-group .primary-btn.btn-outline,
.primary-btn.btn-hero-explore {
  white-space: nowrap;
  border: 3px solid #42AFC3;
  color: #42AFC3;
  background-color: transparent;
  transition: all 0.25s ease;
}

.hero-btn-group .primary-btn.btn-hero-explore:hover,
.hero-btn-group .primary-btn.btn-outline:hover,
.primary-btn.btn-hero-explore:hover {
  background-color: #42AFC3;
  border-color: #42AFC3;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(66, 175, 195, 0.35);
  transform: translateY(-2px);
}

.hero-visual-col {
  position: absolute;
  z-index: 10;
  right: 8%;
  bottom: -16%;
}

.hero-students-img {
  width: 760px;
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 15px 35px rgba(60, 23, 101, 0.08));
}

/* ==========================================================================
   ANIMATED DRAGONFLY & SVG FLIGHT PATH (RETAINED & ACTIVE)
   ========================================================================== */
.dragonfly-canvas-container {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 80%;
  pointer-events: none;
  z-index: 20;
  overflow: visible;
}

.flight-path-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.flight-path-line {
  opacity: 0.5;
}

.dragonfly-actor {
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 96px;
  pointer-events: none;
  will-change: transform;
  transform-origin: 50% 30%;
  filter: drop-shadow(0 5px 16px rgba(123, 59, 201, 0.35));
}

.dragonfly-unified-svg-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dragonfly-svg-unified {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.wing-flap-left {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: flutterWingLeft 0.1s ease-in-out infinite alternate;
}

.wing-flap-right {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: flutterWingRight 0.1s ease-in-out infinite alternate;
}

@keyframes flutterWingLeft {
  0% {
    transform: scaleX(1) scaleY(1) rotate(0deg);
    opacity: 0.95;
  }

  100% {
    transform: scaleX(0.55) scaleY(0.85) rotate(-6deg);
    opacity: 0.75;
  }
}

@keyframes flutterWingRight {
  0% {
    transform: scaleX(1) scaleY(1) rotate(0deg);
    opacity: 0.95;
  }

  100% {
    transform: scaleX(0.55) scaleY(0.85) rotate(6deg);
    opacity: 0.75;
  }
}

/* Organic Dragonfly Tail Sway Animation */
.dragonfly-tail-sway {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: dragonflyTailSway 1.4s ease-in-out infinite alternate;
}

@keyframes dragonflyTailSway {
  0% {
    transform: rotate(-9deg) skewX(-4deg);
  }

  50% {
    transform: rotate(0deg) skewX(0deg);
  }

  100% {
    transform: rotate(9deg) skewX(4deg);
  }
}

/* ==========================================================================
   3. VALUES / MISSION STATEMENT SECTION (.values-section)
   ========================================================================== */
.values-section {
  padding: 0;
  background: #FFFFFF;
  position: relative;
}

.values-heading-wrap {
  text-align: center;
  margin-bottom: 3.5rem;
}

.values-mission-heading {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  /* 28px in Figma */
  font-weight: 600;
  text-align: center;
  color: #1C0D37;
  margin: 0 auto;
  line-height: 36px;
}

.values-mission-heading .highlight-pill {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.values-mission-heading .highlight-pill::before {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 2px;
  height: 12px;
  background-color: #DFCEFF;
  border-radius: 4px;
  z-index: -1;
}

/* 3 Values Cards matching Screenshot */
.values-card {
  position: relative;
  border-radius: 0 20px 0 22px;
  background: #F2F2F2;
  padding: 48px 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(132, 97, 198, 0.05);
  border-right: 6px solid #8461C6;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.values-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(132, 97, 198, 0.12);
}

.values-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.values-card-icon img,
.values-icon-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.values-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.values-card-content {
  flex: 1;
}

.values-card-content .card-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  /* 24px in Figma */
  font-weight: 600;
  color: #000000;
  margin-bottom: 6px;
  line-height: 25px;
}

.values-card-content p {
  font-family: var(--font-sans);
  font-size: 1rem;
  /* 16px in Figma */
  font-weight: 500;
  color: #1C0D37;
  line-height: 21px;
  margin-bottom: 0;
}

/* ==========================================================================
   4. MEET VINA SECTION (.meet-vina-section)
   ========================================================================== */
.meet-vina-section {
  padding: 4.5rem 0 10rem 0;
  background: #FFFFFF;
  position: relative;
}

.meet-vina-content {
  position: relative;
  z-index: 5;
  padding-bottom: 2rem;
}

.vina-badge-row {
  position: relative;
  margin-left: -12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vina-top-dragonfly {
  width: 96px;
  height: 96px;
  position: absolute;
  top: 2px;
  left: -92px;
  transform: rotate(115deg);
  display: inline-block;
  flex-shrink: 0;
}

.vina-story-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #8461C6;
  border-radius: 50px;
  padding: 5px 22px;
  color: #673FB2;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 700;
  background: transparent;
  line-height: 18px;
}

.meet-vina-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.375rem;
  /* 54px in Figma */
  font-weight: 600;
  margin-top: 0.35rem;
  margin-bottom: 1.4rem;
  line-height: 48px;
  letter-spacing: -0.5px;
}

.vina-title-prefix {
  position: relative;
  display: inline-block;
  color: #42227E;
  font-weight: 600;
  z-index: 1;
}

.vina-highlight-bar {
  position: absolute;
  left: 0;
  right: -4px;
  bottom: 4px;
  height: 12px;
  background-color: #DFCEFF;
  border-radius: 2px;
  z-index: -1;
}

.meet-vina-title .vina-name {
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  color: #42AFC3;
  font-weight: 700;
  font-size: 3.375rem;
  /* 54px in Figma */
  margin-left: 8px;
  display: inline-block;
}

.meet-vina-desc {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  color: #0F0C15;
  line-height: 32px;
  margin-bottom: 1rem;
}

/* Floating Quote Card matching Image 2 */
.meet-vina-quote-card {
  position: relative;
  padding: 22px 26px 18px 26px;
  border-bottom: 3.5px solid #38A7BD;
  margin-top: 1.8rem;
  max-width: 90%;
  border-radius: 0 20px 0 22px;
  background: #FFF;
  box-shadow: 0 14px 34px 0 rgba(0, 0, 0, 0.15);
}

.quote-mark-wrap {
  margin-bottom: 10px;
}

.quote-mark-svg {
  display: block;
}

.meet-vina-quote-card .quote-text {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  font-style: italic;
  color: #4B4060;
  font-weight: 600;
  line-height: 32px;
  margin-bottom: 1rem;
}

.meet-vina-quote-card .quote-footer {
  margin-top: 0.4rem;
}

.meet-vina-quote-card .quote-author {
  font-family: var(--font-sans);
  font-size: 1.1875rem;
  /* 19px in Figma */
  font-weight: 700;
  color: #8461C6;
  line-height: 18px;
}

.meet-vina-quote-card .quote-heart {
  flex-shrink: 0;
  width: 37.303px;
  height: 38.458px;
  transform: rotate(-26.927deg);
}

/* Bottom Flight Path (Original Figma SVG 323x242) */
.vina-flight-path-wrap {
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 323px;
  height: 242px;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}

.vina-flight-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 323px;
  height: 242px;
  overflow: visible;
}

.vina-bottom-dragonfly {
  position: absolute;
  top: 181px;
  left: 304px;
  width: 127px;
  height: 117px;
  transform: rotate(96deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 4px 12px rgba(132, 97, 198, 0.25));
}

/* Right Visual Bleed - Prominent Large Vina matching Image 2 */
.meet-vina-visual-bleed {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  width: 48%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.vina-back-vector {
  position: absolute;
  right: -50px;
  top: auto;
  bottom: -7px;
  z-index: 1;
  pointer-events: none;
}

.vina-main-img {
  position: relative;
  z-index: 2;
  object-fit: contain;
  object-position: right bottom;
  display: block;
  margin-right: 0;
}

@media (max-width: 991px) {
  .meet-vina-section {
    min-height: auto;
    padding-bottom: 4rem;
  }

  .meet-vina-visual-bleed {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .vina-back-vector {
    position: absolute;
    width: 100%;
    max-width: 520px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: auto;
  }

  .vina-main-img {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
  }
}

/* ==========================================================================
   5. EXPLORE OUR PROGRAMS SECTION (.programs-section)
   Seamless 3x2 Full-Width Grid (container-fluid, g-0)
   ========================================================================== */
.programs-section {
  padding: 0;
  background: #FFFFFF;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Info Box (Cell 1) */
.programs-info-cell {
  background: #FFFFFF;
  padding: 3.5rem 3.5rem 3rem 4rem;
  height: 100%;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.programs-info-cell .section-tag {
  border: 1px solid #8461C6;
  border-radius: 50px;
  padding: 5px 22px;
  color: #673FB2;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 600;
  background: transparent;
  width: fit-content;
  line-height: 18px;
}

.programs-info-cell .section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 3.375rem;
  /* 54px in Figma */
  line-height: 52px;
  color: #42227E;
  letter-spacing: -0.5px;
  margin-bottom: 0;
}

.programs-info-cell .section-title .title-prefix {
  position: relative;
  display: inline-block;
  color: #42227E;
  z-index: 1;
}

.programs-info-cell .section-title .highlight-bar {
  position: absolute;
  left: 0;
  right: -4px;
  bottom: 4px;
  height: 12px;
  background-color: #DFCEFF;
  border-radius: 2px;
  z-index: -1;
}

.programs-info-cell .section-title .accent-italic {
  font-style: italic;
  font-weight: 600;
  color: #42AFC3;
  display: inline-block;
}

.programs-lead-text {
  font-family: var(--font-sans);
  font-size: 1.1875rem;
  /* 19px in Figma */
  font-weight: 600;
  color: #1C0D37;
  line-height: 27px;
  margin-bottom: 1rem;
}

.programs-desc-text {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 400;
  color: #110E16;
  line-height: 32px;
  margin-bottom: 1.5rem;
}

.programs-info-cell .primary-btn.btn-outline {
  border-radius: 0 25.643px;
  border: 2px solid #8461C6;
  color: #000000;
  font-weight: 600;
  padding: 0 32px;
  height: 58px;
  font-size: 1.25rem;
  /* 20px in Figma */
  line-height: 14px;
}

.programs-info-cell .primary-btn.btn-outline:hover {
  background-color: #8461C6;
  color: #FFFFFF;
}

/* Image Grid Cards (Cells 2 to 6) */
.program-grid-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  display: block;
  cursor: pointer;
  background: #2B1358;
}

.program-grid-card .program-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.program-grid-card:hover .program-img {
  transform: scale(1.06);
}

/* Normal State: Dark Gradient at bottom with Title */
.program-overlay-normal {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 100%);
  display: flex;
  align-items: flex-end;
  padding: 2.2rem 2.4rem;
  z-index: 2;
  transition: opacity 0.35s ease;
}

.program-overlay-normal .program-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.125rem;
  /* 34px in Figma */
  font-weight: 700;
  color: #FFFFFF;
  line-height: 25px;
  margin-bottom: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.program-grid-card:hover .program-overlay-normal {
  opacity: 0;
  pointer-events: none;
}

/* Hover State: Solid Purple Banner Panel sliding up */
.program-hover-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #502D88;
  /* Deep vibrant purple matching screenshot */
  padding: 2.4rem 2.4rem 2.6rem 2.4rem;
  z-index: 3;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.program-grid-card:hover .program-hover-panel {
  transform: translateY(0);
  opacity: 1;
}

.program-hover-panel .program-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.125rem;
  /* 34px in Figma */
  font-weight: 700;
  color: #FFFFFF;
  line-height: 25px;
  margin-bottom: 0.8rem;
}

.program-hover-panel .program-desc {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  color: #FFFFFF;
  line-height: 28px;
  margin-bottom: 1.2rem;
}

.program-hover-panel .program-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  /* 20px in Figma */
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: gap 0.2s ease, opacity 0.2s ease;
}

.program-hover-panel .program-link:hover {
  gap: 0.8rem;
  opacity: 0.9;
}

@media (max-width: 991px) {
  .programs-info-cell {
    padding: 3rem 2rem;
    min-height: auto;
  }

  .program-grid-card {
    min-height: 380px;
  }
}

/* ==========================================================================
   6. WHO WE ARE SECTION (.who-we-are-section)
   ========================================================================== */
.who-we-are-section {
  padding: 6.5rem 0 5.5rem 0;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}

/* Left Looping Ribbon */
.who-we-are-left-ribbon {
  position: absolute;
  left: 0;
  top: 18%;
  pointer-events: none;
  z-index: 1;
}


/* Right Dotted Flight Path */
.who-we-are-right-path {
  position: absolute;
  right: 0;
  top: 12%;
  width: 290px;
  height: 270px;
  pointer-events: none;
  z-index: 3;
}

.who-we-are-right-path svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Main Purple Card Box */
.who-we-are-card-box {
  border-radius: 56px;
  background: #F9F6FF;
  padding: 3.15rem;
  position: relative;
  z-index: 2;
}

/* Top Right Dragonfly Actor */
.who-we-are-top-dragonfly {
  position: absolute;
  top: -30px;
  right: 28px;
  width: 78px;
  height: 78px;
  transform: rotate(35deg);
  z-index: 5;
}

/* Left Image Circle with Crescent & Star */
.who-we-are-img-wrapper {
  position: relative;
  width: 100%;
  max-width: 588px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.who-we-are-circle-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: -51px 0px 0px #BFAFDD;
}


.who-we-are-star-badge {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 146.902px;
  height: 146.902px;
  z-index: 6;
  filter: drop-shadow(0 4px 12px rgba(56, 167, 189, 0.35));
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Right Content */
.who-we-are-content-inner {
  padding-left: 1.5rem;
}

.who-we-are-content-inner .section-tag {
  border: 2px solid #8461C6;
  border-radius: 50px;
  padding: 5px 22px;
  color: #673FB2;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 700;
  background: transparent;
  width: fit-content;
  line-height: 18px;
}

.who-we-are-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.375rem;
  /* 54px in Figma */
  font-weight: 600;
  color: #42227E;
  line-height: 48px;
  margin-bottom: 1.2rem;
  letter-spacing: -0.5px;
}

.who-we-are-title .title-prefix {
  position: relative;
  display: inline-block;
  color: #42227E;
  font-weight: 600;
  z-index: 1;
}

.who-we-are-title .highlight-bar {
  position: absolute;
  left: 0;
  right: -4px;
  bottom: 4px;
  height: 12px;
  background-color: #DFCEFF;
  border-radius: 2px;
  z-index: -1;
}

.who-we-are-title .title-accent {
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  color: #42AFC3;
  font-weight: 700;
  font-size: 3.375rem;
  /* 54px in Figma */
  margin-left: 6px;
  display: inline-block;
}

.who-we-are-lead {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  color: #110E16;
  font-weight: 400;
  line-height: 32px;
  margin-bottom: 1.2rem;
}

.who-we-are-desc {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  color: #110E16;
  font-weight: 400;
  line-height: 32px;
  margin-bottom: 1.8rem;
}

.who-we-are-content-inner .primary-btn.btn-teal {
  background-color: #42AFC3;
  border-radius: 0 25.643px;
  padding: 0 34px;
  height: 58px;
  font-size: 1.25rem;
  /* 20px in Figma */
  color: #FFFFFF;
  line-height: 14px;
  box-shadow: 0 4px 14px rgba(56, 167, 189, 0.25);
}

.who-we-are-content-inner .primary-btn.btn-teal:hover {
  background-color: #3197AA;
}

/* 4 Stats Counters Row */
.stats-row-v2 {
  margin-top: 5rem;
  padding: 0 1rem;
  position: relative;
  z-index: 2;
}

.stat-item-v2 {
  text-align: center;
  position: relative;
  padding: 0 1rem;
}

.stat-item-v2.has-divider::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1.5px;
  background-color: #DFCEFF;
}

.stat-item-v2 .stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 4rem;
  /* 64px in Figma */
  font-weight: 400;
  color: #673FB2;
  line-height: 88px;
  margin-bottom: 0.5rem;
}

.stat-item-v2 .stat-lbl {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  /* 20px in Figma */
  font-weight: 600;
  color: #000000;
  line-height: 32px;
}

/* Stats Bottom Left Path & Dragonfly */
.stats-bottom-left-path {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 160px;
  height: 160px;
  pointer-events: none;
}

.stats-bottom-dragonfly {
  position: absolute;
  left: -28%;
  bottom: auto;
  top: -54px;
  width: 96px;
  height: 104px;
  transform: rotate(276deg);
  z-index: 1;
}

@media (max-width: 991px) {
  .who-we-are-card-box {
    padding: 3rem 2rem;
  }

  .who-we-are-content-inner {
    padding-left: 0;
    margin-top: 2.5rem;
  }

  .stat-item-v2.has-divider::before {
    display: none;
  }

  .stats-row-v2 {
    margin-top: 3.5rem;
    row-gap: 2rem;
  }
}

/* ==========================================================================
   7. FIND YOUR PATH SECTION (.pathway-section)
   ========================================================================== */
.pathway-section {
  padding: 5.5rem 0 6.5rem 0;
  background: #F6F1FE;
  position: relative;
  width: 100%;
  min-height: 960px;
  display: flex;
  align-items: center;
}

.pathway-container {
  z-index: 3;
  width: 100%;
}

/* Left Column */
.pathway-col-left {
  z-index: 3;
}

.pathway-header-wrap {
  margin-bottom: 2rem;
}

/* Top-Right Floating Dragonfly above 'Path' */
.pathway-dragonfly-badge {
  position: absolute;
  top: -36px;
  left: 44%;
  width: 117px;
  height: 127px;
  z-index: 5;
  pointer-events: none;
  animation: pathwayDragonflyHover 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 10px rgba(66, 34, 126, 0.12));
  rotate: 308deg;
}

.pathway-dragonfly-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes pathwayDragonflyHover {
  0% {
    transform: rotate(-16deg) translateY(0) scale(1);
  }

  50% {
    transform: rotate(-13deg) translateY(-6px) translateX(2px) scale(1.02);
  }

  100% {
    transform: rotate(-18deg) translateY(-10px) translateX(-3px) scale(0.99);
  }
}

/* Featured Programs Pill Badge */
.pathway-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 22px;
  border: 1px solid #8461C6;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.75);
  color: #673FB2;
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 1.1rem;
  box-shadow: 0 2px 8px rgba(132, 97, 198, 0.08);
  position: relative;
  z-index: 3;
  line-height: 18px;
}

/* Title Styling with Lilac Highlight bar */
.pathway-title {
  font-family: var(--font-serif);
  font-size: 3.375rem;
  /* 54px in Figma */
  font-weight: 600;
  color: #42227E;
  line-height: 52px;
  margin-bottom: 1.15rem;
  letter-spacing: -0.01em;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pathway-title-base {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.pathway-title-base::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 4px;
  height: 12px;
  background: #DFD0FA;
  z-index: -1;
  border-radius: 3px;
}

.pathway-title-accent {
  color: #42AFC3;
  font-style: italic;
  font-weight: 700;
}

.pathway-subtitle {
  font-size: 1.1875rem;
  /* 19px in Figma */
  font-weight: 600;
  color: #1C0D37;
  line-height: 27px;
  max-width: 490px;
}

/* 4 Step Cards List */
.pathway-cards-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 540px;
}

/* Individual Card (Default State) */
.pathway-card {
  background: #ffffff00;
  border: 2px solid #673FB2;
  border-radius: 42px;
  padding: 0.95rem 1.65rem 0.95rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.35rem;
  box-shadow: 0 4px 14px rgba(118, 78, 190, 0.06);
  cursor: pointer;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.35s ease,
    background-color 0.35s ease;
  outline: none;
}

/* Card Hover State */
.pathway-card:hover,
.pathway-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(103, 63, 178, 0.16), 0 4px 10px rgba(103, 63, 178, 0.08);
  border-color: #5527A5;
  background: #FFFFFF;
}

/* Icon Box with Double Halo Rings */
.pathway-card-icon-wrap {
  position: relative;
  width: 103.877px;
  height: 100.65px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Outer Soft Lavender Halo */
.pathway-card-icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -4px;
  top: -3px;
  width: 111.698px;
  height: 108.227px;
  opacity: 0.2;
  clip-path: polygon(86.5% 17.7%, 88.3% 20%, 90.1% 22.3%, 91.7% 24.6%, 93.1% 26.9%, 94.4% 29.2%, 95.6% 31.6%, 96.6% 33.9%, 97.5% 36.3%, 98.3% 38.6%, 98.9% 41%, 99.4% 43.4%, 99.7% 45.7%, 99.9% 48.1%, 99.9% 50.5%, 99.9% 52.8%, 99.6% 55.2%, 99.3% 57.5%, 98.8% 59.8%, 98.1% 62.1%, 97.3% 64.4%, 96.4% 66.6%, 95.3% 68.9%, 94.1% 71.1%, 92.8% 73.2%, 91.3% 75.4%, 89.7% 77.5%, 87.9% 79.6%, 86% 81.6%, 84% 83.6%, 81.8% 85.6%, 79.5% 87.5%, 77.2% 89.2%, 74.9% 90.8%, 72.6% 92.3%, 70.2% 93.6%, 67.8% 94.8%, 65.4% 95.9%, 63% 96.8%, 60.6% 97.6%, 58.1% 98.3%, 55.7% 98.8%, 53.2% 99.2%, 50.8% 99.4%, 48.4% 99.5%, 45.9% 99.5%, 43.5% 99.3%, 41.1% 98.9%, 38.7% 98.5%, 36.4% 97.9%, 34% 97.1%, 31.7% 96.2%, 29.4% 95.2%, 27.1% 94%, 24.9% 92.7%, 22.7% 91.3%, 20.5% 89.7%, 18.4% 87.9%, 16.3% 86%, 14.3% 84%, 12.4% 81.8%, 10.5% 79.6%, 8.8% 77.3%, 7.2% 75%, 5.8% 72.7%, 4.6% 70.3%, 3.5% 68%, 2.6% 65.6%, 1.8% 63.3%, 1.1% 60.9%, 0.6% 58.5%, 0.3% 56.2%, 0.1% 53.8%, 0% 51.4%, 0.1% 49%, 0.3% 46.7%, 0.7% 44.3%, 1.2% 42%, 1.8% 39.7%, 2.6% 37.4%, 3.5% 35.1%, 4.5% 32.8%, 5.7% 30.6%, 7% 28.4%, 8.4% 26.2%, 10% 24%, 11.7% 21.9%, 13.5% 19.8%, 15.4% 17.8%, 17.5% 15.8%, 19.7% 13.8%, 22% 11.9%, 24.2% 10.2%, 26.5% 8.6%, 28.8% 7.1%, 31.1% 5.8%, 33.4% 4.6%, 35.7% 3.5%, 38% 2.6%, 40.4% 1.8%, 42.7% 1.2%, 45% 0.7%, 47.3% 0.3%, 49.6% 0.1%, 51.9% 0%, 54.2% 0.1%, 56.5% 0.2%, 58.8% 0.6%, 61% 1%, 63.3% 1.7%, 65.5% 2.4%, 67.7% 3.3%, 69.9% 4.3%, 72.1% 5.5%, 74.2% 6.8%, 76.3% 8.3%, 78.4% 9.9%, 80.5% 11.6%, 82.5% 13.5%, 84.5% 15.6%);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
  background-color: #8461C6;
}

/* Inner Solid Purple Circle */
.pathway-card-icon {
  position: relative;
  z-index: 2;
  width: 103.877px;
  height: 100.65px;
  border-radius: 50%;
  background: #8461C6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(118, 78, 190, 0.22);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.pathway-card-icon img {
  position: relative;
}

/* Icon Box Hover Effect */
.pathway-card:hover .pathway-card-icon-wrap::before,
.pathway-card:focus-visible .pathway-card-icon-wrap::before {
  inset: -5px;
  background: rgba(132, 97, 198, 0.32);
}

.pathway-card:hover .pathway-card-icon,
.pathway-card:focus-visible .pathway-card-icon {
  transform: scale(1.05);
  background: #7349BD;
  box-shadow: 0 6px 16px rgba(103, 63, 178, 0.32);
}

.pathway-card:hover .pathway-card-icon img,
.pathway-card:focus-visible .pathway-card-icon img {
  transform: scale(1.08);
}

/* Card Text Content */
.pathway-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pathway-card-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  /* 24px in Figma */
  font-weight: 600;
  color: #000000;
  margin: 0 0 4px 0;
  line-height: 25px;
}

.pathway-card-desc {
  font-size: 1rem;
  /* 16px in Figma */
  font-weight: 500;
  color: #1C0D37;
  margin: 0 0 6px 0;
  line-height: 21px;
}

.pathway-card-link {
  font-size: 1.25rem;
  /* 20px in Figma */
  font-weight: 600;
  color: #42AFC3;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 14px;
  transition: color 0.25s ease;
  width: fit-content;
}

.pathway-arrow {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.pathway-card:hover .pathway-card-link,
.pathway-card:focus-visible .pathway-card-link {
  color: #2799A9;
}

.pathway-card:hover .pathway-arrow,
.pathway-card:focus-visible .pathway-arrow {}

/* Right Column Visual - Bleeds completely to the right screen edge */
.pathway-visual-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52vw;
  max-width: 1042px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 2;
  background: #DFCEFF;
  clip-path: polygon(99.9% 6.9%, 99.8% 6.8%, 99.3% 6.7%, 98.5% 6.4%, 97.4% 6.1%, 96% 5.7%, 94.4% 5.3%, 92.5% 4.8%, 90.4% 4.3%, 88.2% 3.8%, 85.7% 3.2%, 83.1% 2.7%, 80.3% 2.2%, 77.4% 1.7%, 74.4% 1.3%, 71.2% 0.9%, 68% 0.5%, 64.8% 0.3%, 61.5% 0.1%, 58.2% 0%, 54.8% 0%, 51.5% 0.2%, 48.2% 0.5%, 45% 0.9%, 41.8% 1.4%, 38.7% 2.2%, 35.7% 3.1%, 32.8% 4.2%, 30.1% 5.5%, 27.5% 7%, 25.1% 8.8%, 24.1% 9.6%, 23.2% 10.6%, 22.5% 11.5%, 21.9% 12.5%, 21.5% 13.5%, 21.2% 14.5%, 20.9% 15.6%, 20.8% 16.7%, 20.8% 17.8%, 20.8% 18.9%, 20.9% 20%, 21.1% 21.2%, 21.3% 22.4%, 21.6% 23.6%, 21.9% 24.8%, 22.2% 26.1%, 22.5% 27.3%, 22.8% 28.6%, 23.1% 29.9%, 23.4% 31.2%, 23.7% 32.5%, 23.9% 33.8%, 24.1% 35.1%, 24.2% 36.4%, 24.3% 37.8%, 24.2% 39.1%, 24.1% 40.4%, 23.9% 41.8%, 23.6% 43.1%, 23.2% 44.5%, 22.5% 46.2%, 21.7% 47.8%, 20.8% 49.5%, 19.7% 51.1%, 18.6% 52.7%, 17.5% 54.3%, 16.2% 55.8%, 14.9% 57.3%, 13.6% 58.8%, 12.3% 60.3%, 11% 61.7%, 9.7% 63.1%, 8.4% 64.5%, 7.2% 65.9%, 6% 67.2%, 4.9% 68.6%, 3.8% 69.9%, 2.9% 71.1%, 2.1% 72.4%, 1.3% 73.7%, 0.8% 74.9%, 0.3% 76.1%, 0.1% 77.3%, 0% 78.5%, 0.1% 79.7%, 0.4% 80.8%, 1% 82%, 1.7% 83.1%, 2.7% 84.2%, 4% 85.3%, 5.1% 86.1%, 6.3% 86.8%, 7.5% 87.5%, 8.8% 88.2%, 10.1% 88.9%, 11.5% 89.5%, 12.9% 90.1%, 14.3% 90.6%, 15.7% 91.1%, 17.2% 91.6%, 18.7% 92%, 20.1% 92.5%, 21.6% 92.9%, 23% 93.2%, 24.4% 93.6%, 25.8% 93.9%, 27.1% 94.1%, 28.4% 94.4%, 29.6% 94.6%, 30.8% 94.8%, 31.9% 95%, 32.9% 95.2%, 33.8% 95.3%, 34.6% 95.4%, 35.3% 95.5%, 35.9% 95.6%, 36.4% 95.7%, 36.7% 95.7%, 36.9% 95.8%, 37% 95.8%, 37.1% 95.8%, 37.3% 95.9%, 37.7% 96%, 38.3% 96.1%, 38.9% 96.3%, 39.7% 96.5%, 40.7% 96.7%, 41.7% 96.9%, 42.8% 97.2%, 44.1% 97.5%, 45.4% 97.7%, 46.8% 98%, 48.3% 98.3%, 49.9% 98.5%, 51.5% 98.8%, 53.2% 99%, 54.9% 99.3%, 56.7% 99.5%, 58.5% 99.6%, 60.3% 99.8%, 62.1% 99.9%, 64% 100%, 65.8% 100%, 67.6% 100%, 69.5% 99.9%, 71.2% 99.8%, 73% 99.6%, 74.7% 99.3%, 76.4% 99%, 78.1% 98.6%, 79% 98.3%, 79.9% 98%, 80.8% 97.7%, 81.8% 97.2%, 82.8% 96.8%, 83.7% 96.3%, 84.7% 95.8%, 85.7% 95.2%, 86.7% 94.7%, 87.7% 94.1%, 88.6% 93.5%, 89.6% 92.9%, 90.5% 92.3%, 91.4% 91.7%, 92.3% 91.1%, 93.2% 90.5%, 94% 89.9%, 94.8% 89.3%, 95.5% 88.7%, 96.2% 88.2%, 96.9% 87.7%, 97.5% 87.3%, 98% 86.8%, 98.5% 86.4%, 98.9% 86.1%, 99.3% 85.8%, 99.6% 85.6%, 99.8% 85.4%, 99.9% 85.3%, 99.9% 85.3%);
  -webkit-clip-path: polygon(99.9% 6.9%, 99.8% 6.8%, 99.3% 6.7%, 98.5% 6.4%, 97.4% 6.1%, 96% 5.7%, 94.4% 5.3%, 92.5% 4.8%, 90.4% 4.3%, 88.2% 3.8%, 85.7% 3.2%, 83.1% 2.7%, 80.3% 2.2%, 77.4% 1.7%, 74.4% 1.3%, 71.2% 0.9%, 68% 0.5%, 64.8% 0.3%, 61.5% 0.1%, 58.2% 0%, 54.8% 0%, 51.5% 0.2%, 48.2% 0.5%, 45% 0.9%, 41.8% 1.4%, 38.7% 2.2%, 35.7% 3.1%, 32.8% 4.2%, 30.1% 5.5%, 27.5% 7%, 25.1% 8.8%, 24.1% 9.6%, 23.2% 10.6%, 22.5% 11.5%, 21.9% 12.5%, 21.5% 13.5%, 21.2% 14.5%, 20.9% 15.6%, 20.8% 16.7%, 20.8% 17.8%, 20.8% 18.9%, 20.9% 20%, 21.1% 21.2%, 21.3% 22.4%, 21.6% 23.6%, 21.9% 24.8%, 22.2% 26.1%, 22.5% 27.3%, 22.8% 28.6%, 23.1% 29.9%, 23.4% 31.2%, 23.7% 32.5%, 23.9% 33.8%, 24.1% 35.1%, 24.2% 36.4%, 24.3% 37.8%, 24.2% 39.1%, 24.1% 40.4%, 23.9% 41.8%, 23.6% 43.1%, 23.2% 44.5%, 22.5% 46.2%, 21.7% 47.8%, 20.8% 49.5%, 19.7% 51.1%, 18.6% 52.7%, 17.5% 54.3%, 16.2% 55.8%, 14.9% 57.3%, 13.6% 58.8%, 12.3% 60.3%, 11% 61.7%, 9.7% 63.1%, 8.4% 64.5%, 7.2% 65.9%, 6% 67.2%, 4.9% 68.6%, 3.8% 69.9%, 2.9% 71.1%, 2.1% 72.4%, 1.3% 73.7%, 0.8% 74.9%, 0.3% 76.1%, 0.1% 77.3%, 0% 78.5%, 0.1% 79.7%, 0.4% 80.8%, 1% 82%, 1.7% 83.1%, 2.7% 84.2%, 4% 85.3%, 5.1% 86.1%, 6.3% 86.8%, 7.5% 87.5%, 8.8% 88.2%, 10.1% 88.9%, 11.5% 89.5%, 12.9% 90.1%, 14.3% 90.6%, 15.7% 91.1%, 17.2% 91.6%, 18.7% 92%, 20.1% 92.5%, 21.6% 92.9%, 23% 93.2%, 24.4% 93.6%, 25.8% 93.9%, 27.1% 94.1%, 28.4% 94.4%, 29.6% 94.6%, 30.8% 94.8%, 31.9% 95%, 32.9% 95.2%, 33.8% 95.3%, 34.6% 95.4%, 35.3% 95.5%, 35.9% 95.6%, 36.4% 95.7%, 36.7% 95.7%, 36.9% 95.8%, 37% 95.8%, 37.1% 95.8%, 37.3% 95.9%, 37.7% 96%, 38.3% 96.1%, 38.9% 96.3%, 39.7% 96.5%, 40.7% 96.7%, 41.7% 96.9%, 42.8% 97.2%, 44.1% 97.5%, 45.4% 97.7%, 46.8% 98%, 48.3% 98.3%, 49.9% 98.5%, 51.5% 98.8%, 53.2% 99%, 54.9% 99.3%, 56.7% 99.5%, 58.5% 99.6%, 60.3% 99.8%, 62.1% 99.9%, 64% 100%, 65.8% 100%, 67.6% 100%, 69.5% 99.9%, 71.2% 99.8%, 73% 99.6%, 74.7% 99.3%, 76.4% 99%, 78.1% 98.6%, 79% 98.3%, 79.9% 98%, 80.8% 97.7%, 81.8% 97.2%, 82.8% 96.8%, 83.7% 96.3%, 84.7% 95.8%, 85.7% 95.2%, 86.7% 94.7%, 87.7% 94.1%, 88.6% 93.5%, 89.6% 92.9%, 90.5% 92.3%, 91.4% 91.7%, 92.3% 91.1%, 93.2% 90.5%, 94% 89.9%, 94.8% 89.3%, 95.5% 88.7%, 96.2% 88.2%, 96.9% 87.7%, 97.5% 87.3%, 98% 86.8%, 98.5% 86.4%, 98.9% 86.1%, 99.3% 85.8%, 99.6% 85.6%, 99.8% 85.4%, 99.9% 85.3%, 99.9% 85.3%);
  padding-left: 80px;
}

.pathway-students-frame {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: polygon(99.9% 6.9%, 99.8% 6.8%, 99.3% 6.7%, 98.5% 6.4%, 97.4% 6.1%, 96% 5.7%, 94.4% 5.3%, 92.5% 4.8%, 90.4% 4.3%, 88.2% 3.8%, 85.7% 3.2%, 83.1% 2.7%, 80.3% 2.2%, 77.4% 1.7%, 74.4% 1.3%, 71.2% 0.9%, 68% 0.5%, 64.8% 0.3%, 61.5% 0.1%, 58.2% 0%, 54.8% 0%, 51.5% 0.2%, 48.2% 0.5%, 45% 0.9%, 41.8% 1.4%, 38.7% 2.2%, 35.7% 3.1%, 32.8% 4.2%, 30.1% 5.5%, 27.5% 7%, 25.1% 8.8%, 24.1% 9.6%, 23.2% 10.6%, 22.5% 11.5%, 21.9% 12.5%, 21.5% 13.5%, 21.2% 14.5%, 20.9% 15.6%, 20.8% 16.7%, 20.8% 17.8%, 20.8% 18.9%, 20.9% 20%, 21.1% 21.2%, 21.3% 22.4%, 21.6% 23.6%, 21.9% 24.8%, 22.2% 26.1%, 22.5% 27.3%, 22.8% 28.6%, 23.1% 29.9%, 23.4% 31.2%, 23.7% 32.5%, 23.9% 33.8%, 24.1% 35.1%, 24.2% 36.4%, 24.3% 37.8%, 24.2% 39.1%, 24.1% 40.4%, 23.9% 41.8%, 23.6% 43.1%, 23.2% 44.5%, 22.5% 46.2%, 21.7% 47.8%, 20.8% 49.5%, 19.7% 51.1%, 18.6% 52.7%, 17.5% 54.3%, 16.2% 55.8%, 14.9% 57.3%, 13.6% 58.8%, 12.3% 60.3%, 11% 61.7%, 9.7% 63.1%, 8.4% 64.5%, 7.2% 65.9%, 6% 67.2%, 4.9% 68.6%, 3.8% 69.9%, 2.9% 71.1%, 2.1% 72.4%, 1.3% 73.7%, 0.8% 74.9%, 0.3% 76.1%, 0.1% 77.3%, 0% 78.5%, 0.1% 79.7%, 0.4% 80.8%, 1% 82%, 1.7% 83.1%, 2.7% 84.2%, 4% 85.3%, 5.1% 86.1%, 6.3% 86.8%, 7.5% 87.5%, 8.8% 88.2%, 10.1% 88.9%, 11.5% 89.5%, 12.9% 90.1%, 14.3% 90.6%, 15.7% 91.1%, 17.2% 91.6%, 18.7% 92%, 20.1% 92.5%, 21.6% 92.9%, 23% 93.2%, 24.4% 93.6%, 25.8% 93.9%, 27.1% 94.1%, 28.4% 94.4%, 29.6% 94.6%, 30.8% 94.8%, 31.9% 95%, 32.9% 95.2%, 33.8% 95.3%, 34.6% 95.4%, 35.3% 95.5%, 35.9% 95.6%, 36.4% 95.7%, 36.7% 95.7%, 36.9% 95.8%, 37% 95.8%, 37.1% 95.8%, 37.3% 95.9%, 37.7% 96%, 38.3% 96.1%, 38.9% 96.3%, 39.7% 96.5%, 40.7% 96.7%, 41.7% 96.9%, 42.8% 97.2%, 44.1% 97.5%, 45.4% 97.7%, 46.8% 98%, 48.3% 98.3%, 49.9% 98.5%, 51.5% 98.8%, 53.2% 99%, 54.9% 99.3%, 56.7% 99.5%, 58.5% 99.6%, 60.3% 99.8%, 62.1% 99.9%, 64% 100%, 65.8% 100%, 67.6% 100%, 69.5% 99.9%, 71.2% 99.8%, 73% 99.6%, 74.7% 99.3%, 76.4% 99%, 78.1% 98.6%, 79% 98.3%, 79.9% 98%, 80.8% 97.7%, 81.8% 97.2%, 82.8% 96.8%, 83.7% 96.3%, 84.7% 95.8%, 85.7% 95.2%, 86.7% 94.7%, 87.7% 94.1%, 88.6% 93.5%, 89.6% 92.9%, 90.5% 92.3%, 91.4% 91.7%, 92.3% 91.1%, 93.2% 90.5%, 94% 89.9%, 94.8% 89.3%, 95.5% 88.7%, 96.2% 88.2%, 96.9% 87.7%, 97.5% 87.3%, 98% 86.8%, 98.5% 86.4%, 98.9% 86.1%, 99.3% 85.8%, 99.6% 85.6%, 99.8% 85.4%, 99.9% 85.3%, 99.9% 85.3%);
  -webkit-clip-path: polygon(99.9% 6.9%, 99.8% 6.8%, 99.3% 6.7%, 98.5% 6.4%, 97.4% 6.1%, 96% 5.7%, 94.4% 5.3%, 92.5% 4.8%, 90.4% 4.3%, 88.2% 3.8%, 85.7% 3.2%, 83.1% 2.7%, 80.3% 2.2%, 77.4% 1.7%, 74.4% 1.3%, 71.2% 0.9%, 68% 0.5%, 64.8% 0.3%, 61.5% 0.1%, 58.2% 0%, 54.8% 0%, 51.5% 0.2%, 48.2% 0.5%, 45% 0.9%, 41.8% 1.4%, 38.7% 2.2%, 35.7% 3.1%, 32.8% 4.2%, 30.1% 5.5%, 27.5% 7%, 25.1% 8.8%, 24.1% 9.6%, 23.2% 10.6%, 22.5% 11.5%, 21.9% 12.5%, 21.5% 13.5%, 21.2% 14.5%, 20.9% 15.6%, 20.8% 16.7%, 20.8% 17.8%, 20.8% 18.9%, 20.9% 20%, 21.1% 21.2%, 21.3% 22.4%, 21.6% 23.6%, 21.9% 24.8%, 22.2% 26.1%, 22.5% 27.3%, 22.8% 28.6%, 23.1% 29.9%, 23.4% 31.2%, 23.7% 32.5%, 23.9% 33.8%, 24.1% 35.1%, 24.2% 36.4%, 24.3% 37.8%, 24.2% 39.1%, 24.1% 40.4%, 23.9% 41.8%, 23.6% 43.1%, 23.2% 44.5%, 22.5% 46.2%, 21.7% 47.8%, 20.8% 49.5%, 19.7% 51.1%, 18.6% 52.7%, 17.5% 54.3%, 16.2% 55.8%, 14.9% 57.3%, 13.6% 58.8%, 12.3% 60.3%, 11% 61.7%, 9.7% 63.1%, 8.4% 64.5%, 7.2% 65.9%, 6% 67.2%, 4.9% 68.6%, 3.8% 69.9%, 2.9% 71.1%, 2.1% 72.4%, 1.3% 73.7%, 0.8% 74.9%, 0.3% 76.1%, 0.1% 77.3%, 0% 78.5%, 0.1% 79.7%, 0.4% 80.8%, 1% 82%, 1.7% 83.1%, 2.7% 84.2%, 4% 85.3%, 5.1% 86.1%, 6.3% 86.8%, 7.5% 87.5%, 8.8% 88.2%, 10.1% 88.9%, 11.5% 89.5%, 12.9% 90.1%, 14.3% 90.6%, 15.7% 91.1%, 17.2% 91.6%, 18.7% 92%, 20.1% 92.5%, 21.6% 92.9%, 23% 93.2%, 24.4% 93.6%, 25.8% 93.9%, 27.1% 94.1%, 28.4% 94.4%, 29.6% 94.6%, 30.8% 94.8%, 31.9% 95%, 32.9% 95.2%, 33.8% 95.3%, 34.6% 95.4%, 35.3% 95.5%, 35.9% 95.6%, 36.4% 95.7%, 36.7% 95.7%, 36.9% 95.8%, 37% 95.8%, 37.1% 95.8%, 37.3% 95.9%, 37.7% 96%, 38.3% 96.1%, 38.9% 96.3%, 39.7% 96.5%, 40.7% 96.7%, 41.7% 96.9%, 42.8% 97.2%, 44.1% 97.5%, 45.4% 97.7%, 46.8% 98%, 48.3% 98.3%, 49.9% 98.5%, 51.5% 98.8%, 53.2% 99%, 54.9% 99.3%, 56.7% 99.5%, 58.5% 99.6%, 60.3% 99.8%, 62.1% 99.9%, 64% 100%, 65.8% 100%, 67.6% 100%, 69.5% 99.9%, 71.2% 99.8%, 73% 99.6%, 74.7% 99.3%, 76.4% 99%, 78.1% 98.6%, 79% 98.3%, 79.9% 98%, 80.8% 97.7%, 81.8% 97.2%, 82.8% 96.8%, 83.7% 96.3%, 84.7% 95.8%, 85.7% 95.2%, 86.7% 94.7%, 87.7% 94.1%, 88.6% 93.5%, 89.6% 92.9%, 90.5% 92.3%, 91.4% 91.7%, 92.3% 91.1%, 93.2% 90.5%, 94% 89.9%, 94.8% 89.3%, 95.5% 88.7%, 96.2% 88.2%, 96.9% 87.7%, 97.5% 87.3%, 98% 86.8%, 98.5% 86.4%, 98.9% 86.1%, 99.3% 85.8%, 99.6% 85.6%, 99.8% 85.4%, 99.9% 85.3%, 99.9% 85.3%);
}

.pathway-students-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   8. THE DIFFERENCE WE MAKE SECTION (.difference-section)
   ========================================================================== */
.difference-section {
  padding: 7.5rem 0 9.5rem 0;
  background: #FFFFFF;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Header Area */
.difference-header-wrap {
  position: relative;
  margin-bottom: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.difference-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.difference-dragonfly {
  position: absolute;
  top: -5px;
  left: -110px;
  width: 116px;
  height: 127px;
  z-index: 4;
  pointer-events: none;
  animation: diffDragonflyHover 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 10px rgba(66, 34, 126, 0.12));
  rotate: 54deg;
}

.diff-dragonfly-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.difference-dragonfly svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes diffDragonflyHover {
  0% {
    transform: rotate(20deg) translateY(0px);
  }

  100% {
    transform: rotate(14deg) translateY(-8px);
  }
}

.difference-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 22px;
  border: 1px solid #8461C6;
  border-radius: 28px;
  background: transparent;
  color: #673FB2;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 18px;
}

.difference-title {
  font-family: 'Fraunces', serif;
  font-size: 3.375rem;
  /* 54px in Figma */
  font-weight: 600;
  color: #42227E;
  margin: 0.5rem 0 1rem 0;
  line-height: 52px;
  position: relative;
  display: inline-block;
  text-align: center;
}

.difference-title-base {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.difference-title-base::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 14px;
  background-color: #DFD0FA;
  border-radius: 4px;
  z-index: -1;
}

.difference-title-accent {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  color: #42AFC3;
  margin-left: 8px;
}

.difference-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1875rem;
  /* 19px in Figma */
  font-weight: 600;
  color: #1C0D37;
  max-width: 780px;
  margin: 0 auto;
  line-height: 27px;
  text-align: center;
}

/* Right Looping Ribbon Vector - Outside container bleeding to right edge */
.difference-line-vector {
  position: absolute;
  bottom: -55px;
  right: 0;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* 4 Staggered Benefit Cards */
.difference-cards-row {
  position: relative;
  z-index: 2;
}

.difference-card {
  background: #FFFFFF;
  border-radius: 65px 0 65px 0;
  padding: 2.8rem 1.5rem 2.5rem 1.5rem;
  box-shadow: 0px 14px 34px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(132, 97, 198, 0.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  height: 100%;
  min-height: 350px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.difference-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(66, 34, 126, 0.16);
}

.difference-card.card-offset-down {
  margin-top: 95px;
}

/* Background Dots attached via ::after on difference cards */
.diff-card-1::after,
.diff-card-2::after,
.diff-card-3::after,
.diff-card-4::after {
  content: '';
  position: absolute;
  width: 115px;
  height: 115px;
  background-image: url('../img/why-choose-dots.png');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: -1;
  opacity: 0.9;
}

/* Card 1: Top-Right Dots (between Card 1 & Card 2) */
.diff-card-1::after {
  top: -45px;
  right: -55px;
}

/* Card 2: Bottom-Left Dots (under Card 2) */
.diff-card-2::after {
  bottom: -55px;
  left: -50px;
}

/* Card 3: Top-Right Dots (between Card 3 & Card 4) */
.diff-card-3::after {
  top: -45px;
  right: -55px;
}

/* Card 4: Bottom-Left Dots (under Card 4) */
.diff-card-4::after {
  bottom: -55px;
  left: -50px;
}

/* Icon Double Halo */
.difference-icon-halo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.8rem;
}

.difference-icon-circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.difference-card:hover .difference-icon-circle {
  transform: scale(1.06);
}

.difference-icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Purple Icon Theme */
.diff-card-purple .difference-icon-halo {
  background: rgba(132, 97, 198, 0.2);
}

.diff-card-purple .difference-icon-circle {
  background: #8461C6;
}

/* Teal Icon Theme */
.diff-card-teal .difference-icon-halo {
  background: rgba(66, 175, 195, 0.2);
}

.diff-card-teal .difference-icon-circle {
  background: #42AFC3;
}

.difference-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  /* 24px in Figma */
  font-weight: 600;
  color: #000000;
  margin-bottom: 0.85rem;
  line-height: 25px;
}

.difference-card-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 400;
  color: #110E16;
  line-height: 27px;
  margin: 0;
}

@media (max-width: 1199px) {
  .difference-card.card-offset-down {
    margin-top: 50px;
  }
}

@media (max-width: 991px) {
  .difference-card.card-offset-down {
    margin-top: 0;
  }

  .diff-card-1::after,
  .diff-card-2::after,
  .diff-card-3::after,
  .diff-card-4::after,
  .difference-line-vector {
    display: none;
  }

  .difference-title {
    font-size: 36px;
  }
}

/* ==========================================================================
   9. STRONGER TOGETHER SECTION (.stronger-together-section)
   ========================================================================== */
.stronger-together-section {
  background: #F1EAFF;
  position: relative;
  width: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 9.5rem 0;
  overflow: hidden;
}

/* Left Bleeding Image Visual with Smooth Right Edge Gradient Mask */
.stronger-visual-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 52vw;
  max-width: 1000px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.stronger-students-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
  -webkit-mask-image: linear-gradient(to right, #000 68%, transparent 100%);
  mask-image: linear-gradient(to right, #000 68%, transparent 100%);
}

.stronger-together-section .row {
  justify-content: flex-end;
}

.stronger-content-col {
  margin-left: auto !important;
  position: relative;
  z-index: 4;
}

/* Right Content Area */
.stronger-content-wrap {
  position: relative;
  z-index: 4;
  padding: 1rem 0;
  max-width: 520px;
}

.stronger-badge-wrap {
  margin-bottom: 1.25rem;
}

.stronger-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 22px;
  border: 1px solid #8461C6;
  border-radius: 28px;
  background: transparent;
  color: #673FB2;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 18px;
}

.stronger-title {
  font-family: 'Fraunces', serif;
  font-size: 3.375rem;
  /* 54px in Figma */
  font-weight: 600;
  color: #42227E;
  margin: 0.5rem 0 1.25rem 0;
  line-height: 52px;
}

.stronger-title-base {
  position: relative;
  display: inline-block;
}

.stronger-title-base::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 9px;
  background-color: #DFD0FA;
  border-radius: 4px;
  z-index: -1;
}

.stronger-title-accent {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  color: #42AFC3;
  margin-left: 8px;
}

.stronger-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1875rem;
  /* 19px in Figma */
  font-weight: 600;
  color: #1C0D37;
  line-height: 27px;
  max-width: 500px;
  margin-bottom: 2.25rem;
}

/* Button */
.stronger-btn-wrap {
  display: flex;
  align-items: center;
}

.stronger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  background: #42AFC3;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  /* 20px in Figma */
  font-weight: 600;
  line-height: 14px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(66, 175, 195, 0.32);
}

.stronger-btn:hover {
  background: #3197AA;
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(66, 175, 195, 0.45);
}

/* Dragonfly Flight Path */
.stronger-dragonfly-actor-wrap {
  position: absolute;
  top: 75px;
  right: 110px;
  width: 240px;
  height: 340px;
  pointer-events: none;
  z-index: 3;
}

.stronger-dragonfly {
  position: absolute;
  top: 40px;
  left: -30px;
  width: 117px;
  height: 126px;
  animation: strongerDragonflyHover 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 10px rgba(66, 34, 126, 0.12));
  rotate: 232deg;
}

.stronger-dragonfly-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes strongerDragonflyHover {
  0% {
    transform: rotate(20deg) translateY(0px);
  }

  100% {
    transform: rotate(14deg) translateY(-8px);
  }
}

.stronger-flight-trail {
  position: absolute;
  top: 35px;
  left: 45px;
  width: 220px;
  height: 280px;
  overflow: visible;
}

/* ==========================================================================
   9. UPCOMING EVENTS SECTION (.events-section)
   ========================================================================== */
.events-section {
  padding: 100px 0 0px 0;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

.events-section .difference-header-wrap {
  margin-bottom: 2rem;
}

.events-header-wrap {
  margin-bottom: 3.5rem;
}

.events-badge-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.events-dragonfly {
  position: absolute;
  top: -46px;
  left: -48px;
  width: 105px;
  height: 105px;
  pointer-events: none;
  z-index: 4;
  animation: diffDragonflyHover 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 10px rgba(66, 34, 126, 0.12));
  rotate: 232deg;
}

.events-dragonfly .dragonfly-actor-img,
.events-dragonfly .dragonfly-svg-unified {
  width: 100%;
  height: 100%;
  display: block;
}

.events-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 22px;
  border: 1px solid #8461C6;
  border-radius: 28px;
  background: transparent;
  color: #673FB2;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 18px;
}

.events-title {
  font-family: 'Fraunces', serif;
  font-size: 3.375rem;
  /* 54px in Figma */
  font-weight: 600;
  color: #42227E;
  margin: 0.5rem 0 1rem 0;
  line-height: 52px;
  position: relative;
  display: inline-block;
  text-align: center;
}

.events-title-base {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.events-title-base::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 14px;
  background-color: #DFD0FA;
  border-radius: 4px;
  z-index: -1;
}

.events-title-accent {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  color: #42AFC3;
  margin-left: 8px;
}

.events-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1875rem;
  /* 19px in Figma */
  font-weight: 600;
  color: #1C0D37;
  max-width: 760px;
  margin: 0 auto;
  line-height: 27px;
  text-align: center;
}

/* Slider Container & Track */
.events-slider-container {
  position: relative;
  padding: 0 10px;
  margin-bottom: 1.5rem;
}

/* Slick Slider Core Styles */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

.slick-slide img {
  display: block;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.events-slider {
  margin: 0 -12px;
}

.event-slide-item {
  padding: 10px 12px 24px 12px;
  outline: none;
  box-sizing: border-box;
}

.event-card {
  background: #FFFFFF;
  overflow: hidden;
  padding: 12px 12px 18px 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 410px;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 19px;
  box-shadow: 0 7px 12px 0 rgba(0, 0, 0, 0.15);
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(132, 97, 198, 0.14);
  border-color: rgba(132, 97, 198, 0.28);
}

.event-card-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  background-color: #EDE8F5;
}

.event-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.event-card:hover .event-card-img {
  transform: scale(1.05);
}

.event-badge-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #EFEFEF;
  border: 1px solid #DBD4EA;
  color: #433F4A;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 17px;
  padding: 4px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.event-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 4px;
}

.event-card-date {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #8461C6;
  line-height: 17px;
  margin-bottom: 8px;
}

.event-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #000000;
  line-height: 25px;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-card-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #42AFC3;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 14px;
  margin-bottom: 18px;
  transition: all 0.25s ease;
}

.event-card-link:hover {
  color: #2b889b;
  transform: translateX(3px);
}

.event-card-schedule {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: #EFEFEF;
  border: 1px solid #DBD4EA;
  color: #433F4A;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  /* 15px in Figma */
  font-weight: 600;
  line-height: 17px;
  padding: 6px 14px;
  border-radius: 10px;
  margin-top: auto;
}

/* Slider Custom Arrows */
.events-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #EEEEEE;
  color: #5B487A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.events-slider-arrow:hover {
  background: #42AFC3;
  color: #FFFFFF;
  border-color: #42AFC3;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 22px rgba(66, 175, 195, 0.45);
}

.events-slider-prev {
  left: -24px;
}

.events-slider-next {
  right: -24px;
}

@media (max-width: 991px) {
  .events-slider-prev {
    left: -10px;
  }

  .events-slider-next {
    right: -10px;
  }
}

@media (max-width: 576px) {
  .events-title {
    font-size: 32px;
  }

  .events-slider-arrow {
    width: 38px;
    height: 38px;
  }

  .events-slider-prev {
    left: 0px;
  }

  .events-slider-next {
    right: 0px;
  }
}

/* --- Events Section: Coming Soon State --- */
.comming-soon {
  position: relative;
  max-width: 680px;
  margin: 1.5rem auto 0 auto;
  padding: 2.75rem 2.25rem 2.5rem 2.25rem;
  background: #FAF8FD;
  border: 1.5px dashed rgba(132, 97, 198, 0.32);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(66, 34, 126, 0.04);
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 40px;
}

.comming-soon:hover {
  transform: translateY(-3px);
  border-color: #42AFC3;
  box-shadow: 0 12px 30px rgba(66, 175, 195, 0.12);
}

/* Central soft glow */
.comming-soon-glow {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 180px;
  background: radial-gradient(ellipse at center, rgba(214, 192, 255, 0.22) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}

/* SVG Graphic Container */
.comming-soon-graphic {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 1.25rem;
  animation: csFloatAnim 4.5s ease-in-out infinite alternate;
}

.comming-soon-graphic svg {
  display: block;
  width: 175px;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 8px 18px rgba(66, 34, 126, 0.1));
}

/* Graphic Micro-animations */
.cs-star-pulse {
  transform-origin: center;
  animation: csTwinkle 3s ease-in-out infinite alternate;
}

.cs-star-pulse-delayed {
  transform-origin: center;
  animation: csTwinkle 3s ease-in-out infinite alternate 1.5s;
}

.cs-clock-badge {
  transform-origin: 178px 38px;
  animation: csBadgeBounce 4s ease-in-out infinite alternate;
}

/* Headings */
.comming-soon-title {
  position: relative;
  z-index: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  color: #42227E;
  line-height: 1.3;
  margin: 0 0 0.65rem 0;
}

.comming-soon-accent {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: #42AFC3;
  position: relative;
  display: inline-block;
}

.comming-soon-accent::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 6px;
  background: #D5F9FF;
  border-radius: 3px;
  z-index: -1;
  opacity: 0.85;
}

/* Description Text */
.comming-soon-desc {
  position: relative;
  z-index: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: #574F6B;
  max-width: 520px;
  margin: 0 auto;
}

/* Keyframes */
@keyframes csFloatAnim {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-8px);
  }
}

@keyframes csPulseEffect {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(66, 175, 195, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(66, 175, 195, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(66, 175, 195, 0);
  }
}

@keyframes csTwinkle {
  0% {
    transform: scale(0.85) rotate(0deg);
    opacity: 0.75;
  }

  100% {
    transform: scale(1.18) rotate(18deg);
    opacity: 1;
  }
}

@keyframes csBadgeBounce {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-4px) rotate(4deg);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .comming-soon {
    padding: 2.75rem 1.5rem 2.25rem 1.5rem;
    border-radius: 24px;
  }

  .comming-soon-graphic svg {
    width: 190px;
  }

  .comming-soon-title {
    font-size: 1.625rem;
  }

  .comming-soon-desc {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
  }

  .cs-tag {
    font-size: 0.8125rem;
    padding: 6px 13px;
  }
}

@media (max-width: 480px) {
  .comming-soon {
    padding: 2.25rem 1.125rem 1.75rem 1.125rem;
  }

  .comming-soon-title {
    font-size: 1.45rem;
  }

  .comming-soon-tags {
    gap: 7px;
  }
}

/* ==========================================================================
   10. HELPFUL RESOURCES SECTION (.resources-section) (.resources-section)
   ========================================================================== */
.resources-section {
  padding: 85px 0 0px 0;
  background-color: #FFFFFF;
  position: relative;
  overflow: visible;
}

.resources-flight-trail {
  position: absolute;
  top: -10px;
  left: 0;
  width: auto;
  pointer-events: none;
  z-index: 9;
}

.resources-flight-trail svg {
  width: 100%;
  height: auto;
  display: block;
}

.resources-banner {
  background: #F8F5FE;
  border-radius: 36px;
  padding: 4.25rem 3.5rem;
  position: relative;
  z-index: 2;
}

.resources-dragonfly {
  position: absolute;
  top: auto;
  left: auto;
  bottom: 99px;
  right: -57px;
  width: 105px;
  height: 105px;
  pointer-events: none;
  z-index: 5;
  animation: diffDragonflyHover 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 10px rgba(66, 34, 126, 0.12));
  rotate: 108deg;
}

.resources-dragonfly .dragonfly-actor-img,
.resources-dragonfly .dragonfly-svg-unified {
  width: 100%;
  height: 100%;
  display: block;
}

.resources-badge-wrap {
  margin-bottom: 1.25rem;
}

.resources-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 22px;
  border: 1px solid #8461C6;
  border-radius: 28px;
  background: transparent;
  color: #673FB2;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 18px;
}

.resources-title {
  font-family: 'Fraunces', serif;
  font-size: 3.375rem;
  /* 54px in Figma */
  font-weight: 600;
  color: #42227E;
  margin: 0.5rem 0 1.25rem 0;
  line-height: 52px;
}

.resources-title-base {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.resources-title-base::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 12px;
  background-color: #DFD0FA;
  border-radius: 4px;
  z-index: -1;
}

.resources-title-accent {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  color: #42AFC3;
  margin-left: 6px;
}

.resources-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1875rem;
  /* 19px in Figma */
  font-weight: 600;
  color: #1C0D37;
  line-height: 27px;
  margin-bottom: 2rem;
  max-width: 320px;
}

/* 3 Resource Item Columns */
.resource-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.resource-item-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1.2rem;
}

.resource-icon-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.resource-item-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  /* 24px in Figma */
  font-weight: 600;
  color: #000000;
  line-height: 29px;
  margin-bottom: 0.75rem;
}

.resource-item-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 400;
  color: #110E16;
  line-height: 27px;
  margin-bottom: 1.25rem;
}

.resource-item-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 600;
  color: #42AFC3;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 14px;
  transition: all 0.25s ease;
  margin-top: auto;
}

.resource-item-link:hover {
  color: #2b889b;
  transform: translateX(4px);
}

@media (max-width: 1199px) {
  .resources-title {
    font-size: 40px;
  }
}

@media (max-width: 991px) {
  .resources-banner {
    padding: 3rem 2rem;
  }

  .resources-dragonfly {
    left: 80px;
  }

  .resources-desc {
    max-width: 100%;
  }
}

/* ==========================================================================
   12. FAQ SECTION (.faq-section)
   ========================================================================== */
.faq-section {
  padding: 6rem 0 0 0;
  background: #FFFFFF;
  position: relative;
  z-index: 2;
}

/* Sparkle star top-right */
.faq-sparkle-star {
  position: absolute;
  top: 22%;
  right: 5%;
  pointer-events: none;
  left: auto;
  animation: rotate 20s linear infinite;
}

/* Left lavender circle decoration */
.faq-deco-circle {
  position: absolute;
  left: auto;
  top: 50%;
  transform: translateY(12%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #DDD0F5;
  pointer-events: none;
  z-index: 0;
  margin-left: -5%;
}

/* ── Header wrapper ── */
.faq-header-wrap {
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Badge on its own line */
.faq-header-wrap>.section-tag {
  display: flex;
  width: fit-content;
  margin: 0 auto 0.5rem auto;
}

/* Heading block — relative container for dragonfly */
.faq-heading-block {
  position: relative;
  display: inline-block;
  text-align: center;
}

/* Dragonfly — upper-left of heading text */
.faq-section .faq-dragonfly {
  position: absolute;
  left: -87px;
  top: -52px;
  width: 117px;
  height: 127px;
  pointer-events: none;
  animation: diffDragonflyHover 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 10px rgba(66, 34, 126, 0.14));
  rotate: 110deg;
}

/* Heading */
.faq-heading-block .section-title {
  text-align: center;
}

.faq-heading-block .section-title .title-prefix {
  position: relative;
  display: inline-block;
  color: #42227E;
  z-index: 1;
}

.faq-heading-block .section-title .highlight-bar {
  position: absolute;
  left: 0;
  right: -4px;
  bottom: 4px;
  height: 12px;
  background-color: #DFD0FA;
  border-radius: 3px;
  z-index: -1;
}

/* Subtitle */
.faq-subtitle {
  max-width: 700px;
  text-align: center;
  margin: 0.75rem auto 0 auto;
}

/* ── Accordion ── */
.faq-accordion {
  width: 100%;
  margin: 0 auto;
}

/* FAQ Item — closed */
.faq-item {
  margin-bottom: 0.85rem;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
  border-radius: 18px;
  border: 2px solid #8461C6;
  background: #F8F8F8;
}

/* FAQ header row */
.faq-header {
  padding: 1.1rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
}

/* Question text */
.faq-question {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  /* 20px in Figma */
  font-weight: 700;
  color: #8461C6;
  margin-bottom: 0;
  line-height: 25px;
  flex: 1;
}

/* Toggle — plain text, NO circle */
.faq-toggle-icon {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 400;
  color: #8461C6;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

/* Active (open) — purple bg */
.faq-item.active {
  border-color: #8461C6;
}

/* Body collapse */
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-body-inner {
  margin: 0 1rem 1rem 1rem;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 500;
  color: #FFFFFF;
  line-height: 30px;
  border-radius: 18px;
  border: 2px solid #8461C6;
  background: #8461C6;
}

.faq-item.active .faq-body {
  max-height: 300px;
}

/* Bottom dragonfly + dotted path decoration */
.faq-bottom-deco {
  position: relative;
  width: 100vw;
  left: 0;
  transform: unset;
  height: auto;
  margin-top: -18rem;
  overflow: visible;
  z-index: -1;
}

.faq-bottom-path {
  position: relative;
}

.faq-section .faq-bottom-dragonfly {
  position: absolute;
  z-index: 2;
  width: 115px;
  height: 98px;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(66, 34, 126, 0.18));
  left: 0;
  top: 0;
  transform-origin: 50% 30%;
  will-change: transform;
}

/* Responsive */
@media (max-width: 991px) {
  .faq-deco-circle {
    display: none;
  }

  .faq-section .title-accent-bar {
    width: 300px;
  }
}

@media (max-width: 576px) {
  .faq-section .title-accent-bar {
    width: 100%;
  }

  .faq-header {
    padding: 1rem 1.25rem;
  }
}

/* ==========================================================================
   13. INVOLVEMENT / CTA SECTION (.involvement-section)
   ========================================================================== */
.involvement-section {
  padding: 0rem 0 0 0;
  background: #FFFFFF;
  position: relative;
  z-index: 1;
}

.involvement-card {
  padding: 2rem 1.8rem;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0 18px;
  background: #F9F5FF;
}

.involvement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(132, 97, 198, 0.12);
}

.involvement-card-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.involvement-icon-wrap {
  width: 83.291px;
  height: 83.291px;
  border-radius: 50%;
  background: #8461C6;
  box-shadow: 0 0 0 3px #bfafdd6b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.involvement-icon-wrap img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.involvement-card-content {
  flex: 1;
}

.involvement-card .card-title {
  font-size: 1.5rem;
  /* 24px in Figma */
  font-weight: 600;
  margin-bottom: 0.2rem;
  color: #000000;
  line-height: 29px;
}

.involvement-card p {
  font-size: 1.125rem;
  /* 18px in Figma */
  color: #110E16;
  font-weight: 500;
  margin-bottom: 0.85rem;
  line-height: 27px;
}

.involvement-card .link-more {
  font-size: 1.125rem;
  /* 18px in Figma */
  color: #42AFC3;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 14px;
  transition: opacity 0.2s ease;
}

.involvement-card .link-more .link-text {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.involvement-card .link-more .link-arrow {
  text-decoration: none;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
}

.involvement-card .link-more:hover {
  color: #3197AA;
  opacity: 0.85;
}

.involvement-card:hover .link-arrow {
  transform: translateX(4px);
}

.involvement-deco-ribbon {
  position: absolute;
  left: 0;
  top: 50px;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: -1;
  transform: rotate(7deg);
}

.involvement-students-visual {
  margin-top: -4rem;
  margin-bottom: -16rem;
  text-align: center;
  position: relative;
  z-index: -3;
}

.involvement-students-visual img {
  width: 100%;
  margin: 0 auto;
  display: block;
}

/* ==========================================================================
   14. SITE FOOTER (.site-footer)
   ========================================================================== */
.site-footer {
  background: #8461C6;
  padding-top: 3rem;
  position: relative;
  width: 100%;
  clip-path: polygon(0% 100%, 100% 100%, 100% 30%, 99.9% 30%, 99.7% 29.9%, 99.4% 29.9%, 98.9% 29.9%, 98.4% 29.8%, 97.7% 29.8%, 96.9% 29.7%, 96% 29.6%, 95.1% 29.6%, 94% 29.5%, 92.9% 29.4%, 91.7% 29.3%, 90.4% 29.1%, 89.1% 29%, 87.8% 28.9%, 86.3% 28.7%, 84.9% 28.6%, 83.4% 28.4%, 81.9% 28.2%, 80.4% 28%, 78.8% 27.8%, 77.3% 27.6%, 75.7% 27.4%, 74.2% 27.2%, 72.6% 27%, 71.1% 26.7%, 69.6% 26.5%, 68.2% 26.2%, 66.8% 25.9%, 65.4% 25.7%, 63.7% 25.2%, 62.1% 24.7%, 60.6% 23.9%, 59% 23.1%, 57.6% 22.2%, 56.1% 21.1%, 54.7% 20%, 53.3% 18.8%, 51.9% 17.5%, 50.6% 16.2%, 49.3% 14.9%, 47.9% 13.6%, 46.6% 12.2%, 45.3% 10.9%, 44.1% 9.5%, 42.8% 8.3%, 41.5% 7%, 40.2% 5.8%, 38.9% 4.7%, 37.5% 3.7%, 36.2% 2.8%, 34.8% 1.9%, 33.4% 1.3%, 32% 0.7%, 30.6% 0.3%, 29.1% 0.1%, 27.6% 0%, 26% 0.1%, 24.5% 0.5%, 22.8% 1%, 21.9% 1.4%, 20.9% 1.9%, 19.9% 2.5%, 18.9% 3.1%, 17.9% 3.8%, 16.9% 4.5%, 15.8% 5.3%, 14.8% 6.1%, 13.8% 7%, 12.8% 7.9%, 11.8% 8.8%, 10.8% 9.8%, 9.8% 10.7%, 8.8% 11.6%, 7.9% 12.6%, 7% 13.5%, 6.2% 14.4%, 5.4% 15.3%, 4.6% 16.1%, 3.9% 16.9%, 3.2% 17.7%, 2.5% 18.4%, 2% 19%, 1.5% 19.6%, 1% 20.1%, 0.7% 20.6%, 0.4% 20.9%, 0.2% 21.2%, 0% 21.3%, 0% 21.4%);
  z-index: 1;
}

.footer-wave {
  background: #F1EAFF;
  padding-top: 16rem;
  padding-bottom: 4rem;
  clip-path: polygon(0% 102%, 100% 102%, 100% 22.3%, 99.9% 22.3%, 99.7% 22.3%, 99.4% 22.3%, 98.9% 22.4%, 98.4% 22.5%, 97.7% 22.5%, 96.9% 22.6%, 96% 22.7%, 95.1% 22.8%, 94% 22.9%, 92.9% 23%, 91.7% 23.1%, 90.4% 23.2%, 89.1% 23.3%, 87.8% 23.4%, 86.3% 23.4%, 84.9% 23.5%, 83.4% 23.5%, 81.9% 23.6%, 80.4% 23.6%, 78.8% 23.6%, 77.3% 23.5%, 75.7% 23.5%, 74.2% 23.4%, 72.6% 23.3%, 71.1% 23.2%, 69.6% 23%, 68.2% 22.8%, 66.8% 22.5%, 65.4% 22.3%, 63.7% 21.8%, 62.1% 21.3%, 60.6% 20.6%, 59% 19.8%, 57.6% 19%, 56.1% 18%, 54.7% 17%, 53.3% 15.9%, 51.9% 14.8%, 50.6% 13.7%, 49.3% 12.5%, 47.9% 11.3%, 46.6% 10.1%, 45.3% 9%, 44.1% 7.8%, 42.8% 6.7%, 41.5% 5.6%, 40.2% 4.6%, 38.9% 3.7%, 37.5% 2.8%, 36.2% 2.1%, 34.8% 1.4%, 33.4% 0.8%, 32% 0.4%, 30.6% 0.1%, 29.1% 0%, 27.6% 0%, 26% 0.2%, 24.5% 0.6%, 22.8% 1.2%, 21.9% 1.6%, 20.9% 2.1%, 19.9% 2.7%, 18.9% 3.4%, 17.9% 4.1%, 16.9% 4.8%, 15.8% 5.7%, 14.8% 6.5%, 13.8% 7.4%, 12.8% 8.3%, 11.8% 9.3%, 10.8% 10.2%, 9.8% 11.2%, 8.8% 12.2%, 7.9% 13.1%, 7% 14.1%, 6.2% 15%, 5.4% 15.9%, 4.6% 16.8%, 3.9% 17.6%, 3.2% 18.4%, 2.5% 19.2%, 2% 19.8%, 1.5% 20.4%, 1% 21%, 0.7% 21.4%, 0.4% 21.8%, 0.2% 22%, 0% 22.2%, 0% 22.3%);
}

.footer-logo-img {
  max-width: 130px;
  height: auto;
}

.footer-brand {
  margin-bottom: 0.5rem;
}

.footer-desc {
  font-size: 1.125rem;
  /* 18px in Figma */
  line-height: 27px;
  margin-top: 1rem;
  max-width: 270px;
  color: #110E16;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.4rem;
}

.footer-social-icon {
  width: 28px;
  height: 28px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-social-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.footer-social-icon:hover {
  transform: translateY(-2px);
  opacity: 0.75;
}

.footer-col-title {
  font-size: 1.25rem;
  /* 20px in Figma */
  font-weight: 700;
  color: #000000;
  line-height: 29px;
  margin-bottom: 1.4rem;
  position: relative;
  display: inline-block;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  background: #C4AEEE;
  width: 73.805px;
  height: 7.247px;
  border-radius: 3px;
  z-index: -1;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.65rem;
  font-size: 1.125rem;
  /* 18px in Figma */
  color: #373240;
  line-height: 26px;
}

.footer-links a {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  /* 18px in Figma */
  color: #373240;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  line-height: 26px;
  display: inline-block;
}

.footer-links a:hover {
  color: #8461C6;
  transform: translateX(3px);
}

/* Footer decorative elements */
.footer-deco-circle {
  display: none;
}

.footer-dragonfly {
  position: absolute;
  top: 69%;
  bottom: auto !important;
  left: auto !important;
  width: 125px;
  height: 125px;
  pointer-events: none;
  animation: diffDragonflyHover 4.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 16px rgba(66, 34, 126, 0.22));
  z-index: 10;
  rotate: 263deg;
  right: 8%;
}

.footer-bottom-bar {
  background-color: #673FB2;
  border-radius: 20px;
  padding: 1rem 2.4rem;
  margin-top: 3.5rem;
  margin-bottom: 0;
  color: #FFFFFF;
  font-size: 1.125rem;
  /* 18px in Figma */
  width: 100%;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-bottom-inner p {
  color: #FFFFFF;
  font-size: 1.125rem;
  /* 18px in Figma */
  font-weight: 500;
  line-height: 27px;
  margin: 0;
}

.footer-bottom-inner a {
  color: #F6972A;
  font-size: 1.125rem;
  /* 18px in Figma */
  text-decoration: underline;
  text-underline-position: from-font;
  font-weight: 600;
  line-height: 27px;
  transition: opacity 0.2s ease;
}

.footer-bottom-inner a:hover {
  opacity: 0.85;
}

.footer-bottom-inner a:hover {
  text-decoration: underline;
  opacity: 0.9;
}

/* ==========================================================================
   OFFCANVAS MOBILE NAVIGATION & BACKDROP
   ========================================================================== */
.offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 14, 22, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 1040;
}

.offcanvas-overlay.active {
  opacity: 1;
  visibility: visible;
}

body.offcanvas-open {
  overflow: hidden;
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: #F4EEFD;
  border: 1.5px solid #DFCEFF;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  gap: 5px;
  transition: all 0.25s ease;
  z-index: 1001;
}

.mobile-toggle:hover {
  background: #EBE4F7;
  transform: scale(1.04);
}

.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  background-color: var(--color-primary-purple, #6E44BA);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-toggle.open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.mobile-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.mobile-toggle.open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ==========================================================================
   Meet Vina Page
   ========================================================================== */
.meet-vina-hero {
  .hero-shape {
    background-size: contain;
    background-position: right;
  }

  .hero-shape::after {
    background: linear-gradient(88deg, #F1EAFF 45.46%, rgba(221, 202, 255, 0.00) 76.45%);
  }
  .vina-deficiency-flight-trail-wrap {
    top: unset;
    left: 0;
    width: 190px;
    height: 140px;
    pointer-events: none;
    z-index: 5;
    bottom: 12%;
}
.deficiency-trail-dragonfly {
    top: -25px;
    left: auto !important;
    right: -86px;
    width: 115px;
    height: 98px;
}
}

.meet-vina-story {
  .who-we-are-circle-img {
    object-fit: contain;
    border-radius: 0;
    position: relative;
    z-index: 2;
    box-shadow: unset;
  }

  .who-we-are-card-box {
    padding-left: 0;
  }

  .who-we-are-img-wrapper {
    max-width: fit-content;
  }

  .quote-author {
    font-family: var(--font-serif);
    color: #4B4060;
    font-family: Fraunces;
    font-size: 37px;
    font-style: italic;
    font-weight: 600;
    line-height: 32px;
    /* 86.486% */
  }
}

/* --- Journey Interactive Animation Keyframes --- */
@keyframes journeyImgBoxIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(24px) rotate(0deg);
  }

  65% {
    opacity: 1;
    transform: scale(1.01) translateY(-3px) rotate(5.1deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(4.77deg);
  }
}

@keyframes journeyBeforeCardIn {
  0% {
    opacity: 0;
    transform: scale(0.85) rotate(0deg);
  }

  70% {
    opacity: 1;
    transform: scale(1.02) rotate(-14.2deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(-12.686deg);
  }
}

@keyframes journeyIconPopIn {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }

  65% {
    opacity: 1;
    transform: scale(1.18) rotate(10deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.journey-item {
  display: none;
  position: relative;

  &.active {
    display: block;

    .img-box {
      animation: journeyImgBoxIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;

      &::before {
        animation: journeyBeforeCardIn 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) 1s both;
      }
    }

    .icon-box {
      animation: journeyIconPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
    }
  }

  .img-box {
    width: 600.055px;
    max-width: 100%;
    height: 532.458px;
    transform: rotate(4.77deg);
    border-radius: 46px;
    position: relative;
    margin-inline: auto;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 46px;
      position: relative;
      z-index: 2;
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: rotate(-12.686deg);
      border-radius: 46px;
      background: #EAE1FD;
      z-index: 1;
      opacity: 0;
    }
  }

  .icon-box {
    width: 131.793px;
    height: 131.793px;
    background: #42AFC3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 9;
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(66, 175, 195, 0.4);
    opacity: 0;

    img {
      width: auto;
      height: auto;
      object-fit: contain;
    }
  }
}

.journey-list {

  ul,
  ol {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }

  li {
    list-style-type: none;
    border-radius: 8px;
    background: transparent;
    color: #7D7F89;
    font-family: var(--font-sans);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 131.818%;
    border-right: 6px solid transparent;
    padding: 25px 16px;
    margin-bottom: 10px;
    border-bottom: 1px dotted #D2D2D2;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    counter-increment: number-step;
    position: relative;
    padding-left: 40px;

    &::before {
      content: counter(number-step) '.';
      position: absolute;
      left: 16px;
    }

    &:hover:not(.active) {
      background: #F8F6FC;
      color: #3C1765;
      border-right: 6px solid #D6C0FF;
      transform: translateX(4px);
    }

    &.active {
      border-right: 6px solid #8461C6;
      background: #F4F4F4;
      color: #121D5E;
      border-bottom: 1px dotted transparent;
      transform: translateX(0);
    }
  }
}

.meet-vina-story {
  overflow: unset;
  .meet-vina-content {
    padding-right: 10%;
  }
}
.stats-bottom-left-path-story{
      position: absolute;
    left: 0;
    bottom: -30px;
    pointer-events: none;
}
.who-we-are-section {
    z-index: 1;
}
.vina-story-df {
  position: absolute;
  top: 180px;
  left: 848px;
  width: 127px;
  height: 117px;
  transform: rotate(96deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 4px 12px rgba(132, 97, 198, 0.25));
  z-index: 5;
}
.matters-2b2 {
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
  z-index: 1;
  position: relative;
  margin-top: -13%;

  .container {
    position: relative;
    z-index: 3;
  }

  .curve-bg {
    clip-path: polygon(0% 0%, 0.1% 0%, 0.2% 0.1%, 0.5% 0.2%, 0.8% 0.4%, 1.2% 0.6%, 1.7% 0.9%, 2.3% 1.2%, 3% 1.5%, 3.7% 1.9%, 4.5% 2.3%, 5.4% 2.7%, 6.3% 3.1%, 7.2% 3.6%, 8.2% 4%, 9.3% 4.5%, 10.3% 5%, 11.4% 5.5%, 12.6% 6%, 13.7% 6.5%, 14.9% 7%, 16.1% 7.5%, 17.3% 8%, 18.4% 8.4%, 19.6% 8.9%, 20.8% 9.3%, 22% 9.8%, 23.1% 10.2%, 24.2% 10.5%, 25.3% 10.9%, 26.4% 11.2%, 28.1% 11.6%, 29.7% 12.1%, 31.2% 12.5%, 32.8% 12.9%, 34.3% 13.2%, 35.8% 13.6%, 37.2% 13.9%, 38.6% 14.2%, 40% 14.4%, 41.4% 14.7%, 42.8% 14.9%, 44.2% 15.1%, 45.5% 15.2%, 46.8% 15.3%, 48.2% 15.4%, 49.5% 15.5%, 50.9% 15.6%, 52.2% 15.6%, 53.6% 15.5%, 54.9% 15.5%, 56.3% 15.4%, 57.7% 15.3%, 59.2% 15.2%, 60.6% 15%, 62.1% 14.8%, 63.6% 14.5%, 65.1% 14.3%, 66.7% 14%, 68.3% 13.6%, 70% 13.2%, 71.2% 12.9%, 72.5% 12.6%, 73.8% 12.2%, 75.1% 11.7%, 76.4% 11.3%, 77.7% 10.8%, 79.1% 10.3%, 80.4% 9.7%, 81.8% 9.1%, 83.1% 8.6%, 84.4% 8%, 85.7% 7.4%, 87% 6.8%, 88.3% 6.2%, 89.5% 5.6%, 90.7% 5%, 91.8% 4.4%, 92.9% 3.8%, 93.9% 3.3%, 94.9% 2.8%, 95.8% 2.3%, 96.6% 1.9%, 97.4% 1.5%, 98% 1.1%, 98.6% 0.8%, 99.1% 0.5%, 99.5% 0.3%, 99.8% 0.1%, 99.9% 0%, 100% 0%, 100% 93.7%, 99.9% 93.6%, 99.6% 93.5%, 99.2% 93.3%, 98.6% 93.1%, 97.9% 92.8%, 97% 92.4%, 95.9% 92%, 94.8% 91.6%, 93.5% 91.2%, 92% 90.7%, 90.5% 90.2%, 88.9% 89.8%, 87.2% 89.3%, 85.3% 88.9%, 83.4% 88.5%, 81.5% 88.1%, 79.4% 87.8%, 77.3% 87.5%, 75.2% 87.3%, 73% 87.1%, 70.7% 87%, 68.5% 87%, 66.2% 87.1%, 63.9% 87.3%, 61.5% 87.6%, 59.2% 88%, 56.9% 88.5%, 54.6% 89.1%, 52.3% 89.9%, 50% 90.8%, 47.8% 91.8%, 45.5% 92.7%, 43.2% 93.5%, 40.8% 94.3%, 38.5% 95%, 36.2% 95.6%, 33.9% 96.2%, 31.6% 96.8%, 29.3% 97.2%, 27.1% 97.7%, 24.9% 98%, 22.7% 98.4%, 20.6% 98.7%, 18.6% 98.9%, 16.6% 99.2%, 14.7% 99.3%, 12.9% 99.5%, 11.1% 99.6%, 9.5% 99.7%, 8% 99.8%, 6.6% 99.9%, 5.3% 99.9%, 4.1% 99.9%, 3% 99.9%, 2.1% 99.9%, 1.4% 99.9%, 0.8% 99.9%, 0.4% 99.9%, 0.1% 99.9%, 0% 99.9%);
    position: relative;
    padding-top: 13%;
    padding-bottom: 33%;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;

    &::after {
      background: linear-gradient(359deg, rgba(241, 234, 255, 0.00) 35%, #F1EAFF 55%);
      position: absolute;
      inset: 0;
      content: '';
      pointer-events: none;
      z-index: 1;
    }
  }

  .bg {
    clip-path: polygon(100% 0%, 99.9% 0%, 99.8% 0.1%, 99.5% 0.2%, 99.2% 0.4%, 98.8% 0.6%, 98.3% 0.9%, 97.7% 1.2%, 97% 1.5%, 96.3% 1.9%, 95.5% 2.3%, 94.6% 2.7%, 93.7% 3.1%, 92.8% 3.6%, 91.8% 4%, 90.7% 4.5%, 89.7% 5%, 88.6% 5.5%, 87.4% 6%, 86.3% 6.5%, 85.1% 7%, 83.9% 7.5%, 82.7% 8%, 81.6% 8.4%, 80.4% 8.9%, 79.2% 9.3%, 78% 9.8%, 76.9% 10.2%, 75.8% 10.5%, 74.7% 10.9%, 73.6% 11.2%, 71.9% 11.6%, 70.3% 12.1%, 68.8% 12.5%, 67.2% 12.9%, 65.7% 13.2%, 64.2% 13.6%, 62.8% 13.9%, 61.4% 14.2%, 60% 14.4%, 58.6% 14.7%, 57.2% 14.9%, 55.8% 15.1%, 54.5% 15.2%, 53.2% 15.3%, 51.8% 15.4%, 50.5% 15.5%, 49.1% 15.5%, 47.8% 15.6%, 46.4% 15.5%, 45.1% 15.5%, 43.7% 15.4%, 42.3% 15.3%, 40.8% 15.2%, 39.4% 15%, 37.9% 14.8%, 36.4% 14.5%, 34.9% 14.3%, 33.3% 14%, 31.7% 13.6%, 30% 13.2%, 28.8% 12.9%, 27.5% 12.6%, 26.2% 12.2%, 24.9% 11.7%, 23.6% 11.3%, 22.3% 10.8%, 20.9% 10.3%, 19.6% 9.7%, 18.2% 9.1%, 16.9% 8.6%, 15.6% 8%, 14.3% 7.4%, 13% 6.8%, 11.7% 6.2%, 10.5% 5.6%, 9.3% 5%, 8.2% 4.4%, 7.1% 3.8%, 6.1% 3.3%, 5.1% 2.8%, 4.2% 2.3%, 3.4% 1.9%, 2.6% 1.5%, 2% 1.1%, 1.4% 0.8%, 0.9% 0.5%, 0.5% 0.3%, 0.2% 0.1%, 0.1% 0%, 0% 0%, 0% 93.7%, 0.1% 93.6%, 0.4% 93.5%, 0.8% 93.3%, 1.4% 93.1%, 2.1% 92.7%, 3% 92.4%, 4.1% 92%, 5.2% 91.6%, 6.5% 91.1%, 8% 90.7%, 9.5% 90.2%, 11.1% 89.8%, 12.8% 89.3%, 14.7% 88.9%, 16.6% 88.5%, 18.5% 88.1%, 20.6% 87.8%, 22.7% 87.5%, 24.8% 87.3%, 27% 87.1%, 29.3% 87%, 31.5% 87%, 33.8% 87.1%, 36.1% 87.3%, 38.5% 87.6%, 40.8% 88%, 43.1% 88.5%, 45.4% 89.1%, 47.7% 89.9%, 50% 90.8%, 52.2% 91.8%, 54.5% 92.7%, 56.8% 93.5%, 59.2% 94.3%, 61.5% 95%, 63.8% 95.6%, 66.1% 96.2%, 68.4% 96.8%, 70.7% 97.2%, 72.9% 97.7%, 75.1% 98%, 77.3% 98.4%, 79.4% 98.7%, 81.4% 98.9%, 83.4% 99.1%, 85.3% 99.3%, 87.1% 99.5%, 88.9% 99.6%, 90.5% 99.7%, 92% 99.8%, 93.4% 99.9%, 94.7% 99.9%, 95.9% 99.9%, 97% 99.9%, 97.9% 99.9%, 98.6% 99.9%, 99.2% 99.9%, 99.6% 99.9%, 99.9% 99.9%, 100% 99.9%);
    background: #F1EAFF;
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .difference-header-wrap {
    margin-bottom: 3.5rem;
  }

  .difference-title {
    margin-bottom: 1.25rem;
  }

  .matters-cards-row {
    position: relative;
    z-index: 2;

    &::after {
      display: none !important;
    }
  }

  .matters-card {
    text-align: center;
    padding: 0.5rem 0.5rem;
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .matters-icon-halo {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: rgb(132 97 198 / 20%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }


  .matters-icon-circle {
    width: 111px;
    height: 111px;
    border-radius: 50%;
    background: #8461C6;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(132, 97, 198, 0.32);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .matters-icon-img {
    width: 54px;
    height: 54px;
    object-fit: contain;
  }

  .matters-card:hover .matters-icon-halo {
    transform: translateY(-5px);
    border-color: #42AFC3;
    background: #E0F8FC;
  }

  .matters-card:hover .matters-icon-circle {
    background: #42AFC3;
    box-shadow: 0 10px 24px rgba(66, 175, 195, 0.4);
  }

  .matters-card-title {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 700;
    color: #0F0C15;
    margin-bottom: 0.75rem;
    text-align: center;
  }

  .matters-card-desc {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 25px;
    color: #272628;
    text-align: center;
    margin: 0 auto;
    max-width: 328px;
  }
}

@media (max-width: 991px) {
  .matters-2b2 {
    .curve-bg {
      padding-top: 4rem;
      padding-bottom: 300px;
      background-size: cover;
    }

    .matters-card-title {
      font-size: 24px;
    }

    .matters-card-desc {
      font-size: 16px;
    }
  }
}

@media (max-width: 576px) {
  .matters-2b2 {
    .curve-bg {
      padding-top: 3rem;
      padding-bottom: 220px;
    }

    .matters-icon-halo {
      width: 100px;
      height: 100px;
      margin-bottom: 1rem;
    }

    .matters-icon-circle {
      width: 88px;
      height: 88px;
    }

    .matters-icon-img {
      width: 44px;
      height: 44px;
    }

    .matters-card-title {
      font-size: 22px;
    }
  }
}

.mt-4 {
  margin-top: 4rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.section-dragonfly-badge .rotate {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  transform: rotate(104deg);
}

.meet-vina-together {
  padding: 3.5rem 0;

  .stronger-dragonfly-actor-wrap {
    position: absolute;
    top: 120px;
    right: 110px;
    width: 120px;
    height: 169px;
    pointer-events: none;
    z-index: 3;
  }
}

/* ==========================================================================
   VINA DEFICIENCY QUOTE SECTION (.vina-deficiency-section)
   ========================================================================== */
.vina-deficiency-section {
  position: relative;
  background-color: #FFFFFF;
  padding: 50px 0 80px 0;
  overflow: visible;
  z-index: 2;
}

/* Top-Left Floating Flight Trail & Dragonfly */
.vina-deficiency-flight-trail-wrap {
  position: absolute;
  top: 10%;
  left: 0;
  width: 190px;
  height: 140px;
  pointer-events: none;
  z-index: 5;
}

.vina-deficiency-trail-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.deficiency-trail-dragonfly {
  position: absolute;
  top: -25px;
  left: auto !important;
  right: -20px;
  width: 78px;
  height: 78px;
  transform: rotate(72deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 4px 14px rgba(132, 97, 198, 0.35));
}

/* Card Container & Responsive Card */
.vina-deficiency-card-container {
  max-width: 1340px;
  margin: 0 auto;
}

.vina-deficiency-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1401 / 604;
  display: flex;
  align-items: center;
}

/* Desktop Graphic Background */
.vina-deficiency-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  z-index: 1;
}

/* Top-Right Teal Starburst Badge (Image 2: Column 10) */
.vina-deficiency-star-badge {
  position: absolute;
  top: 1%;
  right: 10%;
  width: 6.8%;
  min-width: 80px;
  max-width: 94px;
  z-index: 4;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  animation: rotate 5s linear infinite;
}

.vina-deficiency-star-img {
  width: 100%;
  height: auto;
  display: block;
}

.vina-deficiency-card:hover .vina-deficiency-star-badge {
  transform: rotate(18deg) scale(1.06);
}

/* Floating Decorative Hearts */
.vina-deficiency-heart {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  transition: transform 0.35s ease;
}

/* Top Heart: Column 5/6, right above line 3 */
.vina-deficiency-heart.heart-top {
  top: 22%;
  left: 39.5%;
  transform: rotate(20deg);
}

/* Bottom Heart: Column 2, far to the left of text */
.vina-deficiency-heart.heart-bottom {
  bottom: 22%;
  left: 6%;
  transform: rotate(-18deg);
}

.vina-deficiency-card:hover .vina-deficiency-heart.heart-top {
  transform: rotate(24deg) scale(1.1);
}

.vina-deficiency-card:hover .vina-deficiency-heart.heart-bottom {
  transform: rotate(-24deg) scale(1.1);
}

/* Mini Dragonfly: Column 5/6 next to 2B2 Ambassador */
.deficiency-mini-dragonfly {
  position: absolute;
  top: auto !important;
  bottom: 23%;
  left: 42.5%;
  right: auto !important;
  width: 54px;
  height: 54px;
  transform: rotate(32deg);
  transform-origin: 50% 50%;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 3px 10px rgba(132, 97, 198, 0.3));
}

.vina-deficiency-card:hover .deficiency-mini-dragonfly {
  transform: rotate(42deg) translateY(-3px) scale(1.08);
}

/* Left Content Area: Column 3 indent */
.vina-deficiency-content-wrapper {
  position: relative;
  z-index: 3;
  width: 54%;
  padding-left: 12.5%;
  padding-right: 2%;
}

.vina-deficiency-quote-mark {
  margin-bottom: 0.85rem;
  line-height: 1;
}

.vina-deficiency-quote-mark svg {
  display: block;
  width: 36px;
  height: 30px;
}

.vina-deficiency-quote {
  margin: 0 0 1.25rem 0;
  padding: 0;
  border: none;
}

.vina-deficiency-quote-line {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: #3C1765;
  font-size: clamp(1.4rem, 2.45vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin-bottom: 0.65rem;
}

.vina-deficiency-quote-line:last-child {
  margin-bottom: 0;
}

/* Author Row */
.vina-deficiency-author-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.4rem;
}

.vina-deficiency-author-name {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.15vw, 1.075rem);
  font-weight: 700;
  color: #2A0E4B;
  margin: 0 0 2px 0;
  line-height: 1.3;
}

.vina-deficiency-author-role {
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  font-weight: 600;
  color: #574F6B;
  margin: 0;
  line-height: 1.3;
}

/* How We Create Belonging - Cards (our-program page) */
.how-we-create {
  padding: 6rem 0;
  position: relative;
  background: #FFFFFF;
  counter-reset: create-step;
  padding-bottom: 0;
}

.how-we-create .difference-cards-row {
  align-items: stretch !important;
}

.how-we-create .difference-card {
  counter-increment: create-step;
  background: #F0EFF1;
  border-radius: 28px 28px 28px 0px;
  border: none;
  box-shadow: none;
  padding: 2.4rem 2rem 2.2rem 2rem;
  min-height: 270px;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.how-we-create .difference-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(66, 34, 126, 0.08);
}

.how-we-create .difference-card.card-offset-down {
  margin-top: 0 !important;
}

.how-we-create .diff-card-1::after,
.how-we-create .diff-card-2::after,
.how-we-create .diff-card-3::after,
.how-we-create .diff-card-4::after {
  display: none !important;
}

.how-we-create .difference-card::before {
    content: counter(create-step);
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 80px;
    background: #42AFC3;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 2.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0px 0 40px;
    z-index: 2;
}

.how-we-create .difference-icon-halo {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  margin-bottom: 1.5rem;
  display: inline-flex;
  position: relative;
}

.how-we-create .difference-icon-circle {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  position: relative;
  display: flex;
  align-items: center;
}

.how-we-create .difference-icon-circle::before {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ECE7F5;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}

.how-we-create .difference-icon-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.how-we-create .difference-card-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: #1C0D37;
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}

.how-we-create .difference-card-desc {
  font-family: var(--font-sans);
  font-size: 1.14rem;
  font-weight: 400;
  color: #110E16;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   PROGRAMS SLIDER SECTION (.programs-section on our-program page)
   ========================================================================== */
.featured-programs{
    position: relative;
    overflow: hidden;
    padding-bottom: 100px;
    z-index: 1;
    padding-top: 0;
}
.section-shape{
padding: 7rem 0 12rem 0;
    background: #F9F5FF;
    clip-path: polygon(101.7% 100%, 101.6% 100%, 101.5% 99.9%, 101.2% 99.8%, 100.9% 99.7%, 100.5% 99.5%, 100% 99.3%, 99.5% 99.1%, 98.8% 98.9%, 98.1% 98.6%, 97.4% 98.3%, 96.6% 98%, 95.7% 97.6%, 94.8% 97.3%, 93.8% 96.9%, 92.9% 96.5%, 91.8% 96.1%, 90.8% 95.7%, 89.7% 95.3%, 88.6% 94.9%, 87.4% 94.4%, 86.3% 94%, 85.1% 93.6%, 84% 93.2%, 82.8% 92.8%, 81.6% 92.4%, 80.5% 92%, 79.3% 91.6%, 78.2% 91.2%, 77.1% 90.9%, 76% 90.5%, 74.3% 90%, 72.7% 89.6%, 71.1% 89.2%, 69.5% 88.8%, 67.9% 88.5%, 66.4% 88.3%, 64.9% 88.1%, 63.4% 88%, 61.9% 87.9%, 60.4% 87.8%, 59% 87.8%, 57.6% 87.8%, 56.1% 87.8%, 54.7% 87.9%, 53.3% 88.1%, 51.9% 88.2%, 50.4% 88.4%, 49% 88.6%, 47.6% 88.9%, 46.1% 89.2%, 44.7% 89.5%, 43.2% 89.8%, 41.7% 90.1%, 40.2% 90.5%, 38.6% 90.9%, 37.1% 91.3%, 35.5% 91.7%, 33.8% 92.1%, 32.2% 92.5%, 30.5% 93%, 29.2% 93.3%, 28% 93.4%, 26.7% 93.5%, 25.3% 93.6%, 24% 93.5%, 22.6% 93.4%, 21.3% 93.2%, 19.9% 93%, 18.5% 92.7%, 17.2% 92.4%, 15.8% 92%, 14.5% 91.6%, 13.2% 91.2%, 11.9% 90.8%, 10.7% 90.3%, 9.5% 89.8%, 8.3% 89.4%, 7.2% 88.9%, 6.2% 88.4%, 5.2% 88%, 4.3% 87.5%, 3.4% 87.1%, 2.7% 86.7%, 2% 86.4%, 1.4% 86%, 0.9% 85.8%, 0.5% 85.6%, 0.2% 85.4%, 0.1% 85.3%, 0% 85.2%, 0% 0%, 0.1% 0%, 0.3% 0.1%, 0.6% 0.3%, 1.1% 0.5%, 1.6% 0.7%, 2.4% 1%, 3.2% 1.2%, 4.1% 1.6%, 5.2% 1.9%, 6.4% 2.3%, 7.7% 2.7%, 9.1% 3%, 10.6% 3.4%, 12.3% 3.8%, 14% 4.1%, 15.8% 4.5%, 17.7% 4.8%, 19.8% 5.1%, 21.9% 5.3%, 24.1% 5.6%, 26.4% 5.7%, 28.8% 5.9%, 31.3% 5.9%, 33.8% 6%, 36.5% 5.9%, 39.2% 5.8%, 42% 5.6%, 44.8% 5.3%, 47.8% 4.9%, 50.8% 4.5%, 53.8% 4%, 56.8% 3.7%, 59.6% 3.6%, 62.4% 3.5%, 65.1% 3.5%, 67.8% 3.6%, 70.3% 3.8%, 72.8% 4.1%, 75.2% 4.5%, 77.5% 4.9%, 79.7% 5.4%, 81.9% 6%, 83.9% 6.5%, 85.8% 7.2%, 87.6% 7.8%, 89.4% 8.4%, 91% 9.1%, 92.5% 9.8%, 93.9% 10.4%, 95.2% 11.1%, 96.4% 11.7%, 97.5% 12.3%, 98.5% 12.8%, 99.3% 13.3%, 100% 13.8%, 100.6% 14.1%, 101.1% 14.5%, 101.4% 14.7%, 101.6% 14.8%, 101.7% 14.9%);
}
.second-shape{
  clip-path: polygon(100% 100%, 100% 100%, 99.8% 99.9%, 99.6% 99.7%, 99.3% 99.4%, 98.9% 99.1%, 98.4% 98.8%, 97.8% 98.3%, 97.2% 97.9%, 96.5% 97.4%, 95.8% 96.9%, 95% 96.3%, 94.1% 95.7%, 93.2% 95.1%, 92.3% 94.4%, 91.3% 93.8%, 90.3% 93.1%, 89.3% 92.4%, 88.2% 91.7%, 87.1% 91.1%, 86% 90.4%, 84.9% 89.8%, 83.7% 89.1%, 82.6% 88.5%, 81.4% 87.9%, 80.3% 87.4%, 79.2% 86.8%, 78% 86.3%, 76.9% 85.9%, 75.9% 85.5%, 74.8% 85.2%, 73.1% 84.7%, 71.5% 84.3%, 69.9% 83.9%, 68.3% 83.7%, 66.8% 83.4%, 65.3% 83.3%, 63.8% 83.2%, 62.3% 83.1%, 60.9% 83.1%, 59.5% 83.1%, 58% 83.2%, 56.6% 83.3%, 55.2% 83.5%, 53.8% 83.7%, 52.4% 84%, 51% 84.2%, 49.6% 84.5%, 48.2% 84.8%, 46.8% 85.2%, 45.4% 85.6%, 43.9% 85.9%, 42.5% 86.3%, 41% 86.8%, 39.5% 87.2%, 38% 87.6%, 36.5% 88.1%, 34.9% 88.5%, 33.3% 88.9%, 31.7% 89.4%, 30% 89.8%, 28.8% 90.1%, 27.5% 90.1%, 26.2% 90.1%, 24.9% 89.9%, 23.6% 89.6%, 22.3% 89.3%, 20.9% 88.8%, 19.6% 88.2%, 18.2% 87.5%, 16.9% 86.8%, 15.6% 86%, 14.3% 85.2%, 13% 84.4%, 11.7% 83.5%, 10.5% 82.6%, 9.3% 81.6%, 8.2% 80.7%, 7.1% 79.8%, 6.1% 78.9%, 5.1% 78%, 4.2% 77.2%, 3.4% 76.4%, 2.6% 75.7%, 2% 75%, 1.4% 74.4%, 0.9% 73.9%, 0.5% 73.5%, 0.2% 73.2%, 0.1% 73%, 0% 73%, 0% 0%, 0.1% 0%, 0.3% 0.1%, 0.6% 0.3%, 1% 0.4%, 1.6% 0.7%, 2.3% 0.9%, 3.1% 1.2%, 4.1% 1.5%, 5.1% 1.8%, 6.3% 2.2%, 7.6% 2.5%, 9% 2.9%, 10.5% 3.3%, 12.1% 3.6%, 13.8% 4%, 15.6% 4.3%, 17.5% 4.6%, 19.4% 4.9%, 21.5% 5.1%, 23.7% 5.3%, 26% 5.5%, 28.3% 5.6%, 30.8% 5.7%, 33.3% 5.7%, 35.9% 5.7%, 38.5% 5.5%, 41.3% 5.4%, 44.1% 5.1%, 47% 4.7%, 50% 4.3%, 52.9% 3.9%, 55.8% 3.6%, 58.6% 3.4%, 61.4% 3.3%, 64.1% 3.4%, 66.7% 3.5%, 69.2% 3.7%, 71.6% 4%, 74% 4.3%, 76.2% 4.7%, 78.4% 5.2%, 80.5% 5.7%, 82.5% 6.3%, 84.4% 6.9%, 86.2% 7.5%, 87.9% 8.1%, 89.5% 8.7%, 91% 9.4%, 92.4% 10%, 93.7% 10.6%, 94.9% 11.2%, 95.9% 11.8%, 96.8% 12.3%, 97.7% 12.8%, 98.4% 13.2%, 99% 13.6%, 99.4% 13.9%, 99.7% 14.1%, 99.9% 14.2%, 100% 14.3%);
  background: #D6C0FF;
  position: absolute;
  inset: 0;
  bottom: 0px;
  left: 0;
  z-index: -1;
}
/* Hide old header dragonfly next to badge */
.programs-section .difference-badge-wrap .difference-dragonfly {
  display: none !important;
}

/* Top-Right Floating Dragonfly & Curved Flight Trail */
.programs-section .programs-title-wrap {
  position: relative;
}

.programs-section .programs-top-dragonfly-wrap {
  position: absolute;
    top: 120px;
    right: 0;
    width: 380px;
    height: 150px;
    pointer-events: none;
    z-index: 3;
}

.programs-section .programs-top-dragonfly {
      position: absolute;
    top: -14px;
    left: -48px;
    width: 96px;
    height: 96px;
    transform: rotate(252deg);
    transform-origin: 50% 30%;
    z-index: 2;
    filter: drop-shadow(0 4px 12px rgba(123, 59, 201, 0.3));
}

.programs-section .programs-flight-trail-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 991px) {
  .programs-section .programs-top-dragonfly-wrap {
    display: none;
  }
}

/* Slider Track Container */
.programs-section .events-slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
}

.programs-section .events-slider {
  margin: 0 -12px;
}

.programs-section .event-slide-item {
  padding: 12px;
  outline: none;
}

/* Program Card Styling (Matching Image 1) */
.programs-section .event-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 16px;
  border: 1px solid rgba(132, 97, 198, 0.1);
  box-shadow: 0 10px 30px rgba(66, 34, 126, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.programs-section .event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(66, 34, 126, 0.12);
}

.programs-section .event-card:hover .event-card-img {
  transform: none;
}

.programs-section .event-card-img-wrap {
  position: relative;
  width: 100%;
  height: auto !important;
  border-radius: 18px;
  overflow: visible !important;
  margin-bottom: 0 !important;
  background-color: transparent !important;
  z-index: 2;
}

.programs-section .event-card-img {
  width: 100%;
  aspect-ratio: 423 / 278;
  height: auto !important;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

/* Circular Purple Icon Badge overlapping bottom-left of image */
.programs-section .program-card-icon-badge {
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  left: 10px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.programs-section .program-card-icon-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #8461C6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0px 0px 6px rgb(191 175 221 / 51%);
  margin-bottom: 26px;
}

.programs-section .program-card-icon-img {
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Card Body */
.programs-section .event-card-body {
  padding: 42px 10px 12px 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

.programs-section .event-card-title {
  font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1C0D37;
  margin: 0 0 0.65rem 0;
  line-height: 1.3;
}

.programs-section .event-card-desc {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 400;
  color: #574F6B;
  line-height: 1.55;
  margin: 0;
}

/* Bottom Centered Slider Navigation Buttons */
.programs-section .events-slider-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 2.5rem;
  position: relative;
  z-index: 5;
}

.programs-section .events-slider-arrow {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.programs-section .events-slider-prev {
  background: #ECE7F5 !important;
  color: #42227E !important;
}

.programs-section .events-slider-prev:hover {
  background: #DFD5F2 !important;
  color: #42227E !important;
  transform: scale(1.08) !important;
}

.programs-section .events-slider-next {
  background: #42AFC3 !important;
  color: #FFFFFF !important;
}

.programs-section .events-slider-next:hover {
  background: #399DB0 !important;
  color: #FFFFFF !important;
  transform: scale(1.08) !important;
}

/* ==========================================================================
   OUR FIRST PILOT SECTION (.first-pilot-section)
   ========================================================================== */
.first-pilot-section {
  position: relative;
  padding: 0px 0 85px 0;
  background-color: #FFFFFF;
  overflow-x: clip;
}

/* Floating Decorative Elements */
.first-pilot-trail-wrap {
  position: absolute;
    top: 50px;
    right: 0;
    width: auto;
    height: auto;
    pointer-events: none;
    z-index: 5;
}

.first-pilot-flight-trail {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.first-pilot-top-dragonfly {
  position: absolute;
  top: -9px;
  left: -80px;
  width: 96px;
  height: 102px;
  transform: rotate(246deg);
}

.first-pilot-circle-deco {
  position: absolute;
  right: 4%;
  top: 48%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ECE6F8;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

/* Image Visual Collage */
.first-pilot-visual-wrap {
  position: relative;
  margin: 0 auto;
}

.first-pilot-star-badge {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 3;
  width: 68px;
  height: 68px;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(66, 175, 195, 0.3));
  animation: rotate 10s ease-in-out infinite;
}

.first-pilot-star-badge img {
  width: 100%;
  height: 100%;
  display: block;
}

.first-pilot-images-grid {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.first-pilot-img-tall-col {
  flex: 1;
  min-width: 0;
}

.first-pilot-img-tall {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

.first-pilot-img-stacked-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.first-pilot-img-top,
.first-pilot-img-bottom {
  width: 100%;
  height: calc(50% - 8px);
  min-height: 212px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

/* Content Area */
.first-pilot-content {
  padding-left: 10px;
}

.first-pilot-badge-wrap {
  display: block;
  margin-bottom: 0.75rem;
}

.first-pilot-title-wrap {
  display: block;
  margin-bottom: 1.25rem;
}

.first-pilot-btn-wrap {
  margin-top: 1.5rem;
}

/* Scoped Modifications for Existing Values Cards */
.first-pilot-cards-wrap {
  margin-top: 3.5rem;
  position: relative;
}

.first-pilot-bottom-dragonfly {
  position: absolute;
    left: -86px;
    top: 75%;
    transform: rotate(45deg);
    width: 72px;
    height: 72px;
    pointer-events: none;
    z-index: 5;
}

.first-pilot-section .values-card {
  padding: 22px 24px;
  background: #F4F3F8;
  border-radius: 12px 18px 18px 12px;
  border-right: 6px solid #8461C6;
  gap: 18px;
  align-items: center;
  box-shadow: 0 4px 14px rgba(66, 34, 126, 0.04);
  height: 100%;
}

.first-pilot-section .values-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(132, 97, 198, 0.12);
}

.first-pilot-section .values-card-icon {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.first-pilot-section .values-card-icon::before {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EAE6F2;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}

.first-pilot-section .values-icon-img {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.first-pilot-section .values-card-content .card-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F0C15;
  margin-bottom: 4px;
  line-height: 1.25;
}

.first-pilot-section .values-card-content p {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 400;
  color: #5B5270;
  line-height: 1.42;
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 1280px) {
  .first-pilot-bottom-dragonfly {
    left: -60px;
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 991px) {
  .first-pilot-section {
    padding: 60px 0 70px 0;
  }

  .first-pilot-content {
    padding-left: 0;
    margin-top: 1.5rem;
  }

  .first-pilot-bottom-dragonfly {
    display: none;
  }

  .first-pilot-trail-wrap {
    opacity: 0.6;
    right: 0;
    top: -20px;
    transform: scale(0.85);
  }

  .first-pilot-cards-wrap {
    margin-top: 2.5rem;
  }
}

@media (max-width: 575px) {
  .first-pilot-img-tall {
    min-height: 280px;
    border-radius: 16px;
  }

  .first-pilot-img-top,
  .first-pilot-img-bottom {
    min-height: 132px;
    border-radius: 16px;
  }

  .first-pilot-images-grid {
    gap: 10px;
  }

  .first-pilot-img-stacked-col {
    gap: 10px;
  }

  .first-pilot-star-badge {
    width: 52px;
    height: 52px;
    top: -14px;
    left: -14px;
  }

  .first-pilot-section .values-card {
    padding: 18px 16px;
  }
}

/* Responsiveness */
@media (max-width: 1200px) {
  .vina-deficiency-content-wrapper {
    width: 56%;
    padding-left: 6%;
  }

  .vina-deficiency-flight-trail-wrap {
    left: 3%;
  }
}

@media (max-width: 991px) {
  .vina-deficiency-section {
    padding: 40px 0 50px 0;
  }

  .vina-deficiency-card {
    aspect-ratio: auto;
  }
  .vina-deficiency-card-bg {
        position: absolute;
        width: 100%;
        height: auto;
        object-position: center;
        pointer-events: none;
        z-index: 1;
        object-fit: unset;
        inset: unset;
        bottom: -35px;
}
  .vina-deficiency-content-wrapper {
    width: 100%;
    padding-left: 40px;
    padding-right: 0;
  }

  .vina-deficiency-star-badge {
    top: -71px;
        right: 8%;
  }

  .vina-deficiency-heart.heart-top {
    top: 15px;
  }

  .vina-deficiency-heart.heart-bottom {
    bottom: 12%;
    left: 1%;
  }

  .vina-deficiency-mobile-visual {
    margin-top: 1.75rem;
    text-align: center;
  }

  .vina-deficiency-mobile-img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(60, 23, 101, 0.08);
  }

  .vina-deficiency-flight-trail-wrap {
            top: -80px;
        left: -4%;
        transform: scale(0.85);
  }
  .stats-bottom-left-path-story {
    left: -400px;
    bottom: -30px;
    pointer-events: none;
}
}

@media (max-width: 576px) {
  .vina-deficiency-card {
    padding: 2rem 1.25rem 1.5rem;
    border-radius: 24px;
  }

  .vina-deficiency-quote-line {
      font-size: 1rem;
      line-height: 1.28;
      margin-bottom: 0;
  }

  .vina-deficiency-author-name {
    font-size: 14px;
  }

  .vina-deficiency-author-role {
    font-size: 13px;
  }

  .vina-deficiency-star-badge {
    width: 15px;
        top: -140px;
        right: 15px;
        min-width: 60px;
  }

    .deficiency-mini-dragonfly {
        width: 38px;
        height: 38px;
        left: 50%;
    }
.meet-vina-hero {
  .vina-deficiency-flight-trail-wrap {
    top: unset;
        left: 0;
        width: 24px;
        height: 140px;
        pointer-events: none;
        z-index: 5;
        bottom: 4%;
  }
}
}

/* ==========================================================================
   RESPONSIVENESS (1366px, 1200px, 992px, 768px, 576px)
   ========================================================================== */
@media (max-width: 1600px),
(max-width: 1536px) {
  .container {
    max-width: 1380px;
  }

  .who-we-are-right-path {
    top: 12%;
    width: 98px;
    height: 145px;
  }

  .stats-bottom-dragonfly {
    left: -100%;
  }

  .stronger-dragonfly-actor-wrap {
    top: 50px;
    right: 85px;
    width: 150px;
    height: 208px;
  }

  .resources-flight-trail {
    top: -34px;
    left: 0;
    width: 390px;
  }

  .resources-dragonfly {
    bottom: 35px;
    right: -67px;
    width: 105px;
    height: 105px;
  }

  .faq-bottom-deco {
    margin-top: -12rem;
  }
  .matters-2b2 {
    .curve-bg {
        padding-top: 15%;
        padding-bottom: 36%;
    }
}
.meet-vina-together {
    .stronger-dragonfly-actor-wrap {
        width: 120px;
        top: -6px;
    }
}
.first-pilot-trail-wrap {
    top: 0px;
}
}

/* 1. Laptops / Small Desktop (<= 1366px) */
@media (max-width: 1440px),
(max-width: 1366px) {
  .hero-title-main {
    font-size: 3.4rem;
  }

  .container {
    max-width: 1200px;
  }

  .section-title {
    font-size: 2.9rem;
  }

  .involvement-card {
    padding: 1.8rem 1.6rem;
  }

  .involvement-icon-wrap {
    width: 74px;
    height: 74px;
    min-width: 74px;
  }

  .involvement-icon-wrap img {
    width: 38px;
    height: 38px;
  }

  .involvement-card .card-title {
    font-size: 1.4rem;
  }

  .involvement-card p {
    font-size: 1rem;
  }

  .involvement-students-visual {
    margin-top: -3rem;
    margin-bottom: -17rem;
  }

  .faq-bottom-deco {
    margin-top: -13rem;
    overflow: visible;
    z-index: 1;
  }

  .hero-content {
    max-width: 460px;
    padding-bottom: 5%;
  }

  .primary-btn {
    font-size: 1rem;
    padding: 0 21px;
  }

  .hero-visual-col {
    right: -2%;
    bottom: -16%;
  }

  .hero-students-img {
    width: 720px;
    max-width: 100%;
  }

  .meet-vina-section {
    padding: 4.5rem 0 5rem 0;
  }

  .meet-vina-visual-bleed {
    width: 63%;
  }

  .vina-back-vector {
    right: -160px;
  }

  .footer-wave {
    padding-top: 12rem
  }
  .meet-vina-hero {
        .hero-content {
        max-width: 550px;
    }
    .hero-shape {
    min-height: 840px;
    background-position: 140%;
    }
}
    .matters-2b2 {
        .curve-bg {
            padding-top: 17%;
            padding-bottom: 34%;
        }
    }
    .meet-vina-together{
      .col-xl-5 {
        flex: 0 0 auto;
        width: 46.666667%;
    }
    }
    .meet-vina-together {
        .stronger-dragonfly-actor-wrap {
            width: 124px;
            top: -13px;
        }
    }
}

/* 2. Large Tablet / Landscape (<= 1200px) */
@media (max-width: 1200px) {
  .hero-title-main {
    font-size: 3rem;
  }

  .section-title {
    font-size: 2.6rem;
  }

  .main-navigation ul {
    gap: 24px;
  }

  .header-actions {
    gap: 1rem;
  }

  .difference-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .involvement-card {
    padding: 1.6rem 1.4rem;
  }

  .involvement-card-inner {
    gap: 1.2rem;
  }

  .involvement-icon-wrap {
    width: 68px;
    height: 68px;
    min-width: 68px;
  }

  .involvement-icon-wrap img {
    width: 34px;
    height: 34px;
  }

  .involvement-card .card-title {
    font-size: 1.3rem;
  }

  .involvement-card p {
    font-size: 0.95rem;
  }

  .involvement-students-visual {
    margin-top: -2rem;
    margin-bottom: -10rem;
  }
}

/* 3. Tablets / iPad (<= 992px) - OFFCANVAS MENU ACTIVE */
@media (max-width: 992px) {

  /* Header & Offcanvas Navigation */
  .mobile-toggle {
    display: flex;
  }

  .header-actions {
    display: none !important;
  }

  .main-navigation {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 86vw);
    height: 100vh;
    background: #FFFFFF;
    box-shadow: -8px 0 35px rgba(66, 34, 126, 0.25);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1.75rem 1.75rem 2.5rem 1.75rem;
    transform: translateX(105%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100000;
    overflow-y: auto;
  }

  .main-navigation.active {
    transform: translateX(0);
  }

  .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1.5px solid #F1EAFF;
  }

  .offcanvas-close {
    background: #F4EEFD;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--color-primary-purple, #6E44BA);
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .offcanvas-close:hover {
    background: #DFCEFF;
    transform: rotate(90deg);
  }

  .main-navigation ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-bottom: 2rem;
  }

  .main-navigation ul li {
    width: 100%;
    border-bottom: 1px solid #FAF7FF;
  }

  .main-navigation ul li a {
    display: block;
    width: 100%;
    padding: 0.9rem 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1C0D37;
  }

  .main-navigation ul li a:hover,
  .main-navigation ul li.current-menu-item a {
    color: var(--color-primary-purple, #6E44BA);
    padding-left: 0.85rem;
  }

  .offcanvas-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.5rem;
  }

  /* Hero Section */
  .hero-content {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .hero-underline-bar,
  .title-accent-bar {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-btn-group {
    justify-content: center;
  }

  .hero-students-img {
    width: 100%;
    max-width: 520px;
    margin: 35px auto 0 auto;
  }

  /* Meet Vina */
  .vina-row {
    flex-direction: column-reverse;
  }

  .vina-content-col {
    text-align: center;
    margin-top: 2.5rem;
  }

  .vina-photo-wrap {
    max-width: 420px;
    margin: 0 auto;
  }

  /* Pathway Section (Find Your Path) */
  .pathway-section {
    display: block !important;
    min-height: auto !important;
    padding: 4.5rem 0 3.5rem 0 !important;
    overflow: hidden;
  }

  .pathway-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pathway-col-left {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: center;
    margin-bottom: 2rem;
  }

  .pathway-header-wrap {
    margin-bottom: 2rem;
    text-align: center;
  }

  .pathway-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .pathway-cards-list {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    gap: 1rem;
  }

  .pathway-card {
    width: 100%;
    padding: 1rem 1.4rem;
    gap: 1.15rem;
    border-radius: 28px;
    background: #FFFFFF;
  }

  .pathway-card-icon-wrap {
    width: 72px;
    height: 72px;
    min-width: 72px;
  }

  .pathway-card-icon-wrap::before {
    width: 76px;
    height: 76px;
    left: -2px;
    top: -2px;
  }

  .pathway-card-icon {
    width: 72px;
    height: 72px;
  }

  .pathway-card-icon img {
    width: 32px;
    height: 32px;
  }

  .pathway-card-title {
    font-size: 1.25rem;
  }

  .pathway-card-desc {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .pathway-visual-wrap {
    display: none;
  }

  .pathway-students-frame {
    width: 100% !important;
    height: 100% !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .pathway-students-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
  }

  .pathway-dragonfly-badge {
    display: none;
  }

  /* Stronger Together Section */
  .stronger-together-section {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    padding: 0rem 0 3.5rem 0 !important;
    position: relative;
    overflow: hidden;
  }

  .stronger-together-section .row {
    justify-content: center !important;
  }

  .stronger-visual-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100%;
    height: 340px !important;
    margin: 0 auto 2.5rem auto !important;
    border-radius: 0;
    overflow: hidden !important;
    display: block !important;
    order: -1;
  }

  .stronger-students-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 0;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .stronger-content-col {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    text-align: center !important;
  }

  .stronger-content-wrap {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .stronger-title {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  .stronger-desc {
    font-size: 1.05rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 2rem !important;
    max-width: 480px !important;
  }

  .stronger-content-wrap .btn-layered-wrap {
    display: inline-block !important;
    margin: 0 auto !important;
  }

  .stronger-dragonfly-actor-wrap {
    display: none !important;
  }

  /* Involvement Section */
  .involvement-card {
    padding: 1.8rem 2rem;
  }

  .involvement-students-visual {
    margin-top: 2rem;
    margin-bottom: -6rem;
  }

  /* Footer */
  .footer-wave {
    padding-top: 10rem;
    padding-bottom: 3rem;
  }

  .footer-dragonfly {
    display: none;
  }

  .hero-visual-col {
    position: relative;
    margin-bottom: -35%;
    margin-top: -9%;
  }

  .hero-shape {
    min-height: 1100px;
  }

  .hero-description {
    margin-inline: auto;
  }

  .dragonfly-canvas-container {
    width: 100%;
    height: 4%;
  }

  .hero-shape::before {
    background: linear-gradient(180deg, #F1EAFF 28.46%, rgb(221 202 255 / 27%) 50.45%);
  }

  .hero-shape::after {
    opacity: 0;
  }

  .vina-top-dragonfly {
    width: 96px;
    height: 96px;
    top: -82px;
    left: 2%;
  }

  .meet-vina-visual-bleed {
    width: 68%;
    margin-left: auto;
  }

  .vina-main-img {
    max-width: 530px;
  }

  .who-we-are-content-inner {
    padding-left: 0;
    margin-top: 0;
    text-align: center;
  }

  .pathway-card-content {
    text-align: left;
  }

  .resources-flight-trail svg {
    width: 66%;
    height: auto;
    display: block;
  }

  .resources-dragonfly {
    bottom: -26px;
    right: 58px;
    width: 105px;
    height: 105px;
    left: auto;
    rotate: 124deg;
  }

  .faq-sparkle-star {
    top: 5%;
    right: 4%;
    width: 80px;
  }

  .faq-bottom-deco {
    margin-top: -3rem;
    overflow: visible;
    z-index: 1;
  }

  .sparkle-star {
    display: none;
  }
      .meet-vina-hero {
        .hero-shape {
            min-height: 1070px;
            background-position: 130% 100%;
            align-items: start;
            padding-top: 24%;
        }
            .hero-shape::before {
        background: linear-gradient(180deg, #F1EAFF 42.46%, rgb(221 202 255 / 27%) 50.45%);
    }
    }
    .meet-vina-story {
    .who-we-are-card-box {
        padding-left: 32px;
    }
}
    .matters-2b2 {
        .curve-bg {
            padding-top: 30%;
            padding-bottom: 34%;
        }
    }
    .matters-2b2 {
    & .curve-bg {
        &::after {
            background: linear-gradient(359deg, rgb(241 234 255 / 90%) 35%, #F1EAFF 55%);
        }
    }
}
}

/* 4. Small Tablets & Mobile Devices (<= 768px) */
@media (max-width: 768px) {
  .hero-title-main {
    font-size: 2.5rem;
  }

  .section-title {
    font-size: 2.3rem;
  }

  .section-subtitle {
    font-size: 1.05rem;
  }

  .why-choose-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .difference-grid {
    grid-template-columns: 1fr;
  }

  .programs-grid {
    grid-template-columns: 1fr;
  }

  .resources-grid {
    grid-template-columns: 1fr;
  }

  .involvement-card {
    padding: 1.6rem 1.6rem;
  }

  .involvement-icon-wrap {
    width: 68px;
    height: 68px;
    min-width: 68px;
  }

  .involvement-icon-wrap img {
    width: 34px;
    height: 34px;
  }

  .involvement-card .card-title {
    font-size: 1.35rem;
  }

  .involvement-students-visual {
    margin-top: 2rem;
    margin-bottom: -4rem;
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }

  .footer-wave {
    padding-top: 3rem;
    clip-path: none;
  }

  .site-footer {
    padding-top: 2rem;
    clip-path: none;
  }

  .involvement-deco-ribbon,
  .deco-ribbon-left,
  .deco-ribbon-right {
    display: none;
  }

  .footer-logo-img {
    margin-inline: auto;
  }

  .footer-desc {
    text-align: center;
  }
}

/* 5. Phones (<= 576px) */
@media (max-width: 576px) {
  .hero-title-main {
    font-size: 2.1rem;
  }

  .section-title {
    font-size: 1.95rem;
  }

  .hero-btn-group {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }



  .primary-btn {
    justify-content: center;
    padding: 0 32px;
  }

  /* Pathway mobile phone */
  .pathway-card {
    padding: 0.9rem 1rem;
    gap: 0.85rem;
    border-radius: 20px;
  }

  .pathway-card-icon-wrap {
    width: 58px;
    height: 58px;
    min-width: 58px;
  }

  .pathway-card-icon-wrap::before {
    width: 62px;
    height: 62px;
  }

  .pathway-card-icon {
    width: 58px;
    height: 58px;
  }

  .pathway-card-icon img {
    width: 26px;
    height: 26px;
  }

  .pathway-card-title {
    font-size: 1.12rem;
  }

  .pathway-card-desc {
    font-size: 16px;
  }

  .pathway-visual-wrap {
    height: 260px !important;
  }

  /* Stronger Together mobile phone */
  .stronger-visual-wrap {
    height: 260px !important;
  }

  .stronger-title {
    font-size: 2rem !important;
  }

  .stronger-desc {
    font-size: 16px !important;
  }

  .faq-header {
    padding: 1rem 1.25rem;
  }

  .faq-question {
    font-size: 1.05rem;
  }

  .involvement-card {
    padding: 1.4rem 1.2rem;
  }

  .involvement-card-inner {
    gap: 1rem;
    flex-direction: column;
    text-align: center;
  }

  .involvement-icon-wrap {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }

  .involvement-icon-wrap img {
    width: 30px;
    height: 30px;
  }

  .involvement-card .card-title {
    font-size: 1.22rem;
  }

  .involvement-card p {
    font-size: 16px;
  }

  .involvement-card .link-more {
    font-size: 0.95rem;
  }

  .footer-bottom-bar {
    padding: 1rem .51rem;
    border-radius: 12px;
    font-size: 0.88rem;
  }

  .brand-logo {
    width: 76px;
  }

  .dragonfly-canvas-container {
    width: 100%;
    height: 0%;
  }

  .hero-shape {
    min-height: 880px;
  }

  .hero-shape {
    clip-path: polygon(100% -2.8%, 0% -2.8%, 0% 90.6%, 0% 90.6%, 0.2% 90.6%, 0.6% 90.6%, 1% 90.5%, 1.6% 90.5%, 2.3% 90.5%, 3.1% 90.5%, 3.9% 90.4%, 4.9% 90.3%, 5.9% 90.3%, 7.1% 90.3%, 8.3% 90.2%, 9.5% 90.2%, 10.8% 90.2%, 12.2% 90.2%, 13.6% 90.1%, 15.1% 90.1%, 16.6% 90%, 18.1% 90%, 19.6% 90%, 21.2% 90%, 22.7% 90%, 24.3% 90.1%, 25.8% 90.1%, 27.3% 90.2%, 28.8% 90.2%, 30.3% 90.3%, 31.8% 90.4%, 33.2% 90.5%, 34.6% 90.6%, 36.2% 90.8%, 37.8% 91%, 39.4% 91.3%, 40.9% 91.6%, 42.4% 92%, 43.9% 92.4%, 45.3% 92.8%, 46.7% 93.3%, 48% 93.8%, 49.4% 94.2%, 50.7% 94.7%, 52% 95.2%, 53.3% 95.7%, 54.6% 96.2%, 55.9% 96.7%, 57.2% 97.2%, 58.5% 97.6%, 59.8% 98%, 61.1% 98.4%, 62.4% 98.8%, 63.8% 99.1%, 65.1% 99.4%, 66.5% 99.6%, 67.9% 99.8%, 69.4% 99.9%, 70.8% 100%, 72.4% 99.9%, 73.9% 99.9%, 75.5% 99.7%, 77.2% 99.5%, 78.1% 99.3%, 79.1% 99.1%, 80.1% 98.9%, 81.1% 98.6%, 82.1% 98.3%, 83.1% 98%, 84.1% 97.6%, 85.2% 97.2%, 86.2% 96.9%, 87.2% 96.5%, 88.2% 96%, 89.2% 95.7%, 90.2% 95.3%, 91.1% 94.8%, 92% 94.4%, 92.9% 94.1%, 93.8% 93.6%, 94.6% 93.3%, 95.4% 92.9%, 96.1% 92.6%, 96.8% 92.2%, 97.4% 91.9%, 98% 91.6%, 98.5% 91.4%, 98.9% 91.1%, 99.3% 90.9%, 99.6% 90.8%, 99.8% 90.7%, 99.9% 90.6%, 100% 90.6%);
  }

  .hero-shape2 {
    clip-path: polygon(100% 0%, 0% 0%, 0% 88.7%, 0.1% 88.7%, 0.3% 88.7%, 0.6% 88.7%, 1.1% 88.7%, 1.6% 88.8%, 2.3% 88.8%, 3.1% 88.8%, 4% 88.8%, 4.9% 88.9%, 6% 88.9%, 7.1% 89%, 8.3% 89%, 9.6% 89.1%, 10.9% 89.1%, 12.2% 89.2%, 13.7% 89.3%, 15.1% 89.3%, 16.6% 89.4%, 18.1% 89.4%, 19.6% 89.6%, 21.2% 89.6%, 22.7% 89.7%, 24.3% 89.8%, 25.8% 89.9%, 27.4% 90%, 28.9% 90.1%, 30.4% 90.2%, 31.8% 90.3%, 33.2% 90.5%, 34.6% 90.6%, 36.3% 90.8%, 37.9% 91%, 39.4% 91.3%, 41% 91.6%, 42.4% 92%, 43.9% 92.4%, 45.3% 92.8%, 46.7% 93.3%, 48.1% 93.7%, 49.4% 94.2%, 50.7% 94.7%, 52.1% 95.2%, 53.4% 95.7%, 54.7% 96.2%, 55.9% 96.7%, 57.2% 97.2%, 58.5% 97.6%, 59.8% 98%, 61.1% 98.4%, 62.5% 98.8%, 63.8% 99.1%, 65.2% 99.4%, 66.6% 99.6%, 68% 99.8%, 69.4% 99.9%, 70.9% 100%, 72.4% 100%, 74% 99.9%, 75.5% 99.7%, 77.2% 99.5%, 78.1% 99.3%, 79.1% 99.1%, 80.1% 98.8%, 81.1% 98.5%, 82.1% 98.2%, 83.1% 97.8%, 84.2% 97.4%, 85.2% 97%, 86.2% 96.6%, 87.2% 96.2%, 88.2% 95.7%, 89.2% 95.2%, 90.2% 94.8%, 91.2% 94.3%, 92.1% 93.8%, 93% 93.3%, 93.8% 92.9%, 94.6% 92.4%, 95.4% 92%, 96.1% 91.6%, 96.8% 91.2%, 97.5% 90.9%, 98% 90.5%, 98.5% 90.2%, 99% 90%, 99.3% 89.7%, 99.6% 89.6%, 99.8% 89.4%, 100% 89.4%, 100% 89.3%);
  }

  .hero-shape3 {
    clip-path: polygon(0% -2.7%, 100% -2.7%, 100% 90.6%, 99.9% 90.6%, 99.7% 90.6%, 99.4% 90.6%, 98.9% 90.5%, 98.4% 90.5%, 97.7% 90.5%, 96.9% 90.5%, 96% 90.4%, 95.1% 90.3%, 94% 90.3%, 92.9% 90.3%, 91.7% 90.2%, 90.4% 90.2%, 89.1% 90.2%, 87.8% 90.1%, 86.3% 90.1%, 84.9% 90%, 83.4% 90%, 81.9% 90%, 80.4% 90%, 78.8% 90%, 77.3% 90%, 75.7% 90.1%, 74.2% 90.1%, 72.6% 90.2%, 71.1% 90.2%, 69.6% 90.3%, 68.2% 90.3%, 66.8% 90.5%, 65.4% 90.6%, 63.7% 90.8%, 62.1% 91%, 60.6% 91.3%, 59% 91.6%, 57.6% 92%, 56.1% 92.4%, 54.7% 92.8%, 53.3% 93.3%, 51.9% 93.7%, 50.6% 94.2%, 49.3% 94.7%, 47.9% 95.2%, 46.6% 95.7%, 45.3% 96.2%, 44.1% 96.6%, 42.8% 97.1%, 41.5% 97.6%, 40.2% 98%, 38.9% 98.4%, 37.5% 98.7%, 36.2% 99.1%, 34.8% 99.3%, 33.4% 99.6%, 32% 99.8%, 30.6% 99.9%, 29.1% 99.9%, 27.6% 99.9%, 26% 99.8%, 24.5% 99.7%, 22.8% 99.5%, 21.9% 99.3%, 20.9% 99%, 19.9% 98.8%, 18.9% 98.6%, 17.9% 98.3%, 16.9% 97.9%, 15.8% 97.6%, 14.8% 97.2%, 13.8% 96.8%, 12.8% 96.5%, 11.8% 96%, 10.8% 95.6%, 9.8% 95.3%, 8.8% 94.8%, 7.9% 94.4%, 7% 94%, 6.2% 93.6%, 5.4% 93.2%, 4.6% 92.9%, 3.9% 92.6%, 3.2% 92.2%, 2.5% 91.9%, 2% 91.6%, 1.5% 91.4%, 1% 91.1%, 0.7% 90.9%, 0.4% 90.8%, 0.2% 90.7%, 0% 90.6%, 0% 90.6%);
  }

  .hero-visual-col {
    position: relative;
    margin-bottom: -69%;
    margin-top: -9%;
  }

  .hero-content {
    .primary-btn.btn-outline {
      background-color: #42AFC3;
      border-color: #42AFC3;
      color: #FFFFFF;
    }
  }

  .values-mission-heading {
    font-size: 1.25rem;
    line-height: 26px;
  }

  .values-heading-wrap {
    margin-bottom: 2.5rem;
  }

  .values-card {
    padding: 20px 15px;
  }

  .values-card-content .card-title {
    font-size: 1.12rem;
  }

  .meet-vina-quote-card {
    max-width: 100%;
    padding: 15px 15px 15px 15px;
  }

  p,
  .hero-description,
  .section-desc,
  .section-subtitle,
  .values-card-content p,
  .meet-vina-desc,
  .quote-text,
  .programs-lead-text,
  .programs-desc-text,
  .program-desc,
  .who-we-are-lead,
  .who-we-are-desc,
  .pathway-subtitle,
  .pathway-card-desc,
  .difference-subtitle,
  .difference-card-desc,
  .stronger-desc,
  .events-subtitle,
  .resources-desc,
  .resource-item-desc,
  .faq-subtitle,
  .faq-body-inner,
  .involvement-card p,
  .footer-desc,
  .footer-bottom-inner p {
    font-size: 16px;
    line-height: 26px;
  }

  .meet-vina-visual-bleed {
    width: 98%;
    margin-left: auto;
  }

  .vina-flight-path-wrap {
    bottom: -73px;
    width: 323px;
    height: 242px;
  }

  .vina-bottom-dragonfly {
    top: 104px;
    left: 137px;
    width: 90px;
    height: 117px;
  }

  .vina-flight-svg {
    top: 0;
    left: 0;
    width: 200px;
    height: 182px;
  }

  .programs-info-cell {
    padding: 3rem 0rem;
    min-height: auto;
  }

  .programs-info-cell .section-title {
    font-size: 2.5rem;
    line-height: 45px;
  }

  .program-overlay-normal {
    padding: 2rem 1rem;
  }

  .program-overlay-normal .program-title,
  .program-hover-panel .program-title {
    font-size: 1.5rem;
  }

  .program-hover-panel {
    padding: 22px 20px;
  }

  .who-we-are-star-badge {
    width: 80.902px;
    height: 80.902px;
  }

  .who-we-are-circle-img {
    box-shadow: -26px 0px 0px #BFAFDD;
  }

  .who-we-are-card-box {
    padding: 2rem 0.8rem;
    border-radius: 20px;
  }

  .stat-item-v2 .stat-num {
    font-size: 2.5rem;
    line-height: 40px;
    margin-bottom: 0.5rem;
  }

  .who-we-are-right-path {
    top: 5%;
    width: 98px;
    height: 145px;
  }

  .stats-bottom-dragonfly {
    left: -84%;
    top: -13px;
  }

  .who-we-are-title,
  .who-we-are-title .title-accent,
  .pathway-title {
    font-size: 2.2rem;
    line-height: 48px;

  }

  .difference-title {
    font-size: 28px;
    line-height: 36px;
  }

  .difference-header-wrap {
    margin-bottom: 1.5rem;
  }

  .difference-card {
    padding: 2.8rem 1rem 2.5rem 1rem;
  }

  .difference-section {
    padding: 2.5rem 0 3.5rem 0;
  }

  .resources-banner {
    padding: 2rem 1rem;
    border-radius: 20px;
  }

  .faq-section .faq-dragonfly {
    left: -17px;
    top: -95px;
  }

  .faq-item.active .faq-body {
    max-height: max-content;
  }

  .faq-section .faq-bottom-dragonfly {
    width: 75px;
  }

  .involvement-students-visual {
    margin-top: -1rem;
    margin-bottom: -1rem;
  }

  .site-footer {
    padding-top: 1rem;
    clip-path: none;
    text-align: center;
  }

  .footer-wave {
    padding-top: 1rem;
    clip-path: none;
  }

  .footer-desc {
    text-align: center;
    max-width: 100%;
  }

  .footer-social-links {
    display: flex;
    justify-content: center;
  }

  .container {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .footer-dragonfly {
    display: block;
    top: 23px;
    width: 76px;
    right: 61px;
  }

  .btn-layered-wrap {
    width: fit-content;
    margin-inline: auto;
  }

  .btn-header-school,
  .btn-header-donate {
    font-size: 1rem;
  }

  .offcanvas-actions {
    gap: 1.75rem;
  }
      .meet-vina-hero {
        .hero-shape {
                        min-height: 780px;
            background: #f1eaff;
            background-repeat: no-repeat;
            background-position: bottom;
            align-items: start;
            padding-top: 106px;
            background-size: 114%;
        }
    }
        .meet-vina-hero {
        .hero-shape::before {
            background: linear-gradient(180deg, #f1eaffbf 51.46%, rgb(221 202 255 / 23%) 79.45%);
        }
    }
    .meet-vina-story {
    .quote-author {
        font-size: 20px;
        line-height: 26px;
    }
}
    .stats-bottom-left-path-story {
        left: 0;
        bottom: -104px;
        pointer-events: none;
        svg{
          width: 300px;
    }
    }
.vina-story-df {
    position: absolute;
    top: 100px;
    left: 213px;
    
}
.meet-vina-story {
    .meet-vina-content {
        padding-right: 0;
    }
}
.meet-vina-title,.meet-vina-title .vina-name {
    font-size: 2.375rem;
}
.journey-list {
    li {
        font-size: 16px;
        padding: 10px 18px;
        padding-left: 40px;
    }
}
.journey-item {
    .img-box {
        width: 484.055px;
        max-width: 100%;
        height: 300.458px;
    }
}
.journey-item {
    .icon-box {
        width: 70.793px;
        height: 70.793px;
        padding: 10px;
    }
}
}

/* ==========================================================================
   Mobile Responsive Clip-Path & Spacing Fix for .curve-bg (Why 2B2 Matters)
   ========================================================================== */
@media (max-width: 768px) {

  .matters-2b2 .curve-bg,
  .matters-2b2 .bg {
    clip-path: polygon(
      0% 0%,
      5% 0.06%,
      10% 0.23%,
      15% 0.50%,
      20% 0.83%,
      25% 1.20%,
      30% 1.57%,
      35% 1.91%,
      40% 2.18%,
      45% 2.34%,
      50% 2.40%,
      55% 2.34%,
      60% 2.18%,
      65% 1.91%,
      70% 1.57%,
      75% 1.20%,
      80% 0.83%,
      85% 0.50%,
      90% 0.23%,
      95% 0.06%,
      100% 0%,
      100% 98.2%,
      85% 97.6%,
      70% 97.1%,
      50% 96.8%,
      30% 97.2%,
      15% 97.7%,
      0% 98.5%
    );
  }

  .matters-2b2 .curve-bg {
    padding-top: 85px;
    padding-bottom: 180px ;
  }
      .matters-2b2 {
        padding: 0;
    }
}

@media (max-width: 576px) {
  .matters-2b2 .curve-bg,
  .matters-2b2 .bg {
    clip-path: polygon(
      0% 0%,
      5% 0.08%,
      10% 0.28%,
      15% 0.60%,
      20% 1.00%,
      25% 1.45%,
      30% 1.90%,
      35% 2.30%,
      40% 2.62%,
      45% 2.82%,
      50% 2.90%,
      55% 2.82%,
      60% 2.62%,
      65% 2.30%,
      70% 1.90%,
      75% 1.45%,
      80% 1.00%,
      85% 0.60%,
      90% 0.28%,
      95% 0.08%,
      100% 0%,
      100% 98.5%,
      85% 98.0%,
      70% 97.5%,
      50% 97.2%,
      30% 97.6%,
      15% 98.1%,
      0% 98.8%
    );
  }

  .matters-2b2 .curve-bg {
    padding-top: 60px;
        padding-bottom: 126px;
    .difference-dragonfly {
    top: -15px;
    left: -82px;
    width: 84px;
    height: 107px;
}
  }
    .vina-deficiency-card-bg {
        scale: 1.5;
        position: absolute;
        width: 372px;
        height: auto;
        pointer-events: none;
        z-index: 1;
        inset: unset;
        bottom: 24px;
        right: -7px;
    }
    .vina-deficiency-card {
        padding: 0;
        border-radius: 0;
    }
    .vina-deficiency-content-wrapper {
        width: 100%;
        padding-left: 10px;
        padding-right: 0;
    }
    .vina-deficiency-quote {
    margin: 0 0 1rem 0;
    width: 60%;
}
.vina-deficiency-author-row {
    margin-top: 0.2rem;
}
.vina-deficiency-quote-mark {
    margin-bottom: 0.2rem;
    line-height: 1;
}
    .vina-deficiency-heart.heart-bottom {
        bottom: 12%;
        left: 0%;
    }
        .vina-deficiency-heart.heart-top {
        top: 0px;
    }
    .hero-badge-wrap {
    display: block;
    margin-bottom: 10px;
}
.hero-content .section-title-wrap {
    margin-bottom: .81rem;
}
.hero-description {
    margin-bottom: 20px;
}
.our-program-hero{
    .hero-shape::before {
        background: linear-gradient(180deg, #f1eaff 64.46%, rgb(221 202 255 / 23%) 79.45%);
    }
}
}


/* ==========================================================================
   2B2 INTERACTIVE POPUP MODALS & FORMS (School, Partner, Volunteer)
   ========================================================================== */
.tb-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(22, 9, 46, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.tb-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.tb-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}

.tb-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tb-modal-dialog {
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  transform: translateY(24px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tb-modal.active .tb-modal-dialog {
  transform: translateY(0) scale(1);
}

.tb-modal-content {
  background: #FFFFFF;
  border-radius: 0 32px 0 32px;
  border: 1px solid rgba(132, 97, 198, 0.18);
  box-shadow: 0 24px 64px rgba(28, 13, 55, 0.28), 0 4px 16px rgba(132, 97, 198, 0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

/* Modal Close Button */
.tb-modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ECE4F7;
  background: #F7F3FF;
  color: #574F6B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  transition: all 0.25s ease;
}

.tb-modal-close:hover {
  background: #8461C6;
  color: #FFFFFF;
  border-color: #8461C6;
  transform: rotate(90deg);
}

/* Modal Header */
.tb-modal-header {
  padding: 32px 34px 18px 34px;
  background: linear-gradient(180deg, #F9F5FF 0%, #FFFFFF 100%);
  border-bottom: 1px solid #F1EAFF;
  position: relative;
  flex-shrink: 0;
}

.tb-modal-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: #EFE8FC;
  color: #673FB2;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.tb-modal-pill svg {
  fill: #8461C6;
  flex-shrink: 0;
}

/* Modal Header Dragonfly Actor */
.tb-modal-dragonfly.dragonfly-actor {
  position: absolute;
    top: 14px;
    left: auto;
    right: 206px;
    width: 68px;
    height: 68px;
    pointer-events: none;
    z-index: 4;
    animation: tbModalDragonflyFloat 3.8s ease-in-out infinite alternate;
    filter: drop-shadow(0 6px 14px rgba(123, 59, 201, 0.28));
    transform-origin: 50% 30%;
    rotate: 224deg;
}

@keyframes tbModalDragonflyFloat {
  0% {
    transform: rotate(24deg) translateY(0px) scale(0.96);
  }
  100% {
    transform: rotate(36deg) translateY(-6px) scale(1.04);
  }
}

.tb-modal-title {
  font-family: var(--font-sans);
  font-size: 1.85rem;
  font-weight: 700;
  color: #1C0D37;
  line-height: 1.25;
  margin: 0 0 6px 0;
  padding-right: 40px;
}

.tb-modal-subtitle {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: #574F6B;
  line-height: 1.5;
  margin: 0;
}

/* Modal Body & Custom Scrollbar */
.tb-modal-body {
  padding: 22px 34px 32px 34px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tb-modal-body::-webkit-scrollbar {
  width: 7px;
}

.tb-modal-body::-webkit-scrollbar-track {
  background: #F7F3FF;
}

.tb-modal-body::-webkit-scrollbar-thumb {
  background: #C8B2EE;
  border-radius: 10px;
}

.tb-modal-body::-webkit-scrollbar-thumb:hover {
  background: #8461C6;
}

/* Form Layout & Grid */
.tb-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 18px;
}

.tb-form-group {
  display: flex;
  flex-direction: column;
}

.tb-form-group.full-width {
  grid-column: span 2;
}

.tb-form-group label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: #2E1354;
  margin-bottom: 6px;
}

.tb-required {
  color: #D92D5B;
  font-weight: 700;
}

.tb-form-group input,
.tb-form-group select,
.tb-form-group textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: #1C0D37;
  background: #FAF8FE;
  border: 1.5px solid #E4DCF5;
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

.tb-form-group input::placeholder,
.tb-form-group textarea::placeholder {
  color: #A29BB3;
  font-weight: 400;
}

.tb-form-group select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238461C6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.tb-form-group input:hover,
.tb-form-group select:hover,
.tb-form-group textarea:hover {
  border-color: #C6B3EA;
}

.tb-form-group input:focus,
.tb-form-group select:focus,
.tb-form-group textarea:focus {
  background: #FFFFFF;
  border-color: #8461C6;
  box-shadow: 0 0 0 3.5px rgba(132, 97, 198, 0.16);
}

.tb-form-group textarea {
  min-height: 80px;
  resize: vertical;
}

/* Field validation error styling */
.tb-field-error {
  display: none;
  font-family: var(--font-sans);
  font-size: 0.785rem;
  color: #D92D5B;
  font-weight: 500;
  margin-top: 4px;
}

.tb-form-group.has-error input,
.tb-form-group.has-error select,
.tb-form-group.has-error textarea {
  border-color: #D92D5B;
  background: #FFF5F7;
  box-shadow: 0 0 0 3px rgba(217, 45, 91, 0.12);
}

.tb-form-group.has-error .tb-field-error {
  display: block;
}

/* Actions & Submit Button */
.tb-form-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}

.tb-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 32px;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #FFFFFF;
  background: #8461C6;
  border: none;
  border-radius: 0 22px;
  box-shadow: 0 6px 18px rgba(132, 97, 198, 0.28);
  cursor: pointer;
  transition: all 0.25s ease;
  width: auto;
  text-decoration: none;
}

.tb-btn-primary:hover {
  background: #673FB2;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(132, 97, 198, 0.38);
}

.tb-btn-primary .btn-arrow {
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.tb-btn-primary:hover .btn-arrow {
  transform: translateX(4px);
}

/* Success Confirmation Screen */
.tb-modal-success {
  text-align: center;
  padding: 30px 16px 12px 16px;
  animation: tbFadeScaleIn 0.35s ease;
}

@keyframes tbFadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tb-success-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #42AFC3 0%, #3197AA 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 10px 24px rgba(66, 175, 195, 0.35);
}

.tb-success-title {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 700;
  color: #1C0D37;
  margin: 0 0 10px 0;
}

.tb-success-desc {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: #574F6B;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 24px auto;
}

.tb-success-close-btn {
  min-width: 140px;
  border-radius: 0 20px;
  background: #42AFC3;
  box-shadow: 0 6px 18px rgba(66, 175, 195, 0.28);
}

.tb-success-close-btn:hover {
  background: #3197AA;
  box-shadow: 0 10px 24px rgba(66, 175, 195, 0.38);
}

/* Modal Open Body Class */
body.tb-modal-open {
  overflow: hidden !important;
  touch-action: none;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .tb-modal {
    padding: 12px;
    align-items: flex-end;
  }
  
  .tb-modal-dialog {
    max-height: 92vh;
    margin: 0;
  }

  .tb-modal-content {
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
  }

  .tb-modal-header {
    padding: 24px 20px 14px 20px;
  }

  .tb-modal-title {
    font-size: 1.45rem;
    padding-right: 32px;
  }

  .tb-modal-subtitle {
    font-size: 0.875rem;
  }

  .tb-modal-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
  }

  .tb-modal-dragonfly.dragonfly-actor {
    top: 10px;
    left: auto !important;
    right: 58px !important;
    width: 48px;
    height: 48px;
  }

  .tb-modal-body {
    padding: 18px 20px 28px 20px;
  }

  .tb-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .tb-form-group.full-width {
    grid-column: span 1;
  }

  .tb-btn-primary {
    width: 100%;
  }

  .tb-form-actions {
    margin-top: 18px;
  }
}