:root{
    --white: #fff;
    --gr-color1: #0c695f;
    --gr-color2: #82c345;
    --gr-color3: #00C0A7;
    --gr-color4: #00E97C;
    --gr-color5: #FC4365;
    --gr-color6: #FE6229;
    --gr-color7: #009AFC;
    --gr-color8: #E75A7D;
}
.serviceBox{
    background-color: var(--white);
    font-family: 'Niramit', sans-serif;
    text-align: center;
    margin: 30px 15px;
    border: 1px solid transparent;
    box-shadow: -5px -5px 0 0 rgba(0,0,0,0.1);
    position: relative;
}
.serviceBox .service-icon{
    color: var(--white);
    background: linear-gradient(45deg,var(--gr-color1),var(--gr-color1),var(--gr-color2));
    font-size: 60px;
    line-height: 120px;
    height: 120px;
    width: 120px;
    margin: -35px auto 20px;
    border-radius: 50%;
    transition:all 0.3s;
}
.serviceBox:hover .service-icon{
    text-shadow: 0 0 2px #333;
    box-shadow: 0 0 0 7px var(--white) inset, 0 0 0 10px var(--gr-color2);
}
.serviceBox .title{
    color: var(--white);
    background: linear-gradient(45deg,var(--gr-color2),var(--gr-color2),var(--gr-color1),var(--gr-color1));
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 15px 0;
    margin: 0 -15px 10px;
    display: block;
    position: relative;
}
.serviceBox .title:before,
.serviceBox .title:after{
    content: '';
    background: linear-gradient(45deg, transparent 49%, #f0af1e 50%);
    height: 15px;
    width: 14px;
    position: absolute;
    left: 0;
    top: 100%;
}
.serviceBox .title:after{
    background: linear-gradient(225deg, transparent 49%, #f0af1e 50%);
    top: auto;
    bottom: 100%;
    left: auto;
    right: 0;
}
.serviceBox .description{
    color: #666;
    font-size: 15px;
    line-height: 25px;
    padding: 0 10px 10px;
}
.serviceBox.green .service-icon{
    background: linear-gradient(45deg,var(--gr-color3),var(--gr-color3),var(--gr-color4));
}
.serviceBox.green:hover .service-icon{
    box-shadow: 0 0 0 7px var(--white) inset, 0 0 0 10px var(--gr-color3);
}
.serviceBox.green .title{
    background: linear-gradient(45deg,var(--gr-color3),var(--gr-color3),var(--gr-color4),var(--gr-color4));
}
.serviceBox.green .title:before{
    background: linear-gradient(45deg, transparent 49%, #057264 50%);
}
.serviceBox.green .title:after{
    background: linear-gradient(225deg, transparent 49%, #08894b 50%);
}
.serviceBox.pink .service-icon{
    background: linear-gradient(45deg,var(--gr-color5),var(--gr-color5),var(--gr-color6));
}
.serviceBox.pink:hover .service-icon{
    box-shadow: 0 0 0 7px var(--white) inset, 0 0 0 10px var(--gr-color5);
}
.serviceBox.pink .title{
    background: linear-gradient(45deg,var(--gr-color5),var(--gr-color5),var(--gr-color6),var(--gr-color6));
}
.serviceBox.pink .title:before{
    background: linear-gradient(45deg, transparent 49%, #a80624 50%);
}
.serviceBox.pink .title:after{
    background: linear-gradient(225deg, transparent 49%, #ad350a 50%);
}
.serviceBox.blue .service-icon{
    background: linear-gradient(45deg,var(--gr-color7),var(--gr-color7),var(--gr-color8));
}
.serviceBox.blue:hover .service-icon{
    box-shadow: 0 0 0 7px var(--white) inset, 0 0 0 10px var(--gr-color7);
}
.serviceBox.blue .title{
    background: linear-gradient(45deg,var(--gr-color7),var(--gr-color7),var(--gr-color8),var(--gr-color8));
}
.serviceBox.blue .title:before{
    background: linear-gradient(45deg, transparent 49%, #0d6ca8 50%);
}
.serviceBox.blue .title:after{
    background: linear-gradient(225deg, transparent 49%, #a30d30 50%);
}
@media only screen and (max-width:990px){
    .serviceBox{ margin: 40px 10px 60px; }
}

:root{
    --white: #fff;
    --text: #333;
    --bg_color1: linear-gradient(to right,#5f27cd,#E91E63);
    --bg_color2: linear-gradient(to right,#0c695f,#82c345);
    --bg_color3: linear-gradient(to right,#00C0A7,#00E97C);
    --bg_color4: linear-gradient(to right,#FC4365,#FE6229);
}

.counter{
    background: var(--white);
    font-family: 'Titillium Web', sans-serif;
    text-align: center;
    height: 202px;
    width: 202px;
    padding: 30px 0;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}
.counter:hover{ box-shadow: 0 0 10px #555; }
.counter:before,
.counter:after{
    content: '';
    background: var(--bg_color1);
    height: 87%;
    width: 87%;
    border-radius: 50%;
    box-shadow: 0 0 10px #000 inset;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
}
.counter:after{
    background: var(--white);
    box-shadow: 0 0 10px transparent inset;
    top: 100%;
}
.counter .counter-content{
    color: #var(--text);
    background: #E6E6E6;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    padding: 8px 13px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.counter .counter-content:before{
    content: '';
    background-color: rgba(130, 195, 69, 0.8);
    height: 23px;
    width: 23px;
    border-radius: 50%;
    position: absolute;
    left: 42px;
    top: 42px;
}
.counter .counter-icon{
    font-size: 25px;
    margin: 0 0 10px;
    transition: all 0.3s;
}
.counter:hover .counter-icon{ transform: rotateY(360deg); }
.counter .counter-value{
    color: #82c345;
    display: block;
    font-size: 30px;
    font-weight: 600;
    line-height: 10px;
}
.counter h3{
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
}
.counter.orange:before{ background: var(--bg_color2); }
.counter.orange .counter-content:before{ background-color: rgba(rgb(130, 195, 69,0.8); }
.counter.orange .counter-value{  color:#FF7924; }
.counter.green:before{ background: var(--bg_color3); }
.counter.green .counter-content:before{ background-color: rgba(0, 192, 167,0.8); }
.counter.green .counter-value{  color:#00C0A7; }
.counter.pink:before{  background: var(--bg_color4); }
.counter.pink .counter-content:before{ background-color: rgba(252, 67, 101,0.8); }
.counter.pink .counter-value{  color:#FC4365; }
@media screen and (max-width:990px){
    .counter{ margin-bottom: 40px; }
}