/* Contact & Footer Section Styles */ /* Contact Section */ .contact { background: var(--dark-light); position: relative; overflow: hidden; } .contact-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } .contact-bg-image { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.1; transition: all 0.3s ease; animation: robotMove 25s ease-in-out infinite; } .contact:hover .contact-bg-image { opacity: 0.15; transform: scale(1.02); } @keyframes robotMove { 0%, 100% { transform: translateX(0px) scale(1); } 25% { transform: translateX(10px) scale(1.005); } 50% { transform: translateX(0px) scale(1.01); } 75% { transform: translateX(-10px) scale(1.005); } } .contact .container { position: relative; z-index: 1; } .contact-content { text-align: center; max-width: 700px; margin: 0 auto; } .contact-text { margin-bottom: 3rem; } .contact-text p { font-size: 1.2rem; color: var(--gray); margin-bottom: 1rem; line-height: 1.6; } .contact-text p:last-child { color: var(--primary); font-weight: 600; } .contact-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; max-width: 600px; margin: 0 auto; } .contact-item { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--light); text-decoration: none; transition: all 0.3s ease; padding: 20px; border-radius: 15px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(99, 102, 241, 0.2); min-height: 70px; } .contact-item:hover { color: var(--light); transform: translateY(-5px); background: rgba(255, 255, 255, 0.1); border-color: var(--primary); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2); } .contact-item i { font-size: 1.2rem; color: var(--primary); width: 25px; text-align: center; } /* Specific colors for contact icons */ .contact-item .fa-github { color: #24292e; } .contact-item:hover .fa-github { color: #ffffff; background: radial-gradient(circle, #24292e 0%, #333333 100%); border-radius: 50%; padding: 5px; } .contact-item .fa-envelope { color: #ea4335; } .contact-item:hover .fa-envelope { color: #ffffff; background: radial-gradient(circle, #ea4335 0%, #d33b2c 100%); border-radius: 50%; padding: 5px; } .contact-item .fa-map-marker-alt { color: #4285f4; } .contact-item:hover .fa-map-marker-alt { color: #ffffff; background: radial-gradient(circle, #4285f4 0%, #1a73e8 100%); border-radius: 50%; padding: 5px; } /* Footer */ .footer { text-align: center; padding: 2rem 0; background: var(--dark); color: var(--gray); border-top: 1px solid rgba(99, 102, 241, 0.2); }