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

.loader1 {
    background-color: var(--wdtPrimaryColor) !important;
}

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

/*  */

.loader-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: end;
    position: relative;
}

.loader-inner h2 {
    color: white;
    padding: 35px;
    font-size: clamp(3.375rem, 1.4522rem + 8.7898vw, 12rem);
    /* Min-54 & Max-192 */
    opacity: 0.15;
    bottom: clamp(1.875rem, 1rem + 4.375vw, 6.25rem);
    /* 100 - 30 */
    position: relative;
    display: none;
}

.loader-inner>.line {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: rgba(var(--wdtAccentTxtColorRgb), 0);
    transition: unset;
    -webkit-transition: unset;
}

.loader-inner>.line::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: calc(var(--progress-time) * 1%);
    width: 20px;
    background-color: rgba(var(--wdtAccentTxtColorRgb), 1);
    -webkit-transition: inherit;
    transition: inherit;
    animation: opacity-load 0.2s linear calc(var(--progress-time) + 0.2s);
}

.loader-inner>.line::after {
    content: attr(data-time) '%';
    height: fit-content;
    width: fit-content;
    position: absolute;
    left: clamp(3.125rem, 2.0891rem + 3.4674vw, 6.25rem); 
    bottom: clamp(2.5rem, 1.8785rem + 2.0804vw, 4.375rem); 
    font-family: var(--wdtFontTypo_Alt);
    font-weight: var(--wdtFontWeight_Alt);
    font-size: clamp(4.375rem, 2.85rem + 7.625vw, 12rem); /* 192 - 70 */
    line-height: 1;
    -webkit-transition: inherit;
    transition: inherit;
    color: var(--wdtAccentTxtColor);
    display: inline;
    animation: opacity-load 0.2s linear calc(var(--progress-time) + 0.2s);
}
@keyframes opacity-load {
    0%{ opacity: 1; }
    100%{ opacity: 0; }
}

.loader-inner:after{
    content:"";
    height:100%;
    width:100%;
    background-color: inherit;
    position:absolute; top:0; left:0; z-index:-1;
    animation: open-up calc(var(--progress-time) + 2px) linear;
}
@keyframes open-up {
    0%{ transform: translateY(100%); }
    100%{ transform: translateY(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
--------------------------------------------------------------*/

@media screen and (max-width:1024px) {
    .loader-inner {
        --main-size: 7.5em;
    }

}

@media screen and (max-width:767px) {
    .loader-inner {
        --main-size: 6.5em;
        justify-content: center;
        align-items: center;
    }

    /* .loader-inner>.line::after {
        right: 0;
        left: 0;
        margin: auto;
        width: fit-content;
    } */
}

@media screen and (max-width:479px) {
    .loader-inner {
        --main-size: 5.5em;
    }
}