<nav class="np-sub-navigation">
  <div class="np-sub-navigation-content">
    {% for link in navigations.sub_navigation %}
      {% if link.label == 'Home' %}
        <div class="np-sub-navigation-content-item {{ link.active_class }}" >
          <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
          <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
            {% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
            Certifications
          </a>
        </div>
      {% endif %}
    {% endfor %}
    {% for link in navigations.sub_navigation %}
      {% if link.label == 'Dashboard' %}
        <div class="np-sub-navigation-content-item {{ link.active_class }}" >
          <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
          <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
            {% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
            {{ link.label }}
          </a>
        </div>
      {% endif %}
    {% endfor %}
    {% for link in navigations.sub_navigation %}
      {% if link.label == 'Events' %}
        <div class="np-sub-navigation-content-item {{ link.active_class }}" >
          <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
          <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
            {% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
            {{ link.label }}
          </a>
        </div>
      {% endif %}
    {% endfor %}
    <div class="np-sub-navigation-content-item" >
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
      <a class="np-sub-navigation-content-item-link" href="https://www.skan.ai/company" target="_blank">
        {% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
        About Us
      </a>
    </div>
    <div class="np-sub-navigation-content-item" >
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
      <a class="np-sub-navigation-content-item-link" href="mailto:skan_university@skan.ai" target="_blank">
        {% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
        Contact
      </a>
    </div>

  </div>
</nav>
<style>
  .np-sub-navigation{
    background: #FFFFFF;
  }

  .np-sub-navigation-content{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }

  .np-sub-navigation-content-item-bar{
    margin: -1.5rem auto 1.25rem auto;
    width: 3.3rem;
  }

  @media screen and (min-width: 768px){
    .np-sub-navigation{
      height: 75px;
      padding: 28px; 
      width: 92%;
    }

    .np-sub-navigation-content-item-link{
      font-size: 27px;
      color: #000000;
    }

    .np-sub-navigation-content-item-link:hover {
      Color: #3421BA;;
      transition: color .5s ease, background .5s ease, border .5s;
    }

    .np-sub-navigation-content-item-bar{
      margin: -1.75rem auto 1.25rem auto;
      background: #3421BA;
      display: none !important;
    }

    .np-sub-navigation-content-item-active 
    .np-sub-navigation-content-item-link {
        Color: #3421BA;;
    }

    .np-sub-navigation-content-item-link,
    .np-sub-navigation-content-item-active .np-sub-navigation-content-item-link{
      font-weight: 700;
    }
  }
</style>