:root {
    --components-button-text-on-dark: #FFF;
    --components-card-border: #E2E8F0;
    --components-card-background: #FFF;
    --components-menu-background-default: #FFFFFF;
    --global-divider: #E2E8F0;
    --global-text-neutral-primary: #0F172A;
    --global-text-on-dark-primary: #FFFFFF;
    --global-text-primary: #0F172A;
    --global-text-secondary: #64748B;
    --link-default: #2196F3;
    --margins-xxsmall: 16px;
    --margins-xsmall: 24px;
    --margins-small: 28px;
    --margins-medium: 48px;
    --margins-large: 64px;
    --margins-xlarge: 72px;
    --margins-xxlarge: 96px;
    --rounding-default: 0px;
    --surface-default: #FFF;
    --surface-info: #F8FAFC;
    --text-theme-green: #1B4A32;
    --theme-green-dark: #1B4A32;
    --theme-green-light: rgba(27, 74, 50, 0.20);
    --theme-primary-blue-dark: #2400FF;
    --theme-primary-blue-light: rgba(36, 0, 255, 0.20);
    --theme-primary-green-dark: #1B4A32;
    --theme-primary-red-dark: #FB3B3B;
    --theme-primary-red-light: rgba(251, 59, 59, 0.20);
    --theme-primary-yellow-dark: #FFA800;
    --theme-primary-yellow-light: rgba(255, 168, 0, 0.20);
    --theme-primary-purple-dark: #6b46c1;
    --theme-primary-purple-light: rgba(107, 70, 193, 0.40);

    --viewport-width-small: 576px;
    --viewport-width-medium: 768px;
    --viewport-width-large: 992px;
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

section.default {
    margin: var(--margins-large) 0 0 243px;
    max-width: 686px;
}
@media screen and (max-width: 576px) {
    section.default {
        margin-left: 48px;
    }
}

/* header styles */

header {
    color: var(--theme-primary-green-dark);
    background-color: var(--components-menu-background-default);
    border-bottom: 1px solid var(--global-divider);
    background: var(--surface-default);
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.09);
}

header nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 16px;
}

header nav a {
    color: var(--theme-primary-green-dark);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

header nav a svg {
    color: var(--text-theme-green);
}

/* content section styles */

h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 48px; /* 100% */
    letter-spacing: -0.576px;
}

h1.page-title {
    margin-top: var(--margins-xxlarge);
    margin-left: -32px;
}

@media screen and (max-width: 576px) {
    h1.page-title {
        margin-top: var(--margins-medium);
    }
}

h2 {
    font-size: 30px;
    font-weight: 600;
    line-height: 36px; /* 120% */
    letter-spacing: -0.225px;
}

h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px; /* 133.333% */
    letter-spacing: -0.144px;
}

h4 {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
    letter-spacing: -0.1px;
}

p {
    color: var(--global-text-neutral-primary);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
}

p.large {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
}

.centered {
    text-align: center;
}

.underlined-header {
    background-repeat: repeat-x;
    background-position: 0 0.8em;
    background-size: 100% 15px;
    padding: 0 0.6em;
}

.large .underlined-header {
    background-size: 100% 8px;
}

@media screen and (max-width: 576px) {
    .underlined-header {
        background-size: 100% 12px;
    }
    h1 {
        font-size: 30px;
        line-height: 36px;
        font-weight: 600;
        letter-spacing: -0.225px;
    }
}

a.default {
    color: var(--link-default);
    text-decoration: none;
}
a.button {
    display: inline-flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--text-theme-green, #1B4A32);
    border: 1px solid var(--text-theme-green, #1B4A32);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
}



.outlink {
    display: flex;
    align-items: center;
    margin-left: 16px;
    gap: 8px;
    color: var(--link-default);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.subtle-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.list-item {
    display: flex;
    align-items: flex-start;
}
.list-item p {
    margin-top: 0;
}

.list-marker.icon {
    flex: 0 0 var(--margins-large);
    padding-top: 0.1em;
}
.list-marker.icon.indented {
    flex: 0 0 52px;
    padding: 0.1em 0 0 var(--margins-xxsmall);
}
.list-marker.icon svg {
    min-width: 24px;
    min-height: 24px;
}

.list-marker.big-text {
    flex: 0 0 var(--margins-large);
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.576px;
    min-height: 72px;
}

.table-of-contents h4 {
    margin: var(--margins-large) 0 16px 0;
}
.table-of-contents .list-marker {
    width: 24px;
    margin: 0 8px 0 16px;
    line-height: 24px;
}
.table-of-contents .list-item a {
    color: var(--link-default);
    text-decoration: none;
    line-height: 24px;
}
.section-color-bar {
    height: 15px;
    width: 91px;
    margin: 0 0 0 -32px;
}

.collapsible {
    display: flex;
    padding-bottom: 16px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    background: var(--global-background-default, #FFF);
    box-shadow: 0px -1px 0px 0px #E2E8F0 inset;
}
.collapsible .title {
    display: flex;
    padding: 16px 0px;
    align-items: center;
    gap: 18px;
    align-self: stretch;
}
.collapsible .title span {
    flex: 1 0 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}
.collapsible .content {
    align-self: stretch;
}

#controls {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center */
    justify-content: center; /* Vertically center */
    gap: 64px; /* Space between elements in the column */
    height: 100px; /* Adjust height as needed */
    padding: 16px; /* Add some padding */
    box-sizing: border-box; /* Ensure padding is included in total width/height */
}

/* section coloring */

section.red .underlined-header {
    background-image: linear-gradient(to right, var(--theme-primary-red-light), var(--theme-primary-red-light));
}
section.yellow .underlined-header {
    background-image: linear-gradient(to right, var(--theme-primary-yellow-light), var(--theme-primary-yellow-light));
}
section.blue .underlined-header {
    background-image: linear-gradient(to right, var(--theme-primary-blue-light), var(--theme-primary-blue-light));
}
section.green .underlined-header {
    background-image: linear-gradient(to right, var(--theme-green-light), var(--theme-green-light));
}
section.purple .underlined-header {
    background-image: linear-gradient(to right, var(--theme-primary-purple-light), var(--theme-primary-purple-light));
}

section.red .section-color-bar {
    background-color: var(--theme-primary-red-light);
}
section.yellow .section-color-bar {
    background-color: var(--theme-primary-yellow-light);
}
section.blue .section-color-bar {
    background-color: var(--theme-primary-blue-light);
}
section.green .section-color-bar {
    background-color: var(--theme-green-light);
}
section.purple .section-color-bar {
    background-color: var(--theme-primary-purple-light);
}

section.red .list-marker {
    color: var(--theme-primary-red-dark);
}
section.yellow .list-marker {
    color: var(--theme-primary-yellow-dark);
}
section.blue .list-marker {
    color: var(--theme-primary-blue-dark);
}
section.green .list-marker {
    color: var(--theme-primary-green-dark);
}
section.purple .list-marker {
    color: var(--theme-primary-purple-dark);
}

/* footer styles */

footer {
    position: relative; /* Ensure it's part of the document flow */
    width: 100%; /* Span the entire width */
    color: var(--global-text-on-dark-primary);
    background-color: var(--theme-primary-green-dark); /* Dark green */
    box-sizing: border-box; /* Include padding in height calculation */
    margin-top: 120px; /* Optional spacing from content */
}

/* body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body spans the viewport
} */

/*
main {
    flex: 1; /* Push the footer to the bottom if content is short
}
 */


footer nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 64px;
    padding: var(--margins-medium) var(--margins-xlarge);
}

@media screen and (max-width: 576px) {
    footer nav {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

footer nav a {
    color: var(--global-text-on-dark-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

footer .copyright {
    font-size: 12px;
    font-weight: 500;
    flex-grow: 1;
    text-align: right;
    line-height: 3em;
}

footer svg {
    color: var(--global-text-on-dark-primary);
}

.btn-outline {
    position: relative;
    z-index: 10; 
    display: inline-flex; /* Align the SVG and text inline */
    align-items: center; /* Vertically center the contents */
    justify-content: center; /* Center-align the text and SVG */
    border: 1px solid #004d36; /* Match the border color to the background green */
    background-color: transparent; /* No fill */
    color: #004d36; /* Green text color to match the border */
    padding: 0.5rem 1rem; /* Add some padding */
    font-size: 1rem; /* Adjust font size */
    font-weight: bold; /* Make the text bold */
    text-decoration: none; /* Remove underline */
    border-radius: 0; /* 90-degree edges */
    cursor: pointer; /* Pointer cursor for hover effect */
    transition: all 0.3s ease; /* Smooth hover transition */
}

.btn-outline:hover {
    background-color: #004d36; /* Green background on hover */
    color: #fff; /* White text on hover */
    text-decoration: none; /* Prevent underline on hover */
}

.btn-outline svg {
    margin-right: 0.5rem; /* Add spacing between the icon and text */
    fill: currentColor; /* Inherit the text color for the SVG icon */
    width: 1rem; /* Adjust SVG size */
    height: 1rem;
}
.btn-inverse {
    display: inline-flex; /* Align the SVG and text inline */
    align-items: center; /* Vertically center the contents */
    justify-content: center; /* Center-align the text and SVG */
    border: 1px solid #fff; /* White border */
    background-color: transparent; /* No fill */
    color: #fff; /* White text color */
    padding: 0.5rem 1rem; /* Add some padding */
    font-size: 1rem; /* Adjust font size */
    font-weight: bold; /* Make the text bold */
    text-decoration: none; /* Remove underline */
    border-radius: 0; /* 90-degree edges */
    cursor: pointer; /* Pointer cursor for hover effect */
    transition: all 0.3s ease; /* Smooth hover transition */
}

.btn-inverse:hover {
    background-color: #fff; /* White background on hover */
    color: #004d36; /* Green text on hover */
    text-decoration: none; /* Prevent underline on hover */
}

.btn-inverse svg {
    margin-right: 0.5rem; /* Add spacing between the icon and text */
    fill: currentColor; /* Inherit the text color */
    width: 1rem; /* Adjust SVG size */
    height: 1rem;
}