.flip-box-section {
  position: relative;
  z-index: 0; /* Base layer */
}

.flip-box-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Adjust opacity as needed */
  z-index: 0;
  pointer-events: none; /* Allows clicks to pass through */
}

/* ==== CUSTOM FLIP BOX STYLES ==== */
/* ====== Flipbox Grid Layout ====== */
.flipbox-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 0 1rem; /* Edge spacing */
  position: relative;
  z-index: 1; /* Above the overlay */
}

/* ====== Flipbox Card Base (Desktop) ====== */
.flipbox-card {
  flex: 1 1 calc(33.333% - 2rem); /* 3 across with gap */
  max-width: 340px;
  height: 480px;
  perspective: 1000px;
  position: relative;
}

/* ====== Tablet (3-column, no wrapping) ====== */
@media (max-width: 1024px) and (min-width: 768px) {
  .flipbox-grid {
      gap: 1rem;
      padding: 0 1.5rem; /* More edge spacing for tablet */
      flex-wrap: nowrap; /* Prevent wrapping - keep 3 across */
  }
  .flipbox-card {
      flex: 1 1 calc(33.333% - 1rem); /* Equal width, 3 across */
      max-width: none; /* Remove max-width restriction */
      height: 420px; /* Reduce height */
      min-width: 0; /* Allow shrinking if needed */
  }
}

/* ====== Mobile (stacked) ====== */
@media (max-width: 767px) {
  .flipbox-grid {
      gap: 1rem;
      padding: 0 1rem; /* Edge spacing for mobile */
  }
  .flipbox-card {
      flex: 1 1 100%;
      max-width: 100%;
      height: 340px;
      margin-bottom: 1rem;
  }
}

.flipbox-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
  position: relative;
}

.flipbox-card:hover .flipbox-inner {
  transform: rotateX(180deg);
}

/* ====== Front & Back Faces ====== */
.flipbox-front,
.flipbox-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6); /* Adjust opacity as needed */
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  text-align: center;
}

.flipbox-front {
  z-index: 2;
}

.flipbox-back {
  transform: rotateX(180deg);
}

/* ====== Inner Content ====== */
.flipbox-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
}

/* ====== Icon Styling ====== */
.flipbox-icon {
  text-align: center;
  margin-bottom: 1rem;
}

.flipbox-icon img {
  width: 60px;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease-in-out;
}

.flipbox-card:hover .flipbox-icon img {
  transform: scale(1.1);
}

/* ====== Typography ====== */
.flipbox-card h5 {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.5rem 0;
}

.flipbox-card p {
  color: white;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  margin: 0;
}

/* ====== Back Content Lists ====== */
.flipbox-back ul {
  text-align: left;
  padding-left: 1rem;
  margin-top: 1.5rem;
}

.flipbox-back ul li {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-sm);
  color: white;
}