#pageLoader{

position:fixed;

top:0;

left:0;

width:100vw;

height:100vh;

background:#ffffff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.8s;

overflow:hidden;

}

/* Fade Out */

#pageLoader.hide{

opacity:0;

visibility:hidden;

pointer-events:none;

}

/*============================*/

.loader-wrapper{

text-align:center;

}

/*============================*/

.loader-progress{

position:relative;

width:180px;

height:180px;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

}

/*============================*/

.loader-logo{

position:absolute;

width:80px;

height:80px;

display:flex;

justify-content:center;

align-items:center;

animation:logoPulse 1.5s infinite;

}

.loader-logo img{

width:100%;

height:100%;

object-fit:contain;

}

/*============================*/

.progress-ring{

transform:rotate(-90deg);

}

/*============================*/

.progress-ring-bg{

fill:none;

stroke:#ebebeb;

stroke-width:8;

}

/*============================*/

.progress-ring-fill{

fill:none;

stroke:url(#gradient);

stroke:#19B5C2;

stroke-width:8;

stroke-linecap:round;

stroke-dasharray:490;

stroke-dashoffset:490;

transition:.15s linear;

}

/*============================*/

#loadingText{

margin-top:35px;

font-weight:700;

color:var(--heading);

font-size:22px;

}

/*============================*/

#loadingPercent{

display:block;

margin-top:10px;

font-size:28px;

font-weight:800;

color:var(--primary);

}

/*============================*/

@keyframes logoPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.1);

}

100%{

transform:scale(1);

}

}

/*============================*/

@media(max-width:576px){

.loader-progress{

width:150px;

height:150px;

}

.loader-logo{

width:65px;

height:65px;

}

}