/* Footer */
footer {
  background: var(--primary);
  color: white;
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px;
}
footer h4 {
  margin-bottom: 24px;
  font-size: 1.125rem;
}
footer ul {
  list-style: none;
}
footer ul li {
  margin-bottom: 12px;
}
footer ul li a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}
footer ul li a:hover {
  color: white;
}
.copyright {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.5;
}

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

footer {
  background: var(--primary);
  color: white;
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

footer h4 {
  margin-bottom: 20px;
  font-size: 1.125rem;
}

footer ul {
  list-style: none;
  padding: 0;
}

footer ul li {
  margin-bottom: 12px;
}

footer ul li a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

footer ul li a:hover {
  color: white;
}

/* Social Icons */
footer i {
  transition: 0.2s ease;
}

footer i:hover {
  color: white;
}

/* Copyright */
.copyright {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 980px) {

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    text-align: left;
  }

}

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

@media (max-width: 600px) {

  footer {
    padding: 48px 0 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  footer h4 {
    font-size: 1rem;
  }

  footer ul li a,
  footer p {
    font-size: 0.85rem;
  }

  /* Social icons center properly */
  footer .footer-grid > div:last-child div {
    justify-content: center !important;
  }

  .copyright {
    margin-top: 32px;
    padding-top: 16px;
  }

}