@extends('layouts.admin-app')
@section('content')
<style>
  .swiper {
    position: relative;

    margin-top: -12px;
  }

  .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
  }


  .swiper-slide img {
    width: 72%;
    object-fit: cover;
    border-radius: 18px;
    height: 375px;

  }
.container_new{
  --container-height: 600;
    --angle: 20;
    margin: -22px;
    width: 141%;
    overflow: hidden;
    box-shadow: 4px 4px 4px gray;
    position: relative;
    --skew-angle: calc(var(--angle) * 1deg);
    --skew-angle-neg: calc(var(--angle) * -1deg);
    --skew-diff: calc(var(--container-height) * tan( var(--skew-angle)));
    --skew-diff-px: calc(var(--skew-diff) * 1px);
    --container-height-px: calc(var(--container-height) * 1px);
    --skew-diff-half: calc((var(--skew-diff) / 2) * 1px);
    --skew-diff-half-neg: calc((var(--skew-diff) / 2) * -1px);
    height: 363px;
}
.container_new .skewed{
  overflow: hidden;
    width: calc(51% + var(--skew-diff-half));
    position: absolute;
    transform: skew(var(--skew-angle-neg));
}
.container_new .left.skewed{
  left:var(--skew-diff-half-neg);
}
.container_new .right.skewed{
  right:var(--skew-diff-half-neg);
}
.container_new .left.unskewed{

  background: linear-gradient(to left, #613013, #e0a072);
    transform: skew(var(--skew-angle));
    height: var(--container-height-px);
    left: var(--skew-diff-half);
    position: relative;
}
.container_new .right.unskewed{

    transform: skew(var(--skew-angle));
    left: var(--skew-diff-half-neg);
    position: relative;
    height: 579px;
    background: url(img/DSC_5494.JPG);
    background-size: cover;
    left: -77px;
    margin-left:-150px;
    margin-top: -97px;
}



.text{
  display: flex;
    align-items: center;
    color: #fff;
    font-size: 20px;
    padding: 25px;
    padding-right: var(--skew-diff-px);
}
.cmd-meess {
      position: relative;
      display: inline-block;
    }

    .heading_blue {
      cursor: pointer;
    }

    .cmd-meess hr {
      position: absolute;
      width: 46%;
      border: none;
      height: 2px;
      background-color: white;
      top: 12px;
      transform: scaleX(0);
      transform-origin: bottom left;
      transition: transform 0.3s ease-in-out;
    }

    .cmd-meess:hover hr {
      transform: scaleX(1);
      transform-origin: bottom right;
    }
    .cmd-meess p{
      font-size: 12px;
      letter-spacing: 1px;
      text-align: justify;
      margin-top: 18px;
      color: white;
    }
    .cmd-designation{
    margin-top: 33px;
    }
    .cmd-designation h5{
      font-size: 12px;
    color: white;
    letter-spacing: 1px;

    }
    .cmd-meess h3{
    color: white;

    }
    .cmd-meess h4{
      font-size: 18px;
      letter-spacing:1px;
       color: white;
    }

    .cmd-designation h6{
      letter-spacing: 1px;
    color: white;
    font-size: 11px!important;

    }
    @media (max-width: 1200px){
      .cmd-meess h4{
        font-size: 16px !important;
      }
      .cmd-meess h3{
        font-size: 17px !important;
      }

      .cmd-meess hr {

      width: 58% !important;
      top: 6px !important;

    }
    .cmd-meess p{
      font-size: 11px !important;
    }
    .container_new .skewed {

    width: calc(55% + var(--skew-diff-half));
  }
    }

    @media (max-width: 768px){
      .cmd-meess h3{
        font-size: 13px !important;
      }
      .cmd-meess h4{
        font-size: 14px !important;
      }
      .cmd-meess p{
      font-size: 13px !important;
      margin-top: 38px;
      line-height: 2.0;
    }
    .cmd-designation h5{
      font-size: 11px;
    }
    .cmd-designation{
    margin-top: 14px;
    }
    .container_new .skewed{

    width: calc(55% + var(--skew-diff-half));

    }
  }


  .cmdsm-card .card-body{
    background: linear-gradient(to left, #613013, #e0a072);
  }


    .latestArea_new {
  background: white;
    color: black;
    height: 363px;

    box-shadow: 4px 4px 4px gray;


  }


  .backgroundimagetransp {
    background-image: url("img/background23.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: #ececee;

	overflow:hidden;
  }

  .backgroundimagetransp #modalcross{
    font-weight: bold;
    margin-top: -12px;
    font-size: 18px;
    color: brown;
  }
  .backgroundimagetransp .modal-body p{
    margin-top: 14px;
    margin-bottom: 1px;
    font-size: 19px;
color: green;
    text-align: center;
  }


  .backgroundimagetransp::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    z-index: -1;
    opacity: 0.6;
    background-color: #ececee;
}

  .backgroundimagetransp_new {


    background: url(img/building-4.png);
    background-size:cover;
    height: 272px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    margin-bottom: 0px;
  }
  .backgroundimagetransp_new .clientdesign{
    background: white;
    padding: 0px 24px;
    height: 233px;
    box-shadow: 4px 4px 4px black;
  }
  @media (max-width:768px)
{
  .backgroundimagetransp_new .clientdesign{
    height: 199px;
  }
  .backgroundimagetransp_new{
    height: 227px;
  }

}
  .backgroundimagetransp #row_1 {
    margin-bottom: 30px;
  }

  .about-text p {
    color: black;
    letter-spacing: 1px;
    text-align: justify;
  }

  .service-style-three {
    background-image: url("img/background23.png");

    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
  }
  .service-style-three .panel-thumbnail{
    border: 1px solid brown;
    padding: 5px;
  margin-top: 10px;

  border-top-left-radius: 20%;

  border-bottom-right-radius: 20%;

  }
  .service-style-three .panel-thumbnail .caption{
text-align: center;
color: green;
font-weight: 500;
  }
  .service-style-three .cp_new{
    font-size:35px;
    margin-top:-1px;
    color: #b56447ff;
  }
  .service-style-three #cp-2{
    padding:23px;
top:-83px;
 bottom:360px;
  width:3%;
   opacity:0.7;
    border:4px double #b56447ff;
    left:89%
  }

  .service-style-three #cp-1{
    padding:23px;
 top:-83px;
 bottom:360px;
 width:3%;
opacity:0.7;
border:4px double #b56447ff;
  }
  @media (max-width: 768px){
.service-style-three .cp_new{

font-size:21px !important;
}
.service-style-three #cp-2{
padding: 16px !important;
top: -62px !important;
bottom: 106% !important;

left: 78% !important;
}
.service-style-three #cp-1{
padding: 16px !important;
top: -62px !important;
bottom: 106% !important;

}
  }

  @media (max-width: 1200px){
    .service-style-three .cp_new{

font-size:21px !important;
}
.service-style-three #cp-2{
padding: 16px !important;
top: -60px !important;
bottom: 109% !important;

left: 85%;
}
.service-style-three #cp-1{
padding: 16px !important;
top: -60px !important;
bottom: 109% !important;

}
}
  .latestArea {
    background: white;
    color: black;
    margin-bottom: -16px;
    box-shadow: 0px -1px 26px -3px white;;
  }


  .top-box {
    padding: 10px 30px 10px;
    float: left;

  }


  .mr-4
  {
    margin-left: -30px;
    margin-top: 134px;
    padding: 27px;
    margin-bottom: 80px;
  }
  @media (max-width: 768px){
    .mr-4{
      margin-left: 24px !important;
    }

  }

  @media (max-width: 990px){
    .mr-4{
      margin-left: 13px !important;
    }

  }


  .latestArea p,
  .latestArea .heading_blue {
    color: black;
  }
  .latestArea .card{
    margin-top: 20px;
  }



  #row_1 .thumbnail_new {
    background: #1abc9c;
  }

  #row_1 .thumbnail_new img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }

  #row_1 .thumbnail_new:hover img {
    opacity: .5;
    border: 2px solid white;
    padding: 5px;
    color: black;
  }

  .panel_thumb_new a {
    color: black;
  }


  .ul-news-section {
    padding-left: 39px;
    position: relative;
  }

  .ul-news-section li {
    font-size: 13px;
    margin-bottom: 27px;
  }

  .ul-news-section li::before {
    background: url(img/news-5.png) ;
    content: "";
    display: block;
    position: absolute;
    width: 35px;
    height: 30px;
    left: 0;
    background-repeat: no-repeat;
    margin-top: 12px;
  }

  .ul-news-section li p a {
    color: #000;
    font-size: 14px;


  }

  .ul-news-section li h6 {
    color: brown;
    margin-top: -10px;
  }

  .counter-section {
    background-color: #f0f0f1;
    padding-top: 15px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.counter-section p {
    color: black;
    font-size: 9px;
    letter-spacing: 1px;
    margin-left: -12px;
}

.counter-section h2 {
    color: white;
    font-size: 22px;
    margin-top: 11px;
}

.counter-section .row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.counter-item {
    text-align: center;
    margin-bottom: 6px;
}
.counter-item img{
  height: 43px;
}

@media (max-width: 768px) {
    .counter-section p {
      margin-left: -10px;
    font-size: 5px;

    font-weight: bold;

    }
}

  @media (min-width: 768px) {


    .carouselPrograms .carousel-inner .active,
    .carouselPrograms .carousel-inner .active+.carousel-item,
    .carouselPrograms .carousel-inner .active+.carousel-item+.carousel-item {
      display: block;
    }

    .carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item,
    .carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
      transition: none;
    }

    .carouselPrograms .carousel-inner .carousel-item-next,
    .carouselPrograms .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }

    .carouselPrograms .carousel-inner .active.carousel-item+.carousel-item+.carousel-item+.carousel-item {
      position: absolute;
      top: 0;
      right: -33.333%;
      z-index: -1;
      display: block;
      visibility: visible;
    }


    .carouselPrograms .active.carousel-item-left+.carousel-item-next.carousel-item-left,
    .carouselPrograms .carousel-item-next.carousel-item-left+.carousel-item,
    .carouselPrograms .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item,
    .carouselPrograms .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item {
      position: relative;
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }


    .carouselPrograms .carousel-inner .carousel-item-prev.carousel-item-right {
      position: absolute;
      top: 0;
      left: 0%;
      z-index: -1;
      display: block;
      visibility: visible;
    }


    .carouselPrograms .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
    .carouselPrograms .carousel-item-prev.carousel-item-right+.carousel-item,
    .carouselPrograms .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item,
    .carouselPrograms .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item {
      position: relative;
      transform: translate3d(100%, 0, 0);
      visibility: visible;
      display: block;
      visibility: visible;
    }
  }


  #revolution-slider-half {
    cursor: pointer;
  }



  @import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
figure.snip0015 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;

  max-height: 220px;
  width: 100%;
  background: #e84949;
  text-align: center;
  border-top-left-radius: 20%;
  border-bottom-right-radius: 20%;

}
@media (max-width: 768px){
  figure.snip0015 {
    max-height: 260px !important;

}
}

figure.snip0015 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

}

@media(max-width:1200px){
  figure.snip0015 img {
    height: 206px;
  }
}

@media(max-width:992px){
  figure.snip0015 img {
    height: 155px;
  }
  .service-style-three .panel-thumbnail .caption p{
    font-size: 14px
  }
}
@media(max-width:768px){
  figure.snip0015 img {
    height: 223px !important;
  }
}
figure.snip0015 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;

}
figure.snip0015 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3em 3em;
  width: 100%;
  height: 100%;

}
figure.snip0015 figcaption::before {
  position: absolute;
  top: 50%;
  right: 30px;
  bottom: 50%;
  left: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: #ffffff;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;

}
figure.snip0015 h5,
figure.snip0015 p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}
figure.snip0015 h5 {
  word-spacing: 3px;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-transform: translate3d(0%, 50%, 0);
  transform: translate3d(0%, 50%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  margin-top: 55px;
  color: white;
}
@media(max-width:768px){
  figure.snip0015 h5 {
    margin-top: 51px;
    font-size: 13px;
  }
}
figure.snip0015 h5 span {
  font-weight: 800;
}
figure.snip0015 p {
  font-weight: 200	;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  font-size: 13px;
}
figure.snip0015 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0015:hover img {
  opacity: 0.35;

}
figure.snip0015:hover figcaption h5 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0015:hover figcaption p {
  opacity: 0.9;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;

}

#demo .client_new{

   font-size:35px;
    margin-top:-1px;
    color: #b56447ff;
}

#demo #client_crs{

  padding:23px;
   top:-83px;
    bottom:360px;
     width:3%;
      opacity:0.7;
       border:4px double #b56447ff;
       left:89%
}

#demo #client_crs_new{
   padding:23px;
    top:-83px;
    bottom:360px;
    width:3%;
   opacity:0.7;
   border:4px double #b56447ff;
}
@media (max-width: 768px){
  #demo .client_new{

font-size:21px !important;
}
#demo #client_crs{
  padding: 16px !important;
  top: -62px !important;
  bottom: 106% !important;

  left: 78% !important;
}
#demo #client_crs_new{
  padding: 16px !important;
  top: -62px !important;
  bottom: 106% !important;

}
}

@media (max-width: 1200px){
  #demo .client_new{

font-size:21px !important;
}
#demo #client_crs{
  padding: 16px !important;
  top: -62px !important;
  bottom: 106% !important;

  left: 85%;
}
#demo #client_crs_new{
  padding: 16px !important;
  top: -62px !important;
  bottom: 106% !important;

}
}

#demo .thumbnail_client{
  border: 1px solid #b56447ff;

}

#demo .thumbnail_client .caption{

  padding: 15px;
}

#demo .thumbnail_client .caption p{

  color: black;
}

#demo .client_img {
  padding: 6px;
  transition: transform 0.3s ease-in-out;
}


  #row_1 .client_head img {
    opacity: 10;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

    color: black;
  }

  #row_1 .client_head:hover img {
    opacity: 0.7;
    padding: 8px;
    color: black;
    background: black;

  }

  .bgbox{
    background: grey;
    border: black;
  }

  marquee.marquee-update{
    color:black;
    font-size: 13px;
    font-weight: 600;
    word-spacing: 6px;
}

.update {
    bottom: 0;
    margin: 0;
    padding: 0px;
    width: 100%;
    background: linear-gradient(90deg, rgba(181,100,71,1) 46%, rgba(255,255,255,1) 100%);
    display: inline-flex;
    white-space: nowrap;
}
#count4{
  border-radius: 57%;
  background: #488500;
  padding: 17px 10px;
}

/* ribbon glow */

@-webkit-keyframes flow {
	0% { left:-20px;opacity: 0;}
	50% {left:100px;opacity: 0.3;}
    100%{ left:180px;opacity: 0;}
}
@keyframes flow {
	0% { left:-20px;opacity: 0;}
	50% {left:100px;opacity: 0.3;}
    100%{ left:180px;opacity: 0;}
}

.ribbon{
background: green;
    padding: 7px;
    /*width: 178px;*/
    width:31%;
    text-align: center;
    z-index: 100;
    clip-path: polygon(100% 0%, 94% 50%, 100% 100%, 0 99%, 0px 50%, 0 0);
    color: white;
    margin-bottom: -34px;
    /*margin-top: 56px;*/
     margin-top:-41px;
    position: relative;
    /*margin-left: -171px;*/
     margin-left: -11px;
}
.ribbon_new{
  background: green;
    padding: 12px;
    width: 78%;
    text-align: center;
    clip-path: polygon(100% 0%, 94% 50%, 100% 100%, 0 99%, 0px 50%, 0 0);
    color: white;
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 12px;

}
@media(max-width:992px){
  .ribbon_new{

    width: 20%;
  }
}
@media(max-width:660px){
  .ribbon_new{

    width: 30%;
  }
}
@media(max-width:490px){
  .ribbon_new{

    width: 52%;
  }
}
@media(max-width:385px){
  .ribbon_new{

    width: 85%;
  }
}
@media(max-width:320px){
  .ribbon_new{

    width: 100%;
  }
}
@media(max-width:290px){
  .ribbon_new{

    width: 135%;
  }
}
#demo .marquee-full-width {
	width: 100%;
	position: relative;
}
 #demo .marquee-box {
	overflow-x: hidden !important;
}
 #demo .marquee {
	display: flex;
	flex-direction: row;
	align-items: center;
	animation: marqueescroll 10s linear 0s infinite;
	animation-play-state: running;
	animation-delay: 0s;
	animation-direction: normal;
}
 #demo .marquee-box:hover div {
  animation-play-state: paused;
}
 #demo .marquee-box:active div {
	animation-play-state: running;
}
@keyframes marqueescroll {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}
.marquee-wrapper {
  display: flex;
  animation: marqueescroll 20s linear infinite;
}

.five-t-inbox {
    background: url(img/shape4-svg.png) no-repeat;
    /*background-size: cover;*/
    min-height: 85px;
    position: relative;
}

.sec-first {
    width: 45%;
    margin-left: 11px;
}
.five-t-logo {
    display: flex;
    align-items: center;
    height: 45px;
}
.five-t-logo_new {
  display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background-color: white;
    padding-bottom: 3px;
}
.five-t-logo img{
  height: 36px;
    margin-top: -7px;
}
.sec-first .five-t-listing {
  margin-top: -60px !important;
    margin-left: 44px;
    justify-content: center;
    position: relative;
    z-index: 100;
}
.item-list ul {
    padding: 0;
    margin-bottom: 0;
    margin-top: 15px;
    float: left;
    width: 100%;
    list-style-type: none;
}
.item-list_new ul {
  padding: 0;
    margin-bottom: 0;
    margin-top: 14px;
    float: left;
    width: 100%;
    list-style-type: none;
    position: relative;
    z-index: 100;
}

.five-t-listing {
    display: flex;
    align-items: center;
    margin: 0;

    transform: translateY(-30px);
}
.five-t-listing_new {
    display: flex;
    align-items: center;
    margin: 0;
    transform: translateY(-30px);
    justify-content: center;
}

.five-t-listing li {
    display: inline-block;
    text-align: center;
    margin: -1px 10px;
}
.five-t-listing_new li {
  display: inline-block;
    text-align: center;
    margin: -1px 6px;
}

.five-t-listing li > span:nth-child(1) {
    display: block;
    background-color: white;
    border-radius: 50%;
    width: 51px;
    height: 45px;
    margin: 21px auto;
    box-sizing: border-box;
    padding: 9px;
}
.five-t-listing_new li > span:nth-child(1) {
    display: block;
    background-color: white;
    border-radius: 50%;
    width: 42px;
    height: 38px;
    margin: 23px auto;
    box-sizing: border-box;
    padding: 9px;
}

.five-t-listing li > span:nth-child(1) img {
    transition: transform 0.8s ease;
}

.five-t-listing li:hover > span:nth-child(1) img {
    transform: rotate(56deg); /* Rotate the image 360 degrees on hover */
}

.five-t-listing li span:nth-child(2) {
    float: inherit;
    margin-top: 5px;
}
.five-t-listing li a {
    margin-top: -25px;
    display: block;
    color: #343434;
    font-size: 11px;
}

.five-t-listing_new li > span:nth-child(1) img {
    transition: transform 0.8s ease; /* Add a smooth transition effect */
}

.five-t-listing_new li:hover > span:nth-child(1) img {
    transform: rotate(60deg); /* Rotate the image 360 degrees on hover */
}

.five-t-listing_new li span:nth-child(2) {
    float: inherit;
    margin-top: 5px;
}
.five-t-listing_new li a {
    margin-top: -25px;
    display: block;
    color: #343434;
    font-size: 8px;
}

.about-text .moretext {
  display: none;
        }

  .about-text .viewmore-button {
    display: none;
  }

        .slick-prevv, .slick-nextt {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 33%;
    display: block;
    width: 20px;
    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-prevv:before {
    content: '←';
}
.slick-prevv:before, .slick-nextt:before {
    font-family: 'slick';
    font-size: 26px;
    line-height: 1;
    opacity: .75;
    color:black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


   .sec-second {
    width: 48%;
    padding-left: 0;
    float: right;
    /*margin-top: -31px;*/
      margin-top: -32px;

    padding-left: 27px;
}
.count5timg{
  height: 30px;
}

#block-5tbottom {
  display: inline-block;
    position: absolute;
    bottom: 3px;
    left: 170px;
}

#block-5tbottom p:last-child a {
    padding: 2px 12px;}
#block-5tbottom p {
  margin: 59px;
    margin-bottom: -11px;
    margin-left: -58px;
    padding: 7px;
}
#block-5tbottom a {font-size: 11.7px;}

#block-5tbottom p {

    float: left;
}

.sec-second p{
margin-left: -6px;
}

.hide-scrollbar {
    overflow-x: hidden;
    overflow-y: auto;
    }

#carouselExample{
  margin-left: 24px;

}
.construction-gif img{
  width:100%;
    background-size:cover;
    margin-top:-44px;
}
@media (max-width: 768px){
  .construction-gif img{
height: 170px;
}
}

.project-btn a p{
  color:  black;
  margin-top: 28px;
}

.project-btn i {
  display: inline-block;
    transition: transform 0.3s ease;
    animation: moveArrow 1s linear infinite;
}

 #carouselExample1{
  left: 10px;
 }

  /* WebKit-based browsers (Chrome, Safari) */
  .card-body::-webkit-scrollbar {
    width: 12px; /* Set the width of the scrollbar */
  }

  .card-body::-webkit-scrollbar-thumb {
    background-color: #b56447; /* Set the color of the scrollbar thumb */
    border-radius: 6px; /* Set the border radius of the thumb */
  }
  .card-body::-webkit-scrollbar-thumb:hover {
    background-color: #b56447; /* Set the color of the scrollbar thumb */

  }

  .card-body::-webkit-scrollbar-track {
    background-color: #efe3e3; /* Set the color of the scrollbar track */
  }
@media(max-width:768px){
  #revolution-slider-half ul li #rev{
 display: none !important;
}
}
.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;
}
.tp-leftarrow.default {
    z-index: 100;
    cursor: pointer;
    position: relative;
    background: url("img/Picture5.png") no-Repeat 0 0;
    width: 40px;
    height: 40px;
}
.tp-rightarrow.default {
    z-index: 100;
    cursor: pointer;
    position: relative;
    background: url("img/Picture4.png") no-Repeat 0 0;
    width: 40px;
    height: 40px;
}
.carousel-indicators {
  position: absolute;
    top: 92%;
    transform: translateY(-50%);
    left: 124px;
    z-index: 15;
    width: 39%;
    }

    .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;
    }
    .mrqanc{
        display:inline;
    }
</style>
<div class="slider-section">
    <!-- revolution slider -->
    <section class="no-top no-bottom" aria-label="section-slider">
        <!-- home -->
        <div class="fullwidthbanner-container">
            <div id="revolution-slider-half">
                <ul>
                    @if(count($carousel) == 0)
                        <li data-transition="random" data-slotamount="10" data-masterspeed="1200" data-delay="5000" data-autoplay="true">
                            <!--  BACKGROUND IMAGE -->
                            <img src="{{asset('img/gallery-3(1).png')}}" alt="" data-start="0" data-bgposition="center center" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-bgfit="100" data-bgfitend="100" data-bgpositionend="center center" />
                            <div class="tp-caption slide_mask  sfl tp-resizeme " data-x="0" data-y="0" data-speed="500" data-start="10" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" style=" max-width: auto; max-height: auto; white-space: nowrap;"></div>
                            <div class="tp-caption slide-big-heading sft" id="rev" data-x="30" data-y="170" data-speed="800" data-start="400" data-easing="easeInOutExpo" data-endspeed="450" style="font-size:45px;margin-top:20px;">
                               The Road <BR> To Success
                            </div>
                            <div class="tp-caption slide-sub-heading sft" id="rev" data-x="30" data-y="320" data-speed="1000" data-start="800" data-easing="easeOutExpo" data-endspeed="400">
                            Is Always Under Construction<BR>
                            </div>
                        </li>
                    @else
                        @foreach($carousel as $data)
                            <li data-transition="random" data-slotamount="10" data-masterspeed="1200" data-delay="5000" data-autoplay="true">
                                <!-- BACKGROUND IMAGE -->
                                <img src="{{ asset('image/'.$data->image) }}" alt="" data-start="0" data-bgposition="center center" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-bgfit="100" data-bgfitend="100" data-bgpositionend="center center" />
                                <div class="tp-caption slide_mask sfl tp-resizeme " data-x="0" data-y="0" data-speed="500" data-start="10" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" style=" max-width: auto; max-height: auto; white-space: nowrap;"></div>
                                <div class="tp-caption slide-big-heading sft" id="rev" data-x="30" data-y="170" data-speed="800" data-start="400" data-easing="easeInOutExpo" data-endspeed="450" style="font-size:45px;margin-top:80px;">{{$data->title}}</div>
                                <div class="tp-caption slide-sub-heading sft" id="rev" data-x="30" data-y="320" data-speed="1000" data-start="800" data-easing="easeOutExpo" data-endspeed="400">{{$data->subtitle}}</div>
                            </li>
                        @endforeach
                    @endif
                </ul>
            </div>
        </div>
       <!-- home end -->
    </section>
    <!-- revolution slider end -->
    <div class="scroll"> <a href="#content2" class="go-down"></a></div>
</div>
<!-- 5t section start for large screen -->
<section class="five-t-inbox d-none d-sm-none d-md-none d-lg-block d-xl-block">
    <div class="sec-first ">
        <div class="five-t-logo ">
            <!--<img src="{{ asset ('img/5t-log.png')}}" alt="five T Vision ">-->
        </div>
        <div class="item-list">
                <!--<ul class="five-t-listing">-->
                <!--    <li>-->
                <!--        <span>-->
                <!--            <img src="{{ asset ('img/transparency.png')}}" alt="" typeof="Image" width="33" height="22">-->
                <!--        </span>-->
                <!--        <span><a href="/en/transparency" hreflang="en">Transparency</a></span>-->
                <!--    </li>-->
                <!--    <li>-->
                <!--        <span>-->
                <!--            <img src="{{ asset ('img/technology.png')}}" alt="" typeof="Image" width="32" height="27">-->
                <!--        </span>-->
                <!--        <span><a href="/en/transparency" hreflang="en">Technology</a></span>-->
                <!--    </li>-->
                <!--    <li>-->
                <!--        <span>-->
                <!--            <img src="{{ asset ('img/teamwork.png')}}" alt="" typeof="Image" width="32" height="27">-->
                <!--        </span>-->
                <!--        <span><a href="/en/transparency" hreflang="en">Teamwork</a></span>-->
                <!--    </li>-->
                <!--    <li>-->
                <!--        <span>-->
                <!--            <img src="{{ asset ('img/time-limit.png')}}" alt="" typeof="Image" width="32" height="27">-->
                <!--        </span>-->
                <!--        <span><a href="/en/transparency" hreflang="en">Time</a></span>-->
                <!--    </li>-->
                <!--    <li>-->
                <!--        <span>-->
                <!--            <img src="{{ asset ('img/transformation.png')}}" alt="" typeof="Image" width="32" height="27">-->
                <!--        </span>-->
                <!--        <span><a href="/en/transparency" hreflang="en">Transformation</a></span>-->
                <!--    </li>-->
                <!--</ul>-->
        </div>
        
              <div class="content" style="width:100%;">
            <div class="ribbon"><img src="{{ asset('img/ezgif.com-crop (2).gif')}}" alt="" width="14%">Announcement</div>
            <marquee behavior="" direction="left" onmouseover="this.stop();" onmouseout="this.start();"style="width:100%;">
                @if(!empty($announcements) && count($announcements) > 0)
                    @foreach($announcements as $announcement)
                        <a target="_blank" href="{{$announcement->ann_url}}">
                            <p class="mrqanc" style="color: black;  letter-spacing:1px; word-spacing:2px;font-size:12px; line-height:31px;">
                                <img src="{{ asset('img/new-gif.gif') }}" height="25px;">{{$announcement->ann_name}}...</p>
                        </a>
                    @endforeach
                @else
                    <a target="_blank" href="">
                        <p style="color: black; letter-spacing:1px; word-spacing:2px;font-size:12px;">
                            <img src="{{ asset('img/new-gif.gif') }}" height="25px;">To Be Announce Soon ...</p>
                    </a>
                @endif
            </marquee>
        </div>
    </div>
    <div class="sec-second">
        <div class="row">
            <div col-lg-6>
    <div id="block-5tbottom" class="block block-block-content block-block-content7ec3597c-7c51-4dec-a975-6a239fa54242 d-none d-sm-none d-md-none d-lg-block d-xl-block">
        <!--<div class="content">-->
        <!--    <div class="ribbon"><img src="{{ asset('img/ezgif.com-crop (2).gif')}}" alt="" width="14%">Announcement</div>-->
        <!--    <marquee behavior="" direction="left" onmouseover="this.stop();" onmouseout="this.start();"style="width:100%;">-->
        <!--        @if(!empty($announcements) && count($announcements) > 0)-->
        <!--            @foreach($announcements as $announcement)-->
        <!--                <a target="_blank" href="{{$announcement->ann_url}}">-->
        <!--                    <p style="color: white; letter-spacing:1px; word-spacing:2px;font-size:12px">{{$announcement->ann_name}}</p>-->
        <!--                </a>-->
        <!--            @endforeach-->
        <!--        @else-->
        <!--            <a target="_blank" href="">-->
        <!--                <p style="color: white; letter-spacing:1px; word-spacing:2px;font-size:12px">To Be Announce Soon ...</p>-->
        <!--            </a>-->
        <!--        @endif-->
        <!--    </marquee>-->
        <!--</div>-->
    </div>
</div>
            <div class="col-lg-12 count5timg d-none d-sm-none d-md-none d-lg-block d-xl-block" id="scrollbar-section">
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-2" >
                        <img  class="img-fluid" src="{{ asset ('img/frame-1.png')}}" alt="" style="height: 53px;border-radius:50%">
                        <p style="color: white;font-size:9px;margin-left:4px;"> S/4 Hana</p>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-2 " >
                        <img  class="img-fluid" src="{{ asset ('img/frame-2.png')}}" alt="" style="height: 53px;">
                        <p style="color: white;font-size:9px">Iso Certified</p>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-2 " >
                        <img  class="img-fluid" src="{{ asset ('img/frame-3.png')}}" alt="" style="height: 53px;">
                        <p style="color: white;font-size:9px">Silver Rated PSUs</p>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-2 " >
                        <img  class="img-fluid" src="{{ asset ('img/frame-4.pn')}}g" alt="" style="height: 53px;border-radius:50%">
                        <p style="color: white;font-size:9px">Year Of Exp.</p>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2 col-2 " >
                        <img  class="img-fluid" src="{{ asset ('img/frame-5.png')}}" alt="" style="height: 53px;border-radius:50%">
                        <p style="color: white;font-size:9px;">Annual Turnover</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 5t section end for large screen -->
<!-- 5t section start for small screen -->
<section class="d-block d-sm-block d-md-block d-lg-none d-xl-none" style="margin-bottom: -22px; background: #f0f0f1;" >
    <div class="row">
        <div class="five-t-logo_new col-lg-12 col-md-12 col-sm-12 col-12">
            <img src="{{ asset ('img/5t-log.png')}}" alt="five T Vision " style="width: 100px;margin-top:3px;">
        </div>
    </div>
   <div class="row">
        <div class="item-list_new col-lg-12 col-md-12 col-sm-12 col-12">
            <ul class="five-t-listing_new">
                <li>
                    <span>
                       <img  class="img-fluid" src="{{ asset ('img/transparency.png')}}" alt="" typeof="Image" width="19" height="13">
                    </span>
                   <span><a href="/en/transparency" hreflang="en">Transparency</a></span>
                </li>
                <li>
                    <span>
                       <img  class="img-fluid" src="img/technology.png" alt="" typeof="Image" width="19" height="16">
                    </span>
                    <span><a href="/en/transparency" hreflang="en">Technology</a></span>
                </li>
                <li>
                    <span>
                        <img  class="img-fluid" src="{{ asset ('img/teamwork.png')}}" alt="" typeof="Image" width="19" height="16">
                    </span>
                    <span><a href="/en/transparency" hreflang="en">Teamwork</a></span>
                </li>
                <li>
                    <span>
                       <img  class="img-fluid"  src="{{ asset ('img/time-limit.png')}}" alt="" typeof="Image" width="19" height="16">
                    </span>
                    <span><a href="/en/transparency" hreflang="en">Time</a></span>
                </li>
                <li>
                    <span>
                        <img   class="img-fluid" src="{{ asset ('img/transformation.png')}}" alt="" typeof="Image" width="19" height="16">
                    </span>
                    <span><a href="/en/transparency" hreflang="en">Transformation</a></span>
                </li>
            </ul>
        </div>
    </div>
</section>
<section class="d-block d-sm-block d-md-block d-lg-none d-xl-none">
    <div class="update">
        <div class="ribbon_new">
            <img src="{{ asset('img/ezgif.com-crop (2).gif') }}" alt="" width="14%">Announcement
        </div>
        <marquee behavior="" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
            @if(!empty($announcement) && is_object($announcement) && $announcement->status == 1 && !empty($announcement->ann_name))
                <a target="_blank" href="{{$announcement->ann_url}}">
                    <p style="color: white; letter-spacing:1px; word-spacing:2px;font-size:12px;">
                        
                        {{ $announcement->ann_name }}
                    </p>
                </a>
            @else
                <a target="_blank" href="#">
                    <p style="color: white; letter-spacing:1px; word-spacing:2px;font-size:12px;">
                        To Be Announced Soon ...
                    </p>
                </a>
            @endif
        </marquee>
    </div>
</section>



<section id="counter" class="d-block d-sm-block d-md-block d-lg-none d-xl-none">
    <section class="counter-section">
        <div class="container">
            <div class="row">
                <div class="counter-item">
                    <center>
                        <img class="img-fluid" src="{{ asset ('img/frame-1.png')}}" alt="" style="height: 43px;">
                        <p>SAP</p>
                    </center>
                </div>
                <div class="counter-item">
                  <center>
                    <img class="img-fluid" src="{{ asset ('img/frame-2.png')}}" alt="">
                    <p>ISO Certified</p>
                  </center>
                </div>
                <div class="counter-item">
                  <center>
                    <img class="img-fluid" src="{{ asset ('img/frame-3.png')}}" alt="">
                    <p>Silver Rated PSU</p>
                  </center>
                </div>
                <div class="counter-item">
                  <center>
                    <img class="img-fluid" src="{{ asset ('img/frame-4.png')}}" alt="">
                    <p>Year Of Experience</p>
                  </center>
                </div>
                <div class="counter-item">
                  <center>
                    <img class="img-fluid" src="{{ asset ('img/frame-5.png')}}" alt="">
                    <p>Annual Turn Over</p>
                  </center>
                </div>
            </div>
        </div>
    </section>
</section>
<!-- 5t section end for small screen -->
<!-- cmd desk section start -->
<section class="about-style-two backgroundimagetransp " id="content2">
    <div class="container" >
        <div class="row">
            <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12 " >
                <div class="top-box policeoffice-select hgt-150  theme-latest-bgcolor   mr-4_new d-none d-sm-none d-md-block d-lg-block d-xl-block" id="ns_evnt" style="margin-top: 39px; margin-bottom:24px; width: 100%;">
                    <div class="row">
                        <div class="container container_new">
                            <div class=" left skewed">
                                <div class="left unskewed">
                                    <div class="text">
                                        <a href="{{route('Cmddesk')}}"> <div class="cmd-meess">
                                            <h4  class="heading_blue theme-latest-textcolor"  onmouseover="showHr()" onmouseout="hideHr()">CMD's Desk</h4>
                                            <hr>
                                            <h3 id="xyz" >Welcome To OPHWC</h3>
                                            <p>Dear Colleagues,
                                                <br>
                                                On assumption of the role of Chairman-cum-Managing Director of The Odisha State Police Housing & Welfare Corporation Ltd (OSPH&WC), I extend my warmest wishes to each member of the Corporation and their families.
                                                <br>
                                            </p>
                                            <div class="cmd-designation text-right">
                                                <h5>S.K.Priyadarsi, IPS, ADGP</h5>
                                                <h6>CMD, OPHWC</h6></div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <a href="{{route('Cmddesk')}}">
                                <div class="right skewed">
                                    <div class="right unskewed"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class=" cmdsm-card policeoffice-select hgt-150  theme-latest-bgcolor   mr-4_new d-block d-sm-block d-md-none d-lg-none d-xl-none" id="ns_evnt" style="margin-top: 9px; width: 100%;">
                   <div class="row">
                        <div class="container">
                            <h4 class="heading_blue theme-latest-textcolor" style=" color: transparent; background-image: linear-gradient(#613013, #e0a072); -webkit-background-clip: text; font-size: 20px;padding:10px;">CMD's Desk</h4>
                            <div class="card" style="width:100%;">
                                <img class="card-img-top" src="{{ asset('img/cmd_4 (2) .jpeg') }}" alt="Card image cap">
                                <div class="card-body" id="content_wrapper">
                                    <a href="{{route('Cmddesk')}}">
                                        <div class="cmd-meess">
                                            <!-- <h4 class="heading_blue theme-latest-textcolor"  onmouseover="showHr()" onmouseout="hideHr()">CMD's Desk</h4> -->
                                            <!-- <hr>  -->
                                            <h3>Welcome To OPHWC</h3>
                                            <p>Dear Colleagues,
                                            <br>
                                            On assumption of the role of Chairman-cum-Managing Director of The Odisha State Police Housing & Welfare Corporation Ltd (OSPH&WC), I extend my warmest wishes to each member of the Corporation and their families.
                                            <br></p>
                                            <div class="cmd-designation text-right">
                                                <h5>S.K.Priyadarsi, IPS, ADGP</h5>
                                                <h6>CMD, OPHWC</h6>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                <div class="top-box policeoffice-select hgt-150 latestArea_new theme-latest-bgcolor mr-4_new" id="ns_evnt" style="margin-top:27px; margin-bottom:29px;">
                    <h4 class="heading_blue theme-latest-textcolor" style="color: transparent; background-image: linear-gradient(#613013, #e0a072); -webkit-background-clip: text; font-size: 20px;">News & Events</h4>
                    <marquee class="marquee" behavior="scroll" direction="up" style="height:200px; margin-top: 29px;" scrolldelay="120" scrollmount="1" onmouseover="this.stop();" onmouseout="this.start();">
                        <ul class="ul-news-section">
                            @foreach ($event as $project)
                            <li>
                                <p><a href="#" class="open-modal" data-toggle="modal" data-target="#imageModal{{$loop->index}}">{{ $project->name }}</a></p>
                                <h6>{{ date('d-F-y', strtotime($project->date)) }}</h6>
                            </li>
                            @endforeach
                        </ul>
                    </marquee>
                    @foreach ($event as $project)
                    <div class="modal fade" id="imageModal{{$loop->index}}" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel{{$loop->index}}" aria-hidden="true">
                        <div class="modal-dialog modal-md" role="document">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <button type="button" class="close" id="modalcross" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <div id="carouselExampleIndicators-{{ $loop->iteration }}" class="carousel slide" data-ride="carousel">
                                        <div class="carousel-inner">
                                            @php
                                            $photos = explode(',', $project->photos);
                                            @endphp
                                            @foreach ($photos as $index => $photo)
                                            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                                <img src="{{ asset('image/' . $photo) }}" alt="Event Image" class="img-fluid" id="modal-image">
                                            </div>
                                            @endforeach
                                        </div>
                                        <!-- Indicators -->
                                        <ol class="carousel-indicators">
                                            @foreach ($photos as $index => $photo)
                                            <li data-target="#carouselExampleIndicators-{{ $loop->parent->iteration }}" data-slide-to="{{ $index }}" class="{{ $index === 0 ? 'active' : '' }}"></li>
                                            @endforeach
                                        </ol>
                                        <!-- Controls -->
                                        <a class="carousel-control-prev" href="#carouselExampleIndicators-{{ $loop->iteration }}" role="button" data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="carousel-control-next" href="#carouselExampleIndicators-{{ $loop->iteration }}" role="button" data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    </div>
                                    <p>{{ $project->name }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    <a href="{{ route('news_event') }}"><button type="button" class="hvr-l">View more</button></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- cmd desk section end -->
<!-- photo gallery & twiter section  stat -->
<section class="facilities-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-6 col-sm-12 col-12 p-lg-0" id="ns_evnt">
                <div class="facililties-text pt-100 pb-100">
                    <div class="section-title_new" >
                        <!-- photo gallery slide start -->
                        <a href="{{route('photo_gallery_user') }}"><div class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                @foreach ($pgallery as $item)
                                    <div class="swiper-slide">
                                        <img src="{{ asset('image/' . $item->photo) }}" alt="">
                                    </div>
                                @endforeach
                            </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 offset-lg-1 col-md-6 col-sm-12 col-12 p-lg-0 " >
                <div class="top-box policeoffice-select hgt-150 latestArea theme-latest-bgcolor   mr-4" id="ns_evnt" style="margin-top: 79px; margin-bottom:24px">
                    <div class="hexagon" >
                        <h4 class="heading_blue theme-latest-textcolor" style="color: #814e2b;font-size: 17px;color: transparent; background-image: linear-gradient(#613013, #e0a072); -webkit-background-clip: text;">Latest Tweets</h4>
                    </div>
                    <div class="card">
                        <div class="card-header">
                         Tweets From @OSPoliceHous
                        </div>
                        <div class="card-body" style="max-height: 227px; overflow-y: scroll;">
                            <img src="{{ asset('img/ss-1.png')}}" alt="" style="height: 204px; width:100%;margin-top:10px;">
                            <img src="{{ asset('img/ss-2.png')}}" alt="" style="height: 204px; width:100%;margin-top:10px;">
                            <img src="{{ asset('img/ss-3.png')}}" alt="" style="height: 204px; width:100%;margin-top:10px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- photo galley & twiter section end -->
<!-- completed project section start -->
<section class="service-style-three r pb-70">
    <div class="container">
        <div class="section-title text-center" style="padding-top: 47px; color:black;">
            <h2>Our Completed Projects</h2>
        </div>
        <div id="carouselExample1" class="carouselPrograms carousel slide ">
            <div class="carousel-inner row w-100  " role="listbox">
                <div class="carousel-item col-md-4 active">
                    <div class="panel panel-default">
                        <div class="panel-thumbnail">
                            <figure class="snip0015">
                                <img class="img-fluid mx-auto d-block" src="{{asset('img/EOW Photo.PNG')}}" alt="slide 2">
                                <figcaption>
                                    <h5 style="text-align: center;"> EOW & STF Bhubaneswar</h5>
                                    <a href="{{asset('img/EOW Photo.PNG')}}"  class="thumb"></a>
                               </figcaption>
                            </figure>
                            <div class="caption">
                                <p> EOW & STF Bhubaneswar</password_needs_rehash>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item col-md-4 ">
                    <div class="panel panel-default">
                        <div class="panel-thumbnail">
                            <figure class="snip0015">
                                <img class="img-fluid mx-auto d-block" src="{{ asset('img/IMG-20171021-WA0021.jpg')}}" alt="slide 2">
                                <figcaption>
                                    <h5 style="text-align: center;">EOW & STF Bhubaneswar</h5>
                                    <a href="{{ asset('img/IMG-20171021-WA0021.jpg')}}"  class="thumb"></a>
                                </figcaption>
                            </figure>
                            <div class="caption">
                                <p> EOW & STF Bhubaneswar</password_needs_rehash>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item col-md-4 ">
                    <div class="panel panel-default">
                        <div class="panel-thumbnail">
                            <figure class="snip0015">
                                <img class="img-fluid mx-auto d-block" src="{{asset('img/iconic11.jpg')}}" alt="slide 2">
                                <figcaption>
                                    <h5 style="text-align: center;"> Odisha State Guest House</h5>
                                    <a href="{{ asset('img/iconic11.jpg')}}"  class="thumb"></a>
                                </figcaption>
                            </figure>
                            <div class="caption">
                                <p> Odisha State Guest House</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a style="margin-left: -67px;" class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a style="margin-right:-37px;" class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div class="project-btn text-center">
            <a href="{{route('Completed_Projects')}}"><p>Visit All Completed Projects <i class="fa fa-long-arrow-right" aria-hidden="true"></i> </p></a>
        </div>
    </div>
</section>
<!-- completed project section end -->
<!-- our client section start lg screen-->
<section class="project-section pg-100 backgroundimagetransp_new d-lg-block d-md-none d-sm-none d-none d-xl-block">
    <div class="container clientdesign">
        <div class="section-title text-center">
            <h2 style="margin-bottom:-73px">Our Clients</h2>
        </div>
        <div class="row">
	        <div class="col-md-12 col-sm-12 col-12">
	            <div class="client-outer">
	                 <div class="slick-slider client-slider_new ">
                        <div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".1s">
                               <center>
                                   <img src="{{ asset('img/client-1.png')}}" class="img-fluid" width="150" height="150"  style="margin-top: 64px;" alt="Imageteam" >
                                </center>
                            </div>
				        </div>
                        <div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".3s">
                                <center>
                                    <img src="{{ asset('img/client/clients_7.png')}}" width="150" class="img-fluid" style=" margin-top:66px; " alt="Imageteam" >
                                </center>
                            </div>
				        </div>
                        <div class="wow-outer">
                            <div class="item wow slideInLeft"  data-wow-delay=".5s">
                                <center>
                                    <img src="{{ asset('img/client/l.jpg')}}" width="140" height="95" class="img-fluid" alt="Imageteam" style="margin-top: 17px;">
                                </center>
                            </div>
				        </div>
                        <div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".7s">
                                <center>
                                    <img src="{{ asset('img/client/n.png')}}" width="80" height="5"  class="img-fluid" alt="Imageteam" style="margin-top: 33px;">
                                </center>
                            </div>
				        </div>
                        <div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".9s">
                                <center>
                                    <img src="{{ asset('img/client/a.png')}}" width="103" height="93" style="margin-top:48px;" class="img-fluid" alt="Imageteam" >
                                </center>
                            </div>
				        </div>
				        <div class="wow-outer">
                            <div class="item wow slideInLeft"  data-wow-delay=".11s">
                                <center>
                                    <img src="{{ asset('img/client/clients_5.jpg')}}" style="margin-top: 68px;" class="img-fluid" alt="Imageteam" >
                                </center>
                            </div>
				        </div>
			         	<div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".13s">
                                <center>
                                    <img src="{{ asset('img/client/clients_2 (1).png')}}" width="115" height="93" style="margin-top:40px;" class="img-fluid" alt="Imageteam" >
                                </center>
                            </div>
				        </div>
                        <div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".15s">
                                <center>
                                    <img src="{{ asset('img/client/o.png')}}" width="164"  class="img-fluid" style="margin-top: 69px; height:48px;width:100%;" alt="Imageteam" >
                                </center>
                            </div>
				        </div>
                        <div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".17s">
                                <center>
                                    <img src="{{ asset('img/client/j.jpg')}}" width="110" height="90" class="img-fluid" alt="Imageteam" style="margin-top: 64px;">
                                </center>
                            </div>
				        </div>
                        <div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".19s">
                                <center>
                                    <img src="{{ asset('img/client-9.png')}}" width="200" height="150" class="img-fluid" alt="Imageteam" style="margin-top: 71px;">
                                </center>
                            </div>
				        </div>
                        <div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".21s">
                                <center>
                                    <img src="{{ asset('img/client/g.png')}}" width="80" height="90" class="img-fluid" alt="Imageteam" style="margin-top: 48px;" >
                                </center>
                            </div>
				        </div>
                        <div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".22s">
                                <center>
                                    <img src="{{ asset('img/client-14.png')}}" width="200" height="150" class="img-fluid" alt="Imageteam" style="margin-top: 70px;" >
                                </center>
                            </div>
				        </div>
                        <div class="wow-outer">
                            <div class="item wow slideInLeft" data-wow-delay=".24s">
                                <center>
                                    <img src="{{ asset('img/client/govtlogo-8.png')}}" class="img-fluid" style="height: 94px; margin-top:39px;" alt="Imageteam"  >
                                </center>
                            </div>
				        </div>
				    </div>
               </div>
	        </div>
	    </div>
    </div>
</section>
<!-- client section end lg screen -->
<!-- client section sm screen -->
<section class="project-section pg-100 backgroundimagetransp_new d-lg-none d-xl-none d-md-block d-sm-block d-block" style="padding-bottom:13px;  padding-top:13px;">
    <div class="container clientdesign">
        <div class="section-title text-center" style="margin-bottom: 39px;">
            <h2>Our Clients</h2>
    </div>
    <div class="row">
	    <div class="col-md-12 col-sm-12 col-12">
	        <div class="client-outer" style="padding-right: 23px; padding-left: 21px;">
	            <div class="slick-slider client-slider_new ">
                    <div class="wow-outer">
                        <div class="item wow slideInLeft"  data-wow-delay=".1s">
                            <center>
                                <img src="{{ asset('img/client-1.png')}}" width="150" height="150" style="margin-top: 13px;"  class="img-fluid" alt="Imageteam" >
                            </center>
                        </div>
				    </div>
                    <div class="wow-outer">
                        <div class="item wow slideInLeft" data-wow-delay=".3s">
                            <center>
                               <img src="{{ asset('img/client/n.png')}}" width="50" height="40" class="img-fluid" alt="Imageteam" >
                            </center>
                        </div>
				    </div>
                    <div class="wow-outer">
                        <div class="item wow slideInLeft" data-wow-delay=".5s">
                            <center>
                                <img src="{{ asset('img/client/l.png')}}" width="100" height="55" style="margin-top: -17px;" class="img-fluid" alt="Imageteam" >
                            </center>
                        </div>
				    </div>
                    <div class="wow-outer">
                        <div class="item wow slideInLeft" data-wow-delay=".7s">
                            <center>
                               <img src="{{ asset('img/client/7.png')}}" width="170" height="140" style="margin-top: 13px;"  class="img-fluid" alt="Imageteam" >
                            </center>
                        </div>
				    </div>
                    <div class="wow-outer">
                        <div class="item wow slideInLeft" data-wow-delay=".9s">
                            <center>
                                <img src="{{ asset('img/client/clients_12.png')}}" width="80" height="55" class="img-fluid" alt="Imageteam">
                            </center>
                        </div>
				    </div>
                    <div class="wow-outer">
                        <div class="item wow slideInLeft" data-wow-delay=".11s">
                            <center>
                                <img src="{{ asset('img/client/clients_5.jpg')}}" width="200" height="150" style="margin-top: 13px;"  class="img-fluid" alt="Imageteam">
                            </center>
                        </div>
				    </div>
			        <div class="wow-outer">
                        <div class="item wow slideInLeft" data-wow-delay=".13s">
                            <center>
                               <img src="{{ asset('img/client/clients_2 (1).png')}}" width="90" height="90" style="margin-top: -5px;" class="img-fluid" alt="Imageteam" >
                            </center>
                        </div>
				    </div>
                    <div class="wow-outer">
                    <div class="item wow slideInLeft" data-wow-delay=".15s">
                        <center>
                           <img src="{{ asset('img/client-9.png')}}" class="img-fluid" style="margin-top: 13px;"  width="180" height="150"   alt="Imageteam" >
                        </center>
                    </div>
				</div>
                <div class="wow-outer">
                    <div class="item wow slideInLeft" data-wow-delay=".17s">
                        <center>
                           <img src="{{ asset('img/client/j.jpg')}}" width="100" height="150" style="height: 50px;" class="img-fluid" alt="Imageteam">
                        </center>
                    </div>
				</div>
                <div class="wow-outer">
                    <div class="item wow slideInLeft" data-wow-delay=".19s">
                        <center>
                            <img src="{{ asset('img/client-14.png')}}" class="img-fluid" style="margin-top: 13px;"  width="190" height="150" alt="Imageteam" >
                        </center>
                    </div>
				</div>


				 <div class="wow-outer">
<div class="item wow slideInLeft"  data-wow-delay=".21s">
  <center>
  <img src="{{ asset('img/client/8.png')}}" width="50" height="40" class="img-fluid" alt="Imageteam" >
            </center>
        </div>
				</div>
        <div class="wow-outer">
<div class="item wow slideInLeft" data-wow-delay=".23s">
  <center>
            <img src="{{ asset('img/client/o.png')}}" width="200" height="200px;"  style="margin-top: 13px;"  class="img-fluid" style="" alt="Imageteam" >
            </center>
        </div>
				</div>

        <div class="wow-outer">
             <div class="item wow slideInLeft" data-wow-delay=".25s">
              <center>
              <img src="{{ asset('img/client/govtlogo-8.png')}}" width="60" height="55" style="margin-top:-2px;" class="img-fluid" alt="Imageteam" style="margin-top: 3px;">
            </center>
        </div>
				</div>


				</div>

            </div>

	 </div>
	</div>

  </div>
</section>

<!-- client section sm screen -->
<!-- iconic project start -->
<section class="project-section pt-100 backgroundimagetransp">
  <div class="container">
    <div class="section-title text-center">

      <h2>Iconic Projects</h2>

    </div>
<div id="carouselExample1" class="carouselPrograms carousel slide ">
<div class="abc">
  <div class="row">


      <div class="service-style-three col-md-4 ">
               <div class="panel panel-default">
                  <div class="panel-thumbnail">
                  <figure class="snip0015">

                  <img class="img-fluid mx-auto d-block" src="{{asset('img/1a.png')}}" alt="slide 2">
                     <figcaption>
                     <h5 style="text-align: center;"> Police Comissionerate Building</h5>

                     <a href="img/1a.png"  class="thumb"></a>
                     </figcaption>
                    </figure>
                    <div class="caption">
                   <p> Police Comissionerate Building</password_needs_rehash>
                  </div>
                  </div>
                </div>
            </div>

            <div class="service-style-three col-md-4 ">
               <div class="panel panel-default">
                  <div class="panel-thumbnail">
                  <figure class="snip0015">

                  <img class="img-fluid mx-auto d-block" src="{{asset('img/2a.png')}}" alt="slide 2">
                     <figcaption>
                     <h5 style="text-align: center;">Front View Of Comissionerate</h5>

                     <a href="img/2a.png"  class="thumb"></a>
                     </figcaption>
                    </figure>
                    <div class="caption">
                   <p> Front View Of Comissionerate</password_needs_rehash>
                  </div>
                  </div>
                </div>
            </div>
            <div class="service-style-three col-md-4 ">
               <div class="panel panel-default">
                  <div class="panel-thumbnail">
                  <figure class="snip0015">

                  <img class="img-fluid mx-auto d-block" src="{{asset('img/3a.png')}}" alt="slide 2">
                     <figcaption>
                     <h5 style="text-align: center;">Right View Of Comissionerate</h5>

                     <a href="img/3a.png"  class="thumb"></a>
                     </figcaption>
                    </figure>
                    <div class="caption">
                   <p> Right View Of Comissionerate</password_needs_rehash>
                  </div>
                  </div>
                </div>
            </div>
    </div>
    </div>
 <a style="margin-left: -67px;" class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a style="margin-right:-37px;" class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
  </div>



  <div class="project-btn text-center">
  <a href="{{route('iconic_project')}}"><p>Visit All Iconic Projects <i class="fa fa-long-arrow-right" aria-hidden="true"></i> </p></a>
    <br>
  </div>
  </div>
</section>

<!-- iconic project end -->


<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>


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

       <script src="{{ asset('js/jquery-3.3.1.min.js')}}"></script>
     <script src="{{ asset('js/wow.min.js')}}"></script>



       <script type="text/javascript" src="{{ asset('js/rev-slider/jquery.themepunch.revolution.min.js')}}"></script>
       <script type="text/javascript" src="{{ asset('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="{{ asset('js/jquery.counterup.min.js')}}"></script>
          <script type="text/javascript" src="{{ asset('js/jquery.waypoints.min.js')}}"></script>




<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>



<!-- multi-carousel js -->
 <script>
  $('#carouselExample').on('slide.bs.carousel', function(e) {


    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 3;
    var totalItems = $('.carousel-item').length;

    if (idx >= totalItems - (itemsPerSlide - 1)) {
      var it = itemsPerSlide - (totalItems - idx);
      for (var i = 0; i < it; i++) {

        if (e.direction == "left") {
          $('.carousel-item').eq(i).appendTo('.carousel-inner');
        } else {
          $('.carousel-item').eq(0).appendTo('.carousel-inner');
        }
      }
    }
  });


</script>


 <script>
  var swiper = new Swiper(".mySwiper", {
    effect: "cards",
    grabCursor: true,
    centerSlides: true,
    loop: true,
    autoplay: {
      delay: 1000,
    },
  });

  var swiperWrapper = document.querySelector('.swiper-wrapper');

  swiperWrapper.addEventListener('mouseenter', function() {
    swiper.autoplay.stop();
  });

  swiperWrapper.addEventListener('mouseleave', function() {
    swiper.autoplay.start();
  });
</script>



<!-- revolution slider js -->
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#revolution-slider-half').show().revolution({
    });
    jQuery('.tp-simpleresponsive').on('mouseenter', function() {
      jQuery(this).trigger('starttimer');
    }).on('mouseleave', function() {
      jQuery(this).trigger('starttimer');
    });
  });
</script>


<!-- counter section scrollba hide -->
<script>
        // Check if the element with id "scrollbar-section" exists
        var scrollbarSection = document.getElementById("scrollbar-section");

        // If the element exists, add a class to the body to hide the scrollbar
        if (scrollbarSection) {
            document.body.classList.add("hide-scrollbar");
        }
    </script>



<script>
        	// Increase/descrease font size
	$('#increasetext').click(function() {
		curSize = parseInt($('#content').css('font-size')) + 2;
		if (curSize <= 32)
			$('#content').css('font-size', curSize);
	});

	$('#resettext').click(function() {
		if (curSize != 18)
			$('#content').css('font-size', 18);
	});

	$('#decreasetext').click(function() {
		curSize = parseInt($('#content').css('font-size')) - 2;
		if (curSize >= 14)
			$('#content').css('font-size', curSize);
	});
    </script>


<script>
 var $affectedElements = $("p, h1, h2, h3, h4, h5, h6 , span, a"); // Can be extended, ex. $("div, p, span.someClass")

// Storing the original size in a data attribute so size can be reset
$affectedElements.each( function(){
  var $this = $(this);
  $this.data("orig-size", $this.css("font-size") );
});

$("#btn-increase").click(function(){
  changeFontSize(1);
})

$("#btn-decrease").click(function(){
  changeFontSize(-1);
})

$("#btn-orig").click(function(){
  $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , $this.data("orig-size") );
   });
})

function changeFontSize(direction){
    $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , parseInt($this.css("font-size"))+direction );
    });
}
      </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>

@endsection