/* Footer Styles - Light Blue & White Theme */ .footer { background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%); color: #1a1a1a; padding: 60px 20px 20px; margin-bottom: -30px; margin-top: 80px; border-top: 3px solid #64b5f6; box-shadow: 0 -5px 20px rgba(100, 181, 246, 0.1); } .footer-container { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); gap: 40px; padding-bottom: 40px; justify-content: center; justify-items: center; text-align: center; } .footer-section { animation: fadeInUp 0.6s ease-out; width: 100%; max-width: 340px; } .footer-section h3 { color: #1976d2; font-size: 1.4em; margin-bottom: 20px; font-weight: 700; position: relative; padding-bottom: 12px; text-align: center; } .footer-section h3::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 50px; height: 3px; background: linear-gradient(90deg, #42a5f5, #64b5f6); border-radius: 2px; } .footer-section ul { list-style: none; padding: 0; margin: 0; text-align: center; } .footer-section ul li { margin-bottom: 12px; transition: transform 0.3s ease; text-align: center; } .footer-section ul li:hover { transform: scale(1.05); } .footer-section ul li a { color: #2c3e50; text-decoration: none; font-size: 1.05em; transition: all 0.3s ease; display: inline-block; position: relative; padding: 5px 0; } .footer-section ul li a::before { content: ''; color: #42a5f5; margin-right: 0; font-size: 0.9em; transition: margin-right 0.3s ease; } .footer-section ul li a:hover { color: #1976d2; font-weight: 600; } .footer-section ul li a:hover::before { margin-right: 0; } /* Footer Bottom */ .footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 30px; border-top: 2px solid rgba(100, 181, 246, 0.3); display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; text-align: center; } .footer-logo { order: -1; width: 50px !important; height: 50px !important; } .footer-logo img { cursor: pointer; height: 50px !important; width: auto !important; max-width: none !important; max-height: none !important; min-height: 50px !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); transition: transform 0.3s ease; } .footer-logo img:hover { transform: scale(1.05); } .footer-copyright { color: #546e7a; font-size: 0.95em; order: 1; } .footer-copyright .polices { display: flex; gap: 20px; justify-content: center; margin-bottom: 10px; } .footer-copyright .polices p { margin: 0; color: black !important; } .footer-copyright .polices p a { color: black !important; } .footer-copyright .polices p a:hover { cursor: pointer; text-decoration: underline; } .footer-copyright p { color: black !important; padding: 0; margin: 0; text-align: center; } /* Animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 768px) { .footer { padding: 40px 15px 15px; margin-top: 60px; } .footer-container { gap: 15px; padding-bottom: 30px; text-align: center; } .footer-section h3 { font-size: 1.3em; text-align: center; } .footer-section h3::after { left: 50%; transform: translateX(-50%); } .footer-section ul { text-align: center; } .footer-section ul li:hover { transform: none; } .footer-bottom { flex-direction: column; gap: 15px; padding-top: 20px; text-align: center; } } @media (max-width: 480px) { .footer { padding: 30px 10px 10px; } .footer-container { grid-template-columns: 1fr; justify-content: center; justify-items: center; text-align: center; gap: 15px; padding-bottom: 20px; } .footer-section { max-width: 360px; } .footer-section h3 { font-size: 1.2em; margin-bottom: 15px; } .footer-section ul li { margin-bottom: 10px; } .footer-section ul li a { font-size: 1em; } .footer-copyright { font-size: 0.85em; } } /* Additional hover effects for better UX */ .footer-section { background: rgba(255, 255, 255, 0.5); padding: 25px; border-radius: 12px; transition: all 0.3s ease; } .footer-section:hover { background: rgba(255, 255, 255, 0.8); box-shadow: 0 5px 15px rgba(100, 181, 246, 0.2); transform: translateY(-5px); }