body {
  background-color: #F9F6F3FF;
  font-family: Arial, sans-serif;
}

/* ----------------------------------- Top Navigation bar CSS ----------------------------------- */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #1C352DFF; /* your brand green */
  color: #fff; /* text color */
}

.nav-pills .nav-link {
  color: #1C352DFF; /* text color for inactive links */
}

.nav-pills .nav-link:hover {
  background-color: #A6B28BFF; /* light green hover background */
  color: #1C352DFF;
}


/* --------------------------------------- Hero Section CSS --------------------------------------- */

.hero-section {
  position: relative;
  width: 100%;
  min-height: 90vh; /* full viewport height */
  background: url('assets/farmland.jpg') center center/cover no-repeat; /* your image path */
  overflow: hidden;
}

/* Optional: dark overlay to make text readable */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* adjust darkness */
  z-index: 1;
}

/* Fade at top and bottom */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      #F9F6F3FF 0%,                   /* cream fade at top */
      rgba(255, 255, 255, 0) 25%,     /* transparent middle */
      rgba(255, 255, 255, 0) 75%, 
      #F9F6F3FF 100%                  /* cream fade at bottom */
  );
  z-index: 2;
  pointer-events: none;
}

/* Bring content above the fades */
.hero-section .container {
  position: relative;
  z-index: 3;
  max-width: 80vw;
}

.constrained-box {
    /* width: 100px; */
    height: 25px;
    /* background-color: #A6B28BFF; */
    /* Optionally, add a background-color for visual debugging */
}

.app-button:hover {
    background-color: rgb(224, 233, 203);
}


/* --------------------------------------- Timeline section CSS --------------------------------------- */

.d-flex .flex-fill{
    max-width: 20vw;
    /* background-color: #A6B28BFF; */
}

.card-cover {
    /* cursor: pointer; */
    background-color: rgb(34, 64, 54); /* Brand green */
    transition: background-color 0.3s ease;
}

.card-cover:hover {
    background-color: rgb(17, 33, 28); /* Darker brand green on hover */
}

/* --------------------------------------- Table of emails--------------------------------------- */

table.custom-table tbody tr td {
  background-color: #F9F6F3FF;
}

table.custom-table thead tr th {
  background-color: #c6d7cb;
}

table.custom-table tbody tr:hover td {
  background-color: #E5ECE7;
}


/* --------------------------------------- FaQ--------------------------------------- */
.faq-questions{
    background-color: #E5ECE7;
}