.counter{
color: #f14159;
font-family: 'Poppins', sans-serif;
text-align: center;
}
.counter .counter-icon{
color: #fff;
background: #d36308;
font-size: 40px;
line-height: 90px;
width: 120px;
height: 100px;
margin: 0 auto 3px;
transform: rotateX(35deg);
position: relative;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.counter .counter-icon:before{
content: '';
background: linear-gradient(to right,#F5BD01,#EE8903);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 12px;
z-index: -1;
clip-path: inherit;
}
.counter .counter-value{
color: transparent;
background: linear-gradient(to right,#F5BD01,#EE8903);
font-size: 30px;
font-weight: 600;
margin: 0 0 12px;
display: block;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
text-fill-color: transparent;
}
.counter .counter-value:after{
content: '';
background: linear-gradient(to right,#F5BD01,#EE8903);
height: 2px;
width: 40%;
margin: 3px auto 0;
display: block;
clear: both;
}
.counter h3{
color: #555;
font-size: 17px;
font-weight: 500;
text-transform: capitalize;
margin: 0;
}
.counter.purple .counter-icon{ background-color: #6F27B2; }
.counter.purple .counter-value{
background: linear-gradient(to right,#B874ED,#9641D7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.counter.purple .counter-icon:before,
.counter.purple .counter-value:after{ background: linear-gradient(to right,#B874ED,#9641D7); }
.counter.green .counter-icon{ background-color: #3DA934; }
.counter.green .counter-value{
background: linear-gradient(to right,#A0EA63,#3cbf28);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.counter.green .counter-icon:before,
.counter.green .counter-value:after{ background: linear-gradient(to right,#A0EA63,#3cbf28); }
.counter.blue .counter-icon{ background-color: #005DCE; }
.counter.blue .counter-value{
background: linear-gradient(to right,#27A3FB,#0170F4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.counter.blue .counter-icon:before,
.counter.blue .counter-value:after{ background: linear-gradient(to right,#27A3FB,#0170F4); }
@media screen and (max-width:990px){
.counter{ margin-bottom: 40px; }
}
$(document).ready(function(){
$('.counter-value').each(function(){
$(this).prop('Counter',0).animate({
Counter: $(this).text()
},{
duration: 3500,
easing: 'swing',
step: function (now){
$(this).text(Math.ceil(now));
}
});
});
});