:root {
  --color-primary: "#065f46";
  --color-primary-dark: #022c21;
  --color-accent: #10b981;
  --color-text: #042018;
  --color-text-light: #3a6050;
  --color-bg: #f8fdfb;
  --color-bg-alt: #ecfdf5;
  --color-border: #a7f3d0;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

.hero {
  background-image: linear-gradient(160deg, rgba(6,95,70,0.86) 0%, rgba(2,44,33,0.76) 100%), url('https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size: cover;
  background-position: center;
}

.hero h1,
.hero-sub {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hub-featured-img {
  object-position: center center;
}