.about-name, .tooltip-custom {
    position: relative;
    display: inline-block;
    /*text-align: right;*/  
}
@media (max-width: 768px) {
    .about-name, .tooltip-custom {
        width: 100%;
        text-align: right;
    }
}
@media (min-width: 768px) and (max-width: 931px) {
    .about-name, .tooltip-custom {
        width: 100%;
        max-width: 94%;
        text-align: right;
    }
}
@media (min-width: 932px) and (max-width: 1023px) {
    .about-name, .tooltip-custom {
        width: 100%;
        max-width: 56%;
        text-align: right;
    }
}
@media (min-width: 1024px) and (max-width: 1180px) {
    .about-name, .tooltip-custom {
        width: 100%;
        max-width: 38%;
        text-align: right;
    }
}

@media (min-width: 1181px) {
    .about-name, .tooltip-custom {
        width: 100%;
        text-align: right;
    }
}

.media-second {
    position: relative;
    display: inline-block;
}
@media (max-width: 768px) {
    .media-second {
        width: 100%;
        text-align: left;
    }
}
@media (min-width: 768px) and (max-width: 931px) {
    .media-second {
        width: 100%;
        max-width: 94%;
        text-align: left;
    }
}
@media (min-width: 932px) and (max-width: 1023px) {
    .media-second {
        width: 100%;
        max-width: 56%;
        text-align: left;
    }
}
@media (min-width: 1024px) and (max-width: 1180px) {
    .media-second {
        width: 100%;
        max-width: 38%;
        text-align: left;
    }
}

@media (min-width: 1181px) {
    .media-second {
        width: 100%;
        text-align: left;
    }
}

.tooltipInner {
    color: #5263ff;
    cursor: pointer;
}
.tooltip-inner {
    display: none;
    position: absolute;
    top: 100%;
    right: 20px;
    max-width: 325px;
    width: 350px;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-size: 14px;
    margin-top: -35px;
    text-align: left;
    font-weight: 500;
    line-height: 1.2rem;
}
.tooltipInner:hover + .tooltip-inner, .tooltip-inner:hover {
    display: block;
}