:root{
--pink: #f740c0;
--orange: #f38d19;
--blue: #19a3f3;
--green: #3ac969;
}
.counter{
padding: 50px 20px;
text-align: center;
margin-bottom: 70px;
color: #fff;
z-index: 1;
position: relative;
}
.counter:before{
content: "";
width: 100%;
height: 100%;
background: var(--pink);
position: absolute;
top: 0;
right: 0;
z-index: -1;
-webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.counter .counter-value{
display: block;
font-size: 45px;
font-weight: 700;
margin: 0 0 10px;
}
.counter .title{
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
}
.counter .counter-icon{
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
background: #fff;
margin: 0 auto;
font-size: 50px;
color: var(--pink);
border-bottom: 2px solid var(--pink);
position: absolute;
bottom:-60px;
left: 0;
right: 0;
}
.counter.orange:before{ background: var(--orange); }
.counter.orange .counter-icon{
color: var(--orange);
border-bottom: 2px solid var(--orange);
}
.counter.blue:before{ background: var(--blue); }
.counter.blue .counter-icon{
color: var(--blue);
border-bottom: 2px solid var(--blue);
}
.counter.green:before{ background: var(--green); }
.counter.green .counter-icon{
color: var(--green);
border-bottom: 2px solid var(--green);
}
@media only screen and (max-width: 990px){
.counter{ margin-bottom: 80px; }
}