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

.footer{
  position: absolute;

  left: 0;
  right: 0;

  width: 100%;

  padding: 50px 20px 0px;

  z-index: 100;

  border-top: 2px rgba(0, 0, 0, 0.041) solid;
}

.footer-container{
  max-width: 1200px;
  margin: 0 auto;
}

/* TOP SECTION */

.footer-top{
  display: grid;

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

  gap: 60px;

  padding-bottom: 70px;

}

/* BRAND */

.footer-brand h3{
  font-size: 16px;

  margin-bottom: 20px;

  color: var(--text);
}

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

  line-height: 1.8;

  color: var(--text-secondary);
}

/* COLUMNS */

.footer-column h4{
  margin-bottom: 25px;

  font-size: 12px;

  letter-spacing: 2px;

  color: var(--text-muted);
}

.footer-column a{
  display: block;

  margin-bottom: 16px;

  font-size: 13px;

  text-decoration: none;

  color: var(--text-secondary);

  transition: 0.3s ease;
}

.footer-column a:hover{
  color: var(--primary);
}

/* BOTTOM */

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

.footer-bottom{
  display:none;
}

/* SOCIALS */

.socials{
  display: flex;

  gap: 18px;
}

.socials a{
  text-decoration: none;

  color: var(--text-secondary);

  transition: 0.3s ease;
}

.socials a:hover{
  color: var(--text);
}

/* MOBILE */

@media (max-width: 768px){

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

    gap: 40px;
  }

  .footer-bottom{
    flex-direction: column;

    gap: 20px;

    text-align: center;
  }

}

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

@media (max-width:768px){

  /* Hide desktop footer */

  .footer-top{
    display:none;
  }

  /* Show mobile footer */

  .footer-bottom{
    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    text-align:center;

    padding:25px 20px;
  }

  .footer-bottom p{
    margin:0;

    font-size:.8rem;
  }

  .socials{
    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;
  }

  .socials a{
    font-size:.8rem;
  }

}