:root {
    --primary-green: #6bbf59;
    --secondary-brown: #a66a3f;
    --light-bg: #f5f9f4;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
  }
  
  body {
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--light-bg);
    background-image: url("img/pattern.png");
    background-size: 300px 300px;
  
    display: flex;
    flex-direction: column;
  }
  main {
    flex: 1;
  }


  .navbar {
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  
  .navbar-brand {
    font-weight: 700;
    color: var(--primary-green) !important;
  }
  
  .nav-link {
    font-weight: 500;
  }
  
  .hero {
    background: linear-gradient(135deg, #e8f8e5, #fdf7ec);
    padding: 4rem 0 3rem;
  }
  
  .hero h1 {
    color: var(--primary-green);
    font-weight: 800;
  }
  
  .hero p {
    font-size: 1.1rem;
  }
  
  .btn-primary,
  .btn-success {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
  }
  
  .btn-primary:hover,
  .btn-success:hover {
    background-color: #5aa34b;
    border-color: #5aa34b;
  }
  
  .section-title {
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 1.5rem;
  }
  
  .card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }
  
  .card-img-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  
  .badge-category {
    background-color: var(--primary-green);
    color: #ffffff;
    font-size: 0.75rem;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
  }
  
  footer {
    background-color: #ffffff;
    padding: 1.5rem 0;
    margin-top: 3rem;
    font-size: 0.9rem;
    color: #666666;
  }
  
  .animal-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-right: 0.5rem;
  }
  
  .table-zoo th {
    background-color: #e8f8e5;
  }