:root{
  --lux-gold: #e0c89a;
  --lux-deep: #382e2d;
  --bg: #f7f3ee;
  --muted: #666;
}

body{
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--lux-deep);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin:0;
  padding:0;
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1212px;
    }
}

/* ---------------- Header ---------------- */
.luxury-nav{
  background: linear-gradient(180deg, rgb(149 101 67), rgb(149 101 67));
  padding: 10px 0;
}
.navbar-brand img{ height:48px; transition: transform .3s; }
.navbar-brand img:hover{ transform: scale(1.05); }
.nav-link{ color:#fff !important; font-weight:500; margin:0 8px; position:relative; }
.nav-link::after{ content:''; width:0; height:2px; background:var(--lux-gold); position:absolute; left:0; bottom:-6px; transition:width .35s; }
.nav-link:hover{ color: var(--lux-gold) !important; }
.nav-link:hover::after{ width:100%; }

.btn-call{
  background: var(--lux-gold); color: var(--lux-deep); font-weight:700; border-radius:30px;
  padding:8px 16px; box-shadow: 0 6px 18px rgba(57,40,35,0.12);
}
.btn-call:hover{ transform: translateY(-2px); }

/* ---------------- Hero ---------------- */
.hero {
  position:relative;
  height:78vh;
  min-height:520px;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
  background-image: url('../img/1.webp'); /* REPLACE with your hero background image or keep right-side image */
  background-size:cover;
  background-position:center;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgb(15 12 10 / 15%) 0%, rgb(15 12 10 / 25%) 60%);
}
.hero .container{ position:relative; z-index:2; }
.hero h1{
  font-size:40px; 
  font-weight:700; 
  letter-spacing:0.6px;
  text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.hero p.lead{ font-size:18px; color:#fff; max-width:720px; }

/* Opulent floated badge */
.badge-pill-lux{
  background: rgba(224,200,154,0.95);
  color: var(--lux-deep);
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  box-shadow: 0 10px 30px rgba(224,200,154,0.12);
}

/* ---------------- Animations: float LR and float UP ---------------- */
@keyframes floatLR {
  0%{ transform: translateX(0px); }
  50%{ transform: translateX(16px); }
  100%{ transform: translateX(0px); }
}
@keyframes floatLR2 {
  0%{ transform: translateX(0px); }
  50%{ transform: translateX(-16px); }
  100%{ transform: translateX(0px); }
}
@keyframes floatUp {
  0%{ transform: translateY(18px); opacity:0; }
  60%{ transform: translateY(-6px); opacity:1; }
  100%{ transform: translateY(0); opacity:1; }
}
.float-lr { animation: floatLR 5s ease-in-out infinite; }
.float-lr-slow { animation: floatLR 8s ease-in-out infinite; }
.float-lr-rev { animation: floatLR2 6s ease-in-out infinite; }
.float-up { animation: floatUp 1s ease forwards; }

/* ---------------- Sections & Cards ---------------- */
section {
 padding:60px 0; 
}
.section-title{
  font-size:26px; font-weight:700; text-align:center; margin-bottom:28px; color:var(--lux-deep);
}
.muted { color:var(--muted); line-height: 25.3px; }

.image-card{
  border-radius: 1px; overflow:hidden; box-shadow: 0 10px 30px rgba(50,40,40,0.06);
  transition: transform .35s, box-shadow .35s;
  background:#fff;
}
.image-card:hover{ transform: translateY(-8px); box-shadow: 0 18px 40px rgba(50,40,40,0.12); }
.image-card img{ width:100%; height:270px; object-fit:cover; display:block; }

/* Pricing table */
.pricing-table th, .pricing-table td{ padding:16px;  text-align:center; vertical-align:middle; }
.pricing-table thead th{ 
  background: #956543;
   color:#fff; font-weight:600;
    border-radius: 0; 
  }
.pricing-badge{ 
  background:var(--lux-gold); 
  color:var(--lux-deep); 
  padding:8px 12px; 
  border-radius:8px; 
  font-weight:700; 
  display:inline-block; }

/* Floor Plan cards */
.floor-card img {
    height: 282px;
    object-fit: contain;
    background: #fff;
    padding: 0px;
}
.floor-card-t {
    padding: 20px;
}
/* Amenities grid */
.amenity{
  border-radius:10px; overflow:hidden; position:relative; background:#fff; transition: transform .35s;
  box-shadow: 0 8px 26px rgba(50,40,40,0.06);
}
.amenity img{ width:100%; height:300px; object-fit:cover; display:block; }
.amenity .tag{ position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,0.9); padding:6px 10px; border-radius:6px; font-weight:600; color:var(--lux-deep); }

/* Highlights / bullets */
.check-item{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.check-item i{ color:var(--lux-gold); font-size:18px; margin-top:4px; }

.image-card.highlight img {
  height: 350px;
}

/* Location map */
.map-card{ height:320px; background:#ddd; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#444; }

/* Footer */
footer{ background:#f1ece4; padding:40px 0; color:var(--muted); }
footer a{ color:var(--lux-deep); text-decoration:none; font-weight:600; }

/* Responsive tweaks */
@media (max-width:991px){
  .hero{ height:64vh; min-height:420px; }
  .hero h1{ font-size:36px; }
  .image-card img{ height:200px; }
  .amenity img{ height:160px; }
}

/* Frosted luxury panel */
.elaira-hero-box {
  background: linear-gradient(135deg, rgb(102 85 85 / 26%), rgb(24 11 11 / 58%));
  /*border: 1px solid rgba(255, 255, 255, 0.08);*/
  border-radius: 20px;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}

/* Floating animation */
@keyframes floatBox {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* Title */
.elaira-title {
  letter-spacing: 1px;
  font-family: 'Playfair Display', serif;
  color: #fff;
  position: relative;
  text-shadow: 0 3px 15px rgba(0,0,0,0.4);
}

/* Icon styles */
.elaira-icon,
.icon-gold {
  color: #d4af37;
  margin-right: 10px;
  animation: iconGlow 2s infinite ease-in-out;
}

/* Glow effect for icons */
@keyframes iconGlow {
  0% { filter: drop-shadow(0 0 0px rgba(212,175,55,0.4)); }
  50% { filter: drop-shadow(0 0 8px rgba(212,175,55,1)); }
  100% { filter: drop-shadow(0 0 0px rgba(212,175,55,0.4)); }
}

/* Gold underline under title */
.elaira-title::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -8px;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #d4af37, #fff2b3);
  animation: titleLine 2s forwards ease-out;
}

@keyframes titleLine {
  to { width: 80%; }
}

/* Text colors */
.elaira-location { color: #e6e6e6; }
.elaira-prebook { color: #fafafa; font-weight: 600; }

/* Badge shimmer */
.badge-pill-lux {
  padding: 10px 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, #d4af37 0%, #f5e9b8 50%, #d4af37 100%);
  color: #000;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  overflow: hidden;
  background-size: 400% 100%;
}

.animate-shimmer {
  animation: shimmerEffect 3s infinite linear;
}

@keyframes shimmerEffect {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* Fade animations */
.animate-fade-slide {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlide 1.3s forwards ease-out;
}
@keyframes fadeSlide {
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade {
  opacity: 0;
  animation: fadeIn 1.6s forwards ease-out;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* Float animation for single-run elements (class added by JS) */
@keyframes floatOnce {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.float-once-active {
  animation: floatOnce 1.2s ease-out forwards;
}

/* subtle focus/hover for form inputs */
.form-control:focus {
  box-shadow: 0 6px 18px rgba(56,46,45,0.08);
  border-color: var(--lux-deep);
}

/* small modal style */
.modal-content { border-radius: 12px; }


section#overview {
    background-color: #fff;
}
section#pricing {
    background-color: #fff;
}
section#amenities {
    background-color: #fff;
}
section#location {
    background-color: #fff;
}

.fix-whats {
    display: flex;
    background: #25d366;
    color: #fff;
    border-radius: 999px;
    padding: 12px 11px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    height: 50px;
    width: 50px;
    align-items: center;
}
.fix-whats i {
  font-size: 34px;
}

.image-card.gallery img {
  height: 370px;
  box-shadow: var(--shadow);
  border: 15px solid var(--white);
}




.text-gold { color: #d4af37; }
.border-gold { border-color: #d4af37 !important; }

.amenity-card {
  background: #111;
  padding: 10px;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 14px;
  cursor: pointer;
  transition: .3s;
}
.amenity-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px rgba(212,175,55,0.3);
  border-color: #d4af37;
}
.amenity-title {
  color: #fff;
  text-align: center;
  margin-top: 8px;
}




.amenity-card {
      background:#fff;
      border:1px solid rgba(212,175,55,0.2);
      border-radius:12px;
      padding:8px;
      cursor:pointer;
      transition:.3s;
      text-align:center;
    }
    .amenity-card:hover { transform:translateY(-6px); }

    .amenity-card img {
      width:100%;
      height:270px;
      object-fit:cover;
      border-radius:10px;
    }

    #amenitySlider img {
      width:100%;
      height:70vh;
      object-fit:cover;
      border-radius:8px;
    }

    .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 500px;
    height: 400px;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
    margin: auto;
}

.modal-luxury {
  border: none;
  background: #fff;
}

.luxury-left {
  min-height: 500px;
}

.btn-luxury {
  background: #8b5e3c;
  color: white;
  font-size: 1.1rem;
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  transition: 0.2s;
}

.btn-luxury:hover {
  background: #70492c;
}

.form-control-lg {
  border-radius: 10px;
  padding: 12px 15px;
}

.modal-content {
  border-radius: 20px !important;
}
p.lead.elaira-investors.mt-3.animate-fade {
    font-size: 21px;
    font-weight: 700;
}
.fix-whats{
	display: block;
}
.touch-pont{
	display: none;
}
@media (max-width: 768px) {
  .touch-pont {
    display: block;
    position: fixed;
    width: 100%;
    background: #2d2d2d;
    z-index: 99;
    bottom: 0;
    padding: 10px 0;
  }
}
@media (max-width: 768px) {
  .touch-pont ul {
    list-style: none;
  }
}

@media (max-width: 768px) {
  .touch-pont ul li {
    width: 32%;
    float: left;
    text-align: center;
    border-right: solid 1px #ccc;
  }
}
@media (max-width: 768px) {
  .touch-pont ul li.call a {
    color: #f24839;
    text-decoration: none;
  }
}

@media (max-width: 768px) {
  .touch-pont ul li {
    width: 32%;
    float: left;
    text-align: center;
    border-right: solid 1px #ccc;
	font-size: 16px;
  }
  .touch-pont i {
  margin: 3px 5px;
}
.fix-whats{
	display: none;
}
.call-btn{
	display: none;
}
}
@media (max-width: 768px) {
  .touch-pont ul li.mail a {
    color: #dfab0b;
    text-decoration: none;
  }
  .wapp a{
      text-decoration: none;
  }
}