/*========================================================
  PANDITHIRE - ANIMATIONS.CSS
========================================================*/


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

.reveal{
    opacity:0;
    transform:translateY(70px);
    transition:opacity .8s ease, transform .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}


/*========================================================
  HERO ENTRY ANIMATIONS
========================================================*/

.hero-left{
    animation:slideLeft 1s ease forwards;
}

.hero-right{
    animation:slideRight 1s ease forwards;
}

.hero-badge{
    animation:fadeDown .8s ease forwards;
}

.hero-buttons{
    animation:fadeUp 1s ease forwards;
}


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

.hero-right img{
    animation:floatImage 5s ease-in-out infinite;
}


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

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

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:rgba(255,255,255,.35);

    transform:skewX(-25deg);

    transition:left .8s ease;

}

.btn-primary:hover::before{

    left:150%;

}


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

.btn,
.service-btn{

    transition:all .35s ease;

}

.btn:hover,
.service-btn:hover{

    transform:translateY(-4px);

}


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

.service-card{

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.service-card img{

    transition:transform .5s ease;

}

.service-card:hover img{

    transform:scale(1.08);

}


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

.service-card i{

    transition:transform .35s ease;

}

.service-card:hover i{

    transform:scale(1.15);

}


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

img{

    transition:transform .4s ease;

}


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

a{

    transition:.3s ease;

}


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

@keyframes slideLeft{

    from{

        opacity:0;
        transform:translateX(-80px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}


@keyframes slideRight{

    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);

    }

}


@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0);

    }

}