/*** 

=============================================

    Client Page

=============================================

***/

.client-page {

    position: relative;

    display: block;

    background: var(--cleanin-white);

    padding: 120px 0px 90px;

}



.client-page__single {

    position: relative;

    display: block;

    max-width: 270px;

    width: 100%;

    margin: 0 auto 30px;

    -webkit-box-shadow: 0px 3px 6px 2px #ececec;

    box-shadow: 0px 3px 6px 2px #ececec;

    transition: all 700ms ease 100ms;

    z-index: 1;

}



.client-page__single:hover {

    box-shadow: none;

}



.client-page__single::before {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background: var(--cleanin-gray-bg);

    transform: scaleX(0);

    transition: all 700ms ease 100ms;

    z-index: -1;

    content: "";

}



.client-page__single:hover:before {

    transform: scaleY(1);

}



.client-page__single::after {

    position: absolute;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 3px;

    background: var(--cleanin-base);

    transform: scaleX(0);

    transition: all 700ms ease 100ms;

    z-index: -1;

    content: "";

}



.client-page__single:hover::after {

    transform: scaleY(1);

}



.client-page__single a {

    position: relative;

    display: inline-block;

    padding: 20px 0px 20px;

}



.client-page__single a img {

    width: 250px;
    height: 105px;
    object-fit: contain;
    opacity: 1;

    transition: all 0.2s ease-in-out 0.1s;

}



.client-page__single:hover a img {

    opacity: 1.0;

    transition: all 0.3s ease-in-out 0.1s;

}