/* =========================================================
   ABOUT — Responsive, Mobile-first (single source of truth)
   ========================================================= */

/* Base */
:root{
  --abx-green:#1a841a;
  --abx-green-2:#20c997;
  --abx-text:#1d1d1f;
  --abx-muted:#666;
  --abx-soft:#f6f8f7;
  --abx-white:#fff;
  --abx-shadow:0 10px 26px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.abx-dot{color:#fff}

/* ================= HERO ================= */
.abx-hero{
  position:relative; isolation:isolate; overflow:hidden;
  color:#fff; padding:72px 0 56px;
}
.abx-hero__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.04);
}
.abx-hero__mask{
  position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(0,0,0,.55),rgba(0,0,0,.35));
}
.abx-hero__content{ position:relative; z-index:2; text-align:center; }
.abx-hero__title{ font:800 clamp(28px,6vw,56px)/1.06 Rubik,system-ui,sans-serif; margin:0 0 8px; }
.abx-hero__lead{ max-width:820px; margin:0 auto 14px; opacity:.95; font-size:clamp(14px,2.8vw,18px); }
.abx-breadcrumb{
  display:flex; gap:8px; align-items:center; justify-content:center;
  margin-top:8px; color:#fff; opacity:.9
}
.abx-breadcrumb a{ color:#fff; text-decoration:none; font-weight:700 }
.abx-breadcrumb svg{ width:16px; height:16px; opacity:.8 }
.abx-breadcrumb .current{ opacity:.85 }

@media (min-width:768px){
  .abx-hero{ padding:86px 0 80px; }
}

/* ================ Sections & Grids ================ */
.abx-section{ padding:56px 0; background:#fff; }
.abx-section--soft{ background:var(--abx-soft); }

/* Grid helpers (mobile-first) */
.abx-grid{ display:grid; gap:18px; }
.abx-grid--2{ grid-template-columns:1fr; }
.abx-grid--4{ grid-template-columns:1fr; }
@media (min-width:560px){
  .abx-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:992px){
  .abx-grid--2{ grid-template-columns:repeat(2,1fr); }
  .abx-grid--4{ grid-template-columns:repeat(4,1fr); }
}

/* ================ Feature (image + text) ================ */
.abx-figure{
  border-radius:16px; overflow:hidden;
  aspect-ratio:16/11; background:#0002;
  box-shadow:var(--abx-shadow);
}
.abx-figure img{ width:100%; height:100%; object-fit:cover; }
.abx-figcap{
  padding:8px 12px; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
}

.abx-block{ display:flex; flex-direction:column; gap:10px; }
.abx-h2{ font:800 clamp(22px,3vw,36px)/1.25 Rubik,system-ui,sans-serif; color:var(--abx-text); margin:0 0 6px; }
.abx-lead{ color:var(--abx-muted); margin:0 0 12px; font-size:clamp(14px,2.6vw,16px); }

.abx-badges{
  display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 8px; list-style:none;
}
.abx-badge{
  background:#eaf6ee; border:1px solid rgba(26,132,26,.18);
  color:#0f4d0f; font-weight:700; border-radius:999px; padding:6px 10px;
  font-size:13px;
}

.abx-feats{ 
  display:grid; 
  gap:12px; 
  grid-template-columns:1fr;
    margin-left: 4rem;
    /* padding: 2rem; */
 }
@media (min-width:1560px)
{ 
  .abx-feats{ 
    grid-template-columns:repeat(2,1fr); 

  } 
}
.abx-feat{
  display:flex; 
  gap:12px; 
  margin-left: -4rem;
  background:#fff; 
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px; 
  padding:14px; 
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}
.abx-feat__icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(26,132,26,.08);font-size:20px
}
.abx-feat__title{ margin:0 0 4px; font-weight:800; color:var(--abx-text) }

/* ================ Discover cards ================ */
.abx-card{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  box-shadow:var(--abx-shadow); text-decoration:none; color:inherit;
}
.abx-card img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; transition:transform .25s ease; }
.abx-card:hover img{ transform:scale(1.04); }
.abx-card__cap{
  position:absolute; inset:auto 0 0 0; padding:14px; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.58));
}
.abx-card__cap h3{ margin:0; font-weight:800; font-size:clamp(16px,3.4vw,20px); }

/* ================ Tabs ================ */
.abx-tabs{
  background:#fff; border-radius:14px; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.abx-tabs__nav{
  position:relative; display:flex; gap:8px; padding:8px;
  border-bottom:1px solid #edf0ef; flex-wrap:wrap;
}
.abx-tab{
  border:0; background:transparent; padding:10px 14px; border-radius:10px;
  font-weight:800; cursor:pointer; color:var(--abx-text); font-size:14px;
}
.abx-tab.is-active{ background:rgba(26,132,26,.08); color:var(--abx-green); }
.abx-tabs__indicator{
  position:absolute; bottom:-1px; height:3px; width:0;
  background:linear-gradient(90deg,var(--abx-green),var(--abx-green-2));
  border-radius:3px; transition:transform .25s,width .25s;
}
.abx-tabs__panes{ padding:14px; }
.abx-pane{ display:none; color:var(--abx-text); }
.abx-pane.is-active{ display:block; }

/* ================ Media + list ================ */
.abx-text{ color:var(--abx-text); margin:0 0 16px; }
.abx-media-list{ display:grid; gap:14px; grid-template-columns:1fr; align-items:start; }
@media (min-width:768px){ .abx-media-list{ grid-template-columns:280px 1fr; } }
.abx-media{ border-radius:12px; box-shadow:var(--abx-shadow); }
.abx-list{ margin:0; padding-left:18px; }
.abx-list li{ line-height:1.9; }

/* ================ Counters ================ */
.abx-grid--4{ gap:16px; }
.abx-counter{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px;
  padding:16px; text-align:center; box-shadow:0 8px 18px rgba(0,0,0,.07);
}
.abx-counter__icon{ font-size:26px; margin-bottom:6px; }
.abx-counter__num{ display:block; font:800 30px/1 Rubik,system-ui,sans-serif; color:var(--abx-text); }
.abx-counter__label{ display:block; color:var(--abx-muted); margin-top:6px; font-weight:700; }
@media (min-width:560px){
  .abx-counter__num{ font-size:34px; }
}

/* ================ Parallax strip ================ */
.abx-parallax{
  position:relative; padding:56px 0; height:auto;
  background-size:cover; background-position:center;
  color:#fff; isolation:isolate;
}
.abx-parallax__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.45));
}
.abx-parallax__title{
  position:relative; z-index:2; text-align:center;
  font:800 clamp(18px,3.4vw,28px)/1.35 Rubik,system-ui,sans-serif;
  margin:0;
}
@media (min-width:992px){
  .abx-parallax{ padding:70px 0; }
}

/* ================ Logos ================ */
.abx-grid--logos{ align-items:center; }
.abx-logo{
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:#fff; border-radius:14px;
  box-shadow:var(--abx-shadow); filter:grayscale(.2);
  transition:transform .2s, filter .2s;
}
.abx-logo:hover{ filter:none; transform:translateY(-2px); }
.abx-logo img{ max-height:72px; object-fit:contain; }
@media (min-width:768px){ .abx-logo img{ max-height:84px; } }

/* ================ Reveal on scroll ================ */
.abx-reveal{ opacity:0; transform:translateY(14px); transition:opacity .45s, transform .45s; }
.abx-reveal.is-in{ opacity:1; transform:none; }
/* .abx-reveal[data-reveal="right"]{ transform:translateX(16px); } */
/* .abx-reveal[data-reveal="left"]{ transform:translateX(-16px); } */
@media (prefers-reduced-motion:reduce){ .abx-reveal{ transition:none; opacity:1; transform:none } }

/* =========================================================
   MOBILE TWEAKS / HOTFIXES (append-only)
   ========================================================= */

/* أمان عام: منع أي سكرول أفقي من عناصر كتخرج على اليمين */
*, *::before, *::after { box-sizing: border-box; }

/* container على الشاشات الصغيرة بزاف */
@media (max-width:360px){ .container{ padding:0 12px } }

/* Hero تصغير إضافي على الموبايل الصغير + breadcrumb يلتف */
@media (max-width:480px){
  .abx-hero{ padding:64px 0 48px }
  .abx-hero__title{ font-size:32px; line-height:1.12 }
  .abx-hero__lead{ font-size:13.5px }
  .abx-breadcrumb{ flex-wrap:wrap; row-gap:6px }
}

/* Tabs: تمكين scroll أفقي عِوَض الانكسار */
.abx-tabs__nav{
  overflow-x:auto; white-space:nowrap;
  scrollbar-width:none; -ms-overflow-style:none;
}
.abx-tabs__nav::-webkit-scrollbar{ display:none }
.abx-tab{ display:inline-block }

/* Feature caption + radius على الموبايل */
@media (max-width:480px){
  .abx-figure
  { 
    border-radius:12px; 
    margin: 0rem;
  }
  .abx-figcap{ font-size:12px }
}

/* Media+List مكدّس فالصغير */
@media (max-width:640px){ .abx-media-list{ grid-template-columns:1fr; gap:12px } }

/* Counters: فضاء أريح */
@media (max-width:560px){
  .abx-grid--4{ grid-template-columns:1fr }
  .abx-counter{ padding:14px }
  .abx-counter__num{ font-size:28px }
}

/* Parallax: علوّ أخف */
@media (max-width:560px){
  .abx-parallax{ padding:44px 0 }
  .abx-parallax__title{ font-size:18px }
}

/* Logos: أصغر شوية */
@media (max-width:480px){
  .abx-logo{ padding:12px }
  .abx-logo img{ max-height:58px }
}

/* كلمات طويلة ما تخرجش برا */
.abx-hero__title,
.abx-h2,
.abx-card__cap h3,
.abx-badge{
  word-break:break-word;
  overflow-wrap:anywhere;
}