.container-box {
	padding: 2rem 5%;
	min-height: 65%;
	background-color: rgb(241, 241, 241);
	text-align: center;
	display: flex;
	flex-direction: column;
	padding-bottom: 4em;
}

#Index .container {
	margin: 2rem 5%;
}


p.title {
	margin: 10px 0;
	font-size: 30px;
}

p.description {
	padding-bottom: 3%;

}

.flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	/* Adjust this to center, space-between, or space-around based on your design preference */
	gap: 20px;
	/* This adds space between the boxes */
}

.box {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 1 300px;
	/* This allows the box to grow and shrink but not be smaller than 300px */
	border: 1px solid #ccc;
	padding: 20px;
	margin-bottom: 10px;
	background-color: #f9f9f9;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	/* Optional: Adds shadow for better visibility */
	text-align: center;
	justify-content: space-between;
}

.specs-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	margin-top: 20px;
}

.specs-box {
	flex: 1 1 48%;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.specs-box {
		flex-basis: 100%;
	}
}

.specs-table {
	width: 100%;
	box-sizing: border-box;
}

.specs-table,
tr {
	border: 1px solid black;
	border-collapse: collapse
}

.specs-table thead tr {
	background-color: var(--primary-color);
	color: white;
}

.specs-table th {
	text-align: left;
}

.specs-table td,
th {
	padding: 10px;
}