:root {
  --color-background-700: #060606;
  --color-background-500: #131313;

  --color-primary-100: #fad7a7;
  --color-primary-200: #ff9d43;
  --color-primary-300: #e67e1b;

  --color-secondary-50: #eaeaea;
  --color-secondary-100: #c1c1c1;
  --color-secondary-150: #b4b4b4;
  --color-secondary-200: #a0a0a0;
  --color-secondary-300: #2d2d2d;

  --color-green: #4dc814;
  --color-red: #ff3737;
  --color-yellow: #fba124;
  --color-purple: #858fff;

  --font-header: "IBM Plex Mono", monospace;
  --font-title: "Righteous", sans-serif;
  --font-body: "Poppins", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  font: inherit; /* tira todos os estilos das fontes */
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background-700);

  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px */
  color: var(--color-secondary-200);
  line-height: 1.5;
  letter-spacing: 0.03rem; /* 0.48px */
}

.container {
  margin: 0 auto;
  max-width: 80rem; /* 1280px */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding-inline: 7.5rem; /* 120px */
}

h1,
h2,
h3 {
  text-align: center;
  color: var(--color-secondary-50);
  font-weight: 500;
}

h2 {
  font-family: var(--font-title);
  font-size: 2.125rem; /* 34px */
  padding-bottom: 2.5rem; /* 40px */
}

h3 {
  font-size: 1.625rem; /* 26px */
  padding-top: 5rem; /* 80px */
  padding-bottom: 1.5rem; /* 24px */
}

b,
strong {
  font-weight: 700;
}

.font-semi-bold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.green {
  color: var(--color-green);
}
.red {
  color: var(--color-red);
}
.yellow {
  color: var(--color-yellow);
}
.orange {
  color: var(--color-primary-300);
}
.orange-text {
  color: var(--color-primary-200);
}
.purple {
  color: var(--color-purple);
}
.gray {
  color: var(--color-secondary-200);
}
.ice {
  color: #a9b4bd;
}
.cream {
  color: var(--color-primary-100);
}
.white {
  color: var(--color-secondary-50);
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* remove o espaço abaixo das imagens */
}

a {
  text-decoration: none;

  padding: 2rem; /* 32px */

  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  text-align: center;

  border-radius: 1.25rem; /* 20px */

  color: var(--color-yellow);
  box-shadow: 0 0 3.125rem var(--color-yellow); /* 50px */

  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background-color: var(--color-yellow);
    color: #000;
    font-weight: 700;
    & img {
      content: url("assets/icons/shopping-cart-dark.svg");
    }
  }

  & span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem; /* 12px */
    flex-wrap: wrap;

    & img {
      content: url("assets/icons/shopping-cart.svg");
      transition: all 0.3s ease;
    }
  }
}

.light-section {
  background-color: var(--color-background-500);
}

section {
  padding-block: 5rem; /* 80px */

  & a {
    margin-top: 3.75rem; /* 60px */
  }
}

div,
ul {
  gap: 1.5rem; /* 24px */
}

.card {
  background-color: var(--color-background-500);
  border: 1px solid var(--color-secondary-300);
  border-radius: 1.25rem; /* 20px */
}

ul.card-list {
  & li {
    padding: 0.75rem; /* 12px */
    border-radius: 0.75rem; /* 12px */
    margin-bottom: 0.875rem; /* 14px */
    & h4 {
      color: var(--color-primary-200);
    }
  }
}

li {
  list-style: none;
}

/*---------- Header Styles ----------*/
body header.container {
  padding-bottom: 9rem; /* 144px */

  & div.logo-container {
    padding-block: 1.125rem; /* 18px */
    padding-inline: 3.75rem; /* 60px */
  }

  & div:nth-of-type(2) {
    & h1.main-headline {
      padding-bottom: 1.5rem; /* 24px */

      font-family: var(--font-header);
      font-size: 2.375rem; /* 38px */
    }

    & h2.subheadline {
      margin: 0 auto;
      max-width: 60rem; /* 960px */
      padding-bottom: 3.75rem; /* 60px */

      font-family: var(--font-body);
      color: var(--color-secondary-200);
      font-size: 1.5rem; /* 24px */
      line-height: 1.7; /* 40.8 */
    }
  }
}

/*---------- Future Iron Man Styles ----------*/
body section.future-iron-man.light-section {
  & div.container {
    color: var(--color-secondary-100);
    text-align: center;
    & h2 {
      padding-bottom: 0;
    }
    & p:nth-of-type(1) {
      color: var(--color-secondary-200);
    }
    & p:nth-of-type(4) {
      font-size: 1.25rem; /* 20px */
    }
    & p:nth-of-type(6) {
      font-size: 1.5rem; /* 24px */
    }
  }
}

/*---------- Forged For Section ----------*/
body section.forged-for.container {
  & ul {
    max-width: 40rem; /* 640px */
    display: flex;
    flex-direction: column;
  }

  & ul:nth-of-type(1) {
    & li {
      display: flex;
      align-items: start;
      gap: 1rem; /* 16px */
      & img {
        margin-top: 0.25rem; /* 4px */
      }
    }
  }

  & ul:nth-of-type(2) {
    padding-left: 1.25rem; /* 20px */
    & h3 {
      padding-bottom: 0;
    }

    & li {
      list-style: disc;
    }
  }

  & > div {
    & > div:nth-of-type(1) {
      display: flex;
      flex-wrap: wrap;
      align-items: start;
      justify-content: center;

      & > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

/*---------- Only Solution Styles ----------*/
body section.only-solution.light-section {
  & div.container {
    gap: 0;
    & ul {
      display: flex;
      flex-direction: column;
      & li {
        display: grid;
        grid-template-columns: 24px 1fr;
        gap: 1rem; /* 16px */
        & img {
          margin-top: 0.125rem;
        }
        & div {
          max-width: 37.25rem; /* 596px */
          & p:nth-of-type(1) {
            color: var(--color-primary-300);
            font-weight: 500;
            padding-bottom: 0.25rem; /* 4px */
          }
        }
      }
    }
  }
}

/*---------- Man Meditating Section ----------*/
body section.man-meditating.container {
  & > div:nth-of-type(1) {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    justify-content: center;
    gap: 2.5rem; /* 40px */
    & > div:nth-of-type(1) {
      display: flex;
      flex-direction: column;
      max-width: 37.5rem;
    }
  }

  & > div:nth-of-type(2) {
    & > div {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
  }
}

/*---------- Benefits Section ----------*/
body section.benefits.container {
  & > div:nth-of-type(1) {
    display: flex;
    gap: 2.5rem; /* 40px */
    align-items: start;
    justify-content: center;

    & ul.card-list {
      & li {
        & p {
          max-width: 28.125rem; /* 450px */
        }
      }
    }
  }

  & [class$="column"] {
    & img {
      margin-bottom: 1.125rem; /* 18px */
    }
  }

  & div:nth-of-type(2) {
    & div {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;

      & > div {
        flex-direction: column;
      }
    }
  }
}

/*---------- Journey Section ----------*/
body section.journey.light-section {
  & > div.container {
    gap: 0;
    & h2 {
      padding-bottom: 0;
    }
    & h3 {
      font-family: var(--font-title);
      font-size: 1.375rem; /* 22px */
      color: var(--color-secondary-200);
      padding-top: 0.75rem; /* 12px */
      padding-bottom: 3.75rem; /* 60px */
    }
    & > div.timeline {
      display: flex;
      flex-direction: column;
      & > div {
        display: flex;
        & > div.rectangle {
          background-color: var(--color-yellow);
          color: #000;
          border-radius: 1.25rem; /* 20px */

          font-family: var(--font-title);
          font-size: 2.125rem; /* 34px */
          text-align: center;

          padding-inline: 1.9375rem; /* 31px */
          padding-block: 1.125rem; /* 18px */

          display: flex;
          align-items: center;
          justify-content: center;
        }
        & > div.text-content {
          display: flex;
          flex-direction: column;
          gap: 0;

          max-width: 54.75rem; /* 876px */

          & h4 {
            font-size: 1.25rem; /* 20px */
            font-family: var(--font-title);
            color: var(--color-secondary-50);
          }
          & p {
            padding-top: 0.5rem; /* 8px */
          }
        }
      }
    }
  }
}

/*---------- Arsenal Section ----------*/
body section.arsenal.container {
  padding-bottom: 0 !important;
  & > div:nth-of-type(1) {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem; /* 40px */
    padding-bottom: 3.75rem; /* 60px */
    & div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.625rem !important; /* 10px */

      width: 10rem; /* 160px */

      font-size: 1.5rem; /* 24px */
      font-family: var(--font-title);
      text-align: center;
    }
  }

  & div.cards:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    & div.card {
      display: flex;
      align-items: start;
      gap: 1rem !important; /* 16px */
      padding: 1.75rem; /* 28px */
      & img {
        padding-top: 0.125rem; /* 2px */
      }
      & div.text-content {
        font-size: 1rem; /* 16px */
        color: var(--color-secondary-150);
        & p {
          padding-bottom: 0.5rem; /* 8px */
          &:nth-of-type(1) {
            font-size: 1.125rem; /* 18px */
            font-weight: 600;
          }
          &:nth-of-type(2) {
            color: var(--color-secondary-50);
          }
        }
        & ul {
          display: flex;
          flex-direction: column;
          gap: 0.75rem !important; /* 12px */
          padding-left: 1.75rem; /* 28px */
          & li {
            list-style: disc;
          }
        }
      }
    }
  }
}

/*---------- Final Offer Section ----------*/
body section#final-offer.container {
  & div.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    max-width: 47.5rem; /* 760px */
    padding-block: 3.75rem; /* 60px */
    padding-inline: 4rem; /* 64px */

    text-align: center;
    color: var(--color-secondary-150);
    & h2 {
      padding-bottom: 0 !important;
    }
    & div.price {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem !important; /* 12px */
      flex-wrap: wrap;

      & span.price-text {
        color: var(--color-primary-100);
        font-size: 2rem;
      }
      & span.price-number {
        color: #000;
        background-color: #ffff66;
        font-size: 4.375rem; /* 70px */
        padding-inline: 0.75rem; /* 12px */
      }
    }
    & a {
      margin: 2rem !important; /* 32px */
    }
  }
}

/*---------- FAQ Section ----------*/
body section#faq.light-section {
  display: flex;
  flex-direction: column;
  align-items: center;

  & div.container {
    flex-direction: column;
    align-items: center;
    border-radius: 3.75rem; /* 60px */
    margin-bottom: 3.75rem; /* 60px */
    gap: 0 !important;

    & div:nth-of-type(1) {
      & h2 {
        font-size: 1.75rem; /* 28px */
        font-weight: normal;
        font-family: var(--font-body);
        padding-bottom: 0;
      }
      & h3 {
        text-align: center;
        font-size: 1.75rem; /* 28px */
        font-family: var(--font-body);
        padding-top: 0;
      }
    }

    & ul.card-list {
      display: flex;
      flex-direction: column;
      & li.card {
        margin-bottom: 0 !important;
        & h5 {
          color: var(--color-primary-200);
        }
      }
    }

    & h3,
    & h4 {
      font-weight: 600;
    }
    & h4 {
      align-self: flex-start;
      font-size: 1.5rem; /* 24px */
      font-family: var(--font-body);
      padding-bottom: 1.25rem; /* 20px */
    }
    & h4:nth-of-type(2) {
      margin-top: 3rem; /* 48px */
    }
  }
  & a {
    margin-top: 5rem; /* 80px */
  }
}

footer {
  height: 12.5rem; /* 200px */
  background-color: var(--color-background-700) !important;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding-inline: 1.25rem; /* 20px */

  & p {
    font-size: 1.25rem; /* 20px */
  }
}

/*---------- Media Queries ----------*/
@media (max-width: 1280px) {
  .container {
    padding-inline: 1.25rem; /* 20px */
  }

  a {
    font-size: 1.125rem; /* 18px */
    padding: 1.5rem; /* 24px */

    box-shadow: 0 0 2.5rem var(--color-yellow); /* 40px */
  }

  body header.container {
    padding-bottom: 8rem; /* 128px */

    & div:nth-of-type(2) {
      & h1.main-headline {
        padding-bottom: 1.4rem; /* 22.4px */
        font-size: 2rem; /* 32px */
        max-width: 60rem; /* 960px */
      }

      & h2.subheadline {
        max-width: 55rem; /* 880px */
        padding-bottom: 3rem; /* 48px */
        font-size: 1.25rem; /* 20px */
        line-height: 1.5;
      }
    }
  }
}

@media (max-width: 1139px) {
  body section.benefits.container {
    & > div {
      gap: 1.25rem; /* 20px */
    }
  }
}

@media (max-width: 701px) {
  a {
    font-size: 1rem; /* 16px */
    padding: 1.25rem; /* 20px */

    box-shadow: 0 0 1.875rem var(--color-yellow); /* 30px */
  }

  body header.container {
    padding-bottom: 7rem; /* 112px */

    & div:nth-of-type(2) {
      & h1.main-headline {
        padding-bottom: 1.25rem; /* 20px */
        font-size: 1.75rem; /* 28px */
      }

      & h2.subheadline {
        padding-bottom: 2.375rem; /* 38px */

        font-size: 1.125rem; /* 18px */
      }
    }
  }
}

@media (max-width: 600px) {
  body {
    font-size: 1rem !important; /* 16px */
  }

  h2 {
    font-size: 1.5rem; /* 24px */
    padding-bottom: 1.5rem; /* 24px */
  }

  h3 {
    font-size: 1.25rem; /* 20px */
    padding-top: 3.75rem; /* 60px */
    padding-bottom: 1.5rem; /* 24px */
  }

  section {
    padding-block: 3.75rem; /* 60px */

    & a {
      margin-top: 3.75rem; /* 60px */
    }
  }

  div,
  ul {
    gap: 1.25rem !important; /* 20px */
  }

  body section.journey.light-section {
    & > div.container {
      gap: 0 !important;
      & h3 {
        font-size: 1.125rem; /* 18px */
        padding-top: 0.75rem; /* 12px */
        padding-bottom: 2.5rem; /* 40px */
      }
      & > div.timeline {
        & > div {
          & > div.rectangle {
            font-size: 1.125rem; /* 18px */

            padding-inline: 0.875rem; /* 14px */
            padding-block: 0.875rem; /* 14px */
          }
          & > div.text-content {
            gap: 0 !important;

            & h4 {
              font-size: 1.125rem; /* 18px */
            }
            & p {
              padding-top: 0.5rem; /* 8px */
              font-size: 1rem !important; /* 16px */
            }
          }
        }
      }
    }
  }

  body section.future-iron-man.light-section {
    & div.container {
      & p:nth-of-type(4) {
        font-size: 1.125rem; /* 18px */
      }
      & p:nth-of-type(6) {
        font-size: 1.25rem; /* 20px */
      }
    }
  }

  body section.arsenal.container {
    & > div:nth-of-type(1) {
      padding-bottom: 2.5rem; /* 40px */
      flex-wrap: wrap;
      & div {
        max-width: 6.875rem; /* 110px */
        font-size: 1rem; /* 16px */
      }
    }
    & div.cards:nth-of-type(2) {
      & div.card {
        display: flex;
        align-items: start;
        gap: 0.875rem !important; /* 14px */
        padding: 0.875rem; /* 14px */
        & div.text-content {
          & ul {
            padding-left: 0;
          }
        }
      }
    }
  }

  body section#final-offer.container {
    & div.card {
      padding-inline: 1rem; /* 16px */
      padding-block: 2.5rem; /* 40px */

      & a {
        margin: 0 !important;
      }
    }
  }
}

@media (max-width: 514px) {
  body header.container {
    padding-bottom: 6rem; /* 96px */

    & div:nth-of-type(1) {
      padding-block: 1rem; /* 16px */
    }
    & div:nth-of-type(2) {
      & h1.main-headline {
        padding-bottom: 1.125rem; /* 18px */
        font-size: 1.5rem; /* 24px */
      }

      & h2.subheadline {
        padding-bottom: 2.375rem; /* 38px */
      }
    }
  }

  body section.benefits.container {
    & > div {
      flex-wrap: wrap;
    }
  }
}

@media (max-width: 420px) {
  body header.container {
    padding-bottom: 5rem; /* 80px */

    & div:nth-of-type(1) {
      padding-block: 0.875rem; /* 14px */
    }
    & div:nth-of-type(2) {
      & h1.main-headline {
        padding-bottom: 1rem; /* 16px */
        font-size: 1.375rem; /* 22px */
      }

      & h2.subheadline {
        padding-bottom: 2.125rem; /* 34px */

        font-size: 1.125rem; /* 18px */
      }
    }
  }
}