/* Cores */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 background-color: #fff; /* Branco */        
}

/* Layout */
header {
 background-color: #00246b; /* Azul forte */
 height: 20px; /* Altura da faixa azul forte */
}

#area-logo {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px;
}

.titulo-servicos {
 text-align: center;
 color: rgba(0, 0, 0, 0.9); /* Cor preta com 90% de opacidade */
 text-shadow: 1px 1px 2px rgba(128, 128, 128, 0.5); /* Sombra cinza */
 font-family: Arial, sans-serif; /* Fonte Arial */
 font-weight: bold; /* Negrito */
 font-size: 24px; /* Tamanho da fonte */
}


/* Estilos para a classe "slogan" */

.slogan {
 background-image: url("imagens/fundo_02_caixa03.webp");
 background-size: cover; /* Faz a imagem cobrir toda a área */
 background-repeat: no-repeat; /* Impede a repetição da imagem */
 background-position: center; /* Alinha o centro da imagem com o centro da div */
  justify-content: center; /* Centraliza horizontalmente */
 align-items: center; /* Centraliza verticalmente */
 position: relative;
 width: 100%;
 overflow: hidden; /* Para a imagem de fundo não esticar além do container */
 text-align: center; /* Alinhar o texto ao centro */
}


/* Estilos para o texto */
.slogan p {
  color: rgb(230, 230, 230); /* Cor do texto */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px; /* Tamanho da fonte padrão */
  letter-spacing: 1px; /* Adiciona espaçamento entre as letras */
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* Sombra de cor branca escura */  
  line-height: 1.5; /* Altura da linha */
  padding: 20px; /* Espaçamento interno */
  position: relative; /* Para permitir o posicionamento absoluto */
  z-index: 1; /* Colocar o texto sobre a imagem de fundo */
  margin: 0; /* Remover margens para evitar espaçamento extra */
}

/* Estilos para o nome do slogan */
.nome-slogan {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold';
  font-size: 28px; /* Tamanho da fonte padrão */
  color: rgb(255, 25, 25); /* Cor branca */
  letter-spacing: 2px; /* Espaçamento entre as letras */
}

/* Estilos para o título do slogan */
.titulo-slogan {
  font-size: 24px; /* Tamanho da fonte */
  color: rgb(230, 230, 230); /* Cor vermelha */
}

.lista_servicos {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.menu-figuras {
 text-align: center;
 margin: 10px;
}

.menu-figuras h3 {
 color: red;
 text-decoration: none;
}

.menu-figuras a {
 text-decoration: none;
}
.clearfix::after {
 content: "";
 display: table;
 clear: both;
}

.div-boneco01 {
 display: flex;
 align-items: stretch; /* Estica as sub-divs para igualar a altura */
 background: linear-gradient(to right, #abc4f8, #f1f1f1); /* Degrade horizontal */
 border-top-left-radius: 80px; /* Arredonda o canto superior esquerdo */
 border-bottom-right-radius: 80px;  /* Arredonda o canto inferior direito */
 /*border-top-right-radius: 80px; */ /* Arredonda o canto superior esquerdo */
 /*border-bottom-left-radius: 80px; */ /* Arredonda o canto inferior direito */
}

.sub-div {
 flex: 1; /* As sub-divs ocupam a mesma largura */
 padding: 20px; /* Espaçamento interno */
}

.imagem-avatar {
 display: flex; /* Torna o contêiner um flex container */
 justify-content: center; /* Centraliza horizontalmente o conteúdo */
 align-items: center; /* Centraliza verticalmente o conteúdo */
 max-width: 100%; /* Garante que a largura da imagem não ultrapasse o contêiner */
 max-height: 100%; /* Garante que a altura da imagem não ultrapasse o contêiner */
}

.imagem-avatar img {
 max-width: 100%; /* Garante que a largura da imagem não ultrapasse o contêiner */
 max-height: 100%; /* Garante que a altura da imagem não ultrapasse o contêiner */
 width: auto; /* Permite que a largura da imagem se ajuste automaticamente */
 height: auto; /* Permite que a altura da imagem se ajuste automaticamente */
 border-top-left-radius: 20%;
 border-bottom-right-radius: 20%;
 box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra preta */
}

.mensagem-avatar {
 display: flex; /* Torna o contêiner um flex container */
 justify-content: center; /* Centraliza horizontalmente o conteúdo */
 align-items: center; /* Centraliza verticalmente o conteúdo */
 text-align: center; /* Alinha o texto ao centro */
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-size: 18px; /* Tamanho da fonte padrão */
 color: rgb(0, 0, 0); /* Cor branca */
 text-shadow: 1px 1px 2px rgba(128, 128, 128, 0.5); /* Sombra cinza */
}
.titulo-avatar {
 font-family: 'Madimi One', sans-serif; /* Fonte "Madimi One" */
 font-size: 22px; /* Tamanho da fonte padrão */
 color: rgb(218, 0, 0); /* Cor vermelha */
 text-align: center; /* Centraliza o título */
 margin-bottom: 10px; /* Margem inferior para separar o título dos itens de serviço */
}

.lista-servicos {
 list-style-type: none; /* Remove os marcadores padrão da lista */
 padding-left: 0; /* Remove o recuo padrão da lista */
}

.lista-servicos li::before {
 content: "•"; /* Adiciona uma bolinha vermelha usando o caractere do ponto */
 color: rgb(218, 0, 0); /* Cor vermelha */
 margin-right: 5px; /* Margem à direita para separar a bolinha do texto */
}

.descricao-servicos {
 background: linear-gradient(to right, #edf3f3, #9dbea8); /* Degrade horizontal */
 text-align: center;
 
}

.destino-servicos h2 {
 color: #f00; /* Cor vermelha para o h2 */
 text-shadow: 3px 2px 3px rgba(36, 36, 36, 0.5); /* Sombra cinza */
}

.destino-servicos p {
 color: #000; /* Cor preta para o p */
}

.imagens-servicos {
 text-align: center; /* Centraliza as imagens horizontalmente */
}

.imagens-servicos img {
 /*border-radius: 20%;  Cantos arredondados em 20% */
 border-top-left-radius: 20%; /* Apenas o canto superior esquerdo arredondado */
 box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.4); /* Sombra */
 margin: 10px; /* Adiciona um espaçamento de 10 pixels entre as imagens */
}

 /* Estilo da bolinha vermelha */
 .destino-servicos ul {
  list-style-type: none;
  padding: 0;
  text-align: left; /* Alinha o texto da lista à esquerda */
  display: inline-block; /* Permite que a lista seja centralizada */
}

.destino-servicos ul li::before {
  content: "\2022"; /* Código unicode para uma bolinha */
  color: red; /* Cor vermelha */
  margin-right: 5px; /* Espaço entre a bolinha e o texto */
}

.organizacao-empresa {
 background-image: url("imagens/equipe02.webp");
 background-size: cover; /* Faz a imagem cobrir toda a área */
 background-repeat: no-repeat; /* Impede a repetição da imagem */
 background-position: center; /* Alinha o centro da imagem com o centro da div */
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
.coluna {
 width: 48%; /* Ajuste conforme necessário */
}

.icone-frase {
 margin-bottom: 20px;
 display: flex;
 align-items: center;
 color: white;
 font-family: Arial, sans-serif;
 font-size: 18px;
}

.icone-frase img {
 display: block;
 margin: 0 auto;
 width: 50px;
 height: 50px;
 margin-right: 10px;
 fill: white;
}



.meusprodutos {
 border-radius: 50%; /* Imagens redondas */
 box-shadow: -35px -35px 35px rgba(0, 0, 0, 0.5); /* Sombra destacada */
 padding: 10px; /* Adiciona 10px de espaço ao redor da imagem */
 animation: zoomProdutos 5s infinite alternate; /* Aplica a animação "zoom" de forma contínua */
}

/* Defina a animação @keyframes */
@keyframes slideTextProdutos {
 0% {
     transform: translateX(0); /* Começa na posição inicial */
 }
 100% {
     transform: translateX(50px); /* Desliza para a direita */
 }
}

@keyframes zoomProdutos {
 0% {
     transform: scale(1);
 }
 50% {
     transform: scale(1.05); /* Aumenta o tamanho em 5% */
 }
 100% {
     transform: scale(1);
 }
}

#logo {
 width:auto;
}

#contato {
 color: #01201a; /* Verde */
 font-size: 20px; /* Tamanho da fonte aumentado para 18px */
 text-align: center;
}

#contato p {
 font-weight: bold;

}

#telefone {
 color: #c12f2f; /* Vermelho */
 text-decoration: none; /* Remove o sublinhado do link */    
 font-size: 24px; /* Tamanho da fonte aumentado para 24px */    
 text-align: center;
 font-family:Arial, Helvetica, sans-serif; 
 font-weight: bold; /* Negrito */
}

#telefone .ddd {
 font-size: 18px; /* Define o tamanho da fonte para o DDD como 18px */
 color: inherit; /* Herda a cor do elemento pai (vermelho) */
}

#telefone a {
 text-decoration: none; /* Remove o sublinhado do link */
 color: #c12f2f; /* Mantém a cor vermelha mesmo após o clique */
}

#telefone a {
 text-decoration: none;
}

#telefone span { /* Style the DDD portion */
 font-size: 16px; /* Tamanho da fonte do DDD reduzido para 18px */
}

main {
 display: flex;
 flex-direction: column;
}

section {
 padding: 20px;
}

footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px;
}

.footer-content {
 position: relative;
}

#copyright {
 color: rgb(0, 0, 0); /* Define a cor do texto como branca */
 text-align: left;
 position: absolute;
 bottom: 0;
 width: 100%;
}

.atendemos h3 {
 color: rgb(0, 0, 0); /* Define a cor do texto como branca */
 font-family: 'Madimi One', sans-serif; /* Fonte "Madimi One" */
 letter-spacing: 1px; /* Adiciona espaçamento entre as letras */
 font-size: 22px; /* Tamanho da fonte padrão */
  text-shadow: 2px 2px 4px rgba(221, 221, 221, 0.5); /* Adiciona sombra ao texto */
 text-align: center; /* Centraliza o texto horizontalmente */
}


#redes-sociais {
 text-align: right;

}

#redes-sociais a {
 display: inline-block; /* Para que o padding funcione corretamente */
 padding: 10px; /* Adiciona um preenchimento ao redor dos links */
}

#redes-sociais img {
 width: 30px;
 margin-left: 10px;
}

.toTopBtn{
 position: fixed;
 bottom: 140px;
 right: 20px;
 z-index: 1000;
 display: inline-block; /* Para que o padding funcione corretamente */
 padding: 10px; /* Adiciona um preenchimento ao redor do link */
}

.toTopBtn:hover {
 cursor: pointer; /* Muda o cursor quando passa o mouse sobre o botão */
}


.ligar-button {
 position: fixed;
 bottom: 20px;
 left: 20px;
 z-index: 1000;
}

.ligar-button img {
 width: 60px; /* Largura da imagem */
 height: auto; /* Altura ajustada automaticamente */
 border-radius: 50%; /* Deixa a imagem circular */
 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Adiciona sombra à imagem */
}

.whatsapp-button {
 position: fixed;
 bottom: 20px;
 right: 20px;
 z-index: 1000;
}

.whatsapp-button img {
 width: 60px; /* Largura da imagem */
 height: auto; /* Altura ajustada automaticamente */
 border-radius: 50%; /* Deixa a imagem circular */
 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Adiciona sombra à imagem */
}


/* Media queries */
@media (max-width: 768px) {
 #area-logo {
     flex-direction: column;
     align-items: center;
     background-size: 100% 276px; /* Ajusta a largura para 100% e a altura para 180px */        
 }

 #logo {
     width:auto; /* O logo nunca será maior que a largura da tela */
 }

 #contato, #telefone {
     margin-top: 10px;
     text-align: center;
     text-decoration: none; /* Remove o sublinhado do link */            
     
 }
 
 #telefone a {
     text-decoration: none; /* Remove o sublinhado do link */
     color: #c12f2f; /* Mantém a cor vermelha mesmo após o clique */
 }    
}


#rodape {
 display: flex; /* Tornando o rodapé um flex container */
 flex-direction: column; /* Definindo a direção da flexão como coluna */
 width: 100%; /* Ocupar toda a largura da tela */
 height: 100%; /* Ocupar toda a altura da tela */
}

#footer-superior {
 background-color: rgb(255, 255, 255); /* Cor de fundo da parte superior */
 flex-grow: 1; /* Permitindo que a div footer-superior cresça para preencher o espaço disponível */
}

#footer-inferior {
 background-color: rgb(255, 255, 255); /* Cor de fundo da parte inferior */
 height: 70px; /* Altura fixa da parte inferior */
 text-align: center; /* Centraliza o conteúdo horizontalmente */
 }

#footer-inferior p {
 
 text-align: center; /* Centraliza o parágrafo */
}

.email-link a {
 font-size: 18px;
  padding: 10px; /* Aumenta o padding para expandir a área de clique */
 text-decoration: none; /* Remove o sublinhado */
 color: black; /* Altera a cor do link para preto */
}

#footer-inferior .top-link {
  display: inline-block; /* Para que o padding funcione corretamente */
 padding: 10px; /* Adiciona um preenchimento ao redor do link */
}

.logo_footer {
 padding: 10px; /* Aumenta o padding para expandir a área de clique */
 width: 200px; /* Define a largura da imagem como 250 pixels */
 display: block; /* Faz com que a imagem do logotipo seja exibida como um bloco para alinhar corretamente */
 margin: 0 auto; /* Centraliza a imagem horizontalmente */
}
}