:root {
		--main-bg: #242424;
		--primary:  #EB6B1C;
		--border: #151515;
		--radius: 14px;
		--shadow: 0 2px 16px rgba(0,0,0,0.07);
		--input-bg: #eb6b1c1f;
		--inputg-bg: #eb6b1c1f;
	}
	body {
		background: #242424;;
		font-family: 'Segoe UI', Arial, sans-serif;
		margin: 0;
		color: #AAAAAA;
	}
	.logo {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 200px;
	}

	h2 {
			text-align: center;
			margin-bottom: 0px;
	}
	.box {
			background: #fff1;
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			width: fit-content;
			margin-left: auto;
			margin-right: auto;
			padding-left: 20px;
			padding-right: 20px;
			padding-bottom: 20px;
			max-width: 75%;
			display: none;
	}

	.contact {
		background: #fff1;
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 0px 24px 24px 24px;
		margin: 48px auto 0 auto;
		max-width: 420px;
	}

	.contact label {
		margin-top: 16px;
		font-weight: 500;
	}

	.contact input,
	.contact select,
	.contact textarea {
		width: 100%;
		padding: 11px 10px;
		margin-top: 6px;
		margin-bottom: 10px;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--input-bg);
		font-size: 1rem;
		resize: vertical;
		box-sizing: border-box;
		outline: none;
		transition: border 0.2s;
		color: #fff;
	}
  .contact option {
    background-color: #000;
    color: #fff;
  }
	/*Hamburger Menu*/
	.container {
		display: inline-block;
		cursor: pointer;
	}

	.bar1, .bar2, .bar3 {
		width: 35px;
		height: 5px;
		background-color: #aaa;
		margin: 6px 0;
		transition: 0.4s;
	}

	.change .bar1 {
		transform: translate(0, 11px) rotate(-45deg);
	}

	.change .bar2 {opacity: 0;}

	.change .bar3 {
		transform: translate(0, -11px) rotate(45deg);
	}
	.navbar{
		position: fixed;
		left: 0px;
		top: 0px;
		padding: 10px;
	}
	/*Menüelemek*/
	.nav-links{
		position: absolute;
		background: #333333;
		margin-top: 40px;
		left: 0px;
  	width: 300px;
		text-decoration: none;
		padding: 0px;

		opacity: 0;
		transform: translateX(-100%);
		pointer-events: none;      /* Ne lehessen kattintani rá alapból */
		transition: transform 0.5s ease, opacity 0.5s ease;
		
		/* border: 1px solid #111;*/ 
    box-shadow: -10px 10px 10px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: -10px 10px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: -10px 10px 10px 0px rgba(0,0,0,0.3);
	}
	.nav-links.active {
		opacity: 1;
		transform: translateX(0);
		pointer-events: auto;
	}
	.nav-links a{
		color: inherit;
		text-decoration: none;
		
	}
	.nav-links li{
		text-decoration: none;
		color: #EB6B1C;
		list-style: none;
		padding: 10px 20px;
		text-align: center;
		text-transform: uppercase;
  	font-weight: bold;
		cursor: pointer;
	}
	.nav-links li:hover{
		color: #000;
		background-color: #EB6B1C;
	}
.nav-links li:active{
		color: #000;
		background-color: #EB6B1C;
	}

	#footbar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #151515;
		color: white;
		text-align: center;
	}
	#footbar div{
		fsloat:left;
	}
  
	.box button{
		background-color: #181818;
		border: none;
		color:  var(--primary);
		padding: 11px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		margin: 4px 2px;
		cursor: pointer;
		border-radius: 8px;
		font-weight: bold;
	}

  /* Kifutók - Products */
	.product-card {
		background: #ffffff21;
		border: 1px solid #000;
		border-radius: 14px;
		margin-bottom: 32px;
		padding: 20px;
	}
	.product-title {
		font-size: 1.4em;
		font-weight: bold;
		margin-bottom: 8px;
	}
	.product-description {
		color: #aaa;
		margin-bottom: 16px;
		font-size: 1.07em;
	}
	.product-price {
		font-size: 1.15em;
		color: #ff8c42;
		font-weight: bold;
		margin-bottom: 22px;
	}
	.product-images {
		display: flex;
		gap: 12px;
		justify-content: flex-end;
		border-top: 1px solid #eee;
		margin-top: 18px;
		padding-top: 13px;
	}
	.product-images img {
		max-width: 300px;
		max-height: 100px;
		border-radius: 6px;
		margin: auto;
		display: inline;
		border: 1px solid black;
		transition: transform 0.2s;
	}
	.product-images img:hover {
		transform: scale(1.08);
		border-color: #ffb97b;
	}