:root {
  /* --- Color Scheme Inspired by ZOAK Consulting --- */
  /* Primary Accent (e.g., buttons, active links - choose a professional blue) */
  /* Option 1: Standard Bootstrap Blue */
  --primary: #ef0303;
  /* Option 2: A slightly softer blue found in some headings */
  /* --primary: #3A7CA5; */
  /* Lighter Primary (e.g., hover states - adjust based on chosen primary) */
  --primaryLight: #305da2;
  /* --primaryLight: #6d9ebb; */ /* Lighter version of #3A7CA5 */
  /* Secondary Color (Often a neutral grey in such schemes) */
  --secondary: #6c757d; /* Bootstrap's standard secondary grey */
  /* Secondary Light (Lighter grey) */
  --secondaryLight: #adb5bd;
  /* Dark Background (Match the deep blue/charcoal) */
  /* Option 1: Dark Blueish */
  --dark: #101d34;
  /* Option 2: Very Dark Grey/Near Black */
  /* --dark: #212529; */
  /* Text Color on Light Backgrounds */
  --headerColor: #1a1a1a; /* Near Black for Headings (Keep Original) */
  --bodyTextColor: #343a40; /* Dark Grey for Body Text (Slightly lighter than pure black) */
  /* Text Color on Dark Backgrounds */
  --bodyTextColorWhite: #fafbfc; /* Off-White (Keep Original) */
  /* --- Font Sizes & Padding (Keep Original) --- */
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  /* Note: The original --dark variable is repurposed for the main dark background. */
}

/* Suggestion: Add basic body styles for default background/text */
body {
  background-color: #ffffff;
  color: var(--bodyTextColor);
}

/* Example for dark sections (you'd apply a class like .dark-section) */
.dark-section {
  background-color: var(--dark);
  color: var(--bodyTextColorWhite);
  /* Ensure links/headings inside dark sections also use light text */
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
  color: var(--bodyTextColorWhite);
}

.dark-section a {
  color: var(--primaryLight); /* Or use primary, but light might stand out better */
}

.dark-section a:hover {
  color: var(--bodyTextColorWhite);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

*, *:before, *:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}

.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

body.dark-mode {
  /* You can define variable overrides here too */
  --headerColor: #f0f0f0;
  --bodyTextColor: #d0d0d0;
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-navigation .cs-top-bar {
    /* Transition height, visibility, opacity, border */
    transition: height 0.3s ease-out, visibility 0.3s ease-out, opacity 0.3s ease-out, border-width 0.3s ease-out;
    position: relative;
    z-index: 10;
    overflow: hidden;
    /* Removed padding from this transition */
    /* Target inner container for padding transition */
  }
  #cs-navigation .cs-top-bar .cs-top-container {
    transition: padding 0.3s ease-out;
    /* Explicitly set initial padding if needed, mirroring style.scss */
    /* padding-top: calc(16 / 16 * 1rem); */
    /* padding-bottom: 0; /* Mobile has 0 bottom padding initially */
  }
  #cs-navigation .cs-top-bar.cs-nav-hidden {
    /* Collapse height and border */
    height: 0;
    border-width: 0;
    /* Fade out and hide */
    visibility: hidden;
    opacity: 0;
    /* Removed padding changes from here */
    /* padding-top: 0; */
    /* padding-bottom: 0; */
    /* Collapse padding on the inner container */
  }
  #cs-navigation .cs-top-bar.cs-nav-hidden .cs-top-container {
    padding-top: 0;
    padding-bottom: 0;
  }
}
/* src/scss/dark.scss */
/*-- -------------------------- -->
<---      Dark Mode Specific    -->
<---      Styles & Overrides    -->
<--- -------------------------- -*/
/* Defines how the toggle button *icons* look in dark mode */
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  body.dark-mode {
    /* Add global dark mode styles here if needed, like body background */
    /* Example:
    background-color: var(--dark);
    color: var(--bodyTextColorWhite);
    */
  }
  body.dark-mode #dark-mode-toggle .cs-sun {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    transform: translate(-50%, -150%);
    opacity: 0;
    fill: #fff;
  }
}
/* Dark Mode Navigation Overrides for Mobile/Tablet */
@media only screen and (max-width: 1299.5px) {
  body.dark-mode {
    /* Add other component dark mode overrides for this breakpoint */
  }
  body.dark-mode #cs-navigation {
    background-color: var(--dark, #1a1a1a);
  }
  body.dark-mode #cs-navigation.cs-active .cs-picture {
    background-color: var(--primaryLight);
  }
  body.dark-mode #cs-navigation .cs-default {
    transform: rotateX(180deg);
    opacity: 0;
  }
  body.dark-mode #cs-navigation .cs-dark {
    transform: rotateX(360deg);
    opacity: 1;
  }
  body.dark-mode #cs-navigation .cs-social-link {
    background-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #cs-navigation .cs-social-icon {
    filter: grayscale(1) brightness(1000%);
    opacity: 1;
  }
  body.dark-mode #cs-navigation .cs-top-bar:before {
    opacity: 0.1;
    background: #fff;
  }
  body.dark-mode #cs-navigation .cs-item {
    color: var(--bodyTextColorWhite, #fff);
  }
  body.dark-mode #cs-navigation .cs-link, body.dark-mode #cs-navigation .cs-header, body.dark-mode #cs-navigation .cs-link-content {
    color: var(--bodyTextColorWhite, #fff);
  }
  body.dark-mode #cs-navigation .cs-icon, body.dark-mode #cs-navigation .cs-button-icon {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-toggle {
    background-color: var(--primary);
  }
  body.dark-mode #cs-navigation .cs-line {
    background-color: var(--dark-toggle-lines, #1a1a1a);
  }
  body.dark-mode #cs-navigation .cs-wrapper:before {
    opacity: 0.1;
    background-color: #fff;
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: var(--dark, #1a1a1a);
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper:before {
    /* Optional dark overlay for contrast if needed */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2; /* Adjust opacity as needed */
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1; /* Place it behind the links */
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite, #fff);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
}
/* Dark Mode Navigation Overrides for Desktop */
@media only screen and (min-width: 1024px) {
  body.dark-mode {
    /* Add other component dark mode overrides for this breakpoint */
  }
  body.dark-mode #cs-navigation {
    background-color: var(--dark, #1a1a1a);
  }
  body.dark-mode #cs-navigation .cs-top-bar:before {
    opacity: 0.1;
    background: #fff;
  }
  body.dark-mode #cs-navigation .cs-social-link {
    background-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #cs-navigation .cs-social-link:hover {
    background-color: var(--primary);
  }
  body.dark-mode #cs-navigation .cs-social-icon {
    filter: grayscale(1) brightness(1000%);
    opacity: 1;
  }
  body.dark-mode #cs-navigation .cs-logo, body.dark-mode #cs-navigation .cs-contact-wrapper {
    border-color: rgba(255, 255, 255, 0.1);
  }
  body.dark-mode #cs-navigation .cs-default {
    transform: rotateX(180deg);
    opacity: 0;
  }
  body.dark-mode #cs-navigation .cs-dark {
    transform: rotateX(360deg) translateX(-50%);
    opacity: 1;
  }
  body.dark-mode #cs-navigation .cs-picture {
    background-color: var(--accent, var(--primaryLight));
  }
  body.dark-mode #cs-navigation .cs-item {
    color: var(--bodyTextColorWhite, #fff);
  }
  body.dark-mode #cs-navigation .cs-item:after {
    opacity: 0.1;
    background: #fff;
  }
  body.dark-mode #cs-navigation .cs-wrapper:before {
    opacity: 0.1;
    background-color: #fff;
  }
  body.dark-mode #cs-navigation .cs-button-icon {
    filter: grayscale(1) brightness(1000%);
    opacity: 1;
  }
  body.dark-mode #cs-navigation .cs-link, body.dark-mode #cs-navigation .cs-header, body.dark-mode #cs-navigation .cs-li-link, body.dark-mode #cs-navigation .cs-link-content {
    color: var(--bodyTextColorWhite, #fff);
  }
  body.dark-mode #cs-navigation .cs-link:hover, body.dark-mode #cs-navigation .cs-header:hover, body.dark-mode #cs-navigation .cs-li-link:hover, body.dark-mode #cs-navigation .cs-link-content:hover {
    color: var(--primary);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-active, body.dark-mode #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  body.dark-mode #cs-navigation .cs-li-link:before {
    background-color: var(--primaryLight);
  }
  body.dark-mode #cs-navigation .cs-button-border {
    border-color: #fff;
    color: #fff;
  }
  body.dark-mode #cs-navigation .cs-button-border:hover {
    background-color: #fff;
    color: var(--headerColor);
  }
  body.dark-mode #cs-navigation .cs-button-border:hover .cs-icon {
    filter: grayscale(0) brightness(100%);
  }
  body.dark-mode #cs-navigation .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
}
/* Dark Mode Overrides for Largest Desktop */
@media only screen and (min-width: 1500px) {
  body.dark-mode {
    /* Add other component dark mode overrides for this breakpoint */
  }
}
/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-288 {
    /* centers button */
    text-align: center;
    /* 116px - 164px top */
    /* 60px - 100px  bottom */
    padding: clamp(7.25rem, 16.82vw, 10.25rem) 1rem clamp(3.75rem, 7.82vw, 6.25rem);
    position: relative;
    /* Hide overflow during initial animation */
    overflow: hidden;
  }
  #hero-288 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #hero-288 .cs-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #hero-288 .cs-title,
  #hero-288 .cs-text,
  #hero-288 .cs-button-solid,
  #hero-288 .cs-item,
  #hero-288 .cs-picture,
  #hero-288 .cs-waves {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  #hero-288 .cs-title,
  #hero-288 .cs-text,
  #hero-288 .cs-button-solid,
  #hero-288 .cs-item {
    transform: translateY(30px);
  }
  #hero-288 .cs-picture {
    transform: scale(0.95);
  }
  #hero-288 .cs-title.active,
  #hero-288 .cs-text.active,
  #hero-288 .cs-button-solid.active,
  #hero-288 .cs-item.active,
  #hero-288 .cs-picture.active,
  #hero-288 .cs-waves.active {
    opacity: 1;
    transform: translate(0) scale(1);
  }
  #hero-288 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    max-width: 43.75rem;
    margin: 0 auto 1rem;
    color: var(--headerColor);
    position: relative;
  }
  #hero-288 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    max-width: 33.1875rem;
    margin: 0 auto;
    /* 28px - 40px */
    margin-bottom: clamp(1.75rem, 3.92vw, 2.5rem);
    color: var(--bodyTextColor);
  }
  #hero-288 .cs-button-solid {
    /* Use global button style */
    background-color: var(--primary); /* Use primary color to match other buttons */
    color: #fff; /* White text for dark button */
    margin: 0; /* Reset margin for animation positioning */
    /* Keep standard hover effect from global style */
  }
  #hero-288 .cs-button-solid:hover {
    color: #fff; /* Keep text white on hover */
  }
  #hero-288 .cs-stats-group {
    max-width: 32.625rem;
    margin: 0;
    /* 40px - 98px */
    margin-top: clamp(2.5rem, 6.3vw + 1rem, 6.125rem);
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 10vw, 3rem);
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    /* 20px - 40px */
    column-gap: clamp(1.25rem, 5.9vw, 2.5rem);
  }
  #hero-288 .cs-item {
    list-style: none;
    width: auto;
  }
  #hero-288 .cs-number {
    /* 25px - 49px */
    font-size: clamp(1.5625rem, 3.8vw, 3.0625rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    display: block;
  }
  #hero-288 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2.1vw, 1rem);
    line-height: 1.5em;
    color: #767676;
  }
  #hero-288 .cs-picture {
    width: 100%;
    max-width: 36.5625rem;
    /* 380px - 453px */
    height: clamp(23.75rem, 59vw, 28.3215rem);
    border-radius: 1rem;
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #hero-288 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act as a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-288 {
    text-align: left;
  }
  #hero-288 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 6.25rem;
  }
  #hero-288 .cs-content {
    width: 40%;
    /* prevents flex-box from squishing it */
    flex: none;
    align-items: flex-start;
  }
  #hero-288 .cs-title,
  #hero-288 .cs-text {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  #hero-288 .cs-button-solid {
    margin: 0;
  }
  #hero-288 .cs-stats-group {
    justify-content: flex-start;
    margin-left: 0;
  }
  #hero-288 .cs-picture {
    max-width: 39.375rem;
    /* 623px - 814px */
    height: clamp(38.9375rem, 60vw, 50.875rem);
  }
}
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1262 {
    padding: var(--sectionPadding);
    /* clips svg graphic from overflowing the section */
    overflow: hidden;
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
    /* Global button style from style.scss is used instead */
    /* Default state: .cs-option1 is visible (transform: rotateY(0deg) by default) */
    /* .cs-option2 is hidden via transform: rotateY(180deg) above */
    /* Active state (when .cs-option2-active is added to this #pricing-1262) */
    /* Base styling for plan names - Ensure this is outside &.cs-option2-active */
    /* Base styles for the toggle switch - Ensure this is outside &.cs-option2-active */
  }
  #pricing-1262 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    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;
    perspective: 1100px;
  }
  #pricing-1262 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 40.1875rem;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #pricing-1262 .cs-text {
    margin-bottom: 1rem;
  }
  #pricing-1262 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #pricing-1262 .cs-toggle-group {
    width: 100%;
    max-width: 25.875rem;
    margin: 0;
    padding: 0.75rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #f1f1f4;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #pricing-1262 .cs-plan {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
  }
  #pricing-1262 .cs-plan:hover {
    cursor: pointer;
  }
  #pricing-1262 .cs-toggle {
    /* Define INACTIVE state styles here */
    width: 3.25rem;
    height: 2rem;
    border-radius: 2.5rem;
    background-color: var(--primaryLight);
    margin: 0 1.5rem;
    position: relative;
    flex: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  #pricing-1262 .cs-toggle-switch {
    /* Define INACTIVE state styles here */
    width: 1.625rem;
    height: 1.625rem;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(0px);
    left: 0.1875rem;
    transition: transform 0.3s ease, left 0.3s ease;
    background: #fff;
  }
  #pricing-1262 .cs-ul-wrapper {
    position: relative;
    z-index: 10;
    perspective: 1200px;
    transform-style: preserve-3d;
  }
  #pricing-1262 .cs-option2 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
  }
  #pricing-1262 .cs-option2 .cs-item {
    border-radius: 0 1.5rem 0 0;
  }
  #pricing-1262 .cs-option2 .cs-item:nth-of-type(2) {
    border-radius: 0 0 0 1.5rem;
  }
  #pricing-1262 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border-radius: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    transition: transform 0.8s;
  }
  #pricing-1262 .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;
    /* Add transitions for smooth color changes */
    transition: transform 0.8s ease, background-color 0.3s ease, border-color 0.3s ease;
    /* Ensure children elements also transition colors smoothly */
    /* Ensure button transitions smoothly too */
  }
  #pricing-1262 .cs-item:nth-of-type(2) {
    border-radius: 0 0 1.5rem 0;
  }
  #pricing-1262 .cs-item .cs-package,
  #pricing-1262 .cs-item .cs-price,
  #pricing-1262 .cs-item .cs-duration,
  #pricing-1262 .cs-item .cs-item-text,
  #pricing-1262 .cs-item .cs-li {
    transition: color 0.3s ease;
  }
  #pricing-1262 .cs-item .cs-button-transparent {
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
  }
  #pricing-1262 .cs-item.cs-popular {
    background-color: #14142b;
    border: none;
    /* Specific transitions for popular state might override base, ensure consistency */
  }
  #pricing-1262 .cs-item.cs-popular .cs-popular-tag {
    display: inline-flex;
  }
  #pricing-1262 .cs-item.cs-popular .cs-package,
  #pricing-1262 .cs-item.cs-popular .cs-price,
  #pricing-1262 .cs-item.cs-popular .cs-duration,
  #pricing-1262 .cs-item.cs-popular .cs-item-text,
  #pricing-1262 .cs-item.cs-popular .cs-li {
    color: var(--bodyTextColorWhite);
  }
  #pricing-1262 .cs-item.cs-popular .cs-item-text,
  #pricing-1262 .cs-item.cs-popular .cs-li {
    opacity: 0.8;
  }
  #pricing-1262 .cs-item.cs-popular .cs-icon {
    filter: none;
    opacity: 1;
  }
  #pricing-1262 .cs-item.cs-popular .cs-button-transparent {
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border: none;
    transition: color 0.3s;
  }
  #pricing-1262 .cs-item.cs-popular .cs-button-transparent:before {
    background-color: #fff;
  }
  #pricing-1262 .cs-item.cs-popular .cs-button-transparent:hover {
    color: var(--primary);
  }
  #pricing-1262 .cs-item.cs-popular .cs-package,
  #pricing-1262 .cs-item.cs-popular .cs-price,
  #pricing-1262 .cs-item.cs-popular .cs-duration,
  #pricing-1262 .cs-item.cs-popular .cs-item-text,
  #pricing-1262 .cs-item.cs-popular .cs-li {
    transition: color 0.3s ease; /* Keep transition */
  }
  #pricing-1262 .cs-item.cs-popular .cs-button-transparent {
    /* Inherits transition from base, but might need overrides */
    /* if popular button styles differ significantly beyond color */
  }
  #pricing-1262 .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-1262 .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-1262 .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-1262 .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-1262 .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-1262 .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-1262 .cs-duration {
    font-size: 0.875rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--headerColor);
  }
  #pricing-1262 .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-1262 .cs-ul {
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #pricing-1262 .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-1262 .cs-li.cs-disabled {
    opacity: 0.5;
  }
  #pricing-1262 .cs-li.cs-disabled .cs-icon {
    filter: grayscale(1) brightness(300%);
  }
  #pricing-1262 .cs-icon {
    width: 1.5rem;
    height: auto;
    filter: grayscale(1);
    opacity: 0.5;
    display: block;
  }
  #pricing-1262 .button-solid {
    width: 100%;
  }
  #pricing-1262 .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: 0.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-1262 .cs-button-transparent: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;
  }
  #pricing-1262 .cs-button-transparent:hover {
    color: #fff;
    border-color: #000;
    background-color: #000;
  }
  #pricing-1262 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #pricing-1262.cs-option2-active {
    /* Rotate Option 1 away */
    /* Rotate Option 2 into view */
    /* Style the toggle switch itself when active (Option 2 is active) */
    /* Style active plan name (Option 2 name) */
  }
  #pricing-1262.cs-option2-active .cs-option1 {
    transform: rotateY(-180deg); /* Rotate out */
  }
  #pricing-1262.cs-option2-active .cs-option2 {
    transform: rotateY(0deg); /* Rotate in */
  }
  #pricing-1262.cs-option2-active .cs-toggle {
    background-color: var(--primary);
  }
  #pricing-1262.cs-option2-active .cs-toggle .cs-toggle-switch {
    /* Move the switch to the right */
    /* Using left property to match original intent */
    left: 1.4375rem;
    /* Or using transform: (Choose one method) */
    /* transform: translateY(-50%) translateX(calc(52 / 16 * 1rem - 26 / 16 * 1rem - 6 / 16 * 1rem)); */
  }
  #pricing-1262.cs-option2-active .cs-toggle-group .cs-plan.cs-active { /* This correctly targets option2Name now */
    color: var(--primary);
    opacity: 1;
    font-weight: bold;
  }
  #pricing-1262.cs-option2-active .cs-toggle-group .cs-plan:not(.cs-active) { /* This correctly targets option1Name now */
    color: var(--bodyTextColor);
    opacity: 0.7;
    font-weight: normal;
  }
  #pricing-1262 .cs-toggle-group .cs-plan {
    color: var(--bodyTextColor);
    transition: color 0.3s ease, opacity 0.3s ease, font-weight 0.3s ease;
    cursor: pointer;
    opacity: 0.7;
    font-weight: normal;
  }
  #pricing-1262 .cs-toggle-group .cs-plan.cs-active {
    color: var(--primary);
    opacity: 1;
    font-weight: bold;
  }
  #pricing-1262 .cs-toggle {
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  #pricing-1262 .cs-toggle .cs-toggle-switch {
    position: absolute;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
}
/* Add rule for disabling transitions during flip */
#pricing-1262.cs-is-flipping .cs-item,
#pricing-1262.cs-is-flipping .cs-item.cs-popular {
  transition-property: transform;
  transition-duration: 0.8s;
  transition-timing-function: ease;
  /* background-color and border-color will change instantly without transition */
}
#pricing-1262.cs-is-flipping .cs-item .cs-package,
#pricing-1262.cs-is-flipping .cs-item .cs-price,
#pricing-1262.cs-is-flipping .cs-item .cs-duration,
#pricing-1262.cs-is-flipping .cs-item .cs-item-text,
#pricing-1262.cs-is-flipping .cs-item .cs-li,
#pricing-1262.cs-is-flipping .cs-item .cs-button-transparent {
  transition-property: none !important;
  /* color will change instantly without transition */
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1262 .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-1262 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  #pricing-1262 .cs-option2 .cs-item {
    border-radius: 1.5rem 0 0 1.5rem;
  }
  #pricing-1262 .cs-option2 .cs-item:nth-of-type(2) {
    border-radius: 0 1.5rem 1.5rem 0;
  }
  #pricing-1262 .cs-item {
    width: 50%;
    border-radius: 1.5rem 0 0 1.5rem;
  }
  #pricing-1262 .cs-item:nth-of-type(2) {
    border-radius: 0 1.5rem 1.5rem 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1262 .cs-container {
    max-width: 80rem;
    position: relative;
    z-index: 1;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #pricing-1262 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    gap: 1.25rem;
  }
  #pricing-1262 .cs-ul-wrapper {
    width: 62%;
    max-width: 46.25rem;
    flex: none;
  }
}
/*-- -------------------------- -->
<---         Why Choose         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-891 {
    /* Centers Button */
    text-align: center;
    padding: var(--sectionPadding);
    /* prevents the arrow from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #why-choose-891 .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);
    position: relative;
  }
  #why-choose-891 .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;
    /* --- Animation Base Styles --- */
    /* Apply to elements that will animate */
    /* --- Animation Visible State --- */
  }
  #why-choose-891 .cs-content .cs-topper,
  #why-choose-891 .cs-content .cs-title,
  #why-choose-891 .cs-content .cs-text {
    opacity: 0;
    transform: translateY(30px); /* Start slightly down */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Performance hint */
  }
  #why-choose-891 .cs-content.is-visible .cs-topper {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s; /* Topper appears first */
  }
  #why-choose-891 .cs-content.is-visible .cs-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s; /* Title appears second */
  }
  #why-choose-891 .cs-content.is-visible .cs-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s; /* Text appears third */
  }
  #why-choose-891 .cs-text {
    max-width: 62.5rem;
  }
  #why-choose-891 .cs-button-solid {
    /* Use global button style but add Why Choose specific adjustments */
    margin-top: clamp(1.5rem, 3vw, 2rem); /* Space after content */
  }
  #why-choose-891 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #why-choose-891 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    /* 20px - 32px */
    padding: clamp(1.25rem, 2.3vw, 2rem);
    background-color: #fef7f4;
    border-radius: 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    grid-column: span 4;
    position: relative;
    z-index: 1;
    /* --- Animation Base Styles --- */
    opacity: 0;
    transform: translateY(30px); /* Start slightly down */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform; /* Performance hint */
    /* --- Staggered Delays --- */
    /* Add more if needed */
    /* --- Animation Visible State --- */
  }
  #why-choose-891 .cs-item:nth-of-type(1) {
    transition-delay: 0.1s;
  }
  #why-choose-891 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #why-choose-891 .cs-item:nth-of-type(3) {
    transition-delay: 0.3s;
  }
  #why-choose-891 .cs-item:nth-of-type(4) {
    transition-delay: 0.4s;
  }
  #why-choose-891 .cs-item:nth-of-type(5) {
    transition-delay: 0.5s;
  }
  #why-choose-891 .cs-item:nth-of-type(6) {
    transition-delay: 0.6s;
  }
  #why-choose-891 .cs-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  #why-choose-891 .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.25rem 0;
    display: block;
  }
  #why-choose-891 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #why-choose-891 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
  #why-choose-891 .cs-floater {
    width: 21.9375rem;
    height: auto;
    display: none;
    position: absolute;
    top: -13.75rem;
    right: -3.75rem;
    transform: rotate(-66deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-891 .cs-container {
    max-width: 80rem;
  }
  #why-choose-891 .cs-item {
    grid-column: span 2;
  }
  #why-choose-891 .cs-floater {
    display: block;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-891 .cs-item {
    grid-column: span 1;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* 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);
    }
  }
  #sbs-1362 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* Styling for the image card */
  }
  #sbs-1362 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-1362 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-1362 .cs-topper,
  #sbs-1362 .cs-title,
  #sbs-1362 .cs-text,
  #sbs-1362 .cs-item,
  #sbs-1362 .cs-li,
  #sbs-1362 .cs-button-solid,
  #sbs-1362 .cs-image-group,
  #sbs-1362 .cs-box,
  #sbs-1362 .cs-bubbles {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  #sbs-1362 .cs-topper,
  #sbs-1362 .cs-title,
  #sbs-1362 .cs-text,
  #sbs-1362 .cs-item,
  #sbs-1362 .cs-li,
  #sbs-1362 .cs-button-solid {
    transform: translateY(20px);
  }
  #sbs-1362 .cs-image-group {
    transform: scale(0.95);
  }
  #sbs-1362 .cs-box {
    transform: translate(20px, 20px) scale(0.95);
  }
  #sbs-1362 .cs-bubbles {
    transform: translateY(0);
  }
  #sbs-1362.animated-section .cs-topper.active, #sbs-1362.animated-section .cs-title.active, #sbs-1362.animated-section .cs-text.active, #sbs-1362.animated-section .cs-item.active, #sbs-1362.animated-section .cs-li.active, #sbs-1362.animated-section .cs-button-solid.active, #sbs-1362.animated-section .cs-image-group.active, #sbs-1362.animated-section .cs-box.active, #sbs-1362.animated-section .cs-bubbles.active {
    opacity: 1;
    transform: translate(0) scale(1);
  }
  #sbs-1362 .cs-topper {
    color: #767676;
  }
  #sbs-1362 .cs-title {
    /* 23 characters wide including spaces */
    max-width: 26ch;
  }
  #sbs-1362 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-1362 .cs-text:last-of-type {
    margin-bottom: 1.5rem;
  }
  #sbs-1362 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.265rem, 1fr));
    align-items: center;
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #sbs-1362 .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;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #sbs-1362 .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: center;
    gap: 0.5rem;
  }
  #sbs-1362 .cs-h3-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #sbs-1362 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1362 .cs-ul {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #sbs-1362 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push icon top the top so if the list item goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #sbs-1362 .cs-icon {
    width: 1.5rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 1px;
    display: block;
  }
  #sbs-1362 .cs-button-solid {
    /* Use global button style but add SBS-specific adjustments */
    padding: 0 3rem; /* More padding for SBS buttons */
    border-radius: 1.875rem; /* More rounded corners */
    /* Match global hover style */
  }
  #sbs-1362 .cs-button-solid:hover {
    color: #fff; /* Keep text white on hover */
  }
  #sbs-1362 .cs-image-group {
    width: 100%;
    max-width: 36.625rem;
    /* Changes to auto at desktop */
    height: 32.5rem;
    /* 32px - 48px */
    border-radius: clamp(2rem, 4vw, 3rem);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    position: relative;
  }
  #sbs-1362 .cs-image-card {
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
    border-radius: 0.75rem;
    border: 1px solid #e8e8e8;
    padding: clamp(1rem, 3vw, 1.5rem);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* This will clip the corners of the child image */
  }
  #sbs-1362 .cs-image-card .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0.75rem; /* Match the card's border-radius */
    overflow: hidden; /* Ensure image inside is clipped */
  }
  #sbs-1362 .cs-image-card .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #sbs-1362 .cs-box {
    text-align: left;
    width: 100%;
    max-width: 19rem;
    padding: 2rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: var(--primary);
    /* 48px - 80px */
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    position: absolute;
    /* 12px - 20px */
    right: clamp(0.75rem, 1.9vw, 1.5rem);
    /* 12px - 20px */
    bottom: clamp(0.75rem, 1.9vw, 1.5rem);
  }
  #sbs-1362 .cs-box-icon {
    width: 3.75rem;
    height: auto;
    display: block;
  }
  #sbs-1362 .cs-desc {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #sbs-1362 .cs-bubbles {
    font-size: min(2.5vw, 0.7em);
    width: 26.1875em;
    height: 26.6875em;
    position: absolute;
    /* changes to 160px at larger desktop */
    right: -16.25em;
    /* chnages to 30px at Large desktop */
    bottom: -3.125em;
    z-index: -1;
  }
  #sbs-1362 .cs-bubbles:before {
    /* white border bubble */
    content: "";
    width: 20.625em;
    height: 20.625em;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #sbs-1362 .cs-bubbles:after {
    /* orange bubble */
    content: "";
    width: 16.25em;
    height: 16.25em;
    background: var(--primary);
    opacity: 0.15;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1362 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #sbs-1362 .cs-content {
    width: 50%;
    padding-right: clamp(1.5rem, 3vw, 3rem);
    box-sizing: border-box;
  }
  #sbs-1362 .cs-image-group {
    width: 50%;
    height: auto;
  }
  #sbs-1362 .cs-bubbles {
    font-size: min(2.5vw, 1em);
  }
}
/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
  #sbs-1362 .cs-bubbles {
    margin-left: 40.625rem;
    right: auto;
    left: 50%;
    bottom: 1.875rem;
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
/* 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);
    }
  }
  #gallery-1374 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #gallery-1374 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-1374 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #gallery-1374 .cs-topper,
  #gallery-1374 .cs-title,
  #gallery-1374 .cs-content .cs-text,
  #gallery-1374 .cs-item,
  #gallery-1374 .cs-button-solid,
  #gallery-1374 .cs-bubbles {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  #gallery-1374 .cs-topper,
  #gallery-1374 .cs-title,
  #gallery-1374 .cs-content .cs-text,
  #gallery-1374 .cs-button-solid {
    transform: translateY(20px);
  }
  #gallery-1374 .cs-item {
    transform: translateY(30px) scale(0.98);
  }
  #gallery-1374 .cs-bubbles {
    transform: translateY(0);
  }
  #gallery-1374.animated-section .cs-topper.active, #gallery-1374.animated-section .cs-title.active, #gallery-1374.animated-section .cs-content .cs-text.active, #gallery-1374.animated-section .cs-item.active, #gallery-1374.animated-section .cs-button-solid.active, #gallery-1374.animated-section .cs-bubbles.active {
    opacity: 1;
    transform: translate(0) scale(1);
  }
  #gallery-1374 .cs-topper {
    color: var(--secondary);
  }
  #gallery-1374 .cs-content .cs-text {
    color: var(--bodyTextColor);
    margin-top: 1rem;
    line-height: 1.5em;
    max-width: 43.75rem;
  }
  #gallery-1374 .cs-image-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: clamp(1rem, 4.3vw, 3.75rem);
  }
  #gallery-1374 .cs-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #gallery-1374 .cs-item {
    list-style: none;
    width: 100%;
    height: 100%;
    margin: 0;
    grid-column: span 12;
    display: flex;
    flex-direction: column;
  }
  #gallery-1374 .cs-item:hover .cs-h3,
  #gallery-1374 .cs-item:hover .cs-desc {
    color: #fff;
  }
  #gallery-1374 .cs-item:hover .cs-item-text {
    background-color: var(--primary);
  }
  #gallery-1374 .cs-item:hover .cs-icon-wrapper {
    border-color: #fff;
  }
  #gallery-1374 .cs-item:hover .cs-icon {
    filter: brightness(1000%) grayscale(1);
  }
  #gallery-1374 .cs-picture {
    width: 100%;
    /* 344px - 420px */
    height: clamp(21.5rem, 30vw, 26.25rem);
    margin: auto;
    border-radius: 1.5rem;
    display: block;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  #gallery-1374 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #gallery-1374 .cs-item-text {
    /* 16px - 20px top & bottom, 16px - 40px left & right */
    padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2.8vw, 2.5rem);
    background-color: #f7f7f7;
    border-radius: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    gap: 1rem;
    transition: background-color 0.3s;
    min-height: 6.25rem;
    box-sizing: border-box;
  }
  #gallery-1374 .cs-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
  }
  #gallery-1374 .cs-h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
    line-height: 1.2em;
    text-align: left;
    margin: 0;
    color: #1a1a1a;
    transition: color 0.3s;
  }
  #gallery-1374 .cs-desc {
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    line-height: 1.5em;
    color: #1a1a1a;
    text-align: left;
    transition: color 0.3s;
  }
  #gallery-1374 .cs-icon-wrapper {
    width: 3rem;
    height: 3rem;
    border: 1px solid #bababa;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: border-color 0.3s;
  }
  #gallery-1374 .cs-icon {
    width: auto;
    height: 0.75rem;
    transition: filter 0.3s;
  }
  #gallery-1374 .cs-button-solid {
    /* Use global button style but add specific gallery adjustments */
    margin: 2rem 0 0 0;
    border-radius: 3rem;
  }
  #gallery-1374 .cs-bubbles {
    width: 25.9375rem;
    height: 34.125rem;
    position: absolute;
    right: -10.25rem;
    bottom: -2.875rem;
    z-index: -1;
  }
  #gallery-1374 .cs-bubbles:before {
    content: "";
    width: 21.3125rem;
    height: 21.3125rem;
    background: transparent;
    opacity: 1;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  #gallery-1374 .cs-bubbles:after {
    content: "";
    width: 21.3125rem;
    height: 21.3125rem;
    background: var(--primary);
    opacity: 0.1;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
}
/* In Between - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-1374 .cs-item {
    grid-column: span 6;
  }
  #gallery-1374 .cs-image-group .cs-item:only-child {
    grid-column: 3/11;
  }
  #gallery-1374 .cs-image-group .cs-item:only-child .cs-picture img {
    object-fit: contain;
    background-color: #f8f9fa;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-1374 .cs-image-group {
    grid-template-rows: auto;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #gallery-1374 .cs-bubbles {
    right: -6.25rem;
    bottom: 3.125rem;
  }
  #gallery-1374 .cs-image-group .cs-item:only-child {
    grid-column: 4/10;
  }
  #gallery-1374 .cs-image-group .cs-item:only-child .cs-picture img {
    object-fit: contain;
    background-color: #f8f9fa;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1282 {
    position: relative;
    padding: var(--sectionPadding);
    overflow: hidden;
    z-index: 1;
    /* Example Topper Style - Add if you use it */
    /* Example Title Style */
  }
  #services-1282 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    /* changes to 1280px on tablet */
    max-width: 34.375rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1282 .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-1282 .cs-flex-group {
    /* prevents flexbox from squishing it */
    flex: none;
    width: 100%;
    text-align: left;
  }
  #services-1282 .cs-topper,
  #services-1282 .cs-title,
  #services-1282 .cs-text,
  #services-1282 .cs-item,
  #services-1282 .cs-background img {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  #services-1282 .cs-topper,
  #services-1282 .cs-title,
  #services-1282 .cs-text {
    transform: translateY(20px);
  }
  #services-1282 .cs-item {
    transform: translateY(30px) scale(0.98);
  }
  #services-1282 .cs-background img {
    transform: scale(1.05);
  }
  #services-1282.animated-section .cs-topper.active, #services-1282.animated-section .cs-title.active, #services-1282.animated-section .cs-text.active, #services-1282.animated-section .cs-item.active, #services-1282.animated-section .cs-background img.active {
    opacity: 1;
    transform: translate(0) scale(1);
  }
  #services-1282 .cs-topper {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--primary);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  #services-1282 .cs-title {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    font-weight: 700;
  }
  #services-1282 .cs-text {
    max-width: 39.375rem;
    margin-bottom: 0;
  }
  #services-1282 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 1.25rem;
  }
  #services-1282 .cs-item {
    border-radius: 1rem;
    margin-left: 0;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    /* 20px - 24px */
    padding: clamp(1.25rem, 2.4vw, 1.5rem);
    list-style: none;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
  }
  #services-1282 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    margin: 0 0 1.25rem 0;
    color: var(--headerColor);
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  #services-1282 .cs-picture {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
  #services-1282 .cs-icon {
    height: 1.25rem;
    width: auto;
    color: var(--primaryLight);
    fill: var(--primaryLight);
  }
  #services-1282 .cs-number {
    display: block;
    margin: 0 0 0.75rem 0;
    font-size: clamp(1.8rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--headerColor);
  }
  #services-1282 .cs-item-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }
  #services-1282 .cs-background {
    z-index: -1;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 65%;
    width: 100%;
    overflow: hidden;
  }
  #services-1282 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* In Between - 500px */
@media only screen and (min-width: 31.25rem) {
  #services-1282 .cs-card-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  #services-1282 .cs-background {
    height: 55%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1282 .cs-container {
    max-width: 80rem;
  }
  #services-1282 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    text-align: left;
  }
  #services-1282 .cs-flex-group {
    width: 45%;
    flex: none;
    text-align: left;
  }
  #services-1282 .cs-text {
    width: 50%;
    max-width: 39.375rem;
    margin: 0;
    flex: none;
  }
  #services-1282 .cs-title {
    margin: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1282 .cs-content {
    align-items: center;
  }
  #services-1282 .cs-card-group {
    grid-template-columns: repeat(4, 1fr);
  }
  #services-1282 .cs-background {
    top: 0;
    left: auto;
    right: 0;
    height: 100%;
    width: 50vw;
  }
  #services-1282 .cs-background img {
    object-position: center center;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1302 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 10;
  }
  #services-1302 .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-1302 .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-1302 .cs-title {
    max-width: 20ch;
  }
  #services-1302 .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);
    /* Add gap to match testimonials */
    gap: clamp(0.5rem, 2vw, 1.25rem);
    position: relative;
    z-index: 15;
  }
  #services-1302 .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;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  #services-1302 .cs-item:last-of-type {
    border-bottom: none;
  }
  #services-1302 .cs-item .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;
    border-radius: 0.5rem;
    display: block;
    height: 100%;
    transition: background-color 0.3s;
  }
  #services-1302 .cs-item:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
  }
  #services-1302 .cs-item:hover .cs-h3,
  #services-1302 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #services-1302 .cs-item:hover .cs-item-text {
    opacity: 0.8;
  }
  #services-1302 .cs-icon {
    /* 32px - 40px */
    height: clamp(2rem, 4vw, 2.5rem);
    width: auto;
    margin: 0 0 1rem 0;
  }
  #services-1302 .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-1302 .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-1302 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #services-1302 .cs-title {
    margin: 0;
  }
  #services-1302 .cs-flex-group {
    width: 50%;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #services-1302 .cs-item {
    grid-column: span 4;
    border-bottom: none;
    border-right: 1px solid #e8e8e8;
  }
  #services-1302 .cs-item:nth-of-type(3) {
    border-bottom: none;
    border-right: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1302 .cs-card-group {
    padding: 0;
  }
  #services-1302 .cs-item:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
  }
  #services-1302 .cs-item:hover .cs-h3,
  #services-1302 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #services-1302 .cs-item:hover .cs-item-text {
    opacity: 0.8;
  }
  #services-1302 .cs-item:last-of-type {
    border: none;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-2290 {
    /* centers the button */
    text-align: center;
    padding: var(--sectionPadding);
    /* clips potential overflow from animations or elements */
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Optional Topper / Title Styles - Adjust as needed */
  }
  #reviews-2290 .cs-container {
    width: 100%;
    /* changes to 1280px at large desktop */
    max-width: 51.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-2290 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #reviews-2290 .cs-topper,
  #reviews-2290 .cs-title,
  #reviews-2290 .cs-item {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  #reviews-2290 .cs-topper,
  #reviews-2290 .cs-title {
    transform: translateY(20px);
  }
  #reviews-2290 .cs-item {
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, transform 0.3s;
  }
  #reviews-2290.animated-section .cs-topper.active, #reviews-2290.animated-section .cs-title.active, #reviews-2290.animated-section .cs-item.active {
    opacity: 1;
    transform: translateY(0);
  }
  #reviews-2290 .cs-topper {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--primary);
  }
  #reviews-2290 .cs-title {
    max-width: 20ch;
    margin: 0;
  }
  #reviews-2290 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(0.5rem, 2vw, 1.25rem);
  }
  #reviews-2290 .cs-item {
    text-align: left;
    list-style: none;
    box-sizing: border-box;
    padding: clamp(1rem, 2vw, 2rem);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    grid-column: span 12;
    gap: clamp(1rem, 3vw, 1.5rem);
    position: relative;
    z-index: 1;
    border-radius: clamp(0.5rem, 1vw, 1rem);
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
    transform: translateY(30px);
    transition: transform 0.3s;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, transform 0.3s;
  }
  #reviews-2290 .cs-item::before {
    /* background color tint layer */
    content: "";
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    z-index: -1;
  }
  #reviews-2290 .cs-item::after {
    /* hover underline */
    content: "";
    width: 0;
    height: 0.25rem;
    background: var(--primary);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: width 0.3s;
  }
  #reviews-2290 .cs-item:hover {
    transform: translateY(-0.5rem);
  }
  #reviews-2290 .cs-item:hover::after {
    width: 100%;
  }
  #reviews-2290.animated-section .cs-item.active {
    opacity: 1;
    transform: translateY(0);
  }
  #reviews-2290 .cs-quote {
    width: 2.5rem;
    height: auto;
    display: block;
    flex-shrink: 0;
  }
  #reviews-2290 .cs-header {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    padding: 0 0 clamp(1rem, 3vw, 1.5rem) 0;
    color: var(--headerColor);
    border-bottom: 1px solid #e7e7e8;
    width: 100%;
    box-sizing: border-box;
  }
  #reviews-2290 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    flex-grow: 1;
  }
  #reviews-2290 .cs-flex-group {
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(0.8rem, 1.5vw, 1rem);
    width: 100%;
    padding-top: clamp(1rem, 3vw, 1.5rem);
  }
  #reviews-2290 .cs-profile {
    width: 3.75rem;
    height: 3.75rem;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
    position: relative;
    flex-shrink: 0;
  }
  #reviews-2290 .cs-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #reviews-2290 .cs-name-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
  }
  #reviews-2290 .cs-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #reviews-2290 .cs-job {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-2290 .cs-item {
    grid-column: span 6;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #reviews-2290 .cs-container {
    max-width: 80rem;
  }
  #reviews-2290 .cs-item {
    grid-column: span 4;
  }
}
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1392 {
    padding: var(--sectionPadding);
    padding-bottom: 0;
    background-color: #f7f7f7;
    position: relative;
    z-index: 10;
    /* Button style now comes from global styles */
  }
  #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-submit {
    width: 100%;
    min-width: 12.5rem;
    border: none;
  }
  #contact-1392 .cs-submit:hover {
    color: #fff; /* Keep text white on hover */
    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;
  }
}
/*-- -------------------------- -->
<---          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;
  }
}
/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-559 {
    padding: var(--sectionPadding);
    /* 137px - 212px */
    padding-top: clamp(8.5625rem, 25vw, 13.25rem);
    /* Adjust padding bottom if needed for centering */
    padding-bottom: clamp(3.75rem, 7.82vw, 6.25rem); /* Example: Match default section padding */
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Add min-height if needed to ensure background visibility */
    min-height: 30vh; /* Example minimum height */
    display: flex; /* Use flex on the main section too for centering */
    justify-content: center; /* Center container horizontally */
    align-items: center; /* Center container vertically */
    /* cs-link styles are now irrelevant as .cs-breadcrumbs is hidden */
  }
  #banner-559 .cs-container {
    text-align: center; /* Center text within the container */
    width: 100%;
    max-width: 80rem;
    margin: 0; /* Remove auto margin as parent centers */
    padding: 0 1rem; /* Add horizontal padding if needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Changed from flex-start */
    gap: 0; /* Remove gap as there's only one element */
  }
  #banner-559 .cs-int-topper {
    display: none; /* Hide the topper */
    /* &:before rule is implicitly hidden now */
  }
  #banner-559 .cs-int-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center; /* Ensure text is centered */
    margin: 0;
    color: var(--bodyTextColorWhite);
    position: relative;
    /* Remove max-width if you want it to potentially take full container width */
  }
  #banner-559 .cs-breadcrumbs {
    display: none; /* Hide the breadcrumbs */
  }
  #banner-559 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #banner-559 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: var(--primary); /* Or maybe use the --dark variable if preferred */
    opacity: 0.9;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #banner-559 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Optional: Adjust padding/min-height further for different screen sizes if needed */
/* @media only screen and (min-width: 64rem) {
    #banner-559 {
        min-height: 40vh;
    }
} */
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1456 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #sbs-1456 .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-1456 .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;
  }
  #sbs-1456 .cs-text {
    margin-bottom: 1rem;
    white-space: pre-line;
  }
  #sbs-1456 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1456 .cs-ul {
    width: 100%;
    margin: 0 0 2rem 0;
    padding-left: 1.25rem;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #sbs-1456 .cs-li {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    list-style: none;
    text-align: left;
    width: 100%;
    max-width: 25rem;
    margin: 0;
    color: var(--bodyTextColor);
    position: relative;
  }
  #sbs-1456 .cs-li:before {
    /* bullet */
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.9375rem;
  }
  #sbs-1456 .cs-button-solid {
    /* Use global button style but add about-specific adjustments if needed */
    margin: 0;
    /* Match global hover style */
  }
  #sbs-1456 .cs-button-solid:hover {
    color: #fff; /* Keep text white on hover */
  }
  #sbs-1456 .cs-image-group {
    /* scaling the font size with the view width, removed at desktop */
    font-size: min(2.23vw, 0.83em);
    /* using ems so we can use font size to scale the whole section */
    width: 40.625em;
    height: 45.5625em;
    position: relative;
  }
  #sbs-1456 .cs-picture {
    border-radius: 1.5em;
    /* clips img tag corners */
    overflow: hidden;
    position: absolute;
    display: block;
  }
  #sbs-1456 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act like a background image */
    object-fit: cover;
  }
  #sbs-1456 .cs-picture1 {
    width: 32.625em;
    height: 45.5625em;
    left: 0;
    top: 0;
  }
  #sbs-1456 .cs-picture2 {
    width: 23.625em;
    height: 28.75em;
    right: 0;
    bottom: 6.25em;
  }
  #sbs-1456 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbs-1456 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #fff;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    opacity: 0.94;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbs-1456 .cs-background img {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1456 .cs-container {
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 3.25rem;
  }
  #sbs-1456 .cs-content {
    width: 40%;
    padding: 3rem 0;
    /* prevents flexbox from squishing it */
    flex: none;
    align-self: center;
  }
  #sbs-1456 .cs-image-group {
    font-size: 1rem;
    width: 50vw;
    max-width: 40.625rem;
    height: auto;
    /* 580px - 729px */
    min-height: clamp(36.25rem, 50vw, 45.5625rem);
    flex: none;
    display: flex;
  }
  #sbs-1456 .cs-picture1 {
    width: 83%;
    height: auto;
    position: relative;
    left: auto;
    top: auto;
  }
  #sbs-1456 .cs-picture2 {
    width: 60%;
    height: 57%;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1331 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
    position: relative;
    z-index: 1;
  }
  #services-1331 .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);
  }
  #services-1331 .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: flex-start;
  }
  #services-1331 .cs-flex-group {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #services-1331 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1rem;
  }
  #services-1331 .cs-item {
    list-style: none;
    width: 100%;
    box-sizing: border-box;
    /* 40px - 60px top & bottom,  20px - 48px left & right, */
    padding: clamp(2.5rem, 4.1vw, 3.75rem) clamp(1.25rem, 3.4vw, 3rem);
    background-color: #fff;
    grid-column: span 12;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  #services-1331 .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
    transform: translateY(-1rem);
  }
  #services-1331 .cs-link {
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #services-1331 .cs-step {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    font-weight: 700;
    text-align: inherit;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* 48px - 100px */
    margin-bottom: clamp(3rem, 7.8vw, 6.25rem);
    color: var(--primary);
    display: block;
  }
  #services-1331 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 900;
    text-align: inherit;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #services-1331 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
  #services-1331 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -2;
  }
  #services-1331 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.06;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1331 .cs-container {
    max-width: 80rem;
  }
  #services-1331 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    /* 48px - 80px */
    gap: clamp(3rem, 6vw, 5rem);
  }
  #services-1331 .cs-title {
    margin: 0;
  }
  #services-1331 .cs-flex-group {
    width: 50%;
  }
  #services-1331 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 1rem;
  }
  #services-1331 .cs-item {
    grid-column: span 4;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-355 {
    padding: var(--sectionPadding);
  }
  #reviews-355 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-355 .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-355 .cs-card-group {
    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-355 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    /* 24px - 32px top & bottom */
    /* 16px - 40px left & right */
    padding: clamp(1.5rem, 3.15vw, 2rem) clamp(1rem, 3.15vw, 2.5rem);
    background-color: #f7f7f7;
    border-radius: 1rem;
    /* 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;
  }
  #reviews-355 .cs-quote {
    width: 2.5rem;
    height: auto;
    margin-bottom: 2rem;
    display: block;
  }
  #reviews-355 .cs-review {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    /* 20px - 40px */
    margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
    color: var(--bodyTextColor);
  }
  #reviews-355 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    /* 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;
    color: var(--headerColor);
    display: block;
  }
  #reviews-355 .cs-job {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-355 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #reviews-355 .cs-item {
    width: clamp(31.5%, 30vw, 32.3%);
  }
}
/*-- -------------------------- -->
<---            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-topper {
    color: var(--bodyTextColorWhite);
  }
  #cta-51 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #cta-51 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #cta-51 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-51 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cta-51 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #cta-51 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-51 .cs-picture {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-51 .cs-picture:before {
    /* black color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-51 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-888-888 {
    padding: var(--sectionPadding);
  }
  #stats-888-888 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #stats-888-888 .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;
  }
  #stats-888-888 .cs-text {
    margin-bottom: 1rem;
  }
  #stats-888-888 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #stats-888-888 .cs-button-solid {
    /* Use global button style but add stats-specific adjustments if needed */
    margin: 0;
    /* Match global hover style */
  }
  #stats-888-888 .cs-button-solid:hover {
    color: #fff; /* Keep text white on hover */
  }
  #stats-888-888 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #stats-888-888 .cs-item {
    text-align: center;
    list-style: none;
    /* changes at small desktop then again at large desktop */
    width: 100%;
    /* 44px - 60px */
    padding: clamp(2.75rem, 5vw, 3.75rem) 2rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* clips cs-icon overflowing */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: span 2;
    position: relative;
  }
  #stats-888-888 .cs-item:nth-of-type(1) {
    background-color: #fef7f4;
    border-radius: 0 5rem 0 5rem;
  }
  #stats-888-888 .cs-item:nth-of-type(2) {
    background-color: #e8e8e8;
    border-radius: 5rem 0 5rem 0;
  }
  #stats-888-888 .cs-item:nth-of-type(3) {
    background-color: #fbcebd;
    border-radius: 5rem 0 5rem 0;
  }
  #stats-888-888 .cs-item:nth-of-type(4) {
    background-color: #f7f7f7;
    border-radius: 0 5rem 0 5rem;
  }
  #stats-888-888 .cs-number {
    /* 39px - 49px */
    font-size: clamp(2.4375rem, 6vw, 3.0625rem);
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 900;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #stats-888-888 .cs-desc {
    /* 16px -20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
  #stats-888-888 .cs-item {
    grid-column: span 1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #stats-888-888 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
/*-- -------------------------- -->
<---        Content 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);
    }
  }
  #content-page-1399 {
    padding: var(--sectionPadding);
    background-color: #fff;
    /* clips the wave background from causing overflow issues when it goes off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #content-page-1399 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 4vw, 4rem);
    position: relative;
  }
  #content-page-1399 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 46.125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #content-page-1399 h2,
  #content-page-1399 h3,
  #content-page-1399 h4,
  #content-page-1399 h5,
  #content-page-1399 h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #content-page-1399 h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
  #content-page-1399 h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }
  #content-page-1399 h4,
  #content-page-1399 h5,
  #content-page-1399 h6 {
    font-size: 1.25rem;
  }
  #content-page-1399 .cs-button-solid {
    margin-bottom: 2rem;
  }
  #content-page-1399 .cs-no-margin {
    margin: 0;
  }
  #content-page-1399 .cs-color {
    color: var(--primary);
  }
  #content-page-1399 p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }
  #content-page-1399 p:last-of-type {
    margin-bottom: 2rem;
  }
  #content-page-1399 p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
    filter: brightness(120%);
  }
  #content-page-1399 ol,
  #content-page-1399 ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #content-page-1399 ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }
  #content-page-1399 ul li:before {
    /* custom list bullet */
    content: "";
    width: 3px;
    height: 3px;
    background: currentColor;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.75rem;
  }
  #content-page-1399 img {
    width: 100%;
    height: auto;
    display: block;
  }
  #content-page-1399 .cs-image-group {
    width: 100%;
    display: none;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.6vw, 1.25rem);
    position: relative;
  }
  #content-page-1399 .cs-flex {
    position: relative;
  }
  #content-page-1399 .cs-background {
    width: 100%;
    height: 100%;
    /* 32px - 48px */
    border-radius: clamp(2rem, 4vw, 3rem);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
  }
  #content-page-1399 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #content-page-1399 .cs-box {
    text-align: left;
    width: 100%;
    max-width: 12.5rem;
    padding: 2rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: var(--primary);
    /* 48px - 80px */
    border-radius: 2rem;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    position: absolute;
    /* 12px - 20px */
    right: clamp(0.75rem, 1.9vw, 1.5rem);
    /* 12px - 20px */
    bottom: clamp(0.75rem, 1.9vw, 1.5rem);
  }
  #content-page-1399 .cs-box-icon {
    width: 3.75rem;
    height: auto;
    display: block;
  }
  #content-page-1399 .cs-desc {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #content-page-1399 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.265rem, 1fr));
    align-items: center;
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #content-page-1399 .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;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #content-page-1399 .cs-item:before {
    display: none;
  }
  #content-page-1399 .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: center;
    gap: 0.5rem;
  }
  #content-page-1399 .cs-h3-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #content-page-1399 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #content-page-1399 .cs-item-text:last-of-type {
    margin: 0;
  }
  #content-page-1399 .cs-ul {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #content-page-1399 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push icon top the top so if the list item goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #content-page-1399 .cs-icon {
    width: 1.5rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 1px;
    display: block;
  }
  #content-page-1399 .cs-bubbles {
    font-size: min(2.5vw, 0.7em);
    width: 36.375em;
    height: 34.8125em;
    display: none;
    position: absolute;
    /* changes to auto at larger desktop */
    right: -16.25em;
    /* changes to -220px at large desktop */
    bottom: -3.125em;
    z-index: -1;
  }
  #content-page-1399 .cs-bubbles:before {
    /* white border bubble */
    content: "";
    width: 29em;
    height: 29em;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #content-page-1399 .cs-bubbles:after {
    /* orange bubble */
    content: "";
    width: 22.875em;
    height: 22.875em;
    background: var(--primary);
    opacity: 0.15;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #content-page-1399 .cs-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  #content-page-1399 .cs-content {
    width: 50%;
    max-width: 40.4375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #content-page-1399 .cs-image-group {
    width: 44%;
    max-width: 33.875rem;
    display: flex;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #content-page-1399 .cs-content {
    width: 53%;
  }
  #content-page-1399 .cs-image-group {
    width: 43%;
  }
  #content-page-1399 .cs-box {
    display: flex;
  }
  #content-page-1399 .cs-bubbles {
    font-size: 1em;
    margin-left: 37.5rem;
    display: block;
    right: auto;
    left: 50%;
    bottom: -13.75rem;
  }
}
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1103 {
    padding: var(--sectionPadding);
    background-color: #f7f8f8;
  }
  #pricing-1103 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #pricing-1103 .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;
  }
  #pricing-1103 .cs-text {
    max-width: 25.8125rem;
    margin-bottom: 1rem;
  }
  #pricing-1103 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #pricing-1103 .cs-button-solid {
    /* Use global button style but add pricing-specific adjustments if needed */
    margin: 0;
    /* Match global hover style */
  }
  #pricing-1103 .cs-button-solid:hover {
    color: #fff; /* Keep text white on hover */
  }
  #pricing-1103 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 1.8vw, 1.25rem);
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #pricing-1103 .cs-item {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
    background-color: #fff;
    border: 1px solid #e8e8e8;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  #pricing-1103 .cs-item:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
  }
  #pricing-1103 .cs-item-header {
    text-align: center;
    margin-bottom: clamp(1.25rem, 3vw, 1.5rem);
  }
  #pricing-1103 .cs-tag {
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    background-color: #fdeaea;
    border-radius: 1rem;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
    display: inline-block;
  }
  #pricing-1103 .cs-popular {
    border-color: var(--primary);
    border-width: 2px;
  }
  #pricing-1103 .cs-popular .cs-tag {
    background-color: var(--primary);
    color: #fff;
  }
  #pricing-1103 .cs-popular:before {
    content: "Most Popular";
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.5rem 2rem;
    transform: rotate(45deg) translate(25%, -15%);
    transform-origin: center;
    width: 150px;
    text-align: center;
  }
  #pricing-1103 .cs-package {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: block;
  }
  #pricing-1103 .cs-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.25rem;
    line-height: 1;
  }
  #pricing-1103 .cs-price-main {
    font-size: clamp(2.5rem, 4vw, 3.0625rem);
    font-weight: 900;
    color: var(--headerColor);
  }
  #pricing-1103 .cs-price-sub {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 500;
    color: #767676;
    text-transform: lowercase;
  }
  #pricing-1103 .cs-ul {
    margin: 0;
    padding: clamp(1.25rem, 3vw, 1.5rem) 0 0 0;
    border-top: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Makes feature list grow to fill space */
    gap: 0.75rem;
  }
  #pricing-1103 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    line-height: 1.2em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: space-between;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 1rem;
  }
  #pricing-1103 .cs-li.cs-disabled {
    opacity: 0.5;
  }
  #pricing-1103 .cs-li.cs-disabled .cs-icon {
    filter: grayscale(1) brightness(300%);
  }
  #pricing-1103 .cs-icon {
    width: 1.125rem;
    height: auto;
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1103 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap; /* Changed from nowrap */
  }
  #pricing-1103 .cs-item {
    width: calc(50% - clamp(1rem, 1.8vw, 1.25rem) / 2);
    flex-shrink: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1103 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #pricing-1103 .cs-content {
    position: sticky;
    top: 140px;
    /* Set an explicit width for the sticky element */
    width: 34%;
    height: fit-content;
  }
  #pricing-1103 .cs-title {
    max-width: 14ch;
  }
  #pricing-1103 .cs-card-group {
    width: 62%;
    max-width: 52.9375rem;
  }
  #pricing-1103 .cs-item {
    /* On desktop, if cs-card-group is a flex container, it will size itself.
       However, our 2x2 grid requires this. */
    width: calc(50% - clamp(1rem, 1.8vw, 1.25rem) / 2);
  }
}
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-2145 {
    padding: var(--sectionPadding);
    background-color: #FBF5F1;
    position: relative;
    z-index: 1;
  }
  #contact-2145 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #contact-2145 .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-2145 .cs-text {
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 4vw, 2.5rem);
  }
  #contact-2145 .cs-ul {
    text-align: left;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  #contact-2145 .cs-li {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #contact-2145 .cs-header {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #contact-2145 .cs-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
  }
  #contact-2145 .cs-link:hover {
    text-decoration: underline;
  }
  #contact-2145 .cs-form-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #contact-2145 .cs-form {
    /* prevents flexbox from affecting height and width */
    box-sizing: border-box;
    /* 24px - 40px top and bottom */
    /* 24px - 48px left and right */
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem);
    background-color: #F6EBE3;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 0.75rem;
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  #contact-2145 .cs-form-content {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    grid-column: span 12;
  }
  #contact-2145 .cs-form-title {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 0.75rem 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #contact-2145 .cs-label {
    font-size: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-column: span 12;
    gap: 0.25rem;
  }
  #contact-2145 .cs-input, #contact-2145 .cs-select {
    font-size: 1rem;
    width: 100%;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: #fff;
    color: #767676;
    border: none;
    grid-column: span 12;
    border-radius: 0.5rem;
  }
  #contact-2145 .cs-input::placeholder, #contact-2145 .cs-select::placeholder {
    color: #767676;
  }
  #contact-2145 .cs-textarea {
    font-family: inherit;
    min-height: 7.5rem;
    margin: 0 0 1.25rem 0;
    padding-top: 1.5rem;
    border-radius: 0.5rem;
  }
  #contact-2145 .cs-button-wrapper {
    grid-column: span 12;
  }
  #contact-2145 .cs-submit {
    width: 100%;
  }
  #contact-2145 .cs-submit:hover {
    cursor: pointer;
  }
  #contact-2145 .cs-picture {
    width: 100%;
    height: 12.5rem;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #contact-2145 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #contact-2145 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #contact-2145 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #contact-2145 .cs-container {
    max-width: 115rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #contact-2145 .cs-content {
    width: 33%;
    flex: none;
  }
  #contact-2145 .cs-form {
    justify-content: space-between;
    column-gap: 0.75rem;
  }
  #contact-2145 .cs-label {
    grid-column: span 6;
  }
  #contact-2145 .cs-message {
    grid-column: span 12;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-2145 .cs-container {
    align-items: center;
  }
  #contact-2145 .cs-content {
    /* 280px - 477px */
    width: clamp(17.5rem, 27vw, 29.8rem);
  }
  #contact-2145 .cs-picture {
    max-width: 36.9375rem;
    height: auto;
  }
  #contact-2145 .cs-form-wrapper {
    width: 66%;
    flex-direction: row;
  }
  #contact-2145 .cs-form {
    width: 50%;
    flex: none;
  }
  #contact-2145 .cs-label {
    grid-column: span 12;
  }
}
/* Large Desktop - 1440px */
@media only screen and (min-width: 90rem) {
  #contact-2145 .cs-container {
    justify-content: center;
  }
  #contact-2145 .cs-label {
    grid-column: span 6;
  }
  #contact-2145 .cs-message {
    grid-column: span 12;
  }
}
/*-- -------------------------- -->
<---            Blog            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #blog-988 {
    padding: var(--sectionPadding);
  }
  #blog-988 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #blog-988 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #blog-988 .cs-title {
    margin-bottom: 2rem;
    max-width: 20ch;
    color: var(--headerColor);
  }
  #blog-988 .cs-button-solid {
    /* Use global button style but add blog-specific adjustments if needed */
    margin: 0;
    /* Match global hover style */
  }
  #blog-988 .cs-button-solid:hover {
    color: #fff; /* Keep text white on hover */
  }
  #blog-988 .cs-button-solid {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #blog-988 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(2rem, 4vw, 2.5rem);
    position: relative;
  }
  #blog-988 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  #blog-988 .cs-item:hover {
    cursor: pointer;
  }
  #blog-988 .cs-item:hover .cs-info:before {
    opacity: 1;
    background-color: var(--primary);
  }
  #blog-988 .cs-item:hover .cs-picture img {
    transform: scale(1.15);
  }
  #blog-988 .cs-item:hover .cs-date {
    color: #fff;
  }
  #blog-988 .cs-item:hover .cs-icon {
    filter: brightness(150%);
  }
  #blog-988 .cs-item:hover .cs-link {
    color: #fff;
  }
  #blog-988 .cs-picture {
    width: 100%;
    height: 30rem;
    /* removed at tablet */
    aspect-ratio: 0.6833333333;
    /* clips img tag from overflowing it on hover */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 0.5rem;
  }
  #blog-988 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes sure the top of the image is at the top of the parent, heads won't get cut off this way */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 0.9s;
  }
  #blog-988 .cs-info {
    width: 83%;
    max-width: 26.25rem;
    /* 16px - 24px */
    padding: clamp(1rem, 2vw, 1.5rem);
    /* prevents padding from affecting the height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
  }
  #blog-988 .cs-info:before {
    /* background-color */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--bodyTextColor);
    opacity: 0.9;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    transition: background-color 0.3s, opacity 0.3s;
  }
  #blog-988 .cs-info:hover:before {
    background-color: var(--primary);
    opacity: 1;
  }
  #blog-988 .cs-date {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    color: var(--bodyTextColorWhite);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s;
  }
  #blog-988 .cs-icon {
    width: 1.25rem;
    height: auto;
    transition: filter 0.3s;
    filter: brightness(200%);
  }
  #blog-988 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #blog-988 .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1.25rem 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.9;
    display: block;
  }
  #blog-988 .cs-link {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    text-decoration: none;
    width: auto;
    margin: 0;
    color: var(--primary);
    display: inline-block;
    position: relative;
    transition: color 0.3s;
    border-radius: 0.5rem;
  }
  #blog-988 .cs-link:hover {
    color: var(--bodyTextColorWhite);
  }
  #blog-988 .cs-link:before {
    /* underline */
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    transition: background-color 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #blog-988 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
  }
  #blog-988 .cs-title {
    margin: 0;
  }
  #blog-988 .cs-container {
    max-width: 80rem;
  }
  #blog-988 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
  }
  #blog-988 .cs-item {
    width: calc(50% - 16px);
  }
  #blog-988 .cs-picture {
    /* remove the aspect ratio so the height can be squished */
    aspect-ratio: initial;
  }
}
/* ============================================ */
/*        Blog Post Styles (Based on Example)     */
/* ============================================ */
/* 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);
    }
  }
  .blog-post-content-section {
    padding: var(--sectionPadding);
    background-color: #fff;
    /* clips the wave background */
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Styles for Bubbles from Example */
  }
  .blog-post-content-section .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 4vw, 4rem);
    position: relative;
  }
  .blog-post-content-section .cs-content {
    text-align: left;
    width: 100%;
    /* Adjusted max-width for readability on blog */
    max-width: 50rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Title specific style from example */
    /* Meta info style */
    /* Standard Content Element Styles from Example */
    /* Add styles for img, blockquote, code etc. if needed */
  }
  .blog-post-content-section .cs-content .cs-title {
    font-size: var(--headerFontSize);
    line-height: 1.2em;
    font-weight: 900;
    text-align: inherit;
    max-width: 30ch;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    display: block;
  }
  .blog-post-content-section .cs-content .cs-title .cs-color {
    color: var(--primary);
  }
  .blog-post-content-section .cs-content .cs-meta {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    opacity: 0.8;
    display: block;
    margin: 0 0 2rem 0;
  }
  .blog-post-content-section .cs-content h2,
  .blog-post-content-section .cs-content h3,
  .blog-post-content-section .cs-content h4,
  .blog-post-content-section .cs-content h5,
  .blog-post-content-section .cs-content h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    /* Add top margin for spacing */
    margin-top: 2rem;
  }
  .blog-post-content-section .cs-content h2 {
    font-size: 2rem;
  }
  .blog-post-content-section .cs-content h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }
  .blog-post-content-section .cs-content h4, .blog-post-content-section .cs-content h5, .blog-post-content-section .cs-content h6 {
    font-size: 1.25rem;
  }
  .blog-post-content-section .cs-content p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }
  .blog-post-content-section .cs-content p:last-of-type {
    margin-bottom: 0;
  }
  .blog-post-content-section .cs-content p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
    font-weight: 700;
  }
  .blog-post-content-section .cs-content p a:hover {
    text-decoration: none;
  }
  .blog-post-content-section .cs-content ol,
  .blog-post-content-section .cs-content ul {
    padding-left: 1.5rem;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .blog-post-content-section .cs-content ol li,
  .blog-post-content-section .cs-content ul li {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
  }
  .blog-post-content-section .cs-content ul li {
    list-style: none;
    position: relative;
  }
  .blog-post-content-section .cs-content ul li:before {
    /* custom list bullet */
    content: "";
    width: 3px;
    height: 3px;
    background: currentColor;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.75rem;
  }
  .blog-post-content-section .cs-content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem 0;
    border-radius: 0.5rem;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
  }
  .blog-post-content-section .cs-content blockquote {
    margin: 1.5rem 0;
    padding: 1.5rem;
    border-left: 5px solid var(--primary);
    background-color: #f7f8f8;
    font-style: normal;
    font-size: 1.1em;
    line-height: 1.6em;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.03);
  }
  .blog-post-content-section .cs-content blockquote p {
    margin-bottom: 0;
  }
  .blog-post-content-section .cs-content pre {
    background-color: #eee;
    padding: 1.5rem;
    overflow-x: auto;
    border-radius: 0.25rem;
    margin: 1.5rem 0;
    font-size: 0.9em;
    line-height: 1.6em;
  }
  .blog-post-content-section .cs-content code {
    font-family: monospace;
  }
  .blog-post-content-section .cs-content p > code, .blog-post-content-section .cs-content li > code {
    background-color: #eee;
    padding: 0.1em 0.4em;
    border-radius: 0.2rem;
    font-size: 0.9em;
  }
  .blog-post-content-section .cs-content pre code {
    background-color: transparent;
    padding: 0;
    font-size: inherit;
  }
  .blog-post-content-section .cs-bubbles {
    font-size: min(2.5vw, 0.7em);
    width: 36.375em;
    height: 34.8125em;
    display: none; /* Hidden on mobile */
    position: absolute;
    right: -16.25em;
    bottom: -3.125em;
    z-index: -1;
  }
  .blog-post-content-section .cs-bubbles:before {
    content: "";
    width: 29em;
    height: 29em;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  .blog-post-content-section .cs-bubbles:after {
    content: "";
    width: 22.875em;
    height: 22.875em;
    background: var(--primary);
    opacity: 0.15;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}
/* Tablet - 768px */
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  .blog-post-content-section .cs-bubbles {
    font-size: 1em;
    margin-left: 37.5rem;
    display: block; /* Show bubbles */
    right: auto;
    left: 50%;
    bottom: -13.75rem;
  }
}
/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1266 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #services-1266 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1266 .cs-content {
    width: 100%;
    max-width: 32.625rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
  }
  #services-1266 .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;
    margin-top: 1.5rem;
    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;
  }
  #services-1266 .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;
  }
  #services-1266 .cs-button-solid:hover:before {
    width: 100%;
  }
  #services-1266 .cs-card-group {
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.75vw, 1.25rem);
  }
  #services-1266 .cs-item {
    border-radius: 1rem;
    margin-left: 0;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    grid-column: span 12;
    /* 20px - 24px */
    padding: clamp(1.25rem, 2.4vw, 1.5rem);
    list-style: none;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
  }
  #services-1266 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    margin: 0 0 1.25rem 0;
    color: var(--headerColor);
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  #services-1266 .cs-picture {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
  #services-1266 .cs-icon {
    height: 1.25rem;
    width: auto;
    color: var(--primaryLight);
    fill: var(--primaryLight);
  }
  #services-1266 .cs-number {
    display: block;
    margin: 0 0 0.75rem 0;
    font-size: 1.5625rem;
    font-weight: 700;
    color: var(--primary);
  }
  #services-1266 .cs-item-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }
  #services-1266 .cs-background {
    display: none; /* Hide the background image completely */
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1266 .cs-container {
    max-width: 80rem;
  }
  #services-1266 .cs-item {
    grid-column: span 6;
  }
  #services-1266 .cs-item:nth-of-type(3) {
    order: 4;
  }
  #services-1266 .cs-background {
    display: none; /* Ensure it's hidden at tablet size too */
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1266 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem;
  }
  #services-1266 .cs-content {
    width: 42%;
    max-width: 32.625rem;
  }
  #services-1266 .cs-wrapper {
    width: 52%;
    max-width: 39.375rem;
    position: relative;
  }
  #services-1266 .cs-item {
    grid-column: span 6;
  }
  #services-1266 .cs-background {
    display: none; /* Ensure it's hidden at desktop too */
  }
}
/*-- -------------------------- -->
<---    Global Button Styles    -->
<--- -------------------------- -*/
/* Standard primary button style used across the site */
.cs-button-solid {
  font-size: 1rem;
  font-weight: 700;
  line-height: 3.5rem; /* Fixed height instead of clamp */
  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 3rem; /* Increased padding */
  background-color: var(--primary);
  color: #fff;
  border: none;
  border-radius: 1.875rem; /* More rounded corners */
  display: inline-block;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s;
}
.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;
}
.cs-button-solid:hover {
  color: #fff; /* Keep text white on hover instead of changing to primary color */
}
.cs-button-solid:hover:before {
  width: 100%;
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
body,
html {
  /* reset margin and padding so there's no gap between the nav and the screen edges */
  margin: 0;
  padding: 0;
}

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  body.scroll #cs-navigation .cs-top-container {
    gap: 0;
  }
  body.scroll #cs-navigation .cs-top-social {
    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
  }
  main {
    /* Adjust padding top for new logo size */
    padding-top: 8rem; /* Reduced padding slightly */
  }
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
    transition: background-color 0.3s;
  }
  #cs-navigation:before {
    content: "";
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    display: block;
    top: 100%;
    right: 0;
    z-index: -1100;
    opacity: 0;
    transition: height 0.5s, opacity 0.5s;
  }
  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    transform: translateY(0);
    opacity: 1;
  }
  #cs-navigation .cs-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    height: auto;
    opacity: 1;
    visibility: visible;
    padding-top: 0.25rem; /* Reduced padding slightly */
    padding-bottom: 0;
  }
  #cs-navigation.scrolled .cs-top-bar {
    height: 0;
    opacity: 0;
    visibility: hidden;
    padding-top: 0;
    padding-bottom: 0;
  }
  #cs-navigation .cs-top-container {
    width: 100%;
    padding: 0 1rem 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
  #cs-navigation .cs-top-contact {
    width: 100%;
    padding-top: 0.5rem; /* Add a small top padding */
    padding-bottom: 0.5rem; /* Reduce bottom padding */
    /* Other contact styles remain */
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  #cs-navigation .cs-top-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #cs-navigation .cs-top-link:nth-of-type(1) {
    display: none;
  }
  #cs-navigation .cs-top-link:nth-of-type(3) {
    display: none;
  }
  #cs-navigation .cs-top-link:nth-of-type(2):after {
    display: none;
  }
  #cs-navigation .cs-top-link:last-of-type:after {
    display: none;
  }
  #cs-navigation .cs-top-link:after {
    content: "";
    width: 1px;
    height: 1.5rem;
    /* 8px - 16px */
    margin-left: clamp(0.5rem, 1.5vw, 1rem);
    background: #bababa;
    opacity: 1;
    position: relative;
    display: block;
  }
  #cs-navigation .cs-link-icon {
    width: 1rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-top-social {
    visibility: visible;
    opacity: 1;
    display: flex;
    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;
  }
  #cs-navigation .cs-social-icon {
    width: 0.75rem;
    height: auto;
    opacity: 0.6;
    display: block;
  }
  #cs-navigation .cs-container {
    width: 100%;
    /* 16px - 20px */
    padding: clamp(1rem, 2.5vw, 1.25rem) 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
  }
  #cs-navigation .cs-logo {
    width: auto;
    /* Reduced Doubled size by 20%: 51.2px - 76.8px */
    height: clamp(3.2rem, 10.24vw, 4.8rem);
    margin: 0 auto 0 0;
    padding: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
    z-index: 10;
  }
  #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-nav {
    order: 2;
  }
  #cs-navigation .cs-toggle {
    /* 48px - 56px */
    width: clamp(3rem, 7.2vw, 3.5rem);
    height: clamp(3rem, 7.2vw, 3.5rem);
    margin: 0 0 0 auto;
    background-color: var(--primary);
    border-radius: 0.25rem;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s;
  }
  #cs-navigation .cs-toggle.cs-active {
    transform: rotate(180deg);
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
  }
  #cs-navigation .cs-active .cs-line3 {
    bottom: 100%;
    opacity: 0;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 1rem;
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #fafbfc;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transform-origin: center;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 3rem;
    opacity: 0;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s, opacity 0.3s;
  }
  #cs-navigation .cs-ul {
    margin: 0;
    padding: 3rem 0 0 0;
    width: 100%;
    height: auto;
    max-height: 65vh;
    overflow: scroll;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  #cs-navigation .cs-li {
    width: 100%;
    text-align: center;
    list-style: none;
    margin-right: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    opacity: 0;
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
  #cs-navigation .cs-donate {
    text-decoration: none;
    margin-right: 2rem;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    order: 1;
  }
  #cs-navigation .cs-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #cs-navigation .cs-donate-icon {
    width: 3.5rem;
    height: auto;
  }
  #cs-navigation .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #cs-navigation .cs-header {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-navigation .cs-top-container {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e8e8e8;
    flex-direction: row;
    justify-content: space-between;
  }
  #cs-navigation .cs-top-contact {
    width: auto;
    padding: 0;
    border: none;
  }
  #cs-navigation .cs-donate {
    display: flex;
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  /* Apply padding only to main element within legal pages */
  body.page-legal main {
    /* Add padding to push content below fixed desktop nav */
    padding-top: 12rem;
  }
  /* Add this new rule for blog posts */
  body.page-blog-post main {
    /* Add padding to push blog content below fixed desktop nav */
    padding-top: 8rem;
  }
  #cs-navigation {
    width: 100%;
    padding: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    position: fixed;
    z-index: 10000;
    transition: background-color 0.3s;
  }
  #cs-navigation .cs-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, padding 0.3s ease;
    overflow: hidden;
    height: 3.5rem;
    opacity: 1;
    visibility: visible;
    padding-top: 0;
    padding-bottom: 0;
  }
  #cs-navigation.scrolled .cs-top-bar {
    height: 0;
    opacity: 0;
    visibility: hidden;
    padding-top: 0;
    padding-bottom: 0;
  }
  #cs-navigation .cs-top-container {
    width: 100%;
    max-width: 107.5rem;
    padding: 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3.125rem;
  }
  #cs-navigation .cs-top-contact {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-top-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #cs-navigation .cs-top-link:hover {
    text-decoration: underline;
  }
  #cs-navigation .cs-top-link:last-of-type:after {
    display: none;
  }
  #cs-navigation .cs-top-link:after {
    content: "";
    width: 1px;
    height: 1.5rem;
    /* 8px - 16px */
    margin-left: clamp(0.5rem, 1.5vw, 1rem);
    background: #bababa;
    opacity: 1;
    position: relative;
    display: block;
  }
  #cs-navigation .cs-link-icon {
    width: 1rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-top-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    /* Adjust padding for new logo size */
    padding-left: calc(375.2px - 1rem);
  }
  #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(--secondary);
  }
  #cs-navigation .cs-social-icon {
    width: 0.75rem;
    height: auto;
    opacity: 0.6;
    display: block;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 107.5rem;
    margin: auto;
    padding: 0 1rem;
    /* prevents padding from affectin gheight */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    position: relative;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 19.7rem; /* Reduced Doubled max-width by 20% */
    height: 6rem; /* Reduced Doubled height by 20% (6rem) */
    padding: 0;
    margin-right: 3.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2.5rem;
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 2.25rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
    transition: color 0.3s;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-active {
    font-weight: 700;
    color: var(--headerColor);
  }
  #cs-navigation .cs-donate {
    text-decoration: none;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
  }
  #cs-navigation .cs-donate:hover .cs-donate-icon {
    transform: scale(1.1);
  }
  #cs-navigation .cs-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #cs-navigation .cs-donate-icon {
    width: 3.5rem;
    height: auto;
    transition: transform 0.3s;
  }
  #cs-navigation .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #cs-navigation .cs-header {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
  }
  #cs-navigation .cs-nav-button {
    padding: 0 3rem;
    display: none;
  }
  #cs-navigation .cs-nav {
    margin-right: auto;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cs-navigation .cs-container {
    justify-content: space-between;
  }
  #cs-navigation .cs-nav-button {
    display: block;
    /* Additional nav-specific styling if needed */
    padding: 0 3rem;
  }
}
/* Larger Desktop - 1600px */
@media only screen and (min-width: 100rem) {
  #cs-navigation .cs-donate {
    display: flex;
    margin-left: auto;
  }
  #cs-navigation .cs-nav-button {
    margin: 0;
  }
}

/*# sourceMappingURL=style.css.map */