.counter{
    font-family: 'Roboto', sans-serif;
    text-align: center;
    width: 200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.counter-icon{
    color: #EB4700;
    font-size: 50px;
    transition: all 0.3s;
}
.counter:hover .counter-icon{ transform: rotate(360deg); }
.counter .counter-value{
    color: #fff;
    background: #EE5450;
    font-size: 28px;
    font-weight: 600;
    line-height: 130px;
    height: 130px;
    width: 130px;
    margin: 0 auto 10px;
    border-radius: 50%;
    /* box-shadow: 0 0 0 15px #fff inset,0 0 10px #000; */
    box-shadow:0 0 0 7px #f0b50b inset, 0 0 10px #000;
    display: block;
    position: relative;
    transition: all 0.3s;
}
.counter .counter-value:after{
    content: '';
    height: 100px;
    width: 150%;
    background: #EE5450;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    -webkit-clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 15% 50%, 0 0);
    clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 15% 50%, 0 0);
}
.counter h3{
    color: #fefefe;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    transition: all 0.3s;
}
.counter.pink .counter-icon{color: #E94D86;}
.counter.pink .counter-value,
.counter.pink .counter-value:after{background:#1466bb;}
.counter.purple .counter-icon{color: #795C96;}
.counter.purple .counter-value,
.counter.purple .counter-value:after{background: #795C96;}
.counter.blue .counter-icon{color: #115CA7;}
.counter.blue .counter-value,
.counter.blue .counter-value:after{background: #115CA7;}
@media screen and (max-width:990px){
    .counter{
        margin-bottom: 30px;
    }
}