/* ==================== 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: 80px;
}

/* ==================== 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 60px 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 */
}

/* 🌟 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;
	}
}

/* ==================== 📱 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%;
	}

	/* Let hero-text children reorder naturally */
	.hero-text {
		display: contents;
	}

	/* Title */
	.hero-title {
		order: 1;
		font-size: 22px;
		line-height: 1.2;
		text-align: center;
		max-width: 660px;
		margin: 0 auto 12px;
		display: block;
		word-break: keep-all;
		white-space: normal;
	}
	.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;
	}

	/* 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;
	}
	.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: 24px;
		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);
	}
}

/* ==================== SPONSORS ==================== */
.sponsors-section {
	background: #fff;
	padding: 0 20px; /* room from page edge */
	text-align: center;
}

.sponsors-frame {
	background: #fff;
	border: 1px solid #000;
	border-radius: 50px;
	padding: 20px 24px;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto; /* ✅ center the frame on ultra-wide */
	box-shadow: none;
}

/* Title */
.sponsors-title {
	font-size: 1.6rem;
	margin: 8px 0 18px;
}

/* Grid container for logos */
.puzzle-track {
	display: grid; /* ✅ no Bootstrap flex */
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px; /* even spacing between tiles */
	justify-items: center;
	align-items: center;
}

/* Each tile */
.puzzle-item {
	width: 100%;
	max-width: 180px; /* keeps tiles from exploding on huge screens */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Logo image */
.puzzle-item img {
	width: 100%;
	max-width: 150px; /* visual cap */
	max-height: 110px;
	height: auto;
	object-fit: contain;
	display: block;
}

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

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

/* Mobile (≤768px): 2 per row */
@media (max-width: 768px) {
	.sponsors-title {
		font-size: 1.4rem;
	}
	.sponsors-frame {
		padding: 16px 16px;
	}
	.puzzle-track {
		grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ exactly 2 */
		gap: 14px;
	}
	.puzzle-item {
		max-width: none;
	} /* let grid control width */
	.puzzle-item img {
		max-width: 120px;
		max-height: 95px;
	}
}

/* Tablet (769–992px): 3 per row */
@media (min-width: 769px) and (max-width: 992px) {
	.puzzle-track {
		grid-template-columns: repeat(3, 1fr); /* ✅ exactly 3 */
		gap: 18px;
	}
	.puzzle-item img {
		max-width: 135px;
		max-height: 100px;
	}
}

/* Large desktop (≥1400px): allow a little more breathing room */
@media (min-width: 1400px) {
	.puzzle-track {
		gap: 28px;
	}
}

/* ===== 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;
	}
}

/* ===== 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;
}

/* ==================== MARK:  SPEAKERS & SESSIONS (scoped) ==================== */
.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 chips (visual only for now) */
/* ===== 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; /* keep consistent with your site style */
	cursor: default;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Google-style pastel colors (matching your site) */
.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 & Innovation – light yellow */
.tag-chip:nth-child(4) {
	background: #f6d2d2;
} /* Cybersecurity – 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: 4 per row desktop, 3 tablet, 2 mobile */
.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: 14px;
	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 12px rgba(0, 0, 0, 0.08);
}

/* Consistent image area */
.person-photo-wrap {
	aspect-ratio: 4 / 5; /* keeps uniform height */
	width: 100%;
	background: #e9f6ff;
	display: block;
}
.person-photo {
	width: 100%;
	height: 100%;
	object-fit: cover; /* fills nicely; swap to contain if you prefer letterboxing */
	display: block;
}

/* Text area */
.person-info {
	padding: 10px 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;
}

/* Чтобы ссылка выглядела как кнопка (по стилю ближе к button) */
.speakers-buttons a.btn-outline {
	display: inline-flex; /* превращаем ссылку в 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; /* или белый, если хочешь как на button */
}

/* ===== SPEAKER SOCIAL ICONS ===== */
.speaker-socials {
	display: flex;
	gap: 14px; /* space between LinkedIn and X */
	margin-top: 10px;
	margin-bottom: 10px; /* space above the icons */
	padding-left: 6px; /* push them a little away from the card edge */
}

.speaker-socials a img {
	width: 38px; /* larger icons */
	height: 38px;
	transition: transform 0.2s ease;
}

.speaker-socials a img:hover {
	transform: scale(1.15); /* nice hover grow effect */
}

/* Mobile behavior: show only first 8 until "Load more" */
.is-hidden-mobile {
	display: block;
}
.btn-mobile-only {
	display: none;
}
/* ✅ Override only Load More button */
#loadMoreSpeakers {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 12px; /* Material-style rounded */
	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;
}

/* Hover effect */
#loadMoreSpeakers:hover {
	background: #3367d6; /* darker blue */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

/* Pressed effect */
#loadMoreSpeakers:active {
	background: #2a56c6;
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* 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;
	}
	.is-hidden-mobile {
		display: none !important;
	} /* hide items 9–24 */
	.btn-mobile-only {
		display: inline-block;
	} /* show the load more button */
}

/* ===== FOOTER (Google style) ===== */
/* ===== FOOTER COLUMN STYLE ===== */
.footer-section {
	background: #fff;
	border-top: 1px solid #ddd;
	padding: 50px 20px 30px;
	text-align: center;
	font-family: "Inter", sans-serif;
	color: #333;
}

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

.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: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}
.dashdev-logo {
	height: 20px;
	vertical-align: middle;
	transition: transform 0.2s ease;
}
.dashdev-link:hover .dashdev-logo {
	transform: scale(1.1);
}

/* 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 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) ==================== */
/* Requires: <main class="page-wrap page-aicompetition"> */

/* --- Compact hero + buttons --- */
.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;
}

/* --- CTA chips (Devpost + Email) --- */
.page-aicompetition .cta-row {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 18px;
}
.page-aicompetition .btn-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 20px;
	border: 1px solid #000;
	border-radius: 999px;
	font: 600 16px/1 "Inter", system-ui, sans-serif;
	text-decoration: none;
	color: #000;
	background: #fff;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.page-aicompetition .btn-chip__label {
	white-space: nowrap;
	letter-spacing: 0.1px;
}
.page-aicompetition .btn-chip--green {
	background: #c3dfc4;
} /* light green */
.page-aicompetition .btn-chip--peach {
	background: #fae8c8;
} /* peach */
.page-aicompetition .btn-chip:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.page-aicompetition .btn-chip:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

/* --- Bullet chips --- */
.page-aicompetition .bullet-grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 20px;
}
.page-aicompetition .bullet-chip {
	background: #fff;
	border: 1px solid #000;
	border-radius: 30px;
	padding: 12px 18px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-aicompetition .bullet-chip:nth-child(1) {
	background: #bde9f4;
}
.page-aicompetition .bullet-chip:nth-child(2) {
	background: #c3dfc4;
}
.page-aicompetition .bullet-chip:nth-child(3) {
	background: #ffe2a0;
}
.page-aicompetition .bullet-chip:nth-child(4) {
	background: #f6d2d2;
}
.page-aicompetition .bullet-chip:nth-child(5) {
	background: #d0c4f6;
}
.page-aicompetition .bullet-chip:nth-child(6) {
	background: #fae8c8;
}
.page-aicompetition .bullet-chip:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* --- Devpost card --- */
.page-aicompetition .devpost-card {
	background: #fff;
	border: 1px solid #000;
	border-radius: 16px;
	padding: 22px 18px;
	max-width: 900px;
	margin: 0 auto;
}

/* --- 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;
	}
	.page-aicompetition .cta-row {
		gap: 12px;
	}
	.page-aicompetition .btn-chip {
		height: 44px;
		padding: 0 16px;
		font-size: 15px;
		width: 100%;
		max-width: 320px;
	}
}