:root{--main-color1:red;--main-color2:red;--main-color3:red;--main-color4:red}.serviceBox{color:#555;font-family:'Varela Round',sans-serif;text-align:center;padding:0 10px}.serviceBox .service-icon{background-color:#fff;line-height:104px;height:130px;width:130px;padding:6px;margin:0 auto 50px;border:7px solid var(--main-color1);border-radius:50%;display:block;position:relative;z-index:1}.serviceBox .service-icon:after,.serviceBox .service-icon:before{content:'';background-color:var(--main-color1);height:60px;width:7px;opacity:0;transform:translateX(-50%) rotateY(180deg);position:absolute;left:50%;top:100%;z-index:-1;transition:.3s}.serviceBox .service-icon:after{top:0;background-color:#fff;height:30px;width:30px;border:7px solid var(--main-color1);border-radius:50%;transform:translateX(-50%) rotateY(0)}.serviceBox:hover .service-icon:before{opacity:1;transform:translateX(-50%) rotateY(0)}.serviceBox:hover .service-icon:after{opacity:1;top:138%}.serviceBox .service-icon span{background:linear-gradient(to bottom right,rgba(0,0,0,.25),#fff,#fff);font-size:60px;height:100%;width:100%;border:1px solid #fff;border-radius:50%;box-shadow:2px 2px 0 2px rgba(0,0,0,.25);display:block}.serviceBox .title{font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:20px 0 0;margin:0 0 10px;border-top:7px solid rgba(0,0,0,.1);border-radius:35%;display:block;transition:.3s .1s}.serviceBox:hover .title{color:var(--main-color1);border-top-color:var(--main-color1)}.serviceBox.orange .service-icon,.serviceBox.orange .service-icon:after,.serviceBox.orange:hover .title{border-color:var(--main-color2)}.serviceBox .description{font-size:14px;line-height:25px;letter-spacing:1px}.serviceBox.orange .service-icon:before{background-color:var(--main-color2)}.serviceBox.orange:hover .title{color:var(--main-color2)}.serviceBox.green .service-icon,.serviceBox.green .service-icon:after,.serviceBox.green:hover .title{border-color:var(--main-color3)}.serviceBox.green .service-icon:before{background-color:var(--main-color3)}.serviceBox.green:hover .title{color:var(--main-color3)}.serviceBox.blue .service-icon,.serviceBox.blue .service-icon:after,.serviceBox.blue:hover .title{border-color:var(--main-color4)}.serviceBox.blue .service-icon:before{background-color:var(--main-color4)}.serviceBox.blue:hover .title{color:var(--main-color4)}@media only screen and (max-width:990px){.serviceBox{margin:0 0 30px}}