body {
  margin: 0;
  padding: 0;
}

.container-top {
  text-align: center;
  background-color: #e4f9f5;
  padding-top: 80px; /* Adiciona um espaço de 30px DENTRO da div, no topo */
  padding-bottom: 120px; /* Faz o mesmo na parte de baixo, para ficar simétrico */
}

h1 {
  color: #66bfbf;
  font-size: 5.625rem;
  margin: 50px auto 0 auto;
  font-family: "Sacramento", cursive;
}

.container-top h2 {
  color: #66bfbf;
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
  font-weight: normal;
  padding-bottom: 10px;
}

.imagem-montanha {
  display: flex;
  justify-content: center;
  background-color: #e4f9f5;
}

.imagem-montanha img {
  height: 600px;
  width: 600px;
}

.profile {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10%;
  text-align: center;
}

.profile img {
  
  height: 200px;
  width: 200px;
  border-radius: 50%;
}

.into { 
  margin-top: 5%;
  width: 30%;
  
}


.skills {
  text-align: center; /* Centraliza o título principal "Linguagens que utilizo" */
  padding: 50px 0; /* Adiciona um respiro acima e abaixo da seção */
  width: 80%; /* Limita a largura da seção para não ficar muito esticada */
  margin: 60px auto; /* Centraliza a seção na página e adiciona espaço acima */
}

.skills h2 {
  /* Reutilize o estilo do seu h2 para manter a consistência */
  color: #66bfbf;
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
  font-weight: normal;
  margin-bottom: 50px; /* Espaço abaixo do título */
}

/* Container que vai alinhar os cards lado a lado */
.skills-container {
  display: flex; /* A MÁGICA DO FLEXBOX! */
  justify-content: center; /* Centraliza os cards */
  gap: 40px; /* Cria um espaço entre os cards */
  flex-wrap: wrap; /* Permite que os cards quebrem a linha em telas pequenas */
}

/* O estilo do Card */
.skill-card {
  background-color: #f8f9fa; /* Um cinza bem clarinho */
  border-radius: 10px; /* Bordas arredondadas */
  padding: 30px;
  width: 300px; /* Largura fixa para cada card */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
  text-align: left; /* Alinha o texto do card à esquerda */
}

.skill-card h3 {
  font-family: "Montserrat", sans-serif;
  color: #11999e;
  margin-bottom: 20px;
  text-align: center; /* Centraliza só o título do card */
}

/* Estilo da lista de habilidades */
.skill-card ul {
  list-style: none; /* REMOVE aquelas bolinhas desalinhadas */
  padding: 0;
}

.skill-card li {
  font-size: 1.1rem;
  padding: 10px 0; /* Espaçamento entre os itens da lista */
  display: flex; /* Alinha o ícone e o texto */
  align-items: center; /* Centraliza verticalmente o ícone e o texto */
}

/* Estilo para os ícones */
.skill-card i {
  font-size: 2rem; /* Tamanho do ícone */
  margin-right: 15px; /* Espaço entre o ícone e o nome da tecnologia */
}