.counter{
color: #3b98cb;
font-family: 'Poppins', sans-serif;
text-align: center;
width: 210px;
padding: 0 15px 25px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.counter:before,
.counter:after{
content: "";
border: 2px solid #3b98cb;
border-radius: 10px;
box-shadow: 0 7px 7px rgba(59, 152, 203,0.5);
position: absolute;
top: 36px;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.counter:after{
box-shadow: none;
top: 46px;
left: 10px;
right: 10px;
bottom: 10px;
}
.counter .counter-icon{
background-color: #3b98cb;
font-size: 40px;
line-height: 85px;
width: 85px;
height: 85px;
margin: 0 auto 7px;
position: relative;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.counter .counter-icon:before{
content: "";
background: #fff;
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
clip-path: inherit;
z-index: -1;
}
.counter .counter-value{
font-size: 35px;
font-weight: 600;
margin: 0 0 5px;
display: block;
}
.counter h3{
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
margin: 0;
}
.counter.blue{ color: #1460F5; }
.counter.blue:before,
.counter.blue:after{
border-color: #1460F5;
}
.counter.blue:before{ box-shadow: 0 7px 7px rgba(20,96,245,0.5); }
.counter.blue .counter-icon{ background-color: #1460F5; }
.counter.darkblue{ color: #1b344f; }
.counter.darkblue:before,
.counter.darkblue:after{
border-color: #1b344f;
}
.counter.darkblue:before{ box-shadow: 0 7px 7px rgba(27,52,79,0.5); }
.counter.darkblue .counter-icon{ background-color: #1b344f; }
.counter.gray{ color: #6F6F6F; }
.counter.gray:before,
.counter.gray:after{
border-color: #6F6F6F;
}
.counter.gray:before{ box-shadow: 0 7px 7px rgba(111,111,111,0.5); }
.counter.gray .counter-icon{ background-color: #6F6F6F; }
@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));
}
});
});
});