:root {
  --ct-navy: #0f172a;
  --ct-gold: #d4a017;
  --ct-gold-hover: #b88a14;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #f8fafc;
  color: #334155;
  overflow-x: hidden;
}

.font-playfair {
  font-family: 'Playfair Display', serif;
}

/* ═══════════════════════════════════════════
   Arabic / RTL Support
   When lang=ar, Tajawal font is loaded and
   html[dir="rtl"] rules override the defaults.
═══════════════════════════════════════════ */
html[dir="rtl"] body {
  font-family: 'Tajawal', sans-serif;
  font-size: 1.05rem; /* Tajawal reads better slightly larger */
  letter-spacing: 0;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
}

/* Override the playfair headings for Arabic */
html[dir="rtl"] .font-playfair {
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
}

/* Move WhatsApp float button to the LEFT in RTL */
html[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 40px;
}

/* Fix icon spacing in RTL (icons are always LTR) */
html[dir="rtl"] .bi {
  display: inline-block;
}

/* Card and text alignment improvements for RTL */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end   { text-align: left  !important; }

/* Ensure timeline stays correct in RTL */
html[dir="rtl"] .timeline {
  border-right: 2px solid #d4a017 !important;
  border-left: none !important;
  padding-right: 1.5rem !important;
  padding-left: 0 !important;
  margin-right: 0.25rem !important;
  margin-left: 0 !important;
}

html[dir="rtl"] .timeline-item .position-absolute {
  right: auto;
  left: 0;
  margin-right: 0;
  margin-left: -2px;
}

.bg-navy { background-color: var(--ct-navy) !important; }
.text-navy { color: var(--ct-navy) !important; }
.border-navy { border-color: var(--ct-navy) !important; }

.bg-gold { background-color: var(--ct-gold) !important; }
.text-gold { color: var(--ct-gold) !important; }
.border-gold { border-color: var(--ct-gold) !important; }

.btn-gold {
  background-color: var(--ct-gold);
  border-color: var(--ct-gold);
  color: var(--ct-navy);
}
.btn-gold:hover {
  background-color: var(--ct-gold-hover);
  border-color: var(--ct-gold-hover);
  color: var(--ct-navy);
}

.btn-outline-gold {
  color: var(--ct-gold);
  border-color: var(--ct-gold);
}
.btn-outline-gold:hover {
  background-color: var(--ct-gold);
  color: var(--ct-navy);
}

.btn-navy {
  background-color: var(--ct-navy);
  border-color: var(--ct-navy);
  color: #fff;
}
.btn-navy:hover {
  background-color: #1e293b;
  border-color: #1e293b;
  color: #fff;
}

.btn-outline-navy {
  color: var(--ct-navy);
  border-color: var(--ct-navy);
}
.btn-outline-navy:hover {
  background-color: var(--ct-navy);
  color: #fff;
}

.text-light-opacity {
  color: rgba(255, 255, 255, 0.7);
}

.hover-gold:hover {
  color: var(--ct-gold) !important;
}

/* Animations & Effects */
.hover-scale {
  transition: transform 0.2s ease-in-out;
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

.animate-fade-in-up {
  animation: fadeInUp 1s ease-out forwards;
}

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

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  color: #FFF;
}