/* styles.css - T-Care responsive site */
:root{
  --green-700:#1b5e20;
  --green-500:#43a047;
  --muted:#6b6b6b;
  --card-bg: rgba(255,255,255,0.9);
  --glass: rgba(255,255,255,0.55);
  --radius: 12px;
  --max-width: 1100px;
  --accent:#2e7d32;
  --shadow: 0 8px 24px rgba(16,24,32,0.12);
  --transition: 200ms cubic-bezier(.2,.9,.3,1);
}

*{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: linear-gradient(180deg, rgba(232,245,233,0.85), rgba(240,249,240,0.9)), url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=1600&q=80') center/cover fixed;
  color:#1f2937;
  -webkit-font-smoothing:antialiased;
}

/* container */
.container{
  max-width:var(--max-width);
  margin: 0 auto;
  padding: 24px;
}

/* header */
.header{
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  border-radius: 14px;
  margin: 16px;
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--green-700);
}
.brand svg{width:52px;height:52px}
.brand h1{font-size:20px;margin:0}
.nav{
  display:flex;
  gap:12px;
  align-items:center;
}
.nav a{
  color:var(--green-700);
  text-decoration:none;
  font-weight:600;
  padding:8px 10px;
  border-radius:8px;
}
.nav a:hover{background:var(--glass)}

/* mobile nav */
.mobile-toggle{display:none; background:none;border:0;font-size:24px;color:var(--green-700)}
@media (max-width:880px){
  .nav{display:none}
  .mobile-toggle{display:block}
  .header{padding:12px;}
}

/* hero */
.hero{
  margin: 18px;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns: 1fr 480px;
  gap:0;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
}
.hero-left{
  padding:40px;
  display:flex;
  flex-direction:column;
  gap:18px;
  justify-content:center;
}
.hero h2{color:var(--green-700);font-size:32px;margin:0}
.hero p{margin:0;color:var(--muted);line-height:1.5}
.cta-row{display:flex;gap:12px;align-items:center}
.btn{
  background:var(--green-500);
  color:white;
  padding:12px 18px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:700;
  transition:transform var(--transition), box-shadow var(--transition);
}
.btn.secondary{background:transparent;color:var(--green-700);border:2px solid rgba(66,160,71,0.12)}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(34,197,94,0.12)}

/* hero image panel */
.hero-right{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center}
.hero-right img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.95)}

/* sections */
.section{margin:18px;border-radius:14px;padding:28px;background:var(--card-bg);box-shadow:var(--shadow)}
.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.card{background:white;padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,32,0.06)}
.card h3{margin-top:0;color:var(--accent)}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.feature{display:flex;gap:12px;align-items:flex-start}
.feature svg{flex-shrink:0;width:44px;height:44px}

/* table */
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{padding:12px;border:1px solid #e6e6e6;text-align:left}

/* doctor cards */
.doctor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.doctor{display:flex;gap:12px;align-items:center;padding:12px;background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(16,24,32,0.04)}
.doctor img{width:64px;height:64px;border-radius:50%;object-fit:cover}

/* blog list */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

/* contact form */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px}
textarea{resize:vertical;min-height:120px}

/* footer */
.footer{padding:28px;text-align:center;color:white;background:linear-gradient(90deg,var(--green-700),var(--accent));border-radius:12px;margin:18px}

/* responsive */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr 360px}
}
@media (max-width:880px){
  .container{padding:12px}
  .hero{grid-template-columns:1fr;min-height:520px}
  .hero-right{order:-1;height:220px}
  .hero-left{padding:22px}
  .grid{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .header{flex-direction:row;align-items:center;}
}

/* tiny */
@media (max-width:420px){
  .brand h1{font-size:16px}
  .hero h2{font-size:24px}
}

/* animations */
.fade-in{animation:fadeIn .9s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}