@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v44-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	--text-color: #fff;
	--text-dark: #000;
	--bg-textbox-shadow: rgba(0, 0, 0, .5);
	--max-width: 1280px;
}

body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
}
.content-block {
	max-width: var(--max-width);
	margin: 0 auto;
}

/* Header */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 180px;
	background-color: white;
	transition: height .3s ease;
	z-index: 1000;
	.header-content {
		height: 100%;
		display: flex;
		justify-content: space-between;
	}
	nav {
		padding: 20px 0 40px 0;
		align-self: end;
		ul {
			list-style: none;
			display: flex;
			gap: 30px;
			& li.menu-has-children > a::after {
				content: ' ▼';
				font-size: 10px;
			}
		}
		& > ul > li {
			position: relative;
		}
		a {
			text-decoration: none;
			color: #000;
			font-weight: 500;
			padding: 10px;
			display: block;
			&:hover {
				color: #666;
			}
		}
		.menu-submenu {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			background-color: white;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			min-width: 200px;
			li {
				border-bottom: 1px solid #eee;
				&:last-child {
					border-bottom: none;
				}
			}
			a {
				padding: 12px 20px;
				&:hover {
					background-color: #fafafa;
				}
			}
		}
	}
	.logo {
		position: relative;
		height: 100%;
		padding: 10px 0;
		align-self: start;
		a {
			position: relative;
			display: block;
			width: 400px;
			height: 100%;
			background: url(../img/herbold_logo.png) no-repeat left center transparent;
			background-size: contain;
			transition: all .3s ease;
		}
	}
	&.scrolled {
		height: 80px;
		.logo {
			height: 100%;
			a {
				width: 200px;
			}
		}
		nav {
			padding-bottom: 20px;
		}
	}
	.burger-menu {
		display: none;
		flex-direction: column;
		gap: 5px;
		cursor: pointer;
		padding: 10px;
		span {
			width: 30px;
			height: 3px;
			background-color: #333;
			transition: 0.3s;
		}
	}
}

/* Footer */
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #008fb8;
	padding: 20px 0;
	.footer-content {
		padding: 0 20px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	nav ul {
		list-style: none;
		display: flex;
		gap: 50px;
		align-items: center;
		font-size: 14px;
		a {
			text-decoration: none;
			color: white;
			&:hover {
				text-decoration: underline;
			}
		}
	}
	.searchform {
		input {
			padding: 8px 12px;
			border: none;
			border-radius: 4px;
			background-color: #fff;
		}
	}
}

/* Main Content */
main {
	width: 100%;
	padding-top: 180px;
	min-height: calc(100vh - 180px);
	&.scrolled {
		padding-top: 80px;
		min-height: calc(100vh - 80px);
	}
	& > div:last-child {
		padding-bottom: 100px;
	}
}

.maincontent {
	padding: 40px 20px;
	.textprofile-default {
		color: inherit;
		a {
			color: inherit;
		}
	}
	.textprofile-light {
		color: var(--text-color);
		a {
			color: var(--text-color);
		}
	}
	.textprofile-dark {
		color: var(--text-dark);
		a {
			color: var(--text-dark);
		}
	}
	.background-element {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.background {
		position: fixed;
		width: 100%;
		height: 100vh;
	}
	.background, .background-element {
		top: 0;
		left: 0;
		z-index: -1;
		transition: opacity 0.8s ease-in-out;
		&.hidden {
			opacity: 0 !important;
			pointer-events: none;
		}
		&.vignette::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow: inset 0 0 400px rgba(0, 0, 0, 0.8);
			pointer-events: none;
		}
		.bg-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.bg-color {
			width: 100%;
			height: 100%;
		}
		& + .section {
			padding-top: 100px;
		}
	}

	.section {
		min-height: 100vh;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 50px;
		align-items: center;
		justify-content: center;
		padding: 200px 0;
		position: relative;
		&:only-of-type {
			padding-top: 50px;
			min-height: calc(100vh - 350px);
			> div {
				align-self: start;
			}
		}

		> div {
			position: relative;
		}
		.header {
			display: inline-block;
			padding: 20px 40px;
			align-self: start;
			justify-self: start;
			h1 {
				font-size: 50px;
				font-weight: 500;
				line-height: 1.1;
				margin-bottom: 6px;
			}
			p {
				font-size: 28px;
				font-weight: 500;
				line-height: 1.5;
			}
			&.shadow {
				background-color: var(--bg-textbox-shadow);
			}
			& + .imageblock {
				margin-top: 600px;
			}
		}
		.imageblock {
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 0;
			width: 90%;
			max-width: 800px;
			margin: 0 auto;
			box-shadow: 0 0 40px 10px rgba(0, 0, 0, .5);
			img {
				width: 100%;
				height: auto;
				max-width: 100%;
				display: block;
			}
			.textblock {
				display: block;
				padding: 20px 30px;
				background-color: var(--bg-textbox-shadow);
				font-size: 16px;
				line-height: 1.5;
			}
		}
		.imgslider {
			max-width: var(--max-width);
			width: 80vw;
			position: relative;
			margin: 50px auto 0 auto;
			display: block;
			.imageblock {
				box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
			}
			.slick {
				max-width: 100%;
				margin-bottom: 0;
				padding: 20px 0;
				.slick-track {
					display: flex !important;
					align-items: center;
				}
				.slick-slide {
					height: auto !important;
					display: flex !important;
					align-items: center;
					justify-content: center;
				}
				.slick-prev::before, .slick-next::before {
					font-size: 50px;
				}
				.slick-next {
					right: -25px;
				}
				.slick-prev {
					left: -50px;
				}
				.slick-dots {
					position: relative;
					bottom: auto;
					padding-top: 20px;
					li {
						width: auto;
						height: auto;
					}
					li button::before {
						color: var(--text-dark);
						opacity: 1;
						font-size: 18px !important;
						line-height: 1;
					}
					li.slick-active button::before {
						color: var(--text-color);
						opacity: 1;
					}
				}
			}
		}
	}
}


/* Scroll to Top Button */
#scrollTop {
	position: fixed;
	bottom: 120px;
	right: 30px;
	background: url(../img/chevron.svg) no-repeat center #000;
	background-size: 50%;
	color: white;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	text-align: center;
	font-size: 24px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	z-index: 999;
}

#scrollTop:hover {
	background-color: #555;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
	header {
		.header-content {
			padding: 10px;
		}
		nav {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			background-color: #fff;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease;
			&.active {
				display: block;
				max-height: 500px;
			}
			& > ul {
				flex-direction: column;
				gap: 0;
				padding: 10px 0;
			}
			& > ul > li {
				border-bottom: 1px solid #eee;
			}
			a {
				padding: 15px 20px;
			}
			.submenu {
				position: static;
				box-shadow: none;
				background-color: #f5f5f5;
				display: none;
				a {
					padding-left: 40px;
				}
			}
			.has-submenu > a::after {
				float: right;
			}
		}
		.burger-menu {
			display: flex;
			align-self: center;
		}
	}

	.maincontent {
		.section {
			.imgslider {
				.slick {
					.slick-prev, .slick-next {
						display: none !important;
					}
				}
			}
		}
	}
	/* Footer Mobile */
	.footer-content {
		font-size: 0;
		nav {
			display: block;
			margin: 0 auto;
			ul {
				padding: 0;
				display: block;
				text-align: center;
				li {
					border-bottom: 0 none;
					display: inline-block;
					margin: 0 4px 10px 4px;
				}
				.search-box {
					display: block;
					margin-top: 10px;
				}
				.search-box input {
					display: block;
					margin: 10px auto 0 auto;
					width: 200px;
					max-width: 100%;
				}
			}
		}
	}

	#scrollTop {
		bottom: 150px;
		right: 20px;
		width: 45px;
		height: 45px;
	}
}

@media (max-width: 768px) {
	.header-content {
		padding: 15px;
	}

	.content {
		padding: 30px 15px;
	}

	footer {
		padding: 15px 0;
	}

	.footer-content {
		padding: 0 15px;
	}
}