body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}
::-webkit-scrollbar {
  display: none;
}
a:hover, a:focus {
  text-decoration: none;
}
.button-custom {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.navbar-custom {
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  z-index: 999;
  padding: 0 35px;
}
.navbar-custom .nav-link {
  padding: 1.5rem 1rem;
}
.login-btn-container .nav-link {
  padding: 0;
}
.dropdown-select-text {
  color: #000000 !important;
}
nav .navbar-nav li a{
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  letter-spacing: -0.01em;
  /* color: #FFFFFF !important; */
}
.nav-link {
  color: #FFFFFF !important;
}
.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 0;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
}

.navbar-brand {
  margin-right: 0;
}

.company-logo {
  /* width: 42.78px; */
  height: 50px;
  margin-right: 2rem;
  /* margin-left: 65px; */
}

.right-menu-container {
  display: flex;
  flex-direction: row;
  gap: 35px;
  /* margin-right: 50px; */
}
.location-navbar {
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.login-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4px 16px 6px;
  gap: 8px;
  width: 76px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 16px;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #083CA3;
  border: none;
}
.login-btn:hover, .login-btn:focus {
  opacity: 80%;
}
.navbar-custom .dropdown-menu {
  margin: 0;
  left: 2rem;
  top: 80%;
}
.login-btn-container {
  position: relative;
}
.login-btn-container .dropdown-menu {
  margin: 0;
  right: 0;
  top: 100%;
  left: auto;
}
.nav-dark .dropdown-menu a, .login-btn-container .dropdown-menu a {
  color: #505E73 !important;
  text-align: left;
  padding: 0.75rem 1.5rem;
}

.nav-dark .dropdown-menu a:hover, .login-btn-container .dropdown-menu a:hover {
  background-color: rgb(247,247,247);
}

.nav-dark .dropdown-menu a:focus, .login-btn-container .dropdown-menu a:focus {
  background-color: rgb(247,247,247);
}

.nav-dark .dropdown-menu, .login-btn-container .dropdown-menu {
  background-color: #ffffff;
  width: 15rem;
  border-radius: 1rem;
  overflow: hidden;
}

.nav-link .hot-badge {
  padding: 0.2rem 0.6rem;
  background-color: #ee2d34;
  border-radius: 20%;
  margin-right: 5px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.hot-badge p{
  margin: 0;
  padding: 0;
}
.welcome-image-container {
  background: radial-gradient(61.03% 97.59% at 50% 50%, #31617C 0%, #01091C 100%);
}

.img-container {
  width: 100%;
  display: inline-block;
  position: relative;
}
.carousel-welcome-img{
  position: absolute;
  left: 5%;
  top: 25%;
  color: white;
  padding: 4px;
  font-size: 17px;
  line-height: 18px;
  width: 40%;
}
.custom-carousel-welcome li {
  /* display: none !important; */
  width: 15px !important;
  height: 15px !important;
  margin-right: 5px !important;
  margin-left: 5px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 0.1rem rgb(255, 255, 255) !important;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
}
.carousel-welcome-inside {
  width: 11px;
  height: 11px;
  border-radius: 100% !important;
  border: none;
}
.custom-carousel-welcome {
  bottom: -3rem;
}
.container-show-schedule {
  height: 15%;
  width: 100%;
  position: absolute;
  bottom: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-show-schedule {
  display: none;
}
.close-button-container {
  position: absolute;
  top: 5%;
  cursor: pointer;
  color: black;
  right: 10px;
  display: none;
  font-size: 25px;
}
.schedule-container{
  z-index: 20;
  position: absolute;
  left: 5%;
  bottom: 5%;
  color: white;
  padding: 4px;
  font-size: 17px;
  line-height: 18px;
  width: 90%;
  height: 15%;
  background: #FFFFFF;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  display: flex;
  flex-direction: row;
}
.schedule {
  height: 100%;
  width: 23%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.schedule-btn-container {
  height: 100%;
  width: 31%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.schedule-btn-container button {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: none;
  gap: 16px;
  width: 90%;
  height: 45%;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  outline: none;
  text-align: center;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.schedule-data {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: start;
  align-items: start;
}
.schedule-data-label {
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.schedule-data-select {
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.promo-container {
  width: 100%;
  height: 332px;
  left: 0px;
  top: 862px;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.promo-banner {
  width: 100%;
  height: 80%;
  display: flex;
  overflow-x: scroll;
  align-items: center;
  gap: 40px;
  padding-left: 40px;
}
.promo-image{
  min-width: 355px;
  height: 206px;
  border-radius: 16px;
}
.promo-image img{
  min-width: 355px;
  height: 206px;
  border-radius: 16px;
}
.arrow-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;
  width: 229px;
  height: 28px;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.arrow-btn {
  cursor: pointer;
}
.label-departure-container {
  width: 90%;
  height: 50px;
  margin-top: 5%;
  margin-left: 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.label-departure {
  font-weight: 600;
  font-size: 32px;
  line-height: 44px;
  letter-spacing: -0.01em;
  color: #394352;
}
.see-all-link {
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.01em;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.package-card-container {
  width: 90%;
  margin-left: 5%;
  min-height: 100px;
  margin-top: 5%;
}
.card-body {
  padding: 10px 0 10px 0;
}
.custom-card-package{
  border: none !important;
  font-size: 16px;
  letter-spacing: -0.01em;
  width: 100%;
  display: flex;
  justify-content: start;
}
.date-package {
  font-weight: 500;
  color: #8A93A1;
}
.title-package {
  margin-top: 10px;
  font-weight: 600;
  font-size: 16px;
  color: #000000;
}
.price-package {
  margin-top: 10px;
  font-weight: 500;
  font-size: 16px;
  color: #1B842C;
}
.package-detail-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.package-detail-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.label-detail-package {
  font-weight: 400;
  color: #8A93A1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}
.value-detail-package {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  color: #2C343F;
}
.value-detail-package img {
  margin-right: 5px;
}
.quota-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.quota-fullfiled {
  font-weight: 500;
  font-size: 14px;
  color: #2C343F;
}
.quota-remaining {
  font-weight: 400;
  font-size: 14px;
  color: #737E8F;
}
.progress {
  margin-top: 15px;
}
.package-type {
  margin-top: 15px;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.travel-agent-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.travel-agent-data {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.travel-name {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #505E73;
}
.travel-location {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.biro-partner-container {
  width: 90%;
  margin-left: 5%;
  height: 340px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.title-partner {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #394352;
}
.desc-partner {
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
  color: #737E8F;
}
.custom-partner-carousel {
  bottom: -3rem;
}
.custom-partner-carousel li {
  width: 10px !important;
  height: 10px !important;
  margin-right: 5px !important;
  margin-left: 5px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background-color: #083CA3 !important;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
}
.carousel-item-partner img{
  width: 500px;
}
.about-us-container {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin-left: 5%;
  margin-top: 13%;
}
.about-us-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #394352;
}
.about-us-title span{
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: #8A93A1;
}
.about-us-content {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
}
.about-us-image {
  width: 490px;
  height: 327px;
}
.about-us-detail {
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.about-us-detail-data {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.about-us-detail-name {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #073794;
}
.about-us-detail-desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #505E73;
}
.question-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.list-question {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title-question {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #394352;
}
.accordion-question-container {
  margin-top: 20px;
}
.custom-card-collapse {
  border: none;
  width: 700px;
}
.custom-card-collapse-header {
  border: none;
  padding-left: 0;
}
.btn-custom-collapse {
  padding-left: 0;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #073794;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.custom-card-collapse-body {
  border-bottom: 1px solid #C9CDD4;
}
.see-all-question-btn {
  margin-top: 30px;
  margin-bottom: 15%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 16px;
  width: 40%;
  height: 54px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  outline: none;
}
.text-explain-question {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #505E73;
  margin-top: 10%;
}
.best-travel-container {
  margin-top: 50px;
}
.title-best-travel {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #394352;
  margin-bottom: 30px;
}
.custom-card-best-travel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #C9CDD4;
  border-radius: 32px;
}
.custom-card-best-travel-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.best-travel-image {
  margin-bottom: 30px;
}
.custom-card-best-travel-name{
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.custom-card-best-travel-review{
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.testimoni-container {
  margin-top: 80px;
}
.title-testimoni {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #394352;
  margin-bottom: 30px;
}
.custom-card-testimoni-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.testimoni-image {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: start;
  width: 100%;
  gap: 15px;
}
.testimoni-user {
  display: flex;
  flex-direction: column;
}
.testimoni-user-name {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.testimoni-user-address {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.custom-card-testimoni-desc {
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}
.custom-card-testimoni {
  border: none;
}
.custom-card-testimoni-review {
  display: flex;
  flex-direction: row;
}
.review-for {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
  margin-right: 5px;
}
.travel-review-name{
  margin-left: 5px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #495669;
}
.consultation-container {
  margin-top: 50px;
  width: 100%;
  height: 334px;
  position: relative;
}
.background-consultation-container {
  width: 100%;
  height: 334px;
  background-image: url("../assets/paket-2.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(16px);
  -webkit-filter: blur(16px);
}
.content-consultation {
  width: 100%;
  position: absolute;
  height: 334px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.6); 
}
.desc-consultation {
  font-weight: 400;
  font-size: 24px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.consultation-button {
  margin-top: 20px;
  width: 327px;
  height: 54px;
  background-color: #FFFFFF;
  border-radius: 12px;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: middle;
}
.consultation-button span{
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  background: linear-gradient(225.86deg, #32D84B 6.72%, #499D56 56.07%, #1B842C 114%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* .footer-landing-page {
  margin-top: 10%;
  width: 100%;
  min-height: 330px;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
}
.footer-landing-page {
  display: flex;
  flex-direction: row;
}
.logo-footer {
  display: flex;
  padding-top: 20px;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #FFFFFF;

}
.about-footer {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding-top: 30px;
  align-items: start;
  padding-left: 20px;
  gap: 20px;
}
.title-about-footer {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.link-about-footer {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.find-footer {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.social-media-footer {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.logo-footer {
  margin-left: 5%;
  width: 35%;
}
.about-footer {
  width: 15%;
}
.find-footer {
  width: 25%;
}
.reserved {
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
} */
.custom-testimoni-carousel {
  bottom: -3rem;
}
.custom-testimoni-carousel li {
  width: 10px !important;
  height: 10px !important;
  margin-right: 5px !important;
  margin-left: 5px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background-color: #083CA3 !important;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
}
.contact-whatsapp {
  width: 90%;
  padding-top: 4rem;
  margin-left: 5%;
  display: flex;
  justify-content: end;
}
.checkout-container {
  margin-top: 150px;
  width: 100%;
  height: auto;
  /* margin-left: 5%; */
  padding: 0 60px;
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: center;
}

.checkout-container-order {
  margin-top: 150px;
  width: 100%;
  height: auto;
  /* margin-left: 5%; */
  padding: 0 60px;
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: center;
}
.modal-login {
  position: absolute;
  border: 1px solid rgb(197, 197, 197);
  background-color: #ffffff;
  width: 50%;
  height: auto;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  display: none;
}
.modal-success {
  position: absolute;
  width: 50%;
  padding-bottom: 10px;
  height: auto;
  border: 1px solid rgb(197, 197, 197);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
}
.hotel-name {
  display: flex;
  flex-direction: row;
}
.icon-close-modal {
  cursor: pointer;
  position: absolute;
  right: 1%;
  top: 1%;
}
.modal-login-container{
  width: 90%;
  margin-left: 5%;
  height: 100%;
  margin-top: 10%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.swal2-html-container {
  overflow: hidden !important;
}
.modal-login-title {
  width: 100%;
  font-weight: 600;
  font-size: 32px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #083CA3;
}
.modal-warning {
  width: 100%;
  margin-top: 5%;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.input-login {
  margin-top: 5%;
  width: 100%;
}
.input-login input {
  width: 100%;
  height: 56px;
  outline: none;
  border: none;
  padding-left: 5%;
  background: #F8F8F8;
  border-radius: 12px;
}
.button-login {
  margin-top: 5%;
}
.button-login button {
  width: 100%;
  border: none;
  outline: none;
  height: 54px;
  color: #ffffff;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 12px;
}
.back-button-login {
  margin-top: 5%;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #073794;
}
.detail-checkout-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.detail-checkout-container-order {
  width: 75%;
  padding-right: 50px;
  display: flex;
  flex-direction: column;
}
.detail-checkout-container.cart-checkout {
  margin-bottom: 50px;
}
.register-button-login {
  margin-top: 5%;
  width: 100%;
  text-align: center;
}
.checkout-price-terminal {
  width: 25%;
  height: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  padding: 10px;
}
.checkout-price-terminal-order {
  width: 25%;
  height: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  padding: 10px;
  margin-bottom: 70px;
}
.checkout-price-terminal.cart-checkout {
  margin-bottom: 50px;
}
.picture-container {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.picture-checkout {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.detail-price-picture {
  width: 30%;
  display: flex;
  flex-direction: column;
}
.img-selection-container {
  position: relative;
  width: 100%;
  height: 475px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(220,220,220);
}
.img-selection-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .custom-card-img-container {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
} */
.img-selection {
  /* width: 100%; */
  /* height: 475px; */
  /* background-color: red; */
  /* position: relative; */
  /* width: auto; */
  /* height: auto; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.img-selection-main {
  max-width: 100%;
  max-height: 475px;
  /* width: 100%; */
  /* height: auto; */
  /* display: block; */
}
.img-selection-main.mw, .img-selection.mw {
  width: 100%;
}
.img-selection-main.mh, .img-selection.mh {
  height: 475px;
}
.custom-card-img-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 8;
}
.custom-card-promo {
  position: absolute;
  top: 10px;
  left: -3px;
  background-color: #ee2d34;
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.custom-card-detail {
  position: absolute;
  top: 10px;
  left: -3px;
  background-color: #073794;
  color: white;
  padding: 4px 24px 4px 8px;
  font-size: 20px;
  font-weight: 600;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.custom-card-promo-detail {
  font-size: 14px;
  padding: 4px 12px;
}
.select-image {
  max-width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.select-image::-webkit-scrollbar {
  display: none;
}

.box-select-image {
  min-width: 96px;
  cursor: pointer;
  height: 96px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-select-image:focus {
  border: 1px solid #3963B5;
}
.box-select-image img{
  border-radius: 16px;
}
div.select-image::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
div.select-image::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
div.select-image::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
div.select-image::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.detail-price {
  width: 80%;
  display: flex;
  flex-direction: column;
  margin-left: 10%;
  gap: 10px;
}
.promo-detail-price-container {
  width: auto;
}
.promo-detail-price{
  background-color: #ee2d34;
  color: white;
  padding: 4px 12px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.title-detail-price {
  width: 100%;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.title-not-found {
  text-align: center;
  min-height: 50vh;
  font-size: 32px;
}
.title-not-found img {
  width: 200px;
  height: 200px;
}
.title-not-found .note {
  font-size: 20px;
}
.category-detail-price {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10%;
}
.category-detail-price button{
  /* width: 78px; */
  height: 30px;
  background: #F7F7F7;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #2C343F;
  border-radius: 8px;
  border: none;
  outline: none;
}
.info-detail {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}
.info-label {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}
.info-value {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.date-package-separator {
  margin: 0 5px;
}
.date-package-interval {
  /* color: #8A93A1; */
  color: #505E73;
}
.price-info {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #499D56;
  display: flex;
  align-items: flex-start;
}
.price-info .false-price {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #505E73;
  display: inline-block;
  margin-right: 5px;
  text-decoration: line-through;
}
.airlines-info {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.airlines-info .img-wrapper {
  width: 150px;
  aspect-ratio: 2/1;
  overflow: hidden;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.airlines-info .img-wrapper img{
  width: 100%;
  height: auto;
  object-fit: contain;
}
.separate-section {
  width: 100%;
  height: 1px;
  border: 1px solid #C9CDD4;
}
.button-room-type-container {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  gap: 20px;
}
.button-room-type{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 40px;
  background: #FFFDED;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.button-room-type:focus{
  border: 1px solid #FDC009;
}
.total-jamaah {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 5%;
  padding-right: 5%;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  height: 56px;
  border: 1px solid #C9CDD4;
  border-radius: 12px;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.icon-total-jamaah {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.remaining-quota {
  font-style: italic;
  margin-top: 12px;
}
.label-room-type {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.description-checkout-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.select-menu-checkout {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 16px;
  overflow-y: auto;
  overflow-x: scroll;
}
/* .select-menu-checkout button {
  width: auto;
  height: 42px;
  background: #E6ECF6;
  align-items: center;
  border: none;
  outline: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  letter-spacing: -0.01em;
  color: #3963B5;
} */
.select-menu-checkout button {
  font-size: 16px;
  font-weight: 500;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  padding: 8px 16px;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  white-space: nowrap;
}
.select-menu-checkout button.active {
  color: #073794;
  border-bottom: 2px solid #073794;
  font-weight: 600;
}
.select-menu-checkout button:hover {
  color: #073794;
  border-bottom: 2px solid #073794;
  font-weight: 600;
}
/* .select-menu-checkout button:hover {
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  color: #ffffff;
}
.select-menu-checkout button:focus {
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  color: #ffffff;
} */
.information-menu {
  margin-top: 32px;
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #505E73;
  display: none;
}
.hotel-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  gap: 30px;
  display: none;
}
.hotel-box{
  display: flex;
  flex-direction: column;
}
.hotel-box+.hotel-box{
  margin-top: 32px;
}
.hotel-name {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
  margin-bottom: 16px;
}
.hotel-photo {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: scroll;
  gap: 15px;
  margin-top: 15px;
}
div.hotel-photo::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
div.hotel-photo::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
div.hotel-photo::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
div.hotel-photo::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.information-menu-hotel {
  /* margin-top: 5%; */
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #505E73;
}
.accomodation-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  display: none;
  margin-top: 32px;
}
.accomodation-container .accomodation+.accomodation {
  margin-top: 24px;
}
.accomodation {
  display: flex;
  flex-direction: column;
}
.accomodation-title {
  display: flex;
  flex-direction: row;
  gap: 10px;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.accomodation-detail {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.photo-detail {
  display: flex;
  /* width: 500%; */
  max-width: 100%;
  height: auto;
  gap: 15px;
}
/* .photo-canvas {
  display: block;
  width: 100%;
}
.photo-canvas img {
  margin-bottom: 10px;
  max-width: 100%;
} */
.photo-canvas {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: scroll;
  gap: 15px;
  margin-top: 15px;
}
.photo-detail img {
  display: block;
  height: 245px;
}
div.photo-detail::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
div.photo-detail::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
div.photo-detail::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
div.photo-detail::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.accomodation-description {
  width: 100%;
  margin-top: 16px;
}
.plan-container {
  width: 100%;
  margin-top: 5%;
  display: none;
}

.plan-container ul {
  margin: 0 auto;
  list-style-type: none;
  counter-reset: steps;
  margin: 0;
  font-family: sans-serif;
}
.plan-container ul li {
  padding: 0 0 20px 50px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.plan-container ul li:after {
  position: absolute;
  top: 0;
  left: 0;
  content: url('../assets/blue-dot.svg');
  counter-increment: steps;
  border: 1px solid #C9CDD4;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  width: 24px;
  line-height: 24px;
  background: #fff;
}
.plan-container ul li:before {
  position: absolute;
  left: 11px;
  top: 0;
  content: "";
  height: 100%;
  width: 0;
  border-left: 2px dashed #505E73;
}
.plan-container ul li:last-of-type:before {
  border: none;
}
.day-plan {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.departure-plan {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.plan-description {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.total-value-checkout-container{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.detail-total-title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.detail-total-value {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}

.detail-total-note {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 400;
  color: #8A93A1;
}

.detail-total-label {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #8A93A1;
}

.detail-total-data {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.detail-total-data-maskapai {
  display: flex;
  gap: 5px;
  flex-direction: row;
}
.detail-total-data-maskapai .img-wrapper {
  width: 80px;
  aspect-ratio: 2/1;
  overflow: hidden;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-total-data-maskapai .img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.separate-total {
  margin-top: 10%;
  margin-bottom: 10%;
  width: 100%;
  height: 1px;
  border-top: 1px dashed #C9CDD4;
}

.total-price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.total-label {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #222730;
}

.total-money{
  font-weight: 600;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: -0.01em;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.total-price.cashback {
  margin-top: 20px;
}

.total-label.cashback {
  font-size: 16px;
}

.total-money.cashback {
  font-size: 20px;
}

.voucher-box {
  margin-top: 20px;
  display: flex;
  padding: 0 10px;
  position: relative;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 48px;
  gap: 10px;
  background: #F6F7F7;
  border: 1px solid #6C757D;
  /* background: #F1FDF4;
  border: 1px solid #28A745; */
  /* background: #E9FCF3;
  border: 1px solid #20BF55; */
  border-radius: 12px;
}

.box-success {
  background: #F1FDF4;
  border: 1px solid #28A745;
}

.box-input-success {
  color: #28A745;
}

.box-error {
  background: #FDF1F2;
  border: 1px solid #DC3545;
}

.box-input-error {
  color: #DC3545;
}
.voucher-box input {
  border: none;
  outline: none;
  color: #6C757D;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  background-color: transparent;
  letter-spacing: -0.01em;
}
.icon-discount {
  display: block;
}
.code-discount {
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  letter-spacing: -0.01em;
}

.voucher-used-warning {
  font-weight: 400;
  padding-top: 5px;
  /* padding-left: 10%; */
  font-size: 12px;
  text-align: start;
  letter-spacing: -0.01em;
  color: #505E73;
  display: none;
}

.show-voucher-used-warning {
  display: block
}

.button-order {
  width: 100%;
  display: inline-block;
  justify-content: center;
  margin-top: 10%;
}

.button-order button {
  border: none;
  outline: none;
  width: 100%;
  /* color: #2C343F; */
  color: #ffffff;
  height: 54px;
  font-weight: 600;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  /* background: linear-gradient(225deg, #ffef0a 13.62%, #f5e50a 57.78%, #dbcd09 100%); */
  /* background: linear-gradient(225deg, #2CF249 13.62%, #27d942 57.78%, #23c43b 100%); */
  border-radius: 12px;
}
.button-order-verif {
  width: 100%;
  display: inline-block;
  justify-content: center;
  margin-top: 48px;
}
.button-order-verif .button-verif {
  border: none;
  outline: none;
  width: 100%;
  /* color: #2C343F; */
  color: #ffffff;
  /* height: 54px; */
  padding: 16px 32px;
  font-weight: 600;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  /* background: linear-gradient(225deg, #ffef0a 13.62%, #f5e50a 57.78%, #dbcd09 100%); */
  /* background: linear-gradient(225deg, #2CF249 13.62%, #27d942 57.78%, #23c43b 100%); */
  border-radius: 12px;
  font-size: 24px;
}
.button-addition {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 16px 0 8px;
}
.button-addition .button-custom {
  outline: none;
  padding: 4px 8px;
  color: black;
  display: flex;
  width: 45%;
  /* background-color: yellow; */
  align-items: center;
  font-size: 12px;
  justify-content: center;
}
.button-addition .button-custom img {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}
.button-addition .separator {
  width: 2px;
  height: 100%;
  background-color: #000000;
}

.data-jamaah-title {
  width: 100%;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.card-list-jamaah {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.card-jamaah {
  margin-top: 5%;
  width: 100%;
  height: auto;
  padding-bottom: 10px;
  border-radius: 24px;
  border: 1px solid rgb(190, 190, 190);
  display: flex;
  flex-direction: column;
  padding: 2%;
}

.jamaah-name-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.jamaah-name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 20px;
  gap: 10px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.pretty.p-switch.p-fill input:checked~.state:before {
  border-color: #5a656b;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%) !important;
}
.input-field-jamaah {
  margin-top: 15px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  /* gap: 20px; */
}
.input-field-jamaah-partial {
  display: block;
  width: 48%;
}
.input-address-jamaah-partial {
  display: block;
  width: 48%;
}
.input-field-jamaah input{
  width: 100%;
  outline: none;
  border: none;
  padding-left: 15px;
  height: 56px;
  background: #F8F8F8;
  border-radius: 12px;
}
.input-field-jamaah small,.input-address-jamaah small {
  text-align: left;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: #ee2d34;
  font-style: italic;
  margin: 0;
}

.input-address-jamaah {
  margin-top: 20px;
  width: 100%;
}

.input-address-jamaah textarea {
  width: 100%;
  height: 119px;
  padding: 2%;
  outline: none;
  border: none;
  background: #F8F8F8;
  border-radius: 12px;
}

.note-title {
  width: 100%;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
  margin-bottom: 10px;
}

.note-input input{
  width: 100%;
  outline: none;
  border: none;
  padding-left: 15px;
  height: 56px;
  background: #F8F8F8;
  border-radius: 12px;
}

.panduan-ibadah-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* margin-left: 5%; */
  gap: 30px;
  /* margin-top: 10%; */
  margin: 150px 0 90px;
  padding: 0 60px;
}

.detail-informasi-container {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin-left: 5%;
  gap: 30px;
  margin-top: 10%;
}

.list-menu-panduan-ibadah {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 30px;
}
.detail-menu-panduan-ibadah {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 30px;
}
.title-menu-panduan-ibadah {
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #073794;
}
.title-menu-panduan-ibadah-doa {
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #073794;
  text-align: center;
}
.input-pencarian-doa-container {
  width: 90%;
  margin-left: 5%;
  height: 88px;
  background: #FFFFFF;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-pencarian-doa-container form{
  width: 95%;
  padding-left: 2%;
  height: 80%;
}

.input-pencarian-doa{
  width: 95%;
  padding-left: 2%;
  height: 80%;
  background: #F8F8F8;
  border: none;
  outline: none;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}

.afiliator-card-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.list-afiliator-card-wrapper {
  width: 50%;
  padding: 16px;
}

.list-afiliator-card {
  padding: 16px;
  display: flex;
  align-items: center;
  border: 2px solid rgba(7,55,148,0.4);
  border-radius: 16px;
}

/* .img-afiliator-card {
  width: 120px;
  height: 120px;
  border-radius: 100%;
} */

.img-afiliator-card img {
  width: 120px;
  height: 120px;
  border-radius: 100%;
}

.content-afiliator-card {
  margin-left: 16px;
}

.content-afiliator-card .title {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #073794;
}

.content-afiliator-card .subtitle {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.list-menu-panduan-container {
  width: 100%;
}

.list-image-menu-panduan-ibadah {
  /* width: 100%; */
  display: flex;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  margin: 0 -15px;
  /* gap: 2%; */
}

.panduan-ibadah-card {
  width: 25%;
  padding: 15px 15px;
}

.image-menu-panduan-ibadah {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  /* gap: 20px; */
  width: 100%;
  /* margin-top: 5%; */
}

/* .menu-panduan-ibadah-img {
  width: 100%;
  height: 250px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background-color: rgb(220,220,220);
} */
.menu-panduan-ibadah-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  overflow: hidden;
  flex-shrink: 0;
  background-color: rgb(220,220,220);
}
.menu-panduan-ibadah-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* .image-menu-panduan-ibadah img{
  height: 300px;
  width: 400px;
} */

.text-img-menu {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.text-img-menu-doa {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #073794;
  margin-top: 12px;
}

.subtext-img-menu-doa {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.bottom-text-img-menu {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.panduan-ibadah-video-container {
  width: 100%;
}
.panduan-ibadah-video-container-s {
  /* width: 100%; */
  height: fit-content;
  display: flex;
  flex-direction: row;
  margin: 120px 0 90px;
  padding: 0 45px;
}

.video-section-panduan {
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 15px
}
.video-section-informasi {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.desc-video-section-informasi {
  width: 80%;
  height: fit-content;
  margin-left: 10%;
  margin-top: 5%;
  display: flex;
  flex-direction: column;
}

.video-box-panduan {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.video-box-panduan iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.list-image-section-video {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 15px;
}
.image-section-video {
  width: 80%;
  margin-left: 10%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.image-section-video .image-section {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  overflow: hidden;
  flex-shrink: 0;
  background-color: rgb(220,220,220);
}

.image-section-video .image-section img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.desc-video-section-panduan {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
}

.title-video {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #073794;
}
.title-video-informasi {
  font-weight: 600;
  font-size: 40px;
  color: #394352;
}

.landmark {
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-y: hidden;
  overflow-x: scroll;
  gap: 5%;
}
.card-landmark {
  cursor: pointer;
  transition: transform .2s;
}
.card-landmark img{
  width: 200px;
  height: 300px;
}
.card-landmark:hover {
  transform: scale(1.2);
}
.card-landmark:hover + .card-landmark {
  transform: translateX(5%); /* menggeser card di sebelah kanan card yang dihover */
}
.desc-video {
  width: 95%;
  margin-left: 2.5%;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.desc-video-informasi {
  width: 95%;
  margin-top: 20px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.title-image-side {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.title-menu-panduan-ibadah-doa-detail {
  display: flex;
  flex-direction: row;
  gap: 10px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.list-menu-panduan-doa {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 30px;
}
.detail-menu-panduan-doa {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 30px;
}
.title-doa {
  margin-top: 5%;
  font-weight: 500;
  font-size: 32px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #073794;
}
.list-doa-container {
  width: 100%;
  margin-top: 5%;
  display: flex;
  flex-direction: column;
}

.doa-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-top: 5%;
}

.title-doa-card {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.doa-content {
  font-weight: 400;
  font-size: 28px;
  text-align: right;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.doa-translate {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.doa-ayat {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

hr {
  border: 0;
  clear:both;
  display:block;
  width: 100%;               
  background-color:#C9CDD4;
  height: 1px;
}
.quran-ayat-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.button-select-quran-ayat-container {
  width: 30%;
  /* height: 60px; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #F7F7F7;
  border-radius: 32px;
  margin-bottom: 30px;
}
.button-quran {
  width: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  height: 44px;
}
.button-quran:hover {
  color: #073794;
  background: #FFFFFF;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  border-radius: 32px;
}
.button-quran:focus {
  color: #073794;
  background: #FFFFFF;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  border-radius: 32px;
}
.active {
  color: #073794;
  background: #FFFFFF;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  border-radius: 32px;
}
.list-quran-card-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.card-quran {
  cursor: pointer;
  border: 1px solid #C9CDD4;
  border-radius: 16px;
  display: flex;
  gap: 20px;
  margin-top: 10px;
  padding: 10px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.number-quran-box {
  position: relative;
}
.number-quran {
  position: absolute;
  top: 20%; 
  transform: translateY(-50%);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.detail-quran-title {
  display: flex;
  flex-direction: column;
  gap: 10%;
}
.detail-quran-title .title {
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.list-ayat-card-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  display: none;
}
.quran-detail-ayat-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  position: relative;
}
.button-select-quran-ayat-detail-container {
  width: 25%;
  height: auto;
  display: flex;
  flex-direction: column;
  transition: 0.5s;
  position: sticky;
  position: -webkit-sticky;
  top: 150px;
  height: 100vh;
}
.list-ayat-detail-card-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70%;
  transition: 0.5s;
  display: none;
}
.list-quran-detail-card-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70%;
  transition: 0.5s;
}
.header-sidebar-detail-quran {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #505E73;

}
.button-select-quran-ayat-detail {
  margin-top: 20px;
  width: 100%;
  /* height: 60px; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #F7F7F7;
  border-radius: 32px;
}

.select-section-quran-container {
  display: flex;
  flex-direction: row;
  margin-top: 10%;
  justify-content: space-between;
}
.select-section-quran-number {
  width: 30%;
}
.select-section-quran {
  width: 60%;
}
.search-box-quran {
  width: 100%;
}
.search-box-quran input{
  width: 100%;
  height: 52px;
  background: #F8F8F8;
  border: 1px solid #C9CDD4;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  padding-left: 10%;
  outline: none;
  letter-spacing: -0.01em;
  color: #505E73;
}
.list-box-quran {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 45vh;
  overflow-y: scroll;
  margin-top: 20px;
  gap: 20px;
}
/* width */
div.list-box-quran::-webkit-scrollbar {
  width: 10px;
}

/* Track */
div.list-box-quran::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
div.list-box-quran::-webkit-scrollbar-thumb {
  background: #C9CDD4;
  border-radius: 7px;
}

/* Handle on hover */
div.list-box-quran::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.list-box-quran .menu-select{
  width: 100%;
  height: 28px;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
}
.list-box-quran .menu-select.surat {
  text-align: start;
}
.list-box-quran .menu-select:hover{
  border-left: 2px solid #3963B5;
  color: #083CA3;

}
.loop-open-sidebar {
  width: 5%;
  cursor: pointer;
  display: none;
}

.new-artikel {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
}
.list-new-artikel {
  width: 70%;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.scroll-new-artikel {
  width: 30%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-height: 500px;
  overflow-y: scroll;
}
.source-detail {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.source-detail .label-1{
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.source-detail .label-2{
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
/* width */
div.scroll-new-artikel::-webkit-scrollbar {
  width: 5px;
}

/* Track */
div.scroll-new-artikel::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
div.scroll-new-artikel::-webkit-scrollbar-thumb {
  background: #5A7CC1;
  border-radius: 4px;
}
.card-new-list {
  display: flex;
  flex-direction: column;
  width: 45%;
  gap: 10px;
}
.card-new-list img{
  height: 300px;
}
.card-new-list-detail {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}
.card-new-list-scroll {
  display: flex;
  flex-direction: column;
  width: 90%;
  gap: 10px;
}
.button-selengkapnya {
  height: 32px;
  border: 1px solid #2582B8;
  border-radius: 16px;
  font-weight: 600;
  color: #2582B8;
  font-size: 14px;
}
.route-artikel {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.route-artikel .box{
  width: 70%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.route-artikel .box .menu{
  width: 20%;
  text-align: center;
  cursor: pointer;
}
.route-artikel .box .main-menu{
  width: 20%;
  text-align: center;
  cursor: pointer;
  border-right: 2px solid #737E8F;
}
.route-artikel .box .menu:hover{
  color: #2582B8;
}
.route-artikel .box .main-menu:hover{
  color: #2582B8;
}
.title-artikel {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #073794;
}
.title-artikel-detail {
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.01em;
  color: #073794;
}
.bottom-text-detail-menu {
  width: 100%;
  height: fit-content;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #505E73;
}
.popup-carousel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-carousel .close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  width: 30px;
  background-color: white;
  border-radius: 50%;
  cursor: pointer;
}

.popup-carousel .carousel {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-carousel .carousel .slick-slider {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-carousel .carousel .slick-slider .slick-slide {
  outline: none;
}

.image-popup-carousel{
  display: flex !important;
  flex-direction: row !important;
  height: 250px !important;
}
.image-popup-carousel-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 80%;
  margin-left: 10%;
  min-height: 100%;
  max-height: 100%;
  background: #FFFFFF;
  border-radius: 24px;
}
.image-popup-carousel-item img{
  max-width: 100%;
  height: 300px;
  border-radius: 24px 0 0 24px;
}
.image-box-carousel {
  width: 35%;
  height: 100%;
  display: flex;
  overflow: hidden;
  justify-content: flex-start !important;
  border-radius: 24px 0 0 24px;
}
.title-popup-carousel {
  width: 65%;
  margin-left: 10px;
}

.carousel-nav-btn {
  cursor: pointer;
}

.sidebar-toggler {
  display: none;
  outline: none;
  border-radius: 16px;
  background-color: rgb(247,247,247);
  border: 1px solid rgb(200,200,200);
}
.sidebar-toggler-fixed-settings {
  position: fixed;
  top:75px;
  left: 15px;
  z-index: 998;
  padding: 5px;
}
.sidebar-toggler img {
  width: 30px;
}
.sidebar-toggler:hover, .sidebar-toggler:focus {
  outline: none;
}
.background-modal {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9995;
  visibility: hidden;
  opacity: 0;
}
.icon-close-side {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  display: none;
}
.icon-close-side img {
  width: 40px;
  height: 40px;
}
.custom-close-quran {
  display: none;
}
.custom-hide {
  opacity: 0;
  visibility: hidden;
}
.custom-show {
  opacity: 100 !important;
  visibility: visible !important;
}
.slide-menu-show {
  transform: translateX(0) !important;
}

/* Footer */
.footer-landing-page {
  width: 100%;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
}
.footer-detail {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 40px 60px 40px;
}
.logo-footer-container {
  padding: 0 15px;
  width: 50%;
}
.about-footer-container {
  padding: 0 15px;
  width: 25%;
}
.mitra-footer-container {
  padding: 0 15px;
  width: 25%;
}
.logo-footer {
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0;
}
.address-footer {
  padding: 24px 0;
}
.address-footer .address-row+.address-row {
  padding-top: 6px;
}
.address-row {
  display: flex;
  align-items: center;
  width: 100%;
}
.address-icon {
  width: 24px;
}
.address-detail {
  color: white;
  margin-left: 12px;
  font-size: 14px;
}
.address-detail p {
  margin: 0;
  padding: 0;
}
.about-footer {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 20px;
}
.about-footer a {
  text-decoration: none;
  transition: all 0.1s ease-in-out;
}

.about-footer a:hover, .about-footer a:focus {
  text-decoration: underline;
  color: white;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
  transform: translateX(5px);
}
.title-about-footer {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.link-about-footer {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.find-footer {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.social-media-footer {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 12px 0;
}
.reserved {
  font-weight: 400;
  font-size: 14px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  width: 100%;
  text-align: center;
  padding: 6px 0;
  background-color: rgba(34, 39, 48, 0.6) !important;
}
/* End Footer */