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

    .pre-loader {
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999991;
        background-color: #fff;
    }

    .loader-inner {
        padding: 25px;
        position: absolute;
        left: 50%;
        top: 50%;
        text-align: center;
        width: 100%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    
    .loader-inner .rings {
  --border-width: 0.2em;
  --border-style: solid;
  --animation-duration: 4s;
  --animation-delay: 100ms;
  --animation-count: infinite;
  --animation-direction: normal;
  --animation-fill-mode: both;
  --animation-timing: ease-in-out;
  position: relative;
  width: 250px;
  aspect-ratio: 1/1;
  animation-delay: var(--animation-delay);
  animation-duration: var(--animation-duration);
  animation-iteration-count: var(--animation-count);
  animation-timing-function: var(--animation-timing);
  margin: auto;
}

.loader-inner .rings > .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1/1;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-radius: 50%;
  transform-origin: center;
  animation-duration: var(--animation-duration);
  animation-delay: calc(0.4s * var(--delay));
  animation-iteration-count: var(--animation-count);
  animation-direction: var(--animation-direction);
  animation-fill-mode: var(--animation-fill-mode);
  filter: opacity(0);
  will-change: transform;
  overflow: hidden;
}

.loader-inner .rings > .ring:nth-child(even) {
  border-color: whitesmoke;
  box-shadow:
    0 0 4px cyan,
    0 0 20px cyan,
    inset 0 0 4px cyan,
    inset 0 0 20px cyan;
}

.loader-inner .rings > .ring:nth-child(odd) {
  border-color: whitesmoke;
  box-shadow:
    0 0 4px magenta,
    0 0 20px magenta,
    inset 0 0 4px magenta,
    inset 0 0 20px magenta;
}

.loader-inner .rings > .ring:first-child {
  width: 100px;
  margin: -50px 0 0 -50px;
}

.loader-inner .rings > .ring:nth-child(2) {
  width: 128px;
  margin: -64px 0 0 -64px;
}

.loader-inner .rings > .ring:nth-child(3) {
  width: 156px;
  margin: -78px 0 0 -78px;
}

.loader-inner .rings > .ring:nth-child(4) {
  width: 184px;
  margin: -92px 0 0 -92px;
}

.loader-inner .rings > .ring:nth-child(5) {
  width: 104px;
  margin: -52px 0 0 -52px;
}

.loader-inner .rings > .ring:nth-child(6) {
  width: 118px;
  margin: -59px 0 0 -59px;
}

.loader-inner .anim-zoomIn {
  animation-name: wdt-zoom-in;
}

@keyframes wdt-zoom-in {
  0% {
    transform: perspective(600px) translatez(0);
    filter: opacity(0);
  }
  60% {
    filter: opacity(100%);
  }
  100% {
    transform: perspective(600px) translatez(200px);
  }
}


/*--------------------------------------------------------------
    Accents
--------------------------------------------------------------*/

    .pre-loader { background-color: var(--wdtBodyBGColor); }


/*--------------------------------------------------------------
    Responsive
--------------------------------------------------------------*/

    /*----*****---- << Mobile (Landscape) >> ----*****----*/

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {

    }


    /* Common Styles for the devices below 479px width */

    @media only screen and (max-width: 479px) {

    }