html,
body {
  scroll-behavior: smooth;
}

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

body {
  font-family: 'Quicksand', sans-serif;
  background-color: #faf7f1; /* Neutral-light */
  color: #1f2937; /* A dark neutral for text */
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #111827; /* A darker neutral for headings */
}
/* Specific colour overrides based on palette */
.text-primary {
  color: #4caf50;
}
.bg-primary {
  background-color: #4caf50;
}
.border-primary {
  border-color: #4caf50;
}
.hover\:bg-primary-dark:hover {
  background-color: #388e3c;
} /* Darker shade of Primary */

.text-secondary {
  color: #bfd8b8;
}
.bg-secondary {
  background-color: #bfd8b8;
}
.border-secondary {
  border-color: #bfd8b8;
}

.text-accent {
  color: #c7e8ac;
}
.bg-accent {
  background-color: #c7e8ac;
}
.border-accent {
  border-color: #c7e8ac;
}

.bg-neutral-light {
  background-color: #faf7f1;
}
.text-dark-neutral {
  color: #1f2937;
} /* Used for general text */
.text-darker-neutral {
  color: #111827;
} /* Used for headings */

/* Ensure tab active color uses primary */
.tab-button.active {
  border-color: #4caf50 !important; /* Primary */
  color: #4caf50 !important; /* Primary */
}

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

/* Style for the dark footer background */
.bg-footer-dark {
  background-color: #1a1d20; /* A chosen dark neutral */
  color: white; /* Ensure text is white */
}
.bg-footer-dark hr {
  border-color: #4caf50; /* Primary for contrast */
}
.bg-footer-dark ul li a {
  color: #bfd8b8; /* Secondary for links */
}
.bg-footer-dark ul li a:hover {
  color: #c7e8ac; /* Accent for hover */
}

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

/* Updated tab active and hover colors to match palette */
.tab-button.active {
  border-color: #4caf50 !important; /* Primary */
  color: #4caf50 !important; /* Primary */
}

.tab-button:not(.active) {
  border-color: transparent !important;
  color: #1f2937 !important; /* Dark neutral */
}

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

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

.tab-content.active {
  display: grid; /* Changed from block to grid to maintain layout */
  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;
  }
}