@extends('template.default')
@push('styles')
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
@endpush
@section('content')
 <div class="header-breadcrumbs">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            {{-- <iframe frameborder="1" width="420" height="345" src="//www.youtube.com/"></iframe> --}}
           <div class="headerheading">
            <p class="big-caption home-big-cation" >We will train your maintenance staff</p>
            <p class="smallcaption home-small-caption" style="padding-top:20px !important;">to improve equipment reliability, safety and to reduce costs</p>
             {{-- <h3 class="smallcaption" style="padding-top:20px !important;">reliability, safety and reduce your costs</h3> --}}
          </div>
          <!-- <div class="pdfbtn">
            <h4>Click here to download an additional PDF catalog</h4>
            <a href="{{{URL::asset('public/pdf-Files/catalog.pdf')}}}">
            <button type="button" id="email-submit" name="email-submit" class="email-submit btn-hr">Training Catalog
               <img src="{{{URL::asset('public/images/adobe-pdf-icon.png')}}}" style="padding-left: 13px;"  ></img>
            </button></a>
          </div> -->
        </div>
      </div>
    </div>
  </div>
 <br>

  <!-- testomilial area end hear -->


    <div class="coursedetails-area">
      <div class="container">
        <div class="row">
          <h3 class="boxtitle">
            Use the boxes below to see additional information on classes,
webinars and new books</h3><br>
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div>
              <div class="">
                    <div class="">
                    <a href="EGMM"><img src="public/assets/images/NewCoverImages/newHomeCoverNew.jpg" class="quest-defect-elimination" alt="landing-page" style="height: auto;width: 100%;margin-bottom: 25px;"></a>
                    </div>
                </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
              <div class="boxsize footer-box-size">
                <div class="">
                      <div class="">
                      <a href="resource-views"><img src="public/images/laser.jpg" class="laserfocus mob-laserfocus"></a>
                      </div>
                </div>
              </div>
          </div>
          @foreach($aboutDetails as $about)
        @if($about->BoxImage !='')
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="boxsize footer-box-size">
              {{-- <div class=""> --}}
                <img src="{{ asset('admin/images/' . $about->BoxImage) }}" alt="" style="width: -webkit-fill-available !important;">
              {{-- </div> --}}
            </div>
          </div>
        @else
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="boxsize footer-box-size">
              <div class="" >
                <div class="" style="overflow:auto;  max-height: 364px;">{{-- style="height: 364px;overflow:auto;" --}}
                    <p class="boxheading">{{str_limit($about->BoxTitle, 50,'')}}</p>
                    <p class="paragraphpadding mob-paragraphpadding" style="overflow-wrap: break-word; height:265px !important">
                    {{$about->BoxContent}}
                    @if($about->ReadMoreLink ==null)
                    {{-- <a href="{{$about->ReadMoreLink}}"><span class="more">More</span></a></p> --}}
                    @else
                    <a href="{{$about->ReadMoreLink}}"><span class="more" style="display: block; text-align: right;"><img src="{{asset('admin/images/readmorelink.png')}}" alt="Details"></span></a></p>
                    @endif


                  {{-- @endif --}}


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


          @endif
            {{-- @if($about->Order == 1)
              <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="boxsize footer-box-size">
                  <div class="">
                        <div class="">
                        <a href="quest-defect-elimination"><img src="public/assets/images/NewCoverImages/homeCoverImage.jpg" class="quest-defect-elimination" alt="quest-defect-elimination" style="height: 364px;width: 100%;"></a>
                        </div>
                    </div>
                </div>
              </div>
            @endif --}}
       @endforeach

                </div>
              </div>
            </div>
          </div>
          {{-- @endif --}}

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

  <!-- Price Table area end hear -->

@endsection

@push('styles')
    <style>
        .form-error{color:red !important; font-weight: lighter;}
        .color{color:red;}
        iframe:focus {
          outline: none;
        }

        iframe[seamless] {
          display: block;
        }
        .more{
          margin-left: 2px;
            color: #c61508;
        }
        .boxsize
        {
          height: 366px!important;
            width: 363px!important;
        }
        .butontop {
          margin-top: -132px!important;
            height: 150px!important;
        }
        .laserfocus{
          height: 340px!important;
            width: 360px!important;
        }


        .form-error{color:red !important; font-weight: lighter;}
.color{color:red;}
      .boxheading{
        padding:19px !important;
        }
    </style>
   <link href="{{{URL::asset('public/css/home.css')}}}" rel="stylesheet">
   <link href="{{{URL::asset('public/css/about.css')}}}" rel="stylesheet">
@endpush

@push('scripts')
        <script type="text/javascript" src="{{{URL::asset('public/js/jquery-1.7.1.min.js')}}}"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <!-- <script type="text/javascript" src="https://cdn.ywxi.net/js/1.js" async></script> -->
        <script>

                $(function() {
                    $('#newslettersignup').validate({
                      errorClass: "form-error",
                        rules:  {

                                emailid:
                                    {
                                        required:true,
                                        email:true,
                                    },

                                },
                        messages: {

                                  emailid:  {
                                            required:"*Please enter Your email ID",
                                            email:"*Please enter a valid Email ID"
                                          },
                                },
                      errorElement : 'div',
                      errorLabelContainer: '.errorTxt',
                      submitHandler: function(form) {
                        form.submit();
                      }
                    });
                });
                setTimeout(function() {
                    $('.alert_msg').fadeOut('fast');
                     }, 3000);




            </script>
@endpush