html, body{
}
.wrapper{
  width:100%;
  padding-top: 20px;
  text-align:center;
}
h2{
  font-family:sans-serif;
  color:#fff;
}
.carousel{
  width:90%;
  margin:0px auto;
}
.slick-slide{
  margin:10px;
}
.slick-slide img{
  width:100%;
  border: 2px solid #fff;
}

.container {
  position: relative;
  /*width: 75% !important;
  height: 75% !important;*/
  max-width: 75% !important;
cursor: pointer;
  }

  .container img {
    width: 100%;
    height: 100%;
  }
  
  .container .btn {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: black;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
  }
  .container .div{
      background: rgba(7, 7, 7, 0.5);
        position: absolute;
    top: 5%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
  
  }
  .container .div .label {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
  }
  
  .container .imm {
    position: absolute;
    top: 40%;
    /*left: 10%;*/
    width: 99%;
    height: 50%;
    text-align: center;
  }
  
  .container .btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .img-hover-zoom {
    height: 100%; /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  }
  
  /* [2] Transition property for smooth transformation of images */
  .img-hover-zoom img {
    transition: transform .3s ease;
      filter: brightness(100%);
  
  }
  
  /* [3] Finally, transforming the image when container gets hovered */
  .img-hover-zoom:hover img {
    transform: scale(1.2);
      filter: brightness(90%);
  }

  .slick-prev:before, .slick-next:before {
    color: black !important;
font-size: 35px;
}