/* ==========================================================================
Custom Menu Primary
========================================================================== */

{% set ulColor       = "" %} /* Set ul background color */
{% set liColor       = "" %} /* Set li background Color */
{% set aColor        = #fff %} /* Set link Color */
{% set aColorHover   = #f4783b %} /* Set link Hover Color */

/* Parent List */
.custom-menu-primary .hs-menu-wrapper > ul > li > a{ color:#fff; transition:0.3s ease; }
.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{ color:#f4783b; }

/* Child List */
.custom-menu-primary .hs-menu-wrapper > ul ul li{ background:; }
.custom-menu-primary .hs-menu-wrapper > ul ul li a{ color:; }
.custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{ color:; text-decoration:none; }

/* Override max width on menu links */
.custom-menu-primary .hs-menu-wrapper > ul li a, .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { overflow: visible !important; max-width: none !important; width: auto !important; }

/* ==========================================================================
Mobile Menu - Hubspot Standard Toggle Menu
========================================================================== */

/**
* Special Note
*
* When the menu is open, a class of .mobile-open is applied to the body. You can 
* use this for custom styling on any element when the menu is in the open position.                     
*/

.mobile-trigger, .child-trigger{ display: none; /* Hide button on Desktop */ }


@media (max-width: 767px){
  /* Variables
  ========================================================================== */

  {% set menuColorMobile = "#000000" %}   /* Set Mobile Menu Background Color */
  {% set aColorMobile = "#ffffff" %}      /* Set Link Color */
  {% set aColorHoverMobile = "#ffffff" %} /* Set Link Hover Color */

  /* Toggle Button
  ========================================================================== */

  .mobile-trigger { display: inline-block !important; cursor: pointer; width: auto; height: auto; padding: 8px 12px; background: transparent; border: 1px solid #f4783b; font-size: 16px; font-weight: normal; text-align: left; text-transform: uppercase; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: {  { menuColorMobile }}; }

  /* Toggle Button Icon
  ========================================================================== */

  .mobile-trigger i { display: inline; position: relative; top: -4px; }
  .mobile-trigger i:before, .mobile-trigger i:after { position: absolute; content: ''; }
  .mobile-trigger i, .mobile-trigger i:before, .mobile-trigger i:after { width: 22px; height: 2px; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; color: #f4783b; background-color: #f4783b; display: inline-block; }
  .mobile-trigger i:before { top: -6px; }
  .mobile-trigger i:after { top: 6px; }
  .mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after, .mobile-open .mobile-trigger i, .mobile-open .mobile-trigger i:before, .mobile-open .mobile-trigger i:after { background-color: #f4783b; }

  /* Child Toggle Button
  ========================================================================== */

  .child-trigger { display: block !important; cursor: pointer; position: absolute; top: 0px; right: 0px; width: 55px !important; min-width: 55px !important; height: 45px !important; padding: 0 !important; border-left: 1px dotted rgba(255, 255, 255, .20); }
  .child-trigger:hover { text-decoration: none; }
  .child-trigger i { position: relative; top: 50%; margin: 0 auto !important; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
  .child-trigger i:after { position: absolute; content: ''; }
  .child-trigger i, .child-trigger i:after { width: 10px; height: 1px; background-color: {  { aColorMobile }}; display: block; }
  .child-trigger i:after { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
  .child-trigger.child-open i:after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); }

  /* Menu Styles on Mobile Devices
  ========================================================================== */  
  .custom-menu-primary.js-enabled { margin: 10px 0 10px 0; }

  /* Hide menu on mobile */
  .custom-menu-primary.js-enabled .hs-menu-wrapper, .custom-menu-primary.js-enabled .hs-menu-children-wrapper { display: none; }

  /* Make child lists appear below parent items */
  .custom-menu-primary ul.hs-menu-children-wrapper { visibility: visible !important; opacity: 1 !important; position: static !important; display: none; }

  /* Mobile Menu Styles */
  .custom-menu-primary.js-enabled .hs-menu-wrapper { width: 100%; height: max-content; position: absolute; top: 100%; left: 0; background: #f4783b; z-index: 2; padding: 10px 0 10px 16px; }
  .custom-menu-primary .hs-menu-wrapper { background-color: {  { menuColorMobile }}; width: 100%; }

  /* Level 1 Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul > li a { font-size: 20px; line-height: 45px; color: #fff; }
  .custom-menu-primary .hs-menu-wrapper > ul > li a:hover { color: #FFF; }


  /* Level 2 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul ul li { background-color: rgba(255, 255, 255, .08); }
  .custom-menu-primary .hs-menu-wrapper > ul ul li a { text-indent: 10px; font-size: 16px; }

  /* Level 3 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul ul ul li a { text-indent: 30px; }
  .custom-menu-primary .hs-menu-wrapper > ul ul ul ul li a { text-indent: 50px; }
}


.header-sec { position: relative; }
.header-sec { width: 100%; display: inline-block; padding: 25px 0; }
.header-sec .header-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.header-sec .logo { width: auto; display: inline-block; margin: 0; max-width: 420px; }
.header-sec .logo a { width: auto; display: inline-block; }
.header-sec .logo a img { width: 100%; display: inline-block; object-fit: contain; object-position: center; max-width: 420px; vertical-align: middle; }
.header-sec .mainmenu { width: auto; display: inline-block; margin: 0; }
.header-sec .mainmenu .hs-menu-wrapper > ul { width: 100%; gap: 32px; }
.header-sec .mainmenu .hs-menu-wrapper > ul > li { width: auto; display: inline-block; margin:0; }
.header-sec .mainmenu .hs-menu-wrapper > ul > li a { font-family:commuters-sans,sans-serif; }
.header.fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 9; transition: 0.4s ease-in-out; }

@media (max-width: 767px) {
  .header-sec .logo a img { max-width: 300px; }
  .header-sec .mainmenu .hs-menu-wrapper > ul { gap: 0px; }
  .header-sec .mainmenu .hs-menu-wrapper > ul > li { margin: 0; }
}

@media (min-width: 768px) { 
  .header-sec .logo a img { max-width: 190px; }
  .header-sec .mainmenu .hs-menu-wrapper > ul { gap: 15px; }
}

@media (min-width: 992px) {
  .header-sec .logo a img { max-width: 260px; }
  .header-sec .mainmenu .hs-menu-wrapper > ul { gap: 25px; }
  .header-sec .mainmenu .hs-menu-wrapper > ul > li a { font-size: 16px; }
}

@media (max-width: 992px) {
  .header-sec .mainmenu .hs-menu-wrapper > ul > li a { font-size: 16px; }
}

@media (min-width:1200px) {
  .header-sec .logo a img { max-width: 340px; }
  .header-sec .mainmenu .hs-menu-wrapper > ul { gap: 25px; }
  .header-sec .mainmenu .hs-menu-wrapper > ul > li a { font-size: 18px; }
}

@media (min-width: 1472px) {
  .header-sec .mainmenu .hs-menu-wrapper > ul { width: 100%; gap: 42px; }
  .header-sec .mainmenu .hs-menu-wrapper > ul > li a { font-size: 20px; }
}

@media (max-width: 425px) {
  .header-sec .logo a img { max-width: 250px; }
  .custom-menu-primary .hs-menu-wrapper > ul > li a { font-size: 16px; line-height: 20px; }
  .mobile-trigger { padding: 2px 8px; }
}