@extends('website.layouts.app')
@section('title','Completion cum Appreciation Letter')
@section('content')
<style>

@media only screen and (max-width: 600px) {
 .img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  //border: 1px solid #000;
  width: 100%;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   margin-bottom: 20px;
}

}


.img-wrapper {  

  overflow: hidden; 
}

.inner-img {
  transition: 0.3s;
}

.inner-img:hover {
  transform: scale(1.1);
}



.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  //border: 1px solid #000;
  width: 100%;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


#tsum-tabs h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}

#tsum-tabs p {
  margin: 0 0 20px;
  line-height: 1.5;
}

</style>
  <!-- start inner banner -->
    <section class="about-latter">
        <h1 class="font-weight-bold text-center">Completion cum Appreciation Letters</h1>
        <h4 class="text-center" style="margin-top: -10px;">Home / Completion cum Appreciation Letters</h4>
    </section>
    <!-- end inner banner -->
      <section class="about-us mt-5 aos-init aos-animate" data-aos="fade-up" data-aos-duration="950">
    <div class="container">
        <div class="row">
          @foreach($appriciation_letters as $appriciation_letter)
            <div class="col-md-4 mb-5">
                <div class="imag1 img-wrapper">
                  <img class="inner-img"src="{{asset($appriciation_letter->file_path??'')}}" alt="">
                </div>
            </div>
          @endforeach
        
    </div>
  </div>

</section>
@endsection