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

  .pre-loader {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999991;
    background-color: var(--wdtBodyBGColor);
    -webkit-transition: all 0.05s ease-in-out;
    transition: all 0.05s ease-in-out;
    backface-visibility: hidden;
    will-change: transform;
  }

  .loader-inner {
    padding: 25px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    will-change: transform;
  }

  .loader-text-group {
    position: relative;
    overflow: hidden;
    display: grid;
    justify-items: end;
    align-items: center;
    font-family: var(--wdtFontTypo_Alt);
    font-size: var(--wdtFontSize_H2);
    font-weight: var(--wdtFontWeight_Alt);
    letter-spacing: 0;
    line-height: normal;
    text-transform: capitalize;
    margin-right: 15px;
  }

  .loader-text-group span { 
    font-family: var(--wdtFontTypo_Alt);
    font-size: var(--wdtFontSize_H2);
    font-weight: var(--wdtFontWeight_Alt);
    letter-spacing: 0;
    line-height: normal;
    text-transform: capitalize;
  }

  .loader-text-group span.loader-text-1 {
    grid-area: 1/-1; -webkit-transform: translateY(0); transform: translateY(0); 
    -webkit-transition: var(--wdt-Letsgo-Transition); transition: var(--wdt-Letsgo-Transition); }
  .wdt__start .loader-text-group span.loader-text-1 {
    -webkit-transform: translateY(-100%); transform: translateY(-100%);
    -webkit-transition: var(--wdt-Letsgo-Transition); transition: var(--wdt-Letsgo-Transition); }

  .loader-text-group span.loader-text-2 {
    grid-area: 1/-1; -webkit-transform: translateY(100%); transform: translateY(100%); clip-path: inset(0 0 0 100%);
    -webkit-transition: var(--wdt-Letsgo-Transition); transition: var(--wdt-Letsgo-Transition); }
  .wdt__start .loader-text-group span.loader-text-2 {
    -webkit-transform: translateY(0); transform: translateY(0);
    -webkit-transition: var(--wdt-Letsgo-Transition); transition: var(--wdt-Letsgo-Transition); }

  .wdt__start .loader-text-group span.loader-text-2 { animation: TitleReveral 1s ease-in-out; }

  @-webkit-keyframes TitleReveral { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
  @keyframes TitleReveral { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }


  /*----*****---- << Loader Icon >> ----*****----*/

  :root { --planeColor: var(--wdtHeadAltColor); --size: clamp(5rem, 4.5552rem + 2.454vw, 7.5rem); }

  .loader-icon { transform-origin: top; animation: loadingShake 3s ease-in-out infinite;
    backface-visibility: hidden; will-change: transform; margin: 0; }
  .wdt__start .loader-icon { animation: loadingAnimation 2.5s ease-in-out; }

  .loader-icon { width: var(--size); aspect-ratio: 1; display: grid; place-items: center; backface-visibility: hidden; will-change: transform; }
  .loader-icon .wdt-planebody, .loader-icon .wdt-planebody * { 
    background: var(--planeColor); backface-visibility: hidden; will-change: transform; }
  .loader-icon .wdt-planebody {
    position: relative; width: var(--size); height: auto; aspect-ratio: 7/1; border-bottom-left-radius: 50% 100%; 
    border-top-right-radius: 25% 90%; border-bottom-right-radius: 20% 20%; backface-visibility: hidden; will-change: transform; }
  .loader-icon .wdt-planetail, .loader-icon .wdt-wingleft, .loader-icon .wdt-wingright { 
    position: absolute; backface-visibility: hidden; will-change: transform; }
  .loader-icon .wdt-planetail {
    left: calc(-0.3% + 1px); top: -120%; width: 15%; aspect-ratio: 1/1.25; transform: skewX(5deg) translateX(-5%); 
    border-top-left-radius: 10%; border-top-right-radius: 100% 100%; }
  .loader-icon .wdt-wingleft, .loader-icon .wdt-wingright { left: 50%; width: 25%; aspect-ratio: 1; }
  .loader-icon .wdt-wingleft {
    transform-origin: bottom; top: -190%; transform: skewX(45deg) translateX(-30%); scale: 0.8; 
    border-top-left-radius: 10%; border-top-right-radius: 60% 100%; }
  .loader-icon .wdt-wingright {
    transform-origin: top; bottom: -170%; transform: skewX(-45deg); border-bottom-left-radius: 10%; border-bottom-right-radius: 60% 100%; }
  .loader-icon .wdt-planetail::after {
    content: ""; position: absolute; height: 55%; aspect-ratio: 1; transform: skewX(0deg) rotate(-8deg); right: -60%; bottom: 4.5%; 
    background: radial-gradient( circle at 100% 0%, transparent 70%, var(--planeColor) calc(70% + 0.5px) ); }

    @-webkit-keyframes loadingShake { 
      0% { transform: translateX(0px) translateY(0px); }
      50% { transform: translateX(-10px) translateY(0px); }
      50% { transform: translateX(10px) translateY(0px); }
      50% { transform: translateX(-10px) translateY(0px); }
      100% { transform: translateX(100vh) translateY(0px); }
   }
    @keyframes loadingShake { 
      0% { transform: translateX(0px) translateY(0px); }
      50% { transform: translateX(-10px) translateY(0px); }
      50% { transform: translateX(10px) translateY(0px); }
      50% { transform: translateX(-10px) translateY(0px); }
      100% { transform: translateX(0px) translateY(0px); }
   }
    
    @-webkit-keyframes loadingAnimation { 
      0% { transform: rotate(0deg) translateX(0px) translateY(0px); }
      50% { transform: rotate(-160deg) translateX(0px) translateY(0px); }
      50% { transform: rotate(-260deg) translateX(0px) translateY(0px); }
      50% { transform: rotate(-360deg) translateX(0px) translateY(0px); }
      100% { transform: rotate(-460deg) translateX(100vh) translateY(50vh); }
   }
    @keyframes loadingAnimation { 
      0% { transform: rotate(0deg) translateX(0px) translateY(0px); }
      50% { transform: rotate(-160deg) translateX(0px) translateY(0px); }
      50% { transform: rotate(-260deg) translateX(0px) translateY(0px); }
      50% { transform: rotate(-360deg) translateX(0px) translateY(0px); }
      100% { transform: rotate(-460deg) translateX(100vh) translateY(50vh); }
   }

/*--------------------------------------------------------------
  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) {

}