:root {
  --primary: #3876bf;
}

.flip-kami {
  height: 100vh;
  padding: 0rem 10rem;
  width: 100%;
}
.flip-kami .flip-pelayanan {
  padding: 5rem 8rem;
  display: flex;
  justify-content: center;
}

.flip-pelayanan{
  width: 100%;
    position: relative;
    display: flex;
  

}

.flip-kami .content1-home p {
  padding-left: 10rem;
  padding-right: 10rem;
  text-align: center;
  font-size: 1.2rem;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  margin-left: 2px;


  perspective: 1000px;
border-radius:10px;

}

.flip-card-inner {
  position: relative;
  width: 95%;
  height: 90%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius:10px;



}

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

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius:10px;

}

.flip-card-front {
  background-color: ffffff;
  color: black;
border-radius:20px;
text-align: center;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

.card__content {
  padding: 1rem 2rem;
}

@media (max-width: 500px) {
  html {
    font-size: 55%;
  }
  .flip-kami {
    height: 100%;
    padding: 5rem 7% 5rem;
  }
  .flip-kami .flip-pelayanan {
    display: block;
    width: 100%;
    height: 80%;
  }
  .flip-card{
      width: 100%;
  }
  .flip-pelayanan {
    display: block;
    align-items: center;
  }
  .flip-kami .conten1-home p {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    font-size: 1.2rem;
  }
  .flip-pelayanan {
    display: block;
  }
  .flip-card-front, .flip-card-back{
    width: 100%;
  }

  .flip-pelayanan .w3-card-4 {
    transition: all 0.3s ease-out;
    margin-bottom: 30px;
  }

/*  responsife flip*/



/*end responsive*/
}