.container-image-accordion{

  display : flex;

  width : auto;

  overflow : hidden;

  position : relative;

}



.gallery-wrap {

  display: flex;

  flex-direction: row;

  width: 100%;

  height: 70vh;

  overflow: hidden;

}



.item-ia {

  flex: 1;

  height: 100%;

  background-position: center;

  background-size: cover;

  background-repeat: none;

  transition: flex 0.8s ease;

  overflow: hidden;

  &:hover{

    flex: 5;

  }

}



.item-text{ 

  opacity: 0;

  display: flex;

  overflow: hidden;

}





.text-title-ia {

  display: flex;

  justify-content: center;

  opacity: 0;

  z-index: 999;

  transform: translateY(20px);

  transition: all 1s ease;

}



.hs-animation-text-title-ia {

  animation: hs-animation-text-title-ia 1s ease forwards;

}



@keyframes hs-animation-text-title-ia {

  0% {

    transform: translateY(-500px);

    opacity: 0;

  }

  100% {

    transform: translateY(0);

    opacity: 1;

  }

}



/* Sama untuk .text-description jika ingin efek serupa */

.text-description {

  display: flex;

  justify-content: center;

  z-index: 999;

  opacity: 0;

  transform: translateY(20px);

  transition: all 1s ease;

}

.hs-animation-text {

  animation: hs-animation-text 1s ease forwards;

}

@keyframes hs-animation-text {

  0% {

    transform: translateY(500px);

    opacity: 0;

  }

  100% {

    transform: translateY(0);

    opacity: 1;

  }

}



.item-ia-hover.active .text-title-ia  {

    transform: translateY(0);

    opacity: 1;

}



.item-ia-hover.active .text-description {

    transform: translateY(0);

    opacity: 1;

}



.item-ia-click.active .text-title-ia  {

  transform: translateY(0);

  opacity: 1;

}



.item-ia-click.active .text-description {

  transform: translateY(0);

  opacity: 1;

}





/* button */



.icon-button{

  color : red;

}



.icon-button i:hover{

  color : rgb(255, 255, 255);

}



.rkit-image-accordion-item-button{

  display : flex;

  justify-content : center;

  z-index: 999;

}



.button-element-image-accordion {

  position: relative;

  z-index: 1;

  display: flex;

  align-self: center;

  align-items: center; 

  width : auto;

  background-color:  #000000;

  color :  #ffffff;

  max-width: none;

  padding : 16px 32px 16px 32px;

  justify-content: center;  

    opacity: 0; 

   transform: translateY(20px);

  transition: all 1s ease;

  overflow: hidden;

   animation: hs-animation-button 1s ease forwards;



  /* box-shadow: 0px 6px 10px 5px rgba(0, 0, 0, 0.20)  ; */

}

 



.rkit-image-accordion-item-button-icon{

  color: #56d4c4;  

}



 .hs-animation-button {

  animation: hs-animation-button 1s ease forwards;

}



 

 



@keyframes hs-animation-button {

  0% {

    transform: translateY(500px);

    opacity: 0;

  }

  100% {

    transform: translateY(0);

    opacity: 1;

  }

}





/* hover mode */

.item-ia-hover {

  flex: 1;

  height: 100%;

  background-position: center;

  background-size: cover;

  background-repeat: none;

  transition: flex 0.3s ease;

  overflow : hidden;

  position: relative;

} 



.item-ia-hover.active{

  flex : 3;

}



@keyframes fadeIn {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



.item-ia-hover.active .item-text {

  position: relative;

  z-index: 2;

  height: 100%;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;   

  opacity: 0;  

  padding: 0px;

  overflow: hidden;

  transition-delay : 2s;

  animation: fadeIn 0.5s ease-in-out forwards;  

}



.background-item-text{

  position: absolute;

  z-index: 1;

  inset: 0;

  overflow: hidden;

  background-color: #9A9191;

  opacity: 20%;

  pointer-events: none;

}



/* .item-ia-hover.active .item-text{

  height: 100%;

  width: 100%;

  display: flex;  

  flex-direction: column;

  justify-content: center;

  opacity: 1;  

  padding: 0px;   

  overflow: hidden;

  transition: opacity 1s ease-in-out, transform 1s ease-in-out;  

} */







/* klik mode */

.item-ia-click {

  flex: 1;

  height: 100%;

  background-position: center;

  background-size: cover;

  background-repeat: none;

  transition: flex 0.3s ease;

  overflow : hidden;

} 



.item-ia-click.active{

  flex : 3;

}



@keyframes fadeInClick {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



.item-ia-click.active .item-text {

  position: relative;

  z-index: 2;

  height: 100%;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  opacity: 0;  

  padding: 0px;

  overflow: hidden;

  transition-delay : 1s;

  animation: fadeIn 1s ease-in-out forwards;  

}



/* .item-ia-click.active .item-text{

  height: 100%;

  width: 100%;

  display: flex;  

  flex-direction: column;

  justify-content: center;

  opacity: 1;  

  padding: 0px;     

  overflow: hidden;

  transition: opacity 1s ease-in-out, transform 1s ease-in-out;  

} */





 



 

@media only screen and (max-width: 480px) {



  .gallery-wrap { 

    flex-direction: column !important; 

  }



}