:root{color-scheme:light;--ink:#2b3436;--or:#e2582b;--gr:#4a7c3b;--bg:#f6f5f1;--w:#fff;--mut:#5d676a}
*{box-sizing:border-box;margin:0}
body{font-family:Cairo,sans-serif;color:var(--ink);background:var(--bg);line-height:1.8}
a{color:inherit;text-decoration:none}
.c{max-width:1120px;margin:auto;padding:0 20px}
header{background:#fff;border-bottom:3px solid var(--or);position:sticky;top:0;z-index:9}
.hi{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 20px;max-width:1120px;margin:auto}
.hi img{height:62px;display:block}
nav{display:flex;gap:22px;font-weight:600}
nav a{padding:4px 0;border-bottom:2px solid transparent}
nav a.on,nav a:hover{border-color:var(--or);color:var(--or)}
button{font:inherit;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.lb{border:1px solid var(--ink);background:none;padding:2px 12px;border-radius:4px;font-weight:700}
.bg{display:none;background:none;border:0;font-size:26px}
@media(max-width:800px){.bg{display:block}nav{display:none;position:absolute;top:100%;inset-inline:0;background:#fff;flex-direction:column;padding:12px 20px;border-bottom:3px solid var(--or)}nav.open{display:flex}}
.hero{background:var(--ink);color:#fff;padding:90px 0 130px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset-inline:-10%;bottom:-70px;height:130px;background:var(--or);transform:rotate(-2deg)}
.hero h1{font-size:clamp(28px,5vw,50px);line-height:1.4;max-width:760px}
.hero p{max-width:620px;margin:16px 0 28px;opacity:.85;font-size:18px}
.hero .d{position:absolute;inset-inline-end:6%;top:50px;width:230px;height:230px;transform:rotate(45deg);background:linear-gradient(135deg,var(--gr) 50%,#b8442a 50%);opacity:.9;border-radius:14px}
@media(max-width:800px){.hero .d{width:48px;height:48px;top:30px;inset-inline-end:24px;border-radius:6px;opacity:.9}}
.btn{display:inline-block;padding:10px 26px;border-radius:4px;font-weight:700;background:var(--or);color:#fff;margin-inline-end:10px;position:relative;z-index:2}
.btn.o{background:none;border:1.5px solid #fff}
.pb{background:var(--ink);color:#fff;padding:44px 0;border-bottom:6px solid var(--or)}
.pb h1{font-size:34px}
.pb p{opacity:.8}
section{padding:60px 0}
h2{font-size:28px;margin-bottom:6px}
.ln{width:70px;height:4px;background:var(--gr);margin-bottom:26px}
.g{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.k{background:#fff;padding:22px;border-inline-start:4px solid var(--gr);box-shadow:0 1px 0 #e3e1da}
.k:nth-child(even){border-color:var(--or)}
.k h3{font-size:18px}
.k p{color:var(--mut)}
.dm{width:34px;height:34px;background:var(--or);transform:rotate(45deg) scale(.7);border-radius:5px;margin-bottom:14px}
.dm.g2{background:var(--gr)}
.st{display:flex;flex-wrap:wrap;gap:30px;padding:34px 0;background:#fff}
.st b{font-size:34px;color:var(--or);display:block;line-height:1.2}
ul.l{list-style:none;padding:0;columns:2;column-gap:30px}
ul.l li{padding:7px 0;border-bottom:1px solid #e3e1da;break-inside:avoid}
ul.l li:before{content:"◆";color:var(--or);font-size:11px;margin-inline-end:9px}
@media(max-width:700px){ul.l{columns:1}}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{background:#fff;border:1px solid #d9d6cc;padding:5px 14px;border-radius:30px}
.doc{display:flex;justify-content:space-between;gap:12px;background:#fff;padding:14px 18px;border-inline-start:4px solid var(--gr);margin-bottom:10px}
.doc small{color:var(--mut)}
footer{background:var(--ink);color:#d8dcdc;padding:44px 0 14px;border-top:6px solid var(--or)}
.fg{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer h4{color:#fff;margin-bottom:8px}
footer li{list-style:none;padding:1px 0}
footer ul{padding:0}
footer img{height:56px;background:#fff;padding:4px 10px;border-radius:4px;margin-bottom:10px}
.cp{border-top:1px solid #45514f;margin-top:26px;padding-top:12px;font-size:14px;text-align:center}
html[dir=rtl] [dir=ltr]{text-align:right}
footer{text-align:start}
/* التواصل الاجتماعي */
footer a:hover{color:var(--or)}
.k a{color:var(--or)}
.soc a{display:flex;align-items:center;gap:8px;width:fit-content;font-weight:600;direction:ltr}
.k.soc a{margin:6px 0;color:var(--ink)}
.soc br{display:none}
.soc a:hover,.k.soc a:hover{color:var(--or)}
.ic{width:24px;height:24px;flex:none;border-radius:50%}