﻿
:root{
  --navy:#07131f;
  --navy2:#0d2235;
  --gold:#c9a24d;
  --cream:#f7f1e6;
  --white:#fff;
  --text:#6d7480;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  overflow-x:hidden;
  font-family:"Segoe UI",sans-serif;
  color:var(--navy);
  background:#fff;
}
a{text-decoration:none}

#mobileMenu{background: var(--navy);}
/* Header */
.header{
  position:fixed;
  top:0;
  width:100%;
  z-index:999;
  background:rgba(7,19,31,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.navbar {
	background-color: #0e0e1a;
	backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--border);
	transition: .3s;
}

.navbar-brand{
  color:var(--gold)!important;
  font-size:24px;
  font-weight:900;
  letter-spacing:1px;
}
.nav-link{
  color:#fff!important;
  /*font-size:15px;*/
  font-weight:600;
  margin:0 5px;
}
.nav-link:hover{color:var(--gold)!important}
.menu-btn{
  background:var(--gold);
  border:0;
  padding:9px 12px;
  border-radius:6px;
}

/* Hero */
.hero{
  min-height:100vh;
  background:
    linear-gradient(90deg,rgba(7,19,31,.96) 0%,rgba(7,19,31,.82) 45%,rgba(7,19,31,.38) 100%),
    url("../images/banner.jpg") center/cover;
  color:#fff;
  display:flex;
  align-items:center;
  padding:80px 0 80px;
 /* position:relative;*/
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:160px;
  /*background:linear-gradient(transparent,#fff);*/
}
.hero-content{
  position:relative;
  /*z-index:2;*/
}
.tag{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color:var(--gold);
  border:1px solid rgba(201,162,77,.6);
  padding:9px 18px;
  border-radius:100px;
  background:rgba(201,162,77,.1);
  font-weight:700;
  margin-bottom:24px;
}
.hero h1{
  font-size:76px;
  line-height:.95;
  font-weight:900;
  letter-spacing:-2px;
}
.hero h1 span{color:var(--gold)}
.hero p{
  font-size:19px;
  max-width:650px;
  color:#e8e8e8;
}
.hero-info{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin:34px 0;
}
.info-pill{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:15px 20px;
  border-radius:16px;
}
.info-pill strong{
  display:block;
  color:var(--gold);
  font-size:22px;
}
.btn-gold{
  background:var(--gold);
  color:#fff;
  border:0;
  padding:13px 32px;
  border-radius:100px;
  font-weight:700;
}
.btn-gold:hover{background:#b8913e;color:#fff}

/* Form */
.lux-form{
  background:#fff;
  color:var(--navy);
  padding:34px;
  border-radius:30px;
  box-shadow:0 35px 100px rgba(0,0,0,.35);
  border:1px solid rgba(201,162,77,.25);
}
.lux-form h4{font-weight:900}
/*.form-control{
  height:54px;
  border-radius:14px;
  border:1px solid #ddd;
}*/
.form-control:focus{
  box-shadow:none;
  border-color:var(--gold);
}

/* Sections */
.section{
  padding:95px 0;
}
.sec-title{
  margin-bottom:50px;
}
.sec-title span{
  color:var(--gold);
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}
.sec-title h2{
  font-size:46px;
  font-weight:700;
  letter-spacing:-1px;
}
.sec-title p{
  color:var(--text);
  max-width:720px;
}

/* About */
/*.about-box{
  background:var(--cream);
  border-radius:36px;
  padding:55px;
  position:relative;
  overflow:hidden;
}
.about-box::before{
  content:"";
  position:absolute;
  right:-80px;
  top:-80px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(201,162,77,.2);
}
.stat-card{
  background:#fff;
  padding:28px;
  border-radius:24px;
  box-shadow:0 15px 45px rgba(0,0,0,.07);
}
.stat-card h3{
  color:var(--gold);
  font-size:38px;
  font-weight:900;
}*/

/* Highlights */
.highlight{
  background:#fff;
  padding:34px;
  border-radius:28px;
  height:100%;
  border:1px solid #eee;
  box-shadow:0 18px 55px rgba(0,0,0,.07);
  transition:.35s;
}
.highlight:hover{
  transform:translateY(-8px);
  border-color:rgba(201,162,77,.45);
}
.icon{
  width:66px;
  height:66px;
  border-radius:20px;
  background:var(--navy);
  color:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin-bottom:24px;
}
.highlight h5{font-weight:700}
.highlight p{color:var(--text)}

/* Amenities */
.dark{
  background:var(--navy);
  color:#fff;
}
.amenity{
  height:100%;
  background:linear-gradient(145deg,#10263a,#07131f);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:30px;
  transition:.35s;
}
.amenity:hover{
  transform:translateY(-8px);
  border-color:rgba(201,162,77,.6);
}
.amenity i{
  font-size:34px;
  color:var(--gold);
  margin-bottom:20px;
}
.amenity p{color:#cfd6dd}

/* Price */
.price-card{
  background:#fff;
  padding:42px;
  border-radius:34px;
  height:100%;
  border:1px solid #eee;
  box-shadow:0 24px 70px rgba(0,0,0,.08);
}
.price-card.dark-card{
  background:var(--navy);
  color:#fff;
  border:2px solid var(--gold);
}
.price-card h3{font-weight:900}
.price{
  color:var(--gold);
  font-size:44px;
  font-weight:900;
}
.price-card ul{
  padding-left:0;
  list-style:none;
}
.price-card li{
  padding:11px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.dark-card li{border-color:rgba(255,255,255,.1)}
.price-card li i{color:var(--gold);margin-right:10px}

/* Payment */
.payment{
  background:var(--cream);
}
.pay-step{
  background:#fff;
  padding:35px 25px;
  border-radius:28px;
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.07);
}
.pay-step h2{
  color:var(--gold);
  font-size:50px;
  font-weight:900;
}

/* Plan */
.plan-card{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  height:330px;
  box-shadow:0 24px 70px rgba(0,0,0,.12);
}
.plan-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.5s;
}
.plan-card:hover img{transform:scale(1.08)}
.plan-content{
  position:absolute;
  inset:auto 20px 20px;
  background:rgba(7,19,31,.86);
  color:#fff;
  padding:22px;
  border-radius:22px;
}
.plan-content h5{font-weight:900}

/* Location */
.location-box{
  background:#fff;
  padding:30px;
  border-radius:26px;
  border-left:5px solid var(--gold);
  height:100%;
  box-shadow:0 18px 55px rgba(0,0,0,.07);
}
.location-box h4{
  color:var(--gold);
  font-weight:900;
}

/* CTA */
.cta{
  background:
  linear-gradient(rgba(7,19,31,.9),rgba(7,19,31,.9)),
  url("../images/bptp-skynest-img10.jpg") center/cover;
  color:#fff;
  /*border-radius:40px;*/
  padding:65px;
}

/* Footer */
footer{
  background:#050b12;
  color:#aaa;
  padding:35px 0;
}

/* Floating */
.float-call{
  position:fixed;
  right:20px;
  bottom:90px;
  width:58px;
  height:58px;
  background:var(--gold);
  color:#111;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  z-index:999;
}
.whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  width:58px;
  height:58px;
  background:#25d366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  z-index:999;
}

/* Mobile Menu */
@media(max-width:991px){
  .hero h1{font-size:48px}
  .sec-title h2{font-size:34px}
  .section{padding:70px 0}
  .about-box{padding:32px}
  .navbar-collapse{
    position:fixed;
    left:-310px;
    top:0;
    width:300px;
    height:100vh;
    background:var(--navy);
    padding:85px 28px;
    transition:.35s;
    display:block!important;
    z-index:9999;
  }
  .navbar-collapse.show{left:0}
  .nav-link{
    padding:13px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .cta{padding:38px 25px}
}

@media(max-width:767px){
  .hero{min-height:70vh; padding-top: 5rem;}
  .hero h1{font-size:35px}
  .section{padding:60px 0}
  .title h2{font-size:30px}
  .about-content {padding-left: 10px !important;}
  .about-content h2 {font-size: 35px;}
  .stat-box {padding: 5px 15px;}
}


.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	padding: 5px 0;
	transition: .35s;
}
.offcanvas{width:290px!important}
.offcanvas .btn-close {
    filter: invert(1);
}


.gallery-card{position:relative;border-radius:24px;overflow:hidden;height:310px;box-shadow:0 20px 55px rgba(0,0,0,.14)}.gallery-card img{width:100%;height:100%;object-fit:cover;transition:.5s}.gallery-card:hover img{transform:scale(1.08)}.gallery-card .cap{position:absolute;inset:auto 18px 18px 18px;background:rgba(6,18,77,.82);color:#fff;padding:16px;border-radius:18px;backdrop-filter:blur(10px)}.cap h5{margin:0;font-weight:800}.cap small{color:var(--gold)}

/*.navbar{background-color:#FFF;backdrop-filter:blur(18px);border-bottom:1px solid var(--border);transition:.3s}.navbar-brand{font-weight:600;letter-spacing:2.5px;color#07133f!important}*/.brand-mark{width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;display:inline-grid;place-items:center;color:var(--gold);margin-right:8px}/*.nav-link{color:#07133f!important;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}.nav-link:hover,.nav-link.active{color:var(--gold2)!important}*/.btn-gold{font-weight:800;border:0;border-radius:50px;padding:13px 28px;box-shadow:0 16px 40px rgba(216,173,93,.22)}.btn-outline-gold{border:1px solid var(--gold);color:var(--gold);border-radius:50px;padding:12px 26px;font-weight:800}.btn-outline-gold:hover{background:var(--gold);color:#07101f}

.gallery{background:#081124}.gallery-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:20px}.gallery-grid .img-card:first-child{grid-row:span 2}.gallery-grid img{height:260px}.gallery-grid .img-card:first-child img{height:540px}

@media(max-width:991px){.gallery-grid{grid-template-columns:1fr}.gallery-grid .img-card:first-child{grid-row:auto}.gallery-grid img,.gallery-grid .img-card:first-child img{height:auto}.split-img{height:auto}}

@media(max-width:767px){.navbar-collapse{padding:18px;background: var(--gold2);}.nav-link{border-bottom: 1px solid #444;}/*.hero-section .min-vh-100 {padding-top: 25px !important;}*/.joinwebchat{display:none}.site-header{padding: 5px 0}footer{margin-bottom: 5rem;}.payment-card span{padding-left: 15px;}.linktext{font-size: 1.7rem !important;}}


.mobile-footer{display:none}

 .quickenquiry {
	position: fixed;
	top: 25%;
	right: 0;
	border-radius: 5px 0 0 5px;
	z-index: 2;
}

#query-popup{z-index:9999;min-width:300px;height:auto;width:100%;position:fixed;top:16%;padding:0 5px 15px 5px;left:0;right:0;margin:0 auto;}

.captcha{padding:5px 0 5px 0;background:#FFF;margin-top:-3px}
#recaptcha3{margin-top: 6px;}

#myModal1 .modal-dialog{width:365px;margin:2% auto; /*background:#FFF; padding:20px; border-radius:8px*/}

#myModal1 .modal-title{color:#000}

#myModal1 .modal-content{}

.modal-open { /*position:fixed;*/}


.quick-from .form-group{margin-bottom:5px;width:100%;margin-right:0;}

.quick-from .form-group input{width:100%;}

.quick-from .form-group textarea{width:100%;}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}


#scrollToTopBtn {
  display: none; 
  position: fixed; 
  bottom: 20px; 
  right: 30px; 
  z-index: 99; 
  border: none;
  outline: none;
  background-color: #b58a43; 
  color: white;
  cursor: pointer;
  width: 45px;  
  height: 45px;
  border-radius: 50%; 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  font-size: 18px;
}

#scrollToTopBtn:hover {
  background-color: #222; 
  transform: translateY(-5px); 
}


/* {
  scroll-behavior: smooth;
}*/

@media (max-width: 768px) {
  #overview, #amenities, #price, #floor, #location, #contact{
    scroll-margin-top: 5rem !important;
  }


.mobile-footer {
    display: flex;
    justify-content: space-around; /* Even spacing across full width */
    align-items: center;
    cursor: pointer;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    background-color: #ffffff;
    line-height: 24px;
    width: 100%;
    text-align: center;
    padding: 11px 0 !important;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
    color: #000;
}

.mobile-footer a,
.mobile-footer span {
    text-align: center;
    transition: all 0.3s ease;
    color: #333;
    
    font-weight: 400 !important;
    
    text-decoration: none;
    border-right: 1px solid #ddd;
    padding: 5px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; /* Distribute space equally */
}

.mobile-footer a i{color: #b68a55;font-size: 25px;}

.mobile-footer a:last-child,
.mobile-footer span:last-child {
    border-right: 0;
}

.mobile-footer .icon {
    height: 28px;
    width: 28px;
    margin-bottom: 5px; /* Spacing between icon and text */
}

.mobile-footer p {
    margin: 0 !important;
    font-size: 14px;
}
}






/* GALLERY */
.gallery-section{
    padding:60px 20px;
}

.gallery-grid{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:18px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    cursor:pointer;
}

.gallery-item img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
    transition:0.5s ease;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

/* LIGHTBOX */
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.95);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:0.4s ease;
    z-index:9999;
    padding:20px;
}

.lightbox.active{
    opacity:1;
    visibility:visible;
}

.lightbox img{
    max-width:90%;
    max-height:90vh;
    border-radius:14px;
    animation:zoomIn .4s ease;
}

@keyframes zoomIn{
    from{
        transform:scale(.7);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

/* CLOSE BUTTON */
.close-btn{
    position:absolute;
    top:25px;
    right:35px;
    font-size:40px;
    color:#fff;
    cursor:pointer;
    line-height:1;
}

/* RESPONSIVE */
@media(max-width:768px){

.gallery-item img{
    height:240px;
}

.close-btn{
    top:15px;
    right:20px;
    font-size:34px;
}

}




.gold{ color:var(--gold);}

/* ===== SECTION ===== */

.section-gap{
  padding:110px 0;
}

.title{
  text-align:center;
  margin-bottom:70px;
}

.title span{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:700;
}

.title h2{
  font-size:46px;
  color:var(--dark);
  font-weight:900;
  margin-top:12px;
}

@media(max-width:991px){

.section-gap{
  padding:80px 0;
}
}

.about-image{
  position:relative;
}

.about-image img{
  border-radius:35px;
 /* height:700px;*/
  width:100%;
  object-fit:cover;
}

.about-content{
  padding-left:40px;
}

.about-content h2{
  font-size:54px;
  line-height:1.1;
  font-weight:900;
  color:var(--dark);
}

.about-content p{
  margin-top:25px;
  line-height:1.9;
  color:#555;
}

.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
  margin-top:45px;
}

.stat-box{
  background:#fff;
  border-radius:28px;
  padding:35px;
  box-shadow:0 20px 60px rgba(0,0,0,.06);
}

.stat-box h3{
  color:var(--gold);
  font-size:48px;
  font-weight:900;
}

.linktext{color:var(--gold); text-decoration:none; font-size:2rem}
.linktext:hover{color:#000}