.glassmorphism {
    background: rgba(255, 255, 255, 0.1);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

.card-header, .card-body {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    color: #000000; /* Set text to black inside cards */
}

input, button {
    border-radius: 10px;
}

    input.form-control {
        background: rgba(255, 255, 255, 0.6); /* Slightly more opaque for better contrast */
        color: #000000; /* Black text */
        border: 1px solid rgba(0, 0, 0, 0.2); /* Optional for visibility */
    }

        input.form-control::placeholder {
            color: rgba(0, 0, 0, 0.5); /* Darker placeholder for visibility */
        }

.btn {
    position: relative;
    overflow: hidden; /* Needed for wave to stay inside */
    z-index: 0;
    border-radius: 999px !important; /* Fully rounded edges */
}

    .btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200%;
        height: 200%;
        background: rgba(255, 255, 255, 0.2); /* Customize wave color here */
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.6s ease;
        z-index: 0;
    }

    .btn:hover::before {
        transform: translate(-50%, -50%) scale(1);
    }

    .btn > * {
        position: relative;
        z-index: 1; /* Ensure text stays above the wave */
    }

.alert {
    background: rgba(255, 255, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    color: #333333;
}