@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/montserrat.woff2") format("woff2"), url("/fonts/montserrat.ttf") format("truetype")}

@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"), url("/fonts/sofiasansextracondensed.ttf") format("truetype")}

:root, [data-mdb-theme=light] { --mdb-font-sans-serif: "Montserrat", system-ui, -apple-system, sans-serif, "Segoe UI", "Helvetica Neue", Arial; --mdb-font-condensed: "Sofia Sans Extra Condensed", 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-border-width: 1px; --mdb-border-style: solid; --mdb-border-color: #bdbdbd; --mdb-border-radius: 0.25rem; --mdb-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --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)}
*, *::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) }
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 }
a { color: #3b71ca }
    a:hover { color: #c03899 }
    a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none }
figure { margin: 0 0 1rem }
img, svg { vertical-align: middle }
table { caption-side: bottom; border-collapse: collapse }
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 }
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 }
.blockquote { margin-bottom: 1rem; font-size: 1.25rem }
    .blockquote > :last-child { margin-bottom: 0 }
.figure { display: inline-block }
.container { --mdb-gutter-x: 1rem; --mdb-gutter-y: 0; width: 100%; padding-right: calc(var(--mdb-gutter-x) * 0.5); padding-left: calc(var(--mdb-gutter-x) * 0.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) * 0.5); padding-left: calc(var(--mdb-gutter-x) * 0.5); margin-top: var(--mdb-gutter-y) }
.col { flex: 1 0 0% }
.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% }
.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: 2rem }
.g-4, .gy-4 { --mdb-gutter-y: 2rem }
@media(min-width: 576px) {

    .row-cols-sm-1 > * { flex: 0 0 auto; width: 100% }
    .row-cols-sm-2 > * { flex: 0 0 auto; width: 50% }
}
@media(min-width: 768px) {
    .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% }
}
@media(min-width: 992px) {
    .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% }
}
@media(min-width: 1200px) {
    .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.33333333% }
    .row-cols-xl-4 > * { flex: 0 0 auto; width: 25% }
}
.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-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-text:last-child { margin-bottom: 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-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) }
.breadcrumb { display: flex; flex-wrap: wrap; padding: 0 0; margin-bottom: 1rem; font-size: 1rem; list-style: none }
.breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem }
    .breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: 0.5rem; color: rgba(0,0,0, 0.55); content: "/" }
.breadcrumb-item.active { color: rgba(0,0,0, 0.55) }
.d-inline { display: inline !important }
.d-inline-block { display: inline-block !important }
.d-block { display: block !important }
.d-flex { display: flex !important }
.d-inline-flex { display: inline-flex !important }
.d-none { display: none !important }
.flex-column { flex-direction: column !important }
.flex-row-reverse { flex-direction: row-reverse !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 }
.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 }
.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 }
.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: 768px) {
    .d-md-inline { display: inline !important }
    .d-md-inline-block { display: inline-block !important }
    .d-md-block { display: block !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-none { display: none !important }
}
:root, [data-mdb-theme=light] { --mdb-surface-bg: #fff; --mdb-divider-color: #f5f5f5}
.card { border: 0 }
.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-outline { position: relative; width: 100% }
.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: #4f4f4f; background-color: var(--mdb-body-bg); background-clip: padding-box; border: var(--mdb-border-width) solid #000; border-radius: 0 0 var(--mdb-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.25rem 0 0 }
/* CUSTOM STYLESHEET */
:root, body { 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 3% 0px 3%; line-height: 1.35 }
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 20px; margin-bottom: 0; line-height: 1.2; font-weight: 800; font-family: var(--mdb-font-condensed) }
h1, .h1 { font-size: Clamp(34px, Calc(34px + (66 * ((100vw - 320px) / 1000))), 100px); line-height: 0.85; letter-spacing: -1px; text-align: center; margin-bottom: 1rem }
h2, .h2 { font-size: Clamp(30px, Calc(30px + (30 * ((100vw - 400px) / 500))), 60px) }
h3, .h3 { font-size: Clamp(27px, Calc(27px + (20 * ((100vw - 400px) / 500))), 47px) }
h4, .h4 { font-size: Clamp(25px, Calc(25px + (18 * ((100vw - 400px) / 500))), 43px) }
h5, .h5 { font-size: Clamp(23px, Calc(23px + (14 * ((100vw - 400px) / 500))), 37px) }
h6, .h6 { font-size: Clamp(22px, Calc(22px + (12 * ((100vw - 400px) / 500))), 34px) }
.sub-title-seo { font-size: Clamp(18px, Calc(18px + (29 * ((100vw - 320px) / 1000))), 47px); line-height: 1; font-weight: 400; font-family: var(--mdb-font-sans-serif); letter-spacing: -1px; text-align: center }
@media(min-width: 992px) {
    h1, .h1 { }
    h2, .h2 { font-size: Clamp(60px, Calc(55px + (40 * ((100vw - 992px) / 800))), 95px) }
    h3, .h3 { font-size: Clamp(47px, Calc(47px + (35 * ((100vw - 992px) / 800))), 82px) }
    h4, .h4 { font-size: Clamp(43px, Calc(43px + (30 * ((100vw - 992px) / 800))), 73px) }
    h5, .h5 { font-size: Clamp(37px, Calc(37px + (27 * ((100vw - 992px) / 800))), 64px) }
    h6, .h6 { font-size: Clamp(34px, Calc(34px + (20 * ((100vw - 992px) / 800))), 54px) }
    .sub-title-seo { }
}
.card .card-body h2 { text-transform: uppercase; margin-top: 0 }
@media(min-width: 992px) {
    .h2-lg, .card .card-body h2 { font-size: Clamp(30px, Calc(30px + (20 * ((100vw - 900px) / 500))), 50px) }
}
.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) }
.fs-3 { font-size: Clamp(21px, Calc(21px + (10 * ((100vw - 400px) / 1200))), 31px) }
.fs-4 { font-size: Clamp(24px, Calc(24px + (10 * ((100vw - 400px) / 1200))), 34px) }
.lead, .light { font-family: var(--mdb-font-sans-serif); 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: 1px; width: 100%; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); margin: 0px }
.colorful-border { display: block; height: 2px; width: 60%; background-image: linear-gradient(to right, #00beff45,#a7aaff7a,#f78eff87); margin: 5px auto; border-top: 1px solid #bbbbbb42 }

/* SEO STRATEGY STAGES */
.search-engine-optimization-steps { background-image: url("https://web-design-firm.com/img/optimized/72/search-engine-optimization-strategies.png"); background-position: 0px 0px; display: inline-block; width: 72px; height: 72px }
.search-engine-optimization-strategy { margin: 0 }
.card { box-shadow: 0 3px 20px 5px #00000030, 0px 5px 8px 2px #00000030; max-width: 500px; margin: auto }
    .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 }
.fm { font-family: var(--mdb-font-sans-serif) }
.fs { font-family: var(--mdb-font-condensed) }
.lh { line-height: 1.8 !important }
.ls1 { letter-spacing: -0.1vw }
.ls2 { letter-spacing: -0.2vw }
.ls3 { letter-spacing: -0.3vw }
.ps-1 { position: relative; padding-left: 2rem !important}
.ps-2 { position: relative; padding-left: 3.5rem !important}
.ps-1::before { content: "~"; left: 0.75rem; position: absolute}
.ps-2::before { content: "-"; left: 2.5rem; position: absolute}
.glow-pink { text-shadow: -2px 1px 3px #ff6de6, -1px -1px 4px #6a7d88; font-weight: 300 }
div.bb { display: inline-block }
    div.bb::before { content: "\21DC"; /* content: "\2910";*/ font-size: 2.25em; font-style: normal; line-height: 1; display: inline-block; transform: translate(0px, 4px); margin-right: 5px; text-shadow: 3px 0px 3px #ffd53a }
.tile-1 { background: url("https://web-design-firm.com/img/tile1.png") repeat}
.tile-2 { background: url("https://web-design-firm.com/img/tile2.png") repeat}
.tile-3 { background: url("https://web-design-firm.com/img/tile3.png") repeat}
.tile-4 { background: url("https://web-design-firm.com/img/tile4.png") repeat}
.tile-5 { background: url("https://web-design-firm.com/img/tile5.png") repeat}
.tile-6 { background: url("https://web-design-firm.com/img/tile6.png") repeat}
.tile-7 { background: url("https://web-design-firm.com/img/tile7.png") repeat}
/* Variable Definitions */
:root { --bg-gray-1: #f5f5f5; --c-purple-5: #8d6095; --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 }
.color-black-6 { color: var(--c-black-6) }
/* STYLE 1 */
.colored-cards { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(26ch, 100%), 1fr)); padding: 1rem 1rem 1rem 2rem; margin: 0 auto; list-style: none; counter-reset: cardCount}
    .colored-cards .icon { background-image: url("https://web-design-firm.com/img/optimized/54/search-engine-optimization-strategies-54x54.png"); width: 54px; height: 54px; margin: 0 auto}
    .colored-cards > a.colored-card { color: #616161; text-decoration: none; text-align: center; padding: 15px 20px; border-radius: 1rem; box-shadow: 2px 4px 6px -1px hsl(0 0% 0% / 0.3); position: relative; counter-increment: cardCount; border: 1px solid rgb(from var(--accent-color) r g b / 1); background-color: #c7c7c7; background-image: linear-gradient(180deg, #ffffff 0%, #eeeeee 7%, #fff 16%, #fff 60%, #eee 80%, #f6f6f6 95%, rgb(from var(--accent-color) r g b / 0.5) 105%); margin: 0 auto; width: 100%}
    .colored-cards > .colored-card::before { --top: 30px; --left: -16px; content: var(--section-title); color: hsl(0 0% 100%); border: 1px solid #555; padding: 0 20px; background-color: var(--accent-color); border-radius: 0 0 .5rem .5rem; position: absolute; top: 0; right: 100%; transform-origin: top right; transform: rotate( 270deg) translate(calc(var(--top) * -1), var(--left)); white-space: nowrap; line-height: 1.8}
    .colored-cards > a.colored-card > h4 { color: var(--accent-color); font-size: 2rem; font-weight: 400; margin-top: 0; line-height: 1}
    .colored-cards p { padding-bottom: 0px; text-align: center; font-size: 14px; line-height: 1.5}
    .colored-cards h3 { background-image: linear-gradient(180deg, #999, #555,#333,#333); border: 1px solid #000; color: white }
    .colored-cards > a.colored-card:hover { background-image: linear-gradient( 180deg, #777 0%, #494949 9%, #333 55%, #444 94%, #666 100%); color: white}
        .colored-cards > a.colored-card:hover .icon { filter: brightness(100)}
/* 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: var(--mdb-font-sans-serif); font-weight: 800; padding: 0.5rem; border-radius: 50%; background-color: var(--c1); color: white }
    ol.circle-num-cards p { padding: 0 5px 10px 10px; margin: 0 }
ol.sub-list { list-style: none; counter-reset: steps; padding: 0 0 0 5px }
    ol.sub-list h3 { display: block; align-items: baseline; margin: 1.5rem 0; letter-spacing: -0.25px; font-weight: 600; border-bottom: solid 1px var(--c1) }
    ol.sub-list > li { counter-increment: full-list }
    ol .sub-list h3::before { content: "No. " counter(full-list); font-family: var(--mdb-font-condensed); font-weight: 900; padding: 0em; border-radius: 0 0 100% 0; background-color: #ffffff00; opacity: 0.65; color: var(--c1); font-size: 1.25em; display: block; border-bottom: solid 5px #eee; height: 1.1em }
/* 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: 2rem; --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"; column-gap: 10px; 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(var(--flapWidth) + var(--iconSize)); border-radius: 0 8px 8px 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; line-height: 1.25 }
            .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; font-family: var(--mdb-font-sans-serif); content: counter(ol-cards-services-count) }
        .ol-cards-services > li > .title { grid-area: title }
            .ol-cards-services > li > .title h3 { font-weight: 800 }
                .ol-cards-services > li > .title h3 a { color: var(--accent-color); text-decoration: none }
        .ol-cards-services > li > .descr { grid-area: descr; padding-left: 0.7rem }
@media (max-width: 480px) {
    .ol-cards-services { --numberSize: 1.75rem; --flapWidth: 0.75rem; --flapHeigth: 1.5rem }
        .ol-cards-services > li > .icon { width: 2rem }
        .ol-cards-services p.lead { font-weight: 350 }
}
/* 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 }
        ul.colored-slices li ul li { margin: 4px 0px; background-image: none; display: inline-block; border: none }
@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 }
/* Colored Service Blocks */
ul.service-block { padding-inline-start: 0px }
    ul.service-block li { list-style: none }
        ul.service-block li a, .service-block a { margin: 7px 2px; border-radius: 6px; background-image: linear-gradient(to bottom, #f0f0f0, #dedddd, #ffffff); border: 1px solid var(--clr); display: block; text-decoration: none; color: #3b3c3e}
            ul.service-block li p, .service-block a p, .service-block a h3 { padding: 0.25rem 0.75rem; border: 1px solid #8d8d8d; background-color: var(--clr) }
            .service-block a p, .service-block h3 { text-align: center }
            ul.service-block li div, .service-block a div { display: block; padding: 0.25rem 0.75rem }
            ul.service-block li a:hover, .service-block a:hover { background-image: linear-gradient(180deg, #999, #555,#333,#333); border: 1px solid #000 }
                ul.service-block li a:hover p, .service-block a:hover p, .service-block a:hover h3 { background: none; border-color: transparent; color: #fff }
                ul.service-block li a:hover div, .service-block a:hover div { color: var(--clr); background-image: none }
/* 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: 5px; position: relative; counter-increment: items; display: block }
        .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; display: inline-block }
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: -5px; line-height: 1; padding-bottom: 4px }
.list-1 li p, .list-2 li p { padding: 0 0 0 5px; margin: 0 0 5px 0 }
/* NEW NAVBAR */
header { position: relative; z-index: 1001; height: 48px; background: linear-gradient(to bottom, #ffffff, #dadada, #f5f5f5); box-shadow: 0px 2px 6px 0px #0000008f }
#hamburger { font-size: 2rem; background: none; border: none; cursor: pointer; z-index: 1001; position: relative; float: right; right: 0; width: 48px; height: 48px; line-height: 1; vertical-align: text-top }
#close-menu { align-self: flex-start; font-size: 3rem; background: none; border: none; color: #fff; cursor: pointer; line-height: 1; width: 100%; display: none; visibility: hidden }
.menu { position: fixed; top: 0; right: calc(-100% - 15px); width: min(100%, 300px); height: 100vh; background: #121212e3; color: #fff; padding: .5rem 1rem; display: none; visibility: hidden; flex-direction: column; gap: 1rem; box-shadow: -8px 0px 4px rgba(0, 0, 0, 0.5); transition: right 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); z-index: 1002 }
    .menu a { display: none; visibility: hidden; color: #fff; text-decoration: none; text-align: center; font-size: 1rem; height: 48px; min-width: 48px; font-weight: 500; padding: 8px 0px }
    .menu.open { right: 0; display: flex; visibility: visible }
        .menu.open a, .menu.open #close-menu { display: flex; visibility: visible }
.overlay { position: fixed; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 999; opacity: 0; pointer-events: none }
    .overlay.visible { opacity: 1; pointer-events: auto; display: block }
        .overlay.visible.hidden, .hidden { display: none }
@media (min-width: 768px) {
    #hamburger, #close-menu, .overlay { display: none; visibility: hidden }
    .menu { all: unset; display: flex; visibility: visible; gap: 1rem; color: inherit; position: static; flex-direction: row; align-items: stretch; padding: 0; align-content: center; flex-wrap: wrap; justify-content: space-evenly }
        .menu a { display: flex; transition: all .5s; visibility: visible; color: black; line-height: 2; text-shadow: 0px 0px 2px var(--menu-color)}
}
.menu a:hover { text-shadow: none; text-decoration: overline #c1c1c1 2px }
footer { background-color: #f3f3f3; color: #363636; font-size: max(14px, 0.8rem) }
    footer h4 { font-size: 1.6rem; text-shadow: 0px 0px 2px var(--foot-color); font-weight: 700; margin: 0px; padding: 0px; line-height: 1 }
    footer .footer-highlight a { min-height: 38px; margin: 2px auto; position: relative; display: table; font-weight: 550; text-decoration-color: #d1d1d1; text-decoration-thickness: 2px; color: #2e2e2e; line-height: 1; padding: 20px 0px 0px }
        footer .footer-highlight a::after { content: ""; position: absolute; width: 100%; left: 0; height: 0px; background: linear-gradient(to right, #f25cbd, var(--foot-color), #1365ff); bottom: 2px; transform: scaleX(0); transform-origin: left; transition: transform 1s linear; opacity: 0.65 }
    footer h4 a { text-decoration: none }
    footer .footer-highlight a:hover, footer .footer-highlight a:focus { text-decoration: none; text-shadow: 0px 0px 2px rgb(from var(--foot-color) r g b / 0.75); color: #000000 }
        footer .footer-highlight a:hover::after, footer .footer-highlight a:focus::after { transform: scaleX(1); height: 1px }
.service { list-style: none; position: relative; display: block; padding-top: 10px; padding-bottom: 10px; margin: 10px 0px }
    .service::before, .service::after { content: ""; position: absolute; bottom: 4px; left: 6px; width: calc(100% - 12px); height: 100%; background: url("https://web-design-firm.com/img/service-frame.png") bottom left no-repeat; z-index: -1 }
    .service::after { transform: rotate(180deg); top: 4px }
    .service p { padding: 11px; height: 100%; text-align: center; display: inline-block; width: calc(100% - 10px); box-shadow: 0px 0px 2px 0px #737272; margin-left: 5px; background: linear-gradient(13deg, #e6e6e6, #fcfcfc, #fff, #e9e8e8); line-height: 1.5 }


    /* 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: 95%; margin-inline: auto; padding-top: calc(var(--outset) * 3); 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: #efefef; border: 1px solid #d2d2d2; position: absolute; z-index: 0; box-shadow: inset 0 0 13px 0px rgb(0 0 0 / .55), 0px 0px 6px 0px #000000; 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;  }
        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 { 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)) }