/* Base styles */
:root {
  --primary: #15803d;
  --primary-hover: #166534;
  --secondary: #ecfccb;
  --text: #1f2937;
  --gray: #4A4A4A;
}

body {
  font-family: "Work Sans", sans-serif;
  color: var(--text);
}

/* Text styles */
.header-title {
  @apply text-2xl md:text-3xl font-bold;
}

.header-subtitle {
  @apply text-xl md:text-2xl text-gray-600;
}

.section-title {
  @apply text-3xl font-bold text-center mb-8;
}

/* Button styles */
.btn-primary {
  @apply bg-green-700 text-white px-6 py-3 rounded-lg
         hover:bg-green-800 transition-all duration-200
         focus:outline-none focus:ring-2 focus:ring-green-500
         shadow-md hover:shadow-lg;
}

.btn-secondary {
  @apply bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg
         hover:bg-gray-50 transition-colors duration-200
         focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2;
}

/* Navigation */
.nav-link {
  @apply block py-2 px-3 rounded-md transition-colors duration-200
         text-gray-700 hover:text-green-700 hover:bg-green-50;
}

.nav-link:hover {
  @apply text-green-700 bg-green-50;
}

.nav-link.active {
  @apply text-green-700 bg-green-50;
}

/* Mobile menu */
.mobile-menu {
  @apply fixed top-0 right-0 bottom-0 z-50 w-64 
         bg-white shadow-lg transform transition-transform duration-200;
}

.menu-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 z-40 hidden;
}

/* Cards */
.card {
  @apply bg-white rounded-lg shadow-lg p-6 
         hover:shadow-xl transition-all duration-200
         border border-gray-100;
}

/* Images */
.img-responsive {
  @apply w-full h-auto rounded-lg shadow-md
         hover:shadow-lg transition-shadow duration-200;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* Layout spacing */
.main-container {
  @apply container mx-auto max-w-7xl px-4 py-8;
}

/* Header & Footer */
.site-header {
  @apply bg-lime-100 py-6 shadow-sm mb-8;
}

.site-footer {
  @apply bg-lime-100 py-6 mt-8 shadow-sm;
}

.nav-container {
  @apply container mx-auto px-4 flex items-center justify-between;
}

/* Section spacing */
.section {
  @apply mb-12 last:mb-0;
}

/* Add these styles */
.container {
  max-width: 1280px;
  margin: 0 auto;
}

header {
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

main {
  margin-top: 2rem;
}