/* fonts */
@font-face {font-family: "popins";font-display: swap;src: url("../fonts/popins/Poppins-Regular.ttf");}
@font-face {font-family: "popins_bold";font-display: swap;src: url("../fonts/popins/Poppins-SemiBold.ttf");}
@font-face {font-family: "NovaSquare";font-display: swap;src: url("../fonts/Montserrat/Montserrat-Regular.ttf");}
:root{
  /* Updated dark theme palette inspired by the Mana logo */
  --black:#0e0e0e; /* deep black background */
  /* Adjusted palette for a more luxurious gold appearance */
  --darkblue:#9F7A41; /* rich bronze accent */
  --darkblue1:#B38853; /* complementary bronze tone */
  --lightblue:#141414; /* deep charcoal for subtle backgrounds */
  --yellow:#D6B46D; /* primary accent (gold) for headings and highlights */
  --white:#FFFFFF; /* bright white for text */
  --slaty:#B8966D; /* muted gold accent */
  --slaty_1:#615D56; /* supporting neutral tone */
  --transition: all 0.4s ease-in-out;
  --shadow:0px 4px 63px 0px rgba(15, 28, 51, 0.10);
  --shadow_1:0 10px 20px rgb(24 19 19 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
}
img{max-width: 100%;}
body {counter-reset: section; font-size: 15px;}
figure{margin: 0;}
* {scrollbar-width: auto;scrollbar-color: var(--black) #ffffff;}
*::-webkit-scrollbar {width: 10px;}
*::-webkit-scrollbar-track {background: var(--black);}
*::-webkit-scrollbar-thumb {background-color: var(--darkblue);border-radius: 2px;border: 5px solid transparent;}
/*default Css Start Here*/
body, p, h1, h2, h3, h4, h5, h6, ul, li{margin:0px;padding:0;}
*{text-decoration: none; outline: none; border: 0;font-family: "popins"; list-style: none; letter-spacing: 0.4px;}
button:focus{outline: 0;}
a:hover{text-decoration: none; outline: none; color: inherit;}
button{cursor: pointer;}
/*default Css End Here*/
.NovaSquareFont{font-family: "NovaSquare";}
.popinsBoldFont{font-family: "popins_bold";}
.appbtn{padding: 11px 20px;color: var(--white);font-weight: 600;display: inline-block;font-size: 14px;transition: var(--transition);letter-spacing: 2px;text-transform: capitalize;border-radius: 5px;}
.gradient{
  /* Apply a rich static gradient to call‑to‑action buttons for a more luxurious feel */
  background-image: linear-gradient(90deg, var(--darkblue) 0%, var(--yellow) 50%, var(--darkblue) 100%);
  color: var(--white);
  box-shadow: 0 0 10px rgba(214, 180, 109, 0.5);
}
.overlay.active {background: rgba(0, 0, 0, 0.8);position: fixed;display: block;width: 100%;height: 100%;z-index: 8;left: 0;top: 0;opacity: 70%;-webkit-transition: var(--transition);transition: var(--transition);}
.container{max-width: 1250px; margin: 0 auto;}
/*Navbar Codes Start From Here*/
.AppHeader{background: var(--white);transition: var(--transition);}
.HeaderFixed{position: fixed; left: 0; right: 0; top: 0; z-index: 9; box-shadow: 0px 3px 6px rgba(0,0,0,0.16);}
.logo{z-index: 1;padding: 0px 12px 0px 22px;}
.AppNavbar .navlinks{font-size: 16px;color: #000;display: block;padding: 30px 25px;transition: all 0.2s ease;font-family: "popins_bold";position: relative;padding-left: 22px;}
.AppNavbar .navlinks::after{position: absolute;height: 4px;width: 0%;left: 50%;transform: translate(-50%, 0);transition: var(--transition);}
.AppNavbar .navlinks.active::after, .AppNavbar a:hover::after{width: 70%;}
.headrConNo{color: var(--white);gap: 0 15px;padding: 13px 25px; margin-left: 25px;
    &:hover{color: var(--white);}
}
.headrConNo .texthelp{font-size: 18px; color: var(--black); font-weight: 600;}
.headrConNo .text{font-size: 23px;color: var(--black); font-weight: 600;}
.headrConNo .callsvg{animation: rotateSvg 2s infinite;width: 32px;}
.logo-absolute{position: absolute;left: 0;top: 0;z-index: 9;  border-radius: 0 0 8px 0; display: block;}
.logo-absolute img{height: 121px; padding-left: 15px;}
@keyframes arrow-know-more {
    from{transform: translateX(-50%);}
    to{transform: translateX(0);}
}
.form-over-banner{position: absolute; z-index: 5; bottom: 5%; left: 0; right: 0; max-width: 1200px; margin: 0 auto; 
    .flex-row{background: #ffffffdb; padding: 17px; border-radius: 4px;}
    .col-div{width: 21%;}
    .btn-div{width: 12%;
        .appbtn{padding: 12px;width: 100%;}
    }
    input{background: transparent; border: 1px solid ; padding: 10px 15px; border-radius: 4px;}
    .form-name{font-size: 24px; margin-bottom: 15px;}
}
.book-and-get-details{background: var(--black); padding: 15px 0;}
.overview-and-highlights{
    .head{margin-bottom: 15px;}
    .heading{font-size: 52px;
        margin-bottom: 10px;
        font-weight: 600;}
        .address{color: #000; font-weight: 600;}
    }
    .highligts-flex-div{
        .listing{
            li{padding: 11px 0; border-bottom: 1px solid var(--yellow); font-size: 14px;font-weight: 500;}
            span{color: var(--yellow); padding-right: 8px;}
        }
    }
    .site-interested-section{
        .heading{font-size: 40px; font-weight: 600;}
        .in-box{padding: 10px 15px; margin-bottom: 15px; border-radius: 4px;}
        .title{margin-bottom: 15px; display: block; font-size: 20px;}
    }
    .prv-and-next-btns{position: absolute;display: flex;justify-content: space-between;width: 100%;bottom: 48%; z-index: 2;}
    .content-over-banner {position: absolute;top: 50%;transform: translateY(-50%);left: 11%;right: 0;z-index: 5;width: fit-content;color: var(--white);text-align: left;
        .typology {margin: 15px 0;
            span{display: block;font-size: 26px;margin-top: 15px;}
        }
    }
    .bannerForm {position: absolute;z-index: 2;top: 50%;right: 10%;transform: translateY(-50%);width: 21%;padding: 17px;border-radius: 5px;background-color: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);}
    .bannerForm .heading {font-size: 23px;margin-bottom: 10px;padding: 8px 2px;border-radius: 4px;width: 100%;gap: 0 8px;color: #fff;}
    .bannerForm .flexdiv {flex-wrap: wrap;}
    .bannerForm .flexdiv .inputbox {width: 100%;}
    .bannerForm .flexdiv .inputbox .custom-select{background: none;border-bottom: 1px solid rgba(255, 255, 255, 0.4);border-top: none;border-right: none;border-left: none;}
    .bannerForm .flexdiv input::placeholder{color: #fff;}
    .bannerForm .flexdiv input {
        background-color: #00000000 !important;
        margin-bottom: 5px;
        border-radius: 0px;
        min-height: 38px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        padding: .375rem 1.75rem .375rem .75rem;
        color: #fff;
        letter-spacing: 0.8px;
        font-weight: 400 !important;
    }
    .bannerSection::after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 100%; width: 100%; background: #00000087; z-index: 1;}
    .bannerForm .appbtn {width: 100%;margin: 0 0 0 auto;
        .project-name-box{margin-bottom: 15px;}
        .projectname{font-size: 60px;font-weight: 600;letter-spacing: 3px;text-transform: uppercase; margin-bottom: 8px;}
        .address{font-size: 24px; margin-top: 15px;
            img{height: 24px;}
        }
        .typology span{display: block;font-size: 26px;margin-top: 15px;}
        .typology{font-size: 26px; margin-top: 15px;}     
        .appbtn{margin-top: 15px;
            img{animation: arrow-know-more 2s infinite;}
        }
    }
    .gradient {
        /* Luxury gradient: deep charcoal to warm gold hues */
        background-color: var(--darkblue);
        text-shadow: 0 3px 6px #2d211a;
        background: linear-gradient(-45deg, #1a1a1a, #5a4432, #1a1a1a, #4d3a1a);
        background-size: 400% 400%;
    }
/*Slider And From Codes End From Here*/
.patch-images {position: absolute;bottom: 15%;left: 45%;width: 15%;z-index: 99;}
.properties_section {padding: 50px 0;}
.properties_section .flexdiv{gap: 38px 0;     padding: 10px;}
.properties_section .proj-heading{font-size: 42px;margin-bottom: 0px;color: #000;text-transform: uppercase;}
.properties_section .inner-col{box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;padding: 0;}
.properties_section .cotnetdiv{padding: 15px;text-align: center;}
.properties_section .pro-add{font-size: 18px;margin-bottom: 4px;}
.properties_section .pro-name{font-size: 20px;color: #ffffff;font-weight: 600;/* border-bottom: 1px solid #e5e5e5; */padding-bottom: 5px;}
.properties_section .proj-typology{display: block;margin: 10px 0;/* width: fit-content; */background: #ffffff;font-weight: 600;font-size: 18px;padding: 6px 10px;border-radius: 8px 0 8px 0;color: #000;}
.properties_section .pro-price{margin-bottom: 15px;font-size: 21px;margin-top: 15px;}
.properties_section .btnsdiv .appbtn{display: block;padding: 8px 17px;font-size: 15px;}
.properties_section .stickydiv{position: absolute;top: -39px;left: -33px;}
.section-amenities{
    .head{margin-bottom: 15px;}
    .title{font-size: 24px;color: var(--yellow);font-weight: 600; margin-bottom: 8px;}
    .heading{font-size: 29px;}
    li{padding: 14px 0;font-size: 18px;font-weight: 600;} 
}
.section-amenities{
    .flex-div{
        li{
            justify-content: center;
            img{
                width: 24px;
                height: 24px;
                
            }}
        }
    }
    .section-floor-plan{
        .head{margin-bottom: 15px;}
        .title{font-size: 24px;color: var(--yellow);font-weight: 600; margin-bottom: 8px;}
        .heading{font-size: 29px;}
        .plan-img-div{        
            img{max-height: 300px;}
        }
        .typology{font-size: 18px;font-weight: 600;}
    }
    .section-gallery{text-align: center;
        .head{margin-bottom: 15px;}
        .title{font-size: 24px;color: var(--yellow);font-weight: 600; margin-bottom: 8px;}
        .heading{font-size: 29px;}
        .flex-div{gap: 30px 0;}
    }
    .decision_corner{padding: 50px 0; background-image: linear-gradient(to bottom, #f9f5ef, #d3c7b5a8);
        figure{
            img{width: 80%;}
        }
        .Heading{ font-size: 40px; margin-bottom: 8px;}
        .sub_heading{font-size: 20px; font-weight: 600; margin-bottom: 15px;}
        .flex_div{justify-content: center;}
        .boxes{padding: 0 15px;
            &:first-child{border-right: 1px solid #aa8b6c;}
        }
        .title{font-size: 17px; margin-bottom: 8px; display: block; font-weight: 500; color: #353535;}
    }

    .section-about-developer{text-align: center;
        .heading{font-size: 24px;color: var(--yellow);font-weight: 600; margin-bottom: 8px;}
        .title{font-size: 20px; font-weight: 600;}
        article{padding: 10px;}
    }
    h1.projectname {
        font-size: 52px;
    }
/* Start .sitefooter */
.sitefooter{background: var(--black);padding: 25px 0;color: var(--white);}
.sitefooter .pera{margin-bottom: 10px; font-size: 11px;}
.sitefooter .appbtn{padding: 8px 15px; border-radius: 8px 0; font-size: 14px; width: fit-content; display: flex; margin: 0 auto; margin-bottom: 15px;}
.sitefooter .rera-text{margin-bottom: 8px; gap: 0 15px;}
.sitefooter .rera_no{margin-top: 8px; gap: 15px;}
.sitefooter .gtfdiv {gap: 0 15px;padding-bottom: 8px;font-size: 14px;}
.sitefooter .gtfdiv a{color: #ffffff;}
/* End .sitefooter */
/* mobile-section-footer */
.mobile-section-footer{display: none;position: fixed;left: 0;right: 0;bottom: 0;width: 100%;background: #000000;color: var(--white);padding: 5px 0;}
.mobile-section-footer a{display: block;font-size: 14px;padding: 6px 8px;color: currentColor;border-radius: 5px 0;}
/* .mobile-section-footer a:last-child{ border-right: 0;} */
.fixedIcons{position: fixed; z-index: 5; bottom: 15px; padding: 5px; background: #FFFCF1; border-radius: 50%;animation:pulse 1.25s infinite cubic-bezier(0.66,0,0,1);box-shadow:0 0 0 0 #29a71a;
    img{width: 60px; padding: 5px;}
    &.whatsapp{left: 15px;}
    &.phone{right: 15px; background: #122f27;
        img{filter: invert(1); padding: 10px;}
    }
}
@keyframes pulse {to {box-shadow: 0 0 0 20px rgba(255, 232, 160, 0);}}

/* #customModal */
.modal .modal-content{padding: 0; background: transparent;}
.modal .headerimg img{border-radius: 5px 5px 0 0; width: 100%; object-fit: cover; max-height: 253px;}
.modal .close{position: absolute; top: 5px; right: 5px; background: var(--yellow); opacity: 1; height: 30px; width: 30px; border-radius: 50%; line-height: 33px;
}
.modal-dialog .modal-head{font-size: 28px; font-weight: 600; margin-bottom: 8px;}
.modal .modal-desc{font-size: 19px; color: var(--black);}
.modal .modalhead-div{margin-bottom: 15px;}
.modal .banner-form-section{background: var(--white); padding: 15px;}
.modal .in_box{padding: 10px 0; border-bottom: 1px solid var(--black);}
.modal .flexdiv{margin-bottom: 6px;}
.modal .modal-para{padding-bottom: 10px;font-size: 20px; margin-top: 8px;}
.modal .appbtn{padding: 12px; width: 50%; margin: 0 auto;}
.project-sub-head{font-size: 18px;color: var(--black);padding-top: 10px;}
@media(max-width: 1600px){
  .AppNavbar .navlinks{padding: 30px 10px;}
  .headrConNo{padding: 12px 17px;}
  .bannercontentdiv .projectname {font-size: 41px;}
  .bannerForm {width: 23%;}
}
@media(max-width: 1480px){
    .iti__country-list {max-width: 350px;}
    .content-over-banner {
        .projectname {font-size: 42px;}
        .typology {font-size: 30px;}
    }
    .form-over-banner {bottom: 3%;max-width: 1165px;}
    .container{max-width: 1259px;}    
    .headrConNo {padding: 2px 17px;}
    .AppNavbar .navlinks{font-size: 15px;padding: 19px 8px;padding-left: 30px;}    
    .AppHeader .logo {padding: 1px 12px 1px 12px;}
    .logo .menuIcoin img{height: 28px;}
    .bannerSection .carousel-inner .sliderimg{aspect-ratio: 21/9.5;}
    .bannercontentdiv{padding: 20px;}
    .bannercontentdiv .projlocation{margin-bottom: 6px;}
    .bannercontentdiv .projectname{margin-bottom: 11px;font-size: 36px;}
    .bannercontentdiv .typodiv{font-size: 23px;}    
    .bannercontentdiv .pricetext{font-size: 37px;}
    .bannercontentdiv .keyhightlight{margin: 18px 0;}
    .bannercontentdiv .keyhightlight li {font-size: 16px;}
    .bannercontentdiv .keyhightlight li img{width: 18px;}
    .bannerForm .heading {font-size: 17px;}
    .bannerForm .heading img{width: 25px;}
    .commonheading .projectname {font-size: 28px;}    
    .appbtn{font-size: 15px;padding: 10px 13px;}   
    .properties_section {padding: 24px 0;}
    .properties_section .flexdiv {gap: 29px 0;}
    .properties_section .proj-heading {font-size: 32px;margin-bottom: 0;}
    .decision_corner {
        & figure {
            img {
                width: 80%;
            }
        }
    }
}
@media(max-width: 1366px){  
    .form-over-banner {
        bottom: 7%;
    }
    .fixedIcons{
        img{width: 45px;}
        &.whatsapp{left: 10px;}
        &.phone{right: 10px;}
    }
    .headrConNo .text {font-size: 20px;}
    .headrConNo .callsvg {width: 24px;}
    .bannerForm {padding: 8px;border-radius: 8px 0 0 0;width: 23%;}
    .bannerForm .flexdiv input {padding: 10px;border-radius:  0;}
    .bannerForm .heading{margin-bottom: 14px;border-radius: 5px 0;padding: 12px 15px;}    
    .contact-container{padding: 58px 0;}
    .contact-container .contentdiv{width: 54%;}
    .contact-container .formdiv .col-md-6 {flex: 0 0 100%;max-width: 100%;}
    .contact-container .formdiv .heading {font-size: 25px;margin-bottom: 6px;}
    .contact-container .formdiv p {margin-bottom: 10px;}
    .contact-container .appbtn{width: 100%;}
    .contact-container .formdiv .flexfields input {padding: 7px 10px 7px 10px;margin-bottom: 17px;border-radius: 6px 0;}
    .contact-container .projlocation {margin-bottom: 10px; font-size: 20px;}
    .contact-container .projectname {font-size: 25px;}
    .contact-container .contentdiv p {margin-bottom: 17px;font-size: 15px;}
}
@media(max-width: 1280px){}
/* if need chnage 768 to 767 */
@media(max-width: 767px){
    .logo>img {
        height: 44px;
        margin-left: 10px;
    }
    .container {max-width: 98%;}
    /* .flex-wrap-mb */
    .flex-wrap-mb{flex-wrap: wrap;}
    .w-100-mb{width: 100% !important;}
    /* .appbtn */
    .appbtn {font-size: 12px;padding: 10px 8px;}
    .AppHeader{position: fixed;left: 0;right: 0;width: 100%;z-index: 9;}
    /* .commonheading */    
    .headerflexdiv {display: block !important;}
    .logodiv {padding: 8px 0;margin: 0 auto;display: flex;justify-content: center;border-bottom: 1px solid #fff;}
    .AppHeader .logo{padding: 8px 0px;width: 100%;display: flex !important;}    
    .AppNavbar{position: fixed;width: 80%;top: 0;bottom: 0;left: -100%;right: 0;z-index: 9;background: #fff; display: block !important; transition: var(--transition);}
    .AppNavbar.active{left: 0;}
    .AppNavbar .navlinks {font-size: 14px;padding: 10px 10px;color: var(--black); border-bottom: 1px solid var(--black);}
    .headrConDiv{position: relative;}
    .headrConNo .callsvg{width: 18px;}
    .headrConNo .texthelp {font-size: 14px;}
    .headrConNo .text {font-size: 16px;}
    .menuIcoin{display: block !important;position: absolute;right: 15px;padding-top: 15px;top: 0px;}    
    .logo-absolute{position: unset; text-align: center;}
    .logo-absolute img{height: 70px;}
    .AppNavbar .navlinks.active::after, .AppNavbar a:hover::after{display: none;}
    .bannerSection::after, .bannercontentdiv, .bannerForm{position: relative;top: unset;left: unset;transform: unset;right: unset;}
    .bannerSection .carousel-inner .sliderimg {aspect-ratio: 18/12.7;object-fit: cover;}
    .headrConNo{margin-left: 0;}
    .properties_section .stickydiv {position: absolute;top: -31px;left: -8px;}
    .properties_section .stickydiv img {width: 39%!important;}
    .content-over-banner{position: static;background: var(--black);width: 100%;padding: 25px 10px;
        .projectname {font-size: 26px;letter-spacing: 1px;}
        .typology {font-size: 22px;}
    }
    .form-over-banner{position: static; max-width: 92%;
        .col-div {width: 100%; margin-bottom: 15px;}
        .btn-div {width: 50%; margin: 0 auto;}
    }
    .book-and-get-details{
        .div-flex{flex-wrap: wrap; gap: 15px;}
        .appbtn {width: 100%;}
    }
    .project-highlights{
        li{border-right: 0 !important; padding: 10px 0; border-bottom: 1px solid #B8BEC6;}
    }
    .overview-and-highlights {
        .heading {font-size: 22px;}    
    }
    .site-interested-section {
        .heading {font-size: 22px;}
    }
    .section-amenities {
        li {font-size: 14px;}
    }
    .decision_corner {
        .content_div{padding: 0;}
        .Heading {font-size: 22px;}
        .sub_heading {font-size: 14px;}        
    }
    .fixedIcons {bottom: 45px;
        img {width: 35px;}
    }
    #bannerSliderControl{padding-top: 50px;}
    /* .bannercontentdiv */
    .bannercontentdiv{transform: translate(0, 0); padding: 15px; width: 100%;}
    .bannercontentdiv .projlocation {margin-bottom: 8px;font-size: 14px;}
    .bannercontentdiv .projectname {margin-bottom: 8px;font-size: 27px;}
    .bannercontentdiv .typodiv {font-size: 17px;border-radius: 5px 0;}
    .bannercontentdiv .keyhightlight {margin: 12px 0;}
    .bannercontentdiv .keyhightlight li {font-size: 14px; margin-bottom: 7px;}
    /* .bannerForm */
    .bannerForm{width: 100%;background: #ffffff;} 
    .bannerForm .heading { font-size: 18px;padding: 10px 5px 0; color: #000;font-weight: 600;}

    .patch-images {position: absolute;bottom: 0px;left: 5%;width: 30%;z-index: 99;top: 20%;}
    /* .properties_section */
    .properties_section {padding: 29px 0;}
    .properties_section .proj-heading {font-size: 20px;margin-bottom: 0;}
    .section-floor-plan{
        .flex-plans{gap: 25px;}
        .plan-img-div{border-bottom: 1px solid var(--black); padding-bottom: 15px;}
        .appbtn{width: 58%;}
    }
    .section-floor-plan {
        .title {font-size: 18px;}
        .heading {font-size: 20px;}
    }
    /* .contact-container */
    .contact-container {padding: 35px 0;}
    .contact-container .formdiv {padding: 15px;border-radius: 5px 0; margin-bottom: 25px;}
    .contact-container .formdiv .heading {font-size: 20px;}
    .contact-container .formdiv p {margin-bottom: 8px;font-size: 14px;}
    .contact-container .formdiv .flexfields input{margin-bottom: 8px; font-size: 14px;}
    .contact-container .projectname {font-size: 20px;margin-bottom: 8px;}
    .contact-container .projlocation {margin-bottom: 8px;font-size: 17px;}
    .contact-container .contentdiv p {margin-bottom: 10px;font-size: 14px;text-align: left;letter-spacing: 0.9px;}
    .sitefooter{padding-bottom: 80px;}
    /* .modal */
    .modal.modal1.show .modal1-dialog{background: #fff;padding: 0;margin: 0;height: 100%;width: 100%;}
    .modal.fade .modal-dialog{margin: 0;padding: 15px;display: flex;align-items: flex-start;height: 100%;overflow: hidden;}
    .modal-dialog .close span{font-size: 24px !important;}
    .modal .modal-content{border: 0;}
    .modal .form-control {padding: 7px;}
    .modal .modal-para {font-size: 19px;}
    .modal-dialog .modal-head {font-size: 20px;}
    .modal .modal-desc {font-size: 13px;}
    .modal .in_box {padding: 7px 0;border-bottom: 1px solid var(--black);}
    /* .mobile-section-footer */
    .mobile-section-footer{ display: flex; display: flex; gap: 0 5px; justify-content: space-around; z-index: 9;}
    .prv-and-next-btns {bottom: 28%;}
    .content-over-banner{
        position: relative;
        background: var(--black);
        width: 100%;
        padding: 25px 10px;
        .projectname {
            font-size: 26px;
            letter-spacing: 1px;}
            .typology {
                font-size: 22px;
            }
            
            transform: unset;
            text-align: center;
            left: unset;
        }
        .form-over-banner{position: static; max-width: 92%;
            .col-div {width: 100%; margin-bottom: 15px;}
            .btn-div {width: 50%; margin: 0 auto;}
        }
        .mobile-text {color: #000!important;}
        .bannerForm .flexdiv input::placeholder{color: #000;}
        .bannerForm .flexdiv input {
            border-bottom: 1px solid rgb(0 0 0 / 40%);
            color: #000;
        }
    }

/* --------------------------------------------------------------------
   Luxury Theme Overrides
   These rules adjust the color palette to match the Mana logo by using
   dark backgrounds and gold accents. They override existing colors
   defined in the HTML and earlier CSS without altering the HTML structure.
---------------------------------------------------------------------*/

/* Ensure headings and key text are visible on dark backgrounds */
.projectname,
.proj-heading,
.project-sub-head,
.heading,
.title,
.sub_heading,
.listing li p,
.listing li span,
.rera_no p {
  color: var(--white) !important;
}

/* Adjust highlight and subtitle colours */
.section-amenities .title,
.section-gallery .title,
.decision_corner .title,
.section-about-developer .heading,
.site-interested-section .title {
  color: var(--yellow) !important;
}

/* Darken backgrounds of sections originally light */
.overview-and-highlights .highligts-flex-div,
.section-amenities,
.section-gallery,
.site-interested-section,
.section-floor-plan,
.section-about-developer {
  background: var(--black) !important;
}

/* Update section headings to white */
.section-amenities .heading,
.section-gallery .heading,
.decision_corner .Heading,
.section-about-developer .title {
  color: var(--white) !important;
}

/* Update project section heading color */
.properties_section .proj-heading {
  color: var(--white) !important;
}

/* Update project typology badges to accent colour */
.proj-typology {
  background: var(--darkblue) !important;
  color: var(--white) !important;
}

/* Input fields and select styling for better contrast */
input[type="text"],
select {
  /* Dark inputs for general fields */
  background-color: #1a1a1a;
  color: var(--white);
  border: 1px solid var(--darkblue);
}
input[type="text"]::placeholder,
select::placeholder,
/* Placeholder colours for dark inputs */
input[type="text"]::placeholder,
select::placeholder {
  color: #888888;
}

/* Modal styling adjustments for dark theme */
.modal .modal-desc {
  color: var(--white);
}
.modal-dialog .modal-head {
  color: var(--yellow);
}
.modal .banner-form-section {
  background: #1a1a1a;
}
.modal .in_box {
  color: var(--white);
  border-bottom: 1px solid var(--darkblue);
}
.modal .in_box::placeholder {
  color: #888888;
}

/* Section background variations to avoid monotony */
.section-amenities {
  background: #151515 !important;
}
.section-gallery {
  background: #1a1a1a !important;
}
.site-interested-section {
  background: #151515 !important;
}
.section-about-developer {
  background: #1a1a1a !important;
}
.decision_corner {
  background: #1a1a1a !important;
}

/*
 * ======================================================================
 * Luxury Theme Overrides
 *
 * This section collects all of the overrides needed to give the
 * website a cohesive dark/gold palette.  By declaring these rules
 * towards the end of the stylesheet we ensure they take precedence
 * over earlier definitions without needing to modify the original
 * selectors.  These styles adjust backgrounds, text, inputs, buttons
 * and modal contents to create a rich, luxurious look and feel.
 * ======================================================================
 */

/* Dark backgrounds for major sections */
.AppHeader,
.AppNavbar,
.book-and-get-details,
.properties_section,
.overview-and-highlights,
.site-interested-section,
.section-amenities,
.section-gallery,
.decision_corner,
footer.sitefooter,
.mobile-section-footer {
    background-color: var(--black) !important;
    color: var(--white) !important;
}

/* Navigation link colours and underline */
.AppNavbar .navlinks {
    color: var(--white) !important;
}
.AppNavbar .navlinks.active,
.AppNavbar .navlinks:hover {
    color: var(--yellow) !important;
}
.AppNavbar .navlinks::after {
    background: var(--yellow) !important;
}

/* Luxury gradient styling for buttons */
.appbtn.gradient {
    /* Static bronze‑to‑gold gradient to make buttons pop */
    background-image: linear-gradient(90deg, var(--darkblue) 0%, var(--yellow) 50%, var(--darkblue) 100%) !important;
    border: 1px solid var(--darkblue) !important;
    color: var(--white) !important;
    box-shadow: 0 0 10px rgba(214,180,109,0.5) !important;
}
.appbtn.gradient:hover {
    background-image: linear-gradient(90deg, var(--darkblue1) 0%, var(--yellow) 50%, var(--darkblue1) 100%) !important;
}

/* Input field styling across site */
input[type="text"],
select,
/* Removed .phone-input from this list so the plugin can handle its padding */
.in-box,
.bannerForm input,
.modal .in_box {
    background-color: #1a1a1a !important;
    border: 1px solid var(--slaty_1) !important;
    color: var(--white) !important;
    padding: 5px 15px !important;
    border-radius: 4px !important;
}
input::placeholder,
select::placeholder,
.phone-input::placeholder,
.in-box::placeholder,
.bannerForm input::placeholder,
.modal .in_box::placeholder {
    color: #888888 !important;
}

/* Telephone dial code styling */
/* Reset telephone dial code styling so the plugin displays clearly */
.iti__selected-dial-code,
.iti__dial-code,
.iti__country-name {
    color: #333333 !important;
}
.iti__flag-container .iti__arrow {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid var(--darkblue) !important;
}

/* Consent and checkbox text styling */
.checkbox-section {
    color: #888888 !important;
    user-select: none;
}

/* Modal styling */
.modal .modal-content {
    background-color: #1a1a1a !important;
    border: 1px solid var(--slaty_1) !important;
}
.modal .modal-head {
    color: var(--yellow) !important;
    user-select: none;
}
.modal .modal-desc {
    color: #cccccc !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
    user-select: none;
}
.modal .banner-form-section {
    background-color: #1a1a1a !important;
}

/* Distinct dark shades for various sections */
.section-amenities {
    background-color: #151515 !important;
}
.section-gallery {
    background-color: #1a1a1a !important;
}
.site-interested-section {
    background-color: #151515 !important;
}
.section-about-developer {
    background-color: #1a1a1a !important;
}
.decision_corner {
    background-color: #1a1a1a !important;
}

/*
 * Invert only the small amenity icons for dark backgrounds while leaving
 * project and gallery images untouched.  Applying the filter broadly
 * inverted the gallery thumbnails, which is undesirable.  Now only
 * the icons inside the amenities list are inverted.
 */
.section-amenities .flex-div li img {
    filter: invert(1) !important;
}

/* Ensure gallery and developer images display in natural colours */
.section-gallery .img-div img,
.section-about-developer img {
    filter: none !important;
}

/* Invert amenity icons for visibility on dark backgrounds */
.section-amenities li img {
  filter: invert(1);
}

/*
 * ----------------------------------------------------------------------
 * Intl Tel Input customisations
 *
 * The phone number fields use the intl-tel-input plugin.  The default
 * dropdown and dial code colours were illegible on a dark background.
 * These rules darken the dropdown and set text/icon colours to white or
 * gold.  Padding is increased on the input to accommodate the flag and
 * dial code, and borders are aligned with our luxury theme.
 */
.iti--allow-dropdown .iti__flag-container {
    background-color: #1a1a1a;
    border-right: 1px solid var(--slaty_1);
}
.iti--allow-dropdown .iti__flag-container:hover,
.iti--allow-dropdown .iti__flag-container:focus {
    background-color: #2a2a2a;
}
.iti__country-list {
    background-color: #1a1a1a;
    color: var(--white);
    border: 1px solid var(--slaty_1);
    max-height: 250px;
    overflow-y: auto;
}
.iti__country {
    background-color: transparent;
    color: var(--white);
}
.iti__country:hover,
.iti__country.highlight {
    background-color: #333333;
}
/* Leave padding for intl-tel-input to handle; we do not override left padding here */
.iti--separate-dial-code input {
    padding-left: initial !important;
}

/*
 * Revert phone input styling to a light theme for better usability
 *
 * These rules override the dark-themed customisations for the
 * intl-tel-input plugin.  They restore a traditional light colour
 * scheme on phone fields and country dropdowns so that the dial code
 * and country names are clearly visible.  Padding is adjusted to
 * accommodate the flag and code, and borders are reset to a light
 * neutral tone.
 */
.bannerForm .iti input,
.site-interested-section .iti input,
.modal .iti input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    /* Increase left padding to match the width of the flag container */
    padding-left: 90px !important;
}
.bannerForm .iti--allow-dropdown .iti__flag-container,
.site-interested-section .iti--allow-dropdown .iti__flag-container,
.modal .iti--allow-dropdown .iti__flag-container {
    background-color: #ffffff !important;
    border-right: 1px solid #cccccc !important;
}
.iti__country-list {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
    max-height: 250px;
    overflow-y: auto;
}
.iti__country {
    background-color: transparent !important;
    color: #333333 !important;
}
.iti__country:hover,
.iti__country.highlight {
    background-color: #f5f5f5 !important;
}
.iti__selected-dial-code,
.iti__dial-code,
.iti__country-name {
    color: #333333 !important;
}
.iti__flag-container .iti__arrow {
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 4px solid #333333 !important;
}

/*
 * Highlight list animation for key selling points
 *
 * This animation gently pulses the arrow bullet in the highlights
 * section between the accent colour and white to draw the visitor's
 * attention without being intrusive.
 */
@keyframes highlight-blink {
    0%, 100% { color: var(--yellow); }
    50% { color: var(--white); }
}
.highligts-flex-div .listing li span {
    animation: highlight-blink 2s infinite;
}

/* Increase spacing between form fields */
.bannerForm .flexdiv select,
.bannerForm .flexdiv input,
.site-interested-section form select,
.site-interested-section form input {
    margin-bottom: 12px !important;
}

/*
 * ----------------------------------------------------------------------
 * Refined phone input styling
 *
 * The intl-tel-input plugin produces markup with a `.iti` wrapper
 * around the input and a separate flag container.  To ensure the
 * phone field and its country selector remain legible and elegant,
 * these rules explicitly style the `.phone-input` itself and the
 * surrounding elements.  Padding is increased to accommodate the
 * dial code and flag, and neutral colours are used for clarity.
 */
.phone-input {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    /* Provide space for the flag container so the dial code does not overlap the placeholder or user input */
    padding: .375rem .75rem .375rem 70px !important;
}
.phone-input::placeholder {
    color: #999999 !important;
}
.iti__flag-container {
    background-color: #ffffff !important;
    border-right: 1px solid #cccccc !important;
    border-radius: 4px 0 0 4px !important;
}
.iti__selected-dial-code {
    color: #666666 !important;
}
.iti__flag-container .iti__arrow {
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 4px solid #666666 !important;
}

/* Override any earlier padding-left on intl tel input fields */
/* Override any earlier padding-left on intl tel input fields */
.iti--separate-dial-code input {
    /* Use the plugin default padding; we do not set a specific left padding here */
    padding-left: initial !important;
}

/* Allow the plugin's default styling to control the dial code overlay.  We don't force display here
   so that the +91 (or other country code) appears naturally without hiding or stretching it. */

/*
 * ----------------------------------------------------------------------
 * Static button gradients
 *
 * Replace the animated gradient on `.appbtn.gradient` with a static
 * diagonal blend of deep bronze tones.  This creates a luxurious
 * button without noticeable movement.
 */
   .appbtn.gradient {
    background: linear-gradient(45deg, #4D3A1A, #8C714B) !important;
    background-size: auto !important;
}
.appbtn.gradient:hover {
    background: linear-gradient(45deg, #5A4432, #A3815D) !important;
}
/* Keyframes */
@keyframes rotateSvg {
    0%{rotate: 10deg;}
    50%{rotate: -5deg;}
    100%{rotate: 10deg;}    
}
@keyframes zoomin-out {    
    50%{transform: scale(1.2);}
}
@keyframes zoomin-out1 {    
    50%{transform: scale(1.01);}
}

/*
 * ----------------------------------------------------------------------
 * Reset phone input colours
 *
 * To ensure the intl-tel-input plugin works correctly, we override any dark
 * theme styling on phone inputs and their containing inputs.  By using
 * a light background and neutral border, the dial code and flag
 * positioning provided by the plugin remain intact and no oversized
 * overlay appears.  This applies to phone inputs in banner forms,
 * site enquiry sections and modals.
 */
.phone-input,
.bannerForm .iti input,
.site-interested-section .iti input,
.modal .iti input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
}

/*
 * ----------------------------------------------------------------------
 * Phone input styling
 *
 * Apply dark-themed styling to phone input fields without overriding
 * the left padding set by the intl-tel-input plugin.  The plugin
 * controls the spacing needed for the flag and dial code.  Only the
 * background colour, text colour, border and vertical padding are
 * customised here to match the luxury theme.
 */
.phone-input {
    background-color: #1a1a1a !important;
    color: var(--white) !important;
    border: 1px solid var(--slaty_1) !important;
    border-radius: 4px !important;
    padding-top: 10px !important;
    padding-right: 15px !important;
    padding-bottom: 10px !important;
}

/* =========================================================
   PREMIUM 3D ENHANCEMENT PACK (Final – Safe to Paste at End)
   - Subtle depth, luxury glow, glassy forms
   - Button polish & hover feedback everywhere
   - Zero layout shifts (transform, shadow, color only)
   ========================================================= */

/* Smoothness everywhere */
* { transition: all .30s ease-in-out; }

/* ----------------------------
   Project Cards (deep, premium)
   ---------------------------- */
   .properties_section .inner-col{
      border-radius: 16px;
      background: linear-gradient(145deg, #1a1a1a, #262626);
      box-shadow:
      10px 10px 24px rgba(0,0,0,0.55),
      -8px -8px 18px rgba(255,255,255,0.03);
      transform: translateY(0);
      overflow: hidden;
  }
  .properties_section .inner-col:hover{
      transform: translateY(-8px) scale(1.015);
      box-shadow:
      14px 18px 36px rgba(0,0,0,0.7),
      0 0 0 1px rgba(214,180,109,0.18) inset;
      filter: saturate(1.04) contrast(1.02);
  }

/* Card image polish (no layout shift) */
.properties_section .inner-col img{
  transform: scale(1);
  will-change: transform;
}
.properties_section .inner-col:hover img{
  transform: scale(1.02);
}

/* Content layer stays crisp */
.properties_section .cotnetdiv{
  position: relative;
  z-index: 1;
}

/* Subtle “gold sheen” at top of card */
.properties_section .inner-col::before{
  content:"";
  position:absolute; left:-30%; top:-40%;
  width: 160%; height: 80%;
  background: radial-gradient(800px 320px at 20% 20%,
      rgba(255,255,255,0.12), rgba(255,255,255,0.02) 45%, transparent 65%);
  pointer-events: none;
}

/* Ambient under-glow */
.properties_section .inner-col::after{
  content:"";
  position:absolute; left:10%; right:10%; bottom:-22px; height:40px;
  background: radial-gradient(60% 100% at 50% 0%,
      rgba(214,180,109,.42), rgba(214,180,109,0) 70%);
  filter: blur(16px);
  pointer-events:none;
}

/* ----------------------------
   Buttons (luxury glow + feedback)
   ---------------------------- */
   .appbtn.gradient{
      border-radius: 999px !important;
      font-weight: 700;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      background-image: linear-gradient(45deg, #4D3A1A, #8C714B) !important;
      border: 1px solid #8C714B !important;
      color: #fff !important;
      box-shadow: 0 6px 16px rgba(214,180,109,0.45);
      transform: translateY(0) scale(1);
  }
  .appbtn.gradient:hover{
      background-image: linear-gradient(45deg, #5A4432, #A3815D) !important;
      box-shadow: 0 10px 26px rgba(214,180,109,0.6);
      transform: translateY(-2px) scale(1.03);
  }
  .appbtn.gradient:active{
      transform: translateY(0) scale(0.99);
      box-shadow: 0 5px 14px rgba(214,180,109,0.45);
  }

/* Small glossy cap on buttons */
.appbtn.gradient::after{
  content:"";
  position:absolute; inset:1px 1px auto 1px; height:52%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events:none;
}

/* Make header call button pop without shifting layout */
.headrConNo{
  box-shadow: 0 6px 16px rgba(214,180,109,0.35);
  border-radius: 999px;
}
.headrConNo:hover{ transform: translateY(-2px); }

/* ----------------------------
   Headings & key titles (soft glow)
   ---------------------------- */
   .projectname,
   .proj-heading,
   .heading,
   .section-amenities .heading,
   .section-gallery .heading,
   .decision_corner .Heading{
      text-shadow: 0 3px 6px rgba(0,0,0,0.6),
      0 0 14px rgba(214,180,109,0.35);
  }

/* Underline accent for section headings */
.section-amenities .heading,
.section-gallery .heading,
.decision_corner .Heading{
  position: relative;
}
.section-amenities .heading::after,
.section-gallery .heading::after,
.decision_corner .Heading::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-8px; width:62px; height:3px; border-radius:3px;
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(214,180,109,0.75);
}

/* ----------------------------
   Forms (glassy shell + focus ring)
   ---------------------------- */
   .bannerForm,
   .site-interested-section form,
   .modal .banner-form-section{
      background: rgba(255,255,255,0.08) !important;   /* frosted */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  }

/* Inputs (dark body, golden focus) */
input[type="text"],
select,
.phone-input{
  background: rgba(26,26,26,0.9) !important;
  color: #fff !important;
  border: 1px solid var(--slaty_1) !important;
  border-radius: 6px !important;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.55);
}
input[type="text"]::placeholder,
select::placeholder,
.phone-input::placeholder{ color:#9a9a9a !important; }

input[type="text"]:focus,
select:focus,
.phone-input:focus{
  outline: none !important;
  border-color: var(--yellow) !important;
  box-shadow:
  0 0 0 2px rgba(214,180,109,0.25),
  0 0 18px rgba(214,180,109,0.35);
}

/* Keep intl-tel-input dropdown readable */
.iti__country-list{
  box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
}

/* ----------------------------
   Gallery (depth on hover)
   ---------------------------- */
   .section-gallery .flex-div .img-div img{
      border-radius: 14px;
      transform: scale(1);
      box-shadow: 0 10px 28px rgba(0,0,0,0.45);
      will-change: transform, box-shadow, filter;
  }
  .section-gallery .flex-div .img-div:hover img{
      transform: scale(1.04);
      box-shadow: 0 18px 48px rgba(0,0,0,0.65);
      filter: saturate(1.06) contrast(1.03);
  }

/* ----------------------------
   Fixed action icons (subtle lift)
   ---------------------------- */
   .fixedIcons{
      box-shadow: 0 0 16px rgba(214,180,109,0.45);
      transform: scale(1);
  }
  .fixedIcons:hover{
      transform: scale(1.12);
      box-shadow: 0 0 24px rgba(214,180,109,0.6);
  }

/* ----------------------------
   Reduced motion friendly
   ---------------------------- */
   @media (prefers-reduced-motion: reduce){
      *{ transition: none !important; }
      .properties_section .inner-col:hover,
      .section-gallery .flex-div .img-div:hover img,
      .appbtn.gradient:hover{ transform: none !important; }
  }