.counter{
color: #f97100;
font-family: 'Oswald', sans-serif;
text-align: center;
width: 210px;
padding: 0 20px 15px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.counter:before,
.counter:after{
content: "";
background: #f97100;
position: absolute;
top: 0;
left: 10px;
right: 10px;
bottom: 0;
z-index: -1;
}
.counter:after{
background: linear-gradient(to bottom,#fdfdfd,#e6e6e6);
border: 10px solid #f97100;
border-top: none;
left: 0;
top: 20px;
right: 0;
bottom: 0;
}
.counter .counter-icon{
color:#fff;
background: #f97100;
font-size: 40px;
line-height: 95px;
width: 85px;
height: 85px;
margin: 0 auto 20px;
border-radius: 50%;
}
.counter .counter-value{
font-size: 35px;
font-weight: 600;
margin: 0 0 10px;
display: block;
}
.counter h3{
color: #333;
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: capitalize;
margin: 0 0 15px;
}
.counter .dots{
padding: 0;
margin: 0;
list-style: none;
}
.counter .dots li{
background: #f97100;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50px;
margin: 0 5px 0 0;
}
.counter.blue{ color: #008BC7; }
.counter.blue:before,
.counter.blue .counter-icon,
.counter.blue .dots li{
background: #008BC7;
}
.counter.blue:after{ border-color: #008BC7; }
.counter.darkblue{ color: #0A456A; }
.counter.darkblue:before,
.counter.darkblue .counter-icon,
.counter.darkblue .dots li{
background: #0A456A;
}
.counter.darkblue:after{ border-color: #0A456A; }
.counter.gray{ color: #69819D; }
.counter.gray:before,
.counter.gray .counter-icon,
.counter.gray .dots li{
background: #69819D;
}
.counter.gray:after{ border-color: #69819D; }
@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));
}
});
});
});