.jumbotron {
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(../img/hero.webp) no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
  overflow: hidden;
  height: 100vh;
  animation: zoomHero 25s ease-in-out infinite;
}

@keyframes zoomHero {

  0%,
  100% {
    background-size: 100%;
  }

  50% {
    background-size: 120%;
  }
}

.active {
  color: #FBE9A1 !important;
}

.navbar {
  background-color: rgba(0, 0, 0, 0.5);
}

.navbar-scroll {
  background-color: rgb(19, 19, 19) !important;
}

.navbar-custom {
  background-color: rgb(19, 19, 19) !important;
}

.hero-slogan {
  font-family: "Roboto";
  letter-spacing: 1.5px;
  color: white;
  font-size: 56px;
}

p {
  text-align: justify !important;
}

li::marker {
  color: #FBE9A1;
}

.menu {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../img/bg-menu.webp) no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
  overflow: hidden;
}

.testimoni {
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url(../img/bg-testimone.webp) no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
  overflow: hidden;
}

input::placeholder {
  color: silver !important;
}

textarea::placeholder {
  color: silver !important;
}

input,
textarea {
  background-color: black !important;
}

input:focus,
textarea:focus {
  background-color: black !important;
}

input,
textarea {
  -webkit-user-modify: read-write-plaintext-only;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #000 inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}


input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #000 inset !important;
  -webkit-text-fill-color: #fff !important;
}

.form-control.is-invalid {
  border-color: brown !important;
  box-shadow: 0 0 6px rgba(255, 77, 77, 0.6);
}

/* teks error */
.text-danger.error {
  display: block;
  color: red;
  margin-top: 5px;
  font-size: 0.9em;
}

.form-contact input::placeholder {
  color: rgb(104, 104, 104) !important;
}

.form-contact textarea::placeholder {
  color: rgb(104, 104, 104) !important;
}

.form-control:focus {
  box-shadow: none !important;
  border-color: #FBE9A1 !important;
  outline: none;
}

.gallery img {
  width: 100%;
  height: 100%;
}

.btn-gallery {
  border-color: #FBE9A1;
  color: #FBE9A1;
  width: 150px;
}

.btn-gallery:hover {
  background-color: #FBE9A1;
  color: black;
}

.facebook {
  display: inline-block;
  background-color: #6c757d;
  mask-image: url(../img/facebook.png);
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 50px;
  height: 50px;
}

.instagram {
  display: inline-block;
  background-color: #6c757d;
  mask-image: url(../img/instagram.png);
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 50px;
  height: 50px;
}

.tiktok {
  display: inline-block;
  background-color: #6c757d;
  mask-image: url(../img/tiktok.png);
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 50px;
  height: 50px;
}

.youtube {
  display: inline-block;
  background-color: #6c757d;
  mask-image: url(../img/youtube.png);
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 50px;
  height: 50px;
}

.socialmedia img {
  display: none;
}

.socialmedia:hover {
  background-color: #FBE9A1;
}

.about-page {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../img/bg-menu.webp) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-color: black;
  background-size: 100% 100%;
  height: 100vh;
  overflow: hidden;
  color: white;
}

.service-page {
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
    url(../img/bg-service.webp) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-color: black;
  background-size: 100% 100%;
  height: 100vh;
  overflow: hidden;
  color: white;
}

.gallery-page {
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
    url(../img/bg-gallery.webp) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-color: black;
  background-size: 100% 100%;
  height: 100vh;
  overflow: hidden;
  color: white;
}

.menu-page {
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url(../img/bg-page-menu.webp) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-color: black;
  background-size: 100% 100%;
  height: 100vh;
  overflow: hidden;
  color: white;
}

.page-menu {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../img/bg-page.webp) no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
}

.title-page {
  text-align: center;
  font-family: 'Roboto';
  letter-spacing: 1px;
}

.content {
  background: rgba(0, 0, 0, 0.3);
  padding: 100px;
  margin-top: 50px;
  border-radius: 20px;
}

.list-menu {
  transition: transform 0.4s ease;
  cursor: pointer;
}

.list-menu:hover {
  transform: scale(1.2);
  z-index: 5;
}

#menuModal {
  background: rgba(0, 0, 0, 0.7);
}

#nextBtn:hover {
  color: goldenrod;
}

#prevBtn:hover {
  color: goldenrod;
}

.box-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 25px;
}

.box-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}