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

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

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

    .loader-text {
        display: inline-block;
        font-family: var(--wdtFontTypo_Alt);
        font-size: 3.75rem;
        font-weight: bold !important;
        letter-spacing: 1px;
        line-height: normal;
        text-transform: uppercase;
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        -webkit-animation: textclip 1.5s linear infinite;
        animation: textclip 1.5s linear infinite;
    }

    @-webkit-keyframes textclip {
        to {
            background-position: 200% center;
        }
    }

    @keyframes textclip {
        to {
            background-position: 200% center;
        }
    }

/*----*****---- << Loader Icon >> ----*****----*/
.loader-icon {
    width: 100%; max-width: clamp(7.5rem, 7.1664rem + 1.8405vw, 9.375rem); display: flex; justify-content: center; align-items: center; margin: auto; }
.loader-icon svg { width: 100%; height: 100%; }
.loader-icon svg path:last-child { animation: 900ms speeder infinite linear; }
.loader-icon svg path:nth-child(1) { animation: 300ms speeder-2 infinite linear; }
.loader-icon svg path:nth-child(2) { animation: 500ms speeder-2 infinite linear; }
.loader-icon svg path:nth-child(3) { animation: 400ms speeder-2 infinite linear; }

@-webkit-keyframes speeder {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -3px) rotate(-1deg); }
    20% { transform: translate(-2px, 0px) rotate(1deg); }
    30% { transform: translate(1px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 3px) rotate(-1deg); }
    60% { transform: translate(-1px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-2px, -1px) rotate(1deg); }
    90% { transform: translate(2px, 1px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); } }
@keyframes speeder {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -3px) rotate(-1deg); }
    20% { transform: translate(-2px, 0px) rotate(1deg); }
    30% { transform: translate(1px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 3px) rotate(-1deg); }
    60% { transform: translate(-1px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-2px, -1px) rotate(1deg); }
    90% { transform: translate(2px, 1px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); } }

@-webkit-keyframes speeder-2 {
    0% { transform: translateX(0px);} 60% {transform: translateX(-20px); } 100% { transform: translateX(0px); } }
@keyframes speeder-2 {
    0% { transform: translateX(0px);} 60% {transform: translateX(-20px); } 100% { transform: translateX(0px); } }

.loader-inner .loader-fazers { position: absolute; width: 100%; height: 100%; }
.loader-inner .loader-fazers span[class*='fazer-'] { position: absolute; height: 1px; width: 250px; background: var(--wdtPrimaryColor); }
.loader-inner .loader-fazers span.fazer-1 { top: 20%; animation: moving-lines .6s linear infinite; }
.loader-inner .loader-fazers span.fazer-2 { top: 40%; animation: moving-lines .8s linear infinite; }
.loader-inner .loader-fazers span.fazer-3 { top: 60%; animation: moving-lines .4s linear infinite; }
.loader-inner .loader-fazers span.fazer-4 { top: 80%; animation: moving-lines 1s linear infinite; }

@-webkit-keyframes moving-lines { 0% { left: 200%; } 100% { left: -200%; opacity: 0; } }
@keyframes moving-lines { 0% { left: 200%; } 100% { left: -200%; opacity: 0; } }

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

    .pre-loader { background-color: var(--wdtBodyBGColor); }
    .loader-text { background-image: linear-gradient(to right, var(--wdtPrimaryColor) 10%, var(--wdtHeadAltColor) 50%, var(--wdtPrimaryColor) 60%); }


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

    }