#footer {
  --footer-bg: #153b32;
  --footer-surface: #1d493d;
  --footer-text: #e8eee9;
  --footer-muted: #b9c8be;
  --footer-accent: #c7d9ad;
  padding: clamp(3rem, 6vw, 5rem) 0 2.5rem;
  border-top: 4px solid #8ea979;
  color: var(--footer-text);
  background: var(--footer-bg);
}

#footer .footer-info {
  margin-right: 1rem;
}

#footer .section-title {
  padding-bottom: .65rem;
}

#footer .section-title h2,
#footer .footer-info h2 {
  margin: 0 0 .85rem;
  color: #f4f5e9;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .015em;
}

#footer p,
#footer address,
#footer .copyright-text p {
  color: var(--footer-muted);
  line-height: 1.7;
}

#footer strong {
  color: var(--footer-text);
}

#footer a {
  color: var(--footer-accent);
  text-decoration-color: rgba(199, 217, 173, .5);
  text-underline-offset: .16em;
  transition: color .18s ease, text-decoration-color .18s ease;
}

#footer a:hover,
#footer a:focus-visible {
  color: #fff;
  text-decoration-color: currentColor;
}

#footer .social-icon {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .35rem 0 1.2rem;
  padding: 0;
  list-style: none;
}

#footer .social-icon li {
  margin: 0;
}

#footer .social-icon li a {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(232, 238, 233, .24);
  border-radius: 50%;
  color: var(--footer-text);
  font-size: 1.05rem;
  text-decoration: none;
}

#footer .social-icon li a:hover,
#footer .social-icon li a:focus-visible {
  border-color: var(--footer-accent);
  color: var(--footer-bg);
  background: var(--footer-accent);
}

#footer .copyright-text {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 238, 233, .16);
}

#footer .copyright-text p {
  margin-bottom: .35rem;
  font-size: .88rem;
}

#footer .newsletter-form img {
  max-width: min(160px, 100%);
  height: auto;
  margin-bottom: .65rem;
  object-fit: contain;
}

#footer .newsletter-form .form-control {
  border-color: rgba(232, 238, 233, .35);
  color: #fff;
}

#footer .newsletter-form .form-control::placeholder {
  color: var(--footer-muted);
}

#footer .newsletter-form input[type="submit"] {
  border-color: rgba(232, 238, 233, .55);
  color: var(--footer-text);
}

#footer .newsletter-form input[type="submit"]:hover {
  border-color: var(--footer-accent);
  color: var(--footer-bg);
  background: var(--footer-accent);
}

@media (max-width: 767.98px) {
  #footer {
    padding: 2.75rem 0 1.75rem;
  }

  #footer .footer-info {
    margin-right: 0;
  }
}