.highlight-box {
  perspective: 1000px;
  height: 100%;
}

.highlight-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.highlight-box:hover .highlight-inner {
  transform: rotateY(180deg);
}

.highlight-box {
  perspective: 1000px;
  height: 200px; /* fixed height for consistency */
}

.highlight-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.highlight-front,
.highlight-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* center icon + text */
}

.highlight-front {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.highlight-back {
  background: #ff7e05;
  color: white;
  transform: rotateY(180deg);
}


.btn:hover {
  box-shadow: 0 0 15px rgba(255, 126, 5, 0.7);
  transform: translateY(-2px);
}

.highlight-title {
  position: relative;
  display: inline-block;
}

.highlight-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 3px;
  background-color: #ff7e05;
  transform: translateX(-50%);
  transition: width 0.3s ease-out;
  box-shadow: 0 0 10px rgba(255, 126, 5, 0.7),
              0 0 20px rgba(255, 126, 5, 0.5),
              0 0 30px rgba(255, 126, 5, 0.3);
}

.highlight-title:hover::after {
  width: 100%;
  animation: explode-glow 0.4s ease-out forwards;
}

@keyframes explode-glow {
  0% {
    box-shadow: 0 0 0 rgba(255, 126, 5, 0.9);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 126, 5, 0.9),
                0 0 40px rgba(255, 126, 5, 0.7),
                0 0 60px rgba(255, 126, 5, 0.5);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 126, 5, 0.7),
                0 0 20px rgba(255, 126, 5, 0.5),
                0 0 30px rgba(255, 126, 5, 0.3);
  }
}