/* Reset styles */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Typography */

body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
}

h1 {
font-size: 2.5rem;
}

h2 {
font-size: 2rem;
}

h3 {
font-size: 1.5rem;
}

h4 {
font-size: 1.2rem;
}

h5 {
font-size: 1rem;
}

h6 {
font-size: 0.8rem;
}

p {
margin-bottom: 1rem;
}

/* Header */

header {
background-color: #222;
color: #fff;
}

header h1 {
margin-top: 0;
}

header nav {
float: right;
}

header nav ul {
list-style-type: none;
display: flex;
}

header nav ul li {
margin-right: 1rem;
}

header nav ul li a {
color: #fff;
text-decoration: none;
}

header nav ul li a:hover {
color: #ccc;
}

/* Main */

main {
margin-top: 1rem;
}

#hero {
background-color: #f5f5f5;
padding: 2rem;
}

#hero h2 {
margin-bottom: 1rem;
}

#hero p {
margin-bottom: 2rem;
}

#hero a {
background-color: #222;
color: #fff;
padding: 0.5rem 1rem;
text-decoration: none;
}

#hero a:hover {
background-color: #ccc;
color: #222;
}

#services {
margin-top: 2rem;
}

#services h2 {
margin-bottom: 1rem;
}

#services ul {
list-style-type: none;
display: flex;
flex-wrap: wrap;
}

#services ul li {
margin-right: 1rem;
margin-bottom: 1rem;
}

#about {
margin-top: 2rem;
}

#about h2 {
margin-bottom: 1rem;
}

#about p {
margin-bottom: 2rem;
}

#contact {
margin-top: 2rem;
}

#contact h2 {
margin-bottom: 1rem;
}

#contact form {
display: flex;
flex-direction: column;
}

#contact form label {
margin-bottom: 0.5rem;
}

#contact form input,
#contact form textarea {
padding: 0.5rem;
margin-bottom: 1rem;
}

#contact form input[type="submit"] {
background-color: #222;
color: #fff;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
}

#contact form input[type="submit"]:hover {
background-color: #ccc;
color: #222;
}

/* Footer */

footer {
background-color: #222;
color: #fff;
padding: 1rem;
}

footer p {
margin-bottom: 0;
}

@media (max-width: 768px) {

/* Header */

header nav {
float: none;
}

header nav ul {
flex-direction: column;
}

header nav ul li {
margin-right: 0;
margin-bottom: 1rem;
}

/* Main */

#hero {
padding: 1rem;
}

#services ul {
flex-direction: column;
}

#services ul li {
margin-right: 0;
margin-bottom: 1rem;
}

/* Contact */

#contact form {
flex-direction: column;
}

}