html,
body {
  scroll-behavior: smooth;
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #000000; /* Latar belakang hitam */
  color: #ffffff; /* Warna teks utama putih */
  min-height: 100vh;
  overflow-x: hidden;
}

/* Navigasi (Header) */
.navbar-container {
  display: flex;
  justify-content: center; /* Pusatkan navbar di tengah halaman */
  /* padding: 20px;
  padding-top: 80px; */
}

/* 2. Content Navbar (Kotak Putih Melengkung) */
.navbar-content {
  top: 50px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1100px; /* Batasi lebar maksimal kotak putih */
  background-color: #ffffff; /* Warna kotak putih */
  border-radius: 50px; /* Membuat sudut sangat melengkung */
  padding: 10px 30px; /* Padding di dalam kotak putih */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sedikit bayangan */
  z-index: 99999;
}

/* 3. Gaya Logo */
.logo {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  color: #000000;
}
.navbar-content a {
  text-decoration: none;
}

.logo img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #ffc400; /* Warna placeholder logo kuning */
}

/* 4. Gaya Tautan Navigasi */
.nav-links {
  flex-grow: 1; /* Biarkan tautan mengambil ruang yang tersedia */
  text-align: center;
  margin: 0 50px; /* Jarak dari logo dan tombol */
}

.nav-links a {
  color: #000000;
  text-decoration: none;
  margin: 0 18px; /* Jarak antar tautan */
  font-size: 16px;
  font-weight: 600;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #ffc400; /* Efek hover (opsional) */
}

/* 5. Gaya Tombol Beli */
.navbar-content .buy-button {
  font-family: "Poppins", sans-serif;
  background-color: #ffc400; /* Warna kuning solid */
  color: #000000;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px; /* Membuat tombol melengkung */
  cursor: pointer;
  transition: background-color 0.3s;
}

.navbar-content .buy-button:hover {
  background-color: #333333;
  color: #ffc400;
}

/* Hero Section */
.hero-section {
  background: url("../img/bg.webp") center/cover no-repeat;
  min-height: 100vh;
  position: relative;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: left;
  margin-top: 40px;
  top: 200px;
}

.hero-content {
  top: 10%;
  padding: 150px 0;
}

.hero-content h1 {
  font-size: 90px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.2;
}

.hero-content p {
  font-weight: 400;
  font-style: normal;
  margin-top: 5px;
  display: inline-block;
  color: white;
  font-size: 35px;
  line-height: 1.2;
}

.highlight {
  color: #ffc400; /* Warna kuning untuk kata kunci */
}

.hero-image img {
  position: relative;
  top: 100px;
  max-width: 600px;
  z-index: 3;
}

.hero-buttons a {
  text-decoration: none;
  padding: 15px 40px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 30px;
  margin-right: 20px;
  transition: opacity 0.3s;
  display: inline-block;
}

.hero-buttons a:hover {
  background-color: #333333;
  color: #ffc400;
  /* border: 1px solid #ffc400; */
}

.btn-twitter {
  background-color: #ffc400; /* Kuning */
  color: #000000;
}

.btn-whitepaper {
  background-color: #ffc400; /* Hitam/Abu-abu gelap */
  color: #000000;
}

/* end hero section */

/* nft gallery */
.nft {
  background: url("../img/bg2.webp") center/cover no-repeat;
  min-height: 95vh;
}

/* Section background */
.card-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 50px;
  padding: 200px 0;
  /* background-color: #000; */
  /* background-image: linear-gradient(180deg, #ffc400 40%, #000 40%); */
}

/* Card styling */
.card {
  background-color: #fff;
  border-radius: 8px;
  width: 350px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.card img {
  width: 100%;
  display: block;
}

/* Card content */
.card-body {
  padding: 20px;
  text-align: center;
}

.card-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #000;
}

.card-body p {
  color: #000;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 15px;
}

/* Button style */
.btn-view {
  background-color: #ffc400;
  color: #000;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-view:hover {
  background-color: #000;
  color: #fff;
  transform: scale(1.05);
}

.body-row {
  display: flex;
  /* Properti tambahan untuk penataan: */
  justify-content: space-around; /* Mendistribusikan ruang horizontal di antara item */
  align-items: center; /* Memusatkan item secara vertikal di dalam kontainer */
}

.body-row .left {
  /* Gaya untuk item anak */
  padding: 10px;
}

.body-row .right {
  /* Gaya untuk item anak */
  padding: 10px;
}

.card-section .active {
  animation-name: bounce;
  animation-duration: 2s; /* Durasi animasi */
  animation-iteration-count: infinite; /* Animasi berjalan berulang */
  animation-timing-function: ease-in-out; /* Fungsi waktu untuk gerakan yang lebih alami */
}

.card-section .next {
  animation-name: bounce;
  animation-duration: 2.5s; /* Durasi animasi */
  animation-iteration-count: infinite; /* Animasi berjalan berulang */
  animation-timing-function: ease-in-out; /* Fungsi waktu untuk gerakan yang lebih alami */
  animation-delay: 0.2s;
}

.card-section .prev {
  animation-name: bounce;
  animation-duration: 2s; /* Durasi animasi */
  animation-iteration-count: infinite; /* Animasi berjalan berulang */
  animation-timing-function: ease-in-out; /* Fungsi waktu untuk gerakan yang lebih alami */
  animation-delay: 0.3s;
}

/* Definisi keyframes untuk animasi 'bounce' */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0); /* Posisi awal dan akhir */
  }
  40% {
    transform: translateY(-50px); /* Memantul ke atas */
  }
  60% {
    transform: translateY(-50px); /* Sedikit turun */
  }
}
/* end nft gallery */

/* section caontract adress */
.contract-adress {
  background-color: #000000;
  color: #ffffff;
  /* Tata letak di tengah halaman */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  margin: 0;
  box-sizing: border-box;
}

.contract-adress-content {
  /* Mengatur tampilan agar elemen berada di tengah vertikal */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Lebar kontainer */
  max-width: 900px; /* Lebar maksimum agar terlihat baik di desktop */
}

/* Bagian Header: CONTRACT ADDRESS */
.header-ca {
  font-size: 5em;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 60px;
  color: #ffffff; /* Warna teks default */
  line-height: 1;
}

.header-ca .highlight-ca {
  color: #ffc400; /* Warna kuning/emas */
}

/* Kotak Contract Address */
.contract-box {
  display: flex;
  align-items: center;
  background-color: #ffc400; /* Warna kuning/emas */
  border-radius: 50px; /* Bentuk kapsul */
  padding: 25px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* Memastikan tidak ada teks yang keluar */
}

.ca-text {
  flex-grow: 1; /* Mengisi ruang yang tersedia */
  color: #000000; /* Teks hitam */
  font-size: 2.5em;
  font-weight: bold;
  text-align: left; /* Teks di sebelah kiri */
  padding-left: 10px;
  white-space: nowrap; /* Mencegah teks putus baris */
}

/* Tombol COPY */
.copy-button {
  background-color: #000000; /* Latar belakang hitam */
  color: #ffffff; /* Teks kuning/emas */
  border: none;
  border-radius: 50px; /* Bentuk kapsul */
  padding: 10px 50px;
  font-size: 2em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  flex-shrink: 0; /* Mencegah tombol menyusut */
}

.copy-button:hover {
  background-color: #333333; /* Sedikit lebih abu-abu saat di-hover */
}

/* Ikon Media Sosial */
.social-icons {
  margin-top: 40px;
  display: flex;
  gap: 15px; /* Jarak antar ikon */
}

.social-icons img {
  height: 65px; /* Ukuran ikon */
  background-color: transparent;
  padding: 8px; /* Padding untuk area klik */
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.3s;
}

/* end section caontract adress */

/* section about */
.about-section {
  padding: 80px 5%;
  background-color: #000;
  font-family: Arial, sans-serif;
  color: #fff;
  margin: 0;
  line-height: 1.6;
}

.about-content {
  /* Menggunakan Flexbox untuk tata letak 2 kolom di desktop */
  display: flex;
  gap: 50px;
  max-width: 1500px;
  margin: 0 auto;
  align-items: flex-start; /* Elemen sejajar di atas */
}

/* --- Teks Content (Kolom Kiri) --- */
.about-text-content {
  flex: 1; /* Mengambil ruang yang tersisa */
  max-width: 60%; /* Batasi lebar teks agar tidak terlalu panjang */
}

.about-title {
  font-size: 4.5em;
  font-weight: bold;
  letter-spacing: 1px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 30px;
  line-height: 1;
}

.about-title .about-highlight {
  color: #ffc400;
}

.about-text-content p {
  font-size: 1.6em;
  margin-bottom: 20px;
}

.motto-box {
  margin-top: 30px;
  /* Font style pada motto terlihat lebih tipis */
  font-weight: 300;
}

.motto-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.motto-line {
  margin: 0;
}

/* --- Gambar Content (Kolom Kanan) --- */
.image-content {
  flex: 1; /* Mengambil ruang yang tersisa */
  max-width: 60%; /* Batasi lebar gambar */
  display: flex;
  justify-content: flex-end; /* Dorong gambar ke kanan */
}

.image-content .about-panda-image {
  width: 600px;
  /* Gunakan properti ini agar gambar tidak berubah bentuk */
  object-fit: cover;
  height: auto;
}
/* end about */

/* banner */
.banner {
  background: url("../img/bg4.webp") center/cover no-repeat;
  height: 500px;
}
/* end banner */

/* utility section */

.section-utility {
  background: url("../img/bg3.webp") center/cover no-repeat;
  color: #fff;
  margin: 0;
  padding: 50px 20px;
  text-align: center;
  max-height: 1000px;
}

/* --- Header Styling --- */
.main-title {
  font-size: 4.5em;
  font-weight: bold;
  letter-spacing: 1px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 10px;
  color: #fff;
}

.main-title .highlight {
  color: #ffc400;
}

.subtitle {
  font-size: 1.6em;
  margin-bottom: 50px;
  font-weight: 300;
}

/* --- Utility Container (Grid for Desktop) --- */
.utility-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* Membuat grid 3x3: utilitas di sudut, gambar di tengah */
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  align-items: center;
}

/* Penempatan area di Grid */
.top-left {
  grid-area: 1 / 1 / 2 / 2;
  text-align: left;
}
.top-right {
  grid-area: 1 / 3 / 2 / 4;
  text-align: right;
}
.center-image-wrapper {
  grid-area: 1 / 2 / 3 / 3; /* Membentang dua baris di kolom tengah */
}
.bottom-left {
  grid-area: 2 / 1 / 3 / 2;
  text-align: left;
}
.bottom-right {
  grid-area: 2 / 3 / 3 / 4;
  text-align: right;
}

/* Styling Kartu Utilitas */
.utility-card {
  position: relative;
  padding: 10px;
}

.utility-card-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #ffc400;
  margin: 0 0 5px 0;
}

.card-description {
  font-size: 1em;
  font-weight: 300;
  color: #fff;
  margin: 0;
}

/* Styling Gambar Pusat */
.center-image-wrapper .img {
  max-width: 100%;
  display: block;
}

.center-image-wrapper .panda-image {
  height: auto;
  width: 600px;
}

/* Styling Panah Melengkung (Menggunakan Pseudo-elements) */
/* Karena panah melengkung murni CSS sangat kompleks, saya akan mensimulasikan
   panah sederhana atau titik panah sebagai penanda visual.
   Untuk mendapatkan panah melengkung seperti di gambar, biasanya digunakan
   gambar SVG atau PNG yang diposisikan secara absolut.
*/
.arrow {
  /* border: 1px solid #e5c400; */
  position: absolute;
  width: 100px;
  height: auto;
  /* Placeholder/simulasi panah */
  /* border-radius: 50%; */
  background-color: transparent;
  z-index: 10;
}

/* Posisi Panah (Simulasi) */
.arrow-tl {
  /* Mengarah ke tengah-kanan */
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  transform: scaleX(-1);
  top: 120px;
  left: 200px;
}
.arrow-tr {
  /* Mengarah ke tengah-kiri */
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
}
.arrow-bl {
  /* Mengarah ke tengah-kanan atas */
  right: 0;
  top: -50px;
  transform: translate(50%, -50%);
  transform: rotate(-180deg);
  left: 220px;
}
.arrow-br {
  /* Mengarah ke tengah-kiri atas */
  left: 0;
  top: -50px;
  transform: translate(-50%, -50%);
  transform: scaleY(-1);
  right: 220px;
}
/* end utility */

/* section howtobuy */
.howtobuy {
  background-color: #000000; /* Latar belakang hitam */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

.howtobuy-content {
  width: 90%;
  max-width: 1200px;
  padding: 40px 20px;
}

/* Header Styles */
.howtobuy-title {
  font-size: 5em;
  font-weight: 700;
  color: #ffffff; /* Warna emas untuk judul */
  margin-bottom: 10px;
}

.howtobuy-title .howtobuy-highlight {
  color: #ffc400;
}

.howtobuy-subtitle {
  font-size: 1.6em;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 50px;
}

/* Steps Grid Styles */
.howtobuy-steps-grid {
  display: flex;
  flex-wrap: wrap; /* Memungkinkan baris baru */
  gap: 50px; /* Jarak antar kartu */
  justify-content: center;
}

.howtobuy-step-card {
  flex: 1 1 calc(50% - 30px); /* 2 kolom per baris */
  width: 400px;
  /* min-width: 200px; Lebar minimum */
  background: url("../img/bgcard.jpg");
  border: 2px solid #ffc400; /* Border emas */
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); /* Efek cahaya emas */
  box-sizing: border-box;
  text-align: center;
  transition: transform 0.3s ease-in-out;
}

.howtobuy-step-card:hover {
  transform: translateY(-5px);
}

.howtobuy-step-card h2 {
  font-size: 2em;
  font-weight: 600;
  color: #ffffff; /* Warna emas untuk subjudul kartu */
  margin-top: 0;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.howtobuy-step-card p {
  font-size: 1.5em;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5;
}
/* end how to buy */

/* section tokenomics */

.tokenomics {
  background-color: #000000;
  color: #ffffff;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.tokenomics-content {
  width: 90%;
  max-width: 1000px;
  padding: 40px 0;
  text-align: center;
}

.yellow-bg {
  background-color: #ffc400; /* Warna kuning solid */
  border-radius: 25px;
  padding: 10px;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

/* Header Styles */
.tokenomics .tokenomics-content header {
  margin-bottom: 40px;
}

.tokenomics-title {
  font-size: 5em;
  font-weight: 900;
  margin-bottom: 5px;
}

.tokenomics-subtitle {
  font-size: 1.6em;
  font-weight: 400;
  color: #ffffff;
}

/* Bagian 1: Total Supply */
.supply-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px 40px;
  font-weight: 700;
}

.supply-text {
  color: #000;
  font-size: 2em;
  font-weight: 900;
}

.supply-value {
  background-color: #000000;
  border-radius: 40px;
  padding: 10px 35px;
  font-size: 2em;
  font-weight: 600;
}

/* Bagian 2: Taxes & Liquidity (Grid) */
.tax-grid {
  background-color: #ffc400; /* Warna kuning solid */
  color: #000000;
  border-radius: 25px;
  padding: 10px;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 kolom yang sama lebar */
  gap: 20px;
  margin-bottom: 40px;
}

.tax-card {
  padding: 20px 10px;
}

.tax-card h2 {
  font-size: 1.6em;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.tax-card p {
  font-size: 1em;
  margin: 0;
}

.border {
  display: flex;
  /* atau display: flex; align-items: center; */
}
.border-isi {
  height: 50px;
  min-height: 100%; /* Mengembangkan agar mengisi tinggi */
  width: 1px;
  background-color: #000000;
}

/* ,
,
,
,
,
,
,
,
,
, */
/* Bagian 3: Promo & Panda Image (Flexbox) */
.promo-section {
  /* background-color: #ffc400;
  color: #000000;
  border-radius: 5px;
  padding: 10px 10px 0 10px;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  display: grid;
  align-items: flex-start; 
  gap: 20px;
  text-align: left; */

  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  background-color: #ffc400; /* Warna kuning solid */
  color: #000000;
  border-radius: 25px;
  padding: 10px 10px 0 10px;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 kolom yang sama lebar */
  gap: 20px;
  bottom: 0;
}

.promo-text {
  flex: 1; /* Memberikan porsi yang sama untuk teks kiri dan kanan */
  padding: 20px;
}

.promo-heading {
  font-size: 1.6em;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 10px;
}

.promo-text p {
  font-size: 1em;
  margin: 0;
}

.panda-image {
  /* Lebar gambar tetap */
  width: 300px;
  flex-shrink: 0; /* Mencegah gambar menyusut */
  position: relative;
  top: 0;
  bottom: 0; /* Geser gambar sedikit ke atas agar tumpang tindih */
}

.panda-img {
  width: 100%;
  height: auto;
  display: block;
}
/* end tokenomics */

/* roadmap section */
.roadmap {
  background-color: #000000; /* Hitam Solid */
  color: #ffffff;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
}

.roadmap-content {
  width: 100%;
  /* max-width: 1200px; */
  padding: 50px 0;
  text-align: center;
}

/* Header Styles */
.roadmap-content header {
  margin-bottom: 40px;
}

.roadmap-title {
  font-size: 5em;
  font-weight: 900;
  margin-bottom: 10px;
}

.roadmap-subtitle {
  font-size: 1.6em;
  font-weight: 400;
  color: #ffffff;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.2;
}

/* 1. Roadmap Visual (Gambar Jalan) */
.jalan img {
  position: relative;
  width: 100vw;
}

/* 2. Detail Langkah (Kotak Bawah) */
.roadmap-details {
  display: grid;
  /* Desktop: 3 kolom per baris */
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.detail-card {
  background: url("../img/bgcard.jpg");
  border: 2px solid #ffc400; /* Border Kuning Emas */
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  text-align: left;
}

.card-title {
  align-items: center;
  text-align: center;
  background-color: #ffc400;
  color: #000000;
  display: inline-block;
  font-size: 1.5em;
  font-weight: 700;
  padding: 10px;
  border-radius: 35px;
  width: 35px;
  height: auto;
  margin-bottom: 25px;
}

.detail-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95em;
  font-weight: 400;
}

.detail-card ul li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 15px;
}

/* Membuat bullet point custom (kuning) */
.detail-card ul li::before {
  content: "•";
  color: #ffffff;
  font-weight: 900;
  position: absolute;
  left: 0;
}
/* end roadmap */

/* section cimmunity */
.community {
  background-color: #ffc400; /* Latar belakang body utama kuning */
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Konten Utama (Latarnya Kuning) */
.main-content {
  flex-grow: 1; /* Agar mengambil sisa ruang di tengah */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 20px;
}

/* Container untuk Kartu */
.card-container {
  max-width: 1000px;
  width: 100%;
  background-color: #ffc400;
}

/* Kartu Komunitas (Kotak Hitam dengan Latar Belakang Kuning) */
.community-card {
  display: flex;
  position: relative;
  background-color: #000000;
  padding: 40px;
  border-radius: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Sisi Kiri: Teks */
.text-content {
  flex: 1;
  padding-right: 20px;
  color: #fff;
  max-width: 60%; /* Teks tidak terlalu memanjang */
}

.heading {
  font-size: 2.5em;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 20px;
  color: #fff;
}

.body-text {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 30px;
}

/* Link Sosial */
.social-links {
  display: flex;
  gap: 25px;
  font-size: 1em;
}

.social-item {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.social-item img {
  width: 40px;
  height: auto;
  color: #000;
  padding: 5px;
  border-radius: 5px;
  margin-right: 8px;
}

/* Sisi Kanan: Gambar Profile Panda */
.image-frame {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.profile-circle {
  position: relative;
  width: 400px; /* Ukuran lingkaran di desktop */
  height: auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 10px va#000, 0 0 0 20px #ffc400; /* Efek Cincin Emas */
  /* Geser Lingkaran ke Kanan */
  transform: translateX(30%);
  z-index: 10;
}

.panda-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-weight: 700;
  font-size: 1.1em;
  text-align: center;
}

/* Footer Styles */
.site-footer {
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 50px;
  font-size: 1em;
}

.logo-text {
  font-weight: 700;
  color: #ffffff;
}

.buy-button {
  font-family: "Poppins", sans-serif;
  background-color: #ffc400;
  color: #000;
  border: none;
  padding: 8px 15px;
  font-weight: 700;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.buy-button:hover {
  background-color: #333333;
  color: #ffc400;
}
/* end community */

/* ==================================== */
/* Tampilan Mobile             */
/* ==================================== */

@media (max-width: 768px) {
  /* navbar */
  .navbar-container {
    display: flex;
    justify-content: center; /* Pusatkan navbar di tengah halaman */
    /* padding: 20px;
  padding-top: 80px; */
  }

  /* 2. Content Navbar (Kotak Putih Melengkung) */
  .navbar-content {
    justify-content: space-around;
    max-width: 310px; /* Batasi lebar maksimal kotak putih */
    background-color: #ffffff; /* Warna kotak putih */
    border-radius: 50px; /* Membuat sudut sangat melengkung */
    padding: 10px 10px; /* Padding di dalam kotak putih */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sedikit bayangan */
    z-index: 99999;
  }

  /* 3. Gaya Logo */
  .logo span {
    display: none;
    font-size: 15px;
  }

  .logo img {
    width: 30px;
    height: 30px;
    margin-right: 3px;
    border-radius: 50%; /* Warna placeholder logo kuning */
  }

  /* 4. Gaya Tautan Navigasi */
  .nav-links {
    margin: 0 5px; /* Jarak dari logo dan tombol */
  }

  .nav-links a {
    margin: 0 3px; /* Jarak antar tautan */
    font-size: 11px;
  }

  /* 5. Gaya Tombol Beli */
  .buy-button {
    display: none;
    background-color: #ffc400; /* Warna kuning solid */
    color: #000000;
    border: none;
    padding: 10px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 30px; /* Membuat tombol melengkung */
    cursor: pointer;
    transition: background-color 0.3s;
  }

  /* end navbar */

  /* Hero Section */
  .hero-section {
    background: url("../img/bg.webp") center/cover no-repeat;
    min-height: 100vh;
    padding: 10px;
    flex-direction: column;
  }

  .hero-row {
    text-align: center;
    margin-top: 20px;
    top: 0;
  }

  .hero-content {
    top: 5%;
    padding: 50px 0;
  }

  .hero-content h1 {
    font-size: 4em;
    line-height: 1.2;
  }

  .hero-content p {
    margin-top: 0;
    font-size: 1.2em;
    line-height: 1.2;
  }

  .hero-image img {
    position: relative;
    top: 5px;
    max-width: 300px;
    z-index: 3;
  }

  .hero-buttons a {
    text-decoration: none;
    padding: 10px 30px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 30px;
    margin: 0 10px;
    transition: opacity 0.3s;
    display: inline-block;
  }

  .hero-buttons a:hover {
    background-color: #333333;
    color: #ffc400;
    /* border: 1px solid #ffc400; */
  }

  .btn-twitter {
    background-color: #ffc400; /* Kuning */
    color: #000000;
  }

  .btn-whitepaper {
    background-color: #ffc400; /* Hitam/Abu-abu gelap */
    color: #000000;
  }

  /* end hero section */

  /* nft gallery */
  .nft {
    background: url("../img/bg2m.jpg") center/cover no-repeat;
    min-height: 85vh;
    height: 1200px;
  }

  /* Section background */
  .card-section {
    padding: 100px 0;
  }

  /* Card styling */
  .card {
    border-radius: 10px;
    width: 250px;
  }

  /* Card content */
  .card-body {
    padding: 10px;
    text-align: center;
  }

  .card-body h3 {
    font-size: 0.9em;
    line-height: 1;
  }

  .card-body p {
    font-size: 0.9em;
    margin-bottom: 10px;
  }
  /* end nft gallery */

  /* section caontract adress */
  .contract-adress {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 45vh;
    height: 300px;
    margin: 0;
    box-sizing: border-box;
  }

  .contract-adress-content {
    max-width: 320px; /* Lebar maksimum agar terlihat baik di desktop */
  }

  /* Bagian Header: CONTRACT ADDRESS */
  .header-ca {
    text-align: center;
    font-size: 2.5em;
  }

  /* Kotak Contract Address */
  .contract-box {
    padding: 10px;
    overflow: hidden; /* Memastikan tidak ada teks yang keluar */
  }

  .ca-text {
    font-size: 1em; /* Mencegah teks putus baris */
  }

  /* Tombol COPY */
  .copy-button {
    /* Bentuk kapsul */
    padding: 5px 25px;
    font-size: 1em;
  }

  /* Ikon Media Sosial */
  .social-icons {
    margin-top: 20px;
    display: flex;
    gap: 15px; /* Jarak antar ikon */
  }

  .social-icons img {
    height: 40px; /* Ukuran ikon */
  }

  /* end section caontract adress */

  /* section about */

  .about-section {
    padding: 20px;
  }

  .about-content {
    /* Ubah menjadi satu kolom dengan arah vertikal */
    flex-direction: column;
    gap: 30px;
  }

  .about-text-content,
  .image-content {
    /* Kembalikan lebar ke 100% di mobile */
    max-width: 100%;
    width: 100%;
  }

  .image-content {
    /* Pindahkan gambar di bawah teks */
    order: 2;
    justify-content: center;
  }

  .image-content .about-panda-image {
    width: 300px;
  }

  .about-text-content {
    /* Pindahkan teks di atas gambar */
    order: 1;
  }

  .about-title {
    text-align: center;
    font-size: 2em;
  }

  .about-text-content p {
    text-align: center;
    font-size: 0.9em;
  }

  .motto-box {
    margin-top: 20px;
  }
  /* end about */

  /* banner */
  .banner {
    background: url("../img/bg3m.webp") center/cover no-repeat;
    height: 220px;
  }
  /* end banner */

  /* utility-section */

  .section-utility {
    background: #000;
  }
  .main-title {
    font-size: 2em;
  }

  .subtitle {
    margin-bottom: 30px;
    font-size: 1em;
  }

  /* Ubah Grid menjadi Flexbox vertikal untuk mobile */
  .utility-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .utility-card {
    text-align: center;
    padding: 0;
    width: 90%; /* Lebar penuh */
  }

  /* Hilangkan panah karena tata letak berubah */
  .arrow {
    display: none;
  }

  /* Susunan konten: Gambar di tengah, dikelilingi teks */
  .utility-card {
    order: 1;
  }
  .center-image-wrapper {
    order: 2;
  }
  .bottom-left {
    order: 3;
  }
  .bottom-right {
    order: 4;
  }

  /* Atur ulang urutan untuk tampilan yang lebih logis di mobile */
  .top-left {
    order: 1;
  }
  .top-right {
    order: 3;
  }
  .bottom-left {
    order: 4;
  }
  .bottom-right {
    order: 5;
  }
  .center-image-wrapper {
    order: 2;
  }

  .center-image-wrapper .panda-image {
    width: 330px;
  }
  /* end utility */

  /* how to buy */
  .howtobuy-title {
    font-size: 2.5em;
  }

  .howtobuy-subtitle {
    font-size: 1em;
    margin-bottom: 30px;
  }

  .howtobuy-steps-grid {
    gap: 20px;
  }

  .howtobuy-step-card {
    /* Mengubah menjadi 1 kolom penuh di layar kecil */
    flex: 1 1 100%;
    min-width: unset;
    padding: 20px;
  }

  .howtobuy-step-card h2 {
    font-size: 1.3em;
  }

  .howtobuy-step-card p {
    font-size: 0.9em;
  }

  /* end how to buy */

  /* tokenomics section */
  .tokenomics .tokenomics-content {
    padding: 30px 15px;
  }

  .tokenomics-title {
    font-size: 2em;
  }

  .tokenomics-subtitle {
    font-size: 1em;
  }
  /* Bagian Supply */
  .supply-box {
    flex-direction: column;
    padding: 15px 20px;
  }

  .supply-text {
    font-size: 1.3em;
  }

  .supply-value {
    font-size: 1em;
  }

  /* Bagian Taxes */
  .tax-grid {
    /* Tumpuk menjadi 1 kolom penuh */
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .promo-section {
    /* Tumpuk menjadi 1 kolom penuh */
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .panda-image {
    /* Pindahkan gambar ke atas tumpukan di mobile */
    order: 2;
    width: 250px;
    /* Posisikan di tengah */
    margin: 0 auto;
    grid-column: 1;
  }
  /* end tokenomics */

  /* roadmap */
  .roadmap-title {
    font-size: 2em;
  }

  .roadmap-subtitle {
    margin: 0 25px;
    font-size: 1em;
  }

  /* Detail Langkah (Kotak Bawah) */
  .roadmap-details {
    /* Mobile: 1 kolom penuh */
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .detail-card {
    margin: 0 25px;
    padding: 15px;
  }

  .card-title {
    font-size: 1em;
    width: 25px;
    padding: 5px;
  }

  .main-content {
    padding: 30px 15px;
  }

  .community-card {
    flex-direction: column; /* Tumpuk secara vertikal */
    align-items: center;
    padding: 30px 20px;
  }

  .text-content {
    max-width: 100%;
    padding-right: 0;
    text-align: center;
    order: 2; /* Pindahkan teks ke bawah gambar */
  }

  .heading {
    font-size: 2em;
  }

  .body-text {
    font-size: 0.9em;
    margin-bottom: 20px;
  }

  /* Ikon Sosial di Mobile: Tumpuk di tengah */
  .social-links {
    justify-content: center;
    margin-bottom: 30px;
  }

  /* Gambar Panda di Mobile */
  .image-frame {
    position: relative;
    height: auto;
    order: 1; /* Pindahkan gambar ke atas teks */
    margin-bottom: 30px;
    /* Hilangkan positioning absolut */
    top: unset;
    right: unset;
    display: block;
  }

  .profile-circle {
    width: 200px; /* Ukuran lebih kecil di mobile */
    height: 200px;
    /* Hilangkan pergeseran, posisikan di tengah */
    transform: none;
    margin: 0 auto;
    border: 10px solid var(--color-yellow);
    box-shadow: 0 0 0 8px var(--color-black), 0 0 0 16px var(--color-yellow);
  }

  /* Footer Mobile */
  .site-footer {
    flex-direction: column; /* Tumpuk item footer */
    padding: 10px 20px;
    text-align: center;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    margin: 5px 0;
  }

  .buy-button {
    width: 100%;
  }
  /* end roadmap */

  .main-content {
    padding: 30px 15px;
  }

  .community-card {
    flex-direction: column; /* Tumpuk secara vertikal */
    align-items: center;
    padding: 30px 20px;
  }

  .text-content {
    max-width: 100%;
    padding-right: 0;
    text-align: center;
    order: 2; /* Pindahkan teks ke bawah gambar */
  }

  .heading {
    font-size: 2em;
  }

  .body-text {
    font-size: 1em;
    margin-bottom: 20px;
  }

  /* Ikon Sosial di Mobile: Tumpuk di tengah */
  .social-links {
    justify-content: center;
    margin-bottom: 30px;
    font-size: 0.7em;
  }

  .social-item img {
    width: 25px;
    height: auto;
  }

  /* Gambar Panda di Mobile */
  .image-frame {
    position: relative;
    height: auto;
    order: 1; /* Pindahkan gambar ke atas teks */
    margin-bottom: 30px;
    /* Hilangkan positioning absolut */
    top: unset;
    right: unset;
    display: block;
  }

  .profile-circle {
    width: 200px; /* Ukuran lebih kecil di mobile */
    height: 200px;
    /* Hilangkan pergeseran, posisikan di tengah */
    transform: none;
    margin: 0 auto;
    /* border: 10px solid #ffc400; */
    /* box-shadow: 0 0 0 8px #000, 0 0 0 16px #ffc400; */
  }

  /* Footer Mobile */
  .site-footer {
    flex-direction: column; /* Tumpuk item footer */
    padding: 10px 20px;
    text-align: center;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    margin: 5px 0;
  }

  .buy-button {
    width: 100%;
  }
}

/* Responsive layout */
/* @media (max-width: 900px) {
  .card-section {
    flex-direction: column;
    align-items: center;
  }
} */