.housing-card {
  width: 320px;
  background-color: #214552;
}

.housing-dark {
  background-color: #193640;
}

.transportation-card {
  width: 320px;
  background-color: #fe571e;
}

.transportation-dark {
  background-color: #e14b1c;
}

.healthcare-card {
  width: 320px;
  background-color: #33a493;
}

.healthcare-dark {
  background-color: #2f8f80;
}

.employment-card {
  width: 320px;
  background-color: #6d1a48;
}

.employment-dark {
  background-color: #5c143c;
}

.livability-card {
  width: 320px;
  background-color: #186d77;
}

.livability-dark {
  background-color: #175761;
}

.housing-status {
  background-color: #7fa843;
  padding: 3rem 1.5rem;
}

.housing-status-needsattention {
  background-color: #b02724;
  padding: 3rem 1.5rem;
}

.housing-status-inprogress {
  background-color: #efb734;
  padding: 3rem 1.5rem;
}

.housing-status-ontrack {
  background-color: #7fa843;
  padding: 3rem 1.5rem;
}

.housing-status-achieved {
  background-color: #5ecaf1;
  padding: 3rem 1.5rem;
}

.housing-status-noassessment {
  background-color: #c6c7c9;
  padding: 3rem 1.5rem;
}

.status-description {
  font-size: 1.3em;
}

.letter-spacing-2 {
  letter-spacing: 0.2em;
}

.letter-spacing-1 {
  letter-spacing: 0.09em;
}
.opacity-25 {
    opacity: .25 !important;
}
.opacity-10 {
    opacity: .05 !important;
}
.status-footer {
  min-height: 120px; /* adjust until all rows align visually */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.color-bar {
  display: flex;
  width: 100%;
  height: 48px; /* adjust to match your design */
  overflow: hidden;
}

.segment {
  height: 100%;
}

/* Adjust flex values to control relative widths */
.segment-1 {
  flex: 6;
  background-color: #2f4f5b; /* deep blue/teal */
}

.segment-2 {
  flex: 2;
  background-color: #f26522; /* orange */
}

.segment-3 {
  flex: 2;
  background-color: #2a9d8f; /* teal green */
}

.segment-4 {
  flex: 2;
  background-color: #7a1e5c; /* plum */
}
.btn.btn-outline-black {
  background-color: transparent;
  color: #000;
  border: 1px solid #000 !important;
}
.category-icon {
  width: 52px;
  height: auto;
  display: block;
}