/* styles/styles.css - Unified responsive stylesheet */
:root{
  --primary:#e2e3e5;
  --primary-dark:#c7c9cc;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#6b6b6b;
  --radius:12px;
  --maxw:1100px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family:'Tajawal',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* full background logo soft */
body{
  background-image:
    linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)),
    url('https://d.top4top.io/p_3618qnmtf1.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  background-attachment:fixed;
}

/* container */
.container{
  max-width:var(--maxw);
  margin:24px auto;
  padding:18px;
  background: rgba(255,255,255,0.92);
  border-radius:var(--radius);
  box-shadow:0 8px 28px rgba(8,12,20,0.06);
}

/* header */
.header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:56px;height:56px;object-fit:cover;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.06)}
h1,h2,h3{margin:0}
.lead{color:var(--muted);font-size:14px;margin-top:6px}

/* responsive nav */
.navbar {
  display:flex;
  align-items:center;
  gap:12px;
}
.nav-toggle {
  display:none;
  background:transparent;
  border:0;
  font-size:22px;
}
.nav-links{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.nav-links a{
  padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--text);background:transparent;font-size:14px;
}
.nav-links a.cta{background:var(--primary);color:#000;border:1px solid var(--primary-dark);font-weight:600}
.btn-wa{background:#25D366;color:#fff;padding:9px 12px;border-radius:10px;text-decoration:none}

/* hero */
.hero{background:linear-gradient(90deg,rgba(11,116,222,0.06),rgba(11,116,222,0.02));padding:18px;border-radius:12px;margin:18px 0;display:flex;gap:12px;align-items:center}
.hero .text{flex:1}
.hero img{width:110px;height:110px;border-radius:12px;object-fit:cover}

/* grid & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(13,20,28,0.06);transition:transform .14s;text-decoration:none;color:inherit;display:block}
.card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:10px}
.card:hover{transform:translateY(-6px)}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:12px}
.gallery-grid img{width:100%;height:140px;object-fit:cover;border-radius:8px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,0.06);transition:transform .12s}
.gallery-grid img:hover{transform:translateY(-6px)}

/* contact box */
.contact-box{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(13,20,28,0.04);margin-top:18px}

/* buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;font-size:14px}
.btn-primary{background:var(--primary);color:#000;border:1px solid var(--primary-dark);font-weight:600}

/* footer */
footer{text-align:center;color:var(--muted);margin-top:18px;padding:8px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;padding:20px;z-index:9999}
.modal.active{display:flex}
.modal img{max-width:95%;max-height:90%;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,0.6)}

/* socials */
.socials{display:flex;gap:10px;align-items:center}
.socials a{width:40px;height:40px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);border:1px solid var(--primary-dark);text-decoration:none;color:#000}
.socials svg{width:20px;height:20px;display:block;}

/* small screens */
@media (max-width:900px){
  .hero{flex-direction:column;align-items:flex-start}
  .brand img{width:48px;height:48px}
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:76px;right:18px;background:rgba(255,255,255,0.98);box-shadow:0 8px 30px rgba(0,0,0,0.08);padding:12px;border-radius:10px;flex-direction:column;display:none;min-width:200px}
  .nav-links.open{display:flex}
  .container{margin:12px;padding:12px}
  .gallery-grid img{height:120px}
}

/* very small */
@media (max-width:420px){
  .gallery-grid img{height:100px}
  .card img{height:140px}
  .hero img{width:90px;height:90px}
}