#img:hover{
           
    box-shadow: 5px 5px 10px 5px rgb(95, 94, 94);
 }

/*****Gallery slider*****/

.carousel-item img {
	object-fit: cover;
 
}

#carousel-thumbs {
	background: #f0eded;
	padding: 0 50px;
  width: 70%;
}
#carousel-thumbs img:hover {
	opacity: 100%;
  
}

#carousel-thumbs img {
	opacity: 70%;
  
	cursor: pointer;
}
#carousel-thumbs .selected img {
	opacity: 100%;
 
}

.carousel-control-prev,
.carousel-control-next {
	width: 50px;
  
 
}

.carousel-fullscreen-icon {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 1.75rem;
	height: 1.75rem;
	z-index: 4;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255,255,255,.80)'  viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z' /%3E%3C/svg%3E");
}

.carousel-fullscreen-icon:hover {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(255,255,255)' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z' /%3E%3C/svg%3E");
}

.pause .carousel-pause-icon {
	position: absolute;
	top: 3.75rem;
	left: 1rem;
	width: 1.75rem;
	height: 1.75rem;
	z-index: 4;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255,255,255,.80)'  viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5zm3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5z' /%3E%3C/svg%3E");
}
.pause .carousel-pause-icon:hover {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(255,255,255)'  viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5zm3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5z' /%3E%3C/svg%3E");
}

.play .carousel-pause-icon {
	position: absolute;
	top: 3.75rem;
	left: 1rem;
	width: 1.75rem;
	height: 1.75rem;
	z-index: 4;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255,255,255,.80)'  viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z' /%3E%3C/svg%3E");
}

.play .carousel-pause-icon:hover {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(255,255,255)'  viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z' /%3E%3C/svg%3E");
}

#carousel-thumbs .carousel-control-prev-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(0,0,0,.60)' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

#carousel-thumbs .carousel-control-next-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%60000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.modal-content {
	border-radius: 0;
	background-color: transparent;
	border: none;
}
#lightbox-container-image img {
	width: auto;
	max-height: 520px;
}

  /*********Manufacturing Layout*********/
  @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
  .slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
  }
  
  .left-slide {
    height: 100%;
    width: 35%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease-in-out;
  }
  
  .left-slide > div {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  
  .left-slide h1 {
    font-size: 30px;
    margin-bottom: 20px;
    margin-top: -20px;
  }
  
  .right-slide {
    height: 100%;
    position: absolute;
    top: 0;
    left: 35%;
    width: 65%;
    transition: transform 0.5s ease-in-out;
  }
  
  .right-slide > div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
  }
  
  button {
    background-color: #ffffff8a;
    border: none;
    color: #646060;
    cursor: pointer;
    font-size: 12px;
    padding: 16px;
  }
  
  button:hover {
    color: #161616;
  }
  
  button:focus {
    outline: none;
  }
  
  .slider-container .action-buttons button {
    position: absolute;
    left: 35%;
    top: 50%;
    z-index: 100;
  }
  
  .slider-container .action-buttons .down-button {
    transform: translateX(-100%);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  
  .slider-container .action-buttons .up-button {
    transform: translateY(-100%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  :root {
    --marquee-width: 100vw;
    --marquee-height: 20vh;
    --marquee-elements-displayed: 5;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
  }
  
  .marquee {
    width: var(--marquee-width);
    height: var(--marquee-height);
   
    color: #eee;
    overflow: hidden;
    position: relative;
  }
  .marquee:before, .marquee:after {
    position: absolute;
    top: 0;
    width: 10rem;
    height: 100%;
    content: "";
    z-index: 1;
  }
  
  .marquee-content {
    list-style: none;
    height: 100%;
    display: flex;
    animation: scrolling var(--marquee-animation-duration) linear infinite;
  }

  @keyframes scrolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
  }
  .marquee-content li {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    width: var(--marquee-element-width);
    max-height: 100%;
    font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
    white-space: nowrap;
  }
  
  .marquee-content li img {
    width: 100%;
    height: 100%;
    border: 2px solid #eee;
  }
  
  @media (max-width: 320px) {
    html { font-size: 12px; }
    :root {
      --marquee-width: 100vw;
      --marquee-height: 14vh;
      --marquee-elements-displayed: 3;
    }
    .marquee:before, .marquee:after { width: 5rem; }
  }


  /*********manufacturing css*********/
  @import url(https://fonts.googleapis.com/css?family=Raleway);
  .title{color: #1a1a1a;text-align: center;margin-bottom: 10px}
  .content{position: relative; width:100%;margin: auto;overflow: hidden}
  .content .content-overlay{background: rgba(226, 226, 226, 0.877);position: absolute;height: 100vh;width: 100%;left: 0;top: 0;bottom: 0;right: 0;opacity: 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}
  .content:hover .content-overlay{opacity: 1}
  .content-image{width: 100%}img{box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);border-radius: 5px}
  .content-details{position: absolute;text-align: center;padding-left: 1em;padding-right: 1em;width: 100%;top: 50%;left: 50%;opacity: 0;-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}.content:hover .content-details{top: 50%;left: 50%;opacity: 1}
  .content-details h3{color:black;font-weight: 500;letter-spacing: 0.15em;margin-bottom: 0.5em;text-transform: uppercase}.content-details 
  .fadeIn-bottom{top: 80%}
  .ul{
    text-align:left;
    padding-left: 5px;
    color:black;
  }

  /**********Media Query****************/
   
  @media screen and (max-width: 320px){
      
    #footer{
     margin-left: 0;

    }
  }

  @media screen and (min-width: 720px){

    #footer{
      margin-left: -150px;
      
    }
    }

    @media screen and (max-width: 320px){
      
      #footer{
       margin-left: 0;
  
      }
    }
  
    @media screen and (min-width: 720px){
  
      #slider{
        height: 10vh;
        
      }
      }


      @media screen and (min-width: 320px){
      
        .ul{
         font-size: 11px;
    
        }
      }
    
      @media screen and (min-width: 720px){
    
        .ul{
          font-size: 15px;        
          
        }
        }

        @media screen and (min-width: 320px){
      
          .content-title{
           font-size: 15px;
      
          }
        }
      
        @media screen and (min-width: 720px){
      
          .content-title{
            font-size: 19px;     
            
          }
          }


         
          
          
          
@media only screen and (min-width: 320px) {
  #logo {
    height:10vh;
    width: 100%;
    margin-bottom: 15px;
    
   
  }
}

@media only screen and (max-width: 720px) {
  #logo{
    height:10vh;
    width: 80%;
    
    margin-bottom: 0;
    
  }
}

         
@media only screen and (max-width: 320px) {
  #image {
    height: auto ;
  }
}

@media only screen and (min-width: 720px) {
 #image{
    height:83vh;
  }
}

        
@media only screen and (min-width: 320px) {
  #paddingmain{
   padding-top: 30px;
 
  }
}
       
@media only screen and (max-width: 720px) {
  #paddingmain{
   padding-top: 30px;
  }
}




@media only screen and (max-width: 320px) {
 #height{
   height: auto;
  }
}

@media only screen and (min-width: 720px) {
 #height{
  height: 14vh;
  }
}

@media only screen and (max-width: 320px) {
  #leader{
    
    width:100%;
    height: 50vh;
   }
 }
 
 @media only screen and (min-width: 720px) {
  #leader{
  
    width: 400px;
   }
 }
 
 @media only screen and (max-width: 320px) {
  p{
    text-align: left;
   }
 }
 
 @media only screen and (min-width: 720px) {
  p{
    text-align:justify;
   }
 }

 #email:hover{
  color: rgb(135, 179, 216);
  
 }

 
 @media only screen and (max-width: 320px) {
  #gallery{
    height: 10vh;
    
   }
 }
 
 @media only screen and (min-width: 720px) {
  #gallery{
    height: 15vh;
    width: 85%;
   }
 }

 
 @media only screen and (max-width: 320px) {
  #client{
   width: 100%;
   height: 30vh;
    
   }
 }
 
 @media only screen and (min-width: 720px) {
  #client{
    height: 25vh;
    width: 50%;
    
   }
  }

  @media only screen and (max-width: 320px) {
    #accreditation{
     width: 100%;
     height: 40vh;
     
      
     }
   }
   
   @media only screen and (min-width: 720px) {
    #accreditation{
      cursor: pointer;
      height: 35vh;
       width: 70%;
      
     }
    }
    @media only screen and (min-width: 720px) {
      #accreditation:hover{
        box-shadow: 5px 5px 10px 5px rgb(95, 94, 94);
      }
        
       }
      


 
 
 
 


      

      
 

.content1 {
  position: relative;
 

  overflow: hidden;
}

.content1 .content-overlay1 {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 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;
}

.content1:hover .content-overlay1{
  opacity: 1;
}

.content-image1{
  width: 100%;
}

.content-details1 {
  position: absolute;
  text-align: center;
 
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -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;
}

.content1:hover .content-details1{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-detail1 h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}


   /* pagination and next,previous button */
   .item-controller,
   .select{
   flex-shrink: 0;
   display: flex;
   align-content: center;
   align-items: center;
   }
   .bottom-field{
   width:100%;
   padding:20px;
   margin-top:20px;
   }
   .pagination{
   display:flex;
   justify-content:center;
   align-items:center;
   }
   .pagination li{
   list-style:none;
   padding:2px;
   margin:10px;
   flex-shrink:0;
   text-align:center;
   border-radius:5px;
   border: 1px solid #999;
   color:#999;
   }
   .pagination li.active{
   background: #32d6aa;
   color: white;
   border-color: #32d6aa;
   }
   .pagination li a{
   text-decoration: none;
   color: inherit;
   padding: 3px 8px;
   display:block;
   font-family: sans-serif;
   font-size:13px;
   }

   .link{
    padding:10px 15px;
    text-decoration:none;
    margin-left:10px ;
    border:1px solid #ccc;
    }
    .product{
    border:1px solid #ccc;
    padding:10px;
    }
    .active{
    
    color:white;
    }
    .current {
    color: green;
    }
    #pagin li {
    display: inline-block;
    }
    .pagination a{
    display: inline-block;
    text-decoration: none;
    color: #41789c;
    padding: 10px 20px;
    border: thin solid #d4d4d4;
    transition: all 0.3s;
    font-size: 18px;
    }
    a.active{
    background-color: #0d81cd;
    color: #fff;
    }
    .page-info{
    margin-top: 90px;
    font-size: 18px;
    font-weight: bold;
    }
    .pagination{
    margin-top: 20px;
    }
    .content p{
    margin-bottom: 15px;
    }
    .page-numbers{
    display: inline-block;
    } 
