@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;600;700;800;900&display=swap');

:root {
	--background: #ffffff;
	--background-muted: #f2f2f2;
	--background-accent: #d7d7d7;
	--accent-200: #f6f6f6;
	--accent: #acacac;
	--primary: #1d1c1a;
	--primary-hover: #2e2e2e;
	--primary-foreground: #ffffff;
	--nav-background: #cdcdcd;
	--foreground: #1d1c1a;
	--booking-widget: #f0f1ec;
	--bookingtabs-background: var(--accent);
	--icon: var(--primary);

	--accent-foreground: #939393;
	--secondary: #f5b335;
	--secondary-muted: #fbbe75;
	--border: var(var(--primary));
	--logo-background: #1e1e1e;
	--swiper-theme-color: #ffffff;
	--logo-background: #d06433;

	--text-sans: 'Figtree', sans-serif;
	--text-serif: 'Unna', serif;
	--base-font: 'Figtree', sans-serif;
	--base-font-size: 16px;
	--cubic-ease: cubic-bezier(0.81, 0.08, 0.51, 0.98);
	--cubic-transition: all 350ms var(--cubic-ease);
	--text-3xs: clamp(0.57rem, -0.15vi + 0.6rem, 0.49rem);
	--text-2xs: clamp(0.66rem, -0.13vi + 0.69rem, 0.58rem);
	--text-xs: clamp(0.76rem, -0.1vi + 0.78rem, 0.7rem);
	--text-sm: clamp(0.87rem, -0.05vi + 0.88rem, 0.84rem);
	--text-base: clamp(1rem, 0.01vi + 1rem, 1.01rem);
	--text-lg: clamp(1.15rem, 0.1vi + 1.13rem, 1.21rem);
	--text-xl: clamp(1.32rem, 0.22vi + 1.27rem, 1.45rem);
	--text-2xl: clamp(1.52rem, 0.37vi + 1.44rem, 1.74rem);
	--text-3xl: clamp(1.75rem, 0.58vi + 1.62rem, 2.09rem);
	--text-4xl: clamp(2.01rem, 0.85vi + 1.83rem, 2.5rem);
	--text-5xl: clamp(2.31rem, 1.19vi + 2.05rem, 3rem);
	--text-6xl: clamp(2.66rem, 1.63vi + 2.3rem, 3.61rem);
	--text-7xl: clamp(3.06rem, 2.18vi + 2.58rem, 4.33rem);
	--text-8xl: clamp(3.52rem, 2.88vi + 2.89rem, 5.19rem);

	--header-eyebrow-height: 2.25rem;
	--header-height: 4.5rem;
	--bookingtabs-height: 4rem;
	--swiper-navigation-size: 2.5rem;
	--swiper-theme-background: var(--primary);
	--swiper-pagination-bullet-inactive-color: var(--accent);
	--swiper-pagination-color: var(--secondary);

	--edge: 2rem;
}

.dark,
[data-theme='dark'] {
	--background: #1d1c1a;
	--background-muted: #2e2e2e;
	--background-accent: #292c30;
	--accent: #585856;
	--foreground: #ffffff;
	--primary: #df6a2e;
	--primary-hover: #cd5b22;
	--primary-foreground: #ffffff;
	--nav-background: #151515;
	--booking-widget: var(--background-accent);
	--bookingtabs-background: var(--background);
	--icon: var(--secondary-muted);
}
a {
	color: inherit;
}
.privacy {
	position: fixed;
	/* display: none; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	bottom: 0;
	width: 100%;
	background-color: var(--background-muted);
	z-index: 999;
	gap: 1rem;

	flex-direction: column;
}

.privacy p {
	margin: 0;
	font-size: clamp(12px, 4vw, 16px);
	text-align: center;
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;

	gap: 1.25rem;
}

.agree {
	padding: 10px 20px;
	color: rgb(255, 255, 255);
	background-color: rgb(24, 23, 23);
	border: none;
	min-width: 8rem;
	cursor: pointer;
}

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

	font-family: 'Figtree', sans-serif;
}

p {
	margin: 0.75rem 0;
	font-size: clamp(11px, 3vw, 20px);
}

h1 {
	font-size: clamp(17px, 4vw, 36px);
	font-weight: 600;
}

h2 {
	font-size: clamp(16px, 5vw, 32px);
	font-weight: 600;
	transition: var(--cubic-transition);
}

html,
body {
	height: 100svh;
	overflow: hidden;
	overflow-y: auto;
	height: 100dvh;
}

body {
	/* background-image: url("../img/portal-bg.webp");
  background-size: cover;
  background-attachment: fixed;
  background-position: center; */

	background-color: var(--background);

	font-size: var(--text-base);
	color: var(--foreground);
	display: flex;
	flex-direction: column;
}

footer {
	height: var(--footer-height);
	position: fixed;
	bottom: 0;
	background-color: var(--color-background-dark);
	width: 100%;
	font-size: var(--text-sm);

	line-height: 1.25;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	gap: 0.375rem;
	padding: 1rem 1.25rem;
	z-index: 99;
}

.links a {
	color: inherit;
}

.main {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 0.75rem;

	min-height: calc(100dvh - var(--footer-height));

	min-height: calc(100svh - var(--footer-height));

	margin-bottom: var(--footer-height);
}

.container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
	padding: 0 0.75rem;
}

.main {
	margin-bottom: 0;
	min-height: 0;
	flex: 1 0.5 768px;
}

footer {
	position: static;
	width: auto;
}

.intro,
.portals {
	width: 100%;
}

.logo {
	width: 10rem;
}

.intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* padding: 1rem 0; */
}

.portals {
	display: grid;
	grid-template-columns: 1fr;
	/* gap: clamp(1rem, 4vw, 2rem); */
	gap: 0.75rem;
	flex: 1;

	/* height: 400px; */
}

.portal {
	border-radius: 10px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-starr;
	padding: 1.25rem;

	color: var(--color-text-dark);

	position: relative;

	/* height: 400px; */

	overflow: hidden;
	padding: 2rem 1.5rem 2rem;
}

.intro img {
	max-width: 80px;
	width: 100%;
	height: auto;
}

.portal-body {
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: flex-end;
	z-index: 1;

	color: #fff;
}

.subheader {
	font-size: clamp(0.75rem, 5vw, 1rem);
	margin: 0.3rem 0 0 0;
	display: flex;
	gap: 5px;
	align-items: center;
}

.subheader img {
	height: 13px;
	width: auto;
}

.subheader span {
	font-size: clamp(12px, 4vw, 16px);
}

.destination-cta {
	display: flex;
	align-items: center;
	text-decoration: none;
	font-size: clamp(12px, 3vw, 16px);
	gap: 1rem;

	background-color: var(--primary);
	padding: 0.475rem 1rem;
	color: #fff;
	border-radius: 8px;
	font-weight: 600;

	transition: var(--cubic-transition);
}

.destination-cta:hover {
	background-color: var(--primary-hover);
}

.destination-cta img {
}

.portal h2 {
	line-height: 1;
}

.portal:hover .background {
	filter: none;
}

.headline {
	text-transform: uppercase;

	margin-top: 1rem;
	text-align: center;
}

.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	filter: brightness(60%);
	transition: filter 0.35s var(--cubic-ease);
}

.links {
	display: flex;
	gap: 1rem;
}

.pagcor {
	position: absolute;
	max-width: 100%;
	width: 10rem;
	height: auto;
	display: block;
	top: 0.5rem;
	left: 0.5rem;
}

.desktop {
	display: none;
}

.mobile {
	display: block;

	object-position: 90% 80%;
}

.portal.full {
	width: 100%;
	padding: 2.5rem 2rem;

	height: auto !important;
	display: flex;
	justify-content: flex-end;
}

.portal.full .background {
	height: 100%;
	object-position: center center;
	gap: 2rem;
	filter: unset;
}

.portal.full .background-mobile {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	filter: none;
	transition: filter 0.35s var(--cubic-ease);
}

.portal.full {
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	display: flex;
	z-index: 1;
	padding: 4rem 0;
	position: relative;
	gap: 2rem;

	padding-left: 3rem;
	padding-right: 3rem;

	.portal-body {
		align-items: flex-end;
		gap: 1rem;
		transform: unset;
	}
}

.portal-details {
	/* max-width: 400px;
  width: 100%; */
	font-size: clamp(12px, 3vw, 24px) !important;
	text-align: right;

	.mobile {
		display: none;
	}
}

.subheader {
	flex-direction: row;
	align-items: center;
	display: flex;
	z-index: 1;
	position: relative;
}

.portal.full .portal-lny .subheader {
	margin: 0;
}

.portal.full .portal-lny .subheader span {
	font-size: clamp(12px, 3vw, 20px);
	color: #fff;
	margin: 0;
	max-width: 400px;
}

.portal.full .portal-body:hover {
	padding-bottom: unset;
	transform: unset;
}

.portal.full .portal-body .portal-content .subheader span {
	font-size: 1.25rem;
}

.portal.full .portal-body .portal-footer {
	bottom: unset;
}

.portal.full .portal-body .portal-footer {
	position: relative;
	transform: unset;
}

.lny-banner {
	position: relative;
	width: 100%;
	height: auto;
}

.lny-banner .background {
	position: absolute;
	height: auto;
}

.lny-content {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 1;
	position: relative;
}

.annbile-gradient {
	display: none;
	height: 100%;
	width: 100%;
	position: absolute;
	background-image: linear-gradient(
		0deg,
		rgba(0, 0, 0, 1) 0%,
		rgba(255, 255, 255, 0) 100%
	);
	bottom: 0;
}

.hero-parallax {
	/* position: fixed; */
	top: 0;
	left: 0;
	width: 100%;
	margin-top: 0px;
	height: 50vh;
	.swiper-slide {
		display: block;
		width: 100%;
	}
}

.block-content {
	position: relative;
	margin: 0 auto;
	max-width: 1334px;
	padding-bottom: 4rem;
	padding-top: 3rem;
}

.overlay-parallax {
	margin-top: 40rem;
}

.main-banner-content {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	.img-container {
		img {
			width: 100%;
			/* display: block; */
			display: none;
		}

		img + img {
			display: block;
		}
	}
}

.block {
	display: block !important;
}

@media screen and (max-width: 991px) {
	.banner-desktop {
		display: block;
	}

	.banner-mobile {
		display: block;
	}

	.mobile-gradient {
		display: block;
	}
	.portal.full {
		justify-content: center;
		padding: 5rem 1.25rem 1.25rem 1.25rem;
	}

	.portal.full .portal-body {
		justify-content: space-between;
	}

	.portal-details {
		font-size: 1rem;
		text-align: left;
	}

	.portal.full .portal-lny {
		width: 100% !important;
		justify-content: space-between;
		align-items: flex-end;

		&.psy {
			justify-content: flex-end;
		}
	}

	.portal.full .background {
		display: none;
	}

	.portal.full .background-mobile {
		display: block;
	}
}
.portal-lny:hover .portal-body {
	padding-bottom: unset !important;
}

@media screen and (max-width: 640px) {
	.portal {
		height: 200px;
	}

	.banner-mobile {
		display: block !important;
	}

	.banner-desktop {
		display: none;
	}

	/* .portal-details {
    max-width: 190px;
  } */

	.portal-details {
		max-width: 220px;
		br {
			display: none;
		}
	}
}

@media screen and (min-width: 1024px) {
	.banner-desktop {
		display: block;
	}

	.grid-2 {
		grid-template-columns: 1fr;
	}

	:root {
		--footer-height: 40px;
	}

	.container {
		padding: 0 1.25rem;
	}

	.desktop {
		display: block;
	}

	.mobile {
		display: none;
	}

	.background.martin {
		transition: var(--cubic-transition);
	}

	.portal:hover .background.martin {
		object-position: 85% center;
	}

	.intro img {
		max-width: 120px;
	}

	.privacy {
		flex-direction: row;
		padding: 0.45rem 2rem;
	}

	.privacy p {
		text-align: left;
	}

	.destination-cta {
		padding: 1rem;
	}

	p {
		margin: 1rem 0;
	}

	.main {
		gap: 1rem;
	}

	footer {
		flex-direction: row;
		justify-content: space-between;
	}

	.intro {
		align-items: center;
	}

	.portals {
		grid-template-columns: 1fr 1fr 1fr;
		grid-auto-rows: 1fr;
		transition: var(--cubic-transition);
		gap: 1.25rem;

		/* height: 400px; */
	}

	.portals:has(.sec-hyun, .sn-hyun) {
		grid-template-columns: 1fr 1fr;
	}
	/* 
  .portal {
    height: 400px;

  } */

	.portals:has(.left:hover) {
		grid-template-columns: 1.75fr 0.75fr 0.75fr;
		border-radius: 1px;
	}

	.portals:has(.center:hover) {
		grid-template-columns: 0.75fr 1.5fr 0.75fr;
	}

	.portals:has(.sec-hyun:hover) {
		grid-template-columns: 2.25fr 0.75fr;
	}

	.portals:has(.sn-hyun:hover) {
		grid-template-columns: 0.75fr 2.25fr;
		width: 1;
	}

	.portals:has(.right:hover) {
		grid-template-columns: 0.75fr 0.75fr 1.5fr;
	}

	.portals:has(.left:hover) .center {
		border-radius: 0;
	}

	.portals:has(.left:hover) .right {
		border-radius: 0 10px 10px 0;
	}

	.portals:has(.center:hover) .left {
		border-radius: 10px 0 0 10px;
	}

	.portals:has(.center:hover) .right {
		border-radius: 0 10px 10px 0;
	}

	.portals:has(.right:hover) .left {
		border-radius: 10px 0 0 10px;
	}

	.portals:has(.right:hover) .center {
		border-radius: 0;
	}

	.portals:has(.left:hover) .center h2,
	.portals:has(.left:hover) .right h2 {
		font-size: 1rem;
	}

	.portals:has(.center:hover) .left h2,
	.portals:has(.center:hover) .right h2 {
		font-size: 1rem;
	}

	.portals:has(.right:hover) .left h2,
	.portals:has(.right:hover) .center h2 {
		font-size: 1rem;
	}

	.left:hover {
		border-radius: 10px 0 0 10px;
	}

	.center:hover {
		border-radius: 0;
	}

	.right:hover {
		border-radius: 0 10px 10px 0;
	}

	.portal-body {
		justify-content: space-between;
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
		padding-bottom: 0;
		transition: padding 0.35s var(--cubic-ease);
	}

	.portal-footer {
		position: absolute;
		transform: scale(0);
		transition: transform 0.35s var(--cubic-ease);
		transform-origin: bottom left;
	}

	.portal-footer {
		bottom: 2rem;
	}

	.portal:hover .portal-body {
		padding-bottom: 5rem;
	}

	.portal:hover .portal-footer {
		display: block;
		transform: scale(1);
	}

	.destination-cta {
		padding: 0.875rem 1.25rem;
	}

	.pagcor {
		width: 15rem;
	}
}

@media screen and (min-width: 1280px) {
	.portals:has(.left:hover) {
		grid-template-columns: 2fr 0.5fr 0.5fr;
		border-radius: 1px;
	}

	.portals:has(.center:hover) {
		grid-template-columns: 0.5fr 2fr 0.5fr;
	}

	.portals:has(.right:hover) {
		grid-template-columns: 0.5fr 0.5fr 2fr;
	}

	.grid-2 {
		grid-template-columns: 1fr 1fr;
	}

	.banner-mobile {
		display: none;
	}

	.heading-line {
		background-size: 80% 1px !important;
		padding: 1rem 0;
	}
}

.banner-mobile {
	display: none;
}

.banner-container {
	img {
		width: 100%;
		height: auto;
	}
}

.banner {
	position: relative;
	/* aspect-ratio: 1920/750; */
	width: 100%;
	height: 100%;
	overflow: inherit;
	isolation: isolate;
}

.banner .swiper-wrapper {
	padding: 0;
	margin: 0;
	z-index: 0;
}

.banner .swiper-slide {
	display: block;
	list-style: none;
}

.banner .swiper-slide a {
	display: block;
}

.banner .banner-pagination {
	position: absolute;
	bottom: 0.5rem;
	z-index: 1;
	text-align: center;
}

.banner .learn-more {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	font-size: var(--text-base);
	text-transform: uppercase;
	font-weight: 600;
	transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	/* background: rgba(0, 0, 0, 0.1607843137); */
	background-color: white;
	color: #1d1c1a;
	padding: 0.75rem 1.5rem;
	/* border: 1px solid var(--foreground); */
	text-decoration: none;
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translate(-50%, 0);
}

.swiper-pagination-bullet-active {
	background-color: var(--primary);
}

.heading-line {
	display: flex;
	align-items: center;
	gap: 2rem;
	justify-content: center;
	width: 100%;
	gap: 1.5rem;
	span {
		flex: 1;
		height: 1px;
		background-color: var(--accent);
	}
	h2 {
		flex: 0 0 auto;
		background-color: var(--background);
		font-size: clamp(16px, 4vw, 28px) !important;
	}
}

.pop-up {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 10;
	backdrop-filter: blur(10px);
}

.pop-up .container {
	padding: 2rem;
	background-color: #2e2e2e;
	max-width: 30rem;
}

.pop-up.hide {
	display: none;
}

.pop-up .container h2,
.pop-up .container p {
	font-weight: 400;
	text-align: center;
}

.pop-up .container p {
	font-size: 1rem;
}

.pop-up .container .contents {
	margin-bottom: 1rem;
	border-bottom: solid 1px #ffffff33;
}

.pop-up .container button {
	box-shadow: none;
	border: none;
	justify-content: center;
	text-transform: uppercase;
	cursor: pointer;
}

/* .heading-line {
  text-align: center;
  width: 100%;
  
}

.heading-line::before,
.heading-line::after {
  background-color: #696561;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 25%;
  padding-left: 2rem;
  padding-right: 2rem;
}

.heading-line::before {
  right: 0.5em;
  margin-left: -50%;
}

.heading-line::after {
  left: 0.5em;
  margin-right: -50%;
} */