/* ----- LANDING PAGE  ----- */
: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: #357ac9;
    --primaryLight: #357ac2;
    --secondary: #37392e;
    --secondaryLight: #373923;
    --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;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

*, *: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);
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f9fafb;
    color: #111;
}

.container {
    max-width: 100% !important;
    width: 100%;
    padding: 0 !important;
    margin-top: 0px !important;
}

/* HERO */
.hero {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, #357ac9, #4a90e2);
    color: white;
}

.hero h1 {
    font-size: clamp(2rem, 6vw, 44px);
    margin-bottom: 15px;
    font-weight: 700;
    color: white;
}

.hero p {
    font-size: clamp(1rem, 3vw, 18px);
    max-width: 650px;
    margin: 0 auto 30px;
    opacity: 0.95;
}

/* BUTTONS */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    margin: 5px;
    font-weight: bold;
}

.btn-primary {
    background: white;
    color: #4a90e2;
}

.btn-primary:hover {
    background: #357ac9;
    color: black;
}

.btn-secondary {
    border: 1px solid #E8DBC5;
    color: #E8DBC5;
}

.btn-secondary:hover {
    border: 1px solid #171614;
    color: #171614;
}

/* SECTION */
.section {
    padding: 80px 20px;
    text-align: center;
    background: white;
}

.section:nth-child(even) {
    background: white;
}

.section h2 {
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: bold;
}

/* CARD GRID */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.card {
    background: white;
    padding: 24px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.icon {
    font-size: 30px;
    margin-bottom: 10px;
}

/* FOOTER */
.footer {
    background: #171614;
    text-align: center;
    padding: 60px 20px;
}

.trust {
    color: #171614;
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.85;
}
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #steps-284 {
        padding: var(--sectionPadding);
    }
    #steps-284 .cs-container {
        width: 100%;
        /* changes to 1104px on tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #steps-284 .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;
    }
    #steps-284 .cs-text {
        margin-bottom: 1rem;
    }
    #steps-284 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #steps-284 .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;
    }
    #steps-284 .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;
    }
    #steps-284 .cs-button-solid:hover:before {
        width: 100%;
    }
    #steps-284 .cs-right-section {
        margin: 0;
        padding: 0;
        max-width: 35.125rem;
        list-style: none;  /* already there */
        /* Add these to fight Milligram */
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    #steps-284 .cs-item {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 0 !important; /* Milligram adds margin to li */
    }
    #steps-284 .cs-item:nth-of-type(1) .cs-item-text:before {
        height: 50%;
        top: auto;
        bottom: -1px;
    }
    #steps-284 .cs-item:nth-of-type(2),
    #steps-284 .cs-item:nth-of-type(4) {
        justify-content: flex-end;
        text-align: right;
    }
    #steps-284 .cs-item:nth-of-type(2) .cs-number,
    #steps-284 .cs-item:nth-of-type(4) .cs-number {
        /* Send number to the right */
        order: 2;
        margin: 0;
        /* 15px - 24px */
        margin-left: clamp(0.9375rem, 3vw, 1.5rem);
    }
    #steps-284 .cs-item:nth-of-type(2) .cs-item-text,
    #steps-284 .cs-item:nth-of-type(4) .cs-item-text {
        /* reverse padding */
        padding-left: 0;
        /* 15px - 24px */
        padding-right: clamp(0.9375rem, 3vw, 1.5rem);
        /* reset the border on the :before */
    }
    #steps-284 .cs-item:nth-of-type(2) .cs-item-text:before,
    #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
        border-top: 1px solid var(--primary);
        border-left: none;
        border-right: 1px solid var(--primary);
        left: auto;
        right: 0;
        bottom: 0;
        border-radius: 0 0.5rem 0.5rem 0;
    }
    #steps-284 .cs-item:nth-of-type(2) .cs-item-text:after,
    #steps-284 .cs-item:nth-of-type(4) .cs-item-text:after {
        /* move dot to the right now */
        left: auto;
        right: -0.9375rem;
    }
    #steps-284 .cs-item:nth-of-type(3) .cs-item-text:before {
        height: auto;
        border-top: 1px solid var(--primary);
        border-radius: 0.5rem 0 0 0.5rem;
        top: 1px;
        bottom: 0px;
    }
    #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
        height: 50%;
        border-radius: 0 0.5rem 0 0;
        border-bottom: none;
        top: -1px;
    }
    #steps-284 .cs-number {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        font-weight: 700;
        /* 15px - 24px */
        margin-right: clamp(0.9375rem, 3vw, 1.5rem);
        /* 40px - 52px */
        width: clamp(2.5rem, 5.1vw, 3.25rem);
        height: clamp(2.5rem, 5.1vw, 3.25rem);
        border-radius: 50%;
        border: 2px solid var(--primary);
        color: var(--headerColor);
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents flexbox from squishing it */
        flex: none;
        position: relative;
    }
    #steps-284 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.6vw, 1rem);
        line-height: 1.5em;
        margin: 0;
        max-width: 18.75rem;
        /* 22px - 32px */
        padding: clamp(1.375rem, 3vw, 2rem) 0;
        box-sizing: content-box;
        /* 15px - 24px */
        padding-left: clamp(0.9375rem, 3vw, 1.5rem);
        position: relative;
    }
    #steps-284 .cs-item-text:before {
        /* Green line */
        content: "";
        width: 70%;
        height: 100%;
        border-radius: 0 0 0 0.5rem;
        border-left: 1px solid var(--primary);
        border-bottom: 1px solid var(--primary);
        box-sizing: content-box;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
    }
    #steps-284 .cs-item-text:after {
        /* list circle */
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        background: var(--primary);
        border-radius: 50%;
        border: 12px solid #fff;
        box-sizing: content-box;
        opacity: 1;
        position: absolute;
        display: block;
        top: 50%;
        left: -0.9375rem;
        transform: translateY(-50%);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-284 .cs-container {
        max-width: 69rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        column-gap: 2.75rem;
    }
    #steps-284 .cs-content {
        width: 50%;
        /* reset margin to play nice with flexbox */
        margin: 0;
    }
    #steps-284 .cs-right-section {
        width: 57%;
        /* 20px - 25px - this pulls the section up so it's flush with the top of the left section, the padding top on the .cs-item-text is creating a gap at the top of the section. Wrapped in a calc() function to turn clamp() value into a negative number */
        margin-top: calc(clamp(1.25rem, 2vw, 1.5625rem) * -1);
    }
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-690 {
        padding: var(--sectionPadding);
    }
    #services-690 .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-690 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #services-690 .cs-flex-group {
        /* prevents flexbox from squishing it */
        flex: none;
    }

    #services-690 .cs-color {
        color: var(--primary);
    }

    #services-690 .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-690 .cs-item {
        list-style: none;
        width: 100%;
        padding: clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
        background-color: #f7f8f8;
        box-sizing: border-box;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    }
    #services-690 .cs-link {
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #services-690 .cs-picture {
        width: 4rem;
        height: 4rem;
        margin: 0;
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0px 12px 30px rgba(26, 26, 26, 0.04);
        position: relative;
        z-index: 1;
    }
    #services-690 .cs-icon {
        height: 2rem;
        width: auto;
    }
    #services-690 .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-690 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        text-align: center;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-690 .cs-container {
        max-width: 80rem;
    }
    #services-690 .cs-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 3rem;
    }
    #services-690 .cs-flex-group {
        width: 50%;
    }
    #services-690 .cs-card-group {
        /* pushes down the same amount the 2nd cards are translated down to maintain the even spacing at the bottom of the cs-card-group */
        margin-bottom: 2.5rem;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 1.25rem;
    }
    #services-690 .cs-item {
        width: 100%;
        max-width: 25.8125rem;
    }
    #services-690 .cs-item:nth-of-type(2) {
        transform: translateY(2.5rem);
    }
}
/*-- -------------------------- -->
<---       Why Choose Us        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-682 {
        padding: var(--sectionPadding);
    }
    #why-choose-682 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #why-choose-682 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #why-choose-682 .cs-topper {
        font-size: var(--topperFontSize);
        line-height: 1.2em;
        text-transform: uppercase;
        text-align: inherit;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.25rem;
        display: block;
    }
    #why-choose-682 .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;
    }
    #why-choose-682 .cs-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #why-choose-682 .cs-color {
        color: var(--primary);
    }
    #why-choose-682 .cs-text {
        margin-bottom: 1rem;
    }
    #why-choose-682 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #why-choose-682 .cs-ul {
        width: 100%;
        margin: 0 0 2rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    #why-choose-682 .cs-li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #why-choose-682 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: var(--headerColor);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.75rem;
    }
    #why-choose-682 .cs-icon {
        width: 1.0625rem;
        height: auto;
        margin-top: 0.25rem;
    }
    #why-choose-682 .cs-item-text {
        font-size: 0.875rem;
        line-height: 1.5em;
        text-align: left;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #why-choose-682 .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;
    }
    #why-choose-682 .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;
    }
    #why-choose-682 .cs-button-solid:hover:before {
        width: 100%;
    }
    #why-choose-682 .cs-image-group {
        /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 75% of the value on em */
        font-size: min(2.3vw, 0.75em);
        width: 100%;
        max-width: 39.5em;
        height: auto;
        aspect-ratio: 39.5 / 51.25;
        position: relative;
        z-index: 1;
        /* flips it horizontally */
        transform: scaleX(-1);
    }
    #why-choose-682 .cs-picture {
        width: 19.125em;
        height: 22.5em;
        overflow: hidden;
        display: block;
        position: absolute;
    }
    #why-choose-682 .cs-picture img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        /* so the images are the original orientation, undoing the flip the cs-image-group is doing */
        transform: scaleX(-1);
    }
    #why-choose-682 .cs-picture1 {
        top: 5em;
        left: 0;
    }
    #why-choose-682 .cs-picture2 {
        top: 0;
        right: 0;
    }
    #why-choose-682 .cs-picture3 {
        bottom: 0;
        left: 0;
    }
    #why-choose-682 .cs-picture4 {
        bottom: 5em;
        right: 0;
    }
    #why-choose-682 .cs-graphic {
        display: none;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #why-choose-682 .cs-container {
        flex-direction: row;
        justify-content: space-between;
    }
    #why-choose-682 .cs-image-group {
        font-size: min(1.2vw, 1em);
        flex: none;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #why-choose-682 .cs-graphic {
        width: 61.4375em;
        height: auto;
        display: block;
        position: absolute;
        bottom: 10.3125em;
        right: -2em;
        z-index: -1;
    }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cta-697 {
        padding: var(--sectionPadding);
        background-color: var(--primary);
        position: relative;
        z-index: 1;
    }
    #cta-697 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #cta-697 .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;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #cta-697 .cs-title {
        color: var(--bodyTextColorWhite);
    }
    #cta-697 .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: var(--bodyTextColorWhite);
        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;
    }
    #cta-697 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #cta-697 .cs-button-solid:hover:before {
        width: 100%;
    }
    #cta-697 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        /* makes it act like a background image */
        object-fit: cover;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cta-697 .cs-content {
        text-align: left;
        flex-direction: row;
        justify-content: space-between;
    }
}

@media only screen and (max-width: 600px) {

    .hero {
        padding: 60px 16px;
    }

    .section {
        padding: 50px 16px;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        line-height: 1.2;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 300px;
    }

    #why-choose-682 .cs-image-group {
        width: 100%;
        max-width: 100%;
    }

}

/* ----- LANDING PAGE END ----- */