/* @import '~pretty-checkbox/src/pretty-checkbox.scss';
@import '~pretty-checkbox/scss/elements/default/fill';
@import '~pretty-checkbox/scss/elements/default/outline';
@import '~pretty-checkbox/scss/elements/default/thick';

@import '~pretty-checkbox/scss/elements/font-icon/general';

@import '~pretty-checkbox/scss/elements/svg/general';

@import '~pretty-checkbox/scss/elements/image/general';

@import '~pretty-checkbox/scss/elements/switch/general';
@import '~pretty-checkbox/scss/elements/switch/fill';
@import '~pretty-checkbox/scss/elements/switch/slim';

@import '~pretty-checkbox/scss/extras/toggle';
@import '~pretty-checkbox/scss/extras/plain';
@import '~pretty-checkbox/scss/extras/round';
@import '~pretty-checkbox/scss/extras/curve';
@import '~pretty-checkbox/scss/extras/animation';
@import '~pretty-checkbox/scss/extras/disabled';
@import '~pretty-checkbox/scss/extras/locked';
@import '~pretty-checkbox/scss/extras/colors';
@import '~pretty-checkbox/scss/extras/print';

@import '~pretty-checkbox/scss/states/hover';
@import '~pretty-checkbox/scss/states/focus';
@import '~pretty-checkbox/scss/states/indeterminate'; */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex;
  flex-direction: column;
}
::-webkit-scrollbar {
  display: none;
}
a, a:hover, a:focus {
  text-decoration: none;
}
/* Navbar Start */
.navbar-custom {
  background: #FCFCFC;
  z-index: 999;
  border-bottom: 1px solid #EEEFF1;
  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;
}
.nav-link {
  color: #505E73 !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 {
  height: 50px;
  margin-right: 2rem;
}

.right-menu-container {
  display: flex;
  flex-direction: row;
  gap: 35px;
}
.location-navbar {
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #505E73 !important;
}
.login-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4px 16px 6px;
  gap: 8px;
  width: 76px;
  height: 32px;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 16px;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  border: none;
}
.login-btn:hover, .login-btn:focus {
  opacity: 80%;
  color: white;
}
.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;
}
/* Navbar End */
.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%;
} */
.biro-card-container {
  width: 90%;
  margin-left: 5%;
  /* min-height: 100px; */
  margin-top: 5%;
  /* background-color: yellow; */
  /* display: none; */
}
.biro-card-container-s {
  margin: -10px -10px;
}
.biro-travel-side {
  display: none;
}
.card-body {
  padding: 16px;
  position: relative;
}
.custom-card-s {
  border: 1px solid #C9CDD4;
  border-radius: 24px;
  min-height: 287px;
  cursor: pointer;
}
.custom-card-s:hover .footer-biro-btn {
  border: 1px solid #2582B8;
  color: white;
  /* background-color: #2582B8; */
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
}
.footer-biro-btn{
  border: 1px solid #2582B8;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  outline: none;
  padding: 5px 10px 5px 10px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #2582B8;
}
.custom-card-package{
  border: none !important;
  font-size: 16px;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: start;
}
.custom-card-package:hover {
  text-decoration: none;
}
.card-deck > a{
  text-decoration: none;
}
.custom-card-biro {
  width: 25%;
  padding: 5px;
}
.custom-card-img {
  width: 100%;
}
.card-img-biro {
  width: 72px;
  height: 72px;
  border-radius: 10px;
}
.title-biro {
  width: 100%;
  /* margin-left: 5%; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* gap: 16px; */
}
.travel-biro-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #2C343F;
  white-space: nowrap;
}
.travel-biro-permission {
  font-weight: 400;
  font-size: 12px;
  /* line-height: 22px; */
  letter-spacing: -0.01em;
  color: #737E8F;
  width: 100%;
  white-space: nowrap;
}
.travel-biro-location {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #2C343F;
  white-space: nowrap;
}
.travel-biro-data {
  width: 100%;
  overflow: hidden;
  margin-left: 16px;
  /* height: 100%; */
}
.body-data-biro {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  margin: 24px -5px 0;
}
.no-data-paket {
  width: 100%;
  /* background-color: green; */
  text-align: center;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  color: #2C343F;
}
.biro-sample-image {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33%;
  padding: 0 5px;
  /* background-color: yellow; */
}
.custom-img-paket {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  /* height: ; */
}
.price-biro {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #1B842C;
  /* background-color: purple; */
}
.footer-data-biro {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  /* width: 100%; */
  /* margin-left: 5%; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 40px;
}
.footer-biro-package {
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.date-package {
  font-weight: 500;
  /* color: #8A93A1; */
  color: #1F58CC;
}
.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;
  display: flex;
  align-items: flex-start;
}
.price-package .false-price {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #505E73;
  display: inline-block;
  margin-right: 5px;
  text-decoration: line-through;
}
.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: 100%;
}
.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 */
.footer-landing-page {
  width: 100%;
  /* min-height: 330px; */
  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;
  /* background-color: green; */
  width: 50%;
}
.about-footer-container {
  padding: 0 15px;
  width: 25%;
}
.mitra-footer-container {
  padding: 0 15px;
  width: 25%;
}
.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;
  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;
  /* padding-top: 30px; */
  align-items: start;
  /* padding-left: 20px; */
  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;
}
/* .logo-footer {
  margin-left: 5%;
  width: 35%;
} */
/* .about-footer {
  width: 15%;
}
.find-footer {
  width: 25%;
} */
.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 */
.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;
}

.biro-travel-catalog-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding-top: 10%;
  padding-left: 20px;
  padding-bottom: 10%;
}
.sidebar-toggler-profile {
  display: none;
  outline: none;
  border-radius: 12px;
  background-color: rgb(247,247,247);
  border: none;
  padding: 6px;
}
.sidebar-toggler-profile img {
  width: 30px;
}
.sidebar-toggler {
  display: none;
  outline: none;
  border-radius: 16px;
  background-color: rgb(247,247,247);
  border: 1px solid rgb(200,200,200);
}
.sidebar-toggler img {
  width: 30px;
}
.sidebar-toggler:hover, .sidebar-toggler:focus {
  outline: none;
}
.side-menu-container {
  width: 25%;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 25px 0 25px;
  /* position: relative; */
  position: sticky;
  position: -webkit-sticky;
  top: 100px;
  height: 85vh;
  overflow-y: scroll;
}
.side-menu-container-biro {
  width: 25%;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-top: 25px;
  position: relative;
}
.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-hide {
  opacity: 0;
  visibility: hidden;
}
.custom-disable {
  display: none;
}
.custom-able {
  display: block;
}
.custom-show {
  opacity: 100 !important;
  visibility: visible !important;
}
.slide-menu-show {
  transform: translateX(0) !important;
}
.product-list-container {
  width: 75%;
}
.title-filter-catalog {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.time-filter-catalog {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.title-time-catalog {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.custom-select-catalog {
  width: 212px;
  height: 44px;
  border: 1px solid #AFB5BF;
  border-radius: 12px;
  outline: none;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 5%;
  padding-right: 5%;
  cursor: pointer;
  letter-spacing: -0.01em;
  color: #505E73;
}
.custon-dropdown-catalog { 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 99;
  width: 232px;
  height: auto;
  padding: 20px 0 20px 0;
  background: #FFFFFF;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  /* display: none; */
}
.custom-data-dropdown-catalog-container {
  width: 100%;
  min-height: 52px;
  display: flex;
  gap: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.custom-data-dropdown-catalog {
  width: 100%;
  /* height: 80%; */
  display: flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  padding-left: 10%;
  border-left: 2px solid transparent;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.custom-data-dropdown-catalog:hover {
  border-left: 2px solid #3963B5;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #083CA3;
}
.select-time-catalog {
  position: relative;
}
.modal-calendar-schedule-container {
  position: absolute;
  /* display: none; */
  top: 100%;
  z-index: 99;
  width: 334px;
  /* height: 250px; */
  background: #EEEFF1;
  border-radius: 14px;
  left: 0;
  padding: 10px;
}
.modal-calendar-schedule {
  width: 100%; 
  /* height: 100%; */
  /* margin-left: 2.5%; */
  /* margin-top: 2.5%; */
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #EEEFF1;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 15px;
  position: relative;
}
.year-selector {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 40%;
  /* margin: 10px 0; */
  /* margin-left: 5%; */
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.img-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
}
.month-selector {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* margin-left: 10%; */
  margin: 15px 0 40px 0;
  gap: 10px;
  /* background-color: yellow; */
}
.container-button-schedule {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 10px;
  width: 90%;
  height: 36px;
}
.list-month {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.icon-close-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}
.icon-close-modal img {
  width: 30px;
}
.icon-close-modal-cost {
  outline: none;
  border: none;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.month-name {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 36px;
  cursor: pointer;
}
.month-name span{
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  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;
}
.month-name:hover {
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.month-name:hover span{
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  background: #FFFFFF;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.custom-hide {
  opacity: 0;
  visibility: hidden;
}
.custom-show {
  opacity: 100;
  visibility: visible;
}
.reset-btn-sch {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #2582B8;
  color: #2582B8;
  background-color: transparent;
}
.reset-btn-sch:hover, .reset-btn-sch:focus {
  border: 1px solid #2582B8;
  color: white;
  /* background-color: #2582B8; */
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
}
.ustadz-field {
  width: 212px;
  height: 44px;
  border: 1px solid #AFB5BF;
  border-radius: 12px;
  font-weight: 400;
  padding-left: 16px;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #8A93A1;
  outline: none;
}
.ustadz-field:focus {
  border: 1px solid #3963B5;
}
#label-field {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; 
}
.container-hotel-rating {
  position: relative;
}
.rating-star-custom {
  height: 100%;
  position: absolute;
  top: -5%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  left: 10%;
  gap: 5px;
}
.input-search-container {
  width: 90%;
  margin-left: 5%;
  position: relative;
}
.input-search-container img {
  left: 0;
  top: 18px;
  left: 10px;
  position: absolute;
}
.input-search-container input{
  padding-left: 40px;
  padding-right: 20px;
  width: 100%;
  height: 56px;
  outline: none;
  border: 1px solid #dddddd;
  background: #F8F8F8;
  border-radius: 12px;
}
.button-and-filter-container {
  width: 90%;
  margin-top: 20px;
  margin-left: 5%;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.btn-haji-biro-container {
  display: flex;
  flex-direction: row;
  gap: 10%;
}
.btn-pack-type {
  width: 106px;
  height: 30px;
  background:#E9FCF3;
  border-radius: 8px;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #127A48;
  outline: none;
  border: none;
}
.btn-periode {
  width: 106px;
  height: 30px;
  background:#FFF3ED;
  border-radius: 8px;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #8C4C2A;
  outline: none;
  border: none;
}
.haji-btn {
  /* width: 127px; */
  /* height: 42px; */
  background: #E6ECF6;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #3963B5;
  outline: none;
  border: none;
  padding: 12px 24px;
  white-space: nowrap;
}
.haji-btn:hover {
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  color: #FFFFFF;
}
.haji-btn:focus {
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  color: #FFFFFF;
}
.biro-travel-btn {
  /* width: 109px; */
  /* height: 42px; */
  padding: 8px 16px;
  background: #E6ECF6;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #3963B5;
  outline: none;
  border: none;
  white-space: nowrap;
}
.biro-travel-btn:hover {
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  color: #FFFFFF;
}
.btn-haji-biro-container .active {
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  color: #FFFFFF;
}
.biro-travel-btn:focus {
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  color: #FFFFFF;
}
.sort-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
}
/* .sort-container-s {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  display: none;
} */
.sort-toggler {
  display: none;
  outline: none;
  border-radius: 16px;
  background-color: rgb(247,247,247);
  border: 1px solid rgb(200,200,200);
  position: relative;
}
.sort-toggler:hover, .sort-toggler:focus {
  outline: none;
}
.article-toggler {
  display: block;
  outline: none;
  border-radius: 6px;
  background-color: rgb(247,247,247);
  border: 1px solid rgb(200,200,200);
  position: relative;
  padding: 3px 6px;
}
.article-toggler:hover, .article-toggler:focus {
  outline: none;
}
.sort-toggler img {
  width: 30px;
}
.sort-toggler:hover, .sort-toggler:focus {
  outline: none;
}
.sort-container-biro {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: none;
}
.default-sort-box{
  cursor: pointer;
  border: 1px solid #2582B8;
  color: #2582B8;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
}
.biro-travel-list-container {
  width: 100%;
  padding: 0 60px;
  margin-bottom: 90px;
  margin-top: 150px;
  display: flex;
  flex-direction: column;
}
.biro-travel-list-header {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.biro-travel-left-side {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding-right: 24px;
}
.biro-travel-logo {
  display: flex;
  width: 100%;
}
.biro-travel-list-img {
  width: 100px;
  aspect-ratio: 1/1;
  border-radius: 100%;
}
.biro-travel-list-img img {
  width: 100px;
  border-radius: 100%;
}
.biro-travel-logo-desc {
  margin-left: 16px;
}
.biro-travel-right-side {
  width: 50%;
  display: flex;
  flex-direction: row;
}
.carousel-welcome-wrapper {
  /* background-color: rgb(220, 220, 220); */
  padding: 16px;
  width: 100%;
  overflow: hidden;
}
.carousel-welcome {
  width: 100%;
}
.carousel-welcome-item {
  width: 100%;
  /* border-radius: 20%; */
  /* padding: 0 1rem; */
  aspect-ratio: 2/1;
  overflow: hidden;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: rgb(220, 220, 220); */
}
.carousel-welcome-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.carousel-welcome .custom-slick-dots {
  position: absolute;
  bottom: -3rem;
  display: inline-block;
  width: 100%;
  padding: 0;
  margin: 3px 0;
  list-style: none;
  text-align: center;
}
.carousel-welcome .custom-slick-dots ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.carousel-welcome .custom-slick-dots li {
  border-radius: 100%;
  background-color: #d9d9d9;
  position: relative;
  display: inline-block;
  margin: 0 10px;
  padding: 0;
  cursor: pointer;
}
.carousel-welcome .custom-paging {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}
.carousel-welcome .slick-active .custom-paging {
  background-color: #083ca3;
}
.biro-travel-list-name-container {
  margin-top: 16px;
}
.biro-travel-list-side-img {
  width: 100%;
}
.biro-travel-list-side-img img {
  width: 100%;
}
.biro-travel-nav-menu {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 8px;
  overflow-x: scroll;
}
.biro-travel-nav-menu button {
  /* padding-bottom: 10px; */
  padding: 4px 8px;
  border: none;
  background-color: transparent;
  border-bottom: 2px solid transparent;
  outline: none !important;
  white-space: nowrap;
}
.biro-travel-nav-menu button.active {
  border-bottom: 2px solid #073794;
  color: #073794;
  font-weight: 600;
}
.biro-travel-nav-menu button:hover {
  border-bottom: 2px solid #073794;
  color: #073794;
  font-weight: 600;
}
.biro-travel-nav-menu button:focus {
  border-bottom: 2px solid #3963B5;
  color: #073794;
  font-weight: 600;
}
.content-travel-menu {
  width: 100%;
  margin-top: 5%;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}
.content-profile {
  color: #000000;
}
.package-menu-container {
  width: 100%;
  display: none;
}
.package-menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.package-menu-card {
  width: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
  margin-bottom: 20px;
}
.package-menu-card-container {
  width: 25%;
  padding: 0 15px;
}
.custom-img-container {
  position: relative;
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-background-img {
  position: absolute;
  background-color: white;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* .custom-background-img {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  filter: blur(8px);
  -webkit-filter: blur(8px);

  height: 100%;
  width: 100%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
} */
.custom-card-img-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;
}
.custom-card-img-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 8;
}
.custom-card-img {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
}
.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);
}
.package-date {
  display: flex;
  flex-direction: row;
  gap: 5px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #8A93A1;
}
.package-name {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #000000;
}
/* .package-price {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #1B842C;
} */
.price-package {
  margin-top: 10px;
  font-weight: 700;
  font-size: 24px;
  color: #1B842C;
  display: flex;
  align-items: flex-start;
  /* display: block; */
}
.price-package .false-price {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #505E73;
  display: inline-block;
  margin-right: 5px;
  text-decoration: line-through;
}
.package-flight {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.package-flight-name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.package-flight-label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #8A93A1;
}
.package-flight-data {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 5px;
  color: #2C343F;
}
.name-biro {
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.biro-not-found {
  text-align: center;
  min-height: 40vh;
  width: 100%;
  font-weight: 600;
}
.place-biro {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.permission-biro {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.desc-biro {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #000000;
}
.review-menu-section {
  width: 100%;
  display: none;
}
.review-menu-container {
  width: 80%;
  margin-left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.box-review {
  width: 100%;
  position: relative;
}
.box-review textarea {
  width: 100%;
  padding: 20px;
  resize: none;
  border: 1px solid #C9CDD4;
  border-radius: 24px;
  outline: none;
}
.box-review  button {
  width: 66px;
  height: 32px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  right: 5%;
  bottom: 10%;
  position: absolute;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 16px;
}
.comment-review {
  margin-top: 10%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.comment-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.comment-name {
  width: 100%;
}
.comment-user-name {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.comment-data {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.comment-place {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.comment-date {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.comment-body {
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  margin-top: 20px;
  letter-spacing: -0.01em;
  color: #394352;
}
.galery-section-container {
  width: 100%;
  display: flex;
  justify-content: center;
  display: none;
}
.galery-section {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}
.galery-section img {
  width: 23%;
  margin-bottom: 2%;
}
.profile-login-container {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.bg-image-profile {
  width: 50%;
  background: radial-gradient(78.87% 54.79% at 50% 50%, #31617C 0%, #01091C 87.29%);
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.bg-image-profile img {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 56%;
  right: 0;
  transform: translateY(-50%);
}
.form-profile {
  width: 50%;
  background-color: #FFFFFF;
}
.welcome-form {
  margin-top: 150px;
  padding: 0 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 20px;
}
.welcome-form.register-form {
  margin-top: 120px;
  gap: 5px;
}
.login-logo img {
  height: 50px;
}
.verification-form {
  margin-top: 30%;
  width: 60%;
  margin-left: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 20px;
  display: none;
}

.verification-form-register {
  margin-top: 30%;
  width: 60%;
  margin-left: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 20px;
  display: none;
}
.register-account-form {
  margin-top: 30%;
  width: 60%;
  margin-left: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 20px;
  display: none;
}
.welcome-title {
  font-weight: 600;
  font-size: 32px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #083CA3;
}
.welcome-desc {
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.welcome-input {
  text-align: start;
}
.welcome-input input{
  width: 100%;
  outline: none;
  padding-left: 10%;
  border: none;
  height: 56px;
  background: rgb(247,247,247);
  border-radius: 12px;
}
/* .welcome-input small{
  padding-left: 10%;
  font-style: italic;
  color: #ee2d34;
  font-size: 12px;
  text-align: start;
  margin: 0;
} */
.welcome-input p{
  text-align: left;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: #505E73;
  margin: 0;
}
.welcome-input small, .welcome-form small {
  text-align: left;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: #ee2d34;
  font-style: italic;
  margin: 0;
}
.welcome-button button{
  width: 100%;
  height: 54px;
  outline: none;
  border: none;
  color: #FFFFFF;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 12px;
}
.question-account {
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.register-account {
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #3963B5;
}
.pretty input:checked~.state.p-primary label:after, .pretty.p-toggle .state.p-primary label:after {
  background-color: #062B74 !important;
}

.personal-number {
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #073794;
}

.edit-number-btn button{
  padding: 3px 10px 3px 10px;
  border: 1px solid #2582B8;
  height: auto;
  border-radius: 16px;

  font-weight: 500;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: #2582B8;
}

.otp-input input{
  display:inline-block;
  width: 49px;
  height: 64px;
  border: 1px solid #C9CDD4;
  color: #C9CDD4;
  outline: none;
  border-radius: 12px;
  text-align:center;
}
.otp-input input:focus{
  border: 1px solid #083CA3;
  color: #083CA3;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.select-birthday {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.scroll-data-input {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
  max-height: 400px;
  overflow-y: scroll;
}

/* width */
div.scroll-data-input::-webkit-scrollbar {
  width: 10px;
}

/* Track */
div.scroll-data-input::-webkit-scrollbar-track {
  background: #D9D9D9;
}
 
/* Handle */
div.scroll-data-input::-webkit-scrollbar-thumb {
  background: #5A7CC1;
  border-radius: 4px;
}

/* Handle on hover */
div.scroll-data-input::-webkit-scrollbar-thumb:hover {
  background: #5A7CC1;
}
.day-select {
  width: 30%;
}
.day-select select{
  width: 100%;
  height: 56px;
  background: #F8F8F8;
  border-radius: 12px;
  outline: none;
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  letter-spacing: -0.01em;
  background-image: url("../assets/icon-arrow-collapse.svg"); 
  background-repeat: no-repeat;
  background-position: 90%;
  background-size: 25px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 10px;
  color: #505E73;
  border: none;
}

.month-select {
  width: 30%;
}
.month-select select{
  width: 100%;
  height: 56px;
  background: #F8F8F8;
  border-radius: 12px;
  outline: none;
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  letter-spacing: -0.01em;
  background-image: url("../assets/icon-arrow-collapse.svg"); 
  background-repeat: no-repeat;
  background-position: 90%;
  background-size: 25px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 10px;
  color: #505E73;
  border: none;
}
.year-select {
  width: 30%;
}
.year-select input{
  width: 100%;
  height: 56px;
  background: #F8F8F8;
  border-radius: 12px;
  outline: none;
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  letter-spacing: -0.01em;
  background-image: url("../assets/icon-arrow-collapse.svg"); 
  background-repeat: no-repeat;
  background-position: 90%;
  background-size: 25px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 10px;
  color: #505E73;
  border: none;
}

.label-up {
  font-weight: 500;
  font-size: 14px;
  width: 100%;
  text-align: left;
  margin-bottom: -5%;
  letter-spacing: -0.01em;
  color: #737E8F;
}

.city {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.select-city {
  width: 100%;
}
.select-city select{
  width: 100%;
  height: 56px;
  background: #F8F8F8;
  border-radius: 12px;
  outline: none;
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  letter-spacing: -0.01em;
  background-image: url("../assets/icon-arrow-collapse.svg"); 
  background-repeat: no-repeat;
  background-position: 95%;
  background-size: 25px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 10px;
  color: #505E73;
  border: none;
}
.profile-body {
  display: flex;
  flex-direction: row; 
  padding-top: 150px;
  width: 100%;
  margin-bottom: 90px;
}
.side-menu-profile {
  width: 25%;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  transition: .5s;
}
.button-show-menu {
  display: none;
}
.button-show-menu img{
  width: 50px;
  position: fixed;
}
.close-btn-side-bar {
  position: absolute;
  right: 10px;
  top: 15px;
  display: none;
  font-size: 25px;
}

.profile-data {
  width: 75%;
  display: flex;
  flex-direction: column;
  padding: 0 60px;
  min-height: 100vh;
}
.photo-profile {
  width: 100%;
  gap: 10px;
  padding: 0 60px;
  /* margin-left: 15%; */
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.photo-profile img {
  width: 64px;
  height: 64px;
  border-radius: 100%;
}
#preview-image {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  aspect-ratio: 1/1;
}
.list-menu-profile {
  margin-top: 30px;
  width: 100%;
  gap: 10px;
  margin-left: 0;
  display: flex;
  flex-direction: column;
}

.list-menu-profile .menu{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 10px;
  align-items: center;
  /* height: 52px; */
  padding: 12px 0 12px 60px;
  background: #F7F7F7;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #073794;
  cursor: pointer;
}

.list-menu-profile .other-menu{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 10px;
  align-items: center;
  /* height: 52px; */
  padding: 12px 0 12px 60px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #394352;
  cursor: pointer;
}

.list-menu-profile .other-menu-logout{
  color: #F37472;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 10px;
  align-items: center;
  /* height: 52px; */
  padding: 12px 0 12px 60px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.profile-data-box {
  width: 100%;
  /* margin-left: 10%; */
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.list-menu-profile .other-menu:hover{
  background: rgb(247,247,247);
  color: #073794;
}
.register-account-form-profile {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 20px;
}
.profile-title {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}
.profile-title .head{
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #083CA3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.profile-title .body{
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.profile-title .route{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.profile-title .route .first{
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #073794;
  cursor: pointer;
}

.profile-title .route .second{
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #495669;
}
.photo-profile-edit {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;
}

.renew-photo {
  width: fit-content;
  height: 32px;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 16px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  border: none;
  outline: none;
}

.delete-photo {
  width: fit-content;
  height: 32px;
  border-radius: 16px;
  border: 1px solid #2582B8;
  font-weight: 600;
  padding: 4px;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #2582B8;
}

.form-edit {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  gap: 20px;
}

.input-profile {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.input-profile small {
  text-align: left;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: #ee2d34;
  font-style: italic;
  margin: 0;
}

.input-profile label{
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.label-birthday {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
  margin-bottom: -20px;
}
.input-profile input{
  width: 100%;
  height: 56px;
  background: #F8F8F8;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  outline: none;
  letter-spacing: -0.01em;
  color: #505E73;
  padding-left: 5%;

}

.button-save-edit {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.button-save-edit button{
  width: fit-content;
  height: 44px;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 8px;
  border: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.voucher-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.voucher {
  margin-top: 20px;
  min-width: 300px;
  height: 202px;
  background: #FFFFFF;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  padding: 5px;
}
.voucher-add {
  position: relative;
  margin-top: 20px;
  min-width: 300px;
  cursor: pointer;
}
.voucher-add img {
  width: 100%;
}

.plus-icon-voucher {
  width: 10%;
  position: absolute;
  top: 40%;
  left: 45%;
}

.voucher-header {
  display: flex;
  flex-direction: row;
  width: 90%;
  margin-left: 5%;
}
.voucher-info {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.voucher-image {
  width: 30%;
  display: flex;
  justify-content: end;
}
.voucher-image img{
  width: 80px;
    height: 80px;
    border-radius: 10px;
    display: inline-block;
}

.voucer-title {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #8A93A1;
}

.voucher-price {
  display: flex;
  flex-direction: row;
  vertical-align: text-top;
  padding: 0;
  margin: 0;
}

.voucher-price .nominal {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #073794;
  
}

.voucher-price .currency {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #073794;
}

.voucher-code {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.voucher-code .label{
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #8A93A1;
}

.voucher-code .code{
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #179E5D;
  padding: 5px;
  background: #E9FCF3;
  border-radius: 6px;
}

.separate-voucher {
  width: 90%;
  border: 1.5px dashed #AFB5BF;;
}

.voucher-footer {
  display: flex;
  flex-direction: row;
  width: 90%;
  margin-left: 5%;
}

.voucher-expired {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.use-voucher {
  display: flex;
  justify-content: end;
  width: 50%;
}


.voucher-expired .label{
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #8A93A1;
}

.voucher-expired .date{
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.use-voucher {
  width: 50%;
  display: flex;
  justify-content: end;
}

.use-voucher button{
  width: fit-content;
  height: 32px;
  border-radius: 16px;
  outline: none;
  border: 1px solid #2582B8;
}

.use-voucher button span{
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  padding: 0px 5px 0px 5px;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.voucher-detail {
  width: 95%;
  display: flex;
  flex-direction: row;
  height: 500px;
}

.voucher-description {
  width: 70%;
}

.voucher-use {
  width: 30%;
}

.voucher-header-detail {
  display: flex;
  flex-direction: row;
  width: 80%;
}

.voucher-description .description {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 80%;
}

.voucher-description .description .label{
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #394352;
}

.voucher-description .description .list{
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;

}

.separate-detail-voucher {
  width: 80%;
  margin-right: 20%;
  border: 1px solid #C9CDD4;
}

.voucher-image-detail {
  width: 30%;
  display: flex;
  justify-content: end;
}
.voucher-image-detail img{
  width: 80px;
    height: 80px;
    border-radius: 10px;
    display: inline-block;
}
.card-voucher-use {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #FFFFFF;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 16px 25px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding-bottom: 15px;
}

.card-voucher-use .title{
  width: 90%;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #394352;
  text-align: left;
}

.card-voucher-use .expired{
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.card-voucher-use .expired .label{
  font-weight: 400;
  font-size: 13px;
  text-align: left;
  letter-spacing: -0.01em;
  color: #8A93A1;
}

.card-voucher-use .expired .date{
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.card-voucher-use .button{
  width: 90%;
}

.card-voucher-use .button button{
  width: 100%;
  height: 54px;
  outline: none;
  border: none;
  color: #FFFFFF;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 12px;
}

.claim-voucher {
  display: flex;
  justify-content: end;
  width: 50%;
}

.claim-voucher button{
  width: fit-content;
  height: 32px;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 16px;
  color: #FFFFFF;
  padding: 0 10px 0 10px;
  outline: none;
  border: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.search-voucher {
  width: 100%;
  height: 88px;
  background: #F8F8F8;
  border-radius: 14px;
  display: flex;
  flex-direction: row;
}

.input-search{
  width: 80%;
}

.input-search input{
  width: 100%;
  height: 56px;
  background: #FFFFFF;
  border-radius: 12px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
  padding-left: 5%;
  outline: none;
  border: none;
}

.button-search {
  width: 10%;
}
.button-search button{
  width: 56px;
  height: 56px;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 12px;
}
.pesanan-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.tab-pesanan {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.tab-pesanan .tab {
  width: fit-content;
  height: 40px;
  border-bottom: 2px solid transparent;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #737E8F;
  cursor: pointer;
}

.tab-pesanan .active {
  width: fit-content;
  height: 40px;
  color: #3963B5;
  border-bottom: 2px solid #3963B5;
}

.tab-pesanan .tab:hover {
  width: fit-content;
  height: 40px;
  color: #3963B5;
  border-bottom: 2px solid #3963B5;
}
.tab-pesanan .tab:focus {
  width: fit-content;
  height: 40px;
  color: #3963B5;
  border-bottom: 2px solid #3963B5;
}

.profil-data-box {
  width: 90%;
}

.list-card-pesanan {
  width: 100%;
  display: flex;
  margin-top: 30px;
  flex-direction: column;
  padding-bottom: 50px;
  /* gap: 20px; */
}
div.list-card-pesanan::-webkit-scrollbar {
  width: 0;
}
.list-card-pesanan .card-pesanan+.card-pesanan {
  margin-top: 32px;
}
.card-pesanan {
  width: 100%;
  height: fit-content;
  display: block;
}
.card-pesanan-wrapper {
  width: 100%;
  height: 225px;
  background: #FFFFFF;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
}
.thumbnail-pesanan {
  display: flex;
}
.price-pesanan {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10px;
}
.price-pesanan .price {
  text-align: end;
}
.price-pesanan .price .promo-note {
  font-size: 12px;
  color: #505E73;
}
.card-pesanan .travel{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-pesanan .detail-travel{
  width: 100%;
  margin-bottom: 10px;
}
.card-pesanan .travel .tour img {
  width: 50px;
  height: 50px;
}
.card-pesanan .travel .tour{
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.card-pesanan .kode-pesanan{
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #495669;
}
.image-detail-travel {
  /* border-radius: 16px; */
  height: 225px;
}
.image-detail-travel img {
  height: 225px;
  /* width: 96px; */
  /* border-radius: 16px 0 0 16px; */
}
.detail-pesanan {
  width: 100%;
  padding: 10px 20px;
  height: 225px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* background-color: red; */
}

.detail-pesanan .price {
  /* background-color: red; */
  display: flex;
  align-items: flex-end;
}

.price .total {
  font-weight: 600;
  font-size: 24px;
  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;
  margin-bottom: 10px;
}

.price span {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.detail-pesanan .title, .detail-pesanan .total{
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.detail-pesanan .hotel {
  display: flex;
  flex-direction: row;
  align-items: center;
  vertical-align: middle;
  gap: 10px;
}

.detail-pesanan .hotel .label{
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.detail-pesanan .hotel .value{
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.detail-pesanan .hotel .rating{
  display: flex;
  align-items: center;
}
.note-pesanan {
  display: flex;
  margin: 20px 0;
  align-items: flex-start;
  justify-content: start;
}
.note-pesanan img {
  width: 20px;
  margin-top: 2px;
}
.note-detail {
  color: #000000;
  font-size: 14px;
  margin-left: 10px;
}

#pengajuan {
  display: none;
}
#diproses {
  display: none;
}
#selesai {
  display: none;
}
#dibatalkan {
  display: none;
}

.pengajuan-icon {
  width: fit-content;
  height: fit-content;
  padding: 5px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  background-color: #F4C610;
}
.diproses-icon {
  background-color: #105CF4;
}
.dp-icon {
  background-color: #08B433;
}
.dibatalkan-icon {
  background-color: #BE0909;
}
.label-pesanan {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.no-pesanan {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.card-detail-pesanan {
  width: 100%;
  height: 250px;
  background: #FFFFFF;
  /* box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08); */
  border: 1px solid #e5e5e5;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: space-between;
}
.card-detail-pesanan.pdf-setup {
  height: auto;
}
.label-tagihan {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.label-harga {
  width: 85%;
}
.download-invoice {
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: start;
}
.download-invoice img{
  width: 44px;
  cursor: pointer;
}
.label-harga-container {
  display: flex;
  flex-direction: row;
}
.harga-tagihan {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.harga-tagihan .name{
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #222730;
}
.harga-tagihan .price{
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #2582B8;
}
.address-pesanan {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #505E73;
}
.separate-pesanan {
  border: 1px dashed #C9CDD4;
  width: 100%;
}

.process-pesanan {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.process-pesanan .process{
  display: flex;
  flex: auto;
  justify-content: center;
  align-items: center;
  /* background-color: green; */
  position: relative;
}

.process-pesanan .process .data{
  display: flex;
  flex-direction: column;
  text-align: center;
  /* background-color: yellow; */
}
.process-pesanan .process .arrow{
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: red; */
  position: absolute;
  left: 0;
  translate: -50% 0;
}

.process-pesanan .process .data .label{
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #8A93A1;
}

.process-pesanan .process .data .label.enabled{
  color: #08B433;
}
.process-pesanan .process .data .label.canceled {
  color: #BE0909;
}

/* .process-pesanan .process .data .label-disabled{
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #8A93A1;
} */

.process-pesanan .process .data .date{
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #495669;
}
.riwayat-pembayaran {
  margin-top: 16px;
}
.riwayat-wrapper {
  display: flex;
}
.margin-riwayat {
  width: 24px;
}
.tabel-paket {
  width: 60%;
}
.tabel-jumlah {
  width: 5%;
}
.tabel-harga {
  width: 30%
}
.tabel-price {
  text-align: end;
}
.tabel-total {
  color: #083CA3;
  font-size: 20px;
}
.tabel-cashback {
  color: #083CA3;
  font-size: 20px;
}
.tabel-subtotal {
  font-weight: 600;
}
.tabel-price.promo {
  vertical-align: middle;
}
.tabel-promo-detail {
  display: block;
}
.product-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.product-list .label{
  width: 100%;
  display: flex;
  flex-direction: row;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
}

.product-list .label .label-1{
  width: 50%;
}

.product-list .label .label-2{
  width: 25%;
}

.product-list .label .label-3{
  width: 25%;
}

.product {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}
.product-list .product-data{
  width: 100%;
  display: flex;
  /* flex-direction: row; */
}

.product-list .product-data .image img {
  width: 125px;
  height: auto;
}

.product-list .value-table {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.product-list .product-data .detail {
  margin-left: 15px;
}

.product-list .product-data .image{
  width: 125px;
  display: flex;
  flex-direction: row;
}

.detail-pesanan-product {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.detail-pesanan-product .title, .detail-pesanan-product .total{
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.detail-pesanan-product .hotel {
  display: flex;
  flex-direction: row;
  align-items: center;
  vertical-align: middle;
  gap: 10px;
}

.detail-pesanan-product .hotel .label{
  width: fit-content;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.detail-pesanan-product .hotel .value{
  width: fit-content;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.detail-pesanan-product .hotel .rating{
  width: fit-content;
  display: flex;
  align-items: center;
}

.detail-pesanan-product .departure{
  display: flex;
  flex-direction: row;
  width: 100%;
}

.detail-pesanan-product .departure .label{
  display: flex;
  flex-direction: row;
  width: 40%;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.detail-pesanan-product .departure .city{
  display: flex; 
  flex-direction: row;
  width: 60%;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #2C343F;

}

.value-data {
  width: 25%;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.price-data {
  width: 25%;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.separate-product {
  width: 100%;
  border: 1px solid #C9CDD4;
}

.instruction-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.card-warning {
  width: 100%;
  /* height: 292px; */
  background: #e5e5e5;
  border-radius: 12px;
  display: flex;
  height: fit-content;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

.card-warning .header{
  /* padding-left: 10px; */
  width: 100%;
  height: 36px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  background: #E00B0B;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  padding: 5px 10px;
}

.card-warning .body{
  width: 100%;
  text-align: justify;
  padding: 10px 30px;
}
.card-warning .body ol {
  padding-left: 1.8em;
  margin-bottom: 0;
}
.card-warning.pdf-setup {
  width: 100%;
  padding: 0;
  margin: 30px 0 100px;
}
.cancel-card {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cancel-card .data-label{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cancel-card .data-label .label{
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.cancel-card .data-label .total{
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.cancel-card .data-label .total-price{
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.button-cancel {
  width: 100%;
}

.button-cancel button{
  width: 100%;
  height: 54px;
  border: 1px solid #F37472;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
  color: #F37472;
}

.jamaah-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
}
.daftar-jamaah-wrapper {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: space-between;
  margin: 0 -10px 10px;
  align-items: start;
  justify-content: flex-start;
  width: 100%;
}
.daftar-jamaah-content {
  width: 50%; 
}
.jamaah-container.pdf-setup {
  margin: 20px 0 40px;
}

.section-title.title{
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #222730;
  margin-bottom: 12px;
}

.jamaah-container .card-jamaah{
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  border: none;
}

.jamaah-container .card-jamaah .header{
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: start;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}

.jamaah-container .card-jamaah .number {
  width: 85px;
}

.jamaah-container .card-jamaah .header .address .street{
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.card-deck-biro {
  display: flex;
  /* gap: 25px; */
  flex-wrap: wrap;
}
.card-deck .card {
  margin: 0;
}
.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-pesanan-new {
  width: 100%;
  display: flex;
  flex-direction: row;
  /* margin-bottom: 30px; */
  align-items: center;
}
.command-pesanan {
  display: flex;
  justify-content: end;
  align-items: center;
}
.command-pesanan .command-pesanan-button+.command-pesanan-button{
  margin-left: 15px;
}
.command-pesanan-button img {
  width: 20px;
}
.separate-line {
  background-color: #C9CDD4;
  height: 1px;
  width: 100%;
}
.invoice-detail-wrapper {
  display: block;
}
.invoice-mobile-wrapper {
  display: none;
}
/* Invoice Mobile */
.i-section {
  background-color: #ECEFF5;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  }

  .i-card {
  width: 400px;
  max-width: 100vw;
  background-color: white;
  }

  .i-card-wrapper {
  width: 400px;
  max-width: 100vw;
  display: block;
  margin: 0 auto;
  }

  .header-line {
  width: 100%;
  height: 5px;
  background-color: #073794;
  }

  .header-logo-wrapper {
  padding: 30px 10px;
  display: flex;
  }

  .i-header .header-title div+div {
  margin-top: 4px;
  }

  .i-header .header-title .status {
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  width: fit-content;
  background-color: #F4C610;
  }
  .i-header .header-title .status.diproses {
  background-color: #105CF4;
  }
  .i-header .header-title .status.lunas {
  background-color: #08B433;
  }
  .i-header .header-title .status.dibatalkan {
  background-color: #BE0909;
  }

  .i-header .header-title .label {
  color: #737E8F;
  font-size: 10px;
  }

  .i-header .header-title .number {
  font-size: 16px;
  font-weight: 600;
  }

  .i-header .company-logo {
  width: 125px;
  }

  .i-header .header-logo {
  height: fit-content;
  width: fit-content;
  margin: auto 0 auto auto;
  }

  .i-content {
  padding: 0px 10px 20px;
  }

  .i-content .section-title {
  font-size: 12px;
  color: #737E8F;
  }

  .i-content .section-detail {
  margin: 10px 0;
  }

  table.i-table {
  border: 0;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  font-size: 12px;
  }

  .i-table td {
  padding: 5px 0;
  vertical-align: top;
  }

  .px-2 {
  padding: 5px 5px 0;
  }

  .i-footer {
  background-color: #073794;
  color: white;
  padding: 10px;
  }
  .i-footer-wrapper {
  margin: 0 auto;
  width: fit-content;
  }
  .i-socmed {
  display: flex;
  width: 100%;
  }

  .i-socmed a img {
  width: 20px;
  }

  .i-socmed a+a{
  margin-left: 20px;
  }

  .i-address {
  display: flex;
  margin-top: 10px;
  width: 100%;
  }

  .i-socmed .address-item+.address-item {
  margin-left: 20px;
  }
  .cb, td {
  color: black;
  }
  .cw {
  color: white;
  }
/* End Invoice Mobile */
.header-pesanan {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.header-pesanan .company-logo-detail {
  height: 50px;
}
.tagihan-untuk {
  width: 70%;
  display: flex;
  flex-direction: column;
}

.total-tagihan {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.total-tagihan .tagihan {
  text-align: right;
}
.total-tagihan-new {
  width: 45%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}

.download-section {
  display: flex;
  align-items: center;
  justify-content: center;
}
.download-section img {
  height: 35px;
  width: 35px;
}

.tagihan-untuk .label{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
}

.tagihan-untuk .name{
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #222730;
  margin: 5px 0;
}

.tagihan-untuk .street{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.total-tagihan .sisa-tagihan{
  display: flex;
  flex-direction: column;
}

.total-tagihan .tagihan .label{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
}

.total-tagihan .tagihan .value{
  font-weight: 600;
  font-size: 24px;
  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-tagihan .tagihan .valued {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #083CA3;
}

.total-tagihan .canceled-label {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #BE0909;
}

.total-tagihan .canceled-value {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
}

.total-tagihan .sisa-tagihan .label{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
}

.total-tagihan .sisa-tagihan .value{
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #DD6A68;
}
.lunas {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
}

.total-tagihan-new .tagihan{
  display: flex;
  flex-direction: column;
}

.total-tagihan-new .sisa-tagihan{
  display: flex;
  flex-direction: column;
}

.total-tagihan-new .tagihan .label{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
}
.total-tagihan-new .tagihan .warning{
  display: flex;
  flex-direction: row;
  gap: 5px;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #505E73;
}

.total-tagihan-new .tagihan .value{
  font-weight: 600;
  font-size: 24px;
  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-tagihan-new .tagihan .value-new{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #495669;
}

.total-tagihan-new .sisa-tagihan .label{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #737E8F;
}

.total-tagihan-new .sisa-tagihan .value{
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #DD6A68;
}
.print-logo{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: end;
  padding-right: 5%;
}
.print-logo img {
  width: 15%;
}

.profile-body-print {
  width: 100%;
  display: flex;
  justify-content: center;
}
.profile-body-print .profile-data{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.instruction-print {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.instruction-print .title{
  width: 100%;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #2C343F;
  padding-left: 2%;
  margin-bottom: 10px;
}
.instruction-print .instruction{
  width: 100%;
  font-weight: 400;
  color: #394352;
}
/* .article-container {
  display: none;
} */

/* Adli added */
.package-card-container {
  width: 100%;
  padding: 0 60px;
  margin: 5% 0 0;
}
.custom-card-package .card-body {
  padding: 12px 0;
}
.card-deck {
  width: 100%;
  /* justify-content: space-evenly; */
}

.custom-img-container {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-background-img {
  position: absolute;
  background-color: white;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.custom-card-package{
  border: none !important;
  font-size: 16px;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: start;
  padding: 10px;
  width: 100%;
}
.card-custom-package-container {
  width: 25%;
  padding: 0 5px;
  position: relative;
}
.custom-card-package:hover .custom-card-decoration {
  opacity: 100;
  visibility: visible;
}
.custom-card-decoration {
  position: absolute;
  opacity: 0;
  visibility: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 10;
  box-shadow: 5px 5px 15px rgba(100, 100, 100, 0.3);
  transition: all 0.5s ease-in-out;
}
.custom-card-decoration .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.custom-card-decoration span {
  color: white;
  background: linear-gradient(225deg, #2582B8 13.62%, #3667C7 57.78%, #083CA3 100%);
  border-radius: 20px;
  padding: 0.5rem 1.5rem;
}
.custom-card-package:hover  {
  text-decoration: none;
}
.custom-card-img-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;
}
.custom-card-img-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 8;
}
.custom-card-img {
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
}
.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-icon-detail {
  width: 20px;
}
.date-package {
  font-weight: 500; 
  color: #8A93A1;
  padding: 12px 0;
}
.title-package {
  /* margin-top: 10px; */
  font-weight: 700;
  font-size: 16px;
  color: #000000;
  margin-bottom: 8px;
}
.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: end;
  font-weight: 500;
  color: #2C343F;
  font-size: 14px;
}
.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;
}

/* Adli Added */
.panduan-ibadah-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 30px;
  margin-top: 150px;
  padding: 0 60px;
}
.list-menu-panduan-doa {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 30px;
}
.list-menu-sultan {
  display: flex;
  flex-direction: column;
  width: 36rem;
  background-color: white;
  align-self: center;
  padding: 32px;
  margin-bottom: 72px;
  margin-top:-32px
}
.img-menu-sultan {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.img-menu-sultan img {
  width: 200px;
  height: fit-content;
}
.list-button-sultan {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.list-button-sultan .button-sultan+.button-sultan {
  margin-top: 16px;
}
.button-sultan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #073794;
  padding: 8px 16px;
}
.button-sultan:hover {
  opacity: 0.8;
}
.button-sultan-title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #073794;
  text-align: center;
}
.button-sultan-subtitle {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #2C343F;
  text-align: center;
}
.title-menu-panduan-ibadah-doa {
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #073794;
  text-align: center;
  /* white-space: pre-wrap; */
}
.subtitle-menu-panduan-ibadah-doa {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
  text-align: center;
  margin: 12px 0 24px;
}
.list-menu-schedule {
  display: flex;
  flex-direction: column;
  width: 54rem;
  background-color: white;
  align-self: center;
  padding: 32px;
  margin-bottom: 72px;
  margin-top:-32px
}
.list-button-new-schedule {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.lbns .button-new-schedule+.button-new-schedule{
  margin-top: 16px;
}
.grid-row {
  display: grid;
  width: 100%;
  grid-template-columns: 12% 16% 14% 20% 24% 14%;
  /* gap: 10px; */
  padding: 0px 16px;
  border: 2px solid #E0E6F2;
  border-radius: 16rem;
  align-items: center;
  background-color: #ECEFF5;
  color: #073794;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
}
.grid-row.header {
  background-color: #073794;
  color: white;
  box-shadow: none;
  font-weight: bold;
  margin-bottom: 16px;
}
.button-new-schedule {
  position: relative;
}
.button-new-schedule .tag {
  position: absolute;
  top: -5px;
  left: -5px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.button-new-schedule .tag-promo {
  width: 30px;
  height: 30px;
}
.button-new-schedule .tag-promo img {
  width: 100%;
  height: auto;
}
.grid-row > div {
  padding: 10px;
  border-left: 2px solid #E0E6F2; /* separator */
  text-align: center;
  overflow: hidden;
}
/* Remove border from last item */
.grid-row > div:first-child {
  border-left: none;
}
.lbns .schedule-title{
  color: #000;
  font-size: 20px;
  font-weight: 600;
  margin: 16px 0;
}
.lbns .date {
  /* color: red; */
  font-weight: bold;
  font-size: 32px;
  display: flex;
  align-items: center;
  line-height: normal;
  height: 100%;
}
.lbns .month-year {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 4px;
}
.lbns .month {
  /* font-weight: normal; */
  font-size: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lbns .travel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.lbns .travel .img-wrapper {
  width: 50px;
  aspect-ratio: 1/1;
  overflow: hidden;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lbns .travel .img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.lbns .duration {
  /* color: red; */
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  justify-content: center;
  height: 100%;
}
.lbns .accommodation {
  /* width: 50px; */
  height: 100%;
  display: flex;
  align-items: center;     /* ✅ vertically center content */
  justify-content: center;
}
.lbns .accommodation .img-wrapper {
  width: 100px;
  aspect-ratio: 2/1;
  overflow: hidden;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lbns .accommodation img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.lbns .hotel {
  /* color: red; */
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  height: 100%;
}
.lbns .hotel table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
}
.lbns .hotel table td {
  margin: 0;
  padding: 0;
  border: none;
  color: #073794;
  font-weight: bold;
  font-size: 12px;
  text-align: left;
}
.lbns .price {
  /* color: red; */
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: end;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  height: 100%;
  margin-right: -16px;
  padding-right: 24px;
  border-top-right-radius: 16rem;
  border-bottom-right-radius: 16rem;
  color: white;
}
.price.price-color-promo {
  background-color: #DF070E;
}
.price.price-color {
  background-color: #073794;
}
.lbns .promo-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: end;
}
.lbns .false-price {
  color: #F4F816;
  display: inline-block;
  margin-right: 5px;
  text-decoration: line-through;
  font-size: 11px;
}
.lbns .real-price {
  font-weight: bold;
  color: white;
  /* font-size: 24px; */
  display: flex;
  justify-content: end;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
}
.input-pencarian-doa-container {
  width: 70%;
  /* margin-left: 5%; */
  /* height: 88px; */
  padding: 10px 0;
  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: 100%;
  /* padding-left: 2%; */
  /* height: 80%; */
  padding: 10px 20px;
}

.input-pencarian-doa{
  width: 100%;
  padding: 10px;
  /* height: 80%; */
  background: #F8F8F8;
  border: none;
  outline: none;
  box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}
.route-artikel {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #737E8F;
  gap: 20px;
}
.route-artikel .box{
  width: 70%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.route-artikel .menu-toggler {
  /* width: 100%; */
  height: 100%;
  position: relative;
  display: none;
}
.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;
}
.new-artikel-container {
  display: flex;
  margin: 0 -15px;
}
.new-artikel-highlight {
  width: 67%;
  padding: 0 15px;
}
.new-promosi-highlight {
  width: 100%;
  padding: 0 15px;
}
.new-artikel-scroll {
  width: 33%;
  padding: 0 15px;
}
.scroll-detail-artikel {
  position: sticky;
  position: -webkit-sticky;
  height: 100vh;
  top: 120px;
}
.new-artikel-highlight-container {
  margin: 0 -15px;
  display: flex;
}
.new-artikel-card {
  width: 50%;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.new-artikel-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  flex-shrink: 0;
}
.new-artikel-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.text-img-menu-doa {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #073794;
}
.bottom-text-img-menu {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
  text-align: justify;
}
.button-selengkapnya {
  height: 32px;
  border: 1px solid #2582B8;
  border-radius: 16px;
  font-weight: 600;
  color: #2582B8;
  font-size: 14px;
}
.new-artikel-scroll-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: scroll;
}
.scroll-detail-artikel .new-artikel-scroll-container {
  height: 80vh;
}
.new-artikel-scroll-card {
  width: 100%;
}
.new-artikel-scroll-title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #073794;
}
.new-artikel-scroll-title + .new-artikel-scroll-title {
  margin: 12px 0;
}
.new-artikel-scroll-desc {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #505E73;
  text-align: justify;
  margin: 8px 0;
}
.button-selengkapnya-scroll {
  border: none;
  background-color: transparent;
  /* border-radius: 16px; */
  font-weight: 600;
  color: #2582B8;
  font-size: 14px;
  padding: 0;
  margin: 0;
}
.article-percat {
  width: 100%;
  margin: 30px 0 60px;
}
.article-percat-container {
  margin: 0 -15px;
  display: flex;
}
.article-percat-card {
  width: 25%;
  padding: 0 15px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.art-cat {
  color: #2C343F;
  font-size: 14px;
  font-weight: 400;
  padding: 3px 12px;
}
.detail-informasi-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 60px;
  margin: 150px 0 90px;
}
.new-artikel-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.title-artikel-detail {
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.01em;
  color: #073794;
}

.title-promosi-detail {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.01em;
  color: #073794;
}
.subtitle-promosi-detail {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #505E73;
}
.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;
}
.bottom-text-detail-menu {
  width: 100%;
  height: fit-content;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #000000;
}
.bottom-promosi-detail-menu {
  margin-top: 16px;
  width: 100%;
  height: fit-content;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #000000;
}
.promosi-img-web {
  margin-bottom: 12px;
  width: 100%;
  display: block;
}
.promosi-img-mobile {
  margin-bottom: 12px;
  width: 100%;
  display: none;
}

.artikel-image {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.artikel-image img {
  border-radius: 1rem;
}
.panduan-ibadah-video-container {
  width: 100%;
}
.video-section-informasi {
  margin: 90px 0 90px;
}
.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%;
}
.desc-video-section-informasi {
  width: 100%;
  height: fit-content;
  /* margin-left: 10%; */
  /* margin-top: 5%; */
  display: flex;
  flex-direction: column;
  padding: 0 60px;
  margin-top: 60px;
}
.title-video-informasi {
  font-weight: 600;
  font-size: 40px;
  color: #394352;
}
.desc-video-informasi {
  width: 95%;
  margin-top: 20px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #2C343F;
}
.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 */
}

@media print {
  @page {
    size: A4;
    /* DIN A4 standard, Europe */
    /* margin: 20px; */
    size: auto;
  }

  .no-print {
    display: none;
  }

  * { overflow: hidden !important; }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact;
  }

  .profile-data {
    margin: 20px;
    padding: 0 !important;
    width: 100vw;
    min-height: auto;
    /* background-color: yellow; */
    position: relative;
  }

  .profile-data-box {
    margin: 0 !important;
    padding: 0 !important;
    /* background-color: green; */
  }

  .profile-body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw;
    height: 100vh;
    /* background-color: red; */
  }

  .pengajuan-icon {
    font-size: 11px;
  }

  .label-pesanan {
    font-size: 12px;
  }

  .no-pesanan {
    font-size: 14px;
  }

  .tagihan-untuk .label {
    font-size: 10px;
  }
  .tagihan-untuk .name {
    font-size: 16px;
    margin: 2px 0;
  }
  .tagihan-untuk .street {
    font-size: 12px;
  }
  .total-tagihan .tagihan .label {
    font-size: 12px;
  }
  .total-tagihan .tagihan .valued {
    font-size: 20px;
  }
  .total-tagihan .canceled-label {
    font-size: 20px;
  }
  .total-tagihan .canceled-value {
    font-size: 12px;
  }
  .card-detail-pesanan {
    height: fit-content;
  }
  .process-pesanan .process .data .label {
    font-size: 12px;
  }
  .process-pesanan .process .data .date {
    font-size: 11px;
  }
  .product-list .label {
    font-size: 12px;
  }
  .product-list .value-table {
    font-size: 12px;
  }
  .product-list .product-data .image img {
    width: 80px;
    height: auto;
  }
  .product-list .product-data .image{
    width: 80px;
  }
  .product-list {
    font-size: 12px;
  }
  .detail-pesanan-product .title, .detail-pesanan-product .total {
    font-size: 14px;
  }
  .detail-pesanan-product .hotel .label{
    font-size: 12px;
  }
  .detail-pesanan-product .hotel .value {
    font-size: 12px;
  }
  .detail-pesanan-product .departure .label{
    font-size: 12px;
  }
  .detail-pesanan-product .departure .city{
    font-size: 12px;
  }
  .jamaah-container .title {
    font-size: 14px;
  }
  .jamaah-container .card-jamaah .header {
    font-size: 12px;
  }
  .jamaah-container .card-jamaah .header .street {
    font-size: 12px;
  }
  .card-warning .header {
    height: fit-content;
    font-size: 11px;
  }
  .card-warning .body{
    padding: 10px 30px 10px 10px;
  }
  .card-warning .body ol {
    padding-left: 1.8em;
    font-size: 11px;
  }
  .instruction-container {
    position: absolute;
    bottom: 0;
  }
}