.myServices {
   padding-top: 80px;
   padding-bottom:35px;
}


.serviceCard:hover {
   background: linear-gradient(to bottom, #00d2ff, #3a7bd5);
   box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30),
      0 15px 12px rgba(0, 0, 0, 0.22);
   transition: all 1s cubic-bezier(.25, .8, .25, 1);
}

.serviceCard:active {
   background: linear-gradient(to bottom, #00d2ff, #3a7bd5);
   box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30),
      0 15px 12px rgba(0, 0, 0, 0.22);
   transition: all 1s cubic-bezier(.25, .8, .25, 1);
}


.serviceCard i {
   color: #3a7bd5;
   font-size: 70px;
}

.serviceCard h5 {
   color: black;
}


.serviceCard:hover h5 {
   color: white;
}

.serviceCard:hover i {
   color: white;
}

.serviceCard p {
   font-size: medium;
   color:#555;
}

.serviceCard:hover p {
   font-size: medium;
   color: #efefef;
}


@media only screen and (max-width: 440px) {
    .myServices .row{
        padding-left:10px;
        padding-right:10px;
    }
}