/* CSS for the home page website */
.stat-icon {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

}


:root {
    --total-brand: 8;
    --logo-width: 6rem;
    --total-logo-width: calc(var(--total-brand) * var(--total-logo-width) * 2);
}

.slider {
    position: relative;
    /*width: 100vw;*/
    height: 12rem;
    background-color: #eeeae4;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.slider ul.jobs {
    list-style: none;
    width: var(--total-logo-width);
    display: flex;
    animation: slideLeft 40s linear infinite;
}

@keyframes slideLeft {
    100% {
        transform: translateX(calc(-100% /2));
    }
}

.slider::before,
.slider::after {
    position: absolute;
    content: "";
    height: 100%;
    width: var(--logo-width);
}

.slider::before {
    left: 0;
    background: linear-gradient(to right, #eeeae4 0%, #fff0 100%);
    z-index: 1;
}

.slider::after {
    right: 0;
    background: linear-gradient(to left, #eeeae4 0%, #fff0 100%);
    z-index: 1;

}

ul.jobs li.job-slide-icon {
    width: var(--logo-width);
    text-align: center;
    margin-left: 3rem;
    font-size: 2rem;
}