{% load static %}
{% block topbar %}

<style>
  nav .navbar-nav li a{
    color: #4C4C4C !important;
    font-weight: 500;
  }

  nav .navbar-nav li a:hover{
    color: #007D8C !important;
  }
</style>

<nav class="navbar navbar-expand-sm navbar-light fixed-top" style="background-color: white; border-bottom: 1px solid #E3E3E3;">
    <a class="navbar-brand" style="margin-left: 2%;" href="/">
        <img src="{% static 'images/logos/TaskCallCombinedLogo.svg' %}" alt="Taskcall Logo" height="40" width="200">
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav" style="margin-left: 1%;">
            <li class="nav-item px-2"><a class="nav-link size-15" href="/solutions"> Solutions </a></li>
            <li class="nav-item px-2"><a class="nav-link size-15" href="/sectors"> Sectors </a></li>
            <li class="nav-item px-2"><a class="nav-link size-15" href="/pricing"> Pricing </a></li>
            <li class="nav-item px-2"><a class="nav-link size-15" href="/faqs"> Faqs </a></li>
            <li class="nav-item px-2"><a class="nav-link size-15" href="#support"> Support </a></li>
        </ul>
        <ul class="navbar-nav ml-auto" style="margin-right: 2%;">
            <li class="nav-item"><a class="nav-link size-15 mr-1" href="/login"> Log In </a></li>
            <li class="nav-item">
                <a href="/register">
                    <button type="button" class="btn btn-success btn-md px-3 bold size-14" style="background-color: #4CBB17;"> TRY NOW </button>
                </a>
            </li>
        </ul>
    </div>
</nav>


{% endblock %}