/*********** UNIT Variables ***********/



  @import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');


  /* *******************   */

  .container-inner{
    padding:0;
  }
  .container{
    background:;
  }

  @media(max-width:768px){
    .container-inner{
      padding: 0em 1em !important;
    }
    .m-btn{
      display:block;
      color:;
      margin-top:1.5em;
    }
    .des-btn{
      display:none;
    }
  }
  @media(min-width:769px){
    .m-btn{
      display:none;
    }
  }

  /* ***************   */


  /* === NAVBAR TOP === */
  .navbar-top{
    width: 100%;
    {% if module.style.menu.background.color  %}
    background: ;
    {% endif %}
    padding: 12.5px 0;
  }
  .item{
    display:flex;
    align-items: center;
    gap: 6px;
  }
  .left-side{
    display:flex;
    align-items: center;
    gap: .8em;
  }
  .right-side{
    display:flex;
    align-items: center;
    gap: .8em;
  }
  .navbar-top-inner{
    max-width: 1280px;
    /*     width: 90%; */
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* === NAVBAR BASE === */
  .navbar {
    /*      position: fixed;
    top: 0;
    left: 0; */
    width: 100%;
    height: 5.25em;
    {% if module.style.menu.background.color %}
    background: ;
    {% endif %}
    /*     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
    z-index: 99;
  }

  .navbar-inner {
    height: 100%;
    max-width: 1280px;
    /*     width: 90%; */
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .title{
    {% if module.style.top_bar.text  %}
    
    {% endif %}
  }

  /* === LOGO STYLES - FIXED VERSION === */
  .logo.desktop {
    height: 2.25em;
    width: auto;
    max-width: 200px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .logo.desktop a {
    display: block;
    height: 100%;
    width: 100%;
    max-width: 200px;
  }

  .logo.desktop a img {
    height: 2.25em !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block;
  }

  .logo.mobile {
    height: 2.25em;
    width: auto;
    max-width: 150px;
    display: none;
    align-items: center;
    overflow: hidden;
  }

  .logo.mobile a {
    display: block;
    height: 100%;
    width: 100%;
    max-width: 150px;
  }

  .logo.mobile a img {
    height: 2.25em !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block;
  }

  /* === NAV LINKS === */
  .nav-links {
    /*         height: 100%; */
    line-height: 50px;
  }

  .links {
    display: flex;
    gap: 20px;
    padding-left: 0;
  }

  .links li {
    position: relative;
    list-style: none;
    display: flex;
    align-items: center;
  }

  .links > li > a, .menu__link {
    {% if module.style.menu.text  %}
    
    {% endif %}
    text-decoration: none;
    white-space: nowrap;
  }
  .menu__link{
    display: flex;
    justify-content: space-between;
  }
  .menu__dropdown-icon svg path{
    {% if module.style.menu.text  %}
    stroke: 
      {% endif %}
  }

  .links > li > a:hover, .menu__link:hove {
    {% if module.style.menu.text_hover.color  %}
    color: ;
    {% endif %}
    transition: all 0.3s ease;
  }

  .with-submenu{
    cursor: pointer;
  }

  /* === ARROWS === */
  .arrow path {
    {% if module.style.menu.text.color  %}
    stroke: ;
    {% endif %}
    transition: all 0.3s ease;
  }
  .arrow {
    display: inline-block;
    padding-left: 8px;
  }

  /* === DESKTOP SUB MENUS === */
  @media (min-width: 801px) {
    /* First level submenu */
    .links > li > .sub-menu {
      position: absolute;
      top: 50px;
      left: 0;
      display: none;
      grid-template-columns: 1fr;
      {% if module.style.submenu.background.color %}
      background:;
      {% endif %}
      padding: 0;
      /*     border-radius: 8px; */
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      gap: 8px;
      z-index: 2;
      line-height: 20px;
    }

    /* Multi-level submenu */
    .links .sub-menu .sub-menu {
      position: absolute;
      top: 0;
      left: 100%;
      display: none;
      grid-template-columns: 1fr;
      {% if module.style.submenu.background.color %}
      background:;
      {% endif %}
      padding: 0;
      /*     border-radius: 8px; */
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      gap: 8px;
      z-index: 3;
      line-height: 20px;
      min-width: 200px;
    }

    /* Show first level submenu on hover */
    .links > li:hover > .sub-menu {
      display: grid;
    }

    /* Show nested submenu on hover */
    .links .sub-menu li:hover > .sub-menu {
      display: grid;
    }

    /* Rotate arrow on hover for main menu items */
    .links > li:hover > a .arrow {
      transform: scaleY(-1);
    }

    /* Rotate arrow on hover for submenu items */
    .links .sub-menu li:hover > a .arrow {
      transform: scaleY(-1);
    }
  }

  .submenu-title{
    font-weight: bold;
  }
  .sidebar-logo{
    display: none;
  }

  .sub-menu li {
    padding: 14px;
    /*   border-radius: 4px; */
    position: relative;
  }

  .links .sub-menu a {
    {% if module.style.submenu.text.css  %}
    ;
    {% endif %}  
    text-decoration: none;
    white-space: nowrap;
  }

  .links .sub-menu a:hover {
    {% if module.style.submenu.text_hover.color  %}
    color: ;
    {% endif %}  
  }

  .sub-menu li:hover {
    cursor: pointer;
    {% if module.style.submenu.background_hover.color  %}
    background-color: ;
    {% endif %}
    transition: all 0.5s ease;
  }

  .submenu-icon svg {
    {% if module.style.top_bar.icon.color  %}
    fill: ;
    {% endif %}
    height: 1em;
  }

  /*   .sub-menu li:hover .submenu-icon svg {
  {% if module.style.submenu.icon_hover.color  %}
  fill: ;
  {% endif %}  
  } */

  .sub-menu-item {
    display: flex;
    gap: 8px;
  }



  /* === MOBILE MENU === */
  .bx-menu {
    display: none;
  }
  .bx-menu svg, .bx-x svg{
    height: 1em;
    {% if module.style.menu.text.color  %}
    fill: ;
    {% endif %}}

  /*       .navbar-top-desktop{
  display: block;
  } */
  .navbar-top-mobile{
    display: none;
  }

  @media (max-width: 920px) {
    .navbar {
      max-width: 100%;
    }

    .links li {
      line-height: 140%;
      padding: 8px;
      border-radius: 4px;
    }
  }

  @media (max-width: 800px) {
    /* Mobile Logo Adjustments */
    .logo.desktop {
      max-width: 120px;
    }

    .logo.desktop a img {
      max-width: 120px !important;
    }

    .sidebar-logo{
      display: block;
    }
    {% if module.logo.add_logo_mobile %}  
    .logo.desktop{
      display: none;
    }
    {% else %}
    .logo.desktop {
      display: flex;
    }
    {% endif %}
    .logo.mobile{
      height: 2.25em;
      max-width: 120px;
      display: flex !important;
      align-items: center;
    }  

    .logo.mobile a img {
      height: 2.25em !important;
      max-width: 120px !important;
    }

    .bx-menu {
      display: block;
    }

    .navbar-top-desktop{
      display: none;
    }
    .navbar-top{
      display: none;
    }
    .navbar-top-mobile{
      display: block;
    }
    .left-side{
      margin-bottom: .8em;
    }
    .navbar-top-inner, .left-side, .right-side{
      flex-direction: column;
      align-items: start;
    }
    .nav-links {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      max-width: 24em;
      {% if module.style.menu.mobile_background.color  %}
      background-color: ;
      {% endif %}
      padding: 20px;
      display: block;
      transition: all 0.5s ease;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      height: 100%;
      overflow-y: auto;
    }

    .nav-links.active {
      right: 0;
    }
    .sidebar-logo {
      position: relative;
      /*           display: flex;
      align-items: center;
      justify-content: space-between; */
    }

    .bx-menu,
    .bx-x {
      background-color: #fff;
      padding: 8px;
      height: auto;
      cursor: pointer;
    }
    .bx-x {
      position: absolute;
      top: -1em;
      right: 0;
    }
    .links {
      display: block;
      margin-top: 44px;
    }

    .links li {
      display: block;
    }

    .links li .sub-menu {
      position: relative;
      top: 0;
      left: 0;
      box-shadow: none;
      gap:0;
    }

    .links li .sub-menu li {
      border-bottom: none;
    }

    /* .sub-menu span {
    display: flex;
    align-items: center;
  } */

    .nav-links .htmlCss-sub-menu {
      grid-template-columns: 1fr;
      padding: 0;
      margin-top: 4px;
    }

    .sub-menu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease;
      display: grid;
      grid-template-columns: 1fr;
      /*           background: var(--white); */
      padding: 14px;
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      gap: 8px;
      z-index: 2;
      line-height: 20px;
    }

    .sub-menu.open {
      max-height: 500px;
    }

    .arrow.flip {
      transform: scaleY(-1);
    }
  }

  @media (max-width: 425px) {
    .nav-links {
      max-width: 100%;
    }

    /* Extra small screen logo adjustments */
    .logo.desktop,
    .logo.mobile {
      max-width: 100px;
    }

    .logo.desktop a img,
    .logo.mobile a img {
      max-width: 100px !important;
    }
  }