.overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(240, 240, 245, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* پشتیبانی سافاری */
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.load-box {
  position: relative;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  animation: loading 1.3s infinite alternate 1s;
}

.loading1,
.loading2,
.loading3,
.loading4,
.loading5,
.loading6 {
  width: 10px;
  height: 100px;
  background-color: rgb(0, 17, 255);
  position: fixed;
  border-radius: 5px;
  background-image: linear-gradient(blue, rgb(0, 234, 255), blue);
}

.loading1 {
  transform: translate(25%, -4%);
  animation: loading1 1.3s ease-in-out infinite alternate;
  background-image: linear-gradient(rgb(0, 234, 255), blue, rgb(0, 234, 255));
  z-index: -1;
}

.loading2 {
  transform: translate(480%, -4%);
  animation: loading2 1.3s ease-in-out infinite alternate;
}

.loading3 {
  transform: translate(25%, -49%) rotate(90deg);
  animation: loading3 1.3s ease-in-out infinite alternate;
}

.loading4 {
  transform: translate(26%, 41%) rotate(90deg);
  animation: loading4 1.3s ease-in-out infinite alternate;
}

.loading5 {
  transform: translate(26%, -3%) rotate(90deg);
  animation: loading5 1.3s ease-in-out infinite alternate;
  background-image: linear-gradient(rgb(0, 234, 255), blue, rgb(0, 234, 255));
  z-index: -1;
}

.loading6 {
  transform: translate(-425%, -4%);
  animation: loading6 1.3s ease-in-out infinite alternate;
}

.load-txt {
  margin-top: 60px;
  color: #0044cc;
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}


.hidden {
  display: none !important;
}

.no-scroll {
  overflow: hidden;
}

@keyframes loading1 {
  0%,
  40% {
    transform: translate(25%, -4%);
  }
  70%,
  100% {
    height: 120px;
    transform: translate(40%, 50%) rotate(90deg);
  }
}

@keyframes loading2 {
  0%,
  40% {
    transform: translate(480%, -4%);
  }
  70%,
  100% {
    transform: translate(540%, -4%);
  }
}

@keyframes loading3 {
  0%,
  40% {
    transform: translate(25%, -49%) rotate(90deg);
  }
  70%,
  100% {
    height: 115px;
    transform: translate(-225%, -1%) rotate(153deg);
  }
}

@keyframes loading4 {
  0%,
  40% {
    transform: translate(26%, 41%) rotate(90deg);
  }
  70%,
  100% {
    height: 115px;
    transform: translate(275%, -1%) rotate(27deg);
  }
}

@keyframes loading5 {
  0%,
  40% {
    transform: translate(26%, -3%) rotate(90deg);
  }
  70%,
  100% {
    height: 80px;
    transform: translate(-0%, 95%) rotate(90deg);
  }
}

@keyframes loading6 {
  0%,
  40% {
    transform: translate(-425%, -4%);
  }
  70%,
  100% {
    transform: translate(-470%, -4%);
  }
}

@keyframes loading {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.92);
  }
}