.social-medias {
    margin-top: 64px;
    width: 100%;
}
.social-medias ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.social-medias ul i {
    font-size: 20px;
    color: gray;
    transition: 0.3s;
} 
.social-medias ul i:hover {
    color: var(--color-primary);
    transform: translateY(-8px);
}

.social-medias ul .custom-svg-icon {
    width: 20px;
    height: 20px;
    transition: 0.3s;
    
    filter: grayscale(100%) opacity(0.4); 
}

.social-medias ul a:hover .custom-svg-icon {
    transform: translateY(-8px);
    color: var(--color-primary);
}

.my-role{
    margin-top: 20px;
    margin-bottom: 20px;
}