.icon img {
    width: 50px;
}
ul.ul-cards {
  width: min(100%, 80rem); 
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  justify-content: center;
	padding-top: 30px;
}
ul.ul-cards > li {
	    height: 255px;
	max-height:255px;
  --bg-color: #EAEFEF;
  --text-color: #333;
  --padding: 1rem;
  --circle-size: 5rem;
  --circle-expand: 1rem;
  --flap-height: 1.25rem;
  --flap-offset: 0.5rem;
  max-width: 15rem;
  margin-top: calc(var(--circle-size) / 2 + var(--circle-expand));
  margin-bottom: var(--flap-offset);
  background-color: var(--bg-color);
  border-radius: var(--padding);
  padding: var(--padding);

  --bs-rim: inset -0.1rem 0.1rem 0.1rem rgb(255 255 255 / 0.5);
  --bs-card-spread: 0.25rem;
  --bs-card-color: rgb(0 0 0 / 0.02);
 
  box-shadow: var(--bs-rim), var(--bs-card);
  display: grid;
  grid-template-rows: max-content max-content auto;
  justify-items: center;
  text-align: center;
  gap: 0.75rem;
  position: relative;
}
ul.ul-cards > li > .icon {
  width: var(--circle-size);
  margin-top: calc(var(--circle-size) / -2 - var(--padding));
  aspect-ratio: 1;
  background-color: var(--bg-color);
  justify-self: center;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--bs-rim), -0.1rem 0.1rem 0.25rem rgb(0 0 0 / 0.25);
}
ul.ul-cards > li > .icon > i {
  font-size: calc(var(--circle-size) / 3);
  color: var(--accent-color);
}
ul.ul-cards > li > .title {
  margin-top: 0.5rem;
  color: #222222;
    font-weight: 500;
    font-size: 16px;
}
ul.ul-cards > li > .contentt {
  font-size: 0.8rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}
ul.ul-cards > li::before,
ul > li::after {
  content: "";
  position: absolute;
}
ul.ul-cards > li::before {
  top: calc(var(--circle-size) / -2 - var(--circle-expand));
  width: calc(var(--circle-size) * 1 + var(--circle-expand) * 2);
  height: calc(
    100% + var(--circle-size) / 2 + var(--padding) + var(--flap-offset)
  );
  background-color: #f15a24;
  background-image: linear-gradient(transparent 50%, rgb(0 0 0 / 0.25) 0);
  border-top-left-radius: calc(var(--circle-size) / 2 + var(--circle-expand));
  border-top-right-radius: calc(var(--circle-size) / 2 + var(--circle-expand));
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--flap-offset)),
    calc(100% - var(--flap-offset)) 100%,
    var(--flap-offset) 100%,
    0 calc(100% - var(--flap-offset))
  );
  z-index: -1;
}
ul.ul-cards > li::after {
  width: calc(
    var(--circle-size) * 1 + var(--circle-expand) * 2 - var(--flap-offset) * 2
  );
  height: var(--flap-height);
  bottom: calc(var(--flap-offset) * -1);
  border-top-left-radius: var(--flap-height);
  border-top-right-radius: var(--flap-height);
  background-color: #f15a24;
}
 .contentt {
    transform: translateY(calc(100% - 5.5rem));
  }
.titlee {
    font-weight: 600;
    font-size: 18px;
    border-bottom: 1px solid #000;
    padding-bottom: 7px;
	padding-top: 23px;
}
@media only screen and (max-width: 767px)
{
ul.ul-cards > li{
    max-width: 17rem;
    height: 250px;
    max-height: 250px;
}
.contentt {
    transform: translateY(calc(100% - 6.5rem));
}
.titlee {
    padding-top: 5px;
}	
ul.ul-cards{
    padding-top: 15px;
}	
}