.speakers-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
	padding: 20px;
}

.speaker-card {
	display: flex;
	align-items: center;
	background-color: white;
	border-radius: 10px;
	padding: 15px;
	margin: 10px 0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	width: 90%;
}



.speaker-card img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 20px;
}

.speaker-info {
	flex: 1;
}

.speaker-info h2 {
	margin: 0;
	font-size: 1.5em;
}

.title {
	font-weight: bold;
	color: #555;
	margin: 5px 0;
}

.title2 {
	font-weight: bold;
	margin: 5px 0;
}

.bio {
	font-size: 0.9em;
	color: #666;
	margin: 5px 0;
}

.social-links {
	margin-top: 10px;
}

.social-links a {
	color: #0078d4;
	text-decoration: none;
	margin-right: 5px;
	font-size: 0.9em;
}

.pdf-link {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	/* Adjust margin as needed */
}


.banner-container {
	width: 100%;
	position: relative;
	overflow: hidden;
}

/* Aspect ratio box */
@media (min-width: 768px) {
	.banner-container::before {
		content: "";
		display: block;
		padding-top: 21%;
		/* Example for a 16:9 aspect ratio. Calculate as (height / width * 100)% */
		background-size: cover;
		/* Cover the entire viewport */
		background-repeat: no-repeat;
		/* Do not repeat the image */
		background-position: center;
	}
}

/* Aspect ratio box */
@media (max-width: 768px) {
	.banner-container::before {
		content: "";
		display: block;
		padding-top: 150%;
		/* Example for a 16:9 aspect ratio. Calculate as (height / width * 100)% */
		background-size: cover;
		/* Cover the entire viewport */
		background-repeat: no-repeat;
		/* Do not repeat the image */
		background-position: center;
	}
}

.banner-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 98%;
	opacity: 0;
	z-index: 1;
	animation-timing-function: ease-in-out;
	animation-name: slideFade;
	animation-duration: 35s;
	animation-iteration-count: infinite;
}

.banner-single {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 98%;
	z-index: 1;
}

.banner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 98%;
	z-index: 0;
	animation-timing-function: ease-in;
	background: rgba(0, 0, 0, 0.5);
	/* Semi-transparent black overlay */
	opacity: 0;
	/* Start invisible */
	animation: fadeOverlay 35s infinite;
	/* Match the slide transition duration */
}


/* Revised keyframes for 5 slides with smooth fade transitions */
@keyframes slideFade {

	/* Start & end of cycle: slide is hidden */
	0%,
	100% {
		opacity: 0;
	}

	/* --- Slide 1 --- */
	/* Fade in to full opacity */
	5%,
	25% {
		opacity: 1;
		z-index: 1;
	}

	/* Transition phase: slight fade with overlay effect */
	30% {
		opacity: 0.95;
		z-index: 2;
		background: rgba(0, 0, 0, 0.5);
	}

	/* --- Slide 2 --- */
	/* Slide becomes fully visible */
	30%,
	50% {
		opacity: 1;
		z-index: 3;
	}

	/* Transition phase */
	55% {
		opacity: 0.95;
		z-index: 4;
		background: rgba(0, 0, 0, 0.5);
	}

	/* --- Slide 3 --- */
	55%,
	75% {
		opacity: 1;
		z-index: 5;
	}

	80% {
		opacity: 0.95;
		z-index: 6;
		background: rgba(0, 0, 0, 0.5);
	}

	/* --- Slide 4 --- */
	80%,
	95% {
		opacity: 1;
		z-index: 7;
	}

	/* Final transition before cycle resets */
	100% {
		opacity: 0.95;
		z-index: 8;
		background: rgba(0, 0, 0, 0.5);
	}
}

/* Adjusted overlay fade animation */
@keyframes fadeOverlay {

	0%,
	100% {
		opacity: 0;
	}

	/* These points trigger the overlay during slide transitions */
	23%,
	27%,
	48%,
	52%,
	73%,
	77%,
	93%,
	97% {
		opacity: 1;
		z-index: 5;
	}
}

/* Stagger the animation for each slide (assuming a 28s total cycle) */
.banner-slide:nth-child(1) {
	animation-delay: 0s;
}

.banner-slide:nth-child(2) {
	animation-delay: -7s;
}

.banner-slide:nth-child(3) {
	animation-delay: -14s;
}

.banner-slide:nth-child(4) {
	animation-delay: -21s;
}

/* Revised keyframes for 5 slides with smooth fade transitions */
@keyframes slideFade {

	/* Start & end of cycle: slide is hidden */
	0%,
	100% {
		opacity: 0;
	}

	/* --- Slide 1 --- */
	2%,
	18% {
		opacity: 1;
		z-index: 1;
	}

	20% {
		opacity: 0.95;
		z-index: 2;
		background: rgba(0, 0, 0, 0.5);
	}

	/* --- Slide 2 --- */
	20%,
	38% {
		opacity: 1;
		z-index: 3;
	}

	40% {
		opacity: 0.95;
		z-index: 4;
		background: rgba(0, 0, 0, 0.5);
	}

	/* --- Slide 3 --- */
	40%,
	58% {
		opacity: 1;
		z-index: 5;
	}

	60% {
		opacity: 0.95;
		z-index: 6;
		background: rgba(0, 0, 0, 0.5);
	}

	/* --- Slide 4 --- */
	60%,
	78% {
		opacity: 1;
		z-index: 7;
	}

	80% {
		opacity: 0.95;
		z-index: 8;
		background: rgba(0, 0, 0, 0.5);
	}

	/* --- Slide 5 --- */
	80%,
	98% {
		opacity: 1;
		z-index: 9;
	}

	100% {
		opacity: 0.95;
		z-index: 10;
		background: rgba(0, 0, 0, 0.5);
	}
}

/* Adjusted overlay fade animation */
@keyframes fadeOverlay {

	0%,
	100% {
		opacity: 0;
	}

	/* Transition points between slides */
	17%,
	19%,
	37%,
	39%,
	57%,
	59%,
	77%,
	79%,
	97%,
	99% {
		opacity: 1;
		z-index: 5;
	}
}

/* Stagger the animation for each slide (assuming a 35s total cycle) */
.banner-slide:nth-child(1) {
	animation-delay: 0s;
}

.banner-slide:nth-child(2) {
	animation-delay: -7s;
}

.banner-slide:nth-child(3) {
	animation-delay: -14s;
}

.banner-slide:nth-child(4) {
	animation-delay: -21s;
}

.banner-slide:nth-child(5) {
	animation-delay: -28s;
}


/* Starts after the second slide has been visible for 5s */


body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin: 0 !important;
	padding: 0;
	background-color: #fff;
	text-align: left;
}

/* Media query for laptop devices */
@media (min-width: 768px) {
	body {
		/*background: linear-gradient(top, rgb(255, 255, 255) 10%, rgba(201, 241, 247, 0.537)), url('../images/banners/Light-05.jpg');*/
		/* additional mobile-specific styles if needed */
		/*background: radial-gradient(circle, rgb(255, 255, 255) 30%, rgba(135, 225, 236, 0.637)), url('../images/banners/Light-05.jpg');*/
		/*background: url('../images/banners/Light-05.jpg');*/
		/*background: url('../images/banners/jdconf-background-3.jpg');*/
		background-size: cover;
		/* Cover the entire viewport */
		background-repeat: no-repeat;
		/* Do not repeat the image */
		background-position: center;
		/* Center the image */
	}
}

/* Hide the mobile section by default */
#about-mobile {
	display: none;
}

/* Media query for mobile devices */
@media screen and (max-width: 767px) {
	#about-mobile {
		display: block;
	}

	#about-desktop {
		display: none;
	}
}

/* Media query for desktop devices */
@media screen and (min-width: 768px) {
	#about-desktop {
		display: block;
	}
}


h2 {
	color: #0067b8;
	/* This sets the color to navy blue */
}

header {
	background-color: #000;
	color: white;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 3.5%;
	/*text-align: center;*/
	/*width: 100%;*/
	/*max-width: var(--content-width-desktop); */
	margin: auto;
	padding-left: var(--content-width-padding-desktop);
	padding-right: var(--content-width-padding-desktop);
}

/* Media query for desktop devices */
@media screen and (max-width: 767px) {
	header {
		padding-left: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

@media screen and (max-width: 767px) {
	.speaker-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin: auto;
		padding: 20px;
		border: 1px solid #ddd;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
}

.main-image {
	width: 100%;
	display: block;
}

main {
	/*padding: 20px;*/
	text-align: left;
}

/* Media query for mobile devices */
@media screen and (max-width: 767px) {
	main {
		/*padding-top: 10px;*/
	}
}

/* Media query for screens wider than a specific width, e.g., 768px */
@media screen and (min-width: 768px) {
	main {
		/*padding: 0 7vw;*/
		/* Responsive padding for desktop screens */
	}
}

.section-home {
	/*margin-bottom: 20px;*/
	/* Increased spacing between sections */
	/*padding-bottom: 20px;*/
}

footer {
	background-color: #000;
	color: white;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

.footer-logo {
	height: 60px;
	width: auto;
}


a {
	color: #0067b8;
	text-decoration: none;
	font-weight: 500;
}

a:hover {
	text-decoration: underline;
}

.button {
	display: inline-block;
	padding: 10px 20px;
	margin: 0px;
	background-color: #0067b8;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s;
}

.button:hover {
	background-color: #0056b3;
}

.button:hover {
	background-color: #0056b3;
	/* Hover effect for buttons */
	color: white;
}

/* Default style for mobile devices */
#conference-title {
	display: block;
	font-size: 1.2em;
	margin-inline-start: 20px;
	margin-inline-end: 20px;
	font-weight: bold;
}

/* Style for tablets, laptops, and desktops */
@media screen and (min-width: 768px) {
	#conference-title {
		display: block;
		font-size: 2em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bold;
	}
}

.hero-image {
	width: 100%;

}

.video-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 20px;
}

.video-column {
	flex: 1;
	padding: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	overflow: hidden;
}

iframe {
	width: 100%;
	height: 315px;
	border: none;
}

/* Media query for tablets and smaller devices */
@media (max-width: 768px) {
	.video-column {
		flex-basis: 48%;
		/* Adjust to 48% to fit two columns in smaller devices */
	}
}

/* Media query for mobile devices */
@media (max-width: 480px) {
	.video-column {
		flex-basis: 100%;
		/* Stacks the videos vertically on small screens */
	}
}

.uhf-container:not(.has-padding) {
	max-width: calc(100% - 48px);
	width: calc(100% - 48px);
}

.padding-block-lg {
	padding-block: 2rem !important;
}

.is-reading-width {
	max-width: 50rem !important;
}

.padding-bottom-md {
	padding-block-end: 2rem !important;
}

.details:first-of-type {
	border-top: 1px solid #000;
}

.details {
	max-width: 100%;
}

.details-summary,
.details-summary-reverse {
	/* background-color: #f2f2f2; */
	border-bottom: 1px solid #000;
	cursor: pointer;
	padding: 1.5rem;
	padding-left: 0px;
	padding-inline-end: 1rem;
	font-weight: 600;
	display: block;
	position: relative;
	outline-offset: -.125rem !important;
}

details>summary:first-of-type {
	display: list-item;
	counter-increment: list-item 0;
	list-style: inside disclosure-closed;
}

details[open]>summary:first-of-type {
	list-style-type: disclosure-open;
}

.details-content {
	background-color: #7272724f;
	border-bottom: 1px solid #000;
	margin: 0;
	padding: 1.5rem;
}

.full-width-wrapper {
	width: 99vw;
	/* 100% of the viewport width */
	margin-left: calc(-50vw + 50%);
	/* Centering the wrapper */
	/* background-color: #cbe9b7; */
	/* Replace with your desired color */
	/* background: linear-gradient(to right, #cbe9b7, #f7f9b5);*/
}

#previous-events {
	padding: 0 20px;
	/* Padding as needed */
	padding-bottom: 30px !important;
	margin: 0 auto;
}

@media screen and (min-width: 768px) {
	#previous-events {
		padding: 0 7.4vw !important;
	}
}

a.social {
	color: var(--type-primary);
	text-decoration: none;
	padding: 10px;
}

a.social:hover {
	color: var(--type-primary);
}

a.social:visited {
	color: var(--type-primary);
}

#socials {
	margin-bottom: 0px;
	/* Increased spacing between sections */
	padding-bottom: 0px;
}

#copyright {
	padding-top: 20px;
	padding-bottom: 0px !important;
}

/* Agenda section */
/* #agenda {
    border: 2px solid #004A7F;
    margin: 20px auto;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
  }
*/
.agenda {
	/* No need for display: flex; here anymore */
}

.region-column {
	margin-bottom: 20px;
	/* Adds space between each region section */
	/*background-color: white;*/
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
	box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.04);
	padding: 1% 2%;
	border-radius: 10px;
	background: #f0f4f8;
	background: #f5f5f5;
	border: 1px solid var(--color-neutrals-additionals-grey-80);
	/* Padding inside each region for content spacing */
}


/* Ensure table layout is still responsive within each region */
.agenda-table table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.agenda-table th,
.agenda-table td {
	text-align: left;
	padding: 8px;
	border-bottom: 1px solid #ddd;
}

.session-title {
	width: 50%;
}

.session-time {
	width: 20%;
}

.session-ondemand {
	width: 20%;
}

.agenda-table th {
	background-color: #000;
	color: #fff;
}

.agenda-table tr:nth-child(odd) {
	background-color: #B0E0E6;
	background-color: #F0F4F8;
	/* Ice Blue for odd rows */
}

.agenda-table tr:nth-child(even) {
	background-color: #e2f4f6;
	background-color: #ddeeff;
}

.agenda-table tr:hover {
	background-color: #fff;
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {

	.agenda-table,
	.agenda-table table {
		width: auto;
		/* Allows table to scroll horizontally on small screens */
	}

	.session-title {
		width: 75%;
	}

	.session-time {
		width: 25%;
	}

	.session-ondemand {
		width: 25%;
	}
}

/* Speaker section */
.speakers-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
}

.speaker {
	border: 1px solid var(--color-neutrals-additionals-grey-80);
	/*#B0E0E6*/
	text-align: center;
	padding: 15px;
	position: relative;
	border-radius: 10px;
	/* Rounded corners */
}

.speaker img {
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
	border-radius: 10px;
	/* Adjust this value to control the roundness */
}

.speaker img:hover {
	transform: scale(1.05);
}

.icon-info {
	cursor: pointer;
	margin-left: 5px;
	display: none;
}

.bio2 {}

.speaker:hover .bio {
	display: block;
	background-color: #e2f4f6;
	background-color: #ddeeff;
	padding: 5px;
	position: absolute;
	bottom: 10px;
	left: 5%;
	right: 5%;
	border: 1px solid var(--color-neutrals-additionals-grey-80);
	border-radius: 10px;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
	.speaker:hover .bio {
		font-size: 16px;
		/* Set font size to 10px for mobile devices */
	}
}

@media (max-width: 768px) {
	.speakers-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.speakers-grid {
		grid-template-columns: 1fr;
	}
}

/* Menu section */
.navbar {
	background-color: #000;
	/* Change as per your color scheme */
	/* overflow: hidden; */
	display: flex;
	align-items: center;
	padding-left: 4.5%;
}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media (max-width: 768px) {
	.navbar {
		padding: 20px;
		/* Adjust padding for mobile devices */
	}
}

/* Default styles for the logo */
.jdconflogo {
	width: auto;
	/* Set the default width for larger screens */
	height: 20px !important;
	display: none;
}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media (max-width: 768px) {
	.jdconflogo {
		width: auto;
		/* Reduce the width for mobile devices */
		height: 10px !important;
	}
}


.navbar-logo {
	flex: 1;
	/* Logo takes 1/4 of the space */
}

.navbar-logo img {
	height: 50px;
	/* Adjust as per your logo's size */
}

.nav-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex: 4;
	/* Menu takes 3/4 of the space */
}


.nav-menu li {
	margin-left: 0px;
}


.nav-menu li a {
	display: block;
	color: white;
	/* Change as per your color scheme */
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;

}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media (max-width: 768px) {
	.nav-menu li a {
		padding: 14px 10px;
	}
}

.nav-menu li a:hover {
	/*background-color: #ddd; */
	/* Change for hover effect */
	color: #0067b8;

}


.nav-menu li a.active {
	/* Your decorative styles for the active menu item */
	color: #0067b8;
	/* example */
	font-weight: bold;
}

.session-speaker {}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media (max-width: 768px) {
	.session-speaker {
		display: none;
	}
}



.timezone-notice {
	text-align: center;
	margin-top: 0;
	margin-bottom: 1em;
	font-style: italic;
	color: #555;
}


#timeZoneInfoDiv {
	padding-top: 0px;
	padding-bottom: 10px;
}

#timeZoneInfoDiv2 {
	padding-top: 0px;
	padding-bottom: 10px;
}

#timeZoneInfoDiv3 {
	padding-top: 0px;
	padding-bottom: 10px;
}

#timeZoneInfoDiv4 {
	padding-top: 0px;
	padding-bottom: 10px;
}

/* Style for the mobile menu */
.mobile-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #333;
	padding: 10px 20px;
	color: #fff;
}

/* Style for the hamburger icon */
.menu-icon {
	cursor: pointer;
	font-size: 24px;
}

/* Style for the menu items */
.menu-items {
	list-style: none;
	padding: 0;
	display: none;
}

.menu-items li {
	margin: 10px 0;
}

/* Media query for mobile responsiveness */
@media (max-width: 768px) {
	.menu-items {
		display: block;
	}

	.menu-items.active {
		display: flex;
		flex-direction: column;
	}
}

.session-time {
	white-space: nowrap;
}

.session-ondemand {
	white-space: nowrap;
}

/* Design tokens */
:root {
	--color-midnight-blue-primary: #151718;
	--color-midnight-blue-shade-10: #14053aff;
	--color-midnight-blue-shade-20: #0f042cff;
	--color-brand-purple-primary: #512bd4ff;
	--color-brand-purple-shade-10: #4122aaff;
	--color-brand-purple-shade-20: #311a7fff;
	--color-brand-purple-shade-30: #201155ff;
	--color-brand-purple-shade-35: #180d40ff;
	--color-brand-purple-shade-40: #10092aff;
	--color-brand-purple-shade-45: #080415ff;
	--color-brand-purple-tint-10: #7455ddff;
	--color-brand-purple-tint-20: #9780e5ff;
	--color-brand-purple-tint-25: #ac99eaff;
	--color-brand-purple-tint-30: #b9aaeeff;
	--color-brand-purple-tint-35: #cbbff2ff;
	--color-brand-purple-tint-40: #dcd5f6ff;
	--color-brand-purple-tint-45: #eeeafbff;
	--color-cyan-primary: #28c2d1ff;
	--color-cyan-shade-10: #209ba7ff;
	--color-cyan-shade-20: #18747dff;
	--color-cyan-shade-30: #104e54ff;
	--color-cyan-shade-35: #0c3a3fff;
	--color-cyan-shade-40: #08272aff;
	--color-cyan-shade-45: #041315ff;
	--color-cyan-tint-10: #53cedaff;
	--color-cyan-tint-20: #7edae3ff;
	--color-cyan-tint-30: #a9e7edff;
	--color-cyan-tint-35: #beedf1ff;
	--color-cyan-tint-40: #d4f3f6ff;
	--color-cyan-tint-45: #e9f9faff;
	--color-blue-primary: #0b6cffff;
	--color-blue-shade-10: #0956ccff;
	--color-blue-shade-20: #074199ff;
	--color-blue-shade-30: #042b66ff;
	--color-blue-shade-35: #03204dff;
	--color-blue-shade-40: #021633ff;
	--color-blue-shade-45: #010b1aff;
	--color-blue-tint-10: #3c89ffff;
	--color-blue-tint-20: #6da7ffff;
	--color-blue-tint-30: #9dc4ffff;
	--color-blue-tint-35: #b6d3ffff;
	--color-blue-tint-40: #cee2ffff;
	--color-blue-tint-45: #e7f0ffff;
	--color-flamingo-primary: #f65163ff;
	--color-flamingo-shade-10: #cb4150ff;
	--color-flamingo-shade-20: #a0313dff;
	--color-flamingo-shade-30: #74222bff;
	--color-flamingo-shade-35: #5f1a21ff;
	--color-flamingo-shade-40: #491218ff;
	--color-flamingo-shade-45: #340a0eff;
	--color-flamingo-tint-10: #f87482ff;
	--color-flamingo-tint-20: #fa97a1ff;
	--color-flamingo-tint-30: #fbb9c1ff;
	--color-flamingo-tint-35: #fccbd0ff;
	--color-flamingo-tint-40: #fddce0ff;
	--color-flamingo-tint-45: #feeeefff;
	--color-magenta-primary: #d600aaff;
	--color-magenta-shade-10: #ab0088ff;
	--color-magenta-shade-20: #800066ff;
	--color-magenta-shade-30: #560044ff;
	--color-magenta-shade-35: #400033ff;
	--color-magenta-shade-40: #2b0022ff;
	--color-magenta-shade-45: #150011ff;
	--color-magenta-tint-10: #de33bbff;
	--color-magenta-tint-20: #e666ccff;
	--color-magenta-tint-30: #ef99ddff;
	--color-magenta-tint-35: #f3b2e5ff;
	--color-magenta-tint-40: #f7cceeff;
	--color-magenta-tint-45: #fbe5f6ff;
	--color-yellow-primary: #f7b548ff;
	--color-yellow-shade-10: #ca943aff;
	--color-yellow-shade-20: #9d722cff;
	--color-yellow-shade-30: #70511dff;
	--color-yellow-shade-35: #5a4016ff;
	--color-yellow-shade-40: #432f0fff;
	--color-yellow-shade-45: #2d1f08ff;
	--color-yellow-tint-10: #f9c46dff;
	--color-yellow-tint-20: #fad391ff;
	--color-yellow-tint-30: #fce1b6ff;
	--color-yellow-tint-35: #fde9c8ff;
	--color-yellow-tint-40: #fdf0daff;
	--color-yellow-tint-46: #fef8edff;
	--color-neutrals-dark-black: #000000ff;
	--color-neutrals-dark-grey-4: #0a0a0aff;
	--color-neutrals-dark-grey-8: #141414ff;
	--color-neutrals-dark-grey-24: #3d3d3dff;
	--color-neutrals-dark-grey-36: #5c5c5cff;
	--color-neutrals-dark-grey-40: #666666ff;
	--color-neutrals-dark-grey-52: #858585ff;
	--color-neutrals-dark-grey-68: #adadadff;
	--color-neutrals-dark-grey-84: #d6d6d6ff;
	--color-neutrals-additionals-grey-2: #050505ff;
	--color-neutrals-additionals-grey-6: #0f0f0fff;
	--color-neutrals-additionals-grey-10: #1a1a1aff;
	--color-neutrals-additionals-grey-12: #1f1f1fff;
	--color-neutrals-additionals-grey-16: #292929ff;
	--color-neutrals-additionals-grey-18: #2e2e2eff;
	--color-neutrals-additionals-grey-20: #333333ff;
	--color-neutrals-additionals-grey-22: #383838ff;
	--color-neutrals-additionals-grey-28: #474747ff;
	--color-neutrals-additionals-grey-30: #4d4d4dff;
	--color-neutrals-additionals-grey-32: #525252ff;
	--color-neutrals-additionals-grey-34: #575757ff;
	--color-neutrals-additionals-grey-42: #6b6b6bff;
	--color-neutrals-additionals-grey-44: #707070ff;
	--color-neutrals-additionals-grey-46: #757575ff;
	--color-neutrals-additionals-grey-48: #7a7a7aff;
	--color-neutrals-additionals-grey-54: #8a8a8aff;
	--color-neutrals-additionals-grey-56: #8f8f8fff;
	--color-neutrals-additionals-grey-58: #949494ff;
	--color-neutrals-additionals-grey-60: #999999ff;
	--color-neutrals-additionals-grey-62: #9e9e9eff;
	--color-neutrals-additionals-grey-64: #a3a3a3ff;
	--color-neutrals-additionals-grey-66: #a8a8a8ff;
	--color-neutrals-additionals-grey-70: #b2b2b2ff;
	--color-neutrals-additionals-grey-72: #b8b8b8ff;
	--color-neutrals-additionals-grey-76: #c2c2c2ff;
	--color-neutrals-additionals-grey-78: #c7c7c7ff;
	--color-neutrals-additionals-grey-80: #ccccccff;
	--color-neutrals-additionals-grey-86: #dbdbdbff;
	--color-neutrals-additionals-grey-90: #e5e5e5ff;
	--color-neutrals-light-grey-14: #242424ff;
	--color-neutrals-light-grey-26: #424242ff;
	--color-neutrals-light-grey-38: #616161ff;
	--color-neutrals-light-grey-50: #808080ff;
	--color-neutrals-light-grey-74: #bdbdbdff;
	--color-neutrals-light-grey-82: #d1d1d1ff;
	--color-neutrals-light-grey-88: #e0e0e0ff;
	--color-neutrals-light-grey-90: #ebebebff;
	--color-neutrals-light-grey-94: #f0f0f0ff;
	--color-neutrals-light-grey-96: #f5f5f5ff;
	--color-neutrals-light-grey-98: #fafafaff;
	--color-neutrals-light-white: #ffffffff;
	--color-information-blue: #005fb7ff;
	--color-information-dark-green: #0f7b0fff;
	--color-information-light-green: #dff6ddff;
	--color-information-dark-red: #c42b1cff;
	--color-information-light-red: #fde7e9ff;
	--color-information-dark-green: #052505ff;
	--color-information-dark-red: #3f1011ff;
	--color-gradients-light-theme-multi-color-gradients-purple-magenta: linear-gradient(to bottom, #512bd451 0%, #d600aad6 100%);
	--color-gradients-light-theme-multi-color-gradients-magenta-flamingo: linear-gradient(to bottom, #d600aad6 0%, #cb4150cb 100%);
	--color-gradients-light-theme-multi-color-gradients-magenta-flamingo-webkit: -webkit-linear-gradient(to bottom, #d600aad6 0%, #cb4150cb 100%);
	--color-gradients-light-theme-multi-color-gradients-flamingo-purple: linear-gradient(to bottom, #cb4150cb 0%, #512bd451 100%);
	--color-gradients-light-theme-multi-color-gradients-purple-blue: linear-gradient(to bottom, #512bd451 0%, #0b6cff0b 100%);
	--color-gradients-light-theme-multi-color-gradients-blue-purple: linear-gradient(to bottom, #0b6cff0b 0%, #512bd451 100%);
	--color-gradients-light-theme-magenta-purple-primary: linear-gradient(to bottom, #d600aad6 0%, #512bd451 100%);
	--color-gradients-light-theme-magenta-purple-primary-webkit: -webkit-linear-gradient(to bottom, #d600aad6 0%, #512bd451 100%);
	--color-gradients-light-theme-magenta-purple-gradient-01: linear-gradient(to bottom, #d600aad6 0%, #b80ab3b8 85.4%);
	--color-gradients-light-theme-magenta-purple-gradient-02: linear-gradient(to bottom, #b80ab3b8 0%, #9b13bd9b 100%);
	--color-gradients-light-theme-magenta-purple-gradient-03: linear-gradient(to bottom, #9b13bd9b 0%, #7d1dc67d 100%);
	--color-gradients-light-theme-magenta-purple-gradient-04: linear-gradient(to bottom, #7d1dc67d 0%, #512bd451 100%);
	--color-gradients-light-theme-magenta-purple-gradient-05: linear-gradient(to bottom, #512bd451 0%, #7d1dc67d 100%);
	--color-gradients-light-theme-magenta-purple-gradient-06: linear-gradient(to bottom, #7d1dc67d 0%, #9b13bd9b 100%);
	--color-gradients-light-theme-magenta-purple-gradient-07: linear-gradient(to bottom, #9b13bd9b 0%, #b80ab3b8 100%);
	--color-gradients-light-theme-magenta-purple-gradient-08: linear-gradient(to bottom, #b80ab3b8 0%, #d600aad6 100%);
	--color-gradients-light-theme-blue-purple-primary: linear-gradient(to bottom, #0b6cff0b 0%, #512bd451 100%);
	--color-gradients-light-theme-blue-purple-gradient-01: linear-gradient(to bottom, #0b6cff0b 0%, #1c5cf41c 85.4%);
	--color-gradients-light-theme-blue-purple-gradient-02: linear-gradient(to bottom, #1c5cf41c 0%, #2e4cea2e 100%);
	--color-gradients-light-theme-blue-purple-gradient-03: linear-gradient(to bottom, #2e4cea2e 0%, #403bdf40 100%);
	--color-gradients-light-theme-blue-purple-gradient-04: linear-gradient(to bottom, #403bdf40 0%, #512bd451 100%, #512bd451 100%);
	--color-gradients-light-theme-blue-purple-gradient-05: linear-gradient(to bottom, #512bd451 0%, #403bdf40 100%);
	--color-gradients-light-theme-blue-purple-gradient-06: linear-gradient(to bottom, #403bdf40 0%, #2e4cea2e 100%);
	--color-gradients-light-theme-blue-purple-gradient-07: linear-gradient(to bottom, #2e4cea2e 0%, #1c5cf41c 100%);
	--color-gradients-light-theme-blue-purple-gradient-08: linear-gradient(to bottom, #1c5cf41c 0%, #0b6cff0b 100%);
	--color-gradients-dark-theme-multi-color-gradients-text-graphic-elements-only-purple-magenta: linear-gradient(to bottom, #9780e597 0%, #de33bbde 100%);
	--color-gradients-dark-theme-multi-color-gradients-text-graphic-elements-only-purple-magenta-webkit: -webkit-linear-gradient(to bottom, #9780e597 0%, #de33bbde 100%);
	--color-gradients-dark-theme-multi-color-gradients-text-graphic-elements-only-magenta-flamingo: linear-gradient(to bottom, #de33bbde 0%, #f65163f6 100%);
	--color-gradients-dark-theme-multi-color-gradients-text-graphic-elements-only-flamingo-purple: linear-gradient(to bottom, #f65163f6 0%, #9780e597 100%);
	--color-gradients-dark-theme-multi-color-gradients-text-graphic-elements-only-purple-cyan: linear-gradient(to bottom, #9780e597 0%, #53ceda53 100%);
	--color-gradients-dark-theme-multi-color-gradients-text-graphic-elements-only-cyan-purple: linear-gradient(to bottom, #53ceda53 0%, #9780e597 100%);
	--color-gradients-dark-theme-magenta-purple-primary: linear-gradient(to bottom, #d600aad6 0%, #7455dd74 100%);
	--color-gradients-dark-theme-magenta-purple-gradient-02: linear-gradient(to bottom, #be15b7be 0%, #a52bc4a5 100%);
	--color-gradients-dark-theme-magenta-purple-gradient-01: linear-gradient(to bottom, #d600aad6 0%, #be15b7be 85.4%);
	--color-gradients-dark-theme-magenta-purple-gradient-03: linear-gradient(to bottom, #a52bc4a5 0%, #8d40d08d 100%);
	--color-gradients-dark-theme-magenta-purple-gradient-04: linear-gradient(to bottom, #8d40d08d 0%, #7455dd74 100%);
	--color-gradients-dark-theme-magenta-purple-gradient-05: linear-gradient(to bottom, #7455dd74 0%, #8d40d08d 100%);
	--color-gradients-dark-theme-magenta-purple-gradient-06: linear-gradient(to bottom, #8d40d08d 0%, #a52bc4a5 100%);
	--color-gradients-dark-theme-magenta-purple-gradient-07: linear-gradient(to bottom, #a52bc4a5 0%, #be15b7be 100%);
	--color-gradients-dark-theme-magenta-purple-gradient-08: linear-gradient(to bottom, #be15b7be 0%, #d600aad6 100%);
	--color-gradients-dark-theme-blue-purple-primary: linear-gradient(to bottom, #0b6cff0b 0%, #7455dd74 100%);
	--color-gradients-dark-theme-blue-purple-gradient-01: linear-gradient(to bottom, #0b6cff0b 0%, #2566f625 85.4%);
	--color-gradients-dark-theme-blue-purple-gradient-02: linear-gradient(to bottom, #2566f625 0%, #4060ee40 100%);
	--color-gradients-dark-theme-blue-purple-gradient-03: linear-gradient(to bottom, #4060ee40 0%, #5b5ae55b 100%);
	--color-gradients-dark-theme-blue-purple-gradient-04: linear-gradient(to bottom, #5b5ae55b 0%, #7455dd74 100%);
	--color-gradients-dark-theme-blue-purple-gradient-05: linear-gradient(to bottom, #7455dd74 0%, #5b5ae55b 100%);
	--color-gradients-dark-theme-blue-purple-gradient-06: linear-gradient(to bottom, #5b5ae55b 0%, #4060ee40 100%);
	--color-gradients-dark-theme-blue-purple-gradient-07: linear-gradient(to bottom, #4060ee40 0%, #2566f625 100%);
	--color-gradients-dark-theme-blue-purple-gradient-08: linear-gradient(to bottom, #2566f625 0%, #0b6cff0b 100%);
	--color-speaker-cards-image-backplate-light-theme: linear-gradient(to bottom, #ffffffff 40.71%, #ffffffff 100%);
	--color-speaker-cards-image-backplate-dark-theme: linear-gradient(to bottom, #2e2e2e2e 40.71%, #2e2e2e2e 100%);
	--base-font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--title-font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
	--content-width-desktop: 1248px;
	--content-width-tablet: 792px;
	--content-width-mobile: 300px;
	/* This ensures that even when a screen width is exactly the size of a content 
  break point there is still some padding between the viewport and content. */
	--content-width-padding-desktop: 40px;
	--content-width-padding-tablet: 30px;
	--content-width-padding-mobile: 20px;
	--grid-template-desktop: repeat(12, 1fr);
	--grid-template-tablet: repeat(12, 1fr);
	--grid-template-mobile: repeat(6, 1fr);
	--grid-gap-desktop: 48px;
	--grid-gap-tablet: 24px;
	--grid-gap-mobile: 12px;
	/* This defines the vertical spacing between sections of content on any given page 
  (and is also used as the row gap for grids) */
	--vertical-gap-desktop: 60px;
	--vertical-gap-tablet: 32px;
	--vertical-gap-mobile: 32px;
	--corner-radius-xs: 8px;
	--corner-radius-sm: 12px;
	--corner-radius-md: 16px;
	--corner-radius-lg: 20px;
	--corner-radius-xl: 32px;
	/* --outline-corner-radius: calc(outline-offset + child-corner-radius); */

	--color-foreground: var(--color-neutrals-additionals-grey-20);
	--color-background: var(--color-neutrals-light-grey-98);
	--color-title-font: var(--color-midnight-blue-primary);
	--color-navbar-menu-icon-fill: var(--color-neutrals-light-white);
	--color-footer-foreground: var(--color-neutrals-dark-grey-24);
	--color-footer-background: var(--color-neutrals-light-grey-90);
	--color-primary-gradient: linear-gradient(to bottom right, #0067b8, #1f1d1d);
	--color-primary-gradient-webkit: -webkit-linear-gradient(to bottom right, #0067b8, #1f1d1d);
	--gradient-featured-speaker-card-01: linear-gradient(to bottom, #be15b7be 0%, #a52bc4a5 100%);
	--gradient-featured-speaker-card-02: linear-gradient(to bottom, #d600aad6 0%, #be15b7be 85.4%);
	--gradient-featured-speaker-card-03: linear-gradient(to bottom, #a52bc4a5 0%, #8d40d08d 100%);
	--gradient-featured-speaker-card-04: linear-gradient(to bottom, #8d40d08d 0%, #7455dd74 100%);
	--gradient-featured-speaker-card-05: linear-gradient(to bottom, #7455dd74 0%, #8d40d08d 100%);
	--gradient-featured-speaker-card-06: linear-gradient(to bottom, #8d40d08d 0%, #a52bc4a5 100%);
	--featured-speaker-card-foreground: var(--color-neutrals-light-white);
	--color-link-foreground: #115EA3;
	--color-link-foreground-hover: #0F548C;
	--color-link-foreground-active: #0C3B5E;
	--color-cookie-banner-foreground: var(--color-foreground);
	--color-cookie-banner-background: var(--color-neutrals-light-white);
	--color-cookie-border: var(--color-brand-purple-primary);
	--jdconf-btn-corner-radius: var(--corner-radius-xs);
	--jdconf-btn-border-width: 2px;
	--color-jdconf-btn-focus-outline: var(--color-neutrals-dark-black);
	--jdconf-btn-focus-outline-width: 2px;
	--jdconf-btn-focus-outline-offset: 1px;
	--color-jdconf-solid-btn-accent-foreground: var(--color-neutrals-light-white);
	--color-jdconf-solid-btn-accent-background: var(--color-brand-purple-primary);
	--color-jdconf-solid-btn-accent-border: var(--color-brand-purple-primary);
	--color-jdconf-solid-btn-accent-foreground-hover: var(--color-neutrals-light-white);
	--color-jdconf-solid-btn-accent-background-hover: var(--color-brand-purple-shade-10);
	--color-jdconf-solid-btn-accent-border-hover: var(--color-brand-purple-shade-10);
	--color-jdconf-solid-btn-accent-foreground-active: var(--color-neutrals-light-white);
	--color-jdconf-solid-btn-accent-background-active: var(--color-brand-purple-shade-20);
	--color-jdconf-solid-btn-accent-border-active: var(--color-brand-purple-shade-20);
	--color-jdconf-outline-btn-accent-foreground: var(--color-brand-purple-primary);
	--color-jdconf-outline-btn-accent-background: transparent;
	--color-jdconf-outline-btn-accent-border: var(--color-brand-purple-primary);
	--color-jdconf-outline-btn-accent-foreground-hover: var(--color-brand-purple-shade-10);
	--color-jdconf-outline-btn-accent-background-hover: var(--color-brand-purple-tint-45);
	--color-jdconf-outline-btn-accent-border-hover: var(--color-brand-purple-primary);
	--color-jdconf-outline-btn-accent-foreground-active: var(--color-brand-purple-shade-20);
	--color-jdconf-outline-btn-accent-background-active: var(--color-brand-purple-tint-40);
	--color-jdconf-outline-btn-accent-border-active: var(--color-brand-purple-primary);
	--color-jdconf-link-btn-accent-foreground: var(--color-brand-purple-primary);
	--color-jdconf-link-btn-accent-background: transparent;
	--color-jdconf-link-btn-accent-border: transparent;
	--color-jdconf-link-btn-accent-foreground-hover: var(--color-brand-purple-shade-10);
	--color-jdconf-link-btn-accent-background-hover: transparent;
	--color-jdconf-link-btn-accent-border-hover: transparent;
	--color-jdconf-link-btn-accent-foreground-active: var(--color-brand-purple-shade-20);
	--color-jdconf-link-btn-accent-background-active: transparent;
	--color-jdconf-link-btn-accent-border-active: transparent;
	--color-jdconf-link-btn-neutral-foreground: var(--color-neutrals-dark-grey-24);
	--color-jdconf-link-btn-neutral-background: transparent;
	--color-jdconf-link-btn-neutral-border: transparent;
	--color-jdconf-link-btn-neutral-foreground-hover: var(--color-neutrals-dark-grey-8);
	--color-jdconf-link-btn-neutral-background-hover: transparent;
	--color-jdconf-link-btn-neutral-border-hover: transparent;
	--color-jdconf-link-btn-neutral-foreground-active: var(--color-neutrals-dark-grey-8);
	--color-jdconf-link-btn-neutral-background-active: transparent;
	--color-jdconf-link-btn-neutral-border-active: transparent;
	--color-jdconf-menu-popover-focus-border: var(--color-neutrals-dark-black);
	--color-jdconf-menu-popover-foreground: var(--color-neutrals-additionals-grey-28);
	--color-jdconf-menu-popover-background: var(--color-neutrals-light-white);
	--color-jdconf-menu-popover-foreground-hover: var(--color-neutrals-light-grey-26);
	--color-jdconf-menu-popover-background-hover: var(--color-neutrals-light-grey-96);
	--color-jdconf-menu-popover-foreground-active: var(--color-neutrals-light-grey-88);
	--color-jdconf-menu-popover-background-active: var(--color-neutrals-light-grey-26);
	--color-jdconf-content-region-background: var(--color-neutrals-light-white);
	--jdconf-speaker-card-foreground: var(--color-neutrals-light-grey-38);
	--jdconf-speaker-card-background: var(--color-neutrals-light-white);
	--jdconf-speaker-card-box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.04);
	--jdconf-speaker-card-box-shadow-hover: 0 2px 10px 4px rgba(0, 0, 0, 0.2);
	--color-agenda-time: var(--color-neutrals-dark-grey-40);
	--color-agenda-summaries: var(--color-neutrals-dark-grey-18);
	--color-agenda-speaker: var(--color-blue-shade-20);
	--color-local-events-date: var(--color-neutrals-dark-grey-24);
	--color-form-input-foreground: var(--color-foreground);
	--color-form-input-background: var(--color-neutrals-light-white);
	--color-form-input-border: var(--color-neutrals-light-grey-82);
	--logo-dark-display: none;
	--logo-light-display: block;

	--base-font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--title-font-family: "Space Grotesk", Helvetica, Arial, sans-serif;

	--color-title-font: var(--color-midnight-blue-primary);
	--color-agenda-time: var(--color-neutrals-dark-grey-40);
	--color-agenda-summaries: var(--color-neutrals-dark-grey-18);
	--color-agenda-speaker: var(--color-blue-shade-10);
	--color-local-events-date: var(--color-neutrals-dark-grey-24);
}

header,
main {
	/*width: 100%;/
	/*max-width: var(--content-width-desktop);*/
	margin: auto;
	/*padding-left: var(--content-width-padding-desktop);*/
	/*padding-right: var(--content-width-padding-desktop);*/
}

.live-stream-nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	padding-bottom: 10px;
}

.live-stream-nav li {
	display: inline;
	margin-right: 0px;
	margin-left: 0px;
}

.live-stream-nav li::after {
	content: " |";
}

.live-stream-nav li:last-child::after {
	content: "";
}

/* Navbar */
.navbar {
	align-items: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.navbar-title {
	grid-column: span 6;
	background: var(--color-neutrals-light-white);
	background-clip: text;
	-webkit-background: var(--color-primary-gradient-webkit);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 0;
}

.navbar-title:hover {
	text-decoration: none;
}

.navbar>nav {
	grid-column: 7 / span 1;
	justify-self: end;
	display: flex;
	justify-items: center;
}

.navbar-links {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.navbar-links li {
	list-style: none;
	padding: 0;
	margin: 0 0 0 40px;
}

.navbar-links a {
	/*color: var(--color-foreground);*/
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	position: relative;
}

/* Push only the register button to the right */
.navbar-links:last-child {
	margin-left: auto;
}

.navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
}

/* Logo */
.navbar-title {
  grid-column: 1;
}

/* Main nav links */
.navbar-main {
  grid-column: 2;
}

.navbar-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

/* CTA button column */
.navbar-cta {
  grid-column: 3;
  justify-self:auto;
  
}
/* Default: show on desktop */
.navbar-cta {
  display: block;
}

/* Hide on mobile */
@media (max-width: 768px) {
  .navbar-cta {
    display: none;
  }
}

/* Button styling */
.nav-register-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}


.skills-challenge {
	display: block;
}

.icon-livestream {
	padding-right: 5px;
	/* Give enough space for the icon */
	margin-left: -20px;
}

@media screen and (max-width: 767px) {

	/* Styles for devices with a viewport width of 980px or less */
	.skills-challenge {
		display: none;
		/* Adjust the margin as needed */
	}
	.nav-register-btn {
		display: none;
	}
}

.navbar-links a:hover,
.navbar-links a:focus-visible {
	color: #0067b8;
	text-decoration: none;
}

.navbar-links a:hover::after,
.navbar-links a:focus-visible::after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	height: 6px;
	width: 75%;
	border-radius: 4px;
	/*background: var(--color-primary-gradient);*/
}

.navbar-links a:focus-visible {
	outline: none;
}

.navbar-menu-icon-btn {
	background: transparent;
	border: solid 2px transparent;
	border-radius: var(--dotnet-btn-corner-radius);
	width: fit-content;
	padding: 4px;
	display: none;
}

.navbar-menu-icon-btn:hover {
	cursor: pointer;
}

.navbar-menu-icon-btn:focus-visible {
	outline: solid var(--dotnet-btn-focus-outline-width) var(--color-dotnet-btn-focus-outline);
	outline-offset: var(--dotnet-btn-focus-outline-offset);
}

.navbar-menu-icon-btn>svg {
	margin: 0;
	width: 24px;
	height: auto;
}

.navbar-menu-icon-btn>svg path {
	fill: var(--color-navbar-menu-icon-fill);
}

/* Style the dropdown container */
.navbar-link.dropdown {
	position: relative;
	display: inline-block;
	z-index: 1000 !important;
}

/* Remove default list styling and padding */
.dropdown-content li {
	padding: 0;
	list-style-type: none;
	margin-left: 0px;
	margin-right: 40px;
}

/* Hide the dropdown content by default */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #000;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	white-space: nowrap;
}

/* Style the dropdown links */
.dropdown-content a {
	color: #fff;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Show the dropdown menu on hover */
.navbar-link.dropdown:hover .dropdown-content {
	display: block;
}

/* Add some color to the dropdown links on hover */
.dropdown-content a:hover {
	/*background-color: #ddd;*/
}


/* Utility classes */
.hidden {
	display: none !important;
}

.fix-margins {
	margin-top: 20px;
	margin-bottom: 0px;
}

/* Font styles */
.font-display-1 {
	font-size: 4.875rem;
	font-family: var(--title-font-family);
	font-weight: 700;
	font-style: normal;
	line-height: 6.25rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

.font-display-2 {
	font-size: 4.25rem;
	font-family: var(--title-font-family);
	font-weight: 700;
	font-style: normal;
	line-height: 4.625rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

h1,
.font-large-title {
	font-size: 2.5rem;
	font-family: var(--title-font-family);
	font-weight: 700;
	font-style: normal;
	line-height: 3.25rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

h2,
.font-title-1 {
	font-size: 2rem;
	font-family: var(--title-font-family);
	font-weight: 700;
	font-style: normal;
	line-height: 2.75rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

h3,
.font-title-2 {
	font-size: 1.75rem;
	font-family: var(--title-font-family);
	font-weight: 700;
	font-style: normal;
	line-height: 2.5rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

h4,
.font-title-3 {
	font-size: 1.5rem;
	font-family: var(--title-font-family);
	font-weight: 700;
	font-style: normal;
	line-height: 2.25rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

.font-title-4 {
	font-size: 2.5rem;
	font-family: var(--title-font-family);
	font-weight: 700;
	font-style: normal;
	line-height: 2.25rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
	margin-top: 20px;
	margin-bottom: 20px;
}

.font-title-5 {
	font-size: 1.5rem;
	font-family: var(--title-font-family);
	font-weight: 700;
	font-style: normal;
	line-height: 2.25rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
	margin-top: 20px;
	margin-bottom: 20px;
}

h5,
.font-subtitle-1 {
	font-size: 1.25rem;
	font-family: var(--base-font-family);
	font-weight: 600;
	font-style: normal;
	line-height: 1.875rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

h6,
.font-subtitle-2 {
	font-size: 1.125rem;
	font-family: var(--base-font-family);
	font-weight: 400;
	font-style: normal;
	line-height: 1.688rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

.font-subtitle-3 {
	font-size: 1.125rem;
	font-family: var(--base-font-family);
	font-weight: 400;
	font-style: normal;
	line-height: 1.688rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

.font-hero-subtitle {
	font-size: 1.75rem;
	font-family: var(--base-font-family);
	font-weight: 600;
	font-style: normal;
	line-height: 2.625rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

.font-title-2-underline {
	font-size: 2rem;
	font-family: var(--title-font-family);
	font-weight: 700;
	font-style: normal;
	line-height: 2.5rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
}

.card-title {
	font-size: 1.25rem;
	font-family: var(--base-font-family);
	font-weight: 600;
	font-style: normal;
	line-height: 1.75rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
	color: #0078d4;
}

.card-content-description {
	display: flex;
	font-size: 1.15rem;
	flex-direction: column;
	flex: 1;
	/* Ensures content uses the available space in flex direction */
	font-family: var(--base-font-family);
	font-weight: 400;
	font-style: normal;
	line-height: 1.6rem;
	text-decoration: none;
	text-transform: none;
	color: var(--color-title-font);
	flex: 1;
	/* Allows the description to expand */
	margin-bottom: 20px;
	/* Space at the bottom of the description */
}

.agenda-container>div,
.local-events-container>div {
	margin-bottom: 36px;
}

.conference-at-a-glance>p {
	color: var(--color-agenda-summaries);
}

.conference-at-a-glance>p:last-child {
	margin-top: 16px;
}


.agenda-group-title,
.local-events-group-title {
	grid-column: span 3;
	background: var(--color-primary-gradient);
	background-clip: text;
	-webkit-background: var(--color-primary-gradient-webkit);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/*display: none;*/
}

.agenda-group-gradient-line,
.local-events-group-gradient-line {
	grid-column: 4 / span 1;
	width: 8px;
	height: 100%;
	border-radius: var(--corner-radius-xs);
	background: var(--color-primary-gradient);
	/*display: none;*/
}

.agenda-group-sessions-container,
.local-events-group-sessions-container {
	grid-column: 5 / span 7;
	/* grid-column: 1 / span 7;  */
}

.agenda-session,
.local-events-session {
	margin-bottom: 32px;
}

.agenda-session:last-child,
.local-events-session:last-child {
	margin-bottom: 0px;
}

.agenda-time,
.local-events-time {
	color: var(--color-agenda-time);
}

.local-events-date {
	color: var(--color-local-events-date);
}

.agenda-speaker-name {
	color: var(--color-agenda-speaker);
	margin-bottom: 4px;
}

.grid {
	display: grid;
	grid-template-columns: var(--grid-template-desktop);
	gap: var(--grid-gap-desktop);
	row-gap: var(--vertical-gap-desktop);
}

.vertical-gap {
	margin-bottom: var(--vertical-gap-desktop);
}


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

.text-center-agenda {
	text-align: center;
}

.gradient-text {
	background: var(--color-primary-gradient);
	background-clip: text;
	-webkit-background: var(--color-primary-gradient-webkit);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.jdconf-speaker-card {
	display: flex;
	flex-flow: column nowrap;
	color: var(--jdconf-speaker-card-foreground);
	background-color: var(--jdconf-speaker-card-background);
	padding: 20px;
	border-style: solid;
	border-width: 2px;
	border-radius: var(--corner-radius-lg);
	grid-column: span 3;
	text-decoration: none;
	box-shadow: var(--jdconf-speaker-card-box-shadow);
	transition: box-shadow 200ms ease-out;
}

.jdconf-speaker-card:hover {
	box-shadow: var(--jdconf-speaker-card-box-shadow-hover);
	text-decoration: none;
}

.jdconf-speaker-card:nth-child(5n+1) {
	border-color: var(--color-brand-purple-primary);
}

.jdconf-speaker-card:nth-child(5n+2) {
	border-color: var(--color-magenta-primary);
}

.jdconf-speaker-card:nth-child(5n+3) {
	border-color: var(--color-flamingo-primary);
}

.jdconf-speaker-card:nth-child(5n+4) {
	border-color: var(--color-brand-purple-primary);
}

.jdconf-speaker-card:nth-child(5n+5) {
	border-color: var(--color-blue-primary);
}

.jdconf-speaker-card .jdconf-speaker-card-image {
	margin: 0 auto 16px auto;
	width: 164px;
	height: 164px;
	border-radius: 100%;
	background: var(--color-primary-gradient);
}

.jdconf-speaker-card .jdconf-speaker-card-name {
	background: var(--color-primary-gradient);
	background-clip: text;
	-webkit-background: var(--color-primary-gradient-webkit);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.jdconf-speaker-card .jdconf-speaker-card-pronouns {
	color: var(--jdconf-speaker-card-foreground);
	margin-bottom: 16px;
}

.jdconf-speaker-card .jdconf-speaker-card-company-name {
	color: var(--jdconf-speaker-card-foreground);
	margin-bottom: 16px;
}

.jdconf-speaker-card .jdconf-speaker-card-socials {
	color: var(--jdconf-speaker-card-foreground);
	word-break: break-all;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 Aspect Ratio */
	padding-top: 25px;
	height: 0;
}

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

/* Video stream container */
.video-stream-container {
	flex: 3;
	/* 3/4 of the space */
	position: relative;
	height: 75vh;
	/* Adjust based on viewport height */
}

/* Chat container */
.chat-container {
	flex: 1;
	/* 1/4 of the space */
	position: relative;
	height: 75vh;
	/* Keep consistent with video container */
}

.video-stream-container iframe,
.chat-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Mobile styles */
@media screen and (max-width: 767px) {
	.skills-challenge {
		display: block;
	}
}

@media screen and (max-width: 767px) {
	.font-display-1 {
		font-size: 3rem;
		font-family: var(--title-font-family);
		font-weight: 700;
		font-style: normal;
		line-height: 3.625rem;
		text-decoration: none;
		text-transform: none;
	}

	.font-display-2 {
		font-size: 2.25rem;
		font-family: var(--title-font-family);
		font-weight: 700;
		font-style: normal;
		line-height: 3rem;
		text-decoration: none;
		text-transform: none;
	}

	h1,
	.font-large-title {
		font-size: 1.75rem;
		font-family: var(--title-font-family);
		font-weight: 700;
		font-style: normal;
		line-height: 2.5rem;
		text-decoration: none;
		text-transform: none;
	}

	h2,
	.font-title-1 {
		font-size: 1.625rem;
		font-family: var(--title-font-family);
		font-weight: 700;
		font-style: normal;
		line-height: 2.438rem;
		text-decoration: none;
		text-transform: none;
	}

	h3 .font-title-2 {
		font-size: 1.5rem;
		font-family: var(--title-font-family);
		font-weight: 700;
		font-style: normal;
		line-height: 2.25rem;
		text-decoration: none;
		text-transform: none;
	}

	.font-title-2-underline {
		font-size: 1.625rem;
		font-family: var(--title-font-family);
		font-weight: 700;
		font-style: normal;
		line-height: 2.25rem;
		text-decoration: none;
		text-transform: none;
	}

	h4,
	.font-title-3 {
		font-size: 1.25rem;
		font-family: var(--title-font-family);
		font-weight: 700;
		font-style: normal;
		line-height: 1.875rem;
		text-decoration: none;
		text-transform: none;
	}

	.font-title-4 {
		font-size: 1.75rem;
		font-family: var(--title-font-family);
		font-weight: 700;
		font-style: normal;
		line-height: 1.875rem;
		text-decoration: none;
		text-transform: none;
	}

	.font-title-5 {
		font-size: 1.25rem;
		font-family: var(--title-font-family);
		font-weight: 700;
		font-style: normal;
		line-height: 2.25rem;
		text-decoration: none;
		text-transform: none;
		color: var(--color-title-font);
	}

	h5,
	.font-subtitle-1 {
		font-size: 1.125rem;
		font-family: var(--base-font-family);
		font-weight: 600;
		font-style: normal;
		line-height: 1.688rem;
		text-decoration: none;
		text-transform: none;
	}

	h6,
	.font-subtitle-2 {
		font-size: 1.062rem;
		font-family: var(--base-font-family);
		font-weight: 400;
		font-style: normal;
		line-height: 1.594rem;
		text-decoration: none;
		text-transform: none;
	}

	.font-subtitle-2-stronger {
		font-size: 1.062rem;
		font-family: var(--base-font-family);
		font-weight: 700;
		font-style: normal;
		line-height: 25.5px;
		text-decoration: none;
		text-transform: none;
	}

	.font-subtitle-3 {
		font-size: 1.062rem;
		font-family: var(--base-font-family);
		font-weight: 400;
		font-style: normal;
		line-height: 1.594rem;
		text-decoration: none;
		text-transform: none;
	}

	.font-hero-subtitle {
		font-size: 1.5rem;
		font-family: var(--base-font-family);
		font-weight: 600;
		font-style: normal;
		line-height: 2.25rem;
		text-decoration: none;
		text-transform: none;
		color: var(--color-title-font);
	}

	.card-title {
		font-size: 1.25rem;
		font-family: var(--base-font-family);
		font-weight: 600;
		font-style: normal;
		line-height: 1.75rem;
		text-decoration: none;
		text-transform: none;
		color: var(--color-title-font);
		color: #0078d4;
	}

	.card-content-description {
		display: flex;
		font-size: 1.062rem;
		flex-direction: column;
		flex: 1;
		/* Ensures content uses the available space in flex direction */
		font-family: var(--base-font-family);
		font-weight: 400;
		font-style: normal;
		line-height: 1.594rem;
		text-decoration: none;
		text-transform: none;
		color: var(--color-title-font);
		flex: 1;
		/* Allows the description to expand */
		margin-bottom: 20px;
		/* Space at the bottom of the description */
	}

	header,
	main,
	footer {
		/*padding-left: var(--content-width-padding-mobile);
		padding-right: var(--content-width-padding-mobile);*/
	}

	footer {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	footer a {
		margin-bottom: 32px;
	}

	footer a,
	footer span {
		margin-left: 0px;
	}

	.navbar-title {
		grid-column: span 5;
		font-size: 1.5rem;
	}

	.navbar li {
		margin: 0 0 0 10px;
	}

	.navbar-menu-icon-btn {
		display: block;
		grid-column: 6 / span 1;
		justify-self: end;
	}

	.navbar>nav {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 60px;
		width: 100%;
		z-index: 999;
	}

	.navbar-links {
		color: var(--color-jdconf-menu-popover-foreground);
		background-color: var(--color-jdconf-menu-popover-background);
		border: solid var(--jdconf-btn-border-width) var(--color-jdconf-menu-popover-background);
		border-radius: var(--corner-radius-xs);
		margin-left: var(--content-width-padding-mobile);
		margin-right: var(--content-width-padding-mobile);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
		padding: 4px 6px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.navbar-links>li {
		margin: 0;
		width: 100%;
	}

	.navbar-link:last-child {
		padding-left: auto;
		/* Adjust the margin as needed */
	}

	.navbar-links>li a {
		display: block;
		width: 95%;
		line-height: 1rem;
		color: var(--color-jdconf-menu-popover-foreground);
		background-color: var(--color-jdconf-menu-popover-background);
		text-decoration: none;
		font-size: 0.875rem;
		padding: 8px 10px;
		border-radius: var(--corner-radius-xs);
		border-radius: 0;
	}

	.navbar-links>li a:hover {
		color: var(--color-jdconf-menu-popover-foreground-hover);
		background-color: var(--color-jdconf-menu-popover-background-hover);
		text-decoration: none;
		line-height: 1rem;
	}

	.navbar-links>li a:active {
		color: var(--color-jdconf-menu-popover-foreground-active);
		background-color: var(--color-jdconf-menu-popover-background-active);
		text-decoration: none;
		line-height: 1rem;
	}

	.navbar-links>li a:focus-visible {
		background-color: var(--color-jdconf-menu-popover-background);
		outline: solid 2px var(--color-jdconf-menu-popover-focus-border);
	}

	.navbar a:hover::after,
	.navbar a:focus-visible::after {
		height: 0;
		background: transparent;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: var(--color-jdconf-menu-popover-background);
		min-width: 160px;
		z-index: 1;
		white-space: nowrap;
		box-shadow: 0;
		border-radius: 0;
		border-radius: var(--corner-radius-xs);
	}

	/* Remove default list styling and padding */
	.dropdown-content li {
		padding: 0;
		list-style-type: none;
		margin-left: 0px;
		border-radius: 0;
		box-shadow: 0;
		border-radius: 0;
		border-radius: var(--corner-radius-xs);
		background-color: transparent;
	}

	/* Add some color to the dropdown links on hover */
	.dropdown-content a:hover {
		background-color: transparent;
	}

	.dropdown-content>li a:focus-visible {
		background-color: transparent;
	}

	.dropdown-content>li a:active {
		color: var(--color-jdconf-menu-popover-foreground-active);
		background-color: transparent;
		text-decoration: none;
		line-height: 1rem;
	}

	.grid {
		display: grid;
		grid-template-columns: var(--grid-template-mobile);
		gap: var(--grid-gap-mobile);
		row-gap: var(--vertical-gap-mobile);
	}

	.vertical-gap {
		margin-bottom: var(--vertical-gap-mobile);
	}

	.bg-gradient-ellipse:nth-child(1) {
		left: -44%;
		top: -2%;
		transform: rotate(20deg);
	}

	.bg-gradient-ellipse:nth-child(2) {
		left: 20%;
		top: -2%;
		transform: rotate(33deg);
	}

	.bg-gradient-ellipse:nth-child(3) {
		left: -15%;
		top: 25%;
		transform: scale(2);
	}

	.bg-gradient-ellipse:nth-child(4) {
		left: -5%;
		top: 55%;
		transform: rotate(33deg) scale(2);
	}

	.bg-gradient-ellipse:nth-child(5) {
		left: 30%;
		top: 85%;
		transform: scale(2.5);
	}

	#cookie-consent {
		width: calc(100% - (2 * var(--content-width-padding-mobile)));
		flex-direction: column;
		padding: 24px;
	}

	#cookie-consent>p {
		width: 100%;
		margin-right: 0px;
	}

	#cookie-consent .jdconf-solid-btn-accent {
		margin-left: 0px;
		margin-top: 24px;
	}

	.hero {
		padding: 0;
	}

	.hero-text {
		grid-column: 1 / span 6;
	}

	.hero-text h1 {
		margin-bottom: 0.5rem;
	}

	.hero-text h1.negative-margin {
		margin-left: 0;
	}

	.hero-ctas {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-ctas .jdconf-link-btn-neutral {
		margin-top: 1rem;
	}

	.hero-image-drone,
	.hero-image-bot,
	.hero-image-box {
		display: none;
	}

	.post-event-card {
		height: 134px;
	}

	.post-event-card .post-event-card-logo {
		margin-bottom: 0;
		width: 140px;
	}

	.post-event-card>p:last-child {
		display: none;
	}

	.featured-speaker-card {
		grid-column: span 6;
	}

	.conference-day-description {
		grid-column: span 6;
		margin-bottom: 32px;
	}

	#biggest-jdconf-virtual-event h2,
	#what-to-expect h2,
	.text-swimlane h2 {
		grid-column: span 6;
	}

	#biggest-jdconf-virtual-event p,
	#what-to-expect p,
	.text-swimlane>p,
	.text-swimlane>div {
		grid-column: span 6;
	}

	#stay-connected {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	#stay-connected>section {
		margin-right: 0px;
		/*margin-bottom: 32px;*/
	}

	.jdconf-content-region {
		padding: 24px;
		gap: var(--grid-gap-mobile);
	}

	.local-event-content-region>h2 {
		grid-column: 1 / span 6;
		margin-bottom: 20px;
	}

	.local-event-content-region>div {
		grid-column: 1 / span 6;
	}

	.jdconf-speaker-card {
		grid-column: span 6;
	}

	.agenda-group-title,
	.local-events-group-title {
		grid-column: span 6;
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.agenda-group-gradient-line,
	.local-events-group-gradient-line {
		grid-column: span 6;
		width: 100%;
		height: 4px;
	}

	.agenda-session,
	.local-events-session {
		margin-bottom: 10px;
	}

	.agenda-group-sessions-container,
	.local-events-group-sessions-container {
		grid-column: span 6;
	}

	.name-container {
		flex-flow: column nowrap;
		align-items: flex-start;
		justify-content: center;
		gap: 0;
	}

	.text-center-agenda {
		text-align: left;
	}
}

/* Container holding the grid */
.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 20px;
	/* Adjust the space between cards */
	padding: 20px, 0px;
	/* Space around the grid */
}

/* Container holding the grid */
.grid-container2 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
	gap: 20px;
	/* Adjust the space between cards */
	padding: 20px, 0px;
	/* Space around the grid */
}

/* Container holding the grid */
.grid-container3 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(900px, 1fr));
	gap: 20px;
	/* Adjust the space between cards */
	padding: 20px, 0px;
	/* Space around the grid */
}

/* Container holding the grid */
.grid-container4 {
	display: grid;
	gap: 20px;
	/* Adjust the space between cards */
	padding: 20px, 0px;
	/* Space around the grid */
}

.grid-container4-live {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(900px, 1fr));
	gap: 20px;
	padding: 20px 0;
	/* Corrected padding syntax */
}

/* Grid item */
.grid-item {
	display: flex;
	justify-content: center;
}

.grid-item img {
	width: 100%;
	height: auto;

	border-radius: 8px;
	margin-bottom: 10px;
}

/* Card styling */
.card {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* Makes sure the card uses the full width of the grid column */
	overflow: hidden;
	/* Keeps the content within the borders */
	border: 1px solid var(--color-neutrals-additionals-grey-80);
	/* Border color for the card */
	border-radius: 8px;
	/* Rounded corners for the card */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	/* Simple shadow for depth */
	transition: transform 0.2s;
	/* Smooth transition for hover effect */
	/* Transparent border */
	border: 1.5px solid transparent;

	/* Two layered backgrounds */
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		linear-gradient(90deg, #0178D4 0%, #4B3DEB 23%, #A554F6 100%) border-box;

	transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.card:hover {
	/*transform: translateY(-5px);*/
	/* Slight raise effect on hover */
}

.card-content {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	/* Ensures content uses the available space in flex direction */
}

.card-title:hover {
	text-decoration: underline;
	/* Adds underline on hover for better usability */
}

.card-content-description {
	flex: 1;
	/* Allows the description to expand */
	margin-bottom: 20px;
	padding-top: 10px;
	/* Space at the bottom of the description */
}

.card-content-live {
	display: flex;
	flex-direction: column;
	gap: 0px;

	/* Ensure card content fills the card */
}

.card-live {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* Makes sure the card uses the full width of the grid column */
	overflow: hidden;
	/* Keeps the content within the borders */
	border: 1px solid var(--color-neutrals-additionals-grey-80);
	/* Border color for the card */
	border-radius: 8px;
	/* Rounded corners for the card */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	/* Simple shadow for depth */
	transition: transform 0.2s;
	/* Smooth transition for hover effect */
	/* Adjust the card height */
}

/* Responsive adjustments */
@media (max-width: 600px) {
	.grid-container {
		grid-template-columns: 1fr;
		/* Stacks the cards on smaller screens */
	}
}

.chat-container-mobile {
	display: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
	.grid-container2 {
		grid-template-columns: 1fr;
		/* Stacks the cards on smaller screens */
	}

	/* Responsive adjustments */
	@media (max-width: 600px) {
		.grid-container4-live {
			grid-template-columns: 1fr;
			/* Stacks the cards on smaller screens */
		}

		.card-content-live {
			display: flex;
			flex-direction: column;
			gap: 0px;
			height: 100%;
			/* Ensure card content fills the card */
		}

		.chat-container {
			display: none;
		}

		.chat-container-mobile {
			display: block !important;
			/* Keeps the content within the borders */
			border: 1px solid var(--color-neutrals-additionals-grey-80);
			/* Border color for the card */
			border-radius: 8px;
			/* Rounded corners for the card */
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			/* Simple shadow for depth */
			transition: transform 0.2s;
			margin-top: -40px;
		}

		.card-live {
			display: flex;
			flex-direction: column;
			width: 100%;
			/* Makes sure the card uses the full width of the grid column */
			overflow: hidden;
			/* Keeps the content within the borders */
			border: 1px solid var(--color-neutrals-additionals-grey-80);
			/* Border color for the card */
			border-radius: 8px;
			/* Rounded corners for the card */
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			/* Simple shadow for depth */
			transition: transform 0.2s;
			/* Smooth transition for hover effect */
			height: 30vh;
			/* Adjust the card height */
		}

	}
}


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

.timeline-container {
	max-width: 600px;
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

h2 {
	color: #333;
	font-size: 1.8rem;
	margin-bottom: 30px;
}

.timeline {
	position: relative;
	padding: 20px 0;
	border-left: 3px solid #0078d4;
	/* Consistent thickness */
}

.timeline-item {
	position: relative;
	margin-bottom: 30px;
	padding-left: 60px;
	/* Space for diamond alignment */
}

.timeline-item::before {
	content: "";
	position: absolute;
	left: -13px;
	/* Centered diamond on the vertical line */
	top: 0;
	width: 18px;
	height: 18px;
	background-color: #0078d4;
	transform: rotate(45deg);
	/* Diamond shape */
	z-index: 1;
	border: 3px solid #f9f9f9;
	/* White border for cleaner look */
	margin-top: 20px;
}

.timeline-item:last-child::after {
	display: none;
}

.timeline-content {
	background-color: white;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-top: 10px;
	transition: transform 0.3s ease;
}

.timeline-content-active {
	background-color: var(--color-blue-tint-10);
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-top: 10px;
	transition: transform 0.3s ease;
}

.timeline-item:hover .timeline-content {
	transform: translateY(-5px);
	/* Lift effect on hover */
	box-shadow: 0 8px 15px rgba(0, 120, 212, 0.2);
}

.timeline-content h3 {
	font-size: 1.2rem;
	color: #0078d4;
	margin-bottom: 5px;
}

.timeline-content p {
	color: #666;
	font-size: 0.9rem;
}

.timeline-item:hover .timeline-content-active {
	transform: translateY(-5px);
	/* Lift effect on hover */
	box-shadow: 0 8px 15px rgba(236, 238, 234, 0.89);
}

.timeline-content-active h3 {
	font-size: 1.2rem;
	color: white;
	margin-bottom: 5px;
}

.timeline-content-active p {
	color: white;
	font-size: 0.9rem;
}


.hero-placeholder {
	background: rgba(255, 255, 255, 0.1);
	padding: 60px 20px;
	text-align: center;
	border-radius: 12px;
	margin-bottom: 80px;
	backdrop-filter: blur(10px);
}

.hero-placeholder h1 {
	color: white;
	font-size: 48px;
	margin-bottom: 20px;
}

.hero-placeholder p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 20px;
}

.content-section {
	max-width: 1200px;
	margin: 0 auto;
	background: white;
	border-radius: 24px;
	padding: 80px 60px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	position: relative;
	overflow: hidden;
}

.content-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, #667eea 0%, #2995dd 50%, #f093fb 100%);
}

.section-badge {
	display: inline-block;
	background: linear-gradient(135deg, #667eea 0%, #2995dd 100%);
	color: white;
	padding: 8px 24px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 24px;
}

.main-heading {
	font-size: 42px;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 24px;
	line-height: 1.2;
	background: linear-gradient(135deg, #667eea 0%, #2995dd 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.intro-text {
	font-size: 20px;
	/*color: #4a5568;*/
	line-height: 1.8;
	margin-bottom: 48px;
	text-align: center;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
	margin-bottom: 48px;
}

.feature-card {
	background: linear-gradient(135deg, #f6f8fb 0%, #ffffff 100%);
	padding: 32px;
	border-radius: 16px;
	border: 1px solid #e2e8f0;
	transition: all 0.3s ease;
	position: relative;
}

.feature-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
	border-color: #667eea;
}

.feature-icon {
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, #667eea 0%, #2995dd 100%);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 20px;
	box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.feature-title {
	font-size: 22px;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 12px;
}

.feature-description {
	font-size: 16px;
	/*color: #64748b;*/
	line-height: 1.6;
}

.stats-section {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 32px;
	padding: 48px 0;
	margin: 48px 0;
	border-top: 2px solid #e2e8f0;
	border-bottom: 2px solid #e2e8f0;
}

.stat-item {
	text-align: center;
	min-width: 200px;
}

.stat-number {
	font-size: 48px;
	font-weight: 800;
	background: linear-gradient(135deg, #667eea 0%, #2995dd 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: block;
	margin-bottom: 8px;
}

.stat-label {
	font-size: 16px;
	color: #64748b;
	font-weight: 500;
}

.cta-section {
	text-align: center;
	margin-top: 56px;
	padding: 48px 32px;
	background: linear-gradient(135deg, #667eea 0%, #2995dd 100%);
	border-radius: 16px;
	color: white;
}

.cta-heading {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 16px;
}

.cta-text {
	font-size: 18px;
	margin-bottom: 32px;
	opacity: 0.95;
}

.cta-button {
	display: inline-block;
	background: white;
	color: #667eea;
	padding: 16px 48px;
	border-radius: 50px;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
	.content-section {
		padding: 48px 32px;
	}

	.main-heading {
		font-size: 32px;
	}

	.intro-text {
		font-size: 18px;
	}

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

	.stat-number {
		font-size: 36px;
	}
}

.info-cards-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-bottom: 80px;
}

.info-card {
	background: #f6f8fb;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 32px;
	text-align: center;
	/* NO hover effects - purely informational */
}

.info-card-icon {
	width: 64px;
	height: 64px;
	background: linear-gradient(135deg, #667eea 0%, #2995dd 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	margin: 0 auto 20px;
	/* NO shadow or animation */
}

.info-card-title {
	font-size: 20px;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 12px;
}

.info-card-description {
	font-size: 16px;
	/*color: #64748b;*/
	line-height: 1.6;
}

.cta-section {
	text-align: center;
	margin-top: 56px;
	padding: 30px 32px;
	background: linear-gradient(135deg, #667eea 0%, #2995dd 100%);
	border-radius: 16px;
	color: white;
}

.cta-heading {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 16px;
	color: white;
}

.cta-text {
	font-size: 18px;
	margin-bottom: 32px;
	opacity: 0.95;

}

/* Button Container */
.cta-buttons {
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

/* Base Button Styles */
.btn {
	display: inline-block;
	padding: 14px 32px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	border-radius: 4px;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: none;
	cursor: pointer;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Primary Button (Submit Proposal) */
.btn-primary {
	background-color: #5B8FF9;
	color: #ffffff;
}

.btn-primary:hover {
	background-color: #4178e0;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(91, 143, 249, 0.4);
}

/* RSVP Button - Purple Gradient */
.btn-rsvp {
	background: linear-gradient(135deg, #4526cc 0%, #A855F7 100%);
	color: #ffffff;
}

.btn-rsvp:hover {
	background: linear-gradient(135deg, #201dd1 0%, #9333EA 100%);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
	.cta-buttons {
		flex-direction: column;
		gap: 15px;
	}

	.btn {
		width: 100%;
		max-width: 300px;
	}
}


.cta-button {
	display: inline-block;
	background: white;
	color: #151718;
	padding: 16px 48px;
	border-radius: 50px;
	border-radius: 10px;
	font-size: 18px;
	font-weight: 650;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	text-transform: uppercase;
}



.stats-section {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;

	border-top: 2px solid #e2e8f0;
	border-bottom: 2px solid #e2e8f0;
}

.stat-item {
	text-align: center;
	min-width: 200px;
}

.stat-number {
	font-size: 50px;
	font-weight: 800;
	background: linear-gradient(135deg, #667eea 0%, #2995dd 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: block;
	margin-bottom: 8px;
}

.stat-number {
	font-size: 48px;
	font-weight: 800;
	background: linear-gradient(135deg, #667eea 0%, #2995dd 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: block;
	margin-bottom: 8px;
	line-height: 1.2;
	/* Changed from 1 to 1.2 */
	padding: 4px 0;
	/* Add some breathing room */
}

.stat-label {
	font-size: 16px;
	color: #151718;
	font-weight: 500;
}

/* Hide break on desktop */
.mobile-break {
	display: none;
}

/* Show break only on mobile devices */
@media (max-width: 768px) {
	.mobile-break {
		display: block;
	}
}

/* ============================================
   JDConf 2026 Redesign Styles
   ============================================ */

/* --- Navbar Updates --- */
.navbar {
	background: #0e1017;
}

.navbar-title {
	display: flex;
	align-items: center;
	gap: 10px;
	-webkit-text-fill-color: #fff;
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
}

.microsoft-logo {
	flex-shrink: 0;
}

.nav-register-btn {
	background: transparent;
	border: 1.5px solid rgba(90, 130, 255, 0.5);
	padding: 8px 24px !important;
	border-radius: 4px;
	color: #fff !important;
	font-weight: 600;
	transition: all 0.2s ease;
}

.nav-register-btn {
	background: #ffffff;
	color: #7C3AED !important;
	/* purple text */
	border: none;
	padding: 10px 20px !important;
	border-radius: 10px;
	/* softer corners */
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
}

.nav-register-btn:hover {
	background: #f8f7ff;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	text-decoration: none !important;
}


.nav-register-btn:hover {
	background: rgba(90, 130, 255, 0.15);
	border-color: rgba(90, 130, 255, 0.8);
	text-decoration: none !important;
}

/* --- Hero Section --- */
.hero-section {
	background: #09202E;

	/*padding: 60px 40px 80px;*/
	text-align: center;
	position: relative;
	overflow: hidden;
	background-image: url("../images/banners/JDConf2026-landscape-image2.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 120px 20px;
	color: #ffffff;
}

.hero-section {
	padding: 80px 40px 80px;
	/* adjust as needed */
	background-image: url("../images/banners/JDConf2026-landscape-image2.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 900px;
	height: 900px;
	background: radial-gradient(ellipse, rgba(30, 50, 120, 0.12) 0%, transparent 55%);
	pointer-events: none;
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
}

.hero-ms-logo {
	margin-bottom: 32px;
}

.hero-title {
	color: #ffffff;
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 0px;
	font-family: var(--title-font-family);
	background: var(--Gradient-2, linear-gradient(90deg, #8DC8E8 7.32%, #A554F6 93.07%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-subtitle {
	color: #ffffff;
	font-size: 1.8rem;
	font-weight: 400;
	margin-bottom: 36px;
	/*background: var(--Gradient-2, linear-gradient(90deg, #8DC8E8 7.32%, #A554F6 93.07%));*/
}

.hero-desc {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.9rem;
	font-weight: 400;
	margin-bottom: 10px;
	color: #FFF;
	text-align: center;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.hero-date {
	font-size: 2.75rem;
	font-weight: 700;
	background: linear-gradient(90deg, #4a90d9 0%, #6c8fef 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 10px;
	line-height: 1.2;
	background: var(--Gradient-2, linear-gradient(90deg, #8DC8E8 7.32%, #A554F6 93.07%));
	background: var(--Gradient-2, linear-gradient(90deg, #8DC8E8 7.32%, #A554F6 93.07%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-regions {
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.8rem;
	font-weight: 400;
	margin-bottom: 44px;
	letter-spacing: 0.5px;
}

.hero-cta-btn {
	display: inline-block;
	background: linear-gradient(135deg, #2855c3 0%, #4a3fbf 100%);
	color: #fff;
	padding: 14px 20px;
	border-radius: 4px;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: none;
	border-radius: 11.279px;
	background: var(--Gradient, linear-gradient(90deg, #0178D4 0%, #4B3DEB 22.97%, #A554F6 100%));
}

.hero-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(40, 85, 195, 0.4);
	color: #fff;
	text-decoration: none;
}

@media (max-width: 768px) {
	.hero-section {
		padding: 80px 20px 200px;
		background-image: url("../images/banners/JDConf2026-portrait-image2.png");
		width: 100%;
		height: auto;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.hero-title {
		padding-top: 30px;
	}

	.hero-subtitle {}

	.hero-date {}

	.hero-cta-btn {
		font-size: 0.85rem;
	}

	.hero-desc {
		font-size: 16px;
		display: none;
	}
}

/* --- Stats Section (New) --- */
.stats-section-new {
	display: flex;
	justify-content: center;
	gap: 60px;
	flex-wrap: wrap;
	padding: 60px 0px;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	/* instead of center */
	flex-wrap: wrap;
	/*padding: 60px 80px;*/
	/* add horizontal breathing room */
	width: 100%;
	/* full width */
	max-width: none;
	/* remove 1200px constraint */
	max-width: 1200px;
}

.stat-item-new {
	text-align: center;
	min-width: 140px;
}

.stat-number-new {
	font-size: 3rem;
	font-weight: 800;
	background: linear-gradient(135deg, #3a7bd5 0%, #6b5ce7 100%);
	background: var(--Gradient, linear-gradient(90deg, #0178D4 0%, #4B3DEB 22.97%, #A554F6 100%));

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: block;
	line-height: 1.2;
	margin-bottom: 8px;


	background: linear-gradient(90deg, #2F80ED 0%, #8B5CF6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;

	font-size: 64px;
	font-weight: 700;
	line-height: 1.1;

	background: linear-gradient(90deg, #2F80ED 0%, #8B5CF6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;


}

.stat-label-new {
	font-size: 0.95rem;
	font-weight: 500;
}

@media (max-width: 768px) {
	.stats-section-new {
		gap: 30px;
		padding: 40px 20px;
	}

	.stat-number-new {
		font-size: 2.25rem;
	}
}


.section-title {
	font-size: 2rem;
	font-weight: 700;
	color: #151718;
	text-align: center;
	margin-bottom: 16px;
	font-family: var(--title-font-family);

}

.section-title {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 40px;
	font-family: var(--title-font-family);

	background: linear-gradient(90deg,
			#4F00A4 0%,
			#000000 100%);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.section-title-learning-resources {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 16px;
	font-family: var(--title-font-family);

	background: linear-gradient(90deg,
			#4F00A4 0%,
			#000000 100%);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.section-subtitle {
	font-size: 1.3rem;
	color: #64748b;
	text-align: center;
	max-width: 700px;
	margin: 0 auto 40px;
	line-height: 1.7;
}

/* --- What to Expect --- */
.what-to-expect {
	/*padding: 60px 40px;*/
	max-width: 1200px;
	margin: 0 auto;

}

.what-to-expect {
	/*padding: 60px 80px;*/
	/*width: 100%;*/
	max-width: none;
	/* remove constraint */
	max-width: 1200px;
	padding-top: 60px;
}



.expect-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.expect-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 32px;
	transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.expect-card {
	position: relative;
	border-radius: 16px;
	padding: 32px;

	/* Transparent border */
	border: 1.5px solid transparent;

	/* Two layered backgrounds */
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		linear-gradient(90deg, #0178D4 0%, #4B3DEB 23%, #A554F6 100%) border-box;

	transition: box-shadow 0.3s ease, transform 0.2s ease;
}


.expect-card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
}

.expect-card-icon {
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, #f0f0ff 0%, #e8e0f7 100%);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.expect-card-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #151718;
	margin-bottom: 12px;
}

.expect-card-desc {
	font-size: 0.95rem;
	/*color: #64748b;*/
	line-height: 1.6;
	margin-bottom: 20px;
}

.expect-card-link {
	font-size: 0.95rem;
	font-weight: 600;
	color: #667eea;
	text-decoration: none;
}

.expect-card-link:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.what-to-expect {
		padding: 40px 0px;
	}

	.expect-cards {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* --- Find An Event In Your Region --- */
.region-events-section {
	padding: 60px 40px;
	/*max-width: 1200px;*/
	margin: 0 auto;
}

.region-events-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.region-event-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 0;
	border-bottom: 1px solid #e2e8f0;
}

.region-event-row:first-child {
	border-top: 1px solid #e2e8f0;
}

.region-event-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.region-event-name {
	font-size: 1.125rem;
	font-weight: 600;
	color: #151718;
}

.region-event-date {
	font-size: 0.95rem;
	color: #64748b;
}

.region-register-btn {

	display: inline-block;
	background: linear-gradient(135deg, #2855c3 0%, #4a3fbf 100%);
	color: #fff;
	padding: 14px 20px;
	border-radius: 4px;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: none;
	border-radius: 11.279px;
	background: var(--Gradient, linear-gradient(90deg, #0178D4 0%, #4B3DEB 22.97%, #A554F6 100%));
}

.region-register-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(40, 85, 195, 0.4);
	color: #fff;
	text-decoration: none;
}

@media (max-width: 768px) {
	.region-events-section {
		padding: 40px 20px;
	}

	.region-event-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 20px 0;
	}
}

/* --- Learning Resources Grid --- */
.learning-resources-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	text-align: left;
}

.lr-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	overflow: hidden;

	position: relative;
	border-radius: 16px;
	padding: 32px;

	/* Transparent border */
	border: 1.5px solid transparent;

	/* Two layered backgrounds */
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		linear-gradient(90deg, #0178D4 0%, #4B3DEB 23%, #A554F6 100%) border-box;

	transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.lr-card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
}

.lr-card-content {
	padding: 28px;
}

.lr-card-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #151718;
	margin-bottom: 12px;
}

.lr-card-desc {
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 16px;
}

.lr-card-link {
	font-size: 0.9rem;
	font-weight: 600;
	color: #667eea;
	text-decoration: none;
}

.lr-card-link:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.learning-resources-grid {
		grid-template-columns: 1fr;
	}

	.lr-card-content {
		padding: 0px;
	}
}



/* --- Stay Connected --- */
.stay-connected-wrapper {
	width: 100%;
	background-image: url("../images/background/stay-connected.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.stay-connected-section {
	padding: 60px 40px;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.stay-connected-section {
		padding: 20px 20px
	}
}


.stay-connected-section a {
	background: linear-gradient(90deg, #6D28D9, #8B5CF6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	text-decoration: none;
}


/* --- Footer (New) --- */
.footer-new {
	background: #1a1c2e;
	color: #fff;
	padding: 0px 40px 30px;
}

.footer-content {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-brand-text {
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
}

.footer-social-icons {
	display: flex;
	gap: 16px;
	align-items: center;
}

.footer-social {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s ease;
	display: flex;
	align-items: center;
}

.footer-social:hover {
	color: #fff;
}

.footer-legal {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
}

.footer-legal a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.footer-legal a:hover {
	color: #fff;
	text-decoration: underline;
}

.footer-divider {
	color: rgba(255, 255, 255, 0.3);
}

.footer-new {
	background: #000000;
	padding: 20px 24px 36px;
}

.footer-inner {
	max-width: 1200px;
	margin: 0 auto;

	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}

/* Brand */
.footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;

	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
}

/* Social Icons */
.footer-social-icons {
	display: flex;
	gap: 24px;
}

.footer-social-icons a {
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	opacity: 0.85;
}

.footer-social-icons a:hover {
	opacity: 1;
}

/* Legal */
.footer-legal {
	display: flex;
	gap: 10px;
	align-items: center;

	font-size: 14px;
	color: #cccccc;
}

.footer-legal a {
	color: #4EA3FF;
	text-decoration: none;
}

.footer-legal a:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.footer-new {
		padding: 30px 20px;
	}

	.footer-content {
		flex-direction: column;
		text-align: center;
	}
}


/* Header bar */
.navbar {
	position: sticky;
	top: 0;
	z-index: 1000;

	/* blue -> purple gradient like the screenshot */
	background: linear-gradient(90deg, #0B74D1 0%, #5A42E8 55%, #8B5CF6 100%);
}

/* Align items like the image (left brand, centered nav, right CTA) */
.navbar-inner {
	height: 64px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;

	padding: 0 28px;
}

/* Left: Microsoft brand */
.navbar-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: #fff;
	font-weight: 600;
	font-size: 22px;
	justify-self: start;
}

.microsoft-logo {
	flex: 0 0 auto;
}

.navbar-brand-text {
	line-height: 1;
}

/* Center nav */
.navbar-nav {
	justify-self: center;
}

.navbar-links {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 48px;
	/* spacing between "About JDConf" and "Past Events" */
	padding: 0;
	margin: 0;
}

.navbar-link a {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
}

.navbar-link a:hover {
	color: #ffffff;
}

/* Right CTA button (white pill) */
.nav-register-btn {
	justify-self: end;

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

	height: 40px;
	padding: 0 18px;
	border-radius: 10px;

	background: #ffffff;
	color: #7C3AED;
	/* purple text like screenshot */
	text-decoration: none;

	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.nav-register-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

/* Dropdown */
.dropdown {
	position: relative;
}

.dropdown-trigger {
	cursor: pointer;
}

.dropdown-content {
	display: none;
	position: absolute;
	top: 42px;
	left: 0;

	min-width: 180px;
	padding: 10px 0;
	margin: 0;

	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
	list-style: none;
}

.dropdown-content a {
	display: block;
	padding: 10px 14px;
	color: #111827;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.dropdown-content a:hover {
	background: #F3F4F6;
}

/* show dropdown on hover */
.dropdown:hover .dropdown-content {
	display: block;
}

/* Mobile menu button (hidden on desktop) */
.navbar-menu-icon-btn {
	display: none;
	justify-self: end;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
}

/* Responsive */
@media (max-width: 767px) {
	.navbar-inner {
		grid-template-columns: auto 1fr auto;
	}

	.navbar-nav {
		display: none;
		/* you can toggle via JS later */
	}

	.nav-register-btn {
		display: none;
		/* optional: keep or hide on mobile */
	}

	.navbar-menu-icon-btn {
		display: inline-flex;
	}
}

.dropdown {
	position: relative;
}

/* ensure the trigger is a block with padding so hover area is generous */
.dropdown>a {
	display: inline-flex;
	align-items: center;
	padding: 10px 8px;
}

/* menu positioning: no gap */
.dropdown-content {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	/* dropdown sits just below */
	left: 0;
	z-index: 2000;
}

/* keep it open when hovering parent OR hovering menu OR focusing inside */
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
	display: block;
}

/* OPTIONAL but highly effective: create a hover “bridge” so you don't lose hover */
.dropdown-content::before {
	content: "";
	position: absolute;
	top: -10px;
	/* extends hover area upward */
	left: 0;
	width: 100%;
	height: 10px;
}

.expect-wrapper {
	width: 100%;
	background-image: url("../images/background/what-to-expect-background.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	padding: 40px 24px 84px;
}

/* ===== Find An Event In Your Region ===== */
.region-events-section {
	width: 100%;
	padding: 72px 24px 84px;
	text-align: center;

	/* blue -> purple background like the screenshot */
	background: linear-gradient(90deg, #0178D4 0%, #4B3DEB 23%, #A554F6 100%);
}

/* Title + subtitle */
.region-title {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 40px;
	font-family: var(--title-font-family);
	color: #FFF
}

.region-subtitle {
	margin: 14px auto 44px;

	font-size: 22px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 500;
}

/* List wrapper to control max width */
.region-events-list {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	gap: 18px;
}

/* White pill rows */
.region-event-row {
	background: #ffffff;
	border-radius: 12px;
	padding: 18px 22px;

	display: grid;
	grid-template-columns: 450px 1fr auto;
	align-items: center;
	gap: 18px;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Left column (Region name) */
.region-col--left {
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	color: #111827;
}

/* Middle column (date/time) */
.region-col--middle {
	text-align: left;
}

.region-event-date {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
}

.region-event-time {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
}

/* Gradient button inside row */
.region-register-btn {

	display: inline-block;
	background: linear-gradient(135deg, #2855c3 0%, #4a3fbf 100%);
	color: #fff;
	padding: 14px 20px;
	border-radius: 4px;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: none;
	border-radius: 11.279px;
	background: var(--Gradient, linear-gradient(90deg, #0178D4 0%, #4B3DEB 22.97%, #A554F6 100%));
}

.region-register-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.03);
	text-decoration: none;
}

/* Responsive */
@media (max-width: 900px) {
	.region-title {
		font-size: 32px;
	}

	.region-subtitle {
		font-size: 18px;
	}

	.region-event-row {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.region-register-btn {
		width: fit-content;
		justify-self: start;
		margin-top: 8px;
	}
}

/* --- What to Expect --- */
.learning-resources-grid {
	padding: 20px 0px;
	padding-bottom: 60px;
	max-width: 1200px;
	margin: 0 auto;
}

.learning-resources-grid {
	/*padding: 60px 80px;*/
	/*width: 100%;*/
	max-width: 1200px;
	opacity: 0.95;
	/* remove constraint */
}

@media (max-width: 768px) {
	.learning-resources-grid {
		padding: 40px 0px;
	}
}


.learning-wrapper {
	width: 100%;
	background-image: url("../images/background/learning_resources.png");
	background-size: contain;
	background-position: right;
	background-repeat: no-repeat;
	background-color: #F5F5F5;
	padding: 40px 24px 84px;
}

@media (max-width: 768px) {
	.learning-wrapper {
		padding: 40px 24px 0px
	}
}

.missed-jdconf-section {
	width: 100%;
	padding: 80px 0;

	background-image: url("../images/background/missed-jdconf-2025.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #0F71B9
}

.missed-jdconf-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 48px;
	/* controls left spacing */
}

.missed-jdconf-content {
	max-width: 520px;
	text-align: left;
	/* ensures text is left */
	color: #ffffff;
}


.missed-jdconf-content h2 {
	margin: 0 0 12px;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	color: #ffffff !important;
}

.missed-jdconf-content p {
	margin: 0 0 28px;
	font-size: 28px;
	line-height: 1.25;
	opacity: 0.95;
}

.missed-jdconf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 46px;
	padding: 0 26px;
	border-radius: 8px;

	background: #ffffff;
	color: #0B6BD6;
	text-decoration: none;

	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.missed-jdconf-btn:hover {
	filter: brightness(0.97);
	text-decoration: none;
}

/* Responsive: center text if needed */
@media (max-width: 768px) {
	.missed-jdconf-section {
		padding: 56px 18px;
		background-position: center right;
		background-image: none !important
	}

	.missed-jdconf-content h2 {
		font-size: 30px;
	}

	.missed-jdconf-content p {
		font-size: 20px;
	}

	.missed-jdconf-inner {
		padding: 0px 10px;
		text-align: center;
	}
}

.section-divider {
	width: 100%;
	height: 1px;
	background: var(--Gradient, linear-gradient(90deg, #0178D4 0%, #4B3DEB 22.97%, #A554F6 100%));
	margin: 0;
}


/* =========================
   NAVBAR FIX (put at END of file)
   ========================= */
/* Official logo sizing */

/* Official logo sizing */
.navbar-logo {
	height: 60px;
	width: auto;
	display: block;
}


header.navbar {
	/* override older .navbar { display:flex } rules */
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	align-items: center;

	/* match the screenshot gradient bar */
	background: linear-gradient(90deg, #1676d3 0%, #7b3fe4 100%);
	padding: 14px 28px;
	position: sticky;
	top: 0;
	z-index: 10000;
}

header.navbar .navbar-title {
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	-webkit-text-fill-color: initial;
	/* undo gradient text */
	background: none;
}

header.navbar>nav {
	grid-column: 2;
	justify-self: center;
	position: static;
	transform: none;
}

header.navbar .navbar-links {
	display: flex;
	align-items: center;
	gap: 44px;
	margin: 0;
	padding: 0;
}

header.navbar .navbar-links li {
	margin: 0;
	/* override the older 40px left margin */
}

header.navbar .navbar-links a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

/* CTA button in header (white pill) */
header.navbar .nav-register-btn {
	background: #fff;
	color: #7b3fe4 !important;
	border: 0;
	padding: 10px 18px !important;
	border-radius: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

header.navbar .nav-register-btn:hover {
	background: rgba(255, 255, 255, 0.92);
	text-decoration: none !important;
}

/* Dropdown: keep it open when moving into the menu */
header.navbar .navbar-link.dropdown {
	position: relative;
}

header.navbar .navbar-link.dropdown>a {
	cursor: pointer;
}

header.navbar .dropdown-content {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	background: #0b1220;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	padding: 8px;
	min-width: 180px;
	z-index: 20000;
}

header.navbar .dropdown-content li {
	margin: 0;
}

header.navbar .dropdown-content a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	color: #fff;
}

header.navbar .dropdown-content a:hover {
	background: rgba(255, 255, 255, 0.10);
}

/* hover + keyboard support */
header.navbar .navbar-link.dropdown:hover .dropdown-content,
header.navbar .navbar-link.dropdown:focus-within .dropdown-content {
	display: block;
}

/* -------------------------
   MOBILE MENU
   ------------------------- */
@media (max-width: 767px) {
	header.navbar {
		grid-template-columns: auto 1fr auto;
		padding: 14px 18px;
	}

	header.navbar .navbar-menu-icon-btn {
		display: inline-flex !important;
		grid-column: 3;
		justify-self: end;
	}

	/* Hide nav by default on mobile */
	header.navbar>nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		padding: 12px 14px;
	}

	/* Show nav when header has menu-open */
	header.navbar.menu-open>nav {
		display: block;
	}

	header.navbar .navbar-links {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		background: #ffffff;
		border-radius: 14px;
		padding: 10px;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
	}

	header.navbar .navbar-links a {
		color: #0b1220;
		padding: 12px 12px;
		border-radius: 10px;
	}

	header.navbar .navbar-links a:hover {
		background: rgba(0, 0, 0, 0.06);
		color: #0b1220;
	}

	header.navbar .nav-register-btn {
		width: 100%;
	}

	/* Mobile dropdown becomes inline (no hover trap) */
	header.navbar .dropdown-content {
		position: static;
		display: block;
		background: transparent;
		border: 0;
		padding: 0 0 0 8px;
		box-shadow: none;
		min-width: 0;
	}

	header.navbar .dropdown-content a {
		color: #0b1220;
	}
}

.duke-overlay {
	position: absolute;

	top: clamp(-11vw, -11vw, -11vw);
	left: clamp(23vw, 23vw, 23vw);
	width: clamp(100px, 14vw, 14vw);
}



/* Optional: ensure content stays above background but below Duke if needed */
.region-events-section {
	position: relative;
	z-index: 2;
}


/* Optional: make smaller / reposition on mobile */
@media (max-width: 600px) {
	.region-events-section .duke-overlay {
		width: clamp(44px, 25vw, 500px);
		top: clamp(-20vw, -25vw, -25vw);
		left: 10px;
		bottom: 10px;
		opacity: 0.95;
		/* optional */
	}
}



.section-news {
	padding: 20px 40px 84px;
}