body { 
  font-family: 'Roboto', Times, sans-serif;
  font-size: 16px;
  margin: 20px;
  line-height: 1.6;
  color: #ffffff;
  background-color: #f3ab58;
}

/* Cabeçalho */
header {
  font-size: 60px;
  margin-bottom: 1em;
  text-align: center;
}

/* Cabeçalho com logo */
.cabecalho {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

/* Estilo da logo */
.logo-colegio {
  width: 90px;
  height: auto;
  border-radius: 80px;
}

/* Parágrafos */
p {
  font-size: 20px;
  margin-bottom: 1em;
  text-align: justify;
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
  font-size: 40px;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
  text-align: center;
}

/* BLOCO 1: Agrinho */
.bloco-agrinho {
  max-width: 1500px;
  margin: 0 auto 40px auto;
  padding: 20px;
  background-color: #136313;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.imagem-centralizada {
  width: 1000px;
  height: auto;
  margin: 0 auto 20px auto;
  display: block;
  border-radius: 10px;
}

/* BLOCO 2: Projeto*/
.bloco-projeto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  background-color: #2b8b2b;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.imagem-lado{
  width: 550px;
  height: auto;
  border-radius: 10px;
}

.texto-lado{
  max-width: 600px;
  text-align: right;
}

/* BLOCO 3: Greening */
  .bloco-greening{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  background-color: #21d1217e;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.imagem-lado-2 {
  width: 550px;
  height: auto;
  border-radius: 10px;
}

.texto-lado-2 {
  max-width: 600px;
  text-align: right;
}

/* BLOCO 4: Circuitos*/
.circuitos {
  background-color: #2b8b2b;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.containertextos {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.texto-central {
  max-width: 400px;
  text-align: justify;
}

.container-carrossel {
  max-width: 1000px; 
  margin: 0 auto;
  padding: 10px;
}

.carrossel {
  display: grid;
  grid-auto-flow: column;
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.card {
  position: relative;
  min-width: 600px;   
  height: 350px;      
  scroll-snap-align: center;
  border-radius: 30px;
  overflow: hidden;
  background: #f59e4cea;
}

.imagem-carrossel {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.legenda {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 16px;
  font-family: sans-serif;
}

/* BLOCO 5: Solo e cultura */
.bloco-solo-cultura {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background-color: #136313;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap; 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.imagem-lado5 {
  width: 300px;
  height: auto;
  border-radius: 10px;
}

.texto-central5 {
  max-width: 500px;
  text-align: center;
}

/* BLOCO 6: Analise orcamentaria */
.bloco-analise-orcamentaria {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  background-color: #2b8b2b;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.texto-analise {
  max-width: 1500px;
  text-align: justify;
}

.containertextos {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.texto-central-1{
  line-height: 0.8;
  background-color: #136313;
  border-color: #136313;
  border-radius: 10px;
  max-width: 500px;
  text-align: justify;
}

.texto-analise-1 p {
  background-color: #136313;
  border-radius: 10px;
  border-color: #136313;
  font-size: 30px;
  max-width: 1500px;
  text-align: center;
}


/* BLOCO 7: Galeria */
.bloco-galeria {
  max-width: 1500px;
  margin: 0 auto 40px auto;
  padding: 20px;
  background-color: #21d1217e;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.galeria-scroll {
    max-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    padding: 15px;
    border: 1px solid #004d0065;
    border-radius: 8px;
    background-color: #5bf05b65;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.galeria-scroll img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    transition: transform 0.2s ease-in-out;
}

.galeria-scroll img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/*BLOCO 8: Mais informações  */
.bloco-mais-info {
  max-width: 1500px;
  margin: 0 auto 40px auto;
  margin-top: 40px;
  padding: 20px;
  background-color: #2b8b2b;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}  

.texto-cima{
  text-align: center;
}

.links-do-projeto {
  list-style: none;
  padding: 0;
  text-align: left;
}

.links-do-projeto li {
  margin: 10px 0;
}

.links-do-projeto a {
  text-decoration: none;
  color: #ff915ee1;
  font-weight: bold;
}

.links-do-projeto a:hover {
  text-decoration: underline;
}

/* RESPONSIVIDADE: Ajustes para telas pequenas */
@media (max-width: 768px) {

  header {
    font-size: 28px;
    flex-direction: column;
    text-align: center;
  }

  .logo-colegio {
    width: 70px;
    margin-bottom: 10px;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: 28px;
  }

  p {
    font-size: 16px;
  }

  .imagem-centralizada {
    width: 100%;
  }

  .imagem-lado, .imagem-lado-2, .imagem-lado5, .imagem-bloco {
    width: 100%;
    max-width: 100%;
  }

  .bloco-projeto,
  .bloco-greening,
  .bloco-solo-cultura,
  .bloco-analise-orcamentaria {
    flex-direction: column;
    text-align: center;
  }

  .texto-lado,
  .texto-lado-2,
  .texto-analise,
  .texto-central5 {
    text-align: center;
    max-width: 100%;
  }

  .containertextos {
    flex-direction: column;
    gap: 15px;
  }

  .texto-central {
    max-width: 100%;
    padding: 0 10px;
  }

  .card {
    min-width: 90vw;
    height: 250px;
  }

  .galeria-scroll img {
    height: 250px;
  }

  .links-do-projeto {
    text-align: center;
  }
}