/* =============================================
   GLOBAL STYLES - HighMix Company
   Primary Color: #FF0900
   Font: Cairo (Arabic), Inter (English)
   ============================================= */

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

body {
  font-family: 'Cairo', 'Inter', sans-serif;
  direction: rtl;
  background: #f5f5f8;
  color: #222;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── SHARED BUTTON STYLES ──────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: #FF0900;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px rgba(255,9,0,0.35);
  border: 2px solid transparent;
}

.btn-primary:hover {
  background: #fff;
  color: #FF0900;
  border-color: #FF0900;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(255,9,0,0.22);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: transparent;
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,0.20);
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: rgba(0,0,0,0.05);
  border-color: #FF0900;
  color: #FF0900;
  transform: translateY(-3px);
}

/* ─── SECTION UTILITY ───────────────────────── */
.section-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── GLOBAL ANIMATIONS ─────────────────────── */
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-18px); }
  to   { opacity:1; transform:translateY(0); }
}

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

@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}