.counter{
color: #fff;
background: linear-gradient(to right,#fa061b 49%,#d60615 50%);
font-family: 'Poppins', sans-serif;
text-align: center;
width: 210px;
height: 210px;
padding: 70px 15px 0;
margin: 0 auto 50px;
border-radius: 50%;
}
.counter h3{
font-size: 17px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 0 0 10px;
}
.counter .counter-icon{
font-size: 35px;
margin: 0 0 5px;
}
.counter .counter-value{
color: #fff;
background: rgba(0,0,0,0.35);
font-size: 30px;
font-weight: 700;
line-height: 125px;
width: 100px;
height: 100px;
margin: 0 auto;
display: block;
position: relative;
clip-path: polygon(50% 0%, 100% 30%, 100% 100%, 0 100%, 0% 30%);
}
.counter .counter-value:before{
content: "";
background: linear-gradient(to right,#f51f4b 49%,#db1f40 50%);
width: 100%;
height: 100%;
transform: translateX(-50%);
position: absolute;
bottom: 0;
left: 50%;
z-index: -1;
clip-path: polygon(50% 12%, 100% 42%, 100% 100%, 0 100%, 0% 42%);
}
.counter.green{ background: linear-gradient(to right,#0e803a 49%,#026a2b 50%); }
.counter.green .counter-value:before{ background: linear-gradient(to right,#05b173 49%,#049660 50%); }
.counter.blue{ background: linear-gradient(to right,#2803a3 49%,#1f0474 50%); }
.counter.blue .counter-value:before{ background: linear-gradient(to right,#5a0bbb 49%,#4f0e9f 50%); }
.counter.orange{ background: linear-gradient(to right,#ff3701 49%,#dd2d02 50%); }
.counter.orange .counter-value:before{ background: linear-gradient(to right,#f87805 49%,#da6404 50%); }
@media screen and (max-width:990px){
.counter{ margin-bottom: 90px; }
}
$(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));
}
});
});
});