:root {
  --navy: #0f172a;
  --gold: #b48c36;
  --gold-light: #d4af37;
  --cream: #fdfcfb;
}

[dir="rtl"] .rtl\:order-1 {
  order: 1 !important;
}

[dir="rtl"] .rtl\:order-2 {
  order: 2 !important;
}

* {
  font-family: "Cairo", sans-serif;
}

/* الكود ده بيمنع تطبيق خط كايرو على أي أيقونة */
/* تعديل الكود ليتناسب مع الإصدار السادس الذي تستخدمه */
i[class^="fa-"],
i[class*=" fa-"],
.fa,
.fas,
.fab,
.fa-brands,
/* إضافة كلاس البراندات */
.fa-solid {
  /* إضافة كلاس السوليد */
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
  font-weight: 900;
}

/* [lang="ar"] {
  font-family: "Tajawal", sans-serif;
}
[lang="en"] {
  font-family: "Cairo", sans-serif;
}
.serif-title {
  font-family: "Amiri", serif;
}
[lang="en"] .serif-title {
  font-family: "Playfair Display", serif;
} */

.bg-navy {
  background-color: var(--navy);
}

.text-gold {
  color: var(--gold);
}

.bg-gold {
  background-color: var(--gold);
}

/* Navbar Navy & Gold Style */
#main-nav {
  background-color: #fff;
  border-bottom: 2px solid var(--gold);
}

/* Carousel */
.carousel-item {
  display: none;
  animation: slideEffect 1s ease;
}

.carousel-item.active {
  display: block;
}

@keyframes slideEffect {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

/* SPA Logic */
.page-content {
  display: none;
}

.page-content.active {
  display: block;
  animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accordion (As requested in image) */
.accordion-item {
  border-bottom: 1px solid #111;
  padding: 1.5rem 0;
}

.accordion-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0, 1, 0, 1);
  color: #4b5563;
  line-height: 1.8;
  font-size: 1.125rem;
}

.accordion-item.active .accordion-content {
  max-height: 1000px;
  transition: max-height 1s ease-in;
  margin-top: 1rem;
}

.accordion-item.active .chevron {
  transform: rotate(180deg);
}

.gold-button {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--navy);
  transition: all 0.3s ease;
}

.gold-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(180, 140, 54, 0.3);
}

.practice-card.expanded {
  border-color: var(--gold);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.card-header {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-details {
  transition: all 0.5s ease-in-out;
}

.font-ruqaa {
  font-family: 'Aref Ruqaa', serif !important;
}

/* لما تكون اللغة عربي، طبق خط الرقعة على الـ h1 اللي جواه لوجو المكتب */
html[lang="ar"] h1[data-i18n="logo"],
[data-i18n="h1-t"] {
  font-family: 'Aref Ruqaa', serif !important;
}

html[lang="ar"] [data-i18n="h1-d"],
[data-i18n="h2-d"],
[data-i18n="h3-d"] {
  font-family: 'Cairo', sans-serif !important;
}

/* لما تكون اللغة إنجليزي، رجعه لخط كايرو عشان يظبط مع باقي الموقع */
html[lang="en"] h1[data-i18n="logo"] {
  font-family: 'Cairo', sans-serif !important;
}

/* كود حركة شريط الشركات المتنقل دائمًا */
/* كود الأنيميشن الصحيح المتوافق تماماً مع الـ RTL ومنع التداخل */
/* @keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes marquee2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
} */

/* كود الحركة الثابت ناحية الشمال */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee 25s linear infinite !important;
}

/* إيقاف الحركة عند تحريك الماوس */
.overflow-x-hidden:hover .animate-marquee {
  animation-play-state: paused;
}