@extends('public.skeleton')
@section('title', 'Accreditation')

@section('library-styles')
    <style>
        .cont2 {
            overflow:hidden;
        }
        .cont2:hover .image2 {
            -webkit-transform:scale(15);
            transform:scale(1.05);
            -webkit-filter: saturate(2);
            cursor: pointer;
        }
        .image2 {
            -webkit-transition: all 0.7s ease;
            transition: all 0.7s ease;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

    </style>
@endsection

@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_acc_2.jpg')}}" class="img-fluid ">
        <div class="overlay_inner_img"></div>
        <div class="inner_caption">{{\Illuminate\Support\Str::upper(__('hf.menu.accreditation'))}}</div>
    </div>
    <!---------------------------------------------------------------------->
    <div class="container-fluid mb-5" style="padding-top: 2.8rem">
        <div class="container">
            <div class="row mb-3">
                <div class="col-md-6 mb-2">
                    <div class="sec-title ">
                        <span class="tag-line">Lifting Field</span>
                    </div>
                    <div class="sub_title_inner">Membership in LEEA (Lifting Equipment Engineers Association)</div>
                </div>
                <div class="col-md-4 mb-2 leea_ml">
                    <img src="{{asset('images/leea_logo.jpg')}}" class=" img-fluid">
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 mb-2">
                    <a href="#" style="text-decoration: none; outline: none;"  data-toggle="modal" data-target="#img_1">
                        <figure><img src="{{asset('images/leea_1_sm.jpg')}}" class="img-fluid img-thumbnail" style="cursor: pointer;">
                            <div class="watermark_img_2"></div>
                        </figure>
                    </a>
                </div>
                <div class="col-md-4 mb-2">
                    <a href="#" style="text-decoration: none; outline: none;"  data-toggle="modal" data-target="#img_2">
                        <figure><img src="{{asset('images/leea_2.jpg')}}" class="img-fluid img-thumbnail" style="cursor: pointer;">
                            <div class="watermark_img_2"></div>
                        </figure>
                    </a>
                </div>
            </div>

            <div class="row mb-3 mt-5">
                <div class="col-md-6 mb-2">
                    <div class="sec-title ">
                        <span class="tag-line">Quality Management System</span>
                    </div>
                    <div class="sub_title_inner">ISO 9001-2015</div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 mb-2">
                    <a href="#" style="text-decoration: none; outline: none;"  data-toggle="modal" data-target="#img_3">
                        <figure><img src="{{asset('images/ios_1.jpg')}}" class="img-fluid img-thumbnail" style="cursor: pointer;">
                            <div class="watermark_img_2"></div>
                        </figure>
                    </a>
                </div>
                <div class="col-md-4 mb-2">
                    <a href="#" style="text-decoration: none; outline: none;"  data-toggle="modal" data-target="#img_4">
                        <figure><img src="{{asset('images/ios_sm_2.jpg')}}" class="img-fluid img-thumbnail" style="cursor: pointer;">
                            <div class="watermark_img_2"></div>
                        </figure>
                    </a>
                </div>
            </div>

            <div class="row mb-3 mt-5">
                <div class="col-md-6 mb-2">
                    <div class="sec-title ">
                        <span class="tag-line">Authorities</span>
                    </div>
                    <div class="sub_title_inner">Registered in EGPC (Egyptian
                        General Petroleum Corporation)
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 mb-2">
                    <a href="#" style="text-decoration: none; outline: none;"  data-toggle="modal" data-target="#img_5">
                        <figure><img src="{{asset('images/autho_1_sm.jpg')}}" class="img-fluid img-thumbnail" style="cursor: pointer;">
                            <div class="watermark_img_2"></div>
                        </figure>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!--Modal-->
    <div class="modal fade " id="img_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/leea_1.jpg')}}" class="img-fluid">
                </div>

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

    <div class="modal fade " id="img_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/leea_2_mod.jpg')}}" class="img-fluid">
                </div>

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

    <div class="modal fade " id="img_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/ios_1_mod.jpg')}}" class="img-fluid">
                </div>

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

    <div class="modal fade " id="img_4" 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/ios_2.jpg')}}" class="img-fluid">
                </div>

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

    <div class="modal fade " id="img_5" 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/autho_1.jpg')}}" class="img-fluid">
                </div>

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

@endsection