@charset "UTF-8";
:root {
  --clr-primary: coral;
  --clr-danger: #ff7782;
  --clr-success: #41f1b6;
  --clr-white: #fff;
  --clr-info-dark: #363949;
  --clr-info-light: #dce1eb;
  --clr-dark: #363949;
  --clr-warnig: #ff4edc;
  --clr-light: rgba(1, 2, 8, 0.18);
  --clr-primary-variant: #111e88;
  --clr-dark-variant: #677483;
  --clr-color-background: #f6f6f9;
  --card-border-radius: 2rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 0.8rem;
  --border-radius-3: 1.2rem;
  --card-padding: 1.8rem;
  --padding-1: 1.2rem;
  --box-shadow: 0 2rem 3rem var(-- clr-light);
}

body {
  background-color: #FFF;
  font-family: "Poppins", sans-serif;
  color: #071C4D;
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
}

/* Navbar styling */
.navbar {
  position: fixed;
  /* Make the navbar fixed at the top */
  top: 20px;
  /* Position it at the top */
  left: 50.79%;
  transform: translateX(-50%);
  /* Center the navbar horizontally */
  width: 70%;
  /* Set initial width */
  max-width: 1280px;
  /* Optional: Limit the maximum width */
  z-index: 1000;
  /* Ensure it is above other elements */
  border-radius: 30px;
  /* Add rounded corners */
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  /* Add shadow for better visibility */
  transition: all 0.3s ease;
  /* Smooth transition for appearance changes */
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  /* Efek blur */
  -webkit-backdrop-filter: blur(10px);
  /* Background color for visibility */
}

/* Mengubah padding body agar konten tidak tertutup navbar */
body {
  padding-top: 100px;
  /* Sesuaikan dengan tinggi navbar dan jarak dari atas */
}

/* Responsive Navbar */
@media (max-width: 1280px) {
  .navbar {
    width: 100%;
    /* Full width on screens up to 1280px */
  }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .navbar {
    width: 70%;
    /* Maintain 70% width between 1025px and 1280px */
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .navbar {
    width: 80%;
    /* Maintain 80% width between 1024px and 769px */
  }
}
@media (max-width: 768px) {
  .navbar {
    width: 100%;
    /* Full width on smaller screens */
    border-radius: 0;
    /* Remove border-radius on smaller screens */
    left: 0;
    /* Full width positioning */
    transform: none;
    /* Remove centering transform */
    top: 0;
    /* Navbar sticks to the top of the screen on smaller screens */
  }
}
/* Styling tambahan untuk navbar saat aktif atau di-scroll */
.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  /* Sedikit transparan saat di-scroll */
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  /* Menambah bayangan saat di-scroll */
}

/* Responsive Navbar */
/* Ganti warna teks untuk item menu normal */
.nav-link {
  color: #333;
  /* Warna teks default */
}

.nav-link:hover {
  color: coral;
  /* Warna teks saat hover */
}

/* Navbar Brand */
.navbar-brand img {
  max-height: 40px;
}

/* Navbar Links */
.navbar-light .navbar-nav .nav-link {
  color: #071C4D;
}

.navbar-light .navbar-nav .nav-link.active {
  font-weight: bold;
  color: #071C4D !important;
}

/* Button Navbar Right */
.btn-navbar-right {
  margin-top: -10px !important;
  margin-bottom: -8px !important;
  margin-right: -18px !important;
  height: 70px;
  border-radius: 0;
}

/* Login Button */
/* Styling dasar untuk tombol login */
.btn-login {
  background-color: coral;
  /* Warna latar belakang tombol */
  color: #fff;
  /* Warna teks */
  padding: 10px 25px;
  /* Padding untuk ukuran tombol, ditambahkan lebih besar untuk kapsul */
  border: none;
  /* Menghapus border default */
  border-radius: 30px;
  /* Membuat sudut melengkung besar untuk efek kapsul */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Bayangan seperti navbar */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  /* Animasi transisi */
  cursor: pointer;
  font-size: 18px;
  /* Menambahkan pointer pada mouse saat hover */
  font-weight: bold !important;
}

/* Hover effect untuk tombol login */
.btn-login:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  color: #fff;
  transition: all 0.4s;
  /* Warna teks tetap putih */
}

.btn-register {
  background-color: coral;
  /* Warna latar belakang tombol */
  color: #fff;
  /* Warna teks */
  padding: 6px 15px;
  /* Padding untuk ukuran tombol, ditambahkan lebih besar untuk kapsul */
  border: none;
  /* Menghapus border default */
  border-radius: 30px;
  /* Membuat sudut melengkung besar untuk efek kapsul */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Bayangan seperti navbar */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  /* Animasi transisi */
  cursor: pointer;
  font-size: 14px;
  /* Warna border untuk tombol Register */
  font-weight: bold;
}

.btn-register:hover {
  background-color: #071C4D;
  /* Warna latar belakang saat di-hover */
  border-color: #FF9E53;
  /* Warna border saat di-hover */
}

/* Styling dasar untuk foto profil dan nama */
.navbar-profile {
  display: flex;
  align-items: center;
}

.profile-photo {
  width: 40px;
  /* Ukuran foto profil */
  height: 40px;
  /* Ukuran foto profil */
  border-radius: 50%;
  /* Membuat foto menjadi lingkaran */
  -o-object-fit: cover;
     object-fit: cover;
  /* Memastikan gambar terisi penuh dalam lingkaran */
}

.profile-name {
  font-size: 16px;
  /* Ukuran font nama pengguna */
  color: #071C4D;
  /* Warna teks */
  font-weight: 600;
  /* Tebal font */
  margin-left: 10px;
  /* Spasi antara foto dan nama */
}

/* Responsif untuk profil di layar besar */
.navbar-profile {
  display: none;
  /* Sembunyikan di layar kecil */
}

.d-lg-flex .navbar-profile {
  display: flex;
  /* Tampilkan di layar besar */
}

/* Profil mobile */
.navbar-profile-mobile {
  display: none;
  /* Sembunyikan di layar besar */
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: coral;
  color: #fff;
}

/* Optional: Menyesuaikan tombol di layar kecil */
/* Large Screens (Desktops) and Above (≥ 992px) */
@media (min-width: 992px) {
  .navbar {
    top: 20px;
    /* Maintain top offset for large screens */
    width: 90%;
    /* Maintain width for large screens */
    border-radius: 30px;
    /* Rounded corners */
    max-width: 1200px;
    left: 51%;
    /* Limit the maximum width */
  }
  body {
    padding-top: 90px;
    /* Adjust padding based on the navbar height and offset */
  }
  .navbar-profile {
    display: flex;
    /* Sembunyikan profil desktop di layar kecil */
  }
  .navbar-profile-mobile {
    display: none;
    /* Tampilkan profil mobile */
    justify-content: center;
    /* Pusatkan gambar profil */
  }
  .navbar-collapse {
    flex-direction: column;
    /* Susun konten dalam kolom */
    align-items: center;
    /* Pusatkan elemen dalam kolom */
  }
}
/* Tablets (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar {
    top: 15px;
    /* Reduce the top offset for tablets */
    width: 80%;
    /* Increase width for better fit on tablets */
    border-radius: 25px;
    /* Slightly reduce the border-radius */
    max-width: 90%;
    /* Remove max-width restriction */
  }
  body {
    padding-top: 80px;
    /* Adjust padding for tablet screens */
  }
  .navbar-profile {
    display: none;
    /* Sembunyikan profil desktop di layar kecil */
  }
  .navbar-profile-mobile {
    display: flex;
    /* Tampilkan profil mobile */
    justify-content: left;
    /* Pusatkan gambar profil */
  }
  .navbar-profile-mobile .profile-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .navbar-profile-mobile .profile-name {
    display: block;
    margin-top: 10px;
  }
  /* Style for dropdown items */
  .dropdown-menu {
    width: 100%;
    text-align: left;
  }
  .dropdown-item {
    text-align: left;
  }
  .dropdown-divider {
    margin: 0;
  }
}
/* Mobile Devices (Up to 767px) */
@media (max-width: 767px) {
  .navbar {
    top: 10px;
    /* Align the navbar closer to the top for mobile screens */
    width: 90%;
    /* Almost full width for mobile */
    max-width: 100%;
    /* Remove any width restrictions */
    border-radius: 20px;
    /* Reduce the border-radius for mobile */
  }
  body {
    padding-top: 70px;
    /* Adjust padding for mobile screens */
  }
  .navbar-profile-mobile {
    display: flex;
    align-items: left;
    justify-content: flex-start;
    /* Posisikan gambar dan teks dari kiri ke kanan */
  }
  .navbar-profile-mobile .profile-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .navbar-profile-mobile .profile-name {
    display: block;
    margin-top: 10px;
  }
  /* Style for dropdown items */
  .dropdown-menu {
    width: 100%;
    text-align: left;
  }
  .dropdown-item {
    text-align: left;
  }
  .dropdown-divider {
    margin: 0;
  }
}
/* Extra Small Devices (Up to 576px) */
@media (max-width: 576px) {
  .navbar {
    top: 10px;
    /* Align the navbar flush with the top for extra small screens */
    left: 54%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Ensure it is centered */
    width: 95%;
    /* Almost full width on extra small devices */
    max-width: 95%;
    /* Ensure it uses most of the screen width */
    border-radius: 15px;
    /* Further reduce the border-radius */
  }
  body {
    padding-top: 60px;
    /* Adjust padding for extra small screens */
  }
}
/* Adjustments for Zoom Levels between 90% and 100% */
.curved-header {
  position: relative;
  margin: 20px auto;
  max-width: 1200px;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 80px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel-inner {
  border-radius: 20px;
}

.carousel-item img {
  border-radius: 20px;
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.overlay h1 {
  font-size: 30px;
  margin: 0;
  font-weight: bold;
}

.overlay p {
  font-size: 20px;
  margin: 10px 0 0;
}

/* Responsive Styling */
@media (max-width: 992px) {
  .curved-header {
    height: 250px;
    width: 635px;
    margin-top: 40px;
  }
  .carousel-item img {
    height: 250px;
    width: 635px;
  }
  .overlay h1 {
    font-size: 16px;
  }
  .overlay p {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .curved-header {
    height: 200px;
    width: 635px;
    margin-top: 40px;
  }
  .carousel-item img {
    height: 200px;
    width: 635px;
  }
  .overlay h1 {
    font-size: 2rem;
  }
  .overlay p {
    font-size: 0.9rem;
  }
}
@media (max-width: 576px) {
  .curved-header {
    height: 200px;
    width: 315px;
    margin-top: 50px;
  }
  .carousel-item img {
    height: 200px;
    width: 315px;
  }
  .overlay h1 {
    font-size: 14px;
  }
  .overlay p {
    font-size: 12px;
  }
}
/* Styling untuk semua device */
.section-stats {
  margin-top: -50px;
  /* Sesuaikan margin-top sesuai kebutuhan */
  display: flex;
  /* Pusatkan kartu statistik secara horizontal */
  justify-content: center;
  overflow-x: auto;
  /* Aktifkan guliran horizontal pada layar yang lebih kecil */
  padding-bottom: 20px;
  /* Tambahkan padding bawah untuk penataan yang lebih baik */
}

.stats-card {
  display: flex;
  /* Susun item statistik secara horizontal */
  flex-wrap: nowrap;
  /* Hindari pembungkusan item ke baris baru */
  width: 100%;
  /* Kartu memanjangi seluruh lebar */
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  /* Tambahkan sudut melengkung */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* Sembunyikan konten yang melimpah */
  margin: 0 10px;
  /* Tambahkan margin untuk menghindari potongan di tepi */
  z-index: 0;
  backdrop-filter: blur(10px);
  /* Efek blur */
  -webkit-backdrop-filter: blur(10px);
  /* Efek blur untuk Safari */
}

.stats-item {
  display: flex;
  /* Izinkan tumpukan ikon dan teks secara vertikal */
  align-items: center;
  /* Ratakan ikon dan teks secara vertikal */
  justify-content: center;
  /* Pusatkan konten secara horizontal di setiap item */
  flex-direction: row;
  /* Susun konten secara horizontal */
  flex: 1 0 25%;
  /* Bagikan lebar yang sama untuk setiap item */
  padding: 20px;
  /* Sesuaikan padding untuk konten dan ikon */
  /* Tambahkan garis pemisah yang halus antar item */
  text-align: center;
  /* Pusatkan konten di dalam setiap item */
  white-space: nowrap;
  /* Hindari pembungkusan teks */
}

.stats-item:last-child {
  border-bottom: none;
  /* Hapus garis pemisah untuk item terakhir */
}

.stats-item .stats-icon {
  margin-right: 10px;
  /* Add space between icon and title */
  display: inline-block;
  /* Make icon an inline block */
  width: 40px;
  /* Fixed width for the icon circle */
  height: 40px;
  /* Fixed height for the icon circle */
  border-radius: 50%;
  /* Perfect circle for the icon */
  background-color: coral;
  /* Background color for the icon */
  position: relative;
  /* Set relative position for absolute positioning of the image */
  overflow: hidden;
  /* Ensure the image doesn't overflow the container */
}

.stats-item .icons-stats {
  width: 60%;
  /* Adjust the width of the image as needed */
  height: 60%;
  /* Adjust the height of the image as needed */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Center the image inside the circle */
}

.stats-item i {
  font-size: 24px;
  /* Sesuaikan ukuran ikon sesuai kebutuhan */
  margin-right: 10px;
  /* Tambahkan ruang antara ikon dan judul */
  display: inline-block;
  /* Buat ikon menjadi blok inline */
  width: 40px;
  /* Tentukan lebar tetap untuk lingkaran ikon */
  height: 40px;
  /* Tentukan tinggi tetap untuk lingkaran ikon */
  text-align: center;
  /* Pusatkan ikon di dalam lingkaran */
  line-height: 40px;
  /* Pastikan ikon berada di tengah secara vertikal */
  border-radius: 50%;
  /* Buat lingkaran sempurna untuk ikon */
  background-color: coral;
  /* Warna latar belakang orange untuk ikon */
  color: #fff;
  /* Warna teks putih untuk kontras */
}

.stats-content {
  display: flex;
  flex-direction: column;
  /* Susun konten secara vertikal */
  align-items: flex-start;
  /* Rata kiri konten */
  text-align: left;
  /* Rata kiri teks */
}

.stats-item h2 {
  font-size: 24px;
  /* Sesuaikan ukuran judul untuk layar yang lebih kecil */
  font-weight: bold;
  margin-bottom: 5px;
  /* Tambahkan ruang antara judul dan teks */
}

.stats-item p {
  font-size: 18px;
  /* Sesuaikan ukuran teks untuk layar yang lebih kecil */
  font-weight: 500;
  margin-bottom: 0;
  /* Hapus margin bawah untuk penataan yang lebih bersih */
}

/* Tampilkan hanya ikon pada layar mobile */
@media (max-width: 768px) {
  .stats-item {
    justify-content: center;
    /* Pusatkan ikon di tengah */
    text-align: center;
    /* Pusatkan teks di tengah */
    padding: 20px 10px;
    /* Sesuaikan padding untuk ukuran lebih kecil */
  }
  .section-stats {
    margin-top: 40px;
  }
  .stats-content {
    display: flex;
    flex-direction: column;
    /* Susun konten secara vertikal */
    align-items: center;
    /* Pusatkan konten di tengah */
    text-align: center;
    /* Pusatkan teks di tengah */
  }
  .stats-item h2,
  .stats-item p {
    display: none;
    /* Sembunyikan judul dan teks */
  }
}
.section-popular {
  min-height: 540px;
  background-color: #fff;
  margin-top: -90px;
  margin-bottom: -230px;
}
.section-popular .section-popular-heading {
  margin-top: 150px;
}
.section-popular .section-popular-heading h1,
.section-popular .section-popular-heading h2,
.section-popular .section-popular-heading p {
  color: #051334;
}
.section-popular .section-popular-heading h1 {
  font-weight: bold;
}
.section-popular .section-popular-heading h2 {
  font-family: "Poppins", serif;
  font-weight: bold;
  font-size: 40px;
}
.section-popular .section-popular-heading p {
  font-size: 18px;
  font-weight: 500;
}

.details-section {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  margin: 20px;
}

.gallery {
  flex-grow: 1;
  /* Galeri memenuhi seluruh ruang yang tersedia di kolom pertama */
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.xzoom-container img {
  max-width: 95%;
  border-radius: 20px;
  /* Sudut melengkung */
  box-shadow: var(--box-shadow);
  margin-right: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}

.xzoom-main {
  margin-right: auto;
}

.xzoom-thumbs a {
  display: block;
  margin-bottom: 10px;
}

.xzoom-thumbs a img {
  width: 230px;
  height: auto;
  border-radius: 20px;
  /* Sudut melengkung */
  box-shadow: var(--box-shadow);
  -o-object-fit: cover;
     object-fit: cover;
}

.product-info {
  display: grid;
  gap: 10px;
  grid-column: 1/span 2;
}

.category-badge {
  background-color: #071C4D;
  color: #fff;
  padding: 10px;
  border-radius: 20px;
  text-align: center;
  display: inline-block;
  max-width: 12%;
  /* Atur lebar maksimum elemen */
  margin-right: 20px;
  /* Beri margin kanan untuk memberi jarak dari elemen lain jika diperlukan */
  font-weight: 700;
  margin-bottom: 1rem;
}

.title-and-testimonials {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product__title {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

.testimonials {
  background-color: rgb(255, 208, 176);
  color: coral;
  font-weight: 700;
  border: 1px solid coral;
  font-size: 14px;
  text-align: center;
  padding: 10px;
  display: inline-block;
  border-radius: 20px;
}

.testimonials a {
  text-decoration: none;
  color: coral;
}

.product-features {
  display: flex;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  justify-content: flex-start;
}

.feature {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  margin-right: 10px;
  /* Beri ruang antara ikon dan teks */
}

.feature .icon {
  margin-right: 5px;
  width: 24px;
  height: 24px;
}

.seller-card {
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  /* Bayangan soft */
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  /* Efek blur */
  -webkit-backdrop-filter: blur(10px);
}

.seller-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.seller-info {
  flex-grow: 1;
}

.seller-info .seller-name {
  font-weight: 700;
  font-size: 14px;
}

.seller-info .seller-description {
  font-size: 12px;
}

.contact-seller-btn {
  background-color: coral;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 14px;
  padding: 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-seller-btn:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  transition: all 0.4s;
}

.product-description {
  margin: 20px;
}

.product-description h3 {
  font-size: 18px;
  margin-top: 3rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-description p {
  margin-bottom: 20px;
}

.additional-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
  gap: 10px;
}

.info-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fff;
}

.info-card .icons-details {
  margin-right: 10px;
  background-color: coral;
  /* Background color */
  border-radius: 50%;
  /* Circular shape */
  width: 30px;
  /* Size of the circular background */
  height: 30px;
  display: flex;
  /* Center content horizontally and vertically */
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* Ensure the image does not overflow the container */
}

.info-card .icons-details .icon-detail-img {
  width: 70%;
  /* Adjust the width as needed */
  height: 70%;
  /* Adjust the height as needed */
}

.info-card .info-content {
  display: flex;
  flex-direction: column;
}

.info-content h4 {
  font-size: 16px;
  margin-bottom: 5px;
}

/* Container utama yang membagi dua kolom: testimonies dan product info */
.details-container {
  display: flex;
  gap: 20px;
  margin: 20px;
  align-items: flex-start;
  /* Pastikan elemen saling merujuk ke bagian atas */
  margin-bottom: 200px;
}

/* Container untuk testimonials, dengan overflow scroll */
.testimonies-card {
  flex: 1;
  /* Agar kolom ini fleksibel */
  max-height: 500px;
  /* Atur tinggi maksimum untuk testimonials */
  overflow-y: auto;
  /* Tambahkan scrollbar jika konten meluap */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  /* Bayangan yang lebih soft */
}

.testimonies-card {
  /* Hide the scrollbar for WebKit browsers (Chrome, Safari, Edge) */
  /* Optional: For Firefox, hide scrollbar */
  scrollbar-width: none;
  /* Allow scrolling, but hide the scrollbar */
  overflow: auto;
}
.testimonies-card ::-webkit-scrollbar {
  display: none;
}

.testimoni-card {
  display: flex;
  /* Menyusun konten dalam baris */
  align-items: center;
  /* Menyelaraskan konten di tengah secara vertikal */
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  /* Spasi antara testimonial cards */
}

.testimoni-card small {
  font-weight: 700;
}

/* Gaya untuk foto di testimonial card */
.testimonial-photo {
  width: 50px;
  /* Atur ukuran lingkaran */
  height: 50px;
  border-radius: 50%;
  /* Membuat gambar berbentuk lingkaran */
  margin-right: 10px;
  /* Beri ruang antara foto dan teks */
  -o-object-fit: cover;
     object-fit: cover;
  /* Agar gambar tidak terdistorsi */
}

/* Heading untuk bagian testimonies */
.testimonies-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Container untuk informasi produk */
.card-information {
  flex: 1;
  /* Agar kolom ini fleksibel */
  margin: 0;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fff;
  display: grid;
  gap: 20px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  /* Bayangan yang lebih soft */
  max-height: 500px;
  /* Atur tinggi maksimum untuk card-information */
  overflow: hidden;
  /* Sembunyikan konten yang meluap */
}

/* Styling untuk harga */
.card-information .price {
  text-align: left;
  font-size: 24px;
}

.card-information .price h3 {
  font-weight: bold;
}

.card-information .price span {
  font-size: small;
}

/* Styling untuk details dengan layout grid */
.card-information .details {
  display: grid;
  grid-template-columns: auto 1fr;
  /* Dua kolom: auto untuk judul, 1fr untuk teks */
  -moz-column-gap: 10px;
       column-gap: 10px;
  /* Jarak antara kolom */
  row-gap: 15px;
  /* Jarak antara baris */
}

.card-information .details h4 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  /* Hilangkan margin default */
  text-align: left;
  /* Judul sejajar kanan untuk alignment yang lebih baik */
}

.card-information .details p {
  margin: 0;
  /* Hilangkan margin default */
  font-weight: 650;
  text-align: right;
  /* Teks sejajar kiri */
}

/* Styling untuk tombol */
.purchase-btn {
  width: 100%;
  background-color: coral;
  color: #fff;
  border: none;
  padding: 10px;
  font-weight: bold;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.purchase-btn:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  transition: all 0.4s;
}

/* Responsive styling untuk perangkat dengan lebar kurang dari 768px (mobile) */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    /* Menghilangkan kemampuan scroll horizontal */
  }
  .card-information {
    width: 100%;
    /* Card akan memenuhi lebar layar */
    max-width: 100%;
    /* Menghindari elemen melebihi lebar layar */
    box-sizing: border-box;
  }
  .details-container {
    flex-direction: column;
    /* Susun vertikal */
  }
  .product-info {
    order: -1;
    /* Tempatkan di atas pada perangkat mobile */
  }
  .category-badge {
    max-width: 70px;
    /* Ukuran lebih kecil untuk mobile */
    font-size: 10px;
    /* Ukuran font lebih kecil */
    padding: 6px;
    /* Padding lebih kecil */
  }
  .title-and-testimonials {
    flex-direction: column;
    /* Menyusun konten dalam satu kolom */
    align-items: flex-start;
    /* Rata kiri semua konten */
  }
  .testimonials {
    margin-top: 10px;
    /* Beri jarak antara title dengan testimonials */
  }
  .product-features {
    flex-direction: column;
    /* Menyusun konten dalam satu kolom */
  }
  .feature {
    margin-bottom: 10px;
    /* Beri ruang antara setiap fitur */
  }
  .xzoom-container img {
    width: 650px !important;
    justify-content: center !important;
    height: 200px !important;
    max-width: 100%;
    /* Batasan lebar maksimum jika diperlukan */
  }
  .xzoom-thumbs {
    display: none;
  }
  .seller-card {
    flex-direction: column;
    /* Mengatur agar konten stack vertikal */
    align-items: flex-start;
    /* Menyusun konten dari kiri ke kanan */
    padding: 10px;
    /* Padding yang lebih kecil */
    max-width: 290px;
    /* Lebar maksimum sesuai dengan lebar layar */
  }
  .seller-image {
    width: 40px;
    /* Ukuran gambar seller lebih kecil */
    height: 40px;
  }
  .seller-info {
    flex-grow: 1;
    margin-top: 10px;
    /* Memberi margin atas */
  }
  .seller-info .seller-name {
    font-size: 14px;
    /* Ukuran nama penjual lebih kecil */
  }
  .seller-info .seller-description {
    font-size: 12px;
    /* Ukuran deskripsi penjual lebih kecil */
  }
  .contact-seller-btn {
    padding: 8px;
    /* Ukuran tombol lebih kecil */
    font-size: 10px;
    /* Ukuran teks tombol lebih kecil */
  }
}
/* Responsive untuk perangkat dengan lebar antara 769px hingga 1024px (tablet) */
@media (max-width: 1024px) {
  .details-container {
    flex-direction: column;
    /* Susun vertikal */
  }
  .product-info {
    order: 1;
    /* Tempatkan di atas pada perangkat tablet */
  }
  .gallery {
    width: auto;
    margin: 0 auto;
  }
  .category-badge {
    max-width: 70px;
    /* Ukuran lebih kecil untuk mobile */
    font-size: 10px;
    /* Ukuran font lebih kecil */
    padding: 6px;
    /* Padding lebih kecil */
  }
  .xzoom-container img {
    width: 600px !important;
    height: auto !important;
    max-width: 100%;
    /* Batasan lebar maksimum jika diperlukan */
  }
  .xzoom-thumbs img {
    width: 90% !important;
    /* Batasan lebar maksimum jika diperlukan */
    height: 120px !important;
  }
}
/* Responsive untuk perangkat dengan lebar lebih dari 1024px (desktop) */
@media (min-width: 1025px) {
  .details-container {
    flex-direction: row;
    /* Susun horizontal */
  }
  .product-info {
    grid-column: 1/span 2;
  }
  .gallery {
    flex-direction: row;
    align-items: flex-start;
  }
  .xzoom-container img {
    max-width: 95%;
    margin-right: 100px;
  }
  .xzoom-thumbs a img {
    width: 230px;
  }
}
.section-popular-content .section-popular-travel .card-travel {
  min-height: 380px;
  background-color: #ddd;
  /* Fallback color */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
  /* Gradient from bottom to top */
  background-size: cover;
  margin-bottom: 20px;
  border-radius: 25px;
  /* Rounded corners for cards */
  position: relative;
  /* Needed for icon positioning */
  padding: 20px;
  /* Adjust padding if needed */
  color: #fff;
  /* Text color for content over the image */
  display: flex;
  /* Allow vertical stacking of content */
  flex-direction: column;
  /* Stack content vertically */
  justify-content: flex-end;
  /* Align content at the bottom */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  /* Bayangan halus */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  /* Transisi untuk efek hover */
  background-position: center;
  overflow: hidden;
}
.section-popular-content .section-popular-travel .card-travel .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  /* Layer of darkness (adjust alpha value as needed) */
  z-index: 1;
  transition: background 0.3s ease;
}
.section-popular-content .section-popular-travel .card-travel:hover .overlay {
  background: rgba(0, 0, 0, 0.6);
  /* Darker overlay on hover */
}
.section-popular-content .section-popular-travel .card-travel-content {
  position: relative;
  z-index: 2;
}
.section-popular-content .section-popular-travel .card-travel:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  /* Bayangan lebih gelap pada hover */
  transform: translateY(-4px);
  /* Efek mengangkat card saat hover */
}
.section-popular-content .section-popular-travel .travel-price,
.section-popular-content .section-popular-travel .travel-location {
  margin-bottom: 0px;
  /* Spacing between title and location */
  text-align: left;
  /* Center title and location text */
}
.section-popular-content .section-popular-travel .travel-price {
  font-size: 18px;
  font-weight: 500;
}
.section-popular-content .section-popular-travel .travel-location {
  font-weight: 700;
  font-size: 26px;
}
.section-popular-content .section-popular-travel .travel-icons {
  display: flex;
  /* Arrange icons horizontally */
  justify-content: space-between;
  /* Distribute icons evenly */
  margin-top: 5px;
  /* Add some space above the icons */
  font-size: 14px;
  /* Adjust size for smaller icons and content */
}
.section-popular-content .section-popular-travel .travel-icons ion-icon {
  margin-right: 5px;
  /* Add spacing between icons */
  color: white;
}
.section-popular-content .section-popular-travel .travel-icons span {
  color: white;
  /* Adjust text color for better contrast */
}
.section-popular-content .section-popular-travel .travel-button {
  position: absolute;
  /* Position button at the bottom */
  bottom: 20px;
  /* Distance from bottom edge */
  left: 50%;
  /* Center button horizontally */
  transform: translateX(-50%);
  /* Offset button position */
}
.section-popular-content .section-popular-travel .btn-travel-details {
  background-color: #FF9E53;
  color: #fff;
  padding: 10px 20px;
  /* Adjust button padding */
  border: none;
  border-radius: 5px;
  /* Rounded button corners */
  transition: background-color 0.2s ease-in-out;
  /* Smooth hover effect */
}
.section-popular-content .section-popular-travel .btn-travel-details:hover {
  background-color: #ffAE6f;
}
.section-popular-content .section-popular-travel .card-travel::after {
  /* Create icon container */
  content: "";
  position: absolute;
  bottom: 10px;
  /* Distance from bottom edge */
  left: 0;
  width: 100%;
  height: 40px;
  /* Adjust icon container height */
  display: flex;
  justify-content: space-between;
  /* Distribute icons evenly */
  align-items: center;
  /* Center icons vertically */
  padding: 0 10px;
  /* Adjust padding for icons */
}
.section-popular-content .section-popular-travel .card-travel::after i {
  /* Style icons */
  font-size: 20px;
  color: #fff;
}

@media (max-width: 768px) {
  .card-travel {
    min-height: 500px;
    margin: 0 20px;
  }
  .section-popular-heading h1 {
    font-size: 32px;
  }
  .section-popular-heading p {
    font-size: 28px;
  }
}
.faq-section {
  background-color: #f6f8fd;
  /* Background color of the FAQ section */
  padding: 50px 20px;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.faq-title {
  font-size: 2em;
  margin-bottom: 10px;
  font-weight: bold;
}

.faq-description {
  font-size: 1.2em;
  margin-bottom: 30px;
}

/* FAQ Card Styles */
.faq-card {
  background-color: #fff;
  border-radius: 11px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  margin-bottom: 15px;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-card:hover {
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.faq-icon {
  font-size: 1.5em;
  transition: transform 0.3s ease;
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
  text-align: left;
}

.faq-card.active .faq-answer {
  max-height: 500px;
  /* Adjust this value based on the content length */
  padding-top: 10px;
}

.faq-card.active .faq-icon {
  transform: rotate(45deg);
  /* Rotating the icon to indicate it's open */
}

.my-service-section {
  background-color: #f9f9f9;
  padding: 80px 20px;
  /* Increased padding */
}

.my-service-container {
  max-width: 1000px;
  /* Increased maximum width */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my-service-content {
  flex: 1;
  padding-right: 40px;
  /* Increased right padding */
}

.my-service-title {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 15px;
  /* Adjusted margin */
}

.my-service-description {
  font-size: 1.2em;
  margin-bottom: 25px;
  /* Adjusted margin */
}

.my-service-list {
  list-style-type: none;
  padding: 0;
}

.my-service-list p {
  font-weight: 500;
}

.my-service-list li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  /* Adjusted margin */
}

.my-service-icon {
  background-color: rgba(30, 186, 83, 0.4);
  color: #fff;
  opacity: 40%;
  padding: 10px;
  /* Adjusted padding */
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-right: 15px;
  /* Adjusted margin */
}

.my-service-icon i {
  font-size: 1rem;
  /* Decreased font size for smaller icons */
  color: #1EBA53;
  font-weight: bold;
}

.my-service-image {
  flex: 1;
  max-width: 400px;
  /* Adjusted maximum width for the image */
}

.my-service-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  /* Adjusted border radius */
}

.get-started-button {
  background-color: coral;
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 12px 20px;
  font-size: 1em;
  border-radius: 30px;
  /* Rounded border radius */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.get-started-button:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  transition: all 0.4s;
}

/* Media queries for tablets (landscape) and smaller */
@media (max-width: 1024px) {
  .my-service-container {
    flex-direction: column;
    align-items: stretch;
  }
  .my-service-content {
    padding-right: 0;
    margin-bottom: 30px;
  }
  .my-service-section {
    margin: 0 40px;
  }
  .my-service-icon {
    width: 20px;
    height: 20px;
    padding: 8px;
    margin-right: 10px;
  }
  .my-service-title {
    font-size: 1.8em;
    margin-bottom: 10px;
  }
  .my-service-description {
    font-size: 1em;
    margin-bottom: 20px;
  }
}
/* Media queries for mobile devices */
@media (max-width: 768px) {
  .my-service-section {
    padding: 60px 20px;
    /* Adjusted padding for smaller screens */
    margin: 0 20px;
  }
  .my-service-title {
    font-size: 2em;
  }
  .my-service-description {
    font-size: 1em;
    margin-bottom: 15px;
  }
  .my-service-icon {
    width: 18px;
    height: 18px;
    padding: 6px;
    margin-right: 8px;
  }
  .my-service-list li {
    margin-bottom: 10px;
  }
}
.question-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* Agar section penuh tinggi viewport */
  padding: 20px;
  /* Menambahkan padding di dalam section */
}

.question-card {
  position: relative;
  /* Agar gambar overlay dapat diposisikan dengan absolute relatif terhadap kartu */
  background: url("../svg/contact-us-dark.svg") no-repeat center center;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 40px;
  height: 400px;
  width: 1000px;
  color: #fff;
  /* Mengatur warna teks menjadi putih agar kontras dengan background */
  margin: 20px;
  /* Menambahkan ruang di luar kartu */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Mengatur konten di tengah secara vertikal */
  align-items: flex-start;
  /* Mengatur konten di rata kiri secara horizontal */
}

.overlay-image {
  position: absolute;
  top: -79px;
  /* Menempatkan gambar di atas batas atas kartu */
  right: 0;
  /* Menempatkan gambar di sisi kanan kartu */
  width: 350px;
  /* Ukuran gambar */
  height: auto;
  /* Mempertahankan rasio aspek gambar */
  z-index: 1;
  /* Menjaga gambar di atas kartu */
}

.question-content {
  text-align: left;
  /* Teks dalam konten diatur rata kiri */
  z-index: 2;
  /* Menjaga konten di atas gambar */
  position: relative;
  /* Agar z-index dapat diterapkan */
}

.question-content h1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.question-content p {
  font-size: 1rem;
  margin-bottom: 20px;
}

.question-content .btn {
  display: inline-block;
  background-color: coral;
  /* Warna latar belakang tombol dengan transparansi */
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.question-content .btn:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  transition: all 0.4s;
  /* Mengatur warna latar belakang tombol saat hover */
}

/* Media Queries untuk Tablet dan Mobile */
@media (max-width: 768px) {
  .question-section {
    min-height: 50vh;
  }
  .question-card {
    width: 90%;
    /* Lebar kartu lebih kecil pada tablet */
    height: 290px;
    /* Sesuaikan tinggi secara otomatis */
    padding: 20px;
    /* Kurangi padding */
  }
  .overlay-image {
    width: 250px;
    /* Lebar gambar overlay lebih kecil */
    top: -53px;
    /* Sesuaikan posisi gambar untuk tablet */
  }
  .question-content h1 {
    font-size: 1.5rem;
    /* Ukuran font judul lebih kecil pada tablet */
  }
  .question-content p {
    font-size: 0.9rem;
    /* Ukuran font deskripsi lebih kecil pada tablet */
  }
  .question-content .btn {
    padding: 8px 16px;
    /* Ukuran tombol lebih kecil pada tablet */
  }
}
@media (max-width: 576px) {
  .question-section {
    min-height: 50vh;
  }
  .question-card {
    width: 100%;
    /* Lebar kartu penuh pada perangkat mobile */
    height: 250px;
    /* Sesuaikan tinggi secara otomatis */
    padding: 15px;
    /* Kurangi padding */
  }
  .overlay-image {
    position: absolute;
    right: 0;
    width: 200px;
    /* Lebar gambar overlay lebih kecil pada perangkat mobile */
    top: -24px;
    /* Sesuaikan posisi gambar untuk perangkat mobile */
  }
  .question-content h1 {
    font-size: 1.18rem;
    /* Ukuran font judul lebih kecil pada perangkat mobile */
  }
  .question-content p {
    display: none;
    /* Ukuran font deskripsi lebih kecil pada perangkat mobile */
  }
  .question-content .btn {
    padding: 6px 12px;
    /* Ukuran tombol lebih kecil pada perangkat mobile */
    font-size: 10px;
  }
}
.section-networks {
  margin-top: -170px;
  background-color: #fff;
  padding-top: 240px;
  padding-bottom: 50px;
}
.section-networks h2 {
  font-family: "Poppins", serif;
  font-weight: bold;
  font-size: 40px;
}
.section-networks p {
  font-size: 18px;
  font-weight: 500;
}
.section-networks img {
  max-width: 100%;
}

@media (max-width: 768px) {
  .section-networks {
    margin-left: 20px;
    margin-right: 20px;
  }
  .section-networks h2 {
    font-size: 30px;
  }
}
/* Testimonial Section Styles */
.testimonial-section {
  background: linear-gradient(135deg, #0723c1, coral);
  /* Gradient blue background */
  color: #fff;
  /* White text color */
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonial-content {
  display: flex;
  flex-wrap: wrap;
  /* Ensure content wraps on smaller screens */
  justify-content: space-between;
  max-width: 1200px;
  /* Container width */
  width: 90%;
  /* Responsive width */
  margin: auto;
}

.testimonial-left {
  flex: 1;
  padding: 20px;
  min-width: 300px;
  /* Minimum width for smaller screens */
}

.testimonial-left h2 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.testimonial-left p {
  font-size: 18px;
  margin-bottom: 30px;
}

.buttons {
  display: flex;
  gap: 20px;
}

.btn-primary,
.btn-secondary {
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  /* Rounded corners */
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, opacity 0.3s;
}

.btn-primary {
  background-color: coral;
  color: white;
}

.btn-primary:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  transition: all 0.4s;
}

.btn-secondary {
  background-color: transparent;
  border: 2px solid coral;
  color: coral;
}

.btn-secondary:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  transition: all 0.4s;
}

.buttons button {
  font-weight: 700;
}

.testimonial-right {
  flex: 1;
  padding: 20px;
  min-width: 300px;
  /* Minimum width for smaller screens */
  overflow: hidden;
  /* Hide overflow for scrolling effect */
  position: relative;
}

.testimonial-card {
  background-color: #fff;
  /* White background for the card */
  color: #333;
  /* Dark text color */
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 30px;
  position: relative;
  animation: scroll 10s linear infinite;
  /* Scrolling animation */
}

.testimonial-card h3 {
  font-size: 18px;
  font-weight: bold;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.author-info {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.author-info img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* Circular image */
  margin-right: 10px;
}

.author-name {
  font-size: 14px;
  font-weight: bold;
}

.author-title {
  font-size: 14px;
  color: #777;
  margin-top: 1px;
  /* Jarak antara nama dan judul */
}

/* Menggunakan flexbox untuk menempatkan nama dan judul di samping gambar */
.author-info > div {
  display: flex;
  flex-direction: column;
}

.author-info > div > span {
  margin-bottom: 1px;
  /* Jarak antara nama dan judul */
}

/* Media queries for responsive design */
@media (max-width: 768px) {
  .testimonial-section {
    padding: 30px 0;
  }
  .testimonial-left {
    flex: 100%;
    /* Full width on smaller screens */
    text-align: center;
    /* Center align text */
    padding: 0 20px;
    /* Padding adjustments */
    min-width: auto;
    /* Remove minimum width */
  }
  .testimonial-left h2 {
    font-size: 28px;
    /* Decrease font size */
    margin-bottom: 15px;
    /* Adjust margin */
  }
  .testimonial-left p {
    font-size: 16px;
    /* Decrease font size */
    margin-bottom: 20px;
    /* Adjust margin */
  }
  .testimonial-right {
    flex: 100%;
    /* Full width on smaller screens */
    padding: 0 20px;
    /* Padding adjustments */
    min-width: auto;
    margin-top: 40px;
    /* Remove minimum width */
  }
}
@media (max-width: 576px) {
  .testimonial-left h2 {
    font-size: 24px;
    /* Further decrease font size */
  }
  .testimonial-left p {
    font-size: 14px;
    /* Further decrease font size */
  }
  .btn-primary,
  .btn-secondary {
    padding: 12px 24px;
    /* Adjust button padding */
    font-size: 14px;
    /* Decrease font size */
  }
  .author-info img {
    width: 40px;
    /* Decrease image size */
    height: 40px;
  }
}
.section-footer a {
  color: #071C4D;
}

footer {
  position: relative;
  width: 100%;
  min-height: 350px;
  padding: 3rem 1rem;
  border-radius: 100px 100px 0 0;
  background: radial-gradient(circle, #071C4D, #000000);
  color: white;
}

.container .container-footer {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

footer .container {
  margin-top: 10px;
}

.row .row-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.col .col-footer {
  flex: 1;
  /* Let the columns grow to fit the available space */
  margin: 10px;
  /* Add space around each column */
  min-width: 200px;
  /* Ensure columns don't get too narrow */
}

#useful-link .links a {
  color: white;
  text-decoration: none;
}

#useful-link .links a:hover {
  color: #f0f0f0;
}

#services .links a {
  color: white;
  text-decoration: none;
}

#services .links a:hover {
  color: #f0f0f0;
}

.col-footer .logo-footer {
  width: 100px;
  margin-bottom: 25px;
}

.col-footer h3 {
  color: white;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.col-footer h3::after {
  content: "";
  height: 3px;
  width: 0px;
  background-color: coral;
  position: absolute;
  bottom: 150px;
  left: 16px;
  transition: 0.3s ease;
}

.col-footer h3:hover::after {
  width: 30px;
}

.col-footer .social a .social-icon {
  width: 24px;
  /* Adjust the width as needed */
  height: 24px;
  /* Adjust the height as needed */
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* Smooth transition for hover effects */
}

.col-footer .social a {
  color: #071C4D;
  margin-top: 2rem;
  margin-right: 5px;
  transition: 0.3s ease;
}

.col-footer .social a:hover {
  transform: scale(1.5);
  filter: grayscale(25);
  opacity: 0.8;
  /* Slightly reduce opacity */
}

.col-footer .links a {
  display: block;
  text-decoration: none;
  color: #071C4D;
  margin-bottom: 5px;
  position: relative;
  transition: 0.3s ease;
}

.col-footer .links a:before {
  content: "";
  height: 16px;
  width: 3px;
  position: absolute;
  top: 5px;
  left: -10px;
  background-color: coral;
  transition: 0.5s ease;
  opacity: 0;
}

.col-footer .links a:hover:before {
  opacity: 1;
}

.col-footer .links a:hover {
  transform: translateX(-8px);
  color: #071C4D;
}

.col-footer .contact-details-footer {
  display: inline-flex;
  justify-content: space-between;
}

.contact-details-footer img {
  margin-right: 10px;
  /* Adjust as needed for spacing between icon and text */
  width: 22px;
  height: 22px;
}

.contact-details-footer ion-icon {
  margin-right: 10px;
  /* Adjust as needed for spacing between icon and text */
  width: 22px;
  height: 22px;
}

footer .container-fluid {
  width: 100%;
  margin-top: 50px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 900px) {
  footer .container {
    margin-top: -20px;
  }
  .row-footer {
    flex-direction: column;
  }
  .col-footer {
    width: 100%;
    text-align: left;
    margin-bottom: 25px;
  }
  .col-footer h3::after {
    content: "";
    height: 3px;
    width: 0px;
    background-color: coral;
    position: absolute;
    bottom: 130px;
    left: 16px;
    transition: 0.3s ease;
  }
}
.section-details-header {
  min-height: 310px;
  background: #E4E6EB;
  margin-top: -89px;
  margin-bottom: 1rem;
}

.section-details-content {
  margin-top: -210px;
  min-height: 100vh;
  margin-bottom: 50px;
}
.section-details-content .breadcrumb {
  background-color: transparent;
  padding: 0;
  padding-left: 30px;
  margin-bottom: 30px;
  margin-top: 30px;
}
.section-details-content .breadcrumb-item a {
  text-decoration: none;
  color: #071C4D;
  cursor: pointer;
}
.section-details-content .breadcrumb-item.active {
  font-weight: bold;
  color: #071C4D;
}
.section-details-content .card-details {
  padding: 30px;
  border-radius: 11px;
}
.section-details-content .card-details h1 {
  font-size: 26px;
}
.section-details-content .card-details h2 {
  font-size: 20px;
}
.section-details-content .card-details p {
  font-size: 18px;
  color: #b1b1b1;
}
.section-details-content .card-details h3 {
  font-weight: 400;
  font-size: 14px;
  color: #071C4D;
}
.section-details-content .card-details .trip-informations th {
  font-weight: 300;
  font-size: 16px;
  color: #071C4D;
}
.section-details-content .card-details .trip-informations td {
  font-weight: 300;
  font-size: 16px;
  color: #b1b1b1;
}
.section-details-content .card-details .trip-informations .tooltip-icon {
  display: inline-block;
  margin-left: 10px;
  position: relative;
  cursor: pointer;
}
.section-details-content .card-details .trip-informations .icon-img {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: rgba(15, 244, 126, 0.231372549);
  border-radius: 50%;
  color: #0ff47e;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  position: relative;
}
.section-details-content .card-details .trip-informations .tooltip-text {
  display: none;
  position: absolute;
  top: 100%;
  left: -30px;
  background-color: #fff;
  color: #333;
  padding: 15px;
  border-radius: 8px;
  font-size: 12px;
  margin-top: 8px;
  font-weight: bold;
  z-index: 1;
  width: 250px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  white-space: normal;
  word-wrap: break-word;
}
.section-details-content .card-details .trip-informations .tooltip-icon:hover .tooltip-text {
  display: block;
}
.section-details-content .card-details .trip-informations .text-blue {
  color: #071C4D;
  font-weight: bold;
}
.section-details-content .card-details .trip-informations .text-green {
  color: #00bd49;
  font-weight: bold;
}
.section-details-content .card-details .trip-informations .text-total {
  color: #071C4D;
  font-size: 20px;
  font-weight: bold;
}
.section-details-content .card-details .payment-instructions {
  font-weight: 300;
  font-size: 14px;
  color: #b1b1b1;
}
.section-details-content .card-details .bank .bank-item h3 {
  font-size: 18px;
  color: #071C4D;
  margin-bottom: 0;
}
.section-details-content .card-details .bank .bank-item p {
  margin-bottom: 0;
}
.section-details-content .card-details .bank .bank-item .description {
  margin-left: 10px;
  overflow: hidden;
  float: left;
}
.section-details-content .card-details .bank .bank-item .description p {
  font-weight: normal;
  font-size: 16px;
  color: #071C4D;
}
.section-details-content .card-details .bank .bank-image {
  margin-top: -50px;
  margin-bottom: -50px;
  width: 150px;
  height: 150px;
  float: left;
}
.section-details-content .card-details .disclaimer {
  font-weight: 300;
  font-size: 14px;
  color: #b1b1b1;
}
.section-details-content .card-details .gj-datepicker .datepicker {
  border-right: 0;
}
.section-details-content .card-details .gj-datepicker .input-group-append .btn {
  padding-right: 30px;
}
.section-details-content .card-details .btn-add-now {
  background-color: coral;
  border-radius: 15px;
  font-weight: bold;
  color: #FFF;
}
.section-details-content .card-details .btn-add-now:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  transition: all 0.4s;
}
.section-details-content .custom-nav-tabs .nav-link {
  color: #464646;
  /* Default text color for non-active tabs */
}
.section-details-content .custom-nav-tabs .nav-link.active {
  color: #071C4D;
  font-weight: 500;
  /* Active tab text color */
}
.section-details-content .features {
  margin-top: 20px;
}
.section-details-content .features h3 {
  font-size: 18px;
  color: #071C4D;
  margin-bottom: 0;
}
.section-details-content .features p {
  margin-bottom: 0;
}
.section-details-content .features .description {
  margin-left: 10px;
  overflow: hidden;
  float: left;
}
.section-details-content .features .features-image {
  width: 45px;
  height: 45px;
  float: left;
}
.section-details-content .member .member-image {
  width: 40px;
  height: 40px;
}
.section-details-content .join-container {
  margin-top: 20px;
}
.section-details-content .btn-join-now {
  background-color: coral;
  color: #FFF;
  border-radius: 20px;
  font-weight: 700;
}
.section-details-content .btn-join-now:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  transition: all 0.4s;
}
.section-details-content .tab-pane p {
  font-size: 14px;
}

.terms-condition {
  display: flex;
  align-items: center;
  margin-top: 15px;
  /* Space between payment and terms section */
}

.terms-condition input[type=radio] {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  accent-color: #071C4D;
  /* Blue circle color for radio button */
  border-radius: 50%;
  /* Makes the radio button circular */
  cursor: pointer;
}

.terms-condition p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #071C4D !important;
}

.terms-condition p a {
  text-decoration: none;
  font-weight: bold;
  color: #071C4D;
  /* Link color */
  cursor: pointer;
}

.section-success {
  height: 90vh;
}
.section-success h1 {
  font-weight: 600;
  font-size: 26px;
  color: #071C4D;
}
.section-success p {
  font-weight: 300;
  font-size: 18px;
  color: #b1b1b1;
}
.section-success .btn-home-page {
  border-radius: 4px;
  background-color: #071C4D;
  color: #fff;
}
.section-success .btn-home-page:hover {
  background-color: #2a488e;
  color: #fff;
}

@media (max-width: 768px) {
  .card-right {
    margin-top: 20px;
  }
  .tab-pane {
    padding-left: 15px;
  }
  .join-container {
    padding-left: 15px;
  }
  .text-muted {
    margin-bottom: 70px;
  }
}
@media (max-width: 1024px) {
  .card-right {
    margin-top: 20px;
  }
  .tab-pane {
    padding-left: 15px;
  }
  .join-container {
    padding-left: 15px;
  }
  .text-muted {
    margin-bottom: 70px;
  }
}
.section-scs-header {
  min-height: 400px;
  height: 300px;
  background: #E4E6EB;
  margin-top: -290px;
  margin-bottom: 1rem;
}

.success-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Mengatur posisi vertikal ke tengah */
  align-items: center;
  /* Mengatur posisi horizontal ke tengah */
  text-align: center;
  /* Mengatur teks ke tengah */
  margin-bottom: 1rem;
  /* Jarak bawah dari .success-message */
  padding: 40px;
  /* Atur jarak antara isi dan tepi */
}

.success-message h1 {
  font-weight: bold;
}

.card-container {
  display: flex;
  justify-content: center;
  /* Mengatur posisi horizontal ke tengah */
  align-items: center;
  /* Mengatur posisi vertikal ke tengah */
  height: 15vh;
  /* Mengisi tinggi layar penuh */
  margin-top: 1rem;
  /* Jarak atas dari .card-container */
}

.custom-card {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 600px;
  padding: 20px;
}

.custom-card .card-content {
  display: flex;
  flex-direction: column;
}

.custom-card .product__info {
  display: flex;
  align-items: flex-start;
}

.custom-card .product-image {
  width: 150px;
  height: auto;
  border-radius: 20%;
  overflow: hidden;
  margin-right: 20px;
}

.custom-card .product-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.custom-card .product-details {
  flex: 1;
}

.custom-card .product-title {
  font-size: 18px;
  margin-bottom: 5px;
}

.product-status {
  background-color: #071C4D;
  border-radius: 40px;
  padding: 5px;
  max-width: 80px;
  /* Atur lebar maksimum agar tidak terlalu panjang */
  margin-top: 10px;
  /* Sesuaikan margin sesuai kebutuhan */
}

.product-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-status p {
  font-size: 11px;
  margin: 0;
  color: white;
  font-weight: 700;
  padding: 5px 10px;
  /* Sesuaikan padding sesuai kebutuhan */
}

.icon-container {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.icon {
  font-size: 24px;
  /* Sesuaikan ukuran ikon */
  color: #333;
  /* Sesuaikan warna ikon */
  margin-right: 5px;
  /* Jarak antara ikon dan teks keterangan */
}

.icon .icon-img-succes {
  width: 24px;
  height: 24px;
}

.icon-description {
  flex: 1;
  /* Memanfaatkan flex-grow untuk mengisi ruang tersisa */
}

.icon-description p {
  font-size: 14px;
  /* Sesuaikan ukuran teks keterangan */
  margin: 0;
  font-weight: 700;
  padding-left: 3%;
  /* Jarak antara ikon dan teks keterangan */
}

.custom-card .divider {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #ddd;
}

.custom-card .description {
  margin-bottom: 5px;
}

.custom-card .description h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.custom-card .description p {
  font-size: 14px;
  line-height: 1.5;
}

.custom-card .buttons {
  display: flex;
  justify-content: space-between;
}

.custom-card .action-button {
  padding: 10px 20px;
  background-color: coral;
  color: white;
  font-weight: 700;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}

.custom-card .action-button-secondary {
  padding: 10px 20px;
  background-color: #ddd;
  color: #071C4D;
  font-weight: 700;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}

.custom-card .action-button:hover {
  background-color: rgb(253, 182, 155);
}

.custom-card .action-button-secondary:hover {
  background-color: rgb(240, 238, 237);
}

/* Untuk perangkat mobile */
@media (max-width: 768px) {
  .custom-card {
    width: 90%;
    /* Mengurangi lebar maksimum kartu */
    padding: 15px;
    /* Mengurangi padding pada kartu */
  }
  .custom-card .product-image {
    width: 100px;
    /* Mengurangi ukuran gambar produk */
    margin-right: 15px;
    /* Mengurangi margin kanan pada gambar produk */
  }
  .custom-card .product-title {
    font-size: 16px;
    /* Mengurangi ukuran font judul produk */
  }
  .product-status p {
    font-size: 10px;
    /* Mengurangi ukuran font status produk */
  }
  .icon {
    font-size: 20px;
    /* Mengurangi ukuran ikon */
  }
  .icon-description p {
    font-size: 12px;
    /* Mengurangi ukuran teks keterangan ikon */
  }
  .custom-card .description h3 {
    font-size: 14px;
    /* Mengurangi ukuran font judul deskripsi */
  }
  .custom-card .description p {
    font-size: 12px;
    /* Mengurangi ukuran font teks deskripsi */
  }
  .custom-card .action-button,
  .custom-card .action-button-secondary {
    padding: 8px 15px;
    /* Mengurangi padding tombol aksi */
    font-size: 12px;
    /* Mengurangi ukuran font pada tombol aksi */
  }
}
.catalogue {
  padding: 80px 50px;
  justify-content: center;
}

.hero-title {
  margin-bottom: 20px;
  padding: 0 30px;
}

.hero-title h1 {
  font-size: 46px;
  font-weight: bold;
  margin-bottom: 10px;
}

.hero-title p {
  font-size: 1.2rem;
  color: #666;
}

.content {
  display: flex;
  gap: 20px;
  margin-top: 50px;
}

/* Tooltip Icon */
.tooltip-icon.package-catalog {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

/* Icon style with circle background */
.icon-img.package-catalog {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: rgba(15, 244, 126, 0.231372549);
  /* Circle background color */
  border-radius: 50%;
  /* Circle shape */
  color: #0ff47e;
  /* Icon color */
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  /* Vertically center text */
  cursor: pointer;
  position: relative;
}

/* Tooltip text */
.tooltip-text.package-catalog {
  display: none;
  position: absolute;
  top: -90px;
  left: -185px !important;
  background-color: #fff;
  /* White background */
  color: #333;
  /* Dark text color */
  padding: 15px;
  /* Padding around text */
  border-radius: 8px;
  /* Rounded border */
  font-size: 12px;
  margin-top: 8px;
  font-weight: 500 !important;
  z-index: 1000 !important;
  width: 220px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  /* Optional: Shadow for tooltip */
  /* Set a maximum width for long text */
  white-space: normal;
  /* Allows text to wrap onto the next line */
  word-wrap: break-word;
}

.tooltip-text.package-catalog h1 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #0ff47e;
}

/* Show tooltip on hover */
.tooltip-icon.package-catalog:hover .tooltip-text.package-catalog {
  display: block;
}

.menu {
  width: 80% !important;
  padding-right: 15px;
  padding-left: 30px;
}

.menu h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Menghilangkan default checkbox */
.menu-item input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

/* Custom checkbox */
.menu-item label {
  position: relative;
  padding-left: 35px;
  /* Jarak untuk checkbox */
  display: block;
  cursor: pointer;
  font-size: 1rem;
  margin-bottom: 10px;
}

.menu-item label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  /* Ukuran checkbox */
  height: 25px;
  /* Ukuran checkbox */
  border-radius: 5px;
  /* Sudut melengkung */
  background-color: #ddd;
  /* Warna default */
  border: 2px solid #ccc;
  /* Border checkbox */
  transition: background-color 0.3s, border-color 0.3s;
}

/* Checkbox tercentang */
.menu-item input[type=checkbox]:checked + label::before {
  background-color: coral;
  /* Warna saat dicentang */
  border-color: coral;
}

.menu-item input[type=checkbox]:checked + label::after {
  content: "✔";
  position: absolute;
  left: 6px;
  top: 0px;
  color: #fff;
  font-size: 18px;
}

/* Untuk ukuran dan style label */
.menu-item label {
  line-height: 25px;
  /* Menjaga label sejajar dengan checkbox */
}

.menu-item {
  margin-bottom: 10px;
}

.menu-item input[type=checkbox] {
  margin-right: 10px;
  border-radius: 5px;
  /* Sudut melengkung untuk checkbox */
}

.menu-item label {
  vertical-align: middle;
  /* Menjaga label tetap sejajar dengan checkbox */
  display: inline-block;
}

/* Jika ingin menambahkan jarak lebih besar antara checkbox dan label */
.menu-item input[type=checkbox] {
  margin-bottom: 5px;
  /* Menambah jarak antara checkbox dan label */
}

.catalog-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-right: 50px;
  margin-left: 70px;
}

.card-link {
  color: white;
  display: block;
}

.card-link + .card-link {
  margin-left: 0;
}

.card-link:hover,
.card-link:focus {
  text-decoration: none;
  /* Ensure underline is removed */
  color: inherit;
  /* Ensure text color remains unchanged */
  background: transparent;
  /* Ensure no background color change */
}

.card-catalogue {
  position: relative;
  width: calc(25% - 20px);
  /* 4 cards per row, accounting for gaps */
  min-height: 450px;
  /* Adjust height as needed */
  width: 310px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: none;
  transition: transform 0.3s ease;
}

.card-catalogue:hover {
  transform: translateY(-10px);
  /* Lift card on hover */
}

.card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  /* Ensure image covers the entire card */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Prevent image from repeating */
  z-index: 0;
  /* Background behind content */
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Dark overlay */
  transition: background 0.3s ease;
  /* Add transition for hover effect */
}

.card:hover .card-overlay {
  background: rgba(0, 0, 0, 0.7);
  /* Darker overlay on hover */
}

.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  /* Ensure text is readable on background image */
}

.icons {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  /* Space between icons and text content */
}

.icon-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.icon-item ion-icon {
  font-size: 18px;
  /* Adjust size as needed */
  color: #fff;
  /* Icon color */
}

.text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.text-content h3 {
  margin: 0;
  font-weight: bold;
  font-size: 26px !important;
  margin-bottom: 0;
  font-size: 1.25rem;
  padding: 5px;
}

.text-content .price {
  margin: 10px 0 0;
  margin-top: -5px;
  font-size: 18px;
  font-weight: 500;
  padding: 5px;
}

/* Styling for the menu button on mobile */
.menu-button {
  display: none;
  /* Hide by default on larger screens */
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: coral;
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-size: 24px;
  z-index: 1000;
  /* Ensure button is above other content */
}

.menu-button:hover {
  background: #071C4D;
}

/* Styles for mobile menu */
.mobile-menu {
  display: none;
  /* Hide by default */
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  padding: 20px;
  z-index: 1000;
  /* Ensure menu is above other content */
}

.mobile-menu.active {
  display: block;
  /* Show menu when active */
}

@media (min-width: 1025px) {
  .menu-button {
    display: none;
    /* Hide menu button on desktop and larger screens */
  }
}
@media (max-width: 992px) {
  .catalog-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns on tablets */
    gap: 20px;
    padding: 0;
    /* Space between cards */
  }
}
@media (min-width: 800px) and (max-width: 834px) {
  .catalog-cards {
    margin: 20px;
  }
}
/* Responsive styles */
@media (max-width: 1024px) {
  /* Styles for tablets */
  .menu {
    display: none;
    /* Hide menu on tablets */
  }
  .content {
    flex-direction: column;
    /* Stack content vertically on tablets */
  }
  .catalog-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns on tablets */
    gap: 20px;
    /* Space between cards */
  }
  .card {
    width: 100%;
    /* Full width for cards */
  }
  .mobile-menu {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    /* Efek blur */
    -webkit-backdrop-filter: blur(10px);
  }
}
/* Responsive for Tablet */
@media (max-width: 768px) {
  .catalogue {
    padding: 70px 30px;
  }
  /* Styles for mobile */
  .hero-title {
    padding: 0;
  }
  .card-catalogue {
    width: calc(100% - 5px);
    /* Satu card per baris di mobile */
  }
  .menu {
    display: none;
  }
  .content {
    flex-direction: column;
  }
  .catalog-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    margin-left: 0;
  }
  .card {
    width: 100%;
  }
  .menu-button {
    display: flex;
  }
  .mobile-menu {
    display: none;
  }
  .mobile-menu h2 {
    font-size: 22px;
    font-weight: bold !important;
  }
  .mobile-menu {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    /* Efek blur */
    -webkit-backdrop-filter: blur(10px);
  }
  .mobile-menu.active {
    display: block;
  }
}
/* Section Heading Review */
.section-review-header {
  min-height: 310px;
  background: radial-gradient(circle, #071C4D, #000000);
  margin-top: -90px;
  display: flex;
  flex-direction: column;
  /* Atur item secara vertikal */
  justify-content: center;
  /* Pusatkan secara vertikal */
  align-items: center;
  /* Pusatkan secara horizontal */
  text-align: center;
  /* Atur teks agar rata tengah */
}

.container-header-review {
  margin-bottom: -120px;
}

.section-review-header h1 {
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px;
}

.section-review-header p {
  font-size: 18px;
  margin-top: 0;
  color: #fff;
}

.section-heading-review {
  color: #071C4D;
  background: radial-gradient(circle, #071C4D, #000000);
  text-align: center;
  padding: 50px 0;
  position: relative;
  height: -100px;
}

.section-heading-review h1 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
}

.section-heading-review p {
  font-size: 18px;
}

/* Section Client Says */
.section-client-says {
  padding: 50px 0;
  background-color: #f9f9f9;
}

.review-heading {
  display: flex;
  padding: 0 45px;
  justify-content: space-between;
  margin-bottom: 30px;
}

.review-heading h1 {
  font-size: 30px;
  font-weight: bold;
  text-align: left;
}

.review-heading p {
  text-align: right;
  max-width: 500px;
  font-size: 18px;
}

/* Review Cards */
.review-cards {
  display: flex;
  /* Menyusun card secara horizontal */
  gap: 20px;
  /* Jarak antara card */
  flex-wrap: wrap;
  /* Mengizinkan card membungkus jika layar kecil */
  justify-content: center;
  /* Mengatur agar card berada di tengah */
}

.review-card {
  background-color: #fff;
  width: 330px;
  /* Atur lebar card */
  padding: 25px;
  /* Atur padding card agar tidak terlalu besar */
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  /* Mengatur elemen di dalam card secara vertikal */
}

.review-card:hover {
  box-shadow: 24px 24px 40px #cccccc, -24px -24px 40px #f4f4f4;
}

.review-message {
  font-size: 14px;
  /* Ukuran font yang lebih kecil untuk pesan review */
  margin-bottom: 10px;
  /* Jarak di bawah pesan review */
  line-height: 1.4;
  /* Jarak antar baris untuk tampilan lebih rapi */
}

/* Read More link */
.read-more {
  color: blue;
  /* Warna untuk link */
  cursor: pointer;
  /* Menunjukkan bahwa ini dapat diklik */
  font-size: 14px;
  /* Ukuran font */
  margin-left: 5px;
  /* Jarak antara teks akhir dan ...more */
}

.review-card h3 {
  font-size: 20px;
  font-weight: 600;
  /* Ukuran font yang lebih kecil untuk judul */
  margin-bottom: 5px;
  /* Jarak yang lebih kecil di bawah judul */
}

.review-footer {
  display: flex;
  align-items: center;
  margin-top: auto;
  /* Mengatur footer ke bawah */
}

.review-image {
  width: 40px;
  /* Ukuran gambar yang lebih kecil */
  height: 40px;
  /* Ukuran gambar yang lebih kecil */
  border-radius: 50%;
  margin-right: 8px;
  /* Jarak yang lebih kecil antara gambar dan teks */
}

.review-details {
  display: flex;
  padding-bottom: 0;
  flex-direction: column;
  /* Mengatur detail review secara vertikal */
}

.name-user-review {
  font-weight: bold;
  margin-bottom: 0;
  font-size: 14px;
  /* Ukuran font yang lebih kecil */
}

.created_at {
  font-size: 12px;
  /* Ukuran font yang lebih kecil untuk tanggal */
  color: #888;
  margin-top: 2px;
  /* Jarak di atas tanggal */
}

/* Section About Us */
.section-about-us {
  display: flex;
  /* Mengatur layout menjadi flex untuk menyusun item secara horizontal */
  justify-content: center;
  /* Memusatkan elemen secara horizontal */
  padding: 50px 0;
  /* Jarak atas dan bawah */
}

.container-about {
  display: flex;
  /* Menjaga konten dalam satu baris */
  width: 80%;
  /* Lebar kontainer untuk memberi ruang di kanan dan kiri */
  max-width: 1200px;
  /* Lebar maksimum untuk menjaga proporsi di layar besar */
}

.about-image {
  width: 50%;
  /* Atur lebar gambar menjadi 50% dari kontainer */
  border-radius: 12px;
}

.about-content {
  width: 50%;
  /* Atur lebar konten menjadi 50% dari kontainer */
  padding-left: 30px;
  /* Jarak antara gambar dan konten */
  text-align: left;
  /* Teks rata kiri */
}

.about-content h3 {
  font-size: 18px;
  font-weight: 600;
}

.about-content h1 {
  font-weight: bold;
}

.learn-more-btn {
  padding: 10px 20px;
  background-color: coral;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
}

.learn-more-btn:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  transition: all 0.4s;
  /* Animasi transisi saat hover */
}

/* Section Let's Get Started */
.section-lets-started {
  padding: 100px 0;
}

.card.card-test {
  padding: 50px;
  background: url("../svg/images/bg-verify.svg") center center/cover no-repeat;
  border-radius: 12px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.card-test h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 10px;
}

.card-test h1 {
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 20px;
}

.get-started-btn {
  padding: 10px 20px;
  background-color: coral;
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
}

.get-started-btn:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  transition: all 0.4s;
  /* Animasi transisi saat hover */
}

/* Untuk Tablet (max-width: 768px) */
@media (max-width: 768px) {
  /* Section Heading Review */
  .container-header-review {
    padding: 0 10px;
    margin-bottom: -100px;
  }
  .container-header-review h1 {
    font-size: 28px;
  }
  .container-header-review p {
    font-size: 16px;
  }
  /* Section Client Says */
  .review-heading h1 {
    font-size: 26px;
  }
  .review-heading p {
    font-size: 16px;
  }
  .review-heading {
    flex-direction: column;
    align-items: center;
  }
  .review-cards {
    flex-direction: column;
    align-items: center;
  }
  .review-card {
    width: 100%;
    max-width: 500px;
    /* Agar tidak terlalu besar di layar tablet */
    margin-top: -20px;
  }
  /* Section About Us */
  .container-about {
    flex-direction: column;
    align-items: center;
  }
  .about-image,
  .about-content {
    width: 100%;
    text-align: center;
  }
  .about-content {
    padding-left: 0;
    margin-top: 20px;
  }
  /* Section Let's Get Started */
  .card-test {
    padding: 30px;
    max-width: 90%;
  }
  .card-test h3 {
    font-size: 20px;
  }
  .card-test h1 {
    font-size: 28px;
  }
}
/* Untuk Mobile (max-width: 576px) */
@media (max-width: 576px) {
  /* Section Heading Review */
  .container-header-review {
    padding: 0 10px;
    margin-bottom: -100px;
  }
  .container-header-review h1 {
    font-size: 28px;
  }
  .container-header-review p {
    font-size: 16px;
  }
  /* Section Client Says */
  .review-heading {
    flex-direction: column;
    align-items: center;
  }
  .review-heading h1 {
    font-size: 22px;
    text-align: center;
  }
  .review-heading p {
    text-align: center;
    font-size: 14px;
    max-width: 90%;
  }
  .review-card {
    width: 100%;
    margin-bottom: 20px;
    max-width: 100%;
  }
  /* Section About Us */
  .container-about {
    flex-direction: column;
    align-items: center;
  }
  .about-image,
  .about-content {
    width: 100%;
    text-align: center;
  }
  .about-content {
    padding-left: 0;
    margin-top: 20px;
  }
  .card-test {
    margin-top: -70px;
  }
}
#login-popup {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.login-card {
  width: 800px;
  border-radius: 35px;
  overflow: hidden;
  border: none;
  margin-top: 100px;
  height: 550px;
  background-color: white;
  display: grid;
  /* Smooth transition on the card */
  /* Using CSS Grid for the layout */
  /* Two equal columns */
}

.login-image {
  background-image: url("../images/landing-1.jpg") !important;
  background-size: cover;
  background-position: center;
  height: 100%;
  /* Full height of the parent grid item */
  width: 100%;
  /* Ensure full width of the grid column */
}

.title-login {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;
}

.login-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Center content vertically */
}

.rounded-input {
  border-radius: 30px;
  border: none;
  padding: 20px;
  background-color: #e5e9f2;
}

.forgot-password {
  display: block;
  text-align: right;
  margin-bottom: 15px;
  text-decoration: none !important;
  color: #999aa4;
}

.forgot-password:hover {
  font-weight: 500;
  color: #999aa4;
}

.btn-login {
  display: block;
  margin: 20px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
}

.login-button,
.register-button {
  padding: 12px;
  background-color: coral;
  /* Adjust button colors */
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.login-button:hover {
  box-shadow: 0 0 0 0.25rem rgba(253, 181, 13, 0.2509803922) !important;
  background-color: coral;
  transition: all 0.4s;
}

.register-button:hover {
  box-shadow: 0 0 0 0.25rem rgba(221, 221, 221, 0.537254902) !important;
  transition: all 0.4s;
}

.btn-dark.google {
  background-color: #34364a;
  padding: 12px;
  /* Adjust button colors */
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  /* To align icon and text properly */
  align-items: center;
  /* Center icon and text vertically */
  justify-content: center;
  /* Center the content inside the button */
}

.google-icon {
  width: 20px;
  /* Adjust size of the icon */
  height: auto;
  margin-right: 10px;
  /* Spacing between the icon and text */
}

.btn-dark.google:hover {
  box-shadow: 0 0 0 0.25rem rgba(83, 85, 107, 0.2666666667) !important;
  transition: all 0.4s;
}

.register-button {
  background-color: #ddd;
  /* Adjust register button color */
  color: #666;
}

/* For tablet devices (screen width less than or equal to 768px) */
@media (max-width: 768px) {
  .login-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    /* Adjust height for better responsiveness */
    margin-top: -40px;
  }
  .login-image {
    display: none;
    /* Hide the image on tablets and smaller devices */
  }
  .login-content {
    padding: 20px;
    justify-content: flex-start;
    /* Adjust padding and content alignment for smaller screens */
  }
  .rounded-input {
    padding: 15px;
    /* Adjust input padding for smaller screens */
  }
  .action-buttons .login-button,
  .action-buttons .register-button {
    width: 100%;
    /* Full width buttons on mobile/tablet */
    margin: 10px 0;
    /* Add margin between buttons */
  }
}
@media (min-width: 769px) {
  .login-card {
    width: 800px;
    border-radius: 35px;
    overflow: hidden;
    border: none;
    margin-top: 100px;
    height: 550px;
    background-color: white;
    display: grid;
    margin: 60px;
  }
}
/* For mobile devices (screen width less than or equal to 576px) */
@media (max-width: 576px) {
  .login-card {
    width: 90%;
    /* Make the card narrower for small screens */
    height: auto;
    padding: 20px;
    /* Adjust margin for mobile */
  }
  .login-content {
    padding: 15px;
    /* Reduce padding on mobile */
  }
  .rounded-input {
    padding: 12px;
    /* Further reduce input padding for mobile */
  }
  .btn-login,
  .btn-register {
    padding: 10px;
    font-size: 14px;
    /* Adjust button font size */
  }
  .action-buttons .login-button,
  .action-buttons .register-button {
    margin: 8px 0;
    /* Tighter spacing between buttons */
  }
}
#terms-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.terms-card {
  width: 1000px important;
  /* Pastikan ini menggantikan aturan lain */
  max-width: 100% !important;
  border-radius: 50px !important;
  overflow: hidden;
  border: none;
  background-color: #fff;
  display: grid;
  padding: 20px;
  padding-left: 30px;
  padding-right: 30px;
  height: 550px !important;
}

.terms-content {
  padding: 20px;
  overflow-y: auto;
  max-height: 500px;
  /* Limits the height of the scrollable area */
  margin-top: 10px;
  /* Hilangkan scrollbar */
  scrollbar-width: none;
  /* Firefox */
}

/* Hilangkan scrollbar di WebKit (Chrome, Safari) */
.terms-content::-webkit-scrollbar {
  display: none;
}

.terms-content h2 {
  margin-top: 0;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.subtitle-primary {
  font-size: 14px;
  text-align: center;
}

.terms-content p {
  margin-bottom: 1em;
  line-height: 1.5;
}

.list-terms {
  margin-top: 30px !important;
}

.text-left-terms {
  margin-bottom: 40px !important;
}

.text-left-terms h2 {
  text-align: left !important;
}

/* For tablet devices (screen width less than or equal to 768px) */
@media (max-width: 768px) {
  .terms-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    /* Adjust height for better responsiveness */
    margin-top: -40px;
  }
  .terms-image {
    display: none;
    /* Hide the image on tablets and smaller devices */
  }
  .terms-content {
    padding: 20px;
    justify-content: flex-start;
    /* Adjust padding and content alignment for smaller screens */
  }
  .rounded-input {
    padding: 15px;
    /* Adjust input padding for smaller screens */
  }
  .action-buttons .login-button,
  .action-buttons .register-button {
    width: 100%;
    /* Full width buttons on mobile/tablet */
    margin: 10px 0;
    /* Add margin between buttons */
  }
  .close-button-popup {
    display: none;
  }
}
@media (min-width: 769px) {
  .terms-card {
    width: 800px;
    border-radius: 35px;
    overflow: hidden;
    border: none;
    margin-top: 100px;
    height: 550px;
    background-color: white;
    display: grid;
    margin: 60px;
  }
}
@media (min-width: 800px) and (max-width: 834px) {
  .close-button-popup {
    display: none;
  }
}
/* For mobile devices (screen width less than or equal to 576px) */
@media (max-width: 576px) {
  .terms-card {
    width: 90%;
    /* Make the card narrower for small screens */
    height: auto;
    padding: 20px;
    /* Adjust margin for mobile */
  }
  .terms-content {
    padding: 15px;
    /* Reduce padding on mobile */
  }
  .rounded-input {
    padding: 12px;
    /* Further reduce input padding for mobile */
  }
  .btn-login,
  .btn-register {
    padding: 10px;
    font-size: 14px;
    /* Adjust button font size */
  }
  .action-buttons .login-button,
  .action-buttons .register-button {
    margin: 8px 0;
    /* Tighter spacing between buttons */
  }
}
/* Existing styles remain the same */
.section-package-popular {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 0 100px;
  text-align: center;
  width: 100%;
}

.card-container-popular {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  margin-right: -15px;
}

/* Rest of the existing card styles remain the same */
.card {
  position: relative;
  width: 100%;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 15px;
  overflow: hidden !important;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.card.card-package img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.card-content-popular {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
}

.card-content-popular a {
  text-decoration: none;
  color: #071C4D;
}

/* Updated card title styling */
.card-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  margin: 0 0 5px 0;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 1.2em;
  /* Minimum height for 2 lines */
}

/* Updated hover effect */
.card-title:hover {
  -webkit-line-clamp: unset;
  height: auto;
}

/* Rest of the styling remains the same */
.card-description {
  font-size: 14px;
  margin: 5px 0 10px;
}

.card-rating {
  margin: 5px 0 10px;
  color: #FFD700;
}

.card-rating i {
  margin-right: 5px;
  font-size: 16px;
}

.view-details {
  display: none;
  background-color: #2447f9;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  margin-top: auto;
}

.view-details:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922) !important;
}

/* Price container untuk layout horizontal */
.price-container {
  display: flex;
  align-items: center;
  /* Menengahkan item secara vertikal */
  gap: 12px;
  margin: 5px 0 10px;
  height: 20px;
  /* Set fixed height untuk container */
}

/* Reset margin dari card-description dan set line-height yang sama */
.card-description {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  /* Match dengan height container */
  display: flex;
  align-items: center;
}

/* Styling untuk harga yang dicoret */
.price-discount {
  font-size: 14px;
  color: #ff3b3b;
  text-decoration: line-through;
  position: relative;
  animation: blink 1.5s infinite;
  font-weight: 500;
  line-height: 20px;
  /* Match dengan height container */
  display: flex;
  align-items: center;
  margin: 0;
  /* Reset margin */
}

/* Tooltip Icon */
.tooltip-icon.package {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

/* Icon style with circle background */
.icon-img.package {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: rgba(15, 244, 126, 0.231372549);
  /* Circle background color */
  border-radius: 50%;
  /* Circle shape */
  color: #0ff47e;
  /* Icon color */
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  /* Vertically center text */
  cursor: pointer;
  position: relative;
}

/* Tooltip text */
.tooltip-text.package {
  display: none;
  position: absolute;
  top: -90px;
  left: -190px !important;
  background-color: #fff;
  /* White background */
  color: #333;
  /* Dark text color */
  padding: 15px;
  /* Padding around text */
  border-radius: 8px;
  /* Rounded border */
  font-size: 12px;
  margin-top: 8px;
  font-weight: 500 !important;
  z-index: 1000 !important;
  width: 250px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  /* Optional: Shadow for tooltip */
  /* Set a maximum width for long text */
  white-space: normal;
  /* Allows text to wrap onto the next line */
  word-wrap: break-word;
}

.tooltip-text.package h1 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #0ff47e;
}

/* Show tooltip on hover */
.tooltip-icon.package:hover .tooltip-text.package {
  display: block;
}

/* Animasi kedip */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/* Garis coret custom */
.price-discount::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
}

/* Responsive adjustments */
/* Responsive layout */
@media (max-width: 1200px) {
  .card-container-popular {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .card-container-popular {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .section-package-popular {
    padding: 20px;
    margin: auto;
  }
  .card-container-popular {
    grid-template-columns: 1fr;
    margin: 0;
  }
}
.card.reset__password {
  margin-bottom: 100px;
  margin-top: 100px;
}

.image-grid {
  margin: 20px 0;
  overflow: hidden;
}

.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--secondary-color);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  padding-bottom: 10px;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-track {
  background: var(--secondary-color);
  border-radius: 10px;
}

.grid-images {
  display: inline-flex;
  gap: 10px;
  padding: 10px;
}

.grid-images img {
  width: 200px;
  height: 150px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  scroll-behavior: smooth;
  transition: transform 0.3s ease;
}

.grid-images img:hover {
  transform: scale(1.05);
}/*# sourceMappingURL=main.css.map */