section {
  /*width: auto;*/
  margin: 0 auto;
      padding-bottom: 180px;

    margin: auto;
  width: 50%;
  /*border: 3px solid green;*/
  /*padding: 10px;*/
  
}

.flip-card {
  width: 300px;
  height: 200px;
 /* border: 1px solid #f1f1f1;*/
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
 /* transition: transform 0.8s; */
  transform-style: preserve-3d; /* yassine delet this line and it will be like theire */
}

.flip-card-back {
  transform: rotateY(180deg); /* added */
  margin-top: 75px;
  perspective: 600px;
    padding: 27px 20px 27px 20px;
    text-align: center;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}