/* =========================
   Reset & Base
========================= */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f9f9f9;
  color: #333;
  text-align: center;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* =========================
   Hero Section - Super Fast (No Image)
========================= */
.hero {
  position: relative;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 60px 12px 90px;
  /* تدرج ألوان أزرق ملكي يعطي فخامة للبراند */
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  overflow: hidden;
}

.hero .hero-content {
  max-width: 1100px;
  margin: auto;
  opacity: 1;
}

.hero h1 {
  font-size: 24px; /* كبرنا الخط قليلاً لتعويض غياب الصورة */
  margin-bottom: 12px;
  font-weight: 800;
}

.hero p {
  font-size: 16px;
  margin-bottom: 18px;
}

/* باقي التنسيقات (الأزرار، الهيدر، الخريطة) تبقى كما هي لضمان عمل الموقع */
.hero-buttons { display: flex; flex-direction: column; gap: 10px; max-width: 300px; margin: auto; }
.btn { padding: 12px 20px; border-radius: 25px; font-weight: 700; color: #fff; display: inline-block; transition: 0.2s; }
.btn-call { background:#007bff; border: 2px solid #fff; } /* أضفنا إطار أبيض ليبرز على الخلفية */
.btn-whatsapp { background:#25d366; }
header { background:#007bff; color:#fff; padding:18px; }
main { max-width:1100px; margin:30px auto; padding:0 16px; text-align:right; }
section img { width:280px; border-radius:10px; content-visibility: auto; aspect-ratio: 4/3; }
.map-container { max-width:1000px; height:340px; margin:auto; border-radius:14px; overflow:hidden; }
#whatsapp-fixed { position: fixed; right:20px; bottom:80px; background:#25d366; border-radius:50px; padding:12px 16px; color:#fff; z-index:999; }
#app-download-fixed { position: fixed; right:20px; bottom:20px; background:#007bff; border-radius:50px; padding:12px 16px; color:#fff; z-index:999; }

@media (max-width:400px) {
  .hero h1 { font-size:22px; }
  section img { width:100%; }
}