/*======================================
EIVOX PAGE LOADER
======================================*/

.page-loader{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:25px;

    background:
    rgba(5,10,25,.98);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    z-index:9999999;

    opacity:1;

    visibility:visible;

    transition:
    opacity .5s ease,
    visibility .5s ease;

}


/*======================================
HIDE LOADER
======================================*/


.page-loader.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


/*======================================
BODY LOCK WHILE LOADING
======================================*/


body.loading{

    overflow:hidden;

    height:100vh;

}


/*======================================
LOADER CONTENT
======================================*/


.loader-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:20px;

    text-align:center;

}



/*======================================
LOGO
======================================*/


.loader-logo{

    width:100px;

    height:100px;

    object-fit:contain;

    animation:

    loaderPulse 2s infinite ease;

}



/*======================================
SITE NAME
======================================*/


.loader-title{

    color:#fff;

    font-size:24px;

    font-weight:800;

    letter-spacing:1px;

}



/*======================================
LOADING TEXT
======================================*/


.loader-text{

    color:#94a3b8;

    font-size:14px;

}



/*======================================
SPINNER
======================================*/


.loader-spinner{

    width:55px;

    height:55px;

    border-radius:50%;

    border:

    4px solid rgba(255,255,255,.15);

    border-top-color:#2563eb;

    animation:

    loaderSpin .8s linear infinite;

}



/*======================================
LOADING BAR
======================================*/


.loader-bar{

    width:260px;

    height:7px;

    overflow:hidden;

    border-radius:50px;

    background:rgba(255,255,255,.1);

}


.loader-progress{

    height:100%;

    width:40%;

    border-radius:50px;

    background:

    linear-gradient(
        90deg,
        #2563eb,
        #60a5fa
    );


    animation:

    loaderProgress 1.5s infinite ease;

}




/*======================================
ANIMATION
======================================*/


@keyframes loaderSpin{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }

}



@keyframes loaderPulse{


    0%,100%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.1);

    }

}



@keyframes loaderProgress{


    0%{

        transform:translateX(-120%);

    }


    100%{

        transform:translateX(300%);

    }

}



/*======================================
MOBILE
======================================*/


@media(max-width:768px){


.loader-logo{

    width:75px;

    height:75px;

}


.loader-title{

    font-size:20px;

}


.loader-bar{

    width:220px;

}


}

/*======================================
ROTATING ICON
======================================*/


.loader-icon-box{

    width:80px;

    height:80px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    rgba(37,99,235,.15);

    animation:

    iconFloat 2s infinite ease;

}


.loader-icon-box svg{

    width:38px;

    height:38px;

    color:#60a5fa;

}



@keyframes iconFloat{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-8px);

    }

}

/*=====================================
MOVING BRAND LOADER
=====================================*/


.loader-brand{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:180px;

    height:120px;

}



.loader-logo{

    width:85px;

    height:85px;

    object-fit:contain;

    animation:logoMove .8s infinite alternate;

}



.loader-moving-icon{

    position:absolute;

    right:10px;

    width:45px;

    height:45px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(37,99,235,.15);

    animation:

    iconMove .8s infinite ease;

}



.loader-moving-icon svg{

    width:25px;

    height:25px;

    color:#60a5fa;

}



@keyframes logoMove{


    from{

        transform:translateX(-8px);

    }


    to{

        transform:translateX(8px);

    }

}



@keyframes iconMove{


    0%{

        transform:translateX(0) scale(1);

    }


    50%{

        transform:translateX(-20px) scale(1.15);

    }


    100%{

        transform:translateX(0) scale(1);

    }

}




.loader-moving-icon{

    width:55px;

    height:55px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(37,99,235,.15);

    transition:.2s ease;

}



.loader-moving-icon svg{

    width:30px;

    height:30px;

    color:#60a5fa;

}



.loader-brand{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

}



.loader-logo{

    width:90px;

    height:90px;

    object-fit:contain;

}



.loader-text{

    color:#94a3b8;

    font-size:14px;

    animation:textPulse 1s infinite;

}



@keyframes textPulse{


    50%{

        opacity:.5;

    }

}

/*=====================================
EIVOX BRAND LOADER
=====================================*/


.loader-brand{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:90px;

}


/* ROUND SMALL LOGO */

.loader-logo{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

    animation:logoPulse 1.2s infinite ease;

}



/* MOVING ICON */

.loader-moving-icon{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(37,99,235,.15);

    transition:.25s ease;

    animation:iconBounce .8s infinite ease;

}


.loader-moving-icon svg{

    width:20px;

    height:20px;

    color:#60a5fa;

}



/* TEXT */

.loader-text{

    color:#94a3b8;

    font-size:13px;

    animation:textFade .8s infinite;

}



/* ANIMATION */


@keyframes logoPulse{


    0%,100%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.08);

    }

}



@keyframes iconBounce{


    0%,100%{

        transform:translateX(0);

    }


    50%{

        transform:translateX(8px);

    }

}



@keyframes textFade{


    50%{

        opacity:.4;

    }

}