/* Background */
.page-bg {
  background: linear-gradient(135deg, #ffffff, #c0edc4, #84dc87);
}

/* Folding animation base */
.slide {
  display: none;
  opacity: 0;
  transform: perspective(1200px) rotateY(0deg);
  transition: opacity 0.3s ease, transform 0.6s ease;
}

/* Active slide */
.slide.active {
  display: block;
  opacity: 1;
}

/* Fold out to left (NEXT) */
.slide.fold-out-left {
  opacity: 0;
  transform-origin: left center;
  transform: perspective(1200px) rotateY(-90deg);
}

/* Fold out to right (PREV) */
.slide.fold-out-right {
  opacity: 0;
  transform-origin: right center;
  transform: perspective(1200px) rotateY(90deg);
}

/* Fold in (incoming slide) */
.slide.fold-in {
  opacity: 1;
  transform: perspective(1200px) rotateY(0deg);
}

/* Slide content */
.slide-content {
  display: grid;
  gap: 2rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .slide-content {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }

  .slide-content .text {
    order: 1;
  }

  .slide-content .image {
    order: 2;
  }

  .slide-content.reverse .text {
    order: 2;
  }

  .slide-content.reverse .image {
    order: 1;
  }
}

/* Heading */
.slide-heading {
  font-size: 1.875rem;
  font-weight: 700;
  color: #14532d;
  margin-bottom: 1.5rem;
}

/* Bullet list */
.bullet-list ul {
  font-size: 1.125rem;
  line-height: 1.75;
}

/* Image card */
.image-card {
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-card a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navigation */
.nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
}

.nav button {
  padding: 0.5rem 1.5rem;
  background: #2e7d32;
  color: #ffffff;
  border-radius: 0.5rem;
  font-weight: 500;
}

.nav button:hover {
  opacity: 0.9;
}