:root {
    --green: #B7CDC8;;
    --blue: #39607A;
    --blue2: #557590;
    --blue3: #003B64;
    --grey: #54565B;
}

html{
    scroll-behavior: smooth;
}
body{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 17px;
    color: #000;
}

/* Gotham font faces — paths relative to this stylesheet */

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_black.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_blackitalic.otf") format("opentype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_bolditalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_book.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_bookitalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_lightitalic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_mediumitalic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_thinitalic.otf") format("opentype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_ultra.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_ultraitalic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_xlight.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("fonts/gotham_xlightitalic.otf") format("opentype");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_black.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_blackitalic.otf") format("opentype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_bolditalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_book.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_bookitalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_lightitalic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_mediumitalic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_thinitalic.otf") format("opentype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_ultra.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_ultraitalic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_xblack.otf") format("opentype");
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_xblackitalic.otf") format("opentype");
    font-weight: 950;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_xlight.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Condensed";
    src: url("fonts/gothamcond_xlightitalic.otf") format("opentype");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/gothamnarrow_black.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/gothamnarrow_blackitalic.otf") format("opentype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/gothamnarrow_bolditalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/gothamnarrow_bookitalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/gothamnarrow_medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/gothamnarrow_thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/gothamnarrow_thinitalic.otf") format("opentype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/gothamnarrow_ultra.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/gothamnarrow_ultraitalic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/gothamnarrow_xlightitalic.otf") format("opentype");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_black.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_blackitalic.otf") format("opentype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_bolditalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_lightitalic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_mediumitalic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_thinitalic.otf") format("opentype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_ultra.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_ultraitalic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_xlight.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham XNarrow";
    src: url("fonts/gothamxnarrow_xlightitalic.otf") format("opentype");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

 


a{-webkit-transition: all 0.32s ease-out; -moz-transition: all 0.32s ease-out; -o-transition: all 0.32s ease-out; -ms-transition:  all 0.32s ease-out; transition: all 0.32s ease-out; text-decoration:none;}
a:hover{color: var(--red); text-decoration: none;}

::placeholder { color: 000; opacity: 1; }
:-ms-input-placeholder { color: 000;}
::-ms-input-placeholder { color: 000;}

/*COMMOM STYLES*/
.ff-mo{font-family: 'Montserrat';}

.fw-bl{font-weight: 800;}
.fw-bo{font-weight: 600;}
.fw-me{font-weight: 500;}
.fw-re{font-weight: 400;}
.fw-li{font-weight: 300;}
.fw-th{font-weight: 200;}

.fs-75{font-size: 75px;}
.fs-63{font-size: 63px;}
.fs-45{font-size: 45px;}
.fs-36{font-size: 36px;}
.fs-27{font-size: 27px;}
.fs-24{font-size: 24px;}
.fs-20{font-size: 20px;}
.fs-14{font-size: 14px;}
.fs-10{font-size: 10px;}


.ls-1{letter-spacing: 1px;}
.ls-2{letter-spacing: 2px;}
.ls-5{letter-spacing: 5px;}

.lh-2{line-height: 2;}


@media screen and (min-width:992px){
    .mt-lg-lg{margin-top: 63px!important;}
    .mb-lg-lg{margin-bottom: 63px!important;}

    .mt-lg-xl{margin-top: 100px!important;}
    .mb-lg-xl{margin-bottom: 100px!important;}
  
}

.bg-blue{background-color: var(--blue2)!important; }
.bg-blue3{background-color: var(--blue3)!important; }
.bg-green{background-color:var(--green);}

.text-green{color:var(--green)!important;}
.text-blue{color:var(--blue2)!important;}
.text-blue3{color:var(--blue3)!important;}
.text-grey{color:var(--grey)!important;}
.text-black{color:#000!important;}

.hsfc-Button,
.btn-brand{background-color: var(--blue); border:none; display: inline-block;  transition: all 0.32s ease-out; color: #FFF; font-weight: 400; font-size: 15px; padding: 9px 27px; letter-spacing: 1.5px;  border-radius: 38.25px;}
.btn-brand-wh{background-color: #FFF; color:var(--blue) ; border: 1px solid var(--blue);}
.btn-brand.active,
.hsfc-Button:hover,
.btn-brand:hover{background-color: #007FC4; color: #FFF!important;}

.btnFloor:hover,
.btnFloor.active{background-color: #39607A;}


.has-bg{background-position: center; background-size: cover; }


.img-linked{
    -webkit-transition: all 0.32s ease-out;
    -moz-transition: all 0.32s ease-out;
    -o-transition: all 0.32s ease-out;
    -ms-transition:  all 0.32s ease-out;
    transition: all 0.32s ease-out;
}
.img-linked:hover{
    transform: scale(.95);
    cursor: pointer;
}
.img-border{border: 2px solid #FFF;}

.text-linked{color: inherit;}
.text-linked:hover{color: inherit; text-decoration: underline;}

.bdr-right-blue{border-right: 1px solid var(--blue2);}

footer{background-color: var(--blue2);}
.overlay{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); z-index: 1; transition: all .36s linear;}
.wc-overlay .overlay{display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 0;}
.wc-overlay:hover .overlay{opacity: 1;}

.contact-map{width: 100%; height: 100%; min-height: 400px;}

/* Navigation */

#topNavigation {box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15); background-color: #FFF; padding-top: 0; padding-bottom: 0;}

#topNavigation .nav-link{padding-left: 27px;  padding-top: 0; padding-bottom: 0; height: 81px; display: flex; align-items: center; font-weight: 300;}
#topNavigation .nav-link,
#topNavigation .dropdown-item{font-size: 13px; color: #000; letter-spacing: 2px; font-weight: 300; border: none; margin-bottom: 1px; }
#topNavigation .dropdown-item{padding-top: 9px; padding-bottom: 9px;}
#topNavigation .dropdown-item:hover{background-color: #4789A2; color: #FFF;}
#topNavigation .dropdown-toggle::after{display: none;}
#topNavigation .dropdown-menu {border-radius: 0; border: none; border: 0 solid #000; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);}
#topNavigation .withCollapse.collapsed {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M11.9102 -4.6334e-08L12.9702 1.061L7.19322 6.84C7.10065 6.93315 6.99057 7.00708 6.86932 7.05753C6.74807 7.10798 6.61804 7.13395 6.48672 7.13395C6.35539 7.13395 6.22536 7.10798 6.10411 7.05753C5.98286 7.00708 5.87278 6.93315 5.78022 6.84L0.000215484 1.061L1.06022 0.000999407L6.48522 5.425L11.9102 -4.6334e-08Z' fill='black'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 90% 15px; background-color: #FFF; color: #000;}

#topNavigation .withCollapse  {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M1.06 7.13394L1.26523e-08 6.07294L5.777 0.293942C5.86957 0.200788 5.97964 0.126859 6.10089 0.0764108C6.22214 0.0259629 6.35217 -8.50732e-06 6.4835 -8.50575e-06C6.61483 -8.50419e-06 6.74486 0.0259629 6.86611 0.0764109C6.98736 0.126859 7.09743 0.200788 7.19 0.293942L12.97 6.07294L11.91 7.13294L6.485 1.70894L1.06 7.13394Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 90% 15px; background-color: #4789A2; color: #FFF;}

@media screen and (max-width: 1199px){ 
#topNavigation .nav-link { padding-left: 18px;}
}

@media screen and (max-width: 991px){ 
    #topNavigation  .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8H13.75M5 12H19M10.25 16L19 16' stroke='%23557590' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); width: 2em; height: 2em;}
    #topNavigation   .navbar-toggler {border-color: rgba(255,255,255,0); } 
    #topNavigation .navbar-toggler:focus, .navbar-toggler:active { outline: none; box-shadow: none;  }

    #topNavigation .navbar-nav {padding-bottom: 90px;}
    #topNavigation  .dropdown-menu{ display: block; box-shadow: none; padding-left: 27px;}
    #topNavigation .nav-link {height: 9px; margin-top: 27px;}

    .fs-75{font-size: 45px;}
    .fs-24{font-size: 23px;}
}

@media screen and (max-width: 767px){ 
     body{font-size: 16px;}
    .fs-75{font-size: 45px;}
    .fs-36{font-size: 18px;}
    .ls-5{letter-spacing: 2px;}
    .fs-24{font-size: 22px;}
}

@media screen and (max-width: 567px){ 
    .fs-75{font-size: 36px;}
    .fs-63{font-size: 45px;}
    .fs-45{font-size: 36px;}
    .fs-24{font-size: 21px;}

    #area-amenities-wrapper .fs-24{font-size: 12px;}
}

@media screen and (max-width: 360px){ 
   
    .fs-75{font-size: 27px;}
    .fs-63{font-size: 36px;}
    .fs-45{font-size: 27px;}
    .fs-24{font-size: 20px;}
    .btn-brand{font-size: 13px;}

}

@media screen and (min-width: 992px){
    #topNavigation .dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{ display: block; }
    #topNavigation .dropdown-menu{ margin-top: 0; }
    #topNavigation .dropdown-toggle{margin-bottom: 2px; }
    #topNavigation .navbar .dropdown-toggle, .nav-tabs .dropdown-toggle{ margin-bottom: 0;}
}


@media screen and (min-width:768px){
    .welcome-text{max-width: 1008px;; display: block; margin: auto;}
}
.wc-home-type-wrapper{max-width: 900px;}
.wc-home-type{position: absolute; left: 50%;top: 9%; transform: translate(-50%); z-index: 1; width: 100%;}
.myCarousel .carousel-control-next, 
.myCarousel  .carousel-control-prev{
    opacity: 1;
    width: 78px;
}
.myCarousel .carousel-control-next-icon, 
.myCarousel  .carousel-control-prev-icon{
    width: 72px;
    height: 72px;
}

.myCarousel .carousel-control-next-icon{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78' viewBox='0 0 78 78' fill='none'%3E%3Crect width='78' height='78' fill='%23003B64'/%3E%3Cpath d='M27.1304 22.0416L30.5228 18.6523L49.0007 37.1238C49.2985 37.4198 49.5349 37.7717 49.6962 38.1594C49.8575 38.5471 49.9405 38.9628 49.9405 39.3828C49.9405 39.8027 49.8575 40.2184 49.6962 40.6061C49.5349 40.9938 49.2985 41.3457 49.0007 41.6417L30.5228 60.1228L27.1336 56.7335L44.4763 39.3875L27.1304 22.0416Z' fill='white'/%3E%3C/svg%3E");}
.myCarousel .carousel-control-prev-icon{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78' viewBox='0 0 78 78' fill='none'%3E%3Crect width='78' height='78' transform='translate(78 78) rotate(-180)' fill='%23003B64'/%3E%3Cpath d='M50.8696 55.9584L47.4772 59.3477L28.9993 40.8762C28.7015 40.5802 28.4651 40.2283 28.3038 39.8406C28.1425 39.4529 28.0595 39.0372 28.0595 38.6173C28.0595 38.1973 28.1425 37.7816 28.3038 37.3939C28.4651 37.0062 28.7015 36.6543 28.9993 36.3583L47.4772 17.8773L50.8664 21.2665L33.5237 38.6125L50.8696 55.9584Z' fill='white'/%3E%3C/svg%3E");}



.wc-home-naturally {position: absolute ;top :0; left:50%; transform: translate(-50%); z-index: 1; width: 100%;}

#areaMap,
#amenitiesMap svg{position: absolute; left: calc(var(--bs-gutter-x) * .5); top: 0; width: calc(100% - 1.54rem);}
#amenitiesSvg g:hover{cursor: help;}




#areaMap .st0{fill:#8e7caa}
#areaMap .st1{fill:#fff}
#areaMap .st2{fill:#b57a89}
#areaMap .st3{fill:#79a596}
#areaMap .st4{fill:#ecb56e}
#areaMap .st5{fill:#cb5b4f}
#areaMap .st6{fill:none;stroke:#fff}
#areaMap .st7{fill:#d0c4b9}
#areaMap .st8{fill:#69aacc}

#accordionModelHomes{display: flex; flex-flow: column-reverse;}
.img-naturally-welcomming{position: absolute; left: 0; bottom: 0;}

.info-box {
    position: absolute;
    z-index: 999;
    background: #FFF;
    padding: 0;
    border: 2px solid var(--blue2);
    display: none;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    transition: all .25s linear;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    color: var(--blue2);
}

.info-box:after {
    border-color: var(--blue2);
    /* border-top-color: #FFF; */
    border-width: 30px;
    margin-left: -30px;
}
.info-box:after, .info-box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}



 #staffCarousel .staff-card {
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
    }

    #staffCarousel .staff-card.is-active {
    opacity: 1;
    transform: scale(1.03);
    }

    #staffCarousel img {
    max-width: 100%;
    }

.hero-img{filter: brightness(0.9);}
.hero-caption{position: absolute; top: 81%; left: 50%; transform: translate(-50%); width: 100%; text-align: center; letter-spacing: 1.8px;}

.accordionHomes .accordion-button::after{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='34' viewBox='0 0 61 34' fill='none'%3E%3Cpath d='M55.2527 -2.14952e-07L60.1702 4.92217L33.3696 31.732C32.9402 32.1642 32.4295 32.5071 31.867 32.7412C31.3045 32.9752 30.7013 33.0957 30.0921 33.0957C29.4828 33.0957 28.8796 32.9752 28.3171 32.7412C27.7546 32.5071 27.2439 32.1642 26.8145 31.732L-1.16592e-05 4.92217L4.91753 0.00463643L30.0851 25.1676L55.2527 -2.14952e-07Z' fill='%23003B64'/%3E%3C/svg%3E");}



.accordionHomes .accordion-button{font-size: 36px;font-weight: 200; text-transform: uppercase; color: #000;}
.accordionHomes  .accordion-header{border-bottom: 2px solid #003B64;}
.accordionHomes  .accordion-button:focus,
.accordionHomes  .accordion-button:not(.collapsed){background-color: transparent; box-shadow: none;}
.accordionHomes .accordion-button img{width: 180px;}

#availableFp  .accordionHomes .accordion-button{font-size: 17px; font-weight: 400; padding: 9px;}

.home-wrapper {width: 100%;  background-color: #D2D3D3; display: block; height: 100%;}
.home-wrapper .left,
.home-wrapper .right{float: left; display: inline; height: 100%;  background-color: #D2D3D3;}
.home-wrapper .left{width: calc(100% - 48px); background-color: #DDDEDE; position: relative; padding-bottom: 54px;}
.home-wrapper .right{width: 48px;  text-align: center; color: #003B64; font-weight: 600;}
.home-wrapper .info-text{transform: rotate(90deg); white-space: nowrap;  padding: 5px; font-size: 11px;}
.home-wrapper  .btn-view-fp{color: #FFF; font-weight: 700; width: 100%; background-color: var(--blue3); display: block; padding: 9px 27px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='23' viewBox='0 0 13 23' fill='none'%3E%3Cpath d='M0 1.85021L1.85195 0L11.9391 10.0836C12.1017 10.2452 12.2307 10.4373 12.3188 10.649C12.4068 10.8606 12.4521 11.0876 12.4521 11.3168C12.4521 11.546 12.4068 11.773 12.3188 11.9846C12.2307 12.1963 12.1017 12.3884 11.9391 12.55L1.85195 22.6388L0.00174535 20.7886L9.46921 11.3194L0 1.85021Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 96% 9px; position: absolute; left: 0; bottom: 0; letter-spacing: 1px;}
.home-wrapper  .btn-view-fp:hover{background-color: var(--blue);}

.highlights-wrapper ul{padding-left: 0;}
.highlights-wrapper li{list-style: none; line-height: 36px; font-weight: 500;}
.highlights-wrapper li::before{content: "•  ";}

#salesMap {
    height: 100%;
    width: 100%;
    min-height: 250px;
}
.fp-options {
    text-align: start;
    font-size: 12px;
    font-weight: 400;
    border: 2px solid #FFF;
    border-top: none;
    padding: 10px 7px;
    z-index: 99;
}

.fp-img-buttons {
    position: absolute;
    right: 15px;
    top: 0;
    text-align: center;
    background-color: #FFF;
    z-index: 99;
    padding: 5px 18px;
}

 @media screen and (max-width: 767px){
    .imgFloorplan{
        padding-right: 0rem !important;
        padding-left: 0rem !important;
    }
}

@media screen and (min-width: 768) {
    .imgFloorplan{
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }
}

@media screen and (min-width: 1400px) {
    .imgFloorplan{
        padding-right: 6rem !important;
        padding-left: 6rem !important;
    }
}

/* Small devices (landscape phones, less than 576px) */
@media (max-width: 575.98px) {
    .imgFloorplan {
        padding-right: 0rem !important;
        padding-left: 0rem !important;
    }
}

/* Medium devices (tablets, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .imgFloorplan {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
}

/* Large devices (desktops, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .imgFloorplan {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }
}

/* X-Large devices (large desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .imgFloorplan {
        padding-right: 5rem !important;
        padding-left: 5rem !important;
    }
}

/* XX-Large devices (larger desktops, 1200px and up) */
@media (min-width: 1200px) {
    .imgFloorplan {
        padding-right: 6rem !important;
        padding-left: 6rem !important;
    }
}

.fp-options-wrapper{background-color:var(--grey); color: var(--brand);}
.fp-options{ text-align: start; font-size: 12px; font-weight: 400; border: 2px solid #FFF; border-top: none; padding: 10px 7px;z-index: 99;}
.fp-options .form-check-inline{margin-bottom: 8px;}
.fp-option{display: none;}
#fp-btn-svg-wrapper{position: relative; overflow: hidden;}
.fp-img-buttons{position: absolute; right: 15px; top: 0; text-align: center; background-color: #FFF; z-index: 99; padding: 5px 18px;}
.btnImageZoom{border: none; background-color: transparent; text-align: center; margin: 0 auto; display: block;}
#imgFloorplan{transition: all .36s ease;}
.imgFlip{transform: scale(-1);  -webkit-transform: scaleX(-1);}

#panzoom svg{max-width: 65%; display: block; margin: 0 auto}


#imgZoomSlider {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    width: 5px;
    vertical-align: bottom;
    -webkit-appearance: none;
    border-radius: 5px;  
    background: var(--grey);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

#imgZoomSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: var(--brand);
  cursor: pointer;
}

#imgZoomSlider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: var(--brand);
  cursor: pointer;
}

#accordionFloorplans .filterItem{min-height: 490px; display: flex; }

.btns-wrapper .btn-brand{ text-align: center;}

.carouseHomeRenderings .carousel-indicators button{width: 23px; height: 23px; border-radius: 50%; text-indent: 0; font-weight: 600; border: 2px solid #FFF; color: #FFF; background-color: var(--brand); font-size: 13px;}
.carouseHomeRenderingsAll .carousel-item {height: 375px; width: 100%; background-position: top; background-size: cover;}

.ico-location{width:44px;height:48px}
.ico-beds{width:60px;height:38px}
.ico-bath{width:43.5px;height:42px}
.ico-home{width:46px;height:46px}
@media screen and (min-width:1200px) {
  #panzoom svg{width: 600px;}
}

.amenities-map .col{text-align: center; border: 1px solid var(--blue3);  font-weight: 600; font-size: 14px;}
.amenities-map .col a{ display: block;padding: 13px 4px;}

.customList li{ line-height: 34px; margin-bottom: 18px;}

@media screen and (max-width: 767px){

    .wc-home-naturally {position: relative ;top :0; left:50%; transform: translate(-50%); z-index: 1; width: 100%;}
    .wc-home-naturally h1.fw-th{color: var(--grey);}
    .wc-home-naturally h1 span{color: var(--green)!important;}

    .wc-home-naturally p{color: #000;}
    /* .wc-home-type-wrapper{position: relative;} */

    .myCarousel .carousel-control-next, 
    .myCarousel  .carousel-control-prev{
        width: 36px;
    }
    .myCarousel .carousel-control-next-icon, 
    .myCarousel  .carousel-control-prev-icon{
        width: 36px;
        height: 36px;
    }
    
}


@media(min-width:768px) and (max-width: 991px){
}

@media screen and (min-width:992px){
   
}

.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(/images/misc/loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(/images/misc/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(/images/misc/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(/images/misc/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}

.showMore{
    position: absolute;
    bottom: 20px;
    text-align: center;

    left: 49%;
    z-index: 15;
     -webkit-animation: bounce 2s infinite ease-in-out;
    -o-animation: bounce 2s infinite ease-in-out;
    -ms-animation: bounce 2s infinite ease-in-out; 
    -moz-animation: bounce 2s infinite ease-in-out; 
    animation: bounce 2s infinite ease-in-out;
}



@-webkit-keyframes bounce {
    0% { transform: translateY(-15px)  }
    50% { transform: translateY(20px) }
    100% { transform: translateY(-15px) }
}

@keyframes bounce {
    0% { transform: translateY(-15px)  }
    50% { transform: translateY(20px) }
    100% { transform: translateY(-15px) }
}

#registrationForm .form-control {
    border-radius: 0;
    border: 1px solid var(--grey);
    margin-bottom: 17px;
    color: var(--brand);
    font-weight: 500;
}
#registrationForm .form-floating label {
    font-weight: 500;
}
#registrationForm select {
    display: block;
    line-height: 1.3;
    padding: 0.6em 1.4em 0.5em 0.8em;
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.6 7.8'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%2354565a;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='8.9 6.7 15.6 0 13.4 0 7.8 5.6 2.2 0 0 0 7.8 7.8 8.9 6.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 15px auto, 100%;
}


.bonusWrapper strong{ font-weight: 700; font-size: 27px;}



/* Wrapper */
.filter-wrapper {
    width: 450px;
    max-width: 90%;
    margin: auto;
    position: relative;
}

/* Main Bar */
.filter-bar {
    background: #FFFFFF;
    border: 2px solid #39607A;
    border-radius: 60px;
    display: flex;
    align-items: center;
    padding: 18px 30px;
    gap: 25px;
    cursor: pointer;
}

/* Left label */
.filter-left {
    font-size: 15px;
    letter-spacing: 2px;
    color: #39607A;
    font-weight: 400;
    white-space: nowrap;
}

/* Divider */
.divider {
    width: 2px;
    height: 40px;
    background: #000;
}

/* Search area */
.filter-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

#selectedValue {
    border: none;
    background: transparent;
    font-size: 14px;
    letter-spacing: 2px;
    color:#39607A;
    width: 100%;
    outline: none;
    font-weight: 400;
    white-space: nowrap;
}


.filter-selected{position: relative; min-width: 225px}

/* Chevron */
.filter-arrow {
    width: 18px;
    height: 18px;
    border-right: 2px solid #003B64;
    border-bottom: 2px solid #003B64;
    transform: rotate(45deg);
    transition: 0.3s ease;
}

/* Rotate when open */
.filter-wrapper.active .filter-arrow {
    transform: rotate(-135deg);
}

/* Dropdown */
.filter-dropdown {
    position: absolute;
    top: 205%;
    left: -26px;
    width: 135%;
    background: white;
    /* border-radius: 20px; */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    padding: 0 0 5px 0;
    display: none;
    animation: fadeIn 0.25s ease;
    z-index: 100;
    text-align: start;
}

.filter-wrapper.active .filter-dropdown {
    display: block;
}

.filter-option,
.filterOption {
    padding: 14px 30px;
    cursor: pointer;
    transition: 0.2s;
    color: #000;
    display: block;
    font-size: 13px;
    font-weight: 300;
}

.filter-option:hover,
.filterOption:hover {
    background: var(--blue2);
    color: #FFF;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */

/* SITE PLAN */
    #svgWrapper polygon:hover,
    #svgWrapper rect:hover,
    #svgWrapper circle:hover,
    #svgWrapper path:hover
        {cursor: pointer;}

   
/* SITE PLAN ENDS */


@media screen and (max-width: 1199px){ 
    .img-naturally-welcomming{position: relative;}
}

@media screen and (max-width: 991px){ 
  .accordionHomes .home-wrapper .fs-36{font-size: 30px;}
  .amenities-map .col {flex: 25%;}
  .info-box {font-size: 16px;}
 
}

@media screen and (max-width: 767px){ 
    .accordionHomes .accordion-button{font-size: 30px;}
    .accordionHomes .home-wrapper .fs-36{font-size: 24px;}
    .accordionHomes .home-wrapper .btn-view-fp{font-size: 16px;}
    .accordionHomes .accordion-button img{width: 117px;}

    .hero-caption{top: 56%;}
   

    .amenities-map .col {flex: 33.33%;}
    .amenities-map .col a{font-size: 14px; padding: 9px 4px;}

    .filter-wrapper{max-width: 90%;}
    .filter-wrapper .filter-left,
    .filter-wrapper .divider {display: none;}

    .filter-wrapper #selectedValue {font-size: 12px; }
    .filter-wrapper .filter-bar {padding: 9px; gap: 0; justify-content: center; max-width: 351px;}
    .filter-wrapper .filter-arrow{width: 9px; height: 9px; position: relative; top: -1px;}
    .filter-wrapper .filter-dropdown{top: 153%;}

}

@media screen and (max-width: 567px){ 
    .amenities-map .col {flex: 50%;}
   .amenities-map .col a{font-size: 12px;}
}

@media screen and (max-width: 360px){ 
   .accordionHomes .accordion-button{font-size: 26px;}
   .accordionHomes .home-wrapper .fs-36{font-size: 22px;}
   .accordionHomes .home-wrapper .btn-view-fp{font-size: 13px;}

}


#btnwrapper {display: flex; align-items: center; justify-content: center;}
#btnwrapper #btn-basement{order: 3;}

#btnwrapper #btn-second-floor{order: 2;}
#btnwrapper #btn-loft{order: 2;}

#btnwrapper #btn-ground-floor{order: 1;}
#btnwrapper #btn-main-floor{order: 1;}

@media screen and (max-width: 767px){ 
    #btnwrapper{flex-direction: column;}
}