/* style.css - Zacclot Elegan Modern */

* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Poppins', sans-serif; background:#111; color:#fff; line-height:1.6;}
a {text-decoration:none; color:inherit;}

/* Header */
header {position:fixed; top:0; left:0; width:100%; background:rgba(0,0,0,0.85); padding:15px 40px; display:flex; justify-content:space-between; align-items:center; z-index:1000;}
header .logo {font-size:22px; font-weight:700; color:#C39D48;}
nav ul {display:flex; list-style:none; gap:25px;}
nav ul li a {color:#fff; font-weight:500; transition:0.3s;}
nav ul li a:hover {color:#C39D48;}

/* Hero */
.hero {height:100vh; background:url('../content/zacclot/images/home_repair_slider_slide1bg.jpg') center/cover no-repeat; display:flex; align-items:center; justify-content:center; text-align:center; position:relative;}
.hero::after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.hero-content {position:relative; z-index:2; max-width:700px;}
.hero h1 {font-size:56px; font-weight:700; margin-bottom:20px; color:#fff;}
.hero p {font-size:18px; margin-bottom:30px; color:#ddd;}
.btn {display:inline-block; padding:12px 28px; background:#C39D48; color:#111; font-weight:600; border-radius:4px; transition:0.3s;}
.btn:hover {background:#fff; color:#111;}

/* Services */
.services {padding:80px 10%; background:#1a1a1a; text-align:center;}
.services h2 {font-size:36px; margin-bottom:40px; color:#C39D48;}
.service-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:30px;}
.card {background:#222; padding:30px; border-radius:8px; transition:0.3s;}
.card:hover {transform:translateY(-8px); background:#2a2a2a;}
.card h3 {margin-bottom:15px; color:#fff;}
.card p {color:#bbb;}

/* Gallery */
.gallery {padding:80px 10%; background:#111; text-align:center;}
.gallery h2 {color:#C39D48; margin-bottom:30px;}
.gallery-images {display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px;}
.gallery-images img {width:100%; border-radius:6px;}

/* Footer */
footer {background:#000; text-align:center; padding:40px 20px; margin-top:60px;}
footer p {color:#777;}
footer a {color:#C39D48; margin:0 10px;}

/* Responsive */
@media(max-width:768px){
    .hero h1 {font-size:40px;}
    nav ul {flex-direction:column; gap:15px; background:#000; position:absolute; top:60px; right:40px; padding:20px; display:none;}
    nav.active ul {display:flex;}
}