/* CARD-1 */
.card-1 {
    display: block;
    padding: 15px;
    margin: 10px !important;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(230,230,230,0.85));
    animation: fadeIn 0.6s ease forwards;
}

.card-1 img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 12px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-1 img:hover { transform: scale(1.03); }

.card-1 .btn {
    display: inline-block;
    padding: 10px 16px;
    background: #333;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.card-1 .btn:hover {
    background: #555;
    transform: translateY(-2px);
}

/* CARD-FEATURE */
.card-feature {
    display: block;
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    background: linear-gradient(0deg, rgba(230,230,230,0.85), rgba(0,147,180,0.2));
    animation: fadeIn 0.6s ease forwards;
}

/* CARD-PURPLE */
.card-purple {
    display: block;
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    background: linear-gradient(0deg, rgba(86,0,185,0.07), rgba(243,166,252,0.35));
    animation: fadeIn 0.6s ease forwards;
}