.tabs-wrap {
  width: 100%;
  overflow: hidden;
}
.tabs-wrap .tabs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--grid-gap-medium);
  border: none;
  flex-wrap: wrap;
}
.tabs-wrap .tabs.left,
.tabs-wrap .tabs.between {
  justify-content: flex-start;
}
.tabs-wrap .tabs.right {
  justify-content: flex-end;
}
.tabs-wrap .tabs.center {
  justify-content: center;
}
.tabs-wrap .tab {
  margin: 0;
}
.tabs-wrap .tab a {
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
}
.tabs-wrap .tab .tab-icon {
  flex-shrink: 0;
  width: 40px;
}
.tabs-wrap .tabs.style1 li {
  position: relative;
  padding: 0 10px 8px;
}
.tabs-wrap .tabs.style1 li a {
  color: var(--text-color);
}
.tabs-wrap .tabs.style1 li a.active {
  color: var(--theme-btn-bg-color);
  background: none;
  font-weight: 600;
}
.tabs-wrap .tabs.style1 li a.active::after  {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--theme-btn-bg-color);
}

.tabs-wrap .tabs.style2 li {
  position: relative;
  padding-right: 28px;
}
.tabs-wrap .tabs.style2 li a {
  color: var(--text-color);
}
.tabs-wrap .tabs.style2 li::after  {
  content: "";
  position: absolute;
  top: 16%;
  right: 4px;
  width: 1px;
  height: 68%;
  transform: rotate(18deg);
  background: var(--border-color);
}
.tabs-wrap .tabs.style2 li:last-of-type::after {
  content: none;
}
.tabs-wrap .tabs.style2 li a.active {
  color: var(--theme-btn-bg-color);
  background: none;
  font-weight: 600;
}

.tabs-wrap .tabs.style3 li a {
  padding: 4px 16px;
  color: var(--text-color);
  border-radius: 16px;
  background: var(--transparent-card-bg-color);
}
.tabs-wrap .tabs.style3 li a.active {
  color: var(--theme-btn-text-color);
  background-color: var(--theme-btn-bg-color);
  border: none;
}

@media screen and (max-width: 1024px) {
  .tabs-wrap .tabs {
    flex-wrap: nowrap;
    justify-content: center;
  }
  
  .tabs-wrap .tabs.overflow-scroll {
    justify-content: flex-start;
    overflow: auto hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }

  .tabs-wrap .tabs::-webkit-scrollbar {
    display: none;
  }
}