@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

/* Additional from Wahyu  */
.bg-black{
  background-color: #C65957 !important;
}
.classic-romance-text{
  color: #C65957 !important;
}
.border-20{
  border-radius: 20px;
}
.section-quotes{
  background: #C65957;
  color: white;
  padding: 20px;
}
.gradient-bg{
  background: linear-gradient(180deg, #FFF3F3 0%, rgba(255, 243, 243, 0) 100%);
}
/* End of addtional  */

.text-primary {
  color: #C65957;

}
.no-scroll {
  overflow: hidden;
}
.bg-primay {
  background-color: #C65957;
}

.bg-second{
  background-color: #C65957;
}

.bg-toBottom{
  height: 400px;
  background: l#C65957;
  }
.bg-toBottom-4{
  background: l#C65957;
  }
.bg-toBottom-1{
  height: 200px;
  background: l#C65957;
  }
.bg-toBottom-2{
  height: 400px;
  background: l#C65957;
  }
.bg-toBottom-3{
  height: 400px;
  background: l#C65957;
  }

.bg-hightlight {
  background-color: #c6595700;
}
.bg-hightlight-1 {
  background-color: #C65957cf;
}

.h-custom{
  height: 1000px;
}
.h-custom-0{
  height: 750px;
}
.h-custom-1{
  height: 1950px;
}
.h-custom-2{
  height: 1200px;
}
.h-custom-3{
  height: 1000px;
}

#cov {
  position: relative;
  width: 100%;
  height: 1000px;
  overflow: hidden;
}

#cov img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

#slide{
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

#slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}



@font-face {
  font-family: 'Abaya';
  src: url('./assets/font/abhayalibre.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormont';
  src: url('./assets/font/cormont.woff2') format('woff2');
}

@font-face {
  font-family: 'Yaseva';
  src: url('./assets/font/yaseva.woff2') format('woff2');
}

.abaya {
  font-family: 'Abaya', sans-serif;
}

.cormont {
  font-family: 'Cormont', sans-serif;
}

.yaseva {
  font-family: 'Yaseva', sans-serif;
}

.open-sans {
  font-family: 'Open Sans', sans-serif;
}

.roboto {
  font-family: 'Roboto', sans-serif;
}

.roboto-slab {
  font-family: 'Roboto Slab', serif;
}

@keyframes carouselAnimation {
  0% { transform: translateX(0); }
  33.33% { transform: translateX(-100%); }
  66.66% { transform: translateX(-200%); }
  100% { transform: translateX(-300%); }
}

@keyframes carousel1Animation {
  0% { transform: translateX(0); }
  12.5% { transform: translateX(0); }
  33.33% { transform: translateX(-100%); }
  66.66% { transform: translateX(-200%); }
  100% { transform: translateX(-300%); }
}

@keyframes carousel5Animation {
  0% { transform: translateX(0); }
  12.5% { transform: translateX(0); }
  33.33% { transform: translateX(-100%); }
  66.66% { transform: translateX(-200%); }
  100% { transform: translateX(-300%); }
}

@keyframes carousel2Animation {
  0% { transform: translateX(0); }
  12.5% { transform: translateX(0); }
  33.33% { transform: translateX(-100%); }
  66.66% { transform: translateX(-200%); }
  100% { transform: translateX(-300%); }
}
@keyframes carousel3Animation {
  0% { transform: translateX(0); }
  12.5% { transform: translateX(0); }
  33.33% { transform: translateX(-40%); }
  66.66% { transform: translateX(-80%); }
  100% { transform: translateX(-100%); }
}
@keyframes carousel4Animation {
  0%, 12.5% { transform: translateX(0%); }
  25% { transform: translateX(-100%); }
  37.5% { transform: translateX(-200%); }
  50% { transform: translateX(-300%); }
  62.5% { transform: translateX(-400%); }
  75% { transform: translateX(-500%); }
  87.5% { transform: translateX(-600%); }
  100% { transform: translateX(-700%); }
}

@keyframes carousel6Animation {
  0% { transform: translateX(0); }
  33.33% { transform: translateY(-30%); }
  66.66% { transform: translateY(-60%); }
  100% { transform: translateY(-100%); }
}


#carousel .transition-transform {
  animation: carouselAnimation 15s cubic-bezier(0.8, 0.2, 0.2, 1) infinite;
}

#carousel-1 .transition-transform {
  animation: carousel1Animation 35s cubic-bezier(0.8, 0.2, 0.5, 1) infinite;
}
#carousel-2 .transition-transform {
  animation: carousel2Animation 35s cubic-bezier(0.8, 0.2, 0.5, 1) infinite reverse;
}
#carousel-3 .transition-transform {
  animation: carousel3Animation 35s cubic-bezier(1, 1, 0.5, 1) infinite;
}
#carousel-4 .transition-transform {
  animation: carousel4Animation 35s cubic-bezier(0.5, 1, 0.5, 1) infinite;
}
#carousel-5 .transition-transforms {
  animation: carousel5Animation 50s cubic-bezier(0.8, 0.8, 0.8, 1) infinite;
  animation-delay: 5s;
}
#carousel-6 .scroll-container-vertical {
  animation: carousel6Animation 30s cubic-bezier(0.8, 0.2, 0.2, 1) infinite reverse;
}
#carousel-7 .scroll-container-vertical {
  animation: carousel6Animation 30s cubic-bezier(0.8, 0.2, 0.2, 1) infinite ;
}

.onHover{
  transition: transform 0.5s ease-in-out;
}
.onHover:hover{
  transform: scale(1.03);
}


.map-container iframe {
  width: 100%;
  height: 100%;
}
.map-container {
  width: 100%;
  height: 0;
  border-radius: 2px;
  padding-bottom: 56.25%;
  position: relative;
}
.map-container iframe {
  position: absolute;
  top: 0;
  border-radius: 2px;
  left: 0;
}



.slide-up-enter-active, .slide-up-leave-active {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
.slide-up-enter, .slide-up-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.z-cus{
  z-index: 10000;
}

@media only screen and (max-width: 768px) {
  .w-mob{
    max-width: 100%;
    overflow: hidden;
  }
  .h-cos{
    height: 500px;
  }
}


@media screen and (min-width: 678px){
  .h-cos{
    height: 600px;
  }
  .posisi{
    left: 51% !important;
    bottom: 10px !important;
    width: 678px;
    transform: translateX(-50%);
  }
  .posisi .audio-control{
    width: 36px;
  }

}

/* iPad styles */
@media only screen and (min-width: 401px) and (max-width: 1024px) {
  .w-mob{
    position: relative;
    width: 678px;
    margin: 0 auto;
    overflow: hidden;
  }
  .h-cos{
    height: 600px;
  }

}

/* Laptop styles */
@media only screen and (min-width: 1025px) {
  .w-mob{
    position: relative;
    width: 678px;
    margin: 0 auto;
    overflow: hidden;
  }
  .h-cos{
    height: 700px;
  }
}

/* loader */

.bg-loader {
  height: 100vh;
  width: 100vw;
  background: #C65957;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1000ms;
}

.loader {
  position: relative;
  width: 75px;
  height: 100px;
}
.loader__bar {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 50%;
  background: #fff;
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.loader__bar:nth-child(1) {
  left: 0px;
  transform: scale(1, 0.2);
  -webkit-animation: barUp1 4s infinite;
          animation: barUp1 4s infinite;
}
.loader__bar:nth-child(2) {
  left: 15px;
  transform: scale(1, 0.4);
  -webkit-animation: barUp2 4s infinite;
          animation: barUp2 4s infinite;
}
.loader__bar:nth-child(3) {
  left: 30px;
  transform: scale(1, 0.6);
  -webkit-animation: barUp3 4s infinite;
          animation: barUp3 4s infinite;
}
.loader__bar:nth-child(4) {
  left: 45px;
  transform: scale(1, 0.8);
  -webkit-animation: barUp4 4s infinite;
          animation: barUp4 4s infinite;
}
.loader__bar:nth-child(5) {
  left: 60px;
  transform: scale(1, 1);
  -webkit-animation: barUp5 4s infinite;
          animation: barUp5 4s infinite;
}
.loader__ball {
  position: absolute;
  bottom: 10px;
  left: -10px;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20512'%3E%3Cpath%20fill='%23ffffff'%20d='M128%20128c35.3%200%2064-28.7%2064-64S163.3%200%20128%200%2064%2028.7%2064%2064s28.7%2064%2064%2064zm384%200c35.3%200%2064-28.7%2064-64S547.3%200%20512%200s-64%2028.7-64%2064%2028.7%2064%2064%2064zm127.3%20226.5l-45.6-185.8c-3.3-13.5-15.5-23-29.8-24.2-15%209.7-32.8%2015.5-52%2015.5-19.2%200-37-5.8-52-15.5-14.3%201.2-26.5%2010.7-29.8%2024.2l-45.6%20185.8C381%20369.6%20393%20384%20409.2%20384H464v104c0%2013.3%2010.7%2024%2024%2024h48c13.3%200%2024-10.7%2024-24V384h54.8c16.2%200%2028.2-14.4%2024.5-29.5zM336%200h-32c-8.8%200-16%207.2-16%2016v480c0%208.8%207.2%2016%2016%2016h32c8.8%200%2016-7.2%2016-16V16c0-8.8-7.2-16-16-16zM180.1%20144.4c-15%209.8-32.9%2015.6-52.1%2015.6-19.2%200-37.1-5.8-52.1-15.6C51.3%20146.5%2032%20166.9%2032%20192v136c0%2013.3%2010.7%2024%2024%2024h8v136c0%2013.3%2010.7%2024%2024%2024h80c13.3%200%2024-10.7%2024-24V352h8c13.3%200%2024-10.7%2024-24V192c0-25.1-19.3-45.5-43.9-47.6z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
  -webkit-animation: ball 4s infinite;
          animation: ball 4s infinite;
}

@-webkit-keyframes ball {
  0% {
    transform: translate(0, 0);
  }
  5% {
    transform: translate(8px, -14px);
  }
  10% {
    transform: translate(15px, -10px);
  }
  17% {
    transform: translate(23px, -24px);
  }
  20% {
    transform: translate(30px, -20px);
  }
  27% {
    transform: translate(38px, -34px);
  }
  30% {
    transform: translate(45px, -30px);
  }
  37% {
    transform: translate(53px, -44px);
  }
  40% {
    transform: translate(60px, -40px);
  }
  50% {
    transform: translate(60px, 0);
  }
  57% {
    transform: translate(53px, -14px);
  }
  60% {
    transform: translate(45px, -10px);
  }
  67% {
    transform: translate(37px, -24px);
  }
  70% {
    transform: translate(30px, -20px);
  }
  77% {
    transform: translate(22px, -34px);
  }
  80% {
    transform: translate(15px, -30px);
  }
  87% {
    transform: translate(7px, -44px);
  }
  90% {
    transform: translate(0, -40px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes ball {
  0% {
    transform: translate(0, 0);
  }
  5% {
    transform: translate(8px, -14px);
  }
  10% {
    transform: translate(15px, -10px);
  }
  17% {
    transform: translate(23px, -24px);
  }
  20% {
    transform: translate(30px, -20px);
  }
  27% {
    transform: translate(38px, -34px);
  }
  30% {
    transform: translate(45px, -30px);
  }
  37% {
    transform: translate(53px, -44px);
  }
  40% {
    transform: translate(60px, -40px);
  }
  50% {
    transform: translate(60px, 0);
  }
  57% {
    transform: translate(53px, -14px);
  }
  60% {
    transform: translate(45px, -10px);
  }
  67% {
    transform: translate(37px, -24px);
  }
  70% {
    transform: translate(30px, -20px);
  }
  77% {
    transform: translate(22px, -34px);
  }
  80% {
    transform: translate(15px, -30px);
  }
  87% {
    transform: translate(7px, -44px);
  }
  90% {
    transform: translate(0, -40px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes barUp1 {
  0% {
    transform: scale(1, 0.2);
  }
  40% {
    transform: scale(1, 0.2);
  }
  50% {
    transform: scale(1, 1);
  }
  90% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 0.2);
  }
}
@keyframes barUp1 {
  0% {
    transform: scale(1, 0.2);
  }
  40% {
    transform: scale(1, 0.2);
  }
  50% {
    transform: scale(1, 1);
  }
  90% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 0.2);
  }
}
@-webkit-keyframes barUp2 {
  0% {
    transform: scale(1, 0.4);
  }
  40% {
    transform: scale(1, 0.4);
  }
  50% {
    transform: scale(1, 0.8);
  }
  90% {
    transform: scale(1, 0.8);
  }
  100% {
    transform: scale(1, 0.4);
  }
}
@keyframes barUp2 {
  0% {
    transform: scale(1, 0.4);
  }
  40% {
    transform: scale(1, 0.4);
  }
  50% {
    transform: scale(1, 0.8);
  }
  90% {
    transform: scale(1, 0.8);
  }
  100% {
    transform: scale(1, 0.4);
  }
}
@-webkit-keyframes barUp3 {
  0% {
    transform: scale(1, 0.6);
  }
  100% {
    transform: scale(1, 0.6);
  }
}
@keyframes barUp3 {
  0% {
    transform: scale(1, 0.6);
  }
  100% {
    transform: scale(1, 0.6);
  }
}
@-webkit-keyframes barUp4 {
  0% {
    transform: scale(1, 0.8);
  }
  40% {
    transform: scale(1, 0.8);
  }
  50% {
    transform: scale(1, 0.4);
  }
  90% {
    transform: scale(1, 0.4);
  }
  100% {
    transform: scale(1, 0.8);
  }
}
@keyframes barUp4 {
  0% {
    transform: scale(1, 0.8);
  }
  40% {
    transform: scale(1, 0.8);
  }
  50% {
    transform: scale(1, 0.4);
  }
  90% {
    transform: scale(1, 0.4);
  }
  100% {
    transform: scale(1, 0.8);
  }
}
@-webkit-keyframes barUp5 {
  0% {
    transform: scale(1, 1);
  }
  40% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 0.2);
  }
  90% {
    transform: scale(1, 0.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes barUp5 {
  0% {
    transform: scale(1, 1);
  }
  40% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 0.2);
  }
  90% {
    transform: scale(1, 0.2);
  }
  100% {
    transform: scale(1, 1);
  }
}