@font-face {
  font-family: "Poppins";
  font-weight: 100;
  src: url(/assets/fonts/poppins-thin-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-thin-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-weight: 200;
  src: url(/assets/fonts/poppins-extralight-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-extralight-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-weight: 300;
  src: url(/assets/fonts/poppins-light-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-light-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-weight: 400;
  src: url(/assets/fonts/poppins-regular-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-regular-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-weight: 500;
  src: url(/assets/fonts/poppins-medium-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-medium-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  src: url(/assets/fonts/poppins-semibold-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-semibold-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-weight: 700;
  src: url(/assets/fonts/poppins-bold-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-bold-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-weight: 800;
  src: url(/assets/fonts/poppins-extrabold-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-extrabold-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-weight: 900;
  src: url(/assets/fonts/poppins-black-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-black-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 100;
  src: url(/assets/fonts/poppins-thinitalic-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-thinitalic-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 200;
  src: url(/assets/fonts/poppins-extralightitalic-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-extralightitalic-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 300;
  src: url(/assets/fonts/poppins-lightitalic-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-lightitalic-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url(/assets/fonts/poppins-italic-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-italic-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  src: url(/assets/fonts/poppins-mediumitalic-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-mediumitalic-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 600;
  src: url(/assets/fonts/poppins-semibolditalic-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-semibolditalic-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: url(/assets/fonts/poppins-bolditalic-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-bolditalic-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 800;
  src: url(/assets/fonts/poppins-extrabolditalic-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-extrabolditalic-webfont.woff) format("woff");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
  src: url(/assets/fonts/poppins-blackitalic-webfont.woff2) format("woff2"), url(/assets/fonts/poppins-blackitalic-webfont.woff) format("woff");
}
/* UTILITY CLASSES */
/* BASED ON 1920 pixel width */
:root {
  --rem: 16;
  --300px: max(200px, 15.625vw);
  --200px: max(100px, 10.417vw);
  --1rem: clamp(1rem, calc(0.1 * var(--rem) / 1920 * 100vw) + 1rem, 2rem);
  --1p25rem: clamp(0.625rem, calc(0.25 * var(--rem) / 1920 * 100vw) + 1rem, 2.5rem);
  --1p5rem: clamp(0.75rem, calc(0.5 * var(--rem) / 1920 * 100vw) + 1rem, 3rem);
  --2rem: clamp(1.25rem, calc(0.5 * var(--rem) / 1920 * 100vw) + 1.5rem, 4rem);
  --2p5rem: clamp(1.25rem, calc(1.5 * var(--rem) / 1920 * 100vw) + 1rem, 5rem);
  --3rem: clamp(1.5rem, calc(2 * var(--rem) / 1920 * 100vw) + 1rem, 6rem);
  --3p5rem: clamp(1.75rem, calc(2.5 * var(--rem) / 1920 * 100vw) + 1rem, 7rem);
  --4rem: clamp(2rem, calc(3 * var(--rem) / 1920 * 100vw) + 1rem, 8rem);
  --title-weight: 500;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Poppins, Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.5;
}

html {
  scroll-behavior: smooth;
}

img {
  display: block;
}

.container-global {
  width: 85%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.padding {
  padding-left: 7.5%;
  padding-right: 7.5%;
}

.fullscreen {
  width: 100lvw;
  height: 100lvh;
  position: relative;
}

.background--green {
  background-image: url("/assets/images/green.webp");
}

.background--green--narrow {
  background-image: url("/assets/images/green-narrow.webp");
}

.background--black {
  background-color: black;
}

@media (max-width: 1000px) {
  .container-global {
    width: 95%;
  }
  .container-global > p {
    text-align: left;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  z-index: 9999;
  top: 0;
  left: 0;
}

.bg-green-a {
  background-image: linear-gradient(rgba(18, 89, 27, 0.8), rgba(18, 89, 27, 0));
}

.bg-green {
  background-color: #12591b;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}

.hidden {
  opacity: 0;
}

#logo {
  width: 250px;
  height: auto;
}

.header-content {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 1rem;
  gap: 10px;
}

.header-content__nav {
  display: flex;
  justify-content: left;
  width: 100%;
  gap: 1.5rem;
}

.header-content__nav li {
  list-style-type: none;
}

.header-content__nav-item {
  text-decoration: none;
  color: #000;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
}

.active {
  color: #f7d400;
  border-bottom: 1px solid #f7d400;
  padding-bottom: 3px;
}

#menu,
.mobile {
  display: none;
}

.hide {
  display: none;
}

.show {
  display: block;
}

@media (max-width: 700px) {
  .header-content__nav-item {
    display: none;
  }
  .header-content__nav {
    justify-content: flex-end;
    gap: 0;
  }
  #menu {
    fill: white;
    display: block;
    width: 50px;
    cursor: pointer;
  }
}
.mobile {
  position: fixed;
  top: 83.5px;
  width: 50vw;
  right: 7.5vw;
  background-color: #4e7e40;
  font-size: var(--1p5rem);
  z-index: 9;
  padding: 1em;
  border-radius: 40px;
}

.mobile ul {
  display: grid;
  justify-items: center;
  gap: 1.5em;
  text-decoration: none;
  list-style-type: none;
}

.mobile ul li {
  text-decoration: none;
}

.mobile ul li a {
  color: white;
  z-index: 10;
  text-decoration: none;
}

@media (max-width: 500px) {
  #logo {
    width: 150px;
  }
  .header-content {
    height: 75px;
  }
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.container {
  position: absolute;
  top: 30%;
  width: 100%;
  text-align: center;
}

.duponty {
  display: inline-block;
}

.welcome__top {
  position: relative;
  bottom: 2rem;
  font-size: var(--3p5rem);
  color: white;
}
.welcome__center {
  font-size: var(--3p5rem);
  color: white;
  overflow: hidden;
  border-right: 0.15em solid yellow;
  width: 0;
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
}
.welcome__center--animation {
  animation: typing 3s forwards;
}
.welcome__bottom {
  position: relative;
  top: 4rem;
  font-size: var(--1p5rem);
  color: white;
  width: min(65ch, 90%);
  margin: 0 auto;
  line-height: 1.75;
}

.investing {
  position: absolute;
  bottom: 3rem;
  right: 7.5%;
}
.investing__title {
  text-align: right;
  color: yellow;
  text-transform: uppercase;
  font-size: var(--4rem);
}
.investing__subtitle {
  text-align: right;
  color: white;
  font-weight: 200;
  font-size: var(--2rem);
}

@media (max-width: 770px) {
  .investing__title {
    font-size: 2rem;
  }
  .investing__subtitle {
    font-size: var(--1p5rem);
  }
}
@media (max-width: 500px) {
  .welcome__top {
    bottom: 1em;
  }
  .welcome__bottom {
    top: 2em;
  }
  .investing__title {
    font-size: var(--2rem);
  }
}
@media (max-width: 410px) {
  .investing__title {
    font-size: var(--2rem);
  }
  .investing__subtitle {
    font-size: var(--1p25rem);
  }
}
@media (max-width: 365px) {
  .investing__title {
    font-size: 1.5rem;
  }
  .investing__subtitle {
    font-size: 1rem;
  }
}
#about-s1 .about__s1 {
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2em;
  padding-inline: 5em;
  padding-block: 2em;
}
#about-s1 .about__s1__column img {
  width: max(10vw, 100px);
}
#about-s1 .about__s1__column h2 {
  font-size: var(--4rem);
  line-height: 1.15;
}

@media (max-width: 1340px) {
  #about-s1 .about__s1 {
    padding-inline: 0;
  }
}
@media (max-width: 1000px) {
  #about-s1 .about__s1 {
    justify-content: center;
  }
}
@media (max-width: 500px) {
  #about-s1 .about__s1 {
    flex-direction: column;
    gap: 0.5em;
    text-align: center;
  }
  #about-s1 .about__s1 img {
    width: 125px;
  }
}
#about-s2 .about__s2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/assets/images/leaves.webp);
}
#about-s2 .about__s2__container {
  padding: 2em;
  display: grid;
  gap: 2em;
}
#about-s2 .about__s2__container__top {
  color: #fff;
  text-align: justify;
  font-size: var(--1p25rem);
  margin-inline: auto;
  width: min(75ch, 100%);
}
#about-s2 .about__s2__container__bottom {
  color: yellow;
  text-align: center;
  font-size: var(--1p5rem);
  text-transform: capitalize;
  width: min(55ch, 100%);
  margin-inline: auto;
}

@media (max-width: 1000px) {
  #about-s2 .about__s2__container {
    padding: 2em 0;
  }
  #about-s2 .about__s2__container__top {
    text-align: left;
  }
}
#about-s3 .about__s3 {
  padding-block: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1vw;
}
#about-s3 .about__s3__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
#about-s3 .about__s3__card__img {
  width: 20vw;
}
#about-s3 .about__s3__card__name {
  font-size: var(--1p5rem);
  font-weight: 700;
  padding-top: 0.4em;
  padding-bottom: 0.7em;
}
#about-s3 .about__s3__card__title {
  font-weight: 600;
  font-size: var(--1rem);
}
#about-s3 .about__s3__card__label {
  font-size: var(--1rem);
  font-weight: 300;
}

@media (max-width: 1280px) {
  #about-s3 .about__s3__card__name {
    font-size: var(--1p25rem);
  }
  #about-s3 .about__s3__card__title {
    font-size: 1rem;
  }
  #about-s3 .about__s3__card__label {
    font-size: 1rem;
  }
}
@media (max-width: 1129px) {
  #about-s3 .about__s3 {
    flex-wrap: wrap;
  }
  #about-s3 .about__s3__card {
    align-items: center;
  }
  #about-s3 .about__s3__card__img {
    width: max(25vw, 175px);
  }
  #about-s3 .about__s3__card__name {
    font-size: var(--1p5rem);
  }
  #about-s3 .about__s3__card__label {
    font-size: var(--1p25rem);
  }
}
@media (max-width: 1000px) {
  #about-s3 .about__s3 {
    flex-direction: column;
    align-items: center;
    gap: 2em;
  }
  #about-s3 .about__s3__card__name {
    font-size: 1.25rem;
    padding-bottom: 0.25em;
  }
  #about-s3 .about__s3__card__img {
    width: max(30vw, 175px);
  }
}
@media (max-width: 500px) {
  #about-s3 .about__s3__card__name {
    font-size: 1.2rem;
  }
  #about-s3 .about__s3__card__img {
    width: max(30vw, 175px);
  }
}
.dupont {
  padding-block: 5rem;
}
.dupont .h2-format {
  font-size: var(--3p5rem);
  color: yellow;
  padding-bottom: 1em;
  font-weight: lighter;
  text-align: center;
  font-weight: var(--title-weight);
}
.dupont p {
  font-size: var(--1p5rem);
  color: white;
  line-height: 1.5;
  text-align: justify;
  width: min(75ch, 100%);
  margin-inline: auto;
}

.dupont-bg {
  object-fit: cover;
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 0;
  display: block;
}

@media (max-width: 1000px) {
  .dupont p {
    text-align: left;
  }
}
.du__container {
  padding-block: 3em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 2em;
  width: min(1306px, 100%);
  margin-inline: auto;
}
.du__container__card h3 {
  color: yellow;
  font-size: var(--2rem);
  height: 5ch;
}
.du__container__card p {
  color: white;
  text-align: justify;
  line-height: 1.5;
  font-size: var(--1p25rem);
}

@media (max-width: 1317px) {
  .du__container__card p {
    text-align: left;
  }
  .du__container__card h3 {
    height: fit-content;
    padding-bottom: 0.25em;
  }
}
@media (max-width: 774px) {
  .du__container__card p {
    text-align: left;
  }
}
.background--dupont-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/assets/images/dupont-bg.webp);
  object-fit: fill;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
.background--dupont-bg p {
  text-align: justify;
  width: min(1142px, 100%);
  margin: 0 auto;
  color: white;
  padding-block: 2em;
  line-height: 1.5;
  font-size: var(--1p5rem);
  text-shadow: 2px 2px 3px black;
}

.du__s3__container {
  padding-block: 3em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3em;
  text-align: justify;
}
.du__s3__container__column {
  display: grid;
  gap: 2em;
}
.du__s3__container__column h2 {
  font-size: var(--2rem);
  text-align: left;
}
.du__s3__container__column p {
  font-size: var(--1p25rem);
}
.du__s3__container__column p span {
  font-style: italic;
}
.du__s3__container__column__content h3 {
  padding-bottom: 1rem;
  font-size: var(--1p5rem);
}
.du__s3__container__column__content p {
  font-size: var(--1p25rem);
}

@media (max-width: 954px) {
  .du__s3__container {
    grid-template-columns: 1fr;
  }
  .du__s3__container p span {
    font-size: 1.4rem;
    font-style: italic;
  }
  .background--dupont-bg p {
    text-align: left;
  }
  .du__s3__container__column,
  .du__s3__container__column__content {
    justify-content: center;
  }
  .du__s3__container__column p,
  .du__s3__container__column__content p {
    text-align: left;
  }
  .du__s3__container__column {
    width: 100%;
    gap: 2.5em;
  }
}
@media (max-width: 365px) {
  .background--dupont-bg p {
    font-size: medium;
    text-align: left;
    line-height: 1.75em;
  }
}
#offers-s1 .offers {
  padding-block: 5em;
}
#offers-s1 .offers .h2-format {
  font-size: var(--4rem);
  color: yellow;
  padding-bottom: 0.5em;
  font-weight: lighter;
  text-align: center;
  font-weight: var(--title-weight);
}
#offers-s1 .offers p {
  font-size: var(--1p5rem);
  color: white;
  line-height: 1.5;
  text-align: justify;
  width: min(1142px, 100%);
  margin: 0 auto;
}

@media (max-width: 1000px) {
  #offers-s1 .offers p {
    text-align: left;
  }
}
#offers-s2 .offers__s2__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
  justify-items: center;
  position: relative;
  bottom: 3rem;
  gap: 2.5em;
}
#offers-s2 .offers__s2__container__column {
  display: grid;
  justify-items: center;
  max-width: min-content;
  transition: all 0.3s;
}
#offers-s2 .offers__s2__container__column__title {
  background-color: black;
  color: white;
  text-align: center;
  margin-block: 0.5rem;
  padding: 0.5em;
  border-radius: 10px;
  font-size: var(--1p25rem);
}
#offers-s2 .offers__s2__container__column__body {
  text-align: justify;
  font-size: var(--1rem);
}
#offers-s2 .offers__s2__container__column__img img {
  border-radius: 30px;
  max-width: 400px;
}
#offers-s2 .offers .banner {
  width: 100%;
}

@media (pointer: fine) {
  #offers-s2 .offers__s2__container__column:hover {
    transform: scale(1.1);
    cursor: pointer;
  }
}
@media (max-width: 884px) {
  #offers-s2 .offers__s2__container {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 500px) {
  #offers-s2 .offers__s2__container__column {
    max-width: 100vw;
  }
  #offers-s2 .offers__s2__container__column__img img {
    width: 90vw;
  }
  #offers-s2 .offers__s2__container__column__body {
    width: 100%;
    text-align: left;
  }
}
#offers-s3 .s3 {
  display: flex;
  align-items: flex-start;
  gap: 5em;
}
#offers-s3 .s3__column--left__title {
  font-size: var(--3rem);
  text-align: center;
  padding-block: 0.5em;
}
#offers-s3 .s3__column--left__label {
  background-color: black;
  color: white;
  padding-block: 0.5em;
  text-align: center;
  border-radius: 20px;
  width: fit-content;
  padding-inline: 2.5em;
  margin-inline: auto;
  transition: all 0.3s;
}
#offers-s3 .s3__column--left__steps {
  display: grid;
  gap: 2em;
  padding-block: 2em;
}
#offers-s3 .s3__column--left__steps--title {
  font-weight: bold;
  padding-bottom: 0.5em;
  font-size: var(--1p5rem);
}
#offers-s3 .s3__column--left__steps--body {
  text-align: justify;
  font-size: var(--1p25rem);
}
#offers-s3 .s3__column--right {
  display: grid;
  justify-items: right;
  justify-self: right;
}
#offers-s3 .s3__column--right__title {
  font-size: var(--3rem);
  color: #12591B;
  padding-block: 0.5em;
  font-weight: bold;
  width: min-content;
  text-align: right;
}

.s4__calculator {
  padding-bottom: 3rem;
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
}
.s4__calculator__card {
  display: grid;
  gap: 1em;
  width: 350px;
  padding: 2em;
  border-radius: 50px;
  box-shadow: 10px 10px 5px 8px hsl(0, 0%, 80%);
  position: relative;
  transition: all 0.3s;
}
.s4__calculator__card:hover {
  box-shadow: 10px 10px 5px 8px hsl(0, 0%, 30%);
}
.s4__calculator__card--title {
  font-size: var(--1p5rem);
  font-weight: bold;
}
.s4__calculator__card--result {
  display: flex;
  justify-content: center;
  align-items: center;
}
.s4__calculator__card--result p {
  background-color: #12591B;
  font-size: var(--2rem);
  text-align: center;
  min-width: 125px;
  border-radius: 30px;
  color: #fff;
  align-self: center;
  padding: 0.5rem;
}
.s4__calculator__card input {
  width: 100%;
  padding: 0.5rem;
  font-size: var(--1rem);
}
.s4__calculator__reset {
  display: flex;
  justify-content: right;
  align-items: right;
}
.s4__calculator__reset__content {
  background-color: black;
  border-radius: 30px;
  width: fit-content;
}
.s4__calculator__reset__content p {
  color: white;
  text-align: center;
  padding: 0.5em 3em;
}
.s4__bottom {
  background-image: url(/assets/images/green.jpg);
  border-radius: 20px;
  padding: 1em 1.5em;
  display: flex;
  align-items: center;
}
.s4__bottom p {
  color: white;
  text-align: left;
  font-size: var(--1p5rem);
}

@media (max-width: 1000px) {
  #offers-s3 .s3 {
    flex-direction: column;
    gap: 1em;
  }
  #offers-s3 .s3__column--right {
    justify-items: center;
    width: 100%;
  }
  #offers-s3 .s3__column--right__title {
    font-size: 2.5rem;
    width: 100%;
    text-align: center;
  }
  #offers-s3 .s3 .s3__column--left__steps--body {
    text-align: left;
  }
  .s4__calculator__card {
    width: 100%;
  }
  .s4__calculator__reset {
    justify-content: center;
  }
}
@media (pointer: fine) {
  #offers-s3 .s3__column--left__label:hover {
    transform: scale(1.1);
    cursor: pointer;
  }
  .s4__calculator__reset__content:hover {
    background-color: gray;
    cursor: pointer;
  }
}
@media (max-width: 700px) {
  .s3__column--left__label:hover {
    transform: none;
  }
}
.s6 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 5vw;
  padding-block: 5em;
}
.s6__column {
  color: #fff;
  text-align: center;
  width: fit-content;
}
.s6__column h2 {
  font-size: var(--2p5rem);
  padding-block: 1em;
}
.s6__column p {
  line-height: 2;
  font-size: var(--1rem);
}
.s6__column iframe {
  border-radius: 50px;
  box-shadow: 10px 10px 5px 8px hsl(0, 0%, 10%);
  width: min(600px, 50vw);
  height: 350px;
  border: 0;
}

@media (max-width: 1000px) {
  .s6 {
    flex-direction: column;
    gap: 3em;
  }
  .s6__column {
    text-align: center;
  }
  .s6__column iframe {
    width: 75vw;
  }
}
@media (max-width: 650px) {
  .s6__column iframe {
    width: 90vw;
  }
}
#footer .footer {
  padding-block: 1em;
  background-image: linear-gradient(rgba(18, 89, 27, 0), rgba(18, 89, 27, 0.8));
}
#footer .footer p {
  text-align: right;
  color: hsl(0, 0%, 100%);
  font-size: 0.7rem;
}