/* Remove unused CSS rules that are replaced by Tailwind */
.bg-blured {
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.bg-kuning {
  background-color: #fef08a;
}
.text-kuning {
  color: #fef08a;
}
.ring-kuning {
  --tw-ring-color: #fef08a;
}
.border-kuning {
  border-color: #fef08a;
}

* {
  font-family: "Ogg";
}

body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

span {
  overflow: hidden;
  display: block;
}

.loader-wrap svg {
  width: 100vw;
  height: 110vh;
}

@media (max-width: 767px) {
  .loader-wrap svg {
    width: 200vw;
    margin-left: -50vw;
  }
  .loader-wrap .loader-wrap-heading h1,
  .container h1 {
    font-size: 60px;
  }
}

/* New Style */
#icon {
  position: fixed;
  top: 20px;
  left: 5%;
  pointer-events: none;
  color: #000;
  font-size: 2em;
}

#open-btn {
  cursor: pointer;
  position: fixed;
  top: 35px;
  right: 5%;
  width: 30px;
  height: 20px;
}

.bars {
  width: 30px;
  height: 4px;
  background: #fef08a;
}

.bars::before,
.bars::after {
  content: "";
  position: fixed;
  width: 30px;
  height: 4px;
  background: #fef08a;
}

.bars::before {
  margin-top: 9px;
}

.bars::after {
  margin-top: 18px;
}

nav {
  position: fixed;
  width: 100%;
  height: 30px;
  background: #fef08a;
  display: flex;
  justify-content: center;
  align-items: center;
  right: -200vw;
}

nav ul {
  list-style: none;
}

nav ul li {
  margin: 50px 0;
}

nav ul li a {
  color: #000;
  font-size: 2em;
  text-decoration: none;
  font-weight: 525;
  position: relative;
  opacity: 0;
  pointer-events: none;
}

nav ul li a:after {
  content: "";
  width: 100%;
  position: absolute;
  height: 3px;
  border-radius: 5px;
  background: #000;
  bottom: -10px;
  left: 0;
  transform-origin: left;
  transition: transform 0.5s ease;
  transform: scaleX(0);
}

nav ul li a:hover:after {
  transform: scaleX(1);
}

nav .close {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 28px;
  right: 5%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
}

nav h2 {
  position: absolute;
  font-weight: 600px;
  top: 20px;
  left: 5%;
  opacity: 0;
  pointer-events: none;
  color: #000;
  font-size: 2em;
}

nav .close div::before,
nav .close div::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 4px;
  background: #000;
  transition: background 0.5s ease;
}

nav .close div::before {
  transform: rotate(-45deg);
}

nav .close div::after {
  transform: rotate(45deg);
}

nav .close:hover div::before,
nav .close:hover div::after {
  background: red;
}

@media (max-width: 992px) {
  h1 {
    font-size: 25px;
  }
}

input::placeholder {
  color: black;
}

textarea::placeholder {
  color: black;
}

/* Tanda Titik Foto */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active,
.dot:hover {
  background-color: #ffe001;
}

@media (max-width: 820px) {
  /* Dot Loader */
  .loader {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4.6px);
    -webkit-backdrop-filter: blur(4.6px);
    padding: 20px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 6px;
    z-index: 99;
  }

  .dots {
    width: 9.6px;
    height: 9.6px;
    border-radius: 50%;
    clip-path: inset(-36px);
    color: #ffe001;
    box-shadow: -48px 12px, -48px 12px, -48px 12px;
    transform: translateY(-12px);
    animation: dots-ejq2atsm 1.2s infinite linear;
  }

  @keyframes dots-ejq2atsm {
    16.67% {
      box-shadow: -48px 12px, -48px 12px, 15.2px 12px;
    }

    33.33% {
      box-shadow: -48px 12px, 0px 12px, 15.2px 12px;
    }

    40%,
    60% {
      box-shadow: -15.2px 12px, 0px 12px, 15.2px 12px;
    }

    66.67% {
      box-shadow: -15.2px 12px, 0px 12px, 48px 12px;
    }

    83.33% {
      box-shadow: -15.2px 12px, 48px 12px, 48px 12px;
    }

    100% {
      box-shadow: 48px 12px, 48px 12px, 48px 12px;
    }
  }
}