nav {
	background: #f3f4f6;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	padding: 0.5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: 90px; /* Expanded for extra menu item */
	border-radius: 18px;
	margin: 12px 18px;
}

nav ul {
	display: flex;
	gap: 1.2rem;
	list-style: none;
	margin-left: auto;
	padding: 0;
}
/* Mobile nav toggle button (hidden on desktop) */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	margin-left: auto;
}
.nav-toggle .bar {
	display: block;
	width: 22px;
	height: 2px;
	margin: 5px 0;
	background: #222;
	border-radius: 2px;
}
nav ul li a {
	color: #222;
	font-weight: 500;
	font-size: 1.08em;
	text-decoration: none;
	padding: 0.5em 1em;
	border-radius: 6px;
	transition: background 0.2s, color 0.2s;
	display: block;
	white-space: nowrap;
}
nav ul li a:hover,
nav ul li a:focus,
nav ul li a.active {
	background: #1db954;
	color: #fff;
}

/* Language switch (EN/DE segmented control) */
.lang-switch {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	background: #e8eef0;
	border-radius: 999px;
	padding: 2px;           /* smaller padding */
	gap: 2px;               /* tighter gap */
	min-width: 92px;        /* smaller min width */
	height: 32px;           /* smaller height */
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.lang-switch a {
	position: relative;
	z-index: 1;
	text-decoration: none;
	text-align: center;
	font-weight: 600;
	font-size: 0.95em;      /* slightly smaller text */
	color: #1a1a1a;
	padding: 4px 8px;       /* tighter padding */
	border-radius: 999px;
	line-height: 20px;      /* match reduced height */
}
.lang-switch a[aria-pressed="true"] {
	color: #0b4d2a;
}
.lang-switch .lang-thumb {
	position: absolute;
	top: 2px;               /* align with reduced padding */
	left: 2px;
	width: calc(50% - 2px);
	height: calc(100% - 4px);
	background: #c9f2d7;
	border-radius: 999px;
	transition: transform 0.2s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.lang-switch.de .lang-thumb {
	transform: translateX(100%);
}
.lang-switch a:hover,
.lang-switch a:focus {
	background: transparent;
	color: #0b4d2a;
}
.lang-switch:hover {
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
/* Core Competence cards */
#core-competence {
	background: #fff;
	margin-bottom: 2rem;
}
.core-cards {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	align-items: center;
	margin-top: 1.5rem;
}
.core-row {
	display: flex;
	gap: 1.2rem;
}
.core-card {
	background: #f3f4f6;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	padding: 1.1rem 2.2rem;
	font-size: 1.08rem;
	font-weight: 600;
	color: #006600;
	min-width: 110px;
	text-align: center;
	letter-spacing: 0.5px;
	transition: box-shadow 0.2s, transform 0.2s;
}
.core-card:hover {
	box-shadow: 0 6px 18px rgba(0,102,0,0.13);
	transform: translateY(-4px) scale(1.04);
}
/* Section backgrounds */
#what {
	background: #fff;
}
#about {
	background: #fff;
}

section, #core-competence {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	margin-bottom: 2.5rem;
}
/* Industry row for 3x2 grid */
.industry-row {
	display: flex;
	gap: 2rem;
	justify-content: flex-start;
	margin-bottom: 2rem;
}
/* What We Do cards */
.what-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
}

.what-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	padding: 2em 1.5em 3em 1.5em;
	min-width: 260px;
	max-width: 340px;
	flex: 1 1 260px;
	margin-bottom: 2em;
	position: relative;
	transition: box-shadow 0.2s;
}
.what-card:hover {
	box-shadow: 0 4px 20px rgba(30,185,84,0.15);
}
.what-card h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.15rem;
	font-weight: 600;
	color: #006600;
}
.what-card p {
	color: #444;
	font-size: 1rem;
	margin: 0;
}
/* Collapsible What We Do cards */
.toggle-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	color: #1db954;
	background: none;
	border: none;
	cursor: pointer;
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	transition: color 0.2s;
	line-height: 1;
}
.toggle-btn:hover {
	color: #14863c;
}
.collapsible.open .toggle-btn {
	transform: translateX(-50%) rotate(180deg);
}
.card-list {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s cubic-bezier(.4,0,.2,1);
	margin: 0.5rem 0 0 0;
	padding-left: 1.2rem;
	color: #222;
	background: #f8f9fb;
	border-radius: 8px;
	font-size: 0.98rem;
}
.collapsible.open .card-list {
	max-height: 300px;
	padding-bottom: 0.5rem;
}
/* Industry cards */
.industry-cards {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 860px;
	margin: 2rem auto 2rem auto;
}
.industry-row {
	display: flex;
	gap: 2rem;
	justify-content: flex-start;
}
.industry-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.08);
	padding: 2rem 1.5rem 1.2rem 1.5rem;
	width: 180px;
	min-height: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s, box-shadow 0.2s;
	cursor: default;
}
.industry-card:hover {
	transform: translateY(-8px) scale(1.04);
	box-shadow: 0 8px 32px rgba(0,119,255,0.12);
}
.industry-icon {
	font-size: 3.2rem;
	margin-bottom: 1rem;
	line-height: 1;
}
.industry-label {
	font-size: 1.1rem;
	font-weight: 600;
	color: #006600;
	text-align: center;
}
/* Center all main content vertically and horizontally */
.main-content {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

section, header {
	width: 100%;
	max-width: 1100px;
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

footer {
	width: 100%;
}
/* Header section styles */
header {
	background: linear-gradient(90deg, #00994d 0%, #006600 100%);
	color: #fff;
	text-align: center;
	padding: 4rem 1.5rem 3rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin-left: var(--page-left, 0px);
	margin-right: var(--page-right, 0px);
}
header h1 {
	font-size: 2.8rem;
	font-weight: 700;
	margin-bottom: 1rem;
	letter-spacing: 1px;
}
header p {
	font-size: 1.3rem;
	font-weight: 400;
	margin-bottom: 2rem;
	max-width: 600px;
}
.cta {
	background: #fff;
	color: #006600;
	padding: 0.9rem 2.2rem;
	border-radius: 30px;
	font-weight: 600;
	font-size: 1.1rem;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: background 0.2s, color 0.2s;
}
.cta:hover {
	background: #006600;
	color: #fff;
}

nav {
	background: #f3f4f6;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	padding: 0.5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: 90px; /* Expanded for extra menu item */
	border-radius: 18px;
	margin: 12px 18px;
}
nav ul {
	display: flex;
	gap: 1.2rem;
	list-style: none;
	margin-left: auto;
	padding: 0;
}
nav ul li a {
	color: #222;
	font-weight: 500;
	font-size: 1.08em;
	text-decoration: none;
	padding: 0.5em 1em;
	border-radius: 6px;
	transition: background 0.2s, color 0.2s;
	display: block;
	white-space: nowrap;
}
nav ul li a:hover,
nav ul li a:focus,
nav ul li a.active {
	background: #1db954;
	color: #fff;
}

.logo {
	flex: 0 0 auto;
	margin: 0;
	padding-right: 2.5rem;
}
.logo img {
	height: 80px;
	display: block;
	max-height: 80px;
	width: auto;
	margin-right: 0;
}
.cta:hover {
	background: #006600;
	color: #fff;
}

/* Footer styles matching header */
footer {
	background: linear-gradient(90deg, #00994d 0%, #006600 100%);
	color: #fff;
	text-align: center;
	padding: 1.2rem 0;
	font-size: 1rem;
	margin-top: 2rem;
	letter-spacing: 0.5px;
	box-sizing: border-box;
	margin-left: var(--page-left, 0px);
	margin-right: var(--page-right, 0px);
}
/* Place custom styles for the website here. You can move the <style> block from index_v0.3.html into this file for better structure. */

body {
	font-family: 'Poppins', Arial, sans-serif;
	margin: 0;
	padding: 0;
	background: #f8f9fb;
	color: #222;
}

nav {
	background: #f3f4f6;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	padding: 0.5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 100;
	height: 90px; /* Fix navbar height across pages */
	border-radius: 18px; /* Keep consistent rounded look */
	margin: 12px 18px; /* Match spacing on all pages */
}
nav .logo img {
	height: 80px;
}


section h2 {
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: 1px;
	color: #006600;
	margin-bottom: 1.5rem;
	text-align: center;
	position: relative;
}

section {
	padding: 3rem 1.5rem;
	max-width: 1100px;
	margin-left: var(--page-left, 0px);
	margin-right: var(--page-right, 0px);
	margin-bottom: 2rem;
	box-sizing: border-box;
	scroll-margin-top: 100px; /* Adjust this value to match your nav bar height + margin */
}
.product-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.08);
	padding: 1.5rem;
	width: 320px;
	transition: transform 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1.5rem;
}
.product-card:hover {
	transform: translateY(-8px) scale(1.03);
	box-shadow: 0 8px 32px rgba(0,119,255,0.12);
}
.product-card img {
	width: 100%;
	border-radius: 10px;
	margin-bottom: 1rem;
	transition: box-shadow 0.2s;
}
.product-card h3 {
	margin: 0.5rem 0 0.5rem 0;
	font-size: 1.3rem;
	font-weight: 600;
}
.product-card p {
	color: #444;
	font-size: 1rem;
	margin: 0 0 0.5rem 0;
}

/* Subtle animation for buttons and cards */
.cta, .product-card, nav ul li a {
	transition: all 0.2s cubic-bezier(.4,0,.2,1);
}

/* Consistent spacing for all sections */
section ul, section .industries {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.approach-horizontal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.approach-step {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 1.2rem 1.2rem 0.7rem 1.2rem;
  text-align: center;
  min-width: 120px;
  transition: box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.approach-step:hover {
  box-shadow: 0 4px 20px rgba(30,185,84,0.15);
}

.approach-icon {
  font-size: 2em;
  margin-bottom: 0.3rem;
  color: #1db954;
}

.approach-arrow {
  font-size: 2em;
  color: #1db954;
  margin: 0 0.5rem;
}

@media (max-width: 900px) {
	.products {
		flex-direction: column;
		align-items: center;
	}
	/* Fix core competence cards for mobile to prevent horizontal scroll */
	.core-row {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.8rem;
		max-width: 100%;
	}
	.core-card {
		min-width: 90px;
		padding: 0.8rem 1.2rem;
		font-size: 1rem;
		flex: 1 1 calc(50% - 0.4rem);
		max-width: calc(50% - 0.4rem);
		box-sizing: border-box;
	}
	/* Fix industries section for mobile to prevent horizontal scroll */
	.industry-cards {
		max-width: 100%;
		margin: 1rem auto;
	}
	.industry-row {
		flex-wrap: nowrap;
		justify-content: space-evenly;
		gap: 0.8rem;
		margin-bottom: 1.2rem;
	}
	.industry-card {
		width: calc(50% - 0.4rem);
		min-width: 0;
		max-width: none;
		padding: 1rem 0.5rem;
		min-height: 120px;
		box-sizing: border-box;
		flex: 1 1 calc(50% - 0.4rem);
	}
	.industry-icon {
		font-size: 2.5rem;
		margin-bottom: 0.5rem;
	}
	.industry-label {
		font-size: 1rem;
	}
	/* Fix why work with us section for mobile */
	#why-work div[style*="display: flex"] {
		flex-direction: column !important;
		gap: 1rem !important;
	}
	#why-work div[style*="display: flex"] > div {
		flex-direction: column !important;
		gap: 1rem !important;
	}
	#why-work div[style*="min-width: 220px"] {
		min-width: auto !important;
		max-width: none !important;
		flex: none !important;
		margin: 0 0.5rem !important;
	}
	/* Show hamburger, turn menu into right-aligned dropdown */
	.nav-toggle { display: block; }
	nav { position: sticky; }
	nav ul#primary-nav {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		right: 18px; /* align to right side */
		left: auto;  /* ensure alignment to the right only */
		margin: 0;
		padding: 10px;
		flex-direction: column;
		gap: 0.4rem;
		background: #ffffff; /* solid background for readability */
		border: 1px solid #e5e7eb; /* subtle border to define edges */
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.12);
		z-index: 1000;
		min-width: 220px;
		height: auto;              /* override any inherited 100% height */
		max-height: calc(100vh - 120px); /* keep within viewport */
		overflow: auto;           /* scroll if long */
		box-sizing: border-box;
		width: max-content;       /* size to fit widest item */
		max-width: calc(100vw - 36px); /* prevent overflow off-screen */
	}
	nav ul#primary-nav.show { display: flex; }
	nav ul#primary-nav li a { padding: 0.85em 1em; display: block; }
	/* Keep language switch grouped at bottom with a divider */
	nav ul#primary-nav li:last-child { border-top: 1px solid #eee; padding-top: 6px; margin-top: 6px; }

	/* Create unified white panel containing hamburger and menu when open */
	nav.menu-open ul#primary-nav {
		position: absolute;
		top: 0; /* align with the top of nav */
		right: 18px; /* right-aligned from screen edge */
		left: auto; /* ensure right alignment only */
		background: #ffffff;
		border: 1px solid #e5e7eb;
		border-radius: 16px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.12);
		z-index: 1001;
		padding: 0.75rem 1rem;
		display: flex !important;
		flex-direction: column;
		gap: 0;
		min-width: 280px;
		width: max-content;
		max-width: calc(100vw - 36px);
		height: auto;
		max-height: calc(100vh - 100px);
		overflow: auto;
	}
	/* Place hamburger inside the white panel at the top */
	nav.menu-open ul#primary-nav::before {
		content: "";
		display: block;
		position: relative;
		width: 100%;
		height: 44px; /* space for hamburger */
		margin-bottom: 0.5rem;
		border-bottom: 1px solid #f0f0f0;
	}
	/* Move hamburger button inside the panel */
	nav.menu-open .nav-toggle {
		position: absolute;
		top: 0.75rem;
		right: 1rem;
		z-index: 1002;
	}

	/* Solid full-screen backdrop when menu is open */
	nav.menu-open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.35); /* semi-transparent backdrop */
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		opacity: 1;
		z-index: 900; /* below the menu panel (1000) */
	}
}

/* Toggle button styles for What We Do cards */
.toggle-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	color: #1db954;
	background: none;
	border: none;
	cursor: pointer;
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	transition: color 0.2s;
}
.toggle-btn:hover {
	color: #14863c;
}
.collapsible.open .toggle-btn {
	transform: translateX(-50%) rotate(180deg);
}
.card-list {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s cubic-bezier(.4,0,.2,1);
	margin: 0.5rem 0 0 0;
	padding-left: 1.2rem;
	color: #222;
	background: #f8f9fb;
	border-radius: 8px;
	font-size: 0.98rem;
}
.collapsible.open .card-list {
	max-height: 300px;
	padding-bottom: 0.5rem;
}

/* Removed stray JavaScript that was incorrectly embedded here */
.dropdown-list {
  margin-top: 1em;
  padding-left: 0;
  list-style: none;
  background: #f8f9fb;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: none;
}
.dropdown-list li {
  padding: 0.7em 1em;
  border-bottom: 1px solid #eee;
}
.dropdown-list li:last-child {
  border-bottom: none;
}

/* Page overlay and spinner for reload transition */
.page-overlay {
	position: fixed;
	inset: 0;
	background: rgba(248, 249, 251, 0.9);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}
.page-overlay.show {
	display: flex;
}
.spinner {
	width: 42px;
	height: 42px;
	border: 4px solid #cfe9da;
	border-top-color: #1db954;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}