<!-- Hero Section -->
                <div class="gradient-half-warning-v3">
                  <div class="container space-2">
                    <div class="row justify-content-md-between">
                      <!-- Item Image -->
                      <div class="col-md-6 mb-7 mb-md-0">
                        <div class="js-slick-carousel u-slick"
                             data-infinite="true"
                             data-arrows-classes="u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
                             data-arrow-left-classes="fas fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left"
                             data-arrow-right-classes="fas fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right"
                             data-pagi-classes="text-center u-slick__pagination u-slick__pagination--white mt-7 mb-0">
                          <div class="js-slide px-7 my-4">
                            <img class="img-fluid" src="../../assets/img/mockups/img6.png" alt="Image Description">
                          </div>
                          <div class="js-slide px-7 my-4">
                            <img class="img-fluid" src="../../assets/img/mockups/img7.png" alt="Image Description">
                          </div>
                          <div class="js-slide px-7 my-4">
                            <img class="img-fluid" src="../../assets/img/mockups/img1.png" alt="Image Description">
                          </div>
                        </div>
                      </div>
                      <!-- End Item Image -->

                      <!-- Content -->
                      <div class="col-md-5">
                        <div class="mb-5">
                          <h1 class="text-white font-weight-normal">The Front t-shirt</h1>
                          <span class="d-block h3 text-white mb-3">$25</span>
                          <p class="text-white">Our Front Design Makeup collection – to create your coolest look, then switch it up again tomorrow. Make every day, night and everything in-between as extraordinary as you are.</p>
                        </div>

                        <!-- Size Custom Select -->
                        <div class="w-lg-75 mb-5">
                          <div class="d-flex justify-content-between">
                            <label class="h6 small d-block text-uppercase text-white">
                              Size
                            </label>
                            <a class="h6 small d-block text-uppercase text-light" href="#shoppingCartModal" role="button"
                               data-modal-target="#shoppingCartModal"
                               data-overlay-color="#111722">
                              Size guide
                            </a>
                          </div>

                          <select class="custom-select">
                            <option selected>Please select</option>
                            <option value="sizeSelect1">Small</option>
                            <option value="sizeSelect2">Medium</option>
                            <option value="sizeSelect3">Large</option>
                            <option value="sizeSelect4">Extra large</option>
                          </select>
                        </div>
                        <!-- End Size Custom Select -->

                        <a class="btn btn-soft-white transition-3d-hover" href="#">
                          <span class="fas fa-cart-arrow-down mr-2"></span>
                          Add to Cart
                        </a>
                      </div>
                      <!-- End Content -->
                    </div>
                  </div>
                </div>
                <!-- End Hero Section -->

                <!-- Shopping Cart Modal Window -->
                <div id="shoppingCartModal" class="js-modal-window u-modal-window">
                  <div class="card">
                    <!-- Header -->
                    <header class="card-header bg-light py-3 px-5">
                      <div class="d-flex justify-content-between align-items-center">
                        <h3 class="h6 mb-0">Size guide</h3>

                        <button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                    </header>
                    <!-- End Header -->

                    <!-- Body -->
                    <div class="card-body p-5">
                      <table class="table table-bordered table-striped mb-0">
                        <thead>
                          <tr>
                            <th>Size</th>
                            <th>Numeric</th>
                            <th>Chest (CM)</th>
                            <th>Arm (CM)</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>Small</td>
                            <td>36</td>
                            <td>89-94</td>
                            <td>81</td>
                          </tr>
                          <tr>
                            <td>Medium</td>
                            <td>38-40</td>
                            <td>97-102</td>
                            <td>86</td>
                          </tr>
                          <tr>
                            <td>Large</td>
                            <td>42</td>
                            <td>104-109</td>
                            <td>89</td>
                          </tr>
                          <tr>
                            <td>Extra large</td>
                            <td>44-46</td>
                            <td>112-117</td>
                            <td>91</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- End Body -->
                  </div>
                </div>
                <!-- End Shopping Cart Modal Window -->
              
            

              
                <link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
                <link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
                <link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
              
            

              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
                <script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
                <script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>

                <!-- JS Implementing Plugins -->
                <script src="../../assets/js/components/hs.slick-carousel.js"></script>
                <script src="../../assets/js/components/hs.modal-window.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of slick carousel
                    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');

                    // initialization of autonomous popups
                    $.HSCore.components.HSModalWindow.init('[data-modal-target]', .js-modal-window', {
                      autonomous: true
                    });
                  });
                </script>