@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;
}

::-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(5) 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(5) a{
		color:#fff;
		background:var(--primary-color);
	}
	
	.nav ul li:nth-child(5) a:hover{
		color:#fff;
		background:var(--primary-color);
	}
	
	.nav ul li:nth-child(5) a::after{
		content:'';
		display:none;
	}
}

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

/**/
* {
	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;
}

.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;
}

.offers-section {
	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 .offer-img {
	width:clamp(200px,80vw,350px);
	height:170px;
	position:relative;
}
.resort-offer img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:170px;
	object-fit:cover;
}

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

.cut-off-period {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:30px;
	background:#3eb35855;
	color:#fff;
	font-size:.9rem;
	padding:5px;
	text-align:center;
	text-shadow:0 0 2px #000;
}

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

.resort-details button {
	position:absolute;
	bottom:5px;
	right:20px;
	padding:1px 4px;
	border-radius:3px;
	outline:1px solid #ddd;
	font-size:.8rem;
	color:#888;
}

.resort-details button:focus,
.resort-details button:hover {
	outline:1px solid #666;
	color:#000;
}

@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:#3eb358;
	margin-bottom:10px;
	font-weight:300;
}

.resort-details .cash {
	font-weight:300;
	font-size:1.3rem;
	color:#ca5f4f;
}

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

.resort-button {
	width:clamp(100px,80vw,200px);
	min-height:100px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.resort-button button {
	color:#fff;
	background:#6990f2;
	border-radius:5px;
	padding:10px;
	font-size:1.2rem;
}

.resort-button button:hover {
	color:#fff;
	background:#4970f2;
	border-radius:5px;
	padding:10px;
}

.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;
}
/**/
.permission-wrapper,
.signup-message-wrapper {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:0;
	background:#0002;
	z-index:10;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	transition:height 400ms ease 400ms;
}


@supports (backdrop-filter: blur(1rem)) {
	.permission-wrapper,
	.signup-message-wrapper {
		background:transparent;
		backdrop-filter:blur(.5rem);
	}
}

.permission-wrapper.active-signup-wrapper,
.signup-message-wrapper.active-signup-wrapper { 
    height:100%;
	transition:height 400ms ease 0ms;
}

.permission-content,
.signup-message-content {
	width:clamp(100px,100%,800px);
	height:max-content;
	border-radius:15px;
	background:#fff;
	padding:min(3rem,5vw);
	box-shadow:0 0 60px #000;
	margin-inline:1rem;
	transform-origin:top center;
	transform:scale(0,0);
	transition:transform 500ms ease 0ms;
}

.permission-content.active-signup-content,
.signup-message-content.active-signup-content {
	transform:scale(1,1);
	transition:transform 500ms ease 410ms;
}

.permission-content {
	border-radius:20px;
}

.signup-message-content h1 {
	font-size:min(7vw,1.6rem);
	background-image:linear-gradient(to right,#000, #000);
	background-size:cover;
	background-clip:text;
	-webkit-background-clip:text;
	color:transparent;
}

.permission-content p,
.signup-message-content p {
	margin-top:.9rem;
	color:#aaa;
}

@media screen and (max-width:415px) {
	.permission-content p,
	.signup-message-content p {
		color:.85rem;
	}
}

@media (max-width:540px) {
	@supports (backdrop-filter: blur(1rem)) {
		.permission-wrapper{
			background:transparent;
			backdrop-filter:blur(0);
		}
	}	
	.permission-wrapper {
		background:#0008;
	}
	.permission-content {
		background:#0005;
		box-shadow:0 0 20px #fff;
	}
	.permission-content p {
		color:#fff;
		text-shadow:0 0 3px #000;
	}
}

.permission-content button,
.signup-message-content button {
	display:inline-block;
	width:max-content;
	padding-block:.25rem;
	padding-inline:1rem;
	font-size:.9rem;
	border-radius:.3rem;
	margin-inline:5px;
	margin-top:2rem;
}

.close-signup-btn {
	background-image:linear-gradient(to right,#eee, #f9f9f9);
	outline:1px solid #eee;
	color:#aaa;
	transition:250ms ease;
	transition-property:background,outline,color;
}

.close-signup-btn:hover {
	background:#fff;
	outline-offset:2px;
	color:#666;
	outline:inset 15px solid #555;
}

.signup-btn {
	background-image:linear-gradient(to right,#77a7ff, #5477ed);
	color:#fff;
	outline:1px solid #6990f2;
	transition:250ms ease;
	transition-property:background,outline;
}

.signup-btn:hover {
	background:linear-gradient(to top,#679aff, #3467dd);
	outline-offset:2px;
	outline:inset 15px solid #6990f2;
}
/**/
.success-details-wrapper,
.get-details-wrapper,
.check-details-wrapper {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:0;
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:9;
	overflow:hidden;
	background:#0002;
	transform:height 10ms ease 500ms;
}

@supports (backdrop-filter: blur(1rem)) {
	.success-details-wrapper,
    .get-details-wrapper,
    .check-details-wrapper {
		background:transparent;
		backdrop-filter:blur(.3rem);
	}
}

@media (max-width:540px) {
	p {
		text-align:justify;
	}
}

.success-details-wrapper.active-wrapper,
.get-details-wrapper.active-wrapper,
.check-details-wrapper.active-wrapper {
	height:100vh;
	transform:height 10ms ease 0ms;
}

.check-details-content {
	width:clamp(250px, 100%,900px);
	height:max-content;
	padding:max(4vw,1rem);	
}

@media (max-width:420px) {
	.check-details-content {
		max-height:80vh;
		height:max-content;
		overflow:hidden;
		overflow-y:scroll;
	}
}


.check-details-content,
.success-details-content,
.get-details-content {
	background:#fff;
	border-radius:4px;
	box-shadow:0 0 100px #000;
	margin-inline:10px;
	position:relative;
	transform:scale(0,0) translate(-50%);
	transition:transform 500ms;
}

.check-details-content.active-block,
.get-details-content.active-block,	
.success-details-content.active-block {
	transform:scale(1,1) translate(0);
}

.cash-detail {
	color:#913030;
	font-weight:600;
	margin-bottom:10px;
	font-size:.9rem;
}

.back {
	padding:.35rem .75rem;
	background:#eee;
	border-radius:3px;
}

.back:hover {
	background:#bbb;
}

.resort-location {
    color:#000;
    margin-left:5px;
    text-transform:capitalize;	
}

.check-details-content h2{
	margin-bottom:20px;
}

.check-details-content p{
	width:clamp(250px,100%,800px);
	margin-bottom:25px;
	font-size:.9rem;
}

.check-details-content h3{
	margin-bottom:10px;
	font-size:1rem;
}

.room-info {
	display:flex;
	margin-bottom:20px;
	font-size:.9rem;
}

.room-info i{
	color:#aaa;
	margin-right:2px;
}

.room-info > *{
	margin-inline:5px;
}

.room-facilities {
	font-size:.9rem;
	width:clamp(250px,100%,850px);
	margin-bottom:20px;
	display:flex;
	flex-wrap:wrap;
	gap:15px;
}

.room-facilities > *{
	width:clamp(200px,100%,250px);
}

.room-icon {
	display:inline-block;
	width:40px;
	color:#aaa;
}

.room-icon i {
	font-size:1rem;
}

.check-available-btn {
	text-decoration:none;
	color:#000;
	padding:.5rem 0;
	position:relative;
	margin-right:10px;
	font-size:.75rem;
	font-weight:400;
}

.check-available-btn::after {
   content:'';
   position:absolute;
   bottom:0;
   left:0;
   right:0;
   height:2px;
   background:#000;
   transform:scale(1,1);
   transform-origin:center;
   transition:transform 150ms;
}

.check-available-btn:hover::after {
   transform:scale(.6,1);
}

.book-btn{
	cursor:pointer;
	border:none;
	background:#49ad51;
	color:#fff;
	padding:.35rem 1rem;
	border-radius:2px;
	font-size:.75rem;
	font-weight:400;
	transition:background 150ms;
}

.book-btn:hover {
	background:#36963e;
}

.book-btn-view {
	cursor:pointer;
	border:none;
	background:#ddd3;
	color:#fff;
	padding:.35rem 1rem;
	border-radius:2px;
	font-size:.75rem;
	font-weight:400;
	transition:background 150ms;
}

.book-btn-view:hover {
	background:var(--secondary-color-dark2);
}

.btn-wrapper {
	width:min(900px,100%);
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

.close-btn {
	position:absolute;
	top:5px;
	right:5px;
	font-size:1rem;
	background:#fff7;
	transition:background 150ms;
	padding:2px 5px;
	border-radius:50%;
}

.close-btn:hover {
	background:#fff;
}

.close-btn i {
	transition:transform 150ms;
}

.close-btn:hover i {
	transform:scale(1.2);
}


.cart-btn-wrapper {
	position:absolute;
	top:50px;
	right:8px;
	width:max-content;
	height:max-content;
}

.cart-btn {
	font-size:1rem;
	color:#ad4545;
	position:relative;
}

.cart-btn::before {
	content:'add to cart';
	position:absolute;
	right:120%;
	top:-3px;
	background:#fff;
	width:max-content;
	color:#000;
	padding:5px 7px;
	border-radius:3px;
	box-shadow:0 0 5px #0003;
	transform-origin:top right;
	transform:scale(0,0);
	transition:transform 300ms;
	font-size:.85rem;
}

.cart-btn:hover::before {
	transform:scale(1,1);
}

.book-btn{
	cursor:pointer;
	border:none;
	background:#49ad51;
	color:#fff;
	padding:.35rem 1rem;
	border-radius:2px;
	font-size:.75rem;
	font-weight:400;
	transition:background 150ms;
}

.book-btn-view {
	cursor:pointer;
	border:none;
	background:#ddd3;
	color:#fff;
	padding:.35rem 1rem;
	border-radius:2px;
	font-size:.75rem;
	font-weight:400;
	transition:background 150ms;
}

.book-btn-view:hover {
	background:var(--secondary-color-dark2);
}

.book-btn:hover {
	background:#36963e;
}

.back-btn,
.continue-btn {
	width:max-content;
	margin-inline:5px;
	padding:.35rem 1rem;
	padding-bottom:.4rem;
	background:var(--primary-color);
	color:#fff;
	border-radius:2px;
	transition:background 150ms;
	font-size:.8rem;
}

.back-btn {
	background:#ccc;
}

.back-btn:hover {
	background:#aaa;
}

.continue-btn:hover {
	background:var(--secondary-color-dark);
	outline:2px solid #f1f1f1;
	outline-offset: 5px;
}

.continue-btn:active {
	outline:3px solid var(--primary-color);
	outline-offset: 5px;
}

a[class="continue-btn"] {
	font-size:.8rem;
}