*{
	font-family:sans-serif;
	margin:0; padding:0;
	box-sizing:border-box;
	outline:none; border:none;
	text-decoration:none;
	box-sizing:bolder-box;
	 
}
html{
	font-size:65.5%;
	overflow-x:hidden;
}
html:: webkit-Scrollbar{
	width:1rem;
}
html:: webkit-Scrollbar-track{
	background-color:green;
}
html:: webkit-Scrollbar-thunb{
	background-color:black;
}
body{
	width:100%;
	padding:0;
	background-color:#c4c4c4;
	height:auto%;
	
}
section{
	padding:5rem 10%;
}
.header{
	position:fixed;
	top:0; left:0; right:0;
	z-index:1000;
	background-color:#ccc;
	padding-top:2rem;
	padding-bottom:2rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
	box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}
.navbar{
	flex:1;
	text-align:right;
	
}
.navbar a{
	text-decoration:none;
	display:inline-block;
	padding:4PX 6px;
	position:relative;
	color:black;
}
.navbar a::after {
	content:"";
	width:0%;
	height:2px;
	background:#f44336;
	display:block;
	margin:auto;
	transition:0.5s;
}
.navbar a:hover::after {
	width:100%;
	
	
	
}
.header .navbar a:hover{
	color:#f1f1f1;
}
#Material{
	font-size:14px;
	color:black;
	cursor:pointer;
	display:none;
}
h1{
	font-size:32px;
	text-align:center;
	margin-top:4rem;
	color:#000;
}
#footer{
	margin-top:5rem;
	align-items:center;
	background-color:#ccc;
	height:20vh;
	
}
#footer h4{
	text-align:center;
	font-size:14px;
	
}
#footer p{
	margin-top:2rem;
	text-align:center;
}
#queue_form{
	background-color:#f1f1f1;
	margin-left:40%;
	width:40%;
	margin-left:10rem;
	height:auto%;
}
#queue_form{
	align-items:center;
}
.menu:after{
		content:'menu';
	}
label{
	color:black;
	padding:1px;
	margin-top:1rem;
	margin-left:2rem;
	font-size:14pX;
	font-weight:bold;
}
input{
	padding:1px;
	margin-left:2rem;
	border:1px solid green;
	border-radius:10px;
	text-align:center;
	
}
input:hover{
	border:1px solid red;
}
#button1{
	color:green;
	background-color:rgb(0,0,0,1);
	border-radius:6px;
	width:30%;
	margin-top:2rem;
	font-size:20px;
	font-weight:bold;
}
#button1:hover{
	background-color:blue;
	font-size:24px;
}
select{
	background-color:white;
	width:50%;
	margin-left:2rem;
	padding:1px;
		border:1px solid green;
		border-radius:10px;
		text-align:center;
}
select:hover{
		border:1px solid red;
}
 a{
	font-size:20px;
	color:brown;
	
}
a:hover{
	font-size:24px;
	color:blue;
	
	
}
th td {
	border:1px solid;
	font-size:14px;
}

#login_form{
		width:450px;
	margin-top:14%;
	background:#ccc;
	height:350px;
	margin-left:20%;
}
#content{
	margin-left:15%;
	margin-top:5%;
	width:80%
}
.rowsd{
min-height:100vh;
}
.rowsd .gallery{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	padding-bottom:2rem 0;
}
.rowsd .gallery .g-box{

	 width:28rem;
	 height:40rem;
	 margin:2rem;
	 border:5px solid red;
	 box-shadow:.5rem 1rem;
	 position:relative;
	 overflow:hidden;

}
.rowsd .gallery .g-box img{
	width:100%;
	height:100%;
	object-fit:cover;
	
}
.rowsd .gallery .g-box .info{
	position:absolute;
	bottom:0;
	left:2rem;
	background:$fff;
	border-top:.5rem solid green;
	text-align:center;
}
.rowsd .gallery .g-box .info h3{
	font-size:2rem;
	color:#fff;
	padding:.5rem 0;
}
.rowsd .gallery .g-box:hover .info{
	bottom:6rem;
}
.main-content {
	width:90%;
	background-image:url("gallery/images (3).jpg");
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	margin:5rem;
	height:80%;
}






/* media querry  */
@media(max-width:1200px){
	section{
		padding:3rem 5%;
		
	}
	html{
	font-size:55.5%;
	overflow-x:hidden;
}
}
@media(max-width:991px){
	html{
		font-size:5.5%;
	}
	section{
		padding:3rem 3%;
		
	}
	h1{
	font-size:16px;
	text-align:center;
	margin-top:4rem;
}
#footer{
	margin-top:5rem;
	align-items:center;
	background-color:#ccc;
	height:12vh;
	
}
#footer h4{
	text-align:center;
	font-size:14px;
	
}
#footer p{
	margin-top:2rem;
	text-align:center;
}

	html{
	font-size:50.5%;
	overflow-x:hidden;
}
}
@media(max-width:768px){
	.navbar #links a{
		display:block;
	}
	.navbar{
		position:absolute;
		background:#f44336;
		width:100vh;
		width:200px;
		top:0;
		right:-200px;
		text-align:left;
		z-index:2;
		transition:1s;
		height:100vh; ]
		
		
	}
	#Material{
	font-size:14px;
	color:#fff;
	cursor:pointer;
	display:block;
	margin:10;
}
	#queue_form{
	background-color:#f1f1f1;
	margin-left:auto%;
	width:70%;
	height:auto%;
	margin-top:0px;
}
#login_form{
		width:400px;
	margin-top:40%;
	background:#ccc;
	height:350px;
	margin-left:5%;
}
	body{
	width:100%;
	padding:0;
	background-color:#c4c4c4;
	height:auto;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	
}
	h1{
	font-size:12px;
	text-align:center;
	margin-top:4rem;
}
#footer{
	margin-top:5rem;
	align-items:center;
	background-color:#ccc;
	height:8vh;
	
}
#footer h4{
	text-align:center;
	font-size:12px;
	
}
#footer p{
	margin-top:1rem;
	text-align:center;
}

	html{
	font-size:45.5%;
	overflow-x:hidden;
}
		#menu-btn{
	
	display:inline-flex;
	transition:.2s linear;
}
#mclse{
	display:none;
}
label{
	color:black;
	padding:0rem;
	margin-top:0.5rem;
	margin-left:0.1rem;
	font-size:8PX;
	font-weight:bold;
	display:block;
	}
	input{
	padding:0rem;
	margin-left:7rem;
	border:1px solid;
	width:40%;
	display:block;
}
section{
	margin-top:0px;
	padding:3rem 10%;
	display:flex;
}
#gallery{
	
	flex-flow:column;
	margin-left:5rem;
	margin-top:5rem;
}
#g-box{
		display:block;
	 width:200px;
	 height:100px;
	 margin-top:5px;
	 padding:3px;

}
.rowsd .gallery .g-box{

	 width:28rem;
	 height:40rem;
	 margin:.5rem;
	 border:5px solid red;
	 box-shadow:.5rem 1rem;
	 position:relative;
	 overflow:hidden;

}
}