body,
h1,
h2,
p,
figure {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}
header,
.hero,
.testimonials,
footer {
	text-align: center;
	padding: 50px;
}
main {
	height: 74vh;
}
header {
	height: 7vh;
	overflow: hidden;
	text-align: center;
	padding: 0;
}
nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10%;
	height: 100%;
}
.hero {
	background-color: #f3f3f3;
	height: 35vh;
	margin: 20px 0;
}
.hero h1 {
	margin-bottom: 10px;
}
.hero p {
	margin-bottom: 20px;
}
.upload-btn-wrapper {
	overflow: hidden;
	display: inline-block;
	color: rgb(31, 26, 21);
}
.btn {
	border: 2px solid gray;
	color: gray;
	background-color: white;
	padding: 8px 20px;
	border-radius: 8px;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
}
.btn:hover {
	color: rgb(1, 55, 194); /* Change the hover color as needed */
	text-decoration: none;
}
.upload-btn-wrapper input[type='file'] {
	font-size: 100px;
	position: absolute;
	display: none;
	left: 0;
	opacity: 0;
	color: #555;
}
.testimonials {
	display: flex;
	justify-content: center;
}
.testimonial-card {
	background: #fff;
	padding: 20px;
	margin: 10px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: calc(33% - 20px);
}
.testimonial-card p {
	font-style: italic;
}
.testimonial-card figcaption {
	font-size: 0.9em;
	color: #555;
}
footer {
	background-color: #333;
	color: white;
	justify-content: center;
}
footer a {
	color: white;
	text-decoration: none;
	margin: 0 10px;
}

.nav_container {
	display: flex;
	justify-content: space-between; /* or space-around */
}

.nav-item {
	color: rgb(10, 10, 10);
	margin: 0 20px; /* Adjust as needed */
	text-decoration: none;
}

.nav-item:hover {
	color: rgb(1, 55, 194); /* Change the hover color as needed */
	text-decoration: none;
}

.hero {
	display: flex; /* This turns the .hero section into a flex container */
	justify-content: space-between; /* This will space out the children */
	align-items: center; /* This vertically centers the children */
	background-color: #f3f3f3;
	margin: 20px 0;
	padding: 50px; /* Adjust this padding as needed */
	text-align: left; /* Aligns text to the left */
}

.text-side,
.image-upload-side {
	flex: 1; /* Each child will take up an equal amount of space */
	padding: 0 20px; /* Adds padding inside each side. Adjust as needed. */
}

/* You may want to add some max-width or min-width to these elements
 if you want to control their sizing more strictly */

footer {
	background-color: #333; /* Dark background */
	color: white; /* White text */
	text-align: center; /* Center align text */
	padding: 20px 0; /* Padding on top and bottom */
	display: flex; /* Use flexbox for layout */
	flex-direction: column; /* Stack items vertically */
	align-items: center; /* Center items on the cross axis */
	justify-content: center; /* Center items on the main axis */
}

.site-name {
	margin-bottom: 20px; /* Space between site name and links */
	font-size: 24px; /* Larger font size for site name */
}

.footer-links,
.social-links {
	margin-bottom: 10px; /* Space between link groups */
}

.footer-links a,
.social-links a {
	color: white; /* White links */
	text-decoration: none; /* No underline */
	margin: 0 10px; /* Margin on the sides of the links */
	font-size: 16px; /* Adjust font size as needed */
}

/* This ensures that the social media text links do not line break */
.social-links a {
	white-space: nowrap; /* Prevent wrapping */
}

/* Add your media query adjustments if necessary */
@media (max-width: 768px) {
	.footer-content {
		flex-direction: column;
	}
}