.my-background {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* برای پس‌زمینه محو */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* تمایل به مشکی با شفافیت 80% */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease-out; /* انیمیشن محو شدن */
}

.loader-wrapper.hidden {
  opacity: 0;
  pointer-events: none; /* بعد از محو شدن، غیرفعال شود */
}

/* انیمیشن اصلی لودینگ */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100px; /* اندازه کلی لودینگ */
  height: 100px; /* اندازه کلی لودینگ */
}

.dot {
  width: 20px; /* اندازه هر نقطه */
  height: 20px; /* اندازه هر نقطه */
  background-color: #4CAF50; /* تم سبز */
  border-radius: 50%;
  position: absolute;
  animation: bounce 1.4s infinite ease-in-out both;
  transform-origin: center center;
}

/* انیمیشن‌ها برای هر نقطه */
.dot-1 {
  animation-delay: -0.32s;
  background-color: #66BB6A; /* سبز روشن‌تر */
}

.dot-2 {
  animation-delay: -0.16s;
  background-color: #81C784; /* سبز متوسط */
}

.dot-3 {
  background-color: #9CCC65; /* سبز روشن */
}

@keyframes bounce {
  0%, 100% {
    transform: scale(0.6); /* کوچک شدن */
    opacity: 0.7;
  }
  50% {
    transform: scale(1); /* بزرگ شدن */
    opacity: 1;
  }
}

/* برای تست، بعد از بارگذاری کامل سایت، این کلاس را به loader-wrapper اضافه کن */
/* معمولا با جاوااسکریپت این کار انجام می‌شود */