/* ============================
   Sage / Natural Theme CSS
   ============================ */

/* Color tokens */
:root {
    /* Core palette */
    --sage-soft: #a3b18a; /* Primary */
    --sage-dark: #aea17e; /* Darker variant */
    --eucalyptus: #588157; /* Secondary */
    --moss: #3a5a40; /* Accent (CTA/dark) */
    --clay-beige: #dad7cd; /* Light neutral */
    --sandstone: #f5f3e7; /* Lightest base */
    --charcoal: #4b4b4b; /* Dark neutral text */
    --terracotta: #c97d60; /* Warm highlight */

    /* Subtle tints/shades (for hovers/borders) */
    --sage-soft-600: #8ea074;
    --sage-soft-700: #7d9064;
    --sage-dark-600: #9e8f6b;
    --sage-dark-700: #8a7b5a;
    --eucalyptus-600: #4e7350;
    --eucalyptus-700: #426345;
    --moss-600: #314c36;
    --moss-700: #2a412f;
    --clay-beige-600: #c9c5b9;
    --sandstone-600: #e9e6d9;
    --terracotta-600: #b46f55;
    --terracotta-700: #9e614a;

    /* Common UI tokens */
    --text-on-dark: #ffffff;
    --text-on-light: var(--charcoal);
    --border-muted: rgba(0, 0, 0, 0.08);
    --focus-ring: rgba(163, 177, 138, 0.45); /* sage glow */
}

/* ---------- Basic background & text helpers ---------- */
.bg-sandstone {
    background-color: var(--sandstone) !important;
    color: var(--text-on-light);
}
.bg-claybeige {
    background-color: var(--clay-beige) !important;
    color: var(--text-on-light);
}
.bg-sage {
    background-color: var(--sage-soft) !important;
    color: var(--text-on-dark);
}

.bg-sage-dark {
    background-color: var(--sage-dark) !important;
    color: var(--text-on-dark);
}

.bg-euca {
    background-color: var(--eucalyptus) !important;
    color: var(--text-on-dark);
}
.bg-moss {
    background-color: var(--moss) !important;
    color: var(--text-on-dark);
}
.bg-terra {
    background-color: var(--terracotta) !important;
    color: var(--text-on-dark);
}

.text-sandstone {
    color: var(--sandstone) !important;
}
.text-claybeige {
    color: var(--clay-beige) !important;
}
.text-sage {
    color: var(--sage-soft) !important;
}

.text-sage-dark {
    color: var(--sage-dark) !important;
}
.text-euca {
    color: var(--eucalyptus) !important;
}
.text-moss {
    color: var(--moss) !important;
}
.text-terra {
    color: var(--terracotta) !important;
}
.text-charcoal {
    color: var(--charcoal) !important;
}

/* Muted borders/cards */
.border-muted {
    border: 1px solid var(--border-muted) !important;
}
.card-sage {
    background: var(--sandstone);
    border: 1px solid var(--border-muted);
    color: var(--text-on-light);
    border-radius: 0.5rem;
}

/* ---------- Buttons (work with Bootstrap or standalone) ---------- */
.btn-sage {
    --btn-bg: var(--sage-soft);
    --btn-bg-hover: var(--sage-soft-600);
    --btn-color: var(--text-on-dark);
    --btn-border: transparent;
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
}
.btn-sage:hover,
.btn-sage:focus {
    background: var(--btn-bg-hover);
    color: var(--btn-color);
}

.btn-sage-dark {
    --btn-bg: var(--sage-dark);
    --btn-bg-hover: var(--sage-dark-600);
    --btn-color: var(--text-on-dark);
    --btn-border: transparent;
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
}
.btn-sage-dark:hover,
.btn-sage-dark:focus {
    background: var(--btn-bg-hover);
    color: var(--btn-color);
}

.btn-euca {
    --btn-bg: var(--eucalyptus);
    --btn-bg-hover: var(--eucalyptus-600);
    --btn-color: var(--text-on-dark);
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid transparent;
}
.btn-euca:hover,
.btn-euca:focus {
    background: var(--btn-bg-hover);
    color: var(--btn-color);
}

.btn-moss {
    --btn-bg: var(--moss);
    --btn-bg-hover: var(--moss-600);
    --btn-color: var(--text-on-dark);
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid transparent;
}
.btn-moss:hover,
.btn-moss:focus {
    background: var(--btn-bg-hover);
    color: var(--btn-color);
}

.btn-terra {
    --btn-bg: var(--terracotta);
    --btn-bg-hover: var(--terracotta-600);
    --btn-color: var(--text-on-dark);
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid transparent;
}
.btn-terra:hover,
.btn-terra:focus {
    background: var(--btn-bg-hover);
    color: var(--btn-color);
}

/* Outline variants */
.btn-outline-sage {
    color: var(--sage-soft);
    border: 1px solid var(--sage-soft);
    background: transparent;
}
.btn-outline-sage:hover {
    background: var(--sage-soft);
    color: var(--text-on-dark);
}

.btn-outline-euca {
    color: var(--eucalyptus);
    border: 1px solid var(--eucalyptus);
    background: transparent;
}
.btn-outline-euca:hover {
    background: var(--eucalyptus);
    color: var(--text-on-dark);
}

/* ---------- Links ---------- */
a.link-sage {
    color: var(--sage-soft);
}
a.link-sage:hover {
    color: var(--sage-soft-700);
    text-decoration: underline;
}

a.link-euca {
    color: var(--eucalyptus);
}
a.link-euca:hover {
    color: var(--eucalyptus-700);
    text-decoration: underline;
}

a.link-terra {
    color: var(--terracotta);
}
a.link-terra:hover {
    color: var(--terracotta-700);
    text-decoration: underline;
}

/* ---------- Badges / Pills ---------- */
.badge-sage {
    background: var(--sage-soft);
    color: var(--text-on-dark);
}
.badge-euca {
    background: var(--eucalyptus);
    color: var(--text-on-dark);
}
.badge-moss {
    background: var(--moss);
    color: var(--text-on-dark);
}
.badge-terra {
    background: var(--terracotta);
    color: var(--text-on-dark);
}
.badge-claybeige {
    background: var(--clay-beige);
    color: var(--text-on-light);
}

/* ---------- Alerts (light, calm styles) ---------- */
.alert-sage {
    background: color-mix(in srgb, var(--sage-soft) 12%, white);
    border: 1px solid color-mix(in srgb, var(--sage-soft) 40%, transparent);
    color: var(--charcoal);
}
.alert-euca {
    background: color-mix(in srgb, var(--eucalyptus) 10%, white);
    border: 1px solid color-mix(in srgb, var(--eucalyptus) 40%, transparent);
    color: var(--charcoal);
}
.alert-terra {
    background: color-mix(in srgb, var(--terracotta) 12%, white);
    border: 1px solid color-mix(in srgb, var(--terracotta) 40%, transparent);
    color: var(--charcoal);
}

.icon-divider.style-3 .svg path {
    stroke: var(--eucalyptus);

/* ---------- Forms ---------- */
.form-control.sage {
    background: var(--sandstone);
    border: 1px solid var(--clay-beige-600);
    color: var(--charcoal);
}
.form-control.sage:focus {
    border-color: var(--sage-soft);
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

/* ---------- Focus ring utility ---------- */
.focus-sage:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem var(--focus-ring) !important;
}

/* ---------- Sections / hero helpers ---------- */
.section-sage {
    background: linear-gradient(180deg, var(--sandstone), var(--clay-beige));
    color: var(--text-on-light);
}
.section-sage .heading {
    color: var(--moss);
}
.section-sage .subheading {
    color: var(--eucalyptus);
    opacity: 0.9;
}

.desktop-img {
    display: none;
}

.mobile-img {
    display: block;
}

@media (min-width: 992px) {
    .desktop-img {
        display: block;
    }

    .mobile-img {
        display: none;
    }
}

.text-white {
    color: #fff;
}

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

.jumbotron-custom {
    color: #fff;
    min-height: 90vh;
    position: relative;
    margin-top: 100px;
    overflow: hidden;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

:root {
    --space-unit: 0.25rem;
}

.m-0 {
    margin: calc(var(--space-unit) * 0) !important;
}
.m-1 {
    margin: calc(var(--space-unit) * 1) !important;
}
.m-2 {
    margin: calc(var(--space-unit) * 2) !important;
}
.m-3 {
    margin: calc(var(--space-unit) * 3) !important;
}
.m-4 {
    margin: calc(var(--space-unit) * 4) !important;
}
.m-5 {
    margin: calc(var(--space-unit) * 5) !important;
}
.m-6 {
    margin: calc(var(--space-unit) * 6) !important;
}
.m-7 {
    margin: calc(var(--space-unit) * 7) !important;
}
.m-8 {
    margin: calc(var(--space-unit) * 8) !important;
}
.m-9 {
    margin: calc(var(--space-unit) * 9) !important;
}
.m-10 {
    margin: calc(var(--space-unit) * 10) !important;
}
.m-11 {
    margin: calc(var(--space-unit) * 11) !important;
}
.m-12 {
    margin: calc(var(--space-unit) * 12) !important;
}
.m-13 {
    margin: calc(var(--space-unit) * 13) !important;
}
.m-14 {
    margin: calc(var(--space-unit) * 14) !important;
}
.m-15 {
    margin: calc(var(--space-unit) * 15) !important;
}
.m-16 {
    margin: calc(var(--space-unit) * 16) !important;
}
.m-17 {
    margin: calc(var(--space-unit) * 17) !important;
}
.m-18 {
    margin: calc(var(--space-unit) * 18) !important;
}
.m-19 {
    margin: calc(var(--space-unit) * 19) !important;
}
.m-20 {
    margin: calc(var(--space-unit) * 20) !important;
}
.m-21 {
    margin: calc(var(--space-unit) * 21) !important;
}
.m-22 {
    margin: calc(var(--space-unit) * 22) !important;
}
.m-23 {
    margin: calc(var(--space-unit) * 23) !important;
}
.m-24 {
    margin: calc(var(--space-unit) * 24) !important;
}
.m-25 {
    margin: calc(var(--space-unit) * 25) !important;
}
.mt-0 {
    margin-top: calc(var(--space-unit) * 0) !important;
}
.mt-1 {
    margin-top: calc(var(--space-unit) * 1) !important;
}
.mt-2 {
    margin-top: calc(var(--space-unit) * 2) !important;
}
.mt-3 {
    margin-top: calc(var(--space-unit) * 3) !important;
}
.mt-4 {
    margin-top: calc(var(--space-unit) * 4) !important;
}
.mt-5 {
    margin-top: calc(var(--space-unit) * 5) !important;
}
.mt-6 {
    margin-top: calc(var(--space-unit) * 6) !important;
}
.mt-7 {
    margin-top: calc(var(--space-unit) * 7) !important;
}
.mt-8 {
    margin-top: calc(var(--space-unit) * 8) !important;
}
.mt-9 {
    margin-top: calc(var(--space-unit) * 9) !important;
}
.mt-10 {
    margin-top: calc(var(--space-unit) * 10) !important;
}
.mt-11 {
    margin-top: calc(var(--space-unit) * 11) !important;
}
.mt-12 {
    margin-top: calc(var(--space-unit) * 12) !important;
}
.mt-13 {
    margin-top: calc(var(--space-unit) * 13) !important;
}
.mt-14 {
    margin-top: calc(var(--space-unit) * 14) !important;
}
.mt-15 {
    margin-top: calc(var(--space-unit) * 15) !important;
}
.mt-16 {
    margin-top: calc(var(--space-unit) * 16) !important;
}
.mt-17 {
    margin-top: calc(var(--space-unit) * 17) !important;
}
.mt-18 {
    margin-top: calc(var(--space-unit) * 18) !important;
}
.mt-19 {
    margin-top: calc(var(--space-unit) * 19) !important;
}
.mt-20 {
    margin-top: calc(var(--space-unit) * 20) !important;
}
.mt-21 {
    margin-top: calc(var(--space-unit) * 21) !important;
}
.mt-22 {
    margin-top: calc(var(--space-unit) * 22) !important;
}
.mt-23 {
    margin-top: calc(var(--space-unit) * 23) !important;
}
.mt-24 {
    margin-top: calc(var(--space-unit) * 24) !important;
}
.mt-25 {
    margin-top: calc(var(--space-unit) * 25) !important;
}
.mb-0 {
    margin-bottom: calc(var(--space-unit) * 0) !important;
}
.mb-1 {
    margin-bottom: calc(var(--space-unit) * 1) !important;
}
.mb-2 {
    margin-bottom: calc(var(--space-unit) * 2) !important;
}
.mb-3 {
    margin-bottom: calc(var(--space-unit) * 3) !important;
}
.mb-4 {
    margin-bottom: calc(var(--space-unit) * 4) !important;
}
.mb-5 {
    margin-bottom: calc(var(--space-unit) * 5) !important;
}
.mb-6 {
    margin-bottom: calc(var(--space-unit) * 6) !important;
}
.mb-7 {
    margin-bottom: calc(var(--space-unit) * 7) !important;
}
.mb-8 {
    margin-bottom: calc(var(--space-unit) * 8) !important;
}
.mb-9 {
    margin-bottom: calc(var(--space-unit) * 9) !important;
}
.mb-10 {
    margin-bottom: calc(var(--space-unit) * 10) !important;
}
.mb-11 {
    margin-bottom: calc(var(--space-unit) * 11) !important;
}
.mb-12 {
    margin-bottom: calc(var(--space-unit) * 12) !important;
}
.mb-13 {
    margin-bottom: calc(var(--space-unit) * 13) !important;
}
.mb-14 {
    margin-bottom: calc(var(--space-unit) * 14) !important;
}
.mb-15 {
    margin-bottom: calc(var(--space-unit) * 15) !important;
}
.mb-16 {
    margin-bottom: calc(var(--space-unit) * 16) !important;
}
.mb-17 {
    margin-bottom: calc(var(--space-unit) * 17) !important;
}
.mb-18 {
    margin-bottom: calc(var(--space-unit) * 18) !important;
}
.mb-19 {
    margin-bottom: calc(var(--space-unit) * 19) !important;
}
.mb-20 {
    margin-bottom: calc(var(--space-unit) * 20) !important;
}
.mb-21 {
    margin-bottom: calc(var(--space-unit) * 21) !important;
}
.mb-22 {
    margin-bottom: calc(var(--space-unit) * 22) !important;
}
.mb-23 {
    margin-bottom: calc(var(--space-unit) * 23) !important;
}
.mb-24 {
    margin-bottom: calc(var(--space-unit) * 24) !important;
}
.mb-25 {
    margin-bottom: calc(var(--space-unit) * 25) !important;
}
.ms-0 {
    margin-left: calc(var(--space-unit) * 0) !important;
}
.ms-1 {
    margin-left: calc(var(--space-unit) * 1) !important;
}
.ms-2 {
    margin-left: calc(var(--space-unit) * 2) !important;
}
.ms-3 {
    margin-left: calc(var(--space-unit) * 3) !important;
}
.ms-4 {
    margin-left: calc(var(--space-unit) * 4) !important;
}
.ms-5 {
    margin-left: calc(var(--space-unit) * 5) !important;
}
.ms-6 {
    margin-left: calc(var(--space-unit) * 6) !important;
}
.ms-7 {
    margin-left: calc(var(--space-unit) * 7) !important;
}
.ms-8 {
    margin-left: calc(var(--space-unit) * 8) !important;
}
.ms-9 {
    margin-left: calc(var(--space-unit) * 9) !important;
}
.ms-10 {
    margin-left: calc(var(--space-unit) * 10) !important;
}
.ms-11 {
    margin-left: calc(var(--space-unit) * 11) !important;
}
.ms-12 {
    margin-left: calc(var(--space-unit) * 12) !important;
}
.ms-13 {
    margin-left: calc(var(--space-unit) * 13) !important;
}
.ms-14 {
    margin-left: calc(var(--space-unit) * 14) !important;
}
.ms-15 {
    margin-left: calc(var(--space-unit) * 15) !important;
}
.ms-16 {
    margin-left: calc(var(--space-unit) * 16) !important;
}
.ms-17 {
    margin-left: calc(var(--space-unit) * 17) !important;
}
.ms-18 {
    margin-left: calc(var(--space-unit) * 18) !important;
}
.ms-19 {
    margin-left: calc(var(--space-unit) * 19) !important;
}
.ms-20 {
    margin-left: calc(var(--space-unit) * 20) !important;
}
.ms-21 {
    margin-left: calc(var(--space-unit) * 21) !important;
}
.ms-22 {
    margin-left: calc(var(--space-unit) * 22) !important;
}
.ms-23 {
    margin-left: calc(var(--space-unit) * 23) !important;
}
.ms-24 {
    margin-left: calc(var(--space-unit) * 24) !important;
}
.ms-25 {
    margin-left: calc(var(--space-unit) * 25) !important;
}
.me-0 {
    margin-right: calc(var(--space-unit) * 0) !important;
}
.me-1 {
    margin-right: calc(var(--space-unit) * 1) !important;
}
.me-2 {
    margin-right: calc(var(--space-unit) * 2) !important;
}
.me-3 {
    margin-right: calc(var(--space-unit) * 3) !important;
}
.me-4 {
    margin-right: calc(var(--space-unit) * 4) !important;
}
.me-5 {
    margin-right: calc(var(--space-unit) * 5) !important;
}
.me-6 {
    margin-right: calc(var(--space-unit) * 6) !important;
}
.me-7 {
    margin-right: calc(var(--space-unit) * 7) !important;
}
.me-8 {
    margin-right: calc(var(--space-unit) * 8) !important;
}
.me-9 {
    margin-right: calc(var(--space-unit) * 9) !important;
}
.me-10 {
    margin-right: calc(var(--space-unit) * 10) !important;
}
.me-11 {
    margin-right: calc(var(--space-unit) * 11) !important;
}
.me-12 {
    margin-right: calc(var(--space-unit) * 12) !important;
}
.me-13 {
    margin-right: calc(var(--space-unit) * 13) !important;
}
.me-14 {
    margin-right: calc(var(--space-unit) * 14) !important;
}
.me-15 {
    margin-right: calc(var(--space-unit) * 15) !important;
}
.me-16 {
    margin-right: calc(var(--space-unit) * 16) !important;
}
.me-17 {
    margin-right: calc(var(--space-unit) * 17) !important;
}
.me-18 {
    margin-right: calc(var(--space-unit) * 18) !important;
}
.me-19 {
    margin-right: calc(var(--space-unit) * 19) !important;
}
.me-20 {
    margin-right: calc(var(--space-unit) * 20) !important;
}
.me-21 {
    margin-right: calc(var(--space-unit) * 21) !important;
}
.me-22 {
    margin-right: calc(var(--space-unit) * 22) !important;
}
.me-23 {
    margin-right: calc(var(--space-unit) * 23) !important;
}
.me-24 {
    margin-right: calc(var(--space-unit) * 24) !important;
}
.me-25 {
    margin-right: calc(var(--space-unit) * 25) !important;
}
.mx-0 {
    margin-left: calc(var(--space-unit) * 0) !important;
    margin-right: calc(var(--space-unit) * 0) !important;
}
.mx-1 {
    margin-left: calc(var(--space-unit) * 1) !important;
    margin-right: calc(var(--space-unit) * 1) !important;
}
.mx-2 {
    margin-left: calc(var(--space-unit) * 2) !important;
    margin-right: calc(var(--space-unit) * 2) !important;
}
.mx-3 {
    margin-left: calc(var(--space-unit) * 3) !important;
    margin-right: calc(var(--space-unit) * 3) !important;
}
.mx-4 {
    margin-left: calc(var(--space-unit) * 4) !important;
    margin-right: calc(var(--space-unit) * 4) !important;
}
.mx-5 {
    margin-left: calc(var(--space-unit) * 5) !important;
    margin-right: calc(var(--space-unit) * 5) !important;
}
.mx-6 {
    margin-left: calc(var(--space-unit) * 6) !important;
    margin-right: calc(var(--space-unit) * 6) !important;
}
.mx-7 {
    margin-left: calc(var(--space-unit) * 7) !important;
    margin-right: calc(var(--space-unit) * 7) !important;
}
.mx-8 {
    margin-left: calc(var(--space-unit) * 8) !important;
    margin-right: calc(var(--space-unit) * 8) !important;
}
.mx-9 {
    margin-left: calc(var(--space-unit) * 9) !important;
    margin-right: calc(var(--space-unit) * 9) !important;
}
.mx-10 {
    margin-left: calc(var(--space-unit) * 10) !important;
    margin-right: calc(var(--space-unit) * 10) !important;
}
.mx-11 {
    margin-left: calc(var(--space-unit) * 11) !important;
    margin-right: calc(var(--space-unit) * 11) !important;
}
.mx-12 {
    margin-left: calc(var(--space-unit) * 12) !important;
    margin-right: calc(var(--space-unit) * 12) !important;
}
.mx-13 {
    margin-left: calc(var(--space-unit) * 13) !important;
    margin-right: calc(var(--space-unit) * 13) !important;
}
.mx-14 {
    margin-left: calc(var(--space-unit) * 14) !important;
    margin-right: calc(var(--space-unit) * 14) !important;
}
.mx-15 {
    margin-left: calc(var(--space-unit) * 15) !important;
    margin-right: calc(var(--space-unit) * 15) !important;
}
.mx-16 {
    margin-left: calc(var(--space-unit) * 16) !important;
    margin-right: calc(var(--space-unit) * 16) !important;
}
.mx-17 {
    margin-left: calc(var(--space-unit) * 17) !important;
    margin-right: calc(var(--space-unit) * 17) !important;
}
.mx-18 {
    margin-left: calc(var(--space-unit) * 18) !important;
    margin-right: calc(var(--space-unit) * 18) !important;
}
.mx-19 {
    margin-left: calc(var(--space-unit) * 19) !important;
    margin-right: calc(var(--space-unit) * 19) !important;
}
.mx-20 {
    margin-left: calc(var(--space-unit) * 20) !important;
    margin-right: calc(var(--space-unit) * 20) !important;
}
.mx-21 {
    margin-left: calc(var(--space-unit) * 21) !important;
    margin-right: calc(var(--space-unit) * 21) !important;
}
.mx-22 {
    margin-left: calc(var(--space-unit) * 22) !important;
    margin-right: calc(var(--space-unit) * 22) !important;
}
.mx-23 {
    margin-left: calc(var(--space-unit) * 23) !important;
    margin-right: calc(var(--space-unit) * 23) !important;
}
.mx-24 {
    margin-left: calc(var(--space-unit) * 24) !important;
    margin-right: calc(var(--space-unit) * 24) !important;
}
.mx-25 {
    margin-left: calc(var(--space-unit) * 25) !important;
    margin-right: calc(var(--space-unit) * 25) !important;
}
.my-0 {
    margin-top: calc(var(--space-unit) * 0) !important;
    margin-bottom: calc(var(--space-unit) * 0) !important;
}
.my-1 {
    margin-top: calc(var(--space-unit) * 1) !important;
    margin-bottom: calc(var(--space-unit) * 1) !important;
}
.my-2 {
    margin-top: calc(var(--space-unit) * 2) !important;
    margin-bottom: calc(var(--space-unit) * 2) !important;
}
.my-3 {
    margin-top: calc(var(--space-unit) * 3) !important;
    margin-bottom: calc(var(--space-unit) * 3) !important;
}
.my-4 {
    margin-top: calc(var(--space-unit) * 4) !important;
    margin-bottom: calc(var(--space-unit) * 4) !important;
}
.my-5 {
    margin-top: calc(var(--space-unit) * 5) !important;
    margin-bottom: calc(var(--space-unit) * 5) !important;
}
.my-6 {
    margin-top: calc(var(--space-unit) * 6) !important;
    margin-bottom: calc(var(--space-unit) * 6) !important;
}
.my-7 {
    margin-top: calc(var(--space-unit) * 7) !important;
    margin-bottom: calc(var(--space-unit) * 7) !important;
}
.my-8 {
    margin-top: calc(var(--space-unit) * 8) !important;
    margin-bottom: calc(var(--space-unit) * 8) !important;
}
.my-9 {
    margin-top: calc(var(--space-unit) * 9) !important;
    margin-bottom: calc(var(--space-unit) * 9) !important;
}
.my-10 {
    margin-top: calc(var(--space-unit) * 10) !important;
    margin-bottom: calc(var(--space-unit) * 10) !important;
}
.my-11 {
    margin-top: calc(var(--space-unit) * 11) !important;
    margin-bottom: calc(var(--space-unit) * 11) !important;
}
.my-12 {
    margin-top: calc(var(--space-unit) * 12) !important;
    margin-bottom: calc(var(--space-unit) * 12) !important;
}
.my-13 {
    margin-top: calc(var(--space-unit) * 13) !important;
    margin-bottom: calc(var(--space-unit) * 13) !important;
}
.my-14 {
    margin-top: calc(var(--space-unit) * 14) !important;
    margin-bottom: calc(var(--space-unit) * 14) !important;
}
.my-15 {
    margin-top: calc(var(--space-unit) * 15) !important;
    margin-bottom: calc(var(--space-unit) * 15) !important;
}
.my-16 {
    margin-top: calc(var(--space-unit) * 16) !important;
    margin-bottom: calc(var(--space-unit) * 16) !important;
}
.my-17 {
    margin-top: calc(var(--space-unit) * 17) !important;
    margin-bottom: calc(var(--space-unit) * 17) !important;
}
.my-18 {
    margin-top: calc(var(--space-unit) * 18) !important;
    margin-bottom: calc(var(--space-unit) * 18) !important;
}
.my-19 {
    margin-top: calc(var(--space-unit) * 19) !important;
    margin-bottom: calc(var(--space-unit) * 19) !important;
}
.my-20 {
    margin-top: calc(var(--space-unit) * 20) !important;
    margin-bottom: calc(var(--space-unit) * 20) !important;
}
.my-21 {
    margin-top: calc(var(--space-unit) * 21) !important;
    margin-bottom: calc(var(--space-unit) * 21) !important;
}
.my-22 {
    margin-top: calc(var(--space-unit) * 22) !important;
    margin-bottom: calc(var(--space-unit) * 22) !important;
}
.my-23 {
    margin-top: calc(var(--space-unit) * 23) !important;
    margin-bottom: calc(var(--space-unit) * 23) !important;
}
.my-24 {
    margin-top: calc(var(--space-unit) * 24) !important;
    margin-bottom: calc(var(--space-unit) * 24) !important;
}
.my-25 {
    margin-top: calc(var(--space-unit) * 25) !important;
    margin-bottom: calc(var(--space-unit) * 25) !important;
}
.p-0 {
    padding: calc(var(--space-unit) * 0) !important;
}
.p-1 {
    padding: calc(var(--space-unit) * 1) !important;
}
.p-2 {
    padding: calc(var(--space-unit) * 2) !important;
}
.p-3 {
    padding: calc(var(--space-unit) * 3) !important;
}
.p-4 {
    padding: calc(var(--space-unit) * 4) !important;
}
.p-5 {
    padding: calc(var(--space-unit) * 5) !important;
}
.p-6 {
    padding: calc(var(--space-unit) * 6) !important;
}
.p-7 {
    padding: calc(var(--space-unit) * 7) !important;
}
.p-8 {
    padding: calc(var(--space-unit) * 8) !important;
}
.p-9 {
    padding: calc(var(--space-unit) * 9) !important;
}
.p-10 {
    padding: calc(var(--space-unit) * 10) !important;
}
.p-11 {
    padding: calc(var(--space-unit) * 11) !important;
}
.p-12 {
    padding: calc(var(--space-unit) * 12) !important;
}
.p-13 {
    padding: calc(var(--space-unit) * 13) !important;
}
.p-14 {
    padding: calc(var(--space-unit) * 14) !important;
}
.p-15 {
    padding: calc(var(--space-unit) * 15) !important;
}
.p-16 {
    padding: calc(var(--space-unit) * 16) !important;
}
.p-17 {
    padding: calc(var(--space-unit) * 17) !important;
}
.p-18 {
    padding: calc(var(--space-unit) * 18) !important;
}
.p-19 {
    padding: calc(var(--space-unit) * 19) !important;
}
.p-20 {
    padding: calc(var(--space-unit) * 20) !important;
}
.p-21 {
    padding: calc(var(--space-unit) * 21) !important;
}
.p-22 {
    padding: calc(var(--space-unit) * 22) !important;
}
.p-23 {
    padding: calc(var(--space-unit) * 23) !important;
}
.p-24 {
    padding: calc(var(--space-unit) * 24) !important;
}
.p-25 {
    padding: calc(var(--space-unit) * 25) !important;
}
.pt-0 {
    padding-top: calc(var(--space-unit) * 0) !important;
}
.pt-1 {
    padding-top: calc(var(--space-unit) * 1) !important;
}
.pt-2 {
    padding-top: calc(var(--space-unit) * 2) !important;
}
.pt-3 {
    padding-top: calc(var(--space-unit) * 3) !important;
}
.pt-4 {
    padding-top: calc(var(--space-unit) * 4) !important;
}
.pt-5 {
    padding-top: calc(var(--space-unit) * 5) !important;
}
.pt-6 {
    padding-top: calc(var(--space-unit) * 6) !important;
}
.pt-7 {
    padding-top: calc(var(--space-unit) * 7) !important;
}
.pt-8 {
    padding-top: calc(var(--space-unit) * 8) !important;
}
.pt-9 {
    padding-top: calc(var(--space-unit) * 9) !important;
}
.pt-10 {
    padding-top: calc(var(--space-unit) * 10) !important;
}
.pt-11 {
    padding-top: calc(var(--space-unit) * 11) !important;
}
.pt-12 {
    padding-top: calc(var(--space-unit) * 12) !important;
}
.pt-13 {
    padding-top: calc(var(--space-unit) * 13) !important;
}
.pt-14 {
    padding-top: calc(var(--space-unit) * 14) !important;
}
.pt-15 {
    padding-top: calc(var(--space-unit) * 15) !important;
}
.pt-16 {
    padding-top: calc(var(--space-unit) * 16) !important;
}
.pt-17 {
    padding-top: calc(var(--space-unit) * 17) !important;
}
.pt-18 {
    padding-top: calc(var(--space-unit) * 18) !important;
}
.pt-19 {
    padding-top: calc(var(--space-unit) * 19) !important;
}
.pt-20 {
    padding-top: calc(var(--space-unit) * 20) !important;
}
.pt-21 {
    padding-top: calc(var(--space-unit) * 21) !important;
}
.pt-22 {
    padding-top: calc(var(--space-unit) * 22) !important;
}
.pt-23 {
    padding-top: calc(var(--space-unit) * 23) !important;
}
.pt-24 {
    padding-top: calc(var(--space-unit) * 24) !important;
}
.pt-25 {
    padding-top: calc(var(--space-unit) * 25) !important;
}
.pb-0 {
    padding-bottom: calc(var(--space-unit) * 0) !important;
}
.pb-1 {
    padding-bottom: calc(var(--space-unit) * 1) !important;
}
.pb-2 {
    padding-bottom: calc(var(--space-unit) * 2) !important;
}
.pb-3 {
    padding-bottom: calc(var(--space-unit) * 3) !important;
}
.pb-4 {
    padding-bottom: calc(var(--space-unit) * 4) !important;
}
.pb-5 {
    padding-bottom: calc(var(--space-unit) * 5) !important;
}
.pb-6 {
    padding-bottom: calc(var(--space-unit) * 6) !important;
}
.pb-7 {
    padding-bottom: calc(var(--space-unit) * 7) !important;
}
.pb-8 {
    padding-bottom: calc(var(--space-unit) * 8) !important;
}
.pb-9 {
    padding-bottom: calc(var(--space-unit) * 9) !important;
}
.pb-10 {
    padding-bottom: calc(var(--space-unit) * 10) !important;
}
.pb-11 {
    padding-bottom: calc(var(--space-unit) * 11) !important;
}
.pb-12 {
    padding-bottom: calc(var(--space-unit) * 12) !important;
}
.pb-13 {
    padding-bottom: calc(var(--space-unit) * 13) !important;
}
.pb-14 {
    padding-bottom: calc(var(--space-unit) * 14) !important;
}
.pb-15 {
    padding-bottom: calc(var(--space-unit) * 15) !important;
}
.pb-16 {
    padding-bottom: calc(var(--space-unit) * 16) !important;
}
.pb-17 {
    padding-bottom: calc(var(--space-unit) * 17) !important;
}
.pb-18 {
    padding-bottom: calc(var(--space-unit) * 18) !important;
}
.pb-19 {
    padding-bottom: calc(var(--space-unit) * 19) !important;
}
.pb-20 {
    padding-bottom: calc(var(--space-unit) * 20) !important;
}
.pb-21 {
    padding-bottom: calc(var(--space-unit) * 21) !important;
}
.pb-22 {
    padding-bottom: calc(var(--space-unit) * 22) !important;
}
.pb-23 {
    padding-bottom: calc(var(--space-unit) * 23) !important;
}
.pb-24 {
    padding-bottom: calc(var(--space-unit) * 24) !important;
}
.pb-25 {
    padding-bottom: calc(var(--space-unit) * 25) !important;
}
.ps-0 {
    padding-left: calc(var(--space-unit) * 0) !important;
}
.ps-1 {
    padding-left: calc(var(--space-unit) * 1) !important;
}
.ps-2 {
    padding-left: calc(var(--space-unit) * 2) !important;
}
.ps-3 {
    padding-left: calc(var(--space-unit) * 3) !important;
}
.ps-4 {
    padding-left: calc(var(--space-unit) * 4) !important;
}
.ps-5 {
    padding-left: calc(var(--space-unit) * 5) !important;
}
.ps-6 {
    padding-left: calc(var(--space-unit) * 6) !important;
}
.ps-7 {
    padding-left: calc(var(--space-unit) * 7) !important;
}
.ps-8 {
    padding-left: calc(var(--space-unit) * 8) !important;
}
.ps-9 {
    padding-left: calc(var(--space-unit) * 9) !important;
}
.ps-10 {
    padding-left: calc(var(--space-unit) * 10) !important;
}
.ps-11 {
    padding-left: calc(var(--space-unit) * 11) !important;
}
.ps-12 {
    padding-left: calc(var(--space-unit) * 12) !important;
}
.ps-13 {
    padding-left: calc(var(--space-unit) * 13) !important;
}
.ps-14 {
    padding-left: calc(var(--space-unit) * 14) !important;
}
.ps-15 {
    padding-left: calc(var(--space-unit) * 15) !important;
}
.ps-16 {
    padding-left: calc(var(--space-unit) * 16) !important;
}
.ps-17 {
    padding-left: calc(var(--space-unit) * 17) !important;
}
.ps-18 {
    padding-left: calc(var(--space-unit) * 18) !important;
}
.ps-19 {
    padding-left: calc(var(--space-unit) * 19) !important;
}
.ps-20 {
    padding-left: calc(var(--space-unit) * 20) !important;
}
.ps-21 {
    padding-left: calc(var(--space-unit) * 21) !important;
}
.ps-22 {
    padding-left: calc(var(--space-unit) * 22) !important;
}
.ps-23 {
    padding-left: calc(var(--space-unit) * 23) !important;
}
.ps-24 {
    padding-left: calc(var(--space-unit) * 24) !important;
}
.ps-25 {
    padding-left: calc(var(--space-unit) * 25) !important;
}
.pe-0 {
    padding-right: calc(var(--space-unit) * 0) !important;
}
.pe-1 {
    padding-right: calc(var(--space-unit) * 1) !important;
}
.pe-2 {
    padding-right: calc(var(--space-unit) * 2) !important;
}
.pe-3 {
    padding-right: calc(var(--space-unit) * 3) !important;
}
.pe-4 {
    padding-right: calc(var(--space-unit) * 4) !important;
}
.pe-5 {
    padding-right: calc(var(--space-unit) * 5) !important;
}
.pe-6 {
    padding-right: calc(var(--space-unit) * 6) !important;
}
.pe-7 {
    padding-right: calc(var(--space-unit) * 7) !important;
}
.pe-8 {
    padding-right: calc(var(--space-unit) * 8) !important;
}
.pe-9 {
    padding-right: calc(var(--space-unit) * 9) !important;
}
.pe-10 {
    padding-right: calc(var(--space-unit) * 10) !important;
}
.pe-11 {
    padding-right: calc(var(--space-unit) * 11) !important;
}
.pe-12 {
    padding-right: calc(var(--space-unit) * 12) !important;
}
.pe-13 {
    padding-right: calc(var(--space-unit) * 13) !important;
}
.pe-14 {
    padding-right: calc(var(--space-unit) * 14) !important;
}
.pe-15 {
    padding-right: calc(var(--space-unit) * 15) !important;
}
.pe-16 {
    padding-right: calc(var(--space-unit) * 16) !important;
}
.pe-17 {
    padding-right: calc(var(--space-unit) * 17) !important;
}
.pe-18 {
    padding-right: calc(var(--space-unit) * 18) !important;
}
.pe-19 {
    padding-right: calc(var(--space-unit) * 19) !important;
}
.pe-20 {
    padding-right: calc(var(--space-unit) * 20) !important;
}
.pe-21 {
    padding-right: calc(var(--space-unit) * 21) !important;
}
.pe-22 {
    padding-right: calc(var(--space-unit) * 22) !important;
}
.pe-23 {
    padding-right: calc(var(--space-unit) * 23) !important;
}
.pe-24 {
    padding-right: calc(var(--space-unit) * 24) !important;
}
.pe-25 {
    padding-right: calc(var(--space-unit) * 25) !important;
}
.px-0 {
    padding-left: calc(var(--space-unit) * 0) !important;
    padding-right: calc(var(--space-unit) * 0) !important;
}
.px-1 {
    padding-left: calc(var(--space-unit) * 1) !important;
    padding-right: calc(var(--space-unit) * 1) !important;
}
.px-2 {
    padding-left: calc(var(--space-unit) * 2) !important;
    padding-right: calc(var(--space-unit) * 2) !important;
}
.px-3 {
    padding-left: calc(var(--space-unit) * 3) !important;
    padding-right: calc(var(--space-unit) * 3) !important;
}
.px-4 {
    padding-left: calc(var(--space-unit) * 4) !important;
    padding-right: calc(var(--space-unit) * 4) !important;
}
.px-5 {
    padding-left: calc(var(--space-unit) * 5) !important;
    padding-right: calc(var(--space-unit) * 5) !important;
}
.px-6 {
    padding-left: calc(var(--space-unit) * 6) !important;
    padding-right: calc(var(--space-unit) * 6) !important;
}
.px-7 {
    padding-left: calc(var(--space-unit) * 7) !important;
    padding-right: calc(var(--space-unit) * 7) !important;
}
.px-8 {
    padding-left: calc(var(--space-unit) * 8) !important;
    padding-right: calc(var(--space-unit) * 8) !important;
}
.px-9 {
    padding-left: calc(var(--space-unit) * 9) !important;
    padding-right: calc(var(--space-unit) * 9) !important;
}
.px-10 {
    padding-left: calc(var(--space-unit) * 10) !important;
    padding-right: calc(var(--space-unit) * 10) !important;
}
.px-11 {
    padding-left: calc(var(--space-unit) * 11) !important;
    padding-right: calc(var(--space-unit) * 11) !important;
}
.px-12 {
    padding-left: calc(var(--space-unit) * 12) !important;
    padding-right: calc(var(--space-unit) * 12) !important;
}
.px-13 {
    padding-left: calc(var(--space-unit) * 13) !important;
    padding-right: calc(var(--space-unit) * 13) !important;
}
.px-14 {
    padding-left: calc(var(--space-unit) * 14) !important;
    padding-right: calc(var(--space-unit) * 14) !important;
}
.px-15 {
    padding-left: calc(var(--space-unit) * 15) !important;
    padding-right: calc(var(--space-unit) * 15) !important;
}
.px-16 {
    padding-left: calc(var(--space-unit) * 16) !important;
    padding-right: calc(var(--space-unit) * 16) !important;
}
.px-17 {
    padding-left: calc(var(--space-unit) * 17) !important;
    padding-right: calc(var(--space-unit) * 17) !important;
}
.px-18 {
    padding-left: calc(var(--space-unit) * 18) !important;
    padding-right: calc(var(--space-unit) * 18) !important;
}
.px-19 {
    padding-left: calc(var(--space-unit) * 19) !important;
    padding-right: calc(var(--space-unit) * 19) !important;
}
.px-20 {
    padding-left: calc(var(--space-unit) * 20) !important;
    padding-right: calc(var(--space-unit) * 20) !important;
}
.px-21 {
    padding-left: calc(var(--space-unit) * 21) !important;
    padding-right: calc(var(--space-unit) * 21) !important;
}
.px-22 {
    padding-left: calc(var(--space-unit) * 22) !important;
    padding-right: calc(var(--space-unit) * 22) !important;
}
.px-23 {
    padding-left: calc(var(--space-unit) * 23) !important;
    padding-right: calc(var(--space-unit) * 23) !important;
}
.px-24 {
    padding-left: calc(var(--space-unit) * 24) !important;
    padding-right: calc(var(--space-unit) * 24) !important;
}
.px-25 {
    padding-left: calc(var(--space-unit) * 25) !important;
    padding-right: calc(var(--space-unit) * 25) !important;
}
.py-0 {
    padding-top: calc(var(--space-unit) * 0) !important;
    padding-bottom: calc(var(--space-unit) * 0) !important;
}
.py-1 {
    padding-top: calc(var(--space-unit) * 1) !important;
    padding-bottom: calc(var(--space-unit) * 1) !important;
}
.py-2 {
    padding-top: calc(var(--space-unit) * 2) !important;
    padding-bottom: calc(var(--space-unit) * 2) !important;
}
.py-3 {
    padding-top: calc(var(--space-unit) * 3) !important;
    padding-bottom: calc(var(--space-unit) * 3) !important;
}
.py-4 {
    padding-top: calc(var(--space-unit) * 4) !important;
    padding-bottom: calc(var(--space-unit) * 4) !important;
}
.py-5 {
    padding-top: calc(var(--space-unit) * 5) !important;
    padding-bottom: calc(var(--space-unit) * 5) !important;
}
.py-6 {
    padding-top: calc(var(--space-unit) * 6) !important;
    padding-bottom: calc(var(--space-unit) * 6) !important;
}
.py-7 {
    padding-top: calc(var(--space-unit) * 7) !important;
    padding-bottom: calc(var(--space-unit) * 7) !important;
}
.py-8 {
    padding-top: calc(var(--space-unit) * 8) !important;
    padding-bottom: calc(var(--space-unit) * 8) !important;
}
.py-9 {
    padding-top: calc(var(--space-unit) * 9) !important;
    padding-bottom: calc(var(--space-unit) * 9) !important;
}
.py-10 {
    padding-top: calc(var(--space-unit) * 10) !important;
    padding-bottom: calc(var(--space-unit) * 10) !important;
}
.py-11 {
    padding-top: calc(var(--space-unit) * 11) !important;
    padding-bottom: calc(var(--space-unit) * 11) !important;
}
.py-12 {
    padding-top: calc(var(--space-unit) * 12) !important;
    padding-bottom: calc(var(--space-unit) * 12) !important;
}
.py-13 {
    padding-top: calc(var(--space-unit) * 13) !important;
    padding-bottom: calc(var(--space-unit) * 13) !important;
}
.py-14 {
    padding-top: calc(var(--space-unit) * 14) !important;
    padding-bottom: calc(var(--space-unit) * 14) !important;
}
.py-15 {
    padding-top: calc(var(--space-unit) * 15) !important;
    padding-bottom: calc(var(--space-unit) * 15) !important;
}
.py-16 {
    padding-top: calc(var(--space-unit) * 16) !important;
    padding-bottom: calc(var(--space-unit) * 16) !important;
}
.py-17 {
    padding-top: calc(var(--space-unit) * 17) !important;
    padding-bottom: calc(var(--space-unit) * 17) !important;
}
.py-18 {
    padding-top: calc(var(--space-unit) * 18) !important;
    padding-bottom: calc(var(--space-unit) * 18) !important;
}
.py-19 {
    padding-top: calc(var(--space-unit) * 19) !important;
    padding-bottom: calc(var(--space-unit) * 19) !important;
}
.py-20 {
    padding-top: calc(var(--space-unit) * 20) !important;
    padding-bottom: calc(var(--space-unit) * 20) !important;
}
.py-21 {
    padding-top: calc(var(--space-unit) * 21) !important;
    padding-bottom: calc(var(--space-unit) * 21) !important;
}
.py-22 {
    padding-top: calc(var(--space-unit) * 22) !important;
    padding-bottom: calc(var(--space-unit) * 22) !important;
}
.py-23 {
    padding-top: calc(var(--space-unit) * 23) !important;
    padding-bottom: calc(var(--space-unit) * 23) !important;
}
.py-24 {
    padding-top: calc(var(--space-unit) * 24) !important;
    padding-bottom: calc(var(--space-unit) * 24) !important;
}
.py-25 {
    padding-top: calc(var(--space-unit) * 25) !important;
    padding-bottom: calc(var(--space-unit) * 25) !important;
}