.hero-container {
  position: relative;
  min-height: 100vh;   /* at least full screen */
  width: 100%;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;            /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;  /* makes image cover text */
  z-index: 1;
}

.hero-overlay {
  position: relative; /* not absolute */
  z-index: 2;
  display: flex;
  align-items: center;      /* vertical center */
  min-height: 100vh;        /* important for mobile */
  padding-left: 80px;
}

.hero-content {
  max-width: 600px;
}

.hero-title {
  font-size: 40px;
  line-height: 1.2;
}

.title-ultra {
  font-family: "Gotham", Arial, sans-serif;
  font-weight: 800; /* Gotham Ultra */
}

.title-medium {
  font-family: "Gotham", Arial, sans-serif;
  font-weight: 500; /* Gotham Medium */
}

.hero-subtitle {
  font-size: 21px;
  font-weight: 300;
  margin-bottom: 24px;
}

.hero-description p {
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 12px;
  text-align: justify;
}

@media (max-width: 768px) {
  .hero-overlay {
    padding-left: 24px;
    padding-right: 24px;
  }
}



/* =========================
   SECOND HERO (cards)
   ========================= */
.hero-container.hero-cards {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* background image */
.hero-container.hero-cards .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* overlay */
.hero-container.hero-cards .hero-overlay {
  position: relative;
  z-index: 2;
  padding: 80px 0;
}

/* content wrapper */
.hero-container.hero-cards .hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 80px;
  padding-right: 80px;

  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* rows */
.hero-container.hero-cards .hero-row {
  display: flex;
  gap: 32px;
}

.hero-container.hero-cards .hero-row-1 {
  justify-content: center;
}

/* clickable cards (row 2 & 3) */
.hero-container.hero-cards .hero-card {
  display: block;
  width: 50%;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;

  /* box-shadow: 0 8px 20px rgba(0,0,0,0.12); */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* card images */
.hero-container.hero-cards .hero-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* hover effect */
.hero-container.hero-cards .hero-card:hover {
  transform: translateY(-6px);
  /* box-shadow: 0 14px 32px rgba(0,0,0,0.18); */
}

/* row 1 image */
.hero-container.hero-cards .hero-row-1 img {
  max-width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
}

/* mobile */
@media (max-width: 768px) {
  .hero-container.hero-cards .hero-content {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-container.hero-cards .hero-row {
    flex-direction: column;
  }

  .hero-container.hero-cards .hero-card {
    width: 100%;
  }
}

/* =========================
   HERO 3 (About section)
   ========================= */
.hero-container.hero-about {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* background */
.hero-container.hero-about .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* overlay */
.hero-container.hero-about .hero-overlay {
  position: relative;
  z-index: 2;
  padding: 100px 0;
  display: flex;
  justify-content: center;
}

/* content wrapper */
.hero-container.hero-about .hero-content {
  max-width: 900px;
  padding-left: 80px;
  padding-right: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;   /* center horizontally */
  text-align: center;    /* center text */
  gap: 32px;
}

/* clickable image */
.hero-container.hero-about .about-image {
  display: inline-block;
  overflow: hidden;
  cursor: pointer;

  /* box-shadow: 0 10px 28px rgba(0,0,0,0.15); */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-container.hero-about .about-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* hover effect */
.hero-container.hero-about .about-image:hover {
  transform: translateY(-6px);
  /* box-shadow: 0 16px 40px rgba(0,0,0,0.22); */
}

/* text */

.hero-container.hero-about .about-text p {
    font-size: 27px;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 12px;
}

/* mobile */
@media (max-width: 768px) {
  .hero-container.hero-about .hero-content {
    padding-left: 24px;
    padding-right: 24px;
  }
}


.video-container {
        width: 90%; /* Mengambil 90% layar di HP */
        max-width: 800px; /* Maksimal lebar 800px di layar komputer (tidak fullscreen) */
        margin: 40px auto; /* Membuatnya berada persis di tengah (center) horizontal */
        border-radius: 12px; /* Sudut melengkung */
        overflow: hidden; /* Memastikan video tidak keluar dari sudut melengkung */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Efek bayangan gelap di sekitarnya */
        background-color: #000000; /* Latar hitam jika video belum memuat */
        display: flex;
    }

    .video-container video {
        width: 100%;
        height: auto;
        display: block;
    }