@ptcwebops/ptcw-design 4.6.3 → 4.6.4

package/dist/custom-elements/index.js

@@ -972,7 +972,7 @@ const FooterForm$1 = class extends HTMLElement$1 {
   static get style() { return footerFormCss; }
 };
 
-const homepageClickableTabCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}.tab-item{cursor:pointer;color:#fff;border-radius:4px;background:var(--color-gray-11);display:flex;width:auto;min-height:72px;padding:24px;justify-content:center;align-items:center;gap:10px;align-self:stretch;color:#FFF;text-align:center;font-family:Raleway;font-size:20px;font-style:normal;font-weight:800}@media screen and (min-width: 1280px){.tab-item{width:160px}}@media only screen and (min-width: 1440px){.tab-item{width:172px}}.tab-item span{z-index:2}ptc-overlay{opacity:0;transition:opacity var(--ptc-transition-slower) var(--ptc-ease-inout)}.tab-item.active{color:#fff;position:relative}.tab-item.active::after{content:\"\";position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);width:0;height:0;border-top-width:30px;border-left:20px solid transparent;border-right:20px solid transparent}.tab-item.hp-blue.active{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-blue.active::after{border-style:solid;border-top-color:var(--color-blue-06)}.tab-item.hp-blue:hover{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-green.active{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-green.active::after{border-style:solid;border-top-color:var(--color-green-06)}.tab-item.hp-green:hover{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-red.active{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-red.active::after{border-style:solid;border-top-color:var(--color-red-06)}.tab-item.hp-red:hover{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-gray.active{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-gray.active::after{border-style:solid;border-top-color:var(--color-gray-06)}.tab-item.hp-gray:hover{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-orange.active{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.tab-item.hp-orange.active::after{border-style:solid;border-top-color:var(--color-orange-06)}.tab-item.hp-orange:hover{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}";
+const homepageClickableTabCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}.tab-item{cursor:pointer;color:#fff;border-radius:4px;background:var(--color-gray-11);display:flex;width:auto;height:-webkit-fill-available;min-height:72px;padding:24px;justify-content:center;align-items:center;gap:10px;align-self:stretch;color:#FFF;text-align:center;font-family:Raleway;font-size:20px;font-style:normal;font-weight:800}@media screen and (min-width: 1280px){.tab-item{width:160px}}@media only screen and (min-width: 1440px){.tab-item{width:172px}}.tab-item span{z-index:2}ptc-overlay{opacity:0;transition:opacity var(--ptc-transition-slower) var(--ptc-ease-inout)}.tab-item.active{color:#fff;position:relative}.tab-item.active::after{content:\"\";position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);width:0;height:0;border-top-width:30px;border-left:20px solid transparent;border-right:20px solid transparent}.tab-item.hp-blue.active{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-blue.active::after{border-style:solid;border-top-color:var(--color-blue-06)}.tab-item.hp-blue:hover{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-green.active{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-green.active::after{border-style:solid;border-top-color:var(--color-green-06)}.tab-item.hp-green:hover{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-red.active{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-red.active::after{border-style:solid;border-top-color:var(--color-red-06)}.tab-item.hp-red:hover{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-gray.active{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-gray.active::after{border-style:solid;border-top-color:var(--color-gray-06)}.tab-item.hp-gray:hover{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-orange.active{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.tab-item.hp-orange.active::after{border-style:solid;border-top-color:var(--color-orange-06)}.tab-item.hp-orange:hover{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}";
 
 const HomepageClickableTab$1 = class extends HTMLElement$1 {
   constructor() {
@@ -984,6 +984,7 @@ const HomepageClickableTab$1 = class extends HTMLElement$1 {
     this.label = undefined;
     this.activeColor = 'hp-blue';
     this.isHovered = false;
+    this.styles = undefined;
   }
   handleClick() {
     this.tabSelected.emit();
@@ -995,7 +996,7 @@ const HomepageClickableTab$1 = class extends HTMLElement$1 {
     this.isHovered = false;
   }
   render() {
-    return (h$1(Host, null, h$1("div", { class: { 'tab-item': true, 'active': this.active, [this.activeColor]: true }, onClick: () => this.handleClick(), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, (this.active || this.isHovered) ? h$1("ptc-overlay", { class: "colored-tab", "filter-color": this.activeColor, "border-radius": "radius-standard" }) : h$1("ptc-overlay", { "filter-color": "transparent", "border-radius": "radius-standard" }), h$1("span", null, this.label))));
+    return (h$1(Host, null, this.styles && h$1("style", null, this.styles), h$1("div", { class: { 'tab-item': true, 'active': this.active, [this.activeColor]: true }, onClick: () => this.handleClick(), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, (this.active || this.isHovered) ? h$1("ptc-overlay", { class: "colored-tab", "filter-color": this.activeColor, "border-radius": "radius-standard" }) : h$1("ptc-overlay", { "filter-color": "transparent", "border-radius": "radius-standard" }), h$1("span", null, this.label))));
   }
   static get style() { return homepageClickableTabCss; }
 };
@@ -6864,7 +6865,7 @@ const HomepageJumbotron$1 = class extends HTMLElement$1 {
     this.tileCount = 0;
     this.bgVideoSrc = '';
     this.bgSrc = 'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80';
-    this.jumbotron = 'light';
+    this.jumbotron = 'dark';
     this.isIframe = false;
     this.playBtnText = 'play';
     this.pauseBtnText = 'pause';
@@ -6875,6 +6876,7 @@ const HomepageJumbotron$1 = class extends HTMLElement$1 {
     this.activeButton = undefined;
     this.tileElements = [];
     this.isTransitioning = undefined;
+    this.mediaTag = "VIDEO";
   }
   componentWillLoad() {
     this.updateDefaultContent();
@@ -6941,9 +6943,7 @@ const HomepageJumbotron$1 = class extends HTMLElement$1 {
     this.activeMainTitle = activeMainTitleElement ? activeMainTitleElement.innerHTML : '';
     this.activeSubTitle = activeSubTitleElement ? activeSubTitleElement.innerHTML : '';
     this.activeButton = activeButtonElement ? activeButtonElement.innerHTML : '';
-    //this.tileCount = this.el.querySelectorAll(`[slot^="jumbotron-tile-image-${this.activeTab}"]`).length;
-    //console.log('sub tile counts: ' + this.tileCount + '; this active tab: ' + this.activeTab);
-    //this.updateTileElements();
+    this.mediaTag = activeBgVideoElement.tagName;
   }
   updateTileElements() {
     const tiles = Array.from(this.el.querySelectorAll(`[slot^="jumbotron-tile-${this.activeTab}"]`));
@@ -6958,7 +6958,7 @@ const HomepageJumbotron$1 = class extends HTMLElement$1 {
     }, 250);
   }
   render() {
-    return (h$1(Host, null, h$1("ptc-jumbotron", Object.assign({ styles: ".parent{min-height:700px; max-height:1000px;}", "jumbotron-type": this.jumbotron }, (!!this.activeBgVideoSrc && { bgVideoSrc: this.activeBgVideoSrc }), (!this.bgVideoSrc && !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "is-homepage": "true", "is-transitioning": this.isTransitioning, "sub-title": "" //sub title is coming from slot here
+    return (h$1(Host, null, h$1("ptc-jumbotron", Object.assign({ styles: ".parent{min-height:700px; max-height:1000px;}", "jumbotron-type": this.mediaTag === "VIDEO" ? 'dark-video' : 'dark' }, (!!this.activeBgVideoSrc && { bgVideoSrc: this.activeBgVideoSrc }), (!this.bgVideoSrc && !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "is-homepage": "true", "is-transitioning": this.isTransitioning, "sub-title": "" //sub title is coming from slot here
       ,
       "play-button-title": this.playBtnText, "pause-button-title": this.pauseBtnText, "button-location": "allbp-bottom-right" }), h$1("slot", { name: "breadcrumb" }), h$1("h1", { slot: "main-title", class: "hp-h1" }, this.activeMainTitle), h$1("p", { slot: "hp-sub-title", class: "hp-sub-title" }, this.activeSubTitle), h$1("div", { slot: "j-cta", innerHTML: this.activeButton })), h$1("div", { class: "swiper-container", ref: el => (this.swiperContainerRef = el) }, h$1("div", { class: "swiper-wrapper" }, this.tileElements.map((tile, index) => (h$1("div", { class: "swiper-slide", key: index, innerHTML: tile.outerHTML })))), h$1("div", { class: "swiper-pagination" }))));
   }
@@ -6966,7 +6966,185 @@ const HomepageJumbotron$1 = class extends HTMLElement$1 {
   static get style() { return homepageJumbotronCss; }
 };
 
-const homepageToggledContentCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}::slotted(.title){color:var(--color-gray-10) !important;font-family:Raleway !important;font-size:24px !important;font-style:normal !important;font-weight:700 !important;line-height:30px !important;margin-top:0px !important;margin-bottom:16px !important;}::slotted(.description){color:var(--color-gray-10) !important;font-family:Raleway !important;font-size:18px !important;font-style:normal !important;font-weight:400 !important;line-height:27px !important;margin-top:0px !important;margin-bottom:0px !important;}::slotted(.tab-slot-image){height:500px;width:auto;margin-bottom:32px}@media screen and (min-width: 992px){::slotted(.tab-slot-image){margin-bottom:unset;height:auto}}.header{text-align:center;margin-bottom:20px}@media only screen and (min-width: 992px){.header{width:70%}}.tabs{display:flex;justify-content:center;margin-bottom:64px;position:relative;z-index:99}.tabs-desktop{display:flex;gap:24px}.tabs-mobile{display:none;position:relative}.dropdown-button{color:white;padding:24px;border:none;border-radius:var(--ptc-border-radius-standard);cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold);text-align:left}.dropdown-button.opened{border-radius:var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px}.dropdown-button.hp-blue{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.dropdown-button.hp-green{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.dropdown-button.hp-red{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.dropdown-button.hp-gray{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.dropdown-button.hp-orange{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.dropdown-button .arrow{margin-left:24px}.dropdown-menu{position:absolute;width:calc(100% - 2px);background-color:var(--color-white);color:var(--color-gray-10);display:flex;flex-direction:column;border-radius:0px 0px var(--ptc-border-radius-standard) var(--ptc-border-radius-standard);border-top:0px;box-shadow:var(--ptc-shadow-medium)}.dropdown-menu .dropdown-item{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-regular)}.dropdown-item{padding:24px 24px 0px 24px;cursor:pointer}.dropdown-item:last-of-type{padding-bottom:24px}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover ::slotted(.tab-label){font-weight:var(--ptc-font-weight-bold)}@media (max-width: 992px){.tabs-desktop{display:none}.tabs-mobile{display:block;width:100%}}.content{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;overflow:hidden}.tab-content{display:none;opacity:0;flex-direction:column;width:100%;animation:fadeIn var(--ptc-transition-medium) ease-in-out forwards}.tab-content.active-tab{display:flex;opacity:1}@media only screen and (min-width: 992px){.tab-content{flex-wrap:nowrap;flex-direction:row;width:100%;justify-content:center;align-items:center;gap:56px}}.tab-content img{max-width:100%;width:100%;height:auto;margin-bottom:20px}@media only screen and (min-width: 992px){.tab-content img{width:580px;height:733px;flex-shrink:0}}.content-detail{text-align:left}@media only screen and (min-width: 992px){.content-detail{flex-grow:1;overflow:hidden;word-break:break-word}}.content-detail p,.content-detail h2{margin-block-start:unset;margin-block-end:unset}.content-detail h2{margin-bottom:16px}.content-detail p{margin-bottom:32px}.info-card-wrapper{margin-top:72px;display:flex;justify-content:center;align-items:center;width:100%}.card-section{display:flex;position:relative;flex-wrap:nowrap;flex-shrink:0;-ms-overflow-style:none;scrollbar-width:none;transition:box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);justify-content:flex-start}.card-section::-webkit-scrollbar{display:none}.card-section .card-link{display:inline-flex;position:relative;text-decoration:none;z-index:10;align-items:center;gap:16px;margin-right:24px}.card-section .card-link .link-text{display:block;inline-size:190px;white-space:break-spaces}.card-section:before{position:absolute;width:32px;background:linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);top:16px;right:0;bottom:0;z-index:12}.card-section.scroll-st{box-shadow:inset 2px 0px 0px rgba(255, 255, 255, 0.3)}.card-section.scroll-ed{box-shadow:inset -2px 0px 0px rgba(255, 255, 255, 0.3)}.card-section.scroll-ed.scroll-st{box-shadow:inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3)}@media only screen and (min-width: 1200px){.card-section{align-items:flex-start;justify-content:flex-start;align-content:flex-start}.card-section.scroll-st,.card-section.scroll-ed,.card-section.scroll-ed.scroll-st{box-shadow:unset}.card-section .card-link{flex:unset}.card-section .card-link:first-child{margin-left:0}.card-section .card-link:last-child{margin-right:0}}.card-section{overflow:inherit;overflow-x:scroll;overflow-y:hidden;animation-duration:0ms;animation-delay:1000ms;animation-fill-mode:forwards}@media only screen and (min-width: 1200px){.card-section{overflow-x:scroll}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}";
+function format(first, middle, last) {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+function MapDOM(domElement, selector, toString) {
+  let element = selector ? domElement.querySelector(selector) : domElement;
+  let treeObject = {};
+  let translate = (name) => {
+    return name.toLowerCase().replace(/(-\w)/g, text => {
+      return text.replace(/-/, '').toUpperCase();
+    });
+  };
+  let hasContent = (element) => {
+    let result = true;
+    if (/^\s*$/.test(element.textContent)) {
+      result = false;
+    }
+    return result;
+  };
+  let treeHTML = (element, object) => {
+    //let nodeName = translate(element.nodeName);
+    let nodeList = element.childNodes;
+    if (nodeList && nodeList.length > 0) {
+      for (let i = 0; i < nodeList.length; i++) {
+        let elm = nodeList[i];
+        if (elm.nodeType == 1) {
+          let letChildNodeName = translate(elm.nodeName);
+          if (!object[letChildNodeName]) {
+            object[letChildNodeName] = [];
+          }
+          object[letChildNodeName].push({});
+          treeHTML(elm, object[letChildNodeName][object[letChildNodeName].length - 1]);
+        }
+        else if (elm.nodeType == 3 && hasContent(elm)) {
+          object['text'] = (object['text'] || '') + elm.textContent;
+        }
+      }
+      for (const property in object) {
+        if (Array.isArray(object[property]) && object[property].length == 1) {
+          object[property] = object[property][0];
+        }
+      }
+    }
+    if (element.attributes && element.attributes.length > 0) {
+      for (let i = 0; i < element.attributes.length; i++) {
+        let name = translate(element.attributes[i].nodeName);
+        object[name] = element.attributes[i].nodeValue;
+      }
+    }
+    if (element.getAttribute('html') == 'true') {
+      object['html'] = element.innerHTML;
+    }
+  };
+  treeHTML(element, treeObject);
+  return toString ? JSON.stringify(treeObject) : treeObject;
+}
+function generateUUID() {
+  let s4 = () => {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  };
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
+function debounce(func, wait, referer) {
+  let key = generateUUID();
+  if (!globalThis.debounceTimeouts) {
+    globalThis.debounceTimeouts = {};
+  }
+  return function executedFunction(e) {
+    var context = referer || this;
+    var args = e;
+    var callback = function () {
+      func(context, args);
+    };
+    clearTimeout(globalThis.debounceTimeouts[key]);
+    globalThis.debounceTimeouts[key] = setTimeout(callback, wait);
+  };
+}
+function getFileExtension(filePath) {
+  if (filePath === undefined) {
+    throw new Error('filePath is not defined');
+  }
+  const lastDotIndex = filePath.lastIndexOf('.');
+  if (lastDotIndex === -1) {
+    // no extension found
+    return '';
+  }
+  return filePath.substring(lastDotIndex);
+}
+function getLanguageFromURL() {
+  const urlPath = window.location.pathname;
+  const parts = urlPath.split('/');
+  const supportedLanguages = ['en', 'cn', 'tw', 'fr', 'de', 'it', 'ja', 'ko', 'es', 'pt'];
+  const languageCode = parts[1];
+  if (supportedLanguages.includes(languageCode)) {
+    return languageCode;
+  }
+  return 'en';
+}
+function getSeoTagType(element, defaultTag = "span") {
+  if (element && element.children && element.children.length == 1) {
+    let firstChild = element.children[0];
+    let TagType = firstChild.tagName.toLowerCase();
+    element.removeChild(firstChild);
+    if (TagType == "font") {
+      TagType = defaultTag;
+    }
+    return [TagType, firstChild];
+  }
+  else {
+    return [defaultTag, element];
+  }
+}
+function seoSlotReset(element) {
+  if (element && element.children && element.children.length == 1) {
+    let firstChild = element.firstElementChild;
+    element.innerHTML = firstChild.innerHTML;
+  }
+}
+//for elements in the shadow dom
+function equalizeHeightsWithinShadow(selector, shadowRootOrHostElement) {
+  let elements;
+  // Determine if we're working with a shadow root or a host element that has a shadowRoot
+  if (shadowRootOrHostElement instanceof DocumentFragment) { // ShadowRoot is a kind of DocumentFragment
+    elements = shadowRootOrHostElement.querySelectorAll(selector);
+  }
+  else if (shadowRootOrHostElement.shadowRoot) {
+    elements = shadowRootOrHostElement.shadowRoot.querySelectorAll(selector);
+  }
+  else {
+    console.error("The provided element does not have a shadowRoot.");
+    return;
+  }
+  let tallestHeight = 0;
+  // Find the tallest element
+  elements.forEach((element) => {
+    const height = element.offsetHeight;
+    if (height > tallestHeight) {
+      tallestHeight = height;
+    }
+  });
+  // Set all elements to the tallest height
+  elements.forEach((element) => {
+    element.style.height = `${tallestHeight}px`;
+  });
+}
+/*
+  observeInView:
+    Trigger CSS Animations when elements are scrolled into view
+
+    This function uses the Intersection Observer API to determine if objects are within the viewport
+    It adds an 'in-view' class to elements when they come into view (and removes the class when not on screen)
+    Use to add @keyframe or transition animations to elements so they animate once they are on screen
+
+  How to use:
+    Import observeInView function in the component
+      import { observeInView } from '../../utils/utils';
+    Call the function with the host element and selector
+      observeInView(this.hostEle, '.ptc-animate');
+
+*/
+function observeInView(hostEle, selector, runOnce = false) {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('in-view');
+        if (runOnce) {
+          observer.unobserve(entry.target);
+        }
+        return;
+      }
+      entry.target.classList.remove('in-view');
+    });
+  });
+  const allAnimatedElements = hostEle.shadowRoot.querySelectorAll(selector);
+  allAnimatedElements.forEach((element) => observer.observe(element));
+}
+
+const homepageToggledContentCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}::slotted(.title){color:var(--color-gray-10) !important;font-family:Raleway !important;font-size:24px !important;font-style:normal !important;font-weight:700 !important;line-height:30px !important;margin-top:0px !important;margin-bottom:16px !important;}::slotted(.description){color:var(--color-gray-10) !important;font-family:Raleway !important;font-size:18px !important;font-style:normal !important;font-weight:400 !important;line-height:27px !important;margin-top:0px !important;margin-bottom:0px !important;}::slotted(.tab-slot-image){height:500px;width:auto;object-fit:contain;margin-bottom:32px}@media screen and (min-width: 992px){::slotted(.tab-slot-image){margin-bottom:unset;height:auto}}.header{text-align:center;margin-bottom:20px}@media only screen and (min-width: 992px){.header{width:70%}}.tabs{display:flex;justify-content:center;margin-bottom:64px;position:relative;z-index:99}.tabs-desktop{display:flex;gap:24px;flex:1}.tabs-desktop homepage-clickable-tab{flex:1 1 122px}.tabs-mobile{display:none;position:relative}.dropdown-button{color:white;padding:24px;border:none;border-radius:var(--ptc-border-radius-standard);cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold);text-align:left}.dropdown-button.opened{border-radius:var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px}.dropdown-button.hp-blue{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.dropdown-button.hp-green{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.dropdown-button.hp-red{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.dropdown-button.hp-gray{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.dropdown-button.hp-orange{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.dropdown-button .arrow{margin-left:24px}.dropdown-menu{position:absolute;width:calc(100% - 2px);background-color:var(--color-white);color:var(--color-gray-10);display:flex;flex-direction:column;border-radius:0px 0px var(--ptc-border-radius-standard) var(--ptc-border-radius-standard);border-top:0px;box-shadow:var(--ptc-shadow-medium)}.dropdown-menu .dropdown-item{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-regular)}.dropdown-menu .dropdown-item.active-tab ::slotted(.tab-label){font-weight:var(--ptc-font-weight-bold) !important}.dropdown-item{padding:24px 24px 0px 24px;cursor:pointer}.dropdown-item:last-of-type{padding-bottom:24px}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover ::slotted(.tab-label){font-weight:var(--ptc-font-weight-bold)}@media (max-width: 992px){.tabs-desktop{display:none}.tabs-mobile{display:block;width:100%}}.content{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;overflow:hidden}.tab-content{display:none;opacity:0;flex-direction:column;width:100%;animation:fadeIn var(--ptc-transition-medium) ease-in-out forwards}.tab-content.active-tab{display:flex;opacity:1}@media only screen and (min-width: 992px){.tab-content{flex-wrap:nowrap;flex-direction:row;width:100%;justify-content:center;align-items:center;gap:56px}}.tab-content img{max-width:100%;width:100%;height:auto;margin-bottom:20px}@media only screen and (min-width: 992px){.tab-content img{width:580px;height:733px;flex-shrink:0}}.content-detail{text-align:left}@media only screen and (min-width: 992px){.content-detail{flex-grow:1;overflow:hidden;word-break:break-word}}.content-detail p,.content-detail h2{margin-block-start:unset;margin-block-end:unset}.content-detail h2{margin-bottom:16px}.content-detail p{margin-bottom:32px}.info-card-wrapper{margin-top:72px;display:flex;justify-content:center;align-items:center;width:100%}.card-section{display:flex;position:relative;flex-wrap:nowrap;flex-shrink:0;-ms-overflow-style:none;scrollbar-width:none;transition:box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);justify-content:flex-start}.card-section::-webkit-scrollbar{display:none}.card-section .card-link{display:inline-flex;position:relative;text-decoration:none;z-index:10;align-items:center;gap:16px;margin-right:24px}.card-section .card-link .link-text{display:block;inline-size:190px;white-space:break-spaces}.card-section:before{position:absolute;width:32px;background:linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);top:16px;right:0;bottom:0;z-index:12}.card-section.scroll-st{box-shadow:inset 2px 0px 0px rgba(255, 255, 255, 0.3)}.card-section.scroll-ed{box-shadow:inset -2px 0px 0px rgba(255, 255, 255, 0.3)}.card-section.scroll-ed.scroll-st{box-shadow:inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3)}@media only screen and (min-width: 1200px){.card-section{align-items:flex-start;justify-content:flex-start;align-content:flex-start}.card-section.scroll-st,.card-section.scroll-ed,.card-section.scroll-ed.scroll-st{box-shadow:unset}.card-section .card-link{flex:unset}.card-section .card-link:first-child{margin-left:0}.card-section .card-link:last-child{margin-right:0}}.card-section{overflow:inherit;overflow-x:scroll;overflow-y:hidden;animation-duration:0ms;animation-delay:1000ms;animation-fill-mode:forwards}@media only screen and (min-width: 1200px){.card-section{overflow-x:scroll}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}";
 
 const HomepageToggledContent$1 = class extends HTMLElement$1 {
   constructor() {
@@ -6995,6 +7173,9 @@ const HomepageToggledContent$1 = class extends HTMLElement$1 {
     //this.onSliderScroll();
     //observeInView(this.el, '.card-section', true);
   }
+  componentDidRender() {
+    equalizeHeightsWithinShadow('homepage-clickable-tab', this.el);
+  }
   handleTabSelected(tabIndex) {
     this.activeTab = tabIndex;
     this.dropdownOpen = false; // Close dropdown on selection
@@ -7072,7 +7253,7 @@ const HomepageToggledContent$1 = class extends HTMLElement$1 {
     const upArrow = (h$1("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h$1("path", { d: "M13 8.5L7.34315 2.71178L1.68629 8.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const downArrow = (h$1("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h$1("path", { d: "M13 2.5L7.34315 8.28822L1.68629 2.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const tabs = this.getTabs();
-    return (h$1("div", { class: "wrapper" }, h$1("div", { class: "header" }, h$1("h2", null, h$1("slot", { name: "title" })), h$1("p", null, h$1("slot", { name: "description" }))), h$1("div", { class: "tabs" }, h$1("div", { class: "tabs-desktop" }, tabs.map(tab => (h$1("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h$1("div", { class: "tabs-mobile" }, h$1("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? 'opened' : ''}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h$1("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h$1("div", { class: "dropdown-menu" }, tabs.map(tab => (h$1("div", { class: "dropdown-item", onClick: () => this.handleTabSelected(tab.index) }, h$1("slot", { name: `tab-label-${tab.index}` })))))))), h$1("div", { class: "content" }, tabs.map((tab, index) => (h$1("div", { class: `tab-content ${this.activeTab === index ? 'active-tab' : ''}` }, h$1("slot", { name: `tab-image-${index}` }), h$1("div", { class: "content-detail" }, h$1("div", { hidden: true }, tab.label), h$1("h2", null, h$1("slot", { name: `tab-title-${index}` })), h$1("p", null, h$1("slot", { name: `tab-content-${index}` })), h$1("slot", { name: `tab-button-${index}` }), this.activeTab === index && this.tileElements.length > 0 ? (h$1("div", Object.assign({ class: "info-card-wrapper card-section" }, this.getSliderBindings()), this.tileElements.map((tile, index) => (h$1("div", { class: `swiper-slide card-link card-link-${index + 1}`, "tab-index": index + 1, key: index, innerHTML: tile.outerHTML, onMouseDown: e => this.onCardMouseDown(e), onMouseUp: e => this.onCardMouseUp(e), onMouseLeave: e => this.onCardMouseUp(e), onTouchEnd: e => {
+    return (h$1("div", { class: "wrapper" }, h$1("div", { class: "header" }, h$1("h2", null, h$1("slot", { name: "title" })), h$1("p", null, h$1("slot", { name: "description" }))), h$1("div", { class: "tabs" }, h$1("div", { class: "tabs-desktop" }, tabs.map(tab => (h$1("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h$1("div", { class: "tabs-mobile" }, h$1("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? 'opened' : ''}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h$1("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h$1("div", { class: "dropdown-menu" }, tabs.map(tab => (h$1("div", { class: `dropdown-item ${tab.index === this.activeTab ? 'active-tab' : ''}`, onClick: () => this.handleTabSelected(tab.index) }, h$1("slot", { name: `tab-label-${tab.index}` })))))))), h$1("div", { class: "content" }, tabs.map((tab, index) => (h$1("div", { class: `tab-content ${this.activeTab === index ? 'active-tab' : ''}` }, h$1("slot", { name: `tab-image-${index}` }), h$1("div", { class: "content-detail" }, h$1("div", { hidden: true }, tab.label), h$1("h2", null, h$1("slot", { name: `tab-title-${index}` })), h$1("p", null, h$1("slot", { name: `tab-content-${index}` })), h$1("slot", { name: `tab-button-${index}` }), this.activeTab === index && this.tileElements.length > 0 ? (h$1("div", Object.assign({ class: "info-card-wrapper card-section" }, this.getSliderBindings()), this.tileElements.map((tile, index) => (h$1("div", { class: `swiper-slide card-link card-link-${index + 1}`, "tab-index": index + 1, key: index, innerHTML: tile.outerHTML, onMouseDown: e => this.onCardMouseDown(e), onMouseUp: e => this.onCardMouseUp(e), onMouseLeave: e => this.onCardMouseUp(e), onTouchEnd: e => {
         console.log('yes');
         this.onCardMouseUp(e);
       } }))))) : null)))))));
@@ -7163,7 +7344,7 @@ const InnovatorToggleContainer$1 = class extends HTMLElement$1 {
   static get style() { return innovatorToggleContainerCss; }
 };
 
-const jumbotronSubMenuCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.menu{display:block;background-color:transparent;color:black;position:relative}.menu-list{list-style:none;margin:0;padding:10px 0;display:none;flex-direction:column;background-color:white;width:240px;position:absolute;top:40px;left:0;margin-top:var(--ptc-element-spacing-03);box-shadow:var(--ptc-shadow-x-small);border-radius:var(--ptc-border-radius-standard)}.menu-list.open{display:flex}.menu-list li{margin:0}.menu-list button{color:var(--color-gray-10);font-size:var(--ptc-font-size-x-small);text-decoration:none;border:none;background:none;cursor:pointer;line-height:var(--ptc-line-height-p);position:relative;text-align:left;width:100%;padding:12px 24px}.menu-list button::after{content:\"\";display:block;width:2px;height:24px;background:var(--color-green-07);transition:transform 0.3s ease;transform:scaleX(0);transform-origin:left;position:absolute;top:25%;left:10px}.menu-list button:hover::after,.menu-list button:focus::after{transform:scaleX(1);font-weight:var(--ptc-font-weight-bold)}.mobile-menu-icon{display:flex;align-items:center;cursor:pointer;font-size:var(--ptc-font-size-x-small);text-align:left;padding:8px 0px;background-color:var(--color-white);border-bottom:3px solid var(--color-white);justify-content:flex-end;width:fit-content;background-color:transparent}.mobile-menu-text{color:var(--color-white);text-align:center;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);margin-right:var(--ptc-element-spacing-03)}@media (min-width: 992px){.menu{display:flex;justify-content:center;align-items:center;background-color:transparent;padding:0px;color:white;position:relative;font-family:var(--ptc-font-latin);left:0;top:0px}.menu-list{display:flex;flex-direction:row;justify-content:center;gap:32px;background-color:transparent;width:auto;position:relative;top:auto;right:auto;box-shadow:none;border-radius:0;margin-top:0px;padding-top:0px;padding-bottom:0px}.menu-list button{text-align:center;width:auto;padding:0px;font-size:16px;color:white;font-family:var(--ptc-font-latin)}.menu-list button::after{position:absolute;width:100%;height:2px;transform-origin:bottom;bottom:0;margin-top:24px;background:var(--color-white);left:0;transform:scaleY(0)}.menu-list button:hover::after,.menu-list button:focus::after{transform:scaleY(1);font-weight:var(--ptc-font-weight-bold)}.mobile-menu-icon{display:none}}";
+const jumbotronSubMenuCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.menu{display:block;background-color:transparent;color:black;position:relative}.menu-list{list-style:none;margin:0;padding:10px 0;display:none;flex-direction:column;background-color:white;width:240px;position:absolute;top:40px;left:0;margin-top:var(--ptc-element-spacing-03);box-shadow:var(--ptc-shadow-x-small);border-radius:var(--ptc-border-radius-standard)}.menu-list.open{display:flex}.menu-list li{margin:0}.menu-list button{color:var(--color-gray-10);font-size:var(--ptc-font-size-x-small);text-decoration:none;border:none;background:none;cursor:pointer;line-height:var(--ptc-line-height-p);position:relative;text-align:left;width:100%;padding:12px 24px}.menu-list button::after{content:\"\";display:block;width:2px;height:24px;background:var(--color-green-07);transition:transform 0.3s ease;transform:scaleX(0);transform-origin:left;position:absolute;top:25%;left:10px}.menu-list button:hover::after,.menu-list button:focus::after{transform:scaleX(1);font-weight:var(--ptc-font-weight-bold)}.mobile-menu-icon{display:flex;align-items:center;cursor:pointer;font-size:var(--ptc-font-size-x-small);text-align:left;padding:8px 0px;background-color:var(--color-white);border-bottom:3px solid var(--color-white);justify-content:flex-end;width:fit-content;background-color:transparent}.mobile-menu-text{color:var(--color-white);text-align:center;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);margin-right:var(--ptc-element-spacing-03)}@media (min-width: 992px){.menu{display:flex;justify-content:center;align-items:center;background-color:transparent;padding:0px;color:white;position:relative;font-family:var(--ptc-font-latin);left:0;top:0px}.menu-list{display:flex;flex-direction:row;justify-content:center;gap:32px;background-color:transparent;width:auto;position:relative;top:auto;right:auto;box-shadow:none;border-radius:0;margin-top:0px;padding-top:0px;padding-bottom:0px}.menu-list button{text-align:center;width:auto;padding:0px;font-size:16px;color:white;font-family:var(--ptc-font-latin)}.menu-list button::after{position:absolute;width:100%;height:2px;transform-origin:bottom;bottom:0;margin-top:24px;background:var(--color-white);left:0;transform:scaleY(0)}.menu-list button:hover::after,.menu-list button:focus::after{transform:scaleY(1);font-weight:var(--ptc-font-weight-bold)}.menu-list li.active button::after{transform:scaleY(1);font-weight:var(--ptc-font-weight-bold)}.mobile-menu-icon{display:none}}";
 
 const JumbotronSubMenu$1 = class extends HTMLElement$1 {
   constructor() {
@@ -7171,6 +7352,7 @@ const JumbotronSubMenu$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.isClickable = true;
     this.isOpen = false;
     this.activeItem = 0;
   }
@@ -7178,28 +7360,22 @@ const JumbotronSubMenu$1 = class extends HTMLElement$1 {
     this.isOpen = !this.isOpen;
   }
   selectItem(index) {
-    this.activeItem = index;
-    this.isOpen = false;
-    this.itemSelected.emit(index); // Emit the custom event
-  }
-  // getMenuItemContent(index: number): string {
-  //   const slot = this.el.querySelector(`slot[name="menu-item-${index}"]`) as HTMLSlotElement;
-  //   if (slot) {
-  //     const nodes = slot.assignedNodes({ flatten: true });
-  //     if (nodes.length > 0 && nodes[0].nodeType === Node.ELEMENT_NODE) {
-  //       return (nodes[0] as HTMLElement).innerText || '';
-  //     } else if (nodes.length > 0 && nodes[0].nodeType === Node.TEXT_NODE) {
-  //       return nodes[0].textContent || '';
-  //     }
-  //   }
-  //   return '';
-  // }
+    if (this.isClickable) {
+      this.isClickable = false;
+      this.activeItem = index;
+      this.isOpen = false;
+      this.itemSelected.emit(index); // Emit the custom event
+      setTimeout(() => {
+        this.isClickable = true;
+      }, 500);
+    }
+  }
   render() {
     const upArrow = (h$1("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h$1("path", { d: "M13 8.5L7.34315 2.71178L1.68629 8.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const downArrow = (h$1("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h$1("path", { d: "M13 2.5L7.34315 8.28822L1.68629 2.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const menuItems = Array.from(this.el.querySelectorAll('[slot^="menu-item"]'));
     //console.log("menuItems: " + menuItems[0].textContent)
-    return (h$1("nav", { class: "menu" }, h$1("div", { class: "mobile-menu-icon", onClick: () => this.toggleMenu() }, h$1("span", { class: "mobile-menu-text" }, menuItems[this.activeItem].textContent), h$1("span", null, this.isOpen ? upArrow : downArrow)), h$1("ul", { class: `menu-list ${this.isOpen ? 'open' : ''}` }, menuItems.map((_, index) => (h$1("li", { key: index }, h$1("button", { onClick: () => this.selectItem(index) }, h$1("slot", { name: `menu-item-${index}` }))))))));
+    return (h$1("nav", { class: "menu" }, h$1("div", { class: "mobile-menu-icon", onClick: () => this.toggleMenu() }, h$1("span", { class: "mobile-menu-text" }, menuItems[this.activeItem].textContent), h$1("span", null, this.isOpen ? upArrow : downArrow)), h$1("ul", { class: `menu-list ${this.isOpen ? 'open' : ''}` }, menuItems.map((_, index) => (h$1("li", { key: index, class: this.activeItem === index ? 'active' : '' }, h$1("button", { onClick: () => this.selectItem(index) }, h$1("slot", { name: `menu-item-${index}` }))))))));
   }
   get el() { return this; }
   static get style() { return jumbotronSubMenuCss; }
@@ -7339,184 +7515,6 @@ const MaxWidthContainer$1 = class extends HTMLElement$1 {
   static get style() { return maxWidthContainerCss; }
 };
 
-function format(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
-function MapDOM(domElement, selector, toString) {
-  let element = selector ? domElement.querySelector(selector) : domElement;
-  let treeObject = {};
-  let translate = (name) => {
-    return name.toLowerCase().replace(/(-\w)/g, text => {
-      return text.replace(/-/, '').toUpperCase();
-    });
-  };
-  let hasContent = (element) => {
-    let result = true;
-    if (/^\s*$/.test(element.textContent)) {
-      result = false;
-    }
-    return result;
-  };
-  let treeHTML = (element, object) => {
-    //let nodeName = translate(element.nodeName);
-    let nodeList = element.childNodes;
-    if (nodeList && nodeList.length > 0) {
-      for (let i = 0; i < nodeList.length; i++) {
-        let elm = nodeList[i];
-        if (elm.nodeType == 1) {
-          let letChildNodeName = translate(elm.nodeName);
-          if (!object[letChildNodeName]) {
-            object[letChildNodeName] = [];
-          }
-          object[letChildNodeName].push({});
-          treeHTML(elm, object[letChildNodeName][object[letChildNodeName].length - 1]);
-        }
-        else if (elm.nodeType == 3 && hasContent(elm)) {
-          object['text'] = (object['text'] || '') + elm.textContent;
-        }
-      }
-      for (const property in object) {
-        if (Array.isArray(object[property]) && object[property].length == 1) {
-          object[property] = object[property][0];
-        }
-      }
-    }
-    if (element.attributes && element.attributes.length > 0) {
-      for (let i = 0; i < element.attributes.length; i++) {
-        let name = translate(element.attributes[i].nodeName);
-        object[name] = element.attributes[i].nodeValue;
-      }
-    }
-    if (element.getAttribute('html') == 'true') {
-      object['html'] = element.innerHTML;
-    }
-  };
-  treeHTML(element, treeObject);
-  return toString ? JSON.stringify(treeObject) : treeObject;
-}
-function generateUUID() {
-  let s4 = () => {
-    return Math.floor((1 + Math.random()) * 0x10000)
-      .toString(16)
-      .substring(1);
-  };
-  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-}
-function debounce(func, wait, referer) {
-  let key = generateUUID();
-  if (!globalThis.debounceTimeouts) {
-    globalThis.debounceTimeouts = {};
-  }
-  return function executedFunction(e) {
-    var context = referer || this;
-    var args = e;
-    var callback = function () {
-      func(context, args);
-    };
-    clearTimeout(globalThis.debounceTimeouts[key]);
-    globalThis.debounceTimeouts[key] = setTimeout(callback, wait);
-  };
-}
-function getFileExtension(filePath) {
-  if (filePath === undefined) {
-    throw new Error('filePath is not defined');
-  }
-  const lastDotIndex = filePath.lastIndexOf('.');
-  if (lastDotIndex === -1) {
-    // no extension found
-    return '';
-  }
-  return filePath.substring(lastDotIndex);
-}
-function getLanguageFromURL() {
-  const urlPath = window.location.pathname;
-  const parts = urlPath.split('/');
-  const supportedLanguages = ['en', 'cn', 'tw', 'fr', 'de', 'it', 'ja', 'ko', 'es', 'pt'];
-  const languageCode = parts[1];
-  if (supportedLanguages.includes(languageCode)) {
-    return languageCode;
-  }
-  return 'en';
-}
-function getSeoTagType(element, defaultTag = "span") {
-  if (element && element.children && element.children.length == 1) {
-    let firstChild = element.children[0];
-    let TagType = firstChild.tagName.toLowerCase();
-    element.removeChild(firstChild);
-    if (TagType == "font") {
-      TagType = defaultTag;
-    }
-    return [TagType, firstChild];
-  }
-  else {
-    return [defaultTag, element];
-  }
-}
-function seoSlotReset(element) {
-  if (element && element.children && element.children.length == 1) {
-    let firstChild = element.firstElementChild;
-    element.innerHTML = firstChild.innerHTML;
-  }
-}
-//for elements in the shadow dom
-function equalizeHeightsWithinShadow(selector, shadowRootOrHostElement) {
-  let elements;
-  // Determine if we're working with a shadow root or a host element that has a shadowRoot
-  if (shadowRootOrHostElement instanceof DocumentFragment) { // ShadowRoot is a kind of DocumentFragment
-    elements = shadowRootOrHostElement.querySelectorAll(selector);
-  }
-  else if (shadowRootOrHostElement.shadowRoot) {
-    elements = shadowRootOrHostElement.shadowRoot.querySelectorAll(selector);
-  }
-  else {
-    console.error("The provided element does not have a shadowRoot.");
-    return;
-  }
-  let tallestHeight = 0;
-  // Find the tallest element
-  elements.forEach((element) => {
-    const height = element.offsetHeight;
-    if (height > tallestHeight) {
-      tallestHeight = height;
-    }
-  });
-  // Set all elements to the tallest height
-  elements.forEach((element) => {
-    element.style.height = `${tallestHeight}px`;
-  });
-}
-/*
-  observeInView:
-    Trigger CSS Animations when elements are scrolled into view
-
-    This function uses the Intersection Observer API to determine if objects are within the viewport
-    It adds an 'in-view' class to elements when they come into view (and removes the class when not on screen)
-    Use to add @keyframe or transition animations to elements so they animate once they are on screen
-
-  How to use:
-    Import observeInView function in the component
-      import { observeInView } from '../../utils/utils';
-    Call the function with the host element and selector
-      observeInView(this.hostEle, '.ptc-animate');
-
-*/
-function observeInView(hostEle, selector, runOnce = false) {
-  const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        entry.target.classList.add('in-view');
-        if (runOnce) {
-          observer.unobserve(entry.target);
-        }
-        return;
-      }
-      entry.target.classList.remove('in-view');
-    });
-  });
-  const allAnimatedElements = hostEle.shadowRoot.querySelectorAll(selector);
-  allAnimatedElements.forEach((element) => observer.observe(element));
-}
-
 const numberOneSvg = `<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="17.5" cy="17.5" r="17.5" fill="#006E09"/>
 <path d="M22.224 20.0959V22.9999H12.48V20.0959H15.888V12.8239C15.744 13.0159 15.512 13.2159 15.192 13.4239C14.888 13.6159 14.552 13.7999 14.184 13.9759C13.816 14.1519 13.432 14.2959 13.032 14.4079C12.648 14.5199 12.304 14.5759 12 14.5759V11.5759C12.288 11.5759 12.64 11.4879 13.056 11.3119C13.472 11.1199 13.88 10.8959 14.28 10.6399C14.68 10.3839 15.024 10.1359 15.312 9.8959C15.616 9.6399 15.808 9.4399 15.888 9.2959H19.176V20.0959H22.224Z" fill="white"/>
@@ -7924,7 +7922,7 @@ const PtcBackToTop$1 = class extends HTMLElement$1 {
   static get style() { return ptcBackToTopCss; }
 };
 
-const ptcBackgroundVideoCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}:host video{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100;object-fit:cover}:host .video-overlay{z-index:1;display:block;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0.8;background-image:linear-gradient(270deg, rgba(30, 38, 38, 0) 26%, #1e2626)}:host .video-overlay.dark{background:linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%)}:host(.legacy){display:block;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host(.legacy) video{object-fit:cover;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden}:host .iframe-wrapper{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host .iframe-wrapper .background-video-embed{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:100%}:host .iframe-wrapper .player .vp-video-wrapper .vp-telecine-cover video{object-fit:cover}:host .play-button{position:absolute;top:1.5rem;right:1.5rem;width:34px;height:34px;z-index:99}@media (min-width: 768px){:host .play-button.top-right{top:1.5rem;right:1.5rem}}:host .play-button.top-left{right:unset;top:1.5rem;left:1.5rem}@media (min-width: 768px){:host .play-button.top-left{bottom:3.75rem;left:2rem}}@media (min-width: 768px){:host .play-button.bottom-left{top:unset;right:unset;bottom:3.75rem;left:2rem}}@media (min-width: 768px){:host .play-button.bottom-right{top:unset;bottom:3.75rem;right:2rem}}:host .play-button.allbp-bottom-right{top:unset;bottom:3.75rem;right:2rem}:host .play-button ptc-button{display:inline-block;padding:5px;position:relative;top:-5px;left:-5px;cursor:pointer}@media only screen and (min-width: 768px){:host .play-button ptc-button{top:auto;left:auto}}@media only screen and (min-width: 992px){:host .play-button ptc-button{padding:0}}";
+const ptcBackgroundVideoCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}:host video{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100;object-fit:cover}:host .video-overlay{z-index:1;display:block;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0.8;background-image:linear-gradient(270deg, rgba(30, 38, 38, 0) 26%, #1e2626)}:host .video-overlay.dark{background-color:rgba(0, 0, 0, 0.6)}:host(.legacy){display:block;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host(.legacy) video{object-fit:cover;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden}:host .iframe-wrapper{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host .iframe-wrapper .background-video-embed{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:100%}:host .iframe-wrapper .player .vp-video-wrapper .vp-telecine-cover video{object-fit:cover}:host .play-button{position:absolute;top:1.5rem;right:1.5rem;width:34px;height:34px;z-index:99}@media (min-width: 768px){:host .play-button.top-right{top:2rem;right:2rem}}:host .play-button.top-left{right:unset;top:1.5rem;left:1.5rem}@media (min-width: 768px){:host .play-button.top-left{bottom:3.75rem;left:2rem}}@media (min-width: 768px){:host .play-button.bottom-left{top:unset;right:unset;bottom:3.75rem;left:2rem}}@media (min-width: 768px){:host .play-button.bottom-right{top:unset;bottom:3.75rem;right:2rem}}:host .play-button.allbp-bottom-right{top:unset;bottom:3.75rem;right:2rem}:host .play-button ptc-button{display:inline-block;padding:5px;position:relative;top:-5px;left:-5px;cursor:pointer}@media only screen and (min-width: 768px){:host .play-button ptc-button{top:auto;left:auto}}@media only screen and (min-width: 992px){:host .play-button ptc-button{padding:0}}";
 
 const PtcBackgroundVideo$1 = class extends HTMLElement$1 {
   constructor() {
@@ -18000,7 +17998,7 @@ const PtcHomepageImageFeature$1 = class extends HTMLElement$1 {
   static get style() { return ptcHomepageImageFeatureCss; }
 };
 
-const ptcHomepageVideoBackgroundCss = "h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n  word-break: break-word;\n  hyphens: manual;\n  -webkit-hyphens: manual;\n  -moz-hyphens: manual;\n  -ms-hyphens: manual;\n}\n@supports (hyphenate-limit-chars: 12 3 3) {\n  h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n    hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    /* For Safari */\n    -webkit-hyphenate-limit-after: 3;\n    /* For Safari */\n    hyphenate-limit-chars: 12 3 3;\n    hyphenate-limit-lines: 2;\n    hyphenate-limit-last: always;\n    hyphenate-limit-zone: 6%;\n    -webkit-hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    -webkit-hyphenate-limit-after: 3;\n    -webkit-hyphenate-limit-chars: 12 3 3;\n    -webkit-hyphenate-limit-lines: 2;\n    -moz-hyphens: auto;\n    -moz-hyphenate-limit-chars: 12 3 3;\n    -moz-hyphenate-limit-lines: 2;\n    -ms-hyphens: auto;\n    -ms-hyphenate-limit-chars: 12 3 3;\n    -ms-hyphenate-limit-lines: 2;\n  }\n}\n\n:host {\n  display: block;\n  position: relative;\n  margin: 72px 0;\n}\n@media only screen and (min-width: 1200px) {\n  :host {\n    margin: 112px 0;\n  }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n  word-break: break-word;\n  hyphens: manual;\n  -webkit-hyphens: manual;\n  -moz-hyphens: manual;\n  -ms-hyphens: manual;\n}\n@supports (hyphenate-limit-chars: 12 3 3) {\n  h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n    hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    /* For Safari */\n    -webkit-hyphenate-limit-after: 3;\n    /* For Safari */\n    hyphenate-limit-chars: 12 3 3;\n    hyphenate-limit-lines: 2;\n    hyphenate-limit-last: always;\n    hyphenate-limit-zone: 6%;\n    -webkit-hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    -webkit-hyphenate-limit-after: 3;\n    -webkit-hyphenate-limit-chars: 12 3 3;\n    -webkit-hyphenate-limit-lines: 2;\n    -moz-hyphens: auto;\n    -moz-hyphenate-limit-chars: 12 3 3;\n    -moz-hyphenate-limit-lines: 2;\n    -ms-hyphens: auto;\n    -ms-hyphenate-limit-chars: 12 3 3;\n    -ms-hyphenate-limit-lines: 2;\n  }\n}\n\n.primary-content-wrapper {\n  max-width: 720px;\n  padding: 160px 24px;\n}\n@media only screen and (min-width: 1200px) {\n  .primary-content-wrapper {\n    padding: 160px 32px;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .primary-content-wrapper {\n    padding: 160px 24px;\n  }\n}\n\n.bg-video {\n  width: 100%;\n}\n\n.container {\n  margin: auto;\n  max-width: 1200px;\n  position: relative;\n  z-index: 20;\n  min-height: 787px;\n  overflow: hidden;\n}\n\n.card-links {\n  margin: 0;\n  padding-bottom: 88px;\n}\n.card-links .secondary-content-wrapper {\n  margin: 0 24px;\n  max-width: 720px;\n}\n@media only screen and (min-width: 1200px) {\n  .card-links .secondary-content-wrapper {\n    margin: 0 32px;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .card-links .secondary-content-wrapper {\n    margin: 0 24px;\n  }\n}\n.card-links .card-section {\n  display: flex;\n  position: relative;\n  flex-wrap: nowrap;\n  flex-shrink: 0;\n  margin: 20px 0 0 0;\n  white-space: nowrap;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  transition: box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);\n}\n.card-links .card-section::-webkit-scrollbar {\n  display: none;\n}\n.card-links .card-section .card-link {\n  display: inline-flex;\n  position: relative;\n  overflow: hidden;\n  text-decoration: none;\n  z-index: 10;\n  align-items: center;\n  gap: 16px;\n  flex: 0 0 234px;\n  align-self: stretch;\n  border-radius: 4px 4px 0px 0px;\n  border-bottom: 2px solid var(--color-blue-07);\n  background: transparent;\n  backdrop-filter: blur(12px);\n  padding: 24px;\n  word-wrap: normal;\n  color: var(--color-white);\n  font-family: var(--ptc-font-latin);\n  font-size: var(--ptc-font-size-medium);\n  font-style: var(--ptc-font-style-normal);\n  font-weight: var(--ptc-font-weight-bold);\n  line-height: var(--ptc-line-height-densest);\n  margin: 0 12px;\n}\n.card-links .card-section .card-link:first-child {\n  margin-left: 24px;\n}\n.card-links .card-section .card-link:last-child {\n  margin-right: 24px;\n}\n.card-links .card-section .card-link .link-text {\n  display: block;\n  inline-size: 190px;\n  white-space: break-spaces;\n}\n.card-links .card-section .card-link .bgb,\n.card-links .card-section .card-link .bgh,\n.card-links .card-section .card-link .bgp {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 8;\n  opacity: 0;\n}\n.card-links .card-section .card-link .bgb,\n.card-links .card-section .card-link .bgh {\n  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);\n}\n.card-links .card-section .card-link .bgb {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.07) 100.13%);\n  opacity: 1;\n}\n.card-links .card-section .card-link .bgh {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.17) 100.13%);\n}\n.card-links .card-section .card-link .bgp {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.12) 100.13%);\n}\n.card-links .card-section .card-link:hover .bgb,\n.card-links .card-section .card-link:hover .bgp {\n  opacity: 0;\n}\n.card-links .card-section .card-link:hover .bgh {\n  opacity: 1;\n}\n.card-links .card-section .card-link:active .bgb,\n.card-links .card-section .card-link:active .bgh, .card-links .card-section .card-link.active .bgb,\n.card-links .card-section .card-link.active .bgh {\n  display: none;\n  opacity: 0;\n}\n.card-links .card-section .card-link:active .bgp, .card-links .card-section .card-link.active .bgp {\n  opacity: 1;\n}\n.card-links .card-section:before {\n  position: absolute;\n  width: 32px;\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);\n  top: 16px;\n  right: 0;\n  bottom: 0;\n  z-index: 12;\n}\n.card-links .card-section.scroll-st {\n  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n.card-links .card-section.scroll-ed {\n  box-shadow: inset -2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n.card-links .card-section.scroll-ed.scroll-st {\n  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n@media only screen and (min-width: 1200px) {\n  .card-links .card-section {\n    margin: 20px 32px 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n    align-content: flex-start;\n  }\n  .card-links .card-section.scroll-st, .card-links .card-section.scroll-ed, .card-links .card-section.scroll-ed.scroll-st {\n    box-shadow: unset;\n  }\n  .card-links .card-section .card-link {\n    flex: unset;\n  }\n  .card-links .card-section .card-link:first-child {\n    margin-left: 0;\n  }\n  .card-links .card-section .card-link:last-child {\n    margin-right: 0;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .card-links .card-section {\n    margin: 20px 24px 0;\n  }\n}\n\n.card-section {\n  overflow-x: visible;\n  overflow-y: visible;\n  animation-duration: 0ms;\n  animation-delay: 1000ms;\n  animation-fill-mode: forwards;\n}\n@media only screen and (min-width: 1200px) {\n  .card-section {\n    overflow-x: visible;\n  }\n}\n.card-section .card-link {\n  animation-duration: 750ms;\n  animation-delay: 0ms;\n  animation-fill-mode: forwards;\n  opacity: 0;\n  transform: translate3d(0, 30%, 0);\n}\n.card-section .card-link.card-link-1 {\n  animation-delay: 0ms;\n}\n.card-section .card-link.card-link-2 {\n  animation-delay: 250ms;\n}\n.card-section .card-link.card-link-3 {\n  animation-delay: 500ms;\n}\n.card-section .card-link.card-link-4 {\n  animation-delay: 750ms;\n}\n.card-section.in-view {\n  animation-name: fadeUpInContainer;\n}\n.card-section.in-view .card-link {\n  animation-name: fadeUpIn;\n}\n\n@keyframes fadeUpIn {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, 30%, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translateZ(0);\n  }\n}\n@keyframes fadeUpInContainer {\n  0% {\n    overflow: visible;\n    overflow-y: visible;\n    overflow-x: visible;\n    @media only screen and (min-width: 1200px) {\n      overflow-x: visible;\n    }\n  }\n  100% {\n    overflow: inherit;\n    overflow-y: hidden;\n    overflow-x: scroll;\n    @media only screen and (min-width: 1200px) {\n      overflow-x: hidden;\n    }\n  }\n}";
+const ptcHomepageVideoBackgroundCss = "h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n  word-break: break-word;\n  hyphens: manual;\n  -webkit-hyphens: manual;\n  -moz-hyphens: manual;\n  -ms-hyphens: manual;\n}\n@supports (hyphenate-limit-chars: 12 3 3) {\n  h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n    hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    /* For Safari */\n    -webkit-hyphenate-limit-after: 3;\n    /* For Safari */\n    hyphenate-limit-chars: 12 3 3;\n    hyphenate-limit-lines: 2;\n    hyphenate-limit-last: always;\n    hyphenate-limit-zone: 6%;\n    -webkit-hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    -webkit-hyphenate-limit-after: 3;\n    -webkit-hyphenate-limit-chars: 12 3 3;\n    -webkit-hyphenate-limit-lines: 2;\n    -moz-hyphens: auto;\n    -moz-hyphenate-limit-chars: 12 3 3;\n    -moz-hyphenate-limit-lines: 2;\n    -ms-hyphens: auto;\n    -ms-hyphenate-limit-chars: 12 3 3;\n    -ms-hyphenate-limit-lines: 2;\n  }\n}\n\n:host {\n  display: block;\n  position: relative;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n  word-break: break-word;\n  hyphens: manual;\n  -webkit-hyphens: manual;\n  -moz-hyphens: manual;\n  -ms-hyphens: manual;\n}\n@supports (hyphenate-limit-chars: 12 3 3) {\n  h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n    hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    /* For Safari */\n    -webkit-hyphenate-limit-after: 3;\n    /* For Safari */\n    hyphenate-limit-chars: 12 3 3;\n    hyphenate-limit-lines: 2;\n    hyphenate-limit-last: always;\n    hyphenate-limit-zone: 6%;\n    -webkit-hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    -webkit-hyphenate-limit-after: 3;\n    -webkit-hyphenate-limit-chars: 12 3 3;\n    -webkit-hyphenate-limit-lines: 2;\n    -moz-hyphens: auto;\n    -moz-hyphenate-limit-chars: 12 3 3;\n    -moz-hyphenate-limit-lines: 2;\n    -ms-hyphens: auto;\n    -ms-hyphenate-limit-chars: 12 3 3;\n    -ms-hyphenate-limit-lines: 2;\n  }\n}\n\n.ptc-container {\n  padding-right: 24px;\n  padding-left: 24px;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media only screen and (min-width: 1200px) {\n  .ptc-container {\n    padding-left: 0;\n    padding-right: 0;\n    max-width: 1136px;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .ptc-container {\n    padding-left: 0;\n    padding-right: 0;\n    max-width: 1200px;\n  }\n}\n.ptc-container-lg {\n  padding-right: 15px;\n  padding-left: 15px;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media only screen and (min-width: 480px) {\n  .ptc-container-lg {\n    padding-left: var(--ptc-layout-spacing-03);\n    padding-right: var(--ptc-layout-spacing-03);\n  }\n}\n@media only screen and (min-width: 768px) {\n  .ptc-container-lg {\n    padding-left: var(--ptc-layout-spacing-04);\n    padding-right: var(--ptc-layout-spacing-04);\n  }\n}\n@media only screen and (min-width: 992px) {\n  .ptc-container-lg {\n    padding-left: var(--ptc-element-spacing-08);\n    padding-right: var(--ptc-element-spacing-08);\n  }\n}\n@media only screen and (min-width: 1980px) {\n  .ptc-container-lg {\n    padding-left: 0;\n    padding-right: 0;\n    max-width: 1900px;\n  }\n}\n.ptc-container-fluid {\n  width: 100%;\n}\n\n.primary-content-wrapper {\n  max-width: 720px;\n  padding: 120px 0;\n}\n@media only screen and (min-width: 992px) {\n  .primary-content-wrapper {\n    padding: 160px 0;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .primary-content-wrapper {\n    padding: 160px 0;\n  }\n}\n\n.bg-video {\n  width: 100%;\n}\n\n.ptc-container {\n  position: relative;\n  z-index: 20;\n  min-height: 587px;\n  overflow: hidden;\n}\n\n.card-links {\n  margin: 0;\n  padding-bottom: 72px;\n}\n@media only screen and (min-width: 992px) {\n  .card-links {\n    padding-bottom: 88px;\n  }\n}\n.card-links .secondary-content-wrapper {\n  margin: 0;\n  max-width: 720px;\n}\n.card-links .card-section {\n  display: flex;\n  position: relative;\n  flex-wrap: nowrap;\n  flex-shrink: 0;\n  margin: 20px -24px 0;\n  white-space: nowrap;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  transition: box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);\n}\n.card-links .card-section::-webkit-scrollbar {\n  display: none;\n}\n.card-links .card-section .card-link {\n  display: inline-flex;\n  position: relative;\n  overflow: hidden;\n  text-decoration: none;\n  z-index: 10;\n  align-items: center;\n  gap: 16px;\n  flex: 0 0 224px;\n  align-self: stretch;\n  border-radius: 4px 4px 0px 0px;\n  border-bottom: 2px solid var(--color-blue-07);\n  background: transparent;\n  backdrop-filter: blur(12px);\n  padding: 24px;\n  word-wrap: normal;\n  color: var(--color-white);\n  font-family: var(--ptc-font-latin);\n  font-size: var(--ptc-font-size-small);\n  font-style: var(--ptc-font-style-normal);\n  font-weight: var(--ptc-font-weight-bold);\n  line-height: var(--ptc-line-height-p);\n  margin: 0 12px;\n}\n.card-links .card-section .card-link:first-child {\n  margin-left: 24px;\n}\n.card-links .card-section .card-link:last-child {\n  margin-right: 24px;\n}\n.card-links .card-section .card-link .link-text {\n  display: block;\n  inline-size: 190px;\n  white-space: break-spaces;\n  font-size: var(--ptc-font-size-small);\n}\n@media only screen and (min-width: 992px) {\n  .card-links .card-section .card-link .link-text {\n    font-size: var(--ptc-font-size-medium);\n  }\n}\n.card-links .card-section .card-link .bgb,\n.card-links .card-section .card-link .bgh,\n.card-links .card-section .card-link .bgp {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 8;\n  opacity: 0;\n}\n.card-links .card-section .card-link .bgb,\n.card-links .card-section .card-link .bgh {\n  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);\n}\n.card-links .card-section .card-link .bgb {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.07) 100.13%);\n  opacity: 1;\n}\n.card-links .card-section .card-link .bgh {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.17) 100.13%);\n}\n.card-links .card-section .card-link .bgp {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.12) 100.13%);\n}\n.card-links .card-section .card-link:hover .bgb,\n.card-links .card-section .card-link:hover .bgp {\n  opacity: 0;\n}\n.card-links .card-section .card-link:hover .bgh {\n  opacity: 1;\n}\n.card-links .card-section .card-link:active .bgb,\n.card-links .card-section .card-link:active .bgh, .card-links .card-section .card-link.active .bgb,\n.card-links .card-section .card-link.active .bgh {\n  display: none;\n  opacity: 0;\n}\n.card-links .card-section .card-link:active .bgp, .card-links .card-section .card-link.active .bgp {\n  opacity: 1;\n}\n.card-links .card-section:before {\n  position: absolute;\n  width: 32px;\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);\n  top: 16px;\n  right: 0;\n  bottom: 0;\n  z-index: 12;\n}\n.card-links .card-section.scroll-st {\n  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n.card-links .card-section.scroll-ed {\n  box-shadow: inset -2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n.card-links .card-section.scroll-ed.scroll-st {\n  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n@media only screen and (min-width: 1200px) {\n  .card-links .card-section {\n    margin: 20px 0 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n    align-content: flex-start;\n  }\n  .card-links .card-section.scroll-st, .card-links .card-section.scroll-ed, .card-links .card-section.scroll-ed.scroll-st {\n    box-shadow: unset;\n  }\n  .card-links .card-section .card-link {\n    flex: unset;\n  }\n  .card-links .card-section .card-link:first-child {\n    margin-left: 0;\n  }\n  .card-links .card-section .card-link:last-child {\n    margin-right: 0;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .card-links .card-section {\n    margin: 20px 0 0;\n  }\n}\n\n.card-section {\n  overflow-x: visible;\n  overflow-y: visible;\n  animation-duration: 0ms;\n  animation-delay: 1000ms;\n  animation-fill-mode: forwards;\n}\n@media only screen and (min-width: 1200px) {\n  .card-section {\n    overflow-x: visible;\n  }\n}\n.card-section .card-link {\n  animation-duration: 750ms;\n  animation-delay: 0ms;\n  animation-fill-mode: forwards;\n  opacity: 0;\n  transform: translate3d(0, 30%, 0);\n}\n.card-section .card-link.card-link-1 {\n  animation-delay: 0ms;\n}\n.card-section .card-link.card-link-2 {\n  animation-delay: 250ms;\n}\n.card-section .card-link.card-link-3 {\n  animation-delay: 500ms;\n}\n.card-section .card-link.card-link-4 {\n  animation-delay: 750ms;\n}\n.card-section.in-view {\n  animation-name: fadeUpInContainer;\n}\n.card-section.in-view .card-link {\n  animation-name: fadeUpIn;\n}\n\n@keyframes fadeUpIn {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, 30%, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translateZ(0);\n  }\n}\n@keyframes fadeUpInContainer {\n  0% {\n    overflow: visible;\n    overflow-y: visible;\n    overflow-x: visible;\n    @media only screen and (min-width: 1200px) {\n      overflow-x: visible;\n    }\n  }\n  100% {\n    overflow: inherit;\n    overflow-y: hidden;\n    overflow-x: scroll;\n    @media only screen and (min-width: 1200px) {\n      overflow-x: hidden;\n    }\n  }\n}";
 
 const PtcHomepageVideoBackground$1 = class extends HTMLElement$1 {
   constructor() {
@@ -18109,7 +18107,7 @@ const PtcHomepageVideoBackground$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    return (h$1(Host, null, h$1("ptc-background-video", Object.assign({}, this.getBackgroundVideoSettings(), { "overlay-type": 'dark' }), h$1("div", { class: "container" }, h$1("div", { class: "primary-content-wrapper" }, h$1("slot", { name: "primary-content" })), h$1("div", { class: "card-links" }, h$1("div", { class: "secondary-content-wrapper" }, h$1("slot", { name: "secondary-content" })), h$1("div", Object.assign({ class: "card-section" }, this.getSliderBindings()), this.links && this.links.map((link, i) => {
+    return (h$1(Host, null, h$1("ptc-background-video", Object.assign({}, this.getBackgroundVideoSettings(), { "overlay-type": 'dark' }), h$1("div", { class: "ptc-container" }, h$1("div", { class: "primary-content-wrapper" }, h$1("slot", { name: "primary-content" })), h$1("div", { class: "card-links" }, h$1("div", { class: "secondary-content-wrapper" }, h$1("slot", { name: "secondary-content" })), h$1("div", Object.assign({ class: "card-section" }, this.getSliderBindings()), this.links && this.links.map((link, i) => {
       const icon = link.getAttribute('data-icon');
       const text = link.textContent;
       if (text) {
@@ -21746,7 +21744,7 @@ const PtcPricingTabs$1 = class extends HTMLElement$1 {
   static get style() { return ptcPricingTabsCss; }
 };
 
-const ptcProductCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);margin-bottom:var(--ptc-layout-spacing-03)}:host .card-wrap{display:flex;align-items:center}:host .card-wrap ptc-picture{display:none}@media only screen and (min-width: 768px){:host .card-wrap ptc-picture{display:block;margin-left:var(--ptc-element-spacing-06);min-width:38px;max-width:38px}}:host .card-wrap .content{padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-04) var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-04)}@media only screen and (min-width: 768px){:host .card-wrap .content{padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-03) 44px}}@media only screen and (min-width: 1200px){:host .card-wrap .content{display:flex;align-items:center}}:host .card-wrap .content .cta-wrap{margin-left:0;margin-top:24px;min-width:146px;text-align:left}@media only screen and (min-width: 1200px){:host .card-wrap .content .cta-wrap{margin-top:0px;margin-left:44px;text-align:right}}:host .toggle-btn{padding:16px;text-align:center;border-top:1px solid var(--color-gray-04);display:block;cursor:pointer}:host .toggle-btn svg{margin-right:var(--ptc-element-spacing-03);vertical-align:middle;margin-top:-2px}:host .toggle-btn .toggleText::before{content:\"\";display:inline-block;width:18px;height:18px;background-image:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"18\" height=\"18\" rx=\"4\" fill=\"%2300890B\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.953 4.23535H8.04712V8.04712H4.23535V9.953H8.04712V13.7648H9.953V9.953H13.7648V8.04712H9.953V4.23535Z\" fill=\"white\"/></svg>');margin-right:12px;vertical-align:middle;margin-top:-2px}:host .product-highlights-container{padding:0px 20px 16px 20px;display:none}:host(.has-opened) .toggleText::before{background-image:url('data:image/svg+xml,<svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0.632812\" width=\"17.9798\" height=\"18\" rx=\"4\" fill=\"%2300890B\"/><g clip-path=\"url(%23clip0_220_1413)\"><path d=\"M4.86328 7.98749V10.0125H14.382V7.98749H4.86328Z\" fill=\"white\"/></g><defs><clipPath id=\"clip0_220_1413\"><rect width=\"9.51872\" height=\"9.52941\" fill=\"white\" transform=\"translate(4.86328 4.23529)\"/></clipPath></defs></svg>')}:host(.has-opened) .product-highlights-container{display:block}";
+const ptcProductCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);margin-bottom:var(--ptc-layout-spacing-03)}:host .card-wrap{display:flex;align-items:center}:host .card-wrap ptc-picture{display:none}@media only screen and (min-width: 768px){:host .card-wrap ptc-picture{display:block;margin-left:var(--ptc-element-spacing-06);min-width:38px;max-width:38px}}:host .card-wrap .content{padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-04) var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-04)}@media only screen and (min-width: 768px){:host .card-wrap .content{padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-03) 44px}}@media only screen and (min-width: 1200px){:host .card-wrap .content{display:flex;align-items:center;justify-content:space-between;width:100%}}:host .card-wrap .content .cta-wrap{margin-left:0;margin-top:24px;min-width:146px;text-align:left}@media only screen and (min-width: 1200px){:host .card-wrap .content .cta-wrap{margin-top:0px;margin-left:44px;text-align:right}}:host .toggle-btn{padding:16px;text-align:center;border-top:1px solid var(--color-gray-04);display:block;cursor:pointer}:host .toggle-btn svg{margin-right:var(--ptc-element-spacing-03);vertical-align:middle;margin-top:-2px}:host .toggle-btn .toggleText::before{content:\"\";display:inline-block;width:18px;height:18px;background-image:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"18\" height=\"18\" rx=\"4\" fill=\"%2300890B\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.953 4.23535H8.04712V8.04712H4.23535V9.953H8.04712V13.7648H9.953V9.953H13.7648V8.04712H9.953V4.23535Z\" fill=\"white\"/></svg>');margin-right:12px;vertical-align:middle;margin-top:-2px}:host .product-highlights-container{padding:0px 20px 16px 20px;display:none}:host(.has-opened) .toggleText::before{background-image:url('data:image/svg+xml,<svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0.632812\" width=\"17.9798\" height=\"18\" rx=\"4\" fill=\"%2300890B\"/><g clip-path=\"url(%23clip0_220_1413)\"><path d=\"M4.86328 7.98749V10.0125H14.382V7.98749H4.86328Z\" fill=\"white\"/></g><defs><clipPath id=\"clip0_220_1413\"><rect width=\"9.51872\" height=\"9.52941\" fill=\"white\" transform=\"translate(4.86328 4.23529)\"/></clipPath></defs></svg>')}:host(.has-opened) .product-highlights-container{display:block}";
 
 const PtcProductCard$1 = class extends HTMLElement$1 {
   constructor() {
@@ -21767,7 +21765,7 @@ const PtcProductCard$1 = class extends HTMLElement$1 {
   }
   render() {
     return (h$1(Host, null, h$1("div", { class: "card-wrap" }, this.cardImage &&
-      h$1("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: '38' }), h$1("div", { class: "content" }, h$1("div", null, h$1("ptc-title", { type: 'h3', upperline: "no-upperline", "title-size": "medium", "title-weight": "w-8", "title-margin": 'margin-flush', "title-display": "block", "title-height": "densest" }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h$1("ptc-spacer", { size: "x-small" }), h$1("ptc-spacer", { size: "xx-small", breakpoint: "x-small" }), h$1("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-p", "para-z-index": "z-auto" }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "16", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))), h$1("div", { class: 'cta-wrap' }, h$1("slot", { name: "cta" })))), this.toggleCtaTitle &&
+      h$1("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: '38' }), h$1("div", { class: "content" }, h$1("div", null, h$1("ptc-title", { type: 'h3', upperline: "no-upperline", "title-size": "medium", "title-weight": "w-8", "title-margin": 'margin-flush', "title-display": "block", "title-height": "densest" }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h$1("ptc-spacer", { size: "x-small" }), h$1("ptc-spacer", { size: "xx-small", breakpoint: "x-small" }), h$1("div", null, h$1("slot", { name: "content" }))), h$1("div", { class: 'cta-wrap' }, h$1("slot", { name: "cta" })))), this.toggleCtaTitle &&
       h$1("ptc-para", { class: "toggle-btn", "font-size": "small", "para-margin": "margin-flush", "para-line-h": "line-height-p", "para-z-index": "z-auto", onClick: () => this.togglePanel() }, h$1("span", { class: 'toggleText' }, this.toggleCtaTitle)), h$1("div", { class: 'product-highlights-container' }, h$1("slot", null))));
   }
   get hostElement() { return this; }
@@ -21865,7 +21863,7 @@ const PtcProductDropdown$1 = class extends HTMLElement$1 {
   static get style() { return ptcProductDropdownCss; }
 };
 
-const ptcProductHighlightCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{max-width:300px;display:block;padding:18px 10px 12px 10px;border:1px solid var(--color-gray-04);border-radius:var(--ptc-border-radius-standard);margin:auto;height:100%}:host ptc-picture{min-height:100px}";
+const ptcProductHighlightCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{max-width:300px;display:block;padding:18px 10px 12px 10px;border:1px solid var(--color-gray-04);border-radius:var(--ptc-border-radius-standard);margin:auto;height:100%}:host ptc-picture{min-height:100px}:host ptc-para ptc-readmore .box input~label{margin-right:0px}:host ptc-para a{color:var(--color-hyperlink)}";
 
 const PtcProductHighlightCard$1 = class extends HTMLElement$1 {
   constructor() {
@@ -21875,10 +21873,12 @@ const PtcProductHighlightCard$1 = class extends HTMLElement$1 {
     this.cardTitle = undefined;
     this.cardImage = undefined;
     this.cardImageAltText = undefined;
+    this.moreText = 'More';
+    this.lessText = 'Less';
     this.cardDescription = undefined;
   }
   render() {
-    return (h$1(Host, null, h$1("ptc-title", { type: 'h4', upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "small", "text-align": 'center' }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "2", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h$1("ptc-picture", { alt: this.cardImageAltText, src: this.cardImage, "image-alignment": "center", width: "69", "display-image": "inline-block", styles: "img{margin: 12px auto 18px auto}" }), h$1("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-align": 'left', "para-z-index": "z-auto" }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "5", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))));
+    return (h$1(Host, null, h$1("ptc-title", { type: 'h4', upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "small", "text-align": 'center' }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "2", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h$1("ptc-picture", { alt: this.cardImageAltText, src: this.cardImage, "image-alignment": "center", width: "69", "display-image": "inline-block", styles: "img{margin: 12px auto 18px auto}" }), h$1("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-align": 'left', "para-z-index": "z-auto" }, h$1("ptc-readmore", { "more-text": this.moreText, "less-text": this.lessText, "visible-lines-custom": "8", "read-more-position": "left" }, h$1("slot", null)))));
   }
   static get style() { return ptcProductHighlightCardCss; }
 };
@@ -29069,8 +29069,8 @@ const FlTabContent = /*@__PURE__*/proxyCustomElement(FlTabContent$1, [1,"fl-tab-
 const FlTabHeader = /*@__PURE__*/proxyCustomElement(FlTabHeader$1, [6,"fl-tab-header",{"tabTitle":[1,"tab-title"],"nameKey":[1,"name-key"],"selected":[4],"initialHeader":[32]}]);
 const FlTabImage = /*@__PURE__*/proxyCustomElement(FlTabImage$1, [1,"fl-tab-image",{"nameKey":[1,"name-key"],"selected":[4]}]);
 const FooterForm = /*@__PURE__*/proxyCustomElement(FooterForm$1, [1,"footer-form",{"formData":[32]}]);
-const HomepageClickableTab = /*@__PURE__*/proxyCustomElement(HomepageClickableTab$1, [1,"homepage-clickable-tab",{"active":[4],"label":[1],"activeColor":[1,"active-color"],"isHovered":[32]}]);
-const HomepageJumbotron = /*@__PURE__*/proxyCustomElement(HomepageJumbotron$1, [6,"homepage-jumbotron",{"bgVideoSrc":[1,"bg-video-src"],"bgSrc":[1,"bg-src"],"jumbotron":[1],"isIframe":[4,"is-iframe"],"playBtnText":[1,"play-btn-text"],"pauseBtnText":[1,"pause-btn-text"],"activeTab":[32],"activeBgVideoSrc":[32],"activeMainTitle":[32],"activeSubTitle":[32],"activeButton":[32],"tileElements":[32],"isTransitioning":[32]},[[0,"itemSelected","onItemSelected"]]]);
+const HomepageClickableTab = /*@__PURE__*/proxyCustomElement(HomepageClickableTab$1, [1,"homepage-clickable-tab",{"active":[4],"label":[1],"activeColor":[1,"active-color"],"styles":[1],"isHovered":[32]}]);
+const HomepageJumbotron = /*@__PURE__*/proxyCustomElement(HomepageJumbotron$1, [6,"homepage-jumbotron",{"bgVideoSrc":[1,"bg-video-src"],"bgSrc":[1,"bg-src"],"jumbotron":[1],"isIframe":[4,"is-iframe"],"playBtnText":[1,"play-btn-text"],"pauseBtnText":[1,"pause-btn-text"],"activeTab":[32],"activeBgVideoSrc":[32],"activeMainTitle":[32],"activeSubTitle":[32],"activeButton":[32],"tileElements":[32],"isTransitioning":[32],"mediaTag":[32]},[[0,"itemSelected","onItemSelected"]]]);
 const HomepageToggledContent = /*@__PURE__*/proxyCustomElement(HomepageToggledContent$1, [1,"homepage-toggled-content",{"activeTab":[32],"dropdownOpen":[32],"tileElements":[32]}]);
 const IconAsset = /*@__PURE__*/proxyCustomElement(IconAsset$1, [2,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1],"isMobileSelect":[4,"is-mobile-select"],"injectedStyle":[1,"injected-style"]}]);
 const InnovatorToggleContainer = /*@__PURE__*/proxyCustomElement(InnovatorToggleContainer$1, [1,"innovator-toggle-container",{"sectionTitle":[1,"section-title"],"description":[1],"backgroundImage":[1,"background-image"]}]);
@@ -29161,7 +29161,7 @@ const PtcPricingTabs = /*@__PURE__*/proxyCustomElement(PtcPricingTabs$1, [1,"ptc
 const PtcProductCard = /*@__PURE__*/proxyCustomElement(PtcProductCard$1, [1,"ptc-product-card",{"cardTitle":[1,"card-title"],"cardImage":[1,"card-image"],"cardImageAltText":[1,"card-image-alt-text"],"cardDescription":[1,"card-description"],"cardCtaText":[1,"card-cta-text"],"toggleCtaTitle":[1,"toggle-cta-title"],"isSlotEmpty":[4,"is-slot-empty"],"isOpen":[32]}]);
 const PtcProductCategory = /*@__PURE__*/proxyCustomElement(PtcProductCategory$1, [1,"ptc-product-category",{"categoryTitle":[1,"category-title"],"categoryDescription":[1,"category-description"]}]);
 const PtcProductDropdown = /*@__PURE__*/proxyCustomElement(PtcProductDropdown$1, [1,"ptc-product-dropdown",{"newOptions":[16],"selectedOptions":[16],"placeholder":[1],"internalOptions":[32],"isOpen":[32]},[[4,"clearsearch","handleSearchResult"],[4,"inputChanged","handleinputChanged"]]]);
-const PtcProductHighlightCard = /*@__PURE__*/proxyCustomElement(PtcProductHighlightCard$1, [1,"ptc-product-highlight-card",{"cardTitle":[1,"card-title"],"cardImage":[1,"card-image"],"cardImageAltText":[1,"card-image-alt-text"],"cardDescription":[1,"card-description"]}]);
+const PtcProductHighlightCard = /*@__PURE__*/proxyCustomElement(PtcProductHighlightCard$1, [1,"ptc-product-highlight-card",{"cardTitle":[1,"card-title"],"cardImage":[1,"card-image"],"cardImageAltText":[1,"card-image-alt-text"],"moreText":[1025,"more-text"],"lessText":[1025,"less-text"],"cardDescription":[1,"card-description"]}]);
 const PtcProductList = /*@__PURE__*/proxyCustomElement(PtcProductList$1, [1,"ptc-product-list",{"emptyTitle":[1,"empty-title"],"emptySubTitle":[1,"empty-sub-title"],"clearButtonLabel":[1,"clear-button-label"]},[[4,"selectedResult","handleSearchResult"],[4,"clearsearch","handleSearchResult"],[4,"selectedValues","handleMultipleSearchResult"],[4,"emptyResult","handleEmptyResult"]]]);
 const PtcProductSidebar = /*@__PURE__*/proxyCustomElement(PtcProductSidebar$1, [1,"ptc-product-sidebar",{"filterResults":[1,"filter-results"],"filterText":[1,"filter-text"],"clearText":[1,"clear-text"],"technologyText":[1,"technology-text"],"jumpToProduct":[1,"jump-to-product"],"selectTechnology":[1,"select-technology"],"suggestionList":[16],"searchTerm":[32],"suggestions":[32]},[[4,"dropdownTouched","handleDropdownTouched"],[0,"click","handleClick"],[4,"clearCtaClicked","handleclearCtaClicked"],[4,"selectedValues","handleSelectedValues"]]]);
 const PtcProgressBar = /*@__PURE__*/proxyCustomElement(PtcProgressBar$1, [1,"ptc-progress-bar",{"scrollPercentage":[32]},[[9,"scroll","handleScroll"]]]);