@include('layouts.header')
@include('layouts.tostMessage')

{{-- main content --}}
<!-- Cart -->

<style>
    body {
        margin: 0;
        padding: 0;
    }

    .portfolio-menu {
        text-align: center;
    }

    .portfolio-menu ul li {
        display: inline-block;
        margin: 0;
        list-style: none;
        padding: 10px 15px;
        cursor: pointer;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .portfolio-item .item {
        float: left;
        margin-bottom: 10px;
    }

    .portfolio-item .item.video video {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
</style>

<section class="bg-img1 txt-center p-lr-15 p-tb-92" style="background-image: url('{{ asset('images/bg-0011.webp') }}');">
    <h2 class="txt-center gradient-text mob-text"> 
      <span class="great-vibes-regular center-line " >
        <a href="https://www.instagram.com/bwc_clothing/" target="_blank" class="gradient-text mob-text">
            <strong>&gt;&gt; Join The Circle &lt;&lt;</strong>
        </a>
    </span>
    <!--<p class="tagline tagline-mob">-Join The Circle, Wear Breadwinners Circle</p>-->
    </h2>
</section>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

<div class="container">
    <div class="portfolio-menu mt-2 mb-4">
        <!--<ul>-->
        <!--    <li class="btn btn-outline-dark active" data-filter="*">All</li>-->
        <!--    <li class="btn btn-outline-dark" data-filter=".fashion">Fashion</li>-->
        <!--    <li class="btn btn-outline-dark" data-filter=".trend">Trend</li>-->
        <!--    <li class="btn btn-outline-dark" data-filter=".blogs">Blogs</li>-->
        <!--</ul>-->
    </div>
    <div class="portfolio-item row">
        <div class="item blogs col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(13).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(13).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item fashion col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(5).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(5).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item fashion col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(7).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(7).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item trend col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(10).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(10).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item blogs col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(9).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(9).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item fashion col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(8).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(8).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item trend col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(15).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(15).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item blogs col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(16).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(16).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item fashion col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(2).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(2).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item trend col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(3).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(3).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item blogs col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(6).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(6).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
        <div class="item fashion col-lg-3 col-md-4 col-6 col-sm">
            <a href="{{ asset('images/white-bg/product(14).webp') }}" class="fancylight popup-btn"
                data-fancybox-group="light">
                <img class="img-fluid" src="{{ asset('images/white-bg/product(14).webp') }}" alt="Product 16" loading="lazy">
            </a>
        </div>
    </div>
</div>


<script>
    $('.portfolio-menu ul li').click(function() {
        $('.portfolio-menu ul li').removeClass('active');
        $(this).addClass('active');

        var selector = $(this).attr('data-filter');
        $('.portfolio-item').isotope({
            filter: selector
        });
        return false;
    });
    $(document).ready(function() {
        var popup_btn = $('.popup-btn');
        popup_btn.magnificPopup({
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    });
</script>

@include('layouts.footer')