/* Styles specific to the About page */

.about-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 0 2rem;
}

.image-section {
    flex: 1;
    max-width: 450px;
}

.image-section img {
    max-width: 300px;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    filter: grayscale(1) blur(0.5px) contrast(0.8) sepia(0.5);
    -webkit-mask: radial-gradient(#000, #0009);
    transition: filter 0.3s ease;
}


.image-section img:hover {
    filter: none;
}

.text-section {
    flex: 2;
}

.about_short {
    max-width: 32.4rem; /* Use rem for maximum width */
    font-weight: 550;
    font-size: 1.2rem;
}

.about_long {
    padding-top: 2rem;
    padding-left: 2rem;
    max-width: 55rem; /* Use rem for maximum width */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .about-flex {
        flex-direction: column;
        gap: 2rem;
        padding: 0 2rem; /* Reduced padding for smaller screens */
    }

    .image-section,
    .text-section {
        flex: none;
        max-width: 100%;
    }

    .image-section img {
        max-width: 100%; /* Full width images on smaller screens */
    }
}