Code of Stitch

4 Card

<!-- ============================================ -->
<!--                  Services                    -->
<!-- ============================================ -->

<section id="services-296">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Our Services</span>
            <h2 class="cs-title">We Are Committed To Delivering Top Quality Legal Services</h2>
            <p class="cs-text">
                At Stitch Law, let us help you solve problems so that you can focus on your mission. We support businesses through periods of expansion, succession.
            </p>
        </div>
        <ul class="cs-card-group">
            <li class="cs-item">
                <a class="cs-link" href="">
                    <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fcase.svg" alt="icon" width="" height="" loading="lazy" decoding="async" aria-hidden="true">
                    <h3 class="cs-h3">99% winning guarantee</h3>
                    <p class="cs-item-text">
                        Full range of shipping disputes such as charter party disputes, demurrage claims, purchase agreements, trade finance, carriage and claims.
                    </p>
                </a>
                <picture class="cs-image"  aria-hidden="true">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg" alt="library" width="413" height="266">
                </picture>
            </li>
            <li class="cs-item">
                <a href="" class="cs-link">
                    <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fcase.svg" alt="icon" width="" height="" loading="lazy" decoding="async" aria-hidden="true">
                    <h3 class="cs-h3">Secure management</h3>
                    <p class="cs-item-text">
                        Full range of shipping disputes such as charter party disputes, demurrage claims, purchase agreements, trade finance, carriage and claims.
                    </p>
                </a>
                <picture class="cs-image"  aria-hidden="true">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg" alt="library" width="413" height="266">
                </picture>
            </li>
            <li class="cs-item">
                <a href="" class="cs-link">
                    <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fcase.svg" alt="icon" width="" height="" loading="lazy" decoding="async" aria-hidden="true">
                    <h3 class="cs-h3">Full time support</h3>
                    <p class="cs-item-text">
                        Full range of shipping disputes such as charter party disputes, demurrage claims, purchase agreements, trade finance, carriage and claims.
                    </p>
                </a>
                <picture class="cs-image"  aria-hidden="true">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg" alt="library" width="413" height="266">
                </picture>
            </li>
            <li class="cs-item">
                <a class="cs-link" href="">
                    <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fcase.svg" alt="icon" width="" height="" loading="lazy" decoding="async" aria-hidden="true">
                    <h3 class="cs-h3">Family Law</h3>
                    <p class="cs-item-text">
                        We’ve helped thousands of organizations transform to become relevant of helped thousands.
                    </p>
                </a>
                <picture class="cs-image">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/Services/library.jpg" alt="library" width="413" height="266" aria-hidden="true">
                </picture>
            </li>
        </ul>
    </div>
</section>

/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-296 {
        padding: var(--sectionPadding);
    }
    #services-296 .cs-container {
        width: 100%;
        /* changes to 1440px on desktop */
        max-width: 43.75rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-296 .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-296 .cs-title {
        max-width: 30ch;
    }
    #services-296 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #services-296 .cs-item {
        list-style: none;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 2rem;
        background-color: #f7f7f7;
        border-radius: 1rem;
        /* clips image corners */
        overflow: hidden;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        transition: background-color 0.3s;
    }
    #services-296 .cs-item:hover {
        cursor: pointer;
    }
    #services-296 .cs-item:hover .cs-image {
        opacity: 1;
    }
    #services-296 .cs-item:hover .cs-image img {
        transform: scale(1.1);
    }
    #services-296 .cs-item:hover .cs-icon {
        /* turns it white */
        filter: grayscale(1) brightness(1000%);
    }
    #services-296 .cs-item:hover .cs-h3,
    #services-296 .cs-item:hover .cs-item-text {
        color: #fff;
    }
    #services-296 .cs-image {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        z-index: -1;
        background-color: var(--primary);
        transition: opacity 0.3s;
    }
    #services-296 .cs-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0.4;
        object-fit: cover;
        transition: transform 0.6s;
    }
    #services-296 .cs-link {
        text-decoration: none;
    }
    #services-296 .cs-icon {
        width: auto;
        height: 3rem;
        margin-bottom: 1.5rem;
        display: block;
    }
    #services-296 .cs-icon path {
        transition: fill 0.3s;
    }
    #services-296 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        margin: 0;
        margin-bottom: 1rem;
        color: var(--headerColor);
        transition: color 0.3s;
        font-weight: bold;
    }
    #services-296 .cs-item-text {
        font-size: 1rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-296 .cs-card-group {
        justify-content: space-between;
        /* makes sure every box "stretches" to be the same height as the tallest box */
        align-items: stretch;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #services-296 .cs-item {
        width: 48.6%;
    }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-296 .cs-container {
        max-width: 90rem;
    }
    #services-296 .cs-card-group {
        justify-content: center;
    }
    #services-296 .cs-item {
        /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
        width: clamp(23.84%, 22.5vw, 23.95%);
    }
}

/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-296 {
        padding: var(--sectionPadding);
    }
    #services-296 .cs-container {
        width: 100%;
        /* changes to 1440px on desktop */
        max-width: 43.75rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-296 .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-296 .cs-title {
        max-width: 30ch;
    }
    #services-296 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #services-296 .cs-item {
        list-style: none;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 2rem;
        background-color: #f7f7f7;
        border-radius: 1rem;
        /* clips image corners */
        overflow: hidden;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        transition: background-color 0.3s;
    }
    #services-296 .cs-item:hover {
        cursor: pointer;
    }
    #services-296 .cs-item:hover .cs-image {
        opacity: 1;
    }
    #services-296 .cs-item:hover .cs-image img {
        transform: scale(1.1);
    }
    #services-296 .cs-item:hover .cs-icon {
        /* turns it white */
        filter: grayscale(1) brightness(1000%);
    }
    #services-296 .cs-item:hover .cs-h3,
    #services-296 .cs-item:hover .cs-item-text {
        color: #fff;
    }
    #services-296 .cs-image {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        z-index: -1;
        background-color: var(--primary);
        transition: opacity 0.3s;
    }
    #services-296 .cs-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0.4;
        object-fit: cover;
        transition: transform 0.6s;
    }
    #services-296 .cs-link {
        text-decoration: none;
    }
    #services-296 .cs-icon {
        width: auto;
        height: 3rem;
        margin-bottom: 1.5rem;
        display: block;
    }
    #services-296 .cs-icon path {
        transition: fill 0.3s;
    }
    #services-296 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        margin: 0;
        margin-bottom: 1rem;
        color: var(--headerColor);
        transition: color 0.3s;
        font-weight: bold;
    }
    #services-296 .cs-item-text {
        font-size: 1rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-296 .cs-card-group {
        justify-content: space-between;
        /* makes sure every box "stretches" to be the same height as the tallest box */
        align-items: stretch;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #services-296 .cs-item {
        width: 48.6%;
    }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-296 .cs-container {
        max-width: 90rem;
    }
    #services-296 .cs-card-group {
        justify-content: center;
    }
    #services-296 .cs-item {
        /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
        width: clamp(23.84%, 22.5vw, 23.95%);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #services-296 .cs-topper {
        color: var(--secondaryLight);
    }
    body.dark-mode #services-296 .cs-title,
    body.dark-mode #services-296 .cs-text,
    body.dark-mode #services-296 .cs-h3,
    body.dark-mode #services-296 .cs-item-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-296 .cs-item {
        background-color: var(--accent);
    }
    body.dark-mode #services-296 .cs-item:hover {
        background-color: var(--primary);
    }
    body.dark-mode #services-296 .cs-icon {
        /* turns it white */
        filter: grayscale(1) brightness(1000%);
    }
}

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

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

        .cs-container {
            width: 100%;
            /* changes to 1440px on desktop */
            max-width: (700/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-title {
            max-width: 30ch;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /* 16px - 20px */
            gap: clamp(1rem, 1.5vw, 1.25rem);
        }

        .cs-item {
            list-style: none;
            text-align: left;
            width: 100%;
            margin: 0;
            padding: (32/16rem);
            background-color: #f7f7f7;
            border-radius: (16/16rem);
            /* clips image corners */
            overflow: hidden;
            /* prevents padding from adding to height and width */
            box-sizing: border-box;
            position: relative;
            z-index: 1;
            transition: background-color 0.3s;
            &:hover {
                cursor: pointer;

                .cs-image {
                    opacity: 1;

                    img {
                        transform: scale(1.1);
                    }
                }

                .cs-icon {
                    /* turns it white */
                    filter: grayscale(1) brightness(1000%);
                }

                .cs-h3,
                .cs-item-text {
                    color: #fff;
                }
            }
        }

        .cs-image {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            z-index: -1;
            background-color: var(--primary);
            transition: opacity 0.3s;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                opacity: 0.4;
                object-fit: cover;
                transition: transform 0.6s;
            }
        }

        .cs-link {
            text-decoration: none;
        }

        .cs-icon {
            width: auto;
            height: (48/16rem);
            margin-bottom: (24/16rem);
            display: block;
            path {
                transition: fill 0.3s;
            }
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2vw, 1.5625rem);
            line-height: 1.2em;
            margin: 0;
            margin-bottom: (16/16rem);
            color: var(--headerColor);
            transition: color 0.3s;
            font-weight: bold;
        }

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

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-296 {
        .cs-card-group {
            justify-content: space-between;
            /* makes sure every box "stretches" to be the same height as the tallest box */
            align-items: stretch;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .cs-item {
            width: 48.6%;
        }
    }
}

/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-296 {
        .cs-container {
            max-width: (1440/16rem);
        }

        .cs-card-group {
            justify-content: center;
        }

        .cs-item {
            /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
            width: clamp(23.84%, 22.5vw, 23.95%);
        }
    }
}

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

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

        .cs-container {
            width: 100%;
            /* changes to 1440px on desktop */
            max-width: (700/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-title {
            max-width: 30ch;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /* 16px - 20px */
            gap: clamp(1rem, 1.5vw, 1.25rem);
        }

        .cs-item {
            list-style: none;
            text-align: left;
            width: 100%;
            margin: 0;
            padding: (32/16rem);
            background-color: #f7f7f7;
            border-radius: (16/16rem);
            /* clips image corners */
            overflow: hidden;
            /* prevents padding from adding to height and width */
            box-sizing: border-box;
            position: relative;
            z-index: 1;
            transition: background-color 0.3s;
            &:hover {
                cursor: pointer;

                .cs-image {
                    opacity: 1;

                    img {
                        transform: scale(1.1);
                    }
                }

                .cs-icon {
                    /* turns it white */
                    filter: grayscale(1) brightness(1000%);
                }

                .cs-h3,
                .cs-item-text {
                    color: #fff;
                }
            }
        }

        .cs-image {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            z-index: -1;
            background-color: var(--primary);
            transition: opacity 0.3s;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                opacity: 0.4;
                object-fit: cover;
                transition: transform 0.6s;
            }
        }

        .cs-link {
            text-decoration: none;
        }

        .cs-icon {
            width: auto;
            height: (48/16rem);
            margin-bottom: (24/16rem);
            display: block;
            path {
                transition: fill 0.3s;
            }
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2vw, 1.5625rem);
            line-height: 1.2em;
            margin: 0;
            margin-bottom: (16/16rem);
            color: var(--headerColor);
            transition: color 0.3s;
            font-weight: bold;
        }

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

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-296 {
        .cs-card-group {
            justify-content: space-between;
            /* makes sure every box "stretches" to be the same height as the tallest box */
            align-items: stretch;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .cs-item {
            width: 48.6%;
        }
    }
}

/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-296 {
        .cs-container {
            max-width: (1440/16rem);
        }

        .cs-card-group {
            justify-content: center;
        }

        .cs-item {
            /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
            width: clamp(23.84%, 22.5vw, 23.95%);
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #services-296 {
            .cs-topper {
                color: var(--secondaryLight);
            }
            .cs-title,
            .cs-text,
            .cs-h3,
            .cs-item-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-item {
                background-color: var(--accent);
                &:hover {
                    background-color: var(--primary);
                }
            }

            .cs-icon {
                /* turns it white */
                filter: grayscale(1) brightness(1000%);
            }
        }
    }
}

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

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

        .cs-container {
            width: 100%;
            /* changes to 1440px on desktop */
            max-width: calc(700 / 16 * 1rem);
            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-title {
            max-width: 30ch;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /* 16px - 20px */
            gap: clamp(1rem, 1.5vw, 1.25rem);
        }

        .cs-item {
            list-style: none;
            text-align: left;
            width: 100%;
            margin: 0;
            padding: calc(32 / 16 * 1rem);
            background-color: #f7f7f7;
            border-radius: calc(16 / 16 * 1rem);
            /* clips image corners */
            overflow: hidden;
            /* prevents padding from adding to height and width */
            box-sizing: border-box;
            position: relative;
            z-index: 1;
            transition: background-color 0.3s;
            &:hover {
                cursor: pointer;

                .cs-image {
                    opacity: 1;

                    img {
                        transform: scale(1.1);
                    }
                }

                .cs-icon {
                    /* turns it white */
                    filter: grayscale(1) brightness(1000%);
                }

                .cs-h3,
                .cs-item-text {
                    color: #fff;
                }
            }
        }

        .cs-image {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            z-index: -1;
            background-color: var(--primary);
            transition: opacity 0.3s;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                opacity: 0.4;
                object-fit: cover;
                transition: transform 0.6s;
            }
        }

        .cs-link {
            text-decoration: none;
        }

        .cs-icon {
            width: auto;
            height: calc(48 / 16 * 1rem);
            margin-bottom: calc(24 / 16 * 1rem);
            display: block;
            path {
                transition: fill 0.3s;
            }
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2vw, 1.5625rem);
            line-height: 1.2em;
            margin: 0;
            margin-bottom: calc(16 / 16 * 1rem);
            color: var(--headerColor);
            transition: color 0.3s;
            font-weight: bold;
        }

        .cs-item-text {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
            transition: color 0.3s;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-296 {
        .cs-card-group {
            justify-content: space-between;
            /* makes sure every box "stretches" to be the same height as the tallest box */
            align-items: stretch;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .cs-item {
            width: 48.6%;
        }
    }
}

/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-296 {
        .cs-container {
            max-width: calc(1440 / 16 * 1rem);
        }

        .cs-card-group {
            justify-content: center;
        }

        .cs-item {
            /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
            width: clamp(23.84%, 22.5vw, 23.95%);
        }
    }
}

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

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

        .cs-container {
            width: 100%;
            /* changes to 1440px on desktop */
            max-width: calc(700 / 16 * 1rem);
            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-title {
            max-width: 30ch;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /* 16px - 20px */
            gap: clamp(1rem, 1.5vw, 1.25rem);
        }

        .cs-item {
            list-style: none;
            text-align: left;
            width: 100%;
            margin: 0;
            padding: calc(32 / 16 * 1rem);
            background-color: #f7f7f7;
            border-radius: calc(16 / 16 * 1rem);
            /* clips image corners */
            overflow: hidden;
            /* prevents padding from adding to height and width */
            box-sizing: border-box;
            position: relative;
            z-index: 1;
            transition: background-color 0.3s;
            &:hover {
                cursor: pointer;

                .cs-image {
                    opacity: 1;

                    img {
                        transform: scale(1.1);
                    }
                }

                .cs-icon {
                    /* turns it white */
                    filter: grayscale(1) brightness(1000%);
                }

                .cs-h3,
                .cs-item-text {
                    color: #fff;
                }
            }
        }

        .cs-image {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            z-index: -1;
            background-color: var(--primary);
            transition: opacity 0.3s;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                opacity: 0.4;
                object-fit: cover;
                transition: transform 0.6s;
            }
        }

        .cs-link {
            text-decoration: none;
        }

        .cs-icon {
            width: auto;
            height: calc(48 / 16 * 1rem);
            margin-bottom: calc(24 / 16 * 1rem);
            display: block;
            path {
                transition: fill 0.3s;
            }
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2vw, 1.5625rem);
            line-height: 1.2em;
            margin: 0;
            margin-bottom: calc(16 / 16 * 1rem);
            color: var(--headerColor);
            transition: color 0.3s;
            font-weight: bold;
        }

        .cs-item-text {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
            transition: color 0.3s;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-296 {
        .cs-card-group {
            justify-content: space-between;
            /* makes sure every box "stretches" to be the same height as the tallest box */
            align-items: stretch;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .cs-item {
            width: 48.6%;
        }
    }
}

/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #services-296 {
        .cs-container {
            max-width: calc(1440 / 16 * 1rem);
        }

        .cs-card-group {
            justify-content: center;
        }

        .cs-item {
            /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
            width: clamp(23.84%, 22.5vw, 23.95%);
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #services-296 {
            .cs-topper {
                color: var(--secondaryLight);
            }
            .cs-title,
            .cs-text,
            .cs-h3,
            .cs-item-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-item {
                background-color: var(--accent);
                &:hover {
                    background-color: var(--primary);
                }
            }

            .cs-icon {
                /* turns it white */
                filter: grayscale(1) brightness(1000%);
            }
        }
    }
}

: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: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --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;
}

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

: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: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --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;
}

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: (4/16rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: (700/16rem);
    margin: 0 0 (16/16rem) 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: (650/16rem);
    margin: 0;
    color: var(--bodyTextColor);
}

: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: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --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;
}

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: calc(4 / 16 * 1rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: calc(700 / 16 * 1rem);
    margin: 0 0 calc(16 / 16 * 1rem) 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: calc(650 / 16 * 1rem);
    margin: 0;
    color: var(--bodyTextColor);
}