.counter{
color: #5B86E5;
font-family: 'Muli', sans-serif;
text-align: center;
height: 285px;
width: 200px;
padding: 85px 31px 25px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.counter:before,
.counter:after{
content: "";
background: linear-gradient(to bottom,#36D1DC,#5B86E5);
width: 200px;
height: 200px;
top: 50%;
left: 50%;
border-radius: 50% 0;
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
transition: all 0.3s;
}
.counter:hover:before{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
.counter:after{
background: #fff;
width: 165px;
height: 165px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
opacity: 0.9;
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
.counter .counter-icon{
font-size: 25px;
transition: all 0.3s;
}
.counter:hover .counter-icon{ transform: rotateY(360deg); }
.counter .counter-value{
font-size: 30px;
font-weight: 600;
display: block;
}

.counter.purple{ color: #89216B; }
.counter.purple:before{ background: linear-gradient(to bottom,#DA4453,#89216B); }
.counter.orange{ color: #FF8008; }
.counter.orange:before{ background: linear-gradient(to bottom,#FFC837,#FF8008); }
.counter.green{ color: #56ab2f; }
.counter.green:before{ background: linear-gradient(to bottom,#a8e063,#56ab2f); }




.counter h3
{
    font-size: 14px;
    color: #000 !important;
    line-height: 19px !important;
    font-weight: bold;
    text-transform:uppercase;
    margin-top: 7px;
}


.counterr h3
{
    font-size: 16px !important;
    color: #fff !important;
    line-height: 19px !important;
    font-weight: bold;
    text-transform:uppercase;
}



:root{
    --text: #fff;
    --border: #666666;
    --bg_color1: linear-gradient(135deg, #e74c3c 49%, #c0392b 50%);
    --bg_color2: linear-gradient(135deg, #2ecc71 49%, #27ae60 50%);
    --bg_color3: linear-gradient(135deg, #3498db 49%, #2980b9 50%);
    --bg_color4: linear-gradient(135deg, #edaa01 49%, #e1a714 50%);
}

.counterr{ font-family: 'Sarabun', sans-serif; }
.counterr .counterr-content{
    color: var(--text);
    background: var(--bg_color1);
    text-align: center;
    height: 230px;
    width: 230px;
    padding: 44px 25px;
    margin: 0 auto;
    border: 4px solid var(--border);
    box-shadow: 0 0 0 6px var(--text) inset;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.counterr .counterr-content:before,
.counterr .counterr-content:after{
    content: '';
    background-color: var(--border);
    height: 100%;
    width: 4px;
    position: absolute;
    left: -20px;
    top: 0;
}
.counterr .counterr-content:after{
    height: 4px;
    width: 20px;
    transform: translateY(-50%);
    top: 50%;
    z-index: -1;
}
.counterr .counterr-icon{
    font-size: 30px;
    line-height: 30px;
    transition: all 0.3s ease 0s;
}
.counterr .counterr-content:hover .counterr-icon{ transform: rotateX(360deg); }
.counterr .counterr-value{
    font-size: 30px;
    font-weight: 600;
    line-height: 50px;
}

.counterr.green .counterr-content{ background: var(--bg_color2); }
.counterr.blue .counterr-content{ background: var(--bg_color3); }
.counterr.orange .counterr-content{ background: var(--bg_color4); }










:root{
    --white: #fff;
    --black: #000;
    --color_1: #edaa01;
    --color_2: #188ece;
    --color_3: #e51d3b;
    --color_4: #554d9e;
}
.countert1{
    font-family: 'Signika', sans-serif;
    text-align: center;
    padding-top: 50px;
    border-top: 2px solid #edaa01;
    position: relative;
}
.countert1:before,
.countert1:after{
    content: '';
    height: 35px;
    width: 35px;
    background: radial-gradient(var(--color_1) 40%, var(--white) 45%);
    border: 2px solid var(--color_1);
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    transform: translateX(-50%) rotate(-135deg);
    position: absolute;
    left: 50%;
    top: -18px;
}
.countert1:after{
    background: transparent;
    border: none;
    border: 1px dashed var(--color_1);
    height: 57px;
    width: 2px;
    border-radius: 0;
    transform: translateX(-50%) rotate(0);
    top: 0;
    z-index: 1;
}
.countert1 .countert1-content{
    color: var(--white);
    background: #edaa01;
    width:220px;
    height:220px;
    padding: 35px 10px;
    margin: 0 auto 15px;
    border: 2px solid #edaa01;
    box-shadow: 0 0 0 12px var(--white) inset;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.countert1 h3
{
    font-size: 14px !important;
    color: #000 !important;
    line-height: 19px !important;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 7px;
    padding-top: 13px !important;
    }

.countert1 .countert1-content:before,
.countert1 .countert1-content:after{
    content: '';
    background: radial-gradient(var(--color_1) 40%, var(--white) 45%);
    height: 35px;
    width: 35px;
    border: 2px solid var(--color_1);
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    left: 50%;
    top: -18px;
    transition: all 0.6s ease 0s;
}
.countert1 .countert1-content:after{
    background: linear-gradient(-45deg, var(--white) 49%, transparent 50%);
    height: 44px;
    width: 44px;
    border: none;
    z-index: -1;
}
.countert1 .countert1-icon{
    font-size: 33px;
    line-height: 44px;
    transition: all 0.3s;
    padding-top: 8px;
}
.countert1:hover .countert1-icon{
    transform: rotateY(360deg);
    text-shadow: 0 0 10px var(--black);
}
.countert1 .countert1-value{
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    display: block;
    transition: all 0.3s;
}
.countert1:hover .countert1-value{ text-shadow: 0 0 5px var(--black); }
.countert1 h3{
    color: var(--color_1);
    font-size: 20px;
    text-transform: uppercase;
    margin: 0;
}
.countert1.blue{ border-top-color: var(--color_2); }
.countert1.blue:before,
.countert1.blue .countert1-content:before{
    background: radial-gradient(var(--color_2) 40%, var(--white) 45%);
    border-color: var(--color_2);
    border-top-color: transparent;
    border-left-color: transparent;
}
.countert1.blue:after{ border-color: var(--color_2); }
.countert1.blue .countert1-content{
    border-color: var(--color_2);
    background: var(--color_2);
}
.countert1.blue h3{ color: var(--color_2); }
.countert1.magenta{ border-top-color: var(--color_3); }
.countert1.magenta:before,
.countert1.magenta .countert1-content:before{
    background: radial-gradient(var(--color_3) 40%, var(--white) 45%);
    border-color: var(--color_3);
    border-top-color: transparent;
    border-left-color: transparent;
}
.countert1.magenta:after{ border-color: var(--color_3); }
.countert1.magenta .countert1-content{
    border-color: var(--color_3);
    background: var(--color_3);
}
.countert1.magenta h3{ color: var(--color_3); }
.countert1.purple{ border-top-color: var(--color_4); }
.countert1.purple:before,
.countert1.purple .countert1-content:before{
    background: radial-gradient(var(--color_4) 40%, var(--white) 45%);
    border-color: var(--color_4);
    border-top-color: transparent;
    border-left-color: transparent;
}
.countert1.purple:after{ border-color: var(--color_4); }
.countert1.purple .countert1-content{
    border-color: var(--color_4);
    background: var(--color_4);
}
.countert1.purple h3{ color: var(--color_4); }
@media screen and (max-width:990px){
    .countert1{ margin-bottom: 0px; margin-top: 28px;}
}