/* Main container for the card */
.card-wrapper {
--circle-size: 250px; /* Size of the glowing effect */
position: relative;
overflow: hidden;
padding: 0; /* Remove padding */
border-radius: 15px;
background: rgba(255, 255, 255, 0.15); /* Glassmorphism effect */
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
/* Inner content of the card */
.card-wrapper .card-content {
position: absolute; /* Fill the entire card */
top: 0;
left: 0;
right: 0; /* Ensure it stretches across */
bottom: 0; /* Ensure it stretches down */
z-index: 1;
color: #ffffff;
text-align: center;
font-family: 'Arial', sans-serif;
background: rgba(255, 255, 255, 0.05); /* Light overlay for content */
border-radius: 15px; /* Match the border radius of the card */
box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.3); /* Inner shadow */
}
/* Glowing circle effect */
.card-wrapper .glow-bg {
width: var(--circle-size);
height: var(--circle-size);
position: absolute;
top: 0;
left: 0;
border-radius: 50%; /* Circular shape */
background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(0, 150, 255, 0.6));
filter: blur(40px);
opacity: 0; /* Initially hidden */
z-index: 0;
pointer-events: none; /* Make it non-interactive */
transition: opacity 0.3s ease, transform 0.1s ease; /* Smooth transitions */
}
/* Invisible element for position tracking */
.card-wrapper .position-helper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden; /* Keep it hidden */
z-index: -1;
}