body {
	background-size: cover;
	background-repeat: no-repeat;
	color: #5fb9ff;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	height: 100%;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	background: linear-gradient(295deg, #b2fa8857 3%, #0788f84d 38%, #f38aea50 68%);
	animation: bodybgchange 3s linear infinite;
	transition: 0.6s;
}

@keyframes bodybgchange {
	100% {
		background: linear-gradient(290deg, #f38aea50 3%, #0788f84d 38%, #b2fa8856 68%);
		/* filter: hue-rotate(360deg); */
	}
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: #fffffff3;
}

/* start h2 */

h2 {
	text-align: center;
	font-size: 40px;
	padding-bottom: 40px;
}

h2 span {
	color: #28a7e9;
	font-weight: bold;
}

h3 {
	text-align: center;
	font-size: 40px;
	padding-bottom: 40px;
}

h3 span {
	color: #28a7e9;
	font-weight: bold;
}

/* end h2 */

/* start about team service portfolio contact */
#about,
#team,
#service,
#portfolio,
#contact {
	padding-top: 60px;
	padding-bottom: 40px;
}

/* end about team service portfolio contact */

/* start preloader */
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row nowrap;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background: none repeat scroll 0 0 #ffffff;
}

.sk-spinner-wave.sk-spinner {
	width: 50px;
	height: 30px;
	text-align: center;
	font-size: 10px;
}

.sk-spinner-wave div {
	background-color: #003060c2;
	height: 100%;
	/* width: 3px; */
	display: inline-block;
	border: 3px solid #28A7e9;
	-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
	animation: sk-waveStretchDelay 1.2s infinite ease-in-out;

}

.sk-spinner-wave .sk-rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.sk-spinner-wave .sk-rect3 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

.sk-spinner-wave .sk-rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.sk-spinner-wave .sk-rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

@-webkit-keyframes sk-waveStretchDelay {

	0%,
	40%,
	100% {
		-webkit-transform: scaleY(0.4);
		transform: scaleY(0.4);
	}

	20% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
}

@keyframes sk-waveStretchDelay {

	0%,
	40%,
	100% {
		-webkit-transform: scaleY(0.4);
		transform: scaleY(0.4);
	}

	20% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
}

/* end preloader */

/* start nagivation */
.navbar-default {
	background: #28a7e9;
	border: none;
	overflow: hidden;
	box-shadow: none;
	margin: 0 !important;
	/* border-bottom: 5px solid #a0d0ff; */
	border-bottom: 5px solid #3d7aff;
	border-bottom-right-radius: 70%;
	border-bottom-width: 3px;
	position: fixed;
	transform: scale(1);
	animation: navWavyAnim 5s infinite;
	transition: all 3s;
}

/* upload animation */
@keyframes navWavyAnim {
	0% {
		border-bottom: 5px solid #b4d4f5;
		border-bottom-width: 3px;
		border-bottom-left-radius: 50%;
		/* transform: scale(1) */
	}

	30% {
		border-bottom: 5px solid #6eb2f7;
		border-bottom-width: 3px;
		border-bottom-left-radius: 100%;
		box-shadow: 5px 5px 15px #b7a0ee;
	}

	50% {
		border-bottom: 5px solid #4099f1;
		border-bottom-width: 8px;
		border-bottom-left-radius: 20%;
		/* transform: scale(1.1); */
	}

	70% {
		border-bottom: 5px solid #ff0f5faf;
		border-bottom-width: 9px;
		border-bottom-right-radius: 70%;
		box-shadow: 5px 5px 15px #87ceeb;
	}

	100% {
		border-bottom: 5px solid #f38aea50;
		border-bottom-width: 3px;
		border-bottom-right-radius: 50%;
		box-shadow: 5px 5px 15px #87ceeb;
	}

}

/* end upload animation */

/* dashboard */
div.maindash {
	position: fixed;
	margin-top: 20rem;
	right: 0;
	z-index: 1000;
	padding: 5px;
	width: 85px;
	height: 100%;
	background-color: transparent;
}

div.maindash .dashboard {
	width: 60%;
	height: 200px;
	overflow: hidden;
	border-radius: 50px;
	display: none;
	background: linear-gradient(45deg, #ff0f5faf, #f0f0f0);
}

.dashboard .icon-div {
	width: 100%;
	height: auto;
	align-items: center;
	text-align: center;
	background-color: transparent;
	color: #fff;
	transition: all 0.6s ease-in;
}

.icon-div .fa {
	font-size: 15px;
	margin-top: 15px;
	cursor: pointer;
	margin-bottom: 5rem;
}

.icon-div span {
	font-size: 10px;
	letter-spacing: 1.9px;
	color: #ffffff;
	font-weight: bold;
	cursor: pointer;
}

/* end dashboard */

.navbar-default .navbar-brand {
	font-weight: 700;
	font-size: 30px;
	height: 70px;
	padding: 20px 0px 0px 20px;
	letter-spacing: 5px;
	text-transform: uppercase;
}

.navbar-default .navbar-nav li a {
	margin-top: 10px;
	font-weight: bold;
	color: #ffffffce;
	font-size: 13px;
	height: 50px;
	transition: all 0.3s ease-in-out;
}

.navbar-default .navbar-nav li a:hover {
	font-weight: bold;
	color: #fff;
	font-size: 13px;
	height: 50px;
}

.navbar-default .navbar-nav>li>a.current {
	color: #add8e6;
	font-style: italic;
	text-decoration-style: dashed;
}

.templatemo-nav {
	border-radius: 0;
	width: 100%;
	z-index: 1000;
}

.sticky {
	position: fixed;
	left: 0;
	top: 0;
}

.header-name {
	text-transform: capitalize;
	color: #fff;
	font-size: 25px;
}

.header-name img {
	width: fit-content;
	height: 70px;
}

/* end navigation */

/* arrow */
.fa-arrow-down {
	font-weight: 200;
	font-size: x-large;
	animation: effectarrow 3s linear infinite;
}

@keyframes effectarrow {
	0% {
		color: #b1dff8;
	}

	50% {
		color: #5ec5fd;
	}

	70% {
		color: #00a6ff;
	}

	100% {
		color: #b1dff8;

	}
}

/* arrow */

/* start home */
#home {
	background: url('../images/images/bg-image/image-bg-1.jpg') no-repeat;
	background-size: cover;
	padding-top: 160px;
	padding-bottom: 100px;
	min-height: 100vh;
	animation: slideCar 10s linear infinite;
	filter: drop-shadow(10px 20px 10px #5e5e5e9c);
}


@keyframes slideCar {
	0% {
		background: url('../images/images/bg-image/image-bg-1.jpg') no-repeat;
		background-size: cover;
		padding-top: 160px;
		padding-bottom: 100px;
		min-height: 650px;
	}
	
	40% {
		background: url('../images/images/bg-image/image-bg-2.jpg') no-repeat;
		background-size: cover;
		padding-top: 160px;
		padding-bottom: 100px;
		min-height: 650px;
	}

	80% {
		background: url('../images/images/bg-image/image-bg-3.jpg') no-repeat;
		background-size: cover;
		padding-top: 160px;
		padding-bottom: 100px;
		min-height: 650px;
	}

	100% {
		background: url('../images/images/bg-image/image-bg-4.jpg') no-repeat;
		background-size: cover;
		padding-top: 160px;
		padding-bottom: 100px;
		min-height: 650px;
	}
}



#home-qbooking {
	background: transparent;
	background-size: cover;
	padding-top: 160px;
	padding-bottom: 100px;
	min-height: 100vh;
}

#home h1 {
	font-weight: 600;
	font: bold 20pt;
	font-family: "Roboto", serif;
	font-size: 70px;
	padding-bottom: 10;
	/*color: #f14f85;*/
	color: #ffffff; 
	letter-spacing: 1.9px;
	font-style: italic;
	text-align: center;
	-webkit-text-stroke: 1px #505050c9;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(5px);
	text-shadow: 0px 0px 4px #ff0f5f,
		0px 0px 8px #ff0f5f,
		0px 0px 14px #ff0f5f;
	/* background-color: #202020; */
}

#home h1 span {
	color: #48cae4;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

#home .btn {
	/* background: transparent; */
	background: linear-gradient(90deg, #f5f5f5cb, #89c9ec);
	border-radius: 10px;
	border: none;
	margin-top: 30px;
	width: 180px;
	height: 60px;
	padding-top: 21px;
}

#home .btn {
	color: #0099ff;
	font-size: 16px;
	font-weight: bold;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	animation: glowBtn 1.5s infinite;
}

#home .btn .fa {
	color: #0099ff;
	font-size: 30px;
	font-weight: bold;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	animation: glowBtn 1.5s infinite;
}

@keyframes glowBtn {
	0% {
		text-shadow: 0 0 6px #0099ff;
	}

	50% {
		text-shadow: 0 0 10px #0099ff;
	}

	100% {
		text-shadow: 0 0 16px #0099ff;
	}
}

#home .btn .fa:hover {
	/* background-color: #0c9fee; */
	color: #fff;
}

#home .btn:hover {
	background-color: #0c9fee;
	color: #fff;
}

.element {
	height: 60px;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 1.9px;
	font-style: italic;
	text-align: center;
	color: #f8f8f8;
	padding: 2rem;
	-webkit-text-stroke: 0px #000000b0;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	text-shadow: 10px 10px 20px rgb(5, 5, 5);
}

/* end home */

/* start about */
#about .media-heading-wrapper {
	padding-bottom: 32px;
}

#about .media-body {
	font-weight: bold;
	color: #32659c;
	font-family: 'Roboto', sans-serif;
}

#about .media-heading-wrapper .fa {
	border: 1px solid #fff;
	border-radius: 50%;
	color: #081F37;
	font-size: 24px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	margin-bottom: 20px;
	margin-right: 20px;
}

#about .media-heading-wrapper h3 {
	color: #081F37;
	font-size: 18px;
	font-weight: 700;
	padding-top: 20px;
	padding-left: 52px;
	margin: 20px;
}

/* end about */

/* start team */
#team .team-wrapper {
	background: #003060;
	padding-bottom: 5px;
	-webkit-transition: all 0.4s linear;
	transition: all 0.4s linear;
	position: relative;
	border: none;
}

#team .team-wrapper:hover {
	cursor: pointer;
	bottom: 4px;
	box-shadow: 2px 2px 16px #8cd7ff;
}

#team .team-wrapper .team-des {
	color: #fff;
	letter-spacing: 1.5px;
	padding: 12px;
	border-top: 1px solid #8b8b8b;
}

#team .team-wrapper .team-des span {
	color: #28a7e9;
	display: block;
	width: fit-content;
	font-weight: bold;
	letter-spacing: 1.9px;
	padding-bottom: 12px;
	transition: 0.5s linear;
}

#team .team-wrapper .team-des span:hover {
	color: #00ff00;
}

/* end team */

/* start service */
#service .col-md-4 {
	padding: 40px;
	background: #ffffff3f;
	text-align: center;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

#service .active {
	background: #ffffff3f;
	padding: 40px;
}

#service .fa {
	border: none;
	border-radius: 2px;
	color: #28A7e9;
	font-size: 50px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}

#service a {
	text-decoration: none;
}

#service .button-1 {
	width: 300px;
	background-color: rgba(92, 195, 255, 0.76);
	border-radius: 8px;
	border-width: 0;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	list-style: none;
	letter-spacing: 1px;
	margin: 0;
	padding: 10px 12px;
	text-align: center;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	vertical-align: baseline;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

#service .button-1:hover {
	background-color: #28A7e9;
	color: #ffffffe0;
}

#service .button-2 {
	width: 300px;
	background-color: rgba(92, 195, 255, 0.76);
	border-radius: 8px;
	border-width: 0;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	list-style: none;
	letter-spacing: 1px;
	margin: 0;
	padding: 10px 12px;
	text-align: center;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	vertical-align: baseline;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

#service .button-2:hover {
	background-color: #28A7e9;
	color: #ffffffe0;
}

#service .button-3 {
	width: 300px;
	background-color: rgba(92, 195, 255, 0.76);
	border-radius: 8px;
	border-width: 0;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	list-style: none;
	letter-spacing: 1px;
	margin: 0;
	padding: 10px 12px;
	text-align: center;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	vertical-align: baseline;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

#service .button-3:hover {
	background-color: #28A7e9;
	color: #ffffffe0;
}

#service h4 {
	color: #28a7e9;
	font-weight: 600;
	padding-top: 10px;
	padding-bottom: 14px;
}

/* end service */

/* start portfolio */
#portfolio {
	padding-bottom: 80px;
}

#portfolio .col-md-3 {
	padding: 0px;
}

.portfolio-thumb,
.portfolio-overlay {
	max-width: 450px;
}

#portfolio .portfolio-thumb {
	overflow: hidden;
	padding: 0;
	margin: 0 auto;
}

.img-responsive {
	width: 100%;
	height: 200px;
}

/* .img-responsive-blog {
	width: fit-content;
	height: 200px;
} */

/* .portfolio-overlay {
	display: none;
} */

#portfolio .portfolio-thumb .portfolio-overlay {
	background: #28a7e9;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	padding: 20px 10px 20px 20px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	border: 2px solid #28a7e9;
}

#portfolio .portfolio-thumb .portfolio-overlay h4 {
    margin-top: 7rem;
 	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}

/*#portfolio .portfolio-thumb .portfolio-overlay .btn {*/
/*	background: none;*/
/*	border: 1px solid #fff;*/
/*	border-radius: 2px;*/
/*	color: #fff;*/
/*	font-weight: bold;*/
/*	display: none;*/
/*}*/

#portfolio .portfolio-thumb:hover .portfolio-overlay {
	opacity: 0.8;
	color: #ffffff;
	border: 2px solid #28a7e9;
}

#portfolio .portfolio-thumb:hover .portfolio-overlay h4 {
	cursor: pointer;
	color: #ffffff;
}

/* end portfolio */

/* start contact */
#contact {
	/* background: #68BBE3; */
	--tw-bg-opacity: 1;
	background-color: rgb(18 18 18 / var(--tw-bg-opacity));
	color: #ffff;
	font-size: 12px;
}

#contact h2 span {
	color: #ffff;

}

#contact .form-control {
	background: transparent;
	border: 0.5px solid #fff;
	border-radius: 2px;
	box-shadow: none;
	color: #fff;
	font-size: 12px;
	margin-top: 6px;
	margin-bottom: 16px;
}

#contact label {
	font-weight: 500;
	font-size: 12px;
}

#contact input {
	width: 100%;
	height: 30px;
}

#contact input[type="text"],
input[type="email"] {
	width: 100%;
	font-weight: bold;
	letter-spacing: 1.9px;
	font-size: 12px;
}

#contact textarea {
	width: 100%;
	font-weight: bold;
	letter-spacing: 1.9px;
}

#contact button[type="submit"] {
	width: 100%;
	font-weight: bold;
	letter-spacing: 1.9px;
}

#contact button[type="submit"] {
	background: transparent;
	width: 100%;
	font-weight: bold;
	letter-spacing: 1.9px;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

#contact button[type="submit"]:hover {
	background: transparent;
}

#contact address {
	padding-top: 30px;
	letter-spacing: 1.5px;
}

#contact address .address-title {
	font-weight: bold;
	font-size: 12px;
	padding-bottom: 10px;
}

#contact address span {
	display: block;
	padding-bottom: 30px;
}

#contact address .fa {
	border: 0.5px solid #fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	margin-right: 10px;
	margin-bottom: 10px;
}

#contact #address-icons {
	font-size: 12px;
}

.loader {
	/* position: absolute; */
	margin-left: 15rem;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 0.6px solid #28a7e9;
	border-top: 0.6px solid #fff;
	border-bottom: 0.6px solid #fff;
	display: none;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* end contact */

/* start copyright */
#copyright {
	padding: 20px;
	--tw-bg-opacity: 5;
	background-color: rgb(18 18 18 / var(--tw-bg-opacity));
	color: #ffff;
	font-size: 12px;
}

#copyright p {
	font-family: sans-serif;
	font-weight: normal;
	letter-spacing: 1.5px;
	color: #ffff;
}

/* end copyright */

/* start social icon */
.social-icon {
	position: relative;
	padding: 0;
	margin: 0;
}

.social-icon h6 {
	display: inline-block;
	padding-right: 20px;
	letter-spacing: 1.5px;
}

.social-icon li {
	display: inline-block;
	list-style: none;
	font-size: 12px;
}

.social-icon li a {
	border-radius: 50%;
	color: #fff;
	width: 20px;
	height: 20px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.7s ease-in-out;
	margin-right: 10px;
}

/* end social icon */

@media only screen and (max-width: 1199px) and (max-width: 992px) {
	#portfolio .portfolio-thumb .portfolio-overlay {
		padding: 0px 8px;
	}
}

/* start 980 media quires */
@media only screen and (max-width: 980px) {
	.navbar-toggle .icon {
		color: #fff;
	}

	#team .team-wrapper {
		margin-top: 40px;
	}

	#portfolio .portfolio-thumb .portfolio-overlay {
		background: #28a7e9;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		position: absolute;
		padding: 40px 10px 20px 20px;
		-webkit-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}


}

/* end 360 media quires */

/* start 768 media quires */
@media only screen and (max-width: 767px) {
	#home {
		min-height: 300px;
		padding-top: 80px;
		padding-bottom: 60px;
	}

	#home h1 {
		font-size: 52px;
	}

	#home .btn {
		background: linear-gradient(90deg, #f5f5f5cb, #89c9ec);
		border-radius: 10px;
		border: none;
		margin-top: 10rem;
		width: 180px;
		height: 60px;
		padding-top: 18px;
	}
	#home .btn {
		color: #0099ff;
		font-size: 16px;
		font-weight: bold;
		-webkit-transition: 0.5s;
		transition: 0.5s;
		animation: glowBtn 1.5s infinite;
	}
	
	#home .btn .fa {
		color: #0099ff;
		font-size: 30px;
		font-weight: bold;
		-webkit-transition: 0.5s;
		transition: 0.5s;
		animation: glowBtn 1.5s infinite;
	}
	
	@keyframes glowBtn {
		0% {
			text-shadow: 0 0 6px #0099ff;
		}
	
		50% {
			text-shadow: 0 0 10px #0099ff;
		}
	
		100% {
			text-shadow: 0 0 16px #0099ff;
		}
	}

	.templatemo-nav {
		position: fixed;
		top: 0;
	}

	.navbar-toggle {
		margin-top: 15px;
		background-color: #ffffff;
	}

	.navbar-collapse {
		overflow-y: auto;
		background-color: #c9c9c9;
	}

	.navbar-default .navbar-nav li a {
		color: #28a7e9;
	}

	.navbar-default .navbar-nav>li>a.current {
		color: #ffffff;
		font-style: italic;
		text-decoration-style: dashed;
	}

	.blogPostView #cardImg {
		position: relative;
	
		max-width: 100%;
		/* Full viewport width */
	
		left: 48%;
		/* Start at the center of the container */
	
		right: 50%;
		/* End at the center of the container */
	
		margin-left: -50vw;
		/* Move left by half the viewport width */
	
		margin-right: -50vw;

		background-color: transparent;
	}
	
	.blogPostView #cardImg img {
		margin-right: 2px;
		width: 99vw;
		/* Ensure the image fills the full width */
		height: auto;
		/* Maintain aspect ratio */
	}	

}

/* end 768 media quires */

/* start 360 media quires */
@media only screen and (max-width: 360px) {

	#home {
		min-height: 200px;
		padding-top: 60px;
		padding-bottom: 40px;
	}

	#home h1 {
		font-size: 32px;
	}
}

/* end 360 media quires */


/* authentication file style */
#home-qbooking .container h2 {
	margin-top: 7rem;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 27px;
	color: #00ff00;
	letter-spacing: 1.9px;
}

#home-qbooking .container h5 {
	padding: 2px;
	font-size: small;
	width: fit-content;
	float: right;
	font-weight: bold;
}


#home-qbooking .container .form-div {
    margin: 15px;
	padding: 15px;
	height: 400px;
	background-color: #ffffff80;
	border: 1px solid #fff;
	border-radius: 10px;
}

/*form-div-otp*/
#home-qbooking .container .form-div-otp {
    margin: 15px;
	padding: 80px;
	height: 400px;
	background-color: #ffffff80;
	border: 1px solid #fff;
	border-radius: 10px;
}

.form-div input[type=email] {
	margin: 2rem 0 2rem 0;
	padding: 10px;
	width: 200px;
	text-align: start;
	color: #28A7e9;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	background-color: transparent;
	outline: none;
	border: none;
}

.form-div input[type=email]::placeholder {
	color: #28A7e9;
}

.form-div input[type=submit] {
	margin: 10px;
	padding: 5px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	width: 230px;
	height: auto;
	background-color: #5dc6fff1;
	border: 2px solid #28a7e9;
	border-radius: 5px;
	text-transform: capitalize;
	letter-spacing: 1.9px;
	transition: all 0.5s;
}

.form-div input[type=submit]:hover {
	background-color: #28a7e9;
	border: 2px solid #28a7e9;
	color: #ffffff;
	text-transform: capitalize;
}

.form-div button[type=submit] {
	margin: 10px;
	padding: 5px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	width: 230px;
	height: auto;
	background-color: #5dc6ff9c;
	border: 2px solid #28a7e9;
	border-radius: 5px;
	text-transform: capitalize;
	letter-spacing: 1.9px;
	transition: all 0.5s;
}

.form-div button[type=submit]:hover {
	background-color: #28a7e9;
	border: 2px solid #28a7e9;
	color: #ffffff;
	text-transform: capitalize;
}

.form-div .divPhoneNumber .alert-span {
	/* color: #ff0000; */
	font-size: 15px;
	font-weight: bolder;
	animation: alertAnim 1.6s linear infinite;
}

@keyframes alertAnim {
	0% {
		color: #fa6060;
	}

	50% {
		color: #fa6060;
	}

	100% {
		color: #9b1818;
	}
}

/* otp entry field */
.otp-field {
	background-color: transparent;
	margin-top: 1rem;
	display: inline-block;
}

.otp-field input[type="text"] {
	width: 100%;
	font-size: 16px;
	padding: 7px;
	text-align: center;
	margin: 2px;
	border: 2px solid transparent;
	background: transparent;
	font-weight: bold;
	color: #28a7e9;
	outline: none;
	transition: all 0.1s;
}

.otp-field input[type="text"]::placeholder {
	color: #28a7e9;
}

/* .otp-field input[type="text"]:focus {
	border-bottom: 0px solid #28a7e9;
} */

.otp-field input[type="submit"] {
	width: 100%;
	border: none;
	text-transform: capitalize;
	color: #fff;
	background-color: #5dc6ff9c;
	border: 2px solid #28a7e9;
	letter-spacing: 1.9px;
	transition: all 3s;
}

.otp-field input[type=submit]:hover {
	background-color: #28a7e9;
	color: #ffffff;
	text-transform: capitalize;
}

.otp-field input[type="button"] {
	width: 100%;
	border: none;
	text-transform: capitalize;
	color: #fff;
	background-color: #5dc6ff9c;
	border: 2px solid #28a7e9;
	letter-spacing: 1.9px;
	transition: all 3s;
}

.otp-field input[type=button]:hover {
	background-color: #28a7e9;
	color: #ffffff;
	text-transform: capitalize;
}

.disabled {
	opacity: 0.5;
}

.space {
	margin-right: 1rem !important;
}

.message-otp {
	font-weight: 700;
	margin-top: 5rem;
}

#expired-otp {
	letter-spacing: 1.9px;
	font-weight: bold;
}

#regenerate,
#timer {
	margin: 5px;
	padding: 5px;
	color: #28a7e9;
	text-transform: capitalize;
	letter-spacing: 1.9px;
	font-weight: 400;
}

/* #otp-timer {
	width: 250px;
	margin-right: 2rem;
	text-align: start;
} */
/* #otp-timer h4 {
	margin-left: 5px;
} */

#otp-timer button {
	/* margin-right: 10rem; */
	color: #83838385;
	background-color: inherit;
	border: none;
}

/* end otp */

/* end authentication file style */

/* qbooking section */
div.elem-group {
	margin: 20px 0;
	display: block;
}

div.elem-group {
	width: 100%;
	margin-left: 1%;
}

label {
	display: flex;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	padding-bottom: 10px;
	font-size: 1.25em;
	letter-spacing: 1.5px;
}

div.elem-group input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"] {
	width: 80%;
	height: auto;
	padding: 10px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 600;
	color: #3a3a3a;
	font-size: 18px;
	border: none;
	outline: none;
	line-height: 20px;
	border-radius: 5px;
}

div.elem-group select {
	width: 80%;
	height: auto;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: #3a3a3a;
	font-size: 15px;
	border: none;
	background-color: #dadada;
	padding: 10px;
	outline: none;
	border-radius: 5px;

}

div.elem-group textarea {
	width: 80%;
	height: 100px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: #3a3a3a;
	font-size: 15px;
	font-weight: bold;
	border: none;
	outline: none;
	border-radius: 5px;
}

div.elem-group button[type=submit] {
	width: 80%;
	height: 50px;
	background: #fff;
	border: none;
	color: #28A7E9;
	letter-spacing: 1.9px;
	font-size: 15px;
	font-weight: bold;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	border-radius: 4px;
	border: 0 solid #28A7E9;
	cursor: pointer;
	margin-bottom: 5rem;
	transition: all 0.5s;
}

input::placeholder {
	font-weight: 500;
}

::-webkit-calendar-picker-indicator {
	background-color: #ffffff;
	color: #3a3a3a;
	cursor: pointer;
	border-radius: 3px;
}

/* #selectOption {
	font-weight: bold;
	background: linear-gradient(orange, white, green);
	color: #353535;
	cursor: pointer;
	height: 30px;
	border-radius: 5px;
} */

#bookingLocationPlaceClass,
#bookingLocationClass,
.booking-date-schedule {
	font-weight: bold;
}

textarea::placeholder {
	font-weight: bold;
}

.bookingBtn {
	width: 80%;
	height: 50px;
	background: #fff;
	border: none;
	color: #28A7E9;
	letter-spacing: 1.9px;
	font-size: 15px;
	font-weight: bold;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	border-radius: 4px;
	border: 0 solid #28A7E9;
	cursor: pointer;
	margin-bottom: 5rem;
	transition: all 0.5s;
}

/* .bookingBtn:hover {
	background-color: #686969;
	color: #ffffff;
} */

div.elem-group .alert-span {
	/* color: #ff0000; */
	margin: 3px;
	padding: 1px;
	font-size: 13px;
	font-weight: bolder;
	animation: alertAnim 1.6s linear infinite;
}

@keyframes alertAnim {
	0% {
		color: #fa6060;
	}

	50% {
		color: #fa6060;
	}

	100% {
		color: #9b1818;
	}
}

/* end qbooking section  */

/* list of locations */
.allLists {
	background-color: transparent;
	padding: 2px;
	margin: 2px;
	width: 90%;
	/* height: 100%; */
	border-radius: 10px;
}

/* districts section */
.districts-main {
	margin: 1.5rem;
	padding: 1.5rem;
	display: inline;
	/* margin-bottom: 5rem; */
	background-color: #28A7E9;
}

.districts-header {
	width: 200px;
	text-align: center;
	color: #fff;
	display: inline-block;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

.districts-header h4 {
	cursor: pointer;
}

/* end districts section */

/* dashboard cards */
#home-qbooking .container .main-view {
	width: 95%;
	height: 50px;
	background-color: transparent;
	margin-bottom: 1rem;
	margin-left: 1.3rem;
}

.container .main-view .views {
	margin: 0.5rem;
	padding: 0.5rem;
	padding-right: 0.5rem;
	margin-bottom: 2rem;
	width: 95%;
	height: fit-content;
	line-height: 50px;
	background-color: #28a7e9;
	border-radius: 5px;
	overflow: hidden;
	display: inline-block;
}

.list-view a {
	padding: 5px;
	margin: 5px;
	width: 60px;
	height: 60px;
	transition: 1s;
	border-radius: 50%;
	letter-spacing: 1.9px;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
}

.list-view a .fa {
	font-size: 20px;
}

.list-view abbr[title],
acronym[title] {
	border: none;
}

.list-view a:hover {
	color: #ececec;
	font-style: italic;
	/* background-color: #ccc; */
}

.list-view .active {
	color: #ececec;
	font-style: italic;
}

/* end dashboard cards */


/* cars view */
.desireView {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 90%;
	margin-left: 2rem;
	background-color: #e7e7e7;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	display: none;
}

.card {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 4px;
	padding: 20px;
	width: 100%;
	box-shadow: 0 2px 4px #5554541a;
}

.desireView .card h4 {
	margin: 0 0 5px 0;
	padding: 5px;
}

.desireView .card p {
	margin: 0 0 10px 0;
	padding: 5px;
	color: #8b8b8b;
}

.card img {
	width: 100%;
	height: auto;
}

.card #hr {
	color: black;
}

.card p .btn {
	color: #ffffff;
	width: 100%;
	background-color: #c7c7c7;
	font-weight: 600;
	text-transform: capitalize;
	letter-spacing: 1.9px;
}

/* blog post view */
.blogPostView {
	/* display: flex; */
	/* flex-wrap: wrap; */
	gap: 20px;
	width: 90%;
	margin-left: 2rem;
	background-color: #ddd;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	margin-bottom: 2rem;
	padding: 5px;
}

.blogPostView .cardTitle {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	margin-bottom: 1px;
	margin: 10px;
	padding: 10px;
	width: 95%;
	box-shadow: 0 2px 4px #5554541a;
}

.blogPostView .cardTitle h4 {
	margin: 0 0 0 0;
	padding: 5px;
}

.blogPostView .cardImg {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	margin-bottom: 1px;
	margin: 10px;
	padding: 10px;
	width: 95%;
}

.blogPostView .cardImg img {
	margin-right: 2px;
	width: 100%;
	/* Ensure the image fills the full width */
	height: auto;
	/* Maintain aspect ratio */
}


.blogPostView .cardText {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	margin-bottom: 1px;
	margin: 10px;
	padding: 10px;
	width: 95%;
	box-shadow: 0 2px 4px #5554541a;
}

.blogPostView .cardText span {
	margin: 0 0 0 0;
}

.blogPostView .cardText hr {
	background-color: #555555;
}

.blogPostView .cardText p .btn {
	margin-top: 10px;
	color: #ffffff;
	width: 100%;
	background-color: #c7c7c7;
	font-weight: 600;
	text-transform: capitalize;
	letter-spacing: 1.9px;
}


/* blog view */
#blog {
	display: none;
}

.dashview {
	display: none;
}

#bkngstatus {
	display: none;
}

.blogview {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 90%;
	padding: 5px;
	margin-left: 1.7rem;
	background-color: #ddd;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	margin-bottom: 2rem;
}

.blogCardView {
	background-color: transparent;
	border-radius: 8px;
	margin-bottom: 4px;
	padding: 2rem;
	width: 100%;
	height: auto;
	display: block;
	/* box-shadow: 0 2px 4px #5554541a; */
}

.blogCardView .input_div {
	display: inline-block;
	top: 0;
	width: 100%;
	padding: 5px;
	position: relative;
}


.blogCardView h4 {
	margin: 0 0 5px 0;
	padding: 5px;
}

.blogCardView h5 {
	margin: 0 0 10px 0;
	padding: 5px;
	color: #8b8b8b;
}

.input_div .image label {
	width: 300px;
	height: auto;
	cursor: pointer;
	margin: 8px;
	padding: 8px;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.input_div .image label .fa {
	font-weight: bold;
	color: #727272;
	text-transform: capitalize;
}

.blogCardView #hr {
	color: black;
}

.blogCardView p .btn {
	color: #ffffff;
	width: 100%;
	background-color: #c7c7c7;
	font-weight: 600;
	text-transform: capitalize;
	letter-spacing: 1.9px;
}

.blogCardView #blogPostForm {
	width: 100%;
	height: auto;
	background-color: transparent;
}

.input_div label input[type=file] {
	display: none;
}

.input_div input[type=text] {
	color: #0099ff;
	font-size: 20px;
	text-transform: capitalize;
	outline: none;
	border: none;
	font-weight: bold;
	letter-spacing: 1.9px;
	display: flex;
	margin: 10px;
	padding: 10px;
	width: 100%;
}

.input_div input::placeholder {
	letter-spacing: 1.9px;
	color: #0099ff;
}

.input_div button[type=submit] {
	color: #8b8b8b;
	font-size: 20px;
	text-transform: capitalize;
	font-weight: bold;
	margin: 8px;
	padding: 8px;
	width: 100%;
	border: none;
	background-color: #fff;
}

.blogview .actionBtn {
	margin: 5px;
	padding: 5px;
	margin-left: 2.5rem;
	border-radius: 50%;
	/* width: 30px; */
	/* height: 30px; */
	background-color: transparent;
	text-align: center;
	align-items: center;
	cursor: pointer;
	z-index: 1;
	transition: all 0.5s;
}

.blogview .actionBtnBkng {
	margin: 5px;
	padding: 5px;
	margin-left: 2.5rem;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	background-color: transparent;
	text-align: center;
	align-items: center;
	cursor: pointer;
	z-index: 1;
	transition: all 0.5s;
}

.blogview .actionBtnDashview {
	margin: 5px;
	padding: 5px;
	margin-left: 2.5rem;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	background-color: transparent;
	text-align: center;
	align-items: center;
	cursor: pointer;
	z-index: 1;
	transition: all 0.5s;
}

/* .blogview .actionBtn:hover {
	box-shadow: 0 0 6px #8b8b8b;
} */

.blogview .actionBtn i {
	margin: 1px;
	padding: 1px;
	color: #979191;
	font-size: 17px;
}

/* scrolling bar */
.bar {
	height: 0%;
	background-image: linear-gradient(to top, #64c1f3, #28a7e9);
	/* background-image: linear-gradient(to top,  #4caf4fc2, #8bc34abd); */
	transition: height 0.5s ease-in-out;
	animation: pulse 2s linear infinite;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

/* blog view */
/* .activities {
	display: block;
} */

.activitiesView {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 90%;
	margin-left: 1.5rem;
	background-color: #e7e7e7;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

.activitiesView .activitiesCardView {
	display: block;
	width: 100%;
	height: auto;
	padding: 2rem;
}

.activitiesView .progress-container {
	display: inline-block;
	margin-right: 1rem;
	position: relative;
	width: 150px;
	height: 150px;
	padding: 10px;
	/* background-color: #dddddd; */
	/* filter: drop-shadow(10px 20px 10px #7e7e7ecb); */
	border-radius: 5px;
}

.activitiesView .progress-circle {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	/* background: conic-gradient(#00ff00 0% 0%, #ddd 0% 100%); */
	/* background: conic-gradient(#f560c8 0% 0%, #ddd 0% 100%); */
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: progressScale 3s linear infinite;
}

@keyframes progressScale {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

.activitiesView .progress-circle::before {
	content: '';
	position: absolute;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background-color: #fff;
	border: 1.5px solid #c2c2c2;
	filter: drop-shadow(10px 20px 10px #5e5e5e56);
}

.activitiesView .progress-text {
	position: absolute;
	font-size: 24px;
	font-weight: bold;
	color: #b4b4b4;
}

.activitiesView #progress-text0 {
	position: relative;
	margin-top: 2rem;
	margin-top: 3rem;
	font-size: 16px;
	letter-spacing: 1.9px;
	font-weight: bold;
	color: #ffffff;
}

.table-responsive table button {
	width: fit-content;
	height: fit-content;
	padding: 3px;
	margin: 3px;
	background-color: #0099ff;
	color: #fff;
	border: 1px solid #ffff00;
}

.table_container {
	background-color: #FFF;
	width: 90%;
	border-radius: 5px;
	margin-left: 1.7rem;
}

fieldset {
	padding: 1rem;
	border-radius: 5px;
	/* background-color: #003060; */
	width: 100%;
}

legend {
	font-size: 20px;
	font-weight: bold;
	padding: 0 0.5rem;
	color: #0099ff;
	text-transform: uppercase;
	text-align: center;
}

label {
	display: block;
	margin-bottom: 0.5rem;
}

.search-container {
	align-items: center;
	border: 2px solid #ccc;
	background-color: #fff;
	border-radius: 5px;
	padding: 0.6rem;
	width: 100%;
	display: block;
}

.search-container input {
	border: none;
	outline: none;
	flex: 1;
	padding: 1.2rem;
	letter-spacing: 1.9px;
	font-size: 20px;
	width: 90%;
	color: #969595;
	/* background-color: #081F37; */
}

.search-container input::placeholder {
	color: #969595;
}

.search-container .data {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
}

/* .search-button {
	background: #fff;
	border: none;
	cursor: pointer;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
} */

.search-container .btn {
	color: #969595;
}

.search-container svg {
	fill: #333;
	transition: fill 0.3s;
	cursor: pointer;
	margin: 6px;
	line-height: 20;
	display: inline-block;
}

/* .search-button:hover svg {
	fill: #ccc;
} */

.data .data_div {
	width: 100%;
	height: auto;
	margin-block: 5px;
	padding-inline: 5px;
	background-color: transparent;
	letter-spacing: 1.9px;
	flex-wrap: wrap;
}

.data_div p {
    text-align: center;
    font-size: 20px;
}

.data .data_div button {
	font-weight: bold;
	letter-spacing: 1.9px;
}

.data .data_div h5 {
	padding: 1.5rem;
	color: #fff;
}

.data .data_div:hover {
	background-color: #e6e5e544;
}

.data .data_div button {
	width: 90px;
	height: 40px;
	position: relative;
	font-family: var(--font);
	color: #3b82f6;
	font-weight: 600;
	background-color: #fff;
	cursor: pointer;
	border: none;
	overflow: hidden;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
	transition: all ease 100ms;
}

.data .data_div button:hover {
	background-color: #cbdcf8;
}

.data .data_div button:focus {
	background-color: #cbdcf8;
}

.data .data_div button::before {
	content: 'Placed ✅';
	position: absolute;
	color: #3b82f6;
	left: 0;
	top: -14px;
	right: 0;
	transition: all ease 300ms;
	opacity: 0%;
}

.data .data_div button:focus::before {
	opacity: 100%;
	transform: translatey(26px);
}

.data .data_div {
	transition: all ease 100ms;
	opacity: 100%;
}

.data .data_div button:focus>.submit {
	opacity: 0%;
}

.edit_btn {
	cursor: pointer;
}

.blogCardView .table-responsive .table input {
	outline: none;
	border: none;
	width: fit-content;
}