@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Estilos gerais */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
}

h2 {
    color: #007A01;
    font-weight: 700;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

p {
    padding: 10px;
    margin: 20px;
    text-align: center;
    font-weight: 400;
}

/* Logo e navegação */
.logo img {
    height: 50px; /* Ajuste a altura conforme necessário */
    width: auto;
    margin-right: 20px;
}

.hamburger {
    display: none; /* Esconde o botão por padrão */
    font-size: 24px; /* Tamanho do ícone do hambúrguer */
    cursor: pointer;
}


nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fff;
}

nav ul {
    list-style-type: none;
    display: flex;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: black;
    font-weight: 500;
}

nav ul li a:hover {
    color: #007A01;
    font-weight: 600;
}

#home h1, button{
    background-color: rgba(242, 242, 242, 65%);
    border-radius: 10px;
    padding: 20px 40px 20px 40px;
}

#home h1 { 
    color: #007A01;
    margin: 15px;
}

#home button {
    /* Estilos existentes do botão */
    background-color: #007A01;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 15px 25px;
    /* Novos estilos para o efeito espelhado */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#home button::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    transform: scaleY(-1);
    opacity: 0.6;
    transition: opacity 0.3s;
}

#home button:hover::after {
    opacity: 0.3;
}

/* Estilo para a seção onde as imagens estão contidas */
.secao-produtos {
    text-align: center; /* Alinha os elementos inline ou inline-block ao centro */
}

/* Estilo para as imagens dentro da seção */
.secao-produtos img {
    vertical-align: middle; /* Alinha verticalmente as imagens ao meio */
    margin: 0 10px; /* Adiciona uma margem horizontal entre as imagens */
}

.frase {
    background-color: #007A01;
    margin-top: 15px;
    padding: 60px;
    color: #FFF;
}

.atendimentoPersonalizado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.atendimentoPersonalizado img {
    box-shadow: rgb(0, 122, 1) 15px -5px 2px 2px;
    border-radius: 15px;
}

/* Estilo para a seção dos setores atendidos */
.setores-atendidos {
    display: flex; /* Define o layout flexível */
    flex-wrap: wrap; /* Permite que os itens se ajustem à próxima linha, se necessário */
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
    gap: 10px; /* Espaço entre os itens */
}

/* Estilo para as imagens dentro da seção */
.setores-atendidos img {
    flex: 1; /* Permite que as imagens cresçam e encolham */
    max-width: calc(33.333% - 20px); /* Define a largura máxima para 3 imagens por linha, considerando o gap */
    height: auto; /* Mantém a proporção da imagem */
}

.motivos {
    background-color: #007A01;
    color: #FFF;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 15px;
    padding: 15px;
}

.motivos li {
    list-style: none;
    padding: 4px;
}

.motivos h2 {
    color: #FFF;
    font-weight: 700;
    margin: 15px;
}

.local {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.local p {
    margin: 0;
    padding: 5;
}

.missao {
    background-color: #007A01;
    margin-top: 15px;
    padding: 15px;
    color: #FFF;
}

.missao h2 {
    color: #FFF;
    font-weight: 700;
    margin: 15px;
}

/* Estilo para a seção dos parceiros */
.parceiros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Cria colunas que se ajustam ao conteúdo */
    gap: 10px; /* Espaço entre as imagens */
    justify-content: center; /* Centraliza as imagens na grade */
    align-items: center; /* Alinha as imagens verticalmente */
}

/* Estilo para as imagens dentro da seção */
.parceiros img {
    width: 100%; /* Faz com que as imagens ocupem todo o espaço da célula da grade */
    height: auto; /* Mantém a proporção da imagem */
}


/* Responsividade */
@media (max-width: 768px) {
    .setores-atendidos img {
        max-width: calc(50% - 20px); /* Ajusta para 2 imagens por linha em telas menores */
    }
}

@media (max-width: 480px) {
    .setores-atendidos img {
        max-width: 100%; /* Ajusta para 1 imagem por linha em telas muito pequenas */
    }
}



/* Carrossel de imagens */
.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.carousel img {
    max-width: 100%;
    scroll-snap-align: start;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Responsividade */
@media (max-width: 768px) {
    .logo img {
        height: 40px;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 5px 0;
    }
}

/* Botão do WhatsApp */
.whatsapp-icon {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 30px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #666;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
    text-decoration: none;
}

/* Efeito de hover para aumentar o botão */
.whatsapp-icon:hover {
    transform: scale(1.1);
}

/* Ajustes de responsividade */
@media (max-width: 768px) {
    .whatsapp-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 20px;
        right: 20px;
    }

    .whatsapp-icon i {
        margin-top: 0;
    }
}

footer {
    background-color: #007A01;
    color: #FFF;
    margin-top: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer img {
    width: 20%;
    padding: 0;
    margin: 0;
}

footer p {
    margin: 0;
    padding: 0;
}

footer button {
    /* Estilos existentes do botão */
    background-color: rgba(red, green, blue, 95%);
    color:black;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 15px 25px;
    margin: 10px;
}

@media (max-width: 650px) {

    img{
        width: auto;
    }
    nav {
        display: flex;
        flex-direction: row;
        font-size: 10px;
    }

    #home h1 {
        display: none; /* Esconde o texto h2 */
    }
    /* O botão permanecerá visível, pois não há regras para escondê-lo */
    .hamburger {
        display: block; /* Mostra o botão de hambúrguer */
    }

    .hamburger.active + #navigation {
        display: flex; /* Exibe a navegação quando o botão está ativo */
    }
    #navigation {
        list-style-type: none;
        margin: 0;
        padding: 0;
        flex-direction: column; /* Itens em coluna */
        width: 100%; /* Largura total */
        display: none; /* Esconde a navegação */
        align-items: flex-start;
        width: 100%;
    }

    #navigation li {
        text-align: center; /* Centraliza o texto dos itens */
        padding: 10px 0; /* Espaçamento vertical */
    }

    #navigation li a {
        text-decoration: none;
        color: #333;
        display: block; /* Faz com que os links preencham o espaço horizontal */
    }

    .whatsapp-icon {
        bottom: 10px; /* Ajuste a posição para não sobrepor outros elementos */
        right: 10px; /* Ajuste a posição para não sobrepor outros elementos */
        width: 50px; /* Tamanho menor para telas pequenas */
        height: 50px; /* Tamanho menor para telas pequenas */
        font-size: 24px; /* Ícone menor para telas pequenas */
        margin: 0 auto;
        height: auto;
    }
}