<footer class="np-footer" style="background-color: transparent;">
  <div class="np-footer-top">
    {% if website_footer.show_navigation_links? %}
      <div class="np-footer-navigation">
        <ul class="np-footer-navigation-list" style="padding-left: 200px;">
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link" style="color: #39424e;"
                href="https://www.hackerrank.com/work/login"
                target="_blank"
              >
                Product login
              </a>
            </li>
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link" style="color: #39424e;"
                href="https://support.hackerrank.com/hc/en-us"
                target="_blank"
              >
                Knowledge base
              </a>
            </li>
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link" style="color: #39424e;"
                href="https://support.hackerrank.com/access/normal"
                target="_blank"
              >
                Support request
              </a>
            </li>
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link" style="color: #39424e;"
                href="https://www.hackerrank.com/release/october-2024"
                target="_blank"
              >
                New releases
              </a>
            </li>
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link" style="color: #39424e;"
                href="https://www.hackerrank.com/blog/"
                target="_blank"
              >
                Blog
              </a>
            </li>
        </ul>
      </div>
    {% endif %}
  </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>
  </div>
</footer>
