.header-section{padding:35px 0 0;position: absolute;z-index: 2;left: 0;right: 0;}
.header-section .container > div > div {display: flex; flex-wrap: wrap;align-items: center;}
.header-section .logo { width: 126px; display: flex; align-items: center;  margin-bottom: 30px;}
.header-section .menu{ width:calc(100% - 126px);padding: 0 0 0 20px;}
.yellow-ctas.yellow-res{display:none}
.header-section .custom-menu-primary{width:calc(100% - 176px);padding-right: 160px;}
.yellow-ctas.yellow-des {width: 176px;margin-bottom:30px;position: relative;z-index: 3;}
.header-top {padding: 14px 0;position: relative;z-index:3;  border-bottom: 1px solid rgba(40, 49, 59, 0.06)}
.head-toplt{width:70%;display:flex;flex-wrap:wrap;}
.head-toprt{width:30%;}
.head-toprt ul {justify-content:flex-end;}
.head-toplt p{margin:0;}
.head-tag { border-radius: 6.37px; display: inline-block; margin-right: 11px; font-size: 14.34px; font-weight: 600; letter-spacing: 0; line-height: 17.53px; padding: 4px 9px; }
.head-toprt ul li:not(:last-child){margin-right:23px;}
.head-toprt ul li a:hover{text-decoration:none}
.head-toprtmob {display:none;}
.header-section .menu ul.no-list li a { padding-left: 0 !important; }

.mobile-open #main-content {position:relative; z-index: 0;}
.mobile-open .header-section {position: fixed; background: var(--brand_1) !important;}

.header-group {
  position: relative;
  z-index: 10;
}

/* ===============================
   BODY OVERLAY VIA CSS ONLY (DESKTOP)
   =============================== */
@media (min-width: 1201px) {
  /* Make room for the chevron */
  .header-section .menu li.hs-menu-depth-1.has-mega > a {
    position: relative;
    padding-right: 18px;
  }

  /* Chevron icon (FontAwesome down arrow) */
  .header-section .menu li.hs-menu-depth-1.has-mega > a::after {
    content: "";
    display: inline-block;
    display: none; /* removed */
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    margin-left: 6px;
    border: 2px solid var(--brand_3);
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
    transition: transform 0.15s ease, top 0.15s ease;
    transform-origin: 50% 50%;
    pointer-events: none;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    top: -4px;
    position: relative;
  }

  /* Rotate on hover/focus (spin up) */
  .header-section .menu li.hs-menu-depth-1.has-mega:hover > a::after,
  .header-section .menu li.hs-menu-depth-1.has-mega:focus-within > a::after {
    transform: rotate(225deg);
    top: -2px
  }
  
  @supports (selector(body:has(*))) {
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background-color: rgba(40,49,59,.88);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 5;
    }

    body:has(
      .header-section .menu li.hs-menu-depth-1.has-mega:hover .mega-menu-outer,
      .header-section .menu li.hs-menu-depth-1.has-mega:focus-within .mega-menu-outer
    )::before {
      opacity: 1;
    }
  }
}

/* ===============================
   MEGA MENU STRUCTURE – DESKTOP
   =============================== */

/* default outer wrapper: full-width, static until desktop override */
.mega-menu-outer {
  position: static;
  width: 100%;
}

/* inner panel: centered card */
.mega-menu-popout {
  background-color: var(--third_color);
  padding: 30px 0;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  border-radius: 0 0 12px 12px;
  z-index: 4;
}

.mega-menu-inner {
  padding: 0 20px;
}

.mega-menu-inner .content-wrapper{
  max-width:1240px;
  margin:0 auto;
  padding:0 100px;
}

.megaitems{width:20%; padding-right:30px;}
.megaitems:last-child{padding-right:0;}
.megaitems span{display:inline-block; margin-bottom:25px;}
.megaitems ul li{margin-bottom:15px;}
.megaitems ul li a:hover{text-decoration:none}
.megaitems:nth-child(4) ul li,.megaitems:nth-child(5) ul li{margin-bottom:10px;}

.mega-menu-mobile{display:none}

/*************************************DEPTH 1****************************************************/
.header-section .menu .hs-menu-wrapper > ul{
  display: flex;
  flex-wrap: wrap;
  padding-left:12px;
}
.header-section .menu ul > li.hs-menu-depth-1 > a{
  padding:10px 23.5px 50px;
  display: inline-block;
}

/*************************************CLASSIC DEPTH 2/3 (if still used elsewhere)***************/
.header-section .menu ul > li.hs-menu-depth-1.hs-item-has-children{position:relative;}
.header-section .menu ul > li.hs-menu-depth-2 > a{padding:0 0 13px;display: inline-block;}
.header-section .menu ul > li.hs-menu-depth-2:last-child a{padding-bottom:0;}
.header-section .menu ul > li.hs-menu-depth-1 > ul.hs-menu-children-wrapper{
  background-color:var(--third_color);
  min-width:450px;
  left:0;
  right: 0;
  margin: 0 auto;
  padding:15px;
  top: 100%;
  visibility: hidden;
}
.header-section .hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper{flex-direction: unset;}
.header-section .menu ul > li.hs-menu-depth-1:hover > ul.hs-menu-children-wrapper{visibility:visible;}
.header-section .menu ul > li.hs-menu-depth-1 > .child-trigger{position: absolute; top:19px;right:12px;}
.header-section .menu ul > li.hs-menu-depth-1 > .child-trigger i{position: relative;}

.header-section .menu ul > li.hs-menu-depth-2.hs-item-has-children{position: relative;}
.header-section .menu ul > li.hs-menu-depth-2 > .child-trigger{ position: absolute; top: 0px; right: 20px; }
.header-section .menu ul > li.hs-menu-depth-2 > .child-trigger i{position: relative;}
.header-section .menu ul > li.hs-menu-depth-2 > .child-trigger i:before{
  content: "\f0d7";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: 10px;
  left: 0;
  transition: all 0.5s ease;
}

/*************************************DESKTOP MEGAMENU – PURE CSS (opacity/pointer-events)******/

@media (min-width: 1201px) {

  /* OUTER WRAPPER is the positioned element under the header */
  .header-section .menu li.hs-menu-depth-1.has-mega .mega-menu-outer {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* bottom of header */
    width: 100%;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s ease;
    z-index: 4;
    visibility: visible;
  }

  /* INNER PANEL default hidden as well – override global theme explicitly */
  .header-section .menu li.hs-menu-depth-1.has-mega .mega-menu-popout {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s ease;
    visibility: visible;
  }

  /* Show both outer + inner on hover/focus */
  .header-section .menu li.hs-menu-depth-1.has-mega:hover .mega-menu-outer,
  .header-section .menu li.hs-menu-depth-1.has-mega:focus-within .mega-menu-outer {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .header-section .menu li.hs-menu-depth-1.has-mega:hover .mega-menu-popout,
  .header-section .menu li.hs-menu-depth-1.has-mega:focus-within .mega-menu-popout {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .header-section .hs-menu-wrapper{
    display:flex !important;
    overflow:visible !important;
    justify-content:flex-end;
  }

  /* Header background goes solid when any mega is open */
  @supports (selector(.header-group:has(*))) {
    .header-group .header-section {
      transition: background-color 0.2s ease;
    }

    .header-group:has(
      .menu li.hs-menu-depth-1.has-mega:hover .mega-menu-outer,
      .menu li.hs-menu-depth-1.has-mega:focus-within .mega-menu-outer
    ) .header-section {
      background-color: #ffffff;
    }
  }
}

/*************************************RESPONSIVE***********************************************/

@media(max-width:1366px){
  .header-section .custom-menu-primary {padding-right: 100px;}
}
@media(max-width:1280px){
  .mega-menu-inner .content-wrapper{padding:0;}
}

@media(max-width:1200px){
  .header-section .menu{padding:0;}
  .header-section .menu ul > li.hs-menu-depth-1 > ul.hs-menu-children-wrapper{
    padding: 25px 30px;
    margin-top: 15px;
    opacity:1;
  }
  .header-section .custom-menu-primary {padding-right: 50px;}
}

@media(max-width:1200px){
  .mobile-open .header-top{display:none;}
  .header-section .custom-menu-primary {padding-right:0px;}
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover>.hs-menu-children-wrapper{top:0;}
  .yellow-ctas.yellow-des{display:none;}
  .yellow-ctas.yellow-res{display:block; margin:30px 0 23px;width: 100%;}
  .yellow-ctas.yellow-res a.cta_button{display:block;width: 100%;}
  .head-toprt{display:none}
  .head-tag{margin-right:28px;}
  .head-toplt{width:100%; align-items: center;}
  .head-toplt p {width: calc(100% - 80px);}
  .header-section {padding:18px 0;}
  .header-section .logo{width:100px;margin-bottom:0;}
  .header-section .menu ul > li.hs-menu-depth-1 > a{padding:0;}

  /* Desktop megas hidden on mobile; mobile overlay panels used instead */
  .mega-menu-popout {display:none;}
  .mega-menu-mobile{display:block}

  .mega-menu-popout-container .mega-menu-popouts {
    display:none;
    z-index: 9;
    background-color: var(--third_color);
    left:0;
    right:0;
    padding:30px 20px 100px;
    overflow-y: scroll;
    top:53px;
    position:fixed;
    height:100%;
  }
  .megaitems {padding: 17px 0 0;width: 100%;}
  .megaitems span {margin-bottom: 10px;}
  .mob-menus.mobile-open .mega-menu-popouts.product-menu{display:block}
  .mob-menus,.mob-menusthree,.mob-menustwo,.mobile-open { overflow: hidden;}
  .mob-menustwo.mobile-open .mega-menu-popouts.solution-menu{display:block}
  .mob-menusthree.mobile-open .mega-menu-popouts.resource-menu{display:block}
  .close-btn {width: 26px;}
  .head-toprtmob{display:block; padding:19px 24px;}
  .head-toprtmob ul li{margin-bottom:10px;display: block;width: 100%;}
}

@media(max-width:1200px){

  .mobile-open .header-section{background-color:var(--third_color);}

  .header-section .menu .hs-menu-wrapper>ul{padding:0 22px;}

  .header-section .menu ul>li.hs-menu-depth-1 ul.hs-menu-children-wrapper{min-width:inherit;}

  /**********************************************Toggle Icon***************************************/
  .header-section .mobile-trigger{
    display: inline-block !important;
    cursor: pointer;
    position: absolute;
    right:22px;
    width:25px;
    padding:15px 0px;
    z-index: 12;
    top:30px;
  }
  .header-section .mobile-trigger .line {
    display: block;
    background-color:var(--brand_2);
    width:25px;
    height:3px;
    position:absolute;
    left: 0;
    border-radius: 4px;
  }
  .header-section .mobile-trigger .line.line-3{top:48%;}
  .header-section .mobile-trigger.active-re .line-3 {
    transform: translateY(-23px) translateX(0) rotate(-45deg);
  }
  .header-section .mobile-trigger.active-re .line.line-3 {top:105%;}
  .header-section .mobile-trigger .line.line-2{top:25%;}
  .header-section .mobile-trigger.active-re .line-2 { opacity: 0;}
  .header-section .mobile-trigger .line.line-1{top:0;}
  .header-section .mobile-trigger.active-re .line-1{top:10%;}
  .header-section .mobile-trigger.active-re .line-1 {
    transform: translateY(5px) translateX(0) rotate(45deg);
  }

  /**********************************************Depth 1***************************************/

  .header-section .hs-menu-wrapper {
    z-index: 9;
    background-color: var(--third_color);
    display: none;
    left: 0;
    max-width: 100%;
    padding:50px 0 80px;
    overflow-y:scroll;
    position: fixed;
    right: 0;
    top:73px;
    width: 100%;
    height: 100%;
  }
  .header-section .menu ul > li.hs-menu-depth-1{
    width: 100%;
    border-bottom:1px solid rgba(40,49,59,0.06);
    padding:23px 0;
  }

  /**********************************************Depth 2***************************************/
  .header-section .menu ul > li.hs-menu-depth-1 ul.hs-menu-children-wrapper{
    position: relative;
    display:none;
    visibility:visible;
  }
  .header-section .menu ul > li.hs-menu-depth-1 .child-trigger {
    top:30px;
    right: 0;
    background-image: url();
    width: 15px;
    height: 15px;
    background-size: cover;
  }
  .header-section .menu ul > li.hs-menu-depth-1 .child-trigger.child-open {
    transform: rotate(180deg);
  }
  .header-section .menu ul > li.hs-menu-depth-2,
  .header-section .menu ul > li.hs-menu-depth-3 {
    border-bottom: 1px solid var(--base_color);
    margin-bottom:12px;
  }
  .header-section .menu ul > li.hs-menu-depth-2:last-child,
  .header-section .menu ul > li.hs-menu-depth-3:last-child{
    border:none;
    margin:0;
  }
  .header-section .menu ul > li.hs-menu-depth-1 > ul.hs-menu-children-wrapper {
    padding: 0 22px 25px;
    margin-top: 0;
  }

  /**********************************************Depth 3***************************************/
  .header-section .menu ul > li.hs-menu-depth-2 > ul.hs-menu-children-wrapper{
    position: relative;
    display:none;
    visibility:visible;
    left:0;
  }
}

@media(max-width:640px){
  .header-section .logo {width:80px;}
  .head-toplt p{max-width:250px;}
  .header-section .mobile-trigger{top:22px;}
  .header-section .mobile-trigger .line.line-3 {top: 52%;}
  .header-section .mobile-trigger.active-re .line.line-3 {top:104%;}
  .header-section .hs-menu-wrapper{top:63px;}
}