/*=========================================
        FLOATING LEAVES
=========================================*/

.floating-leaves{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:1;
}

.leaf{
    position:absolute;
    width:35px;
    opacity:.25;
    animation:leafFall linear infinite;
}

.leaf1{
    left:5%;
    animation-duration:14s;
    animation-delay:0s;
}

.leaf2{
    left:25%;
    animation-duration:18s;
    animation-delay:3s;
}

.leaf3{
    left:50%;
    animation-duration:16s;
    animation-delay:5s;
}

.leaf4{
    left:75%;
    animation-duration:20s;
    animation-delay:2s;
}

.leaf5{
    left:90%;
    animation-duration:15s;
    animation-delay:7s;
}

@keyframes leafFall{

    0%{
        transform:translateY(-120px) rotate(0deg);
    }

    100%{
        transform:translateY(110vh) rotate(360deg);
    }

}

/*=========================================
        FLOATING FRUITS
=========================================*/

.fruit{
    position:absolute;
    width:90px;
    animation:float 5s ease-in-out infinite;
}

.fruit1{
    top:20%;
    right:8%;
}

.fruit2{
    bottom:20%;
    right:18%;
    animation-delay:1.5s;
}

.fruit3{
    top:55%;
    left:8%;
    animation-delay:3s;
}

@keyframes float{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-20px);
    }

}

/*=========================================
        HERO TEXT
=========================================*/

.hero-content{
    animation:fadeUp 1.2s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/*=========================================
        BUTTON HOVER
=========================================*/

.btn,
.btn-outline{
    transition:.35s ease;
}

.btn:hover,
.btn-outline:hover{
    transform:translateY(-4px) scale(1.03);
}

/*=========================================
        CARD HOVER
=========================================*/

.feature,
.product-card,
.value-card,
.testimonial-card,
.gallery-item{
    transition:.35s ease;
}

.feature:hover,
.product-card:hover,
.value-card:hover,
.testimonial-card:hover,
.gallery-item:hover{
    transform:translateY(-10px);
}

/*=========================================
        GALLERY IMAGE
=========================================*/

.gallery-item{
    overflow:hidden;
}

.gallery-item img{
    transition:.45s;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

/*=========================================
        WHATSAPP PULSE
=========================================*/

.whatsapp{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.5);
    }

    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }

}

/*=========================================
        SCROLL INDICATOR
=========================================*/

.scroll-down{

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{
        transform:translate(-50%,0);
    }

    40%{
        transform:translate(-50%,-10px);
    }

    60%{
        transform:translate(-50%,-5px);
    }

}

/*=========================================
        LOADER
=========================================*/

#loader img{

    animation:logoSpin 2s infinite ease-in-out;

}

@keyframes logoSpin{

    0%{
        transform:scale(.9);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(.9);
    }

}

/*=========================================
        FADE-IN ON SCROLL
=========================================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*=========================================
        SMOOTH IMAGE SHADOW
=========================================*/

.gallery-item:hover,
.product-card:hover{

    box-shadow:0 25px 45px rgba(0,0,0,.18);

}