#white-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  animation: opacityAnimation 1.3s ease forwards;
}

#loader {
  width: 100px;
  height: 100px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.one {
  width: 120px;
  height: 120px;
  border: 2px solid #2c3e501f; /* f3f3f3 */
  position: absolute;
  border-radius: 50%;
  border-right: 3px solid #9b59b6;
  border-left: 3px solid #3498db;
  -webkit-animation: spin-right 2s ease infinite;
  animation: spin-right 2s ease infinite;
}

.two {
  width: 100px;
  height: 100px;
  border: 2px solid #2c3e501f; /* f3f3f3 */
  position: absolute;
  border-radius: 50%;
  margin: 10px;
  border-bottom: 2px solid #e67e22;
  border-top: 2px solid #f1c40f;
  -webkit-animation: spin-left 1s ease infinite;
  animation: spin-left 1s ease infinite;
}

.three {
  width: 80px;
  height: 80px;
  border: 2px solid #2c3e501f; /* f3f3f3 */
  position: absolute;
  border-radius: 50%;
  margin: 20px;
  border-top: 1px solid #2ecc71;
  -webkit-animation: spin-right 1s ease infinite;
  animation: spin-right 1s ease infinite;
}

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

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