/* ==========================================
   CLIENTS MARQUEE (home)
========================================== */
.clients{

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(circle at top right,
        rgba(31,125,83,.06),
        transparent 35%),
        radial-gradient(circle at bottom left,
        rgba(132,204,22,.07),
        transparent 40%),
        var(--bg-light);

}
.clients::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:rgba(31,125,83,.05);

    filter:blur(90px);

    animation:blobOne 12s ease-in-out infinite;

}

.clients::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    bottom:-120px;

    left:-120px;

    border-radius:50%;

    background:rgba(132,204,22,.06);

    filter:blur(80px);

    animation:blobTwo 14s ease-in-out infinite;

}
.clients-marquee{

    position:relative;

    z-index:2;

    overflow:hidden;

    margin-top:60px;

    padding:20px 0;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 8%,
            black 92%,
            transparent
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 8%,
            black 92%,
            transparent
        );

}
.clients-track{

    display:flex;

    align-items:center;

    gap:28px;

    width:max-content;

    animation:
        scroll-left 38s linear infinite;

    will-change:transform;

}
.clients-marquee:hover .clients-track{

    animation-play-state:paused;

}
.client-logo{

    position:relative;

    flex-shrink:0;

    width:180px;

    height:110px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:22px;

    overflow:hidden;

    border-radius:22px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.75);

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;

}
.client-logo::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(31,125,83,.10),
            transparent 70%
        );

    opacity:0;

    transition:opacity .4s ease;

}
.client-logo img{

    max-width:100%;

    max-height:70px;

    object-fit:contain;

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

    transition:
        filter .4s ease,
        transform .4s ease;

}
.client-logo:hover{

    transform:translateY(-8px);

    border-color:rgba(31,125,83,.25);

    box-shadow:
        0 25px 55px rgba(0,0,0,.14);

}

.client-logo:hover::before{

    opacity:1;

}

.client-logo:hover img{

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

    transform:scale(1.06);

}
.client-logo span{
    font-family:var(--heading-font);
    font-weight:600;
    font-size:12px;
    color:var(--primary);
    text-align:center;
    line-height:1.2;
}
@keyframes scroll-left{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(calc(-50% - 14px));

    }

}

/* ==========================================
   CLIENTS PAGE GRID
========================================== */
.grid-6{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
}
.clients-grid-page{
    grid-template-columns:repeat(6,1fr);
}
.client-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:100px;
    padding:14px;
    background:var(--bg-light);
    box-shadow:var(--shadow-sm);
    border-radius:var(--radius-sm);
}
.client-industry{
    font-size:11px;
    color:var(--text-light);
    text-align:center;
}
.client-card img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.client-card span{
    font-family:var(--heading-font);
    font-weight:600;
    font-size:13px;
    color:var(--primary);
    text-align:center;
}
@media (max-width:768px){

    .client-logo{

        width:140px;

        height:90px;

        padding:18px;

    }

    .client-logo img{

        max-height:55px;

    }

    .clients-track{

        gap:18px;

        animation-duration:30s;

    }

}