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

.hidden{

opacity:0;

transform:
translateY(50px);

transition:
all .8s cubic-bezier(
.22,
1,
.36,
1
);

}

.show{

opacity:1;

transform:
translateY(0);

}

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

.testimonial{

transition:
all .4s ease;

}

/* ==========================
CARD EFFECT
========================== */

.service-card{

transform-style:
preserve-3d;

will-change:
transform;

}



/* ====================
PRELOADER
==================== */

#preloader{

position:fixed;

inset:0;

background:#070d17;

display:flex;

align-items:center;
justify-content:center;

z-index:99999;

transition:.6s;

}

#preloader.hide{

opacity:0;
visibility:hidden;

}

.loader{

width:70px;
height:70px;

border-radius:50%;

border:4px solid
rgba(255,255,255,.08);

border-top-color:#4f7cff;

animation:spin 1s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}


.reveal{

opacity:0;

transform:
translateY(40px);

transition:
all .8s ease;

}

.reveal.active{

opacity:1;

transform:
translateY(0);

}

.back-top{

position:fixed;

right:30px;
bottom:30px;

width:55px;
height:55px;

border:none;

border-radius:50%;

background:#4f7cff;

color:#fff;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

.back-top.show{

opacity:1;

visibility:visible;

}

.progress-bar{

position:fixed;

top:0;
right:0;

height:3px;

width:0;

background:#4f7cff;

z-index:999999;

}


.page-transition{

position:fixed;

inset:0;

background:#0f172a;

z-index:999999;

pointer-events:none;

transform:
translateY(100%);

transition:
transform .6s ease;

}

.page-transition.active{

transform:
translateY(0);

}