/* --- 1. गूगल से एक सुंदर फॉन्ट इम्पोर्ट करें --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* --- 2. पूरी वेबसाइट के लिए बेसिक स्टाइल --- */
body {
    font-family: 'Poppins', sans-serif; /* नया फॉन्ट लागू करें */
        background-color: #f8fafc; /* हल्का ग्रे बैकग्राउंड */
            color: #334155; /* टेक्स्ट का सॉफ्ट ब्लैक कलर */
            }

            /* --- 3. एनिमेशन के लिए क्लास --- */
            /* यह क्लास उन सभी एलिमेंट्स पर लगाई जाएगी जिन्हें हम स्क्रॉल पर एनिमेट करना चाहते हैं */
            .animate-on-scroll {
                opacity: 0; /* शुरुआत में छिपा हुआ */
                    transform: translateY(30px); /* थोड़ा नीचे खिसका हुआ */
                        transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* स्मूथ ट्रांजीशन */
                        }

                        /* जब जावास्क्रिप्ट यह क्लास जोड़ेगा, तो एनिमेशन चलेगा */
                        .animate-on-scroll.is-visible {
                            opacity: 1;
                                transform: translateY(0);
                                }

                                /* --- 4. छोटे-छोटे सुधार (Micro-interactions) --- */
                                /* सभी बटन्स और लिंक्स पर स्मूथ ट्रांजीशन */
                                a, button {
                                    transition: all 0.3s ease;
                                    }

                                    /* कार्ड्स पर स्मूथ शैडो और स्केल इफेक्ट */
                                    .group:hover .group-hover\:scale-105 {
                                        transform: scale(1.05);
                                        }
                                        .group:hover .group-hover\:shadow-xl {
                                            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
                                            }