.pageBg {
  z-index: 1;
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0) 30%
    ),
    none !important;
}

.col3 ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  padding: 2rem;
  background-color: var(--colorBrandPrimary70);
  color: #e8e6e1;
  margin: 0;
  text-align: left;
  flex: 1;
}
#hotspots img {
  border-radius: 50%;
  /* transition: all 0.3s; */
  border: none !important;
  outline: 2px solid rgba(255, 255, 255, 0.5);
  transition: all 0.2s;
}

#hotspots img:hover {
  outline: 2px solid rgba(255, 255, 255, 1);
  scale: 1.1;
}

/*------General CSS-----------------------*/

h1 {
  display: inline-block;
  margin: 0;
  line-height: 1.2em !important;
}

.leftSide hr {
  max-width: 270px;
  margin: 1.5rem 0;
  background-color: #3d3843;
}

.rightSide {
  padding: 0 5% 0 2%;
}

.leftSide {
  overflow: hidden;
}

.col3 > div {
  width: 45%;
  display: flex;
  text-align: center;
  padding: 5px;
  min-width: 210px;
}

.col3 > div > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--colorBrandSecondary90);
  max-width: 50%;
  padding: 1rem;
}

.col3 {
  align-content: center;
  gap: 1.5rem;
}

h3,
.h3 {
  font-size: 1.2vw;
  line-height: 1.3;
  color: var(--colorWhite);
  white-space: nowrap;
  word-break: keep-all;
  text-align: center;
  font-family: Poppins-Thin;
  text-shadow: 0 0 15px #000;
  margin: 0;
}

ul > li:last-child {
  margin: 0;
}
li {
  color: #e8e6e1;
}

.contentIcon {
  height: min(32px, 22vh);
}

.rightSide {
  padding: 0;
}

.buttonPrimaryWithText {
  display: inline-block !important;
  text-transform: capitalize;
  border: none;
  font-size: 0.9rem;
  padding: 1.2vh 1.5vh;
  background-color: #ebe9dbe6;
  color: #131b13;
  transition: all 0.3s;
}
.material-icons {
  color: var(--colorBrandSteel) !important;
}

.leftSide ul {
  margin-bottom: 1.5rem !important;
}

#property-list {
  max-height: 0;
  /* overflow: hidden; */
  margin: 0 0 0rem 1.5rem !important;
  opacity: 0;
  display: block;
  transition: max-height 0.7s ease, opacity 0.7s ease;
  padding: 0rem 0 !important;
}

#property-list.actived {
  max-height: 550px;
  opacity: 1;
  margin-bottom: 1rem !important;
}

/*-----------------Responsive--------------------*/

@media only screen and (min-width: 720px) and (orientation: landscape) and (min-height: 500px) {
  .col3 {
    gap: 1rem;
  }

  .col3 > div {
    min-width: 380px;
    flex: 0.7;
  }

  .rightSide {
    padding: 0 5% 0 2%;
  }
  .leftSide hr {
    margin: 1.5rem 0 !important;
  }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {
  .col3 {
    gap: 1rem;
  }

  .col3 > div {
    min-width: 380px;
    flex: 0.7;
    max-width: 500px;
  }

  h3,
  .h3 {
    font-size: 1vw;
  }

  .rightSide {
    padding: 0 5% 0 2%;
  }
  .leftSide hr {
    margin: 1.5rem 0 !important;
  }
}

@media only screen and (min-width: 1200px) and (orientation: landscape) {
  .contentIcon {
    height: min(48px, 22vh);
  }
  .leftSide hr {
    margin: 1.5rem 0 !important;
  }
}

@media only screen and (min-width: 850px) and (orientation: portrait) {
  .col3 > div {
    min-width: 380px;
    flex: 0.8;
    height: 120px;
  }
  .leftSide hr {
    margin: 1.5rem 0 !important;
  }
}

/* ------------------------------------------------------ */

/* Mobile Portrait (up to 480px) */
/* Styles for mobile portrait screens */
@media only screen and (min-width: 412px) and (max-height: 767px) and (orientation: landscape) {
  .leftSide hr {
    margin: 1.5rem 0 !important;
  }
}

/* Mobile Landscape (481px to 767px) */
@media only screen and (min-width: 481px) and (max-width: 767px) {
  /* Styles for mobile landscape screens */
  .leftSide hr {
    margin: 1.5rem 0 !important;
  }
}

/* Tablet Portrait (768px to 1023px) */
@media only screen and (min-width: 768px) {
  .leftSide hr {
    margin: 1.5rem 0 !important;
  }
}

/* Tablet Landscape (1024px to 1279px) */
@media only screen and (min-width: 1024px) {
}

/* Small Desktop (1280px to 1440px) */
@media only screen and (min-width: 1280px) and (max-width: 1440px) {
  /* Styles for small desktop screens */
}

/* Desktop (1441px to 1920px) */
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
  /* Styles for desktop screens */
}

/* Large Desktop (1921px and above) */
@media only screen and (min-width: 1921px) {
  /* Styles for large desktop screens */
}

/* Portrait Orientation */
@media only screen and (orientation: portrait) {
  /* Styles for portrait orientation */
}

/* Landscape Orientation */
@media only screen and (orientation: landscape) {
  /* Styles for landscape orientation */
}

/* Large Devices and Tablets in Landscape Mode */
@media (min-width: 1024px) and (orientation: landscape) {
  /* Styles for large screens and tablets in landscape orientation */
}

@media (max-width: 430px) {
  .leftSide hr {
    margin: 1.5rem 0 !important;
  }
}