:root{
  --bg-menu: #97fcea;
  --card-divisi-header: #00baba;
  --white: white;
  --bg-card: #040811;
  --main-cyan: #58C4B1;
  --button-line: #7df5df;
  --main-white: #ededed;
  --text-body: #ffff;
}


@font-face {
  font-family: "Fontfooter";
  src: url('../asset/font/pragmatica-extended-bold.ttf') format('truetype');

  font-style: normal;
}

footer {
  background-color: #333;
  color: var(--main-white);
  
  text-align: center;
  /* height: 100vh; */
  display: flex; /* Ubah menjadi flex container */
  flex-direction: column; /* Atur item dalam kolom */
  justify-content: space-between; /* Dorong item ke ujung-ujung */
  z-index: 999;
  background-color: #040811;
}

.footer-tulisan-kelas{
  /* margin-top: -120px; */
  width: 100%; /* Agar bisa mengambil lebar penuh dan align item di dalamnya */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-tulisan{
  width: 45%;
  margin-top: 0;
}

.bagian-footer {
  height: 80vh; /* Pastikan ada tinggi yang cukup untuk distribusi */
  position: relative; /* Changed from 'contain' */
  background-image: url(../asset/images/ARTICLE-ASSETS/GET-IN-TOUCH-BACKGROUND.jpg);
  background-size: cover; /* Gunakan 'cover' agar gambar memenuhi kontainer */
  background-repeat: no-repeat;
  background-position: center 25%;
  border-top: 0.5px solid var(--button-line);
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  text-align: left;
  padding: 40px 20px; /* Beri padding agar ada ruang dari tepi */
  
  /* --- Perubahan Kunci di sini --- */
  display: flex; /* Aktifkan Flexbox */
  flex-direction: column; /* Susun item dalam kolom (vertikal) */
  justify-content: space-between; /* Dorong item pertama ke atas, item terakhir ke bawah, sisanya di antara */
  align-items: flex-start; /* Sejajarkan item ke kiri */
  /* --- Akhir Perubahan Kunci --- */

  box-shadow: 
    0 0 50px rgba(125, 245, 223, 0.3), 
    0 0 200px rgba(125, 245, 223, 0.2), 
    0 0 500px rgba(125, 245, 223, 0.1); 
}

.bagian-footer::before {
  content: '';
  position: absolute;
  top: -5px; /* Sesuaikan posisi agar glow terlihat di atas border */
  left: -5px;
  right: -5px;
  height: 5px; /* Ketebalan glow */
  background: linear-gradient(to right, transparent, #7df5df, transparent); /* Gradien untuk efek glow */
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  z-index: -1; /* Agar berada di belakang konten utama */
}

.bagian-footer h3 {
  font-size: 90px;
  /* padding-top: 50px; */
  font-weight: 800;
  line-height: 0.2;
  font-family: "Fontfooter", 'Courier New';
}

.bagian-footer h3 span{
  color: var(--main-cyan);
}

:root {
  --main-white: #ededed;
  --main-cyan: #58C4B1;
}
.btn-email {
  color: var(--main-white);
  font-size: 30px;
  font-weight: 50; /* Perhatikan: font-weight biasanya kelipatan 100, seperti 400, 500, 600 */
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding-bottom: 15px;
  display: inline-flex; /* Gunakan inline-flex agar lebar button menyesuaikan konten */
  align-items: center;
  gap: 10px; /* Kurangi gap agar ikon lebih dekat ke teks */
  /* Hapus atau sesuaikan gap: 200px; karena terlalu besar */
}

/* Garis default (putih) */
.btn-email::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; /* Mulai dari kiri teks */
  height: 2px;
  /* --- Perubahan di sini --- */
  width: 100%; /* Lebar default sama dengan lebar tombol (yaitu lebar teks + ikon) */
  /* --- Akhir Perubahan --- */
  background-color: var(--main-white);
  z-index: 1;
  /* Tambahkan transisi jika ingin garis putih bergerak */
  transition: width 0.5s ease-in-out, transform 0.5s ease-in-out;
}


.btn-email span {
  position: relative;
  z-index: 2;
  color: var(--main-white);
  overflow: hidden;
  display: inline-block;
  /* --- Perubahan di sini --- */
  /* Penting: Pastikan span tidak memiliki lebar 100% dari parent */
  white-space: nowrap; /* Mencegah teks mematah ke baris baru */
  /* --- Akhir Perubahan --- */
}

/* Teks yang berubah warna saat hover */
.btn-email span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--main-cyan);
  width: 0%;
  overflow: hidden;
  transition: width 0.5s ease-in-out;
  z-index: 3;
}

.btn-email:hover span::after {
  width: 100%;
}

/* Garis hover (cyan) */
.btn-email::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; /* Mulai dari kiri teks */
  height: 2px;
  width: 0%; /* Mulai dari lebar 0 */
  background-color: var(--main-cyan);
  transition: width 0.5s ease-in-out; /* Animasi lebar garis bawah */
  z-index: 2;
}

.btn-email:hover::after {
  width: 100%; /* Garis bawah cyan penuh saat hover */
}

.btn-email ion-icon {
  /* --- Perubahan di sini --- */
  margin-left: 0; /* Hapus margin-left karena gap sudah diatur di parent */
  /* --- Akhir Perubahan --- */
  font-size: 1.5em;
  color: var(--main-white);
  transition: color 0.5s ease-in-out;
}

.btn-email:hover ion-icon {
  color: var(--main-cyan);
}

.copyright {
  bottom: 0;
  left: 0;
  margin-bottom: 0;
  margin-top: 50px; /* Dorong copyright ke bawah */
}

.gabungan-footer-semua {
  width: 100%;
  display: flex;
  flex-direction: column; /* Mengatur item di dalamnya secara vertikal */
  align-items: center; /* Memusatkan konten di dalamnya secara horizontal */
  /* justify-content: space-around; <-- Hapus ini jika tidak perlu, karena parent sudah mengatur posisi utama */
  /* --- Perubahan Kunci di sini --- */
  /* Hapus margin-top: 300px; jika ada, karena justify-content: space-between; pada parent sudah mendorongnya ke bawah */
  margin-bottom: 0; /* Pastikan tidak ada margin-bottom yang mengganggu posisi */
  /* --- Akhir Perubahan Kunci --- */
}

.gabungan-footer-bawah {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex; /* Aktifkan Flexbox */
  flex-direction: column;
}

.bagian-footer-bawah {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 30px;
  /* padding-left: 30px;
   */
}

.bagian-footer-bawah-kanan{
  padding-right: 70px;
}

.copyright{
  justify-content: center;
  display: flex;
}


.footer-kiri,
.footer-kiri1 {
  text-align: left;
}

.footer-kiri p,
.footer-kiri1 p {
  margin: 5px 0; /* Memberi jarak antar paragraf */
  font-size: 20px;
  padding: 5px;
  padding-left: 70px;
  margin-right: -50px;
}

.gabungan-footer-kiri {
  display: flex;
  justify-content: start;
}

.footer-kiri-pisah{
  display: flex;
  justify-content: start;
  gap: 2px;
  margin-right: 100px;
  
}

.footer-kiri1-pisah{
  display: flex;
  justify-content: start;
  gap: 2px;
  
}


.footer-kanan,
.footer-kanan1 {
  text-align: center;
 /* Memberi jarak antar paragraf */
  font-size: 20px;
  

  /* padding-left: 70px;
  margin-right: -50px; */
}

.footer-kanan p,.footer-kanan1 p{
  color: var(--main-cyan);
  font-weight: 700;
  font-size: 30px;
}

.gabungan-footer-kanan {
  padding-right: 70px;
  font-size: 20px;
  margin-right: 100px;
}

.contact-us-button {
  border-radius: 5px;
  width: 200px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, color 0.4s linear, box-shadow 0.3s ease; /* Tambahkan box-shadow transition */
  background: none;
  border: 2px solid var(--main-cyan); /* Initial border color */
  position: relative;
  color: var(--main-white);
  border-radius: 50px;
  box-shadow: 0 0 5px var(--main-cyan); /* Subtle initial glow */
  margin-top: -10px;
}

.contact-us-button-email {
  border-radius: 5px;
  width: 320px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, color 0.4s linear, box-shadow 0.3s ease; /* Tambahkan box-shadow transition */
  background: none;
  border: 2px solid var(--main-cyan); /* Initial border color */
  position: relative;
  color: var(--main-white);
  border-radius: 50px;
  box-shadow: 0 0 5px var(--main-cyan); /* Subtle initial glow */
  margin-top: -10px;
}

.button-contact-us-text{
  font-size: 20px;
}

.contact-us-button:hover {
  transform: scale(1.1); /* Memperbesar tombol 1.1 kali */
  background-color: var(--main-cyan);
  color: #040811; /* Change text color on hover for better contrast */
  box-shadow: 0 0 10px var(--main-cyan), 0 0 20px var(--main-cyan), 0 0 30px var(--main-cyan); /* Stronger neon glow on hover */
}

/* Styling for bintang-atas (upward sparkles) */
.bintang-atas {
  position: relative;
  width: 100%;
  height: 30vh; /* Same height as bintang-bawah */
  overflow: hidden;
  background: transparent; /* Ensure background is transparent */
  z-index: 10;
}

/* Sparkle particle styling for bintang-atas */
.bintang-atas::before,
.bintang-atas::after,
.bintang-atas .sparkle {
  content: '';
  position: absolute;
  background: #ffffff; /* White sparkles */
  border-radius: 50%; /* Circular sparkles */
  box-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff; /* Glow effect */
  animation: sparkle-up 3s linear infinite; /* Animation for floating upward */
}

/* Multiple sparkles with different sizes and positions for bintang-atas */
.bintang-atas::before {
  width: 6px;
  height: 6px;
  left: 20%;
  animation-delay: 0s;
}

.bintang-atas::after {
  width: 4px;
  height: 4px;
  left: 50%;
  animation-delay: 1s;
}

.bintang-atas .sparkle:nth-child(1) {
  width: 5px;
  height: 5px;
  left: 30%;
  animation-delay: 0.5s;
}

.bintang-atas .sparkle:nth-child(2) {
  width: 3px;
  height: 3px;
  left: 70%;
  animation-delay: 1.5s;
}

.bintang-atas .sparkle:nth-child(3) {
  width: 7px;
  height: 7px;
  left: 90%;
  animation-delay: 2s;
}

.footer-kiri-pisah .footer-kiri p,
.footer-kiri1-pisah .footer-kiri1 p {
  margin: 5px 0; /* Memberi jarak antar paragraf */
  font-size: 20px;
  padding: 5px;
  padding-left: 70px;
  margin-right: -50px;
  color: var(--main-white); /* Ensure text is initially white */
  transition: color 0.3s ease; /* Smooth color transition */
}

.footer-kiri-pisah .footer-kiri p:hover,
.footer-kiri1-pisah .footer-kiri1 p:hover {
  color: var(--main-cyan); /* Change color on hover */
  cursor: pointer; /* Indicate it's interactive */
}


/* Upward sparkle animation */
@keyframes sparkle-up {
  0% {
    transform: translateY(30vh) translateX(0) scale(1); /* Start at bottom */
    opacity: 1;
  }
  50% {
    transform: translateY(15vh) translateX(calc(sin(1) * 20px)) scale(0.75); /* Subtle horizontal drift */
    opacity: 0.7;
  }
  100% {
    transform: translateY(-50%) translateX(0) scale(0.5); /* Move upward to top */
    opacity: 0; /* Fade out */
  }
}

@media (max-width: 1024px) { 
  .footer-kanan p, .footer-kanan1 p {
    font-size: 25px;
  }

  .contact-us-button {
    width: 180px;
  }

  .button-contact-us-text {
    font-size: 16px;
}

.btn-email{
  font-size: 26px;
}

.copyright{
  margin-top: 20px;
}
}

@media (max-width: 425px){ 
  .bintang-atas {
    height: 10vh; /* Same height as bintang-bawah */
  }
}

@media (min-width: 768px) {
  .outline-text {
    font-size: 7.5vw !important;
    -webkit-text-stroke-width: 3px !important;
    -moz-text-stroke-width: 3px !important;
    text-stroke-width: 3px !important;
  }
}

@media (min-width: 1280px) {
  .outline-text {
    font-size: 5.5vw !important;
    -webkit-text-stroke-width: 5px !important;
    -moz-text-stroke-width: 5px !important;
    text-stroke-width: 5px !important;
  }
}

.outline-text {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -moz-text-stroke-width: 2px;
  text-stroke-width: 2px;
  line-height: 1.1;
  stroke-linejoin: round;
  stroke-linecap: round;
  font-family: "Fontfooter";
  font-weight: 400;
  font-style: normal;
  font-size: 8vw;
}

.white-outline {
  -webkit-text-stroke-color: white;
  -moz-text-stroke-color: white;
  text-stroke-color: white;
  white-space: nowrap;
}

.aqua-outline {
  -webkit-text-stroke-color: #5ff2f0;
  -moz-text-stroke-color: #5ff2f0;
  text-stroke-color: #5ff2f0;
}