/* ==========================================================================
   1. GLOBAL & PERFORMANCE STYLES (पूरे पेज और परफॉर्मेंस के लिए ग्लोबल स्टाइल्स)
   ========================================================================== */

/* [Smooth Scroll / पेज स्क्रॉल] पेज स्क्रॉलिंग को स्मूथ और मक्खन जैसा बनाने के लिए */
html {
    scroll-behavior: smooth;
}

/* [Overflow Hidden / हॉरिजॉन्टल स्क्रॉल रोकना] स्क्रीन से बाहर जा रहे एलिमेंट्स को छुपाने के लिए ताकि साइड स्क्रॉल न आए */
html, body {
    overflow-x: hidden;
}  

/* [Body Padding / टॉप स्पेस] ऊपर फिक्स्ड नेविगेशन बार (Navbar) के लिए 75px की जगह छोड़ना ताकि कंटेंट उसके पीछे न छुपे */
body {
    padding-top: 75px; 
}


/* ==========================================================================
   2. BOOTSTRAP OVERRIDES (बूटस्ट्रैप के डिफ़ॉल्ट डिज़ाइन्स को बदलने के लिए)
   ========================================================================== */

/* [Navbar Toggler Border / मोबाइल मेन्यू बटन का बॉर्डर] Hamburger Icon के चारों तरफ का डिफ़ॉल्ट बॉर्डर और परछाई हटाना */
.navbar-toggler {
    border: none !important; 
    box-shadow: none !important; 
}

/* [Navbar Toggler Focus / बटन क्लिक आउटलाइन] मोबाइल मेन्यू बटन पर क्लिक करते समय आने वाली नीली/काली आउटलाइन गायब करना */
.navbar-toggler:focus, .navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
}  

/* [Universal Card Base Lock / कन्हैया हाउसिंग कार्ड्स] सभी कार्ड्स (Cards) का बेस डिज़ाइन, परछाई (Shadow) और माउस ले जाने पर हाथ का निशान (Pointer) */
.card {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; 
    background-color: white;
    cursor: pointer;
}        
        
        
/* ==========================================================================
   3. PREMIUM POPUP FORM STYLES (पॉपअप इन्क्वायरी फॉर्म के स्टाइल्स)
   ========================================================================== */

/* [Popup Overlay Background / पॉपअप डार्क पर्दा] पॉपअप के पीछे आने वाला पूरा डार्क बैकग्राउंड और ब्लर (Blur) इफ़ेक्ट */
.kh-popup-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* [Popup Box Content / पॉपअप मुख्य बॉक्स] सफेद रंग का मुख्य पॉपअप कंटेनर और हैवी शैडो */
.kh-popup-content {
    background: #ffffff;
    width: 100%;
    max-width: 450px;
    padding: 30px;
    border-radius: 15px;
    position: relative;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.3);
    margin: 15px;
    border-top: 5px solid #CC9725;
}

/* [Popup Close Button / पॉपअप बंद करने का बटन] पॉपअप को क्लोज करने वाला 'X' बटन */
.kh-popup-close {
    position: absolute;
    top: 12px; right: 15px;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    border: none;
    background: none;
    transition: color 0.2s;
}

/* [Popup Close Hover / क्लोज बटन होवर] बंद करने वाले 'X' बटन पर माउस ले जाने पर उसका रंग लाल (Red) करना */
.kh-popup-close:hover { 
    color: #ff0000; 
}

/* [Popup Input Box / फॉर्म इनपुट फील्ड] पॉपअप के अंदर के इनपुट बॉक्स (Name, Phone, Email आदि) की साइज और बॉर्डर */
.kh-form-control {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    font-size: 16px; 
    box-sizing: border-box; 
}

/* [Popup Input Focus / इनपुट क्लिक ग्लो] इनपुट बॉक्स पर क्लिक (Focus) करने पर गोल्डन बॉर्डर और ग्लो इफेक्ट */
.kh-form-control:focus {
    border-color: #CC9725;
    outline: none;
    box-shadow: 0 0 5px rgba(204, 151, 37, 0.4); 
}

/* [Popup Submit Button / पॉपअप सबमिट बटन] फॉर्म का मुख्य सबमिट बटन (गोल्डन रंग का) */
.kh-submit-btn {
    background-color: #CC9725;
    color: white;
    border: none;
    width: 100%;
    padding: 12px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

/* [Popup Submit Hover / सबमिट बटन होवर] सबमिट बटन पर माउस ले जाने पर उसका रंग डार्क नेवी ब्लू करना */
.kh-submit-btn:hover { 
    background-color: #021B45; 
}


/* ==========================================================================
   4. NAVIGATION LINKS (मेन्यू और लिंक के स्टाइल्स)
   ========================================================================== */

/* [Desktop Navbar Links / डेस्कटॉप मुख्य मेन्यू लिंक्स] डेस्कटॉप नेविगेशन बार के लिंक्स का डिफ़ॉल्ट नेवी ब्लू रंग */
.nav-link {
    transition: color 0.2s ease;
    color: #021B45 !important; 
}

/* [Mobile Nav Item / मोबाइल मेन्यू आइटम] मोबाइल बॉटम या साइड मेन्यू के आइटम्स का हल्का ग्रे रंग ताकि एक्टिव वाला उभर कर दिखे */
.mobile-nav-item {
    color: #64748b; 
    transition: color 0.3s ease;
    text-decoration: none;
}

/* [Mobile Nav Active / मोबाइल मेन्यू एक्टिव स्टेट] मोबाइल मेन्यू आइटम पर होवर करने या उसके एक्टिव होने पर डार्क नेवी ब्लू और बोल्ड करना */
.mobile-nav-item:hover, 
.mobile-nav-item.active-gaj,
.mobile-nav-item.active-tab {
    color: #021B45 !important; 
    font-weight: bold;
}    


/* ==========================================================================
   5. FLOATING ACTION BUTTONS (साइड में तैरने वाले कॉल और व्हाट्सएप बटन्स)
   ========================================================================== */

/* [Floating Buttons Wrapper / तैरने वाले बटन्स का बॉक्स] स्क्रीन के दाईं तरफ फिक्स रहने वाले बटन्स का बाहरी ढांचा */
.rect-action-buttons-wrapper {
    position: fixed;
    bottom: 140px; 
    right: 0 !important; 
    z-index: 999999;
    display: flex !important;
    flex-direction: column !important; 
    align-items: flex-end !important; 
    gap: 8px; 
}

/* [Floating Buttons Base / साइड बटन्स बेस] कॉल और व्हाट्सएप बटन का कॉमन बेस स्टाइल (शुरुआत में सिर्फ आइकन दिखेगा - 44px) */
.rect-action-btn {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 6px 0 0 6px !important; 
    overflow: hidden !important;
    white-space: nowrap !important;
    box-sizing: border-box !important; 
    height: 44px !important;
    width: 44px; 
    transition: width 0.3s ease-in-out, background-color 0.3s, border-color 0.3s !important;
}

/* [Call Button Theme / कॉल बटन रंग] कॉल बटन का खास नेवी ब्लू रंग और गोल्डन बॉर्डर */
.btn-navy-call {
    background-color: #021B45 !important;
    color: #ffffff !important;
    border: 2px solid #CC9725 !important;
    border-right: none !important; 
    box-shadow: -3px 2px 10px rgba(2, 27, 69, 0.2);
}

/* [Call Icon Color / कॉल आइकॉन रंग] कॉल बटन के अंदर के फोन वाले आइकन का गोल्डन रंग */
.btn-navy-call .rect-btn-icon-box i {
    color: #CC9725 !important; 
}

/* [WhatsApp Button Theme / व्हाट्सएप बटन रंग] व्हाट्सएप बटन का खास हरा रंग (Official WhatsApp Green) */
.btn-green-wa {
    background-color: #25D366 !important;
    color: #ffffff !important;
    border: 2px solid #20ba5a !important;
    border-right: none !important;
    box-shadow: -3px 4px 10px rgba(37, 211, 102, 0.2);
}

/* [WhatsApp Icon Color / व्हाट्सएप आइकॉन रंग] व्हाट्सएप बटन के अंदर के आइकन का सफेद रंग */
.btn-green-wa .rect-btn-icon-box i {
    color: #ffffff !important;
}

/* [Button Icon Box / आइकॉन रखने वाला डिब्बा] बटन के अंदर का चौकोर ग्रिड डिब्बा जहां आइकॉन बैठता है */
.rect-btn-icon-box {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
}

/* [Icon Font Size / आइकॉन साइज] फ़ॉन्ट-ऑसम आइकॉन का साइज सेट करने के लिए */
.rect-btn-icon-box i {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* [Button Hover Width / होवर पर बटन की चौड़ाई] जब बटन पर माउस ले जाएं (Hover) या एक्टिव हो, तो चौड़ाई बढ़कर 140px हो जाएगी */
.rect-action-btn.active, .rect-action-btn:hover {
    width: 140px !important; 
}

/* [Call Icon Hover / कॉल आइकॉन होवर] होवर करने पर कॉल बटन का आइकन भी सफेद (White) हो जाए */
.rect-action-btn.active.btn-navy-call .rect-btn-icon-box i,
.rect-action-btn:hover.btn-navy-call .rect-btn-icon-box i {
    color: #ffffff !important; 
}

/* [Button Hidden Text / बटन का छुपा हुआ टेक्स्ट] बटन के अंदर लिखे टेक्स्ट का स्टाइल जो शुरू में छुपा रहता है */
.rect-action-btn .rect-btn-text {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-in-out, visibility 0.1s !important;
    margin-left: 6px !important;
    color: #ffffff !important;
}

/* [Button Text Show / बटन टेक्स्ट दिखाओ] होवर या एक्टिव होने पर टेक्स्ट को साफ़ और विज़िबल करना */
.rect-action-btn:hover .rect-btn-text,
.rect-action-btn.active .rect-btn-text {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- [SMOOTH OVERLAP PEEK-A-BOO ANIMATION / बटन्स का ऑटो एनीमेशन] --- */

/* [Call Button Animation / कॉल बटन एनीमेशन] कॉल बटन का एनीमेशन ट्रिगर (0.5 सेकंड के डिले के बाद शुरू होगा) */
#myCallBtn {
    animation: peekCall 1.5s ease-in-out 0.5s forwards;
    --animation-trigger: text;
}

/* [WhatsApp Button Animation / व्हाट्सएप बटन एनीमेशन] व्हाट्सएप बटन का एनीमेशन ट्रिगर (1.55 सेकंड के डिले के बाद शुरू होगा) */
#myWABtn {
    animation: peekWA 1.5s ease-in-out 1.55s forwards;
}

/* [Call Peek Keyframes / कॉल एनीमेशन स्टेप्स] कॉल बटन के बाहर निकलने और वापस अंदर जाने की टाइमिंग और चौड़ाई */
@keyframes peekCall {
    0% { width: 44px; }
    15% { width: 125px; } 
    70% { width: 125px; } 
    100% { width: 44px; } 
}

/* [WhatsApp Peek Keyframes / व्हाट्सएप एनीमेशन स्टेप्स] व्हाट्सएप बटन के बाहर निकलने और वापस अंदर जाने की टाइमिंग और चौड़ाई */
@keyframes peekWA {
    0% { width: 44px; }
    15% { width: 140px; } 
    70% { width: 140px; }
    100% { width: 44px; }
}

/* [Text Fade In-Out / टेक्स्ट का आना-जाना] एनीमेशन के दौरान अंदर लिखे टेक्स्ट का धुंधला से साफ़ और फिर वापस गायब होना */
#myCallBtn .rect-btn-text, #myWABtn .rect-btn-text {
    animation: fadeInText 1.5s ease-in-out forwards;
}
#myCallBtn .rect-btn-text { animation-delay: 0.5s; }
#myWABtn .rect-btn-text { animation-delay: 1.55s; }

/* [Text Fade Keyframes / टेक्स्ट एनीमेशन स्टेप्स] टेक्स्ट के दिखने और छुपने का ओपेसिटी एनीमेशन */
@keyframes fadeInText {
    0% { opacity: 0; visibility: hidden; }
    15% { opacity: 1; visibility: visible; }
    70% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}


/* ==========================================================================
   6. CHAT BTN (बाईं तरफ नीचे दिखने वाला गोल चैट/सपोर्ट बटन)
   ========================================================================== */

/* [Circular Chat Button / गोल चैट बटन] गोल चैट बटन की पोजीशन और लुक (नेवी充लू बैकग्राउंड, स्क्रीन के बाईं तरफ फिक्स) */
.chat-btn {
    position: fixed;
    width: 45px;
    height: 45px;
    bottom: 92px; 
    left: 20px;   
    background-color: #021B45; 
    color: white !important;
    border-radius: 50%;
    text-decoration: none;
    display: flex;         
    align-items: center;
    justify-content: center;
    font-size: 22px;
    z-index: 1001;
}


/* ==========================================================================
   7. UNIQUE CONTACT FORM SECTION (Kanhaiya Housing Contact - मुख्य संपर्क फ़ॉर्म सेक्शन)
   ========================================================================== */

/* [Contact Root Variables / कांटेक्ट कलर कोड्स] CSS वेरिएबल्स (Theme Colors) ताकि पूरे सेक्शन में रंग एक जैसे रहें */
:root {
    --khc-navy: #021B45;
    --khc-gold: #CC9725;
    --khc-text: #4a5568;
    --khc-light: #f7fafc;
}

/* [Contact Section Wrapper / कांटेक्ट बाहरी सेक्शन] कांटेक्ट सेक्शन का मुख्य बाहरी हिस्सा (हल्का बैकग्राउंड और पैडिंग) */
.khc-contact-section {
    padding: 60px 20px;
    background-color: var(--khc-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* [Contact Grid Layout / कांटेक्ट ग्रिड लेआउट] कांटेक्ट ब्लॉक का ग्रिड ढांचा (मोबाइल पर एक के नीचे एक दिखेगा) */
.khc-contact-container {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

/* [Contact Desktop Columns / कांटेक्ट डेस्कटॉप लेआउट] लैपटॉप/डेस्कटॉप स्क्रीन पर जानकारी और फॉर्म अगल-बगल (2 Columns) में दिखेंगे */
@media (min-width: 992px) {
    .khc-contact-container {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 60px;
        align-items: center;
    }
}

/* [Contact Subtitle / छोटा गोल्डन टाइटल] मुख्य हेडिंग के ऊपर आने वाला छोटा गोल्डन सब-टाइटल (जैसे: "CONTACT US") */
.khc-sub-title {
    color: var(--khc-gold);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 8px;
}

/* [Contact Main Heading / कांटेक्ट मुख्य हेडिंग] कांटेक्ट इन्फो की मुख्य बड़ी हेडिंग (H2) */
.khc-contact-info-block h2 {
    color: var(--khc-navy);
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 15px 0;
}

/* [Contact Lead Text / हेडिंग के नीचे का टेक्स्ट] हेडिंग के नीचे का परिचयात्मक छोटा पैराग्राफ टेक्स्ट */
.khc-lead-text {
    color: var(--khc-text);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* [Contact List Stack / कांटेक्ट लिस्ट स्टैक] फोन, ईमेल, एड्रेस की लिस्ट का वर्टिकल अलाइनमेंट */
.khc-info-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* [Contact Info Row / कांटेक्ट इन्फो लाइन] हर एक इन्फो आइटम (आिकन + टेक्स्ट) को लाइन में बिठाने का ढांचा */
.khc-info-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* [Contact Icon Shape / कांटेक्ट आइकॉन डिब्बा] इन्फो आइकॉन का सुंदर चौकोर डिब्बा (सफेद बैकग्राउंड और गोल्डन बॉर्डर) */
.khc-info-icon {
    width: 45px;
    height: 45px;
    background: #ffffff;
    border: 1px solid rgba(204, 151, 37, 0.3);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--khc-gold);
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* [Contact Field Label / कांटेक्ट फील्ड छोटा नाम] आइकॉन के बगल में लिखे छोटे लेबल (जैसे: "EMAIL US", "CALL US") */
.khc-info-text span {
    display: block;
    font-size: 13px;
    color: #718096;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* [Contact Real Link / कांटेक्ट असली लिंक] असली संपर्क जानकारी (जैसे ईमेल आईडी या फोन नंबर का लिंक) */
.khc-info-text a, .khc-info-text p {
    color: var(--khc-navy);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    margin: 0;
    line-height: 1.5;
}

/* [Contact Link Hover / कांटेक्ट लिंक होवर] कांटेक्ट लिंक्स पर माउस ले जाने पर वो गोल्डन हो जाएं */
.khc-info-text a:hover {
    color: var(--khc-gold);
}

/* [Contact Form Block / कांटेक्ट फॉर्म बॉक्स] मुख्य संपर्क फ़ॉर्म का सफेद रंग का प्रीमियम बॉक्स और शैडो */
.khc-contact-form-block {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(2, 27, 69, 0.05);
    border-top: 5px solid var(--khc-gold);
}

/* [Contact Form Heading / फॉर्म हेडिंग] फॉर्म के अंदर की मुख्य हेडिंग (H3) */
.khc-contact-form-block h3 {
    color: var(--khc-navy);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

/* [Contact Form Description / फॉर्म विवरण] फॉर्म की हेडिंग के नीचे का छोटा सा डिस्क्रिप्शन टेक्स्ट */
.khc-contact-form-block p {
    color: var(--khc-text);
    font-size: 14px;
    margin: 0 0 25px 0;
}

/* [Form Input Spacing / इनपुट फील्ड्स दूरी] इनपुट फील्ड्स के बीच की नीचे की दूरी (Margin-Bottom) */
.khc-input-group {
    margin-bottom: 18px;
}

/* [Form Input Label / इनपुट लेबल नाम] इनपुट फील्ड के ऊपर लिखे लेबल्स (जैसे: "Your Name") का स्टाइल */
.khc-input-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--khc-navy);
    margin-bottom: 6px;
}

/* [Form Fields Styles / फॉर्म इनपुट स्टाइल] फॉर्म के सभी इनपुट, ड्रापडाउन (Select) और मैसेज बॉक्स (Textarea) का कॉमन स्टाइल */
.khc-input-group input, 
.khc-input-group select, 
.khc-input-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    color: var(--khc-navy);
    box-sizing: border-box;
    background-color: #fafbfc;
    transition: all 0.2s;
}

/* [Form Fields Focus / इनपुट क्लिक इफ़ेक्ट] इनपुट फील्ड्स पर क्लिक करने पर सफेद बैकग्राउंड और गोल्डन ग्लो इफ़ेक्ट आना */
.khc-input-group input:focus, 
.khc-input-group select:focus, 
.khc-input-group textarea:focus {
    outline: none;
    border-color: var(--khc-gold);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(204, 151, 37, 0.15);
}

/* [Contact Section Button / कांटेक्ट सेक्शन बटन] फॉर्म का मुख्य सबमिट बटन का पूरा लुक */
.khc-form-btn {
    width: 100%;
    padding: 14px;
    background-color: var(--khc-gold);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s;
}

/* [Contact Button Hover / कांटेक्ट बटन होवर] बटन पर माउस ले जाने पर थीम के अनुसार नेवी ब्लू हो जाना */
.khc-form-btn:hover {
    background-color: var(--khc-navy);
}


/* ==========================================================================
   8. CARDS AND DETAILS TABLE (प्रॉपर्टी कार्ड्स और स्पेसिफिकेशन टेबल)
   ========================================================================== */

/* [Property Card Box / प्रॉपर्टी कार्ड डिब्बा] प्रॉपर्टी डिटेल्स का मुख्य कार्ड बॉक्स और हल्की शैडो */
.mb-card { background: #ffffff; border: 1px solid #eef1f6; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.01); }

/* [Property Image Style / प्रॉपर्टी फोटो] प्रॉपर्टी की मुख्य इमेज को रिस्पॉन्सिव और सुंदर राउंड कोनों वाला बनाने के लिए */
.property-img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* [Big Price Tag / बड़ा प्राइस टैग] कार्ड या पेज पर दिखने वाला बड़ा प्राइस टैग (जैसे: ₹50 Lakh) */
.price-tag { font-size: 28px; font-weight: 700; color: #021B45; }

/* [EMI Text Details / ईएमआई जानकारी] ईएमआई (EMI) की गणना दिखाने वाला छोटा साइड टेक्स्ट */
.emi-text { font-size: 14px; color: #4a5568; font-weight: 500; }

/* [Property Spec Box / प्रॉपर्टी फीचर बॉक्स] प्रॉपर्टी के फीचर्स दिखाने वाला छोटा ग्रे बॉक्स (जैसे: 3 BHK, 2 Baths) */
.spec-box { text-align: center; padding: 15px 10px; background: #f8fafc; border: 1px solid #edf2f7; border-radius: 8px; }

/* [Spec Box Icon / फीचर बॉक्स आइकॉन] स्पेसिफिकेशन बॉक्स के अंदर के छोटे आइकन्स का गोल्डन रंग */
.spec-box i { font-size: 20px; color: #CC9725; margin-bottom: 5px; display: block; }

/* [Spec Title Name / फीचर का नाम] स्पेसिफिकेशन का छोटा नाम (जैसे: AREA, TYPE) */
.spec-title { font-size: 11px; color: #718096; text-transform: uppercase; display: block; margin-bottom: 2px; }

/* [Spec Value / फीचर की वैल्यू] स्पेसिफिकेशन की असली वैल्यू (जैसे: 1200 Sq.Ft) */
.spec-value { font-size: 13px; color: #1a202c; font-weight: 600; }

/* [Sticky Box Sidebar / चिपका हुआ साइडबार] स्क्रॉल करते समय साइडबार इन्क्वायरी बॉक्स को स्क्रीन पर एक जगह चिपकाए रखना */
.sticky-box { position: sticky; top: 95px; z-index: 100; }

/* [Detail Table Row / डिटेल्स टेबल लाइन] प्रॉपर्टी डिटेल्स टेबल की एक रो जो आमने-सामने डेटा दिखाती है */
.detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #e2e8f0; font-size: 14px; }
.detail-row:last-child { border-bottom: none; }

/* [Detail Table Label /  डिटेल्स टेबल नाम] डिटेल्स टेबल का बायां हिस्सा (लेबल) */
.detail-label { color: #718096; }

/* [Detail Table Value / डिटेल्स टेबल वैल्यू] डिटेल्स टेबल का दायां हिस्सा (वैल्यू) */
.detail-val { color: #1a202c; font-weight: 600; text-align: right; }

/* [Text Truncate 2 Lines / टेक्स्ट लिमिट 2 लाइन] बहुत लंबे टाइटल को सिर्फ 2 लाइनों में सीमित करके आगे '...' लगाना */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* [Text Truncate 3 Lines / टेक्स्ट लिमिट 3 लाइन] बहुत लंबे डिस्क्रिप्शन या पैराग्राफ को सिर्फ 3 लाइनों में सीमित करना */
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* [Mobile Blog Card Responsive / मोबाइल ब्लॉग कार्ड रेस्पॉन्सिव] मोबाइल स्क्रीन पर ब्लॉग इमेजेस और हेडिंग्स का साइज छोटा करना */
@media (max-width: 576px) {
    .dynamic-blog-card img {
        height: 100px !important;
    }
    .dynamic-blog-card h6 {
        font-size: 12px !important;
    }
}

/* [Logout Row Hover Effect / लॉगआउट लाइन होवर] डैशबोर्ड में लॉगआउट बटन वाली लाइन पर माउस ले जाने पर हल्का लाल रंग और उठने का इफ़ेक्ट */
.custom-logout-row:hover {
  background-color: #fff5f5 !important;
  transform: translateY(-1px);
}

/* [Switch Customization / बूटस्ट्रैप टॉगल स्विच] टॉगल स्विच ऑन होने पर बूटस्ट्रैप के डिफ़ॉल्ट नीले रंग को वेबसाइट के नेवी ब्लू से बदलना */
.form-check-input:checked {
  background-color: #021B45 !important;
  border-color: #021B45 !important;
}


/* ==========================================================================
   9. PREMIUM WISHLIST BUTTONS (शॉर्टलिस्ट/विशलिस्ट बटन की प्रीमियम स्टाइलिंग)
   ========================================================================== */

/* [Wishlist Premium Button / विशलिस्ट मुख्य बटन] विशलिस्ट बटन का मुख्य ढांचा (आिकन और काउंटर को एक लाइन में रखने के लिए) */
.wishlist-premium-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* [Wishlist Icon Wrapper / विशलिस्ट आइकॉन बॉक्स] दिल (Heart) वाले आइकॉन का सफेद बैकग्राउंड वाला सुंदर डिब्बा */
.wishlist-icon-wrapper {
    position: relative;
    width: 44px;
    height: 32px;
    margin-right: 12px;
    background-color: #ffffff; 
    color: #CC9725; 
    border-radius: 10px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

/* [Wishlist Heart Hover / विशलिस्ट दिल होवर] माउस ले जाने पर (उंगली ले जाने पर) दिल का रंग गोल्डन से बदलकर लाल (Red) हो जाना */
.wishlist-premium-btn:hover .wishlist-icon-wrapper {
    color: #dc2626; 
}

/* [Wishlist Badge Counter / विशलिस्ट रेड काउंटर] काउंटर बैच की प्रीमियम स्टाइलिंग - दिल के ऊपर दिखने वाला छोटा लाल गोला (नंबर बैच) */
.wishlist-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); 
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}











/* ==========================================================================
   1. GLOBAL & GLOBAL RESET (पेज और परफॉर्मेंस सेटिंग्स)HTML PAGE KA CSS
   ========================================================================== */

body {
    background-color: #ffffff;
    font-family: 'Outfit', sans-serif;
    padding-top: 75px; /* ऊपर फिक्स्ड नेविगेशन बार के लिए स्पेस */
    color: #333333;
}


/* ==========================================================================
   2. APP PILLS & NAVIGATION BAR (ऐप बटन, पिल्स और नेविगेशन बार)
   ========================================================================== */

/* [Budget App Pill / बजट ऐप बटन] */
.budget-app-pill {
    transition: all 0.2s ease;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff;
    color: #334155;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 30px;
}

/* [Budget App Pill Active / बजट बटन एक्टिव स्टेट] */
.budget-app-pill:active, .budget-app-pill.active {
    background: #021B45 !important;
    color: #ffffff !important;
    border-color: #021B45 !important;
}

/* [App List Row Active / लिस्ट रो एक्टिव] */
.app-list-row:active {
    background-color: #e2e8f0 !important;
    transform: scale(0.98);
}

/* [Nav Pills Link / नेविगेशन पिल्स लिंक] */
.nav-pills .nav-link {
    color: #475569;
    font-weight: 600;
    border-radius: 8px;
    background: transparent;
    transition: all 0.2s;
}

/* [Nav Pills Active / नेविगेशन पिल्स एक्टिव स्टेट] */
.nav-pills .nav-link.active {
    background-color: #021B45 !important;
    color: #ffffff !important;
}

/* [Navbar Toggler / मोबाइल मेन्यू बटन] बटन के चारों तरफ का बॉर्डर, आउटलाइन और शैडो हटाना */
.navbar-toggler, .navbar-toggler:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   3. HERO & SEARCH STYLES (हीरो सेक्शन और सर्च बार)
   ========================================================================== */

/* [Hero Section / मुख्य हीरो बैनर] */
.app-hero {
    background: linear-gradient(135deg, #0F2942 0%, #1A446C 100%);
    padding: 24px 16px 45px 16px;
    border-radius: 0 0 24px 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(15, 41, 66, 0.08);
}

/* [App Search Form / सर्च बार बॉक्स] */
.app-search-form {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* [Search Input Field / सर्च इनपुट फील्ड] */
.app-search-form input {
    background: transparent;
    border: none;
    color: #222222;
    font-size: 15px;
    width: 100%;
}
.app-search-form input:focus { 
    outline: none; 
}

/* [Search Icon Animation / सर्च आइकॉन एनीमेशन] टोटल 7 सेकंड का रोटेशन साइकिल */
.search-icon-animate {
    display: inline-block;
    cursor: pointer;
    animation: slowMotionFlip 7s ease-in-out infinite;
    transform-origin: center;
}

@keyframes slowMotionFlip {
    /* 0% से 85% तक आइकॉन रुका रहेगा (लगभग 6 सेकंड का पॉज) */
    0%, 85% { 
        transform: scale(1) rotateY(0deg); 
        color: #6c757d;
    }
    /* 85% से 92% तक: स्लो मोशन स्टार्ट */
    92% { 
        transform: scale(1.6) rotateY(90deg); 
        color: #d4a017;
    }
    /* 92% से 100% तक: फ़ास्ट स्पीड में वापस अपनी जगह फिक्स */
    100% { 
        transform: scale(1) rotateY(360deg); 
        color: #6c757d;
    }
}


/* ==========================================================================
   4. CHIPS, BUBBLES & BANNERS (कैटेगरी बबल्स और प्रमोट मोशनल बैनर)
   ========================================================================== */

/* [App Chip Button / सामान्य चिप बटन बेस] */
.app-chip-btn {
    border-radius: 12px;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    width: 100%;
}
.chip-primary { background: #CC9725; color: white !important; }
.chip-secondary { background: rgba(255,255,255,0.12); color: white !important; border: 1px solid rgba(255,255,255,0.2); }

/* [Type Bubble Card / प्रीमियम कैटेगरी बबल्स] */
.type-bubble-card {
    background: white;
    border-radius: 16px;
    padding: 12px 6px;
    box-shadow: 3px 7px 10px rgba(0, 0, 0, 0.03);
    border: 1px solid #eaeef3;
    transition: all 0.25s ease;
    text-decoration: none;
    display: block;
    cursor: pointer;
}
.type-bubble-card:active {
    transform: scale(0.92);
}
.type-bubble-card.active {
    background: linear-gradient(135deg, #CC9725 0%, #0F2942 100%);
    border-color: #CC9725;
    box-shadow: 0 4px 15px rgba(15, 41, 66, 0.25);
}

/* [Type Icon Wrapper / बबल आइकॉन बॉक्स] */
.type-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-size: 18px;
    transition: all 0.25s ease;
}
.type-bubble-card.active .type-icon-wrapper {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}
.type-bubble-card.active span {
    color: #ffffff !important;
}

/* [Promo Banner / प्रोमो बैनर] */
.promo-banner-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-bottom: 24px;
}
.promo-banner-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}


/* ==========================================================================
   5. HORIZONTAL SNAP SCROLL & PROPERTY CARDS (स्वाइप ग्रिड और प्रॉपर्टी कार्ड)
   ========================================================================== */

/* [Horizontal Container / हॉरिजॉन्टल स्क्रॉल बॉक्स] */
.horizontal-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 4px 4px 16px 4px;
    scrollbar-width: none;
}
.horizontal-scroll-container::-webkit-scrollbar {
    display: none;
}
.horizontal-scroll-item {
    flex: 0 0 75%;
    scroll-snap-align: start;
}
@media (min-width: 768px) {
    .horizontal-scroll-item {
        flex: 0 0 35%;
    }
}

/* [Property Grid Card / प्रॉपर्टी ग्रिड कार्ड] */
.property-grid-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eaeef3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: transform 0.2s ease;
}

/* [Verified Badge / वेरीफाइड टैग] */
.verified-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    background: #0F2942;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
}


/* ==========================================================================
   6. UI COMPONENTS & BOOTSTRAP ADAPTATIONS (एक्सेसरीज और अतिरिक्त बूटस्ट्रैप स्टाइल्स)
   ========================================================================== */

/* [SEO Section / एसईओ ब्लॉक] */
.seo-section {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #eaeef3;
}
.seo-keyword-badge {
    background: #f0f4f8;
    color: #0F2942;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 6px;
}

/* [Feature App Card / फीचर्स ऐप कार्ड] */
.feature-app-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #eaeef3;
    padding: 16px;
    height: 100%;
}

/* [Accordion Button / एकॉर्डियन बटन] */
.accordion-button:not(.collapsed) {
    background-color: #f0f4f8;
    color: #0F2942;
}

/* [Area Pill / एरिया लोकेशन पिल्स] */
.area-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #475569;
    display: inline-block;
    margin: 3px;
    font-weight: 500;
}


/* ==========================================================================
   7. INTERACTIVE BUTTONS & FLOATING ELEMENTS (एनीमेटेड बटन्स और तैरने वाले एलिमेंट्स)
   ========================================================================== */

/* [Shiny Button / चमकने वाला बटन] डिफ़ॉल्ट रूप से छिपा हुआ */
.shiny-btn {
    display: none; 
    padding: 6px 15px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    background: linear-gradient(45deg, #0F2942, #1c4a75);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(15, 41, 66, 0.3);
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

/* [Shine Animation Effect / चमकने वाला इफ़ेक्ट] */
.shiny-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.shiny-btn:active {
    transform: scale(0.95);
}

/* [Floating Care Button / बाउंसिंग सपोर्ट बटन] स्क्रीन के दाईं तरफ नीचे फिक्स रहने वाला */
.floating-care-btn {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 48px; 
    height: 48px;
    background-color: #0F2942; 
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: all 0.3s ease;
    text-decoration: none;
    animation: bounce 2s infinite; /* Bouncing Animation */
}

/* [Bouncing Animation Keyframes / बाउंसिंग इफेक्ट स्टेप्स] */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* [Floating Care Button Hover / सपोर्ट बटन होवर] होवर करने पर एनीमेशन रुक जाएगा और रंग गोल्डन होगा */
.floating-care-btn:hover {
    transform: scale(1.1) rotate(5deg);
    background-color: #CC9725; 
    box-shadow: 0 6px 20px rgba(204, 151, 37, 0.4);
    animation: none; 
}





/* Share Requerment Form  */

    .input-group-form { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 12px; transition: all 0.2s ease; }
    .input-group-form:focus-within { border-color: #0f172a !important; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1) !important; background: #ffffff; }
    .form-input-field { border: none !important; background: transparent !important; box-shadow: none !important; font-size: 13.5px; height: 42px; color: #1e293b !important; padding-left: 4px !important; font-weight: 500; }
    .form-input-field::placeholder { color: #94a3b8; font-weight: 400; }
    .active-submit-effect:active { transform: scale(0.98); opacity: 0.95; }















   
        /* --- HIGH-PREMIUM VERTICAL LOADER OVERLAY --- */
        #khLoaderOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(2, 27, 69, 0.98); /* Brand Deep Blue Theme */
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .loader-center-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .loader-container {
            position: relative;
            width: 320px;
            height: 360px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader-scene-group {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        .loader-scene-group.success-vanish {
            animation: sceneZoomFadeOut 0.8s forwards ease-in-out;
        }

        .kh-premium-app {
            width: 115px;
            height: 190px;
            background: #ffffff;
            border: 4px solid #CC9725;
            border-radius: 22px;
            box-shadow: 0 25px 60px rgba(204, 151, 37, 0.25);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            z-index: 5;
        }

        .loader-scene-group.success-vanish .kh-premium-app {
            animation: appReactionClick 0.5s forwards ease-in-out;
        }

        .app-header-ui {
            width: 100%;
            height: 18px;
            background: #021B45;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .app-header-ui::before {
            content: '';
            width: 35px;
            height: 4px;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
        }

        .app-body-ui {
            flex: 1;
            padding: 8px;
            background: #f8fafc;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; 
            position: relative;
        }

        .app-logo-brand {
            width: 65px;
            height: 65px;
            object-fit: cover;
            z-index: 6;
        }

        .app-mock-bg-line {
            width: 80%;
            height: 5px;
            background: #e2e8f0;
            border-radius: 4px;
            margin-top: 10px;
        }
        .app-mock-bg-line.short { width: 50%; }

        .moving-house-element {
            position: absolute;
            font-size: 34px;
            color: #CC9725;
            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
            left: 50%;
            top: 50%;
            margin-left: -17px;
            margin-top: -17px;
            pointer-events: none;
            z-index: 2;
            animation: absoluteVerticalLoop 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }

        .loader-scene-group.success-vanish .moving-house-element {
            animation: absoluteVerticalSuccessDive 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .app-body-ui::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: radial-gradient(circle, rgba(204,151,37,0.6) 0%, transparent 75%);
            opacity: 0;
            z-index: 7;
        }
        .loader-scene-group.success-vanish .app-body-ui::after {
            animation: screenShockwave 0.6s forwards ease-out;
        }

        #khSuccessMsg {
            position: absolute;
            color: #ffffff;
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            font-family: 'Outfit', sans-serif;
            opacity: 0;
            transform: scale(0.7);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 99;
            pointer-events: none;
            text-shadow: 0 4px 15px rgba(204, 151, 37, 0.3);
        }
        #khSuccessMsg i {
            color: #CC9725;
            display: block;
            font-size: 40px;
            margin-bottom: 8px;
        }
        #khSuccessMsg.show-text {
            opacity: 1;
            transform: scale(1);
        }

        @keyframes absoluteVerticalLoop {
            0% { transform: translateY(0) scale(0.5); opacity: 0; z-index: 2; }
            15% { opacity: 1; }
            50% { transform: translateY(-160px) scale(1.5); opacity: 1; z-index: 2; }
            52% { z-index: 10; }
            55% { transform: translateY(-160px) scale(1.5); opacity: 1; z-index: 10; }
            85% { transform: translateY(-10px) scale(0.8) rotate(180deg); opacity: 0.9; z-index: 10; }
            95%, 100% { transform: translateY(0) scale(0); opacity: 0; z-index: 10; }
        }

        @keyframes absoluteVerticalSuccessDive {
            0% { transform: translateY(-160px) scale(1.5); z-index: 10; opacity: 1; }
            100% { transform: translateY(10px) scale(0) rotate(360deg); z-index: 10; opacity: 0; }
        }

        @keyframes screenShockwave {
            0% { opacity: 0; transform: scale(0.2); }
            30% { opacity: 1; transform: scale(1.1); }
            100% { opacity: 0; transform: scale(1.7); }
        }

        @keyframes appReactionClick {
            0% { transform: scale(1); }
            30% { transform: scale(1.06) translateY(2px); }
            100% { transform: scale(0.9) translateY(0); }
        }

        @keyframes sceneZoomFadeOut {
            0% { transform: scale(1); opacity: 1; filter: blur(0); }
            100% { transform: scale(0.75); opacity: 0; filter: blur(4px); }
        }
        
        /* Badge Styles */
        .badge {
            padding: 5px 10px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 12px;
            text-transform: uppercase;
        }
        .badge-Plot { background: #d4af37; color: #fff; }
        .badge-Flat { background: #28a745; color: #fff; }
        .badge-House { background: #007bff; color: #fff; }
        .badge-Commercial { background: #6c757d; color: #fff; }