/* ///////////////////////////////////////////////////////////////////// */
/* Imports */

@import url(../../../src/utilities/colors.css);

/* ///////////////////////////////////////////////////////////////////// */
/* Background */

.footer-background {
  height: auto;
  width: 100%;
  background-color: var(--dark-blue);
}

@media (min-width: 768px) {
  .footer-background {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

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

.footer {
  width: 100%;
  max-width: 117.6rem;
}

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

.footer-content {
  padding: 4.8rem 1.2rem;
}

@media (min-width: 768px) {
  .footer-content {
    width: 75%;
    margin: auto;
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Grid */

.footer-grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: repeat(3, auto);
  justify-content: start;
  justify-items: start;
  align-content: center;
  align-items: center;
  gap: 4.8rem;
  height: auto;
  width: 100%;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    justify-content: space-evenly;
    align-content: start;
    align-items: start;
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Logo Link */

.footer-logo-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: max-content;
  border-radius: 2.4rem;
  background-image: linear-gradient(
    to right,
    var(--purple),
    var(--orange),
    var(--purple)
  );
  background-size: 300%;
  animation: flow 10s ease-in-out infinite;
  padding: 1.2rem 1.8rem;
  margin-bottom: 4.8rem;
}

@media (min-width: 768px) {
  .footer-logo-link {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0;
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Logo */

.footer-logo {
  height: 6.4rem;
  width: auto;
}

/* ///////////////////////////////////////////////////////////////////// */
/* Containers */

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

@media (min-width: 768px) {
  #footer-container-1 {
    grid-column: 1;
    grid-row: 2;
  }

  #footer-container-2 {
    grid-column: 2;
    grid-row: 2;
  }

  #footer-container-3 {
    grid-column: 3;
    grid-row: 2;
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Header */

.footer-header {
  font-weight: 600;
  color: var(--orange);
}

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

.footer-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  font-family: bai jamjuree, sans-serif;
  line-height: 1;
  text-decoration: none;
  color: var(--white);
  transition: all 0.45s ease-in-out;
}

.footer-link:hover {
  color: var(--orange);
}

/* ///////////////////////////////////////////////////////////////////// */
/* Icons */

.footer-link-icon {
  height: 2.4rem;
  width: 2.4rem;
  color: var(--white);
  transition: all 0.45s ease-in-out;
}

.footer-link:hover .footer-link-icon {
  color: var(--orange);
}

/* ///////////////////////////////////////////////////////////////////// */
/* Disclaimer */

.disclaimer {
  width: 100%;
  max-width: 33.6rem;
  font-size: 1.2rem;
  margin-top: 4.8rem;
}

.disclaimer-orange {
  color: var(--orange);
}

/* ///////////////////////////////////////////////////////////////////// */
/* Copyright */

.copyright {
  width: 100%;
  max-width: 33.6rem;
  font-size: 1.2rem;
  margin-top: 4.8rem;
}

.copyright-orange {
  color: var(--orange);
}