@charset "utf-8";
/* CSS Document */

/*--- INICIO DESKTOP-----*/
@media screen and (min-width:1024px){
/* Estilos gerais para telas maiores (desktops) */
body, html {
    margin: 0;
    padding: 0;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    box-sizing: border-box;
    display: flex; /* Flexbox para alinhar o conteúdo verticalmente */
    flex-direction: column; /* Direção da coluna para o layout vertical */
    min-height: 1024px; /* Mínima altura da viewport */
    background-color: #0d0232;
    background-size: cover;
	overflow-x: hidden;
}

		
/* Define a altura da logo */
.logo {
    display: flex; /* Usa Flexbox para o contêiner */
    align-items: center; /* Centraliza o logo verticalmente */
    height: 100px; /* Define a altura do contêiner conforme necessário */
}

.logo img {
    height: 50px; /* Define a altura da imagem da logo */
    padding-left: 20px; /* Espaçamento interno à esquerda */
    margin-top: 0px; /* Remove a margem superior */
}



/* Estilo para o container das redes sociais */
.container {
    position: fixed; /* Fixa o contêiner na tela */
    top: 230px; /* Alinha ao topo */
    left: 0; /* Alinha à esquerda */
    padding: 25px; /* Espaçamento interno */
    border-radius: 30px; /* Cantos arredondados */
    z-index: 1000; /* Garante que o contêiner fique sobre outros elementos */
    display: flex; /* Utiliza o flexbox para alinhar os itens */
    flex-direction: column; /* Alinha os itens na vertical */
    gap: 5px; /* Espaçamento entre os itens */
	flex-shrink: 0;
}

/* Estilo para os links de redes sociais dentro do container */
.container a {
    margin: 5px 0; /* Espaçamento vertical entre os links */
    color: inherit; /* Mantém a cor original dos links */
    text-decoration: none; /* Remove o sublinhado dos links */
    font-size: 28px; /* Ajusta o tamanho da fonte dos links */
}

/* Estilo para os itens individuais no contêiner */
.container-item {
    width: 40px; /* Largura inicial do item */
    height: 40px; /* Altura inicial do item */
    background-color: white; /* Cor de fundo dos itens */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra dos itens */
    border-radius: 60px; /* Arredonda os cantos para um formato circular */
    display: flex; /* Flexbox para centralizar o conteúdo */
    align-items: center; /* Alinha o conteúdo verticalmente */
    justify-content: center; /* Alinha o conteúdo horizontalmente */
    position: relative; /* Posicionamento relativo para elementos filhos */
    transition: 0.3s; /* Transição suave para o efeito hover */
}

/* Efeito hover para ampliar o item */
.container-item:hover {
    width: 130px; /* Aumenta a largura do item ao passar o mouse */
}

/* Estilo para o texto dentro do item */
.container-item span {
    position: absolute; /* Posiciona o texto sobre o item */
}

/* Estilo para o ícone dentro do item */
.container-item .icon {
    color: #0d0232; /* Cor do ícone */
    font-size: 25px; /* Tamanho do ícone */
    transition: 0.2s; /* Transição suave para o efeito hover */
}

/* Estilo para o texto visível dentro do item */
.container-item .text {
    color: white; /* Cor do texto */
    font-size: 20px; /* Tamanho do texto */
    transform: scale(0); /* Inicialmente invisível */
    transition: transform 0.1s, opacity 0.1s; /* Transições suaves para a transformação e opacidade */
    transition-delay: 0.1s; /* Atraso na transição para o efeito hover */
}

/* Efeito hover para mostrar o texto */
.container-item:hover .text {
    transform: scale(1); /* Torna o texto visível */
}

/* Efeito hover para esconder o ícone */
.container-item:hover .icon {
    transform: scale(0); /* Torna o ícone invisível */
}

/* Estilo para o fundo do item */
.container-item::before {
    content: ''; /* Conteúdo vazio para o pseudo-elemento */
    position: absolute; /* Posiciona o fundo sobre o item */
    background-image: linear-gradient(45deg, var(--cor1), var(--cor2)); /* Gradiente de fundo */
    inset: 0; /* Preenche todo o item */
    opacity: 0; /* Inicialmente invisível */
    border-radius: 60px; /* Arredonda os cantos para um formato circular */
    transition: opacity 0.3s; /* Transição suave para o efeito hover */
}

/* Efeito hover para mostrar o fundo gradiente */
.container-item:hover::before {
    opacity: 1; /* Torna o fundo visível */
}


/* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer */
/* Ícone do menu */
.menu-icon {
    font-size: 40px; /* Tamanho do ícone do menu */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    position: fixed; /* Fixa o ícone do menu na tela */
    top: 20px; /* Posiciona o ícone 20px do topo */
    right: 20px; /* Posiciona o ícone 20px da direita */
    z-index: 1001; /* Garante que o ícone fique sobre outros elementos */
    color: white; /* Cor do ícone */
}

/* Cor do ícone ao passar o mouse */
.menu-icon:hover {
    color: #e04178; /* Cor do ícone quando o mouse está sobre ele */
}

/* Menu */
#menu {
    display: none; /* Inicialmente oculto */
    position: fixed; /* Fica fixo na tela */
    top: 0; /* Posiciona no topo da tela */
    left: 0; /* Posiciona à esquerda da tela */
    width: 100%; /* Largura total da tela */
    height: 100%; /* Altura total da tela */
    background: rgba(0, 0, 51, 0.9); /* Azul bem escuro com 90% de opacidade */
    color: white; /* Cor do texto */
    flex-direction: column; /* Alinha os itens verticalmente */
    align-items: center; /* Alinha os itens horizontalmente no centro */
    justify-content: center; /* Alinha os itens verticalmente no centro */
    text-align: center; /* Alinha o texto no centro */
    z-index: 1000; /* Garante que o menu fique sobre outros elementos */
}

/* Links do menu */
#menu a {
    color: white; /* Cor dos links */
    text-decoration: none; /* Remove o sublinhado dos links */
    font-size: 30px; /* Tamanho da fonte */
    margin: 10px; /* Espaçamento entre os links */
    font-weight: bold; /* Negrito nos links */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
}

/* Cor dos links ao passar o mouse */
#menu a:hover {
    color: #e04178; /* Cor dos links ao passar o mouse */
}

/* Botão de fechar */
#close-btn {
    position: fixed; /* Posiciona o botão em relação à janela de visualização */
    top: 70%; /* Distância do topo (ajustar conforme necessário) */
    left: 50%; /* Alinha horizontalmente no meio da tela */
    transform: translateX(-50%); /* Ajusta o botão para centralizá-lo corretamente */
    font-size: 50px; /* Tamanho da fonte do botão de fechar */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    z-index: 1001; /* Garante que o botão fique sobre outros elementos */
}

/* Cor do botão de fechar ao passar o mouse */
#close-btn:hover {
    color: #e04178; /* Cor do botão de fechar ao passar o mouse */
}

/* Estilo para a seção do banner */
.banner {
    position: relative;
    width: 100%;
    height: 100vh; /* Ajuste conforme necessário */
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse o contêiner */
}

/* Estilo para o vídeo de fundo */
#banner-video {
    position: absolute;
    top: 0;
    left: 50%; /* Centraliza o vídeo horizontalmente */
    transform: translateX(-50%); /* Ajusta a posição para centralização */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que o vídeo cubra toda a área do contêiner */
    z-index: 0; /* Garante que o vídeo fique atrás do conteúdo */
    opacity: 0.3; /* Transparência do vídeo */
}

/* Estilo para o conteúdo do banner */
.banner-content {
   position: absolute;
    top: 30%;
    right: 0;
    left: 0;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.0);
    padding: 20px;
    border-radius: 10px;
    z-index: 2;
}

/* Estilo para o título no banner */
.banner-content h1 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
    font-size: 3rem; /* Tamanho da fonte do título */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

/* Estilo para o parágrafo no banner */
.banner-content p {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
    font-size: 1.5rem; /* Tamanho da fonte do parágrafo */
    margin-bottom: 30px; /* Espaçamento abaixo do parágrafo */
}

/* Estilo para o botão */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e04178; /* Cor de fundo do botão */
    color: #fff; /* Cor do texto do botão */
    text-decoration: none; /* Remove o sublinhado do botão */
    border-radius: 30px; /* Bordas arredondadas do botão */
    font-weight: bold; /* Texto em negrito */
    z-index: 1; /* Garante que o botão fique na frente do vídeo */
}

/* Cor do botão ao passar o mouse */
.btn:hover {
    background-color: #fff; /* Cor de fundo ao passar o mouse */
    color: #e04178; /* Cor do texto ao passar o mouse */
}

	
	
	
/*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*/
/* Texto animado */
.txt-animado {
    font-size: 45px; /* Tamanho da fonte */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
    font-weight: bold; /* Negrito */
    color: white; /* Cor do texto */
    margin-left: 30%; /* Margem à esquerda */
    margin-top: 100px; /* Margem superior */
}

.txt-animado span {
    position: relative; /* Posicionamento relativo para o pseudo-elemento */
}

.txt-animado span::before {
    content: ""; /* Conteúdo vazio para animação */
    color: darkturquoise; /* Cor do texto animado */
    animation: palavras 20s infinite; /* Animação de palavras */
}

.txt-animado span::after {
    content: ""; /* Conteúdo vazio para animação */
    position: absolute; /* Posicionamento absoluto em relação ao pai */
    height: 100%; /* Altura igual ao elemento pai */
    border-left: 2px solid #e04178; /* Borda à esquerda */
    right: -10px; /* Distância da borda direita */
    animation: cursor .9s infinite, digita 20s steps(10) infinite; /* Animações combinadas */
    width: calc(100% + 12px); /* Largura com ajuste */
    background-color: #0d0232; /* Cor de fundo */
}

@keyframes digita {
    10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95% {
        width: 0; /* Largura reduzida */
    }
    5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85% {
        width: calc(100% + 12px); /* Largura ajustada */
    }
}

@keyframes cursor {
    0% {
        border-left: 2px solid #18003F; /* Cor do cursor */
    }
}

@keyframes palavras {
    0%, 20% {
        content: "que move,"; /* Texto inicial */
    }
    21%, 40% {
        content: "que conecta,"; /* Texto intermediário */
    }
    41%, 60% {
        content: "que inspira,"; /* Texto intermediário */
    }
    61%, 80% {
        content: "que impacta,"; /* Texto intermediário */
    }
    81%, 100% {
        content: "e que transforma."; /* Texto final */
    }
}


	

/* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel */

/* Estilo do Carrossel de Destaques */
.destaques {
    width: 40%; /* Reduz a largura do carrossel para 50% */
    margin: 0 auto; /* Centraliza o carrossel horizontalmente */
    margin-top: 100px;
    margin-bottom: 150px;
}

/* Estilo das imagens no carrossel */
.destaque img {
    width: 100%; /* Faz com que a imagem preencha a largura do carrossel */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 30px; /* Adiciona bordas arredondadas às imagens */
}

/* Ajuste dos slides do Slick */
.slick-slide {
    display: flex; /* Garante que o slide use flexbox para alinhamento */
    justify-content: center; /* Centraliza a imagem horizontalmente */
}
	
	.slick-dots li button:before{
		display: none;
	}

/* Transição suave para o carrossel */
.slick-slide img {
    transition: transform 0.1s ease-in-out; /* Transição mais rápida (100ms) */
}

	
.destaques-btn {
    text-align: center; /* Centraliza o botão */
    margin-top: 20px; /* Espaçamento acima do botão */
}

.destaques-btn .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e04178; /* Cor do botão */
    color: #fff; /* Cor do texto */
    text-decoration: none; /* Remove o sublinhado do link */
    border-radius: 30px; /* Bordas arredondadas */
    font-size: 1rem;
}

.destaques-btn .btn:hover {
    background-color: #d81b60; /* Cor do botão ao passar o mouse */
}	
	
	
	
	
/* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar */
/* Estilo para a Topbar */
.topbar {
    width: 100%;
    padding: 10px 0; /* Padding para o topo e a base */
    padding-left: 30px;
    margin-top: 60px;
}

.topbar h1 {
    color: #ffffff; /* Cor do texto */
    margin: 0; /* Remove a margem do título */
    font-family: 'Poppins', sans-serif; /* Fonte Poppins */
    font-weight: 600; /* Peso da fonte, similar ao utilizado anteriormente */
	color: #e04178; /* Cor branca para o título */  
}

/* Estilo para a Galeria */
.galeria1 {
    display: flex;
    justify-content: center; /* Centraliza o contêiner da galeria horizontalmente */
    padding: 20px; /* Espaçamento interno ao redor da galeria */
    width: 100%; /* Garante que a galeria use toda a largura disponível */
    box-sizing: border-box; /* Inclui padding e border na largura total */
    margin: 0 auto; /* Centraliza o contêiner horizontalmente */
}

/* Contêiner das imagens */
.galeria-imagens {
    display: grid; /* Usando grid para um layout mais controlado */
    grid-template-columns: repeat(4, 1fr); /* Define 4 colunas de largura igual */
    gap: 20px; /* Espaçamento entre as imagens */
    max-width: 1200px; /* Limita a largura máxima do contêiner da galeria */
    width: 100%; /* Garante que o contêiner da galeria use toda a largura disponível até o máximo */
    margin: 0 auto; /* Centraliza o contêiner horizontalmente */
    box-sizing: border-box; /* Inclui padding e border na largura total */
}

/* Estilo das imagens */
.example-image {
    width: 100%; /* As imagens ocupam 100% da largura do item grid */
    height: auto; /* Mantém a proporção das imagens */
    border-radius: 30px; /* Adiciona bordas arredondadas às imagens */
    transition: transform 0.9s ease, box-shadow 0.3s ease; /* Adiciona uma transição suave para o hover */
    display: block; /* Garante que a imagem ocupe toda a largura disponível do item grid */
}

/* Efeito de hover nas imagens */
.example-image:hover {
    transform: scale(1.05); /* Aumenta a imagem ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra mais pronunciada ao passar o mouse */
}

/* Estilo do botão voltar */
.btn.voltar {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block; /* Faz com que o botão se ajuste ao tamanho do texto */
}

.btn.voltar:hover {
    background-color: #555;
}

	
.center-text1 {
    font-size: 1rem;
    opacity: 0.2;
    text-align: center;
    width: 100%;
    color: white;
}	
	
/* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre */
	
#sobre {
    background-color: #090126; /* Cor de fundo suave */
	width: 100%;
	height: auto;
    padding: 20px;
	
}

.sobre .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

 .imagem-wrapper {
    display: flex;
    align-items: flex-start; /* Alinha a imagem no início do eixo transversal */
    flex: 1; /* Permite que a imagem-wrapper ocupe o espaço disponível */

}

	
.imagem-wrapper h1 {
    width: 30%; /* A largura será 35% do contêiner pai */
    padding-left: 40%; /* Usa porcentagem para manter a margem proporcional */
    font-size: 3rem; /* Tamanho da fonte ajustado de acordo com a largura da viewport */
	font-weight: 800;
    color: #e04178; /* Cor branca para o título */    

}

 .texto-wrapper {
        width: 40%;
        font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
        letter-spacing: 0.9px; /* Ajuste conforme necessário */
        font-weight: 200; /* Ajuste o peso da fonte */
        font-size: 1rem;
        padding: 50px 150px;
        margin-left: auto;
        margin-right: auto;
        color: aliceblue;
        margin-top: 30px;
        line-height: 1.6; /* Aumenta o espaçamento entre linhas */
        word-break: break-word; /* Quebra palavras longas */
    }

 .texto-wrapper h2 {
        font-size: 2rem;
        margin-bottom: 60px;
	 
    }

/* Estilo do botão saiba mais */
.botao-saiba-mais {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    margin-top: 10px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transições suaves para as cores */
	margin-bottom: 80px;
}

.botao-saiba-mais:hover {
    background-color: #fff;
    color: #e04178;
}

.seta-icon {
    margin-left: 10px;
    height: 23px;
    font-weight: bold;
    transition: filter 0.6s ease; /* Transição suave para o filtro */
}

.botao-saiba-mais:hover .seta-icon {
    filter: invert(32%) sepia(100%) hue-rotate(327deg) saturate(1000%); /* Ajusta a cor ao passar o mouse */
}
	
/* Estilo para a seção Mais Detalhes */
.mais-detalhes {
    background-color: #0d0232;
}

.detalhes-wrapper {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.texto-e-imagem {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.texto-detalhes {
    margin-left: 10%;
    margin-top: 40px;
    margin-right: auto;
    flex: 1;
    padding-right: 20px;
    color: #fff;
}

.texto-detalhes h2 {
    font-size: 2rem;
    margin-bottom: 60px;
}

.texto-detalhes p {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    margin-bottom: 30px;
    letter-spacing: 0.9px;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.6;
}




.media-principal{
	flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-left: 10%;
	
}
.media-secundario {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-left: 10%;
}

.media-principal video{
	width: 60%;
    height: auto;
    border-radius: 30px;
    margin-top: 180px;
}
.media-secundario video {
    width: 60%;
    height: auto;
    border-radius: 30px;
    margin-top: 180px;
}

/* Exibe o vídeo principal por padrão */
.media-principal {
    display: block; /* Exibe o vídeo principal por padrão */
}

/* Oculta o vídeo secundário por padrão */
.media-secundario {
    display: none; /* Oculta o vídeo secundário por padrão */
}






/* Galeria de imagens */
/* Estilo geral da galeria no desktop */
.galeria {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    background-color: #ffffff; /* Fundo branco para a galeria */
    padding: 20px 0; /* Adiciona espaçamento em cima e embaixo da galeria */
    margin: 0; /* Remove margens laterais */
    width: 100%; /* Garante que a galeria ocupe 100% da largura */
    box-sizing: border-box; /* Inclui padding na largura total */
    margin-top: 80px;
}

.imagem-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%; /* Largura dos itens no desktop */
    box-sizing: border-box; /* Inclui padding na largura total */
}

.imagem-item img {
    width: 20%; /* Ajusta a imagem para ocupar 100% da largura do item */
    height: auto;
    border-radius: 8px;
    margin-top: 20px;
}

.descricao-imagem {
    margin-top: 10px;
    color: #120032;
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;  /* Espaçamento entre linhas */
    margin-bottom: 15px;  /* Espaço entre parágrafos */
    max-width: 350px;  /* Largura máxima para quebrar linhas */
    word-break: break-word;  /* Quebra palavras longas se necessário */
}

.voltar-wrapper {
    text-align: center;
    margin-top: 10px;
}

.botao-voltar {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.botao-voltar:hover {
    background-color: #fff;
    color: #e04178;
}

.botao-voltar .icone-voltar {
    margin-right: 10px;
    height: 23px;
    transition: filter 0.3s ease;
}

.botao-voltar:hover .icone-voltar {
    filter: invert(32%) sepia(100%) hue-rotate(327deg) saturate(1000%); /* Ajusta a cor ao passar o mouse */
}

	
	
	
	
/* Estilo para a seção Serviços */
.servicos {
    background-color: #0d0232;
    padding: 20px;
	width: 100%;
    height: auto;
	
}

.servicos-wrapper {
    width: 100%; /* Limita a largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
}

.texto-e-imagem {
    display: flex;
    justify-content: space-between; /* Alinha o texto e a imagem ao longo do eixo horizontal */
    align-items: flex-start; /* Alinha os itens ao topo */
}

.texto-servicos {
    width: 40%;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px; /* Ajuste conforme necessário */
    font-weight: 400; /* Ajuste o peso da fonte */
    font-size: 1rem;
    padding: 50px 150px;
    margin-left: auto;
    margin-right: 40%;
    margin-top: 60px;
    color: white;
    line-height: 1.6; /* Aumenta o espaçamento entre linhas */
    word-break: break-word; /* Quebra palavras longas */
}

.texto-servicos h2 {
    font-size: 2rem;
	margin-bottom: 70px;
	margin-top: 0;
    
}

.texto-servicos p {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 1rem;
    font-weight: 200;
    line-height: 26px;
    margin-bottom: 15px;
}

.imagem-servicos {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Alinha a imagem ao lado direito */
    align-items: flex-start; /* Alinha a imagem ao topo do contêiner */
    position: relative; /* Cria um contexto de posicionamento para o h1 */
}

.imagem-servicos h1 {
    position: absolute;
    width: 30%; /* A largura será 30% do contêiner pai */
    font-size: 3rem; /* Tamanho da fonte ajustado de acordo com a largura da viewport */
    font-weight: 800;
    color: #e04178; /* Cor do título */
    top: 300px; /* Ajuste o valor para posicionar mais acima ou abaixo conforme necessário */
    right: 0; /* Alinha o h1 à direita do contêiner pai */
    margin: 0; /* Remove qualquer margem que possa afetar a posição */
}

.botao-confira {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transições suaves para as cores */
}

.botao-confira:hover {
    background-color: #fff;
    color: #e04178;
}

.seta-icon {
    margin-left: 10px;
    height: 23px;
    font-weight: bold;
    transition: filter 0.6s ease; /* Transição suave para o filtro */
}

.botao-confira:hover .seta-icon {
    filter: invert(32%) sepia(100%) hue-rotate(327deg) saturate(1000%); /* Ajusta a cor ao passar o mouse */
}


/* Estilos para a seção Confira */
/* Estilos para a seção Confira */
.confira {
    background-color: #f0f0f0;
    padding: 20px;

}

.wrapper-confira {
    width: 30%;
    margin:0;
}

.wrapper-confira h2 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.6;
    color: #18003f;
    
    margin-top: 70px;
}

.wrapper-confira span {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 1rem;
    line-height: 1.6;
    color: #0d0232;
   
    display: block;
    margin-bottom: 20px;
}

/* Estilos para os projetos */
.projetos {
    display: flex;
    justify-content: space-between; /* Garante espaçamento entre vídeo e texto */
    align-items: flex-start;
    margin-top: 40px;
    padding: 0 10%; /* Adiciona 10% de padding nas laterais */
}

.projeto {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Estilos para o vídeo */
.video-projeto {
    width: 60%;
    border-radius: 20px;
	margin-top: 30pX;
	margin-left: 15%;
}

/* Estilos para a descrição do projeto */
.descricao-projeto {
    width: 100%;
    text-align: left;
    color: white;
}

.descricao-projeto h3 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 1.2rem;
    line-height: 26px;
    font-weight: bold;
    margin-bottom: 10px;
}

.descricao-projeto p {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.6;
}



/* Ajusta a posição do formulário e adiciona margem direita para espaço */
.orcamento-form {
    width: 40%; /* Define a largura do formulário */
    margin: 70px auto 0; /* Centraliza horizontalmente e adiciona margem superior */
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    padding: 20px;
    background-color: #090126; /* Cor de fundo suave */    
    border-radius: 30px;
    margin-top: 100px;
}

/* Ajusta a posição das informações de contato */
.orcamento-info {
    width: 30%;
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os itens à esquerda */
    margin-top: 70px; /* Espaçamento superior ajustado para estar próximo ao formulário */
}

/* Estilos de cada item de contato */
.orcamento-info .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Estilos dos ícones */
.contact-icon {
    width: 24px; /* Ajuste o tamanho do ícone conforme necessário */
    height: 24px;
    margin-right: 10px; /* Espaçamento entre ícone e texto */
}

/* Estilos dos links */
.contact-link {
    color: white;
    text-decoration: none;
}

.contact-link:hover {
    color: #e04178; /* Cor rosa ao passar o mouse */
}

/* Estilos do formulário */
.orcamento-form h2 {
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.orcamento-form label {
    display: block;
    margin-bottom: 5px;
}

.orcamento-form input,
.orcamento-form textarea {
    width: calc(100% - 20px); /* Ajuste a largura dos campos de entrada */
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #444; /* Adicione uma borda clara para destacar o campo */
    border-radius: 30px;
    background-color: #4E4863; /* Cor de fundo escura */
    color: white; /* Cor do texto */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8rem; /* Ajuste o tamanho da fonte conforme necessário */
    opacity: 1; /* Defina a opacidade para 1 (totalmente opaco) */
}

.orcamento-form textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
    height: 100px; /* Altura inicial do campo de texto, ajuste conforme necessário */
	 border-radius: 10px;
}

.orcamento-form input::placeholder,
.orcamento-form textarea::placeholder {
    color: #bbb; /* Cor do texto do placeholder para contraste */
}

.orcamento-form input:focus,
.orcamento-form textarea:focus {
    border-color: #e04178; /* Cor da borda ao focar no campo */
    outline: none; /* Remove o contorno padrão */
}

.orcamento-form button {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    background-color: #e04178; /* Cor de fundo padrão */
    color: white; /* Cor do texto padrão */
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s; /* Adiciona uma transição suave */
}

.orcamento-form button:hover {
    background-color: white; /* Cor de fundo ao passar o mouse */
    color: #e04178; /* Cor do texto ao passar o mouse */  
}


/* Estilos para a seção de Redes Sociais */
.redes-sociais {
    text-align: center;
    padding: 20px;
}

.redes-sociais h2 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    color: white;
    font-size: 1.2rem;
    font-weight: 100;
    letter-spacing: 0.9px;
}

.social-icon {
    display: inline-block;
    margin: 0 10px;
    font-size: 1.7rem; /* Diminuído de 2rem para 1.5rem */
    color: white;
    text-decoration: none;
}

.social-icon:hover {
    color: #e04178; /* Cor de hover se desejado */
}

/* Botão Voltar */
.botao-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    margin: 100px auto;
}

.botao-voltar:hover {
    background-color: #fff;
    color: #e04178;
}

.icone-voltar {
    margin-right: 10px;
}

/* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos */
/* Estiliza o título da seção de artigos */
/* Seção de Artigos */
.artigos {
    background-color: #090126;
    padding: 50px; /* Adiciona um pouco de espaçamento interno */
}

.conteudo-artigos {
    display: flex; /* Organiza o título e a lista de artigos horizontalmente */
    gap: 2rem; /* Adiciona espaço entre o título e a lista de artigos */
}

.imagem-artigos h1 {
    font-size: 3em; /* Reduz o tamanho da fonte para melhor ajuste */
    color: #e04178;
    margin: 0; /* Remove margens para alinhamento correto */
	margin-top: 300px;
	margin-left: 120%;
}

.artigos-lista {
    display: flex;
    flex-direction: column; /* Organiza os artigos verticalmente */
    gap: 1rem; /* Adiciona espaço entre os artigos */
    flex-grow: 1; /* Faz com que a lista de artigos ocupe o espaço restante */
}

.artigo {
    display: flex; /* Permite o layout flexível dentro do artigo */
    flex-direction: row; /* Organiza a imagem e o conteúdo horizontalmente */
    background-color: #4E4863;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 1rem; /* Ajusta o padding para melhor espaçamento */
    
    max-width: 600px; /* Define uma largura máxima para cada artigo */
    box-sizing: border-box;
    transition: transform 0.3s, box-shadow 0.3s;
	        margin-left: 45%;
}

.artigo img {
    width: 40%; /* Define a largura da imagem como 40% do artigo */
    height: auto; /* Mantém a altura automática para preservar a proporção */
    border-radius: 20px; /* Aplica o border-radius */
    object-fit: cover; /* Faz a imagem cobrir o elemento sem distorção */
    transition: transform 0.3s ease; /* Suaviza a transição do aumento */
}

.artigo-conteudo {
    width: 60%; /* Ajusta a largura do conteúdo para não sobrepor a imagem */
    padding-left: 1rem; /* Adiciona espaçamento entre a imagem e o conteúdo */
    display: flex;
    flex-direction: column; /* Organiza o título e o texto verticalmente */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
}

.artigo h2 {
    font-size: 1rem; /* Ajusta o tamanho do título */
    color: white;
    margin: 0; /* Remove margens para melhor controle do espaçamento */
}

.artigo p {
    font-size: 0.9rem;
    color: white;
    margin-top: 0.5rem; /* Adiciona um pequeno espaço acima do parágrafo */
}

.btn-leia-mais-index {
        margin: 10px auto;
        transition: background-color 0.3s;
        text-align: center;
        white-space: nowrap;
        width: fit-content;
        min-width: 80px;
        padding: 10px 20px;
        background-color: #e04178;
        color: #fff;
        text-decoration: none;
        border-radius: 30px;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 200px;
        box-sizing: border-box;
        margin-left: 45%;
}
    
.btn-leia-mais-index:hover {
    background-color: white;
    color: #e04178;
}


	
/* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações */
.topo-publicacoes {
    color: #FFFFFF;
    padding: 1rem;
    text-align: center;
}

.topo-publicacoes h1 {
    color: #e04178;
}

/* Corpo das publicações */
.corpo-publicacoes {
    background-color: #FFFFFF;
    padding: 2rem; /* Ajustado para 2rem */
}

.lista-publicacoes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.publicacao-item {
    margin-left: 22%;
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #F0F0F0;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 55%;
    overflow: hidden; /* Garante que o border-radius seja aplicado corretamente */
}

.publicacao-item img {
              width: 40%;
        height: 200px;
    object-fit: cover; /* Ajusta o corte da imagem */
    border-radius: 10px; /* Aplica o border-radius */
}


.conteudo-publicacao {
    flex: 1;
}

.conteudo-publicacao h2 {
    margin: 0;
    font-size: 1rem;
    margin-bottom: 0.5rem; /* Ajuste para espaçamento abaixo do h2 */
}

.resumo-publicacao {
    margin: 0.5rem 0;
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.resumo-publicacao a {
    text-decoration: none;
}

.resumo-publicacao a:hover {
    text-decoration: underline;
}

.publicacao-completa p {
    margin: 0.5rem 0; /* Ajuste para o espaçamento dos parágrafos */
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px; /* Ajuste para o espaçamento inferior dos parágrafos */
}

.publicacao-completa ul {
    margin: 0.5rem 0; /* Ajuste para o espaçamento das listas */
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px; /* Ajuste para o espaçamento inferior das listas */
}

.publicacao-completa li {
    margin-bottom: 0.5rem; /* Ajuste para o espaçamento inferior dos itens da lista */
}

.btn-leia-mais {
    display: inline-block; /* Garante que o botão não ocupe a largura total */
    margin: 10px auto; /* Centraliza o botão */
    padding: 1px 5px; /* Ajusta o padding */
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 33px;
    transition: background-color 0.3s;
    text-align: center; /* Centraliza o texto no botão */
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    width: fit-content; /* O botão ajusta seu tamanho ao conteúdo */
    min-width: 80px; /* Define uma largura mínima para o botão */
}

.btn-leia-mais:hover {
    background-color: white;
    color: #e04178;
}

.btn-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    margin: 100px auto;
    width: 90px;
    height: 30px;
}

.rodape-publicacoes		{
		
		background-color: #0d0232;
	}



	/* Estilização do botão do WhatsApp */
.whatsapp-button {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 1000; /* Garante que o botão fique acima de outros elementos */
    transition: transform 0.3s ease; /* Transição suave para o efeito hover */
}

.whatsapp-button img {
    width: 50px; /* Tamanho do ícone */
    height: 50px;
    border-radius: 50%;
}

.whatsapp-button:hover {
    transform: scale(1.1); /* Aumenta o botão suavemente no hover */
}

	
	
/*FINAL PÁGINA*/	/*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL 
/* Seção de contato */
.contact {
    width: 100%;
    height: 600px;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start; /* Alinha os itens ao topo */
}

/* Ajusta a posição do formulário e adiciona margem direita para espaço */
.contact-form {
    width: 40%;
    margin-top: 70px;
    margin-left: 10%; /* Margem esquerda para posicionar o formulário mais para a direita */
    margin-right: 20%; /* Margem direita para criar espaço entre o formulário e as informações de contato */
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.13); /* Cor preta com transparência */
    border-radius: 30px;
}

/* Ajusta a posição das informações de contato */
.contact-info {
    width: 30%;
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os itens à esquerda */
    margin-top: 270px; /* Espaçamento superior para descer as informações de contato */
}

/* Estilos de cada item de contato */
.contact-info .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Estilos dos ícones */
.contact-icon {
    width: 24px; /* Ajuste o tamanho do ícone conforme necessário */
    height: 24px;
    margin-right: 10px; /* Espaçamento entre ícone e texto */
}

/* Estilos dos links */
.contact-link {
    color: white;
    text-decoration: none;
}

.contact-link:hover {
    color: #e04178; /* Cor rosa ao passar o mouse */
}

/* Estilos do formulário */
.contact-form h2 {
   
    margin-bottom: 20px;
    font-size: 24px;
}

.contact-form label {
    display: block;
  
    margin-bottom: 5px;
}


.contact-form input {
    width: calc(100% - 20px); /* Ajuste a largura dos campos de entrada */
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #444; /* Adicione uma borda clara para destacar o campo */
    border-radius: 30px;
    background-color: #4E4863; /* Cor de fundo escura */
    color: white; /* Cor do texto rosa */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8rem; /* Ajuste o tamanho da fonte conforme necessário */
    opacity: 1; /* Defina a opacidade para 1 (totalmente opaco) */
}

.contact-form input::placeholder {
    color: #bbb; /* Cor do texto do placeholder para contraste */
}

.contact-form input:focus {
    border-color: #e04178; /* Cor da borda ao focar no campo */
    outline: none; /* Remove o contorno padrão */
}

.contact-form button {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 10px 20px;
   
    border: none;
    border-radius: 30px;
    background-color: #e04178; /* Cor de fundo padrão */
    color: white; /* Cor do texto padrão */
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s; /* Adiciona uma transição suave */
}

.contact-form button:hover {
    background-color: white; /* Cor de fundo ao passar o mouse */
    color: #e04178; /* Cor do texto ao passar o mouse */
}

/* Estilo para o rodapé */
footer {
    display: flex;
    flex-direction: column; /* Alinha o conteúdo em coluna */
    align-items: center; /* Centraliza o menu horizontalmente */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.30); /* Cor preta com transparência */
    color: #ffffff; /* Cor da fonte branca */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
}

footer .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 30px; /* Espaçamento abaixo do conteúdo */
    margin-top: 50px;
}

footer .logo {
    width: 9%;
    height: auto;
    position: absolute;
    left: 0;
    margin-left: 40px;
}

/* Alinha o menu ao lado direito */
footer .footer-menu {
    display: flex;
    margin-right: 3%;
    gap: 15px;
    justify-content: flex-end; /* Alinha o menu à direita */
    flex-grow: 1; /* Permite que o menu ocupe o espaço disponível */
}

/* Estilos para os links do menu */
footer .footer-menu a {
    color: #ffffff; /* Fonte branca para os links */
    font-size: 1rem;
    text-decoration: none;
}

/* Estilos para o hover nos links do menu */
footer .footer-menu a:hover {
    color: #e04178; /* Cor rosa ao passar o mouse */
}

/* Texto centralizado abaixo do menu */
footer .center-text {
    font-size: 1rem;
    opacity: 0.2;
    text-align: center;
    width: 100%; /* Faz com que o texto ocupe toda a largura disponível */
    color: white;
	}


/*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*//*FIM DESKTOP*/

}

/*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*/
/*-----INÍCIO TABLET-----*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*//*INICIO TABLET*/

@media screen and (min-width: 767px) and (max-width: 1024px) {
	

body, html {
    margin: 0;
    padding: 0;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    box-sizing: border-box;
    display: flex; /* Flexbox para alinhar o conteúdo verticalmente */
    flex-direction: column; /* Direção da coluna para o layout vertical */
    min-height: 1024px; /* Mínima altura da viewport */
    background-color: #0d0232;
    background-size: cover;
	overflow-x: hidden;
}

		
/* Define a altura da logo */
.logo {
    display: flex; /* Usa Flexbox para o contêiner */
    align-items: center; /* Centraliza o logo verticalmente */
    height: 100px; /* Define a altura do contêiner conforme necessário */
}

.logo img {
    height: 50px; /* Define a altura da imagem da logo */
    padding-left: 20px; /* Espaçamento interno à esquerda */
    margin-top: 0px; /* Remove a margem superior */
}



/* Estilo para o container das redes sociais */
.container {
    position: fixed; /* Fixa o contêiner na tela */
    top: 230px; /* Alinha ao topo */
    left: 0; /* Alinha à esquerda */
    padding: 25px; /* Espaçamento interno */
    border-radius: 30px; /* Cantos arredondados */
    z-index: 1000; /* Garante que o contêiner fique sobre outros elementos */
    display: flex; /* Utiliza o flexbox para alinhar os itens */
    flex-direction: column; /* Alinha os itens na vertical */
    gap: 5px; /* Espaçamento entre os itens */
}

/* Estilo para os links de redes sociais dentro do container */
.container a {
    margin: 5px 0; /* Espaçamento vertical entre os links */
    color: inherit; /* Mantém a cor original dos links */
    text-decoration: none; /* Remove o sublinhado dos links */
    font-size: 28px; /* Ajusta o tamanho da fonte dos links */
}

/* Estilo para os itens individuais no contêiner */
.container-item {
    width: 35px; /* Largura inicial do item */
    height: 35px; /* Altura inicial do item */
    background-color: white; /* Cor de fundo dos itens */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra dos itens */
    border-radius: 60px; /* Arredonda os cantos para um formato circular */
    display: flex; /* Flexbox para centralizar o conteúdo */
    align-items: center; /* Alinha o conteúdo verticalmente */
    justify-content: center; /* Alinha o conteúdo horizontalmente */
    position: relative; /* Posicionamento relativo para elementos filhos */
    transition: 0.3s; /* Transição suave para o efeito hover */
}

/* Efeito hover para ampliar o item */
.container-item:hover {
    width: 130px; /* Aumenta a largura do item ao passar o mouse */
}

/* Estilo para o texto dentro do item */
.container-item span {
    position: absolute; /* Posiciona o texto sobre o item */
}

/* Estilo para o ícone dentro do item */
.container-item .icon {
    color: #0d0232; /* Cor do ícone */
    font-size: 1.3rem; /* Tamanho do ícone */
    transition: 0.2s; /* Transição suave para o efeito hover */
}

/* Estilo para o texto visível dentro do item */
.container-item .text {
    color: white; /* Cor do texto */
    font-size: 1.2rem; /* Tamanho do texto */
    transform: scale(0); /* Inicialmente invisível */
    transition: transform 0.1s, opacity 0.1s; /* Transições suaves para a transformação e opacidade */
    transition-delay: 0.1s; /* Atraso na transição para o efeito hover */
}

/* Efeito hover para mostrar o texto */
.container-item:hover .text {
    transform: scale(1); /* Torna o texto visível */
}

/* Efeito hover para esconder o ícone */
.container-item:hover .icon {
    transform: scale(0); /* Torna o ícone invisível */
}

/* Estilo para o fundo do item */
.container-item::before {
    content: ''; /* Conteúdo vazio para o pseudo-elemento */
    position: absolute; /* Posiciona o fundo sobre o item */
    background-image: linear-gradient(45deg, var(--cor1), var(--cor2)); /* Gradiente de fundo */
    inset: 0; /* Preenche todo o item */
    opacity: 0; /* Inicialmente invisível */
    border-radius: 60px; /* Arredonda os cantos para um formato circular */
    transition: opacity 0.3s; /* Transição suave para o efeito hover */
}

/* Efeito hover para mostrar o fundo gradiente */
.container-item:hover::before {
    opacity: 1; /* Torna o fundo visível */
}


/* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer */
/* Ícone do menu */
.menu-icon {
    font-size: 40px; /* Tamanho do ícone do menu */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    position: fixed; /* Fixa o ícone do menu na tela */
    top: 20px; /* Posiciona o ícone 20px do topo */
    right: 20px; /* Posiciona o ícone 20px da direita */
    z-index: 1001; /* Garante que o ícone fique sobre outros elementos */
    color: white; /* Cor do ícone */
}

/* Cor do ícone ao passar o mouse */
.menu-icon:hover {
    color: #e04178; /* Cor do ícone quando o mouse está sobre ele */
}

/* Menu */
#menu {
    display: none; /* Inicialmente oculto */
    position: fixed; /* Fica fixo na tela */
    top: 0; /* Posiciona no topo da tela */
    left: 0; /* Posiciona à esquerda da tela */
    width: 100%; /* Largura total da tela */
    height: 100%; /* Altura total da tela */
    background: rgba(0, 0, 51, 0.9); /* Azul bem escuro com 90% de opacidade */
    color: white; /* Cor do texto */
    flex-direction: column; /* Alinha os itens verticalmente */
    align-items: center; /* Alinha os itens horizontalmente no centro */
    justify-content: center; /* Alinha os itens verticalmente no centro */
    text-align: center; /* Alinha o texto no centro */
    z-index: 1000; /* Garante que o menu fique sobre outros elementos */
}

/* Links do menu */
#menu a {
    color: white; /* Cor dos links */
    text-decoration: none; /* Remove o sublinhado dos links */
    font-size: 1.5rem; /* Tamanho da fonte */
    margin: 10px; /* Espaçamento entre os links */
    font-weight: bold; /* Negrito nos links */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
}

/* Cor dos links ao passar o mouse */
#menu a:hover {
    color: #e04178; /* Cor dos links ao passar o mouse */
}

/* Botão de fechar */
#close-btn {
    position: fixed; /* Posiciona o botão em relação à janela de visualização */
    top: 70%; /* Distância do topo (ajustar conforme necessário) */
    left: 50%; /* Alinha horizontalmente no meio da tela */
    transform: translateX(-50%); /* Ajusta o botão para centralizá-lo corretamente */
    font-size: 45px; /* Tamanho da fonte do botão de fechar */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    z-index: 1001; /* Garante que o botão fique sobre outros elementos */
}

/* Cor do botão de fechar ao passar o mouse */
#close-btn:hover {
    color: #e04178; /* Cor do botão de fechar ao passar o mouse */
}

/* Estilo para a seção do banner */
.banner {
    position: relative;
    width: 100%;
    height: 100vh; /* Ajuste conforme necessário */
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse o contêiner */
}

/* Estilo para o vídeo de fundo */
#banner-video {
    position: absolute;
    top: 0;
    left: 50%; /* Centraliza o vídeo horizontalmente */
    transform: translateX(-50%); /* Ajusta a posição para centralização */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que o vídeo cubra toda a área do contêiner */
    z-index: 0; /* Garante que o vídeo fique atrás do conteúdo */
    opacity: 0.2; /* Transparência do vídeo */
}

/* Estilo para o conteúdo do banner */
.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza o conteúdo vertical e horizontalmente */
    color: #fff; /* Cor do texto */
    text-align: center; /* Alinha o texto ao centro */
    background-color: rgba(0, 0, 0, 0.0); /* Fundo preto com 50% de transparência */
    padding: 20px;
    border-radius: 10px;
    z-index: 1; /* Garante que o conteúdo fique na frente do vídeo */
}

/* Estilo para o título no banner */
.banner-content h1 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
    font-size: 1.9rem; /* Tamanho da fonte do título */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

/* Estilo para o parágrafo no banner */
.banner-content p {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
    font-size: 1.3rem; /* Tamanho da fonte do parágrafo */
    margin-bottom: 30px; /* Espaçamento abaixo do parágrafo */
}

/* Estilo para o botão */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e04178; /* Cor de fundo do botão */
    color: #fff; /* Cor do texto do botão */
    text-decoration: none; /* Remove o sublinhado do botão */
    border-radius: 30px; /* Bordas arredondadas do botão */
    font-weight: bold; /* Texto em negrito */
    z-index: 1; /* Garante que o botão fique na frente do vídeo */

}

/* Cor do botão ao passar o mouse */
.btn:hover {
    background-color: #fff; /* Cor de fundo ao passar o mouse */
    color: #e04178; /* Cor do texto ao passar o mouse */
}

	
	
	
/*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*/
/* Texto animado */
.txt-animado {
    font-size: 2rem; /* Tamanho da fonte */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
    font-weight: bold; /* Negrito */
    color: white; /* Cor do texto */
    margin-left: 30%; /* Margem à esquerda */
    margin-top: 100px; /* Margem superior */
}

.txt-animado span {
    position: relative; /* Posicionamento relativo para o pseudo-elemento */
}

.txt-animado span::before {
    content: ""; /* Conteúdo vazio para animação */
    color: darkturquoise; /* Cor do texto animado */
    animation: palavras 20s infinite; /* Animação de palavras */
}

.txt-animado span::after {
    content: ""; /* Conteúdo vazio para animação */
    position: absolute; /* Posicionamento absoluto em relação ao pai */
    height: 100%; /* Altura igual ao elemento pai */
    border-left: 2px solid #e04178; /* Borda à esquerda */
    right: -10px; /* Distância da borda direita */
    animation: cursor .9s infinite, digita 20s steps(10) infinite; /* Animações combinadas */
    width: calc(100% + 12px); /* Largura com ajuste */
    background-color: #0d0232; /* Cor de fundo */
}

@keyframes digita {
    10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95% {
        width: 0; /* Largura reduzida */
    }
    5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85% {
        width: calc(100% + 12px); /* Largura ajustada */
    }
}

@keyframes cursor {
    0% {
        border-left: 2px solid #18003F; /* Cor do cursor */
    }
}

@keyframes palavras {
    0%, 20% {
        content: "que move,"; /* Texto inicial */
    }
    21%, 40% {
        content: "que conecta,"; /* Texto intermediário */
    }
    41%, 60% {
        content: "que inspira,"; /* Texto intermediário */
    }
    61%, 80% {
        content: "que impacta,"; /* Texto intermediário */
    }
    81%, 100% {
        content: "e que transforma."; /* Texto final */
    }
}


	

/* Estilo do Carrossel de Destaques */
.destaques {
    width: 60%; /* Reduz a largura do carrossel para 50% */
    margin: 0 auto; /* Centraliza o carrossel horizontalmente */
    margin-top: 100px;
    margin-bottom: 150px;
}

/* Estilo das imagens no carrossel */
.destaque img {
    width: 100%; /* Faz com que a imagem preencha a largura do carrossel */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 30px; /* Adiciona bordas arredondadas às imagens */
}

/* Ajuste dos slides do Slick */
.slick-slide {
    display: flex; /* Garante que o slide use flexbox para alinhamento */
    justify-content: center; /* Centraliza a imagem horizontalmente */
}

/* Transição suave para o carrossel */
.slick-slide img {
    transition: transform 0.1s ease-in-out; /* Transição mais rápida (100ms) */
}

	
.destaques-btn {
    text-align: center; /* Centraliza o botão */
    margin-top: 20px; /* Espaçamento acima do botão */
}

.destaques-btn .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e04178; /* Cor do botão */
    color: #fff; /* Cor do texto */
    text-decoration: none; /* Remove o sublinhado do link */
    border-radius: 30px; /* Bordas arredondadas */
    font-size: 1rem;
}

.destaques-btn .btn:hover {
    background-color: #e04178; /* Cor do botão ao passar o mouse */
}	
	
	
	
	
/* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar */
/* Estilo para a Topbar */
.topbar {
    width: 100%;
    padding: 10px 0; /* Padding para o topo e a base */
    padding-left: 30px;
    margin-top: 60px;
}

.topbar h1 {
    margin: 0; /* Remove a margem do título */
    font-family: 'Poppins', sans-serif; /* Fonte Poppins */
    font-weight: 600; /* Peso da fonte, similar ao utilizado anteriormente */
	color: #e04178; /* Cor branca para o título */  
}

/* Estilo para a Galeria */
.galeria1 {
    display: flex;
    justify-content: center; /* Centraliza o contêiner da galeria horizontalmente */
    padding: 20px; /* Espaçamento interno ao redor da galeria */
    width: 100%; /* Garante que a galeria use toda a largura disponível */
    box-sizing: border-box; /* Inclui padding e border na largura total */
    margin: 0 auto; /* Centraliza o contêiner horizontalmente */
}

/* PORTIFOLIO*/
.galeria-imagens {
    display: grid; /* Usando grid para um layout mais controlado */
    grid-template-columns: repeat(4, 1fr); /* Define 4 colunas de largura igual */
    gap: 20px; /* Espaçamento entre as imagens */
    max-width: 1200px; /* Limita a largura máxima do contêiner da galeria */
    width: 100%; /* Garante que o contêiner da galeria use toda a largura disponível até o máximo */
    margin: 0 auto; /* Centraliza o contêiner horizontalmente */
    box-sizing: border-box; /* Inclui padding e border na largura total */
}

/* Estilo das imagens */
.example-image {
    width: 100%; /* As imagens ocupam 100% da largura do item grid */
    height: auto; /* Mantém a proporção das imagens */
    border-radius: 30px; /* Adiciona bordas arredondadas às imagens */
    transition: transform 0.9s ease, box-shadow 0.3s ease; /* Adiciona uma transição suave para o hover */
    display: block; /* Garante que a imagem ocupe toda a largura disponível do item grid */
}

/* Efeito de hover nas imagens */
.example-image:hover {
    transform: scale(1.05); /* Aumenta a imagem ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra mais pronunciada ao passar o mouse */
}

/* Estilo do botão voltar */
.btn.voltar {
    background-color: #333;
    color: #fff;
    padding: 5px 5px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block; /* Faz com que o botão se ajuste ao tamanho do texto */
}

.btn.voltar:hover {
    background-color: #555;
}

.center-text1 {

    font-size: 1rem;
    opacity: 0.2;
    text-align: center;
    width: 100%;
    color: white;
    }	
	
/* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre */
	
#sobre {
    background-color: #090126; /* Cor de fundo suave */
	width: 100%;
	height: auto;
    padding: 20px;
	
}

.sobre .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.imagem-wrapper {
    display: flex;
    align-items: flex-start; /* Alinha a imagem no início do eixo transversal */
    flex: 1; /* Permite que a imagem-wrapper ocupe o espaço disponível */

}

	
.imagem-wrapper h1 {
    width: 20%; /* A largura será 35% do contêiner pai */
    padding-left: 40%; /* Usa porcentagem para manter a margem proporcional */
    font-size: 2.5rem; /* Tamanho da fonte ajustado de acordo com a largura da viewport */
	font-weight: 800;
    color: #e04178; /* Cor branca para o título */    

}
	
.texto-wrapper {
      width: 40%;
      font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
      letter-spacing: 0.9px; /* Ajuste conforme necessário */
      font-weight: 200; /* Ajuste o peso da fonte */
      font-size: 1rem;
      padding: 50px 150px;
      margin-left: auto;
      margin-right: auto;
      color: aliceblue;
      margin-top: 30px;
      line-height: 1.6; /* Aumenta o espaçamento entre linhas */
      word-break: break-word; /* Quebra palavras longas */
  }

 .texto-wrapper h2 {
      font-size: 2rem;
      margin-bottom: 10px;
  }

/* Estilo do botão saiba mais */
.botao-saiba-mais {
    display: inline-flex;
    align-items: center;
    padding: 5px 5px;
	background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    margin-top: 10px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transições suaves para as cores */
	margin-bottom: 80px;
}

.botao-saiba-mais:hover {
    background-color: #fff;
    color: #e04178;
}

.seta-icon {
    margin-left: 10px;
    height: 23px;
    font-weight: bold;
    transition: filter 0.6s ease; /* Transição suave para o filtro */
}

.botao-saiba-mais:hover .seta-icon {
    filter: invert(32%) sepia(100%) hue-rotate(327deg) saturate(1000%); /* Ajusta a cor ao passar o mouse */
}
	
/* Estilo para a seção Mais Detalhes */
.mais-detalhes {
    background-color: #0d0232;
}

.detalhes-wrapper {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.texto-e-imagem {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.texto-detalhes {
    margin-left: 10%;
    margin-top: 40px;
    margin-right: auto;
    flex: 1;
    padding-right: 20px;
    color: #fff;
}
.texto-detalhes {
    width: 80%;
    color: #fff;
    margin-left: 10%;
    margin-top: 30px;
    margin-right: 5%;
    padding-right: 10px;
}

.texto-detalhes h2 {
    font-size: 1.5rem;
    margin-bottom: 40px;
}

.texto-detalhes p {
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}


.texto-detalhes {
    margin-bottom: 20px; /* Espaçamento abaixo do texto */
}

.texto-e-imagem {
    display: flex;
    flex-direction: column; /* Coloca o texto e o vídeo em coluna */
    align-items: center; /* Centraliza horizontalmente */
}

.media-principal {
    display: none; /* Oculta o vídeo principal em tablets */
}

.media-secundario {
    display: block; /* Exibe o vídeo secundário */
    margin: 20px 0; /* Margem superior e inferior para separar do texto */
    width: 80%; /* Ajusta a largura do vídeo secundário */
    align-self: center; /* Centraliza o vídeo secundário horizontalmente */
}

.media-secundario video {
    width: 100%; /* Faz com que o vídeo ocupe toda a largura do contêiner */
    margin-top: 20px; /* Ajusta a margem superior para o vídeo secundário */
	border-radius: 30px;
}



.imagem-item {
    width: 40%; /* Ajusta a largura dos itens para tablets */
}

.imagem-item img {
    width: 50%; /* Imagem ocupa 100% da largura do item */
}

.descricao-imagem {
    font-size: 0.8rem; /* Reduz o tamanho da fonte para tablets */
    max-width: 300px; /* Ajusta a largura máxima para tablets */
}

/* Garantir que a galeria ocupe 100% da largura */
.galeria {
    padding: 20px; /* Ajusta o padding conforme necessário */
}

	
	
.botao-voltar {
    padding: 5px 5px;
    font-size: 0.9rem;
}



/* Galeria de imagens */
/* Estilo geral da galeria no desktop */
.galeria {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    background-color: #ffffff; /* Fundo branco para a galeria */
    padding: 20px 0; /* Adiciona espaçamento em cima e embaixo da galeria */
    margin: 0; /* Remove margens laterais */
    width: 100%; /* Garante que a galeria ocupe 100% da largura */
    box-sizing: border-box; /* Inclui padding na largura total */
    margin-top: 80px;
}

.imagem-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%; /* Largura dos itens no desktop */
    box-sizing: border-box; /* Inclui padding na largura total */
}

.imagem-item img {
    width: 40%; /* Ajusta a imagem para ocupar 100% da largura do item */
    height: auto;
    border-radius: 8px;
    margin-top: 20px;
}

.descricao-imagem {
    margin-top: 10px;
    color: #120032;
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;  /* Espaçamento entre linhas */
    margin-bottom: 15px;  /* Espaço entre parágrafos */
    max-width: 350px;  /* Largura máxima para quebrar linhas */
    word-break: break-word;  /* Quebra palavras longas se necessário */
}

.voltar-wrapper {
    text-align: center;
    margin-top: 10px;
}

.botao-voltar {
    display: inline-flex;
    align-items: center;
    padding: 5px 5px;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.botao-voltar:hover {
    background-color: #fff;
    color: #e04178;
}

.botao-voltar .icone-voltar {
    margin-right: 10px;
    height: 23px;
    transition: filter 0.3s ease;
}

.botao-voltar:hover .icone-voltar {
    filter: invert(32%) sepia(100%) hue-rotate(327deg) saturate(1000%); /* Ajusta a cor ao passar o mouse */
}

	
	
	
	
/* Estilo para a seção Serviços */
.servicos {
    background-color: #0d0232;
    padding: 20px;
    width: 100%;
    height: auto;
    position: relative; /* Adicionado para que o h1 seja posicionado em relação a este contêiner */
}

.servicos-wrapper {
    width: 100%; /* Limita a largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
}

.texto-e-imagem {
    display: flex;
    justify-content: space-between; /* Alinha o texto e a imagem ao longo do eixo horizontal */
    align-items: flex-start; /* Alinha os itens ao topo */
}

.texto-servicos {
    width: 40%;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px; /* Ajuste conforme necessário */
    font-weight: 400; /* Ajuste o peso da fonte */
    font-size: 1rem;
    padding: 50px 150px;
    margin-left: auto;
           margin-right: 30%;
    margin-top: 60px;
    color: white;
    line-height: 1.6; /* Aumenta o espaçamento entre linhas */
    word-break: break-word; /* Quebra palavras longas */
	        margin-bottom: 60px;
}

.texto-servicos h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.texto-servicos p {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 1rem;
    font-weight: 200;
    line-height: 26px;
    margin-bottom: 15px;
}

.imagem-servicos {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Alinha a imagem ao lado direito */
    align-items: flex-start; /* Alinha a imagem ao topo do contêiner */
    position: relative; /* Cria um contexto de posicionamento para o h1 */
}

.imagem-servicos h1 {
    position: absolute;
    width: 30%; /* A largura será 30% do contêiner pai */
    font-size: 2.5rem; /* Tamanho da fonte ajustado de acordo com a largura da viewport */
    font-weight: 800;
    color: #e04178; /* Cor do título */
    top: 300px; /* Ajuste o valor para posicionar mais acima ou abaixo conforme necessário */
    right: 0; /* Alinha o h1 à direita do contêiner pai */
    
}

.botao-confira {
    display: inline-flex;
    align-items: center;
    padding: 5px 5px;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transições suaves para as cores */
	
}

.botao-confira:hover {
    background-color: #fff;
    color: #e04178;
}

.seta-icon {
    margin-left: 10px;
    height: 23px;
    font-weight: bold;
    transition: filter 0.6s ease; /* Transição suave para o filtro */
}

.botao-confira:hover .seta-icon {
    filter: invert(32%) sepia(100%) hue-rotate(327deg) saturate(1000%); /* Ajusta a cor ao passar o mouse */
}


/* Estilos para a seção Confira */
/* Estilos para a seção Confira */
.confira {
    background-color: #f0f0f0;
    padding: 20px;

}

.wrapper-confira {
    width: 30%;
    margin:0;
}

.wrapper-confira h2 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.6;
    color: #18003f;
    margin-top: 30px;
	text-align: center;
}

.wrapper-confira span {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #0d0232;
   
    display: block;
    margin-bottom: 20px;
}

/* Estilos para os projetos */
.projetos {
    flex-direction: column; /* Altera a direção do layout para coluna */
    align-items: center;
    padding: 0;
}

.projeto {
    display: flex;
    align-items: center;
    width: 100%;
}

.video-projeto {
    width: 90%;
    margin-bottom: 20px; /* Adiciona espaço entre o vídeo e o texto */
    margin-left: 5%;
	border-radius: 30px;
	margin-top: 30px;
}

/* Estilos para a descrição do projeto */
.descricao-projeto {
    width: 80%;

    padding: 0 10%; /* Adiciona padding lateral ao texto */
}

.descricao-projeto h3 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 1.2rem;
    line-height: 26px;
    font-weight: bold;
    margin-bottom: 10px;
	color: white;
}

.descricao-projeto p {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-weight: 100;
    font-size: 0.9rem;
    line-height: 1.5;
	color: white;
}



/* Ajusta a posição do formulário e adiciona margem direita para espaço */
/* Ajusta a posição do formulário e adiciona margem direita para espaço */
.orcamento-form {
    width: 40%; /* Define a largura do formulário */
    margin: 70px auto 0; /* Centraliza horizontalmente e adiciona margem superior */
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    padding: 20px;
    background-color: #090126; /* Cor de fundo suave */    
    border-radius: 30px;
    margin-top: 100px;
}

/* Ajusta a posição das informações de contato */
.orcamento-info {
    width: 30%;
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os itens à esquerda */
    margin-top: 70px; /* Espaçamento superior ajustado para estar próximo ao formulário */
}

/* Estilos de cada item de contato */
.orcamento-info .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Estilos dos ícones */
.contact-icon {
    width: 24px; /* Ajuste o tamanho do ícone conforme necessário */
    height: 24px;
    margin-right: 10px; /* Espaçamento entre ícone e texto */
}

/* Estilos dos links */
.contact-link {
    color: white;
    text-decoration: none;
}

.contact-link:hover {
    color: #e04178; /* Cor rosa ao passar o mouse */
}

/* Estilos do formulário */
.orcamento-form h2 {
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.orcamento-form label {
    display: block;
    margin-bottom: 5px;
}

.orcamento-form input,
.orcamento-form textarea {
    width: calc(100% - 20px); /* Ajuste a largura dos campos de entrada */
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #444; /* Adicione uma borda clara para destacar o campo */
    border-radius: 30px;
    background-color: #4E4863; /* Cor de fundo escura */
    color: white; /* Cor do texto */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8rem; /* Ajuste o tamanho da fonte conforme necessário */
    opacity: 1; /* Defina a opacidade para 1 (totalmente opaco) */
}

.orcamento-form textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
    height: 100px; /* Altura inicial do campo de texto, ajuste conforme necessário */
	 border-radius: 10px;
}

.orcamento-form input::placeholder,
.orcamento-form textarea::placeholder {
    color: #bbb; /* Cor do texto do placeholder para contraste */
}

.orcamento-form input:focus,
.orcamento-form textarea:focus {
    border-color: #e04178; /* Cor da borda ao focar no campo */
    outline: none; /* Remove o contorno padrão */
}

.orcamento-form button {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    background-color: #e04178; /* Cor de fundo padrão */
    color: white; /* Cor do texto padrão */
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s; /* Adiciona uma transição suave */
}

.orcamento-form button:hover {
    background-color: white; /* Cor de fundo ao passar o mouse */
    color: #e04178; /* Cor do texto ao passar o mouse */  
}


/* Botão Voltar */
.botao-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    margin: 100px auto;
}

.botao-voltar:hover {
    background-color: #fff;
    color: #e04178;
}

.icone-voltar {
    margin-right: 10px;
}

/* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos */
.artigos {
    background-color: #090126;
    padding: 50px; /* Adiciona um pouco de espaçamento interno */
}

.conteudo-artigos {
    display: flex; /* Organiza o título e a lista de artigos horizontalmente */
    gap: 2rem; /* Adiciona espaço entre o título e a lista de artigos */
}

.imagem-artigos h1 {
            width: 20%;
        padding-left: 40%;
        font-size: 2.5rem;
        font-weight: 800;
        color: #e04178;
	margin-top: 400px;
}

.artigos-lista {
    display: flex;
    flex-direction: column; /* Organiza os artigos verticalmente */
    gap: 1rem; /* Adiciona espaço entre os artigos */
    flex-grow: 1; /* Faz com que a lista de artigos ocupe o espaço restante */
	        margin-top: 100px;
	margin-bottom: 80px;
}

.artigo {
    display: flex; /* Permite o layout flexível dentro do artigo */
    flex-direction: row; /* Organiza a imagem e o conteúdo horizontalmente */
    background-color: #4E4863;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 1rem; /* Ajusta o padding para melhor espaçamento */
    
    max-width: 600px; /* Define uma largura máxima para cada artigo */
    box-sizing: border-box;
    transition: transform 0.3s, box-shadow 0.3s;
	        margin-left: 25%;
}

.artigo img {
    width: 40%; /* Define a largura da imagem como 40% do artigo */
    height: auto; /* Mantém a altura automática para preservar a proporção */
    border-radius: 20px; /* Aplica o border-radius */
    object-fit: cover; /* Faz a imagem cobrir o elemento sem distorção */
    transition: transform 0.3s ease; /* Suaviza a transição do aumento */
}

.artigo-conteudo {
    width: 60%; /* Ajusta a largura do conteúdo para não sobrepor a imagem */
    padding-left: 1rem; /* Adiciona espaçamento entre a imagem e o conteúdo */
    display: flex;
    flex-direction: column; /* Organiza o título e o texto verticalmente */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
}

.artigo h2 {
    font-size: 1rem; /* Ajusta o tamanho do título */
    color: white;
    margin: 0; /* Remove margens para melhor controle do espaçamento */
}

.artigo p {
    font-size: 0.9rem;
    color: white;
    margin-top: 0.5rem; /* Adiciona um pequeno espaço acima do parágrafo */
}

.btn-leia-mais-index {
        margin: 10px auto;
        transition: background-color 0.3s;
        text-align: center;
        white-space: nowrap;
        width: fit-content;
        min-width: 80px;
        padding: 10px 20px;
        background-color: #e04178;
        color: #fff;
        text-decoration: none;
        border-radius: 30px;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 200px;
        box-sizing: border-box;
        margin-left: 26%;
	        margin-top: 20px;
}
    
.btn-leia-mais-index:hover {
    background-color: white;
    color: #e04178;
}


	
/* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações */
.topo-publicacoes {
    color: #FFFFFF;
    padding: 1rem;
    text-align: center;
}

.topo-publicacoes h1 {
    color: #e04178;
}

/* Corpo das publicações */
.corpo-publicacoes {
    background-color: #FFFFFF;
    padding: 2rem; /* Ajustado para 2rem */
}

.lista-publicacoes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.publicacao-item {
    margin-left: 2%;
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #F0F0F0;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
}

.publicacao-item img {
    width: 40%; /* Ajustado para 40% da largura do item */
    height: 250px; /* Altura fixa para as imagens */
    object-fit: cover; /* Ajusta o corte da imagem */
    border-radius: 10px;
}

.conteudo-publicacao {
    flex: 1;
}

.conteudo-publicacao h2 {
    margin: 0;
    font-size: 1rem;
    margin-bottom: 0.5rem; /* Ajuste para espaçamento abaixo do h2 */
}

.resumo-publicacao {
    margin: 0.5rem 0;
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.resumo-publicacao a {
    text-decoration: none;
}

.resumo-publicacao a:hover {
    text-decoration: underline;
}

.publicacao-completa p {
    margin: 0.5rem 0; /* Ajuste para o espaçamento dos parágrafos */
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px; /* Ajuste para o espaçamento inferior dos parágrafos */
}

.publicacao-completa ul {
    margin: 0.5rem 0; /* Ajuste para o espaçamento das listas */
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px; /* Ajuste para o espaçamento inferior das listas */
}

.publicacao-completa li {
    margin-bottom: 0.5rem; /* Ajuste para o espaçamento inferior dos itens da lista */
}

.btn-leia-mais {
    display: inline-block; /* Garante que o botão não ocupe a largura total */
    margin: 10px auto; /* Centraliza o botão */
    padding: 1px 5px; /* Ajusta o padding */
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 33px;
    transition: background-color 0.3s;
    text-align: center; /* Centraliza o texto no botão */
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    width: fit-content; /* O botão ajusta seu tamanho ao conteúdo */
    min-width: 80px; /* Define uma largura mínima para o botão */
}

.btn-leia-mais:hover {
    background-color: white;
    color: #e04178;
}

.btn-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    margin: 100px auto;
    width: 90px;
    height: 30px;
}

.btn-voltar:hover {
    background-color: white;
    color: #e04178;
}

.rodape-publicacoes {
    background-color: #0d0232;
}



	/* Estilização do botão do WhatsApp */
.whatsapp-button {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000; /* Garante que o botão fique acima de outros elementos */
    transition: transform 0.3s ease; /* Transição suave para o efeito hover */
}

.whatsapp-button img {
    width: 50px; /* Tamanho do ícone */
    height: auto;
    border-radius: 50%;
}

.whatsapp-button:hover {
    transform: scale(1.1); /* Aumenta o botão suavemente no hover */
}


/*FINAL PÁGINA*/	/*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL 
/* Seção de contato */
.contact {
    width: 100%;
    height: auto; /* Ajuste a altura para se adaptar ao conteúdo */
    padding: 40px;
    margin-top: 80px;
    background-color: #0d0232;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Alinha itens na coluna para colocar o formulário e informações de contato um abaixo do outro */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
}

/* Ajusta a posição do formulário e adiciona margem direita para espaço */
.contact-form {
    width: 60%; /* Ajuste a largura do formulário conforme necessário */
    margin-bottom: 40px; /* Espaço entre o formulário e as informações de contato */
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.13); /* Cor preta com transparência */
    border-radius: 30px;
}

/* Ajusta a posição das informações de contato */
.contact-info {
    width: 60%; /* Ajuste a largura das informações de contato conforme necessário */
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os itens à esquerda */
}

/* Estilos de cada item de contato */
.contact-info .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Estilos dos ícones */
.contact-icon {
    width: 24px; /* Ajuste o tamanho do ícone conforme necessário */
    height: 24px;
    margin-right: 10px; /* Espaçamento entre ícone e texto */
}

/* Estilos dos links */
.contact-link {
    color: white;
    text-decoration: none;
}

.contact-link:hover {
    color: #e04178; /* Cor rosa ao passar o mouse */
}

/* Estilos do formulário */
.contact-form h2 {
    margin-bottom: 20px;
    font-size: 24px;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
}

.contact-form input {
    width: calc(100% - 20px); /* Ajuste a largura dos campos de entrada */
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #444; /* Adicione uma borda clara para destacar o campo */
    border-radius: 30px;
    background-color: #4E4863; /* Cor de fundo escura */
    color: white; /* Cor do texto rosa */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8rem; /* Ajuste o tamanho da fonte conforme necessário */
    opacity: 1; /* Defina a opacidade para 1 (totalmente opaco) */
}

.contact-form input::placeholder {
    color: #bbb; /* Cor do texto do placeholder para contraste */
}

.contact-form input:focus {
    border-color: #e04178; /* Cor da borda ao focar no campo */
    outline: none; /* Remove o contorno padrão */
}

.contact-form button {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 5px 5px;
    border: none;
    border-radius: 30px;
    background-color: #e04178; /* Cor de fundo padrão */
    color: white; /* Cor do texto padrão */
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s; /* Adiciona uma transição suave */
}

.contact-form button:hover {
    background-color: white; /* Cor de fundo ao passar o mouse */
    color: #e04178; /* Cor do texto ao passar o mouse */
}


/* Estilo para o rodapé */
footer {
    display: flex;
    flex-direction: column; /* Alinha o conteúdo em coluna */
    align-items: center; /* Centraliza o menu horizontalmente */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.30); /* Cor preta com transparência */
    color: #ffffff; /* Cor da fonte branca */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
}

footer .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 30px; /* Espaçamento abaixo do conteúdo */
    margin-top: 50px;
}

footer .logo {
    width: 15%;
    height: auto;
    position: absolute;
    left: 0;
    margin-left: 40px;
}

/* Alinha o menu ao lado direito */
footer .footer-menu {
    display: flex;
    margin-right: 3%;
    gap: 15px;
    justify-content: flex-end; /* Alinha o menu à direita */
    flex-grow: 1; /* Permite que o menu ocupe o espaço disponível */
}

/* Estilos para os links do menu */
footer .footer-menu a {
    color: #ffffff; /* Fonte branca para os links */
    font-size: 1rem;
    text-decoration: none;
}

/* Estilos para o hover nos links do menu */
footer .footer-menu a:hover {
    color: #e04178; /* Cor rosa ao passar o mouse */
}

/* Texto centralizado abaixo do menu */
footer .center-text {
    font-size: 1rem;
    opacity: 0.2;
    text-align: center;
    width: 100%; /* Faz com que o texto ocupe toda a largura disponível */
    color: white;
	}



/* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais */
.redes-sociais {
    text-align: center;
    padding: 20px;
}

.redes-sociais h2 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    color: white;
    font-size: 1rem;
    font-weight: 100;
    letter-spacing: 0.9px;
}

.social-icon {
    display: inline-block;
    margin: 0 10px;
    font-size: 1.7rem; /* Diminuído de 2rem para 1.5rem */
    color: white;
    text-decoration: none;
}

.social-icon:hover {
    color: #e04178; /* Cor de hover se desejado */
}

	
	

	

/*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*/
/*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*//*-----FIM TABLET-----*/

}

/*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*//*-----INÍCIO SMARTPHONE-----*/
	@media screen and (max-width:  766px){
		/* Estilos gerais para telas maiores (desktops) */
body, html {
    margin: 0;
    padding: 0;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    box-sizing: border-box;
    display: flex; /* Flexbox para alinhar o conteúdo verticalmente */
    flex-direction: column; /* Direção da coluna para o layout vertical */
    min-height: 1024px; /* Mínima altura da viewport */
    background-color: #0d0232;
    background-size: cover;
	overflow-x: hidden;
}

		
/* Define a altura da logo */
.logo {
    display: flex; /* Usa Flexbox para o contêiner */
    align-items: center; /* Centraliza o logo verticalmente */
    height: 100px; /* Define a altura do contêiner conforme necessário */
}

.logo img {
    height: 38px; /* Define a altura da imagem da logo */
    padding-left: 20px; /* Espaçamento interno à esquerda */
    margin-top: 0px; /* Remove a margem superior */
}



/* Estilo para o container das redes sociais */
/* Estilo para o container das redes sociais */
.container {
    position: fixed; /* Fixa o contêiner na tela */
    top: 90px; /* Ajusta a posição vertical */
    left: 50%; /* Centraliza horizontalmente com base na largura total da tela */
    transform: translateX(-50%); /* Ajusta a posição para a esquerda em relação ao centro */
    border-radius: 30px; /* Cantos arredondados */
    z-index: 1000; /* Garante que o contêiner fique sobre outros elementos */
    display: flex; /* Utiliza o flexbox para alinhar os itens */
    gap: 12px;
    padding: 15px; /* Espaçamento interno */
}

/* Estilo para os links de redes sociais dentro do container */
.container a {
    margin: 5px 0; /* Espaçamento vertical entre os links */
    color: inherit; /* Mantém a cor original dos links */
    text-decoration: none; /* Remove o sublinhado dos links */
    font-size: 0.5rem; /* Ajusta o tamanho da fonte dos links */
}

/* Estilo para os itens individuais no contêiner */
.container-item {
    width: 35px; /* Largura inicial do item */
    height: 35px; /* Altura inicial do item */
    background-color: white; /* Cor de fundo dos itens */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra dos itens */
    border-radius: 60px; /* Arredonda os cantos para um formato circular */
    display: flex; /* Flexbox para centralizar o conteúdo */
    align-items: center; /* Alinha o conteúdo verticalmente */
    justify-content: center; /* Alinha o conteúdo horizontalmente */
    position: relative; /* Posicionamento relativo para elementos filhos */
    transition: 0.3s; /* Transição suave para o efeito hover */
}

/* Efeito hover para ampliar o item */
.container-item:hover {
    width: 100px; /* Aumenta a largura do item ao passar o mouse */
}

/* Estilo para o texto dentro do item */
.container-item span {
    position: absolute; /* Posiciona o texto sobre o item */
}

/* Estilo para o ícone dentro do item */
.container-item .icon {
    color: #0d0232; /* Cor do ícone */
    font-size: 1.2rem; /* Tamanho do ícone */
    transition: 0.2s; /* Transição suave para o efeito hover */
}

/* Estilo para o texto visível dentro do item */
.container-item .text {
    color: white; /* Cor do texto */
    font-size: 1rem; /* Tamanho do texto */
    transform: scale(0); /* Inicialmente invisível */
    transition: transform 0.1s, opacity 0.1s; /* Transições suaves para a transformação e opacidade */
    transition-delay: 0.1s; /* Atraso na transição para o efeito hover */
}

/* Efeito hover para mostrar o texto */
.container-item:hover .text {
    transform: scale(1); /* Torna o texto visível */
}

/* Efeito hover para esconder o ícone */
.container-item:hover .icon {
    transform: scale(0); /* Torna o ícone invisível */
}

/* Estilo para o fundo do item */
.container-item::before {
    content: ''; /* Conteúdo vazio para o pseudo-elemento */
    position: absolute; /* Posiciona o fundo sobre o item */
    background-image: linear-gradient(45deg, var(--cor1), var(--cor2)); /* Gradiente de fundo */
    inset: 0; /* Preenche todo o item */
    opacity: 0; /* Inicialmente invisível */
    border-radius: 60px; /* Arredonda os cantos para um formato circular */
    transition: opacity 0.3s; /* Transição suave para o efeito hover */
}

/* Efeito hover para mostrar o fundo gradiente */
.container-item:hover::before {
    opacity: 1; /* Torna o fundo visível */
}
		
/* Classe para ocultar o contêiner */
.hidden {
    display: none; /* Oculta o contêiner */
}

/* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer *//* Menu Hambúrguer */
/* Ícone do menu */
.menu-icon {
    font-size: 30px; /* Tamanho do ícone do menu */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    position: fixed; /* Fixa o ícone do menu na tela */
    top: 28px; /* Posiciona o ícone 20px do topo */
    right: 2%; /* Posiciona o ícone 20px da direita */
    z-index: 1001; /* Garante que o ícone fique sobre outros elementos */
    color: white; /* Cor do ícone */
}

/* Cor do ícone ao passar o mouse */
.menu-icon:hover {
    color: #e04178; /* Cor do ícone quando o mouse está sobre ele */
}

/* Menu */
#menu {
    display: none; /* Inicialmente oculto */
    position: fixed; /* Fica fixo na tela */
    top: 0; /* Posiciona no topo da tela */
    left: 0; /* Posiciona à esquerda da tela */
    width: 100%; /* Largura total da tela */
    height: 100%; /* Altura total da tela */
    background: rgba(0, 0, 51, 0.9); /* Azul bem escuro com 90% de opacidade */
    color: white; /* Cor do texto */
    flex-direction: column; /* Alinha os itens verticalmente */
    align-items: center; /* Alinha os itens horizontalmente no centro */
    justify-content: center; /* Alinha os itens verticalmente no centro */
    text-align: center; /* Alinha o texto no centro */
    z-index: 1000; /* Garante que o menu fique sobre outros elementos */
}

/* Links do menu */
#menu a {
    color: white; /* Cor dos links */
    text-decoration: none; /* Remove o sublinhado dos links */
    font-size: 1.2rem; /* Tamanho da fonte */
    margin: 10px; /* Espaçamento entre os links */
    font-weight: bold; /* Negrito nos links */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
}

/* Cor dos links ao passar o mouse */
#menu a:hover {
    color: #e04178; /* Cor dos links ao passar o mouse */
}

/* Botão de fechar */
#close-btn {
    position: fixed; /* Posiciona o botão em relação à janela de visualização */
    top: 70%; /* Distância do topo (ajustar conforme necessário) */
    left: 50%; /* Alinha horizontalmente no meio da tela */
    transform: translateX(-50%); /* Ajusta o botão para centralizá-lo corretamente */
    font-size: 35px; /* Tamanho da fonte do botão de fechar */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    z-index: 1001; /* Garante que o botão fique sobre outros elementos */
}

/* Cor do botão de fechar ao passar o mouse */
#close-btn:hover {
    color: #e04178; /* Cor do botão de fechar ao passar o mouse */
}

/* Estilo para a seção do banner */
.banner {
    position: relative;
    width: 100%;
    height: 50vh; /* Ajuste conforme necessário */
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse o contêiner */
    z-index: 1; /* Garante que o banner fique atrás dos outros conteúdos */
}

/* Estilo para o vídeo de fundo */
#banner-video {
    position: absolute;
    top: 0;
    left: 50%; /* Centraliza o vídeo horizontalmente */
    transform: translateX(-50%); /* Ajusta a posição para centralização */
    width: 100%;
    height: 80%;
    object-fit: cover; /* Garante que o vídeo cubra toda a área do contêiner */
    z-index: 0; /* Garante que o vídeo fique atrás do conteúdo */
    opacity: 0.3; /* Transparência do vídeo */
}

/* Estilo para o conteúdo do banner */
.banner-content {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.0);
    padding: 20px;
    border-radius: 10px;
    z-index: 2;
}


/* Estilo para o título no banner */
.banner-content h1 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
    font-size: 1.5rem; /* Tamanho da fonte do título */
	margin-top: 150px;
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

/* Estilo para o parágrafo no banner */
.banner-content p {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
    font-size: 1rem; /* Tamanho da fonte do parágrafo */
    margin-bottom: 30px; /* Espaçamento abaixo do parágrafo */
}

/* Estilo para o botão */
.btn {
    display: inline-block;
    padding: 5px 5px;
    background-color: #e04178; /* Cor de fundo do botão */
	font-size:0.8rem;
    color: #fff; /* Cor do texto do botão */
    text-decoration: none; /* Remove o sublinhado do botão */
    border-radius: 30px; /* Bordas arredondadas do botão */
 
    z-index: 1; /* Garante que o botão fique na frente do vídeo */

}

/* Cor do botão ao passar o mouse */
.btn:hover {
    background-color: #fff; /* Cor de fundo ao passar o mouse */
    color: #e04178; /* Cor do texto ao passar o mouse */
}

	
	
	
/*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*//*texto animado*/
/* Texto animado */
.txt-animado {
    font-size: 1.3rem; /* Tamanho da fonte */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* Família da fonte */
    font-weight: bold; /* Negrito */
    color: white; /* Cor do texto */
    margin-left: 10%; /* Margem à esquerda */
    margin-top: 90px; /* Margem superior */
}

.txt-animado span {
    position: relative; /* Posicionamento relativo para o pseudo-elemento */
}

.txt-animado span::before {
    content: ""; /* Conteúdo vazio para animação */
    color: darkturquoise; /* Cor do texto animado */
    animation: palavras 20s infinite; /* Animação de palavras */
}

.txt-animado span::after {
    content: ""; /* Conteúdo vazio para animação */
    position: absolute; /* Posicionamento absoluto em relação ao pai */
    height: 100%; /* Altura igual ao elemento pai */
    border-left: 2px solid #e04178; /* Borda à esquerda */
    right: -10px; /* Distância da borda direita */
    animation: cursor .9s infinite, digita 20s steps(10) infinite; /* Animações combinadas */
    width: calc(100% + 12px); /* Largura com ajuste */
    background-color: #0d0232; /* Cor de fundo */
}

@keyframes digita {
    10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95% {
        width: 0; /* Largura reduzida */
    }
    5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85% {
        width: calc(100% + 12px); /* Largura ajustada */
    }
}

@keyframes cursor {
    0% {
        border-left: 2px solid #18003F; /* Cor do cursor */
    }
}

@keyframes palavras {
    0%, 20% {
        content: "que move,"; /* Texto inicial */
    }
    21%, 40% {
        content: "que conecta,"; /* Texto intermediário */
    }
    41%, 60% {
        content: "que inspira,"; /* Texto intermediário */
    }
    61%, 80% {
        content: "que impacta,"; /* Texto intermediário */
    }
    81%, 100% {
        content: "e que transforma."; /* Texto final */
    }
}


	

/* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel *//* Estilo do carrossel */

/* Estilo do Carrossel de Destaques */
.destaques {
    width: 80%; /* Reduz a largura do carrossel para 50% */
    margin: 0 auto; /* Centraliza o carrossel horizontalmente */
    margin-top: 100px;
    margin-bottom: 150px;
}

/* Estilo das imagens no carrossel */
.destaque img {
    width: 100%; /* Faz com que a imagem preencha a largura do carrossel */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 30px; /* Adiciona bordas arredondadas às imagens */
}

/* Ajuste dos slides do Slick */
.slick-slide {
    display: flex; /* Garante que o slide use flexbox para alinhamento */
    justify-content: center; /* Centraliza a imagem horizontalmente */
}

/* Transição suave para o carrossel */
.slick-slide img {
    transition: transform 0.1s ease-in-out; /* Transição mais rápida (100ms) */
}

.slick-dots li button:before {
display: none;

		}
		
.destaques-btn {
    text-align: center; /* Centraliza o botão */
    margin-top: 20px; /* Espaçamento acima do botão */
}

.destaques-btn {
    text-align: center; /* Centraliza o botão */
    margin-top: 20px; /* Espaçamento acima do botão */
}



.destaques-btn .btn:hover {
    background-color: #e04178; /* Cor do botão ao passar o mouse */
}	
	
	
	
	
/* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar *//* Estilo para a Topbar */
/* Estilo para a Topbar */
.topbar {
    width: 100%;
    padding: 10px 0; /* Padding para o topo e a base */
    padding-left: 30px;
    margin-top: 60px;
}

.topbar h1 {

    margin: 0; /* Remove a margem do título */
    font-family: 'Poppins', sans-serif; /* Fonte Poppins */
    font-weight: 600; /* Peso da fonte, similar ao utilizado anteriormente */
	font-size: 1.5rem;
	color: #e04178; /* Cor branca para o título */  
}

/* Estilo para a Galeria */
.galeria1 {
    display: flex;
    justify-content: center; /* Centraliza o contêiner da galeria horizontalmente */
    padding: 20px; /* Espaçamento interno ao redor da galeria */
    width: 100%; /* Garante que a galeria use toda a largura disponível */
    box-sizing: border-box; /* Inclui padding e border na largura total */
    margin: 0 auto; /* Centraliza o contêiner horizontalmente */
}

/* Contêiner das imagens */
.galeria-imagens {
    display: grid; /* Usando grid para um layout mais controlado */
    grid-template-columns: repeat(3, 1fr); /* Define 4 colunas de largura igual */
    gap: 5px; /* Espaçamento entre as imagens */
    width: 100%; /* Garante que o contêiner da galeria use toda a largura disponível até o máximo */
    margin: 0 auto; /* Centraliza o contêiner horizontalmente */
    box-sizing: border-box; /* Inclui padding e border na largura total */
}

/* Estilo das imagens */
.example-image {
    width: 100%; /* As imagens ocupam 100% da largura do item grid */
    height: auto; /* Mantém a proporção das imagens */
    border-radius: 30px; /* Adiciona bordas arredondadas às imagens */
    transition: transform 0.9s ease, box-shadow 0.3s ease; /* Adiciona uma transição suave para o hover */
    display: block; /* Garante que a imagem ocupe toda a largura disponível do item grid */
}

/* Efeito de hover nas imagens */
.example-image:hover {
    transform: scale(1.05); /* Aumenta a imagem ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra mais pronunciada ao passar o mouse */
}

.botao-voltar {
    
        align-items: center;
        justify-content: center;
        margin: 30px auto;
	    display: inline-block;
        padding: 5px 5px;
        background-color: #e04178;
        font-size: 0.8rem;
        color: #fff;
        text-decoration: none;
        border-radius: 30px;
}
		
  .center-text1 {
        margin-top: 20px;
        font-size: 0.8rem;
        opacity: 0.2;
        text-align: center;
        width: 100%;
        color: white;
	  margin-bottom: 0;
    }

.btn.voltar:hover {
    background-color: #555;
}

.center-text1 {
	margin-top: 20px;
    font-size: 0.8rem;
    opacity: 0.2;
    text-align: center;
    width: 100%; /* Faz com que o texto ocupe toda a largura disponível */
    color: white;
	}		
		
		
/* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre *//* Estilo para a seção Sobre */
	
#sobre {
    background-color: #090126; /* Cor de fundo suave */
    width: 100%;
    height: auto;
    padding: 20px;
    display: flex; /* Permite usar Flexbox para alinhamento */
    flex-direction: column; /* Organiza os itens em uma coluna */
    
}

.sobre .wrapper {
    width: 90%; /* Define a largura da wrapper como 70% da seção */
}

.imagem-wrapper {
    margin-bottom: 20px; /* Espaçamento abaixo da imagem-wrapper */
	margin-left: 5%;
}

.imagem-wrapper h1 {
    font-size: 2.0rem; /* Tamanho da fonte ajustado de acordo com a largura da viewport */
    font-weight: 800;
    color: #e04178; /* Cor do título */
}

.texto-wrapper {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px; /* Ajuste conforme necessário */
    font-weight: 200; /* Ajuste o peso da fonte */
    font-size: 0.9rem;
    padding: 0 20px; /* Ajuste o padding conforme necessário */
    color: aliceblue;
    line-height: 1.6; /* Aumenta o espaçamento entre linhas */
    word-break: break-word; /* Quebra palavras longas */
	        margin-bottom: 20px;
}

/* Estilo para os subtítulos na seção de texto */
.texto-wrapper h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Estilo do botão saiba mais */
.botao-saiba-mais {
    display: inline-flex;
    align-items: center;
    padding: 5px 5px;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
	font-size: 0.8rem;
    border-radius: 30px;

    margin-top: 10px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transições suaves para as cores */

}

.botao-saiba-mais:hover {
    background-color: #fff;
    color: #e04178;
}

.seta-icon {
    margin-left: 10px;
    height: 23px;
    font-weight: bold;
    transition: filter 0.6s ease; /* Transição suave para o filtro */
}

.botao-saiba-mais:hover .seta-icon {
    filter: invert(32%) sepia(100%) hue-rotate(327deg) saturate(1000%); /* Ajusta a cor ao passar o mouse */
}
	
/* Estilo para a seção Mais Detalhes */
.mais-detalhes {
    background-color: #0d0232;
}

.detalhes-wrapper {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.texto-e-imagem {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.texto-detalhes {
    margin-left: 10%;
    margin-top: 40px;
    margin-right: auto;
    flex: 1;
    padding-right: 20px;
    color: #fff;
}
.texto-detalhes {
    width: 90%;
    color: #fff;
    margin-left: 10%;
    margin-top: 30px;
    margin-right: 5%;
    padding-right: 10px;
}

.texto-detalhes h2 {
	margin-top: 60px;
    font-size: 1.5rem;
    margin-bottom: 40px;
}

.texto-detalhes p {
    font-size: 0.9rem;
    line-height: 24px;
    margin-bottom: 20px;
}


.texto-detalhes {
    margin-bottom: 20px; /* Espaçamento abaixo do texto */
}

.texto-e-imagem {
    display: flex;
    flex-direction: column; /* Coloca o texto e o vídeo em coluna */
    align-items: center; /* Centraliza horizontalmente */
}

.media-principal {
    display: none; /* Oculta o vídeo principal em tablets */
}

.media-secundario {
    display: block; /* Exibe o vídeo secundário */
    margin: 20px 0; /* Margem superior e inferior para separar do texto */
    width: 90%; /* Ajusta a largura do vídeo secundário */
    align-self: center; /* Centraliza o vídeo secundário horizontalmente */
}

.media-secundario video {
    width: 100%; /* Faz com que o vídeo ocupe toda a largura do contêiner */
    margin-top: 20px; /* Ajusta a margem superior para o vídeo secundário */
	border-radius: 30px;
}


/* Galeria de imagens */
/* Estilo geral da galeria no desktop */
.galeria {
    display: flex;
    flex-direction: column; /* Organiza as imagens e descrições uma abaixo da outra */
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-color: #ffffff; /* Fundo branco para a galeria */
    padding: 20px 0; /* Adiciona espaçamento em cima e embaixo da galeria */
    width: 100%; /* Garante que a galeria ocupe 100% da largura */
    box-sizing: border-box; /* Inclui padding na largura total */
    margin-top: 50px;
}

.imagem-item {
    display: flex;
    flex-direction: column; /* Alinha a imagem e a descrição em coluna */
    align-items: center;
    width: 100%; /* Largura dos itens no desktop */
    box-sizing: border-box; /* Inclui padding na largura total */
}

.imagem-item img {
    width: 20%; /* Ajusta a imagem para ocupar 100% da largura do item */
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px; /* Espaçamento entre a imagem e a descrição */
}

.descricao-imagem {
   
    justify-content: center;
    color: #120032;
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;  /* Espaçamento entre linhas */
    margin-bottom: 15px;  /* Espaço abaixo da descrição */
    max-width: 350px;  /* Largura máxima para quebrar linhas */
    text-align: left;
    flex-direction: row;
}


.voltar-wrapper {
    text-align: center;
    margin-top: 10px;
}

.botao-voltar {
    display: inline-flex;
    align-items: center;
    padding: 5px 5px;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    
    transition: background-color 0.3s ease, color 0.3s ease;
	font-size: 0.8rem;
}

.botao-voltar:hover {
    background-color: #fff;
    color: #e04178;
}

.botao-voltar .icone-voltar {
    margin-right: 10px;
    height: 23px;
    transition: filter 0.3s ease;
}

.botao-voltar:hover .icone-voltar {
    filter: invert(32%) sepia(100%) hue-rotate(327deg) saturate(1000%); /* Ajusta a cor ao passar o mouse */
}

	
	
	
	
/* Estilo para a seção Serviços */
/* Estilo para a seção Serviços */
.servicos {
    width: 100%;
    height: auto;
    padding: 20px;
    display: flex; /* Permite usar Flexbox para alinhamento */
    flex-direction: column; /* Organiza os itens em uma coluna */
	margin-bottom: -80px;
}

.servicos-wrapper {
    width: 100%; /* Limita a largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
}

.texto-e-imagem {
    display: flex;
    flex-direction: column; /* Alinha o título h1 e o texto verticalmente */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
}

.texto-servicos {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
     letter-spacing: 0.9px;
    font-weight: 200;
    padding: 0 20px;
    color: white;
	margin-bottom: 100px;
              
}

.texto-servicos h2 {
    font-size: 1.5rem;
}

.texto-servicos p {
	width: 90%;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
	line-height: 1.6;
    font-size: 0.9rem;
    font-weight: 200;
    word-break: break-word;
    margin-bottom: 15px;
}

.imagem-servicos {
    width: 100%; /* Garante que a imagem ocupe 100% da largura */
    display: flex;
    justify-content: center; /* Centraliza a imagem */
    align-items: center; /* Centraliza a imagem verticalmente */
}

.imagem-servicos h1 {
    width: 100%; /* A largura será 100% do contêiner pai */
    font-size: 2rem; /* Tamanho da fonte ajustado */
    font-weight: 800;
    color: #e04178; /* Cor do título */
    margin-left: 5%; /* Remove qualquer margem que possa afetar a posição */
	margin-bottom: 0;
}

.botao-confira {
    display: inline-flex;
    align-items: center;
    padding: 5px 5px;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    
    margin-top: 20px;
	font-size: 0.8rem;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transições suaves para as cores */
}

.botao-confira:hover {
    background-color: #fff;
    color: #e04178;
}

.seta-icon {
    margin-left: 10px;
    height: 23px;
    font-weight: bold;
    transition: filter 0.6s ease; /* Transição suave para o filtro */
}

.botao-confira:hover .seta-icon {
    filter: invert(32%) sepia(100%) hue-rotate(327deg) saturate(1000%); /* Ajusta a cor ao passar o mouse */
}


/* Estilos para a seção Confira */
/* Estilos para a seção Confira */
.confira {
    background-color: #f0f0f0;
    padding: 20px;

}

.wrapper-confira {
    width: 90%;
    margin:0;
	
}

.wrapper-confira h2 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #18003f;
    margin-top: 60px;
	margin-left: 5%
	
}

.wrapper-confira span {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #0d0232;
   margin-left: 5%;
    display: block;
    margin-bottom: 10px;
}

/* Estilos para os projetos */
.projetos {
    flex-direction: column; /* Altera a direção do layout para coluna */
    align-items: center;
    padding: 0;
}

.projeto {
    display: flex;
    align-items: center;
    width: 100%;
}

.video-projeto {
    width: 90%;
  
    margin-bottom: 20px; /* Adiciona espaço entre o vídeo e o texto */
    margin-left: 5%;
	border-radius: 30px;
	margin-top: 30px;
}

/* Estilos para a descrição do projeto */
.descricao-projeto {
    width: 80%;

    padding: 0 10%; /* Adiciona padding lateral ao texto */
}

.descricao-projeto h3 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-size: 1.3rem;
    line-height: 26px;
    font-weight: bold;
    margin-bottom: 20px;
	color: white;
	margin-top: 10px;
}

.descricao-projeto p {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 0.9px;
    font-weight: 100;
    font-size: 0.8rem;
    line-height: 1.6;
	color: white;
}



/* Ajusta a posição do formulário e adiciona margem direita para espaço */
.orcamento-form {
    width: 90%; /* Define a largura do formulário */
    margin: 70px auto 0; /* Centraliza horizontalmente e adiciona margem superior */
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    padding: 20px;
    background-color: #090126; /* Cor de fundo suave */    
    border-radius: 30px;
    margin-top: 100px;
}

/* Ajusta a posição das informações de contato */
.orcamento-info {
    width: 30%;
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os itens à esquerda */
    margin-top: 70px; /* Espaçamento superior ajustado para estar próximo ao formulário */
}

/* Estilos de cada item de contato */
.orcamento-info .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Estilos dos ícones */
.contact-icon {
    width: 24px; /* Ajuste o tamanho do ícone conforme necessário */
    height: 24px;
    margin-right: 10px; /* Espaçamento entre ícone e texto */
}

/* Estilos dos links */
.contact-link {
    color: white;
    text-decoration: none;
}

.contact-link:hover {
    color: #e04178; /* Cor rosa ao passar o mouse */
}

/* Estilos do formulário */
.orcamento-form h2 {
    margin-bottom: 20px;
    font-size: 1rem;
}

.orcamento-form label {
    display: block;
    margin-bottom: 5px;
	font-size: 0.8rem;
}

.orcamento-form input,
.orcamento-form textarea {
    width: calc(100% - 20px); /* Ajuste a largura dos campos de entrada */
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #444; /* Adicione uma borda clara para destacar o campo */
    border-radius: 30px;
    background-color: #4E4863; /* Cor de fundo escura */
    color: white; /* Cor do texto */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.6rem; /* Ajuste o tamanho da fonte conforme necessário */
    opacity: 1; /* Defina a opacidade para 1 (totalmente opaco) */
}

.orcamento-form textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
    height: 100px; /* Altura inicial do campo de texto, ajuste conforme necessário */
	 border-radius: 10px;
}

.orcamento-form input::placeholder,
.orcamento-form textarea::placeholder {
    color: #bbb; /* Cor do texto do placeholder para contraste */
}

.orcamento-form input:focus,
.orcamento-form textarea:focus {
    border-color: #e04178; /* Cor da borda ao focar no campo */
    outline: none; /* Remove o contorno padrão */
}

.orcamento-form button {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    background-color: #e04178; /* Cor de fundo padrão */
    color: white; /* Cor do texto padrão */
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s; /* Adiciona uma transição suave */
}

.orcamento-form button:hover {
    background-color: white; /* Cor de fundo ao passar o mouse */
    color: #e04178; /* Cor do texto ao passar o mouse */  
}

/* Botão Voltar */
.botao-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 0.8rem;
    margin-top: 30px;
}

.botao-voltar:hover {
    background-color: #fff;
    color: #e04178;
}

.icone-voltar {
    margin-right: 10px;
}

	

/*FINAL PÁGINA*/	/*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL PÁGINA*//*FINAL 
/* Seção de contato */
.contact {
    width: 100%;
    height: auto; /* Ajuste a altura para se adaptar ao conteúdo */
    padding: 40px;
    margin-top: 80px;
    background-color: #090126;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Alinha itens na coluna para colocar o formulário e informações de contato um abaixo do outro */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
}

/* Ajusta a posição do formulário e adiciona margem direita para espaço */
.contact-form {
	width: 100%;
    margin-bottom: 40px; /* Espaço entre o formulário e as informações de contato */
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.13); /* Cor preta com transparência */
    border-radius: 30px;
}

/* Ajusta a posição das informações de contato */
.contact-info {
    width: 90%; /* Ajuste a largura das informações de contato conforme necessário */
    color: white;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os itens à esquerda */
}

/* Estilos de cada item de contato */
.contact-info .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Estilos dos ícones */
.contact-icon {
    width: 24px; /* Ajuste o tamanho do ícone conforme necessário */
    height: 24px;
    margin-right: 10px; /* Espaçamento entre ícone e texto */
}

/* Estilos dos links */
.contact-link {
    color: white;
    text-decoration: none;
	font-size: 0.8rem;
}

.contact-item h1 {
   font-size: 1rem;
}
		
		
.contact-link:hover {
    color: #e04178; /* Cor rosa ao passar o mouse */
}

/* Estilos do formulário */
.contact-form h2 {
    margin-bottom: 20px;
    font-size: 1rem;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.8rem;
}


.contact-form input {
    width: calc(100% - 20px); /* Ajuste a largura dos campos de entrada */
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #444; /* Adicione uma borda clara para destacar o campo */
    border-radius: 30px;
    background-color: #4E4863; /* Cor de fundo escura */
    color: white; /* Cor do texto rosa */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8rem; /* Ajuste o tamanho da fonte conforme necessário */
    opacity: 1; /* Defina a opacidade para 1 (totalmente opaco) */
}

.contact-form input::placeholder {
    color: #bbb; /* Cor do texto do placeholder para contraste */
}

.contact-form input:focus {
    border-color: #e04178; /* Cor da borda ao focar no campo */
    outline: none; /* Remove o contorno padrão */
}

.contact-form button {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 5px 10px; /* Ajuste o padding conforme necessário */
    border: none;
    border-radius: 30px;
    background-color: #e04178; /* Cor de fundo padrão */
    color: white; /* Cor do texto padrão */
    cursor: pointer;
    font-weight: 400;
    transition: background-color 0.3s, color 0.3s; /* Adiciona uma transição suave */
    font-size: 0.8rem; /* Ajuste o tamanho da fonte conforme necessário */
}

.contact-form button:hover {
    background-color: white; /* Cor de fundo ao passar o mouse */
    color: #e04178; /* Cor do texto ao passar o mouse */
}


/* Estilo para o rodapé */
footer {
    display: flex;
    flex-direction: column; /* Alinha o conteúdo em coluna */
    align-items: center; /* Centraliza o menu horizontalmente */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.30); /* Cor preta com transparência */
    color: #ffffff; /* Cor da fonte branca */
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
}

footer .footer-content {
  
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 30px; /* Espaçamento abaixo do conteúdo */
    margin-top: 20px;
}

footer .logo {
    width: 30%;
    height: auto;
    position: absolute;
    left: 24%;
    margin-left: 40px;
}

/* Centraliza o menu */
footer .footer-menu {
    display: flex;
    justify-content: center; /* Centraliza o menu */
    gap: 15px;
    flex-grow: 1; /* Permite que o menu ocupe o espaço disponível */
    margin-top: 70px;
    margin-right: 0; /* Remove a margem direita para centralizar corretamente */
}


/* Estilos para os links do menu */
footer .footer-menu a {
    color: #ffffff; /* Fonte branca para os links */
    font-size: 0.9rem;
    text-decoration: none;
}

/* Estilos para o hover nos links do menu */
footer .footer-menu a:hover {
    color: #e04178; /* Cor rosa ao passar o mouse */
}

/* Texto centralizado abaixo do menu */
footer .center-text {
    font-size: 0.8rem;
    opacity: 0.2;
    text-align: center;
    width: 100%; /* Faz com que o texto ocupe toda a largura disponível */
    color: white;
	}



/* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos *//* Estilo para a nova página de artigos */
.artigos {
    background-color: #090126;
    padding: 20px; /* Adiciona um pouco de espaçamento interno */
}

.artigos h1 {
    font-size: 2rem; /* Reduz o tamanho da fonte para melhor ajuste */
    color: #e04178;
    margin-right: 50%;
	
}

.wrapper-artigos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Permite que os itens se movam para a próxima linha, se necessário */
    gap: 1rem; /* Reduz o espaçamento entre os itens */
    justify-content: center;
    margin: 0 auto; /* Centraliza o conteúdo */
    max-width: 800px; /* Define uma largura máxima para o wrapper */
    padding: 0 20px; /* Adiciona espaçamento interno */
}

.artigo {
    display: flex; /* Permite o layout flexível dentro do artigo */
    flex-direction: row; /* Organiza a imagem e o conteúdo horizontalmente */
    background-color: #4E4863;
    border-radius: 15px; /* Menor border-radius para um visual mais sutil */
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    padding: 0.5rem; /* Reduz o padding para menos espaçamento interno */
    margin: 0.5rem auto; /* Reduz a margem para menos espaçamento entre os artigos */
    max-width: 500px; /* Define uma largura máxima menor para os artigos */
    box-sizing: border-box;
    transition: transform 0.3s, box-shadow 0.3s;
}

.artigo img {
    width: 40%; /* Ajusta a largura da imagem para 35% do artigo */
    height: 200px; /* Altura fixa menor para as imagens */
    border-radius: 15px; /* Aplica um border-radius menor */
    object-fit: cover; /* Faz a imagem cobrir o elemento sem distorção */
    transition: transform 0.3s ease; /* Suaviza a transição do aumento */
}

.artigos-lista {
    display: flex;
    flex-direction: column; /* Organiza os artigos verticalmente */
    gap: 0.5rem; /* Reduz o espaço entre os artigos */
}


.artigo-conteudo {
    padding-left: 1rem; /* Adiciona espaçamento entre a imagem e o conteúdo */
    display: flex;
    flex-direction: column; /* Organiza o título e o texto verticalmente */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
}

.artigo h2 {
    font-size: 0.9rem; /* Ajusta o tamanho do título */
    color: white;
    margin: 0; /* Remove margens para melhor controle do espaçamento */
}

.artigo p {
   
    color: white;
    margin-top: 0.5rem; /* Adiciona um pequeno espaço acima do parágrafo */
	        font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
        letter-spacing: 0.9px;
        line-height: 1.6;
        font-size: 0.8rem;
}

.btn-leia-mais-index {
    display: inline-block; /* Garante que o botão não ocupe a largura total */
    margin: 10px auto; /* Centraliza o botão */
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 33px;
    transition: background-color 0.3s;
    text-align: center; /* Centraliza o texto no botão */
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    width: fit-content; /* O botão ajusta seu tamanho ao conteúdo */
    min-width: 80px; /* Define uma largura mínima para o botão */
	        margin-left: 1%;
	        font-size: 0.8rem;
	padding: 5px 10px;
}

.btn-leia-mais-index:hover {
    background-color: white;
    color: #e04178;
}


	
/* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações *//* Estilos para a página de publicações */
.topo-publicacoes {
    color: #FFFFFF;
    padding: 1rem;
    text-align: center;
}

.topo-publicacoes h1 {
    color: #e04178;
}

/* Corpo das publicações */
.corpo-publicacoes {
    background-color: #FFFFFF;
    padding: 0.5rem;
}

.lista-publicacoes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.publicacao-item {
    align-items: center;
    gap: 1rem;
    background-color: #F0F0F0;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
}

.publicacao-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px; /* Aplica o border-radius na imagem */
}

.conteudo-publicacao {
    flex: 1;
}

.conteudo-publicacao h2 {
    font-size: 1rem;
}

.resumo-publicacao {
    margin: 0.5rem 0;
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.resumo-publicacao p {
    margin: 0.5rem 0;
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.resumo-publicacao a {
   
    text-decoration: none;
}

.resumo-publicacao a:hover {
    text-decoration: underline;
}

.publicacao-completa p {
    margin: 0.5rem 0;
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.publicacao-completa ul {
    padding-left: 1.5rem;
}

.publicacao-completa li {
    margin: 0.5rem 0;
    letter-spacing: 0.9px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Esconde o conteúdo completo inicialmente */
.publicacao-completa {
    display: none;
}

.btn-leia-mais {
    display: inline-block; /* Garante que o botão não ocupe a largura total */
    margin: 10px auto; /* Centraliza o botão */
    padding: 1px 5px; /* Ajusta o padding */
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 33px;
    transition: background-color 0.3s;
    text-align: center; /* Centraliza o texto no botão */
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    width: fit-content; /* O botão ajusta seu tamanho ao conteúdo */
    min-width: 80px; /* Define uma largura mínima para o botão */
}

.btn-leia-mais:hover {
    background-color: white;
    color: #e04178;
}

.btn-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e04178;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    margin: 100px auto;
    width: 90px;
    height: 30px;
}

.btn-voltar:hover {
    background-color: white;
    color: #e04178;
}

.rodape-publicacoes {
    background-color: #0d0232;
}


	/* Estilização do botão do WhatsApp */
.whatsapp-button {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000; /* Garante que o botão fique acima de outros elementos */
    transition: transform 0.3s ease; /* Transição suave para o efeito hover */
}

.whatsapp-button img {
    width: 40px; /* Tamanho do ícone */
    height: auto;
    border-radius: 50%;
}

.whatsapp-button:hover {
    transform: scale(1.1); /* Aumenta o botão suavemente no hover */
}		
		
		

/* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais *//* Estilos para a seção de Redes Sociais */
.redes-sociais {
    text-align: center;
    padding: 20px;
}

.redes-sociais h2 {
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    color: white;
    font-size: 0.8rem;
    font-weight: 100;
    letter-spacing: 0.9px;
}

.social-icon {
    display: inline-block;
    margin: 0 10px;
    font-size: 1.4rem; /* Diminuído de 2rem para 1.5rem */
    color: white;
    text-decoration: none;
}

.social-icon:hover {
    color: #e04178; /* Cor de hover se desejado */
}

		

/*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*//*-----FIM SMARTPHONE-----*/