.loader1 {
    width: calc(48 * var(--size));
    height: calc(48 * var(--size));
    border: calc(5 * var(--size)) dotted var(--color-1);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



.loader2 {
  --color-1: #fff;
  --color-2: #ff3d00;
  --size: 1px;

  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  border: calc(3 * var(--size)) dotted var(--color-1);
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}
.loader2::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: calc(3 * var(--size)) dotted var(--color-2);
  border-style: solid solid dotted;
  width: calc(24 * var(--size));
  height: calc(24 * var(--size));
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}






.loader3 {
  --color-1: #fff;
  --color-2: #ff3d00;
  --size: 1px;

  transform: rotateZ(45deg);
  perspective: calc(1000 * var(--size));
  border-radius: 50%;
  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  color: var(--color-1);
}
.loader3:before,
.loader3:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s spin linear infinite;
}
.loader3:after {
  color: var(--color-2);
  transform: rotateY(70deg);
  animation-delay: 0.4s;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

@keyframes rotateccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes spin {
  0%,
  100% {
    box-shadow: 0.2em 0 0 0 currentcolor;
  }
  12% {
    box-shadow: 0.2em 0.2em 0 0 currentcolor;
  }
  25% {
    box-shadow: 0 0.2em 0 0 currentcolor;
  }
  37% {
    box-shadow: -0.2em 0.2em 0 0 currentcolor;
  }
  50% {
    box-shadow: -0.2em 0 0 0 currentcolor;
  }
  62% {
    box-shadow: -0.2em -0.2em 0 0 currentcolor;
  }
  75% {
    box-shadow: 0 -0.2em 0 0 currentcolor;
  }
  87% {
    box-shadow: 0.2em -0.2em 0 0 currentcolor;
  }
}










.loader4 {
  --color-1: #fff;
  --size: 1px;

  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  display: inline-block;
  position: relative;
}
.loader4::after,
.loader4::before {
  content: '';
  box-sizing: border-box;
  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  border-radius: 50%;
  border: calc(2 * var(--size)) solid var(--color-1);
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}
.loader4::after {
  animation-delay: 1s;
}

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}








/* Custom Loader Overlay */
.custom-loader-overlay {
    background-color: rgba(60, 58, 58, 0.67) !important;
    /* backdrop-filter: blur(1px); */
    inset: 0;
}

.loader-spinner {
    border: 5px solid rgba(0, 0, 0, 0.12);
    border-top: 5px solid #594ae2;
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
    background: transparent;
}

@keyframes loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}