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

body {
	font-family: "Inter", sans-serif;
	background: #fff;
	color: #222;
	line-height: 1.6;
	padding-bottom: 40px;
}
section {
	scroll-margin-top: 20px;
}

/* ==================== MARK: NAVBAR ==================== */
.navbar {
	padding-top: 8px;
	padding-bottom: 8px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #ebebeb;
	border-radius: 50px;
	margin: 10px auto;
	max-width: 95%;
	border: 1px solid #000;
	z-index: 100;
	transition: all 0.3s ease;
}
.navbar {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%); /* centers the pill */
	width: min(95%, 1200px); /* same visual width as before */
	margin: 10px 0; /* vertical spacing only */
	border-radius: 50px;
}

.navbar-nav .nav-link {
	color: #000;
	font-weight: 500;
	transition: color 0.3s ease;
}

.navbar-brand img {
	height: 52px;
	padding-left: 20px;
	padding-top: 8px;
}
/* ✅ Active link styling */
.nav-link.active {
	position: relative;
	z-index: 2;
	border: none;
	background: transparent;
}

/* ✅ Green pill behind active link */
.nav-link.active::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	width: 100%;
	height: 80%;
	background: #c3dfc4;
	border-radius: 999px;
	border: 1px solid #000;
	z-index: -1;
	animation: bounceCircle 0.4s ease;
}

@keyframes bounceCircle {
	0% {
		transform: translate(-50%, -50%) scale(0.9);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.05);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

/* ==================== MARK: HERO SECTION ==================== */
.hero-section {
	padding: 150px 0px 0px 60px;
}

/* ✅ Flexbox container for text + image */
.hero-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	max-width: 1300px;
	margin: 0 auto;
	gap: 0px;
}

/* ✅ Left side takes more width */
.hero-text {
	flex: 2;
}

/* ✅ Right side image */
.hero-image {
	flex: 1;
	text-align: right;
}

.hero-image img {
	width: 160%;
	max-width: 420px;
	margin-left: -30px;
}

/* ✅ Typography */
.hero-title {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.2;
	margin-bottom: 40px;
	text-align: left;
}

.gdg-icon1 {
	height: 42px;
	vertical-align: middle;
	margin-bottom: 6px;
}

.gdg-icon2 {
	height: 42px;
	vertical-align: middle;
	margin-bottom: 6px;
}
.subtitle {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.3;
	text-align: left;
	margin-bottom: 24px;
}

/* ✅ Event info */
.event-info p {
	font-size: 18px;
	margin-bottom: 10px;
	line-height: 1.2;
}

.event-info img {
	width: 28px;
	margin-right: 6px;
	vertical-align: middle;
}

/* Style for links in the event-info block */
.event-info a {
	color: #000; /* Make text black */
	font-size: 20px; /* Match your event-info p size */
	font-weight: 500; /* Slightly bolder for visibility */
	text-decoration: none; /* Remove underline */
	transition: color 0.3s ease;
}

.event-info a:hover {
	color: #007bff; /* Subtle blue on hover */
	text-decoration: underline; /* Underline only when hovered */
}
.event-info p {
	margin: 0 0 8px;
}
.event-info .location-line {
	display: flex;
	align-items: center;
	gap: 8px;
}
.event-info .map-line {
	margin: 4px 0 8px;
	padding-left: 34px;
} /* aligns under the text */

/* 🌟 Google-style action buttons (Hero Section) */
/* === Hero Buttons (Google style with border) === */
.hero-buttons {
	margin-top: 40px;
	display: flex;
	gap: 20px;
}
.btn-green,
.btn-yellow {
	width: 220px;
	text-align: center;
	padding: 14px 28px;
	border-radius: 50px; /* pill shape */
	font-family: "Roboto", sans-serif;
	font-weight: 600;
	font-size: 18px;
	text-decoration: none;
	border: 2px solid #000; /* ✅ black outline like navbar */
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Green button */
.btn-green {
	background-color: #c3dfc4;
	color: #000;
}

/* Yellow button */
.btn-yellow {
	background-color: #fae8c8;
	color: #000;
}

/* Hover effect */
.btn-green:hover,
.btn-yellow:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
	background-color: #fff; /* subtle inversion */
	color: #000;
}

/* Active (click) effect */
.btn-green:active,
.btn-yellow:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Add ripple container inside buttons */
.btn-green,
.btn-yellow {
	position: relative;
	overflow: hidden; /* ✅ hides ripple overflow */
}

/* Ripple effect */
.btn-green::after,
.btn-yellow::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	background: rgba(0, 0, 0, 0.2); /* translucent ripple */
	transform: scale(0);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.6s ease, opacity 0.8s ease;
}

/* Active (click) state */
.btn-green:active::after,
.btn-yellow:active::after {
	transform: scale(20); /* circle expands */
	opacity: 1; /* fade visible */
	transition: transform 0.6s ease, opacity 0.8s ease;
}
.ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	transform: scale(0);
	animation: ripple-animation 0.6s linear;
	pointer-events: none;
}

@keyframes ripple-animation {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* === Hero Code of Conduct Notice === */

.hero-coc {
	margin-top: 20px;
	text-align: left; /* default desktop */
}

.hero-coc p {
	font-size: 14px;
	color: #555;
	line-height: 1.4;
	margin: 0;
}

.hero-coc a {
	font-weight: 600;
	color: #3367d6; /* Google blue */
	text-decoration: underline;
	transition: color 0.2s ease;
}

.hero-coc a:hover {
	color: #174ea6;
}

/* ✅ Mobile override: force onto new line + center */
@media (max-width: 768px) {
	.hero-coc {
		order: 6;
		text-align: center;
		margin-top: 12px;
	}

	.hero-coc a {
		display: block; /* forces onto 2nd line */
		margin-top: 4px; /* small gap */
	}
}

/* ==================== MARK: Responcive📱 TABLET (769–1200px) ==================== */
@media (min-width: 769px) and (max-width: 1200px) {
	/* Navbar pill centered & comfy */
	.navbar {
		width: min(98%, 1200px);
		left: 50%;
		transform: translateX(-50%);
		border-radius: 40px;
		padding: 14px 20px;
	}
	.navbar-brand img {
		height: 40px;
	}
	.navbar-nav .nav-link {
		padding: 6px 14px;
		font-size: 15px;
	}

	/* Hero layout side-by-side with breathing room */
	.hero-section {
		padding: 140px 30px 40px;
	}
	.hero-container {
		flex-direction: row;
		align-items: center;
		gap: 30px;
		text-align: left;
	}
	.hero-text {
		width: 55%;
	}
	.hero-title {
		font-size: 36px;
		line-height: 1.2;
		margin-bottom: 20px;
	}
	.subtitle {
		font-size: 18px;
		margin-bottom: 20px;
	}

	/* Buttons in a row with a clear gap */
	.hero-buttons {
		display: flex;
		gap: 18px;
		align-items: center;
		justify-content: flex-start;
		gap: 20px; /* space between the two buttons */
		margin-top: 32px;
	}

	/* Right image scaled nicely */
	.hero-image {
		width: 45%;
		text-align: center;
	}
	.hero-image img {
		max-width: 95%;
		height: auto;
	}
}

/* ==================== 📱 MOBILE (≤768px) ==================== */
@media (max-width: 768px) {
	/* Layout & container spacing */
	.hero-section {
		padding: 120px 20px 2px 2px;
	}
	.hero-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 18px;
		width: 100%;
		max-width: 100%;
	}

	.hero-text {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	/* Order inside hero */
	.hero-title {
		order: 1;
		font-size: 22px;
		line-height: 1.2;
		text-align: center;
		max-width: 660px;
		margin: 0 auto 12px;
		word-break: keep-all;
		white-space: normal;
		display: block;
	}
	.gdg-icon1,
	.gdg-icon2 {
		height: 18px;
		vertical-align: middle;
		margin-bottom: 6px;
	}

	/* Subtitle */
	.subtitle {
		order: 2;
		font-size: 14px;
		line-height: 1.4;
		text-align: left;
		margin: 0 0 16px;
	}

	/* Right image */
	.hero-image {
		order: 3;
		width: 100%;
		text-align: center;
		margin: 12px 0;
	}
	.hero-image img {
		max-width: 85%;
		height: auto;
		margin: 0 auto;
		display: block;
	}

	/* Event info block */
	.event-info {
		order: 4;
		text-align: left;
		margin-bottom: 16px;
		--icon-size: 6px;
		--icon-gap: 8px;
		--line-font: 15px;
	}
	.event-info,
	.event-info p,
	.event-info a,
	.event-info span {
		font-size: 15px;
		line-height: 1.4;
	}
	.event-info .location-line {
		display: flex;
		align-items: center;
		gap: var(--icon-gap);
		font-size: var(--line-font);
		margin: 0 0 6px 0;
	}
	.event-info .location-line img {
		width: var(--icon-size);
		height: var(--icon-size);
		flex: 0 0 var(--icon-size);
	}
	.event-info .map-line {
		display: block;
		padding-left: calc(
			var(--icon-size) + var(--icon-gap)
		); /* align with text column */
		margin: 10px 0;
		margin-left: -12px; /* matches your current visual */
	}
	.event-info .map-line a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		text-decoration: none;
	}
	.event-info .map-line a:hover {
		text-decoration: underline;
	}
	/* location row as a single clickable target */
	.event-info .location-line {
		margin: 0 0 8px;
	}
	.event-info .location-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		text-decoration: none;
		color: inherit; /* or #000 if you prefer */
	}
	.event-info .location-link:hover {
		text-decoration: underline;
	}
	.event-info .location-link img {
		width: 28px;
		height: 28px;
	}

	.map-link-icon {
		width: 26px;
		height: 26px;
	}

	/* CTAs: stacked, full width. Register = Google Blue ONLY on mobile */
	.hero-buttons {
		order: 5;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px; /* spacing between the two buttons */
		margin-top: 4px;
		width: 100%;
	}
	.hero-buttons a {
		text-decoration: none;
	}

	.btn-green,
	.btn-yellow {
		width: 100%;
		max-width: 320px;
		padding: 12px 0;
	}

	/* Mobile-only color for Register */
	.btn-green {
		background-color: #5383ec; /* Google Blue */
		color: #fff;
		border: 2px solid #000; /* ← вернули чёрную рамку */
	}
	.btn-green:hover {
		background-color: #3367d6;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		transform: translateY(-2px);
	}
	.btn-green:active {
		background-color: #2a56c6;
		transform: translateY(0);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	}
}

/* ==================== MARK: SPONSORS (clean rewrite) ==================== */
.sponsors-section {
	background: #fff;
	padding: 0 20px;
	text-align: center;
}

.sponsors-frame {
	background: #fff;
	border: 1px solid #000;
	border-radius: 50px;
	padding: 28px 28px 22px;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	box-shadow: none;
}

.sponsors-title {
	font-size: 1.6rem;
	margin: 8px 0 22px;
}

/* Grid */
.puzzle-track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0px;
	justify-items: center;
	align-items: start; /* 🔥 no more huge vertical gaps */
}
/* Each tile gets a fixed logo box height so rows are even. */
.puzzle-item {
	width: 100%;
	max-width: 240px;
	display: grid;
	place-items: center;
	min-height: 140px;
}
.puzzle-item_3 {
	width: 100%;
	max-width: 180px;
	display: grid;
	place-items: center;
	min-height: 140px;
}

.puzzle-item img {
	display: block;
	width: auto;
	height: clamp(70px, 9vw, 120px); /* responsive cap */
	max-width: 100%;
	object-fit: contain;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.puzzle-item:hover img {
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

/* ---------- Breakpoints ---------- */

/* Mobile (≤768px): 2 columns, tighter rows */
@media (max-width: 768px) {
	.sponsors-title {
		font-size: 1.3rem;
		margin-bottom: 16px;
	}

	.sponsors-frame {
		padding: 16px 12px 20px; /* reduce bottom padding */
		border-radius: 28px;
	}

	.puzzle-track {
		grid-template-columns: repeat(2, 1fr); /* exactly 2 per row */
		column-gap: 0px; /* smaller sideways gap */
		row-gap: 24px; /* tighter vertical spacing */
	}

	.puzzle-item {
		max-width: none;
		min-height: auto; /* remove forced height */
	}

	.puzzle-item img {
		height: clamp(52px, 16vw, 80px); /* scale with screen */
		max-width: 100px;
	}
}

/* Tablet (769–992px): 3 columns */
@media (min-width: 769px) and (max-width: 992px) {
	.puzzle-track {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 28px;
		row-gap: 56px;
	}
	.puzzle-item {
		min-height: 130px;
	}
	.puzzle-item_3 {
		min-height: 130px;
	}
	.puzzle-item img {
		height: clamp(72px, 8vw, 110px);
	}
	.puzzle-item_3 img {
		height: clamp(72px, 8vw, 110px);
	}
}

/* Large desktop (≥1400px): a touch more air */
@media (min-width: 1400px) {
	.puzzle-track {
		column-gap: 40px;
		row-gap: 72px;
	}
}
/* FINAL override — keeps rows tight on all screens */
.puzzle-track {
	row-gap: 0 !important;
	column-gap: 12px !important;
}
@media (max-width: 768px) {
	.school-logo {
		max-width: 80px !important; /* smaller on mobile */
	}
}
/* ===== MARK: ABOUT DEVFEST SECTION ===== */
.about-devfest {
	padding: 40px 20px;
	background: #fff;
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
}

.about-devfest .section-title {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 36px;
	margin-bottom: 16px;
}

.devfest-tags {
	display: flex;
	justify-content: center;
	gap: 36px;
	margin-bottom: 20px;
}

.tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 236px;
	height: 50px;
	font-weight: 600;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	border: 1px solid #000;
	padding: 0;
}

/*  CONNECT */
.tag-connect {
	background: #bde9f4;
	border-radius: 30px 0 0 30px;
}
/* LEARN */
.tag-learn {
	background: #ffe2a0;
	border-radius: 0;
}

/* ✅ GROW */
.tag-grow {
	background: #f6d2d2;
	border-radius: 0 30px 30px 0;
}

.section-subtitle {
	font-size: 18px;
	max-width: 1200px;
	margin: 0 auto 40px;
	line-height: 1.6;
	color: #333;
}
@media (max-width: 768px) {
	.about-devfest {
		padding-top: 40px;
	}

	.about-devfest .section-title {
		margin-top: 0;
	}
	.devfest-tags {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.devfest-tags .tag {
		width: 100px;
		font-size: 14px;
		height: 44px;
	}
}

/* === DevFest "pills" — make TAGS and STATS the same height === */
:root {
	--devfest-pill-h: 80px; /* desktop pill height for BOTH rows */
	--devfest-pill-h-m: 56px; /* mobile pill height */
}

/* Base pill alignment for both rows */
.devfest-tags .tag,
.stats .stat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--devfest-pill-h);
	line-height: 1.2;
	padding: 0 24px; /* comfy side padding */
	font-weight: 700;
	border: 1px solid #000; /* match existing style */
}

/* Keep your widths (adjust if you want wider/narrower) */
.devfest-tags .tag {
	width: 236px;
}
.stats .stat {
	width: 236px;
}

/* Preserve your existing colors & end radii */
.tag-connect {
	border-radius: 30px 0 0 30px;
}
.tag-learn {
	border-radius: 0;
}
.tag-grow {
	border-radius: 0 30px 30px 0;
}

.stat-blue {
	border-radius: 30px 0 0 30px;
}
.stat-pink {
	border-radius: 0;
}
.stat-yellow {
	border-radius: 0 30px 30px 0;
}

/* Mobile: shrink both rows together */
@media (max-width: 768px) {
	.devfest-tags .tag,
	.stats .stat {
		height: var(--devfest-pill-h-m);
		width: 120px; /* same width feel as your current mobile tags */
		font-size: 12px;
		padding: 0 12px;
		text-align: center;
	}
}
/* === MOBILE FIX: keep CONNECT / LEARN / GROW in one row === */
@media (max-width: 768px) {
	.about-devfest .devfest-tags {
		display: flex;
		flex-wrap: nowrap; /* ✅ force one row */
		justify-content: center;
		align-items: center;
		gap: 6px; /* tighter spacing for 390px width */
	}

	.about-devfest .tag {
		flex: 1 1 auto; /* allow proportional shrink */
		min-width: 0; /* prevent overflow */
		height: 56px; /* match your variable height */
		font-size: 12px;
		padding: 0 12px;
		text-align: center;
	}
}

/* For very small screens (≤360px) */
@media (max-width: 360px) {
	.about-devfest .devfest-tags {
		gap: 4px;
	}
	.about-devfest .tag {
		font-size: 11px;
		padding: 0 8px;
	}
}

/* ===== MARK: TRACKS SECTION ===== */
.tracks-section {
	padding: 20px 20px;
	background: #fff;
	text-align: center;
	position: relative;
}

.tracks-title {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 10px;
}

.tracks-subtitle {
	font-size: 18px;
	color: #555;
	margin-bottom: 40px;
}

/* ===== GRID ===== */
.tracks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	max-width: 1100px;
	margin: 0 auto;
}

/* ===== CARDS ===== */
.track-card {
	position: relative;
	background: #ebebeb;
	border: 1px solid #000000;
	border-radius: 12px;
	padding: 20px; /* keep padding for text */
	text-align: left;
	min-height: 220px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

/* ===== MAIN ICONS ===== */
.track-icon {
	width: 54px;
	height: 54px;
	margin-bottom: 10px;
}

/* ===== FLOATING SHAPES ===== */
.decor-shape {
	position: absolute;
	top: -1px;
	right: -20px;
	width: 72px;
	object-fit: contain;
	opacity: 1;
	pointer-events: none;
}
.track-icon,
.decor-shape {
	object-fit: contain; /* keeps the proportions perfect */
}

/* Shape placement for each card */
.track-card:nth-child(1) .decor-shape {
	top: -6px;
	right: 12px;
}
.track-card:nth-child(2) .decor-shape {
	top: -6px;
	right: 16px;
}
.track-card:nth-child(3) .decor-shape {
	top: -12px;
	right: 20px;
}
.track-card:nth-child(4) .decor-shape {
	bottom: 10px;
	right: 16px;
}
.track-card:nth-child(5) .decor-shape {
	top: -12px;
	right: 12px;
}
.track-card:nth-child(6) .decor-shape {
	top: -12px;
	right: -18px;
}

/* ===== TEXT ===== */
.track-card h3 {
	font-size: 20px;
	margin-bottom: 8px;
	font-weight: 600;
}

.track-card p {
	font-size: 16px;
	color: #333;
	line-height: 1.4;
}

.track-card img {
	height: 50px;
	margin-bottom: 12px;
}

.track-card h4 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 8px;
}

.track-card p {
	font-size: 16px;
	line-height: 1.5;
	color: #444;
}

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

/* ✅ Stats */

.stats {
	display: flex;
	justify-content: center;
	gap: 36px;
	margin-top: 30px;
}
.stat {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 236px;
	height: auto;
	font-weight: 600;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	border: 1px solid #000;
	padding: 20px 0;
	margin-top: 10px;
	text-align: center;
	line-height: 1.4;
}

.stat-blue {
	background: #bde9f4;
	border-radius: 30px 0 0 30px;
}
.stat-pink {
	background: #ffe2a0;
	border-radius: 0;
}
.stat-yellow {
	background: #f6d2d2;
	border-radius: 0 30px 30px 0;
}

@media (max-width: 768px) {
	.stats {
		margin-top: 20px;
		gap: 16px;
	}
	.stat {
		width: 120px;
		font-size: 12px;
	}
}
/* =====MARK: NEWS SECTION ===== */
.news-section {
	padding: 0px 20px;
	background: #fff;
	text-align: center;
}

.news-title {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 40px;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	max-width: 900px;
	margin: 0 auto;
}

.news-card {
	display: flex;
	align-items: center;
	border: 1px solid #ccc;
	border-radius: 12px;
	padding: 16px;
	background: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.news-logo {
	width: 60px;
	height: auto;
	margin-right: 16px;
	flex-shrink: 0;
}

.news-text {
	text-align: left;
}

.news-text h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 6px;
}

.news-link {
	font-size: 14px;
	color: #000;
	font-weight: 500;
	text-decoration: none;
}

.news-link:hover {
	text-decoration: underline;
}

.gallery-link {
	margin-top: 20px;
	font-size: 16px;
	font-weight: 500;
}

.gallery-link a {
	color: #000;
	text-decoration: none;
	font-weight: 600;
}

.gallery-link a:hover {
	text-decoration: underline;
}

/* News: spacing for the button row */
.news-section .speakers-buttons {
	margin-top: 20px; /* "a bit" of top margin */
}
.news-card {
	display: flex;
	align-items: center;
	border: 1px solid #ccc;
	border-radius: 12px;
	padding: 16px;
	background: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-decoration: none; /* no underline */
	color: inherit; /* keep text color normal */
}

.news-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
/* small year badge inside news cards */
.news-year {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 700;
	border: 1px solid #000;
	border-radius: 999px;
	background: #ebebeb;
}
.news-year {
	display: inline-block;
	margin-top: 6px;
	font-weight: 700;
	font-size: 13px;
	padding: 4px 10px;
	border-radius: 24px;
	border: 1px solid #000;
}

/* Light Google colors */
.news-year[data-year="2024"] {
	background: #aecbfa; /* Light Google Blue */
	color: #000;
}
.news-year[data-year="2023"] {
	background: #c3eedb; /* Light Google Green */
	color: #000;
}
.news-year[data-year="2022"] {
	background: #fde293; /* Light Google Yellow */
	color: #000;
}
.news-year[data-year="2021"] {
	background: #f8b7b3; /* Light Google Red */
	color: #000;
}
/* Google-blue variant for outline buttons */
.btn-google {
	background: #4285f4; /* Google Blue */
	color: #fff;
	border: 1px solid #000;
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.btn-google:hover {
	background: #3367d6;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}
.btn-google:active {
	background: #2a56c6;
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* News: spacing for the button row */
.news-section .speakers-buttons {
	margin-top: 20px; /* a bit of top margin */
}

/* Make the news button look like hero pills (round + thicker border) */
.news-section .speakers-buttons .btn-outline {
	border-radius: 50px; /* match hero buttons */
	border-width: 2px; /* match hero buttons */
	padding: 12px 24px; /* comfy pill padding */
}

/* Light Google Blue variant */
.btn-google-light {
	background: #aecbfa; /* Light Google Blue (Material) */
	color: #000; /* consistent with hero pill style */
	border: 2px solid #000;
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.btn-google-light:hover {
	background: #d2e3fc; /* slightly lighter on hover */
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.btn-google-light:active {
	background: #a1c2f6; /* pressed state */
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.btn-google-light:focus-visible {
	outline: 3px dashed #000;
	outline-offset: 3px; /* accessible focus */
}

/* ==================== MARK: SCHEDULE ==================== */
/* --- Schedule --- */
.schedule-section {
	padding: 30px 20px;
	background: #fff;
}
.schedule-title {
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 14px;
}

.schedule-views {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 14px;
}
.view-btn {
	padding: 8px 14px;
	border: 1px solid #000;
	border-radius: 999px;
	background: #fff;
	font-weight: 600;
}
.view-btn.is-active {
	background: #c3dfc4;
}

.schedule-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 10px 0 18px;
}
.track-chip {
	padding: 8px 14px;
	border: 1px solid #000;
	border-radius: 999px;
	background: #fff;
	font-weight: 600;
	font-size: 14px;
}
.track-chip.is-active {
	background: #ffe2a0;
}

/* Card */
.slot {
	border: 1px solid #000;
	border-radius: 14px;
	padding: 14px;
	background: #fff;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.slot + .slot {
	margin-top: 10px;
}
.slot-time {
	font-weight: 800;
	min-width: 90px;
	font-size: 14px;
}
.slot-body h4 {
	font-size: 16px;
	margin: 0 0 4px;
	font-weight: 800;
}
.slot-meta {
	font-size: 13px;
	color: #333;
}
.slot-badges {
	display: flex;
	gap: 6px;
	margin-top: 6px;
	flex-wrap: wrap;
}
.badge {
	border: 1px solid #000;
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 12px;
	background: #ebebeb;
}
.add-to-cal {
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px dashed #000;
}

/* Timeline group headings */
.group-heading {
	margin: 16px 0 8px;
	font-weight: 800;
}
/* ===== Schedule: media + hover card + colored room ===== */
.schedule-section .slot {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 12px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 14px;
	padding: 12px;
	overflow: visible;
	/* track color is injected via inline --track-color */
}
.schedule-section .slot::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 6px;
	background: var(--track-color, #ebebeb);
	border-radius: 14px 0 0 14px;
}
.slot-media img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid #000;
	display: block;
}
.slot-body h4 {
	margin: 0 0 4px;
	font-weight: 700;
}
.slot-meta {
	font-size: 14px;
	color: #333;
}
.slot-badges {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 6px;
}
.badge {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid #000;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	background: #ebebeb;
}
.room-badge {
	background: var(--track-color, #ebebeb);
} /* ← colored by track */
/* Keep Add to Calendar as-is */
.add-to-cal {
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px dashed #000;
}
.add-to-cal:hover {
	text-decoration: none;
}

/* Read the abstract trigger (details/summary) — NO underline */
.slot-more summary,
.slot-more-trigger {
	font-weight: 700;
	font-size: 13px;
	text-decoration: none; /* ← no underline */
	cursor: pointer;
	color: #000;
	list-style: none; /* remove default marker space */
}
.slot-more summary::-webkit-details-marker {
	display: none;
} /* Safari/Chrome */

/* Optional: custom chevron instead of underline */
.slot-more summary::after,
.slot-more-trigger::after {
	content: " →";
	transition: transform 0.2s ease;
}
.slot-more[open] summary::after {
	transform: translateX(2px);
}

/* Fallback anchor (used by rawLink) — NO underline */
.slot-more-link {
	font-weight: 700;
	font-size: 13px;
	text-decoration: none; /* ← no underline */
	color: #000;
}
.slot-more-link:hover {
	text-decoration: none;
}

/* Hover / tap card */
.slot-hover {
	position: absolute;
	left: 12px;
	top: calc(100% + 8px);
	width: min(360px, 92vw);
	background: #fff;
	border: 1px solid #000;
	border-radius: 14px;
	padding: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	opacity: 0;
	transform: translateY(6px);
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 5;
}
.slot:hover .slot-hover,
.slot.is-open .slot-hover,
.slot:focus-within .slot-hover {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}
.slot-hover .hover-head {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 6px;
}
.slot-hover img {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	border: 1px solid #000;
	object-fit: cover;
}
.slot-hover .hover-title {
	font-weight: 800;
}
.slot-hover .hover-link {
	font-weight: 700;
	text-decoration: none;
}

/* schedule (inline, no popups) */
.slot {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 12px;
	align-items: start;
	border: 1px solid #000;
	border-radius: 12px;
	padding: 12px;
	margin: 10px 0;
	background: #fff;
	border-left: 8px solid var(--track-color, #ebebeb); /* track tint */
}
.slot-media img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid #000;
}
.slot-time {
	font-weight: 700;
	margin-bottom: 6px;
}
.slot-meta {
	margin: 6px 0;
	color: #333;
}
.badge {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid #000;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
}
.room-badge {
	background: var(--track-color, #ebebeb);
}
.slot-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
.slot-more {
	text-decoration: none;
	font-weight: 700;
}
.slot-more:hover {
	text-decoration: underline;
}
/* no underline on the expandable trigger */
.slot-more {
	text-decoration: none;
}
.slot-more:hover {
	text-decoration: none;
} /* override */
.slot-more summary {
	text-decoration: none;
} /* belt & suspenders */
.slot-desc p {
	font-size: 11.5px;
	line-height: 1.5;
	color: #555;
}

/* track chips that match schedule colors */
.track-chip {
	--chip-color: #fff; /* set from JS per chip */
	background: #fff;
	border: 1px solid #000;
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.track-chip::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--chip-color);
	border: 1px solid #000;
}
.track-chip.is-active {
	background: var(--chip-color);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}
.track-chip.is-active::before {
	background: #fff; /* dot inverts on active */
}
/* Hide mobile filter by default; show only on small screens */
.mobile-filter {
	display: none;
}

/* Pretty, Google-y pill select */
.mobile-filter-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: #d2e3fc; /* Light Google Blue */
	border: 2px solid #000;
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	outline: none;
	width: 100%;
	max-width: 320px;
	margin: 0 auto 12px;
	display: block;
	background-image: linear-gradient(45deg, transparent 50%, #000 50%),
		linear-gradient(135deg, #000 50%, transparent 50%),
		linear-gradient(to right, transparent, transparent);
	background-position: calc(100% - 24px) calc(50% - 3px),
		calc(100% - 18px) calc(50% - 3px), 0 0;
	background-size: 6px 6px, 6px 6px, 100% 100%;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.mobile-filter-select:focus-visible {
	outline: 3px dashed #000;
	outline-offset: 3px;
}
.mobile-filter-select:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
/* Space between multiple speaker photos in a session */
.slot-media {
	display: inline-flex; /* keeps single-image behavior */
	flex-direction: column; /* stack vertically */
	gap: 8px; /* ← spacing between photos */
}

/* (optional) slightly smaller on mobile */
@media (max-width: 480px) {
	.slot-media {
		gap: 10px;
	} /* a touch more air on small screens */
}

/* Show mobile filter & hide chips ONLY on mobile */
@media (max-width: 768px) {
	.mobile-filter {
		display: block;
	}
	.schedule-filters {
		display: none;
	}
}

/* Small screens: one column */
@media (max-width: 768px) {
	.schedule-section .slot {
		grid-template-columns: 1fr;
	}
	.slot-media img {
		width: 64px;
		height: 64px;
	}
}

/* Desktop time grid (optional; keeps vertical on mobile) */
@media (min-width: 992px) {
	.time-grid {
		display: grid;
		grid-template-columns: 140px 1fr;
		gap: 12px;
	}
	.time-row {
		display: contents;
	}
	.time-row .slot-time {
		grid-column: 1;
	}
	.time-row .slot {
		grid-column: 2;
	}
}
/* hide the "Global" chip on schedule cards */
.badge.is-global {
	display: none !important;
}

/* ==================== MARK: SPEAKERS ==================== */
/* Base */
.speakers-section {
	padding: 40px 20px;
	background: #fff;
}
.speakers-container {
	max-width: 1200px;
	margin: 0 auto;
}
.speakers-title {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 12px;
	text-align: center;
}
.speakers-subtitle {
	font-size: 18px;
	max-width: 1100px;
	margin: 0 auto 24px;
	color: #333;
	line-height: 1.5;
	text-align: center;
}

/* ===== SESSION TAG CHIPS ===== */
.session-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 20px 0 30px;
}
.tag-chip {
	padding: 8px 18px;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid #000;
	cursor: default;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tag-chip:nth-child(1) {
	background: #bde9f4;
} /* AI & ML – light blue */
.tag-chip:nth-child(2) {
	background: #c3dfc4;
} /* Cloud & Web – light green */
.tag-chip:nth-child(3) {
	background: #ffe2a0;
} /* Startup – light yellow */
.tag-chip:nth-child(4) {
	background: #f6d2d2;
} /* Cybersec – light pink */
.tag-chip:nth-child(5) {
	background: #d0c4f6;
} /* Full-Stack – light purple */
.tag-chip:nth-child(6) {
	background: #fae8c8;
} /* High-School – peach */
.tag-chip:hover {
	transform: translateY(-2px);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* ===== GRID ===== */
.speaker-list-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 1200px;
	margin: 12px auto 30px;
}

/* ===== CARD ===== */
.person-card {
	background: #fff;
	border: 1px solid #000;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.person-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
}

/* Image wrapper matches the card’s top radius */
.person-photo-wrap {
	position: relative;
	aspect-ratio: 4/5;
	width: 100%;
	background: #fff; /* no blue bleed */
	border-radius: 28px 28px 0 0;
	overflow: visible; /* let the white pill overlap into text */
}

.person-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 28px 28px 0 0; /* ← ensures corners match perfectly */
}
.person-photo {
	transform: translateZ(0);
}

/* Text area */
.person-info {
	padding: 16px 12px 14px;
	text-align: left;
}
.person-name {
	font-size: 16px;
	font-weight: 800;
	margin: 4px 0 2px;
}
.person-role {
	font-size: 13px;
	font-weight: 700;
	margin: 0;
}
.person-meta {
	font-size: 13px;
	color: #333;
	margin: 4px 0 2px;
}

/* ===== BUTTONS ROW ===== */
.speakers-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.speakers-buttons a.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 24px;
	border-radius: 12px;
	border: 1px solid #000;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	color: #000;
}

/* ===== SOCIAL ICONS ===== */
/* In-text (fallback style if ever used under text) */
.speaker-socials {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 10px 0;
}
.speaker-socials a img {
	width: 38px;
	height: 38px;
	transition: transform 0.2s ease;
}
.speaker-socials a img:hover {
	transform: scale(1.15);
}

/* Overlay inside photo (centered at bottom) */
/* White pill overlay stays above the photo edge */
.speaker-socials--overlay {
	position: absolute;
	left: 50%;
	bottom: -18px; /* sits on the image edge */
	transform: translateX(-50%);
	display: inline-flex;
	gap: 10px;
	padding: 6px 10px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	z-index: 3;
}
/* Icons in their original colours (no backgrounds, no invert) */
.speaker-socials--overlay a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Give room so the pill doesn’t cover the name */
.person-info {
	padding-top: 28px; /* was 16px */
}
.speaker-socials--overlay a img {
	width: 24px;
	height: 24px;
	transition: transform 0.2s ease;
}
/* photo with rounded top corners */
.person-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 18px 18px 0 0;
}
/* Make sure nothing clips the pill */
.person-photo-wrap {
	position: relative;
	aspect-ratio: 4 / 5;
	width: 100%;
	background: #fff; /* ← was #e9f6ff */
	overflow: visible; /* keep so the pill can overlap */
}
.person-card {
	overflow: visible;
}

/* Give room so pill doesn’t cover the name */
.person-info {
	padding: 28px 12px 14px;
}

.speaker-socials--overlay a img:hover {
	transform: scale(1.12);
}

/* ===== LOAD MORE BUTTON ===== */

#loadMoreSpeakers {
	padding: 12px 24px;
	border-radius: 12px;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	background: #4285f4; /* Google Blue */
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
#loadMoreSpeakers:hover {
	background: #3367d6;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}
#loadMoreSpeakers:active {
	background: #2a56c6;
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ===== RESPONSIVE ===== */
/* Tablet */
@media (max-width: 992px) {
	.speaker-list-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.speakers-subtitle {
		font-size: 16px;
	}

	.speaker-list-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	#loadMoreSpeakers {
		width: 100%;
		max-width: 320px;
		margin: 20px auto 0;
		display: block;
		font-size: 15px;
	}

	.speakers-buttons {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	.speakers-buttons #loadMoreSpeakers,
	.speakers-buttons a.btn-outline {
		width: 100%;
		max-width: 320px;
		text-align: center;
	}

	/* If you hide 9–24 until "Load more" */
	.is-hidden-mobile {
		display: none !important;
	}
	.btn-mobile-only {
		display: inline-block;
	}
}

/* Desktop defaults for conditional classes */
.is-hidden-mobile {
	display: block;
}
.btn-mobile-only {
	display: none;
}

/* ===== MARK: ORGANIZERS (minimal, bigger images) ===== */
.organizers-section {
	padding: 50px 20px;
	background: #fff;
	text-align: center;
}
.org-title {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 8px;
}
.org-subtitle {
	font-size: 18px;
	margin-bottom: 24px;
	color: #333;
}

/* subtle overlapping ribbon */
.org-ribbon {
	display: inline-flex;
	gap: 0;
	margin: 6px 0 16px;
}
.org-ribbon img {
	width: 28px;
	height: 28px;
	object-fit: cover;
	border: 1px solid #000;
	border-radius: 50%;
	margin-left: -8px; /* overlap */
	background: #fff;
}
.org-ribbon img:first-child {
	margin-left: 0;
}

/* grid */
.org-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 22px;
	max-width: 1100px;
	margin: 0 auto;
}

/* card */
.org-card {
	background: #fff;
	border: 1px solid #000;
	border-radius: 20px;
	padding: 20px 16px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.org-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
}

/* BIG headshots */
.org-avatar-large {
	width: 180px; /* bigger image */
	height: 180px;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid #000;
	margin-bottom: 12px;
	background: #fff;
}

/* text */
.org-name {
	font-size: 18px;
	font-weight: 800;
	margin: 6px 0 2px;
}
.org-affil {
	font-size: 14px;
	color: #444;
	margin: 0 0 8px;
}

/* optional: tiny social row */
/* social icons under organizers */
.org-links a img {
	width: 28px;
	height: 28px;
	transition: transform 0.15s ease;
}
.org-links a img:hover {
	transform: scale(1.15);
}

/* mobile tweak for grid & image size */
@media (max-width: 768px) {
	.org-avatar-large {
		width: 160px;
		height: 160px;
	}
	.org-grid {
		gap: 18px;
	}
	.org-links a img {
		width: 28px;
		height: 28px;
	}
}

/* ===== MARK: FOOTER COLUMN STYLE ===== */
.footer-section {
	background: #fff;
	border-top: 1px solid #ddd;
	padding: 28px 16px 18px;
	text-align: center;
	font-family: "Inter", sans-serif;
	color: #333;
}

/* Top column */
.footer-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 800px;
	margin: 0 auto 12px;
}

.footer-top h3 {
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}

.footer-btn {
	display: inline-block;

	padding: 10px 22px;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 600;
	background: #4285f4; /* Google Blue */
	color: #fff;
	border: none;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.2s ease;
}
.footer-btn:hover {
	background: #3367d6;
	transform: translateY(-2px);
}

.footer-logo {
	max-width: 220px;
	height: auto;
	margin-top: 10px;
}

/* Navigation */
.footer-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
	margin: 20px 0;
}
.footer-nav a {
	color: #555;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s ease;
}
.footer-nav a:hover {
	color: #000;
}

/* Bottom */
.footer-bottom {
	border-top: 1px solid #eee;
	margin-top: 20px;
	padding-top: 12px;
	font-size: 13px;
	color: #777;
}
.footer-credit {
	display: inline-flex; /* tighter inline row with text */
	align-items: center; /* vertical centering */
	gap: 0px;
	line-height: 1.1; /* reduce extra top/bottom space */
	margin-top: 6px;
}

.dashdev-logo {
	height: 44px; /* slightly smaller looks crisper */
	width: auto;
	display: block; /* remove inline-image baseline quirks */
	position: relative;
	top: -4px; /* gentle nudge up */
	transition: transform 0.2s ease;
}

.dashdev-link:hover .dashdev-logo {
	transform: scale(1.06);
}

.footer-bottom .footer-copy {
	margin-bottom: -10px;
}
/* Mobile */
@media (max-width: 768px) {
	.footer-top {
		flex-direction: column;
		text-align: center;
	}

	.footer-left h3 {
		text-align: center;
		font-size: 18px;
	}

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

	.footer-right img {
		margin-top: 16px;
		max-width: 180px;
	}

	.footer-nav {
		flex-direction: column;
		gap: 10px;
	}
}

@media (max-width: 768px) {
	.nav-links {
		position: absolute;
		top: 70px;
		right: 0;
		background: white;
		flex-direction: column;
		width: 200px;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}
	.navbar-collapse {
		border-radius: 12px; /* rounded corners but NOT a pill */
		background: #fff; /* solid background for dropdown */
		padding: 10px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
	/* Fade-out effect for mobile menu */
	.navbar-collapse.fade-out {
		opacity: 0;
		transition: opacity 0.4s ease;
	}

	.nav-links.open {
		transform: translateX(0);
	}

	.burger {
		display: flex;
	}

	.puzzle-item img {
		width: 140px;
	}
	.puzzle-item_3 img {
		width: 140px;
	}

	.puzzle-item span {
		font-size: 0.85rem;
	}
	.puzzle-item_3 span {
		font-size: 0.85rem;
	}

	/*** MARK: About Mobile***/
	.devfest-tags {
		flex-wrap: wrap;
	}

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

	.section-subtitle {
		font-size: 16px;
	}

	/** MARK: Speakers Mobile **/
	.speakers-subtitle {
		font-size: 16px;
	}
	.speaker-card img {
		width: 40px;
	}
}
[data-aos] {
	opacity: 0;
	transition-property: transform, opacity;
}
[data-aos].aos-animate {
	opacity: 1;
}
/* ==================== MARK: AICOMPETITION (aicompetition.html) ==================== */
.page-aicompetition .hero-section {
	padding: 110px 24px 24px;
}
.page-aicompetition .hero-container {
	gap: 28px;
	align-items: center;
}
.page-aicompetition .hero-title {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.15;
	margin-bottom: 12px;
}
.page-aicompetition .subtitle {
	font-size: clamp(15px, 2vw, 20px);
	margin-bottom: 8px;
}
.page-aicompetition .hero-buttons {
	gap: 12px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.page-aicompetition .btn-green,
.page-aicompetition .btn-yellow {
	padding: 10px 18px;
	font-size: 16px;
	border-radius: 28px;
	border-width: 1px;
	width: auto;
	min-width: 0;
	box-shadow: none;
	transform: none;
}
.page-aicompetition .btn-green:hover,
.page-aicompetition .btn-yellow:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.page-aicompetition .hero-image img {
	width: 100%;
	max-width: 320px;
}

/* --- Responsive --- */
@media (max-width: 992px) {
	.page-aicompetition .hero-image img {
		max-width: 260px;
	}
}
@media (max-width: 768px) {
	.page-aicompetition .hero-section {
		padding: 96px 16px 8px;
	}
	.page-aicompetition .hero-title {
		font-size: 24px;
	}
	.page-aicompetition .subtitle {
		font-size: 14px;
	}
	.page-aicompetition .hero-buttons {
		gap: 10px;
	}
	.page-aicompetition .btn-green,
	.page-aicompetition .btn-yellow {
		width: 100%;
		max-width: 280px;
		padding: 11px 16px;
	}
	.page-aicompetition .hero-image {
		margin-top: 8px;
	}
}
/* ===MARK:  Schedule: speaker images in a grid (desktop/tablet) === */
.schedule-section .slot {
	/* media column sizes to content; text gets the rest */
	grid-template-columns: max-content 1fr; /* no !important here */
}

.slot-body {
	min-width: 0;
} /* allow text to wrap instead of overflow */

/* 3 × 2 grid for up to 6 images (desktop/tablet) */
.slot-media {
	display: grid;
	grid-template-columns: repeat(3, 64px); /* 3 per row */
	grid-auto-rows: 64px;
	gap: 8px;
	align-content: start;
}

/* square thumbs */
.slot-media img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px; /* square-ish corners */
	border: 1px solid #000;
}

/* === MOBILE: stack media above text, 2 × 3 grid === */
@media (max-width: 768px) {
	.schedule-section .slot {
		/* force one column on mobile so text has full width */
		grid-template-columns: 1fr !important;
	}
	.slot-media {
		/* 2 per row, up to 3 rows (6 images) */
		grid-template-columns: repeat(3, 56px);
		grid-auto-rows: 56px;
		gap: 6px;
		margin-bottom: 8px; /* add space before title */
		justify-content: start;
	}
	.slot-media img {
		width: 56px;
		height: 56px;
	}
}

/* ===== MARK:  Speaker Bio Modal ===== */
.bio-modal {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 1000;
}
.bio-modal.is-open {
	display: block;
}

.bio-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(2px);
}

.bio-modal__dialog {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(720px, 92vw);
	background: #fff;
	border: 1px solid #000;
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	padding: 16px;
	font-family: "Inter", sans-serif;
}

.bio-modal__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 36px;
	height: 36px;
	border: 1px solid #000;
	border-radius: 999px;
	background: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.bio-modal__header {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	align-items: center;
	margin-bottom: 10px;
}
.bio-modal__photo {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border: 1px solid #000;
	border-radius: 14px;
	background: #fff;
}
.bio-modal__name {
	font-size: 22px;
	margin: 0 0 2px;
	font-weight: 800;
}
.bio-modal__role {
	margin: 0;
	font-weight: 700;
	font-size: 14px;
}
.bio-modal__meta {
	margin: 2px 0 0;
	font-size: 14px;
	color: #333;
}

.bio-modal__body {
	margin: 10px 0 6px;
	font-size: 15px;
	line-height: 1.5;
	color: #222;
}
.bio-modal__body p {
	margin: 0 0 10px;
}

.bio-modal__socials {
	display: inline-flex;
	gap: 10px;
	padding: 6px 8px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 999px;
}
.bio-modal__socials a img {
	width: 24px;
	height: 24px;
	display: block;
}

/* Bio button (match pills) */
.btn-bio {
	margin-top: 8px;
	padding: 8px 14px;
	border: 1px solid #000;
	border-radius: 999px;
	background: #ebebeb;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-bio:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.btn-bio:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Mobile tweaks */
@media (max-width: 480px) {
	.bio-modal__dialog {
		padding: 14px;
	}
	.bio-modal__header {
		grid-template-columns: 72px 1fr;
	}
	.bio-modal__photo {
		width: 72px;
		height: 72px;
	}
}

/* MARK: MODAL backdrop */
.modal {
	display: none; /* hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 9999;
	justify-content: center;
	align-items: center;
}

/* Show when open */
.modal.open {
	display: flex;
}

/* Modal box */
.modal-content {
	background: #fff;
	border-radius: 16px;
	max-width: 700px;
	width: 90%;
	padding: 24px;
	color: #222;
	position: relative;
}

/* Close button */
.modal-close {
	position: absolute;
	top: 12px;
	right: 16px;
	font-size: 28px;
	font-weight: bold;
	border: none;
	background: transparent;
	cursor: pointer;
}

/* Speaker header */
.modal-header {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-bottom: 16px;
}

.modal-photo {
	width: 120px;
	height: 120px;
	border-radius: 12px;
	object-fit: cover;
}

.modal-header-text h3 {
	font-size: 22px;
	margin: 0;
}

.modal-header-text p {
	margin: 2px 0;
	color: #555;
	font-size: 14px;
}

.modal-body {
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}
/* Container for action buttons inside card */
.person-actions {
	display: flex;
	justify-content: center; /* centers horizontally */
	margin-top: 10px;
}

/* Optional: make button wider */
.btn-bio {
	padding: 8px 20px;
	min-width: 120px;
	text-align: center;
}
/* Speaker cards: equal height */
.person-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* spread content */
	height: 100%; /* fills grid cell */
	min-height: 380px; /* 🔥 pick a size that fits all */
}

/* Info section grows naturally */
.person-info {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	text-align: center; /* keeps everything aligned */
}

/* Actions row (button) pushed to bottom */
.person-actions {
	margin-top: auto; /* push down */
	display: flex;
	justify-content: center;
}

.speaker-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	align-items: stretch; /* 🔥 force equal height */
}
/* ===== MARK: EQUAL HEIGHT: Organizers & Facilitators ===== */
/* 1) make grid cells stretch */
.org-grid {
	align-items: stretch;
	grid-auto-rows: 1fr; /* helps even out implicit rows */
}

/* 2) make the cards fill their grid cell and use flex layout */
.org-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 380px; /* 🔁 matches .person-card min-height */
}

/* 3) lock avatar space so text/links don’t shift heights */
.org-avatar-large {
	flex: 0 0 180px; /* same visual size as before */
	width: 180px;
	height: 180px;
	align-self: center; /* keep centered regardless of text length */
}

/* 4) clamp text so long names/affils don’t grow the card */
.org-name,
.org-affil {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.org-name {
	-webkit-line-clamp: 2;
	min-height: 2.6em;
} /* ~2 lines */
.org-affil {
	-webkit-line-clamp: 2;
	min-height: 2.6em;
} /* ~2 lines */

/* 5) keep socials (or any actions) pinned to the bottom if present */
.org-links,
.org-actions {
	margin-top: auto;
}

/* 6) mobile tweak: keep the same logic with slightly smaller min-height */
@media (max-width: 768px) {
	.org-card {
		min-height: 340px;
	}
	.org-avatar-large {
		flex-basis: 160px;
		width: 160px;
		height: 160px;
	}
}
/* MOBILE: keep 2 cards per row */
@media (max-width: 768px) {
	.speaker-list-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px;
	}
}
/* Fix spacing inside organizer/facilitator cards */
.org-name {
	margin: 6px 0 2px !important; /* kill default h3 margin */
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2; /* tighter vertical rhythm */
}

.org-affil {
	margin: 0 0 6px !important;
	font-size: 13px;
	line-height: 1.3;
	color: #444;
}

.org-card {
	padding: 16px 12px; /* reduce inside padding */
}
/* === Make long bios scrollable (works for BOTH modal systems) === */

/* 1) Flex dialog + capped height */
.bio-modal__dialog,
#speakerModal .modal-content {
	display: flex;
	flex-direction: column;
	max-height: min(88vh, 88dvh); /* handles mobile address bar */
	overflow: hidden; /* contain scroll to body area */
}

/* 2) The scrolling area */
.bio-modal__body,
#speakerModal #modal-bio {
	overflow: auto;
	-webkit-overflow-scrolling: touch; /* iOS smooth scroll */
	flex: 1 1 auto;
	min-height: 0; /* 🔑 lets flex child actually scroll */
}

/* 3) Keep header/footer fixed if present */
.bio-modal__header,
#speakerModal .modal-header {
	flex: 0 0 auto;
}

/* 4) Give the body some breathing room for the close button */
.bio-modal__body,
#speakerModal #modal-bio {
	padding-right: 4px; /* avoids hidden scrollbar overlap */
	max-height: none; /* the flex + max-height on dialog controls it */
}
body.modal-open {
	overflow: hidden;
}
/* modal container centers, blocks page scroll propagation */
.modal {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 9999;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.8);
	overscroll-behavior: contain; /* ✅ prevent pull-to-refresh poking through */
}
.modal.open {
	display: flex;
}

/* make the dialog a flex column with a capped height */
#speakerModal .modal-content {
	display: flex;
	flex-direction: column;
	max-height: min(88vh, 88dvh);
	overflow: hidden; /* container holds the scroller */
}

/* the ONLY scroller */
#speakerModal .modal-body,
#speakerModal #modal-bio {
	flex: 1 1 auto;
	min-height: 0; /* ✅ allows child to actually scroll */
	overflow: auto;
	-webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
	padding-right: 4px;
}

/* lock background when open (pairs with the JS above) */
body.modal-open {
	position: fixed; /* iOS-safe page lock */
	width: 100%;
	overflow: hidden;
}
/* High-School page tweaks */
header .display-5 {
	letter-spacing: 0.2px;
}
/* ==================== UNIFIED BUTTON BASE ==================== */
.btn-base {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px; /* same height for all */
	padding: 0 22px; /* horizontal padding */
	border-radius: 999px; /* pill shape */
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

/* Hover/active effect shared */
.btn-base:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.btn-base:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Green button */
.btn-green,
.footer-btn {
	@extend .btn-base; /* (if using SCSS) or just add both classes in HTML */
	background: #c3dfc4;
	color: #000;
	border: 2px solid #000;
}
.btn-green:hover,
.footer-btn:hover {
	background: #fff;
	color: #000;
}

/* Yellow button */
.btn-yellow {
	@extend .btn-base;
	background: #fae8c8;
	color: #000;
	border: 2px solid #000;
}

/* Google Blue button */
.btn-google {
	@extend .btn-base;
	background: #4285f4;
	color: #fff;
	border: 2px solid #000;
}

/* Bio button */
.btn-bio {
	@extend .btn-base;
	background: #ebebeb;
	color: #000;
	border: 1px solid #000;
	font-size: 14px; /* slightly smaller */
}