.profile-banner {
    padding-bottom: 36%;
}

.profile-img-name {
    margin: -80px 0 0;
    position: relative;
    padding: 0 30px;
}

.profile-img-name .img {
    background-color: var(--whiteColor);
    padding: 5px;
    width: 125px;
    height: 125px;
}

.profile-img-name .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.profile-img-name .name {
    padding-left: 154px;
}

.profile-img-name .name h1 {
    font-size: 24px;
    color: var(--whiteColor);
}

.profile-img-name .name p {
    font-size: 14px;
    color: var(--whiteColor);
}

@media screen and (max-width:1199px) {    
    .profile-img-name {
        padding: 0 20px;
    }

    .profile-img-name .name {
        padding-left: 115px;
    }

    .profile-img-name .img {
        width: 100px;
        height: 100px;
    }

}

@media screen and (max-width:991px) {
    .profile-banner {
        padding-bottom: 45%;
    }    
}

@media screen and (max-width:767px) {   
    .profile-img-name {
        padding: 0 15px;
    }

    .profile-img-name .name {
        padding-left: 85px;
    }

    .profile-img-name .img {
        width: 70px;
        height: 70px;
    }
}

@media screen and (max-width:639px) {    
    .profile-banner {
        padding-bottom: 53%;
    }

    .profile-img-name .name h1 {
        font-size: 18px;
    }    
}

@media screen and (max-width:575px) {    
    .profile-img-name {
        margin: 15px 0 0 0;
        padding: 0 0px;
    }
    .profile-img-name .name h1,
    .profile-img-name .name p{
        color: var(--blackColor);
    }
}