@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap"); /* Added EB Garamond */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"); /* Added Montserrat */
@import url("https://fonts.googleapis.com/css2?family=Rochester&display=swap"); /* Added Rochester for '&' symbol */

/* Opening Screen Styles */
#opening {
  background-color: #fff9f2; /* Sesuaikan dengan warna latar belakang gambar */
}
.photo-container {
  position: relative;
  width: 63%; /* Sesuaikan lebar gambar */
  max-width: 200px; /* Batasi lebar maksimum */
  margin: 30px auto;
}
.photo-container .couple-photo {
  width: 100%;
  display: block;
}
.photo-container .ribbon-frame {
  position: absolute;
  top: -15.5%; /* Sesuaikan posisi bingkai agar menutupi gambar */
  left: -12%; /* Sesuaikan posisi bingkai agar menutupi gambar */
  width: 115%; /* Sesuaikan ukuran bingkai */
  height: 124%; /* Sesuaikan ukuran bingkai */
  pointer-events: none; /* Agar tidak mengganggu klik di belakangnya */
  object-fit: contain;
}
.guest-info {
  margin-top: 40px;
}
.guest-info .guest-title {
  font-size: 14px;
  color: #555;
}
.guest-info .guest-name {
  font-family: "EB Garamond", serif;
  font-size: 28px;
  color: #333;
  font-weight: 400;
  margin-top: 5px;
}
#btn-open-opening {
  background-color: #d9d9d9;
  border: none;
  color: #333;
}
header#header {
  /* Pengaturan Layout dan Posisi */
  min-height: 100vh;
  position: relative; /* Penting untuk memposisikan elemen anak secara absolut */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden; /* Mencegah elemen keluar dari batas */
}
/* Gradasi Warna Putih dari Bawah */
header#header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Sesuaikan tinggi gradasi */
  background: linear-gradient(
    to top,
    rgba(245, 241, 235, 0.95) 20%,
    /* Warna #f5f1eb dari layar pembuka */ transparent
  );
  z-index: 1; /* Di atas gambar latar, di bawah konten */
}
/* Kontainer untuk memastikan konten berada di atas gradasi */
header#header .container {
  position: relative;
  z-index: 2;
  padding: 0; /* Hapus padding default dari .container jika ada */
  color: #333; /* Warna teks default untuk konten di dalam */
}
#header .ribbon-bow {
  position: relative; /* PENTING: Agar properti 'top' berfungsi */
  top: -390px; /* Sesuaikan nilai ini untuk mengatur seberapa tinggi pita naik */
  width: 70px;
  margin-bottom: -100px;
}

/* Styling untuk konten di tengah */
.ribbon-bow {
  position: relative; /* PENTING: Agar properti 'top' berfungsi */
  top: -100px; /* Sesuaikan nilai ini untuk mengatur seberapa tinggi pita naik */
  width: 70px;
  margin-bottom: -100px;
}

.subheading {
  font-family: "Inter", sans-serif; /* Pastikan font sesuai */
  font-size: 14px;
  letter-spacing: 2px;
  margin: 0;
  color: black;
  margin-top: -300px;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
}

.names-main {
  font-family: "Luxurious Script";
  font-size: 48px;
  font-weight: 400;
  color: black; /* Warna merah */
  margin: 10px 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.date {
  font-family: "Playfair Display", sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  color: black;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
}

/* Media query untuk membuat font responsif di layar kecil */
@media screen and (max-width: 768px) {
  .names-main {
    font-size: 12vw; /* Ukuran font responsif */
  }
}

/* CSS untuk navbar sticky dan toggler */
/* CSS untuk menyembunyikan teks di navbar-brand pada mobile, tapi menjaga ruangnya */
.navbar-brand .font-type-secondary {
  visibility: hidden;
}
.font-type-secondary {
  font-family: "Luxurious Script", cursive;
  font-size: 28px;
}

/* Pastikan navbar-toggler selalu tampil di mobile */
@media (max-width: 767.98px) {
  .navbar-toggler {
    display: block !important;
  }
}
/* Sembunyikan navbar-toggler pada desktop */
@media (min-width: 768px) {
  .navbar-toggler {
    display: none !important;
  }
}
/* Atur margin top body untuk menghindari konten tertutup navbar fixed */
body.opening-hidden,
body.opening-show {
  /* Terapkan padding juga di awal jika navbar fixed dari awal */
  padding-top: 70px; /* Sesuaikan dengan tinggi navbar Anda */
}

/* Gaya untuk section mempelai (Buta Kab) */
#section-mempelai {
  /* Ganti #section-4 jika ini adalah section baru */
  padding: 50px 0; /* Tambahkan padding vertikal */
  background-color: #f5f1eb; /* Warna latar belakang dari desain */
  color: #333; /* Warna teks default */
}
#section-mempelai .subtitle {
  font-size: 12px;
  letter-spacing: 1px;
  color: #888;
}
#section-mempelai .main-name {
  font-size: 28px; /* Ukuran font utama */
  color: #c23b22; /* Warna merah seperti di header */
  margin-bottom: 8px;
  margin-top: 8px;
  margin-left: 20px;
  margin-right: 20px;
  font-family: "Playfair Display";
}
#section-mempelai .parent-info {
  font-family: "Playfair Display";
  font-style: italic;
  font-size: 14px;
  color: #555;
  margin-top: 5px;
  margin-bottom: 3px;
}
#section-mempelai .parent-info2 {
  font-family: "Playfair Display", serif; /* Tambahkan fallback serif */
  font-size: 17px; /* Ini akan menjadi ukuran font default untuk nama */
  color: #000000;
  margin-top: 15px;
  line-height: 0.5em; /* Mengurangi jarak antar baris, sesuaikan jika perlu */
}

#section-mempelai .and-symbol {
  font-family: "Rochester", cursive; /* Pastikan font ini terimpor */
  font-style: italic;
  font-size: 1.5em; /* Buat simbol '&' lebih besar dari teks sekitarnya */
  color: #9c2020; /* Warna simbol '&' */
  display: block;
  line-height: 0.7em; /* Kurangi line-height simbol & agar rapat */
}

/* Menyesuaikan photo-container untuk section-mempelai */
#section-mempelai .photo-container {
  max-width: 270px; /* Sedikit lebih besar dari di opening jika diinginkan */
  margin-bottom: 20px;
  margin-top: 10px; /* Hapus margin-top default dari .photo-container */
}
#section-mempelai .ribbon-frame {
  max-width: 900px; /*Sedikit lebih besar dari di opening jika diinginkan */
  max-height: 320px;
  margin-top: 30px; /* Hapus margin-top default dari .photo-container */
}

/* Tambahan untuk jarak antar mempelai jika ada dua bagian terpisah */
#section-mempelai .mempelai-block + .mempelai-block {
  margin-top: 40px; /* Jarak antara mempelai pria dan wanita */
}

/* Custom Styles for the New Section */
#section-schedule {
  background-color: #f5f1eb; /* Matching the background from the image */
  padding: 60px 0;
  text-align: center;
  color: #333;
}

#section-schedule .event-block {
  margin-bottom: 50px; /* Space between each event */
}

#section-schedule .ribbon-bow {
  width: 70px; /* Adjust size as needed */
  margin-bottom: 20px;
  display: block; /* Ensures centering */
  margin-left: auto;
  margin-right: auto;
}

#section-schedule .event-title {
  font-family: "Luxurious Script", cursive; /* Assuming 'Great Vibes' for script font */
  font-size: 40px;
  color: #c32828; /* Red color from your image */
  margin-bottom: 10px;
}

#section-schedule .event-date {
  font-family: "Playfair Display", sans-serif; /* Example font */
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 10px;
}

#section-schedule .event-location,
#section-schedule .event-address {
  font-family: "Inter", sans-serif; /* Example font */
  font-size: 16px;
  color: #555;
  margin-bottom: 5px;
}

#section-schedule .btn-maps {
  background-color: #8c4238; /* Specific brown color from your image */
  border: none;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
  font-size: 14px;
  text-transform: uppercase;
}

#section-schedule .btn-maps:hover {
  background-color: #6a312a; /* Slightly darker on hover */
}

#section-schedule .section-divider {
  border: 0;
  height: 1px;
  background-color: #c23b22; /* Red line color */
  margin: 60px auto; /* Adjust margin as needed */
  width: 80%; /* Adjust width of the line */
  max-width: 400px; /* Max width for the line */
}

#section-schedule .mail-icon {
  width: 60px; /* Size of the envelope icon */
  height: auto;
  margin-bottom: 20px;
}

#section-schedule .event-email {
  font-family: "Montserrat", sans-serif; /* Example font */
  font-size: 16px;
  color: #555;
  margin-top: 10px;
}

/* Styles for the new countdown section */
#section-countdown {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Ubah dari height ke min-height */
  background-image: url("_assets/img/bg/bg-main.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
  text-align: center;
  padding: 40px 20px; /* Kurangi padding */
  box-sizing: border-box;
}

/* Perbaikan overlay */
#section-countdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f1eb; /* This background color determines the overlay */
  background-image: url("../img/new/image4.png"); /* Image for the overlay */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Perbaikan gradient bawah */
#section-countdown::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%; /* Kurangi tinggi gradient */
  background: linear-gradient(
    to top,
    rgba(245, 241, 235, 1) 0%,
    rgba(245, 241, 235, 0.6) 50%,
    transparent 100%
  );
  z-index: 1;
}

/* Perbaikan container */
#section-countdown .container {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 500px; /* Batasi lebar maksimum */
}

/* Perbaikan polaroid container */
.polaroid-container {
  position: relative;
  width: 180px; /* Kurangi ukuran */
  height: 220px; /* Kurangi ukuran */
  background-color: white;
  padding: 8px;
  border-radius: 2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px; /* Kurangi margin */
  transform: rotate(-3deg);
}

.polaroid-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.polaroid-container .ribbon-frame {
  position: absolute;
  top: -12%; /* Adjust to cover polaroid */
  left: -12%; /* Adjust to cover polaroid */
  width: 124%; /* Adjust to cover polaroid */
  height: 120%; /* Adjust to cover polaroid */
  pointer-events: none;
  object-fit: contain;
}

/* Perbaikan heading */
.countdown-heading {
  font-family: "Playfair Display", serif; /* Ganti font */
  font-size: 26px; /* Kurangi ukuran */
  color: white;
  margin-bottom: 20px; /* Kurangi margin */
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

/* Perbaikan countdown container */
.timezz-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 25px; /* Kurangi margin */
  flex-wrap: wrap;
}

/* Custom styles for countdown box based on image */
.countdown-box {
  background-color: transparent; /* Hapus latar belakang */
  border: 1px solid black; /* Tambahkan border hitam */
  padding: 12px 15px; /* Sesuaikan padding agar terlihat lebih kotak */
  border-radius: 0; /* Hapus border-radius jika ada */
  min-width: 65px; /* Sesuaikan lebar minimum jika perlu */
  text-align: center;
  color: black; /* Ubah warna teks default menjadi hitam */
}

.countdown-value {
  font-family: "Playfair Display", serif; /* Gunakan font serif yang bold */
  font-size: 32px; /* Sesuaikan ukuran font untuk angka */
  font-weight: bold; /* Pastikan bold */
  line-height: 1;
  color: black; /* Ubah warna angka menjadi hitam */
}

.countdown-label {
  font-family: "Inter", sans-serif; /* Gunakan font sans-serif untuk label */
  font-size: 14px; /* Sesuaikan ukuran font untuk label */
  text-transform: uppercase;
  margin-top: 5px; /* Sesuaikan jarak dari angka */
  color: black; /* Ubah warna label menjadi hitam */
}

/* Perbaikan button */
.btn-save-date {
  background-color: #9c2020;
  color: white;
  padding: 12px 25px;
  text-transform: uppercase;
  font-weight: normal;
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.3s ease;
  z-index: 3;
  font-size: 14px;
}

.btn-save-date:hover {
  background-color: #7a1a1a;
  color: white;
  text-decoration: none;
}

.couple-bottom-photo {
  width: 100%;
  max-width: 500px; /* Adjust max width as needed */
  margin-top: 40px; /* Space above photo */
  position: relative;
  z-index: 0; /* Below gradient */
  display: block;
  height: 300px; /* Fixed height, adjust if needed */
  object-fit: cover; /* Cover the container */
}

.rsvp-form-section .btn-submit {
  background-color: #8c4238; /* Dark brown button */
  border: none;
  color: white;
  padding: 12px 20px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: normal;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.rsvp-form-section .btn-submit:hover {
  background-color: #6a312a; /* Slightly darker on hover */
}
.rsvp-form-section .btn-show-wishes {
  background-color: transparent; /* Dark brown button */
  border: none;
  color: #888888;
  padding: 12px 20px;
  font-size: 13px;
  font-style: unset;
  text-transform: uppercase;
  font-weight: normal;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 5px;
}

.rsvp-form-section .btn-show-wishes:hover {
  background-color: transparent;
  color: #8c4238;
  border-color: none;
}
/* Media queries for responsiveness */
@media (max-width: 768px) {
  #section-countdown {
    min-height: 80vh;
    padding: 30px 15px;
  }

  .polaroid-container {
    width: 150px;
    height: 180px;
    margin-bottom: 25px;
  }

  .countdown-heading {
    font-size: 22px;
    margin-bottom: 15px;
  }

  /* Responsive countdown box */
  .countdown-box {
    min-width: 60px;
    padding: 10px 12px;
  }
  .countdown-value {
    font-size: 28px;
  }
  .countdown-label {
    font-size: 13px;
  }

  .btn-save-date {
    padding: 10px 20px;
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  #section-countdown {
    min-height: 70vh;
    padding: 20px 10px;
  }

  .polaroid-container {
    width: 130px;
    height: 160px;
    margin-bottom: 20px;
  }

  .countdown-heading {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .timezz-container {
    gap: 6px;
    margin-bottom: 20px;
  }

  /* Responsive countdown box */
  .countdown-box {
    min-width: 55px;
    padding: 8px 10px;
  }
  .countdown-value {
    font-size: 24px;
  }
  .countdown-label {
    font-size: 12px;
  }
}
/* WHISES AND GALLERY SECTION STYLE */
#section-7 {
  background-color: #8c4238; /* Warna latar belakang cokelat tua */
  padding: 60px 0; /* Sesuaikan padding atas dan bawah */
  color: white; /* Warna teks default untuk section ini */
  text-align: center; /* Pusatkan teks */
}
section#section-7 {
  padding: 10px;
}

#section-7 h2.title {
  font-family: "Luxurious Script", cursive; /* Font script seperti di contoh gambar */
  font-size: 50px;
  margin-bottom: 40px; /* Jarak bawah judul */
  color: white;
}

#section-7 .card {
  background-color: #f5f1eb;
  color: #333;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

#section-7 .card-body {
  padding: 0; /* Hapus padding default card-body */
}

#section-7 .text-dark.font-semibold {
  font-family: "Montserrat", sans-serif; /* Sesuaikan font jika perlu */
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: uppercase;
}

#section-7 .text-dark-500 {
  font-family: "Montserrat", sans-serif; /* Sesuaikan font jika perlu */
  font-size: 15px;
  line-height: 1.6;
}

/* Override Bootstrap's default .row margin for Glide slides if needed */
#section-7 .glide__slides {
  display: flex;
  width: 100%;
  margin: 0; /* Pastikan margin 0 */
  padding: 0;
  list-style: none;
  align-items: stretch;
}

/* Glide carousel arrows for Section 7 */
#section-7 .glide__arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px; /* Jarak untuk panah */
  box-sizing: border-box;
  z-index: 1; /* Pastikan panah di atas konten */
}

#section-7 .glide__arrow {
  background: rgba(0, 0, 0, 0.3); /* Latar belakang panah yang lebih gelap */
  border: none;
  color: white;
  padding: 10px 15px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 0.3s ease;
  display: flex; /* Untuk pemusatan ikon yang sempurna */
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

#section-7 .glide__arrow:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Updated Gallery Slide Styling */
#section-7 .glide__slide.gallery-slide {
  aspect-ratio: 1/1; /* Memaksa rasio aspek 1:1 (kotak) */
  height: auto;
  width: 100%;
  padding: 0; /* Hapus padding di sini, akan kita atur di img */
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#section-7 .glide__slide.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Tambahkan padding di sini untuk membuat gambar terlihat lebih kecil dari slide container */
  padding: 10px; /* Sesuaikan nilai ini untuk mengatur seberapa besar 'jarak' dari tepi kotak */
  box-sizing: border-box; /* Pastikan padding dihitung dalam lebar/tinggi total */
}

/* Media queries untuk responsivitas */
@media (max-width: 576px) {
  #section-7 .h2.title {
    font-size: 32px;
  }
  #section-7 .card {
    min-height: 180px;
    padding: 20px;
  }
  #section-7 .text-dark.font-semibold {
    font-size: 14px;
  }
  #section-7 .text-dark-500 {
    font-size: 13px;
  }

  /* Specific adjustment for gallery on small screens */
  /* #section-7 .glide__slide.gallery-slide {
    width: calc(
      100% - 40px
    );
    margin-left: auto !important;
    margin-right: auto !important;
  } */
}

/* Tambahkan styling untuk container gallery jika belum ada */
#section-7 .gallery-section {
  padding: 0; /* Hapus padding horizontal di sini jika Anda ingin slide memenuhi lebar carousel */
}

/* NEW SECTION: The Rundown */
#section-rundown {
  background-color: #f5f1eb; /* Warna latar belakang dari gambar */
  padding: 60px 0;
  color: #333;
}

#section-rundown .rundown-bow {
  width: 71px; /* Ukuran pita di atas judul */
  margin-bottom: 15px;
  margin-top: 30px;
}

#section-rundown .rundown-title {
  font-family: "Luxurious Script", cursive; /* Font skrip seperti di gambar */
  font-size: 48px;
  color: #333;
  margin-bottom: 5px;
}

#section-rundown .rundown-subtitle {
  font-family: "Playfair Display", sans-serif; /* Font subtitle */
  font-size: 14px;
  color: #666;
  margin-bottom: 40px;
}

.rundown-timeline {
  position: relative;
  max-width: 600px; /* Batasi lebar timeline */
  margin: 0 auto;
  padding-left: 20px; /* Ruang untuk garis vertikal */
  font-family: "Inter";
}

.rundown-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px; /* Ketebalan garis vertikal */
  height: 100%;
  background-color: #d8a08f; /* Warna garis merah kecoklatan */
}

.rundown-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 30px; /* Ruang untuk teks agar tidak menumpuk garis */
}

.rundown-time {
  font-family: "Inter", sans-serif; /* Font untuk waktu */
  font-size: 16px;
  font-weight: bold;
  color: #c23b22; /* Warna merah seperti di contoh */
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  margin-left: -10px;
}

.rundown-time .ri {
  font-size: 18px; /* Ukuran ikon jam */
  margin-right: 5px;
}

.rundown-event-title {
  font-family: "Playfair Display", sans-serif; /* Font untuk judul event */
  font-size: 18px;
  font-weight: 500;
  color: #333;
  line-height: 1.3;
  margin-bottom: 5px;
}

.rundown-event-description {
  font-family: "Inter", sans-serif; /* Font untuk deskripsi */
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

/* Responsifitas untuk Rundown */
@media (max-width: 768px) {
  #section-rundown .rundown-title {
    font-size: 40px;
  }
  .rundown-item {
    margin-bottom: 25px;
    padding-left: 25px;
  }
  .rundown-timeline::before {
    left: 10px; /* Sesuaikan posisi garis untuk mobile */
  }
  /* Dihapus untuk menghilangkan titik pada media query */
  /* .rundown-item::before {
    left: 6px;
  } */
  .rundown-time {
    font-size: 15px;
  }
  .rundown-event-title {
    font-size: 16px;
  }
  .rundown-event-description {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  #section-rundown {
    padding: 40px 0;
  }
  #section-rundown .rundown-title {
    font-size: 45px;
  }
  #section-rundown .rundown-subtitle {
    font-size: 12px;
  }
  .rundown-timeline {
    padding-left: 15px;
    max-width: 90%; /* Lebih lebar di mobile */
  }
  .rundown-timeline::before {
    left: 8px;
  }
  /* Dihapus untuk menghilangkan titik pada media query */
  /* .rundown-item::before {
    left: 4px;
    width: 7px;
    height: 7px;
  } */
  .rundown-time {
    font-size: 14px;
  }
  .rundown-event-title {
    font-size: 15px;
  }
  .rundown-event-description {
    font-size: 12px;
  }
}

/* NEW SECTION: Do's & Don'ts Styles */
#section-dos-donts {
  background-color: #f5f1eb; /* Warna latar belakang dari gambar */
  padding: 60px 0;
  color: #333;
  text-align: center;
}

#section-dos-donts .dos-donts-bow {
  width: 71px; /* Ukuran pita */
  margin-bottom: 15px;
}

#section-dos-donts .dos-donts-title {
  font-family: "Luxurious Script", cursive; /* Font skrip seperti di gambar */
  font-size: 48px;
  color: #333;
  margin-bottom: 40px; /* Jarak bawah judul utama */
}

#section-dos-donts .do-heading,
#section-dos-donts .dont-heading {
  font-family: "Playfair Display", sans-serif; /* Font untuk "Do:" dan "Don't:" */
  font-size: 30px;
  color: #c23b22; /* Warna merah */
  margin-bottom: 25px;
  font-weight: 400;
}

#section-dos-donts .do-list,
#section-dos-donts .dont-list {
  max-width: 500px; /* Batasi lebar daftar */
  margin: 0 auto;
  text-align: left; /* Teks di dalam daftar rata kiri */
}

#section-dos-donts .do-item,
#section-dos-donts .dont-item {
  margin-bottom: 25px; /* Jarak antar item */
  padding-left: 25px;
  padding-right: 25px;
}

#section-dos-donts .do-item-title,
#section-dos-donts .dont-item-title {
  font-family: "Playfair Display", sans-serif; /* Font untuk judul item */
  font-size: 18px;
  justify-content: center;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: flex-start; /* Untuk ikon tetap di atas */
  margin-bottom: 5px;
}

#section-dos-donts .do-item-title .ri,
#section-dos-donts .dont-item-title .ri {
  font-size: 22px; /* Ukuran ikon ceklis/silang */
  color: #c23b22; /* Warna ikon merah */
  margin-right: 10px;
  line-height: 1; /* Pastikan ikon sejajar dengan teks pertama */
  flex-shrink: 0; /* Mencegah ikon menyusut */
}

#section-dos-donts .do-item-description,
#section-dos-donts .dont-item-description {
  font-family: "Inter", sans-serif; /* Font untuk deskripsi */
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  /* margin-left: 32px;  */
  /* Sesuaikan dengan lebar ikon + margin-right ikon */
}

#section-dos-donts .separator-line {
  width: 100px; /* Lebar garis pemisah */
  height: 1px;
  background-color: #d8a08f; /* Warna garis */
  margin: 60px auto 0 auto; /* Tengah dan jarak bawah */
}

/* Responsifitas untuk Do's & Don'ts */
@media (max-width: 768px) {
  #section-dos-donts .dos-donts-title {
    font-size: 48px;
    margin-bottom: 10px;
  }
  #section-dos-donts .do-heading,
  #section-dos-donts .dont-heading {
    font-size: 40px;
    margin-bottom: 20px;
  }
  #section-dos-donts .do-list,
  #section-dos-donts .dont-list {
    max-width: 90%;
  }
  #section-dos-donts .do-item-title,
  #section-dos-donts .dont-item-title {
    font-size: 16px;
  }
  #section-dos-donts .do-item-title .ri,
  #section-dos-donts .dont-item-title .ri {
    font-size: 20px;
    margin-right: 8px;
  }
  #section-dos-donts .do-item-description,
  #section-dos-donts .dont-item-description {
    font-size: 13px;
    /* margin-left: 28px; */
  }
  #section-dos-donts .separator-line {
    margin-top: 40px;
  }
}

@media (max-width: 576px) {
  #section-dos-donts {
    padding: 40px 0;
  }
  #section-dos-donts .dos-donts-title {
    font-size: 48px;
  }
  #section-dos-donts .do-heading,
  #section-dos-donts .dont-heading {
    font-size: 28px;
  }
  #section-dos-donts .do-item-title,
  #section-dos-donts .dont-item-title {
    font-size: 15px;
  }
  #section-dos-donts .do-item-title .ri,
  #section-dos-donts .dont-item-title .ri {
    font-size: 18px;
    margin-right: 6px;
  }
  #section-dos-donts .do-item-description,
  #section-dos-donts .dont-item-description {
    font-size: 12px;
  }
}

/* dress code */
#section-dresscode {
  background-color: #f5f1eb; /* Warna latar belakang dari gambar */
  /* padding: 60px 0; */
  color: #333;
  text-align: center;
}
#section-dresscode .dos-donts-title {
  font-family: "Luxurious Script", cursive; /* Font skrip seperti di gambar */
  font-size: 48px;
  color: #333;
  margin-bottom: 10px; /* Jarak bawah judul utama */
}
#section-dresscode .dos-donts-subtitle {
  font-family: "Inter", sans-serif; /* Font untuk deskripsi */
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 30px; /* Jarak bawah subtitle */
}

/* end dresscode */

/* Thank You Section Styling */
.thank-you-section {
  position: relative;
  overflow: hidden;
  height: 100vh; /* Sesuaikan tinggi sesuai kebutuhan, atau min-height */
  display: flex;
  align-items: flex-end; /* Memposisikan konten di bagian bawah */
  justify-content: center;
  background-color: #fcf8f5; /* Warna latar belakang bagian bawah */
  min-height: 100vh;
}

.thank-you-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px; /* Ubah tinggi menjadi 100% agar gradien meliputi seluruh section */
  background-image: linear-gradient(
      to bottom,
      rgba(252, 248, 245, 0) 2%,
      /* Tetap transparan di paling atas */ rgba(252, 248, 245, 0) 5%,
      /* Gradien mulai transparan hingga 30% */ rgba(252, 248, 245, 0.8) 90%,
      /* Mulai memudar dan sedikit transparan */ rgba(252, 248, 245, 1) 100%
        /* Menjadi solid sepenuhnya dari 90% ke bawah */
    ),
    url("../img/new/image4.png"); /* Ganti dengan path gambar Anda */
  background-size: cover;
  background-position: center center; /* Sesuaikan posisi gambar agar bagian yang relevan terlihat */
  z-index: 1; /* Agar konten teks di atas */
}

.thank-you-content {
  position: relative; /* Agar konten teks berada di atas lapisan latar belakang */
  z-index: 2;
  padding-top: 30px;
  padding-bottom: 80px; /* Padding bawah untuk menjauhkan dari tepi */
  /* Padding atas mungkin tidak terlalu diperlukan jika konten didorong oleh flexbox */
}

.thank-you-section .section-title {
  font-family: "Luxurious Script", cursive; /* Font yang mirip */
  font-size: 40px;
  font-weight: 400;
  color: #a04f4c; /* Warna tulisan "Thank You" */
  margin-bottom: 10px;
}

.thank-you-section .section-description {
  font-family: "Inter", sans-serif; /* Font untuk deskripsi */
  font-size: 12px;
  color: #000000a6;
  font-weight: 400;
  max-width: 250px; /* Batasi lebar teks agar tidak terlalu panjang */
  margin-left: auto;
  margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .thank-you-section {
    height: 80vh; /* Sedikit lebih pendek di mobile */
    align-items: center; /* Pusat konten di mobile */
  }

  .thank-you-bg {
    background-position: center center; /* Sesuaikan posisi gambar di mobile */
  }

  .thank-you-content {
    padding-bottom: 40px;
    padding-top: 360px; /* Tidak perlu padding atas yang besar di mobile */
  }

  .thank-you-section .section-title {
    font-size: 50px;
  }
}