table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

th,
td {
	padding: 12px;
	text-align: left;
	border: 1px solid #ddd;
}

th {
	background-color: rgb(128, 92, 2);
	color: white;
}

td {
	background-color: #f9f9f9;
}

/* Hover Animation for Table Rows */
tr {
	transition: transform 0.3s ease, background-color 0.3s ease;
}

tr:nth-child(odd) {
	animation-delay: 0.2s;
}

tr:nth-child(even) {
	animation-delay: 0.4s;
}

tr:hover {
	transform: scale(1.02);
	/* Slightly enlarge row */
	background-color: #f1f1f1;
	/* Change background on hover */
}

/* Add Color Change on Hover for Individual Cells */
td:hover {
	background-color: #e2e2e2;
}

/* Make the Table Look Neater */
table {
	border-radius: 8px;
	overflow: hidden;
}

/* Add a subtle shadow effect when hovering over a table */
tr:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.table-container {
	/* width: 100%;
    max-width: 1200px; */
	margin: 10px;
	padding: 30px;
	border-radius: 10px;
	overflow-x: auto;
	/* Allows horizontal scrolling on small screens */
}

@keyframes fadeInRow {
	0% {
		transform: translateX(-50px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@media (max-width: 768px) {
	table {
		font-size: 14px;
	}

	th,
	td {
		padding: 12px;
	}
}

@media (max-width: 480px) {
	table {
		font-size: 12px;
	}

	th,
	td {
		padding: 10px;
	}
}