.flip-container {
  perspective: 1000px;
}

.flipper {
  transition: transform 0.5s ease-in-out;
  transform-style: preserve-3d;
}

.icon-box:hover .flipper {
  transform: rotateY(180deg);
}

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

.back {
  transform: rotateY(180deg);
  display: none; /* Initially hide the back side */
}