/*=========================================
ANIMACIONES SAGÑAY DIGITAL
=========================================*/

/* Fade */

@keyframes fadeUp{

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

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes fadeLeft{

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

100%{
opacity:1;
transform:translateX(0);
}

}

@keyframes fadeRight{

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

100%{
opacity:1;
transform:translateX(0);
}

}

@keyframes zoomIn{

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

100%{
opacity:1;
transform:scale(1);
}

}

@keyframes floating{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

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

.hero-content{

animation:fadeLeft 1s ease forwards;

}

.hero-image{

animation:fadeRight 1s ease forwards;

}

.hero-image img{

animation:floating 5s ease-in-out infinite;

}

/*=========================================
BOTONES
=========================================*/

.btn-primary,
.btn-secondary,
.btn-header{

transition:.35s;

}

.btn-primary:hover,
.btn-secondary:hover,
.btn-header:hover{

transform:translateY(-5px);

}

/*=========================================
TARJETAS
=========================================*/

.service-card,
.portfolio-card,
.why-card,
.stat-card{

animation:fadeUp .8s ease;

transition:.35s;

}

.service-card:hover,
.portfolio-card:hover,
.why-card:hover,
.stat-card:hover{

transform:translateY(-12px);

}

/*=========================================
IMÁGENES
=========================================*/

.service-card img,
.portfolio-card img{

transition:.35s;

}

.service-card:hover img{

transform:scale(1.08);

}

.portfolio-card:hover img{

transform:scale(1.05);

}

/*=========================================
FOOTER
=========================================*/

.footer-social a{

transition:.35s;

}

.footer-social a:hover{

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

}

/*=========================================
WHATSAPP
=========================================*/

.whatsapp{

animation:floating 3s ease-in-out infinite;

transition:.35s;

}

.whatsapp:hover{

transform:scale(1.15);

}

/*=========================================
SCROLL SUAVE
=========================================*/

section{

animation:fadeUp .8s ease;

}
.fade-up{
    opacity:0;
    transform:translateY(50px);
    transition:opacity .8s ease, transform .8s ease;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

.fade-left{
    opacity:0;
    transform:translateX(-50px);
    transition:opacity .8s ease, transform .8s ease;
}

.fade-left.show{
    opacity:1;
    transform:translateX(0);
}

.fade-right{
    opacity:0;
    transform:translateX(50px);
    transition:opacity .8s ease, transform .8s ease;
}

.fade-right.show{
    opacity:1;
    transform:translateX(0);
}