body { font-family: 'Vazirmatn', sans-serif; background: #f4f4f4; margin: 0; color: #333; }
.container { width: 85%; margin: auto; overflow: hidden; }
header { background: #333; color: #fff; padding: 20px 0; border-bottom: 5px solid #ffcc00; }
.logo { float: right; margin: 0; }
.logo span { color: #ffcc00; }
nav { float: left; margin-top: 10px; }
nav ul { padding: 0; list-style: none; }
nav li { display: inline; margin-right: 20px; }
nav a { color: #fff; text-decoration: none; font-weight: bold; }
nav a.active, nav a:hover { color: #ffcc00; }
.hero { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/excavator.png'); background-size: cover; height: 400px; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.hero h2 { font-size: 3rem; margin: 0; color: #ffcc00; }
.btn { display: inline-block; background: #ffcc00; color: #333; padding: 10px 20px; text-decoration: none; border-radius: 5px; margin-top: 20px; font-weight: bold; }
.features { display: flex; gap: 20px; margin-top: -50px; margin-bottom: 50px; }
.card { background: #fff; padding: 20px; flex: 1; text-align: center; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-bottom: 4px solid #ffcc00; }
.card img { width: 100%; border-radius: 5px; }
footer { background: #333; color: #fff; text-align: center; padding: 20px; margin-top: 20px; }
.page-content { padding: 50px 0; min-height: 400px; }