/* body {
  font-family: "Roboto", sans-serif;
} */

body {
  font-family: 'Fredoka', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #333; /* Good neutral color for DM Sans */
}

:root {
  --agri-green: #005432;
  /* Match your specific green */
  --agri-orange: #ee7d31;
}

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

.text-agri-orange {
  color: var(--agri-orange);
}

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

.border-agri-orange {
  border-color: var(--agri-orange);
}

.jagged-edge {
  position: absolute;
  bottom: -40px;
  /* Increased to allow for deeper tears */
  left: 0;
  width: 100%;
  height: 50px;
  background-color: white;
  z-index: -1;
  /* A much more chaotic polygon for a "rough" tear */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 70%,
    99% 82%,
    97% 65%,
    95% 91%,
    93% 72%,
    91% 88%,
    89% 68%,
    87% 94%,
    85% 71%,
    83% 89%,
    81% 66%,
    79% 97%,
    77% 73%,
    75% 91%,
    73% 69%,
    71% 85%,
    69% 70%,
    67% 93%,
    65% 68%,
    63% 89%,
    61% 72%,
    59% 96%,
    57% 74%,
    55% 90%,
    53% 67%,
    51% 86%,
    49% 71%,
    47% 94%,
    45% 69%,
    43% 88%,
    41% 73%,
    39% 98%,
    37% 75%,
    35% 91%,
    33% 68%,
    31% 87%,
    29% 71%,
    27% 95%,
    25% 68%,
    23% 89%,
    21% 72%,
    19% 97%,
    17% 74%,
    15% 92%,
    13% 69%,
    11% 86%,
    9% 71%,
    7% 96%,
    5% 70%,
    3% 88%,
    1% 72%,
    0% 95%
  );
}

/* Optional: Add a very slight shadow underneath the tear to make it pop */
.jagged-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: -2;
  /* Matches the polygon but shifted down 2px */
  clip-path: polygon(
    0% 2%,
    100% 2%,
    100% 72%,
    99% 84%,
    97% 67%,
    95% 93%,
    93% 74%,
    91% 90%,
    89% 70%,
    87% 96%,
    85% 73%,
    83% 91%,
    81% 68%,
    79% 99%,
    77% 75%,
    75% 93%,
    73% 71%,
    71% 87%,
    69% 72%,
    67% 95%,
    65% 70%,
    63% 91%,
    61% 74%,
    59% 98%,
    57% 76%,
    55% 92%,
    53% 69%,
    51% 88%,
    49% 73%,
    47% 96%,
    45% 71%,
    43% 90%,
    41% 75%,
    39% 100%,
    37% 77%,
    35% 93%,
    33% 70%,
    31% 89%,
    29% 73%,
    27% 97%,
    25% 70%,
    23% 91%,
    21% 74%,
    19% 99%,
    17% 76%,
    15% 94%,
    13% 71%,
    11% 88%,
    9% 73%,
    7% 98%,
    5% 72%,
    3% 90%,
    1% 74%,
    0% 97%
  );
}

.text-agri-green {
  color: #447c54;
}

.text-agri-orange {
  color: #ee7d31;
}

.bg-agri-orange {
  background-color: #ee7d31;
}

.border-agri-orange {
  border-color: #ee7d31;
}

/* 2. THE JAGGED EDGE */
.jagged-edge {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 92%,
    98% 89%,
    95% 94%,
    92% 88%,
    89% 95%,
    85% 89%,
    81% 96%,
    77% 90%,
    73% 97%,
    69% 89%,
    65% 96%,
    60% 90%,
    55% 97%,
    50% 89%,
    45% 96%,
    40% 90%,
    35% 97%,
    30% 89%,
    25% 96%,
    20% 90%,
    15% 97%,
    10% 89%,
    5% 96%,
    0 89%
  );
}

/* 3. SEARCH BOX TRANSITION */
#search-container.active {
  width: 200px;
  opacity: 1;
  padding-left: 10px;
}

#search-container {
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

.flip-x {
  transform: scaleX(-1);
}

.bg-agri-green {
  background-color: #2d4a36;
}

/* The dark forest green from the image */
.hover-agri-green:hover {
  background-color: #1e3325;
}

/* Ensure the orange is also defined for backgrounds */
.bg-agri-orange {
  background-color: #ee7d31;
}

.text-agri-green {
  color: #2d4a36;
}

.bg-agri-green {
  background-color: #2d4a36;
}

.text-agri-orange {
  color: #ee7d31;
}

.bg-agri-orange {
  background-color: #ee7d31;
}

.jagged-edge {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 92%,
    98% 89%,
    95% 94%,
    92% 88%,
    89% 95%,
    85% 89%,
    81% 96%,
    77% 90%,
    73% 97%,
    69% 89%,
    65% 96%,
    60% 90%,
    55% 97%,
    50% 89%,
    45% 96%,
    40% 90%,
    35% 97%,
    30% 89%,
    25% 96%,
    20% 90%,
    15% 97%,
    10% 89%,
    5% 96%,
    0 89%
  );
}

.jagged-edge-both {
  clip-path: polygon(
    /* Top Jagged Edge */ 0 3%,
    5% 1%,
    10% 4%,
    15% 1%,
    20% 3%,
    25% 0%,
    30% 4%,
    35% 1%,
    40% 3%,
    45% 0%,
    50% 4%,
    55% 1%,
    60% 3%,
    65% 1%,
    70% 4%,
    75% 1%,
    80% 3%,
    85% 0%,
    90% 4%,
    95% 1%,
    100% 3%,
    /* Right Side */ 100% 100%,
    /* Bottom Jagged Edge */ 100% 97%,
    95% 99%,
    90% 96%,
    85% 100%,
    80% 97%,
    75% 99%,
    70% 96%,
    65% 99%,
    60% 97%,
    55% 100%,
    50% 96%,
    45% 99%,
    40% 97%,
    35% 100%,
    30% 96%,
    25% 99%,
    20% 97%,
    15% 100%,
    10% 96%,
    5% 99%,
    0 97%,
    /* Left Side */ 0 0
  );
}

.partner-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

.flip-x {
  transform: scaleX(-1);
}

.jagged-edge-top {
  clip-path: polygon(
    0 4%,
    5% 1%,
    10% 3%,
    15% 0%,
    20% 3%,
    25% 1%,
    30% 4%,
    35% 1%,
    40% 3%,
    45% 1%,
    50% 4%,
    55% 1%,
    60% 3%,
    65% 1%,
    70% 4%,
    75% 1%,
    80% 3%,
    85% 1%,
    90% 4%,
    95% 1%,
    100% 3%,
    100% 100%,
    0 100%
  );
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 1s ease-out forwards;
}

.bg-agri-pattern {
  background-color: #fcfdfc;
  /* Very light mint/white */
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23447c54' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Smoother shadow for the overlapping circle */
.overlap-shadow {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.bg-footer-pattern {
  background-color: #f6f8f6;
  /* Very light grey-green */
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23447c54' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.animate-bounce {
  animation: bounce 2s infinite ease-in-out;
}