.popup-bg {

  background: url('../assets/img/popup-bg.jpg') center top no-repeat;

  background-size: cover;

}



.custom-popup {

	overflow: hidden;

}



.custom-popup header {

	z-index: 0 ;

}



.sub-item-img-box span{

  display: block;

}



.sub-item-img-box img{

  width: 60px;

  height: auto;

  padding-bottom: 15px;

}



.dropdown:hover > ul li {

  cursor: pointer;

}



.dropdown:hover > ul li:hover  {

  color: #e84545;

}



.portfolio-info i {

	font-size: 20px;

}

.popup {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.8);

  justify-content: center;

  align-items: center;

  z-index: 9;

  }

  

.popup .popup-box{ 

	width:65%; 

	transition:all 1s ease 0s; 

	-webkit-transition:all 1s ease 0s; 

	margin:auto; 

	background:#fff; 

	position:fixed; 

	top:-100%; 

	left:0px; 

	right:0px;

	pointer-events: none;

	z-index: 999;

  height: 77%;



}



.custom-popup .popup .popup-box {

	pointer-events: auto;

	top: 30%;

	transform: translateY(-20%);

	-webkit-transform: translateY(-20%);

}



.popup .popup-box .popupbox-inner {

  overflow: hidden;

  overflow-y: auto;

  height: 100%;

}



 .close-btn{ 

  cursor: pointer;

    float: right;

    width: 40px;

    font-size: 30px;

    height: 40px;

	border-radius: 100%;

    text-align: center;

    background:var(--color-primary);

    line-height: 39px;

    color: #fff;

    position: absolute;

    right: 0px;

    top: -45px;

 }



 .intro {	

	background: url('../assets/img/popup-bg.jpg') center top no-repeat;

	background-size: cover;

 }



 .intro .modal-dialog {

  max-width: 750px;

 }

 

.popup-bg{ 

	position:fixed; 

	transition:all 0.6s ease 0.6s;

	-webkit-transition:all 1s ease 0s;

	visibility:hidden; 

	opacity:0; 

	width:100%; 

	height:100%; 

	float:left; 

	background:rgba(0, 0, 0, 0.8);

	pointer-events: auto;

	top: 0px;

  left: 0;

	z-index: 988;

}

.custom-popup .popup-bg{ 

	pointer-events: auto; 

	opacity:1; 

	visibility:visible;

}





.spotlight-group {

  display: grid;

  grid-template-columns: repeat(4,1fr);

  padding: 10px;

  text-align: center;

  grid-gap: 1rem;

}



.spotlight img {

  height: auto;

  max-height: 166px;

  width: 100%;

}



.spl-pane img {

  max-width: 85%;

}



.spotlight{

  cursor: pointer;

  display: inline-block;

}



a[data-media="node"]{

    width: 29vw;

    max-width: 300px;

    margin: 1vmin 1vmin;

    display: inline-block;

    height: 20vw;

    max-height: 200px;

}

a[data-media="node"] img{

    float: left;

    width: 33.33%;

    margin: 0;

    object-fit: cover;

    height: 100%;

    padding: 0;

}



/* Start Scroll */

.v-scroll::-webkit-scrollbar {

  width:5px;

  right: 5px;

  }



  .h-scroll::-webkit-scrollbar {

  height:5px;

  }



  /* Track */

  .v-scroll::-webkit-scrollbar-track, .h-scroll::-webkit-scrollbar-track {

  -webkit-box-shadow: none; 

  background: rgba(0,0,0,0.1); 

  -webkit-border-radius: 2px;

  border-radius: 2px;

  }

  /* Handle */

  .v-scroll::-webkit-scrollbar-thumb, .h-scroll::-webkit-scrollbar-thumb {

  -webkit-border-radius: 2px;

  border-radius: 2px;

  background: rgba(0,0,0,0.4); 

  -webkit-box-shadow: none;

  }

  /* End Scroll */





  /* Services */

  .service-block {

    position: relative; 

    margin: auto;

    overflow: hidden;

    text-align: left;

    cursor: pointer;

  }



  .service-details {

    position: absolute;

    text-align: left;

    padding-left: 2em;

    padding-right: 2em;

    width: 100%;

    top: 50%;

    left: 50%;

    opacity: 1;

    -webkit-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    -webkit-transition: all 0.3s ease-in-out 0s;

    -moz-transition: all 0.3s ease-in-out 0s;

    transition: all 0.3s ease-in-out 0s;

    z-index: 2;

}



.service-block .fadeIn-bottom {

  top: 87%;

}

  

  .service-block:after {

    height: 100%;

    width: 100%;

    /*background: rgba(0,30,95,0.8);*/

    background: rgb(47,47,47);

    background: linear-gradient(

      360deg,

      rgba(47,47,47,1) 0%,

      rgba(47,47,47,0.3) 50%,

      rgba(255,255,255,0) 100%

    );

    opacity: 1;

    position: absolute;

    content: "";

    left: 0;

    top: 0;

    bottom: 0;

    right: 0;

    -webkit-transition: all 0.4s ease-in-out 0s;

    -moz-transition: all 0.4s ease-in-out 0s;

    transition: all 0.4s ease-in-out 0s;

    z-index: 1;

  }

  

  .service-block:hover:after {

    opacity: 1;

    background: linear-gradient(

      360deg,

      rgba(47,47,47,0.8) 0%,

      rgba(47,47,47,0.8) 50%,

      rgba(47,47,47,0.8) 100%

    );

  }

  

  .service-block a {

    position: relative;

    margin: auto;

    overflow: hidden;

    text-align: left;

    padding: 0;

    display: block;

    cursor: pointer;

  }

  

  .service-image {

    width: 100%;

    position: relative;

    display: block;

    -moz-transition: -moz-transform 0.5s ease;

    -webkit-transition: -webkit-transform 0.5s ease;

    -ms-transition: -ms-transform 0.5s ease;

    transition: transform 0.5s ease;

  }



  .service-details h4 {

    color: rgba(255, 255, 255, 1);

    font-weight: 600;

    letter-spacing: 0px;

    margin-bottom: 0;

    margin-top: 0;

    text-transform: none;

    font-size: 24px;

    line-height: 38px;

}



.service-block:hover .service-details h4 {

  color: rgba(253, 223, 0, 1);

  opacity: 1;

}



  .service-block:hover .service-details {

    top: 50%;

    left: 50%;

    opacity: 1;

}

/* 1 dec css */
video.full-width-video {
  width: 100%;
}
.mobile-slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
}
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  position: relative;
}
.slide {
  min-width: 100%;
  box-sizing: border-box;
}
.slide img {
  width: 100%;
  display: block;
}
.indicators {
  position: absolute;
  top: 0;
  right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  z-index: 10;
}

.indicator {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  margin: 5px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.indicator.active {
  background-color: #333;
}

/* Hide the slider on desktop screens */
@media (min-width: 1024px) {
  .mobile-slider {
      display: none; /* Hide the slider */
  }

}

@media (max-width: 1023px) {
  video.full-width-video {
      display: block; /* Hide the slider */
  }

  

}

@media (min-width: 1200px) {

.h2, h2 {

    font-size: 25px;

}


}



@media only screen and (max-width: 991px) {

  .popup-box {

    width: 90%;    

}



.spotlight-group { 

  grid-template-columns: auto auto; 

}

}