/* CODESTITCH STYLES, RESET, HEADER/NAVIGATION AND FOOTER */
/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/
/* CodeStitch Root and Helpers */
@media only screen and (min-width: 0em) {
  :root {
    /* remove this whole :root and put in your global css file that's shared on all pages, then just remove this section from all other Stitches you add later, only need this once in your global stylesheet */
    --primary: #0056AD;
    --primaryLight: #8c9f97;
    --secondary: #FFBA43;
    --secondaryLight: #FFBA43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4E4B66;
    --bodyTextColorWhite: #FAFBFC;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  }
  .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    font-size: large;
    color: var(--primary);
    display: block;
  }
  .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    margin: 0 auto 1rem;
    color: var(--headerColor);
    position: relative;
  }
  .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    width: 100%;
    margin: 0 auto;
  }
  .cs-button-solid {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    width: auto;
    line-height: 3.125em;
    height: 3.125rem;
    text-align: center;
    padding: 0 1.875rem;
    position: relative;
    z-index: 1;
    background-color: var(--primary);
    color: #fff;
    transition: color 0.3s;
    transition-delay: 0.1s;
  }
  .cs-button-solid:hover {
    color: #fff;
  }
  .cs-button-solid:hover:before {
    width: 100%;
  }
  .cs-button-solid:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #000;
    width: 0;
    transition: width 0.3s;
  }
}
/* Fonts and general styles */
@media only screen and (min-width: 0em) {
  /* caudex-regular - latin */
  @font-face {
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Caudex';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/caudex-v15-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* caudex-italic - latin */
  @font-face {
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Caudex';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/caudex-v15-latin-italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* caudex-700 - latin */
  @font-face {
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Caudex';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/caudex-v15-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  body,
  html {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: 'Roboto', Arial, sans-serif;
    color: var(--bodyTextColor);
    overflow-x: hidden;
    scroll-behavior: smooth;
  }
  *,
  *:before,
  *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    transition: background-color 0.3s;
  }
  .container {
    position: relative;
    width: 92%;
    margin: auto;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    color: var(--headerColor);
  }
  p,
  li,
  a {
    font-size: 1.125rem;
    line-height: 1.5em;
    margin: 0;
  }
  p,
  li {
    color: #353535;
  }
  a:hover,
  button:hover {
    cursor: pointer;
  }
  #parent-pay button {
    font-size: 1rem;
    background-color: #ac8856;
    padding: 5px 10px;
    color: #fff;
    display: inline-block;
    margin-bottom: -2px;
    margin-top: -1.67px;
    text-decoration: none;
    border: none;
    font-size: large;
    min-width: 9.375rem;
    padding: 5px 0rem;
    font-weight: 700;
  }
  #parent-pay button:hover {
    background-color: #ac8856;
  }
  .skip {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1111111;
  }
}
/* Reset Margins */
@media only screen and (min-width: 1024px) {
  body,
  html {
    padding: 0;
    margin: 0;
  }
}
/* Scale full website with the viewport width */
@media only screen and (min-width: 2000px) {
  body,
  html {
    font-size: 0.85vw;
  }
}
/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    transform: translate(-50%, -150%);
    opacity: 0;
    fill: #000;
  }
  #dark-mode-toggle {
    display: block;
    position: absolute;
    top: 0.625rem;
    right: 12%;
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
    z-index: 1000;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s;
  }
  #dark-mode-toggle .cs-sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    position: relative;
    transform: none;
    top: auto;
    right: auto;
    margin: 0;
  }
  #dark-mode-toggle:hover {
    cursor: pointer;
  }
}
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    width: 100%;
    padding: 0.15rem 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
    background: white;
  }
  #cs-navigation:before {
    content: '';
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    display: block;
    top: 100%;
    right: 0;
    z-index: -1100;
    opacity: 0;
    transition: height 0.5s, opacity 0.5s;
  }
  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    transform: translateY(0);
    opacity: 1;
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #cs-navigation .cs-logo {
    width: 100%;
    max-width: 9.125rem;
    height: 100%;
    margin: 0 auto 0 0;
    padding: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: -16px 0px 0px 2px;
    padding-left: 20%;
    border-radius: 0.25rem;
    background-color: transparent;
    border: none;
    display: block;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
  }
  #cs-navigation .cs-active .cs-line3 {
    bottom: 100%;
    opacity: 0;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #1a1a1a;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transform-origin: center;
    transition: transform 0.5s, top 0.3S, left 0.3S;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    opacity: 0;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s, opacity 0.3s;
  }
  #cs-navigation .cs-ul {
    margin: 0;
    padding: 3rem 0 0 0;
    width: 100%;
    height: auto;
    max-height: 65vh;
    overflow: scroll;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  #cs-navigation .cs-li {
    width: 100%;
    text-align: center;
    list-style: none;
    margin-right: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    opacity: 0;
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: '';
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: none;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (max-width: 63.9375rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* makes it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-line {
    background-color: #fff;
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #cs-navigation .cs-dropdown {
    position: relative;
    color: var(--bodyTextColorWhite);
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    opacity: 1;
    visibility: visible;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }
  #cs-navigation .cs-drop-ul {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--primary);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown:hover {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-ul {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    display: inline-block;
  }
  #cs-navigation .cs-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
    border-bottom: 5px solid var(--primary);
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
    columns: 2;
    position: absolute;
    top: 60%;
    z-index: -100;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
    font-size: 1rem;
    text-decoration: none;
    opacity: 0;
    width: 100%;
    height: auto;
    color: var(--bodyTextColor);
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    white-space: nowrap;
    width: 100%;
    font-size: 1rem;
    line-height: 0.85em;
    text-decoration: none;
    padding: 0.75rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: #f7f7f7;
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cs-navigation .cs-drop-ul {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-drop-icon {
    /* turns it white */
    filter: grayscale(1) brightness(1000%);
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    height: auto;
    width: 100%;
    padding: 0 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 4.0625rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: 67%;
    height: auto;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation #drop .cs-li,
  #cs-navigation .cs-li-link {
    list-style: none;
    padding-left: 0px;
    padding-bottom: 5px;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
  }
  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: '';
    width: 0%;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    /* line-height: clamp(2.875em, 5.5vw, 3.5em); */
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cs-navigation .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 64rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* makes it turn white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-li-link:before {
    background-color: var(--primaryLight);
  }
}
/*-- -------------------------- -->
<---   Interior Page Header     -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #int-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
    min-height: 30vh;
    padding-top: 3.125rem;
  }
  #int-hero:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.5;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #int-hero picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
  }
  #int-hero picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #int-hero h1 {
    color: #fff;
    font-size: 2.13333333rem;
    text-align: center;
    margin: 0 auto;
    position: relative;
    width: 96%;
    max-width: 31.25rem;
    margin-top: 4.375rem;
    margin-bottom: 1.875rem;
  }
  #int-hero p {
    color: #fff;
    text-align: center;
    max-width: 25rem;
    margin: auto;
    margin-bottom: 1.875rem;
    display: block;
    width: 96%;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #int-hero {
    font-size: 100%;
  }
  #int-hero h1 {
    font-size: 4rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #int-hero {
    min-height: 18.75rem;
    height: auto;
    padding-top: 11.25rem;
    padding-block-end: 6.25rem;
    background-attachment: fixed;
    font-size: inherit;
  }
}
/*-- -------------------------- -->
<---    Final Call To Action    -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #cta {
    position: relative;
    padding: 3.125rem 0;
  }
  #cta:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.5;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta .container {
    text-align: center;
  }
  #cta picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
  }
  #cta picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #cta .title {
    font-weight: 900;
    font-size: min(9vw, 3rem);
    line-height: 1.20833333;
    color: #fff;
    position: relative;
    margin-bottom: 2.25rem;
    text-align: center;
  }
  #cta p {
    color: #fff;
    text-align: center;
    opacity: 1;
    margin: auto;
    margin-bottom: 2.25rem;
    width: 96%;
    max-width: 37.375rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #cta {
    padding: 10.5rem 0;
  }
}
/* Large Desktop */
@media only screen and (min-width: 1300px) {
  #cta {
    position: relative;
    /* margin-top: (100/16rem); */
  }
  #cta:before {
    display: none;
  }
  #cta:after {
    content: '';
    position: absolute;
    display: block;
    height: 69.25rem;
    width: 125rem;
    background: url('/assets/svgs/cta-squares.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -3;
  }
  #cta .container {
    width: 90.0625%;
    margin: auto;
  }
  #cta picture {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  #cta picture:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.5;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #cta:after {
    display: none;
  }
}
/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #footer {
    background: #1c1c1c;
    padding: 5.25rem 0 1.25rem;
    font-size: min(4vw, 1.2em);
  }
  #footer .left-section {
    margin: auto;
    margin-bottom: 3.125rem;
    text-align: center;
  }
  #footer .left-section .logo {
    display: inline-block;
    margin: auto;
    width: auto;
    height: 2em;
    margin-bottom: 1.875em;
    text-align: center;
  }
  #footer .left-section .logo img {
    width: 100%;
    height: auto;
    display: unset;
  }
  #footer .left-section p {
    font-size: 0.875rem;
    line-height: 1.92857143;
    color: #fff;
    opacity: 0.9;
    text-align: center;
    width: 100%;
    width: 21.92857143rem;
    margin: auto;
  }
  #footer .right-section {
    width: 96%;
    max-width: 25.4375rem;
    margin: auto;
  }
  #footer .right-section .lists {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 96%;
    max-width: 19.1875rem;
    margin: auto;
  }
  #footer .right-section .lists ul {
    padding: 0;
    margin-bottom: 0;
    margin-top: 0;
  }
  #footer .right-section .lists ul:nth-of-type(3) {
    margin-top: 3.125rem;
  }
  #footer .right-section .lists ul:nth-of-type(3) li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
  }
  #footer .right-section .lists ul:nth-of-type(3) li:last-of-type {
    margin-bottom: 0;
  }
  #footer .right-section .lists ul li {
    list-style: none;
    margin-bottom: 0.75rem;
    color: #fff;
    font-size: 1.125rem;
    opacity: 0.9;
  }
  #footer .right-section .lists ul li a {
    text-decoration: none;
    color: #fff;
    line-height: 1.16666667em;
    transition: color 0.3s;
  }
  #footer .right-section .lists ul li a:hover {
    color: var(--primary);
  }
  #footer .right-section .lists ul h2 {
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.16666667em;
    margin-bottom: 2.3125rem;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
  }
  #footer .right-section .lists ul h2#info:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.125rem;
    width: 7.75rem;
    background: var(--primary);
    opacity: 1;
    bottom: -1rem;
    left: 0;
  }
  #footer .right-section .lists ul h2#products:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.125rem;
    width: 6.25rem;
    background: var(--primary);
    opacity: 1;
    bottom: -1rem;
    left: 0;
  }
  #footer .right-section .lists ul h2#contact:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.125rem;
    width: 5.25rem;
    background: var(--primary);
    opacity: 1;
    bottom: -1rem;
    left: 0;
  }
  #footer .right-section .buttons {
    display: flex;
    justify-content: center;
  }
  #footer .right-section .cs-button-solid {
    margin: 0;
    height: 3.3125rem;
    padding-top: 0.1875rem;
    width: 15.625rem;
  }
  #footer .credit {
    color: #fff;
    width: 96%;
    margin: auto;
    text-align: center;
    margin-top: 6.25rem;
    line-height: 2.25rem;
    font-size: 1rem;
  }
  #footer .credit a {
    color: var(--primary);
    text-decoration: none;
    font-size: 1rem;
  }
  #footer .credit a:hover {
    text-decoration: underline;
  }
  #footer .credit .copyright {
    display: block;
    font-size: 1rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #footer {
    font-size: min(1.2vw, 1em);
  }
  #footer .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 96%;
    max-width: 82.5rem;
    margin: auto;
    padding: 0;
  }
  #footer .left-section {
    width: 25.5625rem;
    margin: 0;
    text-align: left;
  }
  #footer .left-section .logo {
    text-align: left;
    margin-left: 0;
    height: 2.5rem;
  }
  #footer .left-section p {
    text-align: left;
    margin-left: 0;
  }
  #footer .right-section {
    margin: 0;
    width: 38.0625rem;
    max-width: none;
  }
  #footer .right-section .lists {
    width: 96%;
    max-width: 48.0625rem;
    margin: 0;
    max-width: initial;
  }
  #footer .right-section .lists ul:nth-of-type(3) {
    margin-top: 0;
  }
  #footer .right-section .lists ul:nth-of-type(3) li:first-of-type {
    margin-bottom: 0;
  }
  #footer .right-section .lists ul li a {
    position: relative;
  }
  #footer .right-section .lists ul li a:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.125rem;
    width: 0%;
    background: var(--primary);
    opacity: 1;
    bottom: -0.1875rem;
    left: 0;
    transition: width 0.3s;
  }
  #footer .right-section .lists ul li a:hover:before {
    width: 100%;
  }
  #footer .right-section .buttons {
    justify-content: flex-start;
  }
  #footer .credit .copyright {
    display: inline-block;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #footer {
    background: #061623;
  }
}
/*-- -------------------------- -->
<---            Blog            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #blog-986 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    /* font-family: 'Roboto', 'Arial', sans-serif; */
    padding: var(--sectionPadding);
    background-color: #1a1a1a;
  }
  #blog-986 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #blog-986 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #blog-986 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #blog-986 .cs-title {
    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;
  }
  #blog-986 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #blog-986 .cs-title {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 2rem;
    max-width: 20ch;
    color: var(--bodyTextColorWhite);
  }
  #blog-986 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 2rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #blog-986 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #blog-986 .cs-button-solid:hover:before {
    width: 100%;
  }
  #blog-986 .cs-button-solid {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #blog-986 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    position: relative;
  }
  #blog-986 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
  }
  #blog-986 .cs-item:hover {
    cursor: pointer;
  }
  #blog-986 .cs-item:hover .cs-info:before {
    opacity: 1;
    background-color: var(--primary);
  }
  #blog-986 .cs-item:hover .cs-picture img {
    transform: scale(1.15);
  }
  #blog-986 .cs-item:hover .cs-date {
    color: #fff;
  }
  #blog-986 .cs-item:hover .cs-icon {
    filter: brightness(150%);
  }
  #blog-986 .cs-item:hover .cs-link {
    color: #fff;
  }
  #blog-986 .cs-picture {
    width: 100%;
    height: 30rem;
    /* removed at tablet */
    aspect-ratio: 0.68333333;
    /* clips img tag from overflowing it on hover */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #blog-986 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes sure the top of the image is at the top of the parent, heads won't get cut off this way */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 0.9s;
  }
  #blog-986 .cs-info {
    width: 83%;
    max-width: 26.25rem;
    /* 16px - 24px */
    padding: clamp(1rem, 2vw, 1.5rem);
    /* prevents padding from affecting the height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
  }
  #blog-986 .cs-info:before {
    /* background-color */
    content: '';
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    opacity: 0.8;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    transition: background-color 0.3s, opacity 0.3s;
  }
  #blog-986 .cs-date {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    color: #BABABA;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s;
  }
  #blog-986 .cs-icon {
    width: 1.25rem;
    height: auto;
    transition: filter 0.3s;
  }
  #blog-986 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: #fff;
    display: block;
  }
  #blog-986 .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1.25rem 0;
    color: #f7f7f7;
    display: block;
  }
  #blog-986 .cs-link {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    text-decoration: none;
    width: auto;
    margin: 0;
    color: var(--primary);
    display: inline-block;
    position: relative;
    transition: color 0.3s;
  }
  #blog-986 .cs-link:hover {
    color: #fff;
  }
  #blog-986 .cs-link:before {
    /* underline */
    content: '';
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    transition: background-color 0.3s;
  }
}
/* Tablet - 550px */
@media only screen and (min-width: 34.375rem) {
  #blog-986 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
  }
  #blog-986 .cs-title {
    margin: 0;
  }
  #blog-986 .cs-picture {
    /* remove the aspect ratio so the height can be squished */
    aspect-ratio: initial;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #blog-986 .cs-container {
    max-width: 80rem;
  }
  #blog-986 .cs-card-group {
    flex-direction: row;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #blog-986 {
    background-color: rgba(0, 0, 0, 0.6);
  }
}