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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-82 {
      /* Centers button */
      text-align: center;
      /* 144px - 300px - leaving extra space for the navigation */
      padding: clamp(9rem, 25.95vw, 18.75rem) 1rem 0;
      /* 130px - 200px */
      padding-bottom: clamp(8.125rem, 12.5vw, 25em);
      position: relative;
      z-index: 1;
  }
  #hero-82 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -6;
  }
  #hero-82 .cs-background:before {
      /* Overlay */
      content: "";
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.6;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: 1;
      /* prevents the cursor from interacting with it */
      pointer-events: none;
  }
  #hero-82 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center /*Adjust these values as needed */
      /* filter: blur(2px) brightness(0.8) contrast(0.9); */
  }
  #hero-82 .cs-container {
      width: 100%;
      max-width: 67.5rem;
      margin: auto;
  }
  #hero-82 .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: 51.8125rem;
    /* Adjusted margin to add space above for the line */
    margin: clamp(2rem, 5vw, 3rem) auto clamp(1rem, 4vw, 1.5rem);
    color: #fff;
    position: relative;
    font-family: "Montserrat";
  }

  #hero-82 .cs-title:before {
      /* Divider Line */
      content: "";
      width: 3.25rem;
      height: 0.5rem;
      /* Position it above the title with spacing */
      margin: 0 auto clamp(1rem, 4vw, 1.5rem);
      background: var(--primary);
      opacity: 1;
      position: relative;
      display: block;
  }
  #hero-82 .cs-text {
      /* 16px - 25px */
      font-size: calc(var(--bodyFontSize) * 1.3);
      line-height: 1.5em;
      text-align: center;
      width: 100%;
      /* 464px - 800px */
      max-width: clamp(29rem, 60vw, 50rem);
      margin: 0 auto;
      /* 40px - 48px */
      margin-bottom: clamp(2.5rem, 4vw, 3rem);
      color: #fff;
      font-family: 'Inter';
  }
  #hero-82 .cs-button-solid {
    font-size: 1rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 600;
    margin: auto;
    color: #fff;
    padding: .3rem 3rem;
    background-color: var(--primary);
    border-radius: 15px; /* Changed from 0.25rem to 15px */
    display: inline-block;
    position: relative;
    z-index: 1;
    font-family: "Montserrat";
  }

  #hero-82 .cs-button-solid:hover:before {
      width: 100%;
  }
}

/* Large Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-82 {
    /* Centers button */
    text-align: center;
    /* Current top padding: 55.36px -> 115.2px */
    padding: clamp(3.46rem, 9.97vw, 7.2rem) 1rem 0;

    /* Option 1: Smaller (-20% from current): 39.94px -> 122.88px */
    /* padding-bottom: clamp(2.5rem, 3.84vw, 7.68em); */
    /* Option 2: Smaller (-10% from current): 44.93px -> 138.24px */
    /* padding-bottom: clamp(2.81rem, 4.32vw, 8.64em); */
    /* Option 3: Slightly Smaller (Fixed): 40px -> 120px */
    /* padding-bottom: clamp(2.5rem, 4vw, 7.5em); */
    /* Option 4: Current Value: 49.92px -> 153.6px */
    /* padding-bottom: clamp(3.12rem, 4.8vw, 9.6em); */
    /* Option 5: Slightly Taller (+10% from current): 54.91px -> 168.96px */
    /* padding-bottom: clamp(3.43rem, 5.28vw, 10.56em); */
    /* Option 6: Taller (+20% from current): 59.90px -> 184.32px */
    /* padding-bottom: clamp(3.74rem, 5.76vw, 11.52em); */
    /* Option 7: Even Taller (Fixed): 64px -> 200px */
    /* padding-bottom: clamp(4rem, 6vw, 12.5em); */
    /* Option 8: Much Taller (+50% from current): 74.88px -> 230.4px */
    /* padding-bottom: clamp(4.68rem, 7.2vw, 14.4em); */
    /* Option 9: Very Tall (接近 Original): 96px -> 320px */
    padding-bottom: clamp(6rem, 10vw, 20em);
    position: relative;
    z-index: 1;
  }
}

@media only screen and (min-width: 145rem) {
  #hero-82 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 0rem -20rem; /* First card */
    /* filter: blur(2px) brightness(0.8) contrast(0.9); */
  }
}

/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1175 {
    padding: var(--sectionPadding);
    background-color: #F5F5F5;
  }
  #services-1175 .cs-container {
      max-width: 34.375rem;
      width: 100%;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px - Adjusted to match Figma spacing */
      gap: clamp(2.5rem, 5vw, 3.5rem);
  }
  #services-1175 .cs-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
  }
  #services-1175 .cs-card-group {
      width: 100%;
      margin: 0 auto;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* Keep the approved gap for card spacing */
      gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #services-1175 .cs-item {
      list-style: none;
      max-width: 17.5rem;
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
      /* Adjusted padding to match Figma (1rem all around) */
      padding: 1rem;
      background-color: #fafafa; /* White background */
      border: 2px solid #dcdcdc; /* Grey border */
      border-radius: 1rem; /* Rounded corners */
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      z-index: 1;
      transition:
          box-shadow 0.3s,
          border-color 0.3s;
      text-align: center;
      grid-column: span 12; /* 1 card per row on mobile */
      grid-row: span 1;
  }
  #services-1175 .cs-picture {
      /* Adjusted margin to match Figma spacing (0.5rem top, 1rem bottom) */
      width: 6.25rem;
      height: auto;
      margin: 0.5rem 0 1rem 0;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      flex: none;
  }
  #services-1175 .cs-icon {
      /* Keep icon size consistent with Figma */
      width: 4.5rem;
      height: auto;
  }
  #services-1175 .cs-h3 {
      /* Adjusted font size to match Figma (1.25rem to 1.5rem range) */
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      line-height: 1.2em;
      font-weight: 700;
      /* Adjusted margin to match Figma (0.5rem bottom) */
      margin: 0 0 0.5rem 0;
      color: var(--headerColor);
      transition: color 0.3s;
      text-align: inherit;
      font-family: 'Montserrat';
  }
  #services-1175 .cs-item-text {
      /* Adjusted font size to match Figma (0.875rem to 1rem) */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      max-width: 28.125rem;
      /* Adjusted margin to match Figma (0.75rem bottom) */
      padding: 0;
      color: var(--bodyTextColor);
      font-family: 'Inter';
  }
  #services-1175 .cs-link {
      /* Keep font size but adjust margins for Figma spacing */
      font-size: 1rem;
      line-height: 1.2em;
      font-weight: 700;
      margin-top: auto;
      color: var(--headerColor);
      text-decoration: none;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      transition: color 0.3s;
      text-align: inherit;
  }
  #services-1175 .cs-link:hover .cs-arrow {
      transform: translateX(0.25rem);
  }
  #services-1175 .cs-arrow {
      width: 1.25rem;
      height: auto;
      display: block;
      filter: grayscale(1) brightness(0);
      transition:
          filter 0.3s,
          transform 0.3s;
  }
  #services-1175 .cs-title {
      font-family: "Montserrat";
  }
  #services-1175 .cs-title:after {
      content: "";
      width: 6.25rem;
      height: 0.5rem;
      margin: clamp(1rem, 4vw, 1.5rem) auto 0;
      background: var(--primary);
      opacity: 1;
      position: relative;
      display: block;
  }
  #services-1175 .cs-bottom-row {
    list-style: none;
}
  /* Style the cs-bottom-row for mobile */
  #services-1175 .cs-bottom-row {
      grid-column: span 12; /* Ensure it spans the full width */
  }
  #services-1175 .cs-bottom-row ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: clamp(1rem, 2.3vw, 1.25rem); /* Match the parent grid gap */
  }
  #services-1175 .cs-bottom-row .cs-item {
      grid-column: span 12; /* Each item in the nested ul spans the full width */
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1175 .cs-container {
    max-width: 150rem; /* Keep approved desktop width */
    margin: 0 auto; /* Ensure the container is centered */
  }
  #services-1175 .cs-card-group {
      display: grid;
      gap: clamp(0.50rem, 1.25vw, 1rem); /* Keep the gap */
      grid-template-columns: repeat(3, minmax(0, 30.5rem)); /* 3 equal columns for top row */
      grid-template-rows: auto auto; /* Two rows */
      justify-content: center; /* Center the entire grid horizontally */
      width: 100%; /* Ensure the grid takes full width of the container */
  }
  #services-1175 .cs-item {
      max-width: 20.5rem; /* Keep the max-width */
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      grid-column: span 1; /* Each item takes 1 column */
  }
  /* Top row: 3 cards */
  #services-1175 .cs-item:nth-child(1),
  #services-1175 .cs-item:nth-child(2),
  #services-1175 .cs-item:nth-child(3) {
      grid-row: 1; /* Place in the first row */
  }
  /* Bottom row: Style the cs-bottom-row */
  #services-1175 .cs-bottom-row {
      grid-row: 2; /* Place in the second row */
      grid-column: 1 / 4; /* Span all 3 columns to match the top row's width */
      
  }
  #services-1175 .cs-bottom-row ul {
      display: grid;
      /* Create 4 columns: 1 empty, 2 for cards, 1 empty */
      grid-template-columns: minmax(0, 1fr) minmax(0, 20.5rem) minmax(0, 20.5rem) minmax(0, 1fr);
      gap: clamp(0.50rem, 1.25vw, 1rem); /* Match the gap of the parent grid */
  }
  #services-1175 .cs-bottom-row .cs-item:nth-child(1) {
      grid-column: 2 / 3; /* Place in the second column of the nested grid */
      max-width: 20.5rem; /* Keep the max-width */
  }
  #services-1175 .cs-bottom-row .cs-item:nth-child(2) {
      grid-column: 3 / 4; /* Place in the third column of the nested grid */
      max-width: 20.5rem; /* Keep the max-width */
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1175 .cs-container {
    max-width: 100rem; /* Keep approved desktop width */
  }
  #services-1175 .cs-card-group {
      gap: clamp(0.25rem, 0.75vw, 0.5rem);
      grid-template-columns: repeat(3, minmax(0, 20.5rem)); /* Ensure consistency */
      justify-content: center; /* Keep centering */
  }
  #services-1175 .cs-item {
      max-width: 20.5rem; /* Keep the max-width */
      width: 100%; /* Ensure full width within the column */
      grid-column: span 1; /* Keep 1 column per card */
  }
}

/* 4k - 2560px */
@media only screen and (min-width: 48rem) {
  #services-1175 .cs-card-group { 
      width: 80%;
  }
}

/*-- -------------------------- -->
<---         Why Choose         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  hr {
    opacity: 100;
  }

  /* Section styling */
  #why-1166 {
    padding: 20px 0;
    background-color: var(--primary); /* Orange background from the image */
    color: #fff; /* White text for contrast */
  }

  /* Container for the section */
  #why-1166 .cs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(5.625rem, 11.73vw, 9.375rem) 2rem;
  }

  /* Mobile-first: Stack columns vertically */
  #why-1166 .cs-left-column, .cs-right-column {
    width: 100%;
  }

  /* Heading styling */
  #why-1166 .cs-heading {
    text-align: center;
    padding: 20px 0;
    font-weight: 900;
  }

  #why-1166 .cs-title {
    font-size: 2rem; /* Large heading */
    font-weight: 700;
    color: #fff;
    font-family: "Montserrat";
  }

  #why-1166 .cs-line {
    width: 50px;
    height: 4px;
    background-color: #ffffff;
    margin: 10px auto;
    border: none;
  }

  /* List and items styling */
  #why-1166 .cs-list {
    list-style: none;
    padding: 0;
  }

  #why-1166 .cs-item {
    margin-bottom: 1rem;
  }

  #why-1166 .cs-flex {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 2rem;
    width: 90%;
  }

  #why-1166 .cs-arrow-wrapper {
    flex-shrink: 0;
    margin-top: .8rem;
  }

  #why-1166 .cs-arrow {
    fill: none;
    stroke: #fff; /* White arrow */
  }

  #why-1166 .cs-content {
    flex-grow: 1;
  }

  #why-1166 .cs-subtitle {
    font-size: 1.3rem;
    color: #000; /* Black text for headings in the list */
    margin-bottom: 10px;
    font-family: 'montserrat';
    font-weight: 650;
  }

  #why-1166 .cs-text {
    font-size: 1rem;
    color: #000; /* Black text for paragraphs in the list */
    line-height: 1.5;
    font-family: 'Inter';
  }
}

/* Tablet and above (min-width: 768px) - Two-column layout */
@media (min-width: 48rem) {
  #why-1166 .cs-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: clamp(5.625rem, 11.73vw, 9.375rem) 2rem;
  }  

  #why-1166 .cs-left-column, .cs-right-column {
      width: 48%;
  }

  #why-1166 .cs-heading {
      text-align: left;
      padding: 0;
  }

  #why-1166 .cs-title {
      font-size: 2.7rem; /* Larger heading for desktop */
  }

  #why-1166 .cs-subtitle {
      font-size: 1.4rem;
  }

  #why-1166 .cs-text {
      font-size: 1.1rem;
  }

  #why-1166 .cs-arrow-wrapper {
    margin-right: 0.5rem; /* Slightly more spacing on desktop if needed */
    margin-top: 1rem;
  }
  #why-1166 .cs-line {
    margin-left: .5rem;
  }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-1166 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      padding: 150px 30px;
  }
  #why-1166 .cs-content {
      max-width: 67%;
  }
  #why-1166 .cs-image-group {
      font-size: min(1vw, 1em);
      height: 100%;
      padding: 0;
      flex: none;
      position: absolute;
      top: -50%;
      right: 50%;
  }
  #why-1166 .cs-graphic-wrapper {
      height: 87%;
  }
  #why-1166 .cs-graphic {
      /* changes at large desktop */
      width: 122.375em;
      top: 0;
      transform: translateX(-50%) rotate(-10deg);
  }
  #why-1166 .cs-picture1 {
      height: 62%;
      max-height: 29.8125em;
      right: auto;
      left: 50%;
      transform: translateX(-54%);
  }
  #why-1166 .cs-picture2 {
      height: 67%;
      max-height: 33.625em;
  }
  #why-1166 .cs-arrow-wrapper {
    margin-right: 0.5rem; /* Slightly more spacing on desktop if needed */
    margin-top: 1.3rem;
  }

  #why-1166 .cs-arrow {
      width: 1.25rem; /* Slightly larger on desktop for better visibility */
      height: 1.75rem;
      stroke-width: 2.5; /* Adjust stroke for clarity on larger screens */
  }
  #why-1166.cs-text {
    font-size: 1.2rem;
  }
  #why-1166 .cs-subtitle {
    font-size: 1.6rem;
  }
  #why-1166 .cs-title {
    font-size: 2.8rem;
  }
}

/*-- -------------------------- -->
<---      Latest Projects       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1251 {
      padding: clamp(5.625rem, 11.73vw, 9.375rem) 2rem clamp(2.8125rem, 5.865vw, 4.6875rem) 2rem;
      position: relative;
      z-index: 10;
      background-color: #F5F5F5;
  }
  #services-1251 .cs-container {
      width: 100%;
      max-width: 30rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1251 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
  }
  #services-1251 .cs-title {
    /* Base styling for the title - adjust if needed */
    font-size: var(--headerFontSize); /* Matches hero title size */
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    margin: 0 auto clamp(1rem, 4vw, 1.5rem);
    color: var(--headerColor); /* Matches service item headers */
    position: relative;
    font-family: "Montserrat";
  }

  #services-1251 .cs-title:after {
      /* Yellow Line Below */
      content: "";
      width: 4.55rem; /* Matches hero line width */
      height: 0.5rem; /* Matches hero line thickness */
      margin: clamp(1rem, 4vw, 1.5rem) auto 0; /* Space between text and line */
      background: var(--primary); /* Yellow, assuming --primary is yellow */
      opacity: 1;
      position: relative;
      display: block;
  }
  #services-1251 .cs-card-group {
      margin: 0;
      padding: 0;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #services-1251 .cs-item {
      width: 100%;
      height: 80%;
      text-align: left;
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #000;
      border-radius: 0.5rem;
      /* clips background image corners */
      overflow: hidden;
      box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      grid-column: span 12;
      grid-row: span 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      position: relative;
      z-index: 1;
  }
  #services-1251 .cs-item:before {
      content: "";
      width: 100%;
      height: 100%;
      /* prevents border from affecting height and width */
      box-sizing: border-box;
      border-radius: 1rem;
      /* prevents the mouse from interacting with it so when you hover hover the other elements inside the card it doesn't block your mouse from hovering over them */
      pointer-events: none;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: 10;
  }
  #services-1251 .cs-link {
      text-decoration: none;
      /* 125px - 236px */
      /* padding goes on the link, not the cs-item as is normal. We do this because we want the whole card to be hoverable. So we add the padding to the link tag to create the space inside the card. By adding the space inside the cs-link tag we can make the whole card hoverable since the padding is now contributing to the height and widht of the link */
      padding: clamp(7.8125rem, 19vw, 14.75rem) 1.5rem 1.5rem;
  }
  #services-1251 .cs-h3 {
      /* 20px - 25px */
      font-size: 0.9rem;
      font-weight: 650;
      text-align: inherit;
      margin: 0 0 0.75rem 0;
      color: var(--bodyTextColorWhite);
      font-family: "Montserrat";
      transition: color 0.3s;
  }
  #services-1251 .cs-item-text {
      /* 14px - 16px */
      font-size: .7rem;
      line-height: 1rem;
      max-width: 18.12rem;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColorWhite);
      font-family: 'Inter';
  }
  #services-1251 .cs-item-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: .8;
  }
  #services-1251 .cs-item-background:before {
      /* background color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: #1a1a1a;
      opacity: 0.24;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #services-1251 .cs-item-background:after {
      /* background color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: -moz-linear-gradient(
          top,
          rgba(0, 0, 0, 0) 0%,
          #000000 100%
      );
      /* FF3.6-15 */
      background: -webkit-linear-gradient(
          top,
          rgba(0, 0, 0, 0) 0%,
          #000000 100%
      );
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0) 0%,
          #000000 100%
      );
      opacity: 0.4;
      bottom: 0;
      left: 0;
      z-index: 2;
  }
  #services-1251 .cs-item-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* Makes img tag act as a background image */
      object-fit: cover;
      transition:
          transform 0.6s,
          opacity 0.3s;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1251 .cs-container {
    width: 100%;
    max-width: 80rem;
  }
  
  #services-1251 .cs-content {
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      gap: 3rem;
  }
  #services-1251 .cs-title {
      margin: 0;
  }
  #services-1251 .cs-flex-group {
      width: 50%;
  }
  #services-1251 .cs-item {
      grid-column: span 4;
  }
  #services-1251 .cs-item:nth-child(1) .cs-item-background img {
    object-position: center top; /* First card */
  }
  #services-1251 .cs-item:nth-child(2) .cs-item-background img {
      object-position: center; /* Second card */
  }
  #services-1251 .cs-item:nth-child(3) .cs-item-background img {
      object-position: center; /* Third card */
  }
  #services-1251 .cs-item {
    height: 80%;
  }
}

@media only screen and (min-width: 20rem) {
  #services-1251 .cs-item {
    height: 100%;
  }
}

/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-567 {
      padding: var(--sectionPadding);
      background-color: #F5F5F5;
  }
  #reviews-567 .cs-title {
    font-family: "Montserrat";
  }
  #reviews-567 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 30.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-567 .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;
  }
  #reviews-567 .cs-content::after {
      content: "";
      width: 4.55rem;
      height: 0.5rem;
      margin: clamp(1rem, 4vw, 1.5rem) auto 0;
      background: var(--primary);
      opacity: 1;
      position: relative;
      display: block;
  }

  #reviews-567 .cs-card-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* 16px - 20px */
      gap: clamp(1rem, 2.5vw, 1.15rem);
  }
  #reviews-567 .cs-item {
      list-style: none;
      width: 100%;
      max-width: 30.375rem;
      /* 32px - 60px top & bottom */
      /* 16px - 48px left & right */
      padding: clamp(2rem, 6.15vw, 3.75rem) clamp(1rem, 4.15vw, 3rem);
      border-radius: 15px;
      border-width: 2px;
      border-style: solid;
      border-color: #D9D9D9;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      position: relative;
      background-color: #fafafa;
  }
  #reviews-567 .cs-stars {
      /* 169px - 189px */
      width: clamp(10.5625rem, 20vw, 11.8125rem);
      height: auto;
      /* 20px - 24px */
      margin-bottom: clamp(1.25rem, 3vw, 1.5rem);
      display: block;
  }
  #reviews-567 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      margin: 0;
      /* 40px - 64px */
      margin-bottom: clamp(2.5rem, 8vw, 4rem);
      color: var(--bodyTextColor);
      font-family: "inter";
  }
  #reviews-567 .cs-flex-group {
      /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
      margin-top: auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 1.25rem;
  }
  #reviews-567 .cs-profile {
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      /* clips image corners to make circle */
      overflow: hidden;
      position: relative;
      display: block;
  }
  #reviews-567 .cs-profile img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes the image behave like a background image */
      object-fit: cover;
  }
  #reviews-567 .cs-name {
      /* 16px - 20px */
      font-size: clamp(1rem, 2vw, 1.25rem);
      line-height: 1.5em;
      font-weight: 700;
      margin: 0 0 0.5rem 0;
      color: var(--headerColor);
      display: block;
      font-family: "Montserrat";
  }
  #reviews-567 .cs-job {
      /* 13px - 16px */
      font-size: clamp(0.8125rem, 1.6vw, 1rem);
      line-height: 1.2em;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      margin: 0;
      color: var(--bodyTextColor);
      display: block;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-567 .cs-container {
      max-width: 80rem;
  }
  #reviews-567 .cs-card-group {
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
      flex-wrap: wrap;
  }
  #reviews-567 .cs-item {
      width: clamp(48.5%, 46.5vw, 49.5%);
      width: 100%;
      max-width: 100%;
      align-items: center;
  }
  #reviews-567 .cs-item:last-of-type {
      width: 100%;
      max-width: 100%;
      align-items: center;
  }
  #reviews-567 .cs-item:last-of-type .cs-item-text {
      text-align: center;
      max-width: 34.375rem;
  }
}

/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #reviews-567 .cs-card-group {
      flex-wrap: nowrap;
  }
  #reviews-567 .cs-item {
      width: 100%;
      align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type {
      align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type .cs-item-text {
      text-align: left;
  }
}

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1346 {
    padding: var(--sectionPadding);
    position: relative;
    background-color: #F5F5F5;
  }
  #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-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-title {
    font-family: "Montserrat";
  }

  #faq-1346 .cs-title:after {
    /* Yellow Line Below */
    content: "";
    width: 4.55rem; /* Matches hero line width */
    height: 0.5rem; /* Matches hero line thickness */
    margin: clamp(1rem, 4vw, 1.5rem) auto 0; /* Space between text and line */
    background: var(--primary); /* Yellow, assuming --primary is yellow */
    opacity: 1;
    position: relative;
    display: block;
  }
  #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;
  }
  #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;
    background-color: #fafafa;
  }
  #faq-1346 .cs-faq-item {
    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);
    background-color: #fafafa;
    transition: transform 0.6s,
                opacity 0.3s;
  }
  #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: 1rem clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 1.3vw, 1.5rem);
    opacity: 1;
    font-family: "inter";
  }
  #faq-1346 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: 600;
    /* 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: "Montserrat";
  }
  #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;
    justify-content: center;
  }
  #faq-1346 .cs-button-group {
    width: 31%;
    max-width: 25.8125rem;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-2236 {
    background-color: #f7f7f7;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #cta-2236 .cs-container {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 5vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #cta-2236 .cs-container::before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-2236 .cs-content {
    /* aligns text centrally. set to left to left-align text */
    text-align: center;
    padding: var(--sectionPadding);
    /* 60px - 150px */
    padding-top: clamp(3.75rem, 8.82vw, 9.375rem);
    padding-bottom: clamp(3.75rem, 8.82vw, 9.375rem);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* centrally aligns items. set to flex-start to left-align items */
    align-items: center;
    z-index: 2;
  }
  #cta-2236 .cs-title {
    /* 31px - 39px */
    font-size: clamp(1.9375rem, 3vw, 2.4375rem);
    color: var(--bodyTextColorWhite);
    font-family: "Montserrat";
  }

  #cta-2236 .cs-title:before {
    /* Divider Line */
    content: "";
    width: 3.25rem;
    height: 0.5rem;
    /* Position it above the title with spacing */
    margin: 0 auto clamp(1rem, 4vw, 1.5rem);
    background: var(--primary);
    opacity: 1;
    position: relative;
    display: block;
  }

  #cta-2236 .cs-text {
    margin: 0 0 2rem;
    color: var(--bodyTextColorWhite);
    font-family: "Inter";
  }
  #cta-2236 .cs-button-outline {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 12.5rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    /* 32px - 48px */
    padding: 0 clamp(2rem, 4vw, 3rem);
    pointer-events: auto;
    color: var(--bodyTextColorWhite);
    border: 1px solid var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    transition: color 0.3s;
    font-family: "Montserrat";
  }
  #cta-2236 .cs-button-outline:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cta-2236 .cs-button-outline:hover {
    color: var(--headerColor);
  }
  #cta-2236 .cs-button-outline:hover:before {
    width: 100%;
  }
  #cta-2236 .cs-video-wrapper {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
  }
  #cta-2236 .cs-video-wrapper video,
  #cta-2236 .cs-video-wrapper .cs-picture {
    width: 100%;
    height: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #cta-2236 .cs-video-wrapper video img,
  #cta-2236 .cs-video-wrapper .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #cta-2236 .cs-video-wrapper video:before,
  #cta-2236 .cs-video-wrapper .cs-picture:before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    /* prevents the cursor from interacting with it */
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}