@extends('public.skeleton')
@section('title', 'Relevant Suppliers')



@section('body')
    <div class="container-fluid p-0 menu_margin_top_fixed min_height_banner_inner"
         style="position: relative; clip-path: polygon(50% 9%, 100% 0, 100% 93%, 50% 100%, 0 93%, 0 0);">
        <img src="{{asset('images/banner_relev_2.jpg')}}" class="img-fluid">
        <div class="overlay_inner_img"></div>
    </div>
    <!---------------------------------------------------------------------->
    <div class="container-fluid "
         style="padding-bottom: 1rem; padding-top: 5rem ;margin-top: -35px;  background-image: linear-gradient(#E6EFDC, #DAE9CD, #D0E3C1);">
        <div class="container">
            <div class="row">
                <div class="col-md-12 mb-2">
                    <div class="sec-title ">
                        <span class="tag-line">{{__('hf.menu.relevant_suppliers')}}</span>
                    </div>
                </div>
            </div>

            <div class="row mt-4">

                <div class="col-lg-6 col-md-12">

                    <div class="col-md-12 mt-3 supp_title">
                        <ul style="margin-left: -2rem">
                            <li>
                                Steel Wire Ropes – Brunton Wolf Wire Ropes
                            </li>
                        </ul>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 col-6">
                            <figure><img src="{{asset('images/relev_img_1.jpg')}}" class="img-fluid img-thumbnail">
                                <!--<div class="watermark_img_2_sm"></div>-->
                            </figure>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">
                    <div class="col-md-12 mt-3 supp_title">
                        <ul style="margin-left: -2rem">
                            <li>
                                Shackles, Hooks, Clips…etc.
                            </li>
                        </ul>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 col-6 ">
                            <figure><img src="{{asset('images/relev_img_2.jpg')}}" class="img-fluid img-thumbnail"></figure>
                            <div class="mx-auto text-center relev_style">Crosby</div>
                        </div>
                        <div class="col-md-4 col-6 ">
                            <figure><img src="{{asset('images/relev_img_3.jpg')}}" class="img-fluid img-thumbnail"></figure>
                            <div class="mx-auto text-center relev_style">Gunnebo</div>
                        </div>
                        <div class="col-md-4 col-6 ">
                            <figure><img src="{{asset('images/relev_img_4.jpg')}}" class="img-fluid img-thumbnail"></figure>
                            <div class="mx-auto text-center relev_style">Van Beest</div>
                        </div>

                    </div>
                </div>
            </div>
            <!---------------------------------------->
            <div class="row mt-4">

                <div class="col-lg-6 col-md-12">

                    <div class="col-md-12 mt-3 supp_title">
                        <ul style="margin-left: -2rem">
                            <li>
                                Master Links: William Hackett – England
                            </li>
                        </ul>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 col-6">
                            <figure><img src="{{asset('images/relev_img_5.jpg')}}" class="img-fluid img-thumbnail"></figure>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">
                    <div class="col-md-12 mt-3 supp_title">
                        <ul style="margin-left: -2rem">
                            <li>
                                Load Cells: JCM – England
                            </li>
                        </ul>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 col-6 ">
                            <figure><img src="{{asset('images/relev_img_6.jpg')}}" class="img-fluid img-thumbnail"></figure>
                            <div class="mx-auto text-center relev_style"></div>
                        </div>
                        <div class="col-md-4 col-6 ">
                            <figure><img src="{{asset('images/relev_img_7.jpg')}}" class="img-fluid img-thumbnail"></figure>
                            <div class="mx-auto text-center relev_style"></div>
                        </div>

                    </div>
                </div>
            </div>
            <!---------------------------------------->
            <div class="row mt-4">

                <div class="col-lg-6 col-md-12">

                    <div class="col-md-12 mt-3 supp_title">
                        <ul style="margin-left: -2rem">
                            <li>
                                Ferrules & Thimbles: Talurit – England
                            </li>
                        </ul>
                    </div>
                    <div class="row mb-3">
                        <div class="col-lg-4 col-md-4 col-6 mb-3">
                            <figure><img src="{{asset('images/relev_img_8.jpg')}}" class="img-fluid img-thumbnail"></figure>
                        </div>

                        <div class="col-lg-4 col-md-4 col-6 mb-3">
                            <figure><img src="{{asset('images/relev_img_9.jpg')}}" class="img-fluid img-thumbnail"></figure>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-lg-4 col-md-4 col-6 mb-3">
                            <a href="#" style="text-decoration: none; outline: none;"  data-toggle="modal" data-target="#img_relev_1">
                                <figure><img src="{{asset('images/relev_img_10.jpg')}}" class="img-fluid img-thumbnail"></figure>
                            </a>
                        </div>

                        <div class="col-lg-4 col-md-4 col-6 mb-3">
                            <a href="#" style="text-decoration: none; outline: none;"  data-toggle="modal" data-target="#img_relev_2">
                                <figure><img src="{{asset('images/relev_img_11.jpg')}}" class="img-fluid img-thumbnail"></figure>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">

                    <div class="col-md-12 mt-3 supp_title">
                        <ul style="margin-left: -2rem">
                            <li>
                                Webbing Slings : Delta Plus - All Safe
                            </li>
                        </ul>
                    </div>
                    <div class="row mb-3">
                        <div class="col-lg-4 col-md-4 col-6 mb-3">
                            <figure><img src="{{asset('images/supp_img_22.jpg')}}" class="img-fluid img-thumbnail"></figure>
                        </div>

                        <div class="col-lg-4 col-md-4 col-6 mb-3">
                            <a href="#" style="text-decoration: none; outline: none;"  data-toggle="modal" data-target="#img_relev_3">
                                <figure><img src="{{asset('images/relev_img_12.jpg')}}" class="img-fluid img-thumbnail"></figure>
                            </a>
                        </div>

                    </div>
                </div>

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

    <!--Modal-->
    <div class="modal fade " id="img_relev_1" role="dialog" style="background-color: rgba(0,0,0,0.7);">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <img src="{{asset('images/close_icon.png')}}" class="close" data-dismiss="modal">
                </div>

                <div class="modal-body">
                    <img src="{{asset('images/relev_img_10_mod.jpg')}}" class="img-fluid">
                </div>

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

    <div class="modal fade " id="img_relev_2" role="dialog" style="background-color: rgba(0,0,0,0.7);">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <img src="{{asset('images/close_icon.png')}}" class="close " data-dismiss="modal">
                </div>

                <div class="modal-body">
                    <img src="{{asset('images/relev_img_11_mod.jpg')}}" class="img-fluid">
                </div>

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

    <div class="modal fade " id="img_relev_3" role="dialog" style="background-color: rgba(0,0,0,0.7);">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <img src="{{asset('images/close_icon.png')}}" class="close " data-dismiss="modal">
                </div>

                <div class="modal-body">
                    <img src="{{asset('images/relev_img_12_mod.jpg')}}" class="img-fluid">
                </div>

            </div>
        </div>
    </div>
@endsection