/* SCSS Value */
/* 
* There's SCSS linked. 
* If you want to change SCSS file, install SASS on your device then use the terminal CLI before edit the style.scss file.
* $sass --watch style.scss:style.css
* 
* Or just ignore the SCSS file (can be deleted) and edit CSS file instead.
*/
/* Colors */
/* Typography Managed by SCSS */
/* Font */




h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 42px;
  line-height: 52px;
  font-weight: 400;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  line-height: 42px;
  font-weight: 400;
}

h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
}

h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
}

h5 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
}

h6 {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

.bold1 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.bold2 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 700;
}

.body1 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.body2 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
}

.caption1 {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
}

.caption2 {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
}

.display1 {
  font-family: "Rufina", serif;
  font-size: 48px;
  line-height: 60px;
  font-weight: 400;
}

.display2 {
  font-family: "Rufina", serif;
  font-size: 36px;
  line-height: 48px;
  font-weight: 400;
}

.upperCase {
  text-transform: uppercase;
}

@media (max-width: 575px) {
  h1 {
    font-size: 36px;
    line-height: 42px;
  }
  h2 {
    font-size: 28px;
    line-height: 36px;
  }
  h3 {
    font-size: 24px;
    line-height: 32px;
  }
  h4 {
    font-size: 21px;
    line-height: 24px;
  }
  .display1 {
    font-size: 32px;
    line-height: 40px;
  }
  .display2 {
    font-size: 24px;
    line-height: 32px;
  }
}
/* Space */
/**** Style ****/
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #333;
  font-size: 16px;
  line-height: 24px;
  width: 100%;
  overflow-x: hidden;
}

a {
  color: #245073;
}

.textRed {
  color: #D63010;
}

.textPrimary {
  color: #245073;
}

.textWhite {
  color: #fff;
}

.textFade {
  color: #777;
}

.textUpper {
  text-transform: uppercase;
}

.bgExplorer {
  background-color: #24878C;
  color: #fff;
}

.bgVoyager {
  background-color: #5E6790;
  color: #fff;
}

.bgWanderlust {
  background-color: #245073;
  color: #fff;
}

hr {
  margin: 24px 0;
}

hr.short {
  background-color: #60CBC0;
  height: 3px;
  width: 90px;
  margin: 24px auto;
  border: none;
  border-radius: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

.marginY {
  margin: 16px 0;
}

.marginYL {
  margin: 24px 0;
}

.marTopYL {
  margin-top: 24px;
}

.paddY {
  padding: 16px 0;
}

.paddYL {
  padding: 24px 0;
}

.paddSection {
  padding: 40px 0;
}

.fullWidth {
  width: 100%;
}

.readMore {
  background-color: transparent;
  width: 100%;
  border: none;
  color: #245073;
}

/* 
** Overrided Bootstrap 
*/
/* Button */
.btn {
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  padding: 8px 12px;
}
.btn i {
  margin-right: 4px;
  font-weight: 400;
}

.btn-lg {
  font-size: 16px;
  line-height: 18px;
  padding: 16px 24px;
  font-weight: 600;
}

.btn-primary {
  background-color: #245073;
  border-color: #245073;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: #153949;
}

.btn-primary:disabled {
  background-color: #cecece;
  border-color: #999;
}

.btn-outline-primary {
  color: #245073;
  border-color: #245073;
  background-color: #fff;
}

.btn-outline-primary:hover {
  background-color: #245073;
  border-color: #245073;
}

/* Form */
.form-control-lg {
  font-size: 16px;
}

/* Alert */
.alert {
  font-size: 14px;
}
.alert i {
  font-size: 16px;
  margin-right: 4px;
}

/* Accordion */
.accordion {
  background-color: transparent;
}

.accordion-item {
  background-color: rgba(255, 255, 255, 0.8);
}

.accordion-button {
  padding: 8px 16px;
  font-size: 14px;
  color: #245073;
  background-color: transparent;
}

.accordion-button:not(.collapsed) {
  color: #245073;
  background-color: transparent;
  box-shadow: none;
}

.accordion-button::after {
  background-size: 16px 16px;
  background-position: center right;
  right: 0;
}

.accordion-body {
  padding: 8px 16px;
  background-color: transparent;
}

/* Table */
.table {
  border-color: #C5D0DC;
}
.table i {
  font-size: 18px;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: rgba(255, 255, 255, 0.6);
}

.textLink {
  display: flex;
  gap: 8px;
  text-decoration: none;
  align-items: center;
  justify-content: end;
  color: #333;
}
.textLink i {
  font-size: 24px;
}

/* Theme */
/* Footer */
.siteFooter {
  background-color: #185A5E;
  color: #fff;
  padding: 24px 0;
}
.siteFooter .footerLogo img {
  height: 36px;
  width: auto;
}

/* Login Page */
.homeLanding {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  height: calc(100vh - 84px);
  padding: 32px 16px;
  background-image: url(../images/kv.jpg);
  background-size: cover;
  background-position: center center;
}
.homeLanding h2 {
  color: #507D96;
}

.loginCard {
  max-width: 450px;
  margin: 32px auto 0 auto;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #fff;
  border-radius: 8px;
  overflow: hidden;
}
.loginCard .topTab {
  background-color: #C09F5E;
  width: 100%;
  height: 8px;
}
.loginCard .logo {
  padding: 24px 0;
}
.loginCard .logo img {
  height: 60px;
  width: auto;
}
.loginCard .formWrapper {
  padding: 0 24px 16px;
}
.loginCard .formWrapper form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.loginCard .formWrapper form ::placeholder {
  color: #cecece;
}
.loginCard .formWrapper form input[type=text],
.loginCard .formWrapper form input[type=email],
.loginCard .formWrapper form input[type=password] {
  display: block;
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  padding: 14px 16px;
  background-color: #fff;
  border: 1px solid #cecece;
  border-radius: 6px;
}
.loginCard .formWrapper .caption1 {
  padding: 8px 0;
}
.loginCard .noAcc {
  background-color: #C5D0DC;
  padding: 16px 24px;
}

/* Main Nav */
.pageTop {
  background-color: #24878C;
  color: #fff;
  padding: 16px;
}
.pageTop .logo img {
  height: 30px;
  width: auto;
  filter: brightness(100);
}
.pageTop .mainNav {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 4px;
}
.pageTop .mainNav a.menuBtn {
  display: block;
  color: #fff;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
}
.pageTop .mainNav a.menuBtn i {
  margin-right: 8px;
}
.pageTop .mainNav a.menuBtn h6 {
  margin-bottom: 0;
  font-size: 16px;
}
.pageTop .mainNav a.active {
  background-color: #185A5E;
}
.pageTop .mobileNav .mobileNavBtn {
  background-color: #24878C;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #fff;
}

.mobileMenu {
  background-color: #24878C;
  color: #fff;
  padding: 0;
  height: 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.mobileMenu a.menuBtn {
  display: flex;
  align-items: center;
  color: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  text-decoration: none;
  gap: 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
.mobileMenu a.menuBtn i {
  font-size: 32px;
  margin-right: 8px;
}
.mobileMenu a.active {
  background-color: #185A5E;
}

.mobileMenu.active {
  height: calc(100vh - 60px);
  padding: 32px 24px;
}

.pageTopOver {
  display: block;
  position: absolute;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(1px);
  padding: 8px 0;
  z-index: 999;
}
.pageTopOver .bread {
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 14px;
}
.pageTopOver .bread a {
  text-decoration: none;
}
.pageTopOver .bread i {
  font-weight: 24px;
  margin-right: 8px;
}

.memBadge {
  width: fit-content;
  background-color: #fff;
  padding: 8px;
  border-radius: 8px;
  gap: 24px;
  margin: 0 0 0 auto;
}
.memBadge a {
  text-decoration: none;
  color: #555;
}
.memBadge button {
  color: #245073;
  vertical-align: center;
  line-height: 24px;
  border: none;
  background-color: #fff;
}
.memBadge button i {
  font-size: 16px;
}
.memBadge .tierSymbol {
  width: 32px;
  height: 32px;
  background-size: 32px 32px;
  margin-right: 8px;
}

.tierSymbol.explorer {
  background-image: url(../images/tier-symbol-explorer.png);
}

.tierSymbol.voyager {
  background-image: url(../images/tier-symbol-voyager.png);
}

.tierSymbol.wanderlust {
  background-image: url(../images/tier-symbol-wanderlust.png);
}

.tierSymbol.lg.explorer {
  background-image: url(../images/tier-symbol-lg-explorer.png);
}

.tierSymbol.lg.voyager {
  background-image: url(../images/tier-symbol-lg-voyager.png);
}

.tierSymbol.lg.wanderlust {
  background-image: url(../images/tier-symbol-lg-wanderlust.png);
}

/* Page Head */
.pageHead {
  position: relative;
  background-size: cover;
  background-position: center center;
  min-height: 400px;
  display: flex;
  align-items: center;
  padding: 80px 16px 16px 16px;
}
.pageHead .headText {
  width: 100%;
  max-width: 980px;
  margin: 16px auto;
  padding: 32px;
  color: #fff;
  background-color: rgba(21, 57, 73, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid #fff;
  border-radius: 8px;
}

.pageHead::before {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

/* Content */
.contentWrapper {
  background-color: #eaeaea;
  padding: 32px 0;
}
.contentWrapper ul {
  padding-left: 16px;
}

.fadeKvWrapper {
  position: relative;
  background-color: #EAEFF3;
  background-image: url(../images/kv-faded.jpg);
  background-size: cover;
  background-position: center top;
  padding: 80px 0 16px 0;
  overflow: hidden;
}

.fadeKvWrapper.scroll {
  height: calc(100% - 152px);
  overflow-y: scroll;
}

.resortHead {
  position: relative;
  background-color: #EAEFF3;
  background-image: url(../images/kv-faded.jpg);
  background-size: cover;
  background-position: center center;
  padding: 80px 0 16px 0;
  overflow: hidden;
}

.contentCard {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(1px);
  border-radius: 8px;
  padding: 24px 16px;
}

.articleWrapper {
  height: auto;
  max-height: 300px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: all 1s ease-in-out;
}

.articleWrapper.show {
  max-height: unset;
}

.extraWrapper {
  background-color: #24878C;
  color: #fff;
  padding: 48px 0 60px 0;
}
.extraWrapper .thumb {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center center;
  border: 1px solid #A0E4D5;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .extraWrapper {
    padding: 48px 0;
  }
  .extraWrapper .thumb {
    height: 240px;
  }
  .extraWrapper .detail {
    padding: 8px 0 16px 0;
  }
  .extraWrapper .cardBtn {
    padding-bottom: 32px;
  }
}
/* Benefit By Tier */
.benefitByTier {
  background-color: #fff;
  border: 1px solid #C09F5E;
  border-radius: 8px;
  overflow: hidden;
}
.benefitByTier .head {
  background-color: #C09F5E;
  color: #fff;
  padding: 8px 16px;
  text-transform: uppercase;
}
.benefitByTier .detail {
  padding: 16px;
}
.benefitByTier .detail hr {
  border: none;
  height: 1px;
  background-color: #D7C084;
  margin: 16px 0;
}
.benefitByTier .detail .tierSymbol {
  width: 32px;
  height: 32px;
  background-size: 32px 32px;
  flex-shrink: 0;
}
.benefitByTier .detail .explorer h5 {
  color: #24878C;
}
.benefitByTier .detail .voyager h5 {
  color: #5E6790;
}
.benefitByTier .detail .wanderlust h5 {
  color: #245073;
}
.benefitByTier .compare {
  background-color: #F8F4DE;
  border-top: 1px solid #EADDAF;
}
.benefitByTier .compare .d-flex {
  padding: 8px 16px 16px 16px;
}
.benefitByTier .compare .tierSymbol {
  width: 32px;
  height: 32px;
  background-size: 32px 32px;
  flex-shrink: 0;
}

/* Profile */
.profileCard {
  width: 100%;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #fff;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(1px);
  overflow: hidden;
}
.profileCard .top {
  display: flex;
  padding: 24px;
  gap: 16px;
  background-size: cover;
  background-position: center center;
}
.profileCard .top .avatar {
  overflow: hidden;
  width: 80px;
  height: 80px;
  border-radius: 100px;
  border: 3px solid #fff;
  background-color: #cecece;
  background-size: cover;
  background-position: center center;
  flex-shrink: 0;
}
.profileCard .top .name {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  width: 100%;
  align-items: center;
  gap: 16px;
}
.profileCard .top .name h4 {
  margin-bottom: 0;
}
.profileCard .top .name h6 {
  text-transform: uppercase;
}
.profileCard .top .name .tierSymbol {
  width: 48px;
  height: 48px;
  background-size: 48px 48px;
}
.profileCard .top.explorer {
  background-image: url(../images/tier-bg-explorer.jpg);
}
.profileCard .top.voyager {
  background-image: url(../images/tier-bg-voyager.jpg);
}
.profileCard .top.wanderlust {
  background-image: url(../images/tier-bg-wanderlust.jpg);
}
.profileCard .profile {
  padding: 16px 32px;
}
.profileCard .profile .info {
  font-size: 14px;
  color: #333;
  margin: 4px;
}
.profileCard .profile .info :first-child {
  width: 85px;
  flex-shrink: 0;
}

#profileCredit .total {
  padding: 8px;
  border-radius: 8px;
  background-color: #E5F8F2;
  color: #185A5E;
}
#profileCredit .total h3 {
  margin-bottom: 0;
}

#profileContract .info {
  margin: 4px;
}
#profileContract .info :first-child {
  width: 130px;
}

.contractCard {
  background-color: #fff;
  border: 1px solid #cecece;
  border-radius: 8px;
  padding: 0 8px;
}
.contractCard .head {
  padding: 4px;
  border: none;
  background-color: transparent;
}
.contractCard .head i {
  font-size: 18px;
}
.contractCard .detail {
  padding: 0;
  height: 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.contractCard .detail.active {
  padding: 4px;
  height: auto;
}

#profileAdvisor .advisorPic {
  width: 80px;
  height: 80px;
  margin: 8px auto;
  background-size: cover;
  background-position: center center;
  border-radius: 80px;
  border: 3px solid #fff;
}
#profileAdvisor .info {
  margin: 4px;
}
#profileAdvisor .info :first-child {
  width: 85px;
}

.usedWeek {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #fff;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 16px;
}
.usedWeek .column {
  width: 120px;
}
.usedWeek .badge {
  background-color: #E5F8F2;
  color: #185A5E;
}

#modalEditPass form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
#modalEditPass form .modal-body ::placeholder {
  color: #cecece;
}
#modalEditPass form .modal-body input[type=text],
#modalEditPass form .modal-body input[type=email],
#modalEditPass form .modal-body input[type=password] {
  display: block;
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  padding: 0.375rem 0.75rem;
  background-color: #fff;
  border: 1px solid #cecece;
  border-radius: 6px;
}
#modalEditPass form .modal-body label {
  display: block;
  margin-bottom: 0.5rem;
}
#modalEditPass form .modal-body input {
  display: block;
}
#modalEditPass form .modal-body .helptext {
  font-size: 12px;
  line-height: 14px;
}
#modalEditPass form ul li {
  font-size: 12px;
  line-height: 14px;
}

/* Privilege Page */
.privilegeLanding {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 84px);
  padding: 32px 16px;
  background-image: url(../images/kv.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  overflow: hidden;
}
.privilegeLanding .logo img {
  height: 100px;
  width: auto;
  filter: brightness(100);
}
.privilegeLanding ::before {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.05);
}

.privilegeIntro {
  background-color: #24878C;
  padding: 80px 0;
}

.privilegeTier {
  padding: 100px 0;
  background-color: #EAEFF3;
}
.privilegeTier .tierCard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.privilegeTier .tierCard .tierBG {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  background-size: cover;
  background-position: center center;
}
.privilegeTier .tierCard .tierSymbol img {
  width: 200px;
  height: 200px;
}
.privilegeTier .tierCard h4 {
  max-width: 200px;
  margin: 0 auto 16px auto;
  border-radius: 4px;
  color: #fff;
}
.privilegeTier .tierCard h4.explorer {
  background-color: #24878C;
}
.privilegeTier .tierCard h4.voyager {
  background-color: #5E6790;
}
.privilegeTier .tierCard h4.wanderlust {
  background-color: #245073;
}
.privilegeTier .tierCard .detail {
  padding: 32px 32px;
  background-color: #fff;
}

/* Benefits Page */
.tableBenefits {
  overflow: hidden;
}
.tableBenefits thead th {
  padding: 24px;
}
.tableBenefits tbody th, .tableBenefits tbody td {
  padding: 16px 24px;
  vertical-align: middle;
}
.tableBenefits tbody td {
  text-align: center;
}
.tableBenefits .top {
  text-align: center;
  padding: 24px 0;
}
.tableBenefits .top h4 {
  max-width: 200px;
  margin: 16px auto;
  border-radius: 4px;
}
.tableBenefits .top .tierBG {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-size: cover;
  background-position: center center;
  padding: 40px;
}
.tableBenefits .top .tierBG .tierSymbol {
  width: 120px;
  height: 120px;
  background-size: 120px 120px;
}
.tableBenefits .top .tierBG.explorer {
  background-image: url(../images/tier-bg-explorer.jpg);
}
.tableBenefits .top .tierBG.voyager {
  background-image: url(../images/tier-bg-voyager.jpg);
}
.tableBenefits .top .tierBG.wanderlust {
  background-image: url(../images/tier-bg-wanderlust.jpg);
}

/* Resorts Listing Page */
.listingWrapper {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24px;
  gap: 16px;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.listingWrapper .destCard,
.listingWrapper .homeCard,
.listingWrapper .partnerCard,
.listingWrapper .exchangeCard {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #fff;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  overflow: hidden;
}
.listingWrapper .destCard .thumb,
.listingWrapper .homeCard .thumb,
.listingWrapper .partnerCard .thumb,
.listingWrapper .exchangeCard .thumb {
  display: flex;
  align-items: end;
  justify-content: end;
  padding: 8px;
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center center;
  flex-shrink: 0;
}
.listingWrapper .destCard .detail,
.listingWrapper .homeCard .detail,
.listingWrapper .partnerCard .detail,
.listingWrapper .exchangeCard .detail {
  height: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
.listingWrapper .destCard .detail .name,
.listingWrapper .homeCard .detail .name,
.listingWrapper .partnerCard .detail .name,
.listingWrapper .exchangeCard .detail .name {
  padding: 4px 8px 0 8px;
}
.listingWrapper .destCard .detail .location,
.listingWrapper .homeCard .detail .location,
.listingWrapper .partnerCard .detail .location,
.listingWrapper .exchangeCard .detail .location {
  padding: 4px 8px 4px 24px;
  background-image: url(../images/map-pin-line.png);
  background-position: 4px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
.listingWrapper .destCard .cardBtn,
.listingWrapper .homeCard .cardBtn,
.listingWrapper .partnerCard .cardBtn,
.listingWrapper .exchangeCard .cardBtn {
  padding: 8px;
}
.listingWrapper .partnerCard .detail .unitWrap .unit,
.listingWrapper .exchangeCard .detail .unitWrap .unit {
  padding: 4px 8px;
}
.listingWrapper .partnerCard .detail .unitWrap .unit .type,
.listingWrapper .exchangeCard .detail .unitWrap .unit .type {
  background-color: #E5F8F2;
  color: #185A5E;
  background-image: url(../images/hotel-bed-line.png);
}
.listingWrapper .partnerCard .detail .unitWrap .unit .maxpax,
.listingWrapper .exchangeCard .detail .unitWrap .unit .maxpax {
  background-color: #EAEFF3;
  color: #3F4561;
  background-image: url(../images/group-line.png);
}
.listingWrapper .partnerCard .detail .unitWrap .unit .type,
.listingWrapper .partnerCard .detail .unitWrap .unit .maxpax,
.listingWrapper .exchangeCard .detail .unitWrap .unit .type,
.listingWrapper .exchangeCard .detail .unitWrap .unit .maxpax {
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 4px center;
  padding-left: 24px;
}
.listingWrapper .partnerCard .detail .info,
.listingWrapper .exchangeCard .detail .info {
  padding: 4px 8px;
}
.listingWrapper .partnerCard .detail .info :first-child,
.listingWrapper .exchangeCard .detail .info :first-child {
  width: 100px;
}
.listingWrapper .destCard:hover,
.listingWrapper .homeCard:hover,
.listingWrapper .partnerCard:hover,
.listingWrapper .exchangeCard:hover {
  background-color: #fff;
}
.listingWrapper .destCard .detail {
  padding: 24px 24px 16px 24px;
}
.listingWrapper .destCard .cardBtn {
  padding: 16px 24px 24px 24px;
}

.devider h5 {
  color: #999;
}
.devider .line {
  width: 20%;
  height: 1px;
  background-color: #cecece;
}

/* Resort Detail */
.resortHead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.resortHead .resortSlider {
  position: relative;
}
.resortHead .resortSlider .swiper-slide {
  height: auto;
}
.resortHead .resortSlider img {
  max-height: 400px;
  border-radius: 8px;
}
.resortHead .resortSlider .slideNav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  z-index: 99;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -20px;
  padding: 0 8px;
}
.resortHead .resortSlider .slideNav .button-prev,
.resortHead .resortSlider .slideNav .button-next {
  font-size: 24px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 100px;
}
.resortHead .resortSlider .slideNav .button-prev:hover,
.resortHead .resortSlider .slideNav .button-next:hover {
  background-color: #fff;
}
.resortHead .location,
.resortHead .airport {
  padding: 4px 8px 4px 32px;
  background-position: 4px center;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  color: #555;
}
.resortHead .location {
  background-image: url(../images/map-pin-line.png);
}
.resortHead .airport {
  background-image: url(../images/plane-line.png);
}
.resortHead .unitPill {
  background-color: #E5F8F2;
  color: #185A5E;
  padding: 8px 16px;
  border-radius: 40px;
}
.resortHead .unitPill i {
  font-size: 18px;
}
.resortHead .facilities {
  color: #185A5E;
  padding: 8px;
}
.resortHead .facilities i {
  font-size: 24px;
}

.weektoSelect {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.weektoSelect .weekItem {
  padding: 8px;
  border: 1px solid #fff;
  border-radius: 8px;
}
.weektoSelect .weekItem .unit .type {
  background-color: #E5F8F2;
  color: #185A5E;
  background-image: url(../images/hotel-bed-line.png);
}
.weektoSelect .weekItem .unit .maxpax {
  background-color: #EAEFF3;
  color: #3F4561;
  background-image: url(../images/group-line.png);
}
.weektoSelect .weekItem .unit .type,
.weektoSelect .weekItem .unit .maxpax {
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 4px center;
  padding-left: 24px;
}

.weekSelected {
  margin: 8px 0;
  background-color: #fff;
  border-radius: 8px;
  padding: 8px;
}
.weekSelected .info {
  margin: 4px 0;
}
.weekSelected .info :first-child {
  width: 130px;
}

/* charge table */
.chargeTable .chargeRow {
  padding: 8px 0;
  border-bottom: 1px solid #cecece;
}

/* Travel Planner */
.plannerWrapper .yearComp {
  padding: 8px 0;
}
.plannerWrapper .yearComp .line {
  width: 100%;
  height: 1px;
  background-color: #cecece;
}
.plannerWrapper .weeksWrapper {
  flex-wrap: wrap;
}
.plannerWrapper .weeksWrapper .weekCard {
  width: calc(50% - 0.5rem);
  min-width: 280px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border: 1px solid #fff;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease-in-out;
  padding: 0;
  overflow: hidden;
}
.plannerWrapper .weeksWrapper .weekCard .selectTab {
  padding: 8px;
}
.plannerWrapper .weeksWrapper .weekCard .detail {
  padding: 8px;
}
.plannerWrapper .weeksWrapper .weekCard .detail .info {
  margin: 4px 0;
}
.plannerWrapper .weeksWrapper .weekCard .detail .info :first-child {
  width: 130px;
}
.plannerWrapper .weeksWrapper .weekCard.active {
  background-color: #fff;
}
.plannerWrapper .weeksWrapper .weekCard.active .selectTab {
  background-color: #A1AEC4;
}
.plannerWrapper .weeksWrapper .weekCard.disabled {
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
  border-color: #cecece;
  color: #999;
}

.actionCard {
  padding: 16px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.8);
}
.actionCard h6 {
  color: #24878C;
}

@media (max-width: 768px) {
  .plannerWrapper .weeksWrapper .weekCard {
    width: 100%;
  }
}

/*# sourceMappingURL=style.css.map */