@import url(../templates/testimonials.css);
@import url(../templates/banner_investiment.css);
@import url(../templates/inovations.css);
@import url(../templates/instagram.css);

.how_works {
  width: 100%;
  height: 54rem;

  background: url(/wp-content/uploads/2026/01/banner_como_funciona.webp)
    no-repeat;

  color: var(--gray-100);

  position: relative;

  &::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(82, 12, 227, 0.6);
  }

  & img {
    position: relative;
    margin-top: 9.375rem;
  }

  & > div {
    position: relative;
    z-index: 1;
  }

  & h1 {
    margin-bottom: 4rem;
  }

  & .button {
    margin-top: 4.75rem;
  }
}

.works_consult {
  & .consult_content {
    max-width: 33.625rem;

    margin-right: auto;

    padding-left: 9.125rem;

    display: flex;
    flex-direction: column;
    gap: 3.5rem;

    & p {
      & strong {
        font-size: 1.375rem;
      }
    }
  }
}

@media (max-width: 1280px) {
  .how_works {
    & img {
      margin-top: 15rem;
    }
  }

  .works_consult {
    & img {
      width: 50%;
    }

    & .consult_content {
      gap: 2.5rem;

      & h2 {
        font-size: 2.25rem;
      }

      & p {
        font-size: 1rem;

        & strong {
          font-size: 1.125rem;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .how_works {
    height: 100vh;
    padding-top: 4rem;

    & img {
      margin-top: 0;
    }

    & h1 {
      margin-bottom: 2rem;
    }

    & .button {
      margin-top: 2.75rem;
    }
  }

  .works_consult {
    & .consult_content {
      padding-inline: 1.75rem;

      & h2 {
        font-size: 2rem;
      }
    }

    & img {
      width: 40%;
      height: 32.5rem;
      object-fit: cover;
    }
  }
}

@media (max-width: 500px) {
  .how_works {
    padding-top: 10rem;
    padding-bottom: 2rem;
    height: auto;
    text-align: center;
  }

  .works_consult {
    & img {
      width: 100%;
    }

    & .consult_content {
      padding: 2rem;
    }

    & .button {
      width: 100%;
    }
  }
}