/* =====================================================
   GLAM BEAUTY HOME SALON — MASTER STYLESHEET
   Design tokens taken from project blueprint
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* ---------- BRAND COLORS ---------- */
    --color-primary: #6A1B6D;
    --color-primary-dark: #4A0E4E;
    --color-secondary: #F8D7E6;
    --color-bg: #FFF8F4;
    --color-text: #2C2C2C;
    --color-accent: #D4AF37;
    --color-accent-soft: #EBD9A0;
    --color-white: #FFFFFF;

    /* ---------- TYPE SCALE ---------- */
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Poppins', sans-serif;

    /* ---------- SPACING ---------- */
    --section-padding: 96px 24px;
    --radius-soft: 18px;
    --radius-pill: 999px;

    /* ---------- SHADOW ---------- */
    --shadow-card: 0 4px 20px rgba(44, 44, 44, 0.10), 0 1px 3px rgba(44,44,44,0.06);
    --shadow-hover: 0 20px 44px rgba(106, 27, 109, 0.22);
    --card-border: 1px solid rgba(44, 44, 44, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.65;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4 {
    font-family: var(--font-body);
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Section-level titles keep the purple brand accent */
.section-title {
    color: var(--color-primary);
}

/* The homepage hero headline keeps the elegant serif — used once, deliberately */
.hero-content h1 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0;
}
.hero-content h1 em {
    font-family: var(--font-display);
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 14px;
}
.section-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--color-accent);
}
.nav-mobile-only { display: none; }
.nav-close { display: none; }

.section-title {
    font-size: clamp(32px, 4vw, 46px);
    margin-bottom: 16px;
}

.section-sub {
    max-width: 560px;
    color: #333333;
    font-size: 15.5px;
    margin-bottom: 48px;
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 34px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.3px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 10px 24px rgba(106, 27, 109, 0.28);
}
.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(106, 27, 109, 0.35);
}
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}
.btn-gold {
    background: linear-gradient(135deg, var(--color-accent), #b8912b);
    color: var(--color-white);
}
.btn-block { width: 100%; }

/* ---------- SIGNATURE GOLD DIVIDER ----------
   Motif: ek "mehendi-thread" style flourish jo salon ke
   world se aata hai — sections ke beech mein use hota hai */
.gold-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto;
    width: fit-content;
}
.gold-divider span {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent));
}
.gold-divider span:last-child {
    background: linear-gradient(90deg, var(--color-accent), transparent);
}
.gold-divider .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    flex: none;
}

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(255, 248, 244, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(106, 27, 109, 0.08);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.logo {
    display: flex;
    align-items: center;
}
.logo-img {
    height: 42px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}
.logo-fallback {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--color-primary);
}

.main-nav ul {
    display: flex;
    gap: 36px;
    align-items: center;
}
.main-nav a {
    font-size: 14px;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
}
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}
.main-nav a:hover::after { width: 100%; }

.header-cta { display: flex; align-items: center; gap: 18px; }

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.menu-toggle span {
    width: 24px; height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
}

/* ---------- FLOATING WHATSAPP BUTTON ---------- */
.float-whatsapp {
    position: fixed;
    bottom: 26px;
    right: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
    z-index: 998;
    animation: pulse 2.4s infinite;
}
.float-whatsapp svg { width: 28px; height: 28px; fill: #fff; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
    70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
    position: relative;
    padding: 90px 24px 70px;
    background:
        radial-gradient(circle at 85% 15%, rgba(212,175,55,0.14), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(106,27,109,0.08), transparent 40%);
}
.hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}
.hero-content h1 {
    font-size: clamp(38px, 5.4vw, 64px);
    margin-bottom: 22px;
}
.hero-content h1 em {
    font-style: italic;
    color: var(--color-primary);
    position: relative;
}
.hero-content p {
    font-size: 16.5px;
    color: #333333;
    max-width: 480px;
    margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-trust { display: flex; gap: 32px; flex-wrap: wrap; }
.hero-trust div { text-align: left; }
.hero-trust strong {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--color-primary);
    display: block;
}
.hero-trust span { font-size: 12.5px; color: #333333; }

.hero-visual {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: linear-gradient(160deg, var(--color-secondary), var(--color-primary) 130%);
    box-shadow: var(--shadow-card);
    border: var(--card-border);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
    position: absolute;
    bottom: 22px;
    left: 22px;
    right: 22px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-soft);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-card);
    border: var(--card-border);
}
.hero-badge .icon-circle {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px; flex: none;
}
.hero-badge strong { display: block; font-size: 13.5px; }
.hero-badge span { font-size: 11.5px; color: #3a3a3a; }

/* =====================================================
   HOW IT WORKS
   ===================================================== */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.step-card {
    background: var(--color-white);
    border-radius: var(--radius-soft);
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--shadow-card);
    border: var(--card-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.step-number {
    font-family: var(--font-body);
    font-size: 34px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.step-card h3 { font-size: 19px; margin-bottom: 8px; }
.step-card p { font-size: 13.5px; color: #3a3a3a; }

/* =====================================================
   SERVICES
   ===================================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.service-card {
    background: var(--color-white);
    border-radius: var(--radius-soft);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: var(--card-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.service-img {
    height: 210px;
    background: linear-gradient(135deg, var(--color-secondary), #f1e4ea);
    position: relative;
    overflow: hidden;
}
.service-img img { width: 100%; height: 100%; object-fit: cover; }
.service-price-tag {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}
.service-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.service-body h3 { font-size: 20px; margin-bottom: 8px; }
.service-body p { font-size: 13.5px; color: #3a3a3a; flex: 1; margin-bottom: 16px; }
.service-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 16px;
}

/* =====================================================
   WHY CHOOSE US
   ===================================================== */
.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.why-card {
    display: flex;
    gap: 16px;
    background: var(--color-white);
    padding: 24px;
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-card);
    border: var(--card-border);
}
.why-icon {
    width: 46px; height: 46px; border-radius: 14px; flex: none;
    background: var(--color-secondary);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary);
    font-size: 20px;
}
.why-card h4 { font-size: 16.5px; margin-bottom: 6px; }
.why-card p { font-size: 13px; color: #3a3a3a; }

/* =====================================================
   CTA BANNER
   ===================================================== */
.cta-banner {
    background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 28px;
    padding: 60px 40px;
    text-align: center;
    color: #fff;
    margin: 0 24px;
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,0.8); max-width: 480px; margin: 12px auto 30px; font-size: 15px; }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
    background: var(--color-primary-dark);
    color: rgba(255,255,255,0.75);
    padding: 70px 24px 24px;
    margin-top: 90px;
}
.footer-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-logo { font-family: var(--font-display); font-size: 24px; color: #fff; margin-bottom: 14px; }
.footer-logo span { color: var(--color-accent); }
.footer-grid p { font-size: 13.5px; line-height: 1.7; }
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 16px; }
.footer-col ul li { margin-bottom: 10px; font-size: 13.5px; }
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom {
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.5);
}

/* =====================================================
   BOOKING PAGE
   ===================================================== */
.booking-wrap {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 40px;
    align-items: flex-start;
}
.booking-form-card, .booking-summary-card {
    background: var(--color-white);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-card);
    border: var(--card-border);
    padding: 34px;
}
.booking-summary-card { position: sticky; top: 100px; }
.form-progress {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 10px 26px rgba(74, 14, 78, 0.30);
}
.form-progress .fp-step {
    display: flex; align-items: center; gap: 10px; flex: 1;
}
.form-progress .fp-circle {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.22); color: rgba(255,255,255,0.85);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex: none;
    transition: all 0.3s ease;
}
.form-progress .fp-step.active .fp-circle { background: #fff; color: var(--color-primary); }
.form-progress .fp-step.done .fp-circle { background: var(--color-accent); color: #fff; }
.form-progress .fp-line { flex: 1; height: 2px; background: rgba(255,255,255,0.25); margin: 0 6px; }
.form-progress .fp-step.done + .fp-line, .form-progress .fp-line.done { background: var(--color-accent); }
.form-progress .fp-label { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 500; }
.form-progress .fp-step.active .fp-label { color: #fff; font-weight: 700; }

.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn 0.35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text);
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #eadfe6;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 14.5px;
    background: #fffaf8;
    transition: border-color 0.25s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
}
.form-group textarea { resize: vertical; min-height: 90px; }

.service-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.service-select-card {
    border: 1.5px solid #eadfe6;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.service-select-card:hover { border-color: var(--color-secondary); }
.service-select-card.selected { border-color: var(--color-primary); background: #fbf3f8; }
.service-select-card h4 { font-size: 14.5px; margin-bottom: 4px; }
.service-select-card span { font-size: 12.5px; color: var(--color-primary); font-weight: 600; }

.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slot-btn {
    padding: 11px 8px;
    text-align: center;
    border: 1.5px solid #eadfe6;
    border-radius: 10px;
    font-size: 12.5px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
}
.slot-btn.selected { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.slot-btn.disabled { opacity: 0.4; cursor: not-allowed; }

.form-nav { display: flex; justify-content: space-between; margin-top: 30px; gap: 14px; }

/* ---------- CART ITEM CARDS (Step 1 of booking) ---------- */
.cart-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #ffffff 0%, #f7ecf4 100%);
    border: 1.5px solid var(--color-primary);
    border-left: 5px solid var(--color-primary);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(74,14,78,0.10);
}
.cic-info h4 { font-size: 14.5px; margin-bottom: 3px; color: #1a1a1a; }
.cic-info span { font-size: 12px; color: #555555; }
.cic-right { display: flex; align-items: center; gap: 14px; }
.cic-right strong { font-size: 15px; color: var(--color-primary); }
.cic-remove {
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e0c8d8;
    color: #b0305a;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    flex: none;
}

.summary-row {
    display: flex; justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed #eee;
    font-size: 13.5px;
}
.summary-row span:first-child { color: #3a3a3a; }
.summary-row span:last-child { font-weight: 600; text-align: right; }
.summary-total { display: flex; justify-content: space-between; padding-top: 16px; font-size: 17px; font-weight: 700; color: var(--color-primary); }

/* ---------- SUCCESS SCREEN ---------- */
.success-screen { text-align: center; padding: 20px 10px; }
.success-icon {
    width: 84px; height: 84px; margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), #b8912b);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 40px;
    animation: pop 0.4s ease;
}
@keyframes pop { 0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } }
.success-screen h2 { margin-bottom: 10px; }
.success-screen p { color: #3a3a3a; margin-bottom: 26px; }
.booking-id-box {
    background: #fbf3f8;
    border: 1.5px dashed var(--color-primary);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 26px;
}
.booking-id-box span { font-size: 12px; color: #3a3a3a; text-transform: uppercase; letter-spacing: 1.5px; }
.booking-id-box strong { display: block; font-size: 26px; color: var(--color-primary); font-family: var(--font-display); margin-top: 4px; }
.success-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =====================================================
   GENERIC PAGE (About / Contact / Privacy / Terms)
   ===================================================== */
.page-hero {
    padding: 70px 24px 50px;
    text-align: center;
    background: linear-gradient(180deg, var(--color-secondary), var(--color-bg));
}
.page-hero h1 { font-size: clamp(32px, 4.6vw, 48px); }
.static-content { max-width: 820px; margin: 0 auto; padding: 20px 24px 40px; }
.static-content h2 { font-size: 24px; margin: 34px 0 14px; }
.static-content p { margin-bottom: 14px; color: #555; font-size: 14.5px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-info-card {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-soft);
    padding: 30px;
    box-shadow: 0 14px 32px rgba(74,14,78,0.30);
    border: none;
    color: #fff;
}
.contact-info-card h3 { color: #fff; }
.contact-info-row { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.contact-info-row .why-icon { width: 40px; height: 40px; font-size: 16px; background: rgba(255,255,255,0.18); color: #fff; }
.contact-info-row h4 { color: #fff !important; }
.contact-info-row p, .contact-info-row a { color: rgba(255,255,255,0.85) !important; }
.contact-info-card p { color: rgba(255,255,255,0.85) !important; }

/* =====================================================
   SEARCH BAR
   ===================================================== */
.search-section { padding: 18px 24px 0; }
.search-bar {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: var(--color-white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-card);
    border: var(--card-border);
    padding: 6px 6px 6px 22px;
}
.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 14.5px;
    background: transparent;
    padding: 12px 8px;
}
.search-bar button {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    background: var(--color-primary);
    color: #fff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.search-bar button svg { width: 18px; height: 18px; }

/* ---------- SEARCH SUGGESTIONS DROPDOWN ---------- */
.search-suggestions {
    display: none;
    max-width: 640px;
    margin: 8px auto 0;
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(74,14,78,0.18);
    border: var(--card-border);
    padding: 18px 20px 20px;
}
.search-suggestions.open { display: block; }
.ss-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
    margin-bottom: 12px;
}
.ss-chips { display: flex; flex-wrap: wrap; gap: 10px; max-height: 260px; overflow-y: auto; }
.ss-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid #eadfe6;
    background: #fffaf8;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ss-chip span { color: var(--color-primary); font-weight: 700; }
.ss-chip.selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ss-chip.selected span { color: #fff; }

/* =====================================================
   HOME BANNER
   ===================================================== */
.home-banner {
    position: relative;
    margin: 20px 24px 0;
    border-radius: 24px;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: var(--card-border);
}
.banner-click-layer { position: absolute; inset: 0; z-index: 1; }
.banner-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    max-width: 480px;
    pointer-events: none;
}
.banner-content .btn { pointer-events: auto; position: relative; z-index: 3; }
.banner-content h1 { color: #fff; font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 8px; }
.banner-content p { color: rgba(255,255,255,0.88); font-size: 14px; margin-bottom: 18px; max-width: 380px; }

/* =====================================================
   CATEGORY GRID
   ===================================================== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.category-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: 0 10px 26px rgba(74, 14, 78, 0.28), 0 2px 6px rgba(0,0,0,0.12);
    border: var(--card-border);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.category-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(74, 14, 78, 0.36), 0 4px 10px rgba(0,0,0,0.14); }
.category-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.category-card .cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(74,14,78,0.20) 0%, rgba(74,14,78,0.94) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 10px 12px;
}
.category-card .cat-icon {
    width: 26px; height: 26px;
    font-size: 13px;
    background: rgba(255,255,255,0.28);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
}
.category-card span { font-size: 12.5px; font-weight: 700; color: #ffffff; line-height: 1.2; }

/* =====================================================
   CATEGORY SERVICES MODAL
   ===================================================== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(44,44,44,0.55);
    z-index: 1000;
    align-items: flex-end;
    justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: var(--color-bg);
    width: 100%;
    max-width: 640px;
    max-height: 82vh;
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
    padding: 24px 22px 30px;
    animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.modal-header h3 { font-size: 22px; }
.modal-close {
    width: 34px; height: 34px; border-radius: 50%;
    background: #f0e6ec;
    border: none;
    font-size: 20px;
    color: var(--color-primary);
    cursor: pointer;
    line-height: 1;
}
.modal-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.modal-service-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: var(--card-border);
    border: 1.5px solid transparent;
    transition: border-color 0.25s ease;
}
.modal-service-card.added { border-color: var(--color-accent); }
.msc-img { height: 100px; }
.msc-img img { width: 100%; height: 100%; object-fit: cover; }
.msc-body { padding: 12px; }
.msc-body h4 { font-size: 13.5px; margin-bottom: 4px; }
.msc-body span { font-size: 11px; color: #3a3a3a; display: block; margin-bottom: 10px; }
.msc-add-btn {
    width: 100%;
    padding: 8px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.modal-service-card.added .msc-add-btn { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* =====================================================
   MINI CART BAR (Home page)
   ===================================================== */
.mini-cart-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 996;
    background: var(--color-primary-dark);
    color: #fff;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
}
.mini-cart-bar.visible { display: flex; }
.mcb-info { display: flex; flex-direction: column; }
.mcb-info span { font-size: 11.5px; color: rgba(255,255,255,0.7); }
.mcb-info strong { font-size: 18px; }

/* When mini cart bar is visible on mobile, it replaces the call/book bar */
@media (max-width: 680px) {
    .mini-cart-bar.visible ~ .mobile-bottom-bar,
    body:has(.mini-cart-bar.visible) .mobile-bottom-bar { display: none; }
}
.trust-strip {
    background: var(--color-primary-dark);
    padding: 16px 24px;
}
.trust-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    color: rgba(255,255,255,0.85);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.ts-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
    flex: none;
}

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.testimonial-card {
    background: var(--color-white);
    border-radius: var(--radius-soft);
    padding: 30px;
    box-shadow: var(--shadow-card);
    border: var(--card-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.testimonial-card .stars { color: var(--color-accent); font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-card p { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 22px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.avatar-circle {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 17px;
}
.testimonial-author strong { display: block; font-size: 13.5px; }
.testimonial-author span { font-size: 11.5px; color: #555555; }

/* =====================================================
   SCROLL REVEAL
   ===================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================
   QUICK CATEGORY GRID (mobile-friendly service picker,
   YesMadam-style tap targets)
   ===================================================== */
.quick-cats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.quick-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 16px 8px;
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: var(--card-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.quick-cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.quick-cat .qc-icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-secondary), #f1e0ea);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex: none;
}
.quick-cat span { font-size: 11.5px; font-weight: 600; color: var(--color-text); line-height: 1.25; }

/* =====================================================
   MOBILE BOTTOM ACTION BAR
   ===================================================== */
.mobile-bottom-bar { display: none; }

@media (max-width: 680px) {
    .mobile-bottom-bar {
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 997;
        background: #fff;
        border-top: 1px solid rgba(212, 175, 55, 0.35);
        box-shadow: 0 -10px 28px rgba(74, 14, 78, 0.16);
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        gap: 12px;
    }
    .mbb-call {
        flex: none;
        width: 54px; height: 54px;
        border-radius: 50%;
        background: linear-gradient(145deg, #7A2280, #4A0E4E);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        box-shadow:
            0 6px 16px rgba(74, 14, 78, 0.4),
            inset 0 1px 1px rgba(255, 255, 255, 0.35),
            inset 0 -2px 3px rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(212, 175, 55, 0.4);
        transition: transform .2s ease;
    }
    .mbb-call:active { transform: scale(0.92); }
    .mbb-call svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
    .mbb-book {
        flex: 1;
        height: 50px;
        background: linear-gradient(120deg, #4A0E4E, #6A1B6D 55%, #9C2B8F);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        gap: 8px;
        border-radius: 999px;
        border: 1px solid rgba(212, 175, 55, 0.55);
        font-weight: 700;
        font-size: 15px;
        letter-spacing: 0.2px;
        box-shadow: 0 8px 20px rgba(74, 14, 78, 0.3);
        transition: transform .2s ease;
    }
    .mbb-book:active { transform: scale(0.97); }
    body { padding-bottom: 82px; }
    .float-whatsapp { bottom: 96px; }
}


/* =====================================================
   RESPONSIVE — MOBILE FIRST OVERHAUL
   ===================================================== */
@media (max-width: 960px) {
    :root { --section-padding: 60px 20px; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { max-width: 420px; margin: 0 auto; }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .booking-wrap { grid-template-columns: 1fr; }
    .booking-summary-card { position: static; }
    .contact-grid { grid-template-columns: 1fr; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .quick-cats { grid-template-columns: repeat(4, 1fr); }
    .category-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
    :root { --section-padding: 48px 18px; }

    /* Header: keep it minimal on mobile, actions live in bottom bar */
    .header-inner { padding: 13px 18px; }
    .logo-img { height: 34px; }
    .logo-fallback { font-size: 22px; }
    .header-cta { gap: 10px; }
    .header-cta .btn-outline,
    .header-cta .btn-primary { display: none; }
    .menu-toggle { display: flex; }

    .main-nav {
        position: fixed; inset: 0;
        background: var(--color-bg);
        flex-direction: column;
        padding: 26px 26px 40px;
        transform: translateX(100%);
        opacity: 1; visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s;
        z-index: 1001;
        overflow-y: auto;
    }
    .main-nav.open { transform: translateX(0); visibility: visible; }
    .nav-close {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 50%;
        background: #f0e6ec; border: none; color: var(--color-primary);
        font-size: 22px; margin-bottom: 24px; margin-left: auto;
        cursor: pointer;
    }
    .main-nav ul { flex-direction: column; gap: 4px; width: 100%; }
    .main-nav a { display: block; padding: 16px 4px; font-size: 19px; border-bottom: 1px solid rgba(106,27,109,0.08); }
    .nav-mobile-only { display: block; }
    .nav-mobile-only a { border-bottom: none; }

    /* Hero */
    .hero { padding: 32px 18px 40px; }
    .hero-content h1 { font-size: 34px; margin-bottom: 16px; }
    .hero-content p { font-size: 15px; margin-bottom: 26px; }
    .hero-actions { flex-direction: column; gap: 12px; }
    .hero-actions .btn { width: 100%; }
    .hero-trust { gap: 18px; justify-content: space-between; }
    .hero-trust strong { font-size: 22px; }
    .hero-visual { max-width: 100%; aspect-ratio: 4/3.3; }

    .trust-strip-inner { gap: 10px; font-size: 11px; }

    /* Section headings tighter on mobile */
    .section-title { font-size: 28px; margin-bottom: 10px; }
    .section-sub { margin-bottom: 30px; font-size: 14px; }

    .steps-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .step-card { padding: 22px 16px; }

    .services-grid { grid-template-columns: 1fr; gap: 20px; }
    .quick-cats { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .quick-cat { padding: 12px 6px; border-radius: 14px; }
    .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .category-card { padding: 16px 8px; }
    .home-banner { margin: 16px 18px 0; min-height: 260px; border-radius: 20px; }
    .banner-content { padding: 22px; }
    .modal-services-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .footer-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
    .site-footer { padding: 50px 20px 100px; }
    .footer-bottom { flex-direction: column; text-align: center; }

    /* Booking form */
    .booking-form-card, .booking-summary-card { padding: 22px 18px; border-radius: 16px; }
    .form-progress .fp-label { font-size: 10px; }
    .service-select-grid { grid-template-columns: 1fr; }
    .service-select-card { padding: 14px; }
    .slot-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .slot-btn { padding: 13px 6px; font-size: 12px; }
    .form-group input, .form-group textarea, .form-group select { padding: 14px 16px; font-size: 16px; }
    .form-nav { flex-direction: column-reverse; gap: 10px; }
    .form-nav .btn { width: 100%; }

    .page-hero { padding: 44px 18px 34px; }
    .page-hero h1 { font-size: 30px; }

    .contact-info-card { padding: 22px; }

    .cta-banner { padding: 40px 20px; margin: 0 18px; border-radius: 20px; }
    .cta-banner h2 { font-size: 26px; }
}

@media (max-width: 380px) {
    .quick-cats { grid-template-columns: repeat(3, 1fr); }
    .slot-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================
   HOMEPAGE PREMIUM REDESIGN — v7
   (Sections below the banner only. Search bar, banner,
   header, footer aur baaki pages untouched.)
   ===================================================== */

:root {
    --hx-purple: #6A1B6D;
    --hx-purple-deep: #4A0E4E;
    --hx-magenta: #9C2B8F;
    --hx-gold: #D4AF37;
    --hx-gold-soft: #F3E5B8;
    --hx-blush: #F8D7E6;
    --hx-lavender: #EFE4F7;
    --hx-peach: #FDEAD9;
    --hx-cream: #FFF8F4;
}

/* ---------- Section head with serif + gold ornament ---------- */
.hx-section { padding: 72px 0 26px; }

.hx-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }

.hx-eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--hx-magenta);
    background: linear-gradient(90deg, var(--hx-blush), var(--hx-lavender));
    padding: 7px 18px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.hx-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(30px, 5vw, 44px);
    color: var(--hx-purple-deep);
    line-height: 1.15;
    letter-spacing: 0;
}
.hx-title em {
    font-style: italic;
    font-family: var(--font-display);
    background: linear-gradient(120deg, #B8912A, var(--hx-gold), #E8CB6B);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--hx-gold);
}

.hx-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 14px auto 14px;
}
.hx-ornament span {
    width: 52px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--hx-gold));
}
.hx-ornament span:last-child {
    background: linear-gradient(90deg, var(--hx-gold), transparent);
}
.hx-ornament i {
    font-style: normal;
    color: var(--hx-gold);
    font-size: 13px;
    line-height: 1;
}

.hx-sub {
    font-size: 15px;
    color: #6b5a6b;
    line-height: 1.7;
}

/* Light head (for purple band) */
.hx-head-light .hx-title { color: #fff; }
.hx-head-light .hx-sub { color: rgba(255, 255, 255, 0.78); }
.hx-head-light .hx-eyebrow {
    background: rgba(255, 255, 255, 0.12);
    color: var(--hx-gold-soft);
    border: 1px solid rgba(212, 175, 55, 0.35);
}

/* =====================================================
   TRUST RIBBON (banner ke turant neeche)
   ===================================================== */
.hx-trust {
    margin-top: -6px;
    padding: 26px 0;
    background: linear-gradient(180deg, #fff 0%, var(--hx-cream) 100%);
    border-bottom: 1px solid rgba(106, 27, 109, 0.07);
}
.hx-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.hx-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(106, 27, 109, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 3px 14px rgba(74, 14, 78, 0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.hx-trust-item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(74, 14, 78, 0.12); }
.hx-trust-item strong { display: block; font-size: 13.5px; color: #241024; line-height: 1.25; }
.hx-trust-item small { display: block; font-size: 11px; color: #8a768a; margin-top: 2px; }
.hx-trust-ico {
    flex: 0 0 42px;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hx-trust-ico svg { width: 20px; height: 20px; }
.hx-t1 { background: #E8F7EC; color: #1E9E4A; }
.hx-t2 { background: var(--hx-lavender); color: var(--hx-purple); }
.hx-t3 { background: var(--hx-peach); color: #C97B2D; }
.hx-t4 { background: var(--hx-gold-soft); color: #B8912A; }

/* =====================================================
   CATEGORIES — premium image tiles
   ===================================================== */
.hx-cats { padding-top: 60px; }

.hx-cats .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.hx-cats .category-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 5;
    padding: 0;
    background: var(--hx-purple-deep);
    box-shadow: 0 8px 26px rgba(74, 14, 78, 0.16);
    transition: transform .35s ease, box-shadow .35s ease;
    isolation: isolate;
}
.hx-cats .category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 44px rgba(74, 14, 78, 0.3);
}
.hx-cats .category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    border: 1px solid rgba(212, 175, 55, 0);
    transition: border-color .35s ease;
    pointer-events: none;
    z-index: 3;
}
.hx-cats .category-card:hover::after { border-color: rgba(212, 175, 55, 0.75); }

.hx-cats .category-card img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
    z-index: 0;
}
.hx-cats .category-card:hover img { transform: scale(1.08); }

.hx-cats .cat-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(74, 14, 78, 0) 30%,
        rgba(74, 14, 78, 0.55) 72%,
        rgba(42, 6, 44, 0.92) 100%);
}

.hx-cats .cat-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px;
    text-align: left;
}
.hx-cats .cat-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 6px;
}
.hx-cats .category-card span {
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.hx-cats .cat-count {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hx-gold-soft);
    letter-spacing: 0.4px;
    opacity: 0.95;
}

/* =====================================================
   HOW IT WORKS — royal purple band
   ===================================================== */
.hx-steps-band {
    position: relative;
    margin: 70px 0;
    padding: 76px 0 70px;
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(156, 43, 143, 0.5), transparent 60%),
        radial-gradient(700px 380px at 8% 110%, rgba(212, 175, 55, 0.16), transparent 55%),
        linear-gradient(135deg, var(--hx-purple-deep) 0%, var(--hx-purple) 55%, #7E2081 100%);
    overflow: hidden;
}
.hx-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    pointer-events: none;
}
.hx-glow-pink { width: 320px; height: 320px; background: #E96FBB; top: -120px; right: -80px; }
.hx-glow-gold { width: 260px; height: 260px; background: var(--hx-gold); bottom: -130px; left: -70px; opacity: 0.32; }

.hx-steps-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    z-index: 1;
}
.hx-steps-grid::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 12%;
    right: 12%;
    border-top: 2px dashed rgba(212, 175, 55, 0.4);
    z-index: 0;
}
.hx-step {
    position: relative;
    z-index: 1;
    text-align: center;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 40px 20px 26px;
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.hx-step:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(212, 175, 55, 0.5);
}
.hx-step-num {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8CB6B, var(--hx-gold) 55%, #B8912A);
    color: var(--hx-purple-deep);
    font-weight: 800;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(255, 255, 255, 0.1);
}
.hx-step-emoji { font-size: 30px; margin-bottom: 10px; }
.hx-step h3 { color: #fff; font-size: 17.5px; margin-bottom: 8px; }
.hx-step p { color: rgba(255, 255, 255, 0.75); font-size: 13px; line-height: 1.65; }

.hx-steps-cta { text-align: center; margin-top: 44px; position: relative; z-index: 1; }

/* =====================================================
   WHY CHOOSE US — pastel colorful cards
   ===================================================== */
.hx-why { padding-top: 10px; }

.hx-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.hx-why-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 30px 22px 26px;
    text-align: center;
    border: 1px solid rgba(106, 27, 109, 0.07);
    box-shadow: 0 4px 18px rgba(74, 14, 78, 0.07);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.hx-why-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--hx-purple), var(--hx-magenta), var(--hx-gold));
    opacity: 0;
    transition: opacity .3s ease;
}
.hx-why-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(74, 14, 78, 0.16); }
.hx-why-card:hover::before { opacity: 1; }

.hx-why-ico {
    width: 62px; height: 62px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    margin-bottom: 16px;
}
.hx-w1 { background: linear-gradient(135deg, var(--hx-lavender), #E2CBF0); }
.hx-w2 { background: linear-gradient(135deg, var(--hx-blush), #F4BFD8); }
.hx-w3 { background: linear-gradient(135deg, var(--hx-gold-soft), #EBD9A0); }
.hx-w4 { background: linear-gradient(135deg, var(--hx-peach), #FAD4AE); }

.hx-why-card h4 { font-size: 16px; color: #241024; margin-bottom: 8px; }
.hx-why-card p { font-size: 13px; color: #6b5a6b; line-height: 1.65; }

/* =====================================================
   STATS BAND — blush strip
   ===================================================== */
.hx-stats {
    margin: 56px 0 8px;
    padding: 44px 0;
    background: linear-gradient(120deg, var(--hx-blush) 0%, var(--hx-lavender) 55%, var(--hx-peach) 100%);
    border-top: 1px solid rgba(106, 27, 109, 0.08);
    border-bottom: 1px solid rgba(106, 27, 109, 0.08);
}
.hx-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    text-align: center;
}
.hx-stat strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 5vw, 46px);
    color: var(--hx-purple-deep);
    line-height: 1.1;
}
.hx-stat strong i {
    font-style: normal;
    color: var(--hx-gold);
    font-size: 0.6em;
    vertical-align: 6px;
}
.hx-stat span {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #7d5a7d;
}

/* =====================================================
   TESTIMONIALS — gold quote cards
   ===================================================== */
.hx-testi { padding-bottom: 30px; }

.hx-testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.hx-testi-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 34px 26px 26px;
    border: 1px solid rgba(106, 27, 109, 0.08);
    box-shadow: 0 6px 22px rgba(74, 14, 78, 0.08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.hx-testi-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(74, 14, 78, 0.16); }

.hx-quote {
    position: absolute;
    top: 6px;
    right: 20px;
    font-family: var(--font-display);
    font-size: 84px;
    line-height: 1;
    color: var(--hx-gold);
    opacity: 0.28;
    pointer-events: none;
}
.hx-testi-card .stars {
    color: var(--hx-gold);
    font-size: 14px;
    letter-spacing: 3px;
    margin-bottom: 14px;
}
.hx-testi-card > p {
    font-size: 14px;
    color: #574a57;
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 22px;
}
.hx-testi-author { display: flex; align-items: center; gap: 12px; }
.hx-testi-author strong { display: block; font-size: 13.5px; color: #241024; }
.hx-testi-author span { display: block; font-size: 11.5px; color: #8a768a; }

.hx-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    box-shadow: 0 4px 12px rgba(74, 14, 78, 0.25);
}
.hx-a1 { background: linear-gradient(135deg, var(--hx-purple), var(--hx-magenta)); }
.hx-a2 { background: linear-gradient(135deg, var(--hx-magenta), #D45CA8); }
.hx-a3 { background: linear-gradient(135deg, #B8912A, var(--hx-gold)); }

/* =====================================================
   CTA — gradient card with gold sparkles
   ===================================================== */
.hx-cta-wrap { padding: 40px 0 90px; }

.hx-cta {
    position: relative;
    text-align: center;
    border-radius: 28px;
    padding: 64px 28px;
    overflow: hidden;
    background:
        radial-gradient(700px 300px at 90% 0%, rgba(233, 111, 187, 0.35), transparent 60%),
        radial-gradient(500px 260px at 5% 100%, rgba(212, 175, 55, 0.22), transparent 55%),
        linear-gradient(130deg, var(--hx-purple-deep), var(--hx-purple) 55%, var(--hx-magenta));
    box-shadow: 0 24px 54px rgba(74, 14, 78, 0.32);
}
.hx-cta h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(30px, 5vw, 44px);
    color: #fff;
    margin-bottom: 6px;
}
.hx-cta h2 em {
    font-style: italic;
    font-family: var(--font-display);
    color: var(--hx-gold-soft);
}
.hx-cta p {
    color: rgba(255, 255, 255, 0.82);
    max-width: 460px;
    margin: 10px auto 30px;
    font-size: 15px;
    line-height: 1.7;
}
.hx-cta-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.hx-btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.hx-btn-ghost:hover { background: rgba(255, 255, 255, 0.2); }

.hx-spark {
    position: absolute;
    color: var(--hx-gold);
    pointer-events: none;
    animation: hxTwinkle 3.2s ease-in-out infinite;
}
.hx-s1 { top: 22px; left: 8%; font-size: 18px; }
.hx-s2 { top: 60%; right: 6%; font-size: 24px; animation-delay: 1.1s; }
.hx-s3 { bottom: 24px; left: 22%; font-size: 14px; animation-delay: 2s; }

@keyframes hxTwinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.85) rotate(0deg); }
    50% { opacity: 0.95; transform: scale(1.15) rotate(20deg); }
}

/* =====================================================
   MODAL + MINI CART — premium polish (same IDs/classes)
   ===================================================== */
.modal-box {
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(42, 6, 44, 0.45);
}
.modal-header {
    background: linear-gradient(120deg, var(--hx-purple-deep), var(--hx-purple) 60%, var(--hx-magenta));
    border-radius: 24px 24px 0 0;
    padding: 18px 22px;
}
.modal-header h3 {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
}
.modal-close {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 34px; height: 34px;
    line-height: 1;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.28); }

.modal-service-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(106, 27, 109, 0.1);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.modal-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(74, 14, 78, 0.14);
    border-color: rgba(212, 175, 55, 0.6);
}
.msc-add-btn { border-radius: 999px; font-weight: 600; }

.mini-cart-bar {
    background: linear-gradient(120deg, var(--hx-purple-deep), var(--hx-purple));
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(42, 6, 44, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.35);
}
.mini-cart-bar .mcb-info span { color: rgba(255, 255, 255, 0.75); }
.mini-cart-bar .mcb-info strong { color: var(--hx-gold-soft); }

/* =====================================================
   RESPONSIVE — premium homepage
   ===================================================== */
@media (max-width: 992px) {
    .hx-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .hx-cats .category-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .hx-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 16px; }
    .hx-steps-grid::before { display: none; }
    .hx-why-grid { grid-template-columns: repeat(2, 1fr); }
    .hx-testi-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .hx-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
}

@media (max-width: 640px) {
    .hx-section { padding: 52px 0 18px; }
    .hx-head { margin-bottom: 30px; }
    .hx-trust { padding: 18px 0; }
    .hx-trust-grid { gap: 10px; }
    .hx-trust-item { padding: 11px 12px; gap: 9px; border-radius: 13px; }
    .hx-trust-ico { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; }
    .hx-trust-ico svg { width: 17px; height: 17px; }
    .hx-trust-item strong { font-size: 12px; }
    .hx-trust-item small { font-size: 10px; }

    .hx-cats { padding-top: 44px; }
    .hx-cats .category-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
    .hx-cats .category-card { border-radius: 18px; aspect-ratio: 1 / 1.15; }
    .hx-cats .cat-overlay { padding: 12px; }
    .hx-cats .cat-icon { width: 36px; height: 36px; font-size: 17px; border-radius: 10px; }
    .hx-cats .category-card span { font-size: 13.5px; }
    .hx-cats .cat-count { font-size: 10.5px; }

    .hx-steps-band { margin: 52px 0; padding: 58px 0 52px; }
    .hx-steps-grid { grid-template-columns: 1fr 1fr; gap: 32px 12px; }
    .hx-step { padding: 34px 13px 20px; border-radius: 16px; }
    .hx-step-num { width: 38px; height: 38px; font-size: 15px; top: -19px; }
    .hx-step-emoji { font-size: 25px; }
    .hx-step h3 { font-size: 14.5px; }
    .hx-step p { font-size: 11.5px; }

    .hx-why-grid { grid-template-columns: 1fr 1fr; gap: 13px; }
    .hx-why-card { padding: 22px 13px 20px; border-radius: 16px; }
    .hx-why-ico { width: 50px; height: 50px; font-size: 22px; border-radius: 14px; }
    .hx-why-card h4 { font-size: 13.5px; }
    .hx-why-card p { font-size: 11.5px; }

    .hx-stats { margin-top: 44px; padding: 32px 0; }
    .hx-stat span { font-size: 10.5px; letter-spacing: 1px; }

    .hx-cta-wrap { padding: 28px 0 96px; }
    .hx-cta { padding: 46px 20px; border-radius: 22px; }
    .hx-cta-btns .btn { width: 100%; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .hx-spark { animation: none; opacity: 0.5; }
    .hx-trust-item, .hx-cats .category-card, .hx-cats .category-card img,
    .hx-step, .hx-why-card, .hx-testi-card, .modal-service-card { transition: none; }
}

/* =====================================================
   LOCATION SYSTEM — v8
   (Homepage strip + booking form capture)
   ===================================================== */

/* ---------- Homepage location strip (banner ke upar) ---------- */
.hx-locbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 0 14px;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    border: 1px solid rgba(106, 27, 109, 0.12);
    background: linear-gradient(90deg, var(--hx-blush), var(--hx-lavender));
    color: #4d2a4d;
    box-shadow: 0 3px 12px rgba(74, 14, 78, 0.07);
    transition: background .3s ease, border-color .3s ease;
}
.hx-locbar strong { color: var(--hx-purple-deep); }
.hx-locbar-pin { font-size: 15px; line-height: 1; }
.hx-locbar-tick { color: #1E9E4A; font-weight: 800; }

.hx-locbar.is-loading { opacity: 0.85; }
.hx-locbar.is-found {
    background: linear-gradient(90deg, #EAF9EF, #F2FBEA);
    border-color: rgba(30, 158, 74, 0.25);
}
.hx-locbar.is-off {
    cursor: pointer;
    background: linear-gradient(90deg, #FFF3E4, #FFEFDD);
    border-color: rgba(201, 123, 45, 0.3);
}
.hx-locbar.is-off:hover { border-color: rgba(201, 123, 45, 0.55); }

/* ---------- Booking form: location field ---------- */
.loc-required {
    font-size: 11px;
    font-weight: 700;
    color: #C0392B;
    background: #FDECEA;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: 1px;
}

.loc-capture-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 18px;
    border-radius: 14px;
    border: 2px dashed var(--hx-purple);
    background: linear-gradient(120deg, #FBF3FB, var(--hx-lavender));
    color: var(--hx-purple-deep);
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.loc-capture-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.loc-capture-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(74, 14, 78, 0.14);
}
.loc-capture-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }
.loc-capture-btn.done {
    border-style: solid;
    border-color: #1E9E4A;
    background: linear-gradient(120deg, #EAF9EF, #F2FBEA);
    color: #14683A;
}

.loc-hint { font-size: 11.5px; color: #8a768a; margin-top: 8px; }

.loc-status {
    margin-top: 10px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
}
.loc-status b { display: block; margin-bottom: 2px; }
.loc-status span { font-size: 12px; opacity: 0.9; }

.loc-status.loc-ok   { background: #EAF9EF; border: 1px solid rgba(30,158,74,0.3);  color: #14683A; }
.loc-status.loc-err  { background: #FDECEA; border: 1px solid rgba(192,57,43,0.3);  color: #922B21; }
.loc-status.loc-warn { background: #FFF6E3; border: 1px solid rgba(201,123,45,0.35); color: #7A5210; }
.loc-status.loc-wait { background: var(--hx-lavender); border: 1px solid rgba(106,27,109,0.18); color: #4d2a4d; }

.loc-skip-btn {
    display: block;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(201, 123, 45, 0.5);
    background: #fff;
    color: #B0641E;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.loc-skip-btn:hover { background: #FFF6E3; }

@keyframes locFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
    40% { box-shadow: 0 0 0 5px rgba(192, 57, 43, 0.25); }
}
.loc-flash { animation: locFlash 0.9s ease 2; }

@media (max-width: 640px) {
    .hx-locbar { font-size: 11.5px; padding: 9px 14px; margin-bottom: 11px; }
}
/* =====================================================
   SERVICE CODE + TRACK PAGE  (added v11)
   ===================================================== */
.service-code-box{
    margin:22px 0 6px;
    padding:22px 20px;
    border-radius:20px;
    background:linear-gradient(135deg,#4A0E4E 0%,#6A1B6D 55%,#9C2B8F 100%);
    border:2px solid #D4AF37;
    box-shadow:0 12px 30px rgba(74,14,78,.28);
    text-align:center;
    color:#FFF8F4;
}
.service-code-box .scb-label{
    display:block;
    font-size:12px;
    letter-spacing:2.4px;
    text-transform:uppercase;
    color:#D4AF37;
    margin-bottom:8px;
    font-weight:700;
}
.service-code-box .scb-code{
    display:block;
    font-size:46px;
    line-height:1.1;
    letter-spacing:10px;
    font-weight:800;
    color:#FFF8F4;
    text-shadow:0 2px 14px rgba(212,175,55,.55);
    margin-bottom:12px;
}
.service-code-box .scb-hint{
    font-size:13.5px;
    color:#F8D7E6;
    margin:0 0 8px;
    line-height:1.6;
}
.service-code-box .scb-note{
    font-size:12px;
    color:rgba(255,248,244,.75);
    margin:0;
}
.service-code-box .scb-note a{color:#D4AF37;text-decoration:underline;}
.service-code-box-sm{margin:16px 0 4px;padding:16px 14px;border-radius:16px;}
.service-code-box-sm .scb-code{font-size:34px;letter-spacing:8px;margin-bottom:8px;}
.service-code-box-sm .scb-hint{font-size:12.5px;margin:0;}

/* ---------- TRACK PAGE ---------- */
.track-card{max-width:520px;margin:0 auto 26px;}
.track-error{
    margin-top:16px;padding:12px 14px;border-radius:12px;
    background:#FDECEF;color:#9B1C31;font-size:13.5px;text-align:center;
    border:1px solid #F5C2CB;
}
.track-results{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:18px;}
.track-item{
    background:#fff;border-radius:20px;padding:20px;
    box-shadow:0 10px 30px rgba(106,27,109,.10);
    border:1px solid #F1E3EE;
}
.track-item-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed #EBD9E6;
}
.track-item-head strong{color:#4A0E4E;font-size:16px;letter-spacing:.5px;}
.track-status{
    font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:20px;
    background:#F8D7E6;color:#6A1B6D;white-space:nowrap;
}
.track-row{
    display:flex;justify-content:space-between;gap:14px;
    padding:7px 0;font-size:13.5px;color:#8a7f89;
}
.track-row strong{color:#3d2c3c;text-align:right;font-weight:600;}
.track-arrived{
    margin-top:14px;padding:10px 12px;border-radius:12px;
    background:#E8F6EC;color:#1B6B3A;font-size:13px;font-weight:600;text-align:center;
}

/* =====================================================
   HOMEPAGE BANNER SLIDER — added v12
   Design wahi purana hai — .home-banner ki styling
   chhui nahi gayi. Yahan sirf slide badalna aur dots.
   ===================================================== */
.hbs-wrap{position:relative;}
.hbs-slide{display:none;}
.hbs-slide.is-active{
    display:flex;
    animation:hbsFade .6s ease;
}
@keyframes hbsFade{
    from{opacity:0;}
    to{opacity:1;}
}
.hbs-dots{
    display:flex;justify-content:center;align-items:center;gap:9px;
    margin-top:14px;
}
.hbs-dot{
    width:9px;height:9px;padding:0;border:none;border-radius:50%;
    background:#E0CEDC;cursor:pointer;
    transition:all .25s ease;
}
.hbs-dot:hover{background:#C08BB8;}
.hbs-dot.is-active{
    width:26px;border-radius:20px;
    background:linear-gradient(90deg,#6A1B6D,#D4AF37);
}
@media (prefers-reduced-motion: reduce){
    .hbs-slide.is-active{animation:none;}
}

/* =====================================================
   BANNER 16:9  — added v13
   -----------------------------------------------------
   Yeh rules file ke SABSE NEECHE hain, isliye upar wali
   .home-banner ki min-height (320px / mobile 260px) ko
   apne aap hara dete hain — purani CSS chhui nahi gayi.

   MOBILE  : sach me 16:9 (banner chhota ho jaayega)
   LAPTOP  : 16:9 ka roop, par height 420px par ruk jaati hai
             (warna 1350px chaudi screen par banner 760px ka
              ho jaata — poori screen gher leta)
   ===================================================== */
.home-banner{
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 420px;
}

/* ---------- MOBILE: 16:9 me text fit karna ---------- */
@media (max-width: 768px){
    .home-banner{
        margin: 16px 18px 0;
        border-radius: 20px;
    }
    .banner-content{
        padding: 16px 18px;
        max-width: 100%;
    }
    .banner-content h1{
        font-size: 19px;
        line-height: 1.25;
        margin-bottom: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .banner-content p{
        font-size: 12.5px;
        line-height: 1.45;
        margin-bottom: 10px;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .banner-content .btn{
        padding: 9px 20px;
        font-size: 13px;
    }
    .hbs-dots{ margin-top: 10px; }
}

/* ---------- Chhote phone (jaise 320px) ---------- */
@media (max-width: 380px){
    .banner-content{ padding: 13px 15px; }
    .banner-content h1{ font-size: 17.5px; }
    .banner-content p{
        font-size: 12px;
        -webkit-line-clamp: 1;
        margin-bottom: 8px;
    }
    .banner-content .btn{ padding: 8px 18px; font-size: 12.5px; }
}

/* =====================================================
   MOBILE FIXES — added v14
   -----------------------------------------------------
   Yeh rules file ke SABSE NEECHE hain, isliye upar wali
   purani CSS ko apne aap hara dete hain. Purani CSS
   chhui nahi gayi — kuch bhi delete nahi hua.
   ===================================================== */

/* -----------------------------------------------------
   1. TAIRTA HUA HARA WHATSAPP GOLA — HATAO
   Ab WhatsApp neeche ki patti me hai, isliye yeh gola
   content ko dhak raha tha. Bas chhupa rahe hain.
   ----------------------------------------------------- */
.float-whatsapp{ display: none !important; }

/* -----------------------------------------------------
   2. NEECHE KI PATTI (mobile bottom bar)
   ----------------------------------------------------- */
@media (max-width: 680px){

    .mobile-bottom-bar{
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    }

    /* ---- Call aur WhatsApp ke gol button ---- */
    .mbb-icon{
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        text-decoration: none;
    }
    .mbb-icon svg{ width: 21px; height: 21px; }

    .mbb-call{
        background: linear-gradient(135deg, #4A0E4E 0%, #6A1B6D 100%);
        color: #fff;
        box-shadow: 0 4px 14px rgba(74,14,78,.28);
    }
    .mbb-wa{
        background: linear-gradient(135deg, #1FA855 0%, #25D366 100%);
        color: #fff;
        box-shadow: 0 4px 14px rgba(37,211,102,.32);
    }

    /* ---- Book Now (book.php ke alawa har page par) ---- */
    .mbb-book{
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    /* ---- BOOK PAGE: baayen total, daayen call + whatsapp ---- */
    .mobile-bottom-bar.is-book-page{ gap: 8px; }

    .mbb-total{
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.2;
        padding-left: 2px;
    }
    .mbb-total-label{
        font-size: 11.5px;
        color: #8a768a;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mbb-total-price{
        font-size: 19px;
        font-weight: 800;
        color: #4A0E4E;
        letter-spacing: .3px;
    }
}

/* -----------------------------------------------------
   3. TRUST CARDS — icon UPAR, text NEECHE
   Pehle icon bagal me tha, isse text 3 line me toot
   raha tha. Ab charon card ek barabar ke hain.
   ----------------------------------------------------- */
@media (max-width: 680px){
    .hx-trust{ padding: 14px 0; }
    .hx-trust-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .hx-trust-item{
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 13px 12px;
        border-radius: 14px;
        height: 100%;
    }
    .hx-trust-ico{
        flex-basis: auto;
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
    .hx-trust-ico svg{ width: 16px; height: 16px; }
    .hx-trust-item strong{
        font-size: 12.5px;
        line-height: 1.3;
    }
    .hx-trust-item small{
        font-size: 10.5px;
        line-height: 1.35;
        margin-top: 3px;
    }
    /* Mobile par hover ka uchhalna band — ungli se galti se lagta hai */
    .hx-trust-item:hover{ transform: none; }
}

/* -----------------------------------------------------
   4. SEARCH BAR — chhota, kam jagah
   ----------------------------------------------------- */
@media (max-width: 680px){
    .search-section{ padding: 12px 18px 0; }
    .search-bar input{
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 14px;
    }
    .search-bar button{ width: 38px; height: 38px; }
    .search-bar button svg{ width: 16px; height: 16px; }
}

/* -----------------------------------------------------
   5. LOCATION PATTI — ek hi line me
   ----------------------------------------------------- */
@media (max-width: 680px){
    .hx-locbar{
        margin-top: 10px;
        padding: 8px 12px;
        font-size: 12px;
        line-height: 1.35;
        gap: 7px;
    }
    .hx-locbar-pin{ font-size: 13px; }
}

/* ===== BOOK PAGE SMART BAR — help + action button (v15) ===== */
@media (max-width: 680px){
    /* ---- Call + WhatsApp ka group (madad ke liye) ---- */
    .mbb-help{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    /* Book page par jab tak koi service nahi chuni, help buttons
       daayen taraf rahein (baayen total hai) */
    .mobile-bottom-bar.is-book-page .mbb-help{ margin-left: auto; }

    /* ---- Aage-badho button (book page par service chunne ke baad) ---- */
    .mbb-action{
        border: none;
        cursor: pointer;
        font-family: inherit;
    }

}

/* =====================================================
   LOGO THODA BADA — added v15
   Logo ek hi juDi image hai (2160x530), isliye sirf
   HEIGHT badha rahe hain — width: auto pehle se hai,
   to text logo ke saath barabar baDhega, tedha nahi hoga.
   Ye rules sabse neeche hain, isliye upar wali value ko
   apne aap hara dete hain (purani CSS chhui nahi).
   ===================================================== */
.logo-img{
    height: 48px;
    max-width: 210px;
}

@media (max-width: 680px){
    .logo-img{
        height: 44px;
        max-width: 190px;
    }
}

/* =====================================================
   SERVICE CARD (category popup) — image hatakar
   chhota, saaf, sundar text card — added v16
   Purani .msc-img/.msc-body CSS ko yahi neeche wale
   rules hara dete hain (image ab banti hi nahi).
   ===================================================== */

/* Popup grid — mobile par 2 card ek line me, thoda kam gap */
.modal-services-grid{
    gap: 12px;
}

.modal-service-card{
    border: 1.5px solid #EFE0EA;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.modal-service-card:hover{
    border-color: var(--color-secondary);
    box-shadow: 0 6px 18px rgba(106,27,109,.10);
}
.modal-service-card.added{
    border-color: var(--color-primary);
    background: #FDF6FB;
}

/* Body — ab image nahi, isliye poora card yahi hai */
.msc-body{
    padding: 14px 13px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Service ka naam */
.msc-body h4{
    font-size: 14px;
    line-height: 1.3;
    color: #2C1A2B;
    margin: 0 0 8px;
    font-weight: 700;
    /* lamba naam 3 line tak, phir ... (mbstring nahi chahiye, CSS se) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price · duration — price gold-purple me ubhri hui */
.msc-body span{
    display: block;
    font-size: 13px;
    color: #6A1B6D;
    font-weight: 700;
    margin: 0 0 12px;
}
.msc-body span .msc-dur{
    color: #9a8a98;
    font-weight: 500;
    font-size: 12px;
}

/* + Add button — neeche chipka, card barabar dikhe */
.msc-add-btn{
    margin-top: auto;
    width: 100%;
    padding: 9px 10px;
    border: 1.5px solid var(--color-primary);
    background: #fff;
    color: var(--color-primary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s ease;
}
.msc-add-btn:hover{
    background: var(--color-primary);
    color: #fff;
}
.modal-service-card.added .msc-add-btn{
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Chhoti screen — 2 card, aur compact */
@media (max-width: 680px){
    .modal-services-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .msc-body{ padding: 12px 11px; }
    .msc-body h4{ font-size: 13px; margin-bottom: 6px; }
    .msc-body span{ font-size: 12.5px; margin-bottom: 10px; }
    .msc-add-btn{ padding: 8px; font-size: 12.5px; }
}

/* Bahut chhote phone (~320px) — 1 hi card taaki naam poora dikhe */
@media (max-width: 360px){
    .modal-services-grid{ grid-template-columns: 1fr; }
}

/* =====================================================
   SERVICES PAGE — chhota hero — added v17
   ===================================================== */
.svc-hero{
    text-align: center;
    padding: 34px 24px 10px;
    background: linear-gradient(180deg, #FDF2F9 0%, var(--color-background) 100%);
}
.svc-hero .hx-eyebrow{
    display: inline-block;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 8px;
}
.svc-hero-title{
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(24px, 5vw, 38px);
    line-height: 1.2;
    color: #2C1A2B;
    margin: 0 0 6px;
    font-weight: 700;
}
.svc-hero-title em{
    font-style: italic;
    color: var(--color-accent);
}
.svc-hero-sub{
    font-size: 14px;
    color: #8a768a;
    max-width: 440px;
    margin: 8px auto 0;
    line-height: 1.5;
}

@media (max-width: 680px){
    .svc-hero{ padding: 24px 20px 6px; }
    .svc-hero-sub{ font-size: 13px; }
}

/* =====================================================
   MENU FIX — added v18
   -----------------------------------------------------
   Dikkat: mini-cart-bar / bottom bar position:fixed the
   par z-index nahi tha, isliye browser me woh header ke
   UPAR aa jaate the aur menu (☰) button ka click kha
   lete the — menu khulta hi nahi tha.
   Hal: in sabko sahi z-index do, aur menu (1001) sabse
   upar rahe taaki khulne par kisi ke peeche na chhupe.
   ===================================================== */

/* Neeche ki fixed pattiyan — header (999) se neeche */
.mini-cart-bar{ z-index: 990; }
.mobile-bottom-bar{ z-index: 990; }

/* Menu khule to woh SABSE upar rahe */
.main-nav{ z-index: 1002 !important; }
.main-nav.open{ z-index: 1002 !important; }

/* Menu button hamesha click-able rahe */
.menu-toggle{ position: relative; z-index: 1000; }

/* =====================================================
   MENU FIX v19 — menu khulta hai par khaali/paardarshi
   dikhta tha. Yeh sab kuch force karta hai:
   background, links, aur menu ko sabse upar.
   ===================================================== */
@media (max-width: 768px){

    /* Menu ko header ki z-index-jail se bahar nikaalo */
    .site-header .main-nav,
    .main-nav{
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #FFF8F4 !important;   /* solid background — paardarshi na rahe */
        display: flex !important;
        flex-direction: column !important;
        padding: 26px !important;
        z-index: 100000 !important;
        overflow-y: auto !important;
    }

    /* Band hone par chhupa rahe (translate se bahar) */
    .main-nav{
        transform: translateX(100%) !important;
        visibility: hidden !important;
        transition: transform .3s ease, visibility .3s !important;
    }
    /* Khulne par andar aaye aur dikhe */
    .main-nav.open{
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* Links ki list — dikhe, seedhi column me */
    .main-nav ul{
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }
    .main-nav li{ display: block !important; width: 100% !important; }
    .main-nav a{
        display: block !important;
        padding: 16px 4px !important;
        font-size: 19px !important;
        color: #2C2C2C !important;
        border-bottom: 1px solid rgba(106,27,109,0.08) !important;
    }

    /* Mobile-only links (Call, Book Now) bhi dikhe */
    .nav-mobile-only{ display: block !important; }

    /* Cross button upar-daayen */
    .main-nav .nav-close{
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px; height: 40px;
        margin-left: auto;
        margin-bottom: 10px;
        border-radius: 50%;
        background: #f0e6ec;
        border: none;
        color: #6A1B6D;
        font-size: 22px;
        cursor: pointer;
    }

    /* Menu button hamesha click-able */
    .menu-toggle{ position: relative; z-index: 100001 !important; }

    /* Neeche ki pattiyan menu se neeche */
    .mini-cart-bar{ z-index: 900 !important; }
    .mobile-bottom-bar{ z-index: 900 !important; }
    .float-whatsapp{ z-index: 800 !important; }
}

/* =====================================================
   MENU FIX v20 — ASLI JADD (16 Jul 2026)
   -----------------------------------------------------
   Problem: .site-header par 'backdrop-filter: blur()' laga
   hai. Jis element par backdrop-filter/transform/filter ho,
   wo apne andar ke har position:fixed bachche ke liye NAYA
   containing block ban jaata hai. Isliye .main-nav ka
   position:fixed poori screen ke bajaye SIRF header ki
   choti patti ke andar bandh jaata tha — × dikhta tha par
   background + links header ki height se bahar kat jaate the.
   z-index se theek nahi hota (z-index ki dikkat thi hi nahi).

   Hal: mobile par jab menu khula ho (.main-nav.open),
   :has() se uske parent header ki backdrop-filter/transform
   HATA do — taaki .main-nav ka fixed phir se poori screen
   naap le. Purani CSS kuch nahi chhui.
   ===================================================== */
@media (max-width: 768px){
    .site-header:has(.main-nav.open){
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        filter: none !important;
        position: static !important;
    }
}

/* =====================================================
   MENU FIX v22 — 16 Jul 2026
   1) menu khulne par hamburger (menu-toggle) chhup jaye,
      sirf × (nav-close) dikhe.
   2) menu ke andar 3 CTA button: Call (outline),
      WhatsApp (green), Book Now (primary). Text sahi rang me
      (v19 ne .main-nav a ka color force kar diya tha).
   Purani CSS kuch nahi chhui — sirf neeche add hua.
   ===================================================== */

/* WhatsApp green button (site me pehle nahi tha) */
.btn-whatsapp{
    background: #25D366;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(37,211,102,0.28);
}
.btn-whatsapp:hover{ background: #1eb457; color:#ffffff; }

@media (max-width: 768px){

    /* menu khule to hamburger chhupao */
    .site-header:has(.main-nav.open) .menu-toggle{ display: none !important; }

    /* CTA list-item ka border/line hatao, sundar spacing do */
    .main-nav .nav-cta-item{ border-bottom: none !important; padding: 0 !important; }
    .main-nav li:not(.nav-cta-item) + .nav-cta-item{ margin-top: 20px !important; }
    .main-nav .nav-cta-item + .nav-cta-item{ margin-top: 12px !important; }

    /* button ko dobara sundar banao (v19 ne links ko flat kar diya tha) */
    .main-nav a.btn{
        display: flex !important;
        width: 100% !important;
        padding: 15px 24px !important;
        font-size: 16px !important;
        border-bottom: none !important;
    }
    .main-nav a.btn-primary{  color: #ffffff !important; }
    .main-nav a.btn-whatsapp{ color: #ffffff !important; }
    .main-nav a.btn-outline{  color: var(--color-primary) !important; }
}

/* =====================================================
   ABOUT PAGE v23 — 17 Jul 2026
   about.php ko premium look. Sirf naye .about-* class,
   theme ke apne color variables se. Purani CSS kuch nahi chhui.
   ===================================================== */

/* Hero */
.about-hero{
    background: linear-gradient(180deg, #FBEFF3 0%, var(--color-bg) 100%);
    padding: 64px 20px 56px;
    text-align: center;
}
.about-hero-inner{ max-width: 720px; margin: 0 auto; }
.about-hero h1{
    font-size: clamp(34px, 6vw, 56px);
    line-height: 1.1;
    margin: 14px 0 16px;
}
.about-hero h1 span{ color: var(--color-primary); }
.about-hero p{ font-size: 17px; color: #4a4a4a; max-width: 560px; margin: 0 auto; }

/* Story */
.about-story{ padding: 64px 20px; max-width: 1180px; margin: 0 auto; }
.about-story-grid{
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center;
}
.about-story-text h2{ font-size: clamp(26px, 3.4vw, 38px); margin: 10px 0 18px; }
.about-story-text p{ color: #444; font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; }
.about-story-card{
    background: linear-gradient(135deg, var(--color-primary), #4d1350);
    color: #fff; border-radius: 22px; padding: 40px 34px; position: relative;
    box-shadow: 0 20px 45px rgba(106,27,109,0.28);
}
.about-story-card p{ font-size: 20px; font-weight: 500; line-height: 1.5; position: relative; z-index: 1; }
.about-quote-mark{
    position: absolute; top: 6px; left: 22px; font-size: 90px; line-height: 1;
    color: var(--color-accent); opacity: .55; font-family: Georgia, serif;
}

/* Mission / Vision */
.about-mv{ padding: 8px 20px 56px; max-width: 1180px; margin: 0 auto; }
.about-mv-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.about-mv-card{
    background: #fff; border: 1px solid rgba(106,27,109,0.10); border-radius: 20px;
    padding: 34px 30px; box-shadow: 0 10px 30px rgba(106,27,109,0.06);
}
.about-mv-icon{
    width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: #F7ECF3; color: var(--color-primary); margin-bottom: 18px;
}
.about-mv-icon svg{ width: 30px; height: 30px; }
.about-mv-card h3{ font-size: 22px; margin-bottom: 10px; }
.about-mv-card p{ color: #555; font-size: 15px; line-height: 1.7; }

/* Why choose us */
.about-why{ padding: 60px 20px; max-width: 1180px; margin: 0 auto; text-align: center; }
.about-center-title{ font-size: clamp(26px, 3.4vw, 38px); margin: 12px 0 0; }
.about-divider{
    display: block; width: 64px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--color-accent), #b8912b);
    margin: 16px auto 44px;
}
.about-why-grid{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left;
}
.about-why-card{
    background: #fff; border: 1px solid rgba(106,27,109,0.08); border-radius: 18px;
    padding: 28px 24px; transition: transform .25s ease, box-shadow .25s ease;
}
.about-why-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px rgba(106,27,109,0.12); }
.about-why-icon{
    width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: #F7ECF3; color: var(--color-primary); margin-bottom: 16px;
}
.about-why-icon svg{ width: 26px; height: 26px; }
.about-why-card h4{ font-size: 17px; margin-bottom: 8px; }
.about-why-card p{ color: #666; font-size: 14px; line-height: 1.6; }

/* Promise band */
.about-promise{
    background: linear-gradient(135deg, var(--color-primary), #4d1350);
    padding: 60px 20px; text-align: center; color: #fff;
}
.about-promise-inner{ max-width: 760px; margin: 0 auto; }
.about-eyebrow-light{ color: var(--color-accent) !important; }
.about-promise h2{ font-size: clamp(24px, 3.2vw, 34px); margin: 10px 0 30px; color: #fff; }
.about-promise-list{
    list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px 30px; text-align: left; max-width: 640px; margin: 0 auto;
}
.about-promise-list li{ position: relative; padding-left: 34px; font-size: 15.5px; line-height: 1.5; }
.about-promise-list li::before{
    content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--color-accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center/16px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center/16px no-repeat;
}

/* CTA */
.about-cta{ padding: 66px 20px; text-align: center; max-width: 720px; margin: 0 auto; }
.about-cta h2{ font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 12px; }
.about-cta p{ color: #555; font-size: 16px; margin-bottom: 28px; }
.about-cta-btns{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Mobile ---- */
@media (max-width: 768px){
    .about-hero{ padding: 44px 18px 40px; }
    .about-story{ padding: 44px 18px; }
    .about-story-grid{ grid-template-columns: 1fr; gap: 26px; }
    .about-story-card{ padding: 34px 26px; }
    .about-story-card p{ font-size: 18px; }
    .about-mv{ padding: 4px 18px 40px; }
    .about-mv-grid{ grid-template-columns: 1fr; gap: 18px; }
    .about-why{ padding: 44px 18px; }
    .about-divider{ margin: 14px auto 32px; }
    .about-why-grid{ grid-template-columns: 1fr; gap: 16px; }
    .about-promise{ padding: 46px 18px; }
    .about-promise-list{ grid-template-columns: 1fr; gap: 14px; }
    .about-cta{ padding: 48px 18px; }
    .about-cta-btns .btn{ width: 100%; }
}

/* =====================================================
   CONTACT PAGE v24 — 17 Jul 2026
   contact.php premium look — reuse about-hero, naye .ct-*
   class. Purani .contact-* CSS ko haath nahi lagaya.
   ===================================================== */

.ct-methods{ padding: 56px 20px; max-width: 1180px; margin: 0 auto; }
.ct-grid{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.ct-card{
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1px solid rgba(106,27,109,0.08); border-radius: 20px;
    padding: 32px 22px; text-decoration: none; color: inherit;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ct-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(106,27,109,0.14);
    border-color: rgba(106,27,109,0.18);
}
.ct-icon{
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #F7ECF3; color: var(--color-primary); margin-bottom: 18px;
}
.ct-icon svg{ width: 30px; height: 30px; }
.ct-card h4{ font-size: 17px; margin-bottom: 6px; }
.ct-card p{ color: #666; font-size: 14px; line-height: 1.5; margin-bottom: 16px; word-break: break-word; }
.ct-action{
    margin-top: auto; font-size: 13px; font-weight: 600; letter-spacing: .3px;
    color: var(--color-primary);
    background: #F7ECF3; padding: 8px 18px; border-radius: var(--radius-pill);
}
.ct-card:hover .ct-action{ background: var(--color-primary); color: #fff; }

/* WhatsApp card accent */
.ct-card-wa .ct-icon{ background: #E7F9EE; color: #1a9d4f; }
.ct-card-wa .ct-action{ background: #E7F9EE; color: #1a9d4f; }
.ct-card-wa:hover .ct-action{ background: #25D366; color: #fff; }

/* Static (address) card — no hover lift */
.ct-card-static{ cursor: default; }
.ct-card-static:hover{ transform: none; box-shadow: none; border-color: rgba(106,27,109,0.08); }
.ct-action-muted{ color: #8a6d8c; background: #F5EEF6; }
.ct-card-static:hover .ct-action-muted{ background: #F5EEF6; color: #8a6d8c; }

/* Book directly band */
.ct-book{
    background: linear-gradient(135deg, var(--color-primary), #4d1350);
    padding: 60px 20px; text-align: center; color: #fff;
}
.ct-book-inner{ max-width: 640px; margin: 0 auto; }
.ct-book h2{ font-size: clamp(26px, 3.4vw, 38px); margin: 10px 0 12px; color: #fff; }
.ct-book p{ font-size: 16px; line-height: 1.65; opacity: .92; margin-bottom: 28px; }
.ct-book-btns{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Mobile ---- */
@media (max-width: 768px){
    .ct-methods{ padding: 40px 16px; }
    .ct-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
    .ct-card{ padding: 26px 14px; border-radius: 16px; }
    .ct-icon{ width: 52px; height: 52px; margin-bottom: 14px; }
    .ct-icon svg{ width: 26px; height: 26px; }
    .ct-card h4{ font-size: 15.5px; }
    .ct-card p{ font-size: 13px; }
    .ct-book{ padding: 46px 18px; }
    .ct-book-btns .btn{ width: 100%; }
}
@media (max-width: 380px){
    .ct-grid{ grid-template-columns: 1fr; }
}

/* =====================================================
   CONTACT AREA v25 — 17 Jul 2026
   contact.php me bada "Dehradun" location section.
   ===================================================== */
.ct-area{ padding: 8px 20px 64px; max-width: 1000px; margin: 0 auto; text-align: center; }
.ct-area-city{
    font-size: clamp(56px, 13vw, 128px); line-height: 1; font-weight: 800; letter-spacing: -1.5px;
    margin: 12px 0 6px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.ct-area-sub{ font-size: 17px; color: var(--color-primary); font-weight: 600; margin-bottom: 22px; }
.ct-area-text{ max-width: 720px; margin: 0 auto 28px; color: #4a4a4a; font-size: 16px; line-height: 1.85; }
.ct-area-chips{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ct-area-chip{
    font-size: 13.5px; font-weight: 500; color: var(--color-primary);
    background: #F7ECF3; padding: 8px 16px; border-radius: var(--radius-pill);
}
@media (max-width: 768px){
    .ct-area{ padding: 2px 18px 46px; }
    .ct-area-text{ font-size: 15px; line-height: 1.75; }
    .ct-area-chip{ font-size: 12.5px; padding: 7px 13px; }
}

/* =====================================================
   ABOUT CONTENT v26 — 17 Jul 2026
   about.php me "Our Services" tiles (owner content).
   ===================================================== */
.about-svc-sec{ padding: 58px 20px; max-width: 1180px; margin: 0 auto; text-align: center; }
.about-svc-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-svc{
    display: flex; align-items: center; gap: 12px; text-align: left;
    background: #fff; border: 1px solid rgba(106,27,109,0.10); border-radius: 14px;
    padding: 18px 20px; font-size: 15px; font-weight: 500; color: #3a2a3b;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.about-svc:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(106,27,109,0.10);
    border-color: rgba(106,27,109,0.20);
}
.about-svc-mark{
    flex: 0 0 auto; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px;
    background: linear-gradient(135deg, var(--color-accent), #b8912b);
}
@media (max-width: 900px){ .about-svc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px){
    .about-svc-sec{ padding: 44px 18px; }
    .about-svc{ padding: 15px 16px; font-size: 14px; }
}
@media (max-width: 420px){ .about-svc-grid{ grid-template-columns: 1fr; } }


/* =====================================================
   BANNER — LAPTOP FULL WIDTH — added v27
   Sirf desktop (min-width 769px). Mobile (max-width 768px)
   ka 16:9 waisa hi rehta hai — use haath nahi lagaya.
   Yeh rule file ke SABSE NEECHE hai, isliye v13 ke desktop
   16:9 (aspect-ratio + max-height 420) ko override kar deta
   hai: banner poori container-width, height thodi kam.
   ===================================================== */
@media (min-width: 769px){
    .home-banner{
        aspect-ratio: auto;
        max-height: none;
        height: 340px;
        min-height: 0;
    }
}


/* =====================================================
   CATEGORY TILE SHADOW — neutral (no blue/purple) — added v28
   Purani purple shadow rgba(74,14,78,...) cream background par
   neela-sa lag raha tha. Yahan use halke NEUTRAL shadow se badla.
   Sirf .hx-cats .category-card (homepage + services page tiles).
   File ke SABSE NEECHE hai to purani value override kar deta hai.
   ===================================================== */
.hx-cats .category-card{
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
}
.hx-cats .category-card:hover{
    box-shadow: 0 18px 38px rgba(0,0,0,0.12);
}


/* =====================================================
   POPULAR SERVICES CARDS — added v29
   Homepage "Popular Services" section (server-rendered).
   ===================================================== */
.hx-popular .pop-svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.pop-svc-card{ display:flex; flex-direction:column; background:#fff; border:1px solid rgba(106,27,109,0.08); border-radius:18px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 6px 18px rgba(0,0,0,0.06); transition:transform .25s ease, box-shadow .25s ease; }
.pop-svc-card:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(0,0,0,0.12); }
.pop-svc-img{ position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,#6A1B6D,#4A0E4E); overflow:hidden; }
.pop-svc-img img{ width:100%; height:100%; object-fit:cover; }
.pop-svc-badge{ position:absolute; top:10px; left:10px; background:rgba(255,255,255,0.92); color:#6A1B6D; font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.pop-svc-body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:4px; flex:1; }
.pop-svc-cat{ font-size:11.5px; font-weight:600; color:#9C2B8F; letter-spacing:.3px; }
.pop-svc-name{ font-size:15px; font-weight:700; color:#2c1a2e; line-height:1.28; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; }
.pop-svc-foot{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.pop-svc-price{ font-size:16px; font-weight:800; color:#6A1B6D; }
.pop-svc-dur{ font-size:12px; color:#8a7a8c; }
.pop-svc-book{ margin-top:10px; font-size:12.5px; font-weight:700; color:#D4AF37; }
@media (max-width:900px){ .hx-popular .pop-svc-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (max-width:480px){ .pop-svc-name{ font-size:14px; } .pop-svc-body{ padding:12px 12px 14px; } }


/* =====================================================
   COMBO / PACKAGE CARDS — added v30
   Homepage "Combos & Packages" section.
   ===================================================== */
.hx-combos .pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pkg-card{ display:flex; flex-direction:column; background:#fff; border:1px solid rgba(106,27,109,0.10); border-radius:20px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,0.06); }
.pkg-img{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#6A1B6D,#4A0E4E); overflow:hidden; }
.pkg-img img{ width:100%; height:100%; object-fit:cover; }
.pkg-save-badge{ position:absolute; top:12px; left:12px; background:#16A34A; color:#fff; font-size:12px; font-weight:800; padding:5px 11px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.pkg-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pkg-name{ font-size:17px; font-weight:800; color:#2c1a2e; margin:0; }
.pkg-svcs{ font-size:12.5px; color:#8a7a8c; line-height:1.4; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pkg-price-row{ display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.pkg-price{ font-size:22px; font-weight:800; color:#6A1B6D; }
.pkg-orig{ font-size:14px; color:#b0a3b8; text-decoration:line-through; }
.pkg-add{ margin-top:8px; border:none; background:linear-gradient(135deg,#6A1B6D,#4A0E4E); color:#fff; font-weight:700; font-size:14px; padding:11px 0; border-radius:12px; cursor:pointer; transition:transform .15s ease; }
.pkg-add:active{ transform:scale(.98); }
@media(max-width:900px){ .hx-combos .pkg-grid{ grid-template-columns:1fr 1fr; gap:14px; } }
@media(max-width:560px){ .hx-combos .pkg-grid{ grid-template-columns:1fr; } .pkg-img{ aspect-ratio:16/7; } }


/* =====================================================
   BOOK PAGE OVERFLOW FIX (v31)
   Mobile par book.php Step 1 me screen daayein bhaag rahi thi.
   JAD: .booking-wrap ek grid hai. Grid ke item ki min-width:auto
   hoti hai, isliye andar ki sabse chaudi cheez (cross-sell strip
   = 6 x 150px card = ~1018px) poore .booking-form-card ko kheench
   kar screen se bahar le jaati thi (360px screen par card 1018px).
   ILAAJ: min-width:0 + max-width kavach. Purana kuch nahi badla.
   ===================================================== */
html{ overflow-x: hidden; }
.booking-wrap > *{ min-width: 0; }
.booking-form-card, .booking-summary-card{ min-width: 0; max-width: 100%; }
.form-step, .form-progress, #cartList, #addMoreSections, .form-nav{ min-width: 0; max-width: 100%; }
#xsStrip{ max-width: 100%; }
#xsStrip .xs-row{ max-width: 100%; }
.cart-item-card{ max-width: 100%; }
.cic-info{ min-width: 0; }
.cic-info h4{ overflow-wrap: anywhere; }


/* =====================================================
   OUR WORK GALLERY (v32)
   Homepage "Hamara Kaam" gallery - CTA banner se pehle.
   Desktop 4 column, tablet 3, mobile 2.
   ===================================================== */
.hx-work-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.hx-work-item{ margin:0; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.08); }
.hx-work-item img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .35s ease; }
.hx-work-item:hover img{ transform:scale(1.06); }
@media(max-width:900px){ .hx-work-grid{ grid-template-columns:repeat(3,1fr); gap:12px; } }
@media(max-width:680px){ .hx-work-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }


/* =====================================================
   ABOUT PAGE GALLERY (v33)
   About page ki "Hamari Services Ki Jhalak" gallery.
   Grid ke liye wahi .hx-work-grid / .hx-work-item (v32) use
   ho rahe hain, isliye yahan sirf heading ka CSS hai.
   ===================================================== */
.ab-gal-sec{ padding: 56px 0 64px; background: var(--color-bg); }
.ab-gal-head{ text-align:center; max-width:640px; margin:0 auto 30px; }
.ab-gal-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--color-accent); margin-bottom:8px; }
.ab-gal-title{ font-size:30px; color:var(--color-primary); margin-bottom:10px; }
.ab-gal-title em{ font-style:italic; color:var(--color-accent); }
.ab-gal-sub{ font-size:14.5px; color:#5a4a5c; }
@media(max-width:680px){ .ab-gal-sec{ padding:40px 0 46px; } .ab-gal-title{ font-size:24px; } }