/*---------------------------------------------------------
here you can import variables and common tags styling 
---------------------------------------------------------*/
/*---------------------------------------------------------
here you can add your general styling
---------------------------------------------------------*/
/*---------------------------------------------------------
here you can import pages styling 
---------------------------------------------------------*/
/*---------------------------------------------------------
here you can import break points styling 
    please let this at the end of this file
---------------------------------------------------------*/
/*---------------------------------------------------------
Instagram Feed Plugin, don't forget to include instagram-feed.js in layout page 
---------------------------------------------------------*/
.instagram-feed-container {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.instagram-feed-container a {
  width: 33%;
  height: 100px;
  display: block;
}
.instagram-feed-container a img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.font-playfair {
  font-family: "Playfair Display", Roboto, serif;
}

.apartment-page .pxp-nav > li > a,
.apartment-page .pxp-nav > li > a:hover, .project-page .pxp-nav > li > a,
.project-page .pxp-nav > li > a:hover, .apartments-page .pxp-nav > li > a,
.apartments-page .pxp-nav > li > a:hover {
  font-weight: 400 !important;
  color: #333;
  text-decoration: none;
}
.apartment-page .pxp-header a, .project-page .pxp-header a, .apartments-page .pxp-header a {
  color: #333;
  font-weight: 400 !important;
}
.apartment-page .pxp-header-user, .apartment-page .pxp-header-nav-trigger, .project-page .pxp-header-user, .project-page .pxp-header-nav-trigger, .apartments-page .pxp-header-user, .apartments-page .pxp-header-nav-trigger {
  color: #333;
  border: 1px solid #000000;
}
.apartment-page .pxp-logo .logo, .project-page .pxp-logo .logo, .apartments-page .pxp-logo .logo {
  display: block;
}
.apartment-page .logo-white, .project-page .logo-white, .apartments-page .logo-white {
  display: none;
}
.apartment-page .custom-contact, .project-page .custom-contact, .apartments-page .custom-contact {
  position: sticky;
  top: 150px;
}
.apartment-page .pxp-sp-agent-btn-main, .project-page .pxp-sp-agent-btn-main, .apartments-page .pxp-sp-agent-btn-main {
  background-color: #d1a958;
  border-color: #d1a958;
}
.apartment-page .pxp-agent-contact-modal-btn, .project-page .pxp-agent-contact-modal-btn, .apartments-page .pxp-agent-contact-modal-btn {
  background-color: #d1a958;
  border-color: #d1a958;
}
.apartment-page .pxp-single-property-section.pxp-sp-agent-section, .project-page .pxp-single-property-section.pxp-sp-agent-section, .apartments-page .pxp-single-property-section.pxp-sp-agent-section {
  z-index: 10;
}
.apartment-page .custom-z, .project-page .custom-z, .apartments-page .custom-z {
  z-index: -10;
}
.apartment-page .svg-custom, .project-page .svg-custom, .apartments-page .svg-custom {
  height: 18px;
  margin-right: 2px;
}
.apartment-page .unique-location, .project-page .unique-location, .apartments-page .unique-location {
  color: #333;
  background-color: #d1a958;
  padding: 20px;
  border-radius: 25px;
}
.apartment-page .unique-location-list-item, .project-page .unique-location-list-item, .apartments-page .unique-location-list-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.apartment-page .pxp-header a.main-language.nav-link.dropdown-toggle, .project-page .pxp-header a.main-language.nav-link.dropdown-toggle, .apartments-page .pxp-header a.main-language.nav-link.dropdown-toggle {
  color: #333 !important;
}

.apartment-page .pxp-hero-bg {
  position: inherit;
  height: 250px;
  width: 100%;
}

.project-page .pxp-hero-bg {
  position: inherit;
  height: 400px;
  width: 100%;
}
@media (max-width: 768px) {
  .project-page .pxp-hero-bg {
    height: 250px;
  }
}

@media (max-width: 768px) {
  .pxp-nav > li > .pxp-nav-sub > li > a {
    font-weight: 400 !important;
    font-size: 15px !important;
    color: #333 !important;
    padding-left: 15px !important;
    padding-block: 0px !important;
  }
  .pxp-nav > li > .pxp-nav-sub > li > a:hover {
    padding-left: 0px;
    color: #333 !important;
  }
}
.custom-home-form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.custom-hero {
  position: relative;
  z-index: 0;
}

.pxp-header a.main-language.nav-link.dropdown-toggle {
  color: #fff !important;
}

.pxp-header.pxp-is-sticky a.main-language.nav-link.dropdown-toggle {
  color: #333 !important;
}

.hero-carousel .pxp-hero-bg {
  height: 100vh !important; /* full screen */
  background-size: cover !important; /* cover background */
  background-position: center !important;
}

.pxp-hero .owl-carousel,
.pxp-hero .owl-carousel .owl-stage-outer,
.pxp-hero .owl-carousel .owl-stage,
.pxp-hero .owl-carousel .owl-item,
.pxp-hero .pxp-hero-bg {
  height: 100% !important; /* inherit full hero height */
}

.pxp-hero .pxp-hero-bg {
  background-size: cover !important;
  background-position: center !important;
}

.list-inline-item a {
  width: max-content;
}

.z-999 {
  z-index: 999;
}

.pt-9rem {
  padding-top: 9rem !important;
}

.justify-self-end {
  justify-self: end;
}
@media (max-width: 992px) {
  .justify-self-end {
    justify-self: center;
  }
}

.w-hero-custom {
  width: 100%;
}

.pxp-hero.pxp-hero-contact.vh-100 {
  height: 700px !important;
}

@media (min-width: 992px) {
  .header-nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
@media (min-width: 900px) {
  .pxp-hero.pxp-hero-contact.vh-100 {
    height: 1000px !important;
  }
  .pxp-hero-caption {
    position: absolute !important;
    right: -10% !important;
  }
  .w-hero-custom {
    width: 50%;
  }
}
@media (min-width: 200px) {
  .pxp-hero.pxp-hero-contact.vh-100 {
    height: 900px !important;
  }
  .pxp-hero-caption {
    position: absolute !important;
    bottom: -3%;
    top: auto;
  }
}
@media (min-width: 1460px) {
  .pxp-hero-caption {
    position: absolute !important;
    right: 3% !important;
  }
}
.sold-out {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 50px;
  font-size: 0.6rem;
  overflow: hidden;
  opacity: 1;
  z-index: 4;
  background-color: #000000;
  white-space: nowrap;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.sold-out > span > span {
  opacity: 0.5;
  display: inline-block;
  padding: 0 5px;
}