*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}
body{line-height:1.6;color:#333;background:#fafafa}
header{position:sticky;top:0;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);z-index:1000}
.nav{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.logo img{height:60px}
.nav a{margin:0 12px;text-decoration:none;color:#333;font-weight:600}
.nav a:hover{color:#e65100}
.menu-btn{display:none;font-size:26px;cursor:pointer}

.hero{background:url('images/back2.jpg?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;color:#fff;padding:140px 20px;text-align:center}
.hero h1{font-size:48px;margin-bottom:15px}
.hero p{font-size:20px;margin-bottom:25px}


.hero{position:relative;height:520px;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease-in-out}
.hero-slide.active{opacity:1}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.hero-content{position:relative;z-index:2;padding:0 20px}
.hero h1{font-size:48px;margin-bottom:15px}
.hero p{font-size:20px;margin-bottom:25px}
.hero-slide {
  position:absolute;
  inset:0;
  background-size:cover;
  opacity:0;
  transition:opacity 1s ease-in-out;
}

.hero-slide.active {
  opacity:1;
}



.btn{background:#e65100;color:#fff;padding:12px 26px;border:none;border-radius:6px;font-size:16px;text-decoration:none;display:inline-block}

.container{max-width:1200px;margin:auto;padding:60px 20px}
.section-title{text-align:center;font-size:34px;margin-bottom:40px;color:#e65100}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px}
.card{border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.08);background:#fff;transition:.25s}
.card:hover{transform:translateY(-6px)}
.card img{width:100%;height:190px;object-fit:cover}
.card h3{padding:16px}

.search-box{max-width:500px;margin:0 auto 40px;display:flex}
.search-box input{flex:1;padding:12px;border:1px solid #ccc;border-radius:6px 0 0 6px}
.search-box button{padding:12px 18px;border:none;background:#e65100;color:#fff;border-radius:0 6px 6px 0}

.categories{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:35px}
.cat{background:#fff;border:1px solid #eee;padding:8px 16px;border-radius:20px;font-weight:600}

.about{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about img{width:100%;border-radius:12px}

.contact form{display:grid;gap:15px;max-width:520px;margin:auto}
input,textarea{padding:12px;border:1px solid #ccc;border-radius:6px;font-size:16px}

footer{background:#1f1f1f;color:#fff;padding:40px 20px;margin-top:50px}
.footer-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
footer h4{margin-bottom:12px;color:#ffcc80}
footer a{color:#ddd;text-decoration:none;margin:6px 0}
.footer a {
  display: inline !important;
}
footer a:hover{color:#fff}
.copy{text-align:center;margin-top:25px;font-size:14px;color:#bbb}

/* Floating Social

https://images.unsplash.com/photo-1490645935967-10de6ba17061
 */
.social{position:fixed;right:12px;top:40%;display:flex;flex-direction:column;gap:10px;z-index:1001}
.social a{background:#e65100;color:#fff;padding:10px;border-radius:50%;text-decoration:none}

/* WhatsApp Share */
.wa-share{position:fixed;bottom:20px;right:20px;background:#25D366;color:#fff;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:28px;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:1001}

@media(max-width:768px){
.hero h1{font-size:32px}
.about{grid-template-columns:1fr}
.nav nav{display:none}
.menu-btn{display:block}
}