html{
  scrollbar-color: #123d12 #0a1f0a;
  scroll-behavior: smooth;
}
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #0a1f0a, #123d12);
  color: #ccffcc;
}
.botao-topo {
    position: fixed;
    bottom: 50px; /* Distância do fundo */
    right: 50px;  /* Distância da esquerda */
    z-index: 100; /* Garante que fique acima de outros elementos */
    width: 50px;   /* Ajuste o tamanho da sua imagem */
    height: 50px;
    opacity: 0.7;  /* Transparência inicial */
    transition: 0.3s; /* Animação suave no hover */
}

.botao-topo img {
    width: 200%;
    height: 200%;
}

.botao-topo:hover {
    opacity: 1; /* Fica opaco ao passar o mouse */
    transform: scale(1.1); /* Pequeno aumento no hover */
}


/* parte de cima com o título */
header {
  padding: 60px 20px;
  text-align: left;
}

header h1 {
  font-size: 48px;
  margin: 0;
  color: #7CFF7C;
}

header h2 {
  margin: 10px 0;
  margin-left: 10px;
  color: #aaffaa;
}

.sub {
  margin-top: 10px;
  background: #1f5f1f;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
}

/* parte do meio com o Símbolo */
.hero {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #7CFF7C, #2ecc71);
  transform: rotate(45deg);
  box-shadow: 0 0 30px #7CFF7C;
}

/* estrutura central com os textos */
.content {
  padding: 40px;
  text-align: center;
}

.content h2 {
  color: #7CFF7C;
}

/* caixa de texto com suas cores 
(o primeiro cards serve para fazer o espaçamento e centralizar as caixas)
(o segundo é em relação as caixas e suas cores com as animações que eslas tem)
(o terceiro serve para as interações com a caixa)
  */
.cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 40px;
}

.cards a{
  text-decoration: none;
  color: inherit;
}

.card {
  background: #1c3b1c;
  padding: 20px;
  border-radius: 10px;
  width: 200px;
  transition: 0.3s;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #7CFF7C;
  cursor: pointer;
}

.card-link:after { /* linha para ser possível ir para a seção sem precisar clicar no texto*/
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
}

/*Pontos de reciclagens*/
.maps h2{
  color: #7CFF7C;
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
}

/*estrutura do mapa*/
.map-responsive{
   overflow:hidden;

}

/*parte da energia*/
.energia{
  text-align:left;

  h1{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; 
  background: #1c3b1c;
  border-radius: 50px;
  color: #7CFF7C;
  text-align: center;
  }

  p{
    text-align: center;
  }
  p1{
      margin-left: 1100px;
    }

    h2{
      color: #7CFF7C;
      margin-left: 10px;
    }

    ul1{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right: 45px;
     gap: 45px;
     padding-top: 1px;
     padding-bottom: 45px;
    }
    ul2{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right: 45px;
     gap: 45px;
     padding-top: 1px;
     padding-bottom:35px;
    }
    ul3{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right: 60%;
     padding-top: 1px;
     padding-bottom:35px;
    }
}

/*parte da reciclagem*/
.reciclagem{
  text-align:left;

  h1{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; 
  background: #1c3b1c;
  border-radius: 50px;
  color: #7CFF7C;
  text-align: center;
  }

  p{
    text-align: center;
  }

  h2{
    color: #7CFF7C;
    margin-left: 10px;
  }
   ul1{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right: 100px;
     gap: 85px;
     padding-top: 1px;
     padding-bottom:45px;
    }
    ul2{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right: 100px;
     gap: 85px;
     padding-top: 1px;
     padding-bottom:45px;
    }
    ul3{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right: 240px;
     gap: 85px;
     padding-top: 1px;
     padding-bottom:45px;
    }
    ul4{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right:-8px;
     gap: 85px;
     padding-top: 1px;
    }
}

/*parte da inovação*/
.inovacão{
   text-align:left;

  h1{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; 
  background: #1c3b1c;
  border-radius: 50px;
  color: #7CFF7C;
  text-align: center;
  }

  p{
    text-align: center;
  }

    h2{
      color: #7CFF7C;
      margin-left: 10px;
    }

   ul1{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right: 100px;
     gap: 85px;
     padding-top: 1px;
     padding-bottom:45px;
    }
    ul2{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right: 100px;
     gap: 85px;
     padding-top: 1px;
     padding-bottom:45px;
    }
    ul3{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right: 240px;
     gap: 85px;
     padding-top: 1px;
     padding-bottom:45px;
    }
    ul4{
     display: flex;
     line-height: 1.4;
     padding: 30px;
     margin-right:-8px;
     gap: 85px;
     padding-top: 1px;
    }
}

a {
    color: #3498db; /* Cor azul */
    text-decoration: none; /* Remove sublinhado */
    font-weight: bold;
}

a:hover {
    color: #2c3e50; /* Muda a cor ao passar o mouse */
    text-decoration: underline; /* Adiciona sublinhado */
}

/* estrutura dos "pés" do código */
footer{
   background: #0a1f0a;
   padding: 40px;
   text-align: center;
}