<div id="sorting-container" class="row">
                  <div class="col-md-4 mb-3 mb-md-0">
                    <!-- Navbar -->
                    <div class="navbar-expand-md">
                      <!-- Navbar Toggle -->
                      <div class="d-grid">
                        <button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
                          <span class="d-flex justify-content-between align-items-center">
                            <span class="h6 mb-0">Filter nav menu</span>

                            <span class="navbar-toggler-default">
                              <i class="bi-list"></i>
                            </span>

                            <span class="navbar-toggler-toggled">
                              <i class="bi-x"></i>
                            </span>
                          </span>
                        </button>
                      </div>
                      <!-- End Navbar Toggle -->

                      <!-- Navbar Collapse -->
                      <div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
                        <div class="js-sticky-block"
                            data-hs-sticky-block-options='{
                             "parentSelector": "#navbarVerticalNavMenu",
                             "targetSelector": "#header",
                             "breakpoint": "md",
                             "startPoint": "#navbarVerticalNavMenu",
                             "endPoint": "#stickyBlockEndPoint",
                             "stickyOffsetTop": 20
                           }'>
                          <ul id="navbarSettings" class="js-filter-options nav nav-link-gray nav-vertical nav-tabs nav-lg mb-5" role="tablist">
                            <li class="nav-item" role="presentation">
                              <a class="nav-link active" href="javascript:;" data-group="all">All</a>
                            </li>
                            <li class="nav-item" role="presentation">
                              <a class="nav-link" href="javascript:;" data-group="branding">Branding</a>
                            </li>
                            <li class="nav-item" role="presentation">
                              <a class="nav-link" href="javascript:;" data-group="development">Development</a>
                            </li>
                            <li class="nav-item" role="presentation">
                              <a class="nav-link" href="javascript:;" data-group="product-design">Product Design</a>
                            </li>
                          </ul>

                          <a class="link" href="#">All our case studies <i class="bi-chevron-right small ms-1"></i></a>
                        </div>
                      </div>
                      <!-- End Navbar Collapse -->
                    </div>
                    <!-- End Navbar -->
                  </div>
                  <!-- End Col -->

                  <div class="col-md-8">
                    <div class="js-shuffle row row-cols-1 row-cols-sm-2 row-cols-md-3">
                      <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["branding"]'>
                        <!-- Card -->
                        <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                          <img class="card-img-top" src="../assets/img/600x650/img1.jpg" alt="Image Description">
                          <div class="card-body">
                            <span class="card-subtitle text-body">Branding</span>
                            <h5 class="card-title">Hondo Loggy</h5>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["development"]'>
                        <!-- Card -->
                        <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                          <img class="card-img-top" src="../assets/img/600x650/img2.jpg" alt="Image Description">
                          <div class="card-body">
                            <span class="card-subtitle text-body">Development</span>
                            <h5 class="card-title">Wibbitz</h5>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["product-design"]'>
                        <!-- Card -->
                        <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                          <img class="card-img-top" src="../assets/img/600x650/img3.jpg" alt="Image Description">
                          <div class="card-body">
                            <span class="card-subtitle text-body">Product Design</span>
                            <h5 class="card-title">The Hub</h5>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["product-design"]'>
                        <!-- Card -->
                        <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                          <img class="card-img-top" src="../assets/img/600x650/img4.jpg" alt="Image Description">
                          <div class="card-body">
                            <span class="card-subtitle text-body">Product Design</span>
                            <h5 class="card-title">Starbucks</h5>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["product"]'>
                        <!-- Card -->
                        <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                          <img class="card-img-top" src="../assets/img/600x650/img5.jpg" alt="Image Description">
                          <div class="card-body">
                            <span class="card-subtitle text-body">Product Design</span>
                            <h5 class="card-title">TATT</h5>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["branding"]'>
                        <!-- Card -->
                        <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                          <img class="card-img-top" src="../assets/img/600x650/img8.jpg" alt="Image Description">
                          <div class="card-body">
                            <span class="card-subtitle text-body">Branding</span>
                            <h5 class="card-title">Slack Agency</h5>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->

                    <!-- End Sticky End Point -->
                    <div id="stickyBlockEndPoint"></div>
                  </div>
                  <!-- End Col -->
                </div>
                <!-- End Row -->
              
            

              
                <!-- JS Implementing Plugins -->
                <!-- bundlejs:vendor [..] -->
                <script src="../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
                <script src="../node_modules/shufflejs/dist/shuffle.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF STICKY BLOCKS
                    // =======================================================
                    Promise.all(Array.from(document.images)
                      .filter(img => !img.complete)
                      .map(img => new Promise(resolve => {
                        img.onload = img.onerror = resolve
                      })))
                      .then(() => {
                        new HSStickyBlock('.js-sticky-block', {
                          targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
                        })
                      })


                    // INITIALIZATION OF SHUFFLE
                    // =======================================================
                    class ShufflePorfolio {
                      constructor(element) {
                        this.element = element;
                        this.shuffle = new Shuffle(element, {
                          itemSelector: '.js-shuffle-item',
                          speed: 500
                        })

                        this.addFilterButtons()
                      }

                      addFilterButtons() {
                        const options = document.querySelector('.js-filter-options')
                        if (!options) {
                          return
                        }

                        const filterButtons = Array.from(options.children)
                        const onClick = this._handleFilterClick.bind(this)
                        filterButtons.forEach((button) => {
                          button.addEventListener('click', onClick, false)
                        });
                      }

                      _handleFilterClick(evt) {
                        const btn = evt.currentTarget.firstElementChild
                        const isActive = btn.classList.contains('active')
                        const btnGroup = btn.getAttribute('data-group')

                        this._removeActiveClassFromChildren(btn.parentNode.parentNode)

                        let filterGroup
                        if (isActive) {
                          btn.classList.remove('active')
                          filterGroup = Shuffle.ALL_ITEMS
                        } else {
                          btn.classList.add('active')
                          filterGroup = btnGroup
                        }

                        this.shuffle.filter(filterGroup)
                      }

                      _removeActiveClassFromChildren(parent) {
                        const { children } = parent
                        for (let i = children.length - 1; i >= 0; i--) {
                          children[i].firstElementChild.classList.remove('active')
                        }
                      }
                    }

                    new ShufflePorfolio(document.querySelector('.js-shuffle'))

                    // Added smooth scroll on sorting
                    const sortingContainer = document.getElementById('sorting-container')

                    document.getElementById('navbarSettingsShuffle').querySelectorAll('.nav-link')
                            .forEach(item => item.addEventListener('click', () => sortingContainer.scrollIntoView({
                              behavior: 'smooth'
                            })))
                  })()
                </script>
              
            

              
                <!-- Work -->
                <div class="container content-space-1 content-space-b-md-3">
                  <!-- Heading -->
                  <div class="w-lg-50 text-center mx-lg-auto mb-7">
                    <h1>Explore our endless design options</h1>
                    <p>Learn from Space customers who are turning their dreams into a reality.</p>
                  </div>
                  <!-- End Heading -->

                  <!-- Nav Scroller -->
                  <div class="js-nav-scroller hs-nav-scroller-horizontal mb-5">
                    <span class="hs-nav-scroller-arrow-prev" style="display: none;">
                      <a class="hs-nav-scroller-arrow-link" href="javascript:;">
                        <i class="bi-chevron-left"></i>
                      </a>
                    </span>

                    <span class="hs-nav-scroller-arrow-next" style="display: none;">
                      <a class="hs-nav-scroller-arrow-link" href="javascript:;">
                        <i class="bi-chevron-right"></i>
                      </a>
                    </span>

                    <div class="d-flex justify-content-center">
                      <!-- Nav -->
                      <ul class="js-filter-options nav nav-link-gray nav-lg" id="portfolioTab" role="tablist">
                        <li class="nav-item" role="presentation">
                          <a class="nav-link active" href="javascript:;" data-group="all">All</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" href="javascript:;" data-group="branding">Branding</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" href="javascript:;" data-group="development">Development</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" href="javascript:;" data-group="product-design">Product Design</a>
                        </li>
                      </ul>
                      <!-- End Nav -->
                    </div>
                  </div>
                  <!-- End Nav Scroller -->

                  <div class="js-shuffle row row-cols-1 row-cols-sm-2 row-cols-md-3">
                    <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["branding"]'>
                      <!-- Card -->
                      <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                        <img class="card-img-top" src="../assets/img/600x650/img1.jpg" alt="Image Description">
                        <div class="card-body">
                          <span class="card-subtitle text-body">Branding</span>
                          <h5 class="card-title">Hondo Loggy</h5>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["development"]'>
                      <!-- Card -->
                      <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                        <img class="card-img-top" src="../assets/img/600x650/img2.jpg" alt="Image Description">
                        <div class="card-body">
                          <span class="card-subtitle text-body">Development</span>
                          <h5 class="card-title">Wibbitz</h5>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["product-design"]'>
                      <!-- Card -->
                      <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                        <img class="card-img-top" src="../assets/img/600x650/img3.jpg" alt="Image Description">
                        <div class="card-body">
                          <span class="card-subtitle text-body">Product Design</span>
                          <h5 class="card-title">The Hub</h5>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["product-design"]'>
                      <!-- Card -->
                      <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                        <img class="card-img-top" src="../assets/img/600x650/img4.jpg" alt="Image Description">
                        <div class="card-body">
                          <span class="card-subtitle text-body">Product Design</span>
                          <h5 class="card-title">Starbucks</h5>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["product"]'>
                      <!-- Card -->
                      <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                        <img class="card-img-top" src="../assets/img/600x650/img5.jpg" alt="Image Description">
                        <div class="card-body">
                          <span class="card-subtitle text-body">Product Design</span>
                          <h5 class="card-title">TATT</h5>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="js-shuffle-item col-sm-6 mb-5" data-groups='["branding"]'>
                      <!-- Card -->
                      <a class="card card-flush card-transition" href="../portfolio-case-study.html">
                        <img class="card-img-top" src="../assets/img/600x650/img8.jpg" alt="Image Description">
                        <div class="card-body">
                          <span class="card-subtitle text-body">Branding</span>
                          <h5 class="card-title">Slack Agency</h5>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <div class="text-center">
                    <a class="btn btn-outline-primary" href="#">View more</a>
                  </div>
                </div>
                <!-- End Work -->
              
            

              
                <!-- JS Implementing Plugins -->
                <!-- bundlejs:vendor [..] -->
                <script src="../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
                <script src="../node_modules/shufflejs/dist/shuffle.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF STICKY BLOCKS
                    // =======================================================
                    Promise.all(Array.from(document.images)
                      .filter(img => !img.complete)
                      .map(img => new Promise(resolve => {
                        img.onload = img.onerror = resolve
                      })))
                      .then(() => {
                        new HSStickyBlock('.js-sticky-block', {
                          targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
                        })
                      })


                    // INITIALIZATION OF SHUFFLE
                    // =======================================================
                    class ShufflePorfolio {
                      constructor(element) {
                        this.element = element;
                        this.shuffle = new Shuffle(element, {
                          itemSelector: '.js-shuffle-item',
                          speed: 500
                        })

                        this.addFilterButtons()
                      }

                      addFilterButtons() {
                        const options = document.querySelector('.js-filter-options')
                        if (!options) {
                          return
                        }

                        const filterButtons = Array.from(options.children)
                        const onClick = this._handleFilterClick.bind(this)
                        filterButtons.forEach((button) => {
                          button.addEventListener('click', onClick, false)
                        });
                      }

                      _handleFilterClick(evt) {
                        const btn = evt.currentTarget.firstElementChild
                        const isActive = btn.classList.contains('active')
                        const btnGroup = btn.getAttribute('data-group')

                        this._removeActiveClassFromChildren(btn.parentNode.parentNode)

                        let filterGroup
                        if (isActive) {
                          btn.classList.remove('active')
                          filterGroup = Shuffle.ALL_ITEMS
                        } else {
                          btn.classList.add('active')
                          filterGroup = btnGroup
                        }

                        this.shuffle.filter(filterGroup)
                      }

                      _removeActiveClassFromChildren(parent) {
                        const { children } = parent
                        for (let i = children.length - 1; i >= 0; i--) {
                          children[i].firstElementChild.classList.remove('active')
                        }
                      }
                    }

                    new ShufflePorfolio(document.querySelector('.js-shuffle'))
                  })()
                </script>