/* =========================================================
   About Us page (v2) — scoped under .au2 so nothing here
   ever collides with the shared site classes in style.css
   (.hero, .cards, .services, .cta, .btn, .green, .foot, etc.)
   ========================================================= */

.au2{font-family:"Inter",Arial,sans-serif;font-size:16px;line-height:1.7;color:#10233d}
.au2 *{box-sizing:border-box}
.au2 a{text-decoration:none}

.au2 .btn{display:inline-block;background:#0a8d17;color:#fff!important;padding:13px 20px;border-radius:8px;font-size:12px;font-weight:800;letter-spacing:.3px}
.au2 .btn:hover{background:#047e10}

/* ---- Hero ---- */
.au2 .hero{background:linear-gradient(110deg,#eaf7ed,#fff 55%,#d8ebd3);min-height:400px;display:flex;align-items:center;position:relative;overflow:hidden}
/* The shared .hero-bg::after (style.css) is a ~90% opaque dark overlay meant for
   pages with white hero text. This page uses dark text on a light backdrop, so
   we cut it down to a faint wash on the text side only, fading to fully
   transparent — the photo now stays sharp and clearly visible. */
.au2 .hero-bg::after{background:linear-gradient(110deg,#eaf7ed66 0%,#0d0e0d26 35%,transparent 60%)!important}
.au2 .hero:after{content:"";position:absolute;right:-10%;top:-20%;width:55%;height:150%;background:repeating-linear-gradient(25deg,transparent 0 18px,#1b6c8b20 19px 21px),linear-gradient(140deg,transparent,#76ad6920);transform:skewX(-18deg)}
.au2 .page-hero .wrap{position:relative;z-index:2}
.au2 .page-hero small{display:block;font-weight:800;letter-spacing:1.4px;color:#0eeb45;font-size:12px;text-shadow:0 1px 12px #ffffffcc}
.au2 .page-hero h1{font-family:"Plus Jakarta Sans";font-size:48px;font-weight:800;line-height:1.12;margin:14px 0;color:#0c0c0b;text-shadow:0 2px 10px #ffffffb3}
.au2 .page-hero em{font-style:normal;color:#000}
.au2 .page-hero p{max-width:600px;font-size:16.5px;color:#fff;font-weight:600;margin:0;text-shadow:0 1px 10px #00000080}
.au2 .crumb-card{
  position:absolute;right:max(4%,calc((100% - 1180px)/2));bottom:30px;z-index:3;
  background:#fff;padding:14px 26px;border-radius:14px;
  box-shadow:0 16px 32px -10px #10233d40;
  font-size:14px;font-weight:600;
}
.au2 .crumb-card a{color:#e2624a}
.au2 .crumb-card .sep{color:#b7c0cc;margin:0 10px;font-weight:400}
.au2 .crumb-card b{color:#10233d;font-weight:700}

/* ---- Section shell ---- */
.au2 .section{padding:52px 0}
.au2 .light{background:#fbfdfb}

/* ---- Two-column (Who we are / Why choose us) ---- */
.au2 .two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.au2 .visual{height:420px;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 20px 45px #10233d2a}
.au2 .visual img{width:100%;height:100%;object-fit:cover;display:block;border-radius:18px}
.au2 .badge{position:absolute;bottom:20px;left:22px;background:#fff;padding:13px 17px;border-radius:11px;box-shadow:0 8px 25px #0004;z-index:2}
.au2 .badge b{color:#21872b;font-size:12.5px}
.au2 .badge span{font-size:12.5px;color:#45536b}

.au2 small.green{font-weight:800;letter-spacing:1.4px;color:#248d2d;font-size:12px;background:none;padding:0}
.au2 h2{font-family:"Plus Jakarta Sans";font-size:34px;font-weight:800;line-height:1.18;margin:10px 0 16px;color:#10233d}
.au2 h2 em{font-style:normal;color:#238d2d}
.au2 .two p{color:#3d4a5f;margin:0 0 12px;font-size:16px}
.au2 .two ul{list-style:none;padding:0;margin:16px 0 26px}
.au2 .two li{margin:4px 0;font-weight:700;font-size:14.5px;color:#233}

/* ---- Stats strip (3D gradient cards) ---- */
.au2 .stats{background:#eef3f8;padding:44px 0}
.au2 .four{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

.au2 .stat-card{
  position:relative;overflow:hidden;border-radius:18px;padding:22px 20px 60px;
  color:#fff;min-height:170px;
  box-shadow:0 18px 34px -12px #0006, inset 0 1px 0 #ffffff26;
  transition:transform .25s ease, box-shadow .25s ease;
}
.au2 .stat-card:hover{transform:translateY(-6px);box-shadow:0 26px 42px -14px #0007, inset 0 1px 0 #ffffff26}

.au2 .stat-card.c1{background:linear-gradient(155deg,#0d3b66 0%,#08243f 65%,#051627 100%)}
.au2 .stat-card.c2{background:linear-gradient(155deg,#0f4a7a 0%,#0a2c4a 65%,#051627 100%)}
.au2 .stat-card.c3{background:linear-gradient(155deg,#5b3fa8 0%,#2f2166 65%,#160f38 100%)}
.au2 .stat-card.c4{background:linear-gradient(155deg,#0e6b4f 0%,#0a3f30 65%,#04241c 100%)}

.au2 .stat-num{
  display:inline-block;font-family:"Plus Jakarta Sans";font-weight:800;font-size:12px;
  padding:4px 11px;border-radius:20px;letter-spacing:.5px;
}
.au2 .stat-card.c1 .stat-num{background:#26c766;color:#052b12}
.au2 .stat-card.c2 .stat-num{background:#2fa9e6;color:#03263b}
.au2 .stat-card.c3 .stat-num{background:#a480f0;color:#26123f}
.au2 .stat-card.c4 .stat-num{background:#3fd98a;color:#053322}

.au2 .stat-card h3{font-family:"Plus Jakarta Sans";font-size:16px;font-weight:700;margin:16px 0 4px}
.au2 .stat-card p{font-size:12.5px;color:#c9d6e4;margin:0;max-width:78%}

.au2 .stat-icon{
  position:absolute;right:14px;bottom:14px;width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#ffffff26,#ffffff08);
  box-shadow:inset 0 1px 0 #ffffff40, 0 8px 16px #00000030;
  color:#fff;opacity:.9
}
.au2 .stat-card.c1 .stat-icon svg{color:#7dd3ff}
.au2 .stat-card.c2 .stat-icon svg{color:#7de0ff}
.au2 .stat-card.c3 .stat-icon svg{color:#d3b8ff}
.au2 .stat-card.c4 .stat-icon svg{color:#8ef0c0}

.au2 .stat-arrow{
  position:absolute;left:20px;bottom:18px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 6px 14px #0005;transition:transform .2s ease;
}
.au2 .stat-card.c1 .stat-arrow{background:#26c766}
.au2 .stat-card.c2 .stat-arrow{background:#2fa9e6}
.au2 .stat-card.c3 .stat-arrow{background:#a480f0}
.au2 .stat-card.c4 .stat-arrow{background:#3fd98a}
.au2 .stat-card:hover .stat-arrow{transform:translateX(3px)}

/* ---- Centered section header ---- */
.au2 .center{text-align:center}
.au2 .center h2{max-width:640px;margin-left:auto;margin-right:auto}
.au2 .center>p{color:#45536b;max-width:640px;margin:0 auto 34px;font-size:16px}

/* ---- Mission cards grid ---- */
.au2 .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.au2 .cards article{padding:30px;text-align:left;border-radius:15px;background:#f4faef;border:1px solid #e0eddc;font-size:30px}
.au2 .cards h3{margin:12px 0 6px;font-family:"Plus Jakarta Sans";font-size:17px;color:#10233d}
.au2 .cards p{margin:0;color:#45536b;font-size:15px}

/* ---- What We Do ---- */
.au2 .section.wwd{padding:36px 0}
.au2 .wwd{position:relative;overflow:hidden}
.au2 .wwd-sun{position:absolute;top:26px;right:32px;font-size:46px;opacity:.9;filter:drop-shadow(0 6px 10px #f7bc1940)}
.au2 .wwd-leaf-l{position:absolute;top:20px;left:22px;font-size:38px;transform:rotate(-18deg);opacity:.9}

.au2 .wwd-tag{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:12px}
.au2 .wwd-tag .line{width:52px;height:1px;background:#c9dfc4}
.au2 .wwd-tag .pill{background:#e4f6e2;color:#1c8a2c;padding:6px 18px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:1.4px}
.au2 .wwd-h em{background:linear-gradient(90deg,#1c8a2c,#3fd98a);-webkit-background-clip:text;background-clip:text;color:transparent}

.au2 .wwd .center>p{margin-bottom:0}

.au2 .wwd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;text-align:center}

.au2 .wwd-card{
  position:relative;border-radius:16px;padding:18px 16px 44px;
  min-height:135px;justify-content:flex-start;
  box-shadow:0 12px 24px -14px #10233d26;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .25s ease, box-shadow .25s ease, background .3s ease;
}
.au2 .wwd-card:hover{transform:translateY(-5px);box-shadow:0 20px 32px -16px #10233d40}

.au2 .wwd-icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;color:#fff;box-shadow:0 8px 16px -6px #00000040;
  transition:background .3s ease, transform .3s ease;
}
.au2 .wwd-card:hover .wwd-icon{transform:scale(1.08) rotate(-4deg)}
.au2 .wwd-card h3{font-family:"Plus Jakarta Sans";font-size:14.5px;font-weight:700;margin:0 0 3px;color:#10233d;transition:color .3s ease}
.au2 .wwd-card p{margin:0;color:#45536b;font-size:12.5px;transition:color .3s ease}

.au2 .wwd-arrow{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 6px 14px #0003;transition:transform .2s ease, background .3s ease
}
.au2 .wwd-card:hover .wwd-arrow{transform:translateX(-50%) translateY(-3px)}

.au2 .wc1{background:linear-gradient(160deg,#eafaf0,#d9f3e2)}
.au2 .wc1 .wwd-icon{background:linear-gradient(150deg,#31b56a,#1c8a2c)}
.au2 .wc1 .wwd-arrow{background:#1c8a2c}
.au2 .wc1:hover{background:linear-gradient(160deg,#1c8a2c,#0f5c1c)}
.au2 .wc1:hover .wwd-icon{background:#fff;color:#1c8a2c}
.au2 .wc1:hover .wwd-arrow{background:#fff;color:#1c8a2c}
.au2 .wc1:hover h3,.au2 .wc1:hover p{color:#fff}

.au2 .wc2{background:linear-gradient(160deg,#eaf4ff,#d7ebff)}
.au2 .wc2 .wwd-icon{background:linear-gradient(150deg,#4aa3f5,#1c72c9)}
.au2 .wc2 .wwd-arrow{background:#1c72c9}
.au2 .wc2:hover{background:linear-gradient(160deg,#1c72c9,#0f4a86)}
.au2 .wc2:hover .wwd-icon{background:#fff;color:#1c72c9}
.au2 .wc2:hover .wwd-arrow{background:#fff;color:#1c72c9}
.au2 .wc2:hover h3,.au2 .wc2:hover p{color:#fff}

.au2 .wc3{background:linear-gradient(160deg,#f2edfd,#e5dafb)}
.au2 .wc3 .wwd-icon{background:linear-gradient(150deg,#9a6ff0,#7440d6)}
.au2 .wc3 .wwd-arrow{background:#7440d6}
.au2 .wc3:hover{background:linear-gradient(160deg,#7440d6,#4c2794)}
.au2 .wc3:hover .wwd-icon{background:#fff;color:#7440d6}
.au2 .wc3:hover .wwd-arrow{background:#fff;color:#7440d6}
.au2 .wc3:hover h3,.au2 .wc3:hover p{color:#fff}

.au2 .wc4{background:linear-gradient(160deg,#e6f8fb,#d2eff5)}
.au2 .wc4 .wwd-icon{background:linear-gradient(150deg,#2bc0d6,#0f97ac)}
.au2 .wc4 .wwd-arrow{background:#0f97ac}
.au2 .wc4:hover{background:linear-gradient(160deg,#0f97ac,#0a6070)}
.au2 .wc4:hover .wwd-icon{background:#fff;color:#0f97ac}
.au2 .wc4:hover .wwd-arrow{background:#fff;color:#0f97ac}
.au2 .wc4:hover h3,.au2 .wc4:hover p{color:#fff}

.au2 .wc5{background:linear-gradient(160deg,#fff5e2,#ffe9c2)}
.au2 .wc5 .wwd-icon{background:linear-gradient(150deg,#ffb238,#f08a12)}
.au2 .wc5 .wwd-arrow{background:#f08a12}
.au2 .wc5:hover{background:linear-gradient(160deg,#f08a12,#a55d09)}
.au2 .wc5:hover .wwd-icon{background:#fff;color:#f08a12}
.au2 .wc5:hover .wwd-arrow{background:#fff;color:#f08a12}
.au2 .wc5:hover h3,.au2 .wc5:hover p{color:#fff}

.au2 .wc6{background:linear-gradient(160deg,#eafaf0,#d9f3e2)}
.au2 .wc6 .wwd-icon{background:linear-gradient(150deg,#31b56a,#1c8a2c)}
.au2 .wc6 .wwd-arrow{background:#1c8a2c}
.au2 .wc6:hover{background:linear-gradient(160deg,#1c8a2c,#0f5c1c)}
.au2 .wc6:hover .wwd-icon{background:#fff;color:#1c8a2c}
.au2 .wc6:hover .wwd-arrow{background:#fff;color:#1c8a2c}
.au2 .wc6:hover h3,.au2 .wc6:hover p{color:#fff}

/* ---- "OUR PURPOSE" pill badge ---- */
.au2 small.green.pill{
  display:inline-block;background:#e4f6e2;color:#1c8a2c;padding:6px 16px;
  border-radius:20px;font-size:11px;letter-spacing:1px
}

/* ---- Our Purpose cards (Mission / Vision / Commitment) ---- */
.au2 .purpose-cards{margin-top:36px}
.au2 .purpose-cards article{
  font-size:15px;text-align:center;border:none;border-radius:20px;
  padding:34px 26px;box-shadow:0 14px 30px -10px hsla(220, 10%, 94%, 0.911);
  transition:transform .25s ease, box-shadow .25s ease;
}
.au2 .purpose-cards article:hover{transform:translateY(-6px);box-shadow:0 20px 38px -12px #10233d2c}

.au2 .purpose-cards .p-icon{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;margin:0 auto 16px;border-radius:16px;
  font-size:26px;box-shadow:inset 0 1px 0 hsla(0, 3%, 87%, 0.911), 0 6px 14px #0000000f;
}

.au2 .purpose-cards .p-mission{background:linear-gradient(160deg,#eaf9ea,#d9f1da)}
.au2 .purpose-cards .p-mission .p-icon{background:#ecf3ec}

.au2 .purpose-cards .p-vision{background:linear-gradient(160deg,#fff6df,#fdecc0)}
.au2 .purpose-cards .p-vision .p-icon{background:#fbe19b}

.au2 .purpose-cards .p-commitment{background:linear-gradient(160deg,#e6f4fb,#d3ecf9)}
.au2 .purpose-cards .p-commitment .p-icon{background:#bfe2f6}

.au2 .purpose-cards h3{text-align:center}
.au2 .purpose-cards p{text-align:center}

/* ---- Why choose us ---- */
.au2 .why{background:linear-gradient(180deg,#f7faf8,#eef4f0)}
.au2 .why-head{text-align:center;max-width:620px;margin:0 auto 40px}
.au2 .why-head p{color:#3d4a5f;margin:0;font-size:16px}

.au2 .whylist{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.au2 .why-item{
  position:relative;text-align:center;border-radius:18px;padding:34px 24px;
  box-shadow:0 14px 30px -16px #10233d26;border:1px solid #eaf1ea;
  display:flex;flex-direction:column;align-items:center;cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.au2 .why-item:hover{transform:translateY(-6px);box-shadow:0 24px 40px -16px #10233d40;border-color:transparent}

.au2 .why-ic{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#fff;margin:0 auto 18px;
  box-shadow:0 8px 18px -6px #0000004d;
  transition:background .3s ease, transform .3s ease;
}
.au2 .why-item:hover .why-ic{transform:scale(1.08) rotate(-4deg)}

.au2 .why-item strong{display:block;font-family:"Plus Jakarta Sans";font-weight:800;font-size:16.5px;color:#10233d;margin-bottom:8px;transition:color .3s ease}
.au2 .why-item small{display:block;color:#45536b;font-size:14.5px;line-height:1.65;font-weight:400;transition:color .3s ease}

/* variant 1 — green */
.au2 .wy1{background:linear-gradient(160deg,#eafaf0,#d9f3e2)}
.au2 .wy1 .why-ic{background:linear-gradient(150deg,#31b56a,#1c8a2c)}
.au2 .wy1:hover{background:linear-gradient(160deg,#1c8a2c,#0f5c1c)}
.au2 .wy1:hover .why-ic{background:#fff;color:#1c8a2c}
.au2 .wy1:hover strong,.au2 .wy1:hover small{color:#fff}

/* variant 2 — blue */
.au2 .wy2{background:linear-gradient(160deg,#eaf4ff,#d7ebff)}
.au2 .wy2 .why-ic{background:linear-gradient(150deg,#4aa3f5,#1c72c9)}
.au2 .wy2:hover{background:linear-gradient(160deg,#1c72c9,#0f4a86)}
.au2 .wy2:hover .why-ic{background:#fff;color:#1c72c9}
.au2 .wy2:hover strong,.au2 .wy2:hover small{color:#fff}

/* variant 3 — purple */
.au2 .wy3{background:linear-gradient(160deg,#f2edfd,#e5dafb)}
.au2 .wy3 .why-ic{background:linear-gradient(150deg,#9a6ff0,#7440d6)}
.au2 .wy3:hover{background:linear-gradient(160deg,#7440d6,#4c2794)}
.au2 .wy3:hover .why-ic{background:#fff;color:#7440d6}
.au2 .wy3:hover strong,.au2 .wy3:hover small{color:#fff}

@media(max-width:850px){
  .au2 .page-hero h1{font-size:36px}
  .au2 .hero{padding-bottom:70px}
  .au2 .crumb-card{right:auto;left:20px;bottom:16px;padding:11px 18px;font-size:13px}
  .au2 .two{grid-template-columns:1fr;gap:40px}
  .au2 .four{grid-template-columns:1fr 1fr;row-gap:20px}
  .au2 .cards{grid-template-columns:1fr}
  .au2 .wwd-grid{grid-template-columns:1fr 1fr}
  .au2 .whylist{grid-template-columns:1fr 1fr}
  .au2 .wwd-sun,.au2 .wwd-leaf-l{display:none}
}
@media(max-width:520px){
  .au2 .page-hero h1{font-size:30px}
  .au2 .section{padding:40px 0}
  .au2 .visual{height:280px}
  .au2 .stats{padding:32px 0}
  .au2 .four{grid-template-columns:1fr}
  .au2 .stat-card{min-height:150px;padding:20px 18px 56px}
  .au2 .stat-icon{width:46px;height:46px;right:12px;bottom:12px}
  .au2 .stat-icon svg{width:24px;height:24px}
  .au2 h2{font-size:26px}
  .au2 .wwd-grid{grid-template-columns:1fr}
  .au2 .whylist{grid-template-columns:1fr}
}