@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

@import url("https://fonts.googleapis.com/css?family=Allison:400|Alice:400");

/* The following line is used to measure usage of this code. You can remove it if you want. */
@import url("https://px.animaapp.com/682c9debddd1f2f19cd480dd.682c9decddd1f2f19cd480e0.iwReHMO.hch.png");


.screen textarea:focus,
.screen input:focus {
  outline: none;
}

.screen * {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.screen div {
  -webkit-text-size-adjust: none;
}

.component-wrapper a {
  display: contents;
  pointer-events: auto;
  text-decoration: none;
}

.component-wrapper * {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  pointer-events: none;
}

.component-wrapper a *,
.component-wrapper input,
.component-wrapper video,
.component-wrapper iframe {
  pointer-events: auto;
}

.component-wrapper.not-ready,
.component-wrapper.not-ready * {
  visibility: hidden !important;
}

.screen a {
  display: contents;
  text-decoration: none;
}

.full-width-a {
  width: 100%;
}

.full-height-a {
  height: 100%;
}

.container-center-vertical {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 100%;
  pointer-events: none;
}

.container-center-vertical > * {
  flex-shrink: 0;
  pointer-events: auto;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

.container-center-horizontal > * {
  flex-shrink: 0;
  pointer-events: auto;
}

.auto-animated div {
  --z-index: -1;
  opacity: 0;
  position: absolute;
}

.auto-animated input {
  --z-index: -1;
  opacity: 0;
  position: absolute;
}

.auto-animated .container-center-vertical,
.auto-animated .container-center-horizontal {
  opacity: 1;
}

.overlay-base {
  display: none;
  height: 100%;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.overlay-base.animate-appear {
  align-items: center;
  animation: reveal 0.3s ease-in-out 1 normal forwards;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
}

.overlay-base.animate-disappear {
  animation: reveal 0.3s ease-in-out 1 reverse forwards;
  display: block;
  opacity: 1;
  pointer-events: none;
}

.overlay-base.animate-disappear * {
  pointer-events: none;
}

@keyframes reveal {
  from { opacity: 0 }
 to { opacity: 1 }
}

.animate-nodelay {
  animation-delay: 0s;
}

.align-self-flex-start {
  align-self: flex-start;
}

.align-self-flex-end {
  align-self: flex-end;
}

.align-self-flex-center {
  align-self: flex-center;
}

.valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.valign-text-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

input:focus {
  outline: none;
}

.listeners-active,
.listeners-active * {
  pointer-events: auto;
}

.hidden,
.hidden * {
  pointer-events: none;
  visibility: hidden;
}

.smart-layers-pointers,
.smart-layers-pointers * {
  pointer-events: auto;
  visibility: visible;
}

.listeners-active-click,
.listeners-active-click * {
  cursor: pointer;
}

* {
  box-sizing: border-box;
}
:root { 
  --black: #000000;
  --black-haze: #f6f6f6;
  --denim: #266fae;
  --white: #ffffff;
 
  --font-size-l: 15px;
  --font-size-m: 14px;
  --font-size-s: 12px;
  --font-size-xl: 16px;
  --font-size-xxl: 19px;
  --font-size-xxxl: 21px;
  --font-size-xxxxl: 25px;
 
  --font-family-alice: "Alice", Helvetica;
  --font-family-allison: "Allison", Helvetica;
}
.alice-normal-black-15px {
  color: var(--black);
  font-family: var(--font-family-alice);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.alice-normal-black-21px {
  color: var(--black);
  font-family: var(--font-family-alice);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
}

.alice-normal-white-21px {
  color: var(--white);
  font-family: var(--font-family-alice);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
}

.alice-normal-black-12px {
  color: var(--black);
  font-family: var(--font-family-alice);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.alice-normal-black-8px {
  color: var(--black);
  font-family: var(--font-family-alice);
  font-size: 8px;
  font-style: normal;
  font-weight: 400;
}

.allison-normal-black-50px {
  color: var(--black);
  font-family: var(--font-family-allison);
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
}

.allison-normal-black-25px {
  color: var(--black);
  font-family: var(--font-family-allison);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 400;
}

.alice-normal-black-14px {
  color: var(--black);
  font-family: var(--font-family-alice);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

:root {
}


/* screen - iphone-16-1 */

.iphone-16-1 {
  background-color: #fbfbf9;
  height: 8600px;
  overflow: hidden;
  overflow-x: hidden;
  position: relative;
  width: 393px;
}

.iphone-16-1 .x7-1-UvVZxi {
  top: 373px;
}

.iphone-16-1 .img4-UvVZxi {
  background-color: transparent;
  height: 794px;
  left: -52px;
  object-fit: cover;
  position: absolute;
  top: -70px;
  width: 529px;
}

.iphone-16-1 .rectangle-20-UvVZxi {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0.74) 48%, rgba(255, 255, 255, 0.8) 84%);
  background-color: transparent;
  height: 723px;
  left: -66px;
  position: absolute;
  top: 310px;
  width: 476px;
}

.iphone-16-1 .andin-dicky-UvVZxi {
  -webkit-text-stroke: 1px #00000036;
  background-color: transparent;
  color: var(--denim);
  font-family: var(--font-family-allison);
  font-size: 58px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 10px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 670px;
  width: auto;
}

.iphone-16-1 .minggu-28-agustus-2025-UvVZxi {
  font-size: 17px;
  left: 19px;
  text-align: center;
  top: 748px;
  width: 219px;
}

.iphone-16-1 .undangan-pernikahan-UvVZxi {
  left: 11px;
  top: 644px;
}

.iphone-16-1 .undangan-pernikahan-b6CR1T {
  left: 16px;
  top: 938px;
}

.iphone-16-1 .vector-1-UvVZxi {
  background-color: transparent;
  height: 315px;
  left: 0px;
  position: absolute;
  top: 826px;
  width: 393px;
}

.iphone-16-1 .selamat-datang-UvVZxi {
  -webkit-text-stroke: 1px #00000036;
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-family-allison);
  font-size: 58px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 84px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 949px;
  width: auto;
}

.iphone-16-1 .x2-copy-UvVZxi {
  background-color: transparent;
  height: 522px;
  left: 20px;
  object-fit: cover;
  position: absolute;
  top: 557px;
  width: 373px;
}

.iphone-16-1 .x4-copy-UvVZxi {
  height: 660px;
  top: 824px;
  width: 306px;
}

.iphone-16-1 .diki-2-UvVZxi {
  background-color: transparent;
  height: 357px;
  left: 85px;
  position: absolute;
  top: 1467px;
  width: 245px;
}

.iphone-16-1 .x5-UvVZxi {
  background-color: transparent;
  height: 336px;
  left: 26px;
  object-fit: cover;
  position: absolute;
  top: 1627px;
  width: 238px;
}

.iphone-16-1 .putra-dari-bpk-user-ibu-user-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 73px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 1896px;
  white-space: nowrap;
  width: 234px;
}

.iphone-16-1 .putri-dari-bpk-user-ibu-user-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 81px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 2464px;
  white-space: nowrap;
  width: 234px;
}

.iphone-16-1 .tanpa-mengurangi-ras-UvVZxi {
  background-color: transparent;
  color: var(--black);
  font-family: var(--font-family-alice);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 8px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 1207px;
  width: 375px;
}

.iphone-16-1 .m-dicky-ramadhan-UvVZxi {
  background-color: transparent;
  color: var(--denim);
  font-family: var(--font-family-allison);
  font-size: 45px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 67px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 1839px;
  width: auto;
}

.iphone-16-1 .andina-dwi-mauilina-UvVZxi {
  background-color: transparent;
  color: var(--denim);
  font-family: var(--font-family-allison);
  font-size: 45px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 66px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 2407px;
  width: auto;
}

.iphone-16-1 .andin-UvVZxi {
  background-color: transparent;
  height: 343px;
  left: 75px;
  position: absolute;
  top: 2049px;
  width: 244px;
}

.iphone-16-1 .x8-UvVZxi {
  background-color: transparent;
  height: 398px;
  left: 91px;
  object-fit: cover;
  position: absolute;
  top: 2130px;
  width: 302px;
}

.iphone-16-1 .vector-2-UvVZxi {
  background-color: transparent;
  height: 394px;
  left: 0px;
  position: absolute;
  top: 2600px;
  width: 393px;
}

.iphone-16-1 .qoutes-of-story-UvVZxi {
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-family-allison);
  font-size: 38px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 127px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 2842px;
  width: auto;
}

.iphone-16-1 .cerita-kami-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 113px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 2989px;
  width: auto;
}

.iphone-16-1 .first-meet-2018-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 34px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 3360px;
  width: auto;
}

.iphone-16-1 .relationship-2019-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 34px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 3790px;
  width: auto;
}

.iphone-16-1 .engagement-2023-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 36px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 4218px;
  width: auto;
}

.iphone-16-1 .every-love-story-is-UvVZxi {
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-family-alice);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 16px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 2763px;
  width: 362px;
}

.iphone-16-1 .september-2018-kamu-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 34px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: left;
  top: 3400px;
  width: 335px;
}

.iphone-16-1 .x11-januari-2019-kami-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 34px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: left;
  top: 3834px;
  width: 335px;
}

.iphone-16-1 .setelah-banyak-drama-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 36px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: left;
  top: 4262px;
  width: 335px;
}

.iphone-16-1 .img5-UvVZxi {
  background-color: transparent;
  height: 261px;
  left: 23px;
  position: absolute;
  top: 3083px;
  width: 346px;
}

.iphone-16-1 .img6-UvVZxi {
  height: 240px;
  left: 23px;
  top: 3538px;
  width: 346px;
}

.iphone-16-1 .x7-1-b6CR1T {
  top: 4492px;
}

.iphone-16-1 .x7-2-UvVZxi {
  background-color: transparent;
  height: 1218px;
  left: 0px;
  position: absolute;
  top: 7275px;
  width: 393px;
}

.iphone-16-1 .img3-UvVZxi {
  background-color: transparent;
  height: 240px;
  left: 23px;
  position: absolute;
  top: 3963px;
  width: 346px;
}

.iphone-16-1 .vector-3-UvVZxi {
  background-color: transparent;
  height: 343px;
  left: 0px;
  position: absolute;
  top: 4307px;
  width: 393px;
}

.iphone-16-1 .vector-4-UvVZxi {
  background-color: transparent;
  height: 383px;
  left: 0px;
  position: absolute;
  top: 5324px;
  width: 393px;
}

.iphone-16-1 .x4-copy-b6CR1T {
  height: 758px;
  top: 4241px;
  width: 393px;
}

.iphone-16-1 .x4-copy-4u00x5 {
  height: 758px;
  top: 5271px;
  width: 393px;
}

.iphone-16-1 .x25-hari-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 80px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 4525px;
  width: 50px;
}

.iphone-16-1 .x25-jam-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 141px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 4525px;
  width: 43px;
}

.iphone-16-1 .x25-menit-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 203px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 4525px;
  width: 61px;
}

.iphone-16-1 .x25-detik-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 275px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 4525px;
  width: 52px;
}

.iphone-16-1 .save-the-date-UvVZxi {
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-family-allison);
  font-size: 38px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 130px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 4454px;
  width: auto;
}

.iphone-16-1 .x6407847-1-UvVZxi {
  background-color: transparent;
  height: 279px;
  left: 1px;
  object-fit: cover;
  position: absolute;
  top: 4676px;
  width: 392px;
}

.iphone-16-1 .minggu-28-agustus-2025-b6CR1T {
  font-size: var(--font-size-xxl);
  left: 92px;
  text-align: left;
  top: 4765px;
  white-space: nowrap;
  width: 246px;
}

.iphone-16-1 .x0900-selesai-UvVZxi {
  background-color: transparent;
  color: var(--black);
  font-family: var(--font-family-alice);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 131px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: left;
  top: 4790px;
  white-space: nowrap;
  width: 209px;
}

.iphone-16-1 .rumah-mempelai-wanit-UvVZxi {
  background-color: transparent;
  height: 21px;
  left: 58px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 4843px;
  width: 282px;
}

.iphone-16-1 .x6407847-2-UvVZxi {
  background-color: transparent;
  height: 279px;
  left: 1px;
  object-fit: cover;
  position: absolute;
  top: 5044px;
  width: 392px;
}

.iphone-16-1 .akad-UvVZxi {
  background-color: transparent;
  height: auto;
  left: 153px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 4701px;
  width: auto;
}

.iphone-16-1 .lokasi-UvVZxi {
  left: 155px;
  text-align: center;
  top: 5049px;
  width: auto;
}

.iphone-16-1 .screenshot-2025-07-21-230703-1-UvVZxi {
  background-color: transparent;
  height: 168px;
  left: 35px;
  object-fit: cover;
  position: absolute;
  top: 5111px;
  width: 322px;
}

.iphone-16-1 .rectangle-21-UvVZxi {
  background-color: #81a1bb;
  border-radius: 27px;
  height: 39px;
  left: 137px;
  position: absolute;
  top: 5246px;
  width: 119px;
}

.iphone-16-1 .lokasi-b6CR1T {
  color: var(--white);
  font-family: var(--font-family-alice);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
  /* list-style: none; */
  border: none;
  left: 169px;
  text-align: left;
  top: 5253px;
  white-space: nowrap;
  width: 63px;
}
.iphone-16-1 .lokasi-b6CR1T a{
  text-decoration: none;
  list-style: none;
  color: var(--white);
}

.iphone-16-1 .img6-b6CR1T {
  height: 246px;
  left: -79px;
  object-fit: cover;
  top: 5847px;
  width: 164px;
}

.iphone-16-1 .img6-4u00x5 {
  height: 245px;
  left: 279px;
  object-fit: cover;
  top: 5849px;
  width: 163px;
}

.iphone-16-1 .ellipse-1-UvVZxi {
  background-color: #d9d9d9;
  border-radius: 6.5px/6px;
  height: 12px;
  left: 167px;
  position: absolute;
  top: 6172px;
  width: 13px;
}

.iphone-16-1 .ellipse-2-UvVZxi {
  background-color: #12418e;
  border-radius: 9px;
  height: 18px;
  left: 193px;
  position: absolute;
  top: 6169px;
  width: 18px;
}

.iphone-16-1 .ellipse-3-UvVZxi {
  background-color: #d9d9d9;
  border-radius: 6.5px/6px;
  height: 12px;
  left: 221px;
  position: absolute;
  top: 6172px;
  width: 13px;
}

.iphone-16-1 .rectangle-22-UvVZxi {
  height: 1066px;
  top: 6249px;
}

.iphone-16-1 .doa-restu-anda-merup-UvVZxi {
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-family-alice);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
  height: 21px;
  left: 66px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 6549px;
  width: 282px;
}

.iphone-16-1 .kirim-hadiah-UvVZxi {
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-family-allison);
  font-size: 65px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 70px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 6442px;
  width: auto;
}

.iphone-16-1 .x13-UvVZxi {
  background-color: transparent;
  height: 542px;
  left: -68px;
  object-fit: cover;
  position: absolute;
  top: 6340px;
  width: 384px;
}

.iphone-16-1 .title-UvVZxi {
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-family-allison);
  font-size: 90px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 117px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 5476px;
  width: auto;
}

.iphone-16-1 .group-1-UvVZxi {
  background-color: transparent;
  height: 149px;
  left: 42px;
  position: absolute;
  top: 6628px;
  width: 280px;
}

.iphone-16-1 .group-2-UvVZxi {
  background-color: transparent;
  height: 149px;
  left: 42px;
  position: absolute;
  top: 6789px;
  width: 280px;
}

.iphone-16-1 .group-3-UvVZxi {
  background-color: transparent;
  height: 149px;
  left: 42px;
  position: absolute;
  top: 6950px;
  width: 280px;
}

.iphone-16-1 .vector-CKnyvi {
  height: 7px;
  left: 18px;
  top: 3px;
  width: 7px;
}

.iphone-16-1 .vector-XxjNre {
  height: 7px;
  left: 46px;
  top: 3px;
  width: 7px;
}

.iphone-16-1 .vector-yMqcSy {
  height: 7px;
  left: 27px;
  top: 3px;
  width: 7px;
}

.iphone-16-1 .vector-vz7pTd {
  height: 7px;
  left: 37px;
  top: 3px;
  width: 7px;
}

.iphone-16-1 .vector-U5IPUL {
  height: 13px;
  left: 0px;
  top: 0px;
  width: 15px;
}

.iphone-16-1 .vector-hEBftO {
  height: 5px;
  left: 3px;
  top: 4px;
  width: 9px;
}

.iphone-16-1 .group-4-UvVZxi {
  background-color: transparent;
  height: 149px;
  left: 42px;
  position: absolute;
  top: 6965px;
  width: 280px;
}

.iphone-16-1 .vector-7SZ2Lf {
  height: 7px;
  left: 18px;
  top: 3px;
  width: 7px;
}

.iphone-16-1 .vector-eUOuaY {
  height: 7px;
  left: 46px;
  top: 3px;
  width: 7px;
}

.iphone-16-1 .vector-2xxDQK {
  height: 7px;
  left: 27px;
  top: 3px;
  width: 7px;
}

.iphone-16-1 .vector-nBpki1 {
  height: 7px;
  left: 37px;
  top: 3px;
  width: 7px;
}

.iphone-16-1 .vector-NmM0Tp {
  height: 13px;
  left: 0px;
  top: 0px;
  width: 15px;
}

.iphone-16-1 .vector-YL16jA {
  height: 5px;
  left: 3px;
  top: 4px;
  width: 9px;
}

.iphone-16-1 .ucapan-doa-UvVZxi {
  background-color: transparent;
  color: var(--black);
  font-family: var(--font-family-allison);
  font-size: 53px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 87px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 7376px;
  width: auto;
}

.iphone-16-1 .rectangle-24-UvVZxi {
  background-color: var(--black-haze);
  border-radius: 50px;
  box-shadow: 5px 4px 10px 3px #00000040;
  height: 285px;
  left: 21px;
  position: absolute;
  top: 7491px;
  width: 349px;
}

.iphone-16-1 .group-5-UvVZxi {
  background-color: transparent;
  height: 45px;
  left: 40px;
  position: absolute;
  top: 7869px;
  width: 301px;
}

.iphone-16-1 .group-6-UvVZxi {
  height: 45px;
  left: 40px;
  top: 7960px;
  width: 301px;
}

.iphone-16-1 .group-7-UvVZxi {
  height: 45px;
  left: 40px;
  top: 8058px;
  width: 301px;
}

.iphone-16-1 .rectangle-25-UvVZxi {
  background-color: var(--black-haze);
  border: 1px solid;
  border-color: #00000040;
  border-radius: 5px;
  height: 29px;
  left: 59px;
  position: absolute;
  top: 7532px;
  width: 282px;
}

.iphone-16-1 .rectangle-29-UvVZxi {
  background-color: var(--black-haze);
  border: 1px solid;
  border-color: #00000040;
  border-radius: 5px;
  height: 29px;
  left: 59px;
  position: absolute;
  top: 7578px;
  width: 282px;
}

.iphone-16-1 .rectangle-28-UvVZxi {
  background-color: var(--black-haze);
  border: 1px solid;
  border-color: #0000004c;
  border-radius: 5px;
  height: 104px;
  left: 59px;
  position: absolute;
  top: 7624px;
  width: 282px;
}

.iphone-16-1 .x12-UvVZxi {
  background-color: transparent;
  height: 520px;
  left: 101px;
  object-fit: cover;
  position: absolute;
  top: 7260px;
  width: 369px;
}

.iphone-16-1 .group-7-b6CR1T {
  height: 21px;
  left: -71px;
  top: 8026px;
  width: 284px;
}

.iphone-16-1 .group-6-b6CR1T {
  height: 21px;
  left: -71px;
  top: 7928px;
  width: 284px;
}

.iphone-16-1 .rectangle-22-b6CR1T {
  height: 343px;
  top: 8361px;
}

.iphone-16-1 .andin-dicki-UvVZxi {
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-family-allison);
  font-size: 53px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  left: 88px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 8493px;
  width: auto;
}

.iphone-16-1 .x6407848-UvVZxi {
  background-color: transparent;
  height: 376px;
  left: 0px;
  object-fit: cover;
  position: absolute;
  top: 8260px;
  width: 255px;
}

.iphone-16-1 .an-andina-dwi-maulina {
  background-color: transparent;
  height: 15px;
  left: 18px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 95px;
  width: 208px;
}

.iphone-16-1 .an-m-dicky-ramadhan {
  background-color: transparent;
  height: 15px;
  left: 18px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 95px;
  width: 208px;
}

.iphone-16-1 .bank_-mandiri_logo_2016-1 {
  background-color: transparent;
  height: 15px;
  left: 198px;
  position: absolute;
  top: 37px;
  width: 68px;
}

.iphone-16-1 .copy {
  background-color: transparent;
  height: 15px;
  left: 215px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 113px;
  width: 45px;
}

.iphone-16-1 .copy-1 {
  background-color: transparent;
  height: 36px;
  left: 208px;
  object-fit: cover;
  position: absolute;
  top: 103px;
  width: 26px;
}

.iphone-16-1 .group-6 {
  background-color: transparent;
  position: absolute;
}

.iphone-16-1 .group-7 {
  background-color: transparent;
  position: absolute;
}

.iphone-16-1 .img6 {
  background-color: transparent;
  position: absolute;
}

.iphone-16-1 .kartu-kredit-1 {
  background-color: transparent;
  height: 120px;
  left: 28px;
  object-fit: cover;
  position: absolute;
  top: 0px;
  width: 85px;
}

.iphone-16-1 .logo_dana_blue-1 {
  background-color: transparent;
  height: 13px;
  left: 200px;
  overflow: hidden;
  position: absolute;
  top: 41px;
  width: 53px;
}

.iphone-16-1 .lokasi {
  background-color: transparent;
  height: auto;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
}

.iphone-16-1 .minggu-28-agustus-2025 {
  background-color: transparent;
  color: var(--black);
  font-family: var(--font-family-alice);
  font-style: normal;
  font-weight: 400;
  height: auto;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
}

.iphone-16-1 .nama {
  background-color: transparent;
  color: #898989;
  font-family: var(--font-family-alice);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
  height: 21px;
  left: 0px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 0px;
  width: 282px;
}

.iphone-16-1 .rectangle-22 {
  background-color: transparent;
  left: 0px;
  position: absolute;
  width: 393px;
}

.iphone-16-1 .rectangle-23 {
  background-color: var(--white);
  border-radius: 14px;
  box-shadow: 0px 4px 4px #ffffff40;
  height: 124px;
  left: 34px;
  position: absolute;
  top: 25px;
  width: 240px;
}

.iphone-16-1 .rectangle-30 {
  background-color: var(--black-haze);
  border-radius: 10px;
  box-shadow: 5px 4px 10px 3px #00000040;
  height: 45px;
  left: 0px;
  position: relative;
  top: 0px;
  width: 301px;
}

.iphone-16-1 .undangan-pernikahan {
  background-color: transparent;
  height: auto;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  white-space: nowrap;
  width: 234px;
}

.iphone-16-1 .vector {
  background-color: transparent;
  position: absolute;
}

.iphone-16-1 .x0812-3456-7891 {
  background-color: transparent;
  height: 15px;
  left: 0px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 80px;
  white-space: nowrap;
  width: 208px;
}

.iphone-16-1 .x0987-0887-8717 {
  background-color: transparent;
  height: 15px;
  left: 0px;
  letter-spacing: 0.00px;
  line-height: normal;
  mix-blend-mode: normal;
  position: absolute;
  text-align: center;
  top: 80px;
  white-space: nowrap;
  width: 208px;
}

.iphone-16-1 .x4-copy {
  background-color: transparent;
  left: 0px;
  object-fit: cover;
  position: absolute;
}

.iphone-16-1 .x7-1 {
  background-color: transparent;
  height: 2544px;
  left: 0px;
  position: absolute;
  width: 393px;
}
.gallery {
  position: absolute;
  margin: 200px 0;
  /* padding: 40px 20px; */
  background: #fff;
  top: 5557px;
  left: 10px;
  right: 0;
  width: 100vw;
  max-width: 400px;
}

.swiper {
  position: absolute;
  width: 100%;
  max-width: 500px;
  height: 400px;   /* WAJIB kasih tinggi */
  margin: auto;
}
.swiper-wrapper{
  position: absolute;
}
.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 38%!important;
  transform: translateX(-50%)!important;
  z-index: 10;
}

.swiper-slide img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.ucapan-doa{
  position: absolute;
  top: 7334px;
  height: 100%;
  width: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0;
}
.ucapan-doa h2{
  color: #1a1a1a;
  font-family: "allison";
  font-size: 3em;
  font-weight: 300;
  margin-bottom: 24px;
}
.guestbook-form {
  background-color: #fff;
  border-radius: 24px;
  box-shadow: 0 0 40px 0 rgba(26, 26, 26, 0.3);
  padding: 32px 24px 24px 24px;
  width: 75%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.guestbook-form label {
  font-family: "Comfortaa", sans-serif;
  color: var(--netral-600, #999);
  font-size: 1em;
  margin-bottom: 4px;
}

.guestbook-form .required {
  color: #FF6B6B;
  margin-right: 4px;
}

.guestbook-form input[type="text"],
.guestbook-form textarea {
  width: 100%;
  border: 1px solid var(--netral-700);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: "Comfortaa", sans-serif;
  font-size: 1em;
  background: #ebe9e9;
  color: #4D4D4D;
  margin-bottom: 8px;
  outline: none;
  transition: border 0.2s;
}

.guestbook-form input[type="text"]:focus,
.guestbook-form textarea:focus {
  border: 2px solid #1a1a1a;
}

.guestbook-form textarea {
  resize: none;
  min-height: 80px;
}

.attendance-group {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  box-shadow: 0 0 40px 0 rgba(26, 26, 26, 0.25);
  padding: 14px 0;
  margin-top: 8px;
  margin-bottom: 8px;
}

.attendance-group label {
  color: #1a1a1a;
  font-size: 0.7em;
  font-weight: 500;
  margin: 0 10px;
  cursor: pointer;
}
.attendance-group input[type="radio"] {
  display: none;
}
.attendance-group label {
  position: relative;
  padding: 8px 15px;
  border-radius: 12px;
  background: transparent;
  transition: background 0.2s, color 0.2s;
  font-size: 0.6em;
  font-weight: 500;
  color: #1a1a1a;
  cursor: pointer;
}

.attendance-group input[type="radio"]:checked + label {
  background: #10397c; /* warna lebih gelap */
  color: #fff;
  box-shadow: 0 2px 8px 0 rgba(26, 26, 26, 0.10);
}
.guestbook-form button {
  background: #10397c;
  color: white;
  border: none;
  font-size: 1em;
  font-weight: 700;
  border-radius: 12px;
  padding: 14px 0;
  margin-top: 18px;
  cursor: pointer;
  transition: background 0.3s;
}

.guestbook-form button:hover {
  background: #10397c;
}
.guestbook-list {
  max-height: 350px; /* Atur tinggi maksimal sesuai kebutuhan */
  overflow-y: auto;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 6px; /* agar scrollbar tidak menutupi konten */
  width: 75%;
}

.guestbook-item {
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 8px 32px 0 rgba(26, 26, 26, 0.13);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guestbook-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.guestbook-name {
  font-weight: 700;
  color: #1a1a1a;
  font-size: 1em;
}

.guestbook-attend {
  font-size: 0.9em;
  font-weight: 500;
  border-radius: 12px;
  padding: 4px 16px;
  margin-left: auto;
  color: #fff;
  box-shadow: 0 2px 8px 0 rgba(26, 26, 26, 0.10);
}

.attend-yes {
  background-color: #3DDC97;
}

.attend-maybe {
  background-color: #FFA940;
}
.attend-no {
  background-color: #FF7777;
}

.attend-no {
  background-color: #FF6B6B;
}

.guestbook-message {
  color: #4D4D4D;
  font-size: 1em;
  font-family: "Comfortaa", sans-serif;
}

/* Opening Overlay */
#opening-overlay {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: #fff;
  height: 110vh;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.3) 80%,
    rgba(0, 0, 0, 0.2) 90%,
    rgba(0, 0, 0, 0.15) 95%,
    rgba(0, 0, 0, 0) 100%
  ),url(./asset/img4.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 50px 0;
}
/* #opening-overlay::after {
  content: '';
  position: absolute;
  background-image: url(../img/lingkaran.svg);
  height: 60%;
  width: 100%;
  top: 15px;
  background-position: center;

  /* margin: 0 -50px; */
  /* z-index: 3;
  background-size: contain;
  background-repeat: no-repeat;} */ 

.opening-content {
  border-radius: 24px;
  padding: 36px 18px 24px 18px;
  width: 95vw;
  max-width: 350px;
  text-align: center;
  position: relative;
}

.opening-img {
  width: 180px;
  margin-bottom: 18px;
}

.opening-greeting {
  color: #fff;
  font-size: 1.1em;
  margin-bottom: 4px;
  font-weight: 500;
}

.opening-invite {
  color: #fff;
  font-size: 0.95em;
  margin-bottom: 10px;
}

.opening-couple {
  color: var(--orchid-300);
  font-family: "allison";
  font-size: 3em;
  margin-bottom: 18px;
}

#open-invitation-btn {
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 27px;
  font-size: 1em;
  font-weight: 700;
  margin: 140px auto 18px auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background-color: #10397c;
  cursor: pointer;
  transition: background 0.3s;
}

#open-invitation-btn:hover {
  background: #0b8de4;
}


#music-control-btn {
  background: none;
  border: none;
  position: absolute;
  cursor: pointer;
  padding: 0;
}

#music-icon {
  width: 32px;
  height: 32px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
/* #music-control-btn img {
  width: 100%;
  height: 100%;
} */

#music-control-btn.music-off #music-icon {
  opacity: 0.4;
  filter: grayscale(1);
}