/** Setting up the page **/
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-family: sans-serif;
	height: 100%;
}

/* body {
	padding-top: 53px;
} */
* {
	box-sizing: border-box
}

/*Reset buttons, and links styles*/
a {
	color: inherit;
	text-decoration: none;
	font-size: inherit;
}

a:active,
a:hover {
	outline: 0
}

h1 {
	margin: .67em 0;
	font-size: 2em
}

.active-page {
	background-color: #459aef !important;
}

img {
	border: 0
}

svg:not(:root) {
	overflow: hidden
}

input::-moz-focus-inner {
	border: 0;
	padding: 0
}

input {
	line-height: normal
}

input[type=checkbox],
input[type=radio] {
	box-sizing: border-box;
	padding: 0
}

img {
	vertical-align: middle;
	max-width: 100%;
	display: inline-block
}

.w-inline-block {
	max-width: 100%;
	display: inline-block
}

.w-clearfix:before,
.w-clearfix:after {
	content: " ";
	grid-area: 1/1/2/2;
	display: table
}

.w-clearfix:after {
	clear: both
}

.w-tab-link {
	vertical-align: top;
	text-align: left;
	cursor: pointer;
	padding: 9px 30px;
	text-decoration: none;
	display: inline-block;
	position: relative
}

.w-tab-content {
	display: block;
	position: relative;
	overflow: hidden
}

.w-tab-pane {
	display: none;
	position: relative
}

.w--tab-active {
	display: block
}


:root {
	--deep-pacific: #002a3a;
	--contextual-green: #feed65;
	--manhattan-midnight: #131e29;
	--playwire-light-gray: #f8f8f8;
	--creative-blue: #4ac1e0;
	--playwire-mid-gray: #5b6670;
	--tokyo-sunrise: #e53e51;
	--dutch-orange: #f88d2a;
	--la-golden-hour: #ffb71b;
	--playwire-gray: #565959;
	--playground-pink: #fe0060
}

.gallery-mobile-iframe {
	border: 2px solid #f1f1f1;
	background-color: #fff;
	border-radius: 10px;
	aspect-ratio: 9/15.9;
	width: 320px;
	overflow: hidden;
	margin: 20px auto;
	position: relative;
}

/* Mobile iframe styling */
.gallery-mobile-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border: none;
	display: block;
}

.iframe-scaler {
	transform: scale(0.9875) !important;
	transform-origin: top left;
	width: 320px;
	height: 566px;
	position: relative;
	z-index: 2;
}

.iframe-scaler iframe {
	width: 408px !important;
	height: 717px !important;
	border: none;
	display: block;
	transform: scale(0.79) !important;
	transform-origin: inherit;
}

.gallery-mobile-demo {
	z-index: 10;
	border: 2px solid #feed65;
	-webkit-backdrop-filter: saturate(200%)blur(200px);
	background-color: #ffffff;
	border-radius: 20px;
	flex-direction: column;
	padding: 0 5px 10px;
	display: flex;
	position: relative;
	overflow: hidden
}

.gallery-mobile-top {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 30px;
	display: flex
}

.mobile-mic {
	background-color: #152247;
	border-radius: 20px;
	width: 75px;
	height: 4px
}

.nav-menu {
	flex-flow: column wrap;
	width: 100%;
	display: flex
}

.gallery-demo-desktop-only {
	justify-content: center;
	align-items: stretch;
	display: flex;
	position: relative
}

.gallery_tabs-desktop {
	justify-content: center;
	align-items: center;
	height: 100vh;
	display: flex;
	position: relative
}

.body-container {
	width: 80vw;
	position: relative;
}

.gallery-tabs_mobile {
	justify-content: center;
	align-items: center;
	height: 750px;
	padding-top: 3.13em;
	padding-bottom: 3.13em;
	display: flex;
	position: relative
}

.gallery-tabs_mobile.internal {
	width: 100%;
	height: 100vh;
}

.gallery-full {
	flex-flow: wrap;
	width: 100vw;
	height: 100dvh;
	padding-top: 0;
	display: flex;
	overflow: hidden
}

.gallery-desktop-iframe {
	border: 2px solid var(--playwire-light-gray);
	background-color: #fff;
	border-radius: 20px;
	width: 90%;	/* Set to 90% of the screen width */
	max-width: 1280px;	/* Restrict maximum width on the screen */
	aspect-ratio: 16 / 9;	/* Maintain aspect ratio */
	overflow: hidden;
	margin: auto;	/* Center horizontally */
}

/* iframe */
.gallery-desktop-iframe iframe {
	border: 1px solid #57FFBB;
	transform-origin: top left;
	width: 1932px !important;	/* Original width before scaling */
	height: 1080px !important;	/* Original height before scaling */
}

/* First child div */
.gallery-desktop-iframe>div {
	overflow: hidden;
	width: 100% !important;	/* Match parent width */
	height: 100% !important;	/* Match parent height */
}

.background-wrapper {
	display: none;
	background-image: var(--bg-image);
	background-size: cover;
	background-repeat: no-repeat;
}

/*
:root {
	--scale-factor: calc(0.9 / (1928 / 100vw));	/* Unitless value */
} */

.gallery-video-iframe {
	border: 2px solid var(--playwire-light-gray);
	background-color: #fff;
	border-radius: 20px;
	width: 854px;
	height: 480px;
	overflow: hidden;
}

/** NEW CSS **/
.nav-container-body {
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1em 15px 2.22em;
	padding: 0px;
	display: block;
}

.gallery-nav_wrapper {
	border-radius: 0px;
	margin-bottom: 20px;
}

/* CSS for the main interaction */
.accordion>input[type="checkbox"] {
	position: absolute;	/*left: -100vw;*/
	opacity: 0;
	visibility: hidden;
}

.accordion .content {
	overflow-y: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

.accordion:has(.accordion-checkbox:checked)>.content {
	max-height: 500px;
	overflow: visible;
}

/* Styling */
.accordion {
	margin-bottom: 2px;
	font: 14px/1.5em "Montserrat", sans-serif;
	font-weight: 400;
	position: relative;
}

.accordion>input[type="checkbox"]:checked~.content {
	padding: 0px;
	border: 1px solid #e8e8e8;
	border-top: 0;
}

.accordion .handle {
	margin: 0;
	font-size: 1.125em;
	line-height: 1.2em;
}

.accordion label {
	display: block;
	color: #152247;
	cursor: pointer;
	font-weight: normal;
	padding: 12px;
	background-color: #DEE5F0;
}

.accordion label:hover,
.accordion label:focus {
	background-color: #fff;
}

.accordion .handle label:before {
	font-family: 'fontawesome';
	content: "\f054";
	display: inline-block;
	margin-right: 10px;
	font-size: .58em;
	line-height: 1.556em;
	vertical-align: middle;
}

.accordion>input[type="checkbox"]:checked~.handle label:before {
	content: "\f078";
}

.accordion p:last-child {
	margin-bottom: 0;
}

.gallery-dropdown_link-block {
	border-bottom: 1px solid var(--playwire-light-gray);
	background-color: #152247;
	cursor: pointer;
	flex-wrap: wrap;
	align-items: center;
	height: 60px;
	padding: 15px 15px 15px 20px;
	transition: all .2s cubic-bezier(.165, .84, .44, 1);
	display: flex;
	position: relative;
	color: #ffffff;
}

.gallery-dropdown_link-block:hover {
	background-color: #459aef;
}

.gallery-dropdown_link-block.w--current {
	background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(121deg, var(--contextual-green), var(--creative-blue))
}

.nav-container-desktop {
	border-right: 3px solid #ff9052;
	display: flex;
	flex-flow: column;
	overflow: auto;
	position: static;
	width: calc(20vw - 3px);
	z-index: 24;
	background: #fff;
}

body {
	color: #333;
	background-color: #fff;
	margin: 0;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	-webkit-font-smoothing: antialiased;
	background-image: url("https://s3.us-east-1.amazonaws.com/cdn.intergi/campaigns/sounds/demosite/img/bg.jpg");
	width: 100vw;
	height: 100dvh;
	background-size: cover;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

.gallery_tabs-menu {
	z-index: 3;
	border-right: 2px solid yellow;
	border-bottom: 2px solid yellow;
	background-color: #152247;
	border-bottom-right-radius: 30px;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	width: 80px;
	height: fit-content;
	padding: 0;
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	box-shadow: 1px 1px 12px 1px #0000001a
}

.gallery_tabs {
	flex-direction: row;
	display: block;
	position: relative;
	min-height: 376px;
}

.gallery_tabs-link {
	background-color: #152247;
	justify-content: center;
	margin-bottom: 0;
	transition: background-color .2s cubic-bezier(.165, .84, .44, 1);
	display: flex;
	padding: 1em 0 1em 0;
	color: #fff !important;
}

.gallery_tabs-link:hover {
	background-color: #5b66701a
}

.gallery_tabs-link.w--current {
	border-top: 1px solid #152247;
	border-bottom: 1px solid #152247;
	background-color: #459aef;
}

.gallery_tabs-content {
	width: 100%;
	position: relative;
	inset: 0%;
}

.gallery-breakpoint-icons {
	flex-wrap: wrap;
	justify-content: flex-end;
	display: flex
}

.breakpoint-icon {
	height: 35px
}

.nav-logo-area {
	z-index: 4;
	justify-content: flex-start;
	align-items: center;
	width: 220px;
	margin-top: 2em;
	margin-bottom: 2em;
	padding-left: 20px;
	padding-right: 20px;
	text-decoration: none;
	display: flex;
	position: static;
	overflow: visible
}


/* Hamburger menu for mobile */
.hamburger-container,
.mobile-nav {
	display: none;
}

.directions {
	color: #ffffff;
	margin: auto;
	text-align: center;
	padding: 5px;
	font-size: 12px;
	background-color: #152247;
	width: fit-content;
	padding: 5px 25px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;

	position: absolute;
	left: 50%;
	transform: translateX(-50%);

}

.directions_mobile {
	display: none;
}

/* Make panes and dots stack vertically */
.w-tab-pane .gallery_tabs-desktop,
.w-tab-pane .gallery-tabs_mobile .gallery-mobile-demo {
	/*display: flex;*/
	flex-direction: column;
	/* key: puts switcher below the panes */
}

.w-tab-pane .gallery-tabs_mobile .gallery-mobile-demo {
	min-height: 637px;
}

.gallery-tabs_mobile.internal {
	display: flex;
	/* already applied */
	flex-direction: column;
	/* stack children vertically */
	align-items: center;
	/* centers horizontally */
}

/* Example panes */
.example-panes {
	position: relative;
}

.example-pane {
	display: none;
}

.example-pane.is-active {
	display: block;
}

/* Dots / number buttons */
.example-switcher {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	margin-top: 12px;
	width: auto;
	clear: both;
}

.example-dot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #ff0;
	background: #152247;
	color: #fff;
	cursor: pointer;
	line-height: 34px;
	font-weight: 600;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.example-dot.is-active,
.example-dot:focus-visible {
	border-color: #ff0;
	background: #459aef;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) inset;
}


/******** MOBILE CSS ***********/

/* Media query for mobile devices */
@media only screen and (max-width: 768px) {

	/* Make the navigation menu horizontal */
	.nav-container-desktop {
		float: none;
		width: 100%;
		height: auto;
		padding: 0;
		border-bottom: 3px solid #ff9052;
		border-right: none;
	}

	.body-container {
		width: 100vw;
	}

	.gallery-full {
		height: auto;
		position: fixed;
	}

	.nav-container-body {
		flex-direction: row;
		/* Change to row for horizontal layout */
		justify-content: space-between;
		/* Distribute items evenly */
		align-items: center;
		/* Center items vertically */
		padding: 0 10px;
		/* Add some padding for better spacing */
	}

	/* Hamburger menu for mobile */
	.hamburger-container {
		display: none;
		align-items: center;
		padding: 10px 15px;
		background-color: #152247;
		color: white;
		cursor: pointer;
		font-family: 'Montserrat', sans-serif;
		font-weight: 500;
	}

	.hamburger-icon {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 24px;
		height: 18px;
		margin-right: 10px;
	}

	.hamburger-icon span {
		display: block;
		height: 2px;
		width: 100%;
		background-color: white;
		border-radius: 2px;
	}

	.hamburger-text {
		font-size: 14px;
	}

	.hamburger-container {
		display: flex;
		position: static;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}

	/* Mobile navigation styles */
	.nav-container-body {
		width: 100%;
		height: auto;
		padding: 0;
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
		overflow-y: auto;
		/* Enable scrolling for long menus */
	}

	.nav-container-body.active {
		display: block;
		top: 122px;
		z-index: 999;
	}

	.gallery-tabs_mobile.internal {
		height: auto;
		margin-top: -15px;
	}

	.gallery_tabs-pane {
		padding-top: 40px;		/* To accommodate the fixed hamburger menu on mobile */
	}

	.gallery_tabs-menu {
		/* Change to horizontal layout with 2 columns */
		position: relative;
		top: 0;		/* Position below the hamburger menu */
		left: 0;
		width: fit-content;
		height: fit-content;
		display: flex;
		flex-direction: row;		/* Horizontal layout */
		justify-content: center;		/* Center the icons */
		align-items: center;
		background-color: #152247;
		border-right: 2px solid #feed65;		/* Yellow border at bottom */
		border-bottom: 2px solid #feed65;		/* Yellow border at bottom */
		border-bottom-right-radius: 30px;
		padding: 0;
		z-index: 9;
	}


	/* Each toggle takes up 50% of the width */
	.gallery_tabs-link {
		width: 50%;
		max-width: 150px;		/* Optional: limit max width */
		padding: 10px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: none;
	}

	/* VIDEO CONTAINER */
	.gallery-video-iframe {
		border: 2px solid var(--playwire-light-gray);
		background-color: #fff;
		border-radius: 20px;
		width: 90vw;		/* Responsive width */
		max-width: 854px;		/* Original video width */
		height: auto;
		aspect-ratio: 16 / 9;		/* Maintain aspect ratio */
		overflow: hidden;
		margin: auto;		/* Center horizontally */
	}

	/* VIDEO IFRAME */
	.gallery-video-iframe video {
		width: 100%;		/* Fill the container width */
		height: auto;		/* Automatically adjust height based on aspect ratio */
		border: none;		/* Optional for cleaner look */
	}

	.iframe-scaler-desktop {
		transform: scale(0.667);
		transform-origin: top left;
		width: 1928px;
		height: 1080px;
	}

	.gallery_tabs-link {
		padding: .5rem 1.25rem;
	}

	/* For active state */
	.gallery_tabs-link.w--current {
		border-top: none;
		border-bottom: none;
		background-color: #459aef;
		min-height: 58px;
	}

	/* Adjust the breakpoint icons */
	.breakpoint-icon {
		height: 30px;		/* Slightly smaller for mobile */
	}

	/* Adjust mobile content area */
	.gallery-tabs_mobile {
		padding-top: 0px;
		transform: scale(0.75);
		top: -130px;
		justify-content: center;
		align-items: center;
		height: auto;
		padding-top: 3.13em;
		padding-bottom: 0;
		display: flex;
		position: relative;
	}

	.gallery_tabs-desktop {
		height: auto;
	}

	.logo img,
	.logo svg {
		height: 282px !important;
		max-height: 40vw;
	}

	.directions {
		display: none;
	}

	.directions_mobile {
		color: #ffffff;
		margin: auto;
		text-align: center;
		padding: 5px;
		font-size: 11px;
		position: absolute;
		top: 0;
		left: 40%;
		display: block;
		background-color: #152247;
		width: fit-content;
		padding: 5px 20px;
		border-bottom-left-radius: 25px;
		border-bottom-right-radius: 25px;
	}

	/* ---------- CSS-ONLY DESKTOP PREVIEW SCALING ON MOBILE ---------- */

	/* Ensure desktop container is a nice, responsive box on mobile */
	.gallery-desktop-iframe {
		width: 100vw;		/* take full phone width */
		aspect-ratio: 16 / 9;		/* keep 16:9 box */
		margin: 16px auto;		/* some breathing room */
		overflow: hidden;
		position: relative;
		border-radius: 16px;
	}

	.background-wrapper {
		inset: 0;		/* fill the iframe box */
		z-index: 0;
		display: block !important;
		display: block !important;
		position: absolute;
		inset: 0;
		background-image: var(--bg-image);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: contain;		/* or 'contain' if you prefer no cropping */
	}

	.gallery-mobile-demo {
		transform: scale(0.9);		/*margin-top: -25px;*/
		top: 5px;
	}

	/* Treat the FIRST child as our scaler wrapper */
	.gallery-desktop-iframe>div {
		/* define the "native" desktop frame size we’re scaling from */
		width: 100% !important;
		height: 1080px !important;
		transform-origin: top left;
		display: block;
	}

}

/* end mobie media query */
/* ---------- /CSS-ONLY DESKTOP PREVIEW SCALING ON MOBILE ---------- */