/* ==========================================
   विनायक एंटरप्रायझेस - मास्टर CSS (१००% करेक्ट)
   ========================================== */

:root {
    --primary-blue: #0d47a1;
    --primary-dark: #0a2540;
    --primary-orange: #ff9800;
    --hover-orange: #e65100;
    --accent-yellow: #ffcc00;
    --bg-light: #f4f6f9;
    --text-dark: #333333;
    --white: #ffffff;
}

/* 📱 मोबाईल व्ह्यू आणि बॉक्स-साईझिंग फिक्स करण्यासाठी */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
    font-family: 'Poppins', 'Mukta', sans-serif;
}

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100%;
}

img, iframe, table {
    max-width: 100% !important;
    height: auto;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

/* 📞 १. गव्हर्नमेंट-स्टाईल हेडर स्ट्रक्चर */
.gov-header-wrapper {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10000;
}

/* टॉप माहिती पट्टी */
.top-info-bar {
    background: var(--primary-dark);
    color: #ffffff;
    padding: 6px 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.top-info-left, .top-info-right {
    display: flex;
    gap: 15px;
}

/* मुख्य ब्रँडिंग बार (पांढरी पट्टी) */
.main-branding-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 4% !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
}

.brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.brand-logo-img {
    width: 65px !important;
    height: 65px !important;
    object-fit: contain;
}

.brand-titles h1 {
    font-size: 22px !important;
    margin: 0 !important;
    color: var(--primary-blue) !important;
    font-weight: 700;
    line-height: 1.2 !important;
}

.brand-titles p {
    font-size: 12px !important;
    margin: 2px 0 0 0 !important;
    color: #e65100 !important;
    font-weight: 600 !important;
}

/* उजवीकडील भाषा निवड + सर्च बार */
.header-tools-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 999999 !important;
}

.lang-selector select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.header-search-box {
    display: flex;
    align-items: center;
    position: relative !important;
    z-index: 999999 !important;
}

.header-search-box input {
    width: 170px !important;
    padding: 7px 12px !important;
    border: 1px solid #0d47a1 !important;
    border-radius: 20px 0 0 20px !important;
    outline: none !important;
    font-size: 13px !important;
}

.header-search-box button {
    background: var(--primary-blue) !important;
    color: #ffffff !important;
    border: 1px solid #0d47a1 !important;
    padding: 7px 12px !important;
    border-radius: 0 20px 20px 0 !important;
    cursor: pointer !important;
}

/* 💥 सर्च ऑटो-सजेस्ट ड्रॉपडाऊन (High Priority Layer) */
.search-dropdown-box {
    position: absolute !important;
    top: 105% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 2px solid var(--primary-blue) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    z-index: 9999999 !important;
    display: none;
    max-height: 250px !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.search-dropdown-box ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.search-dropdown-box li {
    padding: 10px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 13px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    text-align: left !important;
    background: #ffffff !important;
}

.search-dropdown-box li:hover {
    background: var(--primary-blue) !important;
    color: #ffffff !important;
}

/* 💙 मुख्य नेव्हिगेशन मेनू (पूर्ण रुंदीची डार्क निळी पट्टी) */
.gov-nav-bar {
    width: 100% !important;
    background: var(--primary-blue) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 4% !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.nav-links {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 15px !important;
}

.nav-links a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    padding: 12px 10px !important;
    display: inline-block !important;
    font-size: 14px !important;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--accent-yellow) !important;
}

.nav-wa-btn {
    background: #25d366;
    color: #ffffff !important;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

/* 💥 ३. वेल्कम हिरो सेक्शन (Welcome Banner) */
.welcome-hero-section {
    position: relative;
    background: linear-gradient(rgba(10, 37, 64, 0.88), rgba(13, 71, 161, 0.88)), 
                url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
    color: #ffffff;
    padding: 60px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.hero-content {
    max-width: 950px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #ffffff;
    line-height: 1.3;
}

.hero-description {
    font-size: 15px;
    line-height: 1.7;
    color: #e2e8f0;
    margin-bottom: 15px;
    text-align: justify;
    text-align-last: center;
}

.hero-subtext {
    font-size: 13px;
    color: #ffcc00;
    margin-bottom: 25px;
    font-weight: 500;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.primary-btn {
    background: #ff9800 !important;
    color: white !important;
    border: none;
}

/* 💳 ४. सर्व्हिस लेआऊट आणि ग्रिड */
.categorized-services, .services-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.cat-grid, .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

/* 💥 ५. कार्ड्स दृश्यमान ठेवणे */
.cat-card, .card, .service-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    border-top: 5px solid var(--primary-blue);
    opacity: 1 !important;
    transform: translateY(0) !important;
}/* ==========================================
   विनायक एंटरप्रायझेस - मास्टर CSS (१००% करेक्ट)
   ========================================== */

:root {
    --primary-blue: #0d47a1;
    --primary-dark: #0a2540;
    --primary-orange: #ff9800;
    --hover-orange: #e65100;
    --accent-yellow: #ffcc00;
    --bg-light: #f4f6f9;
    --text-dark: #333333;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Mukta', sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

/* 📞 १. गव्हर्नमेंट-स्टाईल हेडर स्ट्रक्चर */
.gov-header-wrapper {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10000;
}

/* टॉप माहिती पट्टी */
.top-info-bar {
    background: var(--primary-dark);
    color: #ffffff;
    padding: 6px 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.top-info-left, .top-info-right {
    display: flex;
    gap: 15px;
}

/* मुख्य ब्रँडिंग बार (पांढरी पट्टी) */
.main-branding-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 4% !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
}

.brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.brand-logo-img {
    width: 65px !important;
    height: 65px !important;
    object-fit: contain;
}

.brand-titles h1 {
    font-size: 22px !important;
    margin: 0 !important;
    color: var(--primary-blue) !important;
    font-weight: 700;
    line-height: 1.2 !important;
}

.brand-titles p {
    font-size: 12px !important;
    margin: 2px 0 0 0 !important;
    color: #e65100 !important;
    font-weight: 600 !important;
}

/* उजवीकडील भाषा निवड + सर्च बार */
.header-tools-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 999999 !important;
}

.lang-selector select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.header-search-box {
    display: flex;
    align-items: center;
    position: relative !important;
    z-index: 999999 !important;
}

.header-search-box input {
    width: 170px !important;
    padding: 7px 12px !important;
    border: 1px solid #0d47a1 !important;
    border-radius: 20px 0 0 20px !important;
    outline: none !important;
    font-size: 13px !important;
}

.header-search-box button {
    background: var(--primary-blue) !important;
    color: #ffffff !important;
    border: 1px solid #0d47a1 !important;
    padding: 7px 12px !important;
    border-radius: 0 20px 20px 0 !important;
    cursor: pointer !important;
}

/* 💥 सर्च ऑटो-सजेस्ट ड्रॉपडाऊन (High Priority Layer) */
.search-dropdown-box {
    position: absolute !important;
    top: 105% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 2px solid var(--primary-blue) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    z-index: 9999999 !important;
    display: none;
    max-height: 250px !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.search-dropdown-box ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.search-dropdown-box li {
    padding: 10px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 13px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    text-align: left !important;
    background: #ffffff !important;
}

.search-dropdown-box li:hover {
    background: var(--primary-blue) !important;
    color: #ffffff !important;
}

/* 💙 मुख्य नेव्हिगेशन मेनू (पूर्ण रुंदीची डार्क निळी पट्टी) */
.gov-nav-bar {
    width: 100% !important;
    background: var(--primary-blue) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 4% !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.nav-links {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 15px !important;
}

.nav-links a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    padding: 12px 10px !important;
    display: inline-block !important;
    font-size: 14px !important;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--accent-yellow) !important;
}

.nav-wa-btn {
    background: #25d366;
    color: #ffffff !important;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

/* 💥 ३. वेल्कम हिरो सेक्शन (Welcome Banner) */
.welcome-hero-section {
    position: relative;
    background: linear-gradient(rgba(10, 37, 64, 0.88), rgba(13, 71, 161, 0.88)), 
                url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
    color: #ffffff;
    padding: 60px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.hero-content {
    max-width: 950px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #ffffff;
    line-height: 1.3;
}

.hero-description {
    font-size: 15px;
    line-height: 1.7;
    color: #e2e8f0;
    margin-bottom: 15px;
    text-align: justify;
    text-align-last: center;
}

.hero-subtext {
    font-size: 13px;
    color: #ffcc00;
    margin-bottom: 25px;
    font-weight: 500;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.primary-btn {
    background: #ff9800 !important;
    color: white !important;
    border: none;
}

/* 💳 ४. सर्व्हिस लेआऊट आणि ग्रिड */
.categorized-services, .services-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.cat-grid, .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

/* 💥 ५. कार्ड्स दृश्यमान ठेवणे */
.cat-card, .card, .service-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    border-top: 5px solid var(--primary-blue);
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* स्क्रोल इफेक्टसाठी */
.cat-card.fade-init, .card.fade-init, .service-card.fade-init {
    opacity: 0;
    transform: translateY(30px);
}

.cat-card.show, .card.show, .service-card.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.cat-card:hover, .card:hover, .service-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    border-color: #0d47a1;
}

.card-header-tag {
    background: #e3f2fd;
    color: #0d47a1;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
    width: fit-content;
}

.card-icon, .cat-icon {
    font-size: 38px;
    margin-bottom: 12px;
    display: inline-block;
}

.card h3, .cat-card h4, .service-card h3 {
    font-size: 18px;
    color: #111;
    margin-bottom: 10px;
    font-weight: 600;
}

.card p, .cat-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* 📄 आवश्यक कागदपत्रे बॉक्स */
.doc-box {
    background: #f8fafc;
    border-left: 4px solid #0d47a1;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 0 8px 8px 0;
    text-align: left;
}

.doc-box h4 {
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 8px;
    font-weight: bold;
}

.doc-box ul {
    padding-left: 18px;
    margin: 0;
}

.doc-box li {
    font-size: 13px;
    color: #475569;
    margin-bottom: 5px;
    line-height: 1.4;
}

/* 🟢 कार्ड बटणे */
.card-btn, .cat-btn, .apply-service-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #25d366; /* WhatsApp Green */
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    margin-top: auto;
    transition: background 0.3s ease;
}

.card-btn:hover, .cat-btn:hover, .apply-service-btn:hover {
    background-color: #1ebc57;
}

/* 💥 ६. नोकरभरती तक्ता डिझाईन (Recruitment Table) */
.recruitment-section {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin: 30px auto;
    max-width: 1100px;
}

.recruitment-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.recruitment-table th {
    background-color: #0d47a1 !important;
    color: #ffffff !important;
    padding: 14px 15px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
}

.recruitment-table td {
    padding: 14px 15px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    color: #333;
    vertical-align: middle;
}

.recruitment-table tr:hover {
    background-color: #f8f9fa;
}

.info-btn {
    background-color: #0288d1 !important;
    color: #ffffff !important;
    border: none;
    padding: 8px 14px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.3s;
}

.info-btn:hover {
    background-color: #01579b !important;
}

/* 💥 ७. फुटर डिझाईन (Footer) */
.main-footer {
    background-color: #121619 !important;
    color: #e0e0e0 !important;
    padding: 50px 20px 20px 20px;
    margin-top: 60px;
    font-family: 'Poppins', sans-serif;
    clear: both;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1.2fr;
    gap: 40px;
}

.footer-col h4 {
    color: #ffffff !important;
    font-size: 18px;
    margin-bottom: 20px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.footer-logo img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
}

.footer-logo h3 {
    color: #ffffff !important;
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
}

.footer-logo p {
    color: #999 !important;
    font-size: 12px;
    margin: 0;
}

.footer-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #aaa !important;
}

.links-col ul {
    list-style: none;
    padding: 0;
}

.links-col ul li {
    margin-bottom: 10px;
}

.links-col ul li a {
    color: #bbb !important;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.links-col ul li a:hover {
    color: #ff6f00 !important;
}

.address-text {
    font-size: 13px;
    line-height: 1.6;
    color: #bbb !important;
    margin-bottom: 15px;
}

.map-box {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #333;
}

.footer-bottom {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 30px auto 0 auto !important;
    padding-top: 20px !important;
    border-top: 1px solid #222222 !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #888888 !important;
    clear: both !important;
    display: block !important;
}

/* 📱 ८. मोबाईल व्ह्यू रेस्पॉन्सिव्ह फिक्स */
@media (max-width: 800px) {
    .header, .main-header { flex-direction: column; gap: 12px; text-align: center; }
    .nav-links { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .footer-container { grid-template-columns: 1fr; gap: 30px; }
    .welcome-hero-section { padding: 40px 15px; }
    .hero-content h1 { font-size: 22px; }
    .hero-description { font-size: 14px; }
    .recruitment-table { display: block; overflow-x: auto; }
}

/* 💥 कॅटेगरी सेव्हन Styling (Modern & Clean) */
.categorized-services {
    padding: 50px 20px;
    background-color: #f8fafc;
}

.categorized-services .container {
    max-width: 1200px;
    margin: 0 auto;
}

.main-title {
    text-align: center;
    color: #0d47a1;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 5px;
}

.main-sub {
    text-align: center;
    color: #64748b;
    margin-bottom: 40px;
    font-size: 15px;
}

.category-block {
    margin-bottom: 40px;
}

.cat-heading {
    color: #e65100; /* ऑरेंज हेडिंग */
    font-size: 20px;
    border-bottom: 2px solid #ffe0b2;
    padding-bottom: 8px;
    margin-bottom: 20px;
    font-weight: bold;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.cat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: #0d47a1;
}

.cat-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.cat-card h4 {
    color: #0f172a;
    font-size: 17px;
    margin: 0 0 8px 0;
    font-weight: bold;
}

.cat-card p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.cat-btn {
    display: inline-block;
    background: #25d366;
    color: white;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    transition: background 0.3s ease;
}

.cat-btn:hover {
    background: #1ebc57;
}

/* 💥 मराठी कॅटेगरी सेव्हन Styling */
.categorized-services {
    padding: 50px 20px;
    background-color: #f8fafc;
}

.categorized-services .container {
    max-width: 1200px;
    margin: 0 auto;
}

.main-title {
    text-align: center;
    color: #0d47a1;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 5px;
}

.main-sub {
    text-align: center;
    color: #64748b;
    margin-bottom: 40px;
    font-size: 15px;
}

.category-block {
    margin-bottom: 40px;
}

.cat-heading {
    color: #e65100; /* आकर्षक ऑरेंज शीर्षक */
    font-size: 20px;
    border-bottom: 2px solid #ffe0b2;
    padding-bottom: 8px;
    margin-bottom: 20px;
    font-weight: bold;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.cat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: #0d47a1;
}

.cat-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.cat-card h4 {
    color: #0f172a;
    font-size: 17px;
    margin: 0 0 8px 0;
    font-weight: bold;
}

.cat-card p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.cat-btn {
    display: inline-block;
    background: #e48820;
    color: white;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    transition: background 0.3s ease;
}

.cat-btn:hover {
    background: #1ebc57;
}


/* 💥 Scroll Fade In/Out Effect */
.cat-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* जेव्हा स्क्रोल होईल तेव्हा visible होईल */
.cat-card.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 💥 Whitescreen कायमचा फिक्स */
.cat-card, .card, .service-card {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ==========================================
   💥 बॅकग्राउंड व कार्ड्स आकर्षक करण्याचा फिक्स
   ========================================== */

/* १. संपूर्ण बॅकग्राउंडला हलका प्रिमियम शेड */
body {
    background: linear-gradient(180deg, #f0f4f8 0%, #e2e8f0 100%) !important;
}

.categorized-services {
    background: transparent !important;
}

/* २. कॅटेगरीच्या हेडर्सना आकर्षक लुक */
.cat-heading {
    background: #ffffff;
    color: #0d47a1 !important;
    padding: 12px 20px;
    border-radius: 8px;
    border-left: 6px solid #ff6f00;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
}

/* ३. कार्ड्सचा लुक आणि बॅकग्राउंड कॉन्ट्रास्ट फिक्स */
.cat-card, .card, .service-card {
    background: #ffffff !important;
    border: 1px solid #dbe2ef !important;
    border-radius: 14px !important;
    padding: 24px 20px !important;
    box-shadow: 0 5px 15px rgba(13, 71, 161, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

/* वरची रंगीत पट्टी */
.cat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #0d47a1, #1e88e5);
}

.cat-card:nth-child(even)::before {
    background: linear-gradient(90deg, #ff6f00, #ff9800);
}

/* ४. कार्डवर माऊस नेल्यावर (Hover) हवेत तरंगणारा इफेक्ट */
.cat-card:hover, .card:hover, .service-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 28px rgba(13, 71, 161, 0.18) !important;
    border-color: #0d47a1 !important;
}

/* ५. आयकॉनचा बॅकग्राउंड गोल बॉक्स */
.cat-icon {
    background: #eef4ff;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    margin: 0 auto 15px auto;
    font-size: 35px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

/* ६. कार्डमधील मजकूर व बटणे */
.cat-card h4 {
    color: #0a2540 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.cat-card p {
    color: #556980 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}

/* ==========================================
   💥 प्रिमियम मॉडेल पॉप-अप (Modal Popup Styling)
   ========================================== */

.modal-overlay {
    display: none; /* सुरुवातीला लपलेले राहील */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 25, 47, 0.7);
    backdrop-filter: blur(4px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
    animation: fadeInModal 0.3s ease-out;
}

.modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 450px;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    position: relative;
    border-top: 6px solid #0d47a1;
}

.close-modal-btn {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 28px;
    font-weight: bold;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: #e65100;
}

.modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.modal-service-icon {
    font-size: 45px;
    display: block;
    margin-bottom: 8px;
}

.modal-header h3 {
    color: #0d47a1;
    font-size: 20px;
    font-weight: bold;
}

.modal-body {
    background: #f8fafc;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid #ff6f00;
    margin-bottom: 20px;
}

.modal-body h4 {
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 10px;
}

.modal-body ul {
    padding-left: 20px;
    margin: 0;
}

.modal-body li {
    font-size: 13.5px;
    color: #475569;
    margin-bottom: 6px;
    line-height: 1.5;
}

.modal-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-btn {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
}

.modal-btn:hover {
    transform: translateY(-2px);
}

.wa-btn {
    background: #25d366;
    color: #ffffff;
}

.call-btn {
    background: #0d47a1;
    color: #ffffff;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* 💥 पॉप-अप (Modal Overlay) Styling */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 25, 47, 0.75);
    backdrop-filter: blur(5px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex !important;
}

.modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.3);
    position: relative;
    border-top: 6px solid #0d47a1;
}

.close-modal-btn {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 28px;
    font-weight: bold;
    color: #64748b;
    cursor: pointer;
}

.modal-header {
    text-align: center;
    margin-bottom: 15px;
}

.modal-service-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 5px;
}

.modal-header h3 {
    color: #0d47a1;
    font-size: 20px;
    font-weight: bold;
}

.modal-body {
    background: #f8fafc;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid #ff6f00;
    margin-bottom: 20px;
}

.modal-body h4 {
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 8px;
}

.modal-body ul {
    padding-left: 18px;
    margin: 0;
}

.modal-body li {
    font-size: 13.5px;
    color: #475569;
    margin-bottom: 6px;
    line-height: 1.4;
}

.modal-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-btn {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
}

.wa-btn { background: #25d366; color: #ffffff; }
.call-btn { background: #0d47a1; color: #ffffff; }

/* 💥 पॉप-अप (Modal Overlay) ५ स्टार फिक्स */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 25, 47, 0.8) !important;
    backdrop-filter: blur(5px);
    z-index: 99999 !important;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-content {
    background: #ffffff !important;
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.4);
    position: relative;
    border-top: 6px solid #0d47a1;
}

.close-modal-btn {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 30px;
    font-weight: bold;
    color: #64748b;
    cursor: pointer;
}

.modal-header {
    text-align: center;
    margin-bottom: 15px;
}

.modal-service-icon {
    font-size: 42px;
    display: block;
    margin-bottom: 5px;
}

.modal-header h3 {
    color: #0d47a1;
    font-size: 20px;
    font-weight: bold;
}

.modal-body {
    background: #f8fafc;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid #ff6f00;
    margin-bottom: 20px;
    text-align: left;
}

.modal-body h4 {
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 8px;
    font-weight: bold;
}

.modal-body ul {
    padding-left: 18px;
    margin: 0;
}

.modal-body li {
    font-size: 13.5px;
    color: #475569;
    margin-bottom: 6px;
    line-height: 1.4;
}

.modal-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-btn {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
}

.wa-btn { background: #25d366; color: #ffffff !important; }
.call-btn { background: #0d47a1; color: #ffffff !important; }

/* 💥 हेडर आणि लोगो साईझ अपडेट */
.header, .main-header {
    padding: 18px 6% !important;
}

.brand-logo-img {
    width: 65px !important;
    height: 65px !important;
}

.brand h1 {
    font-size: 25px !important;
}

/* 💥 हिरो बटन्सचा अलाईनमेंट आणि लेआऊट फिक्स */

.hero-buttons {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.hero-btn, .primary-btn, .secondary-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* आयकॉन आणि मजकुरात योग्य जागा */
    padding: 12px 26px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* 💥 मजकूर कधीही खाली घसरणार नाही */
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

/* १. ऑरेंज बटण (ऑनलाईन अर्ज / चौकशी करा) */
.primary-btn {
    background: #ff9800 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4) !important;
}

.primary-btn:hover {
    background: #e68a00 !important;
    transform: translateY(-2px) !important;
}

/* २. निळे/पारदर्शक बटण (आमचे सर्व १२ सेवा पहा) */
.secondary-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(5px) !important;
}

.secondary-btn:hover {
    background: #ffffff !important;
    color: #0d47a1 !important;
    transform: translateY(-2px) !important;
}

/* 💥 प्रिमियम व्हॉट्सॲप लाइव्ह बटण */
.header-wa-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #25d366 !important;
    color: #ffffff !important;
    padding: 10px 18px !important;
    border-radius: 25px !important;
    font-weight: bold !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35) !important;
    transition: all 0.3s ease !important;
    position: relative;
}

/* माऊस नेल्यावर Hover Effect */
.header-wa-btn:hover {
    background: #0c6b01 !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.5) !important;
}

/* ऑनलाईन हिरवा चकाकणारा डॉट (Pulse Effect) */
.online-dot {
    width: 9px;
    height: 9px;
    background-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* ==========================================
   💥 UIDAI Gov-Style Header Styling
   ========================================== */

.gov-header-wrapper {
    width: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
}

/* १. टॉप माहिती पट्टी */
.top-info-bar {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 6px 6%;
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #475569;
    font-weight: 500;
}

.top-info-left, .top-info-right {
    display: flex;
    gap: 18px;
}

/* ==========================================
   💥 हेडर लेआऊट फिक्स (परफेक्ट अलाईनमेंट)
   ========================================== */

/* १. मुख्य ब्रँडिंग बार (पांढरी पट्टी) */
.main-branding-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 4% !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important; /* काहीही खाली घसरू नये म्हणून */
}

/* डावीकडील ब्रँडिंग (लोगो + नाव) */
.brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* उजवीकडील टूल्स (भाषा + सर्च बार) */
.header-tools-right {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* २. मुख्य नेव्हिगेशन मेनू (पूर्ण रुंदीची डार्क निळी पट्टी) */
.gov-nav-bar {
    width: 100% !important;
    background: #0d47a1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 4% !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.nav-links {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px !important;
}

.nav-links a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    padding: 14px 10px !important;
    display: inline-block !important;
}

.nav-wa-btn {
    background: #037a2fd1;
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.2s;
}

.nav-wa-btn:hover {
    transform: scale(1.04);
}

/* ४. न्युज टिकर पट्टी */
.news-ticker-bar {
    background: #1e293b;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 6px 6%;
    font-size: 13px;
}

.ticker-label {
    background: #d8f5048e;
    color: #f19e31;
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: bold;
    border-radius: 3px;
    white-space: nowrap;
    margin-right: 12px;
}

/* 📱 मोबाईल रिस्पॉन्सिव्ह */
@media (max-width: 768px) {
    .top-info-bar, .brand-right-tag { display: none; }
    .main-branding-bar { padding: 10px 4%; }
    .brand-titles h1 { font-size: 20px; }
    .gov-nav-bar { overflow-x: auto; }
}

/* 💥 UIDAI हेडर फायनल पॉलिश फिक्स */

/* १. लोगो कट होणे बंद करणे व साईझ परफेक्ट करणे */
.brand-left .brand-logo-img {
    width: 75px !important;
    height: 75px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: #e16a1b !important;
    border: 2px solid #ff9800 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    padding: 2px !important;
}

/* २. मुख्य ब्रँडिंग बारची अलाईनमेंट */
.main-branding-bar {
    padding: 10px 6% !important;
    background: #ffffff !important;
}

.brand-titles h1 {
    font-size: 26px !important;
    color: #0d47a1 !important;
    font-weight: 800 !important;
}

.brand-titles p {
    font-size: 13px !important;
    color: #e65100 !important;
    font-weight: bold !important;
}

/* ३. न्युज टिकर रेड लेबल अलाईनमेंट */
.news-ticker-bar {
    background: #0f172a !important;
    padding: 6px 6% !important;
    display: flex !important;
    align-items: center !important;
}

.ticker-label {
    background: #fb2302 !important;
    color: #f4f6f4 !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    margin-right: 12px !important;
    line-height: 1 !important;
}

/* 💥 लोगो कट होणे पूर्णपणे बंद करण्याचा फिक्स */

.brand-left .brand-logo-img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important; /* 💥 इमेज मुळीच कट होणार नाही */
    border-radius: 0 !important;   /* 💥 गोल कट काढून टाकला */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* लोगोच्या बाजूचा बॉक्स नीट अलाईन करण्यासाठी */
.brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* 💥 हेडर स्टिकी/फिक्स काढण्याचा फिक्स (नॉर्मल स्क्रोलिंग) */

.gov-header-wrapper, 
.header, 
.main-header, 
.top-bar {
    position: relative !important; /* 💥 स्टिकी ऐवजी रिलेटिव्ह केले */
    top: auto !important;
    z-index: 1 !important;
}

/* एचटीएमएल आणि बॉडीचे अनपेक्षित स्क्रोल लॉक काढण्यासाठी */
html, body {
    overflow-y: auto !important;
    position: static !important;
    height: auto !important;
}

/* ==========================================
   💥 Header Right: Search Bar & Language Selector
   ========================================== */

.header-tools-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* १. भाषा सिलेक्ट ड्रॉपडाऊन */
.lang-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
}

.lang-selector select {
    border: none;
    background: transparent;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    outline: none;
    font-size: 13px;
}

/* २. सर्च बार डिझाईन */
.header-search-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #0d47a1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(13, 71, 161, 0.15);
}

.header-search-box input {
    border: none;
    padding: 7px 14px;
    font-size: 13px;
    outline: none;
    width: 170px;
    color: #1e293b;
}

.header-search-box button {
    background: #0d47a1;
    color: #ffffff;
    border: none;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.header-search-box button:hover {
    background: #002171;
}

/* 📱 मोबाईल व्ह्यू अलाईनमेंट */
@media (max-width: 768px) {
    .header-tools-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px !important;
    }
    .header-search-box input {
        width: 120px;
    }
}

/* 💥 लेआऊट ब्रेक फिक्स (Layout Breakdown Repair) */

.gov-header-wrapper {
    width: 100% !important;
    display: block !important;
    background: #ffffff !important;
}

/* १. मुख्य ब्रँडिंग बार अलाईनमेंट */
.main-branding-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 5% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

.brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* २. उजवीकडील टूल्स (सर्च + भाषा) */
.header-tools-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.header-search-box {
    display: flex !important;
    border: 1.5px solid #0d47a1 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.header-search-box input {
    border: none !important;
    padding: 6px 12px !important;
    outline: none !important;
    font-size: 13px !important;
    width: 150px !important;
}

.header-search-box button {
    background: #0d47a1 !important;
    color: white !important;
    border: none !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
}

/* ३. मुख्य नेव्हिगेशन पट्टी (Full Width Fix) */
.gov-nav-bar {
    width: 100% !important;
    background: #0d47a1 !important; /* डार्क निळा */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 5% !important;
    box-sizing: border-box !important;
}

.gov-nav-bar .nav-links {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gov-nav-bar .nav-links li a {
    display: block !important;
    padding: 12px 18px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
}

.gov-nav-bar .nav-links li a:hover {
    background: #002171 !important;
    color: #ffcc00 !important;
}

/* ==========================================
   💥 गूगल ट्रान्सलेटचे सर्व नको असलेले पॉप-अप्स आणि बॅनर गायब करणे
   ========================================== */

/* १. सर्वात वरचा मोठा ट्रान्सलेट बॅनर (Google Top Banner) पूर्ण लपवणे */
.goog-te-banner-frame, 
.skiptranslate,
iframe.skiptranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

/* २. ब्राऊझरला वर ढकलण्यापासून रोखणे */
body {
    top: 0px !important;
    position: static !important;
}

/* ३. माऊस नेल्यावर येणारा पांढरा ट्रान्सलेट पॉप-अप (Original Text Pop-up) कायमचा बंद */
#goog-gt-tt, 
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
    visibility: hidden !important;
}

/* ४. मजकुरावर (Text) येणारा पांढरा हायलाईट / बॅकग्राउंड घालवणे */
.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 💥 सर्च केलेल्या कार्डचा प्रिमियम हायलाइट इफेक्ट */
.search-highlighted {
    border: 3px solid #0d47a1 !important; /* डार्क ब्लू बॉर्डर */
    box-shadow: 0 0 20px rgba(13, 71, 161, 0.6) !important; /* निळा ग्लो */
    transform: scale(1.03) !important; /* कार्ड थोडे मोठे दिसेल */
    transition: all 0.4s ease-in-out !important;
}
/* ==========================================
   💥 सर्च ड्रॉपडाऊन लिस्ट स्टाईल (UIDAI Style)
   ========================================== */

.search-dropdown-box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    max-height: 250px;
    overflow-y: auto;
    display: none; /* सुरुवातीला लपवलेला */
}

.search-dropdown-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-dropdown-box li {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px;
    color: #1e293b;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.search-dropdown-box li:hover {
    background: #e2e8f0;
    color: #0d47a1;
    font-weight: 600;
}

.search-dropdown-box li:last-child {
    border-bottom: none;
}
/* 💥 सर्च ड्रॉपडाऊन प्रिमियम स्टाईल */
.search-dropdown-box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    display: none;
    max-height: 280px;
    overflow-y: auto;
}

.search-dropdown-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-dropdown-box li {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.search-dropdown-box li:hover {
    background: #0d47a1;
    color: #ffffff;
}
/* 💥 सर्च ड्रॉपडाऊन प्रिमियम स्टाईल */
.search-dropdown-box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    display: none;
    max-height: 280px;
    overflow-y: auto;
}

.search-dropdown-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-dropdown-box li {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.search-dropdown-box li:hover {
    background: #0d47a1;
    color: #ffffff;
}
/* 💥 सर्च ड्रॉपडाऊन प्रिमियम लुक */
.search-dropdown-box {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 1.5px solid #0d47a1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    z-index: 999999 !important;
    display: none;
    max-height: 250px !important;
    overflow-y: auto !important;
}

.search-dropdown-box li:hover {
    background: #0d47a1 !important;
    color: #ffffff !important;
}
/* 💥 Header Layout Repair */
.main-branding-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 5% !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.header-tools-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.gov-nav-bar {
    width: 100% !important;
    background: #0d47a1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 5% !important;
    box-sizing: border-box !important;
    clear: both !important;
}
.search-dropdown-box {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 1.5px solid #0d47a1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    z-index: 999999 !important;
    display: none;
    max-height: 250px !important;
    overflow-y: auto !important;
}

.search-dropdown-box li:hover {
    background: #0d47a1 !important;
    color: #ffffff !important;
}
/* ==========================================
   💥 सर्च ड्रॉपडाऊन १००% वर आणणारा CSS (Google Translate Friendly)
   ========================================== */

.header-search-box {
    position: relative !important;
    z-index: 999999 !important;
}

.search-dropdown-box {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 2px solid #0d47a1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    z-index: 9999999 !important;
    display: none;
    max-height: 250px !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.search-dropdown-box ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.search-dropdown-box li {
    padding: 12px 15px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    text-align: left !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.search-dropdown-box li:hover {
    background: #0d47a1 !important;
    color: #ffffff !important;
}
/* ==========================================
   💥 सर्च ड्रॉपडाऊन १००% समोर आणणारा कोड
   ========================================== */

.header-search-box {
    position: relative !important;
    z-index: 999999 !important;
}

.search-dropdown-box {
    position: absolute !important;
    top: 105% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 2px solid #0d47a1 !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
    z-index: 9999999 !important;
    display: none;
    max-height: 260px !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.search-dropdown-box ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.search-dropdown-box li {
    padding: 12px 15px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    text-align: left !important;
    background: #ffffff !important;
}

.search-dropdown-box li:hover {
    background: #0d47a1 !important;
    color: #ffffff !important;
}
/* 💥 ड्रॉपडाऊन बॅनरच्या वर दिसण्यासाठी */
.header-search-box {
    position: relative !important;
    z-index: 9999999 !important;
}

.search-dropdown-box {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 2px solid #0d47a1 !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    z-index: 99999999 !important;
    display: none;
    max-height: 250px !important;
    overflow-y: auto !important;
}

.search-dropdown-box li:hover {
    background: #0d47a1 !important;
    color: #ffffff !important;
}
/* 💥 हेडर आणि नेव्हिगेशन पट्टी सेपरेट करणारा CSS */
.gov-header-wrapper {
    width: 100% !important;
    background: #ffffff !important;
}

.main-branding-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 4% !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.gov-nav-bar {
    width: 100% !important;
    background: #0d47a1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 4% !important;
    box-sizing: border-box !important;
    clear: both !important;
}
/* ==========================================
   💥 गूगल ट्रान्सलेट पट्टी लपवून लेआऊट नीट करणारा CSS
   ========================================== */

/* गूगल ट्रान्सलेटचा ओरिजनल बॉक्स पूर्ण लपवणे */
#google_translate_element, 
.goog-te-banner-frame, 
.skiptranslate {
    display: none !important;
}

body {
    top: 0px !important;
}

/* हेडर लेआऊट फिक्स */
.main-branding-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 4% !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.header-tools-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.gov-nav-bar {
    width: 100% !important;
    background: #0d47a1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 4% !important;
    box-sizing: border-box !important;
    clear: both !important;
}
/* ==========================================
   💥 क्लीन हेडर व सर्च बार CSS
   ========================================== */

.gov-header-wrapper {
    width: 100% !important;
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
}

.main-branding-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 5% !important;
    background: #ffffff !important;
}

.brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* सर्च बारची नवीन डिझाईन */
.header-search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.header-search-box input {
    width: 220px !important;
    padding: 8px 14px !important;
    border: 2px solid #0d47a1 !important;
    border-radius: 25px 0 0 25px !important;
    outline: none !important;
    font-size: 14px !important;
}

.header-search-box button {
    background: #0d47a1 !important;
    color: #ffffff !important;
    border: 2px solid #0d47a1 !important;
    padding: 8px 15px !important;
    border-radius: 0 25px 25px 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

/* 💥 ड्रॉपडाऊन अगदी सर्च बॉक्सच्या खाली */
.search-dropdown-box {
    position: absolute !important;
    top: 110% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 2px solid #0d47a1 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    z-index: 999999 !important;
    display: none;
    max-height: 250px !important;
    overflow-y: auto !important;
}

.search-dropdown-box ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.search-dropdown-box li {
    padding: 12px 15px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    text-align: left !important;
}

.search-dropdown-box li:hover {
    background: #0d47a1 !important;
    color: #ffffff !important;
}

/* नेव्हिगेशन पट्टी */
.gov-nav-bar {
    width: 100% !important;
    background: #0d47a1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 5% !important;
}
/* 💥 ड्रॉपडाऊन दृश्यमान करण्यासाठी हाय-प्रायॉरिटी CSS */
.header-search-box {
    position: relative !important;
    z-index: 9999999 !important;
}

.search-dropdown-box {
    position: absolute !important;
    top: 105% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 2px solid #0d47a1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    z-index: 99999999 !important;
    display: none;
    max-height: 250px !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.search-dropdown-box li:hover {
    background: #0d47a1 !important;
    color: #ffffff !important;
}
/* ==========================================
   💥 ड्रॉपडाऊन बॅनरच्या वर आणणारा सुपर CSS
   ========================================== */

.header-search-box {
    position: relative !important;
    z-index: 9999999 !important;
}

.search-dropdown-box {
    position: absolute !important;
    top: 110% !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 250px !important;
    background: #ffffff !important;
    border: 2px solid #0d47a1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    z-index: 99999999 !important;
    display: none;
    max-height: 250px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.search-dropdown-box ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

.search-dropdown-box li {
    padding: 12px 15px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    text-align: left !important;
    background: #ffffff !important;
    font-weight: 600 !important;
}

.search-dropdown-box li:hover {
    background: #0d47a1 !important;
    color: #ffffff !important;
}
/* ==========================================
   💥 हेडर लेआऊट आणि सर्च ड्रॉपडाऊन फिक्स
   ========================================== */

.gov-header-wrapper {
    width: 100% !important;
    background: #ffffff !important;
}

.main-branding-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 4% !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.header-tools-right {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 9999999 !important;
}

.header-search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.header-search-box input {
    width: 200px !important;
    padding: 7px 12px !important;
    border: 1.5px solid #0d47a1 !important;
    border-radius: 20px 0 0 20px !important;
    outline: none !important;
    font-size: 13px !important;
}

.header-search-box button {
    background: #0d47a1 !important;
    color: #ffffff !important;
    border: 1.5px solid #0d47a1 !important;
    padding: 7px 12px !important;
    border-radius: 0 20px 20px 0 !important;
    cursor: pointer !important;
}

/* 💥 सर्च ड्रॉपडाऊन सर्व बॅनरच्या वर आणणारा कोड */
.search-dropdown-box {
    position: absolute !important;
    top: 110% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 2px solid #0d47a1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    z-index: 99999999 !important;
    display: none;
    max-height: 250px !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.search-dropdown-box ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.search-dropdown-box li {
    padding: 10px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 13px !important;
    color: #0f172a !important;
    cursor: pointer !important;
    text-align: left !important;
    background: #ffffff !important;
    font-weight: 600 !important;
}

.search-dropdown-box li:hover {
    background: #0d47a1 !important;
    color: #ffffff !important;
}

.gov-nav-bar {
    width: 100% !important;
    background: #0d47a1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 4% !important;
    box-sizing: border-box !important;
    clear: both !important;
}
.header-search-box {
    display: flex !important;
    align-items: center !important;
}

.header-search-box input {
    width: 200px !important;
    padding: 8px 12px !important;
    border: 2px solid #0d47a1 !important;
    border-radius: 20px 0 0 20px !important;
    outline: none !important;
    font-size: 13px !important;
}

.header-search-box button {
    background: #0d47a1 !important;
    color: #ffffff !important;
    border: 2px solid #0d47a1 !important;
    padding: 8px 14px !important;
    border-radius: 0 20px 20px 0 !important;
    cursor: pointer !important;
}
/* ==========================================
   💥 पॉप-अप स्क्रीनवर मध्यभागी आणणारा CSS
   ========================================== */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.75) !important;
    z-index: 99999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

.modal-content {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 15px !important;
    max-width: 480px !important;
    width: 90% !important;
    position: relative !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    z-index: 100000000 !important;
    animation: popupAnimation 0.3s ease-out forwards;
}

@keyframes popupAnimation {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 99999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.75) !important;
    z-index: 99999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.75) !important;
    z-index: 99999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}
/* ==========================================
   💥 स्क्रोल न होता स्क्रीनच्या मध्यभागी लॉक होणारा पॉप-अप
   ========================================== */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.75) !important;
    z-index: 999999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

.modal-content {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 12px !important;
    max-width: 450px !important;
    width: 90% !important;
    position: relative !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    margin: auto !important;
}
/* ==========================================
   💥 स्क्रीनच्या मध्यभागी लॉक होणारा पॉप-अप डबा
   ========================================== */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.75) !important;
    z-index: 999999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

.modal-content {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 12px !important;
    max-width: 450px !important;
    width: 90% !important;
    position: relative !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    margin: auto !important;
}
/* ==========================================
   💥 फुटर कॉपीराइट टेक्स्ट सेंटर अलाईनमेंट लॉक
   ========================================== */
.main-footer p {
    text-align: center !important;
}

.main-footer > div:last-child {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    clear: both !important;
}

.main-footer > div:last-child p {
    text-align: center !important;
    margin: 0 auto !important;
}
/* ==========================================
   💥 फुटर ३-कॉलम लेआउट आणि मॅप रिझोल्युशन फिक्स
   ========================================== */
.main-footer {
    background: #111111 !important;
    color: #ffffff !important;
    padding: 50px 0 20px 0 !important;
    width: 100% !important;
}

.footer-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: row !important; /* कॉलम्स एकाच ओळीत आणण्यासाठी */
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 30px !important;
}

.footer-col {
    flex: 1 !important;
    min-width: 280px !important;
    text-align: left !important;
}

.footer-col h4 {
    color: #ffffff !important;
    margin-bottom: 15px !important;
    font-size: 1.1rem !important;
    border-bottom: 2px solid #0d47a1 !important;
    display: inline-block !important;
    padding-bottom: 5px !important;
}

.footer-col .nav-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-col .nav-links li {
    margin-bottom: 8px !important;
}

.footer-col .nav-links a {
    color: #bbbbbb !important;
    text-decoration: none !important;
}

/* मॅप बॉक्स कंट्रोल */
.map-box {
    width: 100% !important;
    max-width: 340px !important; /* मॅप उभा पसरू नये म्हणून */
    margin-top: 15px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;
}

.map-box iframe {
    width: 100% !important;
    height: 130px !important;
    display: block !important;
}

/* मोबाईल व्ह्यू साठी responsive */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column !important;
    }
}
/* फुटर कंटेनर फिक्स */
.footer-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

.footer-col {
    flex: 1 !important;
    min-width: 300px !important;
}

/* मॅप फिक्स */
.map-box {
    width: 100% !important;
    max-width: 350px !important;
    margin-top: 10px !important;
}

.map-box iframe {
    width: 100% !important;
    height: 150px !important;
}
/* ==========================================
   💥 फुटर ओव्हरलॅप फिक्स (लिंक्स उभ्या करण्यासाठी)
   ========================================== */
footer .footer-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* कॉलम्सची साईज */
footer .footer-col {
    flex: 1 !important;
    min-width: 250px !important;
}

/* 💥 महत्त्वाचे: लिंक्स उभ्या एकाखाली एक आणण्यासाठी */
footer .footer-col ul.nav-links,
footer .links-col ul {
    display: flex !important;
    flex-direction: column !important; /* आडवं न होता उभं करण्यासाठी */
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-start !important;
}

footer .footer-col ul.nav-links li,
footer .links-col ul li {
    display: block !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    text-align: left !important;
}

footer .footer-col ul.nav-links a,
footer .links-col ul a {
    display: inline-block !important;
    color: #bbbbbb !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
}

footer .footer-col ul.nav-links a:hover {
    color: #ffffff !important;
}

/* मॅप बॉक्स कंट्रोल */
footer .map-box {
    width: 100% !important;
    max-width: 320px !important;
    margin-top: 15px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* ==========================================
   💥 स्वतंत्र फुटर लेआउट (No Class Conflict)
   ========================================== */
.main-footer {
    background: #111111 !important;
    color: #ffffff !important;
    padding: 50px 0 20px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.f-inner-box, .footer-inner-box {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 30px !important;
}

.f-col {
    flex: 1 !important;
    min-width: 260px !important;
}

.f-logo-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
}

.f-logo-img {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
}

.f-logo-wrapper h3 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
}

.f-logo-wrapper p {
    margin: 0 !important;
    color: #aaaaaa !important;
    font-size: 0.85rem !important;
}

.f-about-text {
    color: #bbbbbb !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.f-col h4 {
    color: #ffffff !important;
    margin: 0 0 15px 0 !important;
    font-size: 1.1rem !important;
    border-bottom: 2px solid #0d47a1 !important;
    display: inline-block !important;
    padding-bottom: 5px !important;
}

/* लिंक्स उभ्या ठेवण्यासाठी */
ul.f-link-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

ul.f-link-list li {
    margin-bottom: 8px !important;
}

ul.f-link-list a {
    color: #bbbbbb !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    transition: 0.2s;
}

ul.f-link-list a:hover {
    color: #ffffff !important;
    padding-left: 5px;
}

.f-address {
    color: #bbbbbb !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin: 0 0 15px 0 !important;
}

/* मॅप कंट्रोल */
.f-map-card {
    width: 100% !important;
    max-width: 330px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;
}

.f-map-card iframe {
    width: 100% !important;
    height: 130px !important;
    border: 0 !important;
    display: block !important;
}

.f-map-card a {
    display: block !important;
    background: #4285F4 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 8px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

/* कॉपीराइट बार */
.f-copyright-bar {
    width: 100% !important;
    margin-top: 35px !important;
    padding-top: 20px !important;
    border-top: 1px solid #222222 !important;
    text-align: center !important;
}

.f-copyright-bar p {
    color: #888888 !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* मोबाईलसाठी */
@media (max-width: 768px) {
    .footer-inner-box {
        flex-direction: column !important;
    }
}
/* ==========================================
   💥 फुटर लेआउट आणि अलाईनमेंट १००% फिक्स
   ========================================== */
footer.main-footer {
    background: #111111 !important;
    color: #ffffff !important;
    padding: 45px 0 20px 0 !important;
    width: 100% !important;
}

footer .footer-inner-box {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 30px !important;
}

/* कॉलम्स अलाईनमेंट */
footer .f-col {
    flex: 1 !important;
    min-width: 250px !important;
    text-align: left !important;
}

/* १. लोगो आणि नाव एकाच लाईनमध्ये */
footer .f-logo-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

footer .f-logo-wrapper img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    margin: 0 !important;
}

footer .f-logo-wrapper div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

footer .f-logo-wrapper h3 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.15rem !important;
}

footer .f-logo-wrapper p {
    margin: 2px 0 0 0 !important;
    color: #aaaaaa !important;
    font-size: 0.85rem !important;
}

/* २. मधल्या लिंक्स अलाईनमेंट */
footer .f-links ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

footer .f-links ul li {
    margin: 0 !important;
    text-align: left !important;
}

footer .f-links ul a {
    color: #bbbbbb !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important; /* मजकूर तुटून खाली जाणार नाही */
}

/* ३. उजवीकडचा पत्ता व मॅप */
footer .f-contact p {
    color: #bbbbbb !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin: 0 0 10px 0 !important;
    text-align: left !important;
}

footer .f-map-card {
    width: 100% !important;
    max-width: 320px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

footer .f-map-card iframe {
    width: 100% !important;
    height: 125px !important;
    border: 0 !important;
    display: block !important;
}

/* मोबाईलसाठी रेस्पॉन्सिव्ह */
@media (max-width: 768px) {
    footer .footer-inner-box {
        flex-direction: column !important;
    }
}
/* डाव्या बाजूचा मजकूर स्ट्रेट अलाईन करण्यासाठी */
.f-brand, .f-brand p, .f-brand h3 {
    text-align: left !important;
}
html {
    scroll-behavior: smooth;
}

#services {
    scroll-margin-top: 100px; /* हेडरच्या मागे नाव लपू नये म्हणून */
}
.cat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.cat-card:hover {
    transform: translateY(-5px);
}
.cat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
/* 💥 सर्व कार्ड्ससाठी एकच युनिफॉर्म डिझाईन */
.cat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

.cat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid #0d47a1 !important; /* सर्व कार्ड्सना एकच सुंदर निळी बॉर्डर */
    border-radius: 12px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* बटण नेहमी तळाशी राहील */
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    min-height: 280px !important; /* 👈 सर्व कार्ड्सची उंची समान राहील */
}

/* आयकॉन आणि गोलाकार बॅकग्राउंड सर्व ठिकाणी एकसारखा */
.cat-icon {
    width: 60px !important;
    height: 60px !important;
    background: #e3f2fd !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    margin: 0 auto 12px auto !important;
}

.cat-card h4 {
    font-size: 1.05rem !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
}

.cat-card p {
    font-size: 0.82rem !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
}

/* सर्व बटन्सची डिझाईन सेम */
.cat-btn {
    background: #f97316 !important; /* सुंदर ऑरेंज बटण */
    color: #ffffff !important;
    border: none !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    width: 100% !important;
}
/* Trustindex Free Watermark / Credit Link लपवण्यासाठी */
a[href*="trustindex"],
div[class*="ti-widget"] a[target="_blank"]:not([href*="google"]),
.ti-footer,
.ti-widget-container .ti-footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
}
/* 🌟 प्रीमियम आणि मॅचिंग फुटर डिझाईन */
.main-footer, footer {
    background-color: #0a192f !important; /* प्रीमियम नेव्ही ब्लू */
    border-top: 4px solid #f97316 !important; /* ब्रँडचा ऑरेंज टॉप बॉर्डर */
    padding-top: 40px !important;
    padding-bottom: 30px !important;
    color: #ffffff !important;
}

/* फुटरमधील लिंकचा रंग */
.main-footer a, footer a {
    color: #cbd5e1 !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.main-footer a:hover, footer a:hover {
    color: #f97316 !important; /* होव्हर केल्यावर ऑरेंज */
}
/* 📱 मोबाईल हेडर फिक्स आणि पॉपअप/मोडल ओव्हरलॅप फिक्स */
@media screen and (max-width: 768px) {

    /* १. संपूर्ण पेजचे ओव्हरफ्लो बंद करणे (उजवा कट काढण्यासाठी) */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* २. हेडरमधील सर्व एलिमेंट एकाखाली एक बसवणे */
    .gov-header-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        position: relative !important;
        padding: 10px 5px !important;
    }

    /* ३. सर्च बार फक्त हेडरच्या आतच बसवणे (मोडलवर जाऊ नये म्हणून) */
    .gov-header-wrapper input,
    .gov-header-wrapper form,
    .gov-header-wrapper div[class*="search"] {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        width: 90% !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        z-index: 1 !important; /* पॉपअपच्या खाली ठेवण्यासाठी */
    }

    /* ४. पॉपअप/मोडल बॉक्स सर्च बारच्या वर जाण्यासाठी z-index फिक्स */
    div[class*="modal"], 
    div[class*="popup"], 
    .modal-content, 
    .modal {
        z-index: 99999 !important; /* पॉपअप नेहमी सर्वात वर दिसेल */
    }

    /* ५. नेव्हिगेशन मेनू (निळी पट्टी) २ कॉलममध्ये सेट करणे */
    .gov-header-wrapper nav ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 5px !important;
    }

    .gov-header-wrapper nav ul li a {
        display: block !important;
        text-align: center !important;
        font-size: 13px !important;
    }
}
/* 📱 तुमच्या मूळ HTML कोडसाठी मोबाईल व्ह्यू रिस्पॉन्सिव्ह फिक्स */
@media screen and (max-width: 768px) {

    /* १. संपूर्ण हेडर कंटेनर मोबाईल स्क्रीनच्या आत लॉक करणे */
    .gov-header-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* २. वरची माहिती पट्टी (Top Info Bar) मोबाईलवर नीट लावणे */
    .top-info-bar {
        flex-direction: column !important;
        gap: 5px !important;
        text-align: center !important;
        padding: 8px 5px !important;
        font-size: 12px !important;
    }

    .top-info-left, .top-info-right {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    /* ३. मुख्य ब्रँडिंग बार (लोगो + नाव + सर्च बार) एका खाली एक आणणे */
    .main-branding-bar {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 12px 10px !important;
        text-align: center !important;
    }

    .brand-left {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .brand-logo-img {
        height: 50px !important;
        width: auto !important;
    }

    .brand-titles h1 {
        font-size: 20px !important;
        margin: 0 !important;
    }

    .brand-titles p {
        font-size: 12px !important;
        margin: 0 !important;
    }

    /* ४. उजवीकडील सर्च बार मोबाईलवर १००% स्क्रीनमध्ये फिट करणे */
    .header-tools-right, .header-search-box {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        position: static !important;
        margin: 0 auto !important;
    }

    .header-search-box input {
        width: 80% !important;
        max-width: 250px !important;
        font-size: 13px !important;
    }

    /* ५. मुख्य नेव्हिगेशन पट्टी (निळी पट्टी) मोबाईलवर २ कॉलममध्ये लावणे */
    .gov-nav-bar {
        flex-direction: column !important;
        align-items: center !important;
        padding: 10px 5px !important;
        gap: 10px !important;
    }

    .nav-links {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* २ कॉलममध्ये सुंदर ग्रिड */
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .nav-links li {
        width: 100% !important;
        text-align: center !important;
    }

    .nav-links li a {
        display: block !important;
        padding: 8px 4px !important;
        font-size: 13px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
        text-decoration: none !important;
    }

    /* व्हॉट्सॲप बटण मोबाईलवर फुल विड्थ करणे */
    .nav-wa-btn {
        width: 90% !important;
        text-align: center !important;
        margin-top: 5px !important;
        box-sizing: border-box !important;
    }
}
/* 🌟 आधुनिक भरती कार्ड्स CSS (Modern Job Portal Design) */
.recruitment-section {
    max-width: 1100px;
    margin: 30px auto;
    padding: 20px;
}

.job-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.job-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(13, 71, 161, 0.12);
    border-color: #93c5fd;
}

/* ब्लिंक होणारे टॅग्ज (Urgent Badges) */
.badge-urgent {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #f87171;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    animation: blink 1.5s infinite;
    display: inline-block;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.badge-new {
    background: #22c55e;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 5px;
}

.job-title {
    color: #0d47a1;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 8px;
    line-height: 1.4;
}

.job-info-text {
    color: #64748b;
    font-size: 13px;
    margin-bottom: 15px;
}

.job-date-box {
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    margin-bottom: 15px;
}

.job-actions {
    display: flex;
    gap: 10px;
}

.btn-details {
    flex: 1;
    background: #0288d1;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
}

.btn-details:hover {
    background: #0277bd;
}

.btn-apply-wa {
    flex: 1;
    background: #25d366;
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-apply-wa:hover {
    background: #1eb954;
}
/* 🌟 २२ कार्ड्स ग्रिड CSS */
.recruitment-section {
    max-width: 1150px;
    margin: 30px auto;
    padding: 15px;
}

.job-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.job-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(13, 71, 161, 0.15);
    border-color: #93c5fd;
}

.job-title {
    color: #0d47a1;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 6px;
}

.job-badge-new {
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 10px;
    display: inline-block;
    margin-left: 5px;
}

.job-subtext {
    color: #64748b;
    font-size: 13px;
    margin-bottom: 12px;
}

.job-date-info {
    background: #f8fafc;
    border-left: 3px solid #0d47a1;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 15px;
}

.job-card-actions {
    display: flex;
    gap: 10px;
}

.btn-card-info {
    flex: 1;
    background: #0288d1;
    color: white;
    border: none;
    padding: 9px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
}

.btn-card-info:hover {
    background: #0277bd;
}

.btn-card-apply {
    flex: 1;
    background: #25d366;
    color: white;
    text-decoration: none;
    padding: 9px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    display: block;
}

.btn-card-apply:hover {
    background: #1eb954;
}
/* 🚫 Elfsight Badge Hide CSS */
a[href*="elfsight"],
a[class*="eapps-link"],
[class*="BadgeContainer"],
[class*="Badge__BadgeContainer"],
div[class*="WidgetTitle"],
div[class*="eapps-widget-toolbar"],
div[class*="eui-widget-title"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    top: -9999px !important;
}

/* विजेटचा खालचा भाग कट (Crop) करून बॅज लपवणे */
.elfsight-app-b66500bc-a9bc-49ea-bfc0-4512f2416516 {
    max-height: 420px !important;
    overflow: hidden !important;
}
/* 🌟 Modern Blog Page Design Improvements */

.blog-section {
    max-width: 850px;
    margin: 35px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    border-left: 6px solid #0d47a1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.blog-badge {
    background: #e0f2fe;
    color: #0288d1;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
}

.blog-section h2 {
    color: #0f172a;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
}

.blog-meta {
    color: #64748b;
    font-size: 13px;
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 12px;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.blog-subheading {
    color: #0d47a1;
    font-size: 18px;
    font-weight: 700;
    margin: 25px 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Step Cards for Easy Reading */
.step-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.step-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.step-number {
    background: #0d47a1;
    color: white;
    font-weight: bold;
    font-size: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.step-text {
    font-size: 15px;
    color: #334155;
    line-height: 1.5;
}

/* Callout Warning Box */
.warning-box {
    background: #fffbe0;
    border-left: 5px solid #f59e0b;
    padding: 15px 18px;
    border-radius: 8px;
    margin: 20px 0;
    color: #78350f;
    font-size: 14px;
}

/* Action CTA Box */
.blog-cta-card {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 25px;
}

.btn-cta-wa {
    background: #25d366;
    color: white;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transition: background 0.2s;
}

.btn-cta-wa:hover {
    background: #1eb956;
}
/* 🌟 Google Blog Style Layout */
.blog-container {
    max-width: 1000px;
    margin: 30px auto;
    padding: 0 20px;
}

/* 1. Top Hero Featured Card (पहिली मुख्य बातमी) */
.featured-post {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 40px;
    border: 1px solid #e2e8f0;
}

.featured-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f8fafc;
}

.featured-content h2 {
    font-size: 28px;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

.featured-content p {
    color: #475569;
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #0f172a;
    color: #0f172a;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    transition: all 0.2s;
}

.btn-read-more:hover {
    background: #0d47a1;
    color: white;
    border-color: #0d47a1;
}

.featured-image {
    flex: 1;
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    min-height: 250px;
}

/* Section Title */
.section-heading {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
}

/* 2. Google Style List Posts (खालचे ब्लॉक्स) */
.post-list-item {
    display: flex;
    gap: 25px;
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    align-items: center;
    transition: transform 0.2s;
}

.post-list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.post-thumb {
    width: 220px;
    height: 140px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    flex-shrink: 0;
}

.post-info {
    flex: 1;
}

.category-tag {
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 8px;
}

.post-info h3 {
    font-size: 20px;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}

.post-info p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .featured-post { flex-direction: column-reverse; }
    .post-list-item { flex-direction: column; }
    .post-thumb { width: 100%; height: 160px; }
}
<!-- 🎨 १. Style टॅगमध्ये या सुधारणा जोडा -->
<style>
    /* हेडरची योग्य मांडणी */
    .main-header {
        background: #0d47a1 !important;
        padding: 15px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    .main-header .logo-text {
        color: #ffffff !important;
        font-size: 22px;
        font-weight: 700;
    }
    .main-header .nav-links a {
        color: #ffffff !important;
        margin: 0 12px;
        text-decoration: none;
        font-weight: 600;
    }
    .main-header .nav-links a:hover {
        color: #ffcc00 !important;
    }

    /* टॅग्स ओव्हरलॅप न होण्यासाठी फ्लेक्स-रॅप */
    .card-top-tags {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap; /* ज्यामुळे टॅग्स कार्डच्या बाहेर जाणार नाहीत */
        margin-bottom: 10px;
    }
</style>

<!-- 💥 २. हेडर कोड असा ठेवा -->
<header class="main-header">
    <div class="logo">
        <span class="logo-text">विनायक एंटरप्रायझेस</span>
    </div>
    <nav class="nav-links">
        <a href="index.html">मुख्यपृष्ठ</a>
        <a href="index.html#services">सेवा</a>
        <a href="bharti.html" style="color: #ffcc00 !important;">भरती अपडेट्स</a>
        <a href="index.html#contact">संपर्क</a>
    </nav>
    <a href="https://wa.me/917498081969" class="whatsapp-btn" style="background: #25d366; color: #ffffff !important; padding: 8px 16px; border-radius: 20px; text-decoration: none; font-weight: bold; display: inline-flex; align-items: center; gap: 5px;">
        💬 व्हॉट्सॲप करा
    </a>
</header>