* { margin:0; padding:0; box-sizing:border-box; font-family: 'Roboto', sans-serif; }
body { line-height:1.6; color:#333; scroll-behavior: smooth; }
a { text-decoration:none; color: inherit; }
header { background:#007bff; color:#fff; padding:20px 0; position:sticky; top:0; z-index:1000; box-shadow:0 2px 5px rgba(0,0,0,0.2);}
nav { display:flex; justify-content:center; gap:30px; font-weight:bold; }
nav a:hover { text-decoration:underline; }
.hero { background: url('images/hero.jpg') center/cover no-repeat; color:#fff; text-align:center; padding:120px 20px; position:relative; }
.hero::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4);}
.hero-content { position:relative; z-index:1; max-width:800px; margin:0 auto; }
.hero h1 { font-size:3rem; margin-bottom:20px; animation:fadeInDown 1s ease forwards; opacity:0; }
.hero p { font-size:1.2rem; margin-bottom:30px; animation:fadeInUp 1s ease forwards; opacity:0; animation-delay:0.5s;}
.btn { background:#ff9800; color:#fff; padding:12px 25px; border-radius:5px; transition:0.3s; display:inline-block;}
.btn:hover { background:#e68900; transform:translateY(-3px); }
@keyframes fadeInDown { 0% {opacity:0; transform:translateY(-30px);} 100% {opacity:1; transform:translateY(0);} }
@keyframes fadeInUp { 0% {opacity:0; transform:translateY(30px);} 100% {opacity:1; transform:translateY(0);} }
section { padding:60px 20px; max-width:1200px; margin:0 auto; }
.services { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.service { background:#f2f2f2; padding:20px; border-radius:10px; text-align:center; transition: transform 0.3s, box-shadow 0.3s; }
.service:hover { transform:translateY(-5px); box-shadow:0 8px 15px rgba(0,0,0,0.2);}
.service h3 { color:#007bff; margin-bottom:10px; }
.service img { width:100%; border-radius:10px; margin-bottom:10px; }
.about { text-align:center; }
.about p { margin-bottom:15px; }
.contact form { display:flex; flex-direction:column; gap:15px; max-width:500px; margin:0 auto; }
.contact input, .contact textarea { padding:10px; border-radius:5px; border:1px solid #ccc; width:100%; }
.contact button { width:fit-content; }
footer { background:#007bff; color:#fff; text-align:center; padding:20px; margin-top:40px; }
.fade-up { opacity:0; transform:translateY(30px); transition: all 0.8s ease-out; }
.fade-up.show { opacity:1; transform:translateY(0); }