/* Fixes the white margin gap */
.contact-page #contact-2320,
.services-page #services-341,
.index-page #sbs-r-869,
.portfolio-page #RTsbs-249,
.pricing-page #pricing-357,
.terms-of-service-page #sbs-r-1892,
.privacy-policy-page #sbs-r-1892
 {
    /* Set margin to 0 to "glue" the black box to the very top */
    margin-top: 0 !important; 
    /* Set padding to 8rem to "push" the text down so the nav doesn't cover it */
    padding-top: 12rem !important; 
    
}



/* Optional: Remove the margin from the very last section so you don't have 
   extra space at the bottom of your footer */
section:last-of-type {
    margin-bottom: 0;
}


:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary:#005bb5;
    --primaryLight: #005bb5;
    --secondary: #005bb5;
    --secondaryLight: #005bb5;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

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

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
/* Dark Mode overrides */
body.dark-mode {
    --primary: #e67740;          /* Swapping primary to the lighter orange */
    --headerColor: #fafbfc;     /* Changing headers to white */
    --bodyTextColor: #adadad;   /* Changing body text to a lighter grey */
    background-color: #090e2f;  /* Setting the dark background */
    
    --primaryLight: #ffba43;
    --secondary: #faaa21;
    --secondaryLight: #ffba43;
}

/* Explicitly tell the body to use the background color */
body {
    margin: 0;
    padding: 0;
    background-color: #fff; /* Default light background */
    transition: background-color 0.3s ease, color 0.3s ease;
}




/* ---------------------------------------------------------------*/
/* Modifications to transparency in dark mode below until lightbox*/
/* ---------------------------------------------------------------*/

body.dark-mode {
    background-color: #080e30;
}
/* This forces the header and its background-pseudo element to be solid */
body.dark-mode #cs-navigation,
body.dark-mode #cs-navigation::before {
    background-color: #090e2f !important; /* Use a dark blue slightly lighter than the body */
    opacity: 1 !important;
    visibility: visible !important;
}


/* 1. First, set the general dark background for all items */
body.dark-mode .cs-item {
    background-color: #1a1f3d !important;
}
/* 2. Then, IMMEDIATELY override it for the popular orange card */
body.dark-mode #pricing-357 .cs-item.cs-popular {
    background-color: var(--primary) !important;
}



/* Remove the background and borders from the Stats items in Dark Mode */
body.dark-mode #stats-539 .cs-item {
    background-color: transparent !important;
    border: none !important;
}
/* Ensure the text stays bright since the background is now gone */
body.dark-mode #stats-539 .cs-item-text,
body.dark-mode #stats-539 .cs-number {
    color: var(--headerColor) !important;
}



/* Remove the background and borders from the services - index.html items in Dark Mode */
body.dark-mode #services-285 .cs-item {
    background-color: transparent !important;
    border: none !important;
}
/* Ensure the text stays bright since the background is now gone */
body.dark-mode #services-285 .cs-item-text,
body.dark-mode #services-285 .cs-number {
    color: var(--headerColor) !important;
}



/* Remove the background and borders from the steps - services.html items in Dark Mode */
body.dark-mode #steps-1675 .cs-item {
    background-color: transparent !important;
    border: none !important;
}
/* Ensure the text stays bright since the background is now gone */
body.dark-mode #steps-1675 .cs-item-text,
body.dark-mode #steps-1675 .cs-number {
    color: var(--headerColor) !important;
}


/* Remove the background and borders from the Stats items in Dark Mode */
body.dark-mode #sbs-83 .cs-item {
    background-color: transparent !important;
    border: none !important;
}
/* Ensure the text stays bright since the background is now gone */
body.dark-mode #sbsr-87 .cs-item-text,
body.dark-mode #sbsr-87 .cs-number {
    color: var(--headerColor) !important;
}





 /* Optional: Remove the margin from the very last section so you don't have 
   extra space at the bottom of your footer */
section:last-of-type {
    margin-bottom: 0;
}
/* This targets the mobile menu specifically */
body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: #090e2f !important; /* Your dark blue */
    opacity: 1 !important;
    /* This ensures it's not "see-through" */
    backdrop-filter: none !important; 
}



/* LIGHT MODE (Default) */
#cs-navigation .cs-logo .logo-black {
    display: block !important;
}
#cs-navigation .cs-logo .logo-white {
    display: none !important;
}

/* DARK MODE (Manual Toggle) */
body.dark-mode #cs-navigation .cs-logo .logo-black {
    display: none !important;
}
body.dark-mode #cs-navigation .cs-logo .logo-white {
    display: block !important;
}

/* REMOVE THE FILTERS */
body.dark-mode #cs-navigation .cs-logo {
    filter: none !important;
}



/* Target Mobile and Tablet views */
@media only screen and (max-width: 1023px) {
    #cs-navigation .cs-container {
        display: flex !important;
        /* This pushes the first item (logo) left and last item (toggle) right */
        justify-content: space-between !important; 
        align-items: center !important;
        width: 100%;
        max-width: 100%; /* Ensures it spans the full bar width */
        padding: 0 1rem; /* Keeps the logo from touching the very edge of the screen */
    }

    /* Force the logo to stay left-aligned */
    #cs-navigation .cs-logo {
        margin-right: auto !important;
        margin-left: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    /* Force the hamburger/toggle to stay right-aligned */
    #cs-navigation .cs-toggle {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}




/* keeps footer in Dark Mode */
/* This targets the footer and tells it to IGNORE the dark-mode class on the body */
/* 1. Force the background image/color to stay as-is */
#cs-footer-710 {
    background-color: #090e2f !important; /* Set this to your footer's original color */
    color: #ffffff !important; /* Force text to stay white (or original color) */
}
/* 2. Force links to stay their original color */
#cs-footer-710 .cs-link, 
#cs-footer-710 a {
    color: #ffffff !important; 
    opacity: 1 !important;
}
/* 3. Keep the graphic/background image exactly the same */
#cs-footer-710 .cs-graphic {
    display: block !important;
    opacity: 1 !important;
    filter: none !important;
}



#dark-mode-toggle .cs-icon-force-white {
    fill: #ffffff !important;
    /* Ensure no outline is interfering */
    stroke: none !important;
}






#sbs-83 {
   /* Adjusting from a lighter navy to your solid dark blue */
    background: linear-gradient(
        180deg, 
        #fefefe 0%,    /* Lighter, professional blue at the top */
        #83a3da 60%,   /* Your signature dark blue starts taking over */
        #ffffff 100%   /* An even deeper "midnight" finish for the bottom */
    );
    
    /* Ensure the text stays readable */
    color: #ffffff;
}
body.dark-mode #sbs-83 {
   /* Adjusting from a lighter navy to your solid dark blue */
    background: linear-gradient(
        180deg, 
        #090e2f 0%,    /* Lighter, professional blue at the top */
        #1f2f48 60%,   /* Your signature dark blue starts taking over */
        #090e2f 100%   /* An even deeper "midnight" finish for the bottom */
    );
    
    /* Ensure the text stays readable */
    color: #ffffff;
}
#sbsr-1592 {
    background: #e7e7e7c2;
}
body.dark-mode #sbsr-1592 {
    background: linear-gradient(
        180deg, 
        #090e2f 0%,    /* Lighter, professional blue at the top */
        #090e2f 60%,   /* Your signature dark blue starts taking over */
        #1f2f48 100%   /* An even deeper "midnight" finish for the bottom */
    );
}
#services-285 {
    background: #ffffff;
}
body.dark-mode #services-285 {
    background: linear-gradient(
        180deg, 
        #090e2f 0%,    /* Lighter, professional blue at the top */
        #090e2f 60%,   /* Your signature dark blue starts taking over */
        #090e2f 100%   /* An even deeper "midnight" finish for the bottom */
    );
}
#sbsr-1592 {
    background: #e7e7e7c2;
}
body.dark-mode #sbsr-1592 {
    background: linear-gradient(
        180deg, 
        #090e2f 0%,    /* Lighter, professional blue at the top */
        #1f2f48 60%,   /* Your signature dark blue starts taking over */
        #090e2f 100%   /* An even deeper "midnight" finish for the bottom */
    );
}
#quote-561 {
    background: #e7e7e7c2;
}
body.dark-mode #quote-561 {
    background: #1f2f48;
}



/* Modification - Changes contact form input field background color*/
#cs-contact-549 .cs-input, 
#cs-contact-549 textarea {
    background-color: #131a43 !important;
    /* This removes any default gradients or "glass" effects */
    background-image: none !important; 
    /* Ensures text is readable against the grey */
    color: #000 !important; 
}

/* Target the dropdown box itself */
#route-select, 
.cs-form select {
    background-color: #090E2F !important;
    color: #FFFFFF !important;
    border: 1px solid #FF8C00;
    padding: 12px;
    appearance: none; /* Removes default browser arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23FF8C00' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
}

/* Target the actual list items when the menu opens */
#route-select option {
    background-color: #1a214d; /* Dark background for the list */
    color: #FFFFFF;            /* White text for the list */
}

/* Fix for mobile/Safari which can be stubborn */
select:-webkit-autofill,
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFFFFF;
    -webkit-box-shadow: 0 0 0px 1000px #090E2F inset;
}






/* ---------------------------------------------------------------*/
/*                   Modifications end                            */
/* ---------------------------------------------------------------*/




/*-- -------------------------- -->
<---         LightBox           -->
<--- -------------------------- -*/

/*Modification - Picture lightbox */
#lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

#lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

#lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}

#lightbox-img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.5rem;
}

#lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    cursor: pointer;
}

/*-- -------------------------- -->
<---    Back to Top Button      -->
<--- -------------------------- -*/


/* Modification - back to top button */
#back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    background-color: var(--primary);
    color: #000;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background: #b69d7100;
}

#back-to-top:hover {
    opacity: 0.8;
}
body.dark-mode #back-to-top {
    
    color: white;
}

                            

/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0px) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    opacity: 0;
    transform: translate(-50%, -150%);
  }
  #dark-mode-toggle {
    width: 3rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    display: block;
    order: 4;
    position: relative;
    z-index: 1000;
    overflow: hidden;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s;
  }
  #dark-mode-toggle .cs-sun {
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, 100%);
    transition: transform 0.3s, opacity 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 1024px) {
  #dark-mode-toggle {
    margin: 0;
    position: relative;
    top: auto;
    right: auto;
    transform: none;
  }
  #dark-mode-toggle:hover {
    cursor: pointer;
  }
}
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 1023.5px) {
  body.cs-open {
    overflow: hidden;
  }
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    top: 0;
  }
  body.scroll #cs-navigation:before {
    border-radius: 0;
  }
  body.scroll #cs-navigation .cs-ul-wrapper {
    top: 100%;
  }
  #cs-navigation {
    width: 94%;
    max-width: 80rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem);
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #cs-navigation:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    opacity: 1;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.2s, border-radius 0.3s ease-in-out;
  }
  #cs-navigation.cs-active:before {
    transform: translateX(-50%) scale(1.03);
  }
  #cs-navigation.cs-active .cs-toggle {
    transform: rotate(180deg);
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /*Modification - changed gap to 2.5 from 1.5 to move it over to the left more */
    gap: 2.5rem;
  }
  #cs-navigation .cs-logo {
    width: auto;
    max-width: 12.5rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* 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-toggle {
    width: 3.0rem;
    height: 3.0rem;
    margin: 0 0 0 auto;
    background-color: #1a1a1a;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: transform 0.6s;
  }
  #cs-navigation .cs-nav {
    /* sends it to the right in the 3rd position */
    order: 3;
  }
  #cs-navigation .cs-contact-group {
    display: none;
    position: relative;
    z-index: 10;
  }
  #cs-navigation .cs-phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
  }
  #cs-navigation .cs-phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-social {
    display: none;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 1rem;
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #fafbfc;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 768px) {
  #cs-navigation .cs-contact-group {
    display: block;
  }
}
/* Dark Mode */
@media only screen and (max-width: 1023.5px) {
  body.dark-mode #cs-navigation:before {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* makes it white */
    filter: none;
  }
  body.dark-mode #cs-navigation .cs-toggle {
    background-color: var(--secondary);
  }
  body.dark-mode #cs-navigation .cs-phone {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-phone-icon {
    /* turns it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-line {
    background-color: #fff;
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---   Mobile Navigation Menu   -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (max-width: 1023.5px) {
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #fff;
    border-radius: 0 0 1.5rem 1.5rem;
    position: absolute;
    top: 85%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 4rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: auto;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-70/16rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
    padding: 0.25rem;
  }
  #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;
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 1023.5px) {
  #cs-navigation .cs-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #cs-navigation .cs-dropdown {
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #cs-navigation .cs-dropdown .cs-dropdown-toggle {
    /* Reset default button styles */
    background: none;
    border: none;
    
    text-align: inherit;
    cursor: pointer;
    /* Remove any default focus styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
    opacity: 1;
    visibility: visible;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }
  #cs-navigation .cs-drop-ul {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--primary);
    opacity: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 1024px) {
  #cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown .cs-dropdown-toggle {
    /* Reset default button styles */
    background: none;
    border: none;
    
    text-align: inherit;
    cursor: pointer;
    /* Remove any default focus styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  #cs-navigation .cs-dropdown:hover,
  #cs-navigation .cs-dropdown.cs-active {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-ul,
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-li,
  #cs-navigation .cs-dropdown.cs-active .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    display: inline-block;
  }
  #cs-navigation .cs-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    box-shadow: inset rgba(149, 157, 165, 0.1) 0px 8px 10px;
    opacity: 0;
    border-bottom: 5px solid var(--primary);
    border-radius: 0 0 1.5rem 1.5rem;
    visibility: hidden;
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
    position: absolute;
    top: calc(100% - 2px);
    z-index: 100;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-drop-li {
    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: auto;
    opacity: 0;
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    color: var(--headerColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    color: var(--bodyTextColorWhite);
    background-color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link:focus-visible {
    outline-offset: -2px;
  }
}
/* Dark Mode - Desktop */
@media only screen and (min-width: 1024px) {
  body.dark-mode #cs-navigation .cs-drop-ul {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 1024px) {
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    top: 0;
  }
  #cs-navigation {
    width: 94%;
    max-width: 90rem;
    height: 6rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem) 0;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: flex;
    align-items: center;
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 1.5rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: auto;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-contact-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
  }
  #cs-navigation .cs-phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-social {
    height: 2rem;
    opacity: 1;
    display: none;
    visibility: visible;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    width: 2rem;
    height: 2rem;
    background-color: #f7f7f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #cs-navigation .cs-social-link:hover {
    background-color: var(--primary);
  }
  #cs-navigation .cs-social-link:hover .cs-social-icon {
    opacity: 1;
    filter: grayscale(1) brightness(10000%);
  }
  #cs-navigation .cs-social-icon {
    width: 0.75rem;
    height: auto;
    opacity: 0.6;
    display: block;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    /* absolutely positioned to be dead center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: block;
    position: relative;
    transition: color 0.3s;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 2rem;
    color: #fff;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #fff;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover {
    color: #1a1a1a;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 1300px) {
  #cs-navigation .cs-social {
    display: flex;
  }
}
/* Dark Mode */
@media only screen and (min-width: 1024px) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* turns it white */
    filter: none;
  }
  body.dark-mode #cs-navigation .cs-li-link,
  body.dark-mode #cs-navigation .cs-phone {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-phone-icon {
    filter: grayscale(1) brightness(10005);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-active {
    color: var(--secondary);
  }
  body.dark-mode #cs-navigation .cs-li-link:hover {
    color: var(--secondary);
  }
}
body.dark-mode #cs-navigation ,.cs-dropdown:hover {
    background-color: #fff;
}

/*-- -------------------------- -->
<---    Hero index  index 1     -->
<--- -------------------------- -*/



/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-408 {
        padding: var(--sectionPadding);
        /* 112px - 200px */
        padding-top: clamp(7rem, 15vw, 12.5rem);
        padding-right: 0;
    }
    #hero-408 .cs-container {
        width: 100%;
        /* changes to 100% at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 36px - 100px */
        gap: clamp(2.25rem, 10vw, 6.25rem);
    }
    #hero-408 .cs-content {
        max-width: 39.375rem;
        padding-right: 1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }
    #hero-408 .cs-title {
        /* 31px - 61px */
        font-size: clamp(1.9375rem, 4.4vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        text-align: left;
        max-width: 43.75rem;
        /* 12px - 24px */
        margin: 0 0 clamp(0.75rem, 1.5vw, 1.5rem);
        color: var(--headerColor);
        position: relative;
    }
    #hero-408 .cs-color {
        color: var(--primary);
        display: block;
    }
    #hero-408 .cs-text {
        /* 16px - 25px */
        font-size: clamp(1rem, 2vw, 1.5625rem);
        line-height: 1.5em;
        text-align: left;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        /* 24px - 40px */
        margin-bottom: clamp(1.5rem, 4.2vw, 3rem);
        color: var(--bodyTextColor);
    }
    #hero-408 .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-right: 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;
    }
    #hero-408 .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;
    }
    #hero-408 .cs-button-solid:hover:before {
        width: 100%;
    }
    #hero-408 .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-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition:
            background-color 0.3s,
            color 0.3s;
    }
    #hero-408 .cs-button-transparent:hover {
        background-color: var(--primary);
        color: #fff;
    }
    #hero-408 .cs-header {
        /* 14px - 20px */
        font-size: clamp(0.875rem, 1.5vw, 1.25rem);
        line-height: 1.5em;
        /* 40px - 100px */
        margin: clamp(2.5rem, 5vw, 6.25rem) 0 0.75rem 0;
        width: 100%;
        color: var(--bodyTextColor);
        display: block;
    }
    #hero-408 .cs-logo-group {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #hero-408 .cs-logo {
        width: auto;
        /* 18px - 32px */
        height: clamp(1.125rem, 1.5vw, 2rem);
        filter: grayscale(1);
    }
    #hero-408 .cs-stat-group {
        width: 100%;
        border-radius: 1.25rem 0 0 1.25rem;
        aspect-ratio: 0.92696629;
        /* clips the corners around the border radius */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-wrap: nowrap;
        position: relative;
        z-index: 1;
    }
    #hero-408 .cs-stat-box {
        width: 50%;
        /* changes at tablet */
        height: 9.125rem;
        /* 24px - 48px */
        padding: clamp(1.5rem, 3vw, 3rem);
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #hero-408 .cs-stat-box:nth-of-type(1) {
        background-color: rgba(249, 70, 70, 0.899);
    }
    #hero-408 .cs-stat-box:nth-of-type(2) {
        background-color: rgba(221, 62, 62, 0.79);
    }
    #hero-408 .cs-stat {
        /* 25px - 61px */
        font-size: clamp(1.5625rem, 3.5vw, 3.8125rem);
        line-height: 1.2em;
        text-align: left;
        margin: 0;
        display: block;
    }
    #hero-408 .cs-desc {
        /* 14px - 20px */
        font-size: clamp(0.875rem, 1.6vw, 1.25rem);
        line-height: 1.2em;
        margin: 0.25rem 0 0 0;
        display: block;
    }
    #hero-408 .cs-background {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        z-index: -1;
    }
    #hero-408 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-408 {
        padding-right: 0;
    }
    #hero-408 .cs-container {
        max-width: 100%;
        flex-direction: row;
        justify-content: flex-end;
    }
    #hero-408 .cs-content {
        width: 45%;
        padding: 0;
    }
    #hero-408 .cs-stat-group {
        width: 45%;
        max-height: 46.0625rem;
        aspect-ratio: 0.92647059;
        flex: none;
    }
    #hero-408 .cs-stat-box {
        /* 126px - 221px */
        height: clamp(7.875rem, 18vw, 13.8125rem);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #hero-408 .cs-title,
    body.dark-mode #hero-408 .cs-text,
    body.dark-mode #hero-408 .cs-header,
    body.dark-mode #hero-408 .cs-button-transparent {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #hero-408 .cs-logo {
        filter: grayscale(1) brightness(400%);
    }
}




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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cs-footer-710 {
        padding: var(--sectionPadding);
        padding-bottom: 3.125rem;
        background-color: none;
        position: relative;
        z-index: 1;
    }
    #cs-footer-710 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #cs-footer-710 .cs-logo-wrapper {
        width: 100%;
    }
    #cs-footer-710 .cs-logo {
        width: 100%;
        max-width: 13.125rem;
        height: auto;
        margin-right: auto;
        display: block;
    }
    #cs-footer-710 .cs-logo img {
        width: 100%;
        height: auto;
    }
    #cs-footer-710 .cs-top {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        /* 64px - 100px */
        column-gap: clamp(4rem, 9vw, 6.25rem);
        row-gap: 2rem;
    }
    #cs-footer-710 .cs-ul {
        margin: 0;
        padding: 0;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        flex: none;
    }
    #cs-footer-710 .cs-contact-ul {
        /* we remove the :before animated underline from the contact list and replace it with an underline.  The animated line doesn't work well on this section */
        width: 100%;
        max-width: 100%;
        gap: 0.75rem;
    }
    #cs-footer-710 .cs-contact-ul .cs-link:hover {
        text-decoration: underline;
    }
    #cs-footer-710 .cs-contact-ul .cs-link:before {
        display: none;
    }
    #cs-footer-710 .cs-li {
        list-style: none;
        margin: 0;
        display: block;
    }
    #cs-footer-710 .cs-header {
        font-size: 1rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 1.5rem 0;
        color: #fff;
        display: block;
    }
    #cs-footer-710 .cs-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
    }
    #cs-footer-710 .cs-link:hover:before {
        width: 100%;
    }
    #cs-footer-710 .cs-link:before {
        /* on hover underline */
        content: "";
        width: 0%;
        height: 1px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        transition: width 0.3s;
    }
    #cs-footer-710 .cs-block {
        display: block;
    }
    #cs-footer-710 .cs-icon {
        width: 1.5rem;
        height: auto;
        margin: -0.0625rem 0.75rem 0 0;
    }
    #cs-footer-710 .cs-middle {
        width: 100%;
        /* changes at tablet */
        max-width: 28.125rem;
        /* 60px - 100px */
        margin: clamp(3.75rem, 8vw, 6.25rem) 0 0 0;
        /* 24px - 40px */
        padding-bottom: clamp(1.25rem, 5vw, 2.5rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    #cs-footer-710 .cs-nav {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 2.5rem;
        row-gap: 0.5rem;
    }
    #cs-footer-710 .cs-nav-li {
        list-style: none;
    }
    #cs-footer-710 .cs-nav-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: var(--bodyTextColorWhite);
        position: relative;
    }
    #cs-footer-710 .cs-nav-link:hover:before {
        width: 100%;
    }
    #cs-footer-710 .cs-nav-link:before {
        /* on hover underline */
        content: "";
        width: 0%;
        height: 1px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        transition: width 0.3s;
    }
    #cs-footer-710 .cs-social {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    #cs-footer-710 .cs-social-li {
        list-style: none;
    }
    #cs-footer-710 .cs-social-link {
        width: 2rem;
        height: 2rem;
        background-color: transparent;
        border: 1px solid #f6e5db;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    #cs-footer-710 .cs-social-link:hover {
        background-color: #f6e5db;
    }
    #cs-footer-710 .cs-social-link:hover .cs-default {
        display: none;
    }
    #cs-footer-710 .cs-social-link:hover .cs-hover {
        display: block;
    }
    #cs-footer-710 .cs-social-icon {
        width: 0.75rem;
        height: auto;
        display: block;
    }
    #cs-footer-710 .cs-hover {
        display: none;
    }
    #cs-footer-710 .cs-bottom {
        width: 100%;
        margin: 0;
        /* 24px - 40px, matches the cs-middle padding bottom */
        padding: clamp(1.25rem, 5vw, 2.5rem) 0 0 0;
        border-top: 1px solid rgba(186, 186, 186, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #cs-footer-710 .cs-copyright {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-align: center;
        width: 70%;
        margin: 0;
        color: var(--bodyTextColorWhite);
        display: block;
    }
    #cs-footer-710 .cs-copyright-link {
        font-size: inherit;
        line-height: inherit;
        text-decoration: none;
        margin: 0;
        color: inherit;
        display: inline-block;
    }
    #cs-footer-710 .cs-copyright-link:hover {
        text-decoration: underline;
    }
    #cs-footer-710 .cs-graphic {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        /* makes it act like a background image */
        object-fit: cover;
        position: absolute;
        z-index: -1;
    }
}
/* inbetween - 600px */
@media only screen and (min-width: 37.5rem) {
    #cs-footer-710 .cs-top {
        justify-content: flex-end;
    }
    #cs-footer-710 .cs-ul {
        width: auto;
    }
    #cs-footer-710 .cs-contact-ul {
        width: 15rem;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #cs-footer-710 .cs-top {
        flex-wrap: nowrap;
    }
    #cs-footer-710 .cs-logo-wrapper {
        width: auto;
        margin-right: auto;
    }
    #cs-footer-710 .cs-middle {
        max-width: 100%;
    }
}
/* Small Desktop 1024px */
@media only screen and (min-width: 64rem) {
    #cs-footer-710 .cs-middle {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}




/*-- -------------------------- -->
<--- Services index - Key Features -->
<--- -------------------------- -*/

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

    #services-285 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        row-gap: 1rem;
    }
    #services-285 .cs-item {
        list-style: none;
        width: 100%;
        max-width: 31.25rem;
        /* 32px - 40px top & bottom */
        /* 28px - 40px left & right */
        padding: clamp(2rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
        background-color: #fafbfc;
        box-sizing: border-box;
        transition:
            background-color 0.3s,
            transform 0.3s;
    }
    #services-285 .cs-item:hover {
        background-color: var(--primary);
        transform: translateY(-0.4375rem);
    }
    #services-285 .cs-item:hover .cs-picture:before {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    #services-285 .cs-item:hover .cs-h3,
    #services-285 .cs-item:hover .cs-item-text {
        color: #fff;
    }
    #services-285 .cs-link {
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #services-285 .cs-picture {
        margin: 0;
        margin-bottom: 1.5rem;
        /* 68px - 88px */
        width: clamp(4.25rem, 4vw, 5.5rem);
        height: clamp(4.25rem, 4vw, 5.5rem);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: var(--primary);
        position: relative;
        z-index: 1;
    }
    #services-285 .cs-picture:before {
        /* floating hover box */
        content: "";
        width: 130%;
        height: 130%;
        background-color: transparent;
        opacity: 0;
        border-radius: 50%;
        border: 2px solid #fff;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        z-index: 10;
        transition:
            width 0.5s,
            height 0.5s,
            opacity 0.4s;
    }
    #services-285 .cs-icon {
        /* 45px - 54px */
        height: clamp(2.8125rem, 3vw, 3.375rem);
        width: auto;
    }
    #services-285 .cs-h3 {
        font-size: 1.25rem;
        font-weight: 900;
        text-align: center;
        line-height: 1.2em;
        margin: 0;
        margin-bottom: 0.75rem;
        color: var(--headerColor);
        transition: color 0.3s;
    }
    #services-285 .cs-item-text {
        font-size: 1rem;
        text-align: center;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
    #services-285 .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;
    }
    #services-285 .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-285 .cs-button-solid:hover:before {
        width: 100%;
    }
}


/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-285 .cs-card-group {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        /* 16px - 20px */
        column-gap: clamp(1rem, 2vw, 1.25rem);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #services-285 .cs-title,
    body.dark-mode #services-285 .cs-text,
    body.dark-mode #services-285 .cs-h3,
    body.dark-mode #services-285 .cs-item-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-285 .cs-picture {
        background-color: var(--dark);
    }
    body.dark-mode #services-285 .cs-item {
        background-color: var(--medium);
        position: relative;
        transition:
            background-color 0.3s,
            transform 0.3s;
    }
    body.dark-mode #services-285 .cs-item:before {
        /* floating hover box */
        content: "";
        width: 100%;
        height: 100%;
        background-color: transparent;
        opacity: 0;
        border: 2px solid #fff;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        z-index: 10;
        transition: opacity 0.4s;
    }
    body.dark-mode #services-285 .cs-item:hover {
        background-color: var(--dark);
        transform: none;
    }
    body.dark-mode #services-285 .cs-item:hover:before {
        opacity: 1;
    }
    body.dark-mode #services-285 .cs-item:hover .cs-picture:before {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    body.dark-mode #services-285 .cs-item:hover .cs-h3,
    body.dark-mode #services-285 .cs-item:hover .cs-item-text {
        color: #fff;
    }
}


                          
/*-- -------------------------- -->
<---   Side By Side Reverse  index laptop and phone  -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-1592 {
    padding: var(--sectionPadding);
  }
  #sbsr-1592 .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);
  }
  #sbsr-1592 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbsr-1592 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-1592 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-1592 .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 3rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbsr-1592 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #sbsr-1592 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbsr-1592 .cs-image-group {
    /* scales the whole group based on the view width size and stop when that vales equals .745em, resets at desktop */
    font-size: min(1.959vw, .745em);
    width: 39.375em;
    /* we set a minimum height so it never gets smaller than this value */
    min-height: 39.25em;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbsr-1592 .cs-picture {
    position: absolute;
  }
  #sbsr-1592 .cs-picture img {
    width: 100%;
    height: 105%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-1592 .cs-picture1 {
    /* the percentage heights allow them to be responsive to the height of the parent cs-image-group. On desktop, when the felxbox is set to aling-items: stretch, the cs-image group will stretch to fill the height of the parent container. So when you add more content to the cs-content group and make it taller, the cs-image group will get taller with it and every image will stretch with the parent, making this entire group responsive to the changing amounts of content next to it */
    width:46.8125em;
    height: 79.617834%;
    top: 0;
    
    right: -11%;
    z-index: -1;
  }
  #sbsr-1592 .cs-picture2 {
    width: 25.8125em;
    height: 44.585987%;
    bottom: 0;
    left: 0;
    z-index: 10;
  }
}
/* Tablet 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-1592 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbsr-1592 .cs-content {
    /* this padding sets a minimum gap between the top and bottom of the content div and the top and bottom of the cs-image-group */
    padding: 3.75rem 0;
    /* while the cs-image-group will stretch to fill the height of the parent, this property will ensure that the cs-content group aligns itse;f in the center of the parent div instead of stretching */
    align-self: center;
  }
  #sbsr-1592 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbsr-1592 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 18%;
    left: 20%;
  }
  #sbsr-1592 .cs-picture1 {
    /* the percentage heights allow them to be responsive to the height of the parent cs-image-group. On desktop, when the felxbox is set to aling-items: stretch, the cs-image group will stretch to fill the height of the parent container. So when you add more content to the cs-content group and make it taller, the cs-image group will get taller with it and every image will stretch with the parent, making this entire group responsive to the changing amounts of content next to it */
    width:48.8125em;
    height: 79.617834%;
    top: 0;
    right: -10%;
    z-index: -1;
  }
  #sbsr-1592 .cs-picture2 {
    width: 25.8125em;
    height: 44.585987%;
    bottom: 0;
    left: 0;
    z-index: 10;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-1592 .cs-title,
  body.dark-mode #sbsr-1592 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-1592 .cs-text {
    opacity: .8;
  }
}
   

/*-- -------------------------- -->
<---      FAQ   Index           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #faq-489 {
        padding: var(--sectionPadding);
        background: #fafbfc;
    }
    #faq-489 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* 40px - 48px */
        gap: clamp(2.5rem, 5vw, 3rem);
    }
    #faq-489 .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;
    }

    #faq-489 .cs-color {
        color: var(--primary);
    }

    #faq-489 .cs-title {
        /* 17 characters wide including spaces */
        max-width: 17ch;
    }
    #faq-489 .cs-text {
        /* 32px - 48px */
        margin-bottom: clamp(2rem, 3vw, 3rem);
    }
    #faq-489 .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;
    }
    #faq-489 .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;
    }
    #faq-489 .cs-button-solid:hover:before {
        width: 100%;
    }
    #faq-489 .cs-faq-group {
        max-width: 46.25rem;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1.25rem;
    }
    #faq-489 .cs-faq-item {
        list-style: none;
        width: 100%;
        /* prevents border from affecting width and height */
        box-sizing: border-box;
        border: 1px solid #f1f1f4;
        transition:
            border 0.3s,
            padding 0.3s,
            border-color 0.3s;
    }
    #faq-489 .cs-faq-item:hover {
        border-color: var(--primary);
    }
    #faq-489 .cs-faq-item.active {
        padding-bottom: 1rem;
        border-color: var(--primary);
    }
    #faq-489 .cs-faq-item.active .cs-button {
        color: var(--primary);
    }
    #faq-489 .cs-faq-item.active .cs-button:before {
        transform: translateY(-50%) rotate(180deg);
        opacity: 0;
        background-color: var(--primary);
    }
    #faq-489 .cs-faq-item.active .cs-button:after {
        transform: translateY(-50%) rotate(360deg);
        background-color: var(--primary);
    }
    #faq-489 .cs-faq-item.active .cs-item-p {
        height: auto;
        margin-top: 0.5rem;
        opacity: 1;
    }
    #faq-489 .cs-button {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 1vw, 1.5625rem);
        line-height: 1.2em;
        text-align: left;
        font-weight: bold;
        padding: 1rem 1.5rem;
        border: none;
        background: transparent;
        color: var(--headerColor);
        display: block;
        width: 100%;
        position: relative;
        transition:
            background-color 0.3s,
            color 0.3s;
    }
    #faq-489 .cs-button:hover {
        cursor: pointer;
    }
    #faq-489 .cs-button:before {
        /* horizontal line */
        content: "";
        width: 1rem;
        height: 0.1875rem;
        background-color: currentColor;
        opacity: 1;
        border-radius: 1px;
        position: absolute;
        display: block;
        top: 50%;
        right: 1.5rem;
        transform: translateY(-50%);
        transition:
            transform 0.5s,
            opacity 0.3s;
    }
    #faq-489 .cs-button:after {
        /* vertical line */
        content: "";
        width: 1rem;
        height: 0.1875rem;
        background-color: currentColor;
        opacity: 1;
        border-radius: 1px;
        position: absolute;
        display: block;
        top: 50%;
        right: 1.5rem;
        transform: translateY(-50%) rotate(90deg);
        transform-origin: center;
        transition: transform 0.5s;
    }
    #faq-489 .cs-button-text {
        width: 80%;
        display: block;
    }
    #faq-489 .cs-item-p {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        width: 90%;
        height: 0;
        margin: 0;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        padding: 0 1.5rem;
        opacity: 0;
        color: var(--bodyTextColor);
        /* clips the text so it doesn't show up */
        overflow: hidden;
        transition:
            opacity 0.3s,
            padding-bottom 0.3s;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 48rem) {
    #faq-489 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 3.25rem;
    }
    #faq-489 .cs-content {
        margin-top: 3.125rem;
    }
    #faq-489 .cs-title,
    #faq-489 .cs-topper {
        text-align: left;
        margin-left: 0;
    }
    #faq-489 .cs-faq-group {
        width: clamp(56%, 58vw, 58%);
        flex: none;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #faq-489 {
        background-color: rgba(0, 0, 0, 0.2);
    }
    body.dark-mode #faq-489 .cs-topper {
        color: var(--primaryLight);
    }
    body.dark-mode #faq-489 .cs-title,
    body.dark-mode #faq-489 .cs-text,
    body.dark-mode #faq-489 .cs-item-p {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-489 .cs-text,
    body.dark-mode #faq-489 .cs-item-p {
        opacity: 0.8;
    }
    body.dark-mode #faq-489 .cs-faq-item {
        border-color: rgba(255, 255, 255, 0.2);
    }
    body.dark-mode #faq-489 .cs-faq-item:hover {
        border-color: var(--primary);
    }
    body.dark-mode #faq-489 .cs-faq-item.active {
        border-color: var(--primaryLight);
    }
    body.dark-mode #faq-489 .cs-faq-item.active .cs-button {
        color: var(--primaryLight);
    }
    body.dark-mode #faq-489 .cs-faq-item.active .cs-button:before,
    body.dark-mode #faq-489 .cs-faq-item.active .cs-button:after {
        background-color: var(--primaryLight);
    }
    body.dark-mode #faq-489 .cs-button {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-489 .cs-button:before,
    body.dark-mode #faq-489 .cs-button:after {
        background-color: var(--bodyTextColorWhite);
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #stats-539 {
        padding: var(--sectionPadding);
    }
    #stats-539 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #stats-539 .cs-content {
        text-align: left;
        /* changes to 41% at tablet */
        width: 100%;
        max-width: 32.625rem;
    }

    #stats-539 .cs-color {
        color: var(--primaryLight);
    }
    #stats-539 .cs-title {
        max-width: 17ch;
    }
    #stats-539 .cs-card-group {
        /* changes to 43% at tablet */
        width: 90%;
        max-width: 32.625rem;
        margin: 0 auto 0 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        /* 16px - 52px */
        row-gap: clamp(1rem, 5vw, 3.25rem);
    }
    #stats-539 .cs-item {
        width: 40%;
        max-width: 12.5rem;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #stats-539 .cs-number {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        margin: 0 0 0.5rem 0;
        color: var(--headerColor);
        display: block;
    }
    #stats-539 .cs-desc {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.5em;
        font-weight: 400;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #stats-539 .cs-big-link {
        width: 100%;
        /* changes to a clamp at tablet */
        height: 20rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    #stats-539 .cs-big-link:hover .cs-background img {
        transform: scale(1.1);
    }
    #stats-539 .cs-background {
        width: 100%;
        height: 115%;
        /* clips the img from overflowing the container on hover */
        overflow: hidden;
        display: block;
        position: relative;
        top: 5%;
        left: 0;
        z-index: 1;
        border-radius: 15px;
    }
    #stats-539 .cs-background:before {
        /* color overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 0.02;
        background-blend-mode: multiply;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 10;
    }
    #stats-539 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 110%;
        width: 100%;
        object-fit: cover;
        z-index: -1;
        transition: transform 0.7s;
    }
    #stats-539 .cs-link-icon {
        /* 80px - 110px */
        width: clamp(5rem, 11vw, 6.875rem);
        height: clamp(5rem, 11vw, 6.875rem);
        border-radius: 50%;
        position: absolute;
        z-index: 10;
        transition:
            transform 0.3s,
            box-shadow 0.3s;
    }
    #stats-539 .cs-link-icon:hover {
        transform: scale(1.1);
        box-shadow: rgba(0, 0, 0, 0.5) 0px 7px 29px 0px;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #stats-539 .cs-container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #stats-539 .cs-content {
        width: 41%;
    }
    #stats-539 .cs-card-group {
        width: 43%;
    }
    #stats-539 .cs-big-link {
        /* 280px - 580px */
        height: clamp(20rem, 44vw, 36.25rem);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #stats-539 {
        background-color: var(--dark);
    }
    body.dark-mode #stats-539 .cs-title,
    body.dark-mode #stats-539 .cs-text,
    body.dark-mode #stats-539 .cs-number,
    body.dark-mode #stats-539 .cs-desc {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #stats-539 .cs-topper,
    body.dark-mode #stats-539 .cs-color {
        color: var(--secondary);
    }
}

                                
/*-- -------------------------- -->
<---       Quote   Index        -->
<--- -------------------------- -*/

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

    #quote-561 .cs-topper:before {
        /* yellow line */
        content: "";
        width: 3.125rem;
        height: 2px;
        background: var(--secondary);
        opacity: 1;
        display: block;
    }
    #quote-561 .cs-quote {
        /* 31px - 49px */
        font-size: clamp(1.9375rem, 5.1vw, 3.0625rem);
        line-height: 1.2em;
        font-weight: 900;
        margin: 0;
        color: var(--headerColor);
    }
    #quote-561 .cs-name {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.7vw, 1.25rem);
        line-height: 1.2em;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0;
        color: var(--secondary);
        display: block;
        letter-spacing: 0.01em;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #quote-561 {
        background-color: var(--medium);
    }
    body.dark-mode #quote-561 .cs-quote,
    body.dark-mode #quote-561 .cs-topper {
        color: var(--bodyTextColorWhite);
    }
}

/*-- -------------------------- -->
<---       Contact Form  - contact.html      -->
<--- -------------------------- -*/


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-2320 {
    padding: var(--sectionPadding);
    display: flex;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #contact-2320 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.25rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #contact-2320 .cs-container2 {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.25rem;
    padding: 5rem 3rem;
    margin: auto;
    position: relative;
    z-index: 1;
  }
  #contact-2320 .cs-container2 .cs-topper {
    color: #fff;
  }
  #contact-2320 .cs-content {
    text-align: left;
  }
  #contact-2320 .cs-title {
    margin-bottom: 2rem;
  }
  #contact-2320 .cs-form {
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  #contact-2320 .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-2320 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding-left: 1.5rem;
    color: var(--headerColor);
    background-color: #f7f7f7;
    border: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #contact-2320 .cs-input::placeholder {
    color: #7d799c;
    opacity: 0.6;
  }
  #contact-2320 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
  }
  #contact-2320 .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;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #contact-2320 .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;
  }
  #contact-2320 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-2320 .cs-submit {
    text-transform: uppercase;
    background-color: var(--secondaryLight);
    color: var(--headerColor);
    border: none;
    transition: color 0.3s;
  }
  #contact-2320 .cs-submit:hover {
    cursor: pointer;
    color: #fff;
  }
  #contact-2320 .cs-map {
    width: 100%;
    max-width: 39.375rem;
    height: 25rem;
    position: relative;
    z-index: 1;
    display: block;
  }
  #contact-2320 .cs-iframe-wrapper {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* 40px - 56px */
    bottom: clamp(2.5rem, 5vw, 3.5rem);
  }
  #contact-2320 .cs-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #contact-2320 .cs-box {
    width: 90%;
    max-width: 28.125rem;
    /* 16px - 32px top & bottom */
    /* 16px left & right */
    padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 2.4vw, 1rem);
    background-color: #fff;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
  }
  #contact-2320 .cs-box:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    pointer-events: none;
    opacity: 0.1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #contact-2320 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #contact-2320 .cs-flex {
    display: flex;
    flex-direction: column;
  }
  #contact-2320 .cs-header {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.5rem;
    color: var(--headerColor);
  }
  #contact-2320 .cs-address {
    font-size: clamp(0.75rem, 2.8vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #contact-2320 .cs-hours {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #contact-2320 .cs-hours-info {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    width: 60%;
    max-width: 28ch;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #contact-2320 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #contact-2320 .cs-background:before {
    /* background color overlay */
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.72;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #contact-2320 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-2320 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 3.25rem;
  }
  #contact-2320 .cs-container2 {
    max-width: 80rem;
  }
  #contact-2320 .cs-content {
    max-width: 32.625rem;
    /* 24px - 80px */
    padding: clamp(2rem, 5vw, 5rem) 0;
  }
  #contact-2320 .cs-title,
  #contact-2320 .cs-topper,
  #contact-2320 .cs-text {
    text-align: left;
    margin-left: 0;
  }
  #contact-2320 .cs-title {
    max-width: 32.625rem;
  }
  #contact-2320 .cs-services,
  #contact-2320 .cs-phone {
    width: 47%;
  }
  #contact-2320 .cs-button-solid {
    margin-left: 0;
  }
  #contact-2320 .cs-map {
    max-width: 39.375rem;
    height: auto;
    order: -1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #contact-2320 .cs-topper {
    color: var(--secondaryLight);
  }
  body.dark-mode #contact-2320 .cs-title,
  body.dark-mode #contact-2320 .cs-header,
  body.dark-mode #contact-2320 .cs-address {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-2320 .cs-box {
    background-color: var(--dark);
  }
  body.dark-mode #contact-2320 .cs-box:before {
    background-color: #000;
    opacity: 0.4;
  }
  body.dark-mode #contact-2320 .cs-label {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-2320 .cs-input {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-2320 .cs-input::placeholder {
    color: #ffffff;
    opacity: 0.5;
  }

}

                                



/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

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

    #pricing-357 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #pricing-357 .cs-item {
        list-style: none;
        /* 20px - 32px top & bottom */
        /* 16px - 32px left & right */
        padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.4vw, 2rem);
        width: 100%;
        max-width: 25.8125rem;
        border-radius: 1rem;
        background: #fff;
        border: 1px solid #e8e8e8;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #pricing-357 .cs-item:nth-of-type(2) .cs-option2-text,
    #pricing-357 .cs-item:nth-of-type(2) .cs-option1-text {
        transition-delay: 0.1s;
    }
    #pricing-357 .cs-item:nth-of-type(3) .cs-option2-text,
    #pricing-357 .cs-item:nth-of-type(3) .cs-option1-text {
        transition-delay: 0.2s;
    }
    #pricing-357 .cs-popular {
        background: var(--primary);
        position: relative;
        /* clips the popular tag */
        overflow: hidden;
        /* send to the top */
        order: -1;
    }
    #pricing-357 .cs-popular:before {
        /* Most Popular Tag */
        content: "Popular";
        font-size: 0.875rem;
        text-align: center;
        line-height: 1.8125em;
        font-weight: 700;
        width: 10.625rem;
        padding: 0 0.75rem;
        color: var(--bodyTextColorWhite);
        background-color: var(--secondary);
        position: absolute;
        display: block;
        top: 1.25rem;
        right: -3.75rem;
        transform: rotate(42deg);
    }
    #pricing-357 .cs-popular .cs-h3,
    #pricing-357 .cs-popular .cs-item-text,
    #pricing-357 .cs-popular .cs-price,
    #pricing-357 .cs-popular .cs-included,
    #pricing-357 .cs-popular .cs-li,
    #pricing-357 .cs-popular .cs-small {
        color: var(--bodyTextColorWhite);
    }
    #pricing-357 .cs-popular .cs-button-solid {
        background-color: #fff;
        color: var(--primary);
        transition: color 0.3s;
    }
    #pricing-357 .cs-popular .cs-button-solid:before {
        background-color: var(--secondary);
    }
    #pricing-357 .cs-popular .cs-button-solid:hover {
        color: #fff;
    }
    #pricing-357 .cs-popular .cs-li-img {
        /* turns the check mark white */
        filter: brightness(900%);
    }
    #pricing-357 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.25rem;
        padding: 0;
        color: var(--headerColor);
    }
    #pricing-357 .cs-item-text {
        font-size: 0.875rem;
        line-height: 1.5em;
        /* 16px - 24px */
        margin: 0 0 clamp(1rem, 2vw, 1.5rem);
        padding: 0;
        color: var(--bodyTextColor);
    }
    #pricing-357 .cs-option-group {
        position: relative;
    }
    #pricing-357 .cs-option-group:after {
        /* top right box */
        content: "";
        width: 100%;
        height: 1px;
        /* 32px - 40px */
        margin-bottom: clamp(2rem, 4vw, 2.5rem);
        background: linear-gradient(
            90deg,
            rgba(232, 232, 232, 0.2) 0%,
            #e8e8e8 53.78%,
            rgba(232, 232, 232, 0.2) 100%
        );
        opacity: 1;
        position: relative;
        display: block;
    }
    #pricing-357 .cs-price {
        font-size: 3.0625rem;
        line-height: 1.2em;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--headerColor);
        /* spans are inline, need to add block for margin to work */
        display: block;
    }
    #pricing-357 .cs-small {
        font-size: 0.875rem;
        font-weight: 400;
        color: #4e4b66;
    }
    #pricing-357 .cs-included {
        font-size: 1rem;
        line-height: 1.5em;
        font-weight: 700;
        /* 16px - 24px */
        margin-bottom: clamp(1rem, 3vw, 1.5rem);
        color: var(--headerColor);
        display: block;
    }
    #pricing-357 .cs-ul {
        padding: 0;
        margin: 0;
        /* 32px - 40px */
        margin-bottom: clamp(2rem, 4vw, 2.5rem);
    }
    #pricing-357 .cs-li {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        list-style: none;
        padding: 0;
        margin: 0 0 0.75rem;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    #pricing-357 .cs-li:last-of-type {
        margin-bottom: 0;
    }
    #pricing-357 .cs-disabled {
        /* fades out list items that are disabled from the price tier */
        filter: grayscale(1);
        opacity: 0.3;
    }
    #pricing-357 .cs-li-img {
        width: 1.25rem;
        height: auto;
        margin-top: 0.1875rem;
        margin-right: 0.5rem;
    }
    #pricing-357 .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;
    }
    #pricing-357 .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;
    }
    #pricing-357 .cs-button-solid:hover:before {
        width: 100%;
    }
    #pricing-357 .cs-button-solid {
        /* cs-button-solid override */
        width: 100%;
        margin: 0 0 1rem 0;
    }
}
/* Tablet 768px */
@media only screen and (min-width: 48rem) {
    #pricing-357 .cs-card-group {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    #pricing-357 .cs-item {
        width: 100%;
        /* ensures they stay the same height if you add more content */
        align-self: stretch;
    }
    #pricing-357 .cs-popular {
        /* send back to its original order */
        order: unset;
    }
    #pricing-357 #cs-option2-357:before {
        top: -0.625rem;
    }
    #pricing-357 #cs-option2-357:after {
        top: -2.1875rem;
        right: -6.25rem;
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #pricing-357 {
        background-color: var(--dark);
    }
    body.dark-mode #pricing-357 .cs-topper {
        color: var(--primaryLight);
    }
    body.dark-mode #pricing-357 .cs-title,
    body.dark-mode #pricing-357 .cs-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #pricing-357 .cs-plan {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #pricing-357 .cs-item {
        background: var(--accent);
        border-color: var(--medium);
    }
    body.dark-mode #pricing-357 .cs-popular {
        background: var(--primary);
    }
    body.dark-mode #pricing-357 .cs-h3,
    body.dark-mode #pricing-357 .cs-item-text,
    body.dark-mode #pricing-357 .cs-price,
    body.dark-mode #pricing-357 .cs-included,
    body.dark-mode #pricing-357 .cs-li,
    body.dark-mode #pricing-357 .cs-small {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #pricing-357 .cs-li-img {
        /* make so bright it turns white */
        filter: brightness(900%) grayscale(1);
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RTsbs-249,
    #RTsbsr-249,
    #RTsbst-249 {
        padding: 0 1em;
        position: relative;
        z-index: 1;
    }
    #RTsbs-249 .cs-container,
    #RTsbsr-249 .cs-container,
    #RTsbst-249 .cs-container {
        width: 100%;
        /* changes to 1280px on tablet */
        max-width: 34.375rem;
        padding: var(--sectionPadding);
        padding-left: 0;
        padding-right: 0;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 108px */
        gap: clamp(3rem, 8vw, 6.75rem);
        position: relative;
    }
    #RTsbs-249 .cs-content,
    #RTsbsr-249 .cs-content,
    #RTsbst-249 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        /* changes at tablet */
        max-width: 27.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #RTsbs-249 .cs-title,
    #RTsbsr-249 .cs-title,
    #RTsbst-249 .cs-title {
        max-width: 20ch;
    }
    #RTsbs-249 .cs-text,
    #RTsbsr-249 .cs-text,
    #RTsbst-249 .cs-text {
        margin-bottom: 1rem;
        opacity: 0.8;
    }
    #RTsbs-249 .cs-text:last-of-type,
    #RTsbsr-249 .cs-text:last-of-type,
    #RTsbst-249 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #RTsbs-249 .cs-button-solid,
    #RTsbsr-249 .cs-button-solid,
    #RTsbst-249 .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;
    }
    #RTsbs-249 .cs-button-solid:before,
    #RTsbsr-249 .cs-button-solid:before,
    #RTsbst-249 .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;
    }
    #RTsbs-249 .cs-button-solid:hover:before,
    #RTsbsr-249 .cs-button-solid:hover:before,
    #RTsbst-249 .cs-button-solid:hover:before {
        width: 100%;
    }
    #RTsbs-249 .cs-picture,
    #RTsbsr-249 .cs-picture,
    #RTsbst-249 .cs-picture {
        width: 100%;
        max-width: 27.125rem;
        margin: 0;
        border: 1px solid #f1f1f4;
        position: relative;
        display: block;
        /* width divided by height */
        aspect-ratio: 1;
        /* prevents border from adding to height and width */
        box-sizing: border-box;
    }
    #RTsbs-249 .cs-picture img,
    #RTsbsr-249 .cs-picture img,
    #RTsbst-249 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 105%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #RTsbs-249 .cs-container,
    #RTsbsr-249 .cs-container,
    #RTsbst-249 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    #RTsbs-249 .cs-lines,
    #RTsbsr-249 .cs-lines,
    #RTsbst-249 .cs-lines {
        height: 100%;
        width: 35%;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
    #RTsbs-249 .cs-lines:before,
    #RTsbsr-249 .cs-lines:before,
    #RTsbst-249 .cs-lines:before {
        /* Right Line */
        content: "";
        width: 1px;
        height: 100%;
        background: -moz-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* FF3.6-15 */
        background: -webkit-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* Chrome10-25,Safari5.1-6 */
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        /* flips vertically */
        transform: scaleY(-1);
    }
    #RTsbs-249 .cs-lines:after,
    #RTsbsr-249 .cs-lines:after,
    #RTsbst-249 .cs-lines:after {
        /* Right Line */
        content: "";
        width: 1px;
        height: 100%;
        background: -moz-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* FF3.6-15 */
        background: -webkit-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* Chrome10-25,Safari5.1-6 */
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        /* flips vertically */
        transform: scaleY(-1);
    }
    #RTsbs-249 .cs-picture,
    #RTsbsr-249 .cs-picture,
    #RTsbst-249 .cs-picture {
        /* 344px - 434px */
        width: clamp(21.5rem, 37.5vw, 27.125rem);
        flex: none;
    }
    #RTsbs-249 .cs-content,
    #RTsbsr-249 .cs-content,
    #RTsbst-249 .cs-content {
        max-width: 33.875rem;
        margin: 0;
        width: 45%;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #RTsbs-249 .cs-title,
    body.dark-mode #RTsbs-249 .cs-text,
    body.dark-mode #RTsbsr-249 .cs-title,
    body.dark-mode #RTsbsr-249 .cs-text,
    body.dark-mode #RTsbst-249 .cs-title,
    body.dark-mode #RTsbst-249 .cs-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #RTsbs-249 .cs-text,
    body.dark-mode #RTsbsr-249 .cs-text,
    body.dark-mode #RTsbst-249 .cs-text {
        opacity: 0.8;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0em) {
    #RTsbsr-249 {
        padding: 0 1rem;
    }
    #RTsbsr-249 .cs-container {
        /* 60px - 100px top and bottom */
        padding: clamp(3.75rem, 7.82vw, 6.25rem) 0;
    }
    #RTsbsr-249 .cs-container:before {
        /* Left Line */
        content: "";
        width: 1px;
        height: 100%;
        background: linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        background: -webkit-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* Chrome10-25,Safari5.1-6 */
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
    }
    #RTsbsr-249 .cs-container:after {
        /* Right Line */
        content: "";
        width: 1px;
        height: 100%;
        background: -moz-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* FF3.6-15 */
        background: -webkit-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* Chrome10-25,Safari5.1-6 */
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        /* flips vertically */
        transform: scaleY(-1);
    }
    #RTsbsr-249 .cs-lines {
        display: none;
    }
    #RTsbsr-249 .cs-background {
        /* Background Image */
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
    }
    #RTsbsr-249 .cs-background:before {
        /* Black Color Overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.6;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
        /* prevents the cursor from interacting with it */
        pointer-events: none;
    }
    #RTsbsr-249 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes image act like a background-image */
        object-fit: cover;
    }
    #RTsbsr-249 .cs-topper {
        color: var(--primaryLight);
    }
    #RTsbsr-249 .cs-title {
        color: var(--bodyTextColorWhite);
    }
    #RTsbsr-249 .cs-text {
        color: var(--bodyTextColorWhite);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
    #RTsbsr-249 .cs-lines {
        height: 100%;
        width: 35%;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
    #RTsbsr-249 .cs-lines:before {
        /* Right Line */
        content: "";
        width: 1px;
        height: 100%;
        background: -moz-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* FF3.6-15 */
        background: -webkit-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* Chrome10-25,Safari5.1-6 */
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        /* flips vertically */
        transform: scaleY(-1);
    }
    #RTsbsr-249 .cs-lines:after {
        /* Right Line */
        content: "";
        width: 1px;
        height: 100%;
        background: -moz-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* FF3.6-15 */
        background: -webkit-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* Chrome10-25,Safari5.1-6 */
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        /* flips vertically */
        transform: scaleY(-1);
    }
    #RTsbsr-249 .cs-picture {
        margin: 0;
        order: 2;
    }
}
/* Desktop - 1500px (Parallax Effect) */
@media only screen and (min-width: 93.75em) {
    #RTsbsr-249 {
        background: url("media/portfolio/pexels-david-martin-jr-291182065-13185339-size.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* creates the parallax effect */
        background-attachment: fixed;
    }
    #RTsbsr-249 .cs-background img {
        display: none;
    }
}

/*-- -------------------------- -->
<---      Pricing   FAQ         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0em) {
    #faq-254 {
        padding: var(--sectionPadding);
        background: #fafbfc;
    }
    #faq-254 .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);
    }
    #faq-254 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #faq-254 .cs-faq-group {
        padding: 0;
        margin: 0;
        margin-bottom: 3rem;
    }
    #faq-254 .cs-faq-item {
        list-style: none;
        border-bottom: 1px solid #dad9e3;
        transition: border-bottom 0.3s;
    }
    #faq-254 .cs-faq-item.active {
        border-bottom: 1px solid var(--primary);
    }
    #faq-254 .cs-faq-item.active .cs-button:before {
        transform: rotate(180deg);
    }
    #faq-254 .cs-faq-item.active .cs-button:after {
        opacity: 0;
        transform: rotate(360deg);
    }
    #faq-254 .cs-faq-item.active .cs-item-p {
        height: auto;
        /* 12px - 16px */
        margin-bottom: clamp(0.75rem, 1.3vw, 1rem);
        opacity: 1;
    }
    #faq-254 .cs-button {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.2em;
        text-align: left;
        font-weight: bold;
        /* 12px - 16px */
        padding: clamp(0.75rem, 1.3vw, 1rem) 0;
        background: transparent;
        border: none;
        color: var(--headerColor);
        display: block;
        width: 100%;
        position: relative;
    }
    #faq-254 .cs-button:hover {
        cursor: pointer;
    }
    #faq-254 .cs-button:before {
        /* plus sign */
        content: "";
        width: 0.75rem;
        height: 0.125rem;
        background: var(--headerColor);
        opacity: 1;
        position: absolute;
        display: block;
        top: 50%;
        right: 0.25rem;
        transition: transform 0.3s;
    }
    #faq-254 .cs-button:after {
        /* plus sign */
        content: "";
        width: 0.75rem;
        height: 0.125rem;
        background: var(--headerColor);
        opacity: 1;
        position: absolute;
        display: block;
        top: 50%;
        right: 0.25rem;
        transform: rotate(90deg);
        transform-origin: center;
        transition:
            opacity 0.5s,
            transform 0.3s;
    }
    #faq-254 .cs-item-p {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        width: 90%;
        height: 0;
        margin: 0;
        opacity: 0;
        color: var(--bodyTextColor);
        /* clips the text so it doesn't show up */
        overflow: hidden;
        transition:
            opacity 0.3s,
            margin-bottom 0.3s;
    }
    #faq-254 .cs-cta {
        text-align: center;
        /* 48px - 64px top & bottom */
        /* 40px - 56px left & right */
        padding: clamp(3rem, 4.9vw, 4rem) clamp(2.5rem, 4vw, 3.5rem);
        background: #9ca4b300;
        border-radius: 1rem;
        /* prevents padding from adding to width and height */
        box-sizing: border-box;
    }
    #faq-254 .cs-h3 {
        /* 25px - 31px */
        font-size: clamp(1.5625rem, 3vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: bold;
        text-align: center;
        margin: 0;
        margin-bottom: 1rem;
        color: var(--headerColor);
    }
    #faq-254 .cs-cta-p {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        text-align: center;
        line-height: 1.5em;
        margin: 0;
        /* 32px - 48px */
        margin-bottom: clamp(2rem, 3.9vw, 3rem);
    }
    #faq-254 .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;
    }
    #faq-254 .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;
    }
    #faq-254 .cs-button-solid:hover:before {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
    #faq-254 .cs-container {
        max-width: 67.5rem;
    }
    #faq-254 .cs-flex-group {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        /* 16px - 48px */
        gap: clamp(1rem, 3.5vw, 3rem);
    }
    #faq-254 .cs-faq-group {
        margin: 0;
    }
    #faq-254 .cs-cta {
        width: 38.5%;
        max-width: 25.8125rem;
        /* prevents flexbox from squishing it */
        flex: none;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
    body.dark-mode #faq-254 {
        background-color: transparent;
    }
    body.dark-mode #faq-254 .cs-topper {
        color: var(--primaryLight);
    }
    body.dark-mode #faq-254 .cs-title,
    body.dark-mode #faq-254 .cs-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-254 .cs-button {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-254 .cs-button:before,
    body.dark-mode #faq-254 .cs-button:after {
        background: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-254 .cs-h3,
    body.dark-mode #faq-254 .cs-item-p {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-254 .cs-cta {
        background: var(--medium);
    }
}


/*-- -------------------------- -->
<---      Services main - services.html         -->
<--- -------------------------- -*/

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

    #services-341 .cs-card-group {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 1.6vw, 1.25rem);
    }
    #services-341 .cs-item {
        list-style: none;
        width: 100%;
        max-width: 31.25rem;
        border-radius: 0.5rem;
        position: relative;
        z-index: 1;
        transition:
            box-shadow 0.3s,
            transform 0.3s;
    }
    #services-341 .cs-item:hover {
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        transform: translateY(-0.4375rem);
    }
    #services-341 .cs-item:hover .cs-picture img {
        opacity: 0.3;
        transform: scale(1.1);
    }
    #services-341 .cs-item:hover .cs-h3 {
        color: var(--primaryLight);
    }
    #services-341 .cs-item:before {
        /* border, done in pseudo so it can sit under the picture */
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        border: 1px solid #e8e8e8;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        background: transparent;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #services-341 .cs-link {
        text-decoration: none;
        /* 16px - 24px */
        padding-bottom: clamp(1rem, 2.2vw, 1.5rem);
        display: block;
    }
    #services-341 .cs-picture {
        width: 100%;
        height: 15rem;
        /* 16px - 24px */
        margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
        border-radius: 0.5rem 0.5rem 0 0;
        background-color: var(--primaryLight);
        /* clips the img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 10;
    }
    #services-341 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition:
            transform 0.6s,
            opacity 0.3s;
    }
    #services-341 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 3vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        color: var(--headerColor);
        margin: 0 0 0.75rem 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2vw, 1.5rem);
        transition: color 0.3s;
    }
    #services-341 .cs-item-text {
        /* 14px - 16px  */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        color: var(--bodyTextColor);
        margin: 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2.2vw, 1.5rem);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-341 .cs-card-group {
        flex-direction: row;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #services-341 .cs-topper {
        color: var(--primaryLight);
    }
    body.dark-mode #services-341 .cs-title,
    body.dark-mode #services-341 .cs-text,
    body.dark-mode #services-341 .cs-h3,
    body.dark-mode #services-341 .cs-item-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-341 .cs-item:before {
        opacity: 0.3;
    }
}

/*-- -------------------------- -->
<---       Steps  - services.html          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-1675 {
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
  }
  #steps-1675 .cs-container {
    width: 100%;
    /* changes to 1920px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-1675 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #steps-1675 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    max-width: 32.625rem;
  }
  #steps-1675 .cs-card-group {
    margin: 0;
    padding: 0;
    display: grid;
    justify-items: center;
    align-items: stretch;
    grid-auto-flow: row;
  }
  #steps-1675 .cs-item {
    list-style: none;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    /* bottom border */
  }
  #steps-1675 .cs-item::after {
    content: "";
    width: 100%;
    height: 1px;
    /* to change the color of the bottom border, adjust the second color (at 50%). the first and third will blend the color to transparent */
    /* note you'll also have to change the color in the tablet media query when the lines go vertical */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #bababa 50%, rgba(255, 255, 255, 0) 100%);
    opacity: .6;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #steps-1675 .cs-item:first-of-type {
    padding-top: 0;
  }
  #steps-1675 .cs-item:last-of-type {
    padding-bottom: 0;
  }
  #steps-1675 .cs-item:last-of-type::after {
    content: none;
  }
  #steps-1675 .cs-number {
    /* 80px - 100px */
    font-size: clamp(5rem, 1vw, 6.25rem);
    font-weight: 900;
    line-height: 1.2em;
    color: var(--primary);
    opacity: 0.12;
    display: block;
  }
  #steps-1675 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: -1.9375rem 0 1rem 0;
    color: var(--headerColor);
  }
  #steps-1675 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-1675 .cs-container {
    max-width: 120rem;
  }
  #steps-1675 .cs-card-group {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  #steps-1675 .cs-item {
    /* 24px - 60px */
    padding: clamp(1.5rem, 3vw, 3.75rem);
    /* the specificity of the mobile .cs-item means we need to explicitly define the first and last items here, too */
  }
  #steps-1675 .cs-item::after {
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #bababa 50%, rgba(255, 255, 255, 0) 100%);
    opacity: .6;
    right: 0;
    left: initial;
  }
  #steps-1675 .cs-item:first-of-type,
  #steps-1675 .cs-item:last-of-type {
    /* 24px - 60px */
    padding: clamp(1.5rem, 3vw, 3.75rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps-1675 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #steps-1675 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-1675 .cs-item {
    border-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-1675 .cs-item:after {
    opacity: .2;
  }
  body.dark-mode #steps-1675 .cs-item-text,
  body.dark-mode #steps-1675 .cs-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #steps-1675 .cs-h3,
  body.dark-mode #steps-1675 .cs-number {
    color: var(--primaryLight);
  }
}
                              


/*-- -------------------------- -->
<---        Side By Side  Hero index      -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-83 {
        padding: var(--sectionPadding);
    }
    #sbs-83 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbs-83 .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-83 .cs-title {
        max-width: 20ch;
    }
    #sbs-83 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-83 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-83 .cs-card-group {
        width: 100%;
        max-width: 25rem;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: 0.75rem;
    }
    #sbs-83 .cs-item {
        list-style: none;
        width: 32%;
        max-width: 9.375rem;
        /* making flex so we can align a heading with 1 line to the bottom */
        display: flex;
        flex-direction: column;
        align-self: stretch;
        align-content: space-between;
        
    }
    #sbs-83 .cs-number {
        /* 39px - 49px */
        font-size: clamp(2.4375rem, 5vw, 3.0625rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: left;
        color: var(--primary);
        display: block;
        /* 8px - 16px */
        margin: 0 0 clamp(0.25rem, 0.5vw, 1rem);
    }
    #sbs-83 .cs-h3 {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.2em;
        text-align: left;
        /* auto margin top will push text to bottom if there's only one line */
        margin: auto 0 0;
        color: var(--headerColor);
    }
    #sbs-83 .cs-image-group {
        width: 100%;
        max-width: 33.875rem;
        /* pushes down by the same amount the images overlap the image group */
        margin: 0 0 2.5rem;
        display: flex;
        /* separate children to opposite sides of the room */
        justify-content: center;
        align-content: space-between;
        flex-wrap: wrap;
        gap: clamp(0.5rem, 2vw, 1.25rem);
    }
    #sbs-83 .cs-picture {
        width: 48%;
        /* 218px - 264px */
        min-height: clamp(13.625rem, 25vw, 16.5rem);
        aspect-ratio: 0.73394495;
        position: relative;
        display: block;
        border:1px solid #000000;
        border-radius: 5px;
    }
    #sbs-83 .cs-picture:nth-of-type(2) {
        /* move slightly down */
        transform: translateY(2.5rem);
    }
    #sbs-83 .cs-picture:nth-of-type(4) {
        /* move slightly up */
        transform: translateY(2.5rem);
    }
    #sbs-83 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes image act as a background image to the picture element */
        object-fit: cover;
        border-radius: 5px;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbs-83 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        /* 44px - 108px */
        column-gap: clamp(2.75rem, calc(6.4vw), 6.75rem);
    }
    #sbs-83 .cs-card-group {
        max-width: 100%;
    }
    #sbs-83 .cs-image-group {
        /* 318px - 542px */
        width: clamp(19.875rem, 46.9vw, 33.875rem);
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #sbs-83 .cs-picture {
        width: 47.8%;
        aspect-ratio: initial;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #sbs-83 .cs-title,
    body.dark-mode #sbs-83 .cs-text,
    body.dark-mode #sbs-83 .cs-h3 {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #sbs-83 .cs-text {
        opacity: 0.8;
    }
    body.dark-mode #sbs-83 .cs-h3 {
        color: var(--bodyTextColorWhite);
    }
}
#sbs-83 {
    margin-top: 10rem;
}

/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-893 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
#list-893 {
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    padding: 0;
    columns: 2;
}
#list-893 .cs-li {
    list-style: none;
    margin: 0 0 0.5rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
}
#list-893 .cs-li:before {
    /* accent shape */
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background: #bababa;
    border-radius: 0.25rem 0 0.25rem 0;
    display: block;
    /* prevents flexbox from squishing it */
    flex: none;
}
/* Dark Mode, copy and paste only the styles inside the #list-893 brackets into your section's dark mode media query */
body.dark-mode #list-893 .cs-li {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
}




/*-- -------------------------- -->
<---    terms of service and privacy policy   -->
<--- -------------------------- -*/

/*-- -------------------------- -->
<---    Side by Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-r-1892 {
    width: 100%;
    padding: var(--sectionPadding);
    background-color: #faf6f2;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }
  #sbs-r-1892 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 80px */
    gap: clamp(3rem, 6vw, 5rem);
  }
  #sbs-r-1892 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 3;
  }
  #sbs-r-1892 .cs-image-group {
    font-size: min(2.29vw, 0.9rem);
    width: 39.375em;
    height: 45.625em;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbs-r-1892 .cs-picture {
    width: 32.625em;
    height: 42.5em;
    box-sizing: border-box;
    background-color: #dab692;
    overflow: hidden;
    border: 8px solid #dab692;
    border-radius: 16.25rem;
    position: absolute;
    right: 0;
    z-index: -1;
  }
  #sbs-r-1892 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.7s;
  }
  #sbs-r-1892 .cs-graphic {
    height: auto;
    position: absolute;
  }
  #sbs-r-1892 .cs-brown {
    width: 15.125em;
    height: auto;
    top: 1.625em;
    left: 0.8125em;
    z-index: -2;
  }
  #sbs-r-1892 .cs-peach {
    width: 3.625em;
    height: auto;
    top: 0.375em;
    left: 6.8125em;
  }
  #sbs-r-1892 .cs-beige {
    width: 22em;
    height: auto;
    top: 4.4375em;
    left: 1em;
    z-index: -3;
  }
  #sbs-r-1892 .cs-leaf {
    width: 14.0625em;
    height: auto;
    bottom: 0;
    right: 1em;
    z-index: 1;
  }
  #sbs-r-1892 .cs-lines {
    width: 11em;
    height: auto;
    bottom: 0;
    right: 0;
  }
  #sbs-r-1892 .cs-info {
    width: 50%;
    max-width: 19.0625rem;
    padding: 6.25em 2.5em;
    background-color: var(--primary);
    border-radius: 14rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #sbs-r-1892 .cs-info-text {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 3.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.6em;
    text-align: center;
    max-width: 13.9375em;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #sbs-r-1892 .cs-bold {
    /* 16px - 24x */
    font-size: clamp(1rem, 3.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2em;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
    display: block;
  }
  #sbs-r-1892 .cs-text-large {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
  }
  #sbs-r-1892 .cs-text {
    margin-bottom: 0.75rem;
  }
  #sbs-r-1892 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-r-1892 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--secondary);
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #sbs-r-1892 .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-r-1892 .cs-button-solid:hover {
    color: #fff;
  }
  #sbs-r-1892 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-r-1892 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbs-r-1892 .cs-content {
    /* 48px - 64px */
    padding: clamp(3rem, 5vw, 4rem) 0;
  }
  #sbs-r-1892 .cs-image-group {
    font-size: min(1.27vw, 1rem);
    min-height: 45.625em;
    height: auto;
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbs-r-1892 .cs-picture {
    height: 93.150685%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-r-1892 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbs-r-1892 .cs-bold,
  body.dark-mode #sbs-r-1892 .cs-text-large,
  body.dark-mode #sbs-r-1892 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-r-1892 .cs-text,
  body.dark-mode #sbs-r-1892 .cs-info-text {
    opacity: 0.8;
  }
  body.dark-mode #sbs-r-1892 .cs-picture {
    border-color: var(--accent);
  }
  body.dark-mode #sbs-r-1892 .cs-info {
    background-color: var(--medium);
  }
  body.dark-mode #sbs-r-1892 .cs-graphic {
    opacity: 0.6;
  }
  body.dark-mode #sbs-r-1892 .cs-text-large {
    color: var(--bodyTextColorWhite);
  }
}

                                

                                         
                                
                                
                                

                     










/* Modifications that need to be ad bottom */
/* Modifications that need to be ad bottom */
/* Modifications that need to be ad bottom */

/* 1. Fix the size and position */
.logo-link {
    display: inline-block !important;
    width: 200px !important; /* Adjust this to change logo size */
    height: auto;
    text-decoration: none;
}
.main-logo {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
/* 2. KILL THE FILTERS (The reason it's white in light mode) */
/* We target the link and the image to force them to show original colors */
.logo-link, 
.logo-link img, 
.main-logo {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}
/* 3. Handling the manual "dark-mode" button toggle */
/* If your button adds 'dark-mode' to the body, we need this override 
   because the <picture> tag only listens to the system, not your button. */
body.dark-mode .logo-link img {
    /* This forces the browser to show the white version when the button is clicked */
    content: url("media/logow.svg") !important;
}
body:not(.dark-mode) .logo-link img {
    /* This forces the black version when the button is NOT clicked */
    content: url("media/logob.svg") !important;
}         
/* Force visibility on mobile devices */
@media only screen and (max-width: 1023px) {
    .logo-link {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 150px !important; /* Slightly smaller for mobile phones */
        height: auto !important;
        z-index: 1000; /* Ensures it sits on top of the nav background */
    }
    .logo-link img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
}