body {
	font-family: Arial, sans-serif;
	color: #fff;
	margin: 0;
	padding: 0;
	background-color: #222121;
}

img{
    max-width: 100%;
}

.container {
	max-width: 1300px;
	display: flex; /* Makes child elements align horizontally */
	justify-content: space-between; /* Optional: Adds spacing between sections */
	gap: 10px; /* Optional: Adds uniform spacing */
	padding-left: 25px;
	padding-right: 25px;
	margin: auto;
}

footer {
	background-color: #777474;
	color: #fff;
	text-align: center;
	padding: 20px 0;
	width: 100%;
}
footer p{
	margin: 0;
}

header.header {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
  background-color: #777474;
}

.header .header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	text-align: center;
  padding: 15px 0;
}

header.header svg {
	width: 100px;
}

.header-spacer{
  height: 96px;
}

nav {
	display: flex;
	gap: 15px;
}

nav a {
	color: black;
	text-decoration: none;
    padding: 8px 0px;
}
nav a.active {
  background-color: #fff;
  padding: 8px 15px;
  border-radius: 10px;
}

.home-page{
	padding: 0;
	min-height: calc(100vh - 58.4px - 95.74px);
}

.home-grid {
    display: grid;
	grid-template-columns: 3fr 1fr;
	align-items: end;
}

.home-grid .blub-img {
	align-self: center;
}

main {
    display: flex;
	align-items: flex-start;
	padding-top: 25px;
	padding-bottom: 25px;
	min-height: calc(100vh - 58.4px - 95.74px - 50px);
}

.box {
    flex: 1; /* All sections take equal width */
    padding: 20px;
    background-color: rgb(106, 65, 70);
    border: 1px solid #ccc;
    text-align: center;
    margin-top: 10px;
    margin-right: 20px;
}

/* MY WORK STYLING */
.logo{
	width: 100%;
	display: flex;
	justify-content: center;
}

.logo svg{
	width: 150px;
}

.my-work.container{
	flex-direction: column;
}

.my-work .work-content{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px;
	text-align: center;
}
.my-work .work-content .work-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

/* ABOUT STYLING */
.about-content {
	max-width: 600px;
	margin: 0 auto;
}
.about-content .about-text{
	margin-top: 50px;
}

.about-text {
    display: flex;
    flex-direction: column; /* Stack items vertically */
}


/* CONTACT FORM */
.contact-form {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.contact-form fieldset {
	display: flex;
	flex-direction: column;
	border: none;
	gap: 5px;
	padding: 0;
	margin: 0;
}

.contact-form fieldset input,
.contact-form fieldset textarea{
	min-width: 400px;
	padding: 5px;
}

.contact-form fieldset textarea {
	resize: vertical;
	min-height: 100px;
}

.contact-form input[type="submit"]{
	width: fit-content;
	background-color: #777474;
	color: #fff;
	padding: 8px 25px;
	border: none;
}

/* REVIEWS SECTION */
.reviews {
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Stack the sections vertically */
    align-items: center;    /* Center the sections horizontally */
    justify-content: flex-start; /* Align sections to the top */
    padding: 20px;
}

.reviews section {
    width: 100%; /* Ensure sections take full width of the container */
    max-width: 800px; /* Optional: Set a max-width for readability */
    margin-top: 20px; /* Space between sections */
    margin-bottom: 20px; /* Optional: Add space below each section */
    padding: 20px;
    background-color: rgb(106, 65, 70);
    border: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box; /* Include padding and border in total width/height */
}

.reviews h3 {
    margin: 0 0 10px 0; /* Space below the heading */
    font-size: 24px;
}

.reviews p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.about-text {
    display: flex;
    justify-content: center;  /* Center the content horizontally */
    padding: 20px;
}

.about-text {
    width: 100%;
    max-width: 800px; /* Control the maximum width for readability */
    margin-top: 20px;
    padding: 20px;
    background-color: rgb(106, 65, 70);  /* Same background color */
    border: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}

.about-text p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}