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

html {
  width: 100%;
}

body {
  background-color: #f2f2f2;
  font-family: "Roboto", sans-serif;
  width: 100%;
  margin: 0;
  overflow-x: hidden; /* Evite a barra de rolagem horizontal */
  position: relative;
}

/* Cabeçalho */
.head {
  background-color: #004c33;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.logoeco {
  max-width: 100%;
  height: auto;
}

.menu {
  font-size: 20px;
  border: 0;
  color: #f2f2f2;
  background-color: #004c33;
  margin-left: 20px;
  padding: 5px 10px;
  text-decoration: none;
}

/* Seção principal */
.urna {
  background-color: #f2f2f2;
  padding: 20px;
}

.solucao {
  text-align: center;
  color: #004c33;
  font-size: 24px;
}

.principal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.eletronica {
  background-color: #004C33;
  border: #0f8118 10px solid;
  width: 50%; /* O elemento vai ocupar metade da largura da tela */
  max-width: 600px; /* Define um limite máximo para o tamanho */
  min-width: 250px; /* Define um limite mínimo para o tamanho */
  text-align: center;
  color: #FFFF;
  margin: 20px auto; /* Centraliza o elemento na tela com margem automática */
  padding: 20px;
}

.serv {
  color: #FFFF;
  font-size: 18px;
}

.saiba {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  background-color: #66bda0;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.button-sobre-eco {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 300px;
  width: 100%;
  text-align: center;
}

.saiba:hover {
  background-color: #266d26;
  color: #fff;
}

.botao {
  width: 100%;
  height: 50px;
  margin-top: 20px;
}

/* Seção "Sobre Nós" */
#tudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.sobre {
  text-align: center;
  font-size: 40px;
  color: #0f8118;
}

/* Formulário de contato */
.formu {
  background-color: #004c33;
  width: 100%;
  padding: 20px;
  color: white;
}

.fale {
  text-align: center;
  font-size: 40px;
  color: #FFFF;
}

.formulario {
  text-align: center;
  color: white;
}

/* Rodapé */
footer {
  background-color: #0f8118;
  width: 100%;
  padding: 20px 0;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
}

/* Media queries para telas menores */
@media screen and (max-width: 768px) {
  .menu {
    margin-left: 10px;
  }

  .eletronica {
    width: 50%; /* Meio da tela em dispositivos móveis */
    max-width: 100%; /* Garante que ocupe no máximo 100% da tela */
  }

  .solucao {
    font-size: 20px;
  }

  .serv {
    font-size: 16px;
  }

  .saiba {
    font-size: 16px;
  }

  .sobre {
    font-size: 30px;
  }

  .fale {
    font-size: 30px;
  }

  footer {
    font-size: 14px;
  }
}

/* Modal */
#modal {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%; /* Reduz a largura do modal */
  max-width: 500px; /* Reduz o limite máximo de largura */
  max-height: 80vh; /* Define a altura máxima do modal */
  background-color: #fff;
  padding: 1rem; /* Reduz o padding */
  border-radius: 0.5rem;
  z-index: 9999;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.modal-body {
  padding: 15px; /* Reduz o padding */
  text-align: left;
  overflow-y: auto; /* Adiciona uma barra de rolagem vertical */
  max-height: calc(80vh - 60px); /* Altura máxima do corpo do modal */
}

.modal-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0; /* Reduz a margem */
}

#open-modal {
  border: 0;
  padding: 10px; /* Reduz o padding */
  border-radius: 7px;
  width: 150px; /* Reduz a largura */
  background-color: #FFFF;
  color: #004c33;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

#open-modal:hover {
  background-color: #004c33;
  color: #fff;
}

.close-modal-button {
  background: none;
  border: none;
  font-size: 1.2rem; /* Reduz o tamanho da fonte */
  cursor: pointer;
  color: #aaa;
}

.close-modal-button:hover {
  color: #000;
}

#fade {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

#modal.show, #fade.show {
  display: block; /* Torna o modal e o fundo visíveis */
}

.modal.show, #fade.show {
  display: block;
}

/* Media queries para telas menores */
@media screen and (max-width: 768px) {
  .modal-body {
    padding: 10px;
    max-height: calc(80vh - 60px); /* Altura máxima do corpo do modal */
  }

  .modal-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .close-modal-button {
    align-self: flex-end;
  }
}