* {
  font-family: "Poppins", "IBM Plex Mono", sans-serif;
  scroll-behavior: smooth;
}

@media (max-width: 900px) {
  * {
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }
  body {
    overflow-x: hidden;
  }
  html {
    overflow-x: hidden;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* botoes */

.btnVerde {
  background: #9c9e8c;
  border: none;
  border-radius: 3rem;
  padding: var(--space-15) var(--space-35);
  font-family: "IBM Plex Mono";
  color: #fcfbf8;
  width: auto;
  margin-top: var(--space-28);
}

.btnVerde:hover {
  background: #efdfab;
  color: #9c9e8c;
  transition: 0.3s;
}

.btnTransp {
  border: solid 2px #a5a795;
  background-color: transparent;
  border-radius: 3rem;
  font-family: "IBM Plex Mono";
  color: #9c9e8c;
  letter-spacing: 0.1rem;
  width: auto;
}

.btnTransp:hover {
  background-color: #a5a795;
  color: #f5ede0;
  cursor: pointer;
  transition: 0.5s;
}

.titleSection {
  font-family: "Poppins";
  font-weight: 300;
  line-height: 2.78em;
  font-size: 2.8rem;
  text-align: center;
  padding-top: var(--space-70);
  margin-bottom: var(--space-70);
  letter-spacing: 0.2rem;
  color: #7e7f70;
  grid-column: -1/1;
}

.titlePage {
  font-family: "Poppins";
  font-weight: 400;
  font-size: 3rem;
  color: #7e7f50;
  text-align: center;
  padding-top: 30vh;
  margin-top: 10vh;
  margin-right: 10vw;
  margin-left: 10vw;
}

.hidden {
  opacity: 0;
  filter: blur(15px);
  transform: translateX(100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
  transition: all 1s;
}

@media (max-width: 1400px) {
  .titleSection {
    padding-top: var(--space-60);
  }
}
@media (max-width: 1300px) {
  .titlePage {
    font-size: 2rem;
    line-height: 3.2rem;
    margin: 0 var(--space-100);
    margin-bottom: var(--space-15);
  }
  .titleSection {
    padding-top: var(--space-10);
    margin-bottom: var(--space-30);
    padding-top: var(--space-30);
    padding-bottom: var(--space-30);
  }
}

@media (max-width: 900px) {
  .titlePage {
    font-size: 2.5rem;
    line-height: 3.2rem;
    margin: 0 var(--space-20);
    margin-bottom: var(--space-15);
    font-weight: 400;
  }
  .titleSection {
    font-size: 2rem;
    padding-top: var(--space-30);
    padding-bottom: var(--space-30);
  }
}
@media (max-width: 600px) {
  .titleSection {
    font-size: 2rem;
    padding-top: var(--space-60);
    padding-bottom: var(--space-20);
  }
}