/* Reset básico e estilos gerais */
html {
  height: 100%;
  width: 100%;
  margin: 0;
  box-sizing: border-box; /* Importante para o box model */
}

*, *:before, *:after {  /* Aplica box-sizing a todos os elementos */
  box-sizing: inherit;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #181818;
  display: flex;          /* Torna o body um flex container */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center;    /* Centraliza verticalmente *se* o body tiver altura definida */
  min-height: 100vh;       /* Garante que o body ocupa pelo menos a altura da viewport */
  width: 100%;
  margin: 0;             /* Remove margens padrão do body */
  color: #E9E9E9;       /* Boa prática: definir cor padrão do texto no body */
}

.wrapper {  
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* O wrapper agora ocupa toda a altura */
  max-width: 94%; /* Mantém a largura máxima */
  width: 100%;       /* e largura da viewport */
  margin: 0 auto;    /* Centraliza o wrapper horizontalmente */
  padding: 10px;     /* Espaçamento interno para evitar que o conteúdo toque nas bordas */
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;  /* Centraliza verticalmente os itens da navbar */
  padding: 2rem 0;    /* Espaçamento superior e inferior na navbar */
  /* border: 1px solid red;  Removido borders para debug */
}

.logo {
  width: 7.03794rem;
  height: 1.05906rem;
  /*  Removido height auto, pois você já definiu as dimensões.  */
}

.connect {
  display: flex;
  align-items: center;
  gap: 0.8rem;          /* Espaço entre o texto e os ícones */
 /* border: 1px solid purple; */
}

.connect span { /* Estiliza o span, já que não é um link */
  color: #E9E9E9;
  font-size: 0.875rem;
  font-weight: 600;
}

.social {
  display: flex;
  gap: 0.5rem;
  /* border: 1px solid green; */
}

.socialLogo {
  width: 20px;
  height: 20px;
  fill: #7D7D7D;  /* Cor inicial dos ícones */
  transition: fill 0.3s ease; /* Transição suave na mudança de cor */
  /* border: 1px solid red; */
  display: flex; /*Isso garante que o SVG ocupe o espaço definido, sem surpresas*/
  align-items: center;
  justify-content: center;
}

.socialLogo:hover {
  fill: white; /* Cor ao passar o mouse */
}
/* Centralização do conteúdo principal */

.container {
 /* border: 1px solid blue; */
  flex-grow: 1;        /* O container ocupa todo o espaço disponível */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Centraliza o conteúdo verticalmente */
}

#monkey-img {
  width: 3.09925rem; /* Mantém as dimensões originais */
  height: 3.36381rem;
  background-image: url('/img/monkey01.webp'); /* Imagem normal */
  background-size: cover; /* Garante que a imagem cubra o elemento */
  background-repeat: no-repeat; /* Evita repetição da imagem */
}

#monkey-img:hover {
  background-image: url('/img/monkey02.webp'); /* Imagem no hover */
}

h1 {
  color: #F8F8F8;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.5;  /* Ajuste para line-height */
  letter-spacing: 0.04rem;
  margin: 0;
  text-align: center; /*boa pratica ter isso em um reset global*/
}

/* Footer */
footer {
  display: flex;
  flex-direction: column;
 /* border: 1px solid green;*/
}

.divider {
  width: 100%;  /* Ou a largura desejada */
  height: 2px;
  background-color: #353535;
  margin: 0.4rem 0; /* Espaçamento (opcional) */
  border-radius: 50px;
  
}

.titleFooter {
  color: #F8F8F8;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: Poppins;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.00219rem;
  margin-bottom: 0.2rem;
}

.rights {
  margin-top: 0;
  color: #7D7D7D;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: Poppins;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
}

/* Media Query (Responsividade) */
@media (max-width: 600px) {  /* Você já tem essa media query, vamos modificá-la */

  .navbar {
      flex-direction: column; /* Muda a direção do flexbox para vertical */
      align-items: center;     /* Centraliza os itens horizontalmente */
      gap: 1rem;            /* Adiciona um espaço entre o logo e o "Let's connect" */
  }

  .logo {      
      height: 1.3rem;
      width: auto;
  }

  h1 {
      font-size: 1.5rem;
  }

  .social {
      gap: 0.7rem;
  }

  .connect {
      flex-direction: column; /* "Let's connect" e os ícones em coluna */
      text-align: center;      /* Centraliza o texto "Let's connect" */
      margin-top: 20px;
  }
}