: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: #025373;
    -primaryLight: #f1f9ff;
    -secondary: #0077b6;
    -secondaryLight: #f1f9ff;
    -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: 3rem;
    /* 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-family: "PowerGrotesk";
    font-size: 50px;
    color: #025373;
    margin-bottom: 30px;
}

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


/*-- -------------------------- -->
<---      Section Side By Side Patho Home        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #section-patho-home-1485 {
    padding: var(--sectionPadding);
    overflow: hidden;
    background-color: #f1f9ff;
    position: relative;
    z-index: 1;
  }
  #section-patho-home-1485 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #section-patho-home-1485 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    /* changes to 433px at desktop */
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    padding: 30px;
  }
  #section-patho-home-1485 .cs-title {
    max-width: 30ch;
    padding: 20px;
  }
  #section-patho-home-1485 .cs-text {
    margin-bottom: 1rem;
  }
  #section-patho-home-1485 .cs-text:last-of-type {
    margin-bottom: 2rem;
    padding:20px;
  }
  #section-patho-home-1485 .cs-ul {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    /* 24px - 32px */
    gap: clamp(1.5rem, 3vw, 2rem);
  }
  #section-patho-home-1485 .cs-li {
    list-style: none;
    margin: 0;
    /* 24px - 32px */
    padding: 0 0 clamp(1.5rem, 3vw, 2rem);
    border-bottom: 1px solid #E8E8E8;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #section-patho-home-1485 .cs-li:last-of-type {
    padding: 0;
    border: none;
  }
  #section-patho-home-1485 .cs-li-picture {
    /* 60px - 80px */
    width: clamp(3.75rem, 6vw, 5rem);
    height: clamp(3.75rem, 6vw, 5rem);
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--primary);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  #section-patho-home-1485 .cs-li-picture:before {
    /* background color */
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: .1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #section-patho-home-1485 .cs-li-icon {
     /* 60px - 80px */
    width: clamp(3.75rem, 6vw, 5rem);
    height: auto;
    display: block;
  }
  #section-patho-home-1485 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
  }
  #section-patho-home-1485 .cs-li-text {
    font-size: 16px;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #section-patho-home-1485 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: #fff;
    padding: 0 3rem;
    border-radius: 1.875rem;
   background-color: #025373;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color .3s;
  }
  #section-patho-home-1485 .cs-button-solid:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    color: #000;
    background: #039fdb;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #section-patho-home-1485 .cs-button-solid:hover:before {
    width: 100%;
  }
  #section-patho-home-1485 .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(2.24vw, .9em);
    width: 40.6875em;
    height: 42.4375em;
    display: block;
    position: relative;
    z-index: 1;
  }
  #section-patho-home-1485 .cs-picture {
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
  }
  #section-patho-home-1485 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #section-patho-home-1485 .cs-picture1 {
    width: 40.4375em;
    height: 37.5em;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #section-patho-home-1485 .cs-picture2 {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: #fff;
    border: 0.625em solid #ffffff;
    bottom: 0;
    right: 0;
    z-index: 10;
  }
  #section-patho-home-1485 .cs-flower {
    width: 9.5625em;
    height: auto;
    position: absolute;
    top: 2.6875em;
    right: 0.75em;
    z-index: 1;
  }
  #section-patho-home-1485 .cs-squiggle {
    width: 25%;
    height: auto;
    position: absolute;
    bottom: 9.0625em;
    left: 3.125em;
  }
  #section-patho-home-1485 .cs-mask {
    width: 40.5625em;
    height: 37.625em;
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: -1;
  }
  #section-patho-home-1485 .cs-top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 120rem;
    width: 100%;
    height: auto;
  }
  #section-patho-home-1485 .cs-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 120rem;
    width: 100%;
    height: auto;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #section-patho-home-1485 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #section-patho-home-1485 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
  
  #section-patho-home-1485 .row {
    -bs-gutter-x: 100px;
    -bs-gutter-y: 0;
  }
}

/*-- -------------------------- -->
<---      Section Side By Side Patho Page    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #section-patho-page-502 {
        margin: var(--sectionPadding);
        margin-left: 0;
        margin-right: 0;
        padding: 0 1rem;
        /* prevents overflow from the slant shape */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #section-patho-page-502:before {
        /* section background */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #section-patho-page-502 .cs-container {
        width: 90%;
        max-width: 80rem;
        margin: auto;
        /* 60px - 80px top and bottom */
        padding: clamp(3.75em, 6.82vw, 5em) 0;
        /* maintains proportional margin top as screen size grows */
        margin-top: 56vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* 40px - 70px */
        gap: clamp(2.5rem, 5.7vw, 4.375rem);
        position: relative;
        /* places it on top of the cs-background */
        z-index: 10;
    }
    #section-patho-page-502 .cs-container:before {
        /* section slant on mobile */
        content: "";
        width: 62.5rem;
        height: 125rem;
        background: #f1f9ff;
        opacity: 1;
        position: absolute;
        z-index: -1;
        display: block;
        top: -28.75rem;
        /* these last two center it horizontally and rotate -65deg */
        left: 50%;
        transform: translateX(-50%) rotate(-65deg);
    }
    #section-patho-page-502 .cs-background {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    #section-patho-page-502 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #section-patho-page-502 .cs-content {
        width: 100%;
    }

    #section-patho-page-502 .cs-topper {
        color: var(--bodyTextColorWhite);
    }
    #section-patho-page-502 .cs-title {
        /* changes to 45% at tablet */
        width: 95%;
        max-width: 32.125rem;
    }
    #section-patho-page-502 .cs-card-group {
        width: 100%;
        max-width: 35.25rem;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 20px - 32px */
        gap: clamp(1.25rem, 3vw, 2rem);
    }
    #section-patho-page-502 .cs-item {
        list-style: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* 32px - 64px */
        gap: clamp(2rem, 5vw, 4rem);
    }
    #section-patho-page-502 .cs-icon {
        width: 3.75rem;
        height: auto;
        display: block;
    }
    #section-patho-page-502 .cs-h3 {
        /* 25px - 31px */
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 1.25rem 0;
        color: var(--bodyTextColorWhite);
    }
    #section-patho-page-502 .cs-item-text {
        /* 16px - 20px */
        font-size: clamp(1rem, 1rem, 1.25rem);
        line-height: 1.5em;
        text-align: left;
        margin: 0;
        color: var(--bodyTextColorWhite);
    }
    #section-patho-page-502 .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: #025373;
        border-radius: 1.875rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #section-patho-page-502 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        color: #000;
        background: #039fdb;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #section-patho-page-502 .cs-button-solid:hover:before {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #section-patho-page-502:before {
        /* remove the pseudo for the section background */
        display: none;
    }
    #section-patho-page-502 .cs-background {
        /* reset height to let top and bottom properties create the height */
        height: auto;
        aspect-ratio: initial;
        position: absolute;
        /* creates the gap between the image and the blue section */
        top: 3.75rem;
        bottom: 0;
    }
    #section-patho-page-502 .cs-background img {
        width: 60%;
        left: auto;
        right: 0;
        object-position: 80% top;
    }
    #section-patho-page-502 .cs-container {
        margin-top: 0;
    }
    #section-patho-page-502 .cs-container:before {
        /* make really tall so it always covers top to bottom, even when you add more list items */
        height: 250rem;
        /* make really really wide so it covers the left side at large scree sizes */
        width: 250rem;
        /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
        margin-right: -68.75rem;
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        top: 50%;
        left: auto;
        /* pushes the right edge of the element to the center line of the parent */
        right: 50%;
        transform: rotate(-35deg) translateY(-50%);
    }
    #section-patho-page-502 .cs-title {
        width: 45%;
    }
    #section-patho-page-502 .cs-card-group {
        width: 52%;
        /* 24px - 32px */
        padding-left: clamp(1.5rem, 3vw, 2rem);
        /* prevents padding from adding to width */
        box-sizing: border-box;
    }
    #section-patho-page-502 .cs-item {
        flex-direction: row;
    }
}