.brand-logo {
  height: 58px;
  width: auto;
  display: block;
}

/*
 * Stylesheet for the Arabic (RTL) version of the First Associate website.
 *
 * This file extends the English stylesheet with right-to-left direction
 * settings and some text alignment adjustments. It imports most of the
 * base styles from style.css to avoid duplication. Changes specific to RTL
 * presentation are included below.
 */

@import url("style.css");

:root {
  --font-sans: 'IBM Plex Sans Arabic', 'Cairo', Arial, sans-serif;
}

/* Apply right‑to‑left layout */
body {
  direction: rtl;
  text-align: right;
}

/* Ensure navigation links appear in the correct order for RTL */
.navbar {
  flex-direction: row-reverse;
}

.nav-links {
  flex-direction: row-reverse;
}

.nav-links li {
  margin-left: 0;
  margin-right: 15px;
}

/* Align text in the hero section to the right */
.hero {
  text-align: center; /* keep centered in hero */
}

/* Adjust list indentation to start from the right */
.why-us ul,
.industries ul,
.contact ul {
  list-style-position: inside;
}

/* Flip the logo grid order if needed */
.logo-grid {
  direction: rtl;
}

/* Keep About Us card shift consistent in RTL */
@media (min-width: 1024px) {
  .about-card {
    transform: translateX(-10%);
  }
}

/* About Us merged-left layout */
.about-card {
  max-width: 560px;
  padding: 36px 40px 36px 32px;
  position: relative;
}

/* Gold vertical accent line */
.about-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 4px;
  background: linear-gradient(to bottom, #d4af37, #f1e2b6);
  border-radius: 2px;
}

/* Title merged to left edge */
.about-card h2 {
  margin-left: -12px;
  padding-left: 16px;
}

/* Desktop positioning */
@media (min-width: 1024px) {
  .about-card {
    transform: translateX(-6%);
  }
}

/* Desktop layout: keep left bias but protect both sides */
@media (min-width: 1024px) {
  .about-card {
    max-width: 560px; /* card size */
    margin-left: clamp(18px, 5vw, 56px);
    margin-right: auto;
    transform: translateX(-6%); /* gentle left shift */
  }
}

/* Desktop layout: shift left & limit width */
@media (min-width: 1024px) {
  .about-card {
    max-width: 600px;   /* controls card size */
    margin-left: 0;
    margin-right: auto;
    transform: translateX(-10%);
  }
}

/* Override legacy About-card transforms so the card sits correctly in RTL */
.suha-band #about.about--photo .about-card{
  transform: none;
  margin-left: auto;
  margin-right: clamp(12px, 3vw, 44px);
}

@media (max-width: 900px){
  .suha-band #about.about--photo .about-card{
    margin: 0;
  }
}

/* =========================================================
   FINAL FIX: Arabic Suha background shift
   Reason: Arabic card is on the RIGHT, so image must go LEFT
   ========================================================= */

/* Desktop and larger: shift image to the left so Suha's face is visible on the left */
html[dir="rtl"] .suha-band {
  /* Shift Suha image much further to the left so her face appears fully on the left side */
  /* Shift the image slightly to the right compared to previous version */
  background-position: center, left -700px center !important;
}

/* Override the About section photo positioning for RTL.
   In LTR, the photo is anchored to the right with a negative offset to reveal Suha’s face on the right of the card.
   For RTL, we want the photo anchored to the left with a negative offset so her face appears to the left of the card. */
html[dir="rtl"] .about--photo {
  /* Anchor the photo further left with a larger negative offset to move the face fully into view */
  /* Shift the photo slightly to the right as well */
  background-position: left -600px center !important;
  background-size: cover;
}

/* Mobile safety: keep the image centered on small screens */
@media (max-width: 768px) {
  html[dir="rtl"] .suha-band {
    background-position: center, center !important;
  }
}

/* Services note line */
.services-note{
  margin: 10px 0 18px;
  font-size: 0.95rem;
  opacity: 0.9;
}
.services-note .services-note-ar{
  display:block;
  margin-top:6px;
  font-size: 0.95rem;
}



/* Services: wide card for role list (RTL) */
.service-card-wide{
  grid-column: 1 / -1;
}