@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body { 
font-family: "Nunito", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
background-color: #1a1a1a; 
color: #f4f4f4; 
line-height: 1.6; 
}
a { color: #ff8c00; text-decoration: none; }
a:hover { text-decoration: underline; }

.striped-accent {
height: 6px;
width: 100%;
background: repeating-linear-gradient(
	45deg,
	#ff8c00,
	#ff8c00 15px,
	#cc7000 15px,
	#cc7000 30px
);
}

.container { max-width: 1000px; margin: 0 auto; padding: 20px; }

header { 
background-color: #111; 
padding: 60px 0; 
text-align: center; 
border-bottom: 1px solid #333; 
}
header h1 { font-size: 3rem; color: #ff8c00; margin-bottom: 15px; }
header p { font-size: 1.2rem; color: #aaa; }

section { padding: 60px 0; border-bottom: 1px solid #333; }
section h2 { font-size: 2rem; margin-bottom: 40px; text-align: center; color: #ff8c00; }

.grid { 
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
gap: 30px; 
}

.card { 
	background-color: #222; 
	padding: 40px 30px; 
	border-radius: 8px; 
	text-align: center; 
	border: 1px solid #333; 
	transition: transform 0.2s ease-in-out;
	overflow: hidden;
	position: relative;

	.card-icon {
		max-height: 120px;
	}
	
	.card-icon-overflow {
	max-height: 310px;
	position: absolute;
	margin: auto;
	top: 102%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	filter: opacity(0.1);
	pointer-events: none;
}
}
.card:hover { transform: translateY(-5px); border-color: #ff8c00; }
.card h3 { font-size: 1.5rem; margin-bottom: 15px; color: #fff; }
.card p { margin-bottom: 25px; color: #ccc; font-size: 0.95rem; }

.price { font-size: 1.4rem; font-weight: bold; margin-bottom: 20px; color: #ff8c00; }
.btn { 
display: inline-block; 
background-color: #ff8c00; 
color: #fff; 
padding: 12px 30px; 
border-radius: 4px; 
font-weight: bold; 
text-transform: uppercase; 
transition: background 0.3s; 
}
.btn:hover { background-color: #cc7000; text-decoration: none; }

.info-box { 
background-color: #2a2a2a; 
padding: 25px 30px; 
border-left: 4px solid #ff8c00; 
margin-bottom: 20px; 
border-radius: 0 8px 8px 0; 
}
.info-box h4 { margin-bottom: 12px; font-size: 1.2rem; color: #fff; }
.info-box p { color: #ccc; font-size: 0.95rem; }

footer { 
background-color: #111; 
padding: 40px 0; 
text-align: center; 
color: #888; 
font-size: 0.9rem; 
}
footer p { margin-bottom: 10px; }
.legal-links { margin-top: 25px; }
.legal-links a { margin: 0 15px; color: #777; }
.legal-links a:hover { color: #ff8c00; }