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

.pre-loader.loader2 { height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 999991; 
  background-color: var(--wdtHeadAltColor, var(--wdtDarkHeadAltColor)); }

.pre-loader.loader2 .loader-inner { 
    width: 100%;
    max-width: 300px;
    height: 100%;
    aspect-ratio: 1/1;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pre-loader.loader2 .loader-inner:before,
.pre-loader.loader2 .loader-inner:after {
    content: "";
    position: absolute;
    border-radius: var(--wdtRadius_Full);
    -webkit-border-radius: var(--wdtRadius_Full);
    animation-duration: 1.6s;
    -webkit-animation-duration: 1.6s;
    animation-iteration-count: infinite;
    -webit-animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    filter: drop-shadow(0 0 30px rgba(var(--wdtAccentTxtColorRgb, var(--wdtAccentTxtColorRgb)), 0.6));
    -webkit-filter: drop-shadow(0 0 30px rgba(var(--wdtAccentTxtColorRgb, var(--wdtAccentTxtColorRgb)), 0.6));
}

.pre-loader.loader2 .loader-inner:before {
    width: 100%;
    padding-bottom: 100%;
    box-shadow: inset 0 0 0 20px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor));
    -webkit-box-shadow: inset 0 0 0 20px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor));
    animation-name: wdt-loader-2-pulse-a;
    -webkit-animation-name: wdt-loader-2-pulse-a;
}

.pre-loader.loader2 .loader-inner:after {
    width: calc(100% - 40px);
    padding-bottom: calc(100% - 40px);
    box-shadow: 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor));
    -webkit-box-shadow: 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor));
    animation-name: wdt-loader-2-pulse-b;
    -webkit-animation-name: wdt-loader-2-pulse-b;
}

@keyframes wdt-loader-2-pulse-a {
  0% { 
    box-shadow: inset 0 0 0 20px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    -webkit-box-shadow: inset 0 0 0 20px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    opacity: 1; 
  }
  50%, 100% { 
    box-shadow: inset 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    -webkit-box-shadow: inset 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    opacity: 0; 
  }
}

@-webkit-keyframes wdt-loader-2-pulse-a {
  0% { 
    box-shadow: inset 0 0 0 20px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    -webkit-box-shadow: inset 0 0 0 20px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    opacity: 1; 
  }
  50%, 100% { 
    box-shadow: inset 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    -webkit-box-shadow: inset 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    opacity: 0; 
  }
}



@keyframes wdt-loader-2-pulse-b {
  0%, 50% { 
    box-shadow: 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    -webkit-box-shadow: 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    opacity: 0; 
  }
  100% { 
    box-shadow: 0 0 0 20px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    -webkit-box-shadow: 0 0 0 20px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    opacity: 1; 
  }
}
@-webkit-keyframes wdt-loader-2-pulse-b {
  0%, 50% { 
    box-shadow: 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    -webkit-box-shadow: 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    opacity: 0; 
  }
  100% { 
    box-shadow: 0 0 0 20px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    -webkit-box-shadow: 0 0 0 20px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
    opacity: 1; 
  }
}


/* text animation */

.pre-loader.loader2 .loader-inner span {
  position: relative;
  text-align: center;
  font-size: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem); /*30px - 20px*/
  font-weight: var(--wdtFontWeight_Alt);
  letter-spacing: var(--wdtLetterSpacing_3X);
  color: var(--wdtAccentTxtColor, var(--wdtDarkAccentTxtColor));
  text-transform: uppercase;
  white-space: nowrap;
}

.pre-loader.loader2 .loader-inner span:after {
  content: attr(data-text);
  width: 0 ;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor));
  animation: wdt-loader-text-01 linear 3s infinite;
  -webkit-animation: wdt-loader-text-01 linear 3s infinite;
}

@keyframes wdt-loader-text-01 { 0% { width: 0; } 100% { width: 100%; } }
@-webkit-keyframes wdt-loader-text-01 { 0% { width: 0; } 100% { width: 100%; } }


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

    .loader-inner .loader-text:after { background-color: var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); }


/*--------------------------------------------------------------
    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) {
  .pre-loader.loader2 .loader-inner { max-width: 200px; }
  .pre-loader.loader2 .loader-inner:before,
  .pre-loader.loader2 .loader-inner:after {
      filter: drop-shadow(0 0 20px rgba(var(--wdtAccentTxtColorRgb, var(--wdtAccentTxtColorRgb)), 0.6));
      -webkit-filter: drop-shadow(0 0 20px rgba(var(--wdtAccentTxtColorRgb, var(--wdtAccentTxtColorRgb)), 0.6));
  }
  .pre-loader.loader2 .loader-inner:before {
    box-shadow: inset 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor));
    -webkit-box-shadow: inset 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor));
  }
  .pre-loader.loader2 .loader-inner:after {
    width: calc(100% - 20px);
    padding-bottom: calc(100% - 20px);
    box-shadow: 0 0 0 0 var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor));
    -webkit-box-shadow: 0 0 0 0 var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor));
  }

  @keyframes wdt-loader-2-pulse-a {
    0% { 
      box-shadow: inset 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      -webkit-box-shadow: inset 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      opacity: 1; 
    }
    50%, 100% { 
      box-shadow: inset 0 0 0 0 var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      -webkit-box-shadow: inset 0 0 0 0 var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      opacity: 0; 
    }
  }
  
  @-webkit-keyframes wdt-loader-2-pulse-a {
    0% { 
      box-shadow: inset 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      -webkit-box-shadow: inset 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      opacity: 1; 
    }
    50%, 100% { 
      box-shadow: inset 0 0 0 0 var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      -webkit-box-shadow: inset 0 0 0 0 var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      opacity: 0; 
    }
  }
  
  @keyframes wdt-loader-2-pulse-b {
    0%, 50% { 
      box-shadow: 0 0 0 0 var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      -webkit-box-shadow: 0 0 0 0 var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      opacity: 0; 
    }
    100% { 
      box-shadow: 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      -webkit-box-shadow: 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      opacity: 1; 
    }
  }
  @-webkit-keyframes wdt-loader-2-pulse-b {
    0%, 50% { 
      box-shadow: 0 0 0 0 var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      -webkit-box-shadow: 0 0 0 0 var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      opacity: 0; 
    }
    100% { 
      box-shadow: 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      -webkit-box-shadow: 0 0 0 10px var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); 
      opacity: 1; 
    }
  }
}