:root {
    --primary: #136bd3;
    --primaryLight: #5c9df5;
    --secondary: #e4a519;
    --secondaryLight: #f4f6f8;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;

    /* Typography */
    --font-body: 'Merriweather', Georgia, serif;
    --font-heading: 'Inter', 'Segoe UI', sans-serif;
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);            /* 13px - 16px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);       /* 31px - 49px */
    --bodyFontSize: 1rem;
    --subtitleFontSize: clamp(0.8125rem, 1.6vw, .8rem);  

    /* Spacing */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;     /* 60px - 100px top and bottom */

}

/*************** Accessibility ***************/

/* Visually hide the element but keep it accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Make it visible when keyboard users tab to it */
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/*************** Fonts ***************/
/* inter-regular - latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
    url('/fonts/inter-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}
/* inter-700 - latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''),
    url('/fonts/inter-v19-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}
/* inter-900 - latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local(''),
    url('/fonts/inter-v19-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}
/* merriweather-regular - latin */
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
    url('/fonts/merriweather-v32-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}
/* merriweather-700 - latin */
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''),
    url('/fonts/merriweather-v32-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}


/*************** Main ***************/

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-family: var(--font-heading);
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-family: var(--font-heading);
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-family: var(--font-body);
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

.cs-button-solid{
    font-size: 1rem;
    font-family: var(--font-heading);
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    padding: 0 2rem;
    background-color: var(--primary);
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    border-radius: 0.5rem;
    box-sizing: border-box;
    transition: color .3s;
}     

  .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  .cs-button-solid:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-nav-button {
    line-height: 2.875rem;
    margin-left: 1.5rem;
  }

/*************** Lists ***************/

  /* Mobile - 360px */

#list-825 {
    margin: 0 0 2rem 0;
    /* 16px - 20px */
    /* padding-left: clamp(1rem, 2vw, 1.25rem); */
    padding-left: 0;
    display: flex;
    flex-direction: column;
    /* 8px - 12px */
    gap: clamp(0.5rem, 1vw, 0.75rem);
}
#list-825 ul {
    list-style-type: none;
}
#list-825 .cs-li {
    list-style: none;
    /* 14px - 18px */
    font-size: clamp(0.875rem, 1.3vw, 1.125rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#list-825 .cs-list-number {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    /* 24px - 28px */
    width: clamp(1.5rem, 2.9vw, 1.75rem);
    height: clamp(1.5rem, 2.9vw, 1.75rem);
    margin-right: 0.75rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    /* we set this element to align to the top of the li, so if there's 
        multiple lines it will stay at the top instead of the center of the text */
    align-self: flex-start;
    /* prevents flexbox from squishing it */
    flex: none;
}

/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-824 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
#list-824 {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
#list-824 .cs-li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#list-824 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem;
}
#list-824 .cs-icon {
    width: 1.0625rem;
    height: auto;
    margin-top: 0.25rem;
}
#list-824 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin: 0;
}