*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;color:#222;line-height:1.6;background:#fff;}
.container{width:90%;max-width:1200px;margin:auto;}
.header{background:#fff;padding:1rem 0;box-shadow:0 2px 5px rgba(0,0,0,0.05);position:sticky;top:0;z-index:100;}
.nav{display:flex;justify-content:space-between;align-items:center;}
.nav-list{list-style:none;display:flex;gap:1.5rem;}
.nav-list a{text-decoration:none;color:#222;font-weight:bold;transition:color 0.3s;}
.nav-list a:hover{color:#ff4a57;}
.hero{position:relative;height:80vh;background:url('https://via.placeholder.com/1600x800') center/cover no-repeat;display:flex;align-items:center;justify-content:center;}
.hero .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.hero-content{position:relative;color:#fff;text-align:center;max-width:800px;}
.hero h1{font-size:3rem;margin-bottom:1rem;}
.hero p{font-size:1.2rem;margin-bottom:2rem;}
.btn{padding:0.8rem 2rem;font-weight:bold;text-decoration:none;border-radius:30px;transition:all 0.3s ease;}
.btn-primary{background:#ff4a57;color:#fff;border:none;}
.btn-primary:hover{background:#222;transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,0.2);}
.services{padding:5rem 0;text-align:center;}
.services h2{margin-bottom:3rem;font-size:2.5rem;color:#222;}
.service-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;}
.card{background:#fff;padding:2rem 1rem;border-radius:10px;transition:transform 0.3s ease,box-shadow 0.3s ease;}
.card img{width:80px;margin-bottom:1rem;}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,0.1);}
.card h3{margin-bottom:1rem;color:#ff4a57;}
.projects{background:#f9f9f9;padding:5rem 0;text-align:center;}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;}
.project{position:relative;overflow:hidden;border-radius:10px;cursor:pointer;}
.project img{width:100%;display:block;transition:transform 0.5s ease;}
.project:hover img{transform:scale(1.1);}
.project-info{position:absolute;bottom:0;left:0;width:100%;padding:1rem;background:rgba(0,0,0,0.6);color:#fff;font-weight:bold;text-align:center;}
.about{padding:5rem 0;text-align:center;}
.about h2{margin-bottom:2rem;font-size:2.5rem;color:#222;}
.about p{max-width:700px;margin:auto;font-size:1.1rem;color:#555;}
.contact{padding:5rem 0;text-align:center;}
.contact h2{margin-bottom:2rem;font-size:2.5rem;color:#222;}
.contact-form{display:grid;gap:1rem;max-width:500px;margin:auto;}
.contact-form input,.contact-form textarea{padding:1rem;border-radius:10px;border:1px solid #ccc;font-size:1rem;resize:none;}
.contact-form button{cursor:pointer;}
.footer{background:#222;color:#eee;text-align:center;padding:2rem 0;}
.fade-in{opacity:0;transform:translateY(20px);transition:all 1s ease-out;}
.fade-in.appear{opacity:1;transform:translateY(0);}
#lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:none;align-items:center;justify-content:center;z-index:1000;}
#lightbox img{max-width:90%;max-height:90%;border-radius:10px;}