@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	letter-spacing: 0.8px;
	list-style-type: none;
	text-decoration: none;
	font-family: 'Kanit', sans-serif;

}
html
{
	scroll-behavior: smooth;
	overflow-x: hidden;
}
body
{
	background: seashell;
	overflow-x: hidden;
	font-family: var(--news-font);
}
:root
{
	--news-font:'Newsreader', serif; 
}
/*HEADER SECTION CSS CODE STARTS HERE*/
	#jumptotop
	{
		position: fixed;
		bottom: 20px;
		right: 20px;
		border-radius: 5px;
		width: 35px;
		height: 35px;
		color: white;
		background: black;
		padding: 10px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		transition: 0.3s ease;
		visibility: hidden;
		opacity: 0;
	}
	header
	{
	/*		background: white;*/
		padding: 10px 2px;
		width: 100%;
		position: fixed;
		top:0;
		left: 0;
		transition: 0.6s ease;
	/*		border-bottom: 1px solid lightgray;*/
	/*		box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);*/
		z-index: 100;
		color: white;
	}
	header.sticky
	{
		padding: 10px 0 2px 0;
		background: black;
		color: white;
		width: 100%;
	}
	.navbar
	{
		display: flex;
		align-content: center;
		justify-content: space-between;
		column-gap: 10px;
		padding: 15px 10px;
		mix-blend-mode: difference;
		transition: 0.3s ease;
	}
	header.sticky .navbar
	{
		padding:20px 12px 5px 12px;
	}
	.nav-icon
	{
		position: relative;
		width: 50px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin:0 0 0 7px;
		cursor: pointer;
		transition: 0.3s ease;
	}
	.nav-icon.active
	{
/*		margin-bottom: 10px;*/
		background: white;
		border-radius: 50%;
		transform: translateY(-15px);
	}
	.nav-icon.active span.bar-1
	{
		margin-top:15px;
		left:56%;
		top:15px;
		transform:translate(-50%, -50%) rotate(45deg);
		color: crimson;
		scale: 1.8;
	}
	.nav-icon.active span.bar-2
	{
		margin-top:15px;

		transform:translate(-50%, -50%) rotate(-45deg);
		left:50%;
		top:15px;
		color: crimson;
		scale: 1.8;
	}
	.nav-icon.active span.close
	{
		opacity: 1;
		visibility: visible;
		margin-top:7px;
		top:10px;
		left: 75px;
		color: white;
		transition-delay: 0.3s;
		font-size: 10px;
	}
	.nav-icon span
	{
		position: absolute;
		top:0;
		left:0;
		transform: rotate(90deg);
		font-size: 20px;
		scale: 2;
		font-family: serif;
		cursor: pointer;
		color: black;
		overflow:hidden;
	}
	span.bar-1
	{
		position: absolute;
		top:-7px;
		left: 15px;
		transition: 0.6s ease;
		color: white;
	}
	span.bar-2
	{
		position: absolute;
		top:7px;
		left: 15px;
		transition: 0.6s ease;
		color: white;
	}
	span.close
	{
		position: absolute;
		top:3px;
		left: 60px;
		transform: rotate(0deg);
		transition: 0.6s ease;
		font-size: 12px;
		opacity: 0;
		visibility: hidden;
	}
	.logo
	{
		font-size: 20px;
		letter-spacing: 1.8px!important;
		color: white;
	}
	@media screen and (max-width:528px)
	{
		.logo
		{
			font-size: 18px;
		}
		.nav-icon span.close
		{
			display: none;
		}
		.navLinksHover .nav-links a
		{
			font-size: 17px;
		}
		.navbar .nav-service a
		{
			padding: 10px 15px;
			font-size: 15px;
			font-weight: bold;
		}
	}
	.nav-service a
	{
		padding: 13px 25px;
		font-size: 16px;
		background: white;
		color: black;
		transition: 0.3s ease;
		border-radius: 5px;
	}
	.nav-service a:hover
	{	
		border:1px solid white;
		background:transparent;
		color:white;
	}
/*	.navLinksHover
	{
		z-index: 150!important;
	}*/
	.nav-links
	{
		width: 100%;
		height: 100vh;
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		background:rosybrown;
		flex-direction: column;
		line-height: 2.5;
		z-index: 15!important;
		clip-path: circle(0% at 0% 8.5%);
		transition: 1s ease;
		visibility: hidden;
		opacity: 0;
	}
	.nav-links.active
	{
		visibility: visible;
		clip-path: circle(140% at 95.3% 8.5%);
		opacity: 1;
		z-index: 10;
	}

	.nav-links a
	{

		font-size: 22px;
		font-family: sans-serif;
		color: white;
		z-index: 1;
		mix-blend-mode: difference;
	}
	.navAnchorHover
	{
		
	}
	.nav-links a::before
	{
		content: attr(data-text);
		position: absolute;
		top:50%;
		left: 40%;
		transform: translate(-50%, -50%);
		font-size: 120px;	
		pointer-events: none;
		font-family:var(--news-font);
		visibility: hidden;
		color: rgba(255,255,255,0.3);
		z-index: -1;
		transition: 0.5s ease;
		opacity: 0;
		letter-spacing:10px!important;
	}
	.nav-links a:hover::before
	{
		opacity: 1;
		visibility: visible;
		left: 50%;
	}
	.nav-links video
	{
		width: 100%;
		height: 100%;
		background-size: cover;
		object-fit: cover;
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		z-index: -1;
		
	}
	.video-overlay
	{
		width: 100%;
		height: 100%;
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		z-index: -1;
		background: linear-gradient(rgba(0,0,0,0.7), rgba(0, 0, 0,0.9));
	}
	#cursor
	{
		position: absolute;
		top:0;
		left: 0;
		transform: translate(-50%, -50%);
		border:1px solid white;
		border-radius: 50%;
		width: 20px;
		height: 20px;
		pointer-events: none;
		z-index: 200;
/*		opacity: 0.6;*/
			mix-blend-mode:difference;
/*		transition: 0.1s linear;*/
	}
/*HEADER SECTION CSS CODE ENDS HERE*/

/*SLIDE SECTION CSS CODE STARTS HERE*/
	.slide-section
	{
		width: 100%;
		height: 90vh;
		position: relative;
	}
	.slide-contents
	{
		position: relative;
		width: 100%;;
		height: 100%;
		display: flex;
		z-index: 1;
	}
	.swiper .slide-images
	{
		position: relative;
	}
	.swiper .slide-images .slide-overlay2
	{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.6));
	}
	.slider-img
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.swiper-contents
	{
		position: absolute;
		top: 50%;
		transform:translateY(-50%);
		left:100px;
		line-height: 1.6;
		z-index: 1;
		color: white;
		animation: swiperanim 1s linear;	
	}
	@keyframes swiperanim
	{
		from
		{
			opacity: 0;
			left:200px;
		}
		to
		{
			opacity: 1;
			left:100px;
		}
	}
	.swiper-contents h3
	{
		font-size: 35px;
		letter-spacing: 1.5px;
		font-weight:100;
		text-transform: uppercase;
	}
	@media screen and (max-width:709px)
	{
		.slide-section .swiper-contents
		{
			left:40px;
		}
		.swiper-contents h3
		{
			font-size: 30px;
		}
		@keyframes swiperanim
		{
			from
			{
				opacity: 0;
				left:200px;
			}
			to
			{
				opacity: 1;
				left:40px;
			}
		}
	}
	.swiper-contents p
	{
		font-size: 20px;
	}
	.swiper-contents .swiper-btn
	{
		padding: 12px 50px;
		cursor: pointer;
		border:1px solid white;
		background: transparent;
		font-size: 18px;
		margin: 17px 0;
		font-weight: 100;
		color: white;
		transition: 0.3s ease;
	}
	.swiper-contents .swiper-btn:hover
	{
		background:white;
		color: black;
	}

	.slide-overlay
	{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
/*		z-index: -1;*/
	}
	.slide-section .swiper-pagination
	{
		margin-bottom: 170px;
	}

/*SLIDE SECTION CSS CODE ENDS HERE*/

/*BOTTOM CHECK IN CSS CODE STARTS*/
	.bottom-check-in
	{
		width: 60%;
		padding: 30px 50px;
		margin: auto;
		box-shadow: 0 30px 40px rgba(0, 0, 0, 0.2);
		position: absolute;
		bottom:40px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		background: white;
		border-radius: 15px;
	}
	@media screen and (max-width: 1764px)
	{
		.bottom-check-in
		{
			width: 80%;
		}

	}
	@media screen and (max-width: 1240px)
	{
		.bottom-check-in
		{
			width: 90%;
		}
	}
	@media screen and (max-width: 1054px)
	{
		.checkIn-section
		{
			flex-wrap: wrap;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			row-gap: 20px;
		}
		.bottom-check-in
		{
			padding: 20px;
		}
		.checkIn-data
		{
			flex-basis: 100%;
		}
		.checkIn-data.checkData
		{
			flex-basis: 50%;
		}

		.checkIn-data button
		{
			margin-top: 20px;
		}
		.bottom-check-in
		{
			bottom: -220px;
		}
		.cape-town-section
		{
			padding-top: 240px;
		}
	}
	.checkIn-section
	{
		display: flex;
		align-items: center;
		justify-content: space-around;
/*		line-height: 2;*/
	}
	.checkIn-data .check-btn
	{
		
		cursor: pointer;
		background: none;
		border:none;
		border-bottom: 1px solid black;
		padding-bottom: 7px;
		width: 100%;
		text-align: left;
		font-size: 15px;
	}
	.checkIn-data input
	{
		text-transform: uppercase;
		font-weight: bold;
		outline: none;
	}
	.checkIn-data h3
	{
		margin-bottom: 30px;
	}
	.checkIn-data span.minus , span.plus
	{
		font-size: 20px;
		border:1px solid black;
		border-radius:5px;
		padding: 10px 15px;
		font-weight: bold;
		cursor: pointer;
	}
	.checkIn-data span.num
	{
		margin: 0 7px;
		font-weight: bold;
	}
		.checkIn-data span.minus-children , span.plus-children
	{
		font-size: 20px;
		border:1px solid black;
		padding: 10px 15px;
		border-radius: 5px;
		font-weight: bold;
		cursor: pointer;
	}
	.checkIn-data span.num-children
	{
		margin: 0 7px;
		font-weight: bold;
	}
	.checkIn-data .check-availability
	{
		padding: 15px 30px;
		border-radius: 5px;
		background: black;
		color: white;
		border:none;
		cursor: pointer;
		font-size: 17px;
	}
	.checkIn-data .check-availability i
	{
		font-size: 20px;
		transform: translateY(3px);
	}
/*BOTTOM CHECK IN CSS CODE ENDS*/

/*CAPE TOWN SECTION CSS CODE STARTS*/
	.cape-town-section
	{
		width: 100%;
		margin-top: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: column;
		line-height: 1.6;
		text-align: center;
		padding-bottom: 50px;
	}
	.cape-town-section h3
	{
		font-size: 25px;
		margin-bottom: 10px;
		letter-spacing: 1px;
	}
	.cape-town-section p
	{
		width: 50%;
		margin: auto;
		font-size: 18px;
	}
/*CAPE TOWN SECTION CSS CODE ENDS*/

/*GLIDE SECTION CSS CODE STARTS*/
	.glide-slider
	{
		width: 100%;
		height: 100%;
		padding: 50px 15px 0 15px;
		background: white;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		position:relative;
		z-index: 1;
	}
	.glide-slider-img
	{
		position: absolute;
		top:0;
		left: 0;
		z-index: -1;
		transform: rotateX(180deg);
		width:auto;
		object-fit: cover;
		opacity: 0.3;
	}
	.glide-text
	{
		width: 30%;
		float: left;
		padding:40px 70px;
		line-height: 1.6;
		text-align: center;
	}
	.glide-text .glide-text-logo
	{
		width: 50px;
		height: 50px;
		object-fit: cover;
		margin-bottom: 10px;
	}
	.glide-text h2
	{
		letter-spacing: 0.8px;
	}
	.glide-images
	{
		width: 70%;
		float: left;
		padding:50px 0;
	}
	@media screen and (max-width:987px)
	{
		.glide-text
		{
			width: 95%;
		}
		.glide-images
		{
			width: 100%;
		}
	}

	.glide-hr
	{
		width: 40%;
		margin: 15px auto;
	}
	
	.glide-btn
	{
		padding: 12px 50px;
		font-size: 18px;
		border:1px solid black;
		background: transparent;
		color:black;
		transition: 0.3s ease;
		margin: 30px 0;
		display: inline-block;
	}
	.glide-btn:hover
	{
		background: black;
		color: white;
	}
	.glide-img
	{
		width: 100%;
		height: 450px;
		object-fit: cover;
		border-radius: 15px;
	}
	.glide-text p
	{
/*		margin-bottom: 20px;*/
	}
	.bottom-line
	{
		margin-top: 40px;
	}
	.top-line
	{
		margin-bottom: 40px;
	}
	.glide__arrows .glide__arrow
	{
		/*background: gray;
		color: white;*/
		border-radius: 50%;
		scale: 1.2;
		margin: 0 15px;
	}
	.glide__slide
	{
		transform: scale(0.9);
		transition: all 0.3s ease;
		filter: brightness(40%);
		position: relative;
		border-radius: 15px;
	}
	.glide__slide.glide__slide--active
	{
		transform: scale(1.03);
		filter: brightness(100%);
	}
	.rooms-data
	{
		position: absolute;
		bottom:5px;
		left: 50%;
		transform: translateX(-50%);
		line-height: 1.6;
		width: 100%;
		padding:15px 30px;
		color: white;
		z-index: 1;
		letter-spacing: 0.9px;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		overflow: hidden;
	}
	.rooms-data::before
	{
		content:"";
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background:rgba(0, 0, 0, 0.5);
		z-index: -1;
	
	}
	.rooms-data h3
	{
		font-size: 30px;
		color: white;
		z-index: 2;
	}
	.rooms-data small
	{
		font-size: 18px;
		color: white;
	}
	.rooms-details
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:20px 5px;
	}
	.rooms-data h4
	{
		font-size: 20px;
	}
	.room-btn
	{
		color: black;
		padding: 8px 30px;
		background: wheat;
		border: none;
		display: inline-block;
		font-size: 17px;
		cursor: pointer;
		transition: 0.3s ease;
		border-radius: 5px;
	}
	.room-btn:hover
	{
		background: black;
		color: wheat;
	}
	@media screen and (max-width:1556px)
	{
		.room-btn
		{
			padding: 8px 15px;
			font-size: 15px;
		}
	}

/*GLIDE SECTION CSS CODE ENDS*/

/*ACTIVITIES OF RESORT CSS CODE*/
	.activities-of-resort
	{
		width: 100%;
		height:100%;
		background:#F7F4F3;
		padding: 40px 10px;
		line-height: 1.5;
	}
	.activities-columns
	{
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 50px;
		row-gap: 20px;
		width: 90%;
		margin: auto;
		flex-wrap: wrap;
	}
	.activities-left, .activities-right
	{
		flex-basis: 42%;
	}
	@media screen and (max-width:923px)
	{
		.activities-left, .activities-right
		{
			flex-basis: 97%;
		}
		.activities-right .activities-facilities
		{
			flex-basis: 45%;
		}
		
	}
	.activities-left h3
	{
		font-size: 26px;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 5px;
	}
	.activities-left p
	{
		font-size: 19px;
	}
	.activities-left small
	{
		font-size: 17px;
		color: gray;
	}
	.about-us-btn
	{
		font-size: 17px;
		padding: 12px 30px;
		border:none;
		background: black;
		color: white;
		cursor: pointer;
		margin: 20px 0;
		border-radius: 5px;
	}
	.activities-right
	{
		display: flex;
/*		align-items: center;*/
		justify-content: center;
		column-gap: 10px;
		row-gap: 10px;
		flex-wrap: wrap;
	}
	.activities-facilities
	{
		position: relative;
		flex-basis: 40%;
/*		display: flex;*/
	}
	.facilities-img
	{
		width: 100%;
		height:100%;
		object-fit: cover;
	}
	.activities-facilities h5
	{
		font-size: 20px;
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		padding: 10px;
		color: white;
	}
	.activities-facilities h5::before
	{
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		backdrop-filter: blur(10px);
		top:0;
		left: 0;
		z-index: -1;
	}

/*ACTIVITIES OF RESORT CSS ENDS*/

/*OUR OFFERINGS CSS CODE STARTS*/
	.offerings
	{
		width: 100%;
		height:100%;
		background:linear-gradient(to right,rgba(255,255,255, 0.9),rgba(255,255,255,0.9)), url('https://images.unsplash.com/photo-1602002418211-9d76470fa71f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80');
		background-size: cover;
		object-fit: cover;
		background-attachment: fixed;
		padding: 40px 10px;
		line-height: 1.5;
		border-top: 1px solid lightgray;
		border-bottom: 1px solid lightgray;
	}
	.offerings-cols
	{
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 30px;
		row-gap:25px;
		flex-wrap: wrap;
		width:100%;	
		padding:5px 10px;
		margin: auto;
	}
	.offerings-text
	{
		flex-basis: 30%;
	}
	.offerings-offers
	{
		flex-basis: 42%;
		display: flex;
		gap: 15px;
		justify-content: center;
		flex-wrap: wrap;
		padding: 10px;
	}
	.offerings-data
	{
		flex-basis: 49%;
		background:#F7F4F3;
		padding: 10px;
		border-radius: 15px;
		position: relative;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
		overflow: hidden;
	}
	@media screen and (max-width: 1870px)
	{
		.offerings-offers
		{
			flex-basis:50%;
		}
		.swiper .swiper-button-next
		{
			position: absolute!important;
			top:70%!important;
			right: 3%!important;
		}
		.swiper .swiper-button-prev
		{
			position: absolute!important;
			top:70%!important;
			left:72%!important;
		}
	}
	@media screen and (max-width:1384px)
	{
		.swiper .swiper-button-next
		{
			position: absolute!important;
			top:70%!important;
			right: -15px!important;
		}
		.swiper .swiper-button-prev
		{
			position: absolute!important;
			top:70%!important;
			left:75%!important;
		}
	}
	@media screen and (max-width: 1588px)
	{
		.offerings-offers
		{
			flex-basis:60%;
		}
	}
	@media screen and (max-width: 1322px)
	{
		.offerings-data
		{
			flex-basis:100%;
		}
	}
	@media screen and (max-width: 1240px)
	{
		.swiper .swiper-button-next
		{
			position: absolute!important;
			top:70%!important;
			right: -30px!important;
		}
		.swiper .swiper-button-prev
		{
			position: absolute!important;
			top:70%!important;
			left:77%!important;
		}
	}

	@media screen and (max-width: 1100px)
	{
		.offerings-text ,.offerings-offers
		{
			flex-basis: 100%;
		}
		.contact-us-cols .contact-us-image
		{
			flex-basis: 50%;
		}
		.contact-us-cols .contact-us-form
		{
			flex-basis: 50%;
		}
	}
	@media screen and (max-width:1038px)
	{
		.swiper.testimonials-slides .swiper-button-next
		{
			position: absolute!important;
			top:70%!important;
			right: 50px!important;
		}
		.swiper.testimonials-slides .swiper-button-prev
		{
			position: absolute!important;
			top:70%!important;
			left:70%!important;
		}
	}
	@media screen and (max-width:702px)
	{
		.swiper.testimonials-slides .swiper-button-next
		{
			position: absolute!important;
			top:70%!important;
			right: 30px!important;
		}
		.swiper.testimonials-slides .swiper-button-prev
		{
			position: absolute!important;
			top:70%!important;
			left:70%!important;
		}

		.contact-us-cols .contact-us-image
		{
			flex-basis: 98%;
		}
		.contact-us-cols .contact-us-form
		{
			flex-basis: 98%;
		}
		.newsletter
		{
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20px;
			flex-wrap: wrap;
			margin: auto;
		}
		.newsletter-text ,.newsletter-input
		{
			flex-basis: 98%;
		}
	}
	@media screen and (max-width:644px)
	{
		.footer .footer-contents
		{
			flex-basis: 45%;
		}
		.swiper.testimonials-slides .swiper-button-next
		{
			position: absolute!important;
			top:70%!important;
			right: -10px!important;
		}
		.swiper.testimonials-slides .swiper-button-prev
		{
			position: absolute!important;
			top:70%!important;
			left:75%!important;
		}
	}
	@media screen and (max-width:584px)
	{
		.swiper.testimonials-slides .swiper-button-next
		{
			position: absolute!important;
			top:82%!important;
			right: -10px!important;
		}
		.swiper.testimonials-slides .swiper-button-prev
		{
			position: absolute!important;
			top:82%!important;
			left:65%!important;
		}
		#cursor
		{
			display: none;
		}
	}

	.offerings-text h3
	{
		font-size: 26px;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 5px;
	}
	.offerings-text p
	{
		font-size: 19px;
	}
	.offerings-text small
	{
		font-size: 17px;
		color: gray;
	}
	.offer-img
	{
		width: 100%;
		height: 250px;
		object-fit: cover;
		display: flex;
		border-radius: 15px;
	}
	.offerings-data-items
	{
		position: absolute;
		top:50%;
		left:20px;
		transform: translateY(-50%);
		padding: 5px 20px;
		z-index: 1;
		color: white;
	}
	.offerings-data-items h2
	{
		font-size: 40px;
		font-style: italic;
	}
	.offerings-data-items::before
	{	
		content: "";
		position: absolute;
		top:0;
		left: 0;
		width: 85%;
		padding: 0 10px;
		height: 100%;
		backdrop-filter: blur(5px);
		background: rgba(100, 0, 100, 0.5);
		z-index: -1;
		border-radius: 15px;
	}
	.offerings-data-items a
	{
		display: inline-block;
		padding: 8px 20px;
		border:1px solid white;
		color: white;
		margin: 10px 0;
		border-radius: 5px;
	}
/*OUR OFFERINGS CSS CODE ENDS*/

/*TESTIMONIALS CSS CODE STARTS*/
	.testimonials
	{
		width: 100%;
		height: 100%;
		background:linear-gradient(to right,rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.8)), url('https://images.unsplash.com/photo-1581345629003-7ffd8d06f301?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1070&q=80');
		background-size: cover;
		background-attachment: fixed;
		object-fit: cover;
		padding: 40px 10px;
	}
	.testimonials-cols
	{
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 40px;
		flex-wrap: wrap;
		width: 80%;
		margin: 40px auto;
	}
	@media screen and (max-width:1624px)
	{
		.testimonials-cols
		{
			width: 98%;
		}
	}
	.testimonials-slides
	{
		flex-basis: 45%;
	}
	.testimonials-events
	{
		flex-basis: 50%;
/*		background:white;*/
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
		padding: 20px;
		border-radius: 15px;
	}
	@media screen and (max-width:1198px)
	{
		.testimonials-slides
	{
		flex-basis: 100%;
	}
	.testimonials-events
	{
		flex-basis: 100%;
		margin-top: 30px;
	}
	.swiper .swiper-button-next
	{
		top:70%!important;
		right: 15%!important;
	}
	.swiper .swiper-button-prev
	{
		top:70%!important;
		left:70%!important;
	}
	}

	.testimonials-slides
	{
		line-height: 1.6;
	}
	.testimonials-slides h3
	{
		font-size: 26px;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 10px;
	}
	.testimonials-data h5
	{
		padding: 20px 15px;
		background:#D1D1D1;
		border-radius: 15px;
		font-size: 18px;
		letter-spacing: 0.8px;
		font-weight: 100;
		position: relative;
		z-index: 1;
	}
	.testimonials-data h5::before
	{
		content: "";
		position: absolute;
		bottom: -10px;
		left:20px;
		transform: rotate(45deg);
		background:#D1D1D1;
		width: 40px;
		height: 40px;
		z-index: -1;
	}
	.testimonials-user
	{
		display: flex;
		align-items: center;
		justify-content: left;
		column-gap: 15px;
		margin: 30px 0;
	}
	.user-img
	{
		width: 80px;
		height: 80px;
		border-radius: 50%;
		object-fit: cover;
		display: flex;
	}
	.testimonials-user-details small
	{
		font-size: 20px;
		font-style: italic;
	}
	.testimonials-user-details i
	{
		color: goldenrod;
		margin: 5px 2px;
	}
	.testimonials-cols .swiper
	{
		position: relative;
	}
	.swiper-button-next, .swiper-button-prev
	{
		position: absolute;
		background: black;
		scale: 0.4;
		color: white!important;
		border-radius: 50%;
	/*	width: 40px;
		height: 40px;*/
		padding: 50px;
	}
	.swiper-button-next
	{
		top:70%!important;
		right: 8%!important;
	}
	.swiper-button-prev
	{
		top:70%!important;
		left:70%!important;
	}
	.testimonials-events
	{
		line-height: 1.6;
	}
	.testimonials-events h3
	{
		font-size: 26px;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 15px;
	}
	.testimonials-events-data
	{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
/*		border: 1px solid rgba(0, 0, 0, 0.2);*/
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
		padding: 15px;
		border-radius: 15px;
		margin-bottom: 20px;
		background: white;
	}
	.testimonials-left h4
	{
		background:#32902C;
		color: white;
		padding: 10px 20px;
		border: 2px dotted white;
		font-size: 25px;
		letter-spacing: 1px;
		font-style: italic;
		text-align: center;
		position: relative;
	}
	.testimonials-left h4::before
	{
		content: "";
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 85%;
		height: 85%;
		margin: auto;
		border:1px solid rgba(255, 255, 255, 0.5);
	}
	.testimonials-right p
	{
		font-size: 19px;
		font-weight: bold;
		margin-bottom: 5px;
	}
	.testimonials-right span
	{
		font-size: 17px;
	}
/*TESTIMONIALS CSS CODE ENDS*/

/*CONTACT US SECTION CSS CODE STARTS*/
	.contact-us
	{
		width: 100%;
		height: 100%;
		padding: 80px 10px;
		background:#EEEEEE;
		box-shadow: 0 -5px 40px rgba(0, 0, 0, 0.3);
	}
	.contact-us-cols
	{
		display: flex;
/*		align-items: center;*/
		justify-content: center;
		flex-wrap: wrap;
		width: 90%;
		margin: auto;
		padding: 10px;
	}

	@media screen and (max-width: 1764px)
	{
		.contact-us-cols
		{
			width: 100%;
		}	
	}
	

	.contact-us-image
	{
		flex-basis: 40%;
		display: flex;
	}
	.contact-us-img
	{
		display: flex;
		width: 100%;
		object-fit: cover;
	}
	.contact-us-form
	{
		flex-basis: 50%;
		display: flex;
		padding: 10px;
		border-radius: 5px;
		line-height: 1.6;
		flex-wrap: wrap;
		background:white;
		position: relative;
		z-index: 1;
	}
	@media screen and (max-width: 1588px)
	{
		.contact-us-image
		{
			flex-basis: 30%;
		}
		.contact-us-form
		{
			flex-basis: 60%;
			padding:10px 30px;
		}
	}	
	@media screen and (max-width: 1408px)
	{
		.contact-us-form .input-fields
		{
			flex-basis: 100%;
		}
	}

	.contact-us-form h3
	{
		font-size: 25px;
		text-transform: uppercase;
		margin-bottom: 7px;
		margin-left: 12px;
		padding-top: 15px;
	}
	form
	{
		display: flex;
		justify-content: center;
		width: 100%;
		flex-wrap: wrap;
		gap: 10px;
		margin: auto;
	}
	.input-fields
	{
		display: flex;
		flex-basis: 48%;
		flex-flow: column;
		margin:2px 5px;
		justify-content: left;
		padding: 10px;
	}
	.input-fields label
	{
		font-size: 17px;
		font-weight: bold;
		text-transform: uppercase;
		margin-bottom: 5px;
	}
	.input-fields input
	{
		width: 100%;
		padding: 12px;
		border:1px solid lightgray;
		font-size: 16px;
		outline: none;
		background:#EAEAEA;
		border-radius: 5px;
	}
	.input-fields textarea
	{
		width: 100%;
		height: 100px;
		border-radius: 5px;
		border:1px solid lightgray;
		background: #EAEAEA;
		outline: none;
		font-size: 16px;
		padding: 10px 15px;
		text-transform: uppercase;
	}
	.contact-btn
	{
		background: black;
		color: white;
		border-radius: 5px;
		border:none;
		padding: 12px 50px;
		cursor: pointer;
		margin-top: 5px;
		margin-bottom: 15px;
		font-size: 16px;
	}

/*CONTACT US SECTION CSS CODE ENDS*/

/*NEWSLETTER CSS CODE STARTS*/
	.newsletter
	{
		width: 100%;
		padding: 40px 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 70px;
		flex-wrap: wrap;
		background:#F8C080;
		margin: auto;
		line-height: 1.6;
	}
	@media screen and (max-width: 1588px)
	{
		.newsletter-text
		{
			width: 35%;
		}
		.newsletter-input
		{
			width: 40%;
		}
	}
	.newsletter h2
	{
		margin-bottom: 12px;
		text-transform: uppercase;
		letter-spacing: 2px;
		padding-bottom: 5px;
		border-bottom: 1px solid white;

	}
	.newsletter p
	{
		font-size: 18px;
	}
	.newsletter-input input
	{
		background: white;
		padding: 12px 15px;
		border:none;
		outline: none;
		font-size: 16px;
		margin: 10px 7px;
		cursor: pointer;
		border-radius: 5px;
		width: 100%;

	}
	.newsletter-input .newsletter-btn
	{
		background: black;
		color: white;
		cursor: pointer;
		border-radius: 5px;
		width: 150px;
	}
	
/*NEWSLETTER CSS CODE ENDS*/

/*FOOTER CSS CODE STARTS*/
	.footer
	{
		width: 100%;
		padding: 50px 10px;
		background: #202020;
		color: darkgray;
		letter-spacing: 2px;
		overflow: hidden;
	}
	.footer-cols
	{
		display: flex;
/*		align-items: center;*/
		justify-content:space-around;
		column-gap: 40px;
		row-gap: 30px;
		flex-wrap: wrap;
		margin: auto;
		width: 85%;
		line-height: 1.6;
	}
	@media screen and (max-width:1436px)
	{
		.footer-cols
		{
			width: 95%;		
		}
		.activities-columns
		{
			width: 100%;
		}
	}
	.footer-contents
	{
		flex-basis: 15%;
	}
	.footer-contents h3
	{
		font-size: 25px;
		margin-bottom: 30px;
		position: relative;
		padding-bottom: 4px;
	}
	.footer-contents h3::before
	{
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 50px;
		border-bottom: 2px solid white;

	}
	.footer-contents p
	{
		font-size: 18px;
	}
	.footer-contents .read-more
	{
		border-radius: 5px;
		border:1px solid darkgray;
		color: darkgray;
		padding: 12px 30px;
		display: inline-block;
		margin: 15px 0;
		transition: 0.3s ease;
	}
	.footer-contents .read-more:hover
	{
		background: darkgray;
		color: black;
	}
	.footer-contents .socials
	{
		display: flex;
		align-items: center;
		justify-content: left;
		column-gap: 12px;
		margin: 10px 0;
	}
	.footer-contents .socials i
	{
		font-size: 20px;
		cursor: pointer;
		transition: 0.3s ease;
	}
	.footer-contents .socials i:hover
	{
		color: #DC7603;
	}
	.footer-contents a
	{
		color: darkgray;
		font-size: 15px;
		transition: 0.2s ease;
	}
	.footer-contents a:hover
	{
		color: white;
	}
	.footer-contents .footer-contact
	{
		display: flex;
		align-items: center;
		justify-content: left;
		column-gap: 15px;
		margin: 15px 0;
	}
	.footer-contents .footer-contact i
	{
		color: #DC7603;
	}
/*FOOTER CSS CODE ENDS*/

/*COPYRIGHT SECTION CSS CODE STARTS*/
	.copyright
	{
		width: 100%;
		padding: 40px 20px;
		background: #202020;
		color: darkgray;
		letter-spacing: 2px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		column-gap: 20px;
		position: relative;
	}
	.copyright::before
	{
		content: "";
		position: absolute;
		top:0;
		left:50%;
		transform: translateX(-50%);
		width: 85%;
		height: 0.5px;
		background: darkgray;
		opacity: 0.5;
	}
	.copyright p
	{
		font-size: 17px;
	}
/*COPYRIGHT SECTION CSS CODE ENDS*/

/*RESPONSIVE STATRS*/
@media screen and (max-width: 432px)
{
	.slide-section .swiper-contents
	{
		left:10px;
		padding:0 15px;
	}
	@keyframes swiperanim
	{
		from
		{
			opacity: 0;
			left:50px;
		}
		to
		{
			opacity: 1;
			left:10px;
		}
	}
	.swiper-contents h3
	{
		font-size: 25px;
	}
	.swiper-contents p
	{
		font-size: 17px;
	}
	.swiper-contents .swiper-btn
	{
		padding: 10px 15px;
		font-size: 17px;
	}
	.cape-town-section h3
	{
		padding: 0 15px;
	}
	.cape-town-section p
	{
		width: 90%;
		margin: auto;
	}
	 .glide-text
	{
		width: 100%!important;
		margin: auto;
	}
	.activities-left
	{
		flex-basis: 90%;
	}
		.swiper.testimonials-slides .swiper-button-next
		{
			position: absolute!important;
			top:82%!important;
			right: -10px!important;
			transform: scale(0.9);
		}
		.swiper.testimonials-slides .swiper-button-prev
		{
			position: absolute!important;
			top:82%!important;
			left:60%!important;
			transform: scale(0.9);
		}
		.testimonials-events
		{
			padding: 10px;
		}
		.testimonials-events-data
		{
			align-items:unset;
		}
		.testimonials-right p
		{
			font-size: 17px;
		}
		.testimonials-right span
		{
			font-size: 15px;
		}
		.contact-us-form
		{
			padding: 5px;
		}
		.footer .footer-contents
		{
			flex-basis: 100%;
		}
		.copyright
		{
			display: flex;
			flex-flow: column;
			align-items: center;
			flex-basis: wrap;
			text-align: center;
			line-height: 1.7;
		}

	}
	@media screen and (max-width:394px)
	{
		.logo
		{
			font-size: 17px;
		}
		.nav-icon span.close
		{
			display: none;
		}
		.navLinksHover .nav-links a
		{
			font-size: 17px;
		}
		.navbar .nav-service a
		{
			padding: 10px 15px;
			font-size: 14px;
			font-weight: bold;
		}
		.activities-right .activities-facilities
		{
			flex-basis: 48%;
		}
	}

/*	Dining page css code starts here*/
	.dining-section
	{
		width: 100%;
		height: 100%;
		background-size: cover!important;
		object-fit: cover;
		background-repeat: no-repeat!important;
		background-attachment: fixed!important;
		padding: 20px;
		background: linear-gradient(rgba(50, 0, 0, 0.6),rgba(0, 0, 0, 0.6)),url('../images/dining-background.jpg');
	}
	.dining-title
	{
		width: 100%;
		margin: 100px auto 10px auto;
/*		background: rgba(0,0,0, 0.2);*/
		backdrop-filter:blur(4px);
/*		border:1px solid rgba(255,255,255,0.3);*/
		margin-top: 100px;
		padding: 30px 20px;
		border-radius: 5px;
		color: white!important;
	}
	.dining-title h3
	{
		font-size: 30px;
		margin-bottom: 15px;
	}
	.dining-title h4
	{
		width: 100%;
		padding: 10px;
		border-radius: 5px;
		background: rgba(0, 0, 0, 0.6);
		margin-bottom: 30px;
		color: ghostwhite;
	}
	.dining-data
	{
		line-height: 1.5;
	}
	.dining-data h2
	{
		margin-bottom: 5px;
	}
	.dining-data h5
	{
		font-size: 19px;
		font-style: italic;
		color:rgba(255,255,255,0.8);
		margin: 10px 0;
	}
	.dining-data p
	{
		margin-bottom: 5px;
		font-size: 16px;
	}
	.dining-cols
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		column-gap: 40px;
		row-gap: 20px;
		width: 100%;
		margin: 50px auto;
		background: rgba(0,0,0, 0.4);
		padding: 15px;
		border-radius: 5px;
		color: white;
	}
	.dining-cols h5
	{
		font-size: 25px;
		color: white;
		margin-bottom: 10px;
	}
	.dining-cols p
	{
		margin-bottom: 30px;
		color: rgba(255,255,255, 0.9);
		line-height: 1.5;
	}
	.dining-cols ul
	{
		line-height: 1.6;
	}
	.dining-cols li
	{
		list-style-type: circle;
		margin-left: 30px;
		padding: 3px 0;
	}
	.dining-left
	{
		flex-basis: 70%;
		padding: 20px;
	}
	.dining-right
	{
		flex-basis: 40%;
	}
	.dining-right img
	{
		border-radius: 5px;
		width: 100%;
/*		height: 500px;*/
		object-fit: cover;
		display: flex;
	}
	.special-recieps{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
		margin: auto;
		width: 100%;
		column-gap: 15px;
		row-gap: 10px;
	}
	.special-cols
	{
		line-height: 1.5;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 30px 15px;
		background: rgba(0,0,0,0.3);
		border-radius: 5px;
		text-align: center;
		flex-basis: 20%;
		height: 350px;
		transition: 0.3s ease;
	}
	.special-cols:hover
	{
		transform: translateY(-10px);
	}
	.special-cols img
	{
		width: 150px;
		object-fit: cover;
		margin-bottom: 20px;

	}
	.special-cols h5
	{
		font-size: 20px;
		margin-bottom: 7px;
	}
	.special-cols p
	{
		font-size: 15px;
	}

	.our-menu
	{
		width: 80%;
		margin: 60px auto 0px auto;
	}
	.menu-toggles .menu-btn
	{
		font-size: 17px;
		padding: 10px 35px;
		border:none;
		border-radius: 5px;
		background: crimson;
		color: white;
		margin: 5px 5px 30px 5px;
		cursor: pointer;
		transition: 0.3s ease;
	}
	.menu-toggles .menu-btn.active
	{
		background: white;
		color: crimson;
	}
	.menu-contents
	{
		width: 100%;
		margin: auto;
		display: none;
		animation: menuanim 0.5s linear;
	}
	@keyframes menuanim
	{
		from
		{
			transform: translateX(50px);
			opacity: 0;
		}
		to
		{
			transform: translateX(0);
			opacity: 1;
		}
	}
	.menu-contents.active
	{
		display: block;	
	}
	.menu-contents img
	{
		width: 100%;
		border-radius: 5px;
		object-fit: cover;
		height: 300px;
		margin-bottom: 20px;
	}
	.menu-contents span
	{
		font-size: 18px;
		margin-bottom: 20px;
		display: block;
	}
	.menu-cols
	{
		display: flex;
		align-items: center;
		justify-content:space-between;
		column-gap: 30px;
		background: rgba(0, 0, 0, 0.3);
		padding: 15px 20px;
		border-radius: 5px;
		width: auto;
		color:gold;
		margin-bottom:10px;
		transition: 0.3s ease;
	}
	.menu-cols:hover
	{
		transform: translateX(-10px);
	}
	.menu-cols h5
	{
		font-size: 16px;
	}
	.menu-cols h2
	{
		font-size: 30px;
		font-style: italic;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: green;
		color: white;
		margin-left: 40px;
	}

	.reserveTable
	{
		width: 80%;
		margin:80px auto 20px auto;
		line-height: 1.5;

	}
	.table-cols
	{
		display: flex;
		justify-content: center;
		column-gap: 40px;
	}
	.reserve-left
	{
		flex-basis: 50%;
	}
	.reserve-right
	{
		flex-basis: 40%;
		padding: 15px;
		background: rgba(0,0,0,0.6);
		border-radius: 5px;
	}
	.reserve-form
	{
		display: flex;
		flex-flow: column;
	}
	.reserve-form h5
	{
		font-size: 20px;
		margin-bottom: 5px;
	}
	.reserve-form input
	{
		margin: 10px 0;
		font-size: 16px;
		padding: 10px 18px;
		border:1px solid white;
		background:white;
		backdrop-filter: blur(5px);
		border-radius: 5px;
	}
	.reserve-btn
	{
		width: 150px;
		background: greenyellow!important;
		border:none!important;
		margin: 10px auto!important;
		cursor: pointer;
		transition: 0.3s ease;
	}
	.reserve-btn:hover
	{
		background: black!important;
		color: white;
	}
	@media screen and (max-width:1288px)
	{
		.special-cols
		{
			flex-basis: 50%;
		}
		.our-menu
		{
			width: 98%;
			margin: auto;
		}
		.reserveTable
		{
			width: 100%;
		}
	}
	@media screen and (max-width:1100px)
	{
		.dining-cols
		{
			flex-wrap: wrap;
		}
		.dining-left,.dining-right
		{
			flex-basis: 100%;
		}
		.special-recieps
		{
			flex-wrap: wrap;
			row-gap: 15px;
		}
		.special-cols
		{
			flex-basis: 40%;

		}
		.table-cols
		{
			flex-wrap: wrap;
			row-gap: 20px;
		}
		.reserve-left, .reserve-right
		{
			flex-basis: 100%;
		}

	}
	@media screen and (max-width:750px)
	{
		.special-cols
		{
			flex-basis: 100%;
		}
		.menu-data h3
		{
			font-size: 22px;
		}
		.menu-cols h2
		{
			font-size: 20px;
			width: 60px;
			height: 60px;
		}
		.dining-section
		{
			padding: 7px;
		}
	}
	@media screen and (max-width:584px)
	{
		.menu-cols h2
		{
			font-size: 16px;
			width: auto;
			height: auto;
			padding: 8px;
		}
		.menu-toggles .menu-btn
		{
			padding:8px 12px;
			font-size: 14px;
		}
		.dining-section
		{
			padding: 2px;
		}
	}
/*	Dining page css code ends here*/
/*Gallery page css code starts here*/
	.dining-data
	{
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 5px;
		padding: 15px;
	}
	.dining-data ul
	{
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 30px;
		row-gap: 8px;
	}
	.dining-data ul li
	{
		padding: 10px 20px;
		background:ghostwhite;
		color: black;
		font-weight: bold;
		border-radius: 5px;
		font-size: 14px;
		letter-spacing: 1px;
		cursor: pointer;
	}
	.dining-data ul .gallery-list.active
	{
		background: darkorange;
	}
	.dining-cols
	{
		width: 80%;
	}
	.dining-cols .gallery-images
	{
		column-gap: 25px;
		columns: 5;
		margin: auto;
	}
	.dining-cols .gallery-images .gallery-img
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 5px;
		margin-bottom: 25px;
		transition: 0.5s ease;
		background: rgba(255,255,255,0.9);
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
		padding: 3px;
		cursor: pointer;
	}
	.dining-cols .gallery-images .gallery-img:hover
	{
		transform: scale(1.03);
	}
	.gallery-popup
	{
		width: 100%;
		height: 100%;
		padding:15px;
		position: fixed;
		top:0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
		backdrop-filter: blur(8px);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		visibility: hidden;
		opacity: 0;
		transition: 0.1s ease;
	}
	.gallery-popup.active
	{
		visibility: visible;
		opacity: 1;
	}
	.gallery-popup-img
	{
		width: 100%;
		height: 100%;
		border-radius: 5px;
		object-fit: cover;
		cursor: pointer;
	}
	.cut-popup
	{
		font-size: 30px;
		color: white;
		position:absolute;
		top:50px;
		right: 50px;
		background: darkred;
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		cursor: pointer;
	}
	@media screen and (max-width:1560px)
	{
		.dining-cols
		{
			width: 100%;
		}
	}
	@media screen and (max-width:1357px)
	{
		.dining-cols
		{
			width: 100%;
		}
		.dining-data ul
		{
			flex-wrap: wrap;
			row-gap: 10px;
			justify-content: left;
			text-align: center;
			align-items: center;
			column-gap: 10px;
		}
		.dining-cols .gallery-images
		{
			columns:4;
		}
	}
	@media screen and (max-width:1000px)
	{
		.dining-cols .gallery-images
		{
			columns:3;
		}
	}
	@media screen and (max-width:620px)
	{
		.dining-cols .gallery-images
		{
			columns:2;
		}
	}
	@media screen and (max-width:444px)
	{
		.dining-cols .gallery-images
		{
			columns:1;
		}
		.dining-data ul li
		{
			padding: 8px 12px;
		}
	}
/*Gallery page css code ends here*/

/*Room page css code starts here*/
	.dining-title h5
	{
		font-size: 18px;
	}
	.room-container
	{
		width: 100%;
/*		background: red;*/
		border-radius: 5px;
	}
	.room-cols
	{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		width: 80%;
		flex-wrap: wrap;
		padding: 20px 15px;
		column-gap: 28px;
		row-gap: 20px;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 5px;
	}
	.room-cols .rooms-content
	{
		flex-basis: 31%;
		background: whitesmoke;
		border-radius: 5px;
		line-height: 1.5;
		overflow: hidden;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
		transition: 0.3s ease;
	}
    .rooms-content:hover img
	{
		transform: rotate(-3deg) scale(1.06);

	}
	.rooms-content img
	{
		width: 100%;
		height: 250px;
		object-fit: cover;
		display: flex;
		transition: 0.4s ease;
	}
	.room-title
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		column-gap: 7px;
		padding: 12px 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		width: 90%;
		margin: auto;
	}
	.room-title span
	{
		font-size: 22px;
	}
	.room-title small
	{
		font-size: 25px;
		font-weight: bold;
	}
	.room-title-text
	{
		text-align:center;
	}
	.room-text
	{
		padding:20px 15px 15px 15px;
		text-align: center;
	}
	.room-text p
	{
		font-size: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		width: 90%;
		margin: auto;
	}
	.room-text .view-room
	{
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 3px;
		margin: 20px auto 10px auto;
		font-size: 15.5px;
		padding:10px;
		border:none;
		background: black;
		color: white;
		border-radius: 5px;
		width: 150px;

	}
	.room-text .view-room i
	{
		font-size: 16px;
	}
	@media screen and (max-width:1550px)
	{
		.room-cols
		{
			width: 90%;
		}
	}
	@media screen and (max-width:1400px)
	{
		.room-cols
		{
			width: 100%;
		}
		.dining-title
		{
			width: 100%!important;
		}
	}
	@media screen and (max-width:1088px)
	{
		.room-cols .rooms-content
		{
			flex-basis: 45%;
		}
	}
	@media screen and (max-width:650px)
	{
		.room-cols .rooms-content
		{
			flex-basis: 100%;
		}
	}
/*Room page css code ends here*/
/*Small room page css code starts here*/
	.viewRoom
	{
		width: 80%;
		margin: auto;
		padding: 8px;
	}
	.viewRoom-cols
	{
		display: flex;
		justify-content: center;
		column-gap: 60px;
		row-gap: 15px;
		width: 100%;
		margin: auto;
	}
	.viewRooms-left
	{
		flex-basis: 60%;
		border-radius: 5px;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.7);
		box-shadow: 0 0 20px rgba(0,0,0,0.6);
	}
	.viewRoom-big-image img
	{
		width: 100%;
		object-fit: cover;
		height: 500px;
		border-radius: 5px;
	}
	.room-small-images
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		column-gap: 10px;
		padding: 5px 10px;
		width: 100%;
	}
	.room-small-images img
	{
		width: 200px;
		object-fit: cover;
		height: 150px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		cursor: pointer;
		transition: .1s ease;
	}
	.room-small-images img.active
	{
		border:3px solid darkorange;
	}

	.viewRooms-right
	{
		flex-basis: 40%;
		border-radius: 5px;
	}
	.view-room-form
	{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1.6;
		padding: 20px;
		flex-flow: column;
		background: white;
		border-radius: 5px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	}
	.view-room-form h2
	{
		margin-bottom: 15px;
	}
	.view-room-form form
	{
		border-top: 1px solid lightgray;
		padding-top: 10px;
	}
	.room-fields
	{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin: 2px auto;
	}
	.room-fields label
	{
		font-size: 18px;
		margin-bottom: 5px;
	}
	.room-fields input
	{
		font-size: 15px;
		padding: 8px 15px;
		border-radius: 5px;
		border:1px solid gray;
		background: none;
	}
	.room-fields .room-btn-2
	{
		background: wheat;
		color: black;
		border:none;
		display: block;
		margin-top: 10px;
		padding: 12px;
		font-size: 17px;
		cursor: pointer;
		transition: 0.3s ease;
	}
	.room-fields .room-btn-2:hover
	{
		background: black;
		color: wheat;
	}

/*Description of room Css code starts here*/
	.Room-description
	{
		background: white;
		padding: 10px;
		width: 100%;
		border-radius: 15px;
		margin-top: 60px;
	}
	.Room-description-cols
	{
		display: flex;
		justify-content: space-between;
		column-gap: 150px;
		width: 100%;
		margin: auto;
		padding: 8px 15px;
	}
	.room-description-left
	{
		flex-basis: 70%;
		line-height: 1.5;
	}
	.room-description-left h3
	{
		margin-bottom: 15px;
		font-size: 25px;
		position: relative;
	}
	.room-description-left h3::before
	{
		content: "";
		position: absolute;
		bottom: -5px;
		left: 0;
		height: 4px;
		width: 150px;
		background: wheat;
		border-radius: 5px;
	}
	.room-description-left p
	{
		margin-bottom: 20px;
		line-height: 1.6;
	}
	.room-description-right
	{
		flex-basis: 30%;
	}
	.room-facilities .Facilities-cols
	{
		display: flex;
		align-items: center;
		justify-content: left;
		column-gap: 15px;
		padding: 18px 15px;
	}
	.facilities-data
	{
		border-radius: 5px;
		border:1px solid rgba(0,0,0,0.3);
		padding: 30px;
		text-align: center;
		transition: 0.2s ease;
	}
	.facilities-data:hover
	{
		background: wheat;

	}
	.facilities-data h4
	{
		color:rgba(0, 0, 0, 0.6);
		margin-bottom: 10px;
	}
	.facilities-data i
	{
		font-size: 30px;
		color:rgba(0, 0, 0, 0.6);
	}
	.budget-rooms
	{
		display: flex;
		justify-content: left;
		column-gap: 16px;
		margin:20px auto 5px auto;
		border-bottom: 1px solid lightgray;
		padding-bottom: 10px;
	}
	.budget-rooms img
	{
		border-radius: 5px;
		object-fit: cover;
		width: 100px;
		height: 70px;
	}
	.budget-rooms h4
	{
		color: gray;
	}
	.budget-rooms h3
	{
		font-size: 17px;
		margin-left: 4px;
		color: gray;
	}
	@media screen and (max-width:1550px)
	{
		.viewRoom
		{
			width: 95%;
		}
	}
	@media screen and (max-width:1468px)
	{
		.viewRooms-left
		{
			flex-basis: 80%;
		}
		.Facilities-cols
		{
			flex-wrap: wrap;
			row-gap: 15px;
		}
		.facilities-data
		{
			padding: 10px;
		}
	}
	@media screen and (max-width:1287px)
	{
		
		.viewRoom
		{
			width: 100%;
		}
		.viewRoom-cols
		{
			flex-wrap: wrap;
			row-gap: 15px;
		}
		.viewRooms-left ,.viewRooms-right
		{
			flex-basis: 100%;
		}
		.room-small-images
		{
			justify-content: center;
		}
	}
	@media screen and (max-width:1197px)
	{
		.Room-description-cols
		{
			flex-wrap: wrap;
			row-gap: 20px;
		}
		.room-description-left, .room-description-right
		{
			flex-basis: 100%;
		}
	}
	@media screen and (max-width:698px)
	{
		.room-small-images img
		{
			width:100px;
			height: 80px;
		}
	}
	@media screen and (max-width:560px)
	{
		.facilities-data h4
		{
			font-size: 14px;
		}
		.facilities-data i
		{
			font-size: 20px;
		}
	}
	@media screen and (max-width:450px)
	{
		.room-small-images img
		{
			width:70px;
			height: 50px;
		}
		.room-description-left h3
		{
			font-size: 20px;
		}
	}
/*Description of room Css code ends here*/

/*Small room page css code ends here*/

/*Offers section css code starts here*/
	.offers
	{
		width: 100%;
/*		background: white;*/
		border-radius: 5px;
		padding: 10px;
	}
	.offers-contents
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 80%;
		column-gap: 40px;
		border-radius: 5px;
		overflow: hidden;
		background: white;
		margin: 20px auto 40px auto;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
	}
	.offers-left
	{
		position: relative;
		flex-basis: 40%;
	}
	.offers-left img
	{
		width: 100%;
		height: 300px;
		object-fit: cover;
		display: flex;

	}
	.offers-left h3
	{
		position: absolute;
		top:50%;
		right:-60px;
		text-align: center;
		font-size: 27px;
		transform: translateY(-50%);
		width: 130px;
		padding: 10px;
		height: 130px;
		border-radius: 50%;
		border:5px solid black;
		background: white;
		box-shadow: 0 0 30px rgba(0,0,0,0.6);

	}
	.offers-right
	{
		flex-basis: 50%;
	}
	.offers-right h2
	{
		font-size: 28px;
		margin-bottom: 15px;
		position: relative;
	}
	.offers-right h2::before
	{
		content: "";
		position: absolute;
		bottom: -5px;
		left: 0;
		height: 4px;
		width: 80px;
		background: darkgreen;
		opacity: 0.4;
		border-radius: 5px;
	}
	.offers-right p
	{
		margin-right: 30px;
	}
	.offers-right a
	{
		display: block;
		margin:20px 0 0 0;
		font-size: 16px;
		padding: 10px 30px;
		border-radius: 5px;
		background: rgba(0,100,0,0.5);
		color: white;
		width: 150px;
	}
	@media screen and (max-width:1250px)
	{
		.offers-contents
		{
			width: 100%;
		}
	}
	@media screen and (max-width:930px)
	{
		.offers-contents
		{
			flex-wrap: wrap;
		}
		.offers-left ,.offers-right
		{
			flex-basis: 100%;
		}
		.offers-left h3
		{
			right: 50px;
		}
		.offers-right
		{
			padding: 20px;
		}
	}
/*Offers section css code ends here*/

/*About us Section css code starts here*/
	.About-us
	{
		width: 100%;

	}
	.about-us-cols
	{
		display: flex;
		justify-content: space-between;
		column-gap: 50px;
		row-gap:20px;
		margin: auto;
		width: 80%;
		padding: 15px;
		border-radius: 5px;
		background: white;
		overflow: hidden;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
	}
	.about-us-left
	{
		flex-basis: 50%;
		height: 500px;
		display: flex;
		column-gap: 15px;
	}
	.about-us-left img
	{
		width: 100%;
		object-fit: cover;
		height: 100%;
		border-radius: 5px;
	}
	.about-us-imgs-2
	{
		display: flex;
		row-gap: 15px;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		border-radius: 5px;
	}
	.about-us-imgs-2 img
	{
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}
	.about-us-right
	{
		flex-basis: 45%;
		margin-right: 20px;
	}
	.about-us-right h3
	{
		font-size: 30px;
/*		margin-bottom: 5px;*/
	}
	.about-us-right h4
	{
		font-size: 16px;
		margin-left: 4px;
	}
	.about-us-accordion
	{
		background: lightgray;
		margin: 14px 0;
		border-radius: 5px;
/*		padding: 5px	;*/
	}
	.about-us-accordion h2
	{
		background: rgba(243, 243, 243, 1.0);
		box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.3);
		padding: 10px;
		border-radius: 5px;
		font-size: 19px;
		color:black;
		position: relative;
		transition: 0.3s ease;
	}
	.about-us-accordion h2.active
	{
		background: black;
		color: white;
	}
	.about-us-accordion h2::before
	{
		content: "+";
		position: absolute;
		top:50%;
		right: 15px;
		transform: translateY(-50%);
		font-size: 22px;
		width: 25px;
		height: 25px;
		background: black;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border-radius: 50%;
		padding: 2px 2px 4px 4px;
	}
	.about-us-accordion h2.active::before
	{
		content: "-";
		background: white;
		color: black;
	}
	.about-us-accordion p
	{
		padding: 15px;
	}
	.about-us-accordion-data
	{
		height: 0;
		overflow: hidden;
		opacity: 0;	
	}

	.about-us-accordion-data.active
	{
		height: 100%;
		opacity: 1;
		animation:accordionAnim 0.3s ease;
	}
		@keyframes accordionAnim
	{
		from
		{
			opacity: 0;
			transform: translateY(-20px);
		}
		to
		{
			opacity: 1;
			transform: translateY(0);
		}
	}
	.about-video
	{
		width: 100%;
		height: 800px;
		background: white;
		text-align: center;
		margin:70px auto 40px auto;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	.about-overlay
	{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(rgba(0,50,0,0.6),rgba(0, 50, 0, 0.2));
	}
	.about-video video
	{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.about-video h1
	{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 60px;
	}

/*About us Section css code ends here*/