/* Estilo para a barra de navegação */
body {
    margin: 0;
    background-image: url(img/backhomelimpo.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;  
    font-family: 'Montserrat', sans-serif
}

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

#seja-parceiro h2 {
    font-size: 24px; /* Ajuste o tamanho da fonte conforme necessário */
    font-weight: bold; /* Define a fonte como negrito */
    color: #ffffff; /* Altera a cor do texto para laranja (ou a cor desejada) */
    background-color: #e47125;
    border-radius: 10px;
    text-align: center; /* Centraliza o texto na borda brilhante */
}




h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
}
p {
    font-family: 'Montserrat', sans-serif;
}

@media screen and (max-width: 768px) {
    body {
        background-image: url('img/backgroundcelular.png'); /* Imagem de fundo para dispositivos móveis */
    }
}


html {
    margin: 0;
    
}
.navbar {
    background-color: #e47125; /* O último valor (0.5) define a transparência */

    display: flex;
    justify-content: spcace-between;
    align-items: center;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s, transform 0.3s;
}




/* Estilo para a logo no menu de navegação */
.logo img {
    width: 40px; /* Ajuste o tamanho da logo conforme necessário */
    height: 40px;
    transition: 0.7s;
}

.logo img:hover{
    transform: scale(1.1);
}


/* Estilo para a lista de menu */
.menu {
    list-style: none;
    display: flex;
    align-items: center; /* Alinhar verticalmente ao centro */

}

.menu li {
    margin: 0 10px;
}

.menu a {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    transition: color 0.3s; 
}

.menu a:hover {
    color: #0c0c0c;
}


/* Estilo para ocultar a barra de navegação ao rolar para baixo */
.navbar.hidden {
    transform: translateY(-100%);
}
/*novos menu hamburguer*/
.menu-icon {
    display: none;
    cursor: pointer;
    position: absolute;
    left: 80px; 
    
    
    
}

.bar {
    
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s;
}

/* Adicione estilos específicos para telas menores usando uma media query */
@media screen and (max-width: 768px) {
.menu {
    display: none;
    flex-direction: column;
    text-align: left; /* Alinhe o texto à esquerda */
    background-color: #333;
    position: fixed; /* Mude para posição fixa para cobrir a tela inteira */
    top: 60px;
    left: 0; /* Alinhe à esquerda */
    width: 30%; /* Ocupa 30% da largura da tela */
    padding: 20px;
    margin: 0; /* Remova qualquer margem padrão */
    box-sizing: border-box; /* Garante que o padding está incluído na largura total */
}

.menu li {
    margin-bottom: 20px; /* Adicione um espaçamento entre as opções */
}

    .menu.active {
        display: flex;
    }

    .menu.active .menu-icon .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .menu.active .menu-icon .bar:nth-child(2) {
        opacity: 0;
    }

    .menu.active .menu-icon .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    .menu-icon {
        display: block;
    }
}

/* Estilos para a seção de "home" */
.home-section {
    position: relative; /* Tornar a posição relativa para permitir o posicionamento absoluto das imagens dentro dela */
}

/* Estilo para a imagem de fundo (imagem 1) */
.home-background {
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh; /* Ocupa toda a altura da tela */
}

/* Estilo para a imagem 2 (posicionada à direita) */
.image2 {
    width: 400px;
    position: absolute;
    top: 200px;
    right: 10%;
    z-index: 1; /* Sobreposta à imagem de fundo (imagem 1) */
}

/* Estilo para a imagem 3 (posicionada à esquerda inferior) */
.image3 {
    width: 600px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2; /* Sobreposta à imagem 2 e à imagem de fundo (imagem 1) */
}

.image4 {
    width: 40%;
    position: absolute;
    top: 15%;
    left: 0;
    z-index: 3; /* Sobreposta à imagem 2, imagem 3 e à imagem de fundo (imagem 1) */
}

.image5 {
    width: 40%;
    position: absolute;
    top: 11%;
    right: 6%; /* Valor negativo igual à largura da imagem, ajuste conforme necessário */
    z-index: 3; /* Sobreposta à imagem 2, imagem 3 e à imagem de fundo (imagem 1) */
}

/* Estilos para telas pequenas (dispositivos móveis) */
@media screen and (max-width: 768px) {
    .image2{
        width: 100%;
        top: 50%; /* Ajuste a posição para colocar a imagem 3 acima da imagem 2 */
    } .image3{
        width: 100%;
        top: 30%; /* Ajuste a posição para colocar a imagem 3 acima da imagem 2 */
    } .image4{
        top: 10%;
        width: 100%
    } 

    /* Ocultar a image5 em dispositivos móveis */
    .image5 {
        display: none;
    }
}



/* Estilo para a seção da Home 
.home-section {
    
    background-size: cover;
    background-position: center;
    height: 100vh;
    color: #fff; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); 
}

Estilo para o conteúdo da Home 
.home-content {
    text-align: center;
}

.home-content h1 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.home-content p {
    font-size: 18px;
    margin-bottom: 20px;
}

*/

/* Estilo para o botão "Entre em Contato" */
.btn-contact {
    background-color: #ff6600; /* Laranja */
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn-contact:hover {
    background-color: #e65c00; /* Tom mais escuro do laranja */
}


/* Estilo para o botão de WhatsApp fixo */
.whatsapp-button {
    position: fixed;
    bottom: 0px;
    right: -10px;
    z-index: 1000; /* Para garantir que fique acima de outros elementos */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tooltip {
    background-color: #333; /* Cor de fundo do balão */
    color: #fcfcfc; /* Cor do texto do balão */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    opacity: 0; /* Oculta inicialmente o balão */
    transition: opacity 0.3s;
    text-align: center;
}

.whatsapp-button:hover .tooltip {
    opacity: 1;
}

.whatsapp-button a {
    display: block;
    /* Cor de fundo do botão */
    text-decoration: none;    
    text-align: center;    
    transition: background-color 0.3s, transform 0.3s; 
}

.whatsapp-button a img {
    width: 70px; /* Largura da imagem */
    height: 70px; /* Altura da imagem */
}
.whatsapp-button a:hover {
     /* Cor mais escura ao passar o mouse */
    transform: scale(1.1); 
}


/* Estilo para a seção "Seja um Parceiro" em tela cheia */
.full-screen-section {
    background-image: url('img/backhome\ limpo.jpg'); /* Imagem de fundo atraente */
    background-size: cover; /* A imagem cobrirá toda a tela */
    background-position: center center; /* Centralizar a imagem */
    color: #fff; /* Texto branco para contraste */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Tela cheia */
    padding: 0; /* Sem espaçamento interno */
}

.full-screen-section .content {
    background: rgba(0, 0, 0, 0.5); /* Fundo com transparência para melhor leitura */
    padding: 40px; /* Espaçamento interno */
}

.full-screen-section h2 {
    font-size: 36px; /* Tamanho maior para o título */
    font-weight: bold;
    margin-bottom: 20px;
}

.full-screen-section p {
    font-size: 24px; /* Texto maior */
    margin-bottom: 20px;
}


/* Estilo para a seção "Nossos Serviços" e efeito de hover */
#nossos-servicos {
    text-align: center;
    padding: 40px;
}

#nossos-servicos h2 {
    margin-top: 50px; /* Ajuste o valor conforme necessário */
}

.product-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.product {
    /* Estilo da caixa envolvendo o produto */
    padding: 20px;
    text-align: center;
    width: 250px;
    border: 2px solid #e47125; /* Adiciona uma borda ao redor do elemento */
    border-radius: 5px; /* Arredonda as bordas da caixa */
    background-color: #fff; /* Adiciona um fundo branco à caixa */
    transition: transform 0.3s;
}


.product:hover {
     /* Aumenta a escala ao passar o mouse */
}

.product img {
    max-width: 100%;
}

.product h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
}

.product p {
    font-size: 16px;
    margin: 10px 0;
}

.buy-button {
    display: block;
    background: #e47125; /* Cor de fundo do botão */
    color: #fff; /* Cor do texto do botão */
    padding: 10px 20px;
    border: 4px solid white;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.7s;
    top: 100px;
    
}

.buy-button:hover {
    background: #e49825; /* Cor de fundo mais escura no hover */
    transform: scale(1.05);
}




/* Estilo para o rodapé */
#contato {
    background-color: #333; /* Cor de fundo do rodapé */
    color: #fff; /* Cor do texto */
    padding: 40px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/* Estilo para a seção de informações de contato */
.contact-info {
    width: 30%; /* Largura da seção de informações de contato */
    text-align: left;
    margin-right: 10px;
}

/* Estilo para a seção do mapa */



/* Estilo para a seção do formulário de contato */
.contact-form {
    width: 30%; /* Largura da seção do formulário de contato */
    text-align: left;
}

.contact-form h3, .contact-info h3, .contact-map h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.contact-info p, .contact-form p {
    font-size: 18px;
    margin-bottom: 10px;
}

.contact-info a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.contact-info a:hover {
    color: #ff9900; /* Cor de link no hover */
}



.contact-form form {
    text-align: left;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
iframe{
    border-radius: 10px;
}
.contact-form button {
    background: #25d366; /* Cor de fundo do botão de envio */
    color: #fff; /* Cor do texto do botão */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.contact-form button:hover {
    background: #128c7e; /* Cor de fundo mais escura no hover */
}


@media screen and (max-width: 768px) {
    .contact-info, .contact-form {
        width: 100%; /* Largura de 100% em telas pequenas */
        margin-right: 0; /* Remova a margem direita */
    }
}