:root {
    --cardset-width: 100%; 
   /**/
   --card-gap: 20px;/*space between cards*/ 
   --fill-hspace-content: 0;/*set to 1 for content fill, set to 0 for title fill*/

   --card-background-color: #ffffff;
   --card-border-radius: 16px 4px 16px 4px;/* top-left | top-right | bottom-right | bottom-left */
   --card-box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);/* offset-x | offset-y | blur-radius | spread-radius | color */

   --card-title-background-color:#4f806f;
   --card-title-color:#eeeeee;
   --card-title-padding:.25rem;
   --card-title-text-align:center;

   --card-image-height: auto;
   --card-image-max-width: 80%;
   --card-image-margin: 2rem;

   --card-content-background-color: #ffffff;
   --card-content-color: #111111;
   --card-content-padding: .25rem;

   --card-footer-background-color: #e1cbd3;
   --card-footer-color: #ffffff;
   --card-footer-padding: .5rem;
   --card-footer-min-height: auto;
   --card-footer-vertical-horizontal-align: center;/*flex-start, center or flex-end*/
   --card-footer-vertical-align: center;/*flex-start, center or flex-end*/

   --card-button-background-color: #f8b290;
   --card-button-color: #111111;
   --card-button-border-radius: .5rem;
   --card-button-text-decoration: none;
   --card-button-height: fit-content;
   --card-button-padding: .15rem;
   --card-button-hover-background-color: #ffc6ab;
   --card-button-hover-color: #222222;
   --card-button-hover-text-decoration: underline;

}

/*Non-var configurations*/
.card_item, .card_item_one {
    width:100%;
    padding:var(--card-gap);
    margin: 0; /*margin has to be 0*/
    display:flex;
}
.card_item_center_one {
  width: 100%;
  justify-content: center;
}
.card_center_one {
  width:90%;
}
@media (min-width: 700px) {
    .card_item {
        width:50%;
    }
    .card_item_center_one {
      width: 100%;
      justify-content: center;
    }
    .card_center_one {
      width:70%;
    }
}
@media (min-width: 1000px) {
    .card_item {
        width:25%;
    }
    .card_item_three {
      width:33.3%;
    }
    .card_item_one {
      width:100%;
    }
    .card_center_one {
      width:60%;
    }
}
/*End Non-var configurations*/

.cardset {
    width:var(--cardset-width);
  }

.cards {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.card {
    background-color: var(--card-background-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    /*display: flex;
    flex-direction: column;*/
    display: grid;
    grid-template-areas:
        "title"
        "image"
        "content"
        "footer";
    grid-template-rows: auto auto 1fr auto;
    overflow: hidden;
  }

  .card_title {
    padding: var(--card-title-padding);
    color: var(--card-title-color);
    background-color: var(--card-title-background-color);
    text-align:var(--card-title-text-align);
    flex-grow: 1;
    grid-area: title;
  }

  img.cardimage {
    height: var(--card-image-height);
    max-width: var(--card-image-max-width);
    margin: var(--card-image-margin);
    grid-area: image;
  }
  .card_content {
    background-color: var(--card-content-background-color);
    color: var(--card-content-color);
    padding: var(--card-content-padding);
    flex-grow: var(--fill-hspace-content);
    grid-area: content;
  }
  .card_footer {
    background-color: var(--card-footer-background-color);
    color: var(--card-footer-color);
    padding: var(--card-footer-padding);
    display: flex;
    justify-content: var(--card-footer-vertical-horizontal-align);
    min-height: var(--card-footer-min-height);
    grid-area: footer;
  }
  a.card_btn {
    background-color: var(--card-button-background-color);
    color: var(--card-button-color);
    padding: var(--card-button-padding);
    border-radius: var(--card-button-border-radius);
    text-decoration: var(--card-button-text-decoration);
    height: var(--card-button-height);
    align-self: var(--card-footer-vertical-align);
  }

  a.card_btn:hover {
    background-color: var(--card-button-hover-background-color);
    color: var(--card-button-hover-color);
    text-decoration: var(--card-button-hover-text-decoration);
  }
  .card h2 {
    line-height: 1;
    font-size: clamp(1.5rem, 3vw, 28px);
}
.card_content {
  line-height: 1;
}
.card img {
  border-radius:25%;
  max-width:80%
}
.cardimgwrap {
  position:relative;
  display:inline-block;
    padding:0;
    font-size:0;
    height:100%;
    width:100%;
    z-index: 1;
    text-align: center;
}
.cardsvg {
  all:unset;
  width: 70%;

  height: 70%;

  position: absolute;
  bottom:-20% !important;

  right: -10% !important;

  opacity: 70%;

  z-index: -1;

}
a.card-cta-button {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 8px;
  text-decoration: none;
  font-size:1.25rem;
  font-weight: 100;
  text-align: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
  margin:0rem;
  /* Main button color */
  background-color: var(--dark-highlight);  /* Dark greenish color as the primary background */
  color: var(--header-background-color);             /* Off-white color for text for contrast */

  /* Styling for hover effect */
  border: 2px solid transparent;  /* Pinkish color for the border */
}

/* Hover effect for the button */
a.card-cta-button:hover {
  background-color: var(--medium-highlight);  /* Pinkish color for hover effect */
  color: var(--dark-highlight);             /* Dark greenish color for text contrast on hover */
  transform: translateY(0px); /* Slight upwards movement for hover effect */
  border: 2px solid var(--dark-highlight); 
}

/* Active state effect (when the button is clicked) */
a.card-cta-button:active {
  transform: translateY(0);  /* Reset to the original position */
  background-color: var(--header-background-color); /* Off-white color for active state */
  color: var(--dark-highlight);            /* Dark greenish color for text contrast on active state */
}
.card_content {
  background-color: transparent;
  z-index: 3 !important;
}