@extends('layouts.app')

@section('content')
<!-- #masthead -->
			<div id="content" class="site-content">
		<div class="ast-container">
		

	<div id="primary" class="content-area primary">

		
					<main id="main" class="site-main">
				<article
class="post-12 page type-page status-publish ast-article-single" id="post-12" itemtype="https://schema.org/CreativeWork" itemscope="itemscope">
	
				<header class="entry-header ast-no-title ast-header-without-markup">
							</header> <!-- .entry-header -->
		
<div class="entry-content clear"
	itemprop="text">

	
			<div data-elementor-type="wp-page" data-elementor-id="12" class="elementor elementor-12" data-elementor-settings="[]">
						<div class="elementor-inner">
							<div class="elementor-section-wrap">
							<section class="elementor-section elementor-top-section elementor-element elementor-element-9dea367 elementor-section-full_width elementor-section-height-default elementor-section-height-default" data-id="9dea367" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row" style="flex-wrap: wrap;">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0a49c7b" data-id="0a49c7b" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<div class="swiper myHeroSwiper" style="width: 100%;">
    <div class="swiper-wrapper">
        @foreach($sliders as $slider)
        <div class="swiper-slide" style="position: relative;">
            <img src="{{ asset('storage/' . $slider->image) }}" style="width: 100%; height: 100%; object-fit: cover;">
            @if($slider->title)
            <div style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.6); color: white; padding: 15px 30px; border-radius: 8px; text-align: center;">
                <h2 style="margin: 0; font-size: 28px; font-weight: 700;">{{ $slider->title }}</h2>
            </div>
            @endif
        </div>
        @endforeach
        
        @if($sliders->isEmpty())
        <div class="swiper-slide" style="position: relative;">
            <div style="width: 100%; height: 100%; background: linear-gradient(135deg, #0170B9, #4dd0e1); display: flex; align-items: center; justify-content: center;">
                <h2 style="color: white; font-size: 32px; font-weight: 700;">Welcome to J&S Agricare</h2>
            </div>
        </div>
        @endif
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next" style="color: white; text-shadow: 0 2px 5px rgba(0,0,0,0.3);"></div>
    <div class="swiper-button-prev" style="color: white; text-shadow: 0 2px 5px rgba(0,0,0,0.3);"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var swiper = new Swiper(".myHeroSwiper", {
      loop: true,
      autoplay: { delay: 5000, disableOnInteraction: false },
      pagination: { el: ".swiper-pagination", clickable: true },
      navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
    });
  });
</script>
<style>
    .myHeroSwiper { height: 600px; }
    @media (max-width: 768px) { .myHeroSwiper { height: 400px; } }
    @media (max-width: 576px) { .myHeroSwiper { height: 220px; } }
    .myHeroSwiper .swiper-pagination-bullet-active { background: #0170B9; }
</style>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-b923580 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="b923580" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row" style="flex-wrap: wrap;">
					<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-37f82a6" data-id="37f82a6" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-5fc3994 elementor-view-default elementor-position-top elementor-vertical-align-top elementor-widget elementor-widget-icon-box" data-id="5fc3994" data-element_type="widget" data-widget_type="icon-box.default">
				<div class="elementor-widget-container">
					<div class="elementor-icon-box-wrapper">
						<div class="elementor-icon-box-icon">
				<span class="elementor-icon elementor-animation-push" >
				<i aria-hidden="true" class="fas fa-map-marked-alt"></i>				</span>
			</div>
						<div class="elementor-icon-box-content">
				<h6 class="elementor-icon-box-title">
					<span >Bangladesh Delivery</span>
				</h6>
							</div>
		</div>
				</div>
				</div>
						</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-6dafc92" data-id="6dafc92" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-01fffac elementor-view-default elementor-position-top elementor-vertical-align-top elementor-widget elementor-widget-icon-box" data-id="01fffac" data-element_type="widget" data-widget_type="icon-box.default">
				<div class="elementor-widget-container">
					<div class="elementor-icon-box-wrapper">
						<div class="elementor-icon-box-icon">
				<span class="elementor-icon elementor-animation-" >
				<i aria-hidden="true" class="far fa-paper-plane"></i>				</span>
			</div>
						<div class="elementor-icon-box-content">
				<h6 class="elementor-icon-box-title">
					<span >Free Shiping</span>
				</h6>
							</div>
		</div>
				</div>
				</div>
						</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-1a1ac02" data-id="1a1ac02" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-e71c7bd elementor-view-default elementor-position-top elementor-vertical-align-top elementor-widget elementor-widget-icon-box" data-id="e71c7bd" data-element_type="widget" data-widget_type="icon-box.default">
				<div class="elementor-widget-container">
					<div class="elementor-icon-box-wrapper">
						<div class="elementor-icon-box-icon">
				<span class="elementor-icon elementor-animation-" >
				<i aria-hidden="true" class="fab fa-amazon-pay"></i>				</span>
			</div>
						<div class="elementor-icon-box-content">
				<h6 class="elementor-icon-box-title">
					<span >Fast And Safe Payment</span>
				</h6>
							</div>
		</div>
				</div>
				</div>
						</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-8126467" data-id="8126467" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-722d89f elementor-view-default elementor-position-top elementor-vertical-align-top elementor-widget elementor-widget-icon-box" data-id="722d89f" data-element_type="widget" data-widget_type="icon-box.default">
				<div class="elementor-widget-container">
					<div class="elementor-icon-box-wrapper">
						<div class="elementor-icon-box-icon">
				<span class="elementor-icon elementor-animation-" >
				<i aria-hidden="true" class="far fa-address-book"></i>				</span>
			</div>
						<div class="elementor-icon-box-content">
				<h6 class="elementor-icon-box-title">
					<span >01936 900 216 / 019888 16483</span>
				</h6>
							</div>
		</div>
				</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-f2a4d3c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="f2a4d3c" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row" style="flex-wrap: wrap;">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-af46339" data-id="af46339" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-99361d5 elementor-widget elementor-widget-heading" data-id="99361d5" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Display Our Some Product</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-0648596 elementor-widget-divider--view-line_text elementor-widget-divider--separator-type-pattern elementor-widget-divider--element-align-center elementor-widget elementor-widget-divider" data-id="0648596" data-element_type="widget" data-widget_type="divider.default">
				<div class="elementor-widget-container">
					<div class="elementor-divider" style="--divider-pattern-url: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; preserveAspectRatio=&#039;none&#039; overflow=&#039;visible&#039; height=&#039;100%&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;black&#039; stroke-width=&#039;1&#039; stroke-linecap=&#039;square&#039; stroke-miterlimit=&#039;10&#039;%3E%3Cpolyline points=&#039;0,6 6,6 6,18 18,18 18,6 24,6 	&#039;/%3E%3C/svg%3E&quot;);">
			<span class="elementor-divider-separator">
							<span class="elementor-divider__text elementor-divider__element">J&S Agricare</span>
						</span>
		</div>
				</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-c42b223 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="c42b223" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row" style="flex-wrap: wrap;">

@foreach($products as $product)
                    <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-bd7481f" data-id="bd7481f" data-element_type="column" style="margin-bottom: 20px;">
                        <div class="elementor-column-wrap elementor-element-populated">
                            <div class="elementor-widget-wrap">
                                <div class="elementor-element elementor-element-a7d969b elementor-widget elementor-widget-image" data-id="a7d969b" data-element_type="widget" data-widget_type="image.default">
                                    <div class="elementor-widget-container">
                                        <div class="elementor-image" style="text-align: center;">
                                            <a href="{{ url('product/' . $product->url) }}">
                                                @if($product->photo)
                                                <img src="{{ asset('storage/' . $product->photo) }}" style="width: 100%; height: auto; max-width: 300px; aspect-ratio: 1; object-fit: cover;" alt="{{ $product->name }}" />
                                                @else
                                                <div style="width: 100%; max-width: 300px; aspect-ratio: 1; background: #eee; display: flex; align-items: center; justify-content: center; margin: 0 auto;"><i class="fa-solid fa-image" style="font-size: 40px; color: #ccc;"></i></div>
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="elementor-element elementor-element-009f743 elementor-widget elementor-widget-heading" data-id="009f743" data-element_type="widget" data-widget_type="heading.default">
                                    <div class="elementor-widget-container">
                                        <h5 class="elementor-heading-title elementor-size-default" style="text-align: center;">
                                            <a href="{{ url('product/' . $product->url) }}">{{ $product->name }}</a>
                                            @if($product->price)
                                            <div style="color: #2e7d32; font-size: 16px; margin-top: 5px;">৳{{ $product->price }}</div>
                                            @endif
                                        </h5>
                                    </div>
                                </div>
                                <div class="elementor-element elementor-element-40c2cdc elementor-align-center elementor-widget elementor-widget-button" data-id="40c2cdc" data-element_type="widget" data-widget_type="button.default">
                                    <div class="elementor-widget-container">
                                        <div class="elementor-button-wrapper">
                                            <a href="{{ url('product/' . $product->url) }}" class="elementor-button-link elementor-button elementor-size-sm" role="button">
                                                <span class="elementor-button-content-wrapper">
                                                    <span class="elementor-button-icon elementor-align-icon-left">
                                                        <i aria-hidden="true" class="fas fa-arrow-right"></i>
                                                    </span>
                                                    <span class="elementor-button-text">More Info</span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
@endforeach

</div>
					</div>
		</section>
				
				<section class="elementor-section elementor-top-section elementor-element elementor-element-8fbda02 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="8fbda02" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row" style="flex-wrap: wrap;">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-23f59fb" data-id="23f59fb" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-a50f191 elementor-align-center elementor-widget elementor-widget-button" data-id="a50f191" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a href="{{ url('products') }}" class="elementor-button-link elementor-button elementor-size-sm" role="button">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon elementor-align-icon-left">
				<i aria-hidden="true" class="fas fa-arrow-circle-right"></i>			</span>
						<span class="elementor-button-text">Our All Products</span>
		</span>
					</a>
		</div>
				</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-53af611 elementor-section-full_width elementor-section-height-min-height elementor-reverse-tablet elementor-reverse-mobile elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-phone elementor-section-height-default elementor-section-items-middle" data-id="53af611" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
							<div class="elementor-background-overlay"></div>
							<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row" style="flex-wrap: wrap;">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b9d0050" data-id="b9d0050" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-166ec51 elementor-widget elementor-widget-image" data-id="166ec51" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
					<div class="elementor-image">
										<img loading="lazy" decoding="async" width="100" height="100" src="{{ asset('wp-content/uploads/2023/01/Agricare-Icon-White-100x100x0x0x100x100x1625069290.png') }}" class="attachment-large size-large" alt="" />											</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-3b1069a elementor-headline--style-highlight elementor-widget elementor-widget-animated-headline" data-id="3b1069a" data-element_type="widget" data-settings="{&quot;marker&quot;:&quot;curly&quot;,&quot;highlighted_text&quot;:&quot;Full Platform of Services to Grow Your Asset&quot;,&quot;headline_style&quot;:&quot;highlight&quot;}" data-widget_type="animated-headline.default">
				<div class="elementor-widget-container">
					<h4 class="elementor-headline">
						<span class="elementor-headline-dynamic-wrapper elementor-headline-text-wrapper"></span>
					</h4>
				</div>
				</div>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-5939e7a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="5939e7a" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row" style="flex-wrap: wrap;">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-e6656ce" data-id="e6656ce" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-524db9d elementor-position-top elementor-vertical-align-top elementor-widget elementor-widget-image-box" data-id="524db9d" data-element_type="widget" data-widget_type="image-box.default">
				<div class="elementor-widget-container">
			<div class="elementor-image-box-wrapper"><div class="elementor-image-box-content"><h3 class="elementor-image-box-title">Farm & Ag Asset Management</h3><p class="elementor-image-box-description">Farm & agricultural asset management includes the time, devotion and expertise of AgriCare’s team.</p></div></div>		</div>
				</div>
						</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-9f1c466" data-id="9f1c466" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-d87b90b elementor-position-top elementor-vertical-align-top elementor-widget elementor-widget-image-box" data-id="d87b90b" data-element_type="widget" data-widget_type="image-box.default">
				<div class="elementor-widget-container">
			<div class="elementor-image-box-wrapper"><div class="elementor-image-box-content"><h3 class="elementor-image-box-title">Farm & Ag Asset Management</h3><p class="elementor-image-box-description">Farm & agricultural asset management includes the time, devotion and expertise of AgriCare’s team.</p></div></div>		</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-91194db elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="91194db" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row" style="flex-wrap: wrap;">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-d738f0d" data-id="d738f0d" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-e136b81 elementor-position-top elementor-vertical-align-top elementor-widget elementor-widget-image-box" data-id="e136b81" data-element_type="widget" data-widget_type="image-box.default">
				<div class="elementor-widget-container">
			<div class="elementor-image-box-wrapper"><div class="elementor-image-box-content"><h3 class="elementor-image-box-title">Farm & Ag Asset Management</h3><p class="elementor-image-box-description">Farm & agricultural asset management includes the time, devotion and expertise of AgriCare’s team.</p></div></div>		</div>
				</div>
						</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-a1f3eed" data-id="a1f3eed" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-ee0a6be elementor-position-top elementor-vertical-align-top elementor-widget elementor-widget-image-box" data-id="ee0a6be" data-element_type="widget" data-widget_type="image-box.default">
				<div class="elementor-widget-container">
			<div class="elementor-image-box-wrapper"><div class="elementor-image-box-content"><h3 class="elementor-image-box-title">Farm & Ag Asset Management</h3><p class="elementor-image-box-description">Farm & agricultural asset management includes the time, devotion and expertise of AgriCare’s team.</p></div></div>		</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
				<div class="elementor-element elementor-element-24a2047 elementor-widget elementor-widget-spacer" data-id="24a2047" data-element_type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
					<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
				</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-c7f7b6a elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-phone elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="c7f7b6a" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row" style="flex-wrap: wrap;">
					<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-7ca447a" data-id="7ca447a" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-6a75d4e elementor-widget elementor-widget-counter" data-id="6a75d4e" data-element_type="widget" data-widget_type="counter.default">
				<div class="elementor-widget-container">
					<div class="elementor-counter">
			<div class="elementor-counter-number-wrapper">
				<span class="elementor-counter-number-prefix"></span>
				<span class="elementor-counter-number" data-duration="2000" data-to-value="109" data-from-value="0" data-delimiter=",">0</span>
				<span class="elementor-counter-number-suffix"></span>
			</div>
							<div class="elementor-counter-title">Total Product</div>
					</div>
				</div>
				</div>
						</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-c83280b" data-id="c83280b" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-82923e1 elementor-widget elementor-widget-counter" data-id="82923e1" data-element_type="widget" data-widget_type="counter.default">
				<div class="elementor-widget-container">
					<div class="elementor-counter">
			<div class="elementor-counter-number-wrapper">
				<span class="elementor-counter-number-prefix"></span>
				<span class="elementor-counter-number" data-duration="2000" data-to-value="7" data-from-value="0" data-delimiter=",">0</span>
				<span class="elementor-counter-number-suffix"></span>
			</div>
							<div class="elementor-counter-title">Total Service</div>
					</div>
				</div>
				</div>
						</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-ff7b2a2" data-id="ff7b2a2" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-1a618bf elementor-widget elementor-widget-counter" data-id="1a618bf" data-element_type="widget" data-widget_type="counter.default">
				<div class="elementor-widget-container">
					<div class="elementor-counter">
			<div class="elementor-counter-number-wrapper">
				<span class="elementor-counter-number-prefix"></span>
				<span class="elementor-counter-number" data-duration="2000" data-to-value="100" data-from-value="0" data-delimiter=",">0</span>
				<span class="elementor-counter-number-suffix"></span>
			</div>
							<div class="elementor-counter-title">Total Land</div>
					</div>
				</div>
				</div>
						</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-b575dfc" data-id="b575dfc" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-d75c369 elementor-widget elementor-widget-counter" data-id="d75c369" data-element_type="widget" data-widget_type="counter.default">
				<div class="elementor-widget-container">
					<div class="elementor-counter">
			<div class="elementor-counter-number-wrapper">
				<span class="elementor-counter-number-prefix"></span>
				<span class="elementor-counter-number" data-duration="2000" data-to-value="173" data-from-value="0" data-delimiter=",">0</span>
				<span class="elementor-counter-number-suffix"></span>
			</div>
							<div class="elementor-counter-title">Employers </div>
					</div>
				</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-d7bde40 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-phone elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="d7bde40" data-element_type="section" data-settings="{&quot;shape_divider_bottom&quot;:&quot;tilt&quot;}">
					<div class="elementor-shape elementor-shape-bottom" data-negative="false">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
	<path class="elementor-shape-fill" d="M0,6V0h1000v100L0,6z"/>
</svg>		</div>
					<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row" style="flex-wrap: wrap;">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a4bbc24" data-id="a4bbc24" data-element_type="column">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<div class="elementor-element elementor-element-cff14ef elementor-widget elementor-widget-text-editor" data-id="cff14ef" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
					<div class="elementor-text-editor elementor-clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
				</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
				

@if(!empty($siteSettings) && $siteSettings->show_sister_concerns)
<!-- Sister Concerns Section -->
<section style="background: #f8f9fa; padding: 60px 0; margin-top: 20px;">
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
        <div style="text-align: center; margin-bottom: 40px;">
            <h2 style="font-size: 30px; font-weight: 700; color: #333; margin-bottom: 12px;">Our Sister Concerns</h2>
            <div style="width: 50px; height: 3px; background: #0170B9; margin: 0 auto;"></div>
        </div>

        <div class="home-sister-grid">
            @forelse($sisterConcerns as $concern)
            <div class="home-sister-card">
                @if($concern->link) <a href="{{ $concern->link }}" target="_blank" style="text-decoration: none; color: inherit;"> @endif
                <div style="padding: 20px 15px 15px; text-align: center;">
                    @if($concern->photo)
                        <img src="{{ Str::startsWith($concern->photo, 'images/') ? asset($concern->photo) : asset('storage/' . $concern->photo) }}" alt="{{ $concern->name }}" style="max-width: 100%; height: 65px; object-fit: contain; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto;">
                    @else
                        <div style="height: 65px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
                            <i class="fas fa-building" style="font-size: 30px; color: #0170B9;"></i>
                        </div>
                    @endif
                    <p style="margin: 0; font-size: 13px; font-weight: 600; color: #444; line-height: 1.4;">{{ $concern->name }}</p>
                </div>
                @if($concern->link) </a> @endif
            </div>
            @empty
                <div style="grid-column: 1 / -1; text-align: center; padding: 30px; color: #777;">No sister concerns found.</div>
            @endforelse
        </div>
    </div>
</section>

<style>
    .home-sister-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .home-sister-card {
        background: #fff;
        border: 1px solid #e8e8e8;
        border-top: 3px solid #0170B9;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .home-sister-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(1,112,185,0.12);
    }
    .home-sister-card img { transition: transform 0.3s ease; }
    .home-sister-card:hover img { transform: scale(1.05); }

    @media (max-width: 991px) { .home-sister-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 576px) { .home-sister-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
</style>

@endif
<!-- Contact Info Cards -->
<section style="max-width: 1200px; margin: 80px auto 40px; padding: 0 20px;">
    <div class="contact-info-cards" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;">
        <!-- Card 1: Address -->
        <div style="background: #fff; border: 1px solid #eaeaea; box-shadow: 0 5px 15px rgba(0,0,0,0.03); padding: 25px; border-radius: 4px; display: flex; align-items: center; gap: 20px;">
            <div style="background: #111; color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;">
                <i class="fas fa-map-marker-alt"></i>
            </div>
            <div>
                <p style="margin: 0; color: #222; font-weight: 600; font-size: 15px; line-height: 1.5;">{{ $siteSettings->factory_address }}</p>
            </div>
        </div>

        <!-- Card 2: Phone -->
        <div style="background: #fff; border: 1px solid #eaeaea; box-shadow: 0 5px 15px rgba(0,0,0,0.03); padding: 25px; border-radius: 4px; display: flex; align-items: center; gap: 20px;">
            <div style="background: #0170B9; color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;">
                <i class="fas fa-phone-alt"></i>
            </div>
            <div>
                <p style="margin: 0; color: #222; font-weight: 600; font-size: 16px; line-height: 1.5;">{{ $siteSettings->helpline }}</p>
            </div>
        </div>

        <!-- Card 3: Email -->
        <div style="background: #fff; border: 1px solid #eaeaea; box-shadow: 0 5px 15px rgba(0,0,0,0.03); padding: 25px; border-radius: 4px; display: flex; align-items: center; gap: 20px;">
            <div style="background: #111; color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;">
                <i class="fas fa-envelope-open-text"></i>
            </div>
            <div>
                <p style="margin: 0; color: #222; font-weight: 600; font-size: 16px; line-height: 1.5;">{{ $siteSettings->email }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Map Section -->
<section style="max-width: 1200px; margin: 0 auto 80px; padding: 0 20px;">
    <div style="border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border: 1px solid #eee; height: 450px; background: #f9f9f9;">
        @if(!empty($siteSettings->map_url))
            {!! str_replace('<iframe', '<iframe style="width:100%;height:100%;border:0;"', $siteSettings->map_url) !!}
        @else
            <iframe src="https://maps.google.com/maps?q=j%26s%20agricare&t=m&z=11&output=embed&iwloc=near" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
        @endif
    </div>
</section>

<style>
    @media (max-width: 991px) {
        .contact-info-cards { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 768px) {
        .contact-info-cards { grid-template-columns: 1fr !important; }
    }
</style>

@include('layouts.footer')

</div><!-- .entry-content .clear -->

	
	
</article><!-- #post-## -->

			</main><!-- #main -->
			
		
	</div><!-- #primary -->


	</div> <!-- ast-container -->
	</div><!-- #content -->

@endsection