/* FRONT SIDE (image with gold overlay + white text) */
.vc-hoverbox-front {
  position: relative;
  color: #ffffff !important; /* Text color white */
}
.vc-hoverbox-front .vc-hoverbox-block-inner,
.vc-hoverbox-front h2,
.vc-hoverbox-front h3,
.vc-hoverbox-front p,
.vc-hoverbox-front span {
  color: #ffffff !important;
  position: relative;
  z-index: 2; /* keep text above overlay */
}

/* Gold overlay on the front side */
.vc-hoverbox-front::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(212, 175, 55, 0.75); /* gold with 75% opacity */
  z-index: 1; /* sits behind the text */
}

/* BACK SIDE (solid purple + white text) */
.vc-hoverbox-back {
  background-color: #800080 !important; /* Purple */
  color: #ffffff !important;
}
.vc-hoverbox-back .vc-hoverbox-block-inner,
.vc-hoverbox-back h2,
.vc-hoverbox-back h3,
.vc-hoverbox-back p,
.vc-hoverbox-back span {
  color: #ffffff !important;
}/* --- Hover Box FRONT SIDE --- */

/* Ensure images fill the entire box */
.vc-hoverbox-front {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative;
  color: #ffffff !important; /* Default text color white */
}

/* Gold overlay on top of image */
.vc-hoverbox-front::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(212, 175, 55, 0.6); /* gold with 60% opacity */
  z-index: 1; /* Overlay sits above the image */
}

/* Keep text above the overlay */
.vc-hoverbox-front .vc-hoverbox-block-inner,
.vc-hoverbox-front h2,
.vc-hoverbox-front h3,
.vc-hoverbox-front p,
.vc-hoverbox-front span {
  color: #ffffff !important;
  position: relative;
  z-index: 2;
}