/* style.css — Aayam Biotic public site
   Place this file next to index.html and keep images inside an /assets or /images folder.
*/
:root{
  --primary:#4f46e5; /* indigo-600 */
  --primary-700:#4338ca;
  --muted:#6b7280;
  --bg:#f8fafc;
  --card:#ffffff;
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Navbar ---------- */
.header, .navbar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:#fff;border-bottom:1px solid rgba(15,23,42,0.04);}
.logo{font-weight:700;color:var(--primary);font-size:1.15rem;display:flex;align-items:center;gap:12px}
.logo img{height:40px;width:40px;border-radius:8px}
.navbar nav a{margin-left:18px;text-decoration:none;color:var(--muted);font-weight:600}
.navbar nav a:hover{color:var(--primary)}

/* ---------- Hero ---------- */
.hero{
  background-image:linear-gradient(rgba(15,23,42,0.45),rgba(15,23,42,0.25)), url('assets/images/hero.jpg');
  background-size:cover;background-position:center;padding:72px 20px 96px;color:#fff;
}
.hero .hero-content{max-width:1100px;margin:0 auto;text-align:left}
.hero h1{font-size:2rem;margin:0 0 10px;line-height:1.05}
@media(min-width:768px){.hero h1{font-size:3rem}}
.hero p{margin:0 0 18px;color:#e6edf7;font-size:1.05rem}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--primary);color:#fff;text-decoration:none;font-weight:700}
.btn.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.14)}

/* ---------- Sections ---------- */
.section{max-width:1100px;margin:36px auto;padding:20px}
.section-title{font-size:1.4rem;margin-bottom:14px}
.light{background:#fff;border-radius:var(--radius);padding:18px}

/* ---------- Cards grid ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:16px}
.card{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 6px 20px rgba(2,6,23,0.04)}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted)}
@media(min-width:800px){.cards{grid-template-columns:repeat(3,1fr)}}

/* ---------- About ---------- */
.about-text{color:var(--muted);line-height:1.6}

/* ---------- Contact box ---------- */
.contact-box{display:grid;grid-template-columns:1fr;gap:18px}
.contact-info{background:linear-gradient(180deg,#fff,#fbfdff);padding:16px;border-radius:10px;border:1px solid rgba(15,23,42,0.03)}
.contact-info p{margin:8px 0;color:var(--muted)}
.contact-form{background:var(--card);padding:16px;border-radius:10px;border:1px solid rgba(2,6,23,0.04)}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);margin:8px 0;font-size:0.95rem}
.contact-form button{background:var(--primary);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer}
@media(min-width:900px){.contact-box{grid-template-columns:1fr 1fr}}

/* ---------- Footer ---------- */
.footer{padding:18px;text-align:center;color:var(--muted);font-size:0.95rem}

/* ---------- Utility ---------- */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.mt-6{margin-top:24px}

/* ---------- Small screens tweaks ---------- */
@media(max-width:600px){
  .navbar nav{display:none}
  .hero{padding:48px 16px}
  .hero h1{font-size:1.5rem}
}

/* ---------- Small UI polish ---------- */
.card:focus-within, .contact-form input:focus, .contact-form textarea:focus{outline:none;box-shadow:0 6px 18px rgba(79,70,229,0.12);border-color:var(--primary-700)}

/* Additional layout elements for multi-page */
.page-content{max-width:1100px;margin:28px auto;padding:0 20px}