:root {
  --initial-loader-bg: #fff;
  --initial-loader-color: #c9a227;
}

#loading-bg {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg);
  inset: 0;
}

.loading-text {
  color: #8a8a9a;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-block-end: 1.5rem;
  text-transform: uppercase;
}

.loading-bar-wrap {
  overflow: hidden;
  border-radius: 2px;
  background: #f0f0f6;
  block-size: 3px;
  inline-size: 120px;
}

.loading-bar {
  border-radius: 2px;
  animation: loading-slide 1.6s ease-in-out infinite;
  background: linear-gradient(90deg, #c9a227, #1c3a2f, #c9a227, #1c3a2f, #c9a227);
  background-size: 300% 100%;
  block-size: 100%;
}

@keyframes loading-slide {
  0% {
    background-position: 0% 0%;
    inline-size: 0%;
  }

  50% {
    background-position: 100% 0%;
    inline-size: 100%;
  }

  100% {
    background-position: 200% 0%;
    inline-size: 0%;
  }
}