* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #f5f7fa; color: #333; }
.container { max-width: 1000px; margin: 0 auto; padding: 20px; }
header { text-align: center; padding: 20px 0; background: linear-gradient(135deg, #84fab0, #8fd3f4); border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
header h1 { margin-bottom: 10px; }
nav ul { list-style: none; display: flex; justify-content: center; gap: 20px; }
nav a { text-decoration: none; color: #333; font-weight: bold; transition: color 0.3s; }
nav a:hover { color: #0077cc; }
.carousel { position: relative; margin: 30px 0; overflow: hidden; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.slides { display: flex; transition: transform 0.5s ease-in-out; }
.slides img { width: 100%; flex-shrink: 0; }
.prev, .next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.7); border: none; font-size: 2rem; padding: 5px 10px; cursor: pointer; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.prev:hover, .next:hover { background: rgba(255,255,255,0.9); }
.prev { left: 10px; }
.next { right: 10px; }
section { margin-bottom: 40px; }
section h2 { margin-bottom: 15px; text-align: center; color: #0077cc; }
.product-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 20px; list-style: none; }
.product-list li { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s; }
.product-list li:hover { transform: translateY(-5px); }
footer { text-align: center; padding: 15px 0; border-top: 1px solid #ddd; }
@media (max-width: 600px) {
  nav ul { flex-direction: column; gap: 10px; }
}