@media only screen and (min-width: 0rem) {
    #service-hero{
        z-index: 1;
        position: relative;
        background-image: url("../images/landing-m.jpeg");
        /*background-attachment: fixed;*/
        background-position: center;
        background-size: cover;
        overflow: hidden;
        /* changes on tablet */
        padding: 0 1rem;
        padding-bottom: 4.25rem;
    }

    #service-hero:before {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        opacity: 0.7;
        display: block;
        background: #000;
        height: 100%;
        width: 100%;
    }


    .hero-container{
        /*width: 100%;*/
        /*height: 100vh;*/
        /*align-items: center;*/
        /*position: relative;*/
        /*padding-top: 3.125rem;*/
        /*display: block;*/
        z-index: 2;
        position: relative;
        margin: auto;
        max-width: 80em;
        width: 100%;
        /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
        /* 144px - 280px - leaving extra space for the navigation */
        /* changes on tablet */
        padding: clamp(9em, 25.95vw, 17.5em) 0;
    }

    .hero-container:before {
        position: absolute;
        top: 0;
        left: 0;
        /* Left Line */
        content: "";
        opacity: 1;
        display: block;
        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 */
        height: 100%;
        width: 1px;
    }

    .hero-container h1{
        position: relative;
        margin: 0 auto;
        /*margin-top: 30vh;*/
        margin-bottom: 1.875rem;
        max-width: 62.5rem;
        width: 96%;
        color: var(--bodyTextColorWhite);
        text-align: center;
        font-size: 3.3333rem;
        letter-spacing: .35rem;
    }

    .hero-container p {
        display: block;
        margin: auto;
        margin-bottom: 1.875rem;
        max-width: 31.25rem;
        width: 96%;
        color: var(--bodyTextColorWhite);
        text-align: center;
        /*font-size: clamp(1rem, 1.5rem, 2.3rem);*/
    }

    .sj-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /*padding: 3.125rem;*/
    }

    #service-crosshead{
        background-color: var(--primaryDark);
    }

    #service-crosshead .sj-container{
        padding: 3.125rem;
    }

    .section-title{
        font-size: 3rem;
        color: var(--bodyTextColorWhite);
        width: 100%;
        text-align: center;
        padding-top: 1em;
    }

    .subtitle {
        color: var(--bodyTextColorWhite);
        font-size: 2.0rem;
    }

    #service-types{
        background-color: var(--primaryDark);
        height: 100%;
        padding-bottom: 3.125rem;
    }

    .service-offer{
        max-width: 82.5em;
        width: 80%;
        padding: 3.125em 1.25em;
        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05);
        margin: auto;
        margin-bottom: 3.125rem;
        border: 4px var(--secondaryLight) solid;
        background-color: var(--secondary);
    }

    .service-offer .subtitle{
        border-bottom: 1px solid var(--bodyTextColorWhite);
        padding-bottom: 0.625rem;
        margin-bottom: 0.625rem;
    }

    .offer-details {
    }

    .offer-details p{
        font-size: 1.333rem;
        line-height: 1.6;
        color: var(--bodyTextColorWhite);
    }

    .small-title-case {
        text-transform: uppercase;
        letter-spacing: 0.15rem;
        font-weight: bold;
    }

    .offer-actions{
        text-align: center;
    }
    .offer-actions a{
        margin-bottom: 0.625rem;
        margin-right: 0.625rem;
    }

    .cs-topper{
        color: var(--secondaryLight);
    }

    .cs-title {
        color: var(--bodyTextColorWhite);
    }

    .cs-text{
        color: var(--primaryDark);
        /*text-indent: 2.5rem;*/

        /*font-size: 1.5rem;*/
    }

    #first-bullet {
        margin-top: -1rem;
    }

    .bullet {
        text-indent: 2.5rem;
        color: var(--primaryDark);
    '
        /*border: 1px red solid;*/
    }

    .cs-button-solid {
        background-color: var(--secondaryLight);
        color: var(--primaryDark);
    }

    .card-container {
        /*z-index: 100;*/
        /*position: relative;*/
        border-top: 0.375em solid var(--primary);
        border-radius: 0.3125em;
        margin: auto;
        /*margin-top: calc(-267 / 16 * 1em);*/
        margin-bottom: 3.125em;
        /*background: var(--bodyTextColorWhite);*/
        max-width: 82.5em;
        width: 90%;
        padding: 3.125em 1.25em;
        /*box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05);*/
    }
    .card-container .card {
        display: block;
        margin: auto;
        margin-bottom: 3.125em;
        max-width: 22.3125em;
        width: 100%;
        background-color: var(--bodyTextColorWhite);
        padding: 1.25rem;
    }
    .card-container .card picture {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        margin: auto;
        margin-bottom: 1.4375em;
        background: var(--primary);
        height: 5.5em;
        width: 5.5em;
    }
    .card-container .card picture img {
        height: 3em;
        width: 3em;
        filter: invert(1)
    }
    .card-container .card h3 {
        margin-bottom: 0.65em;
        font-size: 2em;
        line-height: 1.35em;
        font-weight: 700;
        color: var(--primaryDark);
        text-align: center;
    }
    .card-container .card p {
        opacity: 0.7;
        width: 100%;
        line-height: 1.33333333em;
        text-align: center;
    }
    .card-container .card:last-of-type {
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 48rem){
   #service-hero{
       background-image: url("../images/landing.jpeg");
       background-attachment: fixed;
   }

    .offer-actions {
        text-align: right;
    }

    .cs-button-solid {
        background-color: var(--secondaryLight);
        color: var(--primaryDark);
        float: right;
    }

    .offer-actions a{
        margin-bottom: 0rem;
        margin-right: 0.625rem;
    }

    .card-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 98%;
        font-size: min(1.8vw, 1em);
    }
    .card-container .card {
        margin: 0;
        max-width: 20.3125em;
    }
}

@media only screen and (min-width: 64rem){
    #service-hero{
        background-image: url("../images/landing.jpeg");
        background-attachment: fixed;
    }

    .card-container {
        padding: 3.125em 5em;
    }
    .card-container .card {
        max-width: 22.3125em;
    }

}