/* ==========================
   COMPONENTS
   ========================== */

/* Cards */
.card-container {
   display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centers each row */
  gap: 1.5rem;
  margin: 2em auto;
  max-width: 800px; /* keeps cards from stretching too wide */
}

.card {
 flex: 1 1 300px; /* allows 2 per row */
  max-width: 360px; /* limits each card’s width */
  background: #1f1d2e;
  border: 1px solid #45a29e;
  border-radius: 12px;
  padding: 1.5em;
  color: #e5d9f2;
  box-shadow: 0 0 10px rgba(178, 148, 255, 0.3);
}
.card-header {
  font-weight: bold;
  margin-bottom: 0.5em;
}
.card-text {
  font-size: 0.95em;
}



/* 📱 Responsive adjustments */

/* Buttons */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 1.5em;
  cursor: pointer;
  padding: 0.5em;
  border-radius: 50%;
}
.scroll-btn.left-btn { left: 10px; }
.scroll-btn.right-btn { right: 10px; }