/*
|--------------------------------------------------------------------------
| Nexora Digital Animation CSS
|--------------------------------------------------------------------------
*/



/* =========================
   Fade Animations
========================= */


.fade-in{

    animation:fadeIn 1s ease forwards;

}



.fade-up{

    animation:fadeUp 1s ease forwards;

}



.fade-down{

    animation:fadeDown 1s ease forwards;

}




@keyframes fadeIn{


    from{

        opacity:0;

    }


    to{

        opacity:1;

    }


}




@keyframes fadeUp{


    from{

        opacity:0;

        transform:translateY(40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}




@keyframes fadeDown{


    from{

        opacity:0;

        transform:translateY(-40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}






/* =========================
   Slide Animations
========================= */


.slide-left{


    animation:

    slideLeft 1s ease;


}



.slide-right{


    animation:

    slideRight 1s ease;


}





@keyframes slideLeft{


from{


    opacity:0;

    transform:translateX(-50px);


}


to{


    opacity:1;

    transform:translateX(0);


}


}





@keyframes slideRight{


from{


    opacity:0;

    transform:translateX(50px);


}


to{


    opacity:1;

    transform:translateX(0);


}


}






/* =========================
   Zoom Effects
========================= */


.zoom-in{


    animation:

    zoomIn .8s ease;


}



@keyframes zoomIn{


from{


    opacity:0;

    transform:scale(.8);


}


to{


    opacity:1;

    transform:scale(1);


}


}





/* =========================
   Hover Animation
========================= */


.hover-up{


    transition:.3s ease;


}



.hover-up:hover{


    transform:

    translateY(-10px);


}





.hover-scale{


    transition:.3s ease;


}



.hover-scale:hover{


    transform:

    scale(1.05);


}





/* =========================
   Card Animation
========================= */


.service-card,

.portfolio-card,

.testimonial-card{


    transition:

    transform .3s ease,

    box-shadow .3s ease;


}



.service-card:hover,

.portfolio-card:hover,

.testimonial-card:hover{


    transform:

    translateY(-8px);


    box-shadow:

    0 15px 35px rgba(0,0,0,.12);


}







/* =========================
   Button Animation
========================= */


.btn{


    position:relative;

    overflow:hidden;


}



.btn::before{


    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

    rgba(255,255,255,.2);


    transition:.4s;


}



.btn:hover::before{


    left:100%;


}






/* =========================
   Image Hover
========================= */


.portfolio-card img,

.hero-image img{


    transition:

    transform .5s ease;


}



.portfolio-card:hover img{


    transform:

    scale(1.08);


}






/* =========================
   Loader Animation
========================= */


.loader-circle{


    animation:

    spin 1s linear infinite;


}




@keyframes spin{


from{

    transform:rotate(0deg);

}


to{

    transform:rotate(360deg);

}


}






/* =========================
   Floating Animation
========================= */


.float{


    animation:

    floating 3s ease-in-out infinite;


}



@keyframes floating{


0%,100%{


    transform:translateY(0);


}


50%{


    transform:translateY(-15px);


}


}






/* =========================
   Pulse Effect
========================= */


.pulse{


    animation:

    pulse 2s infinite;


}



@keyframes pulse{


0%{


    transform:scale(1);


}


50%{


    transform:scale(1.05);


}


100%{


    transform:scale(1);


}


}






/* =========================
   Scroll Reveal Support
========================= */


.reveal{


    opacity:0;

    transform:translateY(40px);

    transition:

    all .8s ease;


}



.reveal.active{


    opacity:1;

    transform:translateY(0);


}