.font-poppins {
  font-family: "Poppins", sans-serif;
}
.font-inter {
  font-family: "Inter", sans-serif;
}

.accordion-content {
  transition: max-height 0.4s ease-out, padding 0.3s ease-out;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  -webkit-transition: max-height 0.4s ease-out, padding 0.3s ease-out;
  -moz-transition: max-height 0.4s ease-out, padding 0.3s ease-out;
  -ms-transition: max-height 0.4s ease-out, padding 0.3s ease-out;
  -o-transition: max-height 0.4s ease-out, padding 0.3s ease-out;
}

.accordion-content.active {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.accordion-toggle svg {
  transform: rotate(0deg);
  transition: transform 0.3s ease-out;
}

.accordion-toggle.active svg {
  transform: rotate(180deg);
}

/* State awal sebelum terlihat */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.8s ease-out;
}
/* Muncul dari bawah */
.animate-on-scroll.from-bottom {
  transform: translateY(30px) scale(0.95);
}

/* Muncul dari atas */
.animate-on-scroll.from-top {
  transform: translateY(-30px) scale(0.95);
  -webkit-transform: translateY(-30px) scale(0.95);
  -moz-transform: translateY(-30px) scale(0.95);
  -ms-transform: translateY(-30px) scale(0.95);
  -o-transform: translateY(-30px) scale(0.95);
}

/* Muncul dari kanan */
.animate-on-scroll.from-right {
  transform: translateX(30px) scale(0.95);
}
/* Muncul dari Kiri */
.animate-on-scroll.from-left {
  transform: translateX(-30px) scale(0.95);
  -webkit-transform: translateX(-30px) scale(0.95);
  -moz-transform: translateX(-30px) scale(0.95);
  -ms-transform: translateX(-30px) scale(0.95);
  -o-transform: translateX(-30px) scale(0.95);
}

/* Saat masuk ke viewport */
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}