:root {
    --heading-font-family: 'Bitter', serif;
    --body-font-family: 'Roboto', sans-serif;

    --primary-100: #ea3913;
    --primary-200: #f78f6a;
    --primary-300: #550a31;

    --secondary-100: #f5a623;
    --secondary-200: #ffe1a8;
    --secondary-300: #c27c0e;

    --tertiary-100: #db0c62;
    --tertiary-200: #ec9fc9;
    --tertiary-300: #801e47;

    --accent-100: #ffedeb;
    --accent-200: #f1c7b8;
    --accent-300: #550a31;

    --neutral-050: #ffffff;
    --neutral-100: #f6f9fb;
    --neutral-200: #e9eff2;
    --neutral-300: #d4dbe0;
    --neutral-400: #b7c2ca;
    --neutral-500: #8f9aa3;
    --neutral-600: #6b747c;
    --neutral-700: #474e54;
    --neutral-800: #2e3438;
    --neutral-900: #000000;

    --page-background-color: var(--neutral-050);

    --color-header-1: var(--primary-300);
    --color-header-2: var(--primary-100);
    --color-text-default: var(--neutral-800);
    --color-text-light: var(--neutral-050);
    --color-text-muted: var(--neutral-500);

    --body-font-size: clamp(0.8125rem, 1.6vw, 1rem); /* 13px - 16px */

    --heading-1-size: clamp(1.9375rem, 4.5vw, 3.0625rem); /* 31px - 49px */
    --heading-2-size: clamp(1.6875rem, 3.9vw, 2.625rem); /* 27px - 42px */
    --heading-3-size: clamp(1.4375rem, 2.5vw, 1.6875rem); /* 23px - 27px */
    --heading-4-size: clamp(1.25rem, 2vw, 1.5rem); /* 20px - 24px */
    --heading-5-size: clamp(1.125rem, 1.6vw, 1.3125rem); /* 18px - 21px */

    --width-100: 100%;
    --width-lg: 1420px;
    --width-md: 1140px;
    --width-sm: 960px;
  
    --gutter: clamp(1.5em, 4vw, 3em);

    --section-padding: clamp(3.75em, 7.82vw, 6.25em); /* 60px - 100px */
    --element-padding: clamp(1em, 2vw, 1.5em); /* 16px - 24px */
    
    --border-radius-sm: 0.5rem; /* 4px */
    --border-radius-md: 0.8rem; /* 12px */
    --border-radius-lg: 1.5rem; /* 24px */
    --border-radius-xl: 2.125rem; /* 34px */
}

@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''), url('/assets/fonts/bitter-regular.woff2') format('woff2'), url('/assets/fonts/bitter-regular.woff') format('woff');
}

@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''), url('/assets/fonts/bitter-bold.woff2') format('woff2'), url('/assets/fonts/bitter-bold.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local(''), url('/assets/fonts/Roboto-Light.woff2') format('woff2'), url('/assets/fonts/roboto-light.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''), url('/assets/fonts/roboto-regular.woff2') format('woff2'), url('/assets/fonts/roboto-regular.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''), url('/assets/fonts/roboto-bold.woff2') format('woff2'), url('/assets/fonts/roboto-bold.woff') format('woff');
}

html { font-size: 100%; scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--primary-100); outline-offset: 2px; }
* { scroll-margin-top: var(--section-padding); scroll-margin-bottom: var(--section-padding); }
::selection { background-color: var(--primary-100); color: var(--neutral-050); }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    line-height: 1.6;
    color: var(--color-text-default);
    background-color: var(--page-background-color);
}

*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    box-sizing: border-box;
}

.skip {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1111111;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { line-height: 1.2; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-family: var(--heading-font-family); font-weight: 700; }
h5, .h5, h6, .h6, p, a, ul, ol, li { font-family: var(--body-font-family); font-weight: 400; }

h1, .h1, h2, .h2 { color: var(--color-header-1); }
h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--color-header-2); }

h1, .h1 { font-size: var(--heading-1-size); }
h2, .h2 { font-size: var(--heading-2-size); }
h3, .h3 { font-size: var(--heading-3-size); }
h4, .h4, h5, .h5 { font-size: var(--heading-4-size); }
h6, .h6 { font-size: var(--heading-5-size); }

main :is(h1:not(:last-child), h2:not(:last-child), .h1:not(:last-child), .h2:not(:last-child)),
footer :is(h1:not(:last-child), h2:not(:last-child), .h1:not(:last-child), .h2:not(:last-child)) { margin-bottom: 1rem; }

main :is(h3:not(:last-child), h4:not(:last-child), h5:not(:last-child), h6:not(:last-child),
p:not(:last-child), ul:not(:last-child), ol:not(:last-child), blockquote:not(:last-child),
code:not(:last-child), pre:not(:last-child), abbr:not(:last-child), details:not(:last-child),
.h3:not(:last-child), .h4:not(:last-child), .h5:not(:last-child), .h6:not(:last-child), .button-wrapper:not(:last-child), form:not(:last-child)), 
footer :is(h3:not(:last-child), h4:not(:last-child), h5:not(:last-child), h6:not(:last-child),
p:not(:last-child), ul:not(:last-child), ol:not(:last-child), blockquote:not(:last-child),
code:not(:last-child), pre:not(:last-child), abbr:not(:last-child), details:not(:last-child),
.h3:not(:last-child), .h4:not(:last-child), .h5:not(:last-child), .h6:not(:last-child), .button-wrapper:not(:last-child), form:not(:last-child)) {
  margin-bottom: 1.25rem;
}

strong, b { font-weight: bold; }
em, cite, i, q { font-style: italic; }
s { text-decoration: line-through; }
u { text-decoration: underline; font-style: normal; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
del { color: var(--color-text-muted); background: var(--neutral-200); text-decoration: line-through; padding: 0.1em 0.3em; }
ins { background: var(--neutral-200); text-decoration: underline; padding: 0.1em 0.3em; }
mark { background: var(--secondary-200); padding: 0.1em 0.3em; }

blockquote {
    font-family: var(--body-font-family);
    font-size: var(--heading-5-size);
    color: var(--color-text-muted);
    background-color: var(--neutral-200);
    border-left: 4px solid var(--primary-100);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
}

blockquote p { margin: 0; }

code, pre { font-family: 'Courier New', Courier, monospace; font-size: .9rem; border-radius: var(--border-radius-sm); }

pre {
    color: var(--color-text-default);
    background-color: var(--neutral-200);
    padding: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
}

code { background-color: var(--neutral-800); color: var(--primary-200); padding: 0.25rem 0.5rem; }
pre:has(code) { color: var(--neutral-200); background-color: var(--neutral-800); }
pre code { background-color: none; padding: none; }

abbr {
    text-decoration: underline dotted;
    font-style: italic;
    cursor: help;
    transition: color 0.2s ease;
}

abbr:hover { color: var(--primary-100); }

details {
    font-family: var(--body-font-family);
    background-color: var(--neutral-200);
    padding: 1rem;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.3s ease;
}

details summary {
    font-weight: bold;
    cursor: pointer;
    color: var(--primary-100);
    padding-bottom: 0.5rem;
}

details[open] { background-color: var(--neutral-300); }

table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    color: var(--color-text-default);
    margin: 2rem 0;
}

thead { background-color: var(--neutral-200); }

th, td {
    border: 1px solid var(--neutral-300);
    padding: 0.65rem 0.9rem;
    text-align: left;
    vertical-align: top;
}

th {
    font-weight: bold;
    color: var(--primary-300);
    background-color: var(--neutral-200);
}

picture, img, svg, iframe, video { max-width: 100%; display: block; }

.button-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    row-gap: 1rem;
}

a:not([class]) { color: var(--primary-100); font-weight: bold; transition: color .2s ease; }
a:not([class]):hover { color: var(--primary-300); }
a:hover, .btn-primary:hover, .btn-secondary:hover, .btn-tertiary:hover, button:hover, .btn-readmore:hover { cursor: pointer; }

.btn-primary, .btn-secondary, .btn-tertiary, button, input[type="submit"], input[type="reset"] {
    display: inline-block;
    padding: .85rem 1.65rem;
    width: auto;
    font-size: var(--body-font-size);
    font-weight: bold;
    line-height: 1.7;
    border-radius: var(--border-radius-xl);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn-primary, button, input[type="submit"] { color: var(--neutral-050); background-color: var(--primary-100); }
.btn-secondary { color: var(--neutral-050); background-color: var(--secondary-100); }
.btn-tertiary { color: var(--neutral-050); background-color: var(--tertiary-100); }

.btn-primary:hover, button:hover, input[type="submit"]:hover { background-color: var(--primary-300); }
.btn-secondary:hover { background-color: var(--secondary-300); }
.btn-tertiary:hover { background-color: var(--tertiary-300); }

.btn-primary.outline, .btn-secondary.outline, .btn-tertiary.outline, button.outline, input[type="submit"].outline { background-color: transparent; }
.btn-primary.outline, button.outline, input[type="submit"].outline { color: var(--primary-100); box-shadow: 0px 0px 0px 2px var(--primary-100); }
.btn-secondary.outline { color: var(--secondary-100); box-shadow: 0px 0px 0px 2px var(--secondary-100); }
.btn-tertiary.outline { color: var(--tertiary-100); box-shadow: 0px 0px 0px 2px var(--tertiary-100); }

.btn-primary.outline:hover, button.outline:hover, input[type="submit"].outline:hover { color: var(--primary-300); box-shadow: 0px 0px 0px 3px var(--primary-300); }
.btn-secondary.outline:hover { color: var(--secondary-300); box-shadow: 0px 0px 0px 3px var(--secondary-300); }
.btn-tertiary.outline:hover { color: var(--tertiary-300); box-shadow: 0px 0px 0px 3px var(--tertiary-300); }

.btn-readmore {
    position: relative;
    color: var(--primary-100);
    padding: .425rem .125rem;
    transition: color .2s ease, transform .2s ease;
}

.btn-readmore:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-100);
    transform-origin: left;
    transition: transform .2s ease;
}

.btn-readmore:hover { color: var(--primary-300); }
.btn-readmore:hover:after { transform: scaleX(0); }

input[type="reset"] { color: var(--color-text-muted); background-color: var(--neutral-300); }

form, fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: var(--element-padding);
    border: none;
}

input, select, textarea {
    display: block;
    padding: 0.75rem 1rem;
    font-size: var(--body-font-size);
    font-family: var(--body-font-family);
    border-radius: var(--border-radius-lg);
    box-shadow: 0px 0px 0px 1px var(--neutral-300);
    background-color: var(--neutral-050);
    color: var(--color-text-default);
    width: 100%;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="color"] {
    padding: .35rem;
    border-radius: var(--border-radius-md);
    box-shadow: 0px 0px 0px 1px var(--neutral-300);
    background-color: var(--neutral-050);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="range"] { box-shadow: none; background-color: none; }
input[type="file"] { padding: var(--element-padding); color: var(--color-text-muted); background-color: var(--neutral-300); }

label {
    display: block;
    font-weight: bold;
    color: var(--color-header-1);
    margin-bottom: 0.25rem;
    width: 100%;
}

input:not([type="range"]):not([type="checkbox"]):not([type="file"]):not([type="radio"]):hover, select:hover, textarea:hover { box-shadow: 0 0 0 1px var(--primary-100); }
input:not([type="range"]):not([type="checkbox"]):not([type="file"]):not([type="radio"]):focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--primary-100); }
input[type="file"]:hover { background-color: var(--neutral-400); }
input[type="file"]:focus { box-shadow: 0 0 0 3px var(--neutral-600); background-color: var(--neutral-400); }

input[type="checkbox"], input[type="radio"] {
    flex-basis: auto;
    width: auto;
    margin-right: 0.5rem;
}

textarea { padding: 1rem; min-height: 220px; resize: vertical; }
label.required::after { content: '*'; color: var(--primary-100); margin-left: 0.25em; }
.form-group { flex-basis: 100%; max-width: 100%; }

/* navbar styling */
.navbar.light {
    --nav-bg: var(--neutral-050);
    --nav-text: var(--neutral-900);
    --nav-submenu-bg: var(--neutral-050);
    --nav-submenu-text: var(--neutral-800);
}

.navbar.accent-light {
    --nav-bg: var(--accent-100);
    --nav-text: var(--neutral-900);
    --nav-submenu-bg: var(--neutral-050);
    --nav-submenu-text: var(--neutral-800);
}

.navbar.accent {
    --nav-bg: var(--accent-200);
    --nav-text: var(--accent-300);
    --nav-submenu-bg: var(--neutral-050);
    --nav-submenu-text: var(--accent-300);
}

.navbar.accent-dark {
    --nav-bg: var(--accent-300);
    --nav-text: var(--neutral-050);
    --nav-submenu-bg: var(--neutral-050);
    --nav-submenu-text: var(--neutral-800);
}

.navbar.dark {
    --nav-bg: var(--neutral-900);
    --nav-text: var(--neutral-050);
    --nav-submenu-bg: var(--neutral-800);
    --nav-submenu-text: var(--neutral-200);
}

.navbar {
    display: block;
    width: 100%;
    z-index: 99;
    background-color: var(--nav-bg);
}

.navbar.sticky { position: sticky; top: 0; left: 0; }
.navbar.full .nav-container { width: var(--width-100); }
.navbar.lg .nav-container { width: var(--width-lg); }
.navbar.md .nav-container { width: var(--width-md); }
.navbar.sm .nav-container { width: var(--width-sm); }

.nav-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    margin-inline: auto;
    max-width: 100%;
}

.nav-container > nav { display:flex; flex-direction: row; align-items: center; margin-left: auto; }
.navmenu, .nav-item, .nav-submenu-1, .nav-submenu-2 { list-style-type: none; }

.navmenu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.825rem;
}

.nav-item { position: relative; }
.navmenu .nav-link { transition: color .2s ease, background-color .2s ease; color: var(--nav-text); }
.navmenu > .nav-item > .nav-link { display: block; padding: 1.125rem 0.25rem; }

.nav-submenu-1 {
    background-color: var(--nav-submenu-bg);
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 8rem;
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
    box-shadow: 0 6px 8px rgba(0, 0, 0, .15);
    transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
}

.navmenu > .nav-item:hover .nav-submenu-1 { opacity: 1; visibility: visible; transform: scaleY(1); }
.nav-submenu-1 > .nav-item > .nav-link { display: block; padding: 0.5rem 0.875rem; color: var(--nav-submenu-text); }
.navbar .nav-link.active { color: var(--primary-100); }

.hamburger-menu {
    position: relative;
    padding: 1.175rem 1rem;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.hamburger-menu span:not([class]), .hamburger-menu span:not([class])::before, .hamburger-menu span:not([class])::after {
    content: '';
    display: block;
    position: absolute;
    background-color: var(--nav-text);
    width: 40px;
    height: 5px;
    border-radius: 5px;
    margin-top: -3px;
    transition: background-color .1s ease, margin 0.3s ease, transform 0.3s ease;
}

.hamburger-menu span:not([class])::before { margin-top: -13px; }
.hamburger-menu span:not([class])::after { margin-top: 13px; }

.hamburger-menu.open span:not([class]) { background-color: transparent; transform: rotate(270deg); }
.hamburger-menu.open span:not([class])::before { margin-top: 0; transform: rotate(45deg); }
.hamburger-menu.open span:not([class])::after { margin-top: 0; transform: rotate(-45deg); }

/* end navbar styling */

.container, .row, .col, .card { display: flex; }
.container, .col, .card { flex-direction: column; }
.row { flex-direction: row; flex-wrap: wrap; }

.container {
    width: var(--width-100);
    margin-inline: auto;
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

.row { margin-inline: auto; flex-direction: row; flex-wrap: wrap; max-width: 100%; }
.container.full .row { width: var(--width-100); }
.container.lg .row { width: var(--width-lg); }
.container.md .row { width: var(--width-md); }
.container.sm .row { width: var(--width-sm); }

.col { flex: 1 1 0%; }
[class*="col-xs-"] { flex: 0 0 auto; }
.col-xs-1-1 { width: 100%; }
.col-xs-2-1 { width: 50%; }
.col-xs-3-1 { width: 33.3333%; }
.col-xs-4-1 { width: 25%; }
.col-xs-5-1 { width: 20%; }
.col-xs-6-1 { width: 16.6667%; }

.visually-hidden { display: none; opacity: 0; visibility: hidden; }

/* Breakpoints - min-width */
@media (min-width: 768px) {
    .col-s-1-1 { width: 100%; }
    .col-s-2-1 { width: 50%; }
    .col-s-3-1 { width: 33.3333%; }
    .col-s-4-1 { width: 25%; }
    .col-s-5-1 { width: 20%; }
    .col-s-6-1 { width: 16.6667%; }
}

@media (min-width: 992px) {
    .col-m-1-1 { width: 100%; }
    .col-m-2-1 { width: 50%; }
    .col-m-3-1 { width: 33.3333%; }
    .col-m-4-1 { width: 25%; }
    .col-m-5-1 { width: 20%; }
    .col-m-6-1 { width: 16.6667%; }
}

@media (min-width: 1200px) {
    .col-l-1-1 { width: 100%; }
    .col-l-2-1 { width: 50%; }
    .col-l-3-1 { width: 33.3333%; }
    .col-l-4-1 { width: 25%; }
    .col-l-5-1 { width: 20%; }
    .col-l-6-1 { width: 16.6667%; }
}

@media (min-width: 1440px) {
    .col-xl-1-1 { width: 100%; }
    .col-xl-2-1 { width: 50%; }
    .col-xl-3-1 { width: 33.3333%; }
    .col-xl-4-1 { width: 25%; }
    .col-xl-5-1 { width: 20%; }
    .col-xl-6-1 { width: 16.6667%; }
}