/* Begin: Industires CSS */
.industrieSec {
    background: var(--grey);
    position: relative;
    z-index: 1;
}

.industrieSec .topLeftRound {
    width: 7rem;
    position: absolute;
    top: -1.5rem;
    left: 0;
}

.industrieSec .topLeftRound.botomRight {
    width: 7rem;
    top: auto;
    bottom: -3rem;
    left: auto;
    right: 2rem;
}

.indusList {
    background: var(--orange-gradient);
    padding: 2px;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-wrap: nowrap;
    overflow: hidden;
    gap: 1rem;
}

.indusList .loop {
    display: flex;
    gap: 1rem;
    animation: infini linear infinite 25s;
}

.indusList.botm .loop {
    animation: infini linear infinite 25s;
}

.indusList .loop .item {
    border: 2px solid var(--secondry);
    border-radius: 10px;
    padding: 10px 1rem;
    text-align: center;
}

.indusList .loop .item:hover {
    background: var(--secondry);
}

.indusList .loop .item img {
    height: 2rem;
}

.indusList .loop .item:hover img {
    filter: brightness(0) invert(1);
}

.indusList .loop .item span {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    font-size: 0.9rem;
}

.indusList .loop .item:hover span {
    color: var(--white);
}

@keyframes infini {
    0% {
        transform: translateX(100%)
    }

    50% {
        transform: translateX(50%)
    }

    100% {
        transform: translateX(0%)
    }
}

.indusList.center .loop {
    animation: infiniReverse linear infinite 25s;
}

@keyframes infiniReverse {
    0% {
        transform: translateX(0%)
    }

    50% {
        transform: translateX(50%)
    }

    100% {
        transform: translateX(100%)
    }
}

/* END: Industries CSS */