{% require_css %}
<style>
/* Animation */
@-webkit-keyframes headerSticky {
  0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes headerSticky {
  0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); }
}

.edu-header .header-top-bar {
  height: var(--header-top-height);
  background-color: var(--header-top-background-color);
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 991px) {
  .header-top-bar, .edu-header .header-top-bar { display: none; }
}

.header-top {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (max-width: 767px) {
  .header-top { display: block; }
}

.header-top .header-top-left { margin-right: 30px; }
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (max-width: 767px) {
  .header-top .header-top-left { margin-right: 0; }
}

.header-top .header-info {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* left aligned */
  flex-wrap: wrap;
  margin: 0 -30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (max-width: 767px) {
  .header-top .header-info { justify-content: center; margin: 0 -15px; }
}

.header-top .header-info li {
  display: inline-block;
  margin: 0;
  color: var(--light_color);
  padding: 14px 30px 12px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .header-top .header-info li { padding: 15px; }
}

.edu-header .header-top .header-info li { color: var(--light_color); }

.edu-header .header-top .header-info li:after {
  content: "";
  width: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  height: 30px;
  display: none;
}
.edu-header .header-top .header-info li:first-child:after { display: block; }

/* Default link colors in the top bar */
.edu-header .header-top .header-info li a { color: var(--light_color); }
.edu-header .header-top .header-info li a:hover { color: var(--primary-color); }

.edu-header .header-top .header-info li svg {
  width: 16px; height: 16px; margin-right: 5px;
}
.edu-header .header-top .header-info li svg path {
  fill: currentColor; stroke: currentColor;
}

/* Main menu area */
.edu-header .header-mainmenu {
  background-color: var(--header-bottom-background-color);
  box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  height: var(--header-bottom-height);
  display: flex;
  align-items: center;
}
.edu-header .header-mainmenu.is-sticky {
  position: fixed; top: 0; right: 0; left: 0; z-index: 99;
  background-color: var(--light_color);
  -webkit-animation: headerSticky .95s ease forwards;
  animation: headerSticky .95s ease forwards;
}

.edu-header .header-navbar { display: flex; align-items: center; }
@media only screen and (max-width: 1199px) {
  .edu-header .header-navbar { justify-content: space-between; }
}

.edu-header .header-navbar .header-mainnav { flex: 1; }
@media only screen and (max-width: 991px) {
  .edu-header .header-navbar .header-mainnav { display: none; }
}

.edu-header .header-brand { display: flex; align-items: center; }
.edu-header .header-brand img.logo-light { display: inline-block; }
.edu-header .header-brand .logo { margin-right: 40px; }
@media only screen and (max-width: 575px) {
  .edu-header .header-brand .logo { margin-right: 15px; }
}
.edu-header .header-brand .logo a { display: block; }

/* Submenu styles */
.mainmenu-nav ul.header-sub-menu-1 {
  display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none;
  justify-content: flex-end;
}
.mainmenu-nav > ul.header-sub-menu-1 > li { position: relative; }
.mainmenu-nav > ul.header-sub-menu-1 > li > a {
  font-size: var(--body-font-size);
  font-weight: 500;
  line-height: 25px;
  display: flex;
  padding: 36px 15px;
  text-transform: capitalize;
  color: var(--menu-link-color);
  gap: 7px;
}
.mainmenu-nav > ul.header-sub-menu-1 > li.has-sub-menu > a::after {
  color: var(--menu-link-color);
  content: "\f107";
  float: right;
  font-family: "Font Awesome 6 Pro";
  font-size: 14px;
  font-weight: 900;
  line-height: 24px;
}
.mainmenu-nav > ul.header-sub-menu-1 > li:hover > a,
.mainmenu-nav > ul.header-sub-menu-1 > li.has-sub-menu:hover > a::after {
  color: var(--menu-link-hover-color);
}
.mainmenu-nav > ul.header-sub-menu-1 ul {
  position: absolute; z-index: 99; top: 100%; left: -25px; visibility: hidden;
  flex-direction: column; width: 240px; margin-top: 20px; padding: 20px 0px;
  transition: var(--transition); opacity: 0; background-color: var(--dropdown-bg-color);
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.mainmenu-nav > ul.header-sub-menu-1 ul li a {
  font-size: var(--body-font-size);
  display: flex; padding: 5px 25px; color: var(--child-menu-link-color); position: relative;
}
.mainmenu-nav > ul.header-sub-menu-1 ul li:hover > a {
  padding-left: 36px; color: var(--child-menu-link-hover-color);
}
.mainmenu-nav ul.header-sub-menu-1 li > ul > li.has-sub-menu > a::after {
  color: var(--menu-link-color);
  font-size: 14px; font-weight: 900; font-family: "Font Awesome 6 Pro";
  content: "\f105"; line-height: 30px; position: absolute; right: 25px; top: 50%;
  transform: translateY(-50%);
}

/* ===== EMAIL HOVER OVERRIDE ===== */
.edu-header .header-top .header-info li a[href^="mailto:"] {
  color: #ffffff !important; /* white by default */
}
.edu-header .header-top .header-info li a[href^="mailto:"]:hover {
  color: #007bff !important; /* blue on hover */
}
</style>
{% end_require_css %}

{% macro defaultItemClasses() %}  {% endmacro %}
{% macro childClasses() %}  {% endmacro %}
{% macro activeNode() %}  {% endmacro %}

{% macro link(node) %}
<li >
  <a class="navs-link" href="" ></a>
  {% if node.children %}  {% endif %}
</li>
{% endmacro %}

{% macro renderNavigation(menuTree) %}
  {% set level = level + 1 %}
  <ul class="navigation hs-menu-children-wrapper header-sub-menu-" aria-hidden="">
    {% for node in menuTree.children %}  {% endfor %}
  </ul>
{% endmacro %}

<header class="edu-header">
  <div class="header-top-bar">
    <div class="container">
      <div class="header-top">
        <div class="header-top-left">
          <ul class="header-info">
            {% for item in module.header_top_info_list %}
              <li>
                {% icon
                  name=""
                  style=""
                  unicode=""
                  icon_set=""
                %}
                {% if "@" in item.header_info_text %}
                  <a href="mailto:"></a>
                {% else %}
                  
                {% endif %}
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="header-mainmenu header-sticky">
    <div class="container">
      <div class="header-navbar">
        <div class="header-brand">
          <div class="logo">
            {% logo
              override_inherited_src=""
              src=""
              alt=""
              width=""
              height=""
              loading=""
              suppress_company_name=""
              link="https://utilitra-21098442.hs-sites.com/home-1"
            %}
          </div>
        </div>
        <div class="header-mainnav">
          {% if module.navigation %}
            <nav class="mainmenu-nav">
              
            </nav>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</header>

