@font-face {
  font-family: "Raleway";
  src: url("../assets/font/Raleway-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "UltimateSerial-Heavy";
  src: url("../assets/font/Ultimate-Serial-Heavy.ttf") format("truetype");
}

@font-face {
  font-family: "Buba";
  src: url("../assets/font/Buba.otf") format("truetype");
}

body {
  background-color: #f0f0f0;
  font-family: "Raleway", sans-serif;
  margin: 0;
  padding: 0;
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
div,
a,
p {
  margin: 0;
}

p {
  line-height: 23px;
  max-width: 1400px;
}

h2 {
  max-width: 1400px;
}

h1 {
  text-transform: uppercase;
  font-family: "UltimateSerial-Heavy", sans-serif;
  font-size: 40px;
  margin-bottom: 10px;
}

html {
  scroll-behavior: smooth;
}

.titulo-secao {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.seta-titulo {
  color: #f9b234;
}

.corpo {
  padding: 0 50px;
}

.secao {
  background-color: white;
  border-radius: 20px;
  padding: 50px;
  margin-bottom: 30px;
}

.menu {
  background-color: #f9b234;
  color: white;
  padding: 10px 50px;
  display: flex;
  justify-content: space-between;
}

.menu-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.menu-item {
  color: white;
  text-decoration: none;
  align-self: center;
  padding: 10px;
  background-color: #f9b234;
}

.menu-item:hover {
  background-color: #ffba42;
  border-radius: 10px;
  transition: 0.3s;
  transition-timing-function: ease;
}

.banner {
  width: 100%;
  margin-bottom: 30px;
}

.fundo-verde {
  display: inline-block;
  width: auto;
  background-color: #06582d;
  color: white;
  padding: 20px;
  border-radius: 10px;
  margin: 60px 20px 30px 0;
}

.row2 a {
  color: #06582d;
  border: #06582d 1px solid;
  text-decoration: none;
  border-radius: 10px;
  padding: 20px;
}

.row2 a:hover {
  background-color: #06582d;
  color: white;
  transition: 0.5s;
  transition-timing-function: ease;
}

/* .linha p
{
    margin-top: 20px;
} */

.linha-conteudo {
  display: flex;
  flex-direction: row;
  gap: 50px;
  justify-content: center;
  align-items: center;
}

.linha-img {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin: 20px 0 40px 0;
}

.linha-img img {
  width: 60%;
  min-width: 550px;
}

.linha-img {
  color: #06582d;
  font-weight: 800;
}

.dep-graf {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 400px;
  gap: 50px;
  justify-content: center;
  align-items: center;
}

.dep-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  justify-content: center;
  margin: 20px 0 40px 0;
}

.dep-container p {
  max-width: 600px;
}

.grafico {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 20px 0 40px 0;
}

.grafico-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.grafico-container p {
  max-width: 400px;
}

.grafico-container img {
  width: 20%;
  min-width: 350px;
}

.highlight {
  color: #f9b234;
}

.highlight2 {
  color: #f9b234;
  margin-bottom: 20px;
  font-size: 20px;
}

.row3 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  margin-top: 20px;
}

.row3 a {
  color: #f9b234;
  border: #f9b234 1px solid;
  text-decoration: none;
  border-radius: 10px;
  padding: 20px;
}

.row3 a:hover {
  background-color: #f9b234;
  color: white;
  transition: 0.5s;
  transition-timing-function: ease;
}

.highlight3 {
  color: #f9b234;
  font-size: 20px;
}

.dado-container {
  display: flex;
  flex-direction: row;
  gap: 100px;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
  flex-wrap: wrap;
}

.dado {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dado p {
  font-size: 20px;
  font-weight: 800;
}

.dado h1 {
  color: #06582d;
  margin: 0;
  font-size: 80px;
}

.row {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  margin: 60px 0 30px 0;
}

.row a {
  color: #f73bce;
  border: #f73bce 1px solid;
  text-decoration: none;
  border-radius: 10px;
  padding: 20px;
}

.row a:hover {
  background-color: #f73bce;
  color: white;
  transition: 0.5s;
  transition-timing-function: ease;
}

.carnaval {
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  padding: 20px;
  background: linear-gradient(
    to right,
    #f73bce,
    #8f68ff,
    #4f1baf,
    #8f68ff,
    #f73bce
  );
  background-size: 200%;
  animation: animate-gradient 5s linear infinite;
}

.carnaval h3 {
  color: white;
  white-space: nowrap;
}

@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}

.container-exec {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  margin: 50px 0;
}

.card-executor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;

  width: 300px;
  border-radius: 30px;
  background-color: #2c3981;
  color: white;
}

.card-executor p {
  text-align: center;
  padding: 0 30px 30px 30px;
}

.logo-exec {
  width: 70%;
  display: flex;
  background-color: white;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 0 0 15px 15px;
  margin-bottom: 25px;
}

.card-executor img {
  width: 80%;
}

.exec-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mapa-imagem {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 20px;
}

.mapa-imagem img {
  max-width: 400px;
}

#map {
  min-height: 400px;
  width: 100%;
}

.faltando {
  display: flex;
  height: 200px;
  width: 500px;
  justify-content: center;
  align-items: center;
  border: black 1px solid;
}

.destaque h2 {
  font-family: "Buba", sans-serif;
  /* text-transform: uppercase; */
  font-size: 30px;
  color: #06582d;
}

.destaque p {
  font-size: 20px;
  color: #f9b234;
}

.img-duda {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 40px 0;
}

.img-duda p {
  color: #06582d;
}

.img-duda img {
  width: 70%;
}

.metodologia-container,
.acao2025-container {
  display: flex;
  align-items: center;
}

.metodologia,
.acao2025 {
  margin: 20px 20px 0;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}

.metodologia::-webkit-scrollbar,
.acao2025::-webkit-scrollbar {
  display: none;
}

.scroll-left,
.scroll-right,
.scroll-left-acao2025,
.scroll-right-acao2025 {
  background-color: #06582d;
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.scroll-left:hover,
.scroll-right:hover,
.scroll-left-acao2025:hover,
.scroll-right-acao2025:hover {
  background-color: #074424;
}

.metodologia-item {
  background-color: #06582d;
}

.metodologia-item:nth-child(odd) {
  background-color: #076633;
}

.img-met img {
  height: 200px;
}

.img-acao2025 img {
  height: 400px;
}

.texto-met {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px;
  color: white;
}

.texto-met h3 {
  align-self: flex-start;
  margin-bottom: 15px;
}

.texto-met p {
  width: 200px;
}

.acoes-container {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 50px;
  margin-top: 50px;
  padding: 0 20px;
}

.acoes-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.acoes-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.acoes-item a {
  color: #06582d;
  text-decoration: none;
}

.acoes-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.materia {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.materia a {
  color: #06582d;
  text-decoration: none;
}

.depoimentos-container {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
}

.depoimento {
  display: flex;
  flex-direction: column;
  background-color: #06582d;
  color: white;
  padding: 50px;
  border-radius: 20px;
}

.depoimento h4 {
  margin-top: 10px;
  font-weight: 400;
  color: #f0f0f0;
}

.autor-dep {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.autor-dep img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.parceiros {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 70px 0 50px 0;
}

.logo-escalab img {
  margin: 20px 0 10px 0;
  height: 60px;
}

.logos-parceiros {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0 10px 0;
}

.logos-parceiros img {
  flex-wrap: wrap;
  margin-top: 20px;
  height: 40px;
}

#openUFMG,
#openBrandt,
#openPG {
  background-color: white;
  border: none;
  cursor: pointer;
}

.modal {
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.3s ease-in-out;
  z-index: -1;

  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content,
.modal-contentPG {
  background-color: white;
  padding: 20px;
  width: 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-contentPG {
  align-items: center;
}

.modal-content button,
.modal-contentPG button {
  width: 40px;
  height: 40px;
  font-size: 25px;
  background-color: #076633;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
}

.modal-contentPG button {
  align-self: flex-start;
}

.modal-content button:hover,
.modal-contentPG button:hover {
  background-color: #06582d;
}

.modal-content img {
  height: 100px;
}

.modal-contentPG img {
  height: 150px;
  width: 150px;
}

.modal.open {
  opacity: 1;
  z-index: 999;
}

.forms-input {
  width: 700px;
  height: 30px;
  border: none;
  outline: none;
  font-weight: 500;
  font-size: 15px;
  color: #666;
}

.contato {
  display: flex;
  flex-direction: column;
  padding: 25px 100px;
  color: white;
  position: relative;
  overflow: hidden;
}

.contato img {
  opacity: 0.3;
  height: 200px;
  position: absolute; /* Adicionado para posicionamento absoluto */
  bottom: 0; /* Ajuste conforme necessário */
  right: 0; /* Ajuste conforme necessário */
  z-index: -1; /* Coloca a imagem atrás dos outros elementos */
  width: 135%; /* Ajuste conforme necessário */
  height: auto; /* Ajuste conforme necessário */
}

.contato::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f9b234; /* Adicionar a cor de fundo */
  z-index: -2; /* Coloca o fundo atrás da imagem */
}

.contato h1 {
  z-index: 1; /* Garante que o título fique acima da imagem */
}

.contato-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contato-container textarea {
  height: 200px;
  padding: 10px;
  border-radius: 20px;
}

.contato-container input {
  padding: 10px;
  border-radius: 20px;
}

.forms {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  z-index: 1;
}

.forms button {
  height: 40px;
  background-color: #076633;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 20px;
}

.forms button:hover {
  background-color: #06582d;
  color: white;
}

@media (max-width: 768px) {
  .corpo {
    padding: 0 15px;
  }

  .secao {
    padding: 25px 20px;
  }

  .menu {
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    gap: 10px;
  }

  .menu-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  h1 {
    font-size: 26px;
  }

  .dado h1 {
    font-size: 50px;
  }

  .dado-container {
    gap: 40px;
  }

  .linha-conteudo {
    flex-direction: column;
    gap: 20px;
  }

  .linha-img img {
    width: 100%;
    min-width: unset;
  }

  .container-exec {
    flex-direction: column;
    align-items: center;
  }

  .card-executor {
    width: 90%;
    max-width: 340px;
  }

  .depoimentos-container {
    grid-template-columns: 1fr;
  }

  .depoimento {
    padding: 25px;
  }

  .acoes-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .mapa-imagem {
    flex-direction: column;
  }

  .mapa-imagem img {
    max-width: 100%;
  }

  .forms-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contato {
    padding: 25px 20px;
  }

  .contato-container input,
  .contato-container textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .dep-graf {
    min-width: unset;
  }

  .grafico-container img {
    width: 80%;
    min-width: unset;
  }

  .modal-content,
  .modal-contentPG {
    width: 90%;
    box-sizing: border-box;
  }
}