body {
   margin: 0;
   font-family: 'Poppins', sans-serif;
   background-color: white;
   color: black;
 }

 body.dark-mode {
   background-color: #121212;
   color: white;
 }

 /* Dropdown styling */
 .dropdown-menu .dropdown-item {
   position: relative;
   color: black;
   background: white;
   padding: 8px 16px;
   transition: color 0.3s ease;
 }

 .dropdown-menu .dropdown-item::after {
   content: "";
   position: absolute;
   bottom: 4px;
   left: 0;
   width: 0%;
   height: 2px;
   background: #000;
   transition: width 0.3s ease;
 }

 .dropdown-menu .dropdown-item:hover {
   color: #000;
 }

 .dropdown-menu .dropdown-item:hover::after {
   width: 100%;
 }


 /* === Breed Card CSS (asal, kekal) === */
 .breed-card {
   background: #1c1c1c;
   border-radius: 12px;
   padding: 20px;
   text-align: center;
   box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
   transition: 0.3s;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

 .breed-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
 }

 /* 🔧 Betulkan gambar supaya fit elok dalam frame */
 .breed-card {
   background: #1c1c1c;
   border-radius: 12px;
   padding: 20px;
   text-align: center;
   box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
   transition: 0.3s;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

 .breed-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
 }

 /* 🔧 Gambar fit elok dalam card tanpa ubah nisbah */
 /* === Uniform Breed Card Styling === */
 .breed-card {
   background: #1c1c1c;
   border-radius: 12px;
   padding: 20px;
   text-align: center;
   box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
   transition: 0.3s;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

 .breed-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
 }

 /* 🔧 Betulkan gambar supaya sama saiz dan fit elok */
 .breed-card img {
   width: 100% !important;
   height: 230px !important;
   /* Semua gambar tinggi sama */
   object-fit: cover !important;
   /* Crop elok ikut frame */
   object-position: center !important;
   /* Fokus tengah gambar */
   border-radius: 10px !important;
   background-color: transparent !important;
   display: block;
   margin-bottom: 15px;
   transition: transform 0.3s ease;
 }

 .breed-card:hover img {
   transform: scale(1.05);
 }

 .breed-card h4 {
   margin-top: 10px;
   color: #fff;
   font-weight: 600;
 }

 .breed-card p {
   color: #bbb;
   font-size: 0.95rem;
   min-height: 60px;
 }

 /* Add Breed Button Card */
 .add-breed-card {
   background-color: #1c1c1c;
   border: 2px dashed #ffffff55;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   min-height: 320px;
   cursor: pointer;
   transition: 0.3s;
   border-radius: 12px;
 }

 .add-breed-card:hover {
   background-color: #2a2a2a;
   transform: translateY(-5px);
   box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
 }

 .add-breed-card h1 {
   font-size: 4rem;
   color: #fff;
   margin: 0;
 }


 /* Navbar */
 .navbar {
   background: rgba(0, 0, 0, 0.85);
 }

 .nav-link {
   color: #ddd !important;
   font-weight: 500;
 }

 .nav-link:hover {
   color: #28a745 !important;
 }

 /* Hero */
 .hero {
   height: 60vh;
   background: url('image/peteducation.webp') center/cover no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   position: relative;
   color: white;
 }

 .hero::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
 }

 .hero-content {
   position: relative;
   z-index: 2;
   max-width: 800px;
   padding: 20px;
 }

 .hero h1 {
   font-size: 3rem;
   font-weight: 700;
   margin-bottom: 20px;
   text-shadow: 0 0 10px #fff, 0 0 20px #000;
 }

 .hero p {
   font-size: 1.2rem;
   color: #ddd;
 }

 /* Custom Button */
 .btn-custom {
   background-color: brown;
   border-radius: 30px;
   padding: 10px 26px;
   font-weight: 500;
   color: white;
   border: none;
   transition: 0.3s;
 }

 .btn-custom:hover {
   background-color: rgb(161, 69, 69);
   transform: scale(1.05);
 }

 /* Footer */
 footer {
   background: #000;
   padding: 40px 0;
   text-align: center;
   color: #aaa;
 }

 footer h5 {
   color: #fff;
   margin-bottom: 15px;
 }