@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/* Declare the font */
body{
    font-family: 'Helvetica', 'sans-serif';
}
p{
    font-family: 'Helvetica', 'sans-serif';
}
html {
  scroll-behavior: smooth;
}
@font-face {
  font-family: 'Helvetica';
  src: url('../font/helvetica/Helvetica.ttf') format('TrueType');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica-bold';
  src: url('../font/helvetica/Helvetica-Bold.ttf') format('TrueType');
  font-weight: normal;
  font-style: normal;
}
.ftrp{
  font-size:20px;
  font-weight:600;
  letter-spacing:1px;
}
.modal-title{
     font-family: "Playfair Display", serif;
     font-size:26px;
     color:#B38F51;
}
 
#preloader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #F7F0DA;
  z-index: 9999;
}

.pre-wrap { 
  text-align: center; 
  position: relative;
}

.pre-img {
  max-width: 150px;
  height: auto;
  opacity: 0;
  transform: scale(0.9);
  /* SLOWER: duration 7s (was 3s) + start after 1.2s (was .5s) */
  animation: imgReveal 7s ease forwards 1.2s;
}

.pre-underline {
  position: relative;
  height: 4px;
  width: 220px;
  margin: 14px auto 0;
  background: #F7F0DA;
  border-radius: 999px;
  overflow: hidden;
}
.pre-underline::before {
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #B38F51, transparent);
  /* SLOWER: duration 6.5s (was 3s) */
  animation: slideLine 6.5s ease-in-out forwards;
}

@keyframes slideLine {
  0%   { left: -40%; opacity: 1; }
  50%  { left: 60%;  opacity: 1; }
  100% { left: 100%; opacity: 0; } /* line fades */
}

@keyframes imgReveal {
  0%   { opacity: 0; transform: scale(0.9); }
  40%  { opacity: 1; transform: scale(1.05); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); } /* hide smoothly */
}


.chip {
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  color: #000;
  font-weight: 400;
   font-family:'Helvetica', 'sans-serif';
   font-size:14px;
}
    .smartbar{ position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:1040 }
    
 
    .smartbar .menu{ display:none; }
    .smartbar:hover .menu{ display:flex; }
    .smartbar:hover .chip{ display:none; }
    .smartbar .menu{ gap:8px; background:#F7F0DA; padding:8px; border-radius:999px; backdrop-filter: blur(6px);width:max-content }
    .smartbar .menu a{ color:#000; text-decoration:none; font-weight:500; padding:8px 14px; border-radius:999px ;
    font-family:'Helvetica','sans-serif';}
    .smartbar .menu a:hover{ background:#B38F51;color:#fff; }

    section{ position:relative; }
    #home{ min-height:100vh; color:#fff; background:#000; display:flex; align-items:center; }
    .bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .home-overlay{ position:relative; z-index:1; width:100% }
    .home-top{ position:absolute; top:18px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:center; z-index:2 }
    .brand-icon{ width:40px; height:40px; border-radius:10px; background:#fff; display:grid; place-items:center; color:#000; font-weight:800 }
    .home-center{ max-width:1000px; margin:0 auto; padding:120px 16px 120px; text-align:center }
    .home-center h1{ font-weight:400; font-size: 28px; line-height:30px; position:relative; display:inline-block; padding:0 20px;
    font-family: 'Helvetica','sans-serif'; text-transform:uppercase;color:#b38f51; }
    .home-center h1::before, .home-center h1::after{
      content:""; position:absolute; top:50%; width:80px; height:1px; background:#f1ce7c; transform:translateY(-50%);
    }
    .home-center h1::before{ left:-80px; }
    
    .home-center h1::after{ right:-80px; }

    .stacked{ display:grid; gap:14px; justify-items:center; margin-top:14px }
    .stacked img{ width:min(360px,90%);}
    .stacked p{ max-width:720px; color:#acabac;font-family:'Helvetica','sans-serif';font-size:28px; font-weight:400; line-height:1.4;text-transform: uppercase; }

    .home-bottom{ position:absolute; bottom:30px; left:0; right:0; z-index:2 ; font-family:'Helvetica','sans-serif';}
    .home-grid{ display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; max-width:1100px; margin:0 auto; padding:0 16px }
    .home-grid .tags{ display:flex; flex-wrap:wrap; gap:10px }
    .home-grid .tag{ color:#cbd5e1 }
    .home-grid .pipe{ width:1px; background:rgba(255,255,255,.25); height:18px; }

    #overview{ background:#fdf8e8; color:#b38f51; overflow:hidden }
    .corner-img{ position:absolute; width:min(36%, 320px); opacity:1; }
    .corner-img.tr{ top:-20px; right:-20px;  }
    .corner-img.bl{ bottom:-70px; left:-10px;  }
    .overview-inner{ position:relative; z-index:1; padding-top:60px;padding-bottom:50px; }

    #configurations .card{ border:2px solid #B38F51; background:#fff; color:#000; text-align:center; padding:20px; border-radius:0px }
    .card p{
        font-size:14px;
        margin-top:10px;
    }
    #configurations .card h5::after{
      content:""; display:block; height:2px; background:#B38F51; margin:6px auto;
    }
     #configurations .card h5{
        font-weight:700; font-size:14px;
     }

    #amenities .icon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:30px; justify-items:center }
    #gallery .gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
    #location .info-texts{ display:flex; justify-content:space-between; text-align:center; margin-bottom:20px }
    #location .info-texts div{ flex:1;  border-right:2px solid #000; padding:0 10px;color:#B38F51;font-weight:400; }
    #location .info-texts > div:last-child {
  border-right: 0;              /* no divider on the last item */
}
    #location .dropdown-group{ display:flex; justify-content:center; gap:15px; }
    #location .dropdown-group .btn{ flex:1 }

    #contact{ position:relative; color:#fff; text-align:center; padding:120px 20px }
    #contact .overlay{ position:relative; z-index:1 }

    footer{ background:#111827; color:#fff; padding:40px 20px; text-align:center }
    footer .contact-info{ display:flex; justify-content:center; gap:30px; margin-bottom:20px }
    footer .contact-info div{ display:flex; align-items:center; gap:10px }
  /* HOME specific updates */
.home-center .stack-underline{
  height:1px;
  width:350px;
  background:#b38f51;
  margin:0px auto 0;
}
.pipe {
  display: inline-block;
  width: 2px;               /* thin line */
  height: 16px;             /* adjust based on text size */
  background-color: #b38f51; /* or your theme color */
  margin: 0 8px;            /* spacing left & right */
  vertical-align: middle;
}
.home-bottom .small{
    color:#b38f51;
    font-size:20px;
    /* font-weight:700; */
    text-transform: capitalize;
  /*font-family: 'Helvetica-bold', 'sans-serif';*/
}
.btn-dwnld{
    background:#fff2e9;
    border:1px solid #b38f51;
    color:#b38f51;
    /* font-weight:700; */
    border-radius:15px;
    padding:8px 15px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    /*font-family: 'Helvetica-bold', 'sans-serif';*/
  }

    .btn-dwnld:hover{
      
       background-color: #000;
       color:#b38f51;
       /* opacity:0.5; */
     
    }

    .hdln{
          font-family: "Playfair Display", serif;
          font-weight:400;
          font-size:36px;
          line-height:50px;
    }
    .helvhdln{
            font-family: 'Helvetica-bold', 'sans-serif';
            /* font-weight:700; */
            font-size:32px;
            line-height:50px;
            text-transform: uppercase;
    }
    #configurations{ background:#FAF6E1; }
    .btn-config{
        background-color: #B38F51;
        color:#fff;
        font-weight:400;
        border-radius: 25px;
        text-decoration:none;
        font-size:13px;
    }
    .btn-config:hover{
      border:1px solid #B38F51;
    }
    .amenities-section {
  position: relative;
  background: url('../images/amenities-bg.jpg') center/cover no-repeat;
}
.amenity-label{
    font-weight:400;
    font-size:16px;
    color:#B38F51;

}
.hdln1{
            /* font-weight:700; */
            font-size:32px;
            line-height:50px;
            color:#B38F51;
            text-transform: uppercase;
             font-family: 'Helvetica-bold', 'sans-serif';
}
.conn .small{
    color:#B38F51;
    font-size:26px;
    font-weight:400;
    text-transform: capitalize;
    vertical-align: middle;
}
.conn .pipe{
    background-color: #000;
    height:26px;
    width:2px;
}
   /* Group spacing */
.dropdown-group .btn { min-width: 120px; }

/* Make dropdowns a bit softer on dark sections */
.dropdown-menu-dark {
  --bs-dropdown-bg: #000;;  /* matches #111827 */
  --bs-dropdown-link-color: #e5e7eb;
  --bs-dropdown-link-hover-bg: rgba(255,255,255,.06);
  width:250px;
}
.dropdown-menu .dropdown-item-text { padding: .25rem 1rem; display: block; }
.dropdown-menu .dropdown-header { color: #9ca3af; font-weight: 600; }

.btn-config1{
      background-color: #B38F51;
        color:#fff;
        font-weight:400;
        border-radius: 10px;
        text-decoration:none;
        font-size:20px;
        padding:8px 36px;
}
.btn-config1:hover{
  border:1px solid #B38F51;
}
/* Right caret (CSS triangle) */
.dropdown-menu .dropdown-item-text::before {
  content: "";
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid currentColor;  /* inherits text color */
  opacity: .9;
  margin-right: .75rem;
}

/* Slight nudge on hover */
.dropdown-menu .dropdown-item-text:hover::before {
  transform: translateX(2px);
  transition: transform .15s ease;
}
.dropdown-menu .dropdown-item-text {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  padding: .4rem 1rem;
  font-size:12px;
}
/* Optional: lighten caret specifically on dark menus */
.dropdown-menu-dark .dropdown-item-text { color: #e5e7eb; }
.dropdown-menu-dark .dropdown-item-text::before { border-left-color: #ffffffcc; }
.whthdln{
            font-family: "Playfair Display", serif;
            font-weight:400;
            font-size:50px;
            line-height:55px;
            color:#fff;
            margin-bottom:15px;
            letter-spacing: 2px;
}
.wgtfnt{
    font-weight:400;
    font-size:16px;
}
.btn-gtn{
    background:#D6D6D6;
    color:#000;
    font-weight:400;
    border-radius:25px;
    padding:8px 24px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
}
.disctxt{
    font-size:12px;
    font-weight:400;
}

@media (max-width: 768px) {

    .home-center h1::before, .home-center h1::after{
      content:""; position:absolute; top:50%; width:20px!important; 
    }
    .home-center h1::before{ left: -15px!important; }
    .home-center h1::after{ right: -15px!important; }
    .stacked{
        display: block!important;
    }
    .home-center .stack-underline{
        width:200px!important;
    }
    .home-center{
            padding: 30px 20px 200px!important;
    }
    .home-top{
        top:0px!important;
    }
    .home-center h1{
        font-size:26px!important;
    }
    .stacked p {
        font-size: 20px!important;
        margin-top:20px;
    }
    .conn .small{
        font-size:20px!important;
    }
    .conn .pipe {
        height:20px!important;
    }
    .smartbar:hover .menu {
    display: grid!important;
}
.smartbar .menu {
    text-align: center;
    width:300px!important;
    border-radius:0px;
}
.hdln{
  font-size:30px!important;
  line-height:36px!important;
}
.sticky-stack #home{
    height:70vh!important;
}
:root { --overviewH: 70vh!important; }
}

#home::before{
  content:"";
  position:absolute;
  inset:0;
  background: #fffaea;
  opacity:0.7;
  z-index:1;
  pointer-events:none;
}

/* ===== Stacked sticky (home=100vh, overview=70vh) ===== */
:root { --overviewH: 70vh; }

.sticky-stack{
  position: relative;
  height: calc(100vh + var(--overviewH)); /* precise timeline */
  isolation: isolate;
}

.sticky-stack #home{
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
}

.sticky-stack #overview{
  position: sticky;
  top: 0;
  min-height: var(--overviewH); /* 70vh */
  z-index: 2;                   /* sits over #home */
  background: #fdf8e8;          /* your overview bg */
}

/* Extend overview bg to cover the remaining viewport
   so HOME never peeks under while overview is pinned */
#overview{ position: relative; }
#overview::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: calc(-1 * (100vh - var(--overviewH)));
  height: calc(100vh - var(--overviewH)); /* 30vh if 70vh above */
  background: inherit;
  pointer-events:none;
  z-index:0;
}
#overview > *{z-index:1; }

@media (max-width: 767.98px){
  :root { --overviewH: 70vh; } /* tweak if you want faster reveal */
}
/* Give the element some depth + smoothness */
[data-tilt]{
  transform-style: preserve-3d;
  transition: box-shadow .2s ease;
  border-radius: 12px;
}

.flip-3d{
  perspective: 1000px;
  display: inline-block;
}
.flip-3d .flip-inner{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .55s ease;
}
.flip-3d:hover .flip-inner{
  transform: rotateY(180deg);
}
.flip-3d .front,
.flip-3d .back{
  display: block;
  backface-visibility: hidden;
  width: 100%;
  height: auto;
}
.flip-3d .back{
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
.btn-gtn:hover{
  border:1px solid #fff;
}

/* Wave text */
.wave {
  display: inline-flex;
  gap: 0.02em;
  font-weight: 700;               /* tweak as you like */
  will-change: transform;
}

.wave .char {
  display: inline-block;
  white-space: pre;               /* preserves spaces */
  animation: waveFloat 1.8s ease-in-out infinite;
}

/* gentle float wave */
@keyframes waveFloat {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-8px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(8px); }
}

/* optional niceties */
.wave:hover .char { animation-play-state: paused; }  /* pause on hover */
@media (prefers-reduced-motion: reduce) {
  .wave .char { animation: none; }
}
/* Floating, rounded button (hidden by default) */
.to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #000;
  color:#fff;
  display: grid;
  place-items: center;
  font-size: 20px;              /* FA 4.7 icon size */
  cursor: pointer;
  z-index: 1060;                /* above most UI */
  box-shadow: var(--top-btn-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
}

.to-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}

.to-top:hover{ background-color:  #B38F51;color:#fff;}
.to-top:focus{ outline: none; box-shadow: 0 0 0 3px rgba(179,143,81,.35), var(--top-btn-shadow); }

@media (max-width: 575.98px){
  .to-top{
    right: 12px;
    bottom: 12px;
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
}


/* container hides edges */
#configurations .marquee{ overflow:hidden; position:relative; }

/* seamless track */
#configurations .marquee-track{
  flex-wrap: nowrap;                 /* single line */
  will-change: transform;
  animation: cfg-scroll-right var(--cfg-speed, 30s) linear infinite;
}

/* pause on hover (optional) */
#configurations .marquee:hover .marquee-track{ animation-play-state: paused; }

/* RIGHTWARD infinite scroll of exactly 2 groups */
@keyframes cfg-scroll-right{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0%); }
}

/* IMPORTANT: remove spacer columns inside the moving track */
#configurations .marquee-track > .col-lg-1{ display:none !important; }


  /* Simple form fields */
  .contact-modal .form-control, 
  .contact-modal textarea {
    height: 36px;
    font-size: 13px;
    border-radius: 5px;
      font-family: 'Helvetica', 'sans-serif';
  }
  .contact-modal textarea {
    min-height: 100px;
    resize: vertical;
  }
  .contact-modal .btn-submit {
    height: 36px;
    font-size: 13px;
      font-family: 'Helvetica', 'sans-serif';
  }
  .contact-modal .modal-header {
    /*background:rgba(0,0,0,0.8);*/
    color: #fff;
    
    z-index:1;
    
  }
   .modal-content {
    border: none !important;
    border-radius: 15px !important;
    color: #fff;
    position: relative;
    overflow: hidden;
    background:none!important;
  }


  .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    border-radius: 15px;
    z-index: 0;
    opacity:0.8;
   
  }
  .d-grid1{
      float:right;
  }
@media (min-width: 1440px) {
    .overview-inner{
    padding-top:180px!important}
}
.form-control{
    background:#fdf8e8!important;
}
/* Apply to any image */
.slow-rotate {
  display: inline-block;
  transform-origin: center center;
  animation: swingRotate 8s ease-in-out infinite;
}

/* Keyframes: rotate clockwise and anticlockwise */
@keyframes swingRotate {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }   /* clockwise tilt */
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-5deg); }  /* anticlockwise tilt */
  100% { transform: rotate(0deg); }
}