@jooler/jooler-websites-shared 0.0.232 → 0.0.234

package/esm2022/lib/value-prop-card/value-prop-card.component.mjs

@@ -6,21 +6,39 @@ import * as i3 from "@angular/material/card";
 export class ValuePropCardComponent {
     valuePropContent;
     cardOnHover;
+    imageSize;
     icon;
+    imageStyle;
     ngOnInit() {
         if (this.valuePropContent.iconName) {
             this.icon = this.valuePropContent.iconName;
         }
+        if (this.valuePropContent.image) {
+            this.setImageStyle();
+        }
+    }
+    setImageStyle() {
+        let imageSize = '4.5rem';
+        if (this.imageSize) {
+            imageSize = this.imageSize;
+        }
+        let style = {
+            height: imageSize,
+            width: imageSize
+        };
+        this.imageStyle = style;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValuePropCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValuePropCardComponent, selector: "value-prop-card", inputs: { valuePropContent: "valuePropContent", cardOnHover: "cardOnHover" }, ngImport: i0, template: "<mat-card class=\"reason-block\"\r\n    [ngClass]=\"{'card-on-hover':cardOnHover , 'constant-card': !cardOnHover}\">\r\n    <mat-card-content class=\"content\">\r\n        <div class=\"reason-headline\">\r\n            <div class=\"reason-icon\" *ngIf=\"icon\">\r\n                <fa-icon [icon]=\"icon\"></fa-icon>\r\n            </div>\r\n            <div class=\"reason-image\" *ngIf=\"!icon\">\r\n                <img loading=\"lazy\" [src]=\"valuePropContent.image\" alt=\"\">\r\n            </div>\r\n            <div class=\"reason-title\">\r\n                {{valuePropContent.title}}\r\n            </div>\r\n        </div>\r\n        <div class=\"reason-desc\">\r\n            {{valuePropContent.description}}\r\n        </div>\r\n    </mat-card-content>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{display:grid;row-gap:1rem;grid-template-rows:max-content auto}.card-on-hover:hover{background-color:#f7f8f9}.constant-card{background-color:#fff}.reason-block{transition:all ease-in-out .2s;height:21rem;max-width:36rem}.reason-block .reason-headline{display:grid;column-gap:2rem;grid-template-columns:max-content auto;grid-template-rows:max-content}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{width:4rem;aspect-ratio:3/2;object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit;font-size:1.6rem;line-height:1.6rem}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValuePropCardComponent, selector: "value-prop-card", inputs: { valuePropContent: "valuePropContent", cardOnHover: "cardOnHover", imageSize: "imageSize" }, ngImport: i0, template: "<mat-card class=\"reason-block\"\r\n    [ngClass]=\"{'card-on-hover':cardOnHover , 'constant-card': !cardOnHover}\">\r\n    <mat-card-content class=\"content\">\r\n        <div class=\"reason-headline\">\r\n            <div class=\"reason-icon\" *ngIf=\"icon\">\r\n                <fa-icon [icon]=\"icon\"></fa-icon>\r\n            </div>\r\n            <div class=\"reason-image\" *ngIf=\"!icon\">\r\n                <img [ngStyle]=\"imageStyle\" loading=\"lazy\" [src]=\"valuePropContent.image\">\r\n            </div>\r\n            <div class=\"reason-title\">\r\n                {{valuePropContent.title}}\r\n            </div>\r\n        </div>\r\n        <div class=\"reason-desc\">\r\n            {{valuePropContent.description}}\r\n        </div>\r\n    </mat-card-content>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{display:grid;row-gap:1rem;grid-template-rows:max-content auto}.card-on-hover:hover{background-color:#f7f8f9}.constant-card{background-color:#fff}.reason-block{transition:all ease-in-out .2s;height:21rem;max-width:36rem}.reason-block .reason-headline{display:grid;column-gap:1rem;grid-template-columns:max-content auto;grid-template-rows:max-content;align-items:center}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit;font-size:1.6rem;line-height:1.6rem}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValuePropCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'value-prop-card', template: "<mat-card class=\"reason-block\"\r\n    [ngClass]=\"{'card-on-hover':cardOnHover , 'constant-card': !cardOnHover}\">\r\n    <mat-card-content class=\"content\">\r\n        <div class=\"reason-headline\">\r\n            <div class=\"reason-icon\" *ngIf=\"icon\">\r\n                <fa-icon [icon]=\"icon\"></fa-icon>\r\n            </div>\r\n            <div class=\"reason-image\" *ngIf=\"!icon\">\r\n                <img loading=\"lazy\" [src]=\"valuePropContent.image\" alt=\"\">\r\n            </div>\r\n            <div class=\"reason-title\">\r\n                {{valuePropContent.title}}\r\n            </div>\r\n        </div>\r\n        <div class=\"reason-desc\">\r\n            {{valuePropContent.description}}\r\n        </div>\r\n    </mat-card-content>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{display:grid;row-gap:1rem;grid-template-rows:max-content auto}.card-on-hover:hover{background-color:#f7f8f9}.constant-card{background-color:#fff}.reason-block{transition:all ease-in-out .2s;height:21rem;max-width:36rem}.reason-block .reason-headline{display:grid;column-gap:2rem;grid-template-columns:max-content auto;grid-template-rows:max-content}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{width:4rem;aspect-ratio:3/2;object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit;font-size:1.6rem;line-height:1.6rem}\n"] }]
+            args: [{ selector: 'value-prop-card', template: "<mat-card class=\"reason-block\"\r\n    [ngClass]=\"{'card-on-hover':cardOnHover , 'constant-card': !cardOnHover}\">\r\n    <mat-card-content class=\"content\">\r\n        <div class=\"reason-headline\">\r\n            <div class=\"reason-icon\" *ngIf=\"icon\">\r\n                <fa-icon [icon]=\"icon\"></fa-icon>\r\n            </div>\r\n            <div class=\"reason-image\" *ngIf=\"!icon\">\r\n                <img [ngStyle]=\"imageStyle\" loading=\"lazy\" [src]=\"valuePropContent.image\">\r\n            </div>\r\n            <div class=\"reason-title\">\r\n                {{valuePropContent.title}}\r\n            </div>\r\n        </div>\r\n        <div class=\"reason-desc\">\r\n            {{valuePropContent.description}}\r\n        </div>\r\n    </mat-card-content>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{display:grid;row-gap:1rem;grid-template-rows:max-content auto}.card-on-hover:hover{background-color:#f7f8f9}.constant-card{background-color:#fff}.reason-block{transition:all ease-in-out .2s;height:21rem;max-width:36rem}.reason-block .reason-headline{display:grid;column-gap:1rem;grid-template-columns:max-content auto;grid-template-rows:max-content;align-items:center}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit;font-size:1.6rem;line-height:1.6rem}\n"] }]
         }], propDecorators: { valuePropContent: [{
                 type: Input
             }], cardOnHover: [{
                 type: Input
+            }], imageSize: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92YWx1ZS1wcm9wLWNhcmQvdmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92YWx1ZS1wcm9wLWNhcmQvdmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7OztBQVN6RCxNQUFNLE9BQU8sc0JBQXNCO0lBQ3hCLGdCQUFnQixDQUFzQjtJQUN0QyxXQUFXLENBQVU7SUFDOUIsSUFBSSxDQUFXO0lBRWYsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsRUFBRTtZQUNsQyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFvQixDQUFDO1NBQ3hEO0lBQ0gsQ0FBQzt3R0FUVSxzQkFBc0I7NEZBQXRCLHNCQUFzQixxSUNUbkMsK3dCQWtCVzs7NEZEVEUsc0JBQXNCO2tCQUxsQyxTQUFTOytCQUNFLGlCQUFpQjs4QkFLbEIsZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgSWNvbk5hbWUgfSBmcm9tICdAZm9ydGF3ZXNvbWUvZm9udGF3ZXNvbWUtc3ZnLWNvcmUnO1xyXG5pbXBvcnQgeyBWYWx1ZVByb3BQcm9wZXJ0aWVzIH0gZnJvbSAnQGpvb2xlci9qb29sZXItd2Vic2l0ZXMtc2hhcmVkJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAndmFsdWUtcHJvcC1jYXJkJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi92YWx1ZS1wcm9wLWNhcmQuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVmFsdWVQcm9wQ2FyZENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KCkgdmFsdWVQcm9wQ29udGVudDogVmFsdWVQcm9wUHJvcGVydGllcztcclxuICBASW5wdXQoKSBjYXJkT25Ib3ZlcjogYm9vbGVhbjtcclxuICBpY29uOiBJY29uTmFtZTtcclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy52YWx1ZVByb3BDb250ZW50Lmljb25OYW1lKSB7XHJcbiAgICAgIHRoaXMuaWNvbiA9IHRoaXMudmFsdWVQcm9wQ29udGVudC5pY29uTmFtZSBhcyBJY29uTmFtZTtcclxuICAgIH1cclxuICB9XHJcbn0iLCI8bWF0LWNhcmQgY2xhc3M9XCJyZWFzb24tYmxvY2tcIlxyXG4gICAgW25nQ2xhc3NdPVwieydjYXJkLW9uLWhvdmVyJzpjYXJkT25Ib3ZlciAsICdjb25zdGFudC1jYXJkJzogIWNhcmRPbkhvdmVyfVwiPlxyXG4gICAgPG1hdC1jYXJkLWNvbnRlbnQgY2xhc3M9XCJjb250ZW50XCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInJlYXNvbi1oZWFkbGluZVwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicmVhc29uLWljb25cIiAqbmdJZj1cImljb25cIj5cclxuICAgICAgICAgICAgICAgIDxmYS1pY29uIFtpY29uXT1cImljb25cIj48L2ZhLWljb24+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicmVhc29uLWltYWdlXCIgKm5nSWY9XCIhaWNvblwiPlxyXG4gICAgICAgICAgICAgICAgPGltZyBsb2FkaW5nPVwibGF6eVwiIFtzcmNdPVwidmFsdWVQcm9wQ29udGVudC5pbWFnZVwiIGFsdD1cIlwiPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInJlYXNvbi10aXRsZVwiPlxyXG4gICAgICAgICAgICAgICAge3t2YWx1ZVByb3BDb250ZW50LnRpdGxlfX1cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInJlYXNvbi1kZXNjXCI+XHJcbiAgICAgICAgICAgIHt7dmFsdWVQcm9wQ29udGVudC5kZXNjcmlwdGlvbn19XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L21hdC1jYXJkLWNvbnRlbnQ+XHJcbjwvbWF0LWNhcmQ+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92YWx1ZS1wcm9wLWNhcmQvdmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92YWx1ZS1wcm9wLWNhcmQvdmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7OztBQVN6RCxNQUFNLE9BQU8sc0JBQXNCO0lBQ3hCLGdCQUFnQixDQUFzQjtJQUN0QyxXQUFXLENBQVU7SUFDckIsU0FBUyxDQUFTO0lBQzNCLElBQUksQ0FBVztJQUNmLFVBQVUsQ0FBTTtJQUVoQixRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxFQUFFO1lBQ2xDLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQW9CLENBQUM7U0FDeEQ7UUFFRCxJQUFJLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxLQUFLLEVBQUU7WUFDL0IsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQztJQUdELGFBQWE7UUFDWCxJQUFJLFNBQVMsR0FBVyxRQUFRLENBQUM7UUFDakMsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xCLFNBQVMsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDO1NBQzVCO1FBQ0QsSUFBSSxLQUFLLEdBQUc7WUFDVixNQUFNLEVBQUUsU0FBUztZQUNqQixLQUFLLEVBQUUsU0FBUztTQUNqQixDQUFDO1FBRUYsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDMUIsQ0FBQzt3R0E3QlUsc0JBQXNCOzRGQUF0QixzQkFBc0IsNkpDVG5DLCt4QkFrQlc7OzRGRFRFLHNCQUFzQjtrQkFMbEMsU0FBUzsrQkFDRSxpQkFBaUI7OEJBS2xCLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgSWNvbk5hbWUgfSBmcm9tICdAZm9ydGF3ZXNvbWUvZm9udGF3ZXNvbWUtc3ZnLWNvcmUnO1xyXG5pbXBvcnQgeyBWYWx1ZVByb3BQcm9wZXJ0aWVzIH0gZnJvbSAnQGpvb2xlci9qb29sZXItd2Vic2l0ZXMtc2hhcmVkJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAndmFsdWUtcHJvcC1jYXJkJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi92YWx1ZS1wcm9wLWNhcmQuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVmFsdWVQcm9wQ2FyZENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KCkgdmFsdWVQcm9wQ29udGVudDogVmFsdWVQcm9wUHJvcGVydGllcztcclxuICBASW5wdXQoKSBjYXJkT25Ib3ZlcjogYm9vbGVhbjtcclxuICBASW5wdXQoKSBpbWFnZVNpemU6IHN0cmluZztcclxuICBpY29uOiBJY29uTmFtZTtcclxuICBpbWFnZVN0eWxlOiBhbnk7XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMudmFsdWVQcm9wQ29udGVudC5pY29uTmFtZSkge1xyXG4gICAgICB0aGlzLmljb24gPSB0aGlzLnZhbHVlUHJvcENvbnRlbnQuaWNvbk5hbWUgYXMgSWNvbk5hbWU7XHJcbiAgICB9XHJcblxyXG4gICAgaWYgKHRoaXMudmFsdWVQcm9wQ29udGVudC5pbWFnZSkge1xyXG4gICAgICB0aGlzLnNldEltYWdlU3R5bGUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG5cclxuICBzZXRJbWFnZVN0eWxlKCkge1xyXG4gICAgbGV0IGltYWdlU2l6ZTogc3RyaW5nID0gJzQuNXJlbSc7XHJcbiAgICBpZiAodGhpcy5pbWFnZVNpemUpIHtcclxuICAgICAgaW1hZ2VTaXplID0gdGhpcy5pbWFnZVNpemU7XHJcbiAgICB9XHJcbiAgICBsZXQgc3R5bGUgPSB7XHJcbiAgICAgIGhlaWdodDogaW1hZ2VTaXplLFxyXG4gICAgICB3aWR0aDogaW1hZ2VTaXplXHJcbiAgICB9O1xyXG5cclxuICAgIHRoaXMuaW1hZ2VTdHlsZSA9IHN0eWxlO1xyXG4gIH1cclxufSIsIjxtYXQtY2FyZCBjbGFzcz1cInJlYXNvbi1ibG9ja1wiXHJcbiAgICBbbmdDbGFzc109XCJ7J2NhcmQtb24taG92ZXInOmNhcmRPbkhvdmVyICwgJ2NvbnN0YW50LWNhcmQnOiAhY2FyZE9uSG92ZXJ9XCI+XHJcbiAgICA8bWF0LWNhcmQtY29udGVudCBjbGFzcz1cImNvbnRlbnRcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwicmVhc29uLWhlYWRsaW5lXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJyZWFzb24taWNvblwiICpuZ0lmPVwiaWNvblwiPlxyXG4gICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiaWNvblwiPjwvZmEtaWNvbj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJyZWFzb24taW1hZ2VcIiAqbmdJZj1cIiFpY29uXCI+XHJcbiAgICAgICAgICAgICAgICA8aW1nIFtuZ1N0eWxlXT1cImltYWdlU3R5bGVcIiBsb2FkaW5nPVwibGF6eVwiIFtzcmNdPVwidmFsdWVQcm9wQ29udGVudC5pbWFnZVwiPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInJlYXNvbi10aXRsZVwiPlxyXG4gICAgICAgICAgICAgICAge3t2YWx1ZVByb3BDb250ZW50LnRpdGxlfX1cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInJlYXNvbi1kZXNjXCI+XHJcbiAgICAgICAgICAgIHt7dmFsdWVQcm9wQ29udGVudC5kZXNjcmlwdGlvbn19XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L21hdC1jYXJkLWNvbnRlbnQ+XHJcbjwvbWF0LWNhcmQ+Il19

package/fesm2022/jooler-websites-shared.mjs

@@ -8,7 +8,6 @@ import * as i3 from '@angular/material/expansion';
 import { AppMaterialModule } from '@jooler/app-material';
 import { FontAwesomeSharedModule } from '@jooler/font-awesome-shared';
 import * as i1$1 from '@angular/router';
-import { RouterModule } from '@angular/router';
 import * as i3$1 from '@angular/material/button';
 import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -96,11 +95,11 @@ class GetStartedCTAComponent {
         this._Router.navigate([route]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetStartedCTAComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GetStartedCTAComponent, selector: "get-started-cta", inputs: { ctaCardData: "ctaCardData" }, ngImport: i0, template: "<div class=\"all\">\r\n    <div class=\"get-started\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-1\" viewBox=\"0 0 228 234\" fill=\"none\">\r\n            <path\r\n                d=\"M0.01022 156.807C3.78242 72.5467 -16.7612 -0.000429796 70.322 -0.000429796C157.405 -0.000429796 228 70.7119 228 157.941C228 245.17 180.321 233.889 94.691 233.133C-3.00754 232.271 0.01022 244.036 0.01022 156.807Z\"\r\n                fill=\"#155ED4\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-2\" viewBox=\"0 0 177 117\" fill=\"none\">\r\n            <path\r\n                d=\"M110.357 10.5333C194 -30.3739 182.428 61.2397 159.12 90.0236C135.811 118.808 82.6409 125.844 53.8569 102.535C25.073 79.226 -15.952 52.3174 7.35676 23.5335C30.6655 -5.25045 70 25.1261 110.357 10.5333Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 313 229\" fill=\"none\" class=\"svg svg-3\">\r\n            <path\r\n                d=\"M291.122 186.096C243.951 286.741 231.946 183.061 148.832 145.184C65.7183 107.307 -33.8765 166.916 12.5879 64.9595C59.0523 -36.9973 149.649 15.9897 217.109 4.58455C305.197 -13.6163 337.586 84.1393 291.122 186.096Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-4\" viewBox=\"0 0 130 187\" fill=\"none\">\r\n            <path\r\n                d=\"M129.626 63.1228C128.981 112.458 137.333 187 87.7069 187C38.0805 187 0 112.211 0 62.4765C0 12.7416 37.6506 -0.000427246 87.277 -0.000427246C136.903 -0.000427246 129.626 13.3879 129.626 63.1228Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-5\" viewBox=\"0 0 173 131\" fill=\"none\">\r\n            <path\r\n                d=\"M98.7021 21.5285C167.508 -41.2032 182.105 49.9773 167.808 84.1448C153.512 118.312 104.451 139.984 70.2838 125.687C36.1163 111.39 -10.8106 97.0728 3.48602 62.9053C17.7827 28.7378 64.06 46.8582 98.7021 21.5285Z\" />\r\n        </svg>\r\n\r\n\r\n        <div class=\"content\">\r\n            <h1>{{ctaCardData.title}}</h1>\r\n            <div class=\"description\">\r\n                {{ctaCardData.description}}\r\n            </div>\r\n            <a [routerLink]=\"ctaCardData.logo.route\" class=\"custom-anchor\">\r\n                <img loading=\"lazy\" [src]=\"ctaCardData.logo.path\" alt=\"\" class=\"logo-img\">\r\n            </a>\r\n            <div class=\"create-account\">\r\n                <input type=\"email\" class=\"email-input\" placeholder=\"Email Address\">\r\n                <a [routerLink]=\"ctaCardData.callToActionButton.route\" class=\"custom-anchor\">\r\n                    <button mat-raised-button color=\"primary\">{{ctaCardData.callToActionButton.label}}</button>\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.all{margin-top:3rem;display:flex;align-items:center}.get-started{position:relative;text-align:center;color:#fff;display:grid;padding:3rem 0rem;border-radius:1.5rem;margin:auto;background-color:#32353b;box-shadow:2rem 2rem 3.4rem #00000040;z-index:2;width:90%}@media only screen and (min-width: 1500px){.get-started{width:150rem}}.get-started path{fill:#155ed4}.get-started .svg{position:absolute;z-index:-1;width:20%;height:11rem}.get-started .svg-1{flex-shrink:0;fill:#155ed4;bottom:1rem;left:0%}.get-started .svg-2{left:10%;width:9em;height:11rem}.get-started .svg-3{top:4rem;right:30%}.get-started .svg-4{top:2rem;right:0}.get-started .svg-5{bottom:1rem;right:0}.get-started .content{display:grid;row-gap:1rem}.get-started .content .title{font-size:4rem}.get-started .content .description{width:60%;margin:auto}@media only screen and (max-width: 75em){.get-started .content .description{width:80%}}.get-started .sign-up{text-decoration:underline;font-weight:500;cursor:pointer}.get-started .logo-img{cursor:pointer;margin:2vh 0 5vh;width:20rem;margin:auto}.get-started .create-account{display:flex;justify-content:center;align-items:center;width:50%;margin:auto;gap:2rem}@media only screen and (max-width: 75em){.get-started .create-account{width:70%}}@media only screen and (max-width: 56.25em){.get-started .create-account{height:auto;row-gap:1rem;flex-wrap:wrap;width:100%;flex-direction:column}}@media only screen and (max-width: 37.5em){.get-started .svg-3{display:none}}\n"], dependencies: [{ kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GetStartedCTAComponent, selector: "get-started-cta", inputs: { ctaCardData: "ctaCardData" }, ngImport: i0, template: "<div class=\"all\">\r\n    <div class=\"get-started\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-1\" viewBox=\"0 0 228 234\" fill=\"none\">\r\n            <path\r\n                d=\"M0.01022 156.807C3.78242 72.5467 -16.7612 -0.000429796 70.322 -0.000429796C157.405 -0.000429796 228 70.7119 228 157.941C228 245.17 180.321 233.889 94.691 233.133C-3.00754 232.271 0.01022 244.036 0.01022 156.807Z\"\r\n                fill=\"#155ED4\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-2\" viewBox=\"0 0 177 117\" fill=\"none\">\r\n            <path\r\n                d=\"M110.357 10.5333C194 -30.3739 182.428 61.2397 159.12 90.0236C135.811 118.808 82.6409 125.844 53.8569 102.535C25.073 79.226 -15.952 52.3174 7.35676 23.5335C30.6655 -5.25045 70 25.1261 110.357 10.5333Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 313 229\" fill=\"none\" class=\"svg svg-3\">\r\n            <path\r\n                d=\"M291.122 186.096C243.951 286.741 231.946 183.061 148.832 145.184C65.7183 107.307 -33.8765 166.916 12.5879 64.9595C59.0523 -36.9973 149.649 15.9897 217.109 4.58455C305.197 -13.6163 337.586 84.1393 291.122 186.096Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-4\" viewBox=\"0 0 130 187\" fill=\"none\">\r\n            <path\r\n                d=\"M129.626 63.1228C128.981 112.458 137.333 187 87.7069 187C38.0805 187 0 112.211 0 62.4765C0 12.7416 37.6506 -0.000427246 87.277 -0.000427246C136.903 -0.000427246 129.626 13.3879 129.626 63.1228Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-5\" viewBox=\"0 0 173 131\" fill=\"none\">\r\n            <path\r\n                d=\"M98.7021 21.5285C167.508 -41.2032 182.105 49.9773 167.808 84.1448C153.512 118.312 104.451 139.984 70.2838 125.687C36.1163 111.39 -10.8106 97.0728 3.48602 62.9053C17.7827 28.7378 64.06 46.8582 98.7021 21.5285Z\" />\r\n        </svg>\r\n\r\n\r\n        <div class=\"content\">\r\n            <h1>{{ctaCardData.title}}</h1>\r\n            <div class=\"description\">\r\n                {{ctaCardData.description}}\r\n            </div>\r\n            <img loading=\"lazy\" [src]=\"ctaCardData.logo.path\" alt=\"\" (click)=\"onClickLink(ctaCardData.logo.route)\" class=\"logo-img\">\r\n            <div class=\"create-account\">\r\n                <input type=\"email\" class=\"email-input\" placeholder=\"Email Address\">\r\n                <button mat-raised-button class=\"sign-up-btn\"\r\n                    (click)=\"onClickLink(ctaCardData.callToActionButton.route)\">{{ctaCardData.callToActionButton.label}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.all{margin-top:3rem;display:flex;align-items:center}.get-started{position:relative;text-align:center;color:#fff;display:grid;padding:3rem 0rem;border-radius:1.5rem;margin:auto;background-color:#32353b;box-shadow:2rem 2rem 3.4rem #00000040;z-index:2;width:90%}@media only screen and (min-width: 1500px){.get-started{width:150rem}}.get-started path{fill:#155ed4}.get-started .svg{position:absolute;z-index:-1;width:20%;height:11rem}.get-started .svg-1{flex-shrink:0;fill:#155ed4;bottom:1rem;left:0%}.get-started .svg-2{left:10%;width:9em;height:11rem}.get-started .svg-3{top:4rem;right:30%}.get-started .svg-4{top:2rem;right:0}.get-started .svg-5{bottom:1rem;right:0}.get-started .content{display:grid;row-gap:1rem}.get-started .content .title{font-size:4rem}.get-started .content .description{width:60%;margin:auto}@media only screen and (max-width: 75em){.get-started .content .description{width:80%}}.get-started .sign-up{text-decoration:underline;font-weight:500;cursor:pointer}.get-started .logo-img{cursor:pointer;margin:2vh 0 5vh;width:20rem;margin:auto}.get-started .create-account{display:flex;justify-content:center;align-items:center;width:50%;margin:auto;column-gap:2%}.get-started .sign-up-btn{background-color:#155ed4;color:#fff;font-family:inherit}@media only screen and (max-width: 75em){.get-started .create-account{width:70%}}@media only screen and (max-width: 56.25em){.get-started .create-account{height:auto;row-gap:1rem;flex-wrap:wrap;width:100%;flex-direction:column}}@media only screen and (max-width: 37.5em){.get-started .svg-3{display:none}}\n"], dependencies: [{ kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetStartedCTAComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'get-started-cta', template: "<div class=\"all\">\r\n    <div class=\"get-started\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-1\" viewBox=\"0 0 228 234\" fill=\"none\">\r\n            <path\r\n                d=\"M0.01022 156.807C3.78242 72.5467 -16.7612 -0.000429796 70.322 -0.000429796C157.405 -0.000429796 228 70.7119 228 157.941C228 245.17 180.321 233.889 94.691 233.133C-3.00754 232.271 0.01022 244.036 0.01022 156.807Z\"\r\n                fill=\"#155ED4\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-2\" viewBox=\"0 0 177 117\" fill=\"none\">\r\n            <path\r\n                d=\"M110.357 10.5333C194 -30.3739 182.428 61.2397 159.12 90.0236C135.811 118.808 82.6409 125.844 53.8569 102.535C25.073 79.226 -15.952 52.3174 7.35676 23.5335C30.6655 -5.25045 70 25.1261 110.357 10.5333Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 313 229\" fill=\"none\" class=\"svg svg-3\">\r\n            <path\r\n                d=\"M291.122 186.096C243.951 286.741 231.946 183.061 148.832 145.184C65.7183 107.307 -33.8765 166.916 12.5879 64.9595C59.0523 -36.9973 149.649 15.9897 217.109 4.58455C305.197 -13.6163 337.586 84.1393 291.122 186.096Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-4\" viewBox=\"0 0 130 187\" fill=\"none\">\r\n            <path\r\n                d=\"M129.626 63.1228C128.981 112.458 137.333 187 87.7069 187C38.0805 187 0 112.211 0 62.4765C0 12.7416 37.6506 -0.000427246 87.277 -0.000427246C136.903 -0.000427246 129.626 13.3879 129.626 63.1228Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-5\" viewBox=\"0 0 173 131\" fill=\"none\">\r\n            <path\r\n                d=\"M98.7021 21.5285C167.508 -41.2032 182.105 49.9773 167.808 84.1448C153.512 118.312 104.451 139.984 70.2838 125.687C36.1163 111.39 -10.8106 97.0728 3.48602 62.9053C17.7827 28.7378 64.06 46.8582 98.7021 21.5285Z\" />\r\n        </svg>\r\n\r\n\r\n        <div class=\"content\">\r\n            <h1>{{ctaCardData.title}}</h1>\r\n            <div class=\"description\">\r\n                {{ctaCardData.description}}\r\n            </div>\r\n            <a [routerLink]=\"ctaCardData.logo.route\" class=\"custom-anchor\">\r\n                <img loading=\"lazy\" [src]=\"ctaCardData.logo.path\" alt=\"\" class=\"logo-img\">\r\n            </a>\r\n            <div class=\"create-account\">\r\n                <input type=\"email\" class=\"email-input\" placeholder=\"Email Address\">\r\n                <a [routerLink]=\"ctaCardData.callToActionButton.route\" class=\"custom-anchor\">\r\n                    <button mat-raised-button color=\"primary\">{{ctaCardData.callToActionButton.label}}</button>\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.all{margin-top:3rem;display:flex;align-items:center}.get-started{position:relative;text-align:center;color:#fff;display:grid;padding:3rem 0rem;border-radius:1.5rem;margin:auto;background-color:#32353b;box-shadow:2rem 2rem 3.4rem #00000040;z-index:2;width:90%}@media only screen and (min-width: 1500px){.get-started{width:150rem}}.get-started path{fill:#155ed4}.get-started .svg{position:absolute;z-index:-1;width:20%;height:11rem}.get-started .svg-1{flex-shrink:0;fill:#155ed4;bottom:1rem;left:0%}.get-started .svg-2{left:10%;width:9em;height:11rem}.get-started .svg-3{top:4rem;right:30%}.get-started .svg-4{top:2rem;right:0}.get-started .svg-5{bottom:1rem;right:0}.get-started .content{display:grid;row-gap:1rem}.get-started .content .title{font-size:4rem}.get-started .content .description{width:60%;margin:auto}@media only screen and (max-width: 75em){.get-started .content .description{width:80%}}.get-started .sign-up{text-decoration:underline;font-weight:500;cursor:pointer}.get-started .logo-img{cursor:pointer;margin:2vh 0 5vh;width:20rem;margin:auto}.get-started .create-account{display:flex;justify-content:center;align-items:center;width:50%;margin:auto;gap:2rem}@media only screen and (max-width: 75em){.get-started .create-account{width:70%}}@media only screen and (max-width: 56.25em){.get-started .create-account{height:auto;row-gap:1rem;flex-wrap:wrap;width:100%;flex-direction:column}}@media only screen and (max-width: 37.5em){.get-started .svg-3{display:none}}\n"] }]
+            args: [{ selector: 'get-started-cta', template: "<div class=\"all\">\r\n    <div class=\"get-started\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-1\" viewBox=\"0 0 228 234\" fill=\"none\">\r\n            <path\r\n                d=\"M0.01022 156.807C3.78242 72.5467 -16.7612 -0.000429796 70.322 -0.000429796C157.405 -0.000429796 228 70.7119 228 157.941C228 245.17 180.321 233.889 94.691 233.133C-3.00754 232.271 0.01022 244.036 0.01022 156.807Z\"\r\n                fill=\"#155ED4\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-2\" viewBox=\"0 0 177 117\" fill=\"none\">\r\n            <path\r\n                d=\"M110.357 10.5333C194 -30.3739 182.428 61.2397 159.12 90.0236C135.811 118.808 82.6409 125.844 53.8569 102.535C25.073 79.226 -15.952 52.3174 7.35676 23.5335C30.6655 -5.25045 70 25.1261 110.357 10.5333Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 313 229\" fill=\"none\" class=\"svg svg-3\">\r\n            <path\r\n                d=\"M291.122 186.096C243.951 286.741 231.946 183.061 148.832 145.184C65.7183 107.307 -33.8765 166.916 12.5879 64.9595C59.0523 -36.9973 149.649 15.9897 217.109 4.58455C305.197 -13.6163 337.586 84.1393 291.122 186.096Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-4\" viewBox=\"0 0 130 187\" fill=\"none\">\r\n            <path\r\n                d=\"M129.626 63.1228C128.981 112.458 137.333 187 87.7069 187C38.0805 187 0 112.211 0 62.4765C0 12.7416 37.6506 -0.000427246 87.277 -0.000427246C136.903 -0.000427246 129.626 13.3879 129.626 63.1228Z\" />\r\n        </svg>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg svg-5\" viewBox=\"0 0 173 131\" fill=\"none\">\r\n            <path\r\n                d=\"M98.7021 21.5285C167.508 -41.2032 182.105 49.9773 167.808 84.1448C153.512 118.312 104.451 139.984 70.2838 125.687C36.1163 111.39 -10.8106 97.0728 3.48602 62.9053C17.7827 28.7378 64.06 46.8582 98.7021 21.5285Z\" />\r\n        </svg>\r\n\r\n\r\n        <div class=\"content\">\r\n            <h1>{{ctaCardData.title}}</h1>\r\n            <div class=\"description\">\r\n                {{ctaCardData.description}}\r\n            </div>\r\n            <img loading=\"lazy\" [src]=\"ctaCardData.logo.path\" alt=\"\" (click)=\"onClickLink(ctaCardData.logo.route)\" class=\"logo-img\">\r\n            <div class=\"create-account\">\r\n                <input type=\"email\" class=\"email-input\" placeholder=\"Email Address\">\r\n                <button mat-raised-button class=\"sign-up-btn\"\r\n                    (click)=\"onClickLink(ctaCardData.callToActionButton.route)\">{{ctaCardData.callToActionButton.label}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.all{margin-top:3rem;display:flex;align-items:center}.get-started{position:relative;text-align:center;color:#fff;display:grid;padding:3rem 0rem;border-radius:1.5rem;margin:auto;background-color:#32353b;box-shadow:2rem 2rem 3.4rem #00000040;z-index:2;width:90%}@media only screen and (min-width: 1500px){.get-started{width:150rem}}.get-started path{fill:#155ed4}.get-started .svg{position:absolute;z-index:-1;width:20%;height:11rem}.get-started .svg-1{flex-shrink:0;fill:#155ed4;bottom:1rem;left:0%}.get-started .svg-2{left:10%;width:9em;height:11rem}.get-started .svg-3{top:4rem;right:30%}.get-started .svg-4{top:2rem;right:0}.get-started .svg-5{bottom:1rem;right:0}.get-started .content{display:grid;row-gap:1rem}.get-started .content .title{font-size:4rem}.get-started .content .description{width:60%;margin:auto}@media only screen and (max-width: 75em){.get-started .content .description{width:80%}}.get-started .sign-up{text-decoration:underline;font-weight:500;cursor:pointer}.get-started .logo-img{cursor:pointer;margin:2vh 0 5vh;width:20rem;margin:auto}.get-started .create-account{display:flex;justify-content:center;align-items:center;width:50%;margin:auto;column-gap:2%}.get-started .sign-up-btn{background-color:#155ed4;color:#fff;font-family:inherit}@media only screen and (max-width: 75em){.get-started .create-account{width:70%}}@media only screen and (max-width: 56.25em){.get-started .create-account{height:auto;row-gap:1rem;flex-wrap:wrap;width:100%;flex-direction:column}}@media only screen and (max-width: 37.5em){.get-started .svg-3{display:none}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { ctaCardData: [{
                 type: Input
             }] } });
@@ -403,11 +402,11 @@ class CallToActionSectionComponent {
     isBoxWithCard = false;
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CallToActionSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CallToActionSectionComponent, selector: "call-to-action-section", inputs: { sectionContent: "sectionContent", titleOnRightSide: "titleOnRightSide", imageBg: "imageBg", isBoxWithCard: "isBoxWithCard" }, ngImport: i0, template: "<div class=\"page\">\r\n  <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\r\n  'colored-bg':!imageBg,\r\n  'image-bg':imageBg\r\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\r\n    <div class=\"heading-side\">\r\n      <div class=\"title\">{{sectionContent.title}}</div>\r\n      <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\r\n      <div class=\"buttons\">\r\n        <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\" authRoute\r\n          [requireAuth]=\"button.requiresAuth\" [targetRoute]=\"button.route\">\r\n          {{button.name}}\r\n          <fa-icon icon=\"chevron-right\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\r\n      <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\"\r\n        [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\r\n        <img loading=\"lazy\" [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\r\n        <div class=\"box-title\">\r\n          {{card.title}}\r\n        </div>\r\n        <div class=\"box-description\" *ngIf=\"card.description \">\r\n          {{card.description}}\r\n        </div>\r\n        <div class=\"button\">\r\n          <a [routerLink]=\"card.button.route\" class=\"custom-anchor\">\r\n          <button type=\"button\" mat-raised-button authRoute [requireAuth]=\"card.button.requiresAuth\">\r\n            {{card.button.name}}\r\n          </button>\r\n        </a>\r\n        </div>\r\n        <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;margin:7rem auto;width:90%}@media only screen and (min-width: 1500px){.page{width:150rem}}.page .title-right-side{flex-direction:row-reverse}.page .title-left-side{flex-direction:row}.page .image-bg{background-position:center;background-size:cover}.page .colored-bg{background-color:#f7f8f9}.page .colored-bg .bg-image{display:none}.page .cta-box{width:100%;display:flex;column-gap:2%;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;padding:3rem}.page .cta-box .left-bg{width:2rem;position:absolute;top:10%;left:0}.page .cta-box .right-bg{width:15rem;top:0;right:0;position:absolute}.page .cta-box .heading-side{display:flex;flex-direction:column;row-gap:1.5rem;width:40%}.page .cta-box .heading-side .title{color:#155ed4;font-size:3rem;font-weight:700}.page .cta-box .heading-side .subtitle{font-size:2rem;color:#32353b}.page .cta-box .heading-side .buttons{display:flex;flex-direction:row;column-gap:2rem}.page .cta-box .heading-side .buttons .cta-link{padding:.5 rem;color:#155ed4;font-size:1.6rem;cursor:pointer;transition:all ease-in-out .2s;border-bottom:.2rem solid transparent;display:flex;flex-direction:row;column-gap:1.5rem}.page .cta-box .heading-side .buttons .cta-link:hover{border-bottom:.2rem solid #155ED4}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n):hover{border-bottom:.2rem solid #32353B}.page .cta-box .only-an-item{justify-content:right}.page .cta-box .cta-side{display:flex;flex-direction:row;column-gap:2%;padding:1rem;height:100%;width:58%;align-items:center;padding:2rem 0}.page .cta-box .cta-side .box-card{background:#32353b;border-radius:1rem;color:#fff;box-shadow:#32325d40 0 1.3rem 2.7rem -.5rem,#0000004d 0 .8rem 1.6rem -.8rem;border:.2rem solid #ffffff;padding:1.5rem}.page .cta-box .cta-side .box-card .button button{color:#155ed4;background-color:#f7f8f9}.page .cta-box .cta-side .box-non-card{color:#32353b;height:100%}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button{padding-left:1rem;border-left:.3rem transparent solid}.page .cta-box .cta-side .box-non-card .image{margin-left:1.3rem}.page .cta-box .cta-side .box-non-card .box-title{border-left:.3rem #155ED4 solid}.page .cta-box .cta-side .box-non-card .button button{color:#fff;background-color:#32353b}.page .cta-box .cta-side .box{align-self:center;width:49%;display:flex;flex-direction:column;row-gap:1.5rem}.page .cta-box .cta-side .box .image{width:5rem;height:5rem;object-fit:cover;border-radius:.7rem;box-shadow:#0000003d 0 .3rem .8rem}.page .cta-box .cta-side .box .box-title{font-size:2.2rem;font-weight:700}.page .cta-box .cta-side .box .box-description{font-weight:400;font-size:1.8rem;margin-bottom:1rem;width:80%}.page .cta-box .cta-side .box .button button{padding:1rem;font-size:1.4rem;font-weight:600;font-family:inherit}.page .cta-box .divider{display:none}@media only screen and (max-width: 75em){.page .cta-box{flex-direction:column;row-gap:2rem}.page .cta-box .only-an-item{justify-content:center;width:50%;text-align:center}.page .cta-box .only-an-item .box{margin:auto;text-align:center}.page .cta-box .only-an-item .box .box-title,.page .cta-box .only-an-item .box .box-description,.page .cta-box .only-an-item .box .button,.page .cta-box .only-an-item .box .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .only-an-item .box .box-title{border-left:none}.page .cta-box .cta-side,.page .cta-box .heading-side{width:100%}}@media only screen and (max-width: 37.5em){.page .cta-box .cta-side{flex-direction:column;row-gap:4rem}.page .cta-box .cta-side .box-non-card{margin:auto;text-align:center}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button,.page .cta-box .cta-side .box-non-card .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .cta-side .box-non-card .box-title{border-left:none}.page .cta-box .cta-side .box-non-card:first-child .divider{display:grid;width:40%;border:.2rem solid #155ED4;margin:2.5rem auto 0}.page .cta-box .cta-side .box{width:100%}.page .cta-box .cta-side .box .box-title{font-size:2rem}.page .cta-box .cta-side .box .box-description{font-size:1.6rem}.page .cta-box .heading-side{text-align:center}.page .cta-box .heading-side .buttons{justify-content:center}}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: AuthRouteDirective, selector: "[authRoute]", inputs: ["targetRoute", "requireAuth", "navigationExtras"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CallToActionSectionComponent, selector: "call-to-action-section", inputs: { sectionContent: "sectionContent", titleOnRightSide: "titleOnRightSide", imageBg: "imageBg", isBoxWithCard: "isBoxWithCard" }, ngImport: i0, template: "<div class=\"page\">\r\n  <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\r\n  'colored-bg':!imageBg,\r\n  'image-bg':imageBg\r\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\r\n    <div class=\"heading-side\">\r\n      <div class=\"title\">{{sectionContent.title}}</div>\r\n      <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\r\n      <div class=\"buttons\">\r\n        <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\" authRoute\r\n          [requireAuth]=\"button.requiresAuth\" [targetRoute]=\"button.route\">\r\n          {{button.name}}\r\n          <fa-icon icon=\"chevron-right\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\r\n      <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\"\r\n        [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\r\n        <img loading=\"lazy\" [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\r\n        <div class=\"box-title\">\r\n          {{card.title}}\r\n        </div>\r\n        <div class=\"box-description\" *ngIf=\"card.description \">\r\n          {{card.description}}\r\n        </div>\r\n        <div class=\"button\">\r\n          <button type=\"button\" mat-raised-button authRoute [requireAuth]=\"card.button.requiresAuth\"\r\n            [targetRoute]=\"card.button.route\">\r\n            {{card.button.name}}\r\n          </button>\r\n        </div>\r\n        <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;margin:7rem auto;width:90%}@media only screen and (min-width: 1500px){.page{width:150rem}}.page .title-right-side{flex-direction:row-reverse}.page .title-left-side{flex-direction:row}.page .image-bg{background-position:center;background-size:cover}.page .colored-bg{background-color:#f7f8f9}.page .colored-bg .bg-image{display:none}.page .cta-box{width:100%;display:flex;column-gap:2%;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;padding:3rem}.page .cta-box .left-bg{width:2rem;position:absolute;top:10%;left:0}.page .cta-box .right-bg{width:15rem;top:0;right:0;position:absolute}.page .cta-box .heading-side{display:flex;flex-direction:column;row-gap:1.5rem;width:40%}.page .cta-box .heading-side .title{color:#155ed4;font-size:3rem;font-weight:700}.page .cta-box .heading-side .subtitle{font-size:2rem;color:#32353b}.page .cta-box .heading-side .buttons{display:flex;flex-direction:row;column-gap:2rem}.page .cta-box .heading-side .buttons .cta-link{padding:.5 rem;color:#155ed4;font-size:1.6rem;cursor:pointer;transition:all ease-in-out .2s;border-bottom:.2rem solid transparent;display:flex;flex-direction:row;column-gap:1.5rem}.page .cta-box .heading-side .buttons .cta-link:hover{border-bottom:.2rem solid #155ED4}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n):hover{border-bottom:.2rem solid #32353B}.page .cta-box .only-an-item{justify-content:right}.page .cta-box .cta-side{display:flex;flex-direction:row;column-gap:2%;padding:1rem;height:100%;width:58%;align-items:center;padding:2rem 0}.page .cta-box .cta-side .box-card{background:#32353b;border-radius:1rem;color:#fff;box-shadow:#32325d40 0 1.3rem 2.7rem -.5rem,#0000004d 0 .8rem 1.6rem -.8rem;border:.2rem solid #ffffff;padding:1.5rem}.page .cta-box .cta-side .box-card .button button{color:#155ed4;background-color:#f7f8f9}.page .cta-box .cta-side .box-non-card{color:#32353b;height:100%}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button{padding-left:1rem;border-left:.3rem transparent solid}.page .cta-box .cta-side .box-non-card .image{margin-left:1.3rem}.page .cta-box .cta-side .box-non-card .box-title{border-left:.3rem #155ED4 solid}.page .cta-box .cta-side .box-non-card .button button{color:#fff;background-color:#32353b}.page .cta-box .cta-side .box{align-self:center;width:49%;display:flex;flex-direction:column;row-gap:1.5rem}.page .cta-box .cta-side .box .image{width:5rem;height:5rem;object-fit:cover;border-radius:.7rem;box-shadow:#0000003d 0 .3rem .8rem}.page .cta-box .cta-side .box .box-title{font-size:2.2rem;font-weight:700}.page .cta-box .cta-side .box .box-description{font-weight:400;font-size:1.8rem;margin-bottom:1rem;width:80%}.page .cta-box .cta-side .box .button button{padding:1rem;font-size:1.4rem;font-weight:600;font-family:inherit}.page .cta-box .divider{display:none}@media only screen and (max-width: 75em){.page .cta-box{flex-direction:column;row-gap:2rem}.page .cta-box .only-an-item{justify-content:center;width:50%;text-align:center}.page .cta-box .only-an-item .box{margin:auto;text-align:center}.page .cta-box .only-an-item .box .box-title,.page .cta-box .only-an-item .box .box-description,.page .cta-box .only-an-item .box .button,.page .cta-box .only-an-item .box .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .only-an-item .box .box-title{border-left:none}.page .cta-box .cta-side,.page .cta-box .heading-side{width:100%}}@media only screen and (max-width: 37.5em){.page .cta-box .cta-side{flex-direction:column;row-gap:4rem}.page .cta-box .cta-side .box-non-card{margin:auto;text-align:center}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button,.page .cta-box .cta-side .box-non-card .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .cta-side .box-non-card .box-title{border-left:none}.page .cta-box .cta-side .box-non-card:first-child .divider{display:grid;width:40%;border:.2rem solid #155ED4;margin:2.5rem auto 0}.page .cta-box .cta-side .box{width:100%}.page .cta-box .cta-side .box .box-title{font-size:2rem}.page .cta-box .cta-side .box .box-description{font-size:1.6rem}.page .cta-box .heading-side{text-align:center}.page .cta-box .heading-side .buttons{justify-content:center}}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: AuthRouteDirective, selector: "[authRoute]", inputs: ["targetRoute", "requireAuth", "navigationExtras"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CallToActionSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'call-to-action-section', template: "<div class=\"page\">\r\n  <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\r\n  'colored-bg':!imageBg,\r\n  'image-bg':imageBg\r\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\r\n    <div class=\"heading-side\">\r\n      <div class=\"title\">{{sectionContent.title}}</div>\r\n      <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\r\n      <div class=\"buttons\">\r\n        <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\" authRoute\r\n          [requireAuth]=\"button.requiresAuth\" [targetRoute]=\"button.route\">\r\n          {{button.name}}\r\n          <fa-icon icon=\"chevron-right\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\r\n      <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\"\r\n        [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\r\n        <img loading=\"lazy\" [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\r\n        <div class=\"box-title\">\r\n          {{card.title}}\r\n        </div>\r\n        <div class=\"box-description\" *ngIf=\"card.description \">\r\n          {{card.description}}\r\n        </div>\r\n        <div class=\"button\">\r\n          <a [routerLink]=\"card.button.route\" class=\"custom-anchor\">\r\n          <button type=\"button\" mat-raised-button authRoute [requireAuth]=\"card.button.requiresAuth\">\r\n            {{card.button.name}}\r\n          </button>\r\n        </a>\r\n        </div>\r\n        <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;margin:7rem auto;width:90%}@media only screen and (min-width: 1500px){.page{width:150rem}}.page .title-right-side{flex-direction:row-reverse}.page .title-left-side{flex-direction:row}.page .image-bg{background-position:center;background-size:cover}.page .colored-bg{background-color:#f7f8f9}.page .colored-bg .bg-image{display:none}.page .cta-box{width:100%;display:flex;column-gap:2%;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;padding:3rem}.page .cta-box .left-bg{width:2rem;position:absolute;top:10%;left:0}.page .cta-box .right-bg{width:15rem;top:0;right:0;position:absolute}.page .cta-box .heading-side{display:flex;flex-direction:column;row-gap:1.5rem;width:40%}.page .cta-box .heading-side .title{color:#155ed4;font-size:3rem;font-weight:700}.page .cta-box .heading-side .subtitle{font-size:2rem;color:#32353b}.page .cta-box .heading-side .buttons{display:flex;flex-direction:row;column-gap:2rem}.page .cta-box .heading-side .buttons .cta-link{padding:.5 rem;color:#155ed4;font-size:1.6rem;cursor:pointer;transition:all ease-in-out .2s;border-bottom:.2rem solid transparent;display:flex;flex-direction:row;column-gap:1.5rem}.page .cta-box .heading-side .buttons .cta-link:hover{border-bottom:.2rem solid #155ED4}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n):hover{border-bottom:.2rem solid #32353B}.page .cta-box .only-an-item{justify-content:right}.page .cta-box .cta-side{display:flex;flex-direction:row;column-gap:2%;padding:1rem;height:100%;width:58%;align-items:center;padding:2rem 0}.page .cta-box .cta-side .box-card{background:#32353b;border-radius:1rem;color:#fff;box-shadow:#32325d40 0 1.3rem 2.7rem -.5rem,#0000004d 0 .8rem 1.6rem -.8rem;border:.2rem solid #ffffff;padding:1.5rem}.page .cta-box .cta-side .box-card .button button{color:#155ed4;background-color:#f7f8f9}.page .cta-box .cta-side .box-non-card{color:#32353b;height:100%}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button{padding-left:1rem;border-left:.3rem transparent solid}.page .cta-box .cta-side .box-non-card .image{margin-left:1.3rem}.page .cta-box .cta-side .box-non-card .box-title{border-left:.3rem #155ED4 solid}.page .cta-box .cta-side .box-non-card .button button{color:#fff;background-color:#32353b}.page .cta-box .cta-side .box{align-self:center;width:49%;display:flex;flex-direction:column;row-gap:1.5rem}.page .cta-box .cta-side .box .image{width:5rem;height:5rem;object-fit:cover;border-radius:.7rem;box-shadow:#0000003d 0 .3rem .8rem}.page .cta-box .cta-side .box .box-title{font-size:2.2rem;font-weight:700}.page .cta-box .cta-side .box .box-description{font-weight:400;font-size:1.8rem;margin-bottom:1rem;width:80%}.page .cta-box .cta-side .box .button button{padding:1rem;font-size:1.4rem;font-weight:600;font-family:inherit}.page .cta-box .divider{display:none}@media only screen and (max-width: 75em){.page .cta-box{flex-direction:column;row-gap:2rem}.page .cta-box .only-an-item{justify-content:center;width:50%;text-align:center}.page .cta-box .only-an-item .box{margin:auto;text-align:center}.page .cta-box .only-an-item .box .box-title,.page .cta-box .only-an-item .box .box-description,.page .cta-box .only-an-item .box .button,.page .cta-box .only-an-item .box .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .only-an-item .box .box-title{border-left:none}.page .cta-box .cta-side,.page .cta-box .heading-side{width:100%}}@media only screen and (max-width: 37.5em){.page .cta-box .cta-side{flex-direction:column;row-gap:4rem}.page .cta-box .cta-side .box-non-card{margin:auto;text-align:center}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button,.page .cta-box .cta-side .box-non-card .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .cta-side .box-non-card .box-title{border-left:none}.page .cta-box .cta-side .box-non-card:first-child .divider{display:grid;width:40%;border:.2rem solid #155ED4;margin:2.5rem auto 0}.page .cta-box .cta-side .box{width:100%}.page .cta-box .cta-side .box .box-title{font-size:2rem}.page .cta-box .cta-side .box .box-description{font-size:1.6rem}.page .cta-box .heading-side{text-align:center}.page .cta-box .heading-side .buttons{justify-content:center}}\n"] }]
+            args: [{ selector: 'call-to-action-section', template: "<div class=\"page\">\r\n  <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\r\n  'colored-bg':!imageBg,\r\n  'image-bg':imageBg\r\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\r\n    <div class=\"heading-side\">\r\n      <div class=\"title\">{{sectionContent.title}}</div>\r\n      <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\r\n      <div class=\"buttons\">\r\n        <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\" authRoute\r\n          [requireAuth]=\"button.requiresAuth\" [targetRoute]=\"button.route\">\r\n          {{button.name}}\r\n          <fa-icon icon=\"chevron-right\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\r\n      <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\"\r\n        [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\r\n        <img loading=\"lazy\" [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\r\n        <div class=\"box-title\">\r\n          {{card.title}}\r\n        </div>\r\n        <div class=\"box-description\" *ngIf=\"card.description \">\r\n          {{card.description}}\r\n        </div>\r\n        <div class=\"button\">\r\n          <button type=\"button\" mat-raised-button authRoute [requireAuth]=\"card.button.requiresAuth\"\r\n            [targetRoute]=\"card.button.route\">\r\n            {{card.button.name}}\r\n          </button>\r\n        </div>\r\n        <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;margin:7rem auto;width:90%}@media only screen and (min-width: 1500px){.page{width:150rem}}.page .title-right-side{flex-direction:row-reverse}.page .title-left-side{flex-direction:row}.page .image-bg{background-position:center;background-size:cover}.page .colored-bg{background-color:#f7f8f9}.page .colored-bg .bg-image{display:none}.page .cta-box{width:100%;display:flex;column-gap:2%;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;padding:3rem}.page .cta-box .left-bg{width:2rem;position:absolute;top:10%;left:0}.page .cta-box .right-bg{width:15rem;top:0;right:0;position:absolute}.page .cta-box .heading-side{display:flex;flex-direction:column;row-gap:1.5rem;width:40%}.page .cta-box .heading-side .title{color:#155ed4;font-size:3rem;font-weight:700}.page .cta-box .heading-side .subtitle{font-size:2rem;color:#32353b}.page .cta-box .heading-side .buttons{display:flex;flex-direction:row;column-gap:2rem}.page .cta-box .heading-side .buttons .cta-link{padding:.5 rem;color:#155ed4;font-size:1.6rem;cursor:pointer;transition:all ease-in-out .2s;border-bottom:.2rem solid transparent;display:flex;flex-direction:row;column-gap:1.5rem}.page .cta-box .heading-side .buttons .cta-link:hover{border-bottom:.2rem solid #155ED4}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n):hover{border-bottom:.2rem solid #32353B}.page .cta-box .only-an-item{justify-content:right}.page .cta-box .cta-side{display:flex;flex-direction:row;column-gap:2%;padding:1rem;height:100%;width:58%;align-items:center;padding:2rem 0}.page .cta-box .cta-side .box-card{background:#32353b;border-radius:1rem;color:#fff;box-shadow:#32325d40 0 1.3rem 2.7rem -.5rem,#0000004d 0 .8rem 1.6rem -.8rem;border:.2rem solid #ffffff;padding:1.5rem}.page .cta-box .cta-side .box-card .button button{color:#155ed4;background-color:#f7f8f9}.page .cta-box .cta-side .box-non-card{color:#32353b;height:100%}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button{padding-left:1rem;border-left:.3rem transparent solid}.page .cta-box .cta-side .box-non-card .image{margin-left:1.3rem}.page .cta-box .cta-side .box-non-card .box-title{border-left:.3rem #155ED4 solid}.page .cta-box .cta-side .box-non-card .button button{color:#fff;background-color:#32353b}.page .cta-box .cta-side .box{align-self:center;width:49%;display:flex;flex-direction:column;row-gap:1.5rem}.page .cta-box .cta-side .box .image{width:5rem;height:5rem;object-fit:cover;border-radius:.7rem;box-shadow:#0000003d 0 .3rem .8rem}.page .cta-box .cta-side .box .box-title{font-size:2.2rem;font-weight:700}.page .cta-box .cta-side .box .box-description{font-weight:400;font-size:1.8rem;margin-bottom:1rem;width:80%}.page .cta-box .cta-side .box .button button{padding:1rem;font-size:1.4rem;font-weight:600;font-family:inherit}.page .cta-box .divider{display:none}@media only screen and (max-width: 75em){.page .cta-box{flex-direction:column;row-gap:2rem}.page .cta-box .only-an-item{justify-content:center;width:50%;text-align:center}.page .cta-box .only-an-item .box{margin:auto;text-align:center}.page .cta-box .only-an-item .box .box-title,.page .cta-box .only-an-item .box .box-description,.page .cta-box .only-an-item .box .button,.page .cta-box .only-an-item .box .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .only-an-item .box .box-title{border-left:none}.page .cta-box .cta-side,.page .cta-box .heading-side{width:100%}}@media only screen and (max-width: 37.5em){.page .cta-box .cta-side{flex-direction:column;row-gap:4rem}.page .cta-box .cta-side .box-non-card{margin:auto;text-align:center}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button,.page .cta-box .cta-side .box-non-card .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .cta-side .box-non-card .box-title{border-left:none}.page .cta-box .cta-side .box-non-card:first-child .divider{display:grid;width:40%;border:.2rem solid #155ED4;margin:2.5rem auto 0}.page .cta-box .cta-side .box{width:100%}.page .cta-box .cta-side .box .box-title{font-size:2rem}.page .cta-box .cta-side .box .box-description{font-size:1.6rem}.page .cta-box .heading-side{text-align:center}.page .cta-box .heading-side .buttons{justify-content:center}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
                 type: Input
             }], titleOnRightSide: [{
@@ -458,11 +457,11 @@ class TeamComponent {
         this._router.navigate(['/team/new-member']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TeamComponent, deps: [{ token: i1$1.Router }, { token: i1$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TeamComponent, selector: "team", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\r\n    <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n    <div class=\"cards\" *ngIf=\"!isTabletSize\">\r\n        <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n            <div class=\"image-container\">\r\n                <img loading=\"lazy\" [src]=\"teamMember.profilePicture\">\r\n            </div>\r\n            <div class=\"member-information\">\r\n                <div class=\"name\">\r\n                    {{teamMember.fullName}}\r\n                </div>\r\n                <div class=\"position\">\r\n                    {{teamMember.position}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"cards\" *ngIf=\"isTabletSize\">\r\n        <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\r\n            [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n            <ng-template let-member pTemplate=\"item\">\r\n                <div class=\"member-card\">\r\n                    <div class=\"image-container\">\r\n                        <img loading=\"lazy\" [src]=\"member.profilePicture\">\r\n                    </div>\r\n                    <div class=\"member-information\">\r\n                        <div class=\"name\">\r\n                            {{member.fullName}}\r\n                        </div>\r\n                        <div class=\"position\">\r\n                            {{member.position}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-carousel>\r\n    </div>\r\n    <div class=\"caption-text\">\r\n        {{sectionContent.caption}}\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{margin-top:3rem;padding:5%;display:grid;grid-template-rows:auto auto;row-gap:2rem;width:100%}.page .title{font-weight:700;font-size:3.2rem;width:80%;margin-left:4%}.page .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.page .caption-text{font-weight:600;font-size:2rem;width:85%;text-align:center;margin:2rem auto;color:#155ed4}.page .member-card{place-self:center;height:27rem;width:22rem;padding:1rem;display:grid;transition:all .3s ease-in-out;border-radius:1rem}.page .member-card:hover{transition:all .2s ease-in-out}.page .member-card .image-container{display:grid;place-self:center;place-items:center;border-radius:1.5rem;overflow:hidden;width:100%;height:20rem}.page .member-card .image-container img{width:100%;height:100%;object-fit:cover}.page .member-card .member-information{justify-self:center;text-align:center}.page .member-card .member-information .name{font-weight:600;font-size:1.9rem;margin:auto;text-align:center}.page .member-card .member-information .position{font-weight:500;font-size:1.4rem}@media only screen and (max-width: 75em){.page{width:100%;display:block}.page .title{margin-bottom:1.8rem}.page .cards{display:block;width:100%}.page .member-card{width:22rem;margin:auto}.page .member-card .image-container{width:100%;height:100%;overflow:hidden}.page .member-card .image-container img{width:100%;height:100%}}@media only screen and (max-width: 37.5em){.page .member-card{width:23rem}}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#155ed4;width:2.7rem;transition:all ease-in-out .1s}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem;transition:all ease-in-out .5s}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase", "descriptionWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TeamComponent, selector: "team", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\r\n    <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n    <div class=\"cards\" *ngIf=\"!isTabletSize\">\r\n        <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n            <div class=\"image-container\">\r\n                <img loading=\"lazy\" [src]=\"teamMember.profilePicture\">\r\n            </div>\r\n            <div class=\"member-information\">\r\n                <div class=\"name\">\r\n                    {{teamMember.fullName}}\r\n                </div>\r\n                <div class=\"position\">\r\n                    {{teamMember.position}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"cards\" *ngIf=\"isTabletSize\">\r\n        <p-carousel  [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\r\n            [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n            <ng-template let-member pTemplate=\"item\">\r\n                <div class=\"member-card\">\r\n                    <div class=\"image-container\">\r\n                        <img loading=\"lazy\" [src]=\"member.profilePicture\">\r\n                    </div>\r\n                    <div class=\"member-information\">\r\n                        <div class=\"name\">\r\n                            {{member.fullName}}\r\n                        </div>\r\n                        <div class=\"position\">\r\n                            {{member.position}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-carousel>\r\n    </div>\r\n    <div class=\"caption-text\">\r\n        {{sectionContent.caption}}\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;grid-template-rows:auto auto;row-gap:2rem;width:100%}.page .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.page .caption-text{font-weight:600;font-size:2rem;width:85%;text-align:center;margin:2rem auto;color:#155ed4}.page .member-card{height:27rem;width:22rem;padding:1rem;display:grid;border-radius:1rem}.page .member-card .image-container{display:grid;place-self:center;border-radius:1.5rem;overflow:hidden;width:100%;height:20rem}.page .member-card .image-container img{width:100%;height:100%;object-fit:cover}.page .member-card .member-information{justify-self:center;text-align:center}.page .member-card .member-information .name{font-weight:600;font-size:1.9rem;margin:auto;text-align:center}.page .member-card .member-information .position{font-weight:500;font-size:1.4rem}@media only screen and (max-width: 75em){.page{width:100%;display:block}.page .title{margin-bottom:1.8rem}.page .cards{display:block;width:100%}.page .member-card{width:22rem;margin:auto}.page .member-card .image-container{width:100%;height:100%;overflow:hidden}.page .member-card .image-container img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain}}@media only screen and (max-width: 37.5em){.page .member-card{width:23rem}}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#155ed4;width:2rem}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase", "descriptionWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TeamComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'team', template: "<div class=\"page\">\r\n    <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n    <div class=\"cards\" *ngIf=\"!isTabletSize\">\r\n        <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n            <div class=\"image-container\">\r\n                <img loading=\"lazy\" [src]=\"teamMember.profilePicture\">\r\n            </div>\r\n            <div class=\"member-information\">\r\n                <div class=\"name\">\r\n                    {{teamMember.fullName}}\r\n                </div>\r\n                <div class=\"position\">\r\n                    {{teamMember.position}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"cards\" *ngIf=\"isTabletSize\">\r\n        <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\r\n            [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n            <ng-template let-member pTemplate=\"item\">\r\n                <div class=\"member-card\">\r\n                    <div class=\"image-container\">\r\n                        <img loading=\"lazy\" [src]=\"member.profilePicture\">\r\n                    </div>\r\n                    <div class=\"member-information\">\r\n                        <div class=\"name\">\r\n                            {{member.fullName}}\r\n                        </div>\r\n                        <div class=\"position\">\r\n                            {{member.position}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-carousel>\r\n    </div>\r\n    <div class=\"caption-text\">\r\n        {{sectionContent.caption}}\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{margin-top:3rem;padding:5%;display:grid;grid-template-rows:auto auto;row-gap:2rem;width:100%}.page .title{font-weight:700;font-size:3.2rem;width:80%;margin-left:4%}.page .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.page .caption-text{font-weight:600;font-size:2rem;width:85%;text-align:center;margin:2rem auto;color:#155ed4}.page .member-card{place-self:center;height:27rem;width:22rem;padding:1rem;display:grid;transition:all .3s ease-in-out;border-radius:1rem}.page .member-card:hover{transition:all .2s ease-in-out}.page .member-card .image-container{display:grid;place-self:center;place-items:center;border-radius:1.5rem;overflow:hidden;width:100%;height:20rem}.page .member-card .image-container img{width:100%;height:100%;object-fit:cover}.page .member-card .member-information{justify-self:center;text-align:center}.page .member-card .member-information .name{font-weight:600;font-size:1.9rem;margin:auto;text-align:center}.page .member-card .member-information .position{font-weight:500;font-size:1.4rem}@media only screen and (max-width: 75em){.page{width:100%;display:block}.page .title{margin-bottom:1.8rem}.page .cards{display:block;width:100%}.page .member-card{width:22rem;margin:auto}.page .member-card .image-container{width:100%;height:100%;overflow:hidden}.page .member-card .image-container img{width:100%;height:100%}}@media only screen and (max-width: 37.5em){.page .member-card{width:23rem}}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#155ed4;width:2.7rem;transition:all ease-in-out .1s}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem;transition:all ease-in-out .5s}\n"] }]
+            args: [{ selector: 'team', template: "<div class=\"page\">\r\n    <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n    <div class=\"cards\" *ngIf=\"!isTabletSize\">\r\n        <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n            <div class=\"image-container\">\r\n                <img loading=\"lazy\" [src]=\"teamMember.profilePicture\">\r\n            </div>\r\n            <div class=\"member-information\">\r\n                <div class=\"name\">\r\n                    {{teamMember.fullName}}\r\n                </div>\r\n                <div class=\"position\">\r\n                    {{teamMember.position}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"cards\" *ngIf=\"isTabletSize\">\r\n        <p-carousel  [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\r\n            [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n            <ng-template let-member pTemplate=\"item\">\r\n                <div class=\"member-card\">\r\n                    <div class=\"image-container\">\r\n                        <img loading=\"lazy\" [src]=\"member.profilePicture\">\r\n                    </div>\r\n                    <div class=\"member-information\">\r\n                        <div class=\"name\">\r\n                            {{member.fullName}}\r\n                        </div>\r\n                        <div class=\"position\">\r\n                            {{member.position}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-carousel>\r\n    </div>\r\n    <div class=\"caption-text\">\r\n        {{sectionContent.caption}}\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;grid-template-rows:auto auto;row-gap:2rem;width:100%}.page .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.page .caption-text{font-weight:600;font-size:2rem;width:85%;text-align:center;margin:2rem auto;color:#155ed4}.page .member-card{height:27rem;width:22rem;padding:1rem;display:grid;border-radius:1rem}.page .member-card .image-container{display:grid;place-self:center;border-radius:1.5rem;overflow:hidden;width:100%;height:20rem}.page .member-card .image-container img{width:100%;height:100%;object-fit:cover}.page .member-card .member-information{justify-self:center;text-align:center}.page .member-card .member-information .name{font-weight:600;font-size:1.9rem;margin:auto;text-align:center}.page .member-card .member-information .position{font-weight:500;font-size:1.4rem}@media only screen and (max-width: 75em){.page{width:100%;display:block}.page .title{margin-bottom:1.8rem}.page .cards{display:block;width:100%}.page .member-card{width:22rem;margin:auto}.page .member-card .image-container{width:100%;height:100%;overflow:hidden}.page .member-card .image-container img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain}}@media only screen and (max-width: 37.5em){.page .member-card{width:23rem}}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#155ed4;width:2rem}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$3.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
                 type: Input
             }] } });
@@ -918,11 +917,11 @@ class CtaSectionStyleFourComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CtaSectionStyleFourComponent, deps: [{ token: i1$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CtaSectionStyleFourComponent, selector: "cta-section-style-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n    <img loading=\"lazy\" *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\"\r\n        class=\"bg-img\" alt=\"bg-img\">\r\n    <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\r\n        <div class=\"section-title\">\r\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"buttons-line\">\r\n            <a *ngFor=\"let button of sectionContent.buttons\" authRoute [requireAuth]=\"button.requiresAuth\"\r\n                [routerLink]=\"button.route\" class=\"cta-button custom-anchor\">\r\n                <span class=\"button-value\">\r\n                    {{button.label}}\r\n                </span>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"chevron-right\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                    <path\r\n                        d=\"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z\">\r\n                    </path>\r\n                    <path class=\"octicon-chevrow-stem\" d=\"M1.75 8H11\" stroke-width=\"1.5\" stroke-linecap=\"round\">\r\n                    </path>\r\n                </svg>\r\n            </a>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.main-card{position:relative;width:100%;display:grid;row-gap:2rem;column-gap:2%;justify-content:center;padding:10rem 2rem;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .flex-reverse{flex-direction:row-reverse}.main-card .text-side{display:flex;flex-direction:row;column-gap:2%;width:100%;place-items:center}.main-card .text-side .section-title{width:70%;margin:auto}.main-card .text-side .buttons-line{width:28%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line .cta-button{font-family:inherit;background-color:transparent;border-radius:.5rem;color:#fff;padding:2rem 3rem;box-shadow:#155ed4 0 0 0 .2rem inset;transition:box-shadow .2s,outline .2s ease;white-space:nowrap;align-items:center;cursor:pointer;font-size:2.4rem}.main-card .text-side .buttons-line .cta-button .chevron-right{transition:all .2s ease;transform:translate(0);width:1.6rem;height:1.6rem}.main-card .text-side .buttons-line .cta-button .chevron-right path{fill:#fff;stroke:#fff}.main-card .text-side .buttons-line .cta-button .octicon-chevrow-stem{stroke-dasharray:10;stroke-dashoffset:10;transition:stroke-dashoffset .2s}.main-card .text-side .buttons-line .cta-button:hover{box-shadow:#fff 0 0 0 .3rem inset}.main-card .text-side .buttons-line .cta-button:hover .octicon-chevrow-stem{stroke-dashoffset:20}.main-card .text-side .buttons-line .cta-button:hover .chevron-right{transform:translate(.4rem)}.main-card .text-side .buttons-line .cta-button:active{box-shadow:#fff 0 0 0 .4rem inset}.main-card .text-side .buttons-line .cta-button:active .octicon-chevrow-stem{stroke-dashoffset:20}.main-card .text-side .buttons-line .cta-button:active .chevron-right{transform:translate(.6rem)}@media only screen and (max-width: 56.25em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .buttons-line{width:50%}}@media only screen and (max-width: 37.5em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .section-title,.main-card .text-side .buttons-line{width:90%}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: AuthRouteDirective, selector: "[authRoute]", inputs: ["targetRoute", "requireAuth", "navigationExtras"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase", "descriptionWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CtaSectionStyleFourComponent, selector: "cta-section-style-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n    <img loading=\"lazy\" *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\"\r\n        class=\"bg-img\" alt=\"bg-img\">\r\n    <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\r\n        <div class=\"section-title\">\r\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"buttons-line\">\r\n            <div *ngFor=\"let button of sectionContent.buttons\" authRoute [requireAuth]=\"button.requiresAuth\"\r\n                [targetRoute]=\"button.route\" class=\"cta-button\">\r\n                <span class=\"button-value\">\r\n                    {{button.label}}\r\n                </span>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"chevron-right\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                    <path\r\n                        d=\"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z\">\r\n                    </path>\r\n                    <path class=\"octicon-chevrow-stem\" d=\"M1.75 8H11\" stroke-width=\"1.5\" stroke-linecap=\"round\">\r\n                    </path>\r\n                </svg>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.main-card{position:relative;width:100%;display:grid;row-gap:2rem;column-gap:2%;justify-content:center;padding:10rem 2rem;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .flex-reverse{flex-direction:row-reverse}.main-card .text-side{display:flex;flex-direction:row;column-gap:2%;width:100%;place-items:center}.main-card .text-side .section-title{width:70%;margin:auto}.main-card .text-side .buttons-line{width:28%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line .cta-button{font-family:inherit;background-color:transparent;border-radius:.5rem;color:#fff;padding:2rem 3rem;box-shadow:#155ed4 0 0 0 .2rem inset;transition:box-shadow .2s,outline .2s ease;white-space:nowrap;align-items:center;cursor:pointer;font-size:2.4rem}.main-card .text-side .buttons-line .cta-button .chevron-right{transition:all .2s ease;transform:translate(0);width:1.6rem;height:1.6rem}.main-card .text-side .buttons-line .cta-button .chevron-right path{fill:#fff;stroke:#fff}.main-card .text-side .buttons-line .cta-button .octicon-chevrow-stem{stroke-dasharray:10;stroke-dashoffset:10;transition:stroke-dashoffset .2s}.main-card .text-side .buttons-line .cta-button:hover{box-shadow:#fff 0 0 0 .3rem inset}.main-card .text-side .buttons-line .cta-button:hover .octicon-chevrow-stem{stroke-dashoffset:20}.main-card .text-side .buttons-line .cta-button:hover .chevron-right{transform:translate(.4rem)}.main-card .text-side .buttons-line .cta-button:active{box-shadow:#fff 0 0 0 .4rem inset}.main-card .text-side .buttons-line .cta-button:active .octicon-chevrow-stem{stroke-dashoffset:20}.main-card .text-side .buttons-line .cta-button:active .chevron-right{transform:translate(.6rem)}@media only screen and (max-width: 56.25em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .buttons-line{width:50%}}@media only screen and (max-width: 37.5em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .section-title,.main-card .text-side .buttons-line{width:90%}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AuthRouteDirective, selector: "[authRoute]", inputs: ["targetRoute", "requireAuth", "navigationExtras"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase", "descriptionWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CtaSectionStyleFourComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cta-section-style-four', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n    <img loading=\"lazy\" *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\"\r\n        class=\"bg-img\" alt=\"bg-img\">\r\n    <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\r\n        <div class=\"section-title\">\r\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"buttons-line\">\r\n            <a *ngFor=\"let button of sectionContent.buttons\" authRoute [requireAuth]=\"button.requiresAuth\"\r\n                [routerLink]=\"button.route\" class=\"cta-button custom-anchor\">\r\n                <span class=\"button-value\">\r\n                    {{button.label}}\r\n                </span>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"chevron-right\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                    <path\r\n                        d=\"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z\">\r\n                    </path>\r\n                    <path class=\"octicon-chevrow-stem\" d=\"M1.75 8H11\" stroke-width=\"1.5\" stroke-linecap=\"round\">\r\n                    </path>\r\n                </svg>\r\n            </a>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.main-card{position:relative;width:100%;display:grid;row-gap:2rem;column-gap:2%;justify-content:center;padding:10rem 2rem;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .flex-reverse{flex-direction:row-reverse}.main-card .text-side{display:flex;flex-direction:row;column-gap:2%;width:100%;place-items:center}.main-card .text-side .section-title{width:70%;margin:auto}.main-card .text-side .buttons-line{width:28%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line .cta-button{font-family:inherit;background-color:transparent;border-radius:.5rem;color:#fff;padding:2rem 3rem;box-shadow:#155ed4 0 0 0 .2rem inset;transition:box-shadow .2s,outline .2s ease;white-space:nowrap;align-items:center;cursor:pointer;font-size:2.4rem}.main-card .text-side .buttons-line .cta-button .chevron-right{transition:all .2s ease;transform:translate(0);width:1.6rem;height:1.6rem}.main-card .text-side .buttons-line .cta-button .chevron-right path{fill:#fff;stroke:#fff}.main-card .text-side .buttons-line .cta-button .octicon-chevrow-stem{stroke-dasharray:10;stroke-dashoffset:10;transition:stroke-dashoffset .2s}.main-card .text-side .buttons-line .cta-button:hover{box-shadow:#fff 0 0 0 .3rem inset}.main-card .text-side .buttons-line .cta-button:hover .octicon-chevrow-stem{stroke-dashoffset:20}.main-card .text-side .buttons-line .cta-button:hover .chevron-right{transform:translate(.4rem)}.main-card .text-side .buttons-line .cta-button:active{box-shadow:#fff 0 0 0 .4rem inset}.main-card .text-side .buttons-line .cta-button:active .octicon-chevrow-stem{stroke-dashoffset:20}.main-card .text-side .buttons-line .cta-button:active .chevron-right{transform:translate(.6rem)}@media only screen and (max-width: 56.25em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .buttons-line{width:50%}}@media only screen and (max-width: 37.5em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .section-title,.main-card .text-side .buttons-line{width:90%}}\n"] }]
+            args: [{ selector: 'cta-section-style-four', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n    <img loading=\"lazy\" *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\"\r\n        class=\"bg-img\" alt=\"bg-img\">\r\n    <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\r\n        <div class=\"section-title\">\r\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"buttons-line\">\r\n            <div *ngFor=\"let button of sectionContent.buttons\" authRoute [requireAuth]=\"button.requiresAuth\"\r\n                [targetRoute]=\"button.route\" class=\"cta-button\">\r\n                <span class=\"button-value\">\r\n                    {{button.label}}\r\n                </span>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"chevron-right\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                    <path\r\n                        d=\"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z\">\r\n                    </path>\r\n                    <path class=\"octicon-chevrow-stem\" d=\"M1.75 8H11\" stroke-width=\"1.5\" stroke-linecap=\"round\">\r\n                    </path>\r\n                </svg>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.main-card{position:relative;width:100%;display:grid;row-gap:2rem;column-gap:2%;justify-content:center;padding:10rem 2rem;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .flex-reverse{flex-direction:row-reverse}.main-card .text-side{display:flex;flex-direction:row;column-gap:2%;width:100%;place-items:center}.main-card .text-side .section-title{width:70%;margin:auto}.main-card .text-side .buttons-line{width:28%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line .cta-button{font-family:inherit;background-color:transparent;border-radius:.5rem;color:#fff;padding:2rem 3rem;box-shadow:#155ed4 0 0 0 .2rem inset;transition:box-shadow .2s,outline .2s ease;white-space:nowrap;align-items:center;cursor:pointer;font-size:2.4rem}.main-card .text-side .buttons-line .cta-button .chevron-right{transition:all .2s ease;transform:translate(0);width:1.6rem;height:1.6rem}.main-card .text-side .buttons-line .cta-button .chevron-right path{fill:#fff;stroke:#fff}.main-card .text-side .buttons-line .cta-button .octicon-chevrow-stem{stroke-dasharray:10;stroke-dashoffset:10;transition:stroke-dashoffset .2s}.main-card .text-side .buttons-line .cta-button:hover{box-shadow:#fff 0 0 0 .3rem inset}.main-card .text-side .buttons-line .cta-button:hover .octicon-chevrow-stem{stroke-dashoffset:20}.main-card .text-side .buttons-line .cta-button:hover .chevron-right{transform:translate(.4rem)}.main-card .text-side .buttons-line .cta-button:active{box-shadow:#fff 0 0 0 .4rem inset}.main-card .text-side .buttons-line .cta-button:active .octicon-chevrow-stem{stroke-dashoffset:20}.main-card .text-side .buttons-line .cta-button:active .chevron-right{transform:translate(.6rem)}@media only screen and (max-width: 56.25em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .buttons-line{width:50%}}@media only screen and (max-width: 37.5em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .section-title,.main-card .text-side .buttons-line{width:90%}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
                 type: Input
             }] } });
@@ -933,13 +932,17 @@ class CtaSectionStyleThreeComponent {
     constructor(_router) {
         this._router = _router;
     }
-    ngOnInit() { }
+    ngOnInit() {
+    }
+    onClickCtaButton(route) {
+        this._router.navigate([route]);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CtaSectionStyleThreeComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CtaSectionStyleThreeComponent, selector: "cta-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n    <img loading=\"lazy\" *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\"\r\n        class=\"bg-img\" alt=\"bg-img\">\r\n    <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && !sectionContent.titleImageOrder\">\r\n        <img loading=\"lazy\" [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n    </div>\r\n    <div class=\"text-side\">\r\n        <div class=\"section-title\">\r\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && sectionContent.titleImageOrder\">\r\n            <img loading=\"lazy\" [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n        </div>\r\n        <div class=\"buttons-line\">\r\n            <a *ngFor=\"let button of sectionContent.buttons\" [routerLink]=\"button.route\" class=\"custom-anchor\">\r\n                <button mat-raised-button [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\r\n                    {{button.label}}\r\n                </button>\r\n            </a>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:2rem;width:100%;justify-items:center}.main-card .text-side .section-title{width:60%;margin:auto}.main-card .text-side .buttons-line{width:100%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600}@media only screen and (max-width: 75em){.main-card .text-side .section-title{width:85%}}.main-card .illustration-side{margin:auto;width:40%;display:grid;justify-items:center}.main-card .illustration-side .side-img{width:30%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase", "descriptionWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CtaSectionStyleThreeComponent, selector: "cta-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n    <img loading=\"lazy\" *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\"\r\n        alt=\"bg-img\">\r\n    <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && !sectionContent.titleImageOrder\">\r\n        <img loading=\"lazy\" [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n    </div>\r\n    <div class=\"text-side\">\r\n        <div class=\"section-title\">\r\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && sectionContent.titleImageOrder\">\r\n            <img loading=\"lazy\" [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n        </div>\r\n        <div class=\"buttons-line\">\r\n            <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\"\r\n                (click)=\"onClickCtaButton(button.route)\"\r\n                [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\r\n                {{button.label}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:2rem;width:100%;justify-items:center}.main-card .text-side .section-title{width:60%;margin:auto}.main-card .text-side .buttons-line{width:100%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600}@media only screen and (max-width: 75em){.main-card .text-side .section-title{width:85%}}.main-card .illustration-side{margin:auto;width:40%;display:grid;justify-items:center}.main-card .illustration-side .side-img{width:30%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase", "descriptionWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CtaSectionStyleThreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cta-section-style-three', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n    <img loading=\"lazy\" *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\"\r\n        class=\"bg-img\" alt=\"bg-img\">\r\n    <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && !sectionContent.titleImageOrder\">\r\n        <img loading=\"lazy\" [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n    </div>\r\n    <div class=\"text-side\">\r\n        <div class=\"section-title\">\r\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && sectionContent.titleImageOrder\">\r\n            <img loading=\"lazy\" [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n        </div>\r\n        <div class=\"buttons-line\">\r\n            <a *ngFor=\"let button of sectionContent.buttons\" [routerLink]=\"button.route\" class=\"custom-anchor\">\r\n                <button mat-raised-button [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\r\n                    {{button.label}}\r\n                </button>\r\n            </a>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:2rem;width:100%;justify-items:center}.main-card .text-side .section-title{width:60%;margin:auto}.main-card .text-side .buttons-line{width:100%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600}@media only screen and (max-width: 75em){.main-card .text-side .section-title{width:85%}}.main-card .illustration-side{margin:auto;width:40%;display:grid;justify-items:center}.main-card .illustration-side .side-img{width:30%}\n"] }]
+            args: [{ selector: 'cta-section-style-three', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n    <img loading=\"lazy\" *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\"\r\n        alt=\"bg-img\">\r\n    <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && !sectionContent.titleImageOrder\">\r\n        <img loading=\"lazy\" [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n    </div>\r\n    <div class=\"text-side\">\r\n        <div class=\"section-title\">\r\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && sectionContent.titleImageOrder\">\r\n            <img loading=\"lazy\" [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n        </div>\r\n        <div class=\"buttons-line\">\r\n            <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\"\r\n                (click)=\"onClickCtaButton(button.route)\"\r\n                [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\r\n                {{button.label}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:2rem;width:100%;justify-items:center}.main-card .text-side .section-title{width:60%;margin:auto}.main-card .text-side .buttons-line{width:100%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600}@media only screen and (max-width: 75em){.main-card .text-side .section-title{width:85%}}.main-card .illustration-side{margin:auto;width:40%;display:grid;justify-items:center}.main-card .illustration-side .side-img{width:30%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { sectionContent: [{
                 type: Input
             }] } });
@@ -1013,22 +1016,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class ValuePropCardComponent {
     valuePropContent;
     cardOnHover;
+    imageSize;
     icon;
+    imageStyle;
     ngOnInit() {
         if (this.valuePropContent.iconName) {
             this.icon = this.valuePropContent.iconName;
         }
+        if (this.valuePropContent.image) {
+            this.setImageStyle();
+        }
+    }
+    setImageStyle() {
+        let imageSize = '4.5rem';
+        if (this.imageSize) {
+            imageSize = this.imageSize;
+        }
+        let style = {
+            height: imageSize,
+            width: imageSize
+        };
+        this.imageStyle = style;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValuePropCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValuePropCardComponent, selector: "value-prop-card", inputs: { valuePropContent: "valuePropContent", cardOnHover: "cardOnHover" }, ngImport: i0, template: "<mat-card class=\"reason-block\"\r\n    [ngClass]=\"{'card-on-hover':cardOnHover , 'constant-card': !cardOnHover}\">\r\n    <mat-card-content class=\"content\">\r\n        <div class=\"reason-headline\">\r\n            <div class=\"reason-icon\" *ngIf=\"icon\">\r\n                <fa-icon [icon]=\"icon\"></fa-icon>\r\n            </div>\r\n            <div class=\"reason-image\" *ngIf=\"!icon\">\r\n                <img loading=\"lazy\" [src]=\"valuePropContent.image\" alt=\"\">\r\n            </div>\r\n            <div class=\"reason-title\">\r\n                {{valuePropContent.title}}\r\n            </div>\r\n        </div>\r\n        <div class=\"reason-desc\">\r\n            {{valuePropContent.description}}\r\n        </div>\r\n    </mat-card-content>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{display:grid;row-gap:1rem;grid-template-rows:max-content auto}.card-on-hover:hover{background-color:#f7f8f9}.constant-card{background-color:#fff}.reason-block{transition:all ease-in-out .2s;height:21rem;max-width:36rem}.reason-block .reason-headline{display:grid;column-gap:2rem;grid-template-columns:max-content auto;grid-template-rows:max-content}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{width:4rem;aspect-ratio:3/2;object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit;font-size:1.6rem;line-height:1.6rem}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$4.MatCardContent, selector: "mat-card-content" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValuePropCardComponent, selector: "value-prop-card", inputs: { valuePropContent: "valuePropContent", cardOnHover: "cardOnHover", imageSize: "imageSize" }, ngImport: i0, template: "<mat-card class=\"reason-block\"\r\n    [ngClass]=\"{'card-on-hover':cardOnHover , 'constant-card': !cardOnHover}\">\r\n    <mat-card-content class=\"content\">\r\n        <div class=\"reason-headline\">\r\n            <div class=\"reason-icon\" *ngIf=\"icon\">\r\n                <fa-icon [icon]=\"icon\"></fa-icon>\r\n            </div>\r\n            <div class=\"reason-image\" *ngIf=\"!icon\">\r\n                <img [ngStyle]=\"imageStyle\" loading=\"lazy\" [src]=\"valuePropContent.image\">\r\n            </div>\r\n            <div class=\"reason-title\">\r\n                {{valuePropContent.title}}\r\n            </div>\r\n        </div>\r\n        <div class=\"reason-desc\">\r\n            {{valuePropContent.description}}\r\n        </div>\r\n    </mat-card-content>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{display:grid;row-gap:1rem;grid-template-rows:max-content auto}.card-on-hover:hover{background-color:#f7f8f9}.constant-card{background-color:#fff}.reason-block{transition:all ease-in-out .2s;height:21rem;max-width:36rem}.reason-block .reason-headline{display:grid;column-gap:1rem;grid-template-columns:max-content auto;grid-template-rows:max-content;align-items:center}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit;font-size:1.6rem;line-height:1.6rem}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$4.MatCardContent, selector: "mat-card-content" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValuePropCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'value-prop-card', template: "<mat-card class=\"reason-block\"\r\n    [ngClass]=\"{'card-on-hover':cardOnHover , 'constant-card': !cardOnHover}\">\r\n    <mat-card-content class=\"content\">\r\n        <div class=\"reason-headline\">\r\n            <div class=\"reason-icon\" *ngIf=\"icon\">\r\n                <fa-icon [icon]=\"icon\"></fa-icon>\r\n            </div>\r\n            <div class=\"reason-image\" *ngIf=\"!icon\">\r\n                <img loading=\"lazy\" [src]=\"valuePropContent.image\" alt=\"\">\r\n            </div>\r\n            <div class=\"reason-title\">\r\n                {{valuePropContent.title}}\r\n            </div>\r\n        </div>\r\n        <div class=\"reason-desc\">\r\n            {{valuePropContent.description}}\r\n        </div>\r\n    </mat-card-content>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{display:grid;row-gap:1rem;grid-template-rows:max-content auto}.card-on-hover:hover{background-color:#f7f8f9}.constant-card{background-color:#fff}.reason-block{transition:all ease-in-out .2s;height:21rem;max-width:36rem}.reason-block .reason-headline{display:grid;column-gap:2rem;grid-template-columns:max-content auto;grid-template-rows:max-content}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{width:4rem;aspect-ratio:3/2;object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit;font-size:1.6rem;line-height:1.6rem}\n"] }]
+            args: [{ selector: 'value-prop-card', template: "<mat-card class=\"reason-block\"\r\n    [ngClass]=\"{'card-on-hover':cardOnHover , 'constant-card': !cardOnHover}\">\r\n    <mat-card-content class=\"content\">\r\n        <div class=\"reason-headline\">\r\n            <div class=\"reason-icon\" *ngIf=\"icon\">\r\n                <fa-icon [icon]=\"icon\"></fa-icon>\r\n            </div>\r\n            <div class=\"reason-image\" *ngIf=\"!icon\">\r\n                <img [ngStyle]=\"imageStyle\" loading=\"lazy\" [src]=\"valuePropContent.image\">\r\n            </div>\r\n            <div class=\"reason-title\">\r\n                {{valuePropContent.title}}\r\n            </div>\r\n        </div>\r\n        <div class=\"reason-desc\">\r\n            {{valuePropContent.description}}\r\n        </div>\r\n    </mat-card-content>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{display:grid;row-gap:1rem;grid-template-rows:max-content auto}.card-on-hover:hover{background-color:#f7f8f9}.constant-card{background-color:#fff}.reason-block{transition:all ease-in-out .2s;height:21rem;max-width:36rem}.reason-block .reason-headline{display:grid;column-gap:1rem;grid-template-columns:max-content auto;grid-template-rows:max-content;align-items:center}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit;font-size:1.6rem;line-height:1.6rem}\n"] }]
         }], propDecorators: { valuePropContent: [{
                 type: Input
             }], cardOnHover: [{
                 type: Input
+            }], imageSize: [{
+                type: Input
             }] } });
 
 class JoolerWebsitesSharedModule {
@@ -1069,8 +1090,7 @@ class JoolerWebsitesSharedModule {
             ReactiveFormsModule,
             FormsModule,
             NgSelectModule,
-            MatTooltipModule,
-            RouterModule], exports: [FontAwesomeModule,
+            MatTooltipModule], exports: [FontAwesomeModule,
             AppMaterialModule,
             SectionTitleComponent,
             PageSectionStyleTenComponent,
@@ -1110,8 +1130,7 @@ class JoolerWebsitesSharedModule {
             ReactiveFormsModule,
             FormsModule,
             NgSelectModule,
-            MatTooltipModule,
-            RouterModule, FontAwesomeModule,
+            MatTooltipModule, FontAwesomeModule,
             AppMaterialModule,
             FontAwesomeSharedModule,
             MatTooltipModule] });
@@ -1159,8 +1178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ReactiveFormsModule,
                         FormsModule,
                         NgSelectModule,
-                        MatTooltipModule,
-                        RouterModule
+                        MatTooltipModule
                     ],
                     exports: [
                         FontAwesomeModule,