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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-578 {
        .cs-container {
            width: 100%;
            max-width: 1280/16rem;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 7vw, 4rem);
        }

        .cs-content {
            /* set text aling to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: 522/16rem;
            /* 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;
        }

        .cs-text {
            /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
            margin-bottom: 16/16rem;
            &:last-of-type {
                margin-bottom: 32/16rem;
            }
        }

        .cs-picture {
            display: block;
            position: relative;
            width: 100%;
            height: 300/16rem;

            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);

        .cs-container {
            flex-direction: row;
            justify-content: flex-start;
            /* 60px - 128px */
            gap: clamp(3.75rem, 10vw, 8rem);
        }

        .cs-content {
            width: 53%;
            /* reset the padding, add the section padding back to the section container */
            padding: 0;
        }

        .cs-picture {
            width: 47vw;
            max-width: 494/16rem;
            /* 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;

            &:before {
                /* yellow box */
                content: '';
                width: 50%;
                height: 60%;
                background: var(--secondary);
                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)";
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-12 {
        padding: var(--sectionPadding);
        background-color: #f7f7f7;

        .cs-container {
            width: 100%;
            max-width: (1280/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .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;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 60/16rem;
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 100%;
            max-width: 360/16rem;
            margin: 0;
            padding: 0;
        }

        .cs-picture {
            /* 68px - 88px */
            width: clamp(4.25rem, 7vw, 5.5rem);
            height: clamp(4.25rem, 7vw, 5.5rem);
            margin: auto;
            margin-bottom: 32/16rem;
            border-radius: 50%;
            background-color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: auto;
                height: 42/16rem;
                display: block;
            }
        }

        .cs-h3 {
            font-size: 20/16rem;
            line-height: 1.2em;
            text-align: inherit;
            font-weight: 700;
            text-transform: uppercase;
            margin: 0;
            margin-bottom: 8/16rem;
            color: var(--headerColor);

        }

        .cs-item-text {
            font-size: 16/16rem;
            text-align: inherit;
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-12 {
        .cs-card-group {
            flex-direction: row;
            justify-content: space-between;
        }
    }
}   

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #why-choose-12 {
            background-color: rgba(0, 0, 0, .2);
            .cs-title, .cs-h3, .cs-item-text, .cs-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-picture {
                background: var(--primary);
            }
        }
    }
}
            
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cta-51 {
        padding: var(--sectionPadding);
        position: relative;

        .cs-container {
            width: 100%;
            max-width: (1280/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .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;
        }

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

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

        .cs-text {
            /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
            margin-bottom: 16/16rem;
            opacity: .8;
            &:last-of-type {
                margin-bottom: 32/16rem;
            }
        }

        .cs-picture {
            height: 100%;
            width: 100%;
            display: block;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            z-index: -1;

            &:before {
                /* black color overlay */
                content: '';
                position: absolute;
                display: block;
                height: 100%;
                width: 100%;
                background: #000;
                opacity: .8;
                top: 0;
                left: 0;
                z-index: 1;
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }
}