body {
    padding: 8em 4em 8em 4em;
    background-color: #FFF5F1;
    font-family: 'Lato',Verdana,Arial,sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 1em;
}

/* Overall Container */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Individual Card */
.card {
  background-color: #ffffff;
  width: 250px;
  min-width: 10em; 
  min-height: 12em; 
  border: 1px solid #fdf9f8;
  padding: 15px;
  border-radius: 1em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
  text-align: center; /* Center text content */
}

.card:hover {
    border: 1px solid #F7941D;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Optional: add a subtle shadow */
    text-align: center; /* Center text content */
  }

/* Icon Circle */
.icon-circle {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: #F7941D; /* Customize color */
  margin: 0 auto 20px; /* Center and add space below */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .card {
    width: calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  .card {
    width: 100%;
  }
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    color: #ffffff;
  }

p {
  color: #666666;
    font-weight: 300;
    font-style: italic;
    font-size: 1em;
}

p strong {
  font-weight: 500;
}


p a { /* Assuming you've added a class "button-link" to your <a> tag */
  font-style: normal;
  display: inline-block; /* Allows you to set width and height */
  padding: 5px 20px; /* Adjust padding as needed */
  background-color: #FFF5F1; /* Button background color (blue) */
  color: #666666; /* Button text color */
  text-decoration: none; /* Remove underline */
  border: 1px solid #F7941D;
  border-radius: 100px; /* Add rounded corners */
  cursor: pointer; /* Show pointer cursor on hover */
  transition: background-color 0.3s; /* Smooth transition effect */
  margin: 1em;
}

p a:hover {
  background-color: #ffffff; /* Darker blue on hover */
  border: 1px solid #666666;
}



/* Keyston card */

div#card-keystone {
  background-color: #F7941D;
  border: 1px solid #F7941D;
}

div#card-keystone h3 {
    color: #ffffff;
}

div#card-keystone p {
    color: #FFF5F1;
    font-style: normal;
    font-weight: 300;
    font-size: 1em;
}

.icon-circle img {
    width: 3em;
    height: 3em;
    display: inline-block;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
  }

  div#card-keystone p a { /* Assuming you've added a class "button-link" to your <a> tag */
    display: inline-block; /* Allows you to set width and height */
    padding: 5px 20px; /* Adjust padding as needed */
    background-color: #FFF5F1; /* Button background color (blue) */
    color: #666666; /* Button text color */
    text-decoration: none; /* Remove underline */
    border: 1px solid #F7941D;
    border-radius: 100px; /* Add rounded corners */
    cursor: pointer; /* Show pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition effect */
    margin: 1em;
  }
  
  div#card-keystone p a:hover {
    background-color: #ffffff; /* Darker blue on hover */
    border: 1px solid #666666;
  }