:root {
  --mns-koi: #563327;
  --mns-naka: #b17d43;
  --mns-usui: #f8f4e9;
  --mns-usui-card: 248, 244, 233;
  --mns-naka-card: 177, 125, 67;
  --mns-koi-card: 86, 51, 39;
  /* background-color: rgba(var(--mns-usui-card), 0.8); */
  /* paralax background */
  --mns-paralax-bg: #f8f4e9;
  --mns-paralax-brown: hsl(15, 38%, 25%);
}

html {
  scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.font-flower {
  font-family: SunFlower !important;
  letter-spacing: 0.1rem;
}

.font-java {
  font-family: MainFont !important;
  letter-spacing: 0.2rem;
}

p {
  font-family: MainFontNormal !important;
  font-weight: normal;
  font-size: small;
}

h1,
h2 {
  color: var(--mns-paralax-brown);
}

h3,
h4,
h5,
h6 {
  color: var(--mns-naka);
}

a {
  text-decoration: none;
}

.text-usui {
  color: var(--mns-usui) !important;
}

.text-naka {
  color: var(--mns-naka) !important;
}

.text-koi {
  color: var(--mns-koi) !important;
}

/* hide element on mobil */
/* desktop */
@media screen and (min-width: 960px) {
  .mns-body {
    width: 40%;
    position: absolute;
    right: 0 !important;
    z-index: 100;
  }

  .desktop-view .desktop-frame {
    display: none;
  }
  .hadiah {
    display: none;
  }
  #player-container {
    display: none;
  }

  .splash {
    display: none;
  }
}

/* mobile */
@media screen and (max-width: 960px) {
  .desktop-view .desktop-frame {
    display: none;
  }
  .hadiah2 {
    display: none;
  }
  #player-container2 {
    display: none;
  }
}

.desktop-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--mns-paralax-bg);
  z-index: -100;
}

.desktop-view {
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  width: 61%;
}

.gradien-gradient {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgb(0, 0, 0);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /*background: linear-gradient(0deg, rgba(0, 0, 0, 0.798739564185049) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);*/
}

.bg-desktop {
  z-index: -100;
  object-fit: cover;
}

.detail-desktop {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 10% 20% 11% 7%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;
  z-index: 110;
}

#goTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 99;
  font-size: 30px;
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--mns-naka);
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
}

/* splashscreen */
.splash {
  cursor: pointer;
  position: fixed;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
  background-color: var(--mns-usui) !important;
  transition: all ease-out 600ms;
  z-index: 500;
  background: url("../img/asset/flores.webp") center bottom no-repeat, url("../img/asset/home.webp") center top no-repeat;
  background-size: contain;
}

.splash::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/asset/paper-texture.webp");
  background-repeat: repeat;
  opacity: 0.5;
  mix-blend-mode: multiply;
}

.hidden {
  transition: 0.5s;
  display: none;
}

.mns-button-open {
  text-align: center;
  color: var(--mns-usui);
  background-color: var(--mns-koi);
  border: 1px solid var(--mns-naka);
  border-radius: 5px;
}

.mns-button-open:hover {
  padding: 1rem;
  text-align: center;
  color: var(--mns-usui);
  background-color: var(--mns-naka);
  border: 1px solid var(--mns-koi);
  border-radius: 5px;
}

/* data mempelai */
.mempelai {
  display: grid;
  justify-content: center;
  background-color: var(--mns-usui) !important;
}

.card-mempelai {
  background-color: rgba(var(--mns-usui-card), 0.1);
  border: 0.5px solid rgba(var(--mns-usui-card), 0.3);
  border-radius: 10px;
}

.frame-mempelai {
  position: relative;
  display: flex;
  justify-content: center;
}

.foto-mempelai {
  position: relative;
  border-radius: 10px;
  border: 3px solid var(--mns-naka);
  /* width: 150px;
  height: 150px; */
}

.foto-bride {
  background-image: url("../img/bride.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 130px;
  z-index: 1;
}

.foto-groom {
  background-image: url("../img/groom.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 130px;
  z-index: 1;
}

.foto-frame {
  position: absolute;
  bottom: -45px;
}

.tombol-ig {
  border-radius: 5px;
  border: 1px solid rgba(var(--mns-naka-card), 0.2);
  background-color: rgba(var(--mns-naka-card), 0.1);
  color: var(--mns-naka);
}

.tombol-ig:hover {
  border: 1px solid var(--mns-naka);
  background-color: var(--mns-koi);
  color: var(--mns-naka);
}

/* data lokasi dan tanggal */
.lokasi {
  display: grid;
  justify-content: center;
  background-color: var(--mns-usui) !important;
}

.lokasi-bg {
  background-color: var(--mns-naka);
  /* background: url("/../img/soil.svg") center bottom no-repeat, url("../img/java.svg") center bottom no-repeat, url("../img/cloud1.svg") center bottom no-repeat;
    background-size: cover; */
}

.card-acara {
  background-color: #f7f3e8;
  border: 1px solid var(--mns-naka);
  border-radius: 10px;
}

.tombol-live {
  border-radius: 5px;
  border: 1px solid var(--mns-naka);
  background-color: #f7f3e8;
  color: var(--mns-naka);
}

.tombol-live:hover {
  background-color: var(--mns-naka);
  color: var(--mns-usui);
}

/* data cerita */
.cerita {
  display: grid;
  background-color: var(--mns-usui) !important;
}

/* data gallery */
.gallery {
  display: grid;
  background-color: var(--mns-usui) !important;
}

.mns-img-crop {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}

/* google maps */
/* .gmaps {
    display: grid;
    background-color: var(--mns-koi) !important;
} */

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--mns-naka);
  --bs-btn-bg: var(--mns-usui);
  --bs-btn-border-color: var(--mns-naka);
  --bs-btn-border-radius: 0.5rem;
  --bs-btn-hover-color: var(--mns-naka);
  --bs-btn-hover-bg: rgba(var(--mns-naka-card), 0.5);
  --bs-btn-hover-border-color: rgba(var(--mns-naka-card), 0.2);
  --bs-btn-focus-shadow-rgb: var(--mns-naka);
  --bs-btn-active-color: var(--mns-naka);
  --bs-btn-active-bg: rgba(var(--mns-naka-card), 0.8);
  --bs-btn-active-border-color: rgba(var(--mns-naka-card), 0.2);
}

/* rvpv and ucapan */
.rsvp {
  display: grid;
  justify-content: center;
  background-color: var(--mns-usui) !important;
}

.tombol-kirim {
  border-radius: 5px;
  border: 1px solid rgb(var(--mns-usui-card));
  background-color: var(--mns-naka);
  color: var(--mns-usui);
}

.tombol-kirim:hover {
  border-radius: 5px;
  border: 1px solid var(--mns-naka);
  background-color: var(--mns-koi) !important;
  color: var(--mns-usui) !important;
}

.ucapan-tamu {
  display: none;
}

.noContent {
  color: #000 !important;
  background-color: transparent !important;
  pointer-events: none;
}

.Berhalangan {
  background-color: rgba(255, 0, 0, 0.274) !important;
}

.Akan {
  background-color: rgba(0, 162, 255, 0.24) !important;
}

.komen-netizen {
  max-width: 500px;
  margin: 15px auto;
}

.komen {
  display: none;
  padding: 10px;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 10px;
  background-color: #f1f1f1;
}

.komen2 {
  display: none;
  padding: 10px;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 10px;
  background-color: #f1f1f1;
}

#submitKomen {
  margin-top: 15px;
  padding: 5px;
  text-align: center;
  background-color: #d1d1d1;
  color: #16212a;
  border-width: 1px;
  border-style: solid;
  border-color: #3e393c;
  /*box-shadow: 0 1px 1px #ccc;*/
  transition: all 600ms ease-in-out;
  -webkit-transition: all 600ms ease-in-out;
  -moz-transition: all 600ms ease-in-out;
  -o-transition: all 600ms ease-in-out;
}

/* footer */
.sepatu {
  display: grid;
  justify-content: center;
  background-color: var(--mns-usui) !important;
  background: url("../img/asset/flores.webp") center bottom no-repeat;
  background-size: contain;
}

/* paralax background by kolbyart */

section {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../img/asset/home.webp") center top no-repeat;
  background-size: contain;
  background-color: var(--mns-paralax-bg);
}

/* section::before {
  content: "";
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/asset/paper-texture.webp") repeat;
  opacity: 0.5;
  mix-blend-mode: multiply;
} */

.lake {
  position: relative;
  bottom: 236px;
  width: 100%;
}

.lake2 {
  position: relative;
  bottom: 54px;
  width: 100%;
}

.lake3 {
  position: relative;
  bottom: 122px;
  width: 100%;
}

.bird {
  position: absolute;
  bottom: 126px;
  right: 16px;
  width: 200px;
}

.bird2 {
  position: absolute;
  right: 0px;
  width: 200px;
  /* transform: scaleX(-1); */
}

.bird3 {
  position: absolute;
  right: 16px;
  width: 200px;
}

/* section:before {
  content: "";
  position: relative;
  bottom: 0;
  width: 100%;
  height: 800px;
  background: url("../img/asset/lake.png") center bottom no-repeat;
  background-size: contain;
  z-index: 100;
} */

/* section:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
  z-index: 100;
  background: var(--mns-paralax-brown);
  mix-blend-mode: color;
} */

/* section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
} */

#title {
  font-family: MainFont !important;
  position: absolute;
  color: var(--mns-paralax-brown);
  margin-top: 50px;
  letter-spacing: 0.2rem;
  text-align: center;
}

.mns-slide {
  width: 200px;
  height: 200px;
  margin-bottom: 340px;
  border: 10px solid var(--mns-paralax-brown);
  border-radius: 50%;
  position: relative;
  z-index: 90;
  background-image: url(../img/kita.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.daun-w-slide {
  position: relative;
  display: flex;
  justify-content: center;
}

.leaf {
  position: absolute;
  z-index: 90;
  top: -20px;
  width: auto;
  height: auto;
}

/* css animation mosue */
.arrow-scroll {
  width: 35px;
  margin: 350px 50% 0 50%;
  z-index: 100;
  position: absolute;
}

.arrow-scroll > span {
  font-family: Arial, sans-serif;
  display: block;
  width: 9px;
  height: 9px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  margin: 5px auto 3px;
  -webkit-animation: b 1s infinite;
  animation: b 1s infinite;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.arrow-scroll > span:first-child {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.arrow-scroll > span:last-child {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

@-webkit-keyframes a {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

@keyframes a {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

@-webkit-keyframes b {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

@keyframes b {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

/* countdown */
ul {
  padding-right: 2rem;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--mns-koi);
}

li {
  display: inline-block;
  list-style-type: none;
  padding: 0.5em;
  text-transform: uppercase;
  color: var(--mns-koi);
  background-color: #f7f3e8;
  border: 1px solid var(--mns-naka);
  min-height: 4.5vmax;
  min-width: 5vmax;
  border-radius: 0.25rem;
}

li span {
  display: block;
  font-size: 1.5rem !important;
  color: var(--mns-koi);
}

.emoji {
  display: none;
  padding: 1rem;
}

.emoji span {
  font-size: 4rem;
  padding: 0 0.5rem;
}

@media all and (max-width: 768px) {
  h1 {
    font-size: calc(1.5rem * 0.75);
  }

  li {
    font-size: calc(1.125rem * 0.75);
  }

  li span {
    font-size: calc(3.375rem * 0.75);
  }
}

/* end of countdown */

.isidulu {
  box-shadow: 0 0 5px rgba(240, 52, 52, 1);
  border: 1px solid rgba(240, 52, 52, 1);
}

/* tombol hadiah */
.hadiah {
  position: fixed;
  bottom: 37px;
  left: 80px;
  z-index: 102;
}

.hadiah2 {
  position: fixed;
  /* float: right; */
  bottom: 36px;
  left: 68px;
  margin-right: -33px;
  margin-top: 10px;
  z-index: 102;
}

#player-container2 #play-pause2 {
  /* position: fixed; */
  bottom: 40px;
  float: right;
  /* left: 23px; */
  margin-right: 30px;
  margin-top: 54px;
  display: block;
  z-index: 102;
  cursor: pointer;
  text-indent: -999999px;
  height: 30px;
  width: 30px;
  padding: 12px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b17d43' class='bi bi-play-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: center;
  background-repeat: no-repeat;
  background-position: center;
}

.tombol-haidah {
  background-color: var(--mns-naka);
  color: var(--mns-usui);
  font-size: small;
  /* border: 1px solid rgba(var(--mns-usui-card), 0.3); */
}

.tombol-haidah:hover {
  background-color: rgba(var(--mns-naka-card), 0.6) !important;
  color: var(--mns-usui);
  font-size: small;
  /* border: 1px solid rgba(var(--mns-usui-card), 0.3); */
}

.modal {
  z-index: 99999 !important;
}

/* footer floating */
.mns-ff {
  position: fixed;
  bottom: 0;
  z-index: 99;
  width: 100%;
  height: 80px;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4962185557816877) 0%, rgba(0, 0, 0, 0) 100%);
}