/* पूरे पेज पर टेक्स्ट सिलेक्शन बंद */
body {
    -webkit-user-select: none;  /* Chrome, Safari, Opera */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE/Edge */
    user-select: none;          /* Standard */
}

/* इमेज को ड्रैग या सेव करने से रोकना */
img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none; /* इमेज पर क्लिक भी नहीं होगा */
}



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');


/* =========================================
   1. GLOBAL STYLES (बेसिक सेटिंग्स)
   ========================================= */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f9fbfd;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* सेक्शन टाइटल्स (Overview/Headings) */
.overview p {
    color: #009688;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.overview h1, .overview h3 {
    font-weight: 700;
    color: #333;
    font-size: 32px;
}

.overview span {
    color: #009688; /* ब्रांड कलर */
}

/* --- TOP BAR SOCIAL ICONS --- */
.ezee-top-strip {
    background: #004d40; /* गहरा हरा बैकग्राउंड */
    color: white;
    padding: 6px 0;      /* पतली पट्टी */
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.top-social {
    display: flex;
    align-items: center;
}

.top-social a {
    color: white;
    margin-left: 15px;   /* आइकन्स के बीच गैप */
    font-size: 14px;
    transition: all 0.3s ease;
}

/* होवर करने पर (Mouse Over) */
.top-social a:hover {
    color: #ffeb3b;      /* पीला रंग */
    transform: scale(1.2); /* थोड़ा बड़ा होगा */
}

/* =========================================
   3. MAIN NAVBAR & MEGA MENU
   ========================================= */
/* --- Sticky Menu Bar (Correct Way) --- */
.ezee-navbar {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 05px 0;
    
    /* Sticky Magic */
    position: -webkit-sticky; /* Safari के लिए */
    position: sticky;         /* यह सबसे जरुरी है */
    top: 0;                   /* टॉप पर चिपकने के लिए */
    z-index: 1020;            /* बाकी चीजों के ऊपर रखने के लिए */
    width: 100%;
}

.ezee-navbar .nav-link {
    color: #444 !important;
    font-weight: 640;
    font-size: 14.9px;
    padding: 20px 24px !important;
    text-transform: uppercase;
    transition: 0.3s;
}

/* लाइन वाला कोड हटा दिया गया है */

/* होवर करने पर सिर्फ रंग बदलेगा */
.ezee-navbar .nav-link:hover,
.ezee-navbar .nav-link.active {
    color: #009688 !important;
}

/* --- MEGA MENU STYLE (Full Width Dropdown) --- */
@media all and (min-width: 992px) {
    .navbar .has-megamenu {
        position: static !important;
    }

    .navbar .megamenu {
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
        border: none;
        border-top: 3px solid #009688;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        padding: 30px 0;
        background-color: #ffffff;
        border-radius: 0 0 5px 5px;
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }

    .navbar .has-megamenu:hover .megamenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* मेगा मेनू टाइटल्स */
.mega-title {
    font-size: 14px;
    font-weight: 700;
    color: #009688;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-left: 3px solid #009688;
    padding-left: 10px;
    background: #f0fdfc;
    padding: 8px 10px;
    border-radius: 0 5px 5px 0;
}

.megamenu ul li a {
    display: block;
    color: #555;
    font-size: 14px;
    padding: 6px 0;
    font-weight: 500;
    transition: 0.3s;
}

.megamenu ul li a:hover {
    color: #009688;
    padding-left: 5px;
}

.dropdown-divider {
    border-top: 1px solid #eee;
}

/* --- LOGIN BUTTON (Pulse Animation Fixed) --- */
.btn-login-pulse {
    background: linear-gradient(45deg, #009688, #43a047); /* हरा ग्रेडिएंट */
    color: white !important;
    padding: 10px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    
    /* एनीमेशन यहाँ है */
    animation: pulse-green 2s infinite;
}

/* होवर करने पर एनीमेशन रुके और बटन थोड़ा ऊपर उठे */
.btn-login-pulse:hover {
    background: linear-gradient(45deg, #43a047, #009688);
    transform: translateY(-2px); 
    animation: none; 
    box-shadow: 0 5px 15px rgba(0, 150, 136, 0.4);
}

/* --- एनीमेशन (सिर्फ शैडो हिलेगी, टेक्स्ट नहीं) --- */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 150, 136, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 150, 136, 0); /* शैडो फैल रही है */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 150, 136, 0);
    }
}
/* =========================================
   4. SERVICES TAB SECTION (Vertical Tabs)
   ========================================= */
.ps-wrapper {
    background: #fff;
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
}

.ps-content-box {
    display: flex;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    min-height: 400px;
}

/* लेफ्ट साइड मेनू */
.ps-sidebar {
    width: 280px;
    background: #fdfdfd;
    border-right: 1px solid #eee;
    flex-shrink: 0;
}

.ps-sidebar li {
    padding: 18px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f1f1f1;
    color: #555;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.ps-sidebar li span {
    display: flex; align-items: center; gap: 10px;
}

.ps-sidebar li:hover {
    background-color: #e0f2f1;
    color: #009688;
}

.ps-sidebar li.active {
    background-color: #009688;
    color: white;
    border-left: 5px solid #004d40;
}

/* राइट साइड कंटेंट */
.ps-tab-panel {
    flex: 1;
    padding: 40px;
    display: none;
    animation: fadeIn 0.5s;
}
.ps-tab-panel.active { display: block; }

.ps-details {
    display: flex; align-items: flex-start; gap: 30px;
}

.ps-details img {
    width: 350px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.ps-info h3 { color: #009688; margin-top: 0; }
.ps-ticks li i { color: #009688; margin-right: 10px; }

.ps-btn {
    display: inline-block;
    color: #009688;
    border: 1px solid #009688;
    padding: 8px 25px;
    border-radius: 50px;
    margin-top: 15px;
    transition: 0.3s;
}
.ps-btn:hover { background: #009688; color: white; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


/* =========================================
   6. COUNTERS & FORM
   ========================================= */
.counter-container {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.counter {
    font-size: 32px;
    font-weight: bold;
    color: #009688;
    margin: 10px 0;
}

/* =========================================
   7. FOOTER SECTION
   ========================================= */
footer {
    background-color: #f8f9fa;
    padding-top: 50px;
    border-top: 5px solid #009688;
}

footer .logo img { margin-bottom: 15px; }
footer h5 { font-weight: 700; margin-bottom: 20px; color: #333; }

footer ul li { margin-bottom: 10px; }
footer ul li a { color: #555; transition: 0.3s; }
footer ul li a:hover { color: #009688; padding-left: 5px; }

footer .follow_us a {
    display: inline-block;
    width: 35px; height: 35px;
    line-height: 35px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: 0.3s;
}
footer .follow_us a:hover {
    background: #009688;
}
footer .follow_us a:hover i { color: white !important; }

/* =========================================
   8. MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 991px) {
    .navbar .megamenu {
        margin-top: 0;
        box-shadow: none;
        padding-left: 15px;
        border-top: none;
    }
    
    .ps-content-box { flex-direction: column; }
    .ps-sidebar { width: 100%; display: flex; overflow-x: auto; }
    .ps-sidebar li { white-space: nowrap; border-right: 1px solid #eee; }
    .ps-details { flex-direction: column; }
    .ps-details img { width: 100%; }
    
    .top-links { display: none; } /* Hide extra links on mobile */
}


/* --- Fix Double Arrow Issue --- */
/* यह कोड बूटस्ट्रैप के डिफॉल्ट छोटे एरो को छुपा देगा */
.navbar .dropdown-toggle::after {
    display: none !important;
}



/* --- Auto Open on Hover (Except Login Button) --- */
@media all and (min-width: 992px) {
    /* ':not(.manual-dropdown)' का मतलब है Login वाले को छोड़ दो */
    .navbar .nav-item.dropdown:not(.manual-dropdown):hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        margin-top: 0;
    }
}

/* --- Menu Underline Animation (Center Out) --- */

/* 1. मेनू लिंक की बेसिक सेटिंग */
.navbar .nav-link {
    position: relative; /* यह जरुरी है ताकि लाइन इसके अंदर रहे */
    padding-bottom: 5px; /* टेक्स्ट और लाइन के बीच गैप */
}

/* 2. लाइन (Underline) बनाना */
.navbar .nav-link::after {
    content: '';
    position: absolute;
    width: 0;           /* शुरुआत में चौड़ाई 0 (छुपा हुआ) */
    height: 3px;        /* लाइन की मोटाई */
    bottom: 0;          /* बिल्कुल नीचे */
    left: 50%;          /* सेंटर से शुरू होगा */
    background-color: #009688; /* आपका थीम कलर (हरा) */
    transition: all 0.3s ease-in-out; /* एनीमेशन की स्पीड */
    transform: translateX(-50%); /* सेंटर एलाइनमेंट फिक्स */
}

/* 3. होवर (Hover) और एक्टिव (Active) होने पर क्या होगा */
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
    width: 100%; /* लाइन पूरी खुल जाएगी */
}

/* 4. होवर पर टेक्स्ट का रंग */
.navbar .nav-link:hover {
    color: #009688 !important;
}


/* --- Login Dropdown Fix --- */
.btn-login-pulse.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px; /* आइकन और टेक्स्ट के बीच गैप */
}

/* अगर आप बूटस्ट्रैप का छोटा तीर (Caret) नहीं चाहते तो इसे अन-कमेंट करें: */
/* .btn-login-pulse.dropdown-toggle::after { display: none; } */

/* ड्रॉपडाउन के अंदर की स्टाइलिंग */
.btn-login-pulse + .dropdown-menu {
    border-top: 3px solid #009688;
    margin-top: 10px !important; /* बटन से थोड़ा नीचे खुलेगा */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}




/* --- Center Alignment for Small Dropdowns --- */
@media all and (min-width: 992px) {
    /* ':not(.megamenu)' का मतलब है कि बड़े वाले मेनू को मत छेड़ो, सिर्फ छोटे वालों को सेंटर करो */
    .navbar .dropdown-menu:not(.megamenu) {
        left: 50% !important;           /* लेफ्ट से 50% खिसकाओ */
        right: auto !important;         /* राइट साइड फिक्स हटाओ */
        transform: translateX(-50%) !important; /* अब इसे वापस आधा पीछे खींचो (Center Logic) */
        top: 100% !important;           /* बटन के ठीक नीचे */
        margin-top: 10px !important;    /* थोड़ा गैप */
    }
    
    /* Login वाले के लिए थोड़ा और एडजस्टमेंट (अगर जरुरी हो) */
    .navbar .nav-item.manual-dropdown .dropdown-menu {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}



/* --- FIX: Partner Dropdown (Center & Gap Issue) --- */
@media all and (min-width: 992px) {
    
    /* छोटे ड्रॉपडाउन (Mega Menu को छोड़कर) */
    .navbar .dropdown-menu:not(.megamenu) {
        /* पोजीशन सेटिंग्स */
        top: 100%;                  
        margin-top: 0 !important;   /* गैप पूरी तरह खत्म कर दिया */
        
        /* सेंटर करने का लॉजिक */
        left: 50% !important;
        right: auto !important;
        
        /* एनीमेशन की शुरुआत (थोड़ा नीचे और बीच में) */
        transform: translateX(-50%) translateY(15px) !important;
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    /* होवर करने पर (दिखने का इफेक्ट) */
    .navbar .nav-item.dropdown:hover .dropdown-menu:not(.megamenu) {
        opacity: 1;
        visibility: visible;
        
        /* एनीमेशन खत्म (ऊपर आकर सेट हो जाएगा) */
        transform: translateX(-50%) translateY(0) !important;
    }
}


/* --- Fix: Auto Open for Services/Partner BUT Click for Login --- */
@media all and (min-width: 992px) {
    
    /* :not(.manual-dropdown) का मतलब है कि Login वाले को छोड़ दो */
    .navbar .nav-item.dropdown:not(.manual-dropdown):hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        margin-top: 0 !important;
    }

    /* Login वाले मेनू को Hover पर छुपा कर रखो (सिर्फ क्लिक पर खुलेगा) */
    .navbar .nav-item.manual-dropdown:hover .dropdown-menu {
        display: none;
        opacity: 0;
        visibility: hidden;
    }
    
    /* जब Login पर क्लिक हो (Show Class) तब उसे दिखाओ */
    .navbar .nav-item.manual-dropdown .dropdown-menu.show {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        margin-top: 10px !important; /* बटन से थोड़ा गैप */
    }
}


/* --- Logo Size Fix --- */
.navbar-brand img {
    height: 47px !important;  /* यहाँ 40px, 45px या 50px अपनी पसंद से लिखें */
    width: auto;              /* चौड़ाई अपने आप सेट होगी */
}



/* --- FIX: USER REGISTRATION BUTTON --- */
.btn-register {
    background: linear-gradient(45deg, #009688, #43a047); /* हरा ग्रेडिएंट */
    color: white !important;    /* टेक्स्ट हमेशा सफ़ेद रहेगा */
    padding: 10px 25px;         /* फिक्स साइज़ */
    border-radius: 50px;        /* गोल कोने */
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 150, 136, 0.3);
    transition: all 0.3s ease;
    
    /* यह लाइन टेक्स्ट को गायब होने से रोकेगी */
    white-space: nowrap; 
}

/* होवर (Mouse Over) करने पर */
.btn-register:hover,
.btn-register:focus,
.btn-register:active {
    background: linear-gradient(45deg, #43a047, #009688); /* रंग पलटेगा */
    color: white !important;    /* टेक्स्ट सफ़ेद ही रहेगा */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 150, 136, 0.5);
}

/* --- Fix: Registration Dropdown Style --- */
.navbar .nav-item.dropdown .btn-register + .dropdown-menu {
    margin-top: 15px !important;    /* बटन से थोड़ा गैप */
    border-top: 3px solid #009688;  /* ऊपर हरी लाइन (Login जैसी) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* परछाई */
    left: 50% !important;
    transform: translateX(-50%) !important; /* सेंटर एलाइनमेंट */
    min-width: 220px; /* चौड़ाई थोड़ी बढ़ाई ताकि टेक्स्ट न कटे */
}

/* ड्रॉपडाउन आइटम के अंदर का स्टाइल */
.dropdown-item {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    transition: 0.3s;
}

.dropdown-item:hover {
    background-color: #e0f2f1; /* होवर पर हल्का हरा */
    color: #009688;
    padding-left: 25px; /* स्लाइड इफेक्ट */
}

/* बटन के अंदर का टेक्स्ट कलर फिक्स */
.btn-register.dropdown-toggle {
    color: white !important;
}



/* --- MEGA MENU SHINY ANIMATION LINE --- */

/* 1. मेगा मेनू बॉक्स की सेटिंग */
 
    .navbar .megamenu {
        position: relative; /* यह जरुरी है लाइन को चिपकाने के लिए */
        overflow: hidden;   /* ताकि लाइन बॉक्स के बाहर न जाए */
        border-bottom: none; /* अगर पुराना बॉर्डर है तो हटा दें */
    }

    /* 2. चमकीली लाइन बनाना */
    .navbar .megamenu::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px; /* लाइन की मोटाई */
        width: 100%;
        
        /* चमकीला ग्रेडिएंट कलर */
        background: linear-gradient(90deg, 
            #009688, #43a047, #ffeb3b, #43a047, #009688);
        background-size: 200% 100%; /* एनीमेशन के लिए साइज बड़ा किया */
        
        /* एनीमेशन */
        animation: shinyLine 3s linear infinite;
    }


/* 3. एनीमेशन की चाल (Movement) */
@keyframes shinyLine {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}


/* =========================================
   MOBILE & TABLET RESPONSIVENESS (FINAL COMBINED CODE)
   ========================================= */

@media (max-width: 991px) {

    /* --- 1. HEADER & NAVBAR FIXES --- */
    
    /* हेडर को स्टिकी (चिपका हुआ) बनाना */
    .ezee-navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1020 !important;
        background-color: #ffffff !important;
        padding: 10px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* मेनू का स्क्रॉल करने योग्य एरिया */
    .navbar-collapse {
        background: #ffffff;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 80vh; /* स्क्रीन की 80% ऊंचाई */
        overflow-y: auto; /* स्क्रॉलिंग चालू */
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        padding: 15px;
        border-top: 2px solid #009688;
        z-index: 1000;
    }

    /* नेविगेशन लिंक की सेटिंग */
    .navbar-nav .nav-item {
        margin-bottom: 0;
        border-bottom: 1px solid #f1f1f1;
    }

    .ezee-navbar .nav-link {
        padding: 12px 15px !important;
        font-size: 15px;
        color: #333 !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* होवर अंडरलाइन हटाना */
    .navbar .nav-link::after { display: none; }


    /* --- 2. DROPDOWNS & MEGA MENU FIXES --- */
    
    /* सभी ड्रॉपडाउन को स्टेटिक (Static) बनाना */
    .navbar .dropdown-menu,
    .navbar .megamenu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        background-color: #f8fbfb !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid #009688 !important;
        margin-top: 0 !important;
        padding: 10px 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: none;
    }

    /* क्लिक करने पर दिखाना */
    .navbar .dropdown-menu.show,
    .navbar .megamenu.show {
        display: block !important;
    }

    .mega-title {
        background: transparent;
        color: #009688;
        padding: 10px 15px;
        margin-top: 10px;
    }
    
    .megamenu ul li a,
    .dropdown-item {
        padding-left: 25px !important;
        font-size: 14px;
    }


    /* --- 3. REGISTRATION DROPDOWN (LOGIN PUSH DOWN FIX) --- */
    
    /* बटन को सेंटर करना */
    .btn-register {
        display: flex !important;
        justify-content: center !important;
        width: auto !important;
        margin: 10px auto !important;
    }

    /* ड्रॉपडाउन बॉक्स सेटिंग (Login को नीचे धकेलने वाला कोड) */
    .navbar .btn-register + .dropdown-menu {
        position: static !important; /* Login नीचे खिसकेगा */
        transform: none !important;
        float: none !important;
        
        /* बॉक्स को सेंटर करना */
        width: 260px !important;       
        margin: 10px auto !important; 
        
        /* स्टाइल */
        text-align: center !important;
        background-color: #ffffff !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        border-radius: 8px !important;
        display: none; /* डिफ़ॉल्ट रूप से बंद */
    }

    /* खुलने पर दिखाना */
    .navbar .btn-register + .dropdown-menu.show {
        display: block !important;
    }

    .navbar .btn-register + .dropdown-menu .dropdown-item {
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Login बटन */
    .btn-login-pulse {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 10px 0;
        box-shadow: none;
    }

    /* --- 4. SERVICE TABS (SCROLLABLE CARDS FIX) --- */

    .ps-content-box {
        flex-direction: column;
        border: none;
        box-shadow: none;
    }

    /* मुख्य स्क्रॉल पट्टी */
    .ps-sidebar {
        width: 100%;
        display: flex;
        overflow-x: auto; /* स्क्रॉल चालू */
        background: transparent !important;
        border-bottom: none !important;
        margin-bottom: 20px;
        padding: 10px !important;
        
        /* स्क्रॉलबार दिखाना */
        padding-bottom: 5px !important;
        scrollbar-width: thin !important;
        scrollbar-color: #009688 #f1f1f1 !important;
    }
    
    /* Chrome/Android स्क्रॉलबार स्टाइल */
    .ps-sidebar::-webkit-scrollbar {
        display: block !important;
        height: 4px !important;
    }
    .ps-sidebar::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
        border-radius: 10px;
    }
    .ps-sidebar::-webkit-scrollbar-thumb {
        background-color: #009688 !important;
        border-radius: 10px;
    }

    /* नॉर्मल कार्ड्स (जो सेलेक्ट नहीं हैं) */
    .ps-sidebar li {
        min-width: 160px;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        padding: 10px;
        
        /* कार्ड लुक */
        background-color: #ffffff !important;
        border: 1px solid #ccc !important;
        margin-right: 10px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
        color: #555 !important;
        
        /* पुराने बॉर्डर हटाना */
        border-bottom: none;
        border-left: none !important;
    }
    
    /* नॉर्मल आइकॉन */
    .ps-sidebar li i.icon { color: #888 !important; }
    
    /* एक्स्ट्रा एरो हटाना */
    .ps-sidebar li > i,
    .ps-sidebar li .fa-chevron-right { display: none !important; }

    /* एक्टिव कार्ड (SELECTED - हरा रंग) */
    .ps-sidebar li.active {
        background-color: #65c635 !important;  /* हरा बैकग्राउंड */
        color: #ffffff !important;             /* सफ़ेद टेक्स्ट */
        border: 1px solid #65c635 !important;
        border-bottom: 4px solid #004d40 !important; /* डार्क बॉटम बॉर्डर */
        box-shadow: 0 4px 10px rgba(101, 198, 53, 0.4) !important;
    }
    
    .ps-sidebar li.active i.icon { color: #ffffff !important; }
    .ps-sidebar li.active span { justify-content: center; }


    /* --- 5. IMAGE & CONTENT FIX --- */
    .ps-tab-panel { padding: 10px; }
    .ps-details { flex-direction: column; }
    .ps-details img {
        width: 100%;
        max-width: 350px;
        margin: 0 auto 20px auto;
        display: block;
    }
}

/* --- 6. MENU BUTTON THIN BORDER FIX --- */
    
    .navbar-toggler {
        /* बटन का बॉर्डर पतला करने के लिए */
        border: 1px solid #009688 !important; 
    }

    /* क्लिक करने पर जो मोटी लाइन आती है उसे पतला करने के लिए */
    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: none !important;
        
        /* यह है वो लाइन जो मोटी दिखती है - इसे 1px या 2px करें */
        box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.3) !important; 
    }

	
	
/* =========================================
   PREMIUM EARNINGS BANNER (FULL WIDTH)
========================================= */

/* 1. डेस्कटॉप सेटिंग्स (Desktop View) */
.premium-banner-section {
    position: relative;
    background: linear-gradient(135deg, #004d40 0%, #009688 100%) !important;
    
    /* 👇 [IMP] ऊँचाई कम/ज्यादा करने के लिए इस '50px' को बदलें */
    /* अगर ऊँचाई बढ़ानी है तो 80px करें, कम करनी है तो 30px करें */
    padding: 20px 10px !important; 
    
    color: white;
    
    /* 👇 इसे फुल स्क्रीन (Full Width) करने का कोड */
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important; /* ऊपर-नीचे थोड़ा गैप, साइड में 0 */
    
    border-radius: 0 !important; /* कोने सीधे रहेंगे (फुल पट्टी) */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 198, 255, 0.2);
}

/* हेडिंग और बटन के बीच का गैप */
.banner-content h2 {
    font-size: 32px; /* फोंट थोड़ा बड़ा (फुल स्क्रीन पर अच्छा दिखेगा) */
    font-weight: 700;
    margin-bottom: 25px !important; /* टेक्स्ट और बटन के बीच की दूरी */
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.banner-content h2 span {
    font-size: 36px;
    color: #ffeb3b;
    font-weight: 700;
}

/* बटन कंटेनर */
.banner-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* बटन स्टाइल */
.btn-premium-fill,
.btn-premium-outline {
    padding: 10px 30px; /* बटन का साइज */
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

/* बटन कलर्स */
.btn-premium-fill { background-color: white; color: #009688; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.btn-premium-fill:hover { background-color: #009688; color: white !important; transform: translateY(-2px); }

.btn-premium-outline { background-color: transparent; border: 2px solid rgba(255,255,255,0.7); color: white; }
.btn-premium-outline:hover { background-color: #009688; border-color: #009688; transform: translateY(-2px); }


/* 2. मोबाइल सेटिंग्स (Mobile View) */
@media (max-width: 768px) {
    
    /* बैनर की ऊँचाई और मार्जिन सेटिंग */
    .premium-banner-section {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 16px 10px !important; 
    }

    .banner-content h2 {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }
    
    .banner-content h2 span {
        font-size: 22px !important;
    }

    /* बटन कंटेनर */
    .banner-buttons {
        flex-direction: row !important;
        gap: 8px !important; /* बटनों के बीच का गैप */
        flex-wrap: nowrap !important;
        justify-content: center !important;
    }

    /* 👇 यहाँ से बटन की चौड़ाई कम होगी */
    .btn-premium-fill,
    .btn-premium-outline {
        /* 1. खींचना बंद करें (Stop Stretching) */
        flex: initial !important; 
        width: auto !important;
        
        /* 2. बटन के अंदर की जगह कम करें (8px 10px = कम चौड़ाई) */
        padding: 10px 30px !important; 
        
        /* 3. टेक्स्ट साइज */
        font-size: 13px !important;
        
        text-align: center;
        white-space: nowrap;
    }
    
    .btn-premium-fill i, 
    .btn-premium-outline i {
        font-size: 10px !important;
    }
}


/* =========================================
   HOME PAGE PARTNERS SECTION (FINAL FIXED & SMOOTH)
========================================= */

.partners-section {
    padding: 10px 0; /* थोड़ा पैडिंग दिया ताकि शैडो न कटे */
    position: relative;
    z-index: 10; 
    
    /* बैकग्राउंड और शैडो */
    background-color: #ffffff;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08); 
    
    /* चौड़ाई और मार्जिन */
    width: 100% !important; 
    margin: 30px auto !important; 
    
    /* राउंडेड कॉर्नर्स */
    border-radius: 20px !important; 
    overflow: hidden;
}

/* --- HEADING STYLES --- */
.section-head { 
    margin-bottom: 5x; /* थोड़ा गैप बढ़ाया ताकि लाइन चिपके नहीं */
    text-align: center;
}

/* "Our" और "Partners" का कलर */
.section-head h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #65c635; /* Partners (Green) */
    margin: 0;
}

.section-head h2 span {
    color: #000000; /* Our (Black) */
    font-weight: 700;
    margin-right: 8px; 
}

/* हेडिंग के नीचे की लाइन */
.heading-line { 
    width: 100px; 
    height: 4px; 
    background: linear-gradient(to right, #65c635, #009688); /* डुअल कलर लाइन */
    margin: 8px auto; 
    border-radius: 10px;
}

/* --- SLIDER LOGIC (JERK FIX) --- */
.logos-slider {
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.logos-slide-track {
    display: flex;
    align-items: center;
    /* कुल लोगो = 14, एक लोगो = 200px, कुल = 2800px */
    width: calc(200px * 14); 
    animation: scrollLogos 30s linear infinite;
}

/* लोगो बॉक्स */
.partner-logo {
    /* 👇 यह लाइन सबसे जरुरी है (Jerk Fix) */
    box-sizing: border-box !important; 
    
    width: 200px; 
    min-width: 200px; 
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px; /* अब यह पैडिंग 200px के अंदर ही रहेगी */
}

/* लोगो इमेज */
.partner-logo img {
    height: 90px; /* डेस्कटॉप पर 90px बहुत बड़ा था, 60px बेस्ट है */
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.05));
    transition: transform 0.3s;
}
.partner-logo img:hover { transform: scale(1.1); }

/* --- ANIMATION (MATHS) --- */
@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { 
        /* 7 लोगो * 200px = 1400px */
        transform: translateX(calc(-200px * 7)); 
    }
}

/* --- MOBILE SETTINGS (CORRECTED) --- */
@media (max-width: 768px) {
    .partners-section {
        padding: 5px 0 !important;
        width: 100% !important; /* मोबाइल में थोड़ा मार्जिन */
        margin: 15px auto !important;
        border-radius: 15px !important;
    }
   

   /*  हेडिंग और लोगो के बीच का गैप कम */
	.section-head { 
        margin-bottom: 5px !important; 
    }
	
    /* हेडिंग छोटी की गई (32px बहुत बड़ा था) */
    .section-head h2 { font-size: 22px !important; }
    
    .logos-slider { height: 70px !important; }
    
    /* चौड़ाई मोबाइल पर भी 200px ही रखें (एनीमेशन के लिए) */
    .partner-logo { width: 200px; min-width: 200px; }
    
    /* इमेज छोटी की गई */
    .partner-logo img { height: 60px !important; }
    
    .heading-line { width: 60px; height: 3px; }
}

/* =========================================
   PREMIUM DARK FOOTER STYLES (FIXED)
========================================= */

/* 1. फूटर का मेन कंटेनर */
.footer-section {
    position: relative;
    background: #002b26; 
    color: #b0bec5;
    
    /* ऊपर की पैडिंग (लहर के लिए) */
    padding-top: 70px !important; 
    
    /* नीचे की पैडिंग (0px ताकि गैप न रहे) */
    padding-bottom: 0px !important; 
    
    font-family: 'Poppins', sans-serif;
}

/* 2. लहर (Wave) */
.footer-wave svg {
    display: block;
    width: 100% !important; 
    height: 80px !important; 
    transform: none !important; 
}

.footer-wave {
    position: absolute;
    top: -2px; 
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1; 
}

/* --- Brand Column --- */
.footer-brand h2 { color: #ffffff; font-weight: 700; margin-bottom: 20px; }
.footer-brand p { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }

/* Social Icons */
.social-links a {
    display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px;
    background: rgba(255,255,255,0.1); color: white; border-radius: 50%; margin-right: 10px;
    transition: 0.3s; text-decoration: none;
}
.social-links a:hover { background: #009688; transform: translateY(-3px); }

/* --- Links Columns --- */
.footer-links h3, .footer-contact h3 {
    color: #ffffff; font-size: 18px; font-weight: 600; margin-bottom: 25px; position: relative;
}
.footer-links h3::after, .footer-contact h3::after {
    content: ""; position: absolute; left: 0; bottom: -8px; width: 40px; height: 2px; background: #ffeb3b;
}

.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
    color: #b0bec5; text-decoration: none; font-size: 14px; transition: 0.3s; display: inline-block;
}
.footer-links a:hover { color: #ffeb3b; transform: translateX(5px); }

/* --- Contact Column --- */
.footer-contact p { font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.footer-contact i { color: #009688; }

/* Play Store Button (White) */
.store-btn {
    display: inline-block;
    background: #ffffff; /* सफ़ेद बैकग्राउंड */
    color: #002b26;      /* गहरा हरा टेक्स्ट */
    
    padding: 10px 25px; 
    border-radius: 50px; 
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 👇 यह लाइन सबसे जरुरी है: आइकन (Logo) का रंग सेट करना */
.store-btn i {
    color: #009688; /* नॉर्मल में लोगो हरा दिखेगा */
    margin-right: 8px; /* टेक्स्ट और लोगो के बीच गैप */
    transition: all 0.3s ease;
}

/* --- HOVER EFFECT (माउस ले जाने पर) --- */
.store-btn:hover {
    background: #009688; /* बैकग्राउंड हरा हो जाएगा */
    color: #ffffff;      /* टेक्स्ट सफ़ेद हो जाएगा */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 150, 136, 0.4);
}

/* 👇 माउस ले जाने पर आइकन को भी सफ़ेद करना जरूरी है */
.store-btn:hover i {
    color: #ffffff !important; /* अब लोगो सफ़ेद हो जाएगा और दिखेगा */
}

/* --- Copyright Bar --- */
.footer-bottom {
    background: #001a17; 
    padding: 20px 0;
    
    /* यह लिंक्स से गैप बनाएगा */
    margin-top: 60px !important; 
    
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
}

.bottom-links a {
    color: #b0bec5; text-decoration: none; margin-left: 20px; transition: 0.3s;
}
.bottom-links a:hover { color: #ffffff; }

/* Mobile Fixes */
@media (max-width: 768px) {
    .text-md-end { text-align: center !important; margin-top: 10px; }
    .bottom-links a { margin: 0 10px; }
}




/* =========================================
   INCOME PAGE PREMIUM HERO HEADER (COMPACT VERSION)
========================================= */

.hero-section {
    position: relative;
    /* 👇 पैडिंग बहुत कम कर दी गई है (ऊपर-नीचे की खाली जगह) */
    padding: 50px 0 50px 0;
    
    /* बैकग्राउंड ग्रेडिएंट वही रहेगा */
    background: linear-gradient(135deg, #009688 0%, #004d40 100%);
    color: white;
    overflow: hidden;
}

/* --- सजावटी गोले (थोड़े छोटे और हल्के किए) --- */
.shape { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08); z-index: 0; }
.shape-1 { width: 200px; height: 200px; top: -60px; left: -80px; }
.shape-2 { width: 150px; height: 150px; bottom: 40px; right: 5%; }


/* --- Text Content (Compact) --- */
.hero-content { position: relative; z-index: 2; }

/* छोटा बैज */
.badge-pill {
    background: rgba(255,255,255,0.15); padding: 4px 12px; border-radius: 50px;
    font-size: 13px; font-weight: 500;
    margin-bottom: 15px; /* मार्जिन कम किया */
    display: inline-block; border: 1px solid rgba(255,255,255,0.2);
}

/* मुख्य हेडिंग (फोंट छोटा किया) */
/* --- Hero Text Color Fix --- */

.hero-content h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 38px; 
    font-weight: 700; 
    margin-bottom: 15px; 
    line-height: 1.2;

    /* 👇 यह लाइन सबसे जरुरी है (काला रंग हटाने के लिए) */
    color: #ffffff !important; 
}

.hero-content h1 span { 
    color: #ffeb3b !important; /* पीला रंग */
}

.hero-content p {
    font-size: 16px; 
    
    /* 👇 पैराग्राफ को भी सफ़ेद करें */
    color: #ffffff !important; 
    
    opacity: 0.9; 
    margin-bottom: 25px; 
    line-height: 1.5; 
    max-width: 480px;
}

/* Buttons (थोड़े छोटे किए) */
.hero-btns { display: flex; gap: 10px; margin-bottom: 25px; }

.btn-hero-primary {
    background: #ffeb3b; color: #004d40; padding: 10px 25px; border-radius: 50px;
    font-weight: 700; text-decoration: none; transition: 0.3s; font-size: 14px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.btn-hero-primary:hover { transform: translateY(-2px); background: #fff; color: #009688; }

.btn-hero-secondary {
    background: transparent; color: white; padding: 10px 25px; border-radius: 50px;
    font-weight: 600; text-decoration: none; border: 2px solid rgba(255,255,255,0.4);
    transition: 0.3s; font-size: 14px;
}
.btn-hero-secondary:hover { background: white; color: #009688; }

/* Trust Badge */
.trust-badge p { font-size: 13px; font-weight: 500; opacity: 0.8; margin: 0; }


/* --- Image Animation (Floating) --- */
.hero-img-box { text-align: center; position: relative; z-index: 2; }
/* इमेज को थोड़ा ऊपर एडजस्ट किया */
.floating-img { max-width: 24%; animation: floatImage 6s ease-in-out infinite; }
@keyframes floatImage {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); } /* तैरने की दूरी कम की */
    100% { transform: translateY(0); }
}


/* --- Bottom Wave (लहर छोटी की) --- */
.hero-wave { position: absolute; bottom: -2px; left: 0; width: 100%; line-height: 0; }
.hero-wave svg {
    display: block; width: 100%;
    height: 60px; /* 👇 लहर की ऊंचाई कम की (पहले 100px थी) */
}

/* --- Mobile Responsiveness (Compact) --- */
@media (max-width: 991px) {
    /* मोबाइल में और भी छोटा */
    .hero-section { padding: 50px 0 70px 0; text-align: center; }
    .hero-content h1 { font-size: 28px; } /* मोबाइल हेडिंग छोटी */
    .hero-content p { font-size: 14px; margin: 0 auto 25px auto; }
    .hero-btns { justify-content: center; }
    .hero-img-box { margin-top: 40px; }
    .floating-img { max-width: 70%; }
    .hero-wave svg { height: 40px; } /* मोबाइल में लहर और छोटी */
}


/* =========================================
   INCOME CALCULATOR (9 SERVICES + SCROLL)
========================================= */

/* Main Section */
.calculator-section {
    padding: 80px 0;
    background-color: #fcfdfe; /* Professional Background */
    background-image: radial-gradient(#cfd8dc 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    position: relative;
    z-index: 1;
}

/* Calculator Box */
.calc-box {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid #edf2f7;
    margin-top: 20px;
}

/* --- SCROLLABLE CONTAINER (LEFT SIDE) --- */
.services-scroll-container {
    max-height: 550px; /* 550px के बाद स्क्रॉल शुरू होगा */
    overflow-y: auto;
    padding-right: 15px; /* स्क्रॉल बार के लिए जगह */
}

/* Custom Scrollbar Styling */
.services-scroll-container::-webkit-scrollbar { width: 6px; }
.services-scroll-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.services-scroll-container::-webkit-scrollbar-thumb { background: #009688; border-radius: 10px; }


/* --- INPUT GROUPS --- */
.calc-input-group {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee; /* हर सर्विस के बीच लाइन */
}
.calc-input-group:last-child { border-bottom: none; margin-bottom: 0; }

.calc-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.service-name { font-family: 'Poppins', sans-serif; font-weight: 600; color: #333; font-size: 15px; }

/* TXN Badge (Size Increased) */
.txn-badge {
    background-color: #e0f2f1; 
    color: #009688; 
    padding: 6px 15px; /* पैडिंग थोड़ी बढ़ाई */
    border-radius: 20px; 
    
    /* 👇 टेक्स्ट का साइज बढ़ाया (पहले 12px था) */
    font-size: 15px !important; 
    
    font-weight: 600; 
    border: 1px solid #b2dfdb;
    display: inline-block; /* ताकि साइज सही ले */
}

/* नंबर (0) को और बड़ा और बोल्ड दिखाने के लिए */
.txn-badge b { 
    font-weight: 600; 
    
    /* 👇 नंबर का साइज और बड़ा किया (पहले 14px था) */
    font-size: 18px !important; 
    
    margin-left: 6px; 
    color: #004d40; /* गहरा हरा रंग */
}
/* Stats (Avg Comm) */
/* Stats Line Update */
.calc-stats {
    display: flex;
    justify-content: space-between; /* दोनों को कोनों में धकेल देगा */
    align-items: center;
    
    margin-top: 8px;
    font-size: 13px; /* फोंट थोड़ा बड़ा किया ताकि साफ़ दिखे */
    color: #555;
    background: #f1f2f3;
    padding: 6px 12px;
    border-radius: 5px;
    border-left: 3px solid #009688;
}

.calc-stats b {
    color: #333;
    font-weight: 700;
    margin-left: 4px;
}

/* Range Slider */
.range-slider {
    -webkit-appearance: none; width: 100%; height: 6px; background: #e0e0e0;
    border-radius: 5px; outline: none; cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px;
    background: #009688; border: 3px solid #ffffff; border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.2s;
}
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }


/* --- RIGHT SIDE: STICKY RESULT CARD --- */
.sticky-card {
    position: sticky;
    top: 20px; /* स्क्रॉल करते समय यह ऊपर चिपका रहेगा */
    z-index: 5;
}

.total-income-card {
    background: linear-gradient(135deg, #004d40 0%, #009688 100%);
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    color: white;
    box-shadow: 0 15px 30px rgba(0, 150, 136, 0.2);
    height: 100%; /* बराबर ऊँचाई */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.income-row h4 { font-size: 16px; opacity: 0.9; margin-bottom: 5px; font-family: 'Poppins', sans-serif; color: #e0f2f1; }
.daily h2 { font-size: 32px; font-weight: 700; color: #ffeb3b; margin: 0; }
.monthly h1 { font-size: 42px; font-weight: 700; color: #ffffff; margin: 0; }
.income-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.2); margin: 20px 0; }
.calc-note { font-size: 11px; opacity: 0.7; margin-top: 15px; margin-bottom: 25px; font-style: italic; color: #e0f2f1; }

.btn-calc-join {
    background: white; color: #009688; padding: 12px 30px; border-radius: 50px;
    font-weight: 700; text-decoration: none; display: inline-block; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: 0.3s;
}
.btn-calc-join:hover { background: #ffeb3b; color: #333; transform: translateY(-3px); }

/* --- Mobile Responsiveness --- */
@media (max-width: 991px) {
    .services-scroll-container { max-height: none; overflow-y: visible; padding-right: 0; margin-bottom: 30px; }
    .sticky-card { position: static; margin-top: 20px; }
    .total-income-card { padding: 30px 20px; }
    .monthly h1 { font-size: 36px; }
}

/* =========================================
   ANIMATED OFFER STRIP STYLES
========================================= */

.offer-strip-section {
    /* कैलकुलेटर और फूटर के बीच अलग दिखने के लिए गहरा बैकग्राउंड */
    background: linear-gradient(45deg, #002b26, #004d40);
    padding: 30px 0;
    position: relative;
    overflow: hidden;
    border-top: 2px solid #ffeb3b; /* ऊपर एक पीली लाइन हाईलाइट के लिए */
    z-index: 5; /* फूटर वेव के ऊपर रहे */
}

.offer-box-animated {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05); /* हल्का पारदर्शी बॉक्स */
    padding: 20px 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

/* --- 1. Pulsing Badge --- */
.offer-badge {
    background: #ffeb3b;
    color: #002b26;
    padding: 8px 15px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
}

/* धड़कने वाली एनीमेशन */
.pulsating {
    animation: pulseAnimation 2s infinite;
}
@keyframes pulseAnimation {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 235, 59, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 235, 59, 0); }
}

/* --- 2. Text --- */
.offer-text h3 {
    color: white;
    margin: 0 0 5px 0;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}
.highlight-yellow { color: #ffeb3b; text-decoration: underline; }
.offer-text p { color: #b0bec5; margin: 0; font-size: 14px; }

/* --- 3. Timer --- */
.offer-timer {
    display: flex;
    align-items: center;
    gap: 5px;
}
.timer-block {
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
    color: #b0bec5;
    font-size: 10px;
    min-width: 50px;
}
.timer-block span {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #ffeb3b; /* पीला नंबर */
    font-family: 'monospace';
}
.timer-sep { color: rgba(255,255,255,0.3); font-size: 20px; font-weight: 700; }

/* --- 4. Shiny Button --- */
.btn-claim-offer {
    background: #009688;
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    overflow: hidden; /* चमक बाहर न जाए */
    display: inline-block;
    transition: 0.3s;
}
.btn-claim-offer:hover { background: #ffeb3b; color: #002b26; transform: translateY(-3px); }

/* चमकदार इफेक्ट (Shiny Animation) */
.shiny-effect::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 3s infinite linear; /* हर 3 सेकंड में चमकेगा */
}
@keyframes shine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* --- Mobile Responsiveness --- */
@media (max-width: 991px) {
    .offer-box-animated {
        flex-direction: column; /* मोबाइल में एक के नीचे एक */
        text-align: center;
        gap: 20px;
    }
    .offer-badge { margin: 0 auto; }
    .offer-timer { justify-content: center; }
}







/* =========================================
   SLIDING BANNER STYLES (NO IMAGE NEEDED)
========================================= */

.sliding-banner-section {
    width: 100%;
    height: 50px; /* पतली पट्टी */
    background: #fff;
    overflow: hidden;
    position: relative;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 5;
}

.banner-track {
    display: flex;
    /* 5 बैनर * 300px = 1500px, डुप्लीकेट मिलाकर 3000px */
    width: calc(300px * 10); 
    animation: scrollBanners 20s linear infinite;
}

/* बैनर बॉक्स */
.slide-item {
    width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
}

/* अलग-अलग रंग (ताकि बैनर जैसा दिखे) */
.color-1 { background: #e91e63; } /* पिंक */
.color-2 { background: #009688; } /* हरा */
.color-3 { background: #2196f3; } /* नीला */
.color-4 { background: #ff9800; } /* संतरा */
.color-5 { background: #673ab7; } /* बैंगनी */

/* --- Animation --- */
@keyframes scrollBanners {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1500px); } /* 5 बैनर निकलने तक */
}

/* Mobile */
@media (max-width: 768px) {
    .slide-item { width: 200px; font-size: 11px; }
    .banner-track { 
        width: calc(200px * 10); 
        animation: scrollBannersMobile 15s linear infinite; 
    }
    @keyframes scrollBannersMobile {
        0% { transform: translateX(0); }
        100% { transform: translateX(-1000px); }
    }
}


/* =========================================
   PRIVACY PAGE STYLES (FINAL)
========================================= */

/* 1. Page Header (Green Box) */
.page-header-section {
    background: linear-gradient(135deg, #009688 0%, #004d40 100%);
    padding: 80px 0;
    text-align: center;
    color: white;
    margin-bottom: 0; /* गैप हटाया ताकि कार्ड्स चिपक कर आएं */
}
.page-header-section h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 42px; font-weight: 700; color: #ffffff !important; margin-bottom: 10px;
}

/* Header के अंदर Home लिंक का स्टाइल */
.home-link {
    color: #e0f2f1 !important; /* हल्का सफ़ेद */
    text-decoration: none;     /* नीचे की लाइन हटा दी */
    font-weight: 600;
    transition: 0.3s;
    border-bottom: 1px dashed rgba(255,255,255,0.5); /* हल्की लाइन */
}
.home-link:hover {
    color: #ffffff !important; /* एकदम सफ़ेद */
    border-bottom: 1px solid #ffffff; /* लाइन गाड़ी हो जाएगी */
}

/* 2. Key Highlights (Top Cards - Summary) */
.privacy-highlights {
    margin-top: -40px; /* हेडर के ऊपर चढ़ा हुआ दिखेगा */
    position: relative;
    z-index: 5;
    padding-bottom: 40px;
}

.highlight-card {
    background: #ffffff;
    padding: 25px 15px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: 0.3s;
    height: 100%;
}
.highlight-card:hover { transform: translateY(-5px); }
.highlight-card i {
    font-size: 30px; color: #009688; margin-bottom: 15px;
}
.highlight-card h5 {
    font-size: 16px; font-weight: 700; color: #333; margin-bottom: 5px;
}
.highlight-card p {
    font-size: 13px; color: #666; margin: 0;
}

/* 3. Detailed Legal Content (Big Text Area) */
.detailed-policy-section {
    background-color: #f8fbfd;
    padding-bottom: 80px;
}

.legal-box {
    background: #ffffff;
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.legal-box h3 {
    color: #004d40;
    font-size: 22px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
}

.legal-box p, .legal-box li {
    color: #555;
    line-height: 1.8; /* पढ़ने में आसान */
    font-size: 15px;
    margin-bottom: 15px;
    text-align: justify;
}

.legal-box ul {
    margin-bottom: 20px;
    padding-left: 20px;
}
.legal-box li {
    margin-bottom: 8px;
    list-style-type: disc; /* बुलेट पॉइंट्स */
}

/* Last Updated Date */
.last-updated {
    color: #999; font-style: italic; font-size: 14px;
}

/* Grievance Box Highlight */
.grievance-box {
    background: #e0f2f1;
    border-left: 5px solid #009688;
    padding: 20px;
    margin-top: 15px;
    border-radius: 5px;
    color: #004d40;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .legal-box { padding: 25px; }
    .page-header-section h1 { font-size: 32px; }
}


/* =========================================
   CONTACT PAGE STYLES
========================================= */

.icon-circle {
    /* साइज थोड़ा बढ़ाया ताकि आइकॉन अच्छे से फिट हो */
    width: 70px; 
    height: 70px;
    
    background: #e0f2f1;
    color: #009688;
    border-radius: 50%;
    
    /* 👇 सबसे पावरफुल सेंटरिंग कोड */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    margin: 0 auto 15px auto;
    transition: all 0.5s ease;
    
    /* फ्लिप इफ़ेक्ट के लिए जरुरी */
    perspective: 1000px;
}

/* 👇 आइकॉन को रीसेट करना (ताकि वह इधर-उधर न भागे) */
.icon-circle i {
    font-size: 30px; /* आइकॉन का साइज */
    
    /* ये लाइनें सबसे जरुरी हैं: */
    margin: 0 !important;   
    padding: 0 !important;
    line-height: 1 !important; 
    display: inline-block;
}

/* --- HOVER EFFECT --- */

/* 1. सर्कल घूमेगा और हरा होगा */
.contact-card-hover:hover .icon-circle {
    background: #009688; 
    transform: rotateY(180deg); 
    box-shadow: 0 5px 15px rgba(0, 150, 136, 0.3);
}

/* 2. आइकॉन सफ़ेद होगा (और उसे भी 180 डिग्री घुमाना होगा ताकि वो उल्टा न दिखे) */
.contact-card-hover:hover .icon-circle i {
    color: #ffffff !important;
    
    /* 👇 अगर आइकॉन उल्टा (Mirror) दिख रहा है, तो यह उसे सीधा करेगा */
    transform: rotateY(180deg); 
}

/* Map & Form Container */
.contact-form-area {
    padding-bottom: 80px;
    background: #f8fbfd;
}

.contact-box-shadow {
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border-radius: 15px;
    overflow: hidden; /* मैप और फॉर्म को कोने से बाहर जाने से रोकेगा */
    background: white;
}

/* Map Section */
.map-container {
    height: 100%;
    min-height: 500px; /* मैप की कम से कम ऊंचाई */
}

/* Form Section */
.form-wrapper {
    padding: 50px;
}
.form-wrapper h3 {
    color: #004d40; font-weight: 700; margin-bottom: 5px;
}
.form-wrapper p {
    color: #666; margin-bottom: 30px; font-size: 14px;
}

/* Custom Input Fields */
.custom-input {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 14px;
}
.custom-input:focus {
    border-color: #009688;
    background: #fff;
    box-shadow: none;
}
.form-wrapper label {
    font-size: 13px; font-weight: 600; color: #333; margin-bottom: 5px;
}

/* Submit Button */
.btn-submit-msg {
    background: #009688; color: white;
    padding: 12px 30px; border: none; border-radius: 50px;
    font-weight: 700; width: 100%; transition: 0.3s;
}
.btn-submit-msg:hover {
    background: #004d40; transform: translateY(-3px);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .map-container { min-height: 300px; }
    .form-wrapper { padding: 30px; }
}


/* =========================================
   ULTRA-PREMIUM ABOUT PAGE STYLES (CLEANED)
========================================= */

/* --- 1. Cinematic Hero Section --- */
.about-hero-parallax {
    position: relative;
    height: 50vh; /* फुल स्क्रीन */
    background: url('https://placehold.co/1920x1080/002b26/004d40?text=Paysaral+Office') no-repeat center center/cover;
    background-attachment: fixed; /* Parallax Effect (जादू) */
    color: white;
    overflow: hidden;
    /* CTA Fix additions for Hero */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* डार्क ओवरले ताकि टेक्स्ट चमके */
.overlay-dark {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 43, 38, 0.85); /* गहरा हरा टेंट */
}
.hero-content-box { position: relative; z-index: 2; max-width: 800px; }

.badge-premium {
    border: 1px solid #ffeb3b; color: #ffeb3b; padding: 5px 15px;
    border-radius: 50px; font-size: 14px; letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 20px; display: inline-block;
}
.about-hero-parallax h1 {
    font-size: 60px; font-weight: 800; line-height: 1.1; margin-bottom: 25px;
}
.text-gradient {
    background: linear-gradient(to right, #ffeb3b, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lead { font-size: 19px; opacity: 0.9; font-weight: 300; }

.scroll-indicator {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    text-align: center; color: rgba(255,255,255,0.7); font-size: 14px; z-index: 2;
}
.bouncing { margin-top: 10px; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} }


/* --- 2. Split Section (Typography) --- */
.about-split-section { padding: 100px 0; background: #fff; }
.sub-heading { color: #009688; font-weight: 700; letter-spacing: 2px; font-size: 14px; margin-bottom: 15px; }
.main-heading { color: #004d40; font-size: 42px; font-weight: 800; margin-bottom: 20px; }
.line-break { width: 80px; height: 4px; background: #ffeb3b; margin-bottom: 30px; }
.text-muted-lg { font-size: 18px; color: #555; line-height: 1.8; margin-bottom: 20px; }

/* Image Stack (Floating Images) */
.image-stack { position: relative; height: 400px; }
.img-top {
    position: absolute; top: 0; left: 0; width: 80%; border-radius: 10px; z-index: 2;
    border: 5px solid white;
}
.img-bottom {
    position: absolute; bottom: 0; right: 0; width: 70%; border-radius: 10px; z-index: 1;
    border: 5px solid white;
}


/* --- 3. Live Stats (Counter) --- */
.stats-counter-section {
    background: #002b26; padding: 80px 0; color: white;
    background-image: radial-gradient(#004d40 1px, transparent 1px);
    background-size: 20px 20px;
}
.stat-item h2 { font-size: 56px; font-weight: 800; color: #ffeb3b; display: inline-block; margin: 0; }
.stat-item span { font-size: 56px; font-weight: 800; color: #ffeb3b; }
.stat-item p { font-size: 18px; opacity: 0.8; letter-spacing: 1px; text-transform: uppercase; margin-top: 5px; }


/* --- 4. Timeline (Journey) --- */
.timeline-section { padding: 100px 0; background: #f8fbfd; position: relative; }
.timeline {
    position: relative; max-width: 900px; margin: 0 auto;
}
/* बीच की लाइन */
.timeline::after {
    content: ''; position: absolute; width: 4px; background-color: #009688;
    top: 0; bottom: 0; left: 50%; margin-left: -2px; border-radius: 10px;
}
.timeline-item {
    padding: 10px 40px; position: relative; background-color: inherit; width: 50%;
}
.timeline-item::after { /* गोल डॉट्स */
    content: ''; position: absolute; width: 20px; height: 20px; right: -10px;
    background-color: white; border: 4px solid #ffeb3b; top: 15px;
    border-radius: 50%; z-index: 1;
}
.left { left: 0; }
.right { left: 50%; }
.right::after { left: -10px; }

.content {
    padding: 20px; background: white; border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-left: 4px solid #009688;
}
.content h3 { font-weight: 800; color: #004d40; }


/* --- 5. Mission & Vision Premium Styles --- */

.mv-premium-section {
    padding: 50px 0;
    background: #ffffff;
    position: relative;
    z-index: 2; /* Timeline के ऊपर दिखेगा */
}

.mv-box {
    position: relative;
    padding: 10px 40px;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Hover Effect: Card ऊपर उठेगा */
.mv-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* 1. Mission Theme (Greenish) */
.mission-theme {
    background: linear-gradient(135deg, #e0f2f1 0%, #ffffff 100%);
    border-left: 6px solid #009688;
}
.mission-theme .icon-circle-mv { background: #009688; color: white; }
.mission-theme h3 { color: #004d40; }

/* 2. Vision Theme (New Logo Green Color) */
.vision-theme {
    /* बैकग्राउंड में बहुत हल्का हरा टिंट */
    background: linear-gradient(135deg, #f1f8e9 0%, #ffffff 100%);
    
    /* 👇 लोगो वाला 'तोतिया हरा' रंग */
    border-left: 6px solid #64c456;
}

.vision-theme .icon-circle-mv {
    /* 👇 गोला उसी लोगो वाले हरे रंग का */
    background: #64c456;
    
    /* 👇 आइकॉन सफ़ेद (White) ताकि लोगो जैसा दिखे */
    color: #ffffff;
}

.vision-theme h3 {
    /* 👇 हेडिंग थोड़ी गहरी हरी ताकि सफ़ेद पर पढ़ी जा सके */
    color: #2e7d32;
}

/* Content Styling */
.mv-content { position: relative; z-index: 2; }

.icon-circle-mv {
    width: 70px; height: 70px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.mv-box h3 {
    font-size: 32px; font-weight: 700; margin-bottom: 15px;
}
.mv-box p {
    font-size: 18px; line-height: 1.7; color: #555; margin: 0;
}

/* Background Huge Icon (Decoration) */
.mv-bg-icon {
    position: absolute;
    right: -20px; bottom: -20px;
    font-size: 200px;
    opacity: 0.05; /* बहुत हल्का दिखेगा */
    z-index: 1;
    transform: rotate(-15deg);
    pointer-events: none;
}


/* --- 6. Core Values (Fixed Visibility) --- */
.values-section {
    padding: 20px 0; /* Updated padding */
    /* बैकग्राउंड वही गहरा हरा */
    background: linear-gradient(135deg, #009688 0%, #004d40 100%);
}

.value-card {
    /* Updated styles for card visibility */
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px); /* धुंधला इफेक्ट */
    padding: 10px;
    border-radius: 20px;
    
    /* बॉर्डर भी हल्का सफ़ेद ताकि बाउंड्री दिखे */
    border: 1px solid rgba(255,255,255,0.1);
    
    text-align: center;
    color: #ffffff; /* टेक्स्ट एकदम सफ़ेद */
    transition: all 0.3s ease;
    height: 100%;
}

/* Hover Effect */
.value-card:hover {
    transform: translateY(-10px);
    
    /* माउस ले जाने पर थोड़ा और गहरा (Darker) होगा */
    background: rgba(0, 0, 0, 0.4);
    
    /* बॉर्डर चमकेगा */
    border-color: #ffeb3b;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.value-card .icon-box {
    font-size: 45px;
    color: #ffeb3b; /* आइकॉन पीला */
    margin-bottom: 25px;
    
    /* आइकॉन के पीछे हल्की चमक */
    text-shadow: 0 0 20px rgba(255, 235, 59, 0.3);
}

.value-card h4 {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 24px;
    color: #ffffff; /* हेडिंग सफ़ेद */
}

.value-card p {
    font-size: 16px;
    line-height: 1.6;
    
    /* टेक्स्ट की ओपेसिटी (Opacity) हटा दी, अब पूरा दिखेगा */
    color: #ffffff;
    opacity: 1;
    font-weight: 400;
}


/* ---6 CTA / Final Banner (DECISIVE FIX) --- */
.cta-banner {
    /* 👇 FIX 1: निश्चित ऊँचाई (Fixed Height) लागू करें ताकि यह दिखे */
    height: 400px !important; 
    min-height: 400px !important; 
    padding: 0 !important; 
    width: 100% !important; 

    /* 👇 FIX 2: Parallax Image Setting */
    background: 
        linear-gradient(rgba(0, 43, 38, 0.85), rgba(0, 77, 64, 0.9)), 
        url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1920&auto=format&fit=crop');
    
    background-position: center !important;
    background-size: cover !important; 
    background-attachment: fixed !important; /* Parallax Activation */
    
    /* 👇 FIX 3: कंटेंट को हाइट के बीचों-बीच लाएँ */
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    
    color: white;
    text-align: center;
    position: relative;
    z-index: 100 !important; 
    
    /* 👇 FIX 4: बैनर को कटने से रोकें */
    overflow: visible !important; 
}

.cta-banner h2 {
    font-size: 40px; /* थोड़ा बड़ा किया */
    font-weight: 800;
    margin-bottom: 20px;
    color: #ffffff;
}
.cta-banner p {
    font-size: 20px;
    opacity: 0.9;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================
   PREMIUM ENQUIRY/CONTACT PAGE (V10 - FINAL 55/45 IMG TAG)
   ========================================= */

/* 1. Page Background and Wrapper (Same Dot Pattern) */
.enquiry-wrapper-v10 {
    background-color: #f7f9fb !important; 
    background-image: radial-gradient(#e6eaf0 1px, transparent 1px);
    background-size: 20px 20px;
    min-height: calc(100vh - 40px); 
    padding-top: 50px; 
    padding-bottom: 50px; 
    display: flex;
    align-items: center; 
    justify-content: center;
}

/* 2. Main Card Styling (Wider) */
.enquiry-main-card-v10 {
    width: 100%;
    max-width: 1300px; 
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
    background: white;
}

/* 3. FLEXBOX SPLIT CONTAINER */
.enquiry-split-container {
    display: flex;
    flex-wrap: wrap; 
}

/* LEFT PANEL - 55% */
.enquiry-image-banner-v10 {
    width: 55%; 
    flex-shrink: 0;
    min-height: 550px; 
    position: relative;
    padding: 0; /* Remove internal padding */
    display: flex; /* Ensure image fits */
}
/* 👇 FIX: Image Styling (100% size) */
.responsive-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
}

/* RIGHT PANEL - 45% */
.enquiry-right-panel-v10 {
    width: 45%; 
    flex-shrink: 0;
    background: white; 
}


/* 4. Submit Button */
.btn-enquiry-submit-v10 { 
    background: #004d40; 
    color: white; 
    border-radius: 10px; 
    padding: 14px; 
    font-weight: 700; 
    font-size: 16px; 
    border: none; 
    transition: 0.3s; 
    box-shadow: 0 5px 15px rgba(0, 77, 64, 0.4);
}
.btn-enquiry-submit-v10:hover { 
    background: #002b26 !important; 
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(0, 77, 64, 0.6); 
    color: white !important; 
}


/* 5. Mobile Fixes (Stacking) */
@media (max-width: 768px) {
    .enquiry-split-container {
        flex-direction: column; 
    }
    .enquiry-image-banner-v10, .enquiry-right-panel-v10 {
        width: 100%; 
    }
    .enquiry-wrapper-v10 {
        padding: 0;
        align-items: flex-start;
    }
    .enquiry-main-card-v10 {
        border-radius: 0;
        box-shadow: none;
        margin: 0;
    }
    .enquiry-image-banner-v10 {
        min-height: 150px;
    }
    .enquiry-right-panel-v10 {
        padding: 30px !important;
    }
}

/* =========================================
   SECTION 12: WHATSAPP ENQUIRY BUTTON
   ========================================= */

.btn-whatsapp-enquiry {
    background: #25D366; /* WhatsApp Green */
    color: white;
    border-radius: 10px;
    padding: 14px; 
    font-weight: 700;
    font-size: 16px;
    border: none;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp-enquiry:hover {
    background: #1DA851 !important; /* Darker Green on Hover */
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.6);
    color: white !important;
}

/* Ensure the submit button doesn't clash with the new CTA */
.btn-enquiry-submit-v10 {
    /* Existing style: Add a slight margin-bottom if needed */
    margin-bottom: 5px; 
}



/* =========================================
   SECTION 12: SERVICES PAGE LAYOUT (V3 - FULL WIDTH CATEGORIZED)
   ========================================= */

/* 1. Page Body and Hero Section */
.services-page-body-v3 {
    background-color: #f7f9fb !important; /* Light base background */
    min-height: 100vh;
}
.services-hero-v3 {
    /* Premium Dark Teal Gradient Background */
    background: linear-gradient(135deg, #004d40 0%, #002b26 100%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    /* Set min-height to give it a hero feel */
    min-height: 300px;
    display: flex;
    align-items: center;
}
.services-hero-v3 .text-white-75 {
    color: rgba(255, 255, 255, 0.85);
}

/* Search Bar Styling (Reusing premium form styles) */
.services-search-bar-v3 .form-control {
    border: none !important;
    border-radius: 8px 0 0 8px !important;
    font-weight: 500 !important;
    height: 55px;
}
.btn-search-teal-v3 {
    background: #ffeb3b; /* Yellow accent */
    color: #004d40;
    font-weight: 700;
    border: none;
    border-radius: 0 8px 8px 0 !important;
    transition: 0.2s;
    padding: 0 25px;
}
.btn-search-teal-v3:hover {
    background: #ffc107;
    color: #002b26;
}


/* 2. Content Structure */
.category-heading-v3 {
    font-weight: 700;
    color: #004d40;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-top: 20px;
}


/* 3. Service Card V3 */
.service-card-v3 {
    background: white;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    height: 100%;
}
.service-card-v3:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: #009688; /* Teal border on hover */
}

/* Icon Circle Styling (The colorful dot) */
.card-icon-circle-v3 {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: white; /* Default white icon */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

/* Dynamic Card Colors based on data-color attribute */
.service-card-v3[data-color="#004d40"] .card-icon-circle-v3 { background: #004d40; }
.service-card-v3[data-color="#ffeb3b"] .card-icon-circle-v3 { background: #ffeb3b; color: #004d40; } 
.service-card-v3[data-color="#2196f3"] .card-icon-circle-v3 { background: #2196f3; }
.service-card-v3[data-color="#f57c00"] .card-icon-circle-v3 { background: #f57c00; }
.service-card-v3[data-color="#009688"] .card-icon-circle-v3 { background: #009688; }
.service-card-v3[data-color="#e91e63"] .card-icon-circle-v3 { background: #e91e63; }
.service-card-v3[data-color="#4caf50"] .card-icon-circle-v3 { background: #4caf50; }

.service-card-v3 .card-title {
    font-size: 18px;
    color: #004d40;
}
.service-card-v3 .card-text-sm {
    font-size: 14px;
    color: #6c757d;
    min-height: 40px; /* Ensure consistent text height */
}
.service-link-v3 {
    display: block;
    margin-top: 10px;
    color: #009688;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.2s;
}
.service-link-v3:hover {
    color: #004d40;
}