/* homepage css */
.logo-name{
	font-family: 'Rubik Maps', system-ui;
	font-size:40px;
	float:left;
}
.left-side{
	background-color:pink;
	width:10%;
	height:900px;
	float:left;
	z-index:0;
}
.right-side{
	background-color:pink;
	width:10%;
	height:900px;
	float:right;
	z-index:0;
}
.navdivv{
	width:30%;
}
.bgg{
	height:800px;
	z-index:1;
}
.working{
	display:flex;
	flex-direction:row;
	justify-content:center;
}
.cardicons{
	display:flex;
	justify-content:center;
}
.feature{
	display:flex;
	flex-direction:row;
	justify-content:center;
}
.feature-card{
	width:22rem;
}
.feature-service{
	display:flex;
	flex-direction:row;
}
.cardddss{
	width:19.8rem;
}
								/* homepage css ends */
									/* booking page css */

.w{
	width:98%;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	padding:2%;
	border-radius:15px;
}
.book{
	margin-left:12%;
}
.basic{
	width:98%;
}
.basic form{
	display:flex;
	flex-direction:column;
}
.guests{
	width:60%;
}
.days{
	display:flex;
	flex-direction:column;
	width:53%;
}
.days button{
	margin-left:3%;
	margin-top:3%;
}
.duration{
	width:60%;
}
.time{
	width:80%;
}
.first-column{
	margin-left:10%;
}
.slot{
	display:flex;
	flex-direction:row;
	width:100%
}
.start-and-end{
	margin-left:2%;
	display:flex;
	flex-direction:row;
	width:100%;
}
.but-desktop {
	margin-left:1.7%;
	margin-bottom:1%;
}
.starttime{
	width:50%;
	margin-left:2%;
}
.starttime input{
	width:50%;
}
.input1{
	width:30%;
}
.time-slot-container {
	display: flex;
	flex-wrap: wrap;
}

.time-slot-item {
	width: 25%; /* Adjust width and spacing as needed for larger screens */
	margin-right: 10px;
	margin-bottom: 10px;
}

					/* booking page css end */
					/* sign up user css */
.logo-name{
	font-family: 'Rubik Maps', system-ui;
	font-size:40px;
	float:left;
}
.signup-img-m{
	display:none;
}
.signup-img-d{
	display:block;
}
.sign-form{
	width:50%;
}
.formm {
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	margin-left:5%;
}
.slogan{
	color:black;
}

					/* sign up user css ends */
					/* login user css */
.big-div{
	display:flex;
	flex-direction:row;
}
.imgdiv{
	display:block;
}
.logindiv{
	width:50%;
}
					/* login user css ends */
/* user booking page css */
.logo-name{
	font-family: 'Rubik Maps', system-ui;
	font-size:40px;
	float:left;
}
.width{
	height:250px;
	background-image:url('images/bg3.png');
	background-repeat:no-repeat;
	background-size:100% 100%;

}
.book{
	margin-left:12%;
}
.Statistics{
	height:290px;
	width:75%;
	border-radius:5px;
	border:1px solid gray;

}
.text1{
	font-size:22px;
	padding-left:5%;
}
.Total-div{
		height:38%;
		width:40%;
		float:left;
		border-radius:5px;
		display:flex;
		margin-left:5%;
	}
	.Total-div1{
		border-radius:5px;
		margin-left:10%;
		width:55%;
	}
	.Total-div2{
		border-radius:5px;
		width:20%;
		height:60%;
	}
	.text2{
		font-size:20px;
	}
	.bgg-user{
	height:350px;
}
.carddd1{
	width:33rem;
}
table.table tbody tr td,
table.table thead tr th,
table.table thead {
	font-size:20px;

}
.buttonss{
	width:20%;
	background-color:#A1E326;
}
.navflex{
	display:flex;
	flex-direction:row;
	justify-content:end;
}
@media only screen and (max-width:800px){
		/*mobile homepage css */
		.navflex{
			display:flex;
			flex-direction:column;
			justify-content:start;
			align-items:start;
		}

		/*mobile homepage css */
		.navdivv{
			width:100%;
		}
		.bgg{
			height:340px;
		}
		.working{

			display:flex;
			flex-direction:column;
			justify-content:center;
		}
		.feature{
			display:flex;
			flex-direction:column;
			justify-content:center;
		}
		.feature-card{
			width:100%;
		}
		.cardddss{
			width:100%;
		}
		/* mobile homepage css ends */
		/*mobile bookingpage css */
		.width{
			height:150px;
		}
		.basic{
			width:100%;
		}
		.guests{
			width:90%;
		}
		.days{
			display:flex;
			flex-direction:column;
			width:100%;
			margin-left:15%;
		}
		.first-column{
			margin-left:0%;
		}
		.duration{
			width:100%;
		}
		.startt{
			width:100%;
		}
		.w{
			width:100%;
			box-shadow:none;
			padding:3%;
		}
		.time{
			width:100%;
		}
		.slot{
			display:flex;
			flex-direction:column;
			width:45%;
		}
		.start-and-end{
			margin-left:0%;
			display:flex;
			flex-direction:column;
		}
		.but-desktop{
			margin-left:0%;
			margin-bottom:0%;
		}
		.input1{
			width:90%;
		}
		/* mobile bookingpage css ends */
		/* mobile signup css */
		.signup-img-m{
			display:block;
		}
		.signup-img-d{
			display:none;
		}
		.sign-form{
			width:100%;
			height:100%;
			background-image:url('images/loginimg.jpg');
			background-repeat:no-repeat;
		}
		.formm{
			background:transparent;
			box-shadow:none;
			border:none;
			margin-left:0%;
		}
		.slogan{
			color:white;
		}
			/* mobile signup user css ends */
			/* mobile login user css  */
		.big-div{
			display:flex;
			flex-direction:column;
		}
		.imgdiv{
			display:none;
		}
		.logindiv{
			width:100%;
			background-image:url("images/loginimg.jpg");
			height:800px;
			width:100%;
		}
		.logincard{
			width:100%;
		}
		/* user booking mobile views css*/
			.width{
				height:150px;
			}
			.basic{
				width:100%;
			}
			.Statistics{
				height:460px;
				width:90%;
				border-radius:5px;
				border:1px solid gray;
			}
			.text1{
				font-size:22px;
				text-align:center;
			}
			.Total-div{
				height:26%;
				width:90%;
				float:left;
				border-radius:5px;
			}
			.Total-div1{
				border-radius:5px;
				margin-left:4%;
				width:65%;
			}
			.Total-div2{
				border-radius:5px;
				width:23%;
				height:60%;
			}
			.text2{
				font-size:20px;
			}
			.bgg-user{
				height:120px;
			}
			.carddd1{
				width:100%;
			}
			.buttonss{
				width:80%;
			}
			table.table tbody tr td,
			table.table thead tr th,
			table.table thead {
				font-size:16px;

			}
			/* services css*/
			.m-list{
				width:100%;
			}
			.feature-service{
				display:flex;
				flex-direction:column;
				width:100%;
			}
			.feature-card{
				width:100%;
			}
			.time-slot-item {
				width: 45%;

			}
			.time-slot-item {
				width: 100%;
			}

}