:root{
  --dark:#111827;
  --gold:#c89b3c;
  --blue:#001d34;
  --soft:#f7f3ea;
}
*{scroll-behavior:smooth; box-sizing:border-box;}
body{font-family:Arial, sans-serif;color:#1b1b1b;overflow-x:hidden;width:100%}
.topbar{background:var(--dark);color:#fff;font-size:14px;padding:8px 0}
.navbar{background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.navbar-brand{font-weight:800;color:var(--blue);letter-spacing:.5px}
.nav-link{font-weight:600;color:#222!important;line-height: 34px;}
.btn-gold{background:var(--gold);color:#fff;border-radius:50px;padding:12px 26px;border:0}
.btn-gold:hover{background:#a77d25;color:#fff}
.bg-soft{background:var(--soft)}
.linktext{color:var(--gold); text-decoration:none; font-size:2rem}
.linktext:hover{color:#000}
.hero{
  min-height:90vh;
  background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.35)),
  url('../images/omaxe-residences-img13.jpg') center/cover;
  display:flex;align-items:center;color:#fff;
}
.hero h1{font-size:64px;font-weight:900}
.hero-box{background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);border-radius:22px;padding:25px}
.section{padding:90px 0}
.title span{color:var(--gold);font-weight:800;text-transform:uppercase}
.title h2{font-size:42px;font-weight:900;color:var(--blue)}
.feature-card,.amenity-card,.spec-card,.payment-card{
  background:#fff;border-radius:22px;padding:28px;height:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  transition:.35s;
}
.feature-card:hover,.amenity-card:hover,.spec-card:hover{transform:translateY(-8px)}
.icon{
  width:58px;height:58px;border-radius:50%;background:var(--soft);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:24px;margin-bottom:18px
}
.bg-soft{background:var(--soft)}
.img-premium{border-radius:26px;box-shadow:0 25px 60px rgba(0,0,0,.15)}
.floor-card img,.site-img{border-radius:20px;width:100%;box-shadow:0 18px 45px rgba(0,0,0,.12)}
.contact-box{background:var(--blue);color:#fff;border-radius:28px;padding:40px}
.form-control{height:52px;border-radius:14px}
footer{background:#101820;color:#ccc;padding:35px 0}
.offcanvas{width:290px!important}

    .pay-wrap{
      margin:auto;
    }
    .pay-head{text-align:center;margin-bottom:55px}
    .pay-head span{
      color:#c89b3c;
      font-weight:800;
      letter-spacing:1px;
      text-transform:uppercase;
    }
    .pay-head h2{
      font-size:46px;
      font-weight:900;
      /*color:#244b3a;*/
      margin:8px 0 0;
    }
    .pay-grid{
      display:grid;
      grid-template-columns:420px 1fr;
      gap:35px;
      align-items:stretch;
    }
    .booking-card{
      background:var(--blue);
      color:#fff;
      border-radius:28px;
      padding:38px;
      position:relative;
      overflow:hidden;
      box-shadow:0 25px 60px rgba(36,75,58,.22);
    }
    .booking-card:before{
      content:"";
      position:absolute;
      width:210px;height:210px;
      border-radius:50%;
      background:rgba(200,155,60,.25);
      right:-80px;top:-80px;
    }
    .booking-card h3{font-size:30px;margin-bottom:25px}
    .booking-list{
      display:grid;
      gap:14px;
      margin-bottom:32px;
    }
    .booking-item{
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.18);
      border-radius:16px;
      padding:16px 18px;
      display:flex;
      justify-content:space-between;
      gap:15px;
    }
    .booking-item strong{color:#f2c15b}
    .pay-btn{
      display:inline-block;
      background:#c89b3c;
      color:#fff;
      padding:14px 30px;
      border-radius:50px;
      text-decoration:none;
      font-weight:700;
    }
    .plan-card{
      background:#fff;
      border-radius:28px;
      padding:34px;
      box-shadow:0 25px 60px rgba(0,0,0,.08);
    }
    .timeline{
      position:relative;
      display:grid;
      gap:18px;
    }
    .timeline:before{
      content:"";
      position:absolute;
      left:27px;
      top:20px;
      bottom:20px;
      width:2px;
      background:#ead7aa;
    }
    .step{
      position:relative;
      display:grid;
      grid-template-columns:58px 1fr;
      gap:18px;
      align-items:center;
    }
    .step-no{
      width:56px;height:56px;
      background:#fff8e8;
      border:2px solid #c89b3c;
      color:#244b3a;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      z-index:2;
    }
    .step-content{
      background:#fafafa;
      border-radius:18px;
      padding:20px 24px;
      border:1px solid #eee;
    }
    .step-content h4{
      font-size:18px;
      margin:0 0 5px;
      color:#111;
      font-weight:800;
    }
    .step-content p{
      margin:0;
      font-size:18px;
      color:#333;
    }
    @media(max-width:991px){
      .pay-grid{grid-template-columns:1fr}
      .pay-head h2{font-size:34px}
    }

@media(max-width:767px){
  .hero{min-height:78vh;text-align:center; padding-top: 1rem;}
  .hero h1{font-size:35px}
  .section{padding:60px 0}
  .title h2{font-size:30px}
}






    .project-specs{
      padding:90px 0;
      background:#fff;
      font-family:Arial,sans-serif;
    }
    .spec-wrap{
      width:min(1180px,92%);
      margin:auto;
    }
    .spec-head{
      text-align:center;
      margin-bottom:55px;
    }
    .spec-head span{
      color:#c89b3c;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:1px;
    }
    .spec-head h2{
      font-size:46px;
      font-weight:900;
      color:var(--blue);
      margin:8px 0 0;
    }
    .spec-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
    }
    .spec-card{
      background:#f8f5ee;
      border-radius:24px;
      padding:30px;
      border:1px solid #eee1c7;
      position:relative;
      overflow:hidden;
      transition:.35s ease;
    }
    .spec-card:hover{
      transform:translateY(-8px);
      box-shadow:0 22px 55px rgba(0,0,0,.09);
      background:#fff;
    }
    .spec-icon{
      width:62px;
      height:62px;
      border-radius:18px;
      background:var(--blue);
      color:#c89b3c;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:26px;
      margin-bottom:22px;
    }
    .spec-card h4{
      font-size:20px;
      font-weight:800;
      color:var(--blue);
      margin-bottom:10px;
    }
    .spec-card p{
      margin:0;
      color:#444;
      line-height:1.7;
      font-size:15px;
    }
    @media(max-width:991px){
      .spec-grid{grid-template-columns:repeat(2,1fr)}
      .spec-head h2{font-size:34px}
    }
    @media(max-width:575px){
      .spec-grid{grid-template-columns:1fr}
    }



.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 var(--gold);}/*.hero-section .min-vh-100 {padding-top: 25px !important;}*/.joinwebchat{display:none}.site-header{padding: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;
}

}