/*=====================================================
    RFACTD PREMIUM PRELOADER
=====================================================*/

#preloader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#040B18;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

z-index:99999;

transition:opacity 1s ease,
visibility 1s ease;

}

#preloader.hide{

opacity:0;

visibility:hidden;

}



/*======================================
BLUEPRINT GRID
======================================*/

.blueprint-grid{

position:absolute;

width:100%;

height:100%;

background-image:

linear-gradient(rgba(0,229,255,.05) 1px, transparent 1px),

linear-gradient(90deg, rgba(0,229,255,.05) 1px, transparent 1px);

background-size:60px 60px;

animation:gridMove 12s linear infinite;

opacity:.45;

}



@keyframes gridMove{

from{

transform:translateY(0);

}

to{

transform:translateY(60px);

}

}



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

.preloader-content{

position:relative;

text-align:center;

z-index:5;

}



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

.preloader-logo{

width:170px;

opacity:0;

transform:scale(.75);

animation:logoAppear 1.5s forwards;

filter:

drop-shadow(0 0 20px rgba(0,229,255,.35))

drop-shadow(0 0 45px rgba(0,229,255,.20));

}



@keyframes logoAppear{

to{

opacity:1;

transform:scale(1);

}

}



/*======================================
DRAWING RING
======================================*/

.logo-ring{

position:absolute;

top:-18px;

left:50%;

width:205px;

height:205px;

transform:translateX(-50%);

}



.logo-ring circle{

stroke-linecap:round;

animation:drawRing 2.5s forwards;

}



@keyframes drawRing{

to{

stroke-dashoffset:0;

}

}



/*======================================
WORDS
======================================*/

.loading-sequence{

margin-top:45px;

display:flex;

flex-direction:column;

gap:14px;

font-size:17px;

font-weight:600;

letter-spacing:5px;

color:#00E5FF;

}



.loading-sequence span{

opacity:0;

transform:translateY(15px);

}



.loading-sequence span:nth-child(1){

animation:fadeWord .8s forwards;

animation-delay:1.2s;

}



.loading-sequence span:nth-child(2){

animation:fadeWord .8s forwards;

animation-delay:2s;

}



.loading-sequence span:nth-child(3){

animation:fadeWord .8s forwards;

animation-delay:2.8s;

}



@keyframes fadeWord{

to{

opacity:1;

transform:translateY(0);

}

}



/*======================================
TITLE
======================================*/

.loading-title{

margin-top:45px;

font-size:36px;

font-weight:700;

opacity:0;

background:linear-gradient(

90deg,

#ffffff,

#00E5FF,

#1E90FF

);

background-size:250%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:

fadeTitle 1s forwards,

titleGradient 6s linear infinite;

animation-delay:3.4s;

}



@keyframes fadeTitle{

to{