/*--------------------------------------------------------------
# Our Product
--------------------------------------------------------------*/
/* Combined styling for both Products and Brands */
.html{
  zoom: 0.8;
}

.product .member,
.brands .member {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  zoom: 0.8;
}

/* The image container (pic) with rounded corners and border */
.product .member .pic,
.brands .member .pic {
  border-radius: 15px; /* Rounded corners */
  overflow: hidden;
  padding: 5px;
  background-color: white;
  border: 4px solid rgb(163, 163, 163);
  transition: all 0.4s ease-in-out;
  zoom: 0.8;
  box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
}

/* Ensure the image itself is rounded and set up transition */
.product .member .pic img,
.brands .member .pic img {
  width: 100%;
  display: block;
  border-radius: 15px; /* Matches container rounding */
  transition: transform 0.4s ease;
}

/* On hover, zoom the image and change the border color */
.product .member:hover .pic img,
.brands .member:hover .pic img {
  transform: scale(1.1); /* Zoom effect */
}

.product .member:hover .pic,
.brands .member:hover .pic {
  border-color: #e67a21; /* Change border color on hover */
}

.product .member .member-info,
.brands .member .member-info {
  position: absolute;
  bottom: -48px; /* Start hidden below the container */
  left: 20px;
  right: 20px;
  background: linear-gradient(360deg, #b8b8b8 0%, rgba(233,233,233,0.9) 35%, rgba(245,250,255,0.8) 100%);
  padding: 15px 0;
  border-radius: 4px;
  transition: bottom 0.3s ease;
}

/* On hover, slide the text box up so it becomes visible */
/* .product .member:hover .member-info,
.brands .member:hover .member-info {
  bottom: 0;
} */

/* Headline styling inside the box */
.product .member h4,
.brands .member h4 {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 26px;
  color: rgb(85,83,83);
  position: relative;
  padding-bottom: 10px;
}

/* Decorative underline for the headline */
.product .member h4::after,
.brands .member h4::after {
  content: '';
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: #fff;
  bottom: 0;
  left: calc(50% - 25px);
}

/* Category/text styling below the headline */
.product .member span,
.brands .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: #000000;
}