/** ADD YOUR AWESOME CODES HERE **/
/* =========================================
   KHUSUS MOBILE: SECTION PRICING
   ========================================= */
@media (max-width: 768px) {
  /* 1. Merapikan Judul dan Deskripsi Pricing */
  #pricing .section-title h3 {
    font-size: 20px !important; /* Judul tidak terlalu raksasa */
    margin-bottom: 10px !important;
  }

  #pricing .section-title p {
    font-size: 14px !important; /* Ukuran baca standar HP */
    line-height: 1.6 !important;
    padding: 0 10px; /* Memberi sedikit ruang di kiri-kanan agar teks tidak mentok layar */
  }

  /* 2. Merapikan Tombol Filter (Wedding, Graduation, dll) */
  .filter-btn {
    padding: 6px 12px !important; /* Tombol dibuat sedikit lebih ramping */
    font-size: 10px !important; /* Teks tombol dikecilkan sedikit */
    margin: 4px 2px !important; /* Jarak antar tombol dikurangi agar muat banyak */
    border-width: 1.5px !important; /* Ketebalan garis tepi disesuaikan */
  }

  /* 3. Merapikan Kartu Harga (Pricing Table) */
  .pricing-item {
    margin-bottom: 25px !important; /* Jarak antar kartu saat ditumpuk ke bawah */
    padding: 0 25px !important; /* Menjaga kartu tidak menyentuh tepi layar */
  }

  /* 4. Teks Fitur dalam Kartu (Liputan Akad, 1 Fotografer, dll) */
  .pricing-content li {
    font-size: 0px !important;
    padding: 0px 0 !important; /* Spasi antar baris fitur agar tidak terlalu sumpek */
  }
}

/* Khusus untuk layar HP (Mobile Portrait & Landscape) */
@media (max-width: 767px) {
  .pricingTable-header svg .text-kategori {
    font-size: 14px !important; /* Contoh diperbesar sedikit di HP */
  }

  .pricingTable-header svg .text-paket {
    font-size: 18px !important; /* Contoh diperkecil agar tidak kepanjangan */
  }

  .pricingTable-header svg .text-harga {
    font-size: 20px !important; /* Contoh diperkecil agar pas di kotak */
  }

  /* OPSIONAL: Jika setelah font diubah jarak atas-bawahnya jadi berantakan, 
       bisa digeser posisinya menggunakan translateY */
  /*
    .pricingTable-header svg .text-harga {
        transform: translateY(-5px);
    }
    */
}

.text-gradient-gold {
  background: linear-gradient(45deg, #be9962, #e5c283, #be9962);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}