body {
  padding-bottom: 5rem; /* Larger than footer height */
}

/* footer position */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 1rem 0;
  background: var(--primary-500);
}

.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

/* social icons */
.social-icons a {
  border-radius: 50%;
  font-size: 2rem;
  margin: 0 1rem;
  transition: var(--transition);
  cursor: pointer;
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
}

.social-icons i {
  color: var(--primary-600);
  border-radius: 50%;
  padding: 0.5rem;
  background: transparent;
  transition: var(--transition);
}

.social-icons a:hover {
  color: var(--white);
  background: var(--primary-500);
  transform: translateY(-5px);
}

.social-icons i:hover {
  background: transparent;
  color: var(--white);
}