/* KIDDYKODE single-page redesign */
:root {
	--kk-mint: #c8f4d4;
	--kk-lemon: #fff4b8;
	--kk-blue: #cfe4ff;
	--kk-pink: #ffd6e8;
	--kk-green: #45914d;
	--kk-deep-green: #2a572f;
	--kk-gold: #fdbf00;
	--kk-yellow: #ffd42d;
	--kk-ink: #183642;

	/* Font size variables */
	--fs-xxl: 2.5rem;     /* Hero headline */
	--fs-xl: 2rem;        /* Section headline */
	--fs-lg: 1.4rem;      /* Subheadline, key points */
	--fs-md: 1.125rem;    /* Body text, regular paragraphs */
	--fs-sm: 1rem;        /* Small text, program cards */
	--fs-sm: 1rem;        /* Small text, program cards */
	--fs-xs: 0.875rem;    /* Tiny text, captions */

	/* ANIMATION VARIABLES */
	--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
	--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
	
	--transition-base: all 0.4s var(--ease-smooth);
	--transition-bounce: all 0.5s var(--ease-out-back);
	
	--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-glow: 0 0 15px rgba(253, 191, 0, 0.4);
}

/* Base & Fonts */
@font-face {
	font-family: 'UltraRegular';
	src: url('../fonts/ultra-webfont.eot');
	src: url('../fonts/ultra-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/ultra-webfont.woff') format('woff'),
	url('../fonts/ultra-webfont.ttf') format('truetype'),
	url('../fonts/ultra-webfont.svg#UltraRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'open_sansregular';
	src: url('../fonts/opensans-regular-webfont.eot');
	src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/opensans-regular-webfont.woff') format('woff'),
	url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
	url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	background: var(--kk-deep-green);
	color: var(--kk-pink);
	font-family: 'Inter', 'DM Sans', sans-serif;
	font-size: 16px;
	margin: 0;
	min-width: 0;
}

a {
	outline: none;
	text-decoration: none;
	color: inherit;
}
img {
	border: 0;
	max-width: 100%;
}
p {
	letter-spacing: 0.025em;
	line-height: 1.5;
	margin: 0 0 1em;
}

/* Layout Wrapper */
.site-wrapper {
	background: var(--kk-green);
	border-radius: 28px;
	box-shadow: 0 20px 60px rgba(21, 71, 52, 0.12);
	display: flex;
	flex-direction: column;
	max-width: 1120px;
	margin: 40px auto;
	padding: 24px 40px;
	width: 90%;
}

/* Header */
#header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 0 0 28px;
	flex-wrap: wrap;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* smooth transition */
}

.kk-logo {
	align-items: center;
	column-gap: 4px;
	display: inline-flex;
	text-decoration: none;
}

.logo-letter {
	font-family: 'Poppins', 'DM Sans', sans-serif;
	font-size: 30px;
	line-height: 1;
	text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.kk-logo-small .logo-letter {
	font-size: 24px;
}

.kk-logo-small-small .logo-letter {
	font-size: 18px;
}

.logo-k { color: #e63946; }  /* Red */
.logo-i { color: #fdbf00; }  /* Yellow */
.logo-d1 { color: #57a773; } /* Green */
.logo-d2 { color: #4da6ff; } /* Light Blue */
.logo-y { color: #2a6fdb; }  /* Blue */
.logo-k2 { color: #e63946; } /* Red */
.logo-o { color: #fdbf00; }  /* Yellow */
.logo-d3 { color: #4da6ff; } /* Light Blue */
.logo-e { color: #1d4ed8; }  /* Deep Blue */

.kk-nav {
	align-items: center;
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kk-nav li {
	margin: 0;
	padding: 0;
}

.kk-nav a {
	color: rgba(255, 255, 255, 0.9);
	font-family: 'Poppins', 'DM Sans', sans-serif;
	font-size: var(--fs-md);
	font-weight: 600;
	padding: 4px 0;
	position: relative;
	transition: color 0.2s ease;
}

.kk-nav a:hover,
.kk-nav li.current a {
	color: var(--kk-yellow);
}

.kk-nav a::after {
	background: var(--kk-yellow);
	bottom: 0;
	content: '';
	height: 3px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
	width: 100%;
}

.kk-nav a:hover::after,
.kk-nav li.current a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Remove nav link animation for CTA button */
.kk-nav a.btn::after {
	display: none !important;
}

.kk-nav a.btn:hover,
.kk-nav li.current a.btn {
	color: var(--neutral-900) !important; /* Keep explicit button text color */
}

/* Main Content */
#main {
	flex: 1;
}

/* Hero Section */
.kk-hero {
	background: var(--kk-ink);
	border-radius: 24px;
	color: #fff;
	display: flex;
	gap: 40px;
	margin-bottom: 40px;
	overflow: hidden; /* Changed from visible to hidden to contain carousel */
	position: relative;
	padding: 60px 48px;
}

.mini-hero {
	min-height: 350px;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	margin-bottom: 30px;
}

.mini-hero .hero-text {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	z-index: 2; /* Ensure text is above carousel */
}

.mini-hero h1 {
	font-size: var(--fs-xxl);
	margin-bottom: 16px;
}

.mini-hero p {
	font-size: var(--fs-lg);
	opacity: 0.9;
}

.hero-text {
	flex: 1;
	z-index: 2;
}

.hero-kicker {
	color: var(--kk-yellow);
	font-family: 'Poppins', sans-serif;
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.hero-text h1 {
	font-family: 'Poppins', sans-serif;
	font-size: var(--fs-xxl);
	line-height: 1.1;
	margin: 0 0 24px;
	text-shadow: 0 4px 0 var(--kk-deep-green);
}

.hero-tagline {
	color: #e0f2fe;
	font-size: var(--fs-md);
	line-height: 1.6;
	margin-bottom: 32px;
	max-width: 500px;
}

.hero-ctas {
	display: flex;
	gap: 16px;
	margin-bottom: 40px;
}

.btn {
	/* Premium Button Styles */
	border-radius: 50px;
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-size: var(--fs-md);
	font-weight: 700;
	padding: 12px 32px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: var(--transition-bounce);
}

.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
	transition: all 0.6s;
	z-index: -1;
}

.btn:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: var(--shadow-lg);
}

.btn:hover::before {
	left: 100%;
}

.btn-primary {
	background: var(--kk-gold);
	box-shadow: 0 4px 0 #d9a300;
	color: var(--kk-ink);
}

.btn-primary:hover {
	background: var(--kk-yellow);
	box-shadow: 0 6px 0 #d9a300;
}

.btn-secondary {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
	color: #fff;
}

.btn-secondary:hover {
	background: rgba(255, 255, 255, 0.2);
}

.hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	padding: 0;
}

.hero-tags li {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	color: var(--kk-mint);
	font-family: 'Inter', sans-serif;
	font-size: var(--fs-sm);
	font-weight: 600;
	padding: 4px 12px;
}

/* Sections General */
.kk-section {
	margin-bottom: 60px;
}

.section-heading {
	margin-bottom: 40px;
	text-align: center;
}

.section-heading h2 {
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: var(--fs-xl);
	margin: 0 0 8px;
}

.section-heading p {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--fs-lg);
	margin: 0;
}

/* About Section */
.kk-about .about-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	color: var(--kk-ink);
	padding: 48px;
}

.kk-about .section-heading h2 {
	color: var(--kk-deep-green);
}

.kk-about .section-heading p {
	color: var(--kk-green);
}

.about-grid {
	font-size: var(--fs-md);
	line-height: 1.7;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.about-highlight {
	background: var(--kk-ink);
	border-radius: 12px;
	margin-top: 24px;
	padding: 24px;
	color: #fff;
}

.about-highlight h3 {
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: var(--fs-lg);
	margin: 0 0 8px;
}

.about-highlight p {
	margin: 0;
}

/* Programs Section */
.program-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

.program-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	color: var(--kk-ink);
	padding: 24px;
	text-align: center;
	transition: var(--transition-bounce);
	border: 1px solid rgba(0,0,0,0.05);
}

.program-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
}

.program-card.program-deep-green { border-top: 6px solid var(--kk-deep-green); }
.program-card.program-lemon { border-top: 6px solid var(--kk-gold); }
.program-card.program-blue { border-top: 6px solid #4a90e2; }
.program-card.program-pink { border-top: 6px solid #e91e63; }

.program-icon {
	font-size: 32px;
	margin-bottom: 16px;
}

.program-card h3 {
	font-family: 'Poppins', sans-serif;
	font-size: var(--fs-lg);
	line-height: 1.2;
	margin: 0 0 12px;
}

.program-card p {
	font-size: var(--fs-sm);
	margin: 0;
	opacity: 0.85;
}

/* Skills Section */
.skills-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
}

.skill-card {
	background: var(--kk-deep-green);
	border-radius: 12px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: 
		"icon title"
		"desc desc";
	align-items: center;
	column-gap: 16px;
	row-gap: 12px;
	padding: 24px;
	text-align: left;
}

.skill-card .skill-icon {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-area: icon;
	font-size: 24px;
	height: 48px;
	width: 48px;
}

.skill-card h3 {
	color: var(--kk-lemon);
	font-family: 'Poppins', sans-serif;
	font-size: var(--fs-lg);
	grid-area: title;
	margin: 0;
	transition: transform 0.3s ease;
}

.skill-card:hover h3 {
	transform: translateX(5px);
}

.skill-card p {
	color: #fff;
	font-size: var(--fs-sm);
	grid-area: desc;
	line-height: 1.6;
	margin: 0;
}

/* Contact Section */
.contact-layout {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	color: var(--kk-ink);
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	overflow: hidden;
}

.contact-info {
	background: var(--kk-ink);
	color: #fff;
	padding: 40px;
	display: flex;
	flex-direction: column;
}

.social-links {
	margin-top: auto;
	padding-top: 32px;
	display: flex;
	gap: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links img {
	opacity: 0.8;
	transition: opacity 0.2s;
}

.social-links img:hover {
	opacity: 1;
}

.contact-item {
	display: flex;
	gap: 16px;
	margin-bottom: 32px;
}

.contact-item:last-child {
	margin-bottom: 0;
}

.contact-icon {
	font-size: 24px;
}

.contact-item h3 {
	color: var(--kk-mint);
	font-family: 'Poppins', sans-serif;
	font-size: var(--fs-md);
	margin: 0 0 4px;
	text-transform: uppercase;
}

.contact-item p {
	font-size: var(--fs-sm);
	margin: 0;
	opacity: 0.9;
}

.contact-item a {
	border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
}

.contact-form {
	padding: 40px;
}

.form-row {
	margin-bottom: 20px;
}

.form-row label {
	color: var(--kk-deep-green);
	display: block;
	font-weight: 700;
	font-size: var(--fs-xs);
	margin-bottom: 6px;
	text-transform: uppercase;
}

.form-row input,
.form-row textarea {
	background: #f9fdfb;
	border-radius: 10px;
	border: 1px solid rgba(24, 92, 74, 0.18);
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	padding: 10px 14px;
	width: 100%;
	box-sizing: border-box;
}

.form-row textarea {
	resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
	border-color: var(--kk-deep-green);
	box-shadow: 0 0 0 4px rgba(61, 122, 74, 0.2);
	outline: none;
	transform: translateY(-2px);
	transition: var(--transition-base);
}

.form-actions {
	column-gap: 10px;
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
}

.contact-form .btn-secondary {
	background: #f0f7f4;
	box-shadow: 0 4px 0 #dbece5;
	color: var(--kk-deep-green);
}

.contact-form .btn-secondary:hover {
	background: #e2f0ea;
}

.form-note {
	color: rgba(24, 54, 66, 0.7);
	font-size: 11px;
	margin-top: 16px;
	font-style: italic;
}

/* Footer (Simplified) */
#footer {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
}

.footer-inner .footnote {
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	margin: 0;
}

/* Responsive Tweaks */
@media (max-width: 900px) {
	.site-wrapper {
		width: 95%;
		padding: 24px;
		margin: 20px auto;
	}

	.kk-hero {
		flex-direction: column;
		text-align: center;
		padding: 40px 24px;
	}

	.hero-ctas, .hero-tags {
		justify-content: center;
	}
	
	.hero-tagline {
		margin-left: auto;
		margin-right: auto;
	}

	.program-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.skills-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	#header {
		flex-direction: column;
		row-gap: 16px;
	}

	.kk-nav {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
	}
	
	.kk-nav a {
		font-size: var(--fs-sm);
	}

	.program-grid,
	.skills-grid {
		grid-template-columns: 1fr;
	}
	
	.hero-text h1 {
		font-size: 2rem;
	}
	
	.form-actions {
		flex-direction: column;
		gap: 10px;
	}
	
	.form-actions button {
		width: 100%;
		text-align: center;
	}
}

/* Hero Carousel */
.hero-carousel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 24px;
	overflow: hidden;
	z-index: 0; /* Behind content */
}

/* Ensure content sits on top */
.kk-hero > *:not(.hero-carousel) {
	position: relative;
	z-index: 2;
}

.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.hero-slide.active {
	opacity: 1; /* Fully visible */
}

/* Add a dark overlay gradient that fades out to the right */
.hero-carousel::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Gradient from solid ink color on left to transparent on right */
	background: linear-gradient(to right, rgba(24, 54, 66, 1) 30%, rgba(24, 54, 66, 0.6) 60%, rgba(24, 54, 66, 0) 90%);
	z-index: 1;
}
/* ========================================= */
/* MERGED: NEW DESIGN SYSTEM (Phase 2 & 3)   */
/* Used by: programs.html, book.html, etc.   */
/* ========================================= */

:root {
	/* PRIMARY COLORS */
	--primary-green: #3d7a4a;
	--primary-green-light: #5a9d68;
	--primary-green-dark: #2d5a38;

	/* SECONDARY/ACCENT */
	--accent-amber: #f5a623;
	--accent-amber-hover: #e09612;
	--accent-blue: #2563eb;

	/* CULTURAL ACCENT */
	--cultural-terracotta: #c1502e;
	--cultural-gold: #d4a574;

	/* NEUTRALS */
	--neutral-50: #f9fafb;
	--neutral-100: #f3f4f6;
	--neutral-200: #e5e7eb;
	--neutral-500: #6b7280;
	--neutral-700: #374151;
	--neutral-900: #1a2332;

	/* SEMANTIC COLORS */
	--success-green: #10b981;
	--error-red: #ef4444;
	--warning-yellow: #f59e0b;

	/* Font variables */
	--font-heading: 'Poppins', 'DM Sans', sans-serif;
	/* Font variables */
	--font-heading: 'Poppins', 'DM Sans', sans-serif;
	--font-body: 'Inter', 'DM Sans', sans-serif;
}

/* ========================================= */
/* PREMIUM ANIMATIONS (KEYFRAMES & UTILS)    */
/* ========================================= */

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

@keyframes fadeScale {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
	from { opacity: 0; transform: translateX(-30px); }
	to { opacity: 1; transform: translateX(0); }
}

/* Base Reveal Class - Hidden by default */
.reveal {
	opacity: 0;
	transition: opacity 0.8s var(--ease-out-back), transform 0.8s var(--ease-out-back);
}

.reveal.fade-up { transform: translateY(40px); }
.reveal.fade-scale { transform: scale(0.95); }
.reveal.slide-right { transform: translateX(-30px); }

/* Active State (Triggered by JS) */
.reveal.active {
	opacity: 1;
	transform: translate(0) scale(1);
}

/* Stagger Delays for Children */
.stagger-delays > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-delays > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-delays > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-delays > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-delays > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-delays > *:nth-child(6) { transition-delay: 0.6s; }

/* Structural Utils */
.glass-nav {
	background: rgba(255, 255, 255, 0.9) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(0,0,0,0.05);
	border-radius: 30px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.05);
	padding-top: 10px !important;
	padding-right: 30px !important;
	padding-bottom: 10px !important;
	margin-bottom: 30px !important;
}

.glass-nav .kk-nav a {
	color: var(--neutral-700) !important;
}

.glass-nav .kk-nav a:hover,
.glass-nav .kk-nav li.current a {
	color: var(--primary-green) !important;
}

/* UTILITIES */
.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.section {
	padding: 80px 0;
}

.text-center { text-align: center; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }

/* COMPONENT: BUTTONS */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	font-weight: 600;
	border-radius: 50px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
}

.btn-primary {
	background: var(--accent-amber);
	color: var(--neutral-900);
	border: none;
	box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
}

.btn-primary:hover {
	background: var(--accent-amber-hover);
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 6px 20px rgba(245, 166, 35, 0.4);
}

.btn-secondary {
	background: transparent;
	color: var(--primary-green);
	border: 2px solid var(--primary-green);
}

.btn-secondary:hover {
	background: var(--primary-green);
	color: #fff;
	transform: translateY(-2px);
}

/* COMPONENT: NAVIGATION (New) */
.navbar {
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: 1rem 0;
	transition: padding 0.3s ease;
	display: flex;
    width: 100%;
}

.navbar .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
    width: 100%;
}

.logo {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 24px;
	color: var(--primary-green);
	display: flex;
	align-items: center;
	gap: 10px;
}

.logo img {
	height: 40px;
	width: auto;
}

.nav-menu {
	display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 900px) {
	.nav-menu {
		display: flex;
		align-items: center;
		gap: 32px;
	}
}

.nav-link {
	font-weight: 500;
	color: var(--neutral-700);
	position: relative;
	font-size: 14px;
}

.nav-link:hover {
	color: var(--primary-green);
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0%;
	height: 2px;
	background: var(--accent-amber);
	transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
	width: 100%;
}

.nav-link.active {
	color: var(--primary-green);
}

/* Mobile Menu Button */
.hamburger {
	display: block;
	cursor: pointer;
	font-size: 24px;
	color: var(--neutral-900);
}

@media (min-width: 900px) {
	.hamburger { display: none; }
}

/* ANIMATIONS */
.fade-in-up {
	animation: fadeInUp 0.8s ease-out forwards;
	opacity: 0;
	transform: translateY(20px);
}

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

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* BREADCRUMBS */
.breadcrumbs {
	background: var(--neutral-50);
	padding: 10px 30px;
	border: 1px solid var(--neutral-200);
    border-radius: 50px;
	font-size: 14px;
	color: var(--neutral-500);
    margin: 0 0 28px 0;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.breadcrumbs a {
	color: var(--neutral-500);
}

.breadcrumbs a:hover {
	color: var(--primary-green);
}

.breadcrumbs .current {
	color: var(--primary-green);
	font-weight: 500;
}

.breadcrumbs span {
	margin: 0 8px;
}