/* ===================================
    Square Code - RTL (Right-to-Left) Styles
====================================== */

/*
 * This file contains RTL-specific styles for Arabic version
 * Load this file AFTER square-code-custom.css
 */

/* ===================================
   RTL Base Styles
====================================== */

body[dir="rtl"] {
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  text-align: right;
  direction: rtl;
}

/* RTL Text Alignment */
[dir="rtl"] .text-start {
  text-align: right !important;
}
[dir="rtl"] .text-end {
  text-align: left !important;
}
[dir="rtl"] .text-lg-start {
  text-align: right !important;
}
[dir="rtl"] .text-lg-end {
  text-align: left !important;
}
[dir="rtl"] .text-md-start {
  text-align: right !important;
}
[dir="rtl"] .text-sm-start {
  text-align: right !important;
}
[dir="rtl"] .text-xl-start {
  text-align: right !important;
}
[dir="rtl"] .text-xl-end {
  text-align: left !important;
}

@media (min-width: 1200px) {
  [dir="rtl"] .text-xl-start {
    text-align: right !important;
  }
  [dir="rtl"] .text-xl-end {
    text-align: left !important;
  }
}

@media (min-width: 992px) {
  [dir="rtl"] .text-lg-start {
    text-align: right !important;
  }
  [dir="rtl"] .text-lg-end {
    text-align: left !important;
  }
}

@media (min-width: 768px) {
  [dir="rtl"] .text-md-start {
    text-align: right !important;
  }
}

@media (min-width: 576px) {
  [dir="rtl"] .text-sm-start {
    text-align: right !important;
  }
}

/* ===================================
   Navigation & Header RTL
====================================== */

/* Main Navigation Menu - RTL fixes (prevent double-reversal) */
html[lang="ar"][dir="rtl"] .navbar-nav {
  flex-direction: row !important; /* Use 'row' not 'row-reverse' because direction:rtl already reverses */
  justify-content: center !important;
}

/* Center the navigation menu */
html[lang="ar"][dir="rtl"] .navbar-collapse {
  justify-content: center !important;
}

/* Make menu container take full width for centering */
html[lang="ar"][dir="rtl"] .menu-order {
  flex: 1 !important;
}

/* Ensure nav items display properly */
html[lang="ar"][dir="rtl"] .navbar-nav .nav-item {
  order: initial !important;
}

/* Logo positioning for RTL */
[dir="rtl"] .navbar-brand {
  margin-right: 0;
  margin-left: auto;
}

/* Dropdown menu positioning */
[dir="rtl"] .dropdown-menu {
  text-align: right;
  right: auto;
  left: 0;
}

/* Dropdown submenu with icons - RTL layout */
html[lang="ar"][dir="rtl"] .dropdown-with-icon .dropdown-menu li a {
  display: flex !important;
  flex-direction: row !important; /* Use 'row' not 'row-reverse' because dir="rtl" already reverses */
  text-align: right !important;
}

html[lang="ar"][dir="rtl"]
  .navbar
  .navbar-nav
  .dropdown.dropdown-with-icon
  .dropdown-menu
  li
  a {
  padding: 15px 0 15px 30px !important; /* Flip padding: left gets 30px, right gets 0 */
}

html[lang="ar"][dir="rtl"]
  .navbar
  .navbar-nav
  .dropdown.dropdown-with-icon
  .dropdown-menu
  li
  a
  i {
  margin-left: 15px !important;
  margin-right: 0 !important;
}

html[lang="ar"][dir="rtl"]
  .dropdown-with-icon
  .dropdown-menu
  .submenu-icon-content {
  text-align: right !important;
}

/* Dropdown hover effect - flip the :before arrow for RTL */
html[lang="ar"][dir="rtl"]
  .navbar
  .navbar-nav
  .dropdown.dropdown-with-icon
  .dropdown-menu
  li
  a:before {
  content: "\f12c" !important; /* Change to left arrow (arrow-left-short) */
  right: auto !important;
  left: 6px !important;
}

html[lang="ar"][dir="rtl"]
  .navbar
  .navbar-nav
  .dropdown.dropdown-with-icon
  .dropdown-menu
  li
  a:hover:before {
  left: 0px !important;
  right: auto !important;
}

/* Mobile menu */
[dir="rtl"] .navbar-toggler {
  float: right;
}

/* ===================================
   Margin & Padding Utilities RTL
====================================== */

/* Flip margin utilities */
[dir="rtl"] .me-10px,
[dir="rtl"] .me-5px {
  margin-right: 0 !important;
  margin-left: 10px !important;
}
[dir="rtl"] .me-10px.lg-me-5px {
  margin-left: 5px !important;
}
[dir="rtl"] .ms-10px {
  margin-left: 0 !important;
  margin-right: 10px !important;
}
[dir="rtl"] .me-15px {
  margin-right: 0 !important;
  margin-left: 15px !important;
}
[dir="rtl"] .ms-15px {
  margin-left: 0 !important;
  margin-right: 15px !important;
}
[dir="rtl"] .me-20px {
  margin-right: 0 !important;
  margin-left: 20px !important;
}
[dir="rtl"] .ms-20px {
  margin-left: 0 !important;
  margin-right: 20px !important;
}
[dir="rtl"] .me-25px {
  margin-right: 0 !important;
  margin-left: 25px !important;
}
[dir="rtl"] .ms-25px {
  margin-left: 0 !important;
  margin-right: 25px !important;
}
[dir="rtl"] .me-30px {
  margin-right: 0 !important;
  margin-left: 30px !important;
}
[dir="rtl"] .ms-30px {
  margin-left: 0 !important;
  margin-right: 30px !important;
}
[dir="rtl"] .me-lg-0 {
  margin-left: 0 !important;
}
[dir="rtl"] .ms-lg-0 {
  margin-right: 0 !important;
}

/* Auto margins for centering/alignment */
[dir="rtl"] .mx-lg-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
[dir="rtl"] .me-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}
[dir="rtl"] .ms-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Responsive margin utilities */
@media (max-width: 575px) {
  [dir="rtl"] .sm-me-10px {
    margin-right: 0 !important;
    margin-left: 10px !important;
  }
}

/* Flip padding utilities */
[dir="rtl"] .pe-5 {
  padding-right: 0 !important;
  padding-left: var(--bs-gutter-x) !important;
}
[dir="rtl"] .ps-5 {
  padding-left: 0 !important;
  padding-right: var(--bs-gutter-x) !important;
}
[dir="rtl"] .ps-30px {
  padding-left: 0 !important;
  padding-right: 30px !important;
}
[dir="rtl"] .pe-30px {
  padding-right: 0 !important;
  padding-left: 30px !important;
}

/* Image spacing fixes for RTL */
html[lang="ar"][dir="rtl"] .pe-50px {
  padding-right: 0 !important;
  padding-left: 50px !important;
}
html[lang="ar"][dir="rtl"] .ps-50px {
  padding-left: 0 !important;
  padding-right: 50px !important;
}

/* Responsive padding */
@media (max-width: 1199px) {
  [dir="rtl"] .lg-ps-0 {
    padding-right: 0 !important;
  }
}

@media (max-width: 1399px) {
  [dir="rtl"] .xl-pe-5px {
    padding-left: 5px !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 575px) {
  [dir="rtl"] .sm-pe-0 {
    padding-left: 0 !important;
  }
}

/* ===================================
   Border Utilities RTL
====================================== */

/* Flip border-start and border-end for RTL */
html[lang="ar"][dir="rtl"] .border-start {
  border-left: 0 !important;
  border-right-width: 1px !important;
  border-right-style: solid !important;
}

html[lang="ar"][dir="rtl"] .border-end {
  border-right: 0 !important;
  border-left-width: 1px !important;
  border-left-style: solid !important;
}

/* Responsive border utilities */
@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] .md-border-end-0 {
    border-left: 0 !important;
  }

  html[lang="ar"][dir="rtl"] .md-border-start-0 {
    border-right: 0 !important;
  }
}

@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] .sm-border-end-0 {
    border-left: 0 !important;
  }

  html[lang="ar"][dir="rtl"] .sm-border-start-0 {
    border-right: 0 !important;
  }
}

@media (max-width: 575px) {
  html[lang="ar"][dir="rtl"] .xs-border-end-0 {
    border-left: 0 !important;
  }

  html[lang="ar"][dir="rtl"] .xs-border-start-0 {
    border-right: 0 !important;
  }
}

/* ===================================
   Positioning & Layout RTL
====================================== */

/* Flip left/right positioning */
[dir="rtl"] .left-0px {
  left: auto !important;
  right: 0px !important;
}
[dir="rtl"] .right-0px {
  right: auto !important;
  left: 0px !important;
}
[dir="rtl"] .left-0 {
  left: auto !important;
  right: 0 !important;
}
[dir="rtl"] .right-0 {
  right: auto !important;
  left: 0 !important;
}

/* Outside box positioning */
[dir="rtl"] .outside-box-left-25 {
  left: auto !important;
  right: -25% !important;
}

[dir="rtl"] .outside-box-right-25 {
  right: auto !important;
  left: -25% !important;
}

/* Image spacing fixes for RTL - using viewport units */
html[lang="ar"][dir="rtl"] .outside-box-right-10 {
  right: auto !important;
  left: -10vw !important;
}

html[lang="ar"][dir="rtl"] .outside-box-left-10 {
  left: auto !important;
  right: -10vw !important;
}

/* Responsive outside box */
@media (max-width: 991px) {
  [dir="rtl"] .lg-outside-box-right-0 {
    left: 0 !important;
    right: auto !important;
  }

  [dir="rtl"] .lg-outside-box-left-0 {
    right: 0 !important;
    left: auto !important;
  }
}

@media (max-width: 767px) {
  [dir="rtl"] .md-outside-box-right-0 {
    left: 0 !important;
    right: auto !important;
  }

  [dir="rtl"] .md-outside-box-left-0 {
    right: 0 !important;
    left: auto !important;
  }
}

[dir="rtl"] .left-minus-80px {
  left: auto !important;
  right: -80px !important;
}

[dir="rtl"] .left-minus-100px {
  left: auto !important;
  right: -100px !important;
}

[dir="rtl"] .left-minus-200px {
  left: auto !important;
  right: -200px !important;
}

[dir="rtl"] .right-minus-80px {
  right: auto !important;
  left: -80px !important;
}

[dir="rtl"] .right-minus-100px {
  right: auto !important;
  left: -100px !important;
}

[dir="rtl"] .right-minus-200px {
  right: auto !important;
  left: -200px !important;
}

/* Justify content */
[dir="rtl"] .justify-content-start {
  justify-content: flex-end !important;
}
[dir="rtl"] .justify-content-end {
  justify-content: flex-start !important;
}

/* Column offsets - flip them for RTL */
[dir="rtl"] .offset-xl-1 {
  margin-left: 0 !important;
  margin-right: 8.33333333% !important;
}

[dir="rtl"] .offset-lg-1 {
  margin-left: 0 !important;
  margin-right: 8.33333333% !important;
}

/* ===================================
   Column Order Reversal for RTL
====================================== */

/* Hero Section - Reverse text (col-xl-5) and image (col-xl-7) */
[dir="rtl"] .full-screen .container .row.align-items-center .col-xl-5.col-lg-6 {
  order: 2 !important;
}

[dir="rtl"] .full-screen .container .row.align-items-center .col-xl-7.col-lg-6 {
  order: 1 !important;
}

/* T-Square LMS Section and similar layouts - text left, image right becomes image left, text right */
/* DISABLED - Using more specific rules below for each section */
/* [dir="rtl"] .bg-dark-gray .container .row.align-items-center .col-xl-5.col-lg-6 {
  order: 2 !important;
}

[dir="rtl"] .bg-dark-gray .container .row.align-items-center .col-xl-7.col-lg-6 {
  order: 1 !important;
} */

/* Why Choose Section - Reverse heading/button column and features column */
/* DISABLED - Using more specific rules below for each section */
/* [dir="rtl"] .row.justify-content-center.align-items-center .col-xl-5.col-lg-5 {
  order: 2 !important;
}

[dir="rtl"] .row.justify-content-center.align-items-center .col-xl-6.offset-xl-1 {
  order: 1 !important;
} */

/* ===================================
   Icons RTL
====================================== */

/*
  NOTE: Feather arrows mirror automatically in RTL, so we compensate here
  to keep forward-facing arrows pointing toward the call-to-action (right).
*/

/* REMOVED: Content overrides that were breaking feather icons
[dir="rtl"] .icon-feather-arrow-right::before {
  content: "\e92d";
}
[dir="rtl"] .icon-feather-arrow-left::before {
  content: "\e92e";
}
[dir="rtl"] .bi-arrow-right::before {
  content: "\f12f";
}
*/

/* Ensure arrow icons still point toward the call-to-action direction in RTL */
[dir="rtl"] .icon-feather-arrow-right,
[dir="rtl"] .icon-feather-arrow-right-circle,
[dir="rtl"] .icon-feather-arrow-right-square {
  display: inline-block;
  transform: scaleX(-1);
}

[dir="rtl"] i[class*="fa-arrow-right"],
[dir="rtl"] i[class*="fa-angles-right"],
[dir="rtl"] i[class*="fa-circle-arrow-right"],
[dir="rtl"] i[class*="fa-chevron-right"],
[dir="rtl"] i[class*="fa-angle-right"],
[dir="rtl"] i[class*="fa-caret-right"],
[dir="rtl"] i[class*="fa-long-arrow-right"],
[dir="rtl"] i[class*="fa-arrow-right-long"],
[dir="rtl"] i[class*="fa-arrow-right-to"],
[dir="rtl"] i[class*="fa-arrow-right-from"],
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-arrow-right-circle,
[dir="rtl"] .bi-arrow-right-short,
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-caret-right {
  display: inline-block;
  transform: scaleX(-1);
}

/* ===================================
   Forms RTL
====================================== */

[dir="rtl"] .form-control {
  text-align: right;
}

[dir="rtl"] .form-label {
  text-align: right;
}

[dir="rtl"] input[type="checkbox"] {
  margin-right: 0;
  margin-left: 0.5em;
}

/* ===================================
   Buttons & CTAs RTL - Fixed for double-reversal issues
====================================== */

/* Button groups - fix double reversal */
html[lang="ar"][dir="rtl"] .btn-group {
  flex-direction: row !important; /* Use 'row' not 'row-reverse' */
}

/* Button switch text - inner span with icon and text */
/* HTML order is typically [icon, text], but we want visual RTL as [icon-left, text-right] */
/* With dir=rtl + row, it shows [text-left, icon-right] - wrong! */
/* So we need row-reverse to flip it to correct RTL order */
html[lang="ar"][dir="rtl"] .btn-switch-text > span {
  flex-direction: row-reverse !important;
}

/* Fix margins for icons in buttons - icons should have proper spacing */
html[lang="ar"][dir="rtl"] .btn i {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

/* When using row-reverse, margins need to be flipped */
html[lang="ar"][dir="rtl"] .btn-switch-text > span i {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

/* Left icon buttons - icon should be on right side in RTL */
html[lang="ar"][dir="rtl"] .left-icon i {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

/* Right icon buttons */
[dir="rtl"] .right-icon i {
  margin-left: 8px;
  margin-right: 0;
}

/* Button with icons */
[dir="rtl"] .btn .feather {
  margin-right: 8px !important;
  margin-left: 0 !important;
}

/* ===================================
   Arrow Icons RTL - Text RIGHT, Icon LEFT
====================================== */

/* Buttons with arrow icons at the end (ms-10px, ms-15px, etc.) */
/* In RTL, we want: [Icon LEFT] ← margin → [Text RIGHT] */
/* With dir=rtl, flex-direction: row makes first child appear RIGHT, last child LEFT */
/* HTML is: Text(first) Icon(last), so row gives us: Icon(LEFT) Text(RIGHT) ✓ */
html[lang="ar"][dir="rtl"] a.btn,
html[lang="ar"][dir="rtl"] button.btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Button inner wrapper - also needs flex-direction row */
html[lang="ar"][dir="rtl"] .btn > span {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Arrow icon wrapper (btn-icon) needs margin on the right to separate from text */
html[lang="ar"][dir="rtl"] .btn .btn-icon {
  margin-left: 0 !important;
  margin-right: 6px !important;
}

/* Button text wrapper - reset any negative margins from animations */
html[lang="ar"][dir="rtl"] .btn .btn-text {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===================================
   Button Hover Animation RTL Fixes
====================================== */

/* Fix hover animation for btn-hover-animation-switch in RTL */
/* In RTL: Icon is LEFT, Text is RIGHT */
/* On hover: Text should move LEFT (negative translateX) */

html[lang="ar"][dir="rtl"] .btn.btn-hover-animation-switch:hover .btn-text {
  transform: translateX(-23px) !important;
}

html[lang="ar"][dir="rtl"] .btn.btn-hover-animation-switch:hover .btn-icon {
  transform: translateX(-10px) !important;
}

html[lang="ar"][dir="rtl"]
  .btn.btn-hover-animation-switch
  .btn-icon
  + .btn-icon {
  transform: translateX(10px) !important;
}

/* Icon-left variation (hero CTA) - simplify spacing and hover animation */
html[lang="ar"][dir="rtl"]
  .btn.btn-hover-animation-switch.btn-icon-left
  > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html[lang="ar"][dir="rtl"]
  .btn.btn-hover-animation-switch.btn-icon-left
  .btn-text {
  margin: 0 !important;
  transition: transform 0.3s ease;
}

html[lang="ar"][dir="rtl"]
  .btn.btn-hover-animation-switch.btn-icon-left
  .btn-icon {
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform 0.3s ease;
}

html[lang="ar"][dir="rtl"]
  .btn.btn-hover-animation-switch.btn-icon-left
  .btn-icon
  + .btn-icon {
  display: none !important;
}

html[lang="ar"][dir="rtl"]
  .btn.btn-hover-animation-switch.btn-icon-left:hover
  .btn-text {
  transform: translateX(4px) !important;
}

html[lang="ar"][dir="rtl"]
  .btn.btn-hover-animation-switch.btn-icon-left:hover
  .btn-icon {
  transform: translateX(-4px) !important;
}

/* Arrow icons with margin-start (ms-*) - flip to margin-end in RTL */
html[lang="ar"][dir="rtl"] .btn .icon-feather-arrow-right.ms-10px,
html[lang="ar"][dir="rtl"] .btn .icon-feather-arrow-right.ms-15px {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

/* List items with arrow icons - already have icon first, just fix margins */
html[lang="ar"][dir="rtl"] li .icon-feather-arrow-right.me-10px,
html[lang="ar"][dir="rtl"] li .icon-feather-arrow-right.me-15px {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

/* Arrow-right-circle icons in lists */
html[lang="ar"][dir="rtl"] .icon-feather-arrow-right-circle.me-15px {
  margin-right: 0 !important;
  margin-left: 15px !important;
}

/* ===================================
   Cards & Feature Boxes RTL
====================================== */

[dir="rtl"] .icon-with-text-style-07 .feature-box {
  text-align: center;
}

[dir="rtl"] .hover-box {
  text-align: center;
}

/* About page feature boxes - center content and fix borders for RTL */
html[lang="ar"][dir="rtl"] .icon-with-text-style-07 .feature-box-icon,
html[lang="ar"][dir="rtl"] .icon-with-text-style-07 .feature-box-content {
  text-align: center !important;
}

/* Fix borders for RTL - flip left/right borders */
html[lang="ar"][dir="rtl"] .icon-with-text-style-07 .hover-box.border-start {
  border-left: 0 !important;
  border-right: 1px solid var(--extra-medium-gray, #e5e5e5) !important;
}

html[lang="ar"][dir="rtl"] .icon-with-text-style-07 .hover-box.border-end {
  border-right: 0 !important;
  border-left: 1px solid var(--extra-medium-gray, #e5e5e5) !important;
}

/* First item in RTL should have left border (appears on right visually) */
html[lang="ar"][dir="rtl"] .icon-with-text-style-07:first-child .hover-box {
  border-left: 1px solid var(--extra-medium-gray, #e5e5e5) !important;
}

/* Last item in RTL should have right border (appears on left visually) */
html[lang="ar"][dir="rtl"] .icon-with-text-style-07:last-child .hover-box {
  border-right: 1px solid var(--extra-medium-gray, #e5e5e5) !important;
}

/* Section titles with feature-box - align right */
html[lang="ar"][dir="rtl"] .feature-box-content.last-paragraph-no-margin {
  text-align: right !important;
}

/* Feature boxes with left-icon-middle style - prevent double reversal in RTL */
html[lang="ar"][dir="rtl"] .feature-box-left-icon-middle {
  flex-direction: row !important; /* Use 'row' not 'row-reverse' because dir="rtl" already reverses */
}

html[lang="ar"][dir="rtl"] .feature-box-left-icon-middle .feature-box-icon {
  margin-left: 15px !important;
  margin-right: 0 !important;
}

html[lang="ar"][dir="rtl"] .feature-box-left-icon-middle .feature-box-content {
  text-align: right !important;
}

/* ===================================
   Footer RTL - Fixed for double-reversal
====================================== */

/* Footer main row - prevent double reversal */
html[lang="ar"][dir="rtl"] footer .footer-dark .row {
  flex-direction: row !important;
}

/* Footer bottom navigation - prevent double reversal */
html[lang="ar"][dir="rtl"] footer .footer-bottom .row {
  flex-direction: row !important;
}

/* Footer navbar list - prevent double reversal */
html[lang="ar"][dir="rtl"] .footer-navbar {
  flex-direction: row !important;
}

[dir="rtl"] footer .text-center.text-sm-start {
  text-align: right !important;
}

/* Social icons */
[dir="rtl"] .elements-social ul {
  justify-content: flex-start;
}

/* ===================================
   Sliders & Carousels RTL
====================================== */

[dir="rtl"] .swiper-container {
  direction: rtl;
}

[dir="rtl"] .swiper-button-next {
  left: 10px;
  right: auto;
}

[dir="rtl"] .swiper-button-prev {
  right: 10px;
  left: auto;
}

/* ===================================
   Grid & Columns RTL
====================================== */

[dir="rtl"] .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

/* ===================================
   Float Utilities RTL
====================================== */

[dir="rtl"] .float-start {
  float: right !important;
}
[dir="rtl"] .float-end {
  float: left !important;
}
[dir="rtl"] .float-left {
  float: right !important;
}
[dir="rtl"] .float-right {
  float: left !important;
}

/* ===================================
   Language Switcher RTL
====================================== */

[dir="rtl"] .language-switcher {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-navbar li:first-child a {
  padding-right: 0;
  padding-left: 1rem;
}

[dir="rtl"] .footer-navbar li:last-child a {
  padding-left: 0;
  padding-right: 1rem;
}

[dir="rtl"] footer .elements-social {
  display: flex;
  justify-content: flex-start;
}

[dir="rtl"] footer .elements-social ul {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
}

[dir="rtl"] footer .elements-social ul li {
  margin: 0;
}

/* ===================================
   Responsive RTL Adjustments
====================================== */

@media (max-width: 991px) {
  /* Tablet RTL adjustments */
  [dir="rtl"] .navbar-collapse {
    text-align: right;
  }
}

@media (max-width: 767px) {
  /* Mobile RTL adjustments */
  [dir="rtl"] .text-center {
    text-align: center !important;
  }

  [dir="rtl"] .left-minus-100px,
  [dir="rtl"] .left-minus-80px {
    right: -50px;
  }
}

/* ===================================
   Animation Direction RTL
====================================== */

/* Particles and animations that move right should move left in RTL */
[dir="rtl"] [data-particle] {
  direction: ltr; /* Keep particles moving naturally */
}

/* ===================================
   Background Position RTL
====================================== */

[dir="rtl"] .background-position-left {
  background-position: right !important;
}
[dir="rtl"] .background-position-right {
  background-position: left !important;
}
[dir="rtl"] .background-position-left-top {
  background-position: right top !important;
}
[dir="rtl"] .background-position-left-bottom {
  background-position: right bottom !important;
}
[dir="rtl"] .background-position-right-top {
  background-position: left top !important;
}
[dir="rtl"] .background-position-right-bottom {
  background-position: left bottom !important;
}
[dir="rtl"] .background-position-center-top {
  background-position: center top !important;
}

/* ===================================
   Decorative Images & Elements RTL
====================================== */

/* Top decorative images */
[dir="rtl"] .position-absolute.right-0px.top-30px {
  right: auto !important;
  left: 0px !important;
}

[dir="rtl"] .position-absolute.right-0px.top-25 {
  right: auto !important;
  left: 0px !important;
}

/* Scroll down circle - keep centered */
[dir="rtl"] .text-center.position-absolute.left-0px.right-0px {
  left: 0px !important;
  right: 0px !important;
}

/* Hero section side decorative image */
[dir="rtl"] .position-absolute.left-minus-80px.top-25 {
  left: auto !important;
  right: -80px !important;
}

/* Feature box icons */
[dir="rtl"] .feature-box-icon.position-absolute.left-0px {
  left: auto !important;
  right: 0px !important;
}

/* Align self utilities */
[dir="rtl"] .align-self-start {
  align-self: flex-start !important;
}

[dir="rtl"] .align-self-end {
  align-self: flex-end !important;
}

/* ===================================
   List & Navigation Items RTL
====================================== */

[dir="rtl"] ul {
  padding-right: 0;
  padding-left: 0;
}

[dir="rtl"] ol {
  padding-right: 0;
  padding-left: 1.5rem;
}

[dir="rtl"] .list-style-01 li {
  padding-right: 0;
  padding-left: 30px;
}

[dir="rtl"] .list-style-01 li:before {
  right: auto;
  left: 0;
}

/* ===================================
   Typography RTL
====================================== */

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

[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] li {
  font-family: "Tajawal", sans-serif;
}

/* Better line height for Arabic */
[dir="rtl"] body {
  line-height: 1.8;
}

[dir="rtl"] p {
  line-height: 1.8;
}

/* ===================================
   RTL Debug & Verification
====================================== */

/* Test rule to verify RTL CSS is loaded */
/* ===================================
   SIMPLE APPROACH: Use flex-direction: row-reverse
====================================== */

/* Hero Section - Reverse columns (text col-xl-5, image col-xl-7) */
html[dir="rtl"] section.full-screen .container > .row.align-items-center {
  flex-direction: row-reverse !important;
}

/* Why Leading Organizations Section - Reverse heading and feature boxes */
/* Title should be on RIGHT, numbered content on LEFT */
html[dir="rtl"]
  body
  section#down-section
  .container
  .row.justify-content-center {
  display: flex !important;
}

/* Explicitly set order to swap columns */
/* In RTL: order 1 = RIGHT (logical start), order 2 = LEFT (logical end) */
/* Title should be on RIGHT, so order: 1 */
html[dir="rtl"] #down-section .row.justify-content-center > .col-lg-5 {
  order: 1 !important;
}

/* Content should be on LEFT, so order: 2 */
html[dir="rtl"] #down-section .row.justify-content-center > .col-xl-6 {
  order: 2 !important;
}

/* For RTL, keep the offset on the right side of the content column */
html[dir="rtl"]
  #down-section
  .row.justify-content-center
  > .col-xl-6.offset-xl-1 {
  margin-left: 0 !important;
  margin-right: 8.333333% !important;
}

/* T-Square LMS Section - Reverse text and image */
/* In RTL: order: 1 = RIGHT (flex-start), order: 2 = LEFT (flex-end) */
/* TEXT (col-xl-5) should be on RIGHT = order: 1 */
/* IMAGE (col-xl-7) should be on LEFT = order: 2 */
html[dir="rtl"]
  body
  section.bg-gradient-aztec-green
  .container
  .row.justify-content-center.align-items-center {
  display: flex !important;
}

/* More specific selectors to override generic rules */
html[dir="rtl"]
  body
  section.bg-gradient-aztec-green
  .row.justify-content-center.align-items-center
  > .col-xl-5.col-lg-6 {
  order: 1 !important;
}

html[dir="rtl"]
  body
  section.bg-gradient-aztec-green
  .row.justify-content-center.align-items-center
  > .col-xl-7.col-lg-6 {
  order: 2 !important;
}

/* Why Choose Us Section (with accordion) - Reverse image and text */
/* Image should be on RIGHT (order: 1), text on LEFT (order: 2) */
html[dir="rtl"]
  body
  section.overflow-hidden
  .container
  .row.justify-content-center.align-items-center {
  display: flex !important;
}

/* More specific selectors to override generic rules */
html[dir="rtl"]
  body
  section.overflow-hidden
  .row.justify-content-center.align-items-center
  > .col-xl-7.col-lg-6 {
  order: 1 !important;
}

html[dir="rtl"]
  body
  section.overflow-hidden
  .row.justify-content-center.align-items-center
  > .col-xl-5.col-lg-6 {
  order: 2 !important;
}

/* ===================================
   RTL Layout Fixes - More specific rules with unique class names
====================================== */

/* T-Square LMS Section - Text on RIGHT, Image on LEFT (using .rtl-fixed-row class) */
html[lang="ar"][dir="rtl"]
  section.bg-gradient-aztec-green
  .row.rtl-fixed-row.justify-content-center.align-items-center
  > .col-xl-5.col-lg-6 {
  order: 1 !important;
}
html[lang="ar"][dir="rtl"]
  section.bg-gradient-aztec-green
  .row.rtl-fixed-row.justify-content-center.align-items-center
  > .col-xl-7.col-lg-6 {
  order: 2 !important;
}

/* Why Choose Us Section - Image on RIGHT, Text on LEFT (using .rtl-fixed-row-why class) */
html[lang="ar"][dir="rtl"]
  section.overflow-hidden
  .row.rtl-fixed-row-why.justify-content-center.align-items-center
  > .col-xl-7.col-lg-6 {
  order: 1 !important;
}
html[lang="ar"][dir="rtl"]
  section.overflow-hidden
  .row.rtl-fixed-row-why.justify-content-center.align-items-center
  > .col-xl-5.col-lg-6 {
  order: 2 !important;
}