.card {

  width: 220px;

  /* use aspect-ratio to keep card square and responsive */
  aspect-ratio: 1 / 1;
  height: auto;

  /* ensure the absolutely positioned .content is anchored inside the card */
  position: relative;

  /* remove float to keep layout consistent inside flex/grid parents */
  float: none;

  perspective: 500px;

  border: 0px solid;

  background-color: transparent !important;

  margin-top: 0 !important;

}


.content {

  position: absolute;

  width: 100%;

  height: 100%;

  
  transition: transform 1s;

  transform-style: preserve-3d;

}



.card:hover .content {

  transform: rotateY( 180deg ) ;

  transition: transform 0.5s;

}



.front,

.back {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #ffffff;
  color: #000000;
  text-align: center;
  font-size: 0.8rem;
  border-radius: 25px;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.front h5{
  margin-top: 12px;
}

.front p{
  width : 100%;
  margin-top: 10px;
  font-size: 0.8rem;
  text-align: center;
}

.front img{
  width: 56px;
  margin-top: 10px;
}

.back {
  background: white;
  transform: rotateY( 180deg );
}

.service_link h5{
  color: #77c833;
    font-family: "Open Sans";
    font-size: 0.9rem;
}


.service_link{
 padding: 10px 5px 10px 5px;
 width: 72%;
 height: 35px;
 border-radius: 10px;
 transition: 0.3s;
  background: white;
}



.service_link:hover h5{

  color: #77c833;

 }