.home-hero {
  min-height: 610px;
  padding: 112px 0 82px;
  background-color: #eaf5ff;
  background-image: url("../images/hero background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-hero .container {
  position: relative;
  z-index: 2;
}

.home-hero .home-hero-copy {
  position: relative;
  z-index: 2;
}

.home-hero .home-hero-copy > p {
  text-shadow: 0 1px 5px rgba(255, 255, 255, .72);
}

.home-hero .home-hero-copy h1 > .hero-title-en,
.home-hero .home-hero-copy h1 > .hero-title-ar {
  display: block;
}

.home-hero .home-hero-copy h1 > .hero-title-ar {
  display: none;
}

html[dir="rtl"] .home-hero .home-hero-copy h1 > .hero-title-en {
  display: none;
}

html[dir="rtl"] .home-hero .home-hero-copy h1 > .hero-title-ar {
  display: block;
  direction: rtl;
  font-family: Cairo, Inter, sans-serif;
}

.welcome-loader {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(196, 230, 250, .96), rgba(235, 246, 255, .98) 50%, #fff 100%);
  opacity: 1;
  transition: opacity .42s ease, visibility .42s ease;
}

.welcome-loader.is-leaving,
html[data-welcome-seen] .welcome-loader {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.welcome-loader-card {
  display: grid;
  justify-items: center;
  width: min(100%, 390px);
  padding: 32px 32px 28px;
  border: 1px solid rgba(8, 124, 193, .14);
  border-radius: 28px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 24px 70px rgba(6, 59, 112, .14);
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.welcome-loader-logo {
  width: 184px;
  height: 56px;
  object-fit: contain;
}

.welcome-loader-globe {
  position: relative;
  width: 86px;
  height: 86px;
  margin: 20px 0 16px;
  border: 2px solid rgba(8, 124, 193, .3);
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 30%, #a8e0ff 0 8%, #159ce5 30%, #087cc1 65%, #063b70 100%);
  box-shadow: inset -12px -10px 20px rgba(5, 47, 92, .48), 0 8px 24px rgba(8, 124, 193, .18);
  animation: welcome-globe-turn 2.4s linear infinite;
}

.welcome-loader-globe::before,
.welcome-loader-globe::after {
  position: absolute;
  inset: 11px 22px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  content: "";
}

.welcome-loader-globe::after {
  inset: 24px 5px;
}

.welcome-loader-globe span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(243, 107, 23, .86);
  border-radius: 50%;
  transform: rotate(-28deg) scaleX(1.38);
}

.welcome-loader-title {
  margin: 0;
  color: #063b70;
  font-size: 22px;
  font-weight: 800;
}

.welcome-loader-title-ar {
  display: none;
  font-family: Cairo, Inter, sans-serif;
}

html[dir="rtl"] .welcome-loader-title-en {
  display: none;
}

html[dir="rtl"] .welcome-loader-title-ar {
  display: block;
}

.welcome-loader-caption {
  margin-top: 7px;
  color: #71869b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}

.welcome-loader-progress {
  width: 152px;
  height: 4px;
  overflow: hidden;
  margin-top: 22px;
  border-radius: 99px;
  background: #e6f1fa;
}

.welcome-loader-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #087cc1, #159ce5, #f36b17);
  animation: welcome-progress 1.15s ease-in-out infinite;
}

@keyframes welcome-globe-turn {
  to { transform: rotate(360deg); }
}

@keyframes welcome-progress {
  from { transform: translateX(-110%); }
  to { transform: translateX(250%); }
}

.earth-visual {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -6%;
  width: min(58vw, 750px);
  height: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

.earth-visual-canvas,
.earth-visual-labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.earth-visual-canvas {
  display: block;
}

.earth-visual-labels {
  overflow: hidden;
}

.earth-visual-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.earth-visual-fallback span {
  display: block;
  width: min(66%, 390px);
  aspect-ratio: 1;
  border: 1px solid rgba(164, 221, 255, .75);
  border-radius: 50%;
  background: #0c4273 url("../images/earth-textures/earth-atmos-2048.jpg") center / cover no-repeat;
  box-shadow: inset -24px -10px 38px rgba(4, 27, 55, .54);
}

.earth-visual.is-fallback .earth-visual-fallback {
  display: flex;
}

@media (max-width: 991px) {
  .home-hero {
    min-height: 570px;
  }

  .earth-visual {
    right: -6%;
    width: 63vw;
    height: 570px;
  }

  .home-hero .home-hero-copy h1 {
    font-size: clamp(34px, 4.1vw, 46px);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .home-hero .home-hero-copy {
    width: 55%;
  }

  .earth-visual {
    right: -8%;
  }
}

@media (max-width: 767px) {
  .home-hero {
    min-height: 0;
    padding: 92px 0 22px;
    background-image: url("../images/hero background.jpg");
    background-position: center;
    background-size: cover;
  }

  .earth-visual {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: min(88vw, 390px);
    margin: -20px auto 0;
    transform: none;
  }

  .home-hero .home-hero-copy h1 {
    font-size: clamp(34px, 8vw, 46px);
  }

  .home-hero .home-hero-copy > p {
    max-width: 470px;
    font-size: 15px;
  }

}

@media (max-width: 420px) {
  .earth-visual {
    height: 340px;
  }

  .home-hero .home-hero-copy h1 {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .earth-visual-canvas {
    transition: none;
  }

  .welcome-loader-globe,
  .welcome-loader-progress span {
    animation: none;
  }
}