#tabs-2 {
  /* Scoped service-item styles for the tabs section on the Used Apparatus page */

  .service-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: var(--surface-color);
    border-radius: 12px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 92%);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
      text-align: left;
    }

    .service-number {
      width: 44px;
      height: 44px;
      background: color-mix(in srgb, var(--default-color), transparent 90%);
      color: var(--default-color);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      transition: all 0.3s ease;
    }

    .service-icon {
      width: 56px;
      height: 56px;
      background: color-mix(in srgb, var(--accent-color), transparent 92%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;

      i { font-size: 22px; color: var(--accent-color); }
    }

    .service-details {
      flex: 1;

      h3 { font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; color: var(--heading-color); }
      p { color: color-mix(in srgb, var(--default-color), transparent 35%); font-size: 14px; line-height: 1.5; margin-bottom: .75rem; }
    }

    .service-action { text-align: right; flex-shrink: 0; }

    &.compact {
      padding: 1rem;

      .service-number { width: 38px; height: 38px; font-size: 14px; }
      .service-icon { width: 48px; height: 48px; i { font-size: 18px; } }
      .service-details h3 { font-size: 16px; }
      .service-action { display: none; }
    }

    &.highlight {
      border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
      box-shadow: 0 8px 26px color-mix(in srgb, var(--accent-color), transparent 85%);
    }

    &:hover {
      transform: translateX(6px);
    }
  }

  .company-badge {
        display: inline-block;
        background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
        color: var(--accent-color);
        padding: 0.5rem 1.25rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
    }
    .btn-primary {
        background-color: var(--accent-color);
        border-color: var(--accent-color);
        color: var(--contrast-color);
        padding: 0.75rem 2rem;
        font-weight: 600;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.3s ease;
    }
}

.about-3 {
    .btn-primary {
        background-color: var(--accent-color);
        border-color: var(--accent-color);
        color: var(--contrast-color);
        padding: 0.75rem 2rem;
        font-weight: 600;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.3s ease;

        &:hover {
            background-color: color-mix(in srgb, var(--accent-color), black 10%);
            border-color: color-mix(in srgb, var(--accent-color), black 10%);
            transform: translateY(-2px);
            color: var(--contrast-color);
        }
    }
}