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

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

    .loader-inner {
        padding: clamp(1.875rem, 1.5963rem + 1.2739vw, 3.125rem);  
        position: absolute;
        left: 50%;
        top: 50%;
        text-align: center;
        width: fit-content;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--wdtRadius_Full);
    }

    .loader-inner::after {
        content:"";
        position:absolute;
        inset: 0;
        width: calc(100% - 1px);
        height: calc(100% - 1px);
        background: var(--wdtBodyBGColor);
        border-radius: inherit;
        margin: auto;
    }

    .loader-inner::before {
        content:"";
        position:absolute;
        background: linear-gradient(to right, var(--wdtBorderColor) 50%, transparent 50%);
        -webkit-animation: spin 1s infinite linear;
        animation: spin 1s infinite linear;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        margin: auto;
        transform-origin: center;
        box-shadow: 4px -40px 60px 5px var(--wdtBorderColor) inset;
    }

    .loader-text {
        display: inline-flex;
        font-family: var(--wdtFontTypo_Alt);
        font-size: clamp(1.875rem, 1.5963rem + 1.2739vw, 3.125rem);
        letter-spacing: 1px;
        line-height: normal;
        text-transform: uppercase;
        z-index: 1;
        background: linear-gradient(90deg, var(--wdtBodyBGColor), var(--wdtHeadAltColor), var(--wdtBodyBGColor));
        background-repeat: no-repeat;
        background-size: 80%;
        animation: text-animate 2s linear infinite;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0);
    }

    

    @keyframes text-animate {
        0% {
               background-position: -400%;
        }
       
        100% {
               background-position: 400%;
        }
    }

    @-webkit-keyframes text-animate {

        0% {
               background-position: -400%;
        }
       
        100% {
               background-position: 400%;
        }
    }


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

    }