@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --darkblue: #031638;
    --goldbrown: #986b52;
    --gold: #d6b469;
    --heading: #1c1c1c;
    --black: #000;
    --white: #fff;
    --text: #777;
    --border: #ddd;
    --border-light: #eee;
    --border-dark: #ccc;
    --box-shadow: 0 0 10px #00000015;
    --light-text: #aaa;
    --body: #fcf2e8;
    --white-text: #ddd;
    --bodybg: #fcf2e855;
}

*{ outline: none !important; }

body{ font-size: 16px; line-height: 1.56; color: var(--text); background: var(--bodybg); font-family: "Inter", sans-serif; }

::-webkit-scrollbar{ width: 0; height: 0; }

section{ overflow: hidden; }
p{ margin: 0 0 20px; &:last-child{ margin: 0; } span{ display: inline-block; } }
a{ text-decoration: none; color: inherit; }
a{ text-decoration: none; color: inherit; }

ul, ol{ margin: 0 0 20px; padding: 0 0 0 20px; &:last-child{ margin: 0; } li{ margin: 0 0 5px; } }

.btn{ display: inline-block; padding: 10px 16px; border-radius: 0; border: none; color: #fff !important; font-weight: 500; font-size: 14px; text-transform: uppercase; background: linear-gradient(45deg, var(--gold) , var(--goldbrown) 100%); text-align: center; &.black{ background: var(--darkblue); } }
.cta{ margin: 20px 0 0; display: inline-flex; gap: 6px; @media (max-width: 500px){ display: flex; flex-wrap: wrap; .btn{ flex-grow: 1; } } }

.padding{ padding: 80px 0px; }
.space{ padding: 40px 0; }
.heading{ font-size: 38px; line-height: 1.4; font-weight: 600; margin: 0 0 15px; font-family: "Playfair Display"; color: var(--heading); span{ display: inline-block; } }
.subtitle{ text-transform: uppercase; color: var(--gold); font-weight: 500; margin: 0 0 5px; }
.titles{ font-size: 20px; font-weight: 600; margin: 0 0 8px; color: var(--heading); }
.bluebg{ background: var(--darkblue); }
.bgbodydark{ background: var(--body); }
.textdark{ color: var(--heading); }
.textwhite{ color: var(--white); }
.img{ width: 100%; border-radius: 12px; }

.color-gold{ background: -webkit-linear-gradient(-45deg, var(--gold) 0, var(--gold) 40%, var(--goldbrown) 60%, var(--goldbrown) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; width: fit-content; }

.formwrap{
    display: flex; gap: 20px; flex-wrap: wrap;
    .wrap{
        width: 100%; flex-grow: 1;
        label{ font-size: 12px; font-weight: 600; line-height: 1; margin: 0 0 6px; color: var(--heading); text-transform: uppercase; }
        input, textarea{ width: 100%; border: 1px solid var(--border); border-radius: 5px; height: 40px; }
        textarea{ height: 100px; resize: none; }
        .error{ color: red; font-size: 12px; margin: 6px 0 0;}
    }
}

header{
    padding: 0; position: absolute; width: 100%; left: 0; top: 0; z-index: 99;
    .headerline{
        display: flex; gap: 25px; justify-content: space-between; align-items: center;
        .logo{ width: 45%; a{ display: block; img{ width: 200px; border-radius: 0 0 10px 10px;  } } }
        .menu{
            width: 55%; display: flex; gap: 15px; align-items: center; justify-content: flex-end;
            .bigbtn{ background: var(--body); color: var(--goldbrown); font-weight: 600; text-transform: uppercase; padding: 6px 25px 6px 6px; display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 50px; i{ display: flex; width: 40px; height: 40px; background: var(--goldbrown); color: var(--body); border-radius: 50%; align-items: center; justify-content: center;  } }
            .hamburger{
                width: 50px; height: 50px; background: var(--goldbrown); border-radius: 50%; display: flex; align-items: center; color: var(--body); justify-content: center; font-size: 24px; cursor: pointer;
            }
        }
    }
    @media (max-width: 600px){
        .headerline{
            gap: 15px;
            .logo{ a{ img{ width: 100%; } } }
            .menu{
                gap: 8px;
                .bigbtn{ font-size: 12px; gap: 6px; padding: 6px 15px 6px 6px; i{ width: 30px; height: 30px; font-size: 12px; } span{ span{ display: none; } } }
                .hamburger{ width: 42px; height: 42px; font-size: 16px; }
            }
        }
    }
}

.fullmenu{
    position: fixed; right: -100%;top: 0;z-index: 100;width: 400px;    max-width: 90%;   height: 100vh;background: var(--body);transition: 0.5s ease;display: flex;justify-content: center;align-items: center;text-align: center;
    &.show{ right: 0; }.menulinks .links:hover{
    color: #986b52;
}
    .menulinks{ .links{ font-size: 18px; display: block; padding: 10px 0; } }
}

main{
    
    .banner{
        padding: 0; position: relative;
         &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); 
        z-index: 1;
    }
        >img{ width: 100%; height: 650px; object-fit: cover; }
        .overlay{
            padding: 60px 0; position: absolute; z-index: 10; bottom: 0; width: 100%;
            .title{ font-size: 50px; font-weight: 600; font-family: "Playfair Display"; margin: 0 0 15px; color: var(--white);}
            .rerano{ position: absolute; right: 30px; bottom:30px; width: 150px; }
        }
        @media (max-width: 1024px){
            .overlay{ .title{ font-size: 42px; } }
        }
        @media (max-width: 600px){
            .overlay{ padding: 20px 0 40px; .title{ font-size: 36px;  } .rerano{ bottom: 100%; left: 12px; width: 100px; } }
            > img{ height: 90vh; }
        }
    }
    
    .aboutimg{
        display: flex; gap: 10px; height: 100%;
        &:before{ content: ""; display: block; border-left: 10px solid var(--gold); height: 100px; }
        img{ width: calc(100% - 20px); height: 100%; object-fit: cover; object-position: center; border-radius: 12px; min-height: 350px; }
    }
    
    .checklist{
        padding: 0; margin: 0 0 25px;
        li{
            display: flex; gap: 10px; align-items: baseline;
            &::marker{ display: none; content: ""; }
            &:before{ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f058"; color: var(--goldbrown); }
        }
    }
    
    .aboutwrap{
        margin: -80px 0 0; box-shadow: var(--box-shadow);
        .location{ background: var(--gold); color: var(--white); padding: 40px 25px; font-weight: 500; position: relative; img{ position: absolute; bottom: 10px; width: 100px; right: 10px; overflow: hidden; } span{ display: inline-block; } }
        .contentwrap{
            padding: 0 25px;
            .wrap{
                gap: 20px; display: flex; align-items: center; padding: 25px 0; border-bottom: 1px solid var(--border);
                &:last-child{ border: 0; }
                img{ width: 50px; height: 50px; object-fit: cover; min-width: 50px; }
                .content{
                    width: 100%;
                    .num{ font-size: 22px; font-weight: 700; color: var(--heading); line-height: 1; margin: 0 0 4px; }
                    .title{ line-height: 1.2; font-size: 14px; }
                }
            }
        }
        @media (max-width: 1024px){ margin: 0; }
        @media (max-width: 600px){
            .contentwrap{
                padding: 25px; display: flex; gap: 25px 15px; flex-wrap: wrap;
                .wrap{ width: 40%; flex-grow: 1; display: block; border: 0; padding: 0; .icon{ margin: 0 0 15px; } }
            }
        }
    }
    
    .sftext{
        font-size: 2.6vw; font-weight: 600; color: var(--white); line-height: 2vw; text-align: center; display: flex; justify-content: space-evenly; span{ opacity: .4; } .divider{ width: .1vw; background: var(--text); opacity: .5; }
        @media (max-width: 600px){ font-size: 22px; line-height: .6; flex-wrap: wrap; gap: 25px 18px; justify-content: center; .divider{ width: 1px; } }
    }
    
    .specifications{
        display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); border-width: 0 0 1px 1px;
        .wrap{
            width: 25%; text-align: center; padding: 30px; border: 1px solid var(--border); border-width: 1px 1px 0 0;
            .icon{ width: 50px; margin: 0 0 15px; }
            .title{ font-size: 20px; font-weight: 600; color: var(--heading); margin: 0 0 8px; }
        }
        @media (max-width: 1024px){ .wrap{ width: 50%; } }
        @media (max-width: 600px){ .wrap{ padding: 25px 18px; text-align: start } }
    }
    
   /* .amenities{
           
        .mainwrap{
            display: flex; gap: 2px;
            .wrap{
                width: 100%; position: relative; background: var(--black);
                img{ width: 100%; aspect-ratio: 6/7; object-fit: cover; object-position: center; opacity: .8; }
                .content{ position: absolute; bottom: 0; left: 0; width: 100%; display: flex; align-items: center; gap: 15px; padding: 20px; transition: .5s ease-in; .num{ font-size: 50px; font-weight: 700; line-height: 1; color: var(--white); opacity: 0.4; } .title{ font-size: 20px; line-height: 24px; font-weight: 600; color: var(--white); margin: 0; text-transform: capitalize; small{ display: block; font-size: 14px; } } &:hover{ background: var(--gold); }  }
            }
        }
        @media (max-width: 600px){
            .mainwrap{ flex-wrap: wrap; gap: 0; .wrap{ img{ aspect-ratio: auto; height: 300px; } } }
        }
    }*/
    
    .numcard{
        display: flex; gap: 15px; align-items: center; 
        .num{ width: 80px; height: 80px; min-width: 80px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; border: 1.5px solid var(--border-light); border-radius: 50%; color: var(--heading); }
        .content{ width: 100%; .title{ font-size: 18px; line-height: 22px; font-weight: 600; margin: 0 0 8px; color: var(--heading); } p{ font-size: 14px; } }
        @media (max-width: 600px){ align-items: start; .content{ .title{ font-size: 16px; line-height: 20px; } } }
    }
    
    .mapframe{ width: 100%; height: 600px; margin: 0 0 30px; border-radius: 12px; }
    .contactform{ padding: 20px 30px 35px; box-shadow: var(--box-shadow); background: var(--white); height: 100%; border-radius: 12px; }
    
    .iconbox{ display: flex; gap: 16px; align-items: center; .icon{ background: var(--body); color: var(--goldbrown); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; } .content{ .title{ margin: 0 0 2px; font-size: 14px; } .text{ color: var(--heading); font-size: 18px; font-weight: 700; } } }
    
}


footer{
    padding: 0 ; background: var(--heading); color: var(--white-text); overflow: hidden;
    .top-footer{
        padding: 35px 0 40px;
        .row{ align-items: center; justify-content: space-between; }
        .logo{ display: block; img{ width: 150px; margin: 0 0 15px -10px; } }
        .titles{ color: var(--white-text); }
        .phonenumsec{ text-align: end; .num{ font-size: 22px; font-weight: 600; line-height: 1; display: block; margin: 0 0 8px; } .mail{ font-size: 18px; opacity: .8; } }
        .sociallinks{ margin: 15px 0 0; a{ display: inline-block; padding: 12px; background: var(--text); margin: 0 5px 0 0; img{ width: 16px; height: 16px; opacity: .8; } } }
        .footerlinks{ display: flex; flex-wrap: wrap; gap: 10px 30px; a{ display: block; width: 110px; max-width: 45%; } }
    }
    .bottom-footer{ padding: 0 0 20px; text-align: center; hr{ margin: 0 0 20px; opacity: .2; }  }
    @media (max-width: 1024px){
        .top-footer{
            .phonenumsec{ text-align: start; }
        }
    }
}

@media (max-width: 1024px){
    .heading{ font-size: 32px; }
    .padding{ padding: 60px 0; }
    .space{ padding: 30px 0; }
}

@media (max-width: 768px){
    .container{ width: 100% !important; max-width: unset !important; }
    .padding{ padding: 45px 0; }
    .space{ padding: 22px 0; }
}
.floor-plans{
    overflow: hidden;
    background: #fff;
    color:#986b52;
    border-radius: 12px;
    padding: 20px 25px;
    transition: all 0.3s ease;
}

.floor-plans img{
    width: 100%;
    aspect-ratio: 1; object-fit: contain; object-position: center;
}
.floor-plans .sft{
    color:#031638;
    font-size: 24px;
    font-weight: bold;
    
}
.sft{
    margin-bottom: 0;
}

.facing{
    color: #808080; 
    font-size: 16px;
    font-weight: 500;
}
.img-popup{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.9);
    z-index:9999;
    justify-content:center;
    align-items:center;
}

.img-popup img{
    background:#fff;       
    padding:20px 25px;        
    border-radius:12px;
    max-width:90%;
    max-height:85vh;
    box-sizing:border-box;
    aspect-ratio:1;
    object-fit:contain;
    object-position:center;
}
.close-popup{
    position:absolute;
    top:20px;
    right:20px;
    color:#fff;
    font-size:35px;
    cursor:pointer;
    z-index:10000;
}
@media (max-width:768px){

    .img-popup img{
        max-width:95%;
        max-height:70vh;
    }

    .close-popup{
        top:15px;
        right:15px;
        font-size:30px;
    }

}
.fullmenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    max-width: 90%;
    height: 100vh;
    background: #000;
    color: #fff;
    z-index: 999;
    transform: translateX(-100%); 
    transition: transform 0.4s ease;
}

.fullmenu.show {
    transform: translateX(0); 
}

.closemenu {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
}
.chairman-message{
    background: #0B1F3A;
    padding: 0px 40px;
    overflow: hidden;
}

.chairman-img{
    width: 100%;
    max-width: 450px;
    display: block;
    margin: auto;
    filter: grayscale(100%);
    padding-top: 40px;
}

.small-title{
    color: #d6b469;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
}

.chairman-message h2{
    color: #d6b469;
    font-size: 52px;
    line-height: 1.2;
    font-weight: 700;
    margin: 15px 0;
}

.chairman-message h4{
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 500;
}

.chairman-message p{
    color: #d9d9d9;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.chairman-message h5{
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: 600;
}

.designation{
    color: #d6b469;
    font-size: 15px;
    letter-spacing: 1px;
}

@media (max-width: 991px) {
    .chairman-message{
        padding: 40px 0 0;
    }

    .chairman-message h2{
        font-size: 40px;
    }

    .chairman-img{
        padding-top: 20px;
        margin-bottom: 0;
        display: block;
    }
}
.banner h2{
    font-size: 20px;
    color:white;
}
.amenities-section{
    padding:80px;
    text-align:center;
}

.amenities-section h2{
    font-size:48px;
    color:#000;
    margin-bottom:30px;
}

.filters{
    margin-bottom:40px;
}

.filter-btn{
    padding:14px 35px;
    margin:5px;
    border:none;
    border-radius:40px;
    background:#e9e9e9;
    cursor:pointer;
    font-size:18px;
    transition:0.3s;
}

.filter-btn.active{
    background:#d6b469;
    color:#fff;
}

.amenities-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
}

.card{
    flex:0 0 calc(33.333% - 20px);
    max-width:calc(33.333% - 20px);
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.card:hover{
    transform:translateY(-8px);
}

.card img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.card h4{
    padding:18px;
    margin:0;
    font-size:20px;
    font-weight:600;
}

/* Tablet */
@media (max-width:1024px){

    .amenities-section{
        padding:60px 30px;
    }

    .amenities-section h2{
        font-size:40px;
    }

    .card{
        flex:0 0 calc(50% - 20px);
        max-width:calc(50% - 20px);
    }

}

/* Mobile */
@media (max-width:767px){

    .amenities-section{
        padding:40px 15px;
    }

    .amenities-section h2{
        font-size:32px;
        margin-bottom:20px;
    }

    .filters{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:10px;
        margin-bottom:25px;
    }

    .filter-btn{
        flex:1 1 calc(50% - 10px);
        max-width:160px;
        padding:10px 15px;
        font-size:15px;
        margin:0;
    }

    .amenities-grid{
        gap:15px;
    }

    .card{
        flex:0 0 100%;
        max-width:100%;
    }

    .card img{
        height:220px;
    }

    .card h4{
        font-size:18px;
        padding:15px;
    }

}