@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');

:root{
  --primary:#0a78b3;   /* أزرق طبي */
  --accent:#0f9ce0;
  --muted:#6b7280;
  --bg:#f6fbfd;
  --card:#ffffff;
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#0f1724;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  direction:rtl;
}

.logo img{
  border: solid var(--primary) 3px;
   width: 30vmin;           /* or any width unit */
  aspect-ratio: 1 / 1;    /* keeps it square */
  border-radius: 50%;
  background: rebeccapurple;
  
}

/* Header */
.header{
  background:linear-gradient(90deg,var(--primary),var(--accent));
  color:white;
  padding:18px 20px;
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  box-shadow:0 6px 20px rgba(10,120,179,0.12);
}
.header .container{
  max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
}
.brand{font-weight:700; font-size:20px; letter-spacing:0.2px}
.header nav a{color:rgba(255,255,255,0.95); text-decoration:none; margin-left:18px; font-weight:600}
.header .cta{background:white; color:var(--primary); padding:10px 14px; border-radius:8px; font-weight:700; text-decoration:none}

/* Hero */
.hero{
  padding:120px 20px 60px; /* header fixed */
  text-align:center;
  background:linear-gradient(180deg, rgba(10,120,179,0.06), transparent 60%);
}
.hero .container{max-width:1100px; margin:0 auto}
.hero h1{font-size:34px; margin:0 0 12px; color:var(--primary)}
.hero p{color:var(--muted); font-size:18px; margin:0 0 18px}
.hero .btn{
  display:inline-block; background:var(--primary); color:white; padding:12px 20px; border-radius:10px; text-decoration:none; font-weight:700;
  box-shadow:0 8px 20px rgba(10,120,179,0.14);
}

/* Layout */
.container{max-width:1100px; margin:40px auto; padding:0 20px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid{grid-template-columns:1fr} .header .container{flex-direction:column; gap:10px} .header nav{display:flex; flex-wrap:wrap; justify-content:center} }

/* Card */
.card{
  background:var(--card); padding:22px; border-radius:var(--radius); box-shadow:0 8px 24px rgba(15,23,36,0.06);
}
.h3{color:var(--primary); font-weight:700; margin:0 0 10px; font-size:20px}
.p-muted{color:var(--muted); line-height:1.7}

/* Services list */
.services-list{display:flex; flex-direction:column; gap:14px}
.service-item{display:flex; gap:14px; align-items:flex-start}
.service-item .icon{background:linear-gradient(180deg,var(--primary),var(--accent)); color:white; width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:12px; font-weight:700; font-size:18px}
.service-item p{margin:0; font-weight:600}

/* Footer */
footer{background:linear-gradient(90deg,var(--primary),var(--accent)); color:white; padding:28px 20px; margin-top:40px}
footer .container{max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap}
footer p{margin:0}

/* Small utilities */
.text-center{text-align:center}
.mt-8{margin-top:32px}
.mb-6{margin-bottom:24px}
.badge{display:inline-block; background:rgba(10,120,179,0.12); color:var(--primary); padding:6px 10px; border-radius:999px; font-weight:700}
.lang-switch {
  margin-left: 12px; /* للإنجليزية يظهر على يمين الهيدر، بالعربية على اليسار */
  padding: 6px 12px;
  background: #eee;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: 0.2s;
}

.lang-switch:hover {
  background: #ddd;
}