/**
 * About Page CSS (/about/)
 * Source: Final HTML/New Pages/About us Page/alagheza_about_us_page_v8_backend_seo_lcp.html
 * Template: page-about.php
 */

:root {
  --blue2: #0B2E83; --navy: #17396f; --blue: #2168d8; --green: #16a35f;
  --red: #df334a; --bg: #F6F8FC; --soft: #F2F5FB; --line: #e5edf8;
  --text: #14233f; --muted: #667792; --white: #fff;
  --shadow: 0 14px 35px rgba(23,57,111,.08); --radius: 18px;
}

* { box-sizing: border-box; }
body.about-page { margin:0; font-family:'Tajawal',system-ui,-apple-system,Segoe UI,sans-serif; background:#f7faff; color:var(--text); line-height:1.75; }
body.about-page .page, body.about-page #al-page { max-width:none; margin:0; padding:0; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

.about-page .wrap { width:min(1180px,calc(100% - 28px)); margin:auto; }

/* ===== Breadcrumb ===== */
.about-page .breadcrumb { font-size:13px; color:var(--muted); padding:16px 0 6px; font-weight:700; display:flex; gap:8px; }

/* ===== Hero ===== */
.about-page .about-hero { padding:18px 0 18px; }
.about-page .hero-card {
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#eef6ff 100%);
  border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) 390px;
  gap:26px; align-items:center; padding:34px;
}
.about-page .eyebrow {
  display:inline-flex; gap:8px; align-items:center;
  color:var(--blue); font-weight:900;
  background:#eef6ff; border:1px solid #dbeafe;
  border-radius:999px; padding:7px 14px; margin-bottom:12px; font-size:14px;
}
.about-page h1 { margin:0 0 14px; color:var(--blue2); font-size:42px; line-height:1.25; letter-spacing:-.5px; }
.about-page .hero-card p { margin:0; color:#52637f; font-size:18px; font-weight:600; max-width:720px; }
.about-page .hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.about-page .btn {
  border:1px solid var(--line); background:#fff; color:var(--blue2);
  padding:12px 18px; border-radius:13px; font-weight:900;
  display:inline-flex; align-items:center; gap:8px;
}
.about-page .btn.primary { background:var(--blue2); border-color:var(--blue2); color:#fff; }
.about-page .hero-art {
  min-height:310px; border-radius:22px; background:#071b3a;
  position:relative; overflow:hidden;
  box-shadow:inset 0 -24px 55px rgba(255,255,255,.08),0 18px 45px rgba(16,24,40,.14);
}
.about-page .hero-art .media-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.about-page .hero-art .media-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,27,58,.08),rgba(7,27,58,.55)); z-index:1; }
.about-page .hero-art:before{content:"Since 2018";position:absolute;z-index:2;right:22px;top:22px;background:rgba(255,255,255,.92);color:var(--blue2);font-size:18px;font-weight:900;border-radius:999px;padding:9px 16px;box-shadow:0 10px 24px rgba(16,24,40,.12)}
.about-page .hero-art:after{content:"Trusted reviews to help you choose with confidence";position:absolute;z-index:2;right:22px;left:22px;bottom:22px;background:rgba(255,255,255,.94);border-radius:16px;padding:16px;color:var(--blue2);font-weight:900;text-align:center}

/* ===== Stats ===== */
.about-page .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
.about-page .stat { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 8px 22px rgba(23,57,111,.05); }
.about-page .stat b { display:block; color:var(--blue2); font-size:25px; line-height:1.2; margin-bottom:4px; }
.about-page .stat span { color:var(--muted); font-weight:700; font-size:13px; }

/* ===== Section ===== */
.about-page .section { padding:44px 0; }
.about-page .section.soft { background:linear-gradient(180deg,#f7faff,#fff); }
.about-page .section-head { max-width:780px; margin-bottom:20px; }
.about-page .section-head.center { text-align:center; margin-inline:auto; }
.about-page .section-head h2 { font-size:32px; color:var(--blue2); margin:0 0 10px; line-height:1.35; }
.about-page .section-head p { margin:0; color:#52637f; font-size:17px; font-weight:600; }

/* ===== Two-col ===== */
.about-page .two-col { display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:stretch; }
.about-page .panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.about-page .content-card { padding:26px; }
.about-page .content-card h2,.about-page .content-card h3 { color:var(--blue2); margin:0 0 12px; font-size:25px; }
.about-page .content-card p { color:#415371; font-size:17px; font-weight:600; margin:0 0 12px; }
.about-page .trust-note { background:#eef6ff; border:1px solid #dbeafe; border-radius:16px; padding:15px; color:#355070; font-weight:800; margin-top:16px; }
.about-page .visual-card { min-height:390px; border-radius:var(--radius); background:#071b3a; position:relative; overflow:hidden; }
.about-page .visual-card .media-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.about-page .visual-card .media-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,27,58,.04),rgba(7,27,58,.34)); z-index:1; }
.about-page .visual-card:after{content:"Testing multiple devices in a professional review lab";position:absolute;z-index:2;right:20px;left:20px;bottom:20px;background:rgba(255,255,255,.94);border-radius:16px;padding:16px;color:var(--blue2);font-weight:900;text-align:center}

/* ===== Method Grid ===== */
.about-page .method-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.about-page .method-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 8px 22px rgba(23,57,111,.05); }
.about-page .method-card i { width:44px; height:44px; border-radius:14px; background:#eef6ff; display:grid; place-items:center; font-style:normal; font-size:22px; margin-bottom:10px; }
.about-page .method-card h3 { margin:0 0 6px; color:var(--blue2); font-size:17px; }
.about-page .method-card p { margin:0; color:var(--muted); font-weight:600; font-size:14px; line-height:1.65; }

/* ===== Promise ===== */
.about-page .promise {
  background:linear-gradient(135deg,#071b3a,#0B2E83); color:#fff;
  border-radius:26px; padding:34px;
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  align-items:center; overflow:hidden; position:relative;
}
.about-page .promise:before{content:"";position:absolute;left:-80px;top:-80px;width:220px;height:220px;border-radius:50%;background:rgba(33,104,216,.28)}
.about-page .promise h2{font-size:34px;margin:0 0 12px;position:relative}
.about-page .promise p{margin:0;color:#d8e6ff;font-weight:600;font-size:17px;position:relative}
.about-page .promise-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.about-page .promise-list span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px;font-weight:800;color:#fff}

/* ===== Values ===== */
.about-page .values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.about-page .value-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 8px 22px rgba(23,57,111,.05); }
.about-page .value-card h3 { margin:0 0 8px; color:var(--blue2); font-size:20px; }
.about-page .value-card p { margin:0; color:#52637f; font-weight:600; font-size:14px; }

/* ===== Features ===== */
.about-page .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.about-page .feature { background:#f7faff; border:1px solid var(--line); border-radius:16px; padding:15px; color:var(--blue2); font-weight:900; }

/* ===== Final CTA ===== */
.about-page .final-cta { text-align:center; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:34px; }
.about-page .final-cta h2 { margin:0 0 10px; color:var(--blue2); font-size:32px; }
.about-page .final-cta p { margin:0 auto 20px; color:#52637f; font-weight:600; max-width:760px; font-size:17px; }

/* ===== Responsive ===== */
@media (max-width:1100px){
  .about-page .hero-card{grid-template-columns:1fr 300px}
  .about-page .method-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .about-page .hero-card{grid-template-columns:1fr}
  .about-page .two-col,.about-page .promise{grid-template-columns:1fr}
  .about-page .method-grid{grid-template-columns:repeat(2,1fr)}
  .about-page .values-grid{grid-template-columns:repeat(2,1fr)}
  .about-page .hero-art{min-height:260px}
  .about-page h1{font-size:32px}
}
@media (max-width:640px){
  .about-page .stats{grid-template-columns:1fr}
  .about-page .values-grid{grid-template-columns:1fr}
  .about-page .method-grid{grid-template-columns:1fr}
  .about-page .feature-grid{grid-template-columns:1fr}
  .about-page .promise{grid-template-columns:1fr;padding:24px}
  .about-page .hero-card{padding:22px}
  .about-page h1{font-size:28px}
  .about-page .hero-card p{font-size:16px}
  .about-page .hero-art:before{font-size:15px;padding:7px 12px}
  .about-page .hero-art:after{font-size:13px;padding:12px}
}