/*==================================================
FOOTER
==================================================*/

.footer {
  position: relative;

  background: var(--primary);

  color: var(--white);

  padding: var(--space-9) 0 0;

  overflow: hidden;
}

.footer a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.footer a:focus-visible {
  outline: 3px solid var(--secondary-alpha-35);

  outline-offset: 4px;
}

/*==================================================
FOOTER GRID
==================================================*/

.footer-grid {
  display: grid;

  grid-template-columns: 2fr 1fr 1.5fr;

  gap: 60px;

  padding-bottom: var(--space-7);
}

/*==================================================
FOOTER BRAND
==================================================*/

.footer-brand {
  display: flex;

  flex-direction: column;
}

.footer-logo {
  width: 72px;

  margin-bottom: var(--space-3);

  transition: var(--transition);

  display: block;

  opacity: 1;

  color: var(--background);
}

.footer-logo:hover {
  transform: rotate(-5deg) scale(1.05);
}

.footer-brand h3 {
  color: var(--white);

  margin-bottom: var(--space-2);
}

.footer-brand p {
  max-width: 320px;

  color: var(--white-alpha-85);

  line-height: 1.8;
}

.footer-brand strong {
  color: var(--secondary);
}

/*==================================================
FOOTER TITLE
==================================================*/

.footer h4 {
  color: var(--white);

  margin-bottom: var(--space-3);

  font-size: 1.1rem;
}

/*==================================================
FOOTER LINKS
==================================================*/

.footer-links a {
  display: inline-flex;

  align-items: center;
  min-height: 44px;

  color: var(--white-alpha-88);

  text-decoration: none;

  margin-bottom: 14px;

  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--secondary);

  transform: translateX(4px);
}

/*==================================================
FOOTER CONTACT
==================================================*/

.footer-contact p {
  margin-bottom: 6px;

  font-weight: 600;

  color: var(--white);
}

.footer-contact a {
  display: inline-block;

  color: var(--white-alpha-88);

  text-decoration: none;

  margin-bottom: var(--space-3);

  transition: var(--transition);
}

.footer-contact a:hover {
  color: var(--secondary);
}

.footer-contact span {
  display: block;

  color: var(--white-alpha-82);

  line-height: 1.8;
}

/*==================================================
FOOTER BOTTOM
==================================================*/

.footer-bottom {
  margin-top: var(--space-6);

  border-top: 1px solid var(--white-alpha-12);

  padding: 24px 0;

  text-align: center;
}

.footer-bottom p {
  margin: 0;

  color: var(--white-alpha-70);

  font-size: 0.9rem;
}

/*==================================================
RESPONSIVE
==================================================*/

@media (max-width: 992px) {
  .footer {
    padding-top: var(--space-7);
  }

  .footer-grid {
    grid-template-columns: 1fr;

    gap: var(--space-6);
  }

  .footer-brand,
  .footer-links,
  .footer-contact {
    text-align: center;
  }

  .footer-brand {
    align-items: center;
  }

  .footer-brand p {
    max-width: 500px;
  }
}

@media (max-width: 768px) {
  .footer {
    padding-top: var(--space-6);
  }

  .footer-grid {
    gap: var(--space-5);
  }

  .footer-logo {
    width: 64px;
  }

  .footer h3 {
    font-size: 1.5rem;
  }

  .footer h4 {
    font-size: 1rem;
  }
}