/*==================================================
    ANIMATIONS
==================================================*/



/*==============================================
    TRANSITIONS
==============================================*/

a,
button,
img,
.card,
.service-card,
.portfolio-card,
.product-card{

    transition: var(--transition);

}



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

@keyframes fadeIn{

    from{

        opacity: 0;

    }

    to{

        opacity: 1;

    }

}



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

@keyframes fadeUp{

    from{

        opacity: 0;

        transform: translateY(50px);

    }

    to{

        opacity: 1;

        transform: translateY(0);

    }

}



/*==============================================
    FADE DOWN
==============================================*/

@keyframes fadeDown{

    from{

        opacity: 0;

        transform: translateY(-50px);

    }

    to{

        opacity: 1;

        transform: translateY(0);

    }

}



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

@keyframes fadeLeft{

    from{

        opacity: 0;

        transform: translateX(-50px);

    }

    to{

        opacity: 1;

        transform: translateX(0);

    }

}



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

@keyframes fadeRight{

    from{

        opacity: 0;

        transform: translateX(50px);

    }

    to{

        opacity: 1;

        transform: translateX(0);

    }

}



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

@keyframes zoomIn{

    from{

        opacity: 0;

        transform: scale(.8);

    }

    to{

        opacity: 1;

        transform: scale(1);

    }

}



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

@keyframes float{

    0%{

        transform: translateY(0);

    }

    50%{

        transform: translateY(-15px);

    }

    100%{

        transform: translateY(0);

    }

}



/*==============================================
    ROTATE
==============================================*/

@keyframes rotate{

    from{

        transform: rotate(0deg);

    }

    to{

        transform: rotate(360deg);

    }

}



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

@keyframes pulse{

    0%{

        transform: scale(1);

    }

    50%{

        transform: scale(1.05);

    }

    100%{

        transform: scale(1);

    }

}



/*==============================================
    BOUNCE
==============================================*/

@keyframes bounce{

    0%{

        transform: translateY(0);

    }

    50%{

        transform: translateY(-12px);

    }

    100%{

        transform: translateY(0);

    }

}



/*==============================================
    ANIMATION CLASSES
==============================================*/

.fade-in{

    animation: fadeIn .8s ease forwards;

}



.fade-up{

    animation: fadeUp .8s ease forwards;

}



.fade-down{

    animation: fadeDown .8s ease forwards;

}



.fade-left{

    animation: fadeLeft .8s ease forwards;

}



.fade-right{

    animation: fadeRight .8s ease forwards;

}



.zoom-in{

    animation: zoomIn .8s ease forwards;

}



.float{

    animation: float 4s ease-in-out infinite;

}



.pulse{

    animation: pulse 2.5s infinite;

}



.bounce{

    animation: bounce 2s infinite;

}



.rotate{

    animation: rotate 12s linear infinite;

}