* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #f0f0f0;
}

#explore {
  overflow: hidden;
  position: relative;
}

.container-fluid.overlap-gap-section {
  padding-left: 0;
  padding-right: 0;
}

.image-sequence img {
  position: relative !important;
  z-index: 1 !important;
}

#exploreText {
  overflow: auto;
  padding-left: 15px !important;
}

#exploreImages {
  overflow: hidden;
}

#exploreImages,
#exploreText {
  transition: width 0.5s;
}

#toggleButton {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 12;
  width: fit-content;
}

.explore-images {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.explore-images .carousel-container {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.explore-images .image-sequence {
  display: flex;
  width: 100%;
  height: 100%;
}

.explore-images .image-sequence img {
  width: 100%;
  height: auto;
  user-select: none;
}

.explore-images .prev,
.explore-images .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: unset;
  font-size: 3rem;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  gap: 10px;
  z-index: 12;
}

.explore-images .prev {
  left: 6px;
}

.explore-images .next {
  right: 6px;
}

.animate-controls .ti-icon {
  font-size: 2rem;
}

.zoom-controls .ti-icon {
  font-size: 1.5rem;
}

.zoom-level-1 {
  transform: scale(1);
}

.zoom-level-2 {
  transform: scale(1.5);
}

.zoom-level-3 {
  transform: scale(2);
}

.dragging {
  cursor: grabbing;
}

.zoom-controls {
  background-color: rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 12;
}

.zoom-controls button {
  background-color: unset;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.zoom-controls #zoomInBtn {
  position: absolute;
  right: 11px;
  top: 10px;
}

.zoom-controls #zoomOutBtn {
  position: absolute;
  right: 11px;
  bottom: 10px;
}

.zoom-controls button:hover i:before {
  background-color: #ffffff;
}

.ti-icon:before {
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  padding: 5px;
  ;
}

.ti-icon:hover:before {
  background-color: #fff;
}

.explore-text {
  height: 100vh;
  overflow: auto;
  background-color: #ffffff;
  z-index: 10;
}

.navbar {
  z-index: 2;
  margin-bottom: 10px;
}

.navbar .logo {
  max-height: 60px;
}

.apartment-card {
  border-radius: 10px;
  background-color: #ffffff;
  padding: 5px;
  margin: 10px 20px;
  transition: transform 0.2s;
  border: 2px solid #ffbe98;
}

.apartment-card.clicked,
.apartment-card.active,
.apartment-card:hover,
.apartment-card:active,
.apartment-card.selected {
  border: 2px solid #000000;
  box-shadow: 4px 5px 5px 0px #adadad;
  transform: scale(1.01);
  z-index: 1;
}

.apartment-card.clicked .apartment-footer,
.apartment-card.active .apartment-footer,
.apartment-card:hover .apartment-footer,
.apartment-card:active .apartment-footer,
.apartment-card.selected .apartment-footer {
  color: #ffbe98;
  background-color: #000000;
}

.apartment-details-show {
  cursor: pointer;
}

.apartment-header {
  background-color: #ffe8da;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
}

.apartment-header h6 {
  text-align: center;
  width: -webkit-fill-available;
  margin: 0;
  font-weight: bold;
  font-size: 1.2rem;
  color: #000000;
}

.apartment-header i {
  font-size: 1.2rem;
  margin-left: 10px;
}

.apartment-footer {
  color: #000;
  background-color: #ffd6be;
  display: flex;
  justify-content: space-between;
  border-radius: 0 0 8px 8px;
  padding: 10px;
}

.apartment-footer strong {
  font-size: 14px;
}

.status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.status-available {
  background-color: #198754;
}

.status-sold {
  background-color: #ff0000;
}

.status-reserved {
  background-color: #795548;
}

.cards-option-right {
  height: 80%;
  align-content: end;
  top: 10px;
  right: 10px;
}

.cards-option-left {
  height: 80%;
  align-content: end;
  top: 10px;
  left: 10px;
}

.apartment-details {
  color: #000000;
  padding: 10px;
  display: none;
}

.apartment-details .details-text {
  display: flex;
  justify-content: space-between;
}

.apartment-details .details-text small {
  font-weight: 100;
  font-style: italic;
}

.apartment-details img {
  width: 100%;
  margin-top: 10px;
}

.apartment-details .action-buttons {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.apartment-details .action-buttons button {
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 5px;
  transition: .2s all;
}

.apartment-details .action-buttons button:hover {
  -webkit-box-shadow: 0 8px 30px 0 rgba(0, 0, 0, .15);
  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, .15);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}

.apartment-details .unit-highlights {
  margin: 20px 0;
}

.apartment-details .image img {
  border-radius: 5px;
  max-height: inherit;
  width: auto;
}

.unit-highlights .list {
  text-align: center;
  padding-left: 0;
}

.unit-highlights .list li {
  list-style: none;
  display: inline-block;
  padding: 2px 12px;
  margin-right: 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffbe98;
  background-color: #000;
  border: 1px solid #ff00004f;
  box-shadow: -4px 4px 0px 0px #6c757d;
}

.details-text {
  background-color: #ffbe9826;
  padding: 5px;
}

.details-text:nth-child(2) {
  border-bottom: 1px solid;
  border-top: 1px solid;

}

.apartment-details .inquire-now {
  background-color: #000;
  color: #ffbe98;
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: .2s background-color;
}

.apartment-details .inquire-now:hover {
  color: #000;
  background-color: #ffbe98;
  transition: .2s background-color;
}

.image-modal {
  cursor: pointer;
  max-height: 200px;
  text-align: center;
}

.carousel .carousel-control-prev,
.carousel .carousel-control-next {
  position: absolute;
  top: 50%;
}

.modal-header {
  background-color: rgba(0, 0, 0, 0.125);
  color: black;
}

#galleryModal .modal-body {
  padding: 0;
  min-height: 150px;
}

#galleryModal .modal-body p {
  height: 150px;
  line-height: 150px;
  color: #000;
}

.bi-heart {
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s;
}

.bi-heart:hover,
.bi-heart-fill:hover {
  color: red;
}

.bi-heart-fill {
  color: red;
}

.filter-icon,
.email-icon {
  cursor: pointer;
  transition: color 0.2s;
}

.bi-x-lg::before {
  content: "\f659";
  width: 35px;
  height: 35px;
  background: #ffbe98;
  line-height: 35px;
  border-radius: 50%;
}

.filter-icon:hover,
.email-icon:hover {
  color: #ffbe98;
}

#filter-div {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 25%;
  height: 100%;
  overflow: auto;
  top: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 20;
}

#filter-content {
  background-color: white;
  padding: 25px;
  text-align: center;
  min-height: 100%;
  overflow: auto;
}

.image-map-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100% !important;
  width: 100% !important;
  z-index: 10;
}

.image-map-layer>div,
.imp-canvas,
.imp-canvas-wrap,
.imp-ui-wrap,
.imp-container {
  height: 100% !important;
  width: 100% !important;
}

.hs-arrow.hs-arrow-right {
  border-left: unset !important;
}

.imp-tooltip {
  padding: 0 !important;
  background: #ffffff !important;
}

.imp-tooltip-content {
  padding: 5px !important;
}

.imp-tooltip-content>h3 {
  color: #000000 !important;
  text-align: center !important;
}

.imp-tooltip-content>div {
  padding: 2px 10px !important;
  background-color: #000000 !important;
}

.imp-tooltip-content>div:nth-last-child(1) {
  border-radius: 0 0 5px 5px !important;
}

.imp-objects,
.imp-object {
  z-index: 11 !important;
  pointer-events: auto;
}

/*Rect*/
.imp-object-rect.imp-object-highlighted:hover {
  background-color: rgb(0, 0, 0);
}

.imp-object-rect.clicked {
  background-color: rgb(255, 0, 0);
}

.imp-object-rect.clicked.imp-object-highlighted {
  background-color: rgb(0, 0, 255);
}

/*Polygon*/
.imp-object-poly.imp-object {
  fill: rgba(0, 0, 0, 0) !important;
}

.imp-object-poly.imp-object-highlighted polygon,
.imp-object-poly.imp-object-highlighted:hover polygon {
  fill: rgb(255 193 7 / 70%);
}

.imp-object-poly.imp-object.clicked polygon {
  fill: rgb(255 193 7 / 80%);
  stroke: #ffffff;
  stroke-width: .5px;
}

.imp-object-poly.clicked.imp-object-highlighted polygon {
  fill: rgb(255 193 7 / 90%);
  stroke: #ffffff;
  stroke-width: .5px;
}

/*preloader*/

.gray-crystal {
  filter: grayscale(100%);
  transition: filter 1s ease-in-out;
  width: 100%;
  height: auto;
  position: relative;
}

.video-preloader,
.image-preloader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.image-preloader img,
.video-preloader video {
  width: auto;
  height: 100vh;
  /* object-fit: cover; */
}

.image-preloader.hidden,
.video-preloader.hidden {
  opacity: 0;
  transition: all 1s ease-in-out;
}

.loading-text {
  position: absolute;
  color: white;
  font-size: 24px;
  text-align: center;
  z-index: 1;
}

/* Animation for the three dots */
.dots::after {
  content: '';
  display: inline-block;
  width: 1em;
  text-align: left;
  animation: dot-blink 1.5s infinite steps(1, start);
}

@keyframes dot-blink {
  0% {
    content: '';
  }

  33% {
    content: '.';
  }

  66% {
    content: '..';
  }

  100% {
    content: '...';
  }
}

/* Add animation when content is ready */
.color-transition {
  filter: grayscale(0%);
}

/* CSS for loading message transition */
.loading-message {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* Class to show the loading message with fade-in effect */
.loading-message.show {
  opacity: 1;
}

@media (min-width: 991.98px) {
  #exploreImages {
    height: 100vh;
  }

  .carousel-container {
    height: 100%;
    width: 100%;
  }
}

@media (max-width: 991.98px) {

  .image-preloader img,
  .video-preloader video {
    height: 60vh;
    width: 100%;
  }

  .explore-images {
    height: 60vh;
    width: 100vw;
    margin: 0 auto;
  }

  .explore-images .carousel-container {
    width: 100%;
    height: 100%;
  }

  .imp-tooltips-container.is-fullscreen {
    background: transparent !important;
    display: none !important;
    opacity: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .apartment-cards {
    margin-top: 10px;
  }

  .explore-text {
    height: 40vh;
    overflow-y: auto;
  }

  .apartment-header,
  .apartment-footer {
    padding: 4px;
  }

  .explore-text .position-fixed {
    position: relative;
  }

  #filter-div {
    width: 100%;
  }
}

@media only screen and (max-width: 1181px) and (min-width: 991.98px) {

  .action-buttons span {
    display: none;
  }
}

@media (max-width: 1399px) {

  .unit-highlights .list {
    padding: 0;
  }

  /*Tooltip*/
  .unit-highlights .list li {
    list-style: none;
    display: ruby-text;
    width: 100%;
    text-align: center;
    border: 1px solid #6c757d;
    margin: 5px;
    font-size: 0.8em;
  }
}