@font-face {
  font-family: 'Qanoar';
  src: url('../fonts/Qanoar.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}  


body {
  font-family: 'Qanoar', Montserrat;
}

.content {
  width: 100%;
  height: 100%;
  margin: 0;
  position: fixed;
  background-image: url("../images/bg-3.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
 
  text-align: center;
  overflow: hidden;
  font-size: clamp(30px, 5vw, 50px); /* Responsif dengan clamp */
  line-height: 1.2; /* Sesuaikan line-height agar lebih fleksibel */
  color: #ecf0f1;
}

.content__container {
  position: relative;
  font-weight: 600;
  overflow: hidden;
  height: 70px;
  padding: 0 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content__container__text {
  display: inline-block;
  font-size: clamp(12px, 3vw, 30px); /* Ukuran responsif dengan clamp */
  margin: 0;
  font-family: 'Qanoar' , montserrat;

}

.content__container__list {
  display: block;
  margin: 0;
  padding-left: 20px;
  list-style: none;
  animation: change 2.6s linear; 
}

.content__container__list-wrapper {
  height:  40px;  /* Sesuai dengan tinggi elemen yang ingin di-animate */
  overflow: hidden; /* Sembunyikan bagian yang keluar */
}


.content__container__list__item {
  line-height: clamp(50px, 4vw, 10px); /* Line-height responsif */
  font-size: clamp(18px, 4vw, 30px); /* Font size responsif */
  margin: 0;
}

/*  */
.mission-header {
  position: absolute; /* Untuk posisi bebas */
  top: 40px; /* Mengatur jarak dari atas */
  left: 90%; /* Menempatkan di tengah secara horizontal */
  transform: translateX(-50%); /* Memastikan elemen berada di tengah secara horizontal */
  font-size: clamp(16px, 4vw, 20px); /* Responsif dengan clamp */
  color: #ffff; /* Warna teks */
  background-color: #2F442E; /* Background semi-transparan */
  padding: 10px 20px; /* Padding untuk memperbesar area teks */
  font-family: Montserrat;
}
/* Animasi Zoom In */
@keyframes zoomIn {
  0% {
    transform: translateX(-50%) scale(0); /* Mulai dengan ukuran sangat kecil */
    opacity: 0; /* Mulai dari tidak terlihat */
  }
  100% {
    transform: translateX(-50%) scale(1); /* Berakhir dengan ukuran asli */
    opacity: 1; /* Tampil sepenuhnya */
  }
}
/* Kontainer untuk teks di tengah */
.content__section {
  display: none;
  width: 100vh;
  height: auto;
  background-color: #2F442E;

}
.mission-content {
  height: auto; /* Pastikan mengisi seluruh tinggi layar */
  background-color: #2f442e94; /* Background color untuk section */
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  text-align: center;
  position: absolute; /* Agar bisa ditempatkan di tengah layar */
  top: 50%; /* Posisi vertikal di tengah */
  left: 50%; /* Posisi horizontal di tengah */
  transform: translate(-50%, -50%); /* Menarik elemen ke tengah dari posisi 50% */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Menambahkan shadow */
  width: 70%; /* Memastikan elemen tidak lebih besar dari lebar layar */
}

.overlay-text {
  position: absolute;
  font-family: 'Qanoar';
  top: 32px; /* Menggunakan unit vh agar proporsional dengan tinggi layar */
  left: 35%; /* Posisikan di tengah */
  transform: translateX(-50%) rotate(-6deg); /* Posisi tengah dan rotasi */
  font-size: clamp(16px, 4vw, 20px); /* Responsif dengan clamp */
  font-weight: bold;
  color: rgb(255, 120, 3);
  z-index: -1; /* Agar teks ini berada di atas main-text */
}

/* Style untuk main-text */
.main-text {
  font-size: clamp(24px, 8vw, 50px); /* Menggunakan clamp untuk ukuran responsif */
  color: #fff;
  margin-top: 5vh; /* Jarak vertikal agar lebih fleksibel */
  font-family: 'Montserrat';
  text-align: center;
}
.second-text {
  font-size: clamp(24px, 8vw, 40px); /* Menggunakan clamp untuk ukuran responsif */
  color: #fff;
  margin-top: 5vh; /* Jarak vertikal agar lebih fleksibel */
  font-family: 'Montserrat';
  text-align: center;
}


/* Button style */
.upload-button {
  padding: 12px 24px;
  background-color: #fff;
  color: #2F442E;
  border: none;
  border-radius: 25px; /* Membuat sudut membulat */
  cursor: pointer;
  margin-top: 20px;
  font-size: clamp(14px, 4vw, 18px); /* Menggunakan clamp untuk ukuran responsif */
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  display: inline-flex;
  align-items: center; /* Agar ikon sejajar dengan teks */
  gap: 10px; /* Jarak antara ikon dan teks */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Efek shadow */
  transition: all 0.3s ease; /* Efek transisi halus */
  outline: none; /* Hilangkan outline default */
}

/* Efek saat tombol di-hover */
.upload-button:hover {
  background-color: #2F442E;
  color: #fff;
  transform: translateY(-4px); /* Tombol naik sedikit */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); /* Shadow lebih besar saat di-hover */
}

/* Efek saat tombol ditekan */
.upload-button:active {
  transform: translateY(0); /* Tombol kembali ke posisi semula */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Gaya untuk ikon */
.upload-button i {
  font-size: 1.2em;
}

/*  */
/* Animasi Perubahan Teks */

@-webkit-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

/* Animasi Perubahan Teks */
@-webkit-keyframes change {
  0% {
    transform: translate3d(0, 0, 0); /* Posisi pertama */
  }
  20% {
    transform: translate3d(0, -20%, 0); /* Posisi kedua */
  }
  40% {
    transform: translate3d(0, -40%, 0); /* Posisi ketiga */
  }
  60% {
    transform: translate3d(0, -60%, 0); /* Posisi keempat */
  }
  80% {
    transform: translate3d(0, -80%, 0); /* Posisi kelima */
  }
  100% {
    transform: translate3d(0, 0, 0); /* Kembali ke posisi pertama */
  }
}

@-o-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-o-keyframes change {
  0% {
    transform: translate3d(0, 0, 0); /* Posisi pertama */
  }
  20% {
    transform: translate3d(0, -20%, 0); /* Posisi kedua */
  }
  40% {
    transform: translate3d(0, -40%, 0); /* Posisi ketiga */
  }
  60% {
    transform: translate3d(0, -60%, 0); /* Posisi keempat */
  }
  80% {
    transform: translate3d(0, -80%, 0); /* Posisi kelima */
  }
  100% {
    transform: translate3d(0, 0, 0); /* Kembali ke posisi pertama */
  }
}

@keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@keyframes change {
  0% {
    transform: translate3d(0, 0, 0); /* Posisi pertama */
  }
  20% {
    transform: translate3d(0, -20%, 0); /* Posisi kedua */
  }
  40% {
    transform: translate3d(0, -40%, 0); /* Posisi ketiga */
  }
  60% {
    transform: translate3d(0, -60%, 0); /* Posisi keempat */
  }
  80% {
    transform: translate3d(0, -80%, 0); /* Posisi kelima */
  }
  100% {
    transform: translate3d(0, 0, 0); /* Kembali ke posisi pertama */
  }
}
/*   
.popup-mission {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2F442E;
  background-size: cover;
  color: #ecf0f1;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  font-size: clamp(14px, 3vw, 20px);
  text-align: center;
  display: none; 
  z-index: 1000;
}

.popup-mission p {
  margin: 0;
  font-family: 'Qanoar', Montserrat;
}
 */


/* Animasi fadeIn untuk pop-up */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -55%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Untuk ukuran HP kecil hingga 400px */
@media screen and (max-width: 400px) {
  .mission-header { 
    font-size: clamp(13px, 4vw, 15px); /* Responsif dengan clamp */
  }
  .mission-content {
      width: 90%; /* Memastikan elemen tidak lebih besar dari lebar layar */
  }

  .main-text {
      font-size: clamp(14px, 6vw, 28px);
      margin-top: 4vh;
      position: relative; /* Menjaga overlay tetap dalam main-text */
  }

  .overlay-text {
      position: absolute;
      top: 20px; /* Menyesuaikan posisi vertikal */
      left: 29%; /* Posisi pada HP kecil */
      transform: translateX(-50%) rotate(-6deg); /* Memposisikan secara horizontal dan sedikit rotasi */
      font-size: clamp(14px, 3vw, 12px);
      white-space: nowrap;
  }

  .second-text {
      font-size: clamp(16px, 5vw, 16px);
  }

  .upload-button {
      padding: 8px 16px;
      font-size: clamp(12px, 5vw, 16px);
      gap: 10px;
      text-align: center;
  }
}

/* Untuk ukuran HP menengah hingga 576px */
@media screen and (max-width: 576px) {
  .mission-header { 
    font-size: clamp(14px, 4vw, 16px); /* Responsif dengan clamp */
  }
  .mission-content {
      width: 90%; /* Memastikan elemen tidak lebih besar dari lebar layar */
    
  }

  .main-text {
      font-size: clamp(16px, 6vw, 30px);
      margin-top: 5vh;
      position: relative;
  }

  .overlay-text {
      position: absolute;
      top: 20px; /* Menyesuaikan posisi vertikal */
      left: 33%; /* Menyesuaikan posisi untuk layar yang lebih lebar */
      transform: translateX(-50%) rotate(-6deg);
      font-size: clamp(14px, 3vw, 18px);
      white-space: nowrap;
  }

  .second-text {
      font-size: clamp(16px, 5vw, 16px);
  }

  .upload-button {
      padding: 8px 16px;
      font-size: clamp(12px, 5vw, 18px);
      gap: 10px;
      text-align: center;
  }
}

/* Untuk ukuran HP besar hingga 768px */
@media screen and (max-width: 768px) {
  .mission-header { 
    font-size: clamp(13px, 5vw, 15px); /* Responsif dengan clamp */
  }
  .mission-content {
      width: 85%; /* Mengurangi lebar sedikit untuk layar lebih besar */
     
  }

  .main-text {
      font-size: clamp(18px, 5vw, 32px);
      margin-top: 5vh;
      position: relative;
  }

  .overlay-text {
      position: absolute;
      top: 20px;
      left: 37%; /* Menyesuaikan posisi untuk layar lebih besar */
      transform: translateX(-50%) rotate(-6deg);
      font-size: clamp(16px, 3.5vw, 22px);
      white-space: nowrap;
  }

  .second-text {
      font-size: clamp(18px, 5vw, 20px);
  }

  .upload-button {
      padding: 10px 20px;
      font-size: clamp(12px, 5vw, 18px);
      gap: 12px;
      text-align: center;
  }
}

/* Untuk ukuran iPad hingga 1024px */
@media screen and (max-width: 1024px) {
  .mission-header { 
    font-size: clamp(13px, 5vw, 15px); /* Responsif dengan clamp */
  }
  .mission-content {
      width: 80%; /* Memastikan elemen cukup lebar untuk tablet */
      
  }

  .main-text {
      font-size: clamp(20px, 4vw, 36px);
      margin-top: 6vh;
      position: relative;
  }

  .overlay-text {
      position: absolute;
      top: 48px;
      left: 35%; /* Menyesuaikan posisi untuk iPad */
      transform: translateX(-50%) rotate(-6deg);
      font-size: clamp(13px, 3vw, 10px);
      white-space: nowrap;
  }

  .second-text {
      font-size: clamp(18px, 4vw, 24px);
  }

  .upload-button {
      padding: 12px 24px;
      font-size: clamp(16px, 4vw, 20px);
      gap: 15px;
      text-align: center;
  }
}

/* Untuk layar lebih besar dari iPad (tablet hingga desktop) */
@media screen and (min-width: 1025px) {
  .mission-header { 
    font-size: clamp(13px, 5vw, 15px); /* Responsif dengan clamp */
  }
  .mission-content {
      width: 70%; /* Mengurangi lebar untuk tampilan lebih besar */
      
  }

  .main-text {
      font-size: clamp(22px, 3.5vw, 40px);
      margin-top: 7vh;
      position: relative;
  }

  .overlay-text {
      position: absolute;
      top: 55px;
      left: 38%; /* Menyesuaikan untuk posisi lebih besar */
      transform: translateX(-50%) rotate(-6deg);
      font-size: clamp(18px, 3vw, 14px);
      white-space: nowrap;
  }

  .second-text {
      font-size: clamp(20px, 3vw, 30px);
  }

  .upload-button {
      padding: 14px 28px;
      font-size: clamp(16px, 3vw, 20px);
      gap: 18px;
      text-align: center;
  }
}