:root {
  --brand: #6CB2C2;
  --brand2: #FAFBFD;
  --brand3: #b25d5b;
  


}

@font-face {
    font-family: 'Fontspring';
    src: url('fonts/Fontspring-DEMO-juanaalt-extralight.otf') format('opentype');
    font-weight: 200;
}








html{
    scroll-behavior: smooth;
}
body{
    font-family: "Inter", sans-serif;
    font-size: 18px; 
    font-optical-sizing: auto;
    color: #A2A2A2;
    font-weight: 400;
    background-color: var(--brand2);
    padding-top: 125px;
}



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-900{font-weight: 900;}



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

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


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

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


.bg-brand{background-color: var(--brand);}

.text-brand{color:var(--brand)!important;}
.text-black{color:#000!important;}

.btn-brand{background-color: var(--brand); border:none; border-radius: 51px ; display: inline-block;  transition: all 0.32s ease-out; color: #FFF; font-weight: 700; font-size: 22px; padding: 15px 31px; letter-spacing: 1.5px; }
.btn-brand:hover{background-color: var(--brand3); color: #FFF!important;}

.btn-submit{background-color: #000; font-size: 13px; letter-spacing: 1.2px;}
.btn-submit:hover{background-color: var(--brand2); color: var(--brand)!important;}



.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(1.1);
    cursor: pointer;
}

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




/* Navigation */
#topNavigation{background-color: var(--brand2);}
#topNavigation .nav-link{padding: 9px 27px;}
#topNavigation .nav-link.active{color: #FFF;}
/* Keep links above a wide logo on md/lg so the first link (Gallery) stays clickable */
#topNavigation > .container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}
#topNavigation > .container > a:first-of-type{
    flex-shrink: 1;
    min-width: 0;
    max-width: min(472px, 52vw);
    position: relative;
    z-index: 1;
}
#topNavigation .navbar-collapse{
    position: relative;
    z-index: 2;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}

/* Teal “outline” hamburger (lines match brand), used on mobile next to Register */
#topNavigation .navbar-toggler-bars{
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    position: relative;
    z-index: 1051;
}
#topNavigation .navbar-toggler-bars:focus,
#topNavigation .navbar-toggler-bars:active{
    outline: none;
    box-shadow: none;
}
#topNavigation .navbar-toggler-bars-icon{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
}
#topNavigation .navbar-toggler-bar{
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background-color: var(--brand);
}

@media screen and (max-width: 767px){
    #topNavigation .navbar-collapse{
        flex-basis: 100%;
        width: 100%;
    }
    #topNavigation .nav-register-mobile.btn-brand{
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.1px;
        padding: 10px 16px;
        border-radius: 999px;
        line-height: 1.2;
    }
    #topNavigation .navbar-nav .nav-link.text-black{
        color: #fff !important;
    }

    /* Was top:0 + short height: first nav item sat under fixed bar → Gallery not clickable */
    #topNavigation .navbar-nav{
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        top: 65px;
        min-height: 160px;
        height: auto;
        padding: 20px 16px 24px;
        box-sizing: border-box;
        background: var(--brand);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
        z-index: 1040;
}
      #topNavigation .navbar-nav .btn-brand{border: 1px solid #FFF;}
    }


.hero-text{
    color: #6CB2C2;
    font-family: "Fontspring";
    font-size: 86.602px;
    font-style: normal;
    font-weight: 280;
    line-height: 88.46px; /* 102.145% */
    text-transform: uppercase;
}

.hero-text2{
    color: #6CB2C2;
    font-family: "Fontspring";
    font-size: 86.602px;
    font-style: normal;
    font-weight: 280;
    line-height: 88.46px; /* 102.145% */
    text-transform: uppercase;
}

.hero-subtext{
    color: #5A5752;
    font-family: Inter;
    font-size: 27.206px;
    font-weight: 200;
    line-height: 56.632px; /* 208.157% */
    letter-spacing: 4.625px;
    text-transform: uppercase;
}
.hero-subtext2{
 color: #5A5752;
font-family: Inter;
font-size: 23.563px;
font-style: normal;
font-weight: 600;
line-height: 34.335px; /* 145.713% */
letter-spacing: 4.006px;
text-transform: uppercase;  
}

.hero-subtext3{
   color: #6CB2C2;
font-family: "Fontspring";
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 55.7px; /* 185.667% */
text-transform: uppercase;
}

.img-nav-logo{width: 472px;}

.footer-text{font-size: 14px; color: #2D2D2D; font-weight: 300; line-height: 22px;}
.map-link {color: #FFF;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 23.496px; /* 146.823% */
letter-spacing: 2.4px;
text-transform: uppercase;
}
.map-link:hover{color: var(--brand2);}

.register-heading{color: #FFF;
    font-family: "Fontspring";
    font-size: 65.37px;
    font-style: normal;
    font-weight: 200;
    line-height: 49.628px; /* 102.601% */
    text-transform: uppercase;
}
#amm-cards-wrapper{
    text-align: center;
    margin-bottom: 18px;

    border: none;
    
    
}
 #amm-cards-wrapper .col{margin-bottom: 27px;}
#amm-cards-wrapper .img-ammenities{ width: 270px;margin: 0 auto;}
 #amm-cards-wrapper .card{padding: 0; box-shadow: 0.863px 2.59px 1.727px 0 rgba(0, 0, 0, 0.25); border: none; border-color: transparent;  padding: 54px 36px 36px;} 
 #amm-cards-wrapper .card-footer{background: transparent; border-radius: 0; border: none; border-color: transparent; padding-bottom: 27px; padding-left: 0; padding-right: 0;} 
 #amm-cards-wrapper .card-body{padding: 0;} 

.amm-details h3{
    color: #5A5752;
    font-size: 22.214px;
    font-weight: 500;
    line-height: 31.772px; /* 143.024% */
    letter-spacing: 3.332px;
    text-transform: uppercase;
}

.amm-details p{
    color: #000;
    font-size: 18px;
    font-weight: 300;
    line-height: 38px; /* 211.111% */
}
#ammDetailsModal .modal-content{
    border-radius: 0;
}

.amm-title{
    color: #5A5752;
    font-size: 20.68px;
    font-style: normal;
    font-weight: 800;

    text-transform: uppercase;
}
.amm-num{
    font-size: 47.68px;
    font-weight: 800;

}
.amm-subtitle{
   color: #5A5752;
    font-size: 22.214px;
    font-weight: 500;
    line-height: 31.772px; /* 143.024% */
    letter-spacing: 3.332px;
    text-transform: uppercase; 
}
.btn-learn-more{
    font-weight: 300;
    font-size: 14.301px;
    padding: 7.071px;
    align-items: center;
    color: #231F20;
    border: 1px solid #000;
    border-radius: 26px;
    padding: 9px 27px;
    letter-spacing: 1.43px;
}
.btn-learn-more:hover{
    color: #fff;
    background-color: #231F20;
}

.bdr-tr{border-top-right-radius: 90px;}
.bdr-tl{border-top-left-radius: 90px;}
.bdr-br{border-bottom-right-radius: 90px;}
.bdr-bl{border-bottom-left-radius: 90px;}


#registrationForm .form-control,
#spark-registration-form .form-control{color: #fff;border-radius: 0; border: 1px solid #FFF; margin-bottom: 27px; background-color: transparent;}
#spark-registration-form .form-control:focus,
#spark-registration-form input:focus,
#spark-registration-form select:focus,
#spark-registration-form textarea:focus{
    outline: none !important;
    box-shadow: none !important;
    border-color: #FFF;
}
#spark-registration-form label{color: #FFF;}
#registrationForm .form-control::placeholder,
#spark-registration-form .form-control::placeholder { color: #FFF; opacity: 1; }
#spark-registration-form input::placeholder,
#spark-registration-form textarea::placeholder { color: #FFF; opacity: 1; }
#registrationForm .form-control:-ms-input-placeholder,
#spark-registration-form .form-control:-ms-input-placeholder { color: #FFF;}
#spark-registration-form input:-ms-input-placeholder,
#spark-registration-form textarea:-ms-input-placeholder { color: #FFF; }
#registrationForm .form-control::-ms-input-placeholder,
#spark-registration-form .form-control::-ms-input-placeholder { color: #FFF;}
#spark-registration-form input::-ms-input-placeholder,
#spark-registration-form textarea::-ms-input-placeholder { color: #FFF; }
#registrationForm  select,
#spark-registration-form  select {
    display: block;
   line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    color: #FFF;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='13' viewBox='0 0 24 12' fill='none'%3E%3Cg clip-path='url(%23clip0_592_4752)'%3E%3Cpath d='M17.4198 2.45199L18.4798 3.51299L12.7028 9.29199C12.6102 9.38514 12.5001 9.45907 12.3789 9.50952C12.2576 9.55997 12.1276 9.58594 11.9963 9.58594C11.8649 9.58594 11.7349 9.55997 11.6137 9.50952C11.4924 9.45907 11.3823 9.38514 11.2898 9.29199L5.50977 3.51299L6.56977 2.45299L11.9948 7.87699L17.4198 2.45199Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_592_4752'%3E%3Crect width='12' height='24' fill='white' transform='translate(24 1.04907e-06) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: 1.65em auto, 100%;
}
#registrationForm  select  option,
#spark-registration-form  select  option{background-color: var(--brand); color: #FFF; border: 1px solid #FFF;}

#spark-registration-form .grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
}

#spark-registration-form .form-item{
    margin-bottom: 0;
}

#spark-registration-form .answers.row{
    margin-left: 0;
    margin-right: 0;
}

#spark-registration-form .multi-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#spark-registration-form .answer.checkbox{
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 4px;
    padding: 10px 14px;
}

#spark-registration-form .answer.checkbox input[type="checkbox"]{
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #FFF;
    background: transparent;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
}

#spark-registration-form .answer.checkbox input[type="checkbox"]:checked::after{
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#spark-registration-form .answer.checkbox label{
    margin: 0;
    cursor: pointer;
}

#spark-registration-form .answer.checkbox label span{
    color: #FFF;
    font-weight: 400;
}

#spark-registration-form .answer-other{
    margin-top: 10px;
}

@media screen and (max-width: 767px){
    #spark-registration-form .grid{
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.disclaimer{color: #FFF; font-size: 9px; font-weight: 300; line-height: 16px; margin-bottom: 0;}



.info-box {
    position: absolute;
    z-index: 999;
    background: #FFF;
    padding: 9px 18px;
    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);
    pointer-events: none;
}

.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;
}


@media screen and (max-width: 767px){ 
    body{padding-top: 50px;}
    .img-nav-logo{width: 185px;}
    .register-heading{font-size:40px;}
    .amm-details h3{font-size: 18px; line-height: 27px; letter-spacing: 2.5px;}
    .amm-details p{font-size: 16px; line-height: 27px;}
 }


@media screen and (max-width: 378px){ 
    .img-nav-logo{width: 216px;}
    .hero-text{font-size: 65px; line-height: 63px;}
    .hero-text2{font-size: 30px; line-height: 44px;}
    .hero-subtext{font-size: 24px; line-height: 40px;}
    .hero-subtext3{font-size: 22px; line-height: 40px;}

    .register-heading{font-size: 27px; line-height: 36px;}
 }

/* Gallery page */
/* .gallery-page{
    background: #ECEDEF;
} */
.gallery-wrap{
    padding-bottom: 70px;
}
.gallery-title{
    color: #5A5752;
    font-family: "Fontspring", serif;
    font-size: clamp(54px, 8vw, 112px);
    font-weight: 200;
    line-height: .95;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.gallery-section-title{
    color: var(--brand);
    font-family: "Fontspring", serif;
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 200;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 18px 0 16px;
    border-top: 1px solid rgba(108, 178, 194, 0.45);
}
.gallery-divider{
    height: 18px;
}
.gallery-carousel{
    position: relative;
}
.gallery-image{
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: center;
}
.gallery-control{
    width: 58px;
    height: 58px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--brand);
    opacity: 1;
}
.gallery-control.carousel-control-prev{
    left: 20px;
}
.gallery-control.carousel-control-next{
    right: 20px;
}
.gallery-control .carousel-control-prev-icon,
.gallery-control .carousel-control-next-icon{
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
}

@media screen and (max-width: 991px){
    .hero-text2{
        font-size: 55.602px;
    }

    .gallery-control{
        width: 48px;
        height: 48px;
    }
    .gallery-control.carousel-control-prev{
        left: 12px;
    }
    .gallery-control.carousel-control-next{
        right: 12px;
    }
}

@media screen and (max-width: 767px){
    .gallery-wrap{
        padding-bottom: 40px;
    }
    .gallery-image{
        aspect-ratio: 4 / 3;
    }
}

/* Home / hero — Neighbourhood-style headline (index header) */
.home-neighbourhood-heading{
    max-width: 100%;
}
.home-neighbourhood-title{
    color: #5A5752;
    font-family: "Fontspring", serif;
    font-size: clamp(42px, 5.5vw, 96px);
    font-weight: 200;
    line-height: 1.05;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35em;
}
.home-neighbourhood-subtitle{
    color: #5A5752;
    font-family: "Inter", sans-serif;
    font-size: clamp(13px, 1.65vw, 20px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    max-width: 52rem;
}

.neighbourhood-page-intro{
    background-color: #F9F9F9;
    padding: 1.5rem 1.25rem 2rem;
    border-radius: 0;
}
@media screen and (min-width: 768px){
    .neighbourhood-page-intro{
        background-color: transparent;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Neighbourhood map (inline circle.svg) */
.neighbourhood-map{
    overflow: hidden;
}

.neighbourhood-map svg#areaMap{
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    margin-top: -72px;
    margin-bottom: -72px;
}

@media screen and (max-width: 767px){
    .neighbourhood-map svg#areaMap{
        margin-top: -34px;
        margin-bottom: -34px;
    }
}

.neighbourhood-map svg#areaMap .map-circle,
.neighbourhood-map svg#areaMap .map-magnifier,
.neighbourhood-map svg#areaMap .map-magnifier-icon{
    transform-origin: center;
    transform-box: fill-box;
}

.neighbourhood-map svg#areaMap.animate-in .map-circle{
    animation: circlePopIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.neighbourhood-map svg#areaMap .map-magnifier,
.neighbourhood-map svg#areaMap .map-magnifier-icon{
    opacity: 0;
    transform: scale(0.65);
}

.neighbourhood-map svg#areaMap.animate-in .map-magnifier,
.neighbourhood-map svg#areaMap.animate-in .map-magnifier-icon{
    animation: magnifierPopIn 360ms ease-out both;
}

.neighbourhood-map svg#areaMap.is-ready .map-magnifier,
.neighbourhood-map svg#areaMap.is-ready .map-magnifier-icon{
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.neighbourhood-map svg#areaMap.is-ready .map-magnifier:hover,
.neighbourhood-map svg#areaMap.is-ready .map-magnifier-icon:hover{
    transform: scale(1.08);
    filter: brightness(1.05);
}

.neighbourhood-map svg#areaMap .map-magnifier-icon{
    pointer-events: none;
}

.info-box .map-info-preview{
    min-width: 220px;
    max-width: 260px;
    text-align: left;
}

.info-box .map-info-preview img{
    width: 100%;
    border-radius: 8px;
    margin-bottom: 8px;
    display: block;
}

.info-box .map-info-preview p{
    margin: 0;
    color: #5A5752;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

@keyframes circlePopIn{
    0%{
        opacity: 0;
        transform: scale(0);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes magnifierPopIn{
    0%{
        opacity: 0;
        transform: scale(0.65);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}