:root {
  --primary: #004aad;
  --accent: #25d366;
  --bg: #f9fbfd;
  --text: #1c1c1c;
  --white: #ffffff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Cairo", sans-serif; background-color: var(--bg); color: var(--text); text-align: center; direction: rtl; }
.header { background: linear-gradient(135deg, var(--primary), #007bff); color: var(--white); padding: 30px 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; }
.logo-container { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.logo { width: 140px; height: 140px; border-radius: 50%; border: 3px solid #fff; object-fit: contain; background: #fff; }
.header h1 { margin: 8px 0 0 0; font-size: 1.35rem; line-height: 1.1; }
.sub-title { margin: 6px 0 0 0; font-size: 0.95rem; opacity: 0.95; }
.content { padding: 20px 12px 30px 12px; max-width: 1100px; margin: 0 auto; }
.section-title { font-size: 1.5rem; color: var(--primary); margin-bottom: 6px; }
.section-sub { color: #555; font-size: 1rem; margin-bottom: 20px; }
.services-list { column-count: 2; column-gap: 16px; }
.service-category { break-inside: avoid; background: var(--white); border-radius: 16px; box-shadow: 0 5px 18px rgba(0,0,0,0.06); padding: 18px; text-align: right; transition: all 0.25s ease; }
.service-category:hover { transform: translateY(-6px); background: #f0f6ff; box-shadow: 0 10px 30px rgba(0,74,173,0.08); }
.service-category h3 { color: var(--primary); font-size: 1.15rem; margin: 0 0 8px 0; display: inline-block; border-right: 4px solid var(--primary); padding-right: 10px; }
.service-category ul { list-style: none; padding: 0; margin: 0; }
.service-category li { padding: 8px 0; border-bottom: 1px solid #f1f3f6; color: #333; font-size: 0.98rem; }
.service-category li:last-child { border-bottom: none; }
/* team */
.team-section { margin-top: 24px; }
.team-card { display: flex; gap: 18px; align-items: center; background: var(--white); padding: 14px; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); margin: 14px 0; text-align: left; direction: ltr; }
.team-img { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; }
.team-info { text-align: left; }
.team-info h3 { margin: 0; color: #1b1b1b; font-size: 1.25rem; }
.team-info p { margin: 6px 0 0 0; color: #555; font-style: italic; }
.actions-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }
.action { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: #fff; width: 88px; height: 88px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); font-weight: 600; }
.action .icon { font-size: 1.6rem; }
.action .label { font-size: 0.95rem; }
.action[href^="tel:"] { background: linear-gradient(135deg,#3b82f6,#0ea5e9); }
.action[href*="wa.me"] { background: linear-gradient(135deg,#10b981,#34d399); }
.action[href*="maps"] { background: linear-gradient(135deg,#f97316,#fb923c); }
.action#shareBtn { background: linear-gradient(135deg,#7c3aed,#a78bfa); border: none; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wh-main { display: inline-block; background: var(--accent); color: var(--white); padding: 12px 26px; border-radius: 50px; font-size: 1.05rem; text-decoration: none; box-shadow: 0 6px 18px rgba(37,211,102,0.18); transition: transform 0.18s ease; }
.footer { background: var(--primary); color: var(--white); padding: 18px 10px; border-top-left-radius: 28px; border-top-right-radius: 28px; margin-top: 30px; }
.footer p { margin: 6px 0; font-size: 0.98rem; }
.whatsapp-fixed { position: fixed; bottom: 20px; right: 20px; background-color: var(--accent); color: var(--white); padding: 16px 18px; border-radius: 50%; font-size: 1.25rem; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,0.18); z-index: 999; transition: transform 0.25s; }
.whatsapp-fixed:hover { transform: scale(1.08); }
@media (max-width: 900px) { .services-list { grid-template-columns: 1fr; } .team-card{direction: rtl;text-align:right;} .team-img{width:100px;height:100px;} .action{width:76px;height:76px;} }

/* Hours pills grid */
.hours { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  max-width: 1000px;
  margin: 8px auto 0;
  padding: 0;
}
.hours li {
  list-style: none;
  background: #1e40af;
  color: #fff;
  padding: 10px 14px;
  border-radius: 9999px;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.hours li .day { font-weight: 700; margin-inline-end: 6px; }
.hours li .time { opacity: .95; }

/* Floating Instagram button */
.instagram-fixed{
  position: fixed;
  right: 20px;
  bottom: 90px; /* above WhatsApp FAB */
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(30% 30% at 30% 30%, #ffdc80 0%, #f77737 35%, #e1306c 70%, #833ab4 100%);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  z-index: 1000;
  transition: transform .15s ease;
}
.instagram-fixed:hover{ transform: translateY(-2px); }
.instagram-fixed svg{ display:block; color:#fff; }

/* Team posters grid */
.team-section .section-title{ text-align:center; margin: 28px 0 16px; }
.team-section .en-sub{ display:block; font-size: .9rem; color:#6b7280; margin-top:4px;}
.team-grid{ display:grid; gap:16px; max-width:1100px; margin: 0 auto; grid-template-columns: 1fr; }
@media (min-width: 900px){ .team-grid{ grid-template-columns: 1fr 1fr; } }
.team-poster{ width:100%; height:auto; border-radius:18px; box-shadow: 0 10px 24px rgba(0,0,0,.10); }

/* Instagram action tile */
.action[href*="instagram.com"]{
  background: radial-gradient(30% 30% at 30% 30%, #ffdc80 0%, #f77737 35%, #e1306c 70%, #833ab4 100%);
  color: #fff;
}

/* Instagram icon image inside action tile */
.action .icon-img{
  width: 22px;
  height: 22px;
  display: block;
}

/* IG tile: icon sizing with no background */
.action[href*="instagram.com"] .icon-ig { display:flex; align-items:center; justify-content:center; }
.action[href*="instagram.com"] .icon-ig svg { width: 44px; height: 44px; color:#fff; }
/* Optionally slightly smaller label for English */
.actions-row .action .label{ white-space:nowrap; }
.action[href*="instagram.com"] .label{ font-size: 20px; }