@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* font-family: 'Inter', sans-serif;
font-family: 'Montserrat', sans-serif; */

/* site settings */
:root {
  /* --si-primary-color: #778959;
    --si-secondary-color: #b3b6b7; */
  --banner-height: 80vh;
  --grey-clr: #E6E6E6;
  --header-font: 'Inter', sans-serif;
  --body-font: 'Montserrat', sans-serif;
}

body {
  max-width: 2000px;
  margin-inline: auto;
}

/* home resets */

.home section.communities,
.home .about>div.bg {
  display: none;
}

.home .about .box {
  box-shadow: none;
  width: 100%;
  margin: 0;
}

.home-quick-search .search .search-button {
  color: #fff !important;
}

.btn-effect {
  color: #fff !important;
}


.home .about .box>div {
  margin-top: calc(2rem + 5vw);
}

.home .about .box {
  padding-inline: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

body.home>.clearfix {
  display: none;
}

.home .about .box>div:not( #pageComponent447304) {
  padding-inline: 2rem;
}

@media screen and (min-width: 768px) {
  .home .about .box>div:not( #pageComponent447304) {
    padding-inline: 5rem;
  }
}

@media screen and (min-width: 1024px) {
  .home .about .box>div:not( #pageComponent447304) {
    padding-inline: 10rem;
  }
}

.home section.featured {
  padding: 0;
}

/* content fix */

.custom-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.img_box_center.custom-row .col {
  width: min(400px, 100%);
}

.custom-row.--2-col .col {
  width: min(500px, 100%);
}

.custom-row.--4-col .col {
  width: min(250px, 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}

.custom-row.--4-col img {
  max-width: min(150px, 100%);
}

.custom-row.--agent {
  max-width: 1000px;
  margin-inline: auto;
}

.custom-row.--agent .col {
  width: 100%;
}

.custom-row.--agent .col:nth-child(2) {}

.--agent .col:nth-child(2)>p {
  width: 100%;
  text-align: left;
}

.--agent .col:nth-child(2)>p.--icon-txt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}

.--agent .col:nth-child(2)>p img {
  max-width: min(50px, 100%);
  margin: 0 !important;
}

.--agent .col:nth-child(2)>p:first-child {
  font-size: 2rem;
}

.--agent .col:nth-child(2)>p:first-child span {
  font-size: 1.5em;
  font-weight: bold;
}

@media (min-width: 768px) {
  .custom-row.--agent .col:first-child {
    width: 33%;
  }

  .custom-row.--agent .col:nth-child(2) {
    width: 65%;
    padding-left: 2.5vw;
  }
}

/* full page interior */

.pages .container>.row>.left-col {
  width: 100%;
}

.pages .container>.row>.right-col {
  display: none;
}

/* tools */

.--padding-inl {
  padding-inline: 2rem;
}




@media screen and (min-width: 768px) {
  .--padding-inl {
    padding-inline: calc(2rem + 5vw);
  }
}

@media screen and (min-width: 1024px) {
  .--padding-inl {
    padding-inline: calc(2rem + 7.5vw);
  }
}

.--padding-bl {
  padding-block: calc((2rem + 5vw) / 2);
}

/* .--m-top {
  margin-top: calc(2rem + 5vw);
} */

/* buttons */
.btn {
  background-color: var(--si-primary-color);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  border: 1px solid transparent;
  line-height: 22px;
  margin-top: 1rem;
  padding: 1rem 2.5rem;
  transition: 300ms ease;
  font-size: 1rem;
  border-radius: 0;
}

.btn:hover {
  background-color: var(--si-secondary-color);
}

.btn.--outline {
  background-color: transparent;
  border: 1px solid var(--outline-clr) !important;
  color: var(--outline-clr) !important;
}

.btn.--outline:hover {
  background-color: var(--outline-clr) !important;
  color: var(--hvr-txt-color) !important;
}

.btn.--outline.--primary-hvr:hover {
  background-color: var(--si-primary-color) !important;
  border-color: var(--si-primary-color) !important;
}

.btn.--outline.--wht {
  --outline-clr: #fff;
  --hvr-txt-color: #000;
}

.btn.--outline.--primary {
  --outline-clr: var(--si-primary-color);
  --hvr-txt-color: #fff;
}

/* set fonts */
body.custom h1,
body.custom h2,
body.custom h3,
body.custom h4,
body.custom h5 {
  font-family: var(--header-font);
}

body.custom p,
body.custom a,
body.custom li {
  font-family: var(--body-font);
}

/* home banner */

section.home-quick-search::before {
  content: "";
  box-shadow: 0px 100px 500px 50px rgb(0 0 0 / 60%) inset;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0, 0.2);
  z-index: 2;
}

.home-quick-search {
  height: var(--banner-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.home-quick-search .listings-count {
  text-shadow: 2px 2px 2px rgb(0 0 0 / 50%);
}

.home-quick-search h1 {
  font-family: var(--header-font);
  text-shadow: 2px 2px 2px rgb(0 0 0 / 70%);
}

/* intoTiles */

.introTiles {
  display: grid;
  gap: calc(1rem + 5vw);

}

@media screen and (min-width: 768px) {
  .introTiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

.introTiles>a {
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 3;
  padding: calc(15vh - (1rem + 5vw)) 5vw;
}

.introTiles>a::before {
  content: "";
  position: absolute;
  top: 2rem;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  border: 2px solid #fff;

  z-index: 2;
}

.introTiles>a::after {
  content: "";
  background-color: #000;
  opacity: 0.25;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.introTiles>a .tile-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
}

.introTiles>a .tile-content>* {
  position: relative;
  z-index: 3;
}

@media (min-width: 820px) {
  .introTiles>a {
    padding: 10vh 5vw;
  }
}

.introTiles>a span.tileHeader {
  font-size: calc(2rem + 1vw);
  font-weight: 600;
  text-shadow: 2px 2px 2px rgb(0, 0, 0, .5);
}

.introTiles>a span.tileCTA {
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0.75em 1.25em;
  border: 1px solid #fff;
  transition: 300ms ease;
  background-color: transparent;
}

.introTiles>a:hover {
  text-decoration: none !important;
}

.introTiles>a:hover span.tileCTA:hover {
  background-color: var(--si-primary-color);
  border-color: var(--si-primary-color);
}

/* community slider */
.sliderWrapper {
  margin-top: 2rem;
  padding-top: 2rem;
}

.communitySlide {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.communitySlide:before {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgb(0, 0, 0, .5), transparent);
  transition: 300ms ease;
}

.communitySlide:hover {
  text-decoration: none !important;
}

.communitySlide:hover:before {
  height: 100%;
}

.communitySlide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index: 1;
}

.communitySlide .community-label {
  color: #fff;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 3;
  font-size: calc(1rem + 1vw);
  text-shadow: 1px 1px 1px rgb(0, 0, 0, .75);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  transition: 300ms ease;
}

.communitySlide:hover .community-label {
  gap: 1rem;
}

.communitySlider .splide__arrow--prev {
  position: relative;
  transform: none;
  left: unset;
  padding-right: 1rem;
  border-right: 1px solid #ccc;
  text-transform: uppercase;
  background: none;
  border-radius: 0;
  width: auto;
}

.communitySlider .splide__arrow--next {
  position: relative;
  transform: none;
  right: unset;
  text-transform: uppercase;
  background: none;
  border-radius: 0;
  width: auto;
}

.communitySlider .splide__arrows {
  position: absolute;
  top: -3.5rem;
  right: 2rem;
  bottom: unset;
  left: unset;
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  font-size: 1.5rem;
}

/* work with us */

#workWithUs {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 75vh;
  padding-inline: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#workWithUs .contactContent {
  width: 100%;
  max-width: min(750px, 100%);
  background-color: rgb(40, 40, 40, .9);
  padding: 2rem 2.5rem;
}

#workWithUs .contactContent h2,
#workWithUs .contactContent p {
  color: #fff;
  text-align: center;
}