/* =========================================================
   Mizunara Studio
   Component / Footer
========================================================= */

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

.footer {
  display: grid;

  grid-template-columns:
    1.2fr
    1fr
    1fr;

  align-items: start;

  gap: 40px;

  width:
    min(1200px, 90%);

  margin:
    80px
    auto
    35px;

  padding: 46px;

  border-radius: 32px;
}

/* =========================================================
   TITLES
========================================================= */

.footer h3 {
  margin-bottom: 18px;

  font-family:
    "Poppins",
    sans-serif;

  font-size: 1rem;
}

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

.footer-brand img {
  max-width: 210px;

  margin-bottom: 18px;
}

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

  line-height: 1.8;

  opacity: 0.82;
}

/* =========================================================
   SOCIAL
========================================================= */

.footer-social-wrap {
  text-align: center;
}

.footer-social {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 18px;
}

/* =========================================================
   LEGAL
========================================================= */

.footer-legal {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 12px;
}

.footer-legal a {
  opacity: 0.82;

  transition:
    color 0.3s ease,
    opacity 0.3s ease;
}

.footer-legal a:hover {
  color: var(--gold);

  opacity: 1;
}

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

.footer-bottom {
  grid-column:
    1 / -1;

  margin-top: 10px;

  padding-top: 28px;

  border-top:
    1px solid
    rgba(212, 180, 131, 0.35);

  text-align: center;
}

.footer-bottom p {
  margin-bottom: 8px;

  opacity: 0.82;
}

.footer-bottom span {
  font-size: 0.9rem;

  opacity: 0.65;
}

/* =========================================================
   SOCIAL ICONS
========================================================= */

.social-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 52px;
  height: 52px;

  border:
    1px solid
    rgba(255, 255, 255, 0.4);

  border-radius: 50%;

  background: white;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-size: 1.35rem;

  text-decoration: none;

  transition:
    transform 0.35s
      cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.social-icon:hover {
  transform:
    translateY(-6px)
    scale(1.12);

  box-shadow:
    0 18px 35px
    rgba(0, 0, 0, 0.18);

  filter:
    saturate(1.15);
}

/* =========================================================
   NETWORK COLORS
========================================================= */

.instagram i {
  color: #dd2a7b;
}

.tiktok i {
  color: #000;
}

.facebook i {
  color: #1877f2;
}

.whatsapp i {
  color: #25d366;
}

.email i {
  color: var(--gold);
}

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

@media (max-width: 1000px) {

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

    text-align: center;
  }

  .footer-brand img,
  .footer-brand p {
    margin-left: auto;
    margin-right: auto;
  }

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