
:root{--brand:#0b7a45;--ink:#1f2937}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fafafa;color:var(--ink)}
a{text-decoration:none;color:var(--brand)}
header{position:sticky;top:0;background:#0b7a45;color:#fff;z-index:10}
.nav{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.nav a{color:#fff;margin:0 10px}
.brand{font-weight:700;font-size:18px;cursor:pointer}
.lang-toggle{background:#fff;color:#0b7a45;border-radius:999px;padding:4px 10px;font-weight:700;cursor:pointer}
.hero{background:linear-gradient(120deg,#0b7a45,#10b981);color:#fff}
.hero .wrap{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr;gap:16px;padding:30px 16px}
.hero h1{margin:0 0 8px}
.banner{border:3px solid rgba(255,255,255,.5);border-radius:14px;overflow:hidden}
.section{padding:36px 16px}
.container{max-width:1200px;margin:auto}
h2{text-align:center;margin:0 0 16px}
/* Clients scroller */
.clients{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px;overflow:hidden}
.track{display:flex;gap:30px;align-items:center;animation:scroll 25s linear infinite}
.track img{height:60px;max-width:170px;object-fit:contain;flex:0 0 auto;filter:grayscale(0);opacity:.95}
.track img.hattab{background:#0b5ea8;border-radius:10px;padding:8px}
.clients:hover .track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Products grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden}
.card img{width:100%;height:220px;object-fit:contain;background:#fff}
.card .p{padding:10px;text-align:center}
/* Contact */
.contact{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.contact{grid-template-columns:1.2fr .8fr}}
input,textarea{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:10px}
button{background:#0b7a45;color:#fff;border:none;padding:12px 16px;border-radius:10px;cursor:pointer}
footer{padding:16px;text-align:center;color:#6b7280;background:#111;color:#fff}
html[dir="rtl"] body{font-family:'Cairo',Arial,Helvetica,sans-serif}


/* Clients strip (auto-injected) */
.clients-strip { margin-top: 24px; }
.clients-strip h2 { margin: 0 0 12px; }
.clients-logos{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
  gap: 16px;
  align-items: center;
  padding: 0; margin: 0; list-style: none;
}
.clients-logos li{
  background: #151a22; border: 1px solid #1f2530;
  border-radius: 12px; display:flex; align-items:center; justify-content:center;
  padding: 12px; height: 72px;
}
.clients-logos img{
  max-height: 48px; max-width: 100%; object-fit: contain; filter: grayscale(100%); opacity:.9;
}
.clients-logos img:hover{ filter: none; opacity:1; }
