/* Preloader */
.preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  background: -webkit-linear-gradient(
    linear,
    left top,
    right top,
    from(#8a8a8a),
    to(#000000)
  );
  background: -o-linear-gradient(left, #8a8a8a, #000000);
  background: linear-gradient(to right, #8a8a8a, #000000);
  z-index: 99;
  pointer-events: none;
}
.isipreloader {
  height: 100%;
  color: #fdfcfb;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.preloaderpengantin {
  font-weight: bold;
}
.preloaderweb {
  margin-top: 2rem;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 0px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fdfcfb;
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  -webkit-animation: lds-ellipsis1 0.6s infinite;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  -webkit-animation: lds-ellipsis2 0.6s infinite;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  -webkit-animation: lds-ellipsis2 0.6s infinite;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  -webkit-animation: lds-ellipsis3 0.6s infinite;
  animation: lds-ellipsis3 0.6s infinite;
}
@-webkit-keyframes lds-ellipsis1 {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes lds-ellipsis1 {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes lds-ellipsis3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}
@-webkit-keyframes lds-ellipsis2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(24px, 0);
    transform: translate(24px, 0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(24px, 0);
    transform: translate(24px, 0);
  }
}

/* lagu */
.lagu {
  position: fixed;
  bottom: 5%;
  right: 5%;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 43;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.lagu:hover {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}
.bg-lagu {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 43;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-filter: drop-shadow(1px 1px 5px rgba(255, 255, 255, 0.2));
  filter: drop-shadow(1px 1px 5px rgba(255, 255, 255, 0.2));
}
.bg-lagu.muncul {
  background-image: url("../../../assets/img/icon/pauseeditBW.png");
  background-position: center;
  background-size: cover;
}
.bg-lagu.ilang {
  background-image: url("../../../assets/img/icon/playeditBW.png");
  background-position: center;
  background-size: cover;
}
.pplagu {
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 44;
  opacity: 0;
}

/* Section Tamu */
.tamu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 50;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  -webkit-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
  pointer-events: none;
}
.isi-tamu {
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
  background: #feffff;
  -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.4);
  border-radius: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: visible;
}
.tamu-atas {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  width: 65%;
  text-align: left;
  color: #454545;
  margin-left: 5rem;
}
.tamu-bawah {
  position: absolute;
  left: -20%;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  width: 25rem;
  height: 25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #000000;
  background: -webkit-linear-gradient(
    linear,
    left top,
    right top,
    from(#8a8a8a),
    to(#000000)
  );
  background: -o-linear-gradient(left, #8a8a8a, #000000);
  background: linear-gradient(to right, #8a8a8a, #000000);
  color: #fdfcfb;
  border-radius: 1rem;
  -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
  z-index: 51;
}
.tamu-bawah h4 {
  font-family: "Merriweather", serif;
}
.beda {
  font-family: "Sacramento", cursive;
  font-size: 4rem;
}
.namaTamu {
  font-weight: bold;
  margin: 0.5rem 0;
}
.pUcapan {
  margin: 2rem 0;
}
.ilang-tamu {
  font-size: 1.4rem;
  width: 15rem;
  padding: 1rem;
  border: 1px solid #feffff;
  border-radius: 2rem;
  background: #454545;
  color: #feffff;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.ilang-tamu:hover {
  background: #fdfcfb;
  border: 1px solid #454545;
  color: #454545;
}

/* Section Hadiah */
.tombolmunculhadiah {
  position: fixed;
  left: 5%;
  bottom: 5%;
  z-index: 46;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  -webkit-transform: translateY(5rem);
  -ms-transform: translateY(5rem);
  transform: translateY(5rem);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.tombolmunculhadiah.muncul {
  pointer-events: all;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-animation: shake 0.5s;
  animation: shake 0.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.gambarshake {
  width: 8.5rem;
  -webkit-filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
}

.tombolclosehadiah {
  position: fixed;
  z-index: 47;
  left: 5%;
  bottom: 5%;
  pointer-events: none;
  background: url("../../../../assets/img/dadad.png");
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: 0;
  -webkit-transform: translateY(5rem);
  -ms-transform: translateY(5rem);
  transform: translateY(5rem);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  height: 5rem;
  width: 5rem;
  -webkit-filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
}
.tombolclosehadiah.muncul {
  pointer-events: all;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.hadiah {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  background: -webkit-linear-gradient(
    linear,
    left top,
    right top,
    from(#8a8a8a),
    to(#000000)
  );
  background: -o-linear-gradient(left, #8a8a8a, #000000);
  background: linear-gradient(to right, #8a8a8a, #000000);
  z-index: 45;
  -webkit-clip-path: circle(10rem at -15% 115%);
  clip-path: circle(10rem at -15% 115%);
  -webkit-transition: all 1.3s ease-out 0.2s;
  -o-transition: all 1.3s ease-out 0.2s;
  transition: all 1.3s ease-out 0.2s;
  pointer-events: none;
  cursor: auto;
}
.hadiah.muncul {
  -webkit-clip-path: circle(190rem at -15% 115%);
  clip-path: circle(190rem at -15% 115%);
  pointer-events: all;
}
.isihadiah {
  height: 100%;
  width: 80%;
  margin: 0 auto;
  color: #feffff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  opacity: 0;
  -webkit-transform: translateX(-25%) scale(0);
  -ms-transform: translateX(-25%) scale(0);
  transform: translateX(-25%) scale(0);
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.isihadiah.muncul {
  opacity: 1;
  -webkit-transform: translateX(0) scale(1);
  -ms-transform: translateX(0) scale(1);
  transform: translateX(0) scale(1);
}

.isihadiahtengah {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 15px;
  /* border: 1px solid black; */
}
.isiHadiahTengah1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hiddenCopy {
  position: absolute;
  left: 9999px;
}
#tombolCopy {
  cursor: pointer;
  border-radius: 20px;
  padding: 8.5px;
  border: 1.8px solid #000000;
  color: #fff;
  transition: all 0.5s ease;
}
#tombolCopy:hover {
  color: #000000;
  background: #fff;
  border: 1.8px solid #8a8a8a;
}

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 90%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.bank,
.ovo,
.dana {
  opacity: 0;
  width: 40%;
  -webkit-transition: all 1s ease 0.2s;
  -o-transition: all 1s ease 0.2s;
  transition: all 1s ease 0.2s;
  -webkit-filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
}
.bank {
  -webkit-transform: translateX(0%) scale(0);
  -ms-transform: translateX(0%) scale(0);
  transform: translateX(0%) scale(0);
}
.bank.muncul {
  -webkit-transform: translateX(100%) scale(1);
  -ms-transform: translateX(100%) scale(1);
  transform: translateX(100%) scale(1);
  opacity: 1;
}
.dana {
  -webkit-transform: translateY(100%) scale(0);
  -ms-transform: translateY(100%) scale(0);
  transform: translateY(100%) scale(0);
}
.dana.muncul {
  -webkit-transform: translateY(0) scale(1);
  -ms-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  opacity: 1;
}
.ovo {
  -webkit-transform: translateX(0%) scale(0);
  -ms-transform: translateX(0%) scale(0);
  transform: translateX(0%) scale(0);
}
.ovo.muncul {
  -webkit-transform: translateX(-100%) scale(1);
  -ms-transform: translateX(-100%) scale(1);
  transform: translateX(-100%) scale(1);
  opacity: 1;
}
.isihadiahbawah {
  text-align: right;
  /* border: 1px solid black; */
}
.iconhadiahbawah {
  width: 5rem;
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  margin: 0 0.5rem;
}
.iconhadiahbawah:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

/* Section Cover */
.sectionCover {
  height: 100vh;
  width: 100%;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.isiCover {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  -webkit-transform: translateY(-10rem);
  -ms-transform: translateY(-10rem);
  transform: translateY(-10rem);
  -webkit-transition: 1.5s 0.75s;
  -o-transition: 1.5s 0.75s;
  transition: 1.5s 0.75s;
}
.isiCover.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.coverTheWedding,
.coverDilanMilea,
.coverWaktu {
  z-index: 3;
}
.isiCover img {
  height: 70%;
  object-fit: contain;
  object-position: center;
  z-index: 2;
  margin-bottom: -5rem;
}
.coverTheWedding {
  color: #333;
  font-weight: bold;
  font-family: "Merriweather", serif;
}
.coverDilanMilea {
  font-size: 7rem;
  color: #454545;
  font-weight: bolder;
  font-family: "Sacramento", cursive;
  margin: -2rem 0;
}
.coverWaktu {
  font-weight: normal;
  color: #333;
}
.decor-1 {
  position: absolute;
  top: 0;
  left: 0;
  background: url("../../../assets/img/decor1bw.jpg");
  background-position: center;
  background-size: cover;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  /* z-index: 1; */
}
.decor-2 {
  position: absolute;
  top: -3rem;
  left: -5rem;
  width: 25rem;
  height: 20rem;
  background: url("../../../assets/img/5a293e17b99322BW.png");
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}
.decor-3 {
  position: absolute;
  top: -3rem;
  right: -3rem;
  background: url("../../../assets/img/kisspng-decorative-flowers-floral-design-vector-graphics-s-no-5bffcfc10ab0e7.2831686115434915210438BW.png");
  background-position: right;
  background-size: contain;
  background-repeat: no-repeat;
  width: 25rem;
  height: 20rem;
  z-index: 2;
}
.decor-4 {
  position: absolute;
  bottom: -3rem;
  left: -8rem;
  background: url("../../../assets/img/kisspng-decorative-flowers-floral-design-vector-graphics-s-no-5bffcfc10ab0e7.2831686115434915210438BW.png");
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
  width: 25rem;
  height: 20rem;
  z-index: 2;
  transform: rotate(180deg);
}
.decor-5 {
  position: absolute;
  bottom: -5rem;
  right: -5rem;
  width: 25rem;
  height: 20rem;
  background: url("../../../assets/img/5a293e17b99322BW.png");
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  transform: rotate(180deg);
}
.decor-6 {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  border: 3px solid gold;
  z-index: -1;
}

/* Section Pengantin */
.sectionPengantin {
  height: 100%;
  width: 100%;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.isiPengantin {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #333;
}
.assalamualaikum,
.introText {
  z-index: 3;
  opacity: 0;
  -webkit-transform: translateY(-10rem);
  -ms-transform: translateY(-10rem);
  transform: translateY(-10rem);
  -webkit-transition: all 0.75s ease-out;
  -o-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}
.assalamualaikum.muncul,
.introText.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.assalamualaikum,
.namaPengantin,
.danPengantin {
  font-family: "Sacramento", cursive;
  font-weight: bold;
  color: #454545;
}
.introText {
  width: 60%;
}
.tengahPengantin {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 2rem;
  align-items: center;
  margin: 3rem 0;
  z-index: 3;
  text-align: left;
}
.gambarPengantin {
  height: 50rem;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: 0.75s 0.5s;
  -o-transition: 0.75s 0.5s;
  transition: 0.75s 0.5s;
}
.gambarPengantin.muncul {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.namaPengantin,
.danPengantin,
.anakDari {
  opacity: 0;
  -webkit-transform: translateX(10rem);
  -ms-transform: translateX(10rem);
  transform: translateX(10rem);
  -webkit-transition: all 0.75s 1.35s ease-out;
  -o-transition: all 0.75s 1.35s ease-out;
  transition: all 0.75s 1.35s ease-out;
}
.namaPengantin.muncul,
.danPengantin.muncul,
.anakDari.muncul {
  opacity: 1;
  -webkit-transform: translateX(0rem);
  -ms-transform: translateX(0rem);
  transform: translateX(0rem);
}

/* Section QuoteCount */
.sectionQuoteCount {
  width: 100%;
  height: 100%;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.isiQuoteCount {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #333;
}
.textQuote,
.countdown {
  color: #454545;
  font-family: "Sacramento", cursive;
  font-weight: bold;
  z-index: 3;
}
.ayat {
  width: 60%;
  z-index: 3;
}
.arRum {
  z-index: 3;
  font-weight: 500;
}
.isiCountdown {
  width: 80%;
  z-index: 3;
  display: flex;
  justify-content: space-evenly;
}
.saveTheDate {
  width: 80%;
  border: 2px solid #454545;
  border-radius: 1rem;
  background: #454545;
  color: white;
  padding: 0.7rem;
  margin-top: 1rem;
  z-index: 3;
}
.saveTheDate:hover {
  border: 2px solid #454545;
  background: white;
  color: #454545;
}

.textQuote,
.ayat,
.arRum {
  opacity: 0;
  -webkit-transform: translateY(-10rem);
  -ms-transform: translateY(-10rem);
  transform: translateY(-10rem);
  -webkit-transition: all 0.75s ease-out;
  -o-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}
.textQuote.muncul,
.ayat.muncul,
.arRum.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.countdown,
.isiCountdown,
.saveTheDate {
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: all 0.75s ease-out;
  -o-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}
.countdown.muncul,
.isiCountdown.muncul,
.saveTheDate.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/* Section Venue */
.sectionVenue {
  width: 100%;
  height: 100%;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.isiVenue {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  color: #333;
  padding: 3rem 0;
}
.venueAtas {
  width: 100%;
  height: 100%;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  text-align: right;
}
.divAkadResepsi {
  opacity: 0;
  -webkit-transform: translateX(-10rem);
  -ms-transform: translateX(-10rem);
  transform: translateX(-10rem);
  -webkit-transition: all 0.75s ease-out;
  -o-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}
.divAkadResepsi.muncul {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.akadNikah,
.Resepsi {
  color: #454545;
  font-family: "Sacramento", cursive;
  font-weight: bold;
}
.lihatLive,
.lihatLokasi {
  display: inline-block;
  width: 50%;
  text-align: center;
  border-radius: 1rem;
  border: 2px solid #454545;
  background: #454545;
  color: white;
  padding: 0.7rem;
  margin-top: 1rem;
}
.lihatLive:hover,
.lihatLokasi:hover {
  border: 2px solid #454545;
  background: white;
  color: #454545;
}
.maps {
  z-index: 3;
  height: 30rem;
  width: 50rem;
  border: 5px solid white;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  opacity: 0;
  -webkit-transform: translateX(10rem);
  -ms-transform: translateX(10rem);
  transform: translateX(10rem);
  -webkit-transition: all 0.75s 0.5s ease-out;
  -o-transition: all 0.75s 0.5s ease-out;
  transition: all 0.75s 0.5s ease-out;
}
.maps.muncul {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.protokol {
  width: 100%;
  height: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.75s 1.35s ease-out;
  -o-transition: all 0.75s 1.35s ease-out;
  transition: all 0.75s 1.35s ease-out;
}
.protokol.muncul {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.isiProtokol {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.textProtokol {
  color: #454545;
  font-family: "Merriweather", serif;
  font-weight: bold;
}
.introProtokol {
  width: 90%;
  margin-bottom: 1.5rem;
}
.iconProtokol {
  width: 6rem;
}

/* Section Gallery */
.sectionGallery {
  height: 100%;
  width: 100%;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.isiGallery {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #333;
}
.textGallery,
.textVideo {
  z-index: 3;
  color: #454545;
  font-family: "Sacramento", cursive;
  font-weight: bold;
}
.textGallery {
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.75s ease-out;
  -o-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}
.textGallery.muncul {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.galleryImg {
  height: 100%;
  width: 90%;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
}
.galleryImg img {
  width: 30%;
  height: 40rem;
  object-fit: cover;
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.galleryImg img.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.textVideo {
  margin-top: 3rem;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.75s 3.35s ease-out;
  -o-transition: all 0.75s 3.35s ease-out;
  transition: all 0.75s 3.35s ease-out;
}
.textVideo.muncul {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.video {
  width: 100%;
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: all 0.75s 3.5s ease-out;
  -o-transition: all 0.75s 3.5s ease-out;
  transition: all 0.75s 3.5s ease-out;
}
.video.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.isivideo {
  position: relative;
  width: 45%;
  z-index: 3;
  margin: 0 auto;
}
.isivideo::after {
  padding-top: 56.25%;
  display: block;
  content: "";
}
.isivideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.textStories {
  z-index: 3;
  font-family: "Merriweather", serif;
  margin-top: 5rem;
  background: #454545;
  border: 1px solid #454545;
  width: 80%;
  color: white;
  border-radius: 1rem 1rem 0 0;
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: all 0.75s 4.35s ease-out;
  -o-transition: all 0.75s 4.35s ease-out;
  transition: all 0.75s 4.35s ease-out;
}
.introStories {
  z-index: 3;
  width: 80%;
  color: #454545;
  border: 3px solid #454545;
  padding: 1rem;
  border-radius: 0 0 1rem 1rem;
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: all 0.75s 4.35s ease-out;
  -o-transition: all 0.75s 4.35s ease-out;
  transition: all 0.75s 4.35s ease-out;
}
.textStories.muncul,
.introStories.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/* Section RSVP */
.sectionRSVP {
  height: 100%;
  width: 100%;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.isiRSVP {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: #333;
  gap: 5rem;
}
.rsvpAtas {
  z-index: 3;
  text-align: right;
  width: 45%;
}
.rsvpBawah {
  z-index: 3;
  width: 55%;
}
.textRSVP {
  color: #454545;
  font-family: "Sacramento", cursive;
  font-weight: bold;
}
.introRSVP {
  width: 80%;
  margin-left: auto;
}
.textRSVP,
.introRSVP {
  opacity: 0;
  -webkit-transform: translateX(-10rem);
  -ms-transform: translateX(-10rem);
  transform: translateX(-10rem);
  -webkit-transition: all 0.75s ease-out;
  -o-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}
.textRSVP.muncul,
.introRSVP.muncul {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.inputnama,
.doaucapan,
.kirim,
.jumlahtamu,
.telepon {
  display: block;
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #454545;
  border-radius: 0.8rem;
  margin-bottom: 1.5rem;
}
.flexform {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.jumlahtamu {
  cursor: pointer;
  width: 40%;
}
.telepon {
  width: 60%;
}
.inputradio {
  cursor: pointer;
  margin-bottom: 1.5rem;
}
.pradio {
  cursor: pointer;
  display: inline;
  font-size: 1.4rem;
}
.pradio-1 {
  margin-right: 1.5rem;
}
.kirim {
  cursor: pointer;
  font-size: 1.4rem;
  border: 1px solid #454545;
  background: #454545;
  color: white;
}
.kirim:hover {
  border: 1px solid #454545;
  background: white;
  color: #454545;
}
.quotes {
  width: 100%;
  height: 30rem;
  overflow: auto;
  margin-top: 5rem;
}
.inputnama,
.jumlahtamu,
.telepon,
.doaucapan,
.radio,
.kirim,
.quotes {
  opacity: 0;
  -webkit-transform: translateX(10rem);
  -ms-transform: translateX(10rem);
  transform: translateX(10rem);
  -webkit-transition: all 0.75s ease-out;
  -o-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}
.inputnama.muncul,
.jumlahtamu.muncul,
.telepon.muncul,
.doaucapan.muncul,
.radio.muncul,
.kirim.muncul,
.quotes.muncul {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.quote {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 95%;
  gap: 1rem;
  margin: 1rem auto;
  color: #454545;
}
.pesan {
  border: 1px solid #454545;
  background: white;
  border-radius: 1rem 0 1rem 0;
  padding: 1rem;
  flex: 1;
  text-align: justify;
}
.quote img {
  width: 3rem;
}
.namapengirim {
  font-weight: bold;
}

/* Section Penutup */
.sectionPenutup {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
}
.isiPenutup {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #333;
  text-align: center;
}
.textPenutup,
.introPenutup {
  z-index: 3;
}
.textPenutup {
  color: #454545;
  font-family: "Sacramento", cursive;
  font-weight: bold;
}
.introPenutup {
  width: 60%;
}

/* Section Footer */
.sectionFooter {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #454545;
  padding: 1rem 0;
}
.linkFooter {
  color: #659dbd;
}
.linkFooter:hover {
  text-decoration: underline;
}

/* Animasi */
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(3px, 2px) rotate(0deg);
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(3px, 1px) rotate(-1deg);
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 2px) rotate(0deg);
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(3px, 2px) rotate(0deg);
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(3px, 1px) rotate(-1deg);
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 2px) rotate(0deg);
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

/* Responsive */
@media (max-width: 1024px) {
  /* Tamu */
  .isi-tamu {
    width: 60%;
    height: 80%;
  }
  .tamu-atas {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(50px);
  }
  .tamu-bawah {
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
  }

  /* Section Pengantin */
  .gambarPengantin {
    height: 40rem;
  }

  /* Section Venue */
  .maps {
    height: 30rem;
    width: 40rem;
  }

  /* Section RSVP */
  .introRSVP {
    width: 90%;
  }
}
@media (max-width: 812px) {
  /* Tamu */
  .tamu-atas {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  .tamu-bawah {
    -webkit-transform: translateX(-60px);
    -ms-transform: translateX(-60px);
    transform: translateX(-60px);
    height: 20rem;
    width: 20rem;
  }

  /* Hadiah */
  .bank,
  .ovo,
  .dana {
    width: 50%;
  }

  /* Section Pengantin */
  .introText {
    width: 80%;
  }
  .tengahPengantin {
    height: 100%;
    flex-direction: column;
    text-align: center;
  }
  .namaPengantin,
  .danPengantin,
  .anakDari {
    -webkit-transform: translate(0, 10rem);
    -ms-transform: translate(0, 10rem);
    transform: translate(0, 10rem);
  }
  .namaPengantin.muncul,
  .danPengantin.muncul,
  .anakDari.muncul {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
  }

  /* Section QuoteCount */
  .ayat {
    width: 80%;
  }

  /* Section Venue */
  .venueAtas {
    flex-direction: column;
    text-align: center;
  }
  .divAkadResepsi,
  .maps {
    -webkit-transform: translate(0, 10rem);
    -ms-transform: translate(0, 10rem);
    transform: translate(0, 10rem);
  }
  .divAkadResepsi.muncul,
  .maps.muncul {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
  }
  .maps {
    margin-bottom: 1rem;
  }
  .isiProtokol {
    row-gap: 1rem;
  }
  .isiProtokol-1,
  .isiProtokol-2,
  .isiProtokol-3,
  .isiProtokol-4 {
    width: 30%;
  }

  /* Section Gallery */
  .isivideo {
    width: 60%;
  }
  .textStories,
  .introStories {
    width: 85%;
  }

  /* Section RSVP */
  .isiRSVP {
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  /* Cover */
  .pengantinBR {
    display: block;
  }

  /* Section Gallery */
  .galleryImg img {
    height: 35rem;
  }

  /* Section RSVP */
  .isiRSVP {
    gap: 3rem;
    flex-direction: column;
  }
  .rsvpAtas {
    text-align: center;
    width: 100%;
  }
  .rsvpBawah {
    width: 90%;
    margin: 0 auto;
  }
  .introRSVP {
    margin: 0 auto;
  }
  .textRSVP,
  .introRSVP,
  .inputnama,
  .jumlahtamu,
  .telepon,
  .doaucapan,
  .radio,
  .kirim,
  .quotes {
    -webkit-transform: translate(0, 10rem);
    -ms-transform: translate(0, 10rem);
    transform: translate(0, 10rem);
  }
  .textRSVP.muncul,
  .introRSVP.muncul,
  .inputnama.muncul,
  .jumlahtamu.muncul,
  .telepon.muncul,
  .doaucapan.muncul,
  .radio.muncul,
  .kirim.muncul,
  .quotes.muncul {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
  }

  /* Section Penutup */
  .introPenutup {
    width: 80%;
  }
}
@media (max-width: 576px) {
  html {
    font-size: 55%;
  }

  /* Tamu */
  .isi-tamu {
    /* flex-direction: column; */
    width: 60%;
    height: 60vmax;
  }
  .isi-tamu {
    width: 60%;
    height: 60vmax;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .tamu-atas {
    /* margin-left: 0; */
    width: 90%;
    margin: 2rem 0;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    text-align: center;
  }
  .tamu-bawah {
    /* display: none; */
    position: relative;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    left: 0;
    top: 0;
  }

  /* Hadiah */
  .isihadiahatas h4 {
    font-size: 1.4rem;
  }
  .bank,
  .ovo,
  .dana {
    width: 80%;
  }

  /* Section Cover */
  .isiCover img {
    height: 55%;
  }
  .coverTheWedding,
  .coverWaktu {
    font-size: 2rem;
  }
  .coverDilanMilea {
    font-size: 5rem;
  }
  .decor-2,
  .decor-3,
  .decor-4,
  .decor-5 {
    width: 20rem;
    height: 17rem;
  }

  /* Section Pengantin */
  .introText,
  .anakDari {
    font-size: 1.4rem;
  }
  .gambarPengantin {
    height: 30rem;
  }
  .assalamualaikum,
  .anakDari {
    width: 90%;
    margin: 0 auto;
  }
  .namaPengantin {
    width: 100%;
  }

  /* Section QuoteCount */
  .ayat,
  .arRum,
  .isiCountdown h4,
  .saveTheDate h4 {
    font-size: 1.4rem;
  }

  /* Section Venue */
  .maps {
    height: 30rem;
    width: 75%;
  }
  .hariVenue,
  .lokasiVenue,
  .waktuVenue,
  .lihatLive h4,
  .lihatLokasi h4,
  .introProtokol,
  .textIconP {
    font-size: 1.4rem;
  }
  .textProtokol {
    font-size: 2.1rem;
  }
  .introProtokol {
    width: 80%;
  }
  .isiProtokol {
    justify-content: center;
  }
  .isiProtokol-1,
  .isiProtokol-2,
  .isiProtokol-3,
  .isiProtokol-4 {
    width: 45%;
    gap: 0;
  }

  /* Section Gallery */
  .galleryImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .isivideo {
    width: 90%;
  }
  .textStories,
  .introStories {
    width: 90%;
  }
  .textStories {
    font-size: 2.1rem;
  }
  .introStories {
    font-size: 1.4rem;
  }

  /* Section RSVP */
  .introRSVP,
  .kirim {
    font-size: 1.4rem;
  }
  .inputnama,
  .jumlahtamu,
  .telepon,
  .doaucapan,
  .pradio,
  .namapengirim,
  .pesannya {
    font-size: 1.2rem;
  }

  /* Section Penutup */
  .introPenutup {
    font-size: 1.4rem;
  }
  .textPenutup {
    font-size: 3.9rem;
  }
}

@media (max-width: 350px) {
  html {
    font-size: 50%;
  }

  /* Section Pengantin */
  .gambarPengantin {
    height: 25rem;
  }

  /* Section Venue */
  .lokasiVenue {
    width: 95%;
    margin: 0 auto;
  }
}
@media (max-width: 250px) {
  /* Section Pengantin */
  .assalamualaikum,
  .namaPengantin,
  .anakDari {
    width: 85%;
  }
  .gambarPengantin {
    height: 20rem;
  }

  /* Section Venue */
}