body {
font-family: "Segoe UI", Arial, sans-serif;
margin: 0;
padding: 0;
background: #f9f9fb;
color: #333;
}

header {
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1100px;
margin: 0 auto;
padding: 0.5rem 1rem;
}

.logo {
font-weight: bold;
font-size: 1.2rem;
color: #1e90ff;
text-decoration: none;
}

.navbar ul {
list-style: none;
display: flex;
gap: 0.5rem;
margin: 0;
padding: 0;
}

.navbar a {
padding: 0.5rem 1rem;
background: #e6f2ff;
border-radius: 20px;
text-decoration: none;
color: #1e90ff;
transition: background 0.3s, transform 0.2s;
}

.navbar a:hover {
background: #1e90ff;
color: white;
transform: translateY(-2px);
}

.container {
max-width: 900px;
margin: 2rem auto;
padding: 1rem;
}

.hero {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, #dbeafe, #eff6ff);
padding: 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 3px 15px rgba(0,0,0,0.05);
}

.advice {
display: flex;
align-items: flex-start;
background: white;
padding: 1rem;
margin: 1rem 0;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
gap: 1rem;
}

.advice img {
width: 40px;
height: 40px;
flex-shrink: 0;
}

.advice p {
margin: 0;
}

img.full-width {
max-width: 100%;
border-radius: 15px;
margin-top: 1rem;
align-self: center;
}

form {
display: flex;
flex-direction: column;
gap: 1rem;
background: white;
padding: 2rem;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
max-width: 600px;
margin: 2rem auto;
animation: fadeIn 0.4s ease-in-out;
}

form label {
font-weight: bold;
color: #1e90ff;
}

input, textarea, select {
padding: 0.8rem;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 10px;
transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus, textarea:focus, select:focus {
outline: none;
border-color: #1e90ff;
box-shadow: 0 0 5px rgba(30,144,255,0.4);
}

button {
padding: 0.8rem;
font-size: 1.1rem;
font-weight: bold;
background: linear-gradient(135deg, #1e90ff, #007acc);
color: white;
border: none;
border-radius: 15px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.3s;
}

button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

@keyframes fadeIn {
from {opacity: 0; transform: translateY(10px);}
to {opacity: 1; transform: translateY(0);}
}