/* =====================================
        CUSTOMERS
        customers.css
===================================== */


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


.clients{

    padding:100px 0;

    background:#f8fafc;

}



/* TITLE */

.clients h2{

    margin-bottom:25px;

}



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


.clients-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    margin-top:60px;

}



/* ===============================
        CARD
================================ */


.client-card{

    background:white;

    height:300px;

    border-radius:20px;

    padding:35px 25px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    border-bottom:5px solid var(--blue);

}



.client-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.15);

}



/* ===============================
        LOGO PLACE
================================ */


.client-logo{

    width:260px;

    height:150px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

}



/* LOGO IMAGE */


.client-logo img{

    max-width:100%;

    max-height:140px;

    object-fit:contain;

    filter:grayscale(100%);

    transition:.35s;

}



.client-card:hover 
.client-logo img{

    filter:grayscale(0);

    transform:scale(1.08);

}



/* ===============================
        COMPANY NAME
================================ */


.client-card h3{

    font-size:21px;

    text-align:center;

    color:var(--dark);

    margin:0;

    font-weight:700;

}

/* END CUSTOMERS */