/* ==========================================================================
   Arabic RTL — layout, typography, and directional fixes
   Loaded last. Does not change component structure or behavior.
   ========================================================================== */

html[dir="rtl"] {
  --bb-ar-font: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

html[dir="rtl"],
html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] body,
html[dir="rtl"] #home.home-hero,
html[dir="rtl"] #gridNav.home-nav,
html[dir="rtl"] .about-page,
html[dir="rtl"] .services-page,
html[dir="rtl"] .portfolio-page,
html[dir="rtl"] .clients-page,
html[dir="rtl"] .contact-page {
  --home-font: var(--bb-ar-font);
  --ab-font: var(--bb-ar-font);
  --sv-font: var(--bb-ar-font);
  --pf-font: var(--bb-ar-font);
  --cl-font: var(--bb-ar-font);
  --ct-font: var(--bb-ar-font);
  font-family: var(--bb-ar-font);
  text-align: right;
}

html[dir="rtl"] body,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] label,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] .page-title,
html[dir="rtl"] .bb-load__text,
html[dir="rtl"] .home-hero__title,
html[dir="rtl"] .home-hero__lead,
html[dir="rtl"] .home-nav__label {
  font-family: var(--bb-ar-font);
}

html[dir="rtl"] .page-title,
html[dir="rtl"] .home-hero__title,
html[dir="rtl"] .home-nav__label,
html[dir="rtl"] .cl-intro__eyebrow,
html[dir="rtl"] .ct-field label,
html[dir="rtl"] .page-footer .ls,
html[dir="rtl"] .bb-load__text {
  letter-spacing: 0 !important;
}

html[dir="rtl"] .bb-load__text,
html[dir="rtl"] .cl-intro__eyebrow,
html[dir="rtl"] .ct-field label,
html[dir="rtl"] .page-footer .text-uppercase,
html[dir="rtl"] .about-feature__label {
  text-transform: none;
}

html[dir="rtl"] .text-left,
html[dir="rtl"] .text-lg-left,
html[dir="rtl"] .text-right,
html[dir="rtl"] .text-lg-right {
  text-align: right !important;
}

/* Keep Latin identifiers readable inside Arabic copy */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .pf-card__url,
html[dir="rtl"] .cl-stat__value,
html[dir="rtl"] .cl-hex__num {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[name="phone"],
html[dir="rtl"] input[name="email"] {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}

/* -------- Home rail + hero -------- */
html[dir="rtl"] #gridNav.home-nav,
html[dir="rtl"] #gridNav.home-nav .home-nav__panel,
html[dir="rtl"] #gridNav.home-nav .home-nav__item,
html[dir="rtl"] #gridNav.home-nav .home-nav__label,
html[dir="rtl"] #gridNav.home-nav .home-nav__copy,
html[dir="rtl"] #gridNav.home-nav .home-nav__hint {
  text-align: right;
}

html[dir="rtl"] #gridNav.home-nav .home-nav__item {
  justify-content: flex-start;
}

html[dir="rtl"] #gridNav.home-nav .home-nav__copy {
  align-items: flex-start;
}

html[dir="rtl"] .home-hero__copy {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: min(40rem, 58%);
  margin: 0;
  align-items: stretch;
  text-align: right;
  background: linear-gradient(270deg, rgba(5, 7, 10, 0.82) 0%, rgba(5, 7, 10, 0.42) 68%, transparent 100%);
}

html[dir="rtl"] .home-hero__title {
  word-spacing: 0.22em;
  line-height: 1.42;
}

html[dir="rtl"] .home-hero__title,
html[dir="rtl"] .home-hero__lead {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: right !important;
}

html[dir="rtl"] .home-cta {
  width: 100%;
  justify-content: flex-start;
}

html[dir="rtl"] .home-cta__primary,
html[dir="rtl"] .home-cta__secondary {
  margin-left: 0;
  margin-right: 0;
}

html[dir="rtl"] .home-cta__primary {
  background: linear-gradient(270deg, #f5c518 0%, #f0b429 38%, #3b9bff 100%);
}

html[dir="rtl"] .home-cta__arrow svg,
html[dir="rtl"] .bb-arrow svg,
html[dir="rtl"] .pf-card__arrow svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .home-highlights {
  left: auto;
  right: 0;
  justify-content: flex-start;
  text-align: right;
}

html[dir="rtl"] .home-highlights__item {
  text-align: right;
  justify-content: flex-start;
}

html[dir="rtl"] .home-highlights__item:first-child {
  padding-left: 1.35rem;
  padding-right: 0;
}

html[dir="rtl"] .home-highlights__item + .home-highlights__item::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .home-hero__visual img {
  object-position: left center;
}

html[dir="rtl"] #home.is-page-open #baseContent.home-hero__content {
  left: auto;
  right: -100%;
}

html[dir="rtl"] #home #baseContent.home-hero__content {
  transition: right 0.6s ease-in-out, left 0.6s ease-in-out, opacity 0.45s ease !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  html[dir="rtl"] #gridNav.home-nav {
    left: auto;
    right: 0.85rem;
  }
}

@media (max-width: 767.98px) {
  html[dir="rtl"] #gridNav.home-nav {
    left: auto;
    right: auto;
  }

  html[dir="rtl"] #gridNav.home-nav .home-nav__go {
    margin-left: 0;
    margin-right: auto;
  }

  html[dir="rtl"] #gridNav.home-nav .home-nav__label,
  html[dir="rtl"] #gridNav.home-nav .home-nav__copy {
    text-align: right;
    align-items: flex-start;
  }

  html[dir="rtl"] .home-hero__copy {
    position: relative;
    width: 100%;
    right: auto;
    left: auto;
  }

  html[dir="rtl"] .home-highlights {
    left: auto;
    right: auto;
  }

  html[dir="rtl"] html.is-inner-page #gridNav.home-nav,
  html[dir="rtl"].is-inner-page #gridNav.home-nav {
    left: 0.55rem;
    right: 0.55rem;
  }
}

/* -------- Breadcrumbs -------- */
html[dir="rtl"] .about-crumb,
html[dir="rtl"] .sv-crumb,
html[dir="rtl"] .pf-crumb,
html[dir="rtl"] .cl-crumb,
html[dir="rtl"] .ct-crumb,
html[dir="rtl"] .about-crumb-bar,
html[dir="rtl"] .sv-crumb-bar,
html[dir="rtl"] .pf-crumb-bar,
html[dir="rtl"] .cl-crumb-bar,
html[dir="rtl"] .ct-crumb-bar,
html[dir="rtl"] .page-content,
html[dir="rtl"] .page-footer,
html[dir="rtl"] .page-footer p {
  text-align: right;
}

html[dir="rtl"] .about-crumb__item + .about-crumb__item::before,
html[dir="rtl"] .sv-crumb__item + .sv-crumb__item::before,
html[dir="rtl"] .pf-crumb__item + .pf-crumb__item::before,
html[dir="rtl"] .cl-crumb__item + .cl-crumb__item::before,
html[dir="rtl"] .ct-crumb__item + .ct-crumb__item::before {
  content: ">";
  margin-right: 0;
  margin-left: 0.4rem;
}

/* -------- Inner-page sidebars --------
   Shared vertical axis so Arabic title + gold-dot line lock together.
   ------------------------------------------------------------------------ */
html[dir="rtl"] #about .about-sidebar,
html[dir="rtl"] #service .sv-sidebar,
html[dir="rtl"] #portfolio .pf-sidebar,
html[dir="rtl"] #clients .cl-sidebar,
html[dir="rtl"] #contact .ct-sidebar {
  --bb-title-axis: 1.85rem;
  --ab-font: var(--bb-ar-font);
  --sv-font: var(--bb-ar-font);
  --pf-font: var(--bb-ar-font);
  --cl-font: var(--bb-ar-font);
  --ct-font: var(--bb-ar-font);
}

html[dir="rtl"] #about .about-sidebar .page-title,
html[dir="rtl"] #service .sv-sidebar .page-title,
html[dir="rtl"] #portfolio .pf-sidebar .page-title,
html[dir="rtl"] #clients .cl-sidebar .page-title,
html[dir="rtl"] #contact .ct-sidebar .page-title {
  font-family: var(--bb-ar-font) !important;
  font-weight: 800;
  letter-spacing: 0 !important;
  left: auto !important;
  right: var(--bb-title-axis) !important;
  bottom: 7.9rem !important;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
  transform: translateX(50%) !important;
}

/* Optical lock: "من نحن" glyphs sit left of the box center; nudge onto the gold line like خدماتنا */
html[dir="rtl"] #about .about-sidebar .page-title {
  transform: translateX(calc(50% + 0.85rem)) !important;
}

html[dir="rtl"] #about .about-sidebar__accent,
html[dir="rtl"] #service .sv-sidebar__accent,
html[dir="rtl"] #portfolio .pf-sidebar__accent,
html[dir="rtl"] #clients .cl-sidebar__accent,
html[dir="rtl"] #contact .ct-sidebar__accent {
  left: auto !important;
  right: var(--bb-title-axis) !important;
  bottom: 1.65rem !important;
  height: 4.7rem !important;
  transform: translateX(50%) !important;
}

html[dir="rtl"] #about .about-sidebar__accent::before,
html[dir="rtl"] #service .sv-sidebar__accent::before,
html[dir="rtl"] #portfolio .pf-sidebar__accent::before,
html[dir="rtl"] #clients .cl-sidebar__accent::before,
html[dir="rtl"] #contact .ct-sidebar__accent::before {
  top: -0.85rem !important;
}

html[dir="rtl"] #about .about-sidebar .btn-close,
html[dir="rtl"] #service .sv-sidebar .btn-close,
html[dir="rtl"] #portfolio .pf-sidebar .btn-close,
html[dir="rtl"] #clients .cl-sidebar .btn-close,
html[dir="rtl"] #contact .ct-sidebar .btn-close,
html[dir="rtl"] .page-rail .btn-close {
  right: auto;
  left: 1.1rem;
}

html[dir="rtl"] .page.is-intro .page-title {
  font-family: var(--bb-ar-font) !important;
  letter-spacing: 0 !important;
}

/* -------- About -------- */
html[dir="rtl"] .about-trust {
  border-left: 1px solid var(--ab-border, #dbe4f0);
  border-right: 3px solid var(--ab-yellow, #f5c518);
}

html[dir="rtl"] .about-intro,
html[dir="rtl"] .about-intro__title,
html[dir="rtl"] .about-showcase__content,
html[dir="rtl"] .about-showcase__content p,
html[dir="rtl"] .about-text-highlight,
html[dir="rtl"] .about-mission-title,
html[dir="rtl"] .about-feature,
html[dir="rtl"] .about-feature__label,
html[dir="rtl"] .about-trust,
html[dir="rtl"] .about-trust p,
html[dir="rtl"] .about-card,
html[dir="rtl"] .about-card__title,
html[dir="rtl"] .about-card__text,
html[dir="rtl"] .about-cta,
html[dir="rtl"] .about-cta__copy {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}

html[dir="rtl"] .about-intro__rule,
html[dir="rtl"] .about-card__rule,
html[dir="rtl"] .about-feature__rule {
  margin-left: auto;
  margin-right: 0;
  transform-origin: right center;
}

html[dir="rtl"] .about-feature,
html[dir="rtl"] .about-card {
  align-items: flex-start;
}

/* -------- Services -------- */
html[dir="rtl"] .sv-intro,
html[dir="rtl"] .sv-intro__title,
html[dir="rtl"] .sv-card,
html[dir="rtl"] .sv-card__title,
html[dir="rtl"] .sv-card__text,
html[dir="rtl"] .sv-cta-block,
html[dir="rtl"] .sv-cta-block__title,
html[dir="rtl"] .sv-cta-block__lead {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}

html[dir="rtl"] .sv-intro__rule,
html[dir="rtl"] .sv-card__rule {
  margin-left: auto;
  margin-right: 0;
  transform-origin: right center;
}

html[dir="rtl"] .sv-card {
  align-items: flex-start;
}

html[dir="rtl"] .sv-card__icon,
html[dir="rtl"] .about-card__icon,
html[dir="rtl"] .about-feature__icon {
  margin-left: auto;
  margin-right: 0;
}

html[dir="rtl"] .sv-card__watermark {
  right: auto;
  left: -0.5rem;
}

html[dir="rtl"] .sv-card--featured {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(59, 130, 246, 0.14) 0%, transparent 55%),
    var(--sv-white, #fff);
}

/* -------- Portfolio -------- */
html[dir="rtl"] .portfolio-page,
html[dir="rtl"] .pf-crumb,
html[dir="rtl"] .pf-hero,
html[dir="rtl"] .pf-hero__title,
html[dir="rtl"] .pf-hero__lead,
html[dir="rtl"] .pf-filters__btn,
html[dir="rtl"] .pf-group__title,
html[dir="rtl"] .pf-more__btn,
html[dir="rtl"] .pf-card__body,
html[dir="rtl"] .pf-card__title,
html[dir="rtl"] .pf-card__text,
html[dir="rtl"] .pf-cta,
html[dir="rtl"] .pf-cta__copy,
html[dir="rtl"] .pf-cta__copy strong,
html[dir="rtl"] .pf-cta__copy span,
html[dir="rtl"] .pf-cta__btn,
html[dir="rtl"] .pf-store-soon {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}

html[dir="rtl"] .pf-hero__lead {
  margin-left: auto;
  margin-right: 0;
}

html[dir="rtl"] .pf-filters,
html[dir="rtl"] .pf-group__head {
  justify-content: flex-start;
}

html[dir="rtl"] .pf-card__meta {
  flex-direction: row;
}

html[dir="rtl"] .pf-card:hover .pf-card__arrow {
  transform: translateX(-3px);
}

html[dir="rtl"] .pf-cta__btn {
  margin-left: 0;
  margin-inline-start: auto;
}

html[dir="rtl"] .pf-store-soon {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.88rem;
}

html[dir="rtl"] .home-hero__title,
html[dir="rtl"] .home-hero__lead,
html[dir="rtl"] .about-intro__title,
html[dir="rtl"] .sv-intro__title,
html[dir="rtl"] .pf-hero__title,
html[dir="rtl"] .cl-intro__title,
html[dir="rtl"] .ct-hero__title {
  letter-spacing: 0;
}

/* -------- Contact -------- */
html[dir="rtl"] .ct-crumb,
html[dir="rtl"] .ct-hero,
html[dir="rtl"] .ct-hero__copy,
html[dir="rtl"] .ct-hero__title,
html[dir="rtl"] .ct-hero__lead,
html[dir="rtl"] .ct-card__title,
html[dir="rtl"] .ct-card__text,
html[dir="rtl"] .ct-field label,
html[dir="rtl"] .ct-form__privacy,
html[dir="rtl"] .ct-form__submit,
html[dir="rtl"] .ct-form__feedback,
html[dir="rtl"] .ct-info__label,
html[dir="rtl"] .ct-info__value,
html[dir="rtl"] .ct-map__title,
html[dir="rtl"] .ct-map__text,
html[dir="rtl"] .ct-map__link {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}

html[dir="rtl"] .ct-hero__rule {
  margin-left: auto;
  margin-right: 0;
  transform-origin: right center;
}

html[dir="rtl"] .ct-form input[name="name"],
html[dir="rtl"] .ct-form textarea[name="message"] {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .ct-field__icon {
  left: auto;
  right: 0;
}

html[dir="rtl"] .ct-form .form-control {
  padding: 0 2.05rem 0 0.7rem;
}

html[dir="rtl"] .ct-form textarea.form-control {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

html[dir="rtl"] .ct-map__directions {
  right: auto;
  left: 0.85rem;
}

html[dir="rtl"] .ct-form__submit svg {
  transform: scaleX(-1);
}

@media (max-width: 991.98px) {
  html[dir="rtl"] .ct-hero,
  html[dir="rtl"] .ct-hero__copy,
  html[dir="rtl"] .ct-hero__title,
  html[dir="rtl"] .ct-hero__lead {
    text-align: right;
  }

  html[dir="rtl"] .ct-hero__art {
    justify-content: flex-start;
  }
}

/* -------- Clients -------- */
html[dir="rtl"] .cl-card__company,
html[dir="rtl"] .cl-card__role,
html[dir="rtl"] .cl-card__text {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}

html[dir="rtl"] .cl-hex__label,
html[dir="rtl"] .cl-hex__label h3,
html[dir="rtl"] .cl-hex__label p,
html[dir="rtl"] .cl-hex__copy,
html[dir="rtl"] .cl-info__heading,
html[dir="rtl"] .cl-info__head,
html[dir="rtl"] .cl-intro__title,
html[dir="rtl"] .cl-intro__lead,
html[dir="rtl"] .cl-intro__eyebrow {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}

html[dir="rtl"] .cl-card__quote {
  transform: scaleX(-1);
}

html[dir="rtl"] .cl-clients-grid {
  direction: rtl;
}

html[dir="rtl"] .cl-logo-pop__close {
  right: auto;
  left: 0.7rem;
}

/* -------- Bootstrap close / floats used by theme -------- */
html[dir="rtl"] .float-left {
  float: right !important;
}

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

@media (min-width: 992px) {
  html[dir="rtl"] #contact > .row > [class*="col-lg-3"] {
    background-position: left center;
  }
}