@tailwind base;
@tailwind components;
@tailwind utilities;

@theme {
  /* Define your custom breakpoints: */
  --breakpoint-xs: 475px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}
@layer base {
  :root {
    /* Primary Colors */
    --color-primary-100: #ed2ee; /* RGB(237, 242, 238) */
    --color-primary-200: #d5ecc6; /* RGB(213, 236, 198) */
    --color-primary-300: #c0e49e; /* RGB(192, 228, 158) */
    --color-primary-400: #4f9f5f; /* RGB(79, 159, 95) */
    --color-primary-500: #71a76e; /* RGB(113, 167, 110) */
    --color-primary-600: #63a370; /* RGB(99, 163, 112) */
    --color-primary-700: #306141; /* RGB(48, 97, 65) */
    --color-primary-800: #2f5e4a; /* RGB(47, 94, 74) */
    --color-primary-900: #244339; /* RGB(36, 67, 57) */
    --color-primary-1000: #142d1e; /* RGB(20, 45, 30) */

    /* Light Primary Colors */
    --color-light-primary-100: #d9f8d4; /* RGB(217, 248, 212) */
    --color-light-primary-200: #c3f0b5; /* RGB(195, 240, 181) */
    --color-light-primary-300: #add8a9; /* RGB(173, 216, 169) */
    --color-light-primary-400: #9fde9f; /* RGB(159, 222, 159) */
    --color-light-primary-500: #85da83; /* RGB(133, 218, 131) */
    --color-light-primary-600: #7fda75; /* RGB(127, 218, 117) */
    --color-light-primary-700: #64a96b; /* RGB(100, 169, 107) */
    --color-light-primary-800: #509758; /* RGB(80, 151, 88) */
    --color-light-primary-900: #3c9442; /* RGB(60, 148, 66) */
    --color-light-primary-1000: #216433; /* RGB(33, 100, 51) */

    /* Secondary Colors */
    --color-secondary-100: #f5faec; /* RGB(245, 250, 236) */
    --color-secondary-200: #eef5d2; /* RGB(238, 245, 210) */
    --color-secondary-300: #e6f0b7; /* RGB(230, 240, 183) */
    --color-secondary-400: #d9e8b2; /* RGB(217, 232, 178) */
    --color-secondary-500: #c4de96; /* RGB(196, 222, 150) */
    --color-secondary-600: #a9d483; /* RGB(169, 212, 131) */
    --color-secondary-700: #8a8a30; /* RGB(138, 138, 48) */
    --color-secondary-800: #9a7b2c; /* RGB(154, 123, 44) */
    --color-secondary-900: #335c1d; /* RGB(51, 92, 29) */
    --color-secondary-1000: #404a16; /* RGB(64, 74, 22) */

    /* Neutral Colors */
    --color-neutral-100: #f1f1f1; /* RGB(241, 241, 241) */
    --color-neutral-200: #eeeeee; /* RGB(238, 238, 238) */
    --color-neutral-300: #e4e4e4; /* RGB(228, 228, 228) */
    --color-neutral-400: #dbdbdb; /* RGB(219, 219, 219) */
    --color-neutral-500: #c2c2c2; /* RGB(194, 194, 194) */
    --color-neutral-600: #a0a0a0; /* RGB(160, 160, 160) */
    --color-neutral-700: #bfbfbf; /* RGB(191, 191, 191) */
    --color-neutral-800: #a7a7a7; /* RGB(167, 167, 167) */
    --color-neutral-900: #949494; /* RGB(148, 148, 148) */
    --color-neutral-1000: #7d7d7d; /* RGB(125, 125, 125) */
  }
}

@layer utilities {
  /* Primary Color Utilities */
  .bg-primary-100 {
    background-color: var(--color-primary-100);
  }
  .bg-primary-200 {
    background-color: var(--color-primary-200);
  }
  .bg-primary-300 {
    background-color: var(--color-primary-300);
  }
  .bg-primary-400 {
    background-color: var(--color-primary-400);
  }
  .bg-primary-500 {
    background-color: var(--color-primary-500);
  }
  .bg-primary-600 {
    background-color: var(--color-primary-600);
  }
  .bg-primary-700 {
    background-color: var(--color-primary-700);
  }
  .bg-primary-800 {
    background-color: var(--color-primary-800);
  }
  .bg-primary-900 {
    background-color: var(--color-primary-900);
  }
  .bg-primary-1000 {
    background-color: var(--color-primary-1000);
  }

  .text-primary-100 {
    color: var(--color-primary-100);
  }
  .text-primary-200 {
    color: var(--color-primary-200);
  }
  .text-primary-300 {
    color: var(--color-primary-300);
  }
  .text-primary-400 {
    color: var(--color-primary-400);
  }
  .text-primary-500 {
    color: var(--color-primary-500);
  }
  .text-primary-600 {
    color: var(--color-primary-600);
  }
  .text-primary-700 {
    color: var(--color-primary-700);
  }
  .text-primary-800 {
    color: var(--color-primary-800);
  }
  .text-primary-900 {
    color: var(--color-primary-900);
  }
  .text-primary-1000 {
    color: var(--color-primary-1000);
  }

  .border-primary-100 {
    border-color: var(--color-primary-100);
  }
  .border-primary-200 {
    border-color: var(--color-primary-200);
  }
  .border-primary-300 {
    border-color: var(--color-primary-300);
  }
  .border-primary-400 {
    border-color: var(--color-primary-400);
  }
  .border-primary-500 {
    border-color: var(--color-primary-500);
  }
  .border-primary-600 {
    border-color: var(--color-primary-600);
  }
  .border-primary-700 {
    border-color: var(--color-primary-700);
  }
  .border-primary-800 {
    border-color: var(--color-primary-800);
  }
  .border-primary-900 {
    border-color: var(--color-primary-900);
  }
  .border-primary-1000 {
    border-color: var(--color-primary-1000);
  }

  /* Light Primary Color Utilities */
  .bg-light-primary-100 {
    background-color: var(--color-light-primary-100);
  }
  .bg-light-primary-200 {
    background-color: var(--color-light-primary-200);
  }
  .bg-light-primary-300 {
    background-color: var(--color-light-primary-300);
  }
  .bg-light-primary-400 {
    background-color: var(--color-light-primary-400);
  }
  .bg-light-primary-500 {
    background-color: var(--color-light-primary-500);
  }
  .bg-light-primary-600 {
    background-color: var(--color-light-primary-600);
  }
  .bg-light-primary-700 {
    background-color: var(--color-light-primary-700);
  }
  .bg-light-primary-800 {
    background-color: var(--color-light-primary-800);
  }
  .bg-light-primary-900 {
    background-color: var(--color-light-primary-900);
  }
  .bg-light-primary-1000 {
    background-color: var(--color-light-primary-1000);
  }

  .text-light-primary-100 {
    color: var(--color-light-primary-100);
  }
  .text-light-primary-200 {
    color: var(--color-light-primary-200);
  }
  .text-light-primary-300 {
    color: var(--color-light-primary-300);
  }
  .text-light-primary-400 {
    color: var(--color-light-primary-400);
  }
  .text-light-primary-500 {
    color: var(--color-light-primary-500);
  }
  .text-light-primary-600 {
    color: var(--color-light-primary-600);
  }
  .text-light-primary-700 {
    color: var(--color-light-primary-700);
  }
  .text-light-primary-800 {
    color: var(--color-light-primary-800);
  }
  .text-light-primary-900 {
    color: var(--color-light-primary-900);
  }
  .text-light-primary-1000 {
    color: var(--color-light-primary-1000);
  }

  .border-light-primary-100 {
    border-color: var(--color-light-primary-100);
  }
  .border-light-primary-200 {
    border-color: var(--color-light-primary-200);
  }
  .border-light-primary-300 {
    border-color: var(--color-light-primary-300);
  }
  .border-light-primary-400 {
    border-color: var(--color-light-primary-400);
  }
  .border-light-primary-500 {
    border-color: var(--color-light-primary-500);
  }
  .border-light-primary-600 {
    border-color: var(--color-light-primary-600);
  }
  .border-light-primary-700 {
    border-color: var(--color-light-primary-700);
  }
  .border-light-primary-800 {
    border-color: var(--color-light-primary-800);
  }
  .border-light-primary-900 {
    border-color: var(--color-light-primary-900);
  }
  .border-light-primary-1000 {
    border-color: var(--color-light-primary-1000);
  }

  /* Secondary Color Utilities */
  .bg-secondary-100 {
    background-color: var(--color-secondary-100);
  }
  .bg-secondary-200 {
    background-color: var(--color-secondary-200);
  }
  .bg-secondary-300 {
    background-color: var(--color-secondary-300);
  }
  .bg-secondary-400 {
    background-color: var(--color-secondary-400);
  }
  .bg-secondary-500 {
    background-color: var(--color-secondary-500);
  }
  .bg-secondary-600 {
    background-color: var(--color-secondary-600);
  }
  .bg-secondary-700 {
    background-color: var(--color-secondary-700);
  }
  .bg-secondary-800 {
    background-color: var(--color-secondary-800);
  }
  .bg-secondary-900 {
    background-color: var(--color-secondary-900);
  }
  .bg-secondary-1000 {
    background-color: var(--color-secondary-1000);
  }

  .text-secondary-100 {
    color: var(--color-secondary-100);
  }
  .text-secondary-200 {
    color: var(--color-secondary-200);
  }
  .text-secondary-300 {
    color: var(--color-secondary-300);
  }
  .text-secondary-400 {
    color: var(--color-secondary-400);
  }
  .text-secondary-500 {
    color: var(--color-secondary-500);
  }
  .text-secondary-600 {
    color: var(--color-secondary-600);
  }
  .text-secondary-700 {
    color: var(--color-secondary-700);
  }
  .text-secondary-800 {
    color: var(--color-secondary-800);
  }
  .text-secondary-900 {
    color: var(--color-secondary-900);
  }
  .text-secondary-1000 {
    color: var(--color-secondary-1000);
  }

  .border-secondary-100 {
    border-color: var(--color-secondary-100);
  }
  .border-secondary-200 {
    border-color: var(--color-secondary-200);
  }
  .border-secondary-300 {
    border-color: var(--color-secondary-300);
  }
  .border-secondary-400 {
    border-color: var(--color-secondary-400);
  }
  .border-secondary-500 {
    border-color: var(--color-secondary-500);
  }
  .border-secondary-600 {
    border-color: var(--color-secondary-600);
  }
  .border-secondary-700 {
    border-color: var(--color-secondary-700);
  }
  .border-secondary-800 {
    border-color: var(--color-secondary-800);
  }
  .border-secondary-900 {
    border-color: var(--color-secondary-900);
  }
  .border-secondary-1000 {
    border-color: var(--color-secondary-1000);
  }

  /* Neutral Color Utilities */
  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }
  .bg-neutral-200 {
    background-color: var(--color-neutral-200);
  }
  .bg-neutral-300 {
    background-color: var(--color-neutral-300);
  }
  .bg-neutral-400 {
    background-color: var(--color-neutral-400);
  }
  .bg-neutral-500 {
    background-color: var(--color-neutral-500);
  }
  .bg-neutral-600 {
    background-color: var(--color-neutral-600);
  }
  .bg-neutral-700 {
    background-color: var(--color-neutral-700);
  }
  .bg-neutral-800 {
    background-color: var(--color-neutral-800);
  }
  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }
  .bg-neutral-1000 {
    background-color: var(--color-neutral-1000);
  }

  .text-neutral-100 {
    color: var(--color-neutral-100);
  }
  .text-neutral-200 {
    color: var(--color-neutral-200);
  }
  .text-neutral-300 {
    color: var(--color-neutral-300);
  }
  .text-neutral-400 {
    color: var(--color-neutral-400);
  }
  .text-neutral-500 {
    color: var(--color-neutral-500);
  }
  .text-neutral-600 {
    color: var(--color-neutral-600);
  }
  .text-neutral-700 {
    color: var(--color-neutral-700);
  }
  .text-neutral-800 {
    color: var(--color-neutral-800);
  }
  .text-neutral-900 {
    color: var(--color-neutral-900);
  }
  .text-neutral-1000 {
    color: var(--color-neutral-1000);
  }

  .border-neutral-100 {
    border-color: var(--color-neutral-100);
  }
  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }
  .border-neutral-300 {
    border-color: var(--color-neutral-300);
  }
  .border-neutral-400 {
    border-color: var(--color-neutral-400);
  }
  .border-neutral-500 {
    border-color: var(--color-neutral-500);
  }
  .border-neutral-600 {
    border-color: var(--color-neutral-600);
  }
  .border-neutral-700 {
    border-color: var(--color-neutral-700);
  }
  .border-neutral-800 {
    border-color: var(--color-neutral-800);
  }
  .border-neutral-900 {
    border-color: var(--color-neutral-900);
  }
  .border-neutral-1000 {
    border-color: var(--color-neutral-1000);
  }

  /* Hover Utilities */
  .hover\:bg-primary-100:hover {
    background-color: var(--color-primary-100);
  }
  .hover\:bg-primary-200:hover {
    background-color: var(--color-primary-200);
  }
  .hover\:bg-primary-300:hover {
    background-color: var(--color-primary-300);
  }
  .hover\:bg-primary-400:hover {
    background-color: var(--color-primary-400);
  }
  .hover\:bg-primary-500:hover {
    background-color: var(--color-primary-500);
  }
  .hover\:bg-primary-600:hover {
    background-color: var(--color-primary-600);
  }
  .hover\:bg-primary-700:hover {
    background-color: var(--color-primary-700);
  }
  .hover\:bg-primary-800:hover {
    background-color: var(--color-primary-800);
  }
  .hover\:bg-primary-900:hover {
    background-color: var(--color-primary-900);
  }
  .hover\:bg-primary-1000:hover {
    background-color: var(--color-primary-1000);
  }

  .hover\:text-primary-100:hover {
    color: var(--color-primary-100);
  }
  .hover\:text-primary-200:hover {
    color: var(--color-primary-200);
  }
  .hover\:text-primary-300:hover {
    color: var(--color-primary-300);
  }
  .hover\:text-primary-400:hover {
    color: var(--color-primary-400);
  }
  .hover\:text-primary-500:hover {
    color: var(--color-primary-500);
  }
  .hover\:text-primary-600:hover {
    color: var(--color-primary-600);
  }
  .hover\:text-primary-700:hover {
    color: var(--color-primary-700);
  }
  .hover\:text-primary-800:hover {
    color: var(--color-primary-800);
  }
  .hover\:text-primary-900:hover {
    color: var(--color-primary-900);
  }
  .hover\:text-primary-1000:hover {
    color: var(--color-primary-1000);
  }

  .hover\:border-primary-100:hover {
    border-color: var(--color-primary-100);
  }
  .hover\:border-primary-200:hover {
    border-color: var(--color-primary-200);
  }
  .hover\:border-primary-300:hover {
    border-color: var(--color-primary-300);
  }
  .hover\:border-primary-400:hover {
    border-color: var(--color-primary-400);
  }
  .hover\:border-primary-500:hover {
    border-color: var(--color-primary-500);
  }
  .hover\:border-primary-600:hover {
    border-color: var(--color-primary-600);
  }
  .hover\:border-primary-700:hover {
    border-color: var(--color-primary-700);
  }
  .hover\:border-primary-800:hover {
    border-color: var(--color-primary-800);
  }
  .hover\:border-primary-900:hover {
    border-color: var(--color-primary-900);
  }
  .hover\:border-primary-1000:hover {
    border-color: var(--color-primary-1000);
  }

  /* Add similar hover utilities for other color categories */
}

body {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  color: #3f6746;
}

.bg-grid {
  background-image: url("/static/images/hero_section.png");
  background-size: cover;
  background-position: center;
}

.bg-impact {
  background-image: url("/static/images/impact bg.png");
  background-size: cover;
  background-position: center;
  background-color: rgba(147, 164, 51, 0.7);
  background-blend-mode: overlay;
}

.bg-about {
  background-image: url("/static/images/about_bg.png");
  background-size: cover;
  background-position: center;
}

.flex-items{
  display: flex;
  align-items: flex-start;
  row-gap: 0.4rem;
}

.text-primary {
  color: #4f8157;
}

.text-accent {
  color: #b8cd40;
}

.bg-primary {
  background-color: #63a06d;
}

.bg-accent {
  background-color: #b8cd40;
}

.bg-light {
  background-color: #edf2ee;
}

.bg-card {
  background-color: #e5ece6;
}

.bg-card-dark {
  background-color: #5c9766;
}

.border-accent {
  border-color: #b8cd40;
}

.text-light-green {
  color: #e9f0c4;
}

*{
  box-sizing:border-box !important;
}

.btn{
  padding: 0.8rem 1.2rem;
  border-radius: 0.2rem;
  text-align: center;
  border: 1px solid #5DC269;
  cursor: pointer;

}

.cta{
  background-color: #5DC269;
  color: #fff;
  cursor: pointer;
}