.produk-listing {
  background-color: transparent;
  width: auto;
  height: 350px;
  border-radius: 20px 20px 20px 20px;
    box-shadow: 0px 30px 70px 0px rgb(125 125 125 / 6%)
}

/* This container is needed to position the front and back side */
.list-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.produk-listing:hover .list-wrapper .front-wrapper {
  opacity:0;
}
.produk-listing:hover .list-wrapper .back-wrapper {
  opacity:1;
}

/* Position the front and back side */
.front-wrapper, .back-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  transform: none !important;
    transition: opacity .6s ease-in-out;
    -moz-transition: opacity .6s ease-in-out;
    -webkit-transition: opacity .6s ease-in-out;
}

/* Style the front side */
.front-wrapper {
    background-color: #fefefe;
    opacity:1;
    background-color: #FCFCFC;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: #FEFEFE;
}

/* Style the back side */
.back-wrapper {
    background-color: transparent;
    background-image: radial-gradient(at center left, #00834C 0%, #0B4B30 100%);
    opacity:0;
    color:#ffffff;
    border-radius: 20px 20px 20px 20px;
    width: calc(100% + 10px);
    height:calc(100% + 10px);
    justify-content:center;
    align-items: center;
    padding:10px;
}
.produk-listing .feature-image{
    margin-left:-9px;
    margin-right:-9px;
}
.produk-listing .feature-image img{
    border-radius:20px 20px 0 0;
}
.produk-listing .simple-desc{
    font-size:12px;
    line-height:24px;
    font-family: "Quicksand", Sans-serif;
    font-weight: 500;
}
.produk-listing .kapasitas{
    font-size:14px;
    line-height:24px;
    font-family: "Quicksand", Sans-serif;
    font-weight: 500;
}
.produk-listing .harga{
    font-size:16px;
    line-height:24px;
    font-family: "Quicksand", Sans-serif;
    font-weight: 600;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.produk-listing .title-back{
    text-align: center;
    font: normal normal 600 16px/24px Raleway;
    letter-spacing: 0px;
    text-transform: capitalize;
    opacity: 1;
    display: flex;
    justify-content: center;
    margin-bottom:10px;
}
.produk-listing .alamat{
    text-align: center;
    font: normal normal 600 14px/24px Raleway;
    letter-spacing: 0px;
    text-transform: capitalize;
    opacity: 1;
    display: flex;
    justify-content: center;
    margin-bottom:10px;
}
.produk-listing .link a button{
    font-family: "Quicksand", Sans-serif;
    font-weight: 500;
    background-color: transparent;
    background-image: linear-gradient(180deg, var( --e-global-color-8de5183 ) 0%, var( --e-global-color-013f2a5 ) 100%);
    border-width: 0px;
    border-radius: 20px;
    color:#fefefe;
    padding:10px 60px;
}
.facetwp-facet{
    margin:0 !important;
}
.fs-wrap{
    width:100% !important;
}