/* ===== Global Font Fallback ===== */ body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; } /* ===== CSS Variables ===== */ :root { --primary-green: #0E5E35; --secondary-green: #1B8952; --accent-gold: #D4AF37; --bg-light: #F7FDF9; --white: #ffffff; --text-dark: #222222; } /* ===== Footer Structure ===== */ footer { background-color: var(--primary-green); color: rgba(255, 255, 255, 0.8); text-align: center; padding: 30px 20px; font-family: 'Poppins', system-ui, sans-serif; /* Poppins tabhi chalega agar load kiya ho */ border-top: 5px solid var(--accent-gold); font-size: 14px; margin-top: auto; width: 100%; /* Ensure full width */ box-sizing: border-box; /* Padding won't break width */ } /* Container to keep content centered max-width */ footer .container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; /* Center horizontally */ justify-content: center; } /* ===== Footer Links Section ===== */ .footer-links { margin-bottom: 20px; font-size: 15px; font-weight: 500; display: flex; justify-content: center; /* Center items on Desktop */ align-items: center; flex-wrap: wrap; gap: 10px; /* Modern spacing */ } /* Links Styling */ .footer-links a { color: var(--white); text-decoration: none; padding: 0 5px; opacity: 0.9; position: relative; transition: opacity 0.3s ease, color 0.3s ease; } /* Hover Effect */ .footer-links a:hover { color: var(--accent-gold); opacity: 1; text-decoration: underline; } /* Desktop dot separators */ /* Sirf tab dikhayen jab screen 600px se bari ho */ @media (min-width: 601px) { .footer-links a:not(:last-child)::after { content: "·"; color: rgba(255, 255, 255, 0.6); margin-left: 15px; /* Dot ke liye spacing */ position: absolute; right: -10px; text-decoration: none; /* Dot underline na ho */ } } /* Text blocks / Copyright */ footer div { line-height: 1.6; } footer strong { color: var(--accent-gold); font-weight: 600; } /* Disclaimer Text */ footer .disclaimer { margin-top: 15px; font-size: 12px; opacity: 0.7; max-width: 800px; /* Readability ke liye width limit */ margin-left: auto; margin-right: auto; } /* ===== Mobile Optimizations ===== */ @media (max-width: 600px) { footer { padding: 40px 15px; /* Thoda zyada padding mobile ke liye */ } .footer-links { flex-direction: column; /* Stack vertically */ align-items: center; /* Center align items */ gap: 12px; /* Gap between links */ width: 100%; } .footer-links a { display: block; width: 100%; padding: 5px 0; /* Clickable area increase karein */ } /* Mobile par dot separator hatana zaroori hai */ .footer-links a::after { display: none; } } /* ===== Reduced motion users ===== */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } .footer-social { margin: 10px 0; } .footer-social a { color: #ffffff; margin-right: 12px; text-decoration: none; font-size: 14px; } .footer-social a:hover { text-decoration: underline; }