    <!-- ==================== HERO SECTION ==================== -->
    <section id="hero-section" class="gradient-hero relative overflow-hidden">
        <!-- Hero Content -->
        <div class="container relative">
            <div class="flex flex-col lg:flex-row items-center justify-between mt-8 md:mt-16 mb-8 md:mb-16 gap-12">

                <!-- Center Content -->
                <div class="text-center lg:text-start max-w-xl">
                    
                    <p class="text-secondary-600 text-base md:text-lg mb-4 md:mb-6">مركز كيان المستقبل لضيافة الأطفال</p>

                    <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-[#07394D] !leading-snug mb-4 md:mb-6">
                        خطوة بخطوة نأسس له
                        <span class="text-secondary-700">مستقبل مشرق</span>
                    </h1>

                    <p class="text-gray-700 text-sm sm:text-base md:text-lg mb-6 md:mb-8 px-2">
                        نساعد طفلك على اكتشاف مهاراته وتطوير قدراته في بيئة آمنة ومحفزة، لنصنع معاً جيلاً مبدعاً وواثقاً.
                    </p>

                    <div class="flex flex-row justify-center lg:justify-start">

                        <a href="contact.php" class="inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-full bg-gradient-to-r from-secondary-600 to-secondary-800 text-white text-sm sm:text-base font-bold transition-all duration-300 ease-out hover:scale-[1.03] hover:shadow-xl hover:from-[#47BEEB] hover:to-[#0F688A] active:scale-[0.97]">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="15" height="16" viewBox="0 0 15 16" fill="none">
                                <path d="M9.90015 9.20001V10.74L11.0201 11.44" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M9.90015 0.799988V3.59999" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M13.4 4.65001V3.60001C13.4 3.22871 13.2525 2.87261 12.99 2.61006C12.7274 2.34751 12.3714 2.20001 12 2.20001H2.20005C1.82875 2.20001 1.47265 2.34751 1.2101 2.61006C0.947548 2.87261 0.800049 3.22871 0.800049 3.60001V13.4C0.800049 13.7713 0.947548 14.1274 1.2101 14.39C1.47265 14.6525 1.82875 14.8 2.20005 14.8H4.65005" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M0.800049 6.39996H4.30005" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4.30005 0.799988V3.59999" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M9.89995 14.8C12.2195 14.8 14.1 12.9196 14.1 10.6C14.1 8.28037 12.2195 6.39996 9.89995 6.39996C7.58036 6.39996 5.69995 8.28037 5.69995 10.6C5.69995 12.9196 7.58036 14.8 9.89995 14.8Z" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <span class="whitespace-nowrap">احجزي لطفلك الأن</span>
                        </a>
                    </div>

                </div>

                <!-- Left Image (Desktop only) -->
                <div class="relative">
                    <div class="animate-float">
                        <img src="dist/images/hero-left.webp" alt="Child" class="object-contain w-64 lg:w-full lg:h-full lg:object-cover">
                    </div>
                </div>

            </div>

            <!-- Decorative Circle -->
            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 md:w-64 md:h-64 border-4 border-dashed border-kayan-pink/30 rounded-full -z-10 hidden sm:block"></div>
        </div>

        <!-- Wave Bottom -->
        <div class="text-white overflow-hidden mb-[-1px]">
            <svg xmlns="http://www.w3.org/2000/svg" class="rotate-180 w-[120%] -ml-[10%]" viewBox="0 0 1000 100" preserveAspectRatio="none">
                <path class="animate-wave-slow" fill="currentColor" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
                <path class="animate-wave" fill="currentColor" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
                <path class="animate-wave-fast" fill="currentColor" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
            </svg>
        </div>
    </section>