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

:root {
	--light-blue:#cce5ff;
	--primary-blue:#66b0ff;
	--normal-blue:#699CFE;
	--primary-blue:#6990f2;
	--dark-blue:#695CFE;
	--light-green:#f3ffa8;
	--primary-green:#c5e019;
}

html {
    scroll-behavior: smooth;
}

body {
	font-family:"Poppins" ,sans-serif;
	box-sizing:border-box;	
	overflow-x:hidden;
	background:#f9f9f9;
}

::-webkit-scrollbar {
	width:8px;
	height:8px;
}

::-webkit-scrollbar-track {
	background:#fff;
	border-radius:100vw;
	margin-block:.5rem;
}

::-webkit-scrollbar-track {
	background:#eee;
	border-radius:100vw;
	margin-block:.5rem;
}
 
::-webkit-scrollbar-thumb {
	background:#bbb;
	border-radius:100vw;
}

::-webkit-scrollbar-thumb:hover {
	background:var(--normal-blue);
}

.nav ul li:nth-child(7) a::after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:4px;
	color:#fff;
	background:var(--secondary-color);;
}

@media screen and (max-width:80rem) {
	
	.nav ul li:nth-child(7) a{
		color:#fff;
		background:var(--primary-color);
	}
	
	.nav ul li:nth-child(7) a:hover{
		color:#fff;
		background:var(--primary-color);
	}
	
	.nav ul li:nth-child(7) a::after{
		content:'';
		display:none;
	}
}

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

a {
	text-decoration:none;
}

button {
	border:none;
	background:transparent;
	cursor:pointer;
}

button:active {
	outline:2px solid #ddd;
}

.footer-section {
	background-image:linear-gradient(to bottom, #fff,#fff,var(--secondary-color-light));
}

.front-cover {
	width:100vw;
	height:clamp(400px,calc(70vh - 15px),1000px);
	position:relative;
	object-fit:cover;
	top:0;
	left:0;
}

.front-content {
	width:100vw;
	height:clamp(400px,calc(70vh - 15px),1000px);
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	display:flex;
	justify-content:center;
	align-items:center;
}

.front-content h1 {
	width:clamp(100px,90vw,500px);
	color:#fff;
	transform:scale(1.6);
	text-shadow:0 0 6px #000;
	text-align:center;
}

.things-to-do-wrapper {
	width:100vw;
	padding-block:20px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

.things-to-do-head {
	width:90vw;
	margin-bottom:30px;
}

.things-to-do-head h3 {
	color:var(--primary-color);
	margin-bottom:10px;
}

.things-to-do-head p {
	width:clamp(100px,90vw,900px);
	margin-bottom:30px;
	font-size:.85rem;
}

.loc-head {
	text-transform:capitalize;
	width:80vw;
	margin-bottom:10px;
	color:var(--primary-color);
}
/**/
.things-to-do-content {
	width:100vw;
	padding-block:20px;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}

.resort-offer {
	width:clamp(200px,80vw,1400px);
	min-height:100px;
	margin-bottom:30px;
	display:flex;
	padding-bottom:20px;
	gap:10px;
	border-bottom:1px solid #ddd;
}

.resort-offer:last-child {
	border-bottom:none;
}

.resort-offer .offer-img {
	width:clamp(200px,80vw,350px);
	height:150px;
	position:relative;
}
.resort-offer img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:150px;
	object-fit:cover;
}

.cut-off {
	position:relative;
	width:100%;
	height:100%;
	background-image:linear-gradient(to top right, transparent 80%,#3eb358 80%);
	text-align:right;
	color:#fff;
	font-size:1.7rem;
	padding:5px;
}

.resort-details {
	width:clamp(200px,87vw,800px);
	padding:15px;
	padding-top:0;
	font-size:.9rem;
	color:#777;
}

@media (max-width:1000px) {
	.front-content h1 {
		transform:scale(1.2);
	}
	
	.resort-offer {
		flex-wrap:wrap;
	}
	
	.resort-details { 
	    width:clamp(200px,87vw,350px);
	}
}

@media (max-width:600px) {
	.resort-offer {
		flex-wrap:wrap;
	}
	
	.front-content h1 {
		transform:scale(1);
	}
	
	.resort-details { 
	    width:clamp(200px,87vw,500px);
	}
}

.resort-details h3 {
	color:#555;
	margin-bottom:10px;
	font-weight:400;
}

.resort-details p {
	font-size:.85rem;
}

.offers-section-head {
	padding-block:20px;
	width:100vw;
	display:flex;
	justify-content:center;
}

.offers-section-head div {
	width:clamp(200px,87vw,1400px);
}

.offers-section-head h2 {
	margin-bottom:15px;
	color:#3eb358;
}

.offers-section-head p {
	margin-bottom:15px;
	color:#555;
	font-size:.85rem;
}