/**/
body {
 
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    background-image: url('images/3d-background-with-white-cubes.jpg');
    background-position: center;
}
.glass-card {
    background: rgba(255, 255, 255, 0.15);  semi-transparent white 
    backdrop-filter: blur(12px);  blur effect for frosted glass 
    -webkit-backdrop-filter: blur(12px);  Safari support 
    border-radius: 16px;  rounded corners 
    border: 1px solid rgba(255, 255, 255, 0.3);  subtle border 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);  soft shadow 
}
.bg-coep-blue {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    color: #FFFFFF;
}
.btn-gradient {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    transition: 0.3s ease;
}

    .btn-gradient:hover {
        background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
        color: #FFD700; /* optional hover text color */
    }

/* Common ripple effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 12px 28px;
    font-weight: 500;
    color: #fff;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .btn-ripple::after {
        content: "";
        position: absolute;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        width: 100px;
        height: 100px;
        transform: scale(0);
        opacity: 0;
        pointer-events: none;
        animation: ripple 0.6s linear;
    }

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.btn-ripple:active::after {
    left: var(--x);
    top: var(--y);
    opacity: 1;
    transform: scale(0);
    animation: ripple 0.6s linear;
}

/* Attractive color combos */
.btn-existing {
    background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
    color: #FFD700
}

.btn-new {
    background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
    color: #FFD700; /* teal-blue */
    box-shadow: 0 4px 12px rgba(91, 134, 229, 0.4);
}