.demo{ background-color: #e7e7e7; }
.counter{
font-family: 'Nunito Sans', sans-serif;
background: #fff;
text-align: center;
width: 200px;
min-height: 215px;
padding: 10px 15px;
margin: 0 auto;
border-radius: 30px;
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.2);
position: relative;
}
.counter:before{
content: '';
background-color: #9DD662;
height: 105px;
width: 100%;
border-radius: 30px 30px 0 0;
position: absolute;
left: 0;
top: 0;
}
.counter .counter-icon{
color: #fff;
background: #7CA936;
font-size: 50px;
line-height: 90px;
width: 120px;
height: 100px;
margin: 0 auto 10px;
border-radius: 10px 10px 0 0;
transform: translateY(-20px);
position: relative;
clip-path: polygon(0% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.counter .counter-icon:before{
content: "";
background: #8AC248;
width: 120px;
height: 90px;
border-radius: 10px 10px 0 0;
transform: translateX(-50%);
position: absolute;
top: 0;
left: 50%;
z-index: -1;
clip-path: polygon(0% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.counter:hover .counter-icon i{
transform: rotate(360deg);
transition: all 0.3s ease;
}
.counter h3{
color: #333;
font-size:17px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 5px 0;
}
.counter .counter-value{
color: #7CA936;
font-size: 30px;
font-weight: 600;
display: block;
}
.counter.blue:before{ background-color: #5A9BEF; }
.counter.blue .counter-icon{ background-color: #2A70B5; }
.counter.blue .counter-icon:before{ background-color: #367DCB; }
.counter.blue .counter-value{ color: #367DCB; }
.counter.red:before{ background-color: #FD6D4B; }
.counter.red .counter-icon{ background-color: #D14026; }
.counter.red .counter-icon:before{ background-color: #EA5736; }
.counter.red .counter-value{ color: #EA5736; }
.counter.gray:before{ background-color: #777; }
.counter.gray .counter-icon{ background-color: #444; }
.counter.gray .counter-icon:before{ background-color: #666; }
.counter.gray .counter-value{ color: #666; }
@media screen and (max-width:990px){
.counter{ margin-bottom: 40px; }
}