/* Add custom CSS styles below */ 
/* ============================================================
   1. الهيدر وشريط التنقل - مظهر منصات الخدمات العالمية
   ============================================================ */
.site-header {
  background: rgba(15, 23, 42, 0.95) !important; /* خلفية كحلي/أزرق داكن فاخر */
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  position: sticky !important;
  top: 0;
  z-index: 999;
}

.main-menu a {
  color: #f8fafc !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  padding: 8px 16px !important;
  border-radius: 6px;
  transition: all 0.25s ease !important;
}

.main-menu a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #38bdf8 !important; /* لون سماوي تفاعلي */
}

/* ============================================================
   2. قسم الواجهة الرئيسي (Hero Section) - إبراز قيمة الخدمات
   ============================================================ */
.main-banner, .hero-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  padding: 60px 20px !important;
  border-radius: 24px !important;
  color: #ffffff !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
  margin-bottom: 40px !important;
}

.main-banner h1, .hero-section h1 {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  background: linear-gradient(90deg, #ffffff, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   3. تحويل كروت الخدمات/المنتجات إلى كروت تفاعلية (Service Cards)
   ============================================================ */
.product-box {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 16px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.product-box:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border-color: #3b82f6 !important;
}

/* زر طلب الخدمة / الشراء */
.product-box .btn-primary, .s-add-to-cart-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.product-box .btn-primary:hover, .s-add-to-cart-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
}

/* ============================================================
   4. الفوتر وشريط الحقوق (Agency Style Footer)
   ============================================================ */
.site-footer {
  background: #090d16 !important;
  border-top: 1px solid #1e293b !important;
  color: #94a3b8 !important;
}

.site-footer a {
  color: #cbd5e1 !important;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: #38bdf8 !important;
}