/* Contact enhancements: icons, professional card, and layout */
.contact-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: center;
}

/* 2x2 grid for the contact cards */
.contact-contacts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.contact-card {
    display:flex;
    align-items:center;
    gap:14px;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(180deg,#fff,#f8fafc);
    border: 1px solid rgba(229,231,235,1);
    min-height: 64px; /* ensure consistent heights */
    width:100%;
}

.contact-icon { font-size: 1.6rem; }

.contact-card h3 {
    color: #111827;
    margin-bottom: 6px;
    font-size: 1.05rem;
    margin:0;
}

.contact-card p { margin:0; }
.contact-card a { color: #374151; text-decoration: none; font-weight:600 }
.contact-card a:hover { text-decoration: underline; }

.contact-socials { grid-column: 1 / -1; display:flex; gap:12px; align-items:center; margin-top:6px }
.social-icons a { font-size:1.1rem; margin-right:8px; text-decoration:none }

/* Footer: centered developer credit */
.contact-footer { display:flex; justify-content:center; }
.dev-inline { display:inline-flex; align-items:center; gap:8px; background: linear-gradient(90deg,var(--purple),var(--magenta)); color: white; padding:10px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); font-weight:600; box-shadow: 0 10px 30px rgba(124,58,237,0.12); }
.dev-inline .dev-link{ color: white; text-decoration:underline; font-weight:700 }
.dev-inline .dev-link:hover{ opacity:0.95 }
.dev-inline .dev-role { color: rgba(255,255,255,0.9); margin-left:6px; font-weight:500 }

.contact-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.contact-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.08); }

@media (max-width: 900px) {
    .contact-contacts { grid-template-columns: 1fr; }
    .contact-footer { justify-content:flex-start; }
    .dev-inline { width:100%; }
}