@section('page-title', __('language.ourproducts'))
@extends('site.master')
@section('main-content')
    <section class="af-hdr ">
        <div class="header-decoration position-absolute">
            <img src="{{ asset('site/img/shape_nate.svg') }}" alt="">
        </div>
        <div class="container position-relative" style="z-index: 9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class=" text-uppercase text-white fnt-fam-ser fs-2 fwc-700">




                        @lang('language.ourproducts')</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none">@lang('language.home')</a>
                            </li>

                            <li class="list-inline-item current text-danger">
                                @lang('language.ourproducts') </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="decoration-pattern pattern-one position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_1.svg') }}" alt="">
        </div>
        <div class="decoration-pattern pattern-two position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_2.svg') }}" alt="">
        </div>
    </section>

    <section class="bg-white ">
        <div class="container py-5">
            <div class="row pb-5">
                <div class="col d-flex">
                    <h3 class="col-lg-6 col-9 fwc-600 fs-4">
                        Guided by Instinct, Knowledge, and Imagination <span class="text-danger"> Navigating Through
                            Uncertainty with Confidence</span>
                    </h3>

                </div>
            </div>
            <div class="row">
                @foreach ($products as $item)
                    <div class="col-lg-4">
                        <article class="p-items shadow  p-5 rounded-3 border-custom position-relative  mb-4"
                            style="background: url({{ asset($item->image) }}); background-size: cover;">
                            <div class="d-flex align-items-sm-start justify-content-between flex-column h-100 position-relative"
                                style="
    min-height: 250px; z-index:3;
">
                                <div>
                                    <i class="{{ $item->icons }} fs-1 text-white mb-2"></i>
                                    <h3 class="fs-5 text-white text-hover-danger text-opacity-hover-100 mb-3">
                                        {{ $item->title }}
                                    </h3>
                                    <p class="text-white fs-7">{{ $item->srtsmry }}</p>
                                </div>
                                <a href="{{ route('products.details', ['slug' => $item->slug]) }}"
                                    class="text-white text-hover-danger" title="{{ $item->title }}">@lang('language.learnmore')
                                    <i class="bi-arrow-right"></i>
                                </a>
                            </div>

                        </article>

                    </div>
                @endforeach


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

    @include('site.partials.whyuswithstats')
    <style>

    </style>
@endsection