.topdiv
{
	width: 100%;
	position: fixed;
	z-index: 1000;
	top:0px;
	padding: 10px;
	margin: auto auto;
	
}

.dark
{
	color:var(--dark2);
}

.header
{
	display: flex;
	gap:10px;
	width: 90%;
	border-radius: 50px;
	background: rgba(237, 158, 28,0.4);
	margin:10px auto;
	padding: 0px 3rem;
	outline: 1px solid blur(25px);
	transition: all 0.7s ease-in-out;

	

	& .logo
	{
		padding: 5px 0px;
		& img
		{
			width: 80px;
		}
	}

	& .links
	{
		
		color:var(--white);
		font-family: jost-bold;
		display: flex;
		gap:20px;
		padding:20px 16px ;
		margin-left: auto;

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

	& .hbtn
	{
		padding: 20px 5px;
		margin-left: auto;
	}

	& .navbtn
	{
		color:white;
		padding: 16px 16px;
		cursor: pointer;
		&:hover
		{
			color:var(--blue);
		}
	}
}

.bg
{
	background:var(--color3);
}

.heroimage
{
	height: 100vh;
	background:var(--dark2);
	position: relative;
	& .content
	{
		padding: 15rem 16px;
	}
}

.outercheck
{
	position: absolute;
	margin-top: -5rem;
	width: 100%;
	padding: 0px 2rem;
	z-index: 20;
}



.herotext
{
	padding:4rem 10px 16px;
	font-family: jost;
	font-size: 16px;
	color:white;
	text-align: center;

	& .part1
	{
		font-family: jost-bold;
		font-size: 44px;
	}
}

.bookwidget
{
	padding: 16px 16px;
	margin-top:2rem;
	border-radius: 5px;
	background: rgba(255, 255, 255,0.1);
	backdrop-filter: blur(3px);
	display: grid;
	grid-gap: 16px;
	grid-template-columns: auto auto auto 80px auto;

	& .downbtn
	{
		padding: 22px 0px;
		width: 100%;

	}
	

}
#phx
{
	position: relative;
}
.topfooter
{
	display: flex;
	gap: 10px;
	padding: 16px 16px;
	flex-wrap: wrap;
	background:var(--color);
	color:var(--dark);

}

.footeritem
{
	flex-grow:1;
	text-align: center;
	flex-shrink: 0;
}

footer
{
	padding: 4rem 16px;
	background:var(--color3);
	color:white;
}

.section
{
	padding: 6rem 10px;
}

.h1
{
	font-size: 32px;
	font-family: jost-bold;
}



@media only screen and (max-width: 750px)
{
	.footeritem
	{
		flex-basis: 100%;
		padding: 16px;

		&:nth-child(even)
		{
			border-top:1px solid var(--lightgrey);
			border-bottom:1px solid var(--lightgrey);

		}
	}
	.h1
	{
		font-size: 24px;
	}
	.header
	{
		padding: 0px 10px;
		width: 100%;

		& .hbtn
		{
			margin-left: auto;
		}
	}



	.herotext
	{
		
		& .part1
		{
			font-family: jost-bold;
			font-size: 28px;
			line-height: 26px;
			padding-bottom: 16px;
		}
	}

	.bookwidget
	{
		grid-template-columns: auto auto;
	}

}

.gallery
{
	display:grid;
	grid-template-columns: repeat(4,  1fr);
	grid-auto-flow: dense;
	grid-gap:10px;
	padding: 4rem 10px 1rem;
	height: 70dvh;
}

.imgitem
{
	overflow: hidden;
	border-radius: 8px;

	&:hover
	{
		box-shadow: 0px 0px 15px  var(--grey);
	}

	
	& img
	{
		width: 100%;
		height: 100%;
		transition: transform 1s;

		&:hover
		{
			transform: scale(1.1);

		}
	}
	
}

.short
{
	line-height: 18px;
}

.section2
{
	background: url(/images/herobg.png);
	background-repeat:  no-repeat;
	background-attachment: fixed;
	background-size: cover;


}
.section3
{
	position: relative;

}

.section4
{
	background: url("/images/2151899002.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}



.section3
{
	background: #f9d8a5;

	
}

.testimony
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap:15px;
	padding: 5rem 5px;

}

.titem
{
	width: 250px;
}

.falicity
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap:15px;
	padding: 5rem 5px;


	& .fitem
	{
		border-radius: 20px;
		box-shadow: 0px 0px 15px var(--dark);
		height: auto;
		background: white;
		overflow: hidden;
		

		& .image
		{
		
			height: 250px;
			overflow: hidden;

			& img
			{

				width: 100%;
				height: 100%;
				transition: transform 1s ease-in-out;

				&:hover
				{
					transform: scale(1.1);
				}
			}


		}

		& .textarea
		{
			padding: 2rem 10px;
			text-align: center;
		}
	}
}

.rooms
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap:10px;
	width: 100%;
	place-self: center;
	padding: 5rem 5px;


	& .ritem
	{
		border-radius: 5px;
		box-shadow: 0px 0px 15px var(--dark);
		height: auto;
		background: white;
		overflow: hidden;
		width: 300px;
		place-items: center;
		

		& .image
		{
		
			height: 250px;
			overflow: hidden;

			& img
			{

				width: 100%;
				height: 100%;
				transition: transform 1s ease-in-out;

				&:hover
				{
					transform: scale(1.1);
				}
			}


		}

		& .textarea
		{
			padding: 1.5rem 16px ;
			
		}
	}
}

.greybtn
{
	background: var(--darkblue);
	color:var(--lightgrey);
	display: block;
	width: 100%;
	padding: 10px 16px;
	font-size: small;
	text-align: center;
	border-radius: 5px;
	
	&:hover
	{
		background: var(--blue);
		color:var(--color3);
	}

}

.heropage
{
	background:url(/images/7709.jpg);
	min-height: 450px;
	background-size: cover;
	
	background-position: center;
	background-repeat: no-repeat;

	& .container
	{
		background:rgba(0, 0, 0,0.6);
		height:100%;
		width: 100%;
		position: relative;
		padding: 10rem 16px;
	}

}

.sectionblur
{
	& .container
	{
		padding: 3rem 16px;
		backdrop-filter: blur(5px);
	}
}


	

@media only screen and (max-width: 650px)
{
	.testimony
	{
		display: flex;
		gap:10px;
		overflow-x: scroll;
	}
	.titem
	{
		width: 100%;
		flex-shrink: 0;
	}
	.hero
	{
			overflow: auto;

			& .content
			{
				
			
				place-content: top;
			}
	}
	.falicity
	{
		display: inline-flex;
		overflow: scroll;
		width: 100vw;
		padding-left:1rem;
		padding-right: 2rem;

		& .fitem
		{
			width: 100%;
			flex-shrink: 0;
		}
	}

	.sectionblur
	{
		& .container
		{
			padding: 3rem 5px;
		}
	}
	.rooms
	{
		display: inline-flex;
		overflow: scroll;
		width: 100vw;
		padding-left:1rem;
		padding-right: 2rem;

		& .ritem
		{
			width: 100%;
			flex-shrink: 0;
		}
	}

	.heroimage
	{
		padding: 15px 16px;
	}
	.outercheck
	{
		box-shadow: 0px 0px 0px transparent;
		position: absolute;
		top:80vh;
		padding: 0px 16px;
	}


	.herotext
	{
		padding: 10px 0px;
		
	}

	.gallery
	{
		grid-template-columns: repeat(3, 1fr);
		grid-auto-flow: dense;
		height: auto;

	}
	.imgitem
	{
		height: 80px;
	}

	.section
	{
		padding: 3rem 10px;
	}
}



@keyframes zoom-in-out {
  0% {
    transform: scale(1); 
  }
  100% {
    transform: scale(1.15); 
  }
}

@keyframes mover
{
	0%{
		transform: translate(0,0);
	}

	100%
	{
		transform: translate(-100%,0);
	}
}