@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes grow {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

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

.animate-grow {
  animation: grow 0.8s ease-out;
}

/* Цветовая палитра экотуризма */
:root {
  --ivory: #FFFEF7;
  --olive: #6B8E23;
  --grass: #8FBC8F;
  --sand: #C4B5A0;
  --dark-green: #2F4F2F;
  --olive-50: #F5F7F0;
  --olive-100: #E8EDD8;
  --olive-200: #D4DBC0;
  --olive-400: #9CAF88;
  --olive-700: #556B2F;
  --grass-50: #F0F8F0;
}

.bg-ivory {
  background-color: var(--ivory);
}

.bg-olive-100 {
  background-color: var(--olive-100);
}

.bg-olive-200 {
  background-color: var(--olive-200);
}

.bg-grass-50 {
  background-color: var(--grass-50);
}

.text-dark-green {
  color: var(--dark-green);
}

.text-olive-200 {
  color: var(--olive-200);
}

.text-olive-400 {
  color: var(--olive-400);
}

.border-olive-200 {
  border-color: var(--olive-200);
}

.border-dark-green {
  border-color: var(--dark-green);
}

.from-grass-50 {
  --tw-gradient-from: var(--grass-50);
}

.to-sand-50 {
  --tw-gradient-to: var(--sand);
}

.from-dark-green {
  --tw-gradient-from: var(--dark-green);
}

.to-olive-700 {
  --tw-gradient-to: var(--olive-700);
}

.bg-dark-green {
  background-color: var(--dark-green);
}

.bg-olive-700 {
  background-color: var(--olive-700);
}

.hover\:bg-olive-700:hover {
  background-color: var(--olive-700);
}

.hover\:text-dark-green:hover {
  color: var(--dark-green);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--dark-green);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--olive-700);
}