.social-links { position: relative; } .social-link { display: inline-flex; align-items: center; } .email-tooltip { position: absolute; background: rgba(40, 40, 40, 0.95); color: #fff; padding: 6px 16px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; box-shadow: 0 2px 12px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 10; white-space: nowrap; width: max-content; display: block; } .email-tooltip { position: absolute; left: 50%; top: -32px; transform: translateX(-50%) scale(1); background: rgba(40, 40, 40, 0.95); color: #fff; padding: 6px 16px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; box-shadow: 0 2px 12px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 10; white-space: nowrap; } .hero-details { display: flex; flex-direction: row; gap: 32px; align-items: flex-start; width: 100%; } .hero-main-column { display: flex; flex-direction: column; gap: 24px; flex: 1 1 0; min-width: 0; } .hero-card { padding: 48px; width: 100%; display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; animation: fadeInUp 0.8s ease-out; } .name { font-size: 2.5rem; font-weight: 700; margin-bottom: 8px; background: linear-gradient(135deg, var(--text-color) 0%, var(--text-color-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .description { font-size: 1.2rem; margin-bottom: 32px; color: var(--text-color-light); font-weight: 400; } .social-links { display: flex; gap: 16px; flex-wrap: wrap; } .social-link { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 900px) { .hero-details { flex-direction: column; gap: 24px; } .hero-card { grid-template-columns: 1fr; } } @media (max-width: 768px) { .hero-card { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; text-align: center; } .name { font-size: 2rem; } .description { font-size: 1.1rem; } .social-links { justify-content: center; } } @media (max-width: 480px) { .hero-card { padding: 24px 16px; } .name { font-size: 1.8rem; } .social-links { gap: 12px; } .social-link { padding: 10px 16px; font-size: 13px; } }