.brainhealth {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brainhealth .brainSkillsContainer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brainhealth .assistantContainer {
    display: flex;
    justify-content: center;
}
.brainhealth .assistantContainer.hide {
    display: none;
}

.brainhealth .graphs {
    display: flex;
    justify-content: center;
    width: 100%;
}
.brainhealth .graphContainer {
    padding: 2rem;
    padding-top: 10px;
    display: flex;
    align-items: flex-start;
}

.brainhealth .bubblesContainer {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.brainhealth .assessmentContainer {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    align-items: center;
    gap: 16px;
    margin-bottom: 2rem;
    border-radius: 12px;
    border: 2px solid #5d3ee5;
    background: #fff;
    box-shadow: 0 4px 4px 0 rgba(223, 244, 255, 0.8);
    padding: 6px 100px;
    cursor: pointer;
    width: fit-content;
    margin-inline: auto;
}

.brainhealth .assessmentContainer .assessmentIcon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/d/en_US/gv/i/brain_secondary.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #d3e9f4;
}

.brainhealth .assessmentContainer .assessmentText,
.brainhealth .assessmentContainer .assessmentText span {
    font-family: "Metropolis Regular";
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: #4b4a4a;
}

.brainhealth .assessmentContainer .assessmentText span {
    font-family: "Metropolis Semi Bold";
    padding-inline: 7px;
}

.brainhealth .assessmentContainer.hide {
    display: none;
}

.dark .brainhealth .assessmentContainer {
    border: 2px solid #fff;
    background: #1f2120;
    box-shadow: none;
}

.dark .brainhealth .assessmentContainer .assessmentText,
.dark .brainhealth .assessmentContainer .assessmentText span {
    color: #fff;
}

@media (max-width: 768px) {
    .brainhealth .bubblesContainer {
        padding-inline: 16px;
    }
    .brainhealth .graphs {
        flex-direction: column;
    }
    .brainhealth .graphContainer {
        padding: 1rem;
        padding-top: 0;
    }

    .brainhealth .bubblesContainer {
        order: 4;
    }
    .brainhealth .assistantContainer {
        order: 1;
    }
    .brainhealth .brainSkillsContainer {
        order: 2;
    }
    .brainhealth .graphs {
        order: 3;
    }
    .brainhealth .assessmentContainer {
        order: 5;
        padding: 6px 16px;
    }
    .brainhealth .assessmentContainer .assessmentText,
    .brainhealth .assessmentContainer .assessmentText span {
        font-size: 16px;
    }
}