/* =========================================================
   Arabic RTL Stylesheet
   File: ar.css
   Load ONLY on /ar/ pages
   ========================================================= */

/* 1. RTL direction & base text alignment */
html[dir="rtl"],
body {
  direction: rtl;
  text-align: right;
}

/* 2. Arabic-friendly font */
body {
  font-family: "Cairo", "Tajawal", "Noto Kufi Arabic",
               "Noto Sans Arabic", Arial, sans-serif;
  letter-spacing: normal;
}

/* 3. Text alignment for common elements */
h1, h2, h3, h4, h5, h6,
p, span, a, li, label, small, strong {
  text-align: right;
}

/* 4. Navigation & layout containers */
header,
nav,
.navbar,
.menu,
.footer,
section,
article {
  direction: rtl;
}

/* 5. Forms & inputs */
input,
textarea,
select {
  direction: rtl;
  text-align: right;
}

/* Placeholder alignment */
input::placeholder,
textarea::placeholder {
  text-align: right;
}

/* 6. Lists padding fix */
ul,
ol {
  padding-right: 1.5rem;
  padding-left: 0;
}

/* 7. Tables */
table {
  direction: rtl;
}

th,
td {
  text-align: right;
}

/* 8. Buttons */
button,
.btn {
  direction: rtl;
}

/* 9. Images (prevent unwanted flipping) */
img {
  direction: ltr;
}

/* 10. Utility class for flipping icons if needed */
.rtl-flip {
  transform: scaleX(-1);
}

/* 11. Margin & padding logical overrides (safe defaults) */
[class*="text-left"] {
  text-align: right !important;
}

[class*="float-left"] {
  float: right !important;
}

[class*="float-right"] {
  float: left !important;
}

/* Prevent horizontal overflow WITHOUT breaking sticky */
html[dir="rtl"] body {
  overflow-x: clip;   /* modern, sticky-safe */
}

/* Force show images that were hidden for animation */
.image-anime,
.image-anime img,
.reveal,
.reveal img,
figure.image-anime,
figure.image-anime img {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}


/* Some templates also hide with scale/translate on wrapper */
.why-choose-image-box *,
.why-choose-body-image * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* ================================
   RTL mirror of service list cards
   ================================ */

html[dir="rtl"] .service-discover-list ul li {
    position: relative;
    padding-right: 56px;   /* space for icon */
    padding-left: 20px;    /* inner card padding */
    text-align: right;
}

/* Icon positioning (same visual offset as LTR) */
html[dir="rtl"] .service-discover-list ul li::before {
    right: 24px;           /* SAME distance from edge as LTR left */
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
	padding-right: 15px;
	
}
/* =========================
   Global RTL (Arabic pages)
   ========================= */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* =========================================
   RTL: mirror why-choose-service separator
   ========================================= */

html[dir="rtl"] .why-choose-service-content {
    border-left: none;
    border-right: 2px solid var(--divider-color);

    margin-left: 0;
    margin-right: 25px;

    padding-left: 0;
    padding-right: 18px;
}
/* =========================================
   RTL: service-entry list (Font Awesome check)
   ========================================= */

html[dir="rtl"] .service-entry ul {
    padding-right: 0;   /* prevent double indent */
}

html[dir="rtl"] .service-entry ul li {
    position: relative;
    text-align: right;

    /* mirror spacing */
    padding-right: 40px;
    padding-left: 0;
}

html[dir="rtl"] .service-entry ul li::before {
    left: auto;         /* remove LTR positioning */
    right: 0;           /* mirror icon to right */
    
    /* DO NOT touch top / transform / font-size */
}
/* RTL: move our-experiment-item bullet to the right */
html[dir="rtl"] .our-experiment-item h3 {
    position: relative;
    padding-right: 40px;
    padding-left: 0;
    text-align: right;
}

html[dir="rtl"] .our-experiment-item h3::before {
    left: auto;
    right: 0;
}
html[dir="rtl"] .page-single-sidebar{
  position: sticky;
  top: 30px;
}
html[dir="rtl"] .page-service-single,
html[dir="rtl"] .page-service-single .container,
html[dir="rtl"] .page-service-single .row,
html[dir="rtl"] .page-service-single .col-lg-4{
  overflow: visible !important;
  transform: none !important;
}
/* ar.css (RTL fix for job highlights bullets) */
html[lang="ar"] #jobCards .job-card-highlights li{
  padding-right: 18px;   /* space for bullet */
  padding-left: 0;
}

html[lang="ar"] #jobCards .job-card-highlights li::before{
  right: 0;              /* anchor bullet on the right */
  left: auto;
}

/************************************************************
 ARABIC (RTL) FIX — Training boxes + tracks layout
 Paste this at the VERY END of ar.css
************************************************************/

/* 1) Ensure the training page styles actually apply in Arabic */
html[lang="ar"][dir="rtl"] .training-page .info-card,
html[lang="ar"][dir="rtl"] .training-page .contact-info-item,
html[lang="ar"][dir="rtl"] .training-page .considerations .card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: center !important;

  height: 100% !important;

  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;

  transition: box-shadow .3s ease, transform .3s ease !important;
  overflow: hidden !important;
}

html[lang="ar"][dir="rtl"] .training-page .info-card:hover,
html[lang="ar"][dir="rtl"] .training-page .contact-info-item:hover,
html[lang="ar"][dir="rtl"] .training-page .considerations .card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,.08) !important;
  transform: translateY(-3px) !important;
}

/* 2) Make Bootstrap column cards stretch equally */
html[lang="ar"][dir="rtl"] .training-page .row.g-4 > [class*="col-"] {
  display: flex !important;
}
html[lang="ar"][dir="rtl"] .training-page .row.g-4 > [class*="col-"] > * {
  width: 100% !important;
}

/* 3) Keep icon circles centered */
html[lang="ar"][dir="rtl"] .training-page .info-card .icon-box,
html[lang="ar"][dir="rtl"] .training-page .contact-info-item .icon-box,
html[lang="ar"][dir="rtl"] .training-page .considerations .icon-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-inline: auto !important;
}

/* 4) FIX: Tracks list grid in RTL (icon on the RIGHT, text on the LEFT) */
html[lang="ar"][dir="rtl"] .training-page .tracks-list .track-item {
  grid-template-columns: 1fr 56px !important; /* flip columns */
}
html[lang="ar"][dir="rtl"] .training-page .tracks-list .track-item .icon {
  order: 2 !important; /* ensure icon block is at the right */
}
html[lang="ar"][dir="rtl"] .training-page .tracks-list .track-item > div:last-child {
  order: 1 !important;
  text-align: right !important;
}

/* 5) Tabs list items: keep icon + text aligned nicely in RTL */
html[lang="ar"][dir="rtl"] .training-page .offerings-tabs .tab-pane li {
  justify-content: flex-start !important;
  text-align: right !important;
}
/* ================================
   Locations cards – Arabic fix
   ================================ */
html[dir="rtl"] .section-locations .contact-card h4 {
  text-align: center;        /* center the text */
  font-size: 1.5rem;        /* slightly smaller than default */
  line-height: 1.4;          /* better Arabic readability */
  margin-bottom: 0.5rem;     /* tighter spacing */
  letter-spacing: normal;    /* remove wide spacing for Arabic */
  text-transform: none;      /* prevent forced uppercase */
}
.rotating-text {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

.rotating-badge svg {
  overflow: visible;
}
/* ================================
   Language Switcher (Header)
   EN | العربية Toggle Styling
   ================================ */

/* Container (pill background) */
.header-lang {
  background: rgba(26, 56, 84, 0.5) !important; /* #1a3854 @ 50% */
  border-radius: 30px !important;
  padding: 10px 16px !important; /* bigger top/bottom */
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Links */
.lang-pill {
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 8px 12px !important; /* bigger top/bottom */
  border-radius: 20px !important;
  display: inline-block !important;
  transition: all 0.25s ease !important;
}

/* Hover */
.lang-pill:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* Active language */
.lang-pill.active {
  color: #35a9de !important;
  font-weight: 700 !important;
}

/* Divider */
.lang-divider {
  color: #ffffff !important;
  opacity: 0.55 !important;
  margin: 0 8px !important;
}

/* -------------------------------
   Mobile menu tweaks (optional)
   ------------------------------- */
@media (max-width: 991px) {
  /* Make it fit nicely in mobile nav */
  .header-lang {
    padding: 10px 14px !important;
  }

  .lang-pill {
    padding: 8px 14px !important;
  }
}
/* =========================================
   Arabic Header Actions – Match English UI
   (Language switcher + Locations button)
   ========================================= */

/* 1) Fix RTL spacing difference caused by ms-3 */
html[dir="rtl"] .header-actions .header-btn {
  margin-left: 0 !important;
  margin-right: 1rem !important; /* same gap as ms-3 on English */
}

/* 2) Make BOTH controls identical height + typography inside header */
html[dir="rtl"] .header-actions .header-lang,
html[dir="rtl"] .header-actions .header-btn a.btn-default.btn-highlighted {
  font-size: 14px !important;     /* same font size */
  line-height: 1 !important;      /* same baseline */
  white-space: nowrap !important; /* prevent wrap */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 3) Force the language pill container to match the button height */
html[dir="rtl"] .header-actions .header-lang {
  padding: 10px 16px !important;   /* match your chosen button feel */
  border-radius: 30px !important;
  background: rgba(26, 56, 84, 0.5) !important; /* #1a3854 @ 50% */
}

/* 4) Language links: keep consistent padding + style */
html[dir="rtl"] .header-actions .lang-pill {
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 8px 12px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.25s ease !important;
}

html[dir="rtl"] .header-actions .lang-pill:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

html[dir="rtl"] .header-actions .lang-pill.active {
  color: #35a9de !important;
  font-weight: 700 !important;
}

html[dir="rtl"] .header-actions .lang-divider {
  color: #ffffff !important;
  opacity: 0.55 !important;
  margin: 0 8px !important;
}
/* =========================================
   Arabic – Team Page Intro Center Alignment
   ========================================= */

html[dir="rtl"] .section-title p {
  text-align: center !important;
  direction: rtl !important;
}
/* =========================
   Services cards - RTL fixes
   ========================= */

/* Ensure header row stays stable in RTL */
html[lang="ar"] .service-body-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;           /* RTL layout */
}

/* Put the blue icon on the LEFT side (like EN), arrow on the RIGHT */
html[lang="ar"] .service-body-header .icon-box{
  order: 2;                 /* move to left side in rtl flow */
}

html[lang="ar"] .service-body-header .service-readmore-btn{
  order: 1;                 /* keep arrow on right side */
}

/* Force perfect circles for both buttons */
html[lang="ar"] .service-body-header .icon-box,
html[lang="ar"] .service-body-header .service-readmore-btn a{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* If your theme uses absolute positioning, this will correct it in RTL */
html[lang="ar"] .service-body-header .icon-box{
  position: absolute;
  top: 22px;         /* tweak if needed */
  left: 5px;        /* blue icon left */
  right: auto;
}

html[lang="ar"] .service-body-header .service-readmore-btn{
  position: absolute;
  top: 22px;         /* tweak if needed */
  right: 22px;       /* arrow right */
  left: auto;
}

/* Make sure icon images fit inside the circles */
html[lang="ar"] .service-body-header .icon-box img,
html[lang="ar"] .service-body-header .service-readmore-btn img{
  max-width: 22px;
  max-height: 22px;
  display: block;
}

/* =====================================
   FORCE ICON + TEXT INLINE (RTL)
   ===================================== */

/* Ensure horizontal layout, not vertical */
html[lang="ar"] .what-we-item,
html[lang="ar"] .why-choose-item-header{
  display: flex;
 
  align-items: flex-start;       /* align top edges */
  gap: 16px;                     /* space between icon & text */
}

/* Remove any block/center styles forcing icon on top */
html[lang="ar"] .what-we-item .icon-box,
html[lang="ar"] .why-choose-item-header .icon-box{
  display: flex;
  flex-shrink: 0;                /* prevent shrinking */
  margin: 0;
}

/* Ensure text block behaves correctly */
html[lang="ar"] .what-we-content,
html[lang="ar"] .why-choose-item-title,
html[lang="ar"] .why-choose-item-content{
  text-align: right;
  display: block;
}
/* =====================================
   RTL FIX – Separator line position
   ===================================== */

/* Target the info boxes with separator */
html[lang="ar"] .why-choose-item,
html[lang="ar"] .feature-box,
html[lang="ar"] .info-box{
  direction: rtl;
}

/* If separator is a LEFT border (most common case) */
html[lang="ar"] .why-choose-item-content,
html[lang="ar"] .feature-box-content,
html[lang="ar"] .info-box-content{
  border-left: none !important;
  border-right: 2px solid rgba(0,0,0,0.08); /* separator color */
  padding-right: 16px;
  padding-left: 0;
}

/* If separator is created using ::before */
html[lang="ar"] .why-choose-item-content::before,
html[lang="ar"] .feature-box-content::before,
html[lang="ar"] .info-box-content::before{
  left: auto;
  right: 0;
}

/* Ensure heading + separator alignment */
html[lang="ar"] .why-choose-item-title,
html[lang="ar"] .feature-box-title,
html[lang="ar"] .info-box-title{
  text-align: right;
}
/* =========================================
   HOW IT WORKS – Arabic match English layout
   ========================================= */

html[lang="ar"] .how-it-work{
  direction: ltr;              /* keep same visual layout as English */
}

html[lang="ar"] .how-it-work .how-work-content{
  direction: rtl;              /* but keep Arabic text RTL */
  text-align: right;
}

html[lang="ar"] .how-it-work .how-work-image-box{
  direction: ltr;              /* image behaves like EN */
}

/* Keep columns in same order as English: image LEFT, content RIGHT */
html[lang="ar"] .how-it-work .row.align-items-center{
  flex-direction: row;         /* important */
}

/* Steps: keep badge on LEFT, text on RIGHT (like EN) */
html[lang="ar"] .how-it-work .work-steps-item{
  display: flex;
  flex-direction: row;         /* badge left */
  align-items: flex-start;
  gap: 18px;
}

/* Badge sizing/spacing */
html[lang="ar"] .how-it-work .work-step-no{
  min-width: 110px;            /* similar to EN */
  flex: 0 0 110px;
  text-align: center;
}

/* Step text block */
html[lang="ar"] .how-it-work .work-step-content{
  direction: rtl;
  text-align: right;
}

/* Divider line spacing stays consistent */
html[lang="ar"] .how-it-work .work-steps-item + .work-steps-item{
  margin-top: 28px;
}
/* ===============================
   Arabic text alignment fix
   =============================== */

html[lang="ar"] .section-title p,
html[lang="ar"] .what-we-content p,
html[lang="ar"] .why-choose-item-content p,
html[lang="ar"] .work-step-content p,
html[lang="ar"] .work-step-content h3{
  text-align: right !important;
  direction: rtl;
}

/* Ensure containers don't force center/left */
html[lang="ar"] .section-title,
html[lang="ar"] .what-we-content,
html[lang="ar"] .why-choose-content,
html[lang="ar"] .how-work-content{
  text-align: right;
  direction: rtl;
}
/* =====================================
   Guidelines cards: fix acronym headings in RTL
   ===================================== */

html[dir="rtl"] .guidelines-section .guideline-card h3{
  direction: ltr !important;       /* render acronym correctly */
  unicode-bidi: isolate !important;/* prevent RTL mixing */
  text-align: center !important;
  display: inline-block;           /* keeps it nicely centered */
}
html[dir="rtl"] .guidelines-section .btn-guideline{
  direction: rtl;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

html[dir="rtl"] .guidelines-section .btn-guideline i{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Center page header title in Arabic */
html[lang="ar"] .page-header-box h1{
  text-align: center !important;
  direction: rtl;
}

/* =========================
   RTL (Arabic) overrides
   ========================= */
html[lang="ar"], body.rtl {
  direction: rtl;
  unicode-bidi: embed;
}

/* SlickNav: make menu RTL */
html[lang="ar"] .slicknav_menu,
body.rtl .slicknav_menu {
  direction: rtl;
}

/* Move the dropdown arrow to the LEFT side in RTL */
html[lang="ar"] .slicknav_nav .slicknav_arrow,
body.rtl .slicknav_nav .slicknav_arrow {
  position: absolute;
  left: 15px;      /* <-- arrow goes to left */
  right: auto;     /* <-- cancel right */
  margin-left: 0;
  margin-right: 0;
}

/* If your arrow is created via :after (like in your screenshot) */
html[lang="ar"] .slicknav_nav .slicknav_arrow:after,
body.rtl .slicknav_nav .slicknav_arrow:after {
  position: absolute;
  left: 15px;      /* <-- arrow goes to left */
  right: auto;     /* <-- cancel right */
}

/* Make sure list items have enough padding on LEFT so text doesn't overlap arrow */
html[lang="ar"] .slicknav_nav li > a,
body.rtl .slicknav_nav li > a {
  padding-left: 40px;   /* space for arrow on left */
  padding-right: 15px;
  text-align: right;
  position: relative;
}

/* If SlickNav adds .slicknav_row */
html[lang="ar"] .slicknav_nav .slicknav_row,
body.rtl .slicknav_nav .slicknav_row {
  padding-left: 40px;
  padding-right: 15px;
  text-align: right;
  position: relative;
}

/* Optional: if the icon is still not aligning, force the parent to be relative */
html[lang="ar"] .slicknav_nav li,
body.rtl .slicknav_nav li {
  position: relative;
}