.radCards {padding: 2rem 0 6rem;}
.radCards .topTitle {margin-bottom: 2rem;}
.radCards .cardGroup {grid-template-columns: repeat(4,202px); position: relative; z-index: 2; justify-content:center;}
.radCards .cardItem .cardLink {color: var(--purple); font-size: 15px; font-style: italic; font-family: Merriweather, serif; letter-spacing: 2px;}
.radCards .cardItem {display:flex; flex-direction: column; height: 100%; gap: 1rem;}
.radCards .cardItem .inner {
  flex: 1;
  background: #F0F0F0;  
  position: relative;
  overflow: hidden;
}
.radCards .cardItem .top {
  height: 105px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* Fallback: simple linear gradient */

   background: linear-gradient(135deg, #FFB744, #6117C0);

}

/* Modern browsers with fixed background support */
@supports (background-attachment: fixed) {
  .radCards .cardItem .top {
    background-attachment: fixed;
    background-size: 100vw 100vh;
    background-image: radial-gradient(circle at 60% 40%, 
      #FFB744 20%,
      #6117C0 70%);
   
      background-position: center;
  }
}
 .radCards .top::before {
            content: '';
            position: absolute;
            inset: 0;
            background: inherit;
            mix-blend-mode: normal;
        }


.radCards .cardItem .bottom {padding: 1.5rem; text-align: center; flex:1; display:flex; flex-direction: column; gap:1rem;}

.radCards .cardItem * {margin: 0;}
.radCards .cardItem .top .h1 { display:inline-block; position: relative; z-index: 5;}
.radCards .cardItem h3 { font-weight: 400; font-size: 22px; text-transform: capitalize;}
.radCards .cardItem .bottom p {font-size:17px!important;}

@media (max-width:950px) {
  .radCards .cardGroup {grid-template-columns: repeat(2,202px);}
}

@media (max-width:650px) {
  .radCards .cardGroup {grid-template-columns: 202px;}
}