/* ============================================================  
   about.php — page styles  
   Replaced all red (#gx-danger) with #2563eb (blue).  
   ============================================================ */  

/* ----- Override tokens (red → blue) ----- */  
:root {  
  --gx-danger: #2563eb;           /* main blue */  
  --gx-danger-dark: #1d4ed8;      /* darker blue */  
  --gx-error: #3b82f6;            /* lighter blue */  
  --gx-danger-soft: #dbeafe;      /* light blue bg */  
  --gx-danger-line: #93c5fd;      /* border */  
  --gx-danger-tint: #eff6ff;      /* very light */  
}  

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

body {  
  background: linear-gradient(145deg, var(--gx-bg) 0%, var(--gx-surface) 100%);  
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;  
  color: var(--gx-ink-soft);  
  line-height: 1.5;  
}  

.about-container {  
  max-width: 1280px;  
  margin: 0 auto;  
  padding: 2rem 1.5rem 4rem;  
}  

/* Typography */  
h1, h2, h3 {  
  font-family: 'Poppins', 'Inter', sans-serif;  
  font-weight: 700;  
  letter-spacing: -0.02em;  
}  

h2 {  
  font-size: var(--gx-fs-4xl);  
  margin-bottom: 1rem;  
  position: relative;  
  display: inline-block;  
}  

h2:after {  
  content: '';  
  position: absolute;  
  bottom: -12px;  
  left: 0;  
  width: 60px;  
  height: 4px;  
  background: linear-gradient(90deg, var(--gx-danger), var(--gx-error));  
  border-radius: 4px;  
}  

.section-subhead {  
  color: var(--gx-text);  
  font-size: var(--gx-fs-lg);  
  max-width: 700px;  
  margin-top: 1rem;  
}  

.text-center h2:after {  
  left: 50%;  
  transform: translateX(-50%);  
}  

/* ─── HERO SECTION (clean white background, solid heading) ─── */  
/* ===== HERO =====
   Moved to css/components/page-hero.css so about.php and services.php
   share one definition — they have to be the same height and width, and
   two copies here and in services.css would drift. The markup uses
   .gx-page-hero now. */

/* Stats Grid */  
.stats-grid {  
  display: grid;  
  grid-template-columns: repeat(4, 1fr);  
  gap: 2rem;  
  margin: 3rem auto 2rem;  
  max-width: 800px;  
}  

.stat-card {  
  background: white;  
  border-radius: 1.5rem;  
  padding: 1.5rem 0.5rem;  
  text-align: center;  
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);  
  transition: var(--gx-transition);  
  border: 1px solid var(--gx-line-soft);  
}  

.stat-card:hover {  
  transform: translateY(-5px);  
  box-shadow: 0 20px 30px -12px rgba(37,99,235,0.15);  
  border-color: var(--gx-danger-line);  
}  

.stat-number {  
  font-size: var(--gx-fs-5xl);  
  font-weight: 800;  
  color: var(--gx-danger);  
  line-height: 1.2;  
}  

.stat-label {  
  font-size: var(--gx-fs-sm);  
  font-weight: 600;  
  color: var(--gx-text);  
  margin-top: 0.25rem;  
}  

/* ===== VISION / MISSION (image + content split rows, alternating) ===== */  
.vm-row {  
  display: grid;  
  grid-template-columns: 1fr 1fr;  
  gap: 3.5rem;  
  align-items: center;  
  margin: 5rem 0;  
}  

.vm-row.reverse .vm-media { order: 2; }  
.vm-row.reverse .vm-content { order: 1; }  

.vm-media {  
  position: relative;  
}  

.vm-media-main {  
  border-radius: 1.5rem;  
  overflow: hidden;  
  box-shadow: 0 25px 50px -20px rgba(15,23,42,0.25);  
  border: 1px solid var(--gx-line-soft);  
}  

.vm-media-main img {  
  width: 100%;  
  height: 340px;  
  object-fit: cover;  
  display: block;  
}  

.vm-media-floater {  
  position: absolute;  
  top: -1.5rem;  
  left: -1.5rem;  
  width: 130px;  
  height: 90px;  
  border-radius: 1rem;  
  overflow: hidden;  
  border: 4px solid var(--gx-white);  
  box-shadow: 0 15px 30px -10px rgba(15,23,42,0.3);  
}  

.vm-row.reverse .vm-media-floater {  
  left: auto;  
  right: -1.5rem;  
}  

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

.vm-badge-card {  
  position: absolute;  
  bottom: -1.5rem;  
  right: -1rem;  
  background: var(--gx-white);  
  border-radius: 1.25rem;  
  padding: 0.9rem 1.25rem;  
  display: flex;  
  align-items: center;  
  gap: 0.8rem;  
  box-shadow: 0 15px 30px -10px rgba(15,23,42,0.2);  
  min-width: 200px;  
}  

.vm-row.reverse .vm-badge-card {  
  right: auto;  
  left: -1rem;  
}  

.vm-badge-icon {  
  width: 42px;  
  height: 42px;  
  border-radius: 0.75rem;  
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  font-size: var(--gx-fs-xl);  
  color: var(--gx-violet);  
  flex-shrink: 0;  
}  

.vm-badge-card strong {  
  display: block;  
  font-size: var(--gx-fs-sm);  
  color: var(--gx-ink);  
}  

.vm-badge-card span {  
  font-size: var(--gx-fs-xs);  
  color: var(--gx-muted);  
}  

.vm-badge-stars {  
  color: #fbbf24;  
  font-size: var(--gx-fs-xs);  
  margin-top: 0.1rem;  
}  

.vm-eyebrow {  
  display: inline-block;  
  font-size: var(--gx-fs-xs);  
  font-weight: 700;  
  letter-spacing: 0.05em;  
  padding: 0.35rem 1rem;  
  border-radius: 60px;  
  margin-bottom: 1rem;  
  text-transform: uppercase;  
}  

.vm-eyebrow.vision { background: #dbeafe; color: #1e40af; }  
.vm-eyebrow.mission { background: #fff7ed; color: #c2410c; }  

.vm-content h3 {  
  font-size: 2.4rem;  
  margin-bottom: 1rem;  
  color: var(--gx-ink);  
}  

.vm-content > p {  
  color: var(--gx-text);  
  font-size: var(--gx-fs-base);  
  line-height: 1.75;  
  margin-bottom: 1.5rem;  
}  

.vm-feature {  
  display: flex;  
  align-items: flex-start;  
  gap: 1rem;  
  margin-bottom: 1.1rem;  
}  

.vm-feature-icon {  
  width: 42px;  
  height: 42px;  
  border-radius: 0.75rem;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  font-size: var(--gx-fs-lg);  
  flex-shrink: 0;  
}  

.vm-feature-text strong {  
  display: block;  
  font-size: var(--gx-fs-base);  
  color: var(--gx-ink);  
  margin-bottom: 0.15rem;  
}  

.vm-feature-text p {  
  font-size: var(--gx-fs-md);  
  color: var(--gx-muted);  
  margin: 0;  
}  

.vm-callout {  
  margin-top: 1.5rem;  
  display: flex;  
  align-items: center;  
  gap: 0.75rem;  
  padding: 1rem 1.25rem;  
  border-radius: 1rem;  
  font-size: 0.95rem;  
  font-weight: 600;  
}  

.vm-callout.vision { background: #dbeafe; color: #1e3a8a; }  
.vm-callout.mission { background: #fff7ed; color: #c2410c; }  

.vm-callout i { font-size: var(--gx-fs-lg); }  

/* What We Stand For - Centered Core Values (exactly 6 items) */  
.values-section {  
  text-align: center;  
  margin: 5rem 0;  
}  

.values-grid {  
  display: grid;  
  grid-template-columns: repeat(3, 1fr);  
  gap: 2rem;  
  max-width: 1000px;  
  margin: 3rem auto 0;  
}  

.value-item {  
  background: white;  
  border-radius: 1.5rem;  
  padding: 2rem 1.5rem;  
  text-align: center;  
  transition: all 0.3s;  
  border: 1px solid #f0f0f0;  
}  

.value-item:hover {  
  transform: translateY(-6px);  
  background: linear-gradient(145deg, var(--gx-white), var(--gx-danger-tint));  
  border-color: var(--gx-danger-line);  
  box-shadow: 0 12px 25px -12px var(--gx-danger);  
}  

.value-icon {  
  width: 70px;  
  height: 70px;  
  background: var(--gx-danger-soft);  
  border-radius: var(--gx-r-circle);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  margin: 0 auto 1.2rem;  
}  

.value-icon i {  
  font-size: 2rem;  
  color: var(--gx-danger);  
}  

.value-item h4 {  
  font-size: 1.3rem;  
  margin-bottom: 0.5rem;  
}  

.value-item p {  
  font-size: var(--gx-fs-md);  
  color: var(--gx-text);  
}  

/* ===== KEY MILESTONES — vertical zigzag timeline ===== */  
.milestones-section {  
  margin: 5rem 0;  
  text-align: center;  
}  

.milestones-section h2 {  
  color: var(--gx-ink);  
}  

.timeline {  
  position: relative;  
  max-width: 1000px;  
  margin: 3.5rem auto 0;  
  padding: 1rem 0;  
}  

.timeline:before {  
  content: '';  
  position: absolute;  
  top: 0;  
  bottom: 0;  
  left: 50%;  
  transform: translateX(-50%);  
  width: 3px;  
  background: linear-gradient(180deg, var(--gx-indigo-light), #a855f7, #f59e0b, var(--gx-error), var(--gx-success), var(--gx-indigo-light));  
  border-radius: 3px;  
}  

.timeline-item {  
  position: relative;  
  display: grid;  
  grid-template-columns: 1fr 60px 1fr;  
  align-items: center;  
  margin-bottom: 2.5rem;  
}  

.timeline-card {  
  background: var(--gx-white);  
  border-radius: 1.25rem;  
  padding: 1.5rem 1.5rem;  
  text-align: left;  
  box-shadow: 0 10px 25px -10px rgba(15,23,42,0.12);  
  border: 1px solid var(--gx-line-soft);  
  transition: var(--gx-transition);  
}  

.timeline-card:hover {  
  transform: translateY(-5px);  
  box-shadow: 0 20px 30px -12px rgba(15,23,42,0.18);  
}  

.timeline-year {  
  display: inline-block;  
  font-size: 0.8rem;  
  font-weight: 800;  
  color: var(--gx-white);  
  padding: 0.25rem 0.9rem;  
  border-radius: 60px;  
  margin-bottom: 0.6rem;  
}  

.timeline-title {  
  font-size: var(--gx-fs-lg);  
  font-weight: 700;  
  color: var(--gx-ink);  
  margin-bottom: 0.35rem;  
}  

.timeline-desc {  
  font-size: var(--gx-fs-md);  
  color: var(--gx-muted);  
}  

.timeline-dot {  
  position: relative;  
  z-index: 2;  
  width: 46px;  
  height: 46px;  
  border-radius: var(--gx-r-circle);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  color: var(--gx-white);  
  font-size: var(--gx-fs-lg);  
  margin: 0 auto;  
  box-shadow: 0 0 0 6px var(--gx-surface);  
}  

.timeline-item:nth-child(odd) .timeline-card { grid-column: 1; }  
.timeline-item:nth-child(odd) .timeline-spacer { grid-column: 3; }  
.timeline-item:nth-child(even) .timeline-card { grid-column: 3; }  
.timeline-item:nth-child(even) .timeline-spacer { grid-column: 1; }  
.timeline-dot { grid-column: 2; }  

.ms-2014 { background: linear-gradient(135deg, var(--gx-indigo-light), #4338ca); }  
.ms-2016 { background: linear-gradient(135deg, var(--gx-success), var(--gx-success-dark)); }  
.ms-2018 { background: linear-gradient(135deg, #a855f7, var(--gx-violet)); }  
.ms-2020 { background: linear-gradient(135deg, #f97316, #ea580c); }  
.ms-2022 { background: linear-gradient(135deg, #f59e0b, #d97706); }  
.ms-2024 { background: linear-gradient(135deg, var(--gx-indigo-light), #4338ca); }  

/* Team Section */  
.team-section {  
  margin: 5rem 0;  
  text-align: center;  
}  

.team-grid {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  
  gap: 1.5rem;  
  margin-top: 2.5rem;  
}  

.team-card {  
  position: relative;  
  isolation: isolate;  
  overflow: hidden;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  min-height: 290px;  
  padding: 2.25rem 1.25rem 1.5rem;  
  background: rgba(255, 255, 255, 0.94);  
  border: 1px solid rgba(226, 232, 240, 0.9);  
  border-radius: 1.5rem;  
  box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.38);  
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;  
}  

.team-card::before {  
  content: "";  
  position: absolute;  
  inset: 0 0 auto;  
  height: 4px;  
  background: linear-gradient(90deg, var(--gx-danger), #60a5fa, var(--gx-accent));  
  z-index: -1;  
}  

.team-card:hover {  
  transform: translateY(-7px);  
  border-color: var(--gx-danger-line);  
  box-shadow: 0 24px 38px -20px rgba(37,99,235,0.35);  
}  

.team-avatar {  
  width: 116px;  
  height: 116px;  
  flex: 0 0 auto;  
  margin: 0 auto 1.1rem;  
  padding: 5px;  
  background: linear-gradient(145deg, var(--gx-danger-soft), var(--gx-danger-line));  
  border-radius: var(--gx-r-circle);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  box-shadow: 0 8px 18px -12px rgba(37,99,235,0.65);  
  transition: transform 0.3s ease, box-shadow 0.3s ease;  
}  

.team-card:hover .team-avatar {  
  transform: scale(1.04);  
  box-shadow: 0 12px 24px -12px rgba(37,99,235,0.7);  
}  

.team-avatar i {  
  font-size: 3rem;  
  color: var(--gx-danger-dark);  
}  
.team-avatar img {  
  width: 100%;  
  height: 100%;  
  border-radius: inherit;  
  object-fit: cover;  
  display: block;  
}  

.team-bio {  
  color: var(--gx-text-muted, #475569);  
  font-size: var(--gx-fs-sm);  
  line-height: 1.6;  
  margin-top: 0.75rem;  
}  
.member-social {  
  display: flex;  
  gap: 0.6rem;  
  justify-content: center;  
  margin-top: 0.75rem;  
}  

.member-social a {  
  width: 36px;  
  height: 36px;  
  background: var(--gx-surface);  
  border-radius: var(--gx-r-circle);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  color: var(--gx-danger);  
  transition: var(--gx-transition-fast);  
  text-decoration: none;  
}  

.member-social a:hover {  
  background: var(--gx-danger);  
  color: white;  
}  

.team-card h4 {  
  color: var(--gx-ink);  
  font-family: var(--gx-font-head);  
  font-size: 1.25rem;  
  line-height: 1.25;  
  text-align: center;  
  margin-bottom: 0.15rem;  
}  

.team-role {  
  color: var(--gx-danger);  
  font-weight: 600;  
  font-size: var(--gx-fs-sm);  
  background: var(--gx-danger-tint);  
  display: inline-block;  
  padding: 0.35rem 0.9rem;  
  border-radius: var(--gx-r-xl);  
  margin-top: 0.45rem;  
  text-align: center;  
}  

/* Clients Section */  
.clients-section {  
  background: rgba(255,255,255,0.7);  
  -webkit-backdrop-filter: blur(10px);  
  backdrop-filter: blur(10px);  
  border-radius: 2.5rem;  
  padding: 2.5rem;  
  margin: 4rem 0;  
  text-align: center;  
  border: 1px solid rgba(255,255,255,0.8);  
  box-shadow: 0 20px 35px -15px rgba(0,0,0,0.05);  
}  

.client-logos {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: center;  
  gap: 1rem 1.8rem;  
  margin-top: 2rem;  
}  

.client-logos span {  
  background: white;  
  padding: 0.5rem 1.5rem;  
  border-radius: var(--gx-r-pill);  
  font-size: var(--gx-fs-md);  
  font-weight: 600;  
  color: var(--gx-ink-soft);  
  border: 1px solid var(--gx-line);  
  transition: var(--gx-transition-fast);  
}  

.client-logos span:hover {  
  background: var(--gx-danger);  
  color: white;  
  border-color: var(--gx-danger);  
  transform: translateY(-3px);  
}  

/* CTA Section */  
.cta-section {  
  background: linear-gradient(135deg, var(--gx-danger), var(--gx-danger-dark));  
  border-radius: 2rem;  
  padding: 3rem 2.5rem;  
  text-align: center;  
  margin-top: 4rem;  
}  

.cta-section h3 {  
  color: white;  
  font-size: 2rem;  
  margin-bottom: 0.5rem;  
}  

.cta-section p {  
  color: var(--gx-danger-line);  
  margin-bottom: 1.5rem;  
}  

.cta-btn {  
  background: white;  
  color: var(--gx-danger-dark);  
  padding: 0.8rem 2rem;  
  border-radius: var(--gx-r-pill);  
  font-weight: 700;  
  text-decoration: none;  
  display: inline-flex;  
  align-items: center;  
  gap: 0.5rem;  
  transition: 0.2s;  
}  

.cta-btn:hover {  
  transform: scale(1.05);  
  background: var(--gx-danger-tint);  
  box-shadow: 0 10px 20px -8px #00000040;  
}  

/* Responsive */  
@media (max-width: 1024px) {  
  .timeline-item { grid-template-columns: 50px 1fr; }  
  .timeline-item .timeline-card,  
  .timeline-item .timeline-spacer { grid-column: 2 !important; }  
  .timeline-item .timeline-spacer { display: none; }  
  .timeline-dot { grid-column: 1 !important; grid-row: 1; }  
  .timeline:before { left: 23px; }  
}  

@media (max-width: 768px) {  
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }  
  .values-grid { grid-template-columns: 1fr; }  
  /* .hero-about h1 uses clamp() now, so no override is needed here. */  
  .about-container { padding: 1rem; }  

  .vm-row, .vm-row.reverse {  
    grid-template-columns: 1fr;  
    gap: 2.5rem;  
  }  
  .vm-row .vm-media, .vm-row.reverse .vm-media { order: 1; }  
  .vm-row .vm-content, .vm-row.reverse .vm-content { order: 2; }  
  .vm-media-floater, .vm-row.reverse .vm-media-floater { left: 1rem; right: auto; top: -1rem; }  
  .vm-badge-card, .vm-row.reverse .vm-badge-card { right: 1rem; left: auto; bottom: -1.25rem; }  
  .vm-content h3 { font-size: var(--gx-fs-3xl); }  
}