{% block extra_css %}
<!-- Navbar -->
<style>
    .bg-orange {
      background-color: #f4931e;
    }

    .text-orange {
      color: #f4931e;

    }


    /* default css start */
    .header-area {
      background-color: #fff;
      background-position: center center;
      background-size: cover;
    }

    /* default css end */


    /* navbar regular css start */
    .navbar-area {
      background: rgba(246, 243, 243, 0.6);
    }

    .site-navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    a.site-logo {
      font-size: 26px;
      font-weight: 800;
      text-transform: uppercase;
      color: #0e0d0d;
      text-decoration: none;
    }

    .site-navbar ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
    }

    .site-navbar ul li a {
      /* color: #050505; */
      padding: 5px 10px 5px 10px;
      display: block;
      text-decoration: none;
      text-transform: uppercase;
    }

    /* .site-navbar ul li a:hover {
      background: rgba(255, 255, 255, .1);
    } */

    /* navbar regular css end */


    /* nav-toggler css start */
    .nav-toggler {
      /* border: 3px solid #fff; */
      padding: 5px;
      background-color: transparent;
      cursor: pointer;
      height: 39px;
      display: none;
    }

    .nav-toggler span,
    .nav-toggler span:before,
    .nav-toggler span:after {
      width: 28px;
      height: 3px;
      background-color: #070707;
      display: block;
      transition: .3s;
    }

    .nav-toggler span:before {
      content: '';
      transform: translateY(-9px);
    }

    .nav-toggler span:after {
      content: '';
      transform: translateY(6px);
    }

    .nav-toggler.toggler-open span {
      background-color: transparent;
    }

    .nav-toggler.toggler-open span:before {
      transform: translateY(0px) rotate(45deg);
    }

    .nav-toggler.toggler-open span:after {
      transform: translateY(-3px) rotate(-45deg);
    }

    /* nav-toggler css start */


    /* mobile breakpoint start */
    @media screen and (max-width: 767px) {

      /* navbar css for mobile start */
      .nav-toggler {
        display: block;
      }

      .site-navbar {
        min-height: 83px;
      }

      .site-navbar ul {
        position: absolute;
        width: 50%;
        height: calc(100vh - 60px);
        left: 0;
        top: 60px;
        flex-direction: column;
        align-items: center;
        /* border-top: 1px solid #444; */
        background-color: #fff;
        max-height: 0;
        overflow: hidden;
        transition: .3s;
      }

      .site-navbar ul li {
        width: 100%;
        text-align: left;
      }

      .site-navbar ul li a {
        padding-left: 25px;
      }

      .site-navbar ul li a:hover {
        background-color: rgba(255, 255, 255, .1);
      }

      .site-navbar ul.open {
        max-height: 100vh;
        overflow: visible;
      }

      .intro-area h2 {
        font-size: 36px;
        margin-bottom: 15px;
      }

      /* navbar css for mobile end */
    }

    /* mobile breakpoint end */
  </style>


{% endblock %}


{% load wagtailimages_tags %}

<ul class="hidden  gap-2 text-black  mt-4 md:mt-0 [&>a]:p-2 [&>a]:uppercase [&>a]:rounded">
    {% if menu_items %}
    {% for menu in menu_items %}

    <a href="{% if menu.url %} {{menu.url}} {% elif menu.page %} 
{{menu.page.url}} {% endif %}"
      class="{% if request.path == menu.url or request.path == menu.page.url %} bg-orange  font-bold {% endif %}">
      {{menu.title}}
    </a>
    {% endfor %}
    {% endif %}

    {{request.site.root_url}}


  </ul>