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

html,
body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Estilizando a parte do header */

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4.5rem;
  background: #0d2c54ff;
  box-shadow: 0 2px 4px #00000014;
  padding: 0 0.3rem;
  z-index: 999;
}

.header.scrolled {
  position: fixed;
  background: #0d2c54ff;
  box-shadow: 0 2px 4px #00000014;
}

.img_Logo {
  width: auto;
  height: 7rem;
}

.nav {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.nav a {
  text-decoration: none;
  color: #f9fafbff;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  transition:
    color 0.6s ease,
    transform 0.6s ease;
}

.bt_Nav {
  width: 100%;
  padding: 0.3rem 1.5rem;
  border-radius: 0.5rem;
  color: #161a1dff;
  font-family: "Inter", sans-serif;
  background: linear-gradient(
    90deg,
    #5479e8ff 0%,
    #05eeffff 50%,
    #8b85ffff 100%
  );
  border: 0 solid #000000ff;
  cursor: pointer;
}

/* header Mobile */

.menu_Aberto {
  display: none;
  width: 2rem;
  height: auto;
  cursor: pointer;
}

.header_Mobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999;
  margin-top: 4.5rem;
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.header_Mobile_Entrou {
  transform: translateX(0);
}

.nav_Mobile {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: left;
  padding: 0 0.5rem;
  width: 100%;
}

.nav_Mobile a {
  text-decoration: none;
  color: #f9fafbff;
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
}

.bt_Nav_mobile {
  width: 100%;
  padding: 0.4rem 1.5rem;
  border-radius: 0.5rem;
  color: #161a1dff;
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  background: linear-gradient(
    90deg,
    #5479e8ff 0%,
    #05eeffff 50%,
    #8b85ffff 100%
  );
  border: 0 solid #000000ff;
  cursor: pointer;
  margin-top: 1rem;
}

.header_Mobile.scrolled {
  position: fixed;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Estilizando a parte main  */

.main {
  background: linear-gradient(180deg, #3b82f6ff 0%, #3cf6daff 100%);
  overflow: hidden;
  margin-top: 4.5rem;
}

.section_Main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  gap: 3rem;
  padding: 1rem;
  flex-wrap: wrap;
  overflow: hidden;
}

.div_One_Section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 1.5rem;
}

.h1_Transforme {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #161a1dff;
  font-size: 3rem;
}

.h2_Infinity {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: #161a1dcc;
  font-size: 1.2rem;
  line-height: 1.9rem;
}

.button_div_one {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.bt-one {
  max-width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  color: #161a1dff;
  font-family: "Inter", sans-serif;
  background: linear-gradient(
    90deg,
    #5479e8ff 0%,
    #05eeffff 50%,
    #8b85ffff 100%
  );
  border: 0 solid #000000ff;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.bt-two {
  max-width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-family: "Inter", sans-serif;
  color: #161a1dff;
  background: transparent;
  border: 1px solid #161a1dff;
  transition: transform 0.5s ease;
  margin-left: 1rem;
}

.div_Two_Section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.video {
  width: 100%;
  height: 19rem;
  border: 1px solid transparent;
  border-radius: 100%;
}

/* Estilizando a section soluções */

.section_Solucoes {
  background: #0d2c54ff;
}

.container_Solu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 1200px;
  min-height: 100vh;
  gap: 2rem;
  padding: 5rem 1rem;
}

.solucoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 0 1rem;
}

.h2_Solucoes {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
  color: #f9fafbff;
}

.h3_Solucoes {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #dde0e4ff;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.seta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 15rem;
  min-height: 20.25rem;
  gap: 1.8rem;
  background: #0d2c54ff;
  border-radius: 1rem;
  box-shadow:
    0 10px 12px #00000014,
    0 0 0 #171a1f00;
  padding: 0 0.9rem;
}

.img_Setas {
  width: 2rem;
  height: auto;
}

.h2_Seta {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: #f9fafbff;
}

.h3_Seta {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: #dde0e4ff;
}

/* Estilizando a parte section funciona */

.section_Funciona {
  background: #1b5aacff;
}

.div_funciona {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 5rem 1rem;
  gap: 2rem;
}

.texto_funciona {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.h2_Funciona {
  font-family: "Montserrat", sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.5rem;
  color: #f9fafbff;
}

.h3_Nosso {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #dde0e4ff;
}

/* Estilizando a grid */

.grid_Funciona {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.consulta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 15rem;
  min-height: 20.25rem;
  gap: 2rem;
  background: #0d2c54ff;
  box-shadow:
    0 2px 4px #00000014,
    0 0 0 #171a1f00;
  padding: 0 1rem;
  border-radius: 1rem;
}

.img_Um {
  width: 2rem;
  height: auto;
}

.h2_Consulta {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #f9fafbff;
}

.h3_Consulta {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #dde0e4ff;
}

/* Estilizando a parte section, onde fala sobre os benefícios */

.section_Beneficios {
  background: #0d2c54ff;
}

.container_Beneficios {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  max-width: 1200px;
  min-height: 100vh;
  padding: 5rem 1rem;
  gap: 3rem;
}

.texto_Beneficios {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 0 1rem;
}

.h2_Beneficios {
  font-family: "Montserrat", sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: #f9fafbff;
}

.h3_Beneficios {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #dde0e4ff;
}

/* Estilizando a grid */

.grid_Beneficios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0 1rem;
}

.beneficios {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: 1rem;
  width: 100%;
  max-width: 20rem;
  height: 12rem;
  border: 1rem;
  box-shadow:
    0 10px 12px #00000014,
    0 0 0 #171a1f00;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
}

.img_Grid {
  width: 2rem;
  height: auto;
}

.h2_Grid {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #f9fafbff;
}

.h3_Grid {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #dde0e4ff;
}

/* Estilizando a parte section Preços */

.section_Precos {
  background: #0d2c54ff;
}
.container_Precos {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
  min-height: 100vh;
  gap: 3rem;
  padding: 5rem 1rem;
}

.texto_Precos {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
}

.h2_Planos {
  font-family: "Montserrat", sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: #f9fafbff;
}

.h3_Escolha {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #dde0e4ff;
}

/* estilizando a grid */

.grid_Precos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0 1rem;
}

.Precos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 25rem;
  min-height: 23rem;
  background: #0d2c54ff;
  box-shadow:
    0 10px 12px #00000014,
    0 0 0 #171a1f00;
  border-radius: 1rem;
  overflow: hidden;
  gap: 1rem;
  padding: 0 1rem;
}

.h2_Precos {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #f9fafbff;
}

.h3_Precos {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: #dde0e4ff;
}

.lista {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  list-style: none;
  position: relative;
}

.lista li {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: #dde0e4ff;
  position: relative;
  padding-left: 1.5rem;
}

.lista li::before {
  content: "✔";
  position: absolute;
  color: #f9fafbff;
  left: 0;
}

.bt_Precos {
  width: 9rem;
  max-width: 100%;
  min-height: 1.9rem;
  background: transparent;
  color: #05eeffff;
  border-radius: 0.5rem;
  border: 1px solid #05eeffff;
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
}

/* Estilizando a parte Section FAQ */

.section_Faq {
  background: #1b5aacff;
}

.div_Section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  max-width: 1200px;
  min-height: 100vh;
  gap: 1.2rem;
  padding: 10rem 1rem;
}
.h2_Perguntas {
  font-family: "Montserrat", sans-serif;
  font-size: 2.25rem;
  font-weight: 800;

  color: #f9fafbff;
}

.h3_Encontre {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #dde0e4ff;
}

/* Estilizando o FAQ */

.faq_Item {
  width: 100%;
  max-width: 80%;
  box-sizing: border-box;
}

.button_FAQ {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  flex-wrap: nowrap;
  width: 100%;
}

.img_Seta {
  width: 1rem;
}

.faq_Question {
  box-sizing: border-box;
  width: 100%;
  background: #0d2c54ff;
  border: 1px solid #0d2c54ff;
  border-radius: 0.5rem;
  box-shadow:
    0 10px 12px #00000014,
    0 0 0 #171a1f00;
  padding: 1rem 2rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  font-weight: bold;
  color: #f9fafbff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}
.faq_Text {
  flex: 1;
  text-align: left;
}

.faq_Answer {
  display: flex;
  text-align: left;
  justify-content: center;
  background: #0d2c54ff;
  border-radius: 0.5rem;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  padding: 0 2rem;
  margin: 0.1rem;
  color: #f9f9f9;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  opacity: 0;
  transition:
    max-height 0.5s ease,
    padding 0.5s ease,
    opacity 0.5s ease;
}

.faq_Answer.entrou {
  max-height: 300px;
  padding: 1rem 2rem;
  opacity: 1;
}

.footer {
  background: #0d2c54ff;
}

.container_footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 0 auto;
  max-width: 1200px;
  min-height: 30vh;
}

.footer_Img {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.img_Footer {
  width: 6rem;
  height: auto;
}

.span_Img {
  color: #f9fafbff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 300;
  font-style: oblique;
}
.MenuRapido {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: center;
  gap: 0.5rem;
}

.span_MenuRa {
  color: #f9fafbff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  font-style: italic;
}

.MenuRapido a {
  text-decoration: none;
  color: #f9fafbff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 100;
}

.footer_Linha {
  width: 100%;
  border: 0.5px solid #f9fafb33;
}

.footer_P {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: #f9fafbff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 100;
}

/* Entrada das div  */

/* cima e baixo*/
.cima {
  opacity: 0;
  transform: translateY(-50%);
  transition:
    transform 1s ease,
    opacity 1s ease;
}

.baixo {
  opacity: 0;
  transform: translateY(50%);
  transition:
    transform 1s ease,
    opacity 1s ease;
}
.entrouY {
  transform: translateY(0);
  opacity: 1;
}

/* Esquerda e Direita*/

.esquerda {
  opacity: 0;
  transform: translateX(-50%);
  transition:
    transform 1s ease,
    opacity 1s ease;
}

.direita {
  opacity: 0;
  transform: translateX(50%);
  transition:
    transform 1s ease,
    opacity 1s ease;
}

.entrouX {
  opacity: 1;
  transform: translateX(0);
}

/* Zoom */

.zoom {
  transform: scale(1.8);
  transition: transform 1.5s ease;
}

.entrouZoom {
  transform: scale(1);
}

.sumiu {
  opacity: 0;
  transition: opacity 1s ease;
}

.entrouSumiu {
  opacity: 1;
}

@media (hover: hover) {
  /* header */
  .nav a:hover {
    color: #05eeffff;
    transform: scale(1.1);
  }
  /* main */
  .bt-one:hover {
    transform: scale(1.1);
  }

  .bt-two:hover {
    transform: scale(1.1);
  }

  /* Estilizando a section soluções */
  .seta:hover {
    border: 1px solid #f9fafbff;
  }

  /* Parte section beneficios */
  .beneficios:hover {
    border: 1px solid white;
  }

  /* Section preços */
  .Precos:hover {
    background: #05eeffff;
    color: black;
  }
  .Precos:hover .h2_Precos,
  .Precos:hover .h3_Precos,
  .Precos:hover .lista li,
  .Precos:hover .lista li::before {
    color: black;
  }

  .Precos:hover .bt_Precos {
    background: black;
  }

  /* Footer */
  .MenuRapido a:hover {
    color: #05eeffff;
  }
}

/* Responsividade para mobile */

@media (max-width: 489px) {
  /* header Mobile */

  .menu_Aberto {
    display: flex;
    margin-right: 0.5rem;
  }

  .menu_Fechado {
    display: flex;
    margin-right: 0.5rem;
  }

  /* header */
  .header {
    justify-content: space-between;
  }
  .nav {
    display: none;
  }
  /* Pimeira parte da página */
  .h1_Transforme {
    font-size: 2.3rem;
  }
  .h2_Infinity {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
  .section_Main {
    flex-direction: column;
    gap: 2rem;
  }
  .div_One_Section {
    text-align: inherit;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  /* container soluções  */
  .grid {
    grid-template-columns: 1fr;
  }
  .seta {
    border: 1px solid #f9fafbff;
  }

  /* Terceira parte da página grid funciona */

  .grid_Funciona {
    grid-template-columns: 1fr;
  }

  /* Quarta parte da página grid_Beneficios */

  .grid_Beneficios {
    grid-template-columns: 1fr;
  }
  .beneficios {
    border: 1px solid white;
  }

  /* Preços */
  .grid_Precos {
    grid-template-columns: 1fr;
  }
  .Precos {
    background: #05eeffff;
    color: black;
  }
  .h2_Precos,
  .h3_Precos,
  .lista li,
  .lista li::before {
    color: black;
  }

  .bt_Precos {
    background: black;
  }
  /* Footer */
  .MenuRapido a {
    color: #05eeffff;
  }
}

@media (min-width: 490px) and (max-width: 645px) {
  .header {
    justify-content: space-between;
  }
  .nav {
    display: none;
  }

  /* Section main, primeira parte da página */
  .section_Main {
    flex-direction: column-reverse;
    gap: 1rem;
  }
  .div_One_Section {
    align-items: center;
  }

  /* container soluções  */
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .seta {
    border: 1px solid #f9fafbff;
  }

  /* Terceira parte da página grid funciona */

  .grid_Funciona {
    grid-template-columns: repeat(2, 1fr);
  }
  /* container preços  */
  .grid_Precos {
    grid-template-columns: repeat(2, 1fr);
    justify-self: center;
  }

  .Precos {
    background: #05eeffff;
    color: black;
  }

  .h2_Precos,
  .h3_Precos,
  .lista li,
  .lista li::before {
    color: black;
  }

  .bt_Precos {
    background: black;
  }

  /* Quarta parte da página grid_Beneficios */

  .grid_Beneficios {
    grid-template-columns: repeat(2, 1fr);
  }
  .beneficios {
    border: 1px solid white;
  }

  /* ultimas grid geral */
  .ultimo {
    display: grid;
    grid-column: 1/-1;
    justify-self: center;
  }
  /* Footer */
  .MenuRapido a {
    color: #05eeffff;
  }
}

@media (min-width: 646px) and (max-width: 843px) {
  /* container primeira parte da página */
  /* Pimeira parte da página */
  .h1_Transforme {
    font-size: 4rem;
  }
  .h2_Infinity {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
  .section_Main {
    flex-direction: column;
    gap: 2rem;
  }
  .div_One_Section {
    text-align: inherit;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
  }
  /* container soluções  */
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .seta {
    border: 1px solid #f9fafbff;
  }

  /* Terceira parte da página grid funciona */

  .grid_Funciona {
    grid-template-columns: repeat(2, 1fr);
  }

  /* container preços  */
  .grid_Precos {
    grid-template-columns: repeat(2, 1fr);
    justify-self: center;
  }
  .Precos {
    background: #05eeffff;
    color: black;
  }
  .h2_Precos,
  .h3_Precos,
  .lista li,
  .lista li::before {
    color: black;
  }

  .bt_Precos {
    background: black;
  }

  /* Quarta parte da página grid_Beneficios */

  .grid_Beneficios {
    grid-template-columns: repeat(2, 1fr);
  }
  .beneficios {
    border: 1px solid white;
  }

  /* ultimas grid geral */
  .ultimo {
    display: grid;
    grid-column: 1/-1;
    justify-self: center;
  }
  /* Footer */
  .MenuRapido a {
    color: #05eeffff;
  }
}

/* Responsividade para tablets */
@media (min-width: 844px) and (max-width: 968px) {
  /* container preços  */
  .grid_Precos {
    grid-template-columns: repeat(2, 1fr);
    justify-self: center;
  }
  .Precos {
    background: #05eeffff;
    color: black;
  }
  .h2_Precos,
  .h3_Precos,
  .lista li,
  .lista li::before {
    color: black;
  }

  .bt_Precos {
    background: black;
  }

  /* container soluções  */
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .seta {
    border: 1px solid #f9fafbff;
  }

  /* Terceira parte da página grid funciona */

  .grid_Funciona {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Quarta parte da página grid_Beneficios */

  .grid_Beneficios {
    grid-template-columns: repeat(2, 1fr);
  }
  .beneficios {
    border: 1px solid white;
  }

  /* ultimas grid geral */
  .ultimo {
    display: grid;
    grid-column: 1/-1;
    justify-self: center;
  }
  /* Footer */
  .MenuRapido a {
    color: #05eeffff;
  }
}