:root{
  --blue:#2b57a1;
  --green:#1c9f63;
  --yellow:#f1c40f;
  --ink:#222;
  --muted:#6b7280;
  --bg:#f7f9fc;
  --white:#fff;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5rem}
p{margin:.5rem 0 1rem}
ul{margin:.5rem 0 1rem;padding-inline-start:1.2rem}
.ticks{list-style:symbols(check)}
#app{min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;border-bottom:1px solid #eef2f7}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--ink)}
.logo img{width:40px;height:40px}
.nav{margin-inline-start:auto;display:flex;gap:1rem}
.nav a{padding:.4rem .6rem;border-radius:8px}
.nav a:hover{background:#eef2ff}
.cta{margin-inline-start:1rem;background:var(--green);color:#fff;padding:.5rem .9rem;border-radius:999px;box-shadow:var(--shadow)}
.nav-toggle{display:none;border:0;background:none;font-size:1.4rem}
@media (max-width:900px){
  .nav{display:none}
  body.nav-open .nav{display:flex;position:fixed;inset:64px 12px auto 12px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;flex-direction:column}
  .nav-toggle{display:block;margin-inline-start:auto}
}

.hero{position:relative;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:1rem;padding:60px 16px 0;min-height:68vh;overflow:hidden;background:linear-gradient(135deg,rgba(43,87,161,.05),rgba(28,159,99,.05) 50%, rgba(241,196,15,.05));}
.hero-content h1{font-size:clamp(28px,4vw,46px);line-height:1.25}
.hero-content .accent{color:var(--blue);position:relative}
.hero-content p{color:var(--muted);font-size:1.1rem}
.hero-ctas{display:flex;gap:.8rem;margin-top:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;border-radius:12px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-weight:700}
.btn-primary{background:var(--blue);color:#fff;border-color:transparent}
.btn-outline{background:#fff;color:var(--ink)}
.hero-art{position:relative;height:100%}
.orb{position:absolute;filter:blur(10px);opacity:.9;border-radius:50%;animation:float 8s ease-in-out infinite alternate}
.orb-blue{width:180px;height:180px;background:radial-gradient(circle at 30% 30%,#6aa0ff, var(--blue));top:10%;left:10%}
.orb-green{width:120px;height:120px;background:radial-gradient(circle at 30% 30%,#66e1a7, var(--green));bottom:10%;right:12%}
.orb-yellow{width:90px;height:90px;background:radial-gradient(circle at 30% 30%,#ffe98a, var(--yellow));top:30%;right:35%}
@keyframes float{to{transform:translateY(-14px) translateX(10px)}}
.hero-wave{position:absolute;bottom:-1px;left:0;width:100%;height:200px}
.hero-wave path{fill:#fff}

.about{padding:40px 16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.about-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.about-cards .card {
  flex: 1 1 calc(25% - 1rem);
  min-width: 240px;
}
.card{background:#fff;border:1px solid #eef2f7;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.card .more{display:inline-block;margin-top:.3rem}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .about-cards{grid-template-columns:1fr}
}

.stats{display:flex;justify-content:center;gap:2rem;padding:30px 16px}
.stat{background:#fff;border:1px solid #eef2f7;border-radius:16px;padding:1rem 1.5rem;box-shadow:var(--shadow);min-width:140px;text-align:center}
.stat .num{font-size:2rem;font-weight:800;color:var(--blue)}

.marquee{overflow:hidden;border-block:1px dashed #e5e7eb;background:#fff}
.marquee .track{display:flex;gap:2rem;white-space:nowrap;animation: marq-rev 20s linear infinite;;padding:10px 0;font-weight:700;color:var(--muted)}
@keyframes marq-rev { 
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}



.page-hero{padding:60px 16px 30px;background:linear-gradient(90deg,rgba(43,87,161,.06),rgba(28,159,99,.06));border-bottom:1px solid #e5e7eb}
.page-hero h1{font-size:clamp(28px,4vw,42px)}

.services-grid{padding:30px 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.svc{background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:1rem;box-shadow:var(--shadow);transition:transform .2s}
.svc:hover{transform:translateY(-4px)}
.icon{width:48px;height:48px;border-radius:12px;margin-bottom:.6rem;background:linear-gradient(135deg,#fff, #eef2ff);border:1px solid #e5e7eb}
.icon.gov{box-shadow:inset 0 0 0 3px var(--blue)}
.icon.print{box-shadow:inset 0 0 0 3px var(--green)}
.icon.bank{box-shadow:inset 0 0 0 3px var(--yellow)}
@media (max-width:900px){.services-grid{grid-template-columns:1fr}}

.list-cards{padding:30px 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.list-cards{grid-template-columns:1fr}}

.gallery{padding:30px 16px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery-grid figure{margin:0;background:#fff;border:1px solid #eef2f7;border-radius:12px;padding:.6rem;box-shadow:var(--shadow)}
.gallery-grid figcaption{text-align:center;color:var(--muted);font-size:.9rem;margin-top:.3rem}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.logos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:center}
.avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;margin-bottom:.5rem}
.thumb{width:60px;height:60px;object-fit:cover;border-radius:8px}

.contact-section .grid{grid-template-columns:1.2fr .8fr}
.form{display:grid;gap:.6rem}
.form input,.form select,.form textarea{width:100%;padding:.7rem;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.map-holder{aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb}
.alert{padding:.7rem 1rem;border-radius:12px;margin:1rem 0}
.alert.success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.alert.danger{background:#fef2f2;color:#7f1d1d;border:1px solid #fecaca}

.cta-banner{padding:40px 16px;text-align:center}
.cta-banner .btn{margin-top:.5rem}

.site-footer{padding:30px 16px;background:#0f172a;color:#dbeafe;margin-top:30px}
.site-footer a{color:#93c5fd}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
.footer-logo{width:54px;height:54px;margin-bottom:.5rem}
.copy{margin-top:12px;text-align:center;color:#9ca3af}

.reveal{opacity:0;transform:translateY(18px);transition:all .6s ease}
.reveal.in{opacity:1;transform:none}

.admin{background:#f5f8ff}
.admin-top{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#fff;border-bottom:1px solid #e5e7eb}
.admin-main{padding:1rem}
.admin-card{max-width:420px;margin:10vh auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1rem;box-shadow:var(--shadow)}
.admin .table{width:100%;border-collapse:collapse;background:#fff}
.admin .table th,.admin .table td{border:1px solid #e5e7eb;padding:.5rem;text-align:center}
.admin .btn{margin:.2rem}
.site-footer {
    background: #1D3C78; /* أزرق الشعار */
    color: #ffffff;
    padding: 40px 20px;
    margin-top: 40px;
}

.site-footer a {
    color: #ffffff;
}

.site-footer .copy {
    text-align: center;
    margin-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 15px;
}