/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 25 2026 | 13:26:44 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 
.container-y{
    max-width: 1200px;
    width: 100%;
    height: 140px;
    position: relative;
    display: flex;
    gap: 10px;
    margin-top: 0.3rem;
    padding: 12px;
    overflow: hidden;
}

.slide-cont-y{
    width: 200px;
    height: 120px;
	border-radius: 8px;
    background: grey;
    position: absolute;
    right: max(calc(200px * 7),100%);
    transition: 0.5s;
    animation: scrolly 30s linear infinite;
}


.container-x{
    max-width: 1200px;
    width: 100%;
    height: 140px;
    position: relative;
    display: flex;
    gap: 10px;
    margin-top: 6rem;
    padding: 12px;
    overflow: hidden;
}

.slide-cont{
    width: 200px;
    height: 120px;
	border-radius: 8px;
    background: grey;
    position: absolute;
    left: max(calc(200px * 7),100%);
    transition: 0.5s;
    animation: scrolld 30s linear infinite;
}

@keyframes scrolld {
    to{
        left: -310px;
    }
}

@keyframes scrolly {
    to{
        right: -310px;
    }
}

.one{
    animation-delay: calc(30s / 7 * (7 - 1) * -1);
}
.two{
    animation-delay: calc(30s / 7 * (7 - 2) * -1);
}
.three{
    animation-delay: calc(30s / 7 * (7 - 3) * -1);
}
.four{
    animation-delay: calc(30s / 7 * (7 - 4) * -1);
}

.five{
    animation-delay: calc(30s / 7 * (7 - 5) * -1);
}

.six{
    animation-delay: calc(30s / 7 * (7 - 6) * -1);
}

.seven{
    animation-delay: calc(30s / 7 * (7 - 7) * -1);
}
/* 
.container-x:hover,
.container-y:hover {
    background: rgb(70, 34, 231);
} */

.container-x:hover .slide-cont,
.container-y:hover .slide-cont-y {
    animation-play-state: paused;
}



.container-x::before,
.container-x::after,
.container-y::before,
.container-y::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.container-x::before,
.container-y::before {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.95),
        rgba(0,0,0,0)
    );
}

.container-x::after,
.container-y::after {
    right: 0;
    background: linear-gradient(
        to left,
        rgba(0,0,0,0.95),
        rgba(0,0,0,0)
    );
}





@media (max-width: 600px) {

    .slide-cont,
    .slide-cont-y {
        animation-duration: 20s;
    }

    .one {
        animation-delay: calc(20s / 7 * (7 - 1) * -1);
    }

    .two {
        animation-delay: calc(20s / 7 * (7 - 2) * -1);
    }

    .three {
        animation-delay: calc(20s / 7 * (7 - 3) * -1);
    }

    .four {
        animation-delay: calc(20s / 7 * (7 - 4) * -1);
    }

    .five {
        animation-delay: calc(20s / 7 * (7 - 5) * -1);
    }

    .six {
        animation-delay: calc(20s / 7 * (7 - 6) * -1);
    }

    .seven {
        animation-delay: 0s;
    }
}