body {
  margin: 0;
  font-family:  Helvetica,sans-serif;
  background-color: #000000;
  color: rgb(255, 255, 255);
  
}
.hero-section {
  text-align: center;
  padding-top: 2rem;
}
.logo {
  width: 100vw;
  height: 20vw;
  display: block;
  object-fit: cover;
}
.hero-alt {
  text-align: center;
  padding-top: 21rem;
}
.floating-logo {
  font-size: 10rem; /* Customize size */
  color: white;
  animation: floatText 3s ease-in-out infinite;
 padding-left: 15rem;

}
.floating-logo .plum {
  font-family: 'Helvetica', sans-serif;
  font-style: normal;
  color: #c5af37;
  letter-spacing: -0.9rem;  /* tighten spacing between letters */
  word-spacing: -0.2em;     /* tighten the gap between 'Know' and 'More' */
}
.floating-logo .union {
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  font-style: oblique; /* or italic */
  color: #c5af37;
  letter-spacing: -0.09em;  /* tighten spacing between letters */
  word-spacing: -0.9em;     /* tighten the gap between 'Know' and 'More' */
}
@keyframes floatText {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.description-section {
  text-align: left;
  padding-left: 30rem;
}
.description-section h2 span {
  color: #000;
  background-color: #c5af37;
  font-weight: bold;
  font-size: 3rem;
  text-align: right;
}

.description-section p {
  font-size: 1.2rem;
  line-height: 1.7rem;
  margin-top: 1rem;
}
.footer-line p {
  font-size: 1.2rem;
  color: #ddd;
  max-width: 800px;
  margin: 0 auto;
}

.footer-line .brand-tag {
  font-size: 3rem;
  font-style: oblique;
  font-weight: bold;
  color: #c5af37;
  margin-top: 1rem;
}
.bottom-text {
  font-size: 1rem;           /* Ukuran kecil walau pakai h1 */
  color: #c5af37;            /* Warna emas agar selaras */
  text-align: center;
  background-color: black;
  padding: 5rem 0;
  padding-left: 30rem;
  margin: 0;
  position: auto;        /* Ubah ke fixed jika ingin selalu tampil */
}
.back-button {
  position: fixed;
  bottom: 400px;
  right: 410px;
  z-index: 1000;
  display: inline-block;
  transition: transform 0.1s ease;
}

.back-button img {
  width: 100px;
  height: auto;
  transition: filter 0.3s ease;
}

.back-button:hover img {
  content: url(assets/images/MainPagesW.png);
  cursor: pointer;
  transform: scale(1.5);
}

.back-button.rotate {
  transform: rotate(-20deg);
}
@media (max-width: 768px) {
  .floating-logo {
    font-size: 5rem;
    padding-left: 0rem;
    text-align: center;
  }

  .description-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: left;
  }

  .description-section p {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .bottom-text {
    padding-left: 0;
    padding-right: 0;
    font-size: 0.5rem;
    text-align: left;
  }

  .back-button {
    bottom: 2rem;
    right: 2rem;
  }
}