body {
      margin: 0;
      font-family: 'Quicksand';
      background: linear-gradient(to bottom, #1e1e2f, #111);
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
.name {
  position: relative;
  display: inline-block;
  font-size: 2.2rem;
  font-weight: bold;
  color: white;
  cursor: default;
}

.name::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, red, black 50%, red);
  box-shadow: 0 0 12px red, 0 0 24px red;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
  opacity: 0;
  border-radius: 2px;
}

.name:hover::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
  transition: 1s ease;
}

.profile-container {
  display: flex;
  align-items: center;
  gap: 45px;
  justify-content: center;
  margin-bottom: 0px;
}

.profile-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
}
.text-info{
  display: flex;
  flex-direction: column;
  gap: 0px;
}
 .socials-container {
      display: flex;
      justify-content: flex-start;
      gap: 12px;
      margin-top: 0;
    }
    .socials-container a:hover {
      transition: 0.3s;
      color: var(--accent-color);
      text-shadow: 0 0 6px var(--accent-color);
    }
    .socials-container a i {
      font-size: 17px;
      color: white;
    }
    .socials-container a:hover::before,
    .socials-container a:hover::after {
      opacity: 1;
    }
    .info-with-socials {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.socials-container {
  margin-top: 8px;
}