/* h1 {
  font-size: 80px;
  font-weight: 500;
  line-height: 92px;
  letter-spacing: -3px;
}

h2 {
  font-size: 64px;
  font-weight: 500;
  line-height: 64px;
  letter-spacing: -2px;
}

h3 {
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -1px;
}

.h4 {
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.5px;
}
h4 {
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -0.5px;
}

h5 {
  font-size: 28px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.2px;
}

h6 {
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.1px;
}

.p0 {
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.2px;
}

.p1 {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 16px;
  letter-spacing: 0px;
}

.p2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 12px;
  letter-spacing: 0px;
}

.p3 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 8px;
  letter-spacing: 0.1px;
}

.p4 {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
@media only screen and (max-width: 640px) {
  h1 {
    font-size: 40px;
    font-weight: 500;
    line-height: 52px;
    letter-spacing: -1.5px;
  }

  h2 {
    font-size: 32px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: -1px;
  }

  h3 {
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -0.2px;
  }

  h4 {
    font-size: 21px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0px;
  }
}
*/

/* Buttons */
body {
  /* text-transform: lowercase !important; */
}
#canvas2 {
  align-content: cloudflare;
  width: 600px;
  margin: 0 auto 0;
  display: block;
}
.btn-lg {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
}

.btn-md {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

.btn-sm {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

/* Inputs */
.input-lg {
  font-size: 19px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.input-md {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.input-sm {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.1px;
}

/* Labels */
.label-lg {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.label-md {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.1px;
}

.label-sm {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.3px;
}

/* Links */
.link {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 16px;
  letter-spacing: 0;
}

.link-md {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 12px;
  letter-spacing: 0;
}

/* Blockquote */
.blockquote {
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  line-height: 24px;
  margin-bottom: 10px;
  letter-spacing: 0;
}

.title-xs {
  font-size: 32px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0px;
}
.title-xs:lang(ar) {
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0px;
}
.title-sm {
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: 0px;
}
.title-sm:lang(ar) {
  font-size: 40px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0px;
}
.title-sm-1 {
  font-size: 42px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0px;
}

.title-md {
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0px;
}
.title-md:lang(ar) {
  font-size: 42px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 0px;
}

.title-lg {
  font-size: 46px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 0px;
}
.title-lg:lang(ar) {
  font-size: 46px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: 0px;
}

.title-xl {
  font-size: 64px;
  font-weight: 700;
  line-height: 64px;
  letter-spacing: 0px;
}
.title-xl:lang(ar) {
  font-size: 64px;
  font-weight: 500;
  line-height: 64px;
  letter-spacing: 0px;
}

.title-xl-1 {
  font-size: 64px;
  line-height: 72px;
  letter-spacing: 0px;
}

.subtitle-sm {
  font-size: 19px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
}
.subtitle-md {
  font-size: 23px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.063px;
}
.subtitle-md:lang(ar) {
  font-size: 23px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.063px;
}
.subtitle-md-1 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.063px;
}
.subtitle-md-2 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: -0.1px;
}
.subtitle-md-1:lang(ar) {
  font-size: 22px;
  line-height: 32px;
  letter-spacing: -0.063px;
}
.subtitle-lg {
  font-size: 32px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -0.1px;
}

.text-1 {
  font-size: 19px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0px;
}
.text-2 {
  font-size: 18px;
  font-weight: 500;
  line-height: 21.5px;
  letter-spacing: 0px;
}
.text-3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0px;
}

@media only screen and (max-width: 640px) {
  .title-xs {
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0px;
  }
  .title-sm {
    font-size: 28px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0px;
  }
  .title-xs:lang(ar) {
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0px;
  }
  .title-sm:lang(ar) {
    font-size: 28px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0px;
  }
  .title-sm-1 {
    font-size: 30px;
    font-weight: 500;
    line-height: 33px;
    letter-spacing: 0px;
  }

  .title-md {
    /* font-size: 34px; */
    font-size: 2rem;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: 0px;
  }
  .title-md:lang(ar) {
    /* font-size: 34px; */
    font-size: 34px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: 0px;
  }

  .title-lg {
    font-size: 38px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: 0px;
  }
  .title-xl {
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0px;
  }
  .title-lg:lang(ar) {
    font-size: 38px;
    font-weight: 500;
    line-height: 38px;
    letter-spacing: 0px;
  }
  .title-xl:lang(ar) {
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: 0px;
  }
  .title-xl-1 {
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 0px;
  }
  .subtitle-sm {
    font-size: 22px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0px;
  }
  .subtitle-md {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.063px;
  }
  .subtitle-md:lang(ar) {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.063px;
  }
  .subtitle-md-1 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.063px;
  }
  .subtitle-lg {
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: -0.1px;
  }

  .text-1 {
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0px;
  }
  .text-2 {
    font-size: 18px;
    font-weight: 500;
    line-height: 21.5px;
    letter-spacing: 0px;
  }
  .text-3 {
    font-size: 10px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0px;
  }
}

.bg-box-1 {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px -1px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px -1px;
  background: linear-gradient(
    140deg,
    #f1f1fc 0%,
    #f8f3fd 20%,
    #ffffff 100%
  ) !important;
}
.bg-box-2 {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px -1px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px -1px;
  background: linear-gradient(
    140deg,
    #f1f1fc 0%,
    #f8f3fd 20%,
    #ffffff 90%
  ) !important;
}
.bg-box-3 {
  background-color: transparent;
  background-image: linear-gradient(147deg, #4f008c14 0%, #ffffff 37%);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
    rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.hero-gradient::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(108deg, #4f008c 40%, #a54ee1 100%);
  mix-blend-mode: multiply;
}
.hero-gradient-2::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(180deg, #ff375e 0%, #4f008c 50%);
  mix-blend-mode: multiply;
}
.menu-item::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgba(29, 37, 45, 0.61);
}
.discover-section {
  box-shadow: rgba(0, 0, 0, 0.2) 0px -4px 6px 0px;
}
.text-color-1 {
  color: #1d252d;
}

.scene-tooltip {
  background: #3b0f66;
}
.scene-tooltip:empty {
  padding: 0px;
}
.scene-tooltip {
  padding: 10px;
  border-radius: 0;
  font-family: "STCForward", Arial, sans-serif;
  text-transform: none;
  letter-spacing: 1px;
}

.h-menu {
  height: calc(100vh - 120px);
}

.bg-beginnings-1 {
  background-image: radial-gradient(
    at center center,
    #ffffff 60%,
    #ffffffcc 100%
  );
}
.bg-beginnings-2 {
  background-image: radial-gradient(
    at center center,
    #4f008c 20%,
    #ffffff 100%
  );
}
.bg-beginnings-3 {
  background-image: url("../assets/images/about-us/bg.webp");
}
.bg-contact {
  background: linear-gradient(
    140deg,
    rgba(241, 241, 252, 0.6) 0%,
    rgba(248, 243, 253, 0.6) 20%,
    rgba(255, 255, 255, 0.6) 100%
  );
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px -1px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px -1px;
}
/* HTML: <div class="breadcrumb"></div> */
.badge-1-shadow {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2);
}
.badge-1 {
  /* box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); */
  --s: 10px; /* control the shape */
  line-height: 1.8; /* control the height */
  padding-inline: calc(var(--s) + 0.3em) 0.3em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--s) 50%);
  width: fit-content;
}
.closeOverlay {
  width: calc(100vw - 500px);
}
.text-1 {
  overflow-wrap: anywhere;
}

#riv {
  position: relative;
  height: 70vh;
  width: 70vw;
  /* transition: transform 0.5s ease; */
  transform: translateX(25%);
}
#logo-riv {
  opacity: 0;
  transform: translateX(-100%);
}

.svg-container {
  width: 250px;
  height: auto;
  margin: 0 auto;
}
.svg-container svg {
  width: 100%;
  height: auto;
  display: block;
}

.st0,
.st1,
.st2,
.square {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}

.square {
  transform-origin: center;
  /* transform-box: fill-box; */
}

.center3 {
  font-size: 120px;
  /* display: inline-block; */
  font-weight: 600;
  line-height: 300px;
  color: #fff;
  letter-spacing: -5px;
  padding-bottom: 20px;
}

.center3-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
}
.bg-cert {
  background-image: radial-gradient(
    at center center,
    #f8f6fe 40%,
    #f1edff 100%
  );
}

.font-bold:lang(ar) {
  font-weight: 500 !important;
}
.font-medium:lang(ar) {
  font-weight: 400 !important;
}
.font-semibold:lang(ar) {
  font-weight: 500 !important;
}
@media only screen and (max-width: 640px) {
  #riv {
    position: relative;
    height: 70vh;
    width: 70vw;
    /* transition: transform 0.5s ease; */
    transform: translateX(0);
  }
  #logo-riv {
    opacity: 0;
    transform: translateX(0);
  }
  .center3 {
    font-size: 4rem !important;
    /* display: inline-block; */
    font-weight: 600;
    line-height: 100px;
    color: #fff;
    letter-spacing: -5px;
    padding-bottom: 40px;
    text-align: center;
  }
  .center3-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
  }
  .svg-container {
    width: 250px !important;
    height: auto;
    margin: auto 0;
    text-align: center;
    transform: translate(0px, 0px) !important;
  }
  .logo-text {
    transform: translate(0px, 0px) !important;
  }
  .svg-container svg {
    width: 100%;
    height: auto;
    display: flex;
    margin: 0 auto;
  }
}
.text-capitalize {
  text-transform: capitalize !important;
}

/* ---------------------------------------------------------------------------
   Cross-browser scrollbars
   ---------------------------------------------------------------------------
   Two mechanisms are needed because no single one covers every browser:

   1. scrollbar-width / scrollbar-color  -- the W3C standard. Firefox 64+,
      Chrome/Edge 121+, Safari 18.2+.
   2. ::-webkit-scrollbar               -- WebKit/Blink only, for Chrome/Safari
      older than the versions above.

   Chrome 121+ honours the standard properties and IGNORES the ::-webkit- rules
   when both are present, so modern Chrome and Firefox land on the same look and
   older WebKit falls back to the second block.

   Tweak the two custom properties below to restyle every scroll area at once.
--------------------------------------------------------------------------- */

:root {
  --scrollbar-thumb: #3a3a3a;        /* mid grey, reads against near-black */
  --scrollbar-thumb-hover: #565656;  /* lifts on hover */
  --scrollbar-track: rgba(255, 255, 255, 0.05); /* barely-there channel */
}

.slim-scroll,
.expand-body,
#sidePanel {
  /* Tells the browser this element is dark, so any UI it draws itself
     (scrollbars, form controls) uses dark defaults instead of light ones.
     This alone fixes most of the Firefox/Chrome mismatch. */
  color-scheme: dark;

  /* Standard properties. Firefox only accepts auto | thin | none for the width
     -- an exact pixel value is not possible there, which is the one difference
     you cannot remove with CSS alone. "thin" renders ~8px in both engines. */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Older Chrome / Safari fallback. Ignored by Chrome 121+ and Safari 18.2+,
   which use the standard properties above instead. */
.slim-scroll::-webkit-scrollbar,
.expand-body::-webkit-scrollbar,
#sidePanel::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.slim-scroll::-webkit-scrollbar-track,
.expand-body::-webkit-scrollbar-track,
#sidePanel::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 8px;
}

.slim-scroll::-webkit-scrollbar-thumb,
.expand-body::-webkit-scrollbar-thumb,
#sidePanel::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
}

.slim-scroll::-webkit-scrollbar-thumb:hover,
.expand-body::-webkit-scrollbar-thumb:hover,
#sidePanel::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Stop the page jumping horizontally when a scrollbar appears or disappears.
   Ignored by browsers that do not support it, so it is safe to leave in. */
.slim-scroll,
.expand-body {
  scrollbar-gutter: stable;
}

/* Info icon inside the cable-list header.
   Solid glyph, sized down from the old 28px outline, and coloured from the same
   custom property as the scrollbar so the two stay in step -- change
   --scrollbar-thumb once and both follow. */
.info-icon-svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--scrollbar-thumb);
  transition: color 0.2s ease;
}

a:hover > .info-icon-svg,
a:focus-visible > .info-icon-svg {
  color: var(--scrollbar-thumb-hover);
}