@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
  /* Cores Principais do Site Anterior */
  --preto-fundo: #0d0d0d;
  --verde-neon: #00ff41;
  --amarelo-destaque: #ffe600;
  --cinza-texto: #b3b3b3;
  --cinza-fundo-card: #1a1a1a;
  --borda-card: #333333;

  /* Novas Cores Extraídas desta Imagem */
  --verde-barra-topo: #25d366;     /* Verde padrão do WhatsApp na barra superior */
  --verde-fundo--capin: #00bb83b9;
  --verde-musgo-escuro: #0a2618;   /* Fundo verde floresta do banner principal */
  --verde-musgo-claro: #1b4d3e;    /* Detalhes e molduras em verde musgo */
  --branco-puro: #ffffff;          /* Para textos em destaque */


}



body{
    background-color: var(--preto-fundo);
    color: var(--branco-puro);
}

#mensagem-cooker{
    transition: 1s;
    position: fixed;
    top: -150px;
    width: 80%;
    text-align: center;
    height: auto;
    background: #2e9b2a;
    background: linear-gradient(90deg, rgba(46, 155, 42, 1) 0%, rgb(5, 141, 62) 50%, rgb(10, 95, 14) 100%);
    z-index: 1050;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
    border-radius: 15px;
    border: #002412 1px solid;

    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
}

.img-email-msg{ 
    width: 100px;
    animation: flutuar 3s ease-in-out infinite, pulsar 1.5s ease-in-out infinite alternate;
}

#mensagem-cooker p{
    color: var(--branco-puro);
    font-weight: 500;
}

.mostra-mensagem{
    top: 0px !important;
}

.oculta-mensagem{
    top: -150px !important;
}

@keyframes flutuar {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pulsar {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

.slide-mob{
    display: none;
}

#display-login {

    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    background-color: #040e099f;
    margin: 0;
    z-index: 10;

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

    backdrop-filter: blur(3px);

    opacity: 0;
    pointer-events: none;
    transition: .5s;
}

#icon-chat-zap img{
    width: 70px;
    display: block;
    position: fixed;
    z-index: 10;
    bottom: 0px;
    margin-left: 6%;
    margin-bottom: 2%;

    animation: pulse 1s infinite;
    opacity: .5;
}


@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.mostra-tela-login {
    /* transition: .5s; */
    opacity: 1 !important;
    pointer-events: fill !important;
    z-index: 100 !important;
}

#display-login .conteiner-login {
    border-radius: 15px;
    width: 50%;
    height: auto;
    background-color: #0f1110bb;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;

    border: 1px solid aliceblue;

}

#display-login .conteiner-login h3 {
    padding: 25px;
}

#display-login .conteiner-login label {
    display: block;
    text-align: center;
    padding: 15px;
    width: 100%;
}

#display-login .conteiner-login input {
    display: block;
    width: 80%;
    margin: 0 auto;
    height: 50px;
    background-color: transparent;
    border: 1px solid #00bb83;
    border-radius: 20px;
    color: aliceblue;
    padding: 5px 15px;
}

#display-login .conteiner-login form {

    width: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;

}

.conteiner-btn-logon {
    width: 80%;
    margin: 0 auto;

    display: flex;
    justify-content: end;
    padding: 15px;
}

#display-login .conteiner-login button {

    font-size: 12px;
    padding: 15px 50px;
    border-radius: 15px;
    cursor: pointer;
    background-color: #00bb83;
    border: none;
    color: #0B0D0C;

}

#display-login .conteiner-login .cancela-login {
    padding: 15px 50px;
    border-radius: 15px;
    float: right;
    cursor: pointer;
    background-color: transparent;
    border: solid 1px #00bb83;
    color: aliceblue;
    margin-right: 15px;
}

#display-login .conteiner-login small {
    padding: 15px;
}


.barra-topo {
    transition: 1s;
    /* background-color: #00422e; */
    background: #2e9b2a;
    background: linear-gradient(90deg, rgba(46, 155, 42, 1) 0%, rgba(87, 199, 133, 1) 50%, rgb(5, 87, 9) 100%);
    height: 50px;
    width: 100vw;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25%;

}

.barra-topo p {
    display: block;
}

.icones-redes-sociais-topo {
    z-index: 1;
    left: 2%;
}

.acesso-adm {
    cursor: pointer;
    border: 1px solid #ffee0034;
    padding: 8px 15px;
    transition: .5s;
    border-radius: 15px;
    margin-right: 15px;
}

.acesso-adm i {
    color: var(--amarelo-destaque);
}

.acesso-adm:hover {
    transition: .5s;
    border: 1px solid var(--amarelo-destaque);

}


.icones-redes-sociais-topo i {
    padding: 15px;
    transform: .5s;
}

.barra-topo a {
    font-size: 1.1rem;
    transition: .5s;
    opacity: .8;
}

.barra-topo a:hover {
    opacity: 1;
    color: var(--amarelo-destaque);
}

.background-especial-para-o-topo {

    /* background: #043800; */
    background: linear-gradient(40deg, rgba(4, 56, 0, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(55, 235, 0, 1) 100%);
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    transition: .8s;
    border-radius: 25px;
    overflow: hidden;
}

.background-especial-para-o-topo video {
    mix-blend-mode: overlay;
}


.slide-topo {
    transition: 1s;
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

.slide-topo .controles-slide-topo {
    width: 100%;
    padding: 5%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    z-index: 5;
}

.slide-topo .controles-slide-topo i {
    font-size: 2rem;
    cursor: pointer;
}

.slide-topo .img-slide {
    flex-shrink: 0;
    background-color: var(--verde-musgo-claro);
    width: 100%;
    height: auto;

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

    overflow: hidden;
}

.slide-topo .img-slide .banner-01{
    transform: scale();
}

.barra-topo-oculta{
    transition: 1s;
    opacity: 0;
}

.menu-topo-elementos {
    transition: .5s;
    background-color: var(--verde-musgo-escuro);
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: auto;
    padding: 20px;

    display: flex;
    justify-content: end;

    border-radius: 0px 0px 5px 5px;
}


.menu-topo-elementos .menu-links {
    width: 60%;
    margin: 0 auto;
    box-sizing: border-box;

    display: flex;
    justify-content: space-around;
    align-items: center;

}

.menu-topo-elementos .menu-links p {
    font-size: 1rem;
    cursor: pointer;
    transition: .5s;
    font-weight: 300;
}

.menu-topo-elementos .menu-links i {
    color: var(--amarelo-destaque);
}


.menu-topo-elementos .logo-empresa {
    box-sizing: border-box;
    object-fit: contain;
    width: 80px;
}

.menu-topo-elementos-transparente{
    transition: 1s;
    background-color: rgba(0, 0, 0, 0.356);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    backdrop-filter: blur(5px);
    height: 40px;

}


.menu-topo-elementos .menu-links p:hover {
    color: #36b48f;
}

.conteiner-motivos-principais {
    width: 80%;
    min-height: 150px;
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.neon-verde-bg {
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 50px;
    left: -150px;
    transform: scale(1);
    mix-blend-mode: lighten;
}

.conteiner-motivos-principais .box-chamativo {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
    width: 30%;
    height: 300px;
    border-radius: 10px;
    background-color: #0118117f;
    padding: 2%;
    border: 1px solid #00bb83;

}

.conteiner-motivos-principais .box-chamativo i {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.conteiner-motivos-principais .box-chamativo h2 {
    min-height: 60px;
    color: var(--amarelo-destaque);
}

.conteiner-motivos-principais .box-chamativo img {
    display: block;
    width: 100px;
    padding: 15px;
    margin-bottom: 15px;
}


.texto-chamativo-principais {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    padding: 5%;
}

.texto-chamativo-principais span {
    display: block;
    text-transform: uppercase;
    color: var(--amarelo-destaque);
}

.texto-chamativo-principais h2 {
    margin-bottom: 15px;
}

.texto-chamativo-principais p {
    width: 80%;
    margin: 0 auto;
}

.texto-chamativo-principais button {
    margin: 30px;
}

.texto-chamativo-principais button i {
    margin-right: 10px;
}

.texto-intro-o-que-nos-fazemos {
    margin-top: 50px;
    text-align: center;
    padding: 50px;
}

.conteiner-o-que-nos-fazemos {
    position: relative;
    background-image: url('/src/public/img/banner/banner--2c.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 0px;
}

.efeito-preto-degrade-o-que-nos-fazemos {
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, #0B0D0C 30%, transparent);
    position: absolute;
    top: 130px;
    left: 0;
    z-index: 2;
}

.texto-intro-o-que-nos-fazemos p {
    display: inline;
    padding: 10px;
    color:  var(--amarelo-destaque);
    font-size: 1rem;
    margin-top: 150px;
    text-transform: uppercase;

    background-color: var(--verde-musgo-claro);
    border-radius: 15px;
}

.cards-para-o-que-fazemos {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.678);
    padding: 15px;
    border-radius: 10px;
    position: relative;
    min-width: 380px;
    min-height: 300px;
}


.cards-para-o-que-fazemos i {
    color: var(--verde-neon);
    font-size: 2rem;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.texto-intro-o-que-nos-fazemos {
    padding: 100px;
}

.texto-intro-o-que-nos-fazemos h2 {
    font-size: 2rem;
    margin-top: 10px;
    text-transform: uppercase;
}

.container-cards-o-que-fazemos {
    width: 100%;
    min-height: 280px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 70px;

}

.cards-para-o-que-fazemos h2 {
    margin-bottom: 15px;
    color: var(--amarelo-destaque);
}

.container-cards-o-que-fazemos .cards-para-o-que-fazemos {
    width: 20%;
    border: 1px solid rgba(240, 248, 255, 0.233);
    background-color: #00bb8342;
}

.conteiner-institucional {
    box-sizing: border-box;
    width: 100%;
    padding: 50px;

    display: flex;
    justify-content: center;
    gap: 25px;
}

.conteiner-institucional .lado-a {
    width: 40%;
    text-align: right;
    font-weight: 300;
}

.conteiner-institucional .lado-a h2 {
    padding: 30px;
    text-transform: uppercase;
    color: var(--amarelo-destaque);
}

.conteiner-institucional .lado-a h3 {
    padding: 15px 30px;
}

.conteiner-institucional .lado-a p {
    padding: 15px 30px;
}

.conteiner-institucional .lado-b {
    width: 40%;
    min-height: auto;
    border-radius: 10px;
    overflow: hidden;
}

.conteiner-institucional .lado-b img {
    width: 100%;
}

.bg-greem-fecho-luz {
    position: absolute;
    z-index: -1;
    margin-top: -800px;
    mix-blend-mode: lighten;    
    opacity: .6;

}

.container-intro-texto-catalogo {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}

.texto-introdutorio-para-catalogo {
    width: 100%;
    margin: 0 auto;
    font-size: 1.1rem;
    overflow: hidden;
    /* border: #00bb83 1px solid; */
    border-radius: 15px;

    margin-top: 55px;
    margin-bottom: 55px;
}

.banner-catalogue{
    background-color: #06291e;
    width: 100%;
    height: 700px;
}

.banner-catalogue img{
    width: 110%;

    margin-top: -100px;
}



.container-intro-texto-catalogo h2 {
    position: absolute;
    top: 0;
    margin-top: 5%;
    left: 20px;
    width: 50%;
    text-align: left;

    color: rgba(1, 43, 6, 0.726);
    margin-bottom: 12px;
    font-size: 6.5rem;
    text-transform: uppercase;
    line-height: 85px;
    font-family: "Bebas Neue", sans-serif;

}








.scroll-infinito-imagens {
    overflow: hidden;
    width: 50%;
    margin: 0 auto;
    display: flex;

}

.container-imagens-scroll:nth-child(1) {
    animation: scroll linear infinite 12s;
    display: flex;
    justify-content: center;
    transition: .5s;
    gap: 15px;
}


.caixa-imagens {

    width: 160px;
    height: 160px;
    background: #043800;
    background: linear-gradient(90deg, rgba(4, 56, 0, 1) 0%, rgb(20, 100, 53) 50%, rgb(25, 99, 3) 100%);
    border-radius: 10px;


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

    padding: 2%;

    text-align: center;
}

@keyframes scroll {

    from {
        margin-left: 0%;
    }

    to {
        margin-left: -155%;
    }

}


.banner-intro-inspire-se{
    width: 100%;
    height: auto;
    background-color: var(--verde-musgo-escuro);
    position: relative;
    overflow: hidden;
}

.banner-intro-inspire-se h2{
    position: absolute;
    padding: 6%;
    color: var(--verde-musgo-claro);
    font-size: 5rem;
    width: 50%;
    line-height: 65px;
}

.vitrine-de-produtos {
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    padding: 35px;
    border-radius: 15px 15px 0px 0px;

    
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat();
    gap: 25px;
}


.item-produtos-serv{
    position: relative;
    width: 100%;
    height: 600px;
    padding: 10px;
    background-color: var(--verde-musgo-claro);
    border-radius: 15px;
}

.div-img-serv{
    width: 100%;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

}

.div-img-serv img{
    width: 400px;
    height: 400px;
    filter: sepia(100%) hue-rotate(60deg) saturate(200%);
    transition: .5s;
    cursor: pointer;

}

.div-img-serv small{
    font-size: 12px;
}

.div-img-serv img:hover{
    transition: .5s;
    transform: scale(1.1);
    filter: sepia(0%) hue-rotate(0deg) saturate(0%);
}

.item-produtos-serv h3{
    color: var(--verde-neon);
    padding: 15px 0px;
    font-size: 1rem;
}

.item-produtos-serv  span{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 20px;
    
}

.item-produtos-serv  .infor{
    background-color: #00ff41;
    padding: 10px;
    border-radius: 15px;
    margin-top: 10px;
    text-align: center;
    color: #002412;
    display: none;
}



.card-produtos {
    box-sizing: border-box;
    width: 300px;
    max-height: 400px;

    background-color: #151816;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: 25px;

    border: .5px solid #00bb833b;
}

.card-produtos .tag-lancamento {
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 15px;
}

.card-produtos .tag-lancamento p {
    font-size: .5rem;
}

.card-produtos .tag-lancamento i {
    padding: 10px;
    margin-right: 10px;
    font-size: .5rem;
    color: var(--amarelo-destaque);
}

.card-produtos .card-imagem-produto {
    width: 100%;
    height: 40%;
    overflow: hidden;
    border-radius: 10px;
}

.card-produtos .card-imagem-produto:hover {
    transition: .5s;

}

.card-produtos .card-imagem-produto img {
    transform: scale(1.1);

}

.card-produtos p {
    text-transform: uppercase;
    margin: 7px 0px;
    font-weight: 600;
    font-size: .8rem;
    color: var(--verde-neon);
}

.card-produtos small {
    display: block;
    height: 150px;
}

.card-produtos button {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 10px;
    margin-top: 10px;
    transition: .5s all;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    background-color: var(--amarelo-destaque);
}

.card-produtos button::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 100%;
    background-color: var(--amarelo-destaque);
    right: 0;
    z-index: 0;
    border-radius: 15px 0px 0px 15px;
}



.card-produtos i {
    display: inline-block;
    position: relative;
    z-index: 1;
}





.botao-bio-ler-mais {
    color: black;
    width: 40%;
    height: 40px;
    border: none;
    background-color: var(--amarelo-destaque);
    font-weight: bold;
    border-radius: 15px;
    margin-right: 10px;
    margin-top: 20px;

}

.por-ambiente {
    padding: 5%;
    box-sizing: border-box;
    display: grid;
    min-height: 100vh;
    width: 100vw;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.por-ambiente .ambiente {
    background-color: #002412;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    position: relative;

    display: grid;
    place-items: center;
}

.por-ambiente .ambiente img {
    transform: scale(1.5);
    opacity: .5;
}

.texto-intro-filtro-ambiente {
    transition: .5s;
    position: absolute;
    width: 80%;
    height: 80%;
    z-index: 5;
    transform: scale(.7);

}

.texto-intro-filtro-ambiente h2 {
    text-transform: uppercase;
    color: var(--amarelo-destaque);

}

.texto-intro-filtro-ambiente small {
    display: block;
    color: #c6f8e9;
    font-weight: 500;
    font-size: 1rem;
    padding: 15px 0px;
}

.ambiente:hover .texto-intro-filtro-ambiente {
    transition: .5s;
    transform: scale(1);
    transition-delay: .1s;
}

.ambiente:hover img {
    transition: .5s;
    transform: scale(2.1);
    opacity: .8;
}

.ambiente:hover h2 {
    transform: scale(1.1);
    transition: .5s;
    transition-delay: .2s;

}

.btn-filtro-ambiente {
    background-color: var(--amarelo-destaque);
    display: block;
    color: rgb(36, 37, 37);
    width: 50%;
    padding: 10px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}


.quem-somos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 50px;
}

.quem-somos .texto-intro-bio {
    text-align: right;
}

.quem-somos .texto-intro-bio h2 {
    margin-bottom: 15px;
    color: var(--amarelo-destaque);
    font-size: 2rem;
}

.quem-somos .texto-intro-bio p {
    font-size: 1rem;
}

.quem-somos div {
    width: 40%;
}

.espassamento-para-banner {
    width: 100%;
    min-height: 500px;
    background-color: #043800;
    background-image: url('/img/banner/Gemini_Generated_Image_vkzigyvkzigyvkzi.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;

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

.espassamento-para-banner::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #002412;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
    opacity: .8;
}

.espassamento-para-banner div {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 50px;
}

.espassamento-para-banner div h2 {
    margin-bottom: 15px;
    text-transform: uppercase;
    color: var(--amarelo-destaque);
}

.espassamento-para-banner div p {
    font-size: 1rem;
    padding: 15px;
}

.espassamento-para-banner div button {
    color: black;
    width: 40%;
    height: 40px;
    border: none;
    background-color: var(--amarelo-destaque);
    font-weight: bold;
    border-radius: 15px;
    margin-right: 10px;
    margin-top: 20px;
    cursor: pointer;
}

.foto-empresarios {
    width: 300px;
    height: 450px;
    background-color: var(--verde-barra-topo);
    border-radius: 15px;
    overflow: hidden;
}

.foto-empresarios img {
    width: 100%;
}

footer {
    width: 100%;
    min-height: 400px;
    font-size: .8rem;
    position: relative;
    overflow: hidden;
}

.efeito-luz-footer {
    position: absolute;
    bottom: -150px;
    right: -50px;
    mix-blend-mode: lighten;
    width: 50%;
    z-index: 1;
}



footer .endereco-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 0px;
}

footer .endereco-footer .texto-endereco {
        
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .endereco-footer .texto-endereco p{
    width: 100% !important;
}

footer .endereco-footer .google-maps {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    overflow: hidden;
}

footer .endereco-footer .google-maps img {
    opacity: .8;
    width: 150px;
}

footer .conteudo-footer {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    margin-top: 50px;
    padding: 50px;
}

footer .conteudo-footer img {
    width: 150px;
}


footer .conteudo-footer p {
    font-size: 1rem;
    width: 40%;
    padding: 15px;
}


footer i {
    color: var(--amarelo-destaque);
    margin-right: 10px;
}

footer a:hover {
    opacity: .5;
    transition: .5s;
}












/* { SET BG IMAGEM GREEM } */

.bg-raio-greem {
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 0;
    transform: scale(1.6);
    margin-left: 20%;
}

.preto-degrade {
    width: 100%;
    height: 400px;
    background: linear-gradient(to top, #0B0D0C 5%, transparent);
    position: absolute;
    top: 0;
    left: 0;
}

.conteiner-banner-o-que-fazemos {
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 800px;
    background-image: url('/img/banner/banner-2.png');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .3;
    border-radius: 20px 20px 0px 0px;

}

.conteiner-banner-o-que-fazemos .efeito-preto-degrade-o-que-nos-fazemos {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00bb83;
    background: linear-gradient(to bottom, transparent 5%, #0B0D0C 70%);
    z-index: 1;
    bottom: 0;
}

.ajuste-posicao-texto {
    position: relative;
    z-index: 2;
}