:root{
  --navy:#0b3d91;
  --navy-700:#0a357f;
  --navy-900:#071f4a;
  --accent:#12b3ff;
  --light:#f7f9fc;
  --text:#1c2434;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:linear-gradient(180deg,#ffffff,#f2f6ff)}
a{text-decoration:none;color:inherit}
.container{max-width:100%;margin:0 auto; overflow-x:auto;}
header{background:linear-gradient(135deg,var(--navy),var(--navy-700));color:white;position:sticky;top:0;z-index:1000;box-shadow:0 6px 24px rgba(7,31,74,.25)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.logo-img{height:42px;width:auto;display:block;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.nav-links{display:flex;gap:18px;align-items:center;font-weight:600;flex-wrap:wrap}
.nav-links a{opacity:.9;padding:8px 10px;border-radius:12px}
.nav-links a.active,.nav-links a:hover{background:rgba(255,255,255,.14);opacity:1}
.lang-switch{margin-left:8px;border:1px solid rgba(255,255,255,.35);padding:8px 12px;border-radius:14px}
.burger{display:none;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:white;margin:5px 0}
@media(max-width:900px){.nav-links{display:none;flex-direction:column;align-items:flex-start;background:linear-gradient(135deg,var(--navy),var(--navy-700));position:absolute;left:0;right:0;top:62px;padding:12px 20px;border-bottom-left-radius:18px;border-bottom-right-radius:18px}.nav-links.open{display:flex}.burger{display:block}}
.hero{padding:20px 0 10px}
.card{background:white;border-radius:22px;padding:20px;box-shadow:0 8px 32px rgba(11,61,145,.12);margin-bottom:10px}
.h1{font-size:clamp(28px,3vw,40px);margin:0 0 10px;color:var(--navy-900)}
.h2{font-size:clamp(22px,2.5vw,28px);margin:20px 0 8px;color:var(--navy)}
.p{font-size:16px;line-height:1.85;opacity:.95;padding:0}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;font-weight:700;background:var(--navy);color:#fff}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.section{padding:26px 0}
.post-content{background:#fff;border-radius:20px;padding:10px;box-shadow:0 8px 26px rgba(7,31,74,.08);overflow-x:hidden;}
.post-content img{border-radius:14px}
footer{background:#0a357f;color:#e9f0ff;padding:36px 0;margin-top:40px}
.floating-btn{position:fixed;z-index:1500;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.floating-whatsapp{right:18px;bottom:18px;background:#25d366}
.floating-call{left:18px;bottom:18px;background:#0b3d91}
.floating-btn img{width:28px;height:28px}
img{max-width:100%;height:auto;display:block;margin:16px auto}
.gallery img{border-radius:12px;transition:transform .3s}
.gallery img:hover{transform:scale(1.05)}
.testimonials .card{text-align:center;padding:20px}
ul{padding-inline-start:20px}


.services {
  padding: 60px 20px;
  background: #f9f9f9;
  text-align: center;
}

.services .h2 {
  font-size: 28px;
  margin-bottom: 40px;
  color: #333;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}


.card h3 {
  font-size: 20px;
  color: #2c7a5c; /* لون أخضر يليق مع الناف بار */
  margin-bottom: 10px;
}

.card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}