/*==================================================
PAWAR HARDWARE V1
ANIMATIONS.CSS
==================================================*/

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

.fade-up{
opacity:0;
transform:translateY(70px);
transition:all .8s ease;
}

.fade-up.show{
opacity:1;
transform:translateY(0);
}


/*==============================
FADE DOWN
==============================*/

.fade-down{
opacity:0;
transform:translateY(-70px);
transition:all .8s ease;
}

.fade-down.show{
opacity:1;
transform:translateY(0);
}


/*==============================
FADE LEFT
==============================*/

.fade-left{
opacity:0;
transform:translateX(-70px);
transition:all .8s ease;
}

.fade-left.show{
opacity:1;
transform:translateX(0);
}


/*==============================
FADE RIGHT
==============================*/

.fade-right{
opacity:0;
transform:translateX(70px);
transition:all .8s ease;
}

.fade-right.show{
opacity:1;
transform:translateX(0);
}


/*==============================
ZOOM IN
==============================*/

.zoom-in{
opacity:0;
transform:scale(.85);
transition:all .8s ease;
}

.zoom-in.show{
opacity:1;
transform:scale(1);
}


/*==============================
ZOOM OUT
==============================*/

.zoom-out{
opacity:0;
transform:scale(1.15);
transition:all .8s ease;
}

.zoom-out.show{
opacity:1;
transform:scale(1);
}


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

.rotate-in{
opacity:0;
transform:rotate(-10deg) scale(.9);
transition:all .8s ease;
}

.rotate-in.show{
opacity:1;
transform:rotate(0) scale(1);
}


/*==============================
FLOAT
==============================*/

.float{

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

}

@keyframes float{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}


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

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}


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

.btn{

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

width:0;

height:0;

left:50%;

top:50%;

border-radius:50%;

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

transform:translate(-50%,-50%);

transition:.6s;

}

.btn:hover::before{

width:420px;

height:420px;

}


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

.img-hover{

overflow:hidden;

}

.img-hover img{

transition:.5s;

}

.img-hover:hover img{

transform:scale(1.12);

}


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

.hover-up{

transition:.35s;

}

.hover-up:hover{

transform:translateY(-12px);

}


/*==============================
SHADOW HOVER
==============================*/

.shadow-hover{

transition:.35s;

}

.shadow-hover:hover{

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

}


/*==============================
SPIN
==============================*/

.spin{

animation:spin 6s linear infinite;

}

@keyframes spin{
100%{
transform:rotate(360deg);
}
}



/*==============================
SHAKE
==============================*/

.shake:hover{

animation:shake .6s;

}

@keyframes shake{

0%{transform:translateX(0);}
20%{transform:translateX(-4px);}
40%{transform:translateX(4px);}
60%{transform:translateX(-4px);}
80%{transform:translateX(4px);}
100%{transform:translateX(0);}

}


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

.gradient-text{

background:linear-gradient(
90deg,
var(--secondary),
#ffb347,
var(--secondary)
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-size:200%;

animation:gradientMove 6s linear infinite;

}

@keyframes gradientMove{

0%{
background-position:0%;
}

100%{
background-position:200%;
}

}


/*==============================
BORDER GLOW
==============================*/

.glow{

transition:.35s;

}

.glow:hover{

box-shadow:
0 0 20px rgba(245,124,0,.45),
0 0 60px rgba(245,124,0,.25);

}


/*==============================
SCROLL INDICATOR
==============================*/

.scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:var(--secondary);

z-index:99999;

}


/*==============================
LOADER
==============================*/

.loader{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

z-index:999999;

}

.loader::after{

content:"";

width:70px;

height:70px;

border-radius:50%;

border:6px solid #eee;

border-top-color:var(--secondary);

animation:loaderSpin 1s linear infinite;

}

@keyframes loaderSpin{
100%{
transform:rotate(360deg);
}
}


/*==============================
BLUR IN
==============================*/

.blur-in{

opacity:0;

filter:blur(15px);

transition:.8s;

}

.blur-in.show{

opacity:1;

filter:blur(0);

}


/*==============================
STAGGER DELAYS
==============================*/

.delay-1{transition-delay:.1s;}
.delay-2{transition-delay:.2s;}
.delay-3{transition-delay:.3s;}
.delay-4{transition-delay:.4s;}
.delay-5{transition-delay:.5s;}
.delay-6{transition-delay:.6s;}
.delay-7{transition-delay:.7s;}
.delay-8{transition-delay:.8s;}
.delay-9{transition-delay:.9s;}
.delay-10{transition-delay:1s;}