.demo{ background-color: #e9e9e9; }
.counter{
color: #1C6E87;
font-family: 'Poppins', sans-serif;
text-align: center;
padding: 0 20px;
}
.counter .counter-icon{
font-size: 45px;
line-height: 80px;
width: 80px;
height: 80px;
margin: 0 auto 10px;
border-radius: 50%;
border: 2px solid #1C6E87;
}
.counter .counter-content{
background-color: #fff;
padding: 15px 15px 15px;
border: 10px solid #1C6E87;
border-left: none;
border-right: none;
}
.counter .counter-value{
color: #fff;
background:#1C6E87;
font-size: 28px;
font-weight: 500;
letter-spacing: 2px;
padding: 6px 6px 3px;
margin: 0 -35px 15px;
display: block;
}
.counter h3{
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 22px;
margin: 0;
}
.counter.green{ color: #3FA599; }
.counter.green .counter-icon,
.counter.green .counter-content{
border-color: #3FA599;
}
.counter.green .counter-value{ background: #3FA599; }
.counter.yellow{ color: #ed7e2a; }
.counter.yellow .counter-icon,
.counter.yellow .counter-content{
border-color: #ed7e2a;
}
.counter.yellow .counter-value{ background: #ed7e2a; }
.counter.red{ color: #DE5644; }
.counter.red .counter-icon,
.counter.red .counter-content{
border-color: #DE5644;
}
.counter.red .counter-value{ background: #DE5644; }
@media screen and (max-width:990px){
.counter{ margin-bottom: 40px; }
}