@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap");

:root{
   --main-color:#E6392D;
   --black:#000;
   --white:#fff;
   --bg: #fff5f5;
   --light-black:#4B4B4B;
}

*{
   font-family: 'Poppins', sans-serif;
   margin: 0; padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none; text-decoration: none;
   transition: .2s linear;
}


/* Banner*/
.home{
    padding: 0;
 }
 
 .home .product-banner{
    background: url(../images/infrastucture_page/banner_3.png) no-repeat;
    height: 65vh;
    padding: 2rem;
    display: flex;
    align-items: center;
    background-size: cover !important;
    background-position: center !important;
    gap:5rem;
 }
 
 .home .content{
    display: flex;
    flex-direction: column;
    gap:1rem;
 }
 
 .home .content h3{
    font-size: 2rem;
    color: var(--white);
 }
 
 .home .content h1{
    font-size: 5rem;
    color: var(--white);
    font-weight: 700;
    text-transform: uppercase;
 }
 

 
 /*---------------- Main ----------------*/

main{
	padding: 5rem 0;
}
 
 ul{
   list-style-type:none;
 }
 
 main h2{
	color: var(--main-color);
	text-transform: uppercase;
	padding-bottom: 2rem;
	font-size: 3rem;
	text-align: center;
  }

  main h2:after {
    content:''; 
    display:block; 
    width:10rem; 
    height:3px; 
    background:var(--main-color); 
    margin:0 auto; 
    margin-top:15px; 
    border-radius:3px;
 }
 
 
 .wrapper{
   padding: 5rem 0;
   display: flex;
   gap: 5rem;
 }
  
.wrapper h3{
	color: var(--main-color);
	text-transform: uppercase;
	padding-bottom: 2rem;
	font-size: 2rem;
  }

 
 .wrapper nav{
   ul .item{
	 border-bottom:1px solid grey;
	 border-radius: 5px;
	 list-style-type:none;
	 margin-right: 50px;
	 padding:10;
	 width:250px;
	 
   }
 }
  .wrapper  li a{
	   display:flex;
	   flex-direction: column;
	   text-decoration:none;
	   padding:10px;
	   font-size: 1.6rem;
	   border-bottom:0.2px solid grey;
	   color: black;
	   &:hover{
		 color: white;
		 background: red;
	   }
	   &.active{
		   background: red;
		   color: white;
	   }
   }
 
 
 .gallery{
   display: flex;
   flex-wrap: wrap;
 }
 
 
 .gallery .image{
   /* display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   gap: 1rem;
   padding-bottom: 1rem; */
   width: calc(100% / 3);
   gap:2rem;
   padding-right: 1rem;
 }
 
 
 .gallery .image span{
   display: flex;
   width: 100%;
   overflow: hidden;
   box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
   padding: 5rem 1rem;
   border-radius: 0.5rem;
 }
 
 
 .gallery .image img{
   width: 100%;
   vertical-align: middle;
   transition: all 0.3s ease;
 }
 
 .gallery .image:hover img{
   transform: scale(1.1);
 }
 .gallery .image.hide{
   display: none;
 }
 .gallery .image.show{
   animation: animate 0.4s ease;
 }
 @keyframes animate {
   0%{
	 transform: scale(0.5);
   }
   100%{
	 transform: scale(1);
   }
 }
 
 .preview-box{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.9);
   background: #fff;
   max-width: 700px;
   width: 100%;
   z-index: 5;
   opacity: 0;
   pointer-events: none;
   border-radius: 3px;
   padding: 0 5px 5px 5px;
   box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
 }
 .preview-box.show{
   opacity: 1;
   pointer-events: auto;
   transform: translate(-50%, -50%) scale(1);
   transition: all 0.3s ease;
 }
 .preview-box .details{
   padding: 13px 15px 13px 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .details .title{
   display: flex;
   font-size: 18px;
   font-weight: 400;
 }
 .details .title p{
   font-weight: 500;
   margin-left: 5px;
 }
 .details .icon{
   color: #007bff;
   font-style: 22px;
   cursor: pointer;
 }
 .preview-box .image-box{
   width: 100%;
   display: flex;
 }
 .image-box img{
   width: 100%;
   border-radius: 0 0 3px 3px;
 }
 .shadow{
   position: fixed;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   z-index: 2;
   display: none;
   background: rgba(0,0,0,0.4);
 }
 .shadow.show{
   display: block;
 }
 




 /*--------------- responsive section start -----------------*/
 @media (max-width: 1000px) {
   .gallery .image{
	 width: calc(100% / 2);
   }
 }
 @media (max-width: 800px) {
   .gallery .image{
	 width: calc(100% / 2);
   }
 }

 @media (max-width: 769px) {
	.wrapper{
	  flex-wrap: wrap;
	}
	.wrapper nav{
		ul .item{
		  width:500px;
		  
		}
	  }
	   .wrapper  li a{
			display:flex;
			flex-direction: column;
			text-decoration:none;
			padding:10px;
			font-size: 1.6rem;
			border-bottom:0.2px solid grey;
			color: black;
			&:hover{
			  color: white;
			  background: red;
			}
			&.active{
				background: red;
				color: white;
			}
		}
  }
 

 @media (max-width: 700px) {
   .wrapper nav .items{
	 max-width: 600px;
   }
   nav .items span{
	 padding: 7px 15px;
   }
 }
 @media (max-width: 600px) {
   .wrapper{
	 margin: 30px auto;
   }
   .wrapper nav .items{
	 flex-wrap: wrap;
	 justify-content: center;
   }
   nav .items span{
	 margin: 5px;
   }
   .gallery .image{
	 width: 50%;
   }
 }

 @media (max-width: 543px) {
	.wrapper nav{
		ul .item{
		  width:450px;
		  
		}
	  }
	  
  }
  
  @media (max-width: 501px) {
	.wrapper nav{
		ul .item{
		  width:430px;
		  
		}
	  }
	  
  }
  

    
  @media (max-width: 492px) {
	.wrapper nav{
		ul .item{
		  width:410px;
		  
		}
	  }
	  
  }
  
      
  @media (max-width: 469px) {
	.wrapper nav{
		ul .item{
		  width:400px;
		  
		}
	  }
	  
  }

  @media (max-width: 451px) {
	.wrapper nav{
		ul .item{
		  width:380px;
		  
		}
	  }
	  
  }

  @media (max-width: 433px) {
	.wrapper nav{
		ul .item{
		  width:360px;
		  
		}
	  }
	  
  }

  @media (max-width: 414px) {
	.wrapper nav{
		ul .item{
		  width:340px;
		  
		}
	  }
	  
  }

  @media (max-width: 388px) {
	.wrapper nav{
		ul .item{
		  width:310px;
		  
		}
	  }
	  
  }

  
  @media (max-width: 371px) {
	.wrapper nav{
		ul .item{
		  width:290px;
		  
		}
	  }
	  
  }

   
  @media (max-width: 332px) {
	.wrapper nav{
		ul .item{
		  width:280px;
		  
		}
	  }
	  
  }

  @media (max-width: 318px) {
	.wrapper nav{
		ul .item{
		  width:270px;
		  
		}
	  }
	  .home .content h1{
		font-size: 4rem;

	 }
	  
  }

  @media (max-width: 308px) {
	.wrapper nav{
		ul .item{
		  width:260px;
		  
		}
	  }
	  
  }