/* Home Page Styles - Pixel-Aligned to SDI Screenshot Design */

:root {
  --sdi-purple-dark: #371847;
  --sdi-purple-primary: #7E4491;
  --sdi-purple-mid: #9654AA;
  --sdi-purple-light: #F6EDF8;
  --sdi-purple-soft: #FAF4FB;
  --sdi-purple-tag: #EFE2F3;
  --sdi-blue-dot: #1B75D0;
  --sdi-text-dark: #1E1724;
  --sdi-text-muted: #645D6D;
  --sdi-border-light: #EBE3EF;
  --sdi-bg-page: #F8F3FA;
  --sdi-card-bg: #FFFFFF;
}

body {
  background-color: var(--sdi-bg-page);
  color: var(--sdi-text-dark);
  font-family: 'Museo Slab', 'museo Slab', serif;
  margin: 0;
  padding: 0;
}

.home-container {
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;
  overflow-x: hidden;
}

.home-section {
  width: 100%;
  padding: 3.5rem 2.5rem;
  box-sizing: border-box;
}

/* ==========================================================================
   Page Load & Scroll Reveal Animation Utilities
   ========================================================================== */

/* Hero Entrance Animations */
.animate-hero-fade {
  animation: heroFadeIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-hero-up {
  animation: heroSlideUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
  opacity: 0;
}

.animate-hero-up-delay {
  animation: heroSlideUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards;
  opacity: 0;
}

.animate-hero-card {
  animation: heroCardZoom 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
  opacity: 0;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes heroSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroCardZoom {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Scroll Reveal Classes */
.reveal-up {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.reveal-fade {
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}

.reveal-fade.is-visible {
  opacity: 1;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.94) translateY(15px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Stagger Delays */
.delay-1 {
  transition-delay: 0.12s;
}

.delay-2 {
  transition-delay: 0.24s;
}

.delay-3 {
  transition-delay: 0.36s;
}

.delay-4 {
  transition-delay: 0.48s;
}

.delay-5 {
  transition-delay: 0.6s;
}

.section-tag {
  display: inline-block;
  font-family: var(--font-heading-sans, "Museo Sans", "Montserrat", "Manrope", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sdi-purple-primary);
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--sdi-text-dark);
  line-height: 1.2;
  margin-bottom: 2.85rem;
  letter-spacing: -0.01em;
  margin-top: 1rem;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--sdi-text-muted);
  line-height: 1.6;
  max-width: 680px;
  margin-bottom: 2rem;
}

/* ==========================================================================
   1. Header / Navbar
   ========================================================================== */
/* Header & Menu Section Font Scaling Prevention */
.home-header,
.mega-menu-overlay,
.right-side-menu-dropdown,
.mobile-header-drawer,
.standard-dropdown-menu {
  font-size: calc(1rem / var(--sdi-font-scale-factor, 1));
}

.home-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;

  width: 100%;
}

.home-header-inner {

  margin: 0 auto;
  padding: 0.85em 1.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.mobile-header-top-bar {
  display: none;
}

.left-mobile-hamburger-wrap {
  display: none;
  align-items: center;
  position: relative;
}

.right-mobile-dots-wrap {
  display: none;
  align-items: center;
  position: relative;
}

.mobile-left-dots-btn {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-left-dots-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.header-logo-box {
  display: flex;
  align-items: center;
}

.header-sdi-logo {
  height: 100px;
  width: auto;
  object-fit: contain;
  cursor: pointer;
}

.home-nav-links {
  display: flex;
  align-items: center;
  gap: 1.1em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-nav-item {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-family: 'museo Slab';
  font-size: 1.125em;
  font-weight: 500;
  color: #0A0015;
  cursor: pointer;
  transition: color 0.2s ease;
}

.home-nav-item:hover {
  color: #852484;
}

.home-nav-item.active {
  color: #852484;
}

.nav-chevron {
  color: #0A0015;
  transition: transform 0.2s ease;
}

.home-nav-item:hover .nav-chevron,
.nav-chevron.active-chevron {
  color: #852484;
}

/* Standard Submenu Dropdown Styles */
.nav-item-dropdown-wrap {
  position: relative;
}

.standard-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 220px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid #EBE3EF;
  box-shadow: 0 12px 32px rgba(10, 0, 21, 0.09);
  padding: 0.35em 0;
  z-index: 105;
  display: flex;
  flex-direction: column;
  animation: standardDropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes standardDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.standard-dropdown-item {
  font-family: 'museo Slab';
  font-size: 1em;
  font-weight: 500;
  color: #2D233D;
  padding: 0.85em 1.4em;
  text-decoration: none;
  border-bottom: 1px solid #F6F0F8;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.standard-dropdown-item:last-child {
  border-bottom: none;
}

.standard-dropdown-item:hover {
  color: #852484;
  background: #F8F0FF;
  padding-left: 1.55em;
}

/* Header Mega Menu Styles */
.mega-menu-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #F8F9FA;
  border-bottom: 1px solid #E5DFEC;
  box-shadow: 0 15px 35px rgba(10, 0, 21, 0.08);
  z-index: 99;
  padding: 2.25em 0;
  animation: megaMenuFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes megaMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mega-menu-container {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 2.5em;
  box-sizing: border-box;
}

.mega-menu-inner {
  display: flex;
  gap: 2.5em;
  align-items: stretch;
}

/* Left side Grid: 2 Columns x 3 rows */
.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25em 2em;
  flex: 1;
}

.mega-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  padding: 1em 1.15em;
  border-radius: 14px;
  background: transparent;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.mega-menu-item:hover {
  background: #FFFFFF;
  box-shadow: 0 6px 20px rgba(26, 19, 59, 0.06);
  transform: translateY(-1px);
}

.mega-menu-icon-box {
  width: 45px;
  height: 45px;
  min-width: 45px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E8E2EE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4A3C5C;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.mega-menu-item:hover .mega-menu-icon-box {
  background: #F5E8F8;
  border-color: #DFAEE0;
  color: #852484;
}

.mega-menu-icon-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.mega-menu-icon {
  width: 20px;
  height: 20px;
  color: #4A3C5C;
  transition: color 0.2s ease;
}

.mobile-sub-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.mega-menu-text-box {
  flex: 1;
}

.mega-menu-title {
  font-family: 'museo Slab';
  font-size: 1.125em;
  font-weight: 700;
  color: #1A133D;
  margin: 0 0 0.25em 0;
  line-height: 1.3;
}

.mega-menu-desc {
  font-family: var(--font-body);
  font-size: 1em;
  color: #6C6378;
  margin: 0;
  line-height: 1.4;
}

.mega-menu-arrow {
  color: #1A133D;
  align-self: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.mega-menu-item:hover .mega-menu-arrow {
  transform: translateX(4px);
  color: #852484;
}

/* Right Side Promo Card */
.mega-menu-promo-card {
  width: 320px;
  min-width: 320px;
  border-radius: 1.25em;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 8px 24px rgba(133, 36, 132, 0.08);
}

.mega-menu-promo-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.mega-menu-promo-content {
  position: relative;
  z-index: 1;
  padding: 2em 1.75em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  box-sizing: border-box;
}

.mega-menu-promo-title {
  font-family: 'museo Slab';
  font-size: 1.125em;
  font-weight: 700;
  color: #1A133D;
  line-height: 1.35;
  margin: 0 0 0.75em 0;
}

.mega-menu-promo-desc {
  font-family: var(--font-body);
  font-size: 1em;
  color: #5C506C;
  line-height: 1.5;
  margin: 0 0 1.5em 0;
}

.mega-menu-promo-btn {
  background: #852484;
  color: #FFFFFF !important;
  font-family: 'museo Slab';
  font-weight: 700;
  font-size: 0.88em;
  padding: 0.75em 1.25em;
  border-radius: 12px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.mega-menu-promo-btn:hover {
  background: #6E1A6E;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(133, 36, 132, 0.3);
}

/* Mobile Accordion Submenu Styles */
.mobile-nav-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mobile-sub-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding-top: 0.75em;
  padding-left: 0.5em;
}

.mobile-sub-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.6em 0.75em;
  border-radius: 8px;
  text-decoration: none;
  color: #1A133D !important;
  transition: background 0.2s ease;
}

.mobile-sub-item:hover {
  background: #F4E8F8;
}

.mobile-sub-icon {
  color: #852484;
}

.mobile-sub-title {
  font-family: 'museo Slab';
  font-size: 1em;
  font-weight: 600;
}

.right-menu-btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 15;
}

.header-right-menu-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Right Side Dropdown Menu Styles */
.right-side-menu-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: #FFFFFF;
  border-radius: 1.5em;
  padding: 1.5em 1.75em;
  box-shadow: 0 15px 40px rgba(10, 0, 21, 0.12);
  border: 1px solid #EBE3EF;
  z-index: 110;
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  animation: rightMenuFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes rightMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.right-side-menu-list {
  display: flex;
  flex-direction: column;
  gap: 1.15em;
}

.right-side-menu-item {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.35em 0.5em;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.right-side-menu-item:hover {
  background: #F8F0FF;
  transform: translateX(3px);
}

.right-side-menu-icon {
  color: #3B2E4C;
  min-width: 22px;
  transition: color 0.2s ease;
}

.right-side-menu-icon-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  min-width: 22px;
  transition: transform 0.2s ease;
}

.right-side-menu-item:hover .right-side-menu-icon {
  color: #852484;
}

.right-side-menu-item:hover .right-side-menu-icon-img {
  transform: scale(1.08);
}

.right-side-menu-title {
  font-family: 'museo Slab';
  font-size: 1em;
  font-weight: 500;
  color: #241A35;
  transition: color 0.2s ease;
  line-height: 1.35;
}

.right-side-menu-item:hover .right-side-menu-title {
  color: #852484;
}

.home-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.btn-donate-header {
  height: 44px;
  padding: 0 1.6em;
  background: #852484 !important;
  color: #FFFFFF !important;
  font-family: 'museo Slab';
  font-weight: 700;
  font-size: 0.95em;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  justify-content: center;
  display: flex;
  align-items: center;
}

.btn-donate-header:hover,
.btn-donate-header:focus,
.btn-donate-header:focus-visible {
  background: #6E1A6E !important;
  color: white !important;
}

.btn-calendar-header {
  height: 44px;
  padding: 0 1.4em;
  background: #1A133D !important;
  color: #FFFFFF !important;
  font-family: 'museo Slab';
  font-weight: 700;
  font-size: 0.95em;
  border-radius: 12px;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
  transition: background 0.2s ease;
}


.btn-calendar-header:hover,
.btn-calendar-header:focus,
.btn-calendar-headerfocus-visible {
  background: #6E1A6E !important;
  color: white !important;
}

.btn-calendar-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.header-icon-btn {
  background: transparent;
  border: none;
  padding: 0.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease;
  box-shadow: none;
}

.header-icon-btn:hover {
  background: #F5EEF9;
}

.header-icon-btn :focus {
  color: inherit !important;
  background-color: #F5EEF9 !important;
  border-color: #F5EEF9 !important;
}


.header-action-icon {
  width: 22px;
  height: 32px;
  object-fit: contain;
}

.accessibility-btn .header-action-icon {
  width: 30px;
  height: 30px;
}

.header-inline-font-controls {
  display: flex;
  align-items: flex-end;
  gap: 0.35em;
  margin: 0 0.25em;
}

.font-square-btn {
  border-radius: 6px;
  border: none;
  background: #4B4453;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.font-square-btn.font-size-sm {
  width: 22px;
  height: 22px;
  font-size: 0.7em;
  border-radius: 5px;
}

.font-square-btn.font-size-md {
  width: 26px;
  height: 26px;
  font-size: 0.9em;
  border-radius: 6px;
}

.font-square-btn.font-size-lg {
  width: 30px;
  height: 30px;
  font-size: 1.1em;
  border-radius: 7px;
}

/* Smooth Font Scaling & Page Reflow Transitions */
html {
  transition: font-size 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

html.font-size-changing,
html.font-size-changing body,
html.font-size-changing * {
  transition: font-size 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    line-height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    padding 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    margin 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    width 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.font-square-btn:hover:not(.active) {
  background: #645D6D;
  transform: translateY(-1px);
}

.font-square-btn:active {
  transform: scale(0.88) !important;
}

.font-square-btn.active {
  background: #852484;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(133, 36, 132, 0.4);
  animation: fontSquarePulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fontSquarePulse {
  0% {
    transform: scale(0.85);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

.font-square-text {
  font-family: 'museo Slab', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.font-circle-text sup {
  font-size: 0.75em;
  margin-left: 1px;
  font-weight: 800;
}

/* Mobile font controls */
.mobile-font-size-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F4EFF8;
  padding: 0.75em 1em;
  border-radius: 12px;
  margin-bottom: 0.5em;
  width: 100%;
}

.mobile-font-label {
  font-family: 'museo Slab';
  font-size: 0.9em;
  font-weight: 700;
  color: #1A133D;
}

.mobile-font-controls-compact {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

/* ==========================================================================
   2. Hero Section
   ========================================================================== */
.hero-wrapper {
  width: 100%;
  height: calc(100vh - 95px);
  min-height: 560px;
  margin: 1rem 0 2rem;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 1.5rem;
  align-items: stretch;
  box-sizing: border-box;
}

html.font-size-scaled .hero-wrapper {
  height: 100%;
}

.hero-main-card {
  position: relative;
  background-color: #FFFFFF;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid #EBE3EF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.hero-content {
  padding: 10rem 4.5rem 4.5rem;
  z-index: 2;
}

.hero-title {
  font-family: 'museo Slab';
  font-size: 4rem;
  font-weight: 500;
  color: #0A0015 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #1E1724 !important;

  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.hero-description {
  font-size: 1.25rem;
  color: #0A0015;
  line-height: 1.6;
  margin-bottom: 2.25rem;
  max-width: 540px;
  font-family: 'museo Slab';
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.btn-primary-purple {
  background: #852484;
  color: #ffffff !important;
  border: none;
  padding: 0.85rem 1.75rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(121, 40, 122, 0.2);
  font-family: 'museo Slab';
}

.btn-primary-purple:hover {
  background: #621F63 !important;
  transform: translateY(-1px);
  color: #ffffff !important;
}

.btn-primary-purple:hover,
.btn-primary-purple:focus,
.btn-primary-purplefocus-visible {
  background: #621F63 !important;
  transform: translateY(-1px);
  color: #ffffff !important;
}

.btn-outline-purple {
  background: #ffffff;
  color: #852484 !important;
  border: 1.5px solid #852484;
  padding: 0.85rem 1.75rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: 'museo Slab';
}



.btn-outline-purple:hover,
.btn-outline-purple:focus,
.btn-outline-purplefocus-visible {
  background: #FAF4FB;
  transform: translateY(-1px);
}

/* Side Cards */
.hero-side-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.side-card {
  border-radius: 25px;
  padding: 2.25rem 2.25rem;
  border: 1px solid #EBE3EF;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: max-content;
  box-sizing: border-box;
}

.side-card-presence {
  flex: 25 0 auto;
  min-height: 240px;
  background-color: #F8F4FC;
  background-size: cover;
  background-position: bottom right;
  background-repeat: no-repeat;
}

.side-card-support {
  flex: 15 0 auto;
  min-height: max-content;
  background: linear-gradient(135deg, #F8F5FD 0%, #EFF0FC 100%);
}

html.font-size-scaled .side-card-presence {
  flex: 19 0 auto;
}

html.font-size-scaled .side-card-support {
  flex: 21 0 auto;
}

.side-card-support-icon {
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  width: 110px;
  height: 110px;
  object-fit: contain;
  pointer-events: none;
}

.side-card-tag {
  display: block;
  font-family: 'Manrope';
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7918DC;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.side-card-title {
  font-family: 'museo Slab';
  font-size: 1.7rem;
  font-weight: 700;
  color: #0A0015;
  margin-bottom: 0.75rem;
  line-height: 1.25;
  max-width: 82%;
}

.side-card-text {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #0A0015;
  line-height: 1.55;
  margin-bottom: 1.75rem;
  max-width: 88%;
}

.side-card-link {
  font-family: 'museo Slab';
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #852484 !important;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.side-card-link:hover {
  gap: 0.65rem;
}

.hero-chat-fab {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2563EB;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 10;
}

.hero-chat-fab:hover {
  transform: scale(1.08);
  background: #1D4ED8;
}


/* ==========================================================================
   3. Welcome Section
   ========================================================================== */
.welcome-section-wrapper {
  position: relative;
  overflow: hidden;
  padding: 0%;
}

.welcome-container {
  position: relative;
  background: #FFFFFF;
  border-radius: 2rem;
  padding: 3.5rem 3.5rem 0;
  margin-bottom: 2rem;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.welcome-pattern-wrap {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 35%;
  pointer-events: none;
  z-index: 1;
}

.welcome-pattern-bg {
  width: 100%;
  height: auto;
  display: block;
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  flex: 1;
}

.welcome-left-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
  padding-bottom: 320px;
}

.welcome-tag {
  font-family: 'museo Slab';
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7918DC;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.welcome-main-title {
  font-family: 'museo Slab';
  font-size: 2.35rem;
  font-weight: 700;
  color: #1A133D;
  line-height: 1.25;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.welcome-main-sub {
  font-family: 'museo Slab';
  font-size: 1.25rem;
  color: #5C526B;
  line-height: 1.6;
  max-width: 440px;
  margin-bottom: 0.5rem;
}

.welcome-hiker-wrap {
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 52%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 92%),
    linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 92%),
    linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
}

.welcome-hiker-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: left bottom;
}

.welcome-bullets {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.welcome-bullet-item {
  display: flex;
  gap: 1.35rem;
  align-items: flex-start;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid #F2ECF7;
}

.welcome-bullet-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.bullet-icon-circle {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: #F5EEF9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bullet-icon-circle.active-bullet-circle {}

.bullet-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.bullet-text {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #3B324A;
  line-height: 1.65;
  margin-bottom: 0px !important;
}

/* Welcome Stats Bar */
.welcome-stats-bar {
  background: #F6F1FB;
  border-radius: 1.5rem 1.5rem 2rem 2rem;
  padding: 1.75rem 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-top: 2rem;
}

.welcome-stat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0 1rem;
  border-right: 1px solid #778FC8;
}

.welcome-stat-item:last-child {
  border-right: none;
}

.welcome-stat-icon-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.welcome-stat-text-group {
  display: flex;
  flex-direction: column;
}

.welcome-stat-number {
  font-family: 'museo Slab';
  font-size: 1.85rem;
  font-weight: 700;
  color: #1A133D;
  line-height: 1.1;
}

.welcome-stat-label {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  font-weight: 700;
  color: #4A3C5C;
  margin-top: 4px;
}

/* ==========================================================================
   4. Why Spiritual Companionship Matters
   ========================================================================== */
.why-section-wrapper {
  background-color: #F6F1FB;
  margin-top: 50px;
}

.why-matters-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.25fr;
  gap: 3.5rem;
  align-items: stretch;
  margin-top: 1rem;
}

.why-images-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.25rem;
  height: 100%;
}

.why-main-img {
  width: 100%;
  /* flex: 1; */
  min-height: 0;
  border-radius: 1.5rem;
  object-fit: cover;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.why-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.why-sub-img {
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  object-fit: cover;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.why-stats-card {
  background: #FFFFFF;
  border-radius: 1.25rem;
  padding: 1rem;
  border: 1px solid #EBE3EF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  height: 100%;
}

.why-stat-top-img {
  width: 100%;
  border-radius: 0.85rem;
  object-fit: cover;
}

.why-stat-info {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0.25rem 0;
  margin-top: 20px;
}

.why-stats-num {
  font-family: 'museo Slab';
  font-size: 1.85rem;
  font-weight: 700;
  color: #0A0015;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.why-stats-text {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #4B4453;
  line-height: 1.4;
}

/* Right Column Features */
.why-right-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.why-tag {
  font-family: 'Manrope';
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7918DC;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.why-main-title {
  font-family: 'museo Slab';
  font-size: 2.5rem;
  font-weight: 700;
  color: #0A0015;
  line-height: 1.22;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.why-main-sub {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #0A0015;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.why-features-list {
  display: flex;
  flex-direction: column;

  gap: 1.25rem;
  flex: 1;
}

.why-feature-card {
  background: #FFFFFF;
  border-radius: 1.25rem;
  padding: 1.9rem 1.5rem;
  border: 1px solid #EBE3EF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.why-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.why-feature-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: #F5EEF9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-feature-icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.why-feature-content {
  flex: 1;
}

.why-feature-title {
  font-family: 'museo Slab';
  font-size: 1.25rem;
  font-weight: 700;
  color: #0A0015;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.why-feature-desc {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #0A0015;
  line-height: 1.55;
  font-weight: 500;
}

.why-feature-arrow-img {
  width: 12px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: auto;
  transition: transform 0.2s;
}

.why-feature-card:hover .why-feature-arrow-img {
  transform: translateX(3px);
}

/* ==========================================================================
   5. Virtual Platform Section ("You don't have to walk this journey alone.")
   ========================================================================== */
.virtual-section-wrapper {
  margin: 3.5rem 0;
}

.virtual-platform-container {
  background: #F6F1FB;
  border-radius: 2rem;
  padding: 3rem 3rem;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 3.5rem;
  align-items: stretch;
}

.virtual-left-img-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
}

.virtual-main-img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border-radius: 1.5rem;
  object-fit: cover;

  display: block;
}

.virtual-right-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.virtual-tag {
  font-family: 'Manrope';
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7918DC;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.virtual-main-title {
  font-family: 'museo Slab';
  font-size: 2.5rem;
  font-weight: 700;
  color: #0A0015;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.virtual-main-sub {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #0A0015;
  line-height: 1.6;
  margin-bottom: 2.25rem;
  max-width: 680px;
}

.virtual-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.25rem;
}

.virtual-feature-column {
  display: flex;
  flex-direction: column;
  padding-right: 1rem;
  border-right: 1px solid #E5D7EE;
}

.virtual-feature-column:last-child {
  border-right: none;
  padding-right: 0;
}

.virtual-icon-circle {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: #EFE0F7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.virtual-icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.virtual-feature-title {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  font-weight: 700;
  color: #0A0015;
  line-height: 1.3;
  margin-bottom: 0.65rem;
}

.virtual-feature-desc {
  font-family: 'museo Slab';
  font-size: 1rem;
  color: #4B4453;
  line-height: 1.5;
}

.virtual-actions-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.virtual-btn {
  background: #852484;
  color: #FFFFFF !important;
  font-family: 'museo Slab';
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.85rem 1.6rem;
  border-radius: 12px;
  border: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.virtual-btn:hover {
  background: #6E1A6E;
}

.virtual-link {
  font-family: 'museo Slab';
  font-weight: 700;
  font-size: 0.92rem;
  color: #852484;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.virtual-link:hover {
  color: #6E1A6E;
}

.virtual-callout-banner {
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 1.15rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


.virtual-callout-icon-img {
  width: 32px;
  height: 32px;
  min-width: 32px;
  object-fit: contain;
}

.virtual-callout-text {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #4B4453;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   6. Resources & Learning Section
   ========================================================================== */
.resources-section-wrapper {
  margin: 4rem 0;
  background-color: #F6F1FB;
}

.resources-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: orem;
}

.resources-tag {
  font-family: 'Manrope';
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7918DC;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.resources-main-title {
  font-family: 'museo Slab';
  font-size: 2.5rem;
  font-weight: 700;
  color: #0A0015;
  line-height: 1.22;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  text-align: center;
}

.resources-main-sub {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #0A0015;
  line-height: 1.6;
  max-width: 620px;
  text-align: center;
}

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

.resource-card {
  background: #FFFFFF;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid #EBE3EF;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(126, 68, 145, 0.08);
}

.resource-img-wrap {
  position: relative;
  width: 100%;
  height: 220px;
}

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

.resource-badge-circle {
  position: absolute;
  bottom: -26px;
  left: 2rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #EDE1F7;

  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.resource-badge-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.resource-card-body {
  padding: 2.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.resource-card-title {
  font-family: 'museo Slab';
  font-size: 1.65rem;
  font-weight: 700;
  color: #0A0015;
  margin-bottom: 0.65rem;
  line-height: 1.3;
}

.resource-card-desc {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #0A0015;
  line-height: 1.6;
  margin-bottom: 1.75rem;
  font-weight: 400;
}

.resource-card-link {
  font-family: 'museo Slab';
  font-size: 1rem;
  font-weight: 400;
  color: #852484;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.resource-card-link:hover,
.resource-card-link:focus {
  color: #5E10AF !important;
}

.resource-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sdi-purple-primary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   7. Journeys & Gatherings Section ("Journeys that deepen connection...")
   ========================================================================== */
.journeys-section-wrapper {
  margin: 0rem 0;
}

.journeys-grid-container {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.5rem;
  align-items: stretch;
}

/* Left Column */
.journeys-left-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

.journeys-main-img {
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: 1.5rem;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.journey-card-dark {
  background: #1F1943;
  border-radius: 1.5rem;
  padding: 2.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.journey-card-text {
  flex: 1;
}

.journey-card-title {
  font-family: 'museo Slab';
  font-size: 1.45rem;
  font-weight: 700;
  color: #0A0015;
  margin-bottom: 0.65rem;
  line-height: 1.3;
}

.journey-card-title.dark-title {
  color: #FFFFFF;
}

.journey-card-desc {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #4B4453;
  line-height: 1.6;
  margin: 0;
}

.journey-card-desc.dark-desc {
  color: #FFFFFF;
}

.journey-arrow-btn {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.journey-arrow-btn:hover {
  transform: scale(1.06);
}

.journey-arrow-btn.white-btn {
  background: #FFFFFF;
}

.journey-arrow-btn.purple-btn {
  background: #F3E8FA;
}

.journey-arrow-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Right Column */
.journeys-right-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

.journeys-header {
  margin-bottom: 0.5rem;
}

.journeys-tag {
  font-family: 'Manrope';
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7918DC;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.journeys-main-title {
  font-family: 'museo Slab';
  font-size: 2.35rem;
  font-weight: 700;
  color: #0A0015;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.journey-card-light {
  background: #FFFFFF;
  border: 1px solid #EBE3EF;
  border-radius: 1.5rem;
  padding: 2.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.journey-card-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.journey-desc {
  font-size: 0.92rem;
  color: var(--sdi-text-muted);
  line-height: 1.55;
}

.journey-btn-circle {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--sdi-purple-tag);
  color: var(--sdi-purple-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.journey-card-dark .journey-btn-circle {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.journey-btn-circle:hover {
  transform: scale(1.08);
}

/* ==========================================================================
   8. Stories & Testimonials Section ("Stories of Companionship")
   ========================================================================== */
.stories-section-wrapper {
  margin: 0rem 0;
}

.stories-header {
  margin-bottom: 2.5rem;
}

.stories-tag {
  font-family: 'Manrope';
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7918DC;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.stories-main-title {
  font-family: 'museo Slab';
  font-size: 2.2rem;
  font-weight: 700;
  color: #0A0015;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.stories-main-sub {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #4B4453;
  line-height: 1.6;
}

.stories-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.0rem;
  align-items: stretch;
}

/* Left Column: Video Card */
.story-video-card {
  background: #19143D;
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  height: 100%;
}

.story-video-img-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  flex-shrink: 0;
}

.story-video-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: linear-gradient(180deg, rgba(25, 20, 61, 0) 0%, rgba(25, 20, 61, 0.75) 60%, #19143D 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.story-video-img-wrap.is-playing::after {
  opacity: 0;
}

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

.story-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background 0.2s ease;
}

.story-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: #F8F0FF;
}

.story-video-bottom-box {
  padding: 1.75rem 2.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  background: #19143D;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

.story-video-title {
  font-family: 'museo Slab';
  font-size: 1.45rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.35;
  margin-bottom: 0.65rem;
}

.story-video-sub {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #C8BFDA;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.story-video-action-row {
  margin-bottom: 1.25rem;
}

.story-watch-btn {
  background: #852484;
  color: #FFFFFF;
  font-family: 'museo Slab';
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.story-watch-btn:hover {
  background: #6E1A6E;
}

.story-slider-dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.slider-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.slider-dot.active {
  background: #FFFFFF;
  opacity: 1;
}

/* Right Column: Testimonial Cards */
.testimonials-stack-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

}

.giant-quote-bg {
  position: absolute;
  top: -70px;
  right: -25px;
  width: 240px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

.testimonials-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 8px;
  scroll-behavior: smooth;
}

.testimonials-stack::-webkit-scrollbar {
  width: 6px;
}

.testimonials-stack::-webkit-scrollbar-track {
  background: #F8F0FC;
  border-radius: 10px;
}

.testimonials-stack::-webkit-scrollbar-thumb {
  background: #D8B4E2;
  border-radius: 10px;
}

.testimonials-stack::-webkit-scrollbar-thumb:hover {
  background: #852484;
}

.testimonial-card {
  background: #FFFFFF;
  border-radius: 1.35rem;
  padding: 1.5rem 1.85rem;
  border: 1px solid #EBE3EF;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.11);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

.testimonials-scroll-action {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  flex-shrink: 0;
  margin-top: 30px;
}

.stories-view-more-btn {
  background: #852484;
  color: #FFFFFF !important;
  font-family: 'museo Slab';
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(133, 36, 132, 0.2);
}

.stories-view-more-btn,
.stories-view-more-btn:hover,
.stories-view-more-btn:focus,
.stories-view-more-btn:visited,
.stories-view-more-btn * {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.stories-view-more-btn:hover {
  background: #6E1A6E !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(133, 36, 132, 0.3);
}

.testimonial-quote-circle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: #F5EEF9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
}

.testimonial-quote-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.testimonial-quote-text {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #332B3A;
  line-height: 1.6;
  padding-bottom: 1.25rem;

  margin-bottom: 1.15rem;
}

.testimonial-author-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 20px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-author-info {
  display: flex;
  flex-direction: column;
}

.testimonial-author-name {
  font-family: 'museo Slab';
  font-size: 1.25rem !important;
  font-weight: 700;
  color: #0A0015;
  line-height: 1.2;
}

.testimonial-author-role {
  font-family: 'museo Slab';
  font-size: 1.125rem !important;
  color: #852484;
  margin-top: 2px;
}

/* ==========================================================================
   9. Newsletter Section ("Receive Your Free Words of Wisdom")
   ========================================================================== */
.newsletter-section-wrapper {
  margin: 4rem 0;
  padding: 0 2.5rem;
  box-sizing: border-box;
}

.newsletter-banner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  border-radius: 1.75rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #191440;
  color: #FFFFFF;
  padding: 3.5rem 3.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(25, 20, 64, 0.2);
  box-sizing: border-box;
}

.newsletter-inner-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Left Column: Book Graphic & Caption */
.newsletter-left-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.newsletter-book-wrap {
  width: 100%;
  max-width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.newsletter-book-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.25));
}

.newsletter-left-desc {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: white;
  line-height: 1.55;
  margin-top: 1.25rem;
  max-width: 290px;
}

/* Right Column: Text & Form */
.newsletter-right-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.newsletter-top-emblem-wrap {
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: center;
}

.newsletter-leaf-emblem {

  width: auto;
  object-fit: contain;
}

.newsletter-tag {
  font-family: 'Manrope';
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: white;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.newsletter-title {
  font-family: 'museo Slab';
  font-size: 2.25rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

.newsletter-title .highlight-magenta {
  color: #D794FA;
  font-weight: 700;
}

.newsletter-subtitle {
  font-family: 'museo Slab';
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: white;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.newsletter-desc {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: white;
  line-height: 1.6;
  max-width: 680px;
  margin-bottom: 2rem;
}

/* Form Container */
.newsletter-form-container {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.newsletter-inputs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  width: 100%;
}

.newsletter-field-box {
  height: 48px;
  background: #FFFFFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.2rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.newsletter-field-box .field-icon {
  min-width: 18px;
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.newsletter-field-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'museo Slab';
  font-size: 0.9rem;
  color: #1E1724;
  border: none ! Important;
}

.newsletter-field-input::placeholder {
  color: #9B94A8;
}

.newsletter-submit-btn {
  width: 100%;
  height: 48px;
  background: #852484;
  color: #FFFFFF;
  font-family: 'museo Slab';
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 12px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(133, 36, 132, 0.35);
}

.newsletter-submit-btn:hover {
  background: #6E1A6E;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(133, 36, 132, 0.45);
}

.newsletter-privacy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: white;
  font-family: 'museo Slab';
  font-size: 1.125rem;
  margin-top: 0.25rem;
}

.newsletter-privacy-note .lock-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.newsletter-arrow-icon {
  width: 31px;
  height: auto;
  object-fit: contain;
  filter: brightness(10);
}

.newsletter-success {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  padding: 1.25rem 2rem;
  border-radius: 14px;
  font-family: 'museo Slab';
  font-size: 1rem;
  font-weight: 600;
}

/* ==========================================================================
   10. Help & FAQ Section ("We’re here to help")
   ========================================================================== */
.help-section-wrapper {
  background-color: #F6F1FB;
  padding: 4.5rem 2.5rem;
  margin: 4rem 0;
  margin-bottom: 0px;
}

.help-container {
  max-width: 1440px;
  margin: 0 auto;
}

.help-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.help-main-title {
  font-family: 'museo Slab';
  font-size: 2.35rem;
  font-weight: 700;
  color: #0A0015;
  margin-bottom: 0.75rem;
}

.help-main-sub {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #4B4453;
  line-height: 1.6;
}

.help-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 2rem;
  align-items: stretch;
}

/* Card Containers */
.help-card {
  background: #FFFFFF;
  border-radius: 1.5rem;
  padding: 2.25rem;
  border: 1px solid #EBE3EF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

.help-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.help-header-badge {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.help-card-title {
  font-family: 'museo Slab';
  font-size: 1.35rem;
  font-weight: 700;
  color: #0A0015;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}

.help-card-sub {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #645D6D;
  line-height: 1.55;
  margin: 0;
}

/* Left Contact Subcards */
.contact-subcards-stack {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.contact-subcard {
  border: 1px solid #EBE3EF;
  border-radius: 1.25rem;
  padding: 1.1rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-subcard:hover {
  border-color: #7918DC;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.subcard-left {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.subcard-badge {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: #F5EEF9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subcard-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.subcard-info {
  display: flex;
  flex-direction: column;
}

.subcard-title {
  font-family: 'museo Slab';
  font-size: 1.2rem;
  font-weight: 700;
  color: #0A0015;
  margin-bottom: 2px;
}

.subcard-detail {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #0A0015;
}

.subcard-arrow {
  color: #852484;
  font-size: 1.25rem;
  font-weight: 700;
}

.address-subcard {
  align-items: flex-start;
  padding: 1.25rem 1.35rem;
}

.address-subcard .subcard-left {
  align-items: flex-start;
}

.address-text {
  font-family: 'museo Slab';
  font-size: 1.125rem;
  color: #645D6D;
  line-height: 1.6;
  margin: 0.35rem 0 0;
}

.address-link {
  color: #852484 !important;
  text-decoration: underline;
}

/* Right FAQ Accordion */
.faq-list-box {
  display: flex;
  flex-direction: column;
  border: 1px solid #EBE3EF;
  border-radius: 1.25rem;
  overflow: hidden;
}

.faq-accordion-item {
  border-bottom: 1px solid #EBE3EF;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  background: #FFFFFF;
  transition: background 0.25s ease;
}

.faq-accordion-item:last-child {
  border-bottom: none;
}

.faq-accordion-item.active {
  background: #F8F0FC;
}

.faq-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-question-text {
  font-family: 'museo Slab';
  font-size: 1.25rem;
  font-weight: 700;
  color: #0A0015;
  line-height: 1.35;
}

.faq-accordion-item.active .faq-question-text {
  color: #852484;
}

.faq-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-chevron-icon {
  color: #0A0015;
  transition: transform 0.25s ease, color 0.25s ease;
  min-width: 18px;
}

.faq-accordion-item.active .faq-chevron-icon,
.faq-chevron-icon.active {
  transform: rotate(90deg);
  color: #852484;
}

.faq-accordion-body {
  font-family: 'museo Slab';
  font-size: 1rem;
  color: #4B4453;
  line-height: 1.6;
  margin-top: 0.75rem;
  padding-right: 1rem;
}

.faq-bottom-action {
  margin-top: 1.5rem;
  display: flex;
}

.faq-view-more-btn {
  background: #852484;
  color: #FFFFFF !important;
  font-family: 'museo Slab';
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(133, 36, 132, 0.2);
}

.faq-view-more-btn,
.faq-view-more-btn:hover,
.faq-view-more-btn:focus,
.faq-view-more-btn:visited,
.faq-view-more-btn * {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.faq-view-more-btn:hover {
  background: #6E1A6E !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(133, 36, 132, 0.3);
}

/* ==========================================================================
   11. Footer Section
   ========================================================================== */
.home-footer-wrapper {
  background: #FFFFFF;
  border-top: 1px solid #EBE3EF;
  width: 100%;
  position: relative;
  font-size: calc(1rem / var(--sdi-font-scale-factor, 1));
}

.footer-top-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 4rem 2.5rem 3.5rem;
  box-sizing: border-box;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  align-items: flex-start;
}

.contact-col {
  margin-top: 20px;
}

.quick-links-col {
  margin-top: 20px;
}

.footer-sdi-logo {
  width: 120px;
  height: auto;
  object-fit: contain;
}

.footer-col-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  min-height: 42px;
}

.footer-badge-circle {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 10px;
  background: #F5EEF9;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.footer-col-title {
  font-family: 'museo Slab';
  font-size: calc(1.25rem / var(--sdi-font-scale-factor, 1));
  font-weight: 700;
  color: #0A0015;
  margin: 0;
}

.footer-contact-details {
  padding-left: calc(42px + 0.75rem);
}

.footer-address-text {
  font-family: 'museo Slab';
  font-size: calc(1rem / var(--sdi-font-scale-factor, 1));
  color: #645D6D;
  line-height: 1.6;
  margin: 0;
}

.footer-email-link {
  color: #645D6D;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.footer-email-link:hover {
  color: #852484;
}

.footer-quick-links-content {
  padding-left: calc(42px + 0.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-link {
  font-family: 'museo Slab';
  font-size: calc(1rem / var(--sdi-font-scale-factor, 1));
  color: #645D6D !important;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #852484;
}

/* Accessibility Font Scaled Overrides (Desktop / Tablet) */
@media (min-width: 768px) {
  html.font-size-scaled .footer-top-container {
    padding: 3rem 1.5rem 2.5rem;
  }

  html.font-size-scaled .footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem 1.25rem;
    align-items: flex-start;
  }

  html.font-size-scaled .footer-contact-details,
  html.font-size-scaled .footer-quick-links-content {
    padding-left: calc(42px + 0.75rem);
  }

  html.font-size-scaled .footer-link {
    white-space: nowrap;
  }
}

/* Bottom Dark Navy Bar */
.footer-bottom-bar {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1A133D;
  padding: 1.75rem 2.5rem;
  position: relative;
  box-sizing: border-box;
}

.footer-scroll-top {
  position: fixed;
  bottom: 2.25rem;
  right: 2.25rem;
  width: 58px;
  height: 58px;
  background: transparent;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
  z-index: 9999;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.28));
}

.footer-scroll-top-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-scroll-top:hover {
  transform: translateY(-4px) scale(1.06);
  opacity: 1;
  filter: drop-shadow(0 6px 20px rgba(133, 36, 132, 0.45));
}

.footer-bottom-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copyright {
  font-family: 'museo Slab';
  font-size: calc(1rem / var(--sdi-font-scale-factor, 1));
  color: #D2C8E4;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.footer-social-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.footer-social-img:hover {
  transform: scale(1.1);
}

/* ==========================================================================
   Comprehensive Responsive Breakpoints (Mobile, Tablet, Laptop, Big Screen)
   ========================================================================== */

/* Mobile Drawer Styling */
.mobile-menu-toggle {
  display: none;
}

@media (min-width: 1200px) {
  .mobile-header-drawer {
    display: none !important;
  }

}

@media (max-width: 992px) {
  .why-section-wrapper {
    margin-top: 30px;
  }

  .contact-col {
    margin-top: 0px;
  }

  .quick-links-col {
    margin-top: 0px;
  }
}

.mobile-header-drawer {
  background: #FFFFFF;
  border-bottom: 1px solid #EBE3EF;
  padding: 1.5em 2.5em 0em 2.5em;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  animation: slideDown 0.25s ease-out forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0em 0;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
}

.mobile-nav-item {
  font-family: 'museo Slab';
  font-size: 1.1em;
  font-weight: 700;
  color: #0A0015;
  cursor: pointer;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #F5EEF9;
}

.mobile-drawer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  margin-top: 1em;
  width: 100%;
}

.mobile-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mobile-btn-full {
  width: 100%;
  justify-content: center;
}

/* Medium Desktop / Small Laptop (1024px to 1280px) */
@media (max-width: 1280px) {
  .home-nav-links {
    gap: 1.25rem;
  }

  .home-nav-item {
    font-size: 0.9rem;
  }

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

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }

  .logo-col {
    grid-column: 1 / -1;
  }

  .quick-links-col {
    grid-column: 1 / -1;
  }

  .footer-quick-links-content {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 1.5rem 2.5rem;
  }
}

@media (max-width: 1200px) {
  .home-nav-links {
    display: none;
  }

}

/* Tablets & Small Laptops (768px to 1023px) */
@media (max-width: 1200px) {
  .why-matters-grid {
    flex-direction: column;
    display: flex;
  }

  .mobile-header-top-bar {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-bottom: 1px solid #F0E8F4;
    padding: 0.55em 1.25em;
  }

  .left-mobile-hamburger-wrap .header-action-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .right-mobile-dots-wrap .header-left-dots-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .mobile-top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .mobile-top-accessibility-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-top-accessibility-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .mobile-top-bar-right-actions {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    justify-content: flex-end;
  }

  .mobile-top-btn {
    height: 34px !important;
    padding: 0 0.9em !important;
    font-size: 0.75em !important;
    border-radius: 8px !important;
  }

  .mobile-top-icon-btn {
    padding: 0.25em !important;
  }

  .mobile-top-icon-btn .header-action-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .home-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6em 1.25em;
  }

  .left-mobile-hamburger-wrap {
    display: flex;
    align-items: center;
    z-index: 15;
    position: relative;
  }

  .right-mobile-dots-wrap {
    display: flex;
    align-items: center;
    z-index: 15;
    position: relative;
  }

  .header-logo-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }

  .header-sdi-logo {
    height: 52px;
  }


  .desktop-action {
    display: none !important;
  }

  .desktop-only-icon {
    display: none !important;
  }

  .hero-wrapper {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
    padding: 0 1.5rem;
    gap: 1.5rem;
  }

  .hero-side-cards {
    height: auto;
  }

  .side-card {
    padding: 1.75rem 1.75rem;
    min-height: auto;
    flex: none;
  }

  .side-card-title {
    max-width: 78%;
  }

  .side-card-text {
    max-width: 100%;
  }

  /* Welcome Section - Tablet Fix */
  .welcome-container {
    min-height: auto;
    padding: 3rem 2.5rem 0;
  }

  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 100%;
  }

  .welcome-left-col {
    padding-bottom: 0;
  }

  .welcome-hiker-wrap {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 540px;
    margin: 1.5rem auto 0;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  .welcome-hiker-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center top;
  }

  .welcome-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1.75rem 1.5rem;
    margin-top: 30px;
  }

  .welcome-stat-item {
    border-right: none;
    border-bottom: 1px solid #EBE0F4;
    padding: 0.75rem 0;
  }

  .welcome-stat-item:nth-child(odd) {
    border-right: 1px solid #EBE0F4;
  }

  .welcome-stat-item:nth-child(3),
  .welcome-stat-item:nth-child(4) {
    border-bottom: none;
  }

  .alone-journey-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

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

  .journeys-grid-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .stories-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .virtual-section-wrapper {
    padding: 3rem 1.5rem;
  }

  .virtual-platform-container {
    grid-template-columns: 1fr;
    padding: 2.5rem 2rem;
    gap: 2.5rem;
  }

  .virtual-left-img-wrapper {
    width: 100%;
    height: auto;
  }

  .virtual-main-img {
    width: 100%;
    height: 380px;
    min-height: auto;
    object-fit: cover;
  }

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

  .virtual-feature-column {
    border-right: none;
    padding-right: 0;
  }

  .virtual-callout-banner {
    width: 100%;
    max-width: 100%;
  }

  .help-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .newsletter-section-wrapper {
    padding: 0 1.5rem;
    margin: 3rem 0;
  }

  .newsletter-banner {
    padding: 3rem 2rem;
    border-radius: 1.5rem;
  }

  .newsletter-inner-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .newsletter-left-col {
    max-width: 480px;
    margin: 0 auto;
  }

  .newsletter-right-col {
    max-width: 600px;
    margin: 0 auto;
  }

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

  .newsletter-desc {
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }

  .logo-col {
    grid-column: 1 / -1;
  }

  .quick-links-col {
    grid-column: 1 / -1;
  }

  .footer-quick-links-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem 2rem;
  }
}

/* Mobile Phones (<767px) */
@media (max-width: 767px) {
  .hero-content {
    padding: 10rem 2.5rem 2.5rem;
  }

  .why-sub-grid {
    display: flex;
    flex-direction: column;
  }

  .home-header-inner {
    padding: 0.75em 1.25em;
  }

  .header-sdi-logo {
    height: 70px;
  }

  .desktop-only-icon {
    display: none;
  }

  .hero-wrapper {
    padding: 0 1rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .side-card {
    padding: 1.5rem 1.25rem;
  }

  .side-card-support-icon {
    width: 75px;
    height: 75px;
    top: 1.25rem;
    right: 1rem;
  }

  .side-card-title {
    font-size: 1.35rem;
    max-width: 75%;
  }

  .side-card-text {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    max-width: 100%;
  }

  /* Welcome Section - Mobile Fix */
  .welcome-container {
    padding: 2rem 1.25rem 0;
    border-radius: 1.25rem;
    min-height: auto;
  }

  .welcome-left-col {
    padding-bottom: 0;
  }

  .welcome-main-title {
    font-size: 1.8rem;
  }

  .welcome-main-sub {
    font-size: 0.9rem;
    max-width: 100%;
  }

  .welcome-hiker-wrap {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 1.25rem auto 0;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
  }

  .welcome-hiker-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center top;
  }

  .welcome-bullet-item {
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .bullet-text {
    font-size: 0.92rem;
  }

  .welcome-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0.5rem;
    padding: 1.25rem 0.75rem;
    margin-top: 30px;
    border-radius: 1rem 1rem 1.25rem 1.25rem;
  }

  .welcome-tag {

    margin-top: 10px;
  }

  .welcome-stat-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.35rem;
    border-right: none;
    border-bottom: 1px solid #EBE0F4;
  }

  .welcome-stat-item:nth-child(odd) {
    border-right: 1px solid #EBE0F4;
  }

  .welcome-stat-item:nth-child(3),
  .welcome-stat-item:nth-child(4) {
    border-bottom: none;
  }

  .welcome-stat-icon-img {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .welcome-stat-number {
    font-size: 1.3rem;
  }

  .welcome-stat-label {
    font-size: 0.75rem;
  }

  .virtual-section-wrapper {
    padding: 2.5rem 1.25rem;
  }

  .virtual-platform-container {
    grid-template-columns: 1fr;
    padding: 1.75rem 1.25rem;
    border-radius: 1.25rem;
    gap: 2rem;
  }

  .virtual-left-img-wrapper {
    width: 100%;
    height: auto;
  }

  .virtual-main-img {
    width: 100%;
    height: 280px;
    min-height: auto;
    border-radius: 1rem;
    object-fit: cover;
  }

  .virtual-main-title {
    font-size: 2rem;
  }

  .virtual-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 0.85rem;
  }

  .virtual-actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .virtual-btn {
    width: 100%;
    justify-content: center;
  }

  .virtual-callout-banner {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }

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

  .why-matters-wrapper,
  .resources-section-wrapper,
  .stories-section-wrapper,
  .help-section-wrapper {
    padding: 2.5rem 1.25rem;
  }

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

  .newsletter-section-wrapper {
    padding: 0 1.25rem;
    margin: 2.5rem 0;
  }

  .newsletter-banner {
    padding: 2.5rem 1.25rem;
    border-radius: 1.25rem;
    width: 100%;
    box-sizing: border-box;
  }

  .newsletter-inner-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .newsletter-title {
    font-size: 1.75rem;
  }

  .newsletter-inputs-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .newsletter-field-box {
    width: 100%;
    box-sizing: border-box;
  }

  .footer-top-container {
    padding: 2.5rem 1.25rem 2rem;
  }

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

  .logo-col {
    grid-column: 1 / -1;
  }

  .quick-links-col {
    grid-column: 1 / -1;
  }

  .footer-quick-links-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem 1rem;
    padding-left: calc(42px + 0.75rem);
  }

  .footer-bottom-bar {
    padding: 1.75rem 1.25rem;
    background-position: left;
  }

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

  .footer-scroll-top {
    right: 1.25rem;
    bottom: 1.25rem;
    width: 48px;
    height: 48px;
  }

  /* Prevent Footer Content Size Increase in Mobile View */
  .footer-col-title,
  html.font-size-scaled .footer-col-title {
    font-size: calc(1.15rem / var(--sdi-font-scale-factor, 1)) !important;
  }

  .footer-address-text,
  html.font-size-scaled .footer-address-text {
    font-size: calc(0.9rem / var(--sdi-font-scale-factor, 1)) !important;
    line-height: 1.55;
  }

  .footer-link,
  html.font-size-scaled .footer-link {
    font-size: calc(0.9rem / var(--sdi-font-scale-factor, 1)) !important;
    white-space: normal !important;
  }

  .footer-copyright,
  html.font-size-scaled .footer-copyright {
    font-size: calc(0.85rem / var(--sdi-font-scale-factor, 1)) !important;
  }

  html.font-size-scaled .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem 1.25rem !important;
  }

  html.font-size-scaled .footer-top-container {
    padding: 2.5rem 1.25rem 2rem !important;
  }

  html.font-size-scaled .footer-quick-links-content {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 1.25rem 1rem !important;
    padding-left: calc(42px + 0.75rem) !important;
  }
}

/* Extra Small Phones (≤480px) */
@media (max-width: 480px) {

  .why-stats-text,
  .why-main-sub,
  .why-feature-desc,
  .virtual-main-sub,
  .resource-card-desc,
  .journey-card-desc,
  .journey-card-desc {
    font-size: 0.92rem;
  }

  .journeys-main-title,
  .why-main-title,
  .resources-main-title,
  .help-main-title {
    font-size: 1.5rem;
  }

  .journey-card-dark {
    flex-direction: column;
    padding: 1.25rem 1rem;
  }

  .journey-arrow-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .journey-arrow-img {
    width: 40px;
    height: 40px;
  }

  .journey-card-light {
    flex-direction: column;
    padding: 1.25rem 1rem;
  }

  .welcome-main-title {
    font-size: 1.6rem;
  }

  .welcome-stats-bar {
    grid-template-columns: 1fr;
    gap: 0.75rem 0.5rem;
    padding: 1rem 0.75rem;
  }

  .welcome-stat-item {
    gap: 0.5rem;
    padding: 0.6rem 0.25rem;
    justify-content: flex-start;
  }

  .bullet-icon-circle {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .bullet-icon-img {
    width: 20px;
    height: 20px;
  }

  .why-feature-card,
  .help-card-header,
  .subcard-left,
  .contact-subcard,
  .welcome-bullet-item,
  .virtual-callout-banner {
    flex-direction: column;
  }

  .virtual-features-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .stories-main-title {
    font-size: 1.7rem;
  }

  .help-card-title,
  .subcard-title,
  .why-main-title,
  .virtual-main-title {
    font-size: 1.15rem;
  }

  .help-card-sub,
  .subcard-detail,
  .address-text {
    font-size: 0.8rem;
  }

  .help-card {
    padding: 1rem;

  }

  .address-subcard .subcard-left {
    align-items: center;
  }

  .help-section-wrapper {
    padding: 2.5rem 0.25rem;
  }

  .address-subcard,
  .contact-subcard {
    padding: 15px;
  }

  .hero-content {
    padding: 6rem 1.5rem 1.5rem;
  }

  .btn-primary-purple,
  .btn-outline-purple {
    padding: .85rem 0.75rem;
  }

  .btn-primary-purple svg {
    min-width: 33px;
  }

  .btn-outline-purple svg {
    min-width: 33px;
  }

  .why-section-wrapper {

    padding: 3.5rem 1rem;
  }

  .resource-card-body {
    padding: 2.25rem 1rem 2rem;
  }

  /* Prevent Footer Content Size Increase on Extra Small Phones */
  .footer-col-title,
  html.font-size-scaled .footer-col-title {
    font-size: calc(1.1rem / var(--sdi-font-scale-factor, 1)) !important;
  }

  .footer-address-text,
  html.font-size-scaled .footer-address-text {
    font-size: calc(0.85rem / var(--sdi-font-scale-factor, 1)) !important;
  }

  .footer-link,
  html.font-size-scaled .footer-link {
    font-size: calc(0.85rem / var(--sdi-font-scale-factor, 1)) !important;
  }

  .footer-copyright,
  html.font-size-scaled .footer-copyright {
    font-size: calc(0.8rem / var(--sdi-font-scale-factor, 1)) !important;
  }

  .virtual-section-wrapper {
    padding: 1rem;
    margin: 1rem 0;
  }

  .address-subcard {
    align-items: center;


  }

  .testimonials-scroll-action {
    justify-content: center;
  }
}

/* Ensure mobile screens strictly stay at 100% base font size */
@media (max-width: 768px) {

  html,
  html.font-size-scaled,
  html.font-size-default {
    font-size: 100% !important;
    --sdi-font-scale-factor: 1 !important;
  }
}

/* Big Screens / Large Monitors (>1440px) */
@media (min-width: 1440px) {


  .why-matters-grid,
  .virtual-platform-container,
  .resources-container,
  .journeys-grid-container,
  .stories-grid,
  .stories-container,
  .help-container,
  .footer-top-container,
  .footer-bottom-inner {
    max-width: 1440px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}