.rotatingtext {
  opacity: 0;
  animation: rotateOpacity 15s infinite;
  animation-timing-function: cubic-bezier(0.4, 0.1, 0, 1);
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
}

.rotatingtext:nth-child(1) {
  animation-delay: 0s;
}
.rotatingtext:nth-child(2) {
  animation-delay: 2.5s;
}
.rotatingtext:nth-child(3) {
  animation-delay: 5s;
}
.rotatingtext:nth-child(4) {
  animation-delay: 7.5s;
}
.rotatingtext:nth-child(5) {
  animation-delay: 10s;
}
.rotatingtext:nth-child(6) {
  animation-delay: 12.5s;
}

@keyframes rotateOpacity {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  16.66% {
    opacity: 1;
  }
  19.66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Heading tags were corrected for SEO (one h1 per page). These rules keep each heading
   looking exactly as it did with its previous tag. */
.hero-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.hero-heading {
  display: block;
  line-height: 1.3;
}
h3.bold-text-12 {
  line-height: 1.3;
}
@media screen and (min-width: 992px) {
  .hero-heading {
    font-size: 2.8em;
  }
  .brix---heading-h1-size-2 {
    font-size: 3.6em;
  }
}

/* Fill the hero at any screen shape without distorting the image (crops the edges instead).
   The image covers the whole hero, not just the first screen, so a hero taller than the
   screen (landscape phones) doesn't leave the white heading over the cream section below. */
.section-hero {
  position: relative;
  z-index: 0;
}
.hero-cover {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Short landscape screens (phones on their side): the heading is sized by screen width,
   which makes it bigger than on desktop. Cap it by screen height so the hero fits. */
@media screen and (max-width: 991px) and (max-height: 500px) and (orientation: landscape) {
  .hero-heading {
    font-size: min(11vw, 10vh);
  }
}

/* Values timeline: its 4rem side padding left only 80-170px for each value's text on
   phones and tablets, wrapping it one or two words per line. */
@media screen and (max-width: 991px) {
  .brix---content-inside-card-v2 > .brix---paragraph-default-6:not(.boxes) {
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 1.6;
  }
}
@media screen and (max-width: 479px) {
  .brix---content-inside-card-v2 > .brix---paragraph-default-6:not(.boxes) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Mobile type scale: body text 16-17px with ~1.5-1.65 line spacing (more for Arabic),
   headings stepping down H1 > H2 > H3.
   The section headings' inner bold-text-6/-20 classes fixed them at 32px at every width,
   overriding the heading classes' own phone sizes, so on phones they wrapped to 6-9 lines.
   Parent and inner element get the same size so the parent's line height doesn't add gaps. */
@media screen and (max-width: 767px) {
  .brix---heading-h1-size-2,
  .brix---heading-h2-size-8,
  .bold-text-6,
  .bold-text-20,
  .bold-text-20.industries {
    font-size: 28px;
    line-height: 1.25;
  }
  .brix---heading-h1-size-2:lang(ar-sa),
  .brix---heading-h2-size-8:lang(ar-sa),
  .bold-text-6:lang(ar-sa),
  .bold-text-20.industries:lang(ar-sa),
  .bold-text-20:lang(ar-sa) {
    line-height: 1.45;
  }
}
@media screen and (max-width: 479px) {
  .brix---heading-h1-size-2,
  .brix---heading-h2-size-8,
  .bold-text-6,
  .bold-text-20,
  .bold-text-20.industries {
    font-size: 26px;
  }
  h3.bold-text-12 {
    font-size: 22px;
  }
}

/* Phone/tablet sector cards and values intro: line spacing was 1.3 (too tight for
   multi-line descriptions) or 2.2-2.8 (lines drift apart and read as separate lines). */
@media screen and (max-width: 991px) {
  .sector-cards-tablet .uui-heading-xxsmall-7,
  .sector-cards-tablet .bold-text-19,
  .sector-cards-tablet .bold-text-19.industries {
    line-height: 1.3;
  }
  .sector-cards-tablet .roadmap_para-2 {
    line-height: 1.5;
  }
  .brix---paragraph-default-4 {
    line-height: 1.65;
  }
  .brix---paragraph-default-4:lang(ar-sa) {
    line-height: 1.8;
  }
}

/* Footer copyright was 12.6px; Arabic lines were 3.6x apart. */
.copyright,
.copyright .bold-text-21 {
  font-size: 14px;
  line-height: 1.6;
}