/* ==========================================================
   ANIMATIONS.CSS
   Premium Animations for Divyanshu Ventures
========================================================== */


/* ==========================================================
   GLOBAL TRANSITIONS
========================================================== */

*{
    transition:all .3s ease;
}



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

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(60px);
    }

    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(.85);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}



/* ==========================================================
   FLOATING IMAGE
========================================================== */

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0px);
    }

}



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

@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(199,154,59,.5);
    }

    70%{
        box-shadow:0 0 0 20px rgba(199,154,59,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(199,154,59,0);
    }

}



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

.hero-content{

    animation:fadeLeft 1s ease;

}

.hero-image{

    animation:fadeRight 1s ease;

}

.hero-image img{

    animation:floating 5s ease-in-out infinite;

}



/* ==========================================================
   ABOUT
========================================================== */

.about-image{

    animation:zoomIn 1s ease;

}

.about-content{

    animation:fadeUp 1s ease;

}



/* ==========================================================
   CARDS
========================================================== */

.business-card,
.service-card,
.highlight-card,
.why-card,
.process-box{

    animation:fadeUp .8s ease;

}

.business-card:hover,
.service-card:hover,
.highlight-card:hover,
.why-card:hover,
.process-box:hover{

    transform:translateY(-10px);

}



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

.service-card img,
.about-image img,
.hero-image img{

    transition:transform .6s ease;

}

.service-card:hover img,
.about-image:hover img{

    transform:scale(1.08);

}



/* ==========================================================
   BUTTONS
========================================================== */

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary:hover{

    animation:pulse 1.2s;

}



/* ==========================================================
   UNDERLINE ANIMATION
========================================================== */

.nav-menu a{

    position:relative;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#C79A3B;

    transition:.3s;

}

.nav-menu a:hover::after{

    width:100%;

}



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

footer a{

    transition:.3s;

}

footer a:hover{

    padding-left:6px;

}



/* ==========================================================
   ICON ROTATION
========================================================== */

.business-card i,
.why-card i{

    transition:.4s;

}

.business-card:hover i,
.why-card:hover i{

    transform:rotate(10deg) scale(1.15);

}



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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}