.about_container {
    width: 100%;
    height: 90vh;

    background-color: var(--about-color-background);
    position: relative;
    box-sizing: border-box;
    gap: var(--gap);

    display: grid;
    grid-template-columns: auto .5fr;
    align-items: center;
    justify-content: center;
}

    @media (max-width: 900px) {
        .about_container {
            height: fit-content;
        }
    }

.about_text_container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    height: 100%;
    text-align: left;
    max-width: 900px;
}

    @media (max-width: 1300px) {
        .about_text_container span {
            font-size: 2rem;
        }
    }

    @media (max-width: 1300px) {
        .about_text_container {
            padding: var(--padding);
            box-sizing: border-box;
        }
    }
    
    @media (max-width: 900px) {
        .about_text_container span {
            font-size: 1.5rem;
        }
    }

    @media (max-width: 400px) {
        .about_text_container span {
            font-size: 1rem;
        }
    }

.about_pic_container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

    @media (max-width: 1300px) {
        .about_pic_container {
            scale: .8;
        }
    }

    @media (max-width: 700px) {
        .about_pic_container {
            display: none;
        }
    }

.about_pic_container img {
    aspect-ratio: 9 / 14;
    height: 500px;
    object-fit: cover;
    border-radius: 25px;
}



/* Balls */

    .about_balls_container {
        width: 100%;
        height: 100%;

        position: absolute;
        top: 0px;
        left: 0px;

        z-index: 10;
    }

    .about_balls_rel {
        width: 100%;
        height: 100%;

        position: relative;
    }

    .about_balls {
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 50%;
        position: absolute;
        background-color: var(--about-ball-color);
    }

    .about_balls {
        transition: transform 3s cubic-bezier(.17,.67,.28,.98);
    }
    
    .about_balls.animate {
        transform: translateY(-100px); /* Adjust this value for movement amount */
    }

    .about_balls:nth-child(1) {
        width: 30%;
        top: -100px;
        right: -400px;
    }

    .about_balls:nth-child(2) {
        width: 10%;
        top: 450px;
        right: 100px;
    }

    .about_balls:nth-child(3) {
        width: 25%;
        bottom: 100px;
        left: -300px;
    }