:root{--brand:#0b73b9;--ink:#1f2937;--muted:#6b7280;--card:#f8fafc}
html,body{margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cairo,Noto Sans Arabic,Arial,sans-serif;color:var(--ink);background:#fff}
a{color:var(--brand);text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:24px 16px}
.topbar{position:sticky;top:0;z-index:12;background:#fff;border-bottom:1px solid #e5e7eb;padding:10px 14px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand img.logo{width:40px;height:40px;object-fit:contain}
.nav{display:flex;gap:8px;margin-inline-start:auto;align-items:center}
.nav a{padding:8px 10px;border-radius:8px}
.nav a:hover{background:#eff6ff}
.burger{display:none;margin-inline-start:auto;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px}
.hero{display:grid;grid-template-columns:1fr;gap:10px;align-items:center;justify-items:center;background:#f9fbff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}
.hero .hero-logo{width:100%;max-width:260px;height:auto;object-fit:contain;display:block}
.hero h1{color:var(--brand);margin:6px 0 4px;font-size:26px}
.hero p{margin:0 0 8px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:8px}
.card{background:var(--card);padding:8px;border:1px solid #e5e7eb;border-radius:12px}
.card img{width:100%;height:240px;object-fit:cover;border-radius:8px;background:#e5e7eb}
.card figcaption{text-align:center;margin-top:6px}
.footer{margin-top:40px;border-top:1px solid #e5e7eb;padding:16px;text-align:center;color:#6b7280;background:#fff}
.footer .social a{margin:0 8px}
.fab-whatsapp{position:fixed;bottom:18px;right:18px;background:#25d366;color:#fff;padding:12px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.2);font-weight:600;z-index:19}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:20}
.lightbox img{max-width:90vw;max-height:80vh;border-radius:12px}
.lightbox.open{display:flex}
/* Drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:15}
.drawer{position:fixed;top:0;bottom:0;right:0;width:290px;background:#fff;border-left:1px solid #e5e7eb;transform:translateX(100%);transition:transform .25s;z-index:16;padding:16px}
.drawer nav{display:flex;flex-direction:column;gap:6px}
.drawer a{padding:12px;border-radius:10px;border:1px solid #f0f2f5}
body.drawer-open .drawer{transform:translateX(0)}
body.drawer-open .drawer-overlay{opacity:1;pointer-events:auto}
@media (max-width:820px){.nav{display:none}.burger{display:inline-block}}
/* ======= مربعات أقسام الصفحة الرئيسية ======= */
.category-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-top:16px;
}

.cat-card{
  display:flex;
 
  padding:12px;
  border:1px solid #e6edf5;
  border-radius:14px;
  background:#fff;
  color:#1f6fb2;               /* أزرق متناسق مع الشعار */
  font-weight:700;
  text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  aspect-ratio:4 / 1;          /* يحافظ على الشكل المربّع */
  justify-content:center;
}



.cat-card:hover{
  transform: translateY(-2px);
  box-shadow:0 6px 20px rgba(31,111,178,.15);
  background:#f8fbff;
}

/* استجابة الجوال/الشاشات الصغيرة */
@media (max-width: 900px){
  .category-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px){
  .category-grid{ grid-template-columns: 1fr; }
}

.cats-row{
    display:flex !important;
    gap:10px;
    flex-wrap:wrap;            /* يلف للسطر التالي إذا المساحة ما تكفي */
    justify-content:center;    /* توسيط الصف */
    margin-top:16px;
  }

  .spline{ line-height:10;

  }