/* ============================================================
   About Us — company profile page CSS.
   Distinct treatment from product pages. Common heading/banner from style.css.
   Spacing centralized via .mb-100.
   ============================================================ */
:root{ --nv:#022b63; --cream:#efede7; --amber:#f9a825; --ink:#111827; --muted:#5b6472; --line:#e7e4dc; --soft:#f7f6f2; --radius:16px; }

/* intro: story + stat strip */
.ab-two{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.ab-two.rev{ direction:rtl; } .ab-two.rev > *{ direction:ltr; }
.ab-two p{ color:var(--muted); line-height:1.85; font-size:15.5px; margin-bottom:16px; }
.ab-media{ 
  position: sticky;
  top: 100px;
  background:linear-gradient(135deg,#f7f6f2,#efede7); border:1px solid var(--line); border-radius:var(--radius); min-height:400px; display:flex; align-items:center; justify-content:center; color:#aab1bd; font-size:14px;  overflow:hidden; box-shadow:0 16px 40px rgba(2,43,99,.05); }

.ab-media span{ position:relative; z-index:2; }

/* stat strip — company credibility numbers */
.ab-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.ab-stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px; text-align:center; transition:.35s; }
.ab-stat:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(2,43,99,.08); border-color:#cfd6e2; }
.ab-stat .num{ font-family:"PlusJakartaSans-Medium"; font-size:38px; color:var(--nv); line-height:1; margin-bottom:10px; }
.ab-stat p{ color:var(--muted); font-size:14px; margin:0; }

/* skills — tech stack list, 2-col with descriptions */
.ab-skills{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ab-scard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; transition:.35s; display:flex; gap:18px; align-items:flex-start; }
.ab-scard:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(2,43,99,.08); border-color:#cfd6e2; }
.ab-scard .ic{ flex:0 0 52px; width:52px; height:52px; border-radius:13px; background:var(--cream); color:var(--nv); display:inline-flex; align-items:center; justify-content:center; font-size:24px; transition:.35s; }
.ab-scard:hover .ic{ background:var(--nv); color:#fff; }
.ab-scard h4{ font-family:'DMSans-SemiBold'; font-size:17px; color:var(--ink); margin-bottom:8px; }
.ab-scard p{ color:var(--muted); font-size:13.5px; line-height:1.65; margin:0; }



/* mission / vision — 2 big cards (navy band) */
.ab-mv{ background:var(--nv); }
.ab-mv .mainsectionheading h3{ color:#fff; } .ab-mv .mainsectionheading h3::before{ background:#fff; }
.ab-mv .mainsectionheading h2{ color:#fff; }
.ab-mv .sectionsub{ color:#ffffffc4; }
.ab-mvgrid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.ab-mvcard{ background:#ffffff10; border:1px solid #ffffff26; border-radius:var(--radius); padding:40px 36px; transition:.35s; }
.ab-mvcard:hover{ background:#ffffff1c; transform:translateY(-5px); }
.ab-mvcard .ic{ width:58px; height:58px; border-radius:15px; background:#ffffff1f; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:27px; margin-bottom:20px; transition:.35s; }
.ab-mvcard:hover .ic{ background:var(--amber); color:var(--nv); }
.ab-mvcard h4{ font-family:'DMSans-SemiBold'; font-size:20px; color:#fff; margin-bottom:14px; }
.ab-mvcard p{ color:#ffffffc9; font-size:14.5px; line-height:1.8; margin:0; }

/* what sets us apart — value props, numbered */
.ab-vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.ab-vcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; transition:.35s; position:relative; }
.ab-vcard:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(2,43,99,.08); border-color:#cfd6e2; }
.ab-vnum{ font-family:"PlusJakartaSans-Medium"; font-size:32px; color:var(--amber); line-height:1; margin-bottom:16px; }
.ab-vcard h4{ font-family:'DMSans-SemiBold'; font-size:17px; color:var(--ink); margin-bottom:10px; }
.ab-vcard p{ color:var(--muted); font-size:14px; line-height:1.7; margin:0; }

/* support — 2-col with contact cards */
.ab-support{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
.ab-support p{ color:var(--muted); line-height:1.8; font-size:15.5px; margin-bottom:16px; }
.ab-supcards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ab-supcard{ background:var(--cream); border-radius:var(--radius); padding:28px 24px; transition:.35s; }
.ab-supcard:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(2,43,99,.08); }
.ab-supcard .ic{ width:48px; height:48px; border-radius:12px; background:#fff; color:var(--nv); display:inline-flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
.ab-supcard h5{ font-family:'DMSans-SemiBold'; font-size:15px; color:var(--ink); margin:0 0 6px; }
.ab-supcard p{ color:var(--nv); font-size:14px; margin:0; font-family:'DMSans-Medium'; }
.ab-supcard.wide{ grid-column:1 / -1; background:var(--soft); }
.ab-supcard.wide p{ color:var(--muted); font-family:'DMSans-Regular'; line-height:1.7; }

@media(max-width:991px){
  .ab-two,.ab-two.rev,.ab-skills,.ab-mvgrid,.ab-support{ grid-template-columns:1fr; gap:24px; } .ab-two.rev{ direction:ltr; }
  .ab-stats{ grid-template-columns:1fr 1fr; }
  
  .ab-supcards{ grid-template-columns:1fr 1fr; }
}