.message-box{
    display: flex;
    gap: 30px;
    background-color: #fffae800;
    border-radius: 20px;
    align-items: flex-start;
}
.message-box .col:first-child{
    flex: 0 0 30%;
    max-width: 30%;
}
.message-box .col:last-child{
    flex: 0 0 70%;
    max-width: 70%;
}
.profile-img{
    overflow: hidden;
}
.profile-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 20px;
    display: block;
}
.profile-details h2 {
    margin-top: 15px;
    font-size: 20px;
}
.profile-details p {
    font-size: 16px;
    color: #6C89B2;
    width: max-content;
}
@media (max-width: 1199px) {   
    .profile-img h2 {
        margin-top: 10px;
    }
}
@media (max-width: 499px) {   
    .message-box{
        flex-direction: column;
    }
    .message-box .col:first-child {
    flex: 0 0 100%;
    max-width: 100%;
}
    .message-box .col:last-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .profile-img h2 {
        margin-top: 10px;
    }
    .message-box{
        align-items: unset;
    }
}