/* Para telas menores que 1120px */
@media (max-width: 1120px) {
  header {
    padding: 12px 0; /* cima e baixo é 5 e 0 nos lados */
  }

  .btn-abrir-menu {
    display: block;
  }

  .menu-desktop {
    display: none;
  }

  section.hero p {
    font-size: 1.1rem;
  }

  section.hero button {
    font-size: 1rem;
  }

  /* COMEÇO DO ESTILO DA SECTION --> criacao-de-sites */
  section.criacao-de-sites .interface {
    flex-direction: column;
    text-align: center;
    margin: 5% 5%;
  }

  section.criacao-de-sites p {
    text-align: center;
  }

  section.criacao-de-sites button {
    margin-bottom: 8%;
  }

  section.footer .interface {
    flex-direction: column;
    padding: 4% 0;
  }

  /* COMEÇO DO ESTILO DA SECTION --> Fale conosco */
  section.fale-conosco {
    padding: 9% 0;
  }

  /* COMEÇO DO ESTILO DA SECTION --> Perguntas Frequentes */
  section.perguntas-frequentes {
    padding: 6% 0;
  }

  section.perguntas-frequentes .texto-perguntas-frequentes h2 {
    font-size: 2.2rem;
  }

  /* COMEÇO DO ESTILO DA SECTION --> Formulario */
  .ocultar-no-celular {
    display: none; /* ocultando img typing.jpg do formulario */
  }

  section.formulario .interface {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 10px;
    padding-bottom: 50px;
  }

  section.formulario .interface .form h2 {
    text-align: center;
    color: var(--CorBranca);
    font-size: 2rem;
    margin-bottom: 7%;
  }

  /* COMEÇO DO ESTILO DA SECTION --> sub-footer-creditos */
  section.sub-footer-creditos .btn {
    padding-bottom: 30px;
  }

  section.footer .interface .redes-sociais .item {
    justify-content: center;
    gap: 20px;
  }

  /* COMEÇO DO ESTILO DA SECTION --> servicos-oferecidos */
  section.servicos-oferecidos {
    padding: 12% 2%;
  }

  section.grid-servicos-oferecidos {
    grid-template-columns: 1fr; /* 1 coluna só */
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; /* 6 linhas */
  }

  /* COMEÇO DO ESTILO DA SECTION --> PROJETOS REALIZADOS */
  section.projetos-realizados {
    background-color: var(--CorBranca);
    padding: 10% 0%;
  }

  section.projetos-realizados .grid-projetos {
    grid-template-columns: 1fr; /* 1 coluna só */
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; /* 6 linhas */
  }

  /* COMEÇO DO ESTILO DA SECTION --> Por que escolher a JunTech? */
  section.por-que-escolher-a-juntech {
    padding-top: 3%;
  }

  section.por-que-escolher h2.titulo {
    font-size: 28px;
  }

  section.por-que-escolher h3 {
    font-size: 22px;
  }

  section.por-que-escolher p.palagrafo-do-texto {
    font-size: 17px;
    font-weight: 300;
  }

  /* COMEÇO DO ESTILO DA SECTION --> Clientes Satisfeitos */
  section.depoimentos {
    padding: 6% 3% 4%;
  }

  section.depoimentos h2 {
    font-size: 30px;
  }

  section.depoimentos p.text-depoimentos {
    font-size: 19px;
  }

  /* COMEÇO DO ESTILO DA SECTION --> Fale conosco */
  section.fale-conosco h2 {
    font-size: 1.7rem;
  }

  section.fale-conosco .container1 {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 10%;
  }
  /* Evita rolagem horizontal no mobile quando elementos ultrapassam a largura da viewport */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}