@extends('website.layouts.app')
@section('title','gallery2')
@section('content')



<style>
/*.main-title{
  color: #2d2d2d;
  text-align: center;
  text-transform: capitalize;
  padding: 0.7em 0;
}



.content {
  position: relative;

  max-width: 400px;
  margin: auto;
  overflow: hidden;

}*/

.content .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 100%;
  max-height: 300px;
   min-height: 300px;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}

.fadeIn-top{
  top: 20%;
}

.fadeIn-left{
  left: 20%;
}

.fadeIn-right{
  left: 80%;
}

.footers:hover h3{
  color: #0d2147 !important;

}
.footers:hover {
    background-color: #f1f1f1!important;
  color: #0d2147 !important;

}

</style>

<section class="gallery-banner mb-10">
        <h1 class="font-weight-bold text-center">Gallery</h1>
        
 </section>

<div class="container mt-5" style="margin-bottom: 40px;">
    <div class="row">
       @foreach($company_gallery as $companyGallery)
          
          <div class="col-sm-12 mt-2 mb-2 ">
            <div class="">
              <h2 class="headline">
                <span>{{$companyGallery->name ?? ''}}</span>
              </h2>
            </div>
          </div>
      @foreach($companyGallery->categoryWiseGalleryActive as $gallery)
        <div class="col-lg-4 col-md-12 mb-3">
              <div class="content">
                <a href="{{ url('website/gallery_description',[$gallery->id]) }}" target="_self">
                  <div class=""></div>
                  <img class="content-image" src="{{ asset($gallery->file_path??'') }}" alt="">
                  <div class="text-center image-footer footers" style="background-color:#0d2147;padding: 5px;">
                    <h3 class="content-title text-white " style=""> {{$gallery->title}} </h3>
                    <!-- <p class="content-text">This is a short description</p> -->
                  </div>
                </a>
              </div>
        </div>
        @endforeach
      @endforeach
        

       
    </div>

    </div>


@endsection