<footer class="np-footer">
  <div class="np-footer-top">
    {% if website_footer.show_navigation_links? %}
      <div class="np-footer-navigation">
        <ul class="np-footer-navigation-list">
          {% for website_navigation in navigations.footer_navigations %}
            {% if website_navigation.external? %}
              <li class="np-footer-navigation-item">
                <a
                  class="np-footer-navigation-link np-button-color"
                  href="{{ website_navigation.path }}"
                  {% if website_navigation.external? %} target="_blank" {% endif %}
                >
                  {{ website_navigation.name }}
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    {% endif %}
    <div class="copyright">© 2023 Walmart Inc.</div>
  </div>

  <div class="np-footer-bottom">
    <nav class="np-footer-social-links">
      {% if website_footer.show_social_media_links? %}
        <ul class="np-footer-social-links-list">
          {% for social_media_link in website_footer.social_media_links %}
            <li class="np-footer-social-links-item">
              <a
                class="np-footer-social-links-link np-button-color"
                href="{{ social_media_link.link }}"
                target="_blank" title="{{ social_media_link.name }}"
              >
                <i class="np-footer-social-links-icon
                  np-button-color
                  fab fa-{{ social_media_link.name }}"
                ></i>
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </nav>

    {% if website_footer.show_customer_service_email? and
      website_footer.school_customer_service_email
    %}
      <div class="np-footer-support">
        <div class="np-footer-support-item np-footer-support-help">
          {% t .need_help %}
        </div>
        <div class="np-footer-support-item np-footer-support-email">
          {% t .email %}
        </div>
        <a
          class="np-footer-support-item np-footer-support-link np-button-color"
          href="mailto:{{ website_footer.school_customer_service_email }}"
        >
          {{ website_footer.school_customer_service_email }}
        </a>
      </div>
    {% endif %}
  </div>
</footer>

<style>
  .np-footer {
    max-width:1380px;
    margin:auto;
    border-top: 1px solid #DADCE0;
    padding: 24px 16px 48px;
  }
  
  .np-footer-top {
    justify-content:center;
    flex-direction:column;
  }

  .np-footer-navigation-list {
    flex-direction:row;
    flex-wrap:wrap;
    margin:0;
    justify-content:center;
  }

  .np-footer-navigation {
    min-height:auto;
  }

  .np-footer-navigation-link {
    font-size:16px;
    line-height:30px;
    margin: 0 12px 16px;
    padding: 0;
  }

  @media (min-width:1381px) {
    .np-footer {
      margin: 0 auto;
    }

    .np-footer-navigation-link {
      margin: 0 16px 16px;
    }
  }
</style>