/* =========================================================
   FOOTER STYLES (Pro-Level Design)
   ========================================================= */
/* 1. Footer Background (100% Full Width) */
.site-footer {
    width: 96%;
    max-width: 1150px; /* फुल स्क्रीन फैलेगा */
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 60px 0 20px;
    margin: 60px auto 0px auto; /* स्क्रीन के सेंटर में और नीचे से 20px की जगह */
    margin-top: auto; /* फूटर को हमेशा नीचे धकेलने के लिए */
    font-family: 'Poppins', sans-serif;
    border-radius: 20px 20px 0 0; /* चपटा रहेगा */
    border: 1px solid #e2e8f0; /* चारो तरफ बॉर्डर */
}

/* 2. Footer Content (Max 1350px & Centered) */
.footer-container {
    width: 100%;
    max-width: 1150px; /* 🔥 कंटेंट यहीं रुक जाएगा */
    margin: 0 auto;    /* 🔥 और बिल्कुल बीच में रहेगा */
    padding: 0 20px;
    box-sizing: border-box !important;
}

/* Footer Grid Layout (4 Columns) */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* पहला कॉलम (Brand) थोड़ा चौड़ा रहेगा */
    gap: 40px;
    margin-bottom: 40px;
}

/* Footer Columns & Typography */
.footer-logo { 
    margin-bottom: 15px; 
    display: inline-flex; 
    text-decoration: none !important; 
}
.footer-desc {
    color: #475569;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
    max-width: 90%;
    transition: color 0.5s ease-in-out;
}

.footer-col h3 {
    color: #1e293b;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.5s ease-in-out;
}

/* Footer Links with Hover Effect */
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.footer-links a i { font-size: 11px; color: #cbd5e1; transition: 0.3s; }

/* Link Hover Animation */
.footer-links a:hover { color: #f97316; transform: translateX(5px); }
.footer-links a:hover i { color: #f97316; }

/* Social Icons */
.footer-socials { display: flex; gap: 12px; }
.social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}
/* Brand Colors on Hover */
.social-icon:hover { color: #ffffff; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.social-icon.whatsapp:hover { background: #25D366; box-shadow: 0 5px 15px rgba(37,211,102,0.3); }
.social-icon.telegram:hover { background: #0088cc; box-shadow: 0 5px 15px rgba(0,136,204,0.3); }
.social-icon.facebook:hover { background: #1877F2; box-shadow: 0 5px 15px rgba(24,119,242,0.3); }
.social-icon.youtube:hover { background: #FF0000; box-shadow: 0 5px 15px rgba(255,0,0,0.3); }

/* Footer Bottom Bar */
.footer-bottom {
    border-top: 1px solid #e2e8f0;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.5s ease-in-out;
}
.footer-bottom p { color: #64748b; font-size: 14px; margin: 0; transition: color 0.5s ease-in-out; }
.footer-bottom strong { color: #8b5cf6; }

/* =========================================================
   MOBILE RESPONSIVENESS (100% Fit)
   ========================================================= */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .brand-col { grid-column: span 2; } /* Brand info takes full width on tablets */
    .footer-desc { max-width: 100%; }
}

@media (max-width: 768px) {
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 550px) {
    .site-footer { padding: 40px 0 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; } /* 1 Column on small phones */
    .brand-col { grid-column: span 1; }
    .footer-col h3 { margin-bottom: 15px; }
    .footer-socials { justify-content: flex-start; }
}

/* =========================================================
   📱 FOOTER MOBILE OVERFLOW FIX (Text Cut-off Solution)
   ========================================================= */
@media (max-width: 600px) {
    .footer-container {
        padding: 0 15px !important; /* मोबाइल में साइड्स से सुरक्षित दूरी */
        overflow: hidden !important; /* किसी भी चीज़ को स्क्रीन से बाहर जाने से रोकेगा */
    }
    
    .footer-desc {
        font-size: 13px !important; /* मोबाइल के लिए फोंट थोड़ा सा छोटा किया */
        line-height: 1.6 !important;
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important; /* टेक्स्ट को ज़बरदस्ती अगली लाइन में तोड़ेगा, बाहर नहीं जाने देगा */
        padding-right: 10px !important; /* दाईं तरफ से कटने से बचाने के लिए हल्की जगह */
    }

    .footer-grid {
        gap: 25px !important; /* डिब्बों के बीच की दूरी कम की ताकि सब फिट रहे */
    }
}

/* =========================================================
   DARK MODE FOR FOOTER (Smooth Match)
   ========================================================= */
body.dark-mode .site-footer { background: #0f172a; border: 1px solid #1e293b; }
body.dark-mode .footer-col h3 { color: #f8fafc; }
body.dark-mode .footer-desc { color: #94a3b8; }
body.dark-mode .footer-links a { color: #cbd5e1; }
body.dark-mode .footer-links a i { color: #475569; }
body.dark-mode .footer-links a:hover { color: #f97316; }
body.dark-mode .footer-links a:hover i { color: #f97316; }

/* Dark mode Social Icons */
body.dark-mode .social-icon { background: #1e293b; color: #cbd5e1; }
body.dark-mode .social-icon:hover { color: #ffffff; }

/* Dark mode Bottom Bar */
body.dark-mode .footer-bottom { border-top-color: #1e293b; }
body.dark-mode .footer-bottom p { color: #94a3b8; }