/* ==========================================================
   إعدادات عامة (Reset + متغيرات الألوان)
   الستايل: خلفية داكنة (أسود/رمادي غامق) + لون برتقالي مميز
   ========================================================== */
:root {
  --color-bg: #0d0d0d;           /* خلفية الصفحة الأساسية */
  --color-bg-alt: #151515;       /* خلفية بديلة لتمييز الأقسام */
  --color-card: #1c1c1c;         /* خلفية البطاقات */
  --color-card-border: #2b2b2b;  /* حدود خفيفة للبطاقات والحقول */

  --color-orange: #f7a828;       /* اللون المميز الأساسي (عناوين وأزرار) */
  --color-orange-dark: #d98e14;  /* اللون المميز عند hover */

  --color-white: #ffffff;
  --color-text-secondary: #c9c9c9; /* نص فقرات على خلفية داكنة */
  --color-text-muted: #8a8a8a;     /* نص ثانوي خافت (فوتر، تفاصيل صغيرة) */
  --color-error: #ff6b6b;

  --radius: 16px;
  --transition: 0.25s ease;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* تفعيل التمرير السلس عند استعمال روابط داخلية */
  overflow-x: hidden; /* منع أي تمرير أفقي غير مرغوب فيه على الهاتف */
}

body {
  font-family: "Cairo", "Segoe UI", sans-serif;
  background-color: var(--color-bg);
  color: var(--color-white);
  line-height: 1.7;
  overflow-x: hidden;
  width: 100%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.section-title {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--color-orange);
  margin-bottom: 36px;
}

/* ==========================================================
   تأثير الظهور التدريجي عند التمرير (Scroll Reveal)
   العنصر يبدأ مخفياً ومنزاحاً للأسفل، ثم "يصعد" ويظهر بوضوح
   عندما يصل إليه الزائر أثناء التمرير (يُفعَّل عبر script.js)
   ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* احترام إعدادات من يفضّل تقليل الحركة في جهازه */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================
   الهيدر العلوي
   ========================================================== */
.site-header {
  background: #000000;
  border-bottom: 1px solid var(--color-card-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* حتى لا يخرج المحتوى عن حدود الشاشة في الهواتف الصغيرة جداً */
  gap: 10px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 95px; /* 112px - 15% */
  width: auto;
  display: block;
}

.btn-header {
  background: var(--color-orange);
  color: #1a1200;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 50px;
  transition: background var(--transition), transform var(--transition);
}

.btn-header:hover {
  background: var(--color-orange-dark);
  transform: translateY(-2px);
}

.btn-header-ghost {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-card-border);
}

.btn-header-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================
   القسم الأول: الهيرو
   ========================================================== */
.hero {
  position: relative;
  padding: 70px 20px 90px;
  overflow: hidden;
}

/* خلفية داكنة مع توهج برتقالي خفيف */
.hero-background {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 15%, rgba(247, 168, 40, 0.14) 0%, transparent 45%),
              radial-gradient(circle at 85% 85%, rgba(247, 168, 40, 0.1) 0%, transparent 50%),
              var(--color-bg);
  z-index: -1;
}

.hero-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-question {
  font-size: 19px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}

.hero-answer {
  font-size: 40px;
  font-weight: 800;
  color: var(--color-orange);
  margin-bottom: 18px;
}

.hero-answer-sub {
  display: block;
  color: var(--color-white);
  font-size: 26px;
  margin-top: 6px;
}

.hero-welcome {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
}

/* شرائح الجمهور المستهدف */
.audience-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.audience-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.audience-badge {
  /* لون أغمق من خلفية البطاقة حتى تبقى الشارة واضحة بعد أن أصبحت داخل intro-card */
  background: var(--color-bg);
  border: 1px solid var(--color-orange);
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 50px;
}

/* البطاقة التعريفية في وسط الصفحة */
.intro-card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  color: var(--color-white);
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 44px 36px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  animation: fadeInUp 0.7s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.badge {
  display: inline-block;
  background: rgba(247, 168, 40, 0.12);
  color: var(--color-orange);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.intro-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 14px;
}

.intro-description {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
}

/* ==========================================================
   الأزرار
   ========================================================== */
.btn-primary {
  display: inline-block;
  background: var(--color-orange);
  color: #1a1200;
  font-size: 17px;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 50px;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  box-shadow: 0 8px 20px rgba(247, 168, 40, 0.3);
  width: 100%;
  max-width: 320px;
  text-align: center;
}

.btn-primary:hover {
  background: var(--color-orange-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(247, 168, 40, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-outline {
  display: inline-block;
  background: transparent;
  border: 2px solid var(--color-orange);
  color: var(--color-orange);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 50px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.btn-outline:hover {
  background: var(--color-orange);
  color: #1a1200;
  transform: translateY(-2px);
}

/* ==========================================================
   قسم المؤسس (الصورة + قصة النجاح)
   ========================================================== */
.founder-section {
  max-width: 700px;
  margin: 0 auto;
  padding: 70px 20px 20px;
  text-align: center;
}

.founder-photo img {
  max-width: 100%;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow);
  margin-bottom: 36px;
}

.founder-intro {
  margin-bottom: 44px;
}

.founder-intro .badge {
  margin-bottom: 12px;
}

/* شارة عدد سنوات الخبرة */
.founder-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-card);
  border: 1px solid var(--color-orange);
  border-radius: 50px;
  padding: 10px 22px;
  margin-top: 18px;
}

.founder-stat-number {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-orange);
}

.founder-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* الخط الزمني لمسيرة المؤسس */
.timeline {
  position: relative;
  text-align: right;
  margin-bottom: 44px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 29px;
  width: 2px;
  background: var(--color-card-border);
}

.timeline-item {
  position: relative;
  padding-right: 76px;
  margin-bottom: 26px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-marker {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-orange);
  color: #1a1200;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 0 0 4px var(--color-bg);
}

.timeline-body {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  padding: 18px 22px;
}

.timeline-body h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-orange);
  margin-bottom: 8px;
}

.timeline-body ul {
  list-style: disc;
  margin-right: 18px;
}

.timeline-body li {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.timeline-body li:last-child {
  margin-bottom: 0;
}

/* اقتباس رسالة المؤسس */
.founder-quote {
  background: var(--color-card);
  border-right: 4px solid var(--color-orange);
  border-radius: var(--radius);
  padding: 26px 24px;
  text-align: center;
}

.founder-quote-main {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-orange);
  margin-bottom: 10px;
}

.founder-quote p {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ==========================================================
   قسم المميزات
   ========================================================== */
.benefits-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px 60px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.benefit-card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
  /* opacity مضافة هنا (وليس فقط في .reveal) لأن هذا التعريف يأتي بعده
     فالترتيب ويغلب عليه في تحديد transition النهائي للعنصر */
  transition: transform var(--transition), border-color var(--transition), opacity 0.7s ease;
}

.benefit-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-orange);
}

.benefit-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  background: var(--color-orange);
  color: #1a1200;
  font-weight: 800;
  font-size: 18px;
  border-radius: 50%;
}

.benefit-card p {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* ==========================================================
   قسم الدعوة النهائية لاتخاذ إجراء
   لمسة برتقالية كاملة لكسر رتابة الخلفية الداكنة
   ========================================================== */
.final-cta-section {
  text-align: center;
  padding: 70px 20px;
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark));
}

.final-cta-section h2 {
  color: #1a1200;
  font-size: 24px;
  font-weight: 800;
  max-width: 600px;
  margin: 0 auto 26px;
}

.final-cta-section .btn-primary {
  background: #1a1200;
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.final-cta-section .btn-primary:hover {
  background: #000000;
}

/* ==========================================================
   قسم الموقع الجغرافي (Location)
   ========================================================== */
.location-section {
  max-width: 700px;
  margin: 0 auto;
  padding: 70px 20px;
  text-align: center;
}

.location-subtitle {
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}

.location-photo img {
  max-width: 100%;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.location-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-card);
  border: 1px solid var(--color-orange);
  border-radius: 50px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 28px;
}

.location-map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-card-border);
  margin-bottom: 24px;
  line-height: 0; /* لإزالة أي فراغ إضافي أسفل iframe */
}

.location-map iframe {
  width: 100%;
  height: 320px;
  display: block;
}

/* ==========================================================
   الفوتر
   ========================================================== */
.site-footer {
  background: #000000;
  border-top: 1px solid var(--color-card-border);
  padding: 50px 20px 20px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.footer-col h4 {
  color: var(--color-orange);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 16px;
}

.footer-logo-img {
  height: 103px; /* 121px - 15% */
  width: auto;
  margin-bottom: 12px;
}

.footer-col p,
.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--color-orange);
}

/* إصلاح ترتيب رقم الهاتف: بدون هذا كان المتصفح يعكس ترتيب المجموعات
   الرقمية لأنها موجودة داخل صفحة باتجاه RTL. نجبر الاتجاه على LTR
   داخلياً فقط لعرض الرقم بشكل صحيح، مع إبقاء نفس محاذاة باقي روابط الفوتر */
.tel-link {
  direction: ltr;
  unicode-bidi: embed;
  text-align: right;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: 50%;
  transition: background var(--transition), border-color var(--transition);
}

.footer-social a:hover {
  background: var(--color-orange);
  border-color: var(--color-orange);
}

.footer-social svg {
  width: 16px;
  height: 16px;
  fill: var(--color-white);
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--color-card-border);
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ==========================================================
   صفحة الفورم: قسم تعريفي + خطوات التسجيل
   ========================================================== */
.form-hero {
  text-align: center;
  padding: 60px 20px 40px;
  max-width: 900px;
  margin: 0 auto;
}

.form-hero h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-orange);
  margin-bottom: 10px;
}

.form-hero > p {
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-bottom: 40px;
}

/* الزر الذي ينزل مباشرة إلى الفورم، بين العنوان والفقرة */
.form-hero-btn {
  margin: 22px auto 30px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* بطاقة الخطوة أصبحت رابطاً (a) قابلاً للضغط لينقل الزائر مباشرة إلى الفورم */
.step-card {
  display: block;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  /* opacity مضافة هنا (وليس فقط في .reveal) لأن هذا التعريف يأتي بعده
     فالترتيب ويغلب عليه في تحديد transition النهائي للعنصر */
  transition: transform var(--transition), border-color var(--transition), opacity 0.7s ease;
}

.step-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-orange);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  background: var(--color-orange);
  color: #1a1200;
  font-weight: 800;
  border-radius: 50%;
}

.step-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 8px;
}

.step-card p {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ==========================================================
   قسم فورم التسجيل
   ========================================================== */
.form-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 80px;
}

.form-card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  max-width: 560px;
  width: 100%;
  padding: 44px 36px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.form-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-white);
  text-align: center;
  margin-bottom: 8px;
}

.form-subtitle {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 20px;
  text-align: right;
}

.form-group label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--color-card-border);
  border-radius: 10px;
  /* 16px بالضبط لمنع تكبير الصفحة تلقائياً عند فتح لوحة المفاتيح في آيفون */
  font-size: 16px;
  font-family: inherit;
  color: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  background: #111111;
  /* المتصفح يحاذي حقل رقم الهاتف تلقائياً لليسار لأن قيمته أرقام فقط،
     نجبره على المحاذاة لليمين ليطابق باقي حقول الفورم */
  text-align: right;
}

.form-group input::placeholder {
  color: var(--color-text-muted);
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(247, 168, 40, 0.15);
}

/* منع المتصفح من استبدال خلفية الحقل بلون فاتح عند الإكمال التلقائي (Autofill) */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-white);
  -webkit-box-shadow: 0 0 0 1000px #111111 inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* حالة الخطأ في الحقل */
.form-group input.invalid {
  border-color: var(--color-error);
}

.error-message {
  display: block;
  color: var(--color-error);
  font-size: 13px;
  margin-top: 6px;
  min-height: 16px;
}

.btn-submit {
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
}

/* رسالة الحالة (جاري الإرسال / نجاح) */
.form-status {
  margin-top: 18px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  min-height: 22px;
  transition: opacity var(--transition);
}

.form-status.sending {
  color: var(--color-text-secondary);
}

.form-status.success {
  color: var(--color-orange);
}

.form-status.error {
  color: var(--color-error);
}

/* نافذة تأكيد التسجيل المنبثقة (Modal) في وسط الشاشة */
.modal-overlay {
  display: none; /* مخفية افتراضياً، تُفعَّل عبر كلاس is-visible من script.js */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal-overlay.is-visible {
  display: flex;
}

.modal-box {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  padding: 44px 32px 36px;
  text-align: center;
  box-shadow: var(--shadow);
  animation: fadeInUp 0.3s ease;
}

.modal-close {
  position: absolute;
  top: 12px;
  left: 14px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  transition: color var(--transition);
}

.modal-close:hover {
  color: var(--color-white);
}

.form-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  background: var(--color-orange);
  color: #1a1200;
  font-size: 26px;
  font-weight: 800;
  border-radius: 50%;
}

.modal-box h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-orange);
  margin-bottom: 12px;
}

.modal-box p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.form-success-note {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ==========================================================
   الصفحات القانونية (سياسة الخصوصية / الشروط والأحكام / إخلاء المسؤولية)
   ========================================================== */
.legal-page {
  padding: 60px 20px 90px;
}

.legal-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  padding: 44px 36px;
  box-shadow: var(--shadow);
}

.legal-card h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-orange);
  text-align: center;
  margin-bottom: 30px;
}

.legal-content h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-white);
  margin: 24px 0 8px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.legal-card .btn-outline {
  display: block;
  width: fit-content;
  margin: 34px auto 0;
}

/* ==========================================================
   التجاوب مع الهاتف (Responsive)
   ========================================================== */
@media (max-width: 700px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  /* على الهاتف: عمود واحد فقط لخطوات التسجيل وبطاقات المميزات، حتى تظهر
     كل بطاقة كاملة ومريحة للعين بدل أن تبقى منزاحة أو مقصوصة على الجانب */
  .steps-grid,
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .intro-card,
  .form-card,
  .legal-card {
    padding: 32px 22px;
  }

  .founder-section {
    padding: 50px 16px 10px;
  }

  .timeline-item {
    padding-right: 62px;
  }

  .timeline-marker {
    width: 48px;
    height: 48px;
    font-size: 12px;
  }

  .timeline::before {
    right: 23px;
  }

  .hero-answer {
    font-size: 32px;
  }

  .hero-answer-sub {
    font-size: 21px;
  }

  .hero-question {
    font-size: 16px;
  }

  .btn-primary {
    width: 100%;
    padding: 15px 20px;
  }

  .site-header-inner {
    flex-direction: row;
    gap: 10px;
  }

  .btn-header {
    padding: 8px 14px;
    font-size: 13px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  /* توسيط محتوى كل عمود في الفوتر بدل التصاقه باليمين عندما يصبح عموداً واحداً */
  .footer-col {
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }

  .tel-link {
    text-align: center;
  }

  /* تقليص المسافات العمودية بين الأقسام حتى لا يطول التمرير كثيراً على الهاتف */
  .hero {
    padding: 50px 16px 60px;
  }

  .benefits-section {
    padding: 50px 16px;
  }

  .final-cta-section {
    padding: 50px 16px;
  }

  .final-cta-section h2 {
    font-size: 20px;
  }

  .form-hero {
    padding: 40px 16px 40px;
  }

  .legal-page {
    padding: 40px 16px 60px;
  }

  .location-section {
    padding: 50px 16px;
  }

  .location-map iframe {
    height: 240px;
  }

  /* أزرار سوشيال ميديا أكبر قليلاً لسهولة الضغط عليها بالإصبع */
  .footer-social a {
    width: 42px;
    height: 42px;
  }

  /* منع خروج نص البريد الإلكتروني الطويل عن حدود العمود */
  .footer-col a,
  .footer-col p {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}