/* RTL Specific Styles */

/* General Direction and Alignment */
body {
  direction: rtl;
  /* Sets the text direction to right-to-left */
  text-align: right;
  /* Aligns text to the right */
}

/*  Consider adding this to the html tag as well for better browser support */
html[lang="ar"] body {
  direction: rtl;
  text-align: right;
}

/*  If you're using a specific class to indicate Arabic language */
.arabic-language body {
  direction: rtl;
  text-align: right;
}

/* Breadcrumb RTL adjustments */
[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before,
html[lang="ar"] .breadcrumb-item+.breadcrumb-item::before {
  float: right;
  padding-right: .5rem;
  /* padding-left: var(--bs-breadcrumb-item-padding-x); */
  /* Change the separator direction for RTL */
  transform: scaleX(-1);
  /* Mirror the separator horizontally */
}


/*  Common Element Adjustments */

/*  Navigation Menus (Horizontal) */
nav ul {
  text-align: right;
  /* Align menu items to the right */
}

nav ul li {
  float: right;
  /* Float menu items to the right */
}

/*  Forms */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  direction: rtl;
  /* Ensure text input is RTL */
  text-align: right;
  /* Align placeholder text correctly */
}


/*  Lists */
ul,
ol {
  padding-right: 20px;
  /* Adjust padding for bullet points/numbers */
  padding-left: 0;
  /* Remove default left padding */
}

/*  Specific Layout Adjustments (Examples - Adapt to your specific layout) */

/*  Example:  Reversing the order of elements in a flexbox container */
.flex-container {
  flex-direction: row-reverse;
}

/*  Example:  Reversing the order of elements in a grid container */
.grid-container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* Adjust as needed */
  direction: ltr;
  /* Override body's RTL direction for grid layout */
}

.grid-container>* {
  direction: rtl;
  /* Restore RTL direction for grid items */
}

/*  Example:  Mirroring icons (using CSS transforms) */
.icon-left {
  transform: scaleX(-1);
  /* Mirror the icon horizontally */
}

/*  Example:  Adjusting margins and padding */
.element {
  margin-left: 0;
  margin-right: 10px;
  /* Swap left and right margins */
  padding-left: 0;
  padding-right: 10px;
  /* Swap left and right padding */
}

.newsletter .pr-12 {
  padding-right: 5rem !important;
}

/*  Example:  Adjusting float properties */
.float-left {
  float: right;
}

.float-right {
  float: left;
}

.breadcrumb-item+.breadcrumb-item::before {
  float: left;
  padding-left: .5rem;
  content: var(--bs-breadcrumb-divider, "\\") !important;
}

.fa-chevron-right:before {
  content: "\f104" !important;
  padding-left: .5rem;
  padding-right: 0 !important;
}

.header .header-navbar-rht .has-arrow .dropdown-toggle:after {
  margin-left: 0 !important;
  margin-right: 10px !important;
}


.header .header-navbar-rht .has-arrow .dropdown-toggle .user-img {
  margin-right: 0 !important;
  margin-left: 5px !important;
}

.fa-hand-point-right:before {
  content: "\f0a5" !important;
  margin-right: .5rem !important;
}

.form-control-responsive, .form-select-responsive {
  padding-left: 0 !important;
  padding-right: 1.7rem !important;
}

.banner-sec-two .home-banner .banner-title h1 span {
  font-size: .9em;
}

/*  Important Considerations: */

/*  1.  Specificity:  Use specific selectors to target elements that need RTL adjustments.  Avoid overly broad rules that might affect unintended elements. */

/*  2.  Logical Properties:  Consider using logical properties (e.g., `margin-inline-start`, `padding-inline-end`, `border-inline-start`) instead of physical properties (e.g., `margin-left`, `padding-right`, `border-left`) for better cross-browser compatibility and future-proofing.  However, browser support for logical properties may vary, so test thoroughly. */

/*  3.  Icon Mirroring:  Carefully consider whether to mirror icons.  Some icons (e.g., arrows, play buttons) should be mirrored, while others (e.g., logos, brand icons) should not. */

/*  4.  Testing:  Thoroughly test your RTL styles in different browsers and devices to ensure that everything looks and functions correctly. */

/*  5.  Frameworks/Libraries:  If you're using a CSS framework or library (e.g., Bootstrap, Materialize), check its documentation for RTL support.  Many frameworks provide built-in RTL features or extensions. */

/*  6.  Font Support:  Ensure that the fonts you're using support Arabic characters. */

/*  7.  JavaScript:  If your website uses JavaScript to manipulate the DOM, you may need to update your JavaScript code to handle RTL layouts correctly. */

/*  8.  Conditional Loading (Optional):  You can use media queries or JavaScript to load the RTL stylesheet only when the language is set to Arabic.  This can improve performance by preventing the browser from parsing unnecessary CSS.  Example (using a media query): */

/*  @media (direction: rtl) {
    /*  Your RTL styles here
  } */

/*  Example using Javascript: */
/*
  if (document.documentElement.lang === 'ar') {
    // Load the RTL stylesheet dynamically
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'rtl.css'; // Replace with your RTL stylesheet file
    document.head.appendChild(link);
  }
*/

/*  9.  Resetting LTR elements inside RTL: If you have elements that should remain LTR inside an RTL context (e.g., code snippets, English text), you can explicitly set their `direction` to `ltr`. */
.ltr-content {
  direction: ltr;
  text-align: left;
}

/*  10.  Consider using a CSS preprocessor (like Sass or Less) to make your RTL styles more maintainable.  You can use variables and mixins to easily swap left and right values. */

/*  Example using Sass: */
/*
$left: left;
$right: right;

.element {
  margin-#{$left}: 10px;
  margin-#{$right}: 0;

  &.rtl {
    margin-#{$left}: 0;
    margin-#{$right}: 10px;
  }
}
*/

/*  Remember to adapt these styles to your specific website's design and layout.  This is a starting point, and you'll likely need to make adjustments based on your needs. */