:root {
  /* === ASPB Colors === */
  --aspb-green: #80B641;
  --aspb-green-rgb: 128, 182, 65;
  --aspb-green-dark: #6A8A03;
  --aspb-green-dark-rgb: 106, 138, 3;
  --aspb-green-light: #99BF78;
  --aspb-green-light-rgb: 153, 191, 120;
  --aspb-teal: #367980;
  --aspb-teal-rgb: 54, 121, 128;
  --aspb-teal-dark: #295B60;
  --aspb-teal-dark-rgb: 41, 91, 96;
  --aspb-teal-soft: #5E9499;
  --aspb-teal-soft-rgb: 94, 148, 153;
  --aspb-orange: #DF6522;
  --aspb-orange-rgb: 223, 101, 34;
  --aspb-orange-dark: #A14C1A;
  --aspb-orange-dark-rgb: 161, 76, 26;
  --aspb-peach: #E5844E;
  --aspb-peach-rgb: 229, 132, 78;
  --aspb-black: #231F20;
  --aspb-black-rgb: 35, 31, 32;
  --aspb-dark-gray: #1A171B;
  --aspb-dark-gray-rgb: 26, 23, 27;
  --aspb-gray: #5A5758;
  --aspb-gray-rgb: 90, 87, 88;

  /* === Plantae Colors === */
  --plantae-green: #BAC266;
  --plantae-green-rgb: 186, 194, 102;
  --plantae-forest: #6B7537;
  --plantae-forest-rgb: 107, 117, 55;
  --plantae-yellow-green: #7F6B2A;
  --plantae-yellow-green-rgb: 127, 107, 42;
  --plantae-black: #1A1914;
  --plantae-black-rgb: 26, 25, 20;
  --plantae-black-soft: #35322A;
  --plantae-black-soft-rgb: 53, 50, 42;
  --plantae-light-brown: #C1B69A;
  --plantae-light-brown-rgb: 193, 182, 154;
  --plantae-dark-brown: #5F5A4D;
  --plantae-dark-brown-rgb: 95, 90, 77;
  --plantae-gray: #C2C1C1;
  --plantae-gray-rgb: 194, 193, 193;
  --plantae-light-gray: #E1E0DC;
  --plantae-light-gray-rgb: 225, 224, 220;
  --plantae-bluegreen: #78BBAC;
  --plantae-bluegreen-rgb: 120, 187, 172;
  --plantae-teal: #405E64;
  --plantae-teal-rgb: 64, 94, 100;
  --plantae-plum-rose: #B58596;
  --plantae-plum-rose-rgb: 181, 133, 150;
  --plantae-mauve: #694B57;
  --plantae-mauve-rgb: 105, 75, 87;
  --plantae-bright-orange: #EE6643;
  --plantae-bright-orange-rgb: 238, 102, 67;
  --plantae-red-orange: #B94F2F;
  --plantae-red-orange-rgb: 185, 79, 47;
  --plantae-soft-orange: #F98F75;
  --plantae-soft-orange-rgb: 249, 143, 117;
}

html, body {
  height: 100%;
}

.page-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.page-wrapper > section {
  flex: 1;
}


body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2 {
  font-family: 'Lora', serif;
  letter-spacing: 0.5px;
}

.header-wrapper {
  position: relative;
  background: linear-gradient(135deg, var(--plantae-teal), var(--aspb-teal-soft));
  color: #fff;
  padding: 80px 20px;
  text-align: center;
  overflow: hidden;
}

.circle {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.circle.left {
  width: 35vw;
  height: 18vw;
  top: -5vw;
  left: -10vw;
  background: rgba(var(--aspb-orange-rgb), 1.0);
}

.circle.right {
  width: 35vw;
  height: 18vw;
  bottom: -5vw;
  right: -10vw;
  background: rgba(var(--plantae-light-gray-rgb), 1.0);
}

.circle-logo {
  position: absolute;
  width: 14vw;
  height: 14vw;
  object-fit: contain;
  z-index: 1;
}

.circle-logo.aspb {
  top: 2vw;
  left: 2vw;
}

.circle-logo.plantae {
  bottom: 2vw;
  right: 2vw;
}

.header-content {
  position: relative;
  z-index: 2;
  max-width: 70%;
  margin: 0 auto;
}

.header-content h1 {
  font-size: 2.8em;
  margin: 0;
  line-height: 1.2em;
}

.header-content p {
  font-size: 1.2em;
  margin-top: 15px;
}

section {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

section h2 {
  color: var(--aspb-teal);
  font-size: 1.8em;
}

.form-placeholder {
  margin-top: 40px;
  padding: 34px 34px 8px 34px;   
  box-sizing: border-box;
  background:var(--aspb-teal-soft);
/*  background: linear-gradient(
    to bottom right,
    var(--aspb-teal-soft) 60%,
    var(--plantae-light-gray)
  );

  border: 1px solid var(--aspb-teal-soft);
  */
  border-radius: 7px;
  text-align: center;
  width: 100%;
  height: 100%;
  overflow: hidden;           
  
}


a {
  color: #ffffff;
  text-decoration: underline;
}


/* Responsive: Tablet */
@media (max-width: 768px) {
  .header-content {
    max-width: 90%;
  }

  .header-content h1 {
    font-size: 2em;
    line-height: 1.3em;
    padding-top: 30px;
    max-width: 90%;
    margin: 0 auto;
  }

  .header-content p {
    font-size: 1em;
  }

  .circle-logo {
    width: 100px;
    height: 100px;
  }

  .circle.left,
  .circle.right {
    width: 200px;
    height: 120px;
  }
}

/* Responsive: Mobile */
@media (max-width: 480px) {
  .header-wrapper {
    padding: 60px 15px;
  }

  .header-content h1 {
    font-size: 1.6em;
    line-height: 1.3em;
    padding-top: 40px;
    max-width: 90%;
    margin: 0 auto;
  }

  .circle-logo {
    width: 80px;
    height: 80px;
  }

  .circle.left,
  .circle.right {
    width: 150px;
    height: 90px;
  }
}

/* Responsive: Extra Small Devices */
@media (max-width: 380px) {
  .header-content h1 {
    font-size: 1.4em;
    line-height: 1.4em;
    padding-top: 50px;
    max-width: 95%;
    margin: 0 auto;
  }
}


/* Co-Branded Footer Section */
.co-branded-footer {
  color: #fff;
  text-align: center;
  margin-top: 60px;
}

.footer-main {
  background-color: var(--aspb-orange);
  padding: 20px;
}

.footer-main a {
  color: #ffffff;
  text-decoration: underline;
}

.arp-partner {
  background-color: #3572A6;
  padding: 30px 20px;
  color: white;
}

.arp-partner img {
  height: 70px;
  margin-top: 10px;
}

.arp-partner .arp-text {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 10px;
}