/* ===== DESKTOP GRID ===== */

.desktopClient {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
}

.clientItem {
    border-radius: 18px;
    background: linear-gradient(180deg, #f9ffff, #ebf2ff);
    border-bottom: 2px solid rgb(165, 186, 255);

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

    transition: .35s;
    cursor: pointer;
}

.clientItem img {
    max-width: 200px;
    max-height: 150px;
    min-height: 150px;
    object-fit: contain;

    opacity: .95;
    filter: saturate(0) contrast(1.1) brightness(.9);

    transition: .35s;
}

.clientItem:hover {
    background: white;
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}

.clientItem:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
}

.desktopClient:hover .clientItem:not(:hover) {
    opacity: .35;
}


/* ===== MOBILE SWIPER ===== */

.mobileClients {
    display: none !important;
}

.clientSwiper {
    width: 100%;
}

.clientSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.clientSwiper .clientItem {
    padding: 20px;
    background: white;
    border-radius: 14px;
}

.clientSwiper img {
    max-width: 110px;
    max-height: 70px;
    object-fit: contain;
}

.clientControls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 25px;
}

/* arrows */

.clientControls .swiper-button-next,
.clientControls .swiper-button-prev {
    position: static;
    color: #2563eb;
}

.clientControls .swiper-button-next:after,
.clientControls .swiper-button-prev:after {
    font-size: 20px;
}

/* pagination */

.swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* circles */

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #cbd5e1;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #2563eb;
    transform: scale(1.2);
}

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

@media(max-width:768px) {

    .desktopClient {
        display: none;
    }

    .mobileClients {
        display: block !important;
    }

    .clientItem {

        display: flex;
        align-items: center;
        justify-content: center;
        /* margin: 2px; */
        /* padding: 18px 16px; */

        border-radius: 16px;

        background: #ffffff;

        /* border: 1px solid rgba(0, 0, 0, 0.05); */

        /* 3D layered shadow */
        box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
        transition:
            transform .25s ease,
            box-shadow .25s ease;

    }

    /* logo */

    .clientItem img {
        max-width: 110px;
        max-height: 70px;
        object-fit: contain;
        filter: none;
        opacity: 1;
    }

    /* press animation */

    .clientItem:active {

        transform: translateY(3px);

        box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

    }
}


/* ===== SMALL HEIGHT SCREENS ===== */

@media(max-height:820px) {

    .desktopClient {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

}