.grid-container
	{
		width: 75%;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
		gap: 2rem;
	}

.card
	{
		--grad: red, blue;
		padding: 1rem;
		background-image: linear-gradient(to bottom left, #e0e4e5, #f2f6f9);
		border-radius: 1rem;
		gap: 1rem;
		font-family: system-ui, sans-serif;
		color: #444447;
		box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;}
	
  
.card-title
	{
		font-size: 1rem;
		grid-area: title;
		text-align: right;
		padding-top: 35px;
		text-transform: uppercase;
		font-weight: 500;
		word-break: break-all;
	}


  &::after {
    content: "";
    grid-area: bar;
    height: 2px;
    background-image: linear-gradient(90deg, var(--grad));
/*     margin-inline: -1.5rem; */
  }


.card-body-new
	{
		padding: 5px;
	}



/* =============== BUTTONS =============== */
/* =============== BUTTONS =============== */
/* =============== BUTTONS =============== */

.button-group-area .genric-btn{margin-right:10px;margin-top:0px}


.genric-btn.primary{color:#fff;background:#29005F; border:1px solid transparent; border-radius: 10px; float: right;}
.genric-btn.primary:hover{color:#29005F;border:1px solid #29005F;border-radius: 10px; background:#fff}
.genric-btn.primary-border{color:#29005F;border:1px solid #29005F;border-radius: 10px; background:#fff}
.genric-btn.primary-border:hover{color:#fff;background:#29005F;border:1px solid transparen,border-radius: 10px; }
	
	.genric-btn {
    display: inline-block;
    outline: none;
    line-height: 30px;
    padding: 0 20px;
    font-size: .8em;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
	</style>