body {
	font-family: 'Sansation', sans-serif;
	background-color: #757677;
	color: #333;
}

html {
	scroll-behavior: smooth;
}

header h1 {
	font-size: 28px;
	letter-spacing: 1.5px;
}

header nav a {
	font-size: 16px;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

header nav a:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

.review-card {
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.review-card:hover {
	transform: scale(1.05);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.text-white {
	color: #fff;
}

.border-l-8 {
	border-left-width: 8px;
}

.transition-all {
	transition: all 0.3s ease;
}

footer {
	font-size: 14px;

	padding: 20px;
	color: #d1d5db;
}
#reviews {
	position: relative;
	overflow-x: hidden;
}
.mobile-menu {
	display: none;
}

@media (max-width: 768px) {
	section,
	header,
	footer {
		padding: 7px;
	}
	.mobile-menu {
		display: block;
	}
	.desktop-menu {
		display: none;
	}
}
.modal-info {
	background-color: var(--modal-bg);
	padding: 1.5rem;
	border-radius: 0.75rem;
}

.modal-info h4 {
	font-size: 1.5rem;
	color: var(--modal-heading);
	margin-bottom: 1rem;
}

.modal-info ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.modal-info ul li {
	display: flex;
	justify-content: space-between;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--modal-border);
	color: var(--modal-text);
}

.modal-info ul li:last-child {
	border-bottom: none;
}