@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');

@font-face {
  font-family: "sf";
  src: url('./assets/fonts/ValeryRegular.woff') format('woff');
}


.alex {
  font-family: 'Alex Brush', cursive;
}

.garamon {
  font-family: 'EB Garamond', serif;
}

.valery {
  font-family: 'sf';
}


.text-custom{
  font-size: 6rem;
}

.bg-300 {
  background-color: #eae2dc;
}

.bg-100 {
  background-color: #bcc6bd;
}

.bg-200 {
  background-color: #89565c;
}

.text-100 {
  color: #89565c;
}

.text-200 {
  color: #404040;
}

.border-100 {
  border-color: #89565c;

}


.bg-gradient {
  background: linear-gradient(180deg, #00000000 0%, #eae2dc 100%);
}

.scale-custom {
  transform: scale(3.5);

}

.miror {
  transform: scaleX(-1);
}

.miroryx {
  transform: scaleY(-1) scaleX(-1);
}

.mirory {
  transform: scaleY(-1);
}

.transform-rotate90-scaley-1-scalex-1 {
  transform: rotate(-90deg) scaleX(-1) scaleY(-1);
}

.transform-rotate90-scalex-1 {
  transform: rotate(-90deg) scalex(-1);

}

.transform-rotate180-scaley-1 {
  transform: rotate(180deg) scaleY(-1);

}

.h-custom {
  height: 700px;
}

.h-custom-3 {
  height: 500px;
}

.h-custom-1 {
  height: 1650px;
}

.h-custom-2 {
  height: 1300px;
}

.h-custom-4 {
  height: 900px;
}

.rounded-custom {
  border-radius: 0 15rem 0 0;
}

.onHover {
  transition: transform 0.5s ease-in-out;
}

.onHover:hover {
  transform: scale(1.03);
}


.even-img {
  border-radius: 0 2rem 0 0;
}

.odd-img {
  border-radius: 2rem 0 0 0;
}

.content-container::-webkit-scrollbar {
  display: none;
}



.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;
}



.scroll-container::-webkit-scrollbar {
  display: none;
}
.scroll-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}



.no-horizontal-scroll {
  overflow-x: hidden;
  word-wrap: break-word;
}

.y-hidden {
  overflow-y: auto;
  scrollbar-width: none;
}
.y-hidden::-webkit-scrollbar {
  display: none;
}

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

.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;
}

.image-preview {
  display: none;
}

.image-preview.open {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.thumbnail-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}




@media (min-width: 320px) and (max-width: 320px) {
  .h-custom-sc {
    height: 750px;
  }

}
@media (min-width: 344px) and (max-width: 344px) {
  .h-custom-sc {
    height: 90px;
  }

}
@media (min-width: 360px) and (max-width: 360px) {
  .h-custom-sc {
    height:   900px;
  }
}
@media (min-width: 375px) and (max-width: 375px) {
  .h-custom-sc {
    height: 900px;
  }
}
@media (min-width: 390px) and (max-width: 390px) {
  .h-custom-sc {
    height: 950px;
  }
}

@media  (min-width: 400px) and (max-width: 500px) {
  .h-custom-sc {
    height: 820px;
  }
  .ilang {
    display: none;
  }
  .ilangs{
    display: none;
  }

}
@media  (min-width: 540px) and (max-width: 678px) {
  .h-custom-sc {
    height: 1050px;
  }
  .ilang {
    display: none;
  }
  .ilangs{
    display: none;
  }

}


@media (min-width: 768px) and (max-width: 768px) {
  .h-custom-sc {
    height: 800px;
  }

}
@media (min-width: 820px) and (max-width: 840px) {
  .h-custom-sc {
    height: 950px;
  }
}
@media (min-width: 841px) and (max-width: 940px) {
  .h-custom-sc {
    height: 1060px;
  }
}

@media (max-width: 600px) {

  .h-custom-3 {
    height: 500px;
  }

  .h-x {
    height: 300px;
  }

  .w-y {
    width: 300px;
  }

  .w-custom {
    width: max-content;
  }

  .h-custom-p {
    height: 600px;
  }

  .h-custom-c {
    height: 800px;
  }

  .h-custom-l {
    height: 700px;
  }

  .h-custom-k {
    height: 1200px;
  }
}

@media screen and (max-width: 800px) {
  .h-custom-3 {
    height: 700px;
  }
  .h-custom-w {
    height: 800px;
  }
  .h-custom-pria{
    height: 650px;
  }

}

@media screen and (min-width: 799px) {
  .h-custom-3 {
    height: 900px;
  }
  .agenda{
    display: none;
  }

}


@media screen and (min-width: 601px) {
  .scale-custom {
    transform: scale(1.5);
  }

  .h-custom {
    height: 1000px;
  }

  .h-custom-pria{
    height: 900px;
  }
  .h-x {
    height: 700px;
  }

  .w-y {
    width: 700px;
  }

  .h-custom-4 {
    height: 1000px;
  }

  .h-custom-2 {
    height: 1700px;
  }

  .h-custom-p {
    height: 800px;
  }

  .h-custom-l {
    height: 750px;
  }

  .even-img {
    border-radius: 1.5rem;
  }

  .odd-img {
    border-radius: 1.5rem;
  }

  .h-custom-k {
    height: 1400px;
  }

  .h-custom-1 {
    height: 2600px;
  }

  .h-custom-c {
    height: 800px;
  }
  .h-custom-w {
    height: 1100px;
  }

  .w-custom {
    width: 700px;
  }
}

@media (min-width: 1024px) {


  .h-custom-pria{
    height: 650px;
  }
  .h-custom-2 {
    height: 1450px;
  }
  .agenda{
    display: block;
  }

  .h-custom-p {
    height: 600px;
  }

  .scale-custom {
    transform: scale(2.5);
  }

  .h-custom-4 {
    height: 1000px;
  }

  .h-custom-c {
    height: 700px;
  }
  .h-custom-w {
    height: 900px;
  }

  .h-custom-l {
    height: 650px;
  }

  .h-custom-3 {
    height: 500px;
  }

  .h-x {
    height: 400px;
  }

  .w-y {
    width: 400px;
  }

  .h-custom-1 {
    height: 1600px;
  }

  .h-custom-k {
    height: 1200px;
  }

  .even-img {
    border-radius: 0 2rem 0 0;
  }

  .odd-img {
    border-radius: 2rem 0 0 0;
  }
}


@keyframes cloudMove1 {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  10% {
    transform: translateX(0px);
    opacity: 1;
  }

  50% {
    transform: translateX(200px);
    opacity: 1;
  }

  90% {
    transform: translateX(400px);
    opacity: 1;
  }

  100% {
    transform: translateX(500px);
    opacity: 0;
  }
}

@keyframes cloudMove2 {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  10% {
    transform: translateX(0px);
    opacity: 1;
  }

  50% {
    transform: translateX(200px);
    opacity: 1;
  }

  90% {
    transform: translateX(400px);
    opacity: 1;
  }

  100% {
    transform: translateX(500px);
    opacity: 0;
  }
}

@keyframes cloudMove3 {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  10% {
    transform: translateX(0px);
    opacity: 1;
  }

  50% {
    transform: translateX(200px);
    opacity: 1;
  }

  90% {
    transform: translateX(400px);
    opacity: 1;
  }

  100% {
    transform: translateX(500px);
    opacity: 0;
  }
}

@keyframes cloudMove4 {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  10% {
    transform: translateX(0px);
    opacity: 1;
  }

  50% {
    transform: translateX(200px);
    opacity: 1;
  }

  90% {
    transform: translateX(400px);
    opacity: 1;
  }

  100% {
    transform: translateX(500px);
    opacity: 0;
  }
}


.cloud1 {
  animation: cloudMove1 25s linear infinite;
  animation-delay: 0s;
}

.cloud2 {
  animation: cloudMove2 15s linear infinite;
  animation-delay: 15s;
}

.cloud3 {
  animation: cloudMove3 35s linear infinite;
  animation-delay: 5s; /* 10 seconds delay */
}

.cloud4 {
  animation: cloudMove4 15s linear infinite;
  animation-delay: 10s; /* 3 seconds delay */
}


@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* untuk 1 acara */
.inner-background1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  clip-path: polygon(10% 20%, 90% 20%, 90% 92%, 10% 92%); /* Sesuaikan agar menutupi bagian dalam tiang */
  z-index: 1;
}
/* untuk 2 acara */
.inner-background2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  clip-path: polygon(10% 12%, 90% 12%, 90% 95%, 10% 95%); /* Sesuaikan agar menutupi bagian dalam tiang */
  z-index: 1;
}
/* untuk 4 acara */
.inner-background4 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  clip-path: polygon(10% 12%, 90% 12%, 90% 95%, 10% 95%); /* Sesuaikan agar menutupi bagian dalam tiang */
  z-index: 1;
}

.bg-loader {
  height: 100vh;
  width: 100vw;
  background: #e6dcd4;
  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: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 75px;
    display: inline-block;
    vertical-align: middle;
}

.loader-star {
    position: absolute;
    top: calc(50% - 12px);
}

/*LOADER-2*/

.loader-2 .loader-star {
    position: static;
    width: 60px;
    height: 60px;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
        transform: scale(0.7);
    -webkit-animation: loader-2-star 1s ease alternate infinite;
    animation: loader-2-star 1s ease alternate infinite;
}

.loader-2 .loader-circles {
    width: 8px;
    height: 8px;
    background: #89565c;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 4px);
    top: calc(50% - 4px);
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-animation: loader-2-circles 1s ease-in-out alternate infinite;
    animation: loader-2-circles 1s ease-in-out alternate infinite;
}
/* ----------------     KEYFRAMES    ----------------- */
@-webkit-keyframes loader-2-circles {
    0% {
        -webkit-box-shadow: 0 0 0 #89565c;
        box-shadow: 0 0 0 #89565c;
        opacity: 1;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-box-shadow: 24px -22px #89565c, 30px -15px 0 -3px #89565c, 31px 0px #89565c, 29px 9px 0 -3px #89565c, 24px 23px #89565c, 17px 30px 0 -3px #89565c, 0px 33px #89565c, -10px 28px 0 -3px #89565c, -24px 22px #89565c, -29px 14px 0 -3px #89565c, -31px -3px #89565c, -30px -11px 0 -3px #89565c, -20px -25px #89565c, -12px -30px 0 -3px #89565c, 5px -29px #89565c, 13px -25px 0 -3px #89565c;
        box-shadow: 24px -22px #89565c, 30px -15px 0 -3px #89565c, 31px 0px #89565c, 29px 9px 0 -3px #89565c, 24px 23px #89565c, 17px 30px 0 -3px #89565c, 0px 33px #89565c, -10px 28px 0 -3px #89565c, -24px 22px #89565c, -29px 14px 0 -3px #89565c, -31px -3px #89565c, -30px -11px 0 -3px #89565c, -20px -25px #89565c, -12px -30px 0 -3px #89565c, 5px -29px #89565c, 13px -25px 0 -3px #89565c;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-box-shadow: 25px -22px #89565c, 15px -22px 0 -3px black, 31px 2px #89565c, 21px 2px 0 -3px black, 23px 25px #89565c, 13px 25px 0 -3px black, 0px 33px #89565c, -10px 33px 0 -3px black, -26px 24px #89565c, -19px 17px 0 -3px black, -32px 0px #89565c, -23px 0px 0 -3px black, -25px -23px #89565c, -16px -23px 0 -3px black, 0px -31px #89565c, -2px -23px 0 -3px black;
        box-shadow: 25px -22px #89565c, 15px -22px 0 -3px black, 31px 2px #89565c, 21px 2px 0 -3px black, 23px 25px #89565c, 13px 25px 0 -3px black, 0px 33px #89565c, -10px 33px 0 -3px black, -26px 24px #89565c, -19px 17px 0 -3px black, -32px 0px #89565c, -23px 0px 0 -3px black, -25px -23px #89565c, -16px -23px 0 -3px black, 0px -31px #89565c, -2px -23px 0 -3px black;
    }
}

@keyframes loader-2-circles {
    0% {
        -webkit-box-shadow: 0 0 0 #89565c;
        box-shadow: 0 0 0 #89565c;
        opacity: 1;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-box-shadow: 24px -22px #89565c, 30px -15px 0 -3px #89565c, 31px 0px #89565c, 29px 9px 0 -3px #89565c, 24px 23px #89565c, 17px 30px 0 -3px #89565c, 0px 33px #89565c, -10px 28px 0 -3px #89565c, -24px 22px #89565c, -29px 14px 0 -3px #89565c, -31px -3px #e11a2b, -30px -11px 0 -3px #89565c, -20px -25px #89565c, -12px -30px 0 -3px #89565c, 5px -29px #89565c, 13px -25px 0 -3px #89565c;
        box-shadow: 24px -22px #89565c, 30px -15px 0 -3px #89565c, 31px 0px #89565c, 29px 9px 0 -3px #89565c, 24px 23px #89565c, 17px 30px 0 -3px #89565c, 0px 33px #89565c, -10px 28px 0 -3px #89565c, -24px 22px #89565c, -29px 14px 0 -3px #89565c, -31px -3px #89565c, -30px -11px 0 -3px #89565c, -20px -25px #89565c, -12px -30px 0 -3px #89565c, 5px -29px #89565c, 13px -25px 0 -3px #89565c;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-box-shadow: 25px -22px #89565c, 15px -22px 0 -3px black, 31px 2px #89565c, 21px 2px 0 -3px black, 23px 25px #89565c, 13px 25px 0 -3px black, 0px 33px #89565c, -10px 33px 0 -3px black, -26px 24px #89565c, -19px 17px 0 -3px black, -32px 0px #89565c, -23px 0px 0 -3px black, -25px -23px #89565c, -16px -23px 0 -3px black, 0px -31px #89565c, -2px -23px 0 -3px black;
        box-shadow: 25px -22px #89565c, 15px -22px 0 -3px black, 31px 2px #89565c, 21px 2px 0 -3px black, 23px 25px #89565c, 13px 25px 0 -3px black, 0px 33px #89565c, -10px 33px 0 -3px black, -26px 24px #89565c, -19px 17px 0 -3px black, -32px 0px #89565c, -23px 0px 0 -3px black, -25px -23px #89565c, -16px -23px 0 -3px black, 0px -31px #89565c, -2px -23px 0 -3px black;
    }
}

@-webkit-keyframes loader-2-star {
    0% {
        -webkit-transform: scale(0) rotate(0deg);
        transform: scale(0) rotate(0deg);
    }
    100% {
        -webkit-transform: scale(0.7) rotate(360deg);
        transform: scale(0.7) rotate(360deg);
    }
}

@keyframes loader-2-star {
    0% {
        -webkit-transform: scale(0) rotate(0deg);
        transform: scale(0) rotate(0deg);
    }
    100% {
        -webkit-transform: scale(0.7) rotate(360deg);
        transform: scale(0.7) rotate(360deg);
    }
}