@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Milonga&family=Sawarabi+Mincho&display=swap");

/* anin */
body.anin {
  /* Heading Family */
  --heading-family: "Milonga", serif;
  --heading-style: normal;
  --heading-weight: 400;
  --heading-size: 36px;
  --heading-lettercase: none;

  /* Body Text */
  --body-text-family: "Cormorant Infant", serif;
  --body-text-style: normal;
  --body-text-weight: 400;
  --body-text-size: 16px;
  --body-text-lettercase: none;

  /* Font Size Extra */
  --fs-extra-1: 2px;
  --fs-extra-2: 4px;
  --fs-extra-3: 5px;
  --fs-extra-4: 6px;
  --fs-extra-5: 10px;
  --fs-extra-6: 12px;
  --fs-extra-7: 15px;
  --fs-extra-8: 20px;

  /* Attribute */
  --body-height: 100vh;
  height: auto;
  overflow: visible;

  /* Body background */
  background-color: var(--background-primary);
}

/* Original */
body.anin.original {
  /* Colors */
  --background-primary: #f6dde0;
  --background-primary-rgb: 246, 221, 224;

  --background-secondary: #f2f1ed;
  --background-secondary-rgb: 242, 241, 237;

  --background-tertiary: #607e81;
  --background-tertiary-rgb: 96, 126, 129;

  /* Text Colors */
  --text-primary: #7e3942;
  --text-primary-rgb: 126, 57, 66, 1;

  --text-secondary: #607e81;
  --text-secondary-rgb: 96, 126, 129;

  --text-tertiary: #0a0a0a;
  --text-tertiary-rgb: 10, 10, 10;

  /* Button Colors */
  --button-text-primary: #f2f1ed;
  --button-text-primary-rgb: 242, 241, 237;

  --button-background-primary: #607e81;
  --button-background-primary-rgb: 96, 126, 129;

  --button-text-secondary: #f2f1ed;
  --button-text-secondary-rgb: 242, 241, 237;

  --button-background-secondary: #7e3942;
  --button-background-secondary-rgb: 126, 57, 66;

  /* ornament */
  --texture-1: url("https://katsudoto.id/media/template/exclusive/anin/original/bg-texture-1.png");
  --texture-2: url("https://katsudoto.id/media/template/exclusive/anin/original/bg-texture-2.png");
  --bg-cover: url("https://katsudoto.id/media/template/exclusive/anin/original/bg-cover.png");
  --cover-frame-mask: url("https://katsudoto.id/media/template/exclusive/anin/original/mask-cover.png");
  /* --ls-frame-mask: url("https://katsudoto.id/media/template/exclusive/anin/original/mask-ls.png"); */
  --photo-frame-mask: url("https://katsudoto.id/media/template/exclusive/anin/original/mask-photo.png");
  --clip-mask: url("https://katsudoto.id/media/template/exclusive/anin/original/mask-clip.png");
}

@media only screen and (max-width: 960px) {
  body.anin {
    overflow: hidden;
  }
}

@media (max-width: 360px) {
  body.anin {
    --heading-size: calc(8vw + 0.768px);
    --body-text-size: calc(4vw + 0.384px);
  }
}

@media (min-width: 560px) and (max-width: 960px) {
  body.anin {
    --heading-size: 56px;
    --body-text-size: 22px;
  }
}

@media (min-width: 961px) {
  body.anin {
    --heading-size: 52px;
    --body-text-size: 20px;
  }
}
@media (min-width: 1600px) {
  body.anin {
    --heading-size: 58px;
    --body-text-size: 20px;
  }
}

/* Fonts */
body.anin h1,
body.anin h2,
body.anin h3,
body.anin h4,
body.anin h5,
body.anin h6 {
  font-family: var(--heading-family);
  font-style: var(--heading-style);
  font-weight: var(--heading-weight);
  font-size: var(--heading-size);
  text-transform: var(--heading-lettercase);
  line-height: normal;
  color: var(--text-primary);
}
body.anin p {
  font-family: var(--body-text-family);
  font-style: var(--body-text-style);
  font-weight: 400;
  font-size: calc(var(--body-text-size));
  text-transform: var(--body-text-lettercase);
  line-height: normal;
  color: var(--text-tertiary);
}
.body.anin span {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  font-weight: 400;
}
body.anin sup {
  font-family: inherit;
  font-size: 0.5em;
  color: inherit;
  font-family: var(--heading-family-3);
}
body.anin font {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: inherit;
  font-style: inherit;
}

/* img */
body.anin img {
  max-width: 100%;
}

/* scrollbar */
body.anin::-webkit-scrollbar {
  width: 10px;
  height: 15px;
}
body.anin::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  border-width: 2px;
  background-color: var(--button-background-primary);
}

/* form on focus or active */
.form-control:focus,
.form-control:active {
  background: var(--light-clr);
  box-shadow: none;
  border-color: var(--button-background-primary);
}

/* ==============================
              Modal
      ============================== */
.modal-content .mde1 {
  border-bottom: 2px solid rgba(var(--background-primary-rgb), 0.5);
}
.modal-content .modal-caption {
  color: var(--text-secondary);
}
.modal-content .btn {
  font-family: var(--body-text-family);
  font-weight: 400;
  font-size: var(--body-text-size);

  background-color: rgba(var(--text-secondary-rgb), 0.05);
  color: var(--text-secondary);
}
.modal-content .btn:hover {
  background-color: rgba(var(--text-secondary-rgb), 0.1);
}
.modal-content .btn-wood {
  background-color: var(--button-background-primary);
  color: var(--button-text-primary);
}
.modal-content .btn-wood:hover {
  background-color: rgba(var(--button-background-primary-rgb), 0.7);
}

/* ============================================
    SIDE TO SIDE => PRIMARY PANE
============================================ */
.kat-page__side-to-side .primary-pane .inner {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.kat-page__side-to-side .primary-pane .inner::before {
  content: '';
  position: absolute;
  /* z-index: 1; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--background-secondary-rgb), 0.00) 0%, rgba(var(--background-secondary-rgb), 0.80) 100%);
}
.kat-page__side-to-side .primary-pane .inner .details {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 11% 7% 11% 7%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  z-index: 2;
}
.kat-page__side-to-side .primary-pane .inner .details h1 {
  font-size: calc(var(--heading-size) + var(--fs-extra-8) + 32px);
  color: var(--text-primary);

  padding: 0;
  margin-bottom: 10px;
  text-align: center;
}
.kat-page__side-to-side .primary-pane .inner .details p {
  font-size: calc(var(--body-text-size) + var(--fs-extra-1));
}
/* Highlight */
.kat-page__side-to-side .primary-pane .inner .highlight::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--background-secondary-rgb), 0.00) 0%, rgba(var(--background-secondary-rgb), 0.80) 100%);
}
.kat-page__side-to-side .primary-pane .inner .highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: var(--background-secondary); */
}
.kat-page__side-to-side .primary-pane .inner .highlight .preview-container {
  width: 100%;
  height: 100%;
  display: block;
}
.kat-page__side-to-side .primary-pane .inner .highlight .preview-container .slick-list {
  width: 100%!important;
  height: 100%!important;
}
.kat-page__side-to-side .primary-pane .inner .highlight .preview-container .slick-track {
  width: 100%!important;
  height: 100%!important;
  position: relative!important;
}
.kat-page__side-to-side .primary-pane .inner .highlight .preview-container .picture {
  width: 100%!important;
  height: 100%!important;
  top: 0;
  left: 0;
  position: absolute!important;
}
.kat-page__side-to-side .primary-pane .inner .highlight .preview-container .picture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1440px) {
  .kat-page__side-to-side .primary-pane .inner .details h1 {
    font-size: calc(var(--heading-size) + var(--fs-extra-8) + 12px);
    color: var(--text-primary);
  
    padding: 0;
    margin-bottom: 10px;
    text-align: center;
  }
}

/* ============================================
          SIDE TO SIDE
      ============================================ */
.kat-page__side-to-side {
  min-height: 480px;
  display: block;
  position: relative;
  height: 100%;
  overflow-x: hidden;
}
.kat-page__side-to-side,
.kat-page__side-to-side * {
  /* -webkit-overflow-scrolling: touch; */
  -webkit-overflow-scrolling: auto;
}

.kat-page__side-to-side .primary-pane {
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  width: 61%;

  background: var(--bg-cover) no-repeat;
    background-size: cover;
    background-position: center bottom;
}
.kat-page__side-to-side .secondary-pane {
  position: static;
  right: 0;
  width: 39%;
  margin-left: auto;
  background: var(--texture-1);
  background-size: 100% auto;
  background-position: center top;
}
.kat-page__side-to-side .secondary-pane::before {
  /* content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: var(--texture);
    background-repeat: repeat;
    background-size: 80%;
    opacity: 0.2; */
}

@media only screen and (min-width: 960px) and (max-width: 1400px) {
  .kat-page__side-to-side
    .secondary-pane
    section.video-gallery
    .inner
    .video-outer
    .video {
    width: 100%;
  }
}

@media only screen and (max-width: 960px) {
  .kat-page__side-to-side .primary-pane {
    position: relative;
    width: 100%;
    display: none;
  }
  .kat-page__side-to-side .secondary-pane {
    position: relative;
    width: 100%;
  }
}

/* =================================
              ORNAMENTS WRAPPER
      ================================= */
.ornaments-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.image-wrap {
  position: relative;
  width: 100%;
}
.image-wrap img {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.p-relative {
  position: relative;
}

/* ======================
    TOP COVER
====================== */
section.top-cover {
  background-color: var(--background-primary);
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: var(--body-height);
  z-index: 999999;
  top: 0;
  /* top: -120%; */
  left: 0;
  padding: 0;

  transition: all 1.8s;
  transition-timing-function: cubic-bezier(0.23, 0.56, 0.38, 0.78);
  -webkit-transition-timing-function: cubic-bezier(0.23, 0.56, 0.38, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.23, 0.56, 0.38, 0.78);
  -o-transition-timing-function: cubic-bezier(0.23, 0.56, 0.38, 0.78);

  display: flex;
  flex-direction: column;
  display: none;
}

@media only screen and (max-width: 960px) {
  section.top-cover {
    display: flex;
  }
}

section.top-cover.hide {
  top: -120%;
  bottom: 120%;
  pointer-events: none;
}

/* inner */
section.top-cover .inner {
  /* padding: 20px 0px; */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
}
section.top-cover .inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--background-secondary-rgb), 0.00) 0%, rgba(var(--background-secondary-rgb), 0.80) 100%);
  z-index: 1;
}

/* head */
section.top-cover .inner .head {
  z-index: 2;
  text-align: center;
  padding-top: 120px;
  margin-bottom: auto;
}
section.top-cover .inner .head h1 {
  font-size: calc(var(--heading-size));
  padding: 0px;
  margin: 0px auto;
  color: var(--text-quartiary);
}
section.top-cover .inner .head p {
  margin-bottom: 4px;
}

/* details */
section.top-cover .inner .details {
  text-align: center;
  padding: 80px 20px 10%;
  /* margin: auto; */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
section.top-cover .inner .details .opening-title{
  font-size: calc(var(--heading-size) + var(--fs-extra-8) + var(--fs-extra-2));
}
.orn-tc-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
}
.orn-tc-logo {
  width: 52%;
}
section.top-cover .inner .details p {
  color: var(--button-text-primary);
  font-family: var(--body-text-family);
}

/* Cover free text */
section.top-cover .cover-free-text {
  font-family: var(--body-text-family);
  font-weight: var(--body-text-weight);
  font-style: var(--body-text-style);
  font-size: var(--body-text-size);
  text-transform: var(--body-text-lettercase);
  color: var(--text-secondary);
}
section.top-cover .inner .details .link-wrap {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
section.top-cover .inner .details a.link {
  border: none;
  outline: none;

  background-color: var(--button-background-primary);
  color: var(--button-text-primary);

  font-size: var(--body-text-size);
  font-weight: 600;
  font-family: var(--body-text-family);
  line-height: 1.5;

  text-decoration: none;
  margin: 0px auto;
  padding: 12px 16px;
  border-radius: 25px;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
section.top-cover .inner .details a.link:hover {
  background-color: rgba(var(--button-background-secondary-rgb), 1);
}

/* Highlight */
section.top-cover .inner .highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-primary);
}
section.top-cover .inner .highlight .preview-container {
  width: 100%;
  height: 100%;
  display: block;
}
section.top-cover .inner .highlight .preview-container .slick-list {
  width: 100% !important;
  height: 100% !important;
}
section.top-cover .inner .highlight .preview-container .slick-track {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
section.top-cover .inner .highlight .preview-container .picture {
  width: 100% !important;
  height: 100% !important;
  top: 0;
  left: 0;
  position: absolute !important;
}
section.top-cover .inner .highlight .preview-container .picture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 560px) {
  section.top-cover .inner .head .logo-wrap {
    max-width: 160px;
    min-height: 160px;
  }
}


/* ======================
    COVER
====================== */
section.cover {
  position: relative;
  overflow: hidden;
  padding: 0px 0px 0%;
  display: flex;
  flex-direction: column;

  min-height: 100vh;
}

section.cover .background-cover{
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--bg-cover) var(--background-secondary) 50% / cover no-repeat;
}

section.cover .inner {
  width: 100%;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px;
  position: relative;
}

/* Cover Head */
section.cover .inner .head {
  width: 100%;
  text-align: center;
  padding: 40px 10px 16px;
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

section.cover .inner .head .prime-title {
  color: var(--text-primary);
  text-align: center;
  font-family: var(--heading-family);
  font-size: calc(var(--heading-size));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
section.cover .inner .head .top-text {
  color: var(--text-tertiary);
  text-align: center;
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

section.cover .inner .head .logo-wrap {
  width: 100%;
  height: 80px;
  /* margin-bottom: 12px; */
  position: relative;
  max-width: 30%;
  margin: 0 auto;
}
section.cover .inner .head .logo-wrap .logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
section.cover .inner .head .bottom-text {
  color: var(--text-tertiary);
  text-align: center;
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

/* Cover Body */
section.cover .inner .body {
  padding: 0px;
  margin: 23px auto;
  position: relative;
}
@media (max-width: 960px) {
    section.cover .inner .body.highlight.no_mobile {
        display: none;
    }
}
section.cover .inner .body .cover-frame {
  position: absolute;
  inset: 0% 0%;
  background: var(--secondary-clr);
  -webkit-mask-image: var(--cover-frame-mask);
  mask-image: var(--cover-frame-mask);
  -webkit-mask-size: 99% 99%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  top: 11%;
  left: 11%;
  bottom: 11%;
  right: 11%;
}
section.cover .inner .body .cover-picture {
  position: absolute;
  inset: 0 0 0 0;
}
section.cover .inner .body .cover-picture .slick-list {
  width: 100% !important;
  height: 100% !important;
}
section.cover .inner .body .cover-picture .slick-track {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
section.cover .inner .body .cover-picture .picture {
  width: 100% !important;
  height: 100% !important;
  top: 0;
  left: 0;
  position: absolute !important;
  background-color: var(--secondary-clr);
}
section.cover .inner .body .cover-picture .picture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* cover orn frame */
.cover .orn-cover-frame {
  position: relative;
  left: 50%;
  width: 92.32%;
  max-width: 500px;
  transform: translateX(-50%);
}
@media (min-width: 700px) {
  .cover .orn-cover-frame {
    max-width: 600px;
  }
}
@media (min-width: 961px) {
  section.cover .inner .body.highlight.no_desktop {
    display: none;
  }
}

/* Cover Foot */
section.cover .inner .foot {
  width: 100%;
  text-align: center;
  padding: 20px 10px;
  position: relative;
}
section.cover .inner .foot p {
  color: var(--text-primary);
  font-size: calc(var(--body-text-size));
  font-weight: 500;
}

section.cover .inner .foot .prime-title {
}

.orn-clip-bottom {
  position: absolute;
  bottom: 0;
  transform: translate(0px, 10px);
  

}
.orn-clip-wrap {

  width: 100%;
  position: absolute;
  inset: 0% 0%;
  background: var(--background-primary);
  -webkit-mask-image: var(--clip-mask);
  mask-image: var(--clip-mask);
  -webkit-mask-size: 99% 99%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  top: -9%;
  left: 50%;
  bottom: 12%;
  transform: translate(-50%,10%);
}
.orn-clip-top {
  position: absolute;
  top: 0;
  transform: translate(0px, -10px) scaleY(-1);
}

/* ==============================
        Quote
============================== */
.quote-wrap {
  position: relative;
  overflow: hidden;
  padding: 50px 24px 15%;
  z-index: 2;
}
.quote-wrap .quote {
  position: relative;
}
.quote-wrap .quotes-frame {
  display: flex;
  position: relative;
  text-align: center;
  width: 100%;
  padding: 0% 50px 15%;
  align-items: center;
  justify-content: center;
}
.quote-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 24px;
}
.qh-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 24px;
}
.quote .orn-quote-header {
  width: 93px;
  height: 93px;
}
.quote-header .quote-caption-header {
  color: var(--text-primary);
  text-align: center;
  font-family: var(--heading-family);
  font-size: calc(var(--body-text-size) + var(--fs-extra-4));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.quote-header .quote-header-arabic {
  color: var(--text-primary);
  text-align: center;
  font-family: var(--other-text-family);
  font-size: calc(var(--body-text-size) + var(--fs-extra-4));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.quotes-content::-webkit-scrollbar {
  display: none;
}
.quotes-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 300px;
  max-height: 500px;
}
.quote-caption-wrapper{
  /* max-height: 500px;
  overflow: hidden; */
}
.quote-caption-inner{
  /* overflow-y: scroll; */
  overflow-y: auto;
  max-height: 500px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.quote-caption-inner::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.quote-caption-inner {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.quotes-content .quote-caption {
  max-width: 190px;
  color: var(--text-primary);
  text-align: center;
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-weight: 500;
  line-height: 150%;
  padding-bottom: 12px;
}

@media (min-width: 768px) and (max-width: 960px) {
  .quote-wrap {
    min-height: 700px;
    padding-bottom: 3%;
  }
  .quotes-content .quote-caption {
    max-width: 270px;
  }
  .quotes-content {
    min-height: 480px;
  }
}

@media (min-width: 1440px) {
  .quotes-content .quote-caption {
    max-width: 250px;
  }
  .quote-wrap {
    padding-bottom: 5%;
  }
  .quotes-content {
    min-height: 400px;
  }
}
@media (min-width: 961px) {
  .quote-wrap {
    padding-bottom: 5%;
  }
}

/* ==============================
        Couple
============================== */
.couple-wrap {
  position: relative;
  overflow: hidden;
}
.couple-wrap .couple {
  padding: 5% 0px;
}

/* Couple Head */
.couple-head {
  text-align: center;
  padding: 0px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.orn-bismillah {
  margin: 0 auto 0.6em;
  width: 55%;
}
.couple-head .couple-title {
  font-family: var(--heading-family);
  font-size: var(--heading-size);
}
.couple-head .couple-description {
  padding: 0 16px;
  color: var(--text-tertiary);
}

.couple-head + .couple-body {
  margin-top: 15%;
}

/* Couple Body */
.couple-body {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.couple-body.bride-first {
  flex-direction: column-reverse;
}

.couple-info {
  width: 100%;
  position: relative;
  text-align: right;
  /* margin-top: 2em; */
}
.couple-info.bride {
  /* margin-top: 3em; */
}

/* Couple Preview */
.couple-preview {
  display: flex;
  position: relative;
  margin-bottom: 2%;
}
.couple-info.bride .couple-preview {
  transform: scaleX(-1);
}

.couple-frame {
  position: relative;
  width: calc(100% - 10px);
  /* max-width: 320px; */
  height: auto;
  margin: 0 auto;
}
.couple-frame .img-couple-frame {
  transform: scaleX(-1);
}

.couple-picture-wrap {
  position: absolute;
  top: 19.1%;
  left: 50%;
  right: 0px;
  bottom: 14.2%;
  width: 60%;
  height: auto;
  transform: translate(-50%, 0%);
  -webkit-mask-image: var(--cover-mask);
  mask-image: var(--cover-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.couple-info.bride .couple-picture-wrap {
  transform: scaleX(-1) translate(50%, 0%);
}
.fa-instagram {
  color: #616161;
}

.couple-picture {
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  background-color: var(--secondary-clr);
  border-radius: 50%;
}
.couple-picture .img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.couple-picture .img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 100%;
}

/* Couple Details */
.couple-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  text-align: center;
}

.couple-details .couple-name {
  font-family: var(--heading-family);
  font-size: calc(var(--heading-size));
  color: var(--text-primary);
}
.couple-details .couple-parents {
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  color: var(--text-tertiary);
}
.couple-details .couple-bio {
  color: var(--text-primary);
  margin-bottom: 14px;
}

.couple-link-wrap {
  display: flex;
  justify-content: center;
}
.couple-info.bride .couple-link-wrap {
  justify-content: center;
}

.couple-link {
  display: flex;
  align-items: center;
  padding: 6px 0;
  gap: 8px;
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-style: normal;
  text-decoration: none;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--button-background-primary);
  transition: all 0.25s ease-in-out;
}
.couple-link:hover {
  border-bottom: 1px solid rgba(var(--button-background-primary-rgb), 0.8);
}

/* Separator */
.separator-wrap {
  width: 100%;
  position: relative;
  padding: 0px;
  /* margin: 80px auto; */
  margin: 10% auto 15%;
}
.separator-wrap .separator {
  display: flex;
}
.separator-wrap .separator .couple-separator {
  font-family: var(--heading-family);
  font-size: calc(var(--heading-size) + 4px);
  margin: auto;
  color: var(--text-primary);
}

@media (min-width: 560px) and (max-width: 960px) {
  .couple-frame {
    max-width: 450px;
  }
  .couple-details {
    margin-top: 5%;
  }
}

@media (min-width: 1200px) {
  .couple-frame {
    max-width: 400px;
  }
}

/* ==============================
        Love Story
============================== */
section.love-story {
  position: relative;
  overflow: hidden;
  padding: 5% 0px 5%;
  background: transparent;
}

/* inner */
section.love-story .story-inner {
  position: relative;
  z-index: 2;
}

/* head */
.story-inner .story-head {
  text-align: center;
  margin-bottom: 24px;
  padding: 0 71px;
}
.story-head .story-title {
}

/* body */
.story-body {
  max-width: 600px;
  margin: 0 auto;
}

/* preview */
.story__slider-preview {
}

/* caption wrap */
.story__slider-caption-wrap {
  position: relative;
  /* margin-bottom: 16px; */
  /* padding: 16px 0px; */
}

/* caption */
.story__slider-caption {
}

/* dots */
.story__slider-dots {
  display: flex;
  justify-content: center;
}
.story__slider-dots > ul {
  display: flex;
  align-items: center;
  gap: 8px;
}
.story__slider-dots > ul > li {
}
.story__slider-dots > ul > li > button {
  display: block;
  border: none;
  outline: none;
  box-shadow: none;
  width: 8px;
  height: 8px;
  border-radius: 16px;
  font-size: 0px;
  background: rgba(var(--background-secondary-rgb), 0.8);
  cursor: pointer;
  transition-duration: 0.2s;
  transition-property: width, background;

  border: #607e81 solid 1px;
}
.story__slider-dots > ul > li.slick-active > button {
  background: var(--button-background-primary);
}

/* story preview */
.story-body .story-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding-top: 5%;
}
.story-preview .story-picture-wrapper {
  position: relative;
  display: block;
  margin: 0px auto 7%;
  /* padding: 8px; */
  width: 92.31%;
  /* height: 220px; */
  border-radius: 24px;
  /* overflow: hidden; */
}
.story-preview .story-picture > a {
}
.story-preview .story-picture img {
  display: block;
  /* min-height: 238px; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
}

.story-preview .story-sub-title {
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  color: var(--text-secondary);
  font-weight: 700;
  line-height: normal;
  text-align: center;
  margin: 0px auto;
  width: 280px;
}

/* details */
.story-body .story-details {
  padding: 8px 55px;
  text-align: center;
  max-width: 460px;
  margin: 0px auto;
}
.story-details .story-caption {
  color: var(--text-tertiary);
  font-size: var(--body-text-size);
  font-weight: var(--body-text-weight);
  line-height: normal;
  border-radius: 16px;
  text-align: center;
}

.orn-story {
  width: 50%;
  margin: 0 auto;
}
.orn-story .image-wrap .orn-story-svg path {
  fill: var(--text-primary);
}

.ls-img-content {
  position: absolute;

  border-radius: 6px;
  border: 3px solid #be955d;

  width: 60%;
  height: 70% ;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 700px) {
  .story-preview .story-picture {
  }
  .story-preview .story-sub-title {
    width: 350px;
  }
}

/* ==============================
        Galeri
============================== */
.photo-wrap {
  position: relative;
  overflow: hidden;
  padding: 5% 0 0%;
}
.photo-wrap .photo-inner {
  padding: 0px 0px 40px;
  position: relative;
}

/* Head */
.photo-inner .photo-head {
  text-align: center;
  padding: 20px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.photo-head .photo-title {
  font-family: var(--heading-family);
  font-size: calc(var(--heading-size));

  color: var(--text-primary);
}
.photo-head .photo-caption {
  font-family: var(--body-text-family);
  color: var(--text-tertiary);
  /* margin-top: 15px; */
  font-size: var(--body-text-size);
}

/* Body */
.photo-inner .photo-body {
  /* max-width: 600px; */
  margin: 0 auto;
}

/* Photo Nav Wrap */
.photo-body .photo-nav-wrap {
  position: relative;
  padding: 0 0px;

  max-width: 600px;
  margin: 0 auto 4px;
}

.photo-nav-wrap .photo-nav {
  position: relative;
}
.photo-nav .slick-list {
}
.photo-nav .photo-item {
  /* padding: 0px 7.5px; */
}
.photo-nav .photo-img-wrap {
  width: 100%;
  height: 100% !important;
  position: absolute;
  top: 0;
}
.photo-item-inner{
  position: relative;
}
.photo-nav .photo-img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Photo Slider Wrap */
.photo-body .photo-slider-wrap {
  position: relative;
  padding: 0 3%;
}

.photo-slider-wrap .photo-slider {
  position: relative;
}
.photo-slider .slick-list {
}
.photo-slider .photo-item {
  padding: 0px 7.5px;
}
.photo-slider .photo-img-wrap {
  width: auto;
  height: 150px;
}

.photo-slider .photo-img {
  width: auto;
  min-width: 110px;
  height: 100%;
  border-radius: 20px;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Arrow */
.photo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background-color: transparent;
  padding: 10px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.25s ease-in-out;
}
.photo-arrow:hover {
  opacity: 1;
}
.photo-arrow.prev {
  left: 10px;
}
.photo-arrow.next {
  right: 10px;
}
.photo-arrow.slick-disabled {
  display: none !important;
}
.photo-arrow svg {
  width: 12px;
  height: auto;
  display: block;
}
.photo-arrow svg path {
  stroke: #ffffff;
}

/* orn gallery */
.photo-wrap .gallery-leaves {
  position: absolute;
  width: 100%;
  height: 120px;
  background-image: var(--orn-daun);
  background-size: contain;
  background-repeat: no-repeat;
}
.photo-wrap .gallery-leaves.left {
  top: 0px;
  left: -62px;
  transform: scaleX(1);
  background-position: 0 0;
  animation: movebounce-galeri-kiri 10s ease-in-out infinite alternate;
}
.photo-wrap .gallery-leaves.right {
  top: 0px;
  right: -78px;
  transform: rotate(0.5turn);
  background-position: top left;
  animation: movebounce-galeri-kanan 10s ease-in-out infinite alternate;
  /* background-color: aqua; */
}

.photo-link {
  position: absolute;
  inset: 0% 0%;
  background: var(--secondary-clr);
  -webkit-mask-image: var(--photo-frame-mask);
  mask-image: var(--photo-frame-mask);
  -webkit-mask-size: 99% 99%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  top: 7%;
  left: 13%;
  bottom: 9%;
  right: 13%;
}

/* animasi galeri */
@keyframes movebounce-galeri-kiri {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes movebounce-galeri-kanan {
  0% {
    transform: translateY(0) rotate(0.5turn);
  }
  50% {
    transform: translateY(-30px) rotate(0.5turn);
  }
  100% {
    transform: translateY(0px) rotate(0.5turn);
  }
}

@media screen and (min-width: 680px) and (max-width: 960px) {
}

@media screen and (min-width: 1440px) {
  .photo-slider .photo-img-wrap {
    height: 200px;
  }
}

/* ==============================
      Video
============================== */
.video-wrap {
  position: relative;
  overflow: hidden;
}

.video-wrap .video-inner {
  padding: 5% 0px 5%;
}

.video-inner .video-head {
  position: relative;
  padding: 20px 24px 27px;
  text-align: center;
}
.video-head .video-title {
  font-family: var(--heading-family);
  font-size: calc(var(--heading-size));

  color: var(--text-primary);
}
.video-head .video-description {
  font-family: var(--body-text-family);
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 8px;
}

.video-inner .video-body {
  position: relative;
}

.video-body .video-lists {
}
.video-lists .video-box {
  position: relative;
  padding: 20px;
  text-align: center;
}

.video-box .video-preview-wrap {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
}
.video-box .video-preview {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.video-box .video-preview .video-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.video-box .video-preview .video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  outline: none;
  background-color: transparent;
  overflow: hidden;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.25s ease-in-out;
}
.video-box .video-preview .video-play-btn:hover {
  opacity: 1;
}
.video-box .video-preview .video-play-btn > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.video-box .video-preview .video-play-btn > svg > path {
  fill: var(--primary-clr);
}

.video-box .video-caption-wrap {
  margin-top: 15px;
}
.video-caption-wrap .video-caption {
  font-size: calc(var(--body-text-size));
  font-weight: 600;
  color: var(--text-primary);
}
@media screen and (min-width: 680px) and (max-width: 960px) {
}

@media screen and (min-width: 1440px) {
}

/* ==============================
        Save The Date
============================== */
.save-date-wrap {
  position: relative;
  overflow: hidden;
  padding: 20% 0px 10%;
  margin: 0 auto;
  background-color: var(--background-secondary);
}
.save-date-wrap::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0;
  background: var(--texture-2);
  background-size: 100% auto;
  opacity: .5;
}
.save-date-wrap .save-date-frame {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  margin-top: 26px;
}

.save-date-wrap .save-date {
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  max-width: 250px;
  margin: 0px auto;
  padding: 20px 0px;
  position: absolute;
  z-index: 1;
}

/* Save Date Head */
.save-date-head {
  padding: 0px 10%;
  text-align: center;
  position: relative;
}
.save-date-wrap .save-date-title {
  font-family: var(--heading-family);
  color: var(--text-secondary);
  text-align: center;
  font-size: calc(var(--heading-size));

  /* margin-bottom: 20px; */
}
.save-date-head .save-date-event {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size));
  color: var(--text-primary);
  margin-top: 5px;
  letter-spacing: 3px;
}

/* Save Date Body */
.save-date-body {
  position: relative;
}

/* Countdown */
.countdown {
  padding: 0px 0px 10px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.countdown .count-item {
  text-align: center;
  padding: 16px 0px;
  width: 85px;
}
.count-item .count-num {
  font-family: var(--heading-family);
  font-size: calc(var(--heading-size));
  color: var(--text-secondary);
  font-style: normal;
}
.count-item .count-text {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size));
  font-style: normal;
  color: var(--text-tertiary);
}

/* Add To Calendar */
.add-to-calendar-wrap {
  display: flex;
  flex-direction: column;
  /* padding: 20px 0px; */
  margin-top: 6%;
}
.add-to-calendar {
  padding: 12px 16px;
  margin: 0px auto;
  border-radius: 999px;
  min-width: 150px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  text-decoration: none;
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size) + 0px);
  font-weight: 500;
  background-color: var(--button-background-primary);
  border: none;
  color: var(--button-text-primary);
  transition: all 0.25s ease-in-out;
}
.add-to-calendar:hover {
  background-color: rgba(var(--button-background-secondary-rgb), 1);
}

@media (min-width: 700px) and (max-width: 961px) {
  .countdown .count-item {
    width: 95px;
  }
  .save-date-wrap {
    padding-top: 20%;
  }
}

@media (min-width: 1440px) {
  .save-date-wrap .save-date {
    /* margin: 45px auto; */
  }
  .countdown .count-item {
    width: 95px;
  }
}

/* ==============================
        Agenda
============================== */
.agenda-wrap {
  position: relative;
  overflow: hidden;
}
.agenda-inner {
  padding: 40px 0px 24%;
}

/* head */
.agenda-head {
  padding: 20px 24px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agenda-head .agenda-title {
}
.agenda-head .agenda-description {
}

/* body */
.agenda-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 20px;
}

/* Event */
.event-item {
  margin: 0px auto 21%;
  position: relative;
}

/* event head */
.event-head {
  /* padding: 20px 10px; */
  text-align: center;
  border-radius: 12px;
}
.event-head .event-day {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size));
  line-height: 150%;
}
.event-head .event-date {
  font-size: calc(var(--heading-size));
  font-weight: 500;
  line-height: normal;
  color: var(--text-primary);
}
.event-head .event-date > sup {
  margin-left: 5px;
}
.event-head .event-description {
  margin-top: 12px;
}

/* event content */
.event-content {
  position: relative;
  width: calc(100% - 120px);
  min-width: 250px;
  max-width: 520px;
  min-height: 600px;
  margin: 25% auto 0px;
  padding: 35% 0px 30%;
  border-radius: 200px;
  background-color: transparent;

  display: flex;
  flex-direction: column;
  gap: 40px;
}
.event-content::before {
  content: "";
  width: 120%;
  position: absolute;
  top: 50%;
  left: 50%;
  /* height: 101%; */
  height: calc(100% - 85px);
  background-color: var(--background-secondary);
  transform: translate(-50%, -50%);
  /* border-radius: 130px 130px 5% 5%; */
  border-radius: 60px 60px 5% 5%;
  /* border-radius: 5%; */
}
.plt{
  position: relative;
  width: 100%;
  display: none;
}
.event-content .orn-pillar .pillar-top .plt .plt-inner{
  content: '';
  position: absolute;
  width: 79%;
  background: var(--background-primary);
  height: 60px;
  top: 0;
  transform: translate(-50%,14%);
  left: 50%;
  opacity: 1;  
  border-radius: 50% 50% 0% 0%;
  overflow: hidden;
}
.event-content .orn-pillar .pillar-top .plt .plt-inner::before{
  content: '';
  position: absolute;
  width: 100%;
  background: var(--texture-1);
  height: 60px;
  top: 0;
  transform: translate(-50%,0%);
  left: 50%;
  opacity: 1;
}

@media (min-width: 561px) {
  .event-content .orn-pillar .pillar-top .plt .plt-inner{
    content: '';
    position: absolute;
    width: 81%;
    background: var(--background-primary);
    height: 20px;
    top: 0%;
    transform: translate(-50%,307%);
    left: 50%;
  }
  .event-content .orn-pillar .pillar-top .plt .plt-inner::before{
    content: '';
    position: absolute;
    width: 100%;
    background: var(--texture-1);
    height: 80px;
    top: 0;
    transform: translate(-50%,0%);
    left: 50%;
  }
  .agenda-inner {
    padding: 40px 0px 5%;
  }
  .event-content {
    /* width: 100%; */
    min-width: 400px;
  }
  /* .event-content::before {
    content: "";
    width: 120%;
    position: absolute;
    height: 100%;
    background-color: var(--background-secondary);
    left: 50%;
    transform: translate(-50%, -48%);
    top: 50%;
    border-radius: 130px 130px 5% 5%;
  } */
}

@media (min-width: 768px) {
  .event-content::before {
    height: calc(100% - 115px);
    border-radius: 90px 90px 5% 5%; 
  }
}

/* center content child */
.event-content > .activity-wrap {
  margin: auto;
}
.event-content > .event-details {
  margin: auto;
}

/* Activity */
.activity-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  z-index: 1;
  padding: 0 20px;
}
.activity-wrap.same-location {
}
.activity-wrap.same-location .activity-item {
}
.activity-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* activity head */
.activity-head {
  padding: 0px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* .activity-head .activity-icon {
  width: 60px;
  height: 60px;
  display: block;
  object-fit: contain;
  object-position: center;
} */
.activity-head svg.activity-icon {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0px auto 12px;
}
.activity-head svg.activity-icon path {
  fill: var(--text-secondary);
}
.activity-head .activity-title {
  font-size: calc(var(--body-text-size) + var(--fs-extra-2));
  color: var(--text-secondary);
}
.activity-head .activity-description {
  font-size: calc(var(--body-text-size));
}
.activity-head .activity-time {
  font-size: calc(var(--body-text-size));
  font-weight: 700;
  line-height: 150%;
  color: var(--text-secondary);
}

/* Agenda Details */
.event-details,
.activity-details {
  padding: 0px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-details .event-hall,
.activity-details .activity-hall {
  font-size: calc(var(--body-text-size));
  color: var(--text-secondary);
  font-weight: 700;
  line-height: 150%;
}
.event-details .event-address,
.activity-details .activity-address {
  font-size: calc(var(--body-text-size));
  color: var(--text-tertiary);
  font-weight: 500;
  line-height: 150%;
}
.event-details .event-city,
.activity-details .activity-city {
  font-size: calc(var(--body-text-size));
  color: var(--text-tertiary);
  font-weight: 500;
  line-height: 150%;
}
.event-link-wrap,
.activity-link-wrap {
  display: flex;
  justify-content: center;
}
.event-link,
.activity-link {
  border: none;
  outline: none;
  text-decoration: none;
  padding: 6px 0px;

  border-bottom: 1px solid var(--button-background-primary);

  color: var(--text-secondary);

  font-family: var(--body-text-family);
  font-weight: 500;
  font-size: var(--body-text-size);
  line-height: 1.5;

  transition: all 0.25s ease-in-out;
}
.event-link:hover,
.activity-link:hover {
  background-color: var(--button-text-primary);
  color: var(--button-background-primary);
}

/* Agenda */
.event-content .orn-pillar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  /* height: 108%; */
  height: calc(100% + 0px);
  margin-top: -15px;
  /* transform: translate(-50%, -51%); */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}

.event-content .orn-pillar .pillar-top {
  margin-top: -11px;
}
.event-content .orn-pillar .pillar-center {
  flex-grow: 1;
  display: flex;
}
.event-content .orn-pillar .pillar-center .image-wrap {
  margin: -5px 0px;
  flex-grow: 1;
}
.event-content .orn-pillar .pillar-center .image-wrap img {
  width: 100%;
  height: 100%;
  background-repeat: repeat-y;
}
.event-content .orn-pillar .pillar-bottom {
  margin-top: auto;
  margin-bottom: 15px;
  transform: scaleY(-1);
}

.event-head-wrap {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.event-head-wrap .item-2-event {
  padding: 0 8px;

  display: flex;
  flex-direction: column;
  gap: 4px;
}
.event-date {
  color: var(--text-primary);
  font-family: var(--heading-family);
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}
.event-year {
  color: var(--text-tertiary);
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}

.item-x-event {
  display: flex;
  padding: 4px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;

  border-top: 1px solid var(--text-primary);
  border-bottom: 1px solid var(--text-primary);

  max-width: 124px;
}

.event-day {
  color: var(--text-tertiary);
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}
.event-month {
  color: var(--text-tertiary);
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}

/* ==============================
?        RSVP
============================== */
.rsvp-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 5% 40px 20%;
  background-image: var(--texture-forest);
  background-size: cover;
  background-repeat: repeat;
}

.rsvp-inner {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px; */
}

/* Head */
.rsvp-head {
  padding: 0px 24px;
  border-radius: 4px 4px 0px 0px;
  text-align: center;
}
.rsvp-head .rsvp-title {
  font-family: var(--heading-family);
  font-size: calc(var(--heading-size));
  color: var(--text-primary);

  padding: 24px 0px;
}

.rsvp-info{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
  align-items: center;
}

.rsvp-body-wrap {
  font-family: var(--heading-family);
  font-size: calc(var(--heading-size) + 8px);
  color: var(--text-primary);
  padding: 24px 0px;
  margin-bottom: 10px;
}
.rsvp-body {
  position: relative;
  padding: 60px 24px;
  border-radius: 24px;
  background: var(--background-secondary);
  border: 1px solid var(--text-secondary);
}

/* RSVP Status */
.rsvp-status-wrap {
  margin: 0px auto 32px;
}
.rsvp-status-head {
  text-align: center;
}
.rsvp-status-head .rsvp-status-caption {
  color: var(--text-tertiary);
}

/* RSVP Status Body */
.rsvp-status-body {
  margin-top: 5px;
}
.rsvp-status-wrap input[name="rsvp_status"] {
  display: none;
}
.rsvp-status-wrap input[name="rsvp_status"]:checked + .rsvp-confirm-btn.going {

  min-width: 50%;

    border: 1px solid var(--button-background-primary);
  background-color: var(--button-background-primary);
  color: var(--button-text-secondary);
}
.rsvp-status-wrap
  input[name="rsvp_status"]:checked
  + .rsvp-confirm-btn.not-going {

    border: 1px solid var(--button-background-primary);
  background-color: var(--button-background-primary);
  color: var(--button-text-secondary);
}

/* RSVP Amount */
.rsvp-amount-wrap {
  margin: 10px 0;
}

.rsvp-amount-head {
  text-align: center;
}
.rsvp-amount-head .rsvp-amount-caption {
  color: var(--text-tertiary);
}
.rsvp-session-wrap .session-caption-wrap .caption {
  font-family: var(--body-text-family);
  font-style: var(--body-text-style);
  font-weight: var(--body-text-weight);
  font-size: var(--body-text-size);
  text-transform: var(--body-text-lettercase);
  line-height: 1;
  color: var(--text-tertiary);
  text-align: center;
}

.rsvp-amount-body {
}

/* Amount Controller */
.rsvp-amount-controller-wrap {
  margin-top: 12px;
}
.rsvp-amount-controller {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 20px;
}

.rsvp-amount-controller .toggle-btn {
  background-color: transparent;
  border: 1px solid transparent;
  outline: none;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
.rsvp-amount-controller .toggle-icon {
  width: 12px;
  height: auto;
  display: block;
}
.rsvp-amount-controller .toggle-icon path {
  transition: all 0.25s ease-in-out;
  stroke: var(--dark-clr);
}

.rsvp-amount-controller .toggle-btn.plus {
  background-color: var(--button-background-primary);
  border-color: var(--button-background-primary);
}
.rsvp-amount-controller .toggle-btn.plus .toggle-icon path {
  stroke: var(--button-text-primary);
}
.rsvp-amount-controller .toggle-btn.plus:hover {
  background-color: rgba(var(--button-background-primary-rgb), 0.8);
  color: var(--text-secondary);
}
.rsvp-amount-controller .toggle-btn.plus:hover .toggle-icon path {
  stroke: var(--button-text-primary);
}

.rsvp-amount-controller .toggle-btn.minus {
  border-color: var(--button-background-primary);
}
.rsvp-amount-controller .toggle-btn.minus .toggle-icon path {
  stroke: var(--button-background-primary);
}
.rsvp-amount-controller .toggle-btn.minus:hover {
  border-color: rgba(var(--button-background-primary-rgb), 0.8);
}
.rsvp-amount-controller .toggle-btn.minus:hover .toggle-icon path {
  stroke: var(--button-background-primary);
}

.rsvp-amount-controller .input-wrap {
  width: 100%;
}

.form-control.group-guest,
.rsvp-plus-wrapper .form-control,
.rsvp-amount-controller .input-control {
  width: 100%;
  outline: none;
  text-align: center;
  border-radius: 100px;
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-weight: var(--body-text-weight);
  border: 1px solid var(--button-background-primary);
  background-color: transparent;
  color: var(--text-tertiary);
}

.rsvp-amount-controller .input-control {
  height: 40px;
  border: none;
  border-top: 1px solid var(--button-background-primary);
  border-bottom: 1px solid var(--button-background-primary);
  border-radius: 0px;
  pointer-events: none;
}

/* RSVP Confirm */
.rsvp-confirm-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  gap: 12px;
  margin-top: 20px;
}
.rsvp-plus-wrapper.active .rsvp-confirm-wrap {
  flex-direction: column;
}

.rsvp-confirm-wrap > label {
  display: block;
  text-align: center;
  flex-grow: 1;
  width: 100%;
}
.rsvp-confirm-btn:hover {
  background-color: var(--button-background-primary);
  color: var(--button-text-primary);
  border: 1px solid var(--button-background-primary);
}
.rsvp-confirm-btn {
  width: 100%;
  display: inline-block;
  padding: 12px;
  margin: 0px auto;
  border-radius: 20px;

  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-weight: var(--body-text-weight);
  line-height: 1;

  background-color: var(--button-background-secondary);
  color: var(--button-text-secondary);

  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.rsvp-session-btn,
.form-check-label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: var(--body-text-family);
  background-color: var(--button-background-primary);
  color: var(--button-text-secondary);
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--button-background-primary);
  color: var(--text-secondary);
}
.rsvp-session-btn:hover {
  /* background-color: rgba(var(--button-background-secondary-rgb), 0.8); */
  /* color: var(--button-text-secondary); */
}

.session-btn-wrap input[name="selected_event[]"]:checked + .rsvp-session-btn,
.session-btn-wrap input[name="selected_event_all"]:checked + .rsvp-session-btn,
.form-check-label:has(.form-check-input:checked),
.form-check-label:hover {
  border: 1px solid var(--button-background-primary);
  background-color: var(--button-background-primary);
  color: var(--button-text-secondary);
}

.rsvp-confirm-btn.going {

  background: transparent;

  border: 1px solid var(--button-background-primary);
  color: var(--text-secondary);
}
.rsvp-confirm-btn.going:hover {
  background-color: rgba(var(--button-background-primary-rgb), 0.8);
  color: var(--button-text-secondary);
}

.rsvp-confirm-btn.not-going {

  background: transparent;

  border: 1px solid var(--button-background-primary);
  color: var(--text-secondary);
}
.rsvp-confirm-btn.not-going:hover {
  background-color: var(--button-background-primary);
  color: var(--button-text-primary);
}

.rsvp-confirm-btn.confirm {
  border: 1px solid var(--button-background-primary);
  background-color: var(--button-background-primary);
  color: var(--button-text-secondary);
  min-height: 100%;
}
.rsvp-confirm-btn.confirm:hover {
  background-color: rgba(var(--button-background-secondary-rgb), 0.8);
  color: var(--button-text-secondary);
  border: 1px solid var(--button-background-secondary);
}

.rsvp-confirm-btn.download {
  background-color: var(--button-background-secondary);
  color: var(--button-text-secondary);
}
.rsvp-confirm-btn.download:hover {
  background-color: rgba(var(--button-background-secondary-rgb), 0.8);
  color: var(--button-text-secondary);
}

.rsvp-confirm-btn > i {
  font-size: 0.8em;
  margin-left: 5px;
}
/* End RSVP Confirm */

/* QR Card */
.rsvp-qrcard-wrap {
  padding: 20px 0;
  margin-top: 30px;
}
.rsvp-qrcard-img-wrap {
  margin-bottom: 30px;
}
.rsvp-qrcard-img {
  display: block;
  width: 100%;
  max-width: 240px;
  border-radius: 5px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.rsvp-qrcard-wrap + .rsvp-message-wrap {
  margin-top: 0;
}
/* End QR Card */

/* RSVP Message */
.rsvp-message-wrap {
  position: relative;
}
.rsvp-message-content {
  background-color: transparent;
  border-radius: 5px;
  padding-bottom: 20px;
  text-align: center;
}
.rsvp-message-wrap .rsvp-message-icon {
  width: 30px;
  height: auto;
  display: none;
  margin: 0 auto 20px;
}
.rsvp-message-wrap .rsvp-message-icon path {
  fill: var(--title-clr);
}
.rsvp-message-wrap .rsvp-message-title {
  font-size: calc(var(--heading-size));
  color: var(--text-primary);
  margin-bottom: 20px;
}
.rsvp-message-wrap .rsvp-message-caption {
  font-size: var(--body-text-size);
  color: var(--text-secondary);
}
/* End RSVP Message */

/* RSVP Change */
.rsvp-change-wrap {
}
/* End RSVP Change */

.general-qrcode {
  padding: 40px 20px 0;
}

@media (min-width: 560px) and (max-width: 960px) {
}

@media (min-width: 768px) {
  .rsvp-message-wrap .rsvp-message-title {
    padding: 30px 0;
  }
}
@media (min-width: 1200px) {
  .rsvp-message-wrap .rsvp-message-title {
    padding: 30px 0;
  }
}

/* ==============================
        Live & Insta Wrapper
============================== */
.live-ig_wrapper {
  background: var(--texture-2);
  background-color: var(--background-secondary);
  background-size: 100% auto;
  padding: 11% 0px 11%;
  position: relative;
  overflow: hidden;
}

/* ==============================
        Live Streaming
============================== */
section.live-streaming {
  /* padding: 11% 0px 30%; */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
section.live-streaming .inner {
  padding: 0px;
}

/* head */
section.live-streaming .inner .head {
  text-align: center;
  padding: 0px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
section.live-streaming .inner .head .orn-live-header {
  width: 143px;
  height: 162px;
}
section.live-streaming .inner .head .orn-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
section.live-streaming .inner .head h1 {
  font-size: calc(var(--heading-size));
  font-weight: var(--heading-weight);
  color: var(--text-secondary);
  padding: 0px;
  margin-bottom: 0px;
}
section.live-streaming .inner .head p {
  font-size: var(--body-text-size);
  font-style: var(--body-text-style);
  color: var(--text-tertiary);
  font-weight: 500;
}

/* body */
.live-streaming .inner .body {
  padding: 0;
}
.live-streaming .inner .body p {
  font-size: var(--body-text-size);
}

.live-streaming .inner .body p.meeting-text {
  font-size: calc(var(--body-text-size) + var(--fs-extra-1));
  font-weight: 500;
}
.live-streaming .inner .body > .streaming-info {
  position: relative;
  padding: 18px 24px 0px;
}
.live-streaming .inner .body > .streaming-info > div {
  padding: 0px;
}

.live-streaming .inner .body > .streaming-info > div.zoom-details {
  padding: 0px 20px;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 24px;
}
.live-streaming .inner .body > .streaming-info > div.zoom-details > div {
  margin: 0;
  flex-grow: 1;
  width: 100%;
}

.live-streaming .inner .body > .streaming-info > div > .preview {
  width: 70px;
}

.live-streaming .inner .body > .streaming-info > div > .preview.google-meet {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-secondary);
}
.live-streaming
  .inner
  .body
  > .streaming-info
  > div
  > .preview.google-meet
  > img {
  width: 62.5%;
  height: auto;
  border-radius: 0px;
}

.live-streaming .inner .body > .streaming-info > div > .preview,
.live-streaming .inner .body > .streaming-info > div > .preview > img {
  border-radius: 0px;
}

.live-streaming .inner .body > .streaming-info > div > .preview.wide {
  height: 200px;
}
.live-streaming .inner .body > .streaming-info > div > .preview.wide > img {
  object-fit: cover;
}

.live-streaming .inner .body > .streaming-info > div > .preview.wide.youtube {
  height: 192px;
  border-radius: 20px;
}

.live-streaming .inner .body > .streaming-info > div > .preview > .play-btn {
  width: 70px;
  height: 70px;
  font-size: 30px;
  color: var(--text-primary);
}

.live-streaming .inner .body > .streaming-info > div.link {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.live-streaming .inner .body > .streaming-info > div.link > a {
  border: none;
  outline: none;
  box-shadow: none;
  width: auto;
  min-width: 100px;
  border-radius: 20px;
  padding: 8px 16px;

  font-family: var(--body-text-family);
  font-weight: 500;
  font-size: var(--body-text-size);

  background-color: var(--button-background-primary);
  color: var(--button-text-primary);
}
.live-streaming .inner .body > .streaming-info > div.link > a:hover {
  background-color: rgba(var(--button-background-secondary-rgb), 1);
}

@media (min-width: 560px) and (max-width: 960px) {
  .live-streaming .inner .body > .streaming-info > div > .preview.wide {
    height: 320px;
  }
}

@media (min-width: 425px) {
  .live-streaming .inner .body > .streaming-info > div > .preview.wide.youtube {
    height: auto;
  }
  .live-streaming .inner .body > .streaming-info > div.link > a {
    padding: 12px 16px;
    font-size: calc(var(--body-text-size));
  }
}

@media (min-width: 1200px) {
  .live-streaming .inner .body > .streaming-info > div > .preview.wide {
    height: 320px;
  }
}

/* =====================================
?        INSTAGRAM FILTER
==================================== */
.ig-filter-wrap {
  position: relative;
  overflow: hidden;


  background-position: top left;
  background-size: 100% auto;
  background-repeat: repeat;
}
.ig-filter {
  position: relative;
  overflow: hidden;
  padding: 5% 0px 10%;
}

/* head */
.ig-filter-head {
  text-align: center;
  padding: 0px 20px;
  max-width: 500px;
  margin: 0 auto;
  margin-bottom: 24px;
}
.ig-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;
}
.ig-filter .orn-ig-header {
  width: 93px;
  height: 93px;
}
.ig-filter-head .ig-filter-title {
  margin-bottom: 0px;

  color: var(--text-secondary);
  text-align: center;
  font-family: var(--heading-family);
  font-size: var(--heading-size);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-bottom: 5px;
}
.ig-filter-head .ig-filter-caption {
  padding-top: 8px;
  font-family: var(--body-text-family);
  color: var(--text-tertiary);
  font-weight: 500;
}

/* body */
.ig-filter-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0px 30px 0px;
}

/* image */
.ig-filter-img-wrap {
  position: relative;
  width: calc(100% - 48px);
  max-width: 225px;
  margin: 0px auto;
  min-height: 400px;
  padding: 0px;

  display: flex;
  align-items: center;
}
.ig-filter-img {
  border-radius: 0;
  max-width: none;
  height: 100%;
  min-height: 400px;
  position: relative;
}

/* link */
.ig-filter-link-wrap {
  padding: 0px;
  display: flex;
  justify-content: center;
  max-width: 240px;
  width: 100%;
}
.ig-filter-link {
  border: none;
  outline: none;
  width: 100%;
  min-width: 100px;
  border-radius: 50px;
  padding: 12px 16px;

  background-color: var(--button-background-secondary);
  color: var(--button-text-secondary);

  font-family: var(--body-text-family);
  font-weight: 400;
  font-size: var(--body-text-size);
}
.ig-filter-link:hover {
  background-color: rgba(var(--button-background-secondary-rgb), 0.8);
}

@media (min-width: 560px) and (max-width: 960px) {
  .ig-filter-img-wrap {
    max-width: 340px;
  }
  .ig-filter-img {
    min-height: 600px;
  }
  .ig-filter-link-wrap{
    max-width: 340px;
  }
}

@media (min-width: 1200px) {
  .ig-filter-img-wrap {
    max-width: 340px;
  }
  .ig-filter-img {
    min-height: 600px;
  }
  .ig-filter-link-wrap{
    max-width: 340px;
  }
}

/* ==============================
        Wedding Gift
============================== */
.wedding-gift-wrap {
  position: relative;
  overflow: hidden;
}
.wedding-gift-innner-wrapper {
  position: relative;
  overflow: hidden;
  padding: 10% 24px 18%;
}
.wedding-gift-inner {
  position: relative;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
  z-index: 2;
}

#gift-orn-1, #gift-orn-2 {
  transition: opacity 0.5s ease;
  opacity: 1; /* Set default opacity to fully visible */
}


/* Head */
.wedding-gift-head {
  position: relative;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  max-width: 624px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wedding-gift-head .wedding-gift-title {
  /* padding-bottom: 10px; */
}
.wedding-gift-head .wedding-gift-description {
  font-size: var(--body-text-size);
  text-align: center;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Body */
.wedding-gift-body {
  position: relative;
}
.wedding-gift-body .wedding-gift-body-inner {
  position: relative;
  /* padding: 0% 24px; */
  border-radius: 999px;
  max-width: 650px;
  margin: 0 auto;
}
.wedding-gift-form {
  position: relative;
  /* border-radius: 10px; */
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
/* .wedding-gift-form::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75%;
  border-radius: 10px;
  box-shadow: var(--shadow-01);
} */

/* Wedding Gift Form */
#weddingGiftForm {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  max-width: 635px;
  margin: 0 auto;
}
#weddingGiftForm .wedding-gift-slide {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 100%;
  transition: all 0.4s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Details */
.wedding-gift-details {
}

.wedding-gift-sender-wrapper {
  background-color: var(--background-secondary);
  position: relative;
  padding: 24px;
  border-radius: 40px;
  border: 1px solid var(--background-tertiary);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Select Bank */
.wedding-gift-select-bank-wrap {
  /* padding-bottom: 24px; */
}
.wedding-gift-select-bank-wrap .selectize-control.form-control {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 8px;
}
.wedding-gift-select-bank-wrap .selectize-control.form-control:focus,
.wedding-gift-select-bank-wrap .selectize-control.form-control:active {
  /* background-color: var(--button-background-primary);
  color: var(--button-text-primary); */
}
.wedding-gift-select-bank-wrap
  .selectize-control.form-control
  .selectize-input {
  background: var(--button-background-primary);
  padding: 12px;
  border-radius: 999px;
  /* display: none; */
}
.wedding-gift-select-bank-wrap
  .selectize-control.form-control
  .selectize-input::after {
  border-top-color: var(--button-text-primary);
}
.wedding-gift-select-bank-wrap
  .selectize-control.form-control
  .select-bank__title {
  font-family: var(--body-text-family);
  color: var(--button-text-primary);
}

.wedding-gift-select-bank-wrap .selectize-dropdown.form-control {
  padding: 0;
  box-shadow: none;
  overflow: hidden;
  background-color: var(--button-background-primary) !important;
  color: var(--button-text-primary);
  border: none;
}
.wedding-gift-select-bank-wrap
  .selectize-dropdown.form-control
  .select-bank__title {
  color: var(--button-text-primary);
}
.wedding-gift-select-bank-wrap
  .selectize-dropdown.form-control
  .select-bank__credential {
  font-size: calc(var(--body-text-size) - var(--fs-extra-3));
  color: var(--button-text-primary);
}
.wedding-gift-select-bank-wrap .selectize-dropdown.form-control .item {
  background-color: var(--button-background-primary) !important;
  color: var(--button-text-primary) !important;
}
.wedding-gift-select-bank-wrap .selectize-dropdown.form-control .item:hover {
  background-color: var(--button-background-secondary) !important;
  color: var(--button-text-secondary) !important;
}
.wedding-gift-select-bank-wrap
  .selectize-dropdown.form-control
  .item:hover
  .select-bank__title,
.wedding-gift-select-bank-wrap
  .selectize-dropdown.form-control
  .item:hover
  .select-bank__credential {
  color: var(--button-text-secondary);
}

/* Bank */
.wedding-gift-bank-wrap {
}
.wedding-gift-bank-wrap .bank-item {
  padding: 0px;
  align-items: flex-start;
  display: none;
}
.wedding-gift-bank-wrap .bank-item.show {
  display: flex;
  align-items: center;
  gap: 32px;
}
/* Bank Detail */
.wedding-gift-bank-wrap .bank-detail {
  flex-grow: 1;
}
.wedding-gift-bank-wrap .bank-name {
  font-size: var(--body-text-size);
  font-family: var(--body-text-family);
  color: var(--text-primary);
  font-weight: 600;
}
.wedding-gift-bank-wrap .bank-detail > div {
  margin-top: 0.75em;
}

.wedding-gift-bank-wrap .bank-account-number-label {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size));
  color: var(--text-tertiary);
  display: block;
  font-weight: 500;
  margin-bottom: 0.25em;
}
.wedding-gift-bank-wrap .bank-account-number {
  font-size: var(--body-text-size);
  font-family: var(--body-text-family);
  cursor: pointer;
  display: inline-block;
  word-break: break-all;
  color: var(--text-primary);
  font-weight: 500;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wedding-gift-bank-wrap .bank-account-number > i {
  border: 1px solid var(--text-primary);
  border-radius: 4px;
  padding: 4px;
  font-size: var(--body-text-size);
  margin-left: 2.5em;
  color: var(--text-primary);
}

.wedding-gift-bank-wrap .bank-account-name-label {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size));
  color: var(--text-tertiary);
  display: block;
  font-weight: 500;
  margin-bottom: 0.25em;
}
.wedding-gift-bank-wrap .bank-account-name {
  font-size: var(--body-text-size);
  font-family: var(--body-text-family);
  word-break: break-all;
  color: var(--text-primary);
  font-weight: 500;
}

/* Bank Img Wrap */
.wedding-gift-bank-wrap .bank-img-wrap {
  padding: 10px;
  display: flex;
}
.wedding-gift-bank-wrap .bank-img-link {
  display: inline-block;
  vertical-align: top;
  margin: auto;
}
.wedding-gift-bank-wrap .bank-img {
  width: 80px;
  height: 80px;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Sender Data */
.wedding-gift-sender-data-wrap {
  /* padding: 24px 0; */
  /* margin-top: 30px; */
}
.wedding-gift-sender-data-wrap label {
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 150%;
}
.wedding-gift-sender-data-wrap .form-group {
  margin-top: 8px;
  margin-bottom: 0;
}
.wedding-gift-sender-data-wrap textarea.form-control {
  height: auto;
  min-height: 0;
  max-height: 250px;
}
.wedding-gift-sender-data-wrap .form-control {
  background-color: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--button-background-primary);
  padding: 12px 0px;
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  color: var(--text-secondary);
}
.wedding-gift-sender-data-wrap .form-control::placeholder {
  color: rgba(var(--text-secondary-rgb), 0.5);
}
.wedding-gift-sender-data-wrap .form-control:focus {
  outline: none !important;
}
.wedding-gift-sender-data-wrap .form-control:active {
}

/* Wedding Gift Page */
.wedding-gift-page-wrap {
  padding: 0;
}
.wedding-gift-page {
  width: 100%;
  display: block;
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-weight: var(--body-text-weight);
  line-height: normal;
  color: var(--button-text-primary);
  background-color: var(--button-background-primary);
  border: none;
  padding: 12px 25px;
  border-radius: 999px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  margin: 0 auto;
}
.wedding-gift-page:hover {
  background-color: rgba(var(--button-background-secondary-rgb), 1);
}

/* Wedding Gift Back Page */
.wedding-gift-back-page-wrap {
  /* padding: 20px 0; */
}
.wedding-gift-back-page {
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--button-background-primary);
  font-size: 28px;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
.wedding-gift-back-page:hover {
  color: rgba(var(--button-background-primary-rgb), 0.8);
}

/* Wedding Gift Picture */
.wedding-gift-picture {
  padding: 20px 11%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 0;
  opacity: 0;
}

.wedding-gift-upload-wrap {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 40px;
}
.wedding-gift-upload-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 2px dashed var(--text-primary);
  border-radius: 10px;
  background-color: transparent;
  pointer-events: none;
}

/* Wedding Gift Upload Description */
.wgu-description {
  text-align: center;
  padding: 20px;
  margin: 100px auto;
  display: none;
}
.wgu-description.show {
  display: block;
}
.wgu-description .wgu-icon {
  width: 120px;
  height: auto;
  opacity: 0.4;
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
}
.wgu-description .wgu-title {
  font-family: var(--body-text-family);
  color: var(--text-secondary);
}
.wgu-description .wgu-desc {
  font-family: var(--body-text-family);
  color: var(--text-secondary);
}

/* Wedding Gift Upload Image Wrap */
.wgu-img-wrap {
  display: none;
}
.wgu-img-wrap.show {
  display: block;
}
.wgu-img-wrap .wgu-img {
  width: 100%;
  height: auto;
  max-height: 500px;
  display: block;
  object-fit: cover;
  object-position: center;
}

[data-wgu-file] {
  cursor: pointer;
}

/* Wedding Gift Message */
.wedding-gift-message {
  padding: 50px 20px;
}

.wgs-head {
  padding: 10px 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wgs-head .wgs-spark {
  width: 30px;
  height: auto;
  display: block;
}
.wgs-head .wgs-spark .fill {
  fill: var(--button-background-primary);
}
.wgs-head .wgs-spark .stroke {
  stroke: var(--button-background-primary);
}
.wgs-head .wgs-spark.left {
  margin-right: 20px;
}
.wgs-head .wgs-spark.right {
  margin-left: 20px;
  transform: scaleY(-1);
}

.wgs-icon-wrap {
  width: 120px;
  height: 120px;
  background-color: var(--button-background-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.wgs-icon-wrap.circle {
  border-radius: 50%;
}
.wgs-icon {
  display: block;
  width: 60px;
  height: auto;
}
.wgs-icon .fill {
  fill: var(--light-clr);
}

.wgs-body {
  padding: 10px 0;
  text-align: center;
}
.wgs-body .wgs-title {
  margin-bottom: 0.25em;
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size) + 5px);
}
.wgs-description {
  color: rgba(var(--dark-rgb), 0.5);
}

@media (min-width: 768px) and (max-width: 960px) {
  .wedding-gift-body .wedding-gift-body-inner {
    /* padding: 25% 24px; */
  }
  .wedding-gift-inner {
    padding: 40px;
  }
}

@media (min-width: 1600px) {
  .wedding-gift-body .wedding-gift-body-inner {
    /* padding: 25% 24px; */
  }
}

/* =====================================
        KADO
==================================== */
.kado-wrapper {
  position: relative;
  width: 100%;
  margin-top: -1%;
  overflow: hidden;
}
.wedding-gifts-wrap {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  padding: 0px;
}
.wedding-gifts-wrap.no-gift .wedding-gifts-inner {
  border-top: 2px solid var(--text-primary);
  border-radius: 16px;
  padding: 10% 24px 10%;
}
.wedding-gifts-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2% 0px 23%;
  gap: 29px;
}
.wedding-gifts-head {
  padding: 0px 24px 24px;
}
.wedding-gifts-head .wedding-gifts-title {
}
.wedding-gifts-head .wedding-gifts-description {
  color: var(--text-tertiary);
}
.wedding-gifts-inner .wedding-gifts-label {
  color: var(--text-primary);
  font-size: calc(var(--body-text-size) + var(--fs-extra-2));
  text-align: left;
  padding: 0 24px;
  font-family: var(--heading-family);
}

.wedding-gifts-inner .wedding-gifts-body {
}

.wedding-gift-address-orn-wrapper {
  margin-bottom: 20%;
}
.wedding-gift-address-wrap {
  background-color: transparent;
  position: relative;
  overflow: hidden;
  padding: 15px;
  max-height: 700px;
}
.wedding-gift-address-wrap::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 91%;
  background-color: var(--background-secondary);
  border-radius: 999px 999px 0px 0px;
  backdrop-filter: blur(2px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
}
.wedding-gift-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wedding-gift-address-wrap .inner-address-info.name {
  text-transform: uppercase;
}
.wedding-gift-address-wrap .inner-address-info {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size));
  color: var(--text-primary);
  text-align: center;
}
.wedding-gift-address-wrap .inner-address-wrap .inner-address-info {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size));
  color: var(--text-primary);
  font-weight: 600;
}
.wedding-gift-address-wrap .wedding-gift-address-label {
  position: relative;
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size));
  color: var(--text-tertiary);
}

.wedding-gift-address-wrap .btn-hadiah-copy-2:hover {
  background-color: var(--button-background-secondary);
  color: var(--button-text-secondary);
}
.wedding-gift-address-wrap .btn-hadiah-copy-2 {
  border-radius: 4px;
  padding: 12px 16px;
  border-radius: 999px;
  background-color: var(--button-background-primary);
  color: var(--button-text-primary);
  font-family: var(--body-text-family);

  transition: all 0.25s ease-in-out;
}
.wedding-gift-address-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
  width: 100%;
}
.wedding-gifts-body .hadiah-wrap {
  display: unset;
  position: relative;
  padding: 0 24px;
}

.wedding-gifts-body .hadiah-wrap .hadiah-card-wrap {
  border-radius: 0px;
  padding-bottom: 0px;
  margin-right: 12px;

  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wedding-gifts-body .hadiah-card-wrap .hadiah-card {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--text-secondary);
  background-color: var(--background-secondary);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hadiah-card-wrap .img-wrap {
  display: flex;
  position: relative;
  width: 100%;
  min-height: 135px;
}
.hadiah-card-wrap .img-wrap .hadiah-img {
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  height: unset;

  border-radius: 12px;
border: 1px solid var(--background-tertiary);
}
.hadiah-card .hadiah-card-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0px;
}
.card-title-wrap .hadiah-card-title {
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-weight: 600;
  color: var(--text-primary) !important;
}
.hadiah-card-inner .hadiah-card-price {
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-weight: 600;
  color: var(--text-primary);
  padding: 0px;
}
.hadiah-card-inner .card-title-wrap {
  padding: 0px;
}
.hadiah-card-inner .hadiah-card-amount {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size) - 0px);
  font-weight: var(--body-text-weight);
  color: var(--text-tertiary);
  padding: 0px;
}
.hadiah-card-inner .hadiah-card-amount .total-amount {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size) - 0px);
  font-weight: var(--body-text-weight);
  color: var(--text-primary);
}
.hadiah-card-footer {
  padding: 0px;
  text-align: start;
}

.hadiah-card-footer .hadiah-card-button {
  width: 100%;
  border: none;
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  border-radius: 999px;
  font-weight: var(--body-text-weight);
  padding: 6px 16px;

  background-color: var(--button-background-secondary);
  color: var(--button-text-secondary);
  transition: all 0.25s ease-in-out;
}
.hadiah-card-footer .hadiah-card-button:hover {
  background-color: var(--button-background-primary);
  color: var(--button-text-primary);
}

/* MODAL KADO */
.kat__cropper-modal.kado {
}
.kat__cropper-modal.kado .modal-kado-header {
  display: flex;
  justify-content: space-between;
}
.modal-kado-header .title {
  font-family: var(--heading-family);
  font-size: var(--body-text-size);
  color: var(--text-primary);
}
.kat__cropper-modal.kado span,
.kat__cropper-modal.kado p {
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  color: var(--text-tertiary);
}

.buying-kado-btn {
  width: 100%;
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  border-radius: 8px;
  padding: 12px 20px;

  background-color: var(--button-background-primary);
  color: var(--button-text-primary);
  transition: all 0.25s ease-in-out;
}
.buying-kado-btn:hover {
  background-color: rgba(var(--button-background-primary-rgb), 0.8);
  color: var(--button-text-primary);
}
.confirm-kado-btn {
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  border-radius: 8px;
  padding: 12px 20px;

  background-color: var(--button-background-primary);
  color: var(--button-text-primary);
  transition: all 0.25s ease-in-out;
}

.kado-form-btn .kado-send-btn {
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  border-radius: 8px;
  padding: 12px 20px;

  background-color: var(--button-background-primary);
  color: var(--button-text-primary);
  transition: all 0.25s ease-in-out;
}
.confirm-kado-btn:hover {
  background-color: rgba(var(--button-background-primary-rgb), 0.8);
  color: var(--button-text-primary);
  border: 1px solid var(--background-primary);
}

/* gifts Nav */
.hadiah-wrap .slick-dots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 24px;
}
.hadiah-wrap .slick-dots li {
  flex-grow: 1;
  max-width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(var(--background-secondary-rgb), 0.5);
  transition: all 0.25s ease-in-out;
}
.hadiah-wrap .slick-dots li.slick-active {
  background-color: var(--background-secondary);
}
.hadiah-wrap .slick-dots li button {
  display: none;
}

@media (min-width: 768px) {
  .wedding-gift-address-wrapper {
  }
}

.kado_frame {
  position: relative;
}
.wedding-gift-address-content-wrap::-webkit-scrollbar {
  display: none;
}
.wedding-gift-address-content-wrap {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  padding: 25% 21% 20%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: 20%;
  gap: 16px;
}

.inner-address-info-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

.inner-address-wrap {
  display: block;
}
.wedding-gift-address-wrap .inner-address-info-title {
  color: var(--text-secondary);
  text-align: center;
  font-size: calc(var(--body-text-size) + var(--fs-extra-2));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

@media (min-width: 1440px) {
  .wedding-gifts-inner {
    padding: 2% 0px 33%;
  }
}

/* ======================
    PROTOCOL
====================== */
section.protocol {
  background-color: transparent;
  overflow: hidden;
}

/* Protocol 01 */
section.protocol.protocol-01 {
  background-color: transparent;
}
section.protocol.protocol-01 .inner .head {
  padding: 24px 16px 8px;
  background-color: transparent;
}
section.protocol.protocol-01 .inner .head h1 {
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  color: var(--text-secondary);
  line-height: normal;
  text-transform: capitalize;
}
section.protocol.protocol-01 .inner .head p {
  font-size: var(--body-text-size);
  color: var(--text-secondary);
  font-weight: var(--body-text-weight);
  margin-bottom: 12px;
}

.protocol.protocol-01 .inner .body {
  margin: 0px;
  padding: 20px 0px 40px;
}
.protocol.protocol-01 .inner .body .picture-outer {
  margin: 10px 20px 20px 20px;
}

/* Protocol 02 */
section.protocol.protocol-02 .inner .head .step-outer {
  background-color: transparent;
}

/* Protocol 03 */
section.protocol.protocol-03 {
  background: transparent;
}
section.protocol.protocol-03 .inner .head {
  padding: 24px 16px 8px;
  background-color: transparent;
}
section.protocol.protocol-03 .inner .head h1 {
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  color: var(--text-secondary);
  line-height: normal;
  text-transform: capitalize;
}
section.protocol.protocol-03 .inner .head p {
  font-size: var(--body-text-size);
  color: var(--text-tertiary);
  font-weight: var(--body-text-weight);
  margin-bottom: 12px;
}

.protocol.protocol-03 .inner .body {
  padding: 20px 0px 40px;
}
section.protocol.protocol-03 .inner .body .slider .content .text-01 {
  font-family: var(--body-text-family);
  font-weight: 500;
  font-size: calc(var(--body-text-size) + var(--fs-extra-3));
  text-transform: capitalize;
  color: var(--text-primary);
}
.protocol.protocol-03 .inner .body .slider_dots::before {
  border-color: var(--button-background-primary);
}
.protocol.protocol-03 .inner .body .slider_dots .slider_navigator {
  background-color: var(--button-background-primary);
}
.protocol.protocol-03
  .inner
  .body
  .slider_dots
  .slider_navigator.slick-current.slick-center {
  background-color: var(--button-background-primary);
}

/* Protocol 04 */
section.protocol-04 {
  position: relative;
  background-color: transparent;
  padding: 0% 0 10%;
}
section.protocol-04 .protocol-04-inner-wrap {
  position: relative;
  /* max-width: 390px; */
  margin: 0 auto;
}
section.protocol-04 .inner {
  position: relative;
  padding: 5% 0px 40px;
}
section.protocol-04 .inner .head {
  padding: 24px 24px 16px;  
  margin-bottom: 10%;
}
section.protocol-04 .inner .head .title {
  font-family: var(--heading-family);
  font-weight: var(--heading-weight);
  font-size: var(--heading-size);
  text-transform: var(--heading-lettercase);

  color: var(--text-secondary);
}

.kat-page__side-to-side .secondary-pane section.protocol-04 .protocol-item-wrap,
section.protocol-04 .protocol-item-wrap {
  max-width: 320px;
  position: relative;
}
section.protocol-04 .protocol-item-wrap .protocol-item {
  align-items: center;
  background: transparent;
  border-color: transparent;
  max-width: 110px;
  width: 100%;
  min-height: 130px;
  height: unset ;
  margin: 0;
  padding: 24px 12px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  gap: 22px;
}
section.protocol-04 .protocol-item-wrap .protocol-item .text-wrap {
  padding: 0px;
}

section.protocol-04 .protocol-item-wrap .protocol-item .icon-wrap {
  padding: 0px;
  border-radius: 0;
  width: 80px;
  flex-grow: unset;
}
section.protocol-04 .protocol-item-wrap .protocol-item .icon-wrap .icon {
  width: 50px;
  height: auto;
}
section.protocol-04 .protocol-item-wrap .protocol-item .icon-wrap .icon path {
  fill: var(--text-secondary);
}

section.protocol-04 .protocol-item-wrap .protocol-item .text-wrap .text {
  font-family: var(--body-text-family);
  font-weight: 500;
  font-size: var(--body-text-size);
}

@media (max-width: 360px) {
  section.protocol-04 .protocol-item-wrap {
    flex-direction: row;
  }
  section.protocol-04 .protocol-item-wrap .protocol-item {
  }
}
@media (max-width: 350px) {
  section.protocol-04 .protocol-item-wrap .protocol-item {
    max-width: 120px;
  }
}

@media (min-width: 768px) and (max-width: 960px) {
  section.protocol-04 .inner {
    padding: 40px 24px 10% 24px;
  }
  section.protocol-04 .protocol-04-inner-wrap {
  }
  section.protocol-04 .inner .head .title {
    transform: scale(0.8);
  }
  section.protocol-04 .protocol-item-wrap .protocol-item {
    max-width: 155px;
  }
  .kat-page__side-to-side
    .secondary-pane
    section.protocol-04
    .protocol-item-wrap,
  section.protocol-04 .protocol-item-wrap {
    max-width: 450px;
  }
}
@media (min-width: 1600px) {
  section.protocol-04 .inner {
    padding: 40px 24px 5% 24px;
  }
  section.protocol-04 .inner .head { 
    margin-bottom: 5%;
  }
}

/* ==============================
?        Wedding Wish
============================== */
.wedding-wish-wrap {
  position: relative;
  overflow: hidden;

  background-image: var(--texture-2);
  background-size: 100% auto;
  background-repeat: repeat;

  background-color: var(--background-secondary);
}

.wedding-wish-inner {
  position: relative;
  padding: 20% 24px 30%;
}

/* head */
.wedding-wish-head {
  text-align: center;
  padding-bottom: 24px;
}
.wedding-wish-head .wedding-wish-title {
  color: var(--text-secondary);
  text-align: center;
  font-family: var(--heading-family);
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  padding-bottom: 8px;
}
.wedding-wish-head .wedding-wish-description {
  color: var(--text-tertiary);
}

/* Body */
.wedding-wish-body {
  padding: 24px 0px;
}

/* Form */
.wedding-wish-form {
  padding-bottom: 32px;
  border-radius: 16px;
  padding: 16px;
  background-color: var(--background-primary);
  margin-bottom: 16px;
}

.wedding-wish-form .hide {
  display: none;
}
.wedding-wish-form .form-control {
  background-color: var(--background-secondary);
  border: none;
  border-radius: 8px;
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  line-height: 1.5;
  color: var(--text-tertiary);

  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
.wedding-wish-form .form-control::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(var(--text-secondary-rgb), 0.5);
}
.wedding-wish-form .form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(var(--text-secondary-rgb), 0.5);
}
.wedding-wish-form .form-control::-ms-input-placeholder {
  /* Microsoft Edge */
  color: rgba(var(--text-secondary-rgb), 0.5);
}

.wedding-wish-form .form-control:focus {
  /* border: 1px solid var(--text-primary); */
  box-shadow: none;
}
.wedding-wish-form textarea.form-control {
  min-height: 40px;
  max-height: 250px;
}
.wedding-wish-form .submit-comment {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 50px;
  outline: none;
  background-color: var(--button-background-secondary);
  color: var(--button-text-secondary);
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-weight: 600;
  line-height: 24px;
  transition: all 0.25s ease-in-out;
}
.wedding-wish-form .submit-comment:hover {
  background-color: rgba(var(--button-background-primary-rgb), 0.8);
}

/* comment box */
.comment-box-wrap {
  position: relative;
}
.comment-box-wrap .form-group {
  margin-bottom: 0;
}
.comment-box-wrap textarea.form-control {
  height: auto;
  min-height: 0;
}
.comment-box-wrap .submit-comment-wrap {
  position: absolute;
  top: 0;
  right: 0;
}
.comment-box-wrap.focus textarea.form-control {
  /* padding-bottom: 50px; */
}
.comment-box-wrap.focus .submit-comment-wrap {
  top: auto;
  bottom: 0;
}

/* Comment Wrap */
.comment-wrap {
  display: none;
}
.comment-wrap.show {
  display: block;
}
.comment-item {
  border-radius: 8px;
  background-color: rgba(var(--background-primary-rgb), 0.8);
  padding: 12px;
  margin-bottom: 8px;
}
.comment-item:last-of-type {
  margin-bottom: 0px;
}

.comment-head {
  position: relative;
  margin-bottom: 8px;
}

.comment-head .comment-name {
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-weight: 600;
  color: var(--text-primary);
}
.comment-head .comment-name > i {
  font-size: 0.7em;
}
.comment-head .comment-date {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size));
  font-weight: 600;
  display: block;
  margin-top: 8px;
  color: rgba(var(--text-tertiary-rgb), 0.5);
}

.comment-head .delete-comment {
  position: absolute;
  top: 0px;
  right: 0px;
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
  color: var(--button-background-secondary);
  transition: color 0.25s ease-in-out;
}
.comment-head .delete-comment:hover {
  color: rgba(var(--button-background-secondary-rgb), 0.8);
}

.comment-body {
}
.comment-body .comment-caption {
  font-family: var(--body-text-family);
  font-size: calc(var(--body-text-size));
  line-height: 150%;
  color: var(--text-tertiary);
}

/* More Comment */
.more-comment-wrap {
  padding: 20px 0px 30px;
  display: none;
  text-align: center;
}
.more-comment-wrap.show {
  display: block;
}

#moreComment {
  border: none;
  outline: none;
  width: 100%;
  display: block;
  padding: 12px 16px;
  margin: 0 auto;
  border-radius: 50px;
  text-decoration: none;
  background-color: var(--button-background-primary);
  color: var(--button-text-primary);
  font-family: var(--body-text-family);
  font-size: var(--body-text-size);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
#moreComment:hover {
  background-color: rgba(var(--button-background-primary-rgb), 0.8);
}

@media (min-width: 560px) and (max-width: 960px) {
}

@media (min-width: 768px) {
  .ig-filter-head .ig-filter-title {
    padding: 30px 0;
  }
  .wedding-wish-inner {
    min-height: 650px;
  }
}
@media (min-width: 1200px) {
}

/* ========================================
?        FOOTNOTE
======================================== */
.footnote-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  gap: 55px;

  /* background: var(--bg-cover) no-repeat;
  background-size: 100% auto;
  background-position: center top; */
}
.fn-bg-wrap{
  position: absolute;
  width: 100%;
  height: 100%;

  background: var(--bg-cover) no-repeat;
  background-size: 100% auto;
  background-position: center top;
}

.footnote-wrap .fn-bg-wrap::before {
  content: "";
  position: absolute;
  background: radial-gradient(
    50% 50% at 50% 50%,
    var(--background-secondary) 0%,
    rgba(var(--background-secondary-rgb), 0.6) 55.5%,
    rgba(var(--background-secondary-rgb), 0) 100%
  );
  width: 100%;
  height: 75%;
}

.footnote-wrap .footnote {
  position: absolute;
  left: 50%;
  width: 100%;
  max-width: 500px;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 31% 0 30%;
  transform: translateX(-50%);
  gap: 30px;
}

.orn-tc-frame {
  position: absolute;
  width: 100%;
  inset: 0;
}
.orn-footnote-frame {
  width: 100%; /* Lebar penuh layar */
  /* height: 100vh; Tinggi penuh layar */
  top: 0;
  left: 0;
}

/* Details */
.footnote .content {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footnote .content .footnote-title {
  font-size: calc(var(--heading-size) + var(--fs-extra-7) + 9px);

  color: var(--text-primary);
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: normal; /* 200% */
}
.footnote .content .top-text {
  color: var(--text-tertiary);
  font-size: var(--body-text-size);
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.footnote .content .bottom-text {
  color: var(--text-tertiary);
  font-size: var(--body-text-size);
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.footnote .content .date {
  font-size: calc(var(--body-text-size));
}
.footnote-wrap .orn-wrapper {
  position: relative;
  width: 100%;
  /* padding-top: 46%; */
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footnote-wrap .orn-wrapper .orn-footnote-logo {
  max-width: 37.44%;
}

.footnote-foot {
  position: relative;
  width: 100%;
  min-height: 70vh;
}

@media (max-width: 360px) {
  .footnote-wrap {
    /* min-height: calc(80vh + 100px); */
  }
  .footnote .content .footnote-title {
    padding: 30px 0;
  }
}
@media (max-width: 360px) {
  .footnote-wrap .orn-wrapper .orn-footnote-logo {
  }
}

@media (min-width: 560px) and (max-width: 960px) {
  .footnote-wrap {
    min-height: calc(120vh + 100px);
  }
  .footnote-foot {
    min-height: 85vh;
  }

  .footnote .footnote-title {
    margin-bottom: -16px;
  }
  .footnote-wrap .logo-wrap {
    max-width: 160px;
    min-height: 160px;
  }
}

@media (min-width: 768px) {
  .footnote .content .footnote-title {
    padding: 30px 0;
  }
}

@media (min-width: 1200px) {
  .footnote-foot {
    min-height: 85vh;
  }
  .footnote-wrap .logo-wrap {
    max-width: 160px;
    min-height: 160px;
  }
}

.footnote-wrap .wrapper {
}







/* ========================================
        FOOTER
======================================== */
section.footer {
  background: #F6DDE0;
  padding: 0;
}
section.footer .footer-inner {
  padding: 10px 0;
}
section.footer .footer-inner p {
  font-size: var(--body-text-size);
  font-weight: 400;
  color: var(--text-primary);
}
.footer .footer-inner .footer-logo {
  width: 55px;
}
section.footer .footer-inner .footer-logo path {
  fill: var(--text-primary);
}

@media only screen and (max-width: 960px) {
  section.footer .footer-inner.flex-column {
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: 150px;
  }
  section.footer .footer-inner.flex-column p {
    margin-right: 0;
    font-size: calc(var(--body-text-size) + var(--fs-extra-2));
  }
  section.footer .footer-inner.flex-column .footer-logo {
    margin-top: 10px;
    width: 150px;
  }
}


/* Person Tags */
section.person p {
  font-family: var(--roboto);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--dark-clr);
}

/* ========================================
      !  ORNAMENTS
======================================== */

/* COVER  */
.orn-cover-1.left {
  position: absolute;
  width: 33%;
  bottom: 10%;
  left: 0;
  transform: scaleX(-1) translate(-32%, 20%) rotate(33deg);
}
.orn-cover-1.right {
  position: absolute;
  width: 33%;
  bottom: 10%;
  right: 0;
  transform: translate(-32%, 20%) rotate(33deg);
}
.orn-cover-2.left {
  position: absolute;
  width: 16.4%;
  bottom: 20%;
  left: 0;
  transform: scaleX(-1) translate(-65%, -49%) rotate(-2deg);
}
.orn-cover-2.right {
  position: absolute;
  width: 17%;
  top: 4%;
  right: 0;
  transform: translate(-14%, -11%);
}

/* Quote  */
.orn-quote.center {
  position: absolute;
  bottom: 0;
  width: 40%;
  left: 50%;
  transform: translate(-50%, 100%);
}

.orn-quote-1.left {
  position: absolute;
  width: 42.7%;
  left: 0;
  bottom: 0;
  transform: translate(3%, 78%) scaleX(-1);
}
.orn-quote-1.right {
  position: absolute;
  width: 42.7%;
  right: 0;
  bottom: 0;
  transform: translate(3%, 78%);
}

.orn-quote-2.left {
  position: absolute;
  width: 73.7%;
  left: 0;
  bottom: 0;
  transform: translate(-42%, 48%) scaleX(-1);
}
.orn-quote-2.right {
  position: absolute;
  width: 73.7%;
  right: 0;
  bottom: 0;
  transform: translate(42%, 48%);
}

.orn-quote-3.left {
  position: absolute;
  width: 46.7%;
  left: 0;
  bottom: 32%;
  transform: translate(-94%, 57%) scaleX(-1);
}
.orn-quote-3.right {
  position: absolute;
  width: 46.7%;
  right: 0;
  bottom: 32%;
  transform: translate(94%, 57%);
}

.orn-quote-4.left {
  position: absolute;
  width: 44.7%;
  left: 0;
  bottom: 39%;
  transform: translate(-94%, 0%) scaleX(-1);
}
.orn-quote-4.right {
  position: absolute;
  width: 44.7%;
  right: 0;
  bottom: 39%;
  transform: translate(94%, 0%);
}
.orn-quote-kupu {
  position: absolute;
  width: 35%;
  right: 0;
  top: 0;
  transform: translate(143%, -32%);
}

/* Couple */

.orn-couple-1 {
  position: absolute;
  top: 0;
  width: 30%;
  left: 0%;
  transform: scaleX(-1) translate(-13%, -6%);
}
.orn-couple-2 {
  position: absolute;
  top: 0;
  width: 20%;
  left: 0%;
  transform: scaleX(-1) translate(4%, 65%);
}
.orn-couple-3 {
  position: absolute;
  top: 0;
  width: 52%;
  right: 0%;
  transform: translate(13%, -17%) rotate(-35deg);
}
.orn-couple-kupu {
  position: absolute;
  top: 0;
  width: 19%;
  left: 0%;
  transform: translate(-1%, -44%) scaleX(-1);
}
.orn-couple-4 {
  position: absolute;
  bottom: 0;
  width: 40%;
  left: 0%;
  transform: translate(8%, 13%) scaleX(-1);
}
.orn-couple-5 {
  position: absolute;
  bottom: 0;
  width: 40%;
  right: 0%;
  transform: translate(-8%, 13%);
}

/* Love Story */
.orn-ls-1{
  position: absolute;
  width: 40.97%;
  bottom: 0;
  right: 0;
  transform: translate(-20%,32%) rotate(64deg);
}
.orn-ls-2{
  position: absolute;
  width: 21.67%;
  top: 10%;
  right: 0;
  transform: translate(-3%,7%);
}
.orn-ls-3{
  position: absolute;
  width: 23.33%;
  top: 0%;
  right: 0;
  transform: translate(-3%,-10%) scaleX(-1);
}
.orn-ls-4{
  position: absolute;
  width: 25.83%;
  top: 0%;
  right: 0;
  transform: translate(-32%,3%) scaleX(-1);
}
.orn-ls-5{
  position: absolute;
  width: 30.28%;
  top: 0%;
  left: 0;
  transform: translate(1%,-1%);
}
.orn-ls-6{
  position: absolute;
  width: 19.10%;
  top: 0%;
  left: 0;
  transform: translate(33%,-8%) scaleX(-1);
}
.orn-ls-7{
  position: absolute;
  width: 17%;
  top: 0%;
  left: 0;
  transform: translate(100%,-6%) rotate(54deg);
}

/* Gallery Photo  */
.orn-photo-1{
  position: absolute;
  width: 32.31%;
  top: 0;
  right: 0;
  transform: translate(29%,37%) rotate(-19deg);
}
.orn-photo-2{
  position: absolute;
  width: 32.31%;
  top: 0;
  left: 0;
  transform: translate(-29%,37%) scaleX(-1) rotate(-19deg);
}

/* Save Date  */
.orn-savedate-center {
  position: absolute;
  width: 30%;
  left: 50%;
  bottom: 0%;
  transform: translate(-50%, 8%);
}
.orn-savedate-1.left {
  position: absolute;
  width: 30%;
  left: 10%;
  bottom: 0%;
  transform: translate(3%, -44%);
}
.orn-savedate-1.right {
  position: absolute;
  width: 30%;
  right: 10%;
  bottom: 0%;
  transform: translate(3%, -44%) scaleX(-1);
}

.orn-savedate-2.left {
  position: absolute;
  width: 22%;
  left: 6%;
  bottom: 0%;
  transform: translate(3%, -44%);
}
.orn-savedate-2.right {
  position: absolute;
  width: 22%;
  right: 6%;
  bottom: 0%;
  transform: translate(3%, -44%) scaleX(-1);
}
.orn-savedate-3.left {
  position: absolute;
  width: 26%;
  left: 6%;
  top: 0%;
  transform: translate(8%, 13%) rotate(6deg) scaleX(-1);
}
.orn-savedate-3.right {
  position: absolute;
  width: 26%;
  right: 6%;
  top: 0%;
  transform: translate(-8%, 13%) rotate(-6deg);
}
.orn-savedate-4.left {
  position: absolute;
  width: 24.36%;
  left: 6%;
  bottom: 0%;
  transform: translate(3%, -44%) scaleX(-1);
}
.orn-savedate-4.right {
  position: absolute;
  width: 24.36%;
  right: 6%;
  bottom: 0%;
  transform: translate(3%, -44%);
}
.orn-savedate-kupu {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
}

/* Agenda  */

.orn-agenda-1{
  position: absolute;
  width: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%,15%);
}
.orn-agenda-2{
  position: absolute;
  width: 50%;
  top: 0;
  right: 0%;
  transform: translate(23%,-3%) rotate(-36deg);
}

.orn-agenda-3.right{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  transform: translate(23%,36%);
}
.orn-agenda-3.left{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  transform: translate(-23%,36%) scaleX(-1);
}
.orn-agenda-4.right{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55.71%;
  transform: translate(0%,36%);
}
.orn-agenda-4.left{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55.71%;
  transform: translate(0%,36%) scaleX(-1);
}
.orn-agenda-5.right{
  position: absolute;
  right: 10%;
  bottom: 0;
  width: 17.43%;
  transform: translate(-73%,55%)  scaleX(-1) rotate(140deg);
}
.orn-agenda-5.left{
  position: absolute;
  left: 10%;
  bottom: 0;
  width: 17.43%;
  transform: translate(73%,55%) rotate(140deg);
}
.orn-agenda-6.right{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 23.43%;
  transform: translate(25%,3%) rotate(25deg);
}
.orn-agenda-6.left{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 23.43%;
  transform: translate(-25%,3%) rotate(-25deg) scaleX(-1);
}
.orn-agenda-7.right{
  position: absolute;
  right: 0;
  bottom: 0%;
  width: 18.57%;
  transform: translate(19%,-43%);
}
.orn-agenda-7.left{
  position: absolute;
  left: 0;
  bottom: 0%;
  width: 18.57%;
  transform: translate(-19%,-43%) scaleX(-1);
}
.orn-agenda-8.right{
  position: absolute;
  right: 0;
  bottom: 0%;
  width: 26.29%;
  transform: translate(27%,-41%);
}
.orn-agenda-8.left{
  position: absolute;
  left: 0;
  bottom: 0%;
  width: 26.29%;
  transform: translate(-27%,-41%) scaleX(-1);
}
.orn-agenda-9.right{
  position: absolute;
  right: 0;
  bottom: 5%;
  width: 24%;
  transform: translate(24%,-49%) scaleX(-1);
}
.orn-agenda-9.left{
  position: absolute;
  left: 0;
  bottom: 5%;
  width: 24%;
  transform: translate(-24%,-49%);
}

/* RSVP  */
.orn-rsvp-1 {
  position: absolute;
  left: 0;
  bottom: 0%;
  width: 29%;
  transform: translate(-60%, -4%);
}
.orn-rsvp-2 {
  position: absolute;
  left: 0;
  bottom: 0%;
  width: 50%;
  transform: translate(50%, 48%) rotate(78deg);
}
.orn-rsvp-3 {
  position: absolute;
  left: 0;
  bottom: 0%;
  width: 35%;
  transform: translate(-28%, 29%);
}
.orn-rsvp-4 {
  position: absolute;
  right: 0;
  top: 0%;
  width: 30%;
  transform: translate(34%, -22%) rotate(23deg);
}

/* LIVESTREAM Yoo  */
.orn-live-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  transform: rotate(-22deg) translate(-2%, 8%) scaleX(-1);
}
.orn-live-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  transform: rotate(24deg) translate(2%, 8%);
}

/* IG FILTER  */
.orn-filter-1 {
  position: absolute;
  right: 0;
  bottom: 30%;
  width: 16%;
  transform: translate(-22%, 13%);
}
.orn-filter-2 {
  position: absolute;
  left: 0;
  top: 23%;
  width: 16%;
  transform: translate(23%, 13%) scaleX(-1);
}

/* Bank Gift  */
.wedding-gift-body .orn-bank-1{
  position: absolute;
  right: 0;
  top: 0%;
  width: 29%;
  transform: translate(30%, -17%) rotate(16deg);
}

@media (min-width: 1440px) {
  .wedding-gift-body .orn-rsvp-1 {
    width: 20.3%; /* setelah dikurangi 30% dari 29% */
  }
  
  .wedding-gift-body .orn-rsvp-2 {
    width: 35%; /* setelah dikurangi 30% dari 50% */
  }
  
  .wedding-gift-body .orn-rsvp-3 {
    width: 24.5%; /* setelah dikurangi 30% dari 35% */
  }
  
  .wedding-gift-body .orn-bank-1{
    width: 21%; /* setelah dikurangi 30% dari 30% */
  }
  
}

/* Section Kado  */

#kado_orn_anin .orn-kado-3.right{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  transform: translate(8%,23%);
}
#kado_orn_anin .orn-kado-3.left{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 27%;
  transform: translate(-8%,23%) scaleX(-1);
}
#kado_orn_anin .orn-kado-4.right{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55.71%;
  transform: translate(0%,36%);
}
#kado_orn_anin .orn-kado-4.left{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55.71%;
  transform: translate(0%,36%) scaleX(-1);
}
#kado_orn_anin .orn-kado-5.right{
  position: absolute;
  right: 10%;
  bottom: 0;
  width: 17.43%;
  transform: translate(-73%,55%)  scaleX(-1) rotate(140deg);
}
#kado_orn_anin .orn-kado-5.left{
  position: absolute;
  left: 10%;
  bottom: 0;
  width: 17.43%;
  transform: translate(73%,55%) rotate(140deg);
}
#kado_orn_anin .orn-kado-6.right{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 23.43%;
  transform: translate(17%,0%) rotate(25deg);
}
#kado_orn_anin .orn-kado-6.left{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 23.43%;
  transform: translate(-17%,0%) rotate(-25deg) scaleX(-1);
}
#kado_orn_anin .orn-kado-7.right{
  position: absolute;
  right: 0;
  top: 0;
  width: 63%;
  transform: translate(17%,0%);
}
#kado_orn_anin .orn-kado-7.left{
  position: absolute;
  left: 0;
  top: 0;
  width: 63%;
  transform: translate(-17%,41%) scaleX(-1);
}
.orn-kado-7 img{
  position: relative;
  animation-name: cloud-right;
  animation-duration: 20000ms !important;
  animation-iteration-count: infinite;
  animation-timing-function: linear !important;
  width: 100%;
}

.orn-kado-bottom{
  position: absolute;
  width: 193.03%;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}
@media (min-width: 561px) and (max-width: 960px) {
  .orn-kado-bottom{
    position: absolute;
    width: 142.03%;
  }
}

/* PROTOCOL  */
.orn-pro.center {
  position: absolute;
  bottom: 0;
  width: 25%;
  left: 50%;
  transform: translate(-50%, 85%);
}

.orn-pro-1.left {
  position: absolute;
  width: 26.6875%;
  left: 0;
  bottom: 0;
  transform: translate(60%, 78%) scaleX(-1);
}
.orn-pro-1.right {
  position: absolute;
  width: 26.6875%;
  right: 0;
  bottom: 0;
  transform: translate(-60%, 78%);
}


.orn-pro-2.left {
  position: absolute;
  width: 46.0625%;
  left: 0;
  bottom: 0;
  transform: translate(-7%, 49%) scaleX(-1);
}
.orn-pro-2.right {
  position: absolute;
  width: 46.0625%;
  right: 0;
  bottom: 0;
  transform: translate(7%, 49%);
}


.orn-pro-3.left {
  position: absolute;
  width: 29.1875%;
  left: 0;
  bottom: 32%;
  transform: translate(-32%, 50%) scaleX(-1);
}
.orn-pro-3.right {
  position: absolute;
  width: 29.1875%;
  right: 0;
  bottom: 32%;
  transform: translate(32%, 50%);
}


.orn-pro-4.left {
  position: absolute;
  width: 27.9375%; /* setelah dikurangi 37.5% dari 44.7% */
  left: 0;
  bottom: 39%;
  transform: translate(-28%, 3%) scaleX(-1);
}

.orn-pro-4.right {
  position: absolute;
  width: 27.9375%; /* setelah dikurangi 37.5% dari 44.7% */
  right: 0;
  bottom: 39%;
  transform: translate(28%, 3%);
}

/* Footnote  */
.orn-footnote-1 {
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  transform: translate(14%, 19%);
}
.orn-footnote-1 img{
  position: relative;
  animation-name: cloud-right;
  animation-duration: 20000ms !important;
  animation-iteration-count: infinite;
  animation-timing-function: linear !important;
  width: 71%;
}
.orn-footnote-2 {
  position: absolute;
  width: 100%;
  bottom: 39%;
  left: 0;
  transform: translate(-27%, 27%) scaleX(-1);
}
.orn-footnote-2 img{
  position: relative;
  animation-name: cloud-right;
  animation-duration: 20000ms !important;
  animation-iteration-count: infinite;
  animation-timing-function: linear !important;
  width: 71%;
}
.orn-footnote-3 {
  position: absolute;
  width: 32%;
  bottom: 0%;
  left: 0;
  transform: translate(-25%, 8%) scaleX(1);
}
.orn-footnote-4 {
  position: absolute;
  width: 32%;
  bottom: 0%;
  right: 0;
  transform: translate(25%, 8%) scaleX(-1);
}

/* TOP COVER  */
.orn-tc-1 {
  position: absolute;
  top: 30%;
  width: 71.79%;
  left: -39%;
}
.orn-tc-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 71.79%;
}
.orn-tc-3 {
  position: absolute;
  top: 40%;
  width: 16%;
  right: 13%;
}
.orn-tc-4 {
  position: absolute;
  top: 20%;
  width: 16%;
  left: 13%;
  transform: scaleX(-1) translate(-20%,-46%);
}

@media (min-width: 561px) and (max-width: 960px) {
  .orn-tc-1,
  .orn-tc-2 {
    width: 46.6635%; /* setelah dikurangi 35% dari 71.79% */
  }
  
  .orn-tc-3,
  .orn-tc-4 {
    width: 10.4%; /* setelah dikurangi 35% dari 16% */
  }
  
}


/* Primary Pane Orn  */
.primary-pane .orn-prip-frame{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,0%);
}

.primary-pane .orn-footnote-3 {
  position: absolute;
  width: 20.31%;
  bottom: 0%;
  left: 0;
  transform: translate(-25%, 8%) scaleX(1);
}
.primary-pane .orn-footnote-4 {
  position: absolute;
  width: 20.31%;
  bottom: 0%;
  right: 0;
  transform: translate(25%, 8%) scaleX(-1);
}

.primary-pane .orn-footnote-1 {
  position: absolute;
  width: 32.81%;
  top: 0;
  right: 0;
  transform: translate(14%, 19%);
}
.primary-pane .orn-footnote-1 img{
  position: relative;
  animation-name: cloud-right;
  animation-duration: 20000ms !important;
  animation-iteration-count: infinite;
  animation-timing-function: linear !important;
  width: 100%;
}
.primary-pane .orn-footnote-2 {
  position: absolute;
  width: 32.81%;
  bottom: 64%;
  left: 0;
  transform: translate(-27%, 27%) scaleX(-1);
}
.primary-pane .orn-footnote-2 img{
  position: relative;
  animation-name: cloud-right;
  animation-duration: 20000ms !important;
  animation-iteration-count: infinite;
  animation-timing-function: linear !important;
  width: 100%;
}

.primary-pane .orn-pp-3 {
  position: absolute;
  bottom: 28%;
  width: 9.22%;
  right: 22%;
}
.primary-pane .orn-pp-4 {
  position: absolute;
  top: 20%;
  width: 9.22%;
  left: 30%;
  transform: scaleX(-1) translate(-20%,32%);
}








/*  =======================================
    EFFECTS - Nanda
======================================= */
.effects.nanda > div {
  /* background-color: rgba(46, 135, 255, 1); */
  width: 25px;
  height: 25px;
}
.effects.nanda > div > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
}
.effects.nanda > div:nth-child(1) {
  left: 5%;
  width: 28px;
  height: 28px;
  animation: nanda-effects 20s linear infinite;
  animation-delay: -4s;
}
.effects.nanda > div:nth-child(2) {
  left: 18%;
  animation: nanda-effects 25s linear infinite;
  animation-delay: -7s;
}
.effects.nanda > div:nth-child(3) {
  left: 27%;
  width: 35px;
  height: 35px;
  animation: nanda-effects 15s linear infinite;
  animation-delay: -7s;
}
.effects.nanda > div:nth-child(4) {
  left: 36%;
  animation: nanda-effects 30s linear infinite;
  animation-delay: -2s;
}
.effects.nanda > div:nth-child(5) {
  left: 45%;
  width: 38px;
  height: 38px;
  animation: nanda-effects 25s linear infinite;
  animation-delay: -2s;
}
.effects.nanda > div:nth-child(6) {
  left: 54%;
  width: 20px;
  height: 20px;
  animation: nanda-effects 15s linear infinite;
  animation-delay: -12s;
}
.effects.nanda > div:nth-child(7) {
  left: 63%;
  animation: nanda-effects 20s linear infinite;
  animation-delay: -10s;
}
.effects.nanda > div:nth-child(8) {
  left: 72%;
  animation: nanda-effects 10s linear infinite;
  animation-delay: -2s;
}
.effects.nanda > div:nth-child(9) {
  left: 81%;
  width: 30px;
  height: 30px;
  animation: nanda-effects 25s linear infinite;
  animation-delay: -4s;
}
.effects.nanda > div:nth-child(10) {
  left: 92%;
  animation: nanda-effects 15s linear infinite;
  animation-delay: -7s;
}


/* =================================
        Animation
================================= */

@keyframes nanda-effects {
  0% {
    opacity: 0;
    top: -10%;
    transform: translateX(20px) rotate(0deg);
  }
  7%,
  27%,
  47%,
  67%,
  87% {
    opacity: 0;
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    opacity: 0.8;
  }
  13%,
  33%,
  53%,
  73%,
  93% {
    opacity: 0;
  }
  7%,
  10%,
  13% {
    top: 10%;
  }
  13% {
    transform: translateX(-30px) rotate(40deg);
  }
  27%,
  30%,
  33% {
    top: 30%;
  }
  33% {
    transform: translateX(20px) rotate(80deg);
  }
  47%,
  50%,
  53% {
    top: 55%;
  }
  53% {
    transform: translateX(-30px) rotate(120deg);
  }
  67%,
  70%,
  73% {
    top: 72%;
  }
  73% {
    transform: translateX(20px) rotate(160deg);
  }
  87%,
  90%,
  93% {
    top: 90%;
  }
  93% {
    transform: translateX(-30px) rotate(200deg);
  }
  100% {
    top: 110%;
    transform: translateX(20px) rotate(240deg);
    opacity: 0;
  }
}


@keyframes goyang {
  0% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@keyframes goyang-slow {
  0% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(2deg);
  }
}
@keyframes float {
  0% {
    transform: scaleX(0.6);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes fly-diagonal {
  0% {
    opacity: 0;
    transform: translate(250%, 250%) scaleX(1);
  }
  5% {
    opacity: 1;
  }
  10% {
    transform: translate(225%, 225%) scaleX(0.8);
  }
  20% {
    transform: translate(200%, 200%) scaleX(1);
  }
  30% {
    transform: translate(175%, 175%) scaleX(0.8);
  }
  40% {
    transform: translate(150%, 150%) scaleX(1);
  }
  50% {
    transform: translate(125%, 125%) scaleX(0.8);
  }
  60% {
    transform: translate(100%, 100%) scaleX(1);
  }
  70% {
    transform: translate(75%, 75%) scaleX(0.8);
  }
  80% {
    transform: translate(50%, 50%) scaleX(1);
  }
  90% {
    transform: translate(25%, 25%) scaleX(0.8);
  }
  100% {
    transform: translate(0%, 0%) scaleX(1);
  }
}

@keyframes cloud-left {
  0% {
    left: 0;
    transform: translate(-100%, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    transform: translateZ(0);
    opacity: 0;
  }
}
@keyframes cloud-right {
  0% {
    right: 0;
    transform: translate(100%, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    right: 100%;
    transform: translateZ(0);
    opacity: 0;
  }
}

/* Primary P Animation   */
.primary-pane .orn-pp-3 .image-wrap img {
  transform-origin: 50% 50%;
  animation: float 2s ease-in-out infinite alternate, fly-diagonal 7s linear normal;
}
.primary-pane .orn-pp-4 .image-wrap img {
  transform-origin: 50% 50%;
  animation: float 2s ease-in-out infinite alternate, fly-diagonal 7s linear normal;
}
/* Top Cover Animation   */

.orn-tc-3 .image-wrap img {
  transform-origin: 50% 50%;
  animation: float 2s ease-in-out infinite alternate, fly-diagonal 7s linear normal;
}
.orn-tc-4 .image-wrap img {
  transform-origin: 50% 50%;
  animation: float 2s ease-in-out infinite alternate, fly-diagonal 7s linear normal;
}
.orn-tc-1 img {
  position: relative;
  animation-name: cloud-left;
  animation-duration: 20000ms !important;
  animation-iteration-count: infinite;
  animation-timing-function: linear !important;
  width: 85%;
}
.orn-tc-2 img {
  position: relative;
  animation-name: cloud-right;
  animation-duration: 20000ms !important;
  animation-iteration-count: infinite;
  animation-timing-function: linear !important;
  top: 0%;
  width: 85%;
  right: -38%;
}

/* Cover Animation   */
.orn-cover-2 .image-wrap img {
  transform-origin: 50% 50%;
  animation: float 2s ease-in-out infinite alternate, fly-diagonal 9s linear normal;
}

/* Quote Animation   */

.orn-quote-4 .image-wrap img {
  transform-origin: 0% 100%;
  animation: goyang 6s ease-in-out infinite alternate;
}
.orn-quote-kupu .image-wrap img {
  transform-origin: 50% 50%;
  animation: float 2s ease-in-out infinite alternate, fly-diagonal 9s linear normal;
}

/* Couple Animation   */

.orn-couple-kupu .image-wrap img {
  transform-origin: 50% 50%;
  animation: float 2s ease-in-out infinite alternate, fly-diagonal 9s linear normal;
}
.orn-couple-3 .image-wrap img {
  transform-origin: 0% 100%;
  animation: goyang 6s ease-in-out infinite alternate;
}

/* Love Story Animation   */

.orn-ls-3 .image-wrap img {
  transform-origin: 100% 100%;
  animation: goyang 5s ease-in-out infinite alternate;
}
.orn-ls-7 .image-wrap img {
  transform-origin: 50% 100%;
  animation: goyang 6s ease-in-out infinite alternate;
}

/* filter Animations */
.orn-filter-1 .image-wrap img {
  transform-origin: 50% 50%;
  animation: float 2s ease-in-out infinite alternate, fly-diagonal 7s linear normal;
}
.orn-filter-2 .image-wrap img {
  transform-origin: 50% 50%;
  animation: float 2s ease-in-out infinite alternate, fly-diagonal 7s linear normal;
}
/* Savedate Animations */
.orn-savedate-kupu .image-wrap img {
  transform-origin: 50% 50%;
  animation: float 2s ease-in-out infinite alternate, fly-diagonal 9s linear normal;
}
.orn-savedate-3 .image-wrap img {
  transform-origin: 0% 100%;
  animation: goyang 6s ease-in-out infinite alternate;
}

/* Agenda Animations */
.event-content .orn-pillar .orn-agenda-9 .image-wrap img {
  transform-origin: 40% 100%;
  animation: goyang 6s ease-in-out infinite alternate;
}
.event-content .orn-pillar .orn-agenda-5 .image-wrap img {
  transform-origin: 55% 100%;
  animation: goyang 6s ease-in-out infinite alternate;
}

/* Rsvp Animations */

.orn-rsvp-1 .image-wrap img {
  transform-origin: 50% 100%;
  animation: goyang 6s ease-in-out infinite alternate;
}
.orn-rsvp-2 .image-wrap img {
  transform-origin: 50% 100%;
  animation: goyang-slow 6s ease-in-out infinite alternate;
}

/* Kado Animations  */

.orn-kado-5 .image-wrap img {
  transform-origin: 50% 100%;
  animation: goyang-slow 6s ease-in-out infinite alternate;
}
.orn-kado-6 .image-wrap img {
  transform-origin: 50% 100%;
  animation: goyang-slow 6s ease-in-out infinite alternate;
}


/* Footnote Animations */

.orn-footnote-3 .image-wrap img {
  transform-origin: 10% 100%;
  animation: goyang-slow 6s ease-in-out infinite alternate;
}
.orn-footnote-4 .image-wrap img {
  transform-origin: 10% 100%;
  animation: goyang-slow 6s ease-in-out infinite alternate;
}



/* =============================
        DRESSCODE
============================= */
.dress-wrapper .dress-title {
    font-size: calc(var(--body-text-size) + var(--fs-extra-2));
    color: var(--text-secondary);
}

/* =============================
        INVITATION LABEL
============================= */
section.top-cover .inner .details .invitation-category {
  padding: 0;
}
section.top-cover .inner .details .invitation-category .category-label {
  color: var(--text-primary);
}

.rsvp-confirm-btn.back, .form-label{
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    font-weight: var(--body-text-weight);
    text-transform: var(--body-text-lettercase);
    line-height: normal;
    color: var(--text-tertiary);
}