/* /* /* .srollsec{
    display:flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    background: #fff;
    flex-direction: column;

}
.scroll{
    position: relative;
    display:flex;
    width:700px;
    overflow: hidden;
     /* -webkit-mask-image: linear-gradient(90eg,transparent,#fff 
    20%,#fff 80%, transparent)  */

/* .scroll div{
    white-space: nowrap;
    animation:scroll var(--time) linear infinite;
    animation-delay: calc(var(--time)*-1);
}
.scroll div:nth-child(2){
    animation: scroll2 var(--time)linear infinite;
    animation-delay: calc(var(--time)/-2);
    
}
@keyframes scroll{
    0%{
        transform:translateX(100%);
    }
    100%{
        transform: translate(-100%);
    }
}
@keyframes scroll2{
    0%{
        transform:translateX(0);
    }
    100%{
        transform: translate(-200%);
    }
}
.scroll div span{
    display:inline-flex;
    margin:10px;
    letter-spacing: 0.2cm;
    background: #333;
    color:#fff;
    padding:5px 10px;
    border-radius: 5px;;

}
.scroll div span:hover{
    background:#3fd2f9;
    cursor: pointer;
}  */ 

/* version start */
.ccc{
    margin: 0;
    min-height: clamp(420px, 58vh, 640px);
    display: grid;
    place-content: center;
    background: #afe4eb;
    color: white;
    background-size: cover;
    background-position: center;
}
.ccc h1,
.ccc h2{
    text-align: center;
    color: rgb(0, 153, 255);
}
.ccc ul,
.brand-marquee{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    width: min(1100px, 100%);
}
.ccc ul > li,
.brand-marquee > li{
 grid-area: 1/1;
 animation: infiniteScroll 20s linear infinite;
 font-size: 1.3rem;
 border: 0.5rem solid #0000;
 padding: 0.65rem;
 text-align: center;
 background: #344256 padding-box;
 border-radius: 1rem;
}
.ccc ul > li img,
.brand-marquee > li img{
    max-width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
}
.ccc ul >li:nth-child(2),
.brand-marquee > li:nth-child(2){
    animation-delay: calc(-0.1428 * 20s);
}
 .ccc ul >li:nth-child(3),
 .brand-marquee > li:nth-child(3){
    animation-delay: calc(-0.2857 * 20s);
}
 .ccc ul >li:nth-child(4),
 .brand-marquee > li:nth-child(4){
    animation-delay: calc(-0.4285* 20s);
}
 .ccc ul >li:nth-child(5),
 .brand-marquee > li:nth-child(5){
    animation-delay: calc(-0.5714 * 20s);
}
.ccc ul >li:nth-child(6),
.brand-marquee > li:nth-child(6){
    animation-delay: calc(-0.7142 * 20s);
}
 .ccc ul >li:nth-child(7),
 .brand-marquee > li:nth-child(7){
    animation-delay: calc(-0.8571 * 20s);
}
.ccc ul .alt li,
.brand-marquee.alt li{
    -ms-zoom-animation: reverse;
}

@media (max-width: 767.98px) {
    .ccc ul,
    .brand-marquee {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 0.75rem;
        mask: none;
        -webkit-mask: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0.75rem 0.75rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .ccc ul > li,
    .brand-marquee > li {
        position: relative;
        grid-area: auto;
        animation: none !important;
        flex: 0 0 auto;
        min-width: 148px;
        scroll-snap-align: center;
    }
}
@keyframes infiniteScroll{
    14.28%{
        transform:translate(-100%);

    }
    14.29%{
        transform: translate(600%);
    }
}