@import url("open-house-desktop.css?update1");
@import url("open-house-tablet.css?update2");
@import url("open-house-mobile.css?update3");

.section-open-house-banner,
.section-list-open-house,
.section-schedule-open-house-banner,
.section-schedule-content,
.section-open-house-primary {
  height: max-content;
}
.container-content-banner,
.container-content-banner.schedule-open-house {
  position: relative;
  display: block;
  width: 100%;
}
.container-content-banner.search-open-house {
  border-radius: 20px;
  box-shadow: -1px 8px 11px -2px rgba(158,158,158,.75);
  -webkit-box-shadow: -1px 8px 11px -2px rgba(158,158,158,.75);
  -moz-box-shadow: -1px 8px 11px -2px rgba(158,158,158,.75);
}
.img-banner-open-house,
.img-banner-schedule {
  opacity: 1;
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  backface-visibility: hidden;
}
.img-banner-open-house {
  max-height: 20rem;
}
.img-banner-schedule {
  height: 15rem;
}
.banner-content-title,
.title-banner {
  color: #fff;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.banner-content-title {
  border-radius: 20px;
  background-color: rgba(0, 0, 0, .5);
  height: 100%;
  width: inherit;
}
.title-banner {
  font-size: 2rem;
  font-weight: 700;
}
.form-search-open-house,
.btn-search-open-house {
  border-radius: 15px;
}
.btn-search-open-house {
  background-color: #3cc0fe;
  font-weight: 700;
}
.btn-search-open-house,
.fa-search {
  color: #fff;
}
.wrapper-card-lokasi-open-house,
.wrapper-card-lokasi-open-house:hover {
  text-decoration: none;
  color: #000;
}
.card-lokasi-open-house {
  border: none;
  box-shadow: 0 4px 11px -2px rgba(189, 189, 189, .75);
  -webkit-box-shadow: 0 4px 11px -2px rgba(189, 189, 189, .75);
  -moz-box-shadow: 0 4px 11px -2px rgba(189, 189, 189, .75);
  cursor: pointer;
}
.card-lokasi-open-house:hover {
  background-color: #fdd314;
  box-shadow: 0 4px 16px -2px rgba(80, 80, 80, .75);
  -webkit-box-shadow: 0 4px 16px -2px rgba(80, 80, 80, .75);
  -moz-box-shadow: 0 4px 16px -2px rgba(80, 80, 80, .75);
}
.card-lokasi-open-house,
.card-body-lokasi-open-house {
  border-radius: 12px;
}
.lokasi-open-house-title {
  font-weight: 700;
  text-align: center;
}
.wrapper-schedule {
  display: grid;
}
.wrapper-schedule > .row {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.wrapper-schedule > .row > .col-content-schedule {
  display: inline-block;
}
.col-content-schedule {
  border-radius: 12px;
  box-shadow: 0 2px 8px 0px rgba(194,194,194,1);
  -webkit-box-shadow: 0 2px 8px 0px rgba(194,194,194,1);
  -moz-box-shadow: 0 2px 8px 0px rgba(194,194,194,1);
  border: transparent 2px solid;
  cursor: pointer;
}
.col-content-schedule:hover,
.col-content-schedule.active {
  border: #fdd314 2px solid;
}
.card-open-house {
  -webkit-box-shadow:inset 0px 0px 0px 4px #fdd314, 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19) !important;
  -moz-box-shadow:inset 0px 0px 0px 4px #fdd314, 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19) !important;
  box-shadow:inset 0px 0px 0px 4px #fdd314, 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19) !important;
}
.card-body-open-house {
  padding: .5rem .75rem;
}
.card-body-open-house-non-label {
  padding: .5rem;
}
.card-open-house,
.card-open-house-non-label {
  border-radius: 20px;
  width: 100%;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19);
  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19);
  border: 0;
}
.card-footer-hubungi,
.card-footer-hubungi-non-label {
  padding: .5rem .5rem .75rem .5rem;
  /* border-top: #afafaf 1px solid; */
  height: 3.7rem;
  max-height: 3.7rem;
}
.card-footer-hubungi {
  margin: 0 .25rem;
}
.card-footer-hubungi-non-label {
  margin: 0;
}
.btn-hubungi-open-house {
  background-color: #fdd314;
  width: 100%;
  border-radius: 20px;
}
/* Loading */
.card-loading-lokasi-open-house {
  border: none;
  box-shadow: 0 4px 11px -2px rgba(189, 189, 189, .75);
  -webkit-box-shadow: 0 4px 11px -2px rgba(189, 189, 189, .75);
  -moz-box-shadow: 0 4px 11px -2px rgba(189, 189, 189, .75);
  border-radius: 12px;
  background: 
    linear-gradient(.25turn, transparent, rgb(241, 241, 241), transparent),
    linear-gradient(#bababa, #bababa);  
  background-repeat: no-repeat;
  background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
  background-size: 100% 250px, 100% 13rem, 100px 100px, 225px 30px; 
  animation: loading 1.5s infinite;
  border-radius: 20px;
}
@keyframes loading {  
  to {
    background-position: 315px 0, 0 0, 0 190px, 50px 195px;
  }
}
/* Loading Card Properti Open House */
.card-properti-secondary-loading {
  border-radius: 20px;
  width: 100%;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19);
  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19);
  border: 0;
}
.card-img-top-properti-secondary-loading {
  position: relative;
  border-radius: 19px 19px 0 0;
  width: inherit;
  background-color: #c9c9c9;
  height: 15rem;
  max-height: 15rem;
  padding: 0;
}
.text-card-loading {
  width: 100%;
  max-height: 1.25rem;
  border-radius: 12px;
}
.text-card-loading,
.card-img-top-properti-secondary-loading {
  background: 
    linear-gradient(.25turn, transparent, #fff, transparent),
    linear-gradient(#c9c9c9, #c9c9c9);  
  background-repeat: no-repeat;
  background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
  animation: loading 1.5s infinite;
}
.text-card-loading,
.card-img-top-properti-secondary-loading {
  background-size: 100% 250px, 100% 15rem, 100px 100px, 225px 30px; 
}
/* Modal Agen */
.fade-me.active {
  opacity: .7;
  filter: alpha(opacity=20);
  background-color:#000; 
  width:100%; 
  height:100%; 
  z-index:9999;
  top:0; 
  left:0; 
  position:fixed;
}
.img-agen-detail-loading {
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  max-width: 4rem;
  max-height: 4rem;
}
.agen-nama-loading,
.agen-kantor-loading,
.img-agen-detail-loading {
  background: 
    linear-gradient(.25turn, transparent, #fff, transparent),
    linear-gradient(#c9c9c9, #c9c9c9),
    radial-gradient(38px circle at 19px 19px, #c9c9c9 50%, transparent 51%),
    linear-gradient(#c9c9c9, #c9c9c9);  
  background-repeat: no-repeat;
  background-size: 100% 250px, 100% 180px, 100px 100px, 225px 30px; 
  background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
  animation: loading 1.5s infinite;
}
.agen-nama-loading,
.agen-kantor-loading {
  width: 100%;
  height: 80%;
  border-radius: 12px;
}
.row-agen-detail {
  border-bottom: 1px #b6b6b6 solid;
}
.slide-enter-active, .slide-leave-active {
  transition: transform .5s;
  transform: translate3d(0, 0, 0);
}
.slide-enter, .slide-leave-active {
  transform: translate3d(0, 100%, 0);
  visibility: visible;
}
.contact-agen {
  height: max-content;
  width: 100%;
  background-color: whitesmoke;
  z-index: 10000;
  border-radius: 20px 20px 0 0;
  position: fixed;
  bottom: 0;
}
.btn-close-modal-slide-modal {
  background-color: rgb(133, 133, 133);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
  font-size: .875rem;
  position: absolute;
  right: 1rem;
  top: -1rem;
  border: none;
  outline: 0;
}
.btn-close-modal-slide-modal:focus,
.btn-close-modal-slide-modal:hover {
  color: #fff;
  border: #fff 1px solid;
  outline: 0;
}
.img-agen-with-badge {
  position: relative;
}
.badge-online {
  position: absolute;
  background-color: #55B261;
  padding: 8px;
  border-radius: 50%;
}
.img-agen-detail {
  border-radius: 50%;
  object-fit: cover;
}
.agen-nama {
  font-weight: 700;
  color: #000;
}
.agen-kantor {
  color: #6e6f73;
}
.btn-hubungi-agen-detail,
.btn-whatsapp-agen-detail {
  background-color: #fdd314;
  width: 100%;
  border-radius: 10px;
  font-weight: 700;
}
.text-contact-agent-det {
  font-size: .875em;
}
/* Schedule */
.btn-reset {
  border: #000 1px solid;
  border-radius: 10px;
  height: 2.375rem;
  max-height: 2.375rem;
}
/* Countdown */
.section-countdown {
  background-color: #fdd314;
}
.wrapper-countdown-time {
  display: grid;
}
.content-time {
  background-color: #fff;
  border-radius: .5rem;
}
.title-countdown,
.time-countdown {
  font-weight: 700;
  color: #000;
}
.title-countdown {
 font-size: 1.5em;
}
.time-countdown {
  font-size: 2em;
  line-height: 1.75;
}
.time-desc-countdown {
  font-weight: 500;
  color: #000;
}
/* Product Primary */
.title-primary {
  font-weight: 700;
  font-size: 1.5em;
}
.card-proyek-baru-loading,
.card-proyek-baru-openhouse {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19);
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19);
  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2), 0 0 10px 0 rgba(0, 0, 0, .19);
  border: 0;
}
.card-proyek-baru-openhouse {
  height: 25.6rem;
  justify-content: space-between;
  /* background-color: #fdd314; */
}
.card-proyek-baru-loading {
  height: max-content;
}
.card-img-top-proyek-baru-loading {
  height: 13rem;
  max-height: 13rem; 
  position: relative;
  border-radius: 19px 19px 0 0 ;
  width: inherit;
  background-color: #c9c9c9;
}
.text-card-loading {
  width: 100%;
  max-height: 1.25rem;
  border-radius: 12px;
}
.text-card-loading,
.card-img-top-proyek-baru-loading {  
  background: 
    linear-gradient(.25turn, transparent, #fff, transparent),
    linear-gradient(#c9c9c9, #c9c9c9);  
  background-repeat: no-repeat;
  background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
  animation: loading 1.5s infinite;
}
.text-card-loading,
.card-img-top-proyek-baru-loading {
  background-size: 100% 250px, 100% 13rem, 100px 100px, 225px 30px; 
}
@keyframes loading {  
  to {
    background-position: 315px 0, 0 0, 0 190px, 50px 195px;
  }
}
.card-body-proyek-baru {
  /* background-color: #fdd314; */
  padding: .5rem .625rem .625rem .625rem;
  border-radius: 0 0 19px 19px;
}
.card-img-top-proyek-baru {
  position: relative;
  border-radius: 19px 19px 0 0;
  width: inherit;
  object-fit: cover;
  overflow: hidden;
  height: 13rem;
  max-height: 13rem;
  width: 100%;
  display: block;
}
.jenis-proyek-baru,
.lokasi-proyek-baru {
  color: #5b5c5f;
  font-weight: 600
}
.harga-proyek-baru,
.nama-proyek-baru {
  color: #000;
  font-weight: 700
}
.desc-proyek-baru,
.lokasi-proyek-baru,
.nama-proyek-baru,
.harga-proyek-baru {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desc-proyek-baru,
.lokasi-proyek-baru {
  -webkit-line-clamp: 2;
}
.desc-proyek-baru {
  color: #313450;
  font-weight: 600;
}
.desc-proyek-baru,
.jenis-proyek-baru,
.lokasi-proyek-baru {
  font-size: .875em;
}
.nama-proyek-baru,
.harga-proyek-baru {
  -webkit-line-clamp: 1;
}
.nama-proyek-baru {
  font-size: 1em;
}
.harga-proyek-baru {
  font-size: 1.25em;
}
.img-logo-white-circle {
  width: 100%;
  max-width:5.8rem
}
/* Swiper JS */
.wrapper-slide-primary {
  position: relative;
}
.nav-prev-primary,
.nav-next-primary {
  position: absolute;
  z-index: 10;
  background-color: #cecece;
  width: 2.375rem;
  height: 2.375rem;
  top: 50%;
  border-radius: 50%;
  box-shadow: 0 4px 12px -2px rgba(158,158,158,.75);
  -webkit-box-shadow: 0 4px 12px -2px rgba(158,158,158,.75);
  -moz-box-shadow: 0 4px 12px -2px rgba(158,158,158,.75);
}
.nav-prev-primary {
  left: 0;
}
.nav-next-primary {
  right: 0;
}
.ic-prev {
  padding-right: 2px;
}
.ic-next {
  padding-left: 2px;
}

.line-height-125 {
  line-height: 1.25;
}

.image-slider {
  width: 100%;
  overflow-x: auto; /* Mengatur overflow-x menjadi auto */
  -ms-overflow-style: none; /* Untuk IE dan Edge */
  scrollbar-width: none; /* Untuk Firefox */
}
.image-slider::-webkit-scrollbar {
  display: none; /* Menghilangkan tampilan scrollbar di Chrome, Safari, dan Opera */
}

.image-slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* justify-content: flex-start; */
  gap: 18px;
  padding: 10px;
  min-width: fit-content; /* Menambahkan min-width */
}

.slider-image {
  width: 115.167px;;
  height: 80.058px;
  object-fit: contain;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0px 0px 8.005776405334473px 0px rgba(0, 0, 0, 0.20);
}

.slider-image:first-child {
  flex-basis: auto; /* Mengatur flex-basis menjadi auto pada item paling kiri */
}


.card-header-title {
  background-color: #fff;
  border-bottom: #e4e4e4 1px solid;
  margin-left: 1rem;
  margin-right: 1rem;
}

.card-kantor {
  border-radius: 15px;
  box-shadow: 0 6px 12px 0px rgba(194,194,194,1);
  -webkit-box-shadow: 0 6px 12px 0px rgba(194,194,194,1);
  -moz-box-shadow: 0 6px 12px 0px rgba(194,194,194,1);
}
.card-kantor {
  border: none;
}

.btn-kantor-loading:hover {
  cursor: wait !important;
  text-decoration: none;
}
.btn-kantor,
.btn-kantor-loading {
  font-weight: 700;
  color: #5b5b5b;
}
.btn-kantor:focus,
.btn-kantor-loading:focus {
  outline: 0;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.btn-kantor:hover,
.btn-kantor:active {
  text-decoration: none;
  color: #000;
}
.btn-kantor img {
  vertical-align: middle;
  padding-bottom: .125rem;
  padding-right: .5rem;
  display: inline-flex;
}
.btn-kantor::after {
  content: "\f107";
  color: #333;
  float: right;
  margin-left: .5rem;
  font-family: "FontAwesome";
  font-size: 1.25rem;
}
.btn-kantor[aria-expanded="true"]::after {
  content: "\f106";
}

.list-kantor {
  cursor: pointer;
}

.nama-kantor {
  font-weight: 700;
  color: #000;
  font-size: 1.1rem;
}

.alamat-kantor {
  color: #007BFF;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


.wrapper-btn-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding-top: 10px;
}
.btn-contact {
  background-color: #fdd314;
  border-radius: 1.25rem;
  width: 100%;
  font-size: .875em;
}
.btn-contact:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0);
}
.btn-contact.button-call-phone-goh, .btn-contact.button-call-phone {
  background-color: #ffffff;
  color: #000;
  border: 1px solid #000000;
}
.btn-contact.button-call-whatsapp-goh, .btn-contact.button-call-whatsapp {
  background-color: #50bf31;
  color: #ffffff;
  border: 1px solid transparent;
}
.horizontal-separator {
  border-bottom: 1px solid #aeaeae;
}

.container-absolute-logo{
  background:white; 
  width: 73.538px;
  height: 62.998px; 
  border-radius: 0px 0px 7.411px 7.411px; 
  z-index: 98; 
  position: absolute; 
  top: 0px; 
  right: 10px;
}

.logo-absolute{
  width: 73.538px;
  height: 62.998px;
  border-radius: 0px 0px 7.411px 7.411px;
  z-index: 99;
  position: absolute;
  top: 0px;
  right: 10px;
}

.container-facility {
  flex-wrap: wrap;
  justify-content: space-between;
}
.facility-text {
  color: #000;
  font-size: .875em;
  line-height: 1;
}
.text-bold {
  font-weight: 700;
}
.text-regular {
  font-weight: 400;
}

.city-location-label {
  color: grey;
  font-family: Montserrat;
  font-size: .875em;
  text-transform: uppercase;
}


/* Carousel Secondary Premier */
.carousel-secondary-premier {
  margin: 0 !important;
}
.inner-secondary-premier {
  border-radius: 19px 19px 0 0 !important;
}
.carousel-secondary-premier,
.carousel-inner--secondary-premier,
.carousel-item--secondary-premier,
.carousel-item--secondary-premier.active {
  border-radius: 19px 19px 0 0;
  height: 15rem;
  max-height: 15rem;
}
.carousel-indicators--secondary-premier {
  cursor: default;
}
.carousel-indicators--secondary-premier li,
.carousel-indicators--secondary-premier li.active {
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}
.carousel-indicators--secondary-premier li {
  width: .5rem !important;
  height: .5rem !important;
  margin-top: 1px !important;
}
.carousel-indicators--secondary-premier li.active {
  width: .65rem !important;
  height: .65rem !important;
  margin-top: 0 !important;
}
.btn-prev-carousel,
.btn-next-carousel {
  display: none;
  opacity: .7;
  position: absolute;
  z-index: 10;
  background-color: #fff;
  border-radius: 50%;
  padding: 0;
  width: 2rem;
  height: 2rem;
  max-width: 2rem;
  max-height: 2rem;
  color: #000;
  font-size: .875em;
  top: 50%;
}
.btn-prev-carousel {
  left: 1rem;
  padding-right: 2px;
}
.btn-next-carousel {
  right: 1rem;
  padding-left: 2px;
}
.btn-prev-carousel:hover,
.btn-next-carousel:hover {
  opacity: 1;
}
.carousel-secondary-premier:hover .btn-prev-carousel,
.carousel-secondary-premier:hover .btn-next-carousel {
  display: block;
}
.area-next-carousel,
.area-prev-carousel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 3rem;
  background-color: transparent;
  cursor: default;
}
.area-next-carousel {
  right: 0;
}
.area-prev-carousel {
  left: 0;
}

.prev-btn, .next-btn {
  all: unset;
  cursor: pointer !important;
  position: absolute;
  top: 30%;
  width: auto;
  font-size: 18px;
  padding: 7px;
  background: white;
  box-shadow: 0px 0px 8.005776405334473px 0px rgba(0, 0, 0, 0.20) !important;
  border-radius: 15px !important;
}

.next-btn {
  right: 5px;
}

.prev-btn {
  left: 5px;
}

.reposisi-btn-logo{
  top: 78px;
}

/* On hover, add a black background color with a little bit see-through */
.prev-btn:hover, .next-btn:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

.float-contact {
  position: fixed;
  z-index: 999;
  padding: 0;
  bottom: 1rem;
  right: 1rem;
}

.float-contact-tiktok {
  width: 4.5rem;
  max-width: 4.5rem;
}