.bio-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center; /* This vertically centers the items */
    gap: 2rem; /* Space between image and text */
    padding: 0 1rem; /* Padding on sides for mobile */
}


.bio-image-wrapper {
    max-width: 33%;
    flex: 1 1 33%;
    padding: 20px;
    align-items: stretch;
    text-align: center;
}


.bio-image {
    max-width: 100%;
    width: 250px;
    border-radius: 8px;
    height: auto;
    text-align: center;
    object-fit: contain;
}


.bio-text {
    max-width: 60%;
    flex: 1 1 33%; /* Takes up remaining space */
    text-align: justify;
    text-justify: inter-word;
}


.bio-text h2 {
    width: 100%;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: -10px;
}


@media (max-width: 900px) {
    
    .bio-text {
        max-width: 100%;
    }

    .bio-image-wrapper {
        max-width: 100%;
    }

    .bio-container {
        flex-direction: column;
        text-align: center;
    }
}