npm - @jooler/jooler-websites-shared - Versions diffs - 0.0.167 → 0.0.168 - Mend

@jooler/jooler-websites-shared 0.0.167 → 0.0.168

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (154) hide show

package/fesm2020/jooler-websites-shared.mjs CHANGED Viewed

@@ -26,1189 +26,1186 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import * as i1$3 from '@angular/material/icon';
 import * as i3$4 from '@angular/material/card';
-class SectionTitleComponent {
-}
-SectionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SectionTitleComponent, selector: "section-title", inputs: { sectionTitle: "sectionTitle" }, ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider}\">\n    <div class=\"title-container\">\n        <div class=\"title\" *ngIf=\"sectionTitle.title\">{{sectionTitle.title | titlecase}}</div>\n        <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\n        </div>\n    </div>\n    <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\n        {{sectionTitle.subtitle}}\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.2rem auto 3.2rem}.align-center .description{margin:auto;width:70%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:bolder;font-size:4.5rem;width:auto;margin:auto;line-height:normal}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-color:#fff}.dark-background .title,.dark-background .description{color:#fff}.without-divider{display:flex;flex-direction:column;row-gap:3rem}.without-divider .title{font-size:5rem}.without-divider .description{font-size:2rem}@media only screen and (max-width: 37.5em){.without-divider .title{font-size:3rem}.without-divider .description{font-size:1.8rem}}.light-background .divider{background-color:#155ed4}.light-background .title,.light-background .description{color:#32353b}.description{width:85%;font-weight:500;font-size:1.6rem}.align-left .title{margin:0}.align-left .divider{margin:.2rem 0 3.2rem;width:auto}.align-left .description{width:85%;margin:0}.align-left .title-container{margin:0}@media only screen and (max-width: 37.5em){.align-left .title,.align-center .title{font-size:3rem}.align-left .description,.align-center .description{width:85%;font-size:1.8rem}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'section-title', template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider}\">\n    <div class=\"title-container\">\n        <div class=\"title\" *ngIf=\"sectionTitle.title\">{{sectionTitle.title | titlecase}}</div>\n        <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\n        </div>\n    </div>\n    <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\n        {{sectionTitle.subtitle}}\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.2rem auto 3.2rem}.align-center .description{margin:auto;width:70%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:bolder;font-size:4.5rem;width:auto;margin:auto;line-height:normal}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-color:#fff}.dark-background .title,.dark-background .description{color:#fff}.without-divider{display:flex;flex-direction:column;row-gap:3rem}.without-divider .title{font-size:5rem}.without-divider .description{font-size:2rem}@media only screen and (max-width: 37.5em){.without-divider .title{font-size:3rem}.without-divider .description{font-size:1.8rem}}.light-background .divider{background-color:#155ed4}.light-background .title,.light-background .description{color:#32353b}.description{width:85%;font-weight:500;font-size:1.6rem}.align-left .title{margin:0}.align-left .divider{margin:.2rem 0 3.2rem;width:auto}.align-left .description{width:85%;margin:0}.align-left .title-container{margin:0}@media only screen and (max-width: 37.5em){.align-left .title,.align-center .title{font-size:3rem}.align-left .description,.align-center .description{width:85%;font-size:1.8rem}}\n"] }]
-        }], propDecorators: { sectionTitle: [{
-                type: Input
+class SectionTitleComponent {
+}
+SectionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SectionTitleComponent, selector: "section-title", inputs: { sectionTitle: "sectionTitle" }, ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider}\">\r\n    <div class=\"title-container\">\r\n        <div class=\"title\" *ngIf=\"sectionTitle.title\">{{sectionTitle.title | titlecase}}</div>\r\n        <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\r\n        </div>\r\n    </div>\r\n    <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\r\n        {{sectionTitle.subtitle}}\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.2rem auto 3.2rem}.align-center .description{margin:auto;width:70%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:bolder;font-size:4.5rem;width:auto;margin:auto;line-height:normal}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-color:#fff}.dark-background .title,.dark-background .description{color:#fff}.without-divider{display:flex;flex-direction:column;row-gap:3rem}.without-divider .title{font-size:5rem}.without-divider .description{font-size:2rem}@media only screen and (max-width: 37.5em){.without-divider .title{font-size:3rem}.without-divider .description{font-size:1.8rem}}.light-background .divider{background-color:#155ed4}.light-background .title,.light-background .description{color:#32353b}.description{width:85%;font-weight:500;font-size:1.6rem}.align-left .title{margin:0}.align-left .divider{margin:.2rem 0 3.2rem;width:auto}.align-left .description{width:85%;margin:0}.align-left .title-container{margin:0}@media only screen and (max-width: 37.5em){.align-left .title,.align-center .title{font-size:3rem}.align-left .description,.align-center .description{width:85%;font-size:1.8rem}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'section-title', template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider}\">\r\n    <div class=\"title-container\">\r\n        <div class=\"title\" *ngIf=\"sectionTitle.title\">{{sectionTitle.title | titlecase}}</div>\r\n        <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\r\n        </div>\r\n    </div>\r\n    <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\r\n        {{sectionTitle.subtitle}}\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.2rem auto 3.2rem}.align-center .description{margin:auto;width:70%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:bolder;font-size:4.5rem;width:auto;margin:auto;line-height:normal}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-color:#fff}.dark-background .title,.dark-background .description{color:#fff}.without-divider{display:flex;flex-direction:column;row-gap:3rem}.without-divider .title{font-size:5rem}.without-divider .description{font-size:2rem}@media only screen and (max-width: 37.5em){.without-divider .title{font-size:3rem}.without-divider .description{font-size:1.8rem}}.light-background .divider{background-color:#155ed4}.light-background .title,.light-background .description{color:#32353b}.description{width:85%;font-weight:500;font-size:1.6rem}.align-left .title{margin:0}.align-left .divider{margin:.2rem 0 3.2rem;width:auto}.align-left .description{width:85%;margin:0}.align-left .title-container{margin:0}@media only screen and (max-width: 37.5em){.align-left .title,.align-center .title{font-size:3rem}.align-left .description,.align-center .description{width:85%;font-size:1.8rem}}\n"] }]
+        }], propDecorators: { sectionTitle: [{
+                type: Input
             }] } });
-class PageSectionStyleTenComponent {
-    constructor() {
-        this.iconName = "circle";
-        this.panelOpenState = false;
-        this.panelChanged = new EventEmitter();
-    }
-    ngOnInit() { }
-    onClickPanel(index) {
-        this.selectedPanel = index;
-        console.log(this.selectedPanel);
-        this.panelChanged.emit(this.selectedPanel);
-    }
-}
-PageSectionStyleTenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PageSectionStyleTenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleTenComponent, selector: "page-section-style-ten", inputs: { data: "data", iconName: "iconName", selectedPanel: "selectedPanel" }, outputs: { panelChanged: "panelChanged" }, ngImport: i0, template: "<mat-accordion class=\"mat-mdc-form-field\">\n    <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\"\n        *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n        <mat-expansion-panel-header>\n            <div class=\"panel-headline\">\n                <mat-panel-title>\n                    <fa-icon [icon]=\"iconName\">\n                    </fa-icon>\n                    {{item.question}}\n                </mat-panel-title>\n            </div>\n        </mat-expansion-panel-header>\n\n        <div class=\"panel-content\">\n            <ul>\n                <li>\n                    {{item.answer}}\n                </li>\n            </ul>\n        </div>\n    </mat-expansion-panel>\n</mat-accordion>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}mat-card{height:10rem;width:40rem;margin:4.5rem 4.5rem 4.5rem 25rem}.mat-mdc-form-field{display:grid;row-gap:1rem}.main-container{width:100%;height:90vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-self:stretch;margin:2rem auto;z-index:1;max-width:130rem;padding:0 5rem}mat-expansion-panel{background:#FAFAFA}mat-expansion-panel fa-icon{font-size:.7rem;margin-right:1rem}mat-expansion-panel-header{height:100%;min-height:7rem;font-size:1.7rem;font-weight:600}.mat-expansion-panel-header.mat-expanded{height:auto}@media only screen and (max-width: 37.5em){mat-expansion-panel{margin:0rem 1rem}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'page-section-style-ten', template: "<mat-accordion class=\"mat-mdc-form-field\">\n    <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\"\n        *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n        <mat-expansion-panel-header>\n            <div class=\"panel-headline\">\n                <mat-panel-title>\n                    <fa-icon [icon]=\"iconName\">\n                    </fa-icon>\n                    {{item.question}}\n                </mat-panel-title>\n            </div>\n        </mat-expansion-panel-header>\n\n        <div class=\"panel-content\">\n            <ul>\n                <li>\n                    {{item.answer}}\n                </li>\n            </ul>\n        </div>\n    </mat-expansion-panel>\n</mat-accordion>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}mat-card{height:10rem;width:40rem;margin:4.5rem 4.5rem 4.5rem 25rem}.mat-mdc-form-field{display:grid;row-gap:1rem}.main-container{width:100%;height:90vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-self:stretch;margin:2rem auto;z-index:1;max-width:130rem;padding:0 5rem}mat-expansion-panel{background:#FAFAFA}mat-expansion-panel fa-icon{font-size:.7rem;margin-right:1rem}mat-expansion-panel-header{height:100%;min-height:7rem;font-size:1.7rem;font-weight:600}.mat-expansion-panel-header.mat-expanded{height:auto}@media only screen and (max-width: 37.5em){mat-expansion-panel{margin:0rem 1rem}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
-                type: Input
-            }], iconName: [{
-                type: Input
-            }], selectedPanel: [{
-                type: Input
-            }], panelChanged: [{
-                type: Output
+class PageSectionStyleTenComponent {
+    constructor() {
+        this.iconName = "circle";
+        this.panelOpenState = false;
+        this.panelChanged = new EventEmitter();
+    }
+    ngOnInit() { }
+    onClickPanel(index) {
+        this.selectedPanel = index;
+        console.log(this.selectedPanel);
+        this.panelChanged.emit(this.selectedPanel);
+    }
+}
+PageSectionStyleTenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PageSectionStyleTenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleTenComponent, selector: "page-section-style-ten", inputs: { data: "data", iconName: "iconName", selectedPanel: "selectedPanel" }, outputs: { panelChanged: "panelChanged" }, ngImport: i0, template: "<mat-accordion class=\"mat-mdc-form-field\">\r\n    <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\"\r\n        *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\r\n        <mat-expansion-panel-header>\r\n            <div class=\"panel-headline\">\r\n                <mat-panel-title>\r\n                    <fa-icon [icon]=\"iconName\">\r\n                    </fa-icon>\r\n                    {{item.question}}\r\n                </mat-panel-title>\r\n            </div>\r\n        </mat-expansion-panel-header>\r\n\r\n        <div class=\"panel-content\">\r\n            <ul>\r\n                <li>\r\n                    {{item.answer}}\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </mat-expansion-panel>\r\n</mat-accordion>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}mat-card{height:10rem;width:40rem;margin:4.5rem 4.5rem 4.5rem 25rem}.mat-mdc-form-field{display:grid;row-gap:1rem}.main-container{width:100%;height:90vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-self:stretch;margin:2rem auto;z-index:1;max-width:130rem;padding:0 5rem}mat-expansion-panel{background:#FAFAFA}mat-expansion-panel fa-icon{font-size:.7rem;margin-right:1rem}mat-expansion-panel-header{height:100%;min-height:7rem;font-size:1.7rem;font-weight:600}.mat-expansion-panel-header.mat-expanded{height:auto}@media only screen and (max-width: 37.5em){mat-expansion-panel{margin:0rem 1rem}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'page-section-style-ten', template: "<mat-accordion class=\"mat-mdc-form-field\">\r\n    <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\"\r\n        *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\r\n        <mat-expansion-panel-header>\r\n            <div class=\"panel-headline\">\r\n                <mat-panel-title>\r\n                    <fa-icon [icon]=\"iconName\">\r\n                    </fa-icon>\r\n                    {{item.question}}\r\n                </mat-panel-title>\r\n            </div>\r\n        </mat-expansion-panel-header>\r\n\r\n        <div class=\"panel-content\">\r\n            <ul>\r\n                <li>\r\n                    {{item.answer}}\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </mat-expansion-panel>\r\n</mat-accordion>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}mat-card{height:10rem;width:40rem;margin:4.5rem 4.5rem 4.5rem 25rem}.mat-mdc-form-field{display:grid;row-gap:1rem}.main-container{width:100%;height:90vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-self:stretch;margin:2rem auto;z-index:1;max-width:130rem;padding:0 5rem}mat-expansion-panel{background:#FAFAFA}mat-expansion-panel fa-icon{font-size:.7rem;margin-right:1rem}mat-expansion-panel-header{height:100%;min-height:7rem;font-size:1.7rem;font-weight:600}.mat-expansion-panel-header.mat-expanded{height:auto}@media only screen and (max-width: 37.5em){mat-expansion-panel{margin:0rem 1rem}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], selectedPanel: [{
+                type: Input
+            }], panelChanged: [{
+                type: Output
             }] } });
-class GetStartedCTAComponent {
-    constructor(_Router) {
-        this._Router = _Router;
-    }
-    ngOnInit() { }
-    onClickLink(route) {
-        this._Router.navigate([route]);
-    }
-}
-GetStartedCTAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GetStartedCTAComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-GetStartedCTAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GetStartedCTAComponent, selector: "get-started-cta", inputs: { ctaCardData: "ctaCardData" }, ngImport: i0, template: "<div class=\"all\">\n    <div class=\"get-started\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-1\" viewBox=\"0 0 228 234\" fill=\"none\">\n            <path\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\"\n                fill=\"#155ED4\" />\n        </svg>\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-2\" viewBox=\"0 0 177 117\" fill=\"none\">\n            <path\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\" />\n        </svg>\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 313 229\" fill=\"none\" class=\"svg-3\">\n            <path\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\" />\n        </svg>\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-4\" viewBox=\"0 0 130 187\" fill=\"none\">\n            <path\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\" />\n        </svg>\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-5\" viewBox=\"0 0 173 131\" fill=\"none\">\n            <path\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\" />\n        </svg>\n\n\n        <div class=\"content\">\n            <h1>{{ctaCardData.title}}</h1>\n            <div class=\"description\">\n                {{ctaCardData.description}}\n            </div>\n            <img [src]=\"ctaCardData.logo.path\" alt=\"\" (click)=\"onClickLink(ctaCardData.logo.route)\" class=\"logo-img\">\n            <div class=\"create-account\">\n                <input type=\"email\" class=\"email-input\" placeholder=\"Email Address\">\n                <button mat-raised-button class=\"sign-up-btn\"\n                    (click)=\"onClickLink(ctaCardData.callToActionButton.route)\">{{ctaCardData.callToActionButton.ctaText}}</button>\n            </div>\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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;height:3.4rem;width:50%;margin:auto;column-gap:2%}.get-started .sign-up-btn{background-color:#155ed4;color:#fff;height:100%;width:40%;max-width:70%;font-family:inherit}.get-started .email-input{width:60%;height:100%;max-width:80%}@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}.get-started .sign-up-btn{height:4rem;width:20rem}.get-started .email-input{width:29rem;height:3.5rem}}@media only screen and (max-width: 37.5em){.get-started .svg-3{display:none}}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GetStartedCTAComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'get-started-cta', template: "<div class=\"all\">\n    <div class=\"get-started\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-1\" viewBox=\"0 0 228 234\" fill=\"none\">\n            <path\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\"\n                fill=\"#155ED4\" />\n        </svg>\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-2\" viewBox=\"0 0 177 117\" fill=\"none\">\n            <path\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\" />\n        </svg>\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 313 229\" fill=\"none\" class=\"svg-3\">\n            <path\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\" />\n        </svg>\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-4\" viewBox=\"0 0 130 187\" fill=\"none\">\n            <path\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\" />\n        </svg>\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-5\" viewBox=\"0 0 173 131\" fill=\"none\">\n            <path\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\" />\n        </svg>\n\n\n        <div class=\"content\">\n            <h1>{{ctaCardData.title}}</h1>\n            <div class=\"description\">\n                {{ctaCardData.description}}\n            </div>\n            <img [src]=\"ctaCardData.logo.path\" alt=\"\" (click)=\"onClickLink(ctaCardData.logo.route)\" class=\"logo-img\">\n            <div class=\"create-account\">\n                <input type=\"email\" class=\"email-input\" placeholder=\"Email Address\">\n                <button mat-raised-button class=\"sign-up-btn\"\n                    (click)=\"onClickLink(ctaCardData.callToActionButton.route)\">{{ctaCardData.callToActionButton.ctaText}}</button>\n            </div>\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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;height:3.4rem;width:50%;margin:auto;column-gap:2%}.get-started .sign-up-btn{background-color:#155ed4;color:#fff;height:100%;width:40%;max-width:70%;font-family:inherit}.get-started .email-input{width:60%;height:100%;max-width:80%}@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}.get-started .sign-up-btn{height:4rem;width:20rem}.get-started .email-input{width:29rem;height:3.5rem}}@media only screen and (max-width: 37.5em){.get-started .svg-3{display:none}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { ctaCardData: [{
-                type: Input
+class GetStartedCTAComponent {
+    constructor(_Router) {
+        this._Router = _Router;
+    }
+    ngOnInit() { }
+    onClickLink(route) {
+        this._Router.navigate([route]);
+    }
+}
+GetStartedCTAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GetStartedCTAComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+GetStartedCTAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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-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-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-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-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-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 [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.ctaText}}</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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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;height:3.4rem;width:50%;margin:auto;column-gap:2%}.get-started .sign-up-btn{background-color:#155ed4;color:#fff;height:100%;width:40%;max-width:70%;font-family:inherit}.get-started .email-input{width:60%;height:100%;max-width:80%}@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}.get-started .sign-up-btn{height:4rem;width:20rem}.get-started .email-input{width:29rem;height:3.5rem}}@media only screen and (max-width: 37.5em){.get-started .svg-3{display:none}}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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-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-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-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-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-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 [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.ctaText}}</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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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;height:3.4rem;width:50%;margin:auto;column-gap:2%}.get-started .sign-up-btn{background-color:#155ed4;color:#fff;height:100%;width:40%;max-width:70%;font-family:inherit}.get-started .email-input{width:60%;height:100%;max-width:80%}@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}.get-started .sign-up-btn{height:4rem;width:20rem}.get-started .email-input{width:29rem;height:3.5rem}}@media only screen and (max-width: 37.5em){.get-started .svg-3{display:none}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { ctaCardData: [{
+                type: Input
             }] } });
-class AchievementsComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-AchievementsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AchievementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AchievementsComponent, selector: "achievements", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': sectionContent.sectionTitle.isDarkBg}\">\n    <div class=\"content\">\n        <div>\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n        </div>\n        <div class=\"achievements-cards\">\n            <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\n                <div class=\"number\">\n                    {{achievement.number}}\n                </div>\n                <div class=\"subtitle\">\n                    {{achievement.subtitle}}\n                </div>\n            </div>\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;row-gap:.4rem}@media screen and (max-width: 800px){.achievements .achievements-cards .achievement-card{width:33%}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{width:50%}}.achievements .achievements-cards .achievement-card .number{text-align:center;color:#fff;font-weight:700;font-size:2.8rem;display:grid;align-content:end}.achievements .achievements-cards .achievement-card .subtitle{color:#fff;text-align:center;font-weight:500;font-size:1.8rem}.blue-background{background:linear-gradient(90deg,#155ED4 3.16%,#0F2844 97.43%);padding:2rem 0rem;color:#fff}.blue-background .achievements-cards{width:100%}.blue-background .achievements-cards .achievement-card{background-color:#fff}.blue-background .achievements-cards .achievement-card .number{color:#155ed4}.blue-background .achievements-cards .achievement-card .subtitle{color:#32353b;font-weight:550}@media only screen and (max-width: 75em){.achievements .achievements-cards{width:100%;display:flex;flex-wrap:wrap;justify-content:center;margin:2rem auto}.achievements .achievements-cards .achievement-card{grid-template-rows:auto auto;width:20rem;height:16rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.8rem}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{height:10rem}.achievements .achievements-cards .achievement-card .number{font-size:2rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.4rem}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': sectionContent.sectionTitle.isDarkBg}\">\n    <div class=\"content\">\n        <div>\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n        </div>\n        <div class=\"achievements-cards\">\n            <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\n                <div class=\"number\">\n                    {{achievement.number}}\n                </div>\n                <div class=\"subtitle\">\n                    {{achievement.subtitle}}\n                </div>\n            </div>\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;row-gap:.4rem}@media screen and (max-width: 800px){.achievements .achievements-cards .achievement-card{width:33%}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{width:50%}}.achievements .achievements-cards .achievement-card .number{text-align:center;color:#fff;font-weight:700;font-size:2.8rem;display:grid;align-content:end}.achievements .achievements-cards .achievement-card .subtitle{color:#fff;text-align:center;font-weight:500;font-size:1.8rem}.blue-background{background:linear-gradient(90deg,#155ED4 3.16%,#0F2844 97.43%);padding:2rem 0rem;color:#fff}.blue-background .achievements-cards{width:100%}.blue-background .achievements-cards .achievement-card{background-color:#fff}.blue-background .achievements-cards .achievement-card .number{color:#155ed4}.blue-background .achievements-cards .achievement-card .subtitle{color:#32353b;font-weight:550}@media only screen and (max-width: 75em){.achievements .achievements-cards{width:100%;display:flex;flex-wrap:wrap;justify-content:center;margin:2rem auto}.achievements .achievements-cards .achievement-card{grid-template-rows:auto auto;width:20rem;height:16rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.8rem}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{height:10rem}.achievements .achievements-cards .achievement-card .number{font-size:2rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.4rem}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
-                type: Input
+class AchievementsComponent {
+    constructor() { }
+    ngOnInit() { }
+}
+AchievementsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AchievementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AchievementsComponent, selector: "achievements", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': sectionContent.sectionTitle.isDarkBg}\">\r\n    <div class=\"content\">\r\n        <div>\r\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"achievements-cards\">\r\n            <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\r\n                <div class=\"number\">\r\n                    {{achievement.number}}\r\n                </div>\r\n                <div class=\"subtitle\">\r\n                    {{achievement.subtitle}}\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;row-gap:.4rem}@media screen and (max-width: 800px){.achievements .achievements-cards .achievement-card{width:33%}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{width:50%}}.achievements .achievements-cards .achievement-card .number{text-align:center;color:#fff;font-weight:700;font-size:2.8rem;display:grid;align-content:end}.achievements .achievements-cards .achievement-card .subtitle{color:#fff;text-align:center;font-weight:500;font-size:1.8rem}.blue-background{background:linear-gradient(90deg,#155ED4 3.16%,#0F2844 97.43%);padding:2rem 0rem;color:#fff}.blue-background .achievements-cards{width:100%}.blue-background .achievements-cards .achievement-card{background-color:#fff}.blue-background .achievements-cards .achievement-card .number{color:#155ed4}.blue-background .achievements-cards .achievement-card .subtitle{color:#32353b;font-weight:550}@media only screen and (max-width: 75em){.achievements .achievements-cards{width:100%;display:flex;flex-wrap:wrap;justify-content:center;margin:2rem auto}.achievements .achievements-cards .achievement-card{grid-template-rows:auto auto;width:20rem;height:16rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.8rem}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{height:10rem}.achievements .achievements-cards .achievement-card .number{font-size:2rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.4rem}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': sectionContent.sectionTitle.isDarkBg}\">\r\n    <div class=\"content\">\r\n        <div>\r\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"achievements-cards\">\r\n            <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\r\n                <div class=\"number\">\r\n                    {{achievement.number}}\r\n                </div>\r\n                <div class=\"subtitle\">\r\n                    {{achievement.subtitle}}\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;row-gap:.4rem}@media screen and (max-width: 800px){.achievements .achievements-cards .achievement-card{width:33%}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{width:50%}}.achievements .achievements-cards .achievement-card .number{text-align:center;color:#fff;font-weight:700;font-size:2.8rem;display:grid;align-content:end}.achievements .achievements-cards .achievement-card .subtitle{color:#fff;text-align:center;font-weight:500;font-size:1.8rem}.blue-background{background:linear-gradient(90deg,#155ED4 3.16%,#0F2844 97.43%);padding:2rem 0rem;color:#fff}.blue-background .achievements-cards{width:100%}.blue-background .achievements-cards .achievement-card{background-color:#fff}.blue-background .achievements-cards .achievement-card .number{color:#155ed4}.blue-background .achievements-cards .achievement-card .subtitle{color:#32353b;font-weight:550}@media only screen and (max-width: 75em){.achievements .achievements-cards{width:100%;display:flex;flex-wrap:wrap;justify-content:center;margin:2rem auto}.achievements .achievements-cards .achievement-card{grid-template-rows:auto auto;width:20rem;height:16rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.8rem}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{height:10rem}.achievements .achievements-cards .achievement-card .number{font-size:2rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.4rem}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
+                type: Input
             }] } });
-var LibraryProductTypeChoice;
-(function (LibraryProductTypeChoice) {
-    LibraryProductTypeChoice[LibraryProductTypeChoice["JEWELRY"] = 0] = "JEWELRY";
-    LibraryProductTypeChoice[LibraryProductTypeChoice["MOUNTING"] = 1] = "MOUNTING";
-    LibraryProductTypeChoice[LibraryProductTypeChoice["LIBRARY_MODEL"] = 2] = "LIBRARY_MODEL";
+var LibraryProductTypeChoice;
+(function (LibraryProductTypeChoice) {
+    LibraryProductTypeChoice[LibraryProductTypeChoice["JEWELRY"] = 0] = "JEWELRY";
+    LibraryProductTypeChoice[LibraryProductTypeChoice["MOUNTING"] = 1] = "MOUNTING";
+    LibraryProductTypeChoice[LibraryProductTypeChoice["LIBRARY_MODEL"] = 2] = "LIBRARY_MODEL";
 })(LibraryProductTypeChoice || (LibraryProductTypeChoice = {}));
-class PricingPlansComponent {
-    constructor(_router) {
-        this._router = _router;
-    }
-    ngOnInit() {
-    }
-    showFeatures() {
-        this.featuresButtonClicked = true;
-    }
-    onClickCtaButton() {
-        this._router.navigate(['/custom/custom-order-client-form/', 0], { state: { productType: LibraryProductTypeChoice.LIBRARY_MODEL } });
-    }
-}
-PricingPlansComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-PricingPlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlan: "servicePlan" }, ngImport: i0, template: "<div class=\"plan-content\">\n    <div class=\"title-price-desc\">\n        <h1 class=\"plan-title\">\n            {{servicePlan.name}}\n        </h1>\n        <div class=\"price\" *ngIf=\"servicePlan.price\">\n            <span class=\"service-price\">$ {{servicePlan.price}}</span>\n            <span>/{{servicePlan.frequency}}</span>\n        </div>\n        <div class=\"description\">\n            {{servicePlan.description}}\n        </div>\n        <div class=\"divider\"></div>\n    </div>\n    <div class=\"perks\">\n        <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\n            <span class=\"check-icon\">\n                <fa-icon icon=\"check\"></fa-icon>\n            </span>\n            <div class=\"service-description\">\n                <div class=\"service-perk\">\n                    {{perk.perk}}\n                </div>\n                <span class=\"exclamation-mark\">\n                    <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\" icon=\"circle-exclamation\"></fa-icon>\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"registration-button\">\n        <button mat-raised-button (click)=\"onClickCtaButton()\" class=\"button\">\n            Choose Plan\n        </button>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.plan-content{display:flex;flex-direction:column;width:20%;background:#FFFFFF;border-radius:1rem;padding:3rem 2rem;min-width:33rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%;margin:auto}@media only screen and (max-width: 552px){.plan-content{min-width:60%}}@media only screen and (max-width: 75em){.plan-content{width:33rem}}@media only screen and (max-width: 620px){.plan-content{width:90%;height:99%}}.plan-content .title-price-desc{height:22rem}.plan-content .title-price-desc .divider{width:90%;border:.1rem solid #155ED4;margin:1rem auto}.plan-content .plan-title{grid-row:1;color:#155ed4;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem;text-align:center}.plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem;text-align:center;height:8rem}.plan-content .perks{display:flex;row-gap:.5rem;height:100%;align-items:flex-start;flex-direction:column}.plan-content .perks .perk{display:flex;align-items:center;width:100%}.plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#36393fe8;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer;color:#32353b}.plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.plan-content .registration-button{display:flex;padding:1rem 0rem;height:100%}.plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;background-color:#155ed4;color:#fff;width:100%}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pricing-plans', template: "<div class=\"plan-content\">\n    <div class=\"title-price-desc\">\n        <h1 class=\"plan-title\">\n            {{servicePlan.name}}\n        </h1>\n        <div class=\"price\" *ngIf=\"servicePlan.price\">\n            <span class=\"service-price\">$ {{servicePlan.price}}</span>\n            <span>/{{servicePlan.frequency}}</span>\n        </div>\n        <div class=\"description\">\n            {{servicePlan.description}}\n        </div>\n        <div class=\"divider\"></div>\n    </div>\n    <div class=\"perks\">\n        <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\n            <span class=\"check-icon\">\n                <fa-icon icon=\"check\"></fa-icon>\n            </span>\n            <div class=\"service-description\">\n                <div class=\"service-perk\">\n                    {{perk.perk}}\n                </div>\n                <span class=\"exclamation-mark\">\n                    <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\" icon=\"circle-exclamation\"></fa-icon>\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"registration-button\">\n        <button mat-raised-button (click)=\"onClickCtaButton()\" class=\"button\">\n            Choose Plan\n        </button>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.plan-content{display:flex;flex-direction:column;width:20%;background:#FFFFFF;border-radius:1rem;padding:3rem 2rem;min-width:33rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%;margin:auto}@media only screen and (max-width: 552px){.plan-content{min-width:60%}}@media only screen and (max-width: 75em){.plan-content{width:33rem}}@media only screen and (max-width: 620px){.plan-content{width:90%;height:99%}}.plan-content .title-price-desc{height:22rem}.plan-content .title-price-desc .divider{width:90%;border:.1rem solid #155ED4;margin:1rem auto}.plan-content .plan-title{grid-row:1;color:#155ed4;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem;text-align:center}.plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem;text-align:center;height:8rem}.plan-content .perks{display:flex;row-gap:.5rem;height:100%;align-items:flex-start;flex-direction:column}.plan-content .perks .perk{display:flex;align-items:center;width:100%}.plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#36393fe8;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer;color:#32353b}.plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.plan-content .registration-button{display:flex;padding:1rem 0rem;height:100%}.plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;background-color:#155ed4;color:#fff;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { servicePlan: [{
-                type: Input
+class PricingPlansComponent {
+    constructor(_router) {
+        this._router = _router;
+    }
+    ngOnInit() {
+    }
+    showFeatures() {
+        this.featuresButtonClicked = true;
+    }
+    onClickCtaButton() {
+        this._router.navigate(['/custom/custom-order-client-form/', 0], { state: { productType: LibraryProductTypeChoice.LIBRARY_MODEL } });
+    }
+}
+PricingPlansComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+PricingPlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlan: "servicePlan" }, ngImport: i0, template: "<div class=\"plan-content\">\r\n    <div class=\"title-price-desc\">\r\n        <h1 class=\"plan-title\">\r\n            {{servicePlan.name}}\r\n        </h1>\r\n        <div class=\"price\" *ngIf=\"servicePlan.price\">\r\n            <span class=\"service-price\">$ {{servicePlan.price}}</span>\r\n            <span>/{{servicePlan.frequency}}</span>\r\n        </div>\r\n        <div class=\"description\">\r\n            {{servicePlan.description}}\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n    </div>\r\n    <div class=\"perks\">\r\n        <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\r\n            <span class=\"check-icon\">\r\n                <fa-icon icon=\"check\"></fa-icon>\r\n            </span>\r\n            <div class=\"service-description\">\r\n                <div class=\"service-perk\">\r\n                    {{perk.perk}}\r\n                </div>\r\n                <span class=\"exclamation-mark\">\r\n                    <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\" icon=\"circle-exclamation\"></fa-icon>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"registration-button\">\r\n        <button mat-raised-button (click)=\"onClickCtaButton()\" class=\"button\">\r\n            Choose Plan\r\n        </button>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.plan-content{display:flex;flex-direction:column;width:20%;background:#FFFFFF;border-radius:1rem;padding:3rem 2rem;min-width:33rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%;margin:auto}@media only screen and (max-width: 552px){.plan-content{min-width:60%}}@media only screen and (max-width: 75em){.plan-content{width:33rem}}@media only screen and (max-width: 620px){.plan-content{width:90%;height:99%}}.plan-content .title-price-desc{height:22rem}.plan-content .title-price-desc .divider{width:90%;border:.1rem solid #155ED4;margin:1rem auto}.plan-content .plan-title{grid-row:1;color:#155ed4;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem;text-align:center}.plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem;text-align:center;height:8rem}.plan-content .perks{display:flex;row-gap:.5rem;height:100%;align-items:flex-start;flex-direction:column}.plan-content .perks .perk{display:flex;align-items:center;width:100%}.plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#36393fe8;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer;color:#32353b}.plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.plan-content .registration-button{display:flex;padding:1rem 0rem;height:100%}.plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;background-color:#155ed4;color:#fff;width:100%}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pricing-plans', template: "<div class=\"plan-content\">\r\n    <div class=\"title-price-desc\">\r\n        <h1 class=\"plan-title\">\r\n            {{servicePlan.name}}\r\n        </h1>\r\n        <div class=\"price\" *ngIf=\"servicePlan.price\">\r\n            <span class=\"service-price\">$ {{servicePlan.price}}</span>\r\n            <span>/{{servicePlan.frequency}}</span>\r\n        </div>\r\n        <div class=\"description\">\r\n            {{servicePlan.description}}\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n    </div>\r\n    <div class=\"perks\">\r\n        <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\r\n            <span class=\"check-icon\">\r\n                <fa-icon icon=\"check\"></fa-icon>\r\n            </span>\r\n            <div class=\"service-description\">\r\n                <div class=\"service-perk\">\r\n                    {{perk.perk}}\r\n                </div>\r\n                <span class=\"exclamation-mark\">\r\n                    <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\" icon=\"circle-exclamation\"></fa-icon>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"registration-button\">\r\n        <button mat-raised-button (click)=\"onClickCtaButton()\" class=\"button\">\r\n            Choose Plan\r\n        </button>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.plan-content{display:flex;flex-direction:column;width:20%;background:#FFFFFF;border-radius:1rem;padding:3rem 2rem;min-width:33rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%;margin:auto}@media only screen and (max-width: 552px){.plan-content{min-width:60%}}@media only screen and (max-width: 75em){.plan-content{width:33rem}}@media only screen and (max-width: 620px){.plan-content{width:90%;height:99%}}.plan-content .title-price-desc{height:22rem}.plan-content .title-price-desc .divider{width:90%;border:.1rem solid #155ED4;margin:1rem auto}.plan-content .plan-title{grid-row:1;color:#155ed4;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem;text-align:center}.plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem;text-align:center;height:8rem}.plan-content .perks{display:flex;row-gap:.5rem;height:100%;align-items:flex-start;flex-direction:column}.plan-content .perks .perk{display:flex;align-items:center;width:100%}.plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#36393fe8;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer;color:#32353b}.plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.plan-content .registration-button{display:flex;padding:1rem 0rem;height:100%}.plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;background-color:#155ed4;color:#fff;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { servicePlan: [{
+                type: Input
             }] } });
-class ImageGalleryModal {
-    constructor(breakpointObserver) {
-        this.breakpointObserver = breakpointObserver;
-        this.galleryData = [];
-        this.showCount = false;
-        this.previewImage = false;
-        this.showMask = false;
-        this.currentImageGalleryModal = this.galleryData[0];
-        this.currentIndex = 0;
-        this.controls = true;
-        this.totalImageCount = 0;
-    }
-    ngOnInit() {
-        this.breakpointObserver.observe("(max-width: 900px)").subscribe((result) => {
-            if (result.matches) {
-                this.onClosePreview();
-            }
-        });
-        this.totalImageCount = this.galleryData.length;
-        this.responsiveOptions = [
-            {
-                breakpoint: '900px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '600px',
-                numVisible: 4
-            },
-            {
-                breakpoint: '540px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '400px',
-                numVisible: 2
-            },
-            {
-                breakpoint: '300px',
-                numVisible: 1
-            }
-        ];
-    }
-    onKeydownHandler(event) {
-        this.onClosePreview();
-    }
-    onPreviewImage(index) {
-        document.body.style.overflowY = 'hidden';
-        this.showMask = true;
-        this.previewImage = true;
-        this.currentIndex = index;
-        this.currentImageGalleryModal = this.galleryData[index];
-    }
-    onAnimationEnd(event) {
-        if (event.toState === 'void') {
-            this.showMask = false;
-        }
-    }
-    onClosePreview() {
-        document.body.style.overflowY = 'visible';
-        this.previewImage = false;
-    }
-    onclickPrev() {
-        this.currentIndex++;
-        if (this.currentIndex > this.galleryData.length - 1) {
-            this.currentIndex = 0;
-        }
-        this.currentImageGalleryModal = this.galleryData[this.currentIndex];
-    }
-    onclickNext() {
-        this.currentIndex--;
-        if (this.currentIndex < 0) {
-            this.currentIndex = this.galleryData.length - 1;
-        }
-        this.currentImageGalleryModal = this.galleryData[this.currentIndex];
-    }
-}
-ImageGalleryModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageGalleryModal, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-ImageGalleryModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ImageGalleryModal, selector: "image-gallery-modal", inputs: { galleryData: "galleryData", showCount: "showCount" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"section\">\n\n    <div class=\"gallery-image-gallery-modal-container\">\n        <div class=\"gallery\">\n            <div *ngFor=\"let image of galleryData; let i = index\" class=\"gallery-image\">\n                <img (click)=\"onPreviewImage(i)\" [src]=\"image.file\" [alt]=\"image.name\">\n                <div class=\"image-cta\" (click)=\"onPreviewImage(i)\">\n                    Click to preview <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"showMask\" [ngClass]=\"{'hide-overflow' : showMask}\" class=\"image-gallery-modal\" @animation2>\n            <div *ngIf=\"showCount\" class=\"count\">\n                {{currentIndex + 1}}/{{totalImageCount}}\n            </div>\n            <button (click)=\"onClosePreview()\" *ngIf=\"previewImage\" class=\"close-btn\">\n                <fa-icon icon=\"times\"></fa-icon>\n            </button>\n            <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-prev\" (click)=\"onclickPrev()\">\n                <fa-icon icon=\"arrow-circle-left\" class=\"icon-image-gallery-modal-carousel icon-prev\"></fa-icon>\n            </button>\n            <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-next\" (click)=\"onclickNext()\">\n                <fa-icon icon=\"arrow-circle-right\" class=\"icon-image-gallery-modal-carousel icon-next\"></fa-icon>\n            </button>\n            <div *ngIf=\"previewImage\" [@animation]=\"{value : 'visible'}\" (@animation.done)=\"onAnimationEnd($event)\" class=\"image-gallery-modal-img\">\n                <img [src]=\"currentImageGalleryModal.file\" [alt]=\"currentImageGalleryModal.name\">\n            </div>\n        </div>\n    </div>\n    <div>\n        <p-galleria [value]=\"galleryData\" class=\"gallery-custom\" [responsiveOptions]=\"responsiveOptions\" [containerStyle]=\"{ 'max-width': '900px' }\">\n            <ng-template pTemplate=\"item\" let-item>\n                <div class=\"img\">\n                    <img class=\"big-img\" [src]=\"item.file\" />\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"thumbnail\" let-item>\n                <div class=\"grid grid-nogutter justify-content-center\">\n                    <img [src]=\"item.file\" class=\"small-img\" />\n                </div>\n            </ng-template>\n        </p-galleria>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:100%}.gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;margin:auto;width:90%}@media only screen and (min-width: 1500px){.gallery-image-gallery-modal-container{max-width:150rem}}.gallery-image-gallery-modal-container .gallery{line-height:0;column-count:4;column-gap:.8rem}.gallery-image-gallery-modal-container .gallery .gallery-image{overflow:hidden;transition:all .3s;position:relative;margin-bottom:1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover{box-shadow:#00000026 0 1.5rem 2.5rem,#0000000d 0 .5rem 1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover img{filter:brightness(.5)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta{opacity:1}.gallery-image-gallery-modal-container .gallery .gallery-image img{width:100%;height:auto;cursor:zoom-in;border-radius:.35rem}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta{opacity:0;position:absolute;width:100%;top:50%;text-align:center;color:#fff;font-size:2rem;cursor:zoom-in;transition:opacity .3s}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta fa-icon{font-size:2rem;margin-left:1rem;color:#fff}.gallery-image-gallery-modal-container .hide-overflow{overflow:hidden}.gallery-image-gallery-modal-container .image-gallery-modal{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;background-color:#000000d9;z-index:101;height:100%;overflow-y:auto}.gallery-image-gallery-modal-container .image-gallery-modal .count{position:absolute;top:0;left:0;width:7%;height:10%;color:#fff;opacity:.7;font-size:1.8rem;display:flex;justify-content:center;align-items:center;margin-left:.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn{position:absolute;top:0;right:0;padding:0;color:#fff;background:0 0;border:0;cursor:pointer;width:7%;height:10%;z-index:10}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn fa-icon{font-size:2.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{display:flex;justify-content:center;align-items:center;position:absolute;z-index:1;width:8%;height:8%;padding:0;color:#fff;text-align:center;background:0 0;border:0;cursor:pointer}.gallery-image-gallery-modal-container .image-gallery-modal .btn-prev{left:0}.gallery-image-gallery-modal-container .image-gallery-modal .btn-next{right:0}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel{color:#fff;opacity:.5;transition:all .15s ease}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel:hover{opacity:.9}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel:active{opacity:.5}.gallery-image-gallery-modal-container .image-gallery-modal .icon-prev,.gallery-image-gallery-modal-container .image-gallery-modal .icon-next{font-size:3rem}.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img img{width:100%;max-height:90vh;border-radius:1rem}@media only screen and (max-width: 75em){.gallery-image-gallery-modal-container .gallery-image-gallery-modal-container{display:none}.gallery-image-gallery-modal-container .gallery{column-count:3;width:100%}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-image-gallery-modal-container .gallery{column-count:2}.gallery-image-gallery-modal-container .gallery-img img{max-width:100%}}@media only screen and (max-width: 37.5em){.gallery-image-gallery-modal-container .gallery{column-count:1}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-custom{display:block;margin:auto;width:90%}.gallery-custom .img{width:90%}.gallery-custom .big-img{width:100%;height:50rem;object-fit:cover;border-radius:1.5rem;box-shadow:2rem 1rem 1.5rem -.5rem #e0e0e075;margin-bottom:2rem}.gallery-custom .small-img{object-fit:cover;border-radius:.7rem;box-shadow:1rem .4rem .5rem -.5rem #e0e0e075;width:100%;max-width:8rem;height:12rem}.gallery-image-gallery-modal-container{display:none}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.Galleria, selector: "p-galleria", inputs: ["activeIndex", "fullScreen", "id", "value", "numVisible", "responsiveOptions", "showItemNavigators", "showThumbnailNavigators", "showItemNavigatorsOnHover", "changeItemOnIndicatorHover", "circular", "autoPlay", "transitionInterval", "showThumbnails", "thumbnailsPosition", "verticalThumbnailViewPortHeight", "showIndicators", "showIndicatorsOnItem", "indicatorsPosition", "baseZIndex", "maskClass", "containerClass", "containerStyle", "showTransitionOptions", "hideTransitionOptions", "visible"], outputs: ["activeIndexChange", "visibleChange"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], animations: [
-        trigger('animation', [
-            transition('void => visible', [
-                style({ transform: 'scale(0.5)' }),
-                animate('150ms', style({ transform: 'scale(1)' }))
-            ]),
-            transition('visible => void', [
-                style({ transform: 'scale(1)' }),
-                animate('150ms', style({ transform: 'scale(0.5)' }))
-            ]),
-        ]),
-        trigger('animation2', [
-            transition(':leave', [
-                style({ opacity: 1 }),
-                animate('50ms', style({ opacity: 0.8 }))
-            ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageGalleryModal, decorators: [{
-            type: Component,
-            args: [{ selector: 'image-gallery-modal', animations: [
-                        trigger('animation', [
-                            transition('void => visible', [
-                                style({ transform: 'scale(0.5)' }),
-                                animate('150ms', style({ transform: 'scale(1)' }))
-                            ]),
-                            transition('visible => void', [
-                                style({ transform: 'scale(1)' }),
-                                animate('150ms', style({ transform: 'scale(0.5)' }))
-                            ]),
-                        ]),
-                        trigger('animation2', [
-                            transition(':leave', [
-                                style({ opacity: 1 }),
-                                animate('50ms', style({ opacity: 0.8 }))
-                            ])
-                        ])
-                    ], template: "<div class=\"section\">\n\n    <div class=\"gallery-image-gallery-modal-container\">\n        <div class=\"gallery\">\n            <div *ngFor=\"let image of galleryData; let i = index\" class=\"gallery-image\">\n                <img (click)=\"onPreviewImage(i)\" [src]=\"image.file\" [alt]=\"image.name\">\n                <div class=\"image-cta\" (click)=\"onPreviewImage(i)\">\n                    Click to preview <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"showMask\" [ngClass]=\"{'hide-overflow' : showMask}\" class=\"image-gallery-modal\" @animation2>\n            <div *ngIf=\"showCount\" class=\"count\">\n                {{currentIndex + 1}}/{{totalImageCount}}\n            </div>\n            <button (click)=\"onClosePreview()\" *ngIf=\"previewImage\" class=\"close-btn\">\n                <fa-icon icon=\"times\"></fa-icon>\n            </button>\n            <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-prev\" (click)=\"onclickPrev()\">\n                <fa-icon icon=\"arrow-circle-left\" class=\"icon-image-gallery-modal-carousel icon-prev\"></fa-icon>\n            </button>\n            <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-next\" (click)=\"onclickNext()\">\n                <fa-icon icon=\"arrow-circle-right\" class=\"icon-image-gallery-modal-carousel icon-next\"></fa-icon>\n            </button>\n            <div *ngIf=\"previewImage\" [@animation]=\"{value : 'visible'}\" (@animation.done)=\"onAnimationEnd($event)\" class=\"image-gallery-modal-img\">\n                <img [src]=\"currentImageGalleryModal.file\" [alt]=\"currentImageGalleryModal.name\">\n            </div>\n        </div>\n    </div>\n    <div>\n        <p-galleria [value]=\"galleryData\" class=\"gallery-custom\" [responsiveOptions]=\"responsiveOptions\" [containerStyle]=\"{ 'max-width': '900px' }\">\n            <ng-template pTemplate=\"item\" let-item>\n                <div class=\"img\">\n                    <img class=\"big-img\" [src]=\"item.file\" />\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"thumbnail\" let-item>\n                <div class=\"grid grid-nogutter justify-content-center\">\n                    <img [src]=\"item.file\" class=\"small-img\" />\n                </div>\n            </ng-template>\n        </p-galleria>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:100%}.gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;margin:auto;width:90%}@media only screen and (min-width: 1500px){.gallery-image-gallery-modal-container{max-width:150rem}}.gallery-image-gallery-modal-container .gallery{line-height:0;column-count:4;column-gap:.8rem}.gallery-image-gallery-modal-container .gallery .gallery-image{overflow:hidden;transition:all .3s;position:relative;margin-bottom:1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover{box-shadow:#00000026 0 1.5rem 2.5rem,#0000000d 0 .5rem 1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover img{filter:brightness(.5)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta{opacity:1}.gallery-image-gallery-modal-container .gallery .gallery-image img{width:100%;height:auto;cursor:zoom-in;border-radius:.35rem}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta{opacity:0;position:absolute;width:100%;top:50%;text-align:center;color:#fff;font-size:2rem;cursor:zoom-in;transition:opacity .3s}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta fa-icon{font-size:2rem;margin-left:1rem;color:#fff}.gallery-image-gallery-modal-container .hide-overflow{overflow:hidden}.gallery-image-gallery-modal-container .image-gallery-modal{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;background-color:#000000d9;z-index:101;height:100%;overflow-y:auto}.gallery-image-gallery-modal-container .image-gallery-modal .count{position:absolute;top:0;left:0;width:7%;height:10%;color:#fff;opacity:.7;font-size:1.8rem;display:flex;justify-content:center;align-items:center;margin-left:.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn{position:absolute;top:0;right:0;padding:0;color:#fff;background:0 0;border:0;cursor:pointer;width:7%;height:10%;z-index:10}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn fa-icon{font-size:2.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{display:flex;justify-content:center;align-items:center;position:absolute;z-index:1;width:8%;height:8%;padding:0;color:#fff;text-align:center;background:0 0;border:0;cursor:pointer}.gallery-image-gallery-modal-container .image-gallery-modal .btn-prev{left:0}.gallery-image-gallery-modal-container .image-gallery-modal .btn-next{right:0}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel{color:#fff;opacity:.5;transition:all .15s ease}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel:hover{opacity:.9}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel:active{opacity:.5}.gallery-image-gallery-modal-container .image-gallery-modal .icon-prev,.gallery-image-gallery-modal-container .image-gallery-modal .icon-next{font-size:3rem}.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img img{width:100%;max-height:90vh;border-radius:1rem}@media only screen and (max-width: 75em){.gallery-image-gallery-modal-container .gallery-image-gallery-modal-container{display:none}.gallery-image-gallery-modal-container .gallery{column-count:3;width:100%}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-image-gallery-modal-container .gallery{column-count:2}.gallery-image-gallery-modal-container .gallery-img img{max-width:100%}}@media only screen and (max-width: 37.5em){.gallery-image-gallery-modal-container .gallery{column-count:1}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-custom{display:block;margin:auto;width:90%}.gallery-custom .img{width:90%}.gallery-custom .big-img{width:100%;height:50rem;object-fit:cover;border-radius:1.5rem;box-shadow:2rem 1rem 1.5rem -.5rem #e0e0e075;margin-bottom:2rem}.gallery-custom .small-img{object-fit:cover;border-radius:.7rem;box-shadow:1rem .4rem .5rem -.5rem #e0e0e075;width:100%;max-width:8rem;height:12rem}.gallery-image-gallery-modal-container{display:none}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { galleryData: [{
-                type: Input
-            }], showCount: [{
-                type: Input
-            }], onKeydownHandler: [{
-                type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
+class ImageGalleryModal {
+    constructor(breakpointObserver) {
+        this.breakpointObserver = breakpointObserver;
+        this.galleryData = [];
+        this.showCount = false;
+        this.previewImage = false;
+        this.showMask = false;
+        this.currentImageGalleryModal = this.galleryData[0];
+        this.currentIndex = 0;
+        this.controls = true;
+        this.totalImageCount = 0;
+    }
+    ngOnInit() {
+        this.breakpointObserver.observe("(max-width: 900px)").subscribe((result) => {
+            if (result.matches) {
+                this.onClosePreview();
+            }
+        });
+        this.totalImageCount = this.galleryData.length;
+        this.responsiveOptions = [
+            {
+                breakpoint: '900px',
+                numVisible: 5
+            },
+            {
+                breakpoint: '600px',
+                numVisible: 4
+            },
+            {
+                breakpoint: '540px',
+                numVisible: 3
+            },
+            {
+                breakpoint: '400px',
+                numVisible: 2
+            },
+            {
+                breakpoint: '300px',
+                numVisible: 1
+            }
+        ];
+    }
+    onKeydownHandler(event) {
+        this.onClosePreview();
+    }
+    onPreviewImage(index) {
+        document.body.style.overflowY = 'hidden';
+        this.showMask = true;
+        this.previewImage = true;
+        this.currentIndex = index;
+        this.currentImageGalleryModal = this.galleryData[index];
+    }
+    onAnimationEnd(event) {
+        if (event.toState === 'void') {
+            this.showMask = false;
+        }
+    }
+    onClosePreview() {
+        document.body.style.overflowY = 'visible';
+        this.previewImage = false;
+    }
+    onclickPrev() {
+        this.currentIndex++;
+        if (this.currentIndex > this.galleryData.length - 1) {
+            this.currentIndex = 0;
+        }
+        this.currentImageGalleryModal = this.galleryData[this.currentIndex];
+    }
+    onclickNext() {
+        this.currentIndex--;
+        if (this.currentIndex < 0) {
+            this.currentIndex = this.galleryData.length - 1;
+        }
+        this.currentImageGalleryModal = this.galleryData[this.currentIndex];
+    }
+}
+ImageGalleryModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageGalleryModal, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+ImageGalleryModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ImageGalleryModal, selector: "image-gallery-modal", inputs: { galleryData: "galleryData", showCount: "showCount" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"section\">\r\n\r\n    <div class=\"gallery-image-gallery-modal-container\">\r\n        <div class=\"gallery\">\r\n            <div *ngFor=\"let image of galleryData; let i = index\" class=\"gallery-image\">\r\n                <img (click)=\"onPreviewImage(i)\" [src]=\"image.file\" [alt]=\"image.name\">\r\n                <div class=\"image-cta\" (click)=\"onPreviewImage(i)\">\r\n                    Click to preview <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"showMask\" [ngClass]=\"{'hide-overflow' : showMask}\" class=\"image-gallery-modal\" @animation2>\r\n            <div *ngIf=\"showCount\" class=\"count\">\r\n                {{currentIndex + 1}}/{{totalImageCount}}\r\n            </div>\r\n            <button (click)=\"onClosePreview()\" *ngIf=\"previewImage\" class=\"close-btn\">\r\n                <fa-icon icon=\"times\"></fa-icon>\r\n            </button>\r\n            <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-prev\" (click)=\"onclickPrev()\">\r\n                <fa-icon icon=\"arrow-circle-left\" class=\"icon-image-gallery-modal-carousel icon-prev\"></fa-icon>\r\n            </button>\r\n            <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-next\" (click)=\"onclickNext()\">\r\n                <fa-icon icon=\"arrow-circle-right\" class=\"icon-image-gallery-modal-carousel icon-next\"></fa-icon>\r\n            </button>\r\n            <div *ngIf=\"previewImage\" [@animation]=\"{value : 'visible'}\" (@animation.done)=\"onAnimationEnd($event)\" class=\"image-gallery-modal-img\">\r\n                <img [src]=\"currentImageGalleryModal.file\" [alt]=\"currentImageGalleryModal.name\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div>\r\n        <p-galleria [value]=\"galleryData\" class=\"gallery-custom\" [responsiveOptions]=\"responsiveOptions\" [containerStyle]=\"{ 'max-width': '900px' }\">\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <div class=\"img\">\r\n                    <img class=\"big-img\" [src]=\"item.file\" />\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"thumbnail\" let-item>\r\n                <div class=\"grid grid-nogutter justify-content-center\">\r\n                    <img [src]=\"item.file\" class=\"small-img\" />\r\n                </div>\r\n            </ng-template>\r\n        </p-galleria>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:100%}.gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;margin:auto;width:90%}@media only screen and (min-width: 1500px){.gallery-image-gallery-modal-container{max-width:150rem}}.gallery-image-gallery-modal-container .gallery{line-height:0;column-count:4;column-gap:.8rem}.gallery-image-gallery-modal-container .gallery .gallery-image{overflow:hidden;transition:all .3s;position:relative;margin-bottom:1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover{box-shadow:#00000026 0 1.5rem 2.5rem,#0000000d 0 .5rem 1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover img{filter:brightness(.5)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta{opacity:1}.gallery-image-gallery-modal-container .gallery .gallery-image img{width:100%;height:auto;cursor:zoom-in;border-radius:.35rem}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta{opacity:0;position:absolute;width:100%;top:50%;text-align:center;color:#fff;font-size:2rem;cursor:zoom-in;transition:opacity .3s}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta fa-icon{font-size:2rem;margin-left:1rem;color:#fff}.gallery-image-gallery-modal-container .hide-overflow{overflow:hidden}.gallery-image-gallery-modal-container .image-gallery-modal{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;background-color:#000000d9;z-index:101;height:100%;overflow-y:auto}.gallery-image-gallery-modal-container .image-gallery-modal .count{position:absolute;top:0;left:0;width:7%;height:10%;color:#fff;opacity:.7;font-size:1.8rem;display:flex;justify-content:center;align-items:center;margin-left:.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn{position:absolute;top:0;right:0;padding:0;color:#fff;background:0 0;border:0;cursor:pointer;width:7%;height:10%;z-index:10}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn fa-icon{font-size:2.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{display:flex;justify-content:center;align-items:center;position:absolute;z-index:1;width:8%;height:8%;padding:0;color:#fff;text-align:center;background:0 0;border:0;cursor:pointer}.gallery-image-gallery-modal-container .image-gallery-modal .btn-prev{left:0}.gallery-image-gallery-modal-container .image-gallery-modal .btn-next{right:0}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel{color:#fff;opacity:.5;transition:all .15s ease}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel:hover{opacity:.9}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel:active{opacity:.5}.gallery-image-gallery-modal-container .image-gallery-modal .icon-prev,.gallery-image-gallery-modal-container .image-gallery-modal .icon-next{font-size:3rem}.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img img{width:100%;max-height:90vh;border-radius:1rem}@media only screen and (max-width: 75em){.gallery-image-gallery-modal-container .gallery-image-gallery-modal-container{display:none}.gallery-image-gallery-modal-container .gallery{column-count:3;width:100%}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-image-gallery-modal-container .gallery{column-count:2}.gallery-image-gallery-modal-container .gallery-img img{max-width:100%}}@media only screen and (max-width: 37.5em){.gallery-image-gallery-modal-container .gallery{column-count:1}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-custom{display:block;margin:auto;width:90%}.gallery-custom .img{width:90%}.gallery-custom .big-img{width:100%;height:50rem;object-fit:cover;border-radius:1.5rem;box-shadow:2rem 1rem 1.5rem -.5rem #e0e0e075;margin-bottom:2rem}.gallery-custom .small-img{object-fit:cover;border-radius:.7rem;box-shadow:1rem .4rem .5rem -.5rem #e0e0e075;width:100%;max-width:8rem;height:12rem}.gallery-image-gallery-modal-container{display:none}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.Galleria, selector: "p-galleria", inputs: ["activeIndex", "fullScreen", "id", "value", "numVisible", "responsiveOptions", "showItemNavigators", "showThumbnailNavigators", "showItemNavigatorsOnHover", "changeItemOnIndicatorHover", "circular", "autoPlay", "transitionInterval", "showThumbnails", "thumbnailsPosition", "verticalThumbnailViewPortHeight", "showIndicators", "showIndicatorsOnItem", "indicatorsPosition", "baseZIndex", "maskClass", "containerClass", "containerStyle", "showTransitionOptions", "hideTransitionOptions", "visible"], outputs: ["activeIndexChange", "visibleChange"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], animations: [
+        trigger('animation', [
+            transition('void => visible', [
+                style({ transform: 'scale(0.5)' }),
+                animate('150ms', style({ transform: 'scale(1)' }))
+            ]),
+            transition('visible => void', [
+                style({ transform: 'scale(1)' }),
+                animate('150ms', style({ transform: 'scale(0.5)' }))
+            ]),
+        ]),
+        trigger('animation2', [
+            transition(':leave', [
+                style({ opacity: 1 }),
+                animate('50ms', style({ opacity: 0.8 }))
+            ])
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageGalleryModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'image-gallery-modal', animations: [
+                        trigger('animation', [
+                            transition('void => visible', [
+                                style({ transform: 'scale(0.5)' }),
+                                animate('150ms', style({ transform: 'scale(1)' }))
+                            ]),
+                            transition('visible => void', [
+                                style({ transform: 'scale(1)' }),
+                                animate('150ms', style({ transform: 'scale(0.5)' }))
+                            ]),
+                        ]),
+                        trigger('animation2', [
+                            transition(':leave', [
+                                style({ opacity: 1 }),
+                                animate('50ms', style({ opacity: 0.8 }))
+                            ])
+                        ])
+                    ], template: "<div class=\"section\">\r\n\r\n    <div class=\"gallery-image-gallery-modal-container\">\r\n        <div class=\"gallery\">\r\n            <div *ngFor=\"let image of galleryData; let i = index\" class=\"gallery-image\">\r\n                <img (click)=\"onPreviewImage(i)\" [src]=\"image.file\" [alt]=\"image.name\">\r\n                <div class=\"image-cta\" (click)=\"onPreviewImage(i)\">\r\n                    Click to preview <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"showMask\" [ngClass]=\"{'hide-overflow' : showMask}\" class=\"image-gallery-modal\" @animation2>\r\n            <div *ngIf=\"showCount\" class=\"count\">\r\n                {{currentIndex + 1}}/{{totalImageCount}}\r\n            </div>\r\n            <button (click)=\"onClosePreview()\" *ngIf=\"previewImage\" class=\"close-btn\">\r\n                <fa-icon icon=\"times\"></fa-icon>\r\n            </button>\r\n            <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-prev\" (click)=\"onclickPrev()\">\r\n                <fa-icon icon=\"arrow-circle-left\" class=\"icon-image-gallery-modal-carousel icon-prev\"></fa-icon>\r\n            </button>\r\n            <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-next\" (click)=\"onclickNext()\">\r\n                <fa-icon icon=\"arrow-circle-right\" class=\"icon-image-gallery-modal-carousel icon-next\"></fa-icon>\r\n            </button>\r\n            <div *ngIf=\"previewImage\" [@animation]=\"{value : 'visible'}\" (@animation.done)=\"onAnimationEnd($event)\" class=\"image-gallery-modal-img\">\r\n                <img [src]=\"currentImageGalleryModal.file\" [alt]=\"currentImageGalleryModal.name\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div>\r\n        <p-galleria [value]=\"galleryData\" class=\"gallery-custom\" [responsiveOptions]=\"responsiveOptions\" [containerStyle]=\"{ 'max-width': '900px' }\">\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <div class=\"img\">\r\n                    <img class=\"big-img\" [src]=\"item.file\" />\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"thumbnail\" let-item>\r\n                <div class=\"grid grid-nogutter justify-content-center\">\r\n                    <img [src]=\"item.file\" class=\"small-img\" />\r\n                </div>\r\n            </ng-template>\r\n        </p-galleria>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:100%}.gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;margin:auto;width:90%}@media only screen and (min-width: 1500px){.gallery-image-gallery-modal-container{max-width:150rem}}.gallery-image-gallery-modal-container .gallery{line-height:0;column-count:4;column-gap:.8rem}.gallery-image-gallery-modal-container .gallery .gallery-image{overflow:hidden;transition:all .3s;position:relative;margin-bottom:1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover{box-shadow:#00000026 0 1.5rem 2.5rem,#0000000d 0 .5rem 1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover img{filter:brightness(.5)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta{opacity:1}.gallery-image-gallery-modal-container .gallery .gallery-image img{width:100%;height:auto;cursor:zoom-in;border-radius:.35rem}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta{opacity:0;position:absolute;width:100%;top:50%;text-align:center;color:#fff;font-size:2rem;cursor:zoom-in;transition:opacity .3s}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta fa-icon{font-size:2rem;margin-left:1rem;color:#fff}.gallery-image-gallery-modal-container .hide-overflow{overflow:hidden}.gallery-image-gallery-modal-container .image-gallery-modal{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;background-color:#000000d9;z-index:101;height:100%;overflow-y:auto}.gallery-image-gallery-modal-container .image-gallery-modal .count{position:absolute;top:0;left:0;width:7%;height:10%;color:#fff;opacity:.7;font-size:1.8rem;display:flex;justify-content:center;align-items:center;margin-left:.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn{position:absolute;top:0;right:0;padding:0;color:#fff;background:0 0;border:0;cursor:pointer;width:7%;height:10%;z-index:10}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn fa-icon{font-size:2.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{display:flex;justify-content:center;align-items:center;position:absolute;z-index:1;width:8%;height:8%;padding:0;color:#fff;text-align:center;background:0 0;border:0;cursor:pointer}.gallery-image-gallery-modal-container .image-gallery-modal .btn-prev{left:0}.gallery-image-gallery-modal-container .image-gallery-modal .btn-next{right:0}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel{color:#fff;opacity:.5;transition:all .15s ease}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel:hover{opacity:.9}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel:active{opacity:.5}.gallery-image-gallery-modal-container .image-gallery-modal .icon-prev,.gallery-image-gallery-modal-container .image-gallery-modal .icon-next{font-size:3rem}.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img img{width:100%;max-height:90vh;border-radius:1rem}@media only screen and (max-width: 75em){.gallery-image-gallery-modal-container .gallery-image-gallery-modal-container{display:none}.gallery-image-gallery-modal-container .gallery{column-count:3;width:100%}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-image-gallery-modal-container .gallery{column-count:2}.gallery-image-gallery-modal-container .gallery-img img{max-width:100%}}@media only screen and (max-width: 37.5em){.gallery-image-gallery-modal-container .gallery{column-count:1}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-custom{display:block;margin:auto;width:90%}.gallery-custom .img{width:90%}.gallery-custom .big-img{width:100%;height:50rem;object-fit:cover;border-radius:1.5rem;box-shadow:2rem 1rem 1.5rem -.5rem #e0e0e075;margin-bottom:2rem}.gallery-custom .small-img{object-fit:cover;border-radius:.7rem;box-shadow:1rem .4rem .5rem -.5rem #e0e0e075;width:100%;max-width:8rem;height:12rem}.gallery-image-gallery-modal-container{display:none}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { galleryData: [{
+                type: Input
+            }], showCount: [{
+                type: Input
+            }], onKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
             }] } });
-class SuccessMessageDialogComponent {
-    constructor(dialogRef, _Router) {
-        this.dialogRef = dialogRef;
-        this._Router = _Router;
-    }
-    onClickSubmitAnotherForm() {
-        this.dialogRef.close();
-        this._Router.navigate(['/contact-us/contact-us-page']);
-    }
-}
-SuccessMessageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuccessMessageDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-SuccessMessageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuccessMessageDialogComponent, selector: "success-message-dialog", ngImport: i0, template: "<div class=\"page\">\n  <span mat-dialog-title class=\"dialog-header\" mat-button>\n    <fa-icon icon=\"xmark\" mat-dialog-close></fa-icon>\n  </span>\n\n  <mat-dialog-content class=\"mat-typography\">\n    <div class=\"success-icon\">\n      <fa-icon icon=\"calendar-check\"></fa-icon>\n    </div>\n    <h2 class=\"title\">Thanks! your request has been submitted</h2>\n    <h3 class=\"subtitle\">We have received your message, we'll reach out to you as soon as possible!</h3>\n  </mat-dialog-content>\n  <div class=\"divider\"></div>\n  <mat-dialog-actions class=\"dialog-footer\">\n    <h3>Still have any questions? <span class=\"link-text\" (click)=\"onClickSubmitAnotherForm()\">Submit\n        another form</span>\n    </h3>\n  </mat-dialog-actions>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{text-align:center}.page .mat-typography{padding:0 6rem 2rem;display:grid}.page .dialog-header{text-align:right;font-size:3rem;color:#686868;font-weight:900;padding:0 2rem}.page .success-icon{font-size:7rem;color:#12957e;margin-bottom:2rem}.page .title{color:#36393f;font-size:2.8rem;font-weight:700}.page .subtitle{justify-self:center;width:85%;font-size:2.2rem;font-weight:500;color:#494949}.page .divider{width:95%;border:.1rem solid #D8D8D8;margin:auto}.page .dialog-footer{padding:3rem 0rem;display:grid;justify-content:center}.page .dialog-footer h3{color:#494949;align-self:center;font-size:2.2rem}.page .link-text{color:#155ed4;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2.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: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuccessMessageDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'success-message-dialog', template: "<div class=\"page\">\n  <span mat-dialog-title class=\"dialog-header\" mat-button>\n    <fa-icon icon=\"xmark\" mat-dialog-close></fa-icon>\n  </span>\n\n  <mat-dialog-content class=\"mat-typography\">\n    <div class=\"success-icon\">\n      <fa-icon icon=\"calendar-check\"></fa-icon>\n    </div>\n    <h2 class=\"title\">Thanks! your request has been submitted</h2>\n    <h3 class=\"subtitle\">We have received your message, we'll reach out to you as soon as possible!</h3>\n  </mat-dialog-content>\n  <div class=\"divider\"></div>\n  <mat-dialog-actions class=\"dialog-footer\">\n    <h3>Still have any questions? <span class=\"link-text\" (click)=\"onClickSubmitAnotherForm()\">Submit\n        another form</span>\n    </h3>\n  </mat-dialog-actions>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{text-align:center}.page .mat-typography{padding:0 6rem 2rem;display:grid}.page .dialog-header{text-align:right;font-size:3rem;color:#686868;font-weight:900;padding:0 2rem}.page .success-icon{font-size:7rem;color:#12957e;margin-bottom:2rem}.page .title{color:#36393f;font-size:2.8rem;font-weight:700}.page .subtitle{justify-self:center;width:85%;font-size:2.2rem;font-weight:500;color:#494949}.page .divider{width:95%;border:.1rem solid #D8D8D8;margin:auto}.page .dialog-footer{padding:3rem 0rem;display:grid;justify-content:center}.page .dialog-footer h3{color:#494949;align-self:center;font-size:2.2rem}.page .link-text{color:#155ed4;cursor:pointer}\n"] }]
+class SuccessMessageDialogComponent {
+    constructor(dialogRef, _Router) {
+        this.dialogRef = dialogRef;
+        this._Router = _Router;
+    }
+    onClickSubmitAnotherForm() {
+        this.dialogRef.close();
+        this._Router.navigate(['/contact-us/contact-us-page']);
+    }
+}
+SuccessMessageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuccessMessageDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+SuccessMessageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuccessMessageDialogComponent, selector: "success-message-dialog", ngImport: i0, template: "<div class=\"page\">\r\n  <span mat-dialog-title class=\"dialog-header\" mat-button>\r\n    <fa-icon icon=\"xmark\" mat-dialog-close></fa-icon>\r\n  </span>\r\n\r\n  <mat-dialog-content class=\"mat-typography\">\r\n    <div class=\"success-icon\">\r\n      <fa-icon icon=\"calendar-check\"></fa-icon>\r\n    </div>\r\n    <h2 class=\"title\">Thanks! your request has been submitted</h2>\r\n    <h3 class=\"subtitle\">We have received your message, we'll reach out to you as soon as possible!</h3>\r\n  </mat-dialog-content>\r\n  <div class=\"divider\"></div>\r\n  <mat-dialog-actions class=\"dialog-footer\">\r\n    <h3>Still have any questions? <span class=\"link-text\" (click)=\"onClickSubmitAnotherForm()\">Submit\r\n        another form</span>\r\n    </h3>\r\n  </mat-dialog-actions>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{text-align:center}.page .mat-typography{padding:0 6rem 2rem;display:grid}.page .dialog-header{text-align:right;font-size:3rem;color:#686868;font-weight:900;padding:0 2rem}.page .success-icon{font-size:7rem;color:#12957e;margin-bottom:2rem}.page .title{color:#36393f;font-size:2.8rem;font-weight:700}.page .subtitle{justify-self:center;width:85%;font-size:2.2rem;font-weight:500;color:#494949}.page .divider{width:95%;border:.1rem solid #D8D8D8;margin:auto}.page .dialog-footer{padding:3rem 0rem;display:grid;justify-content:center}.page .dialog-footer h3{color:#494949;align-self:center;font-size:2.2rem}.page .link-text{color:#155ed4;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2.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: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuccessMessageDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'success-message-dialog', template: "<div class=\"page\">\r\n  <span mat-dialog-title class=\"dialog-header\" mat-button>\r\n    <fa-icon icon=\"xmark\" mat-dialog-close></fa-icon>\r\n  </span>\r\n\r\n  <mat-dialog-content class=\"mat-typography\">\r\n    <div class=\"success-icon\">\r\n      <fa-icon icon=\"calendar-check\"></fa-icon>\r\n    </div>\r\n    <h2 class=\"title\">Thanks! your request has been submitted</h2>\r\n    <h3 class=\"subtitle\">We have received your message, we'll reach out to you as soon as possible!</h3>\r\n  </mat-dialog-content>\r\n  <div class=\"divider\"></div>\r\n  <mat-dialog-actions class=\"dialog-footer\">\r\n    <h3>Still have any questions? <span class=\"link-text\" (click)=\"onClickSubmitAnotherForm()\">Submit\r\n        another form</span>\r\n    </h3>\r\n  </mat-dialog-actions>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{text-align:center}.page .mat-typography{padding:0 6rem 2rem;display:grid}.page .dialog-header{text-align:right;font-size:3rem;color:#686868;font-weight:900;padding:0 2rem}.page .success-icon{font-size:7rem;color:#12957e;margin-bottom:2rem}.page .title{color:#36393f;font-size:2.8rem;font-weight:700}.page .subtitle{justify-self:center;width:85%;font-size:2.2rem;font-weight:500;color:#494949}.page .divider{width:95%;border:.1rem solid #D8D8D8;margin:auto}.page .dialog-footer{padding:3rem 0rem;display:grid;justify-content:center}.page .dialog-footer h3{color:#494949;align-self:center;font-size:2.2rem}.page .link-text{color:#155ed4;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: i1.Router }]; } });
-var PageSectionStyleThirteen;
-(function (PageSectionStyleThirteen) {
-    PageSectionStyleThirteen[PageSectionStyleThirteen["SHAPE_ICON"] = 0] = "SHAPE_ICON";
-    PageSectionStyleThirteen[PageSectionStyleThirteen["IMAGE_ICON"] = 1] = "IMAGE_ICON";
+var PageSectionStyleThirteen;
+(function (PageSectionStyleThirteen) {
+    PageSectionStyleThirteen[PageSectionStyleThirteen["SHAPE_ICON"] = 0] = "SHAPE_ICON";
+    PageSectionStyleThirteen[PageSectionStyleThirteen["IMAGE_ICON"] = 1] = "IMAGE_ICON";
 })(PageSectionStyleThirteen || (PageSectionStyleThirteen = {}));
-class PageSectionStyleThirteenComponent {
-    constructor() {
-        this.counter = 0;
-        this.isItemHovered = [];
-        this.pageSectionStyleThirteen = PageSectionStyleThirteen;
-        this.iconType = this.pageSectionStyleThirteen.SHAPE_ICON;
-        this.isTwoImages = false;
-    }
-    ngOnInit() {
-        this.onHoveredItem(this.items[0].image, 0);
-    }
-    onClickChangeImage(image, index) {
-        this.onHoveredItem(image, index);
-    }
-    onHoveredItem(itemImage, index) {
-        this.counter = index;
-        for (let i = 0; i < this.items.length; i++) {
-            this.isItemHovered[i] = false;
-        }
-        this.isItemHovered[index] = true;
-        this.showedImage = itemImage;
-    }
-}
-PageSectionStyleThirteenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionTitle: "sectionTitle", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\n    <div class=\"left-side\">\n        <div class=\"headline\">\n            <section-title [sectionTitle]=\"sectionTitle\"></section-title>\n        </div>\n        <div class=\"items\">\n            <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\n                <div class=\"left-column\">\n\n                    <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n                        <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n                        <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n                            <img [src]=\"item.iconImage\" alt=\"\">\n                        </div>\n                    </div>\n                    <div></div>\n                </div>\n                <div class=\"right-column\">\n                    <div class=\"item-title\">{{item.title}}</div>\n                    <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n                        {{item.description}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n        <div class=\"image-container\">\n            <img [src]=\"showedImage\" alt=\"\">\n        </div>\n        <div class=\"back-image\" *ngIf=\"isTwoImages\">\n            <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.why-choose-us{display:flex;flex-direction:row;column-gap:4%;margin:auto;width:90%}@media only screen and (min-width: 1500px){.why-choose-us{width:150rem}}.why-choose-us .left-side,.why-choose-us .right-side{width:48%}.why-choose-us .items{display:grid;gap:2.5rem;width:100%}.why-choose-us .hovered-item{background-color:#155ed4;box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#f1f1f1}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}@media only screen and (max-width: 37.5em){.why-choose-us .item{max-width:90vw}}.why-choose-us .item:hover{box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:2.2rem}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;row-gap:2%}.why-choose-us .left-side,.why-choose-us .right-side{width:100%}.why-choose-us .left-side{margin-bottom:3rem}.why-choose-us .left-side .hide-description{max-height:0;opacity:0;overflow:hidden}.why-choose-us .left-side .show-description{max-height:20rem;transition:all .5s;opacity:1;overflow:hidden}.why-choose-us .right-side{width:100%;justify-content:center}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem;height:35rem}.why-choose-us .right-side .image-container img{width:100%}.why-choose-us .right-side .back-image{display:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\n    <div class=\"left-side\">\n        <div class=\"headline\">\n            <section-title [sectionTitle]=\"sectionTitle\"></section-title>\n        </div>\n        <div class=\"items\">\n            <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\n                <div class=\"left-column\">\n\n                    <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n                        <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n                        <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n                            <img [src]=\"item.iconImage\" alt=\"\">\n                        </div>\n                    </div>\n                    <div></div>\n                </div>\n                <div class=\"right-column\">\n                    <div class=\"item-title\">{{item.title}}</div>\n                    <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n                        {{item.description}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n        <div class=\"image-container\">\n            <img [src]=\"showedImage\" alt=\"\">\n        </div>\n        <div class=\"back-image\" *ngIf=\"isTwoImages\">\n            <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.why-choose-us{display:flex;flex-direction:row;column-gap:4%;margin:auto;width:90%}@media only screen and (min-width: 1500px){.why-choose-us{width:150rem}}.why-choose-us .left-side,.why-choose-us .right-side{width:48%}.why-choose-us .items{display:grid;gap:2.5rem;width:100%}.why-choose-us .hovered-item{background-color:#155ed4;box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#f1f1f1}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}@media only screen and (max-width: 37.5em){.why-choose-us .item{max-width:90vw}}.why-choose-us .item:hover{box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:2.2rem}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;row-gap:2%}.why-choose-us .left-side,.why-choose-us .right-side{width:100%}.why-choose-us .left-side{margin-bottom:3rem}.why-choose-us .left-side .hide-description{max-height:0;opacity:0;overflow:hidden}.why-choose-us .left-side .show-description{max-height:20rem;transition:all .5s;opacity:1;overflow:hidden}.why-choose-us .right-side{width:100%;justify-content:center}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem;height:35rem}.why-choose-us .right-side .image-container img{width:100%}.why-choose-us .right-side .back-image{display:none}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { sectionTitle: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], iconType: [{
-                type: Input
-            }], isTwoImages: [{
-                type: Input
+class PageSectionStyleThirteenComponent {
+    constructor() {
+        this.counter = 0;
+        this.isItemHovered = [];
+        this.pageSectionStyleThirteen = PageSectionStyleThirteen;
+        this.iconType = this.pageSectionStyleThirteen.SHAPE_ICON;
+        this.isTwoImages = false;
+    }
+    ngOnInit() {
+        this.onHoveredItem(this.items[0].image, 0);
+    }
+    onClickChangeImage(image, index) {
+        this.onHoveredItem(image, index);
+    }
+    onHoveredItem(itemImage, index) {
+        this.counter = index;
+        for (let i = 0; i < this.items.length; i++) {
+            this.isItemHovered[i] = false;
+        }
+        this.isItemHovered[index] = true;
+        this.showedImage = itemImage;
+    }
+}
+PageSectionStyleThirteenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionTitle: "sectionTitle", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\r\n    <div class=\"left-side\">\r\n        <div class=\"headline\">\r\n            <section-title [sectionTitle]=\"sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"items\">\r\n            <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\r\n                <div class=\"left-column\">\r\n\r\n                    <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\r\n                        <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\r\n                        <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\r\n                            <img [src]=\"item.iconImage\" alt=\"\">\r\n                        </div>\r\n                    </div>\r\n                    <div></div>\r\n                </div>\r\n                <div class=\"right-column\">\r\n                    <div class=\"item-title\">{{item.title}}</div>\r\n                    <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\r\n                        {{item.description}}</div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\r\n        <div class=\"image-container\">\r\n            <img [src]=\"showedImage\" alt=\"\">\r\n        </div>\r\n        <div class=\"back-image\" *ngIf=\"isTwoImages\">\r\n            <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.why-choose-us{display:flex;flex-direction:row;column-gap:4%;margin:auto;width:90%}@media only screen and (min-width: 1500px){.why-choose-us{width:150rem}}.why-choose-us .left-side,.why-choose-us .right-side{width:48%}.why-choose-us .items{display:grid;gap:2.5rem;width:100%}.why-choose-us .hovered-item{background-color:#155ed4;box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#f1f1f1}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}@media only screen and (max-width: 37.5em){.why-choose-us .item{max-width:90vw}}.why-choose-us .item:hover{box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:2.2rem}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;row-gap:2%}.why-choose-us .left-side,.why-choose-us .right-side{width:100%}.why-choose-us .left-side{margin-bottom:3rem}.why-choose-us .left-side .hide-description{max-height:0;opacity:0;overflow:hidden}.why-choose-us .left-side .show-description{max-height:20rem;transition:all .5s;opacity:1;overflow:hidden}.why-choose-us .right-side{width:100%;justify-content:center}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem;height:35rem}.why-choose-us .right-side .image-container img{width:100%}.why-choose-us .right-side .back-image{display:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\r\n    <div class=\"left-side\">\r\n        <div class=\"headline\">\r\n            <section-title [sectionTitle]=\"sectionTitle\"></section-title>\r\n        </div>\r\n        <div class=\"items\">\r\n            <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\r\n                <div class=\"left-column\">\r\n\r\n                    <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\r\n                        <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\r\n                        <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\r\n                            <img [src]=\"item.iconImage\" alt=\"\">\r\n                        </div>\r\n                    </div>\r\n                    <div></div>\r\n                </div>\r\n                <div class=\"right-column\">\r\n                    <div class=\"item-title\">{{item.title}}</div>\r\n                    <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\r\n                        {{item.description}}</div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\r\n        <div class=\"image-container\">\r\n            <img [src]=\"showedImage\" alt=\"\">\r\n        </div>\r\n        <div class=\"back-image\" *ngIf=\"isTwoImages\">\r\n            <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.why-choose-us{display:flex;flex-direction:row;column-gap:4%;margin:auto;width:90%}@media only screen and (min-width: 1500px){.why-choose-us{width:150rem}}.why-choose-us .left-side,.why-choose-us .right-side{width:48%}.why-choose-us .items{display:grid;gap:2.5rem;width:100%}.why-choose-us .hovered-item{background-color:#155ed4;box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#f1f1f1}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}@media only screen and (max-width: 37.5em){.why-choose-us .item{max-width:90vw}}.why-choose-us .item:hover{box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:2.2rem}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;row-gap:2%}.why-choose-us .left-side,.why-choose-us .right-side{width:100%}.why-choose-us .left-side{margin-bottom:3rem}.why-choose-us .left-side .hide-description{max-height:0;opacity:0;overflow:hidden}.why-choose-us .left-side .show-description{max-height:20rem;transition:all .5s;opacity:1;overflow:hidden}.why-choose-us .right-side{width:100%;justify-content:center}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem;height:35rem}.why-choose-us .right-side .image-container img{width:100%}.why-choose-us .right-side .back-image{display:none}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { sectionTitle: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], iconType: [{
+                type: Input
+            }], isTwoImages: [{
+                type: Input
             }] } });
-class CallToActionSectionComponent {
-    constructor(_Router) {
-        this._Router = _Router;
-        this.titleOnRightSide = false;
-        this.imageBg = false;
-        this.isBoxWithCard = false;
-    }
-    onClickGetStarted(route) {
-        this._Router.navigate([route]);
-    }
-}
-CallToActionSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-CallToActionSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CallToActionSectionComponent, selector: "call-to-action-section", inputs: { sectionContent: "sectionContent", titleOnRightSide: "titleOnRightSide", imageBg: "imageBg", isBoxWithCard: "isBoxWithCard" }, ngImport: i0, template: "<div class=\"page\">\n  <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\n  'colored-bg':!imageBg,\n  'image-bg':imageBg\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\n    <div class=\"heading-side\">\n      <div class=\"title\">{{sectionContent.title}}</div>\n      <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\n      <div class=\"buttons\">\n        <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\">\n          {{button.name}}\n          <fa-icon icon=\"chevron-right\"></fa-icon>\n        </span>\n      </div>\n    </div>\n    <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\n      <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\" [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\n        <img [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\n        <div class=\"box-title\">\n          {{card.title}}\n        </div>\n        <div class=\"box-description\" *ngIf=\"card.description \">\n          {{card.description}}\n        </div>\n        <div class=\"button\">\n          <button type=\"button\" mat-raised-button (click)=\"onClickGetStarted(card.button.route)\">\n            {{card.button.name}}\n          </button>\n        </div>\n        <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\n        </div>\n      </div>\n    </div>\n  </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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(even){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(even):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: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'call-to-action-section', template: "<div class=\"page\">\n  <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\n  'colored-bg':!imageBg,\n  'image-bg':imageBg\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\n    <div class=\"heading-side\">\n      <div class=\"title\">{{sectionContent.title}}</div>\n      <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\n      <div class=\"buttons\">\n        <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\">\n          {{button.name}}\n          <fa-icon icon=\"chevron-right\"></fa-icon>\n        </span>\n      </div>\n    </div>\n    <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\n      <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\" [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\n        <img [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\n        <div class=\"box-title\">\n          {{card.title}}\n        </div>\n        <div class=\"box-description\" *ngIf=\"card.description \">\n          {{card.description}}\n        </div>\n        <div class=\"button\">\n          <button type=\"button\" mat-raised-button (click)=\"onClickGetStarted(card.button.route)\">\n            {{card.button.name}}\n          </button>\n        </div>\n        <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\n        </div>\n      </div>\n    </div>\n  </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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(even){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(even):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 [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
-                type: Input
-            }], titleOnRightSide: [{
-                type: Input
-            }], imageBg: [{
-                type: Input
-            }], isBoxWithCard: [{
-                type: Input
+class CallToActionSectionComponent {
+    constructor(_Router) {
+        this._Router = _Router;
+        this.titleOnRightSide = false;
+        this.imageBg = false;
+        this.isBoxWithCard = false;
+    }
+    onClickGetStarted(route) {
+        this._Router.navigate([route]);
+    }
+}
+CallToActionSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+CallToActionSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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\">\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\" [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\r\n        <img [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 (click)=\"onClickGetStarted(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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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(even){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(even):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: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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\">\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\" [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\r\n        <img [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 (click)=\"onClickGetStarted(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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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(even){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(even):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 [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
+                type: Input
+            }], titleOnRightSide: [{
+                type: Input
+            }], imageBg: [{
+                type: Input
+            }], isBoxWithCard: [{
+                type: Input
             }] } });
-;
-class TeamComponent {
-    constructor(_router, breakpointObserver) {
-        this._router = _router;
-        this.breakpointObserver = breakpointObserver;
-        this.scrollMemberNumber = 2;
-    }
-    ngOnInit() {
-        this.breakpointObserver.observe([
-            "(max-width: 1200px) and (min-width:851px)", "(max-width: 850px) and (min-width:601px)",
-            "(max-width: 600px)"
-        ]).subscribe((result) => {
-            if (result.breakpoints['(max-width: 1200px) and (min-width:851px)']) {
-                this.isTabletSize = true;
-                this.membersToShow = 3;
-            }
-            else if (result.breakpoints['(max-width: 850px) and (min-width:601px)']) {
-                this.membersToShow = 2;
-                this.scrollMemberNumber = 2;
-                this.isTabletSize = true;
-            }
-            else if (result.breakpoints['(max-width: 600px)']) {
-                this.membersToShow = 1;
-                this.scrollMemberNumber = 1;
-                this.isTabletSize = true;
-            }
-            else {
-                this.isTabletSize = false;
-            }
-        });
-    }
-    onAddNewMember() {
-        this._router.navigate(['/team/new-member']);
-    }
-}
-TeamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TeamComponent, deps: [{ token: i1.Router }, { token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-TeamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TeamComponent, selector: "team", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\n    <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\n    <div class=\"cards\" *ngIf=\"!isTabletSize\">\n        <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\n            <div class=\"image-container\">\n                <img [src]=\"teamMember.profilePicture\">\n            </div>\n            <div class=\"member-information\">\n                <div class=\"name\">\n                    {{teamMember.fullName}}\n                </div>\n                <div class=\"position\">\n                    {{teamMember.position}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"cards\" *ngIf=\"isTabletSize\">\n        <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\n            [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\n            <ng-template let-member pTemplate=\"item\">\n                <div class=\"member-card\">\n                    <div class=\"image-container\">\n                        <img [src]=\"member.profilePicture\">\n                    </div>\n                    <div class=\"member-information\">\n                        <div class=\"name\">\n                            {{member.fullName}}\n                        </div>\n                        <div class=\"position\">\n                            {{member.position}}\n                        </div>\n                    </div>\n                </div>\n            </ng-template>\n        </p-carousel>\n    </div>\n    <div class=\"caption-text\">\n        {{sectionContent.caption}}\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TeamComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'team', template: "<div class=\"page\">\n    <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\n    <div class=\"cards\" *ngIf=\"!isTabletSize\">\n        <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\n            <div class=\"image-container\">\n                <img [src]=\"teamMember.profilePicture\">\n            </div>\n            <div class=\"member-information\">\n                <div class=\"name\">\n                    {{teamMember.fullName}}\n                </div>\n                <div class=\"position\">\n                    {{teamMember.position}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"cards\" *ngIf=\"isTabletSize\">\n        <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\n            [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\n            <ng-template let-member pTemplate=\"item\">\n                <div class=\"member-card\">\n                    <div class=\"image-container\">\n                        <img [src]=\"member.profilePicture\">\n                    </div>\n                    <div class=\"member-information\">\n                        <div class=\"name\">\n                            {{member.fullName}}\n                        </div>\n                        <div class=\"position\">\n                            {{member.position}}\n                        </div>\n                    </div>\n                </div>\n            </ng-template>\n        </p-carousel>\n    </div>\n    <div class=\"caption-text\">\n        {{sectionContent.caption}}\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
-                type: Input
+;
+class TeamComponent {
+    constructor(_router, breakpointObserver) {
+        this._router = _router;
+        this.breakpointObserver = breakpointObserver;
+        this.scrollMemberNumber = 2;
+    }
+    ngOnInit() {
+        this.breakpointObserver.observe([
+            "(max-width: 1200px) and (min-width:851px)", "(max-width: 850px) and (min-width:601px)",
+            "(max-width: 600px)"
+        ]).subscribe((result) => {
+            if (result.breakpoints['(max-width: 1200px) and (min-width:851px)']) {
+                this.isTabletSize = true;
+                this.membersToShow = 3;
+            }
+            else if (result.breakpoints['(max-width: 850px) and (min-width:601px)']) {
+                this.membersToShow = 2;
+                this.scrollMemberNumber = 2;
+                this.isTabletSize = true;
+            }
+            else if (result.breakpoints['(max-width: 600px)']) {
+                this.membersToShow = 1;
+                this.scrollMemberNumber = 1;
+                this.isTabletSize = true;
+            }
+            else {
+                this.isTabletSize = false;
+            }
+        });
+    }
+    onAddNewMember() {
+        this._router.navigate(['/team/new-member']);
+    }
+}
+TeamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TeamComponent, deps: [{ token: i1.Router }, { token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+TeamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 [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 [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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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 [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 [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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
+                type: Input
             }] } });
-class ValuesComponent {
-    constructor(breakpointObserver) {
-        this.breakpointObserver = breakpointObserver;
-        this.withBgImage = false;
-    }
-    ngOnInit() {
-        this.breakpointObserver.observe([
-            "(max-width: 1200px)"
-        ]).subscribe((result) => {
-            if (result.matches) {
-                this.isTabletSize = true;
-            }
-            else {
-                this.isTabletSize = false;
-            }
-        });
-        this.newSectionContent = this.sectionContent;
-        for (let card of this.newSectionContent.cards) {
-            this.newSectionContent.newIcon = card.icon;
-        }
-    }
-}
-ValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuesComponent, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-ValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuesComponent, selector: "values", inputs: { sectionContent: "sectionContent", withBgImage: "withBgImage", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"page\">\n    <section-title [sectionTitle]=\"newSectionContent.sectionTitle\"></section-title>\n    <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\n        <div class=\"card\" *ngFor=\"let card of newSectionContent.cards\">\n            <div class=\"card-headline\">\n                <div class=\"icon\" *ngIf=\"card.icon\">\n                    <fa-icon [icon]=\"card.icon\"></fa-icon>\n                </div>\n                <div class=\"image\" *ngIf=\"!card.icon\">\n                    <img [src]=\"card.image\" alt=\"\">\n                </div>\n                <div class=\"subtitle\">\n                    {{card.title}}\n                </div>\n            </div>\n            <div class=\"value-description\">\n                {{card.subtitle}}\n            </div>\n        </div>\n    </div>\n    <div class=\"value-cards\" *ngIf=\"isTabletSize\">\n        <p-carousel class=\"custom\" [value]=\"newSectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\n            <ng-template let-card pTemplate=\"item\">\n                <div class=\"card\">\n                    <div class=\"card-headline\">\n                        <div class=\"icon\" *ngIf=\"card.icon\">\n                            <fa-icon [icon]=\"card.icon\"></fa-icon>\n                        </div>\n                        <div class=\"image\" *ngIf=\"!card.icon\">\n                            <img [src]=\"card.image\" alt=\"\">\n                        </div>\n                        <div class=\"subtitle\">\n                            {{card.title}}\n                        </div>\n                    </div>\n                    <div class=\"value-description\">\n                        {{card.subtitle}}\n                    </div>\n                </div>\n            </ng-template>\n        </p-carousel>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;grid-template-rows:auto auto auto auto;margin-top:5rem;align-items:center;position:relative;row-gap:2rem}.page .background-image{width:100%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.page .values-cards{grid-row:4;display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;place-content:center;gap:3REM;z-index:2;margin:auto;width:60%}.page .card{background-color:#fff;color:#32353b;padding:1rem 2rem;border-radius:2rem;border:.1rem solid #D8D8D8;box-shadow:.2rem .2rem .4rem #00000040;display:flex;flex-direction:column;row-gap:1rem}.page .card .card-headline{display:flex;flex-direction:row;column-gap:2rem;align-items:center}.page .card .icon{color:#155ed4;font-size:3rem}.page .card .image img{width:4rem;height:4rem;aspect-ratio:3/2;object-fit:contain}.page .card .subtitle{font-weight:700;font-size:2.4rem}.page .card .value-description{font-weight:400;font-size:1.4rem}@media only screen and (max-width: 75em){.page{height:auto;display:block}.page .values-cards{margin-top:3rem;display:block;width:100%}.page .card{width:70%;width:90%;margin:2rem auto}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'values', template: "<div class=\"page\">\n    <section-title [sectionTitle]=\"newSectionContent.sectionTitle\"></section-title>\n    <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\n        <div class=\"card\" *ngFor=\"let card of newSectionContent.cards\">\n            <div class=\"card-headline\">\n                <div class=\"icon\" *ngIf=\"card.icon\">\n                    <fa-icon [icon]=\"card.icon\"></fa-icon>\n                </div>\n                <div class=\"image\" *ngIf=\"!card.icon\">\n                    <img [src]=\"card.image\" alt=\"\">\n                </div>\n                <div class=\"subtitle\">\n                    {{card.title}}\n                </div>\n            </div>\n            <div class=\"value-description\">\n                {{card.subtitle}}\n            </div>\n        </div>\n    </div>\n    <div class=\"value-cards\" *ngIf=\"isTabletSize\">\n        <p-carousel class=\"custom\" [value]=\"newSectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\n            <ng-template let-card pTemplate=\"item\">\n                <div class=\"card\">\n                    <div class=\"card-headline\">\n                        <div class=\"icon\" *ngIf=\"card.icon\">\n                            <fa-icon [icon]=\"card.icon\"></fa-icon>\n                        </div>\n                        <div class=\"image\" *ngIf=\"!card.icon\">\n                            <img [src]=\"card.image\" alt=\"\">\n                        </div>\n                        <div class=\"subtitle\">\n                            {{card.title}}\n                        </div>\n                    </div>\n                    <div class=\"value-description\">\n                        {{card.subtitle}}\n                    </div>\n                </div>\n            </ng-template>\n        </p-carousel>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;grid-template-rows:auto auto auto auto;margin-top:5rem;align-items:center;position:relative;row-gap:2rem}.page .background-image{width:100%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.page .values-cards{grid-row:4;display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;place-content:center;gap:3REM;z-index:2;margin:auto;width:60%}.page .card{background-color:#fff;color:#32353b;padding:1rem 2rem;border-radius:2rem;border:.1rem solid #D8D8D8;box-shadow:.2rem .2rem .4rem #00000040;display:flex;flex-direction:column;row-gap:1rem}.page .card .card-headline{display:flex;flex-direction:row;column-gap:2rem;align-items:center}.page .card .icon{color:#155ed4;font-size:3rem}.page .card .image img{width:4rem;height:4rem;aspect-ratio:3/2;object-fit:contain}.page .card .subtitle{font-weight:700;font-size:2.4rem}.page .card .value-description{font-weight:400;font-size:1.4rem}@media only screen and (max-width: 75em){.page{height:auto;display:block}.page .values-cards{margin-top:3rem;display:block;width:100%}.page .card{width:70%;width:90%;margin:2rem auto}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
-                type: Input
-            }], withBgImage: [{
-                type: Input
-            }], isDarkBg: [{
-                type: Input
+class ValuesComponent {
+    constructor(breakpointObserver) {
+        this.breakpointObserver = breakpointObserver;
+        this.withBgImage = false;
+    }
+    ngOnInit() {
+        this.breakpointObserver.observe([
+            "(max-width: 1200px)"
+        ]).subscribe((result) => {
+            if (result.matches) {
+                this.isTabletSize = true;
+            }
+            else {
+                this.isTabletSize = false;
+            }
+        });
+        this.newSectionContent = this.sectionContent;
+        for (let card of this.newSectionContent.cards) {
+            this.newSectionContent.newIcon = card.icon;
+        }
+    }
+}
+ValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuesComponent, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+ValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuesComponent, selector: "values", inputs: { sectionContent: "sectionContent", withBgImage: "withBgImage", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"page\">\r\n    <section-title [sectionTitle]=\"newSectionContent.sectionTitle\"></section-title>\r\n    <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\r\n        <div class=\"card\" *ngFor=\"let card of newSectionContent.cards\">\r\n            <div class=\"card-headline\">\r\n                <div class=\"icon\" *ngIf=\"card.icon\">\r\n                    <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n                </div>\r\n                <div class=\"image\" *ngIf=\"!card.icon\">\r\n                    <img [src]=\"card.image\" alt=\"\">\r\n                </div>\r\n                <div class=\"subtitle\">\r\n                    {{card.title}}\r\n                </div>\r\n            </div>\r\n            <div class=\"value-description\">\r\n                {{card.subtitle}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"value-cards\" *ngIf=\"isTabletSize\">\r\n        <p-carousel class=\"custom\" [value]=\"newSectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n            <ng-template let-card pTemplate=\"item\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-headline\">\r\n                        <div class=\"icon\" *ngIf=\"card.icon\">\r\n                            <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n                        </div>\r\n                        <div class=\"image\" *ngIf=\"!card.icon\">\r\n                            <img [src]=\"card.image\" alt=\"\">\r\n                        </div>\r\n                        <div class=\"subtitle\">\r\n                            {{card.title}}\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"value-description\">\r\n                        {{card.subtitle}}\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-carousel>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;grid-template-rows:auto auto auto auto;margin-top:5rem;align-items:center;position:relative;row-gap:2rem}.page .background-image{width:100%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.page .values-cards{grid-row:4;display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;place-content:center;gap:3REM;z-index:2;margin:auto;width:60%}.page .card{background-color:#fff;color:#32353b;padding:1rem 2rem;border-radius:2rem;border:.1rem solid #D8D8D8;box-shadow:.2rem .2rem .4rem #00000040;display:flex;flex-direction:column;row-gap:1rem}.page .card .card-headline{display:flex;flex-direction:row;column-gap:2rem;align-items:center}.page .card .icon{color:#155ed4;font-size:3rem}.page .card .image img{width:4rem;height:4rem;aspect-ratio:3/2;object-fit:contain}.page .card .subtitle{font-weight:700;font-size:2.4rem}.page .card .value-description{font-weight:400;font-size:1.4rem}@media only screen and (max-width: 75em){.page{height:auto;display:block}.page .values-cards{margin-top:3rem;display:block;width:100%}.page .card{width:70%;width:90%;margin:2rem auto}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'values', template: "<div class=\"page\">\r\n    <section-title [sectionTitle]=\"newSectionContent.sectionTitle\"></section-title>\r\n    <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\r\n        <div class=\"card\" *ngFor=\"let card of newSectionContent.cards\">\r\n            <div class=\"card-headline\">\r\n                <div class=\"icon\" *ngIf=\"card.icon\">\r\n                    <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n                </div>\r\n                <div class=\"image\" *ngIf=\"!card.icon\">\r\n                    <img [src]=\"card.image\" alt=\"\">\r\n                </div>\r\n                <div class=\"subtitle\">\r\n                    {{card.title}}\r\n                </div>\r\n            </div>\r\n            <div class=\"value-description\">\r\n                {{card.subtitle}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"value-cards\" *ngIf=\"isTabletSize\">\r\n        <p-carousel class=\"custom\" [value]=\"newSectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n            <ng-template let-card pTemplate=\"item\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-headline\">\r\n                        <div class=\"icon\" *ngIf=\"card.icon\">\r\n                            <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n                        </div>\r\n                        <div class=\"image\" *ngIf=\"!card.icon\">\r\n                            <img [src]=\"card.image\" alt=\"\">\r\n                        </div>\r\n                        <div class=\"subtitle\">\r\n                            {{card.title}}\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"value-description\">\r\n                        {{card.subtitle}}\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-carousel>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;grid-template-rows:auto auto auto auto;margin-top:5rem;align-items:center;position:relative;row-gap:2rem}.page .background-image{width:100%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.page .values-cards{grid-row:4;display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;place-content:center;gap:3REM;z-index:2;margin:auto;width:60%}.page .card{background-color:#fff;color:#32353b;padding:1rem 2rem;border-radius:2rem;border:.1rem solid #D8D8D8;box-shadow:.2rem .2rem .4rem #00000040;display:flex;flex-direction:column;row-gap:1rem}.page .card .card-headline{display:flex;flex-direction:row;column-gap:2rem;align-items:center}.page .card .icon{color:#155ed4;font-size:3rem}.page .card .image img{width:4rem;height:4rem;aspect-ratio:3/2;object-fit:contain}.page .card .subtitle{font-weight:700;font-size:2.4rem}.page .card .value-description{font-weight:400;font-size:1.4rem}@media only screen and (max-width: 75em){.page{height:auto;display:block}.page .values-cards{margin-top:3rem;display:block;width:100%}.page .card{width:70%;width:90%;margin:2rem auto}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
+                type: Input
+            }], withBgImage: [{
+                type: Input
+            }], isDarkBg: [{
+                type: Input
             }] } });
-class OurClientListingComponent {
-    constructor() { }
-    ngOnInit() {
-        // console.log(this.account);
-    }
-}
-OurClientListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OurClientListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OurClientListingComponent, selector: "our-client-listing", inputs: { account: "account" }, ngImport: i0, template: "<div class=\"client\">\n  <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.client{margin:2vh 0}.client .image{filter:grayscale(100%);text-align:center;box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:.5rem}.client .image:hover{filter:none;cursor:pointer}@media only screen and (max-width: 112.5em){.image{width:70%}}@media only screen and (max-width: 75em){.image{width:70%}}@media only screen and (max-width: 56.25em){.image{width:70%}}@media only screen and (max-width: 37.5em){.image{width:85%}}@media only screen and (min-width: 112.5em){.image{width:70%}}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientListingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "our-client-listing", template: "<div class=\"client\">\n  <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.client{margin:2vh 0}.client .image{filter:grayscale(100%);text-align:center;box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:.5rem}.client .image:hover{filter:none;cursor:pointer}@media only screen and (max-width: 112.5em){.image{width:70%}}@media only screen and (max-width: 75em){.image{width:70%}}@media only screen and (max-width: 56.25em){.image{width:70%}}@media only screen and (max-width: 37.5em){.image{width:85%}}@media only screen and (min-width: 112.5em){.image{width:70%}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { account: [{
-                type: Input
+class OurClientListingComponent {
+    constructor() { }
+    ngOnInit() {
+        // console.log(this.account);
+    }
+}
+OurClientListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OurClientListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OurClientListingComponent, selector: "our-client-listing", inputs: { account: "account" }, ngImport: i0, template: "<div class=\"client\">\r\n  <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.client{margin:2vh 0}.client .image{filter:grayscale(100%);text-align:center;box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:.5rem}.client .image:hover{filter:none;cursor:pointer}@media only screen and (max-width: 112.5em){.image{width:70%}}@media only screen and (max-width: 75em){.image{width:70%}}@media only screen and (max-width: 56.25em){.image{width:70%}}@media only screen and (max-width: 37.5em){.image{width:85%}}@media only screen and (min-width: 112.5em){.image{width:70%}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientListingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "our-client-listing", template: "<div class=\"client\">\r\n  <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.client{margin:2vh 0}.client .image{filter:grayscale(100%);text-align:center;box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:.5rem}.client .image:hover{filter:none;cursor:pointer}@media only screen and (max-width: 112.5em){.image{width:70%}}@media only screen and (max-width: 75em){.image{width:70%}}@media only screen and (max-width: 56.25em){.image{width:70%}}@media only screen and (max-width: 37.5em){.image{width:85%}}@media only screen and (min-width: 112.5em){.image{width:70%}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { account: [{
+                type: Input
             }] } });
-class OurClientsComponent {
-    constructor(breakpointObserver) {
-        this.breakpointObserver = breakpointObserver;
-        this.clientsToShow = 4;
-        this.scrollClientNumber = 2;
-    }
-    ngOnInit() {
-        this.breakpointObserver.observe([
-            "(min-width: 1201px)",
-            "(max-width: 1200px) and (min-width:1076px)",
-            "(max-width: 1075px) and (min-width:651px)",
-            "(max-width: 650px)"
-        ]).subscribe((result) => {
-            if (result.breakpoints['(max-width: 1200px) and (min-width:1076px)']) {
-                this.isUnderTabRange = true;
-                this.clientsToShow = 3;
-                this.scrollClientNumber = 2;
-            }
-            else if (result.breakpoints['(min-width: 1201px)']) {
-                this.isUnderTabRange = true;
-                this.clientsToShow = 4;
-                this.scrollClientNumber = 2;
-            }
-            else if (result.breakpoints['(max-width: 1075px) and (min-width:651px)']) {
-                this.isUnderTabRange = true;
-                this.clientsToShow = 2;
-                this.scrollClientNumber = 1;
-            }
-            else if (result.breakpoints['(max-width: 650px)']) {
-                this.isUnderTabRange = true;
-                this.clientsToShow = 1;
-                this.scrollClientNumber = 1;
-            }
-            else {
-                this.isUnderTabRange = false;
-            }
-        });
-    }
-}
-OurClientsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientsComponent, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-OurClientsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OurClientsComponent, selector: "our-clients", inputs: { accounts: "accounts" }, ngImport: i0, template: "<p-carousel class=\"custom\" [value]=\"accounts\" [numVisible]=\"clientsToShow\" [numScroll]=\"scrollClientNumber\" [page]=\"0\"\n  orientation=\"horizantol\" [circular]=\"true\">\n  <ng-template let-client pTemplate=\"item\">\n    <div>\n      <our-client-listing class=\"client\" [account]=\"client\">\n      </our-client-listing>\n    </div>\n  </ng-template>\n</p-carousel>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.custom{height:20vh}.client{height:20rem}.custom,.client{margin:auto;width:90%}@media only screen and (min-width: 1500px){.custom,.client{width:150rem}}\n"], dependencies: [{ kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.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: OurClientListingComponent, selector: "our-client-listing", inputs: ["account"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "our-clients", template: "<p-carousel class=\"custom\" [value]=\"accounts\" [numVisible]=\"clientsToShow\" [numScroll]=\"scrollClientNumber\" [page]=\"0\"\n  orientation=\"horizantol\" [circular]=\"true\">\n  <ng-template let-client pTemplate=\"item\">\n    <div>\n      <our-client-listing class=\"client\" [account]=\"client\">\n      </our-client-listing>\n    </div>\n  </ng-template>\n</p-carousel>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.custom{height:20vh}.client{height:20rem}.custom,.client{margin:auto;width:90%}@media only screen and (min-width: 1500px){.custom,.client{width:150rem}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { accounts: [{
-                type: Input
+class OurClientsComponent {
+    constructor(breakpointObserver) {
+        this.breakpointObserver = breakpointObserver;
+        this.clientsToShow = 4;
+        this.scrollClientNumber = 2;
+    }
+    ngOnInit() {
+        this.breakpointObserver.observe([
+            "(min-width: 1201px)",
+            "(max-width: 1200px) and (min-width:1076px)",
+            "(max-width: 1075px) and (min-width:651px)",
+            "(max-width: 650px)"
+        ]).subscribe((result) => {
+            if (result.breakpoints['(max-width: 1200px) and (min-width:1076px)']) {
+                this.isUnderTabRange = true;
+                this.clientsToShow = 3;
+                this.scrollClientNumber = 2;
+            }
+            else if (result.breakpoints['(min-width: 1201px)']) {
+                this.isUnderTabRange = true;
+                this.clientsToShow = 4;
+                this.scrollClientNumber = 2;
+            }
+            else if (result.breakpoints['(max-width: 1075px) and (min-width:651px)']) {
+                this.isUnderTabRange = true;
+                this.clientsToShow = 2;
+                this.scrollClientNumber = 1;
+            }
+            else if (result.breakpoints['(max-width: 650px)']) {
+                this.isUnderTabRange = true;
+                this.clientsToShow = 1;
+                this.scrollClientNumber = 1;
+            }
+            else {
+                this.isUnderTabRange = false;
+            }
+        });
+    }
+}
+OurClientsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientsComponent, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+OurClientsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OurClientsComponent, selector: "our-clients", inputs: { accounts: "accounts" }, ngImport: i0, template: "<p-carousel class=\"custom\" [value]=\"accounts\" [numVisible]=\"clientsToShow\" [numScroll]=\"scrollClientNumber\" [page]=\"0\"\r\n  orientation=\"horizantol\" [circular]=\"true\">\r\n  <ng-template let-client pTemplate=\"item\">\r\n    <div>\r\n      <our-client-listing class=\"client\" [account]=\"client\">\r\n      </our-client-listing>\r\n    </div>\r\n  </ng-template>\r\n</p-carousel>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.custom{height:20vh}.client{height:20rem}.custom,.client{margin:auto;width:90%}@media only screen and (min-width: 1500px){.custom,.client{width:150rem}}\n"], dependencies: [{ kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.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: OurClientListingComponent, selector: "our-client-listing", inputs: ["account"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "our-clients", template: "<p-carousel class=\"custom\" [value]=\"accounts\" [numVisible]=\"clientsToShow\" [numScroll]=\"scrollClientNumber\" [page]=\"0\"\r\n  orientation=\"horizantol\" [circular]=\"true\">\r\n  <ng-template let-client pTemplate=\"item\">\r\n    <div>\r\n      <our-client-listing class=\"client\" [account]=\"client\">\r\n      </our-client-listing>\r\n    </div>\r\n  </ng-template>\r\n</p-carousel>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.custom{height:20vh}.client{height:20rem}.custom,.client{margin:auto;width:90%}@media only screen and (min-width: 1500px){.custom,.client{width:150rem}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { accounts: [{
+                type: Input
             }] } });
-class PageSectionWithMultipleCardsComponent {
-    constructor(_Router) {
-        this._Router = _Router;
-    }
-    ngOnInit() { }
-    onClickAllReasons(route) {
-        this._Router.navigate([route]);
-    }
-}
-PageSectionWithMultipleCardsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-PageSectionWithMultipleCardsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionWithMultipleCardsComponent, selector: "page-section-with-multiple-cards", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\n    <div class=\"text-part\">\n        <h2 class=\"tip-title\">\n            {{sectionContent.tipTitle}}\n        </h2>\n        <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n    </div>\n    <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\n        <div class=\"card-icon\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\n                <path\n                    d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\n            </svg>\n            <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\n        </div>\n        <div class=\"card-title\">\n            {{reason.title}}\n        </div>\n        <div class=\"card-description\">\n            {{reason.description}}\n        </div>\n    </div>\n    <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\n        <div class=\"card-title\">\n            {{sectionContent.allReasonsBox.ctaText}}\n        </div>\n        <div class=\"icon-circle\">\n            <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\n        </div>\n    </button>\n\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{gap:1.5rem;display:flex;flex-wrap:wrap;width:90%;margin:2rem auto}@media only screen and (min-width: 1500px){.page{max-width:150rem}}.page .text-part{width:61.5rem;row-gap:.5rem;display:grid;grid-template-rows:2rem 13rem auto;min-width:52rem;margin-bottom:2rem}@media only screen and (max-width: 600px){.page .text-part{min-width:0;width:100%;grid-template-rows:2rem auto auto}.page .text-part .subtitle{font-size:3rem;font-weight:700}}.page .text-part .tip-title{color:#155ed4;font-size:1.6rem;font-weight:700}.page .text-part .subtitle{font-size:4rem;font-weight:800;color:#3d3d3d}.page .text-part .description{font-size:2rem;font-weight:500;color:#7e7e7e}.page .reason-card,.page .all-reason-card{row-gap:1rem;display:grid;border-radius:1.5rem;border:.1rem solid #D8D8D8;background:#FFF;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem 1rem;margin:0rem auto}.page .reason-card{width:30rem;grid-template-rows:auto auto auto;text-align:center}.page .reason-card:nth-child(odd) svg{transform:rotate(90deg)}.page .reason-card .card-icon{place-self:center;position:relative}.page .reason-card .card-icon svg{width:9.5rem;height:9.5rem}.page .reason-card .card-icon fa-icon{position:absolute;font-size:3.8rem;top:calc(50% - 1.9rem);left:calc(50% - 1.9rem)}.page .reason-card .card-description{font-size:1.4rem;font-weight:500;color:#484848}.page .card-title{font-size:2.2rem;font-weight:800;color:#424345}.page .all-reason-card{place-content:center;cursor:pointer;transition:all .2s;width:30rem}@media (hover: hover){.page .all-reason-card:hover{background-color:#155ed4}.page .all-reason-card:hover .card-title{color:#fff}.page .all-reason-card:hover .icon-circle{color:#155ed4;background-color:#fff}.page .all-reason-card:active{background-color:#fff}.page .all-reason-card:active .card-title{color:#424345}.page .all-reason-card:active .icon-circle{color:#fff;background-color:#155ed4}}.page .all-reason-card .icon-circle{border-radius:50%;font-size:1.8rem;width:4rem;height:4rem;display:grid;place-content:center;background-color:#155ed4;color:#fff;justify-self:center}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'page-section-with-multiple-cards', template: "<div class=\"page\">\n    <div class=\"text-part\">\n        <h2 class=\"tip-title\">\n            {{sectionContent.tipTitle}}\n        </h2>\n        <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n    </div>\n    <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\n        <div class=\"card-icon\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\n                <path\n                    d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\n            </svg>\n            <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\n        </div>\n        <div class=\"card-title\">\n            {{reason.title}}\n        </div>\n        <div class=\"card-description\">\n            {{reason.description}}\n        </div>\n    </div>\n    <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\n        <div class=\"card-title\">\n            {{sectionContent.allReasonsBox.ctaText}}\n        </div>\n        <div class=\"icon-circle\">\n            <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\n        </div>\n    </button>\n\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{gap:1.5rem;display:flex;flex-wrap:wrap;width:90%;margin:2rem auto}@media only screen and (min-width: 1500px){.page{max-width:150rem}}.page .text-part{width:61.5rem;row-gap:.5rem;display:grid;grid-template-rows:2rem 13rem auto;min-width:52rem;margin-bottom:2rem}@media only screen and (max-width: 600px){.page .text-part{min-width:0;width:100%;grid-template-rows:2rem auto auto}.page .text-part .subtitle{font-size:3rem;font-weight:700}}.page .text-part .tip-title{color:#155ed4;font-size:1.6rem;font-weight:700}.page .text-part .subtitle{font-size:4rem;font-weight:800;color:#3d3d3d}.page .text-part .description{font-size:2rem;font-weight:500;color:#7e7e7e}.page .reason-card,.page .all-reason-card{row-gap:1rem;display:grid;border-radius:1.5rem;border:.1rem solid #D8D8D8;background:#FFF;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem 1rem;margin:0rem auto}.page .reason-card{width:30rem;grid-template-rows:auto auto auto;text-align:center}.page .reason-card:nth-child(odd) svg{transform:rotate(90deg)}.page .reason-card .card-icon{place-self:center;position:relative}.page .reason-card .card-icon svg{width:9.5rem;height:9.5rem}.page .reason-card .card-icon fa-icon{position:absolute;font-size:3.8rem;top:calc(50% - 1.9rem);left:calc(50% - 1.9rem)}.page .reason-card .card-description{font-size:1.4rem;font-weight:500;color:#484848}.page .card-title{font-size:2.2rem;font-weight:800;color:#424345}.page .all-reason-card{place-content:center;cursor:pointer;transition:all .2s;width:30rem}@media (hover: hover){.page .all-reason-card:hover{background-color:#155ed4}.page .all-reason-card:hover .card-title{color:#fff}.page .all-reason-card:hover .icon-circle{color:#155ed4;background-color:#fff}.page .all-reason-card:active{background-color:#fff}.page .all-reason-card:active .card-title{color:#424345}.page .all-reason-card:active .icon-circle{color:#fff;background-color:#155ed4}}.page .all-reason-card .icon-circle{border-radius:50%;font-size:1.8rem;width:4rem;height:4rem;display:grid;place-content:center;background-color:#155ed4;color:#fff;justify-self:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
-                type: Input
+class PageSectionWithMultipleCardsComponent {
+    constructor(_Router) {
+        this._Router = _Router;
+    }
+    ngOnInit() { }
+    onClickAllReasons(route) {
+        this._Router.navigate([route]);
+    }
+}
+PageSectionWithMultipleCardsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+PageSectionWithMultipleCardsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionWithMultipleCardsComponent, selector: "page-section-with-multiple-cards", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\r\n    <div class=\"text-part\">\r\n        <h2 class=\"tip-title\">\r\n            {{sectionContent.tipTitle}}\r\n        </h2>\r\n        <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n    </div>\r\n    <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\r\n        <div class=\"card-icon\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\r\n                <path\r\n                    d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\r\n            </svg>\r\n            <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\r\n        </div>\r\n        <div class=\"card-title\">\r\n            {{reason.title}}\r\n        </div>\r\n        <div class=\"card-description\">\r\n            {{reason.description}}\r\n        </div>\r\n    </div>\r\n    <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\r\n        <div class=\"card-title\">\r\n            {{sectionContent.allReasonsBox.ctaText}}\r\n        </div>\r\n        <div class=\"icon-circle\">\r\n            <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\r\n        </div>\r\n    </button>\r\n\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{gap:1.5rem;display:flex;flex-wrap:wrap;width:90%;margin:2rem auto}@media only screen and (min-width: 1500px){.page{max-width:150rem}}.page .text-part{width:61.5rem;row-gap:.5rem;display:grid;grid-template-rows:2rem 13rem auto;min-width:52rem;margin-bottom:2rem}@media only screen and (max-width: 600px){.page .text-part{min-width:0;width:100%;grid-template-rows:2rem auto auto}.page .text-part .subtitle{font-size:3rem;font-weight:700}}.page .text-part .tip-title{color:#155ed4;font-size:1.6rem;font-weight:700}.page .text-part .subtitle{font-size:4rem;font-weight:800;color:#3d3d3d}.page .text-part .description{font-size:2rem;font-weight:500;color:#7e7e7e}.page .reason-card,.page .all-reason-card{row-gap:1rem;display:grid;border-radius:1.5rem;border:.1rem solid #D8D8D8;background:#FFF;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem 1rem;margin:0rem auto}.page .reason-card{width:30rem;grid-template-rows:auto auto auto;text-align:center}.page .reason-card:nth-child(odd) svg{transform:rotate(90deg)}.page .reason-card .card-icon{place-self:center;position:relative}.page .reason-card .card-icon svg{width:9.5rem;height:9.5rem}.page .reason-card .card-icon fa-icon{position:absolute;font-size:3.8rem;top:calc(50% - 1.9rem);left:calc(50% - 1.9rem)}.page .reason-card .card-description{font-size:1.4rem;font-weight:500;color:#484848}.page .card-title{font-size:2.2rem;font-weight:800;color:#424345}.page .all-reason-card{place-content:center;cursor:pointer;transition:all .2s;width:30rem}@media (hover: hover){.page .all-reason-card:hover{background-color:#155ed4}.page .all-reason-card:hover .card-title{color:#fff}.page .all-reason-card:hover .icon-circle{color:#155ed4;background-color:#fff}.page .all-reason-card:active{background-color:#fff}.page .all-reason-card:active .card-title{color:#424345}.page .all-reason-card:active .icon-circle{color:#fff;background-color:#155ed4}}.page .all-reason-card .icon-circle{border-radius:50%;font-size:1.8rem;width:4rem;height:4rem;display:grid;place-content:center;background-color:#155ed4;color:#fff;justify-self:center}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'page-section-with-multiple-cards', template: "<div class=\"page\">\r\n    <div class=\"text-part\">\r\n        <h2 class=\"tip-title\">\r\n            {{sectionContent.tipTitle}}\r\n        </h2>\r\n        <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n    </div>\r\n    <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\r\n        <div class=\"card-icon\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\r\n                <path\r\n                    d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\r\n            </svg>\r\n            <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\r\n        </div>\r\n        <div class=\"card-title\">\r\n            {{reason.title}}\r\n        </div>\r\n        <div class=\"card-description\">\r\n            {{reason.description}}\r\n        </div>\r\n    </div>\r\n    <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\r\n        <div class=\"card-title\">\r\n            {{sectionContent.allReasonsBox.ctaText}}\r\n        </div>\r\n        <div class=\"icon-circle\">\r\n            <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\r\n        </div>\r\n    </button>\r\n\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{gap:1.5rem;display:flex;flex-wrap:wrap;width:90%;margin:2rem auto}@media only screen and (min-width: 1500px){.page{max-width:150rem}}.page .text-part{width:61.5rem;row-gap:.5rem;display:grid;grid-template-rows:2rem 13rem auto;min-width:52rem;margin-bottom:2rem}@media only screen and (max-width: 600px){.page .text-part{min-width:0;width:100%;grid-template-rows:2rem auto auto}.page .text-part .subtitle{font-size:3rem;font-weight:700}}.page .text-part .tip-title{color:#155ed4;font-size:1.6rem;font-weight:700}.page .text-part .subtitle{font-size:4rem;font-weight:800;color:#3d3d3d}.page .text-part .description{font-size:2rem;font-weight:500;color:#7e7e7e}.page .reason-card,.page .all-reason-card{row-gap:1rem;display:grid;border-radius:1.5rem;border:.1rem solid #D8D8D8;background:#FFF;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem 1rem;margin:0rem auto}.page .reason-card{width:30rem;grid-template-rows:auto auto auto;text-align:center}.page .reason-card:nth-child(odd) svg{transform:rotate(90deg)}.page .reason-card .card-icon{place-self:center;position:relative}.page .reason-card .card-icon svg{width:9.5rem;height:9.5rem}.page .reason-card .card-icon fa-icon{position:absolute;font-size:3.8rem;top:calc(50% - 1.9rem);left:calc(50% - 1.9rem)}.page .reason-card .card-description{font-size:1.4rem;font-weight:500;color:#484848}.page .card-title{font-size:2.2rem;font-weight:800;color:#424345}.page .all-reason-card{place-content:center;cursor:pointer;transition:all .2s;width:30rem}@media (hover: hover){.page .all-reason-card:hover{background-color:#155ed4}.page .all-reason-card:hover .card-title{color:#fff}.page .all-reason-card:hover .icon-circle{color:#155ed4;background-color:#fff}.page .all-reason-card:active{background-color:#fff}.page .all-reason-card:active .card-title{color:#424345}.page .all-reason-card:active .icon-circle{color:#fff;background-color:#155ed4}}.page .all-reason-card .icon-circle{border-radius:50%;font-size:1.8rem;width:4rem;height:4rem;display:grid;place-content:center;background-color:#155ed4;color:#fff;justify-self:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
+                type: Input
             }] } });
-class CallToActionSectionTwoComponent {
-    constructor(_router) {
-        this._router = _router;
-    }
-    ngOnInit() {
-    }
-    onClickLink(link) {
-        this._router.navigate([link]);
-    }
-}
-CallToActionSectionTwoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionTwoComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-CallToActionSectionTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CallToActionSectionTwoComponent, selector: "call-to-action-section-two", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"cta-section\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 61 48\" fill=\"none\" class=\"svg-top-right\">\n        <path\n            d=\"M16.8568 30.4924C-18.2522 24.3036 10.5419 3.88207 25.167 1.30326C39.7921 -1.27554 56.828 7.35401 58.4986 18.7386C60.1692 30.1232 64.3083 44.7867 49.6832 47.3655C35.058 49.9443 32.3641 34.7521 16.8568 30.4924Z\"\n            fill=\"#155ED4\" />\n    </svg>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 53 51\" fill=\"none\" class=\"svg-bottom-left\">\n        <path\n            d=\"M39.4766 22.6779C69.5603 35.0664 40.8217 50.4221 27.4676 50.4221C14.1135 50.4221 0.41333 38.7801 0.750387 27.0924C1.08744 15.4046 -0.237166 0 13.1169 0C26.471 0 26.4324 15.6787 39.4766 22.6779Z\"\n            fill=\"#155ED4\" />\n    </svg>\n    <h1 class=\"cta-title\">{{sectionContent.title}}</h1>\n    <p class=\"cta-description\">\n        {{sectionContent.description}}\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkOne.route)\">\n            {{sectionContent.linkOne.text}}\n        </span>.\n        {{sectionContent.textBetweenLinksOne}}\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkTwo.route)\">\n            {{sectionContent.linkTwo.text}} \n        </span>\n        {{sectionContent.textBetweenLinksTwo}}\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkThree.route)\">\n            {{sectionContent.linkThree.text}}\n        </span>\n        {{sectionContent.textAfterLinks}}\n    </p>\n\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.cta-section{background-color:#c2d0de;display:grid;position:relative;border-radius:1.5rem;padding:2rem 1.5rem;width:100%;margin:3rem auto}.cta-section .svg-top-right{height:4.8rem;width:6.1rem;position:absolute;top:-1rem;right:-1rem}.cta-section .svg-bottom-left{height:5.1rem;width:5.3rem;position:absolute;bottom:-2rem;left:-1.5rem}.cta-section .cta-title{font-size:3.4rem;font-weight:700;color:#000}.cta-section .cta-description{font-size:2rem;font-weight:500}.cta-section .link-text{text-decoration:underline;font-weight:700;cursor:pointer;transition:color linear .2s}@media (hover: hover){.cta-section .link-text:hover{color:#155ed4}}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionTwoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'call-to-action-section-two', template: "<div class=\"cta-section\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 61 48\" fill=\"none\" class=\"svg-top-right\">\n        <path\n            d=\"M16.8568 30.4924C-18.2522 24.3036 10.5419 3.88207 25.167 1.30326C39.7921 -1.27554 56.828 7.35401 58.4986 18.7386C60.1692 30.1232 64.3083 44.7867 49.6832 47.3655C35.058 49.9443 32.3641 34.7521 16.8568 30.4924Z\"\n            fill=\"#155ED4\" />\n    </svg>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 53 51\" fill=\"none\" class=\"svg-bottom-left\">\n        <path\n            d=\"M39.4766 22.6779C69.5603 35.0664 40.8217 50.4221 27.4676 50.4221C14.1135 50.4221 0.41333 38.7801 0.750387 27.0924C1.08744 15.4046 -0.237166 0 13.1169 0C26.471 0 26.4324 15.6787 39.4766 22.6779Z\"\n            fill=\"#155ED4\" />\n    </svg>\n    <h1 class=\"cta-title\">{{sectionContent.title}}</h1>\n    <p class=\"cta-description\">\n        {{sectionContent.description}}\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkOne.route)\">\n            {{sectionContent.linkOne.text}}\n        </span>.\n        {{sectionContent.textBetweenLinksOne}}\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkTwo.route)\">\n            {{sectionContent.linkTwo.text}} \n        </span>\n        {{sectionContent.textBetweenLinksTwo}}\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkThree.route)\">\n            {{sectionContent.linkThree.text}}\n        </span>\n        {{sectionContent.textAfterLinks}}\n    </p>\n\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.cta-section{background-color:#c2d0de;display:grid;position:relative;border-radius:1.5rem;padding:2rem 1.5rem;width:100%;margin:3rem auto}.cta-section .svg-top-right{height:4.8rem;width:6.1rem;position:absolute;top:-1rem;right:-1rem}.cta-section .svg-bottom-left{height:5.1rem;width:5.3rem;position:absolute;bottom:-2rem;left:-1.5rem}.cta-section .cta-title{font-size:3.4rem;font-weight:700;color:#000}.cta-section .cta-description{font-size:2rem;font-weight:500}.cta-section .link-text{text-decoration:underline;font-weight:700;cursor:pointer;transition:color linear .2s}@media (hover: hover){.cta-section .link-text:hover{color:#155ed4}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
-                type: Input
+class CallToActionSectionTwoComponent {
+    constructor(_router) {
+        this._router = _router;
+    }
+    ngOnInit() {
+    }
+    onClickLink(link) {
+        this._router.navigate([link]);
+    }
+}
+CallToActionSectionTwoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionTwoComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+CallToActionSectionTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CallToActionSectionTwoComponent, selector: "call-to-action-section-two", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"cta-section\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 61 48\" fill=\"none\" class=\"svg-top-right\">\r\n        <path\r\n            d=\"M16.8568 30.4924C-18.2522 24.3036 10.5419 3.88207 25.167 1.30326C39.7921 -1.27554 56.828 7.35401 58.4986 18.7386C60.1692 30.1232 64.3083 44.7867 49.6832 47.3655C35.058 49.9443 32.3641 34.7521 16.8568 30.4924Z\"\r\n            fill=\"#155ED4\" />\r\n    </svg>\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 53 51\" fill=\"none\" class=\"svg-bottom-left\">\r\n        <path\r\n            d=\"M39.4766 22.6779C69.5603 35.0664 40.8217 50.4221 27.4676 50.4221C14.1135 50.4221 0.41333 38.7801 0.750387 27.0924C1.08744 15.4046 -0.237166 0 13.1169 0C26.471 0 26.4324 15.6787 39.4766 22.6779Z\"\r\n            fill=\"#155ED4\" />\r\n    </svg>\r\n    <h1 class=\"cta-title\">{{sectionContent.title}}</h1>\r\n    <p class=\"cta-description\">\r\n        {{sectionContent.description}}\r\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkOne.route)\">\r\n            {{sectionContent.linkOne.text}}\r\n        </span>.\r\n        {{sectionContent.textBetweenLinksOne}}\r\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkTwo.route)\">\r\n            {{sectionContent.linkTwo.text}} \r\n        </span>\r\n        {{sectionContent.textBetweenLinksTwo}}\r\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkThree.route)\">\r\n            {{sectionContent.linkThree.text}}\r\n        </span>\r\n        {{sectionContent.textAfterLinks}}\r\n    </p>\r\n\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.cta-section{background-color:#c2d0de;display:grid;position:relative;border-radius:1.5rem;padding:2rem 1.5rem;width:100%;margin:3rem auto}.cta-section .svg-top-right{height:4.8rem;width:6.1rem;position:absolute;top:-1rem;right:-1rem}.cta-section .svg-bottom-left{height:5.1rem;width:5.3rem;position:absolute;bottom:-2rem;left:-1.5rem}.cta-section .cta-title{font-size:3.4rem;font-weight:700;color:#000}.cta-section .cta-description{font-size:2rem;font-weight:500}.cta-section .link-text{text-decoration:underline;font-weight:700;cursor:pointer;transition:color linear .2s}@media (hover: hover){.cta-section .link-text:hover{color:#155ed4}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionTwoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'call-to-action-section-two', template: "<div class=\"cta-section\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 61 48\" fill=\"none\" class=\"svg-top-right\">\r\n        <path\r\n            d=\"M16.8568 30.4924C-18.2522 24.3036 10.5419 3.88207 25.167 1.30326C39.7921 -1.27554 56.828 7.35401 58.4986 18.7386C60.1692 30.1232 64.3083 44.7867 49.6832 47.3655C35.058 49.9443 32.3641 34.7521 16.8568 30.4924Z\"\r\n            fill=\"#155ED4\" />\r\n    </svg>\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 53 51\" fill=\"none\" class=\"svg-bottom-left\">\r\n        <path\r\n            d=\"M39.4766 22.6779C69.5603 35.0664 40.8217 50.4221 27.4676 50.4221C14.1135 50.4221 0.41333 38.7801 0.750387 27.0924C1.08744 15.4046 -0.237166 0 13.1169 0C26.471 0 26.4324 15.6787 39.4766 22.6779Z\"\r\n            fill=\"#155ED4\" />\r\n    </svg>\r\n    <h1 class=\"cta-title\">{{sectionContent.title}}</h1>\r\n    <p class=\"cta-description\">\r\n        {{sectionContent.description}}\r\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkOne.route)\">\r\n            {{sectionContent.linkOne.text}}\r\n        </span>.\r\n        {{sectionContent.textBetweenLinksOne}}\r\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkTwo.route)\">\r\n            {{sectionContent.linkTwo.text}} \r\n        </span>\r\n        {{sectionContent.textBetweenLinksTwo}}\r\n        <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkThree.route)\">\r\n            {{sectionContent.linkThree.text}}\r\n        </span>\r\n        {{sectionContent.textAfterLinks}}\r\n    </p>\r\n\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.cta-section{background-color:#c2d0de;display:grid;position:relative;border-radius:1.5rem;padding:2rem 1.5rem;width:100%;margin:3rem auto}.cta-section .svg-top-right{height:4.8rem;width:6.1rem;position:absolute;top:-1rem;right:-1rem}.cta-section .svg-bottom-left{height:5.1rem;width:5.3rem;position:absolute;bottom:-2rem;left:-1.5rem}.cta-section .cta-title{font-size:3.4rem;font-weight:700;color:#000}.cta-section .cta-description{font-size:2rem;font-weight:500}.cta-section .link-text{text-decoration:underline;font-weight:700;cursor:pointer;transition:color linear .2s}@media (hover: hover){.cta-section .link-text:hover{color:#155ed4}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
+                type: Input
             }] } });
-class ValuePropsSectionComponent {
-    constructor() { }
-    ngOnInit() {
-        let i = 0;
-        this.selectedImage = this.sectionContent.paragraphs[0].imagePath;
-        i++;
-        for (let paragraph of this.sectionContent.paragraphs) {
-            paragraph.isClicked = false;
-        }
-        this.sectionContent.paragraphs[0].isClicked = true;
-    }
-    onChangeImage(imagePath, paragraphIndex) {
-        for (let paragraph of this.sectionContent.paragraphs) {
-            paragraph.isClicked = false;
-        }
-        this.selectedImage = imagePath;
-        this.sectionContent.paragraphs[paragraphIndex].isClicked = true;
-    }
-}
-ValuePropsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ValuePropsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropsSectionComponent, selector: "value-props-section", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\n    <div class=\"text-side\">\n        <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\n        </section-title>\n        <div class=\"value-prop-image\">\n            <img [src]=\"selectedImage\" alt=\"\">\n        </div>\n        <div class=\"paragraph-items\">\n            <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\n                <span class=\"value-prop-icon\">\n                    <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\n                <span class=\"paragraph-text\">\n                    {{paragraph.text}}\n                </span>\n            </p>\n        </div>\n    </div>\n    <div class=\"image-buttons-side\">\n        <img [src]=\"selectedImage\" alt=\"\">\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;justify-content:space-between;column-gap:2%;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:58%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{display:flex;flex-wrap:wrap;flex-direction:row;column-gap:1rem}.value-prop .text-side .paragraph{box-sizing:border-box;display:grid;grid-template-columns:5rem auto auto;margin:0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:40rem;height:-moz-fit-content;height:fit-content}@media only screen and (max-width: 725px){.value-prop .text-side .paragraph{width:100%;height:auto;padding:2rem 1rem}}.value-prop .text-side .paragraph:hover .paragraph-text,.value-prop .text-side .paragraph:hover .value-prop-icon{color:#32353b}.value-prop .text-side .paragraph .paragraph-text{color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .one-paragraph{width:100%}.value-prop .text-side .selected-paragraph .paragraph-text{color:#32353b}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.value-prop .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:40%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}.image-text-sort{flex-direction:row-reverse}@media only screen and (max-width: 56.25em){.image-text-sort:nth-child(even) .image-buttons-side{justify-self:center}}.text-image-sort{flex-direction:row}.paragraph-with-card .text-side{width:50%}.paragraph-with-card .text-side .paragraph{padding:1rem;margin:1rem 0rem;border-radius:.7rem;border:.2rem solid rgba(50,53,59,.1);min-height:max-content;height:15rem}.paragraph-with-card .text-side .paragraph:hover{border:.2rem solid #32353b}.paragraph-with-card .text-side .paragraph .value-prop-icon{text-align:center}.paragraph-with-card .text-side .selected-paragraph{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph .paragraph-text{color:#32353b}.paragraph-with-card .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.paragraph-with-card .text-side .selected-paragraph:hover{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'value-props-section', template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\n    <div class=\"text-side\">\n        <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\n        </section-title>\n        <div class=\"value-prop-image\">\n            <img [src]=\"selectedImage\" alt=\"\">\n        </div>\n        <div class=\"paragraph-items\">\n            <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\n                <span class=\"value-prop-icon\">\n                    <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\n                <span class=\"paragraph-text\">\n                    {{paragraph.text}}\n                </span>\n            </p>\n        </div>\n    </div>\n    <div class=\"image-buttons-side\">\n        <img [src]=\"selectedImage\" alt=\"\">\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;justify-content:space-between;column-gap:2%;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:58%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{display:flex;flex-wrap:wrap;flex-direction:row;column-gap:1rem}.value-prop .text-side .paragraph{box-sizing:border-box;display:grid;grid-template-columns:5rem auto auto;margin:0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:40rem;height:-moz-fit-content;height:fit-content}@media only screen and (max-width: 725px){.value-prop .text-side .paragraph{width:100%;height:auto;padding:2rem 1rem}}.value-prop .text-side .paragraph:hover .paragraph-text,.value-prop .text-side .paragraph:hover .value-prop-icon{color:#32353b}.value-prop .text-side .paragraph .paragraph-text{color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .one-paragraph{width:100%}.value-prop .text-side .selected-paragraph .paragraph-text{color:#32353b}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.value-prop .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:40%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}.image-text-sort{flex-direction:row-reverse}@media only screen and (max-width: 56.25em){.image-text-sort:nth-child(even) .image-buttons-side{justify-self:center}}.text-image-sort{flex-direction:row}.paragraph-with-card .text-side{width:50%}.paragraph-with-card .text-side .paragraph{padding:1rem;margin:1rem 0rem;border-radius:.7rem;border:.2rem solid rgba(50,53,59,.1);min-height:max-content;height:15rem}.paragraph-with-card .text-side .paragraph:hover{border:.2rem solid #32353b}.paragraph-with-card .text-side .paragraph .value-prop-icon{text-align:center}.paragraph-with-card .text-side .selected-paragraph{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph .paragraph-text{color:#32353b}.paragraph-with-card .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.paragraph-with-card .text-side .selected-paragraph:hover{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
-                type: Input
+class ValuePropsSectionComponent {
+    constructor() { }
+    ngOnInit() {
+        let i = 0;
+        this.selectedImage = this.sectionContent.paragraphs[0].imagePath;
+        i++;
+        for (let paragraph of this.sectionContent.paragraphs) {
+            paragraph.isClicked = false;
+        }
+        this.sectionContent.paragraphs[0].isClicked = true;
+    }
+    onChangeImage(imagePath, paragraphIndex) {
+        for (let paragraph of this.sectionContent.paragraphs) {
+            paragraph.isClicked = false;
+        }
+        this.selectedImage = imagePath;
+        this.sectionContent.paragraphs[paragraphIndex].isClicked = true;
+    }
+}
+ValuePropsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ValuePropsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropsSectionComponent, selector: "value-props-section", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\r\n    <div class=\"text-side\">\r\n        <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\r\n        </section-title>\r\n        <div class=\"value-prop-image\">\r\n            <img [src]=\"selectedImage\" alt=\"\">\r\n        </div>\r\n        <div class=\"paragraph-items\">\r\n            <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\r\n                <span class=\"value-prop-icon\">\r\n                    <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\r\n                <span class=\"paragraph-text\">\r\n                    {{paragraph.text}}\r\n                </span>\r\n            </p>\r\n        </div>\r\n    </div>\r\n    <div class=\"image-buttons-side\">\r\n        <img [src]=\"selectedImage\" alt=\"\">\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;justify-content:space-between;column-gap:2%;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:58%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{display:flex;flex-wrap:wrap;flex-direction:row;column-gap:1rem}.value-prop .text-side .paragraph{box-sizing:border-box;display:grid;grid-template-columns:5rem auto auto;margin:0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:40rem;height:-moz-fit-content;height:fit-content}@media only screen and (max-width: 725px){.value-prop .text-side .paragraph{width:100%;height:auto;padding:2rem 1rem}}.value-prop .text-side .paragraph:hover .paragraph-text,.value-prop .text-side .paragraph:hover .value-prop-icon{color:#32353b}.value-prop .text-side .paragraph .paragraph-text{color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .one-paragraph{width:100%}.value-prop .text-side .selected-paragraph .paragraph-text{color:#32353b}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.value-prop .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:40%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}.image-text-sort{flex-direction:row-reverse}@media only screen and (max-width: 56.25em){.image-text-sort:nth-child(even) .image-buttons-side{justify-self:center}}.text-image-sort{flex-direction:row}.paragraph-with-card .image-buttons-side,.paragraph-with-card .text-side{width:49%}.paragraph-with-card .text-side .paragraph{padding:1rem;margin:1rem 0rem;border-radius:.7rem;border:.2rem solid rgba(50,53,59,.1);min-height:max-content;height:15rem}.paragraph-with-card .text-side .paragraph:hover{border:.2rem solid #32353b}.paragraph-with-card .text-side .paragraph .value-prop-icon{text-align:center}.paragraph-with-card .text-side .selected-paragraph{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph .paragraph-text{color:#32353b}.paragraph-with-card .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.paragraph-with-card .text-side .selected-paragraph:hover{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'value-props-section', template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\r\n    <div class=\"text-side\">\r\n        <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\r\n        </section-title>\r\n        <div class=\"value-prop-image\">\r\n            <img [src]=\"selectedImage\" alt=\"\">\r\n        </div>\r\n        <div class=\"paragraph-items\">\r\n            <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\r\n                <span class=\"value-prop-icon\">\r\n                    <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\r\n                <span class=\"paragraph-text\">\r\n                    {{paragraph.text}}\r\n                </span>\r\n            </p>\r\n        </div>\r\n    </div>\r\n    <div class=\"image-buttons-side\">\r\n        <img [src]=\"selectedImage\" alt=\"\">\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;justify-content:space-between;column-gap:2%;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:58%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{display:flex;flex-wrap:wrap;flex-direction:row;column-gap:1rem}.value-prop .text-side .paragraph{box-sizing:border-box;display:grid;grid-template-columns:5rem auto auto;margin:0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:40rem;height:-moz-fit-content;height:fit-content}@media only screen and (max-width: 725px){.value-prop .text-side .paragraph{width:100%;height:auto;padding:2rem 1rem}}.value-prop .text-side .paragraph:hover .paragraph-text,.value-prop .text-side .paragraph:hover .value-prop-icon{color:#32353b}.value-prop .text-side .paragraph .paragraph-text{color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .one-paragraph{width:100%}.value-prop .text-side .selected-paragraph .paragraph-text{color:#32353b}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.value-prop .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:40%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}.image-text-sort{flex-direction:row-reverse}@media only screen and (max-width: 56.25em){.image-text-sort:nth-child(even) .image-buttons-side{justify-self:center}}.text-image-sort{flex-direction:row}.paragraph-with-card .image-buttons-side,.paragraph-with-card .text-side{width:49%}.paragraph-with-card .text-side .paragraph{padding:1rem;margin:1rem 0rem;border-radius:.7rem;border:.2rem solid rgba(50,53,59,.1);min-height:max-content;height:15rem}.paragraph-with-card .text-side .paragraph:hover{border:.2rem solid #32353b}.paragraph-with-card .text-side .paragraph .value-prop-icon{text-align:center}.paragraph-with-card .text-side .selected-paragraph{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph .paragraph-text{color:#32353b}.paragraph-with-card .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.paragraph-with-card .text-side .selected-paragraph:hover{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
+                type: Input
             }] } });
-class ChooseCountryWithFlagComponent {
-    constructor() {
-        this.change = new EventEmitter();
-        this.propagateChange = (_) => { };
-        this.propogateTouch = () => { };
-    }
-    ngOnInit() {
-    }
-    writeValue(value) {
-        this.selectedItem = value;
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.propogateTouch = fn;
-    }
-    updateBlur() {
-        this.propogateTouch();
-    }
-    onSelectionChanged($event) {
-        this.propagateChange(this.selectedItem);
-        this.change.emit($event);
-    }
-}
-ChooseCountryWithFlagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChooseCountryWithFlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChooseCountryWithFlagComponent, selector: "choose-country-with-flag", inputs: { items: "items" }, outputs: { change: "change" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
-            multi: true
-        }
-    ], ngImport: i0, template: "<div class=\"home\">\n    <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\n        bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\n        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n            <div class=\"ng-value-label label-container\">\n                <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n                {{item.code2}}\n            </div>\n            <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\n                \u00D7\n            </span> -->\n        </ng-template>\n        <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\n            <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n            <span class=\"country-name\">\n                {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\n            </span>\n        </ng-template>\n    </ng-select>\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'choose-country-with-flag', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
-                            multi: true
-                        }
-                    ], template: "<div class=\"home\">\n    <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\n        bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\n        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n            <div class=\"ng-value-label label-container\">\n                <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n                {{item.code2}}\n            </div>\n            <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\n                \u00D7\n            </span> -->\n        </ng-template>\n        <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\n            <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n            <span class=\"country-name\">\n                {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\n            </span>\n        </ng-template>\n    </ng-select>\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { items: [{
-                type: Input
-            }], change: [{
-                type: Output
+class ChooseCountryWithFlagComponent {
+    constructor() {
+        this.change = new EventEmitter();
+        this.propagateChange = (_) => { };
+        this.propogateTouch = () => { };
+    }
+    ngOnInit() {
+    }
+    writeValue(value) {
+        this.selectedItem = value;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.propogateTouch = fn;
+    }
+    updateBlur() {
+        this.propogateTouch();
+    }
+    onSelectionChanged($event) {
+        this.propagateChange(this.selectedItem);
+        this.change.emit($event);
+    }
+}
+ChooseCountryWithFlagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChooseCountryWithFlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChooseCountryWithFlagComponent, selector: "choose-country-with-flag", inputs: { items: "items" }, outputs: { change: "change" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<div class=\"home\">\r\n    <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\r\n        bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\r\n        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <div class=\"ng-value-label label-container\">\r\n                <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\r\n                {{item.code2}}\r\n            </div>\r\n            <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n                \u00D7\r\n            </span> -->\r\n        </ng-template>\r\n        <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\r\n            <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\r\n            <span class=\"country-name\">\r\n                {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\r\n            </span>\r\n        </ng-template>\r\n    </ng-select>\r\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'choose-country-with-flag', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"home\">\r\n    <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\r\n        bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\r\n        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <div class=\"ng-value-label label-container\">\r\n                <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\r\n                {{item.code2}}\r\n            </div>\r\n            <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n                \u00D7\r\n            </span> -->\r\n        </ng-template>\r\n        <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\r\n            <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\r\n            <span class=\"country-name\">\r\n                {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\r\n            </span>\r\n        </ng-template>\r\n    </ng-select>\r\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { items: [{
+                type: Input
+            }], change: [{
+                type: Output
             }] } });
-class ContactUsPageComponent {
-    constructor(dialog, breakpointObserver, fb) {
-        this.dialog = dialog;
-        this.breakpointObserver = breakpointObserver;
-        this.fb = fb;
-        this.subjects = [];
-        this.scrollMemberNumber = 2;
-        this.form = this.fb.group({
-            firstName: new FormControl(null),
-            lastName: new FormControl(null),
-            companyName: new FormControl(null),
-            email: new FormControl(null),
-            country: new FormControl(null),
-            phoneNumber: new FormControl(null),
-            subject: new FormControl(null),
-            message: new FormControl(null),
-        });
-    }
-    ngOnInit() {
-        this.setCurrentLocation();
-        this.breakpointObserver.observe([
-            "(max-width: 1200px) and (min-width:1076px)", "(max-width: 1075px) and (min-width:651px)",
-            "(max-width: 650px)"
-        ]).subscribe((result) => {
-            if (result.breakpoints['(max-width: 1200px) and (min-width:1076px)']) {
-                this.isUnderTabRange = true;
-                this.isTabletSize = true;
-                this.membersToShow = 3;
-                this.scrollMemberNumber = 2;
-            }
-            else if (result.breakpoints['(max-width: 1075px) and (min-width:651px)']) {
-                this.isUnderTabRange = true;
-                this.membersToShow = 2;
-                this.scrollMemberNumber = 1;
-                this.isTabletSize = true;
-            }
-            else if (result.breakpoints['(max-width: 650px)']) {
-                this.isUnderTabRange = true;
-                this.membersToShow = 1;
-                this.scrollMemberNumber = 1;
-                this.isTabletSize = true;
-            }
-            else {
-                this.isTabletSize = false;
-                this.isUnderTabRange = false;
-            }
-        });
-    }
-    get firstName() {
-        return this.form.get('firstName');
-    }
-    get lastName() {
-        return this.form.get('lastName');
-    }
-    get companyName() {
-        return this.form.get('companyName');
-    }
-    get email() {
-        return this.form.get('email');
-    }
-    get country() {
-        return this.form.get('country');
-    }
-    get phoneNumber() {
-        return this.form.get('phoneNumber');
-    }
-    get subject() {
-        return this.form.get('subject');
-    }
-    get message() {
-        return this.form.get('message');
-    }
-    onClickSubmit() {
-        // this._ContactUsService.createContactUs(this.form.value).subscribe({
-        //   next: (response) => {
-        //     console.log("Contact Us Message Created", this.form.value);
-        //     this.openDialog();
-        //   },
-        //   error: (error) => console.error("error", error)
-        // })
-    }
-    // Get Current Location Coordinates
-    setCurrentLocation() {
-        if ('geolocation' in navigator) {
-            navigator.geolocation.getCurrentPosition((position) => {
-                this.latitude = position.coords.latitude;
-                this.longitude = position.coords.longitude;
-                this.zoom = 15;
-            });
-        }
-    }
-    openDialog() {
-        const dialogRef = this.dialog.open(SuccessMessageDialogComponent);
-        dialogRef.afterClosed().subscribe(() => {
-            this.form.reset();
-        });
-    }
-    getSelectedOptionValue($event) {
-        this.selectedCode = $event.phone;
-    }
-}
-ContactUsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, deps: [{ token: i1$2.MatDialog }, { token: i1$1.BreakpointObserver }, { token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ContactUsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContactUsPageComponent, selector: "contact-us-page", inputs: { subjects: "subjects", contactUsPageData: "contactUsPageData", apiPath: "apiPath", items: "items" }, ngImport: i0, template: "<div class=\"page\">\n    <div class=\"contact-us\">\n        <div class=\"left-side\">\n            <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\n            <div class=\"img-title\">\n                {{contactUsPageData.imageTitle}}\n            </div>\n            <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\n                <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\n                <div class=\"img-description\">{{contactUsPageData.imageDescription}}\n                </div>\n                <div class=\"social-media-icons\">\n                    <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\n                </div>\n            </div>\n        </div>\n        <div class=\"right-side\">\n            <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\n            <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\n            <div class=\"content\">\n                <div class=\"message-box\">\n                    <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\n                        <div class=\"full-name-area\">\n                            <div class=\"first-name\">\n                                <span class=\"fields-labels\">First Name*</span>\n                                <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\n                            </div>\n                            <div class=\"last-name\">\n                                <span class=\"fields-labels\">Last Name*</span>\n                                <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\n                            </div>\n                        </div>\n                        <span class=\"fields-labels\">Company Name*</span>\n                        <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\n                        <span class=\"fields-labels\">Email*</span>\n                        <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\n                        <span class=\"fields-labels\">Phone Number</span>\n                        <div class=\"phone-number-section\">\n\n                            <div class=\"countries-list\">\n                                <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\n                            </div>\n                            <span class=\"code-section\">\n                                <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n                                <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\n                            </span>\n                            <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\n                        </div>\n                        <div class=\"subject\">\n                            <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\n                            </ng-select>\n                        </div>\n                        <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\n\n\n                        </textarea>\n                        <div class=\"actions\">\n                            <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\n                                Submit\n                            </button>\n                        </div>\n                    </form>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- <div class=\"our-locations-section\">\n        <div class=\"locations-content\">\n            <div class=\"headline\">\n                {{contactUsPageData.locations.headline}}\n            </div>\n            <div class=\"title\">\n                {{contactUsPageData.locations.title}}\n            </div>\n            <div class=\"lines-img\">\n                <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\n            </div>\n            <div class=\"subtitle\">\n                {{contactUsPageData.locations.subtitle}}\n            </div>\n            <div class=\"addresses\">\n                <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\n                    <div class=\"address-header\">\n                        <div class=\"icon\">\n                            <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\n                        </div>\n                        <div class=\"location-name\">\n                            {{address.name}}\n                        </div>\n                    </div>\n                    <div class=\"building\">\n                        {{address.building}}\n                    </div>\n                    <div class=\"location-area\">\n                        {{address.locationArea}}\n                    </div>\n                    <div class=\"hours\">\n                        <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n                        {{address.hours}}\n                    </div>\n                    <div class=\"cellular-number\">\n                        <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n                        {{address.phoneNumber}}\n                    </div>\n                </div>\n                <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\n                    [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\n                    [circular]=\"true\">\n                    <ng-template let-address pTemplate=\"item\">\n                        <div class=\"address\">\n                            <div class=\"address-header\">\n                                <div class=\"icon\">\n                                    <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\n                                </div>\n                                <div class=\"location-name\">\n                                    {{address.name}}\n                                </div>\n                            </div>\n                            <div class=\"building\">\n                                {{address.building}}\n                            </div>\n                            <div class=\"location-area\">\n                                {{address.locationArea}}\n                            </div>\n                            <div class=\"hours\">\n                                <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n                                {{address.hours}}\n                            </div>\n                            <div class=\"cellular-number\">\n                                <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n                                {{address.phoneNumber}}\n                            </div>\n                        </div>\n                    </ng-template>\n                </p-carousel>\n            </div>\n        </div>\n    </div> -->\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;height:100%;position:relative;padding:2rem}.page .contact-us{box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:1.5rem;margin:auto;width:55%;height:100%;display:grid;grid-template-columns:50% 50%;box-sizing:border-box;margin:5rem auto 15rem}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .right-side{padding:2rem 4rem;display:grid;grid-template-rows:auto auto auto auto;row-gap:1rem}.page .contact-us .right-side .phone-number-section{position:relative;display:flex;gap:.5rem;margin:.5rem 0rem}.page .contact-us .right-side .phone-number-section .countries-list{width:30%}.page .contact-us .right-side .phone-number-section .code-section{width:15%;margin-right:0rem;align-self:center;color:#000;position:relative;display:flex}.page .contact-us .right-side .phone-number-section .code-section *{color:#838b91}.page .contact-us .right-side .phone-number-section .code{text-align:center;height:4rem;width:100%;padding-left:2rem;margin-right:0vh}.page .contact-us .right-side .phone-number-section .code::placeholder{padding-left:1rem}.page .contact-us .right-side .phone-number-section fa-icon{align-self:center;position:absolute;left:.5rem;z-index:2}.page .contact-us .right-side .phone-number-section .phone-num-input{width:55%;margin-right:0rem;height:4rem}.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-outer-spin-button,.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page .contact-us .right-side .title{font-weight:800;color:#3d3d3d}.page .contact-us .right-side .subtitle{font-weight:500;font-size:1.9rem;color:#3d3d3d;padding:1rem 0rem}.page .contact-us .right-side .content{display:grid;grid-template-rows:auto auto auto auto}.page .contact-us .right-side .content .message-box{grid-row:1/span 2}.page .contact-us .right-side .content .message-box .text-area{height:15rem;resize:none;border-radius:.5rem;border:rgb(190,188,188) .1rem solid}.page .contact-us .right-side .content .message-box .text-area::placeholder{font-weight:500;color:#9e9e9e;font-size:1.2rem}.page .contact-us .right-side .content .message-box .text-area:focus-visible{outline:none}.page .contact-us .right-side .content .message-box .actions{margin:1rem 0rem}.page .contact-us .right-side .content .message-box .actions button{background-color:#155ed4;font-weight:500;font-size:1.4rem;border-radius:.3rem}.page .contact-us .right-side .content .message-box .input,.page .contact-us .right-side .content .message-box textarea{margin:1rem 0rem;width:100%;background-color:#fff}.page .contact-us .left-side{height:100%;position:relative;color:#fff}.page .contact-us .left-side .img-title{position:absolute;top:5%;left:calc(2% + 2rem);font-weight:700;font-size:3.6rem}.page .contact-us .left-side .bottom-img-side{position:absolute;top:75%;left:calc(2% + 2rem);margin:2rem 9rem 0rem 0rem}.page .contact-us .left-side .bottom-img-side .logo{width:20rem;height:4rem}.page .contact-us .left-side .bottom-img-side .logo img{width:10rem;height:4rem}.page .contact-us .left-side .bottom-img-side .img-description{margin-top:2rem}.page .contact-us .left-side .bg-image{width:100%;height:100%;border-radius:1.5rem 0rem 0rem 1.5rem}@media only screen and (max-width: 75em){.page .contact-us .left-side .bg-image{border-radius:1.5rem}}.page .carousel{display:none}.page .flexy{display:flex}.page .our-locations-section{width:100%;background-color:#26518b;padding:1.5rem;color:#fff}.page .our-locations-section .locations-content{width:95%;margin:auto}.page .our-locations-section .locations-content .headline{font-weight:500;font-size:2rem}.page .our-locations-section .locations-content .title{font-weight:700;padding:1rem 0rem;font-size:4rem}.page .our-locations-section .locations-content .subtitle{font-weight:500;padding:1rem 0rem}.page .our-locations-section .locations-content .lines-img{padding:1rem 0rem}.page .our-locations-section .locations-content .addresses{width:100%;display:flex;flex-direction:row;column-gap:2%}.page .our-locations-section .locations-content .addresses .address{flex-direction:column;row-gap:.7rem;width:22%;padding:1.5rem 0rem}.page .our-locations-section .locations-content .addresses .address .address-header{display:flex;flex-direction:column;row-gap:.7rem}.page .our-locations-section .locations-content .addresses .address .address-header img{width:3rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:1.9rem;font-weight:500}.page .our-locations-section .locations-content .addresses .address .location-area{width:95%}@media only screen and (min-width: 112.5em){.page .title{font-size:4.5rem}.page .contact-us{width:65%}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100%}}@media only screen and (max-width: 112.5em){.page .contact-us{width:75%;box-sizing:border-box}.page .contact-us .title{font-size:3.4rem}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100rem;border-radius:0rem 1.5rem 1.5rem 0rem}}@media only screen and (max-width: 112.5em) and (max-width: 1350px){.page .contact-us{width:80%}}@media only screen and (max-width: 112.5em) and (max-width: 1280px){.page .contact-us{width:86%}}@media only screen and (max-width: 1401px) and (min-width: 1201px){.page .our-locations-section .locations-content{width:auto}}@media only screen and (max-width: 75em){.page .contact-us{display:flex;flex-direction:column;top:3vh;width:100%;height:107rem;padding:5vh 2rem 10vh 2rem}.page .contact-us .right-side{padding:3rem 2rem;display:flex;flex-direction:column;height:80%}.page .contact-us .right-side .mat-mdc-card-content{display:block;padding:0 .2rem}.page .contact-us .left-side{height:25%}.page .contact-us .left-side .img-title{color:#fff}.page .contact-us .left-side img{height:100%;object-position:0rem -13rem;border-radius:1.5rem}.page .carousel{display:block;width:100%}.page .flexy{display:none}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{font-size:1.8rem;width:31rem;margin:auto;text-align:center;background-color:#fff;color:#26518b;height:27rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2rem;margin-bottom:1rem}.page .mat-mdc-card{box-shadow:none}}@media only screen and (max-width: 37.5em){.page .contact-us{height:auto;padding:5vh 2rem 0vh 2rem}.page .contact-us .full-name-area{display:block}.page .contact-us .first-name,.page .contact-us .last-name{width:100%}.page .contact-us .left-side{height:12rem}.page .contact-us .left-side .img-title{font-weight:600;font-size:3rem}.page .contact-us .left-side img{object-position:0rem -5rem}.page .contact-us .right-side .phone-number-section{flex-wrap:wrap}.page .contact-us .right-side .phone-number-section .countries-list{width:100%}.page .contact-us .right-side .phone-number-section .code-section{width:9rem}.page .contact-us .right-side .phone-number-section .phone-num-input{width:calc(100% - 9.5rem)}.page .our-locations-section .locations-content .addresses .address{width:27rem}}@media only screen and (max-width: 400px){.page .contact-us .left-side{height:10rem}.page .contact-us .left-side .img-title{font-weight:500;font-size:2.6rem}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{width:24.5rem;height:28rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2.2rem;margin-bottom:1rem;padding:0rem .4rem}.page .our-locations-section .locations-content .addresses .address .building,.page .our-locations-section .locations-content .addresses .address .location-area{padding:0rem .4rem}}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus{outline:0 none;box-shadow:0 0 0 .2rem transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next{width:4rem;height:4rem;background-color:transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-icon{color:#fff;width:2rem;height:2rem}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#fff;width:2.7rem;transition:all ease-in-out .1s}.page ::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: "component", type: i2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }, { kind: "component", type: ChooseCountryWithFlagComponent, selector: "choose-country-with-flag", inputs: ["items"], outputs: ["change"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'contact-us-page', template: "<div class=\"page\">\n    <div class=\"contact-us\">\n        <div class=\"left-side\">\n            <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\n            <div class=\"img-title\">\n                {{contactUsPageData.imageTitle}}\n            </div>\n            <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\n                <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\n                <div class=\"img-description\">{{contactUsPageData.imageDescription}}\n                </div>\n                <div class=\"social-media-icons\">\n                    <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\n                </div>\n            </div>\n        </div>\n        <div class=\"right-side\">\n            <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\n            <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\n            <div class=\"content\">\n                <div class=\"message-box\">\n                    <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\n                        <div class=\"full-name-area\">\n                            <div class=\"first-name\">\n                                <span class=\"fields-labels\">First Name*</span>\n                                <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\n                            </div>\n                            <div class=\"last-name\">\n                                <span class=\"fields-labels\">Last Name*</span>\n                                <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\n                            </div>\n                        </div>\n                        <span class=\"fields-labels\">Company Name*</span>\n                        <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\n                        <span class=\"fields-labels\">Email*</span>\n                        <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\n                        <span class=\"fields-labels\">Phone Number</span>\n                        <div class=\"phone-number-section\">\n\n                            <div class=\"countries-list\">\n                                <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\n                            </div>\n                            <span class=\"code-section\">\n                                <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n                                <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\n                            </span>\n                            <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\n                        </div>\n                        <div class=\"subject\">\n                            <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\n                            </ng-select>\n                        </div>\n                        <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\n\n\n                        </textarea>\n                        <div class=\"actions\">\n                            <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\n                                Submit\n                            </button>\n                        </div>\n                    </form>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- <div class=\"our-locations-section\">\n        <div class=\"locations-content\">\n            <div class=\"headline\">\n                {{contactUsPageData.locations.headline}}\n            </div>\n            <div class=\"title\">\n                {{contactUsPageData.locations.title}}\n            </div>\n            <div class=\"lines-img\">\n                <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\n            </div>\n            <div class=\"subtitle\">\n                {{contactUsPageData.locations.subtitle}}\n            </div>\n            <div class=\"addresses\">\n                <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\n                    <div class=\"address-header\">\n                        <div class=\"icon\">\n                            <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\n                        </div>\n                        <div class=\"location-name\">\n                            {{address.name}}\n                        </div>\n                    </div>\n                    <div class=\"building\">\n                        {{address.building}}\n                    </div>\n                    <div class=\"location-area\">\n                        {{address.locationArea}}\n                    </div>\n                    <div class=\"hours\">\n                        <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n                        {{address.hours}}\n                    </div>\n                    <div class=\"cellular-number\">\n                        <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n                        {{address.phoneNumber}}\n                    </div>\n                </div>\n                <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\n                    [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\n                    [circular]=\"true\">\n                    <ng-template let-address pTemplate=\"item\">\n                        <div class=\"address\">\n                            <div class=\"address-header\">\n                                <div class=\"icon\">\n                                    <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\n                                </div>\n                                <div class=\"location-name\">\n                                    {{address.name}}\n                                </div>\n                            </div>\n                            <div class=\"building\">\n                                {{address.building}}\n                            </div>\n                            <div class=\"location-area\">\n                                {{address.locationArea}}\n                            </div>\n                            <div class=\"hours\">\n                                <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n                                {{address.hours}}\n                            </div>\n                            <div class=\"cellular-number\">\n                                <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n                                {{address.phoneNumber}}\n                            </div>\n                        </div>\n                    </ng-template>\n                </p-carousel>\n            </div>\n        </div>\n    </div> -->\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;height:100%;position:relative;padding:2rem}.page .contact-us{box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:1.5rem;margin:auto;width:55%;height:100%;display:grid;grid-template-columns:50% 50%;box-sizing:border-box;margin:5rem auto 15rem}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .right-side{padding:2rem 4rem;display:grid;grid-template-rows:auto auto auto auto;row-gap:1rem}.page .contact-us .right-side .phone-number-section{position:relative;display:flex;gap:.5rem;margin:.5rem 0rem}.page .contact-us .right-side .phone-number-section .countries-list{width:30%}.page .contact-us .right-side .phone-number-section .code-section{width:15%;margin-right:0rem;align-self:center;color:#000;position:relative;display:flex}.page .contact-us .right-side .phone-number-section .code-section *{color:#838b91}.page .contact-us .right-side .phone-number-section .code{text-align:center;height:4rem;width:100%;padding-left:2rem;margin-right:0vh}.page .contact-us .right-side .phone-number-section .code::placeholder{padding-left:1rem}.page .contact-us .right-side .phone-number-section fa-icon{align-self:center;position:absolute;left:.5rem;z-index:2}.page .contact-us .right-side .phone-number-section .phone-num-input{width:55%;margin-right:0rem;height:4rem}.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-outer-spin-button,.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page .contact-us .right-side .title{font-weight:800;color:#3d3d3d}.page .contact-us .right-side .subtitle{font-weight:500;font-size:1.9rem;color:#3d3d3d;padding:1rem 0rem}.page .contact-us .right-side .content{display:grid;grid-template-rows:auto auto auto auto}.page .contact-us .right-side .content .message-box{grid-row:1/span 2}.page .contact-us .right-side .content .message-box .text-area{height:15rem;resize:none;border-radius:.5rem;border:rgb(190,188,188) .1rem solid}.page .contact-us .right-side .content .message-box .text-area::placeholder{font-weight:500;color:#9e9e9e;font-size:1.2rem}.page .contact-us .right-side .content .message-box .text-area:focus-visible{outline:none}.page .contact-us .right-side .content .message-box .actions{margin:1rem 0rem}.page .contact-us .right-side .content .message-box .actions button{background-color:#155ed4;font-weight:500;font-size:1.4rem;border-radius:.3rem}.page .contact-us .right-side .content .message-box .input,.page .contact-us .right-side .content .message-box textarea{margin:1rem 0rem;width:100%;background-color:#fff}.page .contact-us .left-side{height:100%;position:relative;color:#fff}.page .contact-us .left-side .img-title{position:absolute;top:5%;left:calc(2% + 2rem);font-weight:700;font-size:3.6rem}.page .contact-us .left-side .bottom-img-side{position:absolute;top:75%;left:calc(2% + 2rem);margin:2rem 9rem 0rem 0rem}.page .contact-us .left-side .bottom-img-side .logo{width:20rem;height:4rem}.page .contact-us .left-side .bottom-img-side .logo img{width:10rem;height:4rem}.page .contact-us .left-side .bottom-img-side .img-description{margin-top:2rem}.page .contact-us .left-side .bg-image{width:100%;height:100%;border-radius:1.5rem 0rem 0rem 1.5rem}@media only screen and (max-width: 75em){.page .contact-us .left-side .bg-image{border-radius:1.5rem}}.page .carousel{display:none}.page .flexy{display:flex}.page .our-locations-section{width:100%;background-color:#26518b;padding:1.5rem;color:#fff}.page .our-locations-section .locations-content{width:95%;margin:auto}.page .our-locations-section .locations-content .headline{font-weight:500;font-size:2rem}.page .our-locations-section .locations-content .title{font-weight:700;padding:1rem 0rem;font-size:4rem}.page .our-locations-section .locations-content .subtitle{font-weight:500;padding:1rem 0rem}.page .our-locations-section .locations-content .lines-img{padding:1rem 0rem}.page .our-locations-section .locations-content .addresses{width:100%;display:flex;flex-direction:row;column-gap:2%}.page .our-locations-section .locations-content .addresses .address{flex-direction:column;row-gap:.7rem;width:22%;padding:1.5rem 0rem}.page .our-locations-section .locations-content .addresses .address .address-header{display:flex;flex-direction:column;row-gap:.7rem}.page .our-locations-section .locations-content .addresses .address .address-header img{width:3rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:1.9rem;font-weight:500}.page .our-locations-section .locations-content .addresses .address .location-area{width:95%}@media only screen and (min-width: 112.5em){.page .title{font-size:4.5rem}.page .contact-us{width:65%}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100%}}@media only screen and (max-width: 112.5em){.page .contact-us{width:75%;box-sizing:border-box}.page .contact-us .title{font-size:3.4rem}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100rem;border-radius:0rem 1.5rem 1.5rem 0rem}}@media only screen and (max-width: 112.5em) and (max-width: 1350px){.page .contact-us{width:80%}}@media only screen and (max-width: 112.5em) and (max-width: 1280px){.page .contact-us{width:86%}}@media only screen and (max-width: 1401px) and (min-width: 1201px){.page .our-locations-section .locations-content{width:auto}}@media only screen and (max-width: 75em){.page .contact-us{display:flex;flex-direction:column;top:3vh;width:100%;height:107rem;padding:5vh 2rem 10vh 2rem}.page .contact-us .right-side{padding:3rem 2rem;display:flex;flex-direction:column;height:80%}.page .contact-us .right-side .mat-mdc-card-content{display:block;padding:0 .2rem}.page .contact-us .left-side{height:25%}.page .contact-us .left-side .img-title{color:#fff}.page .contact-us .left-side img{height:100%;object-position:0rem -13rem;border-radius:1.5rem}.page .carousel{display:block;width:100%}.page .flexy{display:none}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{font-size:1.8rem;width:31rem;margin:auto;text-align:center;background-color:#fff;color:#26518b;height:27rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2rem;margin-bottom:1rem}.page .mat-mdc-card{box-shadow:none}}@media only screen and (max-width: 37.5em){.page .contact-us{height:auto;padding:5vh 2rem 0vh 2rem}.page .contact-us .full-name-area{display:block}.page .contact-us .first-name,.page .contact-us .last-name{width:100%}.page .contact-us .left-side{height:12rem}.page .contact-us .left-side .img-title{font-weight:600;font-size:3rem}.page .contact-us .left-side img{object-position:0rem -5rem}.page .contact-us .right-side .phone-number-section{flex-wrap:wrap}.page .contact-us .right-side .phone-number-section .countries-list{width:100%}.page .contact-us .right-side .phone-number-section .code-section{width:9rem}.page .contact-us .right-side .phone-number-section .phone-num-input{width:calc(100% - 9.5rem)}.page .our-locations-section .locations-content .addresses .address{width:27rem}}@media only screen and (max-width: 400px){.page .contact-us .left-side{height:10rem}.page .contact-us .left-side .img-title{font-weight:500;font-size:2.6rem}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{width:24.5rem;height:28rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2.2rem;margin-bottom:1rem;padding:0rem .4rem}.page .our-locations-section .locations-content .addresses .address .building,.page .our-locations-section .locations-content .addresses .address .location-area{padding:0rem .4rem}}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus{outline:0 none;box-shadow:0 0 0 .2rem transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next{width:4rem;height:4rem;background-color:transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-icon{color:#fff;width:2rem;height:2rem}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#fff;width:2.7rem;transition:all ease-in-out .1s}.page ::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"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }, { type: i1$1.BreakpointObserver }, { type: i3$2.FormBuilder }]; }, propDecorators: { subjects: [{
-                type: Input
-            }], contactUsPageData: [{
-                type: Input
-            }], apiPath: [{
-                type: Input
-            }], items: [{
-                type: Input
+class ContactUsPageComponent {
+    constructor(dialog, breakpointObserver, fb) {
+        this.dialog = dialog;
+        this.breakpointObserver = breakpointObserver;
+        this.fb = fb;
+        this.subjects = [];
+        this.scrollMemberNumber = 2;
+        this.form = this.fb.group({
+            firstName: new FormControl(null),
+            lastName: new FormControl(null),
+            companyName: new FormControl(null),
+            email: new FormControl(null),
+            country: new FormControl(null),
+            phoneNumber: new FormControl(null),
+            subject: new FormControl(null),
+            message: new FormControl(null),
+        });
+    }
+    ngOnInit() {
+        this.setCurrentLocation();
+        this.breakpointObserver.observe([
+            "(max-width: 1200px) and (min-width:1076px)", "(max-width: 1075px) and (min-width:651px)",
+            "(max-width: 650px)"
+        ]).subscribe((result) => {
+            if (result.breakpoints['(max-width: 1200px) and (min-width:1076px)']) {
+                this.isUnderTabRange = true;
+                this.isTabletSize = true;
+                this.membersToShow = 3;
+                this.scrollMemberNumber = 2;
+            }
+            else if (result.breakpoints['(max-width: 1075px) and (min-width:651px)']) {
+                this.isUnderTabRange = true;
+                this.membersToShow = 2;
+                this.scrollMemberNumber = 1;
+                this.isTabletSize = true;
+            }
+            else if (result.breakpoints['(max-width: 650px)']) {
+                this.isUnderTabRange = true;
+                this.membersToShow = 1;
+                this.scrollMemberNumber = 1;
+                this.isTabletSize = true;
+            }
+            else {
+                this.isTabletSize = false;
+                this.isUnderTabRange = false;
+            }
+        });
+    }
+    get firstName() {
+        return this.form.get('firstName');
+    }
+    get lastName() {
+        return this.form.get('lastName');
+    }
+    get companyName() {
+        return this.form.get('companyName');
+    }
+    get email() {
+        return this.form.get('email');
+    }
+    get country() {
+        return this.form.get('country');
+    }
+    get phoneNumber() {
+        return this.form.get('phoneNumber');
+    }
+    get subject() {
+        return this.form.get('subject');
+    }
+    get message() {
+        return this.form.get('message');
+    }
+    onClickSubmit() {
+        // this._ContactUsService.createContactUs(this.form.value).subscribe({
+        //   next: (response) => {
+        //     console.log("Contact Us Message Created", this.form.value);
+        //     this.openDialog();
+        //   },
+        //   error: (error) => console.error("error", error)
+        // })
+    }
+    // Get Current Location Coordinates
+    setCurrentLocation() {
+        if ('geolocation' in navigator) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                this.latitude = position.coords.latitude;
+                this.longitude = position.coords.longitude;
+                this.zoom = 15;
+            });
+        }
+    }
+    openDialog() {
+        const dialogRef = this.dialog.open(SuccessMessageDialogComponent);
+        dialogRef.afterClosed().subscribe(() => {
+            this.form.reset();
+        });
+    }
+    getSelectedOptionValue($event) {
+        this.selectedCode = $event.phone;
+    }
+}
+ContactUsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, deps: [{ token: i1$2.MatDialog }, { token: i1$1.BreakpointObserver }, { token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ContactUsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContactUsPageComponent, selector: "contact-us-page", inputs: { subjects: "subjects", contactUsPageData: "contactUsPageData", apiPath: "apiPath", items: "items" }, ngImport: i0, template: "<div class=\"page\">\r\n    <div class=\"contact-us\">\r\n        <div class=\"left-side\">\r\n            <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\r\n            <div class=\"img-title\">\r\n                {{contactUsPageData.imageTitle}}\r\n            </div>\r\n            <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\r\n                <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\r\n                <div class=\"img-description\">{{contactUsPageData.imageDescription}}\r\n                </div>\r\n                <div class=\"social-media-icons\">\r\n                    <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right-side\">\r\n            <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\r\n            <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\r\n            <div class=\"content\">\r\n                <div class=\"message-box\">\r\n                    <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\r\n                        <div class=\"full-name-area\">\r\n                            <div class=\"first-name\">\r\n                                <span class=\"fields-labels\">First Name*</span>\r\n                                <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\r\n                            </div>\r\n                            <div class=\"last-name\">\r\n                                <span class=\"fields-labels\">Last Name*</span>\r\n                                <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\r\n                            </div>\r\n                        </div>\r\n                        <span class=\"fields-labels\">Company Name*</span>\r\n                        <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\r\n                        <span class=\"fields-labels\">Email*</span>\r\n                        <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\r\n                        <span class=\"fields-labels\">Phone Number</span>\r\n                        <div class=\"phone-number-section\">\r\n\r\n                            <div class=\"countries-list\">\r\n                                <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\r\n                            </div>\r\n                            <span class=\"code-section\">\r\n                                <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n                                <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\r\n                            </span>\r\n                            <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\r\n                        </div>\r\n                        <div class=\"subject\">\r\n                            <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\r\n                            </ng-select>\r\n                        </div>\r\n                        <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\r\n\r\n\r\n                        </textarea>\r\n                        <div class=\"actions\">\r\n                            <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\r\n                                Submit\r\n                            </button>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- <div class=\"our-locations-section\">\r\n        <div class=\"locations-content\">\r\n            <div class=\"headline\">\r\n                {{contactUsPageData.locations.headline}}\r\n            </div>\r\n            <div class=\"title\">\r\n                {{contactUsPageData.locations.title}}\r\n            </div>\r\n            <div class=\"lines-img\">\r\n                <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\r\n            </div>\r\n            <div class=\"subtitle\">\r\n                {{contactUsPageData.locations.subtitle}}\r\n            </div>\r\n            <div class=\"addresses\">\r\n                <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\r\n                    <div class=\"address-header\">\r\n                        <div class=\"icon\">\r\n                            <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\r\n                        </div>\r\n                        <div class=\"location-name\">\r\n                            {{address.name}}\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"building\">\r\n                        {{address.building}}\r\n                    </div>\r\n                    <div class=\"location-area\">\r\n                        {{address.locationArea}}\r\n                    </div>\r\n                    <div class=\"hours\">\r\n                        <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n                        {{address.hours}}\r\n                    </div>\r\n                    <div class=\"cellular-number\">\r\n                        <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n                        {{address.phoneNumber}}\r\n                    </div>\r\n                </div>\r\n                <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\r\n                    [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\r\n                    [circular]=\"true\">\r\n                    <ng-template let-address pTemplate=\"item\">\r\n                        <div class=\"address\">\r\n                            <div class=\"address-header\">\r\n                                <div class=\"icon\">\r\n                                    <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\r\n                                </div>\r\n                                <div class=\"location-name\">\r\n                                    {{address.name}}\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"building\">\r\n                                {{address.building}}\r\n                            </div>\r\n                            <div class=\"location-area\">\r\n                                {{address.locationArea}}\r\n                            </div>\r\n                            <div class=\"hours\">\r\n                                <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n                                {{address.hours}}\r\n                            </div>\r\n                            <div class=\"cellular-number\">\r\n                                <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n                                {{address.phoneNumber}}\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-carousel>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;height:100%;position:relative;padding:2rem}.page .contact-us{box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:1.5rem;margin:auto;width:55%;height:100%;display:grid;grid-template-columns:50% 50%;box-sizing:border-box;margin:5rem auto 15rem}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .right-side{padding:2rem 4rem;display:grid;grid-template-rows:auto auto auto auto;row-gap:1rem}.page .contact-us .right-side .phone-number-section{position:relative;display:flex;gap:.5rem;margin:.5rem 0rem}.page .contact-us .right-side .phone-number-section .countries-list{width:30%}.page .contact-us .right-side .phone-number-section .code-section{width:15%;margin-right:0rem;align-self:center;color:#000;position:relative;display:flex}.page .contact-us .right-side .phone-number-section .code-section *{color:#838b91}.page .contact-us .right-side .phone-number-section .code{text-align:center;height:4rem;width:100%;padding-left:2rem;margin-right:0vh}.page .contact-us .right-side .phone-number-section .code::placeholder{padding-left:1rem}.page .contact-us .right-side .phone-number-section fa-icon{align-self:center;position:absolute;left:.5rem;z-index:2}.page .contact-us .right-side .phone-number-section .phone-num-input{width:55%;margin-right:0rem;height:4rem}.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-outer-spin-button,.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page .contact-us .right-side .title{font-weight:800;color:#3d3d3d}.page .contact-us .right-side .subtitle{font-weight:500;font-size:1.9rem;color:#3d3d3d;padding:1rem 0rem}.page .contact-us .right-side .content{display:grid;grid-template-rows:auto auto auto auto}.page .contact-us .right-side .content .message-box{grid-row:1/span 2}.page .contact-us .right-side .content .message-box .text-area{height:15rem;resize:none;border-radius:.5rem;border:rgb(190,188,188) .1rem solid}.page .contact-us .right-side .content .message-box .text-area::placeholder{font-weight:500;color:#9e9e9e;font-size:1.2rem}.page .contact-us .right-side .content .message-box .text-area:focus-visible{outline:none}.page .contact-us .right-side .content .message-box .actions{margin:1rem 0rem}.page .contact-us .right-side .content .message-box .actions button{background-color:#155ed4;font-weight:500;font-size:1.4rem;border-radius:.3rem}.page .contact-us .right-side .content .message-box .input,.page .contact-us .right-side .content .message-box textarea{margin:1rem 0rem;width:100%;background-color:#fff}.page .contact-us .left-side{height:100%;position:relative;color:#fff}.page .contact-us .left-side .img-title{position:absolute;top:5%;left:calc(2% + 2rem);font-weight:700;font-size:3.6rem}.page .contact-us .left-side .bottom-img-side{position:absolute;top:75%;left:calc(2% + 2rem);margin:2rem 9rem 0rem 0rem}.page .contact-us .left-side .bottom-img-side .logo{width:20rem;height:4rem}.page .contact-us .left-side .bottom-img-side .logo img{width:10rem;height:4rem}.page .contact-us .left-side .bottom-img-side .img-description{margin-top:2rem}.page .contact-us .left-side .bg-image{width:100%;height:100%;border-radius:1.5rem 0rem 0rem 1.5rem}@media only screen and (max-width: 75em){.page .contact-us .left-side .bg-image{border-radius:1.5rem}}.page .carousel{display:none}.page .flexy{display:flex}.page .our-locations-section{width:100%;background-color:#26518b;padding:1.5rem;color:#fff}.page .our-locations-section .locations-content{width:95%;margin:auto}.page .our-locations-section .locations-content .headline{font-weight:500;font-size:2rem}.page .our-locations-section .locations-content .title{font-weight:700;padding:1rem 0rem;font-size:4rem}.page .our-locations-section .locations-content .subtitle{font-weight:500;padding:1rem 0rem}.page .our-locations-section .locations-content .lines-img{padding:1rem 0rem}.page .our-locations-section .locations-content .addresses{width:100%;display:flex;flex-direction:row;column-gap:2%}.page .our-locations-section .locations-content .addresses .address{flex-direction:column;row-gap:.7rem;width:22%;padding:1.5rem 0rem}.page .our-locations-section .locations-content .addresses .address .address-header{display:flex;flex-direction:column;row-gap:.7rem}.page .our-locations-section .locations-content .addresses .address .address-header img{width:3rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:1.9rem;font-weight:500}.page .our-locations-section .locations-content .addresses .address .location-area{width:95%}@media only screen and (min-width: 112.5em){.page .title{font-size:4.5rem}.page .contact-us{width:65%}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100%}}@media only screen and (max-width: 112.5em){.page .contact-us{width:75%;box-sizing:border-box}.page .contact-us .title{font-size:3.4rem}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100rem;border-radius:0rem 1.5rem 1.5rem 0rem}}@media only screen and (max-width: 112.5em) and (max-width: 1350px){.page .contact-us{width:80%}}@media only screen and (max-width: 112.5em) and (max-width: 1280px){.page .contact-us{width:86%}}@media only screen and (max-width: 1401px) and (min-width: 1201px){.page .our-locations-section .locations-content{width:auto}}@media only screen and (max-width: 75em){.page .contact-us{display:flex;flex-direction:column;top:3vh;width:100%;height:107rem;padding:5vh 2rem 10vh 2rem}.page .contact-us .right-side{padding:3rem 2rem;display:flex;flex-direction:column;height:80%}.page .contact-us .right-side .mat-mdc-card-content{display:block;padding:0 .2rem}.page .contact-us .left-side{height:25%}.page .contact-us .left-side .img-title{color:#fff}.page .contact-us .left-side img{height:100%;object-position:0rem -13rem;border-radius:1.5rem}.page .carousel{display:block;width:100%}.page .flexy{display:none}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{font-size:1.8rem;width:31rem;margin:auto;text-align:center;background-color:#fff;color:#26518b;height:27rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2rem;margin-bottom:1rem}.page .mat-mdc-card{box-shadow:none}}@media only screen and (max-width: 37.5em){.page .contact-us{height:auto;padding:5vh 2rem 0vh 2rem}.page .contact-us .full-name-area{display:block}.page .contact-us .first-name,.page .contact-us .last-name{width:100%}.page .contact-us .left-side{height:12rem}.page .contact-us .left-side .img-title{font-weight:600;font-size:3rem}.page .contact-us .left-side img{object-position:0rem -5rem}.page .contact-us .right-side .phone-number-section{flex-wrap:wrap}.page .contact-us .right-side .phone-number-section .countries-list{width:100%}.page .contact-us .right-side .phone-number-section .code-section{width:9rem}.page .contact-us .right-side .phone-number-section .phone-num-input{width:calc(100% - 9.5rem)}.page .our-locations-section .locations-content .addresses .address{width:27rem}}@media only screen and (max-width: 400px){.page .contact-us .left-side{height:10rem}.page .contact-us .left-side .img-title{font-weight:500;font-size:2.6rem}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{width:24.5rem;height:28rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2.2rem;margin-bottom:1rem;padding:0rem .4rem}.page .our-locations-section .locations-content .addresses .address .building,.page .our-locations-section .locations-content .addresses .address .location-area{padding:0rem .4rem}}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus{outline:0 none;box-shadow:0 0 0 .2rem transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next{width:4rem;height:4rem;background-color:transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-icon{color:#fff;width:2rem;height:2rem}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#fff;width:2.7rem;transition:all ease-in-out .1s}.page ::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: "component", type: i2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }, { kind: "component", type: ChooseCountryWithFlagComponent, selector: "choose-country-with-flag", inputs: ["items"], outputs: ["change"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'contact-us-page', template: "<div class=\"page\">\r\n    <div class=\"contact-us\">\r\n        <div class=\"left-side\">\r\n            <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\r\n            <div class=\"img-title\">\r\n                {{contactUsPageData.imageTitle}}\r\n            </div>\r\n            <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\r\n                <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\r\n                <div class=\"img-description\">{{contactUsPageData.imageDescription}}\r\n                </div>\r\n                <div class=\"social-media-icons\">\r\n                    <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right-side\">\r\n            <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\r\n            <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\r\n            <div class=\"content\">\r\n                <div class=\"message-box\">\r\n                    <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\r\n                        <div class=\"full-name-area\">\r\n                            <div class=\"first-name\">\r\n                                <span class=\"fields-labels\">First Name*</span>\r\n                                <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\r\n                            </div>\r\n                            <div class=\"last-name\">\r\n                                <span class=\"fields-labels\">Last Name*</span>\r\n                                <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\r\n                            </div>\r\n                        </div>\r\n                        <span class=\"fields-labels\">Company Name*</span>\r\n                        <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\r\n                        <span class=\"fields-labels\">Email*</span>\r\n                        <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\r\n                        <span class=\"fields-labels\">Phone Number</span>\r\n                        <div class=\"phone-number-section\">\r\n\r\n                            <div class=\"countries-list\">\r\n                                <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\r\n                            </div>\r\n                            <span class=\"code-section\">\r\n                                <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n                                <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\r\n                            </span>\r\n                            <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\r\n                        </div>\r\n                        <div class=\"subject\">\r\n                            <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\r\n                            </ng-select>\r\n                        </div>\r\n                        <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\r\n\r\n\r\n                        </textarea>\r\n                        <div class=\"actions\">\r\n                            <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\r\n                                Submit\r\n                            </button>\r\n                        </div>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- <div class=\"our-locations-section\">\r\n        <div class=\"locations-content\">\r\n            <div class=\"headline\">\r\n                {{contactUsPageData.locations.headline}}\r\n            </div>\r\n            <div class=\"title\">\r\n                {{contactUsPageData.locations.title}}\r\n            </div>\r\n            <div class=\"lines-img\">\r\n                <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\r\n            </div>\r\n            <div class=\"subtitle\">\r\n                {{contactUsPageData.locations.subtitle}}\r\n            </div>\r\n            <div class=\"addresses\">\r\n                <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\r\n                    <div class=\"address-header\">\r\n                        <div class=\"icon\">\r\n                            <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\r\n                        </div>\r\n                        <div class=\"location-name\">\r\n                            {{address.name}}\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"building\">\r\n                        {{address.building}}\r\n                    </div>\r\n                    <div class=\"location-area\">\r\n                        {{address.locationArea}}\r\n                    </div>\r\n                    <div class=\"hours\">\r\n                        <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n                        {{address.hours}}\r\n                    </div>\r\n                    <div class=\"cellular-number\">\r\n                        <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n                        {{address.phoneNumber}}\r\n                    </div>\r\n                </div>\r\n                <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\r\n                    [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\r\n                    [circular]=\"true\">\r\n                    <ng-template let-address pTemplate=\"item\">\r\n                        <div class=\"address\">\r\n                            <div class=\"address-header\">\r\n                                <div class=\"icon\">\r\n                                    <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\r\n                                </div>\r\n                                <div class=\"location-name\">\r\n                                    {{address.name}}\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"building\">\r\n                                {{address.building}}\r\n                            </div>\r\n                            <div class=\"location-area\">\r\n                                {{address.locationArea}}\r\n                            </div>\r\n                            <div class=\"hours\">\r\n                                <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n                                {{address.hours}}\r\n                            </div>\r\n                            <div class=\"cellular-number\">\r\n                                <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n                                {{address.phoneNumber}}\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-carousel>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;height:100%;position:relative;padding:2rem}.page .contact-us{box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:1.5rem;margin:auto;width:55%;height:100%;display:grid;grid-template-columns:50% 50%;box-sizing:border-box;margin:5rem auto 15rem}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .right-side{padding:2rem 4rem;display:grid;grid-template-rows:auto auto auto auto;row-gap:1rem}.page .contact-us .right-side .phone-number-section{position:relative;display:flex;gap:.5rem;margin:.5rem 0rem}.page .contact-us .right-side .phone-number-section .countries-list{width:30%}.page .contact-us .right-side .phone-number-section .code-section{width:15%;margin-right:0rem;align-self:center;color:#000;position:relative;display:flex}.page .contact-us .right-side .phone-number-section .code-section *{color:#838b91}.page .contact-us .right-side .phone-number-section .code{text-align:center;height:4rem;width:100%;padding-left:2rem;margin-right:0vh}.page .contact-us .right-side .phone-number-section .code::placeholder{padding-left:1rem}.page .contact-us .right-side .phone-number-section fa-icon{align-self:center;position:absolute;left:.5rem;z-index:2}.page .contact-us .right-side .phone-number-section .phone-num-input{width:55%;margin-right:0rem;height:4rem}.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-outer-spin-button,.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page .contact-us .right-side .title{font-weight:800;color:#3d3d3d}.page .contact-us .right-side .subtitle{font-weight:500;font-size:1.9rem;color:#3d3d3d;padding:1rem 0rem}.page .contact-us .right-side .content{display:grid;grid-template-rows:auto auto auto auto}.page .contact-us .right-side .content .message-box{grid-row:1/span 2}.page .contact-us .right-side .content .message-box .text-area{height:15rem;resize:none;border-radius:.5rem;border:rgb(190,188,188) .1rem solid}.page .contact-us .right-side .content .message-box .text-area::placeholder{font-weight:500;color:#9e9e9e;font-size:1.2rem}.page .contact-us .right-side .content .message-box .text-area:focus-visible{outline:none}.page .contact-us .right-side .content .message-box .actions{margin:1rem 0rem}.page .contact-us .right-side .content .message-box .actions button{background-color:#155ed4;font-weight:500;font-size:1.4rem;border-radius:.3rem}.page .contact-us .right-side .content .message-box .input,.page .contact-us .right-side .content .message-box textarea{margin:1rem 0rem;width:100%;background-color:#fff}.page .contact-us .left-side{height:100%;position:relative;color:#fff}.page .contact-us .left-side .img-title{position:absolute;top:5%;left:calc(2% + 2rem);font-weight:700;font-size:3.6rem}.page .contact-us .left-side .bottom-img-side{position:absolute;top:75%;left:calc(2% + 2rem);margin:2rem 9rem 0rem 0rem}.page .contact-us .left-side .bottom-img-side .logo{width:20rem;height:4rem}.page .contact-us .left-side .bottom-img-side .logo img{width:10rem;height:4rem}.page .contact-us .left-side .bottom-img-side .img-description{margin-top:2rem}.page .contact-us .left-side .bg-image{width:100%;height:100%;border-radius:1.5rem 0rem 0rem 1.5rem}@media only screen and (max-width: 75em){.page .contact-us .left-side .bg-image{border-radius:1.5rem}}.page .carousel{display:none}.page .flexy{display:flex}.page .our-locations-section{width:100%;background-color:#26518b;padding:1.5rem;color:#fff}.page .our-locations-section .locations-content{width:95%;margin:auto}.page .our-locations-section .locations-content .headline{font-weight:500;font-size:2rem}.page .our-locations-section .locations-content .title{font-weight:700;padding:1rem 0rem;font-size:4rem}.page .our-locations-section .locations-content .subtitle{font-weight:500;padding:1rem 0rem}.page .our-locations-section .locations-content .lines-img{padding:1rem 0rem}.page .our-locations-section .locations-content .addresses{width:100%;display:flex;flex-direction:row;column-gap:2%}.page .our-locations-section .locations-content .addresses .address{flex-direction:column;row-gap:.7rem;width:22%;padding:1.5rem 0rem}.page .our-locations-section .locations-content .addresses .address .address-header{display:flex;flex-direction:column;row-gap:.7rem}.page .our-locations-section .locations-content .addresses .address .address-header img{width:3rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:1.9rem;font-weight:500}.page .our-locations-section .locations-content .addresses .address .location-area{width:95%}@media only screen and (min-width: 112.5em){.page .title{font-size:4.5rem}.page .contact-us{width:65%}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100%}}@media only screen and (max-width: 112.5em){.page .contact-us{width:75%;box-sizing:border-box}.page .contact-us .title{font-size:3.4rem}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100rem;border-radius:0rem 1.5rem 1.5rem 0rem}}@media only screen and (max-width: 112.5em) and (max-width: 1350px){.page .contact-us{width:80%}}@media only screen and (max-width: 112.5em) and (max-width: 1280px){.page .contact-us{width:86%}}@media only screen and (max-width: 1401px) and (min-width: 1201px){.page .our-locations-section .locations-content{width:auto}}@media only screen and (max-width: 75em){.page .contact-us{display:flex;flex-direction:column;top:3vh;width:100%;height:107rem;padding:5vh 2rem 10vh 2rem}.page .contact-us .right-side{padding:3rem 2rem;display:flex;flex-direction:column;height:80%}.page .contact-us .right-side .mat-mdc-card-content{display:block;padding:0 .2rem}.page .contact-us .left-side{height:25%}.page .contact-us .left-side .img-title{color:#fff}.page .contact-us .left-side img{height:100%;object-position:0rem -13rem;border-radius:1.5rem}.page .carousel{display:block;width:100%}.page .flexy{display:none}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{font-size:1.8rem;width:31rem;margin:auto;text-align:center;background-color:#fff;color:#26518b;height:27rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2rem;margin-bottom:1rem}.page .mat-mdc-card{box-shadow:none}}@media only screen and (max-width: 37.5em){.page .contact-us{height:auto;padding:5vh 2rem 0vh 2rem}.page .contact-us .full-name-area{display:block}.page .contact-us .first-name,.page .contact-us .last-name{width:100%}.page .contact-us .left-side{height:12rem}.page .contact-us .left-side .img-title{font-weight:600;font-size:3rem}.page .contact-us .left-side img{object-position:0rem -5rem}.page .contact-us .right-side .phone-number-section{flex-wrap:wrap}.page .contact-us .right-side .phone-number-section .countries-list{width:100%}.page .contact-us .right-side .phone-number-section .code-section{width:9rem}.page .contact-us .right-side .phone-number-section .phone-num-input{width:calc(100% - 9.5rem)}.page .our-locations-section .locations-content .addresses .address{width:27rem}}@media only screen and (max-width: 400px){.page .contact-us .left-side{height:10rem}.page .contact-us .left-side .img-title{font-weight:500;font-size:2.6rem}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{width:24.5rem;height:28rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2.2rem;margin-bottom:1rem;padding:0rem .4rem}.page .our-locations-section .locations-content .addresses .address .building,.page .our-locations-section .locations-content .addresses .address .location-area{padding:0rem .4rem}}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus{outline:0 none;box-shadow:0 0 0 .2rem transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next{width:4rem;height:4rem;background-color:transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-icon{color:#fff;width:2rem;height:2rem}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#fff;width:2.7rem;transition:all ease-in-out .1s}.page ::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"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }, { type: i1$1.BreakpointObserver }, { type: i3$2.FormBuilder }]; }, propDecorators: { subjects: [{
+                type: Input
+            }], contactUsPageData: [{
+                type: Input
+            }], apiPath: [{
+                type: Input
+            }], items: [{
+                type: Input
             }] } });
-class PageSectionStyleThreeComponent {
-    constructor(_Router) {
-        this._Router = _Router;
-    }
-    ngOnInit() {
-    }
-    onClickValuePropButton(route) {
-        this._Router.navigate([route]);
-    }
-}
-PageSectionStyleThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-PageSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThreeComponent, selector: "page-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\n  <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\n    <div class=\"section-container\">\n      <div class=\"image-side\">\n        <img [src]=\"valueprop.image\">\n      </div>\n      <div class=\"text-side\">\n        <section-title [sectionTitle]=\"valueprop.sectionTitle\">\n        </section-title>\n        <div class=\"optional-button\">\n          <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.button\" (click)=\"onClickValuePropButton(valueprop.button.route)\">\n            {{valueprop.button.label}}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{row-gap:5rem;display:grid;justify-items:center;padding:0rem}.page .section{margin:0rem;padding:2rem 0;width:100%;display:grid;justify-items:center}.page .section .section-container{display:flex;flex-direction:row;column-gap:4%;width:90%}@media only screen and (min-width: 1500px){.page .section{padding:5rem 0%}.page .section .section-container{max-width:150rem}}.page .section:nth-child(even){background-color:#f3f6f8}.page .section:nth-child(even) .section-container{flex-direction:row-reverse}.page .section .text-side{margin:auto;width:53%;padding:2rem 0rem;text-align:left}.page .section .text-side .title{font-size:3.2rem;font-weight:600;padding:1rem 0rem}.page .section .text-side .optional-button{margin-top:2rem}.page .section .text-side .optional-button button{padding:1rem;background-color:#155ed4;color:#fff}.page .section .image-side{border-radius:1.5rem;width:43%;height:35rem;box-shadow:0 .1rem .5rem #00000040}.page .section .image-side img{border-radius:1.5rem;width:100%;height:100%;object-fit:cover}@media only screen and (max-width: 75em){.page{row-gap:2rem}.page .section .section-container{flex-direction:column}.page .section .section-container .image-side{margin:1rem auto;width:40%}.page .section .section-container .image-side img,.page .section .section-container .text-side{width:100%}.page .section:nth-child(even) .section-container{flex-direction:column}}@media only screen and (max-width: 56.25em){.page{row-gap:2rem}.page .section .section-container .image-side{margin:1rem auto;width:50%}}@media only screen and (max-width: 37.5em){.page .section{margin:0;padding:0}.page .section .section-container{width:100%}.page .section .section-container .text-side{padding:0rem 4%}.page .section .section-container .text-side .title{font-size:2.4rem;font-weight:600;padding:1rem 0rem}.page .section .section-container .image-side{width:100%;height:40rem;border-radius:0;margin:0;box-shadow:none;margin-bottom:2rem}.page .section .section-container .image-side img{border-radius:0;height:100%;object-fit:cover}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'page-section-style-three', template: "<div class=\"page\">\n  <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\n    <div class=\"section-container\">\n      <div class=\"image-side\">\n        <img [src]=\"valueprop.image\">\n      </div>\n      <div class=\"text-side\">\n        <section-title [sectionTitle]=\"valueprop.sectionTitle\">\n        </section-title>\n        <div class=\"optional-button\">\n          <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.button\" (click)=\"onClickValuePropButton(valueprop.button.route)\">\n            {{valueprop.button.label}}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{row-gap:5rem;display:grid;justify-items:center;padding:0rem}.page .section{margin:0rem;padding:2rem 0;width:100%;display:grid;justify-items:center}.page .section .section-container{display:flex;flex-direction:row;column-gap:4%;width:90%}@media only screen and (min-width: 1500px){.page .section{padding:5rem 0%}.page .section .section-container{max-width:150rem}}.page .section:nth-child(even){background-color:#f3f6f8}.page .section:nth-child(even) .section-container{flex-direction:row-reverse}.page .section .text-side{margin:auto;width:53%;padding:2rem 0rem;text-align:left}.page .section .text-side .title{font-size:3.2rem;font-weight:600;padding:1rem 0rem}.page .section .text-side .optional-button{margin-top:2rem}.page .section .text-side .optional-button button{padding:1rem;background-color:#155ed4;color:#fff}.page .section .image-side{border-radius:1.5rem;width:43%;height:35rem;box-shadow:0 .1rem .5rem #00000040}.page .section .image-side img{border-radius:1.5rem;width:100%;height:100%;object-fit:cover}@media only screen and (max-width: 75em){.page{row-gap:2rem}.page .section .section-container{flex-direction:column}.page .section .section-container .image-side{margin:1rem auto;width:40%}.page .section .section-container .image-side img,.page .section .section-container .text-side{width:100%}.page .section:nth-child(even) .section-container{flex-direction:column}}@media only screen and (max-width: 56.25em){.page{row-gap:2rem}.page .section .section-container .image-side{margin:1rem auto;width:50%}}@media only screen and (max-width: 37.5em){.page .section{margin:0;padding:0}.page .section .section-container{width:100%}.page .section .section-container .text-side{padding:0rem 4%}.page .section .section-container .text-side .title{font-size:2.4rem;font-weight:600;padding:1rem 0rem}.page .section .section-container .image-side{width:100%;height:40rem;border-radius:0;margin:0;box-shadow:none;margin-bottom:2rem}.page .section .section-container .image-side img{border-radius:0;height:100%;object-fit:cover}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
-                type: Input
+class PageSectionStyleThreeComponent {
+    constructor(_Router) {
+        this._Router = _Router;
+    }
+    ngOnInit() {
+    }
+    onClickValuePropButton(route) {
+        this._Router.navigate([route]);
+    }
+}
+PageSectionStyleThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+PageSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThreeComponent, selector: "page-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\r\n  <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\r\n    <div class=\"section-container\">\r\n      <div class=\"image-side\">\r\n        <img [src]=\"valueprop.image\">\r\n      </div>\r\n      <div class=\"text-side\">\r\n        <section-title [sectionTitle]=\"valueprop.sectionTitle\">\r\n        </section-title>\r\n        <div class=\"optional-button\">\r\n          <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.button\" (click)=\"onClickValuePropButton(valueprop.button.route)\">\r\n            {{valueprop.button.label}}\r\n          </button>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{row-gap:5rem;display:grid;justify-items:center;padding:0rem}.page .section{margin:0rem;padding:2rem 0;width:100%;display:grid;justify-items:center}.page .section .section-container{display:flex;flex-direction:row;column-gap:4%;width:90%}@media only screen and (min-width: 1500px){.page .section{padding:5rem 0%}.page .section .section-container{max-width:150rem}}.page .section:nth-child(even){background-color:#f3f6f8}.page .section:nth-child(even) .section-container{flex-direction:row-reverse}.page .section .text-side{margin:auto;width:53%;padding:2rem 0rem;text-align:left}.page .section .text-side .title{font-size:3.2rem;font-weight:600;padding:1rem 0rem}.page .section .text-side .optional-button{margin-top:2rem}.page .section .text-side .optional-button button{padding:1rem;background-color:#155ed4;color:#fff}.page .section .image-side{border-radius:1.5rem;width:43%;height:35rem;box-shadow:0 .1rem .5rem #00000040}.page .section .image-side img{border-radius:1.5rem;width:100%;height:100%;object-fit:cover}@media only screen and (max-width: 75em){.page{row-gap:2rem}.page .section .section-container{flex-direction:column}.page .section .section-container .image-side{margin:1rem auto;width:40%}.page .section .section-container .image-side img,.page .section .section-container .text-side{width:100%}.page .section:nth-child(even) .section-container{flex-direction:column}}@media only screen and (max-width: 56.25em){.page{row-gap:2rem}.page .section .section-container .image-side{margin:1rem auto;width:50%}}@media only screen and (max-width: 37.5em){.page .section{margin:0;padding:0}.page .section .section-container{width:100%}.page .section .section-container .text-side{padding:0rem 4%}.page .section .section-container .text-side .title{font-size:2.4rem;font-weight:600;padding:1rem 0rem}.page .section .section-container .image-side{width:100%;height:40rem;border-radius:0;margin:0;box-shadow:none;margin-bottom:2rem}.page .section .section-container .image-side img{border-radius:0;height:100%;object-fit:cover}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'page-section-style-three', template: "<div class=\"page\">\r\n  <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\r\n    <div class=\"section-container\">\r\n      <div class=\"image-side\">\r\n        <img [src]=\"valueprop.image\">\r\n      </div>\r\n      <div class=\"text-side\">\r\n        <section-title [sectionTitle]=\"valueprop.sectionTitle\">\r\n        </section-title>\r\n        <div class=\"optional-button\">\r\n          <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.button\" (click)=\"onClickValuePropButton(valueprop.button.route)\">\r\n            {{valueprop.button.label}}\r\n          </button>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{row-gap:5rem;display:grid;justify-items:center;padding:0rem}.page .section{margin:0rem;padding:2rem 0;width:100%;display:grid;justify-items:center}.page .section .section-container{display:flex;flex-direction:row;column-gap:4%;width:90%}@media only screen and (min-width: 1500px){.page .section{padding:5rem 0%}.page .section .section-container{max-width:150rem}}.page .section:nth-child(even){background-color:#f3f6f8}.page .section:nth-child(even) .section-container{flex-direction:row-reverse}.page .section .text-side{margin:auto;width:53%;padding:2rem 0rem;text-align:left}.page .section .text-side .title{font-size:3.2rem;font-weight:600;padding:1rem 0rem}.page .section .text-side .optional-button{margin-top:2rem}.page .section .text-side .optional-button button{padding:1rem;background-color:#155ed4;color:#fff}.page .section .image-side{border-radius:1.5rem;width:43%;height:35rem;box-shadow:0 .1rem .5rem #00000040}.page .section .image-side img{border-radius:1.5rem;width:100%;height:100%;object-fit:cover}@media only screen and (max-width: 75em){.page{row-gap:2rem}.page .section .section-container{flex-direction:column}.page .section .section-container .image-side{margin:1rem auto;width:40%}.page .section .section-container .image-side img,.page .section .section-container .text-side{width:100%}.page .section:nth-child(even) .section-container{flex-direction:column}}@media only screen and (max-width: 56.25em){.page{row-gap:2rem}.page .section .section-container .image-side{margin:1rem auto;width:50%}}@media only screen and (max-width: 37.5em){.page .section{margin:0;padding:0}.page .section .section-container{width:100%}.page .section .section-container .text-side{padding:0rem 4%}.page .section .section-container .text-side .title{font-size:2.4rem;font-weight:600;padding:1rem 0rem}.page .section .section-container .image-side{width:100%;height:40rem;border-radius:0;margin:0;box-shadow:none;margin-bottom:2rem}.page .section .section-container .image-side img{border-radius:0;height:100%;object-fit:cover}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
+                type: Input
             }] } });
-class SocialMediaIconsComponent {
-    constructor(_router) {
-        this._router = _router;
-    }
-    ngOnInit() {
-    }
-    onClickLinkedIn() {
-        window.location.href = this.socialMediaLinks.linkedIn;
-    }
-    onClickInstagram() {
-        window.location.href = this.socialMediaLinks.instagram;
-    }
-    onClickYoutube() {
-        window.location.href = this.socialMediaLinks.youTube;
-    }
-    setStyles() {
-        let style = {
-            color: this.color
-        };
-        return style;
-    }
-}
-SocialMediaIconsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SocialMediaIconsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-SocialMediaIconsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SocialMediaIconsComponent, selector: "social-media-icons", inputs: { color: "color", areIconsInFooter: "areIconsInFooter", socialMediaLinks: "socialMediaLinks" }, ngImport: i0, template: "<div [ngClass]=\"{'icons-white':areIconsInFooter, 'icons':!areIconsInFooter}\">\n  <fa-icon [icon]=\"['fab', 'linkedin-in']\" class=\"icon linkedin\" (click)=\"onClickLinkedIn()\"></fa-icon>\n  <fa-icon [icon]=\"['fab', 'instagram']\" class=\"icon instagram\" (click)=\"onClickInstagram()\"></fa-icon>\n  <fa-icon [icon]=\"['fab', 'youtube']\" class=\"icon youtube\" (click)=\"onClickYoutube()\"></fa-icon>\n</div>", styles: [".icons,.icons-white{display:flex;gap:1.5rem}.icons .icon,.icons-white .icon{cursor:pointer;font-size:2rem}.icons-white{color:#fff}.icons-white .icon:hover{color:#e6e6e6}.icons{font-size:2rem}.icons .icon{color:#4d4d4d;cursor:pointer;transition:ease-in-out .2s}.icons .linkedin:hover{color:#0072b1}.icons .instagram:hover{color:#c92bb7}.icons .youtube:hover{color:red}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SocialMediaIconsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'social-media-icons', template: "<div [ngClass]=\"{'icons-white':areIconsInFooter, 'icons':!areIconsInFooter}\">\n  <fa-icon [icon]=\"['fab', 'linkedin-in']\" class=\"icon linkedin\" (click)=\"onClickLinkedIn()\"></fa-icon>\n  <fa-icon [icon]=\"['fab', 'instagram']\" class=\"icon instagram\" (click)=\"onClickInstagram()\"></fa-icon>\n  <fa-icon [icon]=\"['fab', 'youtube']\" class=\"icon youtube\" (click)=\"onClickYoutube()\"></fa-icon>\n</div>", styles: [".icons,.icons-white{display:flex;gap:1.5rem}.icons .icon,.icons-white .icon{cursor:pointer;font-size:2rem}.icons-white{color:#fff}.icons-white .icon:hover{color:#e6e6e6}.icons{font-size:2rem}.icons .icon{color:#4d4d4d;cursor:pointer;transition:ease-in-out .2s}.icons .linkedin:hover{color:#0072b1}.icons .instagram:hover{color:#c92bb7}.icons .youtube:hover{color:red}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { color: [{
-                type: Input
-            }], areIconsInFooter: [{
-                type: Input
-            }], socialMediaLinks: [{
-                type: Input
+class SocialMediaIconsComponent {
+    constructor(_router) {
+        this._router = _router;
+    }
+    ngOnInit() {
+    }
+    onClickLinkedIn() {
+        window.location.href = this.socialMediaLinks.linkedIn;
+    }
+    onClickInstagram() {
+        window.location.href = this.socialMediaLinks.instagram;
+    }
+    onClickYoutube() {
+        window.location.href = this.socialMediaLinks.youTube;
+    }
+    setStyles() {
+        let style = {
+            color: this.color
+        };
+        return style;
+    }
+}
+SocialMediaIconsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SocialMediaIconsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+SocialMediaIconsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SocialMediaIconsComponent, selector: "social-media-icons", inputs: { color: "color", areIconsInFooter: "areIconsInFooter", socialMediaLinks: "socialMediaLinks" }, ngImport: i0, template: "<div [ngClass]=\"{'icons-white':areIconsInFooter, 'icons':!areIconsInFooter}\">\r\n  <fa-icon [icon]=\"['fab', 'linkedin-in']\" class=\"icon linkedin\" (click)=\"onClickLinkedIn()\"></fa-icon>\r\n  <fa-icon [icon]=\"['fab', 'instagram']\" class=\"icon instagram\" (click)=\"onClickInstagram()\"></fa-icon>\r\n  <fa-icon [icon]=\"['fab', 'youtube']\" class=\"icon youtube\" (click)=\"onClickYoutube()\"></fa-icon>\r\n</div>", styles: [".icons,.icons-white{display:flex;gap:1.5rem}.icons .icon,.icons-white .icon{cursor:pointer;font-size:2rem}.icons-white{color:#fff}.icons-white .icon:hover{color:#e6e6e6}.icons{font-size:2rem}.icons .icon{color:#4d4d4d;cursor:pointer;transition:ease-in-out .2s}.icons .linkedin:hover{color:#0072b1}.icons .instagram:hover{color:#c92bb7}.icons .youtube:hover{color:red}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SocialMediaIconsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'social-media-icons', template: "<div [ngClass]=\"{'icons-white':areIconsInFooter, 'icons':!areIconsInFooter}\">\r\n  <fa-icon [icon]=\"['fab', 'linkedin-in']\" class=\"icon linkedin\" (click)=\"onClickLinkedIn()\"></fa-icon>\r\n  <fa-icon [icon]=\"['fab', 'instagram']\" class=\"icon instagram\" (click)=\"onClickInstagram()\"></fa-icon>\r\n  <fa-icon [icon]=\"['fab', 'youtube']\" class=\"icon youtube\" (click)=\"onClickYoutube()\"></fa-icon>\r\n</div>", styles: [".icons,.icons-white{display:flex;gap:1.5rem}.icons .icon,.icons-white .icon{cursor:pointer;font-size:2rem}.icons-white{color:#fff}.icons-white .icon:hover{color:#e6e6e6}.icons{font-size:2rem}.icons .icon{color:#4d4d4d;cursor:pointer;transition:ease-in-out .2s}.icons .linkedin:hover{color:#0072b1}.icons .instagram:hover{color:#c92bb7}.icons .youtube:hover{color:red}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { color: [{
+                type: Input
+            }], areIconsInFooter: [{
+                type: Input
+            }], socialMediaLinks: [{
+                type: Input
             }] } });
-class ComingSoonComponent {
-    constructor() {
-        this.ctaText = "Get notified when this feature is available.";
-        this.socialMediaLinks = { instagram: "https://www.instagram.com", faceBook: "https://www.facebook.com", youTube: "https://www.youtube.com", linkedIn: "https://www.linkedin.com" };
-    }
-}
-ComingSoonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComingSoonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ComingSoonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ComingSoonComponent, selector: "coming-soon", inputs: { ctaText: "ctaText", socialMediaLinks: "socialMediaLinks" }, ngImport: i0, template: "<section class=\"page\">\n    <div class=\"coming-soon\">\n        <div class=\"title\">\n            Coming Soon\n        </div>\n        <div class=\"subtitle\">\n            {{ctaText}}\n        </div>\n        <form>\n            <div class=\"registration-field\">\n                <div class=\"email-field\">\n                    <input type=\"email\" placeholder=\"Email Address\">\n                </div>\n                <button mat-raised-button class=\"submit\" type=\"submit\">\n                    Submit\n                </button>\n            </div>\n        </form>\n        <div class=\"social-media-icons\">\n            <social-media-icons [color]=\"'#4D4D4D'\" [areIconsInFooter]=\"false\" [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\n        </div>\n    </div>\n</section>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;position:relative;padding:20vh 0}.page .coming-soon{background:url(https://i.ibb.co/crKpSTb/box-left-side-design.png) left center no-repeat,url(https://i.ibb.co/pKTGF8D/coming-soon-right-top-bg.png) right top no-repeat,url(https://i.ibb.co/ckht99W/coming-soon-right-bottom-bg.png) right bottom no-repeat;background-size:2rem,13rem,10rem;margin:auto;background-color:#fff;padding:6rem 4rem;width:60rem;border-radius:2.5rem;box-shadow:.2rem .2rem 7.4rem #00000060;display:flex;flex-direction:column;row-gap:1rem}.page .coming-soon .title{color:#155ed4;font-weight:500;font-size:4rem}.page .coming-soon .subtitle{color:#4d4d4d;font-weight:700;font-size:1.3rem}.page .coming-soon .registration-field{display:flex;flex-direction:row;column-gap:1rem}.page .coming-soon .registration-field .email-field{width:60%}.page .coming-soon .registration-field .email-field input{width:100%}.page .coming-soon .registration-field .submit{color:#fff;background-color:#32353b}.page .coming-soon .registration-field .submit:hover{background-color:#494e57}.page .coming-soon .social-media-icons{font-size:2rem}@media only screen and (max-width: 37.5em){.page .coming-soon{width:90%;text-align:center;background-size:2rem,7rem,7rem}.page .coming-soon .registration-field{flex-direction:column;row-gap:1rem}.page .coming-soon .registration-field .email-field,.page .coming-soon .registration-field .email-field input{width:100%}.page .coming-soon .social-media-icons{margin:auto}}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SocialMediaIconsComponent, selector: "social-media-icons", inputs: ["color", "areIconsInFooter", "socialMediaLinks"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComingSoonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'coming-soon', template: "<section class=\"page\">\n    <div class=\"coming-soon\">\n        <div class=\"title\">\n            Coming Soon\n        </div>\n        <div class=\"subtitle\">\n            {{ctaText}}\n        </div>\n        <form>\n            <div class=\"registration-field\">\n                <div class=\"email-field\">\n                    <input type=\"email\" placeholder=\"Email Address\">\n                </div>\n                <button mat-raised-button class=\"submit\" type=\"submit\">\n                    Submit\n                </button>\n            </div>\n        </form>\n        <div class=\"social-media-icons\">\n            <social-media-icons [color]=\"'#4D4D4D'\" [areIconsInFooter]=\"false\" [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\n        </div>\n    </div>\n</section>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;position:relative;padding:20vh 0}.page .coming-soon{background:url(https://i.ibb.co/crKpSTb/box-left-side-design.png) left center no-repeat,url(https://i.ibb.co/pKTGF8D/coming-soon-right-top-bg.png) right top no-repeat,url(https://i.ibb.co/ckht99W/coming-soon-right-bottom-bg.png) right bottom no-repeat;background-size:2rem,13rem,10rem;margin:auto;background-color:#fff;padding:6rem 4rem;width:60rem;border-radius:2.5rem;box-shadow:.2rem .2rem 7.4rem #00000060;display:flex;flex-direction:column;row-gap:1rem}.page .coming-soon .title{color:#155ed4;font-weight:500;font-size:4rem}.page .coming-soon .subtitle{color:#4d4d4d;font-weight:700;font-size:1.3rem}.page .coming-soon .registration-field{display:flex;flex-direction:row;column-gap:1rem}.page .coming-soon .registration-field .email-field{width:60%}.page .coming-soon .registration-field .email-field input{width:100%}.page .coming-soon .registration-field .submit{color:#fff;background-color:#32353b}.page .coming-soon .registration-field .submit:hover{background-color:#494e57}.page .coming-soon .social-media-icons{font-size:2rem}@media only screen and (max-width: 37.5em){.page .coming-soon{width:90%;text-align:center;background-size:2rem,7rem,7rem}.page .coming-soon .registration-field{flex-direction:column;row-gap:1rem}.page .coming-soon .registration-field .email-field,.page .coming-soon .registration-field .email-field input{width:100%}.page .coming-soon .social-media-icons{margin:auto}}\n"] }]
-        }], propDecorators: { ctaText: [{
-                type: Input
-            }], socialMediaLinks: [{
-                type: Input
+class ComingSoonComponent {
+    constructor() {
+        this.ctaText = "Get notified when this feature is available.";
+        this.socialMediaLinks = { instagram: "https://www.instagram.com", faceBook: "https://www.facebook.com", youTube: "https://www.youtube.com", linkedIn: "https://www.linkedin.com" };
+    }
+}
+ComingSoonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComingSoonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ComingSoonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ComingSoonComponent, selector: "coming-soon", inputs: { ctaText: "ctaText", socialMediaLinks: "socialMediaLinks" }, ngImport: i0, template: "<section class=\"page\">\r\n    <div class=\"coming-soon\">\r\n        <div class=\"title\">\r\n            Coming Soon\r\n        </div>\r\n        <div class=\"subtitle\">\r\n            {{ctaText}}\r\n        </div>\r\n        <form>\r\n            <div class=\"registration-field\">\r\n                <div class=\"email-field\">\r\n                    <input type=\"email\" placeholder=\"Email Address\">\r\n                </div>\r\n                <button mat-raised-button class=\"submit\" type=\"submit\">\r\n                    Submit\r\n                </button>\r\n            </div>\r\n        </form>\r\n        <div class=\"social-media-icons\">\r\n            <social-media-icons [color]=\"'#4D4D4D'\" [areIconsInFooter]=\"false\" [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\r\n        </div>\r\n    </div>\r\n</section>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;position:relative;padding:20vh 0}.page .coming-soon{background:url(https://i.ibb.co/crKpSTb/box-left-side-design.png) left center no-repeat,url(https://i.ibb.co/pKTGF8D/coming-soon-right-top-bg.png) right top no-repeat,url(https://i.ibb.co/ckht99W/coming-soon-right-bottom-bg.png) right bottom no-repeat;background-size:2rem,13rem,10rem;margin:auto;background-color:#fff;padding:6rem 4rem;width:60rem;border-radius:2.5rem;box-shadow:.2rem .2rem 7.4rem #00000060;display:flex;flex-direction:column;row-gap:1rem}.page .coming-soon .title{color:#155ed4;font-weight:500;font-size:4rem}.page .coming-soon .subtitle{color:#4d4d4d;font-weight:700;font-size:1.3rem}.page .coming-soon .registration-field{display:flex;flex-direction:row;column-gap:1rem}.page .coming-soon .registration-field .email-field{width:60%}.page .coming-soon .registration-field .email-field input{width:100%}.page .coming-soon .registration-field .submit{color:#fff;background-color:#32353b}.page .coming-soon .registration-field .submit:hover{background-color:#494e57}.page .coming-soon .social-media-icons{font-size:2rem}@media only screen and (max-width: 37.5em){.page .coming-soon{width:90%;text-align:center;background-size:2rem,7rem,7rem}.page .coming-soon .registration-field{flex-direction:column;row-gap:1rem}.page .coming-soon .registration-field .email-field,.page .coming-soon .registration-field .email-field input{width:100%}.page .coming-soon .social-media-icons{margin:auto}}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SocialMediaIconsComponent, selector: "social-media-icons", inputs: ["color", "areIconsInFooter", "socialMediaLinks"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComingSoonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coming-soon', template: "<section class=\"page\">\r\n    <div class=\"coming-soon\">\r\n        <div class=\"title\">\r\n            Coming Soon\r\n        </div>\r\n        <div class=\"subtitle\">\r\n            {{ctaText}}\r\n        </div>\r\n        <form>\r\n            <div class=\"registration-field\">\r\n                <div class=\"email-field\">\r\n                    <input type=\"email\" placeholder=\"Email Address\">\r\n                </div>\r\n                <button mat-raised-button class=\"submit\" type=\"submit\">\r\n                    Submit\r\n                </button>\r\n            </div>\r\n        </form>\r\n        <div class=\"social-media-icons\">\r\n            <social-media-icons [color]=\"'#4D4D4D'\" [areIconsInFooter]=\"false\" [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\r\n        </div>\r\n    </div>\r\n</section>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;position:relative;padding:20vh 0}.page .coming-soon{background:url(https://i.ibb.co/crKpSTb/box-left-side-design.png) left center no-repeat,url(https://i.ibb.co/pKTGF8D/coming-soon-right-top-bg.png) right top no-repeat,url(https://i.ibb.co/ckht99W/coming-soon-right-bottom-bg.png) right bottom no-repeat;background-size:2rem,13rem,10rem;margin:auto;background-color:#fff;padding:6rem 4rem;width:60rem;border-radius:2.5rem;box-shadow:.2rem .2rem 7.4rem #00000060;display:flex;flex-direction:column;row-gap:1rem}.page .coming-soon .title{color:#155ed4;font-weight:500;font-size:4rem}.page .coming-soon .subtitle{color:#4d4d4d;font-weight:700;font-size:1.3rem}.page .coming-soon .registration-field{display:flex;flex-direction:row;column-gap:1rem}.page .coming-soon .registration-field .email-field{width:60%}.page .coming-soon .registration-field .email-field input{width:100%}.page .coming-soon .registration-field .submit{color:#fff;background-color:#32353b}.page .coming-soon .registration-field .submit:hover{background-color:#494e57}.page .coming-soon .social-media-icons{font-size:2rem}@media only screen and (max-width: 37.5em){.page .coming-soon{width:90%;text-align:center;background-size:2rem,7rem,7rem}.page .coming-soon .registration-field{flex-direction:column;row-gap:1rem}.page .coming-soon .registration-field .email-field,.page .coming-soon .registration-field .email-field input{width:100%}.page .coming-soon .social-media-icons{margin:auto}}\n"] }]
+        }], propDecorators: { ctaText: [{
+                type: Input
+            }], socialMediaLinks: [{
+                type: Input
             }] } });
-class FaqCategoryListingComponent {
-    constructor(_Router) {
-        this._Router = _Router;
-    }
-    ngOnInit() { }
-    onClick() {
-        this._Router.navigate(['/faq/faq-category-page', this.category.id]);
-    }
-}
-FaqCategoryListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqCategoryListingComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-FaqCategoryListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqCategoryListingComponent, selector: "faq-category-listing", inputs: { category: "category", isSelected: "isSelected" }, ngImport: i0, template: "<div [ngClass]=\"{'selected':isSelected}\" class=\"listing\">\n    <div class=\"icon-container\">\n        <fa-icon [icon]=\"category.iconName\"></fa-icon>\n    </div>\n    <div class=\"title\">\n        {{category.title}}\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.listing{display:grid;grid-template-rows:auto auto;align-items:center;background:#fff;padding:2rem;border-radius:1.5rem;grid-row-gap:1rem;width:100%;height:20rem;margin:auto;place-items:center;border:.2rem solid #32353b;transition:all ease-in-out .1s;color:#32353b}.listing:hover{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}.icon-container{grid-row:1/span 2;grid-column:1;font-size:5rem}.title{font-size:18px;font-weight:700}.selected{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}@media only screen and (max-width: 75em){.listing{width:30rem;margin:auto 1rem}}@media only screen and (max-width: 37.5em){.listing{width:15rem;height:12rem;padding:0}.listing .title{font-size:1.8rem}.listing .icon-container{font-size:4rem}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqCategoryListingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'faq-category-listing', template: "<div [ngClass]=\"{'selected':isSelected}\" class=\"listing\">\n    <div class=\"icon-container\">\n        <fa-icon [icon]=\"category.iconName\"></fa-icon>\n    </div>\n    <div class=\"title\">\n        {{category.title}}\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.listing{display:grid;grid-template-rows:auto auto;align-items:center;background:#fff;padding:2rem;border-radius:1.5rem;grid-row-gap:1rem;width:100%;height:20rem;margin:auto;place-items:center;border:.2rem solid #32353b;transition:all ease-in-out .1s;color:#32353b}.listing:hover{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}.icon-container{grid-row:1/span 2;grid-column:1;font-size:5rem}.title{font-size:18px;font-weight:700}.selected{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}@media only screen and (max-width: 75em){.listing{width:30rem;margin:auto 1rem}}@media only screen and (max-width: 37.5em){.listing{width:15rem;height:12rem;padding:0}.listing .title{font-size:1.8rem}.listing .icon-container{font-size:4rem}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { category: [{
-                type: Input
-            }], isSelected: [{
-                type: Input
+class FaqCategoryListingComponent {
+    constructor(_Router) {
+        this._Router = _Router;
+    }
+    ngOnInit() { }
+    onClick() {
+        this._Router.navigate(['/faq/faq-category-page', this.category.id]);
+    }
+}
+FaqCategoryListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqCategoryListingComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+FaqCategoryListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqCategoryListingComponent, selector: "faq-category-listing", inputs: { category: "category", isSelected: "isSelected" }, ngImport: i0, template: "<div [ngClass]=\"{'selected':isSelected}\" class=\"listing\">\r\n    <div class=\"icon-container\">\r\n        <fa-icon [icon]=\"category.iconName\"></fa-icon>\r\n    </div>\r\n    <div class=\"title\">\r\n        {{category.title}}\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.listing{display:grid;grid-template-rows:auto auto;align-items:center;background:#fff;padding:2rem;border-radius:1.5rem;grid-row-gap:1rem;width:100%;height:20rem;margin:auto;place-items:center;border:.2rem solid #32353b;transition:all ease-in-out .1s;color:#32353b}.listing:hover{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}.icon-container{grid-row:1/span 2;grid-column:1;font-size:5rem}.title{font-size:18px;font-weight:700}.selected{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}@media only screen and (max-width: 75em){.listing{width:30rem;margin:auto 1rem}}@media only screen and (max-width: 37.5em){.listing{width:15rem;height:12rem;padding:0}.listing .title{font-size:1.8rem}.listing .icon-container{font-size:4rem}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqCategoryListingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'faq-category-listing', template: "<div [ngClass]=\"{'selected':isSelected}\" class=\"listing\">\r\n    <div class=\"icon-container\">\r\n        <fa-icon [icon]=\"category.iconName\"></fa-icon>\r\n    </div>\r\n    <div class=\"title\">\r\n        {{category.title}}\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.listing{display:grid;grid-template-rows:auto auto;align-items:center;background:#fff;padding:2rem;border-radius:1.5rem;grid-row-gap:1rem;width:100%;height:20rem;margin:auto;place-items:center;border:.2rem solid #32353b;transition:all ease-in-out .1s;color:#32353b}.listing:hover{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}.icon-container{grid-row:1/span 2;grid-column:1;font-size:5rem}.title{font-size:18px;font-weight:700}.selected{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}@media only screen and (max-width: 75em){.listing{width:30rem;margin:auto 1rem}}@media only screen and (max-width: 37.5em){.listing{width:15rem;height:12rem;padding:0}.listing .title{font-size:1.8rem}.listing .icon-container{font-size:4rem}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { category: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
             }] } });
-class FaqListingComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    onOpened($event) {
-        this.isOpen = true;
-    }
-    onClosed($event) {
-        this.isOpen = false;
-    }
-}
-FaqListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FaqListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqListingComponent, selector: "faq-listing", inputs: { faq: "faq" }, ngImport: i0, template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n    (closed)=\"onClosed($event)\">\n    <mat-expansion-panel-header class=\"panel-header\">\n        <mat-panel-title class=\"title\">\n            {{faq.question}}\n        </mat-panel-title>\n        <div class=\"icon\">\n            <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n            <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <div class=\"content\">\n        {{faq.response}}\n    </div>\n</mat-expansion-panel>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem;font-family:maiandra}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header{font-family:maiandra}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'faq-listing', template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n    (closed)=\"onClosed($event)\">\n    <mat-expansion-panel-header class=\"panel-header\">\n        <mat-panel-title class=\"title\">\n            {{faq.question}}\n        </mat-panel-title>\n        <div class=\"icon\">\n            <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n            <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <div class=\"content\">\n        {{faq.response}}\n    </div>\n</mat-expansion-panel>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem;font-family:maiandra}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header{font-family:maiandra}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { faq: [{
-                type: Input
+class FaqListingComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    onOpened($event) {
+        this.isOpen = true;
+    }
+    onClosed($event) {
+        this.isOpen = false;
+    }
+}
+FaqListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FaqListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqListingComponent, selector: "faq-listing", inputs: { faq: "faq" }, ngImport: i0, template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\r\n    (closed)=\"onClosed($event)\">\r\n    <mat-expansion-panel-header class=\"panel-header\">\r\n        <mat-panel-title class=\"title\">\r\n            {{faq.question}}\r\n        </mat-panel-title>\r\n        <div class=\"icon\">\r\n            <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\r\n            <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\r\n        </div>\r\n    </mat-expansion-panel-header>\r\n    <div class=\"content\">\r\n        {{faq.response}}\r\n    </div>\r\n</mat-expansion-panel>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem;font-family:maiandra}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header{font-family:maiandra}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'faq-listing', template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\r\n    (closed)=\"onClosed($event)\">\r\n    <mat-expansion-panel-header class=\"panel-header\">\r\n        <mat-panel-title class=\"title\">\r\n            {{faq.question}}\r\n        </mat-panel-title>\r\n        <div class=\"icon\">\r\n            <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\r\n            <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\r\n        </div>\r\n    </mat-expansion-panel-header>\r\n    <div class=\"content\">\r\n        {{faq.response}}\r\n    </div>\r\n</mat-expansion-panel>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem;font-family:maiandra}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header{font-family:maiandra}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { faq: [{
+                type: Input
             }] } });
-class CtaSectionStyleFourComponent {
-    constructor(breakpointObserver, _router) {
-        this.breakpointObserver = breakpointObserver;
-        this._router = _router;
-    }
-    ngOnInit() {
-        this.breakpointObserver.observe([
-            "(max-width: 900px)"
-        ]).subscribe((result) => {
-            if (result.matches) {
-                this.sectionContent.sectionTitle.alignLeft = false;
-            }
-            else {
-                this.sectionContent.sectionTitle.alignLeft = true;
-            }
-        });
-    }
-    onClickCtaButton(route) {
-        this._router.navigate([route]);
-    }
-}
-CtaSectionStyleFourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleFourComponent, deps: [{ token: i1$1.BreakpointObserver }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-CtaSectionStyleFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleFourComponent, selector: "cta-section-style-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\n    <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\n    <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\n        <div class=\"section-title\">\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n        </div>\n        <div class=\"buttons-line\">\n            <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\n                {{button.label}}\n            </button>\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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 button{font-family:inherit;font-weight:600;color:#fff;background-color:#155ed4}.main-card .text-side .buttons-line button:nth-child(2){background-color:#fff;color:#155ed4}@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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleFourComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cta-section-style-four', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\n    <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\n    <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\n        <div class=\"section-title\">\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n        </div>\n        <div class=\"buttons-line\">\n            <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\n                {{button.label}}\n            </button>\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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 button{font-family:inherit;font-weight:600;color:#fff;background-color:#155ed4}.main-card .text-side .buttons-line button:nth-child(2){background-color:#fff;color:#155ed4}@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$1.BreakpointObserver }, { type: i1.Router }]; }, propDecorators: { sectionContent: [{
-                type: Input
+class CtaSectionStyleFourComponent {
+    constructor(breakpointObserver, _router) {
+        this.breakpointObserver = breakpointObserver;
+        this._router = _router;
+    }
+    ngOnInit() {
+        this.breakpointObserver.observe([
+            "(max-width: 900px)"
+        ]).subscribe((result) => {
+            if (result.matches) {
+                this.sectionContent.sectionTitle.alignLeft = false;
+            }
+            else {
+                this.sectionContent.sectionTitle.alignLeft = true;
+            }
+        });
+    }
+    onClickCtaButton(route) {
+        this._router.navigate([route]);
+    }
+}
+CtaSectionStyleFourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleFourComponent, deps: [{ token: i1$1.BreakpointObserver }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+CtaSectionStyleFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleFourComponent, selector: "cta-section-style-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n    <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" 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            <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\r\n                {{button.label}}\r\n            </button>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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 button{font-family:inherit;font-weight:600;color:#fff;background-color:#155ed4}.main-card .text-side .buttons-line button:nth-child(2){background-color:#fff;color:#155ed4}@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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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 *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" 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            <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\r\n                {{button.label}}\r\n            </button>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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 button{font-family:inherit;font-weight:600;color:#fff;background-color:#155ed4}.main-card .text-side .buttons-line button:nth-child(2){background-color:#fff;color:#155ed4}@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$1.BreakpointObserver }, { type: i1.Router }]; }, propDecorators: { sectionContent: [{
+                type: Input
             }] } });
-class CtaSectionStyleThreeComponent {
-    constructor(_router) {
-        this._router = _router;
-    }
-    ngOnInit() {
-    }
-    onClickCtaButton(route) {
-        this._router.navigate([route]);
-    }
-}
-CtaSectionStyleThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleThreeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-CtaSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleThreeComponent, selector: "cta-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\n    <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\n    <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage\">\n        <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\n    </div>\n    <div class=\"text-side\">\n        <div class=\"section-title\">\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n        </div>\n        <div class=\"buttons-line\">\n            <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton(button.route)\" [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\n                {{button.label}}\n            </button>\n        </div>\n    </div>\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:4rem;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}.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleThreeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cta-section-style-three', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\n    <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\n    <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage\">\n        <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\n    </div>\n    <div class=\"text-side\">\n        <div class=\"section-title\">\n            <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n        </div>\n        <div class=\"buttons-line\">\n            <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton(button.route)\" [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\n                {{button.label}}\n            </button>\n        </div>\n    </div>\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:4rem;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}.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.Router }]; }, propDecorators: { sectionContent: [{
-                type: Input
+class CtaSectionStyleThreeComponent {
+    constructor(_router) {
+        this._router = _router;
+    }
+    ngOnInit() {
+    }
+    onClickCtaButton(route) {
+        this._router.navigate([route]);
+    }
+}
+CtaSectionStyleThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleThreeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+CtaSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleThreeComponent, selector: "cta-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n    <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\r\n    <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage\">\r\n        <img [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=\"buttons-line\">\r\n            <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton(button.route)\" [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:4rem;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}.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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 *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\r\n    <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage\">\r\n        <img [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=\"buttons-line\">\r\n            <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton(button.route)\" [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:4rem;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}.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.Router }]; }, propDecorators: { sectionContent: [{
+                type: Input
             }] } });
-class VerticalSideTabsComponent {
-    constructor() {
-        this.panelOpenState = false;
-        this.selectedOption = [];
-        this.tabChanged = new EventEmitter();
-    }
-    ngOnInit() {
-        this.changeTab(0);
-    }
-    changeTab(index) {
-        for (let i = 0; i < this.tabs.length; i++) {
-            this.selectedOption[i] = false;
-        }
-        this.selectedOption[index] = true;
-        this.tabChanged.emit(this.tabs[index].tabContent);
-    }
-}
-VerticalSideTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VerticalSideTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-VerticalSideTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: VerticalSideTabsComponent, selector: "vertical-side-tabs", inputs: { tabs: "tabs" }, outputs: { tabChanged: "tabChanged" }, ngImport: i0, template: "<mat-card class=\"as-items\">\n    <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\n        <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \n        'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\n            <div class=\"icon-text\">\n                <div class=\"icon\"><fa-icon [icon]=\"tab.iconName\" class=\"tab-icon\"></fa-icon></div>\n                <h3 class=\"text\">\n                    {{tab.title}}\n                </h3>\n            </div>\n        </button>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.as-items{padding:2rem 1rem;border:.1rem solid #f7f8f9;border-radius:1rem;display:flex;flex-direction:column;height:100%}.as-items .as-btn{border:none;border-left:.3rem solid rgba(50,53,59,.6);margin:auto;width:100%;text-align:left;display:inline;padding:2rem 4%;transition:all ease-in-out .1s;cursor:pointer}.as-items .as-btn:hover{border-left:.3rem solid #32353B;color:#32353b}.as-items .icon-text{display:flex;align-items:center;padding:0 .5rem;font-family:maiandra}.as-items .icon-text .icon{display:inline-block;vertical-align:middle;margin-right:2rem}.as-items .icon-text .icon fa-icon.tab-icon{width:.2rem;height:.2rem}.as-items .item-not-clicked{color:#32353b99;background-color:#fff}.as-items .item-clicked{background-color:#fff;border-left:.3rem solid #155ED4;color:#155ed4}.as-items .item-clicked:hover{border-left:.3rem solid #155ED4;color:#155ed4}@media only screen and (max-width: 56.25em){.as-items{flex-direction:row;width:100%}.as-items .as-btn{border:none;border-bottom:.3rem solid rgba(50,53,59,.6)}.as-items .as-btn:hover{border-left:none;border-bottom:.3rem solid #32353B;color:#32353b}.as-items .item-clicked{border-bottom:.3rem solid #155ED4}.as-items .item-clicked:hover{border-left:none;border-bottom:.3rem solid #155ED4;color:#155ed4}.as-items .as-item{flex-grow:1;width:auto}.as-items .icon-text{flex-direction:column;text-align:center}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VerticalSideTabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vertical-side-tabs', template: "<mat-card class=\"as-items\">\n    <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\n        <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \n        'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\n            <div class=\"icon-text\">\n                <div class=\"icon\"><fa-icon [icon]=\"tab.iconName\" class=\"tab-icon\"></fa-icon></div>\n                <h3 class=\"text\">\n                    {{tab.title}}\n                </h3>\n            </div>\n        </button>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.as-items{padding:2rem 1rem;border:.1rem solid #f7f8f9;border-radius:1rem;display:flex;flex-direction:column;height:100%}.as-items .as-btn{border:none;border-left:.3rem solid rgba(50,53,59,.6);margin:auto;width:100%;text-align:left;display:inline;padding:2rem 4%;transition:all ease-in-out .1s;cursor:pointer}.as-items .as-btn:hover{border-left:.3rem solid #32353B;color:#32353b}.as-items .icon-text{display:flex;align-items:center;padding:0 .5rem;font-family:maiandra}.as-items .icon-text .icon{display:inline-block;vertical-align:middle;margin-right:2rem}.as-items .icon-text .icon fa-icon.tab-icon{width:.2rem;height:.2rem}.as-items .item-not-clicked{color:#32353b99;background-color:#fff}.as-items .item-clicked{background-color:#fff;border-left:.3rem solid #155ED4;color:#155ed4}.as-items .item-clicked:hover{border-left:.3rem solid #155ED4;color:#155ed4}@media only screen and (max-width: 56.25em){.as-items{flex-direction:row;width:100%}.as-items .as-btn{border:none;border-bottom:.3rem solid rgba(50,53,59,.6)}.as-items .as-btn:hover{border-left:none;border-bottom:.3rem solid #32353B;color:#32353b}.as-items .item-clicked{border-bottom:.3rem solid #155ED4}.as-items .item-clicked:hover{border-left:none;border-bottom:.3rem solid #155ED4;color:#155ed4}.as-items .as-item{flex-grow:1;width:auto}.as-items .icon-text{flex-direction:column;text-align:center}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
-                type: Input
-            }], tabChanged: [{
-                type: Output
+class VerticalSideTabsComponent {
+    constructor() {
+        this.panelOpenState = false;
+        this.selectedOption = [];
+        this.tabChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        this.changeTab(0);
+    }
+    changeTab(index) {
+        for (let i = 0; i < this.tabs.length; i++) {
+            this.selectedOption[i] = false;
+        }
+        this.selectedOption[index] = true;
+        this.tabChanged.emit(this.tabs[index].tabContent);
+    }
+}
+VerticalSideTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VerticalSideTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+VerticalSideTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: VerticalSideTabsComponent, selector: "vertical-side-tabs", inputs: { tabs: "tabs" }, outputs: { tabChanged: "tabChanged" }, ngImport: i0, template: "<mat-card class=\"as-items\">\r\n    <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\r\n        <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \r\n        'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\r\n            <div class=\"icon-text\">\r\n                <div class=\"icon\"><fa-icon [icon]=\"tab.iconName\" class=\"tab-icon\"></fa-icon></div>\r\n                <h3 class=\"text\">\r\n                    {{tab.title}}\r\n                </h3>\r\n            </div>\r\n        </button>\r\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.as-items{padding:2rem 1rem;border:.1rem solid #f7f8f9;border-radius:1rem;display:flex;flex-direction:column;height:100%}.as-items .as-btn{border:none;border-left:.3rem solid rgba(50,53,59,.6);margin:auto;width:100%;text-align:left;display:inline;padding:2rem 4%;transition:all ease-in-out .1s;cursor:pointer}.as-items .as-btn:hover{border-left:.3rem solid #32353B;color:#32353b}.as-items .icon-text{display:flex;align-items:center;padding:0 .5rem;font-family:maiandra}.as-items .icon-text .icon{display:inline-block;vertical-align:middle;margin-right:2rem}.as-items .icon-text .icon fa-icon.tab-icon{width:.2rem;height:.2rem}.as-items .item-not-clicked{color:#32353b99;background-color:#fff}.as-items .item-clicked{background-color:#fff;border-left:.3rem solid #155ED4;color:#155ed4}.as-items .item-clicked:hover{border-left:.3rem solid #155ED4;color:#155ed4}@media only screen and (max-width: 56.25em){.as-items{flex-direction:row;width:100%}.as-items .as-btn{border:none;border-bottom:.3rem solid rgba(50,53,59,.6)}.as-items .as-btn:hover{border-left:none;border-bottom:.3rem solid #32353B;color:#32353b}.as-items .item-clicked{border-bottom:.3rem solid #155ED4}.as-items .item-clicked:hover{border-left:none;border-bottom:.3rem solid #155ED4;color:#155ed4}.as-items .as-item{flex-grow:1;width:auto}.as-items .icon-text{flex-direction:column;text-align:center}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VerticalSideTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vertical-side-tabs', template: "<mat-card class=\"as-items\">\r\n    <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\r\n        <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \r\n        'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\r\n            <div class=\"icon-text\">\r\n                <div class=\"icon\"><fa-icon [icon]=\"tab.iconName\" class=\"tab-icon\"></fa-icon></div>\r\n                <h3 class=\"text\">\r\n                    {{tab.title}}\r\n                </h3>\r\n            </div>\r\n        </button>\r\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.as-items{padding:2rem 1rem;border:.1rem solid #f7f8f9;border-radius:1rem;display:flex;flex-direction:column;height:100%}.as-items .as-btn{border:none;border-left:.3rem solid rgba(50,53,59,.6);margin:auto;width:100%;text-align:left;display:inline;padding:2rem 4%;transition:all ease-in-out .1s;cursor:pointer}.as-items .as-btn:hover{border-left:.3rem solid #32353B;color:#32353b}.as-items .icon-text{display:flex;align-items:center;padding:0 .5rem;font-family:maiandra}.as-items .icon-text .icon{display:inline-block;vertical-align:middle;margin-right:2rem}.as-items .icon-text .icon fa-icon.tab-icon{width:.2rem;height:.2rem}.as-items .item-not-clicked{color:#32353b99;background-color:#fff}.as-items .item-clicked{background-color:#fff;border-left:.3rem solid #155ED4;color:#155ed4}.as-items .item-clicked:hover{border-left:.3rem solid #155ED4;color:#155ed4}@media only screen and (max-width: 56.25em){.as-items{flex-direction:row;width:100%}.as-items .as-btn{border:none;border-bottom:.3rem solid rgba(50,53,59,.6)}.as-items .as-btn:hover{border-left:none;border-bottom:.3rem solid #32353B;color:#32353b}.as-items .item-clicked{border-bottom:.3rem solid #155ED4}.as-items .item-clicked:hover{border-left:none;border-bottom:.3rem solid #155ED4;color:#155ed4}.as-items .as-item{flex-grow:1;width:auto}.as-items .icon-text{flex-direction:column;text-align:center}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
+                type: Input
+            }], tabChanged: [{
+                type: Output
             }] } });
-class HeaderSectionOneComponent {
-    constructor(_Router) {
-        this._Router = _Router;
-    }
-    onClickButton(route) {
-        this._Router.navigate([route]);
-    }
-}
-HeaderSectionOneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-HeaderSectionOneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HeaderSectionOneComponent, selector: "header-section-one", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\n    <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\n    <div class=\"section-content\">\n        <div class=\"header-content-container\">\n            <div class=\"title-desc\">\n                <div class=\"title-part\">\n                    <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n                </div>\n                <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\n                    <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\n                        <button mat-raised-button (click)=\"onClickButton(button.route)\">\n                            {{button.label}}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\n            <img [src]=\"sectionContent.previewImage\">\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.image-title-sort{flex-direction:row-reverse}.title-image-sort{flex-direction:row}.image-background{position:relative}.image-background .bg-image{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;object-fit:cover;-moz-filter:blur(.2rem);filter:blur(.2rem)}.detail-head-block{box-shadow:#32325d40 0 .6rem 1.2rem -.2rem,#0000004d 0 .3rem .7rem -.3rem;margin-bottom:2rem;padding:10rem 0rem}.detail-head-block .section-content{display:flex;margin:auto;column-gap:2%;color:#fff;width:90%}@media only screen and (min-width: 1500px){.detail-head-block .section-content{width:150rem}}.detail-head-block .header-content-container{width:69%;padding-top:3rem}.detail-head-block .header-content-container .title-desc{width:100%;display:flex;flex-direction:column;row-gap:2rem}.detail-head-block .header-content-container .title-desc .title-part{width:80%;margin:auto}.detail-head-block .header-content-container .title-desc .main-buttons{display:flex;margin-top:4rem;column-gap:2rem;justify-content:center}.detail-head-block .header-content-container .title-desc .main-buttons button{padding:2rem;border-radius:.5rem;color:#fff;border:none;font-weight:400;font-size:2rem;font-weight:600;font-family:inherit;background-color:#155ed4}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn{transition:.15s ease-in-out}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn:hover{box-shadow:#64646f33 0 .7rem 2.9rem;transform:scale(1.05)}.detail-head-block .img-head{display:grid;height:100%;width:29%;padding:3rem 0rem;align-self:center;justify-items:center}.detail-head-block .img-head img{align-self:right;box-sizing:border-box;width:100%;height:35rem;object-fit:cover;border-radius:1rem;box-shadow:#959da533 0 .8rem 2.4rem}@media only screen and (max-width: 75em){.detail-head-block .header-content-container{width:59%}.detail-head-block .img-head{width:39%}.detail-head-block .img-head img{width:80%;height:40rem}}@media only screen and (min-width: 900px){.detail-head-block .header-content-container .title-desc .align-left-items{margin:auto;width:80%;justify-content:start}}@media only screen and (max-width: 56.25em){.detail-head-block{padding:0rem}.detail-head-block .section-content{display:flex;flex-wrap:wrap;flex-direction:column-reverse;width:100%}.detail-head-block .header-content-container{margin:auto;width:100%}.detail-head-block .header-content-container .title-desc{width:100%;display:grid;align-items:center;margin:2rem 0rem}.detail-head-block .img-head{justify-items:center;clip-path:none;border-radius:1.5rem;margin-top:3rem;width:100%}.detail-head-block .img-head img{height:40rem;width:65%;border-radius:1.5rem;object-fit:cover}}@media only screen and (max-width: 37.5em){.detail-head-block .img-head img{height:33rem;width:80%}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'header-section-one', template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\n    <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\n    <div class=\"section-content\">\n        <div class=\"header-content-container\">\n            <div class=\"title-desc\">\n                <div class=\"title-part\">\n                    <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n                </div>\n                <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\n                    <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\n                        <button mat-raised-button (click)=\"onClickButton(button.route)\">\n                            {{button.label}}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\n            <img [src]=\"sectionContent.previewImage\">\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.image-title-sort{flex-direction:row-reverse}.title-image-sort{flex-direction:row}.image-background{position:relative}.image-background .bg-image{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;object-fit:cover;-moz-filter:blur(.2rem);filter:blur(.2rem)}.detail-head-block{box-shadow:#32325d40 0 .6rem 1.2rem -.2rem,#0000004d 0 .3rem .7rem -.3rem;margin-bottom:2rem;padding:10rem 0rem}.detail-head-block .section-content{display:flex;margin:auto;column-gap:2%;color:#fff;width:90%}@media only screen and (min-width: 1500px){.detail-head-block .section-content{width:150rem}}.detail-head-block .header-content-container{width:69%;padding-top:3rem}.detail-head-block .header-content-container .title-desc{width:100%;display:flex;flex-direction:column;row-gap:2rem}.detail-head-block .header-content-container .title-desc .title-part{width:80%;margin:auto}.detail-head-block .header-content-container .title-desc .main-buttons{display:flex;margin-top:4rem;column-gap:2rem;justify-content:center}.detail-head-block .header-content-container .title-desc .main-buttons button{padding:2rem;border-radius:.5rem;color:#fff;border:none;font-weight:400;font-size:2rem;font-weight:600;font-family:inherit;background-color:#155ed4}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn{transition:.15s ease-in-out}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn:hover{box-shadow:#64646f33 0 .7rem 2.9rem;transform:scale(1.05)}.detail-head-block .img-head{display:grid;height:100%;width:29%;padding:3rem 0rem;align-self:center;justify-items:center}.detail-head-block .img-head img{align-self:right;box-sizing:border-box;width:100%;height:35rem;object-fit:cover;border-radius:1rem;box-shadow:#959da533 0 .8rem 2.4rem}@media only screen and (max-width: 75em){.detail-head-block .header-content-container{width:59%}.detail-head-block .img-head{width:39%}.detail-head-block .img-head img{width:80%;height:40rem}}@media only screen and (min-width: 900px){.detail-head-block .header-content-container .title-desc .align-left-items{margin:auto;width:80%;justify-content:start}}@media only screen and (max-width: 56.25em){.detail-head-block{padding:0rem}.detail-head-block .section-content{display:flex;flex-wrap:wrap;flex-direction:column-reverse;width:100%}.detail-head-block .header-content-container{margin:auto;width:100%}.detail-head-block .header-content-container .title-desc{width:100%;display:grid;align-items:center;margin:2rem 0rem}.detail-head-block .img-head{justify-items:center;clip-path:none;border-radius:1.5rem;margin-top:3rem;width:100%}.detail-head-block .img-head img{height:40rem;width:65%;border-radius:1.5rem;object-fit:cover}}@media only screen and (max-width: 37.5em){.detail-head-block .img-head img{height:33rem;width:80%}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
-                type: Input
+class HeaderSectionOneComponent {
+    constructor(_Router) {
+        this._Router = _Router;
+    }
+    onClickButton(route) {
+        this._Router.navigate([route]);
+    }
+}
+HeaderSectionOneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+HeaderSectionOneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HeaderSectionOneComponent, selector: "header-section-one", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\r\n    <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\r\n    <div class=\"section-content\">\r\n        <div class=\"header-content-container\">\r\n            <div class=\"title-desc\">\r\n                <div class=\"title-part\">\r\n                    <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n                </div>\r\n                <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\r\n                    <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\r\n                        <button mat-raised-button (click)=\"onClickButton(button.route)\">\r\n                            {{button.label}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\r\n            <img [src]=\"sectionContent.previewImage\">\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.image-title-sort{flex-direction:row-reverse}.title-image-sort{flex-direction:row}.image-background{position:relative}.image-background .bg-image{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;object-fit:cover;-moz-filter:blur(.2rem);filter:blur(.2rem)}.detail-head-block{box-shadow:#32325d40 0 .6rem 1.2rem -.2rem,#0000004d 0 .3rem .7rem -.3rem;margin-bottom:2rem;padding:10rem 0rem}.detail-head-block .section-content{display:flex;margin:auto;column-gap:2%;color:#fff;width:90%}@media only screen and (min-width: 1500px){.detail-head-block .section-content{width:150rem}}.detail-head-block .header-content-container{width:69%;padding-top:3rem}.detail-head-block .header-content-container .title-desc{width:100%;display:flex;flex-direction:column;row-gap:2rem}.detail-head-block .header-content-container .title-desc .title-part{width:80%;margin:auto}.detail-head-block .header-content-container .title-desc .main-buttons{display:flex;margin-top:4rem;column-gap:2rem;justify-content:center}.detail-head-block .header-content-container .title-desc .main-buttons button{padding:2rem;border-radius:.5rem;color:#fff;border:none;font-weight:400;font-size:2rem;font-weight:600;font-family:inherit;background-color:#155ed4}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn{transition:.15s ease-in-out}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn:hover{box-shadow:#64646f33 0 .7rem 2.9rem;transform:scale(1.05)}.detail-head-block .img-head{display:grid;height:100%;width:29%;padding:3rem 0rem;align-self:center;justify-items:center}.detail-head-block .img-head img{align-self:right;box-sizing:border-box;width:100%;height:35rem;object-fit:cover;border-radius:1rem;box-shadow:#959da533 0 .8rem 2.4rem}@media only screen and (max-width: 75em){.detail-head-block .header-content-container{width:59%}.detail-head-block .img-head{width:39%}.detail-head-block .img-head img{width:80%;height:40rem}}@media only screen and (min-width: 900px){.detail-head-block .header-content-container .title-desc .align-left-items{margin:auto;width:80%;justify-content:start}}@media only screen and (max-width: 56.25em){.detail-head-block{padding:0rem}.detail-head-block .section-content{display:flex;flex-wrap:wrap;flex-direction:column-reverse;width:100%}.detail-head-block .header-content-container{margin:auto;width:100%}.detail-head-block .header-content-container .title-desc{width:100%;display:grid;align-items:center;margin:2rem 0rem}.detail-head-block .img-head{justify-items:center;clip-path:none;border-radius:1.5rem;margin-top:3rem;width:100%}.detail-head-block .img-head img{height:40rem;width:65%;border-radius:1.5rem;object-fit:cover}}@media only screen and (max-width: 37.5em){.detail-head-block .img-head img{height:33rem;width:80%}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'header-section-one', template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\r\n    <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\r\n    <div class=\"section-content\">\r\n        <div class=\"header-content-container\">\r\n            <div class=\"title-desc\">\r\n                <div class=\"title-part\">\r\n                    <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n                </div>\r\n                <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\r\n                    <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\r\n                        <button mat-raised-button (click)=\"onClickButton(button.route)\">\r\n                            {{button.label}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\r\n            <img [src]=\"sectionContent.previewImage\">\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.image-title-sort{flex-direction:row-reverse}.title-image-sort{flex-direction:row}.image-background{position:relative}.image-background .bg-image{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;object-fit:cover;-moz-filter:blur(.2rem);filter:blur(.2rem)}.detail-head-block{box-shadow:#32325d40 0 .6rem 1.2rem -.2rem,#0000004d 0 .3rem .7rem -.3rem;margin-bottom:2rem;padding:10rem 0rem}.detail-head-block .section-content{display:flex;margin:auto;column-gap:2%;color:#fff;width:90%}@media only screen and (min-width: 1500px){.detail-head-block .section-content{width:150rem}}.detail-head-block .header-content-container{width:69%;padding-top:3rem}.detail-head-block .header-content-container .title-desc{width:100%;display:flex;flex-direction:column;row-gap:2rem}.detail-head-block .header-content-container .title-desc .title-part{width:80%;margin:auto}.detail-head-block .header-content-container .title-desc .main-buttons{display:flex;margin-top:4rem;column-gap:2rem;justify-content:center}.detail-head-block .header-content-container .title-desc .main-buttons button{padding:2rem;border-radius:.5rem;color:#fff;border:none;font-weight:400;font-size:2rem;font-weight:600;font-family:inherit;background-color:#155ed4}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn{transition:.15s ease-in-out}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn:hover{box-shadow:#64646f33 0 .7rem 2.9rem;transform:scale(1.05)}.detail-head-block .img-head{display:grid;height:100%;width:29%;padding:3rem 0rem;align-self:center;justify-items:center}.detail-head-block .img-head img{align-self:right;box-sizing:border-box;width:100%;height:35rem;object-fit:cover;border-radius:1rem;box-shadow:#959da533 0 .8rem 2.4rem}@media only screen and (max-width: 75em){.detail-head-block .header-content-container{width:59%}.detail-head-block .img-head{width:39%}.detail-head-block .img-head img{width:80%;height:40rem}}@media only screen and (min-width: 900px){.detail-head-block .header-content-container .title-desc .align-left-items{margin:auto;width:80%;justify-content:start}}@media only screen and (max-width: 56.25em){.detail-head-block{padding:0rem}.detail-head-block .section-content{display:flex;flex-wrap:wrap;flex-direction:column-reverse;width:100%}.detail-head-block .header-content-container{margin:auto;width:100%}.detail-head-block .header-content-container .title-desc{width:100%;display:grid;align-items:center;margin:2rem 0rem}.detail-head-block .img-head{justify-items:center;clip-path:none;border-radius:1.5rem;margin-top:3rem;width:100%}.detail-head-block .img-head img{height:40rem;width:65%;border-radius:1.5rem;object-fit:cover}}@media only screen and (max-width: 37.5em){.detail-head-block .img-head img{height:33rem;width:80%}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
+                type: Input
             }] } });
-class CustomTooltipComponent {
-    onMouseEnter() {
-        this.showDetails = true;
-    }
-    onMouseClick() {
-        this.showDetails = !this.showDetails;
-    }
-    onMouseLeave() {
-        this.showDetails = false;
-    }
-}
-CustomTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CustomTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomTooltipComponent, selector: "custom-tooltip", ngImport: i0, template: "<div class=\"icon\">\n    <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\n        <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\n            <div>\n                <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n            </div>\n        </div>\n        <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n            <fa-icon icon=\"caret-left\"></fa-icon>\n            <ng-content></ng-content>\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.icon{color:#32353b;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'custom-tooltip', template: "<div class=\"icon\">\n    <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\n        <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\n            <div>\n                <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n            </div>\n        </div>\n        <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n            <fa-icon icon=\"caret-left\"></fa-icon>\n            <ng-content></ng-content>\n        </div>\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.icon{color:#32353b;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\n"] }]
+class CustomTooltipComponent {
+    onMouseEnter() {
+        this.showDetails = true;
+    }
+    onMouseClick() {
+        this.showDetails = !this.showDetails;
+    }
+    onMouseLeave() {
+        this.showDetails = false;
+    }
+}
+CustomTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CustomTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomTooltipComponent, selector: "custom-tooltip", ngImport: i0, template: "<div class=\"icon\">\r\n    <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\r\n        <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\r\n            <div>\r\n                <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\r\n            </div>\r\n        </div>\r\n        <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\r\n            <fa-icon icon=\"caret-left\"></fa-icon>\r\n            <ng-content></ng-content>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.icon{color:#32353b;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'custom-tooltip', template: "<div class=\"icon\">\r\n    <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\r\n        <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\r\n            <div>\r\n                <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\r\n            </div>\r\n        </div>\r\n        <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\r\n            <fa-icon icon=\"caret-left\"></fa-icon>\r\n            <ng-content></ng-content>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.icon{color:#32353b;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\n"] }]
         }] });
-class ValuePropCardComponent {
-    ngOnInit() {
-        if (this.ValuePropContent.iconName) {
-            this.icon = this.ValuePropContent.iconName;
-        }
-    }
-}
-ValuePropCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ValuePropCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropCardComponent, selector: "value-prop-card", inputs: { ValuePropContent: "ValuePropContent" }, ngImport: i0, template: "<div class=\"reason-block\">\n    <div class=\"reason-headline\">\n        <div class=\"reason-icon\" *ngIf=\"icon\">\n            <fa-icon [icon]=\"icon\"></fa-icon>\n        </div>\n        <div class=\"reason-image\" *ngIf=\"!icon\">\n            <img [src]=\"ValuePropContent.image\" alt=\"\">\n        </div>\n        <div class=\"reason-title\">\n            {{ValuePropContent.title}}\n        </div>\n    </div>\n    <div class=\"reason-desc\">\n        {{ValuePropContent.description}}\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.reason-block{border-radius:2rem;padding:.5rem 1.5rem;background-color:#fff;color:#32353b;font-weight:400;font-size:1.6rem;margin:1rem 1rem 2rem;display:inline-block;height:95%;box-shadow:.2rem .2rem .4rem #00000040}.reason-block .reason-headline{display:flex;flex-direction:row;column-gap:2rem;padding:1.5rem 0rem;align-items:center}.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:maiandra}.reason-block .reason-desc{font-weight:300}@media only screen and (max-width: 37.5em){.reason-block{height:93%;width:95%}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'value-prop-card', template: "<div class=\"reason-block\">\n    <div class=\"reason-headline\">\n        <div class=\"reason-icon\" *ngIf=\"icon\">\n            <fa-icon [icon]=\"icon\"></fa-icon>\n        </div>\n        <div class=\"reason-image\" *ngIf=\"!icon\">\n            <img [src]=\"ValuePropContent.image\" alt=\"\">\n        </div>\n        <div class=\"reason-title\">\n            {{ValuePropContent.title}}\n        </div>\n    </div>\n    <div class=\"reason-desc\">\n        {{ValuePropContent.description}}\n    </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.reason-block{border-radius:2rem;padding:.5rem 1.5rem;background-color:#fff;color:#32353b;font-weight:400;font-size:1.6rem;margin:1rem 1rem 2rem;display:inline-block;height:95%;box-shadow:.2rem .2rem .4rem #00000040}.reason-block .reason-headline{display:flex;flex-direction:row;column-gap:2rem;padding:1.5rem 0rem;align-items:center}.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:maiandra}.reason-block .reason-desc{font-weight:300}@media only screen and (max-width: 37.5em){.reason-block{height:93%;width:95%}}\n"] }]
-        }], propDecorators: { ValuePropContent: [{
-                type: Input
+class ValuePropCardComponent {
+    ngOnInit() {
+        if (this.ValuePropContent.iconName) {
+            this.icon = this.ValuePropContent.iconName;
+        }
+    }
+}
+ValuePropCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ValuePropCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropCardComponent, selector: "value-prop-card", inputs: { ValuePropContent: "ValuePropContent" }, ngImport: i0, template: "<div class=\"reason-block\">\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 [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</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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.reason-block{border-radius:2rem;padding:.5rem 1.5rem;background-color:#fff;color:#32353b;font-weight:400;font-size:1.6rem;margin:1rem 1rem 2rem;display:inline-block;height:95%;box-shadow:.2rem .2rem .4rem #00000040}.reason-block .reason-headline{display:flex;flex-direction:row;column-gap:2rem;padding:1.5rem 0rem;align-items:center}.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:maiandra}.reason-block .reason-desc{font-weight:300}@media only screen and (max-width: 37.5em){.reason-block{height:93%;width:95%}}\n"], dependencies: [{ kind: "component", type: i2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'value-prop-card', template: "<div class=\"reason-block\">\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 [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</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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.reason-block{border-radius:2rem;padding:.5rem 1.5rem;background-color:#fff;color:#32353b;font-weight:400;font-size:1.6rem;margin:1rem 1rem 2rem;display:inline-block;height:95%;box-shadow:.2rem .2rem .4rem #00000040}.reason-block .reason-headline{display:flex;flex-direction:row;column-gap:2rem;padding:1.5rem 0rem;align-items:center}.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:maiandra}.reason-block .reason-desc{font-weight:300}@media only screen and (max-width: 37.5em){.reason-block{height:93%;width:95%}}\n"] }]
+        }], propDecorators: { ValuePropContent: [{
+                type: Input
             }] } });
-class JoolerWebsitesSharedModule {
-}
-JoolerWebsitesSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, declarations: [SocialMediaIconsComponent,
-        ComingSoonComponent,
-        AchievementsComponent,
-        CallToActionSectionComponent,
-        GetStartedCTAComponent,
-        ImageGalleryModal,
-        PageSectionStyleTenComponent,
-        PageSectionStyleThirteenComponent,
-        PricingPlansComponent,
-        SectionTitleComponent,
-        SuccessMessageDialogComponent,
-        TeamComponent,
-        ValuesComponent,
-        OurClientsComponent,
-        OurClientListingComponent,
-        PageSectionWithMultipleCardsComponent,
-        CallToActionSectionTwoComponent,
-        CtaSectionStyleFourComponent,
-        ContactUsPageComponent,
-        ChooseCountryWithFlagComponent,
-        PageSectionStyleThreeComponent,
-        FaqCategoryListingComponent,
-        FaqListingComponent,
-        ValuePropsSectionComponent,
-        CtaSectionStyleThreeComponent,
-        HeaderSectionOneComponent,
-        CustomTooltipComponent,
-        VerticalSideTabsComponent,
-        ValuePropCardComponent], imports: [FontAwesomeModule,
-        CommonModule,
-        AppMaterialModule,
-        FontAwesomeSharedModule,
-        GalleriaModule,
-        CarouselModule,
-        ReactiveFormsModule,
-        FormsModule,
-        NgSelectModule,
-        MatTooltipModule], exports: [FontAwesomeModule,
-        AppMaterialModule,
-        SectionTitleComponent,
-        PageSectionStyleTenComponent,
-        FontAwesomeSharedModule,
-        GetStartedCTAComponent,
-        AchievementsComponent,
-        PricingPlansComponent,
-        PageSectionStyleThirteenComponent,
-        ImageGalleryModal,
-        SuccessMessageDialogComponent,
-        CallToActionSectionComponent,
-        TeamComponent,
-        ValuesComponent,
-        OurClientsComponent,
-        OurClientListingComponent,
-        PageSectionWithMultipleCardsComponent,
-        CallToActionSectionTwoComponent,
-        ContactUsPageComponent,
-        ChooseCountryWithFlagComponent,
-        PageSectionStyleThreeComponent,
-        ComingSoonComponent,
-        SocialMediaIconsComponent,
-        MatTooltipModule,
-        FaqCategoryListingComponent,
-        FaqListingComponent,
-        ValuePropsSectionComponent,
-        CtaSectionStyleFourComponent,
-        CtaSectionStyleThreeComponent,
-        HeaderSectionOneComponent,
-        CustomTooltipComponent,
-        VerticalSideTabsComponent,
-        ValuePropCardComponent] });
-JoolerWebsitesSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, imports: [FontAwesomeModule,
-        CommonModule,
-        AppMaterialModule,
-        FontAwesomeSharedModule,
-        GalleriaModule,
-        CarouselModule,
-        ReactiveFormsModule,
-        FormsModule,
-        NgSelectModule,
-        MatTooltipModule, FontAwesomeModule,
-        AppMaterialModule,
-        FontAwesomeSharedModule,
-        MatTooltipModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SocialMediaIconsComponent,
-                        ComingSoonComponent,
-                        AchievementsComponent,
-                        CallToActionSectionComponent,
-                        GetStartedCTAComponent,
-                        ImageGalleryModal,
-                        PageSectionStyleTenComponent,
-                        PageSectionStyleThirteenComponent,
-                        PricingPlansComponent,
-                        SectionTitleComponent,
-                        SuccessMessageDialogComponent,
-                        TeamComponent,
-                        ValuesComponent,
-                        OurClientsComponent,
-                        OurClientListingComponent,
-                        PageSectionWithMultipleCardsComponent,
-                        CallToActionSectionTwoComponent,
-                        CtaSectionStyleFourComponent,
-                        ContactUsPageComponent,
-                        ChooseCountryWithFlagComponent,
-                        PageSectionStyleThreeComponent,
-                        FaqCategoryListingComponent,
-                        FaqListingComponent,
-                        ValuePropsSectionComponent,
-                        CtaSectionStyleThreeComponent,
-                        HeaderSectionOneComponent,
-                        CustomTooltipComponent,
-                        VerticalSideTabsComponent,
-                        ValuePropCardComponent
-                    ],
-                    imports: [
-                        FontAwesomeModule,
-                        CommonModule,
-                        AppMaterialModule,
-                        FontAwesomeSharedModule,
-                        GalleriaModule,
-                        CarouselModule,
-                        ReactiveFormsModule,
-                        FormsModule,
-                        NgSelectModule,
-                        MatTooltipModule
-                    ],
-                    exports: [
-                        FontAwesomeModule,
-                        AppMaterialModule,
-                        SectionTitleComponent,
-                        PageSectionStyleTenComponent,
-                        FontAwesomeSharedModule,
-                        GetStartedCTAComponent,
-                        AchievementsComponent,
-                        PricingPlansComponent,
-                        PageSectionStyleThirteenComponent,
-                        ImageGalleryModal,
-                        SuccessMessageDialogComponent,
-                        CallToActionSectionComponent,
-                        TeamComponent,
-                        ValuesComponent,
-                        OurClientsComponent,
-                        OurClientListingComponent,
-                        PageSectionWithMultipleCardsComponent,
-                        CallToActionSectionTwoComponent,
-                        ContactUsPageComponent,
-                        ChooseCountryWithFlagComponent,
-                        PageSectionStyleThreeComponent,
-                        ComingSoonComponent,
-                        SocialMediaIconsComponent,
-                        MatTooltipModule,
-                        FaqCategoryListingComponent,
-                        FaqListingComponent,
-                        ValuePropsSectionComponent,
-                        CtaSectionStyleFourComponent,
-                        CtaSectionStyleThreeComponent,
-                        HeaderSectionOneComponent,
-                        CustomTooltipComponent,
-                        VerticalSideTabsComponent,
-                        ValuePropCardComponent
-                    ]
-                }]
+class JoolerWebsitesSharedModule {
+}
+JoolerWebsitesSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, declarations: [SocialMediaIconsComponent,
+        ComingSoonComponent,
+        AchievementsComponent,
+        CallToActionSectionComponent,
+        GetStartedCTAComponent,
+        ImageGalleryModal,
+        PageSectionStyleTenComponent,
+        PageSectionStyleThirteenComponent,
+        PricingPlansComponent,
+        SectionTitleComponent,
+        SuccessMessageDialogComponent,
+        TeamComponent,
+        ValuesComponent,
+        OurClientsComponent,
+        OurClientListingComponent,
+        PageSectionWithMultipleCardsComponent,
+        CallToActionSectionTwoComponent,
+        CtaSectionStyleFourComponent,
+        ContactUsPageComponent,
+        ChooseCountryWithFlagComponent,
+        PageSectionStyleThreeComponent,
+        FaqCategoryListingComponent,
+        FaqListingComponent,
+        ValuePropsSectionComponent,
+        CtaSectionStyleThreeComponent,
+        HeaderSectionOneComponent,
+        CustomTooltipComponent,
+        VerticalSideTabsComponent,
+        ValuePropCardComponent], imports: [FontAwesomeModule,
+        CommonModule,
+        AppMaterialModule,
+        FontAwesomeSharedModule,
+        GalleriaModule,
+        CarouselModule,
+        ReactiveFormsModule,
+        FormsModule,
+        NgSelectModule,
+        MatTooltipModule], exports: [FontAwesomeModule,
+        AppMaterialModule,
+        SectionTitleComponent,
+        PageSectionStyleTenComponent,
+        FontAwesomeSharedModule,
+        GetStartedCTAComponent,
+        AchievementsComponent,
+        PricingPlansComponent,
+        PageSectionStyleThirteenComponent,
+        ImageGalleryModal,
+        SuccessMessageDialogComponent,
+        CallToActionSectionComponent,
+        TeamComponent,
+        ValuesComponent,
+        OurClientsComponent,
+        OurClientListingComponent,
+        PageSectionWithMultipleCardsComponent,
+        CallToActionSectionTwoComponent,
+        ContactUsPageComponent,
+        ChooseCountryWithFlagComponent,
+        PageSectionStyleThreeComponent,
+        ComingSoonComponent,
+        SocialMediaIconsComponent,
+        MatTooltipModule,
+        FaqCategoryListingComponent,
+        FaqListingComponent,
+        ValuePropsSectionComponent,
+        CtaSectionStyleFourComponent,
+        CtaSectionStyleThreeComponent,
+        HeaderSectionOneComponent,
+        CustomTooltipComponent,
+        VerticalSideTabsComponent,
+        ValuePropCardComponent] });
+JoolerWebsitesSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, imports: [FontAwesomeModule,
+        CommonModule,
+        AppMaterialModule,
+        FontAwesomeSharedModule,
+        GalleriaModule,
+        CarouselModule,
+        ReactiveFormsModule,
+        FormsModule,
+        NgSelectModule,
+        MatTooltipModule, FontAwesomeModule,
+        AppMaterialModule,
+        FontAwesomeSharedModule,
+        MatTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SocialMediaIconsComponent,
+                        ComingSoonComponent,
+                        AchievementsComponent,
+                        CallToActionSectionComponent,
+                        GetStartedCTAComponent,
+                        ImageGalleryModal,
+                        PageSectionStyleTenComponent,
+                        PageSectionStyleThirteenComponent,
+                        PricingPlansComponent,
+                        SectionTitleComponent,
+                        SuccessMessageDialogComponent,
+                        TeamComponent,
+                        ValuesComponent,
+                        OurClientsComponent,
+                        OurClientListingComponent,
+                        PageSectionWithMultipleCardsComponent,
+                        CallToActionSectionTwoComponent,
+                        CtaSectionStyleFourComponent,
+                        ContactUsPageComponent,
+                        ChooseCountryWithFlagComponent,
+                        PageSectionStyleThreeComponent,
+                        FaqCategoryListingComponent,
+                        FaqListingComponent,
+                        ValuePropsSectionComponent,
+                        CtaSectionStyleThreeComponent,
+                        HeaderSectionOneComponent,
+                        CustomTooltipComponent,
+                        VerticalSideTabsComponent,
+                        ValuePropCardComponent
+                    ],
+                    imports: [
+                        FontAwesomeModule,
+                        CommonModule,
+                        AppMaterialModule,
+                        FontAwesomeSharedModule,
+                        GalleriaModule,
+                        CarouselModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        NgSelectModule,
+                        MatTooltipModule
+                    ],
+                    exports: [
+                        FontAwesomeModule,
+                        AppMaterialModule,
+                        SectionTitleComponent,
+                        PageSectionStyleTenComponent,
+                        FontAwesomeSharedModule,
+                        GetStartedCTAComponent,
+                        AchievementsComponent,
+                        PricingPlansComponent,
+                        PageSectionStyleThirteenComponent,
+                        ImageGalleryModal,
+                        SuccessMessageDialogComponent,
+                        CallToActionSectionComponent,
+                        TeamComponent,
+                        ValuesComponent,
+                        OurClientsComponent,
+                        OurClientListingComponent,
+                        PageSectionWithMultipleCardsComponent,
+                        CallToActionSectionTwoComponent,
+                        ContactUsPageComponent,
+                        ChooseCountryWithFlagComponent,
+                        PageSectionStyleThreeComponent,
+                        ComingSoonComponent,
+                        SocialMediaIconsComponent,
+                        MatTooltipModule,
+                        FaqCategoryListingComponent,
+                        FaqListingComponent,
+                        ValuePropsSectionComponent,
+                        CtaSectionStyleFourComponent,
+                        CtaSectionStyleThreeComponent,
+                        HeaderSectionOneComponent,
+                        CustomTooltipComponent,
+                        VerticalSideTabsComponent,
+                        ValuePropCardComponent
+                    ]
+                }]
         }] });
-class PageSection {
-}
-class PageSectionAction {
+class PageSection {
 }
-class Achievements {
+class PageSectionAction {
 }
-class Achievement {
+class Achievements {
 }
-class ServicePlan {
+class Achievement {
 }
-class ImageSectionAction {
+class ServicePlan {
 }
-class ImageSection {
+class ImageSectionAction {
 }
-class TeamMember {
+class ImageSection {
 }
-class TeamSection {
+class TeamMember {
 }
-class PageSectionStyleFive {
+class TeamSection {
 }
-var AccountType;
-(function (AccountType) {
-    AccountType[AccountType["CONSUMERCLIENT"] = 0] = "CONSUMERCLIENT";
-    AccountType[AccountType["BUSINESSCLIENT"] = 1] = "BUSINESSCLIENT";
-    AccountType[AccountType["SUPPLIER"] = 2] = "SUPPLIER";
-    AccountType[AccountType["COMPANY"] = 3] = "COMPANY";
-    AccountType[AccountType["CERTIFICATIONENTTIY"] = 4] = "CERTIFICATIONENTTIY";
+var AccountType;
+(function (AccountType) {
+    AccountType[AccountType["CONSUMERCLIENT"] = 0] = "CONSUMERCLIENT";
+    AccountType[AccountType["BUSINESSCLIENT"] = 1] = "BUSINESSCLIENT";
+    AccountType[AccountType["SUPPLIER"] = 2] = "SUPPLIER";
+    AccountType[AccountType["COMPANY"] = 3] = "COMPANY";
+    AccountType[AccountType["CERTIFICATIONENTTIY"] = 4] = "CERTIFICATIONENTTIY";
 })(AccountType || (AccountType = {}));
-class Account {
+class Account {
 }
-class Address {
+class Address {
 }
-class City {
+class City {
 }
-class Country {
+class Country {
 }
-var UserType;
-(function (UserType) {
-    UserType[UserType["CONSUMER"] = 0] = "CONSUMER";
-    UserType[UserType["ERP"] = 1] = "ERP";
-    UserType[UserType["SECOND_LEVEL"] = 2] = "SECOND_LEVEL";
-    UserType[UserType["ADMIN"] = 3] = "ADMIN";
+var UserType;
+(function (UserType) {
+    UserType[UserType["CONSUMER"] = 0] = "CONSUMER";
+    UserType[UserType["ERP"] = 1] = "ERP";
+    UserType[UserType["SECOND_LEVEL"] = 2] = "SECOND_LEVEL";
+    UserType[UserType["ADMIN"] = 3] = "ADMIN";
 })(UserType || (UserType = {}));
-class User {
+class User {
 }
-class CallToActionSectionTwo {
+class CallToActionSectionTwo {
 }
-class LinkText {
+class LinkText {
 }
-class socialMediaLinks {
+class socialMediaLinks {
 }
-class Perks {
+class Perks {
 }
-class FAQCategory {
+class FAQCategory {
 }
-class FAQSubcategory {
+class FAQSubcategory {
 }
-class FAQ {
+class FAQ {
 }
-class callToActionButton {
+class callToActionButton {
 }
-/*
- * Public API Surface of jooler-websites-shared
+/*
+ * Public API Surface of jooler-websites-shared
  */
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
-export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, CallToActionSectionTwo, CallToActionSectionTwoComponent, ChooseCountryWithFlagComponent, City, ComingSoonComponent, ContactUsPageComponent, Country, CtaSectionStyleFourComponent, CtaSectionStyleThreeComponent, CustomTooltipComponent, FAQ, FAQCategory, FAQSubcategory, FaqCategoryListingComponent, FaqListingComponent, GetStartedCTAComponent, HeaderSectionOneComponent, ImageGalleryModal, ImageSection, ImageSectionAction, JoolerWebsitesSharedModule, LinkText, OurClientListingComponent, OurClientsComponent, PageSection, PageSectionAction, PageSectionStyleFive, PageSectionStyleTenComponent, PageSectionStyleThirteen, PageSectionStyleThirteenComponent, PageSectionStyleThreeComponent, PageSectionWithMultipleCardsComponent, Perks, PricingPlansComponent, SectionTitleComponent, ServicePlan, SocialMediaIconsComponent, SuccessMessageDialogComponent, TeamComponent, TeamMember, TeamSection, User, UserType, ValuePropCardComponent, ValuePropsSectionComponent, ValuesComponent, VerticalSideTabsComponent, callToActionButton, socialMediaLinks };
+export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, CallToActionSectionTwo, CallToActionSectionTwoComponent, ChooseCountryWithFlagComponent, City, ComingSoonComponent, ContactUsPageComponent, Country, CtaSectionStyleFourComponent, CtaSectionStyleThreeComponent, CustomTooltipComponent, FAQ, FAQCategory, FAQSubcategory, FaqCategoryListingComponent, FaqListingComponent, GetStartedCTAComponent, HeaderSectionOneComponent, ImageGalleryModal, ImageSection, ImageSectionAction, JoolerWebsitesSharedModule, LinkText, OurClientListingComponent, OurClientsComponent, PageSection, PageSectionAction, PageSectionStyleTenComponent, PageSectionStyleThirteen, PageSectionStyleThirteenComponent, PageSectionStyleThreeComponent, PageSectionWithMultipleCardsComponent, Perks, PricingPlansComponent, SectionTitleComponent, ServicePlan, SocialMediaIconsComponent, SuccessMessageDialogComponent, TeamComponent, TeamMember, TeamSection, User, UserType, ValuePropCardComponent, ValuePropsSectionComponent, ValuesComponent, VerticalSideTabsComponent, callToActionButton, socialMediaLinks };
 //# sourceMappingURL=jooler-websites-shared.mjs.map