/* Reset geral */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', serif;
}

/* Transição global para elementos com AOS */
body[data-aos-duration='4000'] [data-aos],
[data-aos][data-aos][data-aos-duration='4000'] {
    transition-duration: 4000ms;
}

/* Cabeçalho */
#cabecalho-m {
    background-image: url('../_imagens/banner-topo.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 900px;
    animation: fadeIn 2s;
}

/* Menu */
.navbar {
    background-color: #74bf54;
    text-transform: uppercase;
}

.navbar-brand {
    font-family: Roboto, sans-serif;
}

.navbar.navbar-9 .navbar-toggler-icon {
    background-image: url('https://mdbootstrap.com/img/svg/hamburger3.svg?color=00FBD8');
}

/* Conteúdo do site */
.prg-inicial-img {
    display: flex;
    width: 100%;
    height: 150px;
    justify-content: space-around;
    margin-top: 75px;
}

.prg-inicial-img p {
    text-align: center;
}

.prg-inicial {
    padding: 25px;
    text-align: center;
    font-size: 1.5em;
}

/* Efeito de destaque ao passar o mouse sobre as imagens */
.prg-inicial-img div {
    transition: transform 0.3s; /* Adiciona uma transição suave ao movimento */
}

.prg-inicial-img div:hover {
    transform: scale(1.1); /* Aumenta ligeiramente o tamanho ao passar o mouse */
}


.hr2 {
    width: 90%;
    height: 3px;
    border-radius: 10px;
}

.quebra {
	height: 250px;
	background-image: url('../_imagens/jardinagem2.png');
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center;
	margin-top: 20px;
}

.quebra2 {
	height: 250px;
	background-image: url('../_imagens/divisor2.png');
	background-size: cover;
    background-position: center;
	margin-top: 20px;
}

/* Estilos para os cards */
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 100%; /* Definindo a largura máxima para caber em uma tela */
    margin: 0 auto; /* Centralizando os cards na tela */
    padding: 20px; /* Adicionando um espaçamento interno */
	background-color: #74bf54;
}

.card {
    width: calc(25% - 20px); /* Definindo a largura dos cards, com margem entre eles */
    margin-bottom: 20px; /* Adicionando espaço entre os cards na vertical */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

.card img {
    width: 75px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    float: left;
}

.card-content {
    overflow: hidden;
    margin-top: 10px;
}

.card-content p {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 5px;
}

.card-content strong {
    font-weight: bold;
}

/* Conteúdo sobre */
#sobre-nos {
    display: flex;
}

#sobre-nos .banner-sobre {
    padding-top: 20px;
    padding-left: 20px;
    border-radius: 5%;
    background-position: left;
    width: 50%;
}

.textosobre {
    padding: 20px;
    text-align: center;
}

#sobre-nos h1 {
    margin-top: 10px;
}

.textos-imagens {
    max-width: 75%;
    margin: 0 auto;
    display: flex;
}

.textos-imagens img {
    margin-left: 50px;
    border-radius: 15px;
    box-shadow: 3px 3px 3px #888888;
}

.premiacao {
    max-width: 75%;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Alinha verticalmente o texto e a imagem */
    gap: 20px; /* Adiciona um espaço entre os elementos para evitar que se toquem */
}

.premiacaotexto {
    flex: 1; /* Permite que o container do texto ocupe o espaço disponível */
    text-align: left;
	max-width: 500px;
	margin-left: 25%;

}

.premiacaoimg {
    /* A ordem no flexbox pode ser controlada com a propriedade 'order' */
    order: 2; /* Garante que a imagem fique à direita */
}

.premiacaoimg img {
    max-width: 50%; /* Torna a imagem responsiva dentro do seu container */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 15px;
	margin-left: 10%;
    box-shadow: 3px 3px 3px #888888;
}

/* É importante que o container do texto venha antes no HTML ou use 'order' */
.premiacaotexto {
    order: 1; /* Garante que o texto fique à esquerda */
}

.textos-conteudo {
    width: 100%;
    padding: 10px;
    border-radius: 15px;
    background-color: #74bf54;
    margin-left: -50px;
    margin-right: 50px;
    margin-top: 15px;
    color: #000000;
    box-shadow: 3px 3px 3px #295c13;
}

.titulos {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.9em;
}

.subtitulos {
	margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.0em;
}

hr {
    width: 50%;
    background-color: #808080;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

#informacoesadd {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #228f5b;
    height: 300px;
    margin-top: 10px;
    justify-content: space-around;
    text-align: center;
    color: white;
    padding-top: 50px;
}

.contato1 {
    text-align: left;
}

.contato1 a {
    color: white;
}

.contato1 a:hover {
    color: yellow;
}


footer {
    height: 40px;
    padding-top: 10px;
    background-color: #166841;
    text-align: center;
    color: #fff;
}

/* Media Queries */
@media (max-width: 1024px) {
    #cabecalho-m {
        height: 400px;
    }

    #sobre-nos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .textos-imagens img {
        width: 80%;
        margin-left: 0;
        margin-bottom: 10px;
        margin: 0 auto;
    }

    .textos-conteudo {
        margin-left: 0;
        padding: 5px;
        text-align: center;
        max-width: 100%;
    }
	
	 .premiacao {
        /* Muda a direção do flex: de lado a lado para um em cima do outro */
        flex-direction: column; 
        /* Aumenta a largura para ocupar mais a tela do celular */
        max-width: 100%; 
		align-items: center; 
    }

    /* Inverte a ordem para a imagem ficar EM CIMA */
    .premiacaoimg {
        order: 1; /* No mobile, a imagem vem primeiro */
		max-width: 100%;
    }

    /* Ajusta o texto para ficar EMBAIXO e mais legível */
    .premiacaotexto {
        order: 2; /* No mobile, o texto vem em segundo */
        max-width: 100%; /* Permite que o texto ocupe a largura disponível */
        text-align: center; /* Centraliza o texto para um visual mais limpo no mobile */
		margin-left: 5px;
		margin-right: 5px;
    }
	
	 .premiacaoimg img {
        width: 100%; 
        max-width: 400px; /* A imagem não passará de 400px, mesmo em tablets */
        margin: 0 auto; /* Centraliza a imagem já que ela é display: block */
    }


    #informacoesadd {
        height: 700px;
    }

    #informacoesadd div { 
        margin: 8px 55px 0px 55px;
        font-size: 1em;
        color: #fff;
    }
}

/* Media Queries */
@media (max-width: 768px) {
	
    .navbar-nav {
        flex-direction: column;
        text-align: center;
    }

    .navbar-nav .nav-item {
        margin: 5px 0;
    }

    #cabecalho-m {
        background-position: center;
        background-size: cover;
        box-shadow: 3px 3px 3px #295c13;
        height: 300px; /* Ajuste a altura do cabeçalho para telas menores */
    }
	
	.card {
        width: calc(50% - 20px); /* Alterando a largura dos cards para 50% em telas menores que 768px */
    }

    #sobre-nos .banner-sobre {
        width: 100%;
        padding: 0;
        border-radius: 0;
    }
	
    .textosobre {
        width: 100%;
        padding: 20px;
        text-align: left;
    }
	
	.premiacaoimg img {
        width: 100%; 
        max-width: 400px; /* A imagem não passará de 400px, mesmo em tablets */
        margin: 0 auto; /* Centraliza a imagem já que ela é display: block */
    }

    .prg-inicial-img {
        display: none;
    }

    .prg-inicial-fundo {
        display: none;
    }

    .banner-sobre {
        display: none;
    }

    .textos-imagens {
        display: flex;
        flex-direction: column;
    }

    .textos-imagens img {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
    }

    .textos-conteudo {
        margin-right: 0;
        margin-left: 0;
        padding: 5px;
        text-align: center;
        max-width: 100%;
    }

    #informacoesadd {
        height: 700px;
    }

    #informacoesadd div { 
        margin: 8px 0;
        font-size: 0.9em;
        color: #fff;
        text-align: center;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

 @keyframes blink {
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
    }

    .blink-text {
        animation: blink 1.5s infinite;
    }