.conhecaGraute {
    padding: 7% 0;
    background:
        linear-gradient(rgba(26, 170, 218, 0.3) 0%, rgba(26, 170, 218, 0.3) 50%, rgba(23, 74, 111, 1) 100%),
        /* camada azulada com opacidade */
        url("../img/EquipeGraute.webp");
    /* imagem de fundo */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

}

@media (max-width: 481px) {
    .conhecaGraute {
        background:
            linear-gradient(rgba(23, 74, 111, 0.811), rgba(23, 74, 111, 0.7)),
            /* camada azulada com opacidade */
            url("../img/limpeza.webp");
        background-size: contain;
        /* imagem de fundo */
    }
}

.conhecaGrautePolaroid h1 {
    margin-bottom: 20px !important;
}


.polaroid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 50px 0;

}

.titulo {
    margin-bottom: 150px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.titulo h5 {
    text-align: center;
    text-transform: uppercase;
    font-size: 2.0em;
}

.titulo h6 {
    text-transform: uppercase;
    background-color: #18739d;
    padding: 15px 20px;
    font-size: 1.5em;
}

.titulo h1 {
    letter-spacing: 0.4em;
    padding: 20px 5px;
    font-size: 4.0em;
}

@media (max-width: 730px) {
.titulo h5 {
 
    font-size: 1em;
}

.titulo h6 {
 
    font-size: 1em;
}

.titulo h1 {
    
    font-size: 2em;
}

}


@media (max-width: 1024px) {
    .titulo h5 {
        font-size: 1.1em;
    }

    .titulo h6 {
        font-size: 1.1em;
    }

    .titulo h1 {
        font-size: 2.5em;
    }
}

/* === MOBILE: Máx 600px === */
@media (max-width: 600px) {
    .titulo h5 {
        font-size: 1em;
    }

    .titulo h6 {
        font-size: 1em;
    }

    .titulo h1 {
        font-size: 2.2em;
        text-align: center;
    }
}

/* === TELAS GRANDES: Min 2000px === */
@media (min-width: 2000px) {
    .titulo h5 {
        font-size: 1.3em;
    }

    .titulo h6 {
        font-size: 1.3em;
    }

    .titulo h1 {
        font-size: 3em;
    }
}

.descricaoGraute {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 45px;
}

.descricaoGraute p {
    padding: 40px;
    line-height: 1.9em;
}

.desc {
    width: 80%;
    border: 1px solid white;
}

.timeApresentacao {
    margin: 50px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.timeApresentacao img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.acaoOrcamento {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}



.conhecaGrautePolaroid {
    padding: 120px 20px;
    text-align: center;
    background-image: url('../img/bgConehcaGraute.webp');
    /* Adicione esta linha */
    background-size: cover;
    /* Para cobrir todo o fundo do elemento */
    background-repeat: no-repeat;
    /* Para evitar que a imagem se repita */
    background-position: center;
    /* Para centralizar a imagem */
    width: 100%;
    /* Adicione esta linha para preencher a largura */

    position: relative;

    z-index: 50;
}

.conhecaGrautePolaroid h1 {
    margin-bottom: 20px !important;
}


.polaroid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    /* Aumentei um pouco o gap */
    padding: 40px 20px;
    border-top: 1px solid #e0e0e0;
    width: 90%;
    /* Aumentei um pouco a largura do container */
    max-width: 1400px;
    /* Aumentei a largura máxima */
    margin: 0 auto;
    /* Centraliza o container */
}

.polaroid-container:first-child {
    border-top: none;
}

.polaroid-container>div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.Img {
    flex: 1;
    display: flex;
    justify-content: center;
}

.Img img {
    width: 350px;
    /* Aumentei o tamanho padrão da imagem */
    height: auto;
    /* Manter a proporção da imagem */
    object-fit: cover;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
    /* Sombra suave */
    border-radius: 5px;
    /* Bordas levemente arredondadas */
    margin-bottom: 15px;
    /* Espaço para a "legenda" */
    transform: rotate(-2deg);
    /* Leve rotação para dar o efeito */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* Transições suaves */
    background-color: white;
    /* Cor de fundo da "polaroid" */
    padding: 10px;
    /* Espaçamento interno */
}

.polaroid-container:nth-child(4) .Img img {
    width: auto;
    /* Defina a largura desejada */
    height: 400px;
    /* Para manter a proporção */
}


.Img img:hover {
    transform: rotate(0deg) scale(1.05);
    /* Desvira e leve zoom ao passar o mouse */
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3);
    /* Sombra mais pronunciada no hover */
}

.Desc {
    flex: 1;
    text-align: left;
    padding: 0 30px;
    /* Aumentei um pouco o padding lateral do texto */
    display: flex;
    flex-direction: column;
}

.Desc h2 {
    font-size: 2em;
    /* Ajustei o tamanho da fonte do título */
    margin-bottom: 8px;
    color: #118EBF;
    order: 1;
}

.Desc p {
    font-size: 1.1em;
    /* Ajustei o tamanho da fonte do parágrafo */
    line-height: 1.6;
    margin-bottom: 12px;
    color: white;
    order: 2;
}

.Desc button {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #005f85; /* azul com contraste alto */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
    order: 3;
    align-self: flex-start;
    margin-top: 15px;
    margin-bottom: 25px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); /* contorno leve para destaque */
}

.Desc button:hover {
    background-color: white;
    color: #118EBF;
}

/* Ajustes para a ordem inversa (mantenha como está) */
.polaroid-container:nth-child(even) {
    flex-direction: row-reverse;
}

@media (max-width: 481px) {
    .polaroid-container {
        flex-direction: column;
        align-items: center;
        gap: 50px;
        /* Aumentei um pouco o gap no mobile */
        padding: 30px 15px;
        border-top: 1px solid #e0e0e0;
        width: 95%;
        max-width: none;
    }

    .polaroid-container:first-child {
        border-top: none;
    }

    .polaroid-container>div {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .polaroid-container.meio {
        flex-direction: column-reverse;
    }



    .Img img {
        width: 350px;
        transform: rotate(0deg);
        /* Remove a rotação no mobile para melhor visualização */
    }



    .Desc {
        text-align: center;
        padding: 0;
        align-items: center;
    }

    .Desc h2 {
        font-size: 1.7em;
        margin-bottom: 10px;
        align-items: center;
    }

    .Desc h2 {
        font-size: 1.7em;
        margin-bottom: 10px;
    }

    .Desc p {
        font-size: 1em;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .Desc button {
        align-self: center;
        margin-top: 10px;
        font-size: 0.9em;
        padding: 10px 16px;
    }

    .Desc p {
        font-size: 1em;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .Desc button {
        align-self: center;
        margin-top: 10px;
        font-size: 0.9em;
        padding: 10px 16px;
    }

    .conhecaGrautePolaroid {
        position: relative;
        /* Adiciona posicionamento relativo ao container pai */
    }

    .polaroid-container:nth-child(3) {
        /* Seleciona o container do Guilherme */
        position: relative;
        /* Garante que este container também tenha um contexto de z-index */
        z-index: 2;
        /* Coloca o container do Guilherme acima de outros elementos */
    }

    .containerPlanta {
        position: relative;
        z-index: 1;
    }
}