/* =========================
   CARDS
========================= */

.card {

    padding: 35px;

    border-radius: 32px;

    margin-bottom: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.03)
        );

    backdrop-filter: blur(12px);

    border:
        1px solid rgba(255,255,255,0.12);

    color: white;

    box-shadow:
        0 12px 35px rgba(75,46,131,0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    opacity: 0;

    transform: translateY(20px);
}


/* Visible Animation */

.card.visible {

    opacity: 1;

    transform: translateY(0);
}


/* Hover */

.card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0,0,0,0.35);

    border-color: #bca7ff;
}


/* Typography */

.card h3 {

    color: white;

    margin-bottom: 18px;
}

.card p {

    color:
        rgba(255,255,255,0.78);

    line-height: 1.9;
}


/* =========================
   CARD COLORS
========================= */

.card:nth-child(1) {

    background:
        linear-gradient(
            145deg,
            #33264d,
            #241d38
        );
}

.card:nth-child(2) {

    background:
        linear-gradient(
            145deg,
            #203848,
            #1a2835
        );
}

.card:nth-child(3) {

    background:
        linear-gradient(
            145deg,
            #243d2f,
            #1b2d24
        );
}

.card:nth-child(4) {

    background:
        linear-gradient(
            145deg,
            #4a3324,
            #34251b
        );
}

.card:nth-child(5) {

    background:
        linear-gradient(
            145deg,
            #4a2440,
            #331b2c
        );
}

.card:nth-child(6) {

    background:
        linear-gradient(
            145deg,
            #2a2f54,
            #1d2140
        );
}


/* =========================
   FEATURED CARD
========================= */

.featured-card {

    background:
        linear-gradient(
            145deg,
            #5b35b0,
            #37225f
        ) !important;

    border:
        1px solid rgba(183,146,255,0.45);

    transform: scale(1.04);

    box-shadow:
        0 22px 55px rgba(123,92,255,0.25);
}


/* Featured Typography */

.featured-card h3 {

    color: white;
}

.featured-card p {

    color:
        rgba(255,255,255,0.86);
}


/* Featured Badge */

.featured-badge {

    display: inline-block;

    background:
        rgba(255,255,255,0.15);

    color: white;

    padding: 7px 15px;

    border-radius: 999px;

    font-size: 0.82rem;

    margin-bottom: 20px;

    border:
        1px solid rgba(255,255,255,0.18);

    backdrop-filter: blur(10px);
}