@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

/*roboto*/

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--blue-color: #007aff;
	--primary-color: #ff9d3d;
	--dark-green: #07031f;
	--max-width-laptop: 1200px;
	--max-width-desktop: 1700px;
}

body {
	background-color: #ff9e3d17;
	font-family: "roboto", sans-serif;
	padding-bottom: 30px;
}

.log {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.log .top {
	width: 100%;
	height: 43dvh;
	margin-bottom: 12px;
	position: relative;
	background: #007aff;
}

.top img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

	z-index: 1;
}

.top h3 {
	position: absolute;
	bottom: 25%;
	left: 25%;
	z-index: 3;
	font-size: clamp(21px, 2vw, 33px);
	color: var(--blue-color);
	-webkit-text-stroke: 0.6px #ffffff;
}

.top p {
	font-size: 17px;
	position: absolute;
	bottom: 18%;
	left: 25%;
	z-index: 3;
	color: #ffffff;
	background-color: #00000077;
}

.log h3 {
	margin: 18px 0;
	text-align: center;
	letter-spacing: 0.6px;
}

form {
	display: inline-flex;
	flex-direction: column;
	width: 100%;
	max-width: 1000px;
	padding: 1.5% 12px;
	border-radius: 12px;
	background-color: #ffffff;
}

form .component {
	display: inline-flex;
	flex-wrap: wrap;
	column-gap: 12px;
	row-gap: 12px;
	margin: 8px 0;
}

.component .in-c {
	flex: 1;
}

.component .in-c {
	display: inline-flex;
	flex-direction: column;
	column-gap: 4px;
	margin-bottom: 12px;
}

.in-c label {
	margin-bottom: 4px;
	color: var(--blue-color);
}

label {
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	color: var(--blue-color);
	padding-left: 3px;
}

input {
	border-radius: 8px;
	height: 35px;
}
select {
	display: inline-flex;
	border: none;
	outline: none;
	min-width: 200px;
	background-color: #ff9e3d17;
	padding: 4px 0px 4px 0px;
	font-size: 17px;
	border-radius: 2px;
	color: var(--dark-green);
}

input,
textarea {
	display: inline-flex;
	border: none;
	outline: none;
	min-width: 200px;
	background-color: #ff9e3d17;
	padding-left: 4px;
	font-size: 17px;

	&:focus {
		background-color: #007aff17;
		border: 1px solid var(--blue-color);
	}
}

input::placeholder {
	color: var(--blue-color);
}

#description {
	margin-top: 3px;
	margin-bottom: 12px;
	height: 3lh;
	width: 100%;
	border-radius: 12px;
	border: none;
	padding-top: 4px;
	padding-left: 6px;
}

form #submit {
	width: 100%;
	max-width: 200px;
	font-size: 18px;
	background-color: var(--blue-color);
	color: #ffffff;
	font-weight: 600;
	padding: 6px 12px 6px 8px;
	border: none;
	border-radius: 8px;
	margin: 6px auto 0 auto;

	&:hover {
		background-color: #ff9e3dcb;
		color: #ffffff;
	}
}

.offline-booking {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 6px;
}

.offline-booking a {
	margin: 6px 6px;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	color: #252525;
	width: fit-content;
	color: var(--dark-green);

	&:hover {
		color: var(--blue-color);
	}
}

a .material-symbols-outlined {
	position: relative;
	top: 4px;
}

.footer {
	display: flex;
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 2px 0;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background-color: var(--dark-green);
}