body,
h1,
h2,
p {
  margin: 0px;
  user-select: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #efefef;
  display: block;
}

a {
  text-decoration: none;
}

em {
  font-size: 14px;
  font-weight: normal;
}

.cabecalho {
  background: #efefef;
  padding: 0.94rem 1.87rem;
  box-shadow: 0px 4px 10px rgb(0, 0, 0, 0.2);

  display: grid;
  grid-template-columns: 1fr 1fr;
  position: fixed;
  width: 100%; /* para poder ficar de ponta a ponta com o "position: fixed"*/
  box-sizing: border-box; /* nescessário para não sair do container */
  z-index: 1;
}

.logo {
  display: flex;
  gap: 10px;
  align-items: center;
}

.logo img {
  width: 30px;
}

.cabecalho p {
  font-weight: bold;
  color: oklch(12.9% 0.042 264.695);
  font-size: 20px;
}

.cabecalho-itens {
  max-width: 100%;
  display: flex;
  gap: 5%;
  justify-content: right;
  align-self: center;
}

.cabecalho-itens a {
  font-weight: 600;
  color: oklch(12.9% 0.042 264.695);
  font-size: 17px;
  display: block;
}

.banner {
  /* de cima pra baixo*/
  background: linear-gradient(
    to bottom,
    oklch(18.099% 0.08162 265.842),
    oklch(26.099% 0.08162 265.842)
  );

  max-width: 100%;
  color: #fff;
  padding: 170px 24px 165px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.375rem;
  justify-items: center;
}

.banner-efeito,
.servicos-efeito,
.sub-servicos-efeito,
.conteudo-itens-efeito1,
.conteudo-itens-efeito2,
.conteudo-itens-efeito3,
.conteudo-itens-efeito4,
.conteudo-itens-efeito5,
.conteudo-itens-efeito6,
.contato-sub-efeito,
.contato-form-efeito,
.sobre-sub-efeito,
.sobre-p-efeito,
.sobre-icones-efeito,
.rodape-efeito {
  visibility: hidden;
}

.banner h1 {
  font-size: 60px;
  line-height: 60px;
}

.banner p {
  font-size: 20px;
  line-height: 28px;
}

.banner a {
  color: oklch(18.099% 0.08162 265.842);
  font-weight: bold;
  background: #efefef;
  padding: 16px 40px;
  border-radius: 99px;

  /* parte do efeito de transição de cor do botão*/
  transition: transform 0.3s ease, background 0.3s ease;
}

.btn-banner:hover {
  transform: scale(1.04);
  color: #fff;
  background: oklch(18.099% 0.08162 265.842);
  box-shadow: inset 0px -1px 0px 0px #fff, inset 0px 1px 0px 0px #fff,
    inset 1px 0px 0px 0px #fff, inset -1px 0px 0px 0px #fff;
}

.subtitulo-servico {
  text-align: center;
  padding: 6.6875rem 0rem 3.125rem 0rem;
}

.subtitulo-servico h2 {
  text-align: center;
  font-size: 36px;
}

.conteudo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin: 0rem 2.7rem;
  gap: 2.3rem;
  justify-content: center;
}

.conteudo-itens {
  display: grid;
  align-content: start;
  gap: 0.3125rem;

  min-height: 15.625rem;
  max-height: 18.125rem;
  padding: 30px;
  background: #efefef;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /*  borda de sombreada */
  transition: transform 0.5s ease;
}

.conteudo-itens:hover {
  box-shadow: 0 3px 0 0 #0e3cb0, /* embaixo */ 0 -3px 0 0 #0e3cb0,
    /* em cima */ 3px 0 0 0 #0e3cb0, /* direita */ -3px 0 0 0 #0e3cb0; /* esquerda */
  transform: scale(1.02);
}

.conteudo-itens p {
  font-size: 18px;
}

.conteudo-detalhe {
  margin-top: 3px;
}

.contato {
  margin-top: 3.75rem;
  padding: 5rem;
  background: #e1e2e4;
  max-width: 100%;

  display: grid;
  grid-template-columns: 1fr;
  gap: 3.125rem;
  justify-content: center;
  justify-items: center;
}

.contato h2 {
  font-size: 36px;
  line-height: 40px;
}

.formulario {
  background: #ffffff9e;
  padding: 2.3rem;
  width: 330px;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /*  borda de sombreada */

  display: grid;
  gap: 1.25rem;
  justify-items: center;
}

input,
textarea {
  height: 40px;
  width: 100%;
  border: 1px solid #bbc;
  border-radius: 0.625rem;
  font-size: 1rem;
  color: #606063;
}

textarea {
  resize: none; /* retirando opção de ajustar tamanho pelo usuário*/
  height: 100px;
}

.btn-enviar {
  margin-top: 1rem;
  height: 40px;
  width: 100%;
  border-radius: 10px;
  font-size: 16px;
  background: #0e3cb0;
  color: #fff;
  font-weight: bold;
  border: none;
  justify-self: center;

  /* funciona junto com o transform*/
  transition: transform 0.3s ease, background 0.3s ease;
}

.btn-enviar:hover {
  /* Craindo efeito de hover no botao enviar*/
  transform: scale(1.04);
  background-color: oklch(18.099% 0.08162 265.842);
}

input::placeholder,
textarea::placeholder {
  /* Mundando cor do texto do placeholder com pseudo-elements*/
  color: #999;
  padding-left: 12px;
}

.sobre {
  background: #1f2937;
  color: #e5f4ff;
  padding: 50px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 2.5rem auto;
}

.sobre h2 {
  font-size: 25px;
}

.sobre-icones {
  grid-column: 2;

  display: flex;
  gap: 15px;
  justify-content: right;
  transition: transform 0.3s ease, background 0.3s ease;
}

.sobre-icones img {
  width: 30px;
  height: 30px;
}

.sobre-icones img:hover {
  transform: scale(1.07);
}

.sobre-descricao {
  grid-row: 2;
}

.btn-whatsapp {
  margin-right: 0.525rem;
  width: 62px;
  position: fixed;
  bottom: 70px;
  right: 0px;
}

.btn-whatsapp:hover {
  transform: scale(1.05);
}

span a {
  transition: transform 3s ease-in-out;
}

.rodape {
  text-align: center;
  padding: 20px;
  background: #1f2937;
  color: #e5f4ff;
}

@media (min-width: 1090px) {
  .conteudo {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1080px) {
  .formulario {
    width: 360px;
  }

  .sobre {
    grid-template-columns: 2fr 1fr;
  }
}

@media (max-width: 880px) {
  .banner h1 {
    text-align: center;
  }
}

/* RESPONSIVIDADE */
@media (max-width: 520px) {
  .logo {
    gap: 5px;
  }

  .logo img {
    width: 20px;
  }

  .cabecalho {
    padding: 15px 20px;
    width: 100%;
    gap: 0px 5%;
  }

  .cabecalho p {
    font-size: 15px;
  }

  .cabecalho-itens {
    gap: 4%;
  }

  .cabecalho a {
    font-size: 15px;
  }

  .banner {
    padding: 25% 10% 10% 10%;
  }

  .banner h1 {
    font-size: 2.725rem;
    line-height: 2.8875rem;
    text-align: start;
  }

  .banner p {
    font-size: 1.53rem;
    text-align: left;
  }

  .banner a {
    padding: 14px 25px;
  }

  .subtitulo-servico {
    text-align: center;
    padding: 2.6875rem 0rem 2.125rem 0rem;
  }

  .subtitulo-servico h2 {
    text-align: center;
    font-size: 36px;
    margin-top: 28px;
  }

  .conteudo {
    display: grid;
    grid-template-columns: 1fr;
    padding-bottom: 35px;
    margin: 0px 30px;
    gap: 40px;
  }

  .contato {
    margin-top: 20px;
    padding: 55px;
    max-width: 100%;
    gap: 30px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .formulario {
    /* justify-content: center; */
    width: 92%;
    padding: 1.7825rem;
  }

  textarea::placeholder {
    font-size: 0.85rem;
  }
  .sobre {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 20px auto auto;
    padding: 8%;
    padding-bottom: 10%;
    gap: 10% 0%;
  }

  .sobre h2 {
    grid-column: 1 / -1;
  }

  .sobre-icones {
    grid-row: 3;
    grid-column: 1 /-1;

    justify-content: center;
  }

  .sobre-icones img {
    width: 20px;
    height: 20px;
  }

  .sobre-descricao {
    grid-column: 1 / -1;
  }

  .btn-whatsapp {
    width: 52px;
  }

  .rodape {
    font-size: 13px;
    font-style: italic;
    z-index: -1;
  }
}