/* CONTACT */
section#contact {
  max-width: 800px;
  margin: 2rem auto;
	
  text-align: center;
}

#contact h3 {
  font-size: 2rem;
}

#contact p {
  font-size: 1.1rem;
	text-align: center;
}

#contact a {
  color: var(--primary);
  text-decoration: none;
	
  transition: color 0.3s ease;
}

section#contact > p > a:hover {
  color: var(--text-complementary);
	transform: scale(2);
}

div.socials {
  display: flex;
  justify-content: center;
  
	margin-top: 1.5rem;
  gap: 3rem;
}

div.socials img {
  width: 50px;
  height: 50px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

div.socials a:hover img {
  transform: scale(1.2);
  filter: brightness(1.2); /* subtle glow effect on hover */
}