:root {
    --primary:       #1F3A30;
    --primary-dark:  #183028;
    --bg-light:      #F2F8F4;
    --accent:        #59A187;
    --muted:         #828282;
    --text-dark:     #454545;

    --logo-height: 50px;

    --pill-1-bg:     #59A187;
    --pill-1-color:  #000;
    --pill-2-bg:     #E8C475;
    --pill-2-color:  #000;
    --pill-3-bg:     #F2F8F4;
    --pill-3-color:  #1F3A30;

    /* Bootstrap overrides */
    --bs-body-bg:    #F2F8F4;
    --bs-body-color: #454545;
}

h1, h2, h3, h4, h5, h6{
    font-family: "Lora", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 600 !important;
    font-style: italic !important;
}

body {
    background: var(--bg-light);
    font-family: 'Syne', sans-serif;
    color: var(--text-dark);
}

.btn:hover {
    transition: 0.25s all;
    transform: translateY(-2px);
}

.bg-primary {
    background: var(--primary) !important;
}

.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.btn-secondary {
    background: #e6e6e6 !important;
    border-color: #e6e6e6 !important;
    color: #000 !important;
}

.formsImg {
    background-position: center !important;
}