.client-con .generic-title h2{
    color: var(--white-color);
}
.client-con .generic-title span{
    color: var( --secondary--color);
}
.client-con{
    position: relative;
    background: url(../images/client-bg-img.jpg) no-repeat center;
    background-size: cover;
}
.client-con:after{
    top: 0;
    left: 0;
    width: 100%;    
    content: "";
    height: 100%;
    position: absolute;
    background: rgb(17 24 40 / 85%);
}
.client-con .container{
    z-index: 1;
    position: relative;
}
.client-box {
    gap: 30px;
    display: grid;
    grid-template-columns: 31.54% 31.54% 31.54%;
}
.client-box-item{
    display: flex;
    border-radius: 10px;
    flex-direction: column;
    background: var(--white-color);
}
.client-box-item > figure{
    margin-bottom: 0;
}
.client-box-item > figure img{
    width: 100%;
    border-radius: 10px 10px 0 0;
}
.client-box-content {
    padding: 38px 28px;
}
.client-box-content figure{
    margin-bottom: 6px;
}
.client-box-content {
    flex-grow: 1;
    display: flex;
    padding: 38px 28px;
    flex-direction: column;
}
.client-box-content h5{
    margin-bottom: 0;
    margin-top: auto;
    color: var(--primary--color);
}
/* responsive */
@media only screen and (max-width: 1440px) {
    .client-box-content {
        padding: 28px 28px;
    }
}
@media only screen and (max-width: 1199px) {
    .client-box {
        gap: 25px;
    }
    .client-box-content {
        padding: 24px;
    }
    .client-box-content p{
        font-size: 16px;
    }
}
@media only screen and (max-width: 991px) {
    .client-box {
        gap: 20px;
        grid-template-columns: 31.54% 31.54% 31.54%;
    }
    .client-box-item {
        margin: 0 auto;
    }
    .client-box-content p {
        font-size: 14px;
        line-height: 20px;
    }
    .client-box-content {
        padding: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .client-box {
        grid-template-columns: 48% 48%;
    }
    .client-box-content p {
        font-size: 14px;
    }
}
@media only screen and (max-width: 575px) {
    .client-box {
        grid-template-columns: 100%;
    }
    .client-box-item {
        width: 100%;
    }
    .client-box-content p {
        margin-bottom: 10px;
    }
}