/* Global Code */
:root {
    /* Color and sizing variables */
    --primary: #EF3340;
    --primaryLight: #ef333f;
    --secondary: #EF3340;
    --secondaryLight: #EF3340;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;

    /* Typography sizes */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); /* 13px - 16px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); /* 31px - 49px */
    --bodyFontSize: 1.1rem;

    /* Spacing */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
@font-face {
  font-family: 'EurostileExtendedBlack';
  src: url('../fonts/EurostileExtendedBlack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

/* Universal resets */
body {
    margin: 0;
    padding: 0;
    font-family: "Rubik", sans-serif;
    font-size: var(--bodyFontSize);
    color: var(--bodyTextColor);
    line-height: 1.5em;
}

*, *:before, *:after {
    box-sizing: border-box;
}

/* Header styles */
h1, h2, h3, h4, h5, h6 {
    font-family: "EurostileExtendedBlack", sans-serif; /* Header font remains Source Sans 3 */
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
}

/* Links */
a {
    font-family: "EurostileExtendedBlack", sans-serif;
    color: var(--primary);
    text-decoration: none;
}

/* Specific styles for reusable components */
.cs-topper {
    font-size: var(--topperFontSize);
    font-family: "EurostileExtendedBlack", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-family: "EurostileExtendedBlack", sans-serif;
    font-weight: 900;
    color: var(--headerColor);
    margin: 0 0 1rem 0;
}

.cs-text {
    font-size: var(--bodyFontSize);
    font-family: "Rubik", sans-serif;
    color: var(--bodyTextColor);
    margin: 1rem 0 0 0;
}

/* Utility classes for weights */
.font-light {
    font-weight: 200;
}

.font-regular {
    font-weight: 400;
}

.font-bold {
    font-weight: 700;
}

/* Global Code Ends */


/*-- -------------------------- -->
<---     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 {
      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: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      opacity: 1;
      /* 12px - 24px */
      border-radius: clamp(2rem, 4vw, 3.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:before {
      transform: translateX(-50%) scale(1.03);
    }
    #cs-navigation.cs-active .cs-toggle {
      transform: rotate(180deg);
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
      transform: scaleY(1);
      transition-delay: 0.15s;
    }
    #cs-navigation.cs-active .cs-li {
      opacity: 1;
      transform: translateY(0);
    }
    #cs-navigation .cs-container {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-logo {
      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 .cs-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    #cs-navigation .cs-toggle {
      width: 3.5rem;
      height: 3.5rem;
      margin: 0 0 0 auto;
      background-color: var(--primary);
      border: none;
      border-radius: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 10;
      transition: transform 0.6s;
    }
    #cs-navigation .cs-nav {
      /* sends it to the right in the 3rd position */
      order: 3;
    }
    #cs-navigation .cs-contact-group {
      display: none;
      position: relative;
      z-index: 10;
    }
    #cs-navigation .cs-phone {
      font-size: 1rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      transition: opacity 0.3s, color 0.3s;
    }
    #cs-navigation .cs-phone-icon {
      width: 1.5rem;
      height: auto;
      display: block;
    }
    #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;
    }
    #cs-navigation .cs-line {
      width: 100%;
      height: 2px;
      background-color: #fafbfc;
      border-radius: 2px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #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: 100%;
      height: auto;
      padding-bottom: 2.4em;
      background-color: #fff;
      border-radius: 0 0 1.5rem 1.5rem;
      position: absolute;
      top: 85%;
      left: 0;
      z-index: -1;
      overflow: hidden;
      transform: scaleY(0);
      transition: transform 0.4s;
      transform-origin: top;
    }
    #cs-navigation .cs-ul {
      width: 100%;
      height: auto;
      max-height: 65vh;
      margin: 0;
      padding: 4rem 0 0 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 1.25rem;
      overflow: auto;
    }
    #cs-navigation .cs-li {
      text-align: center;
      list-style: none;
      width: 100%;
      margin-right: 0;
      opacity: 0;
      /* transition from these values */
      transform: translateY(-70/16rem);
      transition: transform 0.6s, opacity 0.9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
      transition-delay: 0.05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
      transition-delay: 0.1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
      transition-delay: 0.15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
      transition-delay: 0.2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
      transition-delay: 0.25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
      transition-delay: 0.3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
      transition-delay: 0.35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
      transition-delay: 0.4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
      transition-delay: 0.45s;
    }
    #cs-navigation .cs-li:nth-of-type(10) {
      transition-delay: 0.5s;
    }
    #cs-navigation .cs-li:nth-of-type(11) {
      transition-delay: 0.55s;
    }
    #cs-navigation .cs-li:nth-of-type(12) {
      transition-delay: 0.6s;
    }
    #cs-navigation .cs-li:nth-of-type(13) {
      transition-delay: 0.65s;
    }
    #cs-navigation .cs-li-link {
      /* 16px - 24px */
      font-size: clamp(1rem, 2.5vw, 1.5rem);
      line-height: 1.2em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: inline-block;
      position: relative;
    }
    #cs-navigation .cs-li-link.cs-active {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link:hover {
      color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
      display: none;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #cs-navigation .cs-contact-group {
      display: block;
    }
  }
  /*-- -------------------------- -->
  <---     Navigation Dropdown    -->
  <--- -------------------------- -*/
  /* Mobile - 1023px */
  @media only screen and (max-width: 63.9375rem) {
    #cs-navigation .cs-li {
      text-align: center;
      width: 100%;
      display: block;
    }
    #cs-navigation .cs-dropdown {
      color: var(--bodyTextColorWhite);
      position: relative;
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
      height: auto;
      margin: 0.75rem 0 0 0;
      padding: 0.75rem 0;
      opacity: 1;
      visibility: visible;
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
      opacity: 1;
    }
    #cs-navigation .cs-dropdown .cs-li-link {
      position: relative;
      transition: opacity 0.3s;
    }
    #cs-navigation .cs-drop-icon {
      width: 0.9375rem;
      height: auto;
      position: absolute;
      top: 50%;
      right: -1.25rem;
      transform: translateY(-50%);
    }
    #cs-navigation .cs-drop-ul {
      width: 100%;
      height: 0;
      margin: 0;
      padding: 0;
      background-color: var(--primary);
      opacity: 0;
      display: flex;
      visibility: hidden;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 0.75rem;
      overflow: hidden;
      transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
    }
    #cs-navigation .cs-drop-li {
      list-style: none;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 2vw, 1.25rem);
      color: #fff;
    }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cs-navigation .cs-dropdown {
      position: relative;
    }
    #cs-navigation .cs-dropdown:hover {
      cursor: pointer;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-ul {
      opacity: 1;
      visibility: visible;
      transform: scaleY(1);
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-li {
      opacity: 1;
      transform: translateY(0);
    }
    #cs-navigation .cs-drop-icon {
      width: 0.9375rem;
      height: auto;
      display: inline-block;
    }
    #cs-navigation .cs-drop-ul {
      min-width: 12.5rem;
      margin: 0;
      padding: 0;
      background-color: #fff;
      box-shadow: inset rgba(149, 157, 165, 0.1) 0px 8px 10px;
      opacity: 0;
      border-bottom: 5px solid var(--primary);
      border-radius: 0 0 1.5rem 1.5rem;
      visibility: hidden;
      /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
      position: absolute;
      top: 100%;
      z-index: -100;
      overflow: hidden;
      transform: scaleY(0);
      transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
      transform-origin: top;
    }
    #cs-navigation .cs-drop-li {
      font-size: 1rem;
      text-decoration: none;
      list-style: none;
      width: 100%;
      height: auto;
      opacity: 0;
      display: block;
      transform: translateY(-0.625rem);
      transition: opacity 0.6s, transform 0.6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(1) {
      transition-delay: 0.05s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(2) {
      transition-delay: 0.1s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(3) {
      transition-delay: 0.15s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(4) {
      transition-delay: 0.2s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(5) {
      transition-delay: 0.25s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(6) {
      transition-delay: 0.3s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(7) {
      transition-delay: 0.35s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(8) {
      transition-delay: 0.4s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(9) {
      transition-delay: 0.45s;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      font-size: 1rem;
      line-height: 1.5em;
      text-transform: capitalize;
      text-decoration: none;
      white-space: nowrap;
      width: 100%;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      padding: 0.75rem;
      color: var(--headerColor);
      display: block;
      transition: color 0.3s, background-color 0.3s;
    }
    #cs-navigation .cs-li-link.cs-drop-link:hover {
      color: var(--bodyTextColorWhite);
      background-color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-drop-link:before {
      display: none;
    }
  }
  /*-- -------------------------- -->
  <---     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.2rem) 0;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      /* 12px - 24px */
      border-radius: clamp(2.75rem, 4vw, 3.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;
      gap: 1.5rem;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }
    #cs-navigation .cs-logo {
      width: 18.4%;
      max-width: 21.875rem;
      height: 4rem;
      /* 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;
      z-index: 100;
    }
    #cs-navigation .cs-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-contact-group {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-phone {
      font-size: 1rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      transition: opacity 0.3s, color 0.3s;
    }
    #cs-navigation .cs-phone-icon {
      width: 1.5rem;
      height: auto;
      display: block;
    }
    #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-social-link {
      text-decoration: none;
      width: 2rem;
      height: 2rem;
      background-color: #f7f7f7;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s;
    }
    #cs-navigation .cs-social-link:hover {
      background-color: var(--primary);
    }
    #cs-navigation .cs-social-link:hover .cs-social-icon {
      opacity: 1;
      filter: grayscale(1) brightness(10000%);
    }
    #cs-navigation .cs-social-icon {
      width: 0.75rem;
      height: auto;
      opacity: 0.6;
      display: block;
      transition: opacity 0.3s;
    }
    #cs-navigation .cs-ul-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
      /* absolutely positioned to be dead center */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    #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;
    }
    #cs-navigation .cs-li-link {
      font-size: 1.3rem;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      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);
      border-bottom: 2.5px solid;
    }
    #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;
      border-radius: 1.875rem;    
    }
    #cs-navigation .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #1a1a1a;
      opacity: 1;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
      border-radius: 1.875rem;    

    }
    #cs-navigation .cs-button-solid:hover {
      color: var(--primary);
    }
    #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;
    }
  }
                                  

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    @keyframes floatAnimation {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-2rem);
      }
      100% {
        transform: translateY(0);
      }
    }
    @keyframes floatAnimation2 {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-3rem);
      }
      100% {
        transform: translateY(0);
      }
    }
    #hero-1349 {
      box-sizing: border-box;
      /* 250px - 500px - leaving extra space for the navigation */
      padding: clamp(15.625rem, 35.95vw, 25rem) 1rem 0;
      /* 200px - 250px */
      padding-bottom: clamp(12.5rem, 16.5vw, 15.625rem);
      overflow: hidden;
      position: relative;
      z-index: 1;
      background: #1a1a1a;
    }
    #hero-1349:before {
      /* Overlay */
      content: "";
      width: 100%;
      height: 30%;
      background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(rgba(0, 0, 0, 0)));
      background: -o-linear-gradient(top, #000000 0%, rgba(0, 0, 0, 0) 100%);
      background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0) 100%);
      /* prevents the cursor from interacting with it */
      pointer-events: none;
      opacity: 1;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
    #hero-1349 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    #hero-1349 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      /* max-width: 39.375rem; */
      max-width: 60rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
    }
    #hero-1349 .cs-topper {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.2em;
      text-align: inherit;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
      color: #e8e8e8;
      display: block;
    }
    #hero-1349 .cs-magic {
      width: auto;
      background-color: #e4f1f4;
      /* border: 0.1px solid #e4f1f4; */
      text-transform: uppercase;
      font-weight: bold;
      border-radius: 0.5rem;
      padding: 0 0.75rem;
    }
    #hero-1349 .cs-text-top {
      font-size: 1.25rem;
      line-height: 1.5em;
      text-align: inherit;
      /* 464px - 622px */
      margin: 0 0 2.5rem 0;
      color: #000;
    }
    #hero-1349 .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: 60rem;
      /* max-width: 20ch;  */
      margin: 0 0 1rem 0; 
      color: #fff;
      position: relative;
      /* max-width: 51.8125rem;
      margin: 0 auto clamp(1rem, 4vw, 1.5rem); */
      
    }
    #hero-1349 .cs-text {
      font-size: 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: #e8e8e8;
    }
    #hero-1349 .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      line-height: 3.5rem;
      text-decoration: none;
      margin: 0;
      padding: 0 3rem;
      background-color: var(--primary);
      overflow: hidden;
      color: #fff;
      border-radius: 1.875rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
    }
    #hero-1349 .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #fff;
      opacity: 1;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #hero-1349 .cs-button-solid:hover {
      color: var(--primary);
    }
    #hero-1349 .cs-button-solid:hover:before {
      width: 100%;
    }
    #hero-1349 .cs-bubbles {
      /* this scales the children inside of it down. They're all in ems so they pull from the parent font size for their value of em, in this case, the value of em is tied to the viewwidth size and stops growing when the font size is equal to 1em, which it pulls from the nearst parent with a declred font size (which is the html tag, and that tag is 16px by default) */
      font-size: min(2vw, .5em);
      position: absolute;
      z-index: -1;
    }
    #hero-1349 .cs-bubbles1 {
      width: 42.5em;
      height: 45.25em;
      /* changes to 172 at large desktop */
      top: 0;
      right: -11.875rem;
    }
    #hero-1349 .cs-bubbles1:before {
      /* white border bubble */
      content: "";
      width: 38.875em;
      height: 38.875em;
      background: transparent;
      opacity: 1;
      border: 1px solid #fff;
      border-radius: 50%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      animation-name: floatAnimation;
      animation-duration: 7s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
    }
    #hero-1349 .cs-bubbles1:after {
      /* orange bubble */
      content: "";
      width: 34.125em;
      height: 34.125em;
      background: var(--primary);
      opacity: 0.8;
      border-radius: 50%;
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: -1;
      animation-name: floatAnimation2;
      animation-duration: 10s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
    }
    #hero-1349 .cs-bubbles2 {
      width: 20.625rem;
      height: 29.75rem;
      /* removed at larger desktop */
      bottom: -16.25rem;
      /* changes to 160px at larger desktop */
      left: -13.75rem;
    }
    #hero-1349 .cs-bubbles2:before {
      /* white border bubble */
      content: "";
      width: 20.625rem;
      height: 20.625rem;
      background: transparent;
      opacity: 1;
      border: 1px solid #fff;
      border-radius: 50%;
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      animation-name: floatAnimation;
      animation-duration: 5s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
    }
    #hero-1349 .cs-bubbles2:after {
      /* orange bubble */
      content: "";
      width: 16.25rem;
      height: 16.25rem;
      background: var(--primary);
      opacity: 0.8;
      border-radius: 50%;
      display: block;
      position: absolute;
      top: 0;
      right: 2.5rem;
      z-index: -1;
      animation-name: floatAnimation2;
      animation-duration: 14s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
    }
    #hero-1349 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
      background: #1a1a1a;
    }
    #hero-1349 .cs-background:before {
      /* Overlay */
      content: "";
      width: 100%;
      height: 100%;
      background: #1a1a1a;
      /* prevents the cursor from interacting with it */
      pointer-events: none;
      opacity: 0.4;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    /* #hero-1349 .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      position: absolute;
      top: 0;
      left: 0;
    } */
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #hero-1349 .cs-container {
      align-items: center;
    }
    #hero-1349 .cs-content {
      text-align: center;
      align-items: center;
    }
    #hero-1349 .cs-bubbles {
      font-size: 1em;
    }
    #hero-1349 .cs-bubbles1 {
      /* changes to auto at large desktop */
      right: -26.75rem;
    }
  }
  /* Large Desktop - 1300px */
  @media only screen and (min-width: 81.25rem) {
    #hero-1349 .cs-bubbles1 {
      /* 200px - 550px */
      margin-left: clamp(12.5rem, 32vw, 34.375rem);
      top: 10.75rem;
      right: auto;
      left: 50%;
    }
  }
  
  /* Larger Desktop - 1800px */
  @media only screen and (min-width: 112.5rem) {
    #hero-1349 .cs-bubbles2 {
      margin-right: 50rem;
      top: 13.125rem;
      right: 50%;
      bottom: auto;
      left: auto;
    }
  }
                                  


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

    #services-1378 .cs-topper {
        color: var(--primary);
    }
    #services-1378 .cs-content {
        margin-bottom: clamp(2.5rem, 5vw, 4rem);
    }
    #services-1378 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        column-gap: clamp(1rem, 2vw, 1.25rem);
        /* 72px - 84px */
        row-gap: clamp(4.5rem, 6vw, 5.25rem);
    }

    #services-1378 .cs-item {
        /* change to left if you want text aligned to the left */
        text-align: center;
        list-style: none;
        width: 100%;
        /* 210px - 305px */
        min-height: clamp(13.125rem, 30vw, 19.0625rem);
        margin: 0;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        /* 16px - 40px */
        padding: clamp(1rem, 3vw, 2.5rem);
        padding-top: 0;
        background-color: #f4f4f4;
        border-radius: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-column: span 12;
        position: relative;
        z-index: 1;
        transition: background-color 0.3s;
    }
    #services-1378 .cs-item:hover {
        background-color: var(--primary);
    }
    #services-1378 .cs-item:hover .cs-picture {
        background-color: var(--primary);
    }
    #services-1378 .cs-item:hover .cs-icon,
    #services-1378 .cs-item:hover .cs-arrow {
        filter: grayscale(1) brightness(1000%);
    }
    #services-1378 .cs-item:hover .cs-h3,
    #services-1378 .cs-item:hover .cs-item-text {
        color: #fff;
    }
    #services-1378 .cs-item:hover .cs-item-text {
        opacity: 0.8;
    }
    #services-1378 .cs-item:hover .cs-link {
        border-color: #fff;
    }
    #services-1378 .cs-picture {
        width: 5.5rem;
        height: 5.5rem;
        margin: -2.75rem 0 clamp(1.75rem, 3vw, 2.25rem) 0;
        box-sizing: border-box;
        background-color: var(--primary);
        border: 2px solid #fff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s background-color;
    }
 
    #services-1378 .cs-icon {
        /* width: 2rem; */
        /* height: auto; */
        transition: filter 0.3s;
        color: #fff;
        font-size: 2rem;
    }
    #services-1378 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
        font-weight: bold;
        line-height: 1.2em;
        text-align: inherit;
        /* if a word is too long for the card, break it onto a new line */
        word-break: break-word;
        margin: 0 0 0.75rem;
        transition: color 0.3s;
    }
    #services-1378 .cs-item-text {
        font-size: 1rem;
        line-height: 1.5em;
        text-align: inherit;
        margin: 0 0 2rem;
        color: var(--bodyTextColor);
        transition: 0.3s color;
    }
    #services-1378 .cs-link {
        text-decoration: none;
        width: 4rem;
        height: 4rem;
        color: var(--headerColor);
        border: 1px solid #bababa;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents the parent flexbox from shrinking the arrow */
        flex-shrink: 0;
        gap: 0.625rem;
        transition: border-color 0.3s;
    }
    #services-1378 .cs-arrow {
        width: auto;
        height: 0.75rem;
        transition: filter 0.3s;
    }

    #services-1378 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(1.875em, 3.5vw, 2.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 1.5rem;
    color: #fff;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
    border-radius: 1.875rem; 
    }

    #services-1378 .cs-item:hover .cs-button-solid {
        color: var(--primary);
        background-color: #fff;
    }
}

#services-1378 .cs-item:hover .cs-fake-link {
    color: #fff;
}

/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
    #services-1378 .cs-item {
        grid-column: span 6;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #services-1378 .cs-item {
        grid-column: span 4;
    }
}

/*-- -------------------------- -->
<---Is Your Website Holding You Back?-->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-498 {
      /* we use margin here instead of padding because we want to create the space OUTSIDE the section.  The overflow on the section clips the boxes we made to make the slanted designs, so we need to push from the outside of the section with margin to create space between it and the next section.  If the section above this Stitch has a white background, add margin-top: 0. If it has a white section below it, add margin-bottom: 0. This will allow more proper spacing and not have too much empty space.  If both sections above and below this Stitch have white backgrounds, you can just remove this margin all together. Or remove the margin however you see fit. We add it in case you need it, if you dont then you can remove it */
      margin-top: var(--sectionPadding);
      margin-left: 0;
      margin-right: 0;
      padding: 0 1rem;
      /* prevents overflow from the slant shape */
      overflow: hidden;
      position: relative;
      z-index: 1;
  }
  #sbsr-498:before {
      /* section background */
      content: "";
      width: 100%;
      height: 100%;
      background: var(--primary);
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #sbsr-498 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      /* 60px - 100px top and bottom */
      padding: clamp(3.75rem, 6.82vw, 6.25rem) 0;
      /* maintains proportional margin top as screen size grows */
      margin-top: 56vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      position: relative;
      /* places it on top of the cs-background */
      z-index: 10;
  }
  #sbsr-498 .cs-container:before {
      /* section slant on mobile */
      content: "";
      width: 62.5rem;
      height: 125rem;
      background: #1a1a1a;
      opacity: 1;
      position: absolute;
      z-index: -1;
      display: block;
      top: -28.75rem;
      /* these last two center it horizontally and rotate -65deg */
      left: 50%;
      transform: translateX(-50%) rotate(-65deg);
  }
  #sbsr-498 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 32.625rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #sbsr-498 .cs-topper,
  #sbsr-498 .cs-title {
      color: var(--bodyTextColorWhite);
  }
  #sbsr-498 .cs-text {
      margin-bottom: 1rem;
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
  }
  #sbsr-498 .cs-ul .cs-item {
      color: #fafbfc;
      opacity: 0.8; 
      line-height: 2.3rem;
  }
  #sbsr-498 .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: var(--primary);
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: var(--bodyTextColorWhite);
      border-radius: 1.875rem;      
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #sbsr-498 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: var(--secondary);
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 1.875rem;      
      transition: width 0.3s;
  }
  #sbsr-498 .cs-button-solid:hover:before {
      width: 100%;
  }
  #sbsr-498 .cs-background {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
  }
  #sbsr-498 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  #sbsr-498 .cs-flex {
      width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-498:before {
      /* remove the pseudo for the section background */
      display: none;
  }
  #sbsr-498 .cs-background {
      width: 60%;
      /* reset height to let top and bottom properties create the height */
      height: auto;
      aspect-ratio: initial;
      position: absolute;
      /* creates the gap between the image and the blue section */
      top: 3.75rem;
      bottom: 0;
      right: 0;
      left: auto;
  }
  #sbsr-498 .cs-background img {
      object-position: 80% top;
  }
  #sbsr-498 .cs-container {
      margin-top: 0;
  }
  #sbsr-498 .cs-container:before {
      /* make really tall so it always covers top to bottom, even when you add more list items */
      height: 250rem;
      /* make really really wide so it covers the left side at large scree sizes */
      width: 250rem;
      /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
      margin-right: -68.75rem;
      top: 50%;
      left: auto;
      /* pushes the right edge of the element to the center line of the parent */
      right: 50%;
      transform: rotate(-35deg) translateY(-50%);
  }
  #sbsr-498 .cs-content {
      width: 50%;
  }
}

                              

/*-- -------------------------- -->
<---    We Handle Everything    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2rem);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3rem);
        }
        100% {
            transform: translateY(0);
        }
    }
         
    #why-choose-1371 {
        padding: var(--sectionPadding);
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    #why-choose-1371 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #why-choose-1371 .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;
    }
    #why-choose-1371 .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;
    }
    #why-choose-1371 .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;
    }
    #why-choose-1371 .cs-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #why-choose-1371 .cs-title {
        max-width: 23ch;
    }
    #why-choose-1371 .cs-text {
        max-width: 52.5rem;
        margin-bottom: 1rem;
    }
    #why-choose-1371 .cs-text:last-of-type {
        margin-bottom: 0rem;
    }
    #why-choose-1371 .cs-text strong {
        color: var(--headerColor);
    }
    #why-choose-1371 .cs-item-picture {
        list-style: none;
        width: 100%;
        grid-column: span 12;
        position: relative;
    }
    #why-choose-1371 .cs-picture {
        width: 100%;
        height: 26.125rem;
        border-radius: 1.5rem;
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 1;
    }
    #why-choose-1371 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    #why-choose-1371 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        align-items: stretch6;
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #why-choose-1371 .cs-item {
        list-style: none;
        /* 16px - 24px */
        padding: clamp(1rem, 3vw, 1.5rem);
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        background-color: #f7f7f7;
        border-radius: 1rem;
        border: 1px solid #e8e8e8;
        display: flex;
        grid-column: span 12;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        transition: background-color 0.3s;
    }
    #why-choose-1371 .cs-item:hover {
        background-color: var(--primary);
    }
    #why-choose-1371 .cs-item:hover .cs-h3,
    #why-choose-1371 .cs-item:hover .cs-item-text {
        color: var(--bodyTextColorWhite);
    }
    #why-choose-1371 .cs-item:hover .cs-item-text {
        opacity: 0.8;
    }
    #why-choose-1371 .cs-item:hover .cs-h3-icon {
        filter: grayscale(1) brightness(1000%);
    }
    #why-choose-1371 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.5rem;
        transition: color 0.3s;
    }
    #why-choose-1371 .cs-h3-icon {
        width: 1.5rem;
        height: auto;
        margin-top: 2px;
        display: block;
    }
    #why-choose-1371 .cs-item-text {
        font-size: 0.875rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        transition:
            color 0.3s,
            opacity 0.3s;
    }
    #why-choose-1371 .cs-button-solid {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        overflow: hidden;
        margin: 0;
        color: #fff;
        padding: 0 3rem;
        border-radius: 1.875rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }
    #why-choose-1371 .cs-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #1a1a1a;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #why-choose-1371 .cs-button-solid:hover {
        color: var(--primary);
    }
    #why-choose-1371 .cs-button-solid:hover:before {
        width: 100%;
    }
    #why-choose-1371 .cs-bubbles1 {
        width: 26.1875rem;
        height: 26.6875rem;
        position: absolute;
        left: -16.25rem;
        top: -15rem;
        z-index: -1;
    }
    #why-choose-1371 .cs-bubbles1:before {
        /* white border bubble */
        content: "";
        width: 20.625rem;
        height: 20.625rem;
        background: transparent;
        border: 1px solid #1a1a1a;
        border-radius: 50%;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        animation-name: floatAnimation;
        animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #why-choose-1371 .cs-bubbles1:after {
        /* orange bubble */
        content: "";
        width: 16.25rem;
        height: 16.25rem;
        background: var(--primary);
        opacity: 0.1;
        border-radius: 50%;
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 14s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #why-choose-1371 .cs-bubbles2 {
        width: 26.1875rem;
        height: 26.6875rem;
        display: block;
        position: absolute;
        /* changes to 160px at larger desktop */
        right: -11.25rem;
        bottom: -8.75rem;
        z-index: -1;
    }
    #why-choose-1371 .cs-bubbles2:before {
        /* white border bubble */
        content: "";
        width: 20.625rem;
        height: 20.625rem;
        background: transparent;
        border: 1px solid #1a1a1a;
        border-radius: 50%;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        animation-name: floatAnimation;
        animation-duration: 7s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #why-choose-1371 .cs-bubbles2:after {
        /* orange bubble */
        content: "";
        width: 16.25rem;
        height: 16.25rem;
        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: 9s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-1371 .cs-item {
        grid-column: span 4;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #why-choose-1371 .cs-item-picture {
        grid-column: 4 / span 6;
        grid-row: 1 / span 3;
    }
    #why-choose-1371 .cs-picture {
        height: 100%;
    }
    #why-choose-1371 .cs-item {
        grid-column: span 2;
    }
    #why-choose-1371 .cs-item:nth-of-type(1) {
        grid-column: 1 / span 3;
        grid-row: 1 / span 1;
    }
    #why-choose-1371 .cs-item:nth-of-type(2) {
        grid-column: 1 / span 3;
        grid-row: 2 / span 1;
    }
    #why-choose-1371 .cs-item:nth-of-type(3) {
        grid-column: 1 / span 3;
        grid-row: 3 / span 1;
    }
    #why-choose-1371 .cs-item:nth-of-type(5) {
        grid-column: 10 / span 3;
        grid-row: 1 / span 1;
    }
    #why-choose-1371 .cs-item:nth-of-type(6) {
        grid-column: 10 / span 3;
        grid-row: 2 / span 1;
    }
    #why-choose-1371 .cs-item:nth-of-type(7) {
        grid-column: 10 / span 3;
        grid-row: 3 / span 1;
    }
    #why-choose-1371 .cs-bubbles1 {
        left: -8.125rem;
        top: -9.375rem;
    }
}
/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
    #why-choose-1371 .cs-bubbles1 {
        margin-right: 40.625rem;
        left: auto;
        right: 50%;
    }
    #why-choose-1371 .cs-bubbles2 {
        margin-left: 37.5rem;
        left: 50%;
        right: auto;
    }
}


/*-- -------------------------- -->
<---            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;
      padding: 0 10rem
  }
  #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: 1.875rem;      
      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: 1.875rem;      
      transition: width 0.3s;
      border-radius: 1.875rem;      
  }
  #cta-51 .cs-button-solid:hover {
    color: var(--primary);    
}
  #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;
  }
}

@media only screen and (max-width: 766px) {
  #cta-51 .cs-text {
      padding: 0 0;
  }
}                            
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1260 {
      padding: var(--sectionPadding);
      /* clips svg graphic from overflowing the section */
      overflow: hidden;
      position: relative;
      z-index: 1;
  }
  #pricing-1260 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 34.375em;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px, changes to 20px at large desktop */
      gap: clamp(3rem, 6vw, 4rem);
      position: relative;
  }
  #pricing-1260 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      max-width: 40.1875rem;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
    }
  #pricing-1260 .cs-text {
      margin-bottom: 1rem;
  }
  #pricing-1260 .cs-text:last-of-type {
      margin-bottom: 2rem;
      margin-top: 0.5em;
  }
  #pricing-1260 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: var(--primary);
      overflow: hidden;
      border-radius: 1.875rem;      
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #pricing-1260 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #pricing-1260 .cs-button-solid:hover:before {
      width: 100%;
  }
  #pricing-1260 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      /* prevents flexbox from squishing it */
      flex: none;
  }
  #pricing-1260 .cs-item {
      text-align: left;
      list-style: none;
      width: 100%;
      margin: 0;
      padding: 1.5rem 1.5rem;
      background-color: #fff;
      border: 1px solid #dad9e3;
      border-radius: 1.5rem 0 0 0;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      position: relative;
      z-index: 1;
  }
  #pricing-1260 .cs-item.cs-popular {
      background-color: #1a1a1a;
      border-radius: 0 0 1.5rem 0;
      border: none;
  }
  #pricing-1260 .cs-item.cs-popular .cs-popular-tag {
      display: inline-flex;
  }
  #pricing-1260 .cs-item.cs-popular .cs-package,
  #pricing-1260 .cs-item.cs-popular .cs-price,
  #pricing-1260 .cs-item.cs-popular .cs-duration,
  #pricing-1260 .cs-item.cs-popular .cs-item-text,
  #pricing-1260 .cs-item.cs-popular .cs-li {
      color: var(--bodyTextColorWhite);
  }
  #pricing-1260 .cs-item.cs-popular .cs-item-text,
  #pricing-1260 .cs-item.cs-popular .cs-li {
      opacity: 0.8;
  }
  #pricing-1260 .cs-item.cs-popular .cs-icon {
      filter: none;
      opacity: 1;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent {
      background-color: var(--primary);
      color: var(--bodyTextColorWhite);
      border: none;
      transition: color 0.3s;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent:before {
      background-color: #fff;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent:hover {
      color: var(--primary);
  }
  #pricing-1260 .cs-popular-tag {
      font-size: 0.875rem;
      line-height: 1.2em;
      text-align: center;
      width: auto;
      margin: 0;
      padding: 0.25rem 0.75rem;
      box-sizing: border-box;
      color: #ff9b7d;
      overflow: hidden;
      border-radius: 0.25rem;
      display: none;
      justify-content: center;
      align-items: center;
      position: absolute;
      /* same as cs-item padding top */
      top: 1.5rem;
      right: 1.5rem;
      z-index: 1;
  }
  #pricing-1260 .cs-popular-tag:before {
      /* background color overlay */
      content: "";
      width: 100%;
      height: 100%;
      background: var(--primary);
      opacity: 0.16;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #pricing-1260 .cs-picture {
      width: 4.75rem;
      height: 4.75rem;
      margin-bottom: 1.5rem;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }
  #pricing-1260 .cs-picture:before {
      /* background color */
      content: "";
      width: 100%;
      height: 100%;
      background: var(--primary);
      opacity: 0.2;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
  }
  #pricing-1260 .cs-package {
      font-size: 1.25rem;
      line-height: 1.2em;
      text-align: inherit;
      font-weight: 700;
      margin: 0 0 0.5rem 0;
      color: var(--headerColor);
      display: block;
  }
  #pricing-1260 .cs-price {
      font-size: 2.4375rem;
      line-height: 1.2em;
      text-align: inherit;
      font-weight: 900;
      margin: 0 0 0.75rem;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
  }
  #pricing-1260 .cs-duration {
      font-size: 0.875rem;
      line-height: 1.5em;
      font-weight: 400;
      margin: 0;
      color: var(--headerColor);
  }
  #pricing-1260 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: inherit;
      margin: 0 0 2rem;
      color: var(--bodyTextColor);
  }
  #pricing-1260 .cs-ul {
      margin: 0 0 2rem;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
  }
  #pricing-1260 .cs-li {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      list-style: none;
      line-height: 1.5em;
      width: 100%;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: flex-start;
      /* push everything to the top so if the li goes to two lines the icon stays at the top */
      align-items: flex-start;
      gap: 0.5rem;
  }
  #pricing-1260 .cs-li.cs-disabled {
      opacity: 0.5;
  }
  #pricing-1260 .cs-li.cs-disabled .cs-icon {
      filter: grayscale(1) brightness(300%);
  }
  #pricing-1260 .cs-icon {
      width: 1.5rem;
      height: auto;
      filter: grayscale(1);
      opacity: 0.5;
      display: block;
  }
  #pricing-1260 .button-solid {
      width: 100%;
  }
  #pricing-1260 .cs-button-transparent {
      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: var(--primary);
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: transparent;
      border: 1px solid var(--primary);
      border-radius: 3.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition:
          color 0.3s,
          border-color 0.3s,
          background-color 0.3s;
  }
  #pricing-1260 .cs-button-transparent:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 3.25rem;
      transition: width 0.3s;
  }
  #pricing-1260 .cs-button-transparent:hover {
      color: var(--primary);
      border-color: #000;
      background-color: #000;
      border-radius: 3.25rem;
  }
  #pricing-1260 .cs-button-transparent:hover:before {
      width: 100%;
      border-radius: 3.25rem;

  }
  #pricing-1260 .cs-waves-wrapper {
      width: 100vw;
      height: 60%;
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      z-index: -1;
      transform: translateX(-50%);
  }
  #pricing-1260 .cs-waves-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1260 .cs-container {
      max-width: 80rem;
      /* remove the position so the svg waves wrapper can be positioned relative to the section container for tablet so it hugs the right edge of the screen. We set it back to relative at 1024px so it can then be positioned relative to the container again so it hugs the right edge of the container with the pricing cards */
      position: initial;
  }
  #pricing-1260 .cs-card-group {
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
      flex-wrap: nowrap;
  }
  #pricing-1260 .cs-item {
      width: 50%;
      border-radius: 1.5rem 0 0 1.5rem;
  }
  #pricing-1260 .cs-item.cs-popular {
      border-radius: 0 1.5rem 1.5rem 0;
  }
  #pricing-1260 .cs-waves-wrapper {
      /* changes to 740px at large desktop */
      width: 55vw;
      height: 100%;
      left: auto;
      right: 0;
      bottom: auto;
      top: 0;
      transform: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1260 .cs-container {
      max-width: 80rem;
      position: relative;
      z-index: 1;
  }
  #pricing-1260 .cs-waves-wrapper {
      height: 140%;
      top: 50%;
      transform: translateY(-50%);
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #pricing-1260 .cs-container {
      flex-direction: row;
      justify-content: space-between;
      gap: 1.25rem;
  }
  #pricing-1260 .cs-card-group {
      width: 62%;
      max-width: 46.25rem;
  }
  #pricing-1260 .cs-waves-wrapper {
      max-width: 46.25rem;
      width: 100%;
  }
}
                              
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1346 {
    padding: var(--sectionPadding);
    /* padding-top: 3em; */
    position: relative;
  }
  #faq-1346 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #faq-1346 .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;
  }
  #faq-1346 .cs-text {
    /* padding: 1rem 0; */
  }

  #faq-1346 .cs-flex-group {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
    position: relative;
  }
  #faq-1346 .cs-wrapper {
    position: relative;
  }
  #faq-1346 .cs-button-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #faq-1346 .cs-option {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    /* 50px - 72px */
    line-height: clamp(3.125rem, 5vw, 4.5rem);
    font-weight: 700;
    padding: 0;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    color: var(--headerColor);
    border: 1px solid #e8e8e8;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s;
    border-radius: 10px;
    font-family: "EurostileExtendedBlack", sans-serif;
  }
  #faq-1346 .cs-option:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  #faq-1346 .cs-option:hover:hover {
    border-color: var(--primary);
    cursor: pointer;
  }
  #faq-1346 .cs-option:hover:hover:before {
    opacity: 0.1;
  }
  #faq-1346 .cs-option.cs-active {
    border-color: var(--primary);
  }
  #faq-1346 .cs-option.cs-active:before {
    opacity: 0.1;
  }
  #faq-1346 .cs-faq-group {
    width: 100%;
    max-width: 52.9375rem;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.7s,
                opacity 0.3s,
                visibility 0.5s,
                top 0.3s,
                left 0.3s;
    /* makes the transfrom scaling orgin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: top;
    transform-style: preserve-3d;
    perspective: 900px;
  }
  #faq-1346 .cs-faq-group.cs-hidden {
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the FAQ won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-flex-group (left: 0). Same for the bottom:0 value, the FAQ won't go past that position when it animates */
    top: 0;
    left: 0;
    position: absolute;
    /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0);
  }
  #faq-1346 .cs-faq-group.cs-hidden .cs-faq-item {
    transform: rotateX(270deg);
    opacity: 0;
  }
  #faq-1346 .cs-faq-item {
    border-radius: 10px;
    list-style: none;
    width: 100%;
    border: 1px solid #e8e8e8;
    /* clips all corners of the button that overlap the rounded border */
    overflow: hidden;
    opacity: 1;
    top: 0;
    transform: rotateX(0deg);
    transition: transform 0.6s, opacity 0.3s;
    box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 16px;
  }
  #faq-1346 .cs-faq-item:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #faq-1346 .cs-faq-item:nth-of-type(3) {
    transition-delay: 0.2s;
  }
  #faq-1346 .cs-faq-item:nth-of-type(4) {
    transition-delay: 0.3s;
  }
  #faq-1346 .cs-faq-item:nth-of-type(5) {
    transition-delay: 0.4s;
  }
  #faq-1346 .cs-faq-item:nth-of-type(6) {
    transition-delay: 0.5s;
  }
  #faq-1346 .cs-faq-item:nth-of-type(7) {
    transition-delay: 0.6s;
  }
  #faq-1346 .cs-faq-item:nth-of-type(8) {
    transition-delay: 0.7s;
  }
  #faq-1346 .cs-faq-item:nth-of-type(9) {
    transition-delay: 0.8s;
  }
  #faq-1346 .cs-faq-item:nth-of-type(10) {
    transition-delay: 0.9s;
  }
  #faq-1346 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1346 .cs-faq-item.active .cs-button:before {
    background-color: var(--primary);
    transform: rotate(315deg);
  }
  #faq-1346 .cs-faq-item.active .cs-button:after {
    background-color: var(--primary);
    transform: rotate(-315deg);
  }
  #faq-1346 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    /* 16px - 24px left & right */
    padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 1.3vw, 1.5rem);
    opacity: 1;
  }
  #faq-1346 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 24px top & bottom */
    /* 16px - 20px left & right */
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.25rem);
    background-color: #fff;
    border: none;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1346 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1346 .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.5rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq-1346 .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.3125rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq-1346 .cs-button-text {
    width: 80%;
    display: block;
    font-family: "EurostileExtendedBlack", sans-serif;
  }
  #faq-1346 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    height: 0;
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 48rem) {
  #faq-1346 .cs-container {
    max-width: 80rem;
  }
  #faq-1346 .cs-flex-group {
    flex-direction: row;
  }
  #faq-1346 .cs-button-group {
    width: 31%;
    max-width: 25.8125rem;
  }
}

@media only screen and (max-width: 900px) {
  #faq-1346 .cs-text {
    padding: 0 0rem;
  }
}


                               
/*?-- -------------------------- */
/*<---      My Codes   --->*/
/*?-- -------------------------- */

.primarycolor {
    color: var(--primary);
}




/*?-- -------------------------- */
/*<---      Contact Page     --->*/
/*?-- -------------------------- */


/*-- -------------------------- -->
<--- Hero Section Interior Page -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @keyframes floatAnimation {
      0% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-2rem);
      }
      100% {
          transform: translateY(0);
      }
  }
  @keyframes floatAnimation2 {
      0% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-3rem);
      }
      100% {
          transform: translateY(0);
      }
  }
  #hero-1350 {
      /* 250px - 500px - leaving extra space for the navigation */
      padding: clamp(15.625rem, 15.95vw, 25rem) 1rem 0;
      /* 200px - 250px */
      padding-bottom: clamp(12.5rem, 10.5vw, 15.625rem);
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      z-index: 1;
      background-color: #1a1a1a;
  }
  #hero-1350:before {
      /* Overlay */
      content: "";
      width: 100%;
      height: 30%;
      background: -webkit-gradient(
          linear,
          left top,
          left bottom,
          from(#000000),
          to(rgba(0, 0, 0, 0))
      );
      background: -o-linear-gradient(top, #000000 0%, rgba(0, 0, 0, 0) 100%);
      background: linear-gradient(
          to bottom,
          #000000 0%,
          rgba(0, 0, 0, 0) 100%
      );
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: 2;
      /* prevents the cursor from interacting with it */
      pointer-events: none;
  }
  #hero-1350 .cs-container {
      width: 40%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
  }
  #hero-1350 .cs-title {
      /* 39px - 61px */
      font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
      font-weight: 700;
      line-height: 1.2em;
      text-align: center;
      max-width: 20ch;
      margin: 0 0 1rem 0;
      color: #fff;
      position: relative;
  }
  #hero-1350 .cs-text {
      font-size: 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: #e8e8e8;
  }
  #hero-1350 .cs-bubbles {
      /* this scales the children inside of it down. They're all in ems so they pull from the parent font size for their value of em, in this case, the value of em is tied to the viewwidth size and stops growing when the font size is equal to 1em, which it pulls from the nearst parent with a declred font size (which is the html tag, and that tag is 16px by default) */
      font-size: min(2vw, 0.5em);
      position: absolute;
      z-index: -1;
  }
  #hero-1350 .cs-bubbles1 {
      width: 42.5em;
      height: 45.25em;
      right: -11.875rem;
      /* changes to 172 at large desktop */
      top: 0;
  }
  #hero-1350 .cs-bubbles1:before {
      /* white border bubble */
      content: "";
      width: 38.875em;
      height: 38.875em;
      background: transparent;
      border: 1px solid #fff;
      border-radius: 50%;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      animation-name: floatAnimation;
      animation-duration: 7s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
  #hero-1350 .cs-bubbles1:after {
      /* orange bubble */
      content: "";
      width: 34.125em;
      height: 34.125em;
      background: var(--primary);
      opacity: 0.8;
      border-radius: 50%;
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: -1;
      animation-name: floatAnimation2;
      animation-duration: 10s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
  #hero-1350 .cs-bubbles2 {
      width: 20.625rem;
      height: 29.75rem;
      /* changes to 160px at larger desktop */
      left: -13.75rem;
      /* removed at larger desktop */
      bottom: -16.25rem;
  }
  #hero-1350 .cs-bubbles2:before {
      /* white border bubble */
      content: "";
      width: 20.625rem;
      height: 20.625rem;
      background: transparent;
      border: 1px solid #fff;
      border-radius: 50%;
      opacity: 1;
      position: absolute;
      display: block;
      bottom: 0;
      right: 0;
      animation-name: floatAnimation;
      animation-duration: 5s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
  #hero-1350 .cs-bubbles2:after {
      /* orange bubble */
      content: "";
      width: 16.25rem;
      height: 16.25rem;
      background: var(--primary);
      opacity: 0.8;
      border-radius: 50%;
      display: block;
      position: absolute;
      top: 0;
      right: 2.5rem;
      z-index: -1;
      animation-name: floatAnimation2;
      animation-duration: 14s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
  #hero-1350 .cs-background {
      width: 100%;
      height: 30%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1350 .cs-bubbles {
      font-size: 1em;
  }
  #hero-1350 .cs-bubbles1 {
      /* changes to auto at large desktop */
      right: -26.75rem;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1350 .cs-bubbles1 {
      /* 200px - 450px */
      margin-left: clamp(12.5rem, 20vw, 28.125rem);
      top: 10.75rem;
      right: auto;
      left: 50%;
  }
}
/* Large Desktop Parallax Effect - 1600px */
@media only screen and (min-width: 100rem) {
  #hero-1350 .cs-background {
      background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/abstract.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
  }
  #hero-1350 .cs-background img {
      display: none;
  }
}
/* Larger Desktop - 1800px */
@media only screen and (min-width: 112.5rem) {
  #hero-1350 .cs-bubbles2 {
      margin-right: 50rem;
      right: 50%;
      left: auto;
      top: 13.125rem;
      bottom: auto;
  }
}

/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1392 {
      /* padding: var(--sectionPadding); */
      padding-top: 90px;
      padding-bottom: 50px;
      background-color: #f7f7f7;
      position: relative;
      z-index: 10;
  }
  #contact-1392 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 36.5rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-direction: column;
      column-gap: auto;
      /* 48px - 64px */
      gap: clamp(2rem, 3vw, 3rem);
      position: relative;
  }
  #contact-1392 .cs-content {
      /* 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;
  }

  #contact-1392 .cs-title {
      max-width: 23ch;
  }
  #contact-1392 .cs-text {
      margin-bottom: 1rem;
  }
  #contact-1392 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #contact-1392 .cs-ul {
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: relative;
  }
  #contact-1392 .cs-li {
      list-style: none;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 1.25rem;
  }
  #contact-1392 .cs-li:hover .cs-icon-wrapper {
      transform: scale(1.1);
  }
  #contact-1392 .cs-header {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.2em;
      margin-bottom: 0.75rem;
      color: var(--headerColor);
      display: block;
  }
  #contact-1392 .cs-link {
      font-size: 1rem;
      line-height: 1.5em;
      text-decoration: none;
      color: #767676;
      display: block;
      position: relative;
  }
  #contact-1392 .cs-link:hover {
      text-decoration: underline;
  }
  #contact-1392 .cs-icon-wrapper {
      width: 3.75rem;
      height: 3.75rem;
      margin: 0;
      border-radius: 50%;
      border: 1px solid #bababa;
      display: flex;
      justify-content: center;
      align-items: center;
      /* prevents flexbox from squishing it */
      flex: none;
      transition: transform 0.3s;
  }
  #contact-1392 .cs-icon {
      width: 1.5rem;
      height: auto;
      display: block;
  }
  #contact-1392 .cs-form {
      width: 100%;
      max-width: 39.375rem;
      /* -30px to -100px */
      margin-bottom: calc(clamp(1.875rem, 7vw, 6.25rem) * -1);
      /* 24px - 48px top and bottom */
      /* 16px - 48px left and right */
      padding: clamp(1.5rem, 5.18vw, 3rem) clamp(1rem, 4vw, 3rem);
      /* prevents flexbox from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 1rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
  }
  #contact-1392 .cs-h3 {
      /* 20px - 39px */
      font-size: clamp(1.25rem, 3vw, 2.4375rem);
      line-height: 1.2em;
      font-weight: 700;
      margin: 0 0 0.25rem 0;
      color: var(--headerColor);
  }
  #contact-1392 .cs-label {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      width: 100%;
      color: var(--headerColor);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 0.25rem;
  }
  #contact-1392 .cs-input {
      font-size: 1rem;
      width: 100%;
      height: 3.5rem;
      padding: 0;
      padding-left: 1.5rem;
      color: var(--headerColor);
      background-color: #f7f7f7;
      border-radius: 0.5rem;
      border: none;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
  }
  #contact-1392 .cs-input::placeholder {
      color: #7d799c;
      opacity: 0.6;
  }
  #contact-1392 .cs-textarea {
      min-height: 7.5rem;
      padding-top: 1.5rem;
      margin-bottom: 0.75rem;
      font-family: inherit;
  }
  #contact-1392 .cs-button-solid {
      font-size: 1rem;
      line-height: 3.5rem;
      text-decoration: none;
      font-weight: 700;
      overflow: hidden;
      margin: 0;
      color: #fff;
      padding: 0 3rem;
      border-radius: 1.875rem;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
  }
  #contact-1392 .cs-button-solid:before {
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 0%;
      background: #1a1a1a;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #contact-1392 .cs-button-solid:hover {
      color: var(--primary);
  }
  #contact-1392 .cs-button-solid:hover:before {
      width: 100%;
  }
  #contact-1392 .cs-submit {
      width: 100%;
      min-width: 12.5rem;
      border: none;
  }
  #contact-1392 .cs-submit:hover {
      color: #fff;
      cursor: pointer;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #contact-1392 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
  }
  #contact-1392 .cs-content {
      width: 47%;
      /* prevents flexbox from squishing it */
      flex: none;
  }
  #contact-1392 .cs-submit {
      width: auto;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-1392 .cs-form {
      width: 46%;
      max-width: 36.125rem;
  }
  #contact-1392 .cs-submit {
      width: auto;
  }
}
/* Large Desktop - 1500px */
@media only screen and (min-width: 93.75rem) {
  #contact-1392 .cs-graphic {
      display: block;
  }
}

/*-- -------------------------- -->
<---     CTA Before Footer      -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-697 {
    padding: 3em 0;
    background-color: var(--secondary);
    position: relative;
    z-index: 1;
  }
  #cta-697 .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-697 .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;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-697 .cs-title {
    color: var(--bodyTextColorWhite);
    margin: 0;
  }
  #cta-697 .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: var(--secondary);
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--bodyTextColorWhite);
    border-radius: 1.875rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cta-697 .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;
    border-radius: 1.875rem;
  }
  #cta-697 .cs-button-solid:hover:before {
    width: 100%;
    border-radius: 1.875rem;
  }
  #cta-697 .cs-button-solid:hover{
    color: var(--secondary);
  }
  #cta-697 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-697 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
  }
}
                                
                              

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #footer-1392 {
      padding: var(--sectionPadding);
      /* 80px - 100px */
      padding-top: clamp(5rem, 7vw, 6.25rem);
      background-color: #1a1a1a;
      position: relative;
      z-index: 1;
  }
  #footer-1392 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  #footer-1392 .cs-top {
      width: 100%;
      margin-bottom: 2.5rem;
      /* 24px - 64px */
      padding-bottom: clamp(1.5rem, 5vw, 4rem);
      border-bottom: 1px solid #484848;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* 24px - 40px */
      gap: clamp(1.25rem, 4vw, 2.5rem);
  }
  #footer-1392 .cs-ul {
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      row-gap: 0.5rem;
      /* 24px - 36px */
      column-gap: clamp(1.5rem, 4vw, 2.25rem);
  }
  #footer-1392 .cs-li {
      list-style: none;
  }
  #footer-1392 .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-1392 .cs-link:hover {
      color: var(--primary);
  }
  #footer-1392 .cs-logo {
      width: 100%;
      max-width: 13.0625rem;
      height: auto;
      display: block;
  }
  #footer-1392 .cs-logo-img {
      width: 100%;
      height: auto;
      display: block;
  }
  #footer-1392 .cs-bottom {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
  }
  #footer-1392 .cs-social {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
  }
  #footer-1392 .cs-social-li {
      list-style: none;
  }
  #footer-1392 .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-1392 .cs-social-link:hover {
      background-color: var(--primary);
  }
  #footer-1392 .cs-social-link:hover .cs-social-icon {
      filter: grayscale(1) brightness(1000%);
      opacity: 1;
  }
  #footer-1392 .cs-social-icon {
      width: 0.75rem;
      height: auto;
      display: block;
      opacity: 0.6;
      transition: opacity 0.3s;
  }
  #footer-1392 .cs-copyright {
      font-size: 1rem;
      color: #bababa;
      line-height: 1.5em;
      margin: 0;
      display: block;
  }
  #footer-1392 .cs-copyright-link,
  #footer-1392 .cs-separater {
      font-size: 1rem;
      text-decoration: none;
      color: #bababa;
      transition: color 0.3s;
  }
  #footer-1392 .cs-copyright-link:hover,
  #footer-1392 .cs-separater:hover {
      color: var(--primary);
  }
  #footer-1392 .cs-separater {
      margin: 0 1rem;
      display: inline-block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #footer-1392 .cs-top {
      align-items: flex-start;
  }
  #footer-1392 .cs-bottom {
      flex-direction: row;
      justify-content: center;
  }
  #footer-1392 .cs-flex {
      margin: 0 auto;
  }
  #footer-1392 .cs-social {
      /* sends it to the right in the 3rd position */
      order: 3;
  }
}
                              


/*? Services Page */

/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-69 {
      padding: 100px 16px 0 16px;

  }
  #sbsr-69 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-69 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 33.875rem;
      margin-right: auto;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #sbsr-69 .cs-text {
      margin-bottom: 1rem;
  }
  #sbsr-69 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #sbsr-69 .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;
  }
  #sbsr-69 .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;
  }
  #sbsr-69 .cs-button-solid:hover:before {
      width: 100%;
  }
  #sbsr-69 .cs-picture {
      width: 95%;
      max-width: 34.375rem;
      margin: 0;
      position: relative;
      display: block;
      /* width divided by height */
      aspect-ratio: 0.93134328;
      border-radius: 1rem;
      z-index: 1;
  }
  #sbsr-69 .cs-picture:before {
      /* Top right box */
      content: "";
      width: 10rem;
      /* 202px - 248px */
      height: clamp(12.625rem, 25vw, 15.5rem);
      background: var(--primary);
      opacity: 1;
      border-radius: 1rem;
      position: absolute;
      display: block;
      /* 16px -20px */
      /* wrapped in a calc function to get a negative clamp value */
      top: calc(clamp(0.5rem, 2.09vw, 1.25rem) * -1);
      right: calc(clamp(0.5rem, 2.09vw, 1.25rem) * -1);
  }
  #sbsr-69 .cs-picture:after {
      /* Bottom left box */
      content: "";
      width: 10rem;
      /* 202px - 248px */
      height: clamp(12.625rem, 25vw, 15.5rem);
      background: var(--primary);
      opacity: 1;
      border-radius: 1rem;
      position: absolute;
      display: block;
      /* 16px -20px */
      /* wrapped in a calc function to get a negative clamp value */
      bottom: calc(clamp(0.5rem, 2.09vw, 1.25rem) * -1);
      left: calc(clamp(0.5rem, 2.09vw, 1.25rem) * -1);
      z-index: -1;
  }
  #sbsr-69 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      border-radius: 1rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-69 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: flex-end;
      /* 60px - 128px */
      gap: clamp(3.75rem, 9.5vw, 8rem);
  }
  #sbsr-69 .cs-picture {
      /* 328px - 502px */
      width: clamp(20.5rem, 37.5vw, 31.375rem);
      /* 440px - 520px */
      height: clamp(27.5rem, 40vw, 32.5rem);
      /* 16px - 20px */
      margin: 0 0 0 clamp(1rem, 5vw, 1.25rem);
      flex: none;
      /* sends it to the right in the 2nd position */
      order: 2;
  }
  #sbsr-69 .cs-content {
      width: 45%;
      margin: 0;
  }
}

                              

                              

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

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

  #services-1304 .cs-title {
      max-width: 20ch;
  }
  #services-1304 .cs-card-group {
      width: 100%;
      max-width: 80rem;
      margin: 0;
      padding: 0 1rem;
      /* prevents padding and border from affecting height and width */
      background-color: #fff;
      box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      position: relative;
      z-index: 15;
  }
  #services-1304 .cs-item {
      text-align: left;
      list-style: none;
      width: 100%;
      border-bottom: 1px solid #e8e8e8;
      box-sizing: border-box;
      grid-column: span 12;
      transition:
          background-color 0.3s,
          border-color 0.3s;
  }
  #services-1304 .cs-item:last-of-type {
      border-bottom: none;
  }
  #services-1304 .cs-link {
      text-decoration: none;
      /* 24px - 60px top & Bottom */
      /* 24px - 16px top & Bottom */
      padding: clamp(1.5rem, 5.3vw, 3.75rem) clamp(1rem, 2.7vw, 2.5rem);
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
  }
  #services-1304 .cs-icon {
      /* 32px - 40px */
      height: clamp(2rem, 4vw, 2.5rem);
      width: auto;
      margin: 0 0 1rem 0;
  }
  #services-1304 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2vw, 1.5625rem);
      font-weight: 700;
      text-align: inherit;
      line-height: 1.2em;
      margin: 0 0 0.75rem 0;
      color: var(--headerColor);
      transition: color 0.3s;
  }
  #services-1304 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      text-align: inherit;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
      transition:
          color 0.3s,
          opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1304 .cs-content {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 3rem;
  }
  #services-1304 .cs-title {
      margin: 0;
  }
  #services-1304 .cs-flex-group {
      width: 50%;
      /* prevents flexbox from squishing it */
      flex: none;
  }
  #services-1304 .cs-item {
      grid-column: span 6;
  }
  #services-1304 .cs-item:nth-of-type(4),
  #services-1304 .cs-item:nth-of-type(8) {
      border-right: none;
  }
  #services-1304 .cs-item:nth-of-type(7),
  #services-1304 .cs-item:nth-of-type(8) {
      border-bottom: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1304 .cs-card-group {
      padding: 0;
      border-radius: 20px;
  }
  #services-1304 .cs-item {
      grid-column: span 3;
      border-right: 1px solid #e8e8e8;
  }
  #services-1304 .cs-item:hover {
      background-color: #1a1a1a;
      border-color: #1a1a1a;
      border-radius: 10px;
  }
  #services-1304 .cs-item:hover .cs-h3,
  #services-1304 .cs-item:hover .cs-item-text {
      color: var(--bodyTextColorWhite);
  }
  #services-1304 .cs-item:hover .cs-item-text {
      opacity: 0.8;
  }
  #services-1304 .cs-item:nth-of-type(5),
  #services-1304 .cs-item:nth-of-type(6),
  #services-1304 .cs-item:nth-of-type(7),
  #services-1304 .cs-item:nth-of-type(8) {
      border-bottom: none;
  }
}


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-1071 {
      padding: var(--sectionPadding);
      background-color: var(--primary);
      position: relative;
      z-index: 1;
      border-radius: 1em!important;
  }
  #cta-1071 .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-1071 .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;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-1071 .cs-flex {
      max-width: 39.375rem;
  }

  #cta-1071 .cs-title {
      margin: 0;

      color: var(--bodyTextColorWhite);
  }
  #cta-1071 .cs-button-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
  }
  #cta-1071 .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: var(--primary);
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: #FFF;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      border-radius: 1.875rem;      
  }
  #cta-1071 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
      border-radius: 1.875rem;      
  }
  #cta-1071 .cs-button-solid:hover:before {
      width: 100%;
  }
  #cta-1071 .cs-button-transparent {
      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: transparent;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition: color 0.3s;
  }
  #cta-1071 .cs-button-transparent:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #fff;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #cta-1071 .cs-button-transparent:after {
      /* border */
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: transparent;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      border: 1px solid #fff;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
      pointer-events: none;
  }
  #cta-1071 .cs-button-transparent:hover {
      color: var(--primary);
  }
  #cta-1071 .cs-button-transparent:hover:before {
      width: 100%;
  }
  #cta-1071 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #cta-1071 .cs-background:before {
      /* background color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: #1a1a1a;
      opacity: 0.88;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #cta-1071 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* Makes img tag act as a background image */
      object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-1071 .cs-content {
      text-align: left;
      flex-direction: row;
      justify-content: space-between;
  }
  #cta-1071 .cs-button-box {
      flex-wrap: nowrap;
      align-items: center;
      flex: none;
  }
}

                              




/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-1376 .cs-text {
    margin-top: 1.1em;
  }

  #steps-1376 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
    /* clips the waves and lines from cause overflow issues */
    overflow: hidden;
    /* setting the row groups to display: contents causes the child cs-items to "appear" as direct children of the parent .cs-card-group */
    /* therefore, we can set the order of the .cs-items between rows, changing it between mobile and desktop */
  }
  #steps-1376 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-1376 .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-1376 .cs-topper {
    color: #767676;
  }
  #steps-1376 .cs-title {
    max-width: 25ch;
    margin: 0;
  }
  #steps-1376 .cs-group1,
  #steps-1376 .cs-group2 {
    /* the contents of this div are no longer its children. This div acts as if it doesn't exist and their content is now children of the next level parent, in this case, the cs-card-group. That way they can all be arranged together as children under 1 parent div instead of children in two different parent divs */
    display: contents;
  }
  #steps-1376 .cs-card-group {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
    position: relative;
  }
  #steps-1376 .cs-group1 {
    display: contents;
  }
  #steps-1376 .cs-group1 .cs-item:nth-of-type(1) {
    order: 1;
  }
  #steps-1376 .cs-group1 .cs-item:nth-of-type(2) {
    order: 3;
  }
  #steps-1376 .cs-group1 .cs-item:nth-of-type(3) {
    order: 5;
  }
  #steps-1376 .cs-group2 {
    display: contents;
  }
  #steps-1376 .cs-group2 .cs-item:nth-of-type(1) {
    order: 2;
  }
  #steps-1376 .cs-group2 .cs-item:nth-of-type(2) {
    order: 4;
  }
  #steps-1376 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    max-width: 15rem;
    height: 15rem;
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 1.5rem;
    background-color: #f4f4f4;
    /* clips the :before element from being clickable when it's outside the item and triggering the hover animation */
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s, border-color 0.3s;
  }
  #steps-1376 .cs-item:before {
    content: "";
    width: 9.25rem;
    height: 9.25rem;
    background: #fff;
    opacity: 0;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: -7.25rem;
    transform: translateY(6.25rem);
    transition: left 0.3s, transform 0.3s, opacity 0.3s;
  }
  #steps-1376 .cs-item:hover {
    background-color: var(--primary);
    border-color: var(--primary);
  }
  #steps-1376 .cs-item:hover:before {
    opacity: 0.2;
    left: -1rem;
    transform: translateY(0);
  }
  #steps-1376 .cs-item:hover .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #steps-1376 .cs-item:hover .cs-h3,
  #steps-1376 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #steps-1376 .cs-item:hover .cs-text {
    opacity: 0.8;
  }
  #steps-1376 .cs-picture {
    width: 6.25rem;
    height: auto;
    margin: 0 0 0.5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #steps-1376 .cs-icon {
    width: 2rem;
    height: auto;
  }
  #steps-1376 .cs-h3 {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #steps-1376 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s, opacity 0.3s;
  }
  #steps-1376 .cs-waves {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-1376 .cs-card-group {
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
  }
  #steps-1376 .cs-group1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #steps-1376 .cs-group2 {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 3rem;
  }
  #steps-1376 .cs-item {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #steps-1376 .cs-waves {
    width: 4.4375rem;
    height: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #steps-1376 .cs-waves img {
    width: 100%;
    height: auto;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #steps-1376 .cs-card-group {
    flex-direction: column;
  }
  #steps-1376 .cs-group1 {
    width: 100%;
    /* -8px to -30px, we put the clamp in a calc function to turn it into a negative number and pull down to cause the overlapping effect */
    margin-bottom: calc(clamp(.5rem, 2vw, 1.875rem)*-1);
    flex-direction: row;
  }
  #steps-1376 .cs-group2 {
    width: 100%;
    /* -8px to -30px */
    margin-top: calc(clamp(.5rem, 2vw, 1.875rem)*-1);
    flex-direction: row;
  }
  #steps-1376 .cs-waves {
    width: 110vw;
    max-width: 120rem;
    height: auto;
  }
  #steps-1376 .cs-waves:before {
    /* left continuation line */
    content: "";
    width: 50vw;
    height: 4px;
    background: #e8e8e8;
    opacity: 1;
    display: block;
    position: absolute;
    top: 5.25rem;
    right: 100%;
  }
  #steps-1376 .cs-waves:after {
    /* Right continuation line */
    content: "";
    width: 50vw;
    height: 4px;
    background: #e8e8e8;
    opacity: 1;
    display: block;
    position: absolute;
    top: 5.25rem;
    left: 100%;
  }
}


/* Privacy */

#privacy {
  margin: 3em 15px;
  line-height: 1.6;
  padding: 0 1rem;
}

#privacy h1, #privacy h2, #privacy h3 {
  margin-bottom: 15px;
}

#privacy p {
  margin-bottom: 15px;
  font-size: 1rem;
}

#privacy ul {
  margin-left: 20px;
  list-style-type: disc;
}

#privacy ul li {
  margin-bottom: 10px;
}

/* Mobile - 360px */
@media only screen and (max-width: 360px) {
  #privacy {
      padding: 0 1rem;
      margin: 0 10px;
  }

  #privacy p {
      font-size: 0.9rem;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #privacy {
      padding: 0 2rem;
  }

  #privacy p {
      font-size: 1.1rem;
  }

  #privacy h1, #privacy h2, #privacy h3 {
      font-size: 1.3rem;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #privacy {
      padding: 0 3rem;
  }

  #privacy p {
      font-size: 1.2rem;
  }

  #privacy h1, #privacy h2, #privacy h3 {
      font-size: 1.5rem;
  }
}

/* Terms */
#terms {
  margin: 3em 15px;
  line-height: 1.6;
  padding: 0 1rem;
}

#terms h1, #terms h2, #terms h3 {
  margin-bottom: 15px;
}

#terms p {
  margin-bottom: 15px;
  font-size: 1rem;
}

#terms ul {
  margin-left: 20px;
  list-style-type: disc;
}

#terms ul li {
  margin-bottom: 10px;
}

/* Mobile - 360px */
@media only screen and (max-width: 360px) {
  #terms {
      padding: 0 1rem;
      margin: 0 10px;
  }

  #terms p {
      font-size: 0.9rem;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #terms {
      padding: 0 2rem;
  }

  #terms p {
      font-size: 1.1rem;
  }

  #terms h1, #terms h2, #terms h3 {
      font-size: 1.3rem;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #terms {
      padding: 0 3rem;
  }

  #terms p {
      font-size: 1.2rem;
  }

  #terms h1, #terms h2, #terms h3 {
      font-size: 1.5rem;
  }
}                                

/*? About Page */

/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

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

  #sbs-311 .cs-text {
      margin-bottom: 1rem;
  }
  #sbs-311 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #sbs-311 .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;
  }
  #sbs-311 .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;
  }
  #sbs-311 .cs-button-solid:hover:before {
      width: 100%;
  }
  #sbs-311 .cs-quote {
      margin: 0 0 2rem 0;
      /* 16px - 32px */
      padding: clamp(1rem, 3vw, 2rem);
      background-color: #f7f7f7;
      border-radius: 1rem;
      position: relative;
  }
  #sbs-311 .cs-quote-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      margin: 0 0 1rem;
      color: #767676;
      display: block;
  }
  #sbs-311 .cs-name {
      font-size: 1rem;
      line-height: 1.2em;
      text-transform: uppercase;
      font-weight: bold;
      margin: 0 0 0.25rem;
      color: var(--headerColor);
      display: block;
  }
  #sbs-311 .cs-job {
      font-size: 0.875rem;
      line-height: 1.5em;
      color: #767676;
      display: block;
  }
  #sbs-311 .cs-quote-icon {
      /* 60px - 136px */
      width: clamp(3.75rem, 10vw, 8.5rem);
      height: auto;
      position: absolute;
      bottom: 0rem;
      /* 16px - 32px */
      right: clamp(1rem, 4vw, 2rem);
  }
  #sbs-311 .cs-image-group {
      /* scaling the font size with the view width */
      font-size: min(2.31vw, 0.7em);
      /* using ems so we can use font size to scale the whole section */
      width: 39.4375em;
      height: 39.75em;
      position: relative;
  }
  #sbs-311 .cs-picture {
      border-radius: 1.5em;
      /* clips img tag corners */
      overflow: hidden;
      position: absolute;
      display: block;
  }
  #sbs-311 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes image act like a background image */
      object-fit: cover;
  }
  #sbs-311 .cs-picture1 {
      width: 32.625em;
      height: 36.3125em;
      left: 0;
      top: 0;
  }
  #sbs-311 .cs-picture2 {
      width: 25.875em;
      height: 25em;
      background-color: #fff;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
      /* 6px - 12px */
      border: clamp(0.375em, 1.5vw, 0.75em) solid #ffffff;
      right: 0;
      bottom: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-311 .cs-container {
      flex-flow: row;
      justify-content: space-between;
      gap: 3.25rem;
  }
  #sbs-311 .cs-image-group {
      font-size: min(1.2vw, 1em);
      flex: none;
  }
  #sbs-311 .cs-content {
      margin: 0;
  }
}