.elementor-9840 .elementor-element.elementor-element-16c3f84{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9840 .elementor-element.elementor-element-f2ef488{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9840 .elementor-element.elementor-element-b5e3d93{margin:155px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9840 .elementor-element.elementor-element-b5e3d93.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-9840 .elementor-element.elementor-element-f893237{width:100%;max-width:100%;margin:-22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-9840 .elementor-element.elementor-element-f893237.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-9840 .elementor-element.elementor-element-75155cc{--display:flex;}.elementor-9840 .elementor-element.elementor-element-16bc2e0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9840 .elementor-element.elementor-element-9e8ff9a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9840 .elementor-element.elementor-element-9e8ff9a.e-con{--align-self:flex-start;}@media(max-width:767px){.elementor-9840 .elementor-element.elementor-element-16c3f84{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9840 .elementor-element.elementor-element-f2ef488{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9840 .elementor-element.elementor-element-b5e3d93{width:initial;max-width:initial;margin:56px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-9840 .elementor-element.elementor-element-f893237{width:initial;max-width:initial;margin:56px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-9840 .elementor-element.elementor-element-75155cc{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9840 .elementor-element.elementor-element-9e8ff9a{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-f893237 *//* =========================================================
   ONQOL — CASE STUDY HEADER
   PREMIUM / CLEAN / RESPONSIVE
   ========================================================= */

.onq-header {
  --onq-gold: #e8ab1f;
  --onq-gold-soft: rgba(232,171,31,0.10);

  --onq-red: #b3241a;
  --onq-red-soft: rgba(179,36,26,0.10);

  --onq-text-muted: #a3a3a3;
  --onq-border: rgba(255,255,255,0.08);

  --onq-progress: 0;

  position: relative !important;
  width: 100% !important;
  max-width: 1100px !important;

  margin: 0 auto !important;
  padding: 56px 48px !important;

  box-sizing: border-box !important;

  background:
    radial-gradient(
      ellipse 85% 55% at 78% 0%,
      rgba(179,36,26,0.12),
      transparent 60%
    ),
    #0a0a0a !important;

  color: #fff !important;

  font-family:
    'Poppins',
    'Segoe UI',
    Arial,
    sans-serif !important;

  direction: ltr !important;
  text-align: left !important;

  border-radius: 8px !important;
  overflow: hidden !important;
}


/* =========================================================
   GLOBAL BOX SIZING
   ========================================================= */

.onq-header *,
.onq-header *::before,
.onq-header *::after {
  box-sizing: border-box !important;
}


/* =========================================================
   ENTRANCE ANIMATION
   ========================================================= */

.onq-header [data-onq-reveal] {
  opacity: var(--onq-progress) !important;

  transform:
    translateY(
      calc((1 - var(--onq-progress)) * 24px)
    ) !important;

  will-change:
    opacity,
    transform !important;
}


/* Final visible state */

.onq-header .onq-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .onq-header [data-onq-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

}


/* =========================================================
   BADGES
   ========================================================= */

.onq-header .onq-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  gap: 12px !important;

  width: 100% !important;

  margin: 0 0 34px !important;
  padding: 0 !important;
}


.onq-header .onq-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  padding: 8px 17px !important;

  max-width: 100% !important;
  min-width: 0 !important;

  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;

  white-space: nowrap !important;

  border: 1px solid var(--onq-border) !important;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}


.onq-header .onq-badge:hover {
  transform: translateY(-3px) !important;
}


.onq-header .onq-badge svg {
  flex: 0 0 auto !important;

  width: 16px !important;
  height: 16px !important;

  transition:
    transform 0.3s ease !important;
}


.onq-header .onq-badge:hover svg {
  transform:
    scale(1.12)
    rotate(-5deg) !important;
}


/* GOLD */

.onq-header .onq-badge--gold {
  color: var(--onq-gold) !important;

  background:
    var(--onq-gold-soft) !important;

  border-color:
    rgba(232,171,31,0.30) !important;
}


.onq-header .onq-badge--gold:hover {
  background:
    rgba(232,171,31,0.16) !important;

  border-color:
    rgba(232,171,31,0.58) !important;

  box-shadow:
    0 10px 26px rgba(232,171,31,0.12) !important;
}


/* NEUTRAL */

.onq-header .onq-badge--neutral {
  color: #e2e2e2 !important;

  background:
    rgba(255,255,255,0.035) !important;
}


.onq-header .onq-badge--neutral:hover {
  background:
    rgba(255,255,255,0.075) !important;

  border-color:
    rgba(255,255,255,0.14) !important;

  box-shadow:
    0 10px 26px rgba(0,0,0,0.25) !important;
}


/* RED */

.onq-header .onq-badge--red {
  color: #f0938c !important;

  background:
    var(--onq-red-soft) !important;

  border-color:
    rgba(179,36,26,0.34) !important;
}


.onq-header .onq-badge--red:hover {
  background:
    rgba(179,36,26,0.17) !important;

  border-color:
    rgba(179,36,26,0.62) !important;

  box-shadow:
    0 10px 26px rgba(179,36,26,0.14) !important;
}


/* =========================================================
   HEADLINE
   ========================================================= */

.onq-header .onq-headline {
  margin: 0 0 30px !important;
  padding: 0 !important;

  max-width: 100% !important;

  font-size:
    clamp(34px, 5vw, 58px) !important;

  line-height: 1.10 !important;

  font-weight: 800 !important;

  letter-spacing: -1.7px !important;

  color: #fff !important;
}


.onq-header .onq-highlight {
  position: relative !important;

  display: inline-block !important;

  color: #fff !important;

  transition:
    text-shadow 0.3s ease !important;
}


.onq-header .onq-highlight--gold {
  color:
    var(--onq-gold) !important;
}


.onq-header .onq-highlight:hover {
  text-shadow:
    0 0 24px rgba(232,171,31,0.30) !important;
}


.onq-header .onq-underline {
  position: absolute !important;

  left: 3px !important;
  right: 3px !important;

  bottom: -7px !important;

  height: 4px !important;

  border-radius: 999px !important;

  transform-origin: left center !important;

  transition:
    transform 0.35s ease,
    height 0.35s ease !important;
}


.onq-header .onq-highlight:hover .onq-underline {
  transform: scaleX(1.02) !important;
  height: 5px !important;
}


.onq-header .onq-underline--gold {
  background:
    var(--onq-gold) !important;
}


.onq-header .onq-underline--red {
  background:
    var(--onq-red) !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.onq-header .onq-description {
  margin: 0 0 38px !important;
  padding: 0 !important;

  max-width: 950px !important;

  font-size: 18px !important;
  line-height: 1.75 !important;

  font-weight: 400 !important;

  color:
    var(--onq-text-muted) !important;
}


/* =========================================================
   INFO CARDS GRID
   ========================================================= */

.onq-header .onq-info-grid {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 16px !important;

  width: 100% !important;

  margin: 0 0 18px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
}


/* =========================================================
   INDIVIDUAL CARD
   ========================================================= */

.onq-header .onq-info-item {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  justify-content: space-between !important;

  min-width: 0 !important;
  min-height: 190px !important;

  padding: 25px 24px !important;

  overflow: hidden !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.018)
    ) !important;

  border:
    1px solid rgba(255,255,255,0.085) !important;

  box-shadow:
    0 8px 30px rgba(0,0,0,0.18) !important;

  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease !important;
}


/* =========================================================
   TOP ACCENT
   ========================================================= */

.onq-header .onq-info-item::before {
  content: "" !important;

  position: absolute !important;

  left: 0 !important;
  top: 0 !important;

  width: 100% !important;
  height: 2px !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.10),
      transparent
    ) !important;

  opacity: 0.65 !important;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease !important;
}


/* =========================================================
   SOFT INNER LIGHT
   ========================================================= */

.onq-header .onq-info-item::after {
  content: "" !important;

  position: absolute !important;

  width: 140px !important;
  height: 140px !important;

  right: -80px !important;
  top: -80px !important;

  border-radius: 50% !important;

  background:
    rgba(255,255,255,0.022) !important;

  pointer-events: none !important;

  transition:
    transform 0.5s ease,
    background 0.5s ease !important;
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.onq-header .onq-info-item:hover {
  transform:
    translateY(-6px) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.065),
      rgba(255,255,255,0.025)
    ) !important;

  border-color:
    rgba(255,255,255,0.16) !important;

  box-shadow:
    0 18px 38px rgba(0,0,0,0.28) !important;
}


.onq-header .onq-info-item:hover::before {
  opacity: 1 !important;

  transform:
    scaleX(1.04) !important;
}


.onq-header .onq-info-item:hover::after {
  transform:
    scale(1.45) !important;

  background:
    rgba(255,255,255,0.035) !important;
}


/* =========================================================
   CARD LABEL
   ========================================================= */

.onq-header .onq-info-label {
  position: relative !important;
  z-index: 2 !important;

  display: block !important;

  margin: 0 0 14px !important;
  padding: 0 !important;

  font-size: 12px !important;
  line-height: 1.3 !important;

  letter-spacing: 0.10em !important;

  text-transform: uppercase !important;

  font-weight: 600 !important;

  color:
    #8f8f8f !important;

  transition:
    color 0.3s ease !important;
}


.onq-header .onq-info-item:hover .onq-info-label {
  color:
    #b8b8b8 !important;
}


/* =========================================================
   CARD VALUE
   ========================================================= */

.onq-header .onq-info-value {
  position: relative !important;
  z-index: 2 !important;

  display: block !important;

  margin: auto 0 0 !important;
  padding: 0 !important;

  font-size: 19px !important;
  line-height: 1.35 !important;

  font-weight: 700 !important;

  color:
    #ffffff !important;

  overflow-wrap: break-word !important;

  transition:
    color 0.3s ease,
    transform 0.3s ease !important;
}


.onq-header .onq-info-item:hover .onq-info-value {
  transform:
    translateX(2px) !important;
}


.onq-header .onq-info-value--gold {
  color:
    var(--onq-gold) !important;
}


.onq-header .onq-info-item:hover
.onq-info-value--gold {
  color:
    #ffd257 !important;
}


/* =========================================================
   CARD-SPECIFIC ACCENTS
   ========================================================= */

/* CARD 1 — CLIENT */

.onq-header .onq-info-item:nth-child(1)::before {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.16),
      transparent
    ) !important;
}


/* CARD 2 — TARGET */

.onq-header .onq-info-item:nth-child(2)::before {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.16),
      transparent
    ) !important;
}


/* CARD 3 — GROWTH PARTNER */

.onq-header .onq-info-item:nth-child(3)::before {
  background:
    linear-gradient(
      90deg,
      rgba(232,171,31,0.75),
      transparent
    ) !important;
}


.onq-header .onq-info-item:nth-child(3):hover {
  border-color:
    rgba(232,171,31,0.30) !important;

  box-shadow:
    0 18px 38px rgba(232,171,31,0.08) !important;
}


/* CARD 4 — BUDGET */

.onq-header .onq-info-item:nth-child(4)::before {
  background:
    linear-gradient(
      90deg,
      rgba(179,36,26,0.65),
      transparent
    ) !important;
}


.onq-header .onq-info-item:nth-child(4):hover {
  border-color:
    rgba(179,36,26,0.28) !important;

  box-shadow:
    0 18px 38px rgba(179,36,26,0.07) !important;
}


/* =========================================================
   GROWTH CHANNELS
   ========================================================= */

.onq-header .onq-footer-bar {
  position: relative !important;

  width: 100% !important;

  padding: 24px 28px !important;
  margin: 0 !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.015)
    ) !important;

  border:
    1px solid rgba(232,171,31,0.20) !important;

  box-shadow:
    0 8px 30px rgba(0,0,0,0.16) !important;

  overflow: hidden !important;

  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease !important;
}


.onq-header .onq-footer-bar::before {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 2px !important;

  background:
    linear-gradient(
      90deg,
      var(--onq-gold),
      rgba(232,171,31,0)
    ) !important;

  opacity: 0.65 !important;
}


.onq-header .onq-footer-bar:hover {
  transform:
    translateY(-5px) !important;

  background:
    linear-gradient(
      145deg,
      rgba(232,171,31,0.06),
      rgba(255,255,255,0.018)
    ) !important;

  border-color:
    rgba(232,171,31,0.38) !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,0.27) !important;
}


/* =========================================================
   CHANNELS TEXT
   ========================================================= */

.onq-header .onq-channels {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 0 12px !important;
  padding: 0 !important;

  font-size: 15px !important;
  line-height: 1.7 !important;

  font-weight: 400 !important;

  color:
    var(--onq-text-muted) !important;
}


.onq-header .onq-channels strong {
  color:
    #ffffff !important;

  font-weight: 700 !important;
}


/* =========================================================
   TAGLINE
   ========================================================= */

.onq-header .onq-tagline {
  position: relative !important;
  z-index: 2 !important;

  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 12px !important;
  line-height: 1.5 !important;

  letter-spacing: 0.13em !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  color:
    var(--onq-gold) !important;

  transition:
    letter-spacing 0.35s ease !important;
}


.onq-header .onq-footer-bar:hover
.onq-tagline {
  letter-spacing:
    0.17em !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .onq-header {
    padding: 44px 32px !important;
  }

  .onq-header .onq-info-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 14px !important;
  }

  .onq-header .onq-info-item {
    min-height: 175px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .onq-header {
    padding: 30px 16px !important;

    width: 100% !important;

    border-radius: 6px !important;
  }


  /* BADGES */

  .onq-header .onq-badges {
    gap: 7px !important;
    margin-bottom: 28px !important;
  }


  .onq-header .onq-badge {
    flex: 0 1 auto !important;

    padding: 7px 11px !important;

    font-size: 11px !important;

    gap: 6px !important;

    white-space: nowrap !important;
  }


  .onq-header .onq-badge svg {
    width: 14px !important;
    height: 14px !important;
  }


  /* HEADLINE */

  .onq-header .onq-headline {
    font-size: 29px !important;

    line-height: 1.08 !important;

    letter-spacing: -1px !important;

    margin-bottom: 24px !important;
  }


  .onq-header .onq-highlight {
    white-space: nowrap !important;
  }


  .onq-header .onq-underline {
    left: 2px !important;
    right: 2px !important;

    bottom: -5px !important;

    height: 3px !important;
  }


  /* DESCRIPTION */

  .onq-header .onq-description {
    font-size: 15px !important;

    line-height: 1.7 !important;

    margin-bottom: 30px !important;
  }


  /* INFO GRID */

  .onq-header .onq-info-grid {
    grid-template-columns: 1fr !important;

    gap: 11px !important;

    margin-bottom: 12px !important;
  }


  /* EACH MOBILE CARD */

  .onq-header .onq-info-item {
    min-height: 0 !important;

    padding: 20px 19px !important;

    border-radius: 13px !important;
  }


  .onq-header .onq-info-label {
    font-size: 11px !important;

    letter-spacing: 0.09em !important;

    margin-bottom: 10px !important;
  }


  .onq-header .onq-info-value {
    font-size: 18px !important;

    line-height: 1.35 !important;
  }


  /* FOOTER */

  .onq-header .onq-footer-bar {
    padding: 20px 19px !important;

    border-radius: 13px !important;
  }


  .onq-header .onq-channels {
    font-size: 14px !important;

    line-height: 1.65 !important;

    margin-bottom: 11px !important;
  }


  .onq-header .onq-tagline {
    font-size: 10px !important;

    line-height: 1.5 !important;

    letter-spacing: 0.11em !important;
  }


  .onq-header .onq-footer-bar:hover
  .onq-tagline {
    letter-spacing: 0.13em !important;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .onq-header {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }


  .onq-header .onq-headline {
    font-size: 26px !important;
    letter-spacing: -0.8px !important;
  }


  .onq-header .onq-badge {
    padding: 6px 9px !important;
    font-size: 10px !important;
    gap: 5px !important;
  }


  .onq-header .onq-info-item {
    padding: 18px 17px !important;
  }


  .onq-header .onq-info-value {
    font-size: 17px !important;
  }

}


/* =========================================================
   TOUCH DEVICES
   لا نريد Hover غريب على الموبايل
   ========================================================= */

@media (hover: none) {

  .onq-header .onq-badge:hover {
    transform: none !important;
  }

  .onq-header .onq-info-item:hover {
    transform: none !important;
  }

  .onq-header .onq-footer-bar:hover {
    transform: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f2ef488 */.elementor-case-study-bg {
  background-color: #050505 !important;
  background-image: radial-gradient(circle at 50% 70%, rgba(212, 175, 55, 0.15) 0%, rgba(5, 5, 5, 0) 70%) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.9rem 0.3rem !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: #ffffff !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b398483 *//* ============================================
   BASE: Section Container
   !important على كل خاصية بصرية لمنع تعارض الثيم
   ============================================ */
.onqm-metrics-section {
  background-color: #050505 !important;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  padding: 60px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

.onqm-metrics-section * {
  box-sizing: border-box !important;
}

.onqm-metrics-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================
   SECTION: Top Bar (Eyebrow + Link)
   ============================================ */
.onqm-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 0 28px !important;
}

.onqm-metrics-section span.onqm-eyebrow {
  color: #FBB900 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.onqm-metrics-section a.onqm-schema-link {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 0.25s ease, gap 0.25s ease !important;
}

.onqm-metrics-section a.onqm-schema-link:hover {
  color: #FBB900 !important;
  gap: 9px !important;
}

.onqm-metrics-section a.onqm-schema-link svg {
  transition: transform 0.25s ease !important;
}

.onqm-metrics-section a.onqm-schema-link:hover svg {
  transform: translate(2px, -2px) !important;
}

/* ============================================
   SECTION: Grid
   ============================================ */
.onqm-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

@media (max-width: 1024px) {
  .onqm-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  .onqm-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ============================================
   ANIMATION: Scroll-driven reveal
   متحكم فيها بمتغيّر --onqm-progress
   بيتحدّث بشكل مستمر أثناء السكرول (مش fade ثابت)
   ============================================ */
[data-onqm-reveal] {
  opacity: var(--onqm-progress, 0) !important;
  transform: translateY(calc((1 - var(--onqm-progress, 0)) * 28px))
             scale(calc(0.94 + var(--onqm-progress, 0) * 0.06)) !important;
  filter: blur(calc((1 - var(--onqm-progress, 0)) * 10px)) !important;
  will-change: opacity, transform, filter !important;
}

.onqm-topbar.onqm-visible,
.onqm-card.onqm-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-onqm-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ============================================
   SECTION: Card Base
   ============================================ */
.onqm-card {
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 170px !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease,
              background-color 0.3s ease !important;
}

.onqm-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  background: #121212 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8) !important;
}

/* ==== Featured Cards (خط أحمر يسار) ==== */
.onqm-card.onqm-is-featured {
  border: 1px solid rgba(251, 185, 0, 0.25) !important;
  border-left: 3px solid #C40505 !important;
  background: linear-gradient(145deg, rgba(251, 185, 0, 0.03) 0%, #0d0d0d 60%) !important;
}

.onqm-card.onqm-is-featured:hover {
  border-color: rgba(251, 185, 0, 0.5) !important;
  border-left-color: #C40505 !important;
  box-shadow: 0 10px 30px -10px rgba(251, 185, 0, 0.2) !important;
}

/* ==== Glow Card (Fulfillment Rate - بروز إضافي دائم) ==== */
.onqm-card.onqm-is-glow {
  border-color: rgba(251, 185, 0, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(251, 185, 0, 0.12), 0 8px 26px -8px rgba(251, 185, 0, 0.2) !important;
}

.onqm-card.onqm-is-glow:hover {
  border-color: rgba(251, 185, 0, 0.8) !important;
  box-shadow: 0 0 0 1px rgba(251, 185, 0, 0.2), 0 12px 34px -8px rgba(251, 185, 0, 0.35) !important;
}

/* ============================================
   SECTION: Card Header (Title + Icon)
   ============================================ */
.onqm-card-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin: 0 0 20px !important;
  width: 100% !important;
}

.onqm-card span.onqm-card-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #a1a1a6 !important;
  line-height: 1.4 !important;
  margin: 0 12px 0 0 !important;
}

.onqm-card-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: #1c1c1e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease, background-color 0.3s ease !important;
}

.onqm-card-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #8e8e93 !important;
  stroke-width: 1.5 !important;
  fill: none !important;
}

.onqm-card.onqm-is-featured .onqm-card-icon {
  background: rgba(251, 185, 0, 0.12) !important;
}

.onqm-card.onqm-is-featured .onqm-card-icon svg {
  stroke: #FBB900 !important;
}

.onqm-card:hover .onqm-card-icon {
  transform: scale(1.1) rotate(-4deg) !important;
}

.onqm-card.onqm-is-featured:hover .onqm-card-icon {
  background: rgba(251, 185, 0, 0.22) !important;
}

/* ============================================
   SECTION: Card Body (Value + Description)
   ============================================ */
.onqm-card-body {
  margin: 0 !important;
  padding: 0 !important;
}

.onqm-card div.onqm-card-value {
  font-size: clamp(30px, 2.5vw, 40px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.03em !important;
  transition: color 0.3s ease !important;
}

.onqm-card.onqm-is-featured:hover div.onqm-card-value {
  color: #FFD257 !important;
}

.onqm-card p.onqm-card-desc {
  font-size: 12px !important;
  color: #8e8e93 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-weight: 400 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-75155cc */.elementor-9840 .elementor-element.elementor-element-75155cc {
  /* متغيرات حجم النصوص بوحدة البيكسل */
  --title-size: 15px;
  --value-size: 44px;
  --subtext-size: 14px;

  background-color: #050505 !important;
  background-image: radial-gradient(circle at 50% 70%, rgba(212, 175, 55, 0.15) 0%, rgba(5, 5, 5, 0) 70%) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 24px 12px !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card {
  position: relative !important;
  background-color: #121212 !important;
  border: 1px solid rgba(251, 185, 0, 0.4) !important;
  border-left: 4px solid #C40505 !important;
  border-radius: 20px !important;
  padding: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(251, 185, 0, 0.9) !important;
  box-shadow: 0 15px 35px rgba(251, 185, 0, 0.2), 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  gap: 8px !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-title h2 {
  color: #a3a3a3 !important;
  font-size: var(--title-size) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-icon {
  background-color: rgba(251, 185, 0, 0.15) !important;
  color: #FBB900 !important;
  border-radius: 12px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-icon .elementor-icon {
  color: #FBB900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-value h2 {
  color: #ffffff !important;
  font-size: var(--value-size) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 4px 0 !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-subtext p {
  color: #a3a3a3 !important;
  font-size: var(--subtext-size) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-off {
  background-color: #121212 !important;
  border: 1px solid #282828 !important;
  border-radius: 20px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-off:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(251, 185, 0, 0.9) !important;
  box-shadow: 0 15px 35px rgba(251, 185, 0, 0.2), 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-off-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  width: 100% !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-off-title .elementor-heading-title {
  color: #c7c7c7 !important;
  font-size: var(--title-size) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-off-icon {
  width: 40px !important;
  height: 40px !important;
  background-color: #222222 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-off-icon .elementor-icon {
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-off-value .elementor-heading-title {
  color: #ffffff !important;
  font-size: var(--value-size) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.02em !important;
}

.elementor-9840 .elementor-element.elementor-element-75155cc .stat-card-off-subtext p {
  color: #8e8e93 !important;
  font-size: var(--subtext-size) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-909bd26 *//* ==========================================================================
   ONQOL SMART MOBILITY — REFINED FULL STYLESHEET
   Desktop / Tablet / Mobile
   Elementor ".elementor-9840 .elementor-element.elementor-element-909bd26" compatible
========================================================================== */


/* ==========================================================================
   ROOT
========================================================================== */

.elementor-9840 .elementor-element.elementor-element-909bd26 .onqol-ride-case,
.onqol-ride-case {

  --ride-yellow: #fbb900;
  --ride-yellow-soft: #ffdc71;
  --ride-ivory: #f3f3f1;
  --ride-silver: #d7d7dc;
  --ride-red: #c40505;

  --ride-bg: #050505;
  --ride-surface: #101012;
  --ride-surface-2: #17171a;
  --ride-surface-3: #202024;

  --ride-border: #34343a;
  --ride-border-light: #505058;

  --ride-white: #ffffff;
  --ride-text: #e2e2e6;
  --ride-muted: #b4b4bc;

  --ride-radius: 18px;

  --ride-shadow:
    0 22px 60px rgb(0 0 0 / 34%);

  position: relative !important;
  isolation: isolate !important;

  width: 100% !important;
  max-width: 1280px !important;

  margin: 0 auto !important;

  padding:
    clamp(20px, 4vw, 52px) !important;

  overflow: hidden !important;

  color:
    var(--ride-white) !important;

  background:
    radial-gradient(
      circle at 0 0,
      rgb(251 185 0 / 9%),
      transparent 430px
    ),
    radial-gradient(
      circle at 100% 100%,
      rgb(196 5 5 / 5%),
      transparent 460px
    ),
    linear-gradient(
      rgb(255 255 255 / 2.5%) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgb(255 255 255 / 2.5%) 1px,
      transparent 1px
    ),
    var(--ride-bg) !important;

  background-size:
    auto,
    auto,
    48px 48px,
    48px 48px,
    auto !important;

  border:
    1px solid #242428 !important;

  border-radius:
    0 26px 0 26px !important;

  box-shadow:
    var(--ride-shadow) !important;

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif !important;

  font-variant-numeric:
    tabular-nums !important;

  line-height:
    1.5 !important;

  text-align:
    left !important;
}


/* ==========================================================================
   GLOBAL RESET
========================================================================== */

.elementor-9840 .elementor-element.elementor-element-909bd26 .onqol-ride-case *,
.onqol-ride-case * {
  box-sizing: border-box !important;
}

.elementor-9840 .elementor-element.elementor-element-909bd26 .onqol-ride-case
:where(
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  dl,
  dt,
  dd,
  figure,
  figcaption,
  blockquote
),
.onqol-ride-case
:where(
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  dl,
  dt,
  dd,
  figure,
  figcaption,
  blockquote
) {
  margin: 0 !important;
}

.elementor-9840 .elementor-element.elementor-element-909bd26 .onqol-ride-case
:where(ul, ol),
.onqol-ride-case
:where(ul, ol) {
  padding: 0 !important;
}

.onqol-ride-case
:where(
  img,
  svg,
  video
) {
  max-width: 100% !important;
}


/* ==========================================================================
   ACCESSIBILITY
========================================================================== */

.ride-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}


/* ==========================================================================
   HEADER
========================================================================== */

.ride-case__header {
  margin-bottom:
    clamp(42px, 7vw, 72px) !important;
}


.ride-case__topline {

  display: grid !important;

  gap: 12px !important;

  padding-bottom:
    16px !important;

  border-bottom:
    1px solid var(--ride-border) !important;
}


.ride-case__brand,
.ride-case__period {

  display: inline-flex !important;

  align-items: center !important;

  gap: 10px !important;

  width: fit-content !important;
  max-width: 100% !important;

  color:
    var(--ride-muted) !important;

  font-size:
    clamp(10px, 1.5vw, 12px) !important;

  font-weight:
    800 !important;

  letter-spacing:
    .11em !important;

  line-height:
    1.4 !important;

  text-transform:
    uppercase !important;
}


.ride-case__brand {
  color:
    var(--ride-white) !important;
}


.ride-case__brand::before {

  content:
    "" !important;

  width:
    28px !important;

  height:
    3px !important;

  flex:
    0 0 auto !important;

  background:
    var(--ride-yellow) !important;

  border-radius:
    999px !important;
}


.ride-case__period::before {

  content:
    "" !important;

  width:
    8px !important;

  height:
    8px !important;

  flex:
    0 0 auto !important;

  background:
    var(--ride-red) !important;

  border-radius:
    50% !important;

  box-shadow:
    0 0 0 6px rgb(196 5 5 / 15%) !important;
}


/* ==========================================================================
   HERO
========================================================================== */

.ride-case__hero {

  max-width:
    1050px !important;

  padding-top:
    clamp(34px, 6vw, 70px) !important;
}


.ride-case__eyebrow,
.ride-section__index {

  display:
    block !important;

  color:
    var(--ride-yellow) !important;

  font-size:
    clamp(10px, 1.5vw, 13px) !important;

  font-weight:
    850 !important;

  letter-spacing:
    .13em !important;

  line-height:
    1.45 !important;

  text-transform:
    uppercase !important;
}


.ride-case__eyebrow {
  margin-bottom:
    14px !important;
}


.ride-case__hero h2 {

  max-width:
    990px !important;

  color:
    var(--ride-white) !important;

  font-size:
    clamp(38px, 7.5vw, 80px) !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.06em !important;

  line-height:
    .98 !important;

  text-wrap:
    balance !important;

  overflow-wrap:
    anywhere !important;
}


.ride-case__hero h2 span {

  display:
    block !important;

  margin-top:
    .02em !important;

  color:
    var(--ride-yellow) !important;
}


.ride-case__hero p {

  max-width:
    790px !important;

  margin-top:
    clamp(20px, 3vw, 28px) !important;

  color:
    var(--ride-muted) !important;

  font-size:
    clamp(15px, 2vw, 17px) !important;

  line-height:
    1.78 !important;

  overflow-wrap:
    anywhere !important;
}


/* ==========================================================================
   OVERVIEW — 4 CARDS
========================================================================== */

.ride-overview {

  display:
    grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap:
    14px !important;

  width:
    100% !important;

  margin-bottom:
    clamp(42px, 6vw, 66px) !important;

  padding:
    0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  list-style:
    none !important;
}


.ride-overview__item {

  position:
    relative !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  min-width:
    0 !important;

  min-height:
    158px !important;

  padding:
    clamp(21px, 3vw, 28px) !important;

  overflow:
    hidden !important;

  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 4.5%),
      transparent 62%
    ),
    var(--ride-surface-2) !important;

  border:
    1px solid var(--ride-border) !important;

  border-radius:
    0 18px 0 18px !important;

  box-shadow:
    0 10px 30px rgb(0 0 0 / 20%) !important;

  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    border-color .32s ease,
    background .32s ease,
    box-shadow .32s ease !important;
}


.ride-overview__item::before {

  content:
    "" !important;

  position:
    absolute !important;

  top:
    0 !important;

  left:
    0 !important;

  width:
    100% !important;

  height:
    2px !important;

  background:
    linear-gradient(
      90deg,
      rgb(251 185 0 / 72%),
      transparent
    ) !important;

  opacity:
    .55 !important;

  transition:
    opacity .3s ease,
    transform .3s ease !important;
}


.ride-overview__item::after {

  content:
    "" !important;

  position:
    absolute !important;

  right:
    -60px !important;

  bottom:
    -75px !important;

  width:
    150px !important;

  height:
    150px !important;

  background:
    var(--ride-yellow) !important;

  border-radius:
    50% !important;

  filter:
    blur(62px) !important;

  opacity:
    .10 !important;

  pointer-events:
    none !important;

  transition:
    transform .45s ease,
    opacity .45s ease !important;
}


.ride-overview__item--driver::after {
  opacity:
    .16 !important;
}


.ride-overview__item > * {

  position:
    relative !important;

  z-index:
    1 !important;
}


/* hover */

.ride-overview__item:hover {

  transform:
    translateY(-6px) !important;

  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 6%),
      transparent 62%
    ),
    var(--ride-surface-3) !important;

  border-color:
    var(--ride-border-light) !important;

  box-shadow:
    0 18px 42px rgb(0 0 0 / 28%) !important;
}


.ride-overview__item:hover::before {

  opacity:
    1 !important;

  transform:
    scaleX(1.04) !important;
}


.ride-overview__item:hover::after {

  transform:
    scale(1.25) !important;

  opacity:
    .16 !important;
}


.ride-overview__label {

  min-height:
    38px !important;

  color:
    var(--ride-muted) !important;

  font-size:
    11px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .08em !important;

  line-height:
    1.45 !important;

  text-transform:
    uppercase !important;
}


.ride-overview__value {

  margin-top:
    auto !important;

  color:
    var(--ride-yellow) !important;

  font-size:
    clamp(31px, 4vw, 46px) !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

  transition:
    transform .3s ease,
    color .3s ease !important;
}


.ride-overview__item--driver
.ride-overview__value {

  color:
    var(--ride-yellow-soft) !important;
}


.ride-overview__item:hover
.ride-overview__value {

  transform:
    translateX(2px) !important;
}


.ride-overview__detail {

  margin-top:
    11px !important;

  color:
    var(--ride-text) !important;

  font-size:
    11.5px !important;

  line-height:
    1.55 !important;

  overflow-wrap:
    anywhere !important;
}


/* ==========================================================================
   SECTIONS
========================================================================== */

.ride-section {

  padding:
    clamp(42px, 7vw, 78px) 0 !important;

  border-top:
    1px solid var(--ride-border) !important;
}


.ride-section__heading {

  display:
    grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(260px,430px) !important;

  gap:
    28px !important;

  align-items:
    end !important;

  margin-bottom:
    clamp(30px,4vw,44px) !important;
}


.ride-section__index {

  margin-bottom:
    10px !important;
}


.ride-section__heading h3 {

  color:
    var(--ride-white) !important;

  font-size:
    clamp(26px,4vw,44px) !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.04em !important;

  line-height:
    1.06 !important;

  overflow-wrap:
    anywhere !important;
}


.ride-section__heading p {

  color:
    var(--ride-muted) !important;

  font-size:
    14px !important;

  line-height:
    1.78 !important;

  overflow-wrap:
    anywhere !important;
}


/* ==========================================================================
   GROWTH GRID
========================================================================== */

.ride-growth-grid {

  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0,1fr)) !important;

  gap:
    16px !important;
}


.ride-growth-card {

  position:
    relative !important;

  min-width:
    0 !important;

  padding:
    clamp(22px,3.5vw,30px) !important;

  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 4%),
      transparent 60%
    ),
    var(--ride-surface-2) !important;

  border:
    1px solid var(--ride-border) !important;

  border-left:
    3px solid var(--ride-yellow) !important;

  border-radius:
    0 var(--ride-radius) 0 var(--ride-radius) !important;

  box-shadow:
    var(--ride-shadow) !important;

  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease !important;
}


.ride-growth-card--rides {
  border-left-color:
    var(--ride-white) !important;
}


.ride-growth-card--budget {
  border-left-color:
    var(--ride-yellow-soft) !important;
}


.ride-growth-card:hover {

  transform:
    translateY(-5px) !important;

  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 6%),
      transparent 62%
    ),
    var(--ride-surface-3) !important;

  border-color:
    var(--ride-border-light) !important;

  box-shadow:
    0 18px 40px rgb(0 0 0 / 28%) !important;
}


.ride-growth-card h4 {

  color:
    var(--ride-muted) !important;

  font-size:
    11px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .1em !important;

  text-transform:
    uppercase !important;
}


.ride-growth-card__row {

  display:
    grid !important;

  grid-template-columns:
    auto minmax(0,1fr) !important;

  gap:
    18px !important;

  align-items:
    end !important;

  margin-top:
    20px !important;
}


.ride-growth-card__row > strong {

  color:
    var(--ride-yellow) !important;

  font-size:
    clamp(36px,5vw,56px) !important;

  font-weight:
    900 !important;

  line-height:
    .9 !important;
}


.ride-growth-card--rides
.ride-growth-card__row > strong {

  color:
    var(--ride-white) !important;
}


.ride-growth-card--budget
.ride-growth-card__row > strong {

  color:
    var(--ride-yellow-soft) !important;
}


.ride-growth-card__row div {

  min-width:
    0 !important;

  padding-left:
    16px !important;

  border-left:
    1px solid var(--ride-border-light) !important;
}


.ride-growth-card__row b,
.ride-growth-card__row span {

  display:
    block !important;

  overflow-wrap:
    anywhere !important;
}


.ride-growth-card__row b {

  color:
    var(--ride-white) !important;

  font-size:
    16px !important;
}


.ride-growth-card__row span {

  margin-top:
    4px !important;

  color:
    var(--ride-muted) !important;

  font-size:
    11px !important;

  line-height:
    1.5 !important;
}


.ride-section__note {

  margin-top:
    18px !important;

  padding:
    18px 20px !important;

  color:
    var(--ride-text) !important;

  background:
    rgb(251 185 0 / 7%) !important;

  border:
    1px solid rgb(251 185 0 / 23%) !important;

  border-radius:
    0 14px 0 14px !important;

  font-size:
    13px !important;

  line-height:
    1.7 !important;
}


.ride-section__note strong {
  color:
    var(--ride-yellow-soft) !important;
}


/* ==========================================================================
   TRAJECTORY
========================================================================== */

.ride-trajectory {

  margin-top:
    24px !important;

  padding:
    clamp(15px,2.5vw,24px) !important;

  overflow:
    hidden !important;

  background:
    var(--ride-surface) !important;

  border:
    1px solid var(--ride-border) !important;

  border-radius:
    0 24px 0 24px !important;

  box-shadow:
    var(--ride-shadow) !important;
}


.ride-trajectory__top {

  display:
    flex !important;

  justify-content:
    space-between !important;

  align-items:
    center !important;

  gap:
    18px !important;

  margin-bottom:
    14px !important;
}


.ride-trajectory__title {

  display:
    inline-flex !important;

  align-items:
    center !important;

  gap:
    10px !important;

  min-width:
    0 !important;

  color:
    var(--ride-white) !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;
}


.ride-trajectory__icon {

  display:
    inline-flex !important;

  align-items:
    end !important;

  gap:
    2px !important;

  flex:
    0 0 auto !important;

  height:
    16px !important;
}


.ride-trajectory__icon i {

  width:
    3px !important;

  background:
    var(--ride-yellow) !important;

  border-radius:
    2px !important;
}


.ride-trajectory__icon i:nth-child(1) {
  height: 6px !important;
}

.ride-trajectory__icon i:nth-child(2) {
  height: 11px !important;
}

.ride-trajectory__icon i:nth-child(3) {
  height: 16px !important;
}


.ride-trajectory__legend {

  display:
    flex !important;

  flex-wrap:
    wrap !important;

  justify-content:
    flex-end !important;

  gap:
    10px 16px !important;

  list-style:
    none !important;
}


.ride-trajectory__legend li {

  display:
    inline-flex !important;

  align-items:
    center !important;

  gap:
    7px !important;

  color:
    var(--ride-muted) !important;

  font-size:
    11px !important;
}


.ride-trajectory__key {

  width:
    10px !important;

  height:
    10px !important;

  flex:
    0 0 auto !important;

  border-radius:
    50% !important;
}


.ride-trajectory__key--riders {

  background:
    var(--ride-yellow) !important;

  box-shadow:
    0 0 12px rgb(251 185 0 / 65%) !important;
}


.ride-trajectory__key--rides {

  background:
    var(--ride-white) !important;

  box-shadow:
    0 0 12px rgb(255 255 255 / 45%) !important;
}


.ride-chart-desktop {
  display:
    block !important;
}


.ride-chart {

  display:
    block !important;

  width:
    100% !important;

  height:
    auto !important;
}


.ride-timeline,
.ride-trajectory__summary {
  display:
    none !important;
}


.ride-chart__grid {
  opacity:
    .9 !important;
}


.ride-chart__axis {
  font-variant-numeric:
    tabular-nums !important;
}


.ride-chart__axis--left {
  fill:
    #c2c2c8 !important;
}


.ride-chart__axis--right {
  fill:
    var(--ride-white) !important;
}


.ride-chart__quarters {
  fill:
    var(--ride-text) !important;
}


/* ==========================================================================
   CHART ANIMATION
========================================================================== */

.ride-chart__line {

  stroke-dasharray:
    1 !important;

  stroke-dashoffset:
    0 !important;
}


.ride-chart__area {

  opacity:
    1 !important;

  transform:
    scaleX(1) !important;

  transform-box:
    fill-box !important;

  transform-origin:
    left center !important;
}


.ride-js-ready
.ride-trajectory:not(.is-visible)
.ride-chart__line {

  stroke-dashoffset:
    1 !important;
}


.ride-js-ready
.ride-trajectory:not(.is-visible)
.ride-chart__area {

  opacity:
    0 !important;

  transform:
    scaleX(0) !important;
}


.ride-trajectory.is-visible
.ride-chart__line--riders {

  animation:
    ride-line-draw
    2.2s
    .25s
    cubic-bezier(.25,.8,.25,1)
    forwards !important;
}


.ride-trajectory.is-visible
.ride-chart__line--rides {

  animation:
    ride-line-draw
    2.2s
    .45s
    cubic-bezier(.25,.8,.25,1)
    forwards !important;
}


.ride-trajectory.is-visible
.ride-chart__area--riders {

  animation:
    ride-area-reveal
    1.8s
    .55s
    ease
    forwards !important;
}


.ride-trajectory.is-visible
.ride-chart__area--rides {

  animation:
    ride-area-reveal
    1.8s
    .75s
    ease
    forwards !important;
}


/* ==========================================================================
   MARKET REACH
========================================================================== */

.ride-reach {

  display:
    grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  overflow:
    hidden !important;

  background:
    var(--ride-border) !important;

  border:
    1px solid var(--ride-border) !important;

  border-radius:
    0 22px 0 22px !important;

  box-shadow:
    var(--ride-shadow) !important;
}


.ride-reach__part {

  min-width:
    0 !important;

  min-height:
    165px !important;

  padding:
    clamp(24px,4vw,36px) !important;
}


.ride-reach__part:first-of-type {

  color:
    var(--ride-bg) !important;

  background:
    var(--ride-yellow) !important;
}


.ride-reach__part:last-of-type {

  color:
    var(--ride-white) !important;

  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 5%),
      transparent
    ),
    var(--ride-surface-2) !important;
}


.ride-reach__part strong,
.ride-reach__part span {

  display:
    block !important;
}


.ride-reach__part strong {

  font-size:
    clamp(40px,7vw,74px) !important;

  font-weight:
    900 !important;

  line-height:
    .95 !important;

  overflow-wrap:
    anywhere !important;
}


.ride-reach__part:last-of-type strong {

  color:
    var(--ride-yellow-soft) !important;
}


.ride-reach__part span {

  margin-top:
    12px !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .08em !important;

  line-height:
    1.45 !important;

  text-transform:
    uppercase !important;
}


/* ==========================================================================
   COMPOSITION
========================================================================== */

.ride-composition {

  margin:
    26px 0 !important;

  padding:
    20px !important;

  background:
    var(--ride-surface-2) !important;

  border:
    1px solid var(--ride-border) !important;

  border-radius:
    0 16px 0 16px !important;
}


.ride-composition__header {

  display:
    flex !important;

  flex-wrap:
    wrap !important;

  justify-content:
    space-between !important;

  gap:
    8px 18px !important;

  margin-bottom:
    12px !important;

  font-size:
    12.5px !important;

  line-height:
    1.4 !important;
}


.ride-composition__title {

  color:
    var(--ride-white) !important;

  font-weight:
    800 !important;
}


.ride-composition__total {

  color:
    var(--ride-yellow-soft) !important;

  font-weight:
    700 !important;
}


.ride-composition__bar {

  display:
    flex !important;

  width:
    100% !important;

  height:
    26px !important;

  overflow:
    hidden !important;

  border:
    1px solid var(--ride-border-light) !important;

  border-radius:
    6px !important;
}


.ride-composition__segment {

  height:
    100% !important;

  flex:
    0 0 var(--comp-width) !important;
}


.ride-composition__segment--demand {
  background:
    var(--ride-yellow) !important;
}

.ride-composition__segment--supply {
  background:
    #e0a500 !important;
}

.ride-composition__segment--ops {
  background:
    #b88800 !important;
}

.ride-composition__segment--fulfill {
  background:
    #8f6a00 !important;
}


.ride-composition__legend {

  display:
    flex !important;

  flex-wrap:
    wrap !important;

  gap:
    8px 18px !important;

  margin-top:
    12px !important;

  color:
    var(--ride-muted) !important;

  font-size:
    11.5px !important;

  line-height:
    1.5 !important;
}


.ride-composition__legend span {

  display:
    inline-flex !important;

  align-items:
    center !important;

  gap:
    6px !important;
}


.ride-comp-dot {

  display:
    inline-block !important;

  width:
    8px !important;

  height:
    8px !important;

  flex:
    0 0 auto !important;

  border-radius:
    50% !important;
}


.ride-comp-dot--demand {
  background:
    var(--ride-yellow) !important;
}

.ride-comp-dot--supply {
  background:
    #e0a500 !important;
}

.ride-comp-dot--ops {
  background:
    #b88800 !important;
}

.ride-comp-dot--fulfill {
  background:
    #8f6a00 !important;
}


/* ==========================================================================
   MARKET LIST
========================================================================== */

.ride-market-list {

  display:
    grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:
    12px !important;

  margin-top:
    24px !important;

  list-style:
    none !important;
}


.ride-market-item {

  display:
    grid !important;

  grid-template-columns:
    minmax(0,1fr) auto !important;

  gap:
    18px !important;

  align-items:
    center !important;

  min-width:
    0 !important;

  min-height:
    102px !important;

  padding:
    20px !important;

  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 4%),
      transparent
    ),
    var(--ride-surface-2) !important;

  border:
    1px solid var(--ride-border) !important;

  border-left:
    3px solid var(--ride-yellow) !important;

  border-radius:
    0 14px 0 14px !important;

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease !important;
}


.ride-market-item:hover {

  transform:
    translateY(-3px) !important;

  border-color:
    var(--ride-border-light) !important;

  background:
    var(--ride-surface-3) !important;

  box-shadow:
    0 14px 34px rgb(0 0 0 / 24%) !important;
}


.ride-market-item div {

  min-width:
    0 !important;
}


.ride-market-item div strong,
.ride-market-item div span {

  display:
    block !important;

  overflow-wrap:
    anywhere !important;
}


.ride-market-item div strong {

  color:
    var(--ride-white) !important;

  font-size:
    14px !important;

  line-height:
    1.4 !important;
}


.ride-market-item div span {

  margin-top:
    5px !important;

  color:
    var(--ride-muted) !important;

  font-size:
    11px !important;

  line-height:
    1.5 !important;
}


.ride-market-item > strong {

  color:
    var(--ride-yellow-soft) !important;

  font-size:
    24px !important;

  font-weight:
    900 !important;

  white-space:
    nowrap !important;
}


.ride-liquidity {

  margin-top:
    18px !important;

  padding:
    18px 20px !important;

  color:
    var(--ride-text) !important;

  background:
    rgb(251 185 0 / 8%) !important;

  border:
    1px solid rgb(251 185 0 / 27%) !important;

  border-radius:
    0 14px 0 14px !important;

  font-size:
    13px !important;

  line-height:
    1.7 !important;
}


.ride-liquidity strong {

  color:
    var(--ride-yellow-soft) !important;
}


/* ==========================================================================
   MULTIPLIERS
========================================================================== */

.ride-multipliers {

  display:
    grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:
    16px !important;
}


.ride-multiplier-card {

  --ride-card-accent:
    var(--ride-yellow);

  min-width:
    0 !important;

  min-height:
    185px !important;

  padding:
    28px 18px !important;

  background:
    var(--ride-surface-2) !important;

  border:
    1px solid var(--ride-border) !important;

  border-top:
    3px solid var(--ride-card-accent) !important;

  border-radius:
    0 var(--ride-radius) 0 var(--ride-radius) !important;

  text-align:
    center !important;

  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}


.ride-multiplier-card--budget {
  --ride-card-accent:
    var(--ride-yellow-soft);
}


.ride-multiplier-card--success {
  --ride-card-accent:
    var(--ride-yellow);
}


.ride-multiplier-card:hover {

  transform:
    translateY(-5px) !important;

  border-color:
    var(--ride-card-accent) !important;

  background:
    var(--ride-surface-3) !important;

  box-shadow:
    0 16px 36px rgb(0 0 0 / 24%) !important;
}


.ride-multiplier-card h4 {

  min-height:
    38px !important;

  color:
    var(--ride-muted) !important;

  font-size:
    11px !important;

  font-weight:
    850 !important;

  letter-spacing:
    .1em !important;

  line-height:
    1.45 !important;

  text-transform:
    uppercase !important;
}


.ride-multiplier-card strong,
.ride-multiplier-card small {

  display:
    block !important;
}


.ride-multiplier-card strong {

  margin-top:
    18px !important;

  color:
    var(--ride-card-accent) !important;

  font-size:
    clamp(38px,5vw,58px) !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;
}


.ride-multiplier-card small {

  margin-top:
    14px !important;

  color:
    var(--ride-muted) !important;

  font-size:
    11px !important;

  line-height:
    1.45 !important;
}


/* ==========================================================================
   INSIGHTS
========================================================================== */

.ride-insights {

  display:
    grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:
    18px !important;

  padding-top:
    clamp(42px,7vw,78px) !important;

  border-top:
    1px solid var(--ride-border) !important;
}


.ride-insight {

  min-width:
    0 !important;

  min-height:
    300px !important;

  padding:
    clamp(26px,4vw,38px) !important;

  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 5%),
      transparent 62%
    ),
    var(--ride-surface-2) !important;

  border:
    1px solid var(--ride-border-light) !important;

  border-left:
    4px solid var(--ride-yellow) !important;

  border-radius:
    0 var(--ride-radius) 0 var(--ride-radius) !important;

  box-shadow:
    var(--ride-shadow) !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease !important;
}


.ride-insight:hover {

  transform:
    translateY(-4px) !important;

  box-shadow:
    0 20px 44px rgb(0 0 0 / 27%) !important;
}


.ride-insight--challenge {
  border-left-color:
    var(--ride-red) !important;
}


.ride-insight--activity {
  border-left-color:
    var(--ride-yellow) !important;
}


.ride-insight h3 {

  color:
    var(--ride-white) !important;

  font-size:
    clamp(18px,2.2vw,23px) !important;

  font-weight:
    900 !important;

  line-height:
    1.15 !important;
}


.ride-insight blockquote {

  margin-top:
    26px !important;

  padding-left:
    18px !important;

  color:
    var(--ride-text) !important;

  border-left:
    2px solid var(--ride-yellow) !important;

  font-size:
    14px !important;

  font-style:
    italic !important;

  line-height:
    1.9 !important;
}


.ride-insight--challenge
blockquote {
  border-color:
    var(--ride-red) !important;
}


.ride-insight >
p:not(.ride-insight__summary) {

  margin-top:
    22px !important;

  color:
    var(--ride-yellow-soft) !important;

  font-size:
    13px !important;
}


.ride-insight__summary {

  margin-top:
    24px !important;

  padding:
    16px 18px !important;

  color:
    var(--ride-text) !important;

  background:
    #242429 !important;

  border:
    1px solid var(--ride-border-light) !important;

  border-radius:
    0 12px 0 12px !important;

  font-size:
    12px !important;

  line-height:
    1.7 !important;
}


.ride-insight__summary strong {
  color:
    var(--ride-white) !important;
}


/* ==========================================================================
   COMPLIANCE
========================================================================== */

.ride-compliance {

  margin-top:
    40px !important;

  padding:
    clamp(20px,3.5vw,28px) !important;

  background:
    #08080a !important;

  border:
    1px solid #24242a !important;

  border-left:
    3px solid var(--ride-yellow) !important;

  border-radius:
    0 14px 0 14px !important;

  color:
    #8a8a92 !important;

  font-size:
    12.5px !important;

  line-height:
    1.65 !important;
}


.ride-compliance__title {

  display:
    block !important;

  margin-bottom:
    14px !important;

  color:
    var(--ride-white) !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .05em !important;

  text-transform:
    uppercase !important;
}


.ride-compliance__list {

  display:
    grid !important;

  grid-template-columns:
    minmax(0,1fr) !important;

  gap:
    8px !important;

  list-style:
    none !important;
}


.ride-compliance__list li {

  min-width:
    0 !important;

  overflow-wrap:
    anywhere !important;
}


.ride-compliance__list strong {

  color:
    var(--ride-yellow) !important;

  font-weight:
    800 !important;
}


/* ==========================================================================
   TAKEAWAY
========================================================================== */

.ride-takeaway {

  display:
    grid !important;

  grid-template-columns:
    auto minmax(0,1fr) !important;

  gap:
    18px !important;

  align-items:
    start !important;

  margin-top:
    clamp(42px,7vw,78px) !important;

  padding:
    24px 26px !important;

  color:
    var(--ride-text) !important;

  background:
    linear-gradient(
      90deg,
      rgb(251 185 0 / 10%),
      rgb(196 5 5 / 6%)
    ) !important;

  border:
    1px solid rgb(251 185 0 / 28%) !important;

  border-radius:
    0 16px 0 16px !important;

  font-size:
    14px !important;

  line-height:
    1.7 !important;
}


.ride-takeaway span {

  color:
    var(--ride-yellow) !important;

  font-size:
    24px !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;
}


/* ==========================================================================
   ENTRANCE ANIMATION
========================================================================== */

.ride-js-ready .ride-reveal {

  opacity:
    0 !important;

  transform:
    translate3d(0, 30px, 0)
    scale(.985) !important;

  filter:
    blur(1.5px) !important;

  will-change:
    opacity,
    transform,
    filter !important;

  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1),
    filter .72s cubic-bezier(.22,1,.36,1) !important;

  transition-delay:
    var(--ride-delay, 0ms) !important;
}


.ride-js-ready .ride-reveal.is-visible {

  opacity:
    1 !important;

  transform:
    translate3d(0,0,0)
    scale(1) !important;

  filter:
    blur(0) !important;
}


/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width: 1000px) {

  .ride-overview {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  .ride-multipliers {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  .ride-section__heading {
    grid-template-columns:
      1fr !important;

    align-items:
      start !important;
  }


  .ride-growth-grid {
    grid-template-columns:
      1fr !important;
  }

}


/* ==========================================================================
   TABLET / SMALL TABLET
========================================================================== */

@media (max-width: 767px) {

  .onqol-ride-case {

    padding:
      24px 16px 32px !important;

    border-radius:
      0 18px 0 18px !important;

    background-size:
      auto,
      auto,
      38px 38px,
      38px 38px,
      auto !important;
  }


  /* ----------------------------------------------------------
     TOPLINE
  ---------------------------------------------------------- */

  .ride-case__topline {

    gap:
      9px !important;

    padding-bottom:
      13px !important;
  }


  .ride-case__brand,
  .ride-case__period {

    gap:
      8px !important;

    font-size:
      9.5px !important;

    letter-spacing:
      .085em !important;

    line-height:
      1.45 !important;
  }


  .ride-case__brand::before {

    width:
      20px !important;

    height:
      2px !important;
  }


  .ride-case__period::before {

    width:
      6px !important;

    height:
      6px !important;

    box-shadow:
      0 0 0 5px rgb(196 5 5 / 13%) !important;
  }


  /* ----------------------------------------------------------
     HERO
  ---------------------------------------------------------- */

  .ride-case__hero {

    padding-top:
      32px !important;
  }


  .ride-case__eyebrow {

    margin-bottom:
      12px !important;

    font-size:
      10px !important;

    letter-spacing:
      .11em !important;
  }


  .ride-case__hero h2 {

    max-width:
      100% !important;

    font-size:
      clamp(34px, 10.7vw, 52px) !important;

    line-height:
      1.0 !important;

    letter-spacing:
      -.045em !important;
  }


  .ride-case__hero h2 span {
    margin-top:
      3px !important;
  }


  .ride-case__hero p {

    margin-top:
      18px !important;

    font-size:
      14px !important;

    line-height:
      1.75 !important;
  }


  /* ----------------------------------------------------------
     OVERVIEW
  ---------------------------------------------------------- */

  .ride-overview {

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:
      10px !important;

    margin-bottom:
      42px !important;
  }


  .ride-overview__item {

    min-height:
      150px !important;

    padding:
      18px !important;

    border-radius:
      0 15px 0 15px !important;
  }


  .ride-overview__label {

    min-height:
      34px !important;

    font-size:
      9.5px !important;

    line-height:
      1.35 !important;
  }


  .ride-overview__value {

    font-size:
      clamp(27px, 8vw, 38px) !important;
  }


  .ride-overview__detail {

    margin-top:
      9px !important;

    font-size:
      10px !important;

    line-height:
      1.45 !important;
  }


  /* ----------------------------------------------------------
     SECTIONS
  ---------------------------------------------------------- */

  .ride-section {

    padding:
      42px 0 !important;
  }


  .ride-section__heading {

    gap:
      18px !important;

    margin-bottom:
      26px !important;
  }


  .ride-section__index {

    margin-bottom:
      8px !important;

    font-size:
      10px !important;
  }


  .ride-section__heading h3 {

    font-size:
      clamp(25px, 8.4vw, 38px) !important;

    line-height:
      1.07 !important;
  }


  .ride-section__heading p {

    font-size:
      13px !important;

    line-height:
      1.7 !important;
  }


  /* ----------------------------------------------------------
     GROWTH
  ---------------------------------------------------------- */

  .ride-growth-grid {

    gap:
      11px !important;
  }


  .ride-growth-card {

    padding:
      20px !important;

    border-left-width:
      2px !important;

    border-radius:
      0 15px 0 15px !important;
  }


  .ride-growth-card__row {

    grid-template-columns:
      minmax(0, auto)
      minmax(0,1fr) !important;

    gap:
      14px !important;

    margin-top:
      16px !important;
  }


  .ride-growth-card__row > strong {

    font-size:
      clamp(34px, 10vw, 48px) !important;
  }


  .ride-growth-card__row div {

    padding-left:
      12px !important;
  }


  .ride-growth-card__row b {

    font-size:
      14px !important;

    line-height:
      1.35 !important;
  }


  .ride-growth-card__row span {

    font-size:
      10px !important;

    line-height:
      1.45 !important;
  }


  .ride-section__note {

    margin-top:
      14px !important;

    padding:
      15px 16px !important;

    font-size:
      11.5px !important;

    line-height:
      1.65 !important;
  }


  /* ----------------------------------------------------------
     TRAJECTORY
  ---------------------------------------------------------- */

  .ride-trajectory {

    margin-top:
      18px !important;

    padding:
      14px !important;

    border-radius:
      0 18px 0 18px !important;
  }


  .ride-trajectory__top {

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    gap:
      12px !important;

    margin-bottom:
      12px !important;
  }


  .ride-trajectory__title {

    font-size:
      12px !important;

    line-height:
      1.4 !important;
  }


  .ride-trajectory__legend {

    width:
      100% !important;

    justify-content:
      flex-start !important;

    gap:
      8px 14px !important;
  }


  .ride-trajectory__legend li {

    font-size:
      10px !important;
  }


  .ride-chart-desktop {
    display:
      none !important;
  }


  /* ----------------------------------------------------------
     MOBILE TIMELINE
  ---------------------------------------------------------- */

  .ride-timeline {

    position:
      relative !important;

    display:
      grid !important;

    gap:
      14px !important;

    padding:
      4px 0 4px 24px !important;

    margin:
      0 !important;

    list-style:
      none !important;
  }


  .ride-timeline::before {

    content:
      "" !important;

    position:
      absolute !important;

    top:
      10px !important;

    bottom:
      10px !important;

    left:
      6px !important;

    width:
      2px !important;

    background:
      linear-gradient(
        var(--ride-yellow),
        var(--ride-white)
      ) !important;

    border-radius:
      999px !important;

    opacity:
      .75 !important;
  }


  .ride-timeline__item {

    position:
      relative !important;

    min-width:
      0 !important;
  }


  .ride-timeline__dot {

    position:
      absolute !important;

    top:
      21px !important;

    left:
      -24px !important;

    width:
      12px !important;

    height:
      12px !important;

    background:
      var(--ride-surface) !important;

    border:
      3px solid var(--ride-yellow) !important;

    border-radius:
      50% !important;

    box-shadow:
      0 0 0 4px rgb(251 185 0 / 10%) !important;
  }


  .ride-timeline__card {

    min-width:
      0 !important;

    padding:
      17px !important;

    background:
      linear-gradient(
        145deg,
        rgb(255 255 255 / 5%),
        transparent
      ),
      var(--ride-surface-2) !important;

    border:
      1px solid var(--ride-border) !important;

    border-radius:
      0 14px 0 14px !important;

    transition:
      transform .25s ease,
      border-color .25s ease,
      background .25s ease !important;
  }


  .ride-timeline__card h4 {

    color:
      var(--ride-white) !important;

    font-size:
      16px !important;

    font-weight:
      900 !important;

    line-height:
      1.25 !important;
  }


  .ride-timeline__card h4 span {

    display:
      inline-block !important;

    margin-left:
      5px !important;

    color:
      var(--ride-yellow) !important;

    font-size:
      9px !important;

    font-weight:
      800 !important;

    letter-spacing:
      .07em !important;

    line-height:
      1.4 !important;

    text-transform:
      uppercase !important;
  }


  .ride-timeline__card dl {

    display:
      grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:
      8px !important;

    margin-top:
      14px !important;
  }


  .ride-timeline__card dl div {

    min-width:
      0 !important;

    padding:
      11px !important;

    background:
      #232327 !important;

    border:
      1px solid var(--ride-border-light) !important;

    border-radius:
      8px !important;
  }


  .ride-timeline__card dt {

    color:
      var(--ride-muted) !important;

    font-size:
      9px !important;

    line-height:
      1.35 !important;

    text-transform:
      uppercase !important;
  }


  .ride-timeline__card dd {

    margin-top:
      4px !important;

    color:
      var(--ride-yellow-soft) !important;

    font-size:
      clamp(16px, 4.8vw, 20px) !important;

    font-weight:
      900 !important;

    line-height:
      1.15 !important;

    overflow-wrap:
      anywhere !important;
  }


  .ride-timeline__card
  dl div:last-child dd {

    color:
      var(--ride-white) !important;
  }


  /* ----------------------------------------------------------
     MOBILE SUMMARY
  ---------------------------------------------------------- */

  .ride-trajectory__summary {

    display:
      grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:
      8px !important;

    margin-top:
      16px !important;
  }


  .ride-trajectory__summary article {

    min-width:
      0 !important;

    padding:
      13px !important;

    background:
      #242429 !important;

    border:
      1px solid var(--ride-border-light) !important;

    border-radius:
      0 11px 0 11px !important;
  }


  .ride-trajectory__summary span,
  .ride-trajectory__summary strong {

    display:
      block !important;
  }


  .ride-trajectory__summary span {

    color:
      var(--ride-muted) !important;

    font-size:
      8.5px !important;

    line-height:
      1.4 !important;

    text-transform:
      uppercase !important;
  }


  .ride-trajectory__summary strong {

    margin-top:
      5px !important;

    color:
      var(--ride-yellow) !important;

    font-size:
      21px !important;

    line-height:
      1 !important;
  }


  .ride-trajectory__summary article:last-child strong {

    color:
      var(--ride-white) !important;
  }


  /* ----------------------------------------------------------
     REACH
  ---------------------------------------------------------- */

  .ride-reach {

    grid-template-columns:
      1fr !important;

    border-radius:
      0 18px 0 18px !important;
  }


  .ride-reach__part {

    min-height:
      0 !important;

    padding:
      22px 20px !important;
  }


  .ride-reach__part strong {

    font-size:
      clamp(38px, 12vw, 58px) !important;

    line-height:
      .95 !important;
  }


  .ride-reach__part span {

    margin-top:
      9px !important;

    font-size:
      10px !important;

    line-height:
      1.45 !important;
  }


  /* ----------------------------------------------------------
     COMPOSITION
  ---------------------------------------------------------- */

  .ride-composition {

    margin:
      18px 0 !important;

    padding:
      16px !important;

    border-radius:
      0 14px 0 14px !important;
  }


  .ride-composition__header {

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    gap:
      5px !important;

    font-size:
      11px !important;
  }


  .ride-composition__bar {

    height:
      21px !important;

    border-radius:
      5px !important;
  }


  .ride-composition__legend {

    display:
      grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:
      8px 12px !important;

    margin-top:
      10px !important;

    font-size:
      9.5px !important;

    line-height:
      1.4 !important;
  }


  .ride-composition__legend span {
    min-width:
      0 !important;
  }


  /* ----------------------------------------------------------
     MARKET LIST
  ---------------------------------------------------------- */

  .ride-market-list {

    grid-template-columns:
      1fr !important;

    gap:
      9px !important;

    margin-top:
      18px !important;
  }


  .ride-market-item {

    grid-template-columns:
      minmax(0,1fr) auto !important;

    gap:
      12px !important;

    min-height:
      82px !important;

    padding:
      15px !important;

    border-left-width:
      2px !important;

    border-radius:
      0 13px 0 13px !important;
  }


  .ride-market-item div strong {

    font-size:
      12px !important;
  }


  .ride-market-item div span {

    margin-top:
      4px !important;

    font-size:
      9.5px !important;

    line-height:
      1.45 !important;
  }


  .ride-market-item > strong {

    font-size:
      20px !important;
  }


  .ride-liquidity {

    margin-top:
      14px !important;

    padding:
      14px 15px !important;

    font-size:
      11.5px !important;

    line-height:
      1.65 !important;
  }


  /* ----------------------------------------------------------
     MULTIPLIERS
  ---------------------------------------------------------- */

  .ride-multipliers {

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:
      10px !important;
  }


  .ride-multiplier-card {

    min-height:
      154px !important;

    padding:
      20px 12px !important;

    border-radius:
      0 14px 0 14px !important;
  }


  .ride-multiplier-card h4 {

    min-height:
      32px !important;

    font-size:
      9px !important;

    line-height:
      1.4 !important;
  }


  .ride-multiplier-card strong {

    margin-top:
      13px !important;

    font-size:
      clamp(30px, 9vw, 43px) !important;
  }


  .ride-multiplier-card small {

    margin-top:
      10px !important;

    font-size:
      9.5px !important;

    line-height:
      1.4 !important;
  }


  /* ----------------------------------------------------------
     INSIGHTS
  ---------------------------------------------------------- */

  .ride-insights {

    grid-template-columns:
      1fr !important;

    gap:
      12px !important;

    padding-top:
      42px !important;
  }


  .ride-insight {

    min-height:
      0 !important;

    padding:
      21px !important;

    border-left-width:
      3px !important;

    border-radius:
      0 15px 0 15px !important;
  }


  .ride-insight h3 {

    font-size:
      18px !important;

    line-height:
      1.2 !important;
  }


  .ride-insight blockquote {

    margin-top:
      18px !important;

    padding-left:
      13px !important;

    font-size:
      12px !important;

    line-height:
      1.75 !important;
  }


  .ride-insight >
  p:not(.ride-insight__summary) {

    margin-top:
      17px !important;

    font-size:
      11px !important;
  }


  .ride-insight__summary {

    margin-top:
      17px !important;

    padding:
      13px 14px !important;

    font-size:
      10.5px !important;

    line-height:
      1.65 !important;
  }


  /* ----------------------------------------------------------
     COMPLIANCE
  ---------------------------------------------------------- */

  .ride-compliance {

    margin-top:
      30px !important;

    padding:
      18px 16px !important;

    border-left-width:
      2px !important;

    font-size:
      10.5px !important;

    line-height:
      1.65 !important;
  }


  .ride-compliance__title {

    margin-bottom:
      12px !important;

    font-size:
      10.5px !important;

    line-height:
      1.4 !important;
  }


  .ride-compliance__list {

    gap:
      7px !important;
  }


  /* ----------------------------------------------------------
     TAKEAWAY
  ---------------------------------------------------------- */

  .ride-takeaway {

    grid-template-columns:
      auto minmax(0,1fr) !important;

    gap:
      11px !important;

    margin-top:
      42px !important;

    padding:
      18px !important;

    font-size:
      11.5px !important;

    line-height:
      1.65 !important;
  }


  .ride-takeaway span {

    font-size:
      20px !important;
  }


  /* ----------------------------------------------------------
     MOBILE ENTRANCE
  ---------------------------------------------------------- */

  .ride-js-ready .ride-reveal {

    transform:
      translate3d(0,22px,0)
      scale(.99) !important;

    filter:
      blur(1px) !important;

    transition-duration:
      .58s !important;
  }

}


/* ==========================================================================
   SMALL PHONES
========================================================================== */

@media (max-width: 480px) {

  .onqol-ride-case {

    padding:
      21px 13px 29px !important;
  }


  .ride-case__brand,
  .ride-case__period {

    font-size:
      8.5px !important;

    letter-spacing:
      .065em !important;
  }


  .ride-case__hero {

    padding-top:
      29px !important;
  }


  .ride-case__hero h2 {

    font-size:
      clamp(31px, 10.3vw, 45px) !important;

    letter-spacing:
      -.04em !important;
  }


  .ride-case__hero p {

    font-size:
      13px !important;

    line-height:
      1.72 !important;
  }


  .ride-overview {

    grid-template-columns:
      1fr !important;

    gap:
      9px !important;
  }


  .ride-overview__item {

    min-height:
      0 !important;

    padding:
      17px !important;
  }


  .ride-overview__label {

    min-height:
      0 !important;

    margin-bottom:
      11px !important;
  }


  .ride-overview__value {

    font-size:
      34px !important;
  }


  .ride-overview__detail {

    max-width:
      250px !important;
  }


  .ride-section {

    padding:
      38px 0 !important;
  }


  .ride-section__heading h3 {

    font-size:
      clamp(24px, 8.1vw, 34px) !important;
  }


  .ride-growth-card__row {

    grid-template-columns:
      1fr !important;

    gap:
      12px !important;

    align-items:
      start !important;
  }


  .ride-growth-card__row div {

    padding-left:
      11px !important;
  }


  .ride-growth-card__row > strong {

    font-size:
      43px !important;
  }


  .ride-composition__legend {

    grid-template-columns:
      1fr !important;
  }


  .ride-timeline {

    padding-left:
      22px !important;
  }


  .ride-timeline__dot {

    left:
      -22px !important;
  }


  .ride-timeline__card {

    padding:
      15px !important;
  }


  .ride-timeline__card h4 {

    font-size:
      15px !important;
  }


  .ride-timeline__card h4 span {

    display:
      block !important;

    margin:
      5px 0 0 !important;
  }


  .ride-timeline__card dl {

    grid-template-columns:
      1fr !important;

    gap:
      7px !important;
  }


  .ride-trajectory__summary {

    grid-template-columns:
      1fr !important;
  }


  .ride-multipliers {

    grid-template-columns:
      1fr !important;

    gap:
      9px !important;
  }


  .ride-multiplier-card {

    min-height:
      145px !important;

    padding:
      19px !important;
  }


  .ride-takeaway {

    grid-template-columns:
      1fr !important;

    gap:
      8px !important;
  }

}


/* ==========================================================================
   TOUCH DEVICES
========================================================================== */

@media (hover: none) {

  .ride-overview__item:hover,
  .ride-growth-card:hover,
  .ride-market-item:hover,
  .ride-multiplier-card:hover,
  .ride-insight:hover,
  .ride-timeline__card:hover {

    transform:
      none !important;
  }

}


/* ==========================================================================
   REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .ride-js-ready .ride-reveal {

    opacity:
      1 !important;

    transform:
      none !important;

    filter:
      none !important;

    transition:
      none !important;
  }


  .ride-overview__item,
  .ride-growth-card,
  .ride-market-item,
  .ride-multiplier-card,
  .ride-insight,
  .ride-timeline__card {

    transition:
      none !important;
  }


  .ride-trajectory.is-visible
  .ride-chart__line--riders,
  .ride-trajectory.is-visible
  .ride-chart__line--rides,
  .ride-trajectory.is-visible
  .ride-chart__area--riders,
  .ride-trajectory.is-visible
  .ride-chart__area--rides {

    animation:
      none !important;
  }

}


/* ==========================================================================
   KEYFRAMES
========================================================================== */

@keyframes ride-line-draw {

  to {
    stroke-dashoffset: 0;
  }

}


@keyframes ride-area-reveal {

  to {
    opacity: 1;
    transform: scaleX(1);
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3db75ed */.sm-case-wrapper {
  --sm-gold: #FBB900;
  --sm-red: #C40505;
  --sm-bg: #080808;
  --sm-card: #0E0E11;
  --sm-border: #26262C;
  --sm-text: #A3A3A3;
  position: relative !important;
  overflow: hidden !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 48px 24px !important;
  background:
    radial-gradient(circle at 92% 5%, rgba(251,185,0,.09), transparent 25%),
    radial-gradient(circle at 0% 55%, rgba(196,5,5,.07), transparent 26%),
    var(--sm-bg) !important;
  color: #fff !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  box-sizing: border-box !important;
}

.sm-case-wrapper::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .35 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
}

.sm-case-wrapper *,
.sm-case-wrapper *::before,
.sm-case-wrapper *::after {
  box-sizing: border-box !important;
}

.sm-section-block,
.sm-roadmap-outer-container,
.sm-mandate-outer-container {
  position: relative !important;
  z-index: 1 !important;
}

.sm-section-block {
  margin-bottom: 62px !important;
}

.sm-eyebrow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  color: var(--sm-gold) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.sm-eyebrow-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  border: 1px solid var(--sm-gold) !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.sm-h2-title {
  max-width: 780px !important;
  margin: 0 0 20px !important;
  color: #fff !important;
  font-size: clamp(25px, 4vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -.03em !important;
}

.sm-body-text {
  max-width: 700px !important;
  margin: 0 0 16px !important;
  color: var(--sm-text) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

/* Hero */
.sm-hero-split-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 28px !important;
}

.sm-client-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 25px !important;
  background: linear-gradient(145deg, #131318, #0B0B0E) !important;
  border: 1px solid #2A2A31 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.24) !important;
}

.sm-client-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--sm-red), var(--sm-gold), transparent) !important;
}

.sm-client-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 17px !important;
}

.sm-car-icon-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  flex-shrink: 0 !important;
  background: rgba(251,185,0,.08) !important;
  border: 1px solid rgba(251,185,0,.3) !important;
  border-radius: 10px !important;
}

.sm-client-name {
  margin: 0 0 3px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.sm-client-subtag {
  margin: 0 !important;
  color: var(--sm-gold) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.sm-client-desc {
  margin: 0 0 17px !important;
  color: var(--sm-text) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.sm-client-alert-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 14px !important;
  background: rgba(0,0,0,.35) !important;
  border: 1px solid #29292F !important;
  border-radius: 9px !important;
}

.sm-alert-symbol {
  color: var(--sm-gold) !important;
  font-size: 14px !important;
}

.sm-client-alert-box p {
  margin: 0 !important;
  color: #AAAAB0 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

.sm-client-alert-box strong {
  color: #fff !important;
}

.sm-quote-box {
  margin: 22px 0 !important;
  padding: 18px 21px !important;
  background: linear-gradient(90deg, #151519, #101014) !important;
  border: 1px solid #27272D !important;
  border-left: 3px solid var(--sm-gold) !important;
  border-radius: 0 10px 10px 0 !important;
}

.sm-quote-box p {
  margin: 0 !important;
  color: #D8D8DC !important;
  font-size: 13.5px !important;
  font-style: italic !important;
  line-height: 1.65 !important;
}

.sm-quote-author {
  display: block !important;
  margin-top: 8px !important;
  color: var(--sm-gold) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

/* Challenges */
.sm-challenges-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.sm-challenge-card {
  padding: 22px !important;
  background: var(--sm-card) !important;
  border: 1px solid #232328 !important;
  border-radius: 11px !important;
  transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease !important;
}

.sm-challenge-card:hover {
  transform: translateY(-5px) !important;
  background: #121216 !important;
  border-color: rgba(251,185,0,.45) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.27) !important;
}

.sm-card-icon-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.sm-challenge-title {
  margin: 0 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.sm-challenge-text {
  margin: 0 !important;
  color: var(--sm-text) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
}

/* Roadmap */
.sm-roadmap-outer-container,
.sm-mandate-outer-container {
  padding: 30px 25px !important;
  background: rgba(9,9,12,.95) !important;
  border: 1px solid #26262B !important;
  border-radius: 14px !important;
}

.sm-roadmap-outer-container {
  margin-bottom: 62px !important;
  border-color: rgba(251,185,0,.24) !important;
}

.sm-stages-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  margin-top: 22px !important;
}

.sm-stage-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 240px !important;
  padding: 20px !important;
  background: var(--sm-card) !important;
  border: 1px solid #232328 !important;
  border-radius: 11px !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

.sm-stage-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(251,185,0,.5) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.25) !important;
}

.sm-stage-topline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.sm-stage-name {
  color: var(--sm-gold) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
}

.sm-stage-badge {
  padding: 3px 8px !important;
  color: #B4B4B9 !important;
  background: #17171C !important;
  border: 1px solid #2B2B31 !important;
  border-radius: 5px !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
}

.sm-stage-heading {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.sm-stage-desc {
  margin: 0 0 22px !important;
  color: var(--sm-text) !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}

.sm-stage-footer {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  color: var(--sm-gold) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

/* Objectives */
.sm-objectives-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

.sm-objective-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 14px 15px !important;
  background: var(--sm-card) !important;
  border: 1px solid #232328 !important;
  border-radius: 9px !important;
  transition: transform .3s ease, background .3s ease, border-color .3s ease !important;
}

.sm-objective-item:hover {
  transform: translateY(-3px) !important;
  background: #121216 !important;
  border-color: rgba(251,185,0,.45) !important;
}

.sm-check-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 19px !important;
  height: 19px !important;
  flex-shrink: 0 !important;
  color: #080808 !important;
  background: var(--sm-gold) !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.sm-objective-item p {
  margin: 0 !important;
  color: #D4D4D8 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

/* Scroll reveal */
.sm-reveal {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1) !important;
}

.sm-reveal.sm-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.sm-delay-1 { transition-delay: .08s !important; }
.sm-delay-2 { transition-delay: .16s !important; }
.sm-delay-3 { transition-delay: .24s !important; }

@media (min-width: 768px) {
  .sm-challenges-grid,
  .sm-objectives-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 860px) {
  .sm-hero-split-grid {
    grid-template-columns: 420px minmax(0, 1fr) !important;
    gap: 38px !important;
  }

  .sm-stages-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .sm-objectives-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .sm-case-wrapper {
    padding: 32px 16px !important;
  }

  .sm-roadmap-outer-container,
  .sm-mandate-outer-container {
    padding: 24px 18px !important;
  }

  .sm-stage-topline {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}
/* فصل الأقسام عن بعض بصريًا */

.sm-case-wrapper {
  background: transparent !important;
  padding: 24px 0 !important;
}

.sm-case-wrapper::before {
  display: none !important;
}

.sm-section-block {
  margin-bottom: 82px !important;
}

/* القسم الأول: كرتان منفصلان */
.sm-hero-split-grid {
  align-items: stretch !important;
}

.sm-hero-split-grid > div:last-child {
  padding: 28px !important;
  background: linear-gradient(145deg, #111116, #0c0c0f) !important;
  border: 1px solid #26262c !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18) !important;
}

/* لا تجعل عنوان القسم الثاني مرتبطًا بخلفية الكروت */
.sm-challenges-grid {
  margin-top: 26px !important;
}

/* خلفية مستقلة للقسم الثالث */
.sm-roadmap-outer-container {
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 82px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(251, 185, 0, 0.09), transparent 30%),
    #0c0c0f !important;
  border: 1px solid rgba(251, 185, 0, 0.28) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2) !important;
}

/* خلفية مستقلة للقسم الرابع */
.sm-mandate-outer-container {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(196, 5, 5, 0.08), transparent 28%),
    #0c0c0f !important;
  border: 1px solid #28282e !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2) !important;
}

/* خط صغير يفصل كل Section داخليًا */
.sm-roadmap-outer-container::before,
.sm-mandate-outer-container::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 26px !important;
  left: 26px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #FBB900, transparent) !important;
  opacity: .8 !important;
}

/* مسافة مريحة على الموبايل */
@media (max-width: 640px) {
  .sm-section-block,
  .sm-roadmap-outer-container {
    margin-bottom: 56px !important;
  }

  .sm-hero-split-grid > div:last-child {
    padding: 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2a011a5 *//* =========================================================
   RIDE-HAILING PLATFORM — 6 PILLARS
   CSS ONLY
   ضع هذا في:
   Elementor → Advanced → Custom CSS
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars,
.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars * ,
.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars *::before,
.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars *::after {
  box-sizing: border-box !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars {
  --ride-bg: #050505 !important;
  --ride-surface: #0d0d0e !important;
  --ride-card: #171719 !important;
  --ride-card-hover: #1e1e21 !important;

  --ride-line: rgba(255, 255, 255, 0.11) !important;

  --ride-gold: #fbb900 !important;

  --ride-white: #f7f7f5 !important;
  --ride-muted: #a1a1a6 !important;

  --ride-radius-lg: 24px !important;
  --ride-radius-md: 16px !important;

  --ride-ease:
    cubic-bezier(0.22, 0.8, 0.28, 1) !important;

  width: 100% !important;

  overflow: clip !important;

  padding:
    clamp(64px, 8vw, 116px)
    clamp(16px, 4vw, 68px) !important;

  color: var(--ride-white) !important;

  background:
    radial-gradient(
      circle at 86% 7%,
      rgba(251, 185, 0, 0.09),
      transparent 25%
    ),
    radial-gradient(
      circle at 5% 92%,
      rgba(80, 145, 190, 0.06),
      transparent 27%
    ),
    var(--ride-bg) !important;

  font-family:
    Inter,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
}


/* =========================================================
   ENTRANCE ANIMATION
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars--awaiting-reveal {
  opacity: 0 !important;

  transform:
    translateY(24px) !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars--visible {
  opacity: 1 !important;

  transform: none !important;

  transition:
    opacity 0.75s var(--ride-ease),
    transform 0.75s var(--ride-ease) !important;
}


/* =========================================================
   MAIN SHELL
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__shell {
  width:
    min(1380px, 100%) !important;

  margin-inline: auto !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__intro {
  max-width: 980px !important;

  margin:
    0 auto
    clamp(44px, 6vw, 78px) !important;

  text-align: center !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__eyebrow {
  display: inline-flex !important;

  align-items: center !important;

  gap: 10px !important;

  margin:
    0 0 16px !important;

  color:
    var(--ride-gold) !important;

  font-size: 12px !important;

  font-weight: 800 !important;

  letter-spacing:
    0.13em !important;

  text-transform:
    uppercase !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__pulse {
  width: 22px !important;
  height: 16px !important;

  flex: none !important;

  color: var(--ride-gold) !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__title {
  max-width: 920px !important;

  margin: 0 auto !important;

  color:
    var(--ride-white) !important;

  font-size:
    clamp(36px, 4.25vw, 64px) !important;

  font-weight: 800 !important;

  line-height: 1.02 !important;

  letter-spacing:
    -0.045em !important;

  text-wrap: balance !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__lede {
  max-width: 850px !important;

  margin:
    20px auto 0 !important;

  color:
    var(--ride-muted) !important;

  font-size:
    clamp(15px, 1.25vw, 19px) !important;

  line-height: 1.65 !important;

  text-wrap: pretty !important;
}


/* =========================================================
   MAIN GRID
   DESKTOP:
   LEFT = TABS
   RIGHT = ACTIVE PANEL
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__list {
  display: grid !important;

  grid-template-columns:
    minmax(330px, 0.78fr)
    minmax(0, 1.22fr) !important;

  grid-auto-rows:
    minmax(92px, auto) !important;

  align-items: stretch !important;

  gap:
    12px clamp(28px, 3.5vw, 52px) !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__item {
  display: contents !important;
}


/* =========================================================
   TAB
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab {
  appearance: none !important;

  position: relative !important;

  grid-column: 1 !important;

  display: grid !important;

  grid-template-columns:
    52px
    minmax(0, 1fr) !important;

  align-items: center !important;

  gap: 16px !important;

  width: 100% !important;

  min-width: 0 !important;

  min-height: 92px !important;

  padding:
    16px 42px 16px 18px !important;

  border:
    1px solid var(--ride-line) !important;

  border-radius:
    var(--ride-radius-md) !important;

  background:
    rgba(10, 10, 11, 0.9) !important;

  color:
    var(--ride-white) !important;

  cursor: pointer !important;

  font: inherit !important;

  text-align: left !important;

  touch-action:
    manipulation !important;

  transition:
    border-color 0.22s ease,
    background-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}


/* =========================================================
   TAB ARROW
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab::after {
  content: "" !important;

  position: absolute !important;

  right: 18px !important;

  top: 50% !important;

  width: 8px !important;
  height: 8px !important;

  border-top:
    2px solid currentColor !important;

  border-right:
    2px solid currentColor !important;

  color:
    #66666b !important;

  transform:
    translateY(-50%)
    rotate(45deg) !important;

  transition:
    color 0.22s ease,
    transform 0.22s ease !important;
}


/* =========================================================
   ACTIVE TAB
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab[aria-expanded="true"] {
  border-color:
    rgba(251, 185, 0, 0.62) !important;

  background:
    linear-gradient(
      105deg,
      #191919,
      #121213
    ) !important;

  box-shadow:
    inset 4px 0 0 var(--ride-gold),
    0 12px 28px
      rgba(0, 0, 0, 0.24) !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab[aria-expanded="true"]::after {
  color:
    var(--ride-gold) !important;
}


/* =========================================================
   FOCUS
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab:focus-visible {
  outline:
    2px solid var(--ride-gold) !important;

  outline-offset:
    3px !important;
}


/* =========================================================
   TAB ICON
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-icon {
  display: grid !important;

  place-items: center !important;

  width: 52px !important;
  height: 52px !important;

  border-radius: 12px !important;

  background:
    #202023 !important;

  color:
    #909096 !important;

  transition:
    color 0.22s ease,
    background-color 0.22s ease !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab[aria-expanded="true"]
.ride-pillars__tab-icon {
  background:
    var(--ride-gold) !important;

  color:
    #080808 !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-icon svg {
  width: 25px !important;
  height: 25px !important;

  fill: none !important;

  stroke:
    currentColor !important;

  stroke-width:
    1.8 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;
}


/* =========================================================
   TAB TYPOGRAPHY
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-kicker,
.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-title,
.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-subtitle {
  display: block !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-kicker {
  margin-bottom: 4px !important;

  color:
    var(--ride-gold) !important;

  font-size: 11px !important;

  font-weight: 800 !important;

  letter-spacing:
    0.08em !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-title {
  color:
    #dedee0 !important;

  font-size: 15px !important;

  font-weight: 750 !important;

  line-height: 1.28 !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-subtitle {
  margin-top: 4px !important;

  color:
    #85858b !important;

  font-size: 12px !important;

  line-height: 1.35 !important;
}


/* =========================================================
   ACTIVE PANEL
   RIGHT SIDE DESKTOP
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__panel {
  position: sticky !important;

  top: 24px !important;

  grid-column: 2 !important;

  grid-row:
    1 / span 6 !important;

  align-self: start !important;

  min-height: 612px !important;

  padding:
    clamp(30px, 3.5vw, 48px) !important;

  border:
    1px solid rgba(251, 185, 0, 0.26) !important;

  border-radius:
    var(--ride-radius-lg) !important;

  background:
    linear-gradient(
      145deg,
      rgba(20, 20, 21, 0.98),
      rgba(6, 6, 7, 0.99)
    ) !important;

  box-shadow:
    0 28px 76px
      rgba(0, 0, 0, 0.42),

    inset 0 1px 0
      rgba(255, 255, 255, 0.045) !important;
}


/* =========================================================
   HIDDEN PANEL
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars--enhanced
.ride-pillars__panel[hidden] {
  display: none !important;
}


/* =========================================================
   ACTIVE PANEL ANIMATION
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars--enhanced
.ride-pillars__panel--active {
  animation:
    ride-panel-in 0.42s
    var(--ride-ease)
    both !important;
}


@keyframes ride-panel-in {

  from {
    opacity: 0 !important;

    transform:
      translateY(12px) !important;
  }

  to {
    opacity: 1 !important;

    transform: none !important;
  }

}


/* =========================================================
   PANEL TYPOGRAPHY
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__panel-kicker {
  margin:
    0 0 12px !important;

  color:
    var(--ride-gold) !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  letter-spacing:
    0.09em !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__panel-title {
  margin: 0 !important;

  color:
    var(--ride-white) !important;

  font-size:
    clamp(28px, 2.6vw, 42px) !important;

  font-weight:
    800 !important;

  line-height:
    1.1 !important;

  letter-spacing:
    -0.03em !important;

  text-wrap:
    balance !important;
}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__panel-subtitle {
  margin:
    10px 0 0 !important;

  color:
    var(--ride-muted) !important;

  font-size:
    15px !important;

  line-height:
    1.5 !important;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__divider {
  height: 1px !important;

  margin:
    26px 0 28px !important;

  background:
    var(--ride-line) !important;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__summary {
  margin:
    0 0 28px !important;

  color:
    #dddddf !important;

  font-size:
    clamp(16px, 1.25vw, 19px) !important;

  line-height:
    1.65 !important;

  text-wrap:
    pretty !important;
}


/* =========================================================
   HIGHLIGHTS TITLE
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__highlights-title {
  margin:
    0 0 14px !important;

  color:
    var(--ride-gold) !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  letter-spacing:
    0.06em !important;

  text-transform:
    uppercase !important;
}


/* =========================================================
   HIGHLIGHTS LIST
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__highlights {
  display: grid !important;

  gap: 11px !important;

  margin: 0 !important;

  padding: 0 !important;

  list-style: none !important;
}


/* =========================================================
   HIGHLIGHT CARD
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__highlight {
  display: grid !important;

  grid-template-columns:
    20px
    minmax(0, 1fr) !important;

  align-items: start !important;

  gap: 12px !important;

  padding:
    16px 18px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.065) !important;

  border-radius:
    14px !important;

  background:
    var(--ride-card) !important;

  color:
    #d5d5d8 !important;

  font-size:
    14px !important;

  line-height:
    1.52 !important;

  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease !important;
}


/* =========================================================
   CHECK ICON
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__check {
  display: grid !important;

  place-items: center !important;

  width: 20px !important;
  height: 20px !important;

  margin-top: 1px !important;

  border:
    2px solid
    rgba(251, 185, 0, 0.8) !important;

  border-radius:
    999px !important;

  color:
    var(--ride-gold) !important;

  font-size:
    10px !important;

  font-weight:
    900 !important;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab:hover {

    border-color:
      rgba(251, 185, 0, 0.36) !important;

    background:
      #111113 !important;

    transform:
      translateX(3px) !important;
  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__highlight:hover {

    border-color:
      rgba(251, 185, 0, 0.2) !important;

    background:
      var(--ride-card-hover) !important;

    transform:
      translateY(-2px) !important;
  }

}


/* =========================================================
   TABLET
   <= 900px
   يتحول التصميم إلى Accordion
   ========================================================= */

@media (max-width: 900px) {

  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars {

    padding-inline:
      clamp(14px, 4vw, 30px) !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__intro {

    margin-bottom:
      36px !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__list {

    display: block !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__item {

    display: block !important;

    margin-bottom:
      10px !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab {

    min-height:
      82px !important;

    grid-template-columns:
      44px
      minmax(0, 1fr) !important;

    gap:
      13px !important;

    padding:
      13px 42px 13px 14px !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab::after {

    transform:
      translateY(-65%)
      rotate(135deg) !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab[aria-expanded="true"]::after {

    transform:
      translateY(-30%)
      rotate(-45deg) !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-icon {

    width: 44px !important;
    height: 44px !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-icon svg {

    width: 22px !important;
    height: 22px !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__panel {

    position: static !important;

    min-height: 0 !important;

    margin-top:
      8px !important;

    padding:
      clamp(24px, 5vw, 34px) !important;

    border-radius:
      18px !important;

    box-shadow:
      0 18px 42px
      rgba(0, 0, 0, 0.35) !important;

  }

}


/* =========================================================
   MOBILE
   <= 560px
   ========================================================= */

@media (max-width: 560px) {

  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars {

    padding-block:
      58px !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__title {

    font-size:
      clamp(32px, 10.5vw, 44px) !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__lede {

    margin-top:
      16px !important;

    font-size:
      14px !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__eyebrow {

    font-size:
      10px !important;

    letter-spacing:
      0.09em !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab {

    min-height:
      72px !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__tab-subtitle {

    display: none !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__panel-title {

    font-size:
      clamp(25px, 7.5vw, 32px) !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__panel-subtitle {

    font-size:
      14px !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__summary {

    font-size:
      15px !important;

  }


  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars__highlight {

    padding:
      14px !important;

    font-size:
      14px !important;

  }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars,
  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars *,
  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars *::before,
  .elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    transition-duration:
      0.01ms !important;

  }

}


/* =========================================================
   FALLBACK
   إذا لم يعمل JavaScript لأي سبب
   ========================================================= */

.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars:not(.ride-pillars--enhanced)
.ride-pillars__list {

  display: block !important;

}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars:not(.ride-pillars--enhanced)
.ride-pillars__item {

  display: block !important;

  margin-bottom:
    18px !important;

}


.elementor-9840 .elementor-element.elementor-element-2a011a5 .ride-pillars:not(.ride-pillars--enhanced)
.ride-pillars__panel {

  position: static !important;

  display: block !important;

  min-height: 0 !important;

  margin-top: 8px !important;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-45e2f5b *//* ==========================================================================
   MARKETPLACE TRUST & LIQUIDITY
   ONQOL — REFINED PREMIUM CARD SYSTEM
========================================================================== */

.trust-drivers-wrapper,
.trust-drivers-wrapper * {
  box-sizing: border-box !important;
}

.trust-drivers-wrapper {
  --trust-red: #C40505;
  --trust-red-soft: rgba(196, 5, 5, 0.08);
  --trust-red-border: rgba(196, 5, 5, 0.28);

  --trust-bg: #000000;
  --trust-container: #050507;
  --trust-card: #0b0b0e;
  --trust-card-hover: #101014;

  --trust-border: #1b1b21;
  --trust-border-hover: #303038;

  --trust-white: #ffffff;
  --trust-muted: #8e8e93;
  --trust-desc: #77777e;

  width: 100% !important;
  padding: 40px 20px !important;

  background: var(--trust-bg) !important;
  color: var(--trust-white) !important;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}


/* ==========================================================================
   MAIN CONTAINER
========================================================================== */

.trust-drivers-container {
  width: 100% !important;
  max-width: 1320px !important;

  margin: 0 auto !important;

  padding:
    clamp(32px, 5vw, 58px)
    clamp(20px, 4vw, 48px) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.018) 0%,
      rgba(255,255,255,0) 42%
    ),
    var(--trust-container) !important;

  border: 1px solid #1c1c22 !important;
  border-radius: 20px !important;

  box-shadow:
    0 18px 55px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.015) !important;
}


/* ==========================================================================
   HEADER
========================================================================== */

.trust-header {
  width: 100% !important;
  max-width: 860px !important;

  margin:
    0 auto
    clamp(34px, 5vw, 52px)
    auto !important;

  text-align: center !important;
}

.trust-eyebrow {
  display: inline-block !important;

  margin: 0 0 13px !important;

  color: var(--trust-red) !important;

  font-size: clamp(10px, 1.3vw, 12px) !important;
  font-weight: 900 !important;

  letter-spacing: .15em !important;
  line-height: 1.3 !important;

  text-transform: uppercase !important;
}

.trust-title {
  margin: 0 0 14px !important;

  color: #ffffff !important;

  font-size: clamp(28px, 4.3vw, 44px) !important;
  font-weight: 900 !important;

  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

.trust-subtitle {
  max-width: 720px !important;

  margin: 0 auto !important;

  color: var(--trust-muted) !important;

  font-size: clamp(13px, 1.7vw, 15px) !important;
  line-height: 1.7 !important;
}


/* ==========================================================================
   GRID
========================================================================== */

.trust-cards-grid {
  display: grid !important;

  grid-template-columns:
    repeat(1, minmax(0, 1fr)) !important;

  gap: 14px !important;

  align-items: stretch !important;
}


/* 2 columns */
@media (min-width: 580px) {
  .trust-cards-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}


/* 3 columns */
@media (min-width: 900px) {
  .trust-cards-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}


/* 5 columns */
@media (min-width: 1180px) {
  .trust-cards-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    gap: 14px !important;
  }
}


/* ==========================================================================
   CARD
========================================================================== */

.trust-card {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;

  min-height: 285px !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  text-align: center !important;

  padding:
    28px 20px 25px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.012),
      rgba(255,255,255,0)
    ),
    var(--trust-card) !important;

  border:
    1px solid var(--trust-border) !important;

  border-radius: 15px !important;

  overflow: hidden !important;

  transition:
    transform .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease !important;
}


/* Very subtle top highlight */
.trust-card::before {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  left: 14% !important;
  right: 14% !important;

  height: 1px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.06),
      transparent
    ) !important;
}


/* Hover */
.trust-card:hover {
  transform: translateY(-4px) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,0)
    ),
    var(--trust-card-hover) !important;

  border-color: var(--trust-border-hover) !important;

  box-shadow:
    0 14px 32px rgba(0,0,0,.22) !important;
}


/* ==========================================================================
   ICON
========================================================================== */

.trust-icon-badge {
  position: relative !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 0 20px !important;

  background:
    linear-gradient(
      145deg,
      rgba(196,5,5,.10),
      rgba(196,5,5,.025)
    ) !important;

  border:
    1px solid var(--trust-red-border) !important;

  border-radius: 13px !important;

  flex-shrink: 0 !important;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    transform .25s ease !important;
}

.trust-card:hover .trust-icon-badge {
  background:
    linear-gradient(
      145deg,
      rgba(196,5,5,.16),
      rgba(196,5,5,.045)
    ) !important;

  border-color:
    rgba(196,5,5,.42) !important;

  transform: translateY(-2px) !important;
}


/* ==========================================================================
   CARD TITLE
========================================================================== */

.trust-card-title {
  width: 100% !important;

  min-height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 0 13px !important;

  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 800 !important;

  line-height: 1.35 !important;

  letter-spacing: -.005em !important;

  text-align: center !important;
}


/* ==========================================================================
   CARD DESCRIPTION
========================================================================== */

.trust-card-desc {
  width: 100% !important;
  max-width: 205px !important;

  flex: 1 1 auto !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  margin: 0 auto !important;

  color: var(--trust-desc) !important;

  font-size: 12.5px !important;
  font-weight: 400 !important;

  line-height: 1.65 !important;

  text-align: center !important;
}


/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width: 899px) {

  .trust-card {
    min-height: 270px !important;
    padding: 27px 22px 24px !important;
  }

  .trust-card-desc {
    max-width: 280px !important;
  }
}


/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width: 579px) {

  .trust-drivers-wrapper {
    padding: 25px 12px !important;
  }

  .trust-drivers-container {
    padding:
      30px 14px !important;

    border-radius: 17px !important;
  }

  .trust-header {
    margin-bottom: 30px !important;
  }

  .trust-title {
    font-size: 27px !important;
  }

  .trust-subtitle {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .trust-cards-grid {
    grid-template-columns:
      1fr !important;

    gap: 10px !important;
  }

  .trust-card {
    min-height: 0 !important;

    padding:
      24px 22px 23px !important;
  }

  .trust-icon-badge {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;

    margin-bottom: 17px !important;
  }

  .trust-card-title {
    min-height: auto !important;

    margin-bottom: 10px !important;

    font-size: 15px !important;
  }

  .trust-card-desc {
    max-width: 430px !important;

    flex: initial !important;

    font-size: 12.5px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fd96722 *//* ==========================================================================
   ONQOL FAQ — REFINED PREMIUM ACCORDION
========================================================================== */

.sm-faq-wrapper {
  --faq-gold: #FBB900;
  --faq-bg: #000000;
  --faq-container: #050507;
  --faq-item: #0A0A0D;
  --faq-item-hover: #101014;
  --faq-border: #1B1B21;
  --faq-border-hover: #2A2A31;
  --faq-border-open: rgba(251,185,0,.34);

  width: 100% !important;
  padding: 40px 20px !important;

  background: var(--faq-bg) !important;
  color: #FFFFFF !important;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;

  box-sizing: border-box !important;
}

.sm-faq-wrapper *,
.sm-faq-wrapper *::before,
.sm-faq-wrapper *::after {
  box-sizing: border-box !important;
}


/* ==========================================================================
   CONTAINER
========================================================================== */

.sm-faq-container {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;

  padding:
    clamp(32px, 5vw, 58px)
    clamp(18px, 4vw, 48px) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018) 0%,
      rgba(255,255,255,0) 35%
    ),
    var(--faq-container) !important;

  border: 1px solid #1A1A20 !important;
  border-radius: 20px !important;

  box-shadow:
    0 18px 55px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.015) !important;
}


/* ==========================================================================
   HEADER
========================================================================== */

.sm-faq-header {
  width: 100% !important;
  max-width: 760px !important;

  margin:
    0 auto
    clamp(32px, 5vw, 46px)
    auto !important;

  text-align: center !important;
}

.sm-faq-eyebrow {
  display: inline-block !important;

  margin-bottom: 12px !important;

  color: var(--faq-gold) !important;

  font-size: clamp(10px, 1.3vw, 12px) !important;
  font-weight: 800 !important;

  letter-spacing: .15em !important;
  line-height: 1.4 !important;

  text-transform: uppercase !important;
}

.sm-faq-title {
  margin: 0 0 14px !important;

  color: #FFFFFF !important;

  font-size: clamp(28px, 4.3vw, 42px) !important;
  font-weight: 900 !important;

  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

.sm-faq-subtitle {
  max-width: 700px !important;

  margin: 0 auto !important;

  color: #85858C !important;

  font-size: clamp(13px, 1.7vw, 15px) !important;
  font-weight: 400 !important;

  line-height: 1.7 !important;
}


/* ==========================================================================
   LIST
========================================================================== */

.sm-faq-list {
  display: flex !important;
  flex-direction: column !important;

  gap: 10px !important;

  width: 100% !important;
}


/* ==========================================================================
   FAQ ITEM
========================================================================== */

.sm-faq-item {
  position: relative !important;

  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  background: var(--faq-item) !important;

  border: 1px solid var(--faq-border) !important;
  border-radius: 13px !important;

  overflow: hidden !important;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease !important;
}


/* Left gold indicator */
.sm-faq-item::before {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 2px !important;

  background: var(--faq-gold) !important;

  opacity: 0 !important;

  transition: opacity .25s ease !important;
}


/* Hover */
.sm-faq-item:hover {
  background: var(--faq-item-hover) !important;
  border-color: var(--faq-border-hover) !important;
}


/* Open */
.sm-faq-item[open] {
  background: #0E0E12 !important;

  border-color: var(--faq-border-open) !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.18) !important;
}

.sm-faq-item[open]::before {
  opacity: 1 !important;
}


/* ==========================================================================
   SUMMARY
========================================================================== */

.sm-faq-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;

  min-height: 72px !important;

  padding:
    18px 20px 18px 22px !important;

  gap: 18px !important;

  list-style: none !important;

  cursor: pointer !important;

  user-select: none !important;

  outline: none !important;
}

.sm-faq-summary::-webkit-details-marker {
  display: none !important;
}

.sm-faq-summary::marker {
  display: none !important;
}


/* ==========================================================================
   QUESTION TEXT
========================================================================== */

.sm-faq-q-text {
  flex: 1 1 auto !important;

  color: #F2F2F3 !important;

  font-size: clamp(14px, 1.65vw, 16px) !important;
  font-weight: 700 !important;

  line-height: 1.45 !important;

  transition: color .25s ease !important;
}

.sm-faq-summary:hover .sm-faq-q-text {
  color: #FFFFFF !important;
}

.sm-faq-item[open] .sm-faq-q-text {
  color: var(--faq-gold) !important;
}


/* ==========================================================================
   ICON
========================================================================== */

.sm-faq-icon {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 32px !important;

  width: 32px !important;
  height: 32px !important;

  border-radius: 50% !important;

  background: #151519 !important;
  border: 1px solid #292930 !important;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    transform .28s ease !important;
}


/* Horizontal line */
.sm-faq-icon::before {
  content: "" !important;

  position: absolute !important;

  width: 11px !important;
  height: 1.5px !important;

  border-radius: 2px !important;

  background: var(--faq-gold) !important;
}


/* Vertical line */
.sm-faq-icon::after {
  content: "" !important;

  position: absolute !important;

  width: 1.5px !important;
  height: 11px !important;

  border-radius: 2px !important;

  background: var(--faq-gold) !important;

  transition:
    opacity .2s ease,
    transform .2s ease !important;
}


/* Open = minus */
.sm-faq-item[open] .sm-faq-icon {
  background: var(--faq-gold) !important;
  border-color: var(--faq-gold) !important;

  transform: rotate(180deg) !important;
}

.sm-faq-item[open] .sm-faq-icon::before {
  background: #050505 !important;
}

.sm-faq-item[open] .sm-faq-icon::after {
  background: #050505 !important;

  opacity: 0 !important;

  transform: scaleY(0) !important;
}


/* ==========================================================================
   ANSWER
========================================================================== */

.sm-faq-answer {
  display: block !important;

  padding:
    0 22px 22px 22px !important;

  border-top:
    1px solid rgba(255,255,255,.045) !important;
}

.sm-faq-answer p {
  max-width: 850px !important;

  margin: 16px 0 0 !important;

  color: #97979D !important;

  font-size: clamp(13px, 1.55vw, 14.5px) !important;

  line-height: 1.75 !important;
}


/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width: 767px) {

  .sm-faq-wrapper {
    padding: 24px 12px !important;
  }

  .sm-faq-container {
    padding:
      30px 13px !important;

    border-radius: 17px !important;
  }

  .sm-faq-header {
    margin-bottom: 28px !important;
  }

  .sm-faq-eyebrow {
    font-size: 10px !important;
    letter-spacing: .13em !important;
  }

  .sm-faq-title {
    font-size: 27px !important;
  }

  .sm-faq-subtitle {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .sm-faq-list {
    gap: 9px !important;
  }

  .sm-faq-summary {
    min-height: 64px !important;

    padding:
      15px 14px 15px 17px !important;

    gap: 12px !important;
  }

  .sm-faq-q-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .sm-faq-icon {
    flex-basis: 29px !important;

    width: 29px !important;
    height: 29px !important;
  }

  .sm-faq-icon::before {
    width: 10px !important;
  }

  .sm-faq-icon::after {
    height: 10px !important;
  }

  .sm-faq-answer {
    padding:
      0 17px 18px !important;
  }

  .sm-faq-answer p {
    margin-top: 15px !important;

    font-size: 13px !important;
    line-height: 1.7 !important;
  }
}


/* ==========================================================================
   FOCUS
========================================================================== */

.sm-faq-summary:focus-visible {
  outline: 2px solid var(--faq-gold) !important;
  outline-offset: -2px !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-06bfc1b *//* ==========================================================================
  INTERNAL ONQOL NOTE: COMPLIANCE & CLAIMS VERIFICATION (CSS)
  Palette: Gold Accent (#FBB900) | Dark Surface (#08080a / #0d0d10) | Text (#8e8e96)
========================================================================== */

/* Main Compliance Container Box */
.onqol-compliance-card {
  display: block !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 24px auto !important;
  padding: clamp(18px, 3.5vw, 28px) !important;
  background-color: #08080a !important;
  border: 1px solid #222228 !important;
  border-left: 3px solid #FBB900 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #ffffff !important;
}

.onqol-compliance-card * {
  box-sizing: border-box !important;
}

/* Header Row (Icon + Title) */
.onqol-compliance-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Circular Info Icon */
.onqol-compliance-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background-color: rgba(251, 185, 0, 0.12) !important;
  border: 1px solid rgba(251, 185, 0, 0.3) !important;
  color: #FBB900 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Header Text */
.onqol-compliance-title {
  color: #ffffff !important;
  font-size: clamp(12.5px, 1.6vw, 14px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* 2-Column Responsive Points Grid */
.onqol-compliance-grid {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

@media (min-width: 768px) {
  .onqol-compliance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 28px !important;
  }
}

/* Individual Point Item */
.onqol-compliance-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Point Number (43., 44., ...) */
.onqol-point-num {
  color: #FBB900 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  flex-shrink: 0 !important;
}

/* Point Text */
.onqol-point-text {
  color: #8e8e96 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8ff9a */.elementor-9840 .elementor-element.elementor-element-9e8ff9a {
  background-color: #050505 !important;
  background-image: radial-gradient(circle at 50% 70%, rgba(212, 175, 55, 0.15) 0%, rgba(5, 5, 5, 0) 70%) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0  !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tabs-heading {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  background-color: #0c0c0c !important;
  border: 1px solid #262626 !important;
  border-radius: 9999px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  flex: 1 1 0 !important;
  padding: 0.85rem 1.5rem !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-title:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-title[aria-selected="true"] {
  background-color: #FBB900 !important;
}

.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-title-text {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #a3a3a3 !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-title:hover .e-n-tab-title-text {
  color: #ffffff !important;
}

.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
  color: #000000 !important;
}

.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-icon svg,
.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-icon i {
  width: 18px !important;
  height: 18px !important;
  color: #a3a3a3 !important;
  fill: #a3a3a3 !important;
  transition: color 0.2s ease, fill 0.2s ease !important;
}

.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg,
.elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-title[aria-selected="true"] .e-n-tab-icon i {
  color: #000000 !important;
  fill: #000000 !important;
}

@media (max-width: 767px) {
  .elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tabs-heading {
    flex-direction: column !important;
    border-radius: 1rem !important;
    padding: 0.4rem !important;
  }
  .elementor-9840 .elementor-element.elementor-element-9e8ff9a .e-n-tab-title {
    width: 100% !important;
    border-radius: 0.7rem !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0b3e2e0 *//* ONQOL Partnership Callout Card Style */
.onqol-growth-card {
  background-color: #0d0d0d !important;
  border: 1px solid rgba(251, 185, 0, 0.25) !important;
  border-left: 5px solid #C40505 !important;
  border-radius: 20px !important;
  padding: 2.5rem 3rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 2rem !important;
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  width: 100% !important;
  position: relative !important;
}

/* Badge (أعلى العنوان) */
.onqol-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background-color: rgba(251, 185, 0, 0.12) !important;
  color: #FBB900 !important;
  border: 1px solid rgba(251, 185, 0, 0.35) !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 1rem !important;
}

/* Titles & Subtext */
.onqol-card-content {
  max-width: 650px !important;
}

.onqol-card-title {
  color: #ffffff !important;
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  margin: 0 0 1rem 0 !important;
  letter-spacing: -0.01em !important;
}

.onqol-card-desc {
  color: #a3a3a3 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Buttons Container */
.onqol-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-shrink: 0 !important;
}

/* Secondary Button (Inspect SEO Code) */
.onqol-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: #FBB900 !important;
  border: 1px solid rgba(251, 185, 0, 0.35) !important;
  padding: 0.8rem 1.4rem !important;
  border-radius: 9999px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.onqol-btn-secondary:hover {
  background-color: rgba(251, 185, 0, 0.1) !important;
  border-color: #FBB900 !important;
}

/* Primary Yellow Button (Visit ONQOL Agency) */
.onqol-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background-color: #EAB308 !important;
  color: #000000 !important;
  border: none !important;
  padding: 0.85rem 1.6rem !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
  cursor: pointer !important;
}

.onqol-btn-primary:hover {
  background-color: #FBB900 !important;
}

/* Responsive (للشاشات الصغيرة والتابلت) */
@media (max-width: 900px) {
  .onqol-growth-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 2rem 1.5rem !important;
  }
  .onqol-card-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .onqol-btn-secondary,
  .onqol-btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-16c3f84 */.elementor-case-study-bg {
  background-color: #050505 !important;
  background-image: radial-gradient(circle at 50% 70%, rgba(212, 175, 55, 0.15) 0%, rgba(5, 5, 5, 0) 70%) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.9rem 0.3rem !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: #ffffff !important;
}/* End custom CSS */