<section class="bg-[#F6F6F6] py-20" data-component-type="Content" data-component-slug="ss-education-template-unlock_your">
    <div class="max-w-[90%] mx-auto px-6 lg:px-10">

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-14 items-start">

            <!-- LEFT CONTENT -->
            <div>
                <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-black" data-node="unlock_heading" data-node-type="text" data-node-label="Main Heading" data-node-default="Unlock Your Digital Potential">
                    {{unlock_heading}}
                </h2>

                <p class="mt-4 text-gray-600 max-w-lg" data-node="unlock_description" data-node-type="text" data-node-label="Main Description" data-node-default="Learn through interactive courses, high-quality resources, and expert guidance tailored to help you succeed in the digital world.">
                    {{unlock_description}}
                </p>

                <!-- Feature List -->
                <div class="mt-10 space-y-6">

                    <!-- Feature 1 -->
                    <div class="flex gap-4 bg-white p-5 rounded-2xl">
                        <div class="md:w-12 md:h-12 md:bg-[#F6F6F6] rounded-xl flex items-center justify-center md:shadow">


                            <img src="{{feature_1_icon}}" data-node="feature_1_icon" data-node-type="file" data-node-label="Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750790/seltrix/templates/ss-education-template/medal-star.png" class=" w-full md:p-2">
                        </div>
                        <div>
                            <h4 class="font-semibold text-black" data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Learn Confidently">
                                {{feature_1_title}}
                            </h4>
                            <p class="text-sm text-gray-600 mt-1" data-node="feature_1_desc" data-node-type="text" data-node-label="Feature 1 Description" data-node-default="Our platform blends structured content with personalized feedback to help you master every topic.">
                                {{feature_1_desc}}
                            </p>
                        </div>
                    </div>

                    <!-- Feature 2 -->
                    <div class="flex gap-4 bg-white p-5 rounded-2xl">
                        <div class="md:w-12 md:h-12 md:bg-[#F6F6F6] rounded-xl flex items-center justify-center md:shadow">
                            <img src="{{feature_2_icon}}" data-node="feature_2_icon" data-node-type="file" data-node-label="Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750807/seltrix/templates/ss-education-template/star.png" class=" w-full p-2">
                        </div>
                        <div>
                            <h4 class="font-semibold text-black" data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Stay Ahead">
                                {{feature_2_title}}
                            </h4>
                            <p class="text-sm text-gray-600 mt-1" data-node="feature_2_desc" data-node-type="text" data-node-label="Feature 2 Description" data-node-default="Access updated lessons that reflect the latest trends and technologies.">
                                {{feature_2_desc}}
                            </p>
                        </div>
                    </div>

                    <!-- Feature 3 -->
                    <div class="flex gap-4 bg-white p-5 rounded-2xl">
                        <div class="md:w-12 md:h-12 md:bg-[#F6F6F6] rounded-xl flex items-center justify-center md:shadow">
                             <img src="{{feature_3_icon}}" data-node="feature_3_icon" data-node-type="file" data-node-label="Feature 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750748/seltrix/templates/ss-education-template/book-square.png" class=" w-full p-2">
                        </div>
                        <div>
                            <h4 class="font-semibold text-black" data-node="feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Built For Learners">
                                {{feature_3_title}}
                            </h4>
                            <p class="text-sm text-gray-600 mt-1" data-node="feature_3_desc" data-node-type="text" data-node-label="Feature 3 Description" data-node-default="Designed with simplicity, clarity, and world-class content to make learning effective and enjoyable.">
                                {{feature_3_desc}}
                            </p>
                        </div>
                    </div>

                </div>
            </div>

            <!-- RIGHT IMAGES -->
            <div class="relative flex justify-center lg:justify-start">

                <!-- Image 1 -->
                <div class="relative">
                    <img src="{{image_1}}" data-node="image_1" data-node-type="file" data-node-label="Primary Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750767/seltrix/templates/ss-education-template/Frame%20382.png" class="rounded-3xl w-[260px] sm:w-[300px] lg:w-[300px] xl:w-[400px]">
                </div>

                <!-- Image 2 -->
                <div class="absolute top-[200px] xl:left-[200px] left-[150px] hidden lg:block z-10">
                    <img src="{{image_2}}" data-node="image_2" data-node-type="file" data-node-label="Secondary Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750765/seltrix/templates/ss-education-template/Frame%20381.png" class="rounded-3xl w-[240px] sm:w-[280px] lg:w-[300px] xl:w-[400px]">
                </div>

            </div>
        </div>

    </div>
</section>