/*===========================
        4.SERVICES css 
===========================*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services-area {
      padding-top: 90px;
      padding-bottom: 100px; } }
  @media (max-width: 767px) {
    .services-area {
      padding-top: 70px;
      padding-bottom: 80px; } }
  
  .single-service {
    background-color: #fff;
    border: 1px solid #eceff8;
    border-radius: 5px;
    padding: 25px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
    @media (max-width: 767px) {
      .single-service {
        padding: 15px; } }
    .single-service .service-icon i {
      font-size: 60px;
      color: #754ef9;
      line-height: 56px; }
    .single-service .service-content {
      margin-top: 11px; }
      .single-service .service-content .service-title a {
        font-size: 22px;
        font-weight: 600;
        color: #32333c;
        margin-bottom: 20px;
        -webkit-transition: all 0.3s ease-out 0s;
        -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s; }
        .single-service .service-content .service-title a:hover {
          color: #754ef9; }
    .single-service:hover {
      -webkit-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);
      -moz-box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23);
      box-shadow: 0px 0px 21px 0px rgba(152, 152, 152, 0.23); }