/*--------------------------------------------------------------
    Loader
--------------------------------------------------------------*/

.pre-loader {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999991;
    background-color: var(--wdtBodyBGColor);
    perspective: 200px;
}
.pre-loader.loader2 { backdrop-filter: blur(20px); }
.pre-loader.loader2 div[class*="loader-round-"] { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin-top: -60px; margin-left: -60px; border-radius: 100px; border: 40px outset var(--wdtPrimaryColor); transform-style: preserve-3d; transform-origin: 50% 50%; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); background-color: transparent; animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite; }
.pre-loader.loader2 div[class*="loader-round-two"] { width: 140px; height: 140px; margin-top: -70px; margin-left: -70px; border-width: 30px; border-color: var(--wdtSecondaryColor); animation-name: dot2; animation-delay: 75ms; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); }
.pre-loader.loader2 div[class*="loader-round-three"] { width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; border-width: 20px; border-color: var(--wdtPrimaryColor); animation-name: dot3; animation-delay: 150ms; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); }
@keyframes dot1 { 
  0% { border-color: var(--wdtPrimaryColor); transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); } 
  50% { border-color: var(--wdtPrimaryColor); transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); } 
  100% { border-color: var(--wdtPrimaryColor); transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); } 
}
@keyframes dot2 { 
  0% { border-color: var(--wdtSecondaryColor); 
       transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); } 
  50% { border-color: var(--wdtSecondaryColor);
        transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); } 
  100% { border-color: var(--wdtSecondaryColor);  
         transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); } 
}
@keyframes dot3 { 
  0% { border-color: var(--wdtPrimaryColor);  
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); } 
  50% { border-color: var(--wdtPrimaryColor); 
  transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); } 
  100% { border-color: var(--wdtPrimaryColor); 
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); } 
}