/* -------------------------------- 

File#: _1_main-header
Title: Main Header
Descr: Accessible website navigation
Usage: codyhouse.co/license

-------------------------------- */

  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --mf1-color-primary-hsl: 250, 84%, 54%;
    --mf1-color-bg-hsl: 35, 15%, 14%;
    --mf1-color-contrast-high-hsl: 230, 7%, 23%;
    --mf1-color-contrast-higher-hsl: 230, 13%, 9%;
    --mf1-color-contrast-lower-hsl: 240, 4%, 85%;
    --mf1-color-contrast-medium-hsl: 225, 4%, 47%;
    --mf1-color-bg-dark-hsl: 240, 4%, 95%;
    --mf1-color-white-hsl: 0, 0%, 100%;
    --mf1-color-primary-darker-hsl: 250, 84%, 38%;
    --mf1-color-primary-light-hsl: 250, 84%, 60%;
    --mf1-color-bg-lighter-hsl: 0, 0%, 100%;
    --mf1-color-black-hsl: 230, 13%, 9%;
    --mf1-color-bg-light-hsl: 0, 0%, 100%;
    /* spacing */
    --mf1-space-2xs: 0.375rem;
    --mf1-space-sm: 0.75rem;
    --mf1-space-md: 1.25rem;
  
    /* typography */
    --mf1-text-lg: 1.25rem;
    --mf1-text-sm: 0.833rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --mf1-space-2xs: 0.5625rem;
      --mf1-space-sm: 1.125rem;
      --mf1-space-md: 2rem;
  
      /* typography */
      --mf1-text-lg: 1.75rem;
      --mf1-text-sm: 1rem;
    }
  }
  
  /* buttons */
  .mf1-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    white-space: nowrap;
    text-decoration: none;
    background: hsl(var(--mf1-color-bg-dark-hsl));
    color: hsl(var(--mf1-color-contrast-higher-hsl));
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.2s ease;
    will-change: transform;
    padding: var(--mf1-space-2xs) var(--mf1-space-sm);
    border-radius: 0.25em;
  }
  
  .mf1-btn:focus-visible {
    box-shadow: 0px 0px 0px 2px hsl(var(--mf1-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--mf1-color-contrast-higher-hsl), 0.15);
    outline: none;
  }
  
  .mf1-btn:active {
    transform: translateY(2px);
  }
  
  .mf1-btn--primary {
    background: hsl(120, 92%, 38%); /* WhatsApp green */
    color: hsl(var(--mf1-color-white-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.15),
                0px 1px 3px hsla(var(--mf1-color-primary-darker-hsl), 0.25),
                0px 2px 6px hsla(var(--mf1-color-primary-darker-hsl), 0.1),
                0px 6px 10px -2px hsla(var(--mf1-color-primary-darker-hsl), 0.25);
}
  
.mf1-btn--primary:hover {
    background: hsl(120, 57%, 51%); /* Brighter green for hover */
}

  .mf1-btn--primary:focus {
    box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--mf1-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--mf1-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--mf1-color-primary-darker-hsl), 0.25), 0px 0px 0px 2px hsl(var(--mf1-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--mf1-color-primary-hsl));
  }
  
  .mf1-btn--subtle {
    background: hsl(var(--mf1-color-bg-lighter-hsl));
    color: hsl(var(--mf1-color-contrast-higher-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--mf1-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--mf1-color-black-hsl), 0.2), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
  }
  
  .mf1-btn--subtle:hover {
    background: hsl(var(--mf1-color-bg-light-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--mf1-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--mf1-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12);
  }
  
  .mf1-btn--subtle:focus {
    box-shadow: inset 0px 1px 0px hsla(var(--mf1-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--mf1-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--mf1-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12), 0px 0px 0px 2px hsl(var(--mf1-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--mf1-color-contrast-high-hsl));
  }
  
  /* component */
  :root {
    --header-height: 50px;
  }
  @media (min-width: 64rem) {
    :root {
      --header-height: 70px;
    }
  }
  
  .header {
    height: var(--header-height);
    width: 100%;
    background-color: #232421;
    z-index: 3;
  }
  
  .header__container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  

  
  .header__nav {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100vh;
    background-color: hsl(var(--mf1-color-bg-hsl));
    box-shadow: 0 0.9px 1.5px rgb(248, 246, 246),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
    overflow: auto;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: none;
  }
  .header__nav::before {
    content: "";
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: var(--header-height);
    background: inherit;
    border-bottom: 1px solid hsl(var(--mf1-color-contrast-lower-hsl));
  }
  
  .header__nav--is-visible {
    display: block;
  }
  
  .header__nav-inner {
    padding: var(--mf1-space-md);
  }
  
  .header__label {
    font-size: var(--mf1-text-sm);
    color: hsl(var(--mf1-color-contrast-medium-hsl));
    margin-bottom: var(--mf1-space-sm);
  }
  
  .header__item {
    margin-bottom: var(--mf1-space-sm);
  }
  
  .header__link {
    font-size: var(--mf1-text-lg);
    color: #ffffff;
    text-decoration: none;
  }
  .header__link:hover, .header__link[aria-current] {
    color: #f1da8a;
  }
  
  .header__nav-btn {
    font-size: var(--mf1-text-lg);
    width: 100%;
  }
  
  .header__item--divider {
    height: 1px;
    width: 100%;
    background-color: hsl(var(--mf1-color-contrast-lower-hsl));
  }
  
  .header__trigger {
    position: relative;
    z-index: 2;
  }
  
  .header__trigger-icon {
    position: relative;
    display: block;
    height: 2px;
    width: 1em;
    background-color: currentColor;
    margin-right: var(--mf1-space-2xs);
    transition: 0.2s;
  }
  .header__trigger-icon::before, .header__trigger-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    background-color: currentColor;
    transition: 0.2s;
  }
  .header__trigger-icon::before {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  .header__trigger-icon::after {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  
  .header__trigger[aria-expanded=true] .header__trigger-icon {
    background-color: transparent;
  }
  .header__trigger[aria-expanded=true] .header__trigger-icon::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .header__trigger[aria-expanded=true] .header__trigger-icon::after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  
  @media (min-width: 64rem) {
    .header__nav {
      position: static;
      background-color: transparent;
      width: auto;
      max-height: none;
      box-shadow: none;
      overflow: visible;
      -ms-scroll-chaining: chained;
          overscroll-behavior: auto;
      display: block;
    }
    .header__nav::before {
      display: none;
    }
  
    .header__nav-inner {
      padding: 0;
    }
  
    .header__label {
      position: absolute;
      clip: rect(1px, 1px, 1px, 1px);
      -webkit-clip-path: inset(50%);
              clip-path: inset(50%);
    }
  
    .header__list {
      display: flex;
      align-items: center;
    }
  
    .header__item {
      display: inline-block;
      margin-bottom: 0;
      margin-left: var(--mf1-space-md);
    }
  
    .header__link, .header__nav-btn {
      font-size: 1.125rem;
    }
  
    .header__item--divider {
      height: 1em;
      width: 1px;
    }
  
    .header__trigger {
      display: none;
    }
  }
  
  /* utility classes */
  .mf1-max-width-lg {
    max-width: 80rem;
  }
  
  .mf1-container {
    width: calc(100% - 2*var(--mf1-space-md));
    margin-left: auto;
    margin-right: auto;
  }
  
  .mf1-position-relative {
    position: relative;
  }
































































  /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

File#: _1_main-footer
Title: Main Footer
Descr: Footer navigation
Usage: codyhouse.co/license

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: #ffffff;
    font-family: system-ui, sans-serif;

  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: #f1da8a;
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(252, 20%, 95%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --me6-color-primary-hsl: 250, 84%, 54%;
    --me6-color-bg-hsl: 0, 0%, 100%;
    --me6-color-contrast-high-hsl: 230, 7%, 23%;
    --me6-color-contrast-higher-hsl: 230, 13%, 9%;
    --me6-color-contrast-medium-hsl: 225, 4%, 47%;
    --me6-color-contrast-lower-hsl: 240, 4%, 85%;

    /* spacing */
    --me6-space-xs: 0.5rem;
    --me6-space-sm: 0.75rem;
    --me6-space-md: 1.25rem;
    --me6-space-lg: 2rem;
    --me6-space-xl: 3.25rem;
  
    /* typography */
    --me6-text-base: 1rem;
    --me6-text-sm: 0.833rem;
    --me6-text-xs: 0.694rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --me6-space-xs: 0.75rem;
      --me6-space-sm: 1.125rem;
      --me6-space-md: 2rem;
      --me6-space-lg: 3.125rem;
      --me6-space-xl: 5.125rem;
  
      /* typography */
      --me6-text-base: 1.25rem;
      --me6-text-sm: 1rem;
      --me6-text-xs: 0.8rem;
    }
  }
  
  /* icons */
  .me6-icon {
    height: var(--me6-size, 1em);
    width: var(--me6-size, 1em);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
  }
  
  /* component */
  .main-footer__logo {
    display: inline-block;
  }
  .main-footer__logo svg, .main-footer__logo img {
    display: block;
  }
  
  .main-footer__link {
    color: hsl(var(--me6-color-contrast-medium-hsl));
    text-decoration: none;
  }
  .main-footer__link:hover {
    color: hsl(var(--me6-color-contrast-high-hsl));
    text-decoration: underline;
  }
  
  .main-footer__social {
    text-decoration: none;
    display: inline-block;
    color: hsl(var(--me6-color-contrast-medium-hsl));
  }
  .main-footer__social:hover {
    color: hsl(var(--me6-color-contrast-high-hsl));
  }
  .main-footer__social .me6-icon {
    font-size: 1.2em;
  }
  @media (min-width: 64rem) {
    .main-footer__social .me6-icon {
      font-size: 1em;
    }
  }
  
  /* utility classes */
  .me6-block {
    display: block;
  }
  
  .me6-gap-xs {
    gap: var(--me6-space-xs);
  }
  
  .me6-items-center {
    align-items: center;
  }
  
  .me6-flex {
    display: flex;
  }
  
  .me6-color-contrast-high {
    --me6-color-o: 1;
    color: hsla(var(--me6-color-contrast-high-hsl), var(--me6-color-o, 1));
  }
  
  .me6-flex-wrap {
    flex-wrap: wrap;
  }
  
  .me6-color-contrast-medium {
    --me6-color-o: 1;
    color: hsla(var(--me6-color-contrast-medium-hsl), var(--me6-color-o, 1));
  }
  
  .me6-text-sm {
    font-size: var(--me6-text-sm);
  }
  
  .me6-margin-bottom-sm {
    margin-bottom: var(--me6-space-sm);
  }
  
  .me6-margin-top-lg {
    margin-top: var(--me6-space-lg);
  }
  
  .me6-padding-y-xs {
    padding-top: var(--me6-space-xs);
    padding-bottom: var(--me6-space-xs);
  }
  
  .me6-border-top {
    --me6-border-o: 1;
    border-top: var(--me6-border-width, 1px) var(--me6-border-style, solid) hsla(var(--me6-color-contrast-lower-hsl), var(--me6-border-o, 1));
  }
  
  .me6-flex-column {
    flex-direction: column;
  }
  
  .me6-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .me6-grid > * {
    min-width: 0;
    grid-column-end: span 12;
  }
  
  .me6-gap-y-lg {
    row-gap: var(--me6-space-lg);
  }
  
  .me6-max-width-lg {
    max-width: 80rem;
  }
  
  .me6-container {
    width: calc(100% - 2*var(--me6-space-md));
    margin-left: auto;
    margin-right: auto;
  }
  
  .me6-padding-top-xl {
    padding-top: var(--me6-space-xl);
  }
  
  .me6-z-index-1 {
    z-index: 1;
  }
  
  .me6-position-relative {
    position: relative;
  }
  
  @media(min-width: 32rem){
    .me6-gap-lg\@xs {
      gap: var(--me6-space-lg);
    }
  
    .me6-col-6\@xs {
      grid-column-end: span 6;
    }
  }
  
  @media(min-width: 64rem){
    .me6-text-xs\@md {
      font-size: var(--me6-text-xs);
    }
  
    .me6-margin-bottom-0\@md {
      margin-bottom: 0;
    }
  
    .me6-items-center\@md {
      align-items: center;
    }
  
    .me6-justify-between\@md {
      justify-content: space-between;
    }
  
    .me6-flex-row\@md {
      flex-direction: row;
    }
  
    .me6-text-sm\@md {
      font-size: var(--me6-text-sm);
    }
  
    .me6-text-base\@md {
      font-size: var(--me6-text-base);
    }
  
    .me6-col-3\@md {
      grid-column-end: span 3;
    }
  }
  
  @media(min-width: 80rem){
    .me6-order-1\@lg {
      order: 1;
    }
  
    .me6-text-right\@lg {
      text-align: right;
    }
  
    .me6-order-2\@lg {
      order: 2;
    }
  
    .me6-gap-lg\@lg {
      gap: var(--me6-space-lg);
    }
  
    .me6-col-3\@lg {
      grid-column-end: span 3;
    }
  
    .me6-col-9\@lg {
      grid-column-end: span 9;
    }
  }

  











































































































/* -------------------------------- 

File#: _1_diagonal-section
Title: Diagonal Section
Descr: Section with diagonal edges
Usage: codyhouse.co/license

-------------------------------- */

/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1.125rem; /* 18px */
    line-height: 1.4;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.5rem; /* 40px */
  }
  
  h2 {
    font-size: 2.125rem; /* 34px */
  }
  
  h3 {
    font-size: 1.75rem; /* 28px */
  }
  
  h4 {
    font-size: 1.375rem; /* 22px */
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
            appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  /* -------------------------------- 
  
  Component 
  
  -------------------------------- */
  
  :root {
    --diagonal-section-offset: 50px;
  }
  
  .diagonal-section,
  .diagonal-section-top,
  .diagonal-section-bottom {
    position: relative;
    z-index: 1;
    background-color: #c4c3c3;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  @supports ((-webkit-clip-path: inset(50%)) or (clip-path: inset(50%))) {
    .diagonal-section, .diagonal-section-top.diagonal-section-bottom {
      padding-top: calc(var(--diagonal-section-offset)/2);
      padding-bottom: calc(var(--diagonal-section-offset)/2);
      -webkit-clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
              clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
    }
  
    .diagonal-section--flip-x {
      -webkit-clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
              clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
    }
  
    .diagonal-section-top {
      padding-top: calc(var(--diagonal-section-offset)/2);
      -webkit-clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% 100%);
              clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% 100%);
    }
  
    .diagonal-section-top--flip-x {
      -webkit-clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% 100%, 0% 100%);
              clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% 100%, 0% 100%);
    }
  
    .diagonal-section-top--flip-x.diagonal-section-bottom {
      -webkit-clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
              clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
    }
  
    .diagonal-section-bottom {
      padding-bottom: calc(var(--diagonal-section-offset)/2);
      -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
              clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
    }
  
    .diagonal-section-bottom--flip-x {
      -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
              clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
    }
  
    .diagonal-section-bottom--flip-x.diagonal-section-top {
      -webkit-clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
              clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
    }
  
    .diagonal-section-top--flip-x.diagonal-section-bottom--flip-x {
      -webkit-clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
              clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
    }
  }
  
  /* -------------------------------- 
  
  Utilities 
  
  -------------------------------- */
  
  .cd-container {
    width: calc(100% - 3rem);
    margin-left: auto;
    margin-right: auto;
  }
  
  .cd-max-width-sm {
    max-width: 100rem;
  }
  
  .cd-padding-y-3xl {
    padding-top: 10.75rem;
    padding-bottom: 10.75rem;
  }
  
  .cd-margin-bottom-sm {
    margin-bottom: 1.5rem;
  }
  
  .cd-text-center {
    text-align: center;
  }

































































































  /* -------------------------------- 

File#: _2_slideshow
Title: Slideshow
Descr: Show a collection of items one at a time
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
            appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --sq7-color-primary-hsl: 250, 84%, 54%;
    --sq7-color-bg-hsl: 0, 0%, 100%;
    --sq7-color-contrast-high-hsl: 230, 7%, 23%;
    --sq7-color-contrast-higher-hsl: 230, 13%, 9%;
    --sq7-color-bg-light-hsl: 0, 0%, 100%;
    --sq7-color-black-hsl: 230, 13%, 9%;
    --sq7-color-white-hsl: 0, 0%, 100%;
    --sq7-color-bg-dark-hsl: 240, 4%, 95%;
    --sq7-color-primary-darker-hsl: 250, 84%, 38%;
    --sq7-color-primary-light-hsl: 250, 84%, 60%;
    --sq7-color-accent-hsl: 342, 89%, 48%;
    --sq7-color-contrast-lower-hsl: 240, 4%, 85%;
  
    /* spacing */
    --sq7-space-3xs: 0.25rem;
    --sq7-space-xs: 0.5rem;
    --sq7-space-sm: 0.75rem;
    --sq7-space-md: 1.25rem;
    --sq7-space-2xs: 0.375rem;
  
    /* typography */
    --sq7-text-sm: 0.833rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --sq7-space-3xs: 0.375rem;
      --sq7-space-xs: 0.75rem;
      --sq7-space-sm: 1.125rem;
      --sq7-space-md: 2rem;
      --sq7-space-2xs: 0.5625rem;
  
      /* typography */
      --sq7-text-sm: 1rem;
    }
  }
  
  /* buttons */
  .sq7-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    white-space: nowrap;
    text-decoration: none;
    background: hsl(var(--sq7-color-bg-dark-hsl));
    color: hsl(var(--sq7-color-contrast-higher-hsl));
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.2s ease;
    will-change: transform;
    padding: var(--sq7-space-2xs) var(--sq7-space-sm);
    border-radius: 0.25em;
  }
  
  .sq7-btn:focus-visible {
    box-shadow: 0px 0px 0px 2px hsl(var(--sq7-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--sq7-color-contrast-higher-hsl), 0.15);
    outline: none;
  }
  
  .sq7-btn:active {
    transform: translateY(2px);
  }
  
  .sq7-btn--primary {
    background: hsl(var(--sq7-color-primary-hsl));
    color: hsl(var(--sq7-color-white-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--sq7-color-white-hsl), 0.15), 0px 1px 3px hsla(var(--sq7-color-primary-darker-hsl), 0.25), 0px 2px 6px hsla(var(--sq7-color-primary-darker-hsl), 0.1), 0px 6px 10px -2px hsla(var(--sq7-color-primary-darker-hsl), 0.25);
  }
  
  .sq7-btn--primary:hover {
    background: hsl(var(--sq7-color-primary-light-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--sq7-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--sq7-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--sq7-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--sq7-color-primary-darker-hsl), 0.25);
  }
  
  .sq7-btn--primary:focus {
    box-shadow: inset 0px 1px 0px hsla(var(--sq7-color-white-hsl), 0.15), 0px 1px 2px hsla(var(--sq7-color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--sq7-color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--sq7-color-primary-darker-hsl), 0.25), 0px 0px 0px 2px hsl(var(--sq7-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--sq7-color-primary-hsl));
  }
  
  /* icons */
  .sq7-icon {
    height: var(--sq7-size, 1em);
    width: var(--sq7-size, 1em);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
  }
  
  /* component */
  :root {
    --slideshow-height: 280px;
    --slideshow-fade-transition-duration: 0.25s;
    --slideshow-slide-transition-duration: 0.35s;
    --slideshow-prx-transition-duration: 0.5s;
    --slideshow-btn-width: 1.6em;
    --slideshow-btn-height: 3.2em;
    --slideshow-btn-icon-size: 1.6em;
    --slideshow-btn-offset: var(--sq7-space-xs);
  }
  @media (min-width: 48rem) {
    :root {
      --slideshow-height: 150px;
    }
  }
  @media (min-width: 64rem) {
    :root {
      --slideshow-height: 200px;
    }
  }
  @media (min-width: 80rem) {
    :root {
      --slideshow-height: 320px;
    }
  }
  
  .slideshow__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--slideshow-height);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .slideshow__item:focus {
    outline: none;
  }
  
  .slideshow--ratio-16\:9 .slideshow__item {
    height: 0;
    padding-bottom: 56.25%;
  }
  
  .slideshow--ratio-4\:3 .slideshow__item {
    height: 0;
    padding-bottom: 75%;
  }
  
  .slideshow--ratio-1\:1 .slideshow__item {
    height: 0;
    padding-bottom: 100%;
  }
  
  .slideshow {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  
  .slideshow__content {
    overflow: hidden;
  }
  
  .slideshow__item {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
  }
  
  .slideshow__item--selected {
    position: relative;
    z-index: 3;
    visibility: visible;
  }
  
  .slideshow--transition-fade .slideshow__item {
    opacity: 0;
    transition: opacity 0s var(--slideshow-fade-transition-duration), visibility 0s var(--slideshow-fade-transition-duration);
  }
  
  .slideshow--transition-fade .slideshow__item--selected {
    opacity: 1;
    transition: opacity var(--slideshow-fade-transition-duration);
  }
  
  .slideshow--transition-slide .slideshow__item {
    animation-duration: var(--slideshow-slide-transition-duration);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .slideshow--transition-slide .slideshow__item > * {
    visibility: hidden;
  }
  
  .slideshow--transition-slide .slideshow__item:not(.slideshow__item--selected) * {
    transition: none;
  }
  
  .slideshow--transition-slide .slideshow__item--selected > * {
    visibility: visible;
  }
  
  .slideshow--transition-slide .slideshow__item--slide-in-left {
    animation-name: slide-in-left;
  }
  
  .slideshow--transition-slide .slideshow__item--slide-in-right {
    animation-name: slide-in-right;
  }
  
  .slideshow--transition-slide .slideshow__item--slide-out-left {
    animation-name: slide-out-left;
  }
  
  .slideshow--transition-slide .slideshow__item--slide-out-right {
    animation-name: slide-out-right;
  }
  
  .slideshow--transition-slide .slideshow__item--slide-out-left,
  .slideshow--transition-slide .slideshow__item--slide-out-right {
    z-index: 2;
  }
  .slideshow--transition-slide .slideshow__item--slide-out-left.slideshow__item--selected,
  .slideshow--transition-slide .slideshow__item--slide-out-right.slideshow__item--selected {
    z-index: 3;
  }
  .slideshow--transition-slide .slideshow__item--slide-out-left > *,
  .slideshow--transition-slide .slideshow__item--slide-out-right > * {
    visibility: visible;
  }
  
  @keyframes slide-in-left {
    0% {
      visibility: visible;
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes slide-in-right {
    0% {
      visibility: visible;
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes slide-out-left {
    0% {
      visibility: visible;
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes slide-out-right {
    0% {
      visibility: visible;
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  .slideshow--transition-prx .slideshow__item {
    animation-duration: var(--slideshow-prx-transition-duration);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .slideshow--transition-prx .slideshow__item > * {
    visibility: hidden;
  }
  
  .slideshow--transition-prx .slideshow__item--selected > * {
    visibility: visible;
  }
  
  .slideshow--transition-prx .slideshow__item--prx-in-left {
    animation-name: prx-in-left;
  }
  
  .slideshow--transition-prx .slideshow__item--prx-in-right {
    animation-name: prx-in-right;
  }
  
  .slideshow--transition-prx .slideshow__item--prx-out-left {
    animation-name: prx-out-left;
  }
  
  .slideshow--transition-prx .slideshow__item--prx-out-right {
    animation-name: prx-out-right;
  }
  
  .slideshow--transition-prx .slideshow__item--prx-out-left,
  .slideshow--transition-prx .slideshow__item--prx-out-right {
    z-index: 2;
  }
  .slideshow--transition-prx .slideshow__item--prx-out-left.slideshow__item--selected,
  .slideshow--transition-prx .slideshow__item--prx-out-right.slideshow__item--selected {
    z-index: 3;
  }
  .slideshow--transition-prx .slideshow__item--prx-out-left > *,
  .slideshow--transition-prx .slideshow__item--prx-out-right > * {
    visibility: visible;
  }
  
  @keyframes prx-in-left {
    0% {
      visibility: visible;
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes prx-in-right {
    0% {
      visibility: visible;
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes prx-out-left {
    0% {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }
    100% {
      opacity: 0.3;
      transform: translateX(40%);
    }
  }
  @keyframes prx-out-right {
    0% {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }
    100% {
      opacity: 0.3;
      transform: translateX(-40%);
    }
  }
  .slideshow[data-swipe=on] .slideshow__content {
    -webkit-user-select: none;
            user-select: none;
  }
  .slideshow[data-swipe=on] .slideshow__content img {
    pointer-events: none;
  }
  
  .slideshow__control {
    display: none;
  }
  
  .slideshow[data-controls=hover] .slideshow__control {
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .slideshow[data-controls=hover]:hover .slideshow__control {
    opacity: 1;
  }
  
  .slideshow[data-swipe=on] .slideshow__control {
    display: none;
  }
  
  .slideshow__control {
    display: block;
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);
  }
  .slideshow__control:first-of-type {
    left: var(--slideshow-btn-offset);
  }
  .slideshow__control:last-of-type {
    right: var(--slideshow-btn-offset);
  }
  
  @media (min-width: 64rem) {
    .slideshow[data-swipe=on] .slideshow__control {
      display: block;
    }
  }
  .slideshow__btn {
    display: block;
    background-color: hsla(var(--sq7-color-black-hsl), 0.75);
    height: var(--slideshow-btn-height);
    width: var(--slideshow-btn-width);
    border-radius: 0.25em;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .slideshow__btn:hover {
    background-color: hsla(var(--sq7-color-contrast-higher-hsl), 0.85);
  }
  .slideshow__btn:hover svg {
    color: hsl(var(--sq7-color-bg-hsl));
  }
  .slideshow:not(.slideshow--is-animating) .slideshow__btn:active {
    transform: translateY(2px);
  }
  .slideshow__btn svg {
    display: block;
    width: var(--slideshow-btn-icon-size);
    height: var(--slideshow-btn-icon-size);
    margin: 0 auto;
    transition: color 0.2s;
    color: hsl(var(--sq7-color-white-hsl));
  }
  @supports (grid-area: auto) {
    .slideshow__btn {
      background-color: transparent;
    }
    .slideshow__btn svg {
      color: hsl(var(--sq7-color-contrast-higher-hsl));
    }
  }
  
  .slideshow__navigation {
    position: absolute;
    z-index: 4;
    bottom: 0;
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
  }
  
  .slideshow__nav-item {
    display: inline-block;
    margin: 0 var(--sq7-space-3xs);
  }
  .slideshow__nav-item button {
    display: block;
    position: relative;
    font-size: 8px;
    color: hsl(var(--sq7-color-contrast-high-hsl));
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.4;
    cursor: pointer;
    transition: background 0.3s;
  }
  .slideshow__nav-item button::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    height: 1em;
    width: 1em;
    font-size: 14px;
    border-radius: inherit;
    border: 1px solid hsl(var(--sq7-color-contrast-high-hsl));
    opacity: 0;
    transform: scale(0);
    transition: 0.3s;
  }
  .slideshow__nav-item button:focus {
    outline: none;
  }
  .slideshow__nav-item button:focus::before {
    opacity: 1;
    transform: scale(1);
  }
  
  .slideshow__nav-item--selected button {
    opacity: 1;
  }
  
  @media (min-width: 64rem) {
    .slideshow__navigation {
      height: 40px;
    }
  
    .slideshow__nav-item button {
      font-size: 10px;
    }
    .slideshow__nav-item button::before {
      font-size: 16px;
    }
  }
  
  /* utility classes */
  .sq7-sr-only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }
  
  .sq7-bg-light {
    --sq7-bg-o: 1;

  }
  
  .sq7-text-center {
    text-align: center;
  }
  
  .sq7-text-component :where(h1, h2, h3, h4) {
    line-height: var(--sq7-heading-line-height, 1.2);
    margin-top: calc(var(--sq7-space-md) * var(--sq7-space-multiplier, 1));
    margin-bottom: calc(var(--sq7-space-sm) * var(--sq7-space-multiplier, 1));
  }
  
  .sq7-text-component :where(p, blockquote, ul li, ol li) {
    line-height: var(--sq7-body-line-height, 1.4);
  }
  
  .sq7-text-component :where(ul, ol, p, blockquote, .sq7-text-component__block) {
    margin-bottom: calc(var(--sq7-space-sm) * var(--sq7-space-multiplier, 1));
  }
  
  .sq7-text-component :where(ul, ol) {
    padding-left: 1.25em;
  }
  
  .sq7-text-component ul :where(ul, ol), .sq7-text-component ol :where(ul, ol) {
    padding-left: 1em;
    margin-bottom: 0;
  }
  
  .sq7-text-component ul {
    list-style-type: disc;
  }
  
  .sq7-text-component ol {
    list-style-type: decimal;
  }
  
  .sq7-text-component img {
    display: block;
    margin: 0 auto;
  }
  
  .sq7-text-component figcaption {
    margin-top: calc(var(--sq7-space-xs) * var(--sq7-space-multiplier, 1));
    font-size: var(--sq7-text-sm);
    text-align: center;}
  
  .sq7-text-component em {
    font-style: italic;
  }
  
  .sq7-text-component strong {
    font-weight: bold;
  }
  
  .sq7-text-component s {
    text-decoration: line-through;
  }
  
  .sq7-text-component u {
    text-decoration: underline;
  }
  
  .sq7-text-component mark {
    background-color: hsla(var(--sq7-color-accent-hsl), 0.2);
    color: inherit;
  }
  
  .sq7-text-component blockquote {
    padding-left: 1em;
    border-left: 4px solid hsl(var(--sq7-color-contrast-lower-hsl));
    font-style: italic;
  }
  
  .sq7-text-component hr {
    margin: calc(var(--sq7-space-md) * var(--sq7-space-multiplier, 1)) auto;
    background: hsl(var(--sq7-color-contrast-lower-hsl));
    height: 1px;
  }
  
  .sq7-text-component > *:first-child {
    margin-top: 0;
  }
  
  .sq7-text-component > *:last-child {
    margin-bottom: 0;
  }
  
  .sq7-text-component.sq7-line-height-xs {
    --sq7-heading-line-height: 1;
    --sq7-body-line-height: 1.1;
  }
  
  .sq7-text-component.sq7-line-height-sm {
    --sq7-heading-line-height: 1.1;
    --sq7-body-line-height: 1.2;
  }
  
  .sq7-text-component.sq7-line-height-md {
    --sq7-heading-line-height: 1.15;
    --sq7-body-line-height: 1.4;
  }
  
  .sq7-text-component.sq7-line-height-lg {
    --sq7-heading-line-height: 1.22;
    --sq7-body-line-height: 1.58;
  }
  
  .sq7-text-component.sq7-line-height-xl {
    --sq7-heading-line-height: 1.3;
    --sq7-body-line-height: 1.72;
  }
  
  .sq7-max-width-sm {
    max-width: 48rem;
  }
  
  .sq7-container {
    width: calc(100% - 2*var(--sq7-space-md));
    margin-left: auto;
    margin-right: auto;
  }
  
  .sq7-color-inherit {
    color: inherit;
  }
  
  .sq7-gap-sm {
    gap: var(--sq7-space-sm);
  }
  
  .sq7-flex-center {
    justify-content: center;
    align-items: center;
  }
  
  .sq7-flex-wrap {
    flex-wrap: wrap;
  }
  
  .sq7-flex {
    display: flex;
  }
  
  .sq7-margin-top-md {
    margin-top: var(--sq7-space-md);
  }
  
  .sq7-bg {
    --sq7-bg-o: 1;
    background-color: hsla(var(--sq7-color-bg-hsl), var(--sq7-bg-o, 1));
  }
  
  .sq7-hide {
    display: none !important;
  }







































































  /*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-1619 {
      padding: var(--sectionPadding);
      /* 200px - 300px - leaving extra space for the navigation */
      padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
      position: relative;
      z-index: 1;
    }
    #hero-1619 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* 60px - 180px */
      gap: clamp(0.75rem, 2vw, 2rem);
    }
    #hero-1619 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 48.75rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
    }
    #hero-1619 .cs-topper {
      /* 13px - 16px */
      font-size: clamp(0.8125rem, 1.5vw, 1rem);
      color: #997a08;
      line-height: 1.2em;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    #hero-1619 .cs-chevron {
      --chevronColor: var(--primary);
      width: 3rem;
      height: auto;
    }
    #hero-1619 .cs-title {
      /* 39px - 61px */
      font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
      font-weight: 700;
      line-height: 1.2em;
      text-align: inherit;
      max-width: 100%;
      margin: 0 0 2.5rem 0;
      color: #fff;
      position: relative;
    }
    #hero-1619 .cs-text {
      /* 16px - 20px */
      font-size: clamp(1rem, 1.95vw, 1.25rem);
      line-height: 1.5em;
      text-align: inherit;
      width: 100%;
      /* 464px - 622px */
      max-width: clamp(29rem, 60vw, 38.785rem);
      margin: 0 0 2.5rem 0;
      color: #fff;
    }
    #hero-1619 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      margin: 0;
      color: #fff;
      padding: 0 1.5rem;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
    }
    #hero-1619 .cs-button-solid:before {
      content: '';
      position: absolute;
      display: block;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width .3s;
    }
    #hero-1619 .cs-button-solid:hover:before {
      width: 100%;
    }
    #hero-1619 .cs-card-group {
      margin: 0;
      padding: 0;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 2.3vw, 1.25rem);
    }
    #hero-1619 .cs-item {
      width: 100%;
      text-align: right;
      list-style: none;
      margin: 0;
      /* 24px - 32px */
      padding: clamp(1.5rem, 3vw, 2rem);
      background-color: #fff;
      box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      grid-column: span 12;
      grid-row: span 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
    #hero-1619 .cs-icon {
      width: 3rem;
      height: auto;
      margin: 0 0 1.5rem 0;
    }
    #hero-1619 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: bold;
      text-align: inherit;
      margin: 0 0 1rem 0;
      color: var(--headerColor);
    }
    #hero-1619 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      max-width: 28.125rem;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColor);
    }
    #hero-1619 .cs-background {
      width: 100%;
      height: 55%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
    }
    #hero-1619 .cs-background:before {
      /* Overlay */
      content: '';
      width: 100%;
      height: 100%;
      background: #111926;
      opacity: .8;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: 1;
      /* prevents the cursor from interacting with it */
      pointer-events: none;
    }
    #hero-1619 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      /* makes the top of the image start at the top of the parent */
      object-position: top;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #hero-1619 {
      padding-bottom: 0;
    }
    #hero-1619 .cs-container {
      align-items: flex-start;
    }
    #hero-1619 .cs-content {
      text-align: right;
      margin-left: 0;
      align-items: flex-start;
    }
    #hero-1619 .cs-item {
      grid-column: span 6;
    }
    #hero-1619 .cs-background {
      height: 87%;
    }
    #hero-1619 .cs-background:before {
      background: linear-gradient(270deg, #111926 21.41%, rgba(17, 25, 38, 0.72) 34.98%, rgba(17, 25, 38, 0) 62.53%);
      opacity: 1;
    }
  }
  /* Large Desktop - 1300px */
  @media only screen and (min-width: 81.25rem) {

  }
  /* Large Desktop Parallax Effect - 100px */
  @media only screen and (min-width: 100rem) {
    #hero-1619 .cs-background {
      background: url("../images/pic15.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      /* creates the parallax effect */
      background-attachment: fixed;
    }
    #hero-1619 .cs-background img {
      display: none;
    }
  }
                                  












  /*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1188 {
        padding: var(--sectionPadding);
    }
    #services-1188 .cs-container {
        max-width: 80rem;
        width: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-1188 .cs-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
        /* set text align to left if content needs to be left aligned */
        text-align: center;
    }

    #services-1188 .cs-card-group {
        /* changes to 1280px at desktop */
        max-width: 56.25rem;
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        justify-content: center;
        gap: 1rem;
    }
    #services-1188 .cs-item {
        list-style: none;
        max-width: 23rem;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        padding: 1rem;
        border: 1px solid #e8e8e8;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
    }
    #services-1188 .cs-picture {
        width: 5rem;
        height: 5rem;
        margin-bottom: 1.25rem;
        box-sizing: border-box;
        /* prevents border from affecting height and width */
        background-color: #f7f7f7;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #services-1188 .cs-icon {
        width: 1.875rem;
        height: auto;
        display: block;
    }
    #services-1188 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.5em;
        margin: 0;
        margin-bottom: 0.5rem;
        color: var(--headerColor);
        text-align: center;
    }
    #services-1188 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        text-align: center;
    }
    #services-1188 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        font-weight: 700;
        min-width: 9.375rem;
        margin: 0;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        padding: 0 1.5rem;
        color: #fff;
        background-color: var(--primary);
        text-decoration: none;
        display: inline-block;
        position: relative;
        z-index: 1;
        text-align: center;
    }
    #services-1188 .cs-button-solid:before {
        content: "";
        width: 0%;
        height: 100%;
        background: #000;
        opacity: 1;
        border-radius: 0.25rem;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #services-1188 .cs-button-solid:hover:before {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-1188 .cs-card-group {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
    #services-1188 .cs-item {
        margin: 0;
    }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-1188 .cs-card-group {
        max-width: 80rem;
    }
    #services-1188 .cs-item {
        max-width: none;
        padding: 2rem 1.5rem;
    }
}

                                /* -------------------------------- 

File#: _1_feature-v20
Title: Feature v20
Descr: A list of features with icons
Usage: codyhouse.co/license

-------------------------------- */

/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1.125rem; /* 18px */
    line-height: 1.4;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.5rem; /* 40px */
  }
  
  h2 {
    font-size: 2.125rem; /* 34px */
  }
  
  h3 {
    font-size: 1.75rem; /* 28px */
  }
  
  h4 {
    font-size: 1.375rem; /* 22px */
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
            appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  /* -------------------------------- 
  
  Icons 
  
  -------------------------------- */
  
  .cd-icon {
    --size: 1em;
    font-size: var(--size);
    height: 1em;
    width: 1em;
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
  }
  
  .cd-icon--is-spinning { /* rotate the icon infinitely */
    animation: cd-icon-spin 1s infinite linear;
  }
  
  @keyframes cd-icon-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  .cd-icon use { /* SVG symbols - enable icon color corrections */
    color: inherit;
    fill: currentColor;
  }
  
  /* --------------------------------
  
  Component 
  
  -------------------------------- */
  
  .feature-v20 {
    position: relative;
    z-index: 1;
  }
  
  .feature-v20__list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
  }
  
  .feature-v20__list > * {
    min-width: 0;
  }
  
  .feature-v20__item {
    grid-column-end: span 12;
  }
  
  @media (min-width: 48rem) {
    .feature-v20__item {
      grid-column-end: span 6;
    }  
  }
  
  @media (min-width: 64rem) {
    .feature-v20__item {
      grid-column-end: span 3;
    }
  }
  
  .feature-v20__item-title {
    transition: color 0.3s;
  }
  
  .feature-v20__icon-wrapper {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: hsl(250, 84%, 54%); /* icon color */
    transition: color 0.3s;
  }
  .feature-v20__icon-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05);
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.3s;
  }
  
  .feature-v20__icon {
    --size: 24px;
    z-index: 2;
  }
  
  .feature-v20__paragraph {
    color: hsl(240, 4%, 65%);
  }















































  
  /* -------------------------------- 
  
  Utilities 
  
  -------------------------------- */
  
  .cd-container {
    width: calc(100% - 3rem);
    margin-left: auto;
    margin-right: auto;
  }
  
  .cd-max-width-sm {
    max-width: 48rem;
  }
  
  .cd-max-width-adaptive-lg {
    max-width: 32rem;
  }
  
  @media (min-width: 48rem) {
    .cd-max-width-adaptive-lg {
      max-width: 48rem;
    }
  }
  
  @media (min-width: 64rem) {
    .cd-max-width-adaptive-lg {
      max-width: 64rem;
    }
  }
  
  @media (min-width: 80rem) {
    .cd-max-width-adaptive-lg {
      max-width: 80rem;
    }
  }
  
  .cd-padding-y-xl {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
  
  .cd-margin-bottom-xl {
    margin-bottom: 4.5rem;
  }
  
  .cd-margin-bottom-2xs {
    margin-bottom: 0.75rem;
  }
  
  .cd-text-center {
    text-align: center;
  }



































  /*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1498 {
      padding: var(--sectionPadding);
      position: relative;
      z-index: 1;
      background-color: #fff;
      overflow: hidden;
    }
    #services-1498 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 56.25rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
      position: relative;
      z-index: 15;
    }
    #services-1498 .cs-content {
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
      width: 100%;
      /* set text align to left if content needs to be left aligned */
      text-align: center;
    }
    #services-1498 .cs-title {
      max-width: 23ch;
    }
    #services-1498 .cs-card-group {
      margin: 0;
      width: 100%;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      /* 16px - 20px */
      gap: clamp(1rem, 2vw, 1.25rem);
    }
    #services-1498 .cs-item {
      text-align: center;
      list-style: none;
      max-width: 21.25rem;
      /* 16px - 24px */
      padding: 1.5rem clamp(1rem, 2.4vw, 1.5rem);
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid #E8E8E8;
      /* 40px - 60px */
      border-radius: clamp(2.5rem, 5vw, 3.75rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 1;
      transition: border-color 0.3s;
    }
    #services-1498 .cs-item:hover {
      border-color: var(--secondary);
    }
    #services-1498 .cs-item:hover .cs-picture img {
      transform: scale(1.2);
    }
    #services-1498 .cs-item:hover .cs-h3,
    #services-1498 .cs-item:hover .cs-link {
      color: var(--primary);
    }
    #services-1498 .cs-item:hover .cs-arrow {
      filter: initial;
    }
    #services-1498 .cs-image-group {
      /* done in ems so we can use font size to scale it on desktop */
      width: 16.0625em;
      height: 12.5em;
      /* 16px - 24px */
      margin: 0 0 clamp(1rem, 2.4vw, 1.5rem);
      position: relative;
      z-index: 1;
    }
    #services-1498 .cs-picture {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      /* clips the image from overflowing parent on hover */
      overflow: hidden;
    }
    #services-1498 .cs-picture img {
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition: transform 0.65s;
    }
    #services-1498 .cs-mask {
      /* SVG Colors */
      --maskBorder: #e8e8e8;
      --maskBG: #fff;
      position: absolute;
      top: -1px;
      left: -1px;
      bottom: -1px;
      right: -1px;
    }
    #services-1498 .cs-info {
      display: flex;
      flex-direction: column;
    }
    #services-1498 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      text-align: inherit;
      line-height: 1.5em;
      font-weight: 700;
      width: 100%;
      margin: 0 0 0.5rem 0;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      color: var(--headerColor);
      transition: background-color 0.3s;
      transition: color 0.3s;
    }
    #services-1498 .cs-ages {
      font-size: 1rem;
      line-height: 1.2em;
      text-align: inherit;
      font-weight: 700;
      margin: 0 0 1rem 0;
      color: var(--secondary);
    }
    #services-1498 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      text-align: inherit;
      line-height: 1.5em;
      max-width: 50ch;
      /* 16px - 24px */
      margin: 0 0 clamp(1rem, 2.4vw, 1.5rem);
      width: 100%;
      color: var(--bodyTextColor);
    }
    #services-1498 .cs-link {
      font-size: 1rem;
      text-decoration: none;
      text-align: inherit;
      line-height: 1.2em;
      font-weight: 700;
      color: var(--primary);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: color 0.3s;
    }
    #services-1498 .cs-link:hover .cs-arrow {
      transform: translateX(0.25rem);
    }
    #services-1498 .cs-arrow {
      display: block;
      height: auto;
      width: 1.25rem;
      transition: filter 0.3s,
                  transform 0.3s;
    }
    #services-1498 .cs-hills {
      /* hills Color */
      --hillBG: #F2FAF8;
      width: 150%;
      min-width: 120rem;
      height: auto;
      position: absolute;
      /* positions off the top at tablet */
      bottom: -6.25rem;
      left: 50%;
      transform: translateX(-50%);
    }
    #services-1498 .cs-wrapper {
      width: 140vw;
      max-width: 91.375rem;
      height: 70%;
      display: none;
      position: absolute;
      /* 60px - 100px (same as the padding bottom of the section ) */
      bottom: clamp(3.75rem, 7.82vw, 6.25rem);
      left: 50%;
      z-index: 2;
      transform: translateX(-50%);
    }
    #services-1498 .cs-floater {
      position: absolute;
    }
    #services-1498 .cs-floater1 {
      left: 0;
      top: -13.75rem;
    }
    #services-1498 .cs-floater2 {
      bottom: -3.125rem;
      right: 0;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #services-1498 .cs-container {
      max-width: 80rem;
    }
    #services-1498 .cs-card-group {
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
    }
    #services-1498 .cs-item {
      width: 31.5%;
    }
    #services-1498 .cs-image-group {
      /* scaling it down so it all fits proportionally */
      font-size: min(1.2vw, 1em);
    }
    #services-1498 .cs-wrapper {
      display: block;
    }
    #services-1498 .cs-hills {
      top: 65%;
      bottom: auto;
    }
  }
                                
  




















  /* -------------------------------- 

File#: _1_stacking-cards
Title: Stacking Cards
Descr: Cards stack effect on vertical scrolling
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --sg0-color-primary-hsl: 250, 84%, 54%;
    --sg0-color-bg-hsl: 0, 0%, 100%;
    --sg0-color-contrast-high-hsl: 230, 7%, 23%;
    --sg0-color-contrast-higher-hsl: 230, 13%, 9%;
    --sg0-color-bg-light-hsl: 0, 0%, 100%;
  
    /* spacing */
    --sg0-space-sm: 0.75rem;
    --sg0-space-md: 1.25rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --sg0-space-sm: 1.125rem;
      --sg0-space-md: 2rem;
    }
  }
  
  /* component */
  .stack-cards {
    --stack-cards-gap: var(--sg0-space-sm);
    --stack-cards-item-ratio: 2/1;
  }
  
  .stack-cards__item {
    position: relative;
    position: -webkit-sticky;

    top: var(--sg0-space-md);
    height: 0;
    padding-bottom: calc(100%/(var(--stack-cards-item-ratio)));
    -webkit-transform-origin: center top;
            transform-origin: center top;
  }
  .stack-cards__item > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  /* utility classes */
  .sg0-overflow-hidden {
    overflow: hidden;
  }
  
  .sg0-shadow-md {
    box-shadow:0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
  }
  
  .sg0-radius-lg {
    border-radius: 0.5em;
  }
  
  .sg0-bg {
    --sg0-bg-o: 1;
    background-color: hsla(var(--sg0-color-bg-hsl), var(--sg0-bg-o, 1));
  }
  
  .sg0-flex-center {
    justify-content: center;
    align-items: center;
  }
  
  .sg0-flex {
    display: flex;
  }
  
  :where(.sg0-inner-glow) {
    position: relative;
  }
  
  .sg0-inner-glow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
  }
  
  .sg0-bg-light {
    --sg0-bg-o: 1;
    background-color: hsla(var(--sg0-color-bg-light-hsl), var(--sg0-bg-o, 1));
  }



































/* -------------------------------- 

File#: _1_feature
Title: Feature
Descr: Content group containing text + media (img, video, iframe, inline SVG)
Usage: codyhouse.co/license

-------------------------------- */

/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1.125rem; /* 18px */
    line-height: 1.4;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.5rem; /* 40px */
  }
  
  h2 {
    font-size: 2.125rem; /* 34px */
  }
  
  h3 {
    font-size: 1.75rem; /* 28px */
  }
  
  h4 {
    font-size: 1.375rem; /* 22px */
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
            appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  /* -------------------------------- 
  
  Buttons 
  
  -------------------------------- */
  
  .cd-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375em;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.2s;
    will-change: transform;
  }
  
  .cd-btn:focus-visible {
    outline: none;
  }
  
  .cd-btn:active {
    transform: translateY(2px);
  }
  
  .cd-btn--primary {
    background: hsl(250, 84%, 54%);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 
                0 1px 3px hsla(250, 84%, 38%, 0.25), 
                0 2px 6px hsla(250, 84%, 38%, 0.1), 
                0 6px 10px -2px hsla(250, 84%, 38%, 0.25);
    color: hsl(0, 0%, 100%);
  }
  
  .cd-btn--primary:hover {
    background: hsl(250, 84%, 60%);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 
                0 1px 2px hsla(250, 84%, 38%, 0.25), 
                0 1px 4px hsla(250, 84%, 38%, 0.1), 
                0 3px 6px -2px hsla(250, 84%, 38%, 0.25);
  }
  
  .cd-btn--primary:focus-visible {
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 
                0 1px 2px hsla(250, 84%, 38%, 0.25), 
                0 1px 4px hsla(250, 84%, 38%, 0.1), 
                0 3px 6px -2px hsla(250, 84%, 38%, 0.25), 
                0 0 0 2px hsl(0, 0%, 100%), 
                0 0 0 4px hsl(250, 84%, 54%);
  }
  










  /*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-296 {
        padding: var(--sectionPadding);
    }
    #services-296 .cs-container {
        width: 100%;
        /* changes to 1440px on desktop */
        max-width: 43.75rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-296 .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;
    }

    #services-296 .cs-title {
        max-width: 30ch;
    }
    #services-296 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #services-296 .cs-item {
        list-style: none;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 2rem;
        background-color: #f7f7f7;
        border-radius: 1rem;
        /* clips image corners */
        overflow: hidden;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        transition: background-color 0.3s;
    }
    #services-296 .cs-item:hover {
        cursor: pointer;
    }
    #services-296 .cs-item:hover .cs-image {
        opacity: 1;
    }
    #services-296 .cs-item:hover .cs-image img {
        transform: scale(1.1);
    }
    #services-296 .cs-item:hover .cs-icon {
        /* turns it white */
        filter: grayscale(1) brightness(1000%);
    }
    #services-296 .cs-item:hover .cs-h3,
    #services-296 .cs-item:hover .cs-item-text {
        color: #fff;
    }
    #services-296 .cs-image {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        z-index: -1;
        background-color: var(--primary);
        transition: opacity 0.3s;
    }
    #services-296 .cs-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0.4;
        object-fit: cover;
        transition: transform 0.6s;
    }
    #services-296 .cs-link {
        text-decoration: none;
    }
    #services-296 .cs-icon {
        width: auto;
        height: 3rem;
        margin-bottom: 1.5rem;
        display: block;
    }
    #services-296 .cs-icon path {
        transition: fill 0.3s;
    }
    #services-296 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        margin: 0;
        margin-bottom: 1rem;
        color: var(--headerColor);
        transition: color 0.3s;
        font-weight: bold;
    }
    #services-296 .cs-item-text {
        font-size: 1rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-296 .cs-card-group {
        justify-content: space-between;
        /* makes sure every box "stretches" to be the same height as the tallest box */
        align-items: stretch;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #services-296 .cs-item {
        width: 48.6%;
    }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-296 .cs-container {
        max-width: 90rem;
    }
    #services-296 .cs-card-group {
        justify-content: center;
    }
    #services-296 .cs-item {
        /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
        width: clamp(23.84%, 22.5vw, 23.95%);
    }
}

                                











/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #footer-1147 {
        padding: var(--sectionPadding);
        position: relative;
        z-index: 1;
    }
    #footer-1147 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #footer-1147 .cs-top {
        width: 100%;
        /* 32px - 40px */
        margin-bottom: clamp(2rem, 4vw, 2.5rem);
        padding-bottom: clamp(2rem, 4vw, 2.5rem);
        border-bottom: 1px solid #484848;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
    }
    #footer-1147 .cs-ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        row-gap: 0.5rem;
        /* 28px - 40px */
        column-gap: clamp(1.75rem, 4vw, 2.5rem);
    }
    #footer-1147 .cs-li {
        list-style: none;
    }
    #footer-1147 .cs-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: #bababa;
        display: block;
        transition: color 0.3s;
    }
    #footer-1147 .cs-link:hover {
        color: var(--secondary);
    }
    #footer-1147 .cs-logo {
        width: 10.5rem;
        height: auto;
        display: block;
    }
    #footer-1147 .cs-logo-img {
        width: 100%;
        height: auto;
        display: block;
    }
    #footer-1147 .cs-bottom {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    #footer-1147 .cs-social {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    #footer-1147 .cs-social-li {
        list-style: none;
    }
    #footer-1147 .cs-social-link {
        width: 2rem;
        height: 2rem;
        background-color: #484848;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    #footer-1147 .cs-social-link:hover {
        background-color: var(--secondary);
    }
    #footer-1147 .cs-social-link:hover .cs-social-icon {
        filter: grayscale(1) brightness(0);
        opacity: 1;
    }
    #footer-1147 .cs-social-icon {
        width: 0.75rem;
        height: auto;
        display: block;
        opacity: 0.5;
    }
    #footer-1147 .cs-copyright {
        font-size: 1rem;
        line-height: 1.5em;
        margin: 0;
        color: #bababa;
        display: block;
    }
    #footer-1147 .cs-copyright-link {
        font-size: inherit;
        text-decoration: none;
        color: inherit;
        transition: color 0.3s;
    }
    #footer-1147 .cs-copyright-link:hover {
        color: var(--secondary);
    }
    #footer-1147 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #footer-1147 .cs-background:before {
        /* background color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: #1a1a1a;
        opacity: 0.96;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #footer-1147 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes img tag act as a background image */
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #footer-1147 .cs-top {
        flex-direction: row;
        justify-content: space-between;
    }
    #footer-1147 .cs-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}
                                



















/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #steps-889 {
        padding: var(--sectionPadding);
    }
    #steps-889 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #steps-889 .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;
    }

    #steps-889 .cs-text {
        max-width: 66.5rem;
    }
    #steps-889 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        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;
    }
    #steps-889 .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;
    }
    #steps-889 .cs-button-solid:hover:before {
        width: 100%;
    }
    #steps-889 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 20px - 40px */
        gap: clamp(1.25rem, 3vw, 2.5rem);
    }
    #steps-889 .cs-item {
        text-align: center;
        list-style: none;
        width: 100%;
        max-width: 20.375rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #steps-889 .cs-picture {
        margin-bottom: 1.5rem;
        width: 4.5rem;
        height: 4.5rem;
        background-color: rgba(206, 65, 13, 0.05);
        border-radius: 1rem 0 1rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #steps-889 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        text-align: inherit;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
    }
    #steps-889 .cs-item-p {
        font-size: 1rem;
        line-height: 1.5em;
        text-align: inherit;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #steps-889 .cs-arrow {
        /* 48px - 80px */
        width: clamp(3rem, 6vw, 5rem);
        height: auto;
        display: block;
        flex: none;
        transform: rotate(120deg);
    }
    #steps-889 .cs-arrow-img {
        width: 100%;
        display: block;
    }
    #steps-889 .cs-icon {
        width: 2rem;
        height: auto;
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-889 .cs-card-group {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    #steps-889 .cs-arrow {
        align-self: center;
        transform: rotate(40deg);
    }
}

                                
























/* -------------------------------- 

File#: _2_testimonials
Title: Testimonials
Descr: A gallery of testimonial cards
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --ta0-color-primary-hsl: 250, 84%, 54%;
    --ta0-color-bg-hsl: 0, 0%, 100%;
    --ta0-color-contrast-high-hsl: 230, 7%, 23%;
    --ta0-color-contrast-higher-hsl: 230, 13%, 9%;
    --ta0-color-contrast-lower-hsl: 240, 4%, 85%;
    --ta0-color-contrast-low-hsl: 240, 4%, 65%;
    --ta0-color-contrast-medium-hsl: 225, 4%, 47%;
  
    /* spacing */
    --ta0-space-4xs: 0.125rem;
    --ta0-space-3xs: 0.25rem;
    --ta0-space-2xs: 0.375rem;
    --ta0-space-sm: 0.75rem;
    --ta0-space-md: 1.25rem;
    --ta0-space-lg: 2rem;
  
    /* typography */
    --ta0-text-sm: 0.833rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --ta0-space-4xs: 0.1875rem;
      --ta0-space-3xs: 0.375rem;
      --ta0-space-2xs: 0.5625rem;
      --ta0-space-sm: 1.125rem;
      --ta0-space-md: 2rem;
      --ta0-space-lg: 3.125rem;
  
      /* typography */
      --ta0-text-sm: 1rem;
    }
  }
  
  /* icons */
  .ta0-icon {
    height: var(--ta0-size, 1em);
    width: var(--ta0-size, 1em);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
  }
  
  .ta0-icon--xl {
    --ta0-size: 64px;
  }
  
  /* component */
  
  
  /* utility classes */
  .ta0-margin-top-4xs {
    margin-top: var(--ta0-space-4xs);
  }
  
  .ta0-color-contrast-medium {
    --ta0-color-o: 1;
    color: hsla(var(--ta0-color-contrast-medium-hsl), var(--ta0-color-o, 1));
  }
  
  .ta0-block {
    display: block;
  }
  
  .ta0-text-sm {
    font-size: var(--ta0-text-sm);
  }
  
  .ta0-border {
    --ta0-border-o: 1;
    border: var(--ta0-border-width, 1px) var(--ta0-border-style, solid) hsla(var(--ta0-color-contrast-lower-hsl), var(--ta0-border-o, 1));
  }
  
  .ta0-radius-50\% {
    border-radius: 50%;
  }
  
  .ta0-height-lg {
    height: 3rem;
  }
  
  .ta0-width-lg {
    width: 3rem;
  }
  
  .ta0-margin-bottom-3xs {
    margin-bottom: var(--ta0-space-3xs);
  }
  
  .ta0-flex-shrink-0 {
    flex-shrink: 0;
  }
  
  .ta0-items-center {
    align-items: center;
  }
  
  .ta0-flex-column {
    flex-direction: column;
  }
  
  .ta0-flex {
    display: flex;
  }
  
  .ta0-margin-bottom-md {
    margin-bottom: var(--ta0-space-md);
  }
  
  .ta0-line-height-md {
    line-height: 1.4;
  }
  
  .ta0-sr-only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }
  
  .ta0-margin-bottom-sm {
    margin-bottom: var(--ta0-space-sm);
  }
  
  .ta0-text-center {
    text-align: center;
  }
  
  .ta0-padding-md {
    padding: var(--ta0-space-md);
  }
  
  .ta0-radius-md {
    border-radius: 0.25em;
  }
  
  .ta0-bg-contrast-lower {
    --ta0-bg-o: 1;
    background-color: hsla(var(--ta0-color-contrast-lower-hsl), var(--ta0-bg-o, 1));
  }
  
  .ta0-gap-sm {
    gap: var(--ta0-space-sm);
  }
  
  .ta0-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .ta0-grid > * {
    min-width: 0;
    grid-column-end: span 12;
  }
  
  .ta0-margin-bottom-lg {
    margin-bottom: var(--ta0-space-lg);
  }
  
  .ta0-max-width-adaptive-lg {
    max-width: 32rem;
  }
  
  @media(min-width: 48rem) {
    .ta0-max-width-adaptive-lg {
      max-width: 48rem;
    }
  }
  
  @media(min-width: 64rem) {
    .ta0-max-width-adaptive-lg {
      max-width: 64rem;
    }
  }
  
  @media(min-width: 80rem) {
    .ta0-max-width-adaptive-lg {
      max-width: 80rem;
    }
  }
  
  .ta0-container {
    width: calc(100% - 2*var(--ta0-space-md));
    margin-left: auto;
    margin-right: auto;
  }
  
  .ta0-margin-right-2xs {
    margin-right: var(--ta0-space-2xs);
  }
  
  .ta0-flex-wrap {
    flex-wrap: wrap;
  }
  
  .ta0-margin-bottom-2xs {
    margin-bottom: var(--ta0-space-2xs);
  }
  
  .ta0-color-contrast-low {
    --ta0-color-o: 1;
    color: hsla(var(--ta0-color-contrast-low-hsl), var(--ta0-color-o, 1));
  }
  
  .ta0-margin-x-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .ta0-border-2 {
    --ta0-border-width: 2px;
  }
  
  .ta0-border-bg {
    --ta0-border-o: 1;
    border-color: hsla(var(--ta0-color-bg-hsl), var(--ta0-border-o, 1));
  }
  
  .ta0-bg-opacity-30\% {
    --ta0-bg-o: 0.3;
  }
  
  .ta0-bg-opacity-50\% {
    --ta0-bg-o: 0.5;
  }
  
  @media(min-width: 64rem){
    .ta0-margin-top-auto\@md {
      margin-top: auto;
    }
  
    .ta0-flex-column\@md {
      flex-direction: column;
    }
  
    .ta0-flex\@md {
      display: flex;
    }
  
    .ta0-col-4\@md {
      grid-column-end: span 4;
    }
  }












  /*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #stats-1229 {
        padding: var(--sectionPadding);
        position: relative;
        z-index: 1;
    }
    #stats-1229:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/chevron-pattern-light3.svg");
        background-position: center;
        background-size: auto;
        background-repeat: repeat;
        opacity: 0.3;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #stats-1229 .cs-container {
        /* changes to 1280px at desktop */
        max-width: 36.5rem;
        width: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #stats-1229 .cs-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
    #stats-1229 .cs-flex {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #stats-1229 .cs-title {
        max-width: 20ch;
    }
    #stats-1229 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #stats-1229 .cs-item {
        list-style: none;
        width: 100%;
        /* prevents padding and border from affecting height and width */
        /* 16px - 40px top & bottom */
        /* 16px - 32px left & right */
        padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
        box-sizing: border-box;
        background: #f7f7f7;
        border: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        gap: 0.75rem;
        /* clips cs-icon overflowing */
        overflow: hidden;
        grid-column: span 6;
    }
    #stats-1229 .cs-icon {
        /* 32px - 40px */
        width: clamp(2rem, 3vw, 2.5rem);
        height: auto;
        margin: 0;
        flex: none;
    }
    #stats-1229 .cs-h3 {
        /* 16px - 25px */
        font-size: clamp(1rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 900;
        width: 100%;
        margin: 0;
        color: var(--headerColor);
        /* wraps longer words on the smallest screen sizes */
        overflow-wrap: break-word;
    }
    #stats-1229 .cs-stat-group {
        width: 100%;
        margin: auto;
        padding: 0;
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: repeat(6, 1fr);
    }
    #stats-1229 .cs-stat {
        list-style: none;
        margin: 0;
        /* 16px - 40px */
        padding: clamp(1rem, 3vw, 2.5rem) 1rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        grid-column: span 2;
        /* border code */
        /* remove the border on the far-right elements */
        /* makes the last two items span across multiple columns. changes at desktop to one line */
    }
    #stats-1229 .cs-stat:before {
        content: "";
        width: 2px;
        height: 100%;
        background: linear-gradient(
            0deg,
            rgba(72, 72, 72, 0) 0%,
            #484848 50%,
            rgba(72, 72, 72, 0) 100%
        );
        position: absolute;
        top: 0;
        right: 0;
    }
    #stats-1229 .cs-stat:nth-of-type(3):before,
    #stats-1229 .cs-stat:nth-of-type(5):before {
        content: none;
    }
    #stats-1229 .cs-stat:nth-of-type(4),
    #stats-1229 .cs-stat:nth-of-type(5) {
        grid-column: span 3;
    }
    #stats-1229 .cs-desc {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: center;
        /* keeps the width of the stat description from overflowing onto the border */
        /* 88px - 176px */
        width: clamp(5.5rem, 20vw, 11rem);
        margin-bottom: 0.5rem;
        color: #858585;
        display: block;
    }
    #stats-1229 .cs-number {
        /* 25px - 49px */
        font-size: clamp(1.5625rem, 3vw, 3.0625rem);
        line-height: 1.2em;
        font-weight: 900;
        margin: 0;
        color: var(--headerColor);
        display: block;
    }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
    #stats-1229 .cs-container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    #stats-1229 .cs-card-group {
        display: grid;
        /* makes all grid items stretch to have the same height if their content isn't all the same height */
        align-items: stretch;
        grid-template-columns: repeat(2, 1fr);
    }
    #stats-1229 .cs-item {
        grid-column: span 1;
        flex-direction: row;
        align-items: center;
    }
    #stats-1229 .cs-stat-group {
        flex-direction: row;
        flex-wrap: wrap;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #stats-1229 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #stats-1229 .cs-content {
        flex-direction: row;
        align-items: center;
    }
    #stats-1229 .cs-title,
    #stats-1229 .cs-text {
        max-width: none;
    }
    #stats-1229 .cs-card-group {
        width: 50%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #stats-1229 .cs-stat-group {
        max-width: 80rem;
        grid-template-columns: repeat(5, 1fr);
    }
    #stats-1229 .cs-stat {
        grid-column: span 1;
    }
    #stats-1229 .cs-stat:nth-of-type(4),
    #stats-1229 .cs-stat:nth-of-type(5) {
        grid-column: span 1;
    }
    #stats-1229 .cs-stat:nth-of-type(3):before {
        content: "";
    }
}
                                







.triangle {
    position: relative;
    background: #c4c3c3;
    height: 1vh;
  }


















#divider {
	height: 2px;
	width: 100%;
    position: sticky;
	background: blue;
	background: linear-gradient(90deg, hsl(0, 0%, 20%), hsl(0, 0%, 70%), hsl(0, 0%, 20%));
}
































/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cta-51 {
        padding: var(--sectionPadding);
        position: relative;
        color: #ffffff;
    }
    #cta-51 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #cta-51 .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;
    }

    #cta-51 .cs-title {
        color: var(--bodyTextColorWhite);
    }
    #cta-51 .cs-text {
        margin-bottom: 1rem;
        color: var(--bodyTextColorWhite);
        opacity: 0.8;
    }
    #cta-51 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #cta-51 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        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;
    }
    #cta-51 .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;
    }
    #cta-51 .cs-button-solid:hover:before {
        width: 100%;
    }
    #cta-51 .cs-picture {
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #cta-51 .cs-picture:before {
        /* black color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: #000;
        opacity: 0.8;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #cta-51 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

                                

























/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-1152 {
        padding: var(--sectionPadding);
    }
    #gallery-1152 .cs-container {
        width: 100%;
        /* changes to 1280px at large desktop */
        max-width: 59rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #gallery-1152 .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;
    }

    #gallery-1152 .cs-topper {
        color: #505050;
    }
    #gallery-1152 .cs-title {
        margin: 0;
    }
    #gallery-1152 .cs-gallery {
        width: 100%;
        /* changes to 100% at tablet */
        max-width: 31.25rem;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #gallery-1152 .cs-image {
        /* 260px - 360px */
        min-height: clamp(16.25rem, 60vw, 20rem);
        border-radius: 1rem;
        /* clips the image corners */
        overflow: hidden;
        display: block;
        grid-column: span 12;
        grid-row: span 1;
        position: relative;
    }
    #gallery-1152 .cs-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
    #gallery-1152 .cs-gallery {
        max-width: 100%;
        grid-template-rows: 1fr;
    }
    #gallery-1152 .cs-image {
        grid-column: span 4;
    }
    #gallery-1152 .cs-image:nth-of-type(4),
    #gallery-1152 .cs-image:nth-of-type(5) {
        grid-column: span 6;
    }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #gallery-1152 .cs-container {
        max-width: 80rem;
    }
    #gallery-1152 .cs-gallery {
        grid-template-columns: repeat(5, 1fr);
    }
    #gallery-1152 .cs-image {
        grid-column: span 1;
    }
    #gallery-1152 .cs-image:nth-of-type(4),
    #gallery-1152 .cs-image:nth-of-type(5) {
        grid-column: span 1;
    }
}

                                






























  /* -------------------------------- 

File#: _2_contact
Title: Contact
Descr: Contact block w/ info about how to get in touch
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --co1-color-primary-hsl: 250, 84%, 54%;
    --co1-color-bg-hsl: 0, 0%, 100%;
    --co1-color-contrast-high-hsl: 230, 7%, 23%;
    --co1-color-contrast-higher-hsl: 230, 13%, 9%;
    --co1-color-contrast-medium-hsl: 225, 4%, 47%;
  
    /* spacing */
    --co1-space-2xs: 0.375rem;
    --co1-space-md: 1.25rem;
    --co1-space-lg: 2rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --co1-space-2xs: 0.5625rem;
      --co1-space-md: 2rem;
      --co1-space-lg: 3.125rem;
    }
  }
  
  /* component */
  @media (min-width: 64rem) {
    .contact .google-maps {
      height: auto;
      padding-bottom: 0;
    }
  }
  
  /* utility classes */
  .co1-radius-md {
    border-radius: 0.25em;
  }
  
  .co1-color-contrast-medium {
    --co1-color-o: 1;
    color: hsla(var(--co1-color-contrast-medium-hsl), var(--co1-color-o, 1));
  }
  
  .co1-line-height-md {
    line-height: 1.4;
  }
  
  .co1-margin-bottom-2xs {
    margin-bottom: var(--co1-space-2xs);
  }
  
  .co1-font-bold {
    font-weight: 700;
  }
  
  .co1-padding-y-md {
    padding-top: var(--co1-space-md);
    padding-bottom: var(--co1-space-md);
  }
  
  .co1-gap-y-lg {
    row-gap: var(--co1-space-lg);
  }
  
  .co1-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .co1-grid > * {
    min-width: 0;
    grid-column-end: span 12;
  }
  
  .co1-text-center {
    text-align: center;
  }
  
  .co1-margin-bottom-lg {
    margin-bottom: var(--co1-space-lg);
  }
  
  .co1-max-width-lg {
    max-width: 80rem;
  }
  
  .co1-container {
    width: calc(100% - 2*var(--co1-space-md));
    margin-left: auto;
    margin-right: auto;
  }
  
  .co1-z-index-1 {
    z-index: 1;
  }
  
  .co1-position-relative {
    position: relative;
  }
  
  @media(min-width: 64rem){
    .co1-padding-bottom-0\@md {
      padding-bottom: 0;
    }
  
    .co1-height-auto\@md {
      height: auto;
    }
  
    .co1-text-right\@md {
      text-align: right;
    }
  
    .co1-margin-bottom-0\@md {
      margin-bottom: 0;
    }
  
    .co1-justify-between\@md {
      justify-content: space-between;
    }
  
    .co1-flex\@md {
      display: flex;
    }
  
    .co1-gap-lg\@md {
      gap: var(--co1-space-lg);
    }
  
    .co1-col-6\@md {
      grid-column-end: span 6;
    }
  }





















  /* -------------------------------- 

File#: _1_google-maps
Title: Google Maps
Descr: Google Maps component
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --gz6-color-primary-hsl: 250, 84%, 54%;
    --gz6-color-bg-hsl: 0, 0%, 100%;
    --gz6-color-contrast-high-hsl: 230, 7%, 23%;
    --gz6-color-contrast-higher-hsl: 230, 13%, 9%;
  }
  
  /* component */
  .google-maps {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }
  
  .google-maps--ratio-4\:1 {
    padding-bottom: 25%;
  }
  
  .google-maps--ratio-3\:1 {
    padding-bottom: 33%;
  }

























  /* -------------------------------- 

File#: _1_details-list
Title: Details List
Descr: Pairs of related information displayed in a list
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
    box-sizing: border-box;
  }
  
  * {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
  }
  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  a {
    color: hsl(250, 84%, 54%);
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
  }
  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --di3-color-primary-hsl: 250, 84%, 54%;
    --di3-color-bg-hsl: 0, 0%, 100%;
    --di3-color-contrast-high-hsl: 230, 7%, 23%;
    --di3-color-contrast-higher-hsl: 230, 13%, 9%;
    --di3-color-contrast-medium-hsl: 225, 4%, 47%;
  
    /* spacing */
    --di3-space-2xs: 0.375rem;
    --di3-space-md: 1.25rem;
    --di3-space-lg: 2rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --di3-space-2xs: 0.5625rem;
      --di3-space-md: 2rem;
      --di3-space-lg: 3.125rem;
    }
  }
  
  /* component */
  :root {
    --details-list-border-width: 1px;
    --details-list-border-opacity: 0.15;
  }
  
  .details-list--rows .details-list__item {
    border-bottom: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
  }
  .details-list--rows .details-list__item:last-child {
    border-bottom: none;
  }
  
  .details-list--cols .details-list__item {
    border-right: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
  }
  .details-list--cols .details-list__item:last-child {
    border-right: none;
  }
  
  @media (min-width: 32rem) {
    .details-list--rows\@xs .details-list__item {
      border-right: 0;
      border-bottom: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
    }
    .details-list--rows\@xs .details-list__item:last-child {
      border-bottom: none;
    }
  
    .details-list--cols\@xs .details-list__item {
      border-bottom: 0;
      border-right: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
    }
    .details-list--cols\@xs .details-list__item:last-child {
      border-right: none;
    }
  }
  @media (min-width: 48rem) {
    .details-list--rows\@sm .details-list__item {
      border-right: 0;
      border-bottom: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
    }
    .details-list--rows\@sm .details-list__item:last-child {
      border-bottom: none;
    }
  
    .details-list--cols\@sm .details-list__item {
      border-bottom: 0;
      border-right: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
    }
    .details-list--cols\@sm .details-list__item:last-child {
      border-right: none;
    }
  }
  @media (min-width: 64rem) {
    .details-list--rows\@md .details-list__item {
      border-right: 0;
      border-bottom: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
    }
    .details-list--rows\@md .details-list__item:last-child {
      border-bottom: none;
    }
  
    .details-list--cols\@md .details-list__item {
      border-bottom: 0;
      border-right: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
    }
    .details-list--cols\@md .details-list__item:last-child {
      border-right: none;
    }
  }
  @media (min-width: 80rem) {
    .details-list--rows\@lg .details-list__item {
      border-right: 0;
      border-bottom: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
    }
    .details-list--rows\@lg .details-list__item:last-child {
      border-bottom: none;
    }
  
    .details-list--cols\@lg .details-list__item {
      border-bottom: 0;
      border-right: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
    }
    .details-list--cols\@lg .details-list__item:last-child {
      border-right: none;
    }
  }
  @media (min-width: 90rem) {
    .details-list--rows\@xl .details-list__item {
      border-right: 0;
      border-bottom: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
    }
    .details-list--rows\@xl .details-list__item:last-child {
      border-bottom: none;
    }
  
    .details-list--cols\@xl .details-list__item {
      border-bottom: 0;
      border-right: var(--details-list-border-width) solid hsla(var(--di3-color-contrast-higher-hsl), var(--details-list-border-opacity));
    }
    .details-list--cols\@xl .details-list__item:last-child {
      border-right: none;
    }
  }
  
  /* utility classes */
  .di3-color-contrast-medium {
    --di3-color-o: 1;
    color: hsla(var(--di3-color-contrast-medium-hsl), var(--di3-color-o, 1));
  }
  
  .di3-line-height-md {
    line-height: 1.4;
  }
  
  .di3-margin-bottom-2xs {
    margin-bottom: var(--di3-space-2xs);
  }
  
  .di3-font-bold {
    font-weight: 700;
  }
  
  .di3-padding-y-md {
    padding-top: var(--di3-space-md);
    padding-bottom: var(--di3-space-md);
  }
  
  .di3-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .di3-grid > * {
    min-width: 0;
    grid-column-end: span 12;
  }
  
  .di3-margin-top-lg {
    margin-top: var(--di3-space-lg);
  }
  
  @media(min-width: 64rem){
    .di3-text-center\@md {
      text-align: center;
    }
  
    .di3-padding-x-md\@md {
      padding-left: var(--di3-space-md);
      padding-right: var(--di3-space-md);
    }
  
    .di3-text-right\@md {
      text-align: right;
    }
  
    .di3-margin-bottom-0\@md {
      margin-bottom: 0;
    }
  
    .di3-justify-between\@md {
      justify-content: space-between;
    }
  
    .di3-flex\@md {
      display: flex;
    }
  
    .di3-margin-top-0\@md {
      margin-top: 0;
    }
  
    .di3-col-4\@md {
      grid-column-end: span 4;
    }
  
    .di3-col-6\@md {
      grid-column-end: span 6;
    }
  
    .di3-col-2\@md {
      grid-column-end: span 2;
    }
  }





























  :root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --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;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    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-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-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
                            

/*-- -------------------------- -->
<---        Recent Posts        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #blog-1347 {
        padding: var(--sectionPadding);
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    #blog-1347 .cs-container {
        width: 100%;
        /* changes to 1280px on desktop */
        max-width: 43.75rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #blog-1347 .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-1347 .cs-title {
        max-width: 20ch;
    }
    #blog-1347 .cs-topper {
        color: var(--secondary);
    }
    #blog-1347 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;
    }
    #blog-1347 .cs-item {
        list-style: none;
        display: flex;
        flex-direction: column;
        grid-column: span 12;
    }
    #blog-1347 .cs-item:hover .cs-h3,
    #blog-1347 .cs-item:hover .cs-date,
    #blog-1347 .cs-item:hover .cs-category {
        color: #fff;
    }
    #blog-1347 .cs-item:hover .cs-item-text {
        background-color: var(--primary);
    }
    #blog-1347 .cs-item:hover .cs-icon-wrapper {
        border-color: #fff;
    }
    #blog-1347 .cs-item:hover .cs-icon,
    #blog-1347 .cs-item:hover .cs-date-icon {
        filter: brightness(1000%) grayscale(1);
    }
    #blog-1347 .cs-item:hover .cs-icon {
        transform: rotate(45deg);
    }
    #blog-1347 .cs-item:hover .cs-category::before {
        background-color: #fff;
        opacity: 0.2;
    }
    #blog-1347 .cs-link {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        /* if one card has more content then the others, the card will stretch to fill the parent container */
        flex-grow: 1;
        gap: 1rem;
    }
    #blog-1347 .cs-picture {
        width: 100%;
        height: 20rem;
        margin: 0;
        border-radius: 1.5rem;
        display: block;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    #blog-1347 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    #blog-1347 .cs-item-text {
        padding: 1.25rem;
        background-color: #f7f7f7;
        border-radius: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* makes the item text the element that grows to fill the container */
        flex-grow: 1;
        transition: background-color 0.3s;
    }
    #blog-1347 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
        line-height: 1.2em;
        text-align: left;
        margin: 0;
        color: #1a1a1a;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        transition: color 0.3s;
    }
    #blog-1347 .cs-icon-wrapper {
        width: 3rem;
        height: 3rem;
        border: 1px solid #bababa;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents the parent flexbox from shrinking the icon */
        flex-shrink: 0;
        transition: border-color 0.3s;
    }
    #blog-1347 .cs-icon {
        width: auto;
        height: 0.75rem;
        transition:
            filter 0.3s,
            transform 0.3s;
    }
    #blog-1347 .cs-info {
        margin: 1rem 0 0;
        padding: 1rem 0 0;
        border-top: 1px solid #e8e8e8;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #blog-1347 .cs-date {
        font-size: 0.875rem;
        line-height: 1.5em;
        text-align: left;
        color: #1a1a1a;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: color 0.3s;
    }
    #blog-1347 .cs-date-icon {
        width: auto;
        height: 1.5rem;
        transition: filter 0.3s;
    }
    #blog-1347 .cs-category {
        font-size: 0.875rem;
        /* centers the text if the category bullet has to span multiple lines */
        text-align: center;
        padding: 0.25rem 1rem;
        color: #1a1a1a;
        border-radius: 5rem;
        position: relative;
        z-index: 0;
        overflow: hidden;
    }
    #blog-1347 .cs-category::before {
        content: "";
        width: 100%;
        height: 100%;
        background: #e8e8e8;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #blog-1347 .cs-bubbles {
        width: 20.0625rem;
        height: 26.4375rem;
        display: none;
        position: absolute;
        top: 66.4375rem;
        right: -8.75rem;
        z-index: -1;
    }
    #blog-1347 .cs-bubbles:before {
        /* white border bubble */
        content: "";
        width: 16.5rem;
        height: 16.5rem;
        background: transparent;
        opacity: 1;
        border: 1px solid #1a1a1a;
        border-radius: 50%;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        animation-name: floatAnimation;
        animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
    }
    #blog-1347 .cs-bubbles:after {
        /* orange bubble */
        content: "";
        width: 16.5rem;
        height: 16.5rem;
        background: var(--primary);
        opacity: 0.1;
        border-radius: 50%;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 14s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #blog-1347 .cs-bubbles {
        display: block;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #blog-1347 .cs-container {
        max-width: 80rem;
    }
    #blog-1347 .cs-item {
        grid-column: span 4;
    }
    #blog-1347 .cs-bubbles {
        top: 17.5625rem;
    }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #blog-1347 .cs-bubbles {
        margin-right: -61.875rem;
        right: 50%;
    }
}

                                


lord-icon {
    display: block;
    margin: auto;
}








 .whatsapp-float {
            position: fixed;
            left: 20px;
            bottom: 20px;
            display: flex;
            align-items: center;
            z-index: 100;
        }
        
        .whatsapp-float a {
            display: flex;
            align-items: center;
            text-decoration: none;
            background-color: #25D366;
            color: white;
            padding: 10px 15px;
            border-radius: 50px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .whatsapp-float a:hover {
            background-color: #128C7E;
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
        
        .whatsapp-icon {
            font-size: 28px;
            margin-right: 12px; /* Increased space between text and icon */
            margin-left: 0;
        }
        
        .whatsapp-text {
            font-family: Arial, sans-serif;
            font-weight: bold;
            font-size: 16px;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .whatsapp-float {
                left: 10px;
                bottom: 10px;
            }
            
            .whatsapp-float a {
                padding: 8px 12px;
            }
            
            .whatsapp-icon {
                font-size: 22px;
                margin-right: 8px;
            }
            
            .whatsapp-text {
                font-size: 14px;
            }
        }
        
        @media (max-width: 480px) {
            .whatsapp-icon {
                font-size: 20px;
                margin-right: 6px;
            }
            
            .whatsapp-text {
                font-size: 12px;
            }
        }







        .call-float {
    position: fixed;
    right: 20px; /* Changed to right side */
    bottom: 80px; /* Positions above WhatsApp button */
    display: flex;
    align-items: center;
    z-index: 100;
}

.call-float a {
    display: flex;
    align-items: center;
    text-decoration: none;
    background-color: #2196F3; /* Blue color */
    color: white;
    padding: 10px 15px 10px 20px; /* More padding on left for RTL */
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    flex-direction: row-reverse; /* RTL layout */
}

.call-float a:hover {
    background-color: #0b7dda;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.call-icon {
    font-size: 28px;
    margin-left: 12px; /* Switched to left margin for RTL */
    margin-right: 0;
}

.call-text {
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .call-float {
        right: 10px;
        bottom: 70px;
    }
    
    .call-icon {
        font-size: 22px;
        margin-left: 8px;
    }
}

@media (max-width: 480px) {
    .call-float a {
        padding: 8px 12px 8px 15px;
    }
    
    .call-icon {
        font-size: 20px;
        margin-left: 6px;
    }
    
    .call-text {
        font-size: 12px;
    }
}
































        /* Logo Styling */
        .header__logo img {
            max-height: 100%; /* Ensure it doesn't exceed the header height */
            height: 5cm; /* Default for mobile */
            width: 5cm; /* Default for mobile */
            object-fit: contain; /* Ensure the logo fits within the space */
        }
    
        @media (min-width: 64rem) { /* For desktop */
            .header__logo img {
                height: 7.5cm; /* Size for desktop */
                width: 7.5cm; /* Size for desktop */
            }
        }
.call-button {
  display: inline-block;
  background-color: #2196F3; /* Bright blue */
  color: white;
  padding: 20px 20px; /* Perfect square */
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.call-button:hover {
  background-color: #0b7dda; /* Darker blue on hover */
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}





















        .go-to-top {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 99;
            opacity: 0.5;
            transition: all 0.3s ease;
        }
        
        .go-to-top:hover {
            opacity: 1;
        }
        
        .go-to-top a {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            background-color: #232421;
            color: #f1da8a;
            padding: 12px 18px; /* Increased padding for better spacing */
            border-radius: 50px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            gap: 10px; /* Adds space between text and icon */
        }
        
        .go-to-top a:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        .arrow-icon {
            font-size: 20px;
        }
        
        .top-text {
            font-family: Arial, sans-serif;
            font-weight: bold;
            font-size: 16px;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .go-to-top {
                right: 15px;
                bottom: 15px;
            }
            
            .go-to-top a {
                padding: 10px 14px;
                gap: 8px; /* Slightly reduced gap on smaller screens */
            }
            
            .arrow-icon {
                font-size: 18px;
            }
            
            .top-text {
                font-size: 14px;
            }
        }
        
        @media (max-width: 480px) {
            .go-to-top {
                right: 10px;
                bottom: 10px;
            }
            
            .go-to-top a {
                gap: 6px;
            }
            
            .arrow-icon {
                font-size: 16px;
            }
            
            .top-text {
                font-size: 12px;
            }
        }