/* All styles are scoped under .ecs-nav-root so they cannot leak
    into the rest of the host page. CSS variables live on the root too. */
     .ecs-nav-root {
         /* display: contents removes this element's own box so the sticky
      child can scroll against the host page, not this wrapper. */
         display: contents;
         --ecs-brand-dark: #0a3d6b;
         --ecs-brand-darker: #0b2f55;
         --ecs-brand-blue: #1a8fe3;
         --ecs-ink: #0f2a44;
         --ecs-muted: #6b7a8c;
         --ecs-line: #e5eaf0;
         font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
         color: var(--ecs-ink);
     }








     /* font/color need to be applied to the sticky wrapper too since
    display:contents elements don't render their own styles. */
     .ecs-nav-sticky {
         font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
         color: var(--ecs-ink);
     }








     .ecs-nav-root *,
     .ecs-nav-root *::before,
     .ecs-nav-root *::after {
         box-sizing: border-box;
     }








     /* ---------- sticky floating wrapper ---------- */
     .ecs-nav-sticky {
         position: sticky;
         top: 16px;
         z-index: 1040;
         padding: 0 12px;
     }








     .ecs-nav-floating {
         /* max-width: 1280px; */
         margin: 0 auto;
         border-radius: 24px;
         background: var(--white, #FFF);
         box-shadow: 0px 0px 40px 1px #FFF;
         border: 1px solid var(--Stroke-1, #E0E0E0);
         position: relative;
         transition: box-shadow .25s ease, border-radius .25s ease;
     }








     .ecs-nav-floating.ecs-is-open {
         box-shadow: 0px 0px 40px 1px #FFF;








         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }








     /* ---------- top visible bar ---------- */
     .ecs-nav-top {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 20px 22px;
         min-height: 72px;
     }








     /* brand */
     .ecs-brand {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         text-decoration: none;
         white-space: nowrap;
     }








     .ecs-brand-badge {
         width: 34px;
         height: 34px;
         border-radius: 50%;
         background: linear-gradient(135deg, #2a9fe8 0%, #1a7cc8 100%);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
     }








     .ecs-brand-badge svg {
         width: 18px;
         height: 18px;
     }








     .ecs-brand-text {
         font-size: 22px;
         font-weight: 700;
         letter-spacing: .2px;
     }








     .ecs-brand-text img {
         width: 160px;
     }








     .ecs-brand-text .ecs-dark {
         color: var(--ecs-brand-dark);
     }








     .ecs-brand-text .ecs-light {
         color: var(--ecs-brand-blue);
         font-weight: 500;
     }








     .ecs-brand-sep {
         width: 1px;
         height: 34px;
         background: #dbe4ee;
         margin: 0 6px;
     }








     /* menu */
     .ecs-nav-menu {
         display: flex;
         align-items: center;
         gap: 6px;
         flex: 1 1 auto;
     }








     .ecs-nav-link {
         position: relative;








         padding: 10px 9px;
         border-radius: 8px;
         display: inline-flex;
         align-items: center;
         gap: 6px;
         cursor: pointer;
         user-select: none;
         text-decoration: none;
         transition: color .2s ease;








         color: var(--Grey-1, #4F4F4F);
         font-family: Manrope;
         font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
         font-style: normal;
         font-weight: 400;
         line-height: 120%;
         /* 21.6px */
     }








     .ecs-nav-link .ecs-caret {
         font-size: 14px;
         color: #4F4F4F;
         transition: transform .25s ease;
     }








     .ecs-nav-link:hover,
     .ecs-nav-link.ecs-is-active {
         color: #4F4F4F;
         font-family: Manrope;
         font-weight: 600;
         line-height: 120%;
         /* 21.6px */
     }








     .ecs-nav-link.ecs-is-active .ecs-caret {
         transform: rotate(180deg);








         color: #4F4F4F;
         font-family: Manrope;
         font-weight: 700;
         line-height: 120%;
         /* 21.6px */
     }








     /* action buttons */
     .ecs-nav-actions {
         display: inline-flex;
         gap: 10px;
         align-items: center;
         margin-left: auto;
     }








     .ecs-btn-outline {
         border-radius: 20px;
         border: 1.5px solid #267E5E;
         padding: 18px 16px;








         color: var(--Primary-1, #267E5E);
         text-align: center;
         font-feature-settings: 'liga' off, 'clig' off;
         font-family: Manrope;
         font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
         font-style: normal;
         font-weight: 600;
         line-height: normal;








         white-space: nowrap;
         text-decoration: none;
     }








     .ecs-btn-outline:hover {
         box-shadow: 0px 4px 14px #B1DDFF !important;
     }








     .ecs-btn-solid {








         white-space: nowrap;
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         gap: 8px;
















         border-radius: 20px;
         background: #267E5E;
         padding: 18px 16px;








         color: var(--white, #FFF);
         text-align: center;
         font-feature-settings: 'liga' off, 'clig' off;
         font-family: Manrope;
         font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
         font-style: normal;
         font-weight: 600;
         line-height: normal;
         width: max-content;
         border: none !important;
     }








     .ecs-btn-solid:hover {
         box-shadow: 0px 4px 14px #B1DDFF !important;
         color: #fff;
     }








     .ecs-btn-solid .bi-send-fill {
         transform: rotate(-30deg);
     }








     /* mobile hamburger */
     .ecs-nav-burger {
         display: none;
         width: 44px;
         height: 40px;
         border-radius: 8px;
         background: transparent;
         border: none;
         align-items: center;
         justify-content: center;
         color: var(--ecs-ink);
         margin-left: auto;
         cursor: pointer;
     }








     .ecs-nav-burger i {
         font-size: 24px;
     }








     /* ---------- mega menu (expand area, overlays content below) ---------- */
     .ecs-nav-mega {
         position: absolute;
         top: 100%;
         left: -1px;
         right: -1px;
         background: #ffffff;
         border-left: 1px solid var(--Stroke-1, #E0E0E0);
         border-right: 1px solid var(--Stroke-1, #E0E0E0);
         border-bottom: 1px solid var(--Stroke-1, #E0E0E0);
         border-radius: 0 0 24px 24px;
         margin-top: -1px;
         max-height: 0;
         overflow: hidden;
         opacity: 0;
         visibility: hidden;
         box-shadow: 0 20px 40px rgba(10, 61, 107, 0);
         transition: max-height .35s ease, opacity .25s ease, box-shadow .25s ease;
         z-index: 1;
     }








     .ecs-nav-mega.ecs-is-open {
         max-height: max-content;
         opacity: 1;
         visibility: visible;
         box-shadow: 0px 0px 40px 1px #FFF;








     }








     .ecs-mega-inner {
         padding: 24px 26px 28px;
         display: grid;
         grid-template-columns: 1.6fr 1fr;
         gap: 28px;
         padding-top: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
     }








     .ecs-mega-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         column-gap: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
         row-gap: calc(18px + (28 - 18) * ((100vw - 320px) / (1920 - 320)));
     }








     .ecs-mega-item {
         display: flex;
         gap: 14px;
         text-decoration: none;
         color: inherit;
         padding: 4px;
         border-radius: 8px;
         transition: background .2s ease;
         height: max-content;
         align-items: center;
     }




.ecs-nav-link > span {
  display: inline-block;
  position: relative;
}
.ecs-nav-link > span::after {
  content: attr(data-text);
  display: block;
  font-weight: 600;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}



     .ecs-mega-item:hover {
         background: #bef0de69;
         height: max-content;
     }








     .ecs-mega-icon {
         flex: 0 0 36px;
         width: 36px;
         height: 36px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         background: #eaf4fc;
         border-radius: 8px;
         color: var(--ecs-brand-blue);
     }








     .ecs-mega-icon i {
         font-size: 18px;
     }








     .ecs-mega-item h6 {
         margin: 0 0 4px;
         color: #267E5E;
         font-family: Manrope;
         font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
         font-style: normal;
         font-weight: 600;
         line-height: 150%;
         /* 27px */
     }








     .ecs-mega-item p {
         margin: 0;
         color: var(--Grey-1, #4F4F4F);
         font-family: Manrope;
         font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
         font-style: normal;
         font-weight: 400;
         line-height: 150%;
         /* 24px */
     }








     /* aside blog card */
     .ecs-mega-aside {
         border-left: 1px solid var(--ecs-line);
         padding-left: 26px;
         display: flex;
         flex-direction: column;
         gap: 12px;
     }








     .ecs-mega-thumb {
         width: 100%;
         height: 120px;
         border-radius: 10px;
         background: url('https://images.unsplash.com/photo-1517430816045-df4b7de11d1d?auto=format&fit=crop&w=800&q=60') center/cover no-repeat;
     }








     .ecs-blog-link {








         text-decoration: none;
         display: inline-flex;
         align-items: center;
         gap: 6px;








         color: #267E5E;
         font-family: Manrope;
         font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
         font-style: normal;
         font-weight: 600;
         line-height: 150%;
         /* 27px */
     }








     .ecs-blog-link:hover {
         text-decoration: underline;
         color: var(--ecs-brand-dark);
     }








     .ecs-mega-aside p {
         margin: 0;
         color: var(--Grey-1, #4F4F4F);
         font-family: Manrope;
         font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
         font-style: normal;
         font-weight: 400;
         line-height: 150%;
         /* 24px */
     }








     /* ---------- offcanvas (mobile) ---------- */
     .ecs-offcanvas {
         background: #ffffff;
         width: 100% !important;
     }








     .ecs-offcanvas .offcanvas-header {
         padding: 18px 22px;
         border-bottom: 1px solid transparent;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }








     .ecs-offcanvas .offcanvas-body {
         padding: 8px 22px 24px;
     }








     .ecs-close {
         background: transparent;
         border: none;
         font-size: 24px;
         color: var(--ecs-brand-dark);
         line-height: 1;
         padding: 0;
     }








     .ecs-acc-item {
         border-bottom: 1px solid var(--ecs-line);
     }








     .ecs-acc-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 18px 2px;
         cursor: pointer;
         font-size: 16px;
         font-weight: 600;
         color: var(--ecs-ink);
         user-select: none;
     }




     .ecs-acc-header a{
      color: var(--ecs-ink);
     }








     .ecs-acc-item.ecs-is-open>.ecs-acc-header {
         color: var(--ecs-brand-dark);
     }








     .ecs-acc-icon {
         font-size: 22px;
         color: #8a99ab;
         line-height: 1;
         transition: transform .2s ease;
     }








     .ecs-acc-body {
         max-height: 0;
         overflow: hidden;
         transition: max-height .3s ease;
     }








     .ecs-acc-item.ecs-is-open>.ecs-acc-body {
         max-height: 600px;
     }








     .ecs-acc-body ul {
         list-style: none;
         margin: 0;
         padding: 4px 0 16px 22px;
     }








     .ecs-acc-body ul li a {
         display: block;
         padding: 8px 0;
         color: var(--Grey-1, #4F4F4F);
         font-family: Manrope;
         font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
         font-style: normal;
         font-weight: 400;
         line-height: 150%;
         text-decoration: none;
     }








     .ecs-acc-body ul li a:hover {
         color: var(--ecs-brand-dark);
     }








     /* ---------- responsive ---------- */
     @media (max-width: 1199.98px) {
         .ecs-nav-link {
             padding: 10px 10px;
             font-size: 14.5px;
         }








         .ecs-nav-top {
             gap: 6px;
         }
     }








     @media (max-width: 991.98px) {
         .ecs-nav-sticky {
             top: 10px;
             padding: 0 10px;
         }
















         .ecs-nav-top {
             padding: 10px 14px;
             min-height: 60px;
         }








         .ecs-nav-menu,
         .ecs-nav-actions,
         .ecs-brand-sep {
             display: none !important;
         }








         .ecs-nav-burger {
             display: inline-flex;
         }








         .ecs-nav-mega {
             display: none !important;
         }
     }








     @media (max-width: 575.98px) {
         .ecs-brand-text {
             font-size: 20px;
         }
     }
     @media (max-width:1300px) {
          .ecs-btn-outline {
              display: none !important;
          }
      }
      .ecs-acc-header a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}











 main{
      position: relative !important;
      top: -125px !important;
    }

    .hero{
      padding-top: calc(160px + (210 - 160) * ((100vw - 320px) / (1920 - 320)));
    }