*{
    margin: 0;
    padding: 0;
}
@font-face {
  font-family: Inter;
  src: url(fonts/inter.ttf);
}
body {
    scroll-behavior: smooth; /* For smooth scrolling when navigating to sections */
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: #1D1D1B;
    letter-spacing: 0px;
}
.scroll-container {
  scroll-snap-type: y mandatory; /* For vertical, mandatory snapping */
  overflow-y: scroll; /* Enable vertical scrolling */
  height: 100vh; /* Example: full viewport height */
}
.snap-section {
  scroll-snap-align: start; /* Snap to the start of the element */
  height: 100vh; /* Example: each section takes full viewport height */
}


#navlogo {transition: opacity 0.25s ease;}
.xxxnavbar{background:#f4f0e9 !important;opacity:1.0;padding:6px;}
.nav-item{padding:0px 15px;font-weight:500;font-size:13px;}
.nav-link{color:#5a2a18;}
.nav-link:hover {color:#e7232f;}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }


.navbar-custom {
    background-color: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* After scroll */
.navbar-custom.scrolled {
    background-color: #f4f0e9; /* change color if needed */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    color:#5a2a18;
}

/* Optional: link color control */
.navbar-custom .nav-link {
    color: #fff;
}

.navbar-custom.scrolled .nav-link {
    color: #5a2a18;
}
.fullscreen-video {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;     /* KEY: crop to fill screen */
    z-index: 2;           /* behind content */
}



.bg-brown{background: #7e5441; color:#fff;}
.bg-lightbrown{background: #ad8f75; color:#fff;}
.bg-darkbrown{background: #331817; color:#fff;}
.bg-white{background: #fff;color:#525252;}

h1{font-family: ivypresto-display, serif; font-size:60px;font-weight:400;line-height: 1.2em;}
h2{font-family: ivypresto-display, serif; font-size:40px;font-weight:400;line-height: 1.2em;}
h2 span{font-size:30px;font-style: italic;}
h3{font-family: ivypresto-display, serif; font-size:32px;font-weight:400;line-height: 1.2em;}
h4{font-family: Inter, sans-serif !important;font-size: 16px; font-weight: 300; line-height: 1.4em;}
h4 span{font-size: 30px; font-weight: 600; line-height: 1.4em;}
h5{font-size: 18px; font-weight: 300; line-height: 1.4em;}
p{margin:0px;}
p.title{font-size:28px;font-weight: 500;color:#E36865;line-height:1.2em;}
.contentpadding{padding:80px 0px;}

#header{
    background: url(img/header.jpg) no-repeat center top; 
    background-size: cover;
    color:#fff;
    }
#concept01{
    background: url(img/concept01-bg2.jpg) no-repeat center bottom; 
    background-size: 100%;
    color:#fff;
    }
#concept02{
    background: url(img/concept02-bg2.jpg) no-repeat center top; 
    background-size: 100%;
    color:#fff;
    }
#cn-concept02{
    background: url(img/cn-concept02-bg.jpg?22) no-repeat center top; 
    background-size: 100%;
    color:#fff;
    }
#concept03{
    background: #fff; 
    background-size: 100%;
    color:#525252;
    padding-top:80px;
    }
.riseimg{
    width:80%;
}
#concept04{
    background: #ac8e74 url(img/concept04-bg.jpg) no-repeat center bottom; 
    background-size: 100%;
    color:#fff;
    padding-top:80px;
    }
.amenitiesimg{
    width:230px;
    }
#concept05{
    background: #faf5f1;
    background-size: 100%;
    color:#525252;
    }
.usp{width:100px;}
.usp-title{font-size:13px;font-weight:700;padding-top:15px;line-height:1.2em;}
.usp-text{font-size:11px;font-weight:300;padding-top:8px;}
.usp-title-cn{font-size:18px;font-weight:700;padding-top:15px;line-height:1.2em;}
.usp-text-cn{font-size:14px;font-weight:300;padding-top:8px;}
#meidavideo{
    background: #25160f;
    background-size: 100%;
    color:#525252;
    }
.meidavideoimg{width:700px;}
#gallery{
    background:#7E5441;
    background-size: 100%;
    color:#fff;
    padding-top: 80px;
    }
#gallery2{
    background:#7E5441;
    background-size: 100%;
    color:#fff;
    padding-top: 80px;
    }
.galleryimg{
    height:50vh;;
}
#plans{
    background: #e1d9d1;
    background-size: 100%;
    color:#444444;
    padding-top:60px;
    }
.plansimg{height:60vh;}
#floorplan1{
    background: #80766f;
    padding-top:60px;
    color:#fff;
    }
.floorplan1img{width:700px;}
#floorplan2{
    background: #ac8e75 url(img/floorplan-bg.jpg) center top;
    padding-top:60px;
    color:#fff;
    }
.floorplanimg{
    height:50vh;
}
#location{
    background: #d8d5d2;
    background-size: 100%;
    color:#525252;
    }
.location-title{
    font-family: Inter, sans-serif; 
    font-size: 20px; 
    font-weight: 600; 
    letter-spacing: 2px;
    }
.locationmapimg{width:80%; padding:0px;}
.locationmrt{width:100%; padding:30px 0px;}


#location1{
    background: #7d533f url(img/v2-location-bg1.jpg) center top;
    background-size: 100%;
    padding-top:60px;
    color:#fff;
}
.locationmap1{height:60vh;}
#location2{
    background: #7d533f url(img/v2-location-bg2.jpg) center top;
    background-size: 100%;
    padding-top:60px;
    color:#fff;
}
.locationmap2{height:55vh;}

#siteprogress{
    background: #e5e3e1 url(img/siteprogress-bg.jpg) center bottom;
    background-size: 100%;
    padding-top:60px;
    color:#444;
    }
.siteprogressimg{width:700px;}
#articles{
    background: #d1cbc3;
    padding-top:60px;
    color:#444;
    }
.btn-articles,
.btn-articles:hover,
.btn-articles:active,
.btn-articles:visited,
.btn-articles:focus {
    
    background-color: #ad8f75;
    border-color: #ad8f75;
    color: #fff;
    margin:0px;
}
.btn-articles:hover{
    background-color: #7f6958;
    border-color: #7f6958;
    color: #fff;
}

#developer{
    background: #e5e3e1 url(img/developer-bg.jpg) center bottom;
    background-size: 100%;
    padding-top:60px;
    color:#444;
    }
.developerlogo{width:400px;}
#developer2{
    background: #e0d5cd;
    padding-top:60px;
    color:#444;
    }
.developer2title{text-align: center;font-family: ivypresto-display, serif; font-size:22px;font-weight:400;line-height: 1.2em;}
.developer2text{text-align: justify;}

.accordion-button{padding:10px 20px !important; background-color: #e4e2df; color:#7d7c7a;}
.accordion-button:not(.collapsed) {background-color: #c8c0b8; color: #fff;}
.accordion-item{border-color: #c8c0b8 !important;}

#the360vr{
    background: url(img/v2-360vr.jpg) no-repeat center top; 
    background-size: 100%;
    color:#fff;
    }
.the360vrbtn{
    width:100px;
}
#propertypals{
    background:#f2d2c3;
    padding:0px;
}
.propertypluslogo{width:100%;}
.propertypals-text{font-size: 12px;color:#231f20;line-height: 1.2em;}
.propertypals-title{font-size: 18px;color:#231f20;line-height: 1.2em;font-weight:700;}
.propertypals-logo{width:440px;}
.propertypals-more{width:200px;}
.propertyplus-icons{width:500px;}
.propertyplus2025-btn{width:150px;}

#register{
    background: #5a2a19;
}
/*--------------------- Forms -------------------------*/
.form-control{font-family: Inter, sans-serif; font-weight: 300; font-size: 14px;}
.mainform{padding:14px 0px;}
.form-check-label{font-family: Inter, sans-serif;font-size: 11px !important;color: #fff !important;}
.form-check-label a{font-family: Inter, sans-serif;font-size: 11px !important;color: #fff !important;text-decoration: underline;}
.form-check-label a:hover{color: #000 !important;text-decoration: underline;}
input[type="text"], select, textarea{
    font-size: 14px !important;
    border: none !important;
    outline: none !important;
    border-bottom: 1px solid #AE9075 !important;
    background: #5a2a19 !important;
    color: #AE9075 !important;
    border-radius:0px !important;
    padding:14px 0px;
    margin:8px;}
input::placeholder, textarea::placeholder {color: #AE9075 !important;}
.error_strings{font-size: 12px;color:#ffffff;font-weight: 300;text-align: left;padding-left:10px;}

.btn-register,
.btn-register:hover,
.btn-register:active,
.btn-register:visited,
.btn-register:focus {
    
    font-family: Inter, sans-serif;
    letter-spacing: 4px;
    background-color: #5a2a19;
    border-color: #fff;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    border-radius: 10px;
    padding:10px 10px 10px 10px;
    margin:0px;
}
.btn-register:hover{
    background-color: #975c53;
    border-color: #975c53;
    color: #fff;
}
.splide__pagination {
  bottom: -1rem;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: #444; /* Your desired background color */
}
.plans, .plans:hover {
    color: #444;
}
.videoembeded{width:40vw; margin:0 auto;}


@media only screen and (max-width: 600px) {
    
    .scroll-container {
      scroll-snap-type: y mandatory; /* For vertical, mandatory snapping */
      overflow-y: scroll; /* Enable vertical scrolling */
      height: 90vh; /* Example: full viewport height */
    }
    .snap-section {
      scroll-snap-align: start; /* Snap to the start of the element */
      height: 90vh; /* Example: each section takes full viewport height */
    }
.navbar-toggler {
    border: none;
    box-shadow: none;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
    outline: none;
    box-shadow: none;
}

    h2{font-family: ivypresto-display, serif; font-size:28px;font-weight:400;line-height: 1.2em;}
    h2 span{font-size:30px;font-style: italic;}
    #header{
        background: url(img/v2-header@m.jpg) no-repeat center top; 
        background-size: cover;
        color:#fff;
        }
    #concept01{
        background: url(img/v2-concept01-bg@m.jpg) no-repeat center top; 
        background-size: 100%;
        color:#fff;
        }
    .riseimg{width:100%;}
    .amenitiesimg{width:150px;}
    .usp{width:100px;}
    .usp-title{font-size:14px;font-weight:700;}
    .usp-text{font-size:12px;font-weight:400;}
    .locationmapimg{width:90%; padding-top:10px;}
    .meidavideoimg{width:100%;}
    .developerlogo{width:100%;}
    .mainform{padding:2px 0px;}
    input[type="text"], select, textarea{
        border-radius:0px !important;
        padding:2px 0px;
        margin:8px;
    }
    
    
    #the360vr{
        background: url(img/v2-360vr@m.jpg) no-repeat center center; 
        background-size: cover;
        color:#fff;
        }
    .the360vrbtn{
        width:100px;
    }
    #propertypals{
    background:url(img/v2-propertypals-bg@m.jpg) no-repeat center top;
    background-size: cover;
    padding:0px;
    }
    .propertyplus-icons{width:90%;}
    .tiny{font-size: 10px;margin-bottom: 0px;font-weight: 300;line-height: 1em;}
    .plansimg{width:100%;height:100%}
    .floorplan1img{width:100%;}
    .locationmap1{width:100%;height:100%;}
    .locationmap2{width:90%;height:90%;}
    #location2{
        background: #7d533f url(img/v2-location-bg2-mobile.jpg) no-repeat center bottom;
        background-size: 100%;
        color:#fff;
    }
    .siteprogressimg{width:100%;height:100%;}
    #developer{
    background: #fff url(img/developer-bg-mobile.jpg) no-repeat center bottom;
    background-size: 100%;
    color:#444;
    }
    .videoembeded{width:80vw; margin:0 auto;}


}