/*===============================
      GLOBAL ANIMATIONS
================================*/

html{
    scroll-behavior:smooth;
}

body{
    animation:pageFade 1s ease;
}

@keyframes pageFade{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/*===============================
      NAVBAR
================================*/

.navbar{
    animation:slideTop .8s ease;
}

@keyframes slideTop{
    from{
        opacity:0;
        transform:translateY(-60px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.navbar-nav .nav-link{
    position:relative;
    transition:.4s;
}

.navbar-nav .nav-link::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:#198754;
    transition:.4s;
}

.navbar-nav .nav-link:hover::after{
    width:100%;
}

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

.hero small{
    animation:fadeDown 1s ease;
}

.hero h1{
    animation:fadeLeft 1.2s ease;
}

.hero p{
    animation:fadeRight 1.4s ease;
}

.hero-btn{
    animation:fadeUp 1.6s ease;
}

@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 fadeDown{
    from{
        opacity:0;
        transform:translateY(-40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

.hero-btn{
    transition:.4s;
    box-shadow:0 10px 25px rgba(25,135,84,.3);
}

.hero-btn:hover{
    transform:translateY(-6px) scale(1.05);
    box-shadow:0 20px 40px rgba(25,135,84,.5);
}

/*===============================
      SECTION TITLE
================================*/

.section-title{
    animation:fadeUp 1s ease;
}

.section-title h2{
    position:relative;
}

.section-title h2::after{
    content:'';
    width:80px;
    height:4px;
    background:#198754;
    display:block;
    margin:15px auto;
    border-radius:20px;
}

/*===============================
      CATEGORY CARD
================================*/

.category-card{
    overflow:hidden;
    position:relative;
    transition:.5s;
}

.category-card::before{
    content:'';
    position:absolute;
    left:-120%;
    top:0;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );
}

.category-card:hover::before{
    left:160%;
    transition:1s;
}

.category-card:hover{
    transform:translateY(-15px) scale(1.03);
    box-shadow:0 30px 50px rgba(0,0,0,.15);
}

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

.icon-circle{
    transition:.6s;
}

.category-card:hover .icon-circle{
    transform:rotate(360deg) scale(1.15);
    background:#198754;
}

.category-card:hover i{
    color:white !important;
}

/*===============================
      PRODUCT IMAGE
================================*/

.product-showcase img{
    transition:.6s;
    animation:floating 5s ease-in-out infinite;
}

.product-showcase img:hover{
    transform:scale(1.08);
}

@keyframes floating{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-18px);
    }
}

/*===============================
      CAROUSEL
================================*/

.carousel-item img{
    transition:.8s;
}

.carousel-item:hover img{
    transform:scale(1.08);
}

.carousel-caption{
    animation:fadeUp 1s;
}

/*===============================
      STATS
================================*/

.stats h2{
    animation:zoomIn 1s ease;
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.7);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

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

.footer a{
    transition:.4s;
}

.footer a:hover{
    transform:translateX(8px);
    color:#25d366;
}

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

.whatsapp-float{
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.7);
    }

    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

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

img{
    transition:.5s;
}

img:hover{
    transform:scale(1.03);
}

/*===============================
      BUTTON RIPPLE
================================*/

.hero-btn{
    position:relative;
    overflow:hidden;
}

.hero-btn::before{
    content:'';
    position:absolute;
    width:0;
    height:0;
    background:rgba(255,255,255,.4);
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:.6s;
}

.hero-btn:hover::before{
    width:350px;
    height:350px;
}

/*===============================
      TEXT GRADIENT
================================*/

.hero h1{
    background:linear-gradient(
        90deg,
        #ffffff,
        #9be15d,
        #ffffff
    );
    background-size:300%;
    -webkit-text-fill-color:transparent;
    animation:textMove 5s linear infinite;
}

@keyframes textMove{
    from{
        background-position:0%;
    }
    to{
        background-position:300%;
    }
}

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

.quick-section,
.product-showcase,
.activities,
.stats,
.footer{
    animation:fadeUp 1s ease;
}