body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif; 
}

/* Styling for the header */
header {
  background-color: #006A4E; 
  color: #fff; 
  padding: 10px; 
}

/* Styling for the navigation menu */
nav ul {
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}

/* Styling for navigation menu items */
nav ul li {
  display: inline; 
  margin-right: 20px; /* to add right margins between items */
}

/* Styling for navigation links */
nav ul li a {
  color: #fff; 
  text-decoration: none; 
}

/* Styling for the main content area */
main {
  padding: 20px; /* t add padding around main content */
}
.pets-of-the-week{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around; 
}

.pets-of-the-week img{
  width: 200px; 
  height: 200px; 
  object-fit: cover; 
  border-radius: 8px; 
  margin-bottom: 10px; 
}


/* Styling for the section displaying pets of the week */
.pets-for-adoption {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 20px; /* Add gap between pet cards */
}
/* Styling for individual pet cards and images */
.pet-card{
  border: 1px solid #ccc; /* Gray border around pet card */
  padding: 10px; 
  text-align: center; 
  border-radius: 8px; 
  background-color: #f9f9f9; 
} .pets-for-adoption img {
  text-align: center; 
  border-radius: 8px; 
  background-color: #f9f9f9; 
}

/* Styling for images inside pet cards */
.pet-card img, .pets-for-adoption img {
  max-width: 100%; 
  height: auto; 
  border-radius: 8px; 
  margin-bottom: 10px; }



/* Styling for the adoption form */
.adoption-form {
  max-width: 600px; /* Limit adoption form width */
  margin: 0 auto; /* Center adoption form horizontally */
}

.adoption-form form {
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
}

.adoption-form label {
  font-weight: bold; 
}

.adoption-form input,.adoption-form select,.adoption-form textarea,.adoption-form button {
  padding: 10px; /* t0 add padding inside form  */
  border: 1px solid #ccc; /* Add border to form  */
  border-radius: 4px; /* to round the corners of form */
  font-size: 16px; 
}

.adoption-form button {
  background-color: #006A4E; 
  color: #fff; 
  cursor: pointer; 
}

.adoption-form button:hover {
  background-color: #555; /* background color on hover */
}

/* Styling for the footer */
footer {
  background-color: #006A4E; 
  color: #fff; 
  text-align: center;
  padding: 10px; /* to add padding around footer content */
}