@extends('layouts.category_app')
@section('contents')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />


    <style>
        #more {display: none;}
        .owl-carousel .owl-item img {
            display: block !important;
            width: 100%;
        }
        .content-full a{

            color: #0a58ca;
        }
        h2 {
            font-size: 24px !important;
        }
        h3 {
            font-size: 18px !important;
        }
        .content-inner {
            max-height: 600px;
            overflow: hidden;
            transition: max-height 0.25s ease;
        }

        .read-more {
            display: inline-block;
            margin-top: 10px;
            font-weight: bold;
            cursor: pointer;
            padding: 0px !important;
        }
        @media (max-width: 575px) {

            .slider{
                width: 100%;
                height: 142px !important;
            }
            .hero {

                background-position: center;
                background-size: cover;
                margin-top: -3px;
                height: 128px;
            }
            .hero-content {
                position: absolute;
                top: -64px;
                bottom: 0;
                left: 37px!important;
                text-align: initial;
            }
            .hero-content p {
                margin-bottom: 4px;
            }
            .hero-content span, .hero-content p {
                font-size: 17px;
                color: #2e2e2e;
            }

            .mt-5{
                margin-top: 0px !important;
            }
            .displaynoned {
                display: none!important;
            }
            .col-md-6s {
                width: 50% !important;
            }
            h2 {
                font-size: 14px !important;
            }
            .slider{
                display: none;
            }
            .product-block img {
                width: 100%;
                height: 170px !important;
            }
        }


    </style>

            <style> @media all and (max-width:575px) {

            .cate_content{

                margin-top:100px ;
            }
            .title_box h2{
                width: 346px;
            }
        }</style>

    <div id="slider" class="slider">
        <div class="hero-wrapper">
            <header class="hero">
                <div class="hero-sizing"></div>
                <div class="hero-content">
                    <span>Custom <br>
                        Packaging your</span>
                    <p>customers will love</p>
                    <a href="#get-quote" > <button type="button" class=" btn-red px-3 py-2 rounded">Get Quote</button></a>
                </div>
            </header>
        </div>


    </div>
    <section class="products_container">
        <div class="container mt-2">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="row">
                        <div class="col-12">
                            <div class="bg-white px-4 py-2 mb-2 text-center">
                                <h1>{{ $category->name }}</h1>
                            </div>
                        </div>
                    </div>
                    <div class="products-list my-4">
                        <div class="card-deck row mx-0">
                            @foreach($products as $k=>$product)
                                <div class="col-sm-6 col-xs-12 col-lg-3 col-md-6s">
                                    <div class="product-block text-center padding-none shadow-view">

                                        @if($product->product_slug=='vape-pen-boxes' || $product->product_slug=='vape-cartridge-boxes' || $product->product_slug=='vape-display-boxes'  || $product->product_slug=='dank-vape-packaging' || $product->product_slug=='platinum-vape-packaging' || $product->product_slug=='pop-vape-boxes' || $product->product_slug=='disposable-vape-packaging' || $product->product_slug=='vape-accessories-boxes'|| $product->product_slug=='vape-mods-boxes' || $product->product_slug=='e-cigarette-boxes'
    || $product->product_slug=='vape-accessories-shipping-boxes' ||
    $product->product_slug=='vape-battery-boxes'|| $product->product_slug=='custom-vape-tanks-boxes'|| $product->product_slug=='custom-mod-boxes'||
    $product->product_slug=='custom-vape-gift-boxes'||
    $product->product_slug=='vape-pen-packaging'||  $product->product_slug=='marijuana-packaging'|| $product->product_slug=='cannabis-tinctures-boxes'

    || $product->product_slug=='cannabis-cigarette-boxes'
    || $product->product_slug=='sleeves-cigarette-boxes'
    || $product->product_slug=='custom-cigar-boxes'
    || $product->product_slug=='e-cigs-boxes'
    || $product->product_slug=='hemp-display-boxes'
    || $product->product_slug=='hemp-cream-boxes'
    || $product->product_slug=='hemp-flour-boxes'
    || $product->product_slug=='hemp-teabags-boxes'
    || $product->product_slug=='hemp-oil-boxes'
    || $product->product_slug=='hemp-milk-boxes'
    || $product->product_slug=='organic-hemp-soap-boxes'
    || $product->product_slug=='large-rigid-boxes.html'
    || $product->product_slug=='small-rigid-boxes.html'
    || $product->product_slug=='luxury-rigid-boxes.html'
    || $product->product_slug=='blue-gable-boxes.html'
    || $product->product_slug=='white-gable-boxes.html'
    || $product->product_slug=='red-gable-boxes.html'
    || $product->product_slug=='corrugated-gable-boxes.html'
    || $product->product_slug=='window-gable-boxes.html'
    || $product->product_slug=='cardboard-gable-boxes.html'
    || $product->product_slug=='christmas-gable-boxes.html'
    || $product->product_slug=='gable-cereal-boxes.html'
    || $product->product_slug=='gable-food-boxes.html'
    || $product->product_slug=='kraft-gable-boxes.html'

    )


                                            <a href="{{ url($product->product_slug.'.html')}}" class="  opi-product-card-home-page"  aria-label=""  rel="noopener">
                                                @else
                                                    <a href="{{ url($product->product_slug.'.html')}}" class="  opi-product-card-home-page"  aria-label=""  rel="noopener">

                                                        @endif

                                                        <img alt="" title=""
                                                             width="356" height="300"

                                                             @if($k!='0' && $k!='1'&& $k!='2'&& $k!='3')
                                                             loading="lazy"
                                                             @endif
                                                             src='{{ asset('assets') }}/products/'
                                                             aria-label=""  >
                                                    </a>
                                                    <div class="clearfix detail-panel" >
                                                        @if($product->product_slug=='vape-pen-boxes' || $product->product_slug=='vape-cartridge-boxes' || $product->product_slug=='vape-display-boxes'  || $product->product_slug=='dank-vape-packaging' || $product->product_slug=='platinum-vape-packaging' || $product->product_slug=='pop-vape-boxes' || $product->product_slug=='disposable-vape-packaging' || $product->product_slug=='vape-accessories-boxes'|| $product->product_slug=='vape-mods-boxes' || $product->product_slug=='e-cigarette-boxes'
                             || $product->product_slug=='vape-accessories-shipping-boxes' ||
                             $product->product_slug=='vape-battery-boxes'|| $product->product_slug=='custom-vape-tanks-boxes'|| $product->product_slug=='custom-mod-boxes'||
                             $product->product_slug=='custom-vape-gift-boxes'||
                             $product->product_slug=='vape-pen-packaging'||  $product->product_slug=='marijuana-packaging'|| $product->product_slug=='cannabis-tinctures-boxes'

                             || $product->product_slug=='cannabis-cigarette-boxes'
                             || $product->product_slug=='sleeves-cigarette-boxes'
                             || $product->product_slug=='custom-cigar-boxes'
                             || $product->product_slug=='e-cigs-boxes'
                             || $product->product_slug=='hemp-display-boxes'
                             || $product->product_slug=='hemp-cream-boxes'
                             || $product->product_slug=='hemp-flour-boxes'
                             || $product->product_slug=='hemp-teabags-boxes'
                             || $product->product_slug=='hemp-oil-boxes'
                             || $product->product_slug=='hemp-milk-boxes'
                             || $product->product_slug=='organic-hemp-soap-boxes'
                             || $product->product_slug=='large-rigid-boxes.html'
                             || $product->product_slug=='small-rigid-boxes.html'
                             || $product->product_slug=='luxury-rigid-boxes.html'
                             || $product->product_slug=='blue-gable-boxes.html'
                             || $product->product_slug=='white-gable-boxes.html'
                             || $product->product_slug=='red-gable-boxes.html'
                             || $product->product_slug=='corrugated-gable-boxes.html'
                             || $product->product_slug=='window-gable-boxes.html'
                             || $product->product_slug=='cardboard-gable-boxes.html'
                             || $product->product_slug=='christmas-gable-boxes.html'
                             || $product->product_slug=='gable-cereal-boxes.html'
                             || $product->product_slug=='gable-food-boxes.html'
                             || $product->product_slug=='kraft-gable-boxes.html'

                             )
                                                            <a href="{{ url($product->product_slug.'.html')}}">                                <span class="product-title"></span>

                                                                @else
                                                                    <a href="{{ url($product->product_slug.'.html')}}">                                <span class="product-title"></span>

                                                                        @endif
                                                                                                                                            </a>
                                                    </div>

                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>


            </div>



            <section class="testi">
                <div class="container">


                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6 pt-5">
                                <span class="testi-span">CLIENT TESTIMONIAL</span>
                                <p class="p-text">GET TO KNOW ALL ABOUT OUR SERVICE THROUGH VARIOUS BUSINESS CLIENTS.
                                </p>
                                <div class="px-1 py-2">

                                    <img class="" alt="rating" title="rating" src="{{ asset('assets/images/commas.webp') }}" loading="lazy">
                                </div>
                                <div class="testimonials" id="testimonials" >

                                    <div class="owl-carousel owl-theme">
                                        @foreach($testimonials as $testimonial)
                                            <a href="{{$testimonial->link}}" target="_blank">
                                                <div class="item">
                                                    <div class="row pb-4">
                                                        <div class="col-1">
                                                            @if($testimonial->image)

                                                                <img class="user_profile" alt="user" title="user" src="{{ asset('assets/testimonials/'.$testimonial->image) }}">

                                                            @else
                                                                <div style="
    background: #fab900;
  padding: 11px;
    font-size: 23px !important;
    font-family: 'Poppins Bold';
    color: white;
    padding-top: 19px;
    border-start-end-radius: 27px;
    border-end-start-radius: 27px;
    text-align: center;
    width: 65px !important;
    margin-left: 1px;
    height: 65px !important;" class="user_profile">  {{ strtoupper(mb_substr($zd[0], 0, 1))  }} @if(!empty($zd[1])){{ strtoupper(mb_substr($zd[1], 0, 1) ) }}@endif</div>
                                                            @endif   </div>
                                                        <div class="col-9 d-flex align-items-end">
                                                            <div class="d-block px-4">
                                                                <h6>{{ $testimonial->client_name }}</h6>
                                                                <h6 style="color: #a1a1a1">{{ $testimonial->designation }}</h6>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="comments">
                                                        <p class="os_bold" style="font-style: italic">...                                                        </p>
                                                    </div>
                                                    <div class="row">
                                                        <img class="rating" alt="rating" title="rating" src="{{ asset('assets/images/stars-img.webp') }}" loading="lazy">
                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 testi-image">
                                <img class="img-fluid " alt="rating" title="rating" src="{{ asset('assets/images/layer-139.webp') }}" loading="lazy" width="636" height="420">

                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </div>
        <section id="testimonialsa" class="testimonialsa displaynonem section-bg testimonialsa">

            <div class="container-fluid container">
                <div class="justify-content-center">


                    <div class="row ">
                        <div class="col-xl-12 pr-0" style="padding-right: 0px">

                            <div class=" py-5 px-3 pb-3 ">
                                <div class="col-md-3 col-md-3ss">
                                    <span class="testimonialsa-span">GET CUSTOM QUOTE</span>
                                </div>
                                <div class="col-md-9  mt-2  displaynoned">
                                    <i class="fas fa-truck"></i> <span class="freship">Free Shipping</span>
                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="row form-first">

                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-9">
                                    @if(!empty(session('error')))
                                        <div class="alert alert-danger">
                                            {{ session('error') }}
                                        </div>
                                    @endif
                                    <form id="get_quotes" action="{{ route('category_get_quote') }}" method="post" class="get_quote">
                                        @csrf
                                        <div class="row g-3 align-items-center py-3" style="

    padding-top: 0px !important;
">
                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">Size:</label>
                                            </div>
                                            <div class="col-md-3">
                                                <input name="product_length" id="product_length" value="" class="form-control form-control-sm required" placeholder="L  ">
                                            </div>
                                            <div class="col-md-3">
                                                <input name="product_width" id="product_width" value="" class="form-control form-control-sm required" placeholder="W">
                                            </div>
                                            <div class="col-md-3">
                                                <input name="product_depth" id="product_depth" value="" class="form-control form-control-sm required" placeholder="D">                  </div>
                                            <div class="col-md-2">

                                                <select class="form-control form-select form-select-sm required" name="measurement_units" id="units">
                                                    <option value="cm">cm</option>
                                                    <option value="mm">mm</option>
                                                    <option selected="" value="inches">inch</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row g-3 align-items-center py-2">
                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">Qty:</label>
                                            </div>
                                            <div class="col-lg-4">

                                                <input type="text" name="quantity" class="form-control form-control-sm " value="" placeholder="Quantity" min="1" max="100000">


                                            </div>

                                            <div class="col-lg-3 col-md-3s">

                                                <div class="form-group">
                                                    <select name="color" class="form-control form-select  form-select-sm">
                                                        <option value="">Select Color</option>
                                                        <option value="1 Color">1 Color</option>
                                                        <option value="2 Color">2 Color</option>
                                                        <option value="3 Color">3 Color</option>
                                                        <option value="4 Color">4 Color</option>
                                                        <option value="4/1 Color">4/1 Color</option>
                                                        <option value="4/2 Color">4/2 Color</option>
                                                        <option value="4/3 Color">4/3 Color</option>
                                                        <option value="4/4 Color">4/4 Color</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-lg-4s">
                                                <input class="form-control form-control-sm required" placeholder="Product Name" name="product_name" id="name">
                                                <input type="hidden" name="qtype" value="">
                                                <input type="hidden" required  name="" class="form-control search_input_top" placeholder="Search" value="">

                                            </div>
                                            <div class="col-lg-4 col-lg-4s">
                                                <input class="form-control form-control-sm required" placeholder="Name" name="contact_name" id="name">
                                            </div>
                                        </div>
                                        <div class="row g-3 align-items-center py-2">

                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>


                                            <div class="col-lg-3 col-lg-3s">
                                                <input class="form-control form-control-sm required" required="" name="contact_phone" id="phone" placeholder="Phone No" type="text">
                                            </div>
                                            <div class="col-lg-4 col-lg-4s">
                                                <input class="form-control form-control-sm required" required="" name="contact_email" id="email" placeholder="Email Address">                  </div>

                                        </div>

                                        <div class="row g-3 align-items-center py-2">

                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>
                                            <div class="col-lg-11">
                                                <textarea class="form-control form-control-sm" name="message" rows="5" id="message" placeholder="write short message" spellcheck="false"></textarea>
                                            </div>


                                        </div>
                                        <div class="row g-3 align-items-center py-2">

                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>
                                            <div class="col-lg-10">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <input id="num1s" placeholder="num1" class="sum col-2  form-control form-control-sm" type="text" name="num1" value="2" readonly="readonly" />
                                                    </div>
                                                    <div class="col-md-1  py-2">
                                                        <span>+</span>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <input id="num2s" placeholder="num2" class="sum col-2 form-control form-control-sm" type="text" name="num2" value="7" readonly="readonly" />

                                                    </div>
                                                    <div class="col-md-1 py-2">
                                                        <span>=</span>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <input id="captchas" placeholder="Ans" class="captchas col-2 form-control form-control-sm" type="text" name="captcha" maxlength="2" /><br>
                                                    </div>

                                                </div>
                                                <span id="spambots">(Are you human, or spambot?)</span>
                                            </div>


                                        </div>


                                        <div class="row g-3 align-items-center py-2 ">

                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>
                                            <button type="submit" class="btn btn-roundeds btn-warning">Submit</button>
                                        </div>
                                </div>
                                </form>
                            </div>

                            <div class="col-md-3 form-first bg displaynoned">
                                <div class="text-center py-4 text-white">
                                    <span class="shop-span">Shop with Confidence</span>
                                    <span class="text-center py-1" style="font-size: 17px;color:#ffbd00;font-family: Poppins Medium ">Money <br>
                                        Back Guarantee</span>
                                </div>

                                <div class="text-center py-2">
                                    <img loading="lazy" src="{{asset('assets/images/guarantee_image.webp')}}" alt="guarantee" class="text-center">
                                </div>
                                <div class="text-center py-1">
                                    <img loading="lazy" src="{{asset('assets/images/payment-img.webp')}}" alt="payment" class="text-center">
                                </div>
                            </div>


                        </div>
                    </div>

                </div>
            </div>
            </div>

        </section>
        <section id="get-quote" class="testimonials displaynoned section-bg testimonialsa">

            <div class="container-fluid container">
                <div class="justify-content-center">


                    <div class="row ">
                        <div class="col-xl-12 pr-0" style="padding-right: 0px">

                            <div class="row py-5 px-3 pb-3 ">
                                <div class="col-md-3 col-md-3s">
                                    <span class="testimonialsa-span">GET CUSTOM QUOTE</span>
                                </div>
                                <div class="col-md-9 col-md-9s  mt-2  displaynoned">
                                    <i class="fas fa-truck"></i> <span class="freship">Free Shipping</span>
                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="row form-first">

                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-9">
                                    @if(!empty(session('error')))
                                        <div class="alert alert-danger">
                                            {{ session('error') }}
                                        </div>
                                    @endif
                                    <form id="get_quote" action="{{ route('category_get_quote') }}" method="post">
                                        @csrf
                                        <div class="row g-3 align-items-center py-3" style="

    padding-top: 0px !important;
">
                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">Size:</label>
                                            </div>
                                            <div class="col-md-3 col-768s">
                                                <input name="product_length" id="product_length" value="" class="form-control form-control-sm required" placeholder="L  ">
                                            </div>
                                            <div class="col-md-3 col-768s">
                                                <input name="product_width" id="product_width" value="" class="form-control form-control-sm required" placeholder="W">
                                            </div>
                                            <div class="col-md-3 col-768s">
                                                <input name="product_depth" id="product_depth" value="" class="form-control form-control-sm required" placeholder="D">                  </div>
                                            <div class="col-md-2">

                                                <select class="form-control form-select form-select-sm required" name="measurement_units" id="units">
                                                    <option value="cm">cm</option>
                                                    <option value="mm">mm</option>
                                                    <option selected="" value="inches">inch</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row g-3 align-items-center py-2">
                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">Qty:</label>
                                            </div>
                                            <div class="col-lg-4">

                                                <input type="text" name="quantity" class="form-control form-control-sm " value="" placeholder="Quantity" min="1" max="100000">


                                            </div>

                                            <div class="col-lg-3 col-md-3aas">

                                                <div class="form-group">
                                                    <select name="color" class="form-control form-select  form-select-sm">
                                                        <option value="">Select Color</option>
                                                        <option value="1 Color">1 Color</option>
                                                        <option value="2 Color">2 Color</option>
                                                        <option value="3 Color">3 Color</option>
                                                        <option value="4 Color">4 Color</option>
                                                        <option value="4/1 Color">4/1 Color</option>
                                                        <option value="4/2 Color">4/2 Color</option>
                                                        <option value="4/3 Color">4/3 Color</option>
                                                        <option value="4/4 Color">4/4 Color</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-lg-4s col-768sa">
                                                <input class="form-control form-control-sm required" placeholder="Product Name" name="product_name" id="name">
                                                <input type="hidden" name="qtype" value="">
                                                <input type="hidden" required  name="" class="form-control search_input_top" placeholder="Search" value="">

                                            </div>

                                        </div>
                                        <div class="row g-3 align-items-center py-2">

                                            <div class="col-auto displaynoned">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>

                                            <div class="col-lg-4 col-lg-4s">
                                                <input class="form-control form-control-sm required" placeholder="Name" name="contact_name" id="name">
                                            </div>
                                            <div class="col-lg-3 col-lg-3s">
                                                <input class="form-control form-control-sm required" required="" name="contact_phone" id="phone" placeholder="Phone No" type="text">
                                            </div>
                                            <div class="col-lg-4 col-lg-4s col-lg-4ss">
                                                <input class="form-control form-control-sm required" required="" name="contact_email" id="email" placeholder="Email Address">                  </div>

                                        </div>

                                        <div class="row g-3 align-items-center py-2">

                                            <div class="col-auto displaynoneds">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>
                                            <div class="col-lg-11">
                                                <textarea class="form-control textareas form-control-sm" name="message" rows="5" id="message" placeholder="write short message" spellcheck="false"></textarea>
                                            </div>


                                        </div>
                                        <div class="row g-3 align-items-center py-2">

                                            <div class="col-auto displaynoned displaynoneds">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>
                                            <div class="col-lg-10 textareas">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <input id="num1" placeholder="num1" class="sum col-2  form-control form-control-sm" type="text" name="num1" value="3" readonly="readonly" />
                                                    </div>
                                                    <div class="col-md-1  py-2">
                                                        <span>+</span>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <input id="num2" placeholder="num2" class="sum col-2 form-control form-control-sm" type="text" name="num2" value="7" readonly="readonly" />

                                                    </div>
                                                    <div class="col-md-1 py-2">
                                                        <span>=</span>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <input id="captcha" placeholder="Ans" class="captcha col-2 form-control form-control-sm" type="text" name="captcha" maxlength="2" /><br>
                                                    </div>

                                                </div>
                                                <span id="spambot">(Are you human, or spambot?)</span>
                                            </div>


                                        </div>


                                        <div class="row g-3 align-items-center py-2 ">

                                            <div class="col-auto displaynoned displaynoneds">
                                                <label class="col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            </div>
                                            <div class="col-lg-11">
                                                <button type="submit" class="btn btn-roundeds btn-warning">Submit</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <div class="col-md-3 form-first bg displaynoned">
                                    <div class="text-center py-4 text-white">
                                        <span class="shop-span">Shop with Confidence</span>
                                        <span class="text-center py-1" style="font-size: 17px;color:#ffbd00;font-family: Poppins Medium ">Money <br>
                                        Back Guarantee</span>
                                    </div>

                                    <div class="text-center py-2">
                                        <img loading="lazy" src="{{asset('assets/images/guarantee_image.webp')}}" alt="guarantee" class="text-center img-fluid">
                                    </div>
                                    <div class="text-center py-1">
                                        <img loading="lazy" src="{{asset('assets/images/payment-img.webp')}}" alt="payment" class="text-center img-fluid">
                                    </div>
                                </div>


                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </section>
                </div>
    </section>
    <div class="container">
        <section class="bg-white category_detail_box">

            <div class="content-inner">
                <div class="content-full">

                    <div class="content">
                        {!! $category->detail !!}

                    </div>
                </div>

            </div>
            <span class="read-more">Read more</span>



        </section>
    </div>
    @if($featured_products)
        <section class="products_slider">
            <div class="">
                <div class="products mx-3 mt-5">
                    <div class="owl-carousel">
                        @foreach($featured_products as $product)
                            <div class="item" style="">




                                @if($product->product_slug=='vape-pen-boxes' || $product->product_slug=='vape-cartridge-boxes' || $product->product_slug=='vape-display-boxes'  || $product->product_slug=='dank-vape-packaging' || $product->product_slug=='platinum-vape-packaging' || $product->product_slug=='pop-vape-boxes' || $product->product_slug=='disposable-vape-packaging' || $product->product_slug=='vape-accessories-boxes'|| $product->product_slug=='vape-mods-boxes' || $product->product_slug=='e-cigarette-boxes'
    || $product->product_slug=='vape-accessories-shipping-boxes' ||
    $product->product_slug=='vape-battery-boxes'|| $product->product_slug=='custom-vape-tanks-boxes'|| $product->product_slug=='custom-mod-boxes'||
    $product->product_slug=='custom-vape-gift-boxes'||
    $product->product_slug=='vape-pen-packaging'||  $product->product_slug=='marijuana-packaging'|| $product->product_slug=='cannabis-tinctures-boxes'

    || $product->product_slug=='cannabis-cigarette-boxes'
    || $product->product_slug=='sleeves-cigarette-boxes'
    || $product->product_slug=='custom-cigar-boxes'
    || $product->product_slug=='e-cigs-boxes'
    || $product->product_slug=='hemp-display-boxes'
    || $product->product_slug=='hemp-cream-boxes'
    || $product->product_slug=='hemp-flour-boxes'
    || $product->product_slug=='hemp-teabags-boxes'
    || $product->product_slug=='hemp-oil-boxes'
    || $product->product_slug=='hemp-milk-boxes'
    || $product->product_slug=='organic-hemp-soap-boxes'
    || $product->product_slug=='large-rigid-boxes.html'
    || $product->product_slug=='small-rigid-boxes.html'
    || $product->product_slug=='luxury-rigid-boxes.html'
    || $product->product_slug=='blue-gable-boxes.html'
    || $product->product_slug=='white-gable-boxes.html'
    || $product->product_slug=='red-gable-boxes.html'
    || $product->product_slug=='corrugated-gable-boxes.html'
    || $product->product_slug=='window-gable-boxes.html'
    || $product->product_slug=='cardboard-gable-boxes.html'
    || $product->product_slug=='christmas-gable-boxes.html'
    || $product->product_slug=='gable-cereal-boxes.html'
    || $product->product_slug=='gable-food-boxes.html'
    || $product->product_slug=='kraft-gable-boxes.html'

    )
                                    <a href="{{ url($product->product_slug.'.html')}}"  class="text-decoration-none">

                                        <img src="{{ asset('assets/products/'.$product->product_image) }}"  loading="lazy"  alt="{{$product->product_alt}}"  style="width: 100%;height:auto " height="330" width="246">

                                    </a>
                                @else
                                    <a href="{{ url($product->product_slug.'.html')}}"  class="text-decoration-none">

                                        <img src="{{ asset('assets/products/'.$product->product_image) }}"  loading="lazy"  alt="{{$product->product_alt}}"  style="width: 100%;height:auto " height="330" width="246">

                                    </a>
                                @endif

                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>

    @endif
@endsection
@push('scripts')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

    <script>

        const content = document.querySelector(".content-inner");
        const contentFull = document.querySelector(".content-full");
        const more = document.querySelector(".read-more");
        let open = false;
        var h=  currentHeight = $('.content-inner').outerHeight();
        var w=   $(window).width();
        if(h >500){
            $('.read-more').show();

        }else{
            $('.read-more').hide();

        }
        if (more) {
            more.addEventListener("click", (e) => {
                if (open) {
                    content.removeAttribute("style");
                    e.target.innerText = "Read more";

                    open = false;
                } else {
                    content.style.maxHeight = `${contentFull.clientHeight}px`;
                    e.target.innerText = "Read less";

                    open = true;
                }
            });
        }
        $.validator.addMethod('captchas',
            function(value) {

                $result = ( parseInt($('#num1s').val()) + parseInt($('#num2s').val()) == parseInt($('#captchas').val()) ) ;
                $('#spambots').fadeOut('fast');
                return $result;
            },
            'Incorrect value, please try again.'
        );
        $.validator.addMethod('captcha',
            function(value) {

                $result = ( parseInt($('#num1').val()) + parseInt($('#num2').val()) == parseInt($('#captcha').val()) ) ;
                $('#spambot').fadeOut('fast');
                return $result;
            },
            'Incorrect value, please try again.'
        );
        $('#get_quotes').validate({
            debug: false,
            rules: {
                captcha: {
                    required: true,

                },contact_phone: {
                    required: true,

                },product_name: {
                    required: true,

                }
            },
            chkCaptcha: {
                required: "* Required"
            },
            highlight: function(element) {
                $(element).addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'validation-error-message help-block form-helper bold',
            errorPlacement: function(error, element) {
                return true;
            }
        });
        $('#get_quote').validate({
            debug: false,
            rules: {
                captcha: {
                    required: true,

                },contact_phone: {
                    required: true,

                },product_name: {
                    required: true,

                }
            },
            chkCaptcha: {
                required: "* Required"
            },
            highlight: function(element) {
                $(element).addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'validation-error-message help-block form-helper bold',
            errorPlacement: function(error, element) {
                return true;
            }
        });
        $(".testimonials .owl-carousel").owlCarousel({

            loop:true,
            margin:10,
            nav:false,


            responsive: {
                0: {
                    items: 1,
                    nav: !0
                },
                600: {
                    items: 1,
                    nav: !0
                },
                1000: {
                    items: 1,
                    nav: true
                }
            }

        });

        $('.products_slider .owl-carousel').owlCarousel({
            loop:true,
            items:6,
            nav: false,
            margin:15,
            responsiveClass: true,
            responsive: { 0: { items: 1, nav: false }, 600: { items: 5, nav: false }, 1400: { items: 5, nav: true, loop: true } },
        });
        function myFunction() {
            var dots = document.getElementById("dots");
            var moreText = document.getElementById("more");
            var btnText = document.getElementById("myBtn");

            if (dots.style.display === "none") {
                dots.style.display = "inline";
                btnText.innerHTML = "Read more";
                moreText.style.display = "none";
            } else {
                dots.style.display = "none";
                btnText.innerHTML = "Read less";
                moreText.style.display = "inline";
            }
        }
    </script>
@endpush