:root {
  --primary: #16c87d;
  --secondary: #2d3436;
  --light: #f6f7f8;
  --dark: #2d3436;
  --radius: 8px;
}
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height:1.6; color:var(--dark); background:var(--light); }
.container { width:90%; max-width:1100px; margin:auto; }
header { background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
header .container { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.logo { font-size:1.5rem; font-weight:bold; color:var(--primary); text-decoration:none;}
.logo img { width: 100px; }
nav ul { display:flex; gap:1rem; list-style:none; }
nav a { color:var(--dark); text-decoration:none; font-weight:500; }
#menu-toggle { display:none; font-size:1.5rem; background:none; border:none; cursor:pointer; }
.hero { color:#fff; background-size:cover; background-position:center; padding:5rem 0; }
.hero-inner { text-align:center; background:rgba(0,0,0,0.35); padding:3rem; border-radius:var(--radius); }
.btn { background:var(--primary); color:#fff; padding:0.75rem 1.5rem; border:none; border-radius:var(--radius); text-decoration:none; display:inline-block; margin:0.5rem 0; cursor:pointer; }
.delivery { margin-top: 15px; }
.cta { margin-top: 15px; }
.btn.secondary { background:#fff; color:var(--primary); border:2px solid var(--primary); }
.page-header { background:var(--primary); color:#fff; padding:2rem 0; text-align:center; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.breeds { margin-top: 15px; }
.breeds .card, .gallery img { background:#fff; border-radius:var(--radius); box-shadow:0 2px 6px rgba(0,0,0,0.05); overflow:hidden; }
.card img { width:100%; height:200px;  object-fit: contain; object-position: center; }
.card { padding-bottom:1rem; text-align:center; }
.gallery { margin-top: 15px; }
.gallery img { width:100%; height:240px; object-fit:cover; margin-bottom:1rem; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.blog-list .post { margin-bottom:2rem; }
.blog-list .post h2 { color:var(--primary); }
footer { background:var(--secondary); color:#fff; padding:1rem 0; text-align:center; margin-top:3rem; }
@media (max-width:768px) {
  .two-col { grid-template-columns:1fr; }
  nav ul { flex-direction:column; display:none; }
  nav ul.open { display:block; }
  #menu-toggle { display:block;}
  #menu-toggle img { display:block; width: 16px; height: 16px; }
}