/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1168 {
        background-color: var(--tertiary);
        padding: var(--sectionPadding);
    }
    #services-1168 .cs-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        /* changes to 1440px at large desktop */
        max-width: calc(824 / 16 * 1rem);
        width: 100%;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-1168 .cs-content {
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
        width: 100%;
        /* set text align to left if content needs to be left aligned */
        text-align: center;
    }

    #services-1168 .cs-title {
        max-width: 20ch;
    }
    #services-1168 .cs-card-group {
        display: grid;
        align-items: stretch;
        grid-template-columns: repeat(12, 1fr);
        margin: 0;
        width: 100%;
        padding: 0;
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #services-1168 .cs-item {
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: #f7f7f7;
        width: 100%;
        list-style: none;
        text-align: left;
        grid-column: span 12;
    }
    #services-1168 .cs-item:hover .cs-picture img {
        transform: scale(1.2);
    }
    #services-1168 .cs-item:hover .cs-h3,
    #services-1168 .cs-item:hover .cs-link {
        color: var(--primary);
    }
    #services-1168 .cs-item:hover .cs-arrow {
        filter: initial;
    }
    #services-1168 .cs-picture {
        position: relative;
        display: block;
        /* 180px - 240px */
        height: clamp(11.25rem, 24vw, 15rem);
        width: 100%;
        /* clips the image from overflowing parent on hover */
        overflow: hidden;
    }
    #services-1168 .cs-picture img {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.65s;
    }
    #services-1168 .cs-info {
        display: flex;
        flex-direction: column;
        padding: calc(24 / 16 * 1rem);
    }
    #services-1168 .cs-h3 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
        line-height: 1.5em;
        font-weight: 700;
        color: var(--headerColor);
        transition: background-color 0.3s;
        text-align: inherit;
        margin: 0 0 calc(12 / 16 * 1rem) 0;
        transition: color 0.3s;
    }
    #services-1168 .cs-item-text {
        width: 100%;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        color: var(--bodyTextColor);
        text-align: inherit;
        margin: 0;
    }
    #services-1168 .cs-link {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-decoration: none;
        font-size: calc(16 / 16 * 1rem);
        line-height: 1.2em;
        font-weight: 700;
        color: var(--headerColor);
        text-align: inherit;
        margin-top: calc(20 / 16 * 1rem);
        transition: color 0.3s;
    }
    #services-1168 .cs-link:hover .cs-arrow {
        transform: translateX(0.25rem);
    }
    #services-1168 .cs-arrow {
        filter: grayscale(1) brightness(0);
        display: block;
        height: auto;
        width: calc(20 / 16 * 1rem);
        transition:
            filter 0.3s,
            transform 0.3s;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-1168 .cs-item {
        grid-column: span 6;
    }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-1168 .cs-container {
        max-width: calc(1440 / 16 * 1rem);
    }
    #services-1168 .cs-item {
        grid-column: span 3;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-578 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 7vw, 4rem);
    }
    #sbs-578 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        /* moved section padding to the .cs-content so we can have the cs-picture be full width on mobile without the padding preventing it from doing so */
        padding: var(--sectionPadding);
        padding-top: 0;
        /* prevents padding from affecting width and height */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbs-578 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-578 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-578 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 8vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: auto;
    color: var(--tertiary);
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s;
    }
    #sbs-578 .cs-button-solid:hover {
    background-color: var(--secondary);
    color: var(--primary);
    }
    #sbs-578 .cs-picture {
        display: block;
        position: relative;
        width: 100%;
        height: 18.75rem;
    }
    #sbs-578 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbs-578 {
        padding: var(--sectionPadding);
    }
    #sbs-578 .cs-container {
        flex-direction: row;
        justify-content: flex-start;
        /* 60px - 128px */
        gap: clamp(3.75rem, 10vw, 8rem);
    }
    #sbs-578 .cs-content {
        width: 53%;
        /* reset the padding, add the section padding back to the section container */
        padding: 0;
    }
    #sbs-578 .cs-picture {
        width: 47vw;
        max-width: 30.875rem;
        /* 518px - 700px */
        height: clamp(32.375rem, 63vw, 43.75rem);
        /* 16px - 28px, added margin left and bottom to cs-picture so it pushes away by the same amount the yellow box element overlaps it left and bottom. This maintains consistent spacing left and bottom */
        margin: 0 0 clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem);
        position: relative;
    }
    #sbs-578 .cs-picture:before {
        /* yellow box */
        content: "";
        width: 50%;
        height: 60%;
        background: var(--primary);
        opacity: 1;
        display: block;
        position: absolute;
        /* 16px - 28px, wrapped in calc function to multiple by negative 1 and get a negative clamp value */
        bottom: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
        left: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-250 {
        /* set padding top to 0 if the section above it is another white background section, same for padding bottom. We added the padding here in case this section gets placed above or below sections with full background colors.  Without this padding, the top of this sections color portion will be touching the neighboring section edge and it looks bad */
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        position: relative;
        z-index: 1;
    }
    #sbs-250 .cs-container {
        width: 100%;
        /* changes to 1280px on tablet */
        max-width: 34.375rem;
        padding: var(--sectionPadding);
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #sbs-250 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 27.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbs-250 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-250 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-250 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 8vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        margin: auto;
        color: var(--tertiary);
        padding: 0 1.5rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: background-color 0.3s;
    }
    #sbs-250 .cs-button-solid:hover {
        background-color: var(--secondary);
        color: var(--primary);
    }
    #sbs-250 .cs-picture {
        width: 100%;
        max-width: 32.625rem;
        margin: 0;
        border: 1px solid var(--primary);
        position: relative;
        display: block;
        /* width divided by height */
        aspect-ratio: 1;
        /* prevents border from adding to height and width */
        box-sizing: border-box;
    }
    #sbs-250 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbs-250 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    #sbs-250 .cs-picture {
        /* 415px - 522px */
        height: clamp(25.9375rem, 40.5vw, 32.625rem);
        width: 50%;
        flex: none;
    }
    #sbs-250 .cs-content {
        max-width: 33rem;
        margin: 0;
        width: 45%;
        order: -1;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-2402 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #stats-2402 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #stats-2402 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #stats-2402 .cs-item {
    list-style: none;
    text-align: left;
    /* 32px - 40px and 24 - 40px */
    padding: clamp(2rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem);
    grid-column: span 12;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  #stats-2402 .cs-item:before {
    /* pseudo element for border */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    border: 1px solid var(--primary);
    border-radius: 0.75rem;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #stats-2402 .cs-item:after {
    content: "";
    position: absolute;
    height: 2.5rem;
    width: 0.375rem;
    background-color: var(--primary);
    border-radius: 0 0.5rem 0.5rem 0;
    top: 2.1875rem;
    left: 0;
  }
  #stats-2402 .cs-number {
    font-size: 2.4375rem;
    line-height: 1.2em;
    font-weight: 900;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    display: block;
  }
  #stats-2402 .cs-small {
    font-size: 1.5625rem;
  }
  #stats-2402 .cs-header {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 900;
    margin-bottom: 0.25rem;
    color: var(--bodyTextColor);
  }
  #stats-2402 .cs-item-text {
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 700px */
@media only screen and (min-width: 700px) {
  #stats-2402 .cs-item {
    grid-column: span 6;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #stats-2402 .cs-item {
    grid-column: span 3;
  }
}
                                                                
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-2501 {
        /* set padding top to 0 if the section above it is another white background section, same for padding bottom. We added the padding here in case this section gets placed above or below sections with full background colors.  Without this padding, the top of this sections color portion will be touching the neighboring section edge and it looks bad */
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        position: relative;
        z-index: 1;
    }
    #sbs-2501 .cs-container {
        width: 100%;
        /* changes to 1280px on tablet */
        max-width: 34.375rem;
        padding: var(--sectionPadding);
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #sbs-2501 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 27.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbs-2501 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-2501 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-2501 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 8vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        margin: auto;
        color: var(--tertiary);
        padding: 0 1.5rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: background-color 0.3s;
    }
    #sbs-2501 .cs-button-solid:hover {
        background-color: var(--secondary);
        color: var(--primary);
    }
    #sbs-2501 .cs-picture {
        width: 100%;
        max-width: 32.625rem;
        margin: 0;
        border: 1px solid var(--primary);
        position: relative;
        display: block;
        /* width divided by height */
        aspect-ratio: 1;
        /* prevents border from adding to height and width */
        box-sizing: border-box;
    }
    #sbs-2501 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbs-2501 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    #sbs-2501 .cs-picture {
        /* 415px - 522px */
        height: clamp(25.9375rem, 40.5vw, 32.625rem);
        width: 50%;
        flex: none;
    }
    #sbs-2501 .cs-content {
        max-width: 33rem;
        margin: 0;
        width: 45%;
    }
}  

/*-- -------------------------- -->
<---       Why Choose Us        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1630 {
    padding: var(--sectionPadding);
  }
  #why-choose-1630 .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, 7vw, 4rem);
  }
  #why-choose-1630 .cs-flex {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #why-choose-1630 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 38rem;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-1630 .cs-text {
    margin-bottom: 1rem;
  }
  #why-choose-1630 .cs-text:last-of-type {
    margin-bottom: 0rem;
  }
  #why-choose-1630 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    max-width: 39.375rem;
    /* chnages to auto at tablet */
    height: 50vw;
    /* removed at tablet */
    max-height: 25rem;
    /* clips img tag corners */
    overflow: hidden;
    /* sends it to the 2nd posiiton in the bottom */
    order: 2;
  }
  #why-choose-1630 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #why-choose-1630 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 2rem);
    row-gap: 1.75rem;
  }
  #why-choose-1630 .cs-item {
    list-style: none;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #why-choose-1630 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.3s;
  }
  #why-choose-1630 .cs-wrapper {
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #why-choose-1630 .cs-h3-icon {
    width: 1.5rem;
    height: auto;
    margin-top: 2px;
    display: block;
  }
  #why-choose-1630 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s,
                opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1630 .cs-container {
    max-width: 80rem;
  }
  #why-choose-1630 .cs-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #why-choose-1630 .cs-content {
    width: 50%;
    /* 32px - 56px top and bottom */
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    /* sends it to the left in the 1st position */
    order: -1;
    align-self: center;
    flex: none;
  }
  #why-choose-1630 .cs-picture {
    width: 47vw;
    min-height: 25rem;
    max-height: 100%;
    height: auto;
    position: relative;
  }
  #why-choose-1630 .cs-item {
    grid-column: span 4;
  }
}