@extends('base')

@section('title', 'Accueil')

@section('content')

 <div class="page-content">
            <div class="holder mt-0 py-15 py-md-6 bgcolor">
                <div class="container">
                    {{-- <div class="creative-product-carousel-wrap"> --}}
                    <div class="creative-product-carousel js-creative-product-carousel">
                        <div class="creative-product-carousel-item">
                            <div class="creative-product-carousel-text" style="color: #a96228;">Meilleures Ventes</div>
                            <div class="row flex-nowrap four-in-row">
                                <div class="col">
                                    <div class="prd-img-area">
                                        <a href="{{route('produits.index')}}" class="prd-img prd-img--noequal">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                            data-srcset="{{ asset('assets/images2/fitop.png') }}"
                                            class="prd-img-first lazyload" alt="">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                            data-srcset="{{ asset('assets/images2/fitopRE.png') }}"
                                            class="prd-img-first lazyload" alt="">
                                        </a>


                                        {{-- <div class="prd-labels">
                                            <div class="label-sale"><span>-50%<br>Sale</span></div>
                                        </div> --}}
                                    </div>
                                    {{-- <div class="prd-info">
                                        <h2 class="prd-title"><a href="product.html">Legging Red/Black</a></h2>
                                        <div class="creative-product-carousel-hovers">
                                            <div class="creative-product-carousel-price">
                                                <div class="price-old">$299</div>
                                                <div class="price-new">$149</div>
                                            </div>
                                            <div class="creative-product-carousel-action">
                                                <button class="btn js-prd-addtocart"
                                                    data-product='{"name": "Fitness Jumpsuit", "path":"images/products/product-04.jpg", "url":"product.html", "aspect_ratio":0.778}'>Add
                                                    To Cart</button>
                                            </div>
                                        </div>
                                    </div> --}}
                                </div>
                                <div class="col">
                                    <div class="prd-img-area">
                                        <a href="{{route('produits.index')}}" class="prd-img prd-img--noequal">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                data-srcset="{{ asset('assets/images2/shoes1.png') }}"
                                                class="prd-img-first lazyload" alt="">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                data-srcset="{{ asset('assets/images2/shoes1RE.png') }}"
                                                class="prd-img-first lazyload" alt="">
                                        </a>
                                    </div>
                                    {{-- <div class="prd-info">
                                        <h2 class="prd-title"><a href="product.html">Leggings Snake print</a></h2>
                                        <div class="creative-product-carousel-hovers">
                                            <div class="creative-product-carousel-price">
                                                <div class="price-new">$299</div>
                                            </div>
                                            <div class="creative-product-carousel-action">
                                                <button class="btn js-prd-addtocart"
                                                    data-product='{"name": "Fitness Jumpsuit", "path":"images/products/product-04.jpg", "url":"product.html", "aspect_ratio":0.778}'>Add
                                                    To Cart</button>
                                            </div>
                                        </div>
                                    </div> --}}
                                </div>
                                <div class="col">
                                    <div class="prd-img-area">
                                        <a href="{{route('produits.index')}}" class="prd-img prd-img--noequal">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                data-srcset="{{ asset('assets/images2/fitop2.png') }}"
                                                class="prd-img-first lazyload" alt="">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                data-srcset="{{ asset('assets/images2/fitop2RE.png') }}"
                                                class="prd-img-first lazyload" alt="">
                                        </a>
                                    </div>
                                    {{-- <div class="prd-info">
                                        <h2 class="prd-title"><a href="product.html">Striped Leggings and Top</a></h2>
                                        <div class="creative-product-carousel-hovers">
                                            <div class="creative-product-carousel-price">
                                                <div class="price-new">$289</div>
                                            </div>
                                            <div class="creative-product-carousel-action">
                                                <button class="btn js-prd-addtocart"
                                                    data-product='{"name": "Fitness Jumpsuit", "path":"images/products/product-04.jpg", "url":"product.html", "aspect_ratio":0.778}'>Add
                                                    To Cart</button>
                                            </div>
                                        </div>
                                    </div> --}}
                                </div>
                                <div class="col">
                                    <div class="prd-img-area">
                                        <a href="{{route('produits.index')}}" class="prd-img prd-img--noequal">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                data-srcset="{{ asset('assets/images2/shoes2.png') }}"
                                                class="prd-img-first lazyload" alt="">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                data-srcset="{{ asset('assets/images2/shoes2RE.png') }}"
                                                class="prd-img-first lazyload" alt="">
                                        </a>
                                    </div>
                                    {{-- <div class="prd-info">
                                        <h2 class="prd-title"><a href="product.html">Fitness Jumpsuit</a></h2>
                                        <div class="creative-product-carousel-hovers">
                                            <div class="creative-product-carousel-price">
                                                <div class="price-new">$399</div>
                                            </div>
                                            <div class="creative-product-carousel-action">
                                                <form action="#">
                                                    <button class="btn js-prd-addtocart"
                                                        data-product='{"name": "Fitness Jumpsuit", "path":"images/products/product-04.jpg", "url":"product.html", "aspect_ratio":0.778}'>Add
                                                        To Cart</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>
                        </div>


                    </div>
                    {{-- <div class="collection-grid-1 collection-grid-1-vertical js-creative-product-carousel-tabs">
                        <div class="collection-grid-1-item js-collection-grid-nav active">
                            <a href="#" class="collection-grid-1-item-inside" title="Category Name">
                                <i class="icon-shopping"></i>
                            </a>
                        </div>
                        <div class="collection-grid-1-item js-collection-grid-nav">
                            <a href="#" class="collection-grid-1-item-inside" title="Category Name">
                                <i class="icon-tag"></i>
                            </a>
                        </div>
                        <div class="collection-grid-1-item js-collection-grid-nav">
                            <a href="#" class="collection-grid-1-item-inside" title="Category Name">
                                <i class="icon-fashion"></i>
                            </a>
                        </div>
                        <div class="collection-grid-1-item">
                            <a href="#" class="collection-grid-1-item-inside" title="Category Name">
                                View all ...
                            </a>
                        </div>
                    </div> --}}
                    {{-- </div> --}}
                </div>
            </div>
            <div class="holder holder-welcome-block py-50 mt-0">
                <div class="container">
                    <div class="row welcome-block">
                        <div class="col-lg-7 welcome-block-image">
                            <img src="{{ asset('assets/logo/logoM.png') }}" alt="Logo" style="max-width: 40%;">
                            <img class="lazyload fade-up"
                                src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                data-src="images/hello-image.png" alt="">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 150 150"
                                style="enable-background:new 0 0 150 150; width: 77%;" xml:space="preserve"
                                class="circle_decor @@classes">
                                <defs>
                                    <filter x="0" y="0" width="100%" height="100%" id="dropshadow_1_r001"
                                        filterUnits="userSpaceOnUse">
                                        <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
                                        <feOffset dx="-3" dy="0" result="offsetblur" />
                                        <feMerge>
                                            <feMergeNode />
                                            <feMergeNode in="SourceGraphic" />
                                            <feMergeNode in="SourceGraphic" />
                                        </feMerge>
                                    </filter>
                                    <filter x="0" y="0" width="100%" height="100%" id="dropshadow_2_r001"
                                        filterUnits="userSpaceOnUse">
                                        <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
                                        <feOffset dx="3" dy="0" result="offsetblur" />
                                        <feMerge>
                                            <feMergeNode />
                                            <feMergeNode in="SourceGraphic" />
                                            <feMergeNode in="SourceGraphic" />
                                        </feMerge>
                                    </filter>
                                    <clipPath id="circle_decor_mask_r001">
                                        <circle r="73.5" cx="75" cy="75" />
                                    </clipPath>
                                </defs>
                                <path fill="#55C1AE"
                                    d="M74.933,148.5c-9.9,0-19.533-1.95-28.583-5.783c-8.75-3.699-16.6-9-23.333-15.734c-6.75-6.731-12.034-14.582-15.733-23.332C3.45,94.6,1.5,84.967,1.5,75.066c0-9.9,1.95-19.533,5.783-28.583c3.7-8.75,9-16.6,15.733-23.333S37.6,11.116,46.35,7.417c9.05-3.833,18.684-5.783,28.583-5.783c9.901,0,19.534,1.95,28.584,5.783c8.75,3.7,16.6,9,23.332,15.733c6.733,6.733,12.032,14.583,15.733,23.333c3.832,9.067,5.783,18.684,5.783,28.583c0,9.9-1.951,19.534-5.783,28.584c-3.701,8.75-9,16.6-15.733,23.332c-6.732,6.733-14.582,12.033-23.332,15.733C94.467,146.55,84.834,148.5,74.933,148.5z M75,13.783C41.25,13.783,13.783,41.25,13.783,75S41.25,136.217,75,136.217S136.217,108.75,136.217,75S108.75,13.783,75,13.783z" />
                                <circle r="5.8" cx="75" cy="7.8" fill-opacity="0.25"
                                    style="filter:url(#dropshadow_1_r001)" clip-path="url(#circle_decor_mask_r001)" />
                                <circle r="5.8" cx="74" cy="142.5" fill-opacity="0.25"
                                    style="filter:url(#dropshadow_2_r001)" clip-path="url(#circle_decor_mask_r001)" />
                                <path fill="#55C1AE"
                                    d="M81.101,7.712c0,3.346-2.761,6.059-6.164,6.059l0,0c-3.404,0-6.164-2.713-6.164-6.059l0,0c0-3.345,2.76-6.058,6.164-6.058l0,0C78.34,1.654,81.101,4.367,81.101,7.712L81.101,7.712z" />
                                <path fill="#55C1AE"
                                    d="M81.177,142.363c0,3.346-2.761,6.06-6.164,6.06l0,0c-3.404,0-6.164-2.714-6.164-6.06l0,0c0-3.345,2.76-6.058,6.164-6.058l0,0C78.416,136.306,81.177,139.019,81.177,142.363L81.177,142.363z" />
                            </svg>
                        </div>
                        <div class="col-lg-11 welcome-block-text-wrap">
                            <div class="welcome-block-text"><i class="custom-color">Bienvenue</i><br>Chez MSportswear
                            </div>
                            <div class="welcome-block-info">
                                <p>Chez Msportswear, nous croyons que le sport est bien plus qu'une activité physique -
                                    c'est un mode de vie. C'est pourquoi nous nous efforçons de fournir à nos clients les
                                    meilleurs vêtements de sport en ligne, conçus pour allier performance, style et confort.
                                </p>
                                {{-- <p class="mt-3 mt-lg-5 welcome-block-btn"><a href="#" class="btn">start
                                    shopping</a></p> --}}
                            </div>
                            <div class="welcome-block-icon"><i class="icon-fox"></i></div>
                            {{-- <div class="welcome-block-social">
                            <ul class="social-list-circle">
                                <li>
                                    <a href="#"><i class="icon-facebook"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="icon-twitter"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="icon-google"></i></a>
                                </li>
                            </ul>
                        </div> --}}
                        </div>
                        {{-- <div class="welcome-block-btn">
                            <a href="#" class="btn">start shopping</a>
                        </div> --}}
                    </div>
                </div>
            </div>
            {{-- <div class="holder @classes">
            <div class="container">
                <div class="row bnr-grid vert-margin justify-content-md-center">
                    <div class="col-sm">
                        <a href="#" class="bnr image-hover-scale bnr--bottom bnr-left" data-fontratio="5.695">
                            <div class="bnr-img image-container" style="padding-bottom: 121.3%"><img
                                    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                    data-srcset="images/banners/banner-index-02.png" class="lazyload fade-up"
                                    alt=""></div>
                            <div class="bnr-caption">
                                <div class="bnr-text2">This week<br><span>50%</span></div>
                                <div class="bnr-text3">YOUR <span>GAME</span></div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm">
                        <a href="#" class="bnr image-hover-scale bnr--middle bnr--center"
                            data-fontratio="5.695">
                            <div class="bnr-img image-container" style="padding-bottom: 121.3%">
                                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                    data-srcset="images/banners/banner-index-03.png" class="lazyload fade-up"
                                    alt="">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                    viewBox="0 0 150 150" style="enable-background:new 0 0 150 150; "
                                    xml:space="preserve" class="circle_decor circle_decor--tr">
                                    <defs>
                                        <filter x="0" y="0" width="100%" height="100%" id="dropshadow_1_b01"
                                            filterUnits="userSpaceOnUse">
                                            <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
                                            <feOffset dx="-3" dy="0" result="offsetblur" />
                                            <feMerge>
                                                <feMergeNode />
                                                <feMergeNode in="SourceGraphic" />
                                                <feMergeNode in="SourceGraphic" />
                                            </feMerge>
                                        </filter>
                                        <filter x="0" y="0" width="100%" height="100%" id="dropshadow_2_b01"
                                            filterUnits="userSpaceOnUse">
                                            <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
                                            <feOffset dx="3" dy="0" result="offsetblur" />
                                            <feMerge>
                                                <feMergeNode />
                                                <feMergeNode in="SourceGraphic" />
                                                <feMergeNode in="SourceGraphic" />
                                            </feMerge>
                                        </filter>
                                        <clipPath id="circle_decor_mask_b01">
                                            <circle r="73.5" cx="75" cy="75" />
                                        </clipPath>
                                    </defs>
                                    <path fill="#55C1AE"
                                        d="M74.933,148.5c-9.9,0-19.533-1.95-28.583-5.783c-8.75-3.699-16.6-9-23.333-15.734c-6.75-6.731-12.034-14.582-15.733-23.332C3.45,94.6,1.5,84.967,1.5,75.066c0-9.9,1.95-19.533,5.783-28.583c3.7-8.75,9-16.6,15.733-23.333S37.6,11.116,46.35,7.417c9.05-3.833,18.684-5.783,28.583-5.783c9.901,0,19.534,1.95,28.584,5.783c8.75,3.7,16.6,9,23.332,15.733c6.733,6.733,12.032,14.583,15.733,23.333c3.832,9.067,5.783,18.684,5.783,28.583c0,9.9-1.951,19.534-5.783,28.584c-3.701,8.75-9,16.6-15.733,23.332c-6.732,6.733-14.582,12.033-23.332,15.733C94.467,146.55,84.834,148.5,74.933,148.5z M75,13.783C41.25,13.783,13.783,41.25,13.783,75S41.25,136.217,75,136.217S136.217,108.75,136.217,75S108.75,13.783,75,13.783z" />
                                    <circle r="5.8" cx="75" cy="7.8" fill-opacity="0.25"
                                        style="filter:url(#dropshadow_1_b01)" clip-path="url(#circle_decor_mask_b01)" />
                                    <circle r="5.8" cx="74" cy="142.5" fill-opacity="0.25"
                                        style="filter:url(#dropshadow_2_b01)" clip-path="url(#circle_decor_mask_b01)" />
                                    <path fill="#55C1AE"
                                        d="M81.101,7.712c0,3.346-2.761,6.059-6.164,6.059l0,0c-3.404,0-6.164-2.713-6.164-6.059l0,0c0-3.345,2.76-6.058,6.164-6.058l0,0C78.34,1.654,81.101,4.367,81.101,7.712L81.101,7.712z" />
                                    <path fill="#55C1AE"
                                        d="M81.177,142.363c0,3.346-2.761,6.06-6.164,6.06l0,0c-3.404,0-6.164-2.714-6.164-6.06l0,0c0-3.345,2.76-6.058,6.164-6.058l0,0C78.416,136.306,81.177,139.019,81.177,142.363L81.177,142.363z" />
                                </svg>
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                    viewBox="0 0 150 150" style="enable-background:new 0 0 150 150; "
                                    xml:space="preserve" class="circle_decor circle_decor--bl">
                                    <defs>
                                        <filter x="0" y="0" width="100%" height="100%" id="dropshadow_1_b02"
                                            filterUnits="userSpaceOnUse">
                                            <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
                                            <feOffset dx="-3" dy="0" result="offsetblur" />
                                            <feMerge>
                                                <feMergeNode />
                                                <feMergeNode in="SourceGraphic" />
                                                <feMergeNode in="SourceGraphic" />
                                            </feMerge>
                                        </filter>
                                        <filter x="0" y="0" width="100%" height="100%" id="dropshadow_2_b02"
                                            filterUnits="userSpaceOnUse">
                                            <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
                                            <feOffset dx="3" dy="0" result="offsetblur" />
                                            <feMerge>
                                                <feMergeNode />
                                                <feMergeNode in="SourceGraphic" />
                                                <feMergeNode in="SourceGraphic" />
                                            </feMerge>
                                        </filter>
                                        <clipPath id="circle_decor_mask_b02">
                                            <circle r="73.5" cx="75" cy="75" />
                                        </clipPath>
                                    </defs>
                                    <path fill="#55C1AE"
                                        d="M74.933,148.5c-9.9,0-19.533-1.95-28.583-5.783c-8.75-3.699-16.6-9-23.333-15.734c-6.75-6.731-12.034-14.582-15.733-23.332C3.45,94.6,1.5,84.967,1.5,75.066c0-9.9,1.95-19.533,5.783-28.583c3.7-8.75,9-16.6,15.733-23.333S37.6,11.116,46.35,7.417c9.05-3.833,18.684-5.783,28.583-5.783c9.901,0,19.534,1.95,28.584,5.783c8.75,3.7,16.6,9,23.332,15.733c6.733,6.733,12.032,14.583,15.733,23.333c3.832,9.067,5.783,18.684,5.783,28.583c0,9.9-1.951,19.534-5.783,28.584c-3.701,8.75-9,16.6-15.733,23.332c-6.732,6.733-14.582,12.033-23.332,15.733C94.467,146.55,84.834,148.5,74.933,148.5z M75,13.783C41.25,13.783,13.783,41.25,13.783,75S41.25,136.217,75,136.217S136.217,108.75,136.217,75S108.75,13.783,75,13.783z" />
                                    <circle r="5.8" cx="75" cy="7.8" fill-opacity="0.25"
                                        style="filter:url(#dropshadow_1_b02)" clip-path="url(#circle_decor_mask_b02)" />
                                    <circle r="5.8" cx="74" cy="142.5" fill-opacity="0.25"
                                        style="filter:url(#dropshadow_2_b02)" clip-path="url(#circle_decor_mask_b02)" />
                                    <path fill="#55C1AE"
                                        d="M81.101,7.712c0,3.346-2.761,6.059-6.164,6.059l0,0c-3.404,0-6.164-2.713-6.164-6.059l0,0c0-3.345,2.76-6.058,6.164-6.058l0,0C78.34,1.654,81.101,4.367,81.101,7.712L81.101,7.712z" />
                                    <path fill="#55C1AE"
                                        d="M81.177,142.363c0,3.346-2.761,6.06-6.164,6.06l0,0c-3.404,0-6.164-2.714-6.164-6.06l0,0c0-3.345,2.76-6.058,6.164-6.058l0,0C78.416,136.306,81.177,139.019,81.177,142.363L81.177,142.363z" />
                                </svg>
                            </div>
                            <div class="bnr-caption">
                                <div class="bnr-text4">SALE</div>
                                <div class="bnr-text5 text-right">-70%</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm">
                        <a href="#" class="bnr image-hover-scale bnr--bottom bnr--left" data-fontratio="5.695">
                            <div class="bnr-img image-container" style="padding-bottom: 121.3%">
                                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                    data-srcset="images/banners/banner-index-04.png" class="lazyload fade-up"
                                    alt="">
                            </div>
                            <div class="bnr-caption">
                                <div class="bnr-text2">This week<br><span>50%</span></div>
                                <div class="bnr-text3"><span>LIFE IS SHORT, </span>PLAY <span>HARD!</span></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div> --}}
            <div class="holder ">
                <div class="container">
                    <div class="row vert-margin justify-content-md-center">
                        {{-- <div class="col-sm-5">
                        <div class="js-sticky-collision">
                            <div class="bnr-sticky">
                                <a href="category.html" class="bnr image-hover-scale">
                                    <div class="bnr-img image-container" style="padding-bottom: 178%"><img
                                        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                        data-srcset="{{asset('assets/images2/fitop4.png')}}" class="lazyload fade-up"
                                        alt=""></div>
                                    </a>
                                </div>
                            </div>
                        </div> --}}
                        <div class="col-sm-18">
                            <h1 class="custom-color">Vêtements de Sports</h1>
                            <div class="prd-grid data-to-show-4 data-to-show-md-2 data-to-show-sm-2 data-to-show-xs-2">
                                @foreach ($vetements as $produit)
                                    <div class="prd ">
                                        <div class="prd-inside">
                                            <div class="prd-img-area">
                                                <a href="{{route('produits.show', $produit->slug)}}" class="prd-img image-hover-scale image-container">
                                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                        data-src="{{ asset('assets/images2/' . $produit->photo_principale) }}"
                                                        alt="Legging Red/Black" class="js-prd-img lazyload">
                                                    <div class="foxic-loader"></div>
                                                    <div class="prd-big-circle-labels">
                                                        <div class="label-new"><span>Nouveau</span></div>
                                                    </div>
                                                </a>
                                                <div class="prd-circle-labels">
                                                    <a href="#"
                                                        class="circle-label-compare circle-label-wishlist--add js-add-wishlist mt-0"
                                                        title="Add To Wishlist"><i class="icon-heart-stroke"></i></a><a
                                                        href="#"
                                                        class="circle-label-compare circle-label-wishlist--off js-remove-wishlist mt-0"
                                                        title="Remove From Wishlist"><i class="icon-heart-hover"></i></a>
                                                    <a href="#"
                                                        class="circle-label-qview js-prd-quickview prd-hide-mobile"
                                                        data-src="ajax/ajax-quickview.html"><i
                                                            class="icon-eye"></i><span>APERÇU RAPIDE</span></a>

                                                    <div
                                                        class="colorswatch-label colorswatch-label--variants js-prd-colorswatch">
                                                        <i class="icon-palette"><span class="path1"></span><span
                                                                class="path2"></span><span class="path3"></span><span
                                                                class="path4"></span><span class="path5"></span><span
                                                                class="path6"></span><span class="path7"></span><span
                                                                class="path8"></span><span class="path9"></span><span
                                                                class="path10"></span></i>
                                                        {{-- <ul>
                                                    <li data-image="{{asset('assetsimages/products/product-01.jpg')}}"><a
                                                            class="js-color-toggle" data-toggle="tooltip"
                                                            data-placement="left" title="Color Name"><img
                                                                src="{{asset('assets/images/colorswatch/color-red.png')}}"
                                                                alt=""></a></li>
                                                    <li data-image="{{asset('assets/images/products/product-01-1.jpg')}}"><a
                                                            class="js-color-toggle" data-toggle="tooltip"
                                                            data-placement="left" title="Color Name"><img
                                                                src="{{asset('assets/images/colorswatch/color-mint.png')}}"
                                                                alt=""></a></li>
                                                    <li data-image="{{asset('assets/images/products/product-01-2.jpg')}}"><a
                                                            class="js-color-toggle" data-toggle="tooltip"
                                                            data-placement="left" title="Color Name"><img
                                                                src="{{asset('assets/images/colorswatch/color-violet.png')}}"
                                                                alt=""></a></li>
                                                    <li data-image="{{asset('assets/images/products/product-01-3.jpg')}}"><a
                                                            class="js-color-toggle" data-toggle="tooltip"
                                                            data-placement="left" title="Color Name"><img
                                                                src="{{asset('assets/images/colorswatch/color-green.png')}}"
                                                                alt=""></a></li>
                                                </ul> --}}
                                                    </div>

                                                </div>

                                                <ul class="list-options color-swatch">
                                                    <li data-image="{{ asset('assets/images2/' . $produit->photo_principale) }}"
                                                        class="active"></li>
                                                </ul>

                                            </div>
                                            <div class="prd-info">
                                                <div class="prd-info-wrap">
                                                    <div class="prd-info-top">
                                                        <div class="prd-rating"><i class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i></div>
                                                        <div class="prd-tag"><a href="#">M-Sportswear</a></div>
                                                    </div>
                                                    <h2 class="prd-title"><a
                                                            href="{{ route('produits.show', $produit->slug) }}">{{ $produit->nom }}</a>
                                                    </h2>
                                                    <div class="prd-description">
                                                        {{ $produit->description }}
                                                    </div>
                                                </div>
                                                <div class="prd-hovers">
                                                    <div class="prd-circle-labels">
                                                        <div><a href="#"
                                                                class="circle-label-compare circle-label-wishlist--add js-add-wishlist mt-0"
                                                                title="Add To Wishlist"><i
                                                                    class="icon-heart-stroke"></i></a><a href="#"
                                                                class="circle-label-compare circle-label-wishlist--off js-remove-wishlist mt-0"
                                                                title="Remove From Wishlist"><i
                                                                    class="icon-heart-hover"></i></a></div>
                                                        <div><a href="#"
                                                                class="circle-label-qview prd-hide-mobile js-prd-quickview"
                                                                data-src="ajax/ajax-quickview.html"><i
                                                                    class="icon-eye"></i><span>APERÇU RAPIDE</span></a>
                                                        </div>
                                                    </div>
                                                    <div class="prd-price">

                                                        {{-- <div class="price-old">$ 200</div> --}}

                                                        <div class="price-new"><strong>{{ $produit->prix_ht }}</strong> F
                                                            CFA HT</div>
                                                    </div>
                                                    <div class="prd-action">
                                                        <div class="prd-action-left">
                                                            {{-- <form action="#"> --}}
                                                            {{-- <button class="btn js-prd-addtocart"> --}}
                                                            <a href="{{ route('produits.show', $produit->slug) }}"
                                                                class="btn btn primary">Voir l'article</a>
                                                            {{-- </button> --}}
                                                            {{-- </form> --}}
                                                        </div>
                                                        <div class="prd-action-right">
                                                            <div class="prd-action-right-inside">
                                                                <div class="prd-tag"><a href="#">M-Sportswear</a>
                                                                </div>
                                                                <div class="prd-rating"><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="holder prd-block_links-wrap-bg d-none d-md-block">
                <div class="prd-block_links-wrap prd-block_info_item container mt-2 mt-md-5 py-1">
                    <div class="">
                        {{-- <span><i class="icon-call-center"></i>24/7 Support</span> --}}
                    </div>
                    <div class="prd-block_link">
                        <div class="prd-block_link"></div>
                        &nbsp; &nbsp; &nbsp;
                        <a href="{{ route('vetements.index') }}">
                            {{-- <span> --}}
                                Voir plus
                            {{-- </span> --}}
                        </a>
                    </div>
                    <div class="prd-block_link">
                        {{-- <span><i class="icon-delivery-truck"></i> Fast Shipping</span> --}}
                    </div>
                </div>
            </div>
            {{-- EQUIPEMENT --}}


            <div class="holder ">
                <div class="container">
                    <div class="row vert-margin justify-content-md-center">
                        {{-- <div class="col-sm-5">
                        <div class="js-sticky-collision">
                            <div class="bnr-sticky">
                                <a href="category.html" class="bnr image-hover-scale">
                                    <div class="bnr-img image-container" style="padding-bottom: 178%"><img
                                        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                        data-srcset="{{asset('assets/images2/fitop4.png')}}" class="lazyload fade-up"
                                        alt=""></div>
                                    </a>
                                </div>
                            </div>
                        </div> --}}
                        <div class="col-sm-18">
                            <h1 class="custom-color">Equipements Sportifs</h1>
                            <div class="prd-grid data-to-show-4 data-to-show-md-2 data-to-show-sm-2 data-to-show-xs-2">
                                @foreach ($equipements as $produit)
                                    <div class="prd ">
                                        <div class="prd-inside">
                                            <div class="prd-img-area">
                                                <a href="{{route('produits.show', $produit->slug)}}" class="prd-img image-hover-scale image-container">
                                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                        data-src="{{ asset('assets/images2/' . $produit->photo_principale) }}"
                                                        alt="Legging Red/Black" class="js-prd-img lazyload">
                                                    <div class="foxic-loader"></div>
                                                    <div class="prd-big-circle-labels">
                                                        <div class="label-new"><span>New</span></div>
                                                    </div>
                                                </a>
                                                <div class="prd-circle-labels">
                                                    <a href="#"
                                                        class="circle-label-compare circle-label-wishlist--add js-add-wishlist mt-0"
                                                        title="Add To Wishlist"><i class="icon-heart-stroke"></i></a><a
                                                        href="#"
                                                        class="circle-label-compare circle-label-wishlist--off js-remove-wishlist mt-0"
                                                        title="Remove From Wishlist"><i class="icon-heart-hover"></i></a>
                                                    <a href="#"
                                                        class="circle-label-qview js-prd-quickview prd-hide-mobile"
                                                        data-src="ajax/ajax-quickview.html"><i
                                                            class="icon-eye"></i><span>APERÇU</span></a>

                                                    <div
                                                        class="colorswatch-label colorswatch-label--variants js-prd-colorswatch">
                                                        <i class="icon-palette"><span class="path1"></span><span
                                                                class="path2"></span><span class="path3"></span><span
                                                                class="path4"></span><span class="path5"></span><span
                                                                class="path6"></span><span class="path7"></span><span
                                                                class="path8"></span><span class="path9"></span><span
                                                                class="path10"></span></i>
                                                        {{-- <ul>
                                                    <li data-image="{{asset('assetsimages/products/product-01.jpg')}}"><a
                                                            class="js-color-toggle" data-toggle="tooltip"
                                                            data-placement="left" title="Color Name"><img
                                                                src="{{asset('assets/images/colorswatch/color-red.png')}}"
                                                                alt=""></a></li>
                                                    <li data-image="{{asset('assets/images/products/product-01-1.jpg')}}"><a
                                                            class="js-color-toggle" data-toggle="tooltip"
                                                            data-placement="left" title="Color Name"><img
                                                                src="{{asset('assets/images/colorswatch/color-mint.png')}}"
                                                                alt=""></a></li>
                                                    <li data-image="{{asset('assets/images/products/product-01-2.jpg')}}"><a
                                                            class="js-color-toggle" data-toggle="tooltip"
                                                            data-placement="left" title="Color Name"><img
                                                                src="{{asset('assets/images/colorswatch/color-violet.png')}}"
                                                                alt=""></a></li>
                                                    <li data-image="{{asset('assets/images/products/product-01-3.jpg')}}"><a
                                                            class="js-color-toggle" data-toggle="tooltip"
                                                            data-placement="left" title="Color Name"><img
                                                                src="{{asset('assets/images/colorswatch/color-green.png')}}"
                                                                alt=""></a></li>
                                                </ul> --}}
                                                    </div>

                                                </div>

                                                <ul class="list-options color-swatch">
                                                    <li data-image="{{ asset('assets/images2/' . $produit->photo_principale) }}"
                                                        class="active"></li>
                                                </ul>

                                            </div>
                                            <div class="prd-info">
                                                <div class="prd-info-wrap">
                                                    <div class="prd-info-top">
                                                        <div class="prd-rating"><i class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i></div>
                                                        <div class="prd-tag"><a href="#">M-Sportswear</a></div>
                                                    </div>
                                                    <h2 class="prd-title"><a
                                                            href="{{ route('produits.show', $produit->slug) }}">{{ $produit->nom }}</a>
                                                    </h2>
                                                    <div class="prd-description">
                                                        {{ $produit->description }}
                                                    </div>
                                                </div>
                                                <div class="prd-hovers">
                                                    <div class="prd-circle-labels">
                                                        <div><a href="#"
                                                                class="circle-label-compare circle-label-wishlist--add js-add-wishlist mt-0"
                                                                title="Add To Wishlist"><i
                                                                    class="icon-heart-stroke"></i></a><a href="#"
                                                                class="circle-label-compare circle-label-wishlist--off js-remove-wishlist mt-0"
                                                                title="Remove From Wishlist"><i
                                                                    class="icon-heart-hover"></i></a></div>
                                                        <div><a href="#"
                                                                class="circle-label-qview prd-hide-mobile js-prd-quickview"
                                                                data-src="ajax/ajax-quickview.html"><i
                                                                    class="icon-eye"></i><span>APERÇU RAPIDE</span></a>
                                                        </div>
                                                    </div>
                                                    <div class="prd-price">

                                                        {{-- <div class="price-old">$ 200</div> --}}

                                                        <div class="price-new"><strong>{{ $produit->prix_ht }}</strong> F
                                                            CFA HT</div>
                                                    </div>
                                                    <div class="prd-action">
                                                        <div class="prd-action-left">
                                                            {{-- <form action="#"> --}}
                                                            {{-- <button class="btn js-prd-addtocart"> --}}
                                                            <a href="{{ route('produits.show', $produit->slug) }}"
                                                                class="btn btn primary">Voir l'article</a>
                                                            {{-- </button> --}}
                                                            {{-- </form> --}}
                                                        </div>
                                                        <div class="prd-action-right">
                                                            <div class="prd-action-right-inside">
                                                                <div class="prd-tag"><a href="#">M-Sportswear</a>
                                                                </div>
                                                                <div class="prd-rating"><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="holder prd-block_links-wrap-bg d-none d-md-block">
                <div class="prd-block_links-wrap prd-block_info_item container mt-2 mt-md-5 py-1">
                    <div class="">
                        {{-- <span><i class="icon-call-center"></i>24/7 Support</span> --}}
                    </div>
                    <div class="prd-block_link">
                        <div class="prd-block_link"></div>
                        &nbsp; &nbsp; &nbsp;
                        <a href="{{ route('equipements.index') }}">
                            {{-- <span> --}}
                                Voir plus
                            {{-- </span> --}}
                        </a>
                    </div>
                    <div class="prd-block_link">
                        {{-- <span><i class="icon-delivery-truck"></i> Fast Shipping</span> --}}
                    </div>
                </div>
            </div>

            {{-- NEW TRADITIONAL --}}


            <div class="holder ">
                <div class="container">
                    <div class="row vert-margin justify-content-md-center">
                        {{-- <div class="col-sm-5">
                <div class="js-sticky-collision">
                    <div class="bnr-sticky">
                        <a href="category.html" class="bnr image-hover-scale">
                            <div class="bnr-img image-container" style="padding-bottom: 178%"><img
                                src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                data-srcset="{{asset('assets/images2/fitop4.png')}}" class="lazyload fade-up"
                                alt=""></div>
                            </a>
                        </div>
                    </div>
                </div> --}}
                        <div class="col-sm-18">
                            <h1 class="custom-color">New-Traditional</h1>
                            <div class="prd-grid data-to-show-4 data-to-show-md-2 data-to-show-sm-2 data-to-show-xs-2">
                                @foreach ($newtraditionnals as $produit)
                                    <div class="prd ">
                                        <div class="prd-inside">
                                            <div class="prd-img-area">
                                                <a href="{{route('produits.show', $produit->slug)}}" class="prd-img image-hover-scale image-container">
                                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                        data-src="{{ asset('assets/images2/' . $produit->photo_principale) }}"
                                                        alt="Legging Red/Black" class="js-prd-img lazyload">
                                                    <div class="foxic-loader"></div>
                                                    <div class="prd-big-circle-labels">

                                                        <div class="label-new"><span>New</span></div>


                                                    </div>
                                                </a>
                                                <div class="prd-circle-labels">
                                                    <a href="#"
                                                        class="circle-label-compare circle-label-wishlist--add js-add-wishlist mt-0"
                                                        title="Add To Wishlist"><i class="icon-heart-stroke"></i></a><a
                                                        href="#"
                                                        class="circle-label-compare circle-label-wishlist--off js-remove-wishlist mt-0"
                                                        title="Remove From Wishlist"><i class="icon-heart-hover"></i></a>
                                                    <a href="#"
                                                        class="circle-label-qview js-prd-quickview prd-hide-mobile"
                                                        data-src="ajax/ajax-quickview.html"><i class="icon-eye"></i><span>
                                                            APERÇU RAPIDE</span></a>

                                                    <div
                                                        class="colorswatch-label colorswatch-label--variants js-prd-colorswatch">
                                                        <i class="icon-palette"><span class="path1"></span><span
                                                                class="path2"></span><span class="path3"></span><span
                                                                class="path4"></span><span class="path5"></span><span
                                                                class="path6"></span><span class="path7"></span><span
                                                                class="path8"></span><span class="path9"></span><span
                                                                class="path10"></span></i>
                                                        {{-- <ul>
                                            <li data-image="{{asset('assetsimages/products/product-01.jpg')}}"><a
                                                    class="js-color-toggle" data-toggle="tooltip"
                                                    data-placement="left" title="Color Name"><img
                                                        src="{{asset('assets/images/colorswatch/color-red.png')}}"
                                                        alt=""></a></li>
                                            <li data-image="{{asset('assets/images/products/product-01-1.jpg')}}"><a
                                                    class="js-color-toggle" data-toggle="tooltip"
                                                    data-placement="left" title="Color Name"><img
                                                        src="{{asset('assets/images/colorswatch/color-mint.png')}}"
                                                        alt=""></a></li>
                                            <li data-image="{{asset('assets/images/products/product-01-2.jpg')}}"><a
                                                    class="js-color-toggle" data-toggle="tooltip"
                                                    data-placement="left" title="Color Name"><img
                                                        src="{{asset('assets/images/colorswatch/color-violet.png')}}"
                                                        alt=""></a></li>
                                            <li data-image="{{asset('assets/images/products/product-01-3.jpg')}}"><a
                                                    class="js-color-toggle" data-toggle="tooltip"
                                                    data-placement="left" title="Color Name"><img
                                                        src="{{asset('assets/images/colorswatch/color-green.png')}}"
                                                        alt=""></a></li>
                                        </ul> --}}
                                                    </div>

                                                </div>

                                                <ul class="list-options color-swatch">
                                                    <li data-image="{{ asset('assets/images2/' . $produit->photo_principale) }}"
                                                        class="active"></li>
                                                </ul>

                                            </div>
                                            <div class="prd-info">
                                                <div class="prd-info-wrap">
                                                    <div class="prd-info-top">
                                                        <div class="prd-rating"><i class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i><i
                                                                class="icon-star-fill fill"></i></div>
                                                        <div class="prd-tag"><a href="#">M-Sportswear</a></div>
                                                    </div>
                                                    <h2 class="prd-title"><a
                                                            href="{{ route('produits.show', $produit->slug) }}">{{ $produit->nom }}</a>
                                                    </h2>
                                                    <div class="prd-description">
                                                        {{ $produit->description }}
                                                    </div>
                                                </div>
                                                <div class="prd-hovers">
                                                    <div class="prd-circle-labels">
                                                        <div><a href="#"
                                                                class="circle-label-compare circle-label-wishlist--add js-add-wishlist mt-0"
                                                                title="Add To Wishlist"><i
                                                                    class="icon-heart-stroke"></i></a><a href="#"
                                                                class="circle-label-compare circle-label-wishlist--off js-remove-wishlist mt-0"
                                                                title="Remove From Wishlist"><i
                                                                    class="icon-heart-hover"></i></a></div>
                                                        <div><a href="#"
                                                                class="circle-label-qview prd-hide-mobile js-prd-quickview"
                                                                data-src="ajax/ajax-quickview.html"><i
                                                                    class="icon-eye"></i><span>APERÇU RAPIDE</span></a>
                                                        </div>
                                                    </div>
                                                    <div class="prd-price">

                                                        {{-- <div class="price-old">$ 200</div> --}}

                                                        <div class="price-new"><strong>{{ $produit->prix_ht }}</strong> F
                                                            CFA HT</div>
                                                    </div>
                                                    <div class="prd-action">
                                                        <div class="prd-action-left">
                                                            {{-- <form action="#"> --}}
                                                            {{-- <button class="btn js-prd-addtocart"> --}}
                                                            <a href="{{ route('produits.show', $produit->slug) }}"
                                                                class="btn btn primary">Voir l'article</a>
                                                            {{-- </button> --}}
                                                            {{-- </form> --}}
                                                        </div>
                                                        <div class="prd-action-right">
                                                            <div class="prd-action-right-inside">
                                                                <div class="prd-tag"><a href="#">M-Sportswear</a>
                                                                </div>
                                                                <div class="prd-rating"><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i><i
                                                                        class="icon-star-fill fill"></i></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="holder prd-block_links-wrap-bg d-none d-md-block">
                <div class="prd-block_links-wrap prd-block_info_item container mt-2 mt-md-5 py-1">
                    <div class="">
                        {{-- <span><i class="icon-call-center"></i>24/7 Support</span> --}}
                    </div>
                    <div class="prd-block_link">
                        <div class="prd-block_link"></div>
                        &nbsp; &nbsp; &nbsp;
                        <a href="{{ route('traditions.index') }}">
                            {{-- <span> --}}
                                Voir plus
                            {{-- </span> --}}
                        </a>
                    </div>
                    <div class="prd-block_link">
                        {{-- <span><i class="icon-delivery-truck"></i> Fast Shipping</span> --}}
                    </div>
                </div>
            </div>

            {{-- <div class="holder holder-subscribe-full lazyload">
            <div class="circle_decor_wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 150 150"
                    style="enable-background:new 0 0 150 150; " xml:space="preserve"
                    class="circle_decor circle_decor--tl">
                    <defs>
                        <filter x="0" y="0" width="100%" height="100%" id="dropshadow_1_003"
                            filterUnits="userSpaceOnUse">
                            <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
                            <feOffset dx="-3" dy="0" result="offsetblur" />
                            <feMerge>
                                <feMergeNode />
                                <feMergeNode in="SourceGraphic" />
                                <feMergeNode in="SourceGraphic" />
                            </feMerge>
                        </filter>
                        <filter x="0" y="0" width="100%" height="100%" id="dropshadow_2_003"
                            filterUnits="userSpaceOnUse">
                            <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
                            <feOffset dx="3" dy="0" result="offsetblur" />
                            <feMerge>
                                <feMergeNode />
                                <feMergeNode in="SourceGraphic" />
                                <feMergeNode in="SourceGraphic" />
                            </feMerge>
                        </filter>
                        <clipPath id="circle_decor_mask_003">
                            <circle r="73.5" cx="75" cy="75" />
                        </clipPath>
                    </defs>
                    <path fill="#55C1AE"
                        d="M74.933,148.5c-9.9,0-19.533-1.95-28.583-5.783c-8.75-3.699-16.6-9-23.333-15.734c-6.75-6.731-12.034-14.582-15.733-23.332C3.45,94.6,1.5,84.967,1.5,75.066c0-9.9,1.95-19.533,5.783-28.583c3.7-8.75,9-16.6,15.733-23.333S37.6,11.116,46.35,7.417c9.05-3.833,18.684-5.783,28.583-5.783c9.901,0,19.534,1.95,28.584,5.783c8.75,3.7,16.6,9,23.332,15.733c6.733,6.733,12.032,14.583,15.733,23.333c3.832,9.067,5.783,18.684,5.783,28.583c0,9.9-1.951,19.534-5.783,28.584c-3.701,8.75-9,16.6-15.733,23.332c-6.732,6.733-14.582,12.033-23.332,15.733C94.467,146.55,84.834,148.5,74.933,148.5z M75,13.783C41.25,13.783,13.783,41.25,13.783,75S41.25,136.217,75,136.217S136.217,108.75,136.217,75S108.75,13.783,75,13.783z" />
                    <circle r="5.8" cx="75" cy="7.8" fill-opacity="0.25"
                        style="filter:url(#dropshadow_1_003)" clip-path="url(#circle_decor_mask_003)" />
                    <circle r="5.8" cx="74" cy="142.5" fill-opacity="0.25"
                        style="filter:url(#dropshadow_2_003)" clip-path="url(#circle_decor_mask_003)" />
                    <path fill="#55C1AE"
                        d="M81.101,7.712c0,3.346-2.761,6.059-6.164,6.059l0,0c-3.404,0-6.164-2.713-6.164-6.059l0,0c0-3.345,2.76-6.058,6.164-6.058l0,0C78.34,1.654,81.101,4.367,81.101,7.712L81.101,7.712z" />
                    <path fill="#55C1AE"
                        d="M81.177,142.363c0,3.346-2.761,6.06-6.164,6.06l0,0c-3.404,0-6.164-2.714-6.164-6.06l0,0c0-3.345,2.76-6.058,6.164-6.058l0,0C78.416,136.306,81.177,139.019,81.177,142.363L81.177,142.363z" />
                </svg>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 150 150"
                    style="enable-background:new 0 0 150 150; " xml:space="preserve"
                    class="circle_decor circle_decor--br">
                    <defs>
                        <filter x="0" y="0" width="100%" height="100%" id="dropshadow_1_004"
                            filterUnits="userSpaceOnUse">
                            <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
                            <feOffset dx="-3" dy="0" result="offsetblur" />
                            <feMerge>
                                <feMergeNode />
                                <feMergeNode in="SourceGraphic" />
                                <feMergeNode in="SourceGraphic" />
                            </feMerge>
                        </filter>
                        <filter x="0" y="0" width="100%" height="100%" id="dropshadow_2_004"
                            filterUnits="userSpaceOnUse">
                            <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
                            <feOffset dx="3" dy="0" result="offsetblur" />
                            <feMerge>
                                <feMergeNode />
                                <feMergeNode in="SourceGraphic" />
                                <feMergeNode in="SourceGraphic" />
                            </feMerge>
                        </filter>
                        <clipPath id="circle_decor_mask_004">
                            <circle r="73.5" cx="75" cy="75" />
                        </clipPath>
                    </defs>
                    <path fill="#55C1AE"
                        d="M74.933,148.5c-9.9,0-19.533-1.95-28.583-5.783c-8.75-3.699-16.6-9-23.333-15.734c-6.75-6.731-12.034-14.582-15.733-23.332C3.45,94.6,1.5,84.967,1.5,75.066c0-9.9,1.95-19.533,5.783-28.583c3.7-8.75,9-16.6,15.733-23.333S37.6,11.116,46.35,7.417c9.05-3.833,18.684-5.783,28.583-5.783c9.901,0,19.534,1.95,28.584,5.783c8.75,3.7,16.6,9,23.332,15.733c6.733,6.733,12.032,14.583,15.733,23.333c3.832,9.067,5.783,18.684,5.783,28.583c0,9.9-1.951,19.534-5.783,28.584c-3.701,8.75-9,16.6-15.733,23.332c-6.732,6.733-14.582,12.033-23.332,15.733C94.467,146.55,84.834,148.5,74.933,148.5z M75,13.783C41.25,13.783,13.783,41.25,13.783,75S41.25,136.217,75,136.217S136.217,108.75,136.217,75S108.75,13.783,75,13.783z" />
                    <circle r="5.8" cx="75" cy="7.8" fill-opacity="0.25"
                        style="filter:url(#dropshadow_1_004)" clip-path="url(#circle_decor_mask_004)" />
                    <circle r="5.8" cx="74" cy="142.5" fill-opacity="0.25"
                        style="filter:url(#dropshadow_2_004)" clip-path="url(#circle_decor_mask_004)" />
                    <path fill="#55C1AE"
                        d="M81.101,7.712c0,3.346-2.761,6.059-6.164,6.059l0,0c-3.404,0-6.164-2.713-6.164-6.059l0,0c0-3.345,2.76-6.058,6.164-6.058l0,0C78.34,1.654,81.101,4.367,81.101,7.712L81.101,7.712z" />
                    <path fill="#55C1AE"
                        d="M81.177,142.363c0,3.346-2.761,6.06-6.164,6.06l0,0c-3.404,0-6.164-2.714-6.164-6.06l0,0c0-3.345,2.76-6.058,6.164-6.058l0,0C78.416,136.306,81.177,139.019,81.177,142.363L81.177,142.363z" />
                </svg>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-auto">
                        <div class="subscribe-form-title-lg">Newsletter</div>
                        <div class="subscribe-form-title-sm">Subscribe to our weekly newsletter.</div>
                    </div>
                    <div class="col">
                        <div class="subscribe-form">
                            <form action="#">
                                <div class="form-inline">
                                    <div class="form-control-wrap">
                                        <input type="text" class="form-control" placeholder="Type your e-mail...">
                                        <svg preserveAspectRatio="none">
                                            <rect x="2" y="2" rx="6" height="100%" width="100%"></rect>
                                        </svg>
                                        <span class="bottom"></span>
                                    </div>
                                    <button type="submit" class="btn btn--lg">subscribe</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        </div>

        <div class="footer-sticky">
            <!--  sticky add to cart -->
            <div class="sticky-addcart js-stickyAddToCart closed">
                <div class="container">
                    <div class="row">
                        <div class="col-auto sticky-addcart_image">
                            <a href="product.html">
                                <img src="images/skins/fashion/products/product-01-1.jpg" alt="" />
                            </a>
                        </div>
                        <div class="col col-sm-5 col-lg-4 col-xl-5 sticky-addcart_info">
                            <h1 class="sticky-addcart_title">Leather Pegged Pants</h1>
                            <div class="sticky-addcart_price">
                                <span class="sticky-addcart_price--actual">$180.00</span>
                                <span class="sticky-addcart_price--old">$210.00</span>
                            </div>
                        </div>
                        <div class="col-auto sticky-addcart_options  prd-block prd-block_info--style1">
                            <div class="select-wrapper">
                                <select class="form-control form-control--sm">
                                    <option value="">--Please choose an option--</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-auto sticky-addcart_actions">
                            <div class="prd-block_qty">
                                <span class="option-label">Quantity:</span>
                                <div class="qty qty-changer">
                                    <button class="decrease"></button>
                                    <input type="number" class="qty-input" value="1" data-min="1"
                                        data-max="1000">
                                    <button class="increase"></button>
                                </div>
                            </div>
                            <div class="btn-wrap">
                                <button class="btn js-prd-addtocart" data-fancybox data-src="#modalCheckOut">Add to cart
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--added to cart-->
            <div class="popup-addedtocart js-popupAddToCart closed" data-close="50000">
                <div class="container">
                    <div class="row">
                        <div class="popup-addedtocart-close js-popupAddToCart-close"><i class="icon-close"></i></div>
                        <div class="popup-addedtocart-cart js-open-drop" data-panel="#dropdnMinicart"><i
                                class="icon-basket"></i></div>
                        <div class="col-auto popup-addedtocart_logo">
                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                data-src="images/logo-white-sm.png" class="lazyload fade-up" alt="">
                        </div>
                        <div class="col popup-addedtocart_info">
                            <div class="row">
                                <a href="product.html" class="col-auto popup-addedtocart_image">
                                    <span class="image-container w-100">
                                        <img src="images/skins/fashion/products/product-01-1.jpg" alt="" />
                                    </span>
                                </a>
                                <div class="col popup-addedtocart_text">
                                    <a href="product.html" class="popup-addedtocart_title"></a>
                                    <span class="popup-addedtocart_message">Added to <a href="cart.html"
                                            class="underline">Cart</a></span>
                                    <span class="popup-addedtocart_error_message"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto popup-addedtocart_actions">
                            <span>You can continue</span> <a href="#" class="btn btn--grey btn--sm js-open-drop"
                                data-panel="#dropdnMinicart"><i class="icon-basket"></i><span>Check Cart</span></a>
                            <span>or</span> <a href="checkout.html" class="btn btn--invert btn--sm"><i
                                    class="icon-envelope-1"></i><span>Check out</span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--  select options -->
            <div class="sticky-addcart popup-selectoptions js-popupSelectOptions closed" data-close="500000">
                <div class="container">
                    <div class="row">
                        <div class="popup-selectoptions-close js-popupSelectOptions-close"><i class="icon-close"></i>
                        </div>
                        <div class="col-auto sticky-addcart_image sticky-addcart_image--zoom">
                            <a href="#" data-caption="">
                                <span class="image-container"><img src="#" alt="" /></span>
                            </a>
                        </div>
                        <div class="col col-sm-5 col-lg-4 col-xl-5 sticky-addcart_info">
                            <h1 class="sticky-addcart_title"><a href="#">&nbsp;</a></h1>
                            <div class="sticky-addcart_price">
                                <span class="sticky-addcart_price--actual"></span>
                                <span class="sticky-addcart_price--old"></span>
                            </div>
                            <div class="sticky-addcart_error_message">Error Message</div>
                        </div>
                        <div class="col-auto sticky-addcart_options prd-block prd-block_info--style1">
                            <div class="select-wrapper">
                                <select class="form-control form-control--sm sticky-addcart_options_select">
                                    <option value="none">Select Option please..</option>
                                </select>
                                <div class="invalid-feedback">Can't be blank</div>
                            </div>
                        </div>
                        <div class="col-auto sticky-addcart_actions">
                            <div class="prd-block_qty">
                                <span class="option-label">Quantity:</span>
                                <div class="qty qty-changer">
                                    <button class="decrease"></button>
                                    <input type="number" class="qty-input" value="2" data-min="1"
                                        data-max="10000">
                                    <button class="increase"></button>
                                </div>
                            </div>
                            <div class="btn-wrap">
                                <button class="btn js-prd-addtocart">Add to cart</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- back to top -->
            <a class="back-to-top js-back-to-top compensate-for-scrollbar" href="#" title="Scroll To Top">
                <i class="icon icon-angle-up"></i>
            </a>
            <!-- loader -->
            <div class="loader-horizontal js-loader-horizontal">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
                </div>
            </div>
        </div>
        <!-- payment note -->
        {{-- <div class="footer-sticky">
        <div class="payment-notification-wrap js-pn" data-visible-time="3000" data-hidden-time="3000"
            data-delay="500" data-from = "Aberdeen,Bakersfield,Birmingham,Cambridge,Youngstown"
            data-products = '[{"productname":"Leather Pegged Pants", "productlink":"product.html","productimage":"images/skins/fashion/products/product-01-1.jpg"},{"productname":"Black Fabric Backpack", "productlink":"product.html","productimage":"images/skins/fashion/products/product-28-1.jpg"},{"productname":"Combined Chunky Sneakers", "productlink":"product.html","productimage":"images/skins/fashion/products/product-23-1.jpg"}]'>
            <div class="payment-notification">
                <div class="payment-notification-inside">
                    <div class="payment-notification-container">
                        <a href="#" class="payment-notification-image js-pn-link">
                            <img src="images/products/product-01.jpg" class="js-pn-image" alt="">
                        </a>
                        <div class="payment-notification-content-wrapper">
                            <div class="payment-notification-content">
                                <div class="payment-notification-text">Someone purchased</div>
                                <a href="product.html" class="payment-notification-name js-pn-name js-pn-link">Apple
                                    watch</a>
                                <div class="payment-notification-bottom">
                                    <div class="payment-notification-when"><span class="js-pn-time">32</span> min ago
                                    </div>
                                    <div class="payment-notification-from">from <span
                                            class="js-pn-from">Riverside</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="payment-notification-close"><i class="icon-close-bold"></i></div>
                    <div class="payment-notification-qw prd-hide-mobile js-prd-quickview"
                        data-src="ajax/ajax-quickview.html"><i class="icon-eye"></i></div>
                </div>
            </div>
        </div>
    </div> --}}
        {{-- <div class="popup-newsletter js-newslettermodal d-none" data-pause="5000" data-expires="1" data-only-index="false">
	<div class="popup-newsletter-close js-popup-newsletter-close"><i class="icon-close"></i></div>
	<div class="container">
		<div class="row">
			<div class="col-lg-5 col-xl-auto">
				<div class="popup-newsletter-logo">
					<img class="lazyload fade-up" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="images/logo-popup.png 1x, images/logo-popup2x.png 2x" alt="Logo">
				</div>
			</div>
			<div class="col-lg-13 col-xl">
			<div class="row">
				<div class="col-lg-9">
					<div class="newsletter-form-title-lg">Be The First To Know</div>
					<div class="newsletter-form-title-sm">About our newest arrivals, special offers plus 10% off on your first order.</div>
				</div>
				<div class="col-lg-9 newsletter-form">
					<form action="#">
						<div class="form-inline">
							<div class="form-control-wrap">
								<input type="text" class="form-control" autocomplete="off" placeholder="E-mail...">
								<svg preserveAspectRatio="none"><rect x="2" y="2" rx="6" height="100%" width="100%"></rect></svg>
								<span class="bottom"></span>
							</div>
							<button type="submit" class="btn btn--lg">subscribe</button>
						</div>
					</form>
				</div>
			</div>
			</div>
		</div>
	</div>
</div> --}}

@endsection