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


@keyframes fadeIn{

from{

    opacity:0;

}

to{

    opacity:1;

}

}



.fade-in{

    animation:fadeIn 1s ease;

}







/* =========================
   SLIDE UP
========================= */


@keyframes slideUp{


from{

    opacity:0;

    transform:translateY(50px);

}



to{

    opacity:1;

    transform:translateY(0);

}


}



.product-card,
.category-card,
.value-card{


    animation:slideUp .8s ease forwards;

}







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


.hero-content{


    animation:slideUp 1.2s ease;


}







/* =========================
   BUTTON EFFECT
========================= */


.btn,
.product-card a,
.cta a{


    transition:.4s;


}



.btn:hover,
.product-card a:hover,
.cta a:hover{


    transform:scale(1.05);


}







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


.product-card img,
.category-card img{


    transition:.5s;


}



.product-card:hover img,
.category-card:hover img{


    transform:scale(1.08);


}







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


.product-card,
.category-card,
.value-card{


    transition:.4s;


}



.product-card:hover,
.category-card:hover,
.value-card:hover{


    box-shadow:0 20px 40px rgba(0,0,0,.18);


}







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


.whatsapp{


    animation:pulse 2s infinite;


}



@keyframes pulse{


0%{

    transform:scale(1);

}


50%{

    transform:scale(1.1);

}


100%{

    transform:scale(1);

}


}







/* =========================
   NAVIGATION ANIMATION
========================= */


.nav-links a{


    position:relative;


}



.nav-links a::after{


    content:"";

    position:absolute;

    width:0;

    height:2px;

    background:#D62828;

    left:0;

    bottom:-5px;

    transition:.3s;


}



.nav-links a:hover::after{


    width:100%;


}