html,
body {
  scroll-behavior: smooth;
  font-family: 'Outfit', sans-serif;
}

article,
div,
section {
  scroll-margin-top: 80px;
}

.tab-button {
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-button.active {
  border-color: #ff6d00 !important; /* Accent color */
}

.tab-button:not(.active) {
  border-color: transparent !important;
  color: #2e2e2e !important; /* Secondary color */
}

.tab-button:not(.active):hover {
  border-color: #a6e22e !important; /* Primary color */
}

.tab-content {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.tab-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}
@media (max-width: 640px) {
  .tab-button {
    font-size: 0.875rem;
    padding: 0.5rem 0.25rem;
  }
}