@include('layouts.header')




    <style>

        .gallery-block.grid-gallery{
          padding-bottom: 60px;
          padding-top: 60px;
        }
        
        .gallery-block.grid-gallery .heading{
            margin-bottom: 20px;
            text-align: center;
        }
        
        .gallery-block.grid-gallery .heading h2{
            font-weight: bold;
            font-size: 1.4rem;
            text-transform: uppercase;
        }
        
        .gallery-block.grid-gallery a:hover{
          opacity: 0.8;
        }
        
        .gallery-block.grid-gallery .item img{
          box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
          transition: 0.4s;
        }
        
        .gallery-block.grid-gallery .item{
          margin-bottom: 20px;
        }
        
        @media (min-width: 576px) {
        
          .gallery-block.grid-gallery .scale-on-hover:hover{
            transform: scale(1.05);
            box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15) !important;
          }
        }
        
        /* img {
            // -webkit-filter: sepia(0.7);
            -webkit-filter: hue-rotate(210deg) saturate(10);
        } */
        </style>
        
        {{-- <div class="container my-4">
            <div class=" d-flex flex-column align-items-center">
                <h3 class="content-card-title">Management Team</h3>
            </div>
            <div class="row g-4">
                @foreach($gallerys as $data)
                <div class="col-4">
                    <div class="board-of-directory-card">
                        <a href="#">
                            <img width="140px"  src="{{ url(env('EXT').'images/Photo Gallery/'.$data->photo_gallery) }}" alt="">
                        </a>
                        <h5>{{$data->name}}</h5>
                      
                    </div>
                </div>
                @endforeach
            </div>
        </div> --}}
        
        
        <section class="gallery-block grid-gallery">




            <div class="container ">

                <div class="heading">

                    <h3 class="content-card-title">Video Gallery</h3> 
                    
                </div>
                <div class=" mb-3 ">
                        
                        <div class="row pb-row ">

                               @foreach ($gallerys as $data)
                                                        
                                @if (isset($data ['video_gallery'] ) || isset($data['video_title'])) 
                                    <div class="col-md-6 pb-video mb-5 mt-3">
                                        <iframe class="pb-video-frame" width="100%" height="230" src="{{ $data->video_gallery }}" frameborder="0" allowfullscreen></iframe>



                                        <label class="form-control label-warning text-center  bg bg-warning">{{ $data->video_title }}</label>

                                        
                                    </div>
                                @endif
                                @endforeach
                        </div>
                    </div>
                </div>
        </section>
        
        
        
        <script>baguetteBox.run('.grid-gallery', {
            animation: 'slideIn'
        });</script>
        

        








@include('layouts.footer')