.client-grid-container {

  width: 100%;

  height: 100%;

}



.client-grid-wrapper {

  display: grid;

}



.container-image-cg .card-body {

  text-align: center;

}



.container-image-cg .rkit-card-client .image-container-cg {

  position: relative;

  height: 120px;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



/* Gambar Default & Hover */

.clientslogo-image-full-cg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transition: transform 0.5s ease, opacity 0.5s ease;

  display: flex;

  align-items: center;

  justify-content: center;

}



img.image-cover,

img.image-cover-hover {

  max-width: 100%;

  min-height: 100%;

  transition: all 0.5s ease;

}



/* Hover content (text) */

.hover-content-cg {

  position: absolute;

  inset: 0;

  background-color: rgba(255, 255, 255, 0.9);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  opacity: 0;

  z-index: 3;

  transition: all 0.5s ease;

  padding: 0;

  font-size: 16px;

}



.hover-title-cg, .hover-description-cg{

  margin: 0;

  padding: 0;

}



/* Default state */

.clientslogo-image-full-cg.image-hover-cg {

  z-index: 2;

  opacity: 0;

}



/* Default image (z-index lebih rendah) */

.clientslogo-image-full-cg.image-default {

  z-index: 1;

}



/* ----- Horizontal Hover ----- */

.image-container-cg.horizontal .clientslogo-image-full-cg.image-hover-cg,

.image-container-cg.horizontal .hover-content-cg {

  transform: translateX(100%);

}



.image-container-cg.horizontal:hover .clientslogo-image-full-cg.image-default {

  transform: translateX(-100%);

  opacity: 0;

}



.image-container-cg.horizontal:hover .clientslogo-image-full-cg.image-hover-cg,

.image-container-cg.horizontal:hover .hover-content-cg {

  transform: translateX(0);

  opacity: 1;

}



/* ----- Vertical Hover ----- */

.image-container-cg.vertical .clientslogo-image-full-cg.image-hover-cg,

.image-container-cg.vertical .hover-content-cg {

  transform: translateY(100%);

}



.image-container-cg.vertical:hover .clientslogo-image-full-cg.image-default {

  transform: translateY(-100%);

  opacity: 0;

}



.image-container-cg.vertical:hover .clientslogo-image-full-cg.image-hover-cg,

.image-container-cg.vertical:hover .hover-content-cg {

  transform: translateY(0);

  opacity: 1;

}



 .image-container-cg.flip_effect .clientslogo-image-full-cg.image-hover-cg,

.image-container-cg.flip_effect .hover-content-cg {

  opacity: 0;

  transform: scaleY(0);

  transform-origin: center;

  transition: all 0.5s ease;

  position: absolute;

  inset: 0;

  z-index: 2;

}



.image-container-cg.flip_effect:hover .clientslogo-image-full-cg.image-hover-cg,

.image-container-cg.flip_effect:hover .hover-content-cg {

  opacity: 1;

  transform: scaleY(1);

}



.image-container-cg.flip_effect .clientslogo-image-full-cg.image-default {

  opacity: 1;

  transform: scaleY(1);

  transition: all 0.5s ease;

  position: absolute;

  inset: 0;

  z-index: 1;

}



.image-container-cg.flip_effect:hover .clientslogo-image-full-cg.image-default {

  opacity: 0;

  transform: scaleY(0);

}