<div class="services">
  <div class="services-card">
    <div class="card-content">
      <div class="card__img">

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
          <g>
            <path d="M75.1,187.7c-24.3-2.5-40.4-14.2-49.3-36.2c7.7-0.4,14.6-0.7,21.6-1.1C22.6,141,8.4,124.3,6.6,97.5c7.6,2.1,14.7,4,21.7,6
    c0.3-0.5,0.6-1,0.9-1.4C18.8,93.5,11.2,83.2,8.4,69.9C5.6,56.8,7.2,44.2,14.2,32c29,33.8,65.3,52.4,110.1,55.7
    c-0.2-2.5-0.3-4.3-0.5-6.2c-2.3-23.4,8.7-44,28.9-54.2c19.7-10,43-6.5,60.4,8.6c1.6,1.4,5,2.3,7,1.7c9.5-2.9,18.9-6.4,28.5-9.8
    c-3.5,11.2-11,19.5-20.7,26.3c0.2,0.4,0.4,0.9,0.5,1.3c8.9-2.3,17.7-4.5,26.6-6.8c0.3,0.4,0.7,0.7,1,1.1
    c-7.4,7.2-14.5,14.7-22.2,21.6c-2.7,2.5-3.6,4.7-3.8,8.3c-2,63-29,111.7-86.3,139.4c-46.4,22.4-93.9,19.9-139.7-4.6
    c-1.6-0.9-3.2-1.9-4.1-2.6c12.7-1.8,25.9-2.8,38.7-5.6C51.8,203.4,63.5,196.8,75.1,187.7z" />
          </g>
        </svg>

      </div>
      <h3 class="card__title">SERVICE TITLE</h3>
      <p class="card__text">Vestassapede et donec ut est libe ros sus et eget sed eget quisq ueta habitur augue</p>
    </div>
  </div>
  <div class="services-card">
    <div class="card-content">
      <div class="card__img"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
          <g>
            <path d="M75.1,187.7c-24.3-2.5-40.4-14.2-49.3-36.2c7.7-0.4,14.6-0.7,21.6-1.1C22.6,141,8.4,124.3,6.6,97.5c7.6,2.1,14.7,4,21.7,6
    c0.3-0.5,0.6-1,0.9-1.4C18.8,93.5,11.2,83.2,8.4,69.9C5.6,56.8,7.2,44.2,14.2,32c29,33.8,65.3,52.4,110.1,55.7
    c-0.2-2.5-0.3-4.3-0.5-6.2c-2.3-23.4,8.7-44,28.9-54.2c19.7-10,43-6.5,60.4,8.6c1.6,1.4,5,2.3,7,1.7c9.5-2.9,18.9-6.4,28.5-9.8
    c-3.5,11.2-11,19.5-20.7,26.3c0.2,0.4,0.4,0.9,0.5,1.3c8.9-2.3,17.7-4.5,26.6-6.8c0.3,0.4,0.7,0.7,1,1.1
    c-7.4,7.2-14.5,14.7-22.2,21.6c-2.7,2.5-3.6,4.7-3.8,8.3c-2,63-29,111.7-86.3,139.4c-46.4,22.4-93.9,19.9-139.7-4.6
    c-1.6-0.9-3.2-1.9-4.1-2.6c12.7-1.8,25.9-2.8,38.7-5.6C51.8,203.4,63.5,196.8,75.1,187.7z" />
          </g>
        </svg></div>
      <h3 class="card__title">SERVICE TITLE</h3>
      <p class="card__text">Vestassapede et donec ut est libe ros sus et eget sed eget quisq ueta habitur augue</p>
    </div>
  </div>
  <div class="services-card">
    <div class="card-content">
      <div class="card__img"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
          <g>
            <path d="M75.1,187.7c-24.3-2.5-40.4-14.2-49.3-36.2c7.7-0.4,14.6-0.7,21.6-1.1C22.6,141,8.4,124.3,6.6,97.5c7.6,2.1,14.7,4,21.7,6
    c0.3-0.5,0.6-1,0.9-1.4C18.8,93.5,11.2,83.2,8.4,69.9C5.6,56.8,7.2,44.2,14.2,32c29,33.8,65.3,52.4,110.1,55.7
    c-0.2-2.5-0.3-4.3-0.5-6.2c-2.3-23.4,8.7-44,28.9-54.2c19.7-10,43-6.5,60.4,8.6c1.6,1.4,5,2.3,7,1.7c9.5-2.9,18.9-6.4,28.5-9.8
    c-3.5,11.2-11,19.5-20.7,26.3c0.2,0.4,0.4,0.9,0.5,1.3c8.9-2.3,17.7-4.5,26.6-6.8c0.3,0.4,0.7,0.7,1,1.1
    c-7.4,7.2-14.5,14.7-22.2,21.6c-2.7,2.5-3.6,4.7-3.8,8.3c-2,63-29,111.7-86.3,139.4c-46.4,22.4-93.9,19.9-139.7-4.6
    c-1.6-0.9-3.2-1.9-4.1-2.6c12.7-1.8,25.9-2.8,38.7-5.6C51.8,203.4,63.5,196.8,75.1,187.7z" />
          </g>
        </svg></div>
      <h3 class="card__title">SERVICE TITLE</h3>
      <p class="card__text">Vestassapede et donec ut est libe ros sus et eget sed eget quisq ueta habitur augue</p>
    </div>
  </div>
  <div class="services-card">
    <div class="card-content">
      <div class="card__img"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
          <g>
            <path d="M75.1,187.7c-24.3-2.5-40.4-14.2-49.3-36.2c7.7-0.4,14.6-0.7,21.6-1.1C22.6,141,8.4,124.3,6.6,97.5c7.6,2.1,14.7,4,21.7,6
    c0.3-0.5,0.6-1,0.9-1.4C18.8,93.5,11.2,83.2,8.4,69.9C5.6,56.8,7.2,44.2,14.2,32c29,33.8,65.3,52.4,110.1,55.7
    c-0.2-2.5-0.3-4.3-0.5-6.2c-2.3-23.4,8.7-44,28.9-54.2c19.7-10,43-6.5,60.4,8.6c1.6,1.4,5,2.3,7,1.7c9.5-2.9,18.9-6.4,28.5-9.8
    c-3.5,11.2-11,19.5-20.7,26.3c0.2,0.4,0.4,0.9,0.5,1.3c8.9-2.3,17.7-4.5,26.6-6.8c0.3,0.4,0.7,0.7,1,1.1
    c-7.4,7.2-14.5,14.7-22.2,21.6c-2.7,2.5-3.6,4.7-3.8,8.3c-2,63-29,111.7-86.3,139.4c-46.4,22.4-93.9,19.9-139.7-4.6
    c-1.6-0.9-3.2-1.9-4.1-2.6c12.7-1.8,25.9-2.8,38.7-5.6C51.8,203.4,63.5,196.8,75.1,187.7z" />
          </g>
        </svg></div>
      <h3 class="card__title">SERVICE TITLE</h3>
      <p class="card__text">Vestassapede et donec ut est libe ros sus et eget sed eget quisq ueta habitur augue</p>
    </div>
  </div>
</div>

.services{
  display:flex;
  margin-top:60px;
  margin-left:20px;
  margin-right:20px;
}

.services-card{
  max-width:225px;
  max-height:305px;
  border:1px #e4e4e4 solid;
  margin-right:20px;
  transition:0.4s;
}

.services-card:hover{
  color:#fff;
  background:#40aed7;
  transition:0.4s;
}

.card-content{
  margin-left:33px;
  margin-right:32px;
  max-width:161px;
  max-height:273px;
}

.card__img{
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  margin-top:21px;
  display:flex;
  width:136px;
  height:123px;
}

.card__title{
  text-align:center;
  margin-top:17px;
  color:#333333;
  font-size:32px;
  width:135px;
  height:56px;
}

.card__text{
  text-align:center;
  width:162px;
  font-size:12px;
  color:#979797;
}

.services-card:hover .card__title { color: white; }
.services-card:hover .card__text { color: white; }
.services-card:hover svg { fill: white; }