@charset "UTF-8";
*, *:before, *:after { box-sizing: border-box; }

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; text-size-adjust: none; }

footer, header, nav, section, main { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

input { -webkit-appearance: none; border-radius: 0; }

:root { /* below the base */ --font-size-2b: 0.6875rem; --font-size-1b: 0.875rem; /* the base */ --font-size: 1.125rem; /* above the base */ --font-size-1: 1.4375rem; --font-size-2: 1.8125rem; --font-size-3: 2.25rem; --font-size-4: 2.8125rem; --font-size-5: 3.5625rem; --font-size-6: 4.5rem; }

/* --- Line Heights --- */
:root { /* below the base */ --line-height-2b: 1.4545; --line-height-1b: 1.4286; /* the base */ --line-height: 1.3333; /* above the base */ --line-height-1: 1.2174; --line-height-2: 1.2414; --line-height-3: 1.2222; --line-height-4: 1.1556; --line-height-5: 1.1228; --line-height-6: 1.1111; }

/* --- Letter Spacings --- */
:root { /* below the base */ --letter-space-2b: 0.0764em; --letter-space-1b: 0.0536em; /* the base */ --letter-space: 0.035em; /* above the base */ --letter-space-1: 0.0209em; --letter-space-2: 0.0103em; --letter-space-3: 0.0025em; --letter-space-4: -0.004em; --letter-space-5: -0.0095em; --letter-space-6: -0.0137em; }

:root { /* --- Colors --- */ --color-primary: #213b4e; --color-secondary: #cecece; --color-background: #f5fbff; /* --- Font Families --- */ --font-family-sans: 'Inter', sans-serif; --font-family-serif: 'Lora', serif; }

body { font-size: var(--font-size); line-height: var(--line-height); letter-spacing: var(--letter-space); background-color: var(--color-background); transition: background-color 1.6s ease; }

/* --- Headers --- */
:is(h1, h2, h3) { font-weight: 500; }

h1 { font-size: var(--font-size-6); line-height: var(--line-height-6); letter-spacing: var(--letter-space-6); font-family: var(--font-family-serif); font-weight: 400; color: var(--color-primary); }

h2 { font-size: var(--font-size-4); line-height: var(--line-height-4); letter-spacing: var(--letter-space-4); font-family: var(--font-family-serif); font-weight: 400; color: var(--color-primary); }

h3 { font-size: var(--font-size-1); line-height: var(--line-height-1); letter-spacing: var(--letter-space-1); font-family: var(--font-family-serif); }

p { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size); margin-bottom: 1rem; color: var(--color-primary); }

em { font-style: italic; color: var(--color-primary); }

strong { font-weight: 600; }

a { color: #077ed3; text-decoration: none; transition: color 0.3s ease; }

ul { font-family: var(--font-family-sans); font-size: var(--font-size); color: var(--color-primary); }

li { color: var(--color-primary); }

/* --- Alternative Text Sizes --- */
:is(p, span, a, ul, ol, dl, li, dt, dd, label, blockquote, code).small-text { font-size: var(--font-size-1b); line-height: var(--line-height-1b); letter-spacing: var(--letter-space-1b); }
:is(p, span, a, ul, ol, dl, li, dt, dd, label, blockquote, code).large-text { font-size: var(--font-size-1); line-height: var(--line-height-1); letter-spacing: var(--letter-space-1); }
:is(p, span, a, ul, ol, dl, li, dt, dd, label, blockquote, code).xlarge-text { font-size: var(--font-size-2); line-height: var(--line-height-2); letter-spacing: var(--letter-space-2); }

.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; }

.hero { text-align: center; }

.logo img { max-height: 100px; width: 100%; margin: 0 auto; }

.button-cta { font-family: var(--font-family-sans); font-size: var(--font-size); background-color: white; border: 2px solid var(--color-secondary); color: var(--color-primary); padding: 1em 0.8em; text-decoration: none; margin-top: 2em 0; display: inline-block; border-radius: 0.6em; font-weight: 800; text-transform: uppercase; transition: all 0.35s ease; }

.button-cta::after { content: "➜"; margin-left: 0.3em; transition: all 0.35s ease; }

.button-cta:hover { background-color: var(--color-primary); border: 2px solid white; transition: all 0.3s ease; color: white; }

/* parallax.css */
.parallax-wrapper { position: relative; width: 100%; /* Ensures no weird scrollbars if the wheel rotates outside the box */ overflow: hidden; }

.wheel-layer { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; /* Keeps the rotation smooth on high-refresh-rate screens */ will-change: transform; pointer-events: none; }

.woman-layer { position: relative; width: 100%; z-index: 2; display: block; }

.intro-feature-box { background-color: var(--color-primary); color: white; border-radius: 0.9em; }

.intro-feature-box p { color: white; }

.intro-feature-box h3::before { content: "• "; display: block; color: #13b3e5; font-size: 2em; }

.intro-stat { background-color: var(--color-background); color: var(--color-primary); border-radius: 0.9em; }

.intro-stat-number { font-size: var(--font-size-6); line-height: var(--line-height-6); letter-spacing: var(--letter-space-6); font-family: var(--font-family-serif); }

.intro-stat p { color: var(--color-primary); margin-bottom: 0; }

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

/* Remove default Bootstrap styling */
.custom-accordion-item { border-radius: 1em !important; overflow: hidden; border: 2px solid; padding: 0.6em; }

.accordion-button { background-color: transparent; box-shadow: none; font-family: var(--font-family-sans); text-transform: uppercase; }

.accordion-button:not(.collapsed) { background-color: transparent; box-shadow: none; }

.accordion-button:focus { box-shadow: none; }

/* Custom Color Classes for Accordion */
.border-green { border-color: 2px solid #029688 !important; }

.text-green { color: #029688; }

.border-blue { border-color: #13b3e5 !important; }

.text-blue { color: #13b3e5; }

.border-darkblue { border-color: #06478e !important; }

.text-darkblue { color: #06478e; }

.border-red { border-color: #ea5c15 !important; }

.text-red { color: #ea5c15; }

.border-yellow { border-color: #fbad19 !important; }

.text-yellow { color: #fbad19; }

.border-pink { border-color: #f37684 !important; }

.text-pink { color: #f37684; }

.border-purple { border-color: 2px solid #601da0 !important; }

.text-purple { color: #601da0; }

.border-lightgreen { border-color: #4cb050 !important; }

.text-lightgreen { color: #4cb050; }

/* Remove the default arrow rotation if you want a cleaner look */
.accordion-button::after { display: none; /* Optional: hides the caret arrow */ }

.accordion-item:not(:first-of-type) { border-top: 2px solid; border-top-color: currentcolor; }

.accordion-item:first-of-type { border: 2px solid #029688; }

#rotating-graphic { transition: transform 0.6s ease-in-out; max-height: 500px; }

.methodology-box { max-width: 960px; font-family: var(--font-family-sans); }

.bio { background-color: white; border: 2px solid var(--color-primary); border-radius: 0.9em; }

.certification-entry { background-color: #f5f5ed; height: 100%; border-radius: 0.9em; padding: 1em 1em; }

.certification-entry P { margin-bottom: 0; font-family: var(--font-family-serif); font-size: 0.9em; font-style: italic; }

.website-footer { background-color: var(--color-primary); color: white; text-align: center; padding: 1em 0; }

.website-footer h2, .website-footer p { color: white; }

@media (max-width: 650px) { h1 { font-size: var(--font-size-4); line-height: var(--line-height-4); letter-spacing: var(--letter-space-4); }
  h2 { font-size: var(--font-size-3); line-height: var(--line-height-3); letter-spacing: var(--letter-space-3); }
  .logo img { max-height: 70px; width: auto; margin-left: 0; }
  .logo { margin-left: 0; left: 0; display: block; }
  .hero { text-align: left; } }