/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Background Logic
- Pages
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid 
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* * { outline: 1px solid red; }  */

@font-face {
    font-family: "Pantasia Regular";
    src: url("https://db.onlinewebfonts.com/t/36854fcff69c76a065e6913086ac4c0c.eot");
    src: url("https://db.onlinewebfonts.com/t/36854fcff69c76a065e6913086ac4c0c.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/36854fcff69c76a065e6913086ac4c0c.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/36854fcff69c76a065e6913086ac4c0c.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/36854fcff69c76a065e6913086ac4c0c.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/36854fcff69c76a065e6913086ac4c0c.svg#Pantasia Regular")format("svg");
}

@font-face {
    font-family: 'JM Blur';
    src: url('/fonts/jm-blur-regular-webfont.woff2') format('woff2'),
       url('/fonts/jm-blur-regular-webfont.woff') format('woff'),
       url('/fonts/JM-BLUR-Regular.otf') format('opentype');
    font-display: swap; /* Improves loading performance */
}


.container {
	display: flex;
	position: relative;
	flex-direction: column; /* optional, for stacking content */
  	justify-content: center;
	width: 100%;
	margin: 5rem auto;
	padding: 0 2rem;
	box-sizing: border-box;
	text-align: center;
	align-content: center;
}

.column,
.columns {
	width: 100%;
	float: left;
	box-sizing: border-box;
}

footer {
	display: flex;
	position: static;
    bottom: 0;
    left: 0;
    right: 0;
	z-index: 10;
	align-items: center;
    justify-content: center;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
	.container {
		width: 90%;
		padding: 0;
	}
}

/* For devices larger than 550px */
@media (min-width: 550px) {

	.column,
	.columns {
		margin-left: 4%;
	}

	.column:first-child,
	.columns:first-child {
		margin-left: 0;
	}

	.one.column,
	.one.columns {
		width: 4.66666666667%;
	}

	.two.columns {
		width: 13.3333333333%;
	}

	.three.columns {
		width: 22%;
	}

	.four.columns {
		width: 30.6666666667%;
	}

	.five.columns {
		width: 39.3333333333%;
	}

	.six.columns {
		width: 48%;
	}

	.seven.columns {
		width: 56.6666666667%;
	}

	.eight.columns {
		width: 65.3333333333%;
	}

	.nine.columns {
		width: 74.0%;
	}

	.ten.columns {
		width: 82.6666666667%;
	}

	.eleven.columns {
		width: 91.3333333333%;
	}

	.twelve.columns {
		width: 100%;
		margin-left: 0;
	}

	.two-thirds.column {
		width: 65.3333333333%;
	}

	.one-half.column {
		width: 48%;
	}

	/* Offsets */
	.offset-by-one.column,
	.offset-by-one.columns {
		margin-left: 8.66666666667%;
	}

	.offset-by-two.column,
	.offset-by-two.columns {
		margin-left: 17.3333333333%;
	}

	.offset-by-three.column,
	.offset-by-three.columns {
		margin-left: 26%;
	}

	.offset-by-four.column,
	.offset-by-four.columns {
		margin-left: 34.6666666667%;
	}

	.offset-by-five.column,
	.offset-by-five.columns {
		margin-left: 43.3333333333%;
	}

	.offset-by-six.column,
	.offset-by-six.columns {
		margin-left: 52%;
	}

	.offset-by-seven.column,
	.offset-by-seven.columns {
		margin-left: 60.6666666667%;
	}

	.offset-by-eight.column,
	.offset-by-eight.columns {
		margin-left: 69.3333333333%;
	}

	.offset-by-nine.column,
	.offset-by-nine.columns {
		margin-left: 78.0%;
	}

	.offset-by-ten.column,
	.offset-by-ten.columns {
		margin-left: 86.6666666667%;
	}

	.offset-by-eleven.column,
	.offset-by-eleven.columns {
		margin-left: 95.3333333333%;
	}

	.offset-by-one-third.column,
	.offset-by-one-third.columns {
		margin-left: 34.6666666667%;
	}

	.offset-by-two-thirds.column,
	.offset-by-two-thirds.columns {
		margin-left: 69.3333333333%;
	}

	.offset-by-one-half.column,
	.offset-by-one-half.columns {
		margin-left: 52%;
	}

}

@media (max-width: 896px) and (orientation: landscape) {
	.container.home {
		width: 60%;
	}
}

@media (min-width: 1024px) {
	.container {
		width: 70%;
	}
}

@media (min-width: 1200px) {

	footer {
		display: block;
		padding: 1rem;
		position: fixed;
		background: rgba(24, 24, 24, 0.7);
		z-index: 10;
		align-items: center;
		justify-content: center;
	}

	.container {
		overflow: hidden; 
		width: 80%;
	}

	.container.home { 
  		width: 50%;
	}

	.container.tour {
		margin: 0 auto;
		margin-top: 5rem;
		width: 70%;
		max-height: calc(100vh - 8vh - 4rem - 4rem); /* navbar + footer + buffer */
    	min-height: calc(100vh - 8vh - 4rem - 4rem);
		overflow-y: auto;
		justify-content: flex-start;
	}

	.container.contact {
		margin-top: 5rem;
		text-align: left;
	}

	/* Custom scrollbar styling for tour container */
	.container.tour::-webkit-scrollbar {
		width: 6px; /* Thin scrollbar */
	}

	.container.tour::-webkit-scrollbar-track {
		background: rgba(24, 24, 24, 0.2); /* Very subtle dark background */
		border-radius: 3px;
	}

	.container.tour::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.15); /* Very subtle white thumb */
		border-radius: 3px;
		transition: background 0.3s ease;
	}

	.container.tour::-webkit-scrollbar-thumb:hover {
		background: rgba(255, 255, 255, 0.3); /* Slightly more visible on hover */
	}

	/* For Firefox (different syntax) */
	.container.tour {
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.15) rgba(24, 24, 24, 0.2);
	}
}

@media (min-width: 1500px) {
	.container.tour {
		width: 60%;
	}
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
body,
html {
	margin: 0;
	padding: 0;

	touch-action: manipulation;
    overscroll-behavior: none;
	scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

	/* Prevent zoom and user scaling issues */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

html {
	background-color: #000;
	font-size: 62.5%;
}

body {
	display: flex;
	flex-direction: column;
	font-size: 1.5em;
	/* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.6;
	font-weight: 400;
	font-family: "Pantasia Regular";
	color: #ffffffe7;
    overflow: auto;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: rgb(180, 150, 255) !important;
    font-family: "Pantasia Regular"; !important;
    font-weight: 400 !important;
    font-size: inherit !important;
	font-size: 16px !important;
}

/* Background Logic
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#home {
	background: url('../../assets/images/bglines-mobile.webp') right/cover no-repeat;
	box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.5);
}

#contact {
	background: url('../../assets/images/bglines-mobile.webp') right/cover no-repeat;
	box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.5);
}

.video-background {
	background-image: url('../../assets/images/framebg.jpg');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
	 /* Prevent video from causing layout shifts */
    will-change: auto;
    transform: translateZ(0);
	z-index: -1;
}

.overlay {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
    contain: layout style;
	align-items: center;
	/* Use custom property for dynamic viewport height - this prevents snapping */
    min-height: calc(var(--vh, 1vh) * 100);
	background: rgba(0, 0, 0, 0.4); /* subtle dark overlay */
	text-align: center;
	padding: 20px 30px;
}

@media (min-width: 1200px) {

	html {
        position: static;
        overflow: auto;
    }
    
    body {
        width: auto;
        height: auto;
		font-size: 1.8em;
	}

	.one-third.column {
		width: 30.6666666667%;
	}

	body::before,
	body::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-size: cover;
		background-position: center;
		transition: opacity 0.6s ease-in-out;
		z-index: -2;
		pointer-events: none;
		box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.5);
	}

	body::before {
        opacity: 1;
    }

    body::after {
        opacity: 0;
    }

	body.transitioning::before {
		opacity: 0;
	}

	body.transitioning::after {
		opacity: 1;
	}

	body::before {
        background-image: url('../../assets/images/bgcontact-desk.webp');
    }

	body[data-page="home"]::before,
	body[data-next="home"]::after {
		background-image: url('../../assets/images/bgcontact-desk.webp');
		background-size: cover;
	}

	body[data-page="contact"]::before,
	body[data-next="contact"]::after {
		background-image: url('../../assets/images/bgcontact-desk.webp');
		background-size: cover;
	}

	body[data-page="tour"]::before,
    body[data-page="tour"]::after {
        opacity: 0 !important; /* Force hide body backgrounds on tour page */
    }
  }

/* Pages / Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page {
	min-height: 100vh; /* Fallback */
    min-height: 100svh; /* Modern browsers */
    height: auto; /* Allow growth */
	width: 100%;
	flex: 1; /* Takes remaining space */
    display: flex;
	align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    position: relative;
    opacity: 1;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
	 overflow: hidden;
}

.page.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 896px) and (orientation: landscape) {
	.page {
		align-items: flex-start; /* Don't center in landscape */
        justify-content: flex-start;
        padding-top: 8vh; /* Account for navbar */
        min-height: auto; /* Let content determine height */
	}

	 .container {
        margin: 2rem auto; /* Reduce margin in landscape */
    }
}

.upcoming-tour {
	display: none;
}

@media (min-width: 1200px) {
	.page {
		opacity: 0;
		visibility: hidden;
		position: absolute; 
		transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
	}

	.page.active {
        position: absolute; 
        opacity: 1;
        visibility: visible; 
    }

	.upcoming-tour {
		display: block;
	}

	#home {
		background: none;
		box-shadow: none;
	}

	#tour {
		background: none;
	}

	#contact {
		background: none;
	}

}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: 2rem;
	font-weight: 300;
}

h1 {
	font-size: 4.0rem;
	line-height: 1.2;
	letter-spacing: -.1rem;
}

h2 {
	font-size: 3.6rem;
	line-height: 1.25;
	letter-spacing: -.1rem;
}

h3 {
	font-size: 3.0rem;
	line-height: 1.3;
	letter-spacing: -.1rem;
}

h4 {
	font-size: 2.4rem;
	line-height: 1.35;
	letter-spacing: -.08rem;
}

h5 {
	font-size: 1.8rem;
	line-height: 1.5;
	letter-spacing: -.05rem;
}

h6 {
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: 0;
}

/* Larger than phablet */
@media (min-width: 550px) {
	h1 {
		font-size: 5.0rem;
	}

	h3 {
		font-size: 3.6rem;
	}

	h4 {
		font-size: 3.0rem;
	}

	h5 {
		font-size: 2.4rem;
	}

	h6 {
		font-size: 1.5rem;
	}
}

p {
	margin-top: 0;
}

.video-heading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.video-heading-img {
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
}

.bounce-pulse {
	animation: bouncePulse 1.5s ease-in-out infinite;
}

@keyframes bouncePulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

.subscribe-message, .subscribe-message a {
	color: #764896;
	text-decoration: underline;
	text-decoration-color: #764896;
    text-underline-offset: 8px;
	text-shadow: 
		2px 2px 4px rgba(0, 0, 0, 0.8),
		0 0 8px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1000px) {
	.video-heading-img {
		max-width: 500px; /* smaller on big screens */
	}
}

/* Video
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 ratio */
	height: 0;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	margin-bottom: 1.5rem;
	justify-content: center;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.carousel-slide {
	width: 100%;
	height: auto;
	margin-bottom: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.carousel-indicators {
	display: none;
}

.product-content {
	padding: 2rem;
	text-align: center;
	width: 100%;
}

.product-content h2 {
	font-family: "JM Blur";
	font-size: 2.5rem;
}

.product-content img {
	margin: 2rem 0;
	width: clamp(200px, 30vw, 700px);
}

.product-content a {
	font-size: 2rem;
	color: #f0f0f0;
	background-color: #764896;
	border: 1px solid currentColor;
	border-radius: 3px;
	text-decoration: none !important;
    padding: 0.5rem 1rem;
}

.product-content a:hover {
	color: #f0f0f0;
	background-color:rgb(63, 63, 63);
}

.indicator {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
}

.indicator.active {
	background-color: #8b5cf6;
	transform: scale(1.2);
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .video-slide {
    display: none !important;
  }
}

@media (min-width: 1200px) {
	.carousel-wrapper {
		display: flex;
		transition: transform 0.5s ease-in-out;
		width: 200%;
		height: 100%;
	}

	.carousel-slide {
		width: 50%;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 2rem;
		overflow: hidden;
	}

	.carousel-indicators {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 2rem;
	}

	.product-content img {
		margin: 2rem 0;
	}

	.product-content h2 {
		font-size: 3rem;
	}

	.product-content a {
		font-size: 3rem;
	}

	.video-wrapper {
		width: 80%;
	}

}

@media (min-width: 1500px) {
	.video-wrapper {
		width: 90%;
	}
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
	color: #bcacd5;
}

a:hover {
	color: #764896;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	display: inline-block;
	height: 38px;
	padding: 0 30px;
	color: #555;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border-radius: 4px;
	border: 1px solid #bbb;
	cursor: pointer;
	box-sizing: border-box;
	touch-action: manipulation;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
	color: #333;
	border-color: #888;
	outline: 0;
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
	color: #FFF;
	background-color: #33C3F0;
	border-color: #33C3F0;
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
	color: #FFF;
	background-color: #1EAEDB;
	border-color: #1EAEDB;
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
	height: 38px;
	padding: 6px 10px;
	/* The 6px vertically centers text on FF, ignored by Webkit */
	background-color: #fff;
	border: 1px solid #D1D1D1;
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
}

/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

textarea {
	min-height: 65px;
	padding-top: 6px;
	padding-bottom: 6px;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border: 1px solid #33C3F0;
	outline: 0;
}

label,
legend {
	display: block;
	margin-bottom: .5rem;
	font-weight: 600;
}

fieldset {
	padding: 0;
	border-width: 0;
}

input[type="checkbox"],
input[type="radio"] {
	display: inline;
}

label>.label-body {
	display: inline-block;
	margin-left: .5rem;
	font-weight: normal;
}

input::placeholder {
  color: rgb(180, 150, 255);
}

.newsletter-form {
	height: 100%;
	max-width: 90%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin-left: 0;       /* no left margin */
    margin-right: 0; 
	align-items: center;
	gap: 0.5rem;
}

/* Inputs */
.newsletter-form .formkit-input {
	background-color: black !important;
	color: #764896;
	border: 1px solid #0e0d0d;
	border-radius: 4px;
	padding: 0.5em;
	margin: 0;
	font-weight: 400;
	flex: 1 1 auto;
	min-width: 140px;
}

/* Button */
.newsletter-form .formkit-submit {
	background-color: black !important;
	color: #7831e7;
	border: 1px solid #7831e7;
	border-radius: 4px;
	font-weight: 700;
	cursor: pointer;
}

.newsletter-form .formkit-input,
.newsletter-form .formkit-submit {
    min-width: 100%;      /* make inputs and button full width */
    flex: none;           /* cancel flex-grow/shrink */
  }

.formkit-input:-webkit-autofill,
.formkit-input:-webkit-autofill:hover,
.formkit-input:-webkit-autofill:focus,
.formkit-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px black inset !important;
    -webkit-text-fill-color: rgb(180, 150, 255) !important;
    border: 1px solid rgb(14, 13, 13) !important;
    border-radius: 4px !important;
	font-family: "Pantasia Regular"; !important;
    font-weight: 400 !important;
    font-size: inherit !important;
	font-size: 16px !important;
}

/* Optional: button hover */
.submit-button:hover {
  background-color: #7831e7;
  color: black;
  transition: all 0.2s ease-in-out;
}

.formkit-spinner {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Desktop overrides */
@media (min-width: 950px) {
	footer {

	}

	.newsletter-form, .seva-fields {
		max-width: 70%;
		margin-left: 2rem;
		margin-bottom: 0;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.newsletter-form .formkit-input,
	.newsletter-form .formkit-submit {
		min-width: 200px;            /* override 100% for desktop */
		flex: 1 1 auto;              /* allow some growth */
	}

	.newsletter-form .formkit-input{
		padding: 0.5rem;
	}

	.newsletter-form .signup {
		text-align: center;
		margin-bottom: 1rem;
		margin-top: 0;
	}

	.subscribe-message {
		display: none;
	}
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
	list-style-type: none;
}

ol {
	list-style: decimal inside;
}

ol,
ul {
	padding-left: 0;
	margin-top: 0;
}

ul ul,
ul ol,
ol ol,
ol ul {
	margin: 1.5rem 0 1.5rem 3rem;
	font-size: 90%;
}

li {
	margin-bottom: 1rem;
}

.bg-span {
	background:rgba(117, 72, 150, 0.6);
}

.blur-bg {
	backdrop-filter: blur(4px);
}


/* Navbar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navbar {
	display: flex;
	padding: 1rem 0;
	min-height: 7vh;
	max-height: 8vh;
	align-items: center;
	justify-content: space-between;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
  	background-color: transparent;
	-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .5));
	filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .5));
	z-index: 100;
	position: fixed;
	width: 100%;
}

/* Logo Styles */

.logo {
	flex: 1; /* Takes up available space */
    display: flex;
    justify-content: center; /* Centers logo within its flex space */
}

.logo img {
    height: auto;
    width: auto;
    max-width: 250px;
    object-fit: contain;
}

/* Menu Styles */
.navbar-menu {
	list-style: none;
	display: none;
	flex-direction: column;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.8);
	top: calc(7vh + 2rem);
	left: 0;
	right: 0;
	box-shadow: 0 2px 5px rgba(26, 26, 26, 0.1);
	padding-top: 2rem;
	margin-top: 0;
	z-index: 3;
}

.navbar-menu ul {
    display: flex;
    flex-direction: inherit; 
    padding: 0;
    margin: 0;
}

.navbar-menu.show {
	display: flex !important;
	max-height: 500px;
}

.navbar-menu li {
	font-family: Pantasia Regular;
	text-align: center;
	padding: 1rem;
}

.navbar-menu li a {
	color: #f0f0f0; /* Soft off-white */
    transition: color 0.3s ease; /* Smooth hover effect */
	text-decoration: none;
	font-weight: normal; /* Use a normal weight or medium for softness */
    letter-spacing: 0.5px; /* Add a bit of spacing between letters */
    text-transform: none; /* Avoid all caps if you want a softer look */
	font-size: 2.5rem;
	text-rendering: optimizeLegibility; /* Optimizes text smoothing */
    -webkit-font-smoothing: antialiased; /* For WebKit-based browsers */
    -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}

/* Toggle Button Styles */
.navbar-toggle {
	font-size: 2.5rem;
	cursor: pointer;
	color: #764896;
	display: block;
	/* Visible only on mobile */
	padding: 0.5rem 1.5rem;
	margin-left: auto;
}

.navbar-toggle:active {
	transform: scale(0.95);
	/* Slight scale down on active for feedback */
}

.social-icons {
	display: flex;
	justify-content: center;
}

.social-icons li {
	list-style: none;
}

.icon {
	width: 24px;
	height: 24px;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
}

.icon svg {
	color: rgb(102, 102, 102);
}

.icon.facebook {
	background-image: url('../svgs/facebook.svg');
}

.icon.spotify {
	background-image: url('../svgs/spotify.svg');
}

.icon.instagram {
	background-image: url('../svgs/instagram.svg');
}

.icon.bandcamp {
	background-image: url('../svgs/bandcamp.svg');
}

.icon.youtube {
	background-image: url('../svgs/youtube.svg');
}

@media (min-width: 1200px) {
	.logo img {
		max-width: 400px;
	}

	.logo {
		display: flex;
	}

	.navbar {
		height: calc(2vh + 2rem);
		padding: 1rem;
		position: relative;
    	justify-content: flex-end;
		background: rgba(24, 24, 24, 0.3);
		width: auto;
	}

	.navbar-menu {
		display: flex !important;
		position: static;
		flex-direction: row;
		padding-top: 0;
		padding-right: 20rem;
		background-color: transparent;
	}

	.navbar-toggle {
		display: none;
	}

	.navbar-menu li a {
		align-items: center;
    	justify-content: center;
	}

	.navbar-menu li a {
		margin-left: 5rem;
	}

	.social-icons {
		display: none;
	}
}

@media (min-width: 1800px) {
	.logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
	padding: .2rem .5rem;
	margin: 0 .2rem;
	font-size: 90%;
	white-space: nowrap;
	background: #F1F1F1;
	border: 1px solid #E1E1E1;
	border-radius: 4px;
}

pre>code {
	display: block;
	padding: 1rem 1.5rem;
	white-space: pre;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
	table-layout: auto;
	width: 100%;
	border-radius: 8px;
    overflow: hidden;
}

#tour .tour-dates {
    display: block;
	margin: auto 0;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
}

#tour .tour-dates tbody {
    display: block;
    overflow-y: auto;
    max-height: calc(100vh - 12rem);
}

th,
td {
	font-family: Pantasia Regular;
	font-size: 1.2rem;
	padding: 1rem;
    vertical-align: middle;
	text-align: left;
	border-bottom: 1px solid #E1E1E1;
}

th {
	text-align: center;
}

.year-header {
	font-family: "JM Blur";
	font-size: 2.5rem;
}

td:first-child span {
    display: block;
    text-align: center;
    line-height: 1.1;
    min-width: 60px; /* Consistent width */
}

td:first-child span::before {
    content: attr(data-day);
    display: block;
    font-weight: 700;
    font-size: 1.4em; /* Slightly larger day number */
}

td:first-child span::after {
    content: attr(data-month);
    display: block;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9em; /* Slightly smaller month */
    opacity: 0.8;
}

/* Combined location/venue column */
td:nth-child(2) span {
    display: block;
    line-height: 1.4;
}

td:nth-child(2) span::before {
    content: attr(data-location);
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 1.1em;
}

td:nth-child(2) span::after {
    content: attr(data-venue);
    display: block;
    font-weight: 400;
    opacity: 0.8;
    font-size: 0.95em;
}

/* Tickets column */
.ticket-field a {
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border: 2px solid currentColor;
    border-radius: 4px;
    transition: all 0.2s ease;
	z-index: 3;
}

/* Normal column */ 
.standard-field {
	text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
}

.ticket-field a:hover {
    color: #764896;
}

/* Clean up spacing */
th:first-child,
td:first-child {
    padding-left: 0;
}

th:last-child,
td:last-child {
    padding-right: 0;
}

tr:last-child td {
    border-bottom: none;
}

tr:last-child td {
    border-bottom: none;
}

@media (min-width: 550px) {
	table {
		/* Full width of the container */
		border-collapse: separate;
		border-spacing: 10px;
		/* Space between cells */
		table-layout: fixed;
		/* Ensures equal width for cells */
	}

	td {
		font-size: 1.2rem;
	}
}

@media (min-width: 1200px) {
    #tour .tour-dates {
        display: table;
        max-height: none;
        overflow-y: visible;
    }

    #tour .tour-dates tbody {
        display: table-row-group;
        overflow-y: visible;
        max-height: none;
    }

    #tour .tour-dates thead,
    #tour .tour-dates tbody tr {
        display: table-row;
    }
}

@media (min-width: 1024px) {
	td {
		font-size: 1rem;
	}
}

@media (min-width: 1500px) {
	td {
		font-size: 1.8rem;
	}

	th {
		font-size: 2rem;
	}
}


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
	margin-bottom: 1rem;
}

input,
textarea,
select,
fieldset {
	margin-bottom: 1.5rem;
}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
	margin-bottom: 2.5rem;
}

.signup {
	margin-bottom: 0;
}

@media (min-width: 550px) {
	p {
		margin: 0;
	}
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
	width: 100%;
	box-sizing: border-box;
}

.u-max-full-width {
	max-width: 100%;
	box-sizing: border-box;
}

.u-pull-right {
	float: right;
}

.u-pull-left {
	float: left;
}


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
	margin-top: 3rem;
	margin-bottom: 3.5rem;
	border-width: 0;
	border-top: 1px solid #E1E1E1;
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
	content: "";
	display: table;
	clear: both;
}

/* Animation
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animated-div {
	opacity: 0;
	animation: fadeInUp 0.5s ease-out forwards;
}

.animated-div.news-shop {
	animation-delay: 0.5s;
}

.animated-div.upcoming-tour {
	animation-delay: 1s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Input focus effects */
.formkit-input {
    transition: all 0.3s ease;
}

.formkit-input:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(120, 49, 231, 0.3);
}

/* Button hover effect */
.formkit-submit {
    transition: all 0.3s ease;
}

.formkit-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(120, 49, 231, 0.4);
}

@keyframes gentlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}