.profile-pic {
    max-width: 30%;
    width: auto;
    height: auto;
    margin: auto;
}

.info-box {
    display: flex;
    width: 100%;
    flex: auto;
    justify-content: space-between;
    gap: 30px;
}

.icons-box {
    display: flex 
}

.icon {
    padding: 7px;
    border: 1px dashed rgb(202, 202, 202);
    cursor: pointer;
}

.icon:hover {
    border: 1px solid blue;
}

.icon:active {
    box-shadow: inset 0 0 0 2px blue;
}

.blog-link {
    border: 1px solid gray;
    padding: 20px;
}

.blog-link:hover {
    border: 1px solid blue;
}

.blog-link:active {
    box-shadow: inset 0 0 0 2px blue;
}

.info-box-2 {
    display: flex;
    width: 100%;
    flex: auto;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.info-box-2-left {
    flex-basis: calc(100% / 5 - 15px);
}

.info-box-2-right {
    flex-basis: calc(100% / 5 * 4 - 15px);
    margin-bottom: 40px;
}

.company-link {
    cursor: pointer;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .info-box {
        flex-direction: column;
        text-align: center;
    }
    .profile-pic {
        object-fit: cover;
        max-width: 100%;
        width: 250px;
        height: 250px;
        border-radius: 125px;
        margin-bottom: 0;
    }
    .icons-box {
        justify-content: center;
    }

    .info-box-2 {
        gap: 0;
        text-align: center;
    }
    .info-box-2-left {
        flex-basis: 100%;
        text-decoration: underline;
    }
    .info-box-2-right {
        flex-basis: 100%;
    }
}