@charset "utf-8";
/* Your CSS goes here */

/* Header */
header {
	background: url('https://edube.org/uploads/media/default/0001/04/products_image.jpg') no-repeat center center;
	background-size: cover;
	text-align: center;
	position: fixed;
	top: 0;
	width: 100%;
	padding: 20px;
}

/* product styles */
.product {
	width: 300px;
	padding: 20px;
	border: #000 2px solid;
	margin: 10px;
	background-color: #F9F9F9;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
	overflow: hidden; 
}

.product-image {
	position: relative;
}

.product-image img {
	width: 100%;
	border-radius: 10px;
}

.badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: red;
	color: white;
	padding: 5px;
	border-radius: 5px;
}

/* Table styles */
.product-specs {
	/* visibility: hidden; */
	width: 100%;
	border-collapse: collapse;
}

.product-specs th, .product-specs td {
	border: 1px solid #ddd;
	padding: 8px;
}

.product-specs tr:nth-child(even) {
	background-color: #f2f2f2;
}

.product-specs tr:hover {
	background-color: #ddd;
}

/* Form styles */
.contact-form {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	/* display: none; */
}

.contact-form form {
	padding: 20px;
	border: 1px solid #CCC;
	border-radius: 10px;
}

.contact-form fieldset {
	border: none;
}

.contact-form label {
	display: block;
	margin-top: 10px;
}

.contact-form input {
	width: 100%;
	padding: 8px;
	margin-top: 5px;
	margin-bottom: 10px;
}

.contact-form button {
	background-color: #4caf50;
	color: white;
	padding: 10px 20px;
	border: none;
	cursor: pointer;
}

.contact-form legend {
	font-weight: bold;
	border-bottom: 1px solid #3d3c3c;
	padding-bottom: 5px;
	margin-bottom: 10px;
}

.contact-form button:hover {
	background-color: #45a049;
}

/* footer */
footer {
	position: fixed;
	bottom: 0;
	background-color: lightgray;
	padding: 10px;
	text-align: center;
	width: 100%
}