@charset "UTF-8";
#container-gerador-laudo {
  padding: 5rem 2%;
}
#container-gerador-laudo #gerador-laudo {
  background: white;
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  width: 47rem;
  margin: 0 auto;
}
#container-gerador-laudo #gerador-laudo h1 {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #000000;
}
#container-gerador-laudo #gerador-laudo .form-group {
  margin-bottom: 1.5rem;
}
#container-gerador-laudo #gerador-laudo label {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: #000000;
}
#container-gerador-laudo #gerador-laudo select {
  width: 100%;
  padding: 0.8rem;
  font-size: 1.4rem;
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
}
#container-gerador-laudo #gerador-laudo .normas p {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #000000;
}
#container-gerador-laudo #gerador-laudo .normas label {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
#container-gerador-laudo #gerador-laudo .normas input {
  margin-right: 1rem;
}
#container-gerador-laudo #gerador-laudo .actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}
#container-gerador-laudo #gerador-laudo .actions button {
  padding: 1rem 7rem;
  font-size: 1.6rem;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}
#container-gerador-laudo #gerador-laudo .actions button:hover {
  background-color: #444;
}
#container-gerador-laudo #gerador-laudo .visualizar {
  font-size: 1.4rem;
  color: #333;
  text-decoration: none;
}
#container-gerador-laudo #gerador-laudo .preco {
  text-align: center;
  font-size: 1.6rem;
  margin-top: 2rem;
  color: #000000;
}
#container-gerador-laudo #gerador-laudo .preco-antigo {
  text-decoration: line-through;
  color: #999;
}
#container-gerador-laudo #gerador-laudo #form-group-normas p {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #000000;
}
#container-gerador-laudo #gerador-laudo .informacoes-usuario input {
  width: 100%;
  padding: 0.8rem;
  font-size: 1.4rem;
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
}
#container-gerador-laudo #gerador-laudo .form-group-empresa input {
  width: 100%;
  padding: 0.8rem;
  font-size: 1.4rem;
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
}
#container-gerador-laudo #gerador-laudo .form-group-empresa .input-file {
  position: relative;
  display: inline-block;
}
#container-gerador-laudo #gerador-laudo .form-group-empresa .input-file {
  display: none;
}
#container-gerador-laudo #gerador-laudo .form-group-empresa .placeholder {
  width: 100%;
  padding: 0.8rem;
  font-size: 1.4rem;
  border: 0.1rem dashed #ccc;
  color: #888;
  cursor: pointer;
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
}
#container-gerador-laudo #gerador-laudo .form-group-empresa .placeholder:hover {
  border-color: #888;
}
#container-gerador-laudo #gerador-laudo .form-group-empresa .file-name {
  margin-top: 10px;
  color: #333;
}
#container-gerador-laudo #gerador-laudo .form-group-obras select {
  width: 100%;
  padding: 0.8rem;
  font-size: 1.4rem;
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
  color: #888;
}
#container-gerador-laudo #gerador-laudo #form-group-tipos .form-tipo input {
  width: 100%;
  padding: 0.8rem;
  font-size: 1.4rem;
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
}
#container-gerador-laudo #gerador-laudo #form-group-tipos .form-tipo .input-file {
  position: relative;
  display: inline-block;
}
#container-gerador-laudo #gerador-laudo #form-group-tipos .form-tipo .input-file {
  display: none;
}
#container-gerador-laudo #gerador-laudo #form-group-tipos .form-tipo .placeholder {
  width: 100%;
  padding: 0.8rem;
  font-size: 1.4rem;
  border: 0.1rem dashed #ccc;
  color: #888;
  cursor: pointer;
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
}
#container-gerador-laudo #gerador-laudo #form-group-tipos .form-tipo .placeholder:hover {
  border-color: #888;
}
#container-gerador-laudo #gerador-laudo #form-group-tipos .form-tipo .file-name {
  margin-top: 10px;
  color: #333;
}
#container-gerador-laudo #gerador-laudo #form-group-tipos .form-tipo select {
  width: 100%;
  padding: 0.8rem;
  font-size: 1.4rem;
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
  color: #888;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

html {
  height: 100%;
}

body {
  height: 100%;
  color: #ffffff;
  background-color: #FFF7FD;
}

.descricao {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #6a2c39;
  border-bottom-right-radius: 15.5rem;
  height: 70vh;
  padding: 2rem;
  padding: 5rem;
  margin: 0 auto;
}
.descricao .text-content {
  max-width: 50%;
}
.descricao .text-content h1 {
  font-size: 2em;
  margin-bottom: 1.25rem;
}
.descricao .text-content p {
  font-size: 1.2em;
  line-height: 1.5;
  margin-bottom: 1.875rem;
}
.descricao .image-content {
  max-width: 45%;
}
.descricao .image-content img {
  width: 100%;
  border-radius: 3.125rem;
}

#servicos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 2%;
}
#servicos h2 {
  color: #6a2c39;
  font-size: 1.75rem;
  margin-bottom: 2rem;
}
#servicos #projeto-fotovoltaico {
  text-align: center;
  padding: 1.5rem;
}
#servicos #projeto-fotovoltaico h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #000000;
}
#servicos #projeto-fotovoltaico p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #000000;
}
#servicos #projeto-fotovoltaico #beneficios-projeto-fotovoltaico {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
#servicos #projeto-fotovoltaico #beneficios-projeto-fotovoltaico #item-beneficio {
  background-color: #2F4858; /* Cor de fundo dos benefícios */
  color: white;
  padding: 1.5rem;
  border-radius: 3rem;
  flex: 1 1 30%; /* Define a largura de 30% e permite que ela ajuste responsivamente */
  max-width: 25%;
  min-width: 250px;
}
#servicos #projeto-fotovoltaico #beneficios-projeto-fotovoltaico #item-beneficio h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
#servicos #projeto-fotovoltaico #beneficios-projeto-fotovoltaico #item-beneficio p {
  font-size: 1.125rem;
}
#servicos #projeto-spda {
  text-align: center;
  padding: 1.5rem;
}
#servicos #projeto-spda h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #000000;
}
#servicos #projeto-spda p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #000000;
}
#servicos #projeto-spda #beneficios-spda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
#servicos #projeto-spda #beneficios-spda #item-beneficio {
  background-color: #57456c; /* Cor de fundo dos benefícios */
  color: white;
  padding: 1.5rem;
  border-radius: 3rem;
  flex: 1 1 30%; /* Define a largura de 30% e permite que ela ajuste responsivamente */
  max-width: 25%;
  min-width: 250px;
}
#servicos #projeto-spda #beneficios-spda #item-beneficio h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
#servicos #projeto-spda #beneficios-spda #item-beneficio p {
  font-size: 1.125rem;
}
#servicos #projeto-eletrico {
  text-align: center;
  padding: 1.5rem;
}
#servicos #projeto-eletrico h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #000000;
}
#servicos #projeto-eletrico p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #000000;
}
#servicos #projeto-eletrico #beneficios-projeto-eletrico {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
#servicos #projeto-eletrico #beneficios-projeto-eletrico #item-beneficio {
  background-color: #434363; /* Cor de fundo dos benefícios */
  color: white;
  padding: 1.5rem;
  border-radius: 3rem;
  flex: 1 1 30%; /* Define a largura de 30% e permite que ela ajuste responsivamente */
  max-width: 25%;
  min-width: 250px;
}
#servicos #projeto-eletrico #beneficios-projeto-eletrico #item-beneficio h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
#servicos #projeto-eletrico #beneficios-projeto-eletrico #item-beneficio p {
  font-size: 1.125rem;
}
#servicos #estudo-luminotecnico {
  text-align: center;
  padding: 1.5rem;
}
#servicos #estudo-luminotecnico h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #000000;
}
#servicos #estudo-luminotecnico p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #000000;
}
#servicos #estudo-luminotecnico #beneficios-estudo-luminotecnico {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
#servicos #estudo-luminotecnico #beneficios-estudo-luminotecnico #item-beneficio {
  background-color: #2F4858; /* Cor de fundo dos benefícios */
  color: white;
  padding: 1.5rem;
  border-radius: 3rem;
  flex: 1 1 30%; /* Define a largura de 30% e permite que ela ajuste responsivamente */
  max-width: 25%;
  min-width: 250px;
}
#servicos #estudo-luminotecnico #beneficios-estudo-luminotecnico #item-beneficio h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
#servicos #estudo-luminotecnico #beneficios-estudo-luminotecnico #item-beneficio p {
  font-size: 1.125rem;
}
#servicos #entrada-servico {
  text-align: center;
  padding: 1.5rem;
}
#servicos #entrada-servico h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #000000;
}
#servicos #entrada-servico p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #000000;
}
#servicos #entrada-servico #beneficios-entrada-servico {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
#servicos #entrada-servico #beneficios-entrada-servico #item-beneficio {
  background-color: #434363; /* Cor de fundo dos benefícios */
  color: white;
  padding: 1.5rem;
  border-radius: 3rem;
  flex: 1 1 30%; /* Define a largura de 30% e permite que ela ajuste responsivamente */
  max-width: 25%;
  min-width: 250px;
}
#servicos #entrada-servico #beneficios-entrada-servico #item-beneficio h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
#servicos #entrada-servico #beneficios-entrada-servico #item-beneficio p {
  font-size: 1.125rem;
}
#servicos #acompanhamento-obras {
  text-align: center;
  padding: 1.5rem;
}
#servicos #acompanhamento-obras h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #000000;
}
#servicos #acompanhamento-obras p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #000000;
}
#servicos #acompanhamento-obras #beneficios-acompanhamento-obras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
#servicos #acompanhamento-obras #beneficios-acompanhamento-obras #item-beneficio {
  background-color: #57456c; /* Cor de fundo dos benefícios */
  color: white;
  padding: 1.5rem;
  border-radius: 3rem;
  flex: 1 1 30%; /* Define a largura de 30% e permite que ela ajuste responsivamente */
  max-width: 25%;
  min-width: 250px;
}
#servicos #acompanhamento-obras #beneficios-acompanhamento-obras #item-beneficio h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
#servicos #acompanhamento-obras #beneficios-acompanhamento-obras #item-beneficio p {
  font-size: 1.125rem;
}
#servicos #acompanhamento-obras #quote {
  color: #000000;
  font-size: 1.25rem;
  font-style: italic;
  margin-top: 1.875rem;
}

@media (max-width: 768px) {
  .benefit-item {
    flex: 1 1 45%; /* Se ajusta em telas menores, dois itens por linha */
    max-width: 45%;
  }
}
@media (max-width: 480px) {
  .benefit-item {
    flex: 1 1 100%; /* Se ajusta para telas pequenas, um item por linha */
    max-width: 100%;
  }
}
#contato {
  background-color: #3d3d5c; /* Cor roxa para a seção */
  padding: 3rem 0;
  text-align: center;
}
#contato .info {
  margin-bottom: 2rem;
}
#contato .info h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #d3d3f5;
}
#contato .info p {
  font-size: 1.25rem;
  color: #d3d3f5;
}
#contato .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60rem; /* Largura máxima da área do formulário */
  margin: 0 auto;
  width: 100%;
  padding: 2rem;
}
#contato .container form.formulario-contato {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Espaço entre inputs */
  background-color: #404060; /* Fundo do formulário */
  padding: 2rem;
  border-radius: 0.5rem;
  width: 100%;
}
#contato .container form.formulario-contato input {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #e8e8f0;
  color: #333;
}
#contato .container form.formulario-contato textarea {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #e8e8f0;
  color: #333;
  height: 10rem;
}
#contato .container form.formulario-contato button {
  padding: 1rem;
  font-size: 1.25rem;
  border: none;
  background-color: #ccc;
  color: #333;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background-color 0.3s, color 0.3s;
}
#contato .container form.formulario-contato button:hover {
  background-color: #fff;
  color: #3d3d5c;
}
#contato .container .contato-info {
  background-color: #252542;
  padding: 2rem;
  border-radius: 0.5rem;
  width: 100%;
  color: #d3d3f5;
  margin-top: 2rem;
}
#contato .container .contato-info p {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#contato .container .contato-info .fa-whatsapp {
  margin-left: 0.5rem;
  color: #25d366;
}

.header-landing,
.header-selling {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1.25rem;
  display: flex;
}
.header-landing .logo,
.header-selling .logo {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.header-landing .logo h1,
.header-selling .logo h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #ffffff;
  padding: 0.3125rem 0.625rem;
}
.header-landing a,
.header-selling a {
  color: #ffffff;
  text-decoration: none;
  padding: 0.3125rem 0.625rem;
  font-size: 1rem;
}
.header-landing a:hover,
.header-selling a:hover {
  background-color: #944d66;
  border-radius: 0.625rem;
}
.header-landing .main-nav ul,
.header-selling .main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.25rem;
}

.header-landing {
  background-color: #6a2c39;
}
.header-landing a {
  color: #FFF7FD;
}
.header-landing a:hover {
  color: #6a2c39;
  background-color: #ffffff;
}
.header-landing .logo h1 {
  color: #FFF7FD;
}

.header-selling {
  background-color: #FFF7FD;
}
.header-selling a {
  color: #6a2c39;
}
.header-selling a:hover {
  color: #FFF7FD;
  background-color: #944d66;
}
.header-selling .logo h1 {
  color: #6a2c39;
}

.btn {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  color: #ffffff;
  background-color: transparent;
  border: 0.125rem solid #ffffff;
  border-radius: 1.5625rem;
  text-decoration: none;
  font-size: 1em;
  transition: background-color 0.3s, color 0.3s;
}
.btn:hover {
  background-color: #ffffff;
  color: #6a2c39;
}

.image-content {
  max-width: 45%;
}
.image-content img {
  width: 100%;
  border-radius: 3.125rem;
}

footer {
  text-align: center;
  width: 100%;
}
footer .container-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 0;
}
footer .container-footer h4 a {
  color: #ffffff;
  transition: color 0.3s;
}
footer .container-footer h4 a:hover {
  color: #6a2c39;
}