@extends('frontend.template',['showmore'=>'yes'])

@section('styles')

<style>
@media only screen and (min-width: 1350px) and (max-width: 2400px) {
    
    .caption {
        position: absolute;
        color: #fff;
        text-align: center;
        right: -40%;
        font-size: 22px;
        top: 40%;
    }

}

.bannermain .item.active{height:600px}.bannermain{height:600px}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    
   body .bannermain .item.active{height:160px} body .bannermain{height:160px}
   section.menu-menu a.logo img {max-height: 80px;}
}
.cap_code { text-align: right; float: right; } .btn-groups{ float:left; } .td-main-3 h4 { padding-top: 5px; } @media only screen and (max-width: 992px){ body .pro-menu { min-height: unset; } } /*.bannerbtn1{*/ /*    background-color:#000 !important;*/ /*}*/ .pad0{ padding:0px; } body .bg_overlay { background-color: unset !important; } .bg_overlay{ padding: 0px 0; } .pad20{ padding:20px; } .my_cat.cat_level_1 { position: relative; } .my_cat.cat_level_1:hover a:before { content: ""; background-color: #0d4a92; width: 3px; height: 100%; position: absolute; left: -7px; top: 0px; opacity: 1; } a.readmore { background-color: #cf2026; padding: 12px; font-size: 12px; } ul.products:hover div.pro-overlay { bottom: 0; } ul.products:hover .featrued_prod_title{ display:none; } .best-sellers{ position:relative; overflow:hidden; } .best-sellers:hover div.pro-overlay{ bottom: 0; } .pro-feats .pro-title{ display:block; width:100%; font-size:22px; } body div#products-box { display: block !important; } @media only screen and (max-width: 900px) { .best-sellers div.pro-overlay{ bottom: 0; } .best-sellers a.readmore{ display:none; } .pro-feats .pro-title{ font-size:20px; } } body .pro-menu { display: block !important; }
</style>



@endsection




@section('content')
<section class="section-1">
   <div class="container-fluid ">
      <div class="row">
         <div class="bannermain">
	           <div class="owl-carousel owl-theme owl-carousel1">
            			@foreach($slider_images as $key => $image)
            				<div class="item active" style="width:100%; background:url({{get_thumb_url_600('banners',"/".$image->banner_path,1)}}?ver=124) no-repeat; background-position: center center; background-size:100% 100% !important;">
            
            				<div class="caption">
            					<div class="container banner_txt">
            						  <div class="caption2">
            						    <!--<h1 class="bags">Our Bags</h1>-->
            						    <h1 class="bags">{{$image->txt_line1}}</h1>
            						    
            						    <!--<p class="esenti">are essential for every adventure seeker</p>-->
            						    
            						    <p class="esenti">{{$image->txt_line2}}</p>
            						    
            						    <ul class="btn-groups">				
            								<li><a href="/products" class="btn btn-primary bannerbtn ">View Details</a></li>						
            							</ul>
            							
            						 </div>
            					</div>
            				</div>
            					  
            
            				</div>
            			@endforeach
            		</div>	
              </div>
      </div>
   </div>
</section>
 <section class=" wlc-bg o-products">
       <div class="home container">
          <div class="row">
              
              <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 ab-img">
                  <div class="cer-img-div">
                        
                        @if(isset($seo_content['company_image1']['content']))			
							
								<img  src="/uploads/images/{{ $seo_content['company_image1']['content'] }}" alt="{{$basic_details->name}}" class="ab-img-sec img-responsive">
						
						@endif
                        
                    </div>
                    
                    
             </div>
              
              
              
             <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="white-bg">
      <div class="abt">
                     <h2>About Us</h2>
                     
                  </div>
                    @if(isset($seo_content['about_us']['content']))
                    {!! $seo_content['about_us']['content'] !!}
                    @endif
                  
                </div>
                <div class="view-btn">
                    <a href="/about-us">View Details</a>
                </div>
             </div>

              
             
             

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


<section class="productss">
   <div class="contactmainn">
      <div class="container">
         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
               <div data-aos="fade-up" data-aos-duration="1500">
                  <div class="generalhead">
                     <h2 class="gen">Products</h2>
                     <h5>Quality Products Buying On Our Website</h5>
                  </div>
               </div>
            </div>
         </div>
         
         <div class="row pro-pri">
             
             
             <div class="col-xs-12 col-sm-12 col-md-12">
                 @foreach($products as $key => $product)
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="pro-main">
               <a href="{{getproducturl($product)}}">
                 	<div class="vertical-img">
            			<img class="img-responsive" src="{{get_thumb_url_500('products',$product->thumbnail_img,1)}}" @if($product->imagetitle != '') alt="{{$product->imagetitle}}" @else alt="{{$product->name}}" @endif>
            		</div>
                  <div class="content-box">
                     <div class="image-container">
                        <div class="vertical-number-boxxs">
                           <h4>{{$product->name}}</h4>
                        </div>
                        <div class="vertical-bxss"> 
               <a href="{{getproducturl($product)}}">View Details</a>
               </div>
               </div>
               </div>
               </a>
             </div>  
            </div>
            @endforeach
                 
             </div>
         </div>
        
         
      </div>
   </div>
</section>


<section class="mid-banner">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6">
                
            </div>
            
            <div class="col-xs-12 col-sm-12 col-md-6">
                <div class="middle-bnn">
                    <h3></h3>
                    <br>
                    
                 
                    <h2 class="comfort">High-quality products, trusted by customers worldwide.</h2>
                </div>
                
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')

<script>
$( document ).ready(function() {
$('.owl-carousel1').owlCarousel({
    loop:true,
    margin:0,
	autoplay: true,
	animateOut: 'fadeOut',
    
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
});
});
</script>
<script>
    const tabs = document.querySelectorAll('[data-tab-target]')
const tabContents = document.querySelectorAll('[data-tab-content]')

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const target = document.querySelector(tab.dataset.tabTarget)
    tabContents.forEach(tabContent => {
      tabContent.classList.remove('active')
    })
    tabs.forEach(tab => {
      tab.classList.remove('active')
    })
    tab.classList.add('active')
    target.classList.add('active')
  })
})
</script>
@endsection