/* 1. Main layout container setup */
.hero-container {
    display: flex;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
}

/* 2. Left side (Backdrop + Profile Card) */
.hero-left {
    flex: 0 0 400px; /* Fixed card width */
    position: relative;
    vertical-align: center;
}

.profile-card {
    background: var(--bg-panel);
    margin: 1rem;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    text-align: center;
    vertical-align: center;
}

.avatar {
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
    border-radius: 2%; /* Makes it round, if desired */
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the whole link block */
    gap: 0.5rem; /* Space between SVG and text */
    /*text-decoration: none;*/
    /*color: inherit;*/
}

/* Right side */
.hero-right {
    flex: 1; /* remaining width */
    margin: 1em;
}

/* stack vertically on mobile screens */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
    }

    .hero-left {
        width: 90%;
    }
}