.infographic-wrapper {
  max-width: 700px;
  max-height: 700px;
  position: relative;
}

svg {
  width: 100%;
  height: 100%;
}

.infographic-slices {
  transform-origin: 225px 225px;
  -webkit-transform-origin: 225px 225px;
  -moz-transform-origin: 225px 225px;
  -ms-transform-origin: 225px 225px;
}

.infographic-center .circle1 {
  fill: #fff;
  stroke: #b18d56;
  /* stroke-width: 2px; */
}

.infographic-center .circle2 {
  fill: #b18d56;
  stroke: #333;
  stroke-width: 20px;
}

.infographic-center .text1 {
  font-family: "Metropolis-Bold";
  font-weight: 800;
  font-size: 36px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #b18d56;
  font-weight: bold;
}

.infographic-center .text2 {
  font-size: 8px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #b18d56;
  font-family: "Metropolis";
  font-weight: bold;
}

.infographic-center .centerLabelHeading {
  font-size: 16px;
}

.centerLabelTitle {
  font-family: "Metropolis";
  font-size: 10px;
  fill: #b18d56;
  font-weight: 800;
  text-transform: uppercase;
  text-anchor: middle;
  dominant-baseline: middle;
}

.slice {
  cursor: pointer;
  /* smooth fill transition */
  transition: fill 0.8s ease-in-out;
}

.slice-group {
  cursor: pointer;
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: 225px 225px;
}

.slice-group.expanded {
  transform: scale(1.07);
}

/* 15342A  */
/* selected slice color */
.slice-group.expanded .slice {
  fill: #b99359 !important;
}

.slice-group:hover .slice {
  opacity: 0.9;
}

.slice-label {
  font-size: 8px;
  font-family: "Metropolis";
  fill: #fff;
  text-anchor: middle;
}

/* Smooth fade + slide transitions for text */
.text-transition {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.text-fade-out {
  opacity: 0;
  transform: translateY(10px);
}

.text-fade-in {
  opacity: 0;
  transform: translateY(-10px);
}

.text-fade-in.active {
  opacity: 1;
  transform: translateY(0);
}