body {
  margin: 0;
}

.loading-bg-transparent {
  position: fixed;
  z-index: 3000;
  display: none;
  backdrop-filter: blur(2px);
  background: rgba(var(--initial-loader-bg, 255, 255, 255), 0.2);
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
}

.loading-bg-transparent.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

#loading-bg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  block-size: 100%;
  inline-size: 100%;
}

.loading-logo{
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.loading-logo .logo-main{
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex: 1;
}
.logo-carousel{
  display: flex;
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 50%;
  animation: radial 1400ms 1800ms linear infinite;
}
.logo-carousel__item {
  position: absolute;
  transform: translate(160px);
  width: 160px;
  height: 160px;
  background-color: #7367f0;
  animation: showCarousel 350ms 1500ms linear forwards;
}
.loading-carousel{
  height: 100%;
  width: 500%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.loading-carousel_item{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 100%;
}
.loading-carousel_item svg{
  width: 90px;
  height: 90px;
}
.logo-overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}
.logo-overlay svg{
  width: 200px;
  height: 200px;
}

.logo-overlay svg circle{
  fill: none;
  stroke-width: 14.5px;
  stroke-linecap: round;
}
.logo-overlay svg circle.bg{
  stroke: #7367f0;
  stroke-dashoffset: 499;
  stroke-dasharray: 500;
  transform: rotate(-135deg);
  transform-origin: center;
  animation: dash 900ms 500ms linear forwards;
}
.loading-items{
  position: fixed;
  top: calc(50% - 10px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.loading-icons{
  display: flex;
  gap: 20px;
}
.loading-icons span{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  animation: bouncing 1s linear infinite;
}
.loading-icons span:nth-child(1){
  animation-delay: 0.2s;
}
.loading-icons span:nth-child(2){
  animation-delay: 0.4s;
}
.loading-icons span:nth-child(3){
  animation-delay: 0.6s;
}
.circle-point-overlay{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  margin-bottom: 15px;
}
.circle-point-overlay div{
  position: relative;
  height: 100%;
  width: 100%;
  transform: rotate(0deg);
  transform-origin: center;
  animation: rotate 800ms 500ms linear forwards;
}
.circle-point-overlay div span{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #7367f0;
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 15px;
  opacity: 1;
  animation: fadeOutSmallCircle 500ms 2100ms linear forwards;
}
@keyframes bouncing {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes radial {
  0% {
    box-shadow: 0 0 0 0 rgba(115, 103, 240, 0.7);
  }
  60% {
    box-shadow: 0 0 0 20px rgba(115, 103, 240, 0);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeOutSmallCircle {
  to{
    opacity: 0;
  }
}
@keyframes borderReduce {
  to{
    border-radius: 120px;
  }
}
@keyframes translateY {
  to{
    transform: translateY(-10px);
  }
}
@keyframes translateX {
  to{
    transform: translateX(-150px);
  }
}
.cls-1 {
  fill: #7367f0;
}
@keyframes showCarousel {
  to{
    transform: translateX(0);
  }
}
@keyframes carousel {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}