/* ============================================================
   ABOUT US PAGE STYLES
   Scoped under #aboutPage — zero conflict with other pages
   ============================================================ */

#aboutPage {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #f8f9fa;
  color: #1a1a1a;
  padding-top: 96px;
}

/* Glass effects */
#aboutPage .hero-glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#aboutPage .hero-glass h2 {
  color: #ffffff !important;
}

#aboutPage h1 {
  color: #0f172a !important;
}
/* ----------------------------------------------------------
   FAQ ACCORDION
   max-height: 300px — fast open/close, covers all content
   ---------------------------------------------------------- */
#aboutPage .faq-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  will-change: max-height, opacity;
  transition: max-height 0.35s ease-in-out, opacity 0.25s ease-in-out;
}

#aboutPage .faq-content.open {
  max-height: 300px;
  opacity: 1;
}

/* ----------------------------------------------------------
   FADE-IN ANIMATION
   ---------------------------------------------------------- */
@keyframes aboutFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#aboutPage .animate-fade-in {
  opacity: 0;
  animation: aboutFadeIn 0.6s ease-out forwards;
}

/* Selection color */
#aboutPage ::selection {
  background: #171717;
  color: #ffffff;
}

/* ----------------------------------------------------------
   RESPONSIVE — Tablet
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  #aboutPage .lg\:col-span-5 {
    order: -1;
  }
}

/* ----------------------------------------------------------
   RESPONSIVE — Mobile
   ---------------------------------------------------------- */
@media (max-width: 640px) {
  #aboutPage section {
    padding-left: 16px;
    padding-right: 16px;
  }

  #aboutPage .min-h-\[520px\] {
    min-height: 420px;
    padding: 24px 16px;
  }

  #aboutPage .min-h-\[340px\] {
    min-height: 280px;
    padding: 24px 20px;
  }

  #aboutPage .min-h-\[280px\] {
    min-height: 240px;
  }

  #aboutPage .p-8 {
    padding: 20px;
  }

  #aboutPage .p-8\.sm\:p-12 {
    padding: 20px;
  }

  #aboutPage .text-6xl\.sm\:text-7xl {
    font-size: 3.5rem;
  }

  #aboutPage .h-\[420px\] {
    height: 300px;
  }

  #aboutPage .h-\[480px\] {
    height: 340px;
  }

  #aboutPage .grid-cols-3 {
    gap: 8px;
  }

  #aboutPage .h-28 {
    height: 80px;
  }
}

@media (max-width: 420px) {
  #aboutPage .min-h-\[520px\] {
    min-height: 380px;
  }

  #aboutPage .text-4xl\.sm\:text-5xl\.lg\:text-6xl {
    font-size: 1.75rem;
  }

  #aboutPage .text-3xl\.sm\:text-4xl {
    font-size: 1.5rem;
  }
}