* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
}

body, html {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: #ece9e6;
}

header {
  display: flex;
  justify-content: space-between; /* Espaça os elementos filho uniformemente */
  align-items: center; /* Alinha os elementos filho verticalmente ao centro */
  padding: 10px 20px; /* Adiciona padding para não colar nos cantos */
  background: #f8f9fa;
  border-bottom: 1px solid #eaeaea;
}

.header-nav nav {
  display: flex;
}
.container {
    width: 100%;
    max-width: 800px;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: space-around; /* Modificado para distribuir espaço uniformemente */
    padding: 20px;
    background: #ece9e6;
}
.testimonials, .gallery, .blog {
  margin: 20px 0; /* Adiciona margem vertical para separação */
  padding: 20px; /* Espaçamento interno */
  background-color: #ffffff; /* Fundo branco para destacar as seções */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra para efeito 3D sutil */
  width: 90%; /* Largura controlada para alinhamento visual */
  border-radius: 10px; /* Bordas arredondadas */
}

.blog div {
  margin-bottom: 40px; /* Espaço entre cada bloco de artigo */
  border-bottom: 1px solid #ccc; /* Linha sutil para separar os artigos */
  padding-bottom: 20px; /* Espaço antes da linha divisória */
}

.blog h3 {
  color: #333; /* Cor mais escura para o título do artigo */
  margin-bottom: 10px; /* Espaço abaixo do título do artigo */
}

.blog div:last-child {
  border-bottom: none; /* Remove a borda do último artigo */
  margin-bottom: 0; /* Remove a margem do último artigo */
}

.blog p {
  text-align: justify; /* Justifica o texto para melhor leitura */
  line-height: 1.6; /* Espaçamento de linha para melhorar a legibilidade */
  margin-bottom: 10px; /* Espaço antes do link "Leia mais" */
}

.blog a {
  color: #0056b3; /* Cor azul para links, proporcionando destaque */
  text-decoration: none; /* Remove o sublinhado do link */
}

.blog a:hover {
  text-decoration: underline; /* Adiciona sublinhado ao passar o mouse para melhor interatividade */
}

footer {
  background: #f1f1f1; /* Fundo para o rodapé para distinção */
  padding: 1rem 0;
  text-align: center; /* Centraliza o conteúdo do rodapé */
  border-top: 1px solid #ddd; /* Bordar no topo para separar do conteúdo */
}

.logo img {
  width: 80px;  /* Define a largura da logo */
  height: 80px; /* Define a altura da logo para ser igual à largura */
  border-radius: 50%; /* Cria o efeito circular */
  object-fit: cover; /* Garante que a logo cubra todo o espaço sem ser distorcida */
  border: 3px solid #FFFFFF; /* Adiciona uma borda branca ao redor da logo */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil para destaque */
}
.logo {
  flex-grow: 0; /* Não permite que a logo cresça */
  margin-right: auto; /* Remove qualquer espaço extra à direita da logo */
}
.navbar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar a:hover,
.navbar a:focus {
    color: #0056b3;
}

.navbar li{
  margin: 0 20px;
}
.nome{
  font-size: 2.5em; /* Aumenta o tamanho da fonte para destaque na apresentação */
}
.nome, .formacao, .title-apresent, .texto-apresenta, .frase-fim, .endereco {
  text-align: center;
  width: 90%; /* Assegura que não ocupem a largura total */
  margin-bottom: 20px; /* Aumenta o espaçamento entre elementos */
}

.email .texto-email {
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: bold; /* Garante que a fonte seja bold */
  color: white; /* Texto branco para melhor contraste */
  background-color: #4a90e2; /* Cor azul vívida */
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4); /* Sombra para efeito 3D */
  transition: all 0.3s ease; /* Transição suave para hover e foco */
  display: inline-block; /* Garante que o padding e border-radius funcionem corretamente */
}

.email .texto-email:hover, .email .texto-email:focus {
  background-color: #357abd; /* Cor mais escura ao passar o mouse ou focar */
  box-shadow: 0 8px 25px rgba(53, 122, 189, 0.5); /* Sombra maior para efeito elevado */
  transform: translateY(-2px); /* Leve elevação ao passar o mouse */
}

.email .texto-email:active {
  transform: translateY(1px); /* Efeito de pressionar o botão */
  box-shadow: 0 3px 5px rgba(53, 122, 189, 0.6); /* Sombra mais suave para efeito de pressão */
}
.email, .whatsapp-link {
  width: 100%; /* Ajusta a largura para evitar sobreposição */
  display: flex;
  justify-content: center; /* Centraliza os links */
  margin-bottom: 30px; /* Aumenta o espaçamento */
}
.email .texto-email:hover {
  background-color: #357abd; /* Darker blue on hover */
}
.whatsapp-link img {
  width: 80px; /* Tamanho adequado para visibilidade e acesso */
  height: 80px;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.zap {
  position: fixed;
  right: 20px; /* Mantém o ícone 20px distante do lado direito da tela */
  top: 50%; /* Posiciona o topo do ícone no meio vertical da tela */
  transform: translateY(-50%); /* Desloca o ícone para cima em 50% de sua altura, centralizando-o verticalmente */
  z-index: 1000; /* Garante que o ícone fique sobre outros elementos da página */
}

.zap img {
  width: 90px;
  height: 90px;
  opacity: 0.4; /* 50% de transparência */
  transition: opacity 0.3s ease; /* Suaviza a transição de opacidade */
  }

  .zap img:hover {
    opacity: 1.0; /* Sem transparência ao passar o mouse */
}

@media (max-width: 768px) {
  .container, header, footer {
      padding: 10px;
  }

  .zap {
      right: 10px;
      bottom: 10px;
      width: 50px; /* Mais ajustes para consistência */
      height: 50px;
  }

  .zap img {
      width: 50px;
      height: 50px;
  }

  .nome, .formacao, .title-apresent, .texto-apresenta, .frase-fim, .endereco {
      font-size: 1.1rem; /* Ajuste uniforme do tamanho da fonte para telas menores */
  }
  .nome {
    font-size: 2rem; /* Ajuste uniforme do tamanho da fonte para telas menores */
}

  .texto-email {
      font-size: 0.9rem;
      padding: 8px 12px;
  }
}

@media (max-width: 768px) {
  .zap {
      right: 10px; /* Menos espaço nas laterais em telas menores */
      bottom: 10px; /* Menos espaço no fundo em telas menores */
      width: 60px; /* Tamanho menor do ícone em telas pequenas */
      height: 60px; /* Tamanho menor do ícone em telas pequenas */
  }

  .zap img {
      width: 60px; /* Redimensiona a imagem para se ajustar ao novo tamanho */
      height: 60px;
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column; /* Empilha os elementos verticalmente em telas menores */
    align-items: flex-start;
}

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar li {
      padding: 10px 0;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.container > * { /* Aplica animação a todos os elementos diretos dentro de .container */
  animation: fadeIn 1s ease-in-out;
}

.social-media a {
  margin: 0 10px; /* Espaçamento horizontal entre ícones */
  color: #333; /* Cor mais escura para os ícones */
  font-size: 1.5rem; /* Tamanho maior para ícones */
}

.nav {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.collapse {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* Limita a exibição a 2 linhas */
  height: auto; /* Altura automática inicial */
  transition: all 0.3s ease; /* Transição suave para expansão/recolhimento */
}
.expanded {
  -webkit-line-clamp: none; /* Remove o limite de linhas quando expandido */
}

html {
  scroll-behavior: smooth; /* Adiciona uma animação de scroll suave para todas as âncoras */
}

.footer-home {
  text-align: center; /* Centraliza o link no footer */
  margin-top: 40px; /* Adiciona um espaço acima do link */
  margin-bottom: 20px;
}

.home-link {
  padding: 10px 20px;
  background-color: #4a90e2; /* Um azul claro para o fundo do botão */
  color: white; /* Texto branco para contraste */
  text-decoration: none; /* Remove o sublinhado do link */
  border-radius: 5px; /* Bordas arredondadas para um visual mais suave */
  font-weight: bold; /* Torna o texto do botão mais proeminente */
  transition: background-color 0.3s ease; /* Suaviza a transição de cor */
}

.home-link:hover {
  background-color: #357abd; /* Escurece o botão ao passar o mouse */
}