@media (max-width: 768px) {
  /* Mobile & Tablet View */
  .navbar {
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.3)
    ) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(95, 95, 95, 0.2);

    bottom: 0;
  }
  .nav {
    width: 100%;
    justify-content: space-evenly;
  }
  .nav-link,
  .dropdown-item {
    color: #ffffff !important;
  }
  .bi-search.fs-cust01 {
    font-size: 2rem;
  }
  .dropdown-menu {
    top: auto !important;
    bottom: 100%;
    translate: -70% -15%;
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.3)
    ) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(95, 95, 95, 0.2);
    border-radius: 20px 20px 0 20px;
    transition: all 300ms ease-in-out;
  }

  .dropdown-item:hover {
    border-radius: 0.5rem !important;
  }
  #hero {
    height: 65vh !important;
  }

  .service .open-call {
    bottom: 12vh !important;
  }

  footer {
    padding-bottom: 10vh;
  }
}
body {
  overflow-x: hidden;
}
.bg-karir {
  background-image: url(../Asset/img/fotoKaryawanPwt-3.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.overlay {
  border-image: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    )
    fill 1;
}
.glass {
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}
.btn-close {
  transition: all 300ms linear;
}
.btn-close:hover {
  rotate: 180deg;
}
.bi-search.btn.btn-info.text-white {
  transition: all 300ms ease-in-out;
}
.bi-search.btn.btn-info.text-white:hover {
  color: #0aaf0c !important;
  background: none;
  border: none;
  font-weight: bolder;
}
.bi-x-lg.btn.btn-danger {
  transition: all 300ms ease-in-out;
}
.bi-x-lg.btn.btn-danger:hover {
  background: none;
  color: red !important;
  border-radius: 1rem;
  border: none;
  font-weight: bolder;

  rotate: 180deg;
}
.search-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 0 1rem;
  max-width: 500px;
  width: 80vw;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0 15px 0;
  z-index: 12;
}
.navglass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar {
  position: fixed;
  z-index: 10;
  height: 10vh;
  width: 100%;
  transition: all 300ms ease-in-out;
}
.nav-link,
.dropdown-item {
  color: #000;
  transition: all 300ms ease-in-out;
  margin: 0 5px;
}
.active-link,
.nav-link:hover,
.dropdown-item:hover {
  color: #fff;
  background: #076709;
  border-radius: 1rem;
}
.cabang-link i {
  transition: all 300ms ease-in-out;
  margin-bottom: 1rem;
}
.cabang-link:hover i {
  font-size: 2.5rem;
  margin: 0;
}
#hero {
  height: 90vh;
  overflow: hidden;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.karir {
  background-image: url(../Asset/img/fotoKaryawanPwt-1.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 -75px 1000px 0;
}
#welcome {
  background-image: url(../Asset/img/ELY\ Carenza\ Bianca\ Polished\ 12x24.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#keunggulan {
  background: #adfaff;
}

/* These only work if you put required in your input or textarea attribute */
.input-group {
  margin: 1rem 0 1rem 0;
  position: relative;
}
.input-group input,
.input-group textarea {
  background-color: inherit;
  width: 100%;
  padding: 10px;
  border: 2px solid black;
  border-radius: 10px !important;
  outline: none;
}
.input-group label {
  position: absolute;
  left: 0;
  padding: 10px;
  pointer-events: none;
  transition: all 350ms ease-out;
}
.input-group input:valid ~ label,
.input-group input:focus ~ label,
.input-group textarea:valid ~ label,
.input-group textarea:focus ~ label {
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 0 10px;
  background-color: inherit;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-radius: 3.5px !important;
  transform: translate(0.8rem, -0.5rem);
}
.service {
  transition: all 300ms ease-in-out;
}
.service-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #0000008d;
  z-index: 11;
}
.service .open-call {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 1.5rem;
  color: #fff;
  background: #076709;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 300ms ease-in-out;
}
.service .open-call:hover {
  transform: scale(1.2);
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

footer {
  color: #fff;
  background: #555;
}
.sosial-icon {
  color: #fff;
  transition: all 300ms ease-in-out;
}
.sosial-icon:hover {
  color: #000;
  background: #fff;
  padding: 3px 5px;
  border-radius: 5px;
}
.footer-link {
  text-decoration: none;
}
.footer-link:hover {
  text-decoration: underline;
}