.ttf-funding-chart {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ttf-funding-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.ttf-bar-container {
  position: relative;
  height: 100px;
  width: 100%;
  overflow: hidden;
}

.ttf-bar-fill {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.5s ease;
}
/* Now opacity control via classes */
.row-1 {
  background-color: rgba(96, 150, 160, 0.4);
}
.row-2 {
  background-color: rgba(96, 150, 160, 0.6);
}
.row-3 {
  background-color: rgba(96, 150, 160, 0.8);
}
.row-4,
.row-5,
.row-6 {
  background-color: rgba(96, 150, 160, 1);
}

.ttf-bar-text {
  position: relative;
  z-index: 2;
  padding: 20px;
  color: var(--navy-blue);
}

.ttf-revenue {
  color: var(--parchment);
  margin-top: 0.25rem;
}

.ttf-percentage {
  color: var(--navy-blue);
  min-width: 80px;
  text-align: right;
}
@media (max-width: 767px) {
  .ttf-funding-row {
    max-width: 90%;
  }
}