* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; color: #333; scroll-behavior: smooth; }

/* Navbar */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 8%; background: #fff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.logo { font-size: 1.5rem; font-weight: bold; }
.logo span { color: #e67e22; }
.nav-links a { text-decoration: none; color: #333; margin-left: 20px; font-weight: 500; }
.btn-wa { background: #25d366; color: white !important; padding: 8px 15px; border-radius: 5px; }

/* Slider */
.slider-container { width: 100%; height: 500px; overflow: hidden; position: relative; }
.slides { display: flex; width: 400%; height: 100%; transition: 0.8s ease-in-out; }
.slide { width: 25%; position: relative; }
.slide img { width: 100%; height: 500px; object-fit: cover; }
.caption { position: absolute; bottom: 50px; left: 8%; background: rgba(0,0,0,0.7); color: #fff; padding: 15px 30px; font-size: 1.8rem; border-radius: 5px; }

input[name="slider"] { display: none; }
#s1:checked ~ .slides { margin-left: 0; }
#s2:checked ~ .slides { margin-left: -100%; }
#s3:checked ~ .slides { margin-left: -200%; }
#s4:checked ~ .slides { margin-left: -300%; }

.nav-dots { position: absolute; bottom: 20px; width: 100%; text-align: center; }
.nav-dots label { display: inline-block; width: 12px; height: 12px; background: #fff; border-radius: 50%; cursor: pointer; margin: 0 5px; opacity: 0.5; border: 1px solid #000; }
#s1:checked ~ .nav-dots label:nth-child(1), #s2:checked ~ .nav-dots label:nth-child(2),
#s3:checked ~ .nav-dots label:nth-child(3), #s4:checked ~ .nav-dots label:nth-child(4) { opacity: 1; background: #e67e22; width: 30px; border-radius: 10px; }

/* Content Grid */
.container { padding: 60px 8%; }
.bg-grey { background: #f4f4f4; }
.section-title { text-align: center; margin-bottom: 40px; font-size: 2rem; color: #2c3e50; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.card img { width: 100%; height: 200px; object-fit: cover; }
.card-content { padding: 20px; text-align: center; }
.price { color: #e67e22; font-weight: bold; margin-top: 5px; }

/* Location & Maps */
.location-wrapper { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
.map-box { flex: 2; min-width: 300px; height: 400px; }
.map-box iframe { width: 100%; height: 100%; border: none; border-radius: 10px; }
.map-info { flex: 1; min-width: 250px; }
.map-info ul { list-style: none; margin: 20px 0; }
.map-info li { margin-bottom: 10px; }
.wa-float { display: inline-block; background: #25d366; color: #fff; text-decoration: none; padding: 15px 25px; border-radius: 5px; font-weight: bold; box-shadow: 0 4px 10px rgba(37,211,102,0.3); }

footer { background: #2c3e50; color: #fff; text-align: center; padding: 30px; }

@media (max-width: 768px) {
    .slider-container, .slide img { height: 300px; }
    .caption { font-size: 1.1rem; bottom: 30px; }
    .location-wrapper { flex-direction: column; }
}