.about-section { padding: 4rem 2rem; max-width: 1000px; margin: 0 auto; } .about-header { text-align: center; margin-bottom: 4rem; } .about-header h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; } .about-header p { font-size: 1.2rem; color: #4B5563; max-width: 800px; margin: 0 auto; line-height: 1.6; } .about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; } .about-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-radius: 16px; padding: 2rem; box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; } .about-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.3); } .about-card h2 { font-size: 1.5rem; color: #1a1a1a; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .about-card p { color: #4B5563; line-height: 1.6; flex-grow: 1; } .social-links { display: flex; gap: 1.5rem; margin-top: 2rem; justify-content: center; } .social-link { display: flex; align-items: center; text-decoration: none; color: #6366F1; font-size: 1.1rem; padding: 0.75rem 1.5rem; border-radius: 8px; background: rgba(99, 102, 241, 0.1); transition: all 0.3s ease; } .social-link i { margin-right: 0.5rem; font-size: 1.2rem; } .social-link:hover { background: rgba(99, 102, 241, 0.2); transform: translateY(-2px); } @media (max-width: 768px) { .about-section { padding: 2rem 1rem; } .about-header h1 { font-size: 2rem; } .about-grid { grid-template-columns: 1fr; } }