/* Solutions tabs (left side of the ".b3" section)
   Reusable on any page that contains <div class="b3 dark-block"> ... </div>
   Only the ACTIVE tab (the one currently showing / sliding) is coloured.
   Change the colours and width here only. */
.b3.dark-block {
  --tab-bg: #ee3d25;
  --tab-text: #ffffff;
  --tab-active-bar: #ffffff;
  --tab-width: 78%; /* width of each tab inside the left column - lower = narrower */
}

@media (min-width: 769px) {
  .b3.dark-block .left .list .item {
    width: var(--tab-width);
  }
}

.b3.dark-block .left .list .item {
  transition: background-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}

/* remove the old dotted overlay, it looks dirty on a solid red tab */
.b3.dark-block .left .list .item:before {
  background: none;
}

/* white chevron (the old one was 30% opacity) */
.b3.dark-block .left .list .item:after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M4.96 2.92 9.04 7l-4.08 4.08' stroke='%23fff' stroke-linejoin='round'/%3E%3C/svg%3E")
    center center / cover no-repeat;
}

/* hovered (non-active) tab: just a small nudge, no colour change */
@media (min-width: 769px) {
  .b3.dark-block .left .list .item:hover {
    transform: translateX(0.35vw);
  }
}

/* ACTIVE tab: red background, white text/icon, white bar + chevron */
.b3.dark-block .left .list .item.active {
  background: var(--tab-bg);
  border-left-color: var(--tab-active-bar);
  box-shadow: 0 0.4vw 1.2vw rgba(238, 61, 37, 0.35);
}

.b3.dark-block .left .list .item.active p {
  color: var(--tab-text);
  opacity: 1;
}

.b3.dark-block .left .list .item.active img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.b3.dark-block .left .list .item.active:after {
  opacity: 1;
}