.counter{
font-family: 'Poppins', sans-serif;
text-align: center;
padding: 0 20px 20px;
position: relative;
z-index: 1;
}
.counter:before,
.counter:after{
content: "";
border: 5px solid #0E88FE;
border-radius: 100px 100px 0 0/50px 50px 0 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 30px;
bottom: 0;
z-index: -1;
}
.counter:after{
background-color: #fff;
border: none;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
left: 10px;
right: 10px;
top: 6px;
bottom: 10px;
}
.counter .counter-icon{
color: #fff;
background-color: #0E88FE;
font-size: 32px;
line-height: 32px;
line-height: 85px;
width: 60px;
height: 75px;
margin: 0 auto 20px;
border-radius: 40px 40px 50px 50px/ 15px 15px 50px 50px;
box-shadow: 0 0 10px rgba(0,0,0,0.4) inset;
}
.counter h3{
color: #666;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: capitalize;
margin: 0 0 13px;
}
.counter .counter-value{
font-size: 33px;
font-weight: 800;
}
.counter.darkgreen:before{ border-color: #096C7F; }
.counter.darkgreen .counter-icon{ background-color: #096C7F; }
.counter.green:before{ border-color: #5EB05E; }
.counter.green .counter-icon{ background-color: #5EB05E; }
.counter.purple:before{ border-color: #770C80; }
.counter.purple .counter-icon{ background-color: #770C80; }
@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));
}
});
});
});