{ % set ulColor       =""% }

/* Set ul background color */
{ % set liColor       =""% }

/* Set li background Color */
{ % set aColor        =""% }

/* Set link Color */
{ % set aColorHover   =""% }

/* Set link Hover Color */

/* Parent List */
.custom-menu-primary .hs-menu-wrapper > ul { background: {  { ulColor } }; }
.custom-menu-primary .hs-menu-wrapper > ul > li { background: {  { liColor } }; }
.custom-menu-primary .hs-menu-wrapper > ul > li > a { color: {  { aColor } }; }
.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover { color: {  { aColorHover } }; }

/* Child List */
.custom-menu-primary .hs-menu-wrapper > ul ul { }
.custom-menu-primary .hs-menu-wrapper > ul ul li { background: {  { liColor } }; }
.custom-menu-primary .hs-menu-wrapper > ul ul li a { color: {  { aColor } }; }
.custom-menu-primary .hs-menu-wrapper > ul ul li a:hover { color: {  { aColorHover } }; }

/* 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;
}

/* Fix menu disappearing on desktop after toggling mobile menu */
@media screen and (min-width:900px) {
  .custom-menu-primary .hs-menu-wrapper { display: block !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:899px) {

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

  /* 
  * Menu Reset
  *
  * Remove styling from desktop version of custom-menu-primary. Place any 
  * additional CSS you want removed from the mobile menu in this reset 
  */

  .custom-menu-primary,
  .custom-menu-primary .hs-menu-wrapper > ul,
  .custom-menu-primary .hs-menu-wrapper > ul li,
  .custom-menu-primary .hs-menu-wrapper > ul li a {
    display: block;
    float: none;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    padding: 0px;
    margin: 0px;
    background-image: none;
    background-color: transparent;
    border: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    max-width: none;
    width: 100%;
    height: auto;
    line-height: 1;
    font-weight: normal;
    text-decoration: none;
    text-indent: 0px;
    text-align: left;
    color: {  { aColorMobile } };
  }

  /* Toggle Button
  ========================================================================== */
  .mobile-trigger {
    display: inline-block !important; /* Show button on mobile */
    cursor: pointer; /* Mouse pointer type on hover */
    position: absolute;
    top: -45px;          
    left: unset; right: 0;
    width: auto;
    height: auto;
    padding:0;
    background: #ffffff;
    border:1px solid {  { menuColorMobile } };
    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 } };
  }
  .mobile-trigger:hover {
    text-decoration: none;
    color: {  { aColorHoverMobile } };
    background-color: {  { menuColorMobile } };
    border-color: transparent;
  }

  /* Change button when menu is open */
  .mobile-open .mobile-trigger { right: 0; }

  /* 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 {
    transform-origin: top left;transition: all .3s ease;
    width: 26px;
    height: 1px;
    -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
    background-color: #404041;
    display: inline-block;
  }
  .mobile-trigger i:before { top: -8px; }
  .mobile-trigger i:after { top: 8px; }
  .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: #404041; }

  body.mobile-open .mobile-trigger i { background: transparent; }
  body.mobile-open  .mobile-trigger i:before { left: 50%; top: 50%; transform: rotate(45deg) translate(-50%, -50%); }
  body.mobile-open  .mobile-trigger i:after  { left: 50%; top: 50%; transform: rotate(-45deg) translate(-50%, -50%); }

  /* 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; 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 { transform: rotate(-90deg); }
  .child-trigger.child-open i:after { transform: rotate(-180deg); }

  /* Menu Styles on Mobile Devices */
  .custom-menu-primary.js-enabled { position: relative; padding-top: 0; margin: 0; width: 100% !important; }

  .custom-menu-primary.js-enabled .hs-menu-wrapper,
  .custom-menu-primary.js-enabled .hs-menu-children-wrapper { display: none; }

  .custom-menu-primary ul.hs-menu-children-wrapper { visibility: visible !important; opacity: 1 !important; position: static !important; display: none; }

  .custom-menu-primary.js-enabled .hs-menu-wrapper {
    left: -20px;right: 0;width: calc(100% + 40px);background: #ffffff !important;
    flex-direction: column; flex-wrap: wrap; height: 100vh;
    opacity: 0; padding: 20px;top: 0; transform: translateX(100%); transition: all .3s ease; visibility: hidden;  z-index: 5;
  }
  body.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper { opacity: 1; transform: translateX(0); visibility: visible; }
  .custom-menu-primary.js-enabled .hs-menu-wrapper:after { background: #e7e8e8; content: ""; display: block; height: 1px; left: 0; top: 0; width: 100%; position: absolute; }
  .header { padding: 20px 0 0 0; }
  .header-sec .header-inner .left { padding-bottom: 20px; }
  body.mobile-open .social_list{display:block;padding-bottom: 60px;position: absolute;bottom: 60px;left: 20px;right: 20px;width: calc(100% - 40px);}

  .header-sec .header-inner .right .child-trigger i, .child-trigger i:after { background: #333; }
  .header-sec .header-inner .right .menu ul li .dropdown { opacity: 0 !important; display: none !important; visibility: hidden !important; }
  .header-sec .header-inner .right .menu ul.hs-menu-children-wrapper { display: inline-block; width: 100%; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open .social_list { display: none !IMPORTANT; opacity: 0 !IMPORTANT; visibility: hidden !IMPORTANT; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open ul.hs-menu-children-wrapper { display: none; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open.active ul.hs-menu-children-wrapper { display: block; }
  .header-sec .header-inner .right .custom-menu-primary .hs-menu-wrapper > ul ul li a {
    font-size: 18px; margin-bottom: 10px; width: 100%;
    font-family: Aestetico-semibold; font-style: normal; font-weight: 500; line-height: 24px;
    color: #404041 !important;
  }
  .header-sec .header-inner .right .menu li.hs-menu-item.hs-menu-depth-2.icon_open { margin-top: 20px; }
  .header-sec .header-inner .right .menu li.hs-menu-item.hs-menu-depth-2:last-child { margin-bottom: 20px; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-2.icon_open:after { display: none; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open:after { top: 10px; right: 0; }
  .header-sec .header-inner .right .menu ul li .child-trigger { display: none !IMPORTANT; }
  .header-sec .header-inner .right .menu  li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open.active a { color: #0f9246; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open.active ul.hs-menu-children-wrapper a {
    text-wrap: wrap;color: #404041; text-align: left; text-indent: 0;
  }
  .header-sec .header-inner .right .menu ul.hs-menu-children-wrapper.active-branch li.hs-menu-item.hs-menu-depth-2.active-branch a {
    color: #07b14a !important; font-weight: 700; font-family: 'Aestetico-bold';
  }

}
.header-sec .header-inner .right { width: 100%; justify-content: flex-start; }
body.mobile-open .header-sec .header-inner a.header-cell { display: none; }
body.mobile-open .menu.custom-menu-primary.js-enabled { height: 100vh; }

.header { padding: 20px 0; position: fixed; top: 0; transition: all .3s ease; width: 100%; z-index: 6; }
.header-sec { width: 100%; display: inline-block; }
.header-sec .header-inner {
  width: 100%;flex-wrap: wrap; display: flex; align-items: center;position: relative; justify-content: space-between; margin: 0;
}
.header-sec .header-inner .left { margin: 0; width: auto; display: inline-block; }
.header-sec .header-inner .left .logo { height: 26.5px; width: 142px; display: block; }
.header-sec .header-inner .left .logo a {vertical-align: top;line-height: 0;width: 100%; display: inline-block; height:100%;}
.header-sec .header-inner .left .logo img { width: 100%; display: inline-block; }
.header-sec .header-inner .right { margin: 0; display: flex; justify-content: center; align-items: center; gap: 48px; }
.header-sec .header-inner .right .menu { margin: 0;  width: auto; display: inline-block; }
.header-sec .header-inner .right .menu ul { gap: 48px; }
.header-sec .header-inner .right .menu ul li { line-height: 0;position:relative;margin-bottom:0;}
.header-sec .header-inner .right .cta {display: none; margin: 0; }
.header-sec .header-inner .right .cta a.primary-cta {padding: 4px 14px;}

/* ===== ARROW REMOVED (override all caret sources) ===== */
.header-sec .header-inner .right .menu ul li.icon_open:after,
.header-sec .header-inner .right .menu ul li.hs-item-has-children:after,
.header-sec .header-inner .right .menu ul li.hs-item-has-children > a:after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Also remove any background-image caret on anchors & avoid reserved space */
.header-sec .header-inner .right .menu ul li > a {
  background-image: none !important;
  padding-right: 0 !important;
}

/* Keep rotation rule harmless (no :after now) */
.header-sec .header-inner .right .menu ul li.icon_open.active:after { transform: none !important; }

/* Hide HubSpot default children wrapper on desktop */
.header-sec .header-inner .right .menu ul.hs-menu-children-wrapper {display: none;}


.header-sec .header-inner a.header-cell { width: fit-content; display: flex; gap: 10px; align-items: center; background: #07b14a; position: absolute; flex-wrap: wrap; left: 0; padding: 8px 20px 8px 0; text-decoration: none; top: 46px; transition: all .3s ease; z-index: 1; }
.header-sec .header-inner a.header-cell svg { height: 16px; width: 16px; fill: #fff; }
.header-sec .header-inner a.header-cell span.hs_cos_wrapper { height: 16px; width: 16px; display: inline-block; margin: 0; }
.header-sec .header-inner a.header-cell span { font-family: 'Axiforma-bold';font-size: 13px;font-weight: 700;line-height: 1; margin: 0; color: #fff; }
.header-sec .header-inner a.header-cell:before { content: ""; height: 100%; right: 100%; top: 0; width: 50vw; background: #07b14a; position: absolute; }
.header-sec .header-inner a.scrolled-header-cell {display: none;}
.header-sec .header-inner .right .menu ul li li.hs-menu-item.hs-menu-depth-2.active.active-branch a { color: #07b14a !important; font-weight: 700; font-family: 'Aestetico-bold'; }
.header-sec .header-inner .right .menu ul li .dropdown li.hs-menu-item.hs-menu-depth-1.active-branch a { color: #07b14a; font-weight: 700; font-family: 'Aestetico-bold'; }
.header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.active.active-branch a:before {
  background: #07b14a; border-radius: 50%; border-radius: 2px; bottom: -2px; content: ""; display: block; height: 4px; left: -5px; position: absolute; width: calc(100% + 10px);
}
.header-sec .header-inner .right .menu ul li.hs-menu-item.icon_open a:before{display:none !important;}

@media(min-width:900px){
  .header-sec .header-inner { flex-wrap: nowrap;}
  .header-sec .header-inner .left .logo { height: 34px; width: 175px; }
  .header-sec .header-inner .right .menu ul li { padding: 32px 0;}
  .header{padding:0;}
  .header-sec .header-inner .right{justify-content:flex-end;}
  .header-sec .header-inner a.header-cell {left: 0;top: 90px;}
  .header-sec .header-inner .right .cta { padding: 25px 0; width: auto; display: inline-block; line-height: 0; }
}

.dropdown {opacity:0;visibility:hidden; background: #fff; border-bottom: 1px solid #e7e8e8; border-top: 1px solid #e7e8e8; left: 0; padding: 60px 0; position: fixed; top: 88px; transition: all .4s ease; width: 100%; z-index: 2; }
.header-sec .header-inner .right .menu ul li.active .dropdown {opacity: 1;visibility: visible;}
.dropdown__inner { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; max-width: 1260px; padding: 0 20px }
.dropdown__contact { width: 190px; margin: 0; }
.dropdown__contact ul { align-items: center;gap: 0 !important; display: flex !important; flex-wrap: wrap; justify-content: flex-start; list-style: none; margin: 30px 0 0; padding: 0; width: 100% }
.dropdown__contact ul li { margin-right: 15px; padding: 0 }
.dropdown__contact ul li:first-of-type { padding: 0 }
.dropdown__contact ul li:first-of-type:after { display: none }
.dropdown__contact ul li:last-of-type { padding: 0 }
.dropdown__contact ul li svg { height: 16px; width: 16px }
.dropdown__menu { width: 444px; margin: 0; }
.dropdown__menu ul { display: block; margin: 0; padding: 0 }
.dropdown__menu ul li { font-family: Aestetico, sans-serif; font-size: 18px; font-weight: 500; margin-bottom: 10px !important; width: 100% }
.dropdown__menu ul li a[aria-current=page] { color: #07b14a; font-weight: 700 }
.dropdown__menu ul li a[aria-current=page]:before { display: none }
.dropdown__menu ul li:first-of-type { padding: 0 }
.dropdown__menu ul li:first-of-type:after { display: none }
.dropdown__menu ul li:last-of-type { margin-bottom: 10px; padding: 0 }
.dropdown__contact { display: inline-block; }
.dropdown__contact p { margin: 0; }
.dropdown__contact a { font-family: Axiforma-normal; font-weight: 300; }
.dropdown__contact p a { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; display: inline-block; }
.dropdown__contact p { position: relative; }
.dropdown__contact p:last-child { margin: 0 0 1.45rem; }
.dropdown__contact p.address { margin: 24px 0 0; }
.dropdown__contact ul li svg { fill: #07b14a; }
.dropdown__menu a { font-size: 18px; width: 100%; display: inline-block; font-family: Aestetico-semibold; font-style: normal; font-weight: 500; }
.social_list{display:none;}
.social_list .social_wrap { display: flex; justify-content: space-between; width: 100%; margin: 1.45rem 0 0; }
.social_list .social_wrap ul.footer-social { width: fit-content; margin: 0; display: flex; gap: 0 !important; flex-direction: row; }
.social_list .social_wrap ul.footer-social svg { height: 16px; width: 16px; fill: #1c9c49; }
.social_list .social_wrap ul.footer-social li { margin-right: 15px; margin-bottom: 20px; }
.social_list .social_wrap  a { margin: 0; font-family: Axiforma-normal; font-weight: 300; }
.social_list .news_letter_form { display: inline-block; width: 100% }
.social_list .news_letter_form h3 { display: none }
.social_list .news_letter_form form { background: transparent; border: unset; position: relative }
.social_list .news_letter_form .hs_submit.hs-submit { font-size: 0; position: absolute; right: 18px; top: 14px; z-index: 9 }
.social_list .news_letter_form input.hs-button.primary.large {
  background-color: transparent; background-image: url(https://24111669.fs1.hubspotusercontent-na1.net/hubfs/24111669/Choice_Capital_2023/Images/Right-aero.svg);
  background-repeat: no-repeat; border: 0; cursor: pointer; font-size: 0; height: 14px; padding: 0; width: 14px
}
.social_list .news_letter_form .hs_error_rollup { display: none }
.social_list .news_letter_form form .input input {
  background: transparent; border: 1px solid #979797; border-radius: 3px; color: #404041; font-size: 12px; height: 40px; padding: 6px 18px; width: 100%
}
.social_list .footer-list ul.no-list.hs-error-msgs.inputs-list { margin: 2px 0 0 }
.social_list .footer-list form ul.no-list.hs-error-msgs.inputs-list li { display: inline-block; line-height: 0 }
.social_list .footer-list ul li label.hs-error-msg.hs-main-font-element { color: #ff2600; margin: 0 }
.social_list .news_letter_form form .input input:focus-visible { outline: unset; }
.dropdown__contact ul.dropdown__social li {padding: 0 !important;}

@media(min-width:900px) {
  .dropdown__inner { padding: 0 50px }
  .dropdown__contact ul li { margin-bottom: 0; margin-left: 0; margin-right: 15px; padding: 0 }
  .dropdown__menu ul li a:hover { color: #07b14a }
  .dropdown__menu ul li { margin-left: 0; padding: 0 !important; }
  .dropdown__inner { padding: 0 50px }
}

@media(max-width:899px){
  .custom-menu-primary.js-enabled .hs-menu-wrapper {left: -20px;right: 0;width: calc(100% + 40px);background: #ffffff !important; flex-direction: column; flex-wrap: wrap; height: 100vh; opacity: 0; padding: 20px;top: 0; transform: translateX(100%); transition: all .3s ease; visibility: hidden;  z-index: 5; }
  body.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper { opacity: 1; transform: translateX(0); visibility: visible; }
  .custom-menu-primary.js-enabled .hs-menu-wrapper:after { background: #e7e8e8; content: ""; display: block; height: 1px; left: 0; top: 0; width: 100%; position: absolute; }
  .header { padding: 20px 0 0 0; }
  .header-sec .header-inner .left { padding-bottom: 20px; }
  body.mobile-open .social_list{display:block;padding-bottom: 60px;position: absolute;bottom: 60px;left: 20px;right: 20px;width: calc(100% - 40px);}

  .header-sec .header-inner .right .child-trigger i, .child-trigger i:after { background: #333; }
  .header-sec .header-inner .right .menu ul li .dropdown { opacity: 0 !important; display: none !important; visibility: hidden !important; }
  .header-sec .header-inner .right .menu ul.hs-menu-children-wrapper { display: inline-block; width: 100%; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open .social_list { display: none !IMPORTANT; opacity: 0 !IMPORTANT; visibility: hidden !IMPORTANT; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open ul.hs-menu-children-wrapper { display: none; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open.active ul.hs-menu-children-wrapper { display: block; }
  .header-sec .header-inner .right .custom-menu-primary .hs-menu-wrapper > ul ul li a { font-size: 18px; margin-bottom: 10px; width: 100%; font-family: Aestetico-semibold; font-style: normal; font-weight: 500; line-height: 24px; color: #404041 !important; }
  .header-sec .header-inner .right .menu li.hs-menu-item.hs-menu-depth-2.icon_open { margin-top: 20px; }
  .header-sec .header-inner .right .menu li.hs-menu-item.hs-menu-depth-2:last-child { margin-bottom: 20px; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-2.icon_open:after { display: none; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open:after { top: 10px; right: 0; }
  .header-sec .header-inner .right .menu ul li .child-trigger { display: none !IMPORTANT; }
  .header-sec .header-inner .right .menu  li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open.active a { color: #0f9246; }
  .header-sec .header-inner .right .menu ul li.hs-menu-item.hs-menu-depth-1.hs-item-has-children.icon_open.active ul.hs-menu-children-wrapper a {text-wrap: wrap;color: #404041; text-align: left; text-indent: 0; }
  .header-sec .header-inner .right .menu ul.hs-menu-children-wrapper.active-branch li.hs-menu-item.hs-menu-depth-2.active-branch a { color: #07b14a !important; font-weight: 700; font-family: 'Aestetico-bold'; }

}
/* Never display the header dropdown strip */
.header-sec .header-inner .right .menu ul li .dropdown {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.header-sec .header-inner .right .menu ul li.active .dropdown {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* === FINAL ADDITIONS (transparent header desktop & mobile) === */

/* Transparent header by default */
.header,
.header .header-sec,
.header .header-sec .container,
.header .header-sec .header-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* White when scrolled or menu open */
.header.is-scrolled,
body.mobile-open .header {
  background: #ffffff !important;
  box-shadow: 0 1px 0 #e7e8e8 !important;
  border: 0 !important;
}

/* Nav links transparent state */
.header.is-top .header-sec .header-inner .right .menu ul > li > a,
.header.is-top .header-sec .right .menu a:link,
.header.is-top .header-sec .right .menu a:visited {
  color:#ffffff !important;
  text-decoration:none !important;
}

/* Nav links scrolled/menu-open state */
.header.is-scrolled .header-sec .header-inner .right .menu ul > li > a,
.header.is-scrolled .header-sec .right .menu a:link,
.header.is-scrolled .header-sec .right .menu a:visited,
body.mobile-open .header .header-sec .right .menu a {
  color:#404041 !important;
  text-decoration:none !important;
}
/* === REQUIRED FIXES (append at end) === */

/* Ensure transparent at top even if other rules load after */
.header.is-top,
.header.is-top .header-sec,
.header.is-top .header-sec .container,
.header.is-top .header-sec .header-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Force white bar when scrolled (desktop) and when mobile menu is open */
.header.is-scrolled,
.header.is-scrolled .header-sec,
.header.is-scrolled .header-sec .container,
.header.is-scrolled .header-sec .header-inner,
body.mobile-open .header,
body.mobile-open .header .header-sec,
body.mobile-open .header .header-sec .container,
body.mobile-open .header .header-sec .header-inner {
  background: #ffffff !important;
  box-shadow: 0 1px 0 #e7e8e8 !important;
  border: 0 !important;
}

/* Mobile: make off-canvas panel fixed and fully visible when open */
@media (max-width:899px){
  .custom-menu-primary.js-enabled .hs-menu-wrapper{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
  }
  /* If earlier rules hide it, explicitly show when open */
  body.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
}

/* Mobile: guarantee transparent header on load (menu closed, at top) */
@media (max-width:899px){
  .header.is-top {
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Link colors by state (so menu items are visible) */
.header.is-top .header-sec .right .menu a {
  color: #ffffff !important;
}
.header.is-scrolled .header-sec .right .menu a,
body.mobile-open .header .header-sec .right .menu a,
body.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper a {
  color: #404041 !important;
}

/* ====== MOBILE MENU LAYOUT TO MATCH THE THEME OVERRIDE (only when menu is open) ====== */
@media (max-width:899px){
  /* Make the panel a centered, full-viewport white canvas */
  body.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: fixed !important;
    inset: 0 !important;
    height: 100vh !important;
    padding: 96px 24px 48px !important; /* space for header/logo */
    overflow-y: auto !important;
    background: #ffffff !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Top-level items centered & larger */
  body.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper > ul{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper > ul > li{
    margin: 0 !important;
    padding: 0 !important;
  }
  body.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper > ul > li > a{
    font-family: Aestetico-semibold, sans-serif !important;
    font-size: 22px !important;
    line-height: 28px !important;
    color: #404041 !important;
    text-align: center !important;
  }

  /* Close button visible & fixed top-right */
  body.mobile-open .mobile-trigger{
    display: inline-block !important;
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid #404041 !important;
    background: #ffffff !important;
    z-index: 1000 !important;
  }
  body.mobile-open .mobile-trigger i,
  body.mobile-open .mobile-trigger i:before,
  body.mobile-open .mobile-trigger i:after{
    background-color: #404041 !important;
    width: 24px !important;
    height: 2px !important;
  }

  /* Keep logo at top within header */
  body.mobile-open .header{ background:#ffffff !important; }

  /* Email centered beneath items; hide newsletter/social icons */
  body.mobile-open .social_list{
    display: block !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 24px !important;
  }
  body.mobile-open .social_list .news_letter_form{ display: none !important; }
  body.mobile-open .social_list .social_wrap{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  body.mobile-open .social_list .social_wrap ul.footer-social{ display: none !important; }
  body.mobile-open .social_list .social_wrap a{
    margin: 0 !important;
    font-size: 16px !important;
    color: #404041 !important;
    text-align: center !important;
  }
}
/* When the mobile menu is open, make the close (X) icon dark so it's visible on white */
@media (max-width: 899px) {
  body.mobile-open .mobile-trigger i {
    background: transparent !important; /* hide middle bar */
  }
  body.mobile-open .mobile-trigger i:before,
  body.mobile-open .mobile-trigger i:after {
    background-color: #404041 !important; /* dark lines for the X */
  }
}
/* ===== Mobile: make header fully white on scroll + dark burger icon ===== */
@media (max-width: 899px) {
  /* Force every wrapper in the header stack to turn white when scrolled */
  .header.is-scrolled,
  .header.is-scrolled .header-sec,
  .header.is-scrolled .header-sec .container,
  .header.is-scrolled .header-sec .header-inner {
    background: #ffffff !important;
    box-shadow: 0 1px 0 #e7e8e8 !important;
    border: 0 !important;
  }

  /* Ensure the white bar spans the whole header height even if children are transparent */
  .header.is-scrolled { background-clip: padding-box !important; }

  /* Dark hamburger when scrolled so it’s visible on the white bar */
  .header.is-scrolled .mobile-trigger i,
  .header.is-scrolled .mobile-trigger i:before,
  .header.is-scrolled .mobile-trigger i:after {
    background-color: #404041 !important;
  }

  /* Menu link color on scrolled state */
  .header.is-scrolled .header-sec .right .menu a {
    color: #404041 !important;
    text-decoration: none !important;
  }
}
/* ===== Mobile: force solid white header when scrolled ===== */
@media (max-width: 899px) {
  /* Make sure the header is a positioning context */
  .header { position: fixed; z-index: 6; }

  /* Paint the entire header area white when scrolled (beats inner is-top) */
  .header.is-scrolled::before {
    content: "";
    position: absolute;
    inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
    background: #ffffff !important;
    box-shadow: 0 1px 0 #e7e8e8 !important;
    pointer-events: none;      /* don’t block clicks */
  }

  /* Dark hamburger on white bar while scrolled */
  .header.is-scrolled .mobile-trigger i,
  .header.is-scrolled .mobile-trigger i:before,
  .header.is-scrolled .mobile-trigger i:after {
    background-color: #404041 !important;
  }

  /* Ensure link color on white bar */
  .header.is-scrolled .header-sec .right .menu a {
    color: #404041 !important;
    text-decoration: none !important;
  }
}

/* Extra guard: if a nested header still has is-top, force it white under a scrolled parent */
@media (max-width: 899px) {
  .header.is-scrolled header.header.is-top,
  .header.is-scrolled header.header.is-top .header-sec,
  .header.is-scrolled header.header.is-top .header-sec .container,
  .header.is-scrolled header.header.is-top .header-sec .header-inner {
    background: #ffffff !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}
/* Keep logo visible above the mobile panel, and push the panel below the header */
@media (max-width: 899px){
  body.mobile-open .header .left .logo{
    position: relative;
    z-index: 1001;  /* above menu panel */
  }
  /* Fallback values; JS will set the exact height dynamically */
  body.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper{
    top: 66px !important;                       /* approx. header height */
    height: calc(100vh - 66px) !important;
  }
}