/* Desktop styles */
@media only screen and (min-width: 1200px) {
	@keyframes slideInFromLeft {
		from {
			transform: translateX(-100%);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}

	@keyframes slideInFromTop {
		from {
			transform: translateY(-100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	@keyframes bounce {
		0%,
		100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-20px);
		}

		
	}

	.hero-section {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 6% 8%;
		max-width: 1440px;
		margin: auto;
		position: relative;
	}

	.hero-text-button .button-img {
		display: block;
		margin-top: 10%;
		opacity: 0;
		animation: slideInFromLeft 1s ease-out forwards;
		animation-delay: 0.5s;
	}

	
	.button-img {
		content: url("/images/hero-knap.svg");
		
	}

	.button-img:hover {
		content: url("/images/knap-variant.svg");
		
	}

	.hero-text-button {
		width: 500px;
		margin-top: 10%;
	}

	.hero-section h1 {
		color: #101010;
		font-family: "Inter";
		font-size: 4.375rem;
		font-style: normal;
		font-weight: 600;
		line-height: 108%;
		letter-spacing: -0.2rem;
		animation: slideInFromLeft 1s ease-out forwards;
		opacity: 0;
		animation-delay: 0.5s;
	}

	.hero-billede img {
		display: block;
		height: auto;
		width: 100%;
		animation: slideInFromTop 1s ease-out forwards,
			bounce 2s infinite ease-in-out;
		opacity: 0;
		animation-delay: 0.5s, 1.5s;
	}

	.imprint-promo img {
		display: block;
		margin: auto;
		padding: 2% 0px;
		margin-top: -3%;
		position: relative;
		overflow: hidden;
		opacity: 0;
		width: 100%;
		height: auto;
	}

	.parallax-container {
		position: relative;
		height: 100%;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.imprint-promo .parallax-container::before {
		content: "";
		background-image: url("/images/imprint-promo.png");
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: -1;
	}

	.text-button-products {
		display: flex;
		justify-content: space-between;
		padding: 2% 4%;
		max-width: 1440px;
		margin: auto;
	}

	.text-button-products h2 {
		color: #101010;
		font-family: "Inter";
		font-size: 3rem;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		letter-spacing: -0.06rem;
	}

	.text-button-products img {
		display: block;
		width: 4.9375rem;
		height: 2.375rem;
	}

	.product-column {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.product-column h3 {
		margin-top: -2%;
		margin-bottom: 4%;
		color: #101010;
		font-family: "Space Grotesk";
		font-size: 1.5rem;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		letter-spacing: -0.075rem;
	}

	.product-column a {
		padding: 0.375rem 1rem;
		border: 1px solid #101010;
		color: #101010;
		font-family: "DM Sans";
		font-size: 1rem;
		font-style: normal;
		font-weight: 500;
		line-height: 133%; /* 1.33rem */
		letter-spacing: -0.02rem;
		text-decoration: none;
		border-color: #101010;
		position: relative;
		z-index: 0;
	}

	.product-column a:hover:before {
		border-color: #101010;
	}

	.product-column a:before {
		content: "";
		position: absolute;
		top: -2px;
		right: -2px;
		bottom: -2px;
		left: -2px;
		border: 2px solid transparent;
		z-index: -1;
		transition: border-color 0.3s ease;
	}

	.product-row {
		max-width: 1920px;
		display: flex;
		justify-content: center;
		padding: 0% 10%;
		margin: auto;
	}

	.mikrobryggeri-teaser {
		max-width: 1600px;
		padding: 5% 3%;
		display: flex;
		justify-content: space-around;
		margin: auto;
		margin-top: 5%;
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 1s ease-in-out, transform 1s ease-in-out;
	}

	/* Fade in effekt */
	.mikrobryggeri-teaser.visible {
		opacity: 1;
		transform: translateY(0);
	}

	.hidden {
		opacity: 0;
		transform: translateY(20px);
	}
	/* Fade in effekt slut */

	.text-container {
		margin-top: 5%;
		margin-left: 5%;
	}

	.text-container p {
		width: 19.3125rem;
		color: #101010;
		font-family: "DM Sans";
		font-size: 1rem;
		font-style: normal;
		font-weight: 400;
		line-height: 133%; /* 1.6625rem */
		letter-spacing: -0.025rem;
		padding: 8% 0px;
		margin-bottom: 4%;
	}

	.text-container h2 {
		color: #101010;
		font-family: "Inter";
		font-size: 3rem;
		font-style: normal;
		font-weight: 500;
		line-height: 108.425%; /* 3.25275rem */
		letter-spacing: -0.06rem;
		width: 22.3125rem;
	}

	.text-container a {
		padding: 0.375rem 2rem;
		border: 1px solid #101010;
		color: #101010;
		font-family: "DM Sans";
		font-size: 1rem;
		font-style: normal;
		font-weight: 500;
		line-height: 133%; /* 1.33rem */
		letter-spacing: -0.02rem;
		text-decoration: none;
		position: relative;
		z-index: 0;
	}

	.text-container a:before {
		content: "";
		position: absolute;
		top: -2px;
		right: -2px;
		bottom: -2px;
		left: -2px;
		border: 2px solid transparent;
		z-index: -1;
		transition: border-color 0.3s ease;
	}

	.text-container a:hover:before {
		border-color: #101010;
	}

	.nyhedsbrev {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		align-items: center;
		padding: 3% 5%;
	}

	.nyhedsbrev img {
		display: block;
	}

	.nyhedsbrev h3 {
		color: #101010;
		text-align: center;
		font-family: "Inter";
		font-size: 2rem;
		font-style: normal;
		font-weight: 600;
		line-height: 136.53%; /* 2.73063rem */
	}

	.nyhedsbrev h4 {
		color: #101010;
		text-align: center;
		font-family: "Inter";
		font-size: 1rem;
		font-style: normal;
		font-weight: 500;
		line-height: 136.53%; /* 1.36531rem */
	}
}

/* Mobile styles */
@media only screen and (max-width: 599px) {

	.hero-section {
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
		padding: 2% 3%;
	}

	.hero-text-button img {
		display: block;
		padding-top: 15%;
		padding-bottom: 15%;
		width: 80%;
		height: auto;
		animation-delay: 0.5s;
		margin: auto;
	}

	.hero-text-button {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 3% 3%;
	}

	.hero-section h1 {
		color: #101010;
		text-align: center;
		font-family: Inter;
		font-size: 40px;
		font-style: normal;
		font-weight: 600;
		line-height: 108%; /* 43.2px */
		letter-spacing: -0.8px;
		max-width: 600px;
	}

	.hero-billede img {
		display: block;
		height: auto;
		width: 100%;
		max-width: 400px;
		margin: auto;
	}

	.imprint-promo img {
		display: none;
		width: 100%;
		padding: 0% 3%;
		padding-bottom: 5%;
	}

	.text-button-products h2 {
		padding: 2% 3%;
		color: #101010;
		text-align: center;
		font-family: "Inter";
		font-size: 30px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		letter-spacing: -0.48px;
		padding-bottom: 40px;
		max-width: 300px;
		margin: auto;
	}

	.text-button-products img {
		display: none;
		width: 4.9375rem;
		height: 2.375rem;
	}

	.product-column {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.product-column img {
		display: block;
		width: 60%;
		height: auto;
		max-width: 400px;
	}

	.product-column h3 {
		margin-bottom: 3%;
		color: #101010;
		font-family: "Space Grotesk";
		font-size: 1.5rem;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		letter-spacing: -0.075rem;
	}

	.product-column a {
		padding: 0.375rem 1rem;
		border: 1px solid #101010;
		color: #101010;
		font-family: "DM Sans";
		font-size: 1rem;
		font-style: normal;
		font-weight: 500;
		line-height: 133%; /* 1.33rem */
		letter-spacing: -0.02rem;
		text-decoration: none;
		margin-bottom: 6%;
	}

	.product-row {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.mikrobryggeri-teaser {
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
	}

	.mikrobryggeri-teaser img {
		display: block;
		width: 100%;
		height: auto;
		padding: 8% 3%;
	}

	.text-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 25px;
	}

	.text-container p {
		color: #101010;
		text-align: center;
		font-family: "DM Sans";
		font-size: 0.9rem;
		font-style: normal;
		font-weight: 400;
		line-height: 140%; /* 22.4px */
		letter-spacing: -0.32px;
		padding: 1% 6%;
		max-width: 300px;
	}

	.text-container h2 {
		color: #101010;
		text-align: center;
		font-family: "Inter";
		font-size: 32px;
		font-style: normal;
		font-weight: 500;
		line-height: 1; /* 0px */
		letter-spacing: -0.64px;
		width: 300px;
	}

	.text-container a {
		padding: 0.375rem 2rem;
		border: 1px solid #101010;
		color: #101010;
		font-family: "DM Sans";
		font-size: 1rem;
		font-style: normal;
		font-weight: 500;
		line-height: 133%; /* 1.33rem */
		letter-spacing: -0.02rem;
		text-decoration: none;
		margin-bottom: 10%;
	}

	.nyhedsbrev {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		align-items: center;
		padding: 8% 5%;
	}

	.nyhedsbrev img {
		display: block;
		width: 100%;
		height: auto;
		max-width: 400px;
	}

	.nyhedsbrev h3 {
		color: #101010;
		text-align: center;
		font-family: "Inter";
		font-size: 1rem;
		font-style: normal;
		font-weight: 600;
		line-height: 136.53%; /* 2.73063rem */
	}

	.nyhedsbrev h4 {
		color: #101010;
		text-align: center;
		font-family: "Inter";
		font-size: 0.8rem;
		font-style: normal;
		font-weight: 500;
		line-height: 136.53%; /* 1.36531rem */
	}
}

/* Tablet styles */
@media only screen and (min-width: 600px) and (max-width: 1199px) {
	.hero-section {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		padding: 2% 10%;
	}

	.hero-text-button img {
		display: block;
		padding-top: 10%;
		width: 20vw;
		height: auto;
	}

	.hero-text-button {
		margin-top: 10%;
		display: flex;
		align-items: left;
		flex-direction: column;
		padding: 3% 3%;
		width: 100%;
		max-width: 280px;
	}

	.hero-section h1 {
		color: #101010;
		text-align: left;
		font-family: Inter;
		font-size: 3.8vw;
		font-style: normal;
		font-weight: 600;
		line-height: 108%; /* 43.2px */
		letter-spacing: -0.8px;
		max-width: 700px;
	}

	.hero-billede img {
		display: block;
		height: auto;
		width: 99%;
		max-width: 400px;
		margin: auto;
		animation: bounce 2s infinite ease-in-out;
		animation-delay: 0.5s;
	}

	.imprint-promo img {
		display: block;
		width: 100%;
		padding: 0% 3%;
		padding-bottom: 5%;
		height: auto;
	}

	.text-button-products h2 {
		padding: 4% 3%;
		color: #101010;
		text-align: center;
		font-family: "Inter";
		font-size: 36px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		letter-spacing: -0.48px;
	}

	.text-button-products img {
		display: none;
		width: 4.9375rem;
		height: 2.375rem;
	}

	.product-column {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.product-column img {
		display: block;
		width: 100%;
		height: auto;
		max-width: 400px;
	}

	.product-column h3 {
		margin-bottom: 4%;
		color: #101010;
		font-family: "Space Grotesk";
		font-size: 1.5rem;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		letter-spacing: -0.075rem;
	}

	.product-column a {
		padding: 0.375rem 1rem;
		border: 1px solid #101010;
		color: #101010;
		font-family: "DM Sans";
		font-size: 1rem;
		font-style: normal;
		font-weight: 500;
		line-height: 133%; /* 1.33rem */
		letter-spacing: -0.02rem;
		text-decoration: none;
		margin-bottom: 3%;
	}

	.product-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		width: 75%;
		margin: auto;
	}

	.mikrobryggeri-teaser {
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
	}

	.mikrobryggeri-teaser img {
		display: block;
		width: 90%;
		height: auto;
		padding: 6% 3%;
		margin: auto;
	}

	.text-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 25px;
	}

	.text-container p {
		color: #101010;
		text-align: center;
		font-family: "DM Sans";
		font-size: 0.9rem;
		font-style: normal;
		font-weight: 400;
		line-height: 140%; /* 22.4px */
		letter-spacing: -0.32px;
		padding: 1% 6%;
		max-width: 700px;
	}

	.text-container h2 {
		color: #101010;
		text-align: center;
		font-family: "Inter";
		font-size: 32px;
		font-style: normal;
		font-weight: 500;
		line-height: 1; /* 0px */
		letter-spacing: -0.64px;
		width: 300px;
	}

	.text-container a {
		padding: 0.375rem 2rem;
		border: 1px solid #101010;
		color: #101010;
		font-family: "DM Sans";
		font-size: 1rem;
		font-style: normal;
		font-weight: 500;
		line-height: 133%; /* 1.33rem */
		letter-spacing: -0.02rem;
		text-decoration: none;
	}

	.nyhedsbrev {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		align-items: center;
		padding: 8% 5%;
	}

	.nyhedsbrev img {
		display: block;
		width: 100%;
		height: auto;
		max-width: 400px;
	}

	.nyhedsbrev h3 {
		color: #101010;
		text-align: center;
		font-family: "Inter";
		font-size: 1.5rem;
		font-style: normal;
		font-weight: 600;
		line-height: 136.53%; /* 2.73063rem */
	}

	.nyhedsbrev h4 {
		color: #101010;
		text-align: center;
		font-family: "Inter";
		font-size: 1rem;
		font-style: normal;
		font-weight: 500;
		line-height: 136.53%; /* 1.36531rem */
	}
}