/* FONTS */
			h1 {
			    font-size: clamp(2.2rem, 4vw, 3rem);
			    font-weight: 700;
			    color: var(--gray-light);
			    margin-bottom: 10px;
			}
			h2 {
			    font-size: clamp(2rem, 3vw, 2.2rem);
			    font-weight: 600;
			    color: var(--gray-light);
			    margin-bottom: 20px;
			}
			h3 {
				font-size: clamp(1.25rem, 1.5vw, 1.3rem);
			    font-weight: 600;
			    color: var(--gray-light);
			}
			p {
			    font-size: clamp(1.0rem, 1.2vw, 1rem);
			    color: var(--gray-light);
			    line-height: 1.7;
			}
			a {
			    text-decoration: none;
			}

			/* FONT COLOR */
			.t-black {
			    color: var(--black);
			}
			.t-white {
			    color: var(--white);
			}			
			.t-white-soft {
			    color: var(--white-soft);
			}
			.t-gray {
			    color: var(--gray-muted);
			}
			
			.t-gray-light {
			    color: var(--gray-light);
			}
			
			.t-gray-dark {
			    color: var(--gray-dark);
			}
			.t-gold {
			    color: var(--gold);
			}
			.t-spec-gold {
			    color: var(--special-gold);
			}
			.t-gold-light {
			    color: var(--gold-light);
			}
			
			.t-gold-deep {
			    color: var(--gold-deep);
			}

			/* **************************************** */
			/*
			.navbar {
				position: relative;
			    height: 60px;
			    padding: 30px 20px 10px 20px;
			
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			}*/
			.navbar {
			    position: fixed;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100px;
				box-sizing: border-box;
			    padding: 30px 20px 10px;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			
			    transition: transform 0.8s ease;
			    z-index: 1000;
			}
			
			.navbar.hidden {
			    transform: translateY(-400%);
			}
			
			.logo img {
			    height: 80px;      /* adjust as needed */
			    width: auto;       /* keeps aspect ratio */
			    display: block;
			}
			
			.nav-buttons {
			    display: flex;
			    align-items: center; /* vertically center buttons */
				gap: clamp(15px, 2vw, 40px);
			}
			
			
			
			/* Last button stays styled */
			.login-btn {
			    padding: 10px 18px;
			    border: 1px solid var(--gold);
			    border-radius: 20px;
			    background: transparent;
			    color: var(--white);
			    font-weight: bold;
			    cursor: pointer;
			    transition: 0.3s;
			}
			
			.login-btn:hover {
				color: var(--black);
			    background: var(--gold);
			}
			.hero {
			    display: flex;
				flex-direction: row;
			    justify-content: space-between;
			    align-items: center;
			
			    /*min-height: 50vh;*/
			    padding: 50px 10px;
			    gap: 15px;
			}
			
			.hero-content {
			    flex: 1;
			    max-width: 600px;
				text-align: center;
			}
			
			.hero-content h1 {
			    font-size: 3rem;
			    margin-bottom: 10px;
			}
			
			.hero-content h2 {
			    font-size: 1.5rem;
			    margin-bottom: 20px;
			}
			
			.hero-content p {
			    font-size: 1rem;
			    line-height: 1.7;
			    margin-bottom: 30px;
			}
			
			.hero-buttons {
			    display: flex;
			    gap: 15px;
    			justify-content: center;
				padding-top: 10px;
			}

			.hero-image {
			    flex: 1;
			    display: flex;
			    justify-content: flex-end;
			}
			
			.hero-image img {
			    max-width: 100%;
			    height: auto;
			    border-radius: 10px;

				width: 100%;
			    height: 100%;
			    overflow: hidden;
			}

			.hero-top-image {
			    width: 100%;
			    /*height: 80px;*/
			    object-fit: fill;
			    margin-bottom: 15px;
			}
			
			.topics-section {
			    padding: 10px;
			    text-align: center;
			}
			
			.topics-section h2 {
			    margin-bottom: 50px;
			    font-size: 2.5rem;
			}
			
			.topics-container {
			    display: flex;
			    justify-content: center;
			    gap: 7px;
			    flex-wrap: wrap;
			}
			
			.topic-card {
			    width: 220px;
			
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			
			    text-align: center;
			}
			
			.topic-card img {
			    width: 70px;
			    height: 70px;
			    object-fit: contain;
			    margin-bottom: 15px;
			}
			
			.topic-card h3 {
			    margin-bottom: 10px;
			}
			
			.topic-card p {
			    line-height: 1.6;
			}

			.topic-icon {
			    width: 60px;
			    height: 60px;
			
			    color: var(--gold);
			    margin-bottom: 15px;
			
			    transition: 0.3s;
			}
			
			.topic-card:hover .topic-icon {
			    color: var(--gold-light);
			    transform: scale(1.1);
			}

			.gallery-section {
			    padding: 60px 10px;
			    text-align: center;
			}
			
			.gallery-section h2 {
			    margin-bottom: 40px;
			}
			
			.carousel-container {
			    display: flex;
			    align-items: center;
			    gap: 12px;
			}
			
			.carousel-track-container {
			    overflow: hidden;
			    flex: 1;
			}
			
			.carousel-track {
			    display: flex;
			    transition: transform 0.4s ease;
    			touch-action: pan-y;
			}

			.slide {
			    flex: 0 0 calc(100% / 4);  /* 5 visible by default */
			
			    aspect-ratio: 2 / 3;       /* portrait */
			    overflow: hidden;
			
			    padding: 14px;              /* optional spacing */
			    box-sizing: border-box;

				position: relative;

				/*background: rgba(var(--black-card-rgb), 0.4);*/
			    /*border: 1px solid var(--gray-light);*/
			    border-radius: 24px;
				margin: 1px;
			
			    /*backdrop-filter: blur(10px); /* glass effect */
			    /*-webkit-backdrop-filter: blur(10px);*/
			
			    /*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);*/
			}
			
			.slide img {
			    width: 100%;
			    height: 100%;
			
			    object-fit: cover;
			    display: block;
			}

			.slide-overlay-icon {
			    position: absolute;
			    bottom: 0;
			    left: 0;
			    /*right: 0;*/
				z-index: 9999;
			
			    padding: 40px 15px;
			
			    /*background: linear-gradient(
			        to top,
			        rgba(11, 11, 13, 0.85),
			        rgba(11, 11, 13, 0)
			    );*/
			
			    color: var(--gray-light);
				display: flex;
			    flex-direction: column;
			    align-items: center;
			}

			.slide-overlay {
			    position: absolute;
			    bottom: 0;
			    left: 0;
			    right: 0;
			
			    padding: 12px 15px;
			/*
			    background: linear-gradient(
			        to top,
			        rgba(11, 11, 13, 0.85),
			        rgba(11, 11, 13, 0)
			    );*/
				
			    color: var(--gray-light);
			}

			.slide-overlay a {
				padding-left: 15px;
			}

			.slide-overlay h3 {
			    margin: 0;
			    font-size: 1rem;
			    color: var(--gray-light);
				padding-left: 15px;
				pointer-events: none;
			}
			
			.slide-overlay p {
			    margin: 4px 0 0;
			    font-size: 0.85rem;
			    color: var(--gray-light);
				padding-left: 15px;
			}
			
			.carousel-btn {
			    border: none;
			    background: #222;
			    color: var(--gold);
			    width: 45px;
			    height: 45px;
			    cursor: pointer;
			    border-radius: 50%;
			}
			
			.carousel-dots {
			    margin-top: 20px;
			    display: flex;
			    justify-content: center;
			    gap: 10px;
			}
			
			.carousel-dots span {
			    width: 10px;
			    height: 10px;
			    border-radius: 50%;
			    background: #bbb;
			    cursor: pointer;
			}
			
			.carousel-dots span.active {
			    background: var(--gold);
			}

			.ticket-section {
			    padding: 60px 10px;
			    text-align: center;
			}		

			.stats-section {
			    display: flex;
				flex-direction: row;
			    justify-content: center;
			    align-items: stretch;
			
			    padding: 60px 80px;
			}
			
			/* all items */
			.stat-item {
			    flex: 1;
			    text-align: center;
			    padding: 0 30px;
			
			    display: flex;
			    flex-direction: column;
			    justify-content: center;
			}
			
			/* divider lines */
			.stat-item:not(:last-child) {
			    border-right: 2px solid #d4af37;
			}
			
			/* special first item layout */
			.stat-item--image {
			    flex-direction: row;
			    align-items: center;
			    text-align: left;
			    gap: 15px;
			}
			
			.stat-item--image img {
			    width: 60px;
			    height: 60px;
			    object-fit: contain;
			}
			
			/* SVG icon styling */
			.stat-icon {
			    width: 60px;
			    height: 60px;		
			
			    transition: 0.3s ease;
				color: var(--gold);
			}
			
			/* optional hover effect */
			.stat-item--image:hover .stat-icon {
			    color: var(--gold-light);
			    transform: scale(1.1);
			}
			
			.stat-text h3 {
			    margin: 0;
			    line-height: 1.2;
			}

			.stat-item--image-only {
			    display: flex;
			    justify-content: center;
			    align-items: center;
			}
			
			.stat-item--image-only img {
			    /*width: 70px;*/
			    height: 140px;
			    object-fit: contain;
			}

			.stat-item--cta {
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			    text-align: center;
			    gap: 12px;
			}

			.stat-item--cta p {
			    margin: 0;
			    max-width: 220px;
			}
			
			.icon-row {
			    display: flex;
			    gap: 12px;
			    justify-content: center;
			    align-items: center;
			}
			
			.row-icon {
			    width: 26px;
			    height: 26px;

				color: var(--gold);
			    cursor: pointer;
			
			    transition: 0.25s ease;
			}
			
			.row-icon:hover {
			    color: var(white); /* gold on hover */
			    transform: scale(1.2);
			}
			.slide-overlay-icon .row-icon {
			    width: 26px !important;
    			height: 26px !important;

				color: var(--gold);
			    cursor: pointer;
				z-index: 9999;
			
			    transition: 0.25s ease;
				margin-bottom: 6px;
			}
			.section-box {
			    background: rgba(var(--black-card-rgb), 0.4);
			    border: 1px solid var(--gray);
			    border-radius: 16px;
			
			    padding: 20px;
			
			    backdrop-filter: blur(10px); /* glass effect */
			    -webkit-backdrop-filter: blur(10px);
			
			    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
			}
			section, .carousel-container {
				width: min(1400px, 95%);
    			margin: 0 auto;
			}
			.spacer {
				min-height: 20px;
			}
			.spacer-60 {
				min-height: 60px;
			}
			footer {
			    background: var(--black);
			    padding: 20px 10px 5px 10px;
			
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			    justify-content: center;
			
			    gap: 1px;
			
			    text-align: center;
			}
			.footer-link {
			    color: var(--gold);
			    text-decoration: none;
			    font-weight: 600;
			
			    transition: 0.3s ease;
			}
			
			.footer-link:hover {
			    color: var(--white);
			}
			footer p {
			    margin: 0;
			    font-size: 0.95rem;
			}
			.quick-link a{
				color: var(--gold);
			    text-decoration: none;
			    background: none;
			    border: none;
				padding: 0px 5px 0px 5px;
				font-weight: 700;
				
			}
			.quick-link a:hover {
			    opacity: 0.7;
				color: var(--white);
			}

			.all-in-one {
				font-size: 1.8rem !important;
				margin-bottom: 0px !important;
				color: var(--special-gold) !important;
			}
			.date {
				font-size: 2rem !important;
    			margin: 0px !important;
			}
			.loc {
				font-size: 2rem !important;
    			margin: 0px !important;
			}
			.artist-title {
				font-size: clamp(1.25rem, 1.5vw, 1.6rem) !important;
				/*font-size: 1.6rem !important;*/
			}

			.schedule-section {
    padding: 10px;
    text-align: center;
	margin-top: 30px;
}

.schedule-section h2 {
    margin-bottom: 50px;
    font-size: 2.5rem;
}

.schedule-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.schedule-day {
    width: 300px;
    text-align: left;
}

.schedule-day-title {
    margin: 0 0 5px;
    text-align: center;
    font-size: 1.4rem;
    color: var(--gold);
}

.schedule-date {
    display: block;
    margin-bottom: 25px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray-light);
    letter-spacing: 2px;
}

.schedule-item {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.schedule-item:first-of-type {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.schedule-time {
    min-width: 55px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold);
}

.schedule-content {
    flex: 1;
}

.schedule-content h4 {
    margin: 0 0 5px;
    font-size: 1rem;
}

.schedule-content p {
    margin: 0;
    line-height: 1.5;
    color: var(--gray-light);
    font-size: 0.9rem;
}

			.schedule-item {
    transition: 0.3s;
}

.schedule-item:hover {
    padding-left: 8px;
}

.schedule-item:hover .schedule-time {
    color: var(--gold-light);
}

			.qa-section {
    padding: 10px;
    text-align: center;
	margin-top: 30px;
	margin-bottom:30px;
}

.qa-section h2 {
    margin-bottom: 50px;
    font-size: 2.5rem;	
}

.qa-container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    text-align: left;
}

.qa-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.qa-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.qa-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 20px 5px;

    background: none;
    border: none;

    color: var(--gray-light);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;

    text-align: left;
    cursor: pointer;
}

.qa-icon {
    color: var(--gold);
    font-size: 1.5rem;
    font-weight: 300;

    transition: transform 0.3s;
}

.qa-answer {
    max-height: 0;
    overflow: hidden;

    padding: 0 5px;

    transition:
        max-height 0.3s ease,
        padding 0.3s ease;
}

.qa-answer p {
    margin: 0;
    padding-bottom: 0;

    color: var(--gray-light);
    line-height: 1.7;
}

.qa-item.active .qa-answer {
    max-height: 200px;
    padding-bottom: 20px;
}

.qa-item.active .qa-icon {
    transform: rotate(45deg);
}

.qa-question:hover {
    color: var(--gold);
}

.qa-question:hover .qa-icon {
    color: var(--gold-light);
}

			.hotel-section {
    padding: 10px;
    text-align: center;
				margin-top:30px;
}

.hotel-section h2 {
    margin-bottom: 50px;
    font-size: 2.5rem;
}


/* HOTEL INTRO */

.hotel-intro {
    max-width: 1000px;
    margin: 0 auto 60px;

    display: flex;
    align-items: center;

    background: rgba(255, 255, 255, 0.03);
}

.hotel-intro-image {
    width: 50%;
}

.hotel-intro-image img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.hotel-intro-content {
    width: 50%;
    padding: 35px;
    text-align: left;
}

.hotel-intro-content h3 {
    margin-bottom: 15px;
    color: var(--gold);
}

.hotel-intro-content p {
    margin-bottom: 25px;
    color: var(--gray-light);
    line-height: 1.7;
}


/* ROOMS */

.hotel-rooms {
    max-width: 1000px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.hotel-room {
    overflow: hidden;

    background: rgba(255, 255, 255, 0.03);

    text-align: left;

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition: 0.3s;
}

.hotel-room:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
}


/* ROOM IMAGE */

.hotel-room-image {
    width: 100%;
    height: 190px;
    overflow: hidden;
}

.hotel-room-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: 0.4s;
}

.hotel-room:hover .hotel-room-image img {
    transform: scale(1.05);
}


/* ROOM CONTENT */

.hotel-room-content {
    padding: 22px;
}

.hotel-room-content h3 {
    margin: 0 0 12px;

    color: var(--gold);

    font-size: 1.1rem;
}

.hotel-room-description {
    margin-bottom: 20px;

    color: var(--gray-light);

    line-height: 1.6;
    font-size: 0.9rem;
}


/* FEATURES */

.hotel-room-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 25px;
}

.hotel-room-features span {
    padding: 5px 8px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: var(--gray-light);

    font-size: 0.65rem;
    letter-spacing: 0.5px;
}


/* PRICE + BUTTON */

.hotel-room-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hotel-price {
    display: flex;
    align-items: baseline;
    gap: 4px;

    flex-wrap: wrap;
}

.hotel-price span {
    width: 100%;

    color: var(--gray-light);

    font-size: 0.65rem;
}

.hotel-price strong {
    color: var(--gold);

    font-size: 1.5rem;
}

.hotel-price small {
    color: var(--gray-light);

    font-size: 0.65rem;
}


/* BUTTONS */

.hotel-book-button,
.hotel-link,
.hotel-main-button {
    display: inline-block;

    padding: 10px 12px;

    border: 1px solid var(--gold);

    color: var(--gold);

    text-decoration: none;

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;

    transition: 0.3s;
}

.hotel-book-button:hover,
.hotel-link:hover,
.hotel-main-button:hover {
    background: var(--gold);
    color: #111;
}


/* BOTTOM */

.hotel-bottom {
    margin-top: 35px;

    text-align: center;
}

.hotel-bottom p {
    margin-bottom: 20px;

    color: var(--gray-light);

    font-size: 0.8rem;
}

			.competition-section {
    padding: 10px;
    text-align: center;
				margin-top:30px;
}

.competition-section h2 {
    margin-bottom: 50px;
    font-size: 2.5rem;
}

.competition-intro {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.03);
}

/* GALLERY */

.competition-gallery {
    width: 50%;
    padding: 15px;
}

.competition-main-image {
    width: 100%;
    height: 380px;
    overflow: hidden;
}

.competition-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
/*
.competition-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;

.competition-thumbs img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.3s;
}*/

.competition-thumbs img:hover {
    opacity: 1;
}

.jack-jill-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.jack-jill-thumbnail {
    overflow: hidden;
}

.jack-jill-thumbnail img {
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
    display: block;
}

/* CONTENT */

.competition-content {
    width: 50%;
    padding: 45px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.competition-label {
    margin-bottom: 10px;
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.competition-content h3 {
    margin: 0 0 20px;
    font-size: 2rem;
}

.competition-content p {
    margin-bottom: 15px;
    color: var(--gray-light);
    line-height: 1.7;
}

/* PRIZE */

.competition-prize {
    margin: 20px 0 30px;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.competition-prize span {
    display: block;
    margin-bottom: 5px;
    color: var(--gray-light);
    font-size: 0.7rem;
    letter-spacing: 2px;
}

.competition-prize strong {
    color: var(--gold);
    font-size: 2.2rem;
}

/* BUTTONS */

.competition-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.competition-category {
    text-align: center;
}

.competition-category h4 {
    margin-bottom: 10px;
    color: var(--gold);
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.competition-button,
.competition-main-button {
    display: inline-block;
    padding: 12px 16px;
    border: 1px solid var(--gold);
    color: var(--gold);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.7px;
    transition: 0.3s;
}

.competition-button:hover,
.competition-main-button:hover {
    background: var(--gold);
    color: #111;
}

.competition-bottom {
    max-width: 1000px;
    margin: 30px auto 0;
    text-align: center;
}

.competition-bottom p {
    margin-bottom: 20px;
    color: var(--gray-light);
    font-size: 0.8rem;
    line-height: 1.6;
}

			.tickets-section {
    padding: 10px;
    text-align: center;
}

.tickets-section h2 {
    margin-bottom: 20px;
    font-size: 2.5rem;
}

.tickets-intro {
    max-width: 650px;
    margin: 0 auto 50px;
    color: var(--gray-light);
    line-height: 1.7;
}


/* TICKET CARDS */

.tickets-container {
    max-width: 850px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.ticket-card {
    position: relative;
    padding: 35px;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.ticket-card:hover {
    /*border-color: var(--gold);*/
    /*transform: translateY(-4px);*/
}

.ticket-card.featured {
    border-color: var(--gold);
}

.ticket-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 9px;
    background: var(--gold);
    color: #111;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.ticket-card h3 {
    margin: 0 0 12px;
    color: var(--gold);
    font-size: 1.5rem;
}

.ticket-description {
    margin-bottom: 25px;
    color: var(--gray-light);
    line-height: 1.6;
    font-size: 0.9rem;
}


/* WHAT'S INCLUDED */

.ticket-includes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}

.ticket-includes span {
    color: var(--gray-light);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.ticket-includes span::first-letter {
    color: var(--gold);
}

.ticket-includes .not-included {
    opacity: 0.45;
}


/* PRICE */

.ticket-price {
    padding-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ticket-price span {
    display: block;
    margin-bottom: 5px;
    color: var(--gray-light);
    font-size: 0.65rem;
    letter-spacing: 1.5px;
}

.ticket-price strong {
    color: var(--gold);
    font-size: 2rem;
}


/* BUTTON */

.ticket-button {
    display: block;
    padding: 13px;
    text-align: center;
    border: 1px solid var(--gold);
    color: var(--gold);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    transition: 0.3s;
}

.ticket-button:hover {
    background: var(--gold);
    color: #111;
}


/* PRICE TIMELINE */

.ticket-pricing {
    max-width: 850px;
    margin: 60px auto 0;
}

.ticket-pricing h3 {
    margin-bottom: 25px;
    color: var(--gold);
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.price-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.price-stage {
    padding: 20px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.price-stage:last-child {
    border-right: none;
}

.price-stage.current {
    background: rgba(212, 175, 55, 0.08);
}

.price-stage-label {
    display: block;
    margin-bottom: 8px;
    color: var(--gray-light);
    font-size: 0.6rem;
    letter-spacing: 1px;
}

.price-stage strong {
    display: block;
    margin-bottom: 5px;
    color: var(--gold);
    font-size: 1.3rem;
}

.price-stage small {
    color: var(--gray-light);
    font-size: 0.65rem;
}

.ticket-note {
    max-width: 600px;
    margin: 20px auto 0;
    color: var(--gray-light);
    font-size: 0.75rem;
    line-height: 1.6;
}

			.transport-section {
    padding: 10px;
    text-align: center;
				margin-top:30px;
}

.transport-section h2 {
	margin-top: 30px;
    margin-bottom: 50px;
    font-size: 2.5rem;
}


/* INTRO */

.transport-intro {
    max-width: 800px;
    margin: 0 auto 50px;

    display: flex;
    align-items: center;
    gap: 30px;

    text-align: left;
}

.transport-intro-icon {
    flex-shrink: 0;

    width: 80px;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--gold);
}

.transport-intro-icon svg {
    width: 60px;
    height: 60px;
}

.transport-intro-content h3 {
    margin: 0 0 12px;
    color: var(--gold);
}

.transport-intro-content p {
    margin-bottom: 10px;

    color: var(--gray-light);
    line-height: 1.7;
}


/* AIRPORTS */

.transport-airports {
    max-width: 1000px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.airport-card {
    padding: 25px 20px;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition: 0.3s;
}

.airport-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
}

.airport-card-icon {
    margin-bottom: 12px;

    color: var(--gold);

    font-size: 1.5rem;
}

.airport-card h3 {
    margin: 0 0 3px;

    color: var(--gold);
    font-size: 1rem;
}

.airport-code {
    display: block;

    margin-bottom: 15px;

    color: var(--gray-light);

    font-size: 0.65rem;
    letter-spacing: 2px;
}

.airport-card p {
    min-height: 75px;

    margin-bottom: 15px;

    color: var(--gray-light);

    font-size: 0.8rem;
    line-height: 1.6;
}

.airport-route {
    color: var(--gold);

    font-size: 0.6rem;
    letter-spacing: 1px;
}


/* HOW IT WORKS */

.transport-how {
    max-width: 900px;
    margin: 60px auto 0;
}

.transport-how > h3 {
    margin-bottom: 30px;

    color: var(--gold);

    font-size: 1.1rem;
    letter-spacing: 1px;
}

.transport-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.transport-step {
    padding: 20px;
}

.transport-step > span {
    display: block;

    margin-bottom: 12px;

    color: var(--gold);

    font-size: 1.5rem;
    font-weight: 600;
}

.transport-step h4 {
    margin-bottom: 8px;

    font-size: 0.85rem;
}

.transport-step p {
    margin: 0;

    color: var(--gray-light);

    font-size: 0.8rem;
    line-height: 1.6;
}


/* CTA */

.transport-cta {
    margin-top: 40px;
}

.transport-cta p {
    margin-bottom: 20px;

    color: var(--gray-light);
}

.transport-button {
    display: inline-block;

    padding: 13px 25px;

    border: 1px solid var(--gold);

    color: var(--gold);

    text-decoration: none;

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;

    transition: 0.3s;
}

.transport-button:hover {
    background: var(--gold);
    color: #111;
}
			
			/* 4 images */
			@media (max-width: 1200px) {
			    .slide { flex-basis: calc(100% / 4); }
			}
			
			/* 3 images */
			@media (max-width: 900px) {
			    .slide { flex-basis: calc(100% / 3); }		
				.stats-section { flex-direction: column; }
				.stat-item:not(:last-child) { border-right: 0px solid #d4af37; }
				.stat-item--image-only { padding-top: 10px; padding-bottom: 10px; }
				/*
			    .location-wrapper {
			        flex-direction: column;
			        text-align: center;
			    }
			
			    .location-map iframe {
			        height: 300px;
			    }	
				*/
				 .hotel-intro {
        flex-direction: column;
        align-items: center;
    }

    .hotel-intro-image,
    .hotel-intro-content {
        width: 100%;
    }

    .hotel-intro-image img {
        height: 220px;
    }

    .hotel-intro-content {
		padding: 30px 25px;
        text-align: center;

        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hotel-rooms {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
				.competition-intro {
        flex-direction: column;
    }

    .competition-gallery,
    .competition-content {
        width: 100%;
        box-sizing: border-box;
    }

    .competition-gallery {
        padding: 10px;
    }

    .competition-main-image {
        height: 260px;
    }

    .competition-content {
        padding: 30px 25px;
        text-align: center;
        align-items: center;
    }

    .competition-buttons {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .competition-bottom {
        padding: 0 15px;
    }
				.tickets-container {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .ticket-card {
        padding: 30px 25px;
    }

    .price-timeline {
        grid-template-columns: 1fr 1fr;
    }

    .price-stage:nth-child(2) {
        border-right: none;
    }

    .price-stage:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

				 .transport-intro {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .transport-intro-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .transport-airports {
        grid-template-columns: 1fr 1fr;
        max-width: 600px;
    }

    .transport-steps {
        grid-template-columns: 1fr;
        gap: 10px;
    }

			}
			
			/* minimum 1 images */
			@media (max-width: 600px) {
				body { background-image: url("2027/other/background-horiz-m-r.webp"); }
				.logo img { height: 60px; }
			    .slide { flex-basis: calc(100% / 1); }
				.stats-section { flex-direction: column; }
				.stat-item:not(:last-child) { border-right: 0px solid #d4af37; }
				.stat-item--image-only { padding-top: 10px; padding-bottom: 10px; }
				.topic-card {width: 130px; }
				.hero { flex-direction: column-reverse; }
				.hero-content { text-align: center; }
				.section-box { padding: 10px; }
				.navbar { padding: 10px 20px 10px; }
				.all-in-one { font-size: 1.4rem !important; }
				.date { font-size: 1.8rem !important; }
				.loc { font-size: 1.3rem !important; }

				.carousel-container {
			        gap: 0;
			    } 
				.slide-overlay {
					background: transparent;
				}
				.slide {
			        flex: 0 0 100%;
			        margin: 0;
			        border-radius: 0; /* optional full-bleed look */
			        padding: 0;
					background: rgba(var(--black-card-rgb), 0.0);
					backdrop-filter: blur(0px); /* glass effect */
			    	-webkit-backdrop-filter: blur(0px);
			    }.carousel-btn {
				    display: none;
				}.carousel-track-container {
			        overflow: hidden;
			    }

				.m-hide { display: none; }
				
				.nav-buttons {
					display: none; /* hide normal nav */
				}
				.nav-buttons {
			        flex-direction: row;
			        align-items: center;
			    }			
			    .menu-icon {
			        display: flex;
			        font-size: 28px;
			        cursor: pointer;
			    }			
			    .dropdown-menu {
			        right: 10px;
			        top: 60px;
			    }
				.transport-airports {
			        grid-template-columns: 1fr;
			        max-width: 400px;
			    }
				.hero-buttons {
			    flex-direction: column;
			    align-items: center;
			  }
			
			  .hero-buttons button {
			    width: 100%;
			    max-width: 300px;
			  }
			}
			

			/*
			Speical text
			*/
			


			/**/
			.navs{
				display: flex;
			}
			.menu-icon {
			    font-size: 28px;
			    cursor: pointer;
			    color: var(--white);
			    display: block;
				/*padding-left:10px;*/
				transition: transform 0.3s ease, color 0.3s ease;
			}
			.menu-icon.rotated {
			    transform: rotate(90deg);                                      
			    color: var(--gold);
			}
		
			/* dropdown box */
/*
			.dropdown-menu {
			    display: none;
			    position: absolute;
			    top: 75px;
			    right: 10px;
			
			    min-width: 100px;
			    overflow: hidden;
			    z-index: 999;

				background: rgba(var(--black-card-rgb), 0.4);
			    border-radius: 24px;
				margin: 1px;			
			    backdrop-filter: blur(10px);
			    -webkit-backdrop-filter: blur(10px);
			
			    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
				flex-direction: column;
				margin-left: auto;
				
			}
			
			.dropdown-menu a {
			    display: block;
			    padding: 10px;
			    text-decoration: none;
			    color: var(--gold);		
				margin-left: auto;
			}			
			.dropdown-menu a:hover { background: transparent; }
			.dropdown-menu.show { display: flex; }
*/		

#lightbox {
  border: none;
  padding: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
}
#lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
#lightbox::backdrop { background: rgba(0, 0, 0, .9); }
#lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
#lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  padding: .5rem 1rem;
}
.lb-close { top: 1rem; right: 1rem; }
.lb-prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); }

img.zoomable {
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

img.zoomable:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  img.zoomable { transition: none; }
  img.zoomable:hover { transform: none; }
}