*{
	padding:0;
	margin: 0;
}
html{
	scroll-behavior: smooth;
}
body{
	width: 100%;
	font-size: 65.5%;
	background-size: cover;
	font-family: 'Tiro Gurmukhi', serif;
	background-color: rgb(240, 240, 240);
	font-size: 1.5rem;
	
}
html{
	font-size: 65.5%;
}
@media(max-width: 999px){
	html{
		font-size: 55%;
	}
}

/* menu bar*/

#div1{
		font-size: 4rem;
		font-family: 'Tiro Gurmukhi', serif;
		text-shadow: .3rem .2rem .4rem gray;
}
/*tiles division*,creeat two division*/
.child{
		float: left;
		width:50%;
		height: 70rem;
		text-align:left ;
		text-decoration: none;
}

.pformet{
	color: rgba(128,128,128 ,0.9); 
	margin-top: 2rem;
	letter-spacing: .13rem;
		line-height: 3rem;
		font-size: 1.7rem;
}
.parent{
	width: 100%;
    height:80rem;
		box-sizing: border-box;
		border-color: blue;
		text-align: left;
		display: flex;
		font-size: 2rem;
		font-family: 'Tiro Gurmukhi', serif;		
		color:black;
		letter-spacing: .13rem;
		line-height: 3.3rem;
}
.child img{
	box-shadow: .2rem .4rem 1.5rem .3rem gray;
}
.overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
	background: black;
	cursor: pointer;
}
.content{
	position: absolute;
	top: 50%;
	left: 50%;
	
	color: white;
	font-family: 'Tiro Gurmukhi', serif;
	text-align: center;
}
.hoverefect:hover .overlay{
	opacity: 0.8;
}
.wrapper{
	font-family: 'Tiro Gurmukhi', serif;
	position: relative;	
}
.wrapper a img{
	width: 95%;
	height: 25rem;
	border: .1rem  solid steelblue;
}

.content{
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	text-transform: uppercase;
	font-size: 2.4rem;
}
.overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 95%;
	opacity: 0;
	transition: .5s ease;
	background: rgba(0, 48, 96,0.6);
}
.wrapper:hover .overlay{
	opacity: 1;
}
/* footer*/
#outfootr{
	margin-top: 2rem;
	background-color: black;
	width: 100%;
	box-sizing: content-box;

}

/* footer about us*/
#per{

	margin-top: 4rem;
	margin-left: 2rem;
	margin-right: 2rem;
	font-family: 'Tiro Gurmukhi', serif;
	font-size: 1.7rem;
	color: gray;
	letter-spacing: .2rem;
	line-height: 3rem;
}
 /*footer menu division*/


#indiv{
	
	color: gray;	
	margin-top: 2rem;
	letter-spacing: .15rem;
	font-size: 1.5rem;
	text-align: center;	
	line-height: 3rem;	
}

.cinnerfoot #indive a{ color: gray; }
/* draw line*/
.h{
 	background: linear-gradient(to right,white,gray);
 	width: 89%;
 	height: .3rem;
 	border: 0 none;
 	margin-top: 5rem;
 	margin-left: 7rem;
 	margin-bottom: 5rem;
 	background-color: gray;
 }

.hh{
	background: linear-gradient(to right,white,gray);
 	width: 50%; height: .1rem; border: 0 none;
 	background-color: white;
 	margin-top: 1rem;
 	margin-left: 6.5rem;
 	margin-bottom: 0rem;
 	background-color: gray;
}
.outh{
 	background: linear-gradient(to right,white,gray);
 	width: 89%;
 	height: .1rem;
 	border: 0 none;
 	margin-top: 5rem;
 	margin-left: 7rem;
 	margin-bottom: 2rem;
 	background-color: gray;
 }
 /*  */
#div1{
		color: blue;
		font-size: 6rem;
		font-family: 'Tiro Gurmukhi', serif;
		text-shadow: .3rem .2rem .4rem black;
}

#pro{
		text-align: center;
		font-size: 1.6rem;
		font-style: normal;
		text-shadow: .1rem .1rem .1rem ;
}
/* icon footer*/
.centericondiv{
			
			display: flex;
			justify-content: center;
		}
		.btnicon{
			height: 4rem;
			width: 4rem;
			background-color: #f5f6fa;
			border-radius: 50%;
			text-align: center;
			margin: 1rem;
			box-shadow: .1rem .2rem .2rem .2rem #dcdde1;
			line-height: 3.6rem;
			position: relative;
			overflow: hidden;
		}
		.btnicon .iconi{
			transition: all 0.3s linear;
		}
		.btnicon:hover .iconi{
			transform: scale(1.5);
			color: #f5f6fa;
		}
		.btnicon:before{
			content: "";
			width: 120%; height: 120%;
			position: absolute;
			top: 90%;
			left: -50%;
			background-color: #00a8ff;
			transform: rotate(60deg);

		}
		.btnicon:hover:before{
			animation: sicon 0.8s 1;
			animation-fill-mode: forwards;
		}
		@keyframes sicon{
			0%{top: 90%; left: -50%;}
			50%{top: -60%; left: -10%;}
			100%{top: -10%; left: -10%;}
		}
		
		.fa-whatsapp{
			color: green;
		}
		.fa-envelope{
			color: rgb(0, 51, 102);
		}
/* last footer text*/
#divlast
{
		color: gray;
		font-size: 1.2rem;
		font-family: 'Tiro Gurmukhi', serif;
		margin-top: 1rem;
		margin-left: 7rem;
		text-align: left;
		letter-spacing: .2rem;
}
#indiv a{
	text-decoration: none;
	color: gray;
}

/* catalogues page*/

.psect {

	width: 100%;
	height: 15rem;
	box-sizing: border-box;
	
	margin-top: 1rem;
	display: inline-flex;
	list-style: none;
	color: white;
	display: flex;

}
.csect{ 
			float: left;
			width: 50%;
			font-size: 1.5rem;
}
.deldiv{
	
	font-size: 2.4rem;
	margin-top: 5rem;
	margin-right: 7.5rem;
	letter-spacing: .18rem;
	text-align: right;
	padding: 1rem;

}

#div2{
		letter-spacing: .2rem;
		padding: .2rem;
		margin-top: 2rem;
		margin-left: 5rem;
		color: black;
		font-size: 3rem;
		font-family: 'Tiro Gurmukhi', serif;
		text-shadow: .2rem .2rem .2rem black;
}

.mainparent{
	box-sizing: border-box;
	width: 90%;
	height: 28rem;
	margin-top: 5rem;
	margin-left: 6rem;
	text-align: left;
	display: flex;
}
.catlogparent{
	box-sizing: border-box;
	width: 100%;
	height: 25rem;
	margin-top: 1rem;
	margin-left: 2rem;
	box-shadow: .1rem .1rem .2rem .2rem black;
	text-align: left;
	display: flex;
}
.catlogchail{

	width: 100%;
	height: 25rem;
	margin-top: 1rem;
	margin-left: 2rem;
	text-align: left;
	display: flex;
}
.subd123 a{
	margin-left: 12rem;
}

/* about us page*/

.pfont{
	font-size: 1.4rem;
}
#tit{
	font-size: 3rem;
	margin-left: 1rem;
	margin-top: 3rem;
	color: #1b1b1b;
	text-shadow: .1rem .1rem .1rem black;
	font-family: 'Tiro Gurmukhi', serif;
}
.pt{
	line-height: 2.8rem;
	letter-spacing: .15rem;
}

/* tiles page*/
#div12{
		color: black;
		font-size: 4.5rem;
		font-family: 'Tiro Gurmukhi', serif;
		text-shadow: .3rem .2rem .4rem gray;
	
}
.pertile{
	line-height: 2.5rem;
}
#loading{
	text-align: center;
	 background: no-repeat; 
	 display: none;
	 height: 50rem
}
#loadingimg{
	height: 11rem; 
	margin-top: 15rem;
}
 select{
	font-size: 2rem;
	height: 2rem;
	color: rgb(60, 60, 60);
}

#linehr{
	margin-top: 2.5rem;
	margin-bottom: .8rem;
}
#hading{
	font-size: 3rem;
	text-align: center; 
	margin-left: 2rem;
}
#logoimg{
	width: 12rem; height: 5rem;
	border-radius: 1rem;
	border: .1rem  solid ;
	box-shadow: 0 0 1rem #33ffff; 
}
#imageview{
     cursor: pointer;
}
.autodis{
	height: auto;
}
.page-item .page-link{
			cursor: pointer;
}
.gotopbtn{
	position: fixed;
	width: 5rem;
	height: 5rem;
	background-color: rgb(1, 1, 70);
	bottom: 1.5rem;
	right: 1.5rem;
	text-decoration: none;
	text-align: center;
	line-height: 5.5rem;
	font-size: 3.5rem;
	color: white;
	border-radius: 50%;
}
.gotopbtn:hover{
	color: white;
}