body {
  /* font-family: "Inter", sans-serif; */
  font-family: "Noto Serif SC", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.nav-scroll {
  background-color: #223A50;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* menus */

.dropdown.hidden + .backdrop {
  display: none !important;
}

.dropdown + .backdrop {
  display: block !important;
}

.dropdown ul li.active a svg {
  opacity: 0;
}

/* Slide */

.splide__arrow.splide__arrow--prev {
  left: 6em;
  top: 40%;
  background: #A8905D !important;
  opacity: 1;
  width: 60px;
  height: 60px;
  transition: all 0.1s ease-in-out;
  transform: scale(1);
}

.splide__arrow.splide__arrow--prev:hover {
  opacity: 1;
  transform: scale(1.05) !important;
}

.splide__arrow.splide__arrow--prev:active {
  opacity: 1;
  transform: scale(1.05) !important;
}

.splide__arrow.splide__arrow--next {
  right: 6em;
  top: 40%;
  background: #A8905D !important;
  opacity: 1;
  width: 60px;
  height: 60px;
  transition: all 0.1s ease-in-out;
  transform: scale(1);
}

.splide__arrow.splide__arrow--next:hover {
  opacity: 1;
  transform: scale(1.05) !important;
}

.splide__arrow.splide__arrow--next:active {
  opacity: 1;
  transform: scale(1.1) !important;
}

.splide__arrow svg {
  fill: #fff;
  height: 30px;
  width: 30px;
}


/* tabs */

.filter-button.active {
  color: #A8905D;
}

#fitur-stok-tab li button {
  color: #222;

}

#fitur-stok-tab li button.text-blue-600 {

  color: #fff;
  background-color: #A8905D;
  transform: scale(1.05) !important;

}




/* effects */


.pop {
  transition: all 0.1s ease-in-out;
}
.pop:hover {
  transform: scale(1.02) !important;
}
.pop:active {
  transform: scale(1.1) !important;
}

.transition-all-eio {
  transition: all 0.1s ease-in-out;
}

/* animate */

.dream-bg {
  animation: dream 30s linear infinite both;
}

.home-bg {
  animation: dream 30s linear infinite both;
}

@keyframes dream {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }

  100% {
    color: #A8905D;
    opacity: 1;
  }
}

.typed-cursor {
  animation: blink 1s infinite;
  font-weight: lighter;
  font-size: smaller;
}

.fadein {
  opacity: 0;
  transition: all 1.5s;
  transform: translate(0, 100px);
}

.fadein.visible {
  opacity: 1;
  transform: translate(0, 0);
}


/* responsive */

@media screen and (min-width: 720px) {
  .sticky-scroll {
    position: fixed;
    top: 80px;
  
  }

  .sticky-scroll-down {
    position: absolute;
    bottom: 0px;
  
  }
  
}

@media screen and (max-width: 720px) {
  .nav-swiv {
    background-color: #223A50;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
      0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
      0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }


  .splide__arrow.splide__arrow--prev {
    left: 1em;
    top: 40%;
    background: #A8905D !important;
    opacity: 1;
    width: 60px;
    height: 60px;
    transition: all 0.1s ease-in-out;
    transform: scale(1);
  }
  
  .splide__arrow.splide__arrow--next {
    right: 1em;
    top: 40%;
    background: #A8905D !important;
    opacity: 1;
    width: 60px;
    height: 60px;
    transition: all 0.1s ease-in-out;
    transform: scale(1);
  }
}