@extends('frontend.layouts.main')

<!-- Pushed Child Page Title -->
@push('title')
<title>Gallery</title>
@endpush


@section('main-container')  
<style>
    /* Gallery Page CSS Start Here */
.section2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 100px 300px;
    grid-gap: 10px;
    grid-auto-flow: dense;
  }

  .gallery-item {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .gallery-item .image {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .gallery-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    cursor: pointer;
    transition: .5s ease-in-out;
  }

  .gallery-item:hover .image img {
    transform: scale(1.5);
  }

  .gallery-item .text {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
    pointer-events: none;
    z-index: 4;
    transition: .3s ease-in-out;
    -webkit-backdrop-filter: blur(5px) saturate(1.8);
    backdrop-filter: blur(5px) saturate(1.8);
  }

  .gallery-item:hover .text {
    opacity: 1;
    animation: move-down .3s linear;
    padding: 1em;
    width: 100%;
  }

  .w-1 {
    grid-column: span 1;
  }

  .w-2 {
    grid-column: span 2;
  }

  .w-3 {
    grid-column: span 3;
  }

  .w-4 {
    grid-column: span 4;
  }

  .w-5 {
    grid-column: span 5;
  }

  .w-6 {
    grid-column: span 6;
  }

  .h-1 {
    grid-row: span 1;
  }

  .h-2 {
    grid-row: span 2;
  }

  .h-3 {
    grid-row: span 3;
  }

  .h-4 {
    grid-row: span 4;
  }

  .h-5 {
    grid-row: span 5;
  }

  .h-6 {
    grid-row: span 6;
  }

  @media screen and (max-width:500px) {
    .section2 {
      grid-template-columns: repeat(1, 1fr);
    }

    .w-1,
    .w-2,
    .w-3,
    .w-4,
    .w-5,
    .w-6 {
      grid-column: span 1;
    }

    .h-1,
    .h-2,
    .h-3,
    .h-4,
    .h-5,
    .h-6 {
      grid-row: span 3;
    }
  }

  @keyframes move-down {

    0% {
      top: 10%;
    }

    50% {
      top: 35%;
    }

    100% {
      top: 50%;
    }
  }
  
  .video-container{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
  }
  
  .video-container .video{
      height: 19rem;
      width: 33rem;
      margin: 2rem;
      box-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
      overflow: hidden;
      border-radius: 1rem;
  }
  
/* Gallery Page CSS End Here */
</style>

    <h2 class="text-center mt-3" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		color: black;
		text-decoration: underline;
		text-decoration-color: var(--yellow);">Our Gallery</h2>
    <hr>
    
    <div class="video-container">
     
     <div class="video">
          <iframe width="100%" height="315" src="https://www.youtube.com/embed/LdBRgoJuYdU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      
     </div>
     
     <div class="video">
          <iframe width="100%" height="315" src="https://www.youtube.com/embed/AeMVRit3GbM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </div>
     
     <div class="video">
          <iframe width="100%" height="315" src="https://www.youtube.com/embed/VW-rUruBni0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </div>
     
     <div class="video">
          <iframe width="100%" height="315" src="https://www.youtube.com/embed/ZW8YPay4L5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </div>
     
     <div class="video">
          <iframe width="100%" height="315" src="https://www.youtube.com/embed/zDzh5UGoGxg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </div>
     
     <div class="video">
         <iframe width="100%" height="315" src="https://www.youtube.com/embed/885h_X-z1fw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </div>
     
     <div class="video">
          <iframe width="100%" height="315" src="https://www.youtube.com/embed/9WmY3L5SgGU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </div>
    
    </div>
 <!-- <div class="section2 mx-2">  -->
      <!--
      <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/LdBRgoJuYdU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      
        </div>
      </div>
    </div>
    
     <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/LdBRgoJuYdU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      
        </div>
      </div>
    </div>
     <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/LdBRgoJuYdU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      
        </div>
      </div>
    </div>
     <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/LdBRgoJuYdU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      
        </div>
      </div>
    </div>
      
      
    -->
 
 
     
     
 
<!--
    <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic7.jpeg" alt="pic3">
        </div>
        <div class="text">Sardar Naseem Sahb win mobile from Dewan Sharif Accommodation Front Office. Management congratulates you, and May Allah bless you with more success.</div>
      </div>
    </div>

    <div class="gallery-container h-2 w-6">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic6.jpeg" alt="pic4">
        </div>
        <div class="text">Dewan Sharif Accommodation (DSA) Clients Prise distribution program.</div>
      </div>
    </div>

    <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic1.jpeg" alt="pic5">
        </div>
        <div class="text">Sardar Abdul Jabbar Speeching about Diwan Sharif Accommodation (DSA). Management congratulates you deeply. May Allah bless you with more success and success.</div>
      </div>
    </div>
    
    <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic2.jpeg" alt="pic6">
        </div>
        <div class="text">Welcome To DSA</div>
      </div>
    </div>

    <div class="gallery-container w-3">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic3.jpeg" alt="pic7">
        </div>
        <div class="text">Liaqat Khan win Motor Cycle from Dewan Sharif Accommodation Front Office. Management congratulates you, and May Allah bless you with more success.</div>
      </div>
    </div>
    
    <div class="gallery-container w-3 h-3">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/zakir.jpeg" alt="pic2">
        </div>
        <div class="text">CEO Sardar Zakir Sahb Speeching about our diffrent projects</div>
      </div>
    </div>
    
    <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/sheraz.jpeg" alt="pic1">
        </div>
        <div class="text">Muhammad Sheraz</div>
      </div>
    </div>
    
    <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic7.jpeg" alt="pic3">
        </div>
        <div class="text">Surafaraz Sir</div>
      </div>
    </div>
    
    <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic3.jpeg" alt="pic7">
        </div>
        <div class="text">DSA Motorcycle winners</div>
      </div>
    </div>
    
    <div class="gallery-container h-2 w-6">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic6.jpeg" alt="pic4">
        </div>
        <div class="text">Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsums</div>
      </div>
    </div>
    
    <div class="gallery-container w-3 h-2">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic8.jpeg" alt="pic7">
        </div>
        <div class="text">Naeem shah taking the file of five marla plot from Dewan Sharif Accommodation Head Office. Management congratulates you from the bottom of my heart. May Allah give you more success.</div>
      </div>
    </div>
    
    <div class="gallery-container w-3">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic3.jpeg" alt="pic7">
        </div>
        <div class="text">DSA Motorcycle winners</div>
      </div>
    </div>
    
    <div class="gallery-container w-3">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic3.jpeg" alt="pic7">
        </div>
        <div class="text">DSA Motorcycle winners</div>
      </div>
    </div>
    
    <div class="gallery-container w-3">
      <div class="gallery-item">
        <div class="image">
          <img src="frontend/images/our_team/pic8.jpeg" alt="pic7">
        </div>
        <div class="text">DSA Motorcycle winners</div>
      </div>
    </div>
   -->

 <!-- </div> -->
@endsection