/* ================================================================
   RQ LAW — v31 FIXES
   1. Desktop nav: underline only, no box, full-width gold underline
   2. Mobile header: logo flush to right corner
   3. Mobile menu: Bootstrap-style visible text
   4. Numbers section: modern premium redesign
   5. Blog section: modern professional cards
   6. Clients: infinite seamless marquee + uniform logos + glow
   ================================================================ */

/* ─────────────────────────────────────────────────────────────
   FIX 1 — Desktop nav: underline ONLY, no background box
   ───────────────────────────────────────────────────────────── */
@media (min-width: 881px) {
  /* Remove ALL box styles from nav links */
  .nav-link:not(.nav-link--cta) {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    color: rgba(255,255,255,.78) !important;
    position: relative !important;
  }

  /* Kill old ::after shortening animation */
  .nav-link:not(.nav-link--cta)::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    right: 12px !important;
    left: 12px !important;
    height: 2px !important;
    background: #c9a84c !important;
    border-radius: 2px !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform .25s ease !important;
    opacity: 1 !important;
    width: auto !important;
    top: auto !important;
  }

  /* Hover: underline expands full text width */
  .nav-link:not(.nav-link--cta):hover,
  .nav-link:not(.nav-link--cta).active {
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .nav-link:not(.nav-link--cta):hover::after,
  .nav-link:not(.nav-link--cta).active::after {
    transform: scaleX(1) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   FIX 2 — Mobile header: logo flush RIGHT corner in RTL
   ───────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  /* In RTL flex row: logo=first child → right side, toggle=last child → left side
     just need justify-content:space-between and no gaps from hidden elements */
  .header .header-content {
    justify-content: space-between !important;
    gap: 0 !important;
  }

  /* Hidden elements must not occupy any space */
  .header .main-nav,
  .header .header-lang {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Logo: flush to right in RTL (no extra margin) */
  html[dir="rtl"] .header .logo {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    padding: 0 !important;
  }

  /* Toggle: flush to left in RTL */
  html[dir="rtl"] .header .mobile-menu-toggle {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    margin-left: 0 !important;
  }

  /* LTR: logo left, toggle right */
  html[dir="ltr"] .header .logo {
    margin-right: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   FIX 3 — Mobile menu: Bootstrap-style dark bg, visible text
   ───────────────────────────────────────────────────────────── */
.mobile-menu {
  background: #0a2828 !important;
}

/* Nav links: white text on dark bg — Bootstrap style */
.mobile-nav-link {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  transition: background .15s, padding-right .15s !important;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: rgba(201,168,76,.1) !important;
  color: #c9a84c !important;
  border-bottom-color: rgba(201,168,76,.2) !important;
  padding-right: 22px !important;
  border-radius: 0 !important;
}

.mobile-nav-link i {
  color: #c9a84c !important;
  width: 18px !important;
  text-align: center !important;
  font-size: .9rem !important;
}

/* Remove the rounded bg on nav container */
.mobile-nav {
  padding: 0 !important;
  gap: 0 !important;
}

/* Language row inside menu */
.mobile-menu-header {
  background: rgba(0,0,0,.2) !important;
}

/* Active state gold left border like Bootstrap */
.mobile-nav-link.active {
  border-right: 3px solid #c9a84c !important;
}

/* CTA button in menu */
.mobile-nav-cta {
  margin: 18px 18px 0 !important;
  border-radius: 8px !important;
}

/* Contact items at bottom */
.mobile-contact {
  background: rgba(0,0,0,.15) !important;
}

.mobile-contact-item {
  color: rgba(255,255,255,.65) !important;
}

/* ─────────────────────────────────────────────────────────────
   FIX 4 — Numbers section: Modern premium redesign
   ───────────────────────────────────────────────────────────── */

/* Section wrapper */
.numbers-section.rq-impact-strip {
  background: linear-gradient(135deg, #041c1c 0%, #062828 40%, #0a3a3a 70%, #041c1c 100%) !important;
  padding: 96px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Decorative background grid */
.numbers-section.rq-impact-strip::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(201,168,76,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,.03) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  pointer-events: none !important;
}

/* Glow orb behind section */
.numbers-section.rq-impact-strip::after {
  content: '' !important;
  position: absolute !important;
  width: 600px !important;
  height: 600px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, rgba(15,92,92,.22) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Section header */
.rq-impact-intro {
  text-align: center !important;
  margin-bottom: 64px !important;
  position: relative !important;
  z-index: 2 !important;
}

.numbers-subtitle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(201,168,76,.1) !important;
  border: 1px solid rgba(201,168,76,.3) !important;
  color: #c9a84c !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 6px 18px !important;
  border-radius: 100px !important;
  margin-bottom: 18px !important;
}

.numbers-headline {
  color: #fff !important;
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  font-weight: 900 !important;
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
}

.numbers-tagline {
  color: rgba(255,255,255,.5) !important;
  font-size: .92rem !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  line-height: 1.8 !important;
}

/* Stats grid */
.rq-impact-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Individual stat item */
.rq-impact-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 24px !important;
  text-align: center !important;
  position: relative !important;
  transition: background .3s ease !important;
  cursor: default !important;
}

.rq-impact-item:hover {
  background: rgba(201,168,76,.05) !important;
}

/* Vertical divider between items */
.rq-impact-item:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 20% !important;
  bottom: 20% !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.1), transparent) !important;
}

/* Icon: large, glowing */
.rq-impact-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(201,168,76,.15), rgba(201,168,76,.05)) !important;
  border: 1px solid rgba(201,168,76,.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  position: static !important;
  transform: none !important;
  font-size: 1.4rem !important;
  color: #c9a84c !important;
  box-shadow: 0 8px 24px rgba(201,168,76,.15) !important;
  transition: transform .3s, box-shadow .3s !important;
}

.rq-impact-item:hover .rq-impact-icon {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 16px 36px rgba(201,168,76,.25) !important;
}

/* Number */
.rq-impact-number {
  font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
  letter-spacing: -2px !important;
  font-family: Georgia, serif !important;
}

.rq-impact-number .number-counter {
  color: #fff !important;
}

.rq-percent {
  color: #c9a84c !important;
  font-size: .7em !important;
  font-family: Georgia, serif !important;
}

/* Label */
.rq-impact-label {
  color: rgba(255,255,255,.55) !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
  margin: 0 !important;
  min-height: auto !important;
}

/* Responsive */
@media (max-width: 860px) {
  .rq-impact-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rq-impact-item:nth-child(2)::after {
    display: none !important;
  }
  .rq-impact-item:nth-child(1),
  .rq-impact-item:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }
}

@media (max-width: 480px) {
  .rq-impact-stats {
    grid-template-columns: 1fr 1fr !important;
    border-radius: 14px !important;
  }
  .rq-impact-item {
    padding: 32px 16px !important;
  }
  .rq-impact-number {
    font-size: 2.2rem !important;
    letter-spacing: -1px !important;
  }
  .rq-impact-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.1rem !important;
    border-radius: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   FIX 5 — Blog section: Modern professional cards
   ───────────────────────────────────────────────────────────── */

.rq-blog-section {
  background: #f8f7f4 !important;
  padding: 96px 0 !important;
}

/* Header */
.rq-blog-header {
  text-align: center !important;
  margin-bottom: 56px !important;
}

.rq-blog-header-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 18px !important;
  border: 1.5px solid #c9a84c !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c9a84c !important;
  font-size: 1rem !important;
  background: rgba(201,168,76,.06) !important;
}

.rq-blog-heading {
  font-family: Georgia, serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 900 !important;
  color: #111 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Grid */
.rq-blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

/* Card */
.rq-blog-card {
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.rq-blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(15,92,92,.12) !important;
}

/* Image */
.rq-blog-card-img-wrap {
  display: block !important;
  overflow: hidden !important;
  width: 100% !important;
  aspect-ratio: 16/10 !important;
}

.rq-blog-card--featured .rq-blog-card-img-wrap {
  aspect-ratio: 16/11 !important;
}

.rq-blog-card-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .5s ease !important;
  filter: none !important;
}

.rq-blog-card:hover .rq-blog-card-img-wrap img {
  transform: scale(1.04) !important;
}

/* Card body */
.rq-blog-card-body {
  padding: 22px 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Meta line */
.rq-blog-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
}

/* Remove old dash pseudo */
.rq-blog-card-meta::before {
  display: none !important;
}

.rq-blog-card-cat {
  display: inline-block !important;
  background: rgba(15,92,92,.08) !important;
  color: #0f5c5c !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  border: 1px solid rgba(15,92,92,.12) !important;
}

.rq-blog-card-dot {
  color: #ccc !important;
  font-size: .7rem !important;
}

.rq-blog-card-date {
  color: #aaa !important;
  font-size: .74rem !important;
}

/* Title */
.rq-blog-card-title {
  margin: 0 !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #111 !important;
}

.rq-blog-card-title a {
  text-decoration: none !important;
  color: inherit !important;
  transition: color .2s !important;
}

.rq-blog-card-title a:hover {
  color: #0f5c5c !important;
}

/* Read more link */
.rq-blog-card-body::after {
  content: 'اقرأ المزيد ←' !important;
  display: block !important;
  color: #c9a84c !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  opacity: 0 !important;
  transform: translateX(-6px) !important;
  transition: opacity .25s, transform .25s !important;
}

.rq-blog-card:hover .rq-blog-card-body::after {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Responsive */
@media (max-width: 860px) {
  .rq-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   FIX 6 — Clients marquee: infinite loop, uniform logos, glow
   ───────────────────────────────────────────────────────────── */

/* Section */
.rq-clients {
  background: linear-gradient(160deg, #041818 0%, #061f1f 50%, #0a3535 80%, #041818 100%) !important;
  padding: 80px 0 70px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Header */
.rq-clients-header {
  text-align: center !important;
  margin-bottom: 48px !important;
  position: relative !important;
  z-index: 2 !important;
}

.rq-clients-trust-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255,255,255,.4) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

.rq-clients-trust-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #c9a84c !important;
  box-shadow: 0 0 8px rgba(201,168,76,.7) !important;
  display: inline-block !important;
  animation: dotPulse 2s ease infinite !important;
}

.rq-clients-heading {
  font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin: 0 0 12px !important;
  line-height: 1.15 !important;
}

.rq-clients-heading em {
  font-style: normal !important;
  background: linear-gradient(120deg, #fce27a, #c9a84c 50%, #9e7520) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.rq-clients-sub {
  color: rgba(255,255,255,.48) !important;
  font-size: .88rem !important;
  max-width: 480px !important;
  margin: 0 auto 24px !important;
  line-height: 1.75 !important;
}

/* Stat pills */
.rq-clients-stats {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 100px !important;
  padding: 8px 24px !important;
}

.rq-cs-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 20px !important;
}

.rq-cs-num {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #c9a84c !important;
  line-height: 1 !important;
}

.rq-cs-lbl {
  font-size: .62rem !important;
  color: rgba(255,255,255,.4) !important;
  font-weight: 600 !important;
  margin-top: 3px !important;
  white-space: nowrap !important;
}

.rq-cs-sep {
  width: 1px !important;
  height: 28px !important;
  background: rgba(255,255,255,.12) !important;
  flex-shrink: 0 !important;
}

/* ── MARQUEE — Seamless infinite loop ── */
.rq-marquee-outer {
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
  padding: 16px 0 !important;
}

/* Gold fade edges */
.rq-marquee-fade {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 160px !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.rq-marquee-fade--right {
  right: 0 !important;
  background: linear-gradient(to left, #041818 0%, transparent 100%) !important;
}

.rq-marquee-fade--left {
  left: 0 !important;
  background: linear-gradient(to right, #041818 0%, transparent 100%) !important;
}

/* Marquee outer — clips to show only visible area */
.rq-marquee-outer {
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
  padding: 16px 0 !important;
  width: 100% !important;
}

/* Marquee track — 3 identical sets of 9 logos
   Each card: 170px wide + 20px gap = 190px per card
   One set: 9 × 190px = 1710px
   Animation: move exactly -1710px then snap back to 0 = seamless */
.rq-marquee-track {
  display: flex !important;
  gap: 20px !important;
  width: max-content !important;
  /* Move exactly one set width (1710px) then loop — never shows empty */
  animation: rqInfiniteScroll 32s linear infinite !important;
  will-change: transform !important;
}

.rq-marquee-outer:hover .rq-marquee-track {
  animation-play-state: paused !important;
}

/* translateX by exact one-set pixel width = perfectly seamless */
@keyframes rqInfiniteScroll {
  0%   { transform: translateX(0px); }
  100% { transform: translateX(-1710px); }
}

/* ── Logo cards — exact 170px width, uniform, no flex resizing ── */
.rq-cli-card {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: 170px !important;
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  height: 100px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .3s, background .3s, transform .3s, box-shadow .3s !important;
  cursor: default !important;
}

/* Shimmer line across top on hover */
.rq-cli-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.7), transparent) !important;
  opacity: 0 !important;
  transition: opacity .3s !important;
}

.rq-cli-card:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(201,168,76,.4) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(201,168,76,.15) !important;
}

.rq-cli-card:hover::before {
  opacity: 1 !important;
}

/* Uniform logo size — all logos same box */
.rq-cli-card img {
  width: 110px !important;
  height: 52px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  filter: brightness(.8) grayscale(.2) !important;
  transition: filter .3s ease !important;
}

.rq-cli-card:hover img {
  filter: brightness(1.05) grayscale(0) !important;
}

.rq-cli-name {
  font-size: .62rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.3) !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 140px !important;
  transition: color .3s !important;
}

.rq-cli-card:hover .rq-cli-name {
  color: rgba(201,168,76,.75) !important;
}

/* Bottom CTA line */
.rq-clients-cta-line {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-top: 44px !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  flex-wrap: wrap !important;
}

.rq-clients-cta-line > span {
  color: rgba(255,255,255,.4) !important;
  font-size: .86rem !important;
}

.rq-clients-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 26px !important;
  background: linear-gradient(135deg, #c9a84c, #9e7520) !important;
  color: #fff !important;
  border-radius: 100px !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(201,168,76,.3) !important;
  transition: transform .25s, box-shadow .25s !important;
}

.rq-clients-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(201,168,76,.45) !important;
}

/* Mobile clients */
@media (max-width: 680px) {
  .rq-cli-card { width: 140px !important; height: 85px !important; }
  .rq-cli-card img { width: 90px !important; height: 42px !important; }
  .rq-marquee-fade { width: 70px !important; }
  .rq-clients-stats { display: none !important; }
  .rq-clients-cta-line { flex-direction: column !important; gap: 12px !important; }
  .rq-clients-cta-btn { width: 100% !important; max-width: 280px !important; justify-content: center !important; }
}