/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/
/* CodeStitch Core Styles + Reset */
@media only screen and (min-width: 0rem) {
  /* 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. */
  :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: #e25822;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    --bodyTextColorGray: #ebecf0;
    /* 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 */
    --fontPrimary: "Your Font Name", -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
      "Helvetica Neue", sans-serif;
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    --backgroundColor: #324547;
    --backgroundColorDark: #1e2224;
  }
  body {
    margin: 0;
    padding: 0;
    font-family: var(--fontPrimary);
  }
  *,
  *: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: 0.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);
  }
}
/* Components + Utilities */
@media only screen and (min-width: 0rem) {
  .skip {
    z-index: -1111111;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .cs-button-solid {
    z-index: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 1.125rem 2.25rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.0625rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    cursor: pointer;
    background: rgba(50, 69, 71, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(50, 69, 71, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: var(--bodyTextColorWhite);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  .cs-button-solid .calendly-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  .cs-button-solid .calendly-modal.active {
    display: flex;
  }
  .cs-button-solid .calendly-modal .calendly-modal-content {
    background: var(--backgroundColor);
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
  }
  .cs-button-solid .calendly-modal .calendly-modal-content .close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--bodyTextColorWhite);
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.3s ease;
  }
  .cs-button-solid .calendly-modal .calendly-modal-content .close-modal:hover {
    color: var(--primary);
  }
  .cs-button-solid:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
    z-index: -1;
  }
  .cs-button-solid:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(226, 88, 34, 0.8) 0%, rgba(255, 186, 67, 0.8) 100%);
    opacity: 0.9;
    z-index: -1;
    transition: opacity 0.3s ease;
  }
  .cs-button-solid:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  }
  .cs-button-solid:hover:after {
    opacity: 1;
  }
  .cs-button-solid:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
  .cs-button-solid:active:after {
    opacity: 0.8;
  }
  .cs-button-solid:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(226, 88, 34, 0.2);
  }
  .cs-button-solid:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  .cs-button-solid:disabled:hover {
    transform: none;
    box-shadow: none;
  }
  .cs-button-outline {
    z-index: 1;
    position: relative;
    display: inline-block;
    width: auto;
    padding: 1rem 2rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1em;
    font-weight: bold;
    border: 2px solid #000;
    color: #000;
    transition: color 0.3s;
    transition-delay: 0.1s;
    text-align: center;
  }
  .cs-button-outline:hover {
    color: #fff;
  }
  .cs-button-outline:hover:before {
    width: 100%;
  }
  .cs-button-outline:before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 1;
    display: block;
    background-color: #000;
    height: 100%;
    width: 0;
    transition: width 0.3s;
  }
  .cs-color {
    color: var(--primary);
  }
  .cs-bold {
    font-weight: 700;
  }
  .cs-hide-on-mobile {
    display: none !important;
  }
  .cs-dark,
  .dark {
    display: none !important;
  }
  body.dark-mode .cs-light,
  body.dark-mode .light {
    display: none !important;
  }
  body.dark-mode .cs-dark,
  body.dark-mode .dark {
    display: block !important;
  }
  body.dark-mode .cs-button-outline {
    border-color: #fff;
    color: #fff;
  }
}
/* Desktop Utilities */
@media only screen and (min-width: 64rem) {
  .cs-hide-on-mobile {
    display: block !important;
  }
  .cs-hide-on-desktop {
    display: none !important;
  }
}
/* Base Element Styles */
@media only screen and (min-width: 0rem) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--headerFont);
    line-height: 1.2em;
    color: var(--headerColor);
  }
  p,
  li,
  a {
    font-size: 1rem;
    line-height: 1.5em;
  }
  p,
  li {
    color: var(--bodyTextColor);
  }
  p a,
  li a {
    color: var(--primary);
  }
  a:hover,
  button:hover {
    cursor: pointer;
  }
  body.dark-mode {
    background-color: var(--dark);
  }
  body.dark-mode p,
  body.dark-mode li,
  body.dark-mode h1,
  body.dark-mode h2,
  body.dark-mode h3,
  body.dark-mode h4,
  body.dark-mode h5,
  body.dark-mode h6 {
    color: #fff;
  }
}
/* Fonts */
@media only screen and (min-width: 0rem) {
  /* roboto-regular - latin */
  @font-face {
    font-style: normal;
    font-family: "Roboto";
    font-weight: 400;
    font-display: swap;
    src: local(""), url("/assets/fonts/roboto-v29-latin-regular.woff2") format("woff2"), url("/assets/fonts/roboto-v29-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* roboto-700 - latin */
  @font-face {
    font-style: normal;
    font-family: "Roboto";
    font-weight: 700;
    font-display: swap;
    src: local(""), url("/assets/fonts/roboto-v29-latin-700.woff2") format("woff2"), url("/assets/fonts/roboto-v29-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* roboto-900 - latin */
  @font-face {
    font-style: normal;
    font-family: "Roboto";
    font-weight: 900;
    font-display: swap;
    src: local(""), url("/assets/fonts/roboto-v29-latin-900.woff2") format("woff2"), url("/assets/fonts/roboto-v29-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    top: 0;
  }
  body.scroll #cs-navigation:before {
    border-radius: 0;
  }
  body.scroll #cs-navigation .cs-ul-wrapper {
    border-radius: 0 0 0 1.5rem;
    top: 100%;
  }
  #cs-navigation {
    width: 94%;
    max-width: 80rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem);
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #cs-navigation:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: #272b2d;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 1;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.2s, border-radius 0.3s ease-in-out;
  }
  #cs-navigation.cs-active .cs-toggle {
    box-shadow: 0 6px 15px rgba(50, 69, 71, 0.5);
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    width: 60%;
    top: 85%;
    overflow: auto;
    transform: scaleY(1);
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    overflow: visible;
    transform: translateX(0);
  }
  #cs-navigation.cs-active .cs-li.cs-cta {
    margin: 0;
  }
  #cs-navigation.cs-active .cs-li.cs-cta .cs-button-6 {
    /* Base button styles */
    font-size: 1rem;
    line-height: 1.2em;
    text-decoration: none;
    font-weight: 700;
    text-align: left;
    margin: 0;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    transition: color 0.3s, background 0.3s, border 0.3s, transform 0.3s, box-shadow 0.3s;
    /* Default state - glass-morphism effect */
    background-color: rgba(50, 69, 71, 0.4);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(50, 69, 71, 0.3);
    backdrop-filter: blur(5px);
    letter-spacing: 0.03em;
    /* Icon styling */
  }
  #cs-navigation.cs-active .cs-li.cs-cta .cs-button-6 .cs-button-icon {
    transition: transform 0.3s ease;
  }
  #cs-navigation.cs-active .cs-li.cs-cta .cs-button-6:hover {
    background-color: rgba(50, 69, 71, 0.6);
    transform: translateX(-2px);
    box-shadow: 0 10px 25px rgba(50, 69, 71, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
  }
  #cs-navigation.cs-active .cs-li.cs-cta .cs-button-6:hover .cs-button-icon {
    transform: scale(1.1);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .logo-container {
    width: auto;
    max-width: 12.5rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .logo-container .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  #cs-navigation .logo-container .logo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
  }
  #cs-navigation .logo-container .logo .logo-text {
    color: var(--bodyTextColorWhite);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
  }
  #cs-navigation .cs-toggle {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 0 auto;
    /* Updated background to match service cards */
    background: linear-gradient(135deg, #324547 0%, #4a686b 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    box-shadow: 0 8px 20px rgba(50, 69, 71, 0.3);
    transition: box-shadow 0.3s ease;
  }
  #cs-navigation .cs-toggle:hover:not(.cs-active #cs-navigation .cs-toggle) {
    box-shadow: 0 10px 25px rgba(50, 69, 71, 0.4);
  }
  #cs-navigation .cs-nav {
    /* sends it to the right in the 2nd position */
    order: 2;
    flex: none;
    margin-left: auto;
  }
  #cs-navigation .cs-social {
    display: none;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 1rem;
    position: relative;
    /* Added subtle glass-morphism effect */
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #fafbfc;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Added subtle glow effect */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 20%;
    height: auto;
    max-height: 70vh;
    background-color: rgba(40, 50, 52, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    position: absolute;
    top: 20%;
    right: 0;
    left: auto;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.3s, width 0.5s, top 0.3s, background-color 0.3s;
    transform-origin: top right;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }
  #cs-navigation .cs-ul {
    width: auto;
    min-width: 40%;
    height: auto;
    margin: 0;
    display: flex;
    gap: 1.5rem; /* Add some space between nav items */
    /* 32px - 40px */
    padding: 4rem clamp(2rem, 3vw, 2.5rem) 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1.25rem;
    overflow: hidden;
  }
  #cs-navigation .cs-li {
    text-align: right;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateX(-2.5rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    display: inline-block;
    position: relative;
    color: var(--bodyTextColorWhite) !important;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-navigation .cs-contact-group {
    display: block;
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    top: 0;
  }
  #cs-navigation {
    width: 94%;
    max-width: 90rem;
    height: 6rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem) 0;
    background-color: #272b2d;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: flex;
    align-items: center;
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #cs-navigation .cs-container img {
    border-radius: 10px;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .logo {
    width: 18.4%;
    max-width: 35rem;
    height: 3.2rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    z-index: 100;
    text-decoration: none; /* Remove underline from the link */
    color: var(--bodyTextColorWhite); /* Set the text color to dark gray */
  }
  #cs-navigation .logo .logo-text {
    color: inherit; /* Inherit the color from the parent */
    text-decoration: none; /* Ensure no underline on the text */
    margin: 0; /* Remove any default margins */
    font-size: 1.8rem; /* Adjust the font size as needed */
    font-weight: 800; /* Make the text slightly bolder */
  }
  #cs-navigation .logo img {
    width: auto;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-social {
    height: 2rem;
    opacity: 1;
    display: none;
    visibility: visible;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    /* Remove absolute positioning to allow flex layout */
    position: static;
    transform: none;
    margin-left: auto; /* Push the nav to the right */
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    /* prevent flexbox from squishing it */
    flex: none;
    /* Style for CTA button */
  }
  #cs-navigation .cs-li.cs-cta {
    margin-left: 1rem;
    height: 100%;
    display: flex;
    align-items: center;
  }
  #cs-navigation .cs-li.cs-cta .cs-button-6 {
    /* Base button styles */
    font-size: 1rem;
    line-height: 1.2em;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    min-width: 9.375rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    transition: color 0.3s, background 0.3s, border 0.3s, transform 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
    /* Default state (above fold) - glass-morphism effect */
    background-color: rgba(50, 69, 71, 0.4);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(50, 69, 71, 0.3);
    backdrop-filter: blur(5px);
    letter-spacing: 0.03em;
    /* Icon styling */
    /* Scrolled state - gradient style */
  }
  #cs-navigation .cs-li.cs-cta .cs-button-6 .cs-button-icon {
    transition: transform 0.3s ease;
  }
  #cs-navigation .cs-li.cs-cta .cs-button-6:hover {
    background-color: rgba(50, 69, 71, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(50, 69, 71, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
  }
  #cs-navigation .cs-li.cs-cta .cs-button-6:hover .cs-button-icon {
    transform: scale(1.1);
  }
  #cs-navigation .cs-li.cs-cta .cs-button-6.scrolled {
    color: #fff;
    background: linear-gradient(135deg, #324547 0%, #4a686b 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: none;
  }
  #cs-navigation .cs-li.cs-cta .cs-button-6.scrolled:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(50, 69, 71, 0.6);
  }
  #cs-navigation .cs-li-link {
    font-size: 1.1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: block;
    position: relative;
    transition: color 0.3s;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 2rem;
    color: #fff;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #fff;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover {
    color: #1a1a1a;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cs-navigation .cs-social {
    display: flex;
    justify-content: space-between;
  }
}
/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-310 {
    /* 144px - 252px */
    padding-top: clamp(9rem, 25vw, 15.75rem);
    /* 80px - 140px */
    padding-bottom: clamp(5rem, 13vw, 8.75rem);
    position: relative;
    z-index: 1;
  }
  #banner-310 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #banner-310 .cs-int-title {
    /* 39px - 49px */
    font-size: clamp(2.4375rem, 4.5vw, 3.0625rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    max-width: 43.75rem;
    margin: 0 auto 0.75rem;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #banner-310 .cs-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #banner-310 .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.2em;
    text-decoration: none;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #banner-310 .cs-link:last-of-type {
    /* remove the chevron on the last list item */
  }
  #banner-310 .cs-link:last-of-type::after {
    display: none;
  }
  #banner-310 .cs-link:after {
    /* chevron - added as pseudo to make adding and removing them easier */
    content: "";
    width: 0.4375rem;
    height: 0.75rem;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    background: url("/assets/svgs/chevron.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  #banner-310 .cs-link.cs-active {
    color: var(--primaryLight);
  }
  #banner-310 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: -1;
  }
  #banner-310 .cs-background:before {
    /* black overlay box */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.72;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #banner-310 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-51 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #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-picture {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    z-index: -1;
    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;
  }
}