/* =========================
   CLIENTS BANNER
========================= */

.clients-banner{

    background:
    linear-gradient(
        rgba(255,66,84,.88),
        rgba(255,66,84,.88)
    ),
    url('../images/client-page-banner.png');

    background-size: cover;
    background-position: center;

    padding: 140px 0;

    text-align: center;
}

.clients-banner h1,
.clients-banner p{
    color: #fff;
}

/* =========================
   INTRO
========================= */

.clients-intro{
    padding: 100px 0 40px;
}

/* =========================
   CLIENTS
========================= */

.clients-section{
    padding: 40px 0 120px;
}

.clients-grid{

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.client-card{

    width: 320px;

    background: #fff;

    padding: 35px;

    text-align: center;

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0,0,0,.08);

    position: relative;

    overflow: hidden;

    z-index: 1;

    transition: .4s;
}

.client-card::before{

    content: '';

    position: absolute;

    left: 0;
    bottom: -100%;

    width: 100%;
    height: 100%;

    background: #ff4254;

    transition: .5s;

    z-index: -1;
}

.client-card:hover::before{
    bottom: 0;
}

.client-card:hover{
    transform: translateY(-10px);
}

.client-card:hover h3{
    color: #fff;
}

.client-card img{

    display: block;

    max-width: 150px;
    height: auto;

    margin: 0 auto 20px;

    transition: .4s;
}

.client-card:hover img{
    transform: scale(1.08);
}

.client-card h3{
    transition: .4s;
}

.client-logo{

    height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;
}

.client-logo img{

    max-width: 150px;
    max-height: 100px;

    width: auto;
    height: auto;

    object-fit: contain;

    transition: .4s;
}

/* =========================
   TRUST
========================= */

.trust-section{

    background: #f8f9fa;

    padding: 100px 0;

    text-align: center;
}

.trust-content{
    max-width: 900px;
    margin: auto;
}

/* =========================
   CTA
========================= */

.cta-section{

    padding: 100px 0;

    text-align: center;
}