.vx-fb { --vx-ease: cubic-bezier(.22, 1, .36, 1); --vx-fb-max: 1040px; width: 100% }

.vx-fb-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; max-width: var(--vx-fb-max);
}
.vx-fb-eyebrow {
  margin: 0 0 26px; font-size: 12px; line-height: 1; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(245, 245, 245, .45);
}
.vx-fb-count {
  margin: 0 0 26px; flex: none; font-size: 12px; line-height: 1; font-weight: 700;
  letter-spacing: .18em; color: rgba(245, 245, 245, .45);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.vx-fb-count-now { color: var(--white) }
.vx-fb-count-slash { margin: 0 5px; opacity: .55 }

.vx-fb-stage {
  position: relative; width: 100%;
  transition: height .5s var(--vx-ease);
}
.vx-fb-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; pointer-events: none }
.vx-fb-item.is-active { opacity: 1; visibility: visible }
.vx-fb-item.is-leaving { opacity: 1; visibility: visible }

.vx-fb-quote {
  margin: 0; max-width: var(--vx-fb-max); color: var(--white);
  font-size: 34px; line-height: 48px; font-weight: 400; letter-spacing: -.01em;
}
.vx-fb-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; max-width: var(--vx-fb-max) }
.vx-fb-stars { display: flex; align-items: center; gap: 5px }
.vx-fb-stars svg { width: 16px; height: 16px; fill: var(--primary); display: block; flex: none }
.vx-fb-sep { flex: none; width: 1px; height: 26px; background-color: rgba(245, 245, 245, .2) }
.vx-fb-who { display: flex; align-items: baseline; flex-wrap: wrap; min-width: 0 }
.vx-fb-name {
  font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: .02em;
  color: var(--white); text-transform: uppercase;
}
.vx-fb-org {
  font-size: 15px; line-height: 1.2; font-weight: 400; letter-spacing: .04em;
  color: rgba(245, 245, 245, .5); text-transform: uppercase;
}
.vx-fb-org::before { content: "\00B7"; margin: 0 9px; color: rgba(245, 245, 245, .3) }

.vx-fb-item[dir="rtl"] { text-align: right }
.vx-fb-item[lang="ar"] .vx-fb-quote {
  font-family: "Noto Naskh Arabic", "Amiri", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  letter-spacing: normal; font-size: 33px; line-height: 60px;
}

.vx-w {
  display: inline-block; position: relative; will-change: opacity, filter, transform;
  opacity: 0; filter: blur(10px); transform: translate3d(0, 20%, 0);
}
.vx-fb-item.is-active .vx-w {
  opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0);
  transition: opacity .6s var(--vx-ease), filter .6s var(--vx-ease), transform .6s var(--vx-ease);
  transition-delay: calc(var(--i) * .04s);
}
.vx-fb-item.is-leaving .vx-w {
  opacity: 0; filter: blur(10px); transform: translate3d(0, -16%, 0);
  transition: opacity .3s var(--vx-ease), filter .3s var(--vx-ease), transform .3s var(--vx-ease);
  transition-delay: calc(var(--i) * var(--out-step, .012s));
}

.vx-fb-stars, .vx-fb-sep, .vx-fb-who { opacity: 0; transform: translate3d(0, 14px, 0) }
.vx-fb-item.is-active .vx-fb-stars,
.vx-fb-item.is-active .vx-fb-sep,
.vx-fb-item.is-active .vx-fb-who {
  opacity: 1; transform: translate3d(0, 0, 0);
  transition: opacity .6s var(--vx-ease), transform .6s var(--vx-ease);
  transition-delay: var(--meta-delay, .22s);
}
.vx-fb-item.is-leaving .vx-fb-stars,
.vx-fb-item.is-leaving .vx-fb-sep,
.vx-fb-item.is-leaving .vx-fb-who {
  opacity: 0; transform: translate3d(0, -10px, 0);
  transition: opacity .26s var(--vx-ease), transform .26s var(--vx-ease);
}

.vx-fb-nav {
  display: flex; justify-content: flex-end; gap: 10px;
  max-width: var(--vx-fb-max); margin-top: 44px;
}
.vx-fb-tick {
  -webkit-appearance: none; appearance: none; display: block; flex: none;
  width: 56px; margin: 0; padding: 15px 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer;
}
.vx-fb-tick-track {
  display: block; position: relative; width: 100%; height: 2px;
  overflow: hidden; background-color: rgba(245, 245, 245, .18);
  transition: background-color .3s var(--vx-ease);
}
.vx-fb-tick-fill {
  display: block; width: 100%; height: 100%; background-color: var(--primary);
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}

.vx-fb-tick.is-active .vx-fb-tick-track { background-color: rgba(245, 245, 245, .32) }
.vx-fb-tick:hover .vx-fb-tick-track { background-color: rgba(245, 245, 245, .36) }
.vx-fb-tick:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px }

@media (max-width: 991px) {
  .vx-fb-quote { font-size: 27px; line-height: 39px }
  .vx-fb-item[lang="ar"] .vx-fb-quote { font-size: 26px; line-height: 50px }
  .vx-fb-nav { margin-top: 38px }
}
@media (max-width: 767px) {
  .vx-fb-quote { font-size: 21px; line-height: 32px }
  .vx-fb-item[lang="ar"] .vx-fb-quote { font-size: 21px; line-height: 42px }
  .vx-fb-meta { gap: 12px; margin-top: 26px }
  .vx-fb-sep { display: none }
  .vx-fb-org { font-size: 14px }
  .vx-fb-org::before { margin: 0 7px }

  .vx-fb-nav { justify-content: flex-start; gap: 8px; margin-top: 30px }
  .vx-fb-tick { flex: 1 1 0; width: auto }
}

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

  .vx-w, .vx-fb-stars, .vx-fb-sep, .vx-fb-who {
    opacity: 1 !important; filter: none !important;
    transform: none !important; transition: none !important;
  }
  .vx-fb-item.is-leaving { display: none }
  .vx-fb-stage { transition: none }
  .vx-fb-tick-track, .vx-fb-tick-fill { transition: none !important }
}