/* ==========================================================
   KITTU BITTU FOODS
   Premium Animations v1.0
==========================================================*/


/* ==========================================================
   VARIABLES
==========================================================*/

:root{

    --ease:cubic-bezier(.22,.61,.36,1);

}



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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



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

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



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

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}



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

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}



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

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}



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

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:140%;

    }

}



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

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



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

.speciality-card,
.why-card,
.product-card,
.offer-card,
.review-card,
.social-card,
.stat-card{

    transition:

        transform .35s var(--ease),

        box-shadow .35s var(--ease);

}

.speciality-card:hover,
.why-card:hover,
.product-card:hover,
.offer-card:hover,
.review-card:hover,
.social-card:hover,
.stat-card:hover{

    transform:

        translateY(-10px);

}



/* ==========================================================
   IMAGE ZOOM
==========================================================*/

.product-image,

.offer-image,

.hero-image-wrapper{

   /*  overflow:hidden; */

}

.product-image img,

.offer-image img,

.hero-image{

    transition:

        transform .6s var(--ease);

}

.product-card:hover img,

.offer-card:hover img,

.hero-image-wrapper:hover img{

    transform:scale(1.06);

}



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

.btn{

    position:relative;

    overflow:hidden;

}

.btn::after{

    content:"";

    position:absolute;

    width:45px;

    height:220%;

    left:-120px;

    top:-50%;

    background:

        rgba(255,255,255,.25);

    transform:

        rotate(25deg);

}

.btn:hover::after{

    animation:

        shine

        .8s;

}



/* ==========================================================
   ICON ANIMATION
==========================================================*/

.social-icon{

    transition:.35s;

}

.social-card:hover .social-icon{

    transform:

        rotate(-10deg)

        scale(1.15);

}



/* ==========================================================
   FLOATING ICONS
==========================================================*/

.floating-card,

.hero-rating-card,

.experience-card{

    animation:

        floating

        6s

        ease-in-out

        infinite;

}



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

.whatsapp-btn{

    animation:

        pulse

        3s infinite;

}



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

.hero-badge{

    animation:

        fadeLeft

        .8s;

}



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

.hero-title{

    animation:

        fadeUp

        .9s;

}



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

.hero-media{

    animation:

        fadeRight

        1s;

}



/* ==========================================================
   SECTION HEADINGS
==========================================================*/

.section-heading{

    animation:

        fadeUp

        .8s;

}



/* ==========================================================
   SCROLL ICON
==========================================================*/

.scroll-indicator i{

    animation:

        bounce

        2s infinite;

}



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

.footer-social a{

    transition:.35s;

}

.footer-social a:hover{

    transform:

        translateY(-6px)

        rotate(6deg);

}



/* ==========================================================
   LOGO
==========================================================*/

.logo-image{

    transition:.35s;

}

.brand-logo:hover .logo-image{

    transform:

        rotate(-4deg)

        scale(1.05);

}



/* ==========================================================
   REVEAL
==========================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}



/* ==========================================================
   STAGGER
==========================================================*/

.products-grid .product-card:nth-child(1){

    animation-delay:.1s;

}

.products-grid .product-card:nth-child(2){

    animation-delay:.2s;

}

.products-grid .product-card:nth-child(3){

    animation-delay:.3s;

}

.products-grid .product-card:nth-child(4){

    animation-delay:.4s;

}



/* ==========================================================
   DISABLE ON MOBILE
==========================================================*/

@media(max-width:768px){

.hero-image,

.floating-card,

.hero-rating-card,

.experience-card{

    animation:none;

}

}

@media (prefers-reduced-motion: reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}