:root {
    --kowcha-green: #0a2f35;
    --light-blue: #f5f9fc;
    --lighter-green: #f4f5f6;
    --secondary-1: #f7a325;
    --secondary-1-dark: #e49217;
    --secondary-2: #f56038;
    --secondary-3: #ffca7a;
}
.bg-kowcha-green {
    background-color: var(--kowcha-green);
}
.text-kowcha-green {
    color: var(--kowcha-green);
}

.bg-lighter-green {
    background-color: var(--lighter-green);
}

body,
html {
    color: var(--kowcha-green);
    background-color: var(--light-blue);
    font-family: "Inter", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: "Inter", sans-serif;
}

.weight-100 {
    font-weight: 100;
}
.weight-200 {
    font-weight: 200;
}
.weight-300 {
    font-weight: 300;
}
.weight-400 {
    font-weight: 400;
}
.weight-500 {
    font-weight: 500;
}
.weight-600 {
    font-weight: 600;
}
.weight-700 {
    font-weight: 700;
}
.weight-800 {
    font-weight: 800;
}
.weight-900 {
    font-weight: 900;
}

.width-A {
    max-width: 800px;
    margin: 0 auto;
}

a.navbar-brand {
    max-width: 150px;
    width: 100%;
}

.hero-wrapper {
    background: #fff;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(245, 249, 252, 1) 100%
    );
}

body.signup .hero-wrapper {
    background: var(--kowcha-green);
}

img.icon-A {
    max-width: 60px;
}

figure.navbar-figure img {
    max-width: 180px;
}
figure.navbar-figure {
    padding-top: 1em;
}

figure.footer-figure img {
    max-width: 120px;
}

figure.hero-figure {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em !important;
}

.btn-primary {
    --x-btn-color: #fff;
    --x-btn-bg: var(--secondary-1);
    --x-btn-border-color: var(--secondary-1);
    --x-btn-hover-color: #fff;
    --x-btn-hover-bg: var(--secondary-1);
    --x-btn-hover-border-color: var(--secondary-1);
    --x-btn-focus-shadow-rgb: 116, 120, 247;
    --x-btn-active-color: #fff;
    --x-btn-active-bg: var(--secondary-1);
    --x-btn-active-border-color: var(--secondary-4);
    --x-btn-active-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    --x-btn-disabled-color: #fff;
    --x-btn-disabled-bg: var(--secondary-1);
    --x-btn-disabled-border-color: var(--secondary-1);
}
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-check:hover + .btn-primary,
.btn-primary:hover {
    color: #fff;
    background-color: var(--secondary-1-dark);
    border-color: var(--secondary-1-dark);
    box-shadow: 0 0 0 0.25rem rgba(235, 235, 235, 0.5);
}

.light-mode .btn-primary {
    --x-btn-color: #fff;
    --x-btn-bg: var(--kowcha-green);
    --x-btn-border-color: var(--kowcha-green);
    --x-btn-hover-color: #fff;
    --x-btn-hover-bg: var(--kowcha-green);
    --x-btn-hover-border-color: var(--kowcha-green);
    --x-btn-focus-shadow-rgb: 116, 120, 247;
    --x-btn-active-color: #fff;
    --x-btn-active-bg: var(--kowcha-green);
    --x-btn-active-border-color: var(--secondary-4);
    --x-btn-active-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    --x-btn-disabled-color: #fff;
    --x-btn-disabled-bg: var(--kowcha-green);
    --x-btn-disabled-border-color: var(--kowcha-green);
}

.light-mode .btn-check:focus + .btn-primary,
.light-mode .btn-primary:focus,
.light-mode .btn-check:hover + .btn-primary,
.light-mode .btn-primary:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;
    box-shadow: 0 0 0 0.25rem rgba(235, 235, 235, 0.5);
}

.cta_card {
    background: var(--kowcha-green) !important;
}
.light-mode .cta_card {
    background: var(--secondary-1) !important;
}
.card.vp-card {
    border: 0px;
    /* background: rgb(3 27 30 / 25%); */
    background-color: transparent;
    color: #fdf0d2;
}
.card.vp-card .card-body {
    padding: 1em 2em;
}
p.footer-1 {
    opacity: 0.5;
}
.form-wrapper-X form {
    margin: 0 auto;
}

@media (max-width: 767px) {
    figure.hero-figure {
        max-width: 190px;
        margin-bottom: 1em !important;
    }
    .hero-wrapper {
        text-align: center;
    }
    figure.navbar-figure img {
        max-width: 120px;
    }
    .hero-wrapper h1 {
        font-size: 2em;
    }
    .hero-wrapper .h3 {
        font-size: 1em;
    }
    .cta_card span.chini {
        display: block !important;
    }
    .cta_card span.kando {
        display: none !important;
    }
    .cta-container.container.mw-screen-xl {
        padding: 0px;
    }
    img.icon-A {
        max-width: 50px;
    }
    ul.checklist-A span.h3 {
        font-size: 1em;
    }
}