* {
  box-sizing: border-box !important;
  max-width: 100%;
}

html,
body,
main {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Agar bisa mengikuti tinggi konten */
  min-height: 100vh;
  /* Pastikan tinggi setidaknya sama dengan tinggi layar */
  overflow-x: hidden;
}

.nav-pills .nav-link.active {
  background-color: black !important;
  color: white !important;
}

.login-section,
.register-wrapper {
  /* position: relative; */

  position: relative;
  min-height: 100vh;
  /* Pastikan tinggi setidaknya sama dengan tinggi layar */
  overflow: hidden;
}

.login-wrapper,
.register-form {
  z-index: 20;
  max-height: 80vh;
  overflow-y: auto;
}

.login-background,
.register-background {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Pastikan latar belakang mencakup seluruh layar */
}

.carousel-wrapper {
  height: 50vh;
  object-fit: cover;
}

.profile-section {
  margin-top: 57px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.profile-wrapper {
  position: relative;
  min-height: 100% !important;
}

.profile-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: blue;
  z-index: 1;
}

.profile-user {
  position: relative;
  z-index: 2;
  top: 125px;
  border-radius: 50px 50px 0 0;
}

.user-img {
  aspect-ratio: 1/1;
  position: absolute;
  top: -75px;
  width: 150px;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid white;
}

.profile-desc {
  margin-top: 75px;
}

form.profile-detail {
  margin-top: 60px !important;
}

.user-fullname {
  font-size: 1.3rem;
}

.outlie-none {
  outline: none;
}

.border-none {
  border: none;
}

.order-container {
  height: 92vh;
}

.order-section {
  margin-top: 56px;
}

.payment-container {
  margin-top: 57px;
  height: calc(100% - 57px);
  width: 90%;
}

/* #order-success {
  position: absolute;
  top: 12%;
} */

@media (min-width: 500px) {
  .user-img {
    top: -90px;
    width: 180px;
  }

  .profile-desc {
    margin-top: 90px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .login-section,
  .register-wrapper,
  .login-background,
  .register-background {
    position: sticky;
  }

  .login-background {
    border-radius: 30px 0 0 30px;
  }

  .register-background {
    border-radius: 0 30px 30px 0;
  }

  .login-wrapper,
  .register-form {
    width: 40% !important;
  }

  .login-background,
  .register-background {
    width: 60% !important;
  }

  .profile-user {
    border-radius: 0;
    top: 300px;
  }

  .user-img {
    top: -100px;
    width: 200px;
  }

  .profile-desc {
    margin-top: 0;
  }

  .user-fullname {
    font-size: 2rem;
  }

  .order-container {
    width: 75%;
    margin: 0 auto;
  }

  .payment-container {
    width: 50%;
  }
}

@media (min-width: 1170px) {
  .order-container {
    width: 65%;
  }
}