/* Block Colors Fix - White borders for dots only */
.first-block,
.secend-block {
  border: 1px solid #fff !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease;
}

/* Make tabs clickable */
.hero-tabs {
  cursor: pointer;
}

/* Text color states */
/* Default/unselected state - grayish color */
.hero-tabs_-title {
  color: rgba(255, 255, 255, 0.6) !important;
  transition: color 0.2s ease;
}

/* When Anticipate is hovered/selected - white text */
.hero-hover.anticipate-hovered .hero-tabs.first .hero-tabs_-title,
.hero-hover.anticipate-selected .hero-tabs.first .hero-tabs_-title {
  color: #fff !important;
}

/* When Respond is hovered/selected - white text */
.hero-hover.respond-hovered .hero-tabs.second .hero-tabs_-title,
.hero-hover.respond-selected .hero-tabs.second .hero-tabs_-title {
  color: #fff !important;
}

/* Dot indicators based on hover state */
/* When Anticipate is hovered */
.hero-hover.anticipate-hovered .first-block {
  background-color: #fff !important;
}

.hero-hover.anticipate-hovered .secend-block {
  background-color: transparent !important;
}

/* When Respond is hovered */
.hero-hover.respond-hovered .first-block {
  background-color: transparent !important;
}

.hero-hover.respond-hovered .secend-block {
  background-color: #fff !important;
}

/* Text descriptions - follow the same pattern */
.hero-tabs_-text {
  color: rgba(255, 255, 255, 0.6) !important;
  transition: color 0.2s ease;
}

.hero-hover.anticipate-hovered .hero-tabs.first .hero-tabs_-text,
.hero-hover.anticipate-selected .hero-tabs.first .hero-tabs_-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

.hero-hover.respond-hovered .hero-tabs.second .hero-tabs_-text,
.hero-hover.respond-selected .hero-tabs.second .hero-tabs_-text {
  color: rgba(255, 255, 255, 0.9) !important;
}