Shopify Custom Codes

Announcement Header

          <!-- Code Start -->
           <announcement-bar class="ab ab-multi">
  <div class="ab-list">
    <announcement-bar-item class="ab-item">
      <div class="ab-msg text-small">
        <img loading="eager" src="https://cdn.shopify.com/s/files/1/0649/9532/8079/files/fast-delivery.png?v=1753425102" height="20" width="20" alt="announcement-icon">
        <p>Free Shipping Today</p>
      </div>
    </announcement-bar-item>
    <announcement-bar-item class="ab-item">
      <div class="ab-msg text-small">
        <img loading="eager" src="https://cdn.shopify.com/s/files/1/0649/9532/8079/files/heart.png?v=1753425103" height="20" width="20" alt="announcement-icon">
        <p>175,000+ Happy Babes</p>
      </div>
    </announcement-bar-item>
  </div>
</announcement-bar>

<style>
  .ab {
    background-color: #fff;
    color: rgb(28, 28, 28);
    width: 100%;
  }
  .ab-multi {
    height: 43px;
  }
  .ab-msg p {
    margin: 0;
  }
  .ab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  .ab-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: fit-content;
    font-size: 16px;
    padding: 10px 0;
  }
  @media (max-width: 480px) {
    .ab-msg {
      font-size: 12px;
    }
    .ab-multi {
      padding: 0;
      height: auto;
    }
    .ab-list {
      padding: 8px 5px;
      gap: 15px;
    }
  }
</style>
           <!-- Code End -->

Header Sale

          <!-- Code Start -->
           <style>
.sx-announce {
    font-size: 18px;
    line-height: 1.1;
    text-align: center;
    padding: 15px 0;
    background: linear-gradient(45deg, #3D348B, #3D348B, #9E388B, #DF4F79, #DF4F79);
    background-size: 400% 400%;
    animation: sx-gradient 8s ease infinite;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.sx-clock {
    display: flex;
    align-items: center;
    gap: 5px;
}
.sx-time-box {
    background-color: #fff;
    border-radius: 2px;
    flex-direction: column;
    width: 2.2rem;
    height: 2.2rem;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sx-number {
    font-size: 14px;
    font-weight: 900;
    color: #2a2552;
}
.sx-label {
    font-size: .5rem;
    text-transform: uppercase;
    color: #2a2552;
}
.sx-colon {
    color: #fff;
    font-weight: 800;
}
@keyframes sx-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (max-width: 767px) {
    .sx-announce {
        font-size: 14px;
        flex-wrap: wrap;
        gap: 5px;
        padding: 8px 0;
    }
    .sx-time-box {
        width: 1.75rem;
        height: 1.75rem;
    }
    .sx-number {
        font-size: .8rem;
    }
}
@media (max-width: 379px) {
    .sx-announce {
        font-size: 11px;
    }
    .sx-time-box {
        width: 1.5rem;
        height: 1.5rem;
    }
}
</style>

<div class="sx-announce">
  <span><b>Summer Sale Ends In</b></span>
  <div id="sx-clock" class="sx-clock">
    <div class="sx-time-box">
      <div id="sx-hours" class="sx-number">12</div>
      <div class="sx-label">Hrs</div>
    </div>
    <div class="sx-colon">:</div>
    <div class="sx-time-box">
      <div id="sx-minutes" class="sx-number">48</div>
      <div class="sx-label">Min</div>
    </div>
    <div class="sx-colon">:</div>
    <div class="sx-time-box">
      <div id="sx-seconds" class="sx-number">33</div>
      <div class="sx-label">Sec</div>
    </div>
  </div>
</div>

<script>
function setCookie(name, value, days) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + "=" + value + ";expires=" + expires.toUTCString() + ";path=/";
}

function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? match[2] : null;
}

var timerEnd = getCookie('sx_timer');
if (!timerEnd || timerEnd < Date.now()) {
    var midnight = new Date();
    midnight.setHours(24, 0, 0, 0);
    timerEnd = midnight.getTime();
    setCookie('sx_timer', timerEnd, 1);
}

var timer = setInterval(function() {
    var now = Date.now();
    var left = timerEnd - now;
    
    if (left <= 0) {
        clearInterval(timer);
        setCookie('sx_timer', '', -1);
        location.reload();
        return;
    }

    var hours = Math.floor(left / (1000 * 60 * 60));
    var minutes = Math.floor((left % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((left % (1000 * 60)) / 1000);

    document.getElementById('sx-hours').textContent = ('0' + hours).slice(-2);
    document.getElementById('sx-minutes').textContent = ('0' + minutes).slice(-2);
    document.getElementById('sx-seconds').textContent = ('0' + seconds).slice(-2);
}, 1000);
</script>
           <!-- Code End -->

Happy Customers

          <!-- Code Start -->
<div class="happy-customers">
  <div class="avatars">
    <img src="https://img.freepik.com/free-photo/stylish-african-american-woman-smiling_23-2148770405.jpg" alt="Customer 1" class="avatar">
    <img src="https://thumbs.dreamstime.com/b/beautiful-african-american-woman-relaxing-outside-happy-middle-aged-smiling-46298787.jpg" alt="Customer 2" class="avatar">
    <img src="https://media.istockphoto.com/id/1320651997/photo/young-woman-close-up-isolated-studio-portrait.jpg?s=612x612&w=0&k=20&c=lV6pxz-DknISGT2jjiSvUmSaw0hpMDf-dBpT8HTSAUI=" alt="Customer 3" class="avatar">
  </div>
  <span class="text">1,000,000+ HAPPY CUSTOMERS</span>
</div>

<style>
.happy-customers {
  display: flex;
  align-items: center;
background-image: linear-gradient(45deg, #1cbcc3, #4abf8f 80%);
  border-radius: 5px;
  padding: 5px 15px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.avatars {
  display: flex;
  margin-right: 10px;
margin-left: 10px
}

.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -7px; 
 object-fit: cover;
}

.text {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

</style>
           <!-- Code End -->

Happy Customer V2

          <!-- Code Start -->
           <div class="happy-customersV2">
    <div class="avatarsV2">
        <img src="https://img.freepik.com/free-photo/stylish-african-american-woman-smiling_23-2148770405.jpg" alt="Customer 1" class="avatarV2" />
        <img src="https://thumbs.dreamstime.com/b/beautiful-african-american-woman-relaxing-outside-happy-middle-aged-smiling-46298787.jpg" alt="Customer 2" class="avatarV2" />
        <img src="https://media.istockphoto.com/id/1320651997/photo/young-woman-close-up-isolated-studio-portrait.jpg?s=612x612&w=0&k=20&c=lV6pxz-DknISGT2jjiSvUmSaw0hpMDf-dBpT8HTSAUI=" alt="Customer 3" class="avatarV2" />
    </div>
    <span class="textV2">
<span style = "font-weight: 900;">Michelle</span>
    <span class="verifiedV2">
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Twitter_Verified_Badge.svg/800px-Twitter_Verified_Badge.svg.png"
        alt="verified badge"
        class="verifiedV2">
    </span> 
   <span>and <strong>758</strong> people purchased</span>
</span>
</div>

<style>
    .happy-customersV2 {
        display: flex;
        align-items: center;
        background-color: #ffffff;
        border-radius: 8px;
        padding: 5px 15px;
        font-family: Roboto, sans-serif !important;
        font-size: 12px;
        color: #000;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .avatarsV2 {
        display: flex;
        margin-right: 10px;
    }

    .avatarV2 {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid white;
        margin-left: -7px;
        object-fit: cover;
    }

.textV2 {
    font-weight: normal;
    font-size: 12px;
    color: #000;
    line-height: 0px;
    display: flex;
    align-items: center;
    gap: 3px;
}

    .textV2 strong {
        font-weight: 800;
        font-family: Roboto, sans-serif;
    }

    .verifiedV2 {
        vertical-align: middle;
        height: 13px;
        width: 13px;
    }
</style>
           <!-- Code End -->

30 Days Money Back

          <!-- Code Start -->
           <div class="message-container">
  <div class="dot"><span style="visibility: hidden;">.</span></div>
  <div class="text-mbg">30-day money back guarantee, no questions.</div>
</div>

<style>
          .message-container {
              display: flex;
              align-items: center;
              background-color: #e9fbea;
              border: 1px solid #d4edda;
              border-radius: 8px;
              padding: 10px 10px;
              max-width: 400px;
              width: 100%;
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          }
          .message-container .dot {
              width: 10px;
              height: 10px;
              background-color: #007800; /* Darker green for contrast */
              border-radius: 50%;
              margin-right: 15px;
              box-shadow: 0 0 10px #00a000; /* Initial glow effect */
              animation: pulse 1.5s infinite; /* Apply pulsing animation */
          }
          @keyframes pulse {
              0% {
                  box-shadow: 0 0 10px #00a000;
                  transform: scale(1);
              }
              50% {
                  box-shadow: 0 0 20px #00a000;
                  transform: scale(1);
              }
              100% {
                  box-shadow: 0 0 10px #00a000;
                  transform: scale(1);
              }
          }
          .message-container .text-mbg {
              font-size: 12px;
              color: #039903;
  line-height: 0px;
          }
</style>
           <!-- Code End -->

TrustV1

          <!-- Code Start -->
           <div class="trustpilot-container">
  <div class="trustpilot-text">"Amazing"</div>

  <img
    class="trustpilot-image"
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqwTrpqlDxrYZ0pXL4aXXL4azowSSvjMZM2g&s"
    alt="Trustpilot Image"
  />

  <div class="trustpilot-rating">Rated 4.4/5 on</div>

  <img
    class="trustpilot-logo"
    src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/trustpilot-logo-sml_bf402230-0d05-4609-a750-c310e4720da2.png?v=1733179329"
    alt="Trustpilot Image"
  />
</div>

<style>
          .trustpilot-container {
              display: flex;
              align-items: center;
              background-color: #e9fff9;
              border: 1px solid #d4edda;
              border-radius: 8px;
              padding: 2px 10px;

              width: 100%;
  border: 1px dashed #898686;
  gap: 8px;
  justify-content: center;
          }

  .trustpilot-image{
  width: 60px;
  }
  .trustpilot-logo{
  width: 70px;
  }
  .trustpilot-text{
  font-size: 13px;
  font-weight: 600;
  }
  .trustpilot-rating{
  font-size: 10px;
  font-weight: 500;
  color: #000;
  }
</style>
           <!-- Code End -->

Freq BUY

          <!-- Code Start -->
           <div class="freq-contatiner">
  <div class="freq-text">7k+ people bought in the past month</div>
</div>

<style>
  .freq-text{
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  }
  .freq-contatiner{
  justify-content: center;
  width: 100%;
  }
</style>
           <!-- Code End -->

Card Slider with Swiper

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Slider with Swiper</title>
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
  
        #card-container {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
          
        }
      .swiper-wrapper {
    min-width: 100%; /* Set a minimum width to prevent excessive compression */
    box-sizing: content-box; /* Ensure the width includes padding and border, but not margin */
}

        .swiper-container {
            width: calc(100% - 20px);
            position: relative;
            margin: 0 auto;
padding: 10px 0px;
        }

@keyframes upAndDown {
  0%, 100% {
    transform: translateY(0); /* Original position */
  }
  25% {
    transform: translateY(-4px);
  }
 50% {
    transform: translateY(0px);
  }
 75% {
    transform: translateY(4px);
  }
}

@keyframes downAndUp {
  0%, 100% {
    transform: translateY(0); /* Original position */
  }
  25% {
    transform: translateY(4px);
  }
 50% {
    transform: translateY(0px);
  }
 75% {
    transform: translateY(-4px);
  }
}

.swiper-slide:nth-child(odd) {
  animation: upAndDown 4s infinite linear;
}

.swiper-slide:nth-child(even) {
  animation: downAndUp 4s infinite linear;
}


.swiper-slide {
  max-width: 280px;
  height: 230px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border: 2px solid rgb(239, 239, 243);
  border-radius: 5px;
  padding: 11px;
  box-sizing: border-box;
  justify-content: space-between;
  gap: 15px;
}



        .rating {
            font-size: 32px;
            color: #f7d131;
            margin-top: 10px;
line-height: 20px;
        }

        .description {
            font-size: 14px;
            color: #333;
            text-align: center;
            justify-content: space-between;
          line-height: 22px;
        }
.name{
    display: flex;
    align-items: center;
    gap: 5px;
}

      

        .swiper-button-prev, .swiper-button-next {
            color: white;
            font-size: 15px!important;
            background-color: #333;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin: 0 10px;
          top: 42%!important;
        }

        @media (max-width: 767px) {
            .swiper-button-prev, .swiper-button-next {
                display: none;
            }
        }

        .swiper-pagination {
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            margin-top: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-pagination-bullet {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #0d437d;
            margin: 0 5px;
            border-radius: 2px;
            cursor: pointer;
        }

        .swiper-pagination-bullet-active {
            width: 1.5rem;
            background-color: #0d437d;
            border-radius: 4px;
        }
      .swiper-button-next:after,.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 15px;
    text-transform: none!important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

    </style>






<div class="container">
    <div id="card-container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="rating">★★★★★</div>
                    <div class="description">"I much prefer them over liquid detergent because they are easy to store, clean to use and I love that you can rip the sheets if you want to change the amount you are using."</div>
                  <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Davina K</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 12px; color: #13152f;" >Verified</font></div>
                </div>
                <div class="swiper-slide">
                    <div class="rating">★★★★★</div>
                    <div class="description">"I'm impressed so far with the cleaning power, as well as the convenience. Of course limited packaging waste is a big win, too!"</div>
                   <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Aliza</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
                </div>
                <div class="swiper-slide">
                    <div class="rating">★★★★★</div>
                    <div class="description">Very simple detergent, does the job just as good, small pacakging, great product"</div>
                    <div class = "name""> <font style = "color: #13152f!important; font-weight: bold;">Jayna H</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
                </div>
<div class="swiper-slide">
    <div class="rating">
        <span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #DDDDDD;">★</span>
    </div>
    <div class="description" style = "margin-top:10px">
  "Yes very happy with the product. I bought it to use when travelling in our caravan. Light and convenient. Tested it on clothes at home and seems to work very well."
  </div>
  <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Ally</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
</div>
              
                <div class="swiper-slide">
                    <div class="rating">★★★★★</div>
                    <div class="description">"
  i used to get rashes before using these sheets, well not anymore, thank you so much!
  "</div>
                  <div class = "name" > <font style = "color: #13152f!important; font-weight: bold;">Mehul G</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
                </div>
                <div class="swiper-slide">
                    <div class="rating">★★★★★</div>
                    <div class="description">"
  Easy to order, easy to use and great washing results !
  "</div>
                  <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Noah D</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
                </div>
<div class="swiper-slide">
    <div class="rating">
        <span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="background-image: linear-gradient(to right, #f7d131 50%, #dddddd 50%);
    -webkit-background-clip: text !important;
    -moz-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;">★</span>
    </div>
    <div class="description">It has completely stopped my skin irritation, i never knew how harmful my liquid detergent was</div>
  <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Ada T</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
</div>

<div class="swiper-slide">
    <div class="rating">
        <span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #DDDDDD;">★</span>
    </div>
    <div class="description">My shelves are now free for my other cleaning supplies, one neat tidy cupboard for all my supplies thanks to your compact detergent</div>
  <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Martha</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
</div>
            </div> 
            <!-- Add Navigation Arrows -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>

  
    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 'auto',
                spaceBetween: 10,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                autoplay: {
                    delay: 10000, // Autoplay every 10 seconds
                    disableOnInteraction: false, // Allow manual navigation without stopping autoplay
                },
                breakpoints: {
                    1024: {
                        slidesPerView: 3,
                    },
                    1300: {
                        slidesPerView: 4,
                    },
                },
            });
        });
    </script>


</body>
</html>
           <!-- Code End -->

FAQ Accordion Section

          <!-- Code Start -->
          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FAQ Accordion Section</title>
    <style>
      .accordion {
          width: 100%;
          max-width: 800px;
          margin: 40px auto;
          border-radius: 5px;
      }
      .accordion-item {
          border-bottom: 1px solid #ccc;
          margin-bottom: 3px;
      }
      .accordion-item:last-child {
          border-bottom: none;
      }
      .accordion-header {
          padding: 8px;
          cursor: pointer;
          font-weight: bold;
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .accordion-header .indicator {
          font-size: 1.3em;
          margin-left: 8px;
          transition: transform 0.3s ease;
      }
      .accordion-item.active .indicator {
          content: '-';
          transform: rotate(180deg);
      }
      .accordion-content {
          max-height: 0;
          overflow: hidden;
          padding: 0 10px;
          transition: max-height 0.3s ease, padding 0.3s ease;
      }
      .accordion-content p {
          margin: 8px 0;
          font-size: 12px;
      }
      .active .accordion-content {
          max-height: 150px;
          padding: 8px 10px;
      }
    </style>
  </head>
  <body>
    <div class="container page-width">
      <div class="accordion">
        <div class="accordion-item">
          <div class="accordion-header">
            Question 1<span class="indicator">+</span>
          </div>
          <div class="accordion-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
              non urna eu nisi pretium viverra.
            </p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-header">
            Question 2<span class="indicator">+</span>
          </div>
          <div class="accordion-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
              non urna eu nisi pretium viverra.
            </p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-header">
            Question 3<span class="indicator">+</span>
          </div>
          <div class="accordion-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
              non urna eu nisi pretium viverra.
            </p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-header">
            Question 4<span class="indicator">+</span>
          </div>
          <div class="accordion-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
              non urna eu nisi pretium viverra.
            </p>
          </div>
        </div>
      </div>
    </div>

    <script>
      function handleAccordionClick(event) {
          const item = event.target.closest('.accordion-item');
          if (item) {
              item.classList.toggle('active');
              const indicator = item.querySelector('.indicator');
              if (item.classList.contains('active')) {
                  indicator.textContent = '-';
              } else {
                  indicator.textContent = '+';
              }
          }
      }

      document.querySelectorAll('.accordion-header').forEach(header => {
          header.addEventListener('click', handleAccordionClick);
      });
    </script>
  </body>
</html>
           <!-- Code End -->

Tablet Container

          <!-- Code Start -->
           <div class="tablet-container">
  <div class="tablet">
    <svg
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="15"
      fill="#2e2f3c"
      version="1.1"
      id="Layer_1"
      x="0px"
      y="0px"
      viewBox="0 0 24 24"
      style="enable-background:new 0 0 24 24;"
      xml:space="preserve"
    >
      <metadata>
        <dc:creator>Davooda</dc:creator>
        <dc:relation>https://davooda.com</dc:relation>
      </metadata>

      <style type="text/css">
        .st0{fill:none;stroke:#1E1E1E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st1{fill:none;stroke:#1E1E1E;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st2{fill:none;stroke:#1E1E1E;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st3{fill:#1E1E1E;}
        .st4{fill:#FFFFFF;stroke:#1E1E1E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st5{fill:none;stroke:#1E1E1E;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st6{fill:none;stroke:#010101;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st7{fill:#010101;}
        .st8{fill:none;stroke:#010101;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
      </style>
      <g>
        <path
          class="st0"
          d="M6,5h9v2l3.7,0.8c0.9,0.2,1.7,0.8,2.1,1.7l1.8,4c0.2,0.4,0.3,0.8,0.3,1.3v1.7V18h-3"
        />
        <line class="st0" x1="5" y1="13" x2="2" y2="13" />
      </g>
      <line class="st0" x1="15" y1="18" x2="9" y2="18" />
      <circle class="st0" cx="6.5" cy="18.5" r="2.5" />
      <circle class="st0" cx="17.5" cy="18.5" r="2.5" />
      <polyline class="st0" points="15,7 15,12 15,14 " />
      <line class="st0" x1="1" y1="9" x2="7" y2="9" />
      <line class="st0" x1="4" y1="19" x2="3" y2="19" />
    </svg>
    <span>Fast Shipping</span>
  </div>

  <div class="tablet">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="15"
      fill="#2e2f3c"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      fill="#000000"
      version="1.1"
      id="Capa_1"
      viewBox="0 0 361.014 361.014"
      xml:space="preserve"
    >
      <g>
        <g id="Layer_5_47_">
          <path
            d="M331.035,126.94H318.01c-3.563,0-3.682-2.333-3.805-3.494C307.375,59.094,252.77,8.791,186.637,8.791h-12.26    c-65.644,0-119.929,49.56-127.409,113.229c-0.191,1.631-0.291,4.92-3.291,4.92H29.978C20.987,126.94,0,136.401,0,184.18v25.075    c0,35.436,20.987,43.609,29.978,43.609h43.584c8.991,0,16.347-7.356,16.347-16.347v-93.23c0-8.991-7.356-16.347-16.347-16.347    c0,0-2.052-0.18-1.529-3.835c7.192-50.319,50.129-89.313,102.344-89.313h12.26c51.86,0,94.912,38.418,102.2,88.288    c0.235,1.608,1.111,4.86-1.385,4.86c-8.991,0-16.347,7.356-16.347,16.347v93.23c0,8.991,7.356,16.347,16.347,16.347h8.184    c2.25,0,1.868,1.798,1.667,2.704c-6.667,30.104-21.637,64.256-55.238,64.256h-24.889c-2.54,0-3.167-1.861-3.65-2.743    c-4.032-7.367-11.851-12.364-20.841-12.364h-22.933c-13.118,0-23.753,10.634-23.753,23.753c0,13.119,10.635,23.752,23.753,23.752    h22.933c9.112,0,17.023-5.132,21.005-12.662c0.348-0.658,0.633-2.026,3.321-2.026h25.054c22.823,0,53.365-11.341,69.259-65.373    c1.694-5.758,3.068-11.496,4.187-17.026c0.154-0.761,0.25-2.27,2.625-2.27h12.9c8.991,0,29.978-8.174,29.978-43.609v-25.075    C361.013,137.082,340.026,126.94,331.035,126.94z"
          />
        </g>
      </g>
    </svg>
    <span>24/7 support</span>
  </div>

  <div class="tablet">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="15"
      fill="#2e2f3c"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      version="1.1"
      viewBox="0 0 256 256"
      xml:space="preserve"
    >
      <defs></defs>
      <g
        style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
        transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
      >
        <path
          d="M 45 37.605 c -0.254 0 -0.509 -0.048 -0.749 -0.146 l -16.076 -6.494 c -1.024 -0.414 -1.519 -1.58 -1.105 -2.604 c 0.414 -1.024 1.58 -1.519 2.604 -1.105 L 45 33.448 l 36.253 -14.646 L 45 4.157 L 8.747 18.803 l 11.485 4.64 c 1.024 0.414 1.519 1.58 1.105 2.604 c -0.414 1.025 -1.58 1.52 -2.604 1.105 L 2.659 20.657 c -0.756 -0.306 -1.251 -1.039 -1.251 -1.854 s 0.495 -1.549 1.251 -1.854 L 44.251 0.146 c 0.48 -0.194 1.018 -0.194 1.498 0 l 41.593 16.803 c 0.756 0.306 1.251 1.039 1.251 1.854 s -0.495 1.549 -1.251 1.854 L 45.749 37.46 C 45.509 37.557 45.254 37.605 45 37.605 z"
          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
          transform=" matrix(1 0 0 1 0 0) "
          stroke-linecap="round"
        />
        <path
          d="M 45 90 c -0.393 0 -0.783 -0.116 -1.119 -0.342 C 43.331 89.286 43 88.665 43 88 V 35.605 c 0 -0.815 0.495 -1.549 1.251 -1.854 l 41.593 -16.803 c 0.615 -0.249 1.316 -0.176 1.867 0.196 c 0.552 0.372 0.882 0.993 0.882 1.658 v 52.395 c 0 0.815 -0.495 1.549 -1.251 1.854 L 45.749 89.854 C 45.508 89.952 45.253 90 45 90 z M 47 36.955 v 48.081 l 37.593 -15.187 V 21.768 L 47 36.955 z"
          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
          transform=" matrix(1 0 0 1 0 0) "
          stroke-linecap="round"
        />
        <path
          d="M 45 90 c -0.253 0 -0.508 -0.048 -0.749 -0.146 L 2.659 73.052 c -0.756 -0.306 -1.251 -1.039 -1.251 -1.854 V 18.803 c 0 -0.665 0.331 -1.286 0.882 -1.658 c 0.55 -0.372 1.251 -0.446 1.867 -0.196 l 16.075 6.495 c 1.024 0.414 1.519 1.58 1.105 2.604 c -0.414 1.025 -1.578 1.52 -2.604 1.105 L 5.408 21.768 v 48.081 L 43 85.035 V 36.955 l -14.825 -5.989 c -1.024 -0.414 -1.519 -1.58 -1.105 -2.604 c 0.414 -1.024 1.58 -1.519 2.604 -1.105 l 16.076 6.494 C 46.505 34.057 47 34.79 47 35.605 V 88 c 0 0.665 -0.33 1.286 -0.882 1.658 C 45.783 89.884 45.393 90 45 90 z"
          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
          transform=" matrix(1 0 0 1 0 0) "
          stroke-linecap="round"
        />
        <path
          d="M 28.924 53.036 c -0.253 0 -0.507 -0.048 -0.749 -0.146 l -9.441 -3.813 c -0.756 -0.306 -1.251 -1.039 -1.251 -1.854 V 25.297 c 0 -0.815 0.495 -1.549 1.251 -1.854 L 60.326 6.64 c 0.48 -0.194 1.018 -0.194 1.498 0 l 9.441 3.814 c 0.756 0.306 1.251 1.039 1.251 1.854 s -0.495 1.549 -1.251 1.854 L 30.924 30.46 v 20.576 c 0 0.665 -0.331 1.286 -0.881 1.658 C 29.708 52.92 29.317 53.036 28.924 53.036 z M 21.483 45.874 l 5.441 2.198 v -18.96 c 0 -0.815 0.495 -1.549 1.251 -1.854 l 37.002 -14.948 l -4.103 -1.657 L 21.483 26.646 V 45.874 z"
          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
          transform=" matrix(1 0 0 1 0 0) "
          stroke-linecap="round"
        />
        <path
          d="M 52.372 78.616 c -0.792 0 -1.541 -0.473 -1.855 -1.252 c -0.414 -1.024 0.081 -2.189 1.105 -2.604 l 9.44 -3.813 c 1.025 -0.411 2.19 0.081 2.604 1.105 c 0.414 1.024 -0.081 2.189 -1.105 2.604 l -9.44 3.813 C 52.875 78.568 52.621 78.616 52.372 78.616 z"
          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
          transform=" matrix(1 0 0 1 0 0) "
          stroke-linecap="round"
        />
        <path
          d="M 52.372 71.526 c -0.792 0 -1.541 -0.473 -1.855 -1.252 c -0.414 -1.023 0.081 -2.189 1.105 -2.604 l 9.44 -3.814 c 1.025 -0.411 2.19 0.081 2.604 1.105 c 0.414 1.023 -0.081 2.189 -1.105 2.604 l -9.44 3.814 C 52.875 71.479 52.621 71.526 52.372 71.526 z"
          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
          transform=" matrix(1 0 0 1 0 0) "
          stroke-linecap="round"
        />
        <path
          d="M 52.372 64.436 c -0.792 0 -1.541 -0.473 -1.855 -1.252 c -0.414 -1.024 0.081 -2.189 1.105 -2.604 l 9.44 -3.813 c 1.025 -0.412 2.19 0.081 2.604 1.105 c 0.414 1.024 -0.081 2.189 -1.105 2.604 l -9.44 3.813 C 52.875 64.388 52.621 64.436 52.372 64.436 z"
          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
          transform=" matrix(1 0 0 1 0 0) "
          stroke-linecap="round"
        />
      </g>
    </svg>
    <span>30 days return</span>
  </div>
</div>

<style>
  .tablet-container{
  width: 100%;
  display: flex;
  gap: 7px;
  }
  .tablet{
  width: max-content;
  background-color: #eeeeee;
  border-radius: 5px;
  max-width: 200px;
  padding: 1px 5px;
  font-size: 9.5px;
  line-height: 20px;
  display: flex;
  font-weight: 700;
  gap: 5px;
  align-items: center;
  color: #2e2f3c;
  }
</style>
           <!-- Code End -->

Reviews Container

          <!-- Code Start -->
           <div class="reviews-container">
  <div class="avatars">
    <img
      src="https://img.freepik.com/free-photo/stylish-african-american-woman-smiling_23-2148770405.jpg"
      alt="Customer 1"
      class="avatar"
    />
    <img
      src="https://thumbs.dreamstime.com/b/beautiful-african-american-woman-relaxing-outside-happy-middle-aged-smiling-46298787.jpg"
      alt="Customer 2"
      class="avatar"
    />
    <img
      src="https://media.istockphoto.com/id/1320651997/photo/young-woman-close-up-isolated-studio-portrait.jpg?s=612x612&w=0&k=20&c=lV6pxz-DknISGT2jjiSvUmSaw0hpMDf-dBpT8HTSAUI="
      alt="Customer 3"
      class="avatar"
    />
  </div>
  <span class="text-grey">
rated <strong>4.5/5</strong> based on <strong>+650 Reviews</strong>
</span>
</div>

<style>
  .reviews-container {
    display: flex;
    align-items: center;

  }

  .avatars {
    display: flex;
    margin-right: 5px;
margin-left: 7px;
  }

  .avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: -7px;
    object-fit: cover;
  }

  .text-grey {
    font-weight: normal;
    font-size: 10px;
    color: #868686;
  line-height: 0px;

  }

  .text-grey strong {
    font-weight: 800;

color: #2e2f3c
  }

</style>
           <!-- Code End -->

RISK FREE

          <!-- Code Start -->
           <div class="benefits-box">
  <div>
    <span class="return-box">
      RISK FREE!   Get a refund and keep the item.</span
    >
    <div></div>
  </div>
</div>

<style>
                                 .return-box {
      width: 100%;
      border-radius: 5px;
      color: #fff;
      display: flex;
      align-items: center;
      padding: 8px 20px 8px 20px;
      justify-content: center;
      font-size: 13px;
    background-image: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 75%);
      background-size: 100%;
    font-weight: 600!important;
    line-height: 15px!important
  }
</style>

           <!-- Code End -->

Stats Chart

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stats Chart</title>
    <style>
            .circular-chart {
            position: relative;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: conic-gradient(
                from 0deg,
                #1cbcc3 0%,
                #4abf8f calc(var(--percentage) / 2),
                #66bb6a var(--percentage),
                #ccc 0%
            );
        }
        .circular-chart::after {
            content: "";
            position: absolute;
            top: 11%;
            left: 11%;
            width: 77%;
            height: 77%;
            background: white;
            border-radius: 50%;
        }
        .percentage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 11px;
            font-weight: bold;
            z-index: 1;
        }
.statisfaction-container{
width: 100%;
border-radius: 8px;
justify-content: center;

display:flex;
align-items: center;
gap : 7px;
}
.satisfaction-text{
font-size: 12px;
font-weight: 600;
}
    </style>
</head>
<body>

<div class = "statisfaction-container">
    <div class="circular-chart" id="chart-1" data-target="90">
        <div class="percentage" id="percentage-1">0%</div>
    </div>
<div class = "satisfaction-text"> of our customers love our products </div>
</div>

    <script>
        function animatePercentage(chart, percentageText, targetValue) {
            let currentPercentage = 0;

            function updateChart() {
                if (currentPercentage <= targetValue) {
                    chart.style.setProperty('--percentage', currentPercentage + '%');
                    percentageText.innerText = currentPercentage + '%';
                    currentPercentage++;
                    requestAnimationFrame(updateChart);
                }
            }
            updateChart();
        }

        function handleScroll() {
            const charts = document.querySelectorAll('.circular-chart');
            const windowHeight = window.innerHeight;

            charts.forEach((chart) => {
                const chartPosition = chart.getBoundingClientRect().top;
                const percentageText = chart.querySelector('.percentage');
                const targetValue = parseInt(chart.getAttribute('data-target'));

                if (chartPosition < windowHeight - 100 && !chart.classList.contains('animated')) {
                    animatePercentage(chart, percentageText, targetValue);
                    chart.classList.add('animated');
                }
            });
        }

        window.addEventListener('scroll', handleScroll);
        document.addEventListener('DOMContentLoaded', handleScroll); // Ensure animation runs if already in view on load
    </script>
</body>
</html>
           <!-- Code End -->

Infinite Slider

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Announcement Bar with Infinite Scroll</title>
    <style>
              .unique-announcement-bar {
                  width: 100%;
      background-image: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%);
                  padding: 3px 0;
                  overflow: hidden;
                  white-space: nowrap;
                  position: relative;
                  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
              }
              .unique-announcement-wrapper {
                  display: flex;
                  animation: unique-scroll-text 8s linear infinite;
              }
              .unique-announcement-text {
      color: #fffff9;
                  font-size: 12px;
                  font-weight: bold;
                  margin-right: 25px; 
              }
              @keyframes unique-scroll-text {
                  0% {
                      transform: translateX(0);
                  }
                  100% {
                      transform: translateX(-100%);
                  }
              }
    </style>
  </head>
  <body>
    <div class="unique-announcement-bar">
      <div class="unique-announcement-wrapper">
        <div class="unique-announcement-text">SunixAbhi</div>
        <div class="unique-announcement-text">Easy Copy</div>
        <div class="unique-announcement-text">Build Trust</div>
        <div class="unique-announcement-text">Buy Now</div>
        <div class="unique-announcement-text">SunixAbhi</div>
        <div class="unique-announcement-text">Easy Copy</div>
        <div class="unique-announcement-text">Build Trust</div>
        <div class="unique-announcement-text">Buy Now</div>
        <div class="unique-announcement-text">SunixAbhi</div>
        <div class="unique-announcement-text">Easy Copy</div>
        <div class="unique-announcement-text">Build Trust</div>
        <div class="unique-announcement-text">Buy Now</div>
        <div class="unique-announcement-text">SunixAbhi</div>
        <div class="unique-announcement-text">Easy Copy</div>
        <div class="unique-announcement-text">Build Trust</div>
        <div class="unique-announcement-text">Buy Now</div>
        <div class="unique-announcement-text">SunixAbhi</div>
        <div class="unique-announcement-text">Easy Copy</div>
        <div class="unique-announcement-text">Build Trust</div>
        <div class="unique-announcement-text">Buy Now</div>
        <div class="unique-announcement-text">SunixAbhi</div>
        <div class="unique-announcement-text">Easy Copy</div>
        <div class="unique-announcement-text">Build Trust</div>
        <div class="unique-announcement-text">Buy Now</div>
      </div>
    </div>
  </body>
</html>
           <!-- Code End -->

Product Status Box

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Status Box</title>
    <style>
        
        .product-status-box {
            border: 2px solid #1b3a57;
            padding: 3px 15px;
            font-size: 12px;
            font-weight: bold;
            color: #1b3a57;
            display: inline-block;
            text-align: center;
            text-transform: uppercase;
        }
        .center-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="center-wrapper">
    <div class="product-status-box">HOT PRODUCT | LOW STOCK</div>
    </div>
</body>
</html>
           <!-- Code End -->

Why Choose Us

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Why Choose Us?</title>
    <style>
              .why-choose-title {
                  font-size: 1.2em;
                  font-weight: bold;
                  margin-bottom: 10px;
                  text-align: center;
                  color: #1b3a57;
              }
              .why-choose-subtitle {
                  font-size: 0.8em;
                  margin-bottom: 30px;
                  color: #666;
                  text-align: center;
              }
              .why-choose-comparison-table {
                  width: 100%;
                  max-width: 550px;
                  margin: 0 auto;
                  border-collapse: collapse;
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                  overflow: hidden;
                  border-radius: 10px;
              }
              .why-choose-comparison-table th, .why-choose-comparison-table td {
                  padding: 8px;
                  text-align: center;
                  border: 1px solid #ddd;
                  font-size: 13px;
              }
              .why-choose-comparison-table th {
                  background-color: #f5f5f5;
                  font-weight: bold;
                  color: #121212bf;
              }
              .why-choose-feature {
      background: linear-gradient(45deg, #19a9b0, #42ad81 80%);
                  color: #fff;
                  text-align: left;
                  font-weight: bold;
                  font-size: 13px;
                  width: 40%;
              }
              .why-choose-comparison-table th:nth-child(2), .why-choose-comparison-table td:nth-child(2) {
                  width: 30%;
              }
              .why-choose-comparison-table th:nth-child(3), .why-choose-comparison-table td:nth-child(3) {
                  width: 30%;
              }
              .why-choose-check {
                  color: #28a745;
                  font-size: 1.3em;
              }
              .why-choose-cross {
                  color: #3f3f3f;
                  font-size: 1.5em;
              }
              .why-choose-rounded-corners {
                  border-radius: 10px;
                  overflow: hidden;
              }
              .why-choose-comparison-table tbody tr:nth-child(odd) {
                  background-color: #f9f9f9;
              }
    </style>
  </head>
  <body>
    <div class="container page-width">
      <div class="why-choose-title">Why Choose Us?</div>
      <div class="why-choose-subtitle">
        add a reason here to why your customer should buy your products
      </div>
      <table class="why-choose-comparison-table">
        <thead>
          <tr>
            <th
              class="why-choose-feature"
              style="background: #f5f5f5!important;"
            >
              Feature
            </th>
            <th>Your brand</th>
            <th>Others</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="why-choose-feature">Benefit 1</td>
            <td class="why-choose-check">✔</td>
            <td class="why-choose-cross">✘</td>
          </tr>
          <tr>
            <td class="why-choose-feature">Benefit 2</td>
            <td class="why-choose-check">✔</td>
            <td class="why-choose-cross">✘</td>
          </tr>
          <tr>
            <td class="why-choose-feature">Benefit 3</td>
            <td class="why-choose-check">✔</td>
            <td class="why-choose-cross">✘</td>
          </tr>
          <tr>
            <td class="why-choose-feature">Benefit 4</td>
            <td class="why-choose-check">✔</td>
            <td class="why-choose-check">✔</td>
          </tr>
          <tr>
            <td class="why-choose-feature">Benefit 5</td>
            <td class="why-choose-check">✔</td>
            <td class="why-choose-check">✔</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

           <!-- Code End -->

Gradient text title goes here

          <!-- Code Start -->
           <div class = container page-width">
<h2 class = "gradient-title">
Gradient text title goes here
</h2>
</div>

<style>
.gradient-title{
    background-image: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%);
    -webkit-background-clip: text!important;
    -moz-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    -moz-text-fill-color: transparent!important;
font-weight: 900;
text-align: center;
font-size: 25px;
}
</style>
           <!-- Code End -->

Product Info Tabs

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Info Tabs</title>
    <style>

              .tabs-container {
                  max-width: 500px;
                  margin: 0 auto;
                  
                  border-radius: 10px;
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                  overflow: hidden;
              }
              .tabs-header {
                  display: flex;
                  gap: 10px;
              }
      .tab {
          flex: 1;
          padding: 8px 8px;
          text-align: center;
          font-weight: bold;
          cursor: pointer;
      background: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%);
          color: #ffffff;
          max-width: 33.33%;
          box-sizing: border-box;
          align-items: center;
          display: flex;
          justify-content: center;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
      font-size: 13px;
      transition: background-color 0.8s ease;
      }
              .tab.active {
                  background: #ffffff;
                  color: #1b3a57;
              }
              .tab-content {
                  padding: 5px 10px;
                  display: none;
      font-size: 13px;
      transition: opacity 0.5s ease;
              }
              .tab-content.active {
                  display: block;
          background: #fff;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
      opacity: 1;
              }
    </style>
  </head>
  <body>
    <div class="container page-width">
      <div class="tabs-container">
        <div class="tabs-header">
          <div class="tab active" onclick="showTabContent('when-to-take')">
            tab 1
          </div>
          <div class="tab" onclick="showTabContent('description')">tab 2</div>
          <div class="tab" onclick="showTabContent('ingredients')">tab 3</div>
        </div>
        <div id="when-to-take" class="tab-content active">
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
              non urna eu nisi pretium viverra.
            </p>
          </div>
        </div>
        <div id="description" class="tab-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non
            urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Nullam non urna eu nisi pretium viverra.
          </p>
        </div>
        <div id="ingredients" class="tab-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non
            urna eu nisi pretium viverra.
          </p>
        </div>
      </div>
    </div>

    <script>
      function showTabContent(tabId) {
          const tabs = document.querySelectorAll('.tab');
          const tabContents = document.querySelectorAll('.tab-content');
          tabs.forEach(tab => tab.classList.remove('active'));
          tabContents.forEach(content => content.classList.remove('active'));
          document.querySelector(`[onclick="showTabContent('${tabId}')"]`).classList.add('active');
          document.getElementById(tabId).classList.add('active');
      }
    </script>
  </body>
</html>
           <!-- Code End -->

Responsive Slider

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Slider</title>
    <style>
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
.description{
font-size: 13px;
}

        .user-info img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .user-details {
            display: flex;
            flex-direction: column;
            line-height: 20px;
        }

        .user-details .name {
            font-weight: bold;
            color: #13152f;
        }

        .user-details .time {
            font-size: 11px;
            color: #666;
        }

        .description {
            font-size: 13px;
            color: #333;
            text-align: left;
            line-height: 22px;
            flex-grow: 1;
        }

        .card-footer {
            margin-top: auto;
        }

        .stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
            font-size: 10px;
            color: #666;
        }

        .stats .reactions {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eaeaea;
            padding-top: 10px;
            font-size: 13px;
            color: #666;
        }

        .actions div {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }

        .facebook-like {
            width: 15px;
            margin-bottom: 2px;
        }

        #v3-slider-container {
            overflow: hidden;
            position: relative;
            padding: 20px 5px;
max-width: 1500px;
margin-right: auto;
margin-left: auto;
        }

        #v3-slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        @keyframes upAndDown {
            0%,
            100% {
                transform: translateY(0);
            }
            25% {
                transform: translateY(-4px);
            }
            50% {
                transform: translateY(0px);
            }
            75% {
                transform: translateY(4px);
            }
        }

        @keyframes downAndUp {
            0%,
            100% {
                transform: translateY(0);
            }
            25% {
                transform: translateY(4px);
            }
            50% {
                transform: translateY(0px);
            }
            75% {
                transform: translateY(-4px);
            }
        }

        .v3-slider-card:nth-child(odd) {
            animation: upAndDown 4s infinite linear;
        }

        .v3-slider-card:nth-child(even) {
            animation: downAndUp 4s infinite linear;
        }

        .v3-slider-card {
            flex: 0 0 80%;
            max-width: 280px;
            height: 280px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border: 2px solid rgb(239, 239, 243);
            border-radius: 10px;
            padding: 15px;
            box-sizing: border-box;
            gap: 10px;
            position: relative;
            margin-right: 10px;
        }

        #v3-pagination {
            display: flex;
            justify-content: center;
            margin-top: 10px;
display: none;
        }

        .v3-pagination-dot {
            width: 10px;
            height: 10px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .v3-pagination-dot.active {
            background-color: #333;
        }
    </style>
</head>

<body>
    <div id="v3-slider-container">
        <div id="v3-slider">
            <div class="v3-slider-card">
                <div class="user-info">
                    <img src="https://i.dailymail.co.uk/i/pix/2013/08/29/article-2405475-1B8389EE000005DC-718_634x550.jpg" alt="User">
                    <div class="user-details">
                        <div class="name">lizaK</div>
                        <div class="time">5h ago</div>
                    </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.
                </div>

                <div class="card-footer">
                    <div class="stats">
                        <div class="reactions">
                            <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
                            <span>1.1K</span>
                        </div>
                        <span>145 comments • 43 shares</span>
                    </div>
                    <div class="actions">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">
<g>
	<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"/>
</g>
</svg> Like
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">
  <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>
</svg> Comment
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">
  <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>
</svg> Share
                        </div>
                    </div>
                </div>
            </div>
            <div class="v3-slider-card">
                <div class="user-info">
                    <img src="https://plus.unsplash.com/premium_photo-1689530775582-83b8abdb5020?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cmFuZG9tJTIwcGVyc29ufGVufDB8fDB8fHww" alt="User">
                    <div class="user-details">
                        <div class="name">Daneil M</div>
                        <div class="time">5h ago</div>
                    </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.
                </div>

                <div class="card-footer">
                    <div class="stats">
                        <div class="reactions">
                            <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
                            <span>900</span>
                        </div>
                        <span>10 comments • 12 shares</span>
                    </div>
                    <div class="actions">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">
<g>
	<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"/>
</g>
</svg> Like
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">
  <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>
</svg> Comment
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">
  <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>
</svg> Share
                        </div>
                    </div>
                </div>
            </div>
            <div class="v3-slider-card">
                <div class="user-info">
                    <img src="https://plus.unsplash.com/premium_photo-1688891564708-9b2247085923?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fHJhbmRvbSUyMHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D" alt="User">
                    <div class="user-details">
                        <div class="name">joel</div>
                        <div class="time">5h ago</div>
                    </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.
                </div>

                <div class="card-footer">
                    <div class="stats">
                        <div class="reactions">
                            <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
                            <span>264</span>
                        </div>
                        <span>6 comments • 14 shares</span>
                    </div>
                    <div class="actions">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">
<g>
	<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"/>
</g>
</svg> Like
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">
  <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>
</svg> Comment
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">
  <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>
</svg> Share
                        </div>
                    </div>
                </div>
            </div>
            <div class="v3-slider-card">
                <div class="user-info">
                    <img src="https://thumbs.wbm.im/pw/small/6dc1cb1116b972bb2405441d4d590cd2.jpg" alt="User">
                    <div class="user-details">
                        <div class="name">Mehul g</div>
                        <div class="time">5h ago</div>
                    </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.
                </div>

                <div class="card-footer">
                    <div class="stats">
                        <div class="reactions">
                            <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
                            <span>1.8k</span>
                        </div>
                        <span>8 comments • 18 shares</span>
                    </div>
                    <div class="actions">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">
<g>
	<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"/>
</g>
</svg> Like
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">
  <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>
</svg> Comment
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">
  <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>
</svg> Share
                        </div>
                    </div>
                </div>
            </div>
            <div class="v3-slider-card">
                <div class="user-info">
                    <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/35af6a41332353.57a1ce913e889.jpg" alt="User">
                    <div class="user-details">
                        <div class="name">dustin</div>
                        <div class="time">5h ago</div>
                    </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.
                </div>

                <div class="card-footer">
                    <div class="stats">
                        <div class="reactions">
                            <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
                            <span>2K</span>
                        </div>
                        <span>3 comments • 6 shares</span>
                    </div>
                    <div class="actions">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">
<g>
	<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"/>
</g>
</svg> Like
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">
  <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>
</svg> Comment
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">
  <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>
</svg> Share
                        </div>
                    </div>
                </div>
            </div>
            <div class="v3-slider-card">
                <div class="user-info">
                    <img src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/570a1745898621.58408191aee7a.jpg" alt="User">
                    <div class="user-details">
                        <div class="name">jason T</div>
                        <div class="time">5h ago</div>
                    </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.
                </div>

                <div class="card-footer">
                    <div class="stats">
                        <div class="reactions">
                            <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
                            <span>124</span>
                        </div>
                        <span>0 comments • 7 shares</span>
                    </div>
                    <div class="actions">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">
<g>
	<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"/>
</g>
</svg> Like
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">
  <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>
</svg> Comment
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">
  <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>
</svg> Share
                        </div>
                    </div>
                </div>
            </div>
            <div class="v3-slider-card">
                <div class="user-info">
                    <img src="https://i.pinimg.com/236x/46/c5/29/46c529df39a83ddfddd79ef2928acdc8.jpg" alt="User">
                    <div class="user-details">
                        <div class="name">Samuel</div>
                        <div class="time">5h ago</div>
                    </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.
                </div>

                <div class="card-footer">
                    <div class="stats">
                        <div class="reactions">
                            <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
                            <span>57</span>
                        </div>
                        <span>2 comments • 2 shares</span>
                    </div>
                    <div class="actions">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">
<g>
	<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"/>
</g>
</svg> Like
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">
  <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>
</svg> Comment
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">
  <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>
</svg> Share
                        </div>
                    </div>
                </div>
            </div>
            <div class="v3-slider-card">
                <div class="user-info">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZ3CKSrBlisr6XIRZEk66RDaBwgP53383vUw&s" alt="User">
                    <div class="user-details">
                        <div class="name">Liz B</div>
                        <div class="time">5h ago</div>
                    </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.
                </div>

                <div class="card-footer">
                    <div class="stats">
                        <div class="reactions">
                            <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
                            <span>13</span>
                        </div>
                        <span>0 comments • 3 shares</span>
                    </div>
                    <div class="actions">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">
<g>
	<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1   c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3   l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4   C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3   s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4   c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3   C444.801,187.101,434.001,213.101,414.401,232.701z"/>
</g>
</svg> Like
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">
  <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>
</svg> Comment
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">
  <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>
</svg> Share
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="v3-pagination"></div>
    </div>

<script>
        const slider = document.getElementById('v3-slider');
        const pagination = document.getElementById('v3-pagination');
        const cards = Array.from(slider.children);
        const cardWidth = cards[0].offsetWidth + 10; // Includes margin
        const totalWidth = cardWidth * cards.length - 10; // Adjust total width
        const containerWidth = slider.parentElement.offsetWidth;
        let currentIndex = 0;
        let isDragging = false;
        let startX = 0;
        let currentTranslate = 0;
        let prevTranslate = 0;
        let animationID;

        const updatePagination = () => {
            document.querySelectorAll('.v3-pagination-dot').forEach((dot, index) => {
                dot.classList.toggle('active', index === currentIndex);
            });
        };

        const goToSlide = (index) => {
            currentIndex = index;
            const maxOffset = Math.max(totalWidth - containerWidth, 0); // Prevent gaps
            const offset = Math.min(currentIndex * cardWidth, maxOffset);
            slider.style.transition = 'transform 0.5s ease';
            slider.style.transform = `translateX(-${offset}px)`;
            currentTranslate = -offset;
            prevTranslate = currentTranslate;
            updatePagination();
        };

        const createPagination = () => {
            const totalSlides = cards.length;
            pagination.innerHTML = '';
            for (let i = 0; i < totalSlides; i++) {
                const dot = document.createElement('div');
                dot.classList.add('v3-pagination-dot');
                dot.innerHTML = ''; // Add zero-width space to prevent being treated as empty
                if (i === 0) dot.classList.add('active');
                dot.addEventListener('click', () => goToSlide(i));
                pagination.appendChild(dot);
            }
        };

        const autoplay = () => {
            currentIndex = (currentIndex + 1) % cards.length;
            goToSlide(currentIndex);
        };

        // Drag functionality
        slider.addEventListener('mousedown', startDrag);
        slider.addEventListener('touchstart', startDrag);
        slider.addEventListener('mouseup', endDrag);
        slider.addEventListener('touchend', endDrag);
        slider.addEventListener('mousemove', drag);
        slider.addEventListener('touchmove', drag);

        function startDrag(event) {
            isDragging = true;
            startX = getPositionX(event);
            slider.style.transition = 'none';
            cancelAnimationFrame(animationID);
        }

        function endDrag() {
            isDragging = false;
            const movedBy = currentTranslate - prevTranslate;
            if (movedBy < -50 && currentIndex < cards.length - 1) {
                currentIndex++;
            }
            if (movedBy > 50 && currentIndex > 0) {
                currentIndex--;
            }
            goToSlide(currentIndex);
        }

        function drag(event) {
            if (isDragging) {
                const currentPosition = getPositionX(event);
                currentTranslate = prevTranslate + currentPosition - startX;
                slider.style.transform = `translateX(${currentTranslate}px)`;
            }
        }

        function getPositionX(event) {
            return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
        }

        // Create pagination and resize handling
        createPagination();
        window.addEventListener('resize', () => {
            slider.style.transform = 'translateX(0)';
            currentIndex = 0;
            updatePagination();
        });

        // Start autoplay
        setInterval(autoplay, 3000);
    </script>
</body>

</html>
           <!-- Code End -->

Scroll to Top

          <!-- Code Start -->
           <div class = "page-width container center-button">
<button class="btn btn--secondary scroll-top-the-top" onclick="scrollToTop()">Scroll to the top button</button> 
</div>

<style>
.scroll-top-the-top{
width: max-content;
margin: auto;
margin-top: 10px;
padding: 10px;
color: #ffffff;
border-radius: 8px;
background: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%);
border: 1px solid #2e2f3c;
}
.center-button{
justify-content: center;
display: flex;
}
</style>

<script>
function scrollToTop() {
  const duration = 1000; // Adjust this value to control the scroll speed (in milliseconds)
  const start = window.pageYOffset;
  const end = 0;
  const distance = end - start;
  const startTime = performance.now();

  function easeInOutQuad(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return (c / 2) * t * t + b;
    t--;
    return (-c / 2) * (t * (t - 2) - 1) + b;
  }

  function animateScroll() {
    const currentTime = performance.now();
    const timeElapsed = currentTime - startTime;

    window.scroll(0, easeInOutQuad(timeElapsed, start, distance, duration));

    if (timeElapsed < duration) {
      requestAnimationFrame(animateScroll);
    } else {
      window.scroll(0, end);
    }
  }

  requestAnimationFrame(animateScroll);
}
</script>
           <!-- Code End -->

Google Review

          <!-- Code Start -->
           <div class="google-container">
  <div class="google-text">"Amazing"</div>

  <img
    class="google-image"
    src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Revive_39.png?v=1733346031"
    alt="googleImage"
  />

  <div class="google-rating">Rated 4.4/5 on</div>

  <img
    class="google-logo"
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png"
    alt="googleImage"
  />
</div>

<style>
            .google-container {
                display: flex;
                align-items: center;
                background-color: #fbfbfb;
                border: 1px solid #d4edda;
                border-radius: 8px;
                padding: 2px 10px;

                width: 100%;
    border: 1px dashed #898686;
    gap: 8px;
    justify-content: center;
            }

    .google-image{
    width: 65px;
    }
    .google-logo{
    width: 45px;
  margin-top: 2px;
    }
    .google-text{
    font-size: 13px;
    font-weight: 600;
    }
    .google-rating{
    font-size: 10px;
    font-weight: 500;
    color: #000;
    }
</style>
           <!-- Code End -->

Shopify Review

          <!-- Code Start -->
           <div class="shopify-container">
  <div class="shopify-text">"Amazing"</div>

  <img
    class="shopify-image"
    src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Revive_39.png?v=1733346031"
    alt="shopifyImage"
  />

  <div class="shopify-rating">Rated 4.4/5 on</div>

  <img
    class="shopify-logo"
    src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Shopify_Logo.png"
    alt="shopifyImage"
  />
</div>

<style>
          .shopify-container {
              display: flex;
              align-items: center;
              background-color: #fbfbfb;
              border: 1px solid #d4edda;
              border-radius: 8px;
              padding: 2px 10px;

              width: 100%;
  border: 1px dashed #898686;
  gap: 8px;
  justify-content: center;
          }

  .shopify-image{
  width: 65px;
  }
  .shopify-logo{
  width: 60px;
  }
  .shopify-text{
  font-size: 13px;
  font-weight: 600;
  }
  .shopify-rating{
  font-size: 10px;
  font-weight: 500;
  color: #000;
  }
</style>
           <!-- Code End -->

Notification Urgancy

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        .notification {
            position: relative;
            display: flex;
            align-items: center;
            border: 2px dashed #ddd;
            border-radius: 10px;
           padding: 5px 8px;
            background-color: #ffffff;
            width: fit-content;

            font-size: 12px;
        }
        .profile-picture {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }
        .notification-content {
            display: flex;
            flex-direction: column;
        }
        .username {
            font-weight: bold;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
        }
        .verified-icon {
            margin-left: 5px;
            width: 14px;
            height: 14px;
        }
        .offer-text {
            font-size: 11px;
            color: #333;
        }
.time-left {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 8px;
    color: #d9534f;
    font-weight: 800;
    border: 1px solid #f5c6c6;
    border-radius: 4px;
    padding: 1px 3px;
    background-color: #f8d7da;
    line-height: 15px;
}
    </style>
    <script>
        function startCountdown(duration, display) {
            let timer = duration, minutes, seconds;
            const interval = setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = "Time left: " + minutes + ":" + seconds;

                if (--timer < 0) {
                    clearInterval(interval);
                    display.textContent = "Time's up!";
                }
            }, 1000);
        }

        window.onload = function () {
            const countdownDuration = 23 * 60 + 22; // 23 minutes and 22 seconds
            const display = document.querySelector('.time-left');
            if (display) {
                startCountdown(countdownDuration, display);
            }
        };
    </script>
</head>
<body>
    <div class="notification">
        <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/IMG_1250_295d85e6-2508-403c-b5f8-d0deb56f89b1.jpg?v=1733350877"User Profile Picture" class="profile-picture">
        <div class="notification-content">
            <div class="username">
                Mehul<img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Twitter_Verified_Badge.svg" alt="Verified Badge" class="verified-icon">
            </div>
            <div class="offer-text">
                We've mixed Black Friday and New Year’s deals just for you. Grab a big $255 off!
            </div>
        </div>
        <div class="time-left">Time left: 00:23:22</div>
    </div>
</body>
</html>
           <!-- Code End -->

People Checking Out

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>People Checking Out</title>
</head>
<body>
    <div id="checkout-message"><strong class="changing-number">5</strong> people are checking out right now</div>
    
    <script>
        let currentCount = 5;
        const minCount = 1;
        const maxCount = 10; // Set max limit if needed
        
        function updateCheckoutMessage() {
            const changeFactor = Math.random() < 0.5 ? -1 : 1;
            const changeValue = Math.floor(Math.random() * 2) + 1;
            
            currentCount += changeFactor * changeValue;
            
            if (currentCount < minCount) {
                currentCount = minCount;
            } else if (currentCount > maxCount) {
                currentCount = maxCount;
            }
            
            document.getElementById('checkout-message').innerHTML = `<strong class="changing-number">${currentCount}</strong> people are checking out right now`;
        }
        
        setInterval(updateCheckoutMessage, 10000); // Update every 10 seconds
    </script>
</body>
</html>

<style>
#checkout-message {
    font-size: 13px;
    text-align: center;
    background: #dff7f4;
    border-radius: 5px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    padding: 1px 8px;
    color: #218d8b;
    line-height: 22px;
}
.changing-number{
font-size: 14px;
font-weight: 800;
}
</style>
           <!-- Code End -->

Grid with Image

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .item-box {
            margin: 10px;
            text-align: center;

        }

        .item-box img {
            width: 30%;
border-radius: 8px;
        }

        .item-title {
            margin: 5px 0;
        }

        .item-description {
            margin: 5px 0;
        }

        
        @media (min-width: 768px) {
            .item-box {
                flex: 0 0 30%; 
            }
        .item-box img {
            width: 30%;
margin-bottom: 15px;
min-width: 150px;
        }
                .flex-container{
        display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    align-content: center;
        }
}

        
        @media (max-width: 767px) {
            .flex-container {
                flex-direction: column;
            }
        .item-box img {
            width: 32%!important;
        }

            .item-box {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
            }

            .item-box:nth-child(odd) {
                flex-direction: row-reverse; 
            }

            .item-box img, .item-box .text-content {
                width: 60%; 
            }
        }

      
    </style>
</head>
<body>

<div class="container">
    <div class="flex-container" style="padding: 30px 0px 30px 0px;">
        <div class="item-box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQOuXSNhx4c8pKvcysPWidz4NibDU-xLeaJw&s" alt="Image 1">
            <div class="text-content">
                <h4 class="item-title">Title 1</h4>
                <p class="item-description">Description 1 goes here</p>
            </div>
        </div>
        <div class="item-box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQOuXSNhx4c8pKvcysPWidz4NibDU-xLeaJw&s" alt="Image 2">
            <div class="text-content">
                <h4 class="item-title">Title 2</h4>
                <p class="item-description">Description 2 goes here</p>
            </div> </div>
        <div class="item-box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQOuXSNhx4c8pKvcysPWidz4NibDU-xLeaJw&s" alt="Image 3">
            <div class="text-content">
                <h4 class="item-title">Title 3</h4>
                <p class="item-description">Description 3 goes here</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>
           <!-- Code End -->

Grid V2

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .item-box {
            margin: 10px;
            text-align: center;

        }

        .item-box img {
            width: 30%;
border-radius: 50%;
object-fit: cover;
        }

        .item-title {
            margin: 5px 0;
        }

        .item-description {
            margin: 5px 0;
        }

        
        @media (min-width: 768px) {
            .item-box {
                flex: 0 0 30%; 
            }
        .item-box img {
            width: 30%;
margin-bottom: 15px;
min-width: 150px;
        }
                .flex-container{
        display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    align-content: center;
        }
}

        
        @media (max-width: 767px) {
            .flex-container {
                flex-direction: column;
            }
        .item-box img {
            width: 32%!important;
        }

            .item-box {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
            }

            .item-box:nth-child(odd) {
                flex-direction: row-reverse; 
            }

            .item-box img, .item-box .text-content {
                width: 60%; 
            }
        }

      
    </style>
</head>
<body>

<div class="container" style = "justify-content: center; display: flex;">
    <div class="flex-container" style="padding: 30px 0px 30px 0px;">
        <div class="item-box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQOuXSNhx4c8pKvcysPWidz4NibDU-xLeaJw&s" alt="Image 1">
            <div class="text-content">
                <h4 class="item-title">Title 1</h4>
                <p class="item-description">Description 1 goes here</p>
            </div>
        </div>
        <div class="item-box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQOuXSNhx4c8pKvcysPWidz4NibDU-xLeaJw&s" alt="Image 2">
            <div class="text-content">
                <h4 class="item-title">Title 2</h4>
                <p class="item-description">Description 2 goes here</p>
            </div> </div>
        <div class="item-box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQOuXSNhx4c8pKvcysPWidz4NibDU-xLeaJw&s" alt="Image 3">
            <div class="text-content">
                <h4 class="item-title">Title 3</h4>
                <p class="item-description">Description 3 goes here</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>
           <!-- Code End -->

Announcement Scroll

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Announcement Bar with Infinite Scroll</title>
    <style>
        .unique-announcement-bar-v1 {
            width: 100%;
            padding: 20px 0;
            overflow: hidden;
            position: relative;
            border: 1px solid #2e2f3c;
            border-left: none;
            border-right: none;
            background-color: #f9f9f9;
justify-content: center;
align-items: center;
        }

.helps-with-text {
    text-align: center;
    font-weight: 500;
    color: #2e2f3c;
    margin-bottom: 15px;
    font-size: 16px;
    width: 100%;
    display: inline-flex;
    justify-content: center;
}

        .unique-announcement-wrapper-v1 {
            display: flex;
            white-space: nowrap;
            animation: scroll-left 15s linear infinite;
        }

        .unique-announcement-text-v1 {
            color: #2e2f3c;
            font-size: 20px;
            font-weight: bold;
            margin-right: 25px;
            letter-spacing: -0.5px;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .unique-announcement-wrapper-v1 {
                animation: scroll-left 12s linear infinite;
            }
            .unique-announcement-text-v1 {
                font-size: 20px;
            }
            .helps-with-text {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="unique-announcement-bar-v1">
<span class="helps-with-text">NO MORE</span>
        <div class="unique-announcement-wrapper-v1">
            <div class="unique-announcement-text-v1">LESS TANGLES </div> 
            <div class="unique-announcement-text-v1"> - </div> 
            <div class="unique-announcement-text-v1">LESS ACNES</div>
            <div class="unique-announcement-text-v1"> - </div> 
            <div class="unique-announcement-text-v1">IRRITATED SKIN</div>
            <div class="unique-announcement-text-v1"> - </div>             
            <div class="unique-announcement-text-v1">PSORIASIS</div>
            <div class="unique-announcement-text-v1"> - </div>            
            <div class="unique-announcement-text-v1">HARD WATER</div>
            <div class="unique-announcement-text-v1"> - </div>  
            <!-- Repeated content for seamless scrolling -->
            <div class="unique-announcement-text-v1">LESS TANGLES </div> 
            <div class="unique-announcement-text-v1"> - </div> 
            <div class="unique-announcement-text-v1">LESS ACNES</div>
            <div class="unique-announcement-text-v1"> - </div> 
            <div class="unique-announcement-text-v1">IRRITATED SKIN</div>
            <div class="unique-announcement-text-v1"> - </div>             
            <div class="unique-announcement-text-v1">PSORIASIS</div>
            <div class="unique-announcement-text-v1"> - </div>            
            <div class="unique-announcement-text-v1">HARD WATER</div>
            <div class="unique-announcement-text-v1"> - </div>
 <div class="unique-announcement-text-v1">LESS TANGLES </div> 
            <div class="unique-announcement-text-v1"> - </div> 
            <div class="unique-announcement-text-v1">LESS ACNES</div>
            <div class="unique-announcement-text-v1"> - </div> 
            <div class="unique-announcement-text-v1">IRRITATED SKIN</div>
            <div class="unique-announcement-text-v1"> - </div>             
            <div class="unique-announcement-text-v1">PSORIASIS</div>
            <div class="unique-announcement-text-v1"> - </div>            
            <div class="unique-announcement-text-v1">HARD WATER</div>
 <div class="unique-announcement-text-v1">LESS TANGLES </div> 
            <div class="unique-announcement-text-v1"> - </div> 
            <div class="unique-announcement-text-v1">LESS ACNES</div>
            <div class="unique-announcement-text-v1"> - </div> 
            <div class="unique-announcement-text-v1">IRRITATED SKIN</div>
            <div class="unique-announcement-text-v1"> - </div>             
            <div class="unique-announcement-text-v1">PSORIASIS</div>
            <div class="unique-announcement-text-v1"> - </div>            
            <div class="unique-announcement-text-v1">HARD WATER</div>
 <div class="unique-announcement-text-v1">LESS TANGLES </div> 
            <div class="unique-announcement-text-v1"> - </div> 
            <div class="unique-announcement-text-v1">LESS ACNES</div>
            <div class="unique-announcement-text-v1"> - </div> 
            <div class="unique-announcement-text-v1">IRRITATED SKIN</div>
            <div class="unique-announcement-text-v1"> - </div>             
            <div class="unique-announcement-text-v1">PSORIASIS</div>
            <div class="unique-announcement-text-v1"> - </div>            
            <div class="unique-announcement-text-v1">HARD WATER</div>
        </div>
    </div>
</body>
</html>
           <!-- Code End -->

Before & After

          <!-- Code Start -->
           <main class="ba_main">
  <div class="container before_after">
    <div class="image-container">
      <div class="before_img">
        <img
          class="image-before slider-image"
          src="https://localdentalclinics.com.au/blogs/1671520930.png"
          alt="color photo"
        >
        <span
          class="before_badge ba_badge"
          style="display: block;"
          >Before</span
        >
      </div>
      <div class="after_img">
        <img
          class="image-after slider-image"
          src="https://beaulieudental.co.uk/wp-content/uploads/2020/11/teeth-whitening-after-1.jpg"
          alt="black and white"
        >
        <span class="after_badge ba_badge" style="display: block;"
          >After</span
        >
      </div>
    </div>
    <input
      type="range"
      min="0"
      max="100"
      value="50"
      aria-label="Percentage of before photo shown"
      class="ba-slider"
    >
    <div class="slider-line" aria-hidden="true"></div>
    <div class="slider-button" aria-hidden="true">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="10"
        height="10"
        fill="#fff"
        viewBox="0 0 256 256"
      >
        <rect width="256" height="256" fill="none"></rect>
        <line
          x1="128"
          y1="40"
          x2="128"
          y2="216"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        ></line>
        <line
          x1="96"
          y1="128"
          x2="16"
          y2="128"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        ></line>
        <polyline class="before_arrow"
          points="48 160 16 128 48 96"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        ></polyline>
        <line
          x1="160"
          y1="128"
          x2="240"
          y2="128"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        ></line>
        <polyline class="after_arrow"
          points="208 96 240 128 208 160"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        ></polyline>
      </svg>
    </div>
  </div>
</main>

<style>
  .ba_main {
    display: flex;
    place-items: center;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0 5rem;
    max-width: 1200px;
    width: 100%;
    margin: 50px auto;
  }

  img {
    display: block;
    max-width: 100%;
  }

  .container {
    display: grid;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    --position: 50%;
    width: 50%;
    margin: 0 auto;
  }

  .image-container {
    max-width: 1200px;
  }

  .before_badge {
    z-index: 99 !important;
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: #fff;
    padding: 0 5px;
    border-radius: 5px;
    color: #000;
  }

  .after_badge {
    z-index: 99 !important;
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #fff;
    padding: 0 5px;
    border-radius: 5px;
    color: #000;
  }

  .slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    max-height: 500px;
  }

  .image-before {
    position: absolute;
    inset: 0;
    width: var(--position);
  }

  .ba-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
    width: 100%;
    height: 100%;
  }

  .ba-slider:focus-visible ~ .slider-button {
    outline: 5px solid black;
    outline-offset: 3px;
  }

  .slider-line {
    position: absolute;
    inset: 0;
    width: .2rem;
    height: 100%;
    background-color: #fff;
    left: var(--position);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .slider-button {
    position: absolute;
    background-color: #ffffffb5 !important;
    color: black;
    padding: .5rem;
    border-radius: 100vw;
    display: grid;
    place-items: center;
    top: 50%;
    left: var(--position);
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
width: 10px;
height: 40px;
  }

  @media only screen and (max-width: 768px) {
    .container {
      width: 100%;
    }
    .ba_main {
      padding: 0 20px;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const container = document.querySelector(".before_after");
    const slider = document.querySelector(".ba-slider");

    slider.addEventListener("input", (e) => {
      container.style.setProperty("--position", `${e.target.value}%`);
    });
  });
</script>
           <!-- Code End -->

Responsive Slider

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Slider</title>
    <style>
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            background-color: #f05454;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
        }

        .user-details {
            display: flex;
            flex-direction: column;
        }

.user-name {
    font-weight: bold;
    color: #13152f;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 22px;
}
.reviewing {
    font-size: 13px;
    line-height: 20px;
}

        .rating-inline {
            font-size: 16px;
            color: #f7d131;
        }

.verified-badge {
    color: #42a5f5;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    line-height: 14px;
}

        .verified-badge img {
            width: 13px;
            height: 13px;
        }

        .product-review {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .product-image {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border: 2px dashed #e0e0e0;
            border-radius: 5px;
        }

        .rating {
            font-size: 24px;
            color: #f7d131;
            margin-top: 10px;
        }

        .description {
            font-size: 13px;
            color: #555;
            text-align: left;
            line-height: 22px;
        }
        #v2-slider-container {
            overflow: hidden;
            position: relative;
padding: 20px 5px;
max-width: 1500px;
margin-right: auto;
margin-left: auto;
        }

        #v2-slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .v2-slider-card {
            flex: 0 0 80%;
            max-width: 300px;
            height: 180px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 10px;
            box-sizing: border-box;
            gap: 10px;
            transition: transform 0.3s ease;
justify-content: space-around;
margin-right: 10px;
        }

        .v2-slider-card:hover{
            transform: translateY(-5px);
        }

        #v2-pagination {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }

.v2-pagination-dot {
    width: 18px;
    height: 6px;
    background-color: #0d437d29;
    cursor: pointer;
   }

        .v2-pagination-dot.active {
            background-color: #f05454;
width: 22px;
border-radius: 5px;

        }
    </style>
</head>
<body>
    <div id="v2-slider-container">
        <div id="v2-slider">
            <div class="v2-slider-card"> 
                        <div class="user-info">
                            <div class="user-avatar">JH</div>
                            <div class="user-details">
                                <div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
                                <div class="verified-badge">
                                    Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                                </div>
                            </div>
                        </div>
             <div class="product-review">
                     <img class="product-image" src="https://via.placeholder.com/50" alt="Product">
                    <div class="reviewing">Reviewing <br> <strong>Product name goes here</strong></div>
            </div>
                        <div class="description">Review goes here for product name goes here</div>
            </div>
                        <div class="v2-slider-card"> 
                        <div class="user-info">
                            <div class="user-avatar">JH</div>
                            <div class="user-details">
                                <div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
                                <div class="verified-badge">
                                    Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                                </div>
                            </div>
                        </div>
             <div class="product-review">
                     <img class="product-image" src="https://via.placeholder.com/50" alt="Product">
                    <div class="reviewing">Reviewing <br> <strong>Product name goes here</strong></div>
            </div>
                        <div class="description">Review goes here for product name goes here</div>
            </div>
                        <div class="v2-slider-card"> 
                        <div class="user-info">
                            <div class="user-avatar">JH</div>
                            <div class="user-details">
                                <div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
                                <div class="verified-badge">
                                    Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                                </div>
                            </div>
                        </div>
             <div class="product-review">
                     <img class="product-image" src="https://via.placeholder.com/50" alt="Product">
                    <div class="reviewing">Reviewing <br> <strong>Product name goes here</strong></div>
            </div>
                        <div class="description">Review goes here for product name goes here</div>
            </div>
                        <div class="v2-slider-card"> 
                        <div class="user-info">
                            <div class="user-avatar">JH</div>
                            <div class="user-details">
                                <div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
                                <div class="verified-badge">
                                    Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                                </div>
                            </div>
                        </div>
             <div class="product-review">
                     <img class="product-image" src="https://via.placeholder.com/50" alt="Product">
                    <div class="reviewing">Reviewing <br> <strong>Product name goes here</strong></div>
            </div>
                        <div class="description">Review goes here for product name goes here</div>
            </div>
                        <div class="v2-slider-card"> 
                        <div class="user-info">
                            <div class="user-avatar">JH</div>
                            <div class="user-details">
                                <div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
                                <div class="verified-badge">
                                    Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                                </div>
                            </div>
                        </div>
             <div class="product-review">
                     <img class="product-image" src="https://via.placeholder.com/50" alt="Product">
                    <div class="reviewing">Reviewing <br> <strong>Product name goes here</strong></div>
            </div>
                        <div class="description">Review goes here for product name goes here</div>
            </div>
                        <div class="v2-slider-card"> 
                        <div class="user-info">
                            <div class="user-avatar">JH</div>
                            <div class="user-details">
                                <div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
                                <div class="verified-badge">
                                    Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                                </div>
                            </div>
                        </div>
             <div class="product-review">
                     <img class="product-image" src="https://via.placeholder.com/50" alt="Product">
                    <div class="reviewing">Reviewing <br> <strong>Product name goes here</strong></div>
            </div>
                        <div class="description">Review goes here for product name goes here</div>
            </div>
                        <div class="v2-slider-card"> 
                        <div class="user-info">
                            <div class="user-avatar">JH</div>
                            <div class="user-details">
                                <div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
                                <div class="verified-badge">
                                    Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                                </div>
                            </div>
                        </div>
             <div class="product-review">
                     <img class="product-image" src="https://via.placeholder.com/50" alt="Product">
                    <div class="reviewing">Reviewing <br> <strong>Product name goes here</strong></div>
            </div>
                        <div class="description">Review goes here for product name goes here</div>
            </div>
                        <div class="v2-slider-card"> 
                        <div class="user-info">
                            <div class="user-avatar">JH</div>
                            <div class="user-details">
                                <div class="user-name">Name here <span class="rating-inline">★★★★★</span></div>
                                <div class="verified-badge">
                                    Verified Buyer <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" alt="Verified">
                                </div>
                            </div>
                        </div>
             <div class="product-review">
                     <img class="product-image" src="https://via.placeholder.com/50" alt="Product">
                    <div class="reviewing">Reviewing <br> <strong>Product name goes here</strong></div>
            </div>
                        <div class="description">Review goes here for product name goes here</div>
            </div>
        </div>
        <div id="v2-pagination"></div>
    </div>

    <script>
        class ResponsiveSlider {
            constructor(containerId, sliderId, paginationId) {
                this.container = document.getElementById(containerId);
                this.slider = document.getElementById(sliderId);
                this.pagination = document.getElementById(paginationId);
                this.cards = Array.from(this.slider.children);
                this.cardWidth = this.cards[0].offsetWidth + 10; // Includes margin
                this.totalWidth = this.cardWidth * this.cards.length - 10; // Adjust total width
                this.containerWidth = this.slider.parentElement.offsetWidth;
                this.currentIndex = 0;
                this.isDragging = false;
                this.startX = 0;
                this.currentTranslate = 0;
                this.prevTranslate = 0;
                this.animationID = null;

                this.init();
            }

            init() {
                this.createPagination();
                this.addEventListeners();
                this.startAutoplay();
            }

            updatePagination() {
                this.pagination.querySelectorAll('.v2-pagination-dot').forEach((dot, index) => {
                    dot.classList.toggle('active', index === this.currentIndex);
                });
            }

            goToSlide(index) {
                this.currentIndex = index;
                const maxOffset = Math.max(this.totalWidth - this.containerWidth, 0); // Prevent gaps
                const offset = Math.min(this.currentIndex * this.cardWidth, maxOffset);
                this.slider.style.transition = 'transform 0.5s ease';
                this.slider.style.transform = `translateX(-${offset}px)`;
                this.currentTranslate = -offset;
                this.prevTranslate = this.currentTranslate;
                this.updatePagination();
            }

            createPagination() {
                const totalSlides = this.cards.length;
                this.pagination.innerHTML = '';
                for (let i = 0; i < totalSlides; i++) {
                    const dot = document.createElement('div');
                    dot.classList.add('v2-pagination-dot');
                    dot.innerHTML = ''; // Add zero-width space to prevent being treated as empty
                    if (i === 0) dot.classList.add('active');
                    dot.addEventListener('click', () => this.goToSlide(i));
                    this.pagination.appendChild(dot);
                }
            }

            autoplay() {
                this.currentIndex = (this.currentIndex + 1) % this.cards.length;
                this.goToSlide(this.currentIndex);
            }

            startAutoplay() {
                setInterval(() => this.autoplay(), 3000);
            }

            startDrag(event) {
                this.isDragging = true;
                this.startX = this.getPositionX(event);
                this.slider.style.transition = 'none';
                cancelAnimationFrame(this.animationID);
            }

            endDrag() {
                this.isDragging = false;
                const movedBy = this.currentTranslate - this.prevTranslate;
                if (movedBy < -50 && this.currentIndex < this.cards.length - 1) {
                    this.currentIndex++;
                }
                if (movedBy > 50 && this.currentIndex > 0) {
                    this.currentIndex--;
                }
                this.goToSlide(this.currentIndex);
            }

            drag(event) {
                if (this.isDragging) {
                    const currentPosition = this.getPositionX(event);
                    this.currentTranslate = this.prevTranslate + currentPosition - this.startX;
                    this.slider.style.transform = `translateX(${this.currentTranslate}px)`;
                }
            }

            getPositionX(event) {
                return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
            }

            addEventListeners() {
                this.slider.addEventListener('mousedown', (e) => this.startDrag(e));
                this.slider.addEventListener('touchstart', (e) => this.startDrag(e));
                this.slider.addEventListener('mouseup', () => this.endDrag());
                this.slider.addEventListener('touchend', () => this.endDrag());
                this.slider.addEventListener('mousemove', (e) => this.drag(e));
                this.slider.addEventListener('touchmove', (e) => this.drag(e));
                window.addEventListener('resize', () => {
                    this.slider.style.transform = 'translateX(0)';
                    this.currentIndex = 0;
                    this.updatePagination();
                });
            }
        }

        // Initialize slider
        new ResponsiveSlider('v2-slider-container', 'v2-slider', 'v2-pagination');
    </script>
</body>
</html>
           <!-- Code End -->

Made in USA

          <!-- Code Start -->
           <div class = "message-under-cart">
<svg xmlns="http://www.w3.org/2000/svg" width="25" viewBox="0 0 7410 3900">
	<title>Flag of USA — black & white</title>
	<defs>
		<pattern patternUnits="userSpaceOnUse" width="494" height="420" id="s">
			<path fill="#fff" d="m247 90 70.53 217.08-184.66-134.16h228.26L176.47 307.08z"/>
		</pattern>
	</defs>
	<path fill="#fff" d="m0 0h7410v3900H0z"/>
	<path stroke="#676767" stroke-width="7410" stroke-dasharray="300" d="m3705 0v3900"/>
	<path fill="#676767" d="m0 0h2964v2100H0z"/>
	<g fill="url(#s)">
		<path d="m0 0h2964v2100H0z"/>
		<path transform="translate(247,210)" d="m0 0h2470v1680H0z"/>
	</g>
</svg>
Proudly made in the USA
</div>

<style>
.message-under-cart {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    background: #f2f2f2;
    border-radius: 8px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 20px;
    font-weight: 600;
    color: #676767;
}
</style>
           <!-- Code End -->

Made in UK

          <!-- Code Start -->
           <div class = "message-under-cart">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 60 30" width="30" height="" version="1.1" id="svg20" sodipodi:docname="Flag_of_the_United_Kingdom (black and white; variant 2).svg" inkscape:version="0.92.3 (2405546, 2018-03-11)">
  <metadata id="metadata26">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
        <dc:title/>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs id="defs24"/>
  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1017" id="namedview22" showgrid="false" inkscape:zoom="0.94666667" inkscape:cx="600" inkscape:cy="300" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="g18"/>
  <clipPath id="s">
    <path d="M0,0 v30 h60 v-30 z" id="path2"/>
  </clipPath>
  <clipPath id="t">
    <path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z" id="path5"/>
  </clipPath>
  <g clip-path="url(#s)" id="g18">
    <path d="M 0,0 V 30 H 60 V 0 Z" id="path8" inkscape:connector-curvature="0" style="fill:#676767;fill-opacity:1"/>
    <path d="M 0,0 60,30 M 60,0 0,30" id="path10" inkscape:connector-curvature="0" style="stroke:#ffffff;stroke-width:6"/>
    <path d="M 0,0 60,30 M 60,0 0,30" clip-path="url(#t)" id="path12" inkscape:connector-curvature="0" style="stroke:#676767;stroke-width:4;stroke-opacity:1"/>
    <path d="M 30,0 V 30 M 0,15 h 60" id="path14" inkscape:connector-curvature="0" style="stroke:#ffffff;stroke-width:10"/>
    <path d="M 30,0 V 30 M 0,15 h 60" id="path16" inkscape:connector-curvature="0" style="stroke:#676767;stroke-width:6;stroke-opacity:1"/>
  </g>
</svg>
Proudly made in the UK
</div>

<style>
.message-under-cart {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    background: #f2f2f2;
    border-radius: 8px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 20px;
    font-weight: 600;
    color: #676767;
align-items: center;
}
</style>
           <!-- Code End -->

Discount Copy Code

          <!-- Code Start -->
           <div class="discount-code-wrap" id="discountCodeWrap">
    Use code <span id="textToCopy">BF24</span>
    <button id="copyButton" style="border: none; background: none; cursor: pointer;">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" viewBox="0 0 24 24" version="1.1">
            <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
            <title>ic_fluent_copy_24_regular</title>
            <desc>Created with Sketch.</desc>
            <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="ic_fluent_copy_24_regular" fill="#676767" fill-rule="nonzero">
                    <path d="M5.50280381,4.62704038 L5.5,6.75 L5.5,17.2542087 C5.5,19.0491342 6.95507456,20.5042087 8.75,20.5042087 L17.3662868,20.5044622 C17.057338,21.3782241 16.2239751,22.0042087 15.2444057,22.0042087 L8.75,22.0042087 C6.12664744,22.0042087 4,19.8775613 4,17.2542087 L4,6.75 C4,5.76928848 4.62744523,4.93512464 5.50280381,4.62704038 Z M17.75,2 C18.9926407,2 20,3.00735931 20,4.25 L20,17.25 C20,18.4926407 18.9926407,19.5 17.75,19.5 L8.75,19.5 C7.50735931,19.5 6.5,18.4926407 6.5,17.25 L6.5,4.25 C6.5,3.00735931 7.50735931,2 8.75,2 L17.75,2 Z M17.75,3.5 L8.75,3.5 C8.33578644,3.5 8,3.83578644 8,4.25 L8,17.25 C8,17.6642136 8.33578644,18 8.75,18 L17.75,18 C18.1642136,18 18.5,17.6642136 18.5,17.25 L18.5,4.25 C18.5,3.83578644 18.1642136,3.5 17.75,3.5 Z" id="🎨-Color"></path>
                </g>
            </g>
        </svg>
    </button>
</div>

<script>
    document.getElementById("copyButton").addEventListener("click", function () {
        const textToCopy = document.getElementById("textToCopy").textContent;

        // Use Clipboard API for modern browsers
        navigator.clipboard.writeText(textToCopy).then(function () {
            // Hide the current content and show "Copied to clipboard!"
            const discountWrap = document.getElementById("discountCodeWrap");
            discountWrap.innerHTML = '<span class="copied-message" id="copiedMessage">Copied to clipboard!</span>';

            // Fade-in effect
            const copiedMessage = document.getElementById("copiedMessage");
            copiedMessage.style.opacity = 0;
            copiedMessage.style.transition = "opacity 1s";

            setTimeout(function () {
                copiedMessage.style.opacity = 1;
            }, 10);
        }).catch(function (err) {
            console.error("Failed to copy: ", err);
        });
    });
</script>

<style>
    .discount-code-wrap {
        display: flex;
        justify-content: center;
        font-size: 13px;
        background: #f2f2f2;
        border-radius: 8px;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        padding: 0px 20px;
        font-weight: 600;
        color: #676767;
        align-items: center;
    }

    #textToCopy {
        text-decoration: underline;
        margin-left: 4px;
        color: #0098d9;
    }


    .copied-message {
        font-size: 13px;
        font-weight: bold;
        color: #0098d9;
    }
</style>
           <!-- Code End -->

Limited Time Offer

          <!-- Code Start -->
           <div class = "limited-time-offer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#d9534f" width="15" version="1.1" id="Capa_1" viewBox="0 0 490 490" xml:space="preserve">
<g>
	<g>
		<path d="M245,0C109.5,0,0,109.5,0,245s109.5,245,245,245s245-109.5,245-245S380.5,0,245,0z M245,449.3    c-112.6,0-204.3-91.7-204.3-204.3S132.4,40.7,245,40.7S449.3,132.4,449.3,245S357.6,449.3,245,449.3z"/>
		<path d="M290.9,224.1h-25v-95.9c0-11.5-9.4-20.9-20.9-20.9s-20.9,9.4-20.9,20.9V245c0,11.5,9.4,20.9,20.9,20.9h45.9    c11.5,0,20.9-9.4,20.9-20.9S302.3,224.1,290.9,224.1z"/>
	</g>
</g>
</svg>
Limited time offer - 25% off!
</div>

<style>
.limited-time-offer {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    background: #f8d7da;
    border-radius: 8px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 20px;
    font-weight: 600;
    color: #d9534f;
align-items: center;
}
</style>
           <!-- Code End -->

Fast Delivery

          <!-- Code Start -->
           <div class = "fast-delivery-offer">
    <svg
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="15"
      fill="#007800"
      version="1.1"
      id="Layer_1"
      x="0px"
      y="0px"
      viewBox="0 0 24 24"
      style="enable-background:new 0 0 24 24;"
      xml:space="preserve"
    >
      <metadata>
        <dc:creator>Davooda</dc:creator>
        <dc:relation>https://davooda.com</dc:relation>
      </metadata>

      <style type="text/css">
        .st0{fill:none;stroke:#039903;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st1{fill:none;stroke:#039903;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st2{fill:none;stroke:#039903;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st3{fill:#039903;}
        .st4{fill:#FFFFFF;stroke:#039903;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st5{fill:none;stroke:#039903;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st6{fill:none;stroke:#039903;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        .st7{fill:#010101;}
        .st8{fill:none;stroke:#039903;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
      </style>
      <g>
        <path
          class="st0"
          d="M6,5h9v2l3.7,0.8c0.9,0.2,1.7,0.8,2.1,1.7l1.8,4c0.2,0.4,0.3,0.8,0.3,1.3v1.7V18h-3"
        />
        <line class="st0" x1="5" y1="13" x2="2" y2="13" />
      </g>
      <line class="st0" x1="15" y1="18" x2="9" y2="18" />
      <circle class="st0" cx="6.5" cy="18.5" r="2.5" />
      <circle class="st0" cx="17.5" cy="18.5" r="2.5" />
      <polyline class="st0" points="15,7 15,12 15,14 " />
      <line class="st0" x1="1" y1="9" x2="7" y2="9" />
      <line class="st0" x1="4" y1="19" x2="3" y2="19" />
    </svg>
Fast Delivery within 2-3 Days
</div>

<style>
.fast-delivery-offer {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    background: #e9fbea;
    border-radius: 8px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 20px;
    font-weight: 600;
    color: #039903;
align-items: center;
}
</style>
           <!-- Code End -->

Discount Code V2

          <!-- Code Start -->
           <div class="discount-code-wrapv1" 
id="discountCodeWrapv1">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="18" viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve">
<path fill="#676767" d="M1068.883,321.37c-4.468-29.514-20.158-55.495-44.167-73.182c-19.327-14.233-42.198-21.771-66.143-21.771  c-35.414,0-69.062,16.997-90.026,45.461c-36.488,49.595-25.865,119.627,23.703,156.154c19.326,14.233,42.198,21.771,66.156,21.771  l0,0c5.823,0,11.57-0.628,17.239-1.523c-7.372,72.734-149.308,18.749-187.409,2.457c-78.161-33.405-140.95-56.622-194.921-69.599  C321.666,315.7,110.976,574.73,142.269,760.744c4.877,29.104,0.321,41.185,9.19,49.709c-7.077,9.907-12.555,20.375-16.189,31.485  c-19.032,58.233,17.035,110.22,28.553,124.786l5.439,6.86h573.618l4.94-10.162c31.792-65.222,26.57-118.207-15.857-160.775  c66.743-85.775-166.957-173.573,102.477-229.785c153.224-31.958,188.867-96.628,181.266-139.12  c12.593-7.513,23.83-17.355,32.687-29.412C1066.08,380.32,1073.374,350.858,1068.883,321.37z M719.956,937.414h-532.79  c-11.006-16.049-28.899-49.402-17.495-84.215c12.657-38.702,59.602-70.288,135.728-91.33c31.062-8.575,71.582-13.132,117.17-13.132  c96.911,0,194.563,20.786,248.804,52.935C730.63,836.792,745.528,877.773,719.956,937.414z M1019.262,382.879  c-14.18,19.25-36.923,30.73-60.856,30.73c-16.165,0-31.625-5.081-44.693-14.732c-33.506-24.675-40.699-72.03-16.023-105.536  c14.167-19.25,36.936-30.717,60.882-30.717c16.165,0,31.626,5.081,44.68,14.706c16.227,11.954,26.838,29.514,29.859,49.454  C1036.144,346.723,1031.229,366.639,1019.262,382.879z"/>
</svg>


    Christmas special! Enjoy 20% off disocunt code <span id="textToCopyv1">Xmas24</span>
    <button id="copyButtonv1" style="border: none; background: none; cursor: pointer;">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" viewBox="0 0 24 24" version="1.1">
            <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
            <title>ic_fluent_copy_24_regular</title>
            <desc>Created with Sketch.</desc>
            <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="ic_fluent_copy_24_regular" fill="#676767" fill-rule="nonzero">
                    <path d="M5.50280381,4.62704038 L5.5,6.75 L5.5,17.2542087 C5.5,19.0491342 6.95507456,20.5042087 8.75,20.5042087 L17.3662868,20.5044622 C17.057338,21.3782241 16.2239751,22.0042087 15.2444057,22.0042087 L8.75,22.0042087 C6.12664744,22.0042087 4,19.8775613 4,17.2542087 L4,6.75 C4,5.76928848 4.62744523,4.93512464 5.50280381,4.62704038 Z M17.75,2 C18.9926407,2 20,3.00735931 20,4.25 L20,17.25 C20,18.4926407 18.9926407,19.5 17.75,19.5 L8.75,19.5 C7.50735931,19.5 6.5,18.4926407 6.5,17.25 L6.5,4.25 C6.5,3.00735931 7.50735931,2 8.75,2 L17.75,2 Z M17.75,3.5 L8.75,3.5 C8.33578644,3.5 8,3.83578644 8,4.25 L8,17.25 C8,17.6642136 8.33578644,18 8.75,18 L17.75,18 C18.1642136,18 18.5,17.6642136 18.5,17.25 L18.5,4.25 C18.5,3.83578644 18.1642136,3.5 17.75,3.5 Z" id="🎨-Color"></path>
                </g>
            </g>
        </svg>
    </button>
</div>

<script>
    document.getElementById("copyButtonv1").addEventListener("click", function () {
        const textToCopy = document.getElementById("textToCopyv1").textContent;

        // Use Clipboard API for modern browsers
        navigator.clipboard.writeText(textToCopyv1).then(function () {
            // Hide the current content and show "Copied to clipboard!"
            const discountWrap = document.getElementById("discountCodeWrapv1");
            discountWrap.innerHTML = '<span class="copied-messagev1" id="copiedMessagev1">Copied to clipboard!</span>';

            // Fade-in effect
            const copiedMessagev1 = document.getElementById("copiedMessage");
            copiedMessagev1.style.opacity = 0;
            copiedMessagev1.style.transition = "opacity 1s";

            setTimeout(function () {
                copiedMessagev1.style.opacity = 1;
            }, 10);
        }).catch(function (err) {
            console.error("Failed to copy: ", err);
        });
    });
</script>

<style>
    .discount-code-wrapv1 {
        display: flex;
        justify-content: center;
        font-size: 10px;
        background: #f2f2f2;
        border-radius: 8px;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        padding: 3px 7px;
        font-weight: 600;
        color: #676767;
        align-items: center;
gap: 2px;
    }

    #textToCopyv1 {
        text-decoration: underline;
        margin-left: 4px;
        color: #0098d9;
    }


    .copied-messagev1 {
        font-size: 12px;
        font-weight: bold;
        color: #0098d9;
    }
</style>
           <!-- Code End -->

Delivery Box

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Free Delivery and Returns Box</title>
    <style>
              .delivery-box {
                  border: 2px solid #d4d4d4;
                  border-radius: 8px;
                  padding: 12px 15px;
                  font-family: Arial, sans-serif;
                  background-color: #fff;
              }

              .delivery-box .icon {
                  display: inline-block;
                  vertical-align: middle;
                  margin-right: 10px;
              }


              .delivery-box .text {
                  display: inline-block;
                  vertical-align: middle;
              }

      .delivery-box .title {
          font-size: 14px;
          font-weight: bold;
          margin: 0;
          color: #474747;
          display: flex;
          align-items: center;
          line-height: 15px;
      }

      .delivery-box .delivery-time {
          font-size: 13px;
          color: #474747;
          line-height: 20px;
      }

              .delivery-box .delivery-time span {
                  font-weight: bold;
                  color: #039903;
              }
      .textv6{
      display:flex;
      flex-direction: column;
      gap:5px;
      justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="delivery-box">
      <div class="textv6">
        <div class="title">
          <div class="icon">
            <svg
              xmlns:dc="http://purl.org/dc/elements/1.1/"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="18"
              fill="#474747"
              version="1.1"
              id="Layer_1"
              x="0px"
              y="0px"
              viewBox="0 0 24 24"
              style="enable-background:new 0 0 24 24;"
              xml:space="preserve"
            >
              <metadata>
                <dc:creator>Davooda</dc:creator>
                <dc:relation>https://davooda.com</dc:relation>
              </metadata>

              <style type="text/css">
                .st0{fill:none;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                .st1{fill:none;stroke:#474747;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                .st2{fill:none;stroke:#474747;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                .st3{fill:#474747;}
                .st4{fill:#FFFFFF;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                .st5{fill:none;stroke:#474747;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                .st6{fill:none;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                .st7{fill:#474747;}
                .st8{fill:none;stroke:#474747;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
              </style>
              <g>
                <path
                  class="st0"
                  d="M6,5h9v2l3.7,0.8c0.9,0.2,1.7,0.8,2.1,1.7l1.8,4c0.2,0.4,0.3,0.8,0.3,1.3v1.7V18h-3"
                />
                <line class="st0" x1="5" y1="13" x2="2" y2="13" />
              </g>
              <line class="st0" x1="15" y1="18" x2="9" y2="18" />
              <circle class="st0" cx="6.5" cy="18.5" r="2.5" />
              <circle class="st0" cx="17.5" cy="18.5" r="2.5" />
              <polyline class="st0" points="15,7 15,12 15,14 " />
              <line class="st0" x1="1" y1="9" x2="7" y2="9" />
              <line class="st0" x1="4" y1="19" x2="3" y2="19" />
            </svg>
          </div>
          Free Delivery and Returns
        </div>
        <div class="delivery-time">
          Free no contact delivery for all orders<br />
          Delivered in: <span>2 - 5 working days</span>
        </div>
      </div>
    </div>
  </body>
</html>
           <!-- Code End -->

View Batch

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Product View Counter</title>
  <style>
    .view-container {
      display: flex;
      align-items: center;
      font-family: Arial, sans-serif;
    }
.view-badge {
    background-color: #f3e6e2;
    color: #d74f33;
    border-radius: 16px;
    font-weight: bold;
    margin-right: 10px;
    padding: 0px 8px;
    font-size: 11px;
    line-height: 20px;
}
    .view-text {
      font-size: 12px;
line-height:19px;
font-weight: normal;
color #474747
    }
  </style>
</head>
<body>
  <div class="view-container">
    <div class="view-badge">Views</div>
    <div class="view-text">During the last 24 hours, this product has been viewed <span id="view-count">925</span> times.</div>
  </div>

  <script>
    
    const initialViewCount = 925;
    const variation = Math.floor(Math.random() * 41) - 20;
    const newViewCount = initialViewCount + variation;

    
    document.getElementById("view-count").innerText = newViewCount;

   
    if (!localStorage.getItem("lastUpdated") || Date.now() - localStorage.getItem("lastUpdated") > 86400000) {
      localStorage.setItem("viewCount", newViewCount);
      localStorage.setItem("lastUpdated", Date.now());
    } else {
      document.getElementById("view-count").innerText = localStorage.getItem("viewCount");
    }
  </script>
</body>
</html>

           <!-- Code End -->

Batch Container

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Shipping & Returns</title>
    <style>
              .info-container-v5 {
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  gap: 5px;
      font-size:13px;
      font-weight: 500;
      color: #474747;

              }

              .info-item-v5 {
                  display: flex;
                  align-items: center;
                  gap: 10px;
              }

              .info-item span {
                  font-size: 14px;
                  color: #474747;
              }
    </style>
  </head>
  <body>
    <div class="info-container-v5">
      <div class="info-item-v5">
        <svg
          xmlns:dc="http://purl.org/dc/elements/1.1/"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="16"
          fill="#474747"
          version="1.1"
          id="Layer_1"
          x="0px"
          y="0px"
          viewBox="0 0 24 24"
          style="enable-background:new 0 0 24 24;"
          xml:space="preserve"
        >
          <metadata>
            <dc:creator>Davooda</dc:creator>
            <dc:relation>https://davooda.com</dc:relation>
          </metadata>

          <style type="text/css">
            .st0{fill:none;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
            .st1{fill:none;stroke:#474747;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
            .st2{fill:none;stroke:#474747;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
            .st3{fill:#474747;}
            .st4{fill:#FFFFFF;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
            .st5{fill:none;stroke:#474747;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
            .st6{fill:none;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
            .st7{fill:#474747;}
            .st8{fill:none;stroke:#474747;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          </style>
          <g>
            <path
              class="st0"
              d="M6,5h9v2l3.7,0.8c0.9,0.2,1.7,0.8,2.1,1.7l1.8,4c0.2,0.4,0.3,0.8,0.3,1.3v1.7V18h-3"
            />
            <line class="st0" x1="5" y1="13" x2="2" y2="13" />
          </g>
          <line class="st0" x1="15" y1="18" x2="9" y2="18" />
          <circle class="st0" cx="6.5" cy="18.5" r="2.5" />
          <circle class="st0" cx="17.5" cy="18.5" r="2.5" />
          <polyline class="st0" points="15,7 15,12 15,14 " />
          <line class="st0" x1="1" y1="9" x2="7" y2="9" />
          <line class="st0" x1="4" y1="19" x2="3" y2="19" />
        </svg>
        <span>Free Shipping Over £35</span>
      </div>
      <div class="info-item-v5">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="16"
          version="1.1"
          id="Capa_1"
          viewBox="0 0 244.948 244.948"
          xml:space="preserve"
        >
          <g>
            <g>
              <path
                style="fill:#474747;"
                d="M122.474,0C54.948,0,0.008,54.951,0.008,122.477s54.94,122.471,122.466,122.471    S244.94,189.997,244.94,122.471S190,0,122.474,0z M122.474,222.213c-55.005,0-99.752-44.742-99.752-99.742    c0-55.011,44.747-99.752,99.752-99.752s99.752,44.742,99.752,99.752C222.221,177.477,177.479,222.213,122.474,222.213z"
              />
              <g>
                <path
                  style="fill:#474747;"
                  d="M113.739,180.659c-6.092-0.228-11.438-0.881-16.023-1.958c-4.596-1.093-8.175-2.35-10.742-3.758     l6.255-18.324c1.92,1.175,4.618,2.295,8.088,3.361c3.47,1.061,7.615,1.822,12.423,2.252v-32.547     c-3.312-1.485-6.598-3.144-9.856-4.966c-3.258-1.817-6.168-3.998-8.735-6.57c-2.567-2.562-4.629-5.624-6.173-9.208     c-1.545-3.584-2.322-7.821-2.322-12.744c0-9.192,2.431-16.323,7.294-21.403c4.857-5.069,11.46-8.354,19.793-9.85V50.344h16.671     v13.951c4.699,0.31,8.817,0.946,12.341,1.909c3.525,0.946,6.783,2.067,9.774,3.329l-5.771,17.672     c-1.817-0.848-4.112-1.702-6.891-2.562c-2.779-0.848-5.929-1.485-9.459-1.92v30.122c3.312,1.501,6.652,3.182,10.019,5.047     c3.361,1.882,6.353,4.096,8.974,6.652c2.616,2.578,4.754,5.586,6.413,9.067c1.653,3.481,2.486,7.604,2.486,12.417     c0,9.839-2.486,17.497-7.457,23.002c-4.966,5.504-11.776,9.045-20.429,10.644v14.914h-16.671L113.739,180.659L113.739,180.659z      M107.484,94.341c0,3.225,1.251,5.918,3.764,8.055c2.513,2.148,5.64,4.15,9.382,5.978v-26.14c-5.026,0.228-8.48,1.458-10.34,3.72     C108.42,88.205,107.484,91.006,107.484,94.341z M137.459,148.274c0-3.389-1.36-6.162-4.085-8.316     c-2.725-2.159-6.01-4.145-9.861-5.945v28.218c4.705-0.538,8.202-2.012,10.503-4.438     C136.311,155.361,137.459,152.19,137.459,148.274z"
                />
              </g>
            </g>
          </g>
        </svg>
        <span>30 Day Free Returns</span>
      </div>
      <div class="info-item-v5">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="474747"
          width="17"
          viewBox="0 0 24 24"
        >
          <path
            fill-rule="evenodd"
            d="M3.5 8a5.5 5.5 0 118.596 4.547 9.005 9.005 0 015.9 8.18.75.75 0 01-1.5.045 7.5 7.5 0 00-14.993 0 .75.75 0 01-1.499-.044 9.005 9.005 0 015.9-8.181A5.494 5.494 0 013.5 8zM9 4a4 4 0 100 8 4 4 0 000-8z"
          />
          <path
            d="M17.29 8c-.148 0-.292.01-.434.03a.75.75 0 11-.212-1.484 4.53 4.53 0 013.38 8.097 6.69 6.69 0 013.956 6.107.75.75 0 01-1.5 0 5.193 5.193 0 00-3.696-4.972l-.534-.16v-1.676l.41-.209A3.03 3.03 0 0017.29 8z"
          />
        </svg>
        <span>4+ Million Customers Worldwide</span>
      </div>
    </div>
  </body>
</html>
           <!-- Code End -->

Container Info

          <!-- Code Start -->
           <div class='shopify-section' id='shopify-section-template--16396034474171__11025304-9ab5-4eaf-8988-22739d85da28'>
 <style>
  [id='template--16396034474171__11025304-9ab5-4eaf-8988-22739d85da28'].facts {
        background-color: #eee9df;
    }

    .factsBody {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .factsBodyItem {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        padding: 20px 30px;
    }

    .factsBodyItemIcon {
        margin: 0 16px 0 0;
        height: 38px;
        width: auto;

    }

    .factsBodyItemTxt {
        font-weight: 400;
        font-size: 16px;
        margin: 0;
        color: #000000BF;
        text-align: center;
    }

    

    .factsBodyItemTxt p {
        margin: 0;
    }

    @media (max-width: 1000px) {
        .factsBody {
            padding: 0px 5px;
        }

        .factsBodyItem {
            flex-direction: column;
            padding: 15px 5px;
        }

        .factsBodyItemTxt {
            font-size: 12px;
            text-align: center;
            white-space: normal;
        }

        .factsBodyItemIcon {
            margin: 0;
        }

    

    }
 </style>
 <section class='facts' id='template--16396034474171__11025304-9ab5-4eaf-8988-22739d85da28'>
  <div class='factsBody'>
   <div class='factsBodyItem'>
    <img alt='image 42.png' class='factsBodyItemIcon' src='//duradry.com/cdn/shop/files/image_42.png?v=1682376660'/>
    <div class='factsBodyItemTxt'>
    </div>
   </div>
   <div class='factsBodyItem'>
    <div class='factsBodyItemTxt'>
     <p>
      <strong>
       500,000+
      </strong>
     </p>
     <p>
      CUSTOMERS
     </p>
    </div>
   </div>
   <div class='factsBodyItem'>
    <div class='factsBodyItemTxt'>
     <p>
      <strong>
       97%
      </strong>
     </p>
     <p>
      SUCCESS
     </p>
    </div>
   </div>
   <div class='factsBodyItem'>
    <div class='factsBodyItemTxt'>
     <p>
      <strong>
       3,000+
      </strong>
     </p>
     <p>
      5☆ REVIEWS
     </p>
    </div>
   </div>
  </div>
 </section>
 <script>
 </script>
</div>
           <!-- Code End -->

Limited Stock

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Limited Stock Banner</title>
    <style>
.limited-stock-container {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #282828;
    background-color: #fff;
    line-height: 22px;
}
        .limited-stock-icon {
            width: 18px;
            height: 18px;
            margin-right: 8px;
        }

        .limited-stock-text1 {
            font-weight: bold;
        }

        .limited-stock-highlight {
            color: #d74f33;
        }
    </style>
</head>
<body>
    <div class="limited-stock-container">

 <div class="dot"><span style="visibility: hidden;">.</span></div>
        
        <div>
            <span class="limited-stock-text1">Limited stock</span>
            <span class="limited-stock-text2" >Last chance to get this item, <span class="limited-stock-highlight">don't miss out!</span></span>
        </div>
    </div>
</body>
</html>

<style>
          .dot {
              width: 13px;
              height: 10px;
              background-color: #d74f33;
              border-radius: 50%;
              margin-right:15px;
              box-shadow: 0 0 10px #d74f33; /* Initial glow effect */
              animation: pulse 1.5s infinite; /* Apply pulsing animation */
          }
          @keyframes pulse {
              0% {
                  box-shadow: 0 0 10px #d74f33;
                  transform: scale(1);
              }
              50% {
                  box-shadow: 0 0 20px #d74f33;
                  transform: scale(1);
              }
              100% {
                  box-shadow: 0 0 10px #d74f33;
                  transform: scale(1);
              }
          }
.limited-stock-text1{
font-size: 14px;
line-height: 10px;
}
.limited-stock-text2{
font-size: 14px;
line-height: 10px;
}
</style>
           <!-- Code End -->

Reviews V2

          <!-- Code Start -->
           <div class="reviews-container">
  <div class="star-reviews">
 <img
    class="shopify-image"
    src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Revive_39.png?v=1733346031"
    alt="shopifyImage"
  />
  </div>
  <span class="text-grey">
rated <strong>4.5/5</strong> based on <strong>+650 Reviews</strong>
</span>
</div>

<style>
  .reviews-container {
    display: flex;
    align-items: center;

  }


  .text-grey {
    font-weight: normal;
    font-size: 10px;
    color: #868686;
  line-height: 0px;

  }

  .text-grey strong {
    font-weight: 800;

color: #2e2f3c
  }
  .star-reviews, .shopify-image {
  width: 65px;
margin-right: 5px;
  }

</style>
           <!-- Code End -->

Instagram Views

          <!-- Code Start -->
           <style>
  .instagram-views {
    border: 2px solid #dddcdc;
    border-radius: 20px;
display: flex;
flex-direction: row;
gap: 10px;
padding: 0px 15px;
font-weight: 600;
font-size: 13px;
color: #474747
  }
</style>
<div class="instagram-views">
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" width="15" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512">
  <path fill="#474747" d="M170.663 256.157c-.083-47.121 38.055-85.4 85.167-85.482 47.121-.092 85.407 38.029 85.499 85.159.091 47.13-38.047 85.4-85.176 85.492-47.112.09-85.399-38.039-85.49-85.169zm-46.108.092c.141 72.602 59.106 131.327 131.69 131.185 72.592-.14 131.35-59.089 131.209-131.691-.141-72.577-59.114-131.336-131.715-131.194-72.585.141-131.325 59.114-131.184 131.7zm237.104-137.092c.033 16.954 13.817 30.682 30.772 30.649 16.961-.034 30.689-13.811 30.664-30.765-.033-16.954-13.818-30.69-30.78-30.656-16.962.033-30.689 13.818-30.656 30.772zm-208.696 345.4c-24.958-1.086-38.511-5.234-47.543-8.709-11.961-4.628-20.496-10.177-29.479-19.093-8.966-8.951-14.532-17.461-19.202-29.397-3.508-9.033-7.73-22.569-8.9-47.527-1.269-26.983-1.559-35.078-1.683-103.433-.133-68.338.116-76.434 1.294-103.441 1.069-24.941 5.242-38.512 8.709-47.536 4.628-11.977 10.161-20.496 19.094-29.478 8.949-8.983 17.459-14.532 29.403-19.202 9.025-3.526 22.561-7.715 47.511-8.9 26.998-1.278 35.085-1.551 103.423-1.684 68.353-.133 76.448.108 103.456 1.294 24.94 1.086 38.51 5.217 47.527 8.709 11.968 4.628 20.503 10.145 29.478 19.094 8.974 8.95 14.54 17.443 19.21 29.413 3.524 8.999 7.714 22.552 8.892 47.494 1.285 26.998 1.576 35.094 1.7 103.432.132 68.355-.117 76.451-1.302 103.442-1.087 24.957-5.226 38.52-8.709 47.56-4.629 11.953-10.161 20.488-19.103 29.471-8.941 8.949-17.451 14.531-29.403 19.201-9.009 3.517-22.561 7.714-47.494 8.9-26.998 1.269-35.086 1.56-103.448 1.684-68.338.133-76.424-.124-103.431-1.294zM149.977 1.773c-27.239 1.286-45.843 5.648-62.101 12.019-16.829 6.561-31.095 15.353-45.286 29.603C28.381 57.653 19.655 71.944 13.144 88.79c-6.303 16.299-10.575 34.912-11.778 62.168C.172 178.264-.102 186.973.031 256.489c.133 69.508.439 78.234 1.741 105.548 1.302 27.231 5.649 45.827 12.019 62.092 6.569 16.83 15.353 31.089 29.611 45.289 14.25 14.2 28.55 22.918 45.404 29.438 16.282 6.294 34.902 10.583 62.15 11.777 27.305 1.203 36.022 1.468 105.521 1.336 69.532-.133 78.25-.44 105.555-1.734 27.239-1.302 45.826-5.664 62.1-12.019 16.829-6.585 31.095-15.353 45.288-29.611 14.191-14.251 22.917-28.55 29.428-45.404 6.304-16.282 10.592-34.904 11.777-62.134 1.195-27.323 1.478-36.049 1.344-105.557-.133-69.516-.447-78.225-1.741-105.522-1.294-27.256-5.657-45.844-12.019-62.118-6.577-16.829-15.352-31.08-29.602-45.288-14.25-14.192-28.55-22.935-45.404-29.429-16.29-6.304-34.903-10.6-62.15-11.778C333.747.164 325.03-.101 255.506.031c-69.507.133-78.224.431-105.529 1.742z"/>
</svg>
 Over 10m Views on Instagram
</div>
           <!-- Code End -->

TikTok Views

          <!-- Code Start -->
           <style>
  .tiktok-views {
    border: 2px solid #dddcdc;
    border-radius: 20px;
display: flex;
flex-direction: row;
gap: 10px;
padding: 0px 15px;
font-weight: 600;
font-size: 13px;
color: #474747
  }
</style>
<div class="tiktok-views">
<svg xmlns="http://www.w3.org/2000/svg" fill="#474747" width="15" viewBox="0 0 24 24" xml:space="preserve"><path d="M19.589 6.686a4.793 4.793 0 0 1-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 0 1-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 0 1 3.183-4.51v-3.5a6.329 6.329 0 0 0-5.394 10.692 6.33 6.33 0 0 0 10.857-4.424V8.687a8.182 8.182 0 0 0 4.773 1.526V6.79a4.831 4.831 0 0 1-1.003-.104z"/></svg>
 Over 10m Views on Tiktok
</div>
           <!-- Code End -->

TikTok Followers

          <!-- Code Start -->
           <style>
  .tiktok-followers{
    border: 2px solid #dddcdc;
    border-radius: 20px;
display: flex;
flex-direction: row;
gap: 10px;
padding: 0px 15px;
font-weight: 600;
font-size: 13px;
color: #474747
  }
</style>
<div class="tiktok-followers">
<svg xmlns="http://www.w3.org/2000/svg" fill="#474747" width="15" viewBox="0 0 24 24" xml:space="preserve"><path d="M19.589 6.686a4.793 4.793 0 0 1-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 0 1-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 0 1 3.183-4.51v-3.5a6.329 6.329 0 0 0-5.394 10.692 6.33 6.33 0 0 0 10.857-4.424V8.687a8.182 8.182 0 0 0 4.773 1.526V6.79a4.831 4.831 0 0 1-1.003-.104z"/></svg>
 Over 500k followers on Tiktok
</div>
           <!-- Code End -->

Instagram Followers

          <!-- Code Start -->
           <style>
  .instagram-followers{
    border: 2px solid #dddcdc;
    border-radius: 20px;
display: flex;
flex-direction: row;
gap: 10px;
padding: 0px 15px;
font-weight: 600;
font-size: 13px;
color: #474747
  }
</style>
<div class="instagram-followers">
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" width="15" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512">
  <path fill="#474747" d="M170.663 256.157c-.083-47.121 38.055-85.4 85.167-85.482 47.121-.092 85.407 38.029 85.499 85.159.091 47.13-38.047 85.4-85.176 85.492-47.112.09-85.399-38.039-85.49-85.169zm-46.108.092c.141 72.602 59.106 131.327 131.69 131.185 72.592-.14 131.35-59.089 131.209-131.691-.141-72.577-59.114-131.336-131.715-131.194-72.585.141-131.325 59.114-131.184 131.7zm237.104-137.092c.033 16.954 13.817 30.682 30.772 30.649 16.961-.034 30.689-13.811 30.664-30.765-.033-16.954-13.818-30.69-30.78-30.656-16.962.033-30.689 13.818-30.656 30.772zm-208.696 345.4c-24.958-1.086-38.511-5.234-47.543-8.709-11.961-4.628-20.496-10.177-29.479-19.093-8.966-8.951-14.532-17.461-19.202-29.397-3.508-9.033-7.73-22.569-8.9-47.527-1.269-26.983-1.559-35.078-1.683-103.433-.133-68.338.116-76.434 1.294-103.441 1.069-24.941 5.242-38.512 8.709-47.536 4.628-11.977 10.161-20.496 19.094-29.478 8.949-8.983 17.459-14.532 29.403-19.202 9.025-3.526 22.561-7.715 47.511-8.9 26.998-1.278 35.085-1.551 103.423-1.684 68.353-.133 76.448.108 103.456 1.294 24.94 1.086 38.51 5.217 47.527 8.709 11.968 4.628 20.503 10.145 29.478 19.094 8.974 8.95 14.54 17.443 19.21 29.413 3.524 8.999 7.714 22.552 8.892 47.494 1.285 26.998 1.576 35.094 1.7 103.432.132 68.355-.117 76.451-1.302 103.442-1.087 24.957-5.226 38.52-8.709 47.56-4.629 11.953-10.161 20.488-19.103 29.471-8.941 8.949-17.451 14.531-29.403 19.201-9.009 3.517-22.561 7.714-47.494 8.9-26.998 1.269-35.086 1.56-103.448 1.684-68.338.133-76.424-.124-103.431-1.294zM149.977 1.773c-27.239 1.286-45.843 5.648-62.101 12.019-16.829 6.561-31.095 15.353-45.286 29.603C28.381 57.653 19.655 71.944 13.144 88.79c-6.303 16.299-10.575 34.912-11.778 62.168C.172 178.264-.102 186.973.031 256.489c.133 69.508.439 78.234 1.741 105.548 1.302 27.231 5.649 45.827 12.019 62.092 6.569 16.83 15.353 31.089 29.611 45.289 14.25 14.2 28.55 22.918 45.404 29.438 16.282 6.294 34.902 10.583 62.15 11.777 27.305 1.203 36.022 1.468 105.521 1.336 69.532-.133 78.25-.44 105.555-1.734 27.239-1.302 45.826-5.664 62.1-12.019 16.829-6.585 31.095-15.353 45.288-29.611 14.191-14.251 22.917-28.55 29.428-45.404 6.304-16.282 10.592-34.904 11.777-62.134 1.195-27.323 1.478-36.049 1.344-105.557-.133-69.516-.447-78.225-1.741-105.522-1.294-27.256-5.657-45.844-12.019-62.118-6.577-16.829-15.352-31.08-29.602-45.288-14.25-14.192-28.55-22.935-45.404-29.429-16.29-6.304-34.903-10.6-62.15-11.778C333.747.164 325.03-.101 255.506.031c-69.507.133-78.224.431-105.529 1.742z"/>
</svg>
 Over 200k followers on Instagram
</div>

           <!-- Code End -->

Coupon Codes

          <!-- Code Start -->
           <div class='section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55-settings' id='coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
 <div class='coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
  <div class='coupon-body-bg-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
  </div>
  <div class='coupon-item-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
   <p class='coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
    EXTRA 10% OFF
   </p>
   <p class='coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
    On purchase of $100+ (use code : 10OFFTODAY)
   </p>
  </div>
  <div class='coupon-item-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
   <p class='coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
    EXTRA 5% OFF
   </p>
   <p class='coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
    For first time users (use code : FIRST5)
   </p>
  </div>
 </div>
</div>
<style>
    .coupon-body-bg-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
      display: block!important;
      background-image: linear-gradient(to left, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.3) 70%, rgba(255, 255, 255, 0.05) 100%), linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 70%, rgba(255, 255, 255, 0.05) 100%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 40px;
      z-index: 10;
      transform: rotate(-20deg);
      animation: slide 8s linear 0s infinite;
    }
    @keyframes slide {
       0% {
          transform: translateX(0%);
      }
      100% {
          transform: translateX(80rem);
      } 
    }
  </style><style>@font-face {
  font-family: 'Josefin Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.c8300d95fd4ce72542a6efba9c682da40d144fba.woff2?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=1081bc13bac779d73b77022741d8b8608aa5451af6a05907fc023625940c00f1') format('woff2'),
       url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.ed7230a86e75b34b997bd12a5e1b87fcaf7104d8.woff?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=3f19a3e11bab2423756ce410220df09957f15affd53a78fa0ec435e5660aa636') format('woff');
}

  @font-face {
  font-family: 'Josefin Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.c8300d95fd4ce72542a6efba9c682da40d144fba.woff2?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=1081bc13bac779d73b77022741d8b8608aa5451af6a05907fc023625940c00f1') format('woff2'),
       url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.ed7230a86e75b34b997bd12a5e1b87fcaf7104d8.woff?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=3f19a3e11bab2423756ce410220df09957f15affd53a78fa0ec435e5660aa636') format('woff');
}

  
  .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
    border-top: solid #000000 0px;
    border-bottom: solid #000000 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    overflow: hidden;

  }
  
  .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55-settings {
    max-width: 120rem;
    margin: 0 auto;
    padding-top: 9px;
    padding-bottom: 0px;
    padding-left: 0rem;
    padding-right: 0rem;
  }

  .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
    padding: 6px 30px;
    border-radius: 12px;
    border: 0px solid #000000;
    background-color: #19c8ae;
    position: relative;
    overflow: hidden;
display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:after,
  .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
  }

  .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:before {
    left: -10px;
  }

  .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:after {
    right: -10px;
  }

  .coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
    margin: 0px;
    font-size: 14px;
    color: #ffffff;
    line-height: 130%;
    text-transform: unset;
    text-align: left;
    font-weight: 700;
  }

  .coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
    margin: 0px;
    margin-top 3px;
    font-size: 12px;
    color: #ffffff;
    line-height: 130%;
    text-transform: unset;
    text-align: left;
  }
  
  @media(min-width: 1024px) {

    .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
      margin-top: 0px;
      margin-bottom: 0px;
    }
    
    .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55-settings {
      padding: 0 5rem;
      padding-top: 12px;
      padding-bottom: 0px;
      padding-left: 0rem;
      padding-right: 0rem;
    }

    .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
      padding: 8px 40px;
    }

    .coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
      font-size: 16px;
    }

    .coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
      margin-top 4px;
      font-size: 12px;
    }
  }</style>
           <!-- Code End -->

Coupon V2

          <!-- Code Start -->
           <div class='section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55-settings' id='coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
 <div class='coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
  <div class='coupon-body-bg-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
  </div>
  <div class='coupon-item-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
   <p class='coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
    EXTRA 10% OFF
   </p>
   <p class='coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
    On purchase of $100+ (use code : 10OFFTODAY)
   </p>
  </div>
  <div class='coupon-item-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
   <p class='coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
    EXTRA 5% OFF
   </p>
   <p class='coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
    For first time users (use code : FIRST5)
   </p>
  </div>
 </div>
</div>
<style>
    .coupon-body-bg-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
      display: block!important;
      background-image: linear-gradient(to left, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.3) 70%, rgba(255, 255, 255, 0.05) 100%), linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 70%, rgba(255, 255, 255, 0.05) 100%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 40px;
      z-index: 10;
      transform: rotate(-20deg);
      animation: slide 8s linear 0s infinite;
    }
    @keyframes slide {
       0% {
          transform: translateX(0%);
      }
      100% {
          transform: translateX(80rem);
      } 
    }
  </style><style>@font-face {
  font-family: 'Josefin Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.c8300d95fd4ce72542a6efba9c682da40d144fba.woff2?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=1081bc13bac779d73b77022741d8b8608aa5451af6a05907fc023625940c00f1') format('woff2'),
       url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.ed7230a86e75b34b997bd12a5e1b87fcaf7104d8.woff?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=3f19a3e11bab2423756ce410220df09957f15affd53a78fa0ec435e5660aa636') format('woff');
}

  @font-face {
  font-family: 'Josefin Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.c8300d95fd4ce72542a6efba9c682da40d144fba.woff2?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=1081bc13bac779d73b77022741d8b8608aa5451af6a05907fc023625940c00f1') format('woff2'),
       url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.ed7230a86e75b34b997bd12a5e1b87fcaf7104d8.woff?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=3f19a3e11bab2423756ce410220df09957f15affd53a78fa0ec435e5660aa636') format('woff');
}

  
  .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
    border-top: solid #000000 0px;
    border-bottom: solid #000000 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    overflow: hidden;

  }
  
  .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55-settings {
    max-width: 120rem;
    margin: 0 auto;
    padding-top: 9px;
    padding-bottom: 0px;
    padding-left: 0rem;
    padding-right: 0rem;
  }

  .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
    padding: 6px 30px;
    border-radius: 12px;
    border: 0px solid #000000;
    background-color: #19c8ae;
    position: relative;
    overflow: hidden;
display: flex;
    flex-direction: row;
    gap: 9px;
  }

  .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:after,
  .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
  }

  .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:before {
    left: -10px;
  }

  .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:after {
    right: -10px;
  }

  .coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
    margin: 0px;
    font-size: 14px;
    color: #ffffff;
    line-height: 130%;
    text-transform: unset;
    text-align: left;
    font-weight: 700;
  }

  .coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
    margin: 0px;
    margin-top 3px;
    font-size: 12px;
    color: #ffffff;
    line-height: 130%;
    text-transform: unset;
    text-align: left;
  }
  
  @media(min-width: 1024px) {

    .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
      margin-top: 0px;
      margin-bottom: 0px;
    }
    
    .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55-settings {
      padding: 0 5rem;
      padding-top: 12px;
      padding-bottom: 0px;
      padding-left: 0rem;
      padding-right: 0rem;
    }

    .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
      padding: 8px 40px;
    }

    .coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
      font-size: 16px;
    }

    .coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
      margin-top 4px;
      font-size: 12px;
    }
  }</style>

           <!-- Code End -->

Slider

          <!-- Code Start -->
           <div class='section-template--16651111629049__1663859377890f7915-settings'>
 <div class='circle-slider-wrapper-template--16651111629049__1663859377890f7915'>
  <div class='swiper circle-slider-template--16651111629049__1663859377890f7915 preview'>
   <div class='swiper-wrapper'>
    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
     <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/snow-peak-titanium-single-wall-cup'>
      <img alt='' src='//section.store/cdn/shop/products/mug.jpg?v=1663855357'/>
     </a>
     <p class='circle-text-template--16651111629049__1663859377890f7915'>
      Mugs
     </p>
    </div>
    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
     <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/5-panel-hat'>
      <img alt='' src='//section.store/cdn/shop/files/5-panel-hat_4ee20a27-8d5a-490e-a2fc-1f9c3beb7bf5.webp?v=1663859540'/>
     </a>
     <p class='circle-text-template--16651111629049__1663859377890f7915'>
      Hats
     </p>
    </div>
    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
     <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/camp-stool'>
      <img alt='' src='//section.store/cdn/shop/files/campstool-1.webp?v=1663859592'/>
     </a>
     <p class='circle-text-template--16651111629049__1663859377890f7915'>
      Stools
     </p>
    </div>
    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
     <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/canvas-lunch-bag'>
      <img alt='' src='//section.store/cdn/shop/files/Lunchbag_Khaki_Front_8ae0e1f4-407d-4ac0-89e6-961b306ef351.jpg?v=1663859624'/>
     </a>
     <p class='circle-text-template--16651111629049__1663859377890f7915'>
      Bags
     </p>
    </div>
    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
     <a class='circle-icon-template--16651111629049__1663859377890f7915' href='/products/foraker-canvas-coat'>
      <img alt='' src='//section.store/cdn/shop/files/woolfill-jacket_6c39ae23-c0c8-4821-85f4-4b5d64333c62.webp?v=1663859701'/>
     </a>
     <p class='circle-text-template--16651111629049__1663859377890f7915'>
      Jackets
     </p>
    </div>
    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
     <div class='circle-icon-template--16651111629049__1663859377890f7915'>
      <img alt='' src='//section.store/cdn/shop/products/1_637c75a8-33f9-4c38-aebf-5a3dc31162dc.png?v=1706026914'/>
     </div>
     <p class='circle-text-template--16651111629049__1663859377890f7915'>
      Throws
     </p>
    </div>
    <div class='circle-item-template--16651111629049__1663859377890f7915 swiper-slide'>
     <div class='circle-icon-template--16651111629049__1663859377890f7915'>
      <img alt='' src='//section.store/cdn/shop/products/2_c196c504-dfa8-41e9-b151-1094c4962009.png?v=1706026914'/>
     </div>
     <p class='circle-text-template--16651111629049__1663859377890f7915'>
      Rugs
     </p>
    </div>
   </div>
  </div>
 </div>
</div>
<style>
    .circle-icon-template--16651111629049__1663859377890f7915,
    .circle-icon-template--16651111629049__1663859377890f7915 img,
    .circle-icon-template--16651111629049__1663859377890f7915 svg {
      border-radius: 50%;
    }

    .circle-icon-template--16651111629049__1663859377890f7915 img,
    .circle-icon-template--16651111629049__1663859377890f7915 svg {
      border-radius: 50%;
    }
    
  </style><style>
    .circle-icon-template--16651111629049__1663859377890f7915 {
      background-image: linear-gradient(133deg, rgba(250, 220, 54, 1) 11%, rgba(254, 98, 146, 1) 49%, rgba(250, 220, 54, 1) 87%);
      border: 0px;
      padding: 2px;
    }
  </style><style>@font-face {
  font-family: 'Josefin Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.c8300d95fd4ce72542a6efba9c682da40d144fba.woff2?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=1081bc13bac779d73b77022741d8b8608aa5451af6a05907fc023625940c00f1') format('woff2'),
       url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.ed7230a86e75b34b997bd12a5e1b87fcaf7104d8.woff?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=3f19a3e11bab2423756ce410220df09957f15affd53a78fa0ec435e5660aa636') format('woff');
}


  .section-template--16651111629049__1663859377890f7915 {
    border-top: solid #000000 0px;
    border-bottom: solid #000000 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    overflow: hidden;
  }
  
  .section-template--16651111629049__1663859377890f7915-settings {
    margin: 0 auto;
    padding-top: 27px;
    padding-bottom: 27px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .circle-slider-wrapper-template--16651111629049__1663859377890f7915 {
    margin: 0px auto;
    width: 100%;
  }

  .circle-slider-template--16651111629049__1663859377890f7915 {
    margin: 0px auto;
    width: 100% !important;
    max-width: fit-content !important;
    overflow:visible;
  }

  .circle-item-template--16651111629049__1663859377890f7915 {
    width: 100%;
    max-width: 66px;
    box-sizing: border-box;
  }

  .circle-item-template--16651111629049__1663859377890f7915:last-child {
    margin-right: 0!important;
  }

  .circle-icon-template--16651111629049__1663859377890f7915 {
    margin: 0px auto;
    display: block;
    width: 66px;
    height: 66px;
    border: 2px solid #000000;
    overflow: hidden;
  }

  .circle-icon-template--16651111629049__1663859377890f7915 img,
  .circle-icon-template--16651111629049__1663859377890f7915 svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 4px solid #ffffff;
  }

  .circle-icon-template--16651111629049__1663859377890f7915 svg {
    background-color: #DADADA;
  }

  .circle-text-template--16651111629049__1663859377890f7915 {
    margin: 0;
    margin-top: 6px;
    font-size: 10px;
    color: #121212;
    line-height: 130%;
    text-transform: unset;
    word-wrap: break-word;
    text-align: center;
  }

  .circle-item-template--16651111629049__1663859377890f7915 {
    box-sizing: border-box !important;
  }

  @media screen and (min-width: 1024px) {
    
    .section-template--16651111629049__1663859377890f7915 {
      margin-top: 0px;
      margin-bottom: 0px;
    }
    
    .section-template--16651111629049__1663859377890f7915-settings {
      padding: 0 5rem;
      padding-top: 36px;
      padding-bottom: 36px;
      padding-left: 0rem;
      padding-right: 0rem;
    }

    .circle-item-template--16651111629049__1663859377890f7915 {
      max-width: 100px;
    }

    .circle-icon-template--16651111629049__1663859377890f7915 {
      width: 100px;
      height: 100px;
    }

    .circle-icon-template--16651111629049__1663859377890f7915 img,
    .circle-icon-template--16651111629049__1663859377890f7915 svg {
      border: 4px solid #ffffff;
    }

    .circle-text-template--16651111629049__1663859377890f7915 {
      margin-top: 8px;
      font-size: 12px;
    }

    .circle-slider-wrapper-template--16651111629049__1663859377890f7915 {
      max-width: 100%;
    }
    
  }</style><style>
  .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .swiper-wrapper {
    display: flex;
    align-items: top;
    justify-content: space-between;
    overflow: hidden;
  }

  .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q {
    width: 40%;
  }

  .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q:not(:first-child) {
    margin-left: 16px;
  } 

  @media(min-width: 1024px) {
    .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q:not(:first-child) {
      margin-left: 16px;
    } 

  .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q {
    overflow:hidden;
  }

    .circle-slider-template--16651111629049__ss_instagram_menu_NWJX7Q.preview .circle-item-template--16651111629049__ss_instagram_menu_NWJX7Q {
      width: 15%;
    }
  }
</style><style>
  .circle-slider-template--16651111629049__1663859377890f7915.preview .swiper-wrapper {
    display: flex;
    align-items: top;
    justify-content: space-between;
    overflow: hidden;
  }

  .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915 {
    width: 40%;
  }

  .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915:not(:first-child) {
    margin-left: 16px;
  } 

  @media(min-width: 1024px) {
    .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915:not(:first-child) {
      margin-left: 16px;
    } 

  .circle-slider-template--16651111629049__1663859377890f7915 {
    overflow:hidden;
  }

    .circle-slider-template--16651111629049__1663859377890f7915.preview .circle-item-template--16651111629049__1663859377890f7915 {
      width: 15%;
    }
  }
</style>
           <!-- Code End -->

Payment

          <!-- Code Start -->
           <ul aria-label='' class='ss-payment-list' id='ss-payment-list-template--16746986799353__2e7ae7f5-d59f-45a0-9421-6bc2e419d91b'>
 <p class='ss-payment-text'>
  Safe payment on our website
 </p>
 <li class='ss-payment-item'>
  <div class='ss-payment-icon'>
   <svg fill='none' height='167' viewbox='0 0 226 167' width='226' xmlns='http://www.w3.org/2000/svg'>
    <g filter='url(#filter0_d_353_4628)'>
     <rect fill='white' height='124.354' rx='14.5521' stroke='#D9D9D9' stroke-width='2.64583' width='182.562' x='21.3229' y='21.3229'>
     </rect>
     <path clip-rule='evenodd' d='M107.472 103.386V87.4005H115.723C119.104 87.4005 121.957 86.2676 124.283 84.0334L124.842 83.467C129.091 78.8411 128.812 71.6349 124.283 67.3552C122.019 65.0895 118.917 63.8622 115.723 63.9252H102.478V103.386H107.472ZM107.473 82.5544V68.7713H115.849C117.648 68.7713 119.354 69.4636 120.626 70.7224C123.325 73.3657 123.387 77.7713 120.781 80.509C119.509 81.8621 117.71 82.6174 115.849 82.5544H107.473ZM148.136 78.4949C145.996 76.5124 143.08 75.5054 139.389 75.5054C134.643 75.5054 131.076 77.2676 128.719 80.7606L133.123 83.5613C134.736 81.1697 136.939 79.9739 139.73 79.9739C141.498 79.9739 143.204 80.6347 144.538 81.8305C145.841 82.9634 146.585 84.5997 146.585 86.3305V87.4948C144.662 86.4249 142.243 85.8585 139.265 85.8585C135.791 85.8585 132.999 86.6766 130.921 88.3445C128.843 90.0123 127.788 92.2151 127.788 95.0157C127.726 97.5647 128.812 99.9877 130.735 101.624C132.689 103.386 135.171 104.267 138.086 104.267C141.529 104.267 144.259 102.725 146.337 99.6416H146.554V103.386H151.331V86.7396C151.331 83.2466 150.276 80.4774 148.136 78.4949ZM134.582 98.4145C133.558 97.6592 132.938 96.432 132.938 95.1103C132.938 93.6313 133.62 92.404 134.954 91.4285C136.319 90.453 138.026 89.9495 140.042 89.9495C142.834 89.918 145.006 90.5474 146.557 91.8061C146.557 93.946 145.719 95.8026 144.075 97.376C142.586 98.8865 140.569 99.7361 138.46 99.7361C137.064 99.7676 135.699 99.2956 134.582 98.4145ZM162.063 115.25L178.75 76.3865H173.322L165.599 95.7709H165.506L157.596 76.3865H152.168L163.117 101.656L156.914 115.25H162.063Z' fill='#3C4043' fill-rule='evenodd'>
     </path>
     <path d='M90.2316 83.9389C90.2316 82.3969 90.1075 80.855 89.8594 79.3445H68.7986V88.0612H80.8644C80.3681 90.8619 78.7552 93.3793 76.3978 94.9527V100.617H83.5939C87.8123 96.6835 90.2316 90.8619 90.2316 83.9389Z' fill='#4285F4'>
     </path>
     <path d='M68.7995 106.093C74.8169 106.093 79.9038 104.079 83.5948 100.617L76.3988 94.9528C74.3827 96.3374 71.8082 97.1242 68.7995 97.1242C62.9683 97.1242 58.0365 93.1277 56.2685 87.7781H48.8553V93.6312C52.6395 101.278 60.3628 106.093 68.7995 106.093Z' fill='#34A853'>
     </path>
     <path d='M56.2692 87.7781C55.3385 84.9774 55.3385 81.925 56.2692 79.0929V73.2712H48.8549C45.6595 79.6593 45.6595 87.2117 48.8549 93.5997L56.2692 87.7781Z' fill='#FBBC04'>
     </path>
     <path d='M68.7995 69.7469C71.9943 69.684 75.0651 70.9113 77.3603 73.1455L83.7499 66.663C79.6866 62.8239 74.3517 60.7155 68.7995 60.7785C60.3628 60.7785 52.6395 65.6246 48.8553 73.2714L56.2685 79.1245C58.0365 73.7434 62.9683 69.7469 68.7995 69.7469Z' fill='#EA4335'>
     </path>
    </g>
    <defs>
     <filter color-interpolation-filters='sRGB' filterunits='userSpaceOnUse' height='167' id='filter0_d_353_4628' width='225.208' x='0' y='0'>
      <feflood flood-opacity='0' result='BackgroundImageFix'>
      </feflood>
      <fecolormatrix in='SourceAlpha' result='hardAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'>
      </fecolormatrix>
      <feoffset>
      </feoffset>
      <fegaussianblur stddeviation='10'>
      </fegaussianblur>
      <fecomposite in2='hardAlpha' operator='out'>
      </fecomposite>
      <fecolormatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'>
      </fecolormatrix>
      <feblend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_353_4628'>
      </feblend>
      <feblend in='SourceGraphic' in2='effect1_dropShadow_353_4628' mode='normal' result='shape'>
      </feblend>
     </filter>
    </defs>
   </svg>
  </div>
 </li>
 <li class='ss-payment-item'>
  <div class='ss-payment-icon'>
   <svg fill='none' height='167' viewbox='0 0 226 167' width='226' xmlns='http://www.w3.org/2000/svg'>
    <g filter='url(#filter0_d_353_4498)'>
     <rect fill='white' height='124.354' rx='14.5521' stroke='#D9D9D9' stroke-width='2.64583' width='182.562' x='21.3229' y='21.3229'>
     </rect>
     <path clip-rule='evenodd' d='M64.1654 67.2703C66.6527 67.4801 69.14 66.0114 70.6946 64.1493C72.2232 62.2347 73.2337 59.6645 72.9746 57.0417C70.7723 57.1467 68.0518 58.5105 66.4972 60.425C65.0722 62.0774 63.8545 64.7525 64.1654 67.2703ZM93.7539 101.051V60.163H108.911C116.735 60.163 122.202 65.6182 122.202 73.5913C122.202 81.5643 116.632 87.072 108.704 87.072H100.024V101.051H93.7539ZM72.9484 67.7685C70.7571 67.6409 68.7577 68.4356 67.1427 69.0776C66.1034 69.4907 65.2233 69.8405 64.5538 69.8405C63.8024 69.8405 62.886 69.472 61.857 69.0582C60.5088 68.516 58.9674 67.8962 57.351 67.9259C53.6459 67.9784 50.2 70.1028 48.3086 73.4861C44.4222 80.2526 47.2981 90.2714 51.055 95.7791C52.8946 98.5067 55.0968 101.497 57.9987 101.392C59.2753 101.343 60.1937 100.948 61.1441 100.54C62.2382 100.07 63.3749 99.582 65.1497 99.582C66.863 99.582 67.9499 100.058 68.9933 100.514C69.9854 100.948 70.9381 101.365 72.3525 101.339C75.358 101.287 77.2494 98.6116 79.0889 95.884C81.0741 92.9565 81.9465 90.0994 82.0789 89.6659C82.0865 89.6411 82.0916 89.6242 82.0944 89.6157C82.0912 89.6125 82.0667 89.6011 82.0235 89.5811L82.0235 89.5811C81.3598 89.2736 76.2875 86.923 76.2389 80.6198C76.1901 75.3292 80.2621 72.6487 80.9031 72.2267L80.9033 72.2266C80.9422 72.201 80.9684 72.1837 80.9803 72.1747C78.3894 68.2931 74.3475 67.8735 72.9484 67.7685ZM133.655 101.365C137.593 101.365 141.246 99.3459 142.904 96.1461H143.034V101.051H148.837V80.6984C148.837 74.7973 144.174 70.9944 136.997 70.9944C130.338 70.9944 125.415 74.8498 125.234 80.1476H130.882C131.349 77.6298 133.655 75.9775 136.816 75.9775C140.65 75.9775 142.801 77.7872 142.801 81.118V83.3736L134.976 83.8456C127.695 84.2915 123.757 87.3076 123.757 92.553C123.757 97.8509 127.825 101.365 133.655 101.365ZM135.338 96.5138C131.996 96.5138 129.871 94.8877 129.871 92.3961C129.871 89.8259 131.918 88.331 135.83 88.0949L142.8 87.6491V89.957C142.8 93.7862 139.587 96.5138 135.338 96.5138ZM168.088 102.65C165.575 109.81 162.699 112.171 156.584 112.171C156.118 112.171 154.563 112.118 154.2 112.014V107.109C154.589 107.162 155.548 107.214 156.04 107.214C158.812 107.214 160.367 106.034 161.325 102.965L161.895 101.156L151.273 71.3878H157.828L165.212 95.5429H165.341L172.726 71.3878H179.099L168.088 102.65ZM100.023 65.5128H107.252C112.693 65.5128 115.802 68.4502 115.802 73.617C115.802 78.7837 112.693 81.7474 107.226 81.7474H100.023V65.5128Z' fill='black' fill-rule='evenodd'>
     </path>
    </g>
    <defs>
     <filter color-interpolation-filters='sRGB' filterunits='userSpaceOnUse' height='167' id='filter0_d_353_4498' width='225.208' x='0' y='0'>
      <feflood flood-opacity='0' result='BackgroundImageFix'>
      </feflood>
      <fecolormatrix in='SourceAlpha' result='hardAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'>
      </fecolormatrix>
      <feoffset>
      </feoffset>
      <fegaussianblur stddeviation='10'>
      </fegaussianblur>
      <fecomposite in2='hardAlpha' operator='out'>
      </fecomposite>
      <fecolormatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'>
      </fecolormatrix>
      <feblend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_353_4498'>
      </feblend>
      <feblend in='SourceGraphic' in2='effect1_dropShadow_353_4498' mode='normal' result='shape'>
      </feblend>
     </filter>
    </defs>
   </svg>
  </div>
 </li>
 <li class='ss-payment-item'>
  <div class='ss-payment-icon'>
   <svg fill='none' height='167' viewbox='0 0 226 167' width='226' xmlns='http://www.w3.org/2000/svg'>
    <g filter='url(#filter0_d_353_4698)'>
     <rect fill='#5A31F4' height='124.354' rx='14.5521' stroke='#D9D9D9' stroke-width='2.64583' width='182.562' x='21.3229' y='21.3229'>
     </rect>
     <path d='M124.269 78.5323C124.269 86.682 118.556 92.4997 110.571 92.4997H103.049C102.966 92.4997 102.884 92.5161 102.807 92.548C102.73 92.5799 102.661 92.6266 102.602 92.6855C102.543 92.7443 102.497 92.8142 102.466 92.891C102.434 92.9679 102.418 93.0502 102.418 93.1332V103.844C102.418 104.012 102.352 104.173 102.234 104.291C102.116 104.41 101.955 104.477 101.788 104.478H96.5242C96.399 104.477 96.2768 104.44 96.1729 104.37C96.0689 104.3 95.9878 104.202 95.9397 104.086C95.9079 104.011 95.8913 103.929 95.8907 103.847V65.1953C95.8903 65.1123 95.9063 65.03 95.9378 64.9531C95.9693 64.8763 96.0157 64.8064 96.0743 64.7476C96.1328 64.6887 96.2025 64.642 96.2792 64.6101C96.3559 64.5782 96.4381 64.5618 96.5211 64.5618H110.605C118.556 64.5527 124.269 70.3704 124.269 78.5323ZM117.705 78.5323C117.705 73.8469 114.51 70.4224 110.176 70.4224H103.049C102.966 70.4224 102.884 70.4388 102.807 70.4707C102.73 70.5026 102.661 70.5493 102.602 70.6081C102.543 70.667 102.497 70.7369 102.466 70.8137C102.434 70.8905 102.418 70.9728 102.418 71.0559V85.972C102.418 86.1392 102.485 86.2996 102.603 86.4178C102.721 86.536 102.882 86.6024 103.049 86.6024H110.176C114.51 86.633 117.705 83.2055 117.705 78.5323ZM125.83 97.0627C125.775 95.8128 126.034 94.569 126.582 93.4445C127.131 92.32 127.951 91.3504 128.97 90.6237C131.023 89.0783 134.234 88.2795 138.947 88.1143L143.966 87.9367V86.4555C143.966 83.487 141.976 82.2323 138.781 82.2323C135.586 82.2323 133.56 83.3646 133.095 85.2161C133.057 85.3463 132.977 85.4602 132.868 85.54C132.758 85.6198 132.625 85.6608 132.489 85.6568H127.532C127.44 85.6593 127.35 85.6416 127.266 85.6051C127.182 85.5685 127.108 85.514 127.047 85.4453C126.987 85.3766 126.943 85.2955 126.918 85.2078C126.892 85.12 126.887 85.0278 126.901 84.9376C127.636 80.5491 131.287 77.2133 139.008 77.2133C147.222 77.2133 150.187 81.0387 150.187 88.3407V103.844C150.186 104.014 150.117 104.175 149.997 104.294C149.876 104.413 149.714 104.479 149.545 104.478H144.547C144.38 104.477 144.22 104.412 144.1 104.294C144.042 104.236 143.995 104.166 143.964 104.089C143.932 104.013 143.916 103.93 143.917 103.847V102.688C143.918 102.592 143.891 102.498 143.838 102.418C143.786 102.338 143.71 102.275 143.621 102.239C143.532 102.203 143.435 102.195 143.341 102.215C143.247 102.236 143.162 102.284 143.097 102.354C141.597 103.985 139.176 105.163 135.299 105.163C129.594 105.163 125.83 102.195 125.83 97.0627ZM143.966 93.7024V92.4997L137.465 92.8425C134.041 93.0169 132.049 94.44 132.049 96.8362C132.049 99.003 133.876 100.203 137.068 100.203C141.404 100.203 143.966 97.8614 143.966 93.7024ZM155.206 116.193V111.7C155.207 111.606 155.229 111.513 155.27 111.428C155.311 111.343 155.37 111.269 155.443 111.209C155.516 111.149 155.601 111.107 155.692 111.084C155.784 111.061 155.879 111.058 155.971 111.076C156.736 111.22 157.517 111.293 158.297 111.296C159.639 111.362 160.964 110.975 162.059 110.198C163.155 109.421 163.959 108.299 164.341 107.012L164.666 105.977C164.713 105.839 164.713 105.688 164.666 105.549L154.251 78.8016C154.214 78.7047 154.2 78.6 154.212 78.4966C154.224 78.3933 154.26 78.2943 154.319 78.2082C154.377 78.1222 154.456 78.0515 154.547 78.0024C154.639 77.9533 154.741 77.9272 154.845 77.9264H159.895C160.024 77.9277 160.149 77.9678 160.255 78.0415C160.361 78.1152 160.442 78.219 160.488 78.3395L167.561 97.2035C167.605 97.3288 167.687 97.4373 167.796 97.514C167.904 97.5908 168.034 97.632 168.167 97.632C168.3 97.632 168.429 97.5908 168.538 97.514C168.646 97.4373 168.729 97.3288 168.773 97.2035L174.915 78.3915C174.957 78.263 175.04 78.1511 175.149 78.072C175.259 77.9928 175.392 77.9504 175.527 77.9508H180.751C180.856 77.9515 180.959 77.9774 181.051 78.0265C181.143 78.0755 181.223 78.1462 181.282 78.2325C181.341 78.3187 181.379 78.4181 181.391 78.522C181.404 78.6259 181.391 78.7313 181.354 78.8292L170.214 108.533C167.65 115.437 163.252 117.203 158.41 117.203C157.492 117.227 156.574 117.117 155.687 116.875C155.539 116.836 155.41 116.746 155.322 116.622C155.234 116.497 155.193 116.345 155.206 116.193ZM62.0647 62.3339C55.4301 62.2866 49.0297 64.7837 44.1801 69.3115C43.9727 69.5014 43.8434 69.7617 43.8174 70.0418C43.7913 70.3218 43.8704 70.6015 44.0393 70.8264L47.0415 74.9272C47.1388 75.0638 47.2649 75.1773 47.4108 75.2599C47.5567 75.3425 47.719 75.3921 47.8861 75.4052C48.0533 75.4183 48.2213 75.3947 48.3783 75.3359C48.5354 75.2771 48.6776 75.1846 48.7951 75.0649C50.5389 73.3216 52.6127 71.9433 54.8953 71.0106C57.1779 70.0779 59.6235 69.6095 62.0892 69.6328C72.3842 69.6328 77.7612 77.3816 77.7612 85.0325C77.7612 93.3505 72.1118 99.2019 63.9927 99.3182C57.719 99.3182 52.9908 95.1592 52.9908 89.6658C52.9973 88.2781 53.3117 86.909 53.9113 85.6574C54.5109 84.4058 55.3808 83.3029 56.4582 82.4281C56.6859 82.2379 56.8299 81.9658 56.8591 81.6705C56.8883 81.3751 56.8004 81.0802 56.6142 80.849L53.459 76.8644C53.3636 76.7439 53.245 76.6438 53.1103 76.5699C52.9755 76.4959 52.8273 76.4498 52.6744 76.4341C52.5215 76.4184 52.367 76.4335 52.22 76.4785C52.073 76.5235 51.9366 76.5975 51.8187 76.6961C49.8809 78.2573 48.3172 80.2325 47.2422 82.4767C46.1672 84.721 45.6082 87.1774 45.6062 89.6658C45.6062 99.1223 53.6426 106.541 63.9376 106.602H64.0754C76.2984 106.443 85.1367 97.3902 85.1367 85.0172C85.1367 74.0305 77.0451 62.3339 62.0678 62.3339H62.0647Z' fill='white'>
     </path>
    </g>
    <defs>
     <filter color-interpolation-filters='sRGB' filterunits='userSpaceOnUse' height='167' id='filter0_d_353_4698' width='225.208' x='0' y='0'>
      <feflood flood-opacity='0' result='BackgroundImageFix'>
      </feflood>
      <fecolormatrix in='SourceAlpha' result='hardAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'>
      </fecolormatrix>
      <feoffset>
      </feoffset>
      <fegaussianblur stddeviation='10'>
      </fegaussianblur>
      <fecomposite in2='hardAlpha' operator='out'>
      </fecomposite>
      <fecolormatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'>
      </fecolormatrix>
      <feblend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_353_4698'>
      </feblend>
      <feblend in='SourceGraphic' in2='effect1_dropShadow_353_4698' mode='normal' result='shape'>
      </feblend>
     </filter>
    </defs>
   </svg>
  </div>
 </li>
 <li class='ss-payment-item'>
  <div class='ss-payment-icon'>
   <svg fill='none' height='167' viewbox='0 0 226 167' width='226' xmlns='http://www.w3.org/2000/svg'>
    <g filter='url(#filter0_d_353_4587)'>
     <rect fill='white' height='124.354' rx='14.5521' stroke='#D9D9D9' stroke-width='2.64583' width='182.562' x='21.3229' y='21.3229'>
     </rect>
     <path clip-rule='evenodd' d='M72.3875 100.65H64.1557C63.5924 100.65 63.1133 101.059 63.0255 101.615L59.6961 122.724C59.63 123.141 59.9525 123.516 60.375 123.516H64.305C64.8683 123.516 65.3474 123.107 65.4352 122.55L66.3332 116.856C66.4198 116.299 66.9001 115.89 67.4622 115.89H70.0681C75.4907 115.89 78.62 113.266 79.4377 108.066C79.8059 105.791 79.4533 104.004 78.3877 102.752C77.218 101.377 75.1425 100.65 72.3875 100.65ZM73.3372 108.36C72.8872 111.313 70.6303 111.313 68.448 111.313H67.2058L68.0773 105.797C68.129 105.464 68.4179 105.218 68.7549 105.218H69.3243C70.8108 105.218 72.2132 105.218 72.9379 106.065C73.3696 106.571 73.5021 107.322 73.3372 108.36ZM96.9944 108.265H93.0524C92.7165 108.265 92.4263 108.511 92.3745 108.844L92.2001 109.947L91.9244 109.547C91.0711 108.308 89.1683 107.894 87.2689 107.894C82.9124 107.894 79.1921 111.194 78.4674 115.822C78.0909 118.13 78.6261 120.338 79.9357 121.877C81.1372 123.293 82.8561 123.883 84.901 123.883C88.4107 123.883 90.3575 121.626 90.3575 121.626L90.1815 122.721C90.1152 123.14 90.4377 123.516 90.8577 123.516H94.4087C94.9735 123.516 95.4498 123.106 95.5389 122.549L97.6695 109.057C97.7369 108.642 97.4155 108.265 96.9944 108.265ZM91.4994 115.937C91.119 118.189 89.3315 119.701 87.0522 119.701C85.9075 119.701 84.9923 119.334 84.4052 118.638C83.8226 117.948 83.6009 116.964 83.7864 115.869C84.1417 113.636 85.9593 112.075 88.2041 112.075C89.3231 112.075 90.2333 112.446 90.8327 113.148C91.4331 113.857 91.6715 114.847 91.4994 115.937ZM114.027 108.264H117.989C118.544 108.264 118.867 108.887 118.552 109.342L105.377 128.359C105.164 128.667 104.812 128.851 104.437 128.851H100.48C99.9232 128.851 99.5979 128.223 99.9204 127.767L104.023 121.976L99.6597 109.172C99.5088 108.727 99.8374 108.264 100.311 108.264H104.203C104.709 108.264 105.155 108.596 105.301 109.08L107.617 116.814L113.081 108.766C113.294 108.452 113.65 108.264 114.027 108.264Z' fill='#253B80' fill-rule='evenodd'>
     </path>
     <path clip-rule='evenodd' d='M156.977 122.724L160.356 101.229C160.407 100.895 160.696 100.65 161.032 100.649H164.836C165.256 100.649 165.578 101.025 165.512 101.442L162.18 122.55C162.093 123.107 161.614 123.516 161.05 123.516H157.653C157.233 123.516 156.911 123.141 156.977 122.724ZM131.104 100.65H122.871C122.309 100.65 121.83 101.059 121.742 101.615L118.413 122.724C118.346 123.141 118.669 123.516 119.089 123.516H123.314C123.706 123.516 124.042 123.23 124.104 122.84L125.048 116.856C125.135 116.299 125.615 115.89 126.177 115.89H128.782C134.206 115.89 137.334 113.266 138.153 108.066C138.522 105.791 138.167 104.004 137.102 102.751C135.933 101.377 133.859 100.65 131.104 100.65ZM132.054 108.359C131.605 111.313 129.348 111.313 127.164 111.313H125.923L126.796 105.797C126.848 105.464 127.134 105.218 127.472 105.218H128.042C129.527 105.218 130.931 105.218 131.655 106.065C132.087 106.571 132.219 107.322 132.054 108.359ZM155.709 108.265H151.77C151.431 108.265 151.144 108.51 151.093 108.844L150.918 109.946L150.642 109.547C149.788 108.308 147.887 107.894 145.987 107.894C141.631 107.894 137.912 111.194 137.187 115.822C136.811 118.13 137.344 120.338 138.654 121.877C139.858 123.293 141.574 123.882 143.619 123.882C147.129 123.882 149.075 121.625 149.075 121.625L148.9 122.721C148.834 123.14 149.156 123.515 149.579 123.515H153.128C153.69 123.515 154.169 123.106 154.257 122.549L156.389 109.057C156.454 108.642 156.132 108.265 155.709 108.265ZM150.214 115.937C149.836 118.189 148.046 119.701 145.767 119.701C144.624 119.701 143.707 119.334 143.12 118.638C142.537 117.947 142.318 116.964 142.501 115.869C142.858 113.636 144.674 112.075 146.919 112.075C148.038 112.075 148.948 112.446 149.548 113.148C150.15 113.857 150.389 114.847 150.214 115.937Z' fill='#179BD7' fill-rule='evenodd'>
     </path>
     <path d='M102.852 93.0986L103.864 86.6706L101.61 86.6182H90.8452L98.3259 39.1846C98.3488 39.0414 98.4245 38.9079 98.5348 38.8131C98.6451 38.7183 98.7866 38.666 98.9336 38.666H117.084C123.11 38.666 127.268 39.9199 129.439 42.3948C130.457 43.5559 131.105 44.7691 131.419 46.1043C131.748 47.5053 131.754 49.1791 131.432 51.2205L131.409 51.3696V52.6776L132.427 53.2543C133.284 53.709 133.965 54.2295 134.488 54.8255C135.359 55.8182 135.922 57.0798 136.16 58.5756C136.405 60.114 136.324 61.9445 135.922 64.0169C135.457 66.4009 134.706 68.4772 133.693 70.1762C132.76 71.7416 131.572 73.0398 130.161 74.0463C128.814 75.0021 127.214 75.7279 125.405 76.1925C123.651 76.6487 121.653 76.8793 119.46 76.8793H118.048C117.038 76.8793 116.056 77.243 115.287 77.8953C114.515 78.5609 114.003 79.47 113.847 80.4648L113.74 81.0436L111.952 92.3728L111.871 92.7889C111.85 92.9209 111.813 92.9866 111.759 93.0312C111.711 93.0713 111.641 93.0986 111.573 93.0986H102.852Z' fill='#253B80'>
     </path>
     <path d='M133.391 51.5212C133.337 51.8676 133.275 52.2217 133.205 52.5855C130.811 64.8749 122.623 69.1204 112.163 69.1204H106.838C105.559 69.1204 104.482 70.0492 104.282 71.3108L101.556 88.6025L100.784 93.5037C100.654 94.332 101.293 95.079 102.128 95.079H111.574C112.692 95.079 113.642 94.2663 113.818 93.1634L113.911 92.6833L115.689 81.3981L115.804 80.7792C115.977 79.6724 116.929 78.8597 118.048 78.8597H119.46C128.611 78.8597 135.775 75.1444 137.869 64.3931C138.743 59.9019 138.29 56.1518 135.976 53.5143C135.276 52.719 134.407 52.0592 133.391 51.5212Z' fill='#179BD7'>
     </path>
     <path d='M130.886 50.5232C130.52 50.4168 130.143 50.32 129.756 50.2329C129.367 50.1478 128.968 50.0724 128.558 50.0066C127.122 49.7744 125.549 49.6641 123.864 49.6641H109.637C109.287 49.6641 108.954 49.7434 108.656 49.8866C108 50.202 107.513 50.8232 107.395 51.5836L104.368 70.7521L104.281 71.3113C104.48 70.0497 105.558 69.1208 106.837 69.1208H112.162C122.621 69.1208 130.811 64.8735 133.204 52.586C133.276 52.2222 133.336 51.8681 133.39 51.5217C132.784 51.2005 132.128 50.9257 131.422 50.6915C131.248 50.6335 131.068 50.5774 130.886 50.5232Z' fill='#222D65'>
     </path>
     <path d='M107.395 51.5834C107.513 50.8229 108.001 50.2018 108.657 49.8883C108.957 49.7451 109.288 49.6658 109.637 49.6658H123.864C125.55 49.6658 127.123 49.776 128.558 50.0083C128.969 50.0741 129.368 50.1495 129.756 50.2346C130.144 50.3218 130.521 50.4185 130.887 50.5249C131.068 50.5791 131.248 50.6352 131.424 50.6913C132.13 50.9255 132.787 51.2022 133.392 51.5215C134.105 46.9799 133.387 43.8877 130.931 41.0877C128.224 38.0052 123.338 36.6855 117.086 36.6855H98.9349C97.6577 36.6855 96.5687 37.6143 96.3709 38.8779L88.8111 86.7991C88.6618 87.7472 89.3932 88.6028 90.349 88.6028H101.555L104.369 70.7519L107.395 51.5834Z' fill='#253B80'>
     </path>
    </g>
    <defs>
     <filter color-interpolation-filters='sRGB' filterunits='userSpaceOnUse' height='167' id='filter0_d_353_4587' width='225.208' x='0' y='0'>
      <feflood flood-opacity='0' result='BackgroundImageFix'>
      </feflood>
      <fecolormatrix in='SourceAlpha' result='hardAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'>
      </fecolormatrix>
      <feoffset>
      </feoffset>
      <fegaussianblur stddeviation='10'>
      </fegaussianblur>
      <fecomposite in2='hardAlpha' operator='out'>
      </fecomposite>
      <fecolormatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'>
      </fecolormatrix>
      <feblend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_353_4587'>
      </feblend>
      <feblend in='SourceGraphic' in2='effect1_dropShadow_353_4587' mode='normal' result='shape'>
      </feblend>
     </filter>
    </defs>
   </svg>
  </div>
 </li>
 <li class='ss-payment-item'>
  <div class='ss-payment-icon'>
   <svg fill='none' height='167' viewbox='0 0 226 167' width='226' xmlns='http://www.w3.org/2000/svg'>
    <g filter='url(#filter0_d_353_4479)'>
     <rect fill='white' height='124.354' rx='14.5521' stroke='#D9D9D9' stroke-width='2.64583' width='182.562' x='21.3229' y='21.3229'>
     </rect>
     <path clip-rule='evenodd' d='M113.927 110.789C107.622 116.23 99.4425 119.515 90.5049 119.515C70.5624 119.515 54.3958 103.161 54.3958 82.9865C54.3958 62.8125 70.5624 46.4583 90.5049 46.4583C99.4425 46.4583 107.622 49.7431 113.927 55.1844C120.232 49.7431 128.412 46.4583 137.349 46.4583C157.292 46.4583 173.458 62.8126 173.458 82.9866C173.458 103.161 157.292 119.515 137.349 119.515C128.412 119.515 120.232 116.23 113.927 110.789Z' fill='#ED0006' fill-rule='evenodd'>
     </path>
     <path clip-rule='evenodd' d='M113.927 110.789C121.691 104.089 126.614 94.1193 126.614 82.9865C126.614 71.8538 121.691 61.8843 113.927 55.1843C120.232 49.743 128.412 46.4583 137.349 46.4583C157.292 46.4583 173.458 62.8125 173.458 82.9865C173.458 103.161 157.292 119.515 137.349 119.515C128.412 119.515 120.232 116.23 113.927 110.789Z' fill='#F9A000' fill-rule='evenodd'>
     </path>
     <path clip-rule='evenodd' d='M113.927 110.789C121.691 104.089 126.614 94.1193 126.614 82.9866C126.614 71.854 121.691 61.8845 113.927 55.1846C106.163 61.8845 101.24 71.854 101.24 82.9866C101.24 94.1193 106.163 104.089 113.927 110.789Z' fill='#FF5E00' fill-rule='evenodd'>
     </path>
    </g>
    <defs>
     <filter color-interpolation-filters='sRGB' filterunits='userSpaceOnUse' height='167' id='filter0_d_353_4479' width='225.208' x='0' y='0'>
      <feflood flood-opacity='0' result='BackgroundImageFix'>
      </feflood>
      <fecolormatrix in='SourceAlpha' result='hardAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'>
      </fecolormatrix>
      <feoffset>
      </feoffset>
      <fegaussianblur stddeviation='10'>
      </fegaussianblur>
      <fecomposite in2='hardAlpha' operator='out'>
      </fecomposite>
      <fecolormatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'>
      </fecolormatrix>
      <feblend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_353_4479'>
      </feblend>
      <feblend in='SourceGraphic' in2='effect1_dropShadow_353_4479' mode='normal' result='shape'>
      </feblend>
     </filter>
    </defs>
   </svg>
  </div>
 </li>
 <li class='ss-payment-item'>
  <div class='ss-payment-icon'>
   <svg fill='none' height='167' viewbox='0 0 226 167' width='226' xmlns='http://www.w3.org/2000/svg'>
    <g filter='url(#filter0_d_353_4566)'>
     <rect fill='white' height='124.354' rx='14.5521' stroke='#D9D9D9' stroke-width='2.64583' width='182.562' x='21.3229' y='21.3229'>
     </rect>
     <path clip-rule='evenodd' d='M76.2253 106.033H65.0053L56.5916 73.9349C56.1923 72.4584 55.3444 71.153 54.0971 70.5378C50.9844 68.9917 47.5543 67.7613 43.8125 67.1407V65.9049H61.8871C64.3816 65.9049 66.2526 67.7613 66.5644 69.9172L70.9299 93.071L82.1444 65.9049H93.0526L76.2253 106.033ZM99.2891 106.033H88.6927L97.4182 65.9049H108.015L99.2891 106.033ZM121.724 77.0216C122.035 74.8603 123.906 73.6245 126.089 73.6245C129.519 73.3142 133.256 73.9348 136.374 75.4755L138.245 66.8356C135.126 65.5998 131.696 64.9792 128.584 64.9792C118.299 64.9792 110.815 70.5377 110.815 78.252C110.815 84.1207 116.116 87.2022 119.858 89.0585C123.906 90.9095 125.466 92.1453 125.154 93.9964C125.154 96.7729 122.035 98.0087 118.923 98.0087C115.181 98.0087 111.439 97.0832 108.015 95.5371L106.144 104.182C109.885 105.723 113.934 106.344 117.675 106.344C129.207 106.649 136.374 101.095 136.374 92.7606C136.374 82.2643 121.724 81.6491 121.724 77.0216ZM173.458 106.033L165.045 65.9049H156.007C154.136 65.9049 152.266 67.1407 151.642 68.9917L136.062 106.033H146.97L149.147 100.17H162.55L163.797 106.033H173.458ZM157.566 76.7111L160.679 91.8349H151.954L157.566 76.7111Z' fill='#172B85' fill-rule='evenodd'>
     </path>
    </g>
    <defs>
     <filter color-interpolation-filters='sRGB' filterunits='userSpaceOnUse' height='167' id='filter0_d_353_4566' width='225.208' x='0' y='0'>
      <feflood flood-opacity='0' result='BackgroundImageFix'>
      </feflood>
      <fecolormatrix in='SourceAlpha' result='hardAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'>
      </fecolormatrix>
      <feoffset>
      </feoffset>
      <fegaussianblur stddeviation='10'>
      </fegaussianblur>
      <fecomposite in2='hardAlpha' operator='out'>
      </fecomposite>
      <fecolormatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'>
      </fecolormatrix>
      <feblend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_353_4566'>
      </feblend>
      <feblend in='SourceGraphic' in2='effect1_dropShadow_353_4566' mode='normal' result='shape'>
      </feblend>
     </filter>
    </defs>
   </svg>
  </div>
 </li>
 <li class='ss-payment-item'>
  <div class='ss-payment-icon'>
   <svg fill='none' height='167' viewbox='0 0 226 167' width='226' xmlns='http://www.w3.org/2000/svg'>
    <g filter='url(#filter0_d_353_4785)'>
     <rect fill='#FEB4C7' height='124.354' rx='14.5521' stroke='#D9D9D9' stroke-width='2.64583' width='182.562' x='21.3229' y='21.3229'>
     </rect>
     <path clip-rule='evenodd' d='M48.7028 101.384H41.1666V67.625H48.7028V101.384ZM67.5176 67.625H60.1448C60.1448 73.8375 57.3665 79.5396 52.5225 83.2701L49.6016 85.519L60.9193 101.385H70.2247L59.8109 86.7858C64.7472 81.7323 67.5176 74.9335 67.5176 67.625ZM79.5379 101.375H72.4209V67.6315H79.5379V101.375ZM101.041 78.0331V79.5263C99.1207 78.1795 96.8028 77.388 94.3029 77.388C87.6864 77.388 82.3227 82.9022 82.3227 89.7044C82.3227 96.5066 87.6864 102.021 94.3029 102.021C96.8028 102.021 99.1207 101.229 101.041 99.8829V101.375H107.839V78.0331H101.041ZM101.021 89.7046C101.021 93.0213 98.2628 95.7102 94.8609 95.7102C91.4593 95.7102 88.7015 93.0213 88.7015 89.7046C88.7015 86.3878 91.4593 83.6996 94.8609 83.6996C98.2628 83.6996 101.021 86.3878 101.021 89.7046ZM172.755 79.5263V78.0331H179.553V101.375H172.755V99.8829C170.835 101.229 168.517 102.021 166.016 102.021C159.4 102.021 154.036 96.5066 154.036 89.7044C154.036 82.9022 159.4 77.388 166.016 77.388C168.517 77.388 170.835 78.1795 172.755 79.5263ZM166.575 95.7102C169.976 95.7102 172.734 93.0213 172.734 89.7046C172.734 86.3878 169.976 83.6996 166.575 83.6996C163.173 83.6996 160.415 86.3878 160.415 89.7046C160.415 93.0213 163.173 95.7102 166.575 95.7102ZM141.957 77.4054C139.242 77.4054 136.672 78.2721 134.954 80.6632V78.0346H128.185V101.375H135.037V89.1087C135.037 85.5592 137.352 83.821 140.14 83.821C143.127 83.821 144.845 85.6558 144.845 89.0603V101.375H151.634V86.5314C151.634 81.0995 147.433 77.4054 141.957 77.4054ZM118.354 78.0333V81.0733C119.717 79.2498 122.256 78.0346 125.016 78.0346V84.8266C125.004 84.8265 124.991 84.8258 124.979 84.8251L124.955 84.824C124.949 84.8237 124.942 84.8236 124.936 84.8236C122.246 84.8236 118.37 86.7999 118.37 90.4766V101.374H111.395V78.0333H118.354ZM182.503 97.4813C182.503 95.059 184.412 93.0957 186.768 93.0957C189.124 93.0957 191.034 95.059 191.034 97.4813C191.034 99.9029 189.124 101.867 186.768 101.867C184.412 101.867 182.503 99.9029 182.503 97.4813Z' fill='#17120F' fill-rule='evenodd'>
     </path>
    </g>
    <defs>
     <filter color-interpolation-filters='sRGB' filterunits='userSpaceOnUse' height='167' id='filter0_d_353_4785' width='225.208' x='0' y='0'>
      <feflood flood-opacity='0' result='BackgroundImageFix'>
      </feflood>
      <fecolormatrix in='SourceAlpha' result='hardAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'>
      </fecolormatrix>
      <feoffset>
      </feoffset>
      <fegaussianblur stddeviation='10'>
      </fegaussianblur>
      <fecomposite in2='hardAlpha' operator='out'>
      </fecomposite>
      <fecolormatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'>
      </fecolormatrix>
      <feblend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_353_4785'>
      </feblend>
      <feblend in='SourceGraphic' in2='effect1_dropShadow_353_4785' mode='normal' result='shape'>
      </feblend>
     </filter>
    </defs>
   </svg>
  </div>
 </li>
 <li class='ss-payment-item'>
  <div class='ss-payment-icon'>
   <svg fill='none' height='167' viewbox='0 0 226 167' width='226' xmlns='http://www.w3.org/2000/svg'>
    <g filter='url(#filter0_d_353_4768)'>
     <rect fill='white' height='124.354' rx='14.5521' stroke='#D9D9D9' stroke-width='2.64583' width='182.562' x='21.3229' y='21.3229'>
     </rect>
     <path d='M120.78 123.187C141.404 123.287 160.229 106.213 160.229 85.4422C160.229 62.7302 141.404 47.0294 120.78 47.0378H103.03C82.1593 47.0294 64.9791 62.7345 64.9791 85.4422C64.9791 106.217 82.1593 123.287 103.03 123.187H120.78Z' fill='#0079BE'>
     </path>
     <path d='M103.114 50.1848C84.0415 50.1912 68.5886 65.7903 68.5823 85.0433C68.5886 104.294 84.0415 119.893 103.114 119.9C122.189 119.893 137.649 104.294 137.651 85.0433C137.649 65.7903 122.192 50.1912 103.114 50.1848ZM81.2269 85.0433C81.2229 80.5919 82.5619 76.2427 85.0688 72.5643C87.5758 68.8859 91.1341 66.0494 95.2788 64.4254V105.659C91.1338 104.036 87.575 101.2 85.0679 97.5221C82.5608 93.8439 81.2221 89.4947 81.2269 85.0433ZM110.948 105.668V64.4232C115.096 66.0449 118.657 68.8812 121.166 72.5609C123.675 76.2405 125.014 80.5919 125.008 85.0455C125.013 89.4988 123.673 93.8498 121.165 97.5293C118.656 101.209 115.095 104.045 110.948 105.668Z' fill='white'>
     </path>
     <path d='M120.78 123.187C141.404 123.287 160.229 106.213 160.229 85.4422C160.229 62.7302 141.404 47.0294 120.78 47.0378H103.03C82.1593 47.0294 64.9791 62.7345 64.9791 85.4422C64.9791 106.217 82.1593 123.287 103.03 123.187H120.78Z' fill='#0079BE'>
     </path>
     <path d='M103.114 50.1848C84.0415 50.1912 68.5886 65.7903 68.5823 85.0433C68.5886 104.294 84.0415 119.893 103.114 119.9C122.189 119.893 137.649 104.294 137.651 85.0433C137.649 65.7903 122.192 50.1912 103.114 50.1848ZM81.2269 85.0433C81.2229 80.5919 82.5619 76.2427 85.0688 72.5643C87.5758 68.8859 91.1341 66.0494 95.2788 64.4254V105.659C91.1338 104.036 87.575 101.2 85.0679 97.5221C82.5608 93.8439 81.2221 89.4947 81.2269 85.0433ZM110.948 105.668V64.4232C115.096 66.0449 118.657 68.8812 121.166 72.5609C123.675 76.2405 125.014 80.5919 125.008 85.0455C125.013 89.4988 123.673 93.8498 121.165 97.5293C118.656 101.209 115.095 104.045 110.948 105.668Z' fill='white'>
     </path>
    </g>
    <defs>
     <filter color-interpolation-filters='sRGB' filterunits='userSpaceOnUse' height='167' id='filter0_d_353_4768' width='225.208' x='0' y='0'>
      <feflood flood-opacity='0' result='BackgroundImageFix'>
      </feflood>
      <fecolormatrix in='SourceAlpha' result='hardAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'>
      </fecolormatrix>
      <feoffset>
      </feoffset>
      <fegaussianblur stddeviation='10'>
      </fegaussianblur>
      <fecomposite in2='hardAlpha' operator='out'>
      </fecomposite>
      <fecolormatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'>
      </fecolormatrix>
      <feblend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_353_4768'>
      </feblend>
      <feblend in='SourceGraphic' in2='effect1_dropShadow_353_4768' mode='normal' result='shape'>
      </feblend>
     </filter>
    </defs>
   </svg>
  </div>
 </li>
 <li class='ss-payment-item'>
  <div class='ss-payment-icon'>
   <svg fill='none' height='167' viewbox='0 0 226 167' width='226' xmlns='http://www.w3.org/2000/svg'>
    <g filter='url(#filter0_d_353_4717)'>
     <rect fill='white' height='124.354' rx='14.5521' stroke='#D9D9D9' stroke-width='2.64583' width='182.562' x='21.3229' y='21.3229'>
     </rect>
     <path clip-rule='evenodd' d='M131.676 109.138C132.719 106.49 135.039 100.557 133.936 99.1198H133.944C132.845 97.6791 126.679 98.4351 123.905 98.7752L123.899 98.7759C123.055 98.8795 122.925 98.1296 123.684 97.5869C128.609 94.0529 136.678 95.0638 137.615 96.257C138.553 97.4502 137.36 105.711 132.747 109.655C132.037 110.26 131.36 109.937 131.676 109.138ZM98.5349 113.223C109.261 113.223 121.753 109.763 130.357 103.28V103.292C131.781 102.198 130.56 100.591 129.108 101.221C119.715 105.266 109.633 107.378 99.4395 107.435C85.2971 107.435 71.6172 103.474 60.5499 96.8995C59.5803 96.3236 58.8582 97.3386 59.6696 98.0802C70.3242 107.897 84.1846 113.298 98.5349 113.223Z' fill='#FF9900' fill-rule='evenodd'>
     </path>
     <path clip-rule='evenodd' d='M168.675 93.8089H173.243H173.247C173.725 93.818 174.122 93.4347 174.139 92.9469V80.0167C174.139 78.3926 174.225 76.926 174.866 75.4594C175.306 74.3437 176.342 73.5926 177.519 73.537C180.441 73.537 180.413 76.8069 180.391 79.3758C180.389 79.5924 180.387 79.8041 180.387 80.0084V93.0546C180.444 93.4732 180.785 93.7906 181.199 93.8089H185.807C186.244 93.8181 186.621 93.4957 186.688 93.0546V77.9369C186.688 75.6127 186.688 72.377 185.491 70.4547C184.197 68.3832 182.192 67.625 180.14 67.625C176.975 67.625 175.178 69.191 173.896 72.4764H173.807V68.8016C173.714 68.4174 173.383 68.1431 172.995 68.1304H168.744C168.295 68.1192 167.912 68.4614 167.863 68.9176V92.9469C167.869 93.4077 168.224 93.7847 168.675 93.8089ZM164.375 81.2055C164.375 73.6238 160.695 67.6579 153.892 67.6579C147.263 67.6579 143.583 73.5244 143.583 80.9528C143.583 88.3812 147.218 94.3471 153.892 94.3471C160.318 94.3471 164.375 88.5344 164.375 81.2055ZM150.342 80.1947C150.342 77.2615 150.557 72.5633 153.936 72.5633C155.388 72.5633 156.415 73.2303 156.93 74.8875C157.53 76.8057 157.616 79.2335 157.616 81.2553C157.616 84.3377 157.482 89.3921 153.891 89.3921C150.34 89.3921 150.341 83.2639 150.342 80.2919L150.342 80.1947ZM64.6192 93.8587H69.1994H69.2035C69.4334 93.864 69.6559 93.7758 69.8219 93.6133C69.9879 93.4508 70.0836 93.2274 70.0879 92.9926V80.2612L70.0878 80.0619C70.0859 77.2937 70.0834 73.6324 73.2523 73.6324C76.1818 73.6324 76.1365 76.8493 76.0999 79.447C76.096 79.7272 76.0921 80.0002 76.0921 80.2612V92.9967C76.0999 93.4566 76.4538 93.8325 76.9035 93.8587H81.4959C81.7251 93.8629 81.9467 93.7742 82.1118 93.6118C82.2769 93.4494 82.372 93.2267 82.3763 92.9926V80.2612L82.3762 80.115L82.3759 79.9585V79.9585C82.3731 78.6095 82.3694 76.7893 82.8063 75.6583C83.2518 74.5023 84.3288 73.7284 85.5447 73.6904C86.8714 73.6904 87.8978 74.1462 88.2385 75.7619C88.4125 76.5396 88.39 78.3423 88.375 79.5377V79.5378C88.3715 79.8199 88.3684 80.0682 88.3684 80.2612V92.9967C88.3742 93.4575 88.7292 93.8345 89.1797 93.8587H93.76C93.9899 93.864 94.2125 93.7758 94.3785 93.6133C94.5445 93.4508 94.6402 93.2274 94.6444 92.9926V77.8334C94.6444 77.4638 94.6507 77.0861 94.657 76.7042C94.6945 74.4408 94.7344 72.0314 93.4882 70.3015C91.9775 68.3392 89.5481 67.3613 87.1326 67.7434C84.7172 68.1255 82.6912 69.8081 81.8327 72.1451C80.5466 69.1083 78.7088 67.6955 75.8852 67.6955C73.0616 67.6955 70.9642 69.1083 69.8526 72.1451H69.7674V69.0089C69.7432 68.5618 69.3937 68.2049 68.956 68.1803H64.6841C64.2123 68.1755 63.8232 68.5563 63.8078 69.0379V93.0672C63.8493 93.4996 64.1943 93.836 64.6192 93.8587ZM56.6472 94.0405C56.3455 94.3077 55.912 94.3525 55.564 94.1524C54.2659 93.0495 53.8746 92.4533 53.2736 91.5378C53.1702 91.3803 53.0606 91.2133 52.9392 91.0327C50.4198 93.6511 48.6388 94.4341 45.3811 94.4341C41.523 94.4341 38.5209 92.0022 38.5209 87.1383C38.5209 83.3392 40.5493 80.7581 43.3892 79.4904C45.4862 78.5506 48.2841 78.259 50.703 78.0068C51.1528 77.9599 51.5895 77.9144 52.0061 77.8663V77.2615C52.0061 77.146 52.007 77.0283 52.0079 76.9091C52.0159 75.8778 52.0249 74.7295 51.4503 73.8642C50.8904 73.0025 49.8275 72.6503 48.8782 72.6503C47.1297 72.6503 45.5718 73.5659 45.1905 75.4593C45.1421 75.9009 44.8093 76.2544 44.3791 76.321L39.9733 75.828C39.7534 75.7958 39.5561 75.673 39.4273 75.4883C39.2985 75.3035 39.2495 75.0729 39.2917 74.8502C40.31 69.3483 45.1783 67.687 49.5395 67.687C51.7708 67.687 54.6836 68.2919 56.4362 70.0154C58.4936 71.9825 58.4809 74.5576 58.467 77.3718C58.4659 77.6041 58.4647 77.8381 58.4647 78.0735V85.361C58.4647 87.3237 59.1778 88.2999 59.9289 89.3283C60.0181 89.4505 60.1078 89.5733 60.197 89.6987C60.4891 90.113 60.554 90.6309 60.197 90.9416C59.2599 91.7412 57.5965 93.2161 56.6837 94.0488L56.6472 94.0405ZM52.0263 82.6309L52.0264 82.8577C52.028 84.581 52.0294 86.0423 51.1703 87.6025C50.44 88.9199 49.2838 89.732 47.9937 89.732C46.2371 89.732 45.2107 88.3648 45.2107 86.3347C45.2107 82.3492 48.7118 81.6241 52.0263 81.6241V82.6309ZM119.995 89.3116L119.996 89.3129L119.997 89.3139C120.086 89.4354 120.175 89.5578 120.264 89.6825C120.572 90.1134 120.637 90.6189 120.244 90.9047C119.307 91.7043 117.643 93.1834 116.73 94.012C116.427 94.2755 115.995 94.3184 115.647 94.1197C114.344 93.012 113.957 92.4246 113.348 91.4971L113.348 91.4971L113.348 91.4968C113.246 91.342 113.138 91.1777 113.018 91C110.503 93.6184 108.71 94.4014 105.464 94.4014C101.606 94.4014 98.6041 91.9695 98.6041 87.1097C98.6041 83.3065 100.62 80.7254 103.493 79.4577C105.594 78.5143 108.408 78.224 110.834 77.9737C111.274 77.9283 111.701 77.8842 112.11 77.8377V77.2453C112.11 77.1304 112.11 77.0133 112.111 76.8947C112.119 75.863 112.128 74.7143 111.55 73.8522C111.006 72.9905 109.923 72.6342 108.978 72.6342C107.229 72.6342 105.679 73.5498 105.294 75.4431C105.244 75.8841 104.912 76.2369 104.483 76.3048L100.04 75.816C99.8188 75.7849 99.6197 75.662 99.4899 75.4761C99.3601 75.2903 99.3112 75.058 99.3546 74.8341C100.377 69.3281 105.245 67.6709 109.606 67.6709C111.834 67.6709 114.747 68.2757 116.503 69.9992C118.565 71.9561 118.55 74.5113 118.534 77.3111C118.533 77.5581 118.532 77.8069 118.532 78.0573V85.349C118.532 87.3076 119.244 88.2835 119.995 89.3116ZM108.085 89.7071C109.371 89.7071 110.531 88.8951 111.258 87.5818C112.12 86.0131 112.119 84.5449 112.118 82.8001L112.118 82.6143V81.6034C108.803 81.6034 105.302 82.3243 105.302 86.314C105.302 88.3399 106.328 89.7071 108.085 89.7071ZM124.142 68.9547V72.3768C124.14 72.6115 124.232 72.837 124.397 73.0007C124.561 73.1643 124.785 73.2518 125.014 73.2427H132.901L123.858 86.5002C123.445 87.2114 123.25 88.0324 123.298 88.8576V92.3584C123.298 92.8639 123.846 93.4397 124.369 93.1539C129.357 90.513 135.288 90.5021 140.285 93.1249C140.857 93.4273 141.396 92.8431 141.396 92.3377V88.6587C141.381 88.0962 141.071 87.5853 140.585 87.3205C137.952 85.8084 134.889 85.3651 131.992 85.4355L139.798 74.0589C140.524 73.0397 140.93 72.3934 140.93 71.9004V68.9547C140.932 68.7207 140.841 68.4959 140.677 68.3324C140.513 68.1689 140.291 68.0809 140.062 68.0888H124.998C124.769 68.0757 124.545 68.1624 124.382 68.3274C124.218 68.4925 124.131 68.7204 124.142 68.9547Z' fill='black' fill-rule='evenodd'>
     </path>
    </g>
    <defs>
     <filter color-interpolation-filters='sRGB' filterunits='userSpaceOnUse' height='167' id='filter0_d_353_4717' width='225.208' x='0' y='0'>
      <feflood flood-opacity='0' result='BackgroundImageFix'>
      </feflood>
      <fecolormatrix in='SourceAlpha' result='hardAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'>
      </fecolormatrix>
      <feoffset>
      </feoffset>
      <fegaussianblur stddeviation='10'>
      </fegaussianblur>
      <fecomposite in2='hardAlpha' operator='out'>
      </fecomposite>
      <fecolormatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'>
      </fecolormatrix>
      <feblend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_353_4717'>
      </feblend>
      <feblend in='SourceGraphic' in2='effect1_dropShadow_353_4717' mode='normal' result='shape'>
      </feblend>
     </filter>
    </defs>
   </svg>
  </div>
 </li>
 <li class='ss-payment-item'>
  <div class='ss-payment-icon'>
   <svg fill='none' height='167' viewbox='0 0 226 167' width='226' xmlns='http://www.w3.org/2000/svg'>
    <g filter='url(#filter0_d_353_4458)'>
     <rect fill='#1F72CD' height='124.354' rx='14.5521' stroke='#D9D9D9' stroke-width='2.64583' width='182.562' x='21.3229' y='21.3229'>
     </rect>
     <path clip-rule='evenodd' d='M53.2035 64.9792L35.875 103.327H56.6196L59.1913 97.2124H65.0697L67.6415 103.327H90.4755V98.6601L92.5101 103.327H104.322L106.356 98.5614V103.327H153.845L159.619 97.3712L165.026 103.327L189.417 103.376L172.034 84.26L189.417 64.9792H165.404L159.783 70.8246L154.547 64.9792H102.885L98.4493 74.877L93.909 64.9792H73.2077V69.487L70.9048 64.9792H53.2035ZM124.118 70.4246H151.388L159.729 79.434L168.338 70.4246H176.679L164.006 84.2545L176.679 97.9251H167.96L159.619 88.811L150.966 97.9251H124.118V70.4246ZM130.852 81.1454V76.1222V76.1174H147.868L155.293 84.1507L147.539 92.228H130.852V86.7441H145.729V81.1454H130.852ZM57.2174 70.4246H67.3293L78.8233 96.4281V70.4246H89.9005L98.7782 89.069L106.96 70.4246H117.982V97.9413H111.275L111.221 76.3794L101.443 97.9413H95.4439L85.6117 76.3794V97.9413H71.8148L69.1992 91.7724H55.0679L52.4577 97.9359H45.0655L57.2174 70.4246ZM57.4809 86.0693L62.1366 75.08L66.7869 86.0693H57.4809Z' fill='white' fill-rule='evenodd'>
     </path>
    </g>
    <defs>
     <filter color-interpolation-filters='sRGB' filterunits='userSpaceOnUse' height='167' id='filter0_d_353_4458' width='225.208' x='0' y='0'>
      <feflood flood-opacity='0' result='BackgroundImageFix'>
      </feflood>
      <fecolormatrix in='SourceAlpha' result='hardAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'>
      </fecolormatrix>
      <feoffset>
      </feoffset>
      <fegaussianblur stddeviation='10'>
      </fegaussianblur>
      <fecomposite in2='hardAlpha' operator='out'>
      </fecomposite>
      <fecolormatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'>
      </fecolormatrix>
      <feblend in2='BackgroundImageFix' mode='normal' result='effect1_dropShadow_353_4458'>
      </feblend>
      <feblend in='SourceGraphic' in2='effect1_dropShadow_353_4458' mode='normal' result='shape'>
      </feblend>
     </filter>
    </defs>
   </svg>
  </div>
 </li>
</ul>
<style>
    /*
        Section styling
    */
    .ss-payment-text {
        width: 100%;
        text-align: center;
        margin: 0;
        color: ;
    }
  
    .ss-payment-list {
        list-style: none;
        display: flex;
        flex-wrap:wrap;
        justify-content:center;
        padding: 0;
        gap: 0px;
    }
    .ss-payment-item {
        text-align: center;
        padding: 0;
        display: flex;           
        justify-content: center;
        align-items: center;
    }
    .ss-payment-icon {
        display: flex;
        justify-content: center;
        margin-bottom: .5rem;
    }
  
    .ss-payment-icon svg {
        max-width:44px;
        max-height: calc(44px * 0.66);
    }

    .ss-payment-icon img {
        max-width:44px;
        max-height: calc(44px * 0.66);
        margin: 0 10px;
    }
  
    .ss-payment-text {
        margin-bottom: 3px;
        font-size:14px;
    }

    @media only screen and (max-width: 450px) {
      .ss-payment-list {
          gap: 0px;
      }
      
      .ss-payment-icon svg {
        max-width:60px;
        max-height: calc(60px * 0.66);
      }

      .ss-payment-icon img {
        max-width:60px;
        max-height: calc(60px * 0.66);
      }
    }
    /*
        Styles based on settings
    */
    #ss-payment-list-template--16746986799353__2e7ae7f5-d59f-45a0-9421-6bc2e419d91b {
        
            background-color: ;
        
        
            color: ;
        
        padding-top: rem;
        padding-bottom: rem;
    }
</style>
           <!-- Code End -->

Easy Setup

          <!-- Code Start -->
           <section class='shopify-section section' id='shopify-section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f'>
 <style data-shopify=''>
  .section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    padding-top: 36px;
    padding-bottom: 75px;
  }

  @media screen and (min-width: 750px) {
    .section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding {
      padding: 0 5rem;
      padding-top: 48px;
      padding-bottom: 100px;
    }
  }
 </style>
 <style>
  .easy-setup {
    color: var(--text-color);
  }
  .easy-setup div {
    box-sizing: border-box;
  }
  .easy-setup p {
    margin-top: 0;
    margin-bottom: 0;
  }
  @media screen and (min-width: 750px) {
    .easy-setup .swiper-arrow-icon-wrapper {
      display: none;
    }
  }
  .swiper-arrow-icon-wrapper {
    display: flex;
    gap: 1rem;
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon-wrapper {
      gap: 1.5rem;
    }
  }
  .swiper-arrow-icon {
    color: var(--text-color);
    display: inline-block;
    width: 70px;
    height: 70px;
    position: unset;
    margin-top: unset;
    margin-bottom: 43px;
  }
  .swiper-arrow-icon--left {
    transform: rotate(180deg);
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon {
      width: 97px;
      height: 97px;
      margin-bottom: 60px;
    }
  }
  .easy-setup-title {
    font-size: calc(var(--title-font-size) * 0.5);
    font-weight: 800;
    line-height: 107%;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    color: var(--title-color);
  }
  @media screen and (min-width: 750px) {
    .easy-setup-title {
      font-size: calc(var(--title-font-size) * 0.75);
      text-align: center;
      margin-bottom: 2rem;
    }
  }
  @media screen and (min-width: 750px) {
    .easy-setup-title {
      font-size: var(--title-font-size);
      margin-bottom: 2.5rem;
    }
  }
  /* .ss-custom-card will be reused on other sections */
  .ss-custom-card {
    border: 1px solid var(--text-color);
    border-radius: 29px;
    background: var(--card-background-color, #fef9f3);
    padding: 20px;
    height: auto;
    width: 100%;
  }
  @media screen and (min-width: 750px) {
    .ss-custom-card {
      padding: 23px 27px;
    }
  }
  .ss-custom-card__title {
    font-weight: 800;
    font-size: var(--product-card-title-font-size, 24px);
    margin-bottom: 5px;
    text-align: center;
  }
  .ss-custom-card__desc {
    font-weight: 500;
    font-size: var(--product-card-description-font-size, 20px);
    margin-bottom: 13px;
  }
  .ss-custom-card__link {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 800;
    background: var(--link-background-color, #fbf4fe);
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-decoration: none;
  }
  @media screen and (min-width: 750px) {
    .ss-custom-card__link {
      height: 60px;
    }
  }
  .ss-custom-card__image {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    border: 1px solid var(--text-color);
    border-radius: 26px;
  }
  .ss-custom-card__index {
    border: 1px solid var(--text-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    background: var(--second-card-background-color, #f9f9f9);
    font-weight: 500;
    font-size: 28px;
  }
 </style>
 <style>
  .ss-custom-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    width: 277px;
    margin: 0 auto;
    background: var(--second-card-background-color);
    border-radius: 45px;
    font-size: 20px;
    font-weight: 800;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    margin-top: 45px;
    text-decoration: none;
  }
 </style>
 <div class='easy-setup' id='easy-setup' style='
    background-color:#bb8fc1;
    --title-font-size: 48px;
    --title-color: #ffffff;
    --product-card-title-font-size: 24px;
    --text-color:#432a54;
    --card-background-color: #fef9f3;
    --second-card-background-color: #fbf4fe;
      overflow: hidden;
  '>
  <div class='page-width section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding'>
   <div class='easy-setup-title'>
    EASY SET UP IN 3 STEPS
   </div>
   <div class='swiper swiper-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f' style='overflow:visible'>
    <div class='swiper-arrow-icon-wrapper'>
     <svg class='swiper-button-prev swiper-arrow-icon swiper-arrow-icon--left' fill='none' viewbox='0 0 97 97' xmlns='http://www.w3.org/2000/svg'>
      <circle cx='48.6602' cy='48.75' fill='#fef9f3' r='47.5' stroke='currentColor'>
      </circle>
      <path d='M72.9825 49.8107C73.5683 49.2249 73.5683 48.2751 72.9825 47.6893L63.4366 38.1434C62.8508 37.5576 61.9011 37.5576 61.3153 38.1434C60.7295 38.7292 60.7295 39.6789 61.3153 40.2647L69.8006 48.75L61.3153 57.2353C60.7295 57.8211 60.7295 58.7708 61.3153 59.3566C61.9011 59.9424 62.8508 59.9424 63.4366 59.3566L72.9825 49.8107ZM29.9219 50.25H71.9219V47.25H29.9219V50.25Z' fill='currentColor'>
      </path>
     </svg>
     <svg class='swiper-button-next swiper-arrow-icon swiper-arrow-icon--right' fill='none' viewbox='0 0 97 97' xmlns='http://www.w3.org/2000/svg'>
      <circle cx='48.6602' cy='48.75' fill='#fef9f3' r='47.5' stroke='currentColor'>
      </circle>
      <path d='M72.9825 49.8107C73.5683 49.2249 73.5683 48.2751 72.9825 47.6893L63.4366 38.1434C62.8508 37.5576 61.9011 37.5576 61.3153 38.1434C60.7295 38.7292 60.7295 39.6789 61.3153 40.2647L69.8006 48.75L61.3153 57.2353C60.7295 57.8211 60.7295 58.7708 61.3153 59.3566C61.9011 59.9424 62.8508 59.9424 63.4366 59.3566L72.9825 49.8107ZM29.9219 50.25H71.9219V47.25H29.9219V50.25Z' fill='currentColor'>
      </path>
     </svg>
    </div>
    <div class='swiper-wrapper'>
     <div class='swiper-slide ss-custom-card'>
      <img alt='' class='ss-custom-card__image' src='//section.store/cdn/shop/files/image_6_400x.png?v=1677651130' srcset='
                  //section.store/cdn/shop/files/image_6_400x.png?v=1677651130 400w,
                  //section.store/cdn/shop/files/image_6_600x.png?v=1677651130 800w,
                  //section.store/cdn/shop/files/image_6_800x.png?v=1677651130 1200w,
                  //section.store/cdn/shop/files/image_6_1000x.png?v=1677651130 1600w,
                  //section.store/cdn/shop/files/image_6.png?v=1677651130 2000w
                '/>
      <div class='ss-custom-card__index'>
       1
      </div>
      <div class='ss-custom-card__title'>
       <p>
        Rip open the package
       </p>
      </div>
     </div>
     <div class='swiper-slide ss-custom-card'>
      <img alt='' class='ss-custom-card__image' src='//section.store/cdn/shop/files/image_6_400x.png?v=1677651130' srcset='
                  //section.store/cdn/shop/files/image_6_400x.png?v=1677651130 400w,
                  //section.store/cdn/shop/files/image_6_600x.png?v=1677651130 800w,
                  //section.store/cdn/shop/files/image_6_800x.png?v=1677651130 1200w,
                  //section.store/cdn/shop/files/image_6_1000x.png?v=1677651130 1600w,
                  //section.store/cdn/shop/files/image_6.png?v=1677651130 2000w
                '/>
      <div class='ss-custom-card__index'>
       2
      </div>
      <div class='ss-custom-card__title'>
       <p>
        Put in a cup with tea & stir
       </p>
      </div>
     </div>
     <div class='swiper-slide ss-custom-card'>
      <img alt='' class='ss-custom-card__image' src='//section.store/cdn/shop/files/image_6_400x.png?v=1677651130' srcset='
                  //section.store/cdn/shop/files/image_6_400x.png?v=1677651130 400w,
                  //section.store/cdn/shop/files/image_6_600x.png?v=1677651130 800w,
                  //section.store/cdn/shop/files/image_6_800x.png?v=1677651130 1200w,
                  //section.store/cdn/shop/files/image_6_1000x.png?v=1677651130 1600w,
                  //section.store/cdn/shop/files/image_6.png?v=1677651130 2000w
                '/>
      <div class='ss-custom-card__index'>
       3
      </div>
      <div class='ss-custom-card__title'>
       <p>
        Enjoy the funky stuff
       </p>
      </div>
     </div>
    </div>
   </div>
   <a class='ss-custom-cta' href=''>
    SHOP NOW
   </a>
  </div>
 </div>
 <script>
  // load the swiper css and js only once:
  (function () {
    const cssId = 'swiper-css';
    let existingLink = document.getElementById(cssId);
    if (!existingLink) {
      let link = document.createElement('link');
      link.href = 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css';
      link.rel = 'stylesheet';
      link.id = cssId;
      let head = document.getElementsByTagName('head')[0];
      head.appendChild(link);
    }
    const jsId = 'swiper-js';
    let existingScript = document.getElementById(jsId);
    if (!existingScript) {
      let script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js';
      script.id = jsId;
      script.defer = true;
      // fire a custom event when the script is loaded:
      script.onload = function () {
        let event = new Event('swiper:loaded');
        document.dispatchEvent(event);
      };
      let head = document.getElementsByTagName('head')[0];
      head.appendChild(script);
    }

    function loadSwiper() {
      try {
        new Swiper('.swiper-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f', {
          slidesPerView: 1.2,
          spaceBetween: 22,
          navigation: {
            nextEl: '.swiper-arrow-icon--right',
            prevEl: '.swiper-arrow-icon--left',
          },
          breakpoints: {
            750: {
              slidesPerView: 3,
              spaceBetween: 32,
            },
            //1440: {
            //  slidesPerView: 3.8,
            //  spaceBetween: 32,
            //},
          },
        });
      } catch (e) {
        console.log('Swiper not loaded');
        console.log(e);
      }
    }
    document.addEventListener('swiper:loaded', loadSwiper);
    if (window.Shopify && Shopify.designMode) {
      document.addEventListener('shopify:section:load', loadSwiper);
    }
  })();
 </script>
</section>
<style>
  .ss-custom-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    width: 277px;
    margin: 0 auto;
    background: var(--second-card-background-color);
    border-radius: 45px;
    font-size: 20px;
    font-weight: 800;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    margin-top: 45px;
    text-decoration: none;
  }
</style><style>.section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    padding-top: 36px;
    padding-bottom: 75px;
  }

  @media screen and (min-width: 750px) {
    .section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding {
      padding: 0 5rem;
      padding-top: 48px;
      padding-bottom: 100px;
    }
  }</style><style>
  .best-seller {
    color: var(--text-color);
  }
  .best-seller div {
    box-sizing: border-box;
  }
  .best-seller p {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.07;
  }
  .swiper-arrow-icon-wrapper {
    display: flex;
    gap: 1rem;
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon-wrapper {
      gap: 1.5rem;
    }
  }
  .swiper-arrow-icon {
    color: var(--text-color);
    display: inline-block;
    width: 70px;
    height: 70px;
    position: unset;
    margin-top: unset;
    margin-bottom: 43px;
  }
  .swiper-arrow-icon--left {
    transform: rotate(180deg);
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon {
      width: 97px;
      height: 97px;
      margin-bottom: 60px;
    }
  }
  .best-seller-title {
    font-size: calc(var(--title-font-size) * 0.5);
    font-weight: 800;
    line-height: 107%;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
  }
  @media screen and (min-width: 750px) {
    .best-seller-title {
      font-size: calc(var(--title-font-size) * 0.75);
    }
  }
  @media screen and (min-width: 750px) {
    .best-seller-title {
      font-size: var(--title-font-size);
      margin-bottom: 2rem;
    }
  }
  .best-seller-card {
    border: 1px solid var(--text-color);
    border-radius: 29px;
    background: var(--card-background-color, #fef9f3);
    padding: 20px;
    height: auto;
  }
  @media screen and (min-width: 750px) {
    .best-seller-card {
      padding: 23px 27px;
    }
  }
  .best-seller-card__title {
    font-weight: 800;
    font-size: var(--product-card-title-font-size, 24px);
    margin-bottom: 5px;
  }
  .best-seller-card__desc {
    font-weight: 500;
    font-size: var(--product-card-description-font-size, 20px);
    margin-bottom: 13px;
  }
  .best-seller-card__link {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 800;
    background: var(--link-background-color, #fbf4fe);
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-decoration: none;
    font-size: 20px;
  }
  @media screen and (min-width: 750px) {
    .best-seller-card__link {
      height: 60px;
    }
  }
  .best-seller-card__image {
    width: 100%;
    object-fit: contain;
  }
</style><style>

   .rating-item svg {
    width:16px;
    height:16px;
    border:none;
    margin-right:0px;
    line-height: 1.6;
    fill: var(--text-color);
  }

  .customers-reviews {
    color: var(--text-color);
    text-align: center;
  }
  .customers-reviews div {
    box-sizing: border-box;
  }
  .customers-reviews p {
    margin-top: 0;
    margin-bottom: 0;
  }
  @media screen and (min-width: 750px) {
    .customers-reviews .swiper-arrow-icon-wrapper {
      display: none;
    }
  }
  .swiper-arrow-icon-wrapper {
    display: flex;
    gap: 1rem;
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon-wrapper {
      gap: 1.5rem;
    }
  }
  .swiper-arrow-icon {
    color: var(--text-color);
    display: inline-block;
    width: 70px;
    height: 70px;
    position: unset;
    margin-top: unset;
    margin-bottom: 43px;
  }
  .swiper-arrow-icon--left {
    transform: rotate(180deg);
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon {
      width: 97px;
      height: 97px;
      margin-bottom: 60px;
    }
  }
  .customers-reviews-title {
    font-size: calc(var(--title-font-size) * 0.5);
    font-weight: 800;
    line-height: 107%;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    color: var(--title-color);
  }
  @media screen and (min-width: 750px) {
    .customers-reviews-title {
      font-size: calc(var(--title-font-size) * 0.75);
      margin-bottom: 60px;
      text-align: center;
    }
  }
  @media screen and (min-width: 750px) {
    .customers-reviews-title {
      font-size: var(--title-font-size);
    }
  }
  /* .ss-custom-card will be reused on other sections */
  .ss-custom-card {
    border: 1px solid var(--text-color);
    border-radius: 29px;
    background: var(--card-background-color, #fef9f3);
    padding: 20px;
    height: auto;
    width: 100%;
  }
  @media screen and (min-width: 750px) {
    .ss-custom-card {
      padding: 23px 27px;
    }
  }
  .ss-custom-card__title {
    font-weight: 800;
    font-size: var(--product-card-title-font-size, 24px);
    margin-bottom: 5px;
    text-align: center;
  }
  .ss-custom-card__desc {
    font-weight: 500;
    font-size: var(--product-card-description-font-size, 20px);
    margin-bottom: 13px;
  }
  .ss-custom-card__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 13px;
  }
  .ss-custom-card__author {
    font-size: 24px;
    font-weight: 800;
  }
  .ss-custom-card__link {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 800;
    background: var(--link-background-color, #fbf4fe);
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-decoration: none;
  }
  @media screen and (min-width: 750px) {
    .ss-custom-card__link {
      height: 60px;
    }
  }
  .ss-custom-card__image {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    border: 1px solid var(--text-color);
    border-radius: 26px;
  }
  .ss-custom-card__index {
    border: 1px solid var(--text-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    background: var(--second-card-background-color, #f9f9f9);
    font-weight: 500;
    font-size: 28px;
  }
</style><style>
  .easy-setup {
    color: var(--text-color);
  }
  .easy-setup div {
    box-sizing: border-box;
  }
  .easy-setup p {
    margin-top: 0;
    margin-bottom: 0;
  }
  @media screen and (min-width: 750px) {
    .easy-setup .swiper-arrow-icon-wrapper {
      display: none;
    }
  }
  .swiper-arrow-icon-wrapper {
    display: flex;
    gap: 1rem;
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon-wrapper {
      gap: 1.5rem;
    }
  }
  .swiper-arrow-icon {
    color: var(--text-color);
    display: inline-block;
    width: 70px;
    height: 70px;
    position: unset;
    margin-top: unset;
    margin-bottom: 43px;
  }
  .swiper-arrow-icon--left {
    transform: rotate(180deg);
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon {
      width: 97px;
      height: 97px;
      margin-bottom: 60px;
    }
  }
  .easy-setup-title {
    font-size: calc(var(--title-font-size) * 0.5);
    font-weight: 800;
    line-height: 107%;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    color: var(--title-color);
  }
  @media screen and (min-width: 750px) {
    .easy-setup-title {
      font-size: calc(var(--title-font-size) * 0.75);
      text-align: center;
      margin-bottom: 2rem;
    }
  }
  @media screen and (min-width: 750px) {
    .easy-setup-title {
      font-size: var(--title-font-size);
      margin-bottom: 2.5rem;
    }
  }
  /* .ss-custom-card will be reused on other sections */
  .ss-custom-card {
    border: 1px solid var(--text-color);
    border-radius: 29px;
    background: var(--card-background-color, #fef9f3);
    padding: 20px;
    height: auto;
    width: 100%;
  }
  @media screen and (min-width: 750px) {
    .ss-custom-card {
      padding: 23px 27px;
    }
  }
  .ss-custom-card__title {
    font-weight: 800;
    font-size: var(--product-card-title-font-size, 24px);
    margin-bottom: 5px;
    text-align: center;
  }
  .ss-custom-card__desc {
    font-weight: 500;
    font-size: var(--product-card-description-font-size, 20px);
    margin-bottom: 13px;
  }
  .ss-custom-card__link {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 800;
    background: var(--link-background-color, #fbf4fe);
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-decoration: none;
  }
  @media screen and (min-width: 750px) {
    .ss-custom-card__link {
      height: 60px;
    }
  }
  .ss-custom-card__image {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    border: 1px solid var(--text-color);
    border-radius: 26px;
  }
  .ss-custom-card__index {
    border: 1px solid var(--text-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    background: var(--second-card-background-color, #f9f9f9);
    font-weight: 500;
    font-size: 28px;
  }
</style>
           <!-- Code End -->

Review Bar

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>reviews Bar with Infinite Scroll</title>
    <style>
      .reviews-bar,
      .reviews-barv2 {
        width: 100%;
        padding: 3px 0;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
margin-top: 10px;
max-width: 1500px;
margin-right: auto;
margin-left: auto;
      }
      .reviews-wrapper,
      .reviews-wrapperv2 {
        display: flex;
      }
      .reviews-wrapper {
        animation: scroll-text 20s linear infinite;
      }
      .reviews-wrapperv2 {
        animation: scroll-text-reverse 20s linear infinite;
      }
.reviews-text, .reviews-textv2 {
    color: #000;
    font-size: 12px;
    font-weight: 500;
    margin-right: 15px;
    border: 2px solid #f2f2f2;
    padding: 10px 30px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    gap: 18px;
    align-items: center;
    justify-content: center;
max-width: 300px;  
line-height: 15px;
}

        .profile-pictures {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
        }
      @keyframes scroll-text {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      @keyframes scroll-text-reverse {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <div class="reviews-barv2">
      <div class="reviews-wrapperv2">
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
      </div>
    </div>
<div class="reviews-bar">
      <div class="reviews-wrapper">
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>
 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">
<span>review goes here<br>
new line</span></div>

      </div>
    </div>
  </body>
</html>

           <!-- Code End -->

Info Item V5

          <!-- Code Start -->
           <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Shipping & Returns</title>
    <style>
        .info-container-v5 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
font-size:12px;
font-weight: 500;
color: #242424;

        }
.info-item-v5 {
  transition: transform 0.3s ease; 
}

.info-item-v5:hover {
  transform: translateX(10px); 
}

.info-item-v5 {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eeeeee;
    padding: 0px 10px;
    border-radius: 8px;
}

        .info-item{
            font-size: 12px;
            color: #242424;
        }
    </style>
</head>
<body>
    <div class="info-container-v5">
        <div class="info-item-v5">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" version="1.1" id="Capa_1" viewBox="0 0 498.138 498.138" xml:space="preserve">
<g>
	<path style="fill:#242424;" d="M493.65,109.76c-9.859-18.405-32.775-25.333-51.179-15.472   c-22.059,11.816-42.897,23.982-62.82,36.717l0.003-51.276c0-11.313-9.146-20.494-20.493-20.494H20.457   C9.164,59.235,0,68.417,0,79.729v338.7c0,11.291,9.163,20.474,20.457,20.474h338.686c11.348,0,20.496-9.183,20.496-20.474   l0.009-195.875c30.092-22.165,62.312-42.213,98.529-61.615C496.582,151.079,503.509,128.166,493.65,109.76z M338.702,397.917   H40.968V100.219h297.734v58.715c-40.715,29.649-78.022,62.759-114.834,101.677c-4.275-5.648-8.601-11.423-13.129-17.47   c-9.354-12.491-19.958-26.648-32.375-42.632c-12.81-16.487-36.561-19.468-53.05-6.659c-16.488,12.811-19.47,36.562-6.659,53.051   c12.007,15.455,21.949,28.728,31.563,41.565c13.841,18.482,26.915,35.938,42.45,54.771c7.075,8.576,17.566,13.604,28.682,13.745   c0.162,0.002,0.321,0.002,0.482,0.002c10.94,0,21.356-4.741,28.541-13.012c29.482-33.939,58.199-62.952,88.329-88.826V397.917z"/>
</g>
</svg>
            <span class = "info-item">Point/benefit one goes here</span>
        </div>
        <div class="info-item-v5">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" version="1.1" id="Capa_1" viewBox="0 0 498.138 498.138" xml:space="preserve">
<g>
	<path style="fill:#242424;" d="M493.65,109.76c-9.859-18.405-32.775-25.333-51.179-15.472   c-22.059,11.816-42.897,23.982-62.82,36.717l0.003-51.276c0-11.313-9.146-20.494-20.493-20.494H20.457   C9.164,59.235,0,68.417,0,79.729v338.7c0,11.291,9.163,20.474,20.457,20.474h338.686c11.348,0,20.496-9.183,20.496-20.474   l0.009-195.875c30.092-22.165,62.312-42.213,98.529-61.615C496.582,151.079,503.509,128.166,493.65,109.76z M338.702,397.917   H40.968V100.219h297.734v58.715c-40.715,29.649-78.022,62.759-114.834,101.677c-4.275-5.648-8.601-11.423-13.129-17.47   c-9.354-12.491-19.958-26.648-32.375-42.632c-12.81-16.487-36.561-19.468-53.05-6.659c-16.488,12.811-19.47,36.562-6.659,53.051   c12.007,15.455,21.949,28.728,31.563,41.565c13.841,18.482,26.915,35.938,42.45,54.771c7.075,8.576,17.566,13.604,28.682,13.745   c0.162,0.002,0.321,0.002,0.482,0.002c10.94,0,21.356-4.741,28.541-13.012c29.482-33.939,58.199-62.952,88.329-88.826V397.917z"/>
</g>
</svg>
            <span class = "info-item">Point/benefit two goes here</span>
        </div>
        <div class="info-item-v5">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" version="1.1" id="Capa_1" viewBox="0 0 498.138 498.138" xml:space="preserve">
<g>
	<path style="fill:#242424;" d="M493.65,109.76c-9.859-18.405-32.775-25.333-51.179-15.472   c-22.059,11.816-42.897,23.982-62.82,36.717l0.003-51.276c0-11.313-9.146-20.494-20.493-20.494H20.457   C9.164,59.235,0,68.417,0,79.729v338.7c0,11.291,9.163,20.474,20.457,20.474h338.686c11.348,0,20.496-9.183,20.496-20.474   l0.009-195.875c30.092-22.165,62.312-42.213,98.529-61.615C496.582,151.079,503.509,128.166,493.65,109.76z M338.702,397.917   H40.968V100.219h297.734v58.715c-40.715,29.649-78.022,62.759-114.834,101.677c-4.275-5.648-8.601-11.423-13.129-17.47   c-9.354-12.491-19.958-26.648-32.375-42.632c-12.81-16.487-36.561-19.468-53.05-6.659c-16.488,12.811-19.47,36.562-6.659,53.051   c12.007,15.455,21.949,28.728,31.563,41.565c13.841,18.482,26.915,35.938,42.45,54.771c7.075,8.576,17.566,13.604,28.682,13.745   c0.162,0.002,0.321,0.002,0.482,0.002c10.94,0,21.356-4.741,28.541-13.012c29.482-33.939,58.199-62.952,88.329-88.826V397.917z"/>
</g>
</svg>
            <span class = "info-item">Point/benefit three goes here</span>
        </div>
    </div>
</body>
</html>        <!-- Code End -->

How To Use

          <!-- Code Start -->
           <div class="how-to-use-section">
  <div class="how-to-use-container">
    <h2 class="how-to-use-title">How to Use</h2>
    <div class="how-to-use-steps">
      <!-- Step 1 -->
      <div class="step-card">
        <div class="step-image-wrapper">
          <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-33-40_B_R8_S4_COFFEE_1x1_c4735316-d620-41d2-9038-b100a3faa3fa_1000x.jpg?v=1729943669" 
               alt="Scoop Rainbow Dust" 
               class="step-image"
               loading="lazy">
          <div class="step-number">1</div>
        </div>
        <p class="step-text">Scoop 8g of Rainbow Dust</p>
      </div>
      
      <!-- Step 2 -->
      <div class="step-card">
        <div class="step-image-wrapper">
          <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-41-27_B_R8_S4_H_1x1_93c184ee-1e1b-486b-8707-9ec7ad2005b9_1000x.jpg?v=1729943681" 
               alt="Mix with liquid" 
               class="step-image"
               loading="lazy">
          <div class="step-number">2</div>
        </div>
        <p class="step-text">Mix with water or milk - hot or cold</p>
      </div>
      
      <!-- Step 3 -->
      <div class="step-card">
        <div class="step-image-wrapper">
          <img src="//spacegoods.com/cdn/shop/files/SCC00652_1x1_4df7434b-7dec-4d08-b6f2-6a3a81dc7957_1000x.jpg?v=1728026166" 
               alt="Froth the mixture" 
               class="step-image"
               loading="lazy">
          <div class="step-number">3</div>
        </div>
        <p class="step-text">Use your frother to blend to perfection</p>
      </div>
      
      <!-- Step 4 -->
      <div class="step-card">
        <div class="step-image-wrapper">
          <img src="//spacegoods.com/cdn/shop/files/SCC00911_1x1_1e333543-e0ff-4060-9e21-ee6cecd1bb47_1000x.jpg?v=1728025913" 
               alt="Enjoy your drink" 
               class="step-image"
               loading="lazy">
          <div class="step-number">4</div>
        </div>
        <p class="step-text">Drink & enjoy focus - energy - calm</p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Base Styles */
  .how-to-use-section {
    padding: 60px 0;
    background-color: #f9f7f4;
    position: relative;
    overflow: hidden;
  }
  
  .how-to-use-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
  }
  
  .how-to-use-title {
    font-family: 'TAN - MEMORIES', serif;
    font-size: 3rem;
    font-weight: 400;
    color: #000;
    margin-bottom: 2.5rem;
    text-align: center;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .how-to-use-title:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 50%, rgba(0,0,0,0) 100%);
  }
  
  .how-to-use-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
  
  .step-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  }
  
  .step-image-wrapper {
    position: relative;
    padding-top: 100%; /* 1:1 aspect ratio */
    overflow: hidden;
  }
  
  .step-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .step-card:hover .step-image {
    transform: scale(1.05);
  }
  
  .step-number {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background-color: #5a7247;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Apercu', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .step-text {
    padding: 25px;
    font-family: 'Apercu', sans-serif;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #333;
    text-align: center;
    margin: 0;
  }
  
  /* Responsive Styles */
  @media (max-width: 1024px) {
    .how-to-use-steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    
    .how-to-use-title {
      font-size: 2.5rem;
      margin-bottom: 2rem;
    }
  }
  
  @media (max-width: 768px) {
    .how-to-use-section {
      padding: 40px 0;
    }
    
    .how-to-use-title {
      font-size: 2rem;
      margin-bottom: 1.5rem;
    }
    
    .step-text {
      padding: 20px;
      font-size: 1.1rem;
    }
  }
  
  @media (max-width: 480px) {
    .how-to-use-steps {
      max-width: 400px;
      margin: 0 auto;
      gap: 15px;
    }
    
    .how-to-use-title {
      font-size: 1.8rem;
    }
    
    .step-number {
      width: 35px;
      height: 35px;
      font-size: 1rem;
    }
  }
</style>

<script>
  // You can add flavor switching functionality here if needed
  document.addEventListener('DOMContentLoaded', function() {
    // Potential flavor selector implementation
  });
</script>
          
           <!-- Code End -->

Section

          <!-- Code Start -->
           <div id="shopify-section-template--17138240979127__ingredients_pDeGmq" class="shopify-section">
    <style>
        #ingre_eGmq {
            position: relative;
            background: transparent linear-gradient(180deg, #E5F2F6 0%, #FEDCEC 51%, #EDD7FE 100%) 0% 0% no-repeat padding-box;
        }

        #ingre_eGmq .section_holder {
            position: relative;
            margin: auto;
            max-width: 1208px;
            padding: 80px 40px;
        }

        #ingre_eGmq .heading {
            font-family: 'TAN - MEMORIES';
            font-size: 42px;
            font-weight: 400;
            line-height: 45px;
            margin-bottom: 21px;
            text-align: center;
        }

        #ingre_eGmq .descs {
            display: flex;
            justify-content: center;
            margin-bottom: 42px;
        }

        #ingre_eGmq .description a,
        #ingre_eGmq .description p,
        #ingre_eGmq .description {
            font: normal normal normal 18px/22px Apercu Pro;
            letter-spacing: 0px;
            color: #000000;
        }

        #ingre_eGmq .s_desc {
            font: normal normal normal 18px/22px Apercu Pro;
            letter-spacing: 0px;
            margin: 0 28px;
            padding: 3px 0 3px 33px;
            background-repeat: no-repeat;
            background-size: 25px;
            background-position: left;
            background-image: url(//spacegoods.com/cdn/shop/t/346/assets/check-violet.svg?v=121176336516853493291722621936);
        }

        #ingre_eGmq .description {
            text-align: center;
            max-width: 1024px;
            margin: 0 auto 21px;
        }

        #ingre_eGmq .ingre_holder {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 32px;
        }

        #ingre_eGmq .s_ingre {
            min-width: 1px;
            display: flex;
            background: white;
            border-radius: 8px;
            align-items: center;
        }

        #ingre_eGmq .ingre_h {
            font: normal normal bold 21px/16px Apercu Pro;
            letter-spacing: 0px;
            color: #1E1E1E;
            margin-bottom: 5px;
        }

        #ingre_eGmq .ingre_w {
            font: italic normal normal 17px/16px Apercu Pro;
            letter-spacing: 0px;
            color: #1E1E1E;
            margin-bottom: 11px;
        }

        #ingre_eGmq .ingre_desc {
            font: normal normal normal 17px/18px Apercu Pro;
            letter-spacing: 0px;
            color: #1E1E1E;
        }

        #ingre_eGmq .txt_part {
            padding: 29px 25px;
            width: calc(100% - 162px);
        }

        #ingre_eGmq .img_part {
            width: 162px;
        }

        #ingre_eGmq .ingre_btn {
            width: 100%;
            max-width: 363px;
            height: 70px;
            margin: auto;
            border-radius: 5px;
            padding: 5px;
            cursor: pointer;
            user-select: none;
            background: linear-gradient(102deg, rgba(114, 76, 233, 1) 0%, rgba(255, 34, 119, 1) 100%);
        }

        #ingre_eGmq .ingre_btn>div {
            display: flex;
            align-items: center;
            width: 100%;
            background: white;
            border-radius: 5px;
            height: 60px;
            padding: 0 15px;
        }

        #ingre_eGmq img.nutrition_arrow {
            margin-left: auto;
            filter: brightness(0);
        }

        #ingre_eGmq .ingre_btn span {
            font: normal normal normal 21px/26px Apercu Pro;
            letter-spacing: 0px;
            color: #000000;
        }

        #ingre_eGmq img.nu_icon {
            width: 28px;
            margin-right: 8px;
        }

        #ingre_eGmq .ingre_table_overlay {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            background: black;
            opacity: 0.5;
            z-index: 2;
            display: none;
        }

        #ingre_eGmq .ingredient_modal {
            position: fixed;
            left: 50%;
            top: 60%;
            transform: translate(-50%, -50%);
            width: calc(100% - 25px);
            max-width: 300px;
            z-index: 2;
            display: none;
        }

        #ingre_eGmq .ingredient_modal:before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: -42px;
            width: 32px;
            height: 32px;
            filter: invert(1);
            background-size: 100%;
            pointer-events: none;
            background-image: url(//spacegoods.com/cdn/shop/t/346/assets/black_close.svg?v=21011354507018251241722621935);
        }

        #ingre_eGmq .ingredient_modal img {
            width: 100%;
        }

        @media screen and (max-width: 900px) {
            #ingre_eGmq .section_holder {
                padding: 45px 15px;
            }
            #ingre_eGmq .heading {
                font: normal normal 400 24px/32px 'TAN - MEMORIES';
                margin-bottom: 14px;
            }
            #ingre_eGmq .descs {
                flex-wrap: wrap;
                margin-bottom: 16px;
            }
            #ingre_eGmq .description a,
            #ingre_eGmq .description p,
            #ingre_eGmq .description {
                font: normal normal 500 13px/15px Apercu Pro;
            }
            #ingre_eGmq .description {
                margin-bottom: 16px;
            }
            #ingre_eGmq .s_desc {
                font: normal normal 500 13px/15px Apercu Pro;
                background-size: 13px;
                padding: 0 0 0 17px;
                margin: 0 15px 12px 0;
            }
            #ingre_eGmq .s_desc:last-of-type {
                margin-right: 0;
            }
            #ingre_eGmq .ingre_holder {
                display: flex;
                overflow: auto;
                gap: unset;
                margin-right: -15px;
            }
            #ingre_eGmq .s_ingre {
                min-width: 283px;
                margin-right: 11px;
            }
            #ingre_eGmq .txt_part {
                padding: 21px 0px 21px 15px;
                width: calc(100% - 109px);
            }
            #ingre_eGmq .ingre_h {
                font: normal normal bold 16px/16px Apercu Pro;
            }
            #ingre_eGmq .ingre_w {
                font: normal normal normal 14px/16px Apercu Pro;
            }
            #ingre_eGmq .ingre_desc {
                font: normal normal normal 13px/16px Apercu Pro;
            }
            #ingre_eGmq .img_part {
                width: 109px;
            }
            #ingre_eGmq .ingre_btn {
                height: 50px;
                padding: 4px;
            }
            #ingre_eGmq .ingre_btn>div {
                height: 42px;
                padding: 0 14px;
            }
            #ingre_eGmq .ingre_btn span {
                font: normal normal normal 16px/19px Apercu Pro;
            }
            #ingre_eGmq img.nu_icon {
                width: 17px;
                margin-right: 4px;
            }
        }
    </style>
    <div id="ingre_eGmq">
        <div class="section_holder">
            <div class="heading">clean, safe, powerful ingredients</div>
            <div class="descs">
                <div class="s_desc">big dosages: 2-3x stronger</div>
                <div class="s_desc">vegan, keto - gluten & dairy free</div>
                <div class="s_desc">quality ingredients - made in england</div>
            </div>
            <div class="ingre_holder">
                <div class="s_ingre">
                    <div class="txt_part">
                        <div class="ingre_h">Lions mane mushroom</div>
                        <div class="ingre_w">1000 mg</div>
                        <div class="ingre_desc">We can't legally tell you anything about this ingredient...but google it or visit our 'health claims' page to learn more, it's amazing! *</div>
                    </div>
                    <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/lions_mane_2_500x.jpg?v=1715591472" alt="ingredient" class="ingre_img"></div>
                </div>
                <div class="s_ingre">
                    <div class="txt_part">
                        <div class="ingre_h">Ashwagandha</div>
                        <div class="ingre_w">200mg</div>
                        <div class="ingre_desc">An ancient medicinal herb, known to support relaxation & a reduction in anxiety*</div>
                    </div>
                    <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/ashwagandha_027f47aa-5275-449b-8041-a916096331ba_500x.jpg?v=1715588902" alt="ingredient" class="ingre_img"></div>
                </div>
                <div class="s_ingre">
                    <div class="txt_part">
                        <div class="ingre_h">Cordyceps mushroom</div>
                        <div class="ingre_w">1000 mg</div>
                        <div class="ingre_desc">We can't legally tell you anything about this ingredient...but google it or visit our 'health claims' page to learn more, it's amazing! *</div>
                    </div>
                    <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/cordyceps_500x.jpg?v=1715588919" alt="ingredient" class="ingre_img"></div>
                </div>
                <div class="s_ingre">
                    <div class="txt_part">
                        <div class="ingre_h">Maca root</div>
                        <div class="ingre_w">250mg</div>
                        <div class="ingre_desc">Powerful plant ingredient known to support energy & mood*</div>
                    </div>
                    <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/maca_c87dfbaa-d370-4745-8b19-ea181c669802_500x.jpg?v=1715588949" alt="ingredient" class="ingre_img"></div>
                </div>
                <div class="s_ingre">
                    <div class="txt_part">
                        <div class="ingre_h">Chaga mushroom</div>
                        <div class="ingre_w">1000 mg</div>
                        <div class="ingre_desc">We can't legally tell you anything about this ingredient...but google it or visit our 'health claims' page to learn more, it's amazing! *</div>
                    </div>
                    <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/chaga_ccc1a6b1-f753-4b2b-b5d0-214a923fce4e_500x.jpg?v=1715591797" alt="ingredient" class="ingre_img"></div>
                </div>
                <div class="s_ingre">
                    <div class="txt_part">
                        <div class="ingre_h">Rhodiola Rosea</div>
                        <div class="ingre_w">25mg</div>
                        <div class="ingre_desc">Adaptogenic herb known to reduce stress & improve focus*</div>
                    </div>
                    <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/rhodiola_small_bade95d6-1b26-420e-a979-43b34b0027b9_500x.jpg?v=1715588980" alt="ingredient" class="ingre_img"></div>
                </div>
                <div class="s_ingre">
                    <div class="txt_part">
                        <div class="ingre_h">Coffee extract</div>
                        <div class="ingre_w">80 mg</div>
                        <div class="ingre_desc">Strong natural kick of energy & alertness*</div>
                    </div>
                    <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/coffee_white_bg_500x.jpg?v=1715591815" alt="ingredient" class="ingre_img"></div>
                </div>
                <div class="s_ingre">
                    <div class="txt_part">
                        <div class="ingre_h">Vitamin B5</div>
                        <div class="ingre_w">6mg</div>
                        <div class="ingre_desc">contributes to the reduction of tiredness & fatigue*</div>
                    </div>
                    <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/avocado_b5_500x.jpg?v=1715589018" alt="ingredient" class="ingre_img"></div>
                </div>
                <div class="s_ingre">
                    <div class="txt_part">
                        <div class="ingre_h">Stevia</div>
                        <div class="ingre_w"></div>
                        <div class="ingre_desc">Natural sweetener sourced from plants</div>
                    </div>
                    <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/STevia_500x.jpg?v=1715589040" alt="ingredient" class="ingre_img"></div>
                </div>
                <div class="s_ingre">
                    <div class="txt_part">
                        <div class="ingre_h">Cocoa Powder</div>
                        <div class="ingre_w"></div>
                        <div class="ingre_desc">Great natural flavour</div>
                    </div>
                    <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/Cocoa_powder_f5d1172a-e4ce-48b0-a7c3-3772305b709b_500x.jpg?v=1715591837" alt="ingredient" class="ingre_img"></div>
                </div>
            </div>
        </div>
    <script>
        $('#ingre_eGmq .ingre_btn').click(function() {
            show_ingre_popup();
        });
        $('#ingre_eGmq .ingre_table_overlay').click(function() {
            hide_ingre_popup();
        });

        function show_ingre_popup() {
            $('#ingre_eGmq .ingre_table_overlay').fadeIn(400);
            $('#ingre_eGmq .ingredient_modal').fadeIn(300);
        }

        function hide_ingre_popup() {
            $('#ingre_eGmq .ingre_table_overlay').fadeOut(400);
            $('#ingre_eGmq .ingredient_modal').fadeOut(300);
        }
    </script>
</div>
           <!-- Code End -->

Section

          <!-- Code Start -->
           <div id="shopify-section-template--16447242272955__ac119945-9ac1-4f93-ac2f-7a3aef2dba65" class="shopify-section">
    <style>
        .scrollGif {
            position: relative;
        }

        .scrollGifBackground {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .scrollGifBackground>video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .scrollGifSwiper {
            /*position: absolute;*/
            /*top: 50%;*/
            /*translate: 0 -50%;*/
            /*z-index: 2;*/
            padding: 200px 0;
            width: 100%;
        }

        .scrollGifSwiper .swiper-wrapper {
            transition-timing-function: linear !important;
            -webkit-transition-timing-function: linear !important;
        }

        .scrollGifSwiper .swiper-slide {
            width: auto;
            background: transparent;
            border: none;
            height: max-content;
            box-shadow: none;
        }

        .scrollGifScrollText {
            font-size: 30px;
            font-style: normal;
            font-weight: 600;
            position: relative;
            color: #fff;

        }

        .scrollGifScrollText::before {
            content: "";
            display: inline-block;
            background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M59.0625 8.75L26.25 41.5625L10.9375 26.25L0 37.1875L26.25 63.4375L70 19.6875L59.0625 8.75Z' fill='%23F02849'/%3E%3C/svg%3E%0A");
            background-repeat: no-repeat;
            background-size: contain;
            width: 45px;
            height: 45px;
            position: absolute;
            left: 0;
            top: 50%;
            translate: -80px -50%
        }

        @media (max-width: 800px) {
            .scrollGifSwiper {
                padding: 200px 0;
            }
            .scrollGifScrollText {
                font-size: 17px;
            }
            .scrollGifScrollText::before {
                width: 20px;
                height: 20px;
                translate: -30px -50%
            }
        }
    </style>

    <section id="template--16447242272955__ac119945-9ac1-4f93-ac2f-7a3aef2dba65">

        <div class="scrollGif">

            <div class="scrollGifBackground">
                <video width="100%" height="100%" autoplay="" muted="" loop="">
                <source src="https://cdn.shopify.com/s/files/1/0558/9300/0379/files/final_60e21887ebfc8700ef60e19c_40081.mp4?v=1625430578" type="video/mp4">
            </video>
            </div>

            <div class="swiper scrollGifSwiper swiper-initialized swiper-horizontal swiper-ios swiper-backface-hidden">
                <div class="swiper-wrapper" style="transition-duration: 10000ms; transform: translate3d(-333.36px, 0px, 0px);" id="swiper-wrapper-484f27e767c67654" aria-live="off">







                    <div class="swiper-slide swiper-slide-prev" role="group" aria-label="2 / 3" data-swiper-slide-index="1" style="margin-right: 40px;">
                        <div class="scrollGifScrollText">Block sweat and odor from 3 angles</div>
                    </div>
                    <div class="swiper-slide swiper-slide-active" role="group" aria-label="3 / 3" data-swiper-slide-index="2" style="margin-right: 40px;">
                        <div class="scrollGifScrollText">Dermatologist recommended</div>
                    </div>
                    <div class="swiper-slide swiper-slide-next" role="group" aria-label="1 / 3" data-swiper-slide-index="0" style="margin-right: 40px;">
                        <div class="scrollGifScrollText">Results from day one</div>
                    </div>
                                        <div class="swiper-slide swiper-slide-prev" role="group" aria-label="2 / 3" data-swiper-slide-index="1" style="margin-right: 40px;">
                        <div class="scrollGifScrollText">Block sweat and odor from 3 angles</div>
                    </div>
                    <div class="swiper-slide swiper-slide-active" role="group" aria-label="3 / 3" data-swiper-slide-index="2" style="margin-right: 40px;">
                        <div class="scrollGifScrollText">Dermatologist recommended</div>
                    </div>
                    <div class="swiper-slide swiper-slide-next" role="group" aria-label="1 / 3" data-swiper-slide-index="0" style="margin-right: 40px;">
                        <div class="scrollGifScrollText">Results from day one</div>
                    </div>
                </div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
        </div>


    </section>

    <script>
        new Swiper(`[id="template--16447242272955__ac119945-9ac1-4f93-ac2f-7a3aef2dba65"] .scrollGifSwiper`, {
            spaceBetween: 40,
            centeredSlides: true,
            speed: 10000,
            autoplay: {
                delay: 1,
            },
            loop: true,
            slidesPerView: 'auto',
            allowTouchMove: false,
            disableOnInteraction: true,
            breakpoints: {
                801: {
                    spaceBetween: 120,
                }
            }
        });
    </script>

</div>
           <!-- Code End boxsunix-->

Easy Setup

          <!-- Code Start -->
           <div id="shopify-section-template--17389125894327__pdp_coffe_alternative_bpQxKn" class="shopify-section">

    <style>
        #alternative_QxKn {
            position: relative;
        }

        #alternative_QxKn .section_holder {
            position: relative;
            margin: auto;
            max-width: 680px;
            padding: 80px 40px;
        }

        #alternative_QxKn .subheading {
            width: fit-content;
            height: 35px;
            padding: 0 12.2px;
            background: #FF2277;
            font: normal normal 500 18px/22px Apercu Pro;
            letter-spacing: 0px;
            color: #FFFFFF;
            text-transform: lowercase;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            margin: 0 auto 6px;
        }

        #alternative_QxKn .heading {
            font-family: 'TAN - MEMORIES';
            font-weight: 400;
            font-size: 42px;
            line-height: 1.1;
            text-align: center;
            margin-bottom: 12px;
        }

        #alternative_QxKn .desc {
            text-align: center;
            font: normal normal normal 21px/21px Apercu Pro;
            letter-spacing: 0px;
            color: #000000;
            margin-bottom: 60px;
        }

        #alternative_QxKn .img_vs_holder {
            display: flex;
            position: relative;
            justify-content: space-between;
            margin-bottom: 40px;
        }

        #alternative_QxKn .img_vs {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 65px;
            height: 65px;
            background: #000000;
            color: white;
            border-radius: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Apercu Pro;
            font-size: 25px;
            z-index: 1;
        }

        #alternative_QxKn .vs_img {
            width: calc(50% - 8px);
            display: flex;
            position: relative;
        }

        #alternative_QxKn .vs_img:last-of-type {
            border: 2px solid #F1F9FC;
            border-radius: 12px;
        }

        #alternative_QxKn .s_vs_desc {
            display: flex;
            border-radius: 100px;
            overflow: hidden;
            height: 65px;
            margin-bottom: 13px;
        }

        #alternative_QxKn .s_vs_desc>div {
            width: 50%;
            display: flex;
            align-items: center;
        }

        #alternative_QxKn .us_desc {
            background: transparent linear-gradient(106deg, #724CE9 0%, #FF2277 100%) 0% 0% no-repeat padding-box;
            justify-content: flex-end;
            padding-right: 56px;
            padding-left: 10px;
            font: normal normal normal 21px/21px Apercu Pro;
            text-align: right;
        }

        #alternative_QxKn .them_desc {
            background: #F5F5F5;
            font: normal normal normal 19px/21px Apercu Pro;
        }

        #alternative_QxKn .us_desc>div {
            position: relative;
            color: white;
        }

        #alternative_QxKn .them_desc>div {
            position: relative;
            color: black;
            padding-left: 58px;
            padding-right: 24px;
        }

        #alternative_QxKn .them_desc>div:after,
        #alternative_QxKn .us_desc>div:after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border-radius: 100px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 24px;
        }

        #alternative_QxKn .us_desc>div:after {
            right: -32px;
            background-image: url(//spacegoods.com/cdn/shop/t/346/assets/white_check.svg?v=168019155159854585241722621936);
        }

        #alternative_QxKn .them_desc>div:after {
            left: 24px;
            background-image: url(//spacegoods.com/cdn/shop/t/346/assets/black_close.svg?v=21011354507018251241722621935);
        }

        #alternative_QxKn .try_btn {
            width: 100%;
            max-width: 487px;
            height: 60px;
            border-radius: 8px;
            display: flex;
            font: normal normal 500 21px/26px Apercu Pro;
            letter-spacing: 1.05px;
            color: #FFFFFF;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin: auto;
            background: #000000;
        }

        #alternative_QxKn .try_btn:hover {
            background: #282828;
        }

        #alternative_QxKn .desc_below_btn {
            font: normal normal normal 16px/19px Apercu Pro;
            letter-spacing: 0px;
            color: #000000;
            margin-top: 13px;
            text-align: center;
        }

        #alternative_QxKn .descs_below_table {
            background: transparent linear-gradient(119deg, #724CE9 0%, #FF2277 100%) 0% 0% no-repeat padding-box;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font: normal normal 500 21px/21px Apercu Pro;
            text-align: center;
            margin-bottom: 21px;
        }

        #alternative_QxKn .vs_desc_holder {
            margin-bottom: 33px;
        }

        #alternative_QxKn img.satis_badge {
            position: absolute;
            width: 146px;
            height: 139px;
            transform: translate(-50%, -39px);
        }

        @media screen and (max-width: 900px) {
            #alternative_QxKn .section_holder {
                padding: 45px 15px;
            }
            #alternative_QxKn .subheading {
                height: 24px;
                font: normal normal 500 12px/14px Apercu Pro;
                padding: 0 14px;
                margin-bottom: 8px;
            }
            #alternative_QxKn .heading {
                font: normal normal 400 24px/26px 'TAN - MEMORIES';
                padding: 0 60px;
                margin-bottom: 8px;
            }
            #alternative_QxKn .desc {
                font: normal normal normal 16px/21px Apercu Pro;
                margin-bottom: 21px;
            }
            #alternative_QxKn .img_vs_holder {
                padding: 0 25px;
                margin-bottom: 15px;
            }
            #alternative_QxKn .img_vs {
                width: 46px;
                height: 46px;
                font-size: 13px;
            }
            #alternative_QxKn .vs_img img {
                width: 150px;
                height: 150px;
            }
            #alternative_QxKn .vs_img {
                width: calc(50% - 6px);
            }
            #alternative_QxKn .us_desc,
            #alternative_QxKn .them_desc {
                font: normal normal normal 14px/16px Apercu Pro;
            }
            #alternative_QxKn .them_desc>div:after,
            #alternative_QxKn .us_desc>div:after {
                width: 18px;
                height: 18px;
                background-size: 18px;
            }
            #alternative_QxKn .us_desc>div:after {
                right: -28px;
            }
            #alternative_QxKn .us_desc {
                padding-right: 43px;
            }
            #alternative_QxKn .them_desc>div:after {
                left: 15px;
            }
            #alternative_QxKn .them_desc>div {
                padding-left: 45px;
                padding-right: 18px;
            }
            #alternative_QxKn .s_vs_desc {
                height: 45px;
                margin-bottom: 4px;
            }
            #alternative_QxKn .descs_below_table {
                font-size: 17px;
                padding: 0 15px;
                background: transparent linear-gradient(180deg, #724CE9 0%, #FF2277 100%) 0% 0% no-repeat padding-box;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-bottom: 14px;
            }
            #alternative_QxKn .try_btn {
                font: normal normal 500 18px/22px Apercu Pro;
                letter-spacing: 0.9px;
                height: 52px;
            }
            #alternative_QxKn .desc_below_btn {
                font: normal normal normal 13px/15px Apercu Pro;
            }
            #alternative_QxKn .vs_desc_holder {
                margin-bottom: 21px;
                padding: 0 7px;
            }
            #alternative_QxKn img.satis_badge {
                width: 90px;
                height: 86px;
                transform: translate(-30px, -15px);
            }
        }
    </style>
    <div pdp_coffe_alternative="" id="alternative_QxKn">
        <div class="section_holder" data-flavor="Coffee">
            <div class="subheading">us vs. them</div>
            <div class="heading">Coffee upgrade like no other</div>
            <div class="desc">Rainbow Dust - coffee</div>
            <div class="compare_box">
                <div class="img_vs_holder">
                    <div class="vs_img"><img src="//spacegoods.com/cdn/shop/files/coffee_square_1000x.jpg?v=1721763123" alt="us"><img src="//spacegoods.com/cdn/shop/t/346/assets/satisfaction.svg?v=148103522804112738131722621927" alt="satisfaction" class="satis_badge"></div>
                    <div
                        class="img_vs">VS.</div>
                <div class="vs_img"><img src="//spacegoods.com/cdn/shop/files/coffee_PDP_1000x.webp?v=1720523880" alt="them"></div>
            </div>
            <div class="vs_desc_holder">
                <div class="s_vs_desc">
                    <div class="us_desc">
                        <div>zero crash or jitters</div>
                    </div>
                    <div class="them_desc">
                        <div>can give major crashes or jitters</div>
                    </div>
                </div>
                <div class="s_vs_desc">
                    <div class="us_desc">
                        <div>delicious coffee taste</div>
                    </div>
                    <div class="them_desc">
                        <div>bland coffee taste</div>
                    </div>
                </div>
                <div class="s_vs_desc">
                    <div class="us_desc">
                        <div>improved immunity support</div>
                    </div>
                    <div class="them_desc">
                        <div>zero immunity support</div>
                    </div>
                </div>
                <div class="s_vs_desc">
                    <div class="us_desc">
                        <div>all-in-one super blend</div>
                    </div>
                    <div class="them_desc">
                        <div>just coffee, nothing else</div>
                    </div>
                </div>
            </div>
            <div class="descs_below_table">Rainbow Dust v1.0 can be mixed with just about anything to enjoy it however you like...</div>
            <a class="try_btn" href="https://spacegoods.com/pages/science" >TRY RAINBOW DUST RISK-FREE</a>
            <div class="desc_below_btn">We offer a risk free money back guarantee with each order</div>
        </div>
    </div>
</div>
<script>
    $('#alternative_QxKn .try_btn').click(function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        })
    });
</script>
</div>
           <!-- Code End -->