/* Font families */
.font-cinzel { font-family: "Cinzel", sans-serif; }
.font-belleza { font-family: "Belleza", sans-serif; }
.font-zcoll { font-family: "ZCOOL XiaoWei", sans-serif; }
.font-libreCaslon { font-family: "Libre Caslon Display", sans-serif; }
.font-aboreto { font-family: "Aboreto", sans-serif; }
.font-poppins { font-family: "Poppins", sans-serif; }
.font-pinyon { font-family: "Pinyon Script", sans-serif; }
.font-zenantique { font-family: "Zen Antique", sans-serif; }
.font-caudex { font-family: "Caudex", sans-serif; }

/* Background images */
.bg-quotes-section {
  background-image: radial-gradient(at center center, #8a3f43 0%, #661217 100%);
}
.bg-btn-schedule {
  background-image: linear-gradient(165deg, #E1BF7C 0%, #A17036 100%);
}
.bg-gallery-section {
  background-image: linear-gradient(123deg, #000000C2 0%, #661217 100%);
}

/* Max widths */
.max-w-1\/10 { max-width: 10%; }
.max-w-1\/2 { max-width: 50%; }
.max-w-1\/4 { max-width: 25%; }

/* Colors */
.text-red-cover { color: #661217; }
.text-gold-cover { color: #DBCCA2; }
.text-gold-cover-dalam { color: #DFB584; }
.text-putih-cover { color: #FFFBE9D4; }
.text-story-section { color: #FFF1CF; }
.text-white-payment { color: #D5CBB4; }
.text-red-border-payment { color: #9C8594; }

/* Background Colors */
.bg-red-cover { background-color: #661217; }
.bg-gold-cover { background-color: #DBCCA2; }
.bg-gold-cover-dalam { background-color: #DFB584; }
.bg-putih-cover { background-color: #FFFBE9D4; }
.bg-story-section { background-color: #FFF1CF; }
.bg-white-payment { background-color: #D5CBB4; }
.bg-red-border-payment { background-color: #9C8594; }

/* Border Color */
.border-red-cover { border-color: #661217; }
.border-gold-cover { border-color: #DBCCA2; }
.border-gold-cover-dalam { border-color: #DFB584; }
.border-putih-cover { border-color: #FFFBE9D4; }
.border-story-section { border-color: #FFF1CF; }
.border-white-payment { border-color: #D5CBB4; }
.border-red-border-payment { border-color: #9C8594; }


/* position */
.-scale-x-100 {
    transform: scaleX(-1);
}


/* Animation */
.animate-zoom-in {
  animation-name: zoomIn;
  animation-duration: 10s;
  animation-fill-mode: forwards;
  -webkit-animation-name: zoomIn; /* Safari */
  -webkit-animation-duration: 10s; /* Safari */
  -webkit-animation-fill-mode: forwards; /* Safari */
  -ms-animation-name: zoomIn; /* Internet Explorer */
  -ms-animation-duration: 10s; /* Internet Explorer */
  -ms-animation-fill-mode: forwards; /* Internet Explorer */
}

/* Keyframes */
@keyframes zoomIn {
  0%, 87.5% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }
  93.75% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes zoomIn {
  0%, 87.5% {
    opacity: 0;
    -webkit-transform: scale3d(0, 0, 0);
  }
  93.75% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@-ms-keyframes zoomIn {
  0%, 87.5% {
    opacity: 0;
    -ms-transform: scale3d(0, 0, 0);
  }
  93.75% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1);
  }
}


/* Section */

.acara-wrapper {
  background-position: center center;
  background-size: 113% auto;
  opacity: 1;
  padding: 60px 36px;
  text-align: center;
  margin: 0px 0px 10px 0px;
  border-radius: 30px 30px 30px 30px;
}

.map-embed iframe {
  border-radius: 20px;
}

#section-guest {

  background-attachment: fixed;
  background-size: 450px auto;
  background-position: center center;
  opacity: 1;
}

.section-penutup {
  --horizontal-padding: 0.1vw;

  background-position: center center;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem var(--horizontal-padding); /* Menggunakan variabel */
  box-sizing: border-box;
}

.map-embed{
  position: relative;
}

.map-embed::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 2;
}

.map-embed > iframe {
  width: 250px;
  max-width: 250px;
}

@media screen and (min-width: 768px) {
  .map-embed > iframe {
      width: 100%;
      max-width: 100%;
  }
}

.video-embed {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 20px;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Slide Up */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.slide-up-enter,
.slide-up-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

/* Fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* Swiper */
#section-schedule .swiper {
  width: 100%;
  max-width: 300px;
  height: 475px;
  border-radius: 115px 115px 0 0;
  border: 4px solid #DFB584;
  overflow: hidden;
}

#section-story .swiper {
  width: 100%;
  max-width: 300px;
  height: 475px;
  border-radius: 115px 115px 115px 115px;
  border: 4px solid #DFB584;
  overflow: hidden;
}

#section-guest .swiper {
  width: 100%;
  max-width: 300px;
  height: 225px;
  border-radius: 1rem;
  border: 4px solid #DFB584;
  overflow: hidden;
  margin: 0 auto;
  margin-bottom: 1rem;
}

#section-penutup .swiper {
  box-sizing: border-box;
  width: 100%;
  height: 400px;
  border-radius: 115px 115px 0 0;
  border: 4px solid #DFB584;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

@media (min-width: 390px) {
  #section-penutup .swiper {
    width: 98%; /* Increase width slightly */
  }
}

@media (min-width: 414px) {
  #section-penutup .swiper {
    width: 95%; /* The width that you found worked well here */
  }
}

@media screen and (min-width: 768px) {
  #section-schedule .swiper,
  #section-story .swiper {
    max-width: 400px;
    height: 600px;
  }

  #section-guest .swiper {
    max-width: 400px;
    height: 300px;
  }

  #section-penutup .swiper {
    max-width: 500px;
    height: 350px;
  }
}

@media screen and (min-width: 1024px) {
  #section-schedule .swiper,
  #section-story .swiper {
    max-width: 500px;
    height: 500px;
  }

  #section-guest .swiper {
    max-width: 500px;
    height: 425px;
  }

  #section-penutup .swiper {
    max-width: 600px;
    height: 475px;
  }
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiperGallery {
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
}

.swiper-slide-gallery {
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiperThumb {
  box-sizing: border-box;
  padding: 5px 0;
}

.swiper-slide .swiper-slide-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide .swiper-slide-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.gallery-item {
  flex: 1 1 calc(33.333% - 10px);
  box-sizing: border-box;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

}

.z-cuss {
  z-index: 9999;
}

.animate-spin-slow {
  animation: spin 4s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* .videoWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
}
*/

#videoElement {
  width: 100%;
}