:root {
      --primary: #1a3a5f;      
      --accent: #bfa15f;       
      --dark: #11253e;
      --light-bg: #f8f9fa;
      --font-ar: 'Cairo', 'El Messiri', sans-serif;
      --font-en: 'Inter', sans-serif;
    }

    body {
      font-family: var(--font-ar);
      background-color: #ffffff;
      color: #333;
      transition: all 0.3s ease;
    }

    html[lang="en"] body {
      font-family: var(--font-en);
    }

    .tech-code {
      font-family: 'Courier New', Courier, monospace;
      font-weight: bold;
    }

    .hero-section {
      background: linear-gradient(rgba(26, 58, 95, 0.93), rgba(17, 37, 62, 0.88)), url('https://images.unsplash.com/photo-1559526324-4b87b5e36e44?auto=format&fit=crop&w=1920&q=80');
      background-size: cover;
      background-position: center;
      padding: 140px 0 100px 0;
      color: white;
      clip-path: ellipse(160% 100% at 50% 0%);
    }

    .btn-gold {
      background-color: var(--accent);
      color: white;
      font-weight: 600;
      border: 1px solid var(--accent);
      transition: 0.3s;
    }
    .btn-gold:hover {
      background-color: #ab8e50;
      color: white;
      box-shadow: 0 4px 15px rgba(191, 161, 95, 0.4);
    }

    .btn-outline-gold {
      border: 2px solid var(--accent);
      color: var(--accent);
      font-weight: 600;
    }
    .btn-outline-gold:hover {
      background-color: var(--accent);
      color: white;
    }

    .text-primary-color { color: var(--primary); }
    .text-accent-color { color: var(--accent); }

    .feature-card, .process-card, .level-card {
      border: none;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
      border-radius: 12px;
      transition: transform 0.3s ease;
      background: #fff;
    }
    .feature-card:hover, .level-card:hover {
      transform: translateY(-5px);
    }

    .badge-certified {
      background-color: #d1e7dd;
      color: #0f5132;
      border: 1px solid #badbcc;
      font-size: 0.8rem;
      padding: 0.4rem 0.8rem;
      border-radius: 20px;
    }

    .lang-btn {
      cursor: pointer;
      font-weight: bold;
      border: 1px solid rgba(255,255,255,0.4);
      padding: 3px 10px;
      border-radius: 5px;
      transition: 0.2s;
      color: lightgrey;
    }
    .lang-btn:hover {
      background: white;
      color: var(--primary);
    }

    /* أزرار المفضلة التفاعلية */
    .btn-favorite {
      background: #f8f9fa;
      border: 1px solid #eee;
      color: #ccc;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.2s;
      cursor: pointer;
    }
    .btn-favorite:hover, .btn-favorite.active {
      background: #fff0f1;
      color: #dc3545;
      border-color: #ffccd1;
    }

    html[dir="rtl"] .ms-auto-custom { margin-left: auto !important; }
    html[dir="ltr"] .ms-auto-custom { margin-right: auto !important; }
    html[dir="rtl"] .border-end-md { border-left: 1px solid #dee2e6; }
    html[dir="ltr"] .border-end-md { border-right: 1px solid #dee2e6; }
    @media (max-width: 768px) {
      .border-end-md { border: none !important; }
    }
  
  
      .login-container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
      margin: 100%;
    }

    .login-card {
      border: none;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      border-radius: 16px;
      background: #fff;
      overflow: hidden;
    }
    
    
    
    /* تنسيقات كارد الفيسبوك المخصص لـ إبزنز */
.fb-style-card {
  border-radius: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fb-style-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* حاوية الأفاتار لضمان الأبعاد الثابتة */
/* حاوية الأفاتار لضمان الأبعاد الثابتة */
.fb-avatar-container {
  width: 45px !important;
  height: 45px !important;
  display: inline-block; /* يضمن ألا تنهار أبعاد الحاوية */
  position: relative;
  vertical-align: middle;
}

/* في حال وجود صورة فعلية للمشروع يتم قصها بشكل دائري متناسق */
.fb-avatar-img {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  object-fit: cover; 
  border: 1px solid #e0e0e0;
  display: block;
}

/* في حال عدم وجود صورة يتم استخدام الخلفية الافتراضية بالأيقونة */
.fb-avatar-fallback {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  background-color: var(--primary, #1a3a5f) !important;
  font-size: 1.1rem;
  display: flex !important;         /* تفعيل مصفوفة المرونة داخلياً */
  align-items: center !important;    /* محاذاة الأيقونة عمودياً */
  justify-content: center !important; /* محاذاة الأيقونة أفقياً */
  
}

/* هوامش ذكية تدعم الاتجاهين */
html[dir="rtl"] .ms-3-custom { margin-right: 0.85rem !important; margin-left: 0 !important; }
html[dir="ltr"] .ms-3-custom { margin-left: 0.85rem !important; margin-right: 0 !important; }

/* شريط التفاعلات السفلي */
.fb-metrics-bar {
  background-color: #f0f2f5 !important;
  border: none !important;
}

/* أزرار الإجراءات على غرار الفيسبوك */
.fb-action-btn {
  border: none !important;
  background: none !important;
  border-radius: 6px;
  transition: background 0.2s;
  white-space: nowrap;
}
.fb-action-btn:hover {
  background-color: #f2f2f2 !important;
}
.fb-action-btn.active .fa-heart {
  color: #dc3545 !important;
}
.fb-action-btn.active {
  color: #dc3545 !important;
  font-weight: bold;
}
.fb-action-primary:hover {
  background-color: rgba(191, 161, 95, 0.1) !important;
}