/* 2. The key container for the name and icons */
.header-line {
  display: flex;                 /* Use Flexbox */
  justify-content: space-between;  /* Push children to opposite ends */
  align-items: center;           /* Vertically align them in the middle */

  padding-bottom: 10px;
}

.name h2 {
  margin: 0; /* Removes default margin from the heading */
}
/* 3. Styling for the icons */
.social-icons a {
  color: #555;                 /* Default icon color */
  text-decoration: none;        /* Remove underline from links */
  font-size: 1.5em;             /* Make icons bigger */
  margin-left: 12px;            /* Space between icons */
  transition: color 0.2s ease-in-out; /* Optional: adds a smooth color change */
}

/* Specific hover colors for each icon.
  This works by changing the color of the link (<a>) when you hover over it. 
  The icon (<i>) inside the link will then inherit that new color.
*/

/* ORCID Hover Color */
.social-icons a:hover .ai-orcid {
  color: #A6CE39; 
}

/* DBLP Hover Color */
.social-icons a:hover .ai-dblp {
  color: #004f9f;
}

/* Google Scholar Hover Color */
.social-icons a:hover .ai-google-scholar {
  color: #4285F4;
}