<style type="text/css">
.demo{ padding: 2em 0;}
.counter{
	/* padding: 20px 0; */
	text-align: center;
	position: relative;
}
.counter .counter-content{
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #fff;
	padding: 20px 0;
	margin: 0 auto -6px;
	z-index: 1;
	position: relative;
	transition: all 0.3s ease 0s;
}
.counter .counter-content:before{
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 9px solid #0c2e8a;
	border-bottom: 20px solid transparent;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.counter .counter-content:after{
	content: "";
    border-top: 11px solid #0c2e8a;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}
.counter .counter-icon{
	display: block;
	font-size: 50px;
	color: #0c2e8a;
	line-height: 50px;
}
.counter .counter-value{
	font-size: 30px;
	font-weight: 700;
	color: rgba(0,0,0,0.7);
	/* line-height: 70px; */
}
.counter .title{
	    display: inline-block;
    padding: 4px 6px;
    background: #0c2e8a;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
    margin: 0;
}
.counter.red .counter-content:before{
	border-color: #6bb0de;
	border-bottom-color: transparent;
}
.counter.red .counter-content:after{ border-top-color: #6bb0de; }
.counter.red .counter-icon{ color: #6bb0de; }
.counter.red .title{ background: #6bb0de; }
.counter.blue .counter-content:before{
	border-color: #50d8af;
	border-bottom-color: transparent;
}
.counter.blue .counter-content:after{ border-top-color: #50d8af; }
.counter.blue .counter-icon{ color: #50d8af; }
.counter.blue .title{ background: #50d8af; }
.counter.purple .counter-content:before{
	border-color: #a98ceb;
	border-bottom-color: transparent;
}
.counter.purple .counter-content:after{ border-top-color: #a98ceb; }
.counter.purple .counter-icon{ color: #a98ceb; }
.counter.purple .title{ background: #a98ceb; }
</style>