generate a css code for following code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services - Beauty Salon</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">Beauty Salon</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</nav>
</header>
<main>
<section class="services-container">
<h1>Our Services</h1>
<div class="service-grid">
<div class="service-card">
<h3>Hair Services</h3>
<ul>
<li>Haircut - $45</li>
<li>Hair Coloring - $75+</li>
<li>Highlights - $85+</li>
<li>Blowout - $40</li>
</ul>
</div>
<div class="service-card">
<h3>Nail Services</h3>
<ul>
<li>Manicure - $35</li>
<li>Pedicure - $45</li>
<li>Gel Polish - $15+</li>
<li>Nail Art - $10+</li>
</ul>
</div>
<div class="service-card">
<h3>Skin Care</h3>
<ul>
<li>Basic Facial - $60</li>
<li>Deep Cleansing - $80</li>
<li>Anti-Aging - $95</li>
<li>Acne Treatment - $75</li>
</ul>
</div>
<div class="service-card">
<h3>Waxing</h3>
<ul>
<li>Eyebrows - $20</li>
<li>Upper Lip - $15</li>
<li>Full Face - $45</li>
<li>Brazilian - $60</li>
</ul>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>