/* Expanded Industry Capabilities */
.solution-stat-wrapper {
  text-align: center;
  background-color: rgba(26, 188, 156, 0.1); /* Slightly darker background to distinguish from Challenge/Solution */
  border-radius: 6px;
  padding: 12px;
  margin-top: 23px; /* Reduced space between Challenge/Solution and metrics */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); /* More pronounced shadow */
}

.solution-stat {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.1rem;
}

/* Refined Challenge/Solution Section */
.challenge-solution-box {
  position: relative;
  height: auto;
  margin: -5px 0px 0px 0px; /* Reduced top margin to bring closer to intro text */
  border-radius: 4px; /* Smaller radius for more subtle appearance */
  overflow: hidden;
  transition: all 0.3s ease;
  background-color: rgba(0, 0, 0, 0.03); /* Light gray background to distinguish from metrics */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); /* Very subtle shadow */
  border: none !important; /* Force remove border */
}

/* Add a subtle hover effect to indicate interactivity */
.challenge-solution-box:hover {
  background-color: rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.cs-tabs {
  position: relative;
  z-index: 10;
  display: flex;
  background-color: rgba(0, 0, 0, 0.05); /* Slightly darker than box background */
  border-radius: 0; /* Remove border radius from tabs bar */
  border: none !important; /* Force remove border */
}

.cs-tab {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 6px 10px; /* Compact padding */
  font-size: 0.8rem; /* Smaller font size */
  letter-spacing: 0.2px;
  font-weight: 500;
  color: var(--secondary);
  transition: all 0.25s ease;
  border: none !important; /* Force remove border */
  background: transparent;
  position: relative;
  margin: 0;
  outline: none;
}

.cs-tab::after {
  content: "+";
  display: inline-block;
  margin-left: 4px;
  font-size: 0.75rem;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.cs-tab.active::after {
  content: "−";
  opacity: 0.9;
}

.cs-tab.active {
  background-color: rgba(26, 188, 156, 0.1);
  font-weight: 600;
  color: var(--secondary); /* Changed to secondary color for distinction */
  border-bottom: 2px solid var(--secondary) !important; /* Changed to secondary color */
}

.cs-content {
  display: none; /* Hide by default */
  padding: 10px 12px; /* Compact padding */
  font-size: 0.85rem; /* Smaller font */
  line-height: 1.4;
  color: var(--gray);
  border: none !important; /* Force remove border */
  position: relative;
  background-color: rgba(0, 0, 0, 0.02); /* Very subtle gray background */
}

.cs-content.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

.cs-content strong {
  color: var(--secondary); /* Make bold text stand out with secondary color */
}

/* Smooth fade in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Override any framework button styles */
.cs-tab:focus, .cs-tab:active {
  outline: none;
  box-shadow: none;
  border: none !important;
}

/* Only apply bottom border to active tab */
.cs-tab:not(.active) {
  border-bottom: none !important;
}

/* Improve spacing in solution description */
.solution-description {
  margin-bottom: 10px; /* Reduced space before Challenge/Solution */
}

/* Make solution title more prominent to improve hierarchy */
.solution-title {
  margin-bottom: 14px;
}