.roles{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var( --primary-color);
    position: relative;
    height: 13vh;
    overflow: hidden;
}
.roles-section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
    animation: scroll-left 5s linear infinite;
}
.roles-section h1{
    color: var(--main-color);
    font-size: 25px;
    font-style: italic;
    padding: 0 1em 0 0.5em;
}
@keyframes scroll-left {
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(20%);
    }
    
}


@media (max-width: 1000px){
}
@media (max-width: 920px) {
    .roles{
    background:none;
    height: 5vh;
}
.roles-section{
    position: absolute;
    display: flex;
    justify-content:right;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    flex-direction: row;
    animation: scroll-left 5s linear infinite;
}
.roles-section h1{
    color: var(--primary-color);
    font-size:10px;
    font-style: italic;
    padding: 0;
}
}