.carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.flashcard-track-container {
  overflow: hidden;
  width: 80%; /* Adjust as needed */
}

.flashcard-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.flashcard {
  min-width: 100%; /* Each flashcard takes full width of track container */
  box-sizing: border-box;
  perspective: 1000px; /* For 3D flip effect */
  cursor: pointer;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  position: relative;
  height: 200px; /* Example height */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

.flashcard-front {
  background-color: #f0f0f0;
  color: #333;
}

.flashcard-back {
  background-color: #007bff;
  color: white;
  transform: rotateY(180deg);
}

.flashcard.flipped .flashcard-front {
  transform: rotateY(180deg);
}

.flashcard.flipped .flashcard-back {
  transform: rotateY(360deg);
}

.nav-button {
  background-color: #eee;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 1.5em;
  border-radius: 5px;
  margin: 0 10px;
}