.gradient-bg {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.baby-gradient {
    background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.baby-stars {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a8e6cf' fill-opacity='0.3'%3E%3Cpolygon points='10,0 12,7 20,7 14,11 16,18 10,14 4,18 6,11 0,7 8,7'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}