body {
  font-family: 'Karla', sans-serif; /* Use a single font for consistency */
  margin: 0; /* Remove default body margins */
  padding: 0;
  display: flex;
  justify-content: center; /* Center the container horizontally */
  align-items: center; /* Center the container vertically */
  min-height: 100vh; /* Ensure the body takes up the full viewport height */
  background-color: #f0f0f0; /* Add a light background color */
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 0px; /* Add some gap between grid items - consider adding a small gap like 20px */
  width: 700px; /* Set a reasonable width for the container */
  background-color: white;
  border-radius: 8px;
  overflow: hidden; /* Prevent content from overflowing rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.header {
  grid-column: span 2; /* Span both columns */
  padding: 20px;
  text-align: left;
  color: hsl(179, 62%, 43%); /* Darker text color */
}

.header h1 {
  margin-bottom: 10px; /* Add spacing below the h1 */
  font-weight: 700;
}

.sub-title {
  color: hsl(71, 73%, 54%); /* Lighter color for subtitle */
  margin-bottom: 10px;
  font-weight: 700;
}

.pricing {
  background-color: #2abeba; /* Use a more suitable color */
  padding: 20px;
  color: white;
}

.pricing-card h2 {
  margin-bottom: 10px;
}

.pricing-card p {
  margin-bottom: 20px;
  font-size: 16px; /* Increase the font size */
}

#price {
  font-size: 2em; /* Adjust the size as needed */
  font-weight: bold;
}

.pricing-card p {
  font-size: 1em; /* Adjust the size as needed */
}

.pricing-card p span {
  font-size: 2em; /* Adjust the size as needed */
  font-weight: bold;
}


.pricing-card button {
  background-color: hsl(71, 73%, 54%);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  width: 250px; /* Let the button width adjust to its content */
  height: 40px;
  display: block; 
  margin: 0 auto; /* Center the button */
  text-align: center; /* Center the text inside the button (redundant with display:block but good practice) */
  display: flex;        /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically (if needed) */
  margin-top: 60px;
}
.benefits {
  background-color: hsl(179, 62%, 43%);/* Light gray background */
  padding: 20px;
  color: white;
}

.benefits h2 {
  margin-bottom: 10px;
  color: white;
}

.benefits ul {
  list-style: none; /* Remove bullet points */
  padding: 0;
  margin: 0;
  color: white;
}

.benefits li {
  margin-bottom: 10px;
  color: white;
}

.attribution {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  text-align: center;
  margin-top: 20px;

}

.attribution a {
  color: hsl(228, 45%, 44%);
  text-decoration: none;
}

.attribution a:hover {
  text-decoration: underline;
}