/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


li::marker {
    color: #FF9902;
}

a#return-to-top {
   background: #FF9902; !important
  }
a#return-to-top:hover {
   background: #FF9902; !important
  }

.checkmark-list li {
    list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9902"><path d="M9 19c-.26 0-.51-.1-.71-.29l-6-6A.996.996 0 1 1 3.7 11.3l5.29 5.29L20.28 5.3a.996.996 0 1 1 1.41 1.41l-12 12c-.2.2-.45.29-.71.29Z"></path></svg>');
}

.checkmark-list li::marker {
    font-size: 2em;
    line-height: 0.1;
}

.price-cards li {
    list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9902"><path d="M9 19c-.26 0-.51-.1-.71-.29l-6-6A.996.996 0 1 1 3.7 11.3l5.29 5.29L20.28 5.3a.996.996 0 1 1 1.41 1.41l-12 12c-.2.2-.45.29-.71.29Z"></path></svg>');
}

.price-cards li::marker {
    font-size: 2em;
    line-height: 0.1;
}

.header .hhs-extras-ctas .hhs-header-cta .hhs-head-cta-1 {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.header .hhs-extras-ctas .hhs-header-cta .hhs-head-cta-2 {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.text-video-module iframe {
    border-radius: 8px;
}

.text-image-module img {
    border-radius: 8px;
}

.global-footer .hhs-social-con svg {
    height: 20px;
    width: 20px;
}

@media(max-width: 768px) {
	.global-footer .c-cta-con {
		margin-bottom: 25px;
	}
}

@media(max-width: 768px) {
	.global-footer .hhs-foot-base-nav {
		text-align: center;
	}
}

@media(max-width: 575px) {
	.global-footer .c-cta-con {
		align-items: center;
    justify-content: center;
	}
}

.image-text-slider .c-slide-inner-1 {
   border-radius: 8px;
}

.image-text-slider .c-image-1 img {
    border-radius: 8px;
}

              
@media(max-width: 768px) {
	.salesware-module-button .c-content-con .c-w-100 .c-in-2 .c-justify-left 
               {
		justify-content: center;
    align-items: center;
	}
}

.nav-fixed {
    box-shadow: 0 6px 6px -6px #e6e6e6;
}

.foursolutions-cards .filter-card {
     pointer-events: none;
}

.mega-menu {
  max-width: 900px;
  width: 100%;
  left: 50% !important;
  transform: translateX(-50%) !important;
} 


/* =========================================================
   Clean Pro Mega Menu – Desktop Only (>=992px)
   SAFE + SCOPED (does not override header button layout)
   ========================================================= */

@media (min-width: 992px){

  /* ---------------------------------------------------------
     1) DO NOT let any global .mega-menu rules leak in.
     (This wins against your existing `.mega-menu{max-width:900px...}`)
     --------------------------------------------------------- */
  #hhs-main-nav .mega-menu{
    max-width: 1240px !important;
    width: min(1240px, calc(100vw - 80px)) !important;

    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,0.14) !important;

    padding: 22px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }

  #hhs-main-nav .mega-menu > div > .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---------------------------------------------------------
     2) Hide chevrons WITHOUT layout shift (no nav scrunching)
     --------------------------------------------------------- */
  #hhs-main-nav .hhs-nav-links > li.hs-item-has-children > a{
    position: relative !important;
  }

  #hhs-main-nav .hhs-nav-links > li.hs-item-has-children > a > svg{
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* ---------------------------------------------------------
     3) Reduce flicker with a small hover bridge (CSS-only)
     --------------------------------------------------------- */
  #hhs-main-nav .hhs-nav-links > li.hs-menu-item.hs-menu-depth-1{
    position: relative !important;
  }

  #hhs-main-nav .hhs-nav-links > li.hs-menu-item.hs-menu-depth-1::after{
    content: "" !important;
    position: absolute !important;
    left: -10px !important;
    right: -10px !important;
    top: 100% !important;
    height: 18px !important;  /* adjust 12–24px if needed */
    background: transparent !important;
  }

  /* ---------------------------------------------------------
     4) Mega menu grid: equal-height columns, top-aligned content
     --------------------------------------------------------- */
  #hhs-main-nav .mega-menu .row{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    column-gap: 22px !important;
  }

  #hhs-main-nav .mega-menu .row > [class*="col-"]{
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* FIX: prevents “pushed to bottom” */
    align-items: stretch !important;

    background: #fff !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.06) !important;

    padding: 14px 18px !important;
  }

  /* width math by layout type (same as before) */
  #hhs-main-nav .mega-menu-1 .row > .col-3{
    flex: 0 0 calc((100% - (22px * 3)) / 4) !important;
  }
  #hhs-main-nav .mega-menu-2 .row > .col-4,
  #hhs-main-nav .mega-menu-6 .row > .col-4{
    flex: 0 0 calc((100% - (22px * 2)) / 3) !important;
  }
  #hhs-main-nav .mega-menu-3 .row > .col-6,
  #hhs-main-nav .mega-menu-5 .row > .col-6{
    flex: 0 0 calc((100% - 22px) / 2) !important;
  }

  /* ---------------------------------------------------------
     5) Typography inside mega menu only
     --------------------------------------------------------- */
  #hhs-main-nav .mega-menu,
  #hhs-main-nav .mega-menu *{
    font-family: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  }

  /* ---------------------------------------------------------
     6) Rich text wrapper resets (keeps headers near top)
     --------------------------------------------------------- */
  #hhs-main-nav .mega-menu .mega-text-con{
    margin: 0 !important;
    padding: 0 !important;
  }

  #hhs-main-nav .mega-menu .mega-text-con > *:first-child{
    margin-top: 0 !important;
  }

  /* ---------------------------------------------------------
     7) List items: remove grey hover box + lift
     --------------------------------------------------------- */
  #hhs-main-nav .mega-menu ul{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #hhs-main-nav .mega-menu li{
    margin: 0 !important;
    padding: 0 !important;
  }

  #hhs-main-nav .mega-menu li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 7px 10px !important;
    margin: 0 !important;

    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    text-decoration: none !important;

    box-shadow: none !important;
    transform: none !important;
  }

  #hhs-main-nav .mega-menu li > a:hover{
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* ---------------------------------------------------------
     8) Column header “button” (.mm-colhead)
     (only affects injected header markup)
     --------------------------------------------------------- */
  #hhs-main-nav .mega-menu a[href="javascript:void(0);"]{
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .mm-colhead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;

    margin: 0 0 12px 0;
    padding: 10px 12px;

    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;

    color: #FF9902;
    border: 2px solid #FF9902;
    border-radius: 8px;
    background: transparent;

    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }

  .mm-colhead__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: currentColor;
    flex: 0 0 auto;
  }

  .mm-colhead__icon svg{
    width: 18px;
    height: 18px;
    display: block;
    transform: none !important;
  }

  .mm-colhead:hover,
  .mm-colhead:focus-visible{
    background: #205170;
    border-color: #205170;
    color: #ffffff;
    outline: none;
  }

  .mm-colhead:hover .mm-colhead__icon,
  .mm-colhead:focus-visible .mm-colhead__icon{
    background: rgba(255,255,255,.15);
    transform: translateX(2px) translateY(-1px);
  }

  /* ---------------------------------------------------------
     9) CTA blue panel (ONLY panel + image/layout; no button styling)
     --------------------------------------------------------- */
  #hhs-main-nav .mega-menu-1 .mega-cta-col{
    min-height: 420px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;

    background: #205170 !important;
    border-radius: 10px !important;
    padding: 22px 16px !important;
    box-sizing: border-box !important;
  }

  #hhs-main-nav .mega-menu-1 .mega-cta-col__img{
    max-width: 92% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  #hhs-main-nav .mega-menu-1 .mega-cta-col__btn{
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Make sure nothing hides the button */
  #hhs-main-nav .mega-menu-1 .mega-cta-col__btn a{
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ---------------------------------------------------------
     10) No animations inside mega menu (reduces flicker)
     --------------------------------------------------------- */
  #hhs-main-nav .mega-menu *{
    animation: none !important;
  }
  #hhs-main-nav .mega-menu{
    transition: none !important;
  }
}
@media (min-width: 992px){

  /* =========================================================
     A) If a link uses your injected .mm-item wrapper,
        force the row layout + kill any native theme icons/SVGs
     ========================================================= */

  /* Ensure the link is a clean row (no weird stretching) */
  #hhs-main-nav .mega-menu li > a:has(.mm-item){
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  /* Hide any theme-provided SVGs/icons inside that same link
     (prevents huge default globes / double icons) */
  #hhs-main-nav .mega-menu li > a:has(.mm-item) > svg,
  #hhs-main-nav .mega-menu li > a:has(.mm-item) svg{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* =========================================================
     B) Your injected wrapper styles (restores the old behavior)
     ========================================================= */

  #hhs-main-nav .mega-menu a .mm-item{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #hhs-main-nav .mega-menu a .mm-item__icon{
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* orange “paint blob” behind icon */
  #hhs-main-nav .mega-menu a .mm-item__icon::before{
    content: "" !important;
    position: absolute !important;
    inset: -6px !important;
    border-radius: 999px !important;
    background: rgba(255,153,2,0) !important;
    transform: scale(0.92) !important;
    opacity: 0 !important;
    transition:
      opacity 220ms ease,
      transform 260ms cubic-bezier(.2,.9,.2,1),
      background 220ms ease;
  }

  #hhs-main-nav .mega-menu a:hover .mm-item__icon::before{
    background: rgba(255,153,2,0.28) !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  /* lock icon size so it NEVER blows up */
  #hhs-main-nav .mega-menu a .mm-item__icon img,
  #hhs-main-nav .mega-menu a .mm-item__icon svg{
    position: relative !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    display: block !important;
  }

  #hhs-main-nav .mega-menu a .mm-item__label{
    font-weight: 650 !important;
    color: #205170 !important;
  }

  /* =========================================================
     C) Extra safety: if the theme sets huge SVG sizes globally,
        prevent ANY svg/img inside mega menu links from exceeding
        a sane size — but only for links that use mm-item.
     ========================================================= */
  #hhs-main-nav .mega-menu li > a:has(.mm-item) img{
    max-width: 16px !important;
    height: auto !important;
  }
}