@import url('https://fonts.googleapis.com/css2?family=Inter&family=Poppins:wght@600&display=swap');

.font-ubuntu {
  font-family: 'Ubuntu', sans-serif;
}

/* Fade in up animation */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  /* animation: fadeUp 1s ease forwards; */
}

.fade-up.animate {
  animation: fadeUp 1s ease forwards;
}

.fade-up.delay-1.animate {
  animation-delay: 0.2s;
}
.fade-up.delay-2.animate {
  animation-delay: 0.4s;
}
.fade-up.delay-3.animate {
  animation-delay: 0.6s;
}
.fade-up.delay-4.animate {
  animation-delay: 0.8s;
}
.fade-up.delay-5.animate {
  animation-delay: 1.0s;
}
.fade-up.delay-6.animate {
  animation-delay: 1.2s;
}
.fade-up.delay-7.animate {
  animation-delay: 1.4s;
}
.fade-up.delay-8.animate {
  animation-delay: 1.6s;
}


@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.primary {
  background-color: #4A75D6;
}

.text {
  color: #4A75D6;
}

.icon {
  color: #40FF4C
}

.fade-image {
  opacity: 0;
  transform: translateX(40px);
  /* animation: fadeInRight 0.6s ease forwards; */
  /* animation-delay: 0.3s; */
}

.fade-image.animate {
  animation: fadeInRight 0.6s ease forwards;
  animation-delay: 0.3s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-left {
  opacity: 0;
  transform: translateX(40px);
}

.animate-fade-left.animate {
  animation: fadeLeft 1s ease-out both;
}

.fade-in-start {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s ease-out;
}

.fade-in-show {
  opacity: 1;
  transform: translateX(0);
}

/* FAQ Toggle */
.faq-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.faq-fade.animate {
  opacity: 1;
  transform: translateY(0);
}

.faq-fade.delay-1 {
  transition-delay: 0.3s;
}

/* Accordion arrow rotate */
.faq-question.open svg {
  transform: rotate(180deg);
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.floating-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  /* width: 56px; */
  /* height: 56px; */
  /* background-color: #25d366; */
  border-radius: 50%;
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.floating-btn img {
  width: 48px;
  height: 48px;
}


/* Default (tailwind-style override) */
.hero-img {
  width: 100%;
  margin-top: 1.5rem;   /* mt-6 */
  margin-bottom: -12rem; /* -mb-48 */
}

/* sm: ≥ 640px */
@media (min-width: 640px) {
  .hero-img {
    max-width: 500px;
  }
}

/* md: ≥ 768px */
@media (min-width: 768px) {
  .hero-img {
    max-width: 650px;
    margin-top: 2.5rem;  /* mt-10 */
    margin-bottom: -24rem; /* -mb-72 */
  }
}

/* Custom media query untuk layar HP kecil ≤ 360px */
@media (max-width: 360px) {
  .hero-img {
    margin-bottom: -10rem;
    max-width: 100%;
  }
}

/* Custom untuk layar HP 361px - 399px */
@media (min-width: 361px) and (max-width: 399px) {
  .hero-img {
    margin-bottom: -12rem;
  }
}

/* Custom untuk layar HP 400px - 479px */
@media (min-width: 400px) and (max-width: 479px) {
  .hero-img {
    margin-bottom: -12rem;
  }
}