/* Global RTL Settings */
body.rtl {
  direction: rtl;
  text-align: right;
  font-family: "Cairo", "Poppins", sans-serif;
}

/* Bootstrap Overrides for RTL (since using LTR build) */
body.rtl .text-start {
  text-align: right !important;
}
body.rtl .text-lg-start {
  text-align: right !important;
}
body.rtl .text-md-start {
  text-align: right !important;
}
body.rtl .text-center {
  text-align: center !important;
}

/* Flip Margins and Paddings */
body.rtl .ms-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.rtl .me-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}
body.rtl .ms-md-5 {
  margin-left: 0 !important;
  margin-right: 3rem !important;
}
body.rtl .ps-lg-5 {
  padding-left: 0 !important;
  padding-right: 3rem !important;
}

/* Specific Section Fixes */

/* Navbar */
body.rtl .navbar-brand {
  margin-right: 0;
}

/* Process List */
/* In RTL, we want the list on the Right side (to avoid overlapping the left-aligned worker image).
   Bootstrap Row in RTL flips order: Spacer (Right) -> List (Left).
   We need to reverse this to: Spacer (Left) -> List (Right). */
body.rtl .dive_list_div {
  flex-direction: row-reverse;
}

/* Ensure the list text aligns right */
body.rtl .process-list {
  float: right !important; /* Keep it right-aligned within the column */
  text-align: right;
}

/* Dive Title: Move to Right */
body.rtl .dive_title {
  margin-left: auto !important; /* Push to right side */
  /* margin-right: 5rem !important; */
  text-align: right !important;
}

/* Backgrounds */
body.rtl .hero-section .container {
  background-position: left center !important;
}

/* Footer Icons */
body.rtl .footer .d-flex.gap-4 {
  flex-direction: row;
}

/* List Icons */
body.rtl .fa-ul {
  padding-left: 0;
  padding-right: 2rem;
}

/* Input Fields */
body.rtl input,
body.rtl textarea {
  direction: rtl;
}

/* Petal Service Diagram - Adjustments for Arabic Text */
body.rtl .center-circle {
  line-height: 1.4;
}
body.rtl .petal-content p {
  font-size: 0.55rem;
}