.introWrapper {
  display: flex ;
  flex-direction: column;
}

.plusArrow {
  width: 22px;
  height: 22px;
  margin: 0 auto;
}

.plusArrow.rotate {
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.plusArrow {
  transition: transform 0.3s ease;
}

#CardButtonBack, #CardButtonFront {
  background: black;
  border: none;
  border-radius: var(--radius-full, 9999px);
  width: 32px;
  height: 32px;
  cursor: pointer;
}



/* Inner container (no 3D) */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Front and Back shared styles */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-clip: padding-box;
  backface-visibility: hidden;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

/* Front is shown by default */
.flip-card-front {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

/* Back is hidden by default */
.flip-card-back {
  opacity: 0;
}

/* When flipped, show back */
.flip-card.flipped .flip-card-front {
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.flip-card.flipped .flip-card-back {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}


/* === BACK CONTENT TRANSITION === */
.card-content-back {
  opacity: 0;
  transform: translateY(-20px);
  overflow: auto;
  scrollbar-width: none;
  min-width: 130px;
  height: 100%;
}

.flip-card.flipped .card-content-back {
  opacity: 1;
  transform: translateY(0);
}


@media (max-width: var(--mobile)) {

}