/* =====================================================
   HOTEL HARSH GARDEN VARANASI â€” CUSTOM STYLES
   Design tokens
   ----------------------------------------------------
   --black        : #0a0a0a  (primary background, matches logo)
   --black-soft   : #131313  (card / section background)
   --navy         : #10233f  (temple silhouette blue, secondary accent)
   --gold         : #d4af37  (primary accent, matches logo)
   --gold-light   : #f0d98c  (hover / highlight)
   --maroon       : #7a1f2b  (ghat vermilion accent, used sparingly)
   --ivory        : #f7f2e9  (light section background)
   --text-light   : #ece3cf
   Fonts: Playfair Display (display), Cormorant Garamond (accent), Jost (body)
===================================================== */

:root{
  --black:#0a0a0a;
  --black-soft:#131313;
  --black-elev:#1a1a1a;
  --navy:#10233f;
  --gold:#d4af37;
  --gold-light:#f0d98c;
  --gold-deep:#a9822a;
  --maroon:#7a1f2b;
  --ivory:#f7f2e9;
  --text-light:#ece3cf;
  --text-muted:#b9b0a0;

  --font-display:'Playfair Display', serif;
  --font-accent:'Cormorant Garamond', serif;
  --font-body:'Jost', sans-serif;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  background:var(--black);
  color:var(--text-light);
  font-weight:300;
  overflow-x:hidden;
}

a{text-decoration:none;}

::selection{background:var(--gold); color:#0a0a0a;}

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; background:var(--black);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader.loaded{opacity:0; visibility:hidden;}
.diya-loader{
  width:46px; height:46px; border-radius:50%;
  border:3px solid rgba(212,175,55,.25);
  border-top-color:var(--gold);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Utility: eyebrow labels (signature motif = gold vertical line, echoes the logo divider) ---------- */
.section-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body);
  letter-spacing:3px;
  font-size:.78rem;
  font-weight:500;
  color:var(--gold);
  margin-bottom:14px;
}
.eyebrow-line{
  display:inline-block; width:28px; height:1px; background:var(--gold);
}
.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.9rem, 3vw, 2.4rem);
  color:#fff;
  margin-bottom:18px;
}
.section-title.light{color:#fff;}
.section-text{
  font-family:var(--font-body);
  font-weight:300;
  color:var(--text-muted);
  line-height:1.85;
  font-size:1rem;
}
.section-head{margin-bottom:48px;}

.gold-divider{
  width:70px; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent);
  margin:18px auto;
}

/* ---------- Buttons ---------- */
.btn-gold-fill{
  background:linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  color:#171008; border:none;
  font-family:var(--font-body); font-weight:500; letter-spacing:1px;
  padding:.85rem 2rem; border-radius:2px;
  text-transform:uppercase; font-size:.82rem;
  transition:transform .3s ease, box-shadow .3s ease;
}
.btn-gold-fill:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(212,175,55,.35);
  color:#171008;
}
.btn-gold-outline{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold-light);
  font-family:var(--font-body); font-weight:500; letter-spacing:1px;
  padding:.8rem 2rem; border-radius:2px;
  text-transform:uppercase; font-size:.82rem;
  transition:all .3s ease;
}
.btn-gold-outline:hover{
  background:var(--gold);
  color:#171008;
}
.btn-enquiry{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold-light);
  padding:.5rem 1.3rem;
  font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase;
  border-radius:2px;
  transition:all .3s ease;
}
.btn-enquiry:hover{background:var(--gold); color:#171008;}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--black-soft);
  border-bottom:1px solid rgba(212,175,55,.15);
  font-size:.82rem;
}
.topbar-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; color:var(--text-muted);
}
.topbar-right a{color:var(--text-muted); margin-left:6px;}
.topbar-right a:hover{color:var(--gold);}
.topbar .divider{margin:0 12px; color:rgba(212,175,55,.3);}

/* ---------- Navbar ---------- */
.main-navbar{
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(8px);
  padding: 6px 0;
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid rgba(212,175,55,.12);
  transition:padding .3s ease, background .3s ease;
}
.main-navbar.scrolled{padding:8px 0; background:rgba(8,8,8,.98);}
.navbar-brand{display:flex; align-items:center; gap:12px;}
.brand-logo{height: 65px;width:auto;transition:height .3s ease;}
.main-navbar.scrolled .brand-logo{height:42px;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-title{font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.15rem;}
.brand-sub{font-family:var(--font-body); color:var(--gold); font-size:.65rem; letter-spacing:3px;}

.navbar-nav .nav-link{
  color:var(--text-light);
  font-size:.85rem; letter-spacing:1px; text-transform:uppercase;
  font-weight:400;
  padding:.5rem .9rem !important;
  position:relative;
  transition:color .3s ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus{color:var(--gold);}
.navbar-nav .nav-link::after{
  content:''; position:absolute; left:.9rem; right:.9rem; bottom:.2rem; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.navbar-nav .nav-link:hover::after{transform:scaleX(1);}
.navbar-toggler{border-color:rgba(212,175,55,.4);}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(212,175,55,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Hero ---------- */
.hero-section{
  position:relative; height:100vh; min-height:600px; overflow:hidden;
}
.hero-section .carousel, .hero-section .carousel-inner, .hero-section .carousel-item{height:100%;}
.hero-img{width:100%; height:100vh; min-height:600px; object-fit:cover;}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 40%, rgba(10,10,10,.85) 100%);
  z-index:1;
}
.hero-content{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; width:90%; max-width:780px;
}
.hero-content .eyebrow{
  color:var(--gold-light); letter-spacing:5px; font-size:.85rem; font-weight:500;
}
.hero-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.4rem, 6vw, 4.5rem);
  color:#fff; margin:10px 0 0;
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.hero-tagline{
  font-family:var(--font-accent); font-style:italic; font-weight:500;
  font-size:clamp(1.05rem, 2vw, 1.4rem);
  color:var(--text-light);
  margin-bottom:34px;
}
.hero-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.scroll-cue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:2; width:26px; height:42px; border:2px solid var(--gold); border-radius:20px;
  display:flex; justify-content:center; padding-top:6px;
}
.scroll-cue span{
  width:4px; height:8px; background:var(--gold); border-radius:2px;
  animation:scrollDown 1.6s infinite;
}
@keyframes scrollDown{
  0%{opacity:1; transform:translateY(0);}
  100%{opacity:0; transform:translateY(14px);}
}

/* ---------- Temple arch divider (signature motif) ---------- */
.arch-divider{width:100%; line-height:0; background:var(--black);}
.arch-fill{fill:var(--black-soft);}

/* ---------- About ---------- */
.about-section{background:var(--black-soft);padding: 60px 0;}
.about-img-wrap{position:relative;}
.about-img-main{border-radius:4px; width:100%; object-fit:cover; height:460px; box-shadow:0 25px 60px rgba(0,0,0,.5);}
.about-img-frame{
  position:absolute; top:-18px; left:-18px; right:18px; bottom:18px;
  border:1px solid var(--gold); border-radius:4px; z-index:-1;
}
.about-badge{
  position:absolute; bottom:-24px; right:-10px;
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#171008; padding:18px 22px; border-radius:4px;
  text-align:center; box-shadow:0 15px 30px rgba(0,0,0,.4);
  font-family:var(--font-display);
}
.about-badge-num{display:block; font-size:1.1rem; font-weight:700;}
.about-badge-text{display:block; font-size:.72rem; font-weight:600; letter-spacing:.5px;}
.about-points{color:var(--text-light);}
.about-point{display:flex; align-items:center; gap:10px; font-size:.92rem;}
.about-point i{color:var(--gold); font-size:1.1rem;}

/* ---------- Amenities ---------- */
.amenities-section{background:var(--black); padding:100px 0;}
.amenity-card{
  background:var(--black-soft);
  border:1px solid rgba(212,175,55,.12);
  border-radius:6px;
  text-align:center;
  padding:36px 16px;
  transition:transform .35s ease, border-color .35s ease, background .35s ease;
  height:100%;
}
.amenity-card i{font-size:2rem; color:var(--gold); margin-bottom:14px; display:inline-block;}
.amenity-card h5{
  font-family:var(--font-body); font-size:.92rem; font-weight:500; color:var(--text-light); margin:0;
}
.amenity-card:hover{
  transform:translateY(-8px);
  border-color:var(--gold);
  background:linear-gradient(160deg, var(--black-elev), var(--black-soft));
}

/* ---------- Rooms ---------- */
.rooms-section{background:var(--navy); padding:100px 0; position:relative;}
.rooms-section::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at top, rgba(212,175,55,.06), transparent 60%);
}
.room-card{
  background:var(--black-soft);
  border-radius:6px; overflow:hidden;
  position:relative; z-index:1;
  border:1px solid rgba(212,175,55,.1);
  transition:transform .35s ease, box-shadow .35s ease;
  height:100%;
  display:flex; flex-direction:column;
}
.room-card:hover{transform:translateY(-6px); box-shadow:0 25px 45px rgba(0,0,0,.4);}
.room-card.featured{border-color:var(--gold);}
.room-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--gold); color:#171008; font-size:.7rem; letter-spacing:1px;
  padding:5px 12px; border-radius:20px; font-weight:600; text-transform:uppercase;
}
.room-img-wrap{position:relative; height:230px; overflow:hidden;}
.room-img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.room-card:hover .room-img-wrap img{transform:scale(1.08);}
.room-price{
  position:absolute; bottom:12px; right:12px;
  background:rgba(10,10,10,.85); color:var(--gold-light);
  padding:6px 12px; border-radius:4px; font-size:.8rem; font-family:var(--font-body); font-weight:500;
}
.room-body{padding:26px; flex:1; display:flex; flex-direction:column;}
.room-body h4{font-family:var(--font-display); color:#fff; margin-bottom:10px;}
.room-body p{color:var(--text-muted); font-size:.9rem; line-height:1.7;}
.room-feats{list-style:none; padding:0; margin:14px 0 20px; flex:1;}
.room-feats li{color:var(--text-light); font-size:.85rem; margin-bottom:6px;}
.room-feats i{color:var(--gold); margin-right:8px;}

/* ---------- Booking ---------- */
.booking-section{background:var(--black); padding:100px 0;}
.booking-box{
  background:var(--black-soft);
  border:1px solid rgba(212,175,55,.15);
  border-radius:8px;
  overflow:hidden;
}
.booking-img{min-height:340px;}
.booking-img img{object-fit:cover;}
.booking-form-wrap{padding:48px;}
.booking-form label{
  color:var(--text-muted); font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; margin-bottom:6px;
}
.form-control, .form-select{
  background:var(--black-elev);
  border:1px solid rgba(212,175,55,.2);
  color:var(--text-light);
  padding:.65rem .9rem;
  border-radius:3px;
  font-family:var(--font-body); font-weight:300;
}
.form-control:focus, .form-select:focus{
  background:var(--black-elev);
  border-color:var(--gold);
  box-shadow:0 0 0 .2rem rgba(212,175,55,.15);
  color:var(--text-light);
}
.form-control::placeholder{color:#786f5e;}
.form-select option{background:var(--black-elev); color:var(--text-light);}

/* ---------- Gallery (running marquee) ---------- */
.gallery-section{background:var(--black-soft); padding:100px 0 90px;}
.gallery-marquee-wrap{
  width:100%; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gallery-track{
  display:flex; gap:20px; width:max-content;
  animation:scrollGallery 35s linear infinite;
}
.gallery-marquee-wrap:hover .gallery-track{animation-play-state:paused;}
.gallery-item{
  width:300px; height:220px; flex:0 0 auto;
  border-radius:6px; overflow:hidden;
  border:1px solid rgba(212,175,55,.15);
}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.1);}
@keyframes scrollGallery{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Testimonials ---------- */
.testimonials-section{background:var(--navy); padding:100px 0;}
.testimonial-card{
  max-width:680px; text-align:center;
  background:rgba(10,10,10,.35);
  border:1px solid rgba(212,175,55,.2);
  border-radius:8px; padding:48px 40px;
}
.quote-icon{font-size:2.2rem; color:var(--gold); margin-bottom:14px; display:inline-block;}
.testimonial-card p{
  font-family:var(--font-accent); font-style:italic; font-size:1.2rem; line-height:1.8;
  color:var(--text-light); margin-bottom:24px;
}
.testimonial-author h6{color:#fff; font-family:var(--font-display); margin:0;}
.testimonial-author span{color:var(--gold); font-size:.8rem; letter-spacing:1px;}
.carousel-control-prev, .carousel-control-next{width:6%; opacity:1;}
.testi-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--gold);
  display:inline-flex; align-items:center; justify-content:center; color:var(--gold);
}

/* ---------- Contact ---------- */
.contact-section{background:var(--black); padding:100px 0;}
.contact-info-item{display:flex; gap:16px; margin-bottom:24px;}
.contact-info-item i{color:var(--gold); font-size:1.2rem; margin-top:4px;}
.contact-info-item h6{color:#fff; font-family:var(--font-display); margin-bottom:4px;}
.contact-info-item p, .contact-info-item a{color:var(--text-muted); margin:0;}
.contact-info-item a:hover{color:var(--gold);}
.social-icons{display:flex; gap:12px; margin-top:20px;}
.social-icons a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(212,175,55,.3);
  display:flex; align-items:center; justify-content:center; color:var(--gold);
  transition:all .3s ease;
}
.social-icons a:hover{background:var(--gold); color:#171008;}
.map-wrap{border-radius:8px; overflow:hidden; border:1px solid rgba(212,175,55,.2); filter:grayscale(.2);}

/* ---------- Footer ---------- */
.site-footer{background:var(--black-soft); padding:70px 0 20px; border-top:1px solid rgba(212,175,55,.12);}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.footer-brand img{height:48px;}
.footer-brand .brand-title{display:block; font-family:var(--font-display); color:#fff; font-size:1.05rem;}
.footer-brand .brand-sub{display:block; color:var(--gold); font-size:.62rem; letter-spacing:3px;}
.footer-text{color:var(--text-muted); font-size:.88rem; line-height:1.8;}
.footer-heading{color:#fff; font-family:var(--font-display); margin-bottom:18px; font-size:1.05rem;}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{color:var(--text-muted); font-size:.88rem; margin-bottom:12px; line-height:1.6;}
.footer-links a{color:var(--text-muted);}
.footer-links a:hover{color:var(--gold);}
.footer-links i{color:var(--gold); margin-right:6px;}
.footer-hr{border-color:rgba(212,175,55,.15); margin:36px 0 18px;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:var(--text-muted); font-size:.82rem;}

/* ---------- Enquiry Modal ---------- */
.enquiry-modal-content{
  background:var(--black-soft);
  border:1px solid var(--gold);
  border-radius:8px;
  padding:10px;
}
.modal-title-custom{font-family:var(--font-display); color:#fff; margin-bottom:6px;}
.modal-sub{color:var(--text-muted); font-size:.88rem; margin-bottom:22px;}
.enquiry-modal-content .form-label{color:var(--text-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.5px;}

/* ---------- Fixed Action Buttons ---------- */
.fixed-action-btns{
  position:fixed; right:22px; bottom:22px; z-index:999;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
.fab-btn{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:50px;
  color:#fff; font-size:.85rem; font-weight:500;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform .25s ease;
}
.fab-btn:hover{transform:translateY(-3px); color:#fff;}
.fab-btn i{font-size:1.15rem;}
.fab-whatsapp{background:#25d366;}
.fab-call{background:var(--gold); color:#171008;}
.fab-call:hover{color:#171008;}
.fab-label{white-space:nowrap;}

.blink{animation:blinkPulse 1.6s ease-in-out infinite;}
@keyframes blinkPulse{
  0%, 100%{opacity:1; box-shadow:0 8px 22px rgba(0,0,0,.35);}
  50%{opacity:.72; box-shadow:0 8px 30px rgba(212,175,55,.35);}
}

/* ---------- Responsive ---------- */
@media(max-width:991px){
  .topbar{display:none !important;}
  .booking-form-wrap{padding:32px 22px;}
  .about-badge{right:10px;}
  .fab-label{display:none;}
  .fab-btn{padding:14px; border-radius:50%;}
}
@media(max-width:575px){
  .hero-title{font-size:2.1rem;}
  .about-img-main{height:320px;}
  .gallery-item{width:220px; height:160px;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .gallery-track{animation:none;}
  .blink{animation:none;}
  .scroll-cue span{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Accessibility: focus states ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}