.section-header { margin-bottom: 2rem; text-align: center; .back-link { position: absolute; left: 2rem; top: 2rem; display: inline-flex; align-items: center; color: var(--text-muted); .material-icons { margin-right: 0.5rem; } &:hover { color: var(--primary-color); } } @media (max-width: 768px) { .back-link { position: static; display: block; margin-bottom: 1rem; } } } .contact-card { max-width: 600px; margin: 0 auto; } .contact-info { display: flex; gap: 2rem; margin-bottom: 2rem; .info-item { display: flex; align-items: flex-start; gap: 1rem; .material-icons { color: var(--secondary-color); background: rgba(236, 72, 153, 0.1); padding: 0.5rem; border-radius: 50%; } h3 { margin: 0 0 0.25rem 0; font-size: 1rem; } p { margin: 0; color: var(--text-muted); } } } .divider { height: 1px; background: var(--border-color); margin: 2rem 0; } .form-group { margin-bottom: 1.5rem; label { display: block; margin-bottom: 0.5rem; color: var(--text-muted); font-size: 0.9rem; } input, textarea { width: 100%; padding: 0.75rem; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-main); font-family: inherit; box-sizing: border-box; &:focus { outline: none; border-color: var(--secondary-color); } } } .btn-block { width: 100%; } .fade-in { animation: fadeIn 0.4s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }