.footer {
  width: 100vw;
  padding: 5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sub-bg);
}
.footer .container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.f-bx {
  max-width: 350px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 1rem;
}
.f-bx h2 {
  font-size: 2rem;
  color: var(--sub-text-color);
  text-align: left;
}
.f-bx .paragraph {
  font-size: 1.5rem;
  color: var(--sub-text-color);
  margin-top: 1rem;
}
.socs {
  margin-top: 1rem;
  display: flex;
  align-items: center;
}
.socs .soc {
  margin: 0.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--sub-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.links {
  margin-top: 1rem;
  display: block;
  width: 100%;
}
.link {
  font-size: var(--main-text-size);
  display: flex;
  align-items: center;
}
.link a {
  font-size: var(--main-text-size);
  display: flex;
  align-items: center;
  color: var(--sub-text-color);
  padding: 0.25rem;
}
.li-ic {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 600px) {
  .f-bx h2 {
    font-size: 1.5rem;
  }
}