.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%);
}