/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-page-714 {
        padding: var(--sectionPadding);
        background-color: #fff;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #content-page-714 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
    }
    #content-page-714 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 46.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #content-page-714 .cs-content img {
        width: 100%;
        height: auto;
        margin: 1rem 0;
        display: block;
    }
    #content-page-714 .cs-title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #content-page-714 h2,
    #content-page-714 h3,
    #content-page-714 h4,
    #content-page-714 h5,
    #content-page-714 h6 {
        font-weight: 700;
        text-align: inherit;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
    }
    #content-page-714 h2 {
        font-size: 2rem;
        margin-top: 2rem;
    }
    #content-page-714 h3 {
        font-size: 1.5rem;
        color: var(--primary);
    }
    #content-page-714 h4,
    #content-page-714 h5,
    #content-page-714 h6 {
        font-size: 1.25rem;
    }
    #content-page-714 .cs-button-solid {
        margin-bottom: 2rem;
    }
    #content-page-714 .cs-color {
        color: var(--primary);
    }
    #content-page-714 p {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: 0 0 1rem 0;
        color: var(--bodyTextColor);
    }
    #content-page-714 p:last-of-type {
        margin-bottom: 2rem;
    }
    #content-page-714 p a {
        font-size: inherit;
        line-height: inherit;
        text-decoration: underline;
        color: var(--primary);
    }
    #content-page-714 ol,
    #content-page-714 ul {
        padding-left: 1.5rem;
        margin: 0 0 2rem 0;
        color: var(--bodyTextColor);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #content-page-714 ul li {
        list-style: none;
        color: inherit;
        position: relative;
    }
    #content-page-714 ul li:before {
        /* custom list bullet */
        content: "";
        width: 3px;
        height: 3px;
        background: currentColor;
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 0.625rem;
        left: -0.75rem;
    }
    #content-page-714 .cs-image-group {
        /* scales the whole section down and ties the font size to the vw and stops at 70% of the vale of 1em, changes at desktop */
        font-size: min(1vw, 1em);
        /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
        width: 33.875em;
        height: 48.3125em;
        display: none;
        /* prevents flexbox from squishing it */
        flex: none;
        position: relative;
        z-index: 1;
    }
    #content-page-714 .cs-picture {
        width: 33.875em;
        height: 40.4375em;
        border-radius: 17.8125em;
        border: 0.75em solid #ffffff;
        background-color: #f7f7f7;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        /* clips img tag corners */
        overflow: hidden;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    #content-page-714 .cs-picture img {
        width: 100%;
        height: 100%;
        /* makes it act like a background image */
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    #content-page-714 .cs-flower {
        width: 22.625em;
        height: auto;
        display: block;
        position: absolute;
        bottom: -2.375em;
        right: -3em;
        z-index: -1;
        transform: rotate(142deg);
    }
    #content-page-714 .cs-sense {
        width: 5em;
        height: auto;
        position: absolute;
        top: -0.25em;
        left: 0.625em;
        transform: rotate(90deg);
    }
    #content-page-714 .cs-background {
        display: none;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-page-714 .cs-container {
        flex-direction: row;
        align-items: flex-start;
    }
    #content-page-714 .cs-image-group {
        display: block;
        /* sends it to the left in the 1st position */
        order: -1;
    }
    #content-page-714 .cs-content {
        margin-left: auto;
    }
    #content-page-714 .cs-background {
        width: 20%;
        height: 100%;
        background-color: #f7f7f7;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }
    #content-page-714 .cs-background img {
        width: 100%;
        height: 100%;
        opacity: 0.2;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
}
/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
    #content-page-714 .cs-image-group {
        /* position absolute so we can have it overflow the container as seen in the design. */
        font-size: inherit;
        position: absolute;
        top: 0rem;
        left: -6.25rem;
    }
    #content-page-714 .cs-background {
        width: 50%;
        /* with the left edge always positioned at the center line, we push right of the center line by 335px.  This ensures that this element will stay exactly in this position no matter hoe wide the screen gets */
        margin-right: 20.9375rem;
        left: auto;
        /* sets the right edge of the element to be at the center line */
        right: 50%;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #quote-560 {
        padding: var(--sectionPadding);
        background-color: var(--primary);
    }
    #quote-560 .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-560 .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-560 .cs-topper:before {
        /* yellow line */
        content: "";
        width: 3.125rem;
        height: 2px;
        background: var(--secondary);
        opacity: 1;
        display: block;
    }
    #quote-560 .cs-quote {
        /* 31px - 49px */
        font-size: clamp(1.9375rem, 5.1vw, 3.0625rem);
        line-height: 1.2em;
        font-weight: 900;
        margin: 0;
        color: var(--bodyTextColorWhite);
    }
    #quote-560 .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;
    }
}
/*-- -------------------------- -->
<---          Success Photos    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1081 {
        padding: var(--sectionPadding);
        background-color: #f7f7f7;
    }
    #services-1081 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-1081 .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-1081 .cs-title {
        max-width: 20ch;
    }
    #services-1081 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        align-items: stretch;
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #services-1081 .cs-item {
        text-align: left;
        list-style: none;
        width: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        grid-column: span 12;
        position: relative;
        z-index: 1;
    }

    #services-1081 .cs-picture {
        width: 100%;
        /* 180px - 240px */
        height: clamp(11.25rem, 24vw, 15rem);
        /* clips the image from overflowing parent on hover */
        overflow: hidden;
        display: block;
        position: relative;
    }
    #services-1081 .cs-picture:before {
        /* black hover overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #2A3A85;
        opacity: 0;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        transition: opacity 0.3s;
    }
    #services-1081 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        transition: transform 0.65s;
    }
    #services-1081 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
        line-height: 1.5em;
        font-weight: 700;
        text-align: inherit;
        width: 100%;
        margin: 0;
        /* 12px - 16px top & Bottom */
        /* 16px - 24px left & right */
        padding: clamp(0.75rem, 1.6vw, 1rem) clamp(1rem, 2.5vw, 1.5rem);
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: #2A3A85;
        color: var(--bodyTextColorWhite);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* 8px - 16px */
        gap: clamp(0.5rem, 1vw, 1rem);
        transition: background-color 0.3s;
    }
    #services-1081 .cs-item-text {
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: 0 0 1.25rem;
        /* 16px - 24px */
        padding: clamp(1rem, 2.5vw, 1.25rem);
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        padding-bottom: 0;
        color: var(--bodyTextColor);
    }
    
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-1081 .cs-container {
        max-width: 80rem;
    }
    #services-1081 .cs-item {
        grid-column: span 4;
    }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

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

    #services-564 .cs-topper {
        color: var(--headerColor);
    }
    #services-564 .cs-text {
        margin-bottom: 1rem;
    }
    #services-564 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #services-564 .cs-color {
        color: var(--primary);
    }
    #services-564 .cs-h3 {
        /* 25px - 31px */
        font-size: clamp(1.5625rem, 3vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: inherit;
        /* 16px - 20px */
        margin: 0 0 clamp(1rem, 1.9vw, 1.25rem) 0;
        color: var(--headerColor);
    }
    #services-564 .cs-ul {
        width: 100%;
        margin: 0 0 2rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* 16px - 24px */
        gap: clamp(1rem, 2.5vw, 1.5rem);
    }
    #services-564 .cs-li {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        font-weight: 700;
        list-style: none;
        line-height: 1.5em;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        /* push icon top the top so if the list item goes to two lines the icon stays at the top */
        align-items: flex-start;
        gap: 1.25rem;
    }
    #services-564 .cs-icon {
        /* adds extra space between the icon and top of parent so it's more centered */
        margin-top: clamp(0.125rem, 0.47vw, 0.4375rem);
    }
    #services-564 .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: #000;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--secondary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #services-564 .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-564 .cs-button-solid:hover:before {
        width: 100%;
    }
    #services-564 .cs-picture {
        /* changes at tablet */
        width: 100%;
        max-width: 39.375rem;
        /* changes to a clamp at tablet */
        height: 24.75rem;
        display: block;
        position: relative;
    }
    #services-564 .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) {
    #services-564 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #services-564 .cs-picture {
        width: 46vw;
        /* 415px - 528px */
        height: clamp(25.9375rem, 50vw, 33rem);
    }
    #services-564 .cs-content {
        width: 45%;
        max-width: 32.5rem;
    }
}
/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-1165 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 */
@media only screen and (min-width: 0rem) {
    #list-1165 {
        max-width: 39.375rem;
        margin: 0 0 2rem 0;
        padding: 0;
        /* clips the bullets to create the half circle */
        overflow: hidden;
    }
    #list-1165 .cs-li {
        list-style: none;
        margin: 0 0 0.5rem 0;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.75rem;
        position: relative;
    }
    #list-1165 .cs-li:before {
        /* bullet */
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        margin-top: 0.5rem;
        background: var(--secondary);
        display: block;
        /* prevents flexbox from squishing it */
        flex: none;
    }
}