/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Background Fill */

.footer-bg-fill {
  width: 100%;
  background-color: var(--creme);
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Footer */

.footer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7.2rem;
  max-width: 120rem;
  background-color: var(--creme);
  padding: 10.4rem 2.4rem 10.4rem 2.4rem;
  margin: auto;
}

@media (min-width: 1280px) {
  .footer {
    align-items: flex-start;
    padding: 17.6rem 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Section */

.footer-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2.4rem;
}

@media (min-width: 1024px) {
  .footer-section {
    gap: 3.6rem;
  }
}

@media (min-width: 1280px) {
  .footer-section {
    align-items: flex-start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Title */

@media (min-width: 1280px) {
  .footer-title {
    margin-left: 3.6rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Container */

.footer-links-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}

@media (min-width: 1024px) {
  .footer-links-container {
    gap: 3.6rem;
  }
}

@media (min-width: 1280px) {
  .footer-links-container {
    flex-direction: row;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Links */

.footer-link {
  border-radius: 0;
  color: var(--white);
  background-color: var(--grey);
}

.footer-link:active {
  color: var(--grey);
  background-color: var(--pink);
}

@media (min-width: 1024px) {
  .footer-link:hover {
    color: var(--grey);
    background-color: var(--pink);
  }

  .footer-link:active {
    color: var(--white);
    background-color: var(--grey);
  }
}

.footer-link-1 {
  width: 23.789rem;
  border-radius: 1.8rem 0 0 0;
}

@media (min-width: 1280px) {
  .footer-link-1 {
    width: max-content;
  }
}

.footer-link-1-width-3 {
  width: 23.789rem;
}

@media (min-width: 1280px) {
  .footer-link-1-width-3 {
    width: max-content;
  }
}

.footer-link-2 {
  width: 23.789rem;
  border-radius: 0;
}

@media (min-width: 1280px) {
  .footer-link-2 {
    width: max-content;
  }
}

.footer-link-2-width-3 {
  width: 23.789rem;
}

@media (min-width: 1280px) {
  .footer-link-2-width-3 {
    width: max-content;
  }
}

.footer-link-3 {
  width: 23.789rem;
  color: var(--grey);
  background-color: var(--pink);
}

.footer-link-3-no-pink {
  color: var(--white);
  background-color: var(--grey);
}

.footer-link-3-no-pink:active {
  color: var(--grey);
  background-color: var(--pink);
}

@media (min-width: 1024px) {
  .footer-link-3-no-pink:hover {
    color: var(--grey);
    background-color: var(--pink);
  }

  .footer-link-3-no-pink:active {
    color: var(--white);
    background-color: var(--grey);
  }
}

@media (min-width: 1280px) {
  .footer-link-3 {
    width: max-content;
  }
}

.footer-link-3:active {
  color: var(--white);
  background-color: var(--grey);
}

@media (min-width: 1024px) {
  .footer-link-3:hover {
    color: var(--white);
    background-color: var(--grey);
  }

  .footer-link-3:active {
    color: var(--grey);
    background-color: var(--pink);
  }
}

.footer-link-4 {
  width: 23.789rem;
  border-radius: 0 0 1.8rem 0;
}

.footer-link-4-width-3 {
  width: 23.789rem;
}

.footer-link-4-pink {
  color: var(--grey) !important;
  background-color: var(--pink) !important;
}

.footer-link-4-pink:active {
  color: var(--white) !important;
  background-color: var(--grey) !important;
}

@media (min-width: 1280px) {
  .footer-link-4-pink:hover {
    color: var(--white) !important;
    background-color: var(--grey) !important;
  }

  .footer-link-4-pink:active {
    color: var(--grey) !important;
    background-color: var(--pink) !important;
  }
}

@media (min-width: 1280px) {
  .footer-link-4-width-3 {
    width: max-content;
  }
}

@media (min-width: 1280px) {
  .footer-link-4 {
    width: max-content;
  }
}

.footer-social-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}

@media (min-width: 1024px) {
  .footer-social-container {
    gap: 3.6rem;
  }
}

.footer-social {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  font-family: quicksand, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: var(--grey);
}

@media (min-width: 1280px) {
  .footer-social {
    flex-direction: row;
  }
}

.footer-social-icon {
  height: 2.4rem;
  width: 2.4rem;
  border-radius: 100rem;
  color: var(--grey);
  background-color: var(--white);
  box-shadow: 0 0 1.2rem 0 var(--shadow);
  padding: 1.2rem;
}

.footer-powered-by-link {
  font-family: quicksand, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--grey);
}