/* ==================================================
   LEGALANT ENGINEERING
   ANIMATIONS
================================================== */

/* ===========================
   FADE IN UP
=========================== */

@keyframes fadeInUp{

    from{
        opacity:0;
        transform:translateY(60px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.fade-up{
    animation:fadeInUp .9s ease forwards;
}

/* ===========================
   FADE LEFT
=========================== */

@keyframes fadeLeft{

    from{
        opacity:0;
        transform:translateX(-60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

.fade-left{
    animation:fadeLeft .9s ease forwards;
}

/* ===========================
   FADE RIGHT
=========================== */

@keyframes fadeRight{

    from{
        opacity:0;
        transform:translateX(60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

.fade-right{
    animation:fadeRight .9s ease forwards;
}

/* ===========================
   ZOOM IN
=========================== */

@keyframes zoomIn{

    from{
        opacity:0;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

.zoom-in{
    animation:zoomIn .8s ease forwards;
}

/* ===========================
   FLOAT
=========================== */

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}

.float{
    animation:floating 4s ease-in-out infinite;
}

/* ===========================
   PULSE
=========================== */

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

.pulse{
    animation:pulse 2s infinite;
}

/* ===========================
   BUTTON SHINE
=========================== */

.btn{
    position:relative;
    overflow:hidden;
}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.7s;

}

.btn:hover::before{

    left:100%;

}

/* ===========================
   CARD HOVER
=========================== */

.service-card{

    transition:.4s;

}

.service-card:hover{

    transform:translateY(-10px);

}

/* ===========================
   IMAGE HOVER
=========================== */

.image-box{

    overflow:hidden;

}

.image-box img{

    transition:.5s;

}

.image-box:hover img{

    transform:scale(1.08);

}

/* ===========================
   SOCIAL ICONS
=========================== */

.footer-social a{

    transition:.35s;

}

.footer-social a:hover{

    transform:translateY(-5px) rotate(360deg);

}

/* ===========================
   NAV LINKS
=========================== */

.nav-link{

    transition:.3s;

}

.nav-link:hover{

    transform:translateY(-2px);

}

/* ===========================
   BACK TO TOP
=========================== */

#backToTop{

    transition:.35s;

}

#backToTop:hover{

    transform:translateY(-6px);

}

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

.hero-content{

    animation:fadeInUp 1s ease;

}

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

.section-title{

    animation:fadeInUp .8s ease;

}