:root {
    /* ---- Brand palette (H2H identity guide) ---- */
    --teal: #30CCBC;
    /* Campaign Teal  - primary. Fills & accents; never small text on white */
    --teal-dk: #22A99B;
    --teal-lt: #E3F8F5;
    --green: #1C6645;
    /* Deep Green     - primary. Structure; the text-safe brand colour */
    --green-dk: #134D34;
    --green-mid: #1A6F5F;
    --green-lt: #E5F2EB;
    --orange: #F7941D;
    /* Campaign Orange - secondary accent: CTAs, prices, the one thing to read */
    --orange-dk: #E0810A;
    --orange-lt: #FEF1E0;
    --night: #072E2A;
    --red: #E11B26;
    --red-dk: #B5121C;
    /* darkest green, used behind photography */
    --soft: #E9F9F7;
    /* ---- Neutrals ---- */
    --ink: #0F1F19;
    --body: #46524D;
    --muted: #66746F;
    --line: #D3EAE6;
    --white: #fff;
    --bg: #F6FCFB;
    --r: 5px;
    --r-lg: 5px;
    --shadow: 0 2px 4px rgba(28, 102, 69, .05), 0 12px 32px rgba(28, 102, 69, .08);
    --shadow-lg: 0 8px 20px rgba(28, 102, 69, .09), 0 24px 60px rgba(28, 102, 69, .14);
    /* ---- Type: Montserrat for body, Playfair Display for headings ---- */
    --font: 'Montserrat', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --max: 1180px;
    --hero: url("../../../../uploads/2026/09/banner-image.png");
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--body);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: lining-nums;
    color: var(--green);
    line-height: 1.22;
    margin: 0
}

p {
    margin: 0
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

section {
    padding: 88px 0
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 14px
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 5px;
    background: var(--orange)
}

h2.sec {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    letter-spacing: 0
}

.sec-sub {
    margin-top: 14px;
    font-size: 16px;
    max-width: 660px;
    color: var(--muted)
}

.center {
    text-align: center
}

.center .sec-sub {
    margin-left: auto;
    margin-right: auto
}

.center .eyebrow::before {
    display: none
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 2px solid transparent;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--font);
    transition: .22s ease;
    white-space: nowrap
}

.btn svg {
    width: 17px;
    height: 17px;
    flex: none
}

.btn-primary {
    background: var(--orange);
    color: #3d2600;
    box-shadow: 0 8px 22px rgba(247, 148, 29, .35)
}

.btn-primary:hover {
    background: #FAA94A;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(247, 148, 29, .45)
}

.btn-ghost {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .55)
}

.btn-ghost:hover {
    background: #fff;
    color: var(--green);
    border-color: #fff;
    transform: translateY(-2px)
}

.btn-green {
    background: var(--teal);
    color: var(--ink);
    box-shadow: 0 8px 22px rgba(48, 204, 188, .42)
}

.btn-green:hover {
    background: var(--teal-dk);
    transform: translateY(-2px)
}

.btn-outline {
    background: #fff;
    color: var(--green);
    border-color: var(--green)
}

.btn-outline:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--ink);
    transform: translateY(-2px)
}

.btn-sm {
    padding: 9px 17px;
    font-size: 13px
}

.btn-block {
    width: 100%
}

/* ---------- header ---------- */
.topbar {
    background: linear-gradient(125deg, #134D34 0%, #2ea992 50%, #3ad0c0 100%);
    color: #fff;
    font-size: 13px
}

.topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    height: 40px
}

.topbar a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600
}

.topbar a:hover {
    color: var(--orange)
}

.topbar .tb-left {
    display: flex;
    gap: 22px;
    align-items: center;
    color: #E6F6EE
}

.topbar svg {
    width: 14px;
    height: 14px
}

.tb-em {
    color: #fff !important
}

.tb-em svg {
    color: var(--orange)
}

header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line)
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 80px
}

.logo img {
    height: 48px;
    width: auto;
    max-width: none
}

.menu {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap
}

.menu a {
    position: relative;
    padding: 6px 0
}

.menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2.5px;
    width: 0;
    background: var(--teal);
    border-radius: 5px;
    transition: width .25s
}

.menu a:hover {
    color: var(--green)
}

.menu a:hover::after {
    width: 100%
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 12px
}

.burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--green);
    position: relative
}

.burger span::before,
.burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--green)
}

.burger span::before {
    top: -6px
}

.burger span::after {
    top: 6px
}

.mobile-menu {
    display: none;
    flex-direction: column;
    padding: 8px 24px 24px;
    gap: 2px;
    border-top: 1px solid var(--line);
    background: #fff
}

.mobile-menu.open {
    display: flex
}

.mobile-menu a {
    padding: 13px 4px;
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line)
}

/* ---------- HERO BANNER ---------- */
.hero {
    position: relative;
    min-height: clamp(500px, calc(100vh - 190px), 640px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--night) var(--hero) no-repeat right center;
    background-size: cover;
    color: #fff
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(7, 46, 42, .97) 0%, rgba(7, 46, 42, .92) 26%, rgba(7, 46, 42, .62) 46%,
            rgba(7, 46, 42, .18) 64%, rgba(7, 46, 42, 0) 80%)
}

.hero .container {
    position: relative;
    z-index: 2;
    width: 100%
}

.hero-in {
    max-width: 560px;
    padding: 44px 0
}

.kicker {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--teal)
}

.kicker-rule {
    width: 66px;
    height: 4px;
    background: var(--teal);
    border-radius: 5px;
    margin: 12px 0 18px
}

.hero h1 {
    color: #fff;
    font-size: clamp(32px, 3.7vw, 50px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.14
}

.hero h1 .rd {
    color: var(--orange)
}

.hero .tagline {
    margin-top: 12px;
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 400;
    color: #CFE4DA;
    letter-spacing: .01em
}

.hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px
}

.hero-cta .btn svg.arw {
    width: 18px;
    height: 18px
}

.hero-cta .btn {
    padding: 13px 26px;
    font-size: 14px
}

.hero-badges {
    display: flex;
    gap: 9px;
    margin-top: 18px;
    flex-wrap: wrap
}

.hb {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 5px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #EAF6F1
}

.hb svg {
    width: 14px;
    height: 14px;
    color: var(--teal)
}

.hero-mark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    z-index: 2
}

.hero-mark .in {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #A8C5B8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    line-height: 1.9
}

.hero-mark .ln {
    height: 1px;
    flex: 0 0 120px;
    background: rgba(255, 255, 255, .28)
}

.image-green {
    filter: brightness(0) saturate(100%) invert(9%) sepia(93%) saturate(5380%) hue-rotate(161deg) brightness(102%) contrast(78%);
    -webkit-filter: brightness(0) saturate(100%) invert(9%) sepia(93%) saturate(5380%) hue-rotate(161deg) brightness(102%) contrast(78%);
}

/* stats strip */
.strip {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 0
}

.strip .row {
    --gx: 0px;
    --gy: 0px
}

.strip .s {
    padding: 30px 20px;
    text-align: center;
    border-right: 1px solid var(--line)
}

.strip .s:last-child {
    border-right: 0
}

.strip .n {
    font-size: 32px;
    font-weight: 700;
    color: var(--green);
    line-height: 1;
    letter-spacing: 0;
    font-family: var(--font-head);
    font-variant-numeric: lining-nums
}

.strip .l {
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
    font-weight: 500
}

/* ---------- QUICK BOOK BAR (below hero) ---------- */
.qbook {
    background: linear-gradient(115deg, #30CCBC 0%, #45D5C6 55%, #5DE0D3 100%);
    padding: 32px 0 34px;
    position: relative;
    overflow: hidden
}

.qbook::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    right: -160px;
    top: -220px;
    background: radial-gradient(circle, rgba(255, 255, 255, .30), transparent 70%)
}

.qbook .container {
    position: relative;
    z-index: 2
}

.qb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.qb-head h3 {
    color: var(--green-dk);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0
}

.qb-head p {
    color: #0E3D36;
    font-size: 14px;
    margin-top: 3px
}

.qb-head .qb-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .42);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 5px;
    padding: 9px 17px;
    color: #0E3D36;
    font-size: 12.5px;
    font-weight: 600
}

.qb-head .qb-note svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2
}

.qb-grid {
    --gx: 14px;
    --gy: 14px;
    align-items: flex-end
}

.qb-f label {
    display: block;
    color: #0E3D36;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px
}

.qb-f input,
.qb-f select {
    width: 100%;
    padding: 14px 15px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 5px;
    font-size: 14.5px;
    font-family: var(--font);
    color: var(--ink);
    background: rgba(255, 255, 255, .97);
    outline: none;
    transition: .2s
}

.qb-f input::placeholder {
    color: #75847E
}

.qb-f input:focus,
.qb-f select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(247, 148, 29, .28)
}

.qb-f.bad input,
.qb-f.bad select {
    border-color: #F7941D;
    box-shadow: 0 0 0 4px rgba(247, 148, 29, .38)
}

.qb-grid .btn {
    padding: 13px 22px;
    height: 49px
}

.qb-ok {
    display: none;
    align-items: center;
    gap: 11px;
    margin-top: 16px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 5px;
    padding: 13px 18px;
    color: var(--ink);
    font-size: 14px
}

.qb-ok.show {
    display: flex
}

.qb-ok svg {
    width: 19px;
    height: 19px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4
}

/* plain brand icons (no boxes) */
.ico75 {
    width: 75px;
    height: 75px;
    margin-bottom: 20px;
    color: var(--green)
}

.ico75 svg {
    width: 75px;
    height: 75px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block
}

/* ---------- WHY ---------- */
.why {
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.why-top {
    margin-bottom: 52px
}

.why-card {
    padding: 6px 26px 6px 0;
    border-left: 0
}

.why-card h3 {
    font-size: 18.5px;
    font-weight: 600;
    margin-bottom: 10px
}

.why-card p {
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.68
}

.why-card:hover .ico75 {
    color: var(--teal-dk);
    transform: translateY(-4px)
}

.why-card .ico75 {
    transition: .28s ease
}

/* ---------- SERVICES (tile grid) ---------- */
.svc-wrap {
    background: var(--soft)
}

.svc-grid {
    --gx: 0px;
    --gy: 0px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden
}

.svc {
    background: #fff;
    padding: 44px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    transition: .28s ease;
    position: relative;
    outline: 1px solid var(--line);
    outline-offset: 0
}

.ico75 img {
    display: block;
    width: 75px;
    height: 75px;
    object-fit: contain
}

.svc .ico75 {
    margin-bottom: 22px;
    transition: .28s ease
}

.svc h3 {
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.32;
    transition: .28s ease
}

.svc::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 26px;
    width: 0;
    height: 3px;
    background: var(--orange);
    border-radius: 5px;
    transition: width .28s ease
}

.svc:hover {
    background: linear-gradient(160deg, #30CCBC 0%, #4FD9CB 100%);
    z-index: 2
}

.svc:hover .ico75 {
    color: var(--ink);
    transform: translateY(-5px)
}

.svc:hover h3 {
    color: var(--green-dk)
}

.svc:hover::after {
    width: 44px
}

.svc-band {
    margin-top: 26px;
    background: linear-gradient(120deg, var(--teal-dk) 0%, var(--teal) 60%, #5DE0D3 100%);
    border-radius: 5px;
    padding: 32px 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    color: var(--ink);
    flex-wrap: wrap
}

.svc-band h3 {
    color: var(--white);
    font-size: 21px;
    font-weight: 600
}

.svc-band p {
    color: var(--white);
    font-size: 14.5px;
    margin-top: 6px
}

/* ---------- DOCTORS ---------- */
.docs {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.doc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    transition: .28s ease;
    display: flex;
    flex-direction: column
}

.doc:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent
}

.doc-photo {
    width: 100%;
    aspect-ratio: 4/4;
    background: #E3F0EC;
    overflow: hidden;
    position: relative
}

.doc-photo img,
.doc-photo svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.doc-in {
    padding: 22px 22px 0;
    display: flex;
    flex-direction: column;
    flex: 1
}

.doc .spec {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green)
}

.doc h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 6px
}

.doc .qual {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 7px;
    line-height: 1.5;
    font-weight: 500
}

.doc .meta {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
    font-weight: 600;
    width: 100%
}

.doc .meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap
}

.doc .meta svg {
    width: 14px;
    height: 14px;
    color: var(--green);
    fill: none;
    stroke: currentColor;
    stroke-width: 2
}

.doc .btn {
    margin: 18px -22px 0;
    width: calc(100% + 44px);
    border-radius: 0
}

/* doctor card: photo + name are links, placeholder icon, spacer (dynamic cards) */
a.doc-photo {
    display: block
}

.doc h3 a {
    color: inherit
}

.doc h3 a:hover {
    color: var(--green)
}

.doc-ph {
    box-sizing: border-box;
    padding: 20%;
    color: var(--green-mid);
    opacity: .5
}

.doc-fill {
    flex: 1
}

/* ---------- CONDITIONS ---------- */
.cond-grid {
    --gx: 20px;
    --gy: 20px
}

.cond {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 28px 24px;
    transition: .26s
}

.cond:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
    transform: translateY(-4px)
}

.cond .ci {
    width: 52px;
    height: 52px;
    color: var(--green);
    margin-bottom: 16px;
    transition: .26s
}

.cond .ci svg {
    width: 52px;
    height: 52px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block
}

/* condition card as a link (dynamic) */
a.cond {
    display: block;
    color: inherit
}

a.cond:hover h4 {
    color: var(--green)
}

.cond .ci img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 100%
}

.cond:hover .ci {
    color: var(--teal-dk);
    transform: translateY(-3px)
}

.cond h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 7px
}

.cond p {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.6
}

.cond-note {
    margin-top: 30px;
    background: var(--orange-lt);
    border: 1px solid #FBD9AC;
    border-radius: 5px;
    padding: 20px 24px;
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 14.5px;
    color: #6B3F00
}

.cond-note svg {
    width: 24px;
    height: 24px;
    flex: none;
    color: #B76600;
    fill: none;
    stroke: currentColor;
    stroke-width: 2
}

/* ---------- EMERGENCY ---------- */
.emg {
    background-color: #E4141F;
    background-image: linear-gradient(115deg, rgba(196, 6, 20, .92) 0%, rgba(228, 20, 31, .86) 34%,
            rgba(245, 42, 44, .74) 64%, rgba(255, 84, 64, .62) 100%),
        linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)),
        var(--hero);
    background-size: auto, auto, cover;
    background-position: center, center, center right;
    background-repeat: no-repeat, no-repeat, no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden
}

.emg .container {
    position: relative;
    z-index: 2
}

.emg-grid {
    --gx: 50px;
    --gy: 40px;
    align-items: center
}

.emg .tagx {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .32);
    padding: 8px 18px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 20px
}

.emg .tagx .blink {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    animation: blink 1.1s infinite
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .25
    }
}

.emg h2 {
    color: #fff;
    font-size: clamp(27px, 3.3vw, 42px);
    font-weight: 700;
    letter-spacing: 0
}

.emg p {
    color: #FFEFEC;
    font-size: 16.5px;
    margin-top: 18px;
    max-width: 560px;
    line-height: 1.7
}

.emg-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
    padding: 0
}

.emg-list li {
    list-style: none;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 5px;
    padding: 9px 17px;
    font-size: 13px;
    font-weight: 600
}

.emg-box {
    background: #fff;
    border-radius: 5px;
    padding: 34px 30px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28)
}

.emg-box .lb {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted)
}

.emg-box .num {
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 800;
    color: var(--red);
    margin: 10px 0 4px;
    letter-spacing: -.02em
}

.emg-box .sub {
    font-size: 13.5px;
    color: var(--muted)
}

.emg-box .btn {
    margin-top: 20px
}

.emg-box .hr {
    height: 1px;
    background: var(--line);
    margin: 22px 0
}

.emg-box .amb {
    font-size: 13px;
    color: var(--body)
}

.emg-box .amb b {
    color: var(--ink);
    display: block;
    font-size: 18.5px;
    margin-top: 4px
}

/* ---------- TECHNOLOGY ---------- */
.tech {
    background: #fff
}

.tech-item {
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    transition: .25s;
    background: #fff
}

.tech-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
    border-color: transparent
}

.tech-vis {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center
}

.tv1 {
    background: linear-gradient(140deg, #22A99B, #30CCBC)
}

.tv2 {
    background: linear-gradient(140deg, #30CCBC, #5DE0D3)
}

.tv3 {
    background: linear-gradient(140deg, #134D34, #1C6645)
}

.tv4 {
    background: linear-gradient(140deg, #E0810A, #F7941D)
}

.tech-vis img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tech-in {
    padding: 26px 24px 28px
}

.tech-in h3 {
    font-size: 17.5px;
    margin-bottom: 16px
}

.tech-in ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px
}

.tech-in li {
    font-size: 13.5px;
    color: var(--body);
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.tech-in li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    margin-top: 9px;
    flex: none
}

/* technology card as a link (home carousel + archive) */
/* whole card is a link, equal heights */
.tech-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit
}

.tech-link .tech-in {
    display: flex;
    flex-direction: column;
    flex: 1
}

.tech-link:hover h3 {
    color: var(--green)
}

/* placeholder icon when no featured image */
.tech-ph {
    width: 64px;
    height: 64px;
    color: rgba(255, 255, 255, .9)
}

/* summary line (when the content has no bullet list) */
.tech-in p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--body)
}

.tech-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--green)
}

.tech-more svg {
    width: 16px;
    height: 16px;
    transition: transform .2s
}

.tech-link:hover .tech-more svg {
    transform: translateX(4px)
}

/* "View All ..." - plain text link under the section carousels / grids */
.view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--green)
}

.view-all svg {
    width: 17px;
    height: 17px;
    transition: transform .2s
}

.view-all:hover {
    color: var(--green-dk);
    text-decoration: underline;
    text-underline-offset: 4px
}

.view-all:hover svg {
    transform: translateX(4px)
}

/* ---------- PATIENT JOURNEY (arrow ribbon) ---------- */
.jour {
    background: var(--soft)
}

.flow {
    --gx: 8px;
    --gy: 14px;
    margin-top: 54px
}

.flow-step {
    position: relative;
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 34px 26px 30px 58px;
    transition: .28s ease;
    clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%, 34px 50%)
}

.flow-step:first-child {
    padding-left: 30px;
    clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%)
}

.flow-step:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34px 50%)
}

.flow-step:hover {
    transform: translateY(-5px)
}

.f1 {
    background: linear-gradient(140deg, #30CCBC, #4FD9CB)
}

.f2 {
    background: linear-gradient(140deg, #5DE0D3, #86E9DF)
}

.f3 {
    background: linear-gradient(140deg, #134D34, #1C6645)
}

.f4 {
    background: linear-gradient(140deg, #F7941D, #FAA94A)
}

.flow-wm {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 84px;
    font-weight: 800;
    line-height: 1;
    opacity: .11;
    letter-spacing: -.04em;
    pointer-events: none
}

.flow-n {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .82;
    position: relative;
    z-index: 2
}

.flow-step h3 {
    color: #fff;
    font-size: 19.5px;
    font-weight: 600;
    margin: 9px 0 10px;
    position: relative;
    z-index: 2
}

.flow-step p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .87);
    line-height: 1.6;
    flex: 1;
    position: relative;
    z-index: 2
}

.flow-time {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .28);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 2
}

/* ---------- TESTIMONIALS ---------- */
.tst {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.t-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 38px 36px;
    display: flex;
    flex-direction: column;
    transition: .26s
}

.t-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    background: #fff;
    border-color: transparent
}

.t-card .qm {
    font-size: 62px;
    line-height: .7;
    color: var(--teal);
    opacity: .4;
    font-weight: 800
}

.stars {
    display: flex;
    gap: 4px;
    margin: 16px 0 16px
}

.stars svg {
    width: 18px;
    height: 18px;
    color: var(--orange);
    fill: var(--orange)
}

.t-card p {
    font-size: 15.5px;
    color: var(--body);
    line-height: 1.75;
    flex: 1
}

.t-who {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line)
}

.av {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14.5px;
    flex: none
}

.av.a2 {
    background: var(--teal)
}

.t-who .nm {
    font-weight: 700;
    color: var(--ink);
    font-size: 15px
}

.t-who .mt {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 1px
}

/* ---------- LOCATION ---------- */
.loc-grid {
    --gx: 36px;
    --gy: 40px
}

.loc-info {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 34px 30px
}

.loc-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line)
}

.loc-row:last-of-type {
    border-bottom: 0
}

.loc-row .li {
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--green)
}

.loc-row .li svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.loc-row h4 {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 7px
}

.loc-row p,
.loc-row a {
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.6
}

.loc-row a.tel {
    font-weight: 800;
    font-size: 20px;
    color: var(--green)
}

.loc-row a.tel:hover {
    color: var(--orange)
}

.hours {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
    gap: 12px
}

.hours span:first-child {
    color: var(--muted)
}

.hours span:last-child {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap
}

.hours.h247 span:last-child {
    color: var(--green);
    font-weight: 700
}

.map {
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--line);
    min-height: 460px;
    position: relative;
    background: #E3F0EC
}

.map iframe {
    width: 100%;
    height: 100%;
    min-height: 460px;
    border: 0;
    display: block
}

.map-cta {
    position: absolute;
    left: 18px;
    bottom: 18px;
    background: #fff;
    border-radius: 5px;
    padding: 14px 18px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100% - 36px)
}

.map-cta .mt {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink)
}

.map-cta .ms {
    font-size: 12px;
    color: var(--muted)
}

/* ---------- BLOG ---------- */
.blog-wrap {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.blog-grid {
    --gx: 28px;
    --gy: 28px
}

.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    transition: .28s ease
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent
}

.blog-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #E3F0EC
}

.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease
}

.blog-card:hover .blog-img img {
    transform: scale(1.05)
}

.blog-in {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 26px
}

.blog-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal-dk)
}

.blog-card h3 {
    margin-top: 10px;
    font-size: 19px;
    line-height: 1.35
}

.blog-card p {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--muted)
}

.blog-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--green);
    transition: .22s ease
}

.blog-more svg {
    width: 16px;
    height: 16px;
    transition: transform .22s ease
}

.blog-card:hover .blog-more {
    color: var(--orange-dk)
}

.blog-card:hover .blog-more svg {
    transform: translateX(4px)
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px
}

.blog-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted)
}

.blog-tag+.blog-date::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 12px;
    border-radius: 50%;
    background: #B7D9D3;
    vertical-align: middle
}

.blog-meta+h3 {
    margin-top: 10px
}

/* no featured image: branded placeholder */
.blog-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #22A99B, #30CCBC);
    color: rgba(255, 255, 255, .88)
}

.blog-ph svg {
    width: 72px;
    height: 72px
}

/* blog card inside a Splide slide */
.slider .splide__slide>.blog-card {
    width: 100%;
    flex: 1 1 auto
}

/* blog / technology / doctor carousels: no dots when every card already fits */
#blog_slider:not(.is-overflow) .splide__pagination,
#tech_slider:not(.is-overflow) .splide__pagination,
#doctor_slider:not(.is-overflow) .splide__pagination,
#package_slider:not(.is-overflow) .splide__pagination {
    display: none
}

/* ---------- HEALTH CHECK PACKAGES ---------- */
.pkg-wrap {
    background: var(--soft);
    border-top: 1px solid var(--line)
}

.pkg-grid {
    --gx: 28px;
    --gy: 28px
}

.pkg-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    color: inherit;
    transition: .28s ease
}

.pkg-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent
}

.pkg-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #E3F0EC
}

.pkg-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease
}

.pkg-card:hover .pkg-img img {
    transform: scale(1.05)
}

.pkg-in {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 26px
}

.pkg-card h3 {
    font-size: 19px;
    line-height: 1.35;
    transition: .2s
}

.pkg-card:hover h3 {
    color: var(--green)
}

.pkg-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px
}

.pkg-price small {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.pkg-price b {
    display: block;
    margin-top: 2px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--green)
}

.pkg-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--green)
}

.pkg-more svg {
    width: 16px;
    height: 16px;
    transition: transform .2s
}

.pkg-card:hover .pkg-more svg {
    transform: translateX(4px)
}

/* package card inside a Splide slide */
.slider .splide__slide>.pkg-card {
    width: 100%;
    flex: 1 1 auto
}

/* ---------- APPOINTMENT ---------- */
.appt {
    background: var(--soft);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.appt::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    left: -220px;
    top: -200px;
    background: radial-gradient(circle, rgba(48, 204, 188, .16), transparent 70%)
}

.appt::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    right: -180px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(247, 148, 29, .12), transparent 70%)
}

.appt .container {
    position: relative;
    z-index: 2
}

.appt-grid {
    --gx: 52px;
    --gy: 40px;
    align-items: center
}

.appt h2 {
    color: var(--green)
}

.appt p.lede {
    color: var(--muted);
    font-size: 16px;
    margin-top: 16px;
    line-height: 1.7
}

.appt-usp {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.appt-usp li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    font-size: 14.5px;
    color: var(--body)
}

.appt-usp .tick {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--teal-lt);
    border: 1px solid #B7EDE7;
    display: flex;
    align-items: center;
    justify-content: center
}

.appt-usp .tick svg {
    width: 14px;
    height: 14px;
    color: var(--green);
    fill: none;
    stroke: currentColor;
    stroke-width: 3
}

.form-card {
    background: linear-gradient(155deg, #30CCBC 0%, #45D5C6 55%, #5DE0D3 100%);
    border-radius: 5px;
    padding: 34px;
    box-shadow: 0 26px 64px rgba(20, 120, 108, .30);
    color: var(--ink)
}

.form-card h3 {
    color: var(--green-dk);
    font-size: 23px;
    margin-bottom: 6px
}

.form-card .fs {
    font-size: 14px;
    color: #0E3D36;
    margin-bottom: 24px
}

.frow {
    --gx: 16px;
    --gy: 16px
}

.field {
    margin-bottom: 16px
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid rgba(255, 255, 255, .32);
    border-radius: 5px;
    font-size: 14.5px;
    font-family: var(--font);
    color: var(--ink);
    background: rgba(255, 255, 255, .97);
    transition: .2s;
    outline: none
}

.field input::placeholder,
.field textarea::placeholder {
    color: #75847E
}

.field select:invalid {
    color: #75847E
}

.field textarea {
    resize: vertical;
    min-height: 96px
}

.datewrap {
    position: relative
}

.datewrap .dph {
    position: absolute;
    left: 16px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    color: #75847E;
    font-size: 14.5px;
    pointer-events: none
}

.datewrap:focus-within .dph,
.datewrap.filled .dph {
    display: none
}

.datewrap:not(:focus-within):not(.filled) input {
    color: transparent
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(247, 148, 29, .28)
}

.field .err {
    display: none;
    font-size: 12px;
    color: #6B2A00;
    margin-top: 7px;
    font-weight: 600
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
    border-color: #F7941D;
    box-shadow: 0 0 0 4px rgba(247, 148, 29, .38)
}

.field.invalid .err {
    display: block
}

.consent {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 12.5px;
    color: #0E3D36;
    margin: 6px 0 18px;
    line-height: 1.55
}

.consent input {
    width: 17px;
    height: 17px;
    margin-top: 3px;
    accent-color: var(--orange);
    flex: none
}

.form-note {
    font-size: 12px;
    color: #0E3D36;
    text-align: center;
    margin-top: 14px
}

.ok {
    display: none;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .8);
    color: var(--ink);
    border-radius: 5px;
    padding: 16px 18px;
    font-size: 14px;
    margin-bottom: 18px;
    gap: 12px;
    align-items: flex-start
}

.ok.show {
    display: flex
}

.ok svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--green);
    margin-top: 3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4
}

/* ---------- FOOTER (deep green → teal-green gradient) ---------- */
footer {
    background: linear-gradient(125deg, #134D34 0%, #2ea992 50%, #3ad0c0 100%);
    color: #E6F6EE;
    font-size: 14.5px;
    position: relative;
    overflow: hidden
}

footer::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    right: -200px;
    top: -260px;
    background: radial-gradient(circle, rgba(48, 204, 188, .28), transparent 70%)
}

footer .container {
    position: relative;
    z-index: 2
}

.f-top {
    --gx: 40px;
    --gy: 34px;
    padding: 66px 0 48px
}

.f-logo {
    background: #fff;
    border-radius: 5px;
    padding: 14px 18px;
    display: inline-block;
    margin-bottom: 20px
}

.f-logo img {
    height: 44px;
    width: auto;
    max-width: none
}

footer h4 {
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

footer a:hover {
    color: var(--orange)
}

.f-em {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 5px;
    padding: 20px
}

.f-em .lb {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #FFDDB0
}

.f-em a {
    display: block;
    font-size: 27px;
    font-weight: 800;
    color: #fff;
    margin-top: 8px
}

.f-em a:hover {
    color: var(--orange)
}

.f-em p {
    font-size: 12.5px;
    margin-top: 8px;
    color: #DDF0E7
}

.f-soc {
    display: flex;
    gap: 10px;
    margin-top: 22px
}

.f-soc a {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s
}

.f-soc a:hover {
    background: #fff;
    transform: translateY(-2px)
}

.f-soc a:hover svg {
    color: var(--green)
}

.f-soc svg {
    width: 17px;
    height: 17px;
    color: #fff
}

.f-bot {
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13px
}

.f-bot .lks {
    display: flex;
    gap: 24px;
    flex-wrap: wrap
}

.disclaimer {
    font-size: 12px;
    color: #D3EBDF;
    padding-bottom: 26px;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 22px
}

/* sticky mobile bar */
.mbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 10px 14px;
    gap: 10px;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .1)
}

.mbar .btn {
    flex: 1;
    padding: 12px 10px;
    font-size: 13.5px
}

/* reveal */
.rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease
}

.rv.in {
    opacity: 1;
    transform: none
}

/* ---------- brand overrides: type + contrast ---------- */
/* Playfair is for headlines/figures/pull-quotes; labels stay Montserrat */
.loc-row h4,
footer h4 {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: .16em
}

.flow-wm,
.t-card .qm {
    font-family: var(--font-head);
    font-variant-numeric: lining-nums
}

.flow-wm {
    font-size: 68px
}

/* dark type on the light brand fills (teal / orange fail contrast with white) */
.f1,
.f2,
.f4 {
    color: var(--ink)
}

.f1 h3,
.f2 h3,
.f4 h3 {
    color: var(--green-dk)
}

.f1 p,
.f2 p,
.f4 p {
    color: rgba(15, 31, 25, .88)
}

.f1 .flow-time,
.f2 .flow-time,
.f4 .flow-time {
    color: var(--ink);
    border-top-color: rgba(15, 31, 25, .28)
}

/* avatars: teal + deep green */
.av {
    background: var(--teal);
    color: var(--ink)
}

.av.a2 {
    background: var(--green);
    color: #fff
}

/* header: logo keeps its proportions (48px high, width follows the artwork) */
.logo {
    flex: none
}

header .container {
    max-width: 1300px
}

@media(max-width:1260px) {

    /* not enough room for the label: keep the phone button as an icon */
    .nav-cta .btn-outline {
        font-size: 0;
        gap: 0;
        padding: 13px 14px
    }

    .nav-cta .btn-outline svg {
        width: 18px;
        height: 18px
    }
}

@media(max-width:1170px) {
    .menu {
        display: none
    }

    .burger {
        display: flex
    }
}

/* ---------- sliders (Splide) ---------- */
.slider {
    position: relative
}

.slider .splide__track {
    /* room for the card hover-lift + the dots */
    padding: 14px 2px 58px;
    margin: -14px -2px -8px
}

.slider .splide__slide {
    display: flex;
    height: auto
}

.slider .splide__slide>.doc,
.slider .splide__slide>.tech-item,
.slider .splide__slide>.t-card {
    width: 100%;
    flex: 1 1 auto
}

.slider .splide__arrow {
    width: 46px;
    height: 46px;
    background: var(--teal);
    opacity: 1;
    top: calc(50% - 22px);
    box-shadow: 0 8px 20px rgba(48, 204, 188, .4);
    transition: .2s
}

.slider .splide__arrow svg {
    width: 17px;
    height: 17px;
    fill: var(--ink);
    transition: .2s
}

.slider .splide__arrow:hover:not(:disabled) {
    background: var(--green)
}

.slider .splide__arrow:hover:not(:disabled) svg {
    fill: #fff
}

.slider .splide__arrow--prev {
    left: -23px
}

.slider .splide__arrow--next {
    right: -23px
}

.slider .splide__pagination {
    bottom: 14px
}

.slider .splide__pagination__page {
    width: 10px;
    height: 10px;
    margin: 4px;
    background: #BFEAE5;
    opacity: 1
}

.slider .splide__pagination__page.is-active {
    background: var(--green);
    transform: scale(1.3)
}

.slider.all-visible .splide__arrows,
.slider.all-visible .splide__pagination {
    display: none
}

.slider.all-visible .splide__track {
    padding-bottom: 14px
}

.slider .splide__arrow:focus-visible,
.slider .splide__pagination__page:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px
}

@media(max-width:1024px) {
    .hero {
        background-position: 72% center;
        min-height: 520px
    }

    .hero::before {
        background: linear-gradient(90deg, rgba(7, 46, 42, .97) 0%, rgba(7, 46, 42, .9) 40%, rgba(7, 46, 42, .6) 66%, rgba(7, 46, 42, .25) 100%)
    }

    .menu {
        display: none
    }
}

/* 2-column card layouts (below the lg breakpoint) */
@media(max-width:991.98px) {

    .flow-step,
    .flow-step:first-child,
    .flow-step:last-child {
        clip-path: none;
        border-radius: 5px;
        padding: 30px 28px
    }

    .strip .s:nth-child(2n) {
        border-right: 0
    }

    .strip .s:nth-child(-n+2) {
        border-bottom: 1px solid var(--line)
    }
}

@media(max-width:760px) {
    section {
        padding: 64px 0
    }

    .qb-head h3 {
        font-size: 19.5px
    }

    .burger {
        display: flex
    }

    .nav-cta .btn {
        display: none
    }

    .topbar .tb-left span.hide-m {
        display: none
    }

    /* mobile: hide the address / OPD hours, show only the emergency number at full width */
    .topbar .tb-left {
        display: none
    }

    .topbar .tb-right {
        width: 100%;
        justify-content: center
    }

    .hero {
        min-height: auto;
        background-position: 76% center
    }

    .hero-in {
        padding: 64px 0 96px;
        max-width: 100%
    }

    .hero-mark {
        display: none
    }

    .hero-cta .btn {
        flex: 1
    }

    .svc-band {
        text-align: center;
        justify-content: center
    }

    .f-top {
        padding: 48px 0 36px
    }

    .f-bot {
        flex-direction: column;
        gap: 12px
    }

    .mbar {
        display: flex
    }

    body {
        padding-bottom: 70px
    }

    .form-card {
        padding: 26px 22px
    }

    .t-card {
        padding: 30px 26px
    }
}



/* =====================================================================
           GRID SYSTEM (Bootstrap 5 style)
           <div class="container"> | <div class="container-fluid">
             <div class="row">
               <div class="col-12 col-md-6 col-lg-3">, .col, .col-auto, .col-{sm|md|lg|xl}-{1..12|auto}
           Mobile-first: .col-N applies at every width, .col-md-N from 768px up, etc.
           Gutter is set per row with --gx (column gap) and --gy (row gap); default 26px.
           ===================================================================== */
.container,
.container-fluid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px
}

.container {
    max-width: var(--max)
}

@media(max-width:760px) {

    .container,
    .container-fluid {
        padding-left: 18px;
        padding-right: 18px
    }
}

:where(.row) {
    --gx: 26px;
    --gy: 26px
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gy) var(--gx)
}

.row>* {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0
}

.col {
    flex: 1 0 0%;
    width: auto
}

.col-auto {
    flex: 0 0 auto;
    width: auto
}

.col-1 {
    width: calc((100% + var(--gx)) * 1 / 12 - var(--gx))
}

.col-2 {
    width: calc((100% + var(--gx)) * 2 / 12 - var(--gx))
}

.col-3 {
    width: calc((100% + var(--gx)) * 3 / 12 - var(--gx))
}

.col-4 {
    width: calc((100% + var(--gx)) * 4 / 12 - var(--gx))
}

.col-5 {
    width: calc((100% + var(--gx)) * 5 / 12 - var(--gx))
}

.col-6 {
    width: calc((100% + var(--gx)) * 6 / 12 - var(--gx))
}

.col-7 {
    width: calc((100% + var(--gx)) * 7 / 12 - var(--gx))
}

.col-8 {
    width: calc((100% + var(--gx)) * 8 / 12 - var(--gx))
}

.col-9 {
    width: calc((100% + var(--gx)) * 9 / 12 - var(--gx))
}

.col-10 {
    width: calc((100% + var(--gx)) * 10 / 12 - var(--gx))
}

.col-11 {
    width: calc((100% + var(--gx)) * 11 / 12 - var(--gx))
}

.col-12 {
    width: 100%
}

@media(min-width:576px) {
    .col-sm {
        flex: 1 0 0%;
        width: auto
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-sm-1 {
        width: calc((100% + var(--gx)) * 1 / 12 - var(--gx))
    }

    .col-sm-2 {
        width: calc((100% + var(--gx)) * 2 / 12 - var(--gx))
    }

    .col-sm-3 {
        width: calc((100% + var(--gx)) * 3 / 12 - var(--gx))
    }

    .col-sm-4 {
        width: calc((100% + var(--gx)) * 4 / 12 - var(--gx))
    }

    .col-sm-5 {
        width: calc((100% + var(--gx)) * 5 / 12 - var(--gx))
    }

    .col-sm-6 {
        width: calc((100% + var(--gx)) * 6 / 12 - var(--gx))
    }

    .col-sm-7 {
        width: calc((100% + var(--gx)) * 7 / 12 - var(--gx))
    }

    .col-sm-8 {
        width: calc((100% + var(--gx)) * 8 / 12 - var(--gx))
    }

    .col-sm-9 {
        width: calc((100% + var(--gx)) * 9 / 12 - var(--gx))
    }

    .col-sm-10 {
        width: calc((100% + var(--gx)) * 10 / 12 - var(--gx))
    }

    .col-sm-11 {
        width: calc((100% + var(--gx)) * 11 / 12 - var(--gx))
    }

    .col-sm-12 {
        width: 100%
    }
}

@media(min-width:768px) {
    .col-md {
        flex: 1 0 0%;
        width: auto
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-md-1 {
        width: calc((100% + var(--gx)) * 1 / 12 - var(--gx))
    }

    .col-md-2 {
        width: calc((100% + var(--gx)) * 2 / 12 - var(--gx))
    }

    .col-md-3 {
        width: calc((100% + var(--gx)) * 3 / 12 - var(--gx))
    }

    .col-md-4 {
        width: calc((100% + var(--gx)) * 4 / 12 - var(--gx))
    }

    .col-md-5 {
        width: calc((100% + var(--gx)) * 5 / 12 - var(--gx))
    }

    .col-md-6 {
        width: calc((100% + var(--gx)) * 6 / 12 - var(--gx))
    }

    .col-md-7 {
        width: calc((100% + var(--gx)) * 7 / 12 - var(--gx))
    }

    .col-md-8 {
        width: calc((100% + var(--gx)) * 8 / 12 - var(--gx))
    }

    .col-md-9 {
        width: calc((100% + var(--gx)) * 9 / 12 - var(--gx))
    }

    .col-md-10 {
        width: calc((100% + var(--gx)) * 10 / 12 - var(--gx))
    }

    .col-md-11 {
        width: calc((100% + var(--gx)) * 11 / 12 - var(--gx))
    }

    .col-md-12 {
        width: 100%
    }
}

@media(min-width:992px) {
    .col-lg {
        flex: 1 0 0%;
        width: auto
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-lg-1 {
        width: calc((100% + var(--gx)) * 1 / 12 - var(--gx))
    }

    .col-lg-2 {
        width: calc((100% + var(--gx)) * 2 / 12 - var(--gx))
    }

    .col-lg-3 {
        width: calc((100% + var(--gx)) * 3 / 12 - var(--gx))
    }

    .col-lg-4 {
        width: calc((100% + var(--gx)) * 4 / 12 - var(--gx))
    }

    .col-lg-5 {
        width: calc((100% + var(--gx)) * 5 / 12 - var(--gx))
    }

    .col-lg-6 {
        width: calc((100% + var(--gx)) * 6 / 12 - var(--gx))
    }

    .col-lg-7 {
        width: calc((100% + var(--gx)) * 7 / 12 - var(--gx))
    }

    .col-lg-8 {
        width: calc((100% + var(--gx)) * 8 / 12 - var(--gx))
    }

    .col-lg-9 {
        width: calc((100% + var(--gx)) * 9 / 12 - var(--gx))
    }

    .col-lg-10 {
        width: calc((100% + var(--gx)) * 10 / 12 - var(--gx))
    }

    .col-lg-11 {
        width: calc((100% + var(--gx)) * 11 / 12 - var(--gx))
    }

    .col-lg-12 {
        width: 100%
    }
}

@media(min-width:1200px) {
    .col-xl {
        flex: 1 0 0%;
        width: auto
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-xl-1 {
        width: calc((100% + var(--gx)) * 1 / 12 - var(--gx))
    }

    .col-xl-2 {
        width: calc((100% + var(--gx)) * 2 / 12 - var(--gx))
    }

    .col-xl-3 {
        width: calc((100% + var(--gx)) * 3 / 12 - var(--gx))
    }

    .col-xl-4 {
        width: calc((100% + var(--gx)) * 4 / 12 - var(--gx))
    }

    .col-xl-5 {
        width: calc((100% + var(--gx)) * 5 / 12 - var(--gx))
    }

    .col-xl-6 {
        width: calc((100% + var(--gx)) * 6 / 12 - var(--gx))
    }

    .col-xl-7 {
        width: calc((100% + var(--gx)) * 7 / 12 - var(--gx))
    }

    .col-xl-8 {
        width: calc((100% + var(--gx)) * 8 / 12 - var(--gx))
    }

    .col-xl-9 {
        width: calc((100% + var(--gx)) * 9 / 12 - var(--gx))
    }

    .col-xl-10 {
        width: calc((100% + var(--gx)) * 10 / 12 - var(--gx))
    }

    .col-xl-11 {
        width: calc((100% + var(--gx)) * 11 / 12 - var(--gx))
    }

    .col-xl-12 {
        width: 100%
    }
}



.text-white {
    color: #fff !important
}

.text-dark {
    color: var(--ink) !important
}

.text-black {
    color: #000 !important
}

.text-body {
    color: var(--body) !important
}

.text-muted {
    color: var(--muted) !important
}

.text-green {
    color: var(--green) !important
}

.text-green-dark {
    color: var(--green-dk) !important
}

.text-green-mid {
    color: var(--green-mid) !important
}

.text-teal {
    color: var(--teal) !important
}

.text-teal-dark {
    color: var(--teal-dk) !important
}

.text-teal-light {
    color: var(--teal-lt) !important
}

.text-orange {
    color: var(--orange) !important
}

.text-red {
    color: var(--red) !important
}

.text-night {
    color: var(--night) !important
}

.text-primary {
    color: var(--green) !important
}

.text-secondary {
    color: var(--orange) !important
}

.text-inherit {
    color: inherit !important
}

.text-start {
    text-align: left !important
}

.text-center {
    text-align: center !important
}

.text-end {
    text-align: right !important
}

/* margin & padding */
.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
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.mt-4 {
    margin-top: 1.5rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.mt-auto {
    margin-top: auto !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.mb-auto {
    margin-bottom: auto !important
}

.ms-0 {
    margin-left: 0 !important
}

.ms-1 {
    margin-left: .25rem !important
}

.ms-2 {
    margin-left: .5rem !important
}

.ms-3 {
    margin-left: 1rem !important
}

.ms-4 {
    margin-left: 1.5rem !important
}

.ms-5 {
    margin-left: 3rem !important
}

.ms-auto {
    margin-left: auto !important
}

.me-0 {
    margin-right: 0 !important
}

.me-1 {
    margin-right: .25rem !important
}

.me-2 {
    margin-right: .5rem !important
}

.me-3 {
    margin-right: 1rem !important
}

.me-4 {
    margin-right: 1.5rem !important
}

.me-5 {
    margin-right: 3rem !important
}

.me-auto {
    margin-right: auto !important
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.mx-1 {
    margin-left: .25rem !important;
    margin-right: .25rem !important
}

.mx-2 {
    margin-left: .5rem !important;
    margin-right: .5rem !important
}

.mx-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important
}

.mx-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important
}

.mx-5 {
    margin-left: 3rem !important;
    margin-right: 3rem !important
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important
}

.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important
}

.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
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .25rem !important
}

.pb-2 {
    padding-bottom: .5rem !important
}

.pb-3 {
    padding-bottom: 1rem !important
}

.pb-4 {
    padding-bottom: 1.5rem !important
}

.pb-5 {
    padding-bottom: 3rem !important
}

.ps-0 {
    padding-left: 0 !important
}

.ps-1 {
    padding-left: .25rem !important
}

.ps-2 {
    padding-left: .5rem !important
}

.ps-3 {
    padding-left: 1rem !important
}

.ps-4 {
    padding-left: 1.5rem !important
}

.ps-5 {
    padding-left: 3rem !important
}

.pe-0 {
    padding-right: 0 !important
}

.pe-1 {
    padding-right: .25rem !important
}

.pe-2 {
    padding-right: .5rem !important
}

.pe-3 {
    padding-right: 1rem !important
}

.pe-4 {
    padding-right: 1.5rem !important
}

.pe-5 {
    padding-right: 3rem !important
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.px-1 {
    padding-left: .25rem !important;
    padding-right: .25rem !important
}

.px-2 {
    padding-left: .5rem !important;
    padding-right: .5rem !important
}

.px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important
}

.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important
}

.px-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important
}

@media (min-width: 576px) {
    .m-sm-0 {
        margin: 0 !important
    }

    .m-sm-1 {
        margin: .25rem !important
    }

    .m-sm-2 {
        margin: .5rem !important
    }

    .m-sm-3 {
        margin: 1rem !important
    }

    .m-sm-4 {
        margin: 1.5rem !important
    }

    .m-sm-5 {
        margin: 3rem !important
    }

    .m-sm-auto {
        margin: auto !important
    }

    .mt-sm-0 {
        margin-top: 0 !important
    }

    .mt-sm-1 {
        margin-top: .25rem !important
    }

    .mt-sm-2 {
        margin-top: .5rem !important
    }

    .mt-sm-3 {
        margin-top: 1rem !important
    }

    .mt-sm-4 {
        margin-top: 1.5rem !important
    }

    .mt-sm-5 {
        margin-top: 3rem !important
    }

    .mt-sm-auto {
        margin-top: auto !important
    }

    .mb-sm-0 {
        margin-bottom: 0 !important
    }

    .mb-sm-1 {
        margin-bottom: .25rem !important
    }

    .mb-sm-2 {
        margin-bottom: .5rem !important
    }

    .mb-sm-3 {
        margin-bottom: 1rem !important
    }

    .mb-sm-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-sm-5 {
        margin-bottom: 3rem !important
    }

    .mb-sm-auto {
        margin-bottom: auto !important
    }

    .ms-sm-0 {
        margin-left: 0 !important
    }

    .ms-sm-1 {
        margin-left: .25rem !important
    }

    .ms-sm-2 {
        margin-left: .5rem !important
    }

    .ms-sm-3 {
        margin-left: 1rem !important
    }

    .ms-sm-4 {
        margin-left: 1.5rem !important
    }

    .ms-sm-5 {
        margin-left: 3rem !important
    }

    .ms-sm-auto {
        margin-left: auto !important
    }

    .me-sm-0 {
        margin-right: 0 !important
    }

    .me-sm-1 {
        margin-right: .25rem !important
    }

    .me-sm-2 {
        margin-right: .5rem !important
    }

    .me-sm-3 {
        margin-right: 1rem !important
    }

    .me-sm-4 {
        margin-right: 1.5rem !important
    }

    .me-sm-5 {
        margin-right: 3rem !important
    }

    .me-sm-auto {
        margin-right: auto !important
    }

    .mx-sm-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mx-sm-1 {
        margin-left: .25rem !important;
        margin-right: .25rem !important
    }

    .mx-sm-2 {
        margin-left: .5rem !important;
        margin-right: .5rem !important
    }

    .mx-sm-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important
    }

    .mx-sm-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important
    }

    .mx-sm-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important
    }

    .mx-sm-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-sm-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-sm-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-sm-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-sm-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-sm-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-sm-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .p-sm-0 {
        padding: 0 !important
    }

    .p-sm-1 {
        padding: .25rem !important
    }

    .p-sm-2 {
        padding: .5rem !important
    }

    .p-sm-3 {
        padding: 1rem !important
    }

    .p-sm-4 {
        padding: 1.5rem !important
    }

    .p-sm-5 {
        padding: 3rem !important
    }

    .pt-sm-0 {
        padding-top: 0 !important
    }

    .pt-sm-1 {
        padding-top: .25rem !important
    }

    .pt-sm-2 {
        padding-top: .5rem !important
    }

    .pt-sm-3 {
        padding-top: 1rem !important
    }

    .pt-sm-4 {
        padding-top: 1.5rem !important
    }

    .pt-sm-5 {
        padding-top: 3rem !important
    }

    .pb-sm-0 {
        padding-bottom: 0 !important
    }

    .pb-sm-1 {
        padding-bottom: .25rem !important
    }

    .pb-sm-2 {
        padding-bottom: .5rem !important
    }

    .pb-sm-3 {
        padding-bottom: 1rem !important
    }

    .pb-sm-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-sm-5 {
        padding-bottom: 3rem !important
    }

    .ps-sm-0 {
        padding-left: 0 !important
    }

    .ps-sm-1 {
        padding-left: .25rem !important
    }

    .ps-sm-2 {
        padding-left: .5rem !important
    }

    .ps-sm-3 {
        padding-left: 1rem !important
    }

    .ps-sm-4 {
        padding-left: 1.5rem !important
    }

    .ps-sm-5 {
        padding-left: 3rem !important
    }

    .pe-sm-0 {
        padding-right: 0 !important
    }

    .pe-sm-1 {
        padding-right: .25rem !important
    }

    .pe-sm-2 {
        padding-right: .5rem !important
    }

    .pe-sm-3 {
        padding-right: 1rem !important
    }

    .pe-sm-4 {
        padding-right: 1.5rem !important
    }

    .pe-sm-5 {
        padding-right: 3rem !important
    }

    .px-sm-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .px-sm-1 {
        padding-left: .25rem !important;
        padding-right: .25rem !important
    }

    .px-sm-2 {
        padding-left: .5rem !important;
        padding-right: .5rem !important
    }

    .px-sm-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }

    .px-sm-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important
    }

    .px-sm-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important
    }

    .py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-sm-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-sm-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-sm-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-sm-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-sm-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }
}

@media (min-width: 768px) {
    .m-md-0 {
        margin: 0 !important
    }

    .m-md-1 {
        margin: .25rem !important
    }

    .m-md-2 {
        margin: .5rem !important
    }

    .m-md-3 {
        margin: 1rem !important
    }

    .m-md-4 {
        margin: 1.5rem !important
    }

    .m-md-5 {
        margin: 3rem !important
    }

    .m-md-auto {
        margin: auto !important
    }

    .mt-md-0 {
        margin-top: 0 !important
    }

    .mt-md-1 {
        margin-top: .25rem !important
    }

    .mt-md-2 {
        margin-top: .5rem !important
    }

    .mt-md-3 {
        margin-top: 1rem !important
    }

    .mt-md-4 {
        margin-top: 1.5rem !important
    }

    .mt-md-5 {
        margin-top: 3rem !important
    }

    .mt-md-auto {
        margin-top: auto !important
    }

    .mb-md-0 {
        margin-bottom: 0 !important
    }

    .mb-md-1 {
        margin-bottom: .25rem !important
    }

    .mb-md-2 {
        margin-bottom: .5rem !important
    }

    .mb-md-3 {
        margin-bottom: 1rem !important
    }

    .mb-md-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-md-5 {
        margin-bottom: 3rem !important
    }

    .mb-md-auto {
        margin-bottom: auto !important
    }

    .ms-md-0 {
        margin-left: 0 !important
    }

    .ms-md-1 {
        margin-left: .25rem !important
    }

    .ms-md-2 {
        margin-left: .5rem !important
    }

    .ms-md-3 {
        margin-left: 1rem !important
    }

    .ms-md-4 {
        margin-left: 1.5rem !important
    }

    .ms-md-5 {
        margin-left: 3rem !important
    }

    .ms-md-auto {
        margin-left: auto !important
    }

    .me-md-0 {
        margin-right: 0 !important
    }

    .me-md-1 {
        margin-right: .25rem !important
    }

    .me-md-2 {
        margin-right: .5rem !important
    }

    .me-md-3 {
        margin-right: 1rem !important
    }

    .me-md-4 {
        margin-right: 1.5rem !important
    }

    .me-md-5 {
        margin-right: 3rem !important
    }

    .me-md-auto {
        margin-right: auto !important
    }

    .mx-md-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mx-md-1 {
        margin-left: .25rem !important;
        margin-right: .25rem !important
    }

    .mx-md-2 {
        margin-left: .5rem !important;
        margin-right: .5rem !important
    }

    .mx-md-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important
    }

    .mx-md-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important
    }

    .mx-md-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important
    }

    .mx-md-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-md-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-md-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-md-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-md-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-md-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-md-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .p-md-0 {
        padding: 0 !important
    }

    .p-md-1 {
        padding: .25rem !important
    }

    .p-md-2 {
        padding: .5rem !important
    }

    .p-md-3 {
        padding: 1rem !important
    }

    .p-md-4 {
        padding: 1.5rem !important
    }

    .p-md-5 {
        padding: 3rem !important
    }

    .pt-md-0 {
        padding-top: 0 !important
    }

    .pt-md-1 {
        padding-top: .25rem !important
    }

    .pt-md-2 {
        padding-top: .5rem !important
    }

    .pt-md-3 {
        padding-top: 1rem !important
    }

    .pt-md-4 {
        padding-top: 1.5rem !important
    }

    .pt-md-5 {
        padding-top: 3rem !important
    }

    .pb-md-0 {
        padding-bottom: 0 !important
    }

    .pb-md-1 {
        padding-bottom: .25rem !important
    }

    .pb-md-2 {
        padding-bottom: .5rem !important
    }

    .pb-md-3 {
        padding-bottom: 1rem !important
    }

    .pb-md-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-md-5 {
        padding-bottom: 3rem !important
    }

    .ps-md-0 {
        padding-left: 0 !important
    }

    .ps-md-1 {
        padding-left: .25rem !important
    }

    .ps-md-2 {
        padding-left: .5rem !important
    }

    .ps-md-3 {
        padding-left: 1rem !important
    }

    .ps-md-4 {
        padding-left: 1.5rem !important
    }

    .ps-md-5 {
        padding-left: 3rem !important
    }

    .pe-md-0 {
        padding-right: 0 !important
    }

    .pe-md-1 {
        padding-right: .25rem !important
    }

    .pe-md-2 {
        padding-right: .5rem !important
    }

    .pe-md-3 {
        padding-right: 1rem !important
    }

    .pe-md-4 {
        padding-right: 1.5rem !important
    }

    .pe-md-5 {
        padding-right: 3rem !important
    }

    .px-md-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .px-md-1 {
        padding-left: .25rem !important;
        padding-right: .25rem !important
    }

    .px-md-2 {
        padding-left: .5rem !important;
        padding-right: .5rem !important
    }

    .px-md-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }

    .px-md-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important
    }

    .px-md-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important
    }

    .py-md-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-md-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-md-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-md-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-md-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-md-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }
}

@media (min-width: 992px) {
    .m-lg-0 {
        margin: 0 !important
    }

    .m-lg-1 {
        margin: .25rem !important
    }

    .m-lg-2 {
        margin: .5rem !important
    }

    .m-lg-3 {
        margin: 1rem !important
    }

    .m-lg-4 {
        margin: 1.5rem !important
    }

    .m-lg-5 {
        margin: 3rem !important
    }

    .m-lg-auto {
        margin: auto !important
    }

    .mt-lg-0 {
        margin-top: 0 !important
    }

    .mt-lg-1 {
        margin-top: .25rem !important
    }

    .mt-lg-2 {
        margin-top: .5rem !important
    }

    .mt-lg-3 {
        margin-top: 1rem !important
    }

    .mt-lg-4 {
        margin-top: 1.5rem !important
    }

    .mt-lg-5 {
        margin-top: 3rem !important
    }

    .mt-lg-auto {
        margin-top: auto !important
    }

    .mb-lg-0 {
        margin-bottom: 0 !important
    }

    .mb-lg-1 {
        margin-bottom: .25rem !important
    }

    .mb-lg-2 {
        margin-bottom: .5rem !important
    }

    .mb-lg-3 {
        margin-bottom: 1rem !important
    }

    .mb-lg-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-lg-5 {
        margin-bottom: 3rem !important
    }

    .mb-lg-auto {
        margin-bottom: auto !important
    }

    .ms-lg-0 {
        margin-left: 0 !important
    }

    .ms-lg-1 {
        margin-left: .25rem !important
    }

    .ms-lg-2 {
        margin-left: .5rem !important
    }

    .ms-lg-3 {
        margin-left: 1rem !important
    }

    .ms-lg-4 {
        margin-left: 1.5rem !important
    }

    .ms-lg-5 {
        margin-left: 3rem !important
    }

    .ms-lg-auto {
        margin-left: auto !important
    }

    .me-lg-0 {
        margin-right: 0 !important
    }

    .me-lg-1 {
        margin-right: .25rem !important
    }

    .me-lg-2 {
        margin-right: .5rem !important
    }

    .me-lg-3 {
        margin-right: 1rem !important
    }

    .me-lg-4 {
        margin-right: 1.5rem !important
    }

    .me-lg-5 {
        margin-right: 3rem !important
    }

    .me-lg-auto {
        margin-right: auto !important
    }

    .mx-lg-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mx-lg-1 {
        margin-left: .25rem !important;
        margin-right: .25rem !important
    }

    .mx-lg-2 {
        margin-left: .5rem !important;
        margin-right: .5rem !important
    }

    .mx-lg-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important
    }

    .mx-lg-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important
    }

    .mx-lg-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important
    }

    .mx-lg-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .my-lg-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-lg-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-lg-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-lg-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-lg-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-lg-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-lg-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .p-lg-0 {
        padding: 0 !important
    }

    .p-lg-1 {
        padding: .25rem !important
    }

    .p-lg-2 {
        padding: .5rem !important
    }

    .p-lg-3 {
        padding: 1rem !important
    }

    .p-lg-4 {
        padding: 1.5rem !important
    }

    .p-lg-5 {
        padding: 3rem !important
    }

    .pt-lg-0 {
        padding-top: 0 !important
    }

    .pt-lg-1 {
        padding-top: .25rem !important
    }

    .pt-lg-2 {
        padding-top: .5rem !important
    }

    .pt-lg-3 {
        padding-top: 1rem !important
    }

    .pt-lg-4 {
        padding-top: 1.5rem !important
    }

    .pt-lg-5 {
        padding-top: 3rem !important
    }

    .pb-lg-0 {
        padding-bottom: 0 !important
    }

    .pb-lg-1 {
        padding-bottom: .25rem !important
    }

    .pb-lg-2 {
        padding-bottom: .5rem !important
    }

    .pb-lg-3 {
        padding-bottom: 1rem !important
    }

    .pb-lg-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-lg-5 {
        padding-bottom: 3rem !important
    }

    .ps-lg-0 {
        padding-left: 0 !important
    }

    .ps-lg-1 {
        padding-left: .25rem !important
    }

    .ps-lg-2 {
        padding-left: .5rem !important
    }

    .ps-lg-3 {
        padding-left: 1rem !important
    }

    .ps-lg-4 {
        padding-left: 1.5rem !important
    }

    .ps-lg-5 {
        padding-left: 3rem !important
    }

    .pe-lg-0 {
        padding-right: 0 !important
    }

    .pe-lg-1 {
        padding-right: .25rem !important
    }

    .pe-lg-2 {
        padding-right: .5rem !important
    }

    .pe-lg-3 {
        padding-right: 1rem !important
    }

    .pe-lg-4 {
        padding-right: 1.5rem !important
    }

    .pe-lg-5 {
        padding-right: 3rem !important
    }

    .px-lg-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .px-lg-1 {
        padding-left: .25rem !important;
        padding-right: .25rem !important
    }

    .px-lg-2 {
        padding-left: .5rem !important;
        padding-right: .5rem !important
    }

    .px-lg-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }

    .px-lg-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important
    }

    .px-lg-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important
    }

    .py-lg-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-lg-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-lg-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-lg-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-lg-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-lg-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }
}

@media (min-width: 1200px) {
    .m-xl-0 {
        margin: 0 !important
    }

    .m-xl-1 {
        margin: .25rem !important
    }

    .m-xl-2 {
        margin: .5rem !important
    }

    .m-xl-3 {
        margin: 1rem !important
    }

    .m-xl-4 {
        margin: 1.5rem !important
    }

    .m-xl-5 {
        margin: 3rem !important
    }

    .m-xl-auto {
        margin: auto !important
    }

    .mt-xl-0 {
        margin-top: 0 !important
    }

    .mt-xl-1 {
        margin-top: .25rem !important
    }

    .mt-xl-2 {
        margin-top: .5rem !important
    }

    .mt-xl-3 {
        margin-top: 1rem !important
    }

    .mt-xl-4 {
        margin-top: 1.5rem !important
    }

    .mt-xl-5 {
        margin-top: 3rem !important
    }

    .mt-xl-auto {
        margin-top: auto !important
    }

    .mb-xl-0 {
        margin-bottom: 0 !important
    }

    .mb-xl-1 {
        margin-bottom: .25rem !important
    }

    .mb-xl-2 {
        margin-bottom: .5rem !important
    }

    .mb-xl-3 {
        margin-bottom: 1rem !important
    }

    .mb-xl-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-xl-5 {
        margin-bottom: 3rem !important
    }

    .mb-xl-auto {
        margin-bottom: auto !important
    }

    .ms-xl-0 {
        margin-left: 0 !important
    }

    .ms-xl-1 {
        margin-left: .25rem !important
    }

    .ms-xl-2 {
        margin-left: .5rem !important
    }

    .ms-xl-3 {
        margin-left: 1rem !important
    }

    .ms-xl-4 {
        margin-left: 1.5rem !important
    }

    .ms-xl-5 {
        margin-left: 3rem !important
    }

    .ms-xl-auto {
        margin-left: auto !important
    }

    .me-xl-0 {
        margin-right: 0 !important
    }

    .me-xl-1 {
        margin-right: .25rem !important
    }

    .me-xl-2 {
        margin-right: .5rem !important
    }

    .me-xl-3 {
        margin-right: 1rem !important
    }

    .me-xl-4 {
        margin-right: 1.5rem !important
    }

    .me-xl-5 {
        margin-right: 3rem !important
    }

    .me-xl-auto {
        margin-right: auto !important
    }

    .mx-xl-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .mx-xl-1 {
        margin-left: .25rem !important;
        margin-right: .25rem !important
    }

    .mx-xl-2 {
        margin-left: .5rem !important;
        margin-right: .5rem !important
    }

    .mx-xl-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important
    }

    .mx-xl-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important
    }

    .mx-xl-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important
    }

    .mx-xl-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .my-xl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-xl-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-xl-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-xl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-xl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-xl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-xl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .p-xl-0 {
        padding: 0 !important
    }

    .p-xl-1 {
        padding: .25rem !important
    }

    .p-xl-2 {
        padding: .5rem !important
    }

    .p-xl-3 {
        padding: 1rem !important
    }

    .p-xl-4 {
        padding: 1.5rem !important
    }

    .p-xl-5 {
        padding: 3rem !important
    }

    .pt-xl-0 {
        padding-top: 0 !important
    }

    .pt-xl-1 {
        padding-top: .25rem !important
    }

    .pt-xl-2 {
        padding-top: .5rem !important
    }

    .pt-xl-3 {
        padding-top: 1rem !important
    }

    .pt-xl-4 {
        padding-top: 1.5rem !important
    }

    .pt-xl-5 {
        padding-top: 3rem !important
    }

    .pb-xl-0 {
        padding-bottom: 0 !important
    }

    .pb-xl-1 {
        padding-bottom: .25rem !important
    }

    .pb-xl-2 {
        padding-bottom: .5rem !important
    }

    .pb-xl-3 {
        padding-bottom: 1rem !important
    }

    .pb-xl-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-xl-5 {
        padding-bottom: 3rem !important
    }

    .ps-xl-0 {
        padding-left: 0 !important
    }

    .ps-xl-1 {
        padding-left: .25rem !important
    }

    .ps-xl-2 {
        padding-left: .5rem !important
    }

    .ps-xl-3 {
        padding-left: 1rem !important
    }

    .ps-xl-4 {
        padding-left: 1.5rem !important
    }

    .ps-xl-5 {
        padding-left: 3rem !important
    }

    .pe-xl-0 {
        padding-right: 0 !important
    }

    .pe-xl-1 {
        padding-right: .25rem !important
    }

    .pe-xl-2 {
        padding-right: .5rem !important
    }

    .pe-xl-3 {
        padding-right: 1rem !important
    }

    .pe-xl-4 {
        padding-right: 1.5rem !important
    }

    .pe-xl-5 {
        padding-right: 3rem !important
    }

    .px-xl-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .px-xl-1 {
        padding-left: .25rem !important;
        padding-right: .25rem !important
    }

    .px-xl-2 {
        padding-left: .5rem !important;
        padding-right: .5rem !important
    }

    .px-xl-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }

    .px-xl-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important
    }

    .px-xl-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important
    }

    .py-xl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-xl-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-xl-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-xl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-xl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-xl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }
}