.footer-container {
  background-color: #000000;
  height: 100vh;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  position: relative;
  padding: 1rem;
  margin-top: -2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.footer-container a:hover {
  color: var(--text-bright-color);
}

.contacts {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  align-items: end;
}

.contacts h5 {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-color);
  text-align: center;
  margin: 1rem 0 0 0;
  z-index: 3;
  padding: 1rem 2rem;
}

.links,
.locations {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  align-items: end;
}

.links h5,
.locations h5 {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-color);
  text-align: center;
  margin: 1rem 0 0 0;
  z-index: 3;
  padding: 1rem 2rem;
}

.links ul {
  list-style-type: none;

  margin: 0;
  width: 100%;
  text-align: end;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.locations ul {
  list-style-type: none;
  margin: 0;
  width: 100%;
  text-align: end;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.links ul li a,
.locations ul li a {
  text-decoration: none;
  color: #707070;
  font-size: 1.1rem;
}

.contacts .phone-numbers-container {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  align-items: flex-end;
}

.horizontal-divider-footer {
  display: flex;
  width: 88%;
  border-top: 1px solid var(--text-color);
  margin: 2rem 1.5rem;
  z-index: 3;
}

.footer-row-col {
  display: flex;
  flex-direction: column;
}

/* -------------------------MEDIA------------------------ */

@media (501px <= width <= 1000px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }

  .contacts .phone-numbers-container {
    text-align: end;
  }
}

@media (1001px <= width <= 4000px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }

  .contacts .phone-numbers-container {
    text-align: end;
  }

  .footer-row-col {
    display: flex;
    flex-direction: row;
  }

  .locations ul {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-container {
    height: 78vh;
  }
}