* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f5f1e5;
  color: #603a42;
  text-align: center;
  line-height: 1.6;
  opacity: 0;
  animation: fadeInBody 1.2s ease forwards; /* animation added */
}

/* Fade-in keyframes */
@keyframes fadeInBody {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* HERO */
.hero {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  opacity: 0;
  animation: fadeZoom 1.5s ease forwards; /* animation added */
}

@keyframes fadeZoom {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1.05); }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo {
  width: 450px;
  max-width: 70%;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.5s ease 0.4s forwards; /* animation added */
}

/* Fade-up reusable animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* CONTENT */
.content {
  padding: 3rem 1.5rem;
  opacity: 0;
  animation: fadeUp 1s ease 0.6s forwards; /* animation added */
}

.intro h1 {
  font-size: 4.7rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  transition: color 0.3s ease; /* transition added */
}

.intro h1:hover {
  color: #7a7055; /* slightly lighter on hover */
}

.green {
  color: #96965e;
}

.brown {
  color: #603a42;
}

.intro p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 2rem;
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.6;
  color: #755c5f; /* sedikit lebih muda dari sebelumnya */
}

/* SOCIAL */
.social {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2.5rem 0;
  opacity: 0;
  animation: fadeUp 1s ease 0.8s forwards; /* animation added */
}

.social-item img {
  width: 180px;
  height: auto;
  transition: transform 0.4s ease, filter 0.4s ease; /* smoother hover */
}

.social-item img:hover {
  transform: scale(1.08);
}

/* AWARDS */
.awards {
  opacity: 0;
  animation: fadeUp 1s ease 1s forwards; /* animation added */
}

.awards h2 {
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.award-logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
}

.award img {
  width: 120px;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.award img:hover {
  transform: scale(1.05);
}

.award p {
  font-size: 0.9rem;
}

/* FOOTER */
footer {
  background-color: #f5f1e5;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  color: #4b2e2b;
  opacity: 0;
  animation: fadeUp 1s ease 1.2s forwards; /* animation added */
}

.footer-logo {
  width: 140px;
  margin-top: 0.5rem;
  transition: transform 0.3s ease;
}

.footer-logo:hover {
  transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .intro h1 {
    font-size: 3.3rem;
  }
  .social-item img {
    width: 150px;
  }
  .award img {
    width: 70px;
  }
}