/* ADA Impact Foundation - Main Stylesheet */

/* ============================================================
   CSS Variables
============================================================ */
:root {
  --green-dark:   #1e4d2b;
  --green-mid:    #2d6a3f;
  --green-light:  #4a9060;
  --green-pale:   #eef6f0;
  --orange:       #e87722;
  --orange-dark:  #c55f10;
  --cream:        #faf8f3;
  --white:        #ffffff;
  --text-dark:    #1a2410;
  --text-mid:     #4a5540;
  --text-light:   #8a9a80;
  --border:       #d8e8d0;
  --shadow-sm:    0 2px 8px rgba(30,77,43,0.08);
  --shadow-md:    0 8px 32px rgba(30,77,43,0.12);
  --shadow-lg:    0 24px 64px rgba(30,77,43,0.16);
  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --transition:   0.3s cubic-bezier(0.4,0,0.2,1);
  --container:    1200px;
}

/* ============================================================
   Reset & Base
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--text-dark);
  background: var(--cream);
  overflow-x: hidden;
  line-height: 1.6;
}
a { color: var(--green-mid); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--green-dark); }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; }

/* ============================================================
   Container
============================================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* ============================================================
   Typography
============================================================ */
.section-tag {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-mid);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.2;
  margin-bottom: 20px;
}
.section-sub {
  font-size: 17px;
  color: var(--text-mid);
  max-width: 540px;
  line-height: 1.7;
  margin-bottom: 40px;
}

/* ============================================================
   Buttons
============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 50px;
  border: none;
  box-shadow: 0 8px 24px rgba(232,119,34,0.4);
  transition: all var(--transition);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(232,119,34,0.5); color: #fff; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.5);
  transition: all var(--transition);
}
.btn-outline:hover { background: rgba(255,255,255,0.15); border-color: #fff; color: #fff; }

/* ============================================================
   Floating Donate Button
============================================================ */
.float-donate {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 999;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 50px;
  box-shadow: 0 8px 32px rgba(232,119,34,0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition);
  animation: pulse 2.5s ease-in-out infinite;
}
.float-donate:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 48px rgba(232,119,34,0.6); color: #fff; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(232,119,34,0.5); }
  50% { box-shadow: 0 8px 56px rgba(232,119,34,0.8); }
}

/* ============================================================
   Header / Navigation
============================================================ */
#main-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
#main-header.scrolled { box-shadow: var(--shadow-md); }
nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--green-dark), var(--green-light));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.logo-text { font-size: 15px; font-weight: 800; color: var(--green-dark); line-height: 1.2; }
.logo-sub  { font-size: 10px; color: var(--text-light); letter-spacing: 0.5px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-links li a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mid);
  padding: 8px 14px;
  border-radius: 8px;
  transition: all var(--transition);
  text-decoration: none;
}
.nav-links li a:hover { background: var(--green-pale); color: var(--green-dark); }
.nav-links li a.donate-btn {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #fff;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 16px rgba(232,119,34,0.35);
}
.nav-links li a.donate-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(232,119,34,0.5); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--green-dark);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ============================================================
   Hero Section
============================================================ */
#home {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 50%, #1a5c30 100%);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(74,144,96,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);
  will-change: transform;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px 32px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
}
.hero-text { display: flex; flex-direction: column; gap: 20px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.2);
  letter-spacing: 0.5px;
  width: fit-content;
}
.hero-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}
.hero-text h1 span { color: #f0c060; }
.hero-text p {
  font-size: 18px;
  color: rgba(255,255,255,0.82);
  line-height: 1.75;
  max-width: 480px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-image-col { display: flex; flex-direction: column; gap: 16px; }
.hero-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-img-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 3px solid rgba(255,255,255,0.15);
}
.hero-img-card img { width: 100%; height: 200px; object-fit: cover; }
.hero-img-row .hero-img-card img { height: 130px; }
.img-label {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 24px 14px 12px;
}

/* ============================================================
   Stats Bar
============================================================ */
#stats {
  background: var(--green-dark);
  padding: 0;
}
.stats-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-card {
  padding: 48px 24px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: background var(--transition);
}
.stat-card:last-child { border-right: none; }
.stat-card:hover { background: rgba(255,255,255,0.05); }
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  color: #f0c060;
  line-height: 1;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.stat-suffix { font-size: 0.6em; color: var(--orange); }
.stat-label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0.5px; }

/* ============================================================
   About Section
============================================================ */
#about { padding: 100px 0; background: var(--cream); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-image {
  position: relative;
}
.about-img-main {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.about-img-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-md);
  border: 4px solid var(--cream);
}
.about-img-badge .num { font-size: 36px; font-weight: 800; line-height: 1; }
.about-img-badge .lbl { font-size: 12px; font-weight: 600; text-align: center; opacity: 0.9; line-height: 1.3; }
.vision-box {
  background: var(--green-pale);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green-mid);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-top: 24px;
}
.vision-box h4 { font-size: 17px; font-weight: 700; color: var(--green-dark); margin-bottom: 10px; }
.vision-box p { font-size: 15px; color: var(--text-mid); line-height: 1.7; }

/* ============================================================
   Pillars
============================================================ */
#pillars {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
  padding: 100px 0;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.pillar-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  transition: all var(--transition);
  backdrop-filter: blur(10px);
}
.pillar-card:hover { background: rgba(255,255,255,0.14); transform: translateY(-6px); }
.pillar-icon { font-size: 48px; display: block; margin-bottom: 20px; }
.pillar-card h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.pillar-card p { font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.7; }

/* ============================================================
   Impact Grid
============================================================ */
#impact { padding: 100px 0; background: var(--cream); }
.impact-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  flex-wrap: wrap;
  gap: 24px;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.impact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: all var(--transition);
}
.impact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--green-light); }
.impact-card .icon { font-size: 36px; display: block; margin-bottom: 16px; }
.impact-card h4 { font-size: 17px; font-weight: 700; color: var(--green-dark); margin-bottom: 10px; }
.impact-card p { font-size: 14px; color: var(--text-mid); line-height: 1.7; }

/* ============================================================
   Programs
============================================================ */
#programs { padding: 100px 0; background: var(--white); }
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.program-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.program-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.program-img { width: 100%; height: 220px; object-fit: cover; }
.program-body { padding: 28px; }
.program-tag {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-mid);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 50px;
  margin-bottom: 12px;
}
.program-body h3 { font-size: 18px; font-weight: 700; color: var(--green-dark); margin-bottom: 10px; }
.program-body p { font-size: 14px; color: var(--text-mid); line-height: 1.7; margin-bottom: 16px; }
.learn-more {
  color: var(--green-mid);
  font-size: 14px;
  font-weight: 700;
  transition: color var(--transition);
}
.learn-more:hover { color: var(--orange); }

/* ============================================================
   Get Involved
============================================================ */
#involved { padding: 100px 0; }
.involved-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.involved-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: all var(--transition);
}
.involved-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.involved-icon {
  width: 56px; height: 56px;
  background: var(--green-pale);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.involved-card h4 { font-size: 16px; font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
.involved-card p { font-size: 14px; color: var(--text-mid); line-height: 1.6; }

/* ============================================================
   UPI Section
============================================================ */
.upi-section {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
  padding: 80px 32px;
  text-align: center;
}
.upi-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 42px);
  color: #fff;
  margin-bottom: 16px;
}
.upi-section > p {
  font-size: 17px;
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.7;
}
.upi-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-xl);
  padding: 40px;
  backdrop-filter: blur(10px);
  min-width: 320px;
}
.upi-placeholder {
  width: 220px; height: 220px;
  background: rgba(255,255,255,0.1);
  border: 2px dashed rgba(255,255,255,0.4);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}
.upi-icon { font-size: 48px; }
.upi-label {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.upi-id {
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: monospace;
}

/* ============================================================
   Team Section
============================================================ */
#team { padding: 100px 0; background: var(--cream); }
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  transition: all var(--transition);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.team-photo, .team-img-placeholder {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.team-img-placeholder {
  background: var(--green-pale);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-light);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.team-img-icon { font-size: 48px; }
.team-body { padding: 24px; }
.team-body h4 { font-size: 17px; font-weight: 700; color: var(--green-dark); margin-bottom: 4px; }
.team-body p { font-size: 13px; color: var(--text-light); font-weight: 500; margin-bottom: 12px; }
.team-socials { display: flex; gap: 8px; justify-content: center; }
.team-socials a {
  width: 32px; height: 32px;
  background: var(--green-pale);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  transition: all var(--transition);
}
.team-socials a:hover { background: var(--green-dark); color: #fff; }

/* ============================================================
   Footer
============================================================ */
footer {
  background: #0f2817;
  padding: 80px 0 0;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}
.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: 48px;
}
.footer-brand p {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin: 16px 0 24px;
  max-width: 280px;
}
.social-links { display: flex; gap: 12px; }
.social-links a {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  transition: all var(--transition);
  text-decoration: none;
}
.social-links a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
footer h5 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.5px; }
footer ul { display: flex; flex-direction: column; gap: 10px; }
footer ul li a, footer ul li p, footer ul li {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  transition: color var(--transition);
  line-height: 1.5;
}
footer ul li a:hover { color: var(--orange); }
.footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

/* ============================================================
   Contact Page
============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.cinfo-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 16px;
  transition: all var(--transition);
}
.cinfo-card:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
.cinfo-icon {
  width: 48px; height: 48px;
  background: var(--green-pale);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.cinfo-card h5 { font-size: 13px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.cinfo-card a, .cinfo-card p { font-size: 15px; color: var(--text-dark); font-weight: 500; }

/* ============================================================
   Forms
============================================================ */
.contact-form-wrap, .donation-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text-mid); }
.form-group input, .form-group textarea, .form-group select {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--cream);
  transition: border-color var(--transition);
  outline: none;
  width: 100%;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--green-mid);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(45,106,63,0.12);
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* Donation form extras */
.donation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.donation-amounts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.amount-chip {
  padding: 10px 20px;
  border: 2px solid var(--border);
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-mid);
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}
.amount-chip:hover, .amount-chip.active {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(232,119,34,0.06);
}
.donate-submit {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(232,119,34,0.4);
  transition: all var(--transition);
  cursor: pointer;
}
.donate-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(232,119,34,0.5); }

/* ============================================================
   Scroll Animations
============================================================ */
.fade-up, .fade-in, .slide-left, .slide-right {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up    { transform: translateY(40px); }
.fade-in    { transform: scale(0.96); }
.slide-left { transform: translateX(-50px); }
.slide-right{ transform: translateX(50px); }
.fade-up.visible, .fade-in.visible, .slide-left.visible, .slide-right.visible {
  opacity: 1;
  transform: none;
}
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 48px; }
  .hero-image-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-img-row { display: contents; }
  .hero-img-card img { height: 160px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-img-badge { right: 20px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card:nth-child(2) { border-right: none; }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  nav { padding: 0 20px; }
  .nav-links { display: none; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 16px 20px 24px; gap: 4px; box-shadow: var(--shadow-md); }
  .nav-links.open { display: flex; }
  .nav-links li a { display: block; padding: 12px 16px; }
  .hamburger { display: flex; }
  .hero-content { padding: 100px 20px 60px; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .programs-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .involved-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .donation-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .float-donate { bottom: 16px; right: 16px; font-size: 13px; padding: 12px 18px; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
}

@media (max-width: 480px) {
  .hero-image-col { display: none; }
  .impact-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 32px 16px; }
  #team { padding: 60px 0; }
}

/* ============================================================
   ADA Impact Foundation 2.0 refinements
============================================================ */
:root{--green-dark:#3b1019;--green-mid:#7f2434;--green-light:#b76372;--green-pale:#f9ecee;--orange:#b08a55;--cream:#fffaf6;--text-dark:#21181a;--text-mid:#62575a;--text-light:#8a7e80;--border:#eadde0;--radius:18px;--shadow:0 18px 50px rgba(59,16,25,.12)}
html{scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text-dark);background:#fff}.skip-link{position:fixed;left:16px;top:-80px;z-index:9999;background:#fff;color:#000;padding:12px 18px;border-radius:8px}.skip-link:focus{top:16px}#main-content{overflow:hidden}.container{max-width:1180px;margin-inline:auto;padding-inline:24px}.default-logo,.custom-logo{display:block;width:auto;height:58px;object-fit:contain}.logo{min-width:190px}.custom-logo-link{display:block}.nav-links a{font-weight:650}.nav-links .current-menu-item>a{color:var(--orange)}
.home-hero{min-height:760px}.hero-bg{background-image:linear-gradient(115deg,rgba(59,16,25,.04),rgba(59,16,25,.28)),url('../images/projects/food-distribution.jpg');background-size:cover;background-position:center}.hero-overlay{background:linear-gradient(90deg,rgba(32,10,15,.94) 0%,rgba(32,10,15,.78) 44%,rgba(32,10,15,.2) 100%)}.hero-content{padding-top:130px}.hero-text h1 span{color:#f0c98f}.hero-img-card img{width:100%;height:100%;object-fit:cover}.hero-main-photo{height:360px}.hero-img-row .hero-img-card{height:180px}.img-label{background:rgba(35,12,18,.85)}
section{padding:92px 0}.section-soft{background:linear-gradient(135deg,#fffaf7,#f9ecee)}.section-heading{text-align:center;max-width:720px;margin:0 auto 44px}.split-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:40px}.split-heading .section-title{margin-bottom:0}.page-hero{padding:150px 0 86px;background:linear-gradient(125deg,#3b1019,#7f2434);color:#fff;position:relative}.page-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.13),transparent 26%);pointer-events:none}.page-hero .container{position:relative;z-index:1}.page-hero h1{font-family:'Playfair Display',serif;font-size:clamp(42px,6vw,72px);line-height:1.06;max-width:900px;margin:12px 0 18px}.page-hero p{font-size:19px;line-height:1.7;max-width:760px;color:rgba(255,255,255,.84)}.page-hero .section-tag{color:#f3d3a5}.inner-page>section:not(.page-hero){padding:88px 0}
.about-img-main{aspect-ratio:4/3;object-fit:cover}.about-text p,.inner-page p{font-size:17px;line-height:1.75;color:var(--text-mid)}.about-img-badge .num{font-size:24px}.vision-box{border-left-color:var(--orange)}
#pillars{background:#3b1019}.pillar-card{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.065)}.pillar-icon{color:#f0c98f}.pillar-card h3{color:#fff}.pillar-card p{color:rgba(255,255,255,.74)}
.content-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.content-card-grid.two-column{grid-template-columns:repeat(2,minmax(0,1fr))}.story-card{border:1px solid var(--border);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 12px 34px rgba(59,16,25,.08);transition:.25s ease}.story-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.story-image{display:block;height:245px;overflow:hidden}.story-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.story-card:hover .story-image img{transform:scale(1.04)}.story-body{padding:26px}.story-body h3{font-family:'Playfair Display',serif;font-size:23px;line-height:1.25;margin:10px 0}.story-body h3 a{color:var(--green-dark);text-decoration:none}.story-body p{font-size:15px;line-height:1.65;color:var(--text-mid)}
.team-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.team-card{border:1px solid var(--border);box-shadow:0 10px 28px rgba(59,16,25,.08)}.team-photo{width:100%;height:300px;object-fit:cover;object-position:center top;background:#f7f1f2}.team-body{text-align:center}.team-body h4{font-size:18px}.team-socials{justify-content:center}.team-socials a.is-empty{opacity:.4;border-style:dashed}.team-socials a:focus{outline:2px solid var(--orange);outline-offset:2px}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.value-grid article{padding:32px;border-radius:18px;background:#fff;border:1px solid var(--border);box-shadow:0 10px 30px rgba(59,16,25,.06)}.value-grid h3{font-family:'Playfair Display',serif;color:var(--green-dark);font-size:24px;margin-bottom:12px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.process-grid article{background:#fff;border:1px solid var(--border);padding:28px;border-radius:16px}.process-grid b{color:var(--orange);font-size:28px}.process-grid h3{margin:12px 0 8px;color:var(--green-dark)}
.cta-band{background:linear-gradient(120deg,#3b1019,#7f2434);color:#fff;text-align:center}.cta-band h2{font-family:'Playfair Display',serif;font-size:clamp(32px,5vw,52px)}.cta-band p{color:rgba(255,255,255,.78);margin:12px auto 28px;max-width:680px}.btn-primary{background:var(--orange);color:#21150a}.btn-primary:hover{background:#cda46b}.btn-outline{border-color:rgba(255,255,255,.7)}
.contact-grid{align-items:start;gap:42px}.contact-form-wrap{box-shadow:var(--shadow)}.contact-form .btn-primary{width:100%;justify-content:center}.map-section iframe{border-radius:20px!important;box-shadow:var(--shadow)}
.donation-layout{display:grid;grid-template-columns:1fr .9fr;gap:64px;align-items:center}.check-list{list-style:none;padding:0;margin:28px 0;display:grid;gap:13px}.check-list li:before{content:'✓';display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--green-pale);color:var(--green-mid);font-weight:800;margin-right:10px}.donation-note{padding:20px;border-left:4px solid var(--orange);background:#fff8ed;border-radius:8px;margin:24px 0}.qr-card{background:#fff;text-align:center;padding:34px;border-radius:24px;border:1px solid var(--border);box-shadow:var(--shadow)}.qr-card img{display:block;width:min(100%,500px);max-height:640px;object-fit:contain;margin:20px auto}.qr-card h2{font-size:20px;color:#123a60}.verified-badge{display:inline-block;background:#fff1e7;color:#a7371d;font-weight:800;padding:8px 13px;border-radius:999px}.upi-copy-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0}.upi-copy-row code{padding:10px 12px;border-radius:8px;background:#f5f2f2;overflow-wrap:anywhere}.upi-copy-row button{border:0;border-radius:8px;padding:10px 16px;background:var(--green-dark);color:#fff;cursor:pointer}.upi-open{display:inline-flex;margin-top:4px}.qr-card small{color:var(--text-light)}
.footer-brand-link img{width:190px;background:#fff;border-radius:12px;padding:7px}.footer-grid{align-items:start}.footer-bottom{gap:20px;flex-wrap:wrap}
.single-story{padding-top:72px}.single-story .post-hero-image{width:100%;max-height:600px;object-fit:cover;border-radius:24px;margin:32px 0}.single-story .entry-content{max-width:820px;margin:auto;font-size:18px;line-height:1.8}.single-story .entry-content p{margin:0 0 20px}
@media(max-width:1024px){.team-grid{grid-template-columns:repeat(3,1fr)}.content-card-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.donation-layout{gap:36px}}
@media(max-width:760px){section,.inner-page>section:not(.page-hero){padding:64px 0}.page-hero{padding:120px 0 64px}.home-hero{min-height:auto}.hero-content{padding-top:110px}.hero-image-col{margin-top:24px}.split-heading{align-items:start;flex-direction:column}.content-card-grid,.content-card-grid.two-column,.value-grid,.donation-layout{grid-template-columns:1fr}.team-grid{grid-template-columns:repeat(2,1fr)}.team-photo{height:260px}.qr-card{padding:18px}.process-grid{grid-template-columns:1fr}.float-donate{bottom:16px;right:16px}.default-logo,.custom-logo{height:48px}.logo{min-width:150px}}
@media(max-width:440px){.team-grid{grid-template-columns:1fr}.team-photo{height:360px}.content-card-grid{grid-template-columns:1fr}.upi-copy-row{flex-direction:column}.page-hero h1{font-size:40px}}
.site-search-button{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--green-dark);font-size:24px;cursor:pointer}.search-drawer[hidden]{display:none}.search-drawer{position:fixed;inset:0;z-index:999;background:rgba(25,7,11,.72);display:grid;place-items:start center;padding-top:120px}.search-drawer-inner{position:relative;width:min(720px,calc(100% - 32px));padding:28px;background:#fff;border-radius:20px;box-shadow:var(--shadow)}#site-search-close{position:absolute;right:13px;top:8px;border:0;background:transparent;font-size:30px;cursor:pointer}.site-search-form{display:flex;gap:10px;margin-top:18px}.site-search-form input{flex:1;min-width:0;border:1px solid var(--border);border-radius:10px;padding:14px;font-size:16px}.site-search-form button{border:0;border-radius:10px;background:var(--green-dark);color:#fff;padding:0 22px;font-weight:700}.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.site-search-button{margin-left:auto}.site-search-form{flex-direction:column}.site-search-form button{padding:14px}}
/* Elementor compatibility: edge-to-edge ADA widgets with native Advanced spacing controls. */
.ada-elementor-content>.elementor{width:100%}.elementor-page [class*="elementor-widget-ada-"]{width:100%}.elementor-page .elementor-widget-container>.elementor-ada-section{margin:0}.ada-feature-section{background:linear-gradient(135deg,#fffaf7,#f9ecee)}.ada-feature-section.ada-dark{background:#3b1019}.ada-feature-section.ada-dark .section-title,.ada-feature-section.ada-dark .value-grid h3{color:#fff}.ada-feature-section.ada-dark .section-sub,.ada-feature-section.ada-dark .value-grid p{color:rgba(255,255,255,.74)}.ada-feature-section.ada-dark .value-grid article{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}.feature-icon{display:block;color:var(--orange);font-size:28px;margin-bottom:8px}.value-grid.cols-2{grid-template-columns:repeat(2,1fr)}.value-grid.cols-4{grid-template-columns:repeat(4,1fr)}.elementor-editor-active .fade-up,.elementor-editor-active .fade-in,.elementor-editor-active .slide-left,.elementor-editor-active .slide-right{opacity:1!important;transform:none!important}@media(max-width:900px){.value-grid.cols-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.value-grid.cols-2,.value-grid.cols-4{grid-template-columns:1fr}}

/* ============================================================
   ADA 2.2 — light, colourful, privacy-conscious presentation
============================================================ */
:root{
  --green-dark:#355f54;
  --green-mid:#4f8174;
  --green-light:#8fc2b2;
  --green-pale:#edf8f4;
  --orange:#d98a5f;
  --orange-dark:#bd7049;
  --cream:#fffdf9;
  --text-dark:#293b37;
  --text-mid:#536965;
  --text-light:#71847f;
  --border:#dcece7;
  --sun:#f6d98c;
  --sky:#dfeffc;
  --rose:#f8e7ec;
  --lavender:#eee9fa;
  --shadow:0 14px 38px rgba(53,95,84,.10);
}
body{background:#fffdf9;color:var(--text-dark)}
section,.elementor-ada-section{position:relative;isolation:isolate;overflow:hidden}
section>.container,.elementor-ada-section>.container{position:relative;z-index:2}
section:nth-of-type(4n+1){background-color:#fffdf9}
section:nth-of-type(4n+2){background-color:#f5fbf8}
section:nth-of-type(4n+3){background-color:#fff8f2}
section:nth-of-type(4n){background-color:#f8f6fd}
.section-soft,.ada-feature-section,.ada-feature-section.ada-dark,#pillars,#team{
  background:linear-gradient(135deg,#fffdf9 0%,#f4fbf8 52%,#fff4ed 100%);
}
/* Soft content-related illustration shapes: leaf, sun and community circles. */
section:not(.home-hero)::before,.elementor-ada-section:not(.home-hero)::before{
  content:"";position:absolute;z-index:0;width:170px;height:170px;right:-70px;top:28px;
  border-radius:68% 32% 64% 36%;background:rgba(143,194,178,.16);transform:rotate(24deg);pointer-events:none;
}
section:not(.home-hero)::after,.elementor-ada-section:not(.home-hero)::after{
  content:"";position:absolute;z-index:0;width:110px;height:110px;left:-44px;bottom:22px;
  border-radius:50%;background:rgba(246,217,140,.19);box-shadow:48px -18px 0 rgba(223,239,252,.22);pointer-events:none;
}
.page-hero,.cta-band{
  background:linear-gradient(125deg,#eef8f4 0%,#fff5ee 54%,#f2edfb 100%);color:var(--text-dark);
}
.page-hero:after{background:radial-gradient(circle at 86% 30%,rgba(246,217,140,.38),transparent 25%)}
.page-hero h1,.page-hero p,.page-hero .section-title,.cta-band h2{color:var(--text-dark)}
.page-hero p,.cta-band p{color:var(--text-mid)}
.page-hero .section-tag{color:var(--green-mid);background:#fff;border-color:var(--border)}
#pillars .pillar-card,.ada-feature-section.ada-dark .value-grid article{
  background:rgba(255,255,255,.88);border:1px solid var(--border);box-shadow:var(--shadow)
}
#pillars .pillar-card h3,#pillars .pillar-card p,.ada-feature-section.ada-dark .section-title,.ada-feature-section.ada-dark .value-grid h3{color:var(--text-dark)}
#pillars .pillar-card p,.ada-feature-section.ada-dark .section-sub,.ada-feature-section.ada-dark .value-grid p{color:var(--text-mid)}
.pillar-icon,.feature-icon{color:var(--orange)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 22px rgba(217,138,95,.25)}
.btn-primary:hover{background:var(--orange-dark);color:#fff}
.btn-outline{background:#fff;color:var(--green-dark);border-color:var(--green-light)}
.btn-outline:hover{background:var(--green-pale);color:var(--green-dark);border-color:var(--green-mid)}
.home-hero{background:#f4fbf8}
.home-hero .hero-bg{filter:blur(10px);transform:scale(1.04);opacity:.25}
.home-hero .hero-overlay{background:linear-gradient(90deg,rgba(255,253,249,.98) 0%,rgba(255,253,249,.88) 48%,rgba(255,253,249,.42) 100%)}
.home-hero .hero-text h1,.home-hero .hero-text p{color:var(--text-dark)}
.home-hero .hero-text h1 span{color:var(--orange-dark)}
.home-hero .badge{background:#fff;color:var(--green-dark);border:1px solid var(--border)}
.hero-img-card{background:#fff;border:5px solid rgba(255,255,255,.95);box-shadow:var(--shadow)}
.team-body p{margin-bottom:0}.team-socials{display:none!important}
footer{background:linear-gradient(135deg,#eff8f5,#fff6ef);color:var(--text-mid);border-top:1px solid var(--border)}
footer h5{color:var(--green-dark)}
.footer-brand p,footer ul li,footer ul li a,footer ul li p{color:var(--text-mid)}
.footer-bottom{color:var(--text-light);border-top-color:var(--border)}
.footer-address{max-width:260px}
.social-links{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.social-links a,.social-links .social-link-disabled{
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#fff;
  border:1px solid var(--border);color:var(--green-dark);box-shadow:0 4px 12px rgba(53,95,84,.06)
}
.social-links a:hover{background:var(--green-pale);border-color:var(--green-light);color:var(--green-dark);transform:translateY(-2px)}
.social-links .social-link-disabled{opacity:.62}
.social-links svg{width:21px;height:21px;fill:currentColor;stroke:currentColor;stroke-width:1.4}
.social-links svg rect,.social-links svg circle{fill:none}
.footer-brand-link img{background:#fff}
.cinfo-card,.contact-form-wrap,.story-card,.team-card,.value-grid article,.process-grid article,.qr-card{background:rgba(255,255,255,.94)}
@media(max-width:760px){
  section:not(.home-hero)::before,.elementor-ada-section:not(.home-hero)::before{width:110px;height:110px;right:-52px}
  .home-hero .hero-overlay{background:rgba(255,253,249,.9)}
}

/* ============================================================
   ADA 2.2.1 — stable, equal-size team member cards
   Replacing a portrait never changes the card dimensions.
============================================================ */
.team-grid{align-items:stretch;grid-auto-rows:1fr}
.team-card{display:flex;flex-direction:column;width:100%;height:100%;min-width:0}
.team-card .team-photo,.team-card .team-img-placeholder{
  display:block;flex:0 0 300px;width:100%;height:300px;min-height:300px;max-height:300px;
  aspect-ratio:auto;object-fit:cover;object-position:center top;overflow:hidden
}
.team-card .team-body{
  display:flex;flex:1 1 auto;min-height:112px;flex-direction:column;align-items:center;
  justify-content:center;padding:22px 18px
}
.team-card .team-body h4,.team-card .team-body p{overflow-wrap:anywhere}
@media(max-width:760px){
  .team-card .team-photo,.team-card .team-img-placeholder{flex-basis:280px;height:280px;min-height:280px;max-height:280px}
}
@media(max-width:440px){
  .team-card .team-photo,.team-card .team-img-placeholder{flex-basis:340px;height:340px;min-height:340px;max-height:340px}
}

/* ADA 2.2.2 — visible, editable headings for all Home Hero images. */
.home-hero .hero-img-card .img-label{
  left:12px;right:auto;bottom:12px;max-width:calc(100% - 24px);
  padding:8px 12px;border:1px solid rgba(220,236,231,.95);border-radius:9px;
  background:rgba(255,255,255,.94);color:var(--green-dark);box-shadow:0 4px 14px rgba(41,59,55,.12);
  font-size:12px;font-weight:750;line-height:1.25;letter-spacing:.01em
}

/* ===================================================
   Who We Are - Platform & Device Optimized Styling
=================================================== */

/* Container wrapper fallback (if your theme doesn't already define it) */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Section vertical spacing with fluid padding */
.about-intro {
    width: 100%;
    /* Scales vertical spacing dynamically across screen sizes */
    padding: clamp(2.5rem, 5vw, 5rem) 1.25rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* Constrained content box to keep reading comfortable */
.about-intro .about-content {
    width: 100%;
    max-width: 820px; /* Prevents wide stretching on ultra-wide / large monitors */
    margin: 0 auto;
    box-sizing: border-box;
}

/* Section Title Typography */
.about-intro .section-title {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    line-height: 1.25;
    margin-bottom: 1.5rem;
    color: #1b3d2f; /* Deep green accent */
    font-weight: 700;
}

/* Paragraph Typography & Spacing */
.about-intro .about-content p {
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.75;
    color: #4a5568;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
    /* Prevents awkward text overflow on narrow mobile screens */
    overflow-wrap: break-word;
    word-break: normal;
}

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

/* ===================================================
   Platform Breakpoints (Mobile, Tablet, Desktop)
=================================================== */

/* Mobile Phones (up to 480px) */
@media screen and (max-width: 480px) {
    .about-intro {
        padding: 2.25rem 1rem;
    }

    .about-intro .section-title {
        text-align: left;
    }

    .about-intro .about-content p {
        line-height: 1.65;
    }
}

/* Tablets (481px to 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .about-intro {
        padding: 3.5rem 1.5rem;
    }
}

/* Ultra-wide Monitors (1440px and above) */
@media screen and (min-width: 1440px) {
    .about-intro .about-content {
        max-width: 860px;
    }
}