#technology{
    width: 100%;
    background-color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

@media (max-width: 1000px) {
    #technology{
        padding:10px;
        padding-top: 70px;
    }
}
.technologycontainer{
    width: 100%;
    max-width: 1000px;
    height: 92px;
    position: relative;
    overflow: hidden;
    border: 1px dashed var(--grey);
    background-color: var(--dark);
    border-radius: 20px;
}
.techused{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 10px;
    top: 10px;
    -webkit-box-shadow: 10px 10px 20px var(--black);
    left: calc(var(--techindex) * (100px + var(--techgap)));
    animation: ScrollTech 26s linear infinite;
    animation-delay: calc(-2s * var(--techindex));
}
.techimg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes ScrollTech {
    0%{
        left: calc(-70px + calc(var(--techquantity) * calc(var(--techgap) + 70px)))
    }
    100%{
        left: -100px
    }
}