.con-wrap{ 

	margin: auto; 

  display: flex;   

  flex-wrap: wrap;

  flex-direction: row;  

  justify-content: center; 

  align-items: center;  

  overflow: hidden;

}



.img-comp-container {

  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden;  

}



.img-comp-img {

  display: block;

  position: absolute;

  width: 100%;

  height: 100%;

  overflow: hidden; 

}



.img-comp-container img{

  object-fit: cover;

  max-width: none !important;  

}

  

.img-comp-img img {

  display: block;  

}



.img-comp-slider {

  position: absolute;

  z-index: 9;

  cursor: ew-resize;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: transparent;  

  border: none;  

  box-shadow: 0 0 0 2px #ffffff;

}



 /* ini testing */

 .img-comp-slider::before,

  .img-comp-slider::after {

     content: '';

     position: absolute;

     width: 1500px;

     height: 2px; 

     background-color: white; 

     left: 0;

     z-index: 1;

    transform: rotate(90deg)

 }

 

 .img-comp-slider::before {

  top: -752px;

  left : -730px

}



.img-comp-slider::after {

  bottom: -752px; 

   left : -730px;

}







/* vertical */

.img-comp-slider.vertical::before,

.img-comp-slider.vertical::after {

  content: '';

  position: absolute;

  width: 1800px;  

  height: 2px; 

  background-color: white;  

  top: 50%; 

  transform: translateY(-50%);  

  z-index: 1;

}



.img-comp-slider.vertical::before {

  left: -1800px;  

}



.img-comp-slider.vertical::after {

  left: 40px;  

}











 /* ini tessting */

.img-comp-slider i {

  font-size: 14px;

  color: #ffffff;

  padding: 2px; 



}



.img-comp-slider.vertical {

  position: absolute;

  z-index: 9;

  cursor: ns-resize;

  width: 40px; 

  height: 40px; 

  background-color: transparent; 

  display: flex;

  flex-direction: column;  

  align-items: center;

  justify-content: space-between;  

  transform: translatex(-50%, -50%);

    box-shadow: 0 0 0 2px #ffffff;

}



.img-comp-slider.vertical i {

  font-size: 14px;

  color: #ffffff;

  padding: 2px; 



}





  /* caption css style */

  /* caption left */

  .caption-bottom-left {

    position: absolute;

    bottom: 8px;

    left: 16px;

  }

  

  .caption-top-left {

    position: absolute;

    top: 8px;

    left: 16px;

  }



  .caption-center-left { 

    position: absolute;

    top: 50%;

    left: 16px;

    transform: translateY(-50%);

    /* Tambahan opsional untuk styling */

    text-align: right;

    white-space: nowrap;

  }

/* caption left */



/* caption right */

  .caption-top-right {

    position: absolute;

    top: 8px;

    right: 16px;

  }

  

  .caption-bottom-right {

    position: absolute;

    bottom: 8px;

    right: 16px;

  }





  .caption-center-right {

    position: absolute;

    top: 50%;

    right: 16px;

    transform: translateY(-50%);

    /* Tambahan opsional untuk styling */

    text-align: right;

    white-space: nowrap;

  }

  /* caption right */

  



  /* filter image */

  .filter-blur img {

    filter: blur(5px);

}



.filter-greyscale img {

    filter: grayscale(100%);

}



.filter-contrast img {

    filter: contrast(150%);

}



.filter-brightness img {

    filter: brightness(120%);

}