body {
margin: 0;
font-family: 'Segoe UI', Arial, sans-serif;
background: #eef2f3;
color: #2d3436;
}

.container {
width: 90%;
max-width: 1000px;
margin: auto;
}

header {
background: linear-gradient(135deg, #2c7a7b, #38a169);
color: white;
padding: 20px 0;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

h1 {
margin: 0;
font-size: 32px;
}

.quote {
font-style: italic;
opacity: 0.9;
margin-top: 8px;
}

nav {
margin-top: 15px;
}

#nav-list {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
padding: 0;
}

#nav-list li a {
color: white;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}

#nav-list li a:hover {
color: #c6f6d5;
}

.menu-toggle {
display: none;
font-size: 26px;
cursor: pointer;
}

main {
background: white;
margin-top: 20px;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h2 {
color: #2c7a7b;
}

h3 {
color: #38a169;
margin-top: 20px;
}

p {
line-height: 1.6;
}

img {
width: 100%;
margin: 15px 0;
border-radius: 10px;
}

@media (max-width: 768px) {
#nav-list {
display: none;
flex-direction: column;
background: #2c7a7b;
position: absolute;
top: 100px;
right: 0;
width: 200px;
padding: 10px;
}

#nav-list.active {
display: flex;
}

.menu-toggle {
display: block;
}
}

form label {
font-weight: bold;
margin-top: 10px;
}

input:focus, textarea:focus {
outline: none;
border: 1px solid #38a169;
box-shadow: 0 0 5px rgba(56,161,105,0.5);
}

button:hover {
background: #38a169;
}