@extends('layouts.admin-app')

@section('content')
<style>
    .bg-title-page {
    background-image: url(img/gallery-5.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 400px;
}
@media (max-width:768px){
    .bg-title-page {
    background-size: 100% 62%;
    background-attachment: scroll;
    height: 370px;
    margin-top: -69px;
}
}
.pagetitle {
    color: white;

}

.pagetitle-inner {
    padding-top: 140px;
    padding-bottom: 112px;
}

.fadeInUp {
    animation-name: fadeInUp;
}

.pagetitle h1 {
    margin-bottom: 28px;
    padding-top: 0;
    margin-top: 0;
    font-size: 73px;
    line-height: 48px;
    font-weight: 600;
    color: white;
}
@media (max-width:768px){
  .pagetitle h1 {

    font-size: 40px !important;
    line-height: 66px !important;

}
}
@media (max-width:480px){
  .pagetitle h1 {

    font-size: 25px !important;
    line-height: 33px !important;
  }
  .breadcrumb1 {
        margin-top: -17px;
        font-size: 10px;
    }
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}
.pagetitle a:link, .pagetitle a:visited {
    color: white;
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}
.breadcrumb1 span a span, .breadcrumb2 span a span, .breadcrumb1 span.current-item, .breadcrumb2 span.current-item {
    padding: 0;
    font-weight: 500;
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}

.editor-styles-wrapper, .entry-content {
    counter-reset: footnotes;
}
/* 2nd section */

.elementor-460 .elementor-element.elementor-element-da0b444 {
    margin-top: -115px;
    /* margin-bottom: 100px; */
}
.elementor-element {
    --widgets-spacing: 20px;
}
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1140px;
}
.elementor-section .elementor-container {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
.elementor *, .elementor :after, .elementor :before {
    box-sizing: border-box;
}
@media (min-width: 768px){
.elementor-column.elementor-col-100, .elementor-column[data-col="100"] {
    width: 100%;
}
}
.elementor-element, .elementor-lightbox {
    --swiper-theme-color: #000;
    --swiper-navigation-size: 44px;
    --swiper-pagination-bullet-size: 6px;
    --swiper-pagination-bullet-horizontal-gap: 6px;
}
.elementor-element {
    --widgets-spacing: 20px;
}


.elementor-column {
    position: relative;
    min-height: 1px;
    display: flex;
    margin-left: 101px;
    margin-top: 11px;
}

@media (max-width: 768px){
    .elementor-column {

    margin-left: 9px !important;

}


}

@media (max-width: 991px){
    .elementor-column {
  display: none !important;
}
.elementor-460 .elementor-element.elementor-element-da0b444 {

    margin-bottom: 190px;
}

}
@media (max-width: 768px){
    .elementor-460 .elementor-element.elementor-element-da0b444 {

margin-bottom: 75px !important;
}

}
.elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: 10px;
}
.elementor-widget-wrap {
    position: relative;
    width: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
}
.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap {
    display: flex;
}
.elementor-widget-wrap>.elementor-element {
    width: 100%;
}
.elementor-section {
    position: relative;
}
@media (min-width: 768px){
.elementor-460 .elementor-element.elementor-element-8e3f050 {
    width: 30.353%;
}}
@media (min-width: 768px){
.elementor-460 .elementor-element.elementor-element-0c86c56 {
    width: 38.124%;
}}
.zoomIn {
    animation-name: zoomIn;
}
.elementor-460 .elementor-element.elementor-element-0c86c56:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-460 .elementor-element.elementor-element-0c86c56 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #FFFFFF;
}
.elementor-460 .elementor-element.elementor-element-0c86c56 > .elementor-element-populated {
    border-style: solid;
    border-width: 8px 0px 0px 0px;
    border-color: #b56447ff;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 0px 0px 0px 0px;
    --e-column-margin-right: 0px;
    --e-column-margin-left: 0px;
    padding: 20px 30px 20px 50px;
    box-shadow: 2px 0px 9px -3px black;

}
.elementor-widget-wrap {
    position: relative;
    width: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
}
.elementor-widget-wrap>.elementor-element {
    width: 100%;
}
.elementor-element .elementor-widget-container {
    transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);
}
.elementor *, .elementor :after, .elementor :before {
    box-sizing: border-box;
}
.elementor-460 .elementor-element.elementor-element-b415383 {
    margin-top: 0px;
    margin-bottom: 100px;
    padding: 0px 15px 0px 10px;
}
.fadeInUp {
    animation-name: fadeInUp;
}
.animated {
    animation-duration: 1.25s;
}
.about-section h6{
    color: #b56447ff;
    letter-spacing: 1px;
    font-size: 20px;
}
/* .about-section h1{
    font-size: 32px;
    color: #b56447ff;
} */
.about-section p{
    letter-spacing: 1px;
    text-align: justify;
    font-size: 13px;

}
.about-section .bg-about{
    border: 1px solid black;
    background: #f6f6f6;
    padding: 20px;
  border-left: 7px solid #b56447ff;
}
.project-section .integrity{
  margin-bottom: 36px;
}
.project-section .integrity .caption{
   height: 90px;
}

.project-section .integrity .caption h4{
    font-size: 14px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
}
.carousel-indicators {
  position: absolute;
    top: 79%;
    transform: translateY(-50%);
    left: 124px;
    z-index: 15;
    }

    .carousel-indicators li {
      background-color: #bbb;
      border: 2px solid green;
      /* border-radius: 50%; */
      width: 12px;
      height: 12px;
      margin: 0 8px;
      cursor: pointer;
    }

    .carousel-indicators .active {
      background-color: maroon;
    }
/*

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .pagination button {
      padding: 10px 15px;
      margin: 0 5px;
      cursor: pointer;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
    }

    .pagination button:hover {
      background-color: #45a049;
    }

    .project-section {
      overflow: hidden;
    }

    .row.integrity:not(:first-child) {
      display: none;
    } */



    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 0;
    margin-bottom: 42px;
    }

    .pagination button {
      padding: 5px 13px;
    margin: 0 5px;
    cursor: pointer;
    background-color: #b56447;
    color: white;
    border: none;
    border-radius: 5px;
}
@media(max-width:768px ){
  .pagination button {
    padding: 1px 6px;
    margin: 1px;
  }
}

    .pagination button:hover {
      background-color:  #974d32;
    }

    .project-section {
      overflow: hidden;
    }

    .row.integrity:not(:first-child) {
      display: none;
    }
    .carousel-inner{
    box-shadow: 4px 4px 4px gray;
    margin-top: 20px;
}
    /*footer*/
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 25px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:before {
    content: '←';
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 26px;
    line-height: 1;
    opacity: .75;
    color:black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.client-section{
  background: url(img/carousel-bg.png);
}


.auto{
  margin-top: -40px;
  margin-left: 54px;
  font-size: 20px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
@media (max-width: 768px) {
  .auto{
  margin-top: -16px;

}
}

@media (min-width: 450px) {
      .main-card {
        width: 96%;
        max-width: 400px;
        height: calc(100% - 159px) !important;
        border-radius: 8px !important;
        max-height: 600px;
      margin: 16px!important;
      }
    }

    .collapsed_new {
      width: 53px !important;
      height: 53px !important;
      border-radius: 26px !important;
      margin: 16px!important;
    }

    .main-card {
      background: white;
      color: white;
      width: 100%;
      height: 100%;
      margin: 0px;
      border-radius: 0px;
      display: flex;
      border: 2px solid white;
      flex-direction: column;
      overflow: hidden;
      right: 0;
      bottom: 0;
      position: absolute;
      transition: all 0.5s;
      box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
#chatbot_toggle {
  position: absolute;
    right: -2px;
    border: none;
    height: 54px;
    width: 54px;
    background: #b56447;
    cursor: pointer;
    padding: 13px;
    color: white;
    outline: none;
}
#chatbot_toggle:hover {
  background: #b56447;

}
.line-chat {
  height: 1px;
  background-color: brown;
  width: 100%;
  opacity: 0.2;
}
.main-title {
    background-color: #efe3e3;
  font-size: large;
  font-weight: bold;
  display: flex;
  color: #b56447ff;
  height: 54px;
   color: transparent;
  background-image: linear-gradient(#613013, #e0a072);
  -webkit-background-clip: text;
}
.main-title>div{
  height:48px;
  width:48px;
  display:flex;
  margin-left:8px;
}
.main-title svg {
  height: 24px;
  margin: auto;
}
.main-title > span {
  margin: auto auto auto 8px;
  color: transparent; background-image: linear-gradient(#613013, #e0a072); -webkit-background-clip: text;
}
.chat-area {
  flex-grow: 1;
  overflow: auto;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.input-message {
  padding: 8px 48px 8px 16px;
  flex-grow: 1;
  border: none;
  padding-right: 0px;
  font-size: 13px;
}
.input-message:focus {
  outline: none;
}
.input-div {
  height: 48px;
  display: flex;
}

.input-send {
  background: transparent;
  width: 96px;
  height: 48px;
  right: 0%;
  border: none;
  cursor: pointer;
}
.input-send:hover {
  background: lavender;
}
.input-send svg {
  fill:  #b56447ff;
  margin: 11px 8px;
}
.chat-message-div {
  display: flex;
}

.chat-message-sent {
  background-color: white;
  margin: 8px 16px 8px 64px;
  padding: 8px 16px;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 100ms;
  color: black;
  border-radius: 8px 8px 2px 8px;
  background-color: lavender;
}

.chat-message-received {
  background-color: white;
  margin: 8px 64px 8px 16px;
  padding: 8px 16px;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 100ms;
  color: black;
  border-radius: 8px 8px 8px 2px;
  background-color: lavender;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/*End Footer*/
</style>

<div class="bg-title-page pagetitle breadcrumbleft">
    <div class="pagetitle-inner">
        <div class="container animatedcustom animated fadeInUp">
<div class="row">
    <div class="col-lg-8">
    <h1><span style="color: #b56447ff;">P</span>hoto <span style="color: #b56447ff;">G</span>allery</h1>
    <div class="breadcrumb1">
        <span property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage" title="Go to Dustro." href="index.php" class="home"><span property="name">Home</span></a>

        </span>->

        <span property="itemListElement" typeof="ListItem"><span property="name" class="post post-page current-item">Photo Gallery</span><meta property="url" content="http://rayoflightthemes.com/wordpress-themes/dustro-wordpress-theme/about-us/"><meta property="position" content="2"></span>

    </div>
    </div>
    <div class="col-lg-4">
        </div>
</div>
        </div>

    </div>


</div>

<div class="post-460 page type-page status-publish hentry" id="post-460">
    <div class="post-inner">
        <div class="entry-content">
        <div data-elementor-type="wp-page" data-elementor-id="460" class="elementor elementor-460">
        <section class="elementor-section elementor-top-section elementor-element elementor-element-da0b444 text-center-1024 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="da0b444" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fa458e2" data-id="fa458e2" data-element_type="column">
    <div class="elementor-widget-wrap elementor-element-populated">
    <section class="elementor-section elementor-inner-section elementor-element elementor-element-06fd6a0 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="06fd6a0" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-0a5c8e5 elementor-hidden-tablet elementor-hidden-phone" data-id="0a5c8e5" data-element_type="column">
			<div class="elementor-widget-wrap">
									</div>

		</div>
        <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-8e3f050 elementor-hidden-tablet elementor-hidden-phone" data-id="8e3f050" data-element_type="column">
			<div class="elementor-widget-wrap">
									</div>
		</div>
        <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-0c86c56 box-shadow animated zoomIn" data-id="0c86c56" data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;zoomIn&quot;}">
			<div class="elementor-widget-wrap elementor-element-populated">
								<div class="elementor-element elementor-element-40f0baa call-us-box-767 elementor-widget elementor-widget-text-editor" data-id="40f0baa" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
			<style>/*! elementor - v3.16.0 - 12-09-2023 */
.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style>

<img src="img/logo10.png" alt="" style="width: 90%; height:130px;">

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

    </div>

</div>

        </section>
        </div>

        </div>

    </div>
</div>



<section class="about-section">
    <div class="container">
       <div class="row">
          <div class="col-lg-12">
             <h1>Photo Gallery</h1>
             <br>
          </div>
       </div>
    </div>
 </section>

 <section class="project-section backgroundimagetransp">
    <div class="container">
       <div class="row integrity" id="row_1">
          @foreach ($pgallery as $item)
          <div class="col-md-4">
             <div id="imageCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                   <div class="carousel-item active thumbnail">
                      <a data-fancybox="gallery" href="{{ asset('image/' . $item->photo) }}">
                      <img src="{{ asset('image/' . $item->photo) }}" alt="Image 1" style="width:100%;height:268px;"></a>
                      <!-- <div class="caption">
                         <h4>Celebrating the Season of Festivities: A very Happy Diwali’23 from the team, OSPH&WC</h4>
                         </div> -->
                   </div>
                </div>
             </div>
          </div>
          @endforeach
       </div>
    </div>
    <div class="pagination" id="pagination-container">
       <button onclick="previousPage()">Previous</button>
       <button onclick="nextPage()">Next</button>
    </div>
 </section>
<!--footer-->
<section class="client-section bggray">
    <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="client-outer" style="padding-right: 23px; padding-left: 21px;">
          <div class="slick-slider client-slider ">
        <div class="wow-outer">
                 <div class="item wow slideInLeft" data-wow-delay=".1s">
                  <center>
               <a target="_blank" href="https://www.india.gov.in/"> <img src="{{ asset('img/client/govtlogo-1.png')}}" class="img-fluid" width="200" height="150" alt="Imageteam" ></a></center>
            </div>
                    </div>

            <div class="wow-outer">
                 <div class="item wow slideInLeft" data-wow-delay=".1s">
                  <center>
               <!-- <a target="_blank" href="https://odisha.gov.in/"><img src="img/client/govtlogo-8.png" class="img-fluid" style="height: 111px; margin-top:15px;" alt="Imageteam" ></a> -->
               <a target="_blank" href="https://janasunani.odisha.gov.in/">  <img src="{{ asset('img/client/govtlogo-8(9) (1) (1).png')}}" width="200" height="150" class="img-fluid" alt="Imageteam" style="margin-top: 3px;"></a>
              </center>
            </div>
                    </div>
              <div class="wow-outer">
    <div class="item wow slideInLeft"  data-wow-delay=".3s">
      <center>
              <a target="_blank" href="https://janasunani.odisha.gov.in/">  <img src="{{ asset('img/client/govtlogo-2.png')}}" width="200" height="150" class="img-fluid" alt="Imageteam"></a>
                </center>
            </div>
                    </div>
            <div class="wow-outer">
    <div class="item wow slideInLeft" data-wow-delay=".5s">
      <center>
             <a target="_blank" href="https://digitalindia.gov.in/"> <img src="{{ asset('img/client/govtlogo-3.png')}}" width="200" height="150" class="img-fluid" alt="Imageteam" ></a>
                </center>
            </div>
                    </div>
                     <div class="wow-outer">
    <div class="item wow slideInLeft"  data-wow-delay=".7s">
      <center>
                <a target="_blank" href="https://swachhbharatmission.gov.in/sbmcms/index.htm"><img src="img/client/govtlogo-4.png" width="200" height="150" class="img-fluid" alt="Imageteam" ></a>
                </center>
            </div>
                    </div>

                        <div class="wow-outer">
    <div class="item wow slideInLeft" data-wow-delay=".9s">
      <center>
               <a target="_blank" href="https://www.iitbbs.ac.in/"> <img src="{{ asset('img/client/govtlogo-5.png')}}" width="200" height="150" class="img-fluid" alt="Imageteam" ></a>
                </center>
            </div>
                    </div>

                    <div class="wow-outer">
                 <div class="item wow slideInLeft" data-wow-delay=".11s">
                  <center>
               <a target="_blank" href="https://odisha.data.gov.in/"> <img src="{{ asset('img/client/govtlogo-6.png')}}" width="200" height="150" class="img-fluid" alt="Imageteam" ></a>
                </center>
            </div>
                    </div>
                    </div>
               </div>
         </div>
        </div>

        </div>
      <div class="auto">
    <div id="pauseButton" onclick="togglePausePlay()"><i class="fa-solid fa-pause"></i></div>
    <div id="playButton" style="display: none;" onclick="togglePausePlay()"><i class="fa-solid fa-play"></i></div>
    </div>

    </section>
      <footer class="footer-area pt-100">

    <div class="container">
       <video autoplay loop muted plays-inline class="background-clip">
          <!-- <source src="img/footer_vdo1.mp4" type="video/mp4"> -->
          <source src="{{ asset('img/BHARATPUR POLICE STATION.mp4')}}" type="video/mp4">

        </video>
    <div class="row">
    <div class="col-lg-2 col-sm-6 col-6">
    <div class="footer-widget">
     <h3>Quick Links</h3>
    <ul class="footer-bg-clr">
    <li>
    <a href="{{route('photo_gallery_user')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Photo Gallery
    </a>
    </li>

    <li>
    <a href="{{route('csr')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  CSR</a>
    </li>
    <li>
    <a href="{{route('tender')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Tenders</a>
    </li>
    <li>
    <a href="{{route('contact_us')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Contact us</a>
    </li>
    <li>
    <a href="#"><i class="fa-solid fa-caret-right"></i>&nbsp; FAQ</a>
    </li>

    </ul>

    <div class="footer-social">
    <a href="http://tinyurl.com/3hc48vcy" target="_blank" class="social-facebook">
          <i class="fab fa-facebook-f"></i>
            </a>

     <a href="http://tinyurl.com/5f7zpkrh" target="_blank" class="social-twitter">
     <i class="fa-brands fa-x-twitter"></i>
     </a>
       <a href="http://tinyurl.com/434m8vjd" target="_blank" class="social-twitter">
          <i class="fab fa-instagram"></i>
          </a>
        <a href="http://tinyurl.com/yckave58" target="_blank" class="social-twitter">
      <i class="fab fa-linkedin-in"></i>
     </a>

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

    <div class="col-lg-2 col-sm-6 col-6">
    <div class="footer-widget pl-35">
    <h3>Company Info</h3>
    <ul class="footer-bg-clr">
    <li>
    <a href="{{route('aboutus')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  About us
    </a>
    </li>
    <li>
    <a href="{{route('visionmission')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Vision & Mission</a>
    </li>
    <li>
    <a href="{{route('corevalues')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Core Values</a>
    </li>
    <li>
    <a href="{{route('objectives')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Objectives</a>
    </li>
    <li>
    <a href="{{route('Cmddesk')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  CMD's Desk</a>
    </li>

    </ul>
    </div>
    </div>
    <div class="col-lg-2 col-sm-6 col-12">
    <div class="footer-widget pl-35">
    <h3>Achievements</h3>
    <ul class="footer-bg-clr">
    <li>
    <a href="{{route('Completed_Projects')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Completed Projects</a>
    </li>
    <li>
    <a href="{{route('ongoing')}}"><i class="fa-solid fa-caret-right"></i>&nbsp;  Ongoing Projects</a>
    </li>
    <li>
    <a href="#"><i class="fa-solid fa-caret-right"></i>&nbsp;  Upcoming Projects</a>
    </li>
    <li>
    <a href="{{route('iconic_project')}}">  <i class="fa-solid fa-caret-right"></i>&nbsp;   Iconic Projects</a>
    </li>

      <button  id="appoint-btn">  <a style="color: white;" class="nav-link" href="{{ route('admin.login') }}">Login</a></button>
    </ul>
    </div>
    </div>
    <div class="col-lg-3 col-sm-6 col-12">
    <div class="footer-widget">
    <h3>Contacts</h3>
    <ul>
    <li  id="contact_border" >
      <a href="tel:">
      <i id="contact-icon" class="fa-solid fa-phone"></i>

        0674-2541545
      </a>
    </li>
    <li id="contact_border">
    <a  href="mailto:email@xpat.com">
    <i id="contact-icon" class="fa-solid fa-envelope"></i>

    ophwc.od@nic.in
    </a>
    </li>

    <li id="contact_border">
    <a  href="3">
    <i id="contact-icon" class="fa-solid fa-location-dot"></i>

    The Odisha State Police Housing and Welfare Corporation
    Janpath, Bhoi nagar
    Bhubaneswar-751022
    </a>
    </li>
    </ul>
    </div>
    </div>


    <div class="col-lg-3 col-sm-12 col-12">
    <div class="footer-widget">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3742.119735434149!2d85.8390012750967!3d20.295310481176745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a1909f098eae211%3A0x2197f2ff1f402f4c!2sOdisha%20State%20Police%20Housing%20and%20Welfare%20Corporation!5e0!3m2!1sen!2sin!4v1698916522140!5m2!1sen!2sin" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    </div>
    </div>
    </div>
    <div class="footer-bottom">
    <div class="container">

    <center>
    <div class="col-lg-12">
    <div class="copyright-text">
    <p>&copy Copyright 2024 OPHWC || All Rights Reserved</p>
    </div>
    </div>
    </center>

    </div>
    </div>
    </footer>
        <div id="chatbot" class="main-card collapsed collapsed_new">
            <button id="chatbot_toggle">
              <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15 4v7H5.17l-.59.59-.58.58V4h11m1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="display:none"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
          </svg>
            </button>
            <div class="main-title">
              <div >
                <svg viewBox="0 0 640 512"  title="robot">
                  <path fill="currentColor" d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z" />
                </svg>

              </div>
              <span>Welcome To OPHWC</span>

            </div>
            <div class="chat-area" id="message-box">
            </div>
            <div class="line-chat"></div>
            <div class="input-div">
              <input class="input-message" name="message" type="text" id="message" placeholder="Type your message ..." />
              <button class="input-send" onclick="send()">
                <svg style="width:24px;height:24px">
                  <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z" />
                </svg>
              </button>
            </div>
          </div>

    </div>

  <script>
  $(document).ready(function(){
    $('#imageCarousel').carousel();

    $('#imageCarousel').on('slid.bs.carousel', function () {

    });
  });
</script>






     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="js/jquery-3.3.1.slim.min.js"></script>
   <script src="js/popper.min.js"></script>
   <script src="js/bootstrap.min.js"></script>

   <script src="js/jquery-3.3.1.min.js"></script>
 <script src="js/wow.min.js"></script>



   <script type="text/javascript" src="js/rev-slider/jquery.themepunch.revolution.min.js"></script>
   <script type="text/javascript" src="js/rev-slider/jquery.themepunch.tools.min.js"></script>

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

	<script type="text/javascript" src="js/jquery.counterup.min.js"></script>
	  <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>

     <script>
  $(document).ready(function($) {
    var $element = $('.counter');
    if ($element.length > 0) {
      $element.counterUp({
        delay: 10,
        time: 1000
      });
    }
  });
</script>

<script>
  $('.testimonial-slider').slick({
    slidesToShow: 3,
    dots: false,
    arrows: true,
    autoplay: true,  // Ensure autoplay is set to true
    autoplaySpeed: 3000,
    prevArrow: '<i class="fas fa-chevron-left prev"></i>',
    nextArrow: '<i class="fas fa-chevron-right next"></i>',
    swipe: true,
    swipeToSlide: true,
    responsive: [
      // Responsive settings here
    ]
  });
</script>



<script>
  $(document).ready(function(){
    function initializeSlider() {
      $('.client-slider_new').slick({
        slidesToShow: 6,
        slidesToScroll: 3,
        dots: false,
        arrows: true,
        autoplay: true,
        autoplaySpeed: 3000,
        swipe: true,
        swipeToSlide: false,
        responsive: [
          // Add responsive settings if needed
        ]
      });
    }

    // Initial setup
    initializeSlider();

    // Media query for screen width less than or equal to 768px
    const mediaQuery = window.matchMedia('(max-width: 768px)');

    function handleMediaQuery(event) {
      if (event.matches) {
        // Activate the slider with different settings
        $('.client-slider_new').slick('unslick');
        $('.client-slider_new').slick({
          slidesToShow: 3,
          slidesToScroll: 3,
          dots: false,
          arrows: true,
          autoplay: true,
          autoplaySpeed: 3000,
          swipe: true,
          swipeToSlide: false,
          responsive: [
            // Add responsive settings if needed
          ]
        });
      } else {
        // Re-initialize the slider with the default settings
        $('.client-slider_new').slick('unslick');
        initializeSlider();
      }
    }

    // Attach the listener
    mediaQuery.addListener(handleMediaQuery);

    // Call the initial check
    handleMediaQuery(mediaQuery);
  });
</script>

<script>
  $(document).ready(function(){
    $('.client-slider').slick({
      slidesToShow: 6,

      dots: false,
      arrows: true,
      autoplay: true,
      autoplaySpeed: 3000,
      swipe: true,
      swipeToSlide: true,
      responsive: [

      ]
    });
  });
</script>
<script>
    function togglePausePlay() {
        let pauseButton = document.getElementById('pauseButton');
        let playButton = document.getElementById('playButton');

        if (pauseButton.style.display !== 'none') {
            // Pause button is visible, hide it and show play button
            pauseButton.style.display = 'none';
            playButton.style.display = 'inline-block';
            $('.client-slider').slick('slickPause');
        } else {
            // Play button is visible, hide it and show pause button
            pauseButton.style.display = 'inline-block';
            playButton.style.display = 'none';
            $('.client-slider').slick('slickPlay');
        }
    }
</script>


<script>
    function a(){
        let x = document.getElementById('p2');
        let y = document.getElementById('t1');
        let z = document.getElementById('t2')
        if( x.type == "password"){
            x.type = "text";
            y.style.display = "block";
            z.style.display = "none";

        }
        else{
            x.type = "password"
            y.style.display = "none";
            z.style.display = "block";

        }

     }


</script>

<script>
  $('.project-slider').slick({
    slidesToShow: 4,
    dots: false,
    arrows: true,
    autoplay: true,  // Ensure autoplay is set to true
    autoplaySpeed: 3000,
    swipe: true,
    swipeToSlide: true,
    responsive: [
      // Responsive settings here
    ]
  });
</script>

<script>
  $('.ticker-slider').slick({
    speed: 500,
    arrows: false,
    fade: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    prevArrow: '<i class="fas fa-chevron-left tab-prev"></i>',
    nextArrow: '<i class="fas fa-chevron-right tab-next"></i>',
    dots: false,
    autoplay: true  // Ensure autoplay is set to true
  });
</script>

<script>
  window.addEventListener('load', function() {
    baguetteBox.run('.gallery');
  });
</script>

<script src="js/wow.min.js"></script>
<script>
  new WOW().init();
</script>

<script>
  $('.blog-slider').slick({
    speed: 500,
    slidesToShow: 2,
    slidesToScroll: 1,
    autoplay: true,  // Ensure autoplay is set to true
    autoplaySpeed: 2000,
    dots: true,
    responsive: [
      // Responsive settings here
    ]
  });
</script>


<script>
    $(document).ready(function(){
	   $(window).scroll(function(){//scroll--top---indicator---arrow-jquery----//
		   if($(window).scrollTop() > 600){//---position---600----px scroll-----//
			   $("#scrollUp").fadeIn();
		   }
		   else{
			   $("#scrollUp").css("display","none");
		   }
	   });
	});

   </script>




  	  <script>
 $(document).ready(function(){
     	$(window).scroll(function(){
		if($(window).scrollTop() < 90){ //-navbar-----scrolltop---fixed---jquery--/
			$('#navigation').removeClass('navbar-scroll');
		}
		else {
		   $('#navigation').addClass('navbar-scroll');
		}
});

 });

</script>
<script type="text/javascript">
				jQuery(document).ready(function() {
					   // revolution slider
        var revapi;
        revapi = jQuery( '#revolution-slider-half' )
            .revolution( {
                delay:9000,
                startwidth:1200,
                startheight:630,
                onHoverStop: "on",
                thumbWidth: 100,
                thumbHeight: 50,
                thumbAmount: 3,
                touchenabled: "on",
                stopAtSlide: -1,
                stopAfterLoops: -1,
                touchenabled: "on",
                navigationType:"none",
                navigationArrows:"solo",
                navigationStyle:"preview1",
                touchenabled:"on",
                onHoverStop:"on",
                swipe_velocity: 0.7,
                swipe_min_touches: 1,
                swipe_max_touches: 1,
                drag_block_vertical: false,
                keyboardNavigation:"on",
                navigationHAlign:"center",
                navigationVAlign:"bottom",
                navigationHOffset:0,
                navigationVOffset:20,
                soloArrowLeftHalign:"left",
                soloArrowLeftValign:"center",
                soloArrowLeftHOffset:20,
                soloArrowLeftVOffset:0,
                soloArrowRightHalign:"right",
                soloArrowRightValign:"center",
                soloArrowRightHOffset:20,
                soloArrowRightVOffset:0,
                dottedOverlay: "",
                fullWidth: "on",
                stopAfterLoops:0,
                stopAtSlide:1,
                shadow: 0
            } );

            revapi = jQuery( '#revolution-slider-full' )
            .revolution( {
                delay:9000,
                startwidth:960,
                startheight:730,
                onHoverStop: "on",
                thumbWidth: 100,
                thumbHeight: 50,
                thumbAmount: 3,
                touchenabled: "on",
                stopAtSlide: -1,
                stopAfterLoops: -1,
                touchenabled: "on",
                navigationType:"none",
                navigationArrows:"solo",
                navigationStyle:"preview1",
                touchenabled:"on",
                onHoverStop:"on",
                swipe_velocity: 0.7,
                swipe_min_touches: 1,
                swipe_max_touches: 1,
                drag_block_vertical: false,
                keyboardNavigation:"on",
                navigationHAlign:"center",
                navigationVAlign:"bottom",
                navigationHOffset:0,
                navigationVOffset:20,
                soloArrowLeftHalign:"left",
                soloArrowLeftValign:"center",
                soloArrowLeftHOffset:20,
                soloArrowLeftVOffset:0,
                soloArrowRightHalign:"right",
                soloArrowRightValign:"center",
                soloArrowRightHOffset:20,
                soloArrowRightVOffset:0,
                dottedOverlay: "",
                fullWidth: "on",
                fullScreen:"on",
                stopAfterLoops:0,
                stopAtSlide:1,
                shadow: 0
            } );

            // revolution slider ver 2
            var revext=jQuery;
            var revapi;
            revext(document).ready(function() {
                if(revext("#rev-commerce").revolution == undefined){
                    revslider_showDoubleJqueryError("#rev-commerce");
                }else{
                        revapi = revext("#rev-commerce").show().revolution({
                        sliderType:"standard",
                        jsFileLocation:"revolution/js/",
                        sliderLayout:"auto",
                        dottedOverlay:"none",
                        delay:9000,
                        navigation: {
                        keyboardNavigation:"off",
                        keyboard_direction: "horizontal",
                        mouseScrollNavigation:"off",
                        mouseScrollReverse:"default",
                        onHoverStop:"on",
                        touch:{
                        touchenabled:"on",
                        swipe_threshold: 75,
                        swipe_min_touches: 50,
                        swipe_direction: "horizontal",
                        drag_block_vertical: false
                        }
                        ,
                        arrows: {
                        style:"gyges",
                        enable:true,
                        hide_onmobile:false,
                        hide_onleave:false,
                        tmp:'',
                        left: {
                        h_align:"right",
                        v_align:"bottom",
                        h_offset:160,
                        v_offset:0
                        },
                        right: {
                        h_align:"right",
                        v_align:"bottom",
                        h_offset:80,
                        v_offset:0
                        }
                        }
                        },
                        responsiveLevels:[1240,1024,778,480],
                        visibilityLevels:[1240,1024,778,480],
                        gridwidth:[1200,1024,778,480],
                        gridheight:[600,600,600,600],
                        lazyType:"single",
                        parallax: {
                        type:"scroll",
                        origo:"slidercenter",
                        speed:400,
                        levels:[5,10,15,20,25,30,35,40,45,46,47,48,49,50,51,55],
                        type:"scroll",
                        },
                        shadow:0,
                        spinner:"off",
                        stopLoop:"off",
                        stopAfterLoops:-1,
                        stopAtSlide:-1,
                        shuffle:"off",
                        autoHeight:"off",
                        disableProgressBar:"on",
                        hideThumbsOnMobile:"off",
                        hideSliderAtLimit:0,
                        hideCaptionAtLimit:0,
                        hideAllCaptionAtLilmit:0,
                        debugMode:false,
                        fallbacks: {
                        simplifyAll:"off",
                        nextSlideOnWindowFocus:"off",
                        disableFocusListener:false,
                        }
                      });
                    }
                });

				});
			</script>




<script>
        var running = false;
function send() {
  if (running == true) return;
  var msg = document.getElementById("message").value;
  if (msg == "") return;
  running = true;
  addMsg(msg);
  //DELEAY MESSAGE RESPOSE Echo
  window.setTimeout(addResponseMsg, 1000, msg);
}
function addMsg(msg) {
  var div = document.createElement("div");
  div.innerHTML =
    "<span style='flex-grow:1'></span><div class='chat-message-sent'>" +
    msg +
    "</div>";
  div.className = "chat-message-div";
  document.getElementById("message-box").appendChild(div);
  //SEND MESSAGE TO API
  document.getElementById("message").value = "";
  document.getElementById("message-box").scrollTop = document.getElementById(
    "message-box"
  ).scrollHeight;
}
function addResponseMsg(msg) {
  var div = document.createElement("div");
  div.innerHTML = "<div class='chat-message-received'>" + msg + "</div>";
  div.className = "chat-message-div";
  document.getElementById("message-box").appendChild(div);
  document.getElementById("message-box").scrollTop = document.getElementById(
    "message-box"
  ).scrollHeight;
  running = false;
}
document.getElementById("message").addEventListener("keyup", function (event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    send();
  }
});
 document.getElementById("chatbot_toggle").onclick = function () {
    if (document.getElementById("chatbot").classList.contains("collapsed_new")) {
      document.getElementById("chatbot").classList.remove("collapsed_new")
      document.getElementById("chatbot_toggle").children[0].style.display = "none"
      document.getElementById("chatbot_toggle").children[1].style.display = ""
      setTimeout(addResponseMsg,1000,"Hi, I'm OPHWC Bot, How can i help you today ?")
    }
    else {
      document.getElementById("chatbot").classList.add("collapsed_new")
      document.getElementById("chatbot_toggle").children[0].style.display = ""
      document.getElementById("chatbot_toggle").children[1].style.display = "none"
    }
  }

      </script>
<script>
  $(document).ready(function(){
    $('#imageCarousel').carousel();

    $('#imageCarousel').on('slid.bs.carousel', function () {

    });
  });
</script>


<script>
    let currentPage = 1;
    const rowsPerPage = 9;

    function showPage(pageNumber) {
      const rows = document.querySelectorAll('.integrity > .col-md-4');
      const startIndex = (pageNumber - 1) * rowsPerPage;
      const endIndex = startIndex + rowsPerPage;

      rows.forEach((row, index) => {
        row.style.display = index >= startIndex && index < endIndex ? 'block' : 'none';
      });

      currentPage = pageNumber;
      updatePaginationButtons();
    }

    function previousPage() {
      if (currentPage > 1) {
        showPage(currentPage - 1);
      }
    }

    function nextPage() {
      const totalRows = document.querySelectorAll('.integrity > .col-md-4').length;
      const totalPages = Math.ceil(totalRows / rowsPerPage);

      if (currentPage < totalPages) {
        showPage(currentPage + 1);
      }
    }

    function updatePaginationButtons() {
      const totalRows = document.querySelectorAll('.integrity > .col-md-4').length;
      const totalPages = Math.ceil(totalRows / rowsPerPage);
      const paginationContainer = document.getElementById('pagination-container');

      // Clear existing page buttons
      const pageButtons = paginationContainer.querySelectorAll('button.page-number');
      pageButtons.forEach(button => button.remove());

      for (let i = 1; i <= totalPages; i++) {
        const button = document.createElement('button');
        button.textContent = i;
        button.className = 'page-number';
        button.onclick = function () {
          showPage(i);
        };
        paginationContainer.insertBefore(button, paginationContainer.children[paginationContainer.children.length - 1]);
      }
    }

    // Initial display
    showPage(1);
  </script>
<!-- multi photo after clicking -->
<script>
        $('[data-fancybox="gallery"]').fancybox({
          buttons: [
            "slideShow",
            "thumbs",
            "zoom",
            "fullScreen",
            "download",  // Make sure "download" is included
            "share",
            "close"
          ],
          loop: false,
          protect: true
        });
            </script>
@endsection