/* Seção Sobre Mim */
.about {
  background:var(--body-color);
  padding: 60px 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-about {
  max-width: 1200px;
  margin: 0 auto;
  z-index: 2;
}

/* Layout em grid */
.about-grid {
  display: grid;
  grid-template-columns: 3fr 2fr; /* Proporção ajustada para destacar o conteúdo */
  gap: 40px;
  align-items: start; /* Alinhamento centralizado */
}

/* Conteúdo */
.about-content {
  padding: 25px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-content:hover {
  transform: translateY(-5px);

}

.about-content h2 {
  color: var(--neon-green);
  font-size: 4rem;
  font-weight: 700;
  width: 50%;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.about-content p {
  color: var(--white-color);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 15px;
}

/* Botão Discover More */
.read-more {
  display: inline-block;
  color: var(--neon-green);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  padding: 10px 20px;
  border: 1px solid var(--neon-green);
  border-radius: 5px;
  transition: background 0.3s ease, color 0.3s ease;
}

.read-more:hover {
  background: var(--neon-green);
  color: #121212;
}

/* Contêiner da imagem (para centralização e espaçamento) */
.about-image {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Adiciona uma margem inferior em telas pequenas para separar a imagem do texto */
    margin-bottom: 2.5rem; /* Ajuste conforme necessário */
}

/* Estilos da imagem de perfil */
.about-image img {
    /* Tamanho base e responsivo */
    width: 200px; /* Tamanho padrão para telas menores */
    height: 200px; /* Manter quadrado para a borda circular */
    max-width: 90%; /* Garante que a imagem não ultrapasse 90% da largura do contêiner em telas muito pequenas */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    border-radius: 50%; /* Transforma a imagem em um círculo perfeito */

    /* Borda e sombra inicial */
    border: 4px solid var(--accent); /* Borda mais grossa e roxa */
    /*box-shadow: 0 0 15px var(--accent); /* Sombra inicial mais proeminente */

    /* Transições suaves para os efeitos de hover */
    transition: transform 0.0s ease-in-out, /* Aumentado para um efeito mais suave */
                box-shadow 0.0s ease-in-out,
                border-color 0.0s ease-in-out;
}

/* Efeito ao passar o mouse (hover) */
.about-image img:hover {
    transform: scale(1.1); /* Aumenta um pouco mais a imagem para destaque */

    /* Efeito de brilho "neon" roxo */
}

/* Media Queries para responsividade */
@media (min-width: 768px) { /* Para tablets e telas maiores */
    .about-image {
        margin-bottom: 0; /* Remove a margem inferior quando há espaço lateral */
    }
    .about-image img {
        width: 250px;
        height: 250px;
    }
}

@media (min-width: 1024px) { /* Para desktops */
    .about-image img {
        width: 300px; /* Volta ao tamanho maior original */
        height: 300px;
    }
}

/* Responsividade */
@media (max-width: 800px) {
  .about-grid {
    grid-template-columns: 1fr;
    text-align: start;
    gap: 30px;
  }

  .about-content h2 {
    font-size: 2rem;
  }
}