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

    .pre-loader {
        height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 999991; 
        clip-path: circle(100% at 50% 50%); box-shadow: 0px 0px 0px 100vmax #fff; 
        transition: transform 1s ease-in-out, clip-path 1s ease-in-out .5s; }

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

    .pre-loader .loader-inner .loader-Icon {
        font-size: clamp(9.375rem, 8.819rem + 3.0675vw, 12.5rem); /*200px - 150px*/ 
        color: var(--wdtPrimaryColor); display: flex; justify-content: center; align-items: center; 
        backface-visibility: hidden; will-change: transform; isolation: isolate; 
        -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition);
        animation: animation-rotate-loader 2s cubic-bezier(0.72, 0, 0.18, 1) infinite; }
    
    .pre-loader .loader-inner .loader-Icon .pattern-1-shade {
        position: absolute; width: 20px; height: 200px; background-color: var(--wdtAccentTxtColor); 
        animation: shiny-anim 1s infinite; opacity: 0.7; z-index: 10; }
    
    @-webkit-keyframes shiny-anim { 0% { transform: translateX(-140px) rotate(-40deg); } 100% { transform: translateX(200px) rotate(-40deg); } }
    
    @keyframes shiny-anim { 0% { transform: translateX(-140px) rotate(-40deg); } 100% { transform: translateX(200px) rotate(-40deg); } }

    @keyframes animation-rotate-loader {
         0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); transform-origin: center; }
        25% { -webkit-transform: rotateY(20deg); transform: rotateY(20deg); transform-origin: center; }
        50% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); transform-origin: center; }
        75% { -webkit-transform: rotateY(-20deg); transform: rotateY(-20deg); transform-origin: center; }
        100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); transform-origin: center; }
    }



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

    }