diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 4949cdf..5161da1 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -36,3 +36,5 @@ deploy:
   environment:
     name: prod
     url: https://poc.serva.la/
+  only:
+    - main
diff --git a/hub/services/migrations/0005_service_is_featured.py b/hub/services/migrations/0005_service_is_featured.py
new file mode 100644
index 0000000..e21e2b0
--- /dev/null
+++ b/hub/services/migrations/0005_service_is_featured.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.1.5 on 2025-02-25 15:38
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("services", "0004_lead_message"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="service",
+            name="is_featured",
+            field=models.BooleanField(default=False),
+        ),
+    ]
diff --git a/hub/services/migrations/0006_cloudprovider_is_featured_and_more.py b/hub/services/migrations/0006_cloudprovider_is_featured_and_more.py
new file mode 100644
index 0000000..f623bbf
--- /dev/null
+++ b/hub/services/migrations/0006_cloudprovider_is_featured_and_more.py
@@ -0,0 +1,23 @@
+# Generated by Django 5.1.5 on 2025-02-25 15:54
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("services", "0005_service_is_featured"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="cloudprovider",
+            name="is_featured",
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name="consultingpartner",
+            name="is_featured",
+            field=models.BooleanField(default=False),
+        ),
+    ]
diff --git a/hub/services/models.py b/hub/services/models.py
index 23bb904..5ac188c 100644
--- a/hub/services/models.py
+++ b/hub/services/models.py
@@ -55,6 +55,7 @@ class CloudProvider(models.Model):
         null=True,
         blank=True,
     )
+    is_featured = models.BooleanField(default=False)
 
     def __str__(self):
         return self.name
@@ -105,6 +106,7 @@ class Service(models.Model):
     )
     categories = models.ManyToManyField(Category, related_name="services")
     features = ProseEditorField()
+    is_featured = models.BooleanField(default=False)
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
 
@@ -139,6 +141,7 @@ class ConsultingPartner(models.Model):
     cloud_providers = models.ManyToManyField(
         CloudProvider, related_name="consulting_partners", blank=True
     )
+    is_featured = models.BooleanField(default=False)
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
 
diff --git a/hub/services/static/css/fonts/Archivo-Italic-VariableFont_wdth,wght.ttf b/hub/services/static/css/fonts/Archivo-Italic-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..d2ecea8
Binary files /dev/null and b/hub/services/static/css/fonts/Archivo-Italic-VariableFont_wdth,wght.ttf differ
diff --git a/hub/services/static/css/fonts/Archivo-VariableFont_wdth,wght.ttf b/hub/services/static/css/fonts/Archivo-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..9edfc8f
Binary files /dev/null and b/hub/services/static/css/fonts/Archivo-VariableFont_wdth,wght.ttf differ
diff --git a/hub/services/static/css/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf b/hub/services/static/css/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..7de3b5b
Binary files /dev/null and b/hub/services/static/css/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf differ
diff --git a/hub/services/static/css/fonts/PlusJakartaSans-VariableFont_wght.ttf b/hub/services/static/css/fonts/PlusJakartaSans-VariableFont_wght.ttf
new file mode 100644
index 0000000..bdd4985
Binary files /dev/null and b/hub/services/static/css/fonts/PlusJakartaSans-VariableFont_wght.ttf differ
diff --git a/hub/services/static/css/servala-main.css b/hub/services/static/css/servala-main.css
new file mode 100644
index 0000000..60b13e8
--- /dev/null
+++ b/hub/services/static/css/servala-main.css
@@ -0,0 +1,12311 @@
+@charset "UTF-8";
+
+@font-face {
+    font-family: 'Archivo';
+    src: url('/static/css/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
+    font-weight: 100 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Archivo';
+    src: url('/static/css/fonts/Archivo-Italic-VariableFont_wdth,wght.ttf') format('truetype');
+    font-weight: 100 900;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    src: url('/static/css/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
+    font-weight: 200 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    src: url('/static/css/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
+    font-weight: 200 800;
+    font-style: italic;
+}
+
+:root,
+[data-bs-theme=light] {
+    --bs-blue: #0d6efd;
+    --bs-indigo: #6610f2;
+    --bs-purple: #6f42c1;
+    --bs-pink: #d63384;
+    --bs-red: #dc3545;
+    --bs-orange: #fd7e14;
+    --bs-yellow: #ffc107;
+    --bs-green: #198754;
+    --bs-teal: #20c997;
+    --bs-cyan: #0dcaf0;
+    --bs-black: #000;
+    --bs-white: #fff;
+    --bs-gray: #6c757d;
+    --bs-gray-dark: #343a40;
+    --bs-gray-100: #f8f9fa;
+    --bs-gray-200: #e9ecef;
+    --bs-gray-300: #dee2e6;
+    --bs-gray-400: #ced4da;
+    --bs-gray-500: #adb5bd;
+    --bs-gray-600: #6c757d;
+    --bs-gray-700: #495057;
+    --bs-gray-800: #343a40;
+    --bs-gray-900: #212529;
+    --bs-primary: #9A63EC;
+    --bs-secondary: #E5E7EB;
+    --bs-success: #198754;
+    --bs-info: #0dcaf0;
+    --bs-warning: #ffc107;
+    --bs-danger: #dc3545;
+    --bs-light: #f8f9fa;
+    --bs-dark: #212529;
+    --bs-primary-rgb: 154, 99, 236;
+    --bs-secondary-rgb: 229, 231, 235;
+    --bs-success-rgb: 25, 135, 84;
+    --bs-info-rgb: 13, 202, 240;
+    --bs-warning-rgb: 255, 193, 7;
+    --bs-danger-rgb: 220, 53, 69;
+    --bs-light-rgb: 248, 249, 250;
+    --bs-dark-rgb: 33, 37, 41;
+    --bs-primary-text-emphasis: #3e285e;
+    --bs-secondary-text-emphasis: #5c5c5e;
+    --bs-success-text-emphasis: #0a3622;
+    --bs-info-text-emphasis: #055160;
+    --bs-warning-text-emphasis: #664d03;
+    --bs-danger-text-emphasis: #58151c;
+    --bs-light-text-emphasis: #333333;
+    --bs-dark-text-emphasis: #495057;
+    --bs-primary-bg-subtle: #160037;
+    --bs-secondary-bg-subtle: #fafafb;
+    --bs-success-bg-subtle: #d1e7dd;
+    --bs-info-bg-subtle: #cff4fc;
+    --bs-warning-bg-subtle: #fff3cd;
+    --bs-danger-bg-subtle: #f8d7da;
+    --bs-light-bg-subtle: #fcfcfd;
+    --bs-dark-bg-subtle: #ced4da;
+    --bs-primary-border-subtle: #d7c1f7;
+    --bs-secondary-border-subtle: #f5f5f7;
+    --bs-success-border-subtle: #a3cfbb;
+    --bs-info-border-subtle: #9eeaf9;
+    --bs-warning-border-subtle: #ffe69c;
+    --bs-danger-border-subtle: #f1aeb5;
+    --bs-light-border-subtle: #e9ecef;
+    --bs-dark-border-subtle: #adb5bd;
+    --bs-white-rgb: 255, 255, 255;
+    --bs-black-rgb: 0, 0, 0;
+    --bs-font-sans-serif: "Cairo", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --bs-font-monospace: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
+    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
+    --bs-body-font-family: "Cairo", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --bs-body-font-size: 1rem;
+    --bs-body-font-weight: 400;
+    --bs-body-line-height: 1.5;
+    --bs-body-color: #4B5563;
+    --bs-body-color-rgb: 75, 85, 99;
+    --bs-body-bg: #fff;
+    --bs-body-bg-rgb: 255, 255, 255;
+    --bs-emphasis-color: #000;
+    --bs-emphasis-color-rgb: 0, 0, 0;
+    --bs-secondary-color: rgba(75, 85, 99, .75);
+    --bs-secondary-color-rgb: 75, 85, 99;
+    --bs-secondary-bg: #e9ecef;
+    --bs-secondary-bg-rgb: 233, 236, 239;
+    --bs-tertiary-color: rgba(75, 85, 99, .5);
+    --bs-tertiary-color-rgb: 75, 85, 99;
+    --bs-tertiary-bg: #f8f9fa;
+    --bs-tertiary-bg-rgb: 248, 249, 250;
+    --bs-heading-color: inherit;
+    --bs-link-color: #4B5563;
+    --bs-link-color-rgb: 75, 85, 99;
+    --bs-link-decoration: none;
+    --bs-link-hover-color: #3c444f;
+    --bs-link-hover-color-rgb: 60, 68, 79;
+    --bs-code-color: #d63384;
+    --bs-highlight-color: #4B5563;
+    --bs-highlight-bg: #fff3cd;
+    --bs-border-width: 1px;
+    --bs-border-style: solid;
+    --bs-border-color: #dee2e6;
+    --bs-border-color-translucent: rgba(0, 0, 0, .175);
+    --bs-border-radius: .4rem;
+    --bs-border-radius-sm: .25rem;
+    --bs-border-radius-lg: .5rem;
+    --bs-border-radius-xl: 1rem;
+    --bs-border-radius-xxl: 2rem;
+    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
+    --bs-border-radius-pill: 50rem;
+    --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
+    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
+    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);
+    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);
+    --bs-focus-ring-width: .25rem;
+    --bs-focus-ring-opacity: .25;
+    --bs-focus-ring-color: rgba(154, 99, 236, .25);
+    --bs-form-valid-color: #198754;
+    --bs-form-valid-border-color: #198754;
+    --bs-form-invalid-color: #dc3545;
+    --bs-form-invalid-border-color: #dc3545
+}
+
+[data-bs-theme=dark] {
+    color-scheme: dark;
+    --bs-body-color: #dee2e6;
+    --bs-body-color-rgb: 222, 226, 230;
+    --bs-body-bg: #212529;
+    --bs-body-bg-rgb: 33, 37, 41;
+    --bs-emphasis-color: #fff;
+    --bs-emphasis-color-rgb: 255, 255, 255;
+    --bs-secondary-color: rgba(222, 226, 230, .75);
+    --bs-secondary-color-rgb: 222, 226, 230;
+    --bs-secondary-bg: #343a40;
+    --bs-secondary-bg-rgb: 52, 58, 64;
+    --bs-tertiary-color: rgba(222, 226, 230, .5);
+    --bs-tertiary-color-rgb: 222, 226, 230;
+    --bs-tertiary-bg: #2b3035;
+    --bs-tertiary-bg-rgb: 43, 48, 53;
+    --bs-primary-text-emphasis: #c2a1f4;
+    --bs-secondary-text-emphasis: #eff1f3;
+    --bs-success-text-emphasis: #75b798;
+    --bs-info-text-emphasis: #6edff6;
+    --bs-warning-text-emphasis: #ffda6a;
+    --bs-danger-text-emphasis: #ea868f;
+    --bs-light-text-emphasis: #f8f9fa;
+    --bs-dark-text-emphasis: #dee2e6;
+    --bs-primary-bg-subtle: #1f142f;
+    --bs-secondary-bg-subtle: #2e2e2f;
+    --bs-success-bg-subtle: #051b11;
+    --bs-info-bg-subtle: #032830;
+    --bs-warning-bg-subtle: #332701;
+    --bs-danger-bg-subtle: #2c0b0e;
+    --bs-light-bg-subtle: #343a40;
+    --bs-dark-bg-subtle: #1a1d20;
+    --bs-primary-border-subtle: #5c3b8e;
+    --bs-secondary-border-subtle: #898b8d;
+    --bs-success-border-subtle: #0f5132;
+    --bs-info-border-subtle: #087990;
+    --bs-warning-border-subtle: #997404;
+    --bs-danger-border-subtle: #842029;
+    --bs-light-border-subtle: #495057;
+    --bs-dark-border-subtle: #343a40;
+    --bs-heading-color: inherit;
+    --bs-link-color: #c2a1f4;
+    --bs-link-hover-color: #ceb4f6;
+    --bs-link-color-rgb: 194, 161, 244;
+    --bs-link-hover-color-rgb: 206, 180, 246;
+    --bs-code-color: #e685b5;
+    --bs-highlight-color: #dee2e6;
+    --bs-highlight-bg: #664d03;
+    --bs-border-color: #495057;
+    --bs-border-color-translucent: rgba(255, 255, 255, .15);
+    --bs-form-valid-color: #75b798;
+    --bs-form-valid-border-color: #75b798;
+    --bs-form-invalid-color: #ea868f;
+    --bs-form-invalid-border-color: #ea868f
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    :root {
+        scroll-behavior: smooth
+    }
+}
+
+body {
+    margin: 0;
+    font-family: var(--bs-body-font-family);
+    font-size: var(--bs-body-font-size);
+    font-weight: var(--bs-body-font-weight);
+    line-height: var(--bs-body-line-height);
+    color: var(--bs-body-color);
+    text-align: var(--bs-body-text-align);
+    background-color: var(--bs-body-bg);
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+}
+
+hr {
+    margin: 1rem 0;
+    color: inherit;
+    border: 0;
+    border-top: var(--bs-border-width) solid;
+    opacity: .25
+}
+
+h6,
+.h6,
+h5,
+.h5,
+h4,
+.h4,
+h3,
+.h3,
+h2,
+.h2,
+h1,
+.h1 {
+    margin-top: 0;
+    margin-bottom: .5rem;
+    font-weight: 500;
+    line-height: 1.2;
+    color: var(--bs-heading-color)
+}
+
+h1,
+.h1 {
+    font-size: calc(1.375rem + 1.5vw)
+}
+
+@media (min-width: 1200px) {
+
+    h1,
+    .h1 {
+        font-size: 2.5rem
+    }
+}
+
+h2,
+.h2 {
+    font-size: calc(1.325rem + .9vw)
+}
+
+@media (min-width: 1200px) {
+
+    h2,
+    .h2 {
+        font-size: 2rem
+    }
+}
+
+h3,
+.h3 {
+    font-size: calc(1.3rem + .6vw)
+}
+
+@media (min-width: 1200px) {
+
+    h3,
+    .h3 {
+        font-size: 1.75rem
+    }
+}
+
+h4,
+.h4 {
+    font-size: calc(1.275rem + .3vw)
+}
+
+@media (min-width: 1200px) {
+
+    h4,
+    .h4 {
+        font-size: 1.5rem
+    }
+}
+
+h5,
+.h5 {
+    font-size: 1.25rem
+}
+
+h6,
+.h6 {
+    font-size: 1rem
+}
+
+p {
+    margin-top: 0;
+    margin-bottom: 1rem
+}
+
+abbr[title] {
+    text-decoration: underline dotted;
+    cursor: help;
+    text-decoration-skip-ink: none
+}
+
+address {
+    margin-bottom: 1rem;
+    font-style: normal;
+    line-height: inherit
+}
+
+ol,
+ul {
+    padding-left: 2rem
+}
+
+ol,
+ul,
+dl {
+    margin-top: 0;
+    margin-bottom: 1rem
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+    margin-bottom: 0
+}
+
+dt {
+    font-weight: 700
+}
+
+dd {
+    margin-bottom: .5rem;
+    margin-left: 0
+}
+
+blockquote {
+    margin: 0 0 1rem
+}
+
+b,
+strong {
+    font-weight: bolder
+}
+
+small,
+.small {
+    font-size: .875em
+}
+
+mark,
+.mark {
+    padding: .1875em;
+    color: var(--bs-highlight-color);
+    background-color: var(--bs-highlight-bg)
+}
+
+sub,
+sup {
+    position: relative;
+    font-size: .75em;
+    line-height: 0;
+    vertical-align: baseline
+}
+
+sub {
+    bottom: -.25em
+}
+
+sup {
+    top: -.5em
+}
+
+a {
+    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+    text-decoration: none
+}
+
+a:hover {
+    --bs-link-color-rgb: var(--bs-link-hover-color-rgb)
+}
+
+a:not([href]):not([class]),
+a:not([href]):not([class]):hover {
+    color: inherit;
+    text-decoration: none
+}
+
+pre,
+code,
+kbd,
+samp {
+    font-family: var(--bs-font-monospace);
+    font-size: 1em
+}
+
+pre {
+    display: block;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    overflow: auto;
+    font-size: .875em
+}
+
+pre code {
+    font-size: inherit;
+    color: inherit;
+    word-break: normal
+}
+
+code {
+    font-size: .875em;
+    color: var(--bs-code-color);
+    word-wrap: break-word
+}
+
+a>code {
+    color: inherit
+}
+
+kbd {
+    padding: .1875rem .375rem;
+    font-size: .875em;
+    color: var(--bs-body-bg);
+    background-color: var(--bs-body-color);
+    border-radius: .25rem
+}
+
+kbd kbd {
+    padding: 0;
+    font-size: 1em
+}
+
+figure {
+    margin: 0 0 1rem
+}
+
+img,
+svg {
+    vertical-align: middle
+}
+
+table {
+    caption-side: bottom;
+    border-collapse: collapse
+}
+
+caption {
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    color: var(--bs-secondary-color);
+    text-align: left
+}
+
+th {
+    text-align: inherit;
+    text-align: -webkit-match-parent
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0
+}
+
+label {
+    display: inline-block
+}
+
+button {
+    border-radius: 0
+}
+
+button:focus:not(:focus-visible) {
+    outline: 0
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit
+}
+
+button,
+select {
+    text-transform: none
+}
+
+[role=button] {
+    cursor: pointer
+}
+
+select {
+    word-wrap: normal
+}
+
+select:disabled {
+    opacity: 1
+}
+
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+    display: none !important
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+    -webkit-appearance: button
+}
+
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+    cursor: pointer
+}
+
+::-moz-focus-inner {
+    padding: 0;
+    border-style: none
+}
+
+textarea {
+    resize: vertical
+}
+
+fieldset {
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    border: 0
+}
+
+legend {
+    float: left;
+    width: 100%;
+    padding: 0;
+    margin-bottom: .5rem;
+    font-size: calc(1.275rem + .3vw);
+    line-height: inherit
+}
+
+@media (min-width: 1200px) {
+    legend {
+        font-size: 1.5rem
+    }
+}
+
+legend+* {
+    clear: left
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+    padding: 0
+}
+
+::-webkit-inner-spin-button {
+    height: auto
+}
+
+[type=search] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px
+}
+
+::-webkit-search-decoration {
+    -webkit-appearance: none
+}
+
+::-webkit-color-swatch-wrapper {
+    padding: 0
+}
+
+::file-selector-button {
+    font: inherit;
+    -webkit-appearance: button
+}
+
+output {
+    display: inline-block
+}
+
+iframe {
+    border: 0
+}
+
+summary {
+    display: list-item;
+    cursor: pointer
+}
+
+progress {
+    vertical-align: baseline
+}
+
+[hidden] {
+    display: none !important
+}
+
+.lead {
+    font-size: 1.25rem;
+    font-weight: 300
+}
+
+.display-1 {
+    font-size: calc(1.625rem + 4.5vw);
+    font-weight: 300;
+    line-height: 1.2
+}
+
+@media (min-width: 1200px) {
+    .display-1 {
+        font-size: 5rem
+    }
+}
+
+.display-2 {
+    font-size: calc(1.575rem + 3.9vw);
+    font-weight: 300;
+    line-height: 1.2
+}
+
+@media (min-width: 1200px) {
+    .display-2 {
+        font-size: 4.5rem
+    }
+}
+
+.display-3 {
+    font-size: calc(1.525rem + 3.3vw);
+    font-weight: 300;
+    line-height: 1.2
+}
+
+@media (min-width: 1200px) {
+    .display-3 {
+        font-size: 4rem
+    }
+}
+
+.display-4 {
+    font-size: calc(1.475rem + 2.7vw);
+    font-weight: 300;
+    line-height: 1.2
+}
+
+@media (min-width: 1200px) {
+    .display-4 {
+        font-size: 3.5rem
+    }
+}
+
+.display-5 {
+    font-size: calc(1.425rem + 2.1vw);
+    font-weight: 300;
+    line-height: 1.2
+}
+
+@media (min-width: 1200px) {
+    .display-5 {
+        font-size: 3rem
+    }
+}
+
+.display-6 {
+    font-size: calc(1.375rem + 1.5vw);
+    font-weight: 300;
+    line-height: 1.2
+}
+
+@media (min-width: 1200px) {
+    .display-6 {
+        font-size: 2.5rem
+    }
+}
+
+.list-unstyled,
+.list-inline {
+    padding-left: 0;
+    list-style: none
+}
+
+.list-inline-item {
+    display: inline-block
+}
+
+.list-inline-item:not(:last-child) {
+    margin-right: .5rem
+}
+
+.initialism {
+    font-size: .875em;
+    text-transform: uppercase
+}
+
+.blockquote {
+    margin-bottom: 1rem;
+    font-size: 1.25rem
+}
+
+.blockquote>:last-child {
+    margin-bottom: 0
+}
+
+.blockquote-footer {
+    margin-top: -1rem;
+    margin-bottom: 1rem;
+    font-size: .875em;
+    color: #6c757d
+}
+
+.blockquote-footer:before {
+    content: "— "
+}
+
+.img-fluid {
+    max-width: 100%;
+    height: auto
+}
+
+.img-thumbnail {
+    padding: .25rem;
+    background-color: var(--bs-body-bg);
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    box-shadow: var(--bs-box-shadow-sm);
+    max-width: 100%;
+    height: auto
+}
+
+.figure {
+    display: inline-block
+}
+
+.figure-img {
+    margin-bottom: .5rem;
+    line-height: 1
+}
+
+.figure-caption {
+    font-size: .875em;
+    color: var(--bs-secondary-color)
+}
+
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+    --bs-gutter-x: 20px;
+    --bs-gutter-y: 0;
+    width: 100%;
+    padding-right: calc(var(--bs-gutter-x) * .5);
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    margin-right: auto;
+    margin-left: auto
+}
+
+@media (min-width: 576px) {
+
+    .container-sm,
+    .container {
+        max-width: 540px
+    }
+}
+
+@media (min-width: 768px) {
+
+    .container-md,
+    .container-sm,
+    .container {
+        max-width: 720px
+    }
+}
+
+@media (min-width: 992px) {
+
+    .container-lg,
+    .container-md,
+    .container-sm,
+    .container {
+        max-width: 960px
+    }
+}
+
+@media (min-width: 1200px) {
+
+    .container-xl,
+    .container-lg,
+    .container-md,
+    .container-sm,
+    .container {
+        max-width: 1080px
+    }
+}
+
+@media (min-width: 1400px) {
+
+    .container-xxl,
+    .container-xl,
+    .container-lg,
+    .container-md,
+    .container-sm,
+    .container {
+        max-width: 1200px
+    }
+}
+
+:root {
+    --bs-breakpoint-xs: 0;
+    --bs-breakpoint-sm: 576px;
+    --bs-breakpoint-md: 768px;
+    --bs-breakpoint-lg: 992px;
+    --bs-breakpoint-xl: 1200px;
+    --bs-breakpoint-xxl: 1400px
+}
+
+.row {
+    --bs-gutter-x: 20px;
+    --bs-gutter-y: 0;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: calc(-1 * var(--bs-gutter-y));
+    margin-right: calc(-.5 * var(--bs-gutter-x));
+    margin-left: calc(-.5 * var(--bs-gutter-x))
+}
+
+.row>* {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    padding-right: calc(var(--bs-gutter-x) * .5);
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    margin-top: var(--bs-gutter-y)
+}
+
+.col {
+    flex: 1 0 0%
+}
+
+.row-cols-auto>* {
+    flex: 0 0 auto;
+    width: auto
+}
+
+.row-cols-1>* {
+    flex: 0 0 auto;
+    width: 100%
+}
+
+.row-cols-2>* {
+    flex: 0 0 auto;
+    width: 50%
+}
+
+.row-cols-3>* {
+    flex: 0 0 auto;
+    width: 33.33333333%
+}
+
+.row-cols-4>* {
+    flex: 0 0 auto;
+    width: 25%
+}
+
+.row-cols-5>* {
+    flex: 0 0 auto;
+    width: 20%
+}
+
+.row-cols-6>* {
+    flex: 0 0 auto;
+    width: 16.66666667%
+}
+
+.col-auto {
+    flex: 0 0 auto;
+    width: auto
+}
+
+.col-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%
+}
+
+.col-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%
+}
+
+.col-3 {
+    flex: 0 0 auto;
+    width: 25%
+}
+
+.col-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%
+}
+
+.col-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%
+}
+
+.col-6 {
+    flex: 0 0 auto;
+    width: 50%
+}
+
+.col-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%
+}
+
+.col-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%
+}
+
+.col-9 {
+    flex: 0 0 auto;
+    width: 75%
+}
+
+.col-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%
+}
+
+.col-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%
+}
+
+.col-12 {
+    flex: 0 0 auto;
+    width: 100%
+}
+
+.offset-1 {
+    margin-left: 8.33333333%
+}
+
+.offset-2 {
+    margin-left: 16.66666667%
+}
+
+.offset-3 {
+    margin-left: 25%
+}
+
+.offset-4 {
+    margin-left: 33.33333333%
+}
+
+.offset-5 {
+    margin-left: 41.66666667%
+}
+
+.offset-6 {
+    margin-left: 50%
+}
+
+.offset-7 {
+    margin-left: 58.33333333%
+}
+
+.offset-8 {
+    margin-left: 66.66666667%
+}
+
+.offset-9 {
+    margin-left: 75%
+}
+
+.offset-10 {
+    margin-left: 83.33333333%
+}
+
+.offset-11 {
+    margin-left: 91.66666667%
+}
+
+.g-0,
+.gx-0 {
+    --bs-gutter-x: 0
+}
+
+.g-0,
+.gy-0 {
+    --bs-gutter-y: 0
+}
+
+.g-1,
+.gx-1 {
+    --bs-gutter-x: .25rem
+}
+
+.g-1,
+.gy-1 {
+    --bs-gutter-y: .25rem
+}
+
+.g-2,
+.gx-2 {
+    --bs-gutter-x: .5rem
+}
+
+.g-2,
+.gy-2 {
+    --bs-gutter-y: .5rem
+}
+
+.g-3,
+.gx-3 {
+    --bs-gutter-x: 1rem
+}
+
+.g-3,
+.gy-3 {
+    --bs-gutter-y: 1rem
+}
+
+.g-4,
+.gx-4 {
+    --bs-gutter-x: 1.5rem
+}
+
+.g-4,
+.gy-4 {
+    --bs-gutter-y: 1.5rem
+}
+
+.g-5,
+.gx-5 {
+    --bs-gutter-x: 3rem
+}
+
+.g-5,
+.gy-5 {
+    --bs-gutter-y: 3rem
+}
+
+@media (min-width: 576px) {
+    .col-sm {
+        flex: 1 0 0%
+    }
+
+    .row-cols-sm-auto>* {
+        flex: 0 0 auto;
+        width: auto
+    }
+
+    .row-cols-sm-1>* {
+        flex: 0 0 auto;
+        width: 100%
+    }
+
+    .row-cols-sm-2>* {
+        flex: 0 0 auto;
+        width: 50%
+    }
+
+    .row-cols-sm-3>* {
+        flex: 0 0 auto;
+        width: 33.33333333%
+    }
+
+    .row-cols-sm-4>* {
+        flex: 0 0 auto;
+        width: 25%
+    }
+
+    .row-cols-sm-5>* {
+        flex: 0 0 auto;
+        width: 20%
+    }
+
+    .row-cols-sm-6>* {
+        flex: 0 0 auto;
+        width: 16.66666667%
+    }
+
+    .col-sm-auto {
+        flex: 0 0 auto;
+        width: auto
+    }
+
+    .col-sm-1 {
+        flex: 0 0 auto;
+        width: 8.33333333%
+    }
+
+    .col-sm-2 {
+        flex: 0 0 auto;
+        width: 16.66666667%
+    }
+
+    .col-sm-3 {
+        flex: 0 0 auto;
+        width: 25%
+    }
+
+    .col-sm-4 {
+        flex: 0 0 auto;
+        width: 33.33333333%
+    }
+
+    .col-sm-5 {
+        flex: 0 0 auto;
+        width: 41.66666667%
+    }
+
+    .col-sm-6 {
+        flex: 0 0 auto;
+        width: 50%
+    }
+
+    .col-sm-7 {
+        flex: 0 0 auto;
+        width: 58.33333333%
+    }
+
+    .col-sm-8 {
+        flex: 0 0 auto;
+        width: 66.66666667%
+    }
+
+    .col-sm-9 {
+        flex: 0 0 auto;
+        width: 75%
+    }
+
+    .col-sm-10 {
+        flex: 0 0 auto;
+        width: 83.33333333%
+    }
+
+    .col-sm-11 {
+        flex: 0 0 auto;
+        width: 91.66666667%
+    }
+
+    .col-sm-12 {
+        flex: 0 0 auto;
+        width: 100%
+    }
+
+    .offset-sm-0 {
+        margin-left: 0
+    }
+
+    .offset-sm-1 {
+        margin-left: 8.33333333%
+    }
+
+    .offset-sm-2 {
+        margin-left: 16.66666667%
+    }
+
+    .offset-sm-3 {
+        margin-left: 25%
+    }
+
+    .offset-sm-4 {
+        margin-left: 33.33333333%
+    }
+
+    .offset-sm-5 {
+        margin-left: 41.66666667%
+    }
+
+    .offset-sm-6 {
+        margin-left: 50%
+    }
+
+    .offset-sm-7 {
+        margin-left: 58.33333333%
+    }
+
+    .offset-sm-8 {
+        margin-left: 66.66666667%
+    }
+
+    .offset-sm-9 {
+        margin-left: 75%
+    }
+
+    .offset-sm-10 {
+        margin-left: 83.33333333%
+    }
+
+    .offset-sm-11 {
+        margin-left: 91.66666667%
+    }
+
+    .g-sm-0,
+    .gx-sm-0 {
+        --bs-gutter-x: 0
+    }
+
+    .g-sm-0,
+    .gy-sm-0 {
+        --bs-gutter-y: 0
+    }
+
+    .g-sm-1,
+    .gx-sm-1 {
+        --bs-gutter-x: .25rem
+    }
+
+    .g-sm-1,
+    .gy-sm-1 {
+        --bs-gutter-y: .25rem
+    }
+
+    .g-sm-2,
+    .gx-sm-2 {
+        --bs-gutter-x: .5rem
+    }
+
+    .g-sm-2,
+    .gy-sm-2 {
+        --bs-gutter-y: .5rem
+    }
+
+    .g-sm-3,
+    .gx-sm-3 {
+        --bs-gutter-x: 1rem
+    }
+
+    .g-sm-3,
+    .gy-sm-3 {
+        --bs-gutter-y: 1rem
+    }
+
+    .g-sm-4,
+    .gx-sm-4 {
+        --bs-gutter-x: 1.5rem
+    }
+
+    .g-sm-4,
+    .gy-sm-4 {
+        --bs-gutter-y: 1.5rem
+    }
+
+    .g-sm-5,
+    .gx-sm-5 {
+        --bs-gutter-x: 3rem
+    }
+
+    .g-sm-5,
+    .gy-sm-5 {
+        --bs-gutter-y: 3rem
+    }
+}
+
+@media (min-width: 768px) {
+    .col-md {
+        flex: 1 0 0%
+    }
+
+    .row-cols-md-auto>* {
+        flex: 0 0 auto;
+        width: auto
+    }
+
+    .row-cols-md-1>* {
+        flex: 0 0 auto;
+        width: 100%
+    }
+
+    .row-cols-md-2>* {
+        flex: 0 0 auto;
+        width: 50%
+    }
+
+    .row-cols-md-3>* {
+        flex: 0 0 auto;
+        width: 33.33333333%
+    }
+
+    .row-cols-md-4>* {
+        flex: 0 0 auto;
+        width: 25%
+    }
+
+    .row-cols-md-5>* {
+        flex: 0 0 auto;
+        width: 20%
+    }
+
+    .row-cols-md-6>* {
+        flex: 0 0 auto;
+        width: 16.66666667%
+    }
+
+    .col-md-auto {
+        flex: 0 0 auto;
+        width: auto
+    }
+
+    .col-md-1 {
+        flex: 0 0 auto;
+        width: 8.33333333%
+    }
+
+    .col-md-2 {
+        flex: 0 0 auto;
+        width: 16.66666667%
+    }
+
+    .col-md-3 {
+        flex: 0 0 auto;
+        width: 25%
+    }
+
+    .col-md-4 {
+        flex: 0 0 auto;
+        width: 33.33333333%
+    }
+
+    .col-md-5 {
+        flex: 0 0 auto;
+        width: 41.66666667%
+    }
+
+    .col-md-6 {
+        flex: 0 0 auto;
+        width: 50%
+    }
+
+    .col-md-7 {
+        flex: 0 0 auto;
+        width: 58.33333333%
+    }
+
+    .col-md-8 {
+        flex: 0 0 auto;
+        width: 66.66666667%
+    }
+
+    .col-md-9 {
+        flex: 0 0 auto;
+        width: 75%
+    }
+
+    .col-md-10 {
+        flex: 0 0 auto;
+        width: 83.33333333%
+    }
+
+    .col-md-11 {
+        flex: 0 0 auto;
+        width: 91.66666667%
+    }
+
+    .col-md-12 {
+        flex: 0 0 auto;
+        width: 100%
+    }
+
+    .offset-md-0 {
+        margin-left: 0
+    }
+
+    .offset-md-1 {
+        margin-left: 8.33333333%
+    }
+
+    .offset-md-2 {
+        margin-left: 16.66666667%
+    }
+
+    .offset-md-3 {
+        margin-left: 25%
+    }
+
+    .offset-md-4 {
+        margin-left: 33.33333333%
+    }
+
+    .offset-md-5 {
+        margin-left: 41.66666667%
+    }
+
+    .offset-md-6 {
+        margin-left: 50%
+    }
+
+    .offset-md-7 {
+        margin-left: 58.33333333%
+    }
+
+    .offset-md-8 {
+        margin-left: 66.66666667%
+    }
+
+    .offset-md-9 {
+        margin-left: 75%
+    }
+
+    .offset-md-10 {
+        margin-left: 83.33333333%
+    }
+
+    .offset-md-11 {
+        margin-left: 91.66666667%
+    }
+
+    .g-md-0,
+    .gx-md-0 {
+        --bs-gutter-x: 0
+    }
+
+    .g-md-0,
+    .gy-md-0 {
+        --bs-gutter-y: 0
+    }
+
+    .g-md-1,
+    .gx-md-1 {
+        --bs-gutter-x: .25rem
+    }
+
+    .g-md-1,
+    .gy-md-1 {
+        --bs-gutter-y: .25rem
+    }
+
+    .g-md-2,
+    .gx-md-2 {
+        --bs-gutter-x: .5rem
+    }
+
+    .g-md-2,
+    .gy-md-2 {
+        --bs-gutter-y: .5rem
+    }
+
+    .g-md-3,
+    .gx-md-3 {
+        --bs-gutter-x: 1rem
+    }
+
+    .g-md-3,
+    .gy-md-3 {
+        --bs-gutter-y: 1rem
+    }
+
+    .g-md-4,
+    .gx-md-4 {
+        --bs-gutter-x: 1.5rem
+    }
+
+    .g-md-4,
+    .gy-md-4 {
+        --bs-gutter-y: 1.5rem
+    }
+
+    .g-md-5,
+    .gx-md-5 {
+        --bs-gutter-x: 3rem
+    }
+
+    .g-md-5,
+    .gy-md-5 {
+        --bs-gutter-y: 3rem
+    }
+}
+
+@media (min-width: 992px) {
+    .col-lg {
+        flex: 1 0 0%
+    }
+
+    .row-cols-lg-auto>* {
+        flex: 0 0 auto;
+        width: auto
+    }
+
+    .row-cols-lg-1>* {
+        flex: 0 0 auto;
+        width: 100%
+    }
+
+    .row-cols-lg-2>* {
+        flex: 0 0 auto;
+        width: 50%
+    }
+
+    .row-cols-lg-3>* {
+        flex: 0 0 auto;
+        width: 33.33333333%
+    }
+
+    .row-cols-lg-4>* {
+        flex: 0 0 auto;
+        width: 25%
+    }
+
+    .row-cols-lg-5>* {
+        flex: 0 0 auto;
+        width: 20%
+    }
+
+    .row-cols-lg-6>* {
+        flex: 0 0 auto;
+        width: 16.66666667%
+    }
+
+    .col-lg-auto {
+        flex: 0 0 auto;
+        width: auto
+    }
+
+    .col-lg-1 {
+        flex: 0 0 auto;
+        width: 8.33333333%
+    }
+
+    .col-lg-2 {
+        flex: 0 0 auto;
+        width: 16.66666667%
+    }
+
+    .col-lg-3 {
+        flex: 0 0 auto;
+        width: 25%
+    }
+
+    .col-lg-4 {
+        flex: 0 0 auto;
+        width: 33.33333333%
+    }
+
+    .col-lg-5 {
+        flex: 0 0 auto;
+        width: 41.66666667%
+    }
+
+    .col-lg-6 {
+        flex: 0 0 auto;
+        width: 50%
+    }
+
+    .col-lg-7 {
+        flex: 0 0 auto;
+        width: 58.33333333%
+    }
+
+    .col-lg-8 {
+        flex: 0 0 auto;
+        width: 66.66666667%
+    }
+
+    .col-lg-9 {
+        flex: 0 0 auto;
+        width: 75%
+    }
+
+    .col-lg-10 {
+        flex: 0 0 auto;
+        width: 83.33333333%
+    }
+
+    .col-lg-11 {
+        flex: 0 0 auto;
+        width: 91.66666667%
+    }
+
+    .col-lg-12 {
+        flex: 0 0 auto;
+        width: 100%
+    }
+
+    .offset-lg-0 {
+        margin-left: 0
+    }
+
+    .offset-lg-1 {
+        margin-left: 8.33333333%
+    }
+
+    .offset-lg-2 {
+        margin-left: 16.66666667%
+    }
+
+    .offset-lg-3 {
+        margin-left: 25%
+    }
+
+    .offset-lg-4 {
+        margin-left: 33.33333333%
+    }
+
+    .offset-lg-5 {
+        margin-left: 41.66666667%
+    }
+
+    .offset-lg-6 {
+        margin-left: 50%
+    }
+
+    .offset-lg-7 {
+        margin-left: 58.33333333%
+    }
+
+    .offset-lg-8 {
+        margin-left: 66.66666667%
+    }
+
+    .offset-lg-9 {
+        margin-left: 75%
+    }
+
+    .offset-lg-10 {
+        margin-left: 83.33333333%
+    }
+
+    .offset-lg-11 {
+        margin-left: 91.66666667%
+    }
+
+    .g-lg-0,
+    .gx-lg-0 {
+        --bs-gutter-x: 0
+    }
+
+    .g-lg-0,
+    .gy-lg-0 {
+        --bs-gutter-y: 0
+    }
+
+    .g-lg-1,
+    .gx-lg-1 {
+        --bs-gutter-x: .25rem
+    }
+
+    .g-lg-1,
+    .gy-lg-1 {
+        --bs-gutter-y: .25rem
+    }
+
+    .g-lg-2,
+    .gx-lg-2 {
+        --bs-gutter-x: .5rem
+    }
+
+    .g-lg-2,
+    .gy-lg-2 {
+        --bs-gutter-y: .5rem
+    }
+
+    .g-lg-3,
+    .gx-lg-3 {
+        --bs-gutter-x: 1rem
+    }
+
+    .g-lg-3,
+    .gy-lg-3 {
+        --bs-gutter-y: 1rem
+    }
+
+    .g-lg-4,
+    .gx-lg-4 {
+        --bs-gutter-x: 1.5rem
+    }
+
+    .g-lg-4,
+    .gy-lg-4 {
+        --bs-gutter-y: 1.5rem
+    }
+
+    .g-lg-5,
+    .gx-lg-5 {
+        --bs-gutter-x: 3rem
+    }
+
+    .g-lg-5,
+    .gy-lg-5 {
+        --bs-gutter-y: 3rem
+    }
+}
+
+@media (min-width: 1200px) {
+    .col-xl {
+        flex: 1 0 0%
+    }
+
+    .row-cols-xl-auto>* {
+        flex: 0 0 auto;
+        width: auto
+    }
+
+    .row-cols-xl-1>* {
+        flex: 0 0 auto;
+        width: 100%
+    }
+
+    .row-cols-xl-2>* {
+        flex: 0 0 auto;
+        width: 50%
+    }
+
+    .row-cols-xl-3>* {
+        flex: 0 0 auto;
+        width: 33.33333333%
+    }
+
+    .row-cols-xl-4>* {
+        flex: 0 0 auto;
+        width: 25%
+    }
+
+    .row-cols-xl-5>* {
+        flex: 0 0 auto;
+        width: 20%
+    }
+
+    .row-cols-xl-6>* {
+        flex: 0 0 auto;
+        width: 16.66666667%
+    }
+
+    .col-xl-auto {
+        flex: 0 0 auto;
+        width: auto
+    }
+
+    .col-xl-1 {
+        flex: 0 0 auto;
+        width: 8.33333333%
+    }
+
+    .col-xl-2 {
+        flex: 0 0 auto;
+        width: 16.66666667%
+    }
+
+    .col-xl-3 {
+        flex: 0 0 auto;
+        width: 25%
+    }
+
+    .col-xl-4 {
+        flex: 0 0 auto;
+        width: 33.33333333%
+    }
+
+    .col-xl-5 {
+        flex: 0 0 auto;
+        width: 41.66666667%
+    }
+
+    .col-xl-6 {
+        flex: 0 0 auto;
+        width: 50%
+    }
+
+    .col-xl-7 {
+        flex: 0 0 auto;
+        width: 58.33333333%
+    }
+
+    .col-xl-8 {
+        flex: 0 0 auto;
+        width: 66.66666667%
+    }
+
+    .col-xl-9 {
+        flex: 0 0 auto;
+        width: 75%
+    }
+
+    .col-xl-10 {
+        flex: 0 0 auto;
+        width: 83.33333333%
+    }
+
+    .col-xl-11 {
+        flex: 0 0 auto;
+        width: 91.66666667%
+    }
+
+    .col-xl-12 {
+        flex: 0 0 auto;
+        width: 100%
+    }
+
+    .offset-xl-0 {
+        margin-left: 0
+    }
+
+    .offset-xl-1 {
+        margin-left: 8.33333333%
+    }
+
+    .offset-xl-2 {
+        margin-left: 16.66666667%
+    }
+
+    .offset-xl-3 {
+        margin-left: 25%
+    }
+
+    .offset-xl-4 {
+        margin-left: 33.33333333%
+    }
+
+    .offset-xl-5 {
+        margin-left: 41.66666667%
+    }
+
+    .offset-xl-6 {
+        margin-left: 50%
+    }
+
+    .offset-xl-7 {
+        margin-left: 58.33333333%
+    }
+
+    .offset-xl-8 {
+        margin-left: 66.66666667%
+    }
+
+    .offset-xl-9 {
+        margin-left: 75%
+    }
+
+    .offset-xl-10 {
+        margin-left: 83.33333333%
+    }
+
+    .offset-xl-11 {
+        margin-left: 91.66666667%
+    }
+
+    .g-xl-0,
+    .gx-xl-0 {
+        --bs-gutter-x: 0
+    }
+
+    .g-xl-0,
+    .gy-xl-0 {
+        --bs-gutter-y: 0
+    }
+
+    .g-xl-1,
+    .gx-xl-1 {
+        --bs-gutter-x: .25rem
+    }
+
+    .g-xl-1,
+    .gy-xl-1 {
+        --bs-gutter-y: .25rem
+    }
+
+    .g-xl-2,
+    .gx-xl-2 {
+        --bs-gutter-x: .5rem
+    }
+
+    .g-xl-2,
+    .gy-xl-2 {
+        --bs-gutter-y: .5rem
+    }
+
+    .g-xl-3,
+    .gx-xl-3 {
+        --bs-gutter-x: 1rem
+    }
+
+    .g-xl-3,
+    .gy-xl-3 {
+        --bs-gutter-y: 1rem
+    }
+
+    .g-xl-4,
+    .gx-xl-4 {
+        --bs-gutter-x: 1.5rem
+    }
+
+    .g-xl-4,
+    .gy-xl-4 {
+        --bs-gutter-y: 1.5rem
+    }
+
+    .g-xl-5,
+    .gx-xl-5 {
+        --bs-gutter-x: 3rem
+    }
+
+    .g-xl-5,
+    .gy-xl-5 {
+        --bs-gutter-y: 3rem
+    }
+}
+
+@media (min-width: 1400px) {
+    .col-xxl {
+        flex: 1 0 0%
+    }
+
+    .row-cols-xxl-auto>* {
+        flex: 0 0 auto;
+        width: auto
+    }
+
+    .row-cols-xxl-1>* {
+        flex: 0 0 auto;
+        width: 100%
+    }
+
+    .row-cols-xxl-2>* {
+        flex: 0 0 auto;
+        width: 50%
+    }
+
+    .row-cols-xxl-3>* {
+        flex: 0 0 auto;
+        width: 33.33333333%
+    }
+
+    .row-cols-xxl-4>* {
+        flex: 0 0 auto;
+        width: 25%
+    }
+
+    .row-cols-xxl-5>* {
+        flex: 0 0 auto;
+        width: 20%
+    }
+
+    .row-cols-xxl-6>* {
+        flex: 0 0 auto;
+        width: 16.66666667%
+    }
+
+    .col-xxl-auto {
+        flex: 0 0 auto;
+        width: auto
+    }
+
+    .col-xxl-1 {
+        flex: 0 0 auto;
+        width: 8.33333333%
+    }
+
+    .col-xxl-2 {
+        flex: 0 0 auto;
+        width: 16.66666667%
+    }
+
+    .col-xxl-3 {
+        flex: 0 0 auto;
+        width: 25%
+    }
+
+    .col-xxl-4 {
+        flex: 0 0 auto;
+        width: 33.33333333%
+    }
+
+    .col-xxl-5 {
+        flex: 0 0 auto;
+        width: 41.66666667%
+    }
+
+    .col-xxl-6 {
+        flex: 0 0 auto;
+        width: 50%
+    }
+
+    .col-xxl-7 {
+        flex: 0 0 auto;
+        width: 58.33333333%
+    }
+
+    .col-xxl-8 {
+        flex: 0 0 auto;
+        width: 66.66666667%
+    }
+
+    .col-xxl-9 {
+        flex: 0 0 auto;
+        width: 75%
+    }
+
+    .col-xxl-10 {
+        flex: 0 0 auto;
+        width: 83.33333333%
+    }
+
+    .col-xxl-11 {
+        flex: 0 0 auto;
+        width: 91.66666667%
+    }
+
+    .col-xxl-12 {
+        flex: 0 0 auto;
+        width: 100%
+    }
+
+    .offset-xxl-0 {
+        margin-left: 0
+    }
+
+    .offset-xxl-1 {
+        margin-left: 8.33333333%
+    }
+
+    .offset-xxl-2 {
+        margin-left: 16.66666667%
+    }
+
+    .offset-xxl-3 {
+        margin-left: 25%
+    }
+
+    .offset-xxl-4 {
+        margin-left: 33.33333333%
+    }
+
+    .offset-xxl-5 {
+        margin-left: 41.66666667%
+    }
+
+    .offset-xxl-6 {
+        margin-left: 50%
+    }
+
+    .offset-xxl-7 {
+        margin-left: 58.33333333%
+    }
+
+    .offset-xxl-8 {
+        margin-left: 66.66666667%
+    }
+
+    .offset-xxl-9 {
+        margin-left: 75%
+    }
+
+    .offset-xxl-10 {
+        margin-left: 83.33333333%
+    }
+
+    .offset-xxl-11 {
+        margin-left: 91.66666667%
+    }
+
+    .g-xxl-0,
+    .gx-xxl-0 {
+        --bs-gutter-x: 0
+    }
+
+    .g-xxl-0,
+    .gy-xxl-0 {
+        --bs-gutter-y: 0
+    }
+
+    .g-xxl-1,
+    .gx-xxl-1 {
+        --bs-gutter-x: .25rem
+    }
+
+    .g-xxl-1,
+    .gy-xxl-1 {
+        --bs-gutter-y: .25rem
+    }
+
+    .g-xxl-2,
+    .gx-xxl-2 {
+        --bs-gutter-x: .5rem
+    }
+
+    .g-xxl-2,
+    .gy-xxl-2 {
+        --bs-gutter-y: .5rem
+    }
+
+    .g-xxl-3,
+    .gx-xxl-3 {
+        --bs-gutter-x: 1rem
+    }
+
+    .g-xxl-3,
+    .gy-xxl-3 {
+        --bs-gutter-y: 1rem
+    }
+
+    .g-xxl-4,
+    .gx-xxl-4 {
+        --bs-gutter-x: 1.5rem
+    }
+
+    .g-xxl-4,
+    .gy-xxl-4 {
+        --bs-gutter-y: 1.5rem
+    }
+
+    .g-xxl-5,
+    .gx-xxl-5 {
+        --bs-gutter-x: 3rem
+    }
+
+    .g-xxl-5,
+    .gy-xxl-5 {
+        --bs-gutter-y: 3rem
+    }
+}
+
+.table {
+    --bs-table-color-type: initial;
+    --bs-table-bg-type: initial;
+    --bs-table-color-state: initial;
+    --bs-table-bg-state: initial;
+    --bs-table-color: var(--bs-emphasis-color);
+    --bs-table-bg: var(--bs-body-bg);
+    --bs-table-border-color: var(--bs-border-color);
+    --bs-table-accent-bg: transparent;
+    --bs-table-striped-color: var(--bs-emphasis-color);
+    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), .05);
+    --bs-table-active-color: var(--bs-emphasis-color);
+    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), .1);
+    --bs-table-hover-color: var(--bs-emphasis-color);
+    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), .075);
+    width: 100%;
+    margin-bottom: 1rem;
+    vertical-align: top;
+    border-color: var(--bs-table-border-color)
+}
+
+.table>:not(caption)>*>* {
+    padding: .5rem;
+    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
+    background-color: var(--bs-table-bg);
+    border-bottom-width: var(--bs-border-width);
+    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))
+}
+
+.table>tbody {
+    vertical-align: inherit
+}
+
+.table>thead {
+    vertical-align: bottom
+}
+
+.table-group-divider {
+    border-top: calc(var(--bs-border-width) * 2) solid currentcolor
+}
+
+.caption-top {
+    caption-side: top
+}
+
+.table-sm>:not(caption)>*>* {
+    padding: .25rem
+}
+
+.table-bordered>:not(caption)>* {
+    border-width: var(--bs-border-width) 0
+}
+
+.table-bordered>:not(caption)>*>* {
+    border-width: 0 var(--bs-border-width)
+}
+
+.table-borderless>:not(caption)>*>* {
+    border-bottom-width: 0
+}
+
+.table-borderless>:not(:first-child) {
+    border-top-width: 0
+}
+
+.table-striped>tbody>tr:nth-of-type(odd)>* {
+    --bs-table-color-type: var(--bs-table-striped-color);
+    --bs-table-bg-type: var(--bs-table-striped-bg)
+}
+
+.table-striped-columns>:not(caption)>tr>:nth-child(2n) {
+    --bs-table-color-type: var(--bs-table-striped-color);
+    --bs-table-bg-type: var(--bs-table-striped-bg)
+}
+
+.table-active {
+    --bs-table-color-state: var(--bs-table-active-color);
+    --bs-table-bg-state: var(--bs-table-active-bg)
+}
+
+.table-hover>tbody>tr:hover>* {
+    --bs-table-color-state: var(--bs-table-hover-color);
+    --bs-table-bg-state: var(--bs-table-hover-bg)
+}
+
+.table-primary {
+    --bs-table-color: #000;
+    --bs-table-bg: #ebe0fb;
+    --bs-table-border-color: #bcb3c9;
+    --bs-table-striped-bg: #dfd5ee;
+    --bs-table-striped-color: #000;
+    --bs-table-active-bg: #d4cae2;
+    --bs-table-active-color: #000;
+    --bs-table-hover-bg: #d9cfe8;
+    --bs-table-hover-color: #000;
+    color: var(--bs-table-color);
+    border-color: var(--bs-table-border-color)
+}
+
+.table-secondary {
+    --bs-table-color: #000;
+    --bs-table-bg: #fafafb;
+    --bs-table-border-color: #c8c8c9;
+    --bs-table-striped-bg: #eeeeee;
+    --bs-table-striped-color: #000;
+    --bs-table-active-bg: #e1e1e2;
+    --bs-table-active-color: #000;
+    --bs-table-hover-bg: #e7e7e8;
+    --bs-table-hover-color: #000;
+    color: var(--bs-table-color);
+    border-color: var(--bs-table-border-color)
+}
+
+.table-success {
+    --bs-table-color: #000;
+    --bs-table-bg: #d1e7dd;
+    --bs-table-border-color: #a7b9b1;
+    --bs-table-striped-bg: #c7dbd2;
+    --bs-table-striped-color: #000;
+    --bs-table-active-bg: #bcd0c7;
+    --bs-table-active-color: #000;
+    --bs-table-hover-bg: #c1d6cc;
+    --bs-table-hover-color: #000;
+    color: var(--bs-table-color);
+    border-color: var(--bs-table-border-color)
+}
+
+.table-info {
+    --bs-table-color: #000;
+    --bs-table-bg: #cff4fc;
+    --bs-table-border-color: #a6c3ca;
+    --bs-table-striped-bg: #c5e8ef;
+    --bs-table-striped-color: #000;
+    --bs-table-active-bg: #badce3;
+    --bs-table-active-color: #000;
+    --bs-table-hover-bg: #bfe2e9;
+    --bs-table-hover-color: #000;
+    color: var(--bs-table-color);
+    border-color: var(--bs-table-border-color)
+}
+
+.table-warning {
+    --bs-table-color: #000;
+    --bs-table-bg: #fff3cd;
+    --bs-table-border-color: #ccc2a4;
+    --bs-table-striped-bg: #f2e7c3;
+    --bs-table-striped-color: #000;
+    --bs-table-active-bg: #e6dbb9;
+    --bs-table-active-color: #000;
+    --bs-table-hover-bg: #ece1be;
+    --bs-table-hover-color: #000;
+    color: var(--bs-table-color);
+    border-color: var(--bs-table-border-color)
+}
+
+.table-danger {
+    --bs-table-color: #000;
+    --bs-table-bg: #f8d7da;
+    --bs-table-border-color: #c6acae;
+    --bs-table-striped-bg: #eccccf;
+    --bs-table-striped-color: #000;
+    --bs-table-active-bg: #dfc2c4;
+    --bs-table-active-color: #000;
+    --bs-table-hover-bg: #e5c7ca;
+    --bs-table-hover-color: #000;
+    color: var(--bs-table-color);
+    border-color: var(--bs-table-border-color)
+}
+
+.table-light {
+    --bs-table-color: #000;
+    --bs-table-bg: #f8f9fa;
+    --bs-table-border-color: #c6c7c8;
+    --bs-table-striped-bg: #ecedee;
+    --bs-table-striped-color: #000;
+    --bs-table-active-bg: #dfe0e1;
+    --bs-table-active-color: #000;
+    --bs-table-hover-bg: #e5e6e7;
+    --bs-table-hover-color: #000;
+    color: var(--bs-table-color);
+    border-color: var(--bs-table-border-color)
+}
+
+.table-dark {
+    --bs-table-color: #fff;
+    --bs-table-bg: #212529;
+    --bs-table-border-color: #4d5154;
+    --bs-table-striped-bg: #2c3034;
+    --bs-table-striped-color: #fff;
+    --bs-table-active-bg: #373b3e;
+    --bs-table-active-color: #fff;
+    --bs-table-hover-bg: #323539;
+    --bs-table-hover-color: #fff;
+    color: var(--bs-table-color);
+    border-color: var(--bs-table-border-color)
+}
+
+.table-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch
+}
+
+@media (max-width: 575.98px) {
+    .table-responsive-sm {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+}
+
+@media (max-width: 767.98px) {
+    .table-responsive-md {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+}
+
+@media (max-width: 991.98px) {
+    .table-responsive-lg {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+}
+
+@media (max-width: 1199.98px) {
+    .table-responsive-xl {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+}
+
+@media (max-width: 1399.98px) {
+    .table-responsive-xxl {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch
+    }
+}
+
+.form-label {
+    margin-bottom: .5rem
+}
+
+.col-form-label {
+    padding-top: calc(.375rem + var(--bs-border-width));
+    padding-bottom: calc(.375rem + var(--bs-border-width));
+    margin-bottom: 0;
+    font-size: inherit;
+    line-height: 1.5
+}
+
+.col-form-label-lg {
+    padding-top: calc(.5rem + var(--bs-border-width));
+    padding-bottom: calc(.5rem + var(--bs-border-width));
+    font-size: 1.25rem
+}
+
+.col-form-label-sm {
+    padding-top: calc(.25rem + var(--bs-border-width));
+    padding-bottom: calc(.25rem + var(--bs-border-width));
+    font-size: .875rem
+}
+
+.form-text {
+    margin-top: .25rem;
+    font-size: .875em;
+    color: var(--bs-secondary-color)
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: var(--bs-body-bg);
+    background-clip: padding-box;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    box-shadow: var(--bs-box-shadow-inset);
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .form-control {
+        transition: none
+    }
+}
+
+.form-control[type=file] {
+    overflow: hidden
+}
+
+.form-control[type=file]:not(:disabled):not([readonly]) {
+    cursor: pointer
+}
+
+.form-control:focus {
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+    border-color: #cdb1f6;
+    outline: 0;
+    box-shadow: var(--bs-box-shadow-inset), 0 0 0 .25rem #9a63ec40
+}
+
+.form-control::-webkit-date-and-time-value {
+    min-width: 85px;
+    height: 1.5em;
+    margin: 0
+}
+
+.form-control::-webkit-datetime-edit {
+    display: block;
+    padding: 0
+}
+
+.form-control::placeholder {
+    color: #9ca3af;
+    opacity: 1
+}
+
+.form-control:disabled {
+    background-color: var(--bs-secondary-bg);
+    opacity: 1
+}
+
+.form-control::file-selector-button {
+    padding: .375rem .75rem;
+    margin: -.375rem -.75rem;
+    margin-inline-end: .75rem;
+    color: var(--bs-body-color);
+    background-color: var(--bs-tertiary-bg);
+    background-image: var(--bs-gradient);
+    pointer-events: none;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+    border-inline-end-width: var(--bs-border-width);
+    border-radius: 0;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .form-control::file-selector-button {
+        transition: none
+    }
+}
+
+.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: var(--bs-secondary-bg)
+}
+
+.form-control-plaintext {
+    display: block;
+    width: 100%;
+    padding: .375rem 0;
+    margin-bottom: 0;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    background-color: transparent;
+    border: solid transparent;
+    border-width: var(--bs-border-width) 0
+}
+
+.form-control-plaintext:focus {
+    outline: 0
+}
+
+.form-control-plaintext.form-control-sm,
+.form-control-plaintext.form-control-lg {
+    padding-right: 0;
+    padding-left: 0
+}
+
+.form-control-sm {
+    min-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
+    padding: .25rem .5rem;
+    font-size: .875rem;
+    border-radius: var(--bs-border-radius-sm)
+}
+
+.form-control-sm::file-selector-button {
+    padding: .25rem .5rem;
+    margin: -.25rem -.5rem;
+    margin-inline-end: .5rem
+}
+
+.form-control-lg {
+    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
+    padding: .5rem 1rem;
+    font-size: 1.25rem;
+    border-radius: var(--bs-border-radius-lg)
+}
+
+.form-control-lg::file-selector-button {
+    padding: .5rem 1rem;
+    margin: -.5rem -1rem;
+    margin-inline-end: 1rem
+}
+
+textarea.form-control {
+    min-height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2))
+}
+
+textarea.form-control-sm {
+    min-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))
+}
+
+textarea.form-control-lg {
+    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))
+}
+
+.form-control-color {
+    width: 3rem;
+    height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));
+    padding: .375rem
+}
+
+.form-control-color:not(:disabled):not([readonly]) {
+    cursor: pointer
+}
+
+.form-control-color::-moz-color-swatch {
+    border: 0 !important;
+    border-radius: var(--bs-border-radius)
+}
+
+.form-control-color::-webkit-color-swatch {
+    border: 0 !important;
+    border-radius: var(--bs-border-radius)
+}
+
+.form-control-color.form-control-sm {
+    height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))
+}
+
+.form-control-color.form-control-lg {
+    height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))
+}
+
+.form-select {
+    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    display: block;
+    width: 100%;
+    padding: .375rem 2.25rem .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: var(--bs-body-bg);
+    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    background-repeat: no-repeat;
+    background-position: right .75rem center;
+    background-size: 16px 12px;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    box-shadow: var(--bs-box-shadow-inset);
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .form-select {
+        transition: none
+    }
+}
+
+.form-select:focus {
+    border-color: #cdb1f6;
+    outline: 0;
+    box-shadow: var(--bs-box-shadow-inset), 0 0 0 .25rem #9a63ec40
+}
+
+.form-select[multiple],
+.form-select[size]:not([size="1"]) {
+    padding-right: .75rem;
+    background-image: none
+}
+
+.form-select:disabled {
+    background-color: var(--bs-secondary-bg)
+}
+
+.form-select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 var(--bs-body-color)
+}
+
+.form-select-sm {
+    padding-top: .25rem;
+    padding-bottom: .25rem;
+    padding-left: .5rem;
+    font-size: .875rem;
+    border-radius: var(--bs-border-radius-sm)
+}
+
+.form-select-lg {
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    padding-left: 1rem;
+    font-size: 1.25rem;
+    border-radius: var(--bs-border-radius-lg)
+}
+
+[data-bs-theme=dark] .form-select {
+    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
+}
+
+.form-check {
+    display: block;
+    min-height: 1.5rem;
+    padding-left: 1.5em;
+    margin-bottom: .125rem
+}
+
+.form-check .form-check-input {
+    float: left;
+    margin-left: -1.5em
+}
+
+.form-check-reverse {
+    padding-right: 1.5em;
+    padding-left: 0;
+    text-align: right
+}
+
+.form-check-reverse .form-check-input {
+    float: right;
+    margin-right: -1.5em;
+    margin-left: 0
+}
+
+.form-check-input {
+    --bs-form-check-bg: var(--bs-body-bg);
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    margin-top: .25em;
+    vertical-align: top;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: var(--bs-form-check-bg);
+    background-image: var(--bs-form-check-bg-image);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact
+}
+
+.form-check-input[type=checkbox] {
+    border-radius: .25em
+}
+
+.form-check-input[type=radio] {
+    border-radius: 50%
+}
+
+.form-check-input:active {
+    filter: brightness(90%)
+}
+
+.form-check-input:focus {
+    border-color: #cdb1f6;
+    outline: 0;
+    box-shadow: 0 0 0 .25rem #9a63ec40
+}
+
+.form-check-input:checked {
+    background-color: #9a63ec;
+    border-color: #9a63ec
+}
+
+.form-check-input:checked[type=checkbox] {
+    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"), var(--bs-gradient)
+}
+
+.form-check-input:checked[type=radio] {
+    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"), var(--bs-gradient)
+}
+
+.form-check-input[type=checkbox]:indeterminate {
+    background-color: #9a63ec;
+    border-color: #9a63ec;
+    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"), var(--bs-gradient)
+}
+
+.form-check-input:disabled {
+    pointer-events: none;
+    filter: none;
+    opacity: .5
+}
+
+.form-check-input[disabled]~.form-check-label,
+.form-check-input:disabled~.form-check-label {
+    cursor: default;
+    opacity: .5
+}
+
+.form-switch {
+    padding-left: 2.5em
+}
+
+.form-switch .form-check-input {
+    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+    width: 2em;
+    margin-left: -2.5em;
+    background-image: var(--bs-form-switch-bg);
+    background-position: left center;
+    border-radius: 2em;
+    transition: background-position .15s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .form-switch .form-check-input {
+        transition: none
+    }
+}
+
+.form-switch .form-check-input:focus {
+    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cdb1f6'/%3e%3c/svg%3e")
+}
+
+.form-switch .form-check-input:checked {
+    background-position: right center;
+    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"), var(--bs-gradient)
+}
+
+.form-switch.form-check-reverse {
+    padding-right: 2.5em;
+    padding-left: 0
+}
+
+.form-switch.form-check-reverse .form-check-input {
+    margin-right: -2.5em;
+    margin-left: 0
+}
+
+.form-check-inline {
+    display: inline-block;
+    margin-right: 1rem
+}
+
+.btn-check {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    pointer-events: none
+}
+
+.btn-check[disabled]+.btn,
+.btn-check:disabled+.btn {
+    pointer-events: none;
+    filter: none;
+    opacity: .65
+}
+
+[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
+    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")
+}
+
+.form-range {
+    width: 100%;
+    height: 1.5rem;
+    padding: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: transparent
+}
+
+.form-range:focus {
+    outline: 0
+}
+
+.form-range:focus::-webkit-slider-thumb {
+    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem #9a63ec40
+}
+
+.form-range:focus::-moz-range-thumb {
+    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem #9a63ec40
+}
+
+.form-range::-moz-focus-outer {
+    border: 0
+}
+
+.form-range::-webkit-slider-thumb {
+    width: 1rem;
+    height: 1rem;
+    margin-top: -.25rem;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: #9a63ec;
+    background-image: var(--bs-gradient);
+    border: 0;
+    border-radius: 1rem;
+    box-shadow: 0 .1rem .25rem #0000001a;
+    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .form-range::-webkit-slider-thumb {
+        transition: none
+    }
+}
+
+.form-range::-webkit-slider-thumb:active {
+    background-color: #e1d0f9;
+    background-image: var(--bs-gradient)
+}
+
+.form-range::-webkit-slider-runnable-track {
+    width: 100%;
+    height: .5rem;
+    color: transparent;
+    cursor: pointer;
+    background-color: var(--bs-secondary-bg);
+    border-color: transparent;
+    border-radius: 1rem;
+    box-shadow: var(--bs-box-shadow-inset)
+}
+
+.form-range::-moz-range-thumb {
+    width: 1rem;
+    height: 1rem;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: #9a63ec;
+    background-image: var(--bs-gradient);
+    border: 0;
+    border-radius: 1rem;
+    box-shadow: 0 .1rem .25rem #0000001a;
+    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .form-range::-moz-range-thumb {
+        transition: none
+    }
+}
+
+.form-range::-moz-range-thumb:active {
+    background-color: #e1d0f9;
+    background-image: var(--bs-gradient)
+}
+
+.form-range::-moz-range-track {
+    width: 100%;
+    height: .5rem;
+    color: transparent;
+    cursor: pointer;
+    background-color: var(--bs-secondary-bg);
+    border-color: transparent;
+    border-radius: 1rem;
+    box-shadow: var(--bs-box-shadow-inset)
+}
+
+.form-range:disabled {
+    pointer-events: none
+}
+
+.form-range:disabled::-webkit-slider-thumb {
+    background-color: var(--bs-secondary-color)
+}
+
+.form-range:disabled::-moz-range-thumb {
+    background-color: var(--bs-secondary-color)
+}
+
+.form-floating {
+    position: relative
+}
+
+.form-floating>.form-control,
+.form-floating>.form-control-plaintext,
+.form-floating>.form-select {
+    height: calc(3.5rem + calc(var(--bs-border-width) * 2));
+    min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
+    line-height: 1.25
+}
+
+.form-floating>label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    height: 100%;
+    padding: 1rem .75rem;
+    overflow: hidden;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+    border: var(--bs-border-width) solid transparent;
+    transform-origin: 0 0;
+    transition: opacity .1s ease-in-out, transform .1s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .form-floating>label {
+        transition: none
+    }
+}
+
+.form-floating>.form-control,
+.form-floating>.form-control-plaintext {
+    padding: 1rem .75rem
+}
+
+.form-floating>.form-control::placeholder,
+.form-floating>.form-control-plaintext::placeholder {
+    color: transparent
+}
+
+.form-floating>.form-control:focus,
+.form-floating>.form-control:not(:placeholder-shown),
+.form-floating>.form-control-plaintext:focus,
+.form-floating>.form-control-plaintext:not(:placeholder-shown) {
+    padding-top: 1.625rem;
+    padding-bottom: .625rem
+}
+
+.form-floating>.form-control:-webkit-autofill,
+.form-floating>.form-control-plaintext:-webkit-autofill {
+    padding-top: 1.625rem;
+    padding-bottom: .625rem
+}
+
+.form-floating>.form-select {
+    padding-top: 1.625rem;
+    padding-bottom: .625rem
+}
+
+.form-floating>.form-control:focus~label,
+.form-floating>.form-control:not(:placeholder-shown)~label,
+.form-floating>.form-control-plaintext~label,
+.form-floating>.form-select~label {
+    color: rgba(var(--bs-body-color-rgb), .65);
+    transform: scale(.85) translateY(-.5rem) translate(.15rem)
+}
+
+.form-floating>.form-control:focus~label:after,
+.form-floating>.form-control:not(:placeholder-shown)~label:after,
+.form-floating>.form-control-plaintext~label:after,
+.form-floating>.form-select~label:after {
+    position: absolute;
+    top: 1rem;
+    right: .375rem;
+    bottom: 1rem;
+    left: .375rem;
+    z-index: -1;
+    height: 1.5em;
+    content: "";
+    background-color: var(--bs-body-bg);
+    border-radius: var(--bs-border-radius)
+}
+
+.form-floating>.form-control:-webkit-autofill~label {
+    color: rgba(var(--bs-body-color-rgb), .65);
+    transform: scale(.85) translateY(-.5rem) translate(.15rem)
+}
+
+.form-floating>.form-control-plaintext~label {
+    border-width: var(--bs-border-width) 0
+}
+
+.form-floating>:disabled~label,
+.form-floating>.form-control:disabled~label {
+    color: #6c757d
+}
+
+.form-floating>:disabled~label:after,
+.form-floating>.form-control:disabled~label:after {
+    background-color: var(--bs-secondary-bg)
+}
+
+.input-group {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    width: 100%
+}
+
+.input-group>.form-control,
+.input-group>.form-select,
+.input-group>.form-floating {
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0
+}
+
+.input-group>.form-control:focus,
+.input-group>.form-select:focus,
+.input-group>.form-floating:focus-within {
+    z-index: 5
+}
+
+.input-group .btn {
+    position: relative;
+    z-index: 2
+}
+
+.input-group .btn:focus {
+    z-index: 5
+}
+
+.input-group-text {
+    display: flex;
+    align-items: center;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    text-align: center;
+    white-space: nowrap;
+    background-color: var(--bs-tertiary-bg);
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius)
+}
+
+.input-group-lg>.form-control,
+.input-group-lg>.form-select,
+.input-group-lg>.input-group-text,
+.input-group-lg>.btn {
+    padding: .5rem 1rem;
+    font-size: 1.25rem;
+    border-radius: var(--bs-border-radius-lg)
+}
+
+.input-group-sm>.form-control,
+.input-group-sm>.form-select,
+.input-group-sm>.input-group-text,
+.input-group-sm>.btn {
+    padding: .25rem .5rem;
+    font-size: .875rem;
+    border-radius: var(--bs-border-radius-sm)
+}
+
+.input-group-lg>.form-select,
+.input-group-sm>.form-select {
+    padding-right: 3rem
+}
+
+.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
+.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
+.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),
+.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,
+.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+    margin-left: calc(var(--bs-border-width) * -1);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.input-group>.form-floating:not(:first-child)>.form-control,
+.input-group>.form-floating:not(:first-child)>.form-select {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.valid-feedback {
+    display: none;
+    width: 100%;
+    margin-top: .25rem;
+    font-size: .875em;
+    color: var(--bs-form-valid-color)
+}
+
+.valid-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    max-width: 100%;
+    padding: .25rem .5rem;
+    margin-top: .1rem;
+    font-size: .875rem;
+    color: #fff;
+    background-color: var(--bs-success);
+    border-radius: var(--bs-border-radius)
+}
+
+.was-validated :valid~.valid-feedback,
+.was-validated :valid~.valid-tooltip,
+.is-valid~.valid-feedback,
+.is-valid~.valid-tooltip {
+    display: block
+}
+
+.was-validated .form-control:valid,
+.form-control.is-valid {
+    border-color: var(--bs-form-valid-border-color);
+    padding-right: calc(1.5em + .75rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(.375em + .1875rem) center;
+    background-size: calc(.75em + .375rem) calc(.75em + .375rem)
+}
+
+.was-validated .form-control:valid:focus,
+.form-control.is-valid:focus {
+    border-color: var(--bs-form-valid-border-color);
+    box-shadow: var(--bs-box-shadow-inset), 0 0 0 .25rem rgba(var(--bs-success-rgb), .25)
+}
+
+.was-validated textarea.form-control:valid,
+textarea.form-control.is-valid {
+    padding-right: calc(1.5em + .75rem);
+    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem)
+}
+
+.was-validated .form-select:valid,
+.form-select.is-valid {
+    border-color: var(--bs-form-valid-border-color)
+}
+
+.was-validated .form-select:valid:not([multiple]):not([size]),
+.was-validated .form-select:valid:not([multiple])[size="1"],
+.form-select.is-valid:not([multiple]):not([size]),
+.form-select.is-valid:not([multiple])[size="1"] {
+    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+    padding-right: 4.125rem;
+    background-position: right .75rem center, center right 2.25rem;
+    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem)
+}
+
+.was-validated .form-select:valid:focus,
+.form-select.is-valid:focus {
+    border-color: var(--bs-form-valid-border-color);
+    box-shadow: var(--bs-box-shadow-inset), 0 0 0 .25rem rgba(var(--bs-success-rgb), .25)
+}
+
+.was-validated .form-control-color:valid,
+.form-control-color.is-valid {
+    width: calc(3.75rem + 1.5em)
+}
+
+.was-validated .form-check-input:valid,
+.form-check-input.is-valid {
+    border-color: var(--bs-form-valid-border-color)
+}
+
+.was-validated .form-check-input:valid:checked,
+.form-check-input.is-valid:checked {
+    background-color: var(--bs-form-valid-color)
+}
+
+.was-validated .form-check-input:valid:focus,
+.form-check-input.is-valid:focus {
+    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25)
+}
+
+.was-validated .form-check-input:valid~.form-check-label,
+.form-check-input.is-valid~.form-check-label {
+    color: var(--bs-form-valid-color)
+}
+
+.form-check-inline .form-check-input~.valid-feedback {
+    margin-left: .5em
+}
+
+.was-validated .input-group>.form-control:not(:focus):valid,
+.input-group>.form-control:not(:focus).is-valid,
+.was-validated .input-group>.form-select:not(:focus):valid,
+.input-group>.form-select:not(:focus).is-valid,
+.was-validated .input-group>.form-floating:not(:focus-within):valid,
+.input-group>.form-floating:not(:focus-within).is-valid {
+    z-index: 3
+}
+
+.invalid-feedback {
+    display: none;
+    width: 100%;
+    margin-top: .25rem;
+    font-size: .875em;
+    color: var(--bs-form-invalid-color)
+}
+
+.invalid-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    max-width: 100%;
+    padding: .25rem .5rem;
+    margin-top: .1rem;
+    font-size: .875rem;
+    color: #fff;
+    background-color: var(--bs-danger);
+    border-radius: var(--bs-border-radius)
+}
+
+.was-validated :invalid~.invalid-feedback,
+.was-validated :invalid~.invalid-tooltip,
+.is-invalid~.invalid-feedback,
+.is-invalid~.invalid-tooltip {
+    display: block
+}
+
+.was-validated .form-control:invalid,
+.form-control.is-invalid {
+    border-color: var(--bs-form-invalid-border-color);
+    padding-right: calc(1.5em + .75rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(.375em + .1875rem) center;
+    background-size: calc(.75em + .375rem) calc(.75em + .375rem)
+}
+
+.was-validated .form-control:invalid:focus,
+.form-control.is-invalid:focus {
+    border-color: var(--bs-form-invalid-border-color);
+    box-shadow: var(--bs-box-shadow-inset), 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25)
+}
+
+.was-validated textarea.form-control:invalid,
+textarea.form-control.is-invalid {
+    padding-right: calc(1.5em + .75rem);
+    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem)
+}
+
+.was-validated .form-select:invalid,
+.form-select.is-invalid {
+    border-color: var(--bs-form-invalid-border-color)
+}
+
+.was-validated .form-select:invalid:not([multiple]):not([size]),
+.was-validated .form-select:invalid:not([multiple])[size="1"],
+.form-select.is-invalid:not([multiple]):not([size]),
+.form-select.is-invalid:not([multiple])[size="1"] {
+    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    padding-right: 4.125rem;
+    background-position: right .75rem center, center right 2.25rem;
+    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem)
+}
+
+.was-validated .form-select:invalid:focus,
+.form-select.is-invalid:focus {
+    border-color: var(--bs-form-invalid-border-color);
+    box-shadow: var(--bs-box-shadow-inset), 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25)
+}
+
+.was-validated .form-control-color:invalid,
+.form-control-color.is-invalid {
+    width: calc(3.75rem + 1.5em)
+}
+
+.was-validated .form-check-input:invalid,
+.form-check-input.is-invalid {
+    border-color: var(--bs-form-invalid-border-color)
+}
+
+.was-validated .form-check-input:invalid:checked,
+.form-check-input.is-invalid:checked {
+    background-color: var(--bs-form-invalid-color)
+}
+
+.was-validated .form-check-input:invalid:focus,
+.form-check-input.is-invalid:focus {
+    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25)
+}
+
+.was-validated .form-check-input:invalid~.form-check-label,
+.form-check-input.is-invalid~.form-check-label {
+    color: var(--bs-form-invalid-color)
+}
+
+.form-check-inline .form-check-input~.invalid-feedback {
+    margin-left: .5em
+}
+
+.was-validated .input-group>.form-control:not(:focus):invalid,
+.input-group>.form-control:not(:focus).is-invalid,
+.was-validated .input-group>.form-select:not(:focus):invalid,
+.input-group>.form-select:not(:focus).is-invalid,
+.was-validated .input-group>.form-floating:not(:focus-within):invalid,
+.input-group>.form-floating:not(:focus-within).is-invalid {
+    z-index: 4
+}
+
+.btn {
+    --bs-btn-padding-x: .75rem;
+    --bs-btn-padding-y: .375rem;
+    --bs-btn-font-family: ;
+    --bs-btn-font-size: 1rem;
+    --bs-btn-font-weight: 400;
+    --bs-btn-line-height: 1.5;
+    --bs-btn-color: var(--bs-body-color);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-width: var(--bs-border-width);
+    --bs-btn-border-color: transparent;
+    --bs-btn-border-radius: var(--bs-border-radius);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+    --bs-btn-disabled-opacity: .65;
+    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
+    display: inline-block;
+    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
+    font-family: var(--bs-btn-font-family);
+    font-size: var(--bs-btn-font-size);
+    font-weight: var(--bs-btn-font-weight);
+    line-height: var(--bs-btn-line-height);
+    color: var(--bs-btn-color);
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+    border-radius: var(--bs-btn-border-radius);
+    background-color: var(--bs-btn-bg);
+    background-image: var(--bs-gradient);
+    box-shadow: var(--bs-btn-box-shadow);
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .btn {
+        transition: none
+    }
+}
+
+.btn:hover {
+    color: var(--bs-btn-hover-color);
+    background-color: var(--bs-btn-hover-bg);
+    border-color: var(--bs-btn-hover-border-color)
+}
+
+.btn-check+.btn:hover {
+    color: var(--bs-btn-color);
+    background-color: var(--bs-btn-bg);
+    border-color: var(--bs-btn-border-color)
+}
+
+.btn:focus-visible {
+    color: var(--bs-btn-hover-color);
+    background-color: var(--bs-btn-hover-bg);
+    background-image: var(--bs-gradient);
+    border-color: var(--bs-btn-hover-border-color);
+    outline: 0;
+    box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow)
+}
+
+.btn-check:focus-visible+.btn {
+    border-color: var(--bs-btn-hover-border-color);
+    outline: 0;
+    box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow)
+}
+
+.btn-check:checked+.btn,
+:not(.btn-check)+.btn:active,
+.btn:first-child:active,
+.btn.active,
+.btn.show {
+    color: var(--bs-btn-active-color);
+    background-color: var(--bs-btn-active-bg);
+    background-image: none;
+    border-color: var(--bs-btn-active-border-color);
+    box-shadow: var(--bs-btn-active-shadow)
+}
+
+.btn-check:checked+.btn:focus-visible,
+:not(.btn-check)+.btn:active:focus-visible,
+.btn:first-child:active:focus-visible,
+.btn.active:focus-visible,
+.btn.show:focus-visible {
+    box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow)
+}
+
+.btn-check:checked:focus-visible+.btn {
+    box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow)
+}
+
+.btn:disabled,
+.btn.disabled,
+fieldset:disabled .btn {
+    color: var(--bs-btn-disabled-color);
+    pointer-events: none;
+    background-color: var(--bs-btn-disabled-bg);
+    background-image: none;
+    border-color: var(--bs-btn-disabled-border-color);
+    opacity: var(--bs-btn-disabled-opacity);
+    box-shadow: none
+}
+
+.btn-primary {
+    --bs-btn-color: #000;
+    --bs-btn-bg: #9A63EC;
+    --bs-btn-border-color: #9A63EC;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #a97aef;
+    --bs-btn-hover-border-color: #a473ee;
+    --bs-btn-focus-shadow-rgb: 131, 84, 201;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #ae82f0;
+    --bs-btn-active-border-color: #a473ee;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #000;
+    --bs-btn-disabled-bg: #9A63EC;
+    --bs-btn-disabled-border-color: #9A63EC
+}
+
+.btn-secondary {
+    --bs-btn-color: #000;
+    --bs-btn-bg: #E5E7EB;
+    --bs-btn-border-color: #E5E7EB;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #e9ebee;
+    --bs-btn-hover-border-color: #e8e9ed;
+    --bs-btn-focus-shadow-rgb: 195, 196, 200;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #eaecef;
+    --bs-btn-active-border-color: #e8e9ed;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #000;
+    --bs-btn-disabled-bg: #E5E7EB;
+    --bs-btn-disabled-border-color: #E5E7EB
+}
+
+.btn-success {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: #198754;
+    --bs-btn-border-color: #198754;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #157347;
+    --bs-btn-hover-border-color: #146c43;
+    --bs-btn-focus-shadow-rgb: 60, 153, 110;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #146c43;
+    --bs-btn-active-border-color: #13653f;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: #198754;
+    --bs-btn-disabled-border-color: #198754
+}
+
+.btn-info {
+    --bs-btn-color: #000;
+    --bs-btn-bg: #0dcaf0;
+    --bs-btn-border-color: #0dcaf0;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #31d2f2;
+    --bs-btn-hover-border-color: #25cff2;
+    --bs-btn-focus-shadow-rgb: 11, 172, 204;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #3dd5f3;
+    --bs-btn-active-border-color: #25cff2;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #000;
+    --bs-btn-disabled-bg: #0dcaf0;
+    --bs-btn-disabled-border-color: #0dcaf0
+}
+
+.btn-warning {
+    --bs-btn-color: #000;
+    --bs-btn-bg: #ffc107;
+    --bs-btn-border-color: #ffc107;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #ffca2c;
+    --bs-btn-hover-border-color: #ffc720;
+    --bs-btn-focus-shadow-rgb: 217, 164, 6;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #ffcd39;
+    --bs-btn-active-border-color: #ffc720;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #000;
+    --bs-btn-disabled-bg: #ffc107;
+    --bs-btn-disabled-border-color: #ffc107
+}
+
+.btn-danger {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: #dc3545;
+    --bs-btn-border-color: #dc3545;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #bb2d3b;
+    --bs-btn-hover-border-color: #b02a37;
+    --bs-btn-focus-shadow-rgb: 225, 83, 97;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #b02a37;
+    --bs-btn-active-border-color: #a52834;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: #dc3545;
+    --bs-btn-disabled-border-color: #dc3545
+}
+
+.btn-light {
+    --bs-btn-color: #000;
+    --bs-btn-bg: #f8f9fa;
+    --bs-btn-border-color: #f8f9fa;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #d3d4d5;
+    --bs-btn-hover-border-color: #c6c7c8;
+    --bs-btn-focus-shadow-rgb: 211, 212, 213;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #c6c7c8;
+    --bs-btn-active-border-color: #babbbc;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #000;
+    --bs-btn-disabled-bg: #f8f9fa;
+    --bs-btn-disabled-border-color: #f8f9fa
+}
+
+.btn-dark {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: #212529;
+    --bs-btn-border-color: #212529;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #424649;
+    --bs-btn-hover-border-color: #373b3e;
+    --bs-btn-focus-shadow-rgb: 66, 70, 73;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #4d5154;
+    --bs-btn-active-border-color: #373b3e;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: #212529;
+    --bs-btn-disabled-border-color: #212529
+}
+
+.btn-outline-primary {
+    --bs-btn-color: #9A63EC;
+    --bs-btn-border-color: #9A63EC;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #9A63EC;
+    --bs-btn-hover-border-color: #9A63EC;
+    --bs-btn-focus-shadow-rgb: 154, 99, 236;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #9A63EC;
+    --bs-btn-active-border-color: #9A63EC;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #9A63EC;
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: #9A63EC;
+    --bs-gradient: none
+}
+
+.btn-outline-secondary {
+    --bs-btn-color: #E5E7EB;
+    --bs-btn-border-color: #E5E7EB;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #E5E7EB;
+    --bs-btn-hover-border-color: #E5E7EB;
+    --bs-btn-focus-shadow-rgb: 229, 231, 235;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #E5E7EB;
+    --bs-btn-active-border-color: #E5E7EB;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #E5E7EB;
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: #E5E7EB;
+    --bs-gradient: none
+}
+
+.btn-outline-success {
+    --bs-btn-color: #198754;
+    --bs-btn-border-color: #198754;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #198754;
+    --bs-btn-hover-border-color: #198754;
+    --bs-btn-focus-shadow-rgb: 25, 135, 84;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #198754;
+    --bs-btn-active-border-color: #198754;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #198754;
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: #198754;
+    --bs-gradient: none
+}
+
+.btn-outline-info {
+    --bs-btn-color: #0dcaf0;
+    --bs-btn-border-color: #0dcaf0;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #0dcaf0;
+    --bs-btn-hover-border-color: #0dcaf0;
+    --bs-btn-focus-shadow-rgb: 13, 202, 240;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #0dcaf0;
+    --bs-btn-active-border-color: #0dcaf0;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #0dcaf0;
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: #0dcaf0;
+    --bs-gradient: none
+}
+
+.btn-outline-warning {
+    --bs-btn-color: #ffc107;
+    --bs-btn-border-color: #ffc107;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #ffc107;
+    --bs-btn-hover-border-color: #ffc107;
+    --bs-btn-focus-shadow-rgb: 255, 193, 7;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #ffc107;
+    --bs-btn-active-border-color: #ffc107;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #ffc107;
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: #ffc107;
+    --bs-gradient: none
+}
+
+.btn-outline-danger {
+    --bs-btn-color: #dc3545;
+    --bs-btn-border-color: #dc3545;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #dc3545;
+    --bs-btn-hover-border-color: #dc3545;
+    --bs-btn-focus-shadow-rgb: 220, 53, 69;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #dc3545;
+    --bs-btn-active-border-color: #dc3545;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #dc3545;
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: #dc3545;
+    --bs-gradient: none
+}
+
+.btn-outline-light {
+    --bs-btn-color: #f8f9fa;
+    --bs-btn-border-color: #f8f9fa;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #f8f9fa;
+    --bs-btn-hover-border-color: #f8f9fa;
+    --bs-btn-focus-shadow-rgb: 248, 249, 250;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #f8f9fa;
+    --bs-btn-active-border-color: #f8f9fa;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #f8f9fa;
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: #f8f9fa;
+    --bs-gradient: none
+}
+
+.btn-outline-dark {
+    --bs-btn-color: #212529;
+    --bs-btn-border-color: #212529;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #212529;
+    --bs-btn-hover-border-color: #212529;
+    --bs-btn-focus-shadow-rgb: 33, 37, 41;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #212529;
+    --bs-btn-active-border-color: #212529;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    --bs-btn-disabled-color: #212529;
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: #212529;
+    --bs-gradient: none
+}
+
+.btn-link {
+    --bs-btn-font-weight: 400;
+    --bs-btn-color: var(--bs-link-color);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--bs-link-hover-color);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--bs-link-hover-color);
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: #6c757d;
+    --bs-btn-disabled-border-color: transparent;
+    --bs-btn-box-shadow: 0 0 0 #000;
+    --bs-btn-focus-shadow-rgb: 102, 111, 122;
+    text-decoration: none;
+    background-image: none
+}
+
+.btn-link:focus-visible {
+    color: var(--bs-btn-color)
+}
+
+.btn-link:hover {
+    color: var(--bs-btn-hover-color)
+}
+
+.btn-lg {
+    --bs-btn-padding-y: .5rem;
+    --bs-btn-padding-x: 1rem;
+    --bs-btn-font-size: 1.25rem;
+    --bs-btn-border-radius: var(--bs-border-radius-lg)
+}
+
+.btn-sm {
+    --bs-btn-padding-y: .25rem;
+    --bs-btn-padding-x: .5rem;
+    --bs-btn-font-size: .875rem;
+    --bs-btn-border-radius: var(--bs-border-radius-sm)
+}
+
+.fade {
+    transition: opacity .15s linear
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .fade {
+        transition: none
+    }
+}
+
+.fade:not(.show) {
+    opacity: 0
+}
+
+.collapse:not(.show) {
+    display: none
+}
+
+.collapsing {
+    height: 0;
+    overflow: hidden;
+    transition: height .35s ease
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .collapsing {
+        transition: none
+    }
+}
+
+.collapsing.collapse-horizontal {
+    width: 0;
+    height: auto;
+    transition: width .35s ease
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .collapsing.collapse-horizontal {
+        transition: none
+    }
+}
+
+.dropup,
+.dropend,
+.dropdown,
+.dropstart,
+.dropup-center,
+.dropdown-center {
+    position: relative
+}
+
+.dropdown-toggle {
+    white-space: nowrap
+}
+
+.dropdown-toggle:after {
+    display: inline-block;
+    margin-left: .255em;
+    vertical-align: .255em;
+    content: "";
+    border-top: .3em solid;
+    border-right: .3em solid transparent;
+    border-bottom: 0;
+    border-left: .3em solid transparent
+}
+
+.dropdown-toggle:empty:after {
+    margin-left: 0
+}
+
+.dropdown-menu {
+    --bs-dropdown-zindex: 1000;
+    --bs-dropdown-min-width: 10rem;
+    --bs-dropdown-padding-x: 0;
+    --bs-dropdown-padding-y: .5rem;
+    --bs-dropdown-spacer: .125rem;
+    --bs-dropdown-font-size: 1rem;
+    --bs-dropdown-color: var(--bs-body-color);
+    --bs-dropdown-bg: var(--bs-body-bg);
+    --bs-dropdown-border-color: var(--bs-border-color-translucent);
+    --bs-dropdown-border-radius: var(--bs-border-radius);
+    --bs-dropdown-border-width: var(--bs-border-width);
+    --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
+    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
+    --bs-dropdown-divider-margin-y: .5rem;
+    --bs-dropdown-box-shadow: var(--bs-box-shadow);
+    --bs-dropdown-link-color: var(--bs-body-color);
+    --bs-dropdown-link-hover-color: var(--bs-body-color);
+    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
+    --bs-dropdown-link-active-color: #fff;
+    --bs-dropdown-link-active-bg: #9A63EC;
+    --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
+    --bs-dropdown-item-padding-x: 1rem;
+    --bs-dropdown-item-padding-y: .25rem;
+    --bs-dropdown-header-color: #6c757d;
+    --bs-dropdown-header-padding-x: 1rem;
+    --bs-dropdown-header-padding-y: .5rem;
+    position: absolute;
+    z-index: var(--bs-dropdown-zindex);
+    display: none;
+    min-width: var(--bs-dropdown-min-width);
+    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
+    margin: 0;
+    font-size: var(--bs-dropdown-font-size);
+    color: var(--bs-dropdown-color);
+    text-align: left;
+    list-style: none;
+    background-color: var(--bs-dropdown-bg);
+    background-clip: padding-box;
+    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
+    border-radius: var(--bs-dropdown-border-radius);
+    box-shadow: var(--bs-dropdown-box-shadow)
+}
+
+.dropdown-menu[data-bs-popper] {
+    top: 100%;
+    left: 0;
+    margin-top: var(--bs-dropdown-spacer)
+}
+
+.dropdown-menu-start {
+    --bs-position: start
+}
+
+.dropdown-menu-start[data-bs-popper] {
+    right: auto;
+    left: 0
+}
+
+.dropdown-menu-end {
+    --bs-position: end
+}
+
+.dropdown-menu-end[data-bs-popper] {
+    right: 0;
+    left: auto
+}
+
+@media (min-width: 576px) {
+    .dropdown-menu-sm-start {
+        --bs-position: start
+    }
+
+    .dropdown-menu-sm-start[data-bs-popper] {
+        right: auto;
+        left: 0
+    }
+
+    .dropdown-menu-sm-end {
+        --bs-position: end
+    }
+
+    .dropdown-menu-sm-end[data-bs-popper] {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 768px) {
+    .dropdown-menu-md-start {
+        --bs-position: start
+    }
+
+    .dropdown-menu-md-start[data-bs-popper] {
+        right: auto;
+        left: 0
+    }
+
+    .dropdown-menu-md-end {
+        --bs-position: end
+    }
+
+    .dropdown-menu-md-end[data-bs-popper] {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 992px) {
+    .dropdown-menu-lg-start {
+        --bs-position: start
+    }
+
+    .dropdown-menu-lg-start[data-bs-popper] {
+        right: auto;
+        left: 0
+    }
+
+    .dropdown-menu-lg-end {
+        --bs-position: end
+    }
+
+    .dropdown-menu-lg-end[data-bs-popper] {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 1200px) {
+    .dropdown-menu-xl-start {
+        --bs-position: start
+    }
+
+    .dropdown-menu-xl-start[data-bs-popper] {
+        right: auto;
+        left: 0
+    }
+
+    .dropdown-menu-xl-end {
+        --bs-position: end
+    }
+
+    .dropdown-menu-xl-end[data-bs-popper] {
+        right: 0;
+        left: auto
+    }
+}
+
+@media (min-width: 1400px) {
+    .dropdown-menu-xxl-start {
+        --bs-position: start
+    }
+
+    .dropdown-menu-xxl-start[data-bs-popper] {
+        right: auto;
+        left: 0
+    }
+
+    .dropdown-menu-xxl-end {
+        --bs-position: end
+    }
+
+    .dropdown-menu-xxl-end[data-bs-popper] {
+        right: 0;
+        left: auto
+    }
+}
+
+.dropup .dropdown-menu[data-bs-popper] {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: var(--bs-dropdown-spacer)
+}
+
+.dropup .dropdown-toggle:after {
+    display: inline-block;
+    margin-left: .255em;
+    vertical-align: .255em;
+    content: "";
+    border-top: 0;
+    border-right: .3em solid transparent;
+    border-bottom: .3em solid;
+    border-left: .3em solid transparent
+}
+
+.dropup .dropdown-toggle:empty:after {
+    margin-left: 0
+}
+
+.dropend .dropdown-menu[data-bs-popper] {
+    top: 0;
+    right: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-left: var(--bs-dropdown-spacer)
+}
+
+.dropend .dropdown-toggle:after {
+    display: inline-block;
+    margin-left: .255em;
+    vertical-align: .255em;
+    content: "";
+    border-top: .3em solid transparent;
+    border-right: 0;
+    border-bottom: .3em solid transparent;
+    border-left: .3em solid
+}
+
+.dropend .dropdown-toggle:empty:after {
+    margin-left: 0
+}
+
+.dropend .dropdown-toggle:after {
+    vertical-align: 0
+}
+
+.dropstart .dropdown-menu[data-bs-popper] {
+    top: 0;
+    right: 100%;
+    left: auto;
+    margin-top: 0;
+    margin-right: var(--bs-dropdown-spacer)
+}
+
+.dropstart .dropdown-toggle:after {
+    display: inline-block;
+    margin-left: .255em;
+    vertical-align: .255em;
+    content: ""
+}
+
+.dropstart .dropdown-toggle:after {
+    display: none
+}
+
+.dropstart .dropdown-toggle:before {
+    display: inline-block;
+    margin-right: .255em;
+    vertical-align: .255em;
+    content: "";
+    border-top: .3em solid transparent;
+    border-right: .3em solid;
+    border-bottom: .3em solid transparent
+}
+
+.dropstart .dropdown-toggle:empty:after {
+    margin-left: 0
+}
+
+.dropstart .dropdown-toggle:before {
+    vertical-align: 0
+}
+
+.dropdown-divider {
+    height: 0;
+    margin: var(--bs-dropdown-divider-margin-y) 0;
+    overflow: hidden;
+    border-top: 1px solid var(--bs-dropdown-divider-bg);
+    opacity: 1
+}
+
+.dropdown-item {
+    display: block;
+    width: 100%;
+    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+    clear: both;
+    font-weight: 400;
+    color: var(--bs-dropdown-link-color);
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--bs-dropdown-item-border-radius, 0)
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus {
+    color: var(--bs-dropdown-link-hover-color);
+    background-color: var(--bs-dropdown-link-hover-bg);
+    background-image: var(--bs-gradient)
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+    color: var(--bs-dropdown-link-active-color);
+    text-decoration: none;
+    background-color: var(--bs-dropdown-link-active-bg);
+    background-image: var(--bs-gradient)
+}
+
+.dropdown-item.disabled,
+.dropdown-item:disabled {
+    color: var(--bs-dropdown-link-disabled-color);
+    pointer-events: none;
+    background-color: transparent;
+    background-image: none
+}
+
+.dropdown-menu.show {
+    display: block
+}
+
+.dropdown-header {
+    display: block;
+    padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
+    margin-bottom: 0;
+    font-size: .875rem;
+    color: var(--bs-dropdown-header-color);
+    white-space: nowrap
+}
+
+.dropdown-item-text {
+    display: block;
+    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+    color: var(--bs-dropdown-link-color)
+}
+
+.dropdown-menu-dark {
+    --bs-dropdown-color: #dee2e6;
+    --bs-dropdown-bg: #343a40;
+    --bs-dropdown-border-color: var(--bs-border-color-translucent);
+    --bs-dropdown-box-shadow: ;
+    --bs-dropdown-link-color: #dee2e6;
+    --bs-dropdown-link-hover-color: #fff;
+    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
+    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .15);
+    --bs-dropdown-link-active-color: #fff;
+    --bs-dropdown-link-active-bg: #9A63EC;
+    --bs-dropdown-link-disabled-color: #adb5bd;
+    --bs-dropdown-header-color: #adb5bd
+}
+
+.btn-close {
+    --bs-btn-close-color: #000;
+    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
+    --bs-btn-close-opacity: .5;
+    --bs-btn-close-hover-opacity: .75;
+    --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(154, 99, 236, .25);
+    --bs-btn-close-focus-opacity: 1;
+    --bs-btn-close-disabled-opacity: .25;
+    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
+    box-sizing: content-box;
+    width: 1em;
+    height: 1em;
+    padding: .25em;
+    color: var(--bs-btn-close-color);
+    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
+    border: 0;
+    border-radius: .4rem;
+    opacity: var(--bs-btn-close-opacity)
+}
+
+.btn-close:hover {
+    color: var(--bs-btn-close-color);
+    text-decoration: none;
+    opacity: var(--bs-btn-close-hover-opacity)
+}
+
+.btn-close:focus {
+    outline: 0;
+    box-shadow: var(--bs-btn-close-focus-shadow);
+    opacity: var(--bs-btn-close-focus-opacity)
+}
+
+.btn-close:disabled,
+.btn-close.disabled {
+    pointer-events: none;
+    -webkit-user-select: none;
+    user-select: none;
+    opacity: var(--bs-btn-close-disabled-opacity)
+}
+
+.btn-close-white,
+[data-bs-theme=dark] .btn-close {
+    filter: var(--bs-btn-close-white-filter)
+}
+
+.modal {
+    --bs-modal-zindex: 1055;
+    --bs-modal-width: 500px;
+    --bs-modal-padding: 1rem;
+    --bs-modal-margin: .5rem;
+    --bs-modal-color: ;
+    --bs-modal-bg: var(--bs-body-bg);
+    --bs-modal-border-color: var(--bs-border-color-translucent);
+    --bs-modal-border-width: var(--bs-border-width);
+    --bs-modal-border-radius: var(--bs-border-radius-lg);
+    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
+    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
+    --bs-modal-header-padding-x: 1rem;
+    --bs-modal-header-padding-y: 1rem;
+    --bs-modal-header-padding: 1rem 1rem;
+    --bs-modal-header-border-color: var(--bs-border-color);
+    --bs-modal-header-border-width: var(--bs-border-width);
+    --bs-modal-title-line-height: 1.5;
+    --bs-modal-footer-gap: .5rem;
+    --bs-modal-footer-bg: ;
+    --bs-modal-footer-border-color: var(--bs-border-color);
+    --bs-modal-footer-border-width: var(--bs-border-width);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--bs-modal-zindex);
+    display: none;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    outline: 0
+}
+
+.modal-dialog {
+    position: relative;
+    width: auto;
+    margin: var(--bs-modal-margin);
+    pointer-events: none
+}
+
+.modal.fade .modal-dialog {
+    transition: transform .3s ease-out;
+    transform: translateY(-50px)
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .modal.fade .modal-dialog {
+        transition: none
+    }
+}
+
+.modal.show .modal-dialog {
+    transform: none
+}
+
+.modal.modal-static .modal-dialog {
+    transform: scale(1.02)
+}
+
+.modal-dialog-scrollable {
+    height: calc(100% - var(--bs-modal-margin) * 2)
+}
+
+.modal-dialog-scrollable .modal-content {
+    max-height: 100%;
+    overflow: hidden
+}
+
+.modal-dialog-scrollable .modal-body {
+    overflow-y: auto
+}
+
+.modal-dialog-centered {
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - var(--bs-modal-margin) * 2)
+}
+
+.modal-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    color: var(--bs-modal-color);
+    pointer-events: auto;
+    background-color: var(--bs-modal-bg);
+    background-clip: padding-box;
+    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
+    border-radius: var(--bs-modal-border-radius);
+    box-shadow: var(--bs-modal-box-shadow);
+    outline: 0
+}
+
+.modal-backdrop {
+    --bs-backdrop-zindex: 1050;
+    --bs-backdrop-bg: #000;
+    --bs-backdrop-opacity: .5;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--bs-backdrop-zindex);
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--bs-backdrop-bg)
+}
+
+.modal-backdrop.fade {
+    opacity: 0
+}
+
+.modal-backdrop.show {
+    opacity: var(--bs-backdrop-opacity)
+}
+
+.modal-header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    padding: var(--bs-modal-header-padding);
+    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
+    border-top-left-radius: var(--bs-modal-inner-border-radius);
+    border-top-right-radius: var(--bs-modal-inner-border-radius)
+}
+
+.modal-header .btn-close {
+    padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
+    margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto
+}
+
+.modal-title {
+    margin-bottom: 0;
+    line-height: var(--bs-modal-title-line-height)
+}
+
+.modal-body {
+    position: relative;
+    flex: 1 1 auto;
+    padding: var(--bs-modal-padding)
+}
+
+.modal-footer {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
+    background-color: var(--bs-modal-footer-bg);
+    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
+    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
+    border-bottom-left-radius: var(--bs-modal-inner-border-radius)
+}
+
+.modal-footer>* {
+    margin: calc(var(--bs-modal-footer-gap) * .5)
+}
+
+@media (min-width: 576px) {
+    .modal {
+        --bs-modal-margin: 1.75rem;
+        --bs-modal-box-shadow: var(--bs-box-shadow)
+    }
+
+    .modal-dialog {
+        max-width: var(--bs-modal-width);
+        margin-right: auto;
+        margin-left: auto
+    }
+
+    .modal-sm {
+        --bs-modal-width: 300px
+    }
+}
+
+@media (min-width: 992px) {
+
+    .modal-lg,
+    .modal-xl {
+        --bs-modal-width: 800px
+    }
+}
+
+@media (min-width: 1200px) {
+    .modal-xl {
+        --bs-modal-width: 1140px
+    }
+}
+
+.modal-fullscreen {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0
+}
+
+.modal-fullscreen .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0
+}
+
+.modal-fullscreen .modal-header,
+.modal-fullscreen .modal-footer {
+    border-radius: 0
+}
+
+.modal-fullscreen .modal-body {
+    overflow-y: auto
+}
+
+@media (max-width: 575.98px) {
+    .modal-fullscreen-sm-down {
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        margin: 0
+    }
+
+    .modal-fullscreen-sm-down .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0
+    }
+
+    .modal-fullscreen-sm-down .modal-header,
+    .modal-fullscreen-sm-down .modal-footer {
+        border-radius: 0
+    }
+
+    .modal-fullscreen-sm-down .modal-body {
+        overflow-y: auto
+    }
+}
+
+@media (max-width: 767.98px) {
+    .modal-fullscreen-md-down {
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        margin: 0
+    }
+
+    .modal-fullscreen-md-down .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0
+    }
+
+    .modal-fullscreen-md-down .modal-header,
+    .modal-fullscreen-md-down .modal-footer {
+        border-radius: 0
+    }
+
+    .modal-fullscreen-md-down .modal-body {
+        overflow-y: auto
+    }
+}
+
+@media (max-width: 991.98px) {
+    .modal-fullscreen-lg-down {
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        margin: 0
+    }
+
+    .modal-fullscreen-lg-down .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0
+    }
+
+    .modal-fullscreen-lg-down .modal-header,
+    .modal-fullscreen-lg-down .modal-footer {
+        border-radius: 0
+    }
+
+    .modal-fullscreen-lg-down .modal-body {
+        overflow-y: auto
+    }
+}
+
+@media (max-width: 1199.98px) {
+    .modal-fullscreen-xl-down {
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        margin: 0
+    }
+
+    .modal-fullscreen-xl-down .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0
+    }
+
+    .modal-fullscreen-xl-down .modal-header,
+    .modal-fullscreen-xl-down .modal-footer {
+        border-radius: 0
+    }
+
+    .modal-fullscreen-xl-down .modal-body {
+        overflow-y: auto
+    }
+}
+
+@media (max-width: 1399.98px) {
+    .modal-fullscreen-xxl-down {
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        margin: 0
+    }
+
+    .modal-fullscreen-xxl-down .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0
+    }
+
+    .modal-fullscreen-xxl-down .modal-header,
+    .modal-fullscreen-xxl-down .modal-footer {
+        border-radius: 0
+    }
+
+    .modal-fullscreen-xxl-down .modal-body {
+        overflow-y: auto
+    }
+}
+
+.popover {
+    --bs-popover-zindex: 1070;
+    --bs-popover-max-width: 276px;
+    --bs-popover-font-size: .875rem;
+    --bs-popover-bg: var(--bs-body-bg);
+    --bs-popover-border-width: var(--bs-border-width);
+    --bs-popover-border-color: var(--bs-border-color-translucent);
+    --bs-popover-border-radius: var(--bs-border-radius-lg);
+    --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
+    --bs-popover-box-shadow: var(--bs-box-shadow);
+    --bs-popover-header-padding-x: 1rem;
+    --bs-popover-header-padding-y: .5rem;
+    --bs-popover-header-font-size: 1rem;
+    --bs-popover-header-color: inherit;
+    --bs-popover-header-bg: var(--bs-secondary-bg);
+    --bs-popover-body-padding-x: 1rem;
+    --bs-popover-body-padding-y: 1rem;
+    --bs-popover-body-color: var(--bs-body-color);
+    --bs-popover-arrow-width: 1rem;
+    --bs-popover-arrow-height: .5rem;
+    --bs-popover-arrow-border: var(--bs-popover-border-color);
+    z-index: var(--bs-popover-zindex);
+    display: block;
+    max-width: var(--bs-popover-max-width);
+    font-family: Cairo, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: left;
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-break: normal;
+    white-space: normal;
+    word-spacing: normal;
+    line-break: auto;
+    font-size: var(--bs-popover-font-size);
+    word-wrap: break-word;
+    background-color: var(--bs-popover-bg);
+    background-clip: padding-box;
+    border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
+    border-radius: var(--bs-popover-border-radius);
+    box-shadow: var(--bs-popover-box-shadow)
+}
+
+.popover .popover-arrow {
+    display: block;
+    width: var(--bs-popover-arrow-width);
+    height: var(--bs-popover-arrow-height)
+}
+
+.popover .popover-arrow:before,
+.popover .popover-arrow:after {
+    position: absolute;
+    display: block;
+    content: "";
+    border-color: transparent;
+    border-style: solid;
+    border-width: 0
+}
+
+.bs-popover-top>.popover-arrow,
+.bs-popover-auto[data-popper-placement^=top]>.popover-arrow {
+    bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))
+}
+
+.bs-popover-top>.popover-arrow:before,
+.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:before,
+.bs-popover-top>.popover-arrow:after,
+.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:after {
+    border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0
+}
+
+.bs-popover-top>.popover-arrow:before,
+.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:before {
+    bottom: 0;
+    border-top-color: var(--bs-popover-arrow-border)
+}
+
+.bs-popover-top>.popover-arrow:after,
+.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:after {
+    bottom: var(--bs-popover-border-width);
+    border-top-color: var(--bs-popover-bg)
+}
+
+.bs-popover-end>.popover-arrow,
+.bs-popover-auto[data-popper-placement^=right]>.popover-arrow {
+    left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
+    width: var(--bs-popover-arrow-height);
+    height: var(--bs-popover-arrow-width)
+}
+
+.bs-popover-end>.popover-arrow:before,
+.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:before,
+.bs-popover-end>.popover-arrow:after,
+.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:after {
+    border-width: calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0
+}
+
+.bs-popover-end>.popover-arrow:before,
+.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:before {
+    left: 0;
+    border-right-color: var(--bs-popover-arrow-border)
+}
+
+.bs-popover-end>.popover-arrow:after,
+.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:after {
+    left: var(--bs-popover-border-width);
+    border-right-color: var(--bs-popover-bg)
+}
+
+.bs-popover-bottom>.popover-arrow,
+.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow {
+    top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))
+}
+
+.bs-popover-bottom>.popover-arrow:before,
+.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:before,
+.bs-popover-bottom>.popover-arrow:after,
+.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:after {
+    border-width: 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)
+}
+
+.bs-popover-bottom>.popover-arrow:before,
+.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:before {
+    top: 0;
+    border-bottom-color: var(--bs-popover-arrow-border)
+}
+
+.bs-popover-bottom>.popover-arrow:after,
+.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:after {
+    top: var(--bs-popover-border-width);
+    border-bottom-color: var(--bs-popover-bg)
+}
+
+.bs-popover-bottom .popover-header:before,
+.bs-popover-auto[data-popper-placement^=bottom] .popover-header:before {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: block;
+    width: var(--bs-popover-arrow-width);
+    margin-left: calc(-.5 * var(--bs-popover-arrow-width));
+    content: "";
+    border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg)
+}
+
+.bs-popover-start>.popover-arrow,
+.bs-popover-auto[data-popper-placement^=left]>.popover-arrow {
+    right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
+    width: var(--bs-popover-arrow-height);
+    height: var(--bs-popover-arrow-width)
+}
+
+.bs-popover-start>.popover-arrow:before,
+.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:before,
+.bs-popover-start>.popover-arrow:after,
+.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:after {
+    border-width: calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)
+}
+
+.bs-popover-start>.popover-arrow:before,
+.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:before {
+    right: 0;
+    border-left-color: var(--bs-popover-arrow-border)
+}
+
+.bs-popover-start>.popover-arrow:after,
+.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:after {
+    right: var(--bs-popover-border-width);
+    border-left-color: var(--bs-popover-bg)
+}
+
+.popover-header {
+    padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
+    margin-bottom: 0;
+    font-size: var(--bs-popover-header-font-size);
+    color: var(--bs-popover-header-color);
+    background-color: var(--bs-popover-header-bg);
+    border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
+    border-top-left-radius: var(--bs-popover-inner-border-radius);
+    border-top-right-radius: var(--bs-popover-inner-border-radius)
+}
+
+.popover-header:empty {
+    display: none
+}
+
+.popover-body {
+    padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
+    color: var(--bs-popover-body-color)
+}
+
+.offcanvas,
+.offcanvas-xxl,
+.offcanvas-xl,
+.offcanvas-lg,
+.offcanvas-md,
+.offcanvas-sm {
+    --bs-offcanvas-zindex: 1045;
+    --bs-offcanvas-width: 400px;
+    --bs-offcanvas-height: 30vh;
+    --bs-offcanvas-padding-x: 1rem;
+    --bs-offcanvas-padding-y: 1rem;
+    --bs-offcanvas-color: var(--bs-body-color);
+    --bs-offcanvas-bg: var(--bs-body-bg);
+    --bs-offcanvas-border-width: var(--bs-border-width);
+    --bs-offcanvas-border-color: var(--bs-border-color-translucent);
+    --bs-offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
+    --bs-offcanvas-transition: transform .3s ease-in-out;
+    --bs-offcanvas-title-line-height: 1.5
+}
+
+@media (max-width: 575.98px) {
+    .offcanvas-sm {
+        position: fixed;
+        bottom: 0;
+        z-index: var(--bs-offcanvas-zindex);
+        display: flex;
+        flex-direction: column;
+        max-width: 100%;
+        color: var(--bs-offcanvas-color);
+        visibility: hidden;
+        background-color: var(--bs-offcanvas-bg);
+        background-clip: padding-box;
+        outline: 0;
+        box-shadow: var(--bs-offcanvas-box-shadow);
+        transition: var(--bs-offcanvas-transition)
+    }
+}
+
+@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
+    .offcanvas-sm {
+        transition: none
+    }
+}
+
+@media (max-width: 575.98px) {
+    .offcanvas-sm.offcanvas-start {
+        top: 0;
+        left: 0;
+        width: var(--bs-offcanvas-width);
+        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translate(-100%)
+    }
+
+    .offcanvas-sm.offcanvas-end {
+        top: 0;
+        right: 0;
+        width: var(--bs-offcanvas-width);
+        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translate(100%)
+    }
+
+    .offcanvas-sm.offcanvas-top {
+        top: 0;
+        right: 0;
+        left: 0;
+        height: var(--bs-offcanvas-height);
+        max-height: 100%;
+        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translateY(-100%)
+    }
+
+    .offcanvas-sm.offcanvas-bottom {
+        right: 0;
+        left: 0;
+        height: var(--bs-offcanvas-height);
+        max-height: 100%;
+        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translateY(100%)
+    }
+
+    .offcanvas-sm.showing,
+    .offcanvas-sm.show:not(.hiding) {
+        transform: none
+    }
+
+    .offcanvas-sm.showing,
+    .offcanvas-sm.hiding,
+    .offcanvas-sm.show {
+        visibility: visible
+    }
+}
+
+@media (min-width: 576px) {
+    .offcanvas-sm {
+        --bs-offcanvas-height: auto;
+        --bs-offcanvas-border-width: 0;
+        background-color: transparent !important
+    }
+
+    .offcanvas-sm .offcanvas-header {
+        display: none
+    }
+
+    .offcanvas-sm .offcanvas-body {
+        display: flex;
+        flex-grow: 0;
+        padding: 0;
+        overflow-y: visible;
+        background-color: transparent !important
+    }
+}
+
+@media (max-width: 767.98px) {
+    .offcanvas-md {
+        position: fixed;
+        bottom: 0;
+        z-index: var(--bs-offcanvas-zindex);
+        display: flex;
+        flex-direction: column;
+        max-width: 100%;
+        color: var(--bs-offcanvas-color);
+        visibility: hidden;
+        background-color: var(--bs-offcanvas-bg);
+        background-clip: padding-box;
+        outline: 0;
+        box-shadow: var(--bs-offcanvas-box-shadow);
+        transition: var(--bs-offcanvas-transition)
+    }
+}
+
+@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
+    .offcanvas-md {
+        transition: none
+    }
+}
+
+@media (max-width: 767.98px) {
+    .offcanvas-md.offcanvas-start {
+        top: 0;
+        left: 0;
+        width: var(--bs-offcanvas-width);
+        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translate(-100%)
+    }
+
+    .offcanvas-md.offcanvas-end {
+        top: 0;
+        right: 0;
+        width: var(--bs-offcanvas-width);
+        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translate(100%)
+    }
+
+    .offcanvas-md.offcanvas-top {
+        top: 0;
+        right: 0;
+        left: 0;
+        height: var(--bs-offcanvas-height);
+        max-height: 100%;
+        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translateY(-100%)
+    }
+
+    .offcanvas-md.offcanvas-bottom {
+        right: 0;
+        left: 0;
+        height: var(--bs-offcanvas-height);
+        max-height: 100%;
+        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translateY(100%)
+    }
+
+    .offcanvas-md.showing,
+    .offcanvas-md.show:not(.hiding) {
+        transform: none
+    }
+
+    .offcanvas-md.showing,
+    .offcanvas-md.hiding,
+    .offcanvas-md.show {
+        visibility: visible
+    }
+}
+
+@media (min-width: 768px) {
+    .offcanvas-md {
+        --bs-offcanvas-height: auto;
+        --bs-offcanvas-border-width: 0;
+        background-color: transparent !important
+    }
+
+    .offcanvas-md .offcanvas-header {
+        display: none
+    }
+
+    .offcanvas-md .offcanvas-body {
+        display: flex;
+        flex-grow: 0;
+        padding: 0;
+        overflow-y: visible;
+        background-color: transparent !important
+    }
+}
+
+@media (max-width: 991.98px) {
+    .offcanvas-lg {
+        position: fixed;
+        bottom: 0;
+        z-index: var(--bs-offcanvas-zindex);
+        display: flex;
+        flex-direction: column;
+        max-width: 100%;
+        color: var(--bs-offcanvas-color);
+        visibility: hidden;
+        background-color: var(--bs-offcanvas-bg);
+        background-clip: padding-box;
+        outline: 0;
+        box-shadow: var(--bs-offcanvas-box-shadow);
+        transition: var(--bs-offcanvas-transition)
+    }
+}
+
+@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
+    .offcanvas-lg {
+        transition: none
+    }
+}
+
+@media (max-width: 991.98px) {
+    .offcanvas-lg.offcanvas-start {
+        top: 0;
+        left: 0;
+        width: var(--bs-offcanvas-width);
+        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translate(-100%)
+    }
+
+    .offcanvas-lg.offcanvas-end {
+        top: 0;
+        right: 0;
+        width: var(--bs-offcanvas-width);
+        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translate(100%)
+    }
+
+    .offcanvas-lg.offcanvas-top {
+        top: 0;
+        right: 0;
+        left: 0;
+        height: var(--bs-offcanvas-height);
+        max-height: 100%;
+        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translateY(-100%)
+    }
+
+    .offcanvas-lg.offcanvas-bottom {
+        right: 0;
+        left: 0;
+        height: var(--bs-offcanvas-height);
+        max-height: 100%;
+        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translateY(100%)
+    }
+
+    .offcanvas-lg.showing,
+    .offcanvas-lg.show:not(.hiding) {
+        transform: none
+    }
+
+    .offcanvas-lg.showing,
+    .offcanvas-lg.hiding,
+    .offcanvas-lg.show {
+        visibility: visible
+    }
+}
+
+@media (min-width: 992px) {
+    .offcanvas-lg {
+        --bs-offcanvas-height: auto;
+        --bs-offcanvas-border-width: 0;
+        background-color: transparent !important
+    }
+
+    .offcanvas-lg .offcanvas-header {
+        display: none
+    }
+
+    .offcanvas-lg .offcanvas-body {
+        display: flex;
+        flex-grow: 0;
+        padding: 0;
+        overflow-y: visible;
+        background-color: transparent !important
+    }
+}
+
+@media (max-width: 1199.98px) {
+    .offcanvas-xl {
+        position: fixed;
+        bottom: 0;
+        z-index: var(--bs-offcanvas-zindex);
+        display: flex;
+        flex-direction: column;
+        max-width: 100%;
+        color: var(--bs-offcanvas-color);
+        visibility: hidden;
+        background-color: var(--bs-offcanvas-bg);
+        background-clip: padding-box;
+        outline: 0;
+        box-shadow: var(--bs-offcanvas-box-shadow);
+        transition: var(--bs-offcanvas-transition)
+    }
+}
+
+@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
+    .offcanvas-xl {
+        transition: none
+    }
+}
+
+@media (max-width: 1199.98px) {
+    .offcanvas-xl.offcanvas-start {
+        top: 0;
+        left: 0;
+        width: var(--bs-offcanvas-width);
+        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translate(-100%)
+    }
+
+    .offcanvas-xl.offcanvas-end {
+        top: 0;
+        right: 0;
+        width: var(--bs-offcanvas-width);
+        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translate(100%)
+    }
+
+    .offcanvas-xl.offcanvas-top {
+        top: 0;
+        right: 0;
+        left: 0;
+        height: var(--bs-offcanvas-height);
+        max-height: 100%;
+        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translateY(-100%)
+    }
+
+    .offcanvas-xl.offcanvas-bottom {
+        right: 0;
+        left: 0;
+        height: var(--bs-offcanvas-height);
+        max-height: 100%;
+        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translateY(100%)
+    }
+
+    .offcanvas-xl.showing,
+    .offcanvas-xl.show:not(.hiding) {
+        transform: none
+    }
+
+    .offcanvas-xl.showing,
+    .offcanvas-xl.hiding,
+    .offcanvas-xl.show {
+        visibility: visible
+    }
+}
+
+@media (min-width: 1200px) {
+    .offcanvas-xl {
+        --bs-offcanvas-height: auto;
+        --bs-offcanvas-border-width: 0;
+        background-color: transparent !important
+    }
+
+    .offcanvas-xl .offcanvas-header {
+        display: none
+    }
+
+    .offcanvas-xl .offcanvas-body {
+        display: flex;
+        flex-grow: 0;
+        padding: 0;
+        overflow-y: visible;
+        background-color: transparent !important
+    }
+}
+
+@media (max-width: 1399.98px) {
+    .offcanvas-xxl {
+        position: fixed;
+        bottom: 0;
+        z-index: var(--bs-offcanvas-zindex);
+        display: flex;
+        flex-direction: column;
+        max-width: 100%;
+        color: var(--bs-offcanvas-color);
+        visibility: hidden;
+        background-color: var(--bs-offcanvas-bg);
+        background-clip: padding-box;
+        outline: 0;
+        box-shadow: var(--bs-offcanvas-box-shadow);
+        transition: var(--bs-offcanvas-transition)
+    }
+}
+
+@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
+    .offcanvas-xxl {
+        transition: none
+    }
+}
+
+@media (max-width: 1399.98px) {
+    .offcanvas-xxl.offcanvas-start {
+        top: 0;
+        left: 0;
+        width: var(--bs-offcanvas-width);
+        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translate(-100%)
+    }
+
+    .offcanvas-xxl.offcanvas-end {
+        top: 0;
+        right: 0;
+        width: var(--bs-offcanvas-width);
+        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translate(100%)
+    }
+
+    .offcanvas-xxl.offcanvas-top {
+        top: 0;
+        right: 0;
+        left: 0;
+        height: var(--bs-offcanvas-height);
+        max-height: 100%;
+        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translateY(-100%)
+    }
+
+    .offcanvas-xxl.offcanvas-bottom {
+        right: 0;
+        left: 0;
+        height: var(--bs-offcanvas-height);
+        max-height: 100%;
+        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+        transform: translateY(100%)
+    }
+
+    .offcanvas-xxl.showing,
+    .offcanvas-xxl.show:not(.hiding) {
+        transform: none
+    }
+
+    .offcanvas-xxl.showing,
+    .offcanvas-xxl.hiding,
+    .offcanvas-xxl.show {
+        visibility: visible
+    }
+}
+
+@media (min-width: 1400px) {
+    .offcanvas-xxl {
+        --bs-offcanvas-height: auto;
+        --bs-offcanvas-border-width: 0;
+        background-color: transparent !important
+    }
+
+    .offcanvas-xxl .offcanvas-header {
+        display: none
+    }
+
+    .offcanvas-xxl .offcanvas-body {
+        display: flex;
+        flex-grow: 0;
+        padding: 0;
+        overflow-y: visible;
+        background-color: transparent !important
+    }
+}
+
+.offcanvas {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    box-shadow: var(--bs-offcanvas-box-shadow);
+    transition: var(--bs-offcanvas-transition)
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .offcanvas {
+        transition: none
+    }
+}
+
+.offcanvas.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translate(-100%)
+}
+
+.offcanvas.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translate(100%)
+}
+
+.offcanvas.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(-100%)
+}
+
+.offcanvas.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+    transform: translateY(100%)
+}
+
+.offcanvas.showing,
+.offcanvas.show:not(.hiding) {
+    transform: none
+}
+
+.offcanvas.showing,
+.offcanvas.hiding,
+.offcanvas.show {
+    visibility: visible
+}
+
+.offcanvas-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1040;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000
+}
+
+.offcanvas-backdrop.fade {
+    opacity: 0
+}
+
+.offcanvas-backdrop.show {
+    opacity: .5
+}
+
+.offcanvas-header {
+    display: flex;
+    align-items: center;
+    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)
+}
+
+.offcanvas-header .btn-close {
+    padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
+    margin: calc(-.5 * var(--bs-offcanvas-padding-y)) calc(-.5 * var(--bs-offcanvas-padding-x)) calc(-.5 * var(--bs-offcanvas-padding-y)) auto
+}
+
+.offcanvas-title {
+    margin-bottom: 0;
+    line-height: var(--bs-offcanvas-title-line-height)
+}
+
+.offcanvas-body {
+    flex-grow: 1;
+    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+    overflow-y: auto
+}
+
+.align-baseline {
+    vertical-align: baseline !important
+}
+
+.align-top {
+    vertical-align: top !important
+}
+
+.align-middle {
+    vertical-align: middle !important
+}
+
+.align-bottom {
+    vertical-align: bottom !important
+}
+
+.align-text-bottom {
+    vertical-align: text-bottom !important
+}
+
+.align-text-top {
+    vertical-align: text-top !important
+}
+
+.float-start {
+    float: left !important
+}
+
+.float-end {
+    float: right !important
+}
+
+.float-none {
+    float: none !important
+}
+
+.object-fit-contain {
+    object-fit: contain !important
+}
+
+.object-fit-cover {
+    object-fit: cover !important
+}
+
+.object-fit-fill {
+    object-fit: fill !important
+}
+
+.object-fit-scale {
+    object-fit: scale-down !important
+}
+
+.object-fit-none {
+    object-fit: none !important
+}
+
+.opacity-0 {
+    opacity: 0 !important
+}
+
+.opacity-25 {
+    opacity: .25 !important
+}
+
+.opacity-50 {
+    opacity: .5 !important
+}
+
+.opacity-75 {
+    opacity: .75 !important
+}
+
+.opacity-100 {
+    opacity: 1 !important
+}
+
+.overflow-auto {
+    overflow: auto !important
+}
+
+.overflow-hidden {
+    overflow: hidden !important
+}
+
+.overflow-visible {
+    overflow: visible !important
+}
+
+.overflow-scroll {
+    overflow: scroll !important
+}
+
+.overflow-x-auto {
+    overflow-x: auto !important
+}
+
+.overflow-x-hidden {
+    overflow-x: hidden !important
+}
+
+.overflow-x-visible {
+    overflow-x: visible !important
+}
+
+.overflow-x-scroll {
+    overflow-x: scroll !important
+}
+
+.overflow-y-auto {
+    overflow-y: auto !important
+}
+
+.overflow-y-hidden {
+    overflow-y: hidden !important
+}
+
+.overflow-y-visible {
+    overflow-y: visible !important
+}
+
+.overflow-y-scroll {
+    overflow-y: scroll !important
+}
+
+.d-inline {
+    display: inline !important
+}
+
+.d-inline-block {
+    display: inline-block !important
+}
+
+.d-block {
+    display: block !important
+}
+
+.d-grid {
+    display: grid !important
+}
+
+.d-inline-grid {
+    display: inline-grid !important
+}
+
+.d-table {
+    display: table !important
+}
+
+.d-table-row {
+    display: table-row !important
+}
+
+.d-table-cell {
+    display: table-cell !important
+}
+
+.d-flex {
+    display: flex !important
+}
+
+.d-inline-flex {
+    display: inline-flex !important
+}
+
+.d-none {
+    display: none !important
+}
+
+.shadow {
+    box-shadow: var(--bs-box-shadow) !important
+}
+
+.shadow-sm {
+    box-shadow: var(--bs-box-shadow-sm) !important
+}
+
+.shadow-lg {
+    box-shadow: var(--bs-box-shadow-lg) !important
+}
+
+.shadow-none {
+    box-shadow: none !important
+}
+
+.focus-ring-primary {
+    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity))
+}
+
+.focus-ring-secondary {
+    --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity))
+}
+
+.focus-ring-success {
+    --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity))
+}
+
+.focus-ring-info {
+    --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity))
+}
+
+.focus-ring-warning {
+    --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity))
+}
+
+.focus-ring-danger {
+    --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity))
+}
+
+.focus-ring-light {
+    --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity))
+}
+
+.focus-ring-dark {
+    --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity))
+}
+
+.position-static {
+    position: static !important
+}
+
+.position-relative {
+    position: relative !important
+}
+
+.position-absolute {
+    position: absolute !important
+}
+
+.position-fixed {
+    position: fixed !important
+}
+
+.position-sticky {
+    position: sticky !important
+}
+
+.top-0 {
+    top: 0 !important
+}
+
+.top-50 {
+    top: 50% !important
+}
+
+.top-100 {
+    top: 100% !important
+}
+
+.bottom-0 {
+    bottom: 0 !important
+}
+
+.bottom-50 {
+    bottom: 50% !important
+}
+
+.bottom-100 {
+    bottom: 100% !important
+}
+
+.start-0 {
+    left: 0 !important
+}
+
+.start-50 {
+    left: 50% !important
+}
+
+.start-100 {
+    left: 100% !important
+}
+
+.end-0 {
+    right: 0 !important
+}
+
+.end-50 {
+    right: 50% !important
+}
+
+.end-100 {
+    right: 100% !important
+}
+
+.translate-middle {
+    transform: translate(-50%, -50%) !important
+}
+
+.translate-middle-x {
+    transform: translate(-50%) !important
+}
+
+.translate-middle-y {
+    transform: translateY(-50%) !important
+}
+
+.border {
+    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
+}
+
+.border-0 {
+    border: 0 !important
+}
+
+.border-top {
+    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
+}
+
+.border-top-0 {
+    border-top: 0 !important
+}
+
+.border-end {
+    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
+}
+
+.border-end-0 {
+    border-right: 0 !important
+}
+
+.border-bottom {
+    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
+}
+
+.border-bottom-0 {
+    border-bottom: 0 !important
+}
+
+.border-start {
+    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
+}
+
+.border-start-0 {
+    border-left: 0 !important
+}
+
+.border-primary {
+    --bs-border-opacity: 1;
+    border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important
+}
+
+.border-secondary {
+    --bs-border-opacity: 1;
+    border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important
+}
+
+.border-success {
+    --bs-border-opacity: 1;
+    border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important
+}
+
+.border-info {
+    --bs-border-opacity: 1;
+    border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important
+}
+
+.border-warning {
+    --bs-border-opacity: 1;
+    border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important
+}
+
+.border-danger {
+    --bs-border-opacity: 1;
+    border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important
+}
+
+.border-light {
+    --bs-border-opacity: 1;
+    border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important
+}
+
+.border-dark {
+    --bs-border-opacity: 1;
+    border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important
+}
+
+.border-black {
+    --bs-border-opacity: 1;
+    border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important
+}
+
+.border-white {
+    --bs-border-opacity: 1;
+    border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important
+}
+
+.border-primary-subtle {
+    border-color: var(--bs-primary-border-subtle) !important
+}
+
+.border-secondary-subtle {
+    border-color: var(--bs-secondary-border-subtle) !important
+}
+
+.border-success-subtle {
+    border-color: var(--bs-success-border-subtle) !important
+}
+
+.border-info-subtle {
+    border-color: var(--bs-info-border-subtle) !important
+}
+
+.border-warning-subtle {
+    border-color: var(--bs-warning-border-subtle) !important
+}
+
+.border-danger-subtle {
+    border-color: var(--bs-danger-border-subtle) !important
+}
+
+.border-light-subtle {
+    border-color: var(--bs-light-border-subtle) !important
+}
+
+.border-dark-subtle {
+    border-color: var(--bs-dark-border-subtle) !important
+}
+
+.border-1 {
+    border-width: 1px !important
+}
+
+.border-2 {
+    border-width: 2px !important
+}
+
+.border-3 {
+    border-width: 3px !important
+}
+
+.border-4 {
+    border-width: 4px !important
+}
+
+.border-5 {
+    border-width: 5px !important
+}
+
+.border-opacity-10 {
+    --bs-border-opacity: .1
+}
+
+.border-opacity-25 {
+    --bs-border-opacity: .25
+}
+
+.border-opacity-50 {
+    --bs-border-opacity: .5
+}
+
+.border-opacity-75 {
+    --bs-border-opacity: .75
+}
+
+.border-opacity-100 {
+    --bs-border-opacity: 1
+}
+
+.w-25 {
+    width: 25% !important
+}
+
+.w-50 {
+    width: 50% !important
+}
+
+.w-75 {
+    width: 75% !important
+}
+
+.w-100 {
+    width: 100% !important
+}
+
+.w-auto {
+    width: auto !important
+}
+
+.mw-100 {
+    max-width: 100% !important
+}
+
+.vw-100 {
+    width: 100vw !important
+}
+
+.min-vw-100 {
+    min-width: 100vw !important
+}
+
+.h-25 {
+    height: 25% !important
+}
+
+.h-50 {
+    height: 50% !important
+}
+
+.h-75 {
+    height: 75% !important
+}
+
+.h-100 {
+    height: 100% !important
+}
+
+.h-auto {
+    height: auto !important
+}
+
+.mh-100 {
+    max-height: 100% !important
+}
+
+.vh-100 {
+    height: 100vh !important
+}
+
+.min-vh-100 {
+    min-height: 100vh !important
+}
+
+.flex-fill {
+    flex: 1 1 auto !important
+}
+
+.flex-row {
+    flex-direction: row !important
+}
+
+.flex-column {
+    flex-direction: column !important
+}
+
+.flex-row-reverse {
+    flex-direction: row-reverse !important
+}
+
+.flex-column-reverse {
+    flex-direction: column-reverse !important
+}
+
+.flex-grow-0 {
+    flex-grow: 0 !important
+}
+
+.flex-grow-1 {
+    flex-grow: 1 !important
+}
+
+.flex-shrink-0 {
+    flex-shrink: 0 !important
+}
+
+.flex-shrink-1 {
+    flex-shrink: 1 !important
+}
+
+.flex-wrap {
+    flex-wrap: wrap !important
+}
+
+.flex-nowrap {
+    flex-wrap: nowrap !important
+}
+
+.flex-wrap-reverse {
+    flex-wrap: wrap-reverse !important
+}
+
+.justify-content-start {
+    justify-content: flex-start !important
+}
+
+.justify-content-end {
+    justify-content: flex-end !important
+}
+
+.justify-content-center {
+    justify-content: center !important
+}
+
+.justify-content-between {
+    justify-content: space-between !important
+}
+
+.justify-content-around {
+    justify-content: space-around !important
+}
+
+.justify-content-evenly {
+    justify-content: space-evenly !important
+}
+
+.align-items-start {
+    align-items: flex-start !important
+}
+
+.align-items-end {
+    align-items: flex-end !important
+}
+
+.align-items-center {
+    align-items: center !important
+}
+
+.align-items-baseline {
+    align-items: baseline !important
+}
+
+.align-items-stretch {
+    align-items: stretch !important
+}
+
+.align-content-start {
+    align-content: flex-start !important
+}
+
+.align-content-end {
+    align-content: flex-end !important
+}
+
+.align-content-center {
+    align-content: center !important
+}
+
+.align-content-between {
+    align-content: space-between !important
+}
+
+.align-content-around {
+    align-content: space-around !important
+}
+
+.align-content-stretch {
+    align-content: stretch !important
+}
+
+.align-self-auto {
+    align-self: auto !important
+}
+
+.align-self-start {
+    align-self: flex-start !important
+}
+
+.align-self-end {
+    align-self: flex-end !important
+}
+
+.align-self-center {
+    align-self: center !important
+}
+
+.align-self-baseline {
+    align-self: baseline !important
+}
+
+.align-self-stretch {
+    align-self: stretch !important
+}
+
+.order-first {
+    order: -1 !important
+}
+
+.order-0 {
+    order: 0 !important
+}
+
+.order-1 {
+    order: 1 !important
+}
+
+.order-2 {
+    order: 2 !important
+}
+
+.order-3 {
+    order: 3 !important
+}
+
+.order-4 {
+    order: 4 !important
+}
+
+.order-5 {
+    order: 5 !important
+}
+
+.order-last {
+    order: 6 !important
+}
+
+.m-0 {
+    margin: 0 !important
+}
+
+.m-1 {
+    margin: .25rem !important
+}
+
+.m-2 {
+    margin: .5rem !important
+}
+
+.m-3 {
+    margin: 1rem !important
+}
+
+.m-4 {
+    margin: 1.5rem !important
+}
+
+.m-5 {
+    margin: 3rem !important
+}
+
+.m-auto {
+    margin: auto !important
+}
+
+.mx-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important
+}
+
+.mx-1 {
+    margin-right: .25rem !important;
+    margin-left: .25rem !important
+}
+
+.mx-2 {
+    margin-right: .5rem !important;
+    margin-left: .5rem !important
+}
+
+.mx-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important
+}
+
+.mx-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important
+}
+
+.mx-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important
+}
+
+.mx-auto {
+    margin-right: auto !important;
+    margin-left: auto !important
+}
+
+.my-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important
+}
+
+.my-1 {
+    margin-top: .25rem !important;
+    margin-bottom: .25rem !important
+}
+
+.my-2 {
+    margin-top: .5rem !important;
+    margin-bottom: .5rem !important
+}
+
+.my-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important
+}
+
+.my-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important
+}
+
+.my-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important
+}
+
+.my-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important
+}
+
+.mt-0 {
+    margin-top: 0 !important
+}
+
+.mt-1 {
+    margin-top: .25rem !important
+}
+
+.mt-2 {
+    margin-top: .5rem !important
+}
+
+.mt-3 {
+    margin-top: 1rem !important
+}
+
+.mt-4 {
+    margin-top: 1.5rem !important
+}
+
+.mt-5 {
+    margin-top: 3rem !important
+}
+
+.mt-auto {
+    margin-top: auto !important
+}
+
+.me-0 {
+    margin-right: 0 !important
+}
+
+.me-1 {
+    margin-right: .25rem !important
+}
+
+.me-2 {
+    margin-right: .5rem !important
+}
+
+.me-3 {
+    margin-right: 1rem !important
+}
+
+.me-4 {
+    margin-right: 1.5rem !important
+}
+
+.me-5 {
+    margin-right: 3rem !important
+}
+
+.me-auto {
+    margin-right: auto !important
+}
+
+.mb-0 {
+    margin-bottom: 0 !important
+}
+
+.mb-1 {
+    margin-bottom: .25rem !important
+}
+
+.mb-2 {
+    margin-bottom: .5rem !important
+}
+
+.mb-3 {
+    margin-bottom: 1rem !important
+}
+
+.mb-4 {
+    margin-bottom: 1.5rem !important
+}
+
+.mb-5 {
+    margin-bottom: 3rem !important
+}
+
+.mb-auto {
+    margin-bottom: auto !important
+}
+
+.ms-0 {
+    margin-left: 0 !important
+}
+
+.ms-1 {
+    margin-left: .25rem !important
+}
+
+.ms-2 {
+    margin-left: .5rem !important
+}
+
+.ms-3 {
+    margin-left: 1rem !important
+}
+
+.ms-4 {
+    margin-left: 1.5rem !important
+}
+
+.ms-5 {
+    margin-left: 3rem !important
+}
+
+.ms-auto {
+    margin-left: auto !important
+}
+
+.p-0 {
+    padding: 0 !important
+}
+
+.p-1 {
+    padding: .25rem !important
+}
+
+.p-2 {
+    padding: .5rem !important
+}
+
+.p-3 {
+    padding: 1rem !important
+}
+
+.p-4 {
+    padding: 1.5rem !important
+}
+
+.p-5 {
+    padding: 3rem !important
+}
+
+.px-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important
+}
+
+.px-1 {
+    padding-right: .25rem !important;
+    padding-left: .25rem !important
+}
+
+.px-2 {
+    padding-right: .5rem !important;
+    padding-left: .5rem !important
+}
+
+.px-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important
+}
+
+.px-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important
+}
+
+.px-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important
+}
+
+.py-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important
+}
+
+.py-1 {
+    padding-top: .25rem !important;
+    padding-bottom: .25rem !important
+}
+
+.py-2 {
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important
+}
+
+.py-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important
+}
+
+.py-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important
+}
+
+.py-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important
+}
+
+.pt-0 {
+    padding-top: 0 !important
+}
+
+.pt-1 {
+    padding-top: .25rem !important
+}
+
+.pt-2 {
+    padding-top: .5rem !important
+}
+
+.pt-3 {
+    padding-top: 1rem !important
+}
+
+.pt-4 {
+    padding-top: 1.5rem !important
+}
+
+.pt-5 {
+    padding-top: 3rem !important
+}
+
+.pe-0 {
+    padding-right: 0 !important
+}
+
+.pe-1 {
+    padding-right: .25rem !important
+}
+
+.pe-2 {
+    padding-right: .5rem !important
+}
+
+.pe-3 {
+    padding-right: 1rem !important
+}
+
+.pe-4 {
+    padding-right: 1.5rem !important
+}
+
+.pe-5 {
+    padding-right: 3rem !important
+}
+
+.pb-0 {
+    padding-bottom: 0 !important
+}
+
+.pb-1 {
+    padding-bottom: .25rem !important
+}
+
+.pb-2 {
+    padding-bottom: .5rem !important
+}
+
+.pb-3 {
+    padding-bottom: 1rem !important
+}
+
+.pb-4 {
+    padding-bottom: 1.5rem !important
+}
+
+.pb-5 {
+    padding-bottom: 3rem !important
+}
+
+.ps-0 {
+    padding-left: 0 !important
+}
+
+.ps-1 {
+    padding-left: .25rem !important
+}
+
+.ps-2 {
+    padding-left: .5rem !important
+}
+
+.ps-3 {
+    padding-left: 1rem !important
+}
+
+.ps-4 {
+    padding-left: 1.5rem !important
+}
+
+.ps-5 {
+    padding-left: 3rem !important
+}
+
+.gap-0 {
+    gap: 0 !important
+}
+
+.gap-1 {
+    gap: .25rem !important
+}
+
+.gap-2 {
+    gap: .5rem !important
+}
+
+.gap-3 {
+    gap: 1rem !important
+}
+
+.gap-4 {
+    gap: 1.5rem !important
+}
+
+.gap-5 {
+    gap: 3rem !important
+}
+
+.row-gap-0 {
+    row-gap: 0 !important
+}
+
+.row-gap-1 {
+    row-gap: .25rem !important
+}
+
+.row-gap-2 {
+    row-gap: .5rem !important
+}
+
+.row-gap-3 {
+    row-gap: 1rem !important
+}
+
+.row-gap-4 {
+    row-gap: 1.5rem !important
+}
+
+.row-gap-5 {
+    row-gap: 3rem !important
+}
+
+.column-gap-0 {
+    column-gap: 0 !important
+}
+
+.column-gap-1 {
+    column-gap: .25rem !important
+}
+
+.column-gap-2 {
+    column-gap: .5rem !important
+}
+
+.column-gap-3 {
+    column-gap: 1rem !important
+}
+
+.column-gap-4 {
+    column-gap: 1.5rem !important
+}
+
+.column-gap-5 {
+    column-gap: 3rem !important
+}
+
+.font-monospace {
+    font-family: var(--bs-font-monospace) !important
+}
+
+.fs-1 {
+    font-size: calc(1.375rem + 1.5vw) !important
+}
+
+.fs-2 {
+    font-size: calc(1.325rem + .9vw) !important
+}
+
+.fs-3 {
+    font-size: calc(1.3rem + .6vw) !important
+}
+
+.fs-4 {
+    font-size: calc(1.275rem + .3vw) !important
+}
+
+.fs-5 {
+    font-size: 1.25rem !important
+}
+
+.fs-6 {
+    font-size: 1rem !important
+}
+
+.fst-italic {
+    font-style: italic !important
+}
+
+.fst-normal {
+    font-style: normal !important
+}
+
+.fw-lighter {
+    font-weight: lighter !important
+}
+
+.fw-light {
+    font-weight: 300 !important
+}
+
+.fw-normal {
+    font-weight: 400 !important
+}
+
+.fw-medium {
+    font-weight: 500 !important
+}
+
+.fw-semibold {
+    font-weight: 600 !important
+}
+
+.fw-bold {
+    font-weight: 700 !important
+}
+
+.fw-bolder {
+    font-weight: bolder !important
+}
+
+.lh-1 {
+    line-height: 1 !important
+}
+
+.lh-sm {
+    line-height: 1.25 !important
+}
+
+.lh-base {
+    line-height: 1.5 !important
+}
+
+.lh-lg {
+    line-height: 2 !important
+}
+
+.text-start {
+    text-align: left !important
+}
+
+.text-end {
+    text-align: right !important
+}
+
+.text-center {
+    text-align: center !important
+}
+
+.text-decoration-none {
+    text-decoration: none !important
+}
+
+.text-decoration-underline {
+    text-decoration: underline !important
+}
+
+.text-decoration-line-through {
+    text-decoration: line-through !important
+}
+
+.text-lowercase {
+    text-transform: lowercase !important
+}
+
+.text-uppercase {
+    text-transform: uppercase !important
+}
+
+.text-capitalize {
+    text-transform: capitalize !important
+}
+
+.text-wrap {
+    white-space: normal !important
+}
+
+.text-nowrap {
+    white-space: nowrap !important
+}
+
+.text-break {
+    word-wrap: break-word !important;
+    word-break: break-word !important
+}
+
+.text-primary {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-secondary {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-success {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-info {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-warning {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-danger {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-light {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-dark {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-black {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-white {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-body {
+    --bs-text-opacity: 1;
+    color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important
+}
+
+.text-muted {
+    --bs-text-opacity: 1;
+    color: var(--bs-secondary-color) !important
+}
+
+.text-black-50 {
+    --bs-text-opacity: 1;
+    color: #00000080 !important
+}
+
+.text-white-50 {
+    --bs-text-opacity: 1;
+    color: #ffffff80 !important
+}
+
+.text-body-secondary {
+    --bs-text-opacity: 1;
+    color: var(--bs-secondary-color) !important
+}
+
+.text-body-tertiary {
+    --bs-text-opacity: 1;
+    color: var(--bs-tertiary-color) !important
+}
+
+.text-body-emphasis {
+    --bs-text-opacity: 1;
+    color: var(--bs-emphasis-color) !important
+}
+
+.text-reset {
+    --bs-text-opacity: 1;
+    color: inherit !important
+}
+
+.text-opacity-25 {
+    --bs-text-opacity: .25
+}
+
+.text-opacity-50 {
+    --bs-text-opacity: .5
+}
+
+.text-opacity-75 {
+    --bs-text-opacity: .75
+}
+
+.text-opacity-100 {
+    --bs-text-opacity: 1
+}
+
+.text-primary-emphasis {
+    color: var(--bs-primary-text-emphasis) !important
+}
+
+.text-secondary-emphasis {
+    color: var(--bs-secondary-text-emphasis) !important
+}
+
+.text-success-emphasis {
+    color: var(--bs-success-text-emphasis) !important
+}
+
+.text-info-emphasis {
+    color: var(--bs-info-text-emphasis) !important
+}
+
+.text-warning-emphasis {
+    color: var(--bs-warning-text-emphasis) !important
+}
+
+.text-danger-emphasis {
+    color: var(--bs-danger-text-emphasis) !important
+}
+
+.text-light-emphasis {
+    color: var(--bs-light-text-emphasis) !important
+}
+
+.text-dark-emphasis {
+    color: var(--bs-dark-text-emphasis) !important
+}
+
+.link-opacity-10,
+.link-opacity-10-hover:hover {
+    --bs-link-opacity: .1
+}
+
+.link-opacity-25,
+.link-opacity-25-hover:hover {
+    --bs-link-opacity: .25
+}
+
+.link-opacity-50,
+.link-opacity-50-hover:hover {
+    --bs-link-opacity: .5
+}
+
+.link-opacity-75,
+.link-opacity-75-hover:hover {
+    --bs-link-opacity: .75
+}
+
+.link-opacity-100,
+.link-opacity-100-hover:hover {
+    --bs-link-opacity: 1
+}
+
+.link-offset-1,
+.link-offset-1-hover:hover {
+    text-underline-offset: .125em !important
+}
+
+.link-offset-2,
+.link-offset-2-hover:hover {
+    text-underline-offset: .25em !important
+}
+
+.link-offset-3,
+.link-offset-3-hover:hover {
+    text-underline-offset: .375em !important
+}
+
+.link-underline-primary {
+    --bs-link-underline-opacity: 1;
+    text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important
+}
+
+.link-underline-secondary {
+    --bs-link-underline-opacity: 1;
+    text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important
+}
+
+.link-underline-success {
+    --bs-link-underline-opacity: 1;
+    text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important
+}
+
+.link-underline-info {
+    --bs-link-underline-opacity: 1;
+    text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important
+}
+
+.link-underline-warning {
+    --bs-link-underline-opacity: 1;
+    text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important
+}
+
+.link-underline-danger {
+    --bs-link-underline-opacity: 1;
+    text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important
+}
+
+.link-underline-light {
+    --bs-link-underline-opacity: 1;
+    text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important
+}
+
+.link-underline-dark {
+    --bs-link-underline-opacity: 1;
+    text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important
+}
+
+.link-underline {
+    --bs-link-underline-opacity: 1;
+    text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important
+}
+
+.link-underline-opacity-0,
+.link-underline-opacity-0-hover:hover {
+    --bs-link-underline-opacity: 0
+}
+
+.link-underline-opacity-10,
+.link-underline-opacity-10-hover:hover {
+    --bs-link-underline-opacity: .1
+}
+
+.link-underline-opacity-25,
+.link-underline-opacity-25-hover:hover {
+    --bs-link-underline-opacity: .25
+}
+
+.link-underline-opacity-50,
+.link-underline-opacity-50-hover:hover {
+    --bs-link-underline-opacity: .5
+}
+
+.link-underline-opacity-75,
+.link-underline-opacity-75-hover:hover {
+    --bs-link-underline-opacity: .75
+}
+
+.link-underline-opacity-100,
+.link-underline-opacity-100-hover:hover {
+    --bs-link-underline-opacity: 1
+}
+
+.bg-primary {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-secondary {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-success {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-info {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-warning {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-danger {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-light {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-dark {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-black {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-white {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-body {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-transparent {
+    --bs-bg-opacity: 1;
+    background-color: transparent !important
+}
+
+.bg-body-secondary {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-body-tertiary {
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important
+}
+
+.bg-opacity-10 {
+    --bs-bg-opacity: .1
+}
+
+.bg-opacity-25 {
+    --bs-bg-opacity: .25
+}
+
+.bg-opacity-50 {
+    --bs-bg-opacity: .5
+}
+
+.bg-opacity-75 {
+    --bs-bg-opacity: .75
+}
+
+.bg-opacity-100 {
+    --bs-bg-opacity: 1
+}
+
+.bg-primary-subtle {
+    background-color: var(--bs-primary-bg-subtle) !important
+}
+
+.bg-secondary-subtle {
+    background-color: var(--bs-secondary-bg-subtle) !important
+}
+
+.bg-success-subtle {
+    background-color: var(--bs-success-bg-subtle) !important
+}
+
+.bg-info-subtle {
+    background-color: var(--bs-info-bg-subtle) !important
+}
+
+.bg-warning-subtle {
+    background-color: var(--bs-warning-bg-subtle) !important
+}
+
+.bg-danger-subtle {
+    background-color: var(--bs-danger-bg-subtle) !important
+}
+
+.bg-light-subtle {
+    background-color: var(--bs-light-bg-subtle) !important
+}
+
+.bg-dark-subtle {
+    background-color: var(--bs-dark-bg-subtle) !important
+}
+
+.bg-gradient {
+    background-image: var(--bs-gradient) !important
+}
+
+.user-select-all {
+    -webkit-user-select: all !important;
+    user-select: all !important
+}
+
+.user-select-auto {
+    -webkit-user-select: auto !important;
+    user-select: auto !important
+}
+
+.user-select-none {
+    -webkit-user-select: none !important;
+    user-select: none !important
+}
+
+.pe-none {
+    pointer-events: none !important
+}
+
+.pe-auto {
+    pointer-events: auto !important
+}
+
+.rounded {
+    border-radius: var(--bs-border-radius) !important
+}
+
+.rounded-0 {
+    border-radius: 0 !important
+}
+
+.rounded-1 {
+    border-radius: var(--bs-border-radius-sm) !important
+}
+
+.rounded-2 {
+    border-radius: var(--bs-border-radius) !important
+}
+
+.rounded-3 {
+    border-radius: var(--bs-border-radius-lg) !important
+}
+
+.rounded-4 {
+    border-radius: var(--bs-border-radius-xl) !important
+}
+
+.rounded-5 {
+    border-radius: var(--bs-border-radius-xxl) !important
+}
+
+.rounded-circle {
+    border-radius: 50% !important
+}
+
+.rounded-pill {
+    border-radius: var(--bs-border-radius-pill) !important
+}
+
+.rounded-top {
+    border-top-left-radius: var(--bs-border-radius) !important;
+    border-top-right-radius: var(--bs-border-radius) !important
+}
+
+.rounded-top-0 {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important
+}
+
+.rounded-top-1 {
+    border-top-left-radius: var(--bs-border-radius-sm) !important;
+    border-top-right-radius: var(--bs-border-radius-sm) !important
+}
+
+.rounded-top-2 {
+    border-top-left-radius: var(--bs-border-radius) !important;
+    border-top-right-radius: var(--bs-border-radius) !important
+}
+
+.rounded-top-3 {
+    border-top-left-radius: var(--bs-border-radius-lg) !important;
+    border-top-right-radius: var(--bs-border-radius-lg) !important
+}
+
+.rounded-top-4 {
+    border-top-left-radius: var(--bs-border-radius-xl) !important;
+    border-top-right-radius: var(--bs-border-radius-xl) !important
+}
+
+.rounded-top-5 {
+    border-top-left-radius: var(--bs-border-radius-xxl) !important;
+    border-top-right-radius: var(--bs-border-radius-xxl) !important
+}
+
+.rounded-top-circle {
+    border-top-left-radius: 50% !important;
+    border-top-right-radius: 50% !important
+}
+
+.rounded-top-pill {
+    border-top-left-radius: var(--bs-border-radius-pill) !important;
+    border-top-right-radius: var(--bs-border-radius-pill) !important
+}
+
+.rounded-end {
+    border-top-right-radius: var(--bs-border-radius) !important;
+    border-bottom-right-radius: var(--bs-border-radius) !important
+}
+
+.rounded-end-0 {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important
+}
+
+.rounded-end-1 {
+    border-top-right-radius: var(--bs-border-radius-sm) !important;
+    border-bottom-right-radius: var(--bs-border-radius-sm) !important
+}
+
+.rounded-end-2 {
+    border-top-right-radius: var(--bs-border-radius) !important;
+    border-bottom-right-radius: var(--bs-border-radius) !important
+}
+
+.rounded-end-3 {
+    border-top-right-radius: var(--bs-border-radius-lg) !important;
+    border-bottom-right-radius: var(--bs-border-radius-lg) !important
+}
+
+.rounded-end-4 {
+    border-top-right-radius: var(--bs-border-radius-xl) !important;
+    border-bottom-right-radius: var(--bs-border-radius-xl) !important
+}
+
+.rounded-end-5 {
+    border-top-right-radius: var(--bs-border-radius-xxl) !important;
+    border-bottom-right-radius: var(--bs-border-radius-xxl) !important
+}
+
+.rounded-end-circle {
+    border-top-right-radius: 50% !important;
+    border-bottom-right-radius: 50% !important
+}
+
+.rounded-end-pill {
+    border-top-right-radius: var(--bs-border-radius-pill) !important;
+    border-bottom-right-radius: var(--bs-border-radius-pill) !important
+}
+
+.rounded-bottom {
+    border-bottom-right-radius: var(--bs-border-radius) !important;
+    border-bottom-left-radius: var(--bs-border-radius) !important
+}
+
+.rounded-bottom-0 {
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important
+}
+
+.rounded-bottom-1 {
+    border-bottom-right-radius: var(--bs-border-radius-sm) !important;
+    border-bottom-left-radius: var(--bs-border-radius-sm) !important
+}
+
+.rounded-bottom-2 {
+    border-bottom-right-radius: var(--bs-border-radius) !important;
+    border-bottom-left-radius: var(--bs-border-radius) !important
+}
+
+.rounded-bottom-3 {
+    border-bottom-right-radius: var(--bs-border-radius-lg) !important;
+    border-bottom-left-radius: var(--bs-border-radius-lg) !important
+}
+
+.rounded-bottom-4 {
+    border-bottom-right-radius: var(--bs-border-radius-xl) !important;
+    border-bottom-left-radius: var(--bs-border-radius-xl) !important
+}
+
+.rounded-bottom-5 {
+    border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
+    border-bottom-left-radius: var(--bs-border-radius-xxl) !important
+}
+
+.rounded-bottom-circle {
+    border-bottom-right-radius: 50% !important;
+    border-bottom-left-radius: 50% !important
+}
+
+.rounded-bottom-pill {
+    border-bottom-right-radius: var(--bs-border-radius-pill) !important;
+    border-bottom-left-radius: var(--bs-border-radius-pill) !important
+}
+
+.rounded-start {
+    border-bottom-left-radius: var(--bs-border-radius) !important;
+    border-top-left-radius: var(--bs-border-radius) !important
+}
+
+.rounded-start-0 {
+    border-bottom-left-radius: 0 !important;
+    border-top-left-radius: 0 !important
+}
+
+.rounded-start-1 {
+    border-bottom-left-radius: var(--bs-border-radius-sm) !important;
+    border-top-left-radius: var(--bs-border-radius-sm) !important
+}
+
+.rounded-start-2 {
+    border-bottom-left-radius: var(--bs-border-radius) !important;
+    border-top-left-radius: var(--bs-border-radius) !important
+}
+
+.rounded-start-3 {
+    border-bottom-left-radius: var(--bs-border-radius-lg) !important;
+    border-top-left-radius: var(--bs-border-radius-lg) !important
+}
+
+.rounded-start-4 {
+    border-bottom-left-radius: var(--bs-border-radius-xl) !important;
+    border-top-left-radius: var(--bs-border-radius-xl) !important
+}
+
+.rounded-start-5 {
+    border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
+    border-top-left-radius: var(--bs-border-radius-xxl) !important
+}
+
+.rounded-start-circle {
+    border-bottom-left-radius: 50% !important;
+    border-top-left-radius: 50% !important
+}
+
+.rounded-start-pill {
+    border-bottom-left-radius: var(--bs-border-radius-pill) !important;
+    border-top-left-radius: var(--bs-border-radius-pill) !important
+}
+
+.visible {
+    visibility: visible !important
+}
+
+.invisible {
+    visibility: hidden !important
+}
+
+.z-n1 {
+    z-index: -1 !important
+}
+
+.z-0 {
+    z-index: 0 !important
+}
+
+.z-1 {
+    z-index: 1 !important
+}
+
+.z-2 {
+    z-index: 2 !important
+}
+
+.z-3 {
+    z-index: 3 !important
+}
+
+@media (min-width: 576px) {
+    .float-sm-start {
+        float: left !important
+    }
+
+    .float-sm-end {
+        float: right !important
+    }
+
+    .float-sm-none {
+        float: none !important
+    }
+
+    .object-fit-sm-contain {
+        object-fit: contain !important
+    }
+
+    .object-fit-sm-cover {
+        object-fit: cover !important
+    }
+
+    .object-fit-sm-fill {
+        object-fit: fill !important
+    }
+
+    .object-fit-sm-scale {
+        object-fit: scale-down !important
+    }
+
+    .object-fit-sm-none {
+        object-fit: none !important
+    }
+
+    .d-sm-inline {
+        display: inline !important
+    }
+
+    .d-sm-inline-block {
+        display: inline-block !important
+    }
+
+    .d-sm-block {
+        display: block !important
+    }
+
+    .d-sm-grid {
+        display: grid !important
+    }
+
+    .d-sm-inline-grid {
+        display: inline-grid !important
+    }
+
+    .d-sm-table {
+        display: table !important
+    }
+
+    .d-sm-table-row {
+        display: table-row !important
+    }
+
+    .d-sm-table-cell {
+        display: table-cell !important
+    }
+
+    .d-sm-flex {
+        display: flex !important
+    }
+
+    .d-sm-inline-flex {
+        display: inline-flex !important
+    }
+
+    .d-sm-none {
+        display: none !important
+    }
+
+    .flex-sm-fill {
+        flex: 1 1 auto !important
+    }
+
+    .flex-sm-row {
+        flex-direction: row !important
+    }
+
+    .flex-sm-column {
+        flex-direction: column !important
+    }
+
+    .flex-sm-row-reverse {
+        flex-direction: row-reverse !important
+    }
+
+    .flex-sm-column-reverse {
+        flex-direction: column-reverse !important
+    }
+
+    .flex-sm-grow-0 {
+        flex-grow: 0 !important
+    }
+
+    .flex-sm-grow-1 {
+        flex-grow: 1 !important
+    }
+
+    .flex-sm-shrink-0 {
+        flex-shrink: 0 !important
+    }
+
+    .flex-sm-shrink-1 {
+        flex-shrink: 1 !important
+    }
+
+    .flex-sm-wrap {
+        flex-wrap: wrap !important
+    }
+
+    .flex-sm-nowrap {
+        flex-wrap: nowrap !important
+    }
+
+    .flex-sm-wrap-reverse {
+        flex-wrap: wrap-reverse !important
+    }
+
+    .justify-content-sm-start {
+        justify-content: flex-start !important
+    }
+
+    .justify-content-sm-end {
+        justify-content: flex-end !important
+    }
+
+    .justify-content-sm-center {
+        justify-content: center !important
+    }
+
+    .justify-content-sm-between {
+        justify-content: space-between !important
+    }
+
+    .justify-content-sm-around {
+        justify-content: space-around !important
+    }
+
+    .justify-content-sm-evenly {
+        justify-content: space-evenly !important
+    }
+
+    .align-items-sm-start {
+        align-items: flex-start !important
+    }
+
+    .align-items-sm-end {
+        align-items: flex-end !important
+    }
+
+    .align-items-sm-center {
+        align-items: center !important
+    }
+
+    .align-items-sm-baseline {
+        align-items: baseline !important
+    }
+
+    .align-items-sm-stretch {
+        align-items: stretch !important
+    }
+
+    .align-content-sm-start {
+        align-content: flex-start !important
+    }
+
+    .align-content-sm-end {
+        align-content: flex-end !important
+    }
+
+    .align-content-sm-center {
+        align-content: center !important
+    }
+
+    .align-content-sm-between {
+        align-content: space-between !important
+    }
+
+    .align-content-sm-around {
+        align-content: space-around !important
+    }
+
+    .align-content-sm-stretch {
+        align-content: stretch !important
+    }
+
+    .align-self-sm-auto {
+        align-self: auto !important
+    }
+
+    .align-self-sm-start {
+        align-self: flex-start !important
+    }
+
+    .align-self-sm-end {
+        align-self: flex-end !important
+    }
+
+    .align-self-sm-center {
+        align-self: center !important
+    }
+
+    .align-self-sm-baseline {
+        align-self: baseline !important
+    }
+
+    .align-self-sm-stretch {
+        align-self: stretch !important
+    }
+
+    .order-sm-first {
+        order: -1 !important
+    }
+
+    .order-sm-0 {
+        order: 0 !important
+    }
+
+    .order-sm-1 {
+        order: 1 !important
+    }
+
+    .order-sm-2 {
+        order: 2 !important
+    }
+
+    .order-sm-3 {
+        order: 3 !important
+    }
+
+    .order-sm-4 {
+        order: 4 !important
+    }
+
+    .order-sm-5 {
+        order: 5 !important
+    }
+
+    .order-sm-last {
+        order: 6 !important
+    }
+
+    .m-sm-0 {
+        margin: 0 !important
+    }
+
+    .m-sm-1 {
+        margin: .25rem !important
+    }
+
+    .m-sm-2 {
+        margin: .5rem !important
+    }
+
+    .m-sm-3 {
+        margin: 1rem !important
+    }
+
+    .m-sm-4 {
+        margin: 1.5rem !important
+    }
+
+    .m-sm-5 {
+        margin: 3rem !important
+    }
+
+    .m-sm-auto {
+        margin: auto !important
+    }
+
+    .mx-sm-0 {
+        margin-right: 0 !important;
+        margin-left: 0 !important
+    }
+
+    .mx-sm-1 {
+        margin-right: .25rem !important;
+        margin-left: .25rem !important
+    }
+
+    .mx-sm-2 {
+        margin-right: .5rem !important;
+        margin-left: .5rem !important
+    }
+
+    .mx-sm-3 {
+        margin-right: 1rem !important;
+        margin-left: 1rem !important
+    }
+
+    .mx-sm-4 {
+        margin-right: 1.5rem !important;
+        margin-left: 1.5rem !important
+    }
+
+    .mx-sm-5 {
+        margin-right: 3rem !important;
+        margin-left: 3rem !important
+    }
+
+    .mx-sm-auto {
+        margin-right: auto !important;
+        margin-left: auto !important
+    }
+
+    .my-sm-0 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important
+    }
+
+    .my-sm-1 {
+        margin-top: .25rem !important;
+        margin-bottom: .25rem !important
+    }
+
+    .my-sm-2 {
+        margin-top: .5rem !important;
+        margin-bottom: .5rem !important
+    }
+
+    .my-sm-3 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem !important
+    }
+
+    .my-sm-4 {
+        margin-top: 1.5rem !important;
+        margin-bottom: 1.5rem !important
+    }
+
+    .my-sm-5 {
+        margin-top: 3rem !important;
+        margin-bottom: 3rem !important
+    }
+
+    .my-sm-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important
+    }
+
+    .mt-sm-0 {
+        margin-top: 0 !important
+    }
+
+    .mt-sm-1 {
+        margin-top: .25rem !important
+    }
+
+    .mt-sm-2 {
+        margin-top: .5rem !important
+    }
+
+    .mt-sm-3 {
+        margin-top: 1rem !important
+    }
+
+    .mt-sm-4 {
+        margin-top: 1.5rem !important
+    }
+
+    .mt-sm-5 {
+        margin-top: 3rem !important
+    }
+
+    .mt-sm-auto {
+        margin-top: auto !important
+    }
+
+    .me-sm-0 {
+        margin-right: 0 !important
+    }
+
+    .me-sm-1 {
+        margin-right: .25rem !important
+    }
+
+    .me-sm-2 {
+        margin-right: .5rem !important
+    }
+
+    .me-sm-3 {
+        margin-right: 1rem !important
+    }
+
+    .me-sm-4 {
+        margin-right: 1.5rem !important
+    }
+
+    .me-sm-5 {
+        margin-right: 3rem !important
+    }
+
+    .me-sm-auto {
+        margin-right: auto !important
+    }
+
+    .mb-sm-0 {
+        margin-bottom: 0 !important
+    }
+
+    .mb-sm-1 {
+        margin-bottom: .25rem !important
+    }
+
+    .mb-sm-2 {
+        margin-bottom: .5rem !important
+    }
+
+    .mb-sm-3 {
+        margin-bottom: 1rem !important
+    }
+
+    .mb-sm-4 {
+        margin-bottom: 1.5rem !important
+    }
+
+    .mb-sm-5 {
+        margin-bottom: 3rem !important
+    }
+
+    .mb-sm-auto {
+        margin-bottom: auto !important
+    }
+
+    .ms-sm-0 {
+        margin-left: 0 !important
+    }
+
+    .ms-sm-1 {
+        margin-left: .25rem !important
+    }
+
+    .ms-sm-2 {
+        margin-left: .5rem !important
+    }
+
+    .ms-sm-3 {
+        margin-left: 1rem !important
+    }
+
+    .ms-sm-4 {
+        margin-left: 1.5rem !important
+    }
+
+    .ms-sm-5 {
+        margin-left: 3rem !important
+    }
+
+    .ms-sm-auto {
+        margin-left: auto !important
+    }
+
+    .p-sm-0 {
+        padding: 0 !important
+    }
+
+    .p-sm-1 {
+        padding: .25rem !important
+    }
+
+    .p-sm-2 {
+        padding: .5rem !important
+    }
+
+    .p-sm-3 {
+        padding: 1rem !important
+    }
+
+    .p-sm-4 {
+        padding: 1.5rem !important
+    }
+
+    .p-sm-5 {
+        padding: 3rem !important
+    }
+
+    .px-sm-0 {
+        padding-right: 0 !important;
+        padding-left: 0 !important
+    }
+
+    .px-sm-1 {
+        padding-right: .25rem !important;
+        padding-left: .25rem !important
+    }
+
+    .px-sm-2 {
+        padding-right: .5rem !important;
+        padding-left: .5rem !important
+    }
+
+    .px-sm-3 {
+        padding-right: 1rem !important;
+        padding-left: 1rem !important
+    }
+
+    .px-sm-4 {
+        padding-right: 1.5rem !important;
+        padding-left: 1.5rem !important
+    }
+
+    .px-sm-5 {
+        padding-right: 3rem !important;
+        padding-left: 3rem !important
+    }
+
+    .py-sm-0 {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important
+    }
+
+    .py-sm-1 {
+        padding-top: .25rem !important;
+        padding-bottom: .25rem !important
+    }
+
+    .py-sm-2 {
+        padding-top: .5rem !important;
+        padding-bottom: .5rem !important
+    }
+
+    .py-sm-3 {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important
+    }
+
+    .py-sm-4 {
+        padding-top: 1.5rem !important;
+        padding-bottom: 1.5rem !important
+    }
+
+    .py-sm-5 {
+        padding-top: 3rem !important;
+        padding-bottom: 3rem !important
+    }
+
+    .pt-sm-0 {
+        padding-top: 0 !important
+    }
+
+    .pt-sm-1 {
+        padding-top: .25rem !important
+    }
+
+    .pt-sm-2 {
+        padding-top: .5rem !important
+    }
+
+    .pt-sm-3 {
+        padding-top: 1rem !important
+    }
+
+    .pt-sm-4 {
+        padding-top: 1.5rem !important
+    }
+
+    .pt-sm-5 {
+        padding-top: 3rem !important
+    }
+
+    .pe-sm-0 {
+        padding-right: 0 !important
+    }
+
+    .pe-sm-1 {
+        padding-right: .25rem !important
+    }
+
+    .pe-sm-2 {
+        padding-right: .5rem !important
+    }
+
+    .pe-sm-3 {
+        padding-right: 1rem !important
+    }
+
+    .pe-sm-4 {
+        padding-right: 1.5rem !important
+    }
+
+    .pe-sm-5 {
+        padding-right: 3rem !important
+    }
+
+    .pb-sm-0 {
+        padding-bottom: 0 !important
+    }
+
+    .pb-sm-1 {
+        padding-bottom: .25rem !important
+    }
+
+    .pb-sm-2 {
+        padding-bottom: .5rem !important
+    }
+
+    .pb-sm-3 {
+        padding-bottom: 1rem !important
+    }
+
+    .pb-sm-4 {
+        padding-bottom: 1.5rem !important
+    }
+
+    .pb-sm-5 {
+        padding-bottom: 3rem !important
+    }
+
+    .ps-sm-0 {
+        padding-left: 0 !important
+    }
+
+    .ps-sm-1 {
+        padding-left: .25rem !important
+    }
+
+    .ps-sm-2 {
+        padding-left: .5rem !important
+    }
+
+    .ps-sm-3 {
+        padding-left: 1rem !important
+    }
+
+    .ps-sm-4 {
+        padding-left: 1.5rem !important
+    }
+
+    .ps-sm-5 {
+        padding-left: 3rem !important
+    }
+
+    .gap-sm-0 {
+        gap: 0 !important
+    }
+
+    .gap-sm-1 {
+        gap: .25rem !important
+    }
+
+    .gap-sm-2 {
+        gap: .5rem !important
+    }
+
+    .gap-sm-3 {
+        gap: 1rem !important
+    }
+
+    .gap-sm-4 {
+        gap: 1.5rem !important
+    }
+
+    .gap-sm-5 {
+        gap: 3rem !important
+    }
+
+    .row-gap-sm-0 {
+        row-gap: 0 !important
+    }
+
+    .row-gap-sm-1 {
+        row-gap: .25rem !important
+    }
+
+    .row-gap-sm-2 {
+        row-gap: .5rem !important
+    }
+
+    .row-gap-sm-3 {
+        row-gap: 1rem !important
+    }
+
+    .row-gap-sm-4 {
+        row-gap: 1.5rem !important
+    }
+
+    .row-gap-sm-5 {
+        row-gap: 3rem !important
+    }
+
+    .column-gap-sm-0 {
+        column-gap: 0 !important
+    }
+
+    .column-gap-sm-1 {
+        column-gap: .25rem !important
+    }
+
+    .column-gap-sm-2 {
+        column-gap: .5rem !important
+    }
+
+    .column-gap-sm-3 {
+        column-gap: 1rem !important
+    }
+
+    .column-gap-sm-4 {
+        column-gap: 1.5rem !important
+    }
+
+    .column-gap-sm-5 {
+        column-gap: 3rem !important
+    }
+
+    .text-sm-start {
+        text-align: left !important
+    }
+
+    .text-sm-end {
+        text-align: right !important
+    }
+
+    .text-sm-center {
+        text-align: center !important
+    }
+}
+
+@media (min-width: 768px) {
+    .float-md-start {
+        float: left !important
+    }
+
+    .float-md-end {
+        float: right !important
+    }
+
+    .float-md-none {
+        float: none !important
+    }
+
+    .object-fit-md-contain {
+        object-fit: contain !important
+    }
+
+    .object-fit-md-cover {
+        object-fit: cover !important
+    }
+
+    .object-fit-md-fill {
+        object-fit: fill !important
+    }
+
+    .object-fit-md-scale {
+        object-fit: scale-down !important
+    }
+
+    .object-fit-md-none {
+        object-fit: none !important
+    }
+
+    .d-md-inline {
+        display: inline !important
+    }
+
+    .d-md-inline-block {
+        display: inline-block !important
+    }
+
+    .d-md-block {
+        display: block !important
+    }
+
+    .d-md-grid {
+        display: grid !important
+    }
+
+    .d-md-inline-grid {
+        display: inline-grid !important
+    }
+
+    .d-md-table {
+        display: table !important
+    }
+
+    .d-md-table-row {
+        display: table-row !important
+    }
+
+    .d-md-table-cell {
+        display: table-cell !important
+    }
+
+    .d-md-flex {
+        display: flex !important
+    }
+
+    .d-md-inline-flex {
+        display: inline-flex !important
+    }
+
+    .d-md-none {
+        display: none !important
+    }
+
+    .flex-md-fill {
+        flex: 1 1 auto !important
+    }
+
+    .flex-md-row {
+        flex-direction: row !important
+    }
+
+    .flex-md-column {
+        flex-direction: column !important
+    }
+
+    .flex-md-row-reverse {
+        flex-direction: row-reverse !important
+    }
+
+    .flex-md-column-reverse {
+        flex-direction: column-reverse !important
+    }
+
+    .flex-md-grow-0 {
+        flex-grow: 0 !important
+    }
+
+    .flex-md-grow-1 {
+        flex-grow: 1 !important
+    }
+
+    .flex-md-shrink-0 {
+        flex-shrink: 0 !important
+    }
+
+    .flex-md-shrink-1 {
+        flex-shrink: 1 !important
+    }
+
+    .flex-md-wrap {
+        flex-wrap: wrap !important
+    }
+
+    .flex-md-nowrap {
+        flex-wrap: nowrap !important
+    }
+
+    .flex-md-wrap-reverse {
+        flex-wrap: wrap-reverse !important
+    }
+
+    .justify-content-md-start {
+        justify-content: flex-start !important
+    }
+
+    .justify-content-md-end {
+        justify-content: flex-end !important
+    }
+
+    .justify-content-md-center {
+        justify-content: center !important
+    }
+
+    .justify-content-md-between {
+        justify-content: space-between !important
+    }
+
+    .justify-content-md-around {
+        justify-content: space-around !important
+    }
+
+    .justify-content-md-evenly {
+        justify-content: space-evenly !important
+    }
+
+    .align-items-md-start {
+        align-items: flex-start !important
+    }
+
+    .align-items-md-end {
+        align-items: flex-end !important
+    }
+
+    .align-items-md-center {
+        align-items: center !important
+    }
+
+    .align-items-md-baseline {
+        align-items: baseline !important
+    }
+
+    .align-items-md-stretch {
+        align-items: stretch !important
+    }
+
+    .align-content-md-start {
+        align-content: flex-start !important
+    }
+
+    .align-content-md-end {
+        align-content: flex-end !important
+    }
+
+    .align-content-md-center {
+        align-content: center !important
+    }
+
+    .align-content-md-between {
+        align-content: space-between !important
+    }
+
+    .align-content-md-around {
+        align-content: space-around !important
+    }
+
+    .align-content-md-stretch {
+        align-content: stretch !important
+    }
+
+    .align-self-md-auto {
+        align-self: auto !important
+    }
+
+    .align-self-md-start {
+        align-self: flex-start !important
+    }
+
+    .align-self-md-end {
+        align-self: flex-end !important
+    }
+
+    .align-self-md-center {
+        align-self: center !important
+    }
+
+    .align-self-md-baseline {
+        align-self: baseline !important
+    }
+
+    .align-self-md-stretch {
+        align-self: stretch !important
+    }
+
+    .order-md-first {
+        order: -1 !important
+    }
+
+    .order-md-0 {
+        order: 0 !important
+    }
+
+    .order-md-1 {
+        order: 1 !important
+    }
+
+    .order-md-2 {
+        order: 2 !important
+    }
+
+    .order-md-3 {
+        order: 3 !important
+    }
+
+    .order-md-4 {
+        order: 4 !important
+    }
+
+    .order-md-5 {
+        order: 5 !important
+    }
+
+    .order-md-last {
+        order: 6 !important
+    }
+
+    .m-md-0 {
+        margin: 0 !important
+    }
+
+    .m-md-1 {
+        margin: .25rem !important
+    }
+
+    .m-md-2 {
+        margin: .5rem !important
+    }
+
+    .m-md-3 {
+        margin: 1rem !important
+    }
+
+    .m-md-4 {
+        margin: 1.5rem !important
+    }
+
+    .m-md-5 {
+        margin: 3rem !important
+    }
+
+    .m-md-auto {
+        margin: auto !important
+    }
+
+    .mx-md-0 {
+        margin-right: 0 !important;
+        margin-left: 0 !important
+    }
+
+    .mx-md-1 {
+        margin-right: .25rem !important;
+        margin-left: .25rem !important
+    }
+
+    .mx-md-2 {
+        margin-right: .5rem !important;
+        margin-left: .5rem !important
+    }
+
+    .mx-md-3 {
+        margin-right: 1rem !important;
+        margin-left: 1rem !important
+    }
+
+    .mx-md-4 {
+        margin-right: 1.5rem !important;
+        margin-left: 1.5rem !important
+    }
+
+    .mx-md-5 {
+        margin-right: 3rem !important;
+        margin-left: 3rem !important
+    }
+
+    .mx-md-auto {
+        margin-right: auto !important;
+        margin-left: auto !important
+    }
+
+    .my-md-0 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important
+    }
+
+    .my-md-1 {
+        margin-top: .25rem !important;
+        margin-bottom: .25rem !important
+    }
+
+    .my-md-2 {
+        margin-top: .5rem !important;
+        margin-bottom: .5rem !important
+    }
+
+    .my-md-3 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem !important
+    }
+
+    .my-md-4 {
+        margin-top: 1.5rem !important;
+        margin-bottom: 1.5rem !important
+    }
+
+    .my-md-5 {
+        margin-top: 3rem !important;
+        margin-bottom: 3rem !important
+    }
+
+    .my-md-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important
+    }
+
+    .mt-md-0 {
+        margin-top: 0 !important
+    }
+
+    .mt-md-1 {
+        margin-top: .25rem !important
+    }
+
+    .mt-md-2 {
+        margin-top: .5rem !important
+    }
+
+    .mt-md-3 {
+        margin-top: 1rem !important
+    }
+
+    .mt-md-4 {
+        margin-top: 1.5rem !important
+    }
+
+    .mt-md-5 {
+        margin-top: 3rem !important
+    }
+
+    .mt-md-auto {
+        margin-top: auto !important
+    }
+
+    .me-md-0 {
+        margin-right: 0 !important
+    }
+
+    .me-md-1 {
+        margin-right: .25rem !important
+    }
+
+    .me-md-2 {
+        margin-right: .5rem !important
+    }
+
+    .me-md-3 {
+        margin-right: 1rem !important
+    }
+
+    .me-md-4 {
+        margin-right: 1.5rem !important
+    }
+
+    .me-md-5 {
+        margin-right: 3rem !important
+    }
+
+    .me-md-auto {
+        margin-right: auto !important
+    }
+
+    .mb-md-0 {
+        margin-bottom: 0 !important
+    }
+
+    .mb-md-1 {
+        margin-bottom: .25rem !important
+    }
+
+    .mb-md-2 {
+        margin-bottom: .5rem !important
+    }
+
+    .mb-md-3 {
+        margin-bottom: 1rem !important
+    }
+
+    .mb-md-4 {
+        margin-bottom: 1.5rem !important
+    }
+
+    .mb-md-5 {
+        margin-bottom: 3rem !important
+    }
+
+    .mb-md-auto {
+        margin-bottom: auto !important
+    }
+
+    .ms-md-0 {
+        margin-left: 0 !important
+    }
+
+    .ms-md-1 {
+        margin-left: .25rem !important
+    }
+
+    .ms-md-2 {
+        margin-left: .5rem !important
+    }
+
+    .ms-md-3 {
+        margin-left: 1rem !important
+    }
+
+    .ms-md-4 {
+        margin-left: 1.5rem !important
+    }
+
+    .ms-md-5 {
+        margin-left: 3rem !important
+    }
+
+    .ms-md-auto {
+        margin-left: auto !important
+    }
+
+    .p-md-0 {
+        padding: 0 !important
+    }
+
+    .p-md-1 {
+        padding: .25rem !important
+    }
+
+    .p-md-2 {
+        padding: .5rem !important
+    }
+
+    .p-md-3 {
+        padding: 1rem !important
+    }
+
+    .p-md-4 {
+        padding: 1.5rem !important
+    }
+
+    .p-md-5 {
+        padding: 3rem !important
+    }
+
+    .px-md-0 {
+        padding-right: 0 !important;
+        padding-left: 0 !important
+    }
+
+    .px-md-1 {
+        padding-right: .25rem !important;
+        padding-left: .25rem !important
+    }
+
+    .px-md-2 {
+        padding-right: .5rem !important;
+        padding-left: .5rem !important
+    }
+
+    .px-md-3 {
+        padding-right: 1rem !important;
+        padding-left: 1rem !important
+    }
+
+    .px-md-4 {
+        padding-right: 1.5rem !important;
+        padding-left: 1.5rem !important
+    }
+
+    .px-md-5 {
+        padding-right: 3rem !important;
+        padding-left: 3rem !important
+    }
+
+    .py-md-0 {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important
+    }
+
+    .py-md-1 {
+        padding-top: .25rem !important;
+        padding-bottom: .25rem !important
+    }
+
+    .py-md-2 {
+        padding-top: .5rem !important;
+        padding-bottom: .5rem !important
+    }
+
+    .py-md-3 {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important
+    }
+
+    .py-md-4 {
+        padding-top: 1.5rem !important;
+        padding-bottom: 1.5rem !important
+    }
+
+    .py-md-5 {
+        padding-top: 3rem !important;
+        padding-bottom: 3rem !important
+    }
+
+    .pt-md-0 {
+        padding-top: 0 !important
+    }
+
+    .pt-md-1 {
+        padding-top: .25rem !important
+    }
+
+    .pt-md-2 {
+        padding-top: .5rem !important
+    }
+
+    .pt-md-3 {
+        padding-top: 1rem !important
+    }
+
+    .pt-md-4 {
+        padding-top: 1.5rem !important
+    }
+
+    .pt-md-5 {
+        padding-top: 3rem !important
+    }
+
+    .pe-md-0 {
+        padding-right: 0 !important
+    }
+
+    .pe-md-1 {
+        padding-right: .25rem !important
+    }
+
+    .pe-md-2 {
+        padding-right: .5rem !important
+    }
+
+    .pe-md-3 {
+        padding-right: 1rem !important
+    }
+
+    .pe-md-4 {
+        padding-right: 1.5rem !important
+    }
+
+    .pe-md-5 {
+        padding-right: 3rem !important
+    }
+
+    .pb-md-0 {
+        padding-bottom: 0 !important
+    }
+
+    .pb-md-1 {
+        padding-bottom: .25rem !important
+    }
+
+    .pb-md-2 {
+        padding-bottom: .5rem !important
+    }
+
+    .pb-md-3 {
+        padding-bottom: 1rem !important
+    }
+
+    .pb-md-4 {
+        padding-bottom: 1.5rem !important
+    }
+
+    .pb-md-5 {
+        padding-bottom: 3rem !important
+    }
+
+    .ps-md-0 {
+        padding-left: 0 !important
+    }
+
+    .ps-md-1 {
+        padding-left: .25rem !important
+    }
+
+    .ps-md-2 {
+        padding-left: .5rem !important
+    }
+
+    .ps-md-3 {
+        padding-left: 1rem !important
+    }
+
+    .ps-md-4 {
+        padding-left: 1.5rem !important
+    }
+
+    .ps-md-5 {
+        padding-left: 3rem !important
+    }
+
+    .gap-md-0 {
+        gap: 0 !important
+    }
+
+    .gap-md-1 {
+        gap: .25rem !important
+    }
+
+    .gap-md-2 {
+        gap: .5rem !important
+    }
+
+    .gap-md-3 {
+        gap: 1rem !important
+    }
+
+    .gap-md-4 {
+        gap: 1.5rem !important
+    }
+
+    .gap-md-5 {
+        gap: 3rem !important
+    }
+
+    .row-gap-md-0 {
+        row-gap: 0 !important
+    }
+
+    .row-gap-md-1 {
+        row-gap: .25rem !important
+    }
+
+    .row-gap-md-2 {
+        row-gap: .5rem !important
+    }
+
+    .row-gap-md-3 {
+        row-gap: 1rem !important
+    }
+
+    .row-gap-md-4 {
+        row-gap: 1.5rem !important
+    }
+
+    .row-gap-md-5 {
+        row-gap: 3rem !important
+    }
+
+    .column-gap-md-0 {
+        column-gap: 0 !important
+    }
+
+    .column-gap-md-1 {
+        column-gap: .25rem !important
+    }
+
+    .column-gap-md-2 {
+        column-gap: .5rem !important
+    }
+
+    .column-gap-md-3 {
+        column-gap: 1rem !important
+    }
+
+    .column-gap-md-4 {
+        column-gap: 1.5rem !important
+    }
+
+    .column-gap-md-5 {
+        column-gap: 3rem !important
+    }
+
+    .text-md-start {
+        text-align: left !important
+    }
+
+    .text-md-end {
+        text-align: right !important
+    }
+
+    .text-md-center {
+        text-align: center !important
+    }
+}
+
+@media (min-width: 992px) {
+    .float-lg-start {
+        float: left !important
+    }
+
+    .float-lg-end {
+        float: right !important
+    }
+
+    .float-lg-none {
+        float: none !important
+    }
+
+    .object-fit-lg-contain {
+        object-fit: contain !important
+    }
+
+    .object-fit-lg-cover {
+        object-fit: cover !important
+    }
+
+    .object-fit-lg-fill {
+        object-fit: fill !important
+    }
+
+    .object-fit-lg-scale {
+        object-fit: scale-down !important
+    }
+
+    .object-fit-lg-none {
+        object-fit: none !important
+    }
+
+    .d-lg-inline {
+        display: inline !important
+    }
+
+    .d-lg-inline-block {
+        display: inline-block !important
+    }
+
+    .d-lg-block {
+        display: block !important
+    }
+
+    .d-lg-grid {
+        display: grid !important
+    }
+
+    .d-lg-inline-grid {
+        display: inline-grid !important
+    }
+
+    .d-lg-table {
+        display: table !important
+    }
+
+    .d-lg-table-row {
+        display: table-row !important
+    }
+
+    .d-lg-table-cell {
+        display: table-cell !important
+    }
+
+    .d-lg-flex {
+        display: flex !important
+    }
+
+    .d-lg-inline-flex {
+        display: inline-flex !important
+    }
+
+    .d-lg-none {
+        display: none !important
+    }
+
+    .flex-lg-fill {
+        flex: 1 1 auto !important
+    }
+
+    .flex-lg-row {
+        flex-direction: row !important
+    }
+
+    .flex-lg-column {
+        flex-direction: column !important
+    }
+
+    .flex-lg-row-reverse {
+        flex-direction: row-reverse !important
+    }
+
+    .flex-lg-column-reverse {
+        flex-direction: column-reverse !important
+    }
+
+    .flex-lg-grow-0 {
+        flex-grow: 0 !important
+    }
+
+    .flex-lg-grow-1 {
+        flex-grow: 1 !important
+    }
+
+    .flex-lg-shrink-0 {
+        flex-shrink: 0 !important
+    }
+
+    .flex-lg-shrink-1 {
+        flex-shrink: 1 !important
+    }
+
+    .flex-lg-wrap {
+        flex-wrap: wrap !important
+    }
+
+    .flex-lg-nowrap {
+        flex-wrap: nowrap !important
+    }
+
+    .flex-lg-wrap-reverse {
+        flex-wrap: wrap-reverse !important
+    }
+
+    .justify-content-lg-start {
+        justify-content: flex-start !important
+    }
+
+    .justify-content-lg-end {
+        justify-content: flex-end !important
+    }
+
+    .justify-content-lg-center {
+        justify-content: center !important
+    }
+
+    .justify-content-lg-between {
+        justify-content: space-between !important
+    }
+
+    .justify-content-lg-around {
+        justify-content: space-around !important
+    }
+
+    .justify-content-lg-evenly {
+        justify-content: space-evenly !important
+    }
+
+    .align-items-lg-start {
+        align-items: flex-start !important
+    }
+
+    .align-items-lg-end {
+        align-items: flex-end !important
+    }
+
+    .align-items-lg-center {
+        align-items: center !important
+    }
+
+    .align-items-lg-baseline {
+        align-items: baseline !important
+    }
+
+    .align-items-lg-stretch {
+        align-items: stretch !important
+    }
+
+    .align-content-lg-start {
+        align-content: flex-start !important
+    }
+
+    .align-content-lg-end {
+        align-content: flex-end !important
+    }
+
+    .align-content-lg-center {
+        align-content: center !important
+    }
+
+    .align-content-lg-between {
+        align-content: space-between !important
+    }
+
+    .align-content-lg-around {
+        align-content: space-around !important
+    }
+
+    .align-content-lg-stretch {
+        align-content: stretch !important
+    }
+
+    .align-self-lg-auto {
+        align-self: auto !important
+    }
+
+    .align-self-lg-start {
+        align-self: flex-start !important
+    }
+
+    .align-self-lg-end {
+        align-self: flex-end !important
+    }
+
+    .align-self-lg-center {
+        align-self: center !important
+    }
+
+    .align-self-lg-baseline {
+        align-self: baseline !important
+    }
+
+    .align-self-lg-stretch {
+        align-self: stretch !important
+    }
+
+    .order-lg-first {
+        order: -1 !important
+    }
+
+    .order-lg-0 {
+        order: 0 !important
+    }
+
+    .order-lg-1 {
+        order: 1 !important
+    }
+
+    .order-lg-2 {
+        order: 2 !important
+    }
+
+    .order-lg-3 {
+        order: 3 !important
+    }
+
+    .order-lg-4 {
+        order: 4 !important
+    }
+
+    .order-lg-5 {
+        order: 5 !important
+    }
+
+    .order-lg-last {
+        order: 6 !important
+    }
+
+    .m-lg-0 {
+        margin: 0 !important
+    }
+
+    .m-lg-1 {
+        margin: .25rem !important
+    }
+
+    .m-lg-2 {
+        margin: .5rem !important
+    }
+
+    .m-lg-3 {
+        margin: 1rem !important
+    }
+
+    .m-lg-4 {
+        margin: 1.5rem !important
+    }
+
+    .m-lg-5 {
+        margin: 3rem !important
+    }
+
+    .m-lg-auto {
+        margin: auto !important
+    }
+
+    .mx-lg-0 {
+        margin-right: 0 !important;
+        margin-left: 0 !important
+    }
+
+    .mx-lg-1 {
+        margin-right: .25rem !important;
+        margin-left: .25rem !important
+    }
+
+    .mx-lg-2 {
+        margin-right: .5rem !important;
+        margin-left: .5rem !important
+    }
+
+    .mx-lg-3 {
+        margin-right: 1rem !important;
+        margin-left: 1rem !important
+    }
+
+    .mx-lg-4 {
+        margin-right: 1.5rem !important;
+        margin-left: 1.5rem !important
+    }
+
+    .mx-lg-5 {
+        margin-right: 3rem !important;
+        margin-left: 3rem !important
+    }
+
+    .mx-lg-auto {
+        margin-right: auto !important;
+        margin-left: auto !important
+    }
+
+    .my-lg-0 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important
+    }
+
+    .my-lg-1 {
+        margin-top: .25rem !important;
+        margin-bottom: .25rem !important
+    }
+
+    .my-lg-2 {
+        margin-top: .5rem !important;
+        margin-bottom: .5rem !important
+    }
+
+    .my-lg-3 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem !important
+    }
+
+    .my-lg-4 {
+        margin-top: 1.5rem !important;
+        margin-bottom: 1.5rem !important
+    }
+
+    .my-lg-5 {
+        margin-top: 3rem !important;
+        margin-bottom: 3rem !important
+    }
+
+    .my-lg-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important
+    }
+
+    .mt-lg-0 {
+        margin-top: 0 !important
+    }
+
+    .mt-lg-1 {
+        margin-top: .25rem !important
+    }
+
+    .mt-lg-2 {
+        margin-top: .5rem !important
+    }
+
+    .mt-lg-3 {
+        margin-top: 1rem !important
+    }
+
+    .mt-lg-4 {
+        margin-top: 1.5rem !important
+    }
+
+    .mt-lg-5 {
+        margin-top: 3rem !important
+    }
+
+    .mt-lg-auto {
+        margin-top: auto !important
+    }
+
+    .me-lg-0 {
+        margin-right: 0 !important
+    }
+
+    .me-lg-1 {
+        margin-right: .25rem !important
+    }
+
+    .me-lg-2 {
+        margin-right: .5rem !important
+    }
+
+    .me-lg-3 {
+        margin-right: 1rem !important
+    }
+
+    .me-lg-4 {
+        margin-right: 1.5rem !important
+    }
+
+    .me-lg-5 {
+        margin-right: 3rem !important
+    }
+
+    .me-lg-auto {
+        margin-right: auto !important
+    }
+
+    .mb-lg-0 {
+        margin-bottom: 0 !important
+    }
+
+    .mb-lg-1 {
+        margin-bottom: .25rem !important
+    }
+
+    .mb-lg-2 {
+        margin-bottom: .5rem !important
+    }
+
+    .mb-lg-3 {
+        margin-bottom: 1rem !important
+    }
+
+    .mb-lg-4 {
+        margin-bottom: 1.5rem !important
+    }
+
+    .mb-lg-5 {
+        margin-bottom: 3rem !important
+    }
+
+    .mb-lg-auto {
+        margin-bottom: auto !important
+    }
+
+    .ms-lg-0 {
+        margin-left: 0 !important
+    }
+
+    .ms-lg-1 {
+        margin-left: .25rem !important
+    }
+
+    .ms-lg-2 {
+        margin-left: .5rem !important
+    }
+
+    .ms-lg-3 {
+        margin-left: 1rem !important
+    }
+
+    .ms-lg-4 {
+        margin-left: 1.5rem !important
+    }
+
+    .ms-lg-5 {
+        margin-left: 3rem !important
+    }
+
+    .ms-lg-auto {
+        margin-left: auto !important
+    }
+
+    .p-lg-0 {
+        padding: 0 !important
+    }
+
+    .p-lg-1 {
+        padding: .25rem !important
+    }
+
+    .p-lg-2 {
+        padding: .5rem !important
+    }
+
+    .p-lg-3 {
+        padding: 1rem !important
+    }
+
+    .p-lg-4 {
+        padding: 1.5rem !important
+    }
+
+    .p-lg-5 {
+        padding: 3rem !important
+    }
+
+    .px-lg-0 {
+        padding-right: 0 !important;
+        padding-left: 0 !important
+    }
+
+    .px-lg-1 {
+        padding-right: .25rem !important;
+        padding-left: .25rem !important
+    }
+
+    .px-lg-2 {
+        padding-right: .5rem !important;
+        padding-left: .5rem !important
+    }
+
+    .px-lg-3 {
+        padding-right: 1rem !important;
+        padding-left: 1rem !important
+    }
+
+    .px-lg-4 {
+        padding-right: 1.5rem !important;
+        padding-left: 1.5rem !important
+    }
+
+    .px-lg-5 {
+        padding-right: 3rem !important;
+        padding-left: 3rem !important
+    }
+
+    .py-lg-0 {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important
+    }
+
+    .py-lg-1 {
+        padding-top: .25rem !important;
+        padding-bottom: .25rem !important
+    }
+
+    .py-lg-2 {
+        padding-top: .5rem !important;
+        padding-bottom: .5rem !important
+    }
+
+    .py-lg-3 {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important
+    }
+
+    .py-lg-4 {
+        padding-top: 1.5rem !important;
+        padding-bottom: 1.5rem !important
+    }
+
+    .py-lg-5 {
+        padding-top: 3rem !important;
+        padding-bottom: 3rem !important
+    }
+
+    .pt-lg-0 {
+        padding-top: 0 !important
+    }
+
+    .pt-lg-1 {
+        padding-top: .25rem !important
+    }
+
+    .pt-lg-2 {
+        padding-top: .5rem !important
+    }
+
+    .pt-lg-3 {
+        padding-top: 1rem !important
+    }
+
+    .pt-lg-4 {
+        padding-top: 1.5rem !important
+    }
+
+    .pt-lg-5 {
+        padding-top: 3rem !important
+    }
+
+    .pe-lg-0 {
+        padding-right: 0 !important
+    }
+
+    .pe-lg-1 {
+        padding-right: .25rem !important
+    }
+
+    .pe-lg-2 {
+        padding-right: .5rem !important
+    }
+
+    .pe-lg-3 {
+        padding-right: 1rem !important
+    }
+
+    .pe-lg-4 {
+        padding-right: 1.5rem !important
+    }
+
+    .pe-lg-5 {
+        padding-right: 3rem !important
+    }
+
+    .pb-lg-0 {
+        padding-bottom: 0 !important
+    }
+
+    .pb-lg-1 {
+        padding-bottom: .25rem !important
+    }
+
+    .pb-lg-2 {
+        padding-bottom: .5rem !important
+    }
+
+    .pb-lg-3 {
+        padding-bottom: 1rem !important
+    }
+
+    .pb-lg-4 {
+        padding-bottom: 1.5rem !important
+    }
+
+    .pb-lg-5 {
+        padding-bottom: 3rem !important
+    }
+
+    .ps-lg-0 {
+        padding-left: 0 !important
+    }
+
+    .ps-lg-1 {
+        padding-left: .25rem !important
+    }
+
+    .ps-lg-2 {
+        padding-left: .5rem !important
+    }
+
+    .ps-lg-3 {
+        padding-left: 1rem !important
+    }
+
+    .ps-lg-4 {
+        padding-left: 1.5rem !important
+    }
+
+    .ps-lg-5 {
+        padding-left: 3rem !important
+    }
+
+    .gap-lg-0 {
+        gap: 0 !important
+    }
+
+    .gap-lg-1 {
+        gap: .25rem !important
+    }
+
+    .gap-lg-2 {
+        gap: .5rem !important
+    }
+
+    .gap-lg-3 {
+        gap: 1rem !important
+    }
+
+    .gap-lg-4 {
+        gap: 1.5rem !important
+    }
+
+    .gap-lg-5 {
+        gap: 3rem !important
+    }
+
+    .row-gap-lg-0 {
+        row-gap: 0 !important
+    }
+
+    .row-gap-lg-1 {
+        row-gap: .25rem !important
+    }
+
+    .row-gap-lg-2 {
+        row-gap: .5rem !important
+    }
+
+    .row-gap-lg-3 {
+        row-gap: 1rem !important
+    }
+
+    .row-gap-lg-4 {
+        row-gap: 1.5rem !important
+    }
+
+    .row-gap-lg-5 {
+        row-gap: 3rem !important
+    }
+
+    .column-gap-lg-0 {
+        column-gap: 0 !important
+    }
+
+    .column-gap-lg-1 {
+        column-gap: .25rem !important
+    }
+
+    .column-gap-lg-2 {
+        column-gap: .5rem !important
+    }
+
+    .column-gap-lg-3 {
+        column-gap: 1rem !important
+    }
+
+    .column-gap-lg-4 {
+        column-gap: 1.5rem !important
+    }
+
+    .column-gap-lg-5 {
+        column-gap: 3rem !important
+    }
+
+    .text-lg-start {
+        text-align: left !important
+    }
+
+    .text-lg-end {
+        text-align: right !important
+    }
+
+    .text-lg-center {
+        text-align: center !important
+    }
+}
+
+@media (min-width: 1200px) {
+    .float-xl-start {
+        float: left !important
+    }
+
+    .float-xl-end {
+        float: right !important
+    }
+
+    .float-xl-none {
+        float: none !important
+    }
+
+    .object-fit-xl-contain {
+        object-fit: contain !important
+    }
+
+    .object-fit-xl-cover {
+        object-fit: cover !important
+    }
+
+    .object-fit-xl-fill {
+        object-fit: fill !important
+    }
+
+    .object-fit-xl-scale {
+        object-fit: scale-down !important
+    }
+
+    .object-fit-xl-none {
+        object-fit: none !important
+    }
+
+    .d-xl-inline {
+        display: inline !important
+    }
+
+    .d-xl-inline-block {
+        display: inline-block !important
+    }
+
+    .d-xl-block {
+        display: block !important
+    }
+
+    .d-xl-grid {
+        display: grid !important
+    }
+
+    .d-xl-inline-grid {
+        display: inline-grid !important
+    }
+
+    .d-xl-table {
+        display: table !important
+    }
+
+    .d-xl-table-row {
+        display: table-row !important
+    }
+
+    .d-xl-table-cell {
+        display: table-cell !important
+    }
+
+    .d-xl-flex {
+        display: flex !important
+    }
+
+    .d-xl-inline-flex {
+        display: inline-flex !important
+    }
+
+    .d-xl-none {
+        display: none !important
+    }
+
+    .flex-xl-fill {
+        flex: 1 1 auto !important
+    }
+
+    .flex-xl-row {
+        flex-direction: row !important
+    }
+
+    .flex-xl-column {
+        flex-direction: column !important
+    }
+
+    .flex-xl-row-reverse {
+        flex-direction: row-reverse !important
+    }
+
+    .flex-xl-column-reverse {
+        flex-direction: column-reverse !important
+    }
+
+    .flex-xl-grow-0 {
+        flex-grow: 0 !important
+    }
+
+    .flex-xl-grow-1 {
+        flex-grow: 1 !important
+    }
+
+    .flex-xl-shrink-0 {
+        flex-shrink: 0 !important
+    }
+
+    .flex-xl-shrink-1 {
+        flex-shrink: 1 !important
+    }
+
+    .flex-xl-wrap {
+        flex-wrap: wrap !important
+    }
+
+    .flex-xl-nowrap {
+        flex-wrap: nowrap !important
+    }
+
+    .flex-xl-wrap-reverse {
+        flex-wrap: wrap-reverse !important
+    }
+
+    .justify-content-xl-start {
+        justify-content: flex-start !important
+    }
+
+    .justify-content-xl-end {
+        justify-content: flex-end !important
+    }
+
+    .justify-content-xl-center {
+        justify-content: center !important
+    }
+
+    .justify-content-xl-between {
+        justify-content: space-between !important
+    }
+
+    .justify-content-xl-around {
+        justify-content: space-around !important
+    }
+
+    .justify-content-xl-evenly {
+        justify-content: space-evenly !important
+    }
+
+    .align-items-xl-start {
+        align-items: flex-start !important
+    }
+
+    .align-items-xl-end {
+        align-items: flex-end !important
+    }
+
+    .align-items-xl-center {
+        align-items: center !important
+    }
+
+    .align-items-xl-baseline {
+        align-items: baseline !important
+    }
+
+    .align-items-xl-stretch {
+        align-items: stretch !important
+    }
+
+    .align-content-xl-start {
+        align-content: flex-start !important
+    }
+
+    .align-content-xl-end {
+        align-content: flex-end !important
+    }
+
+    .align-content-xl-center {
+        align-content: center !important
+    }
+
+    .align-content-xl-between {
+        align-content: space-between !important
+    }
+
+    .align-content-xl-around {
+        align-content: space-around !important
+    }
+
+    .align-content-xl-stretch {
+        align-content: stretch !important
+    }
+
+    .align-self-xl-auto {
+        align-self: auto !important
+    }
+
+    .align-self-xl-start {
+        align-self: flex-start !important
+    }
+
+    .align-self-xl-end {
+        align-self: flex-end !important
+    }
+
+    .align-self-xl-center {
+        align-self: center !important
+    }
+
+    .align-self-xl-baseline {
+        align-self: baseline !important
+    }
+
+    .align-self-xl-stretch {
+        align-self: stretch !important
+    }
+
+    .order-xl-first {
+        order: -1 !important
+    }
+
+    .order-xl-0 {
+        order: 0 !important
+    }
+
+    .order-xl-1 {
+        order: 1 !important
+    }
+
+    .order-xl-2 {
+        order: 2 !important
+    }
+
+    .order-xl-3 {
+        order: 3 !important
+    }
+
+    .order-xl-4 {
+        order: 4 !important
+    }
+
+    .order-xl-5 {
+        order: 5 !important
+    }
+
+    .order-xl-last {
+        order: 6 !important
+    }
+
+    .m-xl-0 {
+        margin: 0 !important
+    }
+
+    .m-xl-1 {
+        margin: .25rem !important
+    }
+
+    .m-xl-2 {
+        margin: .5rem !important
+    }
+
+    .m-xl-3 {
+        margin: 1rem !important
+    }
+
+    .m-xl-4 {
+        margin: 1.5rem !important
+    }
+
+    .m-xl-5 {
+        margin: 3rem !important
+    }
+
+    .m-xl-auto {
+        margin: auto !important
+    }
+
+    .mx-xl-0 {
+        margin-right: 0 !important;
+        margin-left: 0 !important
+    }
+
+    .mx-xl-1 {
+        margin-right: .25rem !important;
+        margin-left: .25rem !important
+    }
+
+    .mx-xl-2 {
+        margin-right: .5rem !important;
+        margin-left: .5rem !important
+    }
+
+    .mx-xl-3 {
+        margin-right: 1rem !important;
+        margin-left: 1rem !important
+    }
+
+    .mx-xl-4 {
+        margin-right: 1.5rem !important;
+        margin-left: 1.5rem !important
+    }
+
+    .mx-xl-5 {
+        margin-right: 3rem !important;
+        margin-left: 3rem !important
+    }
+
+    .mx-xl-auto {
+        margin-right: auto !important;
+        margin-left: auto !important
+    }
+
+    .my-xl-0 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important
+    }
+
+    .my-xl-1 {
+        margin-top: .25rem !important;
+        margin-bottom: .25rem !important
+    }
+
+    .my-xl-2 {
+        margin-top: .5rem !important;
+        margin-bottom: .5rem !important
+    }
+
+    .my-xl-3 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem !important
+    }
+
+    .my-xl-4 {
+        margin-top: 1.5rem !important;
+        margin-bottom: 1.5rem !important
+    }
+
+    .my-xl-5 {
+        margin-top: 3rem !important;
+        margin-bottom: 3rem !important
+    }
+
+    .my-xl-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important
+    }
+
+    .mt-xl-0 {
+        margin-top: 0 !important
+    }
+
+    .mt-xl-1 {
+        margin-top: .25rem !important
+    }
+
+    .mt-xl-2 {
+        margin-top: .5rem !important
+    }
+
+    .mt-xl-3 {
+        margin-top: 1rem !important
+    }
+
+    .mt-xl-4 {
+        margin-top: 1.5rem !important
+    }
+
+    .mt-xl-5 {
+        margin-top: 3rem !important
+    }
+
+    .mt-xl-auto {
+        margin-top: auto !important
+    }
+
+    .me-xl-0 {
+        margin-right: 0 !important
+    }
+
+    .me-xl-1 {
+        margin-right: .25rem !important
+    }
+
+    .me-xl-2 {
+        margin-right: .5rem !important
+    }
+
+    .me-xl-3 {
+        margin-right: 1rem !important
+    }
+
+    .me-xl-4 {
+        margin-right: 1.5rem !important
+    }
+
+    .me-xl-5 {
+        margin-right: 3rem !important
+    }
+
+    .me-xl-auto {
+        margin-right: auto !important
+    }
+
+    .mb-xl-0 {
+        margin-bottom: 0 !important
+    }
+
+    .mb-xl-1 {
+        margin-bottom: .25rem !important
+    }
+
+    .mb-xl-2 {
+        margin-bottom: .5rem !important
+    }
+
+    .mb-xl-3 {
+        margin-bottom: 1rem !important
+    }
+
+    .mb-xl-4 {
+        margin-bottom: 1.5rem !important
+    }
+
+    .mb-xl-5 {
+        margin-bottom: 3rem !important
+    }
+
+    .mb-xl-auto {
+        margin-bottom: auto !important
+    }
+
+    .ms-xl-0 {
+        margin-left: 0 !important
+    }
+
+    .ms-xl-1 {
+        margin-left: .25rem !important
+    }
+
+    .ms-xl-2 {
+        margin-left: .5rem !important
+    }
+
+    .ms-xl-3 {
+        margin-left: 1rem !important
+    }
+
+    .ms-xl-4 {
+        margin-left: 1.5rem !important
+    }
+
+    .ms-xl-5 {
+        margin-left: 3rem !important
+    }
+
+    .ms-xl-auto {
+        margin-left: auto !important
+    }
+
+    .p-xl-0 {
+        padding: 0 !important
+    }
+
+    .p-xl-1 {
+        padding: .25rem !important
+    }
+
+    .p-xl-2 {
+        padding: .5rem !important
+    }
+
+    .p-xl-3 {
+        padding: 1rem !important
+    }
+
+    .p-xl-4 {
+        padding: 1.5rem !important
+    }
+
+    .p-xl-5 {
+        padding: 3rem !important
+    }
+
+    .px-xl-0 {
+        padding-right: 0 !important;
+        padding-left: 0 !important
+    }
+
+    .px-xl-1 {
+        padding-right: .25rem !important;
+        padding-left: .25rem !important
+    }
+
+    .px-xl-2 {
+        padding-right: .5rem !important;
+        padding-left: .5rem !important
+    }
+
+    .px-xl-3 {
+        padding-right: 1rem !important;
+        padding-left: 1rem !important
+    }
+
+    .px-xl-4 {
+        padding-right: 1.5rem !important;
+        padding-left: 1.5rem !important
+    }
+
+    .px-xl-5 {
+        padding-right: 3rem !important;
+        padding-left: 3rem !important
+    }
+
+    .py-xl-0 {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important
+    }
+
+    .py-xl-1 {
+        padding-top: .25rem !important;
+        padding-bottom: .25rem !important
+    }
+
+    .py-xl-2 {
+        padding-top: .5rem !important;
+        padding-bottom: .5rem !important
+    }
+
+    .py-xl-3 {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important
+    }
+
+    .py-xl-4 {
+        padding-top: 1.5rem !important;
+        padding-bottom: 1.5rem !important
+    }
+
+    .py-xl-5 {
+        padding-top: 3rem !important;
+        padding-bottom: 3rem !important
+    }
+
+    .pt-xl-0 {
+        padding-top: 0 !important
+    }
+
+    .pt-xl-1 {
+        padding-top: .25rem !important
+    }
+
+    .pt-xl-2 {
+        padding-top: .5rem !important
+    }
+
+    .pt-xl-3 {
+        padding-top: 1rem !important
+    }
+
+    .pt-xl-4 {
+        padding-top: 1.5rem !important
+    }
+
+    .pt-xl-5 {
+        padding-top: 3rem !important
+    }
+
+    .pe-xl-0 {
+        padding-right: 0 !important
+    }
+
+    .pe-xl-1 {
+        padding-right: .25rem !important
+    }
+
+    .pe-xl-2 {
+        padding-right: .5rem !important
+    }
+
+    .pe-xl-3 {
+        padding-right: 1rem !important
+    }
+
+    .pe-xl-4 {
+        padding-right: 1.5rem !important
+    }
+
+    .pe-xl-5 {
+        padding-right: 3rem !important
+    }
+
+    .pb-xl-0 {
+        padding-bottom: 0 !important
+    }
+
+    .pb-xl-1 {
+        padding-bottom: .25rem !important
+    }
+
+    .pb-xl-2 {
+        padding-bottom: .5rem !important
+    }
+
+    .pb-xl-3 {
+        padding-bottom: 1rem !important
+    }
+
+    .pb-xl-4 {
+        padding-bottom: 1.5rem !important
+    }
+
+    .pb-xl-5 {
+        padding-bottom: 3rem !important
+    }
+
+    .ps-xl-0 {
+        padding-left: 0 !important
+    }
+
+    .ps-xl-1 {
+        padding-left: .25rem !important
+    }
+
+    .ps-xl-2 {
+        padding-left: .5rem !important
+    }
+
+    .ps-xl-3 {
+        padding-left: 1rem !important
+    }
+
+    .ps-xl-4 {
+        padding-left: 1.5rem !important
+    }
+
+    .ps-xl-5 {
+        padding-left: 3rem !important
+    }
+
+    .gap-xl-0 {
+        gap: 0 !important
+    }
+
+    .gap-xl-1 {
+        gap: .25rem !important
+    }
+
+    .gap-xl-2 {
+        gap: .5rem !important
+    }
+
+    .gap-xl-3 {
+        gap: 1rem !important
+    }
+
+    .gap-xl-4 {
+        gap: 1.5rem !important
+    }
+
+    .gap-xl-5 {
+        gap: 3rem !important
+    }
+
+    .row-gap-xl-0 {
+        row-gap: 0 !important
+    }
+
+    .row-gap-xl-1 {
+        row-gap: .25rem !important
+    }
+
+    .row-gap-xl-2 {
+        row-gap: .5rem !important
+    }
+
+    .row-gap-xl-3 {
+        row-gap: 1rem !important
+    }
+
+    .row-gap-xl-4 {
+        row-gap: 1.5rem !important
+    }
+
+    .row-gap-xl-5 {
+        row-gap: 3rem !important
+    }
+
+    .column-gap-xl-0 {
+        column-gap: 0 !important
+    }
+
+    .column-gap-xl-1 {
+        column-gap: .25rem !important
+    }
+
+    .column-gap-xl-2 {
+        column-gap: .5rem !important
+    }
+
+    .column-gap-xl-3 {
+        column-gap: 1rem !important
+    }
+
+    .column-gap-xl-4 {
+        column-gap: 1.5rem !important
+    }
+
+    .column-gap-xl-5 {
+        column-gap: 3rem !important
+    }
+
+    .text-xl-start {
+        text-align: left !important
+    }
+
+    .text-xl-end {
+        text-align: right !important
+    }
+
+    .text-xl-center {
+        text-align: center !important
+    }
+}
+
+@media (min-width: 1400px) {
+    .float-xxl-start {
+        float: left !important
+    }
+
+    .float-xxl-end {
+        float: right !important
+    }
+
+    .float-xxl-none {
+        float: none !important
+    }
+
+    .object-fit-xxl-contain {
+        object-fit: contain !important
+    }
+
+    .object-fit-xxl-cover {
+        object-fit: cover !important
+    }
+
+    .object-fit-xxl-fill {
+        object-fit: fill !important
+    }
+
+    .object-fit-xxl-scale {
+        object-fit: scale-down !important
+    }
+
+    .object-fit-xxl-none {
+        object-fit: none !important
+    }
+
+    .d-xxl-inline {
+        display: inline !important
+    }
+
+    .d-xxl-inline-block {
+        display: inline-block !important
+    }
+
+    .d-xxl-block {
+        display: block !important
+    }
+
+    .d-xxl-grid {
+        display: grid !important
+    }
+
+    .d-xxl-inline-grid {
+        display: inline-grid !important
+    }
+
+    .d-xxl-table {
+        display: table !important
+    }
+
+    .d-xxl-table-row {
+        display: table-row !important
+    }
+
+    .d-xxl-table-cell {
+        display: table-cell !important
+    }
+
+    .d-xxl-flex {
+        display: flex !important
+    }
+
+    .d-xxl-inline-flex {
+        display: inline-flex !important
+    }
+
+    .d-xxl-none {
+        display: none !important
+    }
+
+    .flex-xxl-fill {
+        flex: 1 1 auto !important
+    }
+
+    .flex-xxl-row {
+        flex-direction: row !important
+    }
+
+    .flex-xxl-column {
+        flex-direction: column !important
+    }
+
+    .flex-xxl-row-reverse {
+        flex-direction: row-reverse !important
+    }
+
+    .flex-xxl-column-reverse {
+        flex-direction: column-reverse !important
+    }
+
+    .flex-xxl-grow-0 {
+        flex-grow: 0 !important
+    }
+
+    .flex-xxl-grow-1 {
+        flex-grow: 1 !important
+    }
+
+    .flex-xxl-shrink-0 {
+        flex-shrink: 0 !important
+    }
+
+    .flex-xxl-shrink-1 {
+        flex-shrink: 1 !important
+    }
+
+    .flex-xxl-wrap {
+        flex-wrap: wrap !important
+    }
+
+    .flex-xxl-nowrap {
+        flex-wrap: nowrap !important
+    }
+
+    .flex-xxl-wrap-reverse {
+        flex-wrap: wrap-reverse !important
+    }
+
+    .justify-content-xxl-start {
+        justify-content: flex-start !important
+    }
+
+    .justify-content-xxl-end {
+        justify-content: flex-end !important
+    }
+
+    .justify-content-xxl-center {
+        justify-content: center !important
+    }
+
+    .justify-content-xxl-between {
+        justify-content: space-between !important
+    }
+
+    .justify-content-xxl-around {
+        justify-content: space-around !important
+    }
+
+    .justify-content-xxl-evenly {
+        justify-content: space-evenly !important
+    }
+
+    .align-items-xxl-start {
+        align-items: flex-start !important
+    }
+
+    .align-items-xxl-end {
+        align-items: flex-end !important
+    }
+
+    .align-items-xxl-center {
+        align-items: center !important
+    }
+
+    .align-items-xxl-baseline {
+        align-items: baseline !important
+    }
+
+    .align-items-xxl-stretch {
+        align-items: stretch !important
+    }
+
+    .align-content-xxl-start {
+        align-content: flex-start !important
+    }
+
+    .align-content-xxl-end {
+        align-content: flex-end !important
+    }
+
+    .align-content-xxl-center {
+        align-content: center !important
+    }
+
+    .align-content-xxl-between {
+        align-content: space-between !important
+    }
+
+    .align-content-xxl-around {
+        align-content: space-around !important
+    }
+
+    .align-content-xxl-stretch {
+        align-content: stretch !important
+    }
+
+    .align-self-xxl-auto {
+        align-self: auto !important
+    }
+
+    .align-self-xxl-start {
+        align-self: flex-start !important
+    }
+
+    .align-self-xxl-end {
+        align-self: flex-end !important
+    }
+
+    .align-self-xxl-center {
+        align-self: center !important
+    }
+
+    .align-self-xxl-baseline {
+        align-self: baseline !important
+    }
+
+    .align-self-xxl-stretch {
+        align-self: stretch !important
+    }
+
+    .order-xxl-first {
+        order: -1 !important
+    }
+
+    .order-xxl-0 {
+        order: 0 !important
+    }
+
+    .order-xxl-1 {
+        order: 1 !important
+    }
+
+    .order-xxl-2 {
+        order: 2 !important
+    }
+
+    .order-xxl-3 {
+        order: 3 !important
+    }
+
+    .order-xxl-4 {
+        order: 4 !important
+    }
+
+    .order-xxl-5 {
+        order: 5 !important
+    }
+
+    .order-xxl-last {
+        order: 6 !important
+    }
+
+    .m-xxl-0 {
+        margin: 0 !important
+    }
+
+    .m-xxl-1 {
+        margin: .25rem !important
+    }
+
+    .m-xxl-2 {
+        margin: .5rem !important
+    }
+
+    .m-xxl-3 {
+        margin: 1rem !important
+    }
+
+    .m-xxl-4 {
+        margin: 1.5rem !important
+    }
+
+    .m-xxl-5 {
+        margin: 3rem !important
+    }
+
+    .m-xxl-auto {
+        margin: auto !important
+    }
+
+    .mx-xxl-0 {
+        margin-right: 0 !important;
+        margin-left: 0 !important
+    }
+
+    .mx-xxl-1 {
+        margin-right: .25rem !important;
+        margin-left: .25rem !important
+    }
+
+    .mx-xxl-2 {
+        margin-right: .5rem !important;
+        margin-left: .5rem !important
+    }
+
+    .mx-xxl-3 {
+        margin-right: 1rem !important;
+        margin-left: 1rem !important
+    }
+
+    .mx-xxl-4 {
+        margin-right: 1.5rem !important;
+        margin-left: 1.5rem !important
+    }
+
+    .mx-xxl-5 {
+        margin-right: 3rem !important;
+        margin-left: 3rem !important
+    }
+
+    .mx-xxl-auto {
+        margin-right: auto !important;
+        margin-left: auto !important
+    }
+
+    .my-xxl-0 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important
+    }
+
+    .my-xxl-1 {
+        margin-top: .25rem !important;
+        margin-bottom: .25rem !important
+    }
+
+    .my-xxl-2 {
+        margin-top: .5rem !important;
+        margin-bottom: .5rem !important
+    }
+
+    .my-xxl-3 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem !important
+    }
+
+    .my-xxl-4 {
+        margin-top: 1.5rem !important;
+        margin-bottom: 1.5rem !important
+    }
+
+    .my-xxl-5 {
+        margin-top: 3rem !important;
+        margin-bottom: 3rem !important
+    }
+
+    .my-xxl-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important
+    }
+
+    .mt-xxl-0 {
+        margin-top: 0 !important
+    }
+
+    .mt-xxl-1 {
+        margin-top: .25rem !important
+    }
+
+    .mt-xxl-2 {
+        margin-top: .5rem !important
+    }
+
+    .mt-xxl-3 {
+        margin-top: 1rem !important
+    }
+
+    .mt-xxl-4 {
+        margin-top: 1.5rem !important
+    }
+
+    .mt-xxl-5 {
+        margin-top: 3rem !important
+    }
+
+    .mt-xxl-auto {
+        margin-top: auto !important
+    }
+
+    .me-xxl-0 {
+        margin-right: 0 !important
+    }
+
+    .me-xxl-1 {
+        margin-right: .25rem !important
+    }
+
+    .me-xxl-2 {
+        margin-right: .5rem !important
+    }
+
+    .me-xxl-3 {
+        margin-right: 1rem !important
+    }
+
+    .me-xxl-4 {
+        margin-right: 1.5rem !important
+    }
+
+    .me-xxl-5 {
+        margin-right: 3rem !important
+    }
+
+    .me-xxl-auto {
+        margin-right: auto !important
+    }
+
+    .mb-xxl-0 {
+        margin-bottom: 0 !important
+    }
+
+    .mb-xxl-1 {
+        margin-bottom: .25rem !important
+    }
+
+    .mb-xxl-2 {
+        margin-bottom: .5rem !important
+    }
+
+    .mb-xxl-3 {
+        margin-bottom: 1rem !important
+    }
+
+    .mb-xxl-4 {
+        margin-bottom: 1.5rem !important
+    }
+
+    .mb-xxl-5 {
+        margin-bottom: 3rem !important
+    }
+
+    .mb-xxl-auto {
+        margin-bottom: auto !important
+    }
+
+    .ms-xxl-0 {
+        margin-left: 0 !important
+    }
+
+    .ms-xxl-1 {
+        margin-left: .25rem !important
+    }
+
+    .ms-xxl-2 {
+        margin-left: .5rem !important
+    }
+
+    .ms-xxl-3 {
+        margin-left: 1rem !important
+    }
+
+    .ms-xxl-4 {
+        margin-left: 1.5rem !important
+    }
+
+    .ms-xxl-5 {
+        margin-left: 3rem !important
+    }
+
+    .ms-xxl-auto {
+        margin-left: auto !important
+    }
+
+    .p-xxl-0 {
+        padding: 0 !important
+    }
+
+    .p-xxl-1 {
+        padding: .25rem !important
+    }
+
+    .p-xxl-2 {
+        padding: .5rem !important
+    }
+
+    .p-xxl-3 {
+        padding: 1rem !important
+    }
+
+    .p-xxl-4 {
+        padding: 1.5rem !important
+    }
+
+    .p-xxl-5 {
+        padding: 3rem !important
+    }
+
+    .px-xxl-0 {
+        padding-right: 0 !important;
+        padding-left: 0 !important
+    }
+
+    .px-xxl-1 {
+        padding-right: .25rem !important;
+        padding-left: .25rem !important
+    }
+
+    .px-xxl-2 {
+        padding-right: .5rem !important;
+        padding-left: .5rem !important
+    }
+
+    .px-xxl-3 {
+        padding-right: 1rem !important;
+        padding-left: 1rem !important
+    }
+
+    .px-xxl-4 {
+        padding-right: 1.5rem !important;
+        padding-left: 1.5rem !important
+    }
+
+    .px-xxl-5 {
+        padding-right: 3rem !important;
+        padding-left: 3rem !important
+    }
+
+    .py-xxl-0 {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important
+    }
+
+    .py-xxl-1 {
+        padding-top: .25rem !important;
+        padding-bottom: .25rem !important
+    }
+
+    .py-xxl-2 {
+        padding-top: .5rem !important;
+        padding-bottom: .5rem !important
+    }
+
+    .py-xxl-3 {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important
+    }
+
+    .py-xxl-4 {
+        padding-top: 1.5rem !important;
+        padding-bottom: 1.5rem !important
+    }
+
+    .py-xxl-5 {
+        padding-top: 3rem !important;
+        padding-bottom: 3rem !important
+    }
+
+    .pt-xxl-0 {
+        padding-top: 0 !important
+    }
+
+    .pt-xxl-1 {
+        padding-top: .25rem !important
+    }
+
+    .pt-xxl-2 {
+        padding-top: .5rem !important
+    }
+
+    .pt-xxl-3 {
+        padding-top: 1rem !important
+    }
+
+    .pt-xxl-4 {
+        padding-top: 1.5rem !important
+    }
+
+    .pt-xxl-5 {
+        padding-top: 3rem !important
+    }
+
+    .pe-xxl-0 {
+        padding-right: 0 !important
+    }
+
+    .pe-xxl-1 {
+        padding-right: .25rem !important
+    }
+
+    .pe-xxl-2 {
+        padding-right: .5rem !important
+    }
+
+    .pe-xxl-3 {
+        padding-right: 1rem !important
+    }
+
+    .pe-xxl-4 {
+        padding-right: 1.5rem !important
+    }
+
+    .pe-xxl-5 {
+        padding-right: 3rem !important
+    }
+
+    .pb-xxl-0 {
+        padding-bottom: 0 !important
+    }
+
+    .pb-xxl-1 {
+        padding-bottom: .25rem !important
+    }
+
+    .pb-xxl-2 {
+        padding-bottom: .5rem !important
+    }
+
+    .pb-xxl-3 {
+        padding-bottom: 1rem !important
+    }
+
+    .pb-xxl-4 {
+        padding-bottom: 1.5rem !important
+    }
+
+    .pb-xxl-5 {
+        padding-bottom: 3rem !important
+    }
+
+    .ps-xxl-0 {
+        padding-left: 0 !important
+    }
+
+    .ps-xxl-1 {
+        padding-left: .25rem !important
+    }
+
+    .ps-xxl-2 {
+        padding-left: .5rem !important
+    }
+
+    .ps-xxl-3 {
+        padding-left: 1rem !important
+    }
+
+    .ps-xxl-4 {
+        padding-left: 1.5rem !important
+    }
+
+    .ps-xxl-5 {
+        padding-left: 3rem !important
+    }
+
+    .gap-xxl-0 {
+        gap: 0 !important
+    }
+
+    .gap-xxl-1 {
+        gap: .25rem !important
+    }
+
+    .gap-xxl-2 {
+        gap: .5rem !important
+    }
+
+    .gap-xxl-3 {
+        gap: 1rem !important
+    }
+
+    .gap-xxl-4 {
+        gap: 1.5rem !important
+    }
+
+    .gap-xxl-5 {
+        gap: 3rem !important
+    }
+
+    .row-gap-xxl-0 {
+        row-gap: 0 !important
+    }
+
+    .row-gap-xxl-1 {
+        row-gap: .25rem !important
+    }
+
+    .row-gap-xxl-2 {
+        row-gap: .5rem !important
+    }
+
+    .row-gap-xxl-3 {
+        row-gap: 1rem !important
+    }
+
+    .row-gap-xxl-4 {
+        row-gap: 1.5rem !important
+    }
+
+    .row-gap-xxl-5 {
+        row-gap: 3rem !important
+    }
+
+    .column-gap-xxl-0 {
+        column-gap: 0 !important
+    }
+
+    .column-gap-xxl-1 {
+        column-gap: .25rem !important
+    }
+
+    .column-gap-xxl-2 {
+        column-gap: .5rem !important
+    }
+
+    .column-gap-xxl-3 {
+        column-gap: 1rem !important
+    }
+
+    .column-gap-xxl-4 {
+        column-gap: 1.5rem !important
+    }
+
+    .column-gap-xxl-5 {
+        column-gap: 3rem !important
+    }
+
+    .text-xxl-start {
+        text-align: left !important
+    }
+
+    .text-xxl-end {
+        text-align: right !important
+    }
+
+    .text-xxl-center {
+        text-align: center !important
+    }
+}
+
+@media (min-width: 1200px) {
+    .fs-1 {
+        font-size: 2.5rem !important
+    }
+
+    .fs-2 {
+        font-size: 2rem !important
+    }
+
+    .fs-3 {
+        font-size: 1.75rem !important
+    }
+
+    .fs-4 {
+        font-size: 1.5rem !important
+    }
+}
+
+@media print {
+    .d-print-inline {
+        display: inline !important
+    }
+
+    .d-print-inline-block {
+        display: inline-block !important
+    }
+
+    .d-print-block {
+        display: block !important
+    }
+
+    .d-print-grid {
+        display: grid !important
+    }
+
+    .d-print-inline-grid {
+        display: inline-grid !important
+    }
+
+    .d-print-table {
+        display: table !important
+    }
+
+    .d-print-table-row {
+        display: table-row !important
+    }
+
+    .d-print-table-cell {
+        display: table-cell !important
+    }
+
+    .d-print-flex {
+        display: flex !important
+    }
+
+    .d-print-inline-flex {
+        display: inline-flex !important
+    }
+
+    .d-print-none {
+        display: none !important
+    }
+}
+
+body {
+    color: #4b5563;
+    font-family: Archivo, serif;
+    min-height: 100vh
+}
+
+[x-cloak] {
+    display: none !important
+}
+
+.container-xl {
+    max-width: 1360px
+}
+
+.content img {
+    max-width: 100%
+}
+
+h1,
+.h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+    color: #333;
+    margin: 0 0 1rem;
+    font-family: Archivo, serif;
+    font-weight: 700;
+    line-height: 1
+}
+
+h2,
+.h2 {
+    font-size: 2.125rem
+}
+
+h3,
+.h3 {
+    font-size: 1.3rem
+}
+
+body {
+    background-color: #fff
+}
+
+@media (min-width: 768px) {
+
+    h1,
+    .h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6 {
+        margin-bottom: 1.125rem;
+        font-family: Archivo, serif;
+        font-weight: 700
+    }
+}
+
+a {
+    color: #4b5563;
+    text-decoration: none
+}
+
+a:hover,
+a:focus {
+    text-decoration: underline
+}
+
+a.btn:hover,
+a.btn:focus {
+    text-decoration: none
+}
+
+@media (min-width: 992px) {
+    .w-lg-40 {
+        width: 40%
+    }
+}
+
+[type=checkbox]:checked {
+    background-image: url('data:image/svg+xml,<svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 8.01602L6.33333 12.3493L15 2.16602" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    background-size: 55%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: #9a63ec;
+    border-radius: 2.5px;
+    border: 1px solid #9A63EC
+}
+
+.checkbox-input {
+    flex: none;
+    border: 1px solid #D1D5DB;
+    border-radius: 2.5px;
+    box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    color: #9a63ec;
+    background-color: #fff;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px
+}
+
+.checkbox-label {
+    font-family: Plus Jakarta Sans, serif;
+    font-size: 14px;
+    color: #000;
+    margin-left: 9px
+}
+
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    transition-duration: .3s
+}
+
+.duration-200 {
+    transition-duration: .2s
+}
+
+.rotate-180 {
+    rotate: 180deg
+}
+
+.fs-14 {
+    font-size: 14px
+}
+
+.fs-15 {
+    font-size: 15px
+}
+
+.fs-base {
+    font-size: 1rem
+}
+
+.fs-18 {
+    font-size: 1.125rem
+}
+
+.fs-19 {
+    font-size: 19px
+}
+
+.fs-20 {
+    font-size: 1.25rem
+}
+
+.fs-22 {
+    font-size: 1.375rem
+}
+
+.fs-24 {
+    font-size: 1.5rem
+}
+
+.fs-32 {
+    font-size: 2rem
+}
+
+.fs-40 {
+    font-size: 2.5rem
+}
+
+.fs-44 {
+    font-size: 2.75rem
+}
+
+.fs-50 {
+    font-size: 3.125rem
+}
+
+.fs-64 {
+    font-size: 4rem
+}
+
+.text-primary {
+    color: #9a63ec
+}
+
+.text-black {
+    color: #000
+}
+
+.text-gray-300 {
+    color: #d1d5db
+}
+
+.text-gray-500 {
+    color: #6b7280
+}
+
+.text-purple {
+    color: #160037
+}
+
+.lh-1-7 {
+    line-height: 1.7
+}
+
+.lh-32 {
+    line-height: 32px
+}
+
+@media (min-width: 992px) {
+    .fs-lg-40 {
+        font-size: 2.5rem
+    }
+
+    .fs-lg-60 {
+        font-size: 3.75rem
+    }
+
+    .fs-lg-64 {
+        font-size: 4rem
+    }
+}
+
+.p-20 {
+    padding: 20px
+}
+
+.p-24 {
+    padding: 24px
+}
+
+.p-40 {
+    padding: 40px
+}
+
+.pt-16 {
+    padding-top: 16px
+}
+
+.pt-22 {
+    padding-top: 22px
+}
+
+.pt-24 {
+    padding-top: 24px
+}
+
+.pt-34 {
+    padding-top: 34px
+}
+
+.pt-36 {
+    padding-top: 36px
+}
+
+.pt-40 {
+    padding-top: 40px
+}
+
+.pt-60 {
+    padding-top: 60px
+}
+
+.pt-80 {
+    padding-top: 80px
+}
+
+.pt-120 {
+    padding-top: 120px
+}
+
+.pb-40 {
+    padding-bottom: 40px
+}
+
+.pb-60 {
+    padding-bottom: 60px
+}
+
+.pb-80 {
+    padding-bottom: 80px
+}
+
+.pb-120 {
+    padding-bottom: 120px
+}
+
+.ps-16 {
+    padding-left: 16px
+}
+
+.ps-20 {
+    padding-left: 20px
+}
+
+.ps-25 {
+    padding-left: 25px
+}
+
+.ps-60 {
+    padding-left: 60px !important
+}
+
+.ps-115 {
+    padding-left: 115px !important
+}
+
+.pr-10 {
+    padding-right: 10px
+}
+
+.py-36 {
+    padding-top: 36px;
+    padding-bottom: 36px
+}
+
+.py-40 {
+    padding-top: 40px;
+    padding-bottom: 40px
+}
+
+.py-100 {
+    padding-top: 100px;
+    padding-bottom: 100px
+}
+
+.px-20 {
+    padding-left: 20px;
+    padding-right: 20px
+}
+
+.mb-5px {
+    margin-bottom: 5px
+}
+
+.mb-6 {
+    margin-bottom: 6px
+}
+
+.mb-10 {
+    margin-bottom: 10px
+}
+
+.mb-12 {
+    margin-bottom: 12px
+}
+
+.mb-14 {
+    margin-bottom: 14px
+}
+
+.mb-17 {
+    margin-bottom: 17px
+}
+
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mb-24 {
+    margin-bottom: 24px
+}
+
+.mb-30 {
+    margin-bottom: 30px !important
+}
+
+.mb-32 {
+    margin-bottom: 32px
+}
+
+.mb-40 {
+    margin-bottom: 40px
+}
+
+.mb-47 {
+    margin-bottom: 47px
+}
+
+.mb-60 {
+    margin-bottom: 60px
+}
+
+.mr-12 {
+    margin-right: 12px
+}
+
+.mr-17 {
+    margin-right: 17px
+}
+
+@media (min-width: 768px) {
+    .mb-md-0px {
+        margin-bottom: 0
+    }
+}
+
+@media (min-width: 992px) {
+    .px-lg-40 {
+        padding-left: 40px
+    }
+
+    .pt-lg-34 {
+        padding-top: 34px
+    }
+
+    .pt-lg-60 {
+        padding-top: 60px
+    }
+
+    .pt-lg-80 {
+        padding-top: 90px
+    }
+
+    .pb-lg-60 {
+        padding-bottom: 60px
+    }
+
+    .pr-lg-6 {
+        padding-right: 6px
+    }
+
+    .pr-lg-32 {
+        padding-right: 32px
+    }
+
+    .pr-lg-40 {
+        padding-right: 40px
+    }
+
+    .pr-lg-50 {
+        padding-right: 50px
+    }
+
+    .ml-lg-auto {
+        margin-left: auto
+    }
+
+    .mr-lg-17 {
+        margin-right: 17px
+    }
+
+    .mr-lg-27 {
+        margin-right: 27px
+    }
+
+    .mb-lg-17 {
+        margin-bottom: 17px
+    }
+}
+
+@media (min-width: 1200px) {
+    .mb-xl-0 {
+        margin-bottom: 0
+    }
+}
+
+.space-x-20 :not(:last-child) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(20px * var(--tw-space-x-reverse));
+    margin-inline-end: calc(20px * (1 - var(--tw-space-x-reverse)))
+}
+
+:where(.space-y-12>:not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    --spacing: 12px;
+    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing) * (1 - var(--tw-space-y-reverse)))
+}
+
+:where(.space-y-20>:not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    --spacing: 20px;
+    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing) * (1 - var(--tw-space-y-reverse)))
+}
+
+.bg-gray-50 {
+    background-color: #f9fafb
+}
+
+.bg-purple-50 {
+    background-color: #f6f5ff
+}
+
+.border-all {
+    border: 1px solid #E5E7EB
+}
+
+.border-y {
+    border-top: 1px solid #D1D5DB;
+    border-bottom: 1px solid #D1D5DB
+}
+
+.border-t {
+    border-top: 1px solid #D1D5DB
+}
+
+.border-b {
+    border-bottom: 1px solid #D1D5DB
+}
+
+.rounded-7 {
+    border-radius: 7px
+}
+
+.rounded-3px {
+    border-radius: 3px
+}
+
+.rounded-16 {
+    border-radius: 16px
+}
+
+.rounded-20 {
+    border-radius: 20px
+}
+
+.rounded-30 {
+    border-radius: 30px
+}
+
+.rounded-40 {
+    border-radius: 40px
+}
+
+.flex-none {
+    flex: none
+}
+
+.flex-1 {
+    flex: 1 1 0%
+}
+
+.w-105 {
+    width: 105px
+}
+
+.h-32 {
+    height: 32px
+}
+
+.h-33 {
+    height: 33px
+}
+
+@media (min-width: 768px) {
+    .rounded-lg-30 {
+        border-radius: 30px
+    }
+
+    .w-md-auto {
+        width: auto !important
+    }
+
+    .mr-md-17 {
+        margin-right: 17px
+    }
+}
+
+@media (min-width: 992px) {
+    .w-lg-auto {
+        width: auto !important
+    }
+
+    .w-lg-20 {
+        width: 20%
+    }
+
+    .w-lg-30 {
+        width: 30%
+    }
+
+    .w-lg-34 {
+        width: 34%
+    }
+
+    .w-lg-37 {
+        width: 37%
+    }
+
+    .w-lg-70 {
+        width: 70%
+    }
+
+    .w-lg-72 {
+        width: 72%
+    }
+
+    .w-lg-75 {
+        width: 75%
+    }
+
+    .w-lg-85 {
+        width: 85%
+    }
+
+    .w-lg-90 {
+        width: 90%
+    }
+}
+
+.btn,
+.btn.btn-outline-light,
+.btn.btn-outline-light:focus-visible,
+.btn.btn-outline-light:active,
+.btn.btn-outline-light:focus {
+    border-radius: 10px;
+    box-shadow: none;
+    background-image: none
+}
+
+.btn-primary {
+    color: #fff
+}
+
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary:first-child:active,
+.btn-primary:focus-visible {
+    color: #fff
+}
+
+.btn-secondary {
+    color: #6b7280
+}
+
+.btn-sm {
+    font-size: .875rem;
+    padding: 4px 10px;
+    border-radius: 40px
+}
+
+.btn-md {
+    font-size: 1.25rem;
+    font-weight: 600;
+    padding: 8px 34px
+}
+
+.btn-lg {
+    font-size: 1.25rem;
+    font-weight: 600;
+    padding: 11px 34px
+}
+
+.btn-tertiary {
+    color: #9a63ec;
+    background-color: #edebfe;
+    padding: 4px 13px
+}
+
+.btn-tertiary:hover {
+    color: #9a63ec;
+    background-color: #edebfe
+}
+
+.dropdown-button {
+    border: none;
+    outline: none;
+    background-color: transparent;
+    padding-left: 20px
+}
+
+.btn-outline {
+    color: #333;
+    border: 1px solid #333333
+}
+
+.btn-outline:hover {
+    color: #333;
+    border: 1px solid #333333;
+    background-color: #e9ecef
+}
+
+.btn-outline-primary {
+    border: 1px solid #9A63EC
+}
+
+.form-control {
+    padding: 11px 20px;
+    border: 1px solid #E5E7EB;
+    border-radius: 10px;
+    box-shadow: none
+}
+
+.form-control:focus {
+    box-shadow: none
+}
+
+.form-control::placeholder {
+    color: #9ca3af;
+    font-weight: 300;
+    opacity: 1
+}
+
+.form-control__dropdown {
+    padding: 11px 20px 11px 60px
+}
+
+.line-spacer {
+    color: #9ca3af;
+    font-weight: 300;
+    border-right: 1px solid #9CA3AF;
+    line-height: 15px;
+    padding-right: 10px
+}
+
+.dropdown-menu {
+    max-height: 400px;
+    overflow-y: auto
+}
+
+.page-header__image-wrapper {
+    position: relative;
+    padding-bottom: 106.4516129032%
+}
+
+.image-slider__wrapper {
+    width: 100%;
+    position: relative;
+    padding-bottom: 75%
+}
+
+.image-slider,
+.page-header__image {
+    object-fit: cover;
+    object-position: center;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 20px
+}
+
+@media (min-width: 992px) {
+    .page-header__image-wrapper {
+        padding-bottom: 136%
+    }
+}
+
+.swiper {
+    width: 100%;
+    height: 100%
+}
+
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+
+.swiper-button-prev:after,
+.swiper-button-next:after {
+    content: ""
+}
+
+.content-swiper {
+    padding-left: 40px;
+    padding-right: 40px
+}
+
+.swiper-button-prev,
+.swiper-button-next {
+    width: 16px
+}
+
+.swiper-button-prev {
+    left: 0
+}
+
+.swiper-button-next {
+    right: 0
+}
+
+.content-swiper:before,
+.content-swiper:after {
+    position: absolute;
+    content: "";
+    background-color: #fff;
+    top: 0;
+    width: 24px;
+    height: 100%;
+    z-index: 5
+}
+
+.content-swiper:before {
+    left: -1px
+}
+
+.content-swiper:after {
+    right: -1px
+}
+
+@media (min-width: 992px) {
+    .content-swiper {
+        padding-left: 30px;
+        padding-right: 30px
+    }
+
+    .content-swiper:before,
+    .content-swiper:after {
+        width: 24px
+    }
+}
+
+.site-header {
+    height: 71px;
+    background-color: #160037
+}
+
+.header-nav {
+    width: 100%;
+    left: 0;
+    top: 0;
+    background-color: #160037;
+    transition: all .5s ease .3s;
+    z-index: 50
+}
+
+.header-nav--top {
+    position: absolute;
+    padding-top: 14px;
+    padding-bottom: 14px
+}
+
+.header-nav--fixed {
+    position: fixed;
+    animation: fadeInDown .5s ease;
+    box-shadow: 0 4px 6px #0000001a;
+    padding: .25rem 0
+}
+
+.navbar__logo {
+    color: #000;
+    font-size: 2.125rem;
+    font-weight: 700;
+    font-family: var(--font-body);
+    line-height: normal;
+    outline: none
+}
+
+.navbar {
+    width: 100%;
+    height: 100%;
+    background-color: #160037;
+    position: relative
+}
+
+.nav__menu {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    transition: all .3s ease;
+    z-index: 20
+}
+
+.nav__menu-active {
+    visibility: visible;
+    opacity: 1
+}
+
+.nav__menu-hidden {
+    visibility: hidden;
+    opacity: 0
+}
+
+.navbar__menu {
+    list-style: none;
+    padding-left: 0;
+    padding-top: 70px;
+    margin-bottom: 0
+}
+
+.menu__item {
+    position: relative;
+    font-size: 14px;
+    color: #fff;
+    font-weight: 400;
+    text-align: center;
+    margin-bottom: 25px;
+    z-index: 30
+}
+
+.menu__item:hover .menu__item-link {
+    text-decoration: none
+}
+
+.menu__item-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: currentColor;
+    cursor: pointer;
+    outline: none
+}
+
+@media (min-width: 992px) {
+    .navbar {
+        height: auto;
+        background-color: transparent
+    }
+
+    .nav__menu {
+        position: static;
+        height: auto
+    }
+
+    .navbar__menu {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 27px;
+        padding-top: 0;
+        margin-bottom: 0
+    }
+
+    .nav__menu-hidden {
+        visibility: visible;
+        opacity: 1
+    }
+
+    .menu__item {
+        text-align: left;
+        margin-bottom: 0
+    }
+
+    .menu__item-link {
+        justify-content: flex-start
+    }
+}
+
+.nav__toggle {
+    grid-column: span 1;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end
+}
+
+.nav__button {
+    color: #fff;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    transition: all .3s ease;
+    z-index: 30;
+    background-color: transparent
+}
+
+.nav__button-svg {
+    fill: currentColor;
+    transition: transform .3s ease-in-out
+}
+
+.button-svg__line {
+    stroke: currentColor;
+    stroke-width: 2;
+    transition: transform .5s ease-in-out
+}
+
+.svg-line-top {
+    transform: translate(6px) rotate(45deg)
+}
+
+.svg-line-center {
+    opacity: 0
+}
+
+.svg-line-bottom {
+    transform: translate(-11px, 7px) rotate(-45deg)
+}
+
+@keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        transform: translateY(-20px)
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@media (min-width: 992px) {
+    .nav__toggle {
+        display: none
+    }
+}
+
+.menu-cta {
+    display: flex;
+    justify-content: center;
+    padding-left: 0;
+    list-style-type: none
+}
+
+.section-hero-mask {
+    position: absolute;
+    background: linear-gradient(270deg, #1600374d, #160037 67.19%), linear-gradient(0deg, #160037, #160037), url(/static/img/hero-bg.jpg);
+    background-blend-mode: normal, color, normal;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: auto 112%;
+    top: -7%;
+    left: 6%;
+    width: 100%;
+    height: 100%
+}
+
+@media (min-width: 992px) {
+    .section-hero-mask {
+        background-position: 50% 58%;
+        background-size: 100% auto;
+        top: 0;
+        left: -10%;
+        width: 120%;
+        height: 100%
+    }
+
+    .section-hero-mask:after {
+        content: "";
+        background: #180239;
+        background-blend-mode: normal, color, normal;
+        position: absolute;
+        top: 0;
+        right: -50%;
+        width: 50%;
+        height: 100%;
+        z-index: 30
+    }
+}
+
+.section-h1 {
+    font-weight: 600;
+    color: #fff;
+    line-height: 1
+}
+
+.section-heading-h2 {
+    font-weight: 600;
+    color: #160037;
+    line-height: 1
+}
+
+.section__header-h2 {
+    margin-bottom: 12px
+}
+
+.section-hero__desc,
+.section-primary__desc {
+    color: #fff;
+    line-height: 1.5;
+    margin-bottom: 28px
+}
+
+.section__desc {
+    line-height: 1.5
+}
+
+.section__header {
+    margin-bottom: 20px
+}
+
+.section__desc p {
+    margin-bottom: 0
+}
+
+.section__header-link {
+    color: #9a63ec;
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1;
+    text-decoration: none
+}
+
+.section-logo {
+    width: 280px
+}
+
+.section-title-svg {
+    right: -45px;
+    top: -30px
+}
+
+.card {
+    border: 1px solid #E5E7EB;
+    border-radius: 14px;
+    padding: 20px;
+    background-color: #f9fafb
+}
+
+.card-featured {
+    border: 1px solid #9A63EC;
+    background-color: #edebfe
+}
+
+.card__image {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 16px
+}
+
+.card__image__wide {
+    width: 150px;
+    height: 80px;
+    margin-bottom: 16px
+}
+
+.card__title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1;
+    margin-bottom: 6px
+}
+
+.card__subtitle {
+    color: #9a63ec;
+    font-size: .875rem;
+    line-height: 1;
+    margin-bottom: 18px
+}
+
+.card__desc p {
+    color: #6b7280;
+    font-size: .875rem;
+    line-height: 1.5;
+    margin-bottom: 0
+}
+
+@media (min-width: 992px) {
+    .section-hero__header {
+        width: 56%
+    }
+
+    .section-hero__desc {
+        width: 76%
+    }
+
+    .section-primary__desc {
+        width: 55%
+    }
+
+    .section__header-text {
+        width: 42%
+    }
+}
+
+.section__faq-item {
+    background: #f9fafb;
+    border: 1px solid #E5E7EB;
+    border-radius: 10px;
+    padding: 24px;
+    margin-bottom: 20px
+}
+
+.section__faq-item:last-child {
+    margin-bottom: 0
+}
+
+.faq-item__button {
+    text-align: left;
+    outline: none;
+    border: none;
+    background-color: transparent
+}
+
+.faq-item__title {
+    color: #3c4043;
+    font-size: 22px
+}
+
+.faq-icon {
+    flex: none;
+    width: 16px
+}
+
+.svg-icon {
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    transition-duration: .3s
+}
+
+.faq-description {
+    font-size: 16px
+}
+
+.option-dropdown {
+    position: absolute;
+    left: 0;
+    top: 4rem;
+    z-index: 10;
+    margin-top: .5rem;
+    border-width: 2px;
+    width: 100%;
+    background-color: #fff;
+    border: 1px solid #0041D9;
+    border-radius: 8px
+}
+
+.option-list__item {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding-left: 1em;
+    height: 32px
+}
+
+.option-list__item:hover {
+    background: #ebf0fc
+}
+
+.option-list__item-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 23px;
+    height: auto;
+    margin-right: .75rem
+}
+
+.page-card {
+    background-color: #edebfe;
+    border: 1px solid #9A63EC;
+    border-radius: 20px;
+    padding: 20px;
+    margin-top: 44px;
+    margin-bottom: 60px
+}
+
+@media (min-width: 992px) {
+    .page-card {
+        padding: 40px
+    }
+}
+
+.pagination {
+    list-style: none;
+    padding: 0;
+    margin: 0
+}
+
+.page-item {
+    margin-bottom: 0
+}
+
+.page-item:first-child .page-link {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px
+}
+
+.page-item:last-child .page-link {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px
+}
+
+.page-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .875rem;
+    color: #6b7280;
+    border: 1px solid #D1D5DB;
+    padding-left: 12px;
+    padding-right: 12px;
+    height: 33px
+}
+
+.page-link-prev,
+.page-number {
+    border-right: none
+}
+
+.page-item.active .page-link {
+    font-weight: 700;
+    color: #374151
+}
+
+.page-link:focus,
+.page-link:hover {
+    color: #1f2937;
+    background-color: #e5e7eb;
+    border-color: #d1d5db;
+    text-decoration: none
+}
+
+.page-item.disabled .page-link {
+    color: #9ca3af;
+    background-color: #f9fafb;
+    border-color: #d1d5db;
+    cursor: not-allowed
+}
+
+.input-search {
+    width: 100%;
+    border: 1px solid #E5E7EB;
+    border-radius: 30px;
+    outline: none;
+    height: 42px;
+    padding-left: 51px
+}
+
+.input-search::placeholder {
+    font-size: 14px;
+    color: #4b5563
+}
+
+.input-search:focus::placeholder {
+    color: transparent
+}
+
+.search-button {
+    width: 42px;
+    height: 42px;
+    outline: none
+}
+
+.sidebar-title {
+    font-family: Plus Jakarta Sans, serif;
+    font-size: 17px;
+    color: #000
+}
+
+.sidebar-dropdown__title {
+    font-family: Plus Jakarta Sans, serif;
+    font-size: 20px;
+    color: #000
+}
+
+.page-content a {
+    text-decoration: underline
+}
+
+.page-content .page-action a {
+    text-decoration: none
+}
\ No newline at end of file
diff --git a/hub/services/static/img/favicon.ico b/hub/services/static/img/favicon.ico
new file mode 100644
index 0000000..7d04f6e
Binary files /dev/null and b/hub/services/static/img/favicon.ico differ
diff --git a/hub/services/static/img/footer-logo.png b/hub/services/static/img/footer-logo.png
new file mode 100644
index 0000000..dd18e6e
Binary files /dev/null and b/hub/services/static/img/footer-logo.png differ
diff --git a/hub/services/static/img/header-logo.png b/hub/services/static/img/header-logo.png
new file mode 100644
index 0000000..6718612
Binary files /dev/null and b/hub/services/static/img/header-logo.png differ
diff --git a/hub/services/static/img/header-logo1.png b/hub/services/static/img/header-logo1.png
new file mode 100644
index 0000000..f42ff7a
Binary files /dev/null and b/hub/services/static/img/header-logo1.png differ
diff --git a/hub/services/static/img/hero-bg.jpg b/hub/services/static/img/hero-bg.jpg
new file mode 100644
index 0000000..645fbf9
Binary files /dev/null and b/hub/services/static/img/hero-bg.jpg differ
diff --git a/hub/services/static/img/section-logo.png b/hub/services/static/img/section-logo.png
new file mode 100644
index 0000000..14a2759
Binary files /dev/null and b/hub/services/static/img/section-logo.png differ
diff --git a/hub/services/static/js/alpine-collapse.min.js b/hub/services/static/js/alpine-collapse.min.js
new file mode 100644
index 0000000..a865343
--- /dev/null
+++ b/hub/services/static/js/alpine-collapse.min.js
@@ -0,0 +1 @@
+(()=>{function g(n){n.directive("collapse",e),e.inline=(t,{modifiers:i})=>{i.includes("min")&&(t._x_doShow=()=>{},t._x_doHide=()=>{})};function e(t,{modifiers:i}){let r=l(i,"duration",250)/1e3,h=l(i,"min",0),u=!i.includes("min");t._x_isShown||(t.style.height=`${h}px`),!t._x_isShown&&u&&(t.hidden=!0),t._x_isShown||(t.style.overflow="hidden");let c=(d,s)=>{let o=n.setStyles(d,s);return s.height?()=>{}:o},f={transitionProperty:"height",transitionDuration:`${r}s`,transitionTimingFunction:"cubic-bezier(0.4, 0.0, 0.2, 1)"};t._x_transition={in(d=()=>{},s=()=>{}){u&&(t.hidden=!1),u&&(t.style.display=null);let o=t.getBoundingClientRect().height;t.style.height="auto";let a=t.getBoundingClientRect().height;o===a&&(o=h),n.transition(t,n.setStyles,{during:f,start:{height:o+"px"},end:{height:a+"px"}},()=>t._x_isShown=!0,()=>{Math.abs(t.getBoundingClientRect().height-a)<1&&(t.style.overflow=null)})},out(d=()=>{},s=()=>{}){let o=t.getBoundingClientRect().height;n.transition(t,c,{during:f,start:{height:o+"px"},end:{height:h+"px"}},()=>t.style.overflow="hidden",()=>{t._x_isShown=!1,t.style.height==`${h}px`&&u&&(t.style.display="none",t.hidden=!0)})}}}}function l(n,e,t){if(n.indexOf(e)===-1)return t;let i=n[n.indexOf(e)+1];if(!i)return t;if(e==="duration"){let r=i.match(/([0-9]+)ms/);if(r)return r[1]}if(e==="min"){let r=i.match(/([0-9]+)px/);if(r)return r[1]}return i}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(g)});})();
diff --git a/hub/services/static/js/servala-main.js b/hub/services/static/js/servala-main.js
new file mode 100644
index 0000000..6ef2cfb
--- /dev/null
+++ b/hub/services/static/js/servala-main.js
@@ -0,0 +1,9 @@
+(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))i(r);new MutationObserver(r=>{for(const s of r)if(s.type==="childList")for(const o of s.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&i(o)}).observe(document,{childList:!0,subtree:!0});function n(r){const s={};return r.integrity&&(s.integrity=r.integrity),r.referrerPolicy&&(s.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?s.credentials="include":r.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function i(r){if(r.ep)return;r.ep=!0;const s=n(r);fetch(r.href,s)}})();var M="top",H="bottom",j="right",P="left",ln="auto",ee=[M,H,j,P],It="start",zt="end",cs="clippingParents",vi="viewport",Bt="popper",ls="reference",Gn=ee.reduce(function(e,t){return e.concat([t+"-"+It,t+"-"+zt])},[]),bi=[].concat(ee,[ln]).reduce(function(e,t){return e.concat([t,t+"-"+It,t+"-"+zt])},[]),us="beforeRead",fs="read",ds="afterRead",hs="beforeMain",ps="main",_s="afterMain",gs="beforeWrite",ms="write",Es="afterWrite",vs=[us,fs,ds,hs,ps,_s,gs,ms,Es];function et(e){return e?(e.nodeName||"").toLowerCase():null}function F(e){if(e==null)return window;if(e.toString()!=="[object Window]"){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function Mt(e){var t=F(e).Element;return e instanceof t||e instanceof Element}function W(e){var t=F(e).HTMLElement;return e instanceof t||e instanceof HTMLElement}function yi(e){if(typeof ShadowRoot>"u")return!1;var t=F(e).ShadowRoot;return e instanceof t||e instanceof ShadowRoot}function Ca(e){var t=e.state;Object.keys(t.elements).forEach(function(n){var i=t.styles[n]||{},r=t.attributes[n]||{},s=t.elements[n];!W(s)||!et(s)||(Object.assign(s.style,i),Object.keys(r).forEach(function(o){var a=r[o];a===!1?s.removeAttribute(o):s.setAttribute(o,a===!0?"":a)}))})}function xa(e){var t=e.state,n={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(t.elements.popper.style,n.popper),t.styles=n,t.elements.arrow&&Object.assign(t.elements.arrow.style,n.arrow),function(){Object.keys(t.elements).forEach(function(i){var r=t.elements[i],s=t.attributes[i]||{},o=Object.keys(t.styles.hasOwnProperty(i)?t.styles[i]:n[i]),a=o.reduce(function(c,u){return c[u]="",c},{});!W(r)||!et(r)||(Object.assign(r.style,a),Object.keys(s).forEach(function(c){r.removeAttribute(c)}))})}}const Ai={name:"applyStyles",enabled:!0,phase:"write",fn:Ca,effect:xa,requires:["computeStyles"]};function Z(e){return e.split("-")[0]}var xt=Math.max,tn=Math.min,Ut=Math.round;function Xn(){var e=navigator.userAgentData;return e!=null&&e.brands&&Array.isArray(e.brands)?e.brands.map(function(t){return t.brand+"/"+t.version}).join(" "):navigator.userAgent}function bs(){return!/^((?!chrome|android).)*safari/i.test(Xn())}function qt(e,t,n){t===void 0&&(t=!1),n===void 0&&(n=!1);var i=e.getBoundingClientRect(),r=1,s=1;t&&W(e)&&(r=e.offsetWidth>0&&Ut(i.width)/e.offsetWidth||1,s=e.offsetHeight>0&&Ut(i.height)/e.offsetHeight||1);var o=Mt(e)?F(e):window,a=o.visualViewport,c=!bs()&&n,u=(i.left+(c&&a?a.offsetLeft:0))/r,l=(i.top+(c&&a?a.offsetTop:0))/s,h=i.width/r,p=i.height/s;return{width:h,height:p,top:l,right:u+h,bottom:l+p,left:u,x:u,y:l}}function wi(e){var t=qt(e),n=e.offsetWidth,i=e.offsetHeight;return Math.abs(t.width-n)<=1&&(n=t.width),Math.abs(t.height-i)<=1&&(i=t.height),{x:e.offsetLeft,y:e.offsetTop,width:n,height:i}}function ys(e,t){var n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&yi(n)){var i=t;do{if(i&&e.isSameNode(i))return!0;i=i.parentNode||i.host}while(i)}return!1}function rt(e){return F(e).getComputedStyle(e)}function Na(e){return["table","td","th"].indexOf(et(e))>=0}function _t(e){return((Mt(e)?e.ownerDocument:e.document)||window.document).documentElement}function un(e){return et(e)==="html"?e:e.assignedSlot||e.parentNode||(yi(e)?e.host:null)||_t(e)}function dr(e){return!W(e)||rt(e).position==="fixed"?null:e.offsetParent}function $a(e){var t=/firefox/i.test(Xn()),n=/Trident/i.test(Xn());if(n&&W(e)){var i=rt(e);if(i.position==="fixed")return null}var r=un(e);for(yi(r)&&(r=r.host);W(r)&&["html","body"].indexOf(et(r))<0;){var s=rt(r);if(s.transform!=="none"||s.perspective!=="none"||s.contain==="paint"||["transform","perspective"].indexOf(s.willChange)!==-1||t&&s.willChange==="filter"||t&&s.filter&&s.filter!=="none")return r;r=r.parentNode}return null}function Te(e){for(var t=F(e),n=dr(e);n&&Na(n)&&rt(n).position==="static";)n=dr(n);return n&&(et(n)==="html"||et(n)==="body"&&rt(n).position==="static")?t:n||$a(e)||t}function Ti(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function Ee(e,t,n){return xt(e,tn(t,n))}function Da(e,t,n){var i=Ee(e,t,n);return i>n?n:i}function As(){return{top:0,right:0,bottom:0,left:0}}function ws(e){return Object.assign({},As(),e)}function Ts(e,t){return t.reduce(function(n,i){return n[i]=e,n},{})}var La=function(t,n){return t=typeof t=="function"?t(Object.assign({},n.rects,{placement:n.placement})):t,ws(typeof t!="number"?t:Ts(t,ee))};function Ia(e){var t,n=e.state,i=e.name,r=e.options,s=n.elements.arrow,o=n.modifiersData.popperOffsets,a=Z(n.placement),c=Ti(a),u=[P,j].indexOf(a)>=0,l=u?"height":"width";if(!(!s||!o)){var h=La(r.padding,n),p=wi(s),_=c==="y"?M:P,A=c==="y"?H:j,v=n.rects.reference[l]+n.rects.reference[c]-o[c]-n.rects.popper[l],d=o[c]-n.rects.reference[c],m=Te(s),b=m?c==="y"?m.clientHeight||0:m.clientWidth||0:0,y=v/2-d/2,E=h[_],w=b-p[l]-h[A],T=b/2-p[l]/2+y,O=Ee(E,T,w),D=c;n.modifiersData[i]=(t={},t[D]=O,t.centerOffset=O-T,t)}}function Ma(e){var t=e.state,n=e.options,i=n.element,r=i===void 0?"[data-popper-arrow]":i;r!=null&&(typeof r=="string"&&(r=t.elements.popper.querySelector(r),!r)||ys(t.elements.popper,r)&&(t.elements.arrow=r))}const Os={name:"arrow",enabled:!0,phase:"main",fn:Ia,effect:Ma,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function Gt(e){return e.split("-")[1]}var Pa={top:"auto",right:"auto",bottom:"auto",left:"auto"};function Ra(e,t){var n=e.x,i=e.y,r=t.devicePixelRatio||1;return{x:Ut(n*r)/r||0,y:Ut(i*r)/r||0}}function hr(e){var t,n=e.popper,i=e.popperRect,r=e.placement,s=e.variation,o=e.offsets,a=e.position,c=e.gpuAcceleration,u=e.adaptive,l=e.roundOffsets,h=e.isFixed,p=o.x,_=p===void 0?0:p,A=o.y,v=A===void 0?0:A,d=typeof l=="function"?l({x:_,y:v}):{x:_,y:v};_=d.x,v=d.y;var m=o.hasOwnProperty("x"),b=o.hasOwnProperty("y"),y=P,E=M,w=window;if(u){var T=Te(n),O="clientHeight",D="clientWidth";if(T===F(n)&&(T=_t(n),rt(T).position!=="static"&&a==="absolute"&&(O="scrollHeight",D="scrollWidth")),T=T,r===M||(r===P||r===j)&&s===zt){E=H;var N=h&&T===w&&w.visualViewport?w.visualViewport.height:T[O];v-=N-i.height,v*=c?1:-1}if(r===P||(r===M||r===H)&&s===zt){y=j;var x=h&&T===w&&w.visualViewport?w.visualViewport.width:T[D];_-=x-i.width,_*=c?1:-1}}var L=Object.assign({position:a},u&&Pa),U=l===!0?Ra({x:_,y:v},F(n)):{x:_,y:v};if(_=U.x,v=U.y,c){var I;return Object.assign({},L,(I={},I[E]=b?"0":"",I[y]=m?"0":"",I.transform=(w.devicePixelRatio||1)<=1?"translate("+_+"px, "+v+"px)":"translate3d("+_+"px, "+v+"px, 0)",I))}return Object.assign({},L,(t={},t[E]=b?v+"px":"",t[y]=m?_+"px":"",t.transform="",t))}function ka(e){var t=e.state,n=e.options,i=n.gpuAcceleration,r=i===void 0?!0:i,s=n.adaptive,o=s===void 0?!0:s,a=n.roundOffsets,c=a===void 0?!0:a,u={placement:Z(t.placement),variation:Gt(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:r,isFixed:t.options.strategy==="fixed"};t.modifiersData.popperOffsets!=null&&(t.styles.popper=Object.assign({},t.styles.popper,hr(Object.assign({},u,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:o,roundOffsets:c})))),t.modifiersData.arrow!=null&&(t.styles.arrow=Object.assign({},t.styles.arrow,hr(Object.assign({},u,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:c})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})}const Oi={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:ka,data:{}};var ke={passive:!0};function Va(e){var t=e.state,n=e.instance,i=e.options,r=i.scroll,s=r===void 0?!0:r,o=i.resize,a=o===void 0?!0:o,c=F(t.elements.popper),u=[].concat(t.scrollParents.reference,t.scrollParents.popper);return s&&u.forEach(function(l){l.addEventListener("scroll",n.update,ke)}),a&&c.addEventListener("resize",n.update,ke),function(){s&&u.forEach(function(l){l.removeEventListener("scroll",n.update,ke)}),a&&c.removeEventListener("resize",n.update,ke)}}const Si={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:Va,data:{}};var Ha={left:"right",right:"left",bottom:"top",top:"bottom"};function Ge(e){return e.replace(/left|right|bottom|top/g,function(t){return Ha[t]})}var ja={start:"end",end:"start"};function pr(e){return e.replace(/start|end/g,function(t){return ja[t]})}function Ci(e){var t=F(e),n=t.pageXOffset,i=t.pageYOffset;return{scrollLeft:n,scrollTop:i}}function xi(e){return qt(_t(e)).left+Ci(e).scrollLeft}function Fa(e,t){var n=F(e),i=_t(e),r=n.visualViewport,s=i.clientWidth,o=i.clientHeight,a=0,c=0;if(r){s=r.width,o=r.height;var u=bs();(u||!u&&t==="fixed")&&(a=r.offsetLeft,c=r.offsetTop)}return{width:s,height:o,x:a+xi(e),y:c}}function Ba(e){var t,n=_t(e),i=Ci(e),r=(t=e.ownerDocument)==null?void 0:t.body,s=xt(n.scrollWidth,n.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),o=xt(n.scrollHeight,n.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0),a=-i.scrollLeft+xi(e),c=-i.scrollTop;return rt(r||n).direction==="rtl"&&(a+=xt(n.clientWidth,r?r.clientWidth:0)-s),{width:s,height:o,x:a,y:c}}function Ni(e){var t=rt(e),n=t.overflow,i=t.overflowX,r=t.overflowY;return/auto|scroll|overlay|hidden/.test(n+r+i)}function Ss(e){return["html","body","#document"].indexOf(et(e))>=0?e.ownerDocument.body:W(e)&&Ni(e)?e:Ss(un(e))}function ve(e,t){var n;t===void 0&&(t=[]);var i=Ss(e),r=i===((n=e.ownerDocument)==null?void 0:n.body),s=F(i),o=r?[s].concat(s.visualViewport||[],Ni(i)?i:[]):i,a=t.concat(o);return r?a:a.concat(ve(un(o)))}function Qn(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function Wa(e,t){var n=qt(e,!1,t==="fixed");return n.top=n.top+e.clientTop,n.left=n.left+e.clientLeft,n.bottom=n.top+e.clientHeight,n.right=n.left+e.clientWidth,n.width=e.clientWidth,n.height=e.clientHeight,n.x=n.left,n.y=n.top,n}function _r(e,t,n){return t===vi?Qn(Fa(e,n)):Mt(t)?Wa(t,n):Qn(Ba(_t(e)))}function Ka(e){var t=ve(un(e)),n=["absolute","fixed"].indexOf(rt(e).position)>=0,i=n&&W(e)?Te(e):e;return Mt(i)?t.filter(function(r){return Mt(r)&&ys(r,i)&&et(r)!=="body"}):[]}function Ya(e,t,n,i){var r=t==="clippingParents"?Ka(e):[].concat(t),s=[].concat(r,[n]),o=s[0],a=s.reduce(function(c,u){var l=_r(e,u,i);return c.top=xt(l.top,c.top),c.right=tn(l.right,c.right),c.bottom=tn(l.bottom,c.bottom),c.left=xt(l.left,c.left),c},_r(e,o,i));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function Cs(e){var t=e.reference,n=e.element,i=e.placement,r=i?Z(i):null,s=i?Gt(i):null,o=t.x+t.width/2-n.width/2,a=t.y+t.height/2-n.height/2,c;switch(r){case M:c={x:o,y:t.y-n.height};break;case H:c={x:o,y:t.y+t.height};break;case j:c={x:t.x+t.width,y:a};break;case P:c={x:t.x-n.width,y:a};break;default:c={x:t.x,y:t.y}}var u=r?Ti(r):null;if(u!=null){var l=u==="y"?"height":"width";switch(s){case It:c[u]=c[u]-(t[l]/2-n[l]/2);break;case zt:c[u]=c[u]+(t[l]/2-n[l]/2);break}}return c}function Xt(e,t){t===void 0&&(t={});var n=t,i=n.placement,r=i===void 0?e.placement:i,s=n.strategy,o=s===void 0?e.strategy:s,a=n.boundary,c=a===void 0?cs:a,u=n.rootBoundary,l=u===void 0?vi:u,h=n.elementContext,p=h===void 0?Bt:h,_=n.altBoundary,A=_===void 0?!1:_,v=n.padding,d=v===void 0?0:v,m=ws(typeof d!="number"?d:Ts(d,ee)),b=p===Bt?ls:Bt,y=e.rects.popper,E=e.elements[A?b:p],w=Ya(Mt(E)?E:E.contextElement||_t(e.elements.popper),c,l,o),T=qt(e.elements.reference),O=Cs({reference:T,element:y,placement:r}),D=Qn(Object.assign({},y,O)),N=p===Bt?D:T,x={top:w.top-N.top+m.top,bottom:N.bottom-w.bottom+m.bottom,left:w.left-N.left+m.left,right:N.right-w.right+m.right},L=e.modifiersData.offset;if(p===Bt&&L){var U=L[r];Object.keys(x).forEach(function(I){var vt=[j,H].indexOf(I)>=0?1:-1,bt=[M,H].indexOf(I)>=0?"y":"x";x[I]+=U[bt]*vt})}return x}function za(e,t){t===void 0&&(t={});var n=t,i=n.placement,r=n.boundary,s=n.rootBoundary,o=n.padding,a=n.flipVariations,c=n.allowedAutoPlacements,u=c===void 0?bi:c,l=Gt(i),h=l?a?Gn:Gn.filter(function(A){return Gt(A)===l}):ee,p=h.filter(function(A){return u.indexOf(A)>=0});p.length===0&&(p=h);var _=p.reduce(function(A,v){return A[v]=Xt(e,{placement:v,boundary:r,rootBoundary:s,padding:o})[Z(v)],A},{});return Object.keys(_).sort(function(A,v){return _[A]-_[v]})}function Ua(e){if(Z(e)===ln)return[];var t=Ge(e);return[pr(e),t,pr(t)]}function qa(e){var t=e.state,n=e.options,i=e.name;if(!t.modifiersData[i]._skip){for(var r=n.mainAxis,s=r===void 0?!0:r,o=n.altAxis,a=o===void 0?!0:o,c=n.fallbackPlacements,u=n.padding,l=n.boundary,h=n.rootBoundary,p=n.altBoundary,_=n.flipVariations,A=_===void 0?!0:_,v=n.allowedAutoPlacements,d=t.options.placement,m=Z(d),b=m===d,y=c||(b||!A?[Ge(d)]:Ua(d)),E=[d].concat(y).reduce(function(Ht,at){return Ht.concat(Z(at)===ln?za(t,{placement:at,boundary:l,rootBoundary:h,padding:u,flipVariations:A,allowedAutoPlacements:v}):at)},[]),w=t.rects.reference,T=t.rects.popper,O=new Map,D=!0,N=E[0],x=0;x<E.length;x++){var L=E[x],U=Z(L),I=Gt(L)===It,vt=[M,H].indexOf(U)>=0,bt=vt?"width":"height",V=Xt(t,{placement:L,boundary:l,rootBoundary:h,altBoundary:p,padding:u}),q=vt?I?j:P:I?H:M;w[bt]>T[bt]&&(q=Ge(q));var Le=Ge(q),yt=[];if(s&&yt.push(V[U]<=0),a&&yt.push(V[q]<=0,V[Le]<=0),yt.every(function(Ht){return Ht})){N=L,D=!1;break}O.set(L,yt)}if(D)for(var Ie=A?3:1,On=function(at){var fe=E.find(function(Pe){var At=O.get(Pe);if(At)return At.slice(0,at).every(function(Sn){return Sn})});if(fe)return N=fe,"break"},ue=Ie;ue>0;ue--){var Me=On(ue);if(Me==="break")break}t.placement!==N&&(t.modifiersData[i]._skip=!0,t.placement=N,t.reset=!0)}}const xs={name:"flip",enabled:!0,phase:"main",fn:qa,requiresIfExists:["offset"],data:{_skip:!1}};function gr(e,t,n){return n===void 0&&(n={x:0,y:0}),{top:e.top-t.height-n.y,right:e.right-t.width+n.x,bottom:e.bottom-t.height+n.y,left:e.left-t.width-n.x}}function mr(e){return[M,j,H,P].some(function(t){return e[t]>=0})}function Ga(e){var t=e.state,n=e.name,i=t.rects.reference,r=t.rects.popper,s=t.modifiersData.preventOverflow,o=Xt(t,{elementContext:"reference"}),a=Xt(t,{altBoundary:!0}),c=gr(o,i),u=gr(a,r,s),l=mr(c),h=mr(u);t.modifiersData[n]={referenceClippingOffsets:c,popperEscapeOffsets:u,isReferenceHidden:l,hasPopperEscaped:h},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":l,"data-popper-escaped":h})}const Ns={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:Ga};function Xa(e,t,n){var i=Z(e),r=[P,M].indexOf(i)>=0?-1:1,s=typeof n=="function"?n(Object.assign({},t,{placement:e})):n,o=s[0],a=s[1];return o=o||0,a=(a||0)*r,[P,j].indexOf(i)>=0?{x:a,y:o}:{x:o,y:a}}function Qa(e){var t=e.state,n=e.options,i=e.name,r=n.offset,s=r===void 0?[0,0]:r,o=bi.reduce(function(l,h){return l[h]=Xa(h,t.rects,s),l},{}),a=o[t.placement],c=a.x,u=a.y;t.modifiersData.popperOffsets!=null&&(t.modifiersData.popperOffsets.x+=c,t.modifiersData.popperOffsets.y+=u),t.modifiersData[i]=o}const $s={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:Qa};function Ja(e){var t=e.state,n=e.name;t.modifiersData[n]=Cs({reference:t.rects.reference,element:t.rects.popper,placement:t.placement})}const $i={name:"popperOffsets",enabled:!0,phase:"read",fn:Ja,data:{}};function Za(e){return e==="x"?"y":"x"}function tc(e){var t=e.state,n=e.options,i=e.name,r=n.mainAxis,s=r===void 0?!0:r,o=n.altAxis,a=o===void 0?!1:o,c=n.boundary,u=n.rootBoundary,l=n.altBoundary,h=n.padding,p=n.tether,_=p===void 0?!0:p,A=n.tetherOffset,v=A===void 0?0:A,d=Xt(t,{boundary:c,rootBoundary:u,padding:h,altBoundary:l}),m=Z(t.placement),b=Gt(t.placement),y=!b,E=Ti(m),w=Za(E),T=t.modifiersData.popperOffsets,O=t.rects.reference,D=t.rects.popper,N=typeof v=="function"?v(Object.assign({},t.rects,{placement:t.placement})):v,x=typeof N=="number"?{mainAxis:N,altAxis:N}:Object.assign({mainAxis:0,altAxis:0},N),L=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,U={x:0,y:0};if(T){if(s){var I,vt=E==="y"?M:P,bt=E==="y"?H:j,V=E==="y"?"height":"width",q=T[E],Le=q+d[vt],yt=q-d[bt],Ie=_?-D[V]/2:0,On=b===It?O[V]:D[V],ue=b===It?-D[V]:-O[V],Me=t.elements.arrow,Ht=_&&Me?wi(Me):{width:0,height:0},at=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:As(),fe=at[vt],Pe=at[bt],At=Ee(0,O[V],Ht[V]),Sn=y?O[V]/2-Ie-At-fe-x.mainAxis:On-At-fe-x.mainAxis,ya=y?-O[V]/2+Ie+At+Pe+x.mainAxis:ue+At+Pe+x.mainAxis,Cn=t.elements.arrow&&Te(t.elements.arrow),Aa=Cn?E==="y"?Cn.clientTop||0:Cn.clientLeft||0:0,ir=(I=L==null?void 0:L[E])!=null?I:0,wa=q+Sn-ir-Aa,Ta=q+ya-ir,rr=Ee(_?tn(Le,wa):Le,q,_?xt(yt,Ta):yt);T[E]=rr,U[E]=rr-q}if(a){var sr,Oa=E==="x"?M:P,Sa=E==="x"?H:j,wt=T[w],Re=w==="y"?"height":"width",or=wt+d[Oa],ar=wt-d[Sa],xn=[M,P].indexOf(m)!==-1,cr=(sr=L==null?void 0:L[w])!=null?sr:0,lr=xn?or:wt-O[Re]-D[Re]-cr+x.altAxis,ur=xn?wt+O[Re]+D[Re]-cr-x.altAxis:ar,fr=_&&xn?Da(lr,wt,ur):Ee(_?lr:or,wt,_?ur:ar);T[w]=fr,U[w]=fr-wt}t.modifiersData[i]=U}}const Ds={name:"preventOverflow",enabled:!0,phase:"main",fn:tc,requiresIfExists:["offset"]};function ec(e){return{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}}function nc(e){return e===F(e)||!W(e)?Ci(e):ec(e)}function ic(e){var t=e.getBoundingClientRect(),n=Ut(t.width)/e.offsetWidth||1,i=Ut(t.height)/e.offsetHeight||1;return n!==1||i!==1}function rc(e,t,n){n===void 0&&(n=!1);var i=W(t),r=W(t)&&ic(t),s=_t(t),o=qt(e,r,n),a={scrollLeft:0,scrollTop:0},c={x:0,y:0};return(i||!i&&!n)&&((et(t)!=="body"||Ni(s))&&(a=nc(t)),W(t)?(c=qt(t,!0),c.x+=t.clientLeft,c.y+=t.clientTop):s&&(c.x=xi(s))),{x:o.left+a.scrollLeft-c.x,y:o.top+a.scrollTop-c.y,width:o.width,height:o.height}}function sc(e){var t=new Map,n=new Set,i=[];e.forEach(function(s){t.set(s.name,s)});function r(s){n.add(s.name);var o=[].concat(s.requires||[],s.requiresIfExists||[]);o.forEach(function(a){if(!n.has(a)){var c=t.get(a);c&&r(c)}}),i.push(s)}return e.forEach(function(s){n.has(s.name)||r(s)}),i}function oc(e){var t=sc(e);return vs.reduce(function(n,i){return n.concat(t.filter(function(r){return r.phase===i}))},[])}function ac(e){var t;return function(){return t||(t=new Promise(function(n){Promise.resolve().then(function(){t=void 0,n(e())})})),t}}function cc(e){var t=e.reduce(function(n,i){var r=n[i.name];return n[i.name]=r?Object.assign({},r,i,{options:Object.assign({},r.options,i.options),data:Object.assign({},r.data,i.data)}):i,n},{});return Object.keys(t).map(function(n){return t[n]})}var Er={placement:"bottom",modifiers:[],strategy:"absolute"};function vr(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return!t.some(function(i){return!(i&&typeof i.getBoundingClientRect=="function")})}function fn(e){e===void 0&&(e={});var t=e,n=t.defaultModifiers,i=n===void 0?[]:n,r=t.defaultOptions,s=r===void 0?Er:r;return function(a,c,u){u===void 0&&(u=s);var l={placement:"bottom",orderedModifiers:[],options:Object.assign({},Er,s),modifiersData:{},elements:{reference:a,popper:c},attributes:{},styles:{}},h=[],p=!1,_={state:l,setOptions:function(m){var b=typeof m=="function"?m(l.options):m;v(),l.options=Object.assign({},s,l.options,b),l.scrollParents={reference:Mt(a)?ve(a):a.contextElement?ve(a.contextElement):[],popper:ve(c)};var y=oc(cc([].concat(i,l.options.modifiers)));return l.orderedModifiers=y.filter(function(E){return E.enabled}),A(),_.update()},forceUpdate:function(){if(!p){var m=l.elements,b=m.reference,y=m.popper;if(vr(b,y)){l.rects={reference:rc(b,Te(y),l.options.strategy==="fixed"),popper:wi(y)},l.reset=!1,l.placement=l.options.placement,l.orderedModifiers.forEach(function(x){return l.modifiersData[x.name]=Object.assign({},x.data)});for(var E=0;E<l.orderedModifiers.length;E++){if(l.reset===!0){l.reset=!1,E=-1;continue}var w=l.orderedModifiers[E],T=w.fn,O=w.options,D=O===void 0?{}:O,N=w.name;typeof T=="function"&&(l=T({state:l,options:D,name:N,instance:_})||l)}}}},update:ac(function(){return new Promise(function(d){_.forceUpdate(),d(l)})}),destroy:function(){v(),p=!0}};if(!vr(a,c))return _;_.setOptions(u).then(function(d){!p&&u.onFirstUpdate&&u.onFirstUpdate(d)});function A(){l.orderedModifiers.forEach(function(d){var m=d.name,b=d.options,y=b===void 0?{}:b,E=d.effect;if(typeof E=="function"){var w=E({state:l,name:m,instance:_,options:y}),T=function(){};h.push(w||T)}})}function v(){h.forEach(function(d){return d()}),h=[]}return _}}var lc=fn(),uc=[Si,$i,Oi,Ai],fc=fn({defaultModifiers:uc}),dc=[Si,$i,Oi,Ai,$s,xs,Ds,Os,Ns],Di=fn({defaultModifiers:dc});const Ls=Object.freeze(Object.defineProperty({__proto__:null,afterMain:_s,afterRead:ds,afterWrite:Es,applyStyles:Ai,arrow:Os,auto:ln,basePlacements:ee,beforeMain:hs,beforeRead:us,beforeWrite:gs,bottom:H,clippingParents:cs,computeStyles:Oi,createPopper:Di,createPopperBase:lc,createPopperLite:fc,detectOverflow:Xt,end:zt,eventListeners:Si,flip:xs,hide:Ns,left:P,main:ps,modifierPhases:vs,offset:$s,placements:bi,popper:Bt,popperGenerator:fn,popperOffsets:$i,preventOverflow:Ds,read:fs,reference:ls,right:j,start:It,top:M,variationPlacements:Gn,viewport:vi,write:ms},Symbol.toStringTag,{value:"Module"}));/*!
+  * Bootstrap v5.3.3 (https://getbootstrap.com/)
+  * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */const ct=new Map,Nn={set(e,t,n){ct.has(e)||ct.set(e,new Map);const i=ct.get(e);if(!i.has(t)&&i.size!==0){console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(i.keys())[0]}.`);return}i.set(t,n)},get(e,t){return ct.has(e)&&ct.get(e).get(t)||null},remove(e,t){if(!ct.has(e))return;const n=ct.get(e);n.delete(t),n.size===0&&ct.delete(e)}},hc=1e6,pc=1e3,Jn="transitionend",Is=e=>(e&&window.CSS&&window.CSS.escape&&(e=e.replace(/#([^\s"#']+)/g,(t,n)=>`#${CSS.escape(n)}`)),e),_c=e=>e==null?`${e}`:Object.prototype.toString.call(e).match(/\s([a-z]+)/i)[1].toLowerCase(),gc=e=>{do e+=Math.floor(Math.random()*hc);while(document.getElementById(e));return e},mc=e=>{if(!e)return 0;let{transitionDuration:t,transitionDelay:n}=window.getComputedStyle(e);const i=Number.parseFloat(t),r=Number.parseFloat(n);return!i&&!r?0:(t=t.split(",")[0],n=n.split(",")[0],(Number.parseFloat(t)+Number.parseFloat(n))*pc)},Ms=e=>{e.dispatchEvent(new Event(Jn))},nt=e=>!e||typeof e!="object"?!1:(typeof e.jquery<"u"&&(e=e[0]),typeof e.nodeType<"u"),ut=e=>nt(e)?e.jquery?e[0]:e:typeof e=="string"&&e.length>0?document.querySelector(Is(e)):null,ne=e=>{if(!nt(e)||e.getClientRects().length===0)return!1;const t=getComputedStyle(e).getPropertyValue("visibility")==="visible",n=e.closest("details:not([open])");if(!n)return t;if(n!==e){const i=e.closest("summary");if(i&&i.parentNode!==n||i===null)return!1}return t},ft=e=>!e||e.nodeType!==Node.ELEMENT_NODE||e.classList.contains("disabled")?!0:typeof e.disabled<"u"?e.disabled:e.hasAttribute("disabled")&&e.getAttribute("disabled")!=="false",Ps=e=>{if(!document.documentElement.attachShadow)return null;if(typeof e.getRootNode=="function"){const t=e.getRootNode();return t instanceof ShadowRoot?t:null}return e instanceof ShadowRoot?e:e.parentNode?Ps(e.parentNode):null},en=()=>{},Oe=e=>{e.offsetHeight},Rs=()=>window.jQuery&&!document.body.hasAttribute("data-bs-no-jquery")?window.jQuery:null,$n=[],Ec=e=>{document.readyState==="loading"?($n.length||document.addEventListener("DOMContentLoaded",()=>{for(const t of $n)t()}),$n.push(e)):e()},K=()=>document.documentElement.dir==="rtl",z=e=>{Ec(()=>{const t=Rs();if(t){const n=e.NAME,i=t.fn[n];t.fn[n]=e.jQueryInterface,t.fn[n].Constructor=e,t.fn[n].noConflict=()=>(t.fn[n]=i,e.jQueryInterface)}})},k=(e,t=[],n=e)=>typeof e=="function"?e(...t):n,ks=(e,t,n=!0)=>{if(!n){k(e);return}const r=mc(t)+5;let s=!1;const o=({target:a})=>{a===t&&(s=!0,t.removeEventListener(Jn,o),k(e))};t.addEventListener(Jn,o),setTimeout(()=>{s||Ms(t)},r)},Li=(e,t,n,i)=>{const r=e.length;let s=e.indexOf(t);return s===-1?!n&&i?e[r-1]:e[0]:(s+=n?1:-1,i&&(s=(s+r)%r),e[Math.max(0,Math.min(s,r-1))])},vc=/[^.]*(?=\..*)\.|.*/,bc=/\..*/,yc=/::\d+$/,Dn={};let br=1;const Vs={mouseenter:"mouseover",mouseleave:"mouseout"},Ac=new Set(["click","dblclick","mouseup","mousedown","contextmenu","mousewheel","DOMMouseScroll","mouseover","mouseout","mousemove","selectstart","selectend","keydown","keypress","keyup","orientationchange","touchstart","touchmove","touchend","touchcancel","pointerdown","pointermove","pointerup","pointerleave","pointercancel","gesturestart","gesturechange","gestureend","focus","blur","change","reset","select","submit","focusin","focusout","load","unload","beforeunload","resize","move","DOMContentLoaded","readystatechange","error","abort","scroll"]);function Hs(e,t){return t&&`${t}::${br++}`||e.uidEvent||br++}function js(e){const t=Hs(e);return e.uidEvent=t,Dn[t]=Dn[t]||{},Dn[t]}function wc(e,t){return function n(i){return Ii(i,{delegateTarget:e}),n.oneOff&&f.off(e,i.type,t),t.apply(e,[i])}}function Tc(e,t,n){return function i(r){const s=e.querySelectorAll(t);for(let{target:o}=r;o&&o!==this;o=o.parentNode)for(const a of s)if(a===o)return Ii(r,{delegateTarget:o}),i.oneOff&&f.off(e,r.type,t,n),n.apply(o,[r])}}function Fs(e,t,n=null){return Object.values(e).find(i=>i.callable===t&&i.delegationSelector===n)}function Bs(e,t,n){const i=typeof t=="string",r=i?n:t||n;let s=Ws(e);return Ac.has(s)||(s=e),[i,r,s]}function yr(e,t,n,i,r){if(typeof t!="string"||!e)return;let[s,o,a]=Bs(t,n,i);t in Vs&&(o=(A=>function(v){if(!v.relatedTarget||v.relatedTarget!==v.delegateTarget&&!v.delegateTarget.contains(v.relatedTarget))return A.call(this,v)})(o));const c=js(e),u=c[a]||(c[a]={}),l=Fs(u,o,s?n:null);if(l){l.oneOff=l.oneOff&&r;return}const h=Hs(o,t.replace(vc,"")),p=s?Tc(e,n,o):wc(e,o);p.delegationSelector=s?n:null,p.callable=o,p.oneOff=r,p.uidEvent=h,u[h]=p,e.addEventListener(a,p,s)}function Zn(e,t,n,i,r){const s=Fs(t[n],i,r);s&&(e.removeEventListener(n,s,!!r),delete t[n][s.uidEvent])}function Oc(e,t,n,i){const r=t[n]||{};for(const[s,o]of Object.entries(r))s.includes(i)&&Zn(e,t,n,o.callable,o.delegationSelector)}function Ws(e){return e=e.replace(bc,""),Vs[e]||e}const f={on(e,t,n,i){yr(e,t,n,i,!1)},one(e,t,n,i){yr(e,t,n,i,!0)},off(e,t,n,i){if(typeof t!="string"||!e)return;const[r,s,o]=Bs(t,n,i),a=o!==t,c=js(e),u=c[o]||{},l=t.startsWith(".");if(typeof s<"u"){if(!Object.keys(u).length)return;Zn(e,c,o,s,r?n:null);return}if(l)for(const h of Object.keys(c))Oc(e,c,h,t.slice(1));for(const[h,p]of Object.entries(u)){const _=h.replace(yc,"");(!a||t.includes(_))&&Zn(e,c,o,p.callable,p.delegationSelector)}},trigger(e,t,n){if(typeof t!="string"||!e)return null;const i=Rs(),r=Ws(t),s=t!==r;let o=null,a=!0,c=!0,u=!1;s&&i&&(o=i.Event(t,n),i(e).trigger(o),a=!o.isPropagationStopped(),c=!o.isImmediatePropagationStopped(),u=o.isDefaultPrevented());const l=Ii(new Event(t,{bubbles:a,cancelable:!0}),n);return u&&l.preventDefault(),c&&e.dispatchEvent(l),l.defaultPrevented&&o&&o.preventDefault(),l}};function Ii(e,t={}){for(const[n,i]of Object.entries(t))try{e[n]=i}catch{Object.defineProperty(e,n,{configurable:!0,get(){return i}})}return e}function Ar(e){if(e==="true")return!0;if(e==="false")return!1;if(e===Number(e).toString())return Number(e);if(e===""||e==="null")return null;if(typeof e!="string")return e;try{return JSON.parse(decodeURIComponent(e))}catch{return e}}function Ln(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}const it={setDataAttribute(e,t,n){e.setAttribute(`data-bs-${Ln(t)}`,n)},removeDataAttribute(e,t){e.removeAttribute(`data-bs-${Ln(t)}`)},getDataAttributes(e){if(!e)return{};const t={},n=Object.keys(e.dataset).filter(i=>i.startsWith("bs")&&!i.startsWith("bsConfig"));for(const i of n){let r=i.replace(/^bs/,"");r=r.charAt(0).toLowerCase()+r.slice(1,r.length),t[r]=Ar(e.dataset[i])}return t},getDataAttribute(e,t){return Ar(e.getAttribute(`data-bs-${Ln(t)}`))}};class Se{static get Default(){return{}}static get DefaultType(){return{}}static get NAME(){throw new Error('You have to implement the static method "NAME", for each component!')}_getConfig(t){return t=this._mergeConfigObj(t),t=this._configAfterMerge(t),this._typeCheckConfig(t),t}_configAfterMerge(t){return t}_mergeConfigObj(t,n){const i=nt(n)?it.getDataAttribute(n,"config"):{};return{...this.constructor.Default,...typeof i=="object"?i:{},...nt(n)?it.getDataAttributes(n):{},...typeof t=="object"?t:{}}}_typeCheckConfig(t,n=this.constructor.DefaultType){for(const[i,r]of Object.entries(n)){const s=t[i],o=nt(s)?"element":_c(s);if(!new RegExp(r).test(o))throw new TypeError(`${this.constructor.NAME.toUpperCase()}: Option "${i}" provided type "${o}" but expected type "${r}".`)}}}const Sc="5.3.3";class X extends Se{constructor(t,n){super(),t=ut(t),t&&(this._element=t,this._config=this._getConfig(n),Nn.set(this._element,this.constructor.DATA_KEY,this))}dispose(){Nn.remove(this._element,this.constructor.DATA_KEY),f.off(this._element,this.constructor.EVENT_KEY);for(const t of Object.getOwnPropertyNames(this))this[t]=null}_queueCallback(t,n,i=!0){ks(t,n,i)}_getConfig(t){return t=this._mergeConfigObj(t,this._element),t=this._configAfterMerge(t),this._typeCheckConfig(t),t}static getInstance(t){return Nn.get(ut(t),this.DATA_KEY)}static getOrCreateInstance(t,n={}){return this.getInstance(t)||new this(t,typeof n=="object"?n:null)}static get VERSION(){return Sc}static get DATA_KEY(){return`bs.${this.NAME}`}static get EVENT_KEY(){return`.${this.DATA_KEY}`}static eventName(t){return`${t}${this.EVENT_KEY}`}}const In=e=>{let t=e.getAttribute("data-bs-target");if(!t||t==="#"){let n=e.getAttribute("href");if(!n||!n.includes("#")&&!n.startsWith("."))return null;n.includes("#")&&!n.startsWith("#")&&(n=`#${n.split("#")[1]}`),t=n&&n!=="#"?n.trim():null}return t?t.split(",").map(n=>Is(n)).join(","):null},g={find(e,t=document.documentElement){return[].concat(...Element.prototype.querySelectorAll.call(t,e))},findOne(e,t=document.documentElement){return Element.prototype.querySelector.call(t,e)},children(e,t){return[].concat(...e.children).filter(n=>n.matches(t))},parents(e,t){const n=[];let i=e.parentNode.closest(t);for(;i;)n.push(i),i=i.parentNode.closest(t);return n},prev(e,t){let n=e.previousElementSibling;for(;n;){if(n.matches(t))return[n];n=n.previousElementSibling}return[]},next(e,t){let n=e.nextElementSibling;for(;n;){if(n.matches(t))return[n];n=n.nextElementSibling}return[]},focusableChildren(e){const t=["a","button","input","textarea","select","details","[tabindex]",'[contenteditable="true"]'].map(n=>`${n}:not([tabindex^="-"])`).join(",");return this.find(t,e).filter(n=>!ft(n)&&ne(n))},getSelectorFromElement(e){const t=In(e);return t&&g.findOne(t)?t:null},getElementFromSelector(e){const t=In(e);return t?g.findOne(t):null},getMultipleElementsFromSelector(e){const t=In(e);return t?g.find(t):[]}},dn=(e,t="hide")=>{const n=`click.dismiss${e.EVENT_KEY}`,i=e.NAME;f.on(document,n,`[data-bs-dismiss="${i}"]`,function(r){if(["A","AREA"].includes(this.tagName)&&r.preventDefault(),ft(this))return;const s=g.getElementFromSelector(this)||this.closest(`.${i}`);e.getOrCreateInstance(s)[t]()})},Cc="alert",xc="bs.alert",Ks=`.${xc}`,Nc=`close${Ks}`,$c=`closed${Ks}`,Dc="fade",Lc="show";class hn extends X{static get NAME(){return Cc}close(){if(f.trigger(this._element,Nc).defaultPrevented)return;this._element.classList.remove(Lc);const n=this._element.classList.contains(Dc);this._queueCallback(()=>this._destroyElement(),this._element,n)}_destroyElement(){this._element.remove(),f.trigger(this._element,$c),this.dispose()}static jQueryInterface(t){return this.each(function(){const n=hn.getOrCreateInstance(this);if(typeof t=="string"){if(n[t]===void 0||t.startsWith("_")||t==="constructor")throw new TypeError(`No method named "${t}"`);n[t](this)}})}}dn(hn,"close");z(hn);const Ic="button",Mc="bs.button",Pc=`.${Mc}`,Rc=".data-api",kc="active",wr='[data-bs-toggle="button"]',Vc=`click${Pc}${Rc}`;class pn extends X{static get NAME(){return Ic}toggle(){this._element.setAttribute("aria-pressed",this._element.classList.toggle(kc))}static jQueryInterface(t){return this.each(function(){const n=pn.getOrCreateInstance(this);t==="toggle"&&n[t]()})}}f.on(document,Vc,wr,e=>{e.preventDefault();const t=e.target.closest(wr);pn.getOrCreateInstance(t).toggle()});z(pn);const Hc="swipe",ie=".bs.swipe",jc=`touchstart${ie}`,Fc=`touchmove${ie}`,Bc=`touchend${ie}`,Wc=`pointerdown${ie}`,Kc=`pointerup${ie}`,Yc="touch",zc="pen",Uc="pointer-event",qc=40,Gc={endCallback:null,leftCallback:null,rightCallback:null},Xc={endCallback:"(function|null)",leftCallback:"(function|null)",rightCallback:"(function|null)"};class nn extends Se{constructor(t,n){super(),this._element=t,!(!t||!nn.isSupported())&&(this._config=this._getConfig(n),this._deltaX=0,this._supportPointerEvents=!!window.PointerEvent,this._initEvents())}static get Default(){return Gc}static get DefaultType(){return Xc}static get NAME(){return Hc}dispose(){f.off(this._element,ie)}_start(t){if(!this._supportPointerEvents){this._deltaX=t.touches[0].clientX;return}this._eventIsPointerPenTouch(t)&&(this._deltaX=t.clientX)}_end(t){this._eventIsPointerPenTouch(t)&&(this._deltaX=t.clientX-this._deltaX),this._handleSwipe(),k(this._config.endCallback)}_move(t){this._deltaX=t.touches&&t.touches.length>1?0:t.touches[0].clientX-this._deltaX}_handleSwipe(){const t=Math.abs(this._deltaX);if(t<=qc)return;const n=t/this._deltaX;this._deltaX=0,n&&k(n>0?this._config.rightCallback:this._config.leftCallback)}_initEvents(){this._supportPointerEvents?(f.on(this._element,Wc,t=>this._start(t)),f.on(this._element,Kc,t=>this._end(t)),this._element.classList.add(Uc)):(f.on(this._element,jc,t=>this._start(t)),f.on(this._element,Fc,t=>this._move(t)),f.on(this._element,Bc,t=>this._end(t)))}_eventIsPointerPenTouch(t){return this._supportPointerEvents&&(t.pointerType===zc||t.pointerType===Yc)}static isSupported(){return"ontouchstart"in document.documentElement||navigator.maxTouchPoints>0}}const Qc="carousel",Jc="bs.carousel",gt=`.${Jc}`,Ys=".data-api",Zc="ArrowLeft",tl="ArrowRight",el=500,de="next",jt="prev",Wt="left",Xe="right",nl=`slide${gt}`,Mn=`slid${gt}`,il=`keydown${gt}`,rl=`mouseenter${gt}`,sl=`mouseleave${gt}`,ol=`dragstart${gt}`,al=`load${gt}${Ys}`,cl=`click${gt}${Ys}`,zs="carousel",Ve="active",ll="slide",ul="carousel-item-end",fl="carousel-item-start",dl="carousel-item-next",hl="carousel-item-prev",Us=".active",qs=".carousel-item",pl=Us+qs,_l=".carousel-item img",gl=".carousel-indicators",ml="[data-bs-slide], [data-bs-slide-to]",El='[data-bs-ride="carousel"]',vl={[Zc]:Xe,[tl]:Wt},bl={interval:5e3,keyboard:!0,pause:"hover",ride:!1,touch:!0,wrap:!0},yl={interval:"(number|boolean)",keyboard:"boolean",pause:"(string|boolean)",ride:"(boolean|string)",touch:"boolean",wrap:"boolean"};class Ce extends X{constructor(t,n){super(t,n),this._interval=null,this._activeElement=null,this._isSliding=!1,this.touchTimeout=null,this._swipeHelper=null,this._indicatorsElement=g.findOne(gl,this._element),this._addEventListeners(),this._config.ride===zs&&this.cycle()}static get Default(){return bl}static get DefaultType(){return yl}static get NAME(){return Qc}next(){this._slide(de)}nextWhenVisible(){!document.hidden&&ne(this._element)&&this.next()}prev(){this._slide(jt)}pause(){this._isSliding&&Ms(this._element),this._clearInterval()}cycle(){this._clearInterval(),this._updateInterval(),this._interval=setInterval(()=>this.nextWhenVisible(),this._config.interval)}_maybeEnableCycle(){if(this._config.ride){if(this._isSliding){f.one(this._element,Mn,()=>this.cycle());return}this.cycle()}}to(t){const n=this._getItems();if(t>n.length-1||t<0)return;if(this._isSliding){f.one(this._element,Mn,()=>this.to(t));return}const i=this._getItemIndex(this._getActive());if(i===t)return;const r=t>i?de:jt;this._slide(r,n[t])}dispose(){this._swipeHelper&&this._swipeHelper.dispose(),super.dispose()}_configAfterMerge(t){return t.defaultInterval=t.interval,t}_addEventListeners(){this._config.keyboard&&f.on(this._element,il,t=>this._keydown(t)),this._config.pause==="hover"&&(f.on(this._element,rl,()=>this.pause()),f.on(this._element,sl,()=>this._maybeEnableCycle())),this._config.touch&&nn.isSupported()&&this._addTouchEventListeners()}_addTouchEventListeners(){for(const i of g.find(_l,this._element))f.on(i,ol,r=>r.preventDefault());const n={leftCallback:()=>this._slide(this._directionToOrder(Wt)),rightCallback:()=>this._slide(this._directionToOrder(Xe)),endCallback:()=>{this._config.pause==="hover"&&(this.pause(),this.touchTimeout&&clearTimeout(this.touchTimeout),this.touchTimeout=setTimeout(()=>this._maybeEnableCycle(),el+this._config.interval))}};this._swipeHelper=new nn(this._element,n)}_keydown(t){if(/input|textarea/i.test(t.target.tagName))return;const n=vl[t.key];n&&(t.preventDefault(),this._slide(this._directionToOrder(n)))}_getItemIndex(t){return this._getItems().indexOf(t)}_setActiveIndicatorElement(t){if(!this._indicatorsElement)return;const n=g.findOne(Us,this._indicatorsElement);n.classList.remove(Ve),n.removeAttribute("aria-current");const i=g.findOne(`[data-bs-slide-to="${t}"]`,this._indicatorsElement);i&&(i.classList.add(Ve),i.setAttribute("aria-current","true"))}_updateInterval(){const t=this._activeElement||this._getActive();if(!t)return;const n=Number.parseInt(t.getAttribute("data-bs-interval"),10);this._config.interval=n||this._config.defaultInterval}_slide(t,n=null){if(this._isSliding)return;const i=this._getActive(),r=t===de,s=n||Li(this._getItems(),i,r,this._config.wrap);if(s===i)return;const o=this._getItemIndex(s),a=_=>f.trigger(this._element,_,{relatedTarget:s,direction:this._orderToDirection(t),from:this._getItemIndex(i),to:o});if(a(nl).defaultPrevented||!i||!s)return;const u=!!this._interval;this.pause(),this._isSliding=!0,this._setActiveIndicatorElement(o),this._activeElement=s;const l=r?fl:ul,h=r?dl:hl;s.classList.add(h),Oe(s),i.classList.add(l),s.classList.add(l);const p=()=>{s.classList.remove(l,h),s.classList.add(Ve),i.classList.remove(Ve,h,l),this._isSliding=!1,a(Mn)};this._queueCallback(p,i,this._isAnimated()),u&&this.cycle()}_isAnimated(){return this._element.classList.contains(ll)}_getActive(){return g.findOne(pl,this._element)}_getItems(){return g.find(qs,this._element)}_clearInterval(){this._interval&&(clearInterval(this._interval),this._interval=null)}_directionToOrder(t){return K()?t===Wt?jt:de:t===Wt?de:jt}_orderToDirection(t){return K()?t===jt?Wt:Xe:t===jt?Xe:Wt}static jQueryInterface(t){return this.each(function(){const n=Ce.getOrCreateInstance(this,t);if(typeof t=="number"){n.to(t);return}if(typeof t=="string"){if(n[t]===void 0||t.startsWith("_")||t==="constructor")throw new TypeError(`No method named "${t}"`);n[t]()}})}}f.on(document,cl,ml,function(e){const t=g.getElementFromSelector(this);if(!t||!t.classList.contains(zs))return;e.preventDefault();const n=Ce.getOrCreateInstance(t),i=this.getAttribute("data-bs-slide-to");if(i){n.to(i),n._maybeEnableCycle();return}if(it.getDataAttribute(this,"slide")==="next"){n.next(),n._maybeEnableCycle();return}n.prev(),n._maybeEnableCycle()});f.on(window,al,()=>{const e=g.find(El);for(const t of e)Ce.getOrCreateInstance(t)});z(Ce);const Al="collapse",wl="bs.collapse",xe=`.${wl}`,Tl=".data-api",Ol=`show${xe}`,Sl=`shown${xe}`,Cl=`hide${xe}`,xl=`hidden${xe}`,Nl=`click${xe}${Tl}`,Pn="show",Yt="collapse",He="collapsing",$l="collapsed",Dl=`:scope .${Yt} .${Yt}`,Ll="collapse-horizontal",Il="width",Ml="height",Pl=".collapse.show, .collapse.collapsing",ti='[data-bs-toggle="collapse"]',Rl={parent:null,toggle:!0},kl={parent:"(null|element)",toggle:"boolean"};class Ae extends X{constructor(t,n){super(t,n),this._isTransitioning=!1,this._triggerArray=[];const i=g.find(ti);for(const r of i){const s=g.getSelectorFromElement(r),o=g.find(s).filter(a=>a===this._element);s!==null&&o.length&&this._triggerArray.push(r)}this._initializeChildren(),this._config.parent||this._addAriaAndCollapsedClass(this._triggerArray,this._isShown()),this._config.toggle&&this.toggle()}static get Default(){return Rl}static get DefaultType(){return kl}static get NAME(){return Al}toggle(){this._isShown()?this.hide():this.show()}show(){if(this._isTransitioning||this._isShown())return;let t=[];if(this._config.parent&&(t=this._getFirstLevelChildren(Pl).filter(a=>a!==this._element).map(a=>Ae.getOrCreateInstance(a,{toggle:!1}))),t.length&&t[0]._isTransitioning||f.trigger(this._element,Ol).defaultPrevented)return;for(const a of t)a.hide();const i=this._getDimension();this._element.classList.remove(Yt),this._element.classList.add(He),this._element.style[i]=0,this._addAriaAndCollapsedClass(this._triggerArray,!0),this._isTransitioning=!0;const r=()=>{this._isTransitioning=!1,this._element.classList.remove(He),this._element.classList.add(Yt,Pn),this._element.style[i]="",f.trigger(this._element,Sl)},o=`scroll${i[0].toUpperCase()+i.slice(1)}`;this._queueCallback(r,this._element,!0),this._element.style[i]=`${this._element[o]}px`}hide(){if(this._isTransitioning||!this._isShown()||f.trigger(this._element,Cl).defaultPrevented)return;const n=this._getDimension();this._element.style[n]=`${this._element.getBoundingClientRect()[n]}px`,Oe(this._element),this._element.classList.add(He),this._element.classList.remove(Yt,Pn);for(const r of this._triggerArray){const s=g.getElementFromSelector(r);s&&!this._isShown(s)&&this._addAriaAndCollapsedClass([r],!1)}this._isTransitioning=!0;const i=()=>{this._isTransitioning=!1,this._element.classList.remove(He),this._element.classList.add(Yt),f.trigger(this._element,xl)};this._element.style[n]="",this._queueCallback(i,this._element,!0)}_isShown(t=this._element){return t.classList.contains(Pn)}_configAfterMerge(t){return t.toggle=!!t.toggle,t.parent=ut(t.parent),t}_getDimension(){return this._element.classList.contains(Ll)?Il:Ml}_initializeChildren(){if(!this._config.parent)return;const t=this._getFirstLevelChildren(ti);for(const n of t){const i=g.getElementFromSelector(n);i&&this._addAriaAndCollapsedClass([n],this._isShown(i))}}_getFirstLevelChildren(t){const n=g.find(Dl,this._config.parent);return g.find(t,this._config.parent).filter(i=>!n.includes(i))}_addAriaAndCollapsedClass(t,n){if(t.length)for(const i of t)i.classList.toggle($l,!n),i.setAttribute("aria-expanded",n)}static jQueryInterface(t){const n={};return typeof t=="string"&&/show|hide/.test(t)&&(n.toggle=!1),this.each(function(){const i=Ae.getOrCreateInstance(this,n);if(typeof t=="string"){if(typeof i[t]>"u")throw new TypeError(`No method named "${t}"`);i[t]()}})}}f.on(document,Nl,ti,function(e){(e.target.tagName==="A"||e.delegateTarget&&e.delegateTarget.tagName==="A")&&e.preventDefault();for(const t of g.getMultipleElementsFromSelector(this))Ae.getOrCreateInstance(t,{toggle:!1}).toggle()});z(Ae);const Tr="dropdown",Vl="bs.dropdown",Rt=`.${Vl}`,Mi=".data-api",Hl="Escape",Or="Tab",jl="ArrowUp",Sr="ArrowDown",Fl=2,Bl=`hide${Rt}`,Wl=`hidden${Rt}`,Kl=`show${Rt}`,Yl=`shown${Rt}`,Gs=`click${Rt}${Mi}`,Xs=`keydown${Rt}${Mi}`,zl=`keyup${Rt}${Mi}`,Kt="show",Ul="dropup",ql="dropend",Gl="dropstart",Xl="dropup-center",Ql="dropdown-center",Ot='[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)',Jl=`${Ot}.${Kt}`,Qe=".dropdown-menu",Zl=".navbar",tu=".navbar-nav",eu=".dropdown-menu .dropdown-item:not(.disabled):not(:disabled)",nu=K()?"top-end":"top-start",iu=K()?"top-start":"top-end",ru=K()?"bottom-end":"bottom-start",su=K()?"bottom-start":"bottom-end",ou=K()?"left-start":"right-start",au=K()?"right-start":"left-start",cu="top",lu="bottom",uu={autoClose:!0,boundary:"clippingParents",display:"dynamic",offset:[0,2],popperConfig:null,reference:"toggle"},fu={autoClose:"(boolean|string)",boundary:"(string|element)",display:"string",offset:"(array|string|function)",popperConfig:"(null|object|function)",reference:"(string|element|object)"};class tt extends X{constructor(t,n){super(t,n),this._popper=null,this._parent=this._element.parentNode,this._menu=g.next(this._element,Qe)[0]||g.prev(this._element,Qe)[0]||g.findOne(Qe,this._parent),this._inNavbar=this._detectNavbar()}static get Default(){return uu}static get DefaultType(){return fu}static get NAME(){return Tr}toggle(){return this._isShown()?this.hide():this.show()}show(){if(ft(this._element)||this._isShown())return;const t={relatedTarget:this._element};if(!f.trigger(this._element,Kl,t).defaultPrevented){if(this._createPopper(),"ontouchstart"in document.documentElement&&!this._parent.closest(tu))for(const i of[].concat(...document.body.children))f.on(i,"mouseover",en);this._element.focus(),this._element.setAttribute("aria-expanded",!0),this._menu.classList.add(Kt),this._element.classList.add(Kt),f.trigger(this._element,Yl,t)}}hide(){if(ft(this._element)||!this._isShown())return;const t={relatedTarget:this._element};this._completeHide(t)}dispose(){this._popper&&this._popper.destroy(),super.dispose()}update(){this._inNavbar=this._detectNavbar(),this._popper&&this._popper.update()}_completeHide(t){if(!f.trigger(this._element,Bl,t).defaultPrevented){if("ontouchstart"in document.documentElement)for(const i of[].concat(...document.body.children))f.off(i,"mouseover",en);this._popper&&this._popper.destroy(),this._menu.classList.remove(Kt),this._element.classList.remove(Kt),this._element.setAttribute("aria-expanded","false"),it.removeDataAttribute(this._menu,"popper"),f.trigger(this._element,Wl,t)}}_getConfig(t){if(t=super._getConfig(t),typeof t.reference=="object"&&!nt(t.reference)&&typeof t.reference.getBoundingClientRect!="function")throw new TypeError(`${Tr.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);return t}_createPopper(){if(typeof Ls>"u")throw new TypeError("Bootstrap's dropdowns require Popper (https://popper.js.org)");let t=this._element;this._config.reference==="parent"?t=this._parent:nt(this._config.reference)?t=ut(this._config.reference):typeof this._config.reference=="object"&&(t=this._config.reference);const n=this._getPopperConfig();this._popper=Di(t,this._menu,n)}_isShown(){return this._menu.classList.contains(Kt)}_getPlacement(){const t=this._parent;if(t.classList.contains(ql))return ou;if(t.classList.contains(Gl))return au;if(t.classList.contains(Xl))return cu;if(t.classList.contains(Ql))return lu;const n=getComputedStyle(this._menu).getPropertyValue("--bs-position").trim()==="end";return t.classList.contains(Ul)?n?iu:nu:n?su:ru}_detectNavbar(){return this._element.closest(Zl)!==null}_getOffset(){const{offset:t}=this._config;return typeof t=="string"?t.split(",").map(n=>Number.parseInt(n,10)):typeof t=="function"?n=>t(n,this._element):t}_getPopperConfig(){const t={placement:this._getPlacement(),modifiers:[{name:"preventOverflow",options:{boundary:this._config.boundary}},{name:"offset",options:{offset:this._getOffset()}}]};return(this._inNavbar||this._config.display==="static")&&(it.setDataAttribute(this._menu,"popper","static"),t.modifiers=[{name:"applyStyles",enabled:!1}]),{...t,...k(this._config.popperConfig,[t])}}_selectMenuItem({key:t,target:n}){const i=g.find(eu,this._menu).filter(r=>ne(r));i.length&&Li(i,n,t===Sr,!i.includes(n)).focus()}static jQueryInterface(t){return this.each(function(){const n=tt.getOrCreateInstance(this,t);if(typeof t=="string"){if(typeof n[t]>"u")throw new TypeError(`No method named "${t}"`);n[t]()}})}static clearMenus(t){if(t.button===Fl||t.type==="keyup"&&t.key!==Or)return;const n=g.find(Jl);for(const i of n){const r=tt.getInstance(i);if(!r||r._config.autoClose===!1)continue;const s=t.composedPath(),o=s.includes(r._menu);if(s.includes(r._element)||r._config.autoClose==="inside"&&!o||r._config.autoClose==="outside"&&o||r._menu.contains(t.target)&&(t.type==="keyup"&&t.key===Or||/input|select|option|textarea|form/i.test(t.target.tagName)))continue;const a={relatedTarget:r._element};t.type==="click"&&(a.clickEvent=t),r._completeHide(a)}}static dataApiKeydownHandler(t){const n=/input|textarea/i.test(t.target.tagName),i=t.key===Hl,r=[jl,Sr].includes(t.key);if(!r&&!i||n&&!i)return;t.preventDefault();const s=this.matches(Ot)?this:g.prev(this,Ot)[0]||g.next(this,Ot)[0]||g.findOne(Ot,t.delegateTarget.parentNode),o=tt.getOrCreateInstance(s);if(r){t.stopPropagation(),o.show(),o._selectMenuItem(t);return}o._isShown()&&(t.stopPropagation(),o.hide(),s.focus())}}f.on(document,Xs,Ot,tt.dataApiKeydownHandler);f.on(document,Xs,Qe,tt.dataApiKeydownHandler);f.on(document,Gs,tt.clearMenus);f.on(document,zl,tt.clearMenus);f.on(document,Gs,Ot,function(e){e.preventDefault(),tt.getOrCreateInstance(this).toggle()});z(tt);const Qs="backdrop",du="fade",Cr="show",xr=`mousedown.bs.${Qs}`,hu={className:"modal-backdrop",clickCallback:null,isAnimated:!1,isVisible:!0,rootElement:"body"},pu={className:"string",clickCallback:"(function|null)",isAnimated:"boolean",isVisible:"boolean",rootElement:"(element|string)"};class Js extends Se{constructor(t){super(),this._config=this._getConfig(t),this._isAppended=!1,this._element=null}static get Default(){return hu}static get DefaultType(){return pu}static get NAME(){return Qs}show(t){if(!this._config.isVisible){k(t);return}this._append();const n=this._getElement();this._config.isAnimated&&Oe(n),n.classList.add(Cr),this._emulateAnimation(()=>{k(t)})}hide(t){if(!this._config.isVisible){k(t);return}this._getElement().classList.remove(Cr),this._emulateAnimation(()=>{this.dispose(),k(t)})}dispose(){this._isAppended&&(f.off(this._element,xr),this._element.remove(),this._isAppended=!1)}_getElement(){if(!this._element){const t=document.createElement("div");t.className=this._config.className,this._config.isAnimated&&t.classList.add(du),this._element=t}return this._element}_configAfterMerge(t){return t.rootElement=ut(t.rootElement),t}_append(){if(this._isAppended)return;const t=this._getElement();this._config.rootElement.append(t),f.on(t,xr,()=>{k(this._config.clickCallback)}),this._isAppended=!0}_emulateAnimation(t){ks(t,this._getElement(),this._config.isAnimated)}}const _u="focustrap",gu="bs.focustrap",rn=`.${gu}`,mu=`focusin${rn}`,Eu=`keydown.tab${rn}`,vu="Tab",bu="forward",Nr="backward",yu={autofocus:!0,trapElement:null},Au={autofocus:"boolean",trapElement:"element"};class Zs extends Se{constructor(t){super(),this._config=this._getConfig(t),this._isActive=!1,this._lastTabNavDirection=null}static get Default(){return yu}static get DefaultType(){return Au}static get NAME(){return _u}activate(){this._isActive||(this._config.autofocus&&this._config.trapElement.focus(),f.off(document,rn),f.on(document,mu,t=>this._handleFocusin(t)),f.on(document,Eu,t=>this._handleKeydown(t)),this._isActive=!0)}deactivate(){this._isActive&&(this._isActive=!1,f.off(document,rn))}_handleFocusin(t){const{trapElement:n}=this._config;if(t.target===document||t.target===n||n.contains(t.target))return;const i=g.focusableChildren(n);i.length===0?n.focus():this._lastTabNavDirection===Nr?i[i.length-1].focus():i[0].focus()}_handleKeydown(t){t.key===vu&&(this._lastTabNavDirection=t.shiftKey?Nr:bu)}}const $r=".fixed-top, .fixed-bottom, .is-fixed, .sticky-top",Dr=".sticky-top",je="padding-right",Lr="margin-right";class ei{constructor(){this._element=document.body}getWidth(){const t=document.documentElement.clientWidth;return Math.abs(window.innerWidth-t)}hide(){const t=this.getWidth();this._disableOverFlow(),this._setElementAttributes(this._element,je,n=>n+t),this._setElementAttributes($r,je,n=>n+t),this._setElementAttributes(Dr,Lr,n=>n-t)}reset(){this._resetElementAttributes(this._element,"overflow"),this._resetElementAttributes(this._element,je),this._resetElementAttributes($r,je),this._resetElementAttributes(Dr,Lr)}isOverflowing(){return this.getWidth()>0}_disableOverFlow(){this._saveInitialAttribute(this._element,"overflow"),this._element.style.overflow="hidden"}_setElementAttributes(t,n,i){const r=this.getWidth(),s=o=>{if(o!==this._element&&window.innerWidth>o.clientWidth+r)return;this._saveInitialAttribute(o,n);const a=window.getComputedStyle(o).getPropertyValue(n);o.style.setProperty(n,`${i(Number.parseFloat(a))}px`)};this._applyManipulationCallback(t,s)}_saveInitialAttribute(t,n){const i=t.style.getPropertyValue(n);i&&it.setDataAttribute(t,n,i)}_resetElementAttributes(t,n){const i=r=>{const s=it.getDataAttribute(r,n);if(s===null){r.style.removeProperty(n);return}it.removeDataAttribute(r,n),r.style.setProperty(n,s)};this._applyManipulationCallback(t,i)}_applyManipulationCallback(t,n){if(nt(t)){n(t);return}for(const i of g.find(t,this._element))n(i)}}const wu="modal",Tu="bs.modal",Y=`.${Tu}`,Ou=".data-api",Su="Escape",Cu=`hide${Y}`,xu=`hidePrevented${Y}`,to=`hidden${Y}`,eo=`show${Y}`,Nu=`shown${Y}`,$u=`resize${Y}`,Du=`click.dismiss${Y}`,Lu=`mousedown.dismiss${Y}`,Iu=`keydown.dismiss${Y}`,Mu=`click${Y}${Ou}`,Ir="modal-open",Pu="fade",Mr="show",Rn="modal-static",Ru=".modal.show",ku=".modal-dialog",Vu=".modal-body",Hu='[data-bs-toggle="modal"]',ju={backdrop:!0,focus:!0,keyboard:!0},Fu={backdrop:"(boolean|string)",focus:"boolean",keyboard:"boolean"};class Qt extends X{constructor(t,n){super(t,n),this._dialog=g.findOne(ku,this._element),this._backdrop=this._initializeBackDrop(),this._focustrap=this._initializeFocusTrap(),this._isShown=!1,this._isTransitioning=!1,this._scrollBar=new ei,this._addEventListeners()}static get Default(){return ju}static get DefaultType(){return Fu}static get NAME(){return wu}toggle(t){return this._isShown?this.hide():this.show(t)}show(t){this._isShown||this._isTransitioning||f.trigger(this._element,eo,{relatedTarget:t}).defaultPrevented||(this._isShown=!0,this._isTransitioning=!0,this._scrollBar.hide(),document.body.classList.add(Ir),this._adjustDialog(),this._backdrop.show(()=>this._showElement(t)))}hide(){!this._isShown||this._isTransitioning||f.trigger(this._element,Cu).defaultPrevented||(this._isShown=!1,this._isTransitioning=!0,this._focustrap.deactivate(),this._element.classList.remove(Mr),this._queueCallback(()=>this._hideModal(),this._element,this._isAnimated()))}dispose(){f.off(window,Y),f.off(this._dialog,Y),this._backdrop.dispose(),this._focustrap.deactivate(),super.dispose()}handleUpdate(){this._adjustDialog()}_initializeBackDrop(){return new Js({isVisible:!!this._config.backdrop,isAnimated:this._isAnimated()})}_initializeFocusTrap(){return new Zs({trapElement:this._element})}_showElement(t){document.body.contains(this._element)||document.body.append(this._element),this._element.style.display="block",this._element.removeAttribute("aria-hidden"),this._element.setAttribute("aria-modal",!0),this._element.setAttribute("role","dialog"),this._element.scrollTop=0;const n=g.findOne(Vu,this._dialog);n&&(n.scrollTop=0),Oe(this._element),this._element.classList.add(Mr);const i=()=>{this._config.focus&&this._focustrap.activate(),this._isTransitioning=!1,f.trigger(this._element,Nu,{relatedTarget:t})};this._queueCallback(i,this._dialog,this._isAnimated())}_addEventListeners(){f.on(this._element,Iu,t=>{if(t.key===Su){if(this._config.keyboard){this.hide();return}this._triggerBackdropTransition()}}),f.on(window,$u,()=>{this._isShown&&!this._isTransitioning&&this._adjustDialog()}),f.on(this._element,Lu,t=>{f.one(this._element,Du,n=>{if(!(this._element!==t.target||this._element!==n.target)){if(this._config.backdrop==="static"){this._triggerBackdropTransition();return}this._config.backdrop&&this.hide()}})})}_hideModal(){this._element.style.display="none",this._element.setAttribute("aria-hidden",!0),this._element.removeAttribute("aria-modal"),this._element.removeAttribute("role"),this._isTransitioning=!1,this._backdrop.hide(()=>{document.body.classList.remove(Ir),this._resetAdjustments(),this._scrollBar.reset(),f.trigger(this._element,to)})}_isAnimated(){return this._element.classList.contains(Pu)}_triggerBackdropTransition(){if(f.trigger(this._element,xu).defaultPrevented)return;const n=this._element.scrollHeight>document.documentElement.clientHeight,i=this._element.style.overflowY;i==="hidden"||this._element.classList.contains(Rn)||(n||(this._element.style.overflowY="hidden"),this._element.classList.add(Rn),this._queueCallback(()=>{this._element.classList.remove(Rn),this._queueCallback(()=>{this._element.style.overflowY=i},this._dialog)},this._dialog),this._element.focus())}_adjustDialog(){const t=this._element.scrollHeight>document.documentElement.clientHeight,n=this._scrollBar.getWidth(),i=n>0;if(i&&!t){const r=K()?"paddingLeft":"paddingRight";this._element.style[r]=`${n}px`}if(!i&&t){const r=K()?"paddingRight":"paddingLeft";this._element.style[r]=`${n}px`}}_resetAdjustments(){this._element.style.paddingLeft="",this._element.style.paddingRight=""}static jQueryInterface(t,n){return this.each(function(){const i=Qt.getOrCreateInstance(this,t);if(typeof t=="string"){if(typeof i[t]>"u")throw new TypeError(`No method named "${t}"`);i[t](n)}})}}f.on(document,Mu,Hu,function(e){const t=g.getElementFromSelector(this);["A","AREA"].includes(this.tagName)&&e.preventDefault(),f.one(t,eo,r=>{r.defaultPrevented||f.one(t,to,()=>{ne(this)&&this.focus()})});const n=g.findOne(Ru);n&&Qt.getInstance(n).hide(),Qt.getOrCreateInstance(t).toggle(this)});dn(Qt);z(Qt);const Bu="offcanvas",Wu="bs.offcanvas",ot=`.${Wu}`,no=".data-api",Ku=`load${ot}${no}`,Yu="Escape",Pr="show",Rr="showing",kr="hiding",zu="offcanvas-backdrop",io=".offcanvas.show",Uu=`show${ot}`,qu=`shown${ot}`,Gu=`hide${ot}`,Vr=`hidePrevented${ot}`,ro=`hidden${ot}`,Xu=`resize${ot}`,Qu=`click${ot}${no}`,Ju=`keydown.dismiss${ot}`,Zu='[data-bs-toggle="offcanvas"]',tf={backdrop:!0,keyboard:!0,scroll:!1},ef={backdrop:"(boolean|string)",keyboard:"boolean",scroll:"boolean"};class dt extends X{constructor(t,n){super(t,n),this._isShown=!1,this._backdrop=this._initializeBackDrop(),this._focustrap=this._initializeFocusTrap(),this._addEventListeners()}static get Default(){return tf}static get DefaultType(){return ef}static get NAME(){return Bu}toggle(t){return this._isShown?this.hide():this.show(t)}show(t){if(this._isShown||f.trigger(this._element,Uu,{relatedTarget:t}).defaultPrevented)return;this._isShown=!0,this._backdrop.show(),this._config.scroll||new ei().hide(),this._element.setAttribute("aria-modal",!0),this._element.setAttribute("role","dialog"),this._element.classList.add(Rr);const i=()=>{(!this._config.scroll||this._config.backdrop)&&this._focustrap.activate(),this._element.classList.add(Pr),this._element.classList.remove(Rr),f.trigger(this._element,qu,{relatedTarget:t})};this._queueCallback(i,this._element,!0)}hide(){if(!this._isShown||f.trigger(this._element,Gu).defaultPrevented)return;this._focustrap.deactivate(),this._element.blur(),this._isShown=!1,this._element.classList.add(kr),this._backdrop.hide();const n=()=>{this._element.classList.remove(Pr,kr),this._element.removeAttribute("aria-modal"),this._element.removeAttribute("role"),this._config.scroll||new ei().reset(),f.trigger(this._element,ro)};this._queueCallback(n,this._element,!0)}dispose(){this._backdrop.dispose(),this._focustrap.deactivate(),super.dispose()}_initializeBackDrop(){const t=()=>{if(this._config.backdrop==="static"){f.trigger(this._element,Vr);return}this.hide()},n=!!this._config.backdrop;return new Js({className:zu,isVisible:n,isAnimated:!0,rootElement:this._element.parentNode,clickCallback:n?t:null})}_initializeFocusTrap(){return new Zs({trapElement:this._element})}_addEventListeners(){f.on(this._element,Ju,t=>{if(t.key===Yu){if(this._config.keyboard){this.hide();return}f.trigger(this._element,Vr)}})}static jQueryInterface(t){return this.each(function(){const n=dt.getOrCreateInstance(this,t);if(typeof t=="string"){if(n[t]===void 0||t.startsWith("_")||t==="constructor")throw new TypeError(`No method named "${t}"`);n[t](this)}})}}f.on(document,Qu,Zu,function(e){const t=g.getElementFromSelector(this);if(["A","AREA"].includes(this.tagName)&&e.preventDefault(),ft(this))return;f.one(t,ro,()=>{ne(this)&&this.focus()});const n=g.findOne(io);n&&n!==t&&dt.getInstance(n).hide(),dt.getOrCreateInstance(t).toggle(this)});f.on(window,Ku,()=>{for(const e of g.find(io))dt.getOrCreateInstance(e).show()});f.on(window,Xu,()=>{for(const e of g.find("[aria-modal][class*=show][class*=offcanvas-]"))getComputedStyle(e).position!=="fixed"&&dt.getOrCreateInstance(e).hide()});dn(dt);z(dt);const nf=/^aria-[\w-]*$/i,so={"*":["class","dir","id","lang","role",nf],a:["target","href","title","rel"],area:[],b:[],br:[],col:[],code:[],dd:[],div:[],dl:[],dt:[],em:[],hr:[],h1:[],h2:[],h3:[],h4:[],h5:[],h6:[],i:[],img:["src","srcset","alt","title","width","height"],li:[],ol:[],p:[],pre:[],s:[],small:[],span:[],sub:[],sup:[],strong:[],u:[],ul:[]},rf=new Set(["background","cite","href","itemtype","longdesc","poster","src","xlink:href"]),sf=/^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i,of=(e,t)=>{const n=e.nodeName.toLowerCase();return t.includes(n)?rf.has(n)?!!sf.test(e.nodeValue):!0:t.filter(i=>i instanceof RegExp).some(i=>i.test(n))};function af(e,t,n){if(!e.length)return e;if(n&&typeof n=="function")return n(e);const r=new window.DOMParser().parseFromString(e,"text/html"),s=[].concat(...r.body.querySelectorAll("*"));for(const o of s){const a=o.nodeName.toLowerCase();if(!Object.keys(t).includes(a)){o.remove();continue}const c=[].concat(...o.attributes),u=[].concat(t["*"]||[],t[a]||[]);for(const l of c)of(l,u)||o.removeAttribute(l.nodeName)}return r.body.innerHTML}const cf="TemplateFactory",lf={allowList:so,content:{},extraClass:"",html:!1,sanitize:!0,sanitizeFn:null,template:"<div></div>"},uf={allowList:"object",content:"object",extraClass:"(string|function)",html:"boolean",sanitize:"boolean",sanitizeFn:"(null|function)",template:"string"},ff={entry:"(string|element|function|null)",selector:"(string|element)"};class df extends Se{constructor(t){super(),this._config=this._getConfig(t)}static get Default(){return lf}static get DefaultType(){return uf}static get NAME(){return cf}getContent(){return Object.values(this._config.content).map(t=>this._resolvePossibleFunction(t)).filter(Boolean)}hasContent(){return this.getContent().length>0}changeContent(t){return this._checkContent(t),this._config.content={...this._config.content,...t},this}toHtml(){const t=document.createElement("div");t.innerHTML=this._maybeSanitize(this._config.template);for(const[r,s]of Object.entries(this._config.content))this._setContent(t,s,r);const n=t.children[0],i=this._resolvePossibleFunction(this._config.extraClass);return i&&n.classList.add(...i.split(" ")),n}_typeCheckConfig(t){super._typeCheckConfig(t),this._checkContent(t.content)}_checkContent(t){for(const[n,i]of Object.entries(t))super._typeCheckConfig({selector:n,entry:i},ff)}_setContent(t,n,i){const r=g.findOne(i,t);if(r){if(n=this._resolvePossibleFunction(n),!n){r.remove();return}if(nt(n)){this._putElementInTemplate(ut(n),r);return}if(this._config.html){r.innerHTML=this._maybeSanitize(n);return}r.textContent=n}}_maybeSanitize(t){return this._config.sanitize?af(t,this._config.allowList,this._config.sanitizeFn):t}_resolvePossibleFunction(t){return k(t,[this])}_putElementInTemplate(t,n){if(this._config.html){n.innerHTML="",n.append(t);return}n.textContent=t.textContent}}const hf="tooltip",pf=new Set(["sanitize","allowList","sanitizeFn"]),kn="fade",_f="modal",Fe="show",gf=".tooltip-inner",Hr=`.${_f}`,jr="hide.bs.modal",he="hover",Vn="focus",mf="click",Ef="manual",vf="hide",bf="hidden",yf="show",Af="shown",wf="inserted",Tf="click",Of="focusin",Sf="focusout",Cf="mouseenter",xf="mouseleave",Nf={AUTO:"auto",TOP:"top",RIGHT:K()?"left":"right",BOTTOM:"bottom",LEFT:K()?"right":"left"},$f={allowList:so,animation:!0,boundary:"clippingParents",container:!1,customClass:"",delay:0,fallbackPlacements:["top","right","bottom","left"],html:!1,offset:[0,6],placement:"top",popperConfig:null,sanitize:!0,sanitizeFn:null,selector:!1,template:'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',title:"",trigger:"hover focus"},Df={allowList:"object",animation:"boolean",boundary:"(string|element)",container:"(string|element|boolean)",customClass:"(string|function)",delay:"(number|object)",fallbackPlacements:"array",html:"boolean",offset:"(array|string|function)",placement:"(string|function)",popperConfig:"(null|object|function)",sanitize:"boolean",sanitizeFn:"(null|function)",selector:"(string|boolean)",template:"string",title:"(string|element|function)",trigger:"string"};class re extends X{constructor(t,n){if(typeof Ls>"u")throw new TypeError("Bootstrap's tooltips require Popper (https://popper.js.org)");super(t,n),this._isEnabled=!0,this._timeout=0,this._isHovered=null,this._activeTrigger={},this._popper=null,this._templateFactory=null,this._newContent=null,this.tip=null,this._setListeners(),this._config.selector||this._fixTitle()}static get Default(){return $f}static get DefaultType(){return Df}static get NAME(){return hf}enable(){this._isEnabled=!0}disable(){this._isEnabled=!1}toggleEnabled(){this._isEnabled=!this._isEnabled}toggle(){if(this._isEnabled){if(this._activeTrigger.click=!this._activeTrigger.click,this._isShown()){this._leave();return}this._enter()}}dispose(){clearTimeout(this._timeout),f.off(this._element.closest(Hr),jr,this._hideModalHandler),this._element.getAttribute("data-bs-original-title")&&this._element.setAttribute("title",this._element.getAttribute("data-bs-original-title")),this._disposePopper(),super.dispose()}show(){if(this._element.style.display==="none")throw new Error("Please use show on visible elements");if(!(this._isWithContent()&&this._isEnabled))return;const t=f.trigger(this._element,this.constructor.eventName(yf)),i=(Ps(this._element)||this._element.ownerDocument.documentElement).contains(this._element);if(t.defaultPrevented||!i)return;this._disposePopper();const r=this._getTipElement();this._element.setAttribute("aria-describedby",r.getAttribute("id"));const{container:s}=this._config;if(this._element.ownerDocument.documentElement.contains(this.tip)||(s.append(r),f.trigger(this._element,this.constructor.eventName(wf))),this._popper=this._createPopper(r),r.classList.add(Fe),"ontouchstart"in document.documentElement)for(const a of[].concat(...document.body.children))f.on(a,"mouseover",en);const o=()=>{f.trigger(this._element,this.constructor.eventName(Af)),this._isHovered===!1&&this._leave(),this._isHovered=!1};this._queueCallback(o,this.tip,this._isAnimated())}hide(){if(!this._isShown()||f.trigger(this._element,this.constructor.eventName(vf)).defaultPrevented)return;if(this._getTipElement().classList.remove(Fe),"ontouchstart"in document.documentElement)for(const r of[].concat(...document.body.children))f.off(r,"mouseover",en);this._activeTrigger[mf]=!1,this._activeTrigger[Vn]=!1,this._activeTrigger[he]=!1,this._isHovered=null;const i=()=>{this._isWithActiveTrigger()||(this._isHovered||this._disposePopper(),this._element.removeAttribute("aria-describedby"),f.trigger(this._element,this.constructor.eventName(bf)))};this._queueCallback(i,this.tip,this._isAnimated())}update(){this._popper&&this._popper.update()}_isWithContent(){return!!this._getTitle()}_getTipElement(){return this.tip||(this.tip=this._createTipElement(this._newContent||this._getContentForTemplate())),this.tip}_createTipElement(t){const n=this._getTemplateFactory(t).toHtml();if(!n)return null;n.classList.remove(kn,Fe),n.classList.add(`bs-${this.constructor.NAME}-auto`);const i=gc(this.constructor.NAME).toString();return n.setAttribute("id",i),this._isAnimated()&&n.classList.add(kn),n}setContent(t){this._newContent=t,this._isShown()&&(this._disposePopper(),this.show())}_getTemplateFactory(t){return this._templateFactory?this._templateFactory.changeContent(t):this._templateFactory=new df({...this._config,content:t,extraClass:this._resolvePossibleFunction(this._config.customClass)}),this._templateFactory}_getContentForTemplate(){return{[gf]:this._getTitle()}}_getTitle(){return this._resolvePossibleFunction(this._config.title)||this._element.getAttribute("data-bs-original-title")}_initializeOnDelegatedTarget(t){return this.constructor.getOrCreateInstance(t.delegateTarget,this._getDelegateConfig())}_isAnimated(){return this._config.animation||this.tip&&this.tip.classList.contains(kn)}_isShown(){return this.tip&&this.tip.classList.contains(Fe)}_createPopper(t){const n=k(this._config.placement,[this,t,this._element]),i=Nf[n.toUpperCase()];return Di(this._element,t,this._getPopperConfig(i))}_getOffset(){const{offset:t}=this._config;return typeof t=="string"?t.split(",").map(n=>Number.parseInt(n,10)):typeof t=="function"?n=>t(n,this._element):t}_resolvePossibleFunction(t){return k(t,[this._element])}_getPopperConfig(t){const n={placement:t,modifiers:[{name:"flip",options:{fallbackPlacements:this._config.fallbackPlacements}},{name:"offset",options:{offset:this._getOffset()}},{name:"preventOverflow",options:{boundary:this._config.boundary}},{name:"arrow",options:{element:`.${this.constructor.NAME}-arrow`}},{name:"preSetPlacement",enabled:!0,phase:"beforeMain",fn:i=>{this._getTipElement().setAttribute("data-popper-placement",i.state.placement)}}]};return{...n,...k(this._config.popperConfig,[n])}}_setListeners(){const t=this._config.trigger.split(" ");for(const n of t)if(n==="click")f.on(this._element,this.constructor.eventName(Tf),this._config.selector,i=>{this._initializeOnDelegatedTarget(i).toggle()});else if(n!==Ef){const i=n===he?this.constructor.eventName(Cf):this.constructor.eventName(Of),r=n===he?this.constructor.eventName(xf):this.constructor.eventName(Sf);f.on(this._element,i,this._config.selector,s=>{const o=this._initializeOnDelegatedTarget(s);o._activeTrigger[s.type==="focusin"?Vn:he]=!0,o._enter()}),f.on(this._element,r,this._config.selector,s=>{const o=this._initializeOnDelegatedTarget(s);o._activeTrigger[s.type==="focusout"?Vn:he]=o._element.contains(s.relatedTarget),o._leave()})}this._hideModalHandler=()=>{this._element&&this.hide()},f.on(this._element.closest(Hr),jr,this._hideModalHandler)}_fixTitle(){const t=this._element.getAttribute("title");t&&(!this._element.getAttribute("aria-label")&&!this._element.textContent.trim()&&this._element.setAttribute("aria-label",t),this._element.setAttribute("data-bs-original-title",t),this._element.removeAttribute("title"))}_enter(){if(this._isShown()||this._isHovered){this._isHovered=!0;return}this._isHovered=!0,this._setTimeout(()=>{this._isHovered&&this.show()},this._config.delay.show)}_leave(){this._isWithActiveTrigger()||(this._isHovered=!1,this._setTimeout(()=>{this._isHovered||this.hide()},this._config.delay.hide))}_setTimeout(t,n){clearTimeout(this._timeout),this._timeout=setTimeout(t,n)}_isWithActiveTrigger(){return Object.values(this._activeTrigger).includes(!0)}_getConfig(t){const n=it.getDataAttributes(this._element);for(const i of Object.keys(n))pf.has(i)&&delete n[i];return t={...n,...typeof t=="object"&&t?t:{}},t=this._mergeConfigObj(t),t=this._configAfterMerge(t),this._typeCheckConfig(t),t}_configAfterMerge(t){return t.container=t.container===!1?document.body:ut(t.container),typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),typeof t.title=="number"&&(t.title=t.title.toString()),typeof t.content=="number"&&(t.content=t.content.toString()),t}_getDelegateConfig(){const t={};for(const[n,i]of Object.entries(this._config))this.constructor.Default[n]!==i&&(t[n]=i);return t.selector=!1,t.trigger="manual",t}_disposePopper(){this._popper&&(this._popper.destroy(),this._popper=null),this.tip&&(this.tip.remove(),this.tip=null)}static jQueryInterface(t){return this.each(function(){const n=re.getOrCreateInstance(this,t);if(typeof t=="string"){if(typeof n[t]>"u")throw new TypeError(`No method named "${t}"`);n[t]()}})}}z(re);const Lf="popover",If=".popover-header",Mf=".popover-body",Pf={...re.Default,content:"",offset:[0,8],placement:"right",template:'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',trigger:"click"},Rf={...re.DefaultType,content:"(null|string|element|function)"};class _n extends re{static get Default(){return Pf}static get DefaultType(){return Rf}static get NAME(){return Lf}_isWithContent(){return this._getTitle()||this._getContent()}_getContentForTemplate(){return{[If]:this._getTitle(),[Mf]:this._getContent()}}_getContent(){return this._resolvePossibleFunction(this._config.content)}static jQueryInterface(t){return this.each(function(){const n=_n.getOrCreateInstance(this,t);if(typeof t=="string"){if(typeof n[t]>"u")throw new TypeError(`No method named "${t}"`);n[t]()}})}}z(_n);const kf="scrollspy",Vf="bs.scrollspy",Pi=`.${Vf}`,Hf=".data-api",jf=`activate${Pi}`,Fr=`click${Pi}`,Ff=`load${Pi}${Hf}`,Bf="dropdown-item",Ft="active",Wf='[data-bs-spy="scroll"]',Hn="[href]",Kf=".nav, .list-group",Br=".nav-link",Yf=".nav-item",zf=".list-group-item",Uf=`${Br}, ${Yf} > ${Br}, ${zf}`,qf=".dropdown",Gf=".dropdown-toggle",Xf={offset:null,rootMargin:"0px 0px -25%",smoothScroll:!1,target:null,threshold:[.1,.5,1]},Qf={offset:"(number|null)",rootMargin:"string",smoothScroll:"boolean",target:"element",threshold:"array"};class gn extends X{constructor(t,n){super(t,n),this._targetLinks=new Map,this._observableSections=new Map,this._rootElement=getComputedStyle(this._element).overflowY==="visible"?null:this._element,this._activeTarget=null,this._observer=null,this._previousScrollData={visibleEntryTop:0,parentScrollTop:0},this.refresh()}static get Default(){return Xf}static get DefaultType(){return Qf}static get NAME(){return kf}refresh(){this._initializeTargetsAndObservables(),this._maybeEnableSmoothScroll(),this._observer?this._observer.disconnect():this._observer=this._getNewObserver();for(const t of this._observableSections.values())this._observer.observe(t)}dispose(){this._observer.disconnect(),super.dispose()}_configAfterMerge(t){return t.target=ut(t.target)||document.body,t.rootMargin=t.offset?`${t.offset}px 0px -30%`:t.rootMargin,typeof t.threshold=="string"&&(t.threshold=t.threshold.split(",").map(n=>Number.parseFloat(n))),t}_maybeEnableSmoothScroll(){this._config.smoothScroll&&(f.off(this._config.target,Fr),f.on(this._config.target,Fr,Hn,t=>{const n=this._observableSections.get(t.target.hash);if(n){t.preventDefault();const i=this._rootElement||window,r=n.offsetTop-this._element.offsetTop;if(i.scrollTo){i.scrollTo({top:r,behavior:"smooth"});return}i.scrollTop=r}}))}_getNewObserver(){const t={root:this._rootElement,threshold:this._config.threshold,rootMargin:this._config.rootMargin};return new IntersectionObserver(n=>this._observerCallback(n),t)}_observerCallback(t){const n=o=>this._targetLinks.get(`#${o.target.id}`),i=o=>{this._previousScrollData.visibleEntryTop=o.target.offsetTop,this._process(n(o))},r=(this._rootElement||document.documentElement).scrollTop,s=r>=this._previousScrollData.parentScrollTop;this._previousScrollData.parentScrollTop=r;for(const o of t){if(!o.isIntersecting){this._activeTarget=null,this._clearActiveClass(n(o));continue}const a=o.target.offsetTop>=this._previousScrollData.visibleEntryTop;if(s&&a){if(i(o),!r)return;continue}!s&&!a&&i(o)}}_initializeTargetsAndObservables(){this._targetLinks=new Map,this._observableSections=new Map;const t=g.find(Hn,this._config.target);for(const n of t){if(!n.hash||ft(n))continue;const i=g.findOne(decodeURI(n.hash),this._element);ne(i)&&(this._targetLinks.set(decodeURI(n.hash),n),this._observableSections.set(n.hash,i))}}_process(t){this._activeTarget!==t&&(this._clearActiveClass(this._config.target),this._activeTarget=t,t.classList.add(Ft),this._activateParents(t),f.trigger(this._element,jf,{relatedTarget:t}))}_activateParents(t){if(t.classList.contains(Bf)){g.findOne(Gf,t.closest(qf)).classList.add(Ft);return}for(const n of g.parents(t,Kf))for(const i of g.prev(n,Uf))i.classList.add(Ft)}_clearActiveClass(t){t.classList.remove(Ft);const n=g.find(`${Hn}.${Ft}`,t);for(const i of n)i.classList.remove(Ft)}static jQueryInterface(t){return this.each(function(){const n=gn.getOrCreateInstance(this,t);if(typeof t=="string"){if(n[t]===void 0||t.startsWith("_")||t==="constructor")throw new TypeError(`No method named "${t}"`);n[t]()}})}}f.on(window,Ff,()=>{for(const e of g.find(Wf))gn.getOrCreateInstance(e)});z(gn);const Jf="tab",Zf="bs.tab",kt=`.${Zf}`,td=`hide${kt}`,ed=`hidden${kt}`,nd=`show${kt}`,id=`shown${kt}`,rd=`click${kt}`,sd=`keydown${kt}`,od=`load${kt}`,ad="ArrowLeft",Wr="ArrowRight",cd="ArrowUp",Kr="ArrowDown",jn="Home",Yr="End",St="active",zr="fade",Fn="show",ld="dropdown",oo=".dropdown-toggle",ud=".dropdown-menu",Bn=`:not(${oo})`,fd='.list-group, .nav, [role="tablist"]',dd=".nav-item, .list-group-item",hd=`.nav-link${Bn}, .list-group-item${Bn}, [role="tab"]${Bn}`,ao='[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]',Wn=`${hd}, ${ao}`,pd=`.${St}[data-bs-toggle="tab"], .${St}[data-bs-toggle="pill"], .${St}[data-bs-toggle="list"]`;class Jt extends X{constructor(t){super(t),this._parent=this._element.closest(fd),this._parent&&(this._setInitialAttributes(this._parent,this._getChildren()),f.on(this._element,sd,n=>this._keydown(n)))}static get NAME(){return Jf}show(){const t=this._element;if(this._elemIsActive(t))return;const n=this._getActiveElem(),i=n?f.trigger(n,td,{relatedTarget:t}):null;f.trigger(t,nd,{relatedTarget:n}).defaultPrevented||i&&i.defaultPrevented||(this._deactivate(n,t),this._activate(t,n))}_activate(t,n){if(!t)return;t.classList.add(St),this._activate(g.getElementFromSelector(t));const i=()=>{if(t.getAttribute("role")!=="tab"){t.classList.add(Fn);return}t.removeAttribute("tabindex"),t.setAttribute("aria-selected",!0),this._toggleDropDown(t,!0),f.trigger(t,id,{relatedTarget:n})};this._queueCallback(i,t,t.classList.contains(zr))}_deactivate(t,n){if(!t)return;t.classList.remove(St),t.blur(),this._deactivate(g.getElementFromSelector(t));const i=()=>{if(t.getAttribute("role")!=="tab"){t.classList.remove(Fn);return}t.setAttribute("aria-selected",!1),t.setAttribute("tabindex","-1"),this._toggleDropDown(t,!1),f.trigger(t,ed,{relatedTarget:n})};this._queueCallback(i,t,t.classList.contains(zr))}_keydown(t){if(![ad,Wr,cd,Kr,jn,Yr].includes(t.key))return;t.stopPropagation(),t.preventDefault();const n=this._getChildren().filter(r=>!ft(r));let i;if([jn,Yr].includes(t.key))i=n[t.key===jn?0:n.length-1];else{const r=[Wr,Kr].includes(t.key);i=Li(n,t.target,r,!0)}i&&(i.focus({preventScroll:!0}),Jt.getOrCreateInstance(i).show())}_getChildren(){return g.find(Wn,this._parent)}_getActiveElem(){return this._getChildren().find(t=>this._elemIsActive(t))||null}_setInitialAttributes(t,n){this._setAttributeIfNotExists(t,"role","tablist");for(const i of n)this._setInitialAttributesOnChild(i)}_setInitialAttributesOnChild(t){t=this._getInnerElement(t);const n=this._elemIsActive(t),i=this._getOuterElement(t);t.setAttribute("aria-selected",n),i!==t&&this._setAttributeIfNotExists(i,"role","presentation"),n||t.setAttribute("tabindex","-1"),this._setAttributeIfNotExists(t,"role","tab"),this._setInitialAttributesOnTargetPanel(t)}_setInitialAttributesOnTargetPanel(t){const n=g.getElementFromSelector(t);n&&(this._setAttributeIfNotExists(n,"role","tabpanel"),t.id&&this._setAttributeIfNotExists(n,"aria-labelledby",`${t.id}`))}_toggleDropDown(t,n){const i=this._getOuterElement(t);if(!i.classList.contains(ld))return;const r=(s,o)=>{const a=g.findOne(s,i);a&&a.classList.toggle(o,n)};r(oo,St),r(ud,Fn),i.setAttribute("aria-expanded",n)}_setAttributeIfNotExists(t,n,i){t.hasAttribute(n)||t.setAttribute(n,i)}_elemIsActive(t){return t.classList.contains(St)}_getInnerElement(t){return t.matches(Wn)?t:g.findOne(Wn,t)}_getOuterElement(t){return t.closest(dd)||t}static jQueryInterface(t){return this.each(function(){const n=Jt.getOrCreateInstance(this);if(typeof t=="string"){if(n[t]===void 0||t.startsWith("_")||t==="constructor")throw new TypeError(`No method named "${t}"`);n[t]()}})}}f.on(document,rd,ao,function(e){["A","AREA"].includes(this.tagName)&&e.preventDefault(),!ft(this)&&Jt.getOrCreateInstance(this).show()});f.on(window,od,()=>{for(const e of g.find(pd))Jt.getOrCreateInstance(e)});z(Jt);const _d="toast",gd="bs.toast",mt=`.${gd}`,md=`mouseover${mt}`,Ed=`mouseout${mt}`,vd=`focusin${mt}`,bd=`focusout${mt}`,yd=`hide${mt}`,Ad=`hidden${mt}`,wd=`show${mt}`,Td=`shown${mt}`,Od="fade",Ur="hide",Be="show",We="showing",Sd={animation:"boolean",autohide:"boolean",delay:"number"},Cd={animation:!0,autohide:!0,delay:5e3};class mn extends X{constructor(t,n){super(t,n),this._timeout=null,this._hasMouseInteraction=!1,this._hasKeyboardInteraction=!1,this._setListeners()}static get Default(){return Cd}static get DefaultType(){return Sd}static get NAME(){return _d}show(){if(f.trigger(this._element,wd).defaultPrevented)return;this._clearTimeout(),this._config.animation&&this._element.classList.add(Od);const n=()=>{this._element.classList.remove(We),f.trigger(this._element,Td),this._maybeScheduleHide()};this._element.classList.remove(Ur),Oe(this._element),this._element.classList.add(Be,We),this._queueCallback(n,this._element,this._config.animation)}hide(){if(!this.isShown()||f.trigger(this._element,yd).defaultPrevented)return;const n=()=>{this._element.classList.add(Ur),this._element.classList.remove(We,Be),f.trigger(this._element,Ad)};this._element.classList.add(We),this._queueCallback(n,this._element,this._config.animation)}dispose(){this._clearTimeout(),this.isShown()&&this._element.classList.remove(Be),super.dispose()}isShown(){return this._element.classList.contains(Be)}_maybeScheduleHide(){this._config.autohide&&(this._hasMouseInteraction||this._hasKeyboardInteraction||(this._timeout=setTimeout(()=>{this.hide()},this._config.delay)))}_onInteraction(t,n){switch(t.type){case"mouseover":case"mouseout":{this._hasMouseInteraction=n;break}case"focusin":case"focusout":{this._hasKeyboardInteraction=n;break}}if(n){this._clearTimeout();return}const i=t.relatedTarget;this._element===i||this._element.contains(i)||this._maybeScheduleHide()}_setListeners(){f.on(this._element,md,t=>this._onInteraction(t,!0)),f.on(this._element,Ed,t=>this._onInteraction(t,!1)),f.on(this._element,vd,t=>this._onInteraction(t,!0)),f.on(this._element,bd,t=>this._onInteraction(t,!1))}_clearTimeout(){clearTimeout(this._timeout),this._timeout=null}static jQueryInterface(t){return this.each(function(){const n=mn.getOrCreateInstance(this,t);if(typeof t=="string"){if(typeof n[t]>"u")throw new TypeError(`No method named "${t}"`);n[t](this)}})}}dn(mn);z(mn);var ni=!1,ii=!1,Nt=[],ri=-1;function xd(e){Nd(e)}function Nd(e){Nt.includes(e)||Nt.push(e),Dd()}function $d(e){let t=Nt.indexOf(e);t!==-1&&t>ri&&Nt.splice(t,1)}function Dd(){!ii&&!ni&&(ni=!0,queueMicrotask(Ld))}function Ld(){ni=!1,ii=!0;for(let e=0;e<Nt.length;e++)Nt[e](),ri=e;Nt.length=0,ri=-1,ii=!1}var se,Vt,oe,co,si=!0;function Id(e){si=!1,e(),si=!0}function Md(e){se=e.reactive,oe=e.release,Vt=t=>e.effect(t,{scheduler:n=>{si?xd(n):n()}}),co=e.raw}function qr(e){Vt=e}function Pd(e){let t=()=>{};return[i=>{let r=Vt(i);return e._x_effects||(e._x_effects=new Set,e._x_runEffects=()=>{e._x_effects.forEach(s=>s())}),e._x_effects.add(r),t=()=>{r!==void 0&&(e._x_effects.delete(r),oe(r))},r},()=>{t()}]}function lo(e,t){let n=!0,i,r=Vt(()=>{let s=e();JSON.stringify(s),n?i=s:queueMicrotask(()=>{t(s,i),i=s}),n=!1});return()=>oe(r)}var uo=[],fo=[],ho=[];function Rd(e){ho.push(e)}function Ri(e,t){typeof t=="function"?(e._x_cleanups||(e._x_cleanups=[]),e._x_cleanups.push(t)):(t=e,fo.push(t))}function po(e){uo.push(e)}function _o(e,t,n){e._x_attributeCleanups||(e._x_attributeCleanups={}),e._x_attributeCleanups[t]||(e._x_attributeCleanups[t]=[]),e._x_attributeCleanups[t].push(n)}function go(e,t){e._x_attributeCleanups&&Object.entries(e._x_attributeCleanups).forEach(([n,i])=>{(t===void 0||t.includes(n))&&(i.forEach(r=>r()),delete e._x_attributeCleanups[n])})}function kd(e){var t,n;for((t=e._x_effects)==null||t.forEach($d);(n=e._x_cleanups)!=null&&n.length;)e._x_cleanups.pop()()}var ki=new MutationObserver(Fi),Vi=!1;function Hi(){ki.observe(document,{subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0}),Vi=!0}function mo(){Vd(),ki.disconnect(),Vi=!1}var pe=[];function Vd(){let e=ki.takeRecords();pe.push(()=>e.length>0&&Fi(e));let t=pe.length;queueMicrotask(()=>{if(pe.length===t)for(;pe.length>0;)pe.shift()()})}function C(e){if(!Vi)return e();mo();let t=e();return Hi(),t}var ji=!1,sn=[];function Hd(){ji=!0}function jd(){ji=!1,Fi(sn),sn=[]}function Fi(e){if(ji){sn=sn.concat(e);return}let t=[],n=new Set,i=new Map,r=new Map;for(let s=0;s<e.length;s++)if(!e[s].target._x_ignoreMutationObserver&&(e[s].type==="childList"&&(e[s].removedNodes.forEach(o=>{o.nodeType===1&&o._x_marker&&n.add(o)}),e[s].addedNodes.forEach(o=>{if(o.nodeType===1){if(n.has(o)){n.delete(o);return}o._x_marker||t.push(o)}})),e[s].type==="attributes")){let o=e[s].target,a=e[s].attributeName,c=e[s].oldValue,u=()=>{i.has(o)||i.set(o,[]),i.get(o).push({name:a,value:o.getAttribute(a)})},l=()=>{r.has(o)||r.set(o,[]),r.get(o).push(a)};o.hasAttribute(a)&&c===null?u():o.hasAttribute(a)?(l(),u()):l()}r.forEach((s,o)=>{go(o,s)}),i.forEach((s,o)=>{uo.forEach(a=>a(o,s))});for(let s of n)t.some(o=>o.contains(s))||fo.forEach(o=>o(s));for(let s of t)s.isConnected&&ho.forEach(o=>o(s));t=null,n=null,i=null,r=null}function Eo(e){return $e(Zt(e))}function Ne(e,t,n){return e._x_dataStack=[t,...Zt(n||e)],()=>{e._x_dataStack=e._x_dataStack.filter(i=>i!==t)}}function Zt(e){return e._x_dataStack?e._x_dataStack:typeof ShadowRoot=="function"&&e instanceof ShadowRoot?Zt(e.host):e.parentNode?Zt(e.parentNode):[]}function $e(e){return new Proxy({objects:e},Fd)}var Fd={ownKeys({objects:e}){return Array.from(new Set(e.flatMap(t=>Object.keys(t))))},has({objects:e},t){return t==Symbol.unscopables?!1:e.some(n=>Object.prototype.hasOwnProperty.call(n,t)||Reflect.has(n,t))},get({objects:e},t,n){return t=="toJSON"?Bd:Reflect.get(e.find(i=>Reflect.has(i,t))||{},t,n)},set({objects:e},t,n,i){const r=e.find(o=>Object.prototype.hasOwnProperty.call(o,t))||e[e.length-1],s=Object.getOwnPropertyDescriptor(r,t);return s!=null&&s.set&&(s!=null&&s.get)?s.set.call(i,n)||!0:Reflect.set(r,t,n)}};function Bd(){return Reflect.ownKeys(this).reduce((t,n)=>(t[n]=Reflect.get(this,n),t),{})}function vo(e){let t=i=>typeof i=="object"&&!Array.isArray(i)&&i!==null,n=(i,r="")=>{Object.entries(Object.getOwnPropertyDescriptors(i)).forEach(([s,{value:o,enumerable:a}])=>{if(a===!1||o===void 0||typeof o=="object"&&o!==null&&o.__v_skip)return;let c=r===""?s:`${r}.${s}`;typeof o=="object"&&o!==null&&o._x_interceptor?i[s]=o.initialize(e,c,s):t(o)&&o!==i&&!(o instanceof Element)&&n(o,c)})};return n(e)}function bo(e,t=()=>{}){let n={initialValue:void 0,_x_interceptor:!0,initialize(i,r,s){return e(this.initialValue,()=>Wd(i,r),o=>oi(i,r,o),r,s)}};return t(n),i=>{if(typeof i=="object"&&i!==null&&i._x_interceptor){let r=n.initialize.bind(n);n.initialize=(s,o,a)=>{let c=i.initialize(s,o,a);return n.initialValue=c,r(s,o,a)}}else n.initialValue=i;return n}}function Wd(e,t){return t.split(".").reduce((n,i)=>n[i],e)}function oi(e,t,n){if(typeof t=="string"&&(t=t.split(".")),t.length===1)e[t[0]]=n;else{if(t.length===0)throw error;return e[t[0]]||(e[t[0]]={}),oi(e[t[0]],t.slice(1),n)}}var yo={};function Q(e,t){yo[e]=t}function ai(e,t){let n=Kd(t);return Object.entries(yo).forEach(([i,r])=>{Object.defineProperty(e,`$${i}`,{get(){return r(t,n)},enumerable:!1})}),e}function Kd(e){let[t,n]=Co(e),i={interceptor:bo,...t};return Ri(e,n),i}function Yd(e,t,n,...i){try{return n(...i)}catch(r){we(r,e,t)}}function we(e,t,n=void 0){e=Object.assign(e??{message:"No error message given."},{el:t,expression:n}),console.warn(`Alpine Expression Error: ${e.message}
+
+${n?'Expression: "'+n+`"
+
+`:""}`,t),setTimeout(()=>{throw e},0)}var Je=!0;function Ao(e){let t=Je;Je=!1;let n=e();return Je=t,n}function $t(e,t,n={}){let i;return R(e,t)(r=>i=r,n),i}function R(...e){return wo(...e)}var wo=To;function zd(e){wo=e}function To(e,t){let n={};ai(n,e);let i=[n,...Zt(e)],r=typeof t=="function"?Ud(i,t):Gd(i,t,e);return Yd.bind(null,e,t,r)}function Ud(e,t){return(n=()=>{},{scope:i={},params:r=[]}={})=>{let s=t.apply($e([i,...e]),r);on(n,s)}}var Kn={};function qd(e,t){if(Kn[e])return Kn[e];let n=Object.getPrototypeOf(async function(){}).constructor,i=/^[\n\s]*if.*\(.*\)/.test(e.trim())||/^(let|const)\s/.test(e.trim())?`(async()=>{ ${e} })()`:e,s=(()=>{try{let o=new n(["__self","scope"],`with (scope) { __self.result = ${i} }; __self.finished = true; return __self.result;`);return Object.defineProperty(o,"name",{value:`[Alpine] ${e}`}),o}catch(o){return we(o,t,e),Promise.resolve()}})();return Kn[e]=s,s}function Gd(e,t,n){let i=qd(t,n);return(r=()=>{},{scope:s={},params:o=[]}={})=>{i.result=void 0,i.finished=!1;let a=$e([s,...e]);if(typeof i=="function"){let c=i(i,a).catch(u=>we(u,n,t));i.finished?(on(r,i.result,a,o,n),i.result=void 0):c.then(u=>{on(r,u,a,o,n)}).catch(u=>we(u,n,t)).finally(()=>i.result=void 0)}}}function on(e,t,n,i,r){if(Je&&typeof t=="function"){let s=t.apply(n,i);s instanceof Promise?s.then(o=>on(e,o,n,i)).catch(o=>we(o,r,t)):e(s)}else typeof t=="object"&&t instanceof Promise?t.then(s=>e(s)):e(t)}var Bi="x-";function ae(e=""){return Bi+e}function Xd(e){Bi=e}var an={};function $(e,t){return an[e]=t,{before(n){if(!an[n]){console.warn(String.raw`Cannot find directive \`${n}\`. \`${e}\` will use the default order of execution`);return}const i=Ct.indexOf(n);Ct.splice(i>=0?i:Ct.indexOf("DEFAULT"),0,e)}}}function Qd(e){return Object.keys(an).includes(e)}function Wi(e,t,n){if(t=Array.from(t),e._x_virtualDirectives){let s=Object.entries(e._x_virtualDirectives).map(([a,c])=>({name:a,value:c})),o=Oo(s);s=s.map(a=>o.find(c=>c.name===a.name)?{name:`x-bind:${a.name}`,value:`"${a.value}"`}:a),t=t.concat(s)}let i={};return t.map($o((s,o)=>i[s]=o)).filter(Lo).map(th(i,n)).sort(eh).map(s=>Zd(e,s))}function Oo(e){return Array.from(e).map($o()).filter(t=>!Lo(t))}var ci=!1,me=new Map,So=Symbol();function Jd(e){ci=!0;let t=Symbol();So=t,me.set(t,[]);let n=()=>{for(;me.get(t).length;)me.get(t).shift()();me.delete(t)},i=()=>{ci=!1,n()};e(n),i()}function Co(e){let t=[],n=a=>t.push(a),[i,r]=Pd(e);return t.push(r),[{Alpine:De,effect:i,cleanup:n,evaluateLater:R.bind(R,e),evaluate:$t.bind($t,e)},()=>t.forEach(a=>a())]}function Zd(e,t){let n=()=>{},i=an[t.type]||n,[r,s]=Co(e);_o(e,t.original,s);let o=()=>{e._x_ignore||e._x_ignoreSelf||(i.inline&&i.inline(e,t,r),i=i.bind(i,e,t,r),ci?me.get(So).push(i):i())};return o.runCleanups=s,o}var xo=(e,t)=>({name:n,value:i})=>(n.startsWith(e)&&(n=n.replace(e,t)),{name:n,value:i}),No=e=>e;function $o(e=()=>{}){return({name:t,value:n})=>{let{name:i,value:r}=Do.reduce((s,o)=>o(s),{name:t,value:n});return i!==t&&e(i,t),{name:i,value:r}}}var Do=[];function Ki(e){Do.push(e)}function Lo({name:e}){return Io().test(e)}var Io=()=>new RegExp(`^${Bi}([^:^.]+)\\b`);function th(e,t){return({name:n,value:i})=>{let r=n.match(Io()),s=n.match(/:([a-zA-Z0-9\-_:]+)/),o=n.match(/\.[^.\]]+(?=[^\]]*$)/g)||[],a=t||e[n]||n;return{type:r?r[1]:null,value:s?s[1]:null,modifiers:o.map(c=>c.replace(".","")),expression:i,original:a}}}var li="DEFAULT",Ct=["ignore","ref","data","id","anchor","bind","init","for","model","modelable","transition","show","if",li,"teleport"];function eh(e,t){let n=Ct.indexOf(e.type)===-1?li:e.type,i=Ct.indexOf(t.type)===-1?li:t.type;return Ct.indexOf(n)-Ct.indexOf(i)}function be(e,t,n={}){e.dispatchEvent(new CustomEvent(t,{detail:n,bubbles:!0,composed:!0,cancelable:!0}))}function Pt(e,t){if(typeof ShadowRoot=="function"&&e instanceof ShadowRoot){Array.from(e.children).forEach(r=>Pt(r,t));return}let n=!1;if(t(e,()=>n=!0),n)return;let i=e.firstElementChild;for(;i;)Pt(i,t),i=i.nextElementSibling}function B(e,...t){console.warn(`Alpine Warning: ${e}`,...t)}var Gr=!1;function nh(){Gr&&B("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems."),Gr=!0,document.body||B("Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine's `<script>` tag?"),be(document,"alpine:init"),be(document,"alpine:initializing"),Hi(),Rd(t=>st(t,Pt)),Ri(t=>le(t)),po((t,n)=>{Wi(t,n).forEach(i=>i())});let e=t=>!En(t.parentElement,!0);Array.from(document.querySelectorAll(Ro().join(","))).filter(e).forEach(t=>{st(t)}),be(document,"alpine:initialized"),setTimeout(()=>{oh()})}var Yi=[],Mo=[];function Po(){return Yi.map(e=>e())}function Ro(){return Yi.concat(Mo).map(e=>e())}function ko(e){Yi.push(e)}function Vo(e){Mo.push(e)}function En(e,t=!1){return ce(e,n=>{if((t?Ro():Po()).some(r=>n.matches(r)))return!0})}function ce(e,t){if(e){if(t(e))return e;if(e._x_teleportBack&&(e=e._x_teleportBack),!!e.parentElement)return ce(e.parentElement,t)}}function ih(e){return Po().some(t=>e.matches(t))}var Ho=[];function rh(e){Ho.push(e)}var sh=1;function st(e,t=Pt,n=()=>{}){ce(e,i=>i._x_ignore)||Jd(()=>{t(e,(i,r)=>{i._x_marker||(n(i,r),Ho.forEach(s=>s(i,r)),Wi(i,i.attributes).forEach(s=>s()),i._x_ignore||(i._x_marker=sh++),i._x_ignore&&r())})})}function le(e,t=Pt){t(e,n=>{kd(n),go(n),delete n._x_marker})}function oh(){[["ui","dialog",["[x-dialog], [x-popover]"]],["anchor","anchor",["[x-anchor]"]],["sort","sort",["[x-sort]"]]].forEach(([t,n,i])=>{Qd(n)||i.some(r=>{if(document.querySelector(r))return B(`found "${r}", but missing ${t} plugin`),!0})})}var ui=[],zi=!1;function Ui(e=()=>{}){return queueMicrotask(()=>{zi||setTimeout(()=>{fi()})}),new Promise(t=>{ui.push(()=>{e(),t()})})}function fi(){for(zi=!1;ui.length;)ui.shift()()}function ah(){zi=!0}function qi(e,t){return Array.isArray(t)?Xr(e,t.join(" ")):typeof t=="object"&&t!==null?ch(e,t):typeof t=="function"?qi(e,t()):Xr(e,t)}function Xr(e,t){let n=r=>r.split(" ").filter(s=>!e.classList.contains(s)).filter(Boolean),i=r=>(e.classList.add(...r),()=>{e.classList.remove(...r)});return t=t===!0?t="":t||"",i(n(t))}function ch(e,t){let n=a=>a.split(" ").filter(Boolean),i=Object.entries(t).flatMap(([a,c])=>c?n(a):!1).filter(Boolean),r=Object.entries(t).flatMap(([a,c])=>c?!1:n(a)).filter(Boolean),s=[],o=[];return r.forEach(a=>{e.classList.contains(a)&&(e.classList.remove(a),o.push(a))}),i.forEach(a=>{e.classList.contains(a)||(e.classList.add(a),s.push(a))}),()=>{o.forEach(a=>e.classList.add(a)),s.forEach(a=>e.classList.remove(a))}}function vn(e,t){return typeof t=="object"&&t!==null?lh(e,t):uh(e,t)}function lh(e,t){let n={};return Object.entries(t).forEach(([i,r])=>{n[i]=e.style[i],i.startsWith("--")||(i=fh(i)),e.style.setProperty(i,r)}),setTimeout(()=>{e.style.length===0&&e.removeAttribute("style")}),()=>{vn(e,n)}}function uh(e,t){let n=e.getAttribute("style",t);return e.setAttribute("style",t),()=>{e.setAttribute("style",n||"")}}function fh(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function di(e,t=()=>{}){let n=!1;return function(){n?t.apply(this,arguments):(n=!0,e.apply(this,arguments))}}$("transition",(e,{value:t,modifiers:n,expression:i},{evaluate:r})=>{typeof i=="function"&&(i=r(i)),i!==!1&&(!i||typeof i=="boolean"?hh(e,n,t):dh(e,i,t))});function dh(e,t,n){jo(e,qi,""),{enter:r=>{e._x_transition.enter.during=r},"enter-start":r=>{e._x_transition.enter.start=r},"enter-end":r=>{e._x_transition.enter.end=r},leave:r=>{e._x_transition.leave.during=r},"leave-start":r=>{e._x_transition.leave.start=r},"leave-end":r=>{e._x_transition.leave.end=r}}[n](t)}function hh(e,t,n){jo(e,vn);let i=!t.includes("in")&&!t.includes("out")&&!n,r=i||t.includes("in")||["enter"].includes(n),s=i||t.includes("out")||["leave"].includes(n);t.includes("in")&&!i&&(t=t.filter((m,b)=>b<t.indexOf("out"))),t.includes("out")&&!i&&(t=t.filter((m,b)=>b>t.indexOf("out")));let o=!t.includes("opacity")&&!t.includes("scale"),a=o||t.includes("opacity"),c=o||t.includes("scale"),u=a?0:1,l=c?_e(t,"scale",95)/100:1,h=_e(t,"delay",0)/1e3,p=_e(t,"origin","center"),_="opacity, transform",A=_e(t,"duration",150)/1e3,v=_e(t,"duration",75)/1e3,d="cubic-bezier(0.4, 0.0, 0.2, 1)";r&&(e._x_transition.enter.during={transformOrigin:p,transitionDelay:`${h}s`,transitionProperty:_,transitionDuration:`${A}s`,transitionTimingFunction:d},e._x_transition.enter.start={opacity:u,transform:`scale(${l})`},e._x_transition.enter.end={opacity:1,transform:"scale(1)"}),s&&(e._x_transition.leave.during={transformOrigin:p,transitionDelay:`${h}s`,transitionProperty:_,transitionDuration:`${v}s`,transitionTimingFunction:d},e._x_transition.leave.start={opacity:1,transform:"scale(1)"},e._x_transition.leave.end={opacity:u,transform:`scale(${l})`})}function jo(e,t,n={}){e._x_transition||(e._x_transition={enter:{during:n,start:n,end:n},leave:{during:n,start:n,end:n},in(i=()=>{},r=()=>{}){hi(e,t,{during:this.enter.during,start:this.enter.start,end:this.enter.end},i,r)},out(i=()=>{},r=()=>{}){hi(e,t,{during:this.leave.during,start:this.leave.start,end:this.leave.end},i,r)}})}window.Element.prototype._x_toggleAndCascadeWithTransitions=function(e,t,n,i){const r=document.visibilityState==="visible"?requestAnimationFrame:setTimeout;let s=()=>r(n);if(t){e._x_transition&&(e._x_transition.enter||e._x_transition.leave)?e._x_transition.enter&&(Object.entries(e._x_transition.enter.during).length||Object.entries(e._x_transition.enter.start).length||Object.entries(e._x_transition.enter.end).length)?e._x_transition.in(n):s():e._x_transition?e._x_transition.in(n):s();return}e._x_hidePromise=e._x_transition?new Promise((o,a)=>{e._x_transition.out(()=>{},()=>o(i)),e._x_transitioning&&e._x_transitioning.beforeCancel(()=>a({isFromCancelledTransition:!0}))}):Promise.resolve(i),queueMicrotask(()=>{let o=Fo(e);o?(o._x_hideChildren||(o._x_hideChildren=[]),o._x_hideChildren.push(e)):r(()=>{let a=c=>{let u=Promise.all([c._x_hidePromise,...(c._x_hideChildren||[]).map(a)]).then(([l])=>l==null?void 0:l());return delete c._x_hidePromise,delete c._x_hideChildren,u};a(e).catch(c=>{if(!c.isFromCancelledTransition)throw c})})})};function Fo(e){let t=e.parentNode;if(t)return t._x_hidePromise?t:Fo(t)}function hi(e,t,{during:n,start:i,end:r}={},s=()=>{},o=()=>{}){if(e._x_transitioning&&e._x_transitioning.cancel(),Object.keys(n).length===0&&Object.keys(i).length===0&&Object.keys(r).length===0){s(),o();return}let a,c,u;ph(e,{start(){a=t(e,i)},during(){c=t(e,n)},before:s,end(){a(),u=t(e,r)},after:o,cleanup(){c(),u()}})}function ph(e,t){let n,i,r,s=di(()=>{C(()=>{n=!0,i||t.before(),r||(t.end(),fi()),t.after(),e.isConnected&&t.cleanup(),delete e._x_transitioning})});e._x_transitioning={beforeCancels:[],beforeCancel(o){this.beforeCancels.push(o)},cancel:di(function(){for(;this.beforeCancels.length;)this.beforeCancels.shift()();s()}),finish:s},C(()=>{t.start(),t.during()}),ah(),requestAnimationFrame(()=>{if(n)return;let o=Number(getComputedStyle(e).transitionDuration.replace(/,.*/,"").replace("s",""))*1e3,a=Number(getComputedStyle(e).transitionDelay.replace(/,.*/,"").replace("s",""))*1e3;o===0&&(o=Number(getComputedStyle(e).animationDuration.replace("s",""))*1e3),C(()=>{t.before()}),i=!0,requestAnimationFrame(()=>{n||(C(()=>{t.end()}),fi(),setTimeout(e._x_transitioning.finish,o+a),r=!0)})})}function _e(e,t,n){if(e.indexOf(t)===-1)return n;const i=e[e.indexOf(t)+1];if(!i||t==="scale"&&isNaN(i))return n;if(t==="duration"||t==="delay"){let r=i.match(/([0-9]+)ms/);if(r)return r[1]}return t==="origin"&&["top","right","left","center","bottom"].includes(e[e.indexOf(t)+2])?[i,e[e.indexOf(t)+2]].join(" "):i}var ht=!1;function Et(e,t=()=>{}){return(...n)=>ht?t(...n):e(...n)}function _h(e){return(...t)=>ht&&e(...t)}var Bo=[];function bn(e){Bo.push(e)}function gh(e,t){Bo.forEach(n=>n(e,t)),ht=!0,Wo(()=>{st(t,(n,i)=>{i(n,()=>{})})}),ht=!1}var pi=!1;function mh(e,t){t._x_dataStack||(t._x_dataStack=e._x_dataStack),ht=!0,pi=!0,Wo(()=>{Eh(t)}),ht=!1,pi=!1}function Eh(e){let t=!1;st(e,(i,r)=>{Pt(i,(s,o)=>{if(t&&ih(s))return o();t=!0,r(s,o)})})}function Wo(e){let t=Vt;qr((n,i)=>{let r=t(n);return oe(r),()=>{}}),e(),qr(t)}function Ko(e,t,n,i=[]){switch(e._x_bindings||(e._x_bindings=se({})),e._x_bindings[t]=n,t=i.includes("camel")?Sh(t):t,t){case"value":vh(e,n);break;case"style":yh(e,n);break;case"class":bh(e,n);break;case"selected":case"checked":Ah(e,t,n);break;default:Yo(e,t,n);break}}function vh(e,t){if(qo(e))e.attributes.value===void 0&&(e.value=t),window.fromModel&&(typeof t=="boolean"?e.checked=Ze(e.value)===t:e.checked=Qr(e.value,t));else if(Gi(e))Number.isInteger(t)?e.value=t:!Array.isArray(t)&&typeof t!="boolean"&&![null,void 0].includes(t)?e.value=String(t):Array.isArray(t)?e.checked=t.some(n=>Qr(n,e.value)):e.checked=!!t;else if(e.tagName==="SELECT")Oh(e,t);else{if(e.value===t)return;e.value=t===void 0?"":t}}function bh(e,t){e._x_undoAddedClasses&&e._x_undoAddedClasses(),e._x_undoAddedClasses=qi(e,t)}function yh(e,t){e._x_undoAddedStyles&&e._x_undoAddedStyles(),e._x_undoAddedStyles=vn(e,t)}function Ah(e,t,n){Yo(e,t,n),Th(e,t,n)}function Yo(e,t,n){[null,void 0,!1].includes(n)&&xh(t)?e.removeAttribute(t):(zo(t)&&(n=t),wh(e,t,n))}function wh(e,t,n){e.getAttribute(t)!=n&&e.setAttribute(t,n)}function Th(e,t,n){e[t]!==n&&(e[t]=n)}function Oh(e,t){const n=[].concat(t).map(i=>i+"");Array.from(e.options).forEach(i=>{i.selected=n.includes(i.value)})}function Sh(e){return e.toLowerCase().replace(/-(\w)/g,(t,n)=>n.toUpperCase())}function Qr(e,t){return e==t}function Ze(e){return[1,"1","true","on","yes",!0].includes(e)?!0:[0,"0","false","off","no",!1].includes(e)?!1:e?!!e:null}var Ch=new Set(["allowfullscreen","async","autofocus","autoplay","checked","controls","default","defer","disabled","formnovalidate","inert","ismap","itemscope","loop","multiple","muted","nomodule","novalidate","open","playsinline","readonly","required","reversed","selected","shadowrootclonable","shadowrootdelegatesfocus","shadowrootserializable"]);function zo(e){return Ch.has(e)}function xh(e){return!["aria-pressed","aria-checked","aria-expanded","aria-selected"].includes(e)}function Nh(e,t,n){return e._x_bindings&&e._x_bindings[t]!==void 0?e._x_bindings[t]:Uo(e,t,n)}function $h(e,t,n,i=!0){if(e._x_bindings&&e._x_bindings[t]!==void 0)return e._x_bindings[t];if(e._x_inlineBindings&&e._x_inlineBindings[t]!==void 0){let r=e._x_inlineBindings[t];return r.extract=i,Ao(()=>$t(e,r.expression))}return Uo(e,t,n)}function Uo(e,t,n){let i=e.getAttribute(t);return i===null?typeof n=="function"?n():n:i===""?!0:zo(t)?!![t,"true"].includes(i):i}function Gi(e){return e.type==="checkbox"||e.localName==="ui-checkbox"||e.localName==="ui-switch"}function qo(e){return e.type==="radio"||e.localName==="ui-radio"}function Go(e,t){var n;return function(){var i=this,r=arguments,s=function(){n=null,e.apply(i,r)};clearTimeout(n),n=setTimeout(s,t)}}function Xo(e,t){let n;return function(){let i=this,r=arguments;n||(e.apply(i,r),n=!0,setTimeout(()=>n=!1,t))}}function Qo({get:e,set:t},{get:n,set:i}){let r=!0,s,o=Vt(()=>{let a=e(),c=n();if(r)i(Yn(a)),r=!1;else{let u=JSON.stringify(a),l=JSON.stringify(c);u!==s?i(Yn(a)):u!==l&&t(Yn(c))}s=JSON.stringify(e()),JSON.stringify(n())});return()=>{oe(o)}}function Yn(e){return typeof e=="object"?JSON.parse(JSON.stringify(e)):e}function Dh(e){(Array.isArray(e)?e:[e]).forEach(n=>n(De))}var Tt={},Jr=!1;function Lh(e,t){if(Jr||(Tt=se(Tt),Jr=!0),t===void 0)return Tt[e];Tt[e]=t,vo(Tt[e]),typeof t=="object"&&t!==null&&t.hasOwnProperty("init")&&typeof t.init=="function"&&Tt[e].init()}function Ih(){return Tt}var Jo={};function Mh(e,t){let n=typeof t!="function"?()=>t:t;return e instanceof Element?Zo(e,n()):(Jo[e]=n,()=>{})}function Ph(e){return Object.entries(Jo).forEach(([t,n])=>{Object.defineProperty(e,t,{get(){return(...i)=>n(...i)}})}),e}function Zo(e,t,n){let i=[];for(;i.length;)i.pop()();let r=Object.entries(t).map(([o,a])=>({name:o,value:a})),s=Oo(r);return r=r.map(o=>s.find(a=>a.name===o.name)?{name:`x-bind:${o.name}`,value:`"${o.value}"`}:o),Wi(e,r,n).map(o=>{i.push(o.runCleanups),o()}),()=>{for(;i.length;)i.pop()()}}var ta={};function Rh(e,t){ta[e]=t}function kh(e,t){return Object.entries(ta).forEach(([n,i])=>{Object.defineProperty(e,n,{get(){return(...r)=>i.bind(t)(...r)},enumerable:!1})}),e}var Vh={get reactive(){return se},get release(){return oe},get effect(){return Vt},get raw(){return co},version:"3.14.8",flushAndStopDeferringMutations:jd,dontAutoEvaluateFunctions:Ao,disableEffectScheduling:Id,startObservingMutations:Hi,stopObservingMutations:mo,setReactivityEngine:Md,onAttributeRemoved:_o,onAttributesAdded:po,closestDataStack:Zt,skipDuringClone:Et,onlyDuringClone:_h,addRootSelector:ko,addInitSelector:Vo,interceptClone:bn,addScopeToNode:Ne,deferMutations:Hd,mapAttributes:Ki,evaluateLater:R,interceptInit:rh,setEvaluator:zd,mergeProxies:$e,extractProp:$h,findClosest:ce,onElRemoved:Ri,closestRoot:En,destroyTree:le,interceptor:bo,transition:hi,setStyles:vn,mutateDom:C,directive:$,entangle:Qo,throttle:Xo,debounce:Go,evaluate:$t,initTree:st,nextTick:Ui,prefixed:ae,prefix:Xd,plugin:Dh,magic:Q,store:Lh,start:nh,clone:mh,cloneNode:gh,bound:Nh,$data:Eo,watch:lo,walk:Pt,data:Rh,bind:Mh},De=Vh;function Hh(e,t){const n=Object.create(null),i=e.split(",");for(let r=0;r<i.length;r++)n[i[r]]=!0;return r=>!!n[r]}var jh=Object.freeze({}),Fh=Object.prototype.hasOwnProperty,yn=(e,t)=>Fh.call(e,t),Dt=Array.isArray,ye=e=>ea(e)==="[object Map]",Bh=e=>typeof e=="string",Xi=e=>typeof e=="symbol",An=e=>e!==null&&typeof e=="object",Wh=Object.prototype.toString,ea=e=>Wh.call(e),na=e=>ea(e).slice(8,-1),Qi=e=>Bh(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Kh=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Yh=Kh(e=>e.charAt(0).toUpperCase()+e.slice(1)),ia=(e,t)=>e!==t&&(e===e||t===t),_i=new WeakMap,ge=[],J,Lt=Symbol("iterate"),gi=Symbol("Map key iterate");function zh(e){return e&&e._isEffect===!0}function Uh(e,t=jh){zh(e)&&(e=e.raw);const n=Xh(e,t);return t.lazy||n(),n}function qh(e){e.active&&(ra(e),e.options.onStop&&e.options.onStop(),e.active=!1)}var Gh=0;function Xh(e,t){const n=function(){if(!n.active)return e();if(!ge.includes(n)){ra(n);try{return Jh(),ge.push(n),J=n,e()}finally{ge.pop(),sa(),J=ge[ge.length-1]}}};return n.id=Gh++,n.allowRecurse=!!t.allowRecurse,n._isEffect=!0,n.active=!0,n.raw=e,n.deps=[],n.options=t,n}function ra(e){const{deps:t}=e;if(t.length){for(let n=0;n<t.length;n++)t[n].delete(e);t.length=0}}var te=!0,Ji=[];function Qh(){Ji.push(te),te=!1}function Jh(){Ji.push(te),te=!0}function sa(){const e=Ji.pop();te=e===void 0?!0:e}function G(e,t,n){if(!te||J===void 0)return;let i=_i.get(e);i||_i.set(e,i=new Map);let r=i.get(n);r||i.set(n,r=new Set),r.has(J)||(r.add(J),J.deps.push(r),J.options.onTrack&&J.options.onTrack({effect:J,target:e,type:t,key:n}))}function pt(e,t,n,i,r,s){const o=_i.get(e);if(!o)return;const a=new Set,c=l=>{l&&l.forEach(h=>{(h!==J||h.allowRecurse)&&a.add(h)})};if(t==="clear")o.forEach(c);else if(n==="length"&&Dt(e))o.forEach((l,h)=>{(h==="length"||h>=i)&&c(l)});else switch(n!==void 0&&c(o.get(n)),t){case"add":Dt(e)?Qi(n)&&c(o.get("length")):(c(o.get(Lt)),ye(e)&&c(o.get(gi)));break;case"delete":Dt(e)||(c(o.get(Lt)),ye(e)&&c(o.get(gi)));break;case"set":ye(e)&&c(o.get(Lt));break}const u=l=>{l.options.onTrigger&&l.options.onTrigger({effect:l,target:e,key:n,type:t,newValue:i,oldValue:r,oldTarget:s}),l.options.scheduler?l.options.scheduler(l):l()};a.forEach(u)}var Zh=Hh("__proto__,__v_isRef,__isVue"),oa=new Set(Object.getOwnPropertyNames(Symbol).map(e=>Symbol[e]).filter(Xi)),tp=aa(),ep=aa(!0),Zr=np();function np(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const i=S(this);for(let s=0,o=this.length;s<o;s++)G(i,"get",s+"");const r=i[t](...n);return r===-1||r===!1?i[t](...n.map(S)):r}}),["push","pop","shift","unshift","splice"].forEach(t=>{e[t]=function(...n){Qh();const i=S(this)[t].apply(this,n);return sa(),i}}),e}function aa(e=!1,t=!1){return function(i,r,s){if(r==="__v_isReactive")return!e;if(r==="__v_isReadonly")return e;if(r==="__v_raw"&&s===(e?t?gp:fa:t?_p:ua).get(i))return i;const o=Dt(i);if(!e&&o&&yn(Zr,r))return Reflect.get(Zr,r,s);const a=Reflect.get(i,r,s);return(Xi(r)?oa.has(r):Zh(r))||(e||G(i,"get",r),t)?a:mi(a)?!o||!Qi(r)?a.value:a:An(a)?e?da(a):nr(a):a}}var ip=rp();function rp(e=!1){return function(n,i,r,s){let o=n[i];if(!e&&(r=S(r),o=S(o),!Dt(n)&&mi(o)&&!mi(r)))return o.value=r,!0;const a=Dt(n)&&Qi(i)?Number(i)<n.length:yn(n,i),c=Reflect.set(n,i,r,s);return n===S(s)&&(a?ia(r,o)&&pt(n,"set",i,r,o):pt(n,"add",i,r)),c}}function sp(e,t){const n=yn(e,t),i=e[t],r=Reflect.deleteProperty(e,t);return r&&n&&pt(e,"delete",t,void 0,i),r}function op(e,t){const n=Reflect.has(e,t);return(!Xi(t)||!oa.has(t))&&G(e,"has",t),n}function ap(e){return G(e,"iterate",Dt(e)?"length":Lt),Reflect.ownKeys(e)}var cp={get:tp,set:ip,deleteProperty:sp,has:op,ownKeys:ap},lp={get:ep,set(e,t){return console.warn(`Set operation on key "${String(t)}" failed: target is readonly.`,e),!0},deleteProperty(e,t){return console.warn(`Delete operation on key "${String(t)}" failed: target is readonly.`,e),!0}},Zi=e=>An(e)?nr(e):e,tr=e=>An(e)?da(e):e,er=e=>e,wn=e=>Reflect.getPrototypeOf(e);function Ke(e,t,n=!1,i=!1){e=e.__v_raw;const r=S(e),s=S(t);t!==s&&!n&&G(r,"get",t),!n&&G(r,"get",s);const{has:o}=wn(r),a=i?er:n?tr:Zi;if(o.call(r,t))return a(e.get(t));if(o.call(r,s))return a(e.get(s));e!==r&&e.get(t)}function Ye(e,t=!1){const n=this.__v_raw,i=S(n),r=S(e);return e!==r&&!t&&G(i,"has",e),!t&&G(i,"has",r),e===r?n.has(e):n.has(e)||n.has(r)}function ze(e,t=!1){return e=e.__v_raw,!t&&G(S(e),"iterate",Lt),Reflect.get(e,"size",e)}function ts(e){e=S(e);const t=S(this);return wn(t).has.call(t,e)||(t.add(e),pt(t,"add",e,e)),this}function es(e,t){t=S(t);const n=S(this),{has:i,get:r}=wn(n);let s=i.call(n,e);s?la(n,i,e):(e=S(e),s=i.call(n,e));const o=r.call(n,e);return n.set(e,t),s?ia(t,o)&&pt(n,"set",e,t,o):pt(n,"add",e,t),this}function ns(e){const t=S(this),{has:n,get:i}=wn(t);let r=n.call(t,e);r?la(t,n,e):(e=S(e),r=n.call(t,e));const s=i?i.call(t,e):void 0,o=t.delete(e);return r&&pt(t,"delete",e,void 0,s),o}function is(){const e=S(this),t=e.size!==0,n=ye(e)?new Map(e):new Set(e),i=e.clear();return t&&pt(e,"clear",void 0,void 0,n),i}function Ue(e,t){return function(i,r){const s=this,o=s.__v_raw,a=S(o),c=t?er:e?tr:Zi;return!e&&G(a,"iterate",Lt),o.forEach((u,l)=>i.call(r,c(u),c(l),s))}}function qe(e,t,n){return function(...i){const r=this.__v_raw,s=S(r),o=ye(s),a=e==="entries"||e===Symbol.iterator&&o,c=e==="keys"&&o,u=r[e](...i),l=n?er:t?tr:Zi;return!t&&G(s,"iterate",c?gi:Lt),{next(){const{value:h,done:p}=u.next();return p?{value:h,done:p}:{value:a?[l(h[0]),l(h[1])]:l(h),done:p}},[Symbol.iterator](){return this}}}}function lt(e){return function(...t){{const n=t[0]?`on key "${t[0]}" `:"";console.warn(`${Yh(e)} operation ${n}failed: target is readonly.`,S(this))}return e==="delete"?!1:this}}function up(){const e={get(s){return Ke(this,s)},get size(){return ze(this)},has:Ye,add:ts,set:es,delete:ns,clear:is,forEach:Ue(!1,!1)},t={get(s){return Ke(this,s,!1,!0)},get size(){return ze(this)},has:Ye,add:ts,set:es,delete:ns,clear:is,forEach:Ue(!1,!0)},n={get(s){return Ke(this,s,!0)},get size(){return ze(this,!0)},has(s){return Ye.call(this,s,!0)},add:lt("add"),set:lt("set"),delete:lt("delete"),clear:lt("clear"),forEach:Ue(!0,!1)},i={get(s){return Ke(this,s,!0,!0)},get size(){return ze(this,!0)},has(s){return Ye.call(this,s,!0)},add:lt("add"),set:lt("set"),delete:lt("delete"),clear:lt("clear"),forEach:Ue(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(s=>{e[s]=qe(s,!1,!1),n[s]=qe(s,!0,!1),t[s]=qe(s,!1,!0),i[s]=qe(s,!0,!0)}),[e,n,t,i]}var[fp,dp,kp,Vp]=up();function ca(e,t){const n=e?dp:fp;return(i,r,s)=>r==="__v_isReactive"?!e:r==="__v_isReadonly"?e:r==="__v_raw"?i:Reflect.get(yn(n,r)&&r in i?n:i,r,s)}var hp={get:ca(!1)},pp={get:ca(!0)};function la(e,t,n){const i=S(n);if(i!==n&&t.call(e,i)){const r=na(e);console.warn(`Reactive ${r} contains both the raw and reactive versions of the same object${r==="Map"?" as keys":""}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`)}}var ua=new WeakMap,_p=new WeakMap,fa=new WeakMap,gp=new WeakMap;function mp(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function Ep(e){return e.__v_skip||!Object.isExtensible(e)?0:mp(na(e))}function nr(e){return e&&e.__v_isReadonly?e:ha(e,!1,cp,hp,ua)}function da(e){return ha(e,!0,lp,pp,fa)}function ha(e,t,n,i,r){if(!An(e))return console.warn(`value cannot be made reactive: ${String(e)}`),e;if(e.__v_raw&&!(t&&e.__v_isReactive))return e;const s=r.get(e);if(s)return s;const o=Ep(e);if(o===0)return e;const a=new Proxy(e,o===2?i:n);return r.set(e,a),a}function S(e){return e&&S(e.__v_raw)||e}function mi(e){return!!(e&&e.__v_isRef===!0)}Q("nextTick",()=>Ui);Q("dispatch",e=>be.bind(be,e));Q("watch",(e,{evaluateLater:t,cleanup:n})=>(i,r)=>{let s=t(i),a=lo(()=>{let c;return s(u=>c=u),c},r);n(a)});Q("store",Ih);Q("data",e=>Eo(e));Q("root",e=>En(e));Q("refs",e=>(e._x_refs_proxy||(e._x_refs_proxy=$e(vp(e))),e._x_refs_proxy));function vp(e){let t=[];return ce(e,n=>{n._x_refs&&t.push(n._x_refs)}),t}var zn={};function pa(e){return zn[e]||(zn[e]=0),++zn[e]}function bp(e,t){return ce(e,n=>{if(n._x_ids&&n._x_ids[t])return!0})}function yp(e,t){e._x_ids||(e._x_ids={}),e._x_ids[t]||(e._x_ids[t]=pa(t))}Q("id",(e,{cleanup:t})=>(n,i=null)=>{let r=`${n}${i?`-${i}`:""}`;return Ap(e,r,t,()=>{let s=bp(e,n),o=s?s._x_ids[n]:pa(n);return i?`${n}-${o}-${i}`:`${n}-${o}`})});bn((e,t)=>{e._x_id&&(t._x_id=e._x_id)});function Ap(e,t,n,i){if(e._x_id||(e._x_id={}),e._x_id[t])return e._x_id[t];let r=i();return e._x_id[t]=r,n(()=>{delete e._x_id[t]}),r}Q("el",e=>e);_a("Focus","focus","focus");_a("Persist","persist","persist");function _a(e,t,n){Q(t,i=>B(`You can't use [$${t}] without first installing the "${e}" plugin here: https://alpinejs.dev/plugins/${n}`,i))}$("modelable",(e,{expression:t},{effect:n,evaluateLater:i,cleanup:r})=>{let s=i(t),o=()=>{let l;return s(h=>l=h),l},a=i(`${t} = __placeholder`),c=l=>a(()=>{},{scope:{__placeholder:l}}),u=o();c(u),queueMicrotask(()=>{if(!e._x_model)return;e._x_removeModelListeners.default();let l=e._x_model.get,h=e._x_model.set,p=Qo({get(){return l()},set(_){h(_)}},{get(){return o()},set(_){c(_)}});r(p)})});$("teleport",(e,{modifiers:t,expression:n},{cleanup:i})=>{e.tagName.toLowerCase()!=="template"&&B("x-teleport can only be used on a <template> tag",e);let r=rs(n),s=e.content.cloneNode(!0).firstElementChild;e._x_teleport=s,s._x_teleportBack=e,e.setAttribute("data-teleport-template",!0),s.setAttribute("data-teleport-target",!0),e._x_forwardEvents&&e._x_forwardEvents.forEach(a=>{s.addEventListener(a,c=>{c.stopPropagation(),e.dispatchEvent(new c.constructor(c.type,c))})}),Ne(s,{},e);let o=(a,c,u)=>{u.includes("prepend")?c.parentNode.insertBefore(a,c):u.includes("append")?c.parentNode.insertBefore(a,c.nextSibling):c.appendChild(a)};C(()=>{o(s,r,t),Et(()=>{st(s)})()}),e._x_teleportPutBack=()=>{let a=rs(n);C(()=>{o(e._x_teleport,a,t)})},i(()=>C(()=>{s.remove(),le(s)}))});var wp=document.createElement("div");function rs(e){let t=Et(()=>document.querySelector(e),()=>wp)();return t||B(`Cannot find x-teleport element for selector: "${e}"`),t}var ga=()=>{};ga.inline=(e,{modifiers:t},{cleanup:n})=>{t.includes("self")?e._x_ignoreSelf=!0:e._x_ignore=!0,n(()=>{t.includes("self")?delete e._x_ignoreSelf:delete e._x_ignore})};$("ignore",ga);$("effect",Et((e,{expression:t},{effect:n})=>{n(R(e,t))}));function Ei(e,t,n,i){let r=e,s=c=>i(c),o={},a=(c,u)=>l=>u(c,l);if(n.includes("dot")&&(t=Tp(t)),n.includes("camel")&&(t=Op(t)),n.includes("passive")&&(o.passive=!0),n.includes("capture")&&(o.capture=!0),n.includes("window")&&(r=window),n.includes("document")&&(r=document),n.includes("debounce")){let c=n[n.indexOf("debounce")+1]||"invalid-wait",u=cn(c.split("ms")[0])?Number(c.split("ms")[0]):250;s=Go(s,u)}if(n.includes("throttle")){let c=n[n.indexOf("throttle")+1]||"invalid-wait",u=cn(c.split("ms")[0])?Number(c.split("ms")[0]):250;s=Xo(s,u)}return n.includes("prevent")&&(s=a(s,(c,u)=>{u.preventDefault(),c(u)})),n.includes("stop")&&(s=a(s,(c,u)=>{u.stopPropagation(),c(u)})),n.includes("once")&&(s=a(s,(c,u)=>{c(u),r.removeEventListener(t,s,o)})),(n.includes("away")||n.includes("outside"))&&(r=document,s=a(s,(c,u)=>{e.contains(u.target)||u.target.isConnected!==!1&&(e.offsetWidth<1&&e.offsetHeight<1||e._x_isShown!==!1&&c(u))})),n.includes("self")&&(s=a(s,(c,u)=>{u.target===e&&c(u)})),(Cp(t)||ma(t))&&(s=a(s,(c,u)=>{xp(u,n)||c(u)})),r.addEventListener(t,s,o),()=>{r.removeEventListener(t,s,o)}}function Tp(e){return e.replace(/-/g,".")}function Op(e){return e.toLowerCase().replace(/-(\w)/g,(t,n)=>n.toUpperCase())}function cn(e){return!Array.isArray(e)&&!isNaN(e)}function Sp(e){return[" ","_"].includes(e)?e:e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase()}function Cp(e){return["keydown","keyup"].includes(e)}function ma(e){return["contextmenu","click","mouse"].some(t=>e.includes(t))}function xp(e,t){let n=t.filter(s=>!["window","document","prevent","stop","once","capture","self","away","outside","passive"].includes(s));if(n.includes("debounce")){let s=n.indexOf("debounce");n.splice(s,cn((n[s+1]||"invalid-wait").split("ms")[0])?2:1)}if(n.includes("throttle")){let s=n.indexOf("throttle");n.splice(s,cn((n[s+1]||"invalid-wait").split("ms")[0])?2:1)}if(n.length===0||n.length===1&&ss(e.key).includes(n[0]))return!1;const r=["ctrl","shift","alt","meta","cmd","super"].filter(s=>n.includes(s));return n=n.filter(s=>!r.includes(s)),!(r.length>0&&r.filter(o=>((o==="cmd"||o==="super")&&(o="meta"),e[`${o}Key`])).length===r.length&&(ma(e.type)||ss(e.key).includes(n[0])))}function ss(e){if(!e)return[];e=Sp(e);let t={ctrl:"control",slash:"/",space:" ",spacebar:" ",cmd:"meta",esc:"escape",up:"arrow-up",down:"arrow-down",left:"arrow-left",right:"arrow-right",period:".",comma:",",equal:"=",minus:"-",underscore:"_"};return t[e]=e,Object.keys(t).map(n=>{if(t[n]===e)return n}).filter(n=>n)}$("model",(e,{modifiers:t,expression:n},{effect:i,cleanup:r})=>{let s=e;t.includes("parent")&&(s=e.parentNode);let o=R(s,n),a;typeof n=="string"?a=R(s,`${n} = __placeholder`):typeof n=="function"&&typeof n()=="string"?a=R(s,`${n()} = __placeholder`):a=()=>{};let c=()=>{let p;return o(_=>p=_),os(p)?p.get():p},u=p=>{let _;o(A=>_=A),os(_)?_.set(p):a(()=>{},{scope:{__placeholder:p}})};typeof n=="string"&&e.type==="radio"&&C(()=>{e.hasAttribute("name")||e.setAttribute("name",n)});var l=e.tagName.toLowerCase()==="select"||["checkbox","radio"].includes(e.type)||t.includes("lazy")?"change":"input";let h=ht?()=>{}:Ei(e,l,t,p=>{u(Un(e,t,p,c()))});if(t.includes("fill")&&([void 0,null,""].includes(c())||Gi(e)&&Array.isArray(c())||e.tagName.toLowerCase()==="select"&&e.multiple)&&u(Un(e,t,{target:e},c())),e._x_removeModelListeners||(e._x_removeModelListeners={}),e._x_removeModelListeners.default=h,r(()=>e._x_removeModelListeners.default()),e.form){let p=Ei(e.form,"reset",[],_=>{Ui(()=>e._x_model&&e._x_model.set(Un(e,t,{target:e},c())))});r(()=>p())}e._x_model={get(){return c()},set(p){u(p)}},e._x_forceModelUpdate=p=>{p===void 0&&typeof n=="string"&&n.match(/\./)&&(p=""),window.fromModel=!0,C(()=>Ko(e,"value",p)),delete window.fromModel},i(()=>{let p=c();t.includes("unintrusive")&&document.activeElement.isSameNode(e)||e._x_forceModelUpdate(p)})});function Un(e,t,n,i){return C(()=>{if(n instanceof CustomEvent&&n.detail!==void 0)return n.detail!==null&&n.detail!==void 0?n.detail:n.target.value;if(Gi(e))if(Array.isArray(i)){let r=null;return t.includes("number")?r=qn(n.target.value):t.includes("boolean")?r=Ze(n.target.value):r=n.target.value,n.target.checked?i.includes(r)?i:i.concat([r]):i.filter(s=>!Np(s,r))}else return n.target.checked;else{if(e.tagName.toLowerCase()==="select"&&e.multiple)return t.includes("number")?Array.from(n.target.selectedOptions).map(r=>{let s=r.value||r.text;return qn(s)}):t.includes("boolean")?Array.from(n.target.selectedOptions).map(r=>{let s=r.value||r.text;return Ze(s)}):Array.from(n.target.selectedOptions).map(r=>r.value||r.text);{let r;return qo(e)?n.target.checked?r=n.target.value:r=i:r=n.target.value,t.includes("number")?qn(r):t.includes("boolean")?Ze(r):t.includes("trim")?r.trim():r}}})}function qn(e){let t=e?parseFloat(e):null;return $p(t)?t:e}function Np(e,t){return e==t}function $p(e){return!Array.isArray(e)&&!isNaN(e)}function os(e){return e!==null&&typeof e=="object"&&typeof e.get=="function"&&typeof e.set=="function"}$("cloak",e=>queueMicrotask(()=>C(()=>e.removeAttribute(ae("cloak")))));Vo(()=>`[${ae("init")}]`);$("init",Et((e,{expression:t},{evaluate:n})=>typeof t=="string"?!!t.trim()&&n(t,{},!1):n(t,{},!1)));$("text",(e,{expression:t},{effect:n,evaluateLater:i})=>{let r=i(t);n(()=>{r(s=>{C(()=>{e.textContent=s})})})});$("html",(e,{expression:t},{effect:n,evaluateLater:i})=>{let r=i(t);n(()=>{r(s=>{C(()=>{e.innerHTML=s,e._x_ignoreSelf=!0,st(e),delete e._x_ignoreSelf})})})});Ki(xo(":",No(ae("bind:"))));var Ea=(e,{value:t,modifiers:n,expression:i,original:r},{effect:s,cleanup:o})=>{if(!t){let c={};Ph(c),R(e,i)(l=>{Zo(e,l,r)},{scope:c});return}if(t==="key")return Dp(e,i);if(e._x_inlineBindings&&e._x_inlineBindings[t]&&e._x_inlineBindings[t].extract)return;let a=R(e,i);s(()=>a(c=>{c===void 0&&typeof i=="string"&&i.match(/\./)&&(c=""),C(()=>Ko(e,t,c,n))})),o(()=>{e._x_undoAddedClasses&&e._x_undoAddedClasses(),e._x_undoAddedStyles&&e._x_undoAddedStyles()})};Ea.inline=(e,{value:t,modifiers:n,expression:i})=>{t&&(e._x_inlineBindings||(e._x_inlineBindings={}),e._x_inlineBindings[t]={expression:i,extract:!1})};$("bind",Ea);function Dp(e,t){e._x_keyExpression=t}ko(()=>`[${ae("data")}]`);$("data",(e,{expression:t},{cleanup:n})=>{if(Lp(e))return;t=t===""?"{}":t;let i={};ai(i,e);let r={};kh(r,i);let s=$t(e,t,{scope:r});(s===void 0||s===!0)&&(s={}),ai(s,e);let o=se(s);vo(o);let a=Ne(e,o);o.init&&$t(e,o.init),n(()=>{o.destroy&&$t(e,o.destroy),a()})});bn((e,t)=>{e._x_dataStack&&(t._x_dataStack=e._x_dataStack,t.setAttribute("data-has-alpine-state",!0))});function Lp(e){return ht?pi?!0:e.hasAttribute("data-has-alpine-state"):!1}$("show",(e,{modifiers:t,expression:n},{effect:i})=>{let r=R(e,n);e._x_doHide||(e._x_doHide=()=>{C(()=>{e.style.setProperty("display","none",t.includes("important")?"important":void 0)})}),e._x_doShow||(e._x_doShow=()=>{C(()=>{e.style.length===1&&e.style.display==="none"?e.removeAttribute("style"):e.style.removeProperty("display")})});let s=()=>{e._x_doHide(),e._x_isShown=!1},o=()=>{e._x_doShow(),e._x_isShown=!0},a=()=>setTimeout(o),c=di(h=>h?o():s(),h=>{typeof e._x_toggleAndCascadeWithTransitions=="function"?e._x_toggleAndCascadeWithTransitions(e,h,o,s):h?a():s()}),u,l=!0;i(()=>r(h=>{!l&&h===u||(t.includes("immediate")&&(h?a():s()),c(h),u=h,l=!1)}))});$("for",(e,{expression:t},{effect:n,cleanup:i})=>{let r=Mp(t),s=R(e,r.items),o=R(e,e._x_keyExpression||"index");e._x_prevKeys=[],e._x_lookup={},n(()=>Ip(e,r,s,o)),i(()=>{Object.values(e._x_lookup).forEach(a=>C(()=>{le(a),a.remove()})),delete e._x_prevKeys,delete e._x_lookup})});function Ip(e,t,n,i){let r=o=>typeof o=="object"&&!Array.isArray(o),s=e;n(o=>{Pp(o)&&o>=0&&(o=Array.from(Array(o).keys(),d=>d+1)),o===void 0&&(o=[]);let a=e._x_lookup,c=e._x_prevKeys,u=[],l=[];if(r(o))o=Object.entries(o).map(([d,m])=>{let b=as(t,m,d,o);i(y=>{l.includes(y)&&B("Duplicate key on x-for",e),l.push(y)},{scope:{index:d,...b}}),u.push(b)});else for(let d=0;d<o.length;d++){let m=as(t,o[d],d,o);i(b=>{l.includes(b)&&B("Duplicate key on x-for",e),l.push(b)},{scope:{index:d,...m}}),u.push(m)}let h=[],p=[],_=[],A=[];for(let d=0;d<c.length;d++){let m=c[d];l.indexOf(m)===-1&&_.push(m)}c=c.filter(d=>!_.includes(d));let v="template";for(let d=0;d<l.length;d++){let m=l[d],b=c.indexOf(m);if(b===-1)c.splice(d,0,m),h.push([v,d]);else if(b!==d){let y=c.splice(d,1)[0],E=c.splice(b-1,1)[0];c.splice(d,0,E),c.splice(b,0,y),p.push([y,E])}else A.push(m);v=m}for(let d=0;d<_.length;d++){let m=_[d];m in a&&(C(()=>{le(a[m]),a[m].remove()}),delete a[m])}for(let d=0;d<p.length;d++){let[m,b]=p[d],y=a[m],E=a[b],w=document.createElement("div");C(()=>{E||B('x-for ":key" is undefined or invalid',s,b,a),E.after(w),y.after(E),E._x_currentIfEl&&E.after(E._x_currentIfEl),w.before(y),y._x_currentIfEl&&y.after(y._x_currentIfEl),w.remove()}),E._x_refreshXForScope(u[l.indexOf(b)])}for(let d=0;d<h.length;d++){let[m,b]=h[d],y=m==="template"?s:a[m];y._x_currentIfEl&&(y=y._x_currentIfEl);let E=u[b],w=l[b],T=document.importNode(s.content,!0).firstElementChild,O=se(E);Ne(T,O,s),T._x_refreshXForScope=D=>{Object.entries(D).forEach(([N,x])=>{O[N]=x})},C(()=>{y.after(T),Et(()=>st(T))()}),typeof w=="object"&&B("x-for key cannot be an object, it must be a string or an integer",s),a[w]=T}for(let d=0;d<A.length;d++)a[A[d]]._x_refreshXForScope(u[l.indexOf(A[d])]);s._x_prevKeys=l})}function Mp(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,n=/^\s*\(|\)\s*$/g,i=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,r=e.match(i);if(!r)return;let s={};s.items=r[2].trim();let o=r[1].replace(n,"").trim(),a=o.match(t);return a?(s.item=o.replace(t,"").trim(),s.index=a[1].trim(),a[2]&&(s.collection=a[2].trim())):s.item=o,s}function as(e,t,n,i){let r={};return/^\[.*\]$/.test(e.item)&&Array.isArray(t)?e.item.replace("[","").replace("]","").split(",").map(o=>o.trim()).forEach((o,a)=>{r[o]=t[a]}):/^\{.*\}$/.test(e.item)&&!Array.isArray(t)&&typeof t=="object"?e.item.replace("{","").replace("}","").split(",").map(o=>o.trim()).forEach(o=>{r[o]=t[o]}):r[e.item]=t,e.index&&(r[e.index]=n),e.collection&&(r[e.collection]=i),r}function Pp(e){return!Array.isArray(e)&&!isNaN(e)}function va(){}va.inline=(e,{expression:t},{cleanup:n})=>{let i=En(e);i._x_refs||(i._x_refs={}),i._x_refs[t]=e,n(()=>delete i._x_refs[t])};$("ref",va);$("if",(e,{expression:t},{effect:n,cleanup:i})=>{e.tagName.toLowerCase()!=="template"&&B("x-if can only be used on a <template> tag",e);let r=R(e,t),s=()=>{if(e._x_currentIfEl)return e._x_currentIfEl;let a=e.content.cloneNode(!0).firstElementChild;return Ne(a,{},e),C(()=>{e.after(a),Et(()=>st(a))()}),e._x_currentIfEl=a,e._x_undoIf=()=>{C(()=>{le(a),a.remove()}),delete e._x_currentIfEl},a},o=()=>{e._x_undoIf&&(e._x_undoIf(),delete e._x_undoIf)};n(()=>r(a=>{a?s():o()})),i(()=>e._x_undoIf&&e._x_undoIf())});$("id",(e,{expression:t},{evaluate:n})=>{n(t).forEach(r=>yp(e,r))});bn((e,t)=>{e._x_ids&&(t._x_ids=e._x_ids)});Ki(xo("@",No(ae("on:"))));$("on",Et((e,{value:t,modifiers:n,expression:i},{cleanup:r})=>{let s=i?R(e,i):()=>{};e.tagName.toLowerCase()==="template"&&(e._x_forwardEvents||(e._x_forwardEvents=[]),e._x_forwardEvents.includes(t)||e._x_forwardEvents.push(t));let o=Ei(e,t,n,a=>{s(()=>{},{scope:{$event:a},params:[a]})});r(()=>o())}));Tn("Collapse","collapse","collapse");Tn("Intersect","intersect","intersect");Tn("Focus","trap","focus");Tn("Mask","mask","mask");function Tn(e,t,n){$(t,i=>B(`You can't use [x-${t}] without first installing the "${e}" plugin here: https://alpinejs.dev/plugins/${n}`,i))}De.setEvaluator(To);De.setReactivityEngine({reactive:nr,effect:Uh,release:qh,raw:S});var Rp=De,ba=Rp;document.querySelectorAll('[data-bs-toggle="popover"]').forEach(e=>{new _n(e)});window.Alpine=ba;ba.start();
diff --git a/hub/services/templates/services/base.html b/hub/services/templates/services/base.html
index 176a25c..c051e92 100644
--- a/hub/services/templates/services/base.html
+++ b/hub/services/templates/services/base.html
@@ -5,60 +5,208 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Servala - The Cloud Native Services Hub</title>
+    <link rel="icon" type="image/x-icon" href="{% static "img/favicon.ico" %}">
+
     <link rel="stylesheet" href='{% static "css/bootstrap-icons.min.css" %}'>
-    <link rel="stylesheet" type="text/css" href='{% static "css/bootstrap.min.css" %}'>
-    <style>
-        .rich-text-content {
-            overflow-wrap: break-word;
-            word-wrap: break-word;
-        }
-        .rich-text-content img {
-            max-width: 100%;
-            height: auto;
-        }
-        .description-preview img {
-            max-width: 100%;
-            height: auto;
-        }
-    </style>
+    <link rel="stylesheet" type="text/css" href='{% static "css/servala-main.css" %}'>
     {% block extra_css %}{% endblock %}
+
     <script defer data-domain="serva.la" src="https://plausible.io/js/script.outbound-links.tagged-events.js"></script>
+    <script defer src="{% static "js/alpine-collapse.min.js" %}"></script>
+    <script defer src="{% static "js/servala-main.js" %}"></script>
+    {% block extra_js %}{% endblock %}
 </head>
 <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <div class="container">
-            <a class="navbar-brand" href="{% url 'services:homepage' %}">Servala</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav">
-                    <li class="nav-item">
-                        <a class="nav-link {% if request.resolver_match.view_name == 'services:service_list' %}active{% endif %}" 
-                           href="{% url 'services:service_list' %}">Services</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link {% if request.resolver_match.view_name == 'services:offering_list' %}active{% endif %}" 
-                           href="{% url 'services:offering_list' %}">Service Offerings</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link {% if request.resolver_match.view_name == 'services:provider_list' %}active{% endif %}" 
-                           href="{% url 'services:provider_list' %}">Cloud Providers</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link {% if request.resolver_match.view_name == 'services:partner_list' %}active{% endif %}" 
-                           href="{% url 'services:partner_list' %}">Consulting Partners</a>
-                    </li>
-                </ul>
+    <div class="overflow-hidden">
+        <header x-data="{sideNav: false, atTop: true}" class="site-header position-relative">
+          <div class="header-nav" :class="{ 'header-nav--top': atTop, 'header-nav--fixed': !atTop }"
+            x-on:scroll.window="atTop = (window.pageYOffset > 200) ? false : true;">
+            <div class="container-xl mx-auto px-3 px-lg-0 position-relative">
+              <div class="nav__wrapper d-flex justify-content-between align-items-center">
+                <div class="nav__brand logo">
+                  <a class="navbar__logo" href="{% url 'services:homepage' %}" title="logo">
+                    <img src="{% static "img/header-logo.png" %}" alt="Servala Logo" width="191" height="43">
+                  </a>
+                </div>
+                <div x-cloak class="nav__menu" :class="sideNav ? 'nav__menu-active' : 'nav__menu-hidden'">
+                  <nav class="navbar d-lg-flex justify-content-lg-end align-items-lg-center">
+                    <ul class="navbar__menu menu mr-lg-27">
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:homepage' %}">Home</a></li>
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:service_list' %}">Services</a></li>
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:offering_list' %}">Offerings</a></li>
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:provider_list' %}">Cloud Providers</a></li>
+                        <li class="menu__item"><a class="menu__item-link" href="{% url 'services:partner_list' %}">Consulting Partners</a></li>
+                    </ul>
+                  </nav>
+                </div>
+                <div class="nav__toggle">
+                  <button @click="sideNav = !sideNav" name="menu" class="nav__button" role="button">
+                    <svg class="nav__button-svg" width="22" height="24">
+                      <line class="button-svg__line" :class="{ 'svg-line-top': sideNav === true }" id="top" x1="0" x2="22"
+                        y1="6" y2="6"></line>
+                      <line class="button-svg__line" :class="{ 'svg-line-center': sideNav === true }" id="middle" x1="0"
+                        x2="22" y1="12" y2="12">
+                      </line>
+                      <line class="button-svg__line" :class="{ 'svg-line-bottom': sideNav === true }" id="bottom" x1="0"
+                        x2="22" y1="18" y2="18"></line>
+                    </svg>
+                  </button>
+                </div>
+              </div>
             </div>
-        </div>
-    </nav>
-
-    <div class="container mt-4">
+          </div>
+        </header>
+    
         {% block content %}
         {% endblock %}
-    </div>
 
-    <script src="{% static "js/bootstrap.bundle.min.js" %}"></script>
+        <section class="section">
+            <div class="section-wrapper container mx-auto px-20 px-lg-0 pt-60 pb-60">
+              <div class="bg-primary-subtle rounded-40 py-100 px-20 px-lg-0">
+                <header class="section-primary__header text-center">
+                  <div class="d-inline-flex position-relative">
+                    <div class="section-title-svg position-absolute d-none d-lg-block">
+                      <svg width="45" height="50" viewBox="0 0 45 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M29.9436 46.0084C34.2405 44.8026 38.7391 44.1943 43.1031 43.6371C44.0431 43.5203 44.9157 44.1722 44.9829 45.0906C45.1171 46.0097 44.4454 46.8503 43.5726 46.9671C39.3428 47.5036 34.9793 48.0776 30.8838 49.2384C30.011 49.4902 29.0707 48.9719 28.8021 48.0803C28.5336 47.1894 29.0708 46.2608 29.9436 46.0084Z"
+                          fill="#9A63EC" />
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M16.9192 28.9129C23.8344 21.856 31.6225 15.7075 38.4034 8.46126C39.0077 7.78451 40.0819 7.74825 40.7533 8.38002C41.4247 9.01246 41.4915 10.0759 40.8202 10.7527C34.0392 18.0197 26.2512 24.1884 19.3359 31.2661C18.6645 31.9268 17.5906 31.9362 16.9192 31.2863C16.3149 30.637 16.2478 29.5736 16.9192 28.9129Z"
+                          fill="#9A63EC" />
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M3.9606 1.7696C3.75918 5.80864 3.55816 9.84768 3.35675 13.8874C3.35675 14.8126 2.55069 15.5269 1.61076 15.4819C0.670821 15.4363 -0.000168324 14.6487 -0.000168324 13.7229C0.201247 9.67715 0.402268 5.63207 0.603683 1.58699C0.670821 0.661821 1.47661 -0.0478314 2.41655 0.00252227C3.28935 0.052876 4.02774 0.84511 3.9606 1.7696Z"
+                          fill="#9A63EC" />
+                      </svg>
+                    </div>
+                    <h2 class="section-h1 fs-40 fs-lg-60 d-inline-block mb-24">Ready to Get Started?</h2>
+                  </div>
+                  <div class="text-gray-300 w-lg-37 mx-auto mb-24">
+                    <p class="mb-0">Servala connects businesses, developers, and cloud service providers on one unique hub with secure, scalable, and easy-to-use cloud-native services.</p>
+                  </div>
+                  <div>
+                    <a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:homepage' %}" role="button">Discover
+                      Services</a>
+                  </div>
+                </header>
+              </div>
+            </div>
+          </section>
+
+        <footer>
+          <section>
+            <div class="container mx-auto px-20 px-lg-0 py-36 border-y">
+              <div class="row">
+                <div class="col-12 col-lg-4 mb-60 mb-lg-0">
+                  <div class="mb-10">
+                    <a href="">
+                      <img class="img-fluid" src="{% static "img/footer-logo.png" %}" alt="Servala by VSHN Logo">
+                    </a>
+                  </div>
+                  <div class="fs-14 fw-semibold">
+                    <p>Unlock the Power of Cloud Native Applications</p>
+                  </div>
+                  <div class="d-flex align-items-center space-x-20">
+                    <a href="https://www.linkedin.com/company/5395280/">
+                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M20.5831 0.631348C21.2609 0.631348 21.9109 0.900593 22.3902 1.37985C22.8694 1.85911 23.1387 2.50913 23.1387 3.1869V21.0758C23.1387 21.7536 22.8694 22.4036 22.3902 22.8828C21.9109 23.3621 21.2609 23.6313 20.5831 23.6313H2.69423C2.01645 23.6313 1.36644 23.3621 0.887177 22.8828C0.407917 22.4036 0.138672 21.7536 0.138672 21.0758V3.1869C0.138672 2.50913 0.407917 1.85911 0.887177 1.37985C1.36644 0.900593 2.01645 0.631348 2.69423 0.631348H20.5831ZM19.9442 20.4369V13.6647C19.9442 12.5599 19.5054 11.5004 18.7242 10.7192C17.943 9.93799 16.8834 9.49912 15.7787 9.49912C14.6926 9.49912 13.4276 10.1636 12.8142 11.1602V9.7419H9.24923V20.4369H12.8142V14.1375C12.8142 13.1536 13.6065 12.3486 14.5903 12.3486C15.0648 12.3486 15.5198 12.537 15.8553 12.8725C16.1908 13.208 16.3792 13.663 16.3792 14.1375V20.4369H19.9442ZM5.09645 7.73579C5.66578 7.73579 6.21179 7.50963 6.61437 7.10705C7.01695 6.70447 7.24312 6.15846 7.24312 5.58913C7.24312 4.40079 6.28478 3.42968 5.09645 3.42968C4.52373 3.42968 3.97447 3.65719 3.56949 4.06217C3.16452 4.46714 2.93701 5.01641 2.93701 5.58913C2.93701 6.77746 3.90812 7.73579 5.09645 7.73579ZM6.87256 20.4369V9.7419H3.33312V20.4369H6.87256Z"
+                          fill="#4B5563" />
+                      </svg>
+                    </a>
+                  </div>
+                </div>
+    
+                <div class="col-12 col-lg-2 mb-60 mb-lg-0">
+                  <div class="space-y-20">
+                    <h4 class="fs-base fw-semibold">Contents</h4>
+                    <ul class="list-unstyled space-y-20 fs-15 fw-medium ps-0">
+                      <li><a href="{% url 'services:homepage' %}">Home</a></li>
+                      <li><a href="{% url 'services:service_list' %}">Services</a></li>
+                      <li><a href="{% url 'services:offering_list' %}">Offerings</a></li>
+                      <li><a href="{% url 'services:provider_list' %}">Cloud Providers</a></li>
+                      <li><a href="{% url 'services:partner_list' %}">Consulting Partners</a></li>
+                    </ul>
+                  </div>
+                </div>
+    
+                <div class="col-12 col-lg-2 mb-60 mb-lg-0">
+                  <div class="space-y-20">
+                    <h4 class="fs-base fw-semibold">Company</h4>
+                    <ul class="list-unstyled space-y-20 fs-15 fw-medium ps-0">
+                      <li><a href="https://www.vshn.ch/en/about/">About Us</a></li>
+                      <li><a href="https://products.vshn.ch/legal/gtc_en.html">Terms & Conditions</a></li>
+                      <li><a href="https://products.vshn.ch/legal/privacy_policy_en.html">Privacy Policy</a></li>
+                      <li><a href="https://products.vshn.ch/legal/dpa_en.html">Data Processing Agreement</a></li>
+                    </ul>
+                  </div>
+                </div>
+    
+                <div class="col-12 col-lg-4">
+                  <div class="space-y-20 w-lg-90">
+                    <h4 class="fs-base fw-semibold">Contact</h4>
+                    <ul class="list-unstyled space-y-20 fs-base fw-medium ps-0">
+                      <li>
+                        <a class="d-flex align-items-center" href="tel:+41445455300">
+                          <span class="pr-10">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                d="M18.984 15.5283C17.8172 14.5982 16.6332 14.0349 15.4808 14.9635L14.7927 15.5248C14.2892 15.9322 13.3531 17.8358 9.73382 13.9555C6.11531 10.0801 8.26863 9.47668 8.77286 9.07277L9.46475 8.51081C10.6111 7.58006 10.1785 6.40838 9.3517 5.20228L8.85275 4.47173C8.02217 3.26844 7.11773 2.47818 5.96834 3.40752L5.3473 3.91328C4.8393 4.25819 3.41933 5.37929 3.07489 7.50912C2.66036 10.0646 3.96803 12.991 6.96398 16.2019C9.95617 19.4142 12.8858 21.0277 15.6609 20.9996C17.9672 20.9765 19.3601 19.823 19.7957 19.4037L20.419 18.8972C21.5654 17.9686 20.8531 17.0231 19.6857 16.0909L18.984 15.5283Z"
+                                fill="#9A63EC" />
+                            </svg>
+                          </span>
+                          <span>+41 44 545 53 00</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a class="d-flex align-items-center" href="mailto:hi@serva.la">
+                          <span class="pr-10">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <mask id="mask0_3315_428" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"
+                                width="24" height="24">
+                                <rect width="24" height="24" fill="#D9D9D9" />
+                              </mask>
+                              <g mask="url(#mask0_3315_428)">
+                                <path
+                                  d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L20 8V6L12 11L4 6V8L12 13Z"
+                                  fill="#9A63EC" />
+                              </g>
+                            </svg>
+                          </span>
+                          <span>hi@serva.la</span>
+                        </a>
+                      </li>
+                      <li>
+                        <a class="d-flex align-items-center" href="https://www.openstreetmap.org/node/3666762517">
+                          <span class="pr-10">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <g clip-path="url(#clip0_3315_433)">
+                                <path
+                                  d="M12 0C7.038 0 3 4.066 3 9.065C3 16.168 11.154 23.502 11.501 23.81C11.644 23.937 11.822 24 12 24C12.178 24 12.356 23.937 12.499 23.811C12.846 23.502 21 16.168 21 9.065C21 4.066 16.962 0 12 0ZM12 14C9.243 14 7 11.757 7 9C7 6.243 9.243 4 12 4C14.757 4 17 6.243 17 9C17 11.757 14.757 14 12 14Z"
+                                  fill="#9A63EC" />
+                              </g>
+                              <defs>
+                                <clipPath id="clip0_3315_433">
+                                  <rect width="24" height="24" fill="white" />
+                                </clipPath>
+                              </defs>
+                            </svg>
+                          </span>
+                          <span>Neugasse 10, 8005 Zurich, Switzerland</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+    
+              </div>
+            </div>
+          </section>
+          <div class="container mx-auto px-20 px-lg-0 pt-36 pb-40">
+            <div class="text-center fs-base fw-medium">
+              <p class="mb-0">© 2025 VSHN. All rights reserved.</p>
+            </div>
+          </div>
+        </footer>
+      </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/hub/services/templates/services/homepage.html b/hub/services/templates/services/homepage.html
index 736cd86..e8f4525 100644
--- a/hub/services/templates/services/homepage.html
+++ b/hub/services/templates/services/homepage.html
@@ -2,17 +2,184 @@
 {% load static %}
 
 {% block content %}
-<div class="px-4 py-5 my-5 text-center">
-    <img class="d-block mx-auto mb-4" src="{% static "img/servala-logo.png" %}" alt="" height="150">
-    <h1 class="display-5 fw-bold text-body-emphasis">The Cloud Native Service Hub</h1>
-    <div class="col-lg-6 mx-auto">
-      <p class="lead mb-4">Minions ipsum uuuhhh me want bananaaa! Ti aamoo! Daa la bodaaa tatata bala tu uuuhhh. Aaaaaah pepete uuuhhh po kass.</p>
-      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
-        <a href="{% url 'services:service_list' %}"><button type="button" class="btn btn-primary btn-lg px-4 gap-3">Discover Services</button></a>
-        <a href="{% url 'services:offering_list' %}"><button type="button" class="btn btn-primary btn-lg px-4 gap-3">Discover Offerings</button></a>
-        <a href="{% url 'services:provider_list' %}"><button type="button" class="btn btn-primary btn-lg px-4 gap-3">Discover Cloud Providers</button></a>
-        <a href="{% url 'services:partner_list' %}"><button type="button" class="btn btn-primary btn-lg px-4 gap-3">Discover Consulting</button></a>
+<section class="section section-hero bg-primary-subtle">
+  <div class="section-wrapper container mx-auto position-relative">
+    <div class="section-hero-mask"></div>
+    <div class="px-3 px-lg-0 pt-80 pb-120 position-relative">
+      <header class="section-hero__header">
+        <h1 class="section-h1 fs-40 fs-lg-64">Servala - The Cloud Native Service Hub</h1>
+        <div class="section-hero__desc">
+          <p>Unlock the Power of Cloud Native Applications.</p>
+        </div>
+        <div>
+          <a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:service_list' %}" role="button">Discover
+            Services</a>
+        </div>
+      </header>
+    </div>
+  </div>
+</section>
+
+<section class="section">
+  <div class="container mx-auto px-20 px-lg-0 pt-80 pb-40">
+    <div class="">
+      <header class="section__header w-100 d-flex justify-content-between align-items-center">
+        <div class="section__header-text">
+          <h2 class="section__header-h2">Services</h2>
+          <div class="section__desc">
+            <p>Lorem ipsum dolor sit amet consectetur. Gravida nec amet rhoncus placerat. Diam est faucibus
+              dignissim porttitor.</p>
+          </div>
+        </div>
+        <div class="d-none d-lg-block">
+          <a class="section__header-link" href="{% url 'services:service_list' %}">See All</a>
+        </div>
+      </header>
+      <div class="section__grid">
+        <div class="row">
+          {% for service in featured_services %}
+          <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
+            <div class="card">
+              <div class="card__image">
+                  <a href="{{ service.get_absolute_url }}"><img class="img-fluid" src="{{ service.logo.url }}" alt="{{ service.name }} logo"></a>
+              </div>
+              <div class="card__header">
+                <h3 class="card__title"><a href="{{ service.get_absolute_url }}" class="text-decoration-none">{{ service.name }}</a></h3>
+                {% for category in service.categories.all|slice:":1" %}
+                  <p class="card__subtitle">{{ category.name }}</p>
+                {% endfor %}
+              </div>
+              <div class="card__desc">
+                <p>{{ service.description|safe|truncatewords:15 }}</p>
+              </div>
+            </div>
+          </div>
+          {% empty %}
+          <div class="col-12">
+            <p class="text-center">No featured services available at the moment.</p>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+      <div class="page-action d-lg-none">
+        <a class="btn btn-outline-primary btn-lg w-100" href="#" role="button">See All</a>
       </div>
     </div>
   </div>
+</section>
+<section class="section">
+  <div class="container mx-auto px-20 px-lg-0 pt-40 pb-40">
+    <div class="">
+      <header class="section__header w-100 d-flex justify-content-between align-items-center">
+        <div class="section__header-text">
+          <h2 class="section__header-h2">Cloud Providers</h2>
+          <div class="section__desc">
+            <p>Lorem ipsum dolor sit amet consectetur. Gravida nec amet rhoncus placerat. Diam est faucibus
+              dignissim porttitor.</p>
+          </div>
+        </div>
+        <div class="d-none d-lg-block">
+          <a class="section__header-link" href="{% url 'services:provider_list' %}">See All</a>
+        </div>
+      </header>
+      <div class="section__grid">
+        <div class="row">
+          <div class="section__grid">
+            <div class="row">
+              {% for provider in featured_providers %}
+              <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
+                <div class="card">
+                  <div class="card__image__wide mb-4">
+                      <a href="{{ provider.get_absolute_url }}"><img class="img-fluid" src="{{ provider.logo.url }}" alt="{{ provider.name }} logo"></a>
+                  </div>
+                  <div class="card__header">
+                    <h3 class="card__title"><a href="{{ provider.get_absolute_url }}" class="text-decoration-none">{{ provider.name }}</a></h3>
+                  </div>
+                  <div class="card__desc">
+                    <p>{{ provider.description|safe|truncatewords:15 }}</p>
+                  </div>
+                </div>
+              </div>
+              {% empty %}
+              <div class="col-12">
+                <p class="text-center">No featured provider available at the moment.</p>
+              </div>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-action d-lg-none">
+        <a class="btn btn-outline-primary btn-lg w-100" href="#" role="button">See All</a>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="section">
+  <div class="container mx-auto px-20 px-lg-0 pt-40 pb-80">
+    <div class="">
+      <header class="section__header w-100 d-flex justify-content-between align-items-center">
+        <div class="section__header-text">
+          <h2 class="section__header-h2">Consulting Partners</h2>
+          <div class="section__desc">
+            <p>Lorem ipsum dolor sit amet consectetur. Gravida nec amet rhoncus placerat. Diam est faucibus
+              dignissim porttitor.</p>
+          </div>
+        </div>
+        <div class="d-none d-lg-block">
+          <a class="section__header-link" href="{% url 'services:partner_list' %}">See All</a>
+        </div>
+      </header>
+      <div class="section__grid">
+        <div class="row">
+          {% for partner in featured_partners %}
+          <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
+            <div class="card">
+              <div class="card__image__wide mb-4">
+                  <a href="{{ partner.get_absolute_url }}"><img class="img-fluid" src="{{ partner.logo.url }}" alt="{{ partner.name }} logo"></a>
+              </div>
+              <div class="card__header">
+                <h3 class="card__title"><a href="{{ partner.get_absolute_url }}" class="text-decoration-none">{{ partner.name }}</a></h3>
+              </div>
+              <div class="card__desc">
+                <p>{{ partner.description|safe|truncatewords:15 }}</p>
+              </div>
+            </div>
+          </div>
+          {% empty %}
+          <div class="col-12">
+            <p class="text-center">No featured partner available at the moment.</p>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+      <div class="page-action d-lg-none">
+        <a class="btn btn-outline-primary btn-lg w-100" href="#" role="button">See All</a>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="section bg-primary-subtle">
+  <div class="section-wrapper container mx-auto px-20 px-lg-0 pt-80 pb-120">
+    <div class="row">
+      <div class="col-12 col-lg-4 mb-30 mb-lg-0">
+        <div class="section-logo mx-auto">
+          <img class="img-fluid" src="{% static "img/section-logo.png" %}" alt="">
+        </div>
+      </div>
+      <div class="col-12 col-lg-8">
+        <header class="section-primary__header">
+          <h2 class="section-h1 fs-40 fs-lg-60">Servala - The Cloud Native Service Hub</h2>
+          <div class="section-primary__desc">
+            <p>Servala connects businesses, developers, and cloud service providers on one unique hub with secure, scalable, and easy-to-use cloud-native services.</p>
+          </div>
+          <div>
+            <a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:offering_list' %}" role="button">Discover
+              Services</a>
+          </div>
+        </header>
+      </div>
+    </div>
+  </div>
+</section>
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templates/services/lead_form.html b/hub/services/templates/services/lead_form.html
index d5fa2f7..65f8920 100644
--- a/hub/services/templates/services/lead_form.html
+++ b/hub/services/templates/services/lead_form.html
@@ -1,100 +1,109 @@
 {% extends 'services/base.html' %}
+{% load form_tags %}
 
 {% block content %}
-<div class="row justify-content-center">
-    <div class="col-md-8">
-        <div class="card">
-            <div class="card-body">
-                <h2 class="card-title mb-4">Interested in {{ service.name }}</h2>
+<section class="section">
+    <div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
+        <div class="d-lg-flex">
+            <div class="flex-1 pr-lg-40 mb-40 mb-lg-0">
+                <div class="bg-gray-50 rounded-20 p-40">
+                    <header>
+                        <h2 class="fs-44 fw-semibold mb-40">Enter your details</h2>
+                    </header>
 
-                {% if selected_offering %}
-                <div class="mb-4">
-                    <h5>Service Details</h5>
-                    {% if selected_offering %}
-                        <p><strong>Provider:</strong> {{ selected_offering.cloud_provider.name }}</p>
-                    {% endif %}
-                    {% if selected_plan %}
-                        <p><strong>Plan:</strong> {{ selected_plan.name }}</p>
+                    <form method="post">
+                        {% csrf_token %}
+
+                        <div class="mb-40">
+                            <label for="{{ form.name.id_for_label }}" class="form-label text-purple">Your Name</label>
+                            {{ form.name|addclass:"form-control" }}
+                            {% if form.name.errors %}
+                                <div class="invalid-feedback d-block">
+                                    {{ form.name.errors }}
+                                </div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-40">
+                            <label for="{{ form.email.id_for_label }}" class="form-label text-purple">Your Email Address</label>
+                            {{ form.email|addclass:"form-control" }}
+                            {% if form.email.errors %}
+                                <div class="invalid-feedback d-block">
+                                    {{ form.email.errors }}
+                                </div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-40">
+                            <label for="{{ form.phone.id_for_label }}" class="form-label text-purple">Your Phone Number</label>
+                            {{ form.phone|addclass:"form-control" }}
+                            {% if form.phone.errors %}
+                                <div class="invalid-feedback d-block">
+                                    {{ form.phone.errors }}
+                                </div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-40">
+                            <label for="{{ form.company.id_for_label }}" class="form-label text-purple">Your Company</label>
+                            {{ form.company|addclass:"form-control" }}
+                            {% if form.company.errors %}
+                                <div class="invalid-feedback d-block">
+                                    {{ form.company.errors }}
+                                </div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-40">
+                            <label for="{{ form.message.id_for_label }}" class="form-label text-purple">Message (Optional)</label>
+                            {{ form.message|addclass:"form-control" }}
+                            {% if form.message.errors %}
+                                <div class="invalid-feedback d-block">
+                                    {{ form.message.errors }}
+                                </div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mt-4">
+                            <button type="submit" class="btn btn-primary btn-lg w-100">Submit</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            {% if selected_offering %}
+            <div class="w-lg-34 bg-purple-50 rounded-16 p-24 d-flex flex-column">
+                <div class="d-flex align-items-center mb-24">
+                    <div class="card__image mb-0">
+                        {% if selected_offering.service.logo %}
+                            <img class="img-fluid" src="{{ selected_offering.service.logo.url }}" alt="">
+                        {% endif %}
+                    </div>
+                    <div class="card__header ps-16">
+                        <h3 class="card__title">{{ service.name }}</h3>
+                        <p class="card__subtitle mb-0">on {{ selected_offering.cloud_provider.name }}</p>
+                    </div>
+                </div>
+
+                {% if selected_plan %}
+                <div class="mb-24">
+                    <div class="bg-white border-all rounded-7 p-20">
+                        <h3 class="text-purple fs-18 fw-semibold lh-1-7 mb-0">{{ selected_plan.name }}</h3>
                         {% if selected_plan.prices.exists %}
-                            <p><strong>Pricing:</strong></p>
-                            <ul class="list-unstyled">
+                        <div>
+                            <ul class="list-unstyled text-gray-500 fs-14 lh-1-7 ps-0 mb-0">
                                 {% for price in selected_plan.prices.all %}
-                                    <li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
+                                <li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
                                 {% endfor %}
                             </ul>
+                        </div>
                         {% endif %}
-                    {% endif %}
+                    </div>
                 </div>
                 {% endif %}
-
-                {% if messages %}
-                    {% for message in messages %}
-                        <div class="alert alert-{{ message.tags }}">
-                            {{ message }}
-                        </div>
-                    {% endfor %}
-                {% endif %}
-
-                <form method="post">
-                    {% csrf_token %}
-
-                    <div class="mb-3">
-                        <label for="{{ form.name.id_for_label }}" class="form-label">Name</label>
-                        {{ form.name }}
-                        {% if form.name.errors %}
-                            <div class="invalid-feedback d-block">
-                                {{ form.name.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="{{ form.company.id_for_label }}" class="form-label">Company</label>
-                        {{ form.company }}
-                        {% if form.company.errors %}
-                            <div class="invalid-feedback d-block">
-                                {{ form.company.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="{{ form.email.id_for_label }}" class="form-label">Email</label>
-                        {{ form.email }}
-                        {% if form.email.errors %}
-                            <div class="invalid-feedback d-block">
-                                {{ form.email.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="{{ form.phone.id_for_label }}" class="form-label">Phone</label>
-                        {{ form.phone }}
-                        {% if form.phone.errors %}
-                            <div class="invalid-feedback d-block">
-                                {{ form.phone.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="{{ form.message.id_for_label }}" class="form-label">Message (Optional)</label>
-                        {{ form.message }}
-                        {% if form.message.errors %}
-                            <div class="invalid-feedback d-block">
-                                {{ form.message.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-                    
-                    <div class="mt-4">
-                        <button type="submit" class="btn btn-primary">Submit</button>
-                        <a href="{% url 'services:service_detail' service.slug %}" class="btn btn-secondary">Cancel</a>
-                    </div>
-                </form>
             </div>
+            {% endif %}
         </div>
     </div>
-</div>
+</section>
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templates/services/offering_detail.html b/hub/services/templates/services/offering_detail.html
index 32c4eb7..a51c4ad 100644
--- a/hub/services/templates/services/offering_detail.html
+++ b/hub/services/templates/services/offering_detail.html
@@ -1,87 +1,160 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="card mb-4">
-    <div class="card-body">
-        <div class="d-flex justify-content-between align-items-start mb-4">
-            <div class="d-flex align-items-start">
-                {% if offering.service.logo %}
-                    <img src="{{ offering.service.logo.url }}" alt="{{ offering.service.name }} logo" class="me-4" 
-                         style="max-height: 120px; max-width: 240px; object-fit: contain;">
-                {% endif %}
-                <div>
-                    <h2 class="card-title mb-2">{{ offering.service.name }}</h2>
-                    <h4 class="text-muted">
-                        on 
-                        <a href="{{ offering.cloud_provider.get_absolute_url }}" class="text-decoration-none">
-                            {{ offering.cloud_provider.name }}
-                        </a>
-                    </h4>
+<section class="section">
+    <div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
+        <div class="row">
+            <!-- Left Sidebar -->
+            <div class="col-12 col-lg-3">
+                <div class="pr-lg-6">
+                    <!-- Logo -->
+                    <div class="mb-40 border rounded-4 p-4 d-flex align-items-center justify-content-center" style="min-height: 160px;">
+                        {% if offering.service.logo %}
+                            <img class="img-fluid w-100 w-lg-auto" src="{{ offering.service.logo.url }}" 
+                                 alt="{{ offering.service.name }} logo" style="max-height: 120px; object-fit: contain;">
+                        {% endif %}
+                    </div>
+
+                    <!-- Highlights -->
+                    {% if offering.highlights.exists %}
+                    <div class="mb-40">
+                        <h3 class="fw-semibold mb-12">Highlights</h3>
+                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
+                            {% for highlight in offering.highlights.all %}
+                            <li>
+                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="">
+                                    <span class="pr-10">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
+                                            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" fill="#9A63EC"/>
+                                        </svg>
+                                    </span>
+                                    <span>{{ highlight.name }}</span>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
+
+                    <!-- Consulting Partners -->
+                    {% if  offering.service.consulting_partners.exists %}
+                    <div class="mb-40">
+                        <h3 class="fw-semibold mb-12">Consulting Partners</h3>
+                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
+                            {% for partner in  offering.service.consulting_partners.all %}
+                            <li>
+                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ partner.get_absolute_url }}">
+                                    <span class="pr-10">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
+                                            <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" fill="#9A63EC"/>
+                                        </svg>
+                                    </span>
+                                    <span>{{ partner.name }}</span>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
+
+                    <!-- External Links -->
+                    {% if offering.service.external_links.exists %}
+                    <div class="mb-40">
+                        <h3 class="fw-semibold mb-12">External Links</h3>
+                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
+                            {% for link in offering.service.external_links.all %}
+                            <li>
+                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ link.url }}" target="_blank">
+                                    <span class="pr-10">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+                                            <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" fill="#9A63EC"/>
+                                            <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" fill="#9A63EC"/>
+                                          </svg>
+                                    </span>
+                                    <span>{{ link.description }}</span>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
                 </div>
             </div>
-            {% if offering.cloud_provider.logo %}
-                <img src="{{ offering.cloud_provider.logo.url }}" 
-                     alt="{{ offering.cloud_provider.name }} logo" 
-                     style="max-height: 80px; max-width: 160px; object-fit: contain;">
-            {% endif %}
-        </div>
 
-        <div class="rich-text-content mb-4">
-            {{ offering.description|safe }}
-        </div>
-    </div>
-</div>
-
-<!-- Plans -->
-<div class="card mb-4">
-    <div class="card-body">
-        <h3 class="mb-4">Available Plans</h3>
-        <div class="row row-cols-1 row-cols-md-3 g-4">
-            {% for plan in offering.plans.all %}
-                <div class="col">
-                    <div class="card h-100 {% if plan.is_default %}border-primary{% endif %}">
-                        {% if plan.is_default %}
-                            <div class="card-header text-primary">
-                                Recommended Plan
-                            </div>
-                        {% endif %}
-                        <div class="card-body">
-                            <h4 class="card-title mb-3">{{ plan.name }}</h4>
-                            
-                            <div class="rich-text-content mb-3">
-                                {{ plan.description|safe }}
-                            </div>
-
-                            {% if plan.features %}
-                                <div class="rich-text-content mb-3">
-                                    {{ plan.features|safe }}
-                                </div>
+            <!-- Main Content -->
+            <div class="col-12 col-lg-9">
+                <div class="pr-lg-32">
+                    <!-- Header -->
+                    <div class="pt-60 pb-lg-60 w-lg-70">
+                        <header>
+                            {% if offering.cloud_provider.logo %}
+                            <p class="mb-6"><a href="{{ offering.cloud_provider.website }}" target="_blank">
+                                <img class="img-fluid" src="{{ offering.cloud_provider.logo.url }}" 
+                                     alt="{{ offering.cloud_provider.name }} logo" style="max-height: 40px;"></a>
+                            </p>
                             {% endif %}
+                            <h2 class="fs-50 fw-semibold lh-1 mb-12">{{ offering.service.name }}</h2>
+                        </header>
+                        <div class="fs-19 text-gray-500">
+                            {% for category in offering.service.categories.all %}
+                                <button class="btn btn-tertiary btn-sm mr-12">{{ category.full_path }}</button>
+                            {% endfor %}
+                        </div>
+                        <div class="fs-19 text-gray-500">
+                            {{ offering.short_description|safe }}
+                        </div>
+                    </div>
 
-                            <div class="mb-3">
-                                {% for price in plan.prices.all %}
-                                    <div class="mb-2">
-                                        <strong>{{ price.currency.symbol }}{{ price.price }}</strong> 
-                                        {{ price.currency.code }} per {{ price.term.name }}
+                    <!-- Description -->
+                    <div class="pt-40 pt-lg-34">
+                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Overview</h3>
+                        <div class="fs-19 text-gray-500">
+                            {{ offering.description|safe }}
+                        </div>
+                    </div>
+
+                    <!-- Plans -->
+                    <div class="pt-24">
+                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Available Plans</h3>
+                        <div class="row">
+                            {% for plan in offering.plans.all %}
+                            <div class="col-12 col-lg-6 {% if not forloop.last %}mb-20 mb-lg-0{% endif %}">
+                                <div class="bg-purple-50 rounded-16 border-all p-24">
+                                    <div class="text-black mb-20">
+                                        <p class="mb-0">{{ plan.description|safe }}</p>
                                     </div>
-                                {% endfor %}
+                                    <div class="bg-white border-all rounded-7 p-20 mb-20">
+                                        <h3 class="text-purple fs-22 fw-semibold lh-1-7 mb-0">{{ plan.name }}</h3>
+                                        <div>
+                                            <ul class="list-unstyled text-gray-500 fs-19 lh-1-7 ps-0 mb-0">
+                                                {% for price in plan.prices.all %}
+                                                <li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
+                                                {% endfor %}
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <a class="btn btn-primary btn-lg w-100" 
+                                           href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}&plan={{ plan.id }}">
+                                            Order Now
+                                        </a>
+                                    </div>
+                                </div>
                             </div>
-
-                            <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}&plan={{ plan.id }}" 
-                               class="btn btn-success">Select This Plan</a>
+                            {% empty %}
+                            <div class="col-12">
+                                <div class="alert alert-info">
+                                    No plans available yet.
+                                    <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}" 
+                                       class="btn btn-success ms-3">Show Interest</a>
+                                </div>
+                            </div>
+                            {% endfor %}
                         </div>
                     </div>
                 </div>
-            {% empty %}
-                <div class="col-12">
-                    <div class="alert alert-info">
-                        No plans available yet.
-                        <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}" 
-                           class="btn btn-success ms-3">Show Interest</a>
-                    </div>
-                </div>
-            {% endfor %}
+            </div>
         </div>
     </div>
-</div>
+</section>
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templates/services/offering_list.html b/hub/services/templates/services/offering_list.html
index 42340fb..4defc7f 100644
--- a/hub/services/templates/services/offering_list.html
+++ b/hub/services/templates/services/offering_list.html
@@ -1,167 +1,204 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="card">
-            <div class="card-body">
-                <h5 class="card-title">Filters</h5>
-                <form method="get">
-                    <div class="mb-3">
-                        <label for="search" class="form-label">Search</label>
-                        <input type="text" class="form-control" id="search" name="search" value="{{ request.GET.search }}">
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="cloud_provider" class="form-label">Cloud Provider</label>
-                        <select class="form-select" id="cloud_provider" name="cloud_provider">
-                            <option value="">All Providers</option>
-                            {% for provider in cloud_providers %}
-                                <option value="{{ provider.id }}" {% if request.GET.cloud_provider == provider.id|stringformat:'i' %}selected{% endif %}>
-                                    {{ provider.name }}
-                                </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="category" class="form-label">Category</label>
-                        <select class="form-select" id="category" name="category">
-                            <option value="">All Categories</option>
-                            {% for category in categories %}
-                                <option value="{{ category.id }}" {% if request.GET.category == category.id|stringformat:'i' %}selected{% endif %}>
-                                    {{ category.name }}
-                                </option>
-                                {% for subcategory in category.children.all %}
-                                    <option value="{{ subcategory.id }}" {% if request.GET.category == subcategory.id|stringformat:'i' %}selected{% endif %}>
-                                        &nbsp;&nbsp;&nbsp;{{ subcategory.name }}
-                                    </option>
-                                {% endfor %}
-                            {% endfor %}
-                        </select>
-                    </div>
-                    
-                    <button type="submit" class="btn btn-primary">Apply Filters</button>
-                    <a href="{% url 'services:offering_list' %}" class="btn btn-secondary">Clear</a>
-                </form>
+<section class="section bg-primary-subtle">
+    <div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
+        <header class="section-primary__header text-center">
+            <h2 class="section-h1 fs-40 fs-lg-64 mb-24">Service Offerings</h2>
+            <div class="text-gray-300 w-lg-37 mx-auto">
+                <p class="mb-0">Explore our available service offerings</p>
             </div>
-        </div>
+        </header>
     </div>
-    
-    <div class="col-md-9">
-        <div class="row row-cols-1 row-cols-md-2 g-4">
-            {% for offering in offerings %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-start mb-3">
-                                <div class="me-3">
-                                    {% if offering.service.logo %}
-                                        <img src="{{ offering.service.logo.url }}" 
-                                             alt="{{ offering.service.name }}" 
-                                             style="max-height: 50px; max-width: 100px; object-fit: contain;">
-                                    {% endif %}
+</section>
+
+<section class="section">
+    <div class="container-xl mx-auto px-3 px-lg-0 pt-60 pt-lg-80 pb-40">
+        <div x-data="{ open: window.innerWidth > 1024 }"
+            @resize.window="open = window.innerWidth > 1024 ? open : true" class="d-lg-flex">
+            <!-- Filters -->
+            <div class="w-lg-20 flex-none">
+                <!-- Mobile Menu -->
+                <div class="page-action d-lg-none mb-40">
+                    <button @click="open = !open"
+                        class="btn btn-outline-primary btn-md w-100 d-flex justify-content-center align-items-center"
+                        type="button">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <mask id="mask0_115_3182" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0"
+                                y="0" width="24" height="24">
+                                <rect width="24" height="24" fill="#D9D9D9" />
+                            </mask>
+                            <g mask="url(#mask0_115_3182)">
+                                <path d="M7 18V16H17V18H7ZM5 13V11H19V13H5ZM3 8V6H21V8H3Z" fill="#9A63EC" />
+                            </g>
+                        </svg>
+                        <span class="ms-2">Filters</span>
+                    </button>
+                </div>
+                <!-- Desktop View -->
+                <div x-cloak x-show="open || window.innerWidth >= 1024" class="w-lg-85" x-collapse>
+                    <div class="d-flex d-lg-none justify-content-between align-items-center mb-24"
+                        role="button">
+                        <h3 class="sidebar-dropdown__title mb-0">Filters</h3>
+                        <span @click="open = false">
+                            <svg width="24" height="25" viewBox="0 0 24 25" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <mask id="mask0_115_3177" style="mask-type:alpha" maskUnits="userSpaceOnUse"
+                                    x="0" y="0" width="24" height="25">
+                                    <rect y="0.5" width="24" height="24" fill="#D9D9D9" />
+                                </mask>
+                                <g mask="url(#mask0_115_3177)">
+                                    <path
+                                        d="M6.4 19.5L5 18.1L10.6 12.5L5 6.9L6.4 5.5L12 11.1L17.6 5.5L19 6.9L13.4 12.5L19 18.1L17.6 19.5L12 13.9L6.4 19.5Z"
+                                        fill="#160037" />
+                                </g>
+                            </svg>
+                        </span>
+                    </div>
+
+                    <div class="search-form position-relative mb-24">
+                        <form method="get" x-data="{submitForm() { $refs.filterForm.submit(); } }" x-ref="filterForm">
+                            <!-- Search -->
+                            <div class="mb-24">
+                                <label for="search" class="d-none">Search</label>
+                                <input type="text" id="search" class="input-search" placeholder="Search" name="search" value="{{ request.GET.search }}">
+                                <button class="search-button position-absolute top-0 start-0 d-flex justify-content-center align-items-center border-0 bg-transparent p-0"
+                                    type="button" title="search">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M17.5 17.5L22 22" stroke="#9A63EC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"
+                                            stroke="#9A63EC" stroke-width="1.5" stroke-linejoin="round" />
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <!-- Service Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Service</h3>
                                 </div>
                                 <div>
-                                    <h5 class="card-title mb-1">
-                                        <a href="{{ offering.service.get_absolute_url }}" class="text-decoration-none">
-                                            {{ offering.service.name }}
-                                        </a>
-                                    </h5>
-                                    <div class="d-flex align-items-center">
-                                        {% if offering.cloud_provider.logo %}
-                                            <a href="{{ offering.cloud_provider.get_absolute_url }}" class="me-2">
-                                                <img src="{{ offering.cloud_provider.logo.url }}" 
-                                                     alt="{{ offering.cloud_provider.name }}" 
-                                                     style="max-height: 25px; max-width: 50px; object-fit: contain;">
-                                            </a>
-                                        {% endif %}
-                                        <small class="text-muted">
-                                            {{ offering.cloud_provider.name }}
-                                        </small>
+                                    <select class="form-select" id="service" name="service" @change="submitForm()">
+                                        <option value="">All Services</option>
+                                        {% for service in services %}
+                                            <option value="{{ service.id }}" {% if request.GET.service == service.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ service.name }}
+                                            </option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            </div>
+
+                            <!-- Cloud Provider Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Cloud Provider</h3>
+                                </div>
+                                <div>
+                                    <select class="form-select" id="cloud_provider" name="cloud_provider" @change="submitForm()">
+                                        <option value="">All Providers</option>
+                                        {% for provider in cloud_providers %}
+                                            <option value="{{ provider.id }}" {% if request.GET.cloud_provider == provider.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ provider.name }}
+                                            </option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            </div>
+
+                            <!-- Category Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Category</h3>
+                                </div>
+                                <div>
+                                    <select class="form-select" id="category" name="category" @change="submitForm()">
+                                        <option value="">All Categories</option>
+                                        {% for category in categories %}
+                                            <option value="{{ category.id }}" {% if request.GET.category == category.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ category.name }}
+                                            </option>
+                                            {% for subcategory in category.children.all %}
+                                                <option value="{{ subcategory.id }}" {% if request.GET.category == subcategory.id|stringformat:'i' %}selected{% endif %}>
+                                                    &nbsp;&nbsp;&nbsp;{{ subcategory.name }}
+                                                </option>
+                                            {% endfor %}
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            </div>
+
+                            <!-- Filter Actions -->
+                            <div class="d-flex gap-2">
+                                <a href="{% url 'services:offering_list' %}" class="btn btn-outline-secondary btn-sm">Clear</a>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Offerings Listing -->
+            <div class="section__grid flex-1">
+                <div class="row">
+                    {% for offering in offerings %}
+                    <div class="col-12 col-md-6 col-lg-4 mb-30">
+                        <div class="card h-100 d-flex flex-column">
+                            <div class="card__content d-flex flex-column flex-grow-1">
+                                <div class="card__header">
+                                    <div class="d-flex align-items-start mb-3">
+                                        <div class="me-3">
+                                            {% if offering.service.logo %}
+                                                <img src="{{ offering.service.logo.url }}" 
+                                                     alt="{{ offering.service.name }}" 
+                                                     style="max-height: 50px; max-width: 100px; object-fit: contain;">
+                                            {% endif %}
+                                        </div>
+                                        <div>
+                                            <h3 class="card__title">
+                                                <a href="{{ offering.get_absolute_url }}" class="text-decoration-none">
+                                                    {{ offering.service.name }}
+                                                </a>
+                                            </h3>
+                                            <div class="d-flex align-items-center">
+                                                {% if offering.cloud_provider.logo %}
+                                                    <a href="{{ offering.get_absolute_url }}" class="me-2">
+                                                        <img src="{{ offering.cloud_provider.logo.url }}" 
+                                                             alt="{{ offering.cloud_provider.name }}" 
+                                                             style="max-height: 30px; max-width: 100px; object-fit: contain;">
+                                                    </a>
+                                                {% else %}
+                                                <small class="text-muted">
+                                                    {{ offering.cloud_provider.name }}
+                                                </small>
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="mb-3 card__subtitle">
+                                        {% for category in offering.service.categories.all %}
+                                            <span>{{ category.full_path }}</span>
+                                        {% endfor %}
                                     </div>
                                 </div>
-                            </div>
 
-                            <div class="mb-2">
-                                {% for category in offering.service.categories.all %}
-                                    <span class="badge bg-secondary me-1">{{ category.full_path }}</span>
-                                {% endfor %}
-                            </div>
-
-                            <div class="rich-text-content mb-3">
-                                {{ offering.description|safe|truncatewords_html:30 }}
-                            </div>
-
-                            {% if offering.plans.exists %}
-                                <div class="mb-3">
-                                    <strong>Available Plans:</strong>
-                                    <ul class="list-unstyled small">
-                                        {% for plan in offering.plans.all %}
-                                            <li>• {{ plan.name }}</li>
-                                        {% endfor %}
-                                    </ul>
+                                <div class="card__desc flex-grow-1 rich-text-content">
+                                    {{ offering.description|safe|truncatewords_html:30 }}
                                 </div>
-                            {% endif %}
-
-                            <div class="mt-auto d-flex gap-2">
-                                <a href="{{ offering.get_absolute_url }}" class="btn btn-primary">View Details</a>
-                                {% if offering.plans.exists %}
-                                {% if offering.status == 'available' %}
-                                    {% if offering.plans.count == 1 %}
-                                        {% with plan=offering.plans.first %}
-                                            <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}&plan={{ plan.id }}" 
-                                               class="btn btn-success">Order</a>
-                                        {% endwith %}
-                                    {% else %}
-                                        <div class="dropdown">
-                                            <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown">
-                                                Order
-                                            </button>
-                                            <ul class="dropdown-menu">
-                                                {% for plan in offering.plans.all %}
-                                                    <li>
-                                                        <a class="dropdown-item" 
-                                                           href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}&plan={{ plan.id }}">
-                                                            {{ plan.name }}
-                                                            {% if plan.is_default %}(Recommended){% endif %}
-                                                        </a>
-                                                    </li>
-                                                {% endfor %}
-                                            </ul>
-                                        </div>
-                                    {% endif %}
-                                {% elif offering.status == 'planned' %}
-                                    <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}" 
-                                       class="btn btn-success">Show Interest</a>
-                                {% else %}
-                                    <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}" 
-                                       class="btn btn-success">Request Information</a>
-                                {% endif %}
-                            {% else %}
-                                {% if offering.status == 'available' %}
-                                    <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}" 
-                                       class="btn btn-success">Order</a>
-                                {% elif offering.status == 'planned' %}
-                                    <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}" 
-                                       class="btn btn-success">Show Interest</a>
-                                {% else %}
-                                    <a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}" 
-                                       class="btn btn-success">Request Information</a>
-                                {% endif %}
-                            {% endif %}
                             </div>
                         </div>
                     </div>
-                </div>
-            {% empty %}
-                <div class="col">
-                    <div class="alert alert-info">
-                        No service offerings found matching your criteria.
+                    {% empty %}
+                    <div class="col-12">
+                        <div class="alert alert-info">
+                            No service offerings found matching your criteria.
+                        </div>
                     </div>
+                    {% endfor %}
                 </div>
-            {% endfor %}
+            </div>
         </div>
     </div>
-</div>
+</section>
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templates/services/partner_detail.html b/hub/services/templates/services/partner_detail.html
index b93ca54..e7fcd4c 100644
--- a/hub/services/templates/services/partner_detail.html
+++ b/hub/services/templates/services/partner_detail.html
@@ -1,71 +1,77 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="card">
-    <div class="card-body">
-        <div class="d-flex align-items-start mb-4">
-            {% if partner.logo %}
-                <img src="{{ partner.logo.url }}" alt="{{ partner.name }} logo" class="me-4" 
-                     style="max-height: 120px; max-width: 240px; object-fit: contain;">
-            {% endif %}
-            <div>
-                <h2 class="card-title mb-3">{{ partner.name }}</h2>
-                {% if partner.website %}
-                    <a href="{{ partner.website }}" class="btn btn-outline-primary mb-3" target="_blank">
-                        Visit Website
-                    </a>
-                {% endif %}
-                <div class="rich-text-content">
-                    {{ partner.description|safe }}
+<section class="section bg-primary-subtle">
+    <div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
+        <div class="row align-items-center">
+            <div class="col-12 col-lg-5 mb-47 mb-lg-0">
+                <header class="section-primary__header">
+                    <h2 class="section-h1 fs-40 fs-lg-64 mb-14">{{ partner.name }}</h2>
+                    <div class="text-gray-300 mb-14">
+                        <div class="rich-text-content">
+                            {{ partner.description|safe }}
+                        </div>
+                    </div>
+                    {% if partner.website %}
+                    <div>
+                        <a class="btn btn-primary btn-lg" href="{{ partner.website }}" target="_blank" role="button">Visit Website</a>
+                    </div>
+                    {% endif %}
+                </header>
+            </div>
+            <div class="col-12 col-lg-7">
+                <div>
+                    {% if partner.logo %}
+                    <img class="img-fluid d-block ml-lg-auto" src="{{ partner.logo.url }}" alt="{{ partner.name }} logo">
+                    {% endif %}
                 </div>
             </div>
         </div>
+    </div>
+</section>
 
-        <h3 class="mb-4">Available Services</h3>
-        <div class="row row-cols-1 row-cols-md-2 g-4">
-            {% for service in services %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-center mb-3">
-                                {% if service.logo %}
+<div class="container mx-auto px-20 px-lg-0 py-60">
+    <h3 class="section-h2 fs-32 fs-lg-48 mb-40 mt-5">Available Services</h3>
+    <p>{{ partner.name }} provides consulting services for the following services</p>
+    <div class="row row-cols-1 row-cols-md-2 g-4">
+        {% for service in services %}
+            <div class="col">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <div class="d-flex align-items-center mb-3">
+                            {% if service.logo %}
+                                <a href="{{ service.get_absolute_url }}">
                                     <img src="{{ service.logo.url }}" alt="{{ service.name }} logo" 
                                          class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
-                                {% endif %}
-                                <div>
-                                    <h5 class="card-title mb-0">{{ service.name }}</h5>
-                                    <div class="d-flex align-items-center mt-2">
-                                        {% if service.cloud_provider.logo %}
-                                            <img src="{{ service.cloud_provider.logo.url }}" alt="{{ service.cloud_provider.name }} logo" 
-                                                 class="me-2" style="max-height: 25px; max-width: 50px; object-fit: contain;">
-                                        {% endif %}
-                                        <h6 class="card-subtitle text-muted mb-0">
-                                            <a href="{{ service.cloud_provider.get_absolute_url }}" 
-                                               class="text-decoration-none text-muted">{{ service.cloud_provider.name }}</a>
-                                        </h6>
-                                    </div>
+                                </a>
+                            {% endif %}
+                            <div>
+                                <h5 class="card-title mb-0"><a href="{{ service.get_absolute_url }}" class="text-decoration-none">{{ service.name }}</a></h5>
+                                <div class="d-flex align-items-center mt-2">
+                                    {% if service.cloud_provider.logo %}
+                                        <img src="{{ service.cloud_provider.logo.url }}" alt="{{ service.cloud_provider.name }} logo" 
+                                             class="me-2" style="max-height: 25px; max-width: 50px; object-fit: contain;">
+                                    {% endif %}
+                                    <h6 class="card-subtitle text-muted mb-0">
+                                        <a href="{{ service.cloud_provider.get_absolute_url }}" 
+                                           class="text-decoration-none text-muted">{{ service.cloud_provider.name }}</a>
+                                    </h6>
                                 </div>
                             </div>
-                            <div class="card-text description-preview mb-3">
-                                {{ service.description|safe|truncatewords_html:30 }}
-                            </div>
-                            <div class="mb-2">
-                                {% for category in service.categories.all %}
-                                    <span class="badge bg-secondary me-1">{{ category.full_path }}</span>
-                                {% endfor %}
-                            </div>
-                            <a href="{{ service.get_absolute_url }}" class="btn btn-primary">View Details</a>
+                        </div>
+                        <div class="card-text description-preview mb-3">
+                            {{ service.description|safe|truncatewords_html:30 }}
                         </div>
                     </div>
                 </div>
-            {% empty %}
-                <div class="col-12">
-                    <div class="alert alert-info">
-                        No services available from this partner yet.
-                    </div>
+            </div>
+        {% empty %}
+            <div class="col-12">
+                <div class="alert alert-info">
+                    No services available from this partner yet.
                 </div>
-            {% endfor %}
-        </div>
+            </div>
+        {% endfor %}
     </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templates/services/partner_list.html b/hub/services/templates/services/partner_list.html
index c128beb..bc5d342 100644
--- a/hub/services/templates/services/partner_list.html
+++ b/hub/services/templates/services/partner_list.html
@@ -1,93 +1,163 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="card">
-            <div class="card-body">
-                <h5 class="card-title">Filters</h5>
-                <form method="get">
-                    <div class="mb-3">
-                        <label for="search" class="form-label">Search</label>
-                        <input type="text" class="form-control" id="search" name="search" value="{{ request.GET.search }}">
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="cloud_provider" class="form-label">Cloud Provider</label>
-                        <select class="form-select" id="cloud_provider" name="cloud_provider">
-                            <option value="">All Providers</option>
-                            {% for provider in cloud_providers %}
-                                <option value="{{ provider.id }}" {% if request.GET.cloud_provider == provider.id|stringformat:'i' %}selected{% endif %}>
-                                    {{ provider.name }}
-                                </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    
-                    <button type="submit" class="btn btn-primary">Apply Filters</button>
-                    <a href="{% url 'services:partner_list' %}" class="btn btn-secondary">Clear</a>
-                </form>
+<section class="section bg-primary-subtle">
+    <div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
+        <header class="section-primary__header text-center">
+            <h2 class="section-h1 fs-40 fs-lg-64 mb-24">Consulting Partners</h2>
+            <div class="text-gray-300 w-lg-37 mx-auto">
+                <p class="mb-0">Explore our available consulting partners</p>
             </div>
-        </div>
+        </header>
     </div>
-    
-    <div class="col-md-9">
-        <div class="row row-cols-1 row-cols-md-2 g-4">
-            {% for partner in partners %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-center mb-3">
-                                {% if partner.logo %}
-                                    <img src="{{ partner.logo.url }}" 
-                                         alt="{{ partner.name }}" 
-                                         class="me-3" style="max-height: 60px; max-width: 120px; object-fit: contain;">
-                                {% endif %}
-                                <h5 class="card-title mb-0">{{ partner.name }}</h5>
+</section>
+
+<section class="section">
+    <div class="container-xl mx-auto px-3 px-lg-0 pt-60 pt-lg-80 pb-40">
+        <div x-data="{ open: window.innerWidth > 1024 }"
+            @resize.window="open = window.innerWidth > 1024 ? open : true" class="d-lg-flex">
+            <!-- Filters -->
+            <div class="w-lg-20 flex-none">
+                <!-- Mobile Menu -->
+                <div class="page-action d-lg-none mb-40">
+                    <button @click="open = !open"
+                        class="btn btn-outline-primary btn-md w-100 d-flex justify-content-center align-items-center"
+                        type="button">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <mask id="mask0_115_3182" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0"
+                                y="0" width="24" height="24">
+                                <rect width="24" height="24" fill="#D9D9D9" />
+                            </mask>
+                            <g mask="url(#mask0_115_3182)">
+                                <path d="M7 18V16H17V18H7ZM5 13V11H19V13H5ZM3 8V6H21V8H3Z" fill="#9A63EC" />
+                            </g>
+                        </svg>
+                        <span class="ms-2">Filters</span>
+                    </button>
+                </div>
+                <!-- Desktop View -->
+                <div x-cloak x-show="open || window.innerWidth >= 1024" class="w-lg-85" x-collapse>
+                    <div class="d-flex d-lg-none justify-content-between align-items-center mb-24"
+                        role="button">
+                        <h3 class="sidebar-dropdown__title mb-0">Filters</h3>
+                        <span @click="open = false">
+                            <svg width="24" height="25" viewBox="0 0 24 25" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <mask id="mask0_115_3177" style="mask-type:alpha" maskUnits="userSpaceOnUse"
+                                    x="0" y="0" width="24" height="25">
+                                    <rect y="0.5" width="24" height="24" fill="#D9D9D9" />
+                                </mask>
+                                <g mask="url(#mask0_115_3177)">
+                                    <path d="M6.4 19.5L5 18.1L10.6 12.5L5 6.9L6.4 5.5L12 11.1L17.6 5.5L19 6.9L13.4 12.5L19 18.1L17.6 19.5L12 13.9L6.4 19.5Z"
+                                        fill="#160037" />
+                                </g>
+                            </svg>
+                        </span>
+                    </div>
+
+                    <div class="search-form position-relative mb-24">
+                        <form method="get" x-data="{submitForm() { $refs.filterForm.submit(); } }" x-ref="filterForm">
+                            <!-- Search -->
+                            <div class="mb-24">
+                                <label for="search" class="d-none">Search</label>
+                                <input type="text" id="search" class="input-search" placeholder="Search" name="search" value="{{ request.GET.search }}">
+                                <button class="search-button position-absolute top-0 start-0 d-flex justify-content-center align-items-center border-0 bg-transparent p-0"
+                                    type="button" title="search">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M17.5 17.5L22 22" stroke="#9A63EC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"
+                                            stroke="#9A63EC" stroke-width="1.5" stroke-linejoin="round" />
+                                    </svg>
+                                </button>
                             </div>
 
-                            <div class="rich-text-content mb-3">
-                                {{ partner.description|safe|truncatewords_html:50 }}
-                            </div>
-
-                            <div class="mb-3">
-                                <strong>Cloud Providers:</strong>
-                                <div class="mt-2">
-                                    {% for provider in partner.cloud_providers.all %}
-                                        <div class="d-inline-block me-2 mb-2">
-                                            {% if provider.logo %}
-                                                <img src="{{ provider.logo.url }}" 
-                                                     alt="{{ provider.name }}" 
-                                                     style="max-height: 25px; max-width: 50px; object-fit: contain;">
-                                            {% else %}
-                                                <span class="badge bg-secondary">{{ provider.name }}</span>
-                                            {% endif %}
-                                        </div>
-                                    {% endfor %}
+                            <!-- Service Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Service</h3>
+                                </div>
+                                <div>
+                                    <select class="form-select" id="service" name="service" @change="submitForm()">
+                                        <option value="">All Services</option>
+                                        {% for service in services %}
+                                            <option value="{{ service.id }}" {% if request.GET.service == service.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ service.name }}
+                                            </option>
+                                        {% endfor %}
+                                    </select>
                                 </div>
                             </div>
 
-                            <div class="mb-3">
-                                <strong>Services Available:</strong> {{ partner.services.count }}
+                            <!-- Cloud Provider Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Cloud Provider</h3>
+                                </div>
+                                <div>
+                                    <select class="form-select" id="cloud_provider" name="cloud_provider" @change="submitForm()">
+                                        <option value="">All Providers</option>
+                                        {% for provider in cloud_providers %}
+                                            <option value="{{ provider.id }}" {% if request.GET.cloud_provider == provider.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ provider.name }}
+                                            </option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
                             </div>
 
-                            <div class="mt-auto">
-                                <a href="{{ partner.get_absolute_url }}" class="btn btn-primary">View Details</a>
-                                {% if partner.website %}
-                                    <a href="{{ partner.website }}" class="btn btn-outline-secondary" target="_blank">Visit Website</a>
-                                {% endif %}
+                            <!-- Filter Actions -->
+                            <div class="d-flex gap-2">
+                                <a href="{% url 'services:partner_list' %}" class="btn btn-outline-secondary btn-sm">Clear</a>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Partners Listing -->
+            <div class="section__grid flex-1">
+                <div class="row">
+                    {% for partner in partners %}
+                    <div class="col-12 col-md-6 col-lg-4 mb-30">
+                        <div class="card h-100 d-flex flex-column">
+                            <div class="card__content d-flex flex-column flex-grow-1">
+                                <div class="card__header">
+                                    <div class="d-flex align-items-start mb-3">
+                                        <div class="me-3">
+                                            <a href="{{ partner.get_absolute_url }}">
+                                                <img src="{{ partner.logo.url }}" 
+                                                     alt="{{ partner.name }}" 
+                                                     style="max-height: 75px; max-width: 200px; object-fit: contain;">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="card__desc flex-grow-1 rich-text-content">
+                                    {{ partner.description|safe|truncatewords_html:30 }}
+                                </div>
+
+                                <div class="card__footer mt-3">
+                                    <div class="d-flex gap-2">
+                                        {% if partner.website %}
+                                            <a href="{{ partner.website }}" class="btn btn-primary btn-sm" target="_blank">Visit Website</a>
+                                        {% endif %}
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            {% empty %}
-                <div class="col">
-                    <div class="alert alert-info">
-                        No consulting partners found matching your criteria.
+                    {% empty %}
+                    <div class="col-12">
+                        <div class="alert alert-info">
+                            No consulting partners found matching your criteria.
+                        </div>
                     </div>
+                    {% endfor %}
                 </div>
-            {% endfor %}
+            </div>
         </div>
     </div>
-</div>
+</section>
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templates/services/provider_detail.html b/hub/services/templates/services/provider_detail.html
index b680070..44dcb1d 100644
--- a/hub/services/templates/services/provider_detail.html
+++ b/hub/services/templates/services/provider_detail.html
@@ -1,56 +1,69 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="card">
-    <div class="card-body">
-        <div class="d-flex align-items-start mb-4">
-            {% if provider.logo %}
-                <img src="{{ provider.logo.url }}" alt="{{ provider.name }} logo" class="me-4" 
-                     style="max-height: 120px; max-width: 240px; object-fit: contain;">
-            {% endif %}
-            <div>
-                <h2 class="card-title mb-3">{{ provider.name }}</h2>
-                <div class="rich-text-content">
-                    {{ provider.description|safe }}
+<section class="section bg-primary-subtle">
+    <div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
+        <div class="row align-items-center">
+            <div class="col-12 col-lg-5 mb-47 mb-lg-0">
+                <header class="section-primary__header">
+                    <h2 class="section-h1 fs-40 fs-lg-64 mb-14">{{ provider.name }}</h2>
+                    <div class="text-gray-300 mb-14">
+                        <div class="rich-text-content">
+                            {{ provider.description|safe }}
+                        </div>
+                    </div>
+                    {% if provider.website %}
+                    <div>
+                        <a class="btn btn-primary btn-lg" href="{{ provider.website }}" target="_blank" role="button">Visit Website</a>
+                    </div>
+                    {% endif %}
+                </header>
+            </div>
+            <div class="col-12 col-lg-7">
+                <div>
+                    {% if provider.logo %}
+                    <img class="img-fluid d-block ml-lg-auto" src="{{ provider.logo.url }}" alt="{{ provider.name }} logo">
+                    {% endif %}
                 </div>
             </div>
         </div>
+    </div>
+</section>
 
-        <h3 class="mb-4">Available Services</h3>
-        <div class="row row-cols-1 row-cols-md-2 g-4">
-            {% for service in services %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-center mb-3">
-                                {% if service.logo %}
-                                    <img src="{{ service.logo.url }}" alt="{{ service.name }} logo" 
+<div class="container mx-auto px-20 px-lg-0 py-60">
+    <h3 class="section-h2 fs-32 fs-lg-48 mb-40 mt-5">Available Services</h3>
+    <p>The following services are available on {{ provider.name }} through Servala</p>
+    <div class="row row-cols-1 row-cols-md-2 g-4">
+        {% for offering in provider.offerings.all %}
+            <div class="col">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <div class="d-flex align-items-center mb-3">
+                            {% if offering.service.logo %}
+                                <a href="{{ offering.get_absolute_url }}">
+                                    <img src="{{ offering.service.logo.url }}" alt="{{ offering.service.name }} logo" 
                                          class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
-                                {% endif %}
-                                <div>
-                                    <h5 class="card-title mb-0">{{ service.name }}</h5>
-                                </div>
+                                </a>
+                            {% endif %}
+                            <div>
+                                <h5 class="card-title mb-0">
+                                    <a href="{{ offering.get_absolute_url }}" class="text-decoration-none">{{ offering.service.name }}</a>
+                                </h5>
                             </div>
-                            <div class="card-text description-preview mb-3">
-                                {{ service.description|safe|truncatewords_html:30 }}
-                            </div>
-                            <div class="mb-2">
-                                {% for category in service.categories.all %}
-                                    <span class="badge bg-secondary me-1">{{ category.full_path }}</span>
-                                {% endfor %}
-                            </div>
-                            <a href="{% url 'services:service_detail' service.slug %}" class="btn btn-primary">View Details</a>
+                        </div>
+                        <div class="card-text description-preview mb-3">
+                            {{ offering.description|safe|truncatewords_html:30 }}
                         </div>
                     </div>
                 </div>
-            {% empty %}
-                <div class="col-12">
-                    <div class="alert alert-info">
-                        No services available from this provider yet.
-                    </div>
+            </div>
+        {% empty %}
+            <div class="col-12">
+                <div class="alert alert-info">
+                    No services available from this provider yet.
                 </div>
-            {% endfor %}
-        </div>
+            </div>
+        {% endfor %}
     </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templates/services/provider_list.html b/hub/services/templates/services/provider_list.html
index e2758fa..8dbb757 100644
--- a/hub/services/templates/services/provider_list.html
+++ b/hub/services/templates/services/provider_list.html
@@ -1,68 +1,129 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="card">
-            <div class="card-body">
-                <h5 class="card-title">Filters</h5>
-                <form method="get">
-                    <div class="mb-3">
-                        <label for="search" class="form-label">Search</label>
-                        <input type="text" class="form-control" id="search" name="search" value="{{ request.GET.search }}">
+<section class="section bg-primary-subtle">
+    <div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
+        <header class="section-primary__header text-center">
+            <h2 class="section-h1 fs-40 fs-lg-64 mb-24">Cloud Providers</h2>
+            <div class="text-gray-300 w-lg-37 mx-auto">
+                <p class="mb-0">Explore our available cloud providers</p>
+            </div>
+        </header>
+    </div>
+</section>
+
+<section class="section">
+    <div class="container-xl mx-auto px-3 px-lg-0 pt-60 pt-lg-80 pb-40">
+        <div x-data="{ open: window.innerWidth > 1024 }"
+            @resize.window="open = window.innerWidth > 1024 ? open : true" class="d-lg-flex">
+            <!-- Filters -->
+            <div class="w-lg-20 flex-none">
+                <!-- Mobile Menu -->
+                <div class="page-action d-lg-none mb-40">
+                    <button @click="open = !open"
+                        class="btn btn-outline-primary btn-md w-100 d-flex justify-content-center align-items-center"
+                        type="button">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <mask id="mask0_115_3182" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0"
+                                y="0" width="24" height="24">
+                                <rect width="24" height="24" fill="#D9D9D9" />
+                            </mask>
+                            <g mask="url(#mask0_115_3182)">
+                                <path d="M7 18V16H17V18H7ZM5 13V11H19V13H5ZM3 8V6H21V8H3Z" fill="#9A63EC" />
+                            </g>
+                        </svg>
+                        <span class="ms-2">Filters</span>
+                    </button>
+                </div>
+                <!-- Desktop View -->
+                <div x-cloak x-show="open || window.innerWidth >= 1024" class="w-lg-85" x-collapse>
+                    <div class="d-flex d-lg-none justify-content-between align-items-center mb-24"
+                        role="button">
+                        <h3 class="sidebar-dropdown__title mb-0">Filters</h3>
+                        <span @click="open = false">
+                            <svg width="24" height="25" viewBox="0 0 24 25" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <mask id="mask0_115_3177" style="mask-type:alpha" maskUnits="userSpaceOnUse"
+                                    x="0" y="0" width="24" height="25">
+                                    <rect y="0.5" width="24" height="24" fill="#D9D9D9" />
+                                </mask>
+                                <g mask="url(#mask0_115_3177)">
+                                    <path d="M6.4 19.5L5 18.1L10.6 12.5L5 6.9L6.4 5.5L12 11.1L17.6 5.5L19 6.9L13.4 12.5L19 18.1L17.6 19.5L12 13.9L6.4 19.5Z"
+                                        fill="#160037" />
+                                </g>
+                            </svg>
+                        </span>
                     </div>
 
-                    <button type="submit" class="btn btn-primary">Apply Filters</button>
-                    <a href="{% url 'services:provider_list' %}" class="btn btn-secondary">Clear</a>
-                </form>
+                    <div class="search-form position-relative mb-24">
+                        <form method="get">
+                            <!-- Search -->
+                            <div class="mb-24">
+                                <label for="search" class="d-none">Search</label>
+                                <input type="text" id="search" class="input-search" placeholder="Search" name="search" value="{{ request.GET.search }}">
+                                <button class="search-button position-absolute top-0 start-0 d-flex justify-content-center align-items-center border-0 bg-transparent p-0"
+                                    type="button" title="search">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M17.5 17.5L22 22" stroke="#9A63EC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"
+                                            stroke="#9A63EC" stroke-width="1.5" stroke-linejoin="round" />
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <!-- Filter Actions -->
+                            <div class="d-flex gap-2">
+                                <a href="{% url 'services:provider_list' %}" class="btn btn-outline-secondary btn-sm">Clear</a>
+                            </div>
+                        </form>
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
-    
-    <div class="col-md-9">
-        <div class="row row-cols-1 row-cols-md-2 g-4">
-            {% for provider in providers %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-center mb-3">
-                                {% if provider.logo %}
-                                    <img src="{{ provider.logo.url }}" 
-                                         alt="{{ provider.name }}" 
-                                         class="me-3" style="max-height: 60px; max-width: 120px; object-fit: contain;">
-                                {% endif %}
-                                <h5 class="card-title mb-0">{{ provider.name }}</h5>
-                            </div>
 
-                            <div class="rich-text-content mb-3">
-                                {{ provider.description|safe|truncatewords_html:50 }}
-                            </div>
+            <!-- Providers Listing -->
+            <div class="section__grid flex-1">
+                <div class="row">
+                    {% for provider in providers %}
+                    <div class="col-12 col-md-6 col-lg-4 mb-30">
+                        <div class="card h-100 d-flex flex-column">
+                            <div class="card__content d-flex flex-column flex-grow-1">
+                                <div class="card__header">
+                                    <div class="d-flex align-items-start mb-3">
+                                        <div class="me-3">
+                                            <a href="{{ provider.get_absolute_url }}">
+                                            <img src="{{ provider.logo.url }}" 
+                                                    alt="{{ provider.name }}" 
+                                                    style="max-height: 70px; max-width: 200px; object-fit: contain;">
+                                                </a>
+                                        </div>
+                                    </div>
+                                </div>
 
-                            <div class="mb-3">
-                                <strong>Services Available:</strong> {{ provider.offerings.count }}
-                            </div>
+                                <div class="card__desc flex-grow-1 rich-text-content">
+                                    {{ provider.description|safe|truncatewords_html:100 }}
+                                </div>
 
-                            <div class="mb-3">
-                                <strong>Partners:</strong> {{ provider.consulting_partners.count }}
-                            </div>
-
-                            <div class="mt-auto">
-                                <a href="{{ provider.get_absolute_url }}" class="btn btn-primary">View Details</a>
-                                {% if provider.website %}
-                                    <a href="{{ provider.website }}" class="btn btn-outline-secondary" target="_blank">Visit Website</a>
-                                {% endif %}
+                                <div class="card__footer mt-3">
+                                    <div class="d-flex gap-2">
+                                        {% if provider.website %}
+                                            <a href="{{ provider.website }}" class="btn btn-primary btn-sm" target="_blank">Visit Website</a>
+                                        {% endif %}
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            {% empty %}
-                <div class="col">
-                    <div class="alert alert-info">
-                        No cloud providers found matching your criteria.
+                    {% empty %}
+                    <div class="col-12">
+                        <div class="alert alert-info">
+                            No cloud providers found matching your criteria.
+                        </div>
                     </div>
+                    {% endfor %}
                 </div>
-            {% endfor %}
+            </div>
         </div>
     </div>
-</div>
+</section>
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templates/services/service_detail.html b/hub/services/templates/services/service_detail.html
index 57bb331..425d849 100644
--- a/hub/services/templates/services/service_detail.html
+++ b/hub/services/templates/services/service_detail.html
@@ -1,165 +1,120 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="card mb-4">
-    <div class="card-body">
-        <div class="d-flex align-items-start mb-4">
-            {% if service.logo %}
-                <img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="me-4" 
-                     style="max-height: 120px; max-width: 240px; object-fit: contain;">
-            {% endif %}
-            <div>
-                <h2 class="card-title mb-3">{{ service.name }}</h2>
-                <div class="mb-3">
-                    {% for category in service.categories.all %}
-                        <span class="badge bg-secondary me-1">{{ category.full_path }}</span>
-                    {% endfor %}
+<section class="section">
+    <div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
+        <div class="row">
+            <!-- Left Sidebar -->
+            <div class="col-12 col-lg-3">
+                <div class="pr-lg-6">
+                    <!-- Logo -->
+                    <div class="mb-40 border rounded-4 p-4 d-flex align-items-center justify-content-center" style="min-height: 160px;">
+                        {% if service.logo %}
+                            <img class="img-fluid w-100 w-lg-auto" src="{{ service.logo.url }}" alt="{{ service.name }} logo" style="max-height: 120px; object-fit: contain;">
+                        {% endif %}
+                    </div>
+
+                    <!-- Offerings -->
+                    {% if service.offerings.exists %}
+                    <div class="mb-40">
+                        <h3 class="fw-semibold mb-12">Cloud Providers</h3>
+                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
+                            {% for offering in service.offerings.all %}
+                            <li>
+                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{% url 'services:offering_detail' offering.slug %}">
+                                    <span class="pr-10">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-fill" viewBox="0 0 16 16">
+                                            <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383" fill="#9A63EC"/>
+                                        </svg>
+                                    </span>
+                                    <span>{{ offering.cloud_provider.name }}</span>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
+
+                    <!-- Consulting Partners -->
+                    {% if service.consulting_partners.exists %}
+                    <div class="mb-40">
+                        <h3 class="fw-semibold mb-12">Consulting Partners</h3>
+                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
+                            {% for partner in service.consulting_partners.all %}
+                            <li>
+                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ partner.get_absolute_url }}">
+                                    <span class="pr-10">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
+                                            <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" fill="#9A63EC"/>
+                                        </svg>
+                                    </span>
+                                    <span>{{ partner.name }}</span>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
+
+                    <!-- External Links -->
+                    {% if service.external_links.exists %}
+                    <div class="mb-40">
+                        <h3 class="fw-semibold mb-12">External Links</h3>
+                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
+                            {% for link in service.external_links.all %}
+                            <li>
+                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ link.url }}" target="_blank">
+                                    <span class="pr-10">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+                                            <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" fill="#9A63EC"/>
+                                            <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" fill="#9A63EC"/>
+                                          </svg>
+                                    </span>
+                                    <span>{{ link.description }}</span>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <div class="col-12 col-lg-9">
+                <div class="pr-lg-32">
+                    <!-- Header -->
+                    <div class="pt-60 pb-lg-60 w-lg-70">
+                        <header>
+                            <h2 class="fs-50 fw-semibold lh-1 mb-12">{{ service.name }}</h2>
+                        </header>
+                        <div class="fs-19 text-gray-500">
+                            {% for category in service.categories.all %}
+                                <button class="btn btn-tertiary btn-sm mr-12">{{ category.full_path }}</button>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                    <!-- Description -->
+                    <div class="pt-40 pt-lg-34">
+                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Overview</h3>
+                        <div class="fs-19 text-gray-500">
+                            {{ service.description|safe }}
+                        </div>
+                    </div>
+
+                    <!-- Features -->
+                    {% if service.features %}
+                    <div class="pt-24">
+                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Features</h3>
+                        <div class="page-content fs-19 text-gray-500">
+                            {{ service.features|safe }}
+                        </div>
+                    </div>
+                    {% endif %}
                 </div>
             </div>
         </div>
-
-        <div class="rich-text-content mb-4">
-            {{ service.description|safe }}
-        </div>
-
-        {% if service.features %}
-            <h3>Features</h3>
-            <div class="rich-text-content mb-4">
-                {{ service.features|safe }}
-            </div>
-        {% endif %}
     </div>
-</div>
-
-<!-- Cloud Provider Offerings -->
-<div class="card mb-4">
-    <div class="card-body">
-        <h3 class="mb-4">Available Offerings</h3>
-        <div class="row row-cols-1 row-cols-md-2 g-4">
-            {% for offering in service.offerings.all %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-center mb-3">
-                                {% if offering.cloud_provider.logo %}
-                                    <img src="{{ offering.cloud_provider.logo.url }}" 
-                                         alt="{{ offering.cloud_provider.name }} logo" 
-                                         class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
-                                {% endif %}
-                                <div>
-                                    <h5 class="card-title mb-0">
-                                        <a href="{{ offering.cloud_provider.get_absolute_url }}" class="text-decoration-none">
-                                            {{ offering.cloud_provider.name }}
-                                        </a>
-                                    </h5>
-                                    {% if offering.cloud_provider.website %}
-                                        <a href="{{ offering.cloud_provider.website }}" class="text-muted small" target="_blank">
-                                            Visit Provider Website
-                                        </a>
-                                    {% endif %}
-                                </div>
-                            </div>
-
-                            <div class="rich-text-content mb-3">
-                                {{ offering.description|safe|truncatewords_html:50 }}
-                            </div>
-
-                            {% if offering.plans.exists %}
-                                <div class="mb-3">
-                                    <h6>Plans:</h6>
-                                    {% for plan in offering.plans.all %}
-                                        <div class="card mb-2">
-                                            <div class="card-body">
-                                                <h6 class="card-title">{{ plan.name }}</h6>
-                                                {% for price in plan.prices.all %}
-                                                    <div class="small text-muted">
-                                                        {{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}
-                                                    </div>
-                                                {% endfor %}
-                                            </div>
-                                        </div>
-                                    {% endfor %}
-                                </div>
-                            {% endif %}
-
-                            <a href="{% url 'services:create_lead' service.slug %}?offering={{ offering.id }}" 
-                            class="btn btn-success">
-                             {% if offering.status == 'available' %}
-                                 Order
-                             {% elif offering.status == 'planned' %}
-                                 Show Interest
-                             {% else %}
-                                 Request Information
-                             {% endif %}
-                         </a>
-                        </div>
-                    </div>
-                </div>
-            {% empty %}
-                <div class="col-12">
-                    <div class="alert alert-info d-flex justify-content-between align-items-center">
-                        <span>No offerings available yet.</span>
-                        <a href="{% url 'services:create_lead' service.slug %}" class="btn btn-success">Show Interest</a>
-                    </div>
-                </div>
-            {% endfor %}
-        </div>
-    </div>
-</div>
-
-<!-- Consulting Partners -->
-{% if service.consulting_partners.exists %}
-<div class="card mb-4">
-    <div class="card-body">
-        <h3 class="mb-4">Consulting Partners</h3>
-        <div class="row row-cols-1 row-cols-md-3 g-4">
-            {% for partner in service.consulting_partners.all %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-center mb-3">
-                                {% if partner.logo %}
-                                    <img src="{{ partner.logo.url }}" 
-                                         alt="{{ partner.name }} logo" 
-                                         class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
-                                {% endif %}
-                                <div>
-                                    <h5 class="card-title mb-0">
-                                        <a href="{{ partner.get_absolute_url }}" class="text-decoration-none">
-                                            {{ partner.name }}
-                                        </a>
-                                    </h5>
-                                    {% if partner.website %}
-                                        <a href="{{ partner.website }}" class="text-muted small" target="_blank">
-                                            Visit Website
-                                        </a>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            {% endfor %}
-        </div>
-    </div>
-</div>
-{% endif %}
-
-<!-- External Links -->
-{% if service.external_links.exists %}
-<div class="card mb-4">
-    <div class="card-body">
-        <h3>Additional Information</h3>
-        <div class="list-group">
-            {% for link in service.external_links.all %}
-                <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" 
-                   class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
-                    {{ link.description }}
-                    <i class="bi bi-box-arrow-up-right"></i>
-                </a>
-            {% endfor %}
-        </div>
-    </div>
-</div>
-{% endif %}
+</section>
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templates/services/service_list.html b/hub/services/templates/services/service_list.html
index f21f420..f95e4cd 100644
--- a/hub/services/templates/services/service_list.html
+++ b/hub/services/templates/services/service_list.html
@@ -1,138 +1,178 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="row">
-    <div class="col-md-3">
-        <div class="card">
-            <div class="card-body">
-                <h5 class="card-title">Filters</h5>
-                <form method="get">
-                    <div class="mb-3">
-                        <label for="search" class="form-label">Search</label>
-                        <input type="text" class="form-control" id="search" name="search" value="{{ request.GET.search }}">
-                    </div>
-                    
-                    <div class="mb-3">
-                        <label for="category" class="form-label">Category</label>
-                        <select class="form-select" id="category" name="category">
-                            <option value="">All Categories</option>
-                            {% for category in categories %}
-                                <option value="{{ category.id }}" {% if request.GET.category == category.id|stringformat:'i' %}selected{% endif %}>
-                                    {{ category.name }}
-                                </option>
-                                {% for subcategory in category.children.all %}
-                                    <option value="{{ subcategory.id }}" {% if request.GET.category == subcategory.id|stringformat:'i' %}selected{% endif %}>
-                                        &nbsp;&nbsp;&nbsp;{{ subcategory.name }}
-                                    </option>
-                                {% endfor %}
-                            {% endfor %}
-                        </select>
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="cloud_provider" class="form-label">Cloud Provider</label>
-                        <select class="form-select" id="cloud_provider" name="cloud_provider">
-                            <option value="">All Providers</option>
-                            {% for provider in cloud_providers %}
-                                <option value="{{ provider.id }}" {% if request.GET.cloud_provider == provider.id|stringformat:'i' %}selected{% endif %}>
-                                    {{ provider.name }}
-                                </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-
-                    <div class="mb-3">
-                        <label for="consulting_partner" class="form-label">Consulting Partner</label>
-                        <select class="form-select" id="consulting_partner" name="consulting_partner">
-                            <option value="">All Partners</option>
-                            {% for partner in consulting_partners %}
-                                <option value="{{ partner.id }}" {% if request.GET.consulting_partner == partner.id|stringformat:'i' %}selected{% endif %}>
-                                    {{ partner.name }}
-                                </option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    
-                    <button type="submit" class="btn btn-primary">Apply Filters</button>
-                    <a href="{% url 'services:service_list' %}" class="btn btn-secondary">Clear</a>
-                </form>
+<section class="section bg-primary-subtle">
+    <div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
+        <header class="section-primary__header text-center">
+            <h2 class="section-h1 fs-40 fs-lg-64 mb-24">Discover Services</h2>
+            <div class="text-gray-300 w-lg-37 mx-auto">
+                <p class="mb-0">Discover our service catalog</p>
             </div>
-        </div>
+        </header>
     </div>
-    
-    <div class="col-md-9">
-        <div class="row row-cols-1 row-cols-md-2 g-4">
-            {% for service in services %}
-                <div class="col">
-                    <div class="card h-100">
-                        <div class="card-body">
-                            <div class="d-flex align-items-center mb-3">
-                                {% if service.logo %}
-                                    <img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="me-3" style="max-height: 50px; max-width: 100px; object-fit: contain;">
-                                {% endif %}
+</section>
+
+<section class="section">
+    <div class="container-xl mx-auto px-3 px-lg-0 pt-60 pt-lg-80 pb-40">
+        <div x-data="{ open: window.innerWidth > 1024 }"
+            @resize.window="open = window.innerWidth > 1024 ? open : true" class="d-lg-flex">
+            <!-- Filters -->
+            <div class="w-lg-20 flex-none">
+                <!-- Mobile Menu -->
+                <div class="page-action d-lg-none mb-40">
+                    <button @click="open = !open"
+                        class="btn btn-outline-primary btn-md w-100 d-flex justify-content-center align-items-center"
+                        type="button">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <mask id="mask0_115_3182" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0"
+                                y="0" width="24" height="24">
+                                <rect width="24" height="24" fill="#D9D9D9" />
+                            </mask>
+                            <g mask="url(#mask0_115_3182)">
+                                <path d="M7 18V16H17V18H7ZM5 13V11H19V13H5ZM3 8V6H21V8H3Z" fill="#9A63EC" />
+                            </g>
+                        </svg>
+                        <span class="ms-2">Filters</span>
+                    </button>
+                </div>
+                <!-- Desktop View -->
+                <div x-cloak x-show="open || window.innerWidth >= 1024" class="w-lg-85" x-collapse>
+                    <div class="d-flex d-lg-none justify-content-between align-items-center mb-24"
+                        role="button">
+                        <h3 class="sidebar-dropdown__title mb-0">Filters</h3>
+                        <span @click="open = false">
+                            <svg width="24" height="25" viewBox="0 0 24 25" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <mask id="mask0_115_3177" style="mask-type:alpha" maskUnits="userSpaceOnUse"
+                                    x="0" y="0" width="24" height="25">
+                                    <rect y="0.5" width="24" height="24" fill="#D9D9D9" />
+                                </mask>
+                                <g mask="url(#mask0_115_3177)">
+                                    <path
+                                        d="M6.4 19.5L5 18.1L10.6 12.5L5 6.9L6.4 5.5L12 11.1L17.6 5.5L19 6.9L13.4 12.5L19 18.1L17.6 19.5L12 13.9L6.4 19.5Z"
+                                        fill="#160037" />
+                                </g>
+                            </svg>
+                        </span>
+                    </div>
+
+                    <div class="search-form position-relative mb-24">
+                        <form method="get" x-data="{submitForm() { $refs.filterForm.submit(); } }" x-ref="filterForm">
+                            <!-- Search -->
+                            <div class="mb-24">
+                                <label for="search" class="d-none">Search</label>
+                                <input type="text" id="search" class="input-search" placeholder="Search" name="search" value="{{ request.GET.search }}">
+                                <button class="search-button position-absolute top-0 start-0 d-flex justify-content-center align-items-center border-0 bg-transparent p-0"
+                                    type="button" title="search">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M17.5 17.5L22 22" stroke="#9A63EC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                                        <path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"
+                                            stroke="#9A63EC" stroke-width="1.5" stroke-linejoin="round" />
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <!-- Category Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Category</h3>
+                                </div>
                                 <div>
-                                    <h5 class="card-title mb-0">{{ service.name }}</h5>
-                                    <div class="mt-2">
-                                        {% for offering in service.offerings.all %}
-                                            <div class="d-inline-block me-2">
-                                                {% if offering.cloud_provider.logo %}
-                                                    <a href="{% url 'services:provider_detail' offering.cloud_provider.slug %}" title="{{ offering.cloud_provider.name }}">
-                                                        <img src="{{ offering.cloud_provider.logo.url }}" 
-                                                             alt="{{ offering.cloud_provider.name }}" 
-                                                             style="max-height: 25px; max-width: 50px; object-fit: contain;">
-                                                    </a>
-                                                {% else %}
-                                                    <a href="{% url 'services:provider_detail' offering.cloud_provider.slug %}" 
-                                                       class="badge bg-secondary text-decoration-none">
-                                                        {{ offering.cloud_provider.name }}
-                                                    </a>
-                                                {% endif %}
-                                            </div>
+                                    <select class="form-select" id="category" name="category" @change="submitForm()">
+                                        <option value="">All Categories</option>
+                                        {% for category in categories %}
+                                            <option value="{{ category.id }}" {% if request.GET.category == category.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ category.name }}
+                                            </option>
+                                            {% if category.children.all %}
+                                                {% for subcategory in category.children.all %}
+                                                    <option value="{{ subcategory.id }}" {% if request.GET.category == subcategory.id|stringformat:'i' %}selected{% endif %}>
+                                                        &nbsp;&nbsp;&nbsp;{{ subcategory.name }}
+                                                    </option>
+                                                {% endfor %}
+                                            {% endif %}
                                         {% endfor %}
-                                    </div>
+                                    </select>
                                 </div>
                             </div>
-                            <div class="mb-2">
-                                {% for category in service.categories.all %}
-                                    <span class="badge bg-secondary me-1">{{ category.full_path }}</span>
-                                {% endfor %}
-                            </div>
-                            <p class="card-text">{{ service.description|safe|truncatewords:30 }}</p>
 
-                            <div class="mt-3">
-                                <a href="{{ service.get_absolute_url }}" class="btn btn-primary">View Details</a>
-                                {% if service.offerings.exists %}
-                                    <div class="dropdown d-inline-block">
-                                        <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown">
-                                            Order
-                                        </button>
-                                        <ul class="dropdown-menu">
-                                            {% for offering in service.offerings.all %}
-                                                <li>
-                                                    <a class="dropdown-item" href="{% url 'services:create_lead' service.slug %}?offering={{ offering.id }}">
-                                                        via {{ offering.cloud_provider.name }}
-                                                    </a>
-                                                </li>
-                                            {% endfor %}
-                                        </ul>
-                                    </div>
-                                {% else %}
-                                    <a href="{% url 'services:create_lead' service.slug %}" class="btn btn-success">
-                                        Show Interest
-                                    </a>
-                                {% endif %}
+                            <!-- Consulting Partners Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Consulting Partners</h3>
+                                </div>
+                                <div>
+                                    <select class="form-select" id="consulting_partner" name="consulting_partner" @change="submitForm()">
+                                        <option value="">All Partners</option>
+                                        {% for partner in consulting_partners %}
+                                            <option value="{{ partner.id }}" {% if request.GET.consulting_partner == partner.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ partner.name }}
+                                            </option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            </div>
+
+                            <!-- Cloud Providers Filter -->
+                            <div class="pt-24 mb-24">
+                                <div class="d-flex justify-content-between align-items-center h-33 mb-5px" role="button">
+                                    <h3 class="sidebar-title mb-0">Cloud Providers</h3>
+                                </div>
+                                <div>
+                                    <select class="form-select" id="cloud_provider" name="cloud_provider" @change="submitForm()">
+                                        <option value="">All Providers</option>
+                                        {% for provider in cloud_providers %}
+                                            <option value="{{ provider.id }}" {% if request.GET.cloud_provider == provider.id|stringformat:'i' %}selected{% endif %}>
+                                                {{ provider.name }}
+                                            </option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            </div>
+
+                            <!-- Filter Actions -->
+                            <div class="d-flex gap-2">
+                                <a href="{% url 'services:service_list' %}" class="btn btn-outline-secondary btn-sm">Clear</a>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Service Listing -->
+            <div class="section__grid flex-1">
+                <div class="row">
+                    {% for service in services %}
+                    <div class="col-12 col-md-6 col-lg-4 mb-30">
+                        <div class="card h-100 d-flex flex-column">
+                            {% if service.logo %}
+                            <div class="card__image flex-shrink-0">
+                                <a href="{{ service.get_absolute_url }}">
+                                    <img src="{{ service.logo.url }}" alt="{{ service.name }} logo" class="img-fluid">
+                                </a>
+                            </div>
+                            {% endif %}
+                            <div class="card__content d-flex flex-column flex-grow-1">
+                                <div class="card__header">
+                                    <h3 class="card__title"><a href="{{ service.get_absolute_url }}" class="text-decoration-none">{{ service.name }}</a></h3>
+                                    <p class="card__subtitle">
+                                        {% for category in service.categories.all %}
+                                        <span>{{ category.full_path }}</span>
+                                        {% endfor %}
+                                    </p>
+                                </div>
+                                <div class="card__desc flex-grow-1">
+                                    <p class="mb-0">{{ service.description|safe|truncatewords:30 }}</p>
+                                </div>
                             </div>
                         </div>
                     </div>
+                    {% endfor %}
                 </div>
-            {% empty %}
-                <div class="col">
-                    <div class="alert alert-info">
-                        No services found matching your criteria.
-                    </div>
-                </div>
-            {% endfor %}
+            </div>
         </div>
     </div>
-</div>
+</section>
+
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templates/services/thank_you.html b/hub/services/templates/services/thank_you.html
index d0d9282..5614528 100644
--- a/hub/services/templates/services/thank_you.html
+++ b/hub/services/templates/services/thank_you.html
@@ -1,31 +1,81 @@
 {% extends 'services/base.html' %}
 
 {% block content %}
-<div class="row justify-content-center">
-    <div class="col-md-8">
-        <div class="card">
-            <div class="card-body text-center">
-                <h2 class="card-title mb-4">Thank You!</h2>
-                
-                <div class="mb-4">
-                    <p class="lead">Thank you for your interest in {{ service.name }}!</p>
-                    <p>We have received your inquiry and our team will contact you shortly.</p>
+<section class="section">
+    <div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
+        <div class="d-lg-flex">
+            <div class="flex-1 pr-lg-40 mb-40 mb-lg-0">
+                <div class="bg-gray-50 rounded-20 py-40 px-20 px-lg-40 d-flex justify-content-center align-items-center h-100">
+                    <div class="text-center">
+                        <div class="mb-20">
+                            <svg class="mx-auto d-block" width="101" height="102" viewBox="0 0 101 102" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <g clip-path="url(#clip0_8_818)">
+                                    <path d="M50.5 101.5C78.3904 101.5 101 78.8904 101 51C101 23.1096 78.3904 0.5 50.5 0.5C22.6096 0.5 0 23.1096 0 51C0 78.8904 22.6096 101.5 50.5 101.5Z"
+                                        fill="#9A63EC" />
+                                    <path d="M37.5957 73.7808L63.5626 99.7476C85.0689 94.0126 100.999 74.418 100.999 51C100.999 50.5221 100.999 50.0442 100.999 49.5662L80.6083 30.7681L37.5957 73.7808Z"
+                                        fill="#9A63EC" />
+                                    <path d="M51.7752 62.3107C54.0054 64.541 54.0054 68.3644 51.7752 70.5946L47.1553 75.2145C44.925 77.4448 41.1017 77.4448 38.8714 75.2145L18.6395 54.8233C16.4092 52.5931 16.4092 48.7697 18.6395 46.5394L23.2594 41.9196C25.4897 39.6893 29.313 39.6893 31.5433 41.9196L51.7752 62.3107Z"
+                                        fill="white" />
+                                    <path d="M69.4583 27.1041C71.6886 24.8738 75.5119 24.8738 77.7422 27.1041L82.3621 31.724C84.5924 33.9543 84.5924 37.7776 82.3621 40.0079L47.3148 74.8959C45.0845 77.1262 41.2612 77.1262 39.0309 74.8959L34.411 70.276C32.1807 68.0457 32.1807 64.2224 34.411 61.9921L69.4583 27.1041Z"
+                                        fill="white" />
+                                </g>
+                                <defs>
+                                    <clipPath id="clip0_8_818">
+                                        <rect width="101" height="101" fill="white" transform="translate(0 0.5)" />
+                                    </clipPath>
+                                </defs>
+                            </svg>
+                        </div>
+                        <header class="mb-20">
+                            <h2 class="fs-32 fs-lg-40 fw-semibold mb-20">Inquiry Received Successfully!</h2>
+                            <div class="fs-base text-gray-600 w-lg-75 mx-auto">
+                                <p class="mb-0">Thank you for your interest in {{ service.name }}! We have received your inquiry and our team will contact you shortly. A confirmation email will be sent to your provided email address.</p>
+                            </div>
+                        </header>
+                        <div>
+                            <a href="{% url 'services:service_list' %}" class="btn btn-primary btn-lg w-100 w-md-auto" role="button">Browse More Services</a>
+                        </div>
+                    </div>
                 </div>
-
-                <div class="mb-4">
-                    <p class="text-muted">A confirmation email will be sent to your provided email address.</p>
+            </div>
+            <div class="w-lg-34 bg-purple-50 rounded-16 p-24 d-flex flex-column justify-content-between">
+                <div class="d-flex align-items-center mb-24">
+                    <div class="card__image mb-0">
+                        {% if service.image %}
+                            <img class="img-fluid" src="{{ service.image.url }}" alt="{{ service.name }}">
+                        {% endif %}
+                    </div>
+                    <div class="card__header ps-16">
+                        <h3 class="card__title">{{ service.name }}</h3>
+                        <p class="card__subtitle mb-0">{{ service.category }}</p>
+                    </div>
                 </div>
-
-                <div class="mt-4">
-                    <a href="{% url 'services:service_detail' service.slug %}" class="btn btn-primary me-2">
-                        Back to Service Details
-                    </a>
-                    <a href="{% url 'services:service_list' %}" class="btn btn-secondary">
-                        Browse More Services
-                    </a>
+                {% if service.description %}
+                <div class="mb-24">
+                    <div class="text-black">
+                        <p class="mb-0">{{ service.description|safe }}</p>
+                    </div>
                 </div>
+                {% endif %}
+                {% if service.pricing_plans %}
+                <div>
+                    {% for plan in service.pricing_plans %}
+                    <div class="bg-white border-all rounded-7 p-20 {% if not forloop.last %}mb-12{% endif %}">
+                        <h3 class="text-purple fs-18 fw-semibold lh-1-7 mb-0">{{ plan.name }}</h3>
+                        <div>
+                            <ul class="list-unstyled text-gray-500 fs-14 lh-1-7 ps-0 mb-0">
+                                {% for price in plan.prices %}
+                                <li>{{ price.amount }} {{ price.currency }} per {{ price.interval }}</li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% endif %}
             </div>
         </div>
     </div>
-</div>
+</section>
 {% endblock %}
\ No newline at end of file
diff --git a/hub/services/templatetags/__init__.py b/hub/services/templatetags/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/hub/services/templatetags/form_tags.py b/hub/services/templatetags/form_tags.py
new file mode 100644
index 0000000..e612663
--- /dev/null
+++ b/hub/services/templatetags/form_tags.py
@@ -0,0 +1,8 @@
+from django import template
+
+register = template.Library()
+
+
+@register.filter(name="addclass")
+def addclass(value, arg):
+    return value.as_widget(attrs={"class": arg})
diff --git a/hub/services/views/offerings.py b/hub/services/views/offerings.py
index a866b40..bfe3dbc 100644
--- a/hub/services/views/offerings.py
+++ b/hub/services/views/offerings.py
@@ -1,10 +1,6 @@
 from django.shortcuts import render, get_object_or_404
 from django.db.models import Q
-from hub.services.models import (
-    ServiceOffering,
-    CloudProvider,
-    Category,
-)
+from hub.services.models import ServiceOffering, CloudProvider, Category, Service
 
 
 def offering_list(request):
@@ -22,6 +18,7 @@ def offering_list(request):
 
     cloud_providers = CloudProvider.objects.all()
     categories = Category.objects.filter(parent=None).prefetch_related("children")
+    services = Service.objects.all().order_by("name")
 
     # Handle cloud provider filter
     if request.GET.get("cloud_provider"):
@@ -37,6 +34,11 @@ def offering_list(request):
             Q(service__categories=category) | Q(service__categories__in=subcategories)
         ).distinct()
 
+    # Handle service filter
+    if request.GET.get("service"):
+        service_id = request.GET.get("service")
+        offerings = offerings.filter(service_id=service_id)
+
     # Handle search
     if request.GET.get("search"):
         query = request.GET.get("search")
@@ -50,6 +52,7 @@ def offering_list(request):
         "offerings": offerings,
         "cloud_providers": cloud_providers,
         "categories": categories,
+        "services": services,
     }
     return render(request, "services/offering_list.html", context)
 
diff --git a/hub/services/views/pages.py b/hub/services/views/pages.py
index abed6e9..f1cc360 100644
--- a/hub/services/views/pages.py
+++ b/hub/services/views/pages.py
@@ -1,5 +1,22 @@
 from django.shortcuts import render
+from hub.services.models import Service, CloudProvider, ConsultingPartner
 
 
 def homepage(request):
-    return render(request, "services/homepage.html")
+    featured_services = Service.objects.filter(is_featured=True).prefetch_related(
+        "categories"
+    )[:4]
+
+    featured_providers = CloudProvider.objects.filter(is_featured=True)[:4]
+
+    featured_partners = ConsultingPartner.objects.filter(
+        is_featured=True
+    ).prefetch_related("services", "cloud_providers")[:4]
+
+    context = {
+        "featured_services": featured_services,
+        "featured_providers": featured_providers,
+        "featured_partners": featured_partners,
+    }
+
+    return render(request, "services/homepage.html", context)
diff --git a/hub/services/views/partners.py b/hub/services/views/partners.py
index d5789f4..ed46f58 100644
--- a/hub/services/views/partners.py
+++ b/hub/services/views/partners.py
@@ -1,9 +1,6 @@
 from django.shortcuts import render, get_object_or_404
 from django.db.models import Q
-from hub.services.models import (
-    ConsultingPartner,
-    CloudProvider,
-)
+from hub.services.models import ConsultingPartner, CloudProvider, Service
 
 
 def partner_list(request):
@@ -11,11 +8,18 @@ def partner_list(request):
         "services", "cloud_providers"
     )
 
+    services = Service.objects.all().order_by("name")
+
     # Handle cloud provider filter
     if request.GET.get("cloud_provider"):
         provider_id = request.GET.get("cloud_provider")
         partners = partners.filter(cloud_providers__id=provider_id)
 
+    # Handle service filter
+    if request.GET.get("service"):
+        service_id = request.GET.get("service")
+        partners = partners.filter(services__id=service_id)
+
     # Handle search
     if request.GET.get("search"):
         query = request.GET.get("search")
@@ -25,6 +29,7 @@ def partner_list(request):
 
     context = {
         "partners": partners,
+        "services": services,
         "cloud_providers": CloudProvider.objects.all(),
     }
     return render(request, "services/partner_list.html", context)