.serviceBox{
    background: linear-gradient(-45deg, #fffbf2 50%, #fffdfc 50%);
    font-family: 'Nunito', sans-serif;
    text-align: center;
    padding: 20px;
    box-shadow: 0 0 15px -7px rgba(0,0,0,0.1);
}

.serviceBox .service-icon{
    color: #fff;
    background: linear-gradient(to right, #02718D 50%, #02819E 50%);
    font-size: 40px;
    line-height: 75px;
    height: 80px;
    width: 120px;
    margin: 0 auto 25px;
    border: 5px solid #02819E;
    border-radius: 30px;
    box-shadow: 0 0 0 2px #fff inset;
}

.serviceBox .title{
    color: #02718D;
    font-family: 'Dosis', sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.serviceBox .description{
    color: #555;
    font-size: 14px;
    line-height: 22px;
    margin: 0;
}

.serviceBox.orange .service-icon{
    background: linear-gradient(to right, #f46d1f 50%, #f78409 50%);
    border-color: #f46d1f;
}
.serviceBox.orange .title{ color: #f46d1f; }

.serviceBox.purple .service-icon{
    background: linear-gradient(to right, #8950BB 50%, #995AC5 50%);
    border-color: #8950BB;
}
.serviceBox.purple .title{ color: #8950BB; }

.serviceBox.blue .service-icon{
    background: linear-gradient(to right, #00C8EC 50%, #00CFEF 50%);
    border-color: #00C8EC;
}
.serviceBox.blue .title{ color: #00C8EC; }

@media only screen and (max-width: 990px){
    .serviceBox{ margin: 0 0 30px; }
}