/*==================================================
MOBIS HAIR
ANIMATIONS.CSS
==================================================*/


/*=========================================
KEYFRAMES
=========================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes zoomOut{

    from{

        transform:scale(1.18);

    }

    to{

        transform:scale(1);

    }

}



@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}



@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}



@keyframes scrollLine{

    0%{

        height:15px;

        opacity:.2;

    }

    50%{

        height:55px;

        opacity:1;

    }

    100%{

        height:15px;

        opacity:.2;

    }

}



@keyframes loader{

    from{

        left:-100%;

    }

    to{

        left:100%;

    }

}



@keyframes rotateSlow{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}




/*=========================================
PRELOADER
=========================================*/

.loader-line::before{

    animation:loader 1.5s linear infinite;

}



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

.hero-bg{

    animation:zoomOut 4s ease forwards;

}

.hero-content{

    animation:fadeUp 1.2s ease;

}

.hero-buttons{

    animation:fadeUp 1.5s ease;

}

.scroll-indicator span{

    animation:scrollLine 2s infinite;

}



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

.floating-whatsapp{

    animation:pulse 2.5s infinite;

}



/*=========================================
IMAGES
=========================================*/

.about-image img{

    animation:floatImage 8s ease-in-out infinite;

}

.experience-image img{

    animation:floatImage 10s ease-in-out infinite;

}



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

.collection-card:hover img,

.packaging-gallery img:hover,

.about-image:hover img,

.experience-image:hover img{

    transition:1s ease;

}



.btn-primary,

.btn-secondary,

.service-box,

.collection-card,

.why-card,

.mini-card{

    transition:.45s ease;

}