﻿@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/montserrat.woff2') format('woff2'); }

@font-face { font-family: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/sofiasansextracondensed.woff2') format('woff2'); }

:root, [data-mdb-theme=light] { --mdb-font-sans-serif: "Montserrat", system-ui, -apple-system, sans-serif, "Segoe UI", "Helvetica Neue", Arial; --mdb-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --mdb-body-font-family: var(--mdb-font-sans-serif); --mdb-body-color: rgb(32, 33, 36); --mdb-body-color-rgb: 32, 33, 36; --mdb-body-bg: #fff; --mdb-body-bg-rgb: 255, 255, 255; --mdb-emphasis-color: #000; --mdb-emphasis-color-rgb: 0, 0, 0; --mdb-secondary-color: rgba(79, 79, 79, 0.75); --mdb-secondary-color-rgb: 79, 79, 79; --mdb-secondary-bg: #eeeeee; --mdb-secondary-bg-rgb: 238, 238, 238; --mdb-tertiary-color: rgba(79, 79, 79, 0.5); --mdb-tertiary-color-rgb: 79, 79, 79; --mdb-tertiary-bg: #fbfbfb; --mdb-tertiary-bg-rgb: 251, 251, 251; --mdb-heading-color: inherit; --mdb-link-color: #3b71ca; --mdb-link-color-rgb: 81, 107, 171; --mdb-link-decoration: none; --mdb-link-hover-color: #386bc0; --mdb-link-hover-color-rgb: 56, 107, 192; --mdb-link-hover-decoration: none; --mdb-highlight-color: #4f4f4f; --mdb-highlight-bg: #fff9c4; --mdb-border-width: 1px; --mdb-border-style: solid; --mdb-border-color: #bdbdbd; --mdb-border-color-translucent: rgba(0, 0, 0, 0.175); --mdb-border-radius: 0.25rem; --mdb-border-radius-sm: 0.25rem; --mdb-border-radius-lg: 0.5rem; --mdb-border-radius-pill: 50rem; --mdb-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --mdb-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --mdb-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); --mdb-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --mdb-focus-ring-width: 0.25rem; --mdb-focus-ring-opacity: 0.25; --mdb-focus-ring-color: rgba(59, 113, 202, 0.25); --mdb-form-valid-color: #14a44d; --mdb-form-valid-border-color: #14a44d; --mdb-form-invalid-color: #dc4c64; --mdb-form-invalid-border-color: #dc4c64 }
*, *::before, *::after { box-sizing: border-box }

@media(prefers-reduced-motion: no-preference) {
    :root { scroll-behavior: smooth }
}

body { margin: 0; font-family: var(--mdb-body-font-family); color: var(--mdb-body-color); text-align: left; background-color: var(--mdb-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(--mdb-border-width) solid; opacity: .25 }


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 }
dd { margin-bottom: .5rem; margin-left: 0 }
blockquote { margin: 0 0 1rem }

mark, .mark { padding: .1875em; color: var(--mdb-highlight-color); background-color: var(--mdb-highlight-bg) }
sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline }
sub { bottom: -0.25em }
sup { top: -0.5em }
a { color: rgba(var(--mdb-link-color-rgb), var(--mdb-link-opacity, 1)); text-decoration: none }
    a:hover { --mdb-link-color-rgb: var(--mdb-link-hover-color-rgb); text-decoration: none }
    a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none }
pre, code, kbd, samp { font-family: var(--mdb-font-monospace); font-size: 1em }
pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: 0.875em }
    pre code { font-size: inherit; color: inherit; word-break: normal }
code { font-size: 0.875em; color: var(--mdb-code-color); word-wrap: break-word }
a > code { color: inherit }
kbd { padding: .1875rem .375rem; font-size: 0.875em; color: var(--mdb-body-bg); background-color: var(--mdb-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: 1rem; padding-bottom: 1rem; color: var(--mdb-secondary-color); text-align: left }
th { text-align: inherit; }
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 + 0.3vw); line-height: inherit }

@media(min-width: 1200px) {
    legend { font-size: 1.5rem }
}

legend + * { clear: left }
::-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 }

.list-unstyled { padding-left: 0; list-style: none }
.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: 0.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: 0.875em; color: #757575 }
    .blockquote-footer::before { content: "Ã¢â‚¬â€Ã‚Â " }
.img-fluid { max-width: 100%; height: auto }
.img-thumbnail { padding: .25rem; background-color: var(--mdb-body-bg); border: var(--mdb-border-width) solid var(--mdb-border-color); border-radius: var(--mdb-border-radius); box-shadow: var(--mdb-box-shadow-sm); max-width: 100%; height: auto }
.figure { display: inline-block }
.figure-img { margin-bottom: .5rem; line-height: 1 }
.figure-caption { font-size: 0.875em; color: var(--mdb-secondary-color) }
.container { --mdb-gutter-x: 1rem; --mdb-gutter-y: 0; width: 100%; padding-right: calc(var(--mdb-gutter-x)*.5); padding-left: calc(var(--mdb-gutter-x)*.5); margin-right: auto; margin-left: auto }
.container-fluid { width: 100%; margin-right: auto; margin-left: auto }
:root { --mdb-breakpoint-xs: 0; --mdb-breakpoint-sm: 576px; --mdb-breakpoint-md: 768px; --mdb-breakpoint-lg: 992px; --mdb-breakpoint-xl: 1200px; --mdb-breakpoint-xxl: 1400px }
.row { --mdb-gutter-x: 1rem; --mdb-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1*var(--mdb-gutter-y)); margin-right: calc(-0.5*var(--mdb-gutter-x)); margin-left: calc(-0.5*var(--mdb-gutter-x)) }
    .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--mdb-gutter-x)*.5); padding-left: calc(var(--mdb-gutter-x)*.5); margin-top: var(--mdb-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 { --mdb-gutter-x: 0 }
.g-0, .gy-0 { --mdb-gutter-y: 0 }
.g-1, .gx-1 { --mdb-gutter-x: 0.25rem }
.g-1, .gy-1 { --mdb-gutter-y: 0.25rem }
.g-2, .gx-2 { --mdb-gutter-x: 0.5rem }
.g-2, .gy-2 { --mdb-gutter-y: 0.5rem }
.g-3, .gx-3 { --mdb-gutter-x: 1rem }
.g-3, .gy-3 { --mdb-gutter-y: 1rem }
.g-4, .gx-4 { --mdb-gutter-x: 1.5rem }
.g-4, .gy-4 { --mdb-gutter-y: 1.5rem }
.g-5, .gx-5 { --mdb-gutter-x: 4rem }
.g-5, .gy-5 { --mdb-gutter-y: 4rem }

@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% }
}

@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% }
}

@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% }
}

@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% }
}

@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% }
}

.btn { --mdb-btn-padding-x: 1.5rem; --mdb-btn-padding-y: 0.25rem; --mdb-btn-font-size: 1.25rem; --mdb-btn-font-weight: 500; --mdb-btn-line-height: 1.5; --mdb-btn-color: var(--mdb-body-color); --mdb-btn-bg: transparent; --mdb-btn-border-width: 2px; --mdb-btn-border-color: transparent; --mdb-btn-border-radius: 0.25rem; --mdb-btn-hover-border-color: transparent; --mdb-btn-box-shadow: 0 4px 9px -4px #00000035; --mdb-btn-disabled-opacity: 0.65; --mdb-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--mdb-btn-focus-shadow-rgb), 0.5); display: inline-block; padding: var(--mdb-btn-padding-y) var(--mdb-btn-padding-x); font-family: var(--mdb-btn-font-family); font-size: var(--mdb-btn-font-size); font-weight: var(--mdb-btn-font-weight); line-height: var(--mdb-btn-line-height); color: var(--mdb-btn-color); text-align: center; vertical-align: middle; cursor: pointer; user-select: none; border: var(--mdb-btn-border-width) solid var(--mdb-btn-border-color); border-radius: var(--mdb-btn-border-radius); background-color: var(--mdb-btn-bg); box-shadow: var(--mdb-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 }
.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 }

.btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle }
    .btn-group > .btn, .btn-group-vertical > .btn { position: relative; flex: 1 1 auto }
        .btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn:hover, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active { z-index: 1 }
.btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start }
    .btn-toolbar .input-group { width: auto }
.btn-group { border-radius: .25rem }
    .btn-group > :not(.btn-check:first-child) + .btn, .btn-group > .btn-group:not(:first-child) { margin-left: calc(2px*-1) }
    .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0 }
    .btn-group > .btn:nth-child(n+3), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0 }

.btn-group-vertical { flex-direction: column; align-items: flex-start; justify-content: center }
    .btn-group-vertical > .btn, .btn-group-vertical > .btn-group { width: 100% }
        .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) { margin-top: calc(2px*-1) }
        .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0 }
        .btn-group-vertical > .btn ~ .btn, .btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0 }
.nav { --mdb-nav-link-padding-x: 1rem; --mdb-nav-link-padding-y: calc((50px - (1rem * 1.8))/2); --mdb-nav-link-color: var(--mdb-link-color); --mdb-nav-link-hover-color: var(--mdb-link-hover-color); --mdb-nav-link-disabled-color: var(--mdb-secondary-color); display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none }
.nav-link { display: block; padding: var(--mdb-nav-link-padding-y) var(--mdb-nav-link-padding-x); font-size: 1rem; font-weight: 500; color: var(--mdb-nav-link-color); background: none; border: 0; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out }

@media(prefers-reduced-motion: reduce) {
    .nav-link { transition: none }
}

.nav-link:hover, .nav-link:focus { color: var(--mdb-nav-link-hover-color) }
.nav-link:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem rgba(59,113,202,.25) }
.nav-link.disabled, .nav-link:disabled { color: var(--mdb-nav-link-disabled-color); pointer-events: none; cursor: default }
.nav-tabs { --mdb-nav-tabs-border-width: var(--mdb-border-width); --mdb-nav-tabs-border-color: var(--mdb-border-color); --mdb-nav-tabs-border-radius: var(--mdb-border-radius); --mdb-nav-tabs-link-hover-border-color: var(--mdb-secondary-bg) var(--mdb-secondary-bg) var(--mdb-border-color); --mdb-nav-tabs-link-active-color: #3b71ca; --mdb-nav-tabs-link-active-bg: var(--mdb-body-bg); --mdb-nav-tabs-link-active-border-color: #3b71ca; border-bottom: var(--mdb-nav-tabs-border-width) solid var(--mdb-nav-tabs-border-color) }
    .nav-tabs .nav-link { margin-bottom: calc(-1*var(--mdb-nav-tabs-border-width)); border: var(--mdb-nav-tabs-border-width) solid rgba(0,0,0,0); border-top-left-radius: var(--mdb-nav-tabs-border-radius); border-top-right-radius: var(--mdb-nav-tabs-border-radius) }
        .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { isolation: isolate; border-color: var(--mdb-nav-tabs-link-hover-border-color) }
        .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--mdb-nav-tabs-link-active-color); background-color: var(--mdb-nav-tabs-link-active-bg); border-color: var(--mdb-nav-tabs-link-active-border-color) }

.nav-pills { --mdb-nav-pills-border-radius: var(--mdb-border-radius); --mdb-nav-pills-link-active-color: var(--mdb-primary-text-emphasis); --mdb-nav-pills-link-active-bg: var(--mdb-primary-bg-subtle) }
    .nav-pills .nav-link { border-radius: var(--mdb-nav-pills-border-radius) }
        .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--mdb-nav-pills-link-active-color); background-color: var(--mdb-nav-pills-link-active-bg) }
.nav-underline { --mdb-nav-underline-gap: 1rem; --mdb-nav-underline-border-width: 0.125rem; --mdb-nav-underline-link-active-color: var(--mdb-emphasis-color); gap: var(--mdb-nav-underline-gap) }
    .nav-underline .nav-link { padding-right: 0; padding-left: 0; border-bottom: var(--mdb-nav-underline-border-width) solid rgba(0,0,0,0) }
        .nav-underline .nav-link:hover, .nav-underline .nav-link:focus { border-bottom-color: currentcolor }
        .nav-underline .nav-link.active, .nav-underline .show > .nav-link { font-weight: 700; color: var(--mdb-nav-underline-link-active-color); border-bottom-color: currentcolor }
.nav-fill > .nav-link, .nav-fill .nav-item { flex: 1 1 auto; text-align: center }
.nav-justified > .nav-link, .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center }
    .nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link { width: 100% }
.tab-content > .tab-pane { display: none }
.tab-content > .active { display: block }
.navbar { --mdb-navbar-padding-x: 0; --mdb-navbar-padding-y: 0.5rem; --mdb-navbar-color: rgba(var(--mdb-emphasis-color-rgb), 0.65); --mdb-navbar-hover-color: rgba(var(--mdb-emphasis-color-rgb), 0.8); --mdb-navbar-disabled-color: rgba(var(--mdb-emphasis-color-rgb), 0.3); --mdb-navbar-active-color: rgba(var(--mdb-emphasis-color-rgb), 1); --mdb-navbar-brand-padding-y: 0.3rem; --mdb-navbar-brand-margin-end: 1rem; --mdb-navbar-brand-font-size: 1.25rem; --mdb-navbar-brand-color: rgba(var(--mdb-emphasis-color-rgb), 1); --mdb-navbar-brand-hover-color: rgba(var(--mdb-emphasis-color-rgb), 1); --mdb-navbar-nav-link-padding-x: 0.5rem; --mdb-navbar-toggler-padding-y: 10px; --mdb-navbar-toggler-padding-x: 13px; --mdb-navbar-toggler-font-size: 1.25rem; --mdb-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2879, 79, 79, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --mdb-navbar-toggler-border-color: rgba(var(--mdb-emphasis-color-rgb), 0.15); --mdb-navbar-toggler-border-radius: 0.25rem; --mdb-navbar-toggler-focus-width: 0.25rem; --mdb-navbar-toggler-transition: box-shadow 0.15s ease-in-out; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--mdb-navbar-padding-y) var(--mdb-navbar-padding-x) }
    .navbar > .container, .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between }

.navbar-nav { --mdb-nav-link-padding-x: 0; --mdb-nav-link-padding-y: 0.5rem; --mdb-nav-link-color: var(--mdb-navbar-color); --mdb-nav-link-hover-color: var(--mdb-navbar-hover-color); --mdb-nav-link-disabled-color: var(--mdb-navbar-disabled-color); display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none }
    .navbar-nav .nav-link.active, .navbar-nav .nav-link.show { color: var(--mdb-navbar-active-color) }
.navbar-text { padding-top: .5rem; padding-bottom: .5rem; color: var(--mdb-navbar-color) }
    .navbar-text a, .navbar-text a:hover, .navbar-text a:focus { color: var(--mdb-navbar-active-color) }
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center }
.navbar-toggler { padding: var(--mdb-navbar-toggler-padding-y) var(--mdb-navbar-toggler-padding-x); font-size: var(--mdb-navbar-toggler-font-size); line-height: 1; color: var(--mdb-navbar-color); background-color: rgba(0,0,0,0); border: var(--mdb-border-width) solid var(--mdb-navbar-toggler-border-color); border-radius: var(--mdb-navbar-toggler-border-radius); transition: var(--mdb-navbar-toggler-transition) }

@media(prefers-reduced-motion: reduce) {
    .navbar-toggler { transition: none }
}

.navbar-toggler:hover { text-decoration: none }
.navbar-toggler:focus { text-decoration: none; outline: 0; box-shadow: 0 0 0 var(--mdb-navbar-toggler-focus-width) }
.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-image: var(--mdb-navbar-toggler-icon-bg); background-repeat: no-repeat; background-position: center; background-size: 100% }
.navbar-nav-scroll { max-height: var(--mdb-scroll-height, 75vh); overflow-y: auto }

@media(min-width: 576px) {
    .navbar-expand-sm { flex-wrap: nowrap; justify-content: flex-start }
        .navbar-expand-sm .navbar-nav { flex-direction: row }
            .navbar-expand-sm .navbar-nav .nav-link { padding-right: var(--mdb-navbar-nav-link-padding-x); padding-left: var(--mdb-navbar-nav-link-padding-x) }
        .navbar-expand-sm .navbar-nav-scroll { overflow: visible }
        .navbar-expand-sm .navbar-collapse { display: flex !important; flex-basis: auto }
        .navbar-expand-sm .navbar-toggler { display: none }
        .navbar-expand-sm .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: rgba(0,0,0,0) !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none }
            .navbar-expand-sm .offcanvas .offcanvas-header { display: none }
            .navbar-expand-sm .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible }
}

@media(min-width: 768px) {
    .navbar-expand-md { flex-wrap: nowrap; justify-content: flex-start }
        .navbar-expand-md .navbar-nav { flex-direction: row }
            .navbar-expand-md .navbar-nav .nav-link { padding-right: var(--mdb-navbar-nav-link-padding-x); padding-left: var(--mdb-navbar-nav-link-padding-x) }
        .navbar-expand-md .navbar-nav-scroll { overflow: visible }
        .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto }
        .navbar-expand-md .navbar-toggler { display: none }
        .navbar-expand-md .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: rgba(0,0,0,0) !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none }
            .navbar-expand-md .offcanvas .offcanvas-header { display: none }
            .navbar-expand-md .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible }
}

@media(min-width: 992px) {
    .navbar-expand-lg { flex-wrap: nowrap; justify-content: flex-start }
        .navbar-expand-lg .navbar-nav { flex-direction: row }
            .navbar-expand-lg .navbar-nav .nav-link { padding-right: var(--mdb-navbar-nav-link-padding-x); padding-left: var(--mdb-navbar-nav-link-padding-x) }
        .navbar-expand-lg .navbar-nav-scroll { overflow: visible }
        .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto }
        .navbar-expand-lg .navbar-toggler { display: none }
        .navbar-expand-lg .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: rgba(0,0,0,0) !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none }
            .navbar-expand-lg .offcanvas .offcanvas-header { display: none }
            .navbar-expand-lg .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible }
}

@media(min-width: 1200px) {
    .navbar-expand-xl { flex-wrap: nowrap; justify-content: flex-start }
        .navbar-expand-xl .navbar-nav { flex-direction: row }
            .navbar-expand-xl .navbar-nav .nav-link { padding-right: var(--mdb-navbar-nav-link-padding-x); padding-left: var(--mdb-navbar-nav-link-padding-x) }
        .navbar-expand-xl .navbar-nav-scroll { overflow: visible }
        .navbar-expand-xl .navbar-collapse { display: flex !important; flex-basis: auto }
        .navbar-expand-xl .navbar-toggler { display: none }
        .navbar-expand-xl .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: rgba(0,0,0,0) !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none }
            .navbar-expand-xl .offcanvas .offcanvas-header { display: none }
            .navbar-expand-xl .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible }
}

@media(min-width: 1400px) {
    .navbar-expand-xxl { flex-wrap: nowrap; justify-content: flex-start }
        .navbar-expand-xxl .navbar-nav { flex-direction: row }
            .navbar-expand-xxl .navbar-nav .nav-link { padding-right: var(--mdb-navbar-nav-link-padding-x); padding-left: var(--mdb-navbar-nav-link-padding-x) }
        .navbar-expand-xxl .navbar-nav-scroll { overflow: visible }
        .navbar-expand-xxl .navbar-collapse { display: flex !important; flex-basis: auto }
        .navbar-expand-xxl .navbar-toggler { display: none }
        .navbar-expand-xxl .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: rgba(0,0,0,0) !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none }
            .navbar-expand-xxl .offcanvas .offcanvas-header { display: none }
            .navbar-expand-xxl .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible }
}

.navbar-expand { flex-wrap: nowrap; justify-content: flex-start }
    .navbar-expand .navbar-nav { flex-direction: row }
        .navbar-expand .navbar-nav .nav-link { padding-right: var(--mdb-navbar-nav-link-padding-x); padding-left: var(--mdb-navbar-nav-link-padding-x) }
    .navbar-expand .navbar-nav-scroll { overflow: visible }
    .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto }
    .navbar-expand .navbar-toggler { display: none }
    .navbar-expand .offcanvas { position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: rgba(0,0,0,0) !important; border: 0 !important; transform: none !important; box-shadow: none; transition: none }
        .navbar-expand .offcanvas .offcanvas-header { display: none }
        .navbar-expand .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible }
.navbar-dark, .navbar[data-mdb-theme=dark] { --mdb-navbar-color: rgba(255, 255, 255, 0.55); --mdb-navbar-hover-color: rgba(255, 255, 255, 0.75); --mdb-navbar-disabled-color: rgba(255, 255, 255, 0.25); --mdb-navbar-active-color: #fff; --mdb-navbar-brand-color: #fff; --mdb-navbar-brand-hover-color: #fff; --mdb-navbar-toggler-border-color: rgba(255, 255, 255, 0.1); --mdb-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") }
[data-mdb-theme=dark] .navbar-toggler-icon { --mdb-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") }
.card { --mdb-card-spacer-y: 1.5rem; --mdb-card-spacer-x: 1.5rem; --mdb-card-title-spacer-y: 0.5rem; --mdb-card-border-width: var(--mdb-border-width); --mdb-card-border-color: rgba(0, 0, 0, 0.175); --mdb-card-border-radius: 0.5rem; --mdb-card-box-shadow: 0 2px 15px -3px #00000007, 0 10px 20px -2px #00000004; --mdb-card-inner-border-radius: calc(0.5rem - (var(--mdb-border-width))); --mdb-card-cap-padding-y: 0.75rem; --mdb-card-cap-padding-x: 1.5rem; --mdb-card-cap-bg: rgba(255, 255, 255, 0); --mdb-card-bg: var(--mdb-surface-bg); --mdb-card-img-overlay-padding: 1.5rem; --mdb-card-group-margin: 0.75rem; position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--mdb-body-color); word-wrap: break-word; background-color: var(--mdb-card-bg); background-clip: border-box; border: var(--mdb-card-border-width) solid var(--mdb-card-border-color); border-radius: var(--mdb-card-border-radius); box-shadow: 0 2px 15px -3px #00000007, 0 10px 20px -2px #00000005; }
    .card > hr { margin-right: 0; margin-left: 0 }
    .card > .list-group { border-top: inherit; border-bottom: inherit }
        .card > .list-group:first-child { border-top-width: 0; border-top-left-radius: var(--mdb-card-inner-border-radius); border-top-right-radius: var(--mdb-card-inner-border-radius) }
        .card > .list-group:last-child { border-bottom-width: 0; border-bottom-right-radius: var(--mdb-card-inner-border-radius); border-bottom-left-radius: var(--mdb-card-inner-border-radius) }
        .card > .card-header + .list-group, .card > .list-group + .card-footer { border-top: 0 }
.card-body { flex: 1 1 auto; padding: var(--mdb-card-spacer-y) var(--mdb-card-spacer-x); color: #333 }
.card-title { margin-bottom: var(--mdb-card-title-spacer-y); }
.card-subtitle { margin-top: calc(-0.5*var(--mdb-card-title-spacer-y)); margin-bottom: 0; color: var(--mdb-card-subtitle-color) }
.card-text:last-child { margin-bottom: 0 }
.card-link + .card-link { margin-left: var(--mdb-card-spacer-x) }
.card-header { padding: var(--mdb-card-cap-padding-y) var(--mdb-card-cap-padding-x); margin-bottom: 0; background-color: var(--mdb-card-cap-bg); border-bottom: var(--mdb-card-border-width) solid var(--mdb-card-border-color) }
    .card-header:first-child { border-radius: var(--mdb-card-inner-border-radius) var(--mdb-card-inner-border-radius) 0 0 }
.card-footer { padding: var(--mdb-card-cap-padding-y) var(--mdb-card-cap-padding-x); background-color: var(--mdb-card-cap-bg); border-top: var(--mdb-card-border-width) solid var(--mdb-card-border-color) }
    .card-footer:last-child { border-radius: 0 0 var(--mdb-card-inner-border-radius) var(--mdb-card-inner-border-radius) }
.card-header-tabs { margin-right: calc(-0.5*var(--mdb-card-cap-padding-x)); margin-bottom: calc(-1*var(--mdb-card-cap-padding-y)); margin-left: calc(-0.5*var(--mdb-card-cap-padding-x)); border-bottom: 0 }
    .card-header-tabs .nav-link.active { background-color: var(--mdb-card-bg); border-bottom-color: var(--mdb-card-bg) }
.card-header-pills { margin-right: calc(-0.5*var(--mdb-card-cap-padding-x)); margin-left: calc(-0.5*var(--mdb-card-cap-padding-x)) }
.card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: var(--mdb-card-img-overlay-padding); border-radius: var(--mdb-card-inner-border-radius) }
.card-img, .card-img-top, .card-img-bottom { width: 100% }
.card-img, .card-img-top { border-top-left-radius: var(--mdb-card-inner-border-radius); border-top-right-radius: var(--mdb-card-inner-border-radius) }
.card-img, .card-img-bottom { border-bottom-right-radius: var(--mdb-card-inner-border-radius); border-bottom-left-radius: var(--mdb-card-inner-border-radius) }
.card-group > .card { margin-bottom: var(--mdb-card-group-margin) }

@media(min-width: 576px) {
    .card-group { display: flex; flex-flow: row wrap }
        .card-group > .card { flex: 1 0 0%; margin-bottom: 0 }
            .card-group > .card + .card { margin-left: 0; border-left: 0 }
            .card-group > .card:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0 }
                .card-group > .card:not(:last-child) .card-img-top, .card-group > .card:not(:last-child) .card-header { border-top-right-radius: 0 }
                .card-group > .card:not(:last-child) .card-img-bottom, .card-group > .card:not(:last-child) .card-footer { border-bottom-right-radius: 0 }
            .card-group > .card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0 }
                .card-group > .card:not(:first-child) .card-img-top, .card-group > .card:not(:first-child) .card-header { border-top-left-radius: 0 }
                .card-group > .card:not(:first-child) .card-img-bottom, .card-group > .card:not(:first-child) .card-footer { border-bottom-left-radius: 0 }
}

.breadcrumb { --mdb-breadcrumb-padding-x: 0; --mdb-breadcrumb-padding-y: 0; --mdb-breadcrumb-margin-bottom: 1rem; --mdb-breadcrumb-divider-color: rgba(var(--mdb-emphasis-color-rgb), 0.55); --mdb-breadcrumb-item-padding-x: 0.5rem; --mdb-breadcrumb-item-active-color: rgba(var(--mdb-emphasis-color-rgb), 0.55); display: flex; flex-wrap: wrap; padding: var(--mdb-breadcrumb-padding-y) var(--mdb-breadcrumb-padding-x); margin-bottom: var(--mdb-breadcrumb-margin-bottom); font-size: var(--mdb-breadcrumb-font-size); list-style: none; background-color: var(--mdb-breadcrumb-bg); border-radius: var(--mdb-breadcrumb-border-radius) }
.breadcrumb-item + .breadcrumb-item { padding-left: var(--mdb-breadcrumb-item-padding-x) }
    .breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: var(--mdb-breadcrumb-item-padding-x); color: var(--mdb-breadcrumb-divider-color); content: var(--mdb-breadcrumb-divider, "/") /* rtl: var(--mdb-breadcrumb-divider, "/") */ }
.breadcrumb-item.active { color: var(--mdb-breadcrumb-item-active-color) }
.clearfix::after { display: block; clear: both; content: "" }

.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030 }
.fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030 }
.sticky-top { position: sticky; top: 0; z-index: 1020 }
.sticky-bottom { position: sticky; bottom: 0; z-index: 1020 }
.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 }

.object-cover { object-fit: cover !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 }

.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 }

.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 }


.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 }

.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 }
.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-6 { margin-top: 4rem !important }
.mt-7 { margin-top: 5rem !important }
.mt-8 { margin-top: 6rem !important }
.mt-9 { margin-top: 7rem !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-6 { margin-bottom: 3.5rem !important }
.mb-7 { margin-bottom: 4rem !important }
.mb-8 { margin-bottom: 5rem !important }
.mb-9 { margin-bottom: 6rem !important }
.mb-10 { margin-bottom: 8rem !important }
.mb-11 { margin-bottom: 10rem !important }
.mb-12 { margin-bottom: 12rem !important }
.mb-13 { margin-bottom: 14rem !important }
.mb-14 { margin-bottom: 16rem !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 }
.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 }
.pt-6 { padding-top: 4rem !important }
.pt-7 { padding-top: 5rem !important }
.pt-8 { padding-top: 6rem !important }
.pt-9 { padding-top: 7rem !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 }
.pb-6 { padding-bottom: 4rem !important }
.pb-7 { padding-bottom: 5rem !important }
.pb-8 { padding-bottom: 6rem !important }
.pb-9 { padding-bottom: 7rem !important }


.text-uppercase { text-transform: uppercase !important }
.text-capitalize { text-transform: capitalize !important }
.text-center { text-align: center !important }

@media(min-width: 576px) {
    .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 }
}

@media(min-width: 768px) {
    .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 }
}

@media(min-width: 992px) {
    .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 }
}


:root, [data-mdb-theme=light] { --mdb-font-roboto: "Montserrat", sans-serif; --mdb-bg-opacity: 1; --mdb-text-hover-opacity: 0.8; --mdb-surface-color: #4f4f4f; --mdb-surface-color-rgb: 79, 79, 79; --mdb-surface-bg: #fff; --mdb-surface-inverted-color: #fff; --mdb-surface-inverted-color-rgb: 255, 255, 255; --mdb-surface-inverted-bg: #6d6d6d; --mdb-divider-color: #f5f5f5; --mdb-divider-blurry-color: hsl(0, 0%, 40%); --mdb-highlight-bg-color: #eeeeee; --mdb-scrollbar-rail-bg: #eeeeee; --mdb-scrollbar-thumb-bg: #9e9e9e; --mdb-picker-header-bg: #3b71ca; --mdb-sidenav-backdrop-opacity: 0.1; --mdb-form-control-border-color: #bdbdbd; --mdb-form-control-label-color: #757575; --mdb-form-control-disabled-bg: #e0e0e0; --mdb-box-shadow-color: #000; --mdb-stepper-mobile-bg: #fbfbfb }

hr:not([size]).hr { --mdb-divider-height: 2px; --mdb-divider-bg: var(--mdb-divider-color); --mdb-divider-opacity: 1; --mdb-divider-blurry-bg: transparent; --mdb-divider-blurry-bg-image: linear-gradient(90deg, transparent, var(--mdb-divider-blurry-color), transparent); --mdb-divider-blurry-height: 1px; --mdb-divider-blurry-opacity: 0.25; height: var(--mdb-divider-height); background-color: var(--mdb-divider-bg); opacity: var(--mdb-divider-opacity) }
    hr:not([size]).hr.hr-blurry { background-color: var(--mdb-divider-blurry-bg); background-image: var(--mdb-divider-blurry-bg-image); height: var(--mdb-divider-blurry-height); opacity: var(--mdb-divider-blurry-opacity) }
hr:not([size]).vr { height: auto }
hr.hr, hr.vr { border-top: none !important }
.vr { --mdb-divider-width: 2px; --mdb-divider-bg: var(--mdb-divider-color); --mdb-divider-opacity: 1; width: var(--mdb-divider-width); background-color: var(--mdb-divider-bg); opacity: var(--mdb-divider-opacity) }
.vr-blurry { --mdb-divider-blurry-vr-bg-image: linear-gradient(180deg, transparent, var(--mdb-divider-blurry-color), transparent); --mdb-divider-blurry-vr-width: 1px; --mdb-divider-blurry-opacity: 0.25; background-image: var(--mdb-divider-blurry-vr-bg-image); width: var(--mdb-divider-blurry-vr-width); opacity: var(--mdb-divider-blurry-opacity) }

a { --mdb-link-decoration: none; text-decoration: var(--mdb-link-decoration) }

@media(min-width: 1199px) {
    .w-responsive { width: 75% }
}

hr.divider-horizontal:not([size]) { height: 2px }
.divider-horizontal { opacity: 1; background-color: #f5f5f5; height: 2px }
.divider-vertical { opacity: 1; background-color: #f5f5f5; display: inline-block; width: 2px; margin: 0 1rem }
hr.divider-horizontal-blurry { background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 40%), transparent); background-color: rgba(0,0,0,0) }
hr.divider-vertical-blurry { background-image: linear-gradient(180deg, transparent, hsl(0, 0%, 40%), transparent); background-color: rgba(0,0,0,0); width: 1px; top: 0; right: 0 }

.nav-tabs { border-bottom: 0 }
    .nav-tabs .nav-link { --mdb-nav-tabs-link-font-weight: 500; --mdb-nav-tabs-link-font-size: 12px; --mdb-nav-tabs-link-color: rgba(var(--mdb-emphasis-color-rgb), 0.55); --mdb-nav-tabs-link-padding-top: 17px; --mdb-nav-tabs-link-padding-bottom: 16px; --mdb-nav-tabs-link-padding-x: 29px; --mdb-nav-tabs-link-hover-bgc: var(--mdb-highlight-bg-color); --mdb-nav-tabs-link-border-bottom-width: 2px; --mdb-nav-tabs-link-active-color: #3b71ca; --mdb-nav-tabs-link-active-border-color: #3b71ca; border-width: 0; border-bottom: var(--mdb-nav-tabs-link-border-bottom-width) solid rgba(0,0,0,0); border-radius: 0; text-transform: uppercase; line-height: 1; font-weight: var(--mdb-nav-tabs-link-font-weight); font-size: var(--mdb-nav-tabs-link-font-size); color: var(--mdb-nav-tabs-link-color); padding: var(--mdb-nav-tabs-link-padding-top) var(--mdb-nav-tabs-link-padding-x) var(--mdb-nav-tabs-link-padding-bottom) var(--mdb-nav-tabs-link-padding-x) }
        .nav-tabs .nav-link:hover { background-color: var(--mdb-nav-tabs-link-hover-bgc); border-color: rgba(0,0,0,0) }
        .nav-tabs .nav-link:focus { border-color: rgba(0,0,0,0) }
        .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--mdb-nav-tabs-link-active-color); border-color: var(--mdb-nav-tabs-link-active-border-color) }
.nav-pills { margin-left: -0.5rem }
    .nav-pills .nav-link { --mdb-nav-pills-link-border-radius: 0.25rem; --mdb-nav-pills-link-font-size: 12px; --mdb-nav-pills-link-padding-top: 17px; --mdb-nav-pills-link-padding-bottom: 16px; --mdb-nav-pills-link-padding-x: 29px; --mdb-nav-pills-link-line-height: 1; --mdb-nav-pills-link-hover-bg: var(--mdb-highlight-bg-color); --mdb-nav-pills-link-font-weight: 500; --mdb-nav-pills-link-color: rgba(var(--mdb-emphasis-color-rgb), 0.55); --mdb-nav-pills-margin: 0.5rem; border-radius: var(--mdb-nav-pills-link-border-radius); font-size: var(--mdb-nav-pills-link-font-size); text-transform: uppercase; padding: var(--mdb-nav-pills-link-padding-top) var(--mdb-nav-pills-link-padding-x) var(--mdb-nav-pills-link-padding-bottom) var(--mdb-nav-pills-link-padding-x); line-height: var(--mdb-nav-pills-link-line-height); background-color: var(--mdb-nav-pills-link-hover-bg); font-weight: var(--mdb-nav-pills-link-font-weight); color: var(--mdb-nav-pills-link-color); margin: var(--mdb-nav-pills-margin) }
        .nav-pills .nav-link.active, .nav-pills .show > .nav-link { --mdb-nav-pills-link-active-bg: var(--mdb-primary-bg-subtle); --mdb-nav-pills-link-active-color: var(--mdb-primary-text-emphasis); background-color: var(--mdb-nav-pills-link-active-bg); color: var(--mdb-nav-pills-link-active-color) }
.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link { width: auto }
.navbar { --mdb-navbar-box-shadow: 0 4px 12px 0 #00000007, 0 2px 4px #00000005; --mdb-navbar-padding-top: 0.5625rem; --mdb-navbar-brand-img-margin-right: 0.25rem; box-shadow: var(--mdb-navbar-box-shadow); padding-top: var(--mdb-navbar-padding-top) }
.navbar-toggler { border: 0 }
    .navbar-toggler:focus { box-shadow: none }
.navbar-dark .navbar-toggler, .navbar-light .navbar-toggler { border: 0 }
.navbar-brand { display: flex; align-items: center }
    .navbar-brand img { margin-right: var(--mdb-navbar-brand-img-margin-right) }

.navbar-light .navbar-toggler-icon { background-image: none }
.navbar-dark .navbar-toggler-icon { background-image: none }
.navbar-dark, .navbar[data-mdb-theme=dark] { --mdb-navbar-color: rgba(255, 255, 255, 0.55); --mdb-navbar-hover-color: rgba(255, 255, 255, 0.75); --mdb-navbar-disabled-color: rgba(255, 255, 255, 0.25); --mdb-navbar-active-color: #fff; --mdb-navbar-brand-color: #fff; --mdb-navbar-brand-hover-color: #fff; --mdb-navbar-toggler-border-color: rgba(255, 255, 255, 0.1); --mdb-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") }

.card { border: 0 }
    .card .bg-image { border-top-left-radius: var(--mdb-card-border-radius); border-top-right-radius: var(--mdb-card-border-radius) }
    .card[class*=bg-] .card-header { --mdb-card-header-border-bottom-color: rgba(0, 0, 0, 0.175); border-bottom-color: var(--mdb-card-header-border-bottom-color) }
    .card[class*=bg-] .card-footer { --mdb-card-footer-border-top-color: rgba(0, 0, 0, 0.175); border-top-color: var(--mdb-card-footer-border-top-color) }
.card-header { --mdb-card-header-border-width: 2px; --mdb-card-header-border-color: var(--mdb-divider-color); border-bottom: var(--mdb-card-header-border-width) solid var(--mdb-card-header-border-color) }
.card-body[class*=bg-] { border-bottom-left-radius: var(--mdb-card-border-radius); border-bottom-right-radius: var(--mdb-card-border-radius) }
.card-footer { --mdb-card-footer-border-color: var(--mdb-divider-color); --mdb-card-footer-border-width: 2px; border-top: var(--mdb-card-footer-border-width) solid var(--mdb-card-footer-border-color) }
.card-img-left { border-top-left-radius: var(--mdb-card-border-radius); border-bottom-left-radius: var(--mdb-card-border-radius) }

.form-control { min-height: auto; padding: 4.5px 12px 3.68px 12px; transition: all .1s linear; box-shadow: none }
    .form-control:focus { box-shadow: none; transition: all .1s linear; border-color: #3b71ca; box-shadow: inset 0px 0px 0px 1px #3b71ca }
.form-control { display: inline-flex; flex-grow: 5; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--mdb-surface-color); -webkit-appearance: none; background-color: var(--mdb-body-bg); background-clip: padding-box; border: var(--mdb-border-width) solid var(--mdb-border-color); border-radius: var(--mdb-border-radius); box-shadow: var(--mdb-box-shadow-inset); transition: all .2s linear }
.form-label { display: inline-flex; background-color: #333; flex-grow: 1; color: white; padding: .375rem 1rem; font-size: 1rem; font-weight: 400; line-height: 1.6; border: var(--mdb-border-width) solid var(--mdb-border-color); border-radius: 0.25rem 0 0 0.25rem; }

.list-group { --mdb-list-group-color: var(--mdb-body-color); --mdb-list-group-bg: transparent; --mdb-list-group-border-color: var(--mdb-border-color); --mdb-list-group-border-width: var(--mdb-border-width); --mdb-list-group-border-radius: 0.5rem; --mdb-list-group-item-padding-x: 1.5rem; --mdb-list-group-item-padding-y: 0.5rem; --mdb-list-group-action-color: var(--mdb-secondary-color); --mdb-list-group-action-hover-color: var(--mdb-emphasis-color); --mdb-list-group-action-hover-bg: var(--mdb-tertiary-bg); --mdb-list-group-action-active-color: var(--mdb-body-color); --mdb-list-group-action-active-bg: var(--mdb-secondary-bg); --mdb-list-group-disabled-color: rgba(var(--mdb-body-color-rgb), 0.5); --mdb-list-group-disabled-bg: transparent; --mdb-list-group-active-color: #fff; --mdb-list-group-active-bg: #3b71ca; --mdb-list-group-active-border-color: #3b71ca; display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: var(--mdb-list-group-border-radius) }
.list-group-numbered { list-style-type: none; counter-reset: section }
    .list-group-numbered > .list-group-item::before { content: counters(section, ".") ". "; counter-increment: section }
.list-group-item { position: relative; display: block; padding: var(--mdb-list-group-item-padding-y) var(--mdb-list-group-item-padding-x); color: var(--mdb-list-group-color); background-color: var(--mdb-list-group-bg); border: none }
.list-group { --mdb-list-group-item-transition-time: 0.5s }
.list-group-light { --mdb-list-group-light-item-py: 1rem; --mdb-list-group-light-item-border: 2px solid var(--mdb-divider-color); --mdb-list-group-light-item-border-width: 2px; --mdb-list-group-light-active-border-radius: 0.5rem; --mdb-list-group-light-active-bg: var(--mdb-primary-bg-subtle); --mdb-list-group-light-active-color: var(--mdb-primary-text-emphasis) }
    .list-group-light .list-group-item { padding: var(--mdb-list-group-light-item-py) 0; border: var(--mdb-list-group-light-item-border) }
    .list-group-light > .list-group-item { border-width: 0 0 var(--mdb-list-group-light-item-border-width) }
        .list-group-light > .list-group-item:last-of-type { border: none }
    .list-group-light .list-group-item-action:hover { border-radius: var(--mdb-list-group-light-active-border-radius) }
    .list-group-light .list-group-item-action:focus { border-radius: var(--mdb-list-group-light-active-border-radius) }
.list-group-small { --mdb-list-group-small-item-py: 0.5rem }
    .list-group-small .list-group-item { padding: var(--mdb-list-group-small-item-py) 0 }








/* CUSTOM STYLESHEET */
/* BODY TOP PADDING OVERRIDE BECAUSE OF THE MENU ON TOP */
body { padding-top: 2px; color: #4d5156; margin-block-start: 0; margin-block-end: 0; line-height: 1.8; font-size: Clamp(14px, Calc(14px + (6 * ((100vw - 400px) / 1200))), 20px); font-weight: 450; }

p { font-size: Clamp(14px, Calc(14px + (6 * ((100vw - 400px) / 1200))), 20px); line-height: 1.8; text-align: left; margin-block-start: 0; margin-block-end: 0; padding-bottom: 20px }
    p.text-muted { color: #464646 !important; padding: 0px 4% 0px 6%; line-height: 1.35 }

.fs-1 { font-size: Clamp(16px, Calc(16px + (6 * ((100vw - 400px) / 1200))), 22px); }
.fs-2 { font-size: Clamp(18px, Calc(18px + (6 * ((100vw - 400px) / 1200))), 24px); }

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 20px; margin-bottom: 0; line-height: 1.2; font-weight: 900; font-family: 'Sofia Sans Extra Condensed'; }


h1, .h1 { font-size: Clamp(34px, Calc(34px + (43 * ((100vw - 400px) / 590))), 80px); line-height: 1; letter-spacing: -1px; text-align: center }

    h1 small { font-size: Clamp(20px, Calc(20px + (10 * ((100vw - 400px) / 500))), 30px); padding-left: 25px; display: block; line-height: 1; font-weight: 600 }

h2, .h2 { font-size: Clamp(35px, Calc(35px + (25 * ((100vw - 400px) / 500))), 60px); }



h3, .h3 { font-size: Clamp(30px, Calc(30px + (20 * ((100vw - 400px) / 500))), 50px); }

.search-engine-optimization-steps h3 { font-size: 20px }

h4, .h4 { font-size: Clamp(28px, Calc(28px + (15 * ((100vw - 400px) / 500))), 43px); }

h5, .h5 { font-size: Clamp(25px, Calc(25px + (12 * ((100vw - 400px) / 500))), 37px); }

h6, .h6 { font-size: Clamp(21px, Calc(21px + (10 * ((100vw - 400px) / 500))), 31px); }

.sub-title-seo { font-size: Clamp(20px, Calc(20px + (12 * ((100vw - 400px) / 500))), 32px); line-height: 1.25; font-weight: 400; font-family: 'Montserrat'; letter-spacing: -2px; text-align: center }



@media(min-width: 992px) {
    h1, .h1 { font-size: Clamp(80px, Calc(80px + (30 * ((100vw - 992px) / 700))), 110px); letter-spacing: -2px; text-align: center; }

    h2, .h2 { font-size: Clamp(60px, Calc(55px + (40 * ((100vw - 992px) / 800))), 95px); }

    h3, .h3 { font-size: Clamp(50px, Calc(50px + (35 * ((100vw - 992px) / 800))), 85px); }

    h4, .h4 { font-size: Clamp(43px, Calc(43px + (30 * ((100vw - 992px) / 800))), 73px); }

    h5, .h5 { font-size: Clamp(37px, Calc(37px + (25 * ((100vw - 992px) / 800))), 62px); }

    h6, .h6 { font-size: Clamp(31px, Calc(31px + (20 * ((100vw - 992px) / 800))), 51px); }

    .sub-title-seo { font-size: Clamp(34px, Calc(34px + (20 * ((100vw - 992px) / 800))), 54px); text-align: center; }
}

.card .card-body h2 { font-variant: small-caps; letter-spacing: -1px; }

@media(min-width: 992px) {
    .h2-lg, .card .card-body h2 { font-size: Clamp(30px, Calc(30px + (20 * ((100vw - 900px) / 500))), 50px); }
}

@media (max-width: 575px) {
    .sub-title-seo br { display: none; }
}

h1 i { font-style: normal; display: inline-block; }

.lead, .light { font-family: 'Montserrat'; font-weight: 300; }

.fw-bold, .bold, b, strong { font-weight: 600 }
blockquote { border-left: 4px solid #ddd; padding-left: 20px; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% }
.w100 { font-weight: 100 }
.w200 { font-weight: 200 }
.w300 { font-weight: 300 }
.w400 { font-weight: 400 }
.w500 { font-weight: 500 }
.w600 { font-weight: 600 }
.w700 { font-weight: 700 }
.w800 { font-weight: 800 }
.w900 { font-weight: 900 }

section { padding: 20px 0px }

/* SCREEN SIZE MORE THAN 1800px */
@media(min-width: 1420px) {
    .container { max-width: 1400px }
}


/* COLORFUL LINE DIVIDER */
.colorful-div { display: block; padding: 0px; height: 2px; width: 100%; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); margin: 0px }
.colorful-border { display: block; height: 3px; width: 60%; background-image: linear-gradient(to right, #00beff45,#a7aaff7a,#f78eff87); margin: 5px 20% 10px 20%; border-top: 1px solid #bbbbbb42 }




.navbar-brand img { margin-right: 0; width: 100%; max-height: 40px }

/* SEO STRATEGY STAGES */
.search-engine-optimization-steps { background-image: url('/img/optimized/96/search-engine-optimization-strategies.webp'); background-position: 0px 0px; display: inline-block; width: 96px; height: 96px }
.search-engine-optimization-strategy { margin: 0 }


.card { box-shadow: 0 3px 20px 5px #00000030, 0px 5px 8px 2px #00000030; }
    .card .card-img-top { width: 100%; margin: 0 auto; text-align: center; background-color: black }
        .card .card-img-top img { width: 100%; border-top-left-radius: var(--mdb-card-inner-border-radius); border-top-right-radius: var(--mdb-card-inner-border-radius) }


ol > li { margin-top: 0px }
button.navbar-toggler div { width: 22px; height: 4px; background-color: black; margin: 4px 0 }


/* FONT COLORS */
.fm { font-family: Montserrat; }
.fs { font-family: 'Sofia Sans Extra Condensed'; }
.lh { line-height: 1.8 !important; }
.ls1 { letter-spacing: -0.1vw; }
.ls2 { letter-spacing: -0.2vw; }
.ls3 { letter-spacing: -0.3vw; }
.glow-pink { text-shadow: -2px 1px 3px #ff6de6, -1px -1px 4px #6a7d88; font-weight: 300; }

/* Variable Definitions */

:root { --bg-color-11-top: rgb(199 209 212); --bg-color-11-bottom: rgb(218 218 218); --bg-color-12-top: rgb(243 243 243); --bg-color-12-bottom: rgb(225 225 225); --bg-color-13-top: rgb(239 227 233); --bg-color-13-bottom: rgb(228 197 213); --bg-color-14-top: rgb(185 206 180); --bg-color-14-bottom: rgb(168 185 148); --bg-color-15-top: rgb(237 255 129); --bg-color-15-bottom: rgb(223 235 154); --bg-color-16-top: rgb(235 235 235); --bg-color-16-bottom: rgb(210 214 188); --bg-gray-1: #f5f5f5; --bg-gray-2: #eee; --bg-gray-3: #e7e7e7; --bg-gray-4: #ddd; --bg-gray-5: #d6d6d6; --bg-gray-6: #ccc; --bg-gray-7: #c5c5c5; --bg-gray-8: #bbb; --bg-gray-9: #b5b5b5; --c-purple-1: purple; --c-purple-2: #AC6FAF; --c-purple-3: #bd539d; --c-purple-4: #9c27b0; --c-purple-5: #8d6095; --c-purple-6: indigo; --c-blue-1: #a6d6de; --c-blue-2: #7996c9; --c-blue-3: #707da8; --c-blue-4: #438692; --c-blue-5: #4490cc; --c-blue-6: #2c77d6; --c-blue-7: #3f51b5; --c-blue-8: #161cae; --c-blue-9: #1F497D; --c-green-1: #c9ff64; --c-green-2: #00d862; --c-green-3: #4caf50; --c-green-4: #5bc65f; --c-green-5: #409e64; --c-green-6: #7daf7f; --c-green-7: #89c410; --c-green-8: green; --c-green-9: #0f582c; --c-pink-1: #F077BC; --c-pink-2: #ee5b91; --c-pink-3: #ff00ad; --c-pink-4: #ee237d; --c-pink-5: #b03763; --c-red-1: #ff003e; --c-red-2: #e72a21; --c-red-3: red; --c-red-4: #DE1F1F; --c-red-5: #ce1515; --c-red-6: #87332a; --c-orange-1: orange; --c-orange-2: #ff9800; --c-orange-3: #E36C09; --c-orange-4: #df6a00; --c-brown-1: #c5895b; --c-brown-2: #db6912; --c-brown-3: #b28857; --c-brown-4: #933f00; --c-brown-5: #895110; --c-brown-6: #616161; --c-yellow-1: #f5ff00; --c-yellow-2: #ffeb3b; --c-yellow-3: #ffe500; --c-yellow-4: #e6bc11; --c-black-1: #ddd; --c-black-2: #bbb; --c-black-3: #aaa; --c-black-4: #999; --c-black-5: #777; --c-black-6: #555; --c-black-7: #444; --c-black-8: #333; --c-black-9: #222 }

/* Class Definitions */
.color-purple-1 { color: var(--c-purple-1) }
.color-purple-2 { color: var(--c-purple-2) }
.color-purple-3 { color: var(--c-purple-3) }
.color-purple-4 { color: var(--c-purple-4) }
.color-purple-5 { color: var(--c-purple-5) }
.color-purple-6 { color: var(--c-purple-6) }
.color-blue-1 { color: var(--c-blue-1) }
.color-blue-2 { color: var(--c-blue-2) }
.color-blue-3 { color: var(--c-blue-3) }
.color-blue-4 { color: var(--c-blue-4) }
.color-blue-5 { color: var(--c-blue-5) }
.color-blue-6 { color: var(--c-blue-6) }
.color-blue-7 { color: var(--c-blue-7) }
.color-blue-8 { color: var(--c-blue-8) }
.color-blue-9 { color: var(--c-blue-9) }
.color-green-1 { color: var(--c-green-1) }
.color-green-2 { color: var(--c-green-2) }
.color-green-3 { color: var(--c-green-3) }
.color-green-4 { color: var(--c-green-4) }
.color-green-5 { color: var(--c-green-5) }
.color-green-6 { color: var(--c-green-6) }
.color-green-7 { color: var(--c-green-7) }
.color-green-8 { color: var(--c-green-8) }
.color-green-9 { color: var(--c-green-9) }
.color-pink-1 { color: var(--c-pink-1) }
.color-pink-2 { color: var(--c-pink-2) }
.color-pink-3 { color: var(--c-pink-3) }
.color-pink-4 { color: var(--c-pink-4) }
.color-pink-5 { color: var(--c-pink-5) }
.color-red-1 { color: var(--c-red-1) }
.color-red-2 { color: var(--c-red-2) }
.color-red-3 { color: var(--c-red-3) }
.color-red-4 { color: var(--c-red-4) }
.color-red-5 { color: var(--c-red-5) }
.color-red-6 { color: var(--c-red-6) }
.color-orange-1 { color: var(--c-orange-1) }
.color-orange-2 { color: var(--c-orange-2) }
.color-orange-3 { color: var(--c-orange-3) }
.color-orange-4 { color: var(--c-orange-4) }
.color-brown-1 { color: var(--c-brown-1) }
.color-brown-2 { color: var(--c-brown-2) }
.color-brown-3 { color: var(--c-brown-3) }
.color-brown-4 { color: var(--c-brown-4) }
.color-brown-5 { color: var(--c-brown-5) }
.color-brown-6 { color: var(--c-brown-6) }
.color-yellow-1 { color: var(--c-yellow-1) }
.color-yellow-2 { color: var(--c-yellow-2) }
.color-yellow-3 { color: var(--c-yellow-3) }
.color-yellow-4 { color: var(--c-yellow-4) }
.color-black-1 { color: var(--c-black-1) }
.color-black-2 { color: var(--c-black-2) }
.color-black-3 { color: var(--c-black-3) }
.color-black-4 { color: var(--c-black-4) }
.color-black-5 { color: var(--c-black-5) }
.color-black-6 { color: var(--c-black-6) }
.color-black-7 { color: var(--c-black-7) }
.color-black-8 { color: var(--c-black-8) }
.color-black-9 { color: var(--c-black-9) }

/* BACKGROUND COLORS */
.bg-1 { background-image: linear-gradient(90deg, rgb(82 56 111), rgb(42 32 49)); color: #e0e0e0; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 9px 0px #50376b; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
    .bg-1 a { color: #ffde15 }
        .bg-1 a:hover { color: #19e5ff }
.bg-2 { background-image: linear-gradient(90deg, rgb(227 233 255), rgb(233 235 239)); border-top: 1px solid #a7a7a7; border-bottom: 1px solid #c2c2c2; box-shadow: 0px 0px 13px 0px #97a2d4; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
.bg-3 { background-image: linear-gradient(90deg, rgb(243 243 243), rgb(219 219 219)); color: #111111; border-top: 1px solid #b1b1b1; border-bottom: 1px solid #8d8d8d; box-shadow: 0px 1px 11px -3px #000000ba; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
.bg-4 { background-image: linear-gradient(90deg, rgb(20 36 105), rgb(133 38 139)); color: #e0e0e0; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 9px 0px #50376b; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
    .bg-4 a { color: #96c3e8; font-weight: 600 }
        .bg-4 a:hover { color: #19e5ff }
.bg-5 { background-image: linear-gradient(90deg, rgb(123 28 85), rgb(49 48 110)); color: #e0e0e0; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 9px 0px #50376b; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
    .bg-5 a { color: #c9ff64; letter-spacing: -0.5px }
        .bg-5 a:hover { color: #19e5ff }
.bg-6 { background-image: linear-gradient(90deg, rgb(255 205 230), rgb(205 224 230)); color: #262626; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 9px 0px #50376b; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
.bg-7 { background-image: linear-gradient(90deg, rgb(234 234 234), rgb(255 255 255)); color: #262626; border: 1px solid #c6c6c6; box-shadow: 2px 3px 5px 0px #848484; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
.bg-8 { background-image: linear-gradient(90deg, rgb(50 50 57), #475588); color: #e0e0e0; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 9px 0px #50376b; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
    .bg-8 a { color: #baea41; font-weight: 600 }
        .bg-8 a:hover { color: #19e5ff }
.bg-9 { background-image: linear-gradient(90deg, rgb(67 66 66), rgb(63 63 132), #7c4584); color: #fafafa; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 11px 1px #000000db; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important }
    .bg-9 a { color: #ff75b6 }
        .bg-9 a:hover { color: #19e5ff }
.bg-10 { background-image: linear-gradient(45deg, rgb(255 227 0 / 45%), rgb(255 112 0 / 30%), rgb(250 0 0 / 30%), rgb(255 0 241 / 30%), rgb(77 9 246 / 30%)); border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; box-shadow: 0px 0px 11px 1px #000000db; position: relative; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; color: #000000 }
    .bg-10 a { color: #0037ff; font-weight: 600 }
        .bg-10 a:hover { color: #19e5ff }

.bg-11 { background-image: linear-gradient(180deg, var(--bg-color-11-top) 0%, rgb(255 255 255) 15%, rgb(255 255 255) 85%, var(--bg-color-11-bottom) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-12 { background-image: linear-gradient(180deg, var(--bg-color-12-top) 0%, rgb(255 255 255) 50%, var(--bg-color-12-bottom) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-13 { background-image: linear-gradient(180deg, var(--bg-color-13-top) 0%, rgb(255 255 255) 20%, rgb(255 255 255) 80%, var(--bg-color-13-top) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-14 { background-image: linear-gradient(180deg, var(--bg-color-14-top) 0%, rgb(255 255 255) 15%, rgb(255 255 255) 85%, var(--bg-color-14-bottom) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-15 { background-image: linear-gradient(180deg, var(--bg-color-15-top) 0%, rgb(255 255 255) 15%, rgb(255 255 255) 85%, var(--bg-color-15-bottom) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-16 { background-image: linear-gradient(180deg, rgb(214 214 214) 0%, rgb(255 255 255) 19%, rgb(255 255 255) 82%, rgb(224 224 224) 100%); position: relative; padding-top: 1rem !important; padding-bottom: 1rem !important }
.bg-white { background-color: white !important }
.bg-gray-1 { background-color: var(--bg-gray-1) }
.bg-gray-2 { background-color: var(--bg-gray-2) }
.bg-gray-3 { background-color: var(--bg-gray-3) }
.bg-gray-4 { background-color: var(--bg-gray-4) }
.bg-gray-5 { background-color: var(--bg-gray-5) }
.bg-gray-6 { background-color: var(--bg-gray-6) }
.bg-gray-7 { background-color: var(--bg-gray-7) }
.bg-gray-5 { background-color: var(--bg-gray-8) }
.bg-gray-6 { background-color: var(--bg-gray-9) }

/* CUSTOM ORDERED LIST STYLE */
/* STYLE 1 */
ol.colored-cards { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); padding: 0rem; margin: 0; list-style: none; counter-reset: cardCount }
    ol.colored-cards > .colored-card { color: hsl(0 0% 40%); background-color: #ffffff; text-align: center; padding: 0.5rem 0.5rem 0.5rem 2rem; border-radius: .5rem; box-shadow: .5rem .5rem 1rem hsl(0 0% 0% / .25); position: relative; counter-increment: cardCount }
        ol.colored-cards > .colored-card::before { --top: 1.5rem; --left: -0.75rem; content: "Option " counter(cardCount, decimal-leading-zero); color: hsl(0 0% 100%); padding: 0.25rem 1rem; background-color: var(--accent-color); border-radius: 0 0 .5rem .5rem; box-shadow: -0.125rem 0.125rem 0.25rem hsl(0 0% 0% / .25); /* position */ position: absolute; top: 0; right: 100%; transform-origin: top right; transform: rotate(-90deg) translate(calc(var(--top) * -1), var(--left)); white-space: nowrap }
        ol.colored-cards > .colored-card > i { color: var(--accent-color); font-size: 2rem }
        ol.colored-cards > .colored-card > h2 { font-weight: 400; color: var(--accent-color); margin-top: 0 }

/* STYLE 2 */
div.ribbon-cards { padding: 0rem; min-height: 100vh; display: grid; place-items: center }
ul.ribbon-cards { width: min(100%, 60rem); overflow: hidden; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 5rem); list-style: none; perspective: calc(100vw); display: grid; row-gap: 8px }
    ul.ribbon-cards li.ribbon-card { position: relative; padding-block: 1rem; padding-inline: 0.5rem; background-color: var(--ribbon-bg-color); background-image: linear-gradient(to right, rgb(0 0 0 / .15), transparent); transform-style: preserve-3d; color: var(--color); display: grid; grid-template: 'icon' 'title' 'content'; row-gap: 0.5rem; column-gap: 0.5rem }
        ul.ribbon-cards li.ribbon-card::before, ul.ribbon-cards li.ribbon-card::after { --side-rotate: 60deg; content: ""; position: absolute; top: 0; height: 100%; width: 100%; transform-origin: calc(50% - (50% * var(--ry))) 50%; transform: rotateY(calc(var(--side-rotate) * var(--ry))); background-color: inherit; background-image: linear-gradient(calc(90deg * var(--ry)), rgb(0 0 0 / .25), rgb(0 0 0 / .5)) }
        ul.ribbon-cards li.ribbon-card::before { --ry: -1; right: 100% }
        ul.ribbon-cards li.ribbon-card::after { --ry: 1; left: 100% }
        ul.ribbon-cards li.ribbon-card .icon { grid-area: icon; display: grid; place-items: center }
            ul.ribbon-cards li.ribbon-card .icon i { font-size: 2rem }
        ul.ribbon-cards li.ribbon-card .title { grid-area: title; font-size: 1.25rem; font-weight: 700; text-align: center }
        ul.ribbon-cards li.ribbon-card .content { grid-area: content }

@media (min-width: 30rem) {
    ul.ribbon-cards li.ribbon-card { grid-template: 'icon title' 'icon content'; text-align: left }
        ul.ribbon-cards li.ribbon-card .title { text-align: left }
}

/* STYLE 4 NUMBERS ONLY */
:root { --bg1: linear-gradient(180deg, var(--bg-color-12-top) 0rem, rgb(255 255 255) 20rem); --blue: #588fc3; --green: #62c383; --purple: #9b59b6; --gold: #f1c40f; --red: #e74c3c; --orange: #e67e22; --pink: #d40084; --shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f; --shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022 }
ul.seo-large-number-list { font-size: var(--font-size); display: flex; flex-wrap: wrap; justify-content: center }
    ul.seo-large-number-list > li { position: relative; width: 100%; border-radius: 0.5em; padding: 0.5em; z-index: 1; transition: all 0.2s; list-style: none }
    ul.seo-large-number-list li .numberWrap { position: absolute }
    ul.seo-large-number-list li .sub-content { padding: 0em 3em 1em 11em; position: relative }
    ul.seo-large-number-list li .number { font-family: 'SpecialGothicCondensedOne', sans-serif; font-size: 14em; font-weight: 900; width: 0.8em; text-align: center; line-height: 0.9; text-shadow: -7px -5px 1px #e0e0e0 }
        ul.seo-large-number-list li .number.fontColor1, .fontColor1 { color: var(--blue) }
        ul.seo-large-number-list li .number.fontColor2, .fontColor2 { color: var(--green) }
        ul.seo-large-number-list li .number.fontColor3, .fontColor3 { color: var(--purple) }
        ul.seo-large-number-list li .number.fontColor4, .fontColor4 { color: var(--pink) }
        ul.seo-large-number-list li .number.fontColor5, .fontColor5 { color: var(--red) }
        ul.seo-large-number-list li .number.fontColor6, .fontColor6 { color: var(--orange) }
    ul.seo-large-number-list li .coverWrap { transform: rotate(130deg); position: absolute; width: 18em; height: 15em; left: -3em; top: -1em }
        ul.seo-large-number-list li .coverWrap .numberCover { position: absolute; background: #ffffffed; width: 18em; height: 6em; border-radius: 50% 50% 0 0; border-bottom: 3px solid #f5f8f7; transition: all 0.4s }
            ul.seo-large-number-list li .coverWrap .numberCover::before { position: absolute; content: ""; bottom: 5px; left: 4em; right: 4em; top: 5em; box-shadow: 0 0 30px 17px #48668577; border-radius: 100px / 10px; z-index: -1 }
            ul.seo-large-number-list li .coverWrap .numberCover::after { position: absolute; bottom: 0; content: ""; left: -10%; width: 120%; height: 150%; background: radial-gradient( at bottom, #48668533, transparent, transparent ); z-index: 1 }
    ul.seo-large-number-list > li > .content { margin: 3em 3em 1em 14em; position: relative; min-height: 9em }
        ul.seo-large-number-list > li > .content > h3 { font-size: 2.4em; font-family: 'Montserrat'; font-weight: 600; letter-spacing: -1pt }

/* STYLE 3 */
.olcards,
.olcards * { margin: 0; padding: 0; box-sizing: border-box }
.olcards { list-style: none; counter-reset: cardCount; display: flex; flex-direction: column; --cardsGap: 1rem; gap: var(--cardsGap); padding-bottom: 0; padding-inline-start: 0px }
    .olcards li { counter-increment: cardCount; display: flex }
        .olcards li::before { content: counter(cardCount, upper-roman)"."; min-width: 1em; color: #bbbbbb; font-size: 1.4em; font-weight: 300; font-family: Montserrat; z-index: 1; display: flex; justify-content: right; align-items: center; height: 1em }
        .olcards li .content { --inlinePadding: 0em; --boxPadding: 0em; display: grid; padding: 0em 0em 0em 1.5em; grid-template-areas:
                "icon title"
                "icon text"; gap: 0em; position: relative; line-height: 1.3 }
        .olcards li .icon { grid-area: icon; align-self: center; font-size: 2em }
        .olcards li .content .title { grid-area: title; font-size: 1.25em; font-weight: 700; line-height: 1.3 }
        .olcards li .content .text { grid-area: text; line-height: 1.3; font-size: 1em }

/* STYLE 5 RIBBONS */
ul.seo-ribbons, ul.seo-ribbons > * { margin: 0; padding: 0; box-sizing: border-box }
ul.seo-ribbons { --outset: clamp(14px, 2vw, 24px); width: calc(100%+var(--outset)); margin-inline: auto; padding-top: 90px; padding-inline: var(--outset); padding-bottom: calc((var( --outset) * 1.5) + 40px); display: grid; gap: calc(var( --outset) * 1); list-style: none; position: relative }
    ul.seo-ribbons::before { content: ""; inset-inline: var(--outset); bottom: var(--outset); top: 0; background: #ededed; position: absolute; z-index: -1; box-shadow: inset 0 0 8px rgb(0 0 0 / .5); border-radius: calc(var(--outset) / 2) }
    ul.seo-ribbons .title { display: grid; align-items: center; text-align: center; font-size: 2rem; font-weight: 700; min-height: calc(var(--outset) * 2.5); margin-bottom: calc(var(--outset) * -1); padding-inline: var(--outset); padding-top: 1rem; padding-bottom: 0.5rem }
    ul.seo-ribbons li { position: relative; padding: calc(var(--outset) / 6) calc(var(--outset) / 2); color: var(--text-color, white); background-color: var(--bg-color, grey); box-shadow: 0 3px 7px 2px rgb(0 0 0 / 84%); --gradSides: rgb(255 255 255 / 0.25); background-image: linear-gradient( 90deg, var(--gradSides), transparent calc(var(--outset) * 0.5) calc(100% - var(--outset) * 0.5), var(--gradSides) ); min-height: 4rem; /* margin-top: 2em; */ }
        ul.seo-ribbons li::before, ul.seo-ribbons li::after { content: ""; position: absolute; width: var(--outset); height: calc(100% + var(--outset) * 2); bottom: 0; background-color: inherit; border-radius: var(--brTL, 0) var(--brTR, 0) var(--brBR, 0) var(--brBL, 0); --circleY: var(--outset); --circleColor: rgb( 0 0 0 / .5); background-image: radial-gradient( circle at var(--circleX) var(--circleY), var(--circleColor) var(--outset), transparent calc(var(--outset) + 0px) ), linear-gradient( var(--gradDir), var(--gradSides), transparent calc(var(--outset) * 0.25) calc(100% - var(--outset) * 0.75), rgb(0 0 0 / 0.25) ) }
        ul.seo-ribbons li::before { right: 100%; --brTL: var(--outset); --brBL: var(--outset); --circleX: 100%; --gradDir: -90deg; --clip-posX: 100% }
        ul.seo-ribbons li::after { left: 100%; --brTR: var(--outset); --brBR: var(--outset); --circleX: 0%; --gradDir: 90deg; --clip-posX: 0 }
        ul.seo-ribbons li:not(:first-of-type)::before,
        ul.seo-ribbons li:not(:first-of-type)::after { -webkit-mask-image: radial-gradient( circle at var(--clip-posX) 0%, rgb(0 0 0 / 0) calc(var(--outset) - 1px), rgba(0 0 0 / 1) var(--outset) ); mask-image: radial-gradient( circle at var(--clip-posX) 0%, rgb(0 0 0 / 0) calc(var(--outset) - 1px), rgba(0 0 0 / 1) var(--outset) ) }


/* STYLE 6 Circle Numbered Cards */
ol.circle-num-cards { list-style: none; counter-reset: list; padding: 0; }
    ol.circle-num-cards > li { --stop: calc(100% / var(--length) * var(--i)); --l: 52%; --l2: 84%; --h: calc((var(--i) - 1) * (360 / var(--length))); --c1: hsl(var(--h), 51%, var(--l)); --c2: hsl(var(--h), 51%, var(--l2)); position: relative; counter-increment: list; margin: 2rem auto; padding: 1.5rem 0.5rem; box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.5); border-radius: 0.25rem; overflow: hidden; background-color: white; }
        ol.circle-num-cards > li::before { content: ''; display: block; width: 100%; height: 1rem; position: absolute; top: 0; left: 0; background: linear-gradient(to right, var(--c1) var(--stop), var(--c2) var(--stop)); }
    ol.circle-num-cards h2 { display: flex; align-items: baseline; margin-block-start: 0; margin-block-end: 0; margin: 1rem 0; letter-spacing: -1.5px; font-weight: 500; }
        ol.circle-num-cards h2::before { display: flex; justify-content: center; align-items: center; flex: 0 0 auto; margin-right: 0.25em; width: 1.25em; height: 1.25em; content: counter(list); font-family: 'Sofia Sans Extra Condensed'; font-weight: 700; padding: 0.5rem; border-radius: 50%; background-color: var(--c1); color: white; }
    ol.circle-num-cards p { padding: 0 0 10px 10px; margin: 0; }
ol.sub-list { list-style: none; counter-reset: steps; padding: 0; }
    ol.sub-list h3 { display: flex; align-items: baseline; margin: 1.5rem 0; letter-spacing: -0.25px; font-weight: 500; text-decoration: underline 3px #eee; }
    ol.sub-list > li { counter-increment: steps; }
    ol.sub-list h3::before { display: flex; justify-content: center; align-items: center; flex: 0 0 auto; margin-right: 0.5em; width: 1em; height: 1em; content: counter(steps); font-family: 'Sofia Sans Extra Condensed'; font-weight: 600; padding: 0.65em; border-radius: 50%; border: 1px solid var(--c1); background-color: #ffffff; /* opacity: 0.8; */ color: var(--c1); border-bottom: 4px solid var(--c1); text-decoration: underline #fff; }

/* STYLE 7 Horizontal Cards with icon and number */
.ol-cards-services, .ol-cards-services * { margin: 0; padding: 0; box-sizing: border-box; }
.ol-cards-services { --flapWidth: 2rem; --flapHeigth: 1rem; --iconSize: 3rem; --numberSize: 3rem; --colGapSize: 2rem; max-width: 1000px; margin-inline: auto; display: grid; gap: 2rem; padding-inline-start: var(--flapWidth); color: #222; counter-reset: ol-cards-services-count; list-style: none; }
    .ol-cards-services > li { display: grid; grid-template-areas:
            "icon title"
            "icon descr"; gap: 1rem; align-items: center; padding: 0.5rem 0.5rem 0.5rem 0; border-radius: 1rem; background-image: linear-gradient(to bottom right, #e9eaec, #ffffff); counter-increment: ol-cards-services-count; filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25)); box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25); }
        .ol-cards-services > li > .icon { grid-area: icon; background: var(--accent-color); width: calc(2 * var(--flapWidth) + var(--iconSize)); border-radius: 0 2rem 2rem 0; margin-inline-start: calc(-1 * var(--flapWidth)); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); position: relative; display: grid; place-items: center; }
            .ol-cards-services > li > .icon::before { content: ""; position: absolute; width: var(--flapWidth); height: calc(100% + calc(var(--flapHeigth) * 2)); left: 0; top: calc(var(--flapHeigth) * -1); clip-path: polygon( 0 var(--flapHeigth), 100% 0, 100% 100%, 0 calc(100% - var(--flapHeigth)) ); background-color: var(--accent-color); background-image: linear-gradient( 90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) ); z-index: -1; }
            .ol-cards-services > li > .icon div::before { color: #ffffff; font-size: var(--numberSize); font-weight: 700; content: counter(ol-cards-services-count, decimal-leading-zero); }
        .ol-cards-services > li > .title { grid-area: title; }
            .ol-cards-services > li > .title h3 { font-weight: 700; }
        .ol-cards-services > li > .descr { grid-area: descr; }



@media (max-width: 575px) {
    .ol-cards-services { --numberSize: 2rem; --flapWidth: 1rem; width: 95% }
        .ol-cards-services > li { grid-template-areas: "icon" "title" "descr"; padding-top: 30px }
            .ol-cards-services > li > .icon div::before { font-size: var(--numberSize); font-weight: 700; line-height: 1.5; }
        .ol-cards-services p.lead { font-weight: 350; }
        .ol-cards-services > li > .title { padding-left: 1rem; }
        .ol-cards-services > li > .descr { padding-left: 1rem; }
}

/* STYLE 8 COLORED SLICES UNORDERED LIST */
ul.colored-slices { padding-inline-start: 30px; }
    ul.colored-slices li { list-style: none; margin: 7px 2px; border-radius: 6px; background-image: linear-gradient(to bottom, #f0f0f0, #dedddd, #ffffff); border: 1px solid #ddd; padding: 0px 0px; }
        ul.colored-slices li p { padding: 0.25rem 1rem; display: inline-block; color: black; border: 0.5px solid var(--clr); border-radius: 2px 16px 16px 2px; background-image: linear-gradient(177deg, #0000001a, var(--clr), var(--clr), var(--clr), #ffffffb8); filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.25)); box-shadow: inset 2px 2px 3px 0px white, inset -1px -1px 2px rgba(0, 0, 0, 0.25); margin-right: 10px; }
        ul.colored-slices li div { display: inline-block; padding: 0.25rem 0.75rem; }

@media (max-width: 575px) {
    ul.colored-slices li div { display: block; }
}

ul.colored-slices-2 { padding-inline-start: 30px; }
    ul.colored-slices-2 li { list-style: none; margin: 9px 2px; }
        ul.colored-slices-2 li p { padding: 0.15rem 1rem; display: inline-block; background-color: var(--clr); color: black; border-radius: 5px; border: 1px outset #aaa; box-shadow: 3px 3px 4px #555; }

ul.colored-slices-2.inline li{display:inline-block !important;margin: 4px; }

/* PLAIN ORDERED LISTS 1 OR 2 Liners */
.list-1, .list-2 { counter-reset: items; list-style: none; padding-left: 4rem; }
    .list-1 li, .list-2 li { margin-bottom: 10px; position: relative; counter-increment: items; display: inline; }
        .list-1 li::before, .list-2 li::before { content: counter(items); Position: absolute; Left: -3.25rem; top: 10px; font-size: 2rem; Color: #c5c5c5; Font-weight: 700; text-align: right; width: 3rem; padding-right: 10px; border-right: 3px solid #e5e5e5; }
ul.list-1 > li::before, ul.list-2 > li::before { content: "\00BB"; border: none !important; }
ol.list-1 > li::before { top: 0px; line-height: 1.25; }
ul.list-1 > li::before { top: 0px; line-height: 1; padding-bottom: 4px; }
.list-1 li p, .list-2 li p { padding: 0 0 0 5px; margin: 0 0 5px 0 }
