bg color and text

<style>
    #shopify-section4-sections--18813060317413__slideshow_BmKJzc {
        --progress-bar-color: 255, 255, 255;
        --section-autoplay-duration: 5s;
        --section-animation-play-state: paused;
        background-color: rgba(0, 0, 0, 0);
    }

    .shopify-section4 {
        color: #1a1a1a;
        scroll-margin-top: calc(var(--header-height, 0px) * var(--enable-sticky-header) + var(0px) * var(0));
    }

    #shopify-section4-sections--18813060317413__slideshow_BmKJzc .footer-image {
        margin-bottom: -24px;
    }

    .section4--flush {
        margin-block-start: 0;
        margin-block-end: 0;
    }

    .section4 {
        margin: var(--vertical-breather) 0;
        display: block;
    }

    .shopify-section4--slideshow .section4__header {
        margin: 0px !important;
    }

    .content-box {
        z-index: 1;
        position: relative;
    }

    .section4__header {
        text-align: center;
        max-width: 1000px;
    }

    .slideshow {
        min-height: var(--slideshow-min-height);
        display: block;
        position: relative;
        --slideshow-min-height: 0;
    }

    .slideshow__slide-list {
        min-height: var(--slideshow-min-height);
    }

    #block-sections--18813060317413__slideshow_BmKJzc-image_d39Ryz {
        --heading-color: 255, 255, 255;
        --text-color: 255, 255, 255;
        --primary-button-background: 255, 255, 255;
        --primary-button-text-color: 0, 0, 0;
        --section-blocks-alignment: center;
        --section-blocks-overlay-color: 0, 0, 0;
        --section-blocks-overlay-opacity: 0.0;
    }

    .slideshow__slide {
        z-index: 1;
        min-height: var(--slideshow-min-height);
        display: block;
        position: relative;
    }

    .slideshow__slide-inner {
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        min-height: var(--slideshow-min-height);
    }

    .slideshow__slide-inner:before {
        content: "";
        width: 0;
        display: block;
    }

    :is(.slideshow__image-wrapper:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), .slideshow__image:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
        left: 0;
    }

    .slideshow__image-wrapper {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        overflow: hidden;
    }

    .slideshow__image-wrapper:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
        left: 0;
    }

    .slideshow__image-wrapper:before {
        content: "";
        background: #00000000;
        pointer-events: none;
        z-index: 1;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
    }

    :is(.slideshow__image-wrapper:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), .slideshow__image:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
        left: 0;
    }

    .slideshow__image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        object-fit: cover;
        object-position: center;
    }

    img {
        vertical-align: top;
        border-style: none;
        max-width: 100%;
    }

    .slideshow__image-wrapper {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        overflow: hidden;
    }

    .footer-image .slideshow__slide-list:after {
        position: absolute;
        height: 50%;
        width: 100%;
        display: block;
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        background-color: #e1f8fa;
        content: "";
        z-index: -1;
    }

    @media screen and (min-width: 1000px) {
        .content-box--medium {
            width: calc(var(--grid-column-width) * 10 + var(--grid-gap) * 9);
        }

        .section4__header {
            margin-block-end: min(48px, var(--vertical-breather));
        }

        .slideshow__slide-inner:before {
            padding-block-end: calc(100 / var(--image-aspect-ratio) * 1%);
        }

        .hidden-lap-and-up {
            display: none !important;
        }
    }

    @media screen and (max-width: 999px) {
        .hidden-pocket {
            display: none !important;
        }
    }

    @media screen and (min-width: 741px) {
        .content-box {
            margin-inline-start: auto;
            margin-inline-end: auto;
        }
    }

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

        .container--flush .content-box--large,
        .content-box--medium,
        .content-box--small {
            margin-inline-start: 24px;
            margin-inline-end: 24px;
        }
    }

    @media screen and (max-width: 768px) {
        .hidden-lap-and-up {
            display: block !important;
        }
    }
</style>

<div id="shopify-section4-sections--18813060317413__slideshow_BmKJzc"
    class="shopify-section4 shopify-section4-group-footer-group shopify-section4--slideshow">
    <!-- saloni-flash-sale with class schema -->
    <section id="" class="section4 section4--flush footer-image" section_name="" section_position="1">
        <header
            class="section4__header content-box content-box--medium content-box--text-center content-box--center text-container"
            style="margin-bottom: 15px; margin-top: 15px;"></header><slide-show auto-play="" transition-type="sweep"
            class="slideshow slideshow--auto" style="--section4-animation-play-state: running;">
            <div class="slideshow__slide-list">

                <slide-show-item id="block-sections--18813060317413__slideshow_BmKJzc-image_d39Ryz"
                    class="slideshow__slide  slideshow__slide--sweep"
                    style="--image-aspect-ratio: 12.8; --mobile-image-aspect-ratio: 5.0;"
                    session_addimpression="Banner|https://discoverpilgrim.com/cdn/shop/files/WBCS-Strip-800x160_1.png?v=1739529400|1|impression|1"
                    onclick="tracking('Banner','https://discoverpilgrim.com/cdn/shop/files/WBCS-Strip-800x160_1.png?v=1739529400', 1,'click',1)">
                    <div class="slideshow__slide-inner">
                        <div class="slideshow__image-wrapper hidden-pocket"><img
                                src="//discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=3000"
                                alt=""
                                srcset="//discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=600 600w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=700 700w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=800 800w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=1000 1000w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=1200 1200w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=1400 1400w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=1600 1600w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=1800 1800w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=2000 2000w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=2200 2200w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=2400 2400w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=2600 2600w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=2800 2800w, //discoverpilgrim.com/cdn/shop/files/WBCS-Strip-1920X150.png?v=1739529418&width=3000 3000w"
                                width="3000" height="234" loading="lazy" fetchpriority="auto" draggable="false"
                                class="slideshow__image" sizes="100vw"></div>
                        <div class="slideshow__image-wrapper hidden-lap-and-up"><img
                                src="//discoverpilgrim.com/cdn/shop/files/WBCS-Strip-800x160_1.png?v=1739529400&width=600"
                                alt=""
                                srcset="//discoverpilgrim.com/cdn/shop/files/WBCS-Strip-800x160_1.png?v=1739529400&width=600 600w"
                                width="100%" height="120" loading="lazy" fetchpriority="auto" draggable="false"
                                class="slideshow__image" sizes="100vw"></div>
                    </div>
                </slide-show-item>

            </div>

        </slide-show>
    </section>

    <script>
        var slideIndex = 0;
        var startX = 0;
        var endX = 0;
        var minDistance = 100; // Minimum distance the user has to swipe to switch slides, you can adjust this value

        document.addEventListener('DOMContentLoaded', function () {
            var slides = document.querySelectorAll('.slideshow__slide');

            slides.forEach(function (slide, index) {
                slide.addEventListener('touchstart', function (e) {
                    startX = e.touches[0].clientX;
                });

                slide.addEventListener('touchmove', function (e) {
                    endX = e.touches[0].clientX;
                });

                slide.addEventListener('touchend', function (e) {
                    var distance = startX - endX;

                    if (Math.abs(distance) >= minDistance) {
                        if (distance > 0) { // User swiped left
                            slideIndex = (index + 1) % slides.length;
                        } else { // User swiped right
                            slideIndex = (index - 1 + slides.length) % slides.length;
                        }

                        // Hide all slides
                        slides.forEach(function (slide) {
                            slide.classList.add('hidden');
                        });

                        // Show the new slide
                        slides[slideIndex].classList.remove('hidden');
                    }

                    // Reset
                    startX = 0;
                    endX = 0;
                });
            });
        });
    </script>
    <style>
        #shopify-section4-sections--18813060317413__slideshow_BmKJzc .footer-image {
            margin-bottom: -24px;
        }
    </style>
</div>