/* =========================
   CLIENT SECTION
========================= */

.client-section {

    padding:40px 0;
    overflow: hidden;
    background: #F3F3F3;

}


.client-container {

    width: 90%;
    margin: auto;

}


.client-title {

    text-align: center;
    font-size: 40px;
    font-weight: 1000;
    margin-bottom: 20px;
    color: #10141c;

}



.client-slider {

    overflow: hidden;
    width: 100%;

}



.client-track {

    display: flex;
    width: max-content;
    gap: 5px;

    animation: scrollClient 25s linear infinite;

}



.client-item {

    width: 180px;
    height: 80px;

    display: flex;
    justify-content: center;
    align-items: center;

    flex-shrink: 0;

}



.client-item img {

    max-width: 940px;
    max-height: 80px;

    object-fit: contain;

    filter: grayscale(100%);
    opacity: .7;

    transition: .3s;

}


.client-item img:hover {

    filter: grayscale(0%);
    opacity: 1;

}



/* Animation kanan ke kiri */
@keyframes scrollClient {


    from {

        transform: translateX(0);

    }


    to {

        transform: translateX(-50%);

    }


}

/* ======================================
   RESPONSIVE
====================================== */

/* Laptop Besar */
@media (max-width:1400px){

    .client-title{

        font-size:36px;

    }

    .client-item{

        width:170px;
        height:75px;

    }

    .client-item img{

        max-height:75px;

    }

}


/* Laptop */
@media (max-width:1200px){

    .client-section{

        padding:35px 0;

    }

    .client-title{

        font-size:34px;

        margin-bottom:18px;

    }

    .client-track{

        gap:20px;

    }

    .client-item{

        width:160px;
        height:70px;

    }

    .client-item img{

        max-height:70px;

    }

}


/* Tablet */
@media (max-width:992px){

    .client-section{

        padding:30px 0;

    }

    .client-title{

        font-size:30px;

        margin-bottom:18px;

    }

    .client-track{

        gap:18px;

    }

    .client-item{

        width:145px;
        height:65px;

    }

    .client-item img{

        max-height:65px;

    }

}


/* Mobile */
@media (max-width:768px){

    .client-section{

        padding:28px 0;

    }

    .client-container{

        width:92%;

    }

    .client-title{

        font-size:24px;

        margin-bottom:16px;

    }

    .client-track{

        gap:15px;

        animation-duration:20s;

    }

    .client-item{

        width:120px;
        height:55px;

    }

    .client-item img{

        max-width:100%;
        max-height:55px;

    }

}


/* Small Mobile */
@media (max-width:480px){

    .client-title{

        font-size:20px;

    }

    .client-track{

        gap:12px;

    }

    .client-item{

        width:100px;
        height:48px;

    }

    .client-item img{

        max-height:48px;

    }

}


/* iPhone SE */
@media (max-width:380px){

    .client-title{

        font-size:18px;

    }

    .client-item{

        width:90px;
        height:42px;

    }

    .client-item img{

        max-height:42px;

    }

}