/* ===== DELHI CALL MAYA — MAIN STYLESHEET ===== */


/* --- Reset & Variables --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Crisp & Royal Light Backgrounds */
  --bg-main: #ffffff;       /* Pure white main background (ekdum clean look) */
  --bg-alt: #fbf9f9;        /* Bohta halka rosy-grey tone, background sections ke liye */
  --bg-card: #ffffff;       /* Cards pure white rahenge */
  --bg-card-b: #f5eff0;     /* Subtle light pinkish-grey cards/hover ke liye */

  /* Deep Maroon & Luxury Red Accents */
  --clr-copper: #721c24;    /* Main Accent: Deep Maroon / Wine Red (Bohot hi premium lagta hai) */
  --clr-copper-lt: #a9323d; /* Active state / Vibrant Maroon highlight ke liye */
  --clr-copper-dk: #4a1016; /* Extra deep maroon, buttons aur hover effects ke liye */
  --clr-red: #c82333;       /* Alert / Danger red */
  --clr-green: #2e6930;     /* Muted emerald green */

  /* Sharp & Clear Typography */
  --clr-head: #1e1112;      /* Headings ke liye ekdum dark maroon-black tone */
  --clr-text: #332728;      /* Main body text ke liye soft charcoal-maroon blend (aankhon par chubhega nahi) */
  --clr-dim: #756667;       /* Muted text / Subtitles ke liye elegant faded tone */
  
  /* Borders & Dividers */
  --clr-border: #ebdcd9;    /* Borders ke liye bohot hi soft, light-maroon tint wali line */
  --clr-cream: #fff5f5;     /* Soft alert or highlighting blocks background */

  /* Fonts & Layout */
  --ff-h: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-b: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --mx: 1180px;
}
}

html { scroll-behavior: auto; }

body {
  font-family: var(--ff-b);
  background: var(--bg-main);
  color: var(--clr-text);
  line-height: 1.78;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--clr-copper); font-weight: 700; text-decoration: none; }
a:hover { color: var(--clr-copper-lt);}

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

h1,h2,h3,h4,h5,h6 { line-height: 1.25; font-family: var(--ff-h); color: var(--clr-head); font-weight: 700; }

/* --- Layout Helpers --- */
.wrap { max-width: var(--mx); margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
.sec-pad { padding: 68px 0; }
.sec-pad-lg { padding: 88px 0; }
.bg-alt { background: var(--bg-alt); }
.bg-card-shade { background: var(--bg-card-b); }
.clr-fix::after { content:''; display:table; clear:both; }

/* --- Site Header --- */
.site-head {
  background: #a8afbb;
  border-bottom: 1px solid var(--clr-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-head__inner { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; }
.site-head__logo { font-family: var(--ff-h); font-size: 25px; font-weight: 700; border-bottom: 2px solid #e7ebd9; color: var(--clr-copper); letter-spacing: -0.5px; }
.site-head__logo b { color: var(--clr-head); font-weight: 700; }
.site-head__nav { display: flex; gap: 26px; align-items: center; }
.site-head__nav a { color: #ffffff; font-size: 13.5px; font-weight: 600; letter-spacing: 0.3px; }
.site-head__nav a:hover { color: var(--clr-copper); }
.site-head__phone {
  background: var(--clr-copper);
  color: #fff;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 600;
}
.site-head__phone:hover { background: var(--clr-copper-dk); color: #fff; }
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 20px;
  cursor: pointer;
}

/* --- Hero Banner --- */
.hero-banner { position: relative; width: 100%; overflow: hidden; background: #090910; }
.hero-banner__picture { width: 100%; display: block; }
.hero-banner__picture img { width: 100%; height: auto; display: block; object-fit: cover; }
.hero-banner__overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(9,9,16,0.52);
  display: flex; align-items: center;
}
.hero-banner__content { padding: 40px 0; }
.hero-banner__tag {
  display: block; font-family: var(--ff-h); font-size: 40px; font-weight: 700;
  color: #fff; line-height: 1.14; margin-bottom: 14px; max-width: 620px;
}
.hero-banner__tag em { font-style: normal; color: #5fef84; }
.hero-banner__sub {
  display: block; font-size: 16px; color: #ccc6bb; margin-bottom: 22px;
  max-width: 520px; line-height: 1.6;
}
.hero-banner__cta {
  display: inline-block; background: var(--clr-copper); color: #fff;
  padding: 12px 30px; border-radius: 4px; font-size: 14.5px; font-weight: 600;
}
.hero-banner__cta:hover { background: var(--clr-copper-dk); color: #fff; }

/* mobile-banner-strip */
.hero-banner__mob-strip {
  display: none;
  background: rgba(9,9,16,0.82);
  padding: 18px 16px;
  text-align: center;
}
.hero-banner__mob-strip span { display: block; }
.hero-banner__mob-tag { font-family: var(--ff-h); font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.hero-banner__mob-tag em { font-style: normal; color: #4bbdc3; }
.hero-banner__mob-sub { font-size: 13px; color: #bbb5a8; margin-bottom: 10px; }
.hero-banner__mob-cta {
  display: inline-block; background: var(--clr-copper); color: #fff;
  padding: 9px 22px; border-radius: 4px; font-size: 13.5px; font-weight: 600;
}

/* --- Section Titles --- */
.sec-title { font-size: 33px; margin-bottom: 14px; }
.sec-subtitle { font-size: 16.5px; color: var(--clr-dim); margin-bottom: 38px; max-width: 680px; }
.sec-title--center, .sec-subtitle--center { text-align: center; margin-left: auto; margin-right: auto; }

/* --- Welcome Block --- */
.welcome-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.welcome-text p { margin-bottom: 17px; font-size: 15.3px; line-height: 1.82; }
.welcome-text strong { color: var(--clr-head); font-weight: 600; }
.welcome-sidebar {
  background: var(--bg-card); border: 1px solid var(--clr-border); border-radius: 8px; padding: 26px;
}
.welcome-sidebar__title { font-family: var(--ff-h); font-size: 19px; color: var(--clr-head); margin-bottom: 16px; font-weight: 700; }
.welcome-sidebar ul li {
  padding: 9px 0; border-bottom: 1px solid var(--clr-border);
  font-size: 14px; display: flex; justify-content: space-between; color: var(--clr-dim);
}
.welcome-sidebar ul li:last-child { border-bottom: none; }
.welcome-sidebar ul li b { color: var(--clr-copper); font-weight: 600; }

/* --- Profile Gallery --- */
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.profile-card { background: var(--bg-card); border: 1px solid var(--clr-border); border-radius: 8px; overflow: hidden; }
.profile-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 3/4; background: #15151e; }
.profile-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.profile-card__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--clr-green); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.4px;
}
.profile-card__badge--off { background: var(--clr-red); }
.profile-card__body { padding: 16px; }
.profile-card__name { font-family: var(--ff-h); font-size: 19px; color: var(--clr-head); font-weight: 700; margin-bottom: 4px; }
.profile-card__meta { font-size: 12.5px; color: var(--clr-dim); margin-bottom: 9px; }
.profile-card__meta span { margin-right: 12px; }
.profile-card__desc { font-size: 13.5px; color: var(--clr-text); line-height: 1.58; margin-bottom: 13px; }
.profile-card__btn {
  display: block; text-align: center; background: var(--clr-copper); color: #fff;
  padding: 9px; border-radius: 4px; font-size: 13.5px; font-weight: 600;
}
.profile-card__btn:hover { background: var(--clr-copper-dk); color: #fff; }

/* --- Load More Button --- */
.load-more-btn {
  background: var(--bg-card);
  color: var(--clr-copper);
  border: 2px solid var(--clr-copper);
  padding: 12px 38px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ff-b);
}
.load-more-btn:hover {
  background: var(--clr-copper);
  color: #fff;
}

/* --- Area Directory --- */
.area-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.area-text p { margin-bottom: 17px; font-size: 15.3px; line-height: 1.82; }
.area-text strong { color: var(--clr-head); font-weight: 600; }
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.area-item {
  background: var(--bg-card); border: 1px solid var(--clr-border); border-radius: 6px;
  padding: 14px; display: flex; align-items: center; gap: 11px;
}
.area-item__dot {
  width: 34px; height: 34px; background: rgba(184,115,51,0.14); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--clr-copper); font-size: 13px; font-weight: 700;
}
.area-item h4 { font-size: 15px; color: var(--clr-head); font-weight: 700; margin-bottom: 2px; font-family: var(--ff-h); }
.area-item p { font-size: 12px; color: var(--clr-dim); }

/* --- Hotel Directory --- */
.hotel-top-text p { margin-bottom: 17px; font-size: 15.3px; line-height: 1.82; max-width: 800px; }
.hotel-top-text strong { color: var(--clr-head); font-weight: 600; }
.hotel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hotel-card {
  background: var(--bg-card); border: 1px solid var(--clr-border); border-radius: 6px;
  padding: 20px; text-align: center;
}
.hotel-card__icon {
  width: 46px; height: 46px; background: rgba(184,115,51,0.11); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
  color: var(--clr-copper); font-size: 18px; font-weight: 700; font-family: var(--ff-h);
}
.hotel-card h4 { font-size: 14.5px; color: var(--clr-head); font-weight: 700; margin-bottom: 3px; font-family: var(--ff-h); }
.hotel-card p { font-size: 11.5px; color: var(--clr-dim); }

/* --- Booking Steps --- */
.steps-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.step-box { flex: 1; max-width: 210px; text-align: center; position: relative; }
.step-box__num {
  width: 52px; height: 52px; background: var(--clr-copper); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-h); font-size: 22px; font-weight: 700; margin: 0 auto 14px;
}
.step-box h4 { font-size: 17px; color: var(--clr-head); font-weight: 700; margin-bottom: 7px; font-family: var(--ff-h); }
.step-box p { font-size: 13px; color: var(--clr-dim); line-height: 1.55; }
.step-box__arrow { position: absolute; right: -16px; top: 26px; color: var(--clr-copper); font-size: 16px; font-weight: 700; }
.booking-text p { margin-bottom: 17px; font-size: 15.3px; line-height: 1.82; }
.booking-text strong { color: var(--clr-head); font-weight: 600; }

/* --- Safety Pointers --- */
.safety-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.safety-text p { margin-bottom: 17px; font-size: 15.3px; line-height: 1.82; }
.safety-text strong { color: var(--clr-head); font-weight: 600; }
.safety-tips { display: flex; flex-direction: column; gap: 12px; }
.safety-tip {
  background: var(--bg-card); border: 1px solid var(--clr-border); border-radius: 6px;
  padding: 16px; display: flex; gap: 13px; align-items: flex-start;
}
.safety-tip__num {
  width: 34px; height: 34px; background: rgba(74,124,89,0.14); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--clr-green); font-size: 14px; font-weight: 700;
}
.safety-tip h5 { font-size: 14.5px; color: var(--clr-head); font-weight: 700; margin-bottom: 3px; font-family: var(--ff-h); }
.safety-tip p { font-size: 13px; color: var(--clr-dim); line-height: 1.52; }

/* --- Trust Grid --- */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.trust-item {
  background: var(--bg-card); border: 1px solid var(--clr-border); border-radius: 8px;
  padding: 28px 22px; text-align: center;
}
.trust-item__ico {
  width: 52px; height: 52px; background: rgba(184,115,51,0.11); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
  color: var(--clr-copper); font-size: 22px; font-weight: 700; font-family: var(--ff-h);
}
.trust-item h4 { font-size: 17px; color: var(--clr-head); font-weight: 700; margin-bottom: 7px; font-family: var(--ff-h); }
.trust-item p { font-size: 13.5px; color: var(--clr-dim); line-height: 1.55; }
.trust-text p { margin-bottom: 17px; font-size: 15.3px; line-height: 1.82; }
.trust-text strong { color: var(--clr-head); font-weight: 600; }

/* --- FAQ --- */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--clr-border); padding: 20px 0; }
.faq-item:first-child { border-top: 1px solid var(--clr-border); }
.faq-item h4 { font-size: 16.5px; color: var(--clr-head); font-weight: 700; margin-bottom: 7px; font-family: var(--ff-h); }
.faq-item p { font-size: 14.3px; color: var(--clr-dim); line-height: 1.68; }
.faq-intro p { margin-bottom: 17px; font-size: 15.3px; line-height: 1.82; text-align: center; max-width: 780px; margin-left: auto; margin-right: auto; }

/* --- Extra Info --- */
.extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.extra-text p { margin-bottom: 17px; font-size: 15.3px; line-height: 1.82; }
.extra-text strong { color: var(--clr-head); font-weight: 600; }
.extra-sidebar {
  background: var(--bg-card); border: 1px solid var(--clr-border); border-radius: 8px; padding: 26px;
}
.extra-sidebar h4 { font-family: var(--ff-h); font-size: 18px; color: var(--clr-head); margin-bottom: 14px; font-weight: 700; }
.extra-sidebar ul li {
  padding: 8px 0; border-bottom: 1px solid var(--clr-border);
  font-size: 14px; color: var(--clr-dim); display: flex; justify-content: space-between;
}
.extra-sidebar ul li:last-child { border-bottom: none; }
.extra-sidebar ul li b { color: var(--clr-copper); font-weight: 600; }

/* --- CTA Strip --- */
.cta-strip { background: var(--clr-copper); padding: 48px 0; text-align: center; }
.cta-strip h2 { font-size: 28px; color: #fff; font-weight: 700; margin-bottom: 10px; font-family: var(--ff-h); }
.cta-strip p { font-size: 15.5px; color: rgba(255,255,255,0.82); margin-bottom: 22px; }
.cta-strip__btn {
  display: inline-block; background: #fff; color: var(--clr-copper-dk);
  padding: 11px 34px; border-radius: 4px; font-size: 14.5px; font-weight: 700;
}
.cta-strip__btn:hover { background: var(--clr-cream); color: var(--clr-copper-dk); }

/* --- Cash Badge --- */
.cash-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(74,124,89,0.14); color: #5da872;
  padding: 6px 13px; border-radius: 4px; font-size: 13px; font-weight: 600; margin-bottom: 20px;
}

/* --- Footer --- */
.site-foot { background: #fff5f5; border-top: 1px solid var(--clr-border); padding: 56px 0 28px; }
.site-foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
.site-foot__about p { font-size: 13.5px; color: var(--clr-dim); line-height: 1.7; margin-top: 12px; }
.site-foot__col-title { font-family: var(--ff-h); font-size: 16px; color: var(--clr-head); font-weight: 700; margin-bottom: 14px; }
.site-foot__col ul li { margin-bottom: 7px; }
.site-foot__col ul li a { font-size: 13.5px; color: var(--clr-dim); }
.site-foot__col ul li a:hover { color: var(--clr-copper); }
.site-foot__bottom { border-top: 1px solid var(--clr-border); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; }
.site-foot__copy { font-size: 12.5px; color: var(--clr-dim); }
.site-foot__disclaimer { font-size: 11.5px; color: #52526a; max-width: 580px; text-align: right; line-height: 1.5; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .hotel-grid { grid-template-columns: repeat(2, 1fr); }
  .site-foot__grid { grid-template-columns: 1fr 1fr; }
  .welcome-grid { grid-template-columns: 1fr; }
  .extra-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .site-head__nav { display: none; }
  .site-head__nav.show-nav {
    display: flex; flex-direction: column; position: absolute;
    top: 100%; left: 0; right: 0; background: #0b0b11;
    padding: 18px 20px; border-bottom: 1px solid var(--clr-border); gap: 14px; z-index: 99;
  }
  .menu-toggle { display: block; }
  .hero-banner__overlay { display: none; }
  .hero-banner__mob-strip { display: block; }
  .sec-title { font-size: 25px; }
  .sec-pad { padding: 48px 0; }
  .sec-pad-lg { padding: 60px 0; }
  .profile-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .area-layout { grid-template-columns: 1fr; }
  .area-grid { grid-template-columns: 1fr; }
  .hotel-grid { grid-template-columns: 1fr 1fr; }
  .steps-row { flex-direction: column; align-items: center; }
  .step-box__arrow { display: none; }
  .safety-layout { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .site-foot__grid { grid-template-columns: 1fr; }
  .site-foot__bottom { flex-direction: column; gap: 10px; text-align: center; }
  .site-foot__disclaimer { text-align: center; }
}

@media (max-width: 480px) {
  .hotel-grid { grid-template-columns: 1fr; }
  .hero-banner__mob-tag { font-size: 18px; }
  .profile-card__body { padding: 12px; }
  .profile-card__name { font-size: 16px; }
  .profile-card__desc { font-size: 12px; }
}
@media (max-width: 480px) {
  .profile-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  /* अगर लास्ट में कोई प्रोफाइल अकेली (odd) बचती है, तो उसे पूरी width दे दो */
  .profile-card:last-child:nth-child(odd) {
    grid-column: span 2; 
  }

  /* अकेली बची प्रोफाइल का अंदरूनी लेआउट थोड़ा सेंटर कर देते हैं ताकि अच्छा लगे */
  .profile-card:last-child:nth-child(odd) .profile-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .hotel-grid { grid-template-columns: 1fr; }
  .hero-banner__mob-tag { font-size: 18px; }
  .profile-card__body { padding: 12px; }
  .profile-card__name { font-size: 16px; }
  .profile-card__desc { font-size: 12px; }
}
/* Desktop par banner ki height control karne ke liye */
@media (min-width: 768px) {
  .hero-banner {
    max-height: 550px; /* Aap is value ko 450px, 500px, 600px jo suitable lage rakh sakte hain */
  }
  
  .hero-banner__picture {
    height: 100%; /* Parent ki height le lo */
  }
  
  .hero-banner__picture img {
    height: 100%; /* Image ko parent ki height ke andar fit karo */
    object-fit: cover; /* Image stretch nahi hogi, bas crop ho kar aayegi */
    object-position: center top; /* Image ka kaunsa part dikhna chaiye (top ya center) */
  }
  
  .hero-banner__overlay {
    height: 100%; /* Overlay bhi utni hi height le */
  }
}

/* --- Floating Sticky Buttons --- */
.floating-btns {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.float-btn {
  display: flex;
  align-items: center;
  justify-content: center; /* Icon ko center mein rakhega */
  padding: 14px 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 6px 6px 0; /* Left side chipka hua, right side gol */
  box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  transition: padding 0.2s;
}

.float-btn:hover {
  padding-right: 18px; /* Thoda sa bahar aayega hover karne par */
  color: #fff;
}

.float-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  margin-right: 0; /* Desktop par text nahi hai toh margin hatana padega */
  flex-shrink: 0;
}

/* Desktop par sirf Icon dikhega, Text chup jayega */
.float-btn__text {
  display: none; 
}

.float-btn--call { background: #8c2c2c; }
.float-btn--wa { background: #25D366; }


/* Mobile View - Bottom Footer Bar */
@media (max-width: 768px) {
  .floating-btns {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: row;
    width: 100%;
    gap: 0;
  }
  
  .float-btn {
    width: 50%;
    justify-content: center;
    border-radius: 0; /* Mobile par sidha sidha */
    padding: 16px;
  }
  
  .float-btn:hover {
    padding-left: 16px; /* Mobile par shift nahi hona chahiye */
    padding-right: 16px;
  }

  /* Mobile par Icon chup jayega */
  .float-btn svg {
    display: none; 
  }

  /* Mobile par Text dikhega */
  .float-btn__text {
    display: inline-block;
    font-size: 16px;
  }

  .float-btn--call { background: #8c2c2c; }
  .float-btn--wa { background: #128C7E; } /* Thoda dark green for bottom bar */

  /* Footer ki padding badha denge taaki bottom bar content ko cover na kare */
  .site-foot { padding-bottom: 70px; }
}