/* Gotham Book - Normal */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/GothamBook.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Gotham Book Italic */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/GothamBookItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* Gotham Bold - Normal */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/Gotham-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

/* Gotham Bold Italic */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/GothamBoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* Gotham Black */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/Gotham-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

/* Gotham Light - Normal */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/Gotham-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

/* Gotham Light Italic */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/GothamLightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

/* Gotham Medium - Normal */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/GothamMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

/* Gotham Medium Italic */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/GothamMediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

/* Gotham Thin - Normal */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/Gotham-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

/* Gotham Thin Italic */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/Gotham-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
}

/* Gotham Ultra Italic */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/Gotham-UltraItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
}

/* Gotham XLight - Normal */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/Gotham-XLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

/* Gotham XLight Italic */
@font-face {
  font-family: 'Gotham';
  src: url('../../media-folder/web-mspp/fonts/Gotham-XLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}

/* Lato (self-hosted if you have the files) */
@font-face {
  font-family: 'Lato';
  src: url('../../media-folder/web-mspp/fonts/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url('../../media-folder/web-mspp/fonts/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url('../../media-folder/web-mspp/fonts/Lato-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}



/* @import url("https://use.typekit.net/wfk2tbj.css");  */

body {width:101%;overflow-x: hidden;text-transform: uppercase;font-family: 'Lato', sans-serif; line-height: 30px; }

* {
  font-family: 'Lato', sans-serif;
  /* font-weight: 400;
font-style: lighter; */
  margin: 0;
  padding: 0;
}
.main-font {
  font-family: 'Lato', sans-serif !important;
}
p {
  font-size: 1.5rem;
  word-wrap: break-word;
  color: rgb(0, 0, 0);
  font-family: 'Lato', sans-serif!important;
  text-align: justify;
  font-weight: 300;
  line-height: 1.6em;
}


.container {
  width: 100% !important;
  margin: auto !important;
  max-width: unset!important;
}

.container.msprop {
  width: 100% !important;
  margin: auto !important;
}

.msprop em {
  font-style: normal!important;
}

a {
  text-decoration: none !important;
}
.bg-light-p {
  background-color: #e0e0db61 !important;
}
.bg-light-p-1 {
  background-color: #f6f6f6 !important;
}
a.nav-link {
  color: #000;
}
.top-header {padding:1rem 3rem 2rem!important}
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /**background: url(imgs/huntley.jpg);**/
  background-color:#fff;
  background-size: cover;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.bg-bw {
  background-color: #ede8e4;
}
.text-light-p {
  color: #000000c4 !important;
}

.nav .nav-item a {
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  letter-spacing: 0.2cap;
}
.hero h2 {
  font-size: 59px!important;
  font-weight: 600;
  line-height: 58px;
  z-index: 99;
  letter-spacing: .08em;
  font-family: 'Gotham';
}
.hero p {
    font-size: 26px;
    color: #ffffff;
    letter-spacing: 0.098cap;
    z-index: 99;
    font-weight: 600;
}

.hero p strong {
  font-weight: 800;
}

.line-2 {
  font-size: 52.5px;
  letter-spacing: .032em;
  font-family: 'Gotham';
}

.btn {
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  padding: 20px 40px;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.2cap;
  z-index: 99;
}

.skip-to-main {display:none;}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: #000000;
	  margin-bottom:5px;
    padding: 14px 0px 0 5px;
}
.info h3 {
  font-size: 34px;
  font-family: 'Lato', sans-serif!important; 
  /* letter-spacing: 0.2cap; */
}
.info .box {
  min-height: 400px;
}
.info .box h2 {
  font-size: 32px;
  font-weight: 600;
  font-family: 'Gotham';
  line-height: 34px;
}

.title {
  font-weight: 600!important;
  font-family: 'Gotham'!important;
  }

.approach h2 {
  font-family: 'Gotham';
  font-weight: 400;
  color: rgb(0, 0, 0);
  font-size: 59px;
  letter-spacing: 0.1cap;
}
.approach p {
  font-size: 22px;
  font-style: normal;
  color: rgb(0, 0, 0);
  font-size: 22px;
  font-family: 'Lato', sans-serif;
  line-height: 27px;
}

.about .box {margin-top:5px;}

.team h2 {font-size: 1.4rem!important;padding-top: 15px;}
.team p {display:none;}

.about h2 span {
  color: #2a2829;
}

.box {
  width: 33%;
}
.burger-icon span {
  display: block;
  width: 35px;
  height: 2px;
  background-color: black;
  margin: 6px 0;
}
.navbar-toggler {
  display: none;
}

.hide-me {
  height: 100px;
  /*overflow: hidden;*/
}
.box {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.box .icon {
  border: 20px solid #ffffff;
  
}
.box .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box .content p {
  font-weight: 200;
  font-style: normal;
}
.box .content a { 
  color: #c3bb63;
  text-decoration: underline !important;
  font-size: 22px;
  font-style: normal;
  font-family: 'Lato', sans-serif;
}
.featured-listing h2 , .featured-communities h2{
  font-family: 'Gotham', sans-serif !important;
  font-weight: 400;
  /* color:rgb(42, 40, 41); */
  font-size: 59px;
  
}
.featured-communities .box img{
  width: 100%;
  height: 100%;
  /* max-height: 400px; */
}
.btns a { 
  padding: 20px 10px;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  border: 1px solid #000;
  letter-spacing: 5px;
}

.text-right {text-align:right;}

.dropdown-menu {border:none !important;;border-radius:0 !important;}


.featured-communities .box {
  width: 100%;
  height: 100%;
  background-color: #f1f1ef !important;
  /* max-height: 400px; */
}
.social img {
  width: 530px;
    height: auto;
}
.tem {
  width: 50%;
}
.social {
  background-color: #f1f1ef;
}

#ytube {
height: 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    position: absolute;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: translate(-50%, -50%) !important;
    height: 56.25vw !important;
}

.swiper {
  width: 100%;
  height: 100%;
  /* overflow: visible; */
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .swiper-button-prev::after {
  content: url(imgs/icons/prev.svg);
} */
 .swiper-button-prev , .swiper-button-next {
  color: #000;
 }
 .swiper-button-next{
  right: 10%!important;

  background: #a0a2a4;
  width: 70px;
  height: 70px;
  border-radius: 42px;
  color: #fff;

  /* right: 30% !important;
  background: #a0a2a4;
  width: 70px;
  height: 70px;
  border-radius: 42px;
  color: #fff;
  top: 90%; */
  
}

.swiper-button-prev{
  left: 10%!important;

  background: #a0a2a4;
  width: 70px;
  height: 70px;
  border-radius: 42px;
  color: #fff;

 
}
.newsletter {
  display: flex;
  gap: 10px;
 }
 .newsletter .form-control input {
  width: 100%;
  border: none;
  padding: 15px;
  font-size: 18px;
  font-family: 'Lato', sans-serif!important;
 }
 .newsletter .form-control {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0;
  min-width: 18rem;
  /* max-width: 19rem; */
 }
 .newsletter button {
  width: 400px !important;
  font-size: 18px;
  font-family: 'Lato', sans-serif!important;
  background-color: #000;
  color: #f1f1f1;

 }
 .contact-form {
  gap: 10px;
  max-width: 60vw;
  margin: 0 auto;
  width: 100%;
 }
 .contact-form .form-control input {
  width: 100%;
  border: none;
  padding: 15px;
  font-size: 18px;
  font-family: 'Lato', sans-serif!important;
 }
 .contact-form .form-control textarea {
  width: 100%;
  border: none;
  padding: 15px;
  font-size: 18px;
  font-family: 'Lato', sans-serif!important;
  height:200px;
  vertical-align: top!important; 
 }
 .contact-form .form-control {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0;
  min-width: 18rem;
  /* max-width: 19rem; */
 }
 .contact-form button {
  width: 400px !important;
  font-size: 18px;
  font-family: 'Lato', sans-serif!important;
  background-color: #000;
  color: #f1f1f1;

 }
 .bg-light-sub {
  background-color: #f1f1ef !important;
 }

 .contact {
  background: url(imgs/huntley.jpg);
  min-height: 33vh;
  height: 500px;
  background-position: center;
  position: relative;
 }
 .contact-bg {
  width: 100%;
  height: 100%;
  background-color: #00000094;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
 }
 .contact-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
 }
 ul {
 list-style: none;
 }
 ul li {
  font-family: 'Lato', sans-serif!important; 
  font-size: 22px;
  padding: 2px;
 }
 ul li a {
  font-family: 'Lato', sans-serif!important;
 }
 .contact a {
  font-family: 'Lato', sans-serif!important;
 }
 footer nav a {
    width: 48px;
    height: 48px;
    background-color: #fff;
    font-family: 'Lato', sans-serif!important;
 }
 .links {
  font-size: 22px;
  font-weight: 200;
  letter-spacing: 1px;
 }
 .bg-dark-subtle-1 {
  background-color: #eaeae7;
 }
 
/** PROPERTY STYLES 
.prop-details {height: 60vh;}
.prop-details h3 {
  position: relative;
  top: 40vh;
  color: #fff;
  text-align: center;
}**/

.prop-details {
  padding: 35vh 10px 5px 10px;
}

.arrow-wrap {display:none;}

@media (max-width: 576px) {

  header {
    height: 90vh;
  }


  .hero h2 {
    font-size: 44px!important;
    font-weight: 700;
    line-height: 58px;
    z-index: 99;
    letter-spacing: 0em;
    font-family: 'Gotham';
  }
  .hero p {
      font-size: 26px;
      color: #ffffff;
      letter-spacing: 0.098cap;
      z-index: 99;
      font-weight: 600;
      text-align: left;
  }
  
  .hero p strong {
    font-weight: 800;
  }
  
  .line-2 {
    font-size: 44px;
    letter-spacing: -.07em;
    font-family: 'Gotham';
  }


  /* Make the section a full-viewport stage so the video can cover it */
  .container.msprop {
    position: relative !important;   
    inset: 0 !important;
    width: 100vw !important;         
    min-height: 100dvh !important;  
    overflow: hidden !important;
    padding: 0 0 0 15px !important;   
  }

  /* The video "background" */
  .container.msprop > iframe#ytube {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 0 !important;

    /* Default sizing (good for landscape) — 16:9 cover */
    width: 100vw !important;
    height: 56.25vw !important;   /* 100 / (16/9) */
    min-width: 100% !important;
    min-height: 100% !important;
  }

  /* In portrait, make the video tall first, then wide enough to cover */
  @media (orientation: portrait) and (max-width: 576px) {
    .container.msprop > iframe#ytube {
      width: 177.78vh !important;  /* 16/9 * 100 */
      height: 110vh !important;
    }
  }

  /* Keep your text above the video */
  .container.msprop > :not(iframe) {
    position: relative !important;
    z-index: 1 !important;
    color: #fff !important;
  }

    .box.team {
      width: 100%!important;
  }




  .swiper {
    min-height: 800px;
    
  }
  .news {
    padding-bottom: 0px !important;
  }
  .social .container-fluid {
    display: flex;
    flex-direction: column;
  }
  .social h2 {
    text-align: center;
    padding: 10px !important;
    color: #2a2829c4;
  }
  .newsletter {
    flex-direction: column;
  }
  .newsletter button {
    padding: 14px;
    width: 100% !important;
  }
  .social .social-row {
    order: 1;
  }
  .social-row .col-6 {
    text-align:center!important;
  }
  .social {
    padding: 10px !important;
    margin-top: 40px;
    padding-top: 30px !important;
  }
  .social-row div {
    width: 96%;
    margin-left: 2%;
  }
  .contact {
    height: 750px;
  }
  .neighborhoods .row {
    flex-direction: column;
  }
  .links {
    flex-direction: column;
    display: flex;
  }
  .address {
    text-align: center;
  }

    .textover .prop-details {
      padding: 22vh 10px 5px 10px !important;
  }


  .social img {
    /* width: 529.333px; */
    height: auto;
    margin-bottom: 15px;
  }

  .contact-form {
    max-width: 9%;
  }

  .hero .h-50 {max-height:50vh!important;min-height:50vh!important;height:50vh!important;}

  .covertagent-acc-dropdown.pos-bottom-left {
    display: block !important;
  }
  .covertagent-acc-dropdown .dropdown-toggler {
    display: inline-block;
    background: -webkit-gradient(linear, left top, right top, from(#2d68ff), color-stop(#225aea), color-stop(#174cd6), color-stop(#0b3ec1), to(#0030ac));
    background: -o-linear-gradient(left, #2d68ff, #225aea, #174cd6, #0b3ec1, #0030ac);
    background: linear-gradient(to right, #323232, #343536, #3c3e42, #232325, #000000);}

  .featured-title {text-align:center;}
  
  .featured-communities h2 {
    font-size: 42px;
    line-height: 24px;
    max-width: 300px;
    word-wrap: break-word;
  }
  .work .btns { 
    flex-direction: column;
    gap: 10px !important;
    align-items: center;
  }
  .tem {
    width: 100%;
  }
  .colom1 {
    order: 1;
  }
  .colom2 {
    order: 0;
  }
  .logo {
    max-height: 80px !important;
    margin-top: 10px;
  }
  .top-header {
    padding: 1rem !important;
  }

  .dropdown-menu.show {
      display: block;
      width: 100%;
      padding-left: 15px;
  }

  .logo-block {
    height: 100px;
    justify-content: space-between;
    width: 100%;
  }
  .navbar-toggler {
    display: block;
  }
  .nav {
    padding-bottom: 10px;
    margin-top: -330px;
    height: 90px;
  }
  .nav.show {
    margin-top: -290px;
  }
  .nav li {
    width: 100%;
    height: 55px;
  }
  .nav .nav-item {
    padding: 0px;
  }
  .nav-item-last {
    margin-top: 100px;
  }
  .nav .nav-item a {
    font-size: 30px;
    font-family: 'Lato', sans-serif!important;
    padding: 2px;
    height: 60px;
  }
  .info h2 {
    font-size: 20px;
    font-weight: 400;
    font-family: 'Gotham', sans-serif !important;
    line-height: 24px;
  }
  .info h3 {
    font-size: 18px;
    font-family: 'Lato', sans-serif!important;
    /* letter-spacing: 0.2cap; */
  }
  .box {
    width: 95%;

    margin: auto;
    margin-bottom: 20px;
    padding: 20px;
  }
  .carousel-control-next, .carousel-control-prev {
    top: 90% !important;
  }
  .carousel-control-next {
    left: calc(50% + 20px ) !important
  }
  .carousel-control-prev {
    left: calc(50% - 60px ) !important
  }

  .swiper-button-next{
    /* right: 10%!important;
  
    background: #a0a2a4;
    width: 70px;
    height: 70px;
    border-radius: 42px;
    color: #fff; */
  
    right: 30% !important;
    background: #a0a2a4;
    width: 70px;
    height: 70px;
    border-radius: 42px;
    color: #fff;
    top: 90%;
    
  }
  
  .swiper-button-prev{
    /* left: 10%!important;
  
    background: #a0a2a4;
    width: 70px;
    height: 70px;
    border-radius: 42px;
    color: #fff; */
  
    left: 30% !important;
      background: #a0a2a4;
      width: 70px;
      height: 70px;
      border-radius: 42px;
      color: #fff;
      /* bottom: 11% !important; */
      top: 90%;
  }
}

.textover.col-md-4 .prop-details h3, .textover.col-md-4 .prop-details .gridmeta, .prop_type {
  text-transform: uppercase;
}

.prop-details p,.textover.col-md-4 .prop-details h3, .textover.col-md-4 .prop-details .gridmeta {margin-left:8px; text-align: left !important;}



.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 80%;
  background: url(../../media-folder/web-mspp/imgs/s-logo.png) no-repeat center center;
  background-size: contain;
  opacity: 0.2;
  pointer-events: none;
  margin-top: 5%;
}

@media (min-width: 1200px) {
  .h2, h2 {
      font-size: 3rem!important;
  }
}