/*====================================================
        ANIMATIONS
        Omkar Packers Gulati
====================================================*/


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

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(60px);

}

100%{

opacity:1;
transform:translateY(0);

}

}


@keyframes fadeDown{

0%{

opacity:0;
transform:translateY(-60px);

}

100%{

opacity:1;
transform:translateY(0);

}

}


@keyframes fadeLeft{

0%{

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

}

100%{

opacity:1;
transform:translateX(0);

}

}


@keyframes fadeRight{

0%{

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

}

100%{

opacity:1;
transform:translateX(0);

}

}


@keyframes zoomIn{

0%{

opacity:0;
transform:scale(.7);

}

100%{

opacity:1;
transform:scale(1);

}

}


/*************************************************
SECTION ANIMATION
*************************************************/

.heroLeft{

animation:fadeLeft 1s ease forwards;

}

.heroRight{

animation:fadeRight 1s ease forwards;

}

.sectionTitle{

animation:fadeUp .9s ease;

}


/*************************************************
FLOATING EFFECT
*************************************************/

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

.heroLogo{

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

}

.logo-small{

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

}


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

.categoryCard,
.whyCard,
.industryCard,
.experienceCard{

transition:

transform .35s ease,

box-shadow .35s ease;

}

.categoryCard:hover,
.whyCard:hover,
.industryCard:hover,
.experienceCard:hover{

transform:translateY(-12px);

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

}


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

.categoryCard{

overflow:hidden;

}

.categoryCard img{

transition:transform .55s ease;

}

.categoryCard:hover img{

transform:scale(1.08);

}


/*************************************************
BUTTONS
*************************************************/

.primaryBtn,
.secondaryBtn{

position:relative;

overflow:hidden;

}

.primaryBtn::before{

content:"";

position:absolute;

width:0;

height:100%;

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

left:0;

top:0;

transition:.45s;

}

.primaryBtn:hover::before{

width:100%;

}


/*************************************************
UNDERLINE
*************************************************/

.nav-links a{

transition:.3s;

}

.nav-links a:hover{

transform:translateY(-2px);

}


/*************************************************
SCROLL BUTTON
*************************************************/

.scrollTop{

transition:.35s;

}

.scrollTop:hover{

transform:translateY(-8px);

background:#d60000;

}


/*************************************************
FLOATING BUTTONS
*************************************************/

.floatingCall,
.floatingWhatsapp{

animation:pulse 2.5s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(214,0,0,.45);

}

70%{

box-shadow:0 0 0 22px rgba(214,0,0,0);

}

100%{

box-shadow:0 0 0 0 rgba(214,0,0,0);

}

}


/*************************************************
TEXT
*************************************************/

h1,
h2,
h3{

transition:.35s;

}

.categoryCard:hover h3{

color:#d60000;

}

.whyCard:hover h3{

color:#fff;

}


/*************************************************
FOOTER
*************************************************/

.footerLogo{

transition:.4s;

}

.footerLogo:hover{

transform:rotate(-3deg) scale(1.04);

}


/*************************************************
REVEAL CLASSES
*************************************************/

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .9s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}


/*************************************************
DELAY CLASSES
*************************************************/

.delay1{

transition-delay:.15s;

}

.delay2{

transition-delay:.3s;

}

.delay3{

transition-delay:.45s;

}

.delay4{

transition-delay:.6s;

}


/*************************************************
SMOOTH IMAGE SHADOW
*************************************************/

img{

transition:.45s;

}

img:hover{

filter:brightness(1.03);

}


/*************************************************
STATS
*************************************************/

.stat{

transition:.35s;

}

.stat:hover{

transform:translateY(-10px);

}


/*************************************************
MAP
*************************************************/

.mapContainer iframe{

transition:.45s;

}

.mapContainer:hover iframe{

transform:scale(1.02);

}


/*************************************************
CTA
*************************************************/

.cta{

position:relative;

overflow:hidden;

}

.cta::before{

content:"";

position:absolute;

top:-120px;

left:-120px;

width:280px;

height:280px;

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

border-radius:50%;

}

.cta::after{

content:"";

position:absolute;

bottom:-120px;

right:-120px;

width:280px;

height:280px;

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

border-radius:50%;

}