<section class="bg-[#134900]">
    <div class="max-w-6xl mx-auto text-white py-10 lg:py-20 px-5 md:px-10">
        <div class=" text-center">
            <h2 class="font-semibold text-4xl lg:text-[50px] leading-[50px]">Frequently Asked Questions</h2>
        </div>
        <div class="flex flex-col lg:flex-row  pt-10 lg:pt-16 gap-16">
            <div class="lg:basis-[62%] lg:order-2">
                <div class="divide-y-2 divide-white/[15%] border-y-2 border-white/[15%]">
                    <!-- Q-1 -->
                    <div class="relative overflow-hidden  lg:pb-0 lg:px-10 ">
                        <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
                        <div class=" h-auto py-5 w-3/4 lg:w-11/12 flex ">
                            <p class="font-medium text-left text-[19px] leading-8">Lorem ipsum dolor sit amet, consectetu elit ?</p>
                        </div>
                        <!-- plus/cross -->
                        <div class="absolute top-10 md:top-8 right-1 md:right-10 duration-200  transition-transform rotate-0 peer-checked:rotate-90">
                            <img src="https://ik.imagekit.io/tailwindbuddy/Group_21600_9wQykahQ8.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676369389473" alt="arrow">
                        </div>    
                        <!-- content -->
                        <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96">
                            <p class=" pb-5 text-left  font-normal text-sm md:text-base lg:text-lg leading-[25px]"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
                        </div>
                    </div> 
                    <!-- Q-2 -->
                    <div class="relative overflow-hidden lg:pb-0 lg:px-10">
                        <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
                        <div class=" h-auto py-5 text-left w-3/4 lg:w-11/12 flex">
                            <p class="font-medium text-[19px] leading-8">tempus interdum diam ac egestas ?</p>
                        </div>
                        <!-- plus/cross -->
                        <div class="absolute top-10 md:top-8 right-1 md:right-10 duration-200 transition-transform rotate-0 peer-checked:rotate-90">
                            <img src="https://ik.imagekit.io/tailwindbuddy/Group_21600_9wQykahQ8.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676369389473" alt="arrow">
                        </div>    
                        <!-- content -->
                        <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96">
                            <p class=" pb-5 text-left font-normal text-sm md:text-base lg:text-lg leading-[25px]"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
                        </div>                           
                    </div> 
                    <!-- Q-3 -->
                    <div class="relative overflow-hidden  lg:pb-0 lg:px-10">
                        <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
                        <div class="h-auto py-5 text-left w-3/4 lg:w-11/12 flex">
                            <p class="font-medium text-[19px] leading-8">Fusce at aliquet nisi ultricies dapibus ?</p>
                        </div>
                        <!-- plus/cross -->
                        <div class="absolute top-10 md:top-8 right-1 md:right-10 duration-200  transition-transform rotate-0 peer-checked:rotate-90">
                            <img src="https://ik.imagekit.io/tailwindbuddy/Group_21600_9wQykahQ8.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676369389473" alt="arrow">
                        </div>    
                        <!-- content -->
                        <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96">
                            <p class="pb-5 text-left font-normal text-sm md:text-base lg:text-lg leading-[25px]"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
                        </div>
                    </div> 
                    <!-- Q-4 -->
                    <div class="relative overflow-hidden  lg:pb-0 lg:px-10">
                        <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
                        <div class="h-auto py-5 text-left w-3/4 lg:w-11/12 flex">
                            <p class="font-medium text-[19px] leading-8">Lorem ipsum dolor sit amet, dipiscing elit ?</p>
                        </div>
                        <!-- plus/cross -->
                        <div class="absolute top-10 md:top-8 right-1 md:right-10 duration-200  transition-transform rotate-0 peer-checked:rotate-90">
                            <img src="https://ik.imagekit.io/tailwindbuddy/Group_21600_9wQykahQ8.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676369389473" alt="arrow">
                        </div>    
                        <!-- content -->
                        <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96">
                            <p class=" pb-5 text-left font-normal text-sm md:text-base lg:text-lg leading-[25px] "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
                        </div>
                    </div>
                    <!-- Q-5 -->
                    <div class="relative overflow-hidden  lg:pb-0 lg:px-10 ">
                        <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
                        <div class=" h-auto py-5 text-left w-3/4 lg:w-11/12 flex ">
                            <p class="font-medium text-[19px] leading-8">Fusce at aliquet nisi. ultricies dapibus ?</p>
                        </div>
                        <!-- plus/cross -->
                        <div class="absolute top-10 md:top-8 right-1 md:right-10 duration-200  transition-transform rotate-0 peer-checked:rotate-90">
                            <img src="https://ik.imagekit.io/tailwindbuddy/Group_21600_9wQykahQ8.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676369389473" alt="arrow">
                        </div>    
                        <!-- content -->
                        <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 ">
                            <p class=" pb-5 text-left font-normal text-sm md:text-base lg:text-lg leading-[25px] "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
                        </div>
                    </div> 
                    <!-- Q-6 -->
                    <div class="relative overflow-hidden lg:pb-0 lg:px-10 ">
                        <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
                        <div class=" h-auto py-5 text-left w-3/4 lg:w-11/12 flex">
                            <p class="font-medium text-[19px] leading-8">tempus interdum diam ac egestas ?</p>
                        </div>
                        <!-- plus/cross -->
                        <div class="absolute top-10 md:top-8 right-1 md:right-10 duration-200  transition-transform rotate-0 peer-checked:rotate-90">
                            <img src="https://ik.imagekit.io/tailwindbuddy/Group_21600_9wQykahQ8.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676369389473" alt="arrow">
                        </div>    
                        <!-- content -->
                        <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 ">
                            <p class=" pb-5 text-left font-normal text-sm md:text-base lg:text-lg leading-[25px] "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
                        </div>
                    </div> 
                </div>
            </div>
            <div class="lg:basis-[38%] lg:order-1 w-full">
                <img src="https://ik.imagekit.io/tailwindbuddy/TEASER_GIF__1__njJbSORCw.png?ik-sdk-version=javascript-1.4.3&updatedAt=1676368950733" alt="hands_img" class="mx-auto w-full">
            </div>
        </div> 
    </div>
</section>

<section class="bg-[#F0F5FF]">
    <div class="max-w-5xl mx-auto px-5 md:px-10 lg:px-20 py-10 lg:py-20">
        <div>
            <h2 class="text-[#131022] font-bold text-[40px] leading-[52px] text-center">Frequently Asked Questions</h2>
        </div>
        <!-- Q-1 -->
        <div class="relative overflow-hidden mt-10 lg:mt-12 rounded-lg">
            <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
            <div class="bg-white h-auto py-5 w-full flex items-center">
                <h2 class="font-semibold text-left text-base leading-[26px] text-[#131022] w-4/5 md:w-full pl-5 ">Sed feugiat eleifend ante non porttitor? </h2>
            </div>
            <!-- arrows -->
            <div class="absolute top-5 md:top-3 right-3 duration-200 w-10 peer-checked:hidden "><img src="https://ik.imagekit.io/tailwindbuddy/arrow_7---O4uKD.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312771" alt="arrow_down" class=" "> </div>    
            <div class=" absolute top-5 md:top-3 right-3 duration-200  w-10 hidden peer-checked:block"><img src="https://ik.imagekit.io/tailwindbuddy/Group_1_5jeenYCxu.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312770" alt="arrow_up" class=""></div>    
            <!-- content -->
            <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 bg-white ">
                <div class="pb-5 px-5 lg:pr-10">
                    <p class="text-[#585C7B] text-left font-normal text-xs lg:text-sm leading-[23px] "> Nunc duis id aenean gravida tincidunt eu, tempor ullamcorper. Viverra aliquam arcu, viverra et, cursus. Aliquet pretium cursus adipiscing gravida et consequat lobortis arcu velit. Nibh pharetra fermentum duis accumsan lectus non. Massa cursus molestie lorem scelerisque pellentesque. Nisi, enim, arcu purus gravida adipiscing euismod montes, duis egestas. Vehicula eu etiam quam tristique tincidunt suspendisse ut consequat.
                        <br><br>
                        Ornare senectus fusce dignissim ut. Integer consequat in eu tortor, faucibus et lacinia posuere. Turpis sit viverra lorem suspendisse lacus aliquam auctor vulputate. 
                    </p>
                </div>
            </div>
        </div>
        <!-- Q-2 -->
        <div class="relative overflow-hidden mt-5 rounded-lg">
            <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
            <div class="bg-white h-auto py-5 w-full flex items-center">
                <h2 class="font-semibold text-left text-base leading-[26px] text-[#131022] pl-5 w-4/5 md:w-full ">Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h2>
            </div>
            <!-- arrows -->
            <div class="absolute top-5 md:top-3 right-3 duration-200 w-10 peer-checked:hidden "><img src="https://ik.imagekit.io/tailwindbuddy/arrow_7---O4uKD.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312771" alt="arrow_down" class=" "> </div>    
            <div class=" absolute top-5 md:top-3 right-3 duration-200  w-10 hidden peer-checked:block"><img src="https://ik.imagekit.io/tailwindbuddy/Group_1_5jeenYCxu.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312770" alt="arrow_up" class=""></div>    
            <!-- content -->
            <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 bg-white">
                <div class="pb-5 px-5 lg:pr-10">
                    <p class="text-[#585C7B] text-left font-normal text-xs lg:text-sm leading-[23px] "> Nunc duis id aenean gravida tincidunt eu, tempor ullamcorper. Viverra aliquam arcu, viverra et, cursus. Aliquet pretium cursus adipiscing gravida et consequat lobortis arcu velit. Nibh pharetra fermentum duis accumsan lectus non. Massa cursus molestie lorem scelerisque pellentesque. Nisi, enim, arcu purus gravida adipiscing euismod montes, duis egestas. Vehicula eu etiam quam tristique tincidunt suspendisse ut consequat.
                        <br><br>
                        Ornare senectus fusce dignissim ut. Integer consequat in eu tortor, faucibus et lacinia posuere. Turpis sit viverra lorem suspendisse lacus aliquam auctor vulputate. 
                    </p>
                </div>
            </div>
        </div>
        <!-- Q-3 -->
        <div class="relative overflow-hidden mt-5 rounded-lg">
            <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
            <div class="bg-white h-auto py-5 w-full flex items-center">
                <h2 class="font-semibold text-left text-base leading-[26px] text-[#131022] pl-5 w-4/5 md:w-full ">Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h2>
            </div>
            <!-- arrows -->
            <div class="absolute top-5 md:top-3 right-3 duration-200 w-10 peer-checked:hidden "><img src="https://ik.imagekit.io/tailwindbuddy/arrow_7---O4uKD.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312771" alt="arrow_down" class=" "> </div>    
            <div class=" absolute top-5 md:top-3 right-3 duration-200  w-10 hidden peer-checked:block"><img src="https://ik.imagekit.io/tailwindbuddy/Group_1_5jeenYCxu.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312770" alt="arrow_up" class=""></div>    
            <!-- content -->
            <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 bg-white">
                <div class="pb-5 px-5 lg:pr-10">
                    <p class="text-[#585C7B] text-left font-normal text-xs lg:text-sm leading-[23px] "> Nunc duis id aenean gravida tincidunt eu, tempor ullamcorper. Viverra aliquam arcu, viverra et, cursus. Aliquet pretium cursus adipiscing gravida et consequat lobortis arcu velit. Nibh pharetra fermentum duis accumsan lectus non. Massa cursus molestie lorem scelerisque pellentesque. Nisi, enim, arcu purus gravida adipiscing euismod montes, duis egestas. Vehicula eu etiam quam tristique tincidunt suspendisse ut consequat.
                        <br><br>Ornare senectus fusce dignissim ut. Integer consequat in eu tortor, faucibus et lacinia posuere. Turpis sit viverra lorem suspendisse lacus aliquam auctor vulputate. 
                    </p>
                </div>
            </div>
        </div>
        <!-- Q-4 -->
        <div class="relative overflow-hidden mt-5 rounded-lg">
            <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
            <div class="bg-white h-auto py-5 w-full flex items-center">
                <h2 class="font-semibold text-left text-base leading-[26px] text-[#131022] w-4/5 md:w-full pl-5">Sed feugiat eleifend ante non porttitor? </h2>
            </div>
            <!-- arrows -->
            <div class="absolute top-5 md:top-3 right-3 duration-200 w-10 peer-checked:hidden"><img src="https://ik.imagekit.io/tailwindbuddy/arrow_7---O4uKD.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312771" alt="arrow_down" class=" "> </div>    
            <div class=" absolute top-5 md:top-3 right-3 duration-200  w-10 hidden peer-checked:block"><img src="https://ik.imagekit.io/tailwindbuddy/Group_1_5jeenYCxu.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312770" alt="arrow_up" class=""></div>    
            <!-- content -->
            <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 bg-white">
                <div class="pb-5 px-5 lg:pr-10">
                    <p class="text-[#585C7B] text-left font-normal text-xs lg:text-sm leading-[23px] "> Nunc duis id aenean gravida tincidunt eu, tempor ullamcorper. Viverra aliquam arcu, viverra et, cursus. Aliquet pretium cursus adipiscing gravida et consequat lobortis arcu velit. Nibh pharetra fermentum duis accumsan lectus non. Massa cursus molestie lorem scelerisque pellentesque. Nisi, enim, arcu purus gravida adipiscing euismod montes, duis egestas. Vehicula eu etiam quam tristique tincidunt suspendisse ut consequat.
                        <br><br>
                        Ornare senectus fusce dignissim ut. Integer consequat in eu tortor, faucibus et lacinia posuere. Turpis sit viverra lorem suspendisse lacus aliquam auctor vulputate. 
                    </p>
                </div>
            </div>
        </div>
        <!-- Q-5 -->
        <div class="relative overflow-hidden mt-5 rounded-lg">
            <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
            <div class="bg-white h-auto py-5 w-full flex items-center">
                <h2 class="font-semibold text-left text-base leading-[26px] text-[#131022] pl-5 w-4/5 md:w-full ">Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h2>
            </div>
            <!-- arrows -->
            <div class="absolute top-5 md:top-3 right-3 duration-200 w-10 peer-checked:hidden "><img src="https://ik.imagekit.io/tailwindbuddy/arrow_7---O4uKD.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312771" alt="arrow_down" class=" "> </div>    
            <div class=" absolute top-5 md:top-3 right-3 duration-200  w-10 hidden peer-checked:block"><img src="https://ik.imagekit.io/tailwindbuddy/Group_1_5jeenYCxu.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312770" alt="arrow_up" class=""></div>    
            <!-- content -->
            <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 bg-white">
                <div class="pb-5 px-5 lg:pr-10">
                    <p class="text-[#585C7B] text-left font-normal text-xs lg:text-sm leading-[23px] "> Nunc duis id aenean gravida tincidunt eu, tempor ullamcorper. Viverra aliquam arcu, viverra et, cursus. Aliquet pretium cursus adipiscing gravida et consequat lobortis arcu velit. Nibh pharetra fermentum duis accumsan lectus non. Massa cursus molestie lorem scelerisque pellentesque. Nisi, enim, arcu purus gravida adipiscing euismod montes, duis egestas. Vehicula eu etiam quam tristique tincidunt suspendisse ut consequat.
                        <br><br>
                        Ornare senectus fusce dignissim ut. Integer consequat in eu tortor, faucibus et lacinia posuere. Turpis sit viverra lorem suspendisse lacus aliquam auctor vulputate. 
                    </p>
                </div>
            </div>
        </div>
        <!-- Q-6 -->
        <div class="relative overflow-hidden mt-5 rounded-lg">
            <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer">
            <div class="bg-white h-auto py-5 w-full flex items-center">
                <h2 class="font-semibold text-left text-base leading-[26px] text-[#131022] w-4/5 md:w-full pl-5 ">Sed feugiat eleifend ante non porttitor? </h2>
            </div>
            <!-- arrows -->
            <div class="absolute top-5 md:top-3 right-3 duration-200 w-10 peer-checked:hidden "><img src="https://ik.imagekit.io/tailwindbuddy/arrow_7---O4uKD.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312771" alt="arrow_down" class=" "> </div>    
            <div class=" absolute top-5 md:top-3 right-3 duration-200  w-10 hidden peer-checked:block"><img src="https://ik.imagekit.io/tailwindbuddy/Group_1_5jeenYCxu.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1676374312770" alt="arrow_up" class=""></div>    
            <!-- content -->
            <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 bg-white">
                <div class="pb-5 px-5 lg:pr-10">
                    <p class="text-[#585C7B] text-left font-normal text-xs lg:text-sm leading-[23px] "> Nunc duis id aenean gravida tincidunt eu, tempor ullamcorper. Viverra aliquam arcu, viverra et, cursus. Aliquet pretium cursus adipiscing gravida et consequat lobortis arcu velit. Nibh pharetra fermentum duis accumsan lectus non. Massa cursus molestie lorem scelerisque pellentesque. Nisi, enim, arcu purus gravida adipiscing euismod montes, duis egestas. Vehicula eu etiam quam tristique tincidunt suspendisse ut consequat.
                        <br><br>
                        Ornare senectus fusce dignissim ut. Integer consequat in eu tortor, faucibus et lacinia posuere. Turpis sit viverra lorem suspendisse lacus aliquam auctor vulputate. 
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="max-w-4xl mx-auto py-10 md:py-16 lg:py-20 px-5 md:px-10 lg:px-20">
    <div class=" text-center">
         <h2 class="font-normal text-4xl lg:text-[56px] leading-[46px] lg:leading-[64px] text-[#2F2F2F]">Frequently Asked Questions</h2>
    </div>
    <div class="pt-10 lg:pt-16">
         <ul class="divide-y-[1px] divide-black/[18%] border-y-[1px] border-black/[18%]">
             <!-- Q-1 -->
             <li class="relative overflow-hidden">
                 <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                 <div class=" h-auto py-5 w-full flex items-center">
                     <h2 class="font-normal text-left text-lg lg:text-[19px] leading-[32px] -tracking-[.03em] text-[#0C0300] w-4/5 pl-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h2>
                 </div>
                 <!-- plus/cross -->
                 <div class="absolute top-7 right-0  duration-300  transition-transform rotate-0 peer-checked:rotate-180">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
                     </svg>                              
                 </div>    
                 <!-- content -->
                 <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                     <div class="pb-5 px-5">
                         <p class="font-normal text-left text-base leading-[25px]"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                         </p>
                     </div>
                 </div>
             </li>
              <!-- Q-2 -->
             <li class="relative overflow-hidden">
                 <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                 <div class="h-auto py-5 w-full flex items-center">
                     <h2 class="font-normal text-left text-lg lg:text-[19px] leading-[32px] -tracking-[.03em] text-[#0C0300] w-4/5 pl-5">Sed feugiat eleifend ante non porttitor? </h2>
                 </div>
                 <!-- plus/cross -->
                 <div class="absolute top-7 right-0 duration-300 transition-transform rotate-0 peer-checked:rotate-180">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                     </svg>                              
                 </div>    
                 <!-- content -->
                 <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                     <div class="pb-5 px-5">
                         <p class="font-normal text-left text-base  leading-[25px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                         </p>
                     </div>
                 </div>
             </li>
              <!-- Q-3 -->
             <li class="relative overflow-hidden">
                 <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                 <div class=" h-auto py-5 w-full flex items-center">
                     <h2 class="font-normal text-left text-lg lg:text-[19px] leading-[32px] -tracking-[.03em] text-[#0C0300] w-4/5 pl-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h2>
                 </div>
                 <!-- plus/cross -->
                 <div class="absolute top-7 right-0 duration-300  transition-transform rotate-0 peer-checked:rotate-180">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
                     </svg>                              
                 </div>    
                 <!-- content -->
                 <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                     <div class="pb-5 px-5">
                         <p class="font-normal text-left text-base  leading-[25px]"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                         </p>
                     </div>
                 </div>
             </li>
              <!-- Q-4 -->
             <li class="relative overflow-hidden  ">
                 <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                 <div class=" h-auto py-5 w-full flex items-center">
                     <h2 class="font-normal text-left text-lg lg:text-[19px] leading-[32px] -tracking-[.03em] text-[#0C0300] w-4/5 pl-5">Sed feugiat eleifend ante non porttitor? </h2>
                 </div>
                 <!-- plus/cross -->
                 <div class="absolute top-7 right-0 duration-300  transition-transform rotate-0 peer-checked:rotate-180">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                     </svg>                              
                 </div>    
                 <!-- content -->
                 <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                     <div class="pb-5 px-5">
                         <p class="font-normal text-left text-base  leading-[25px] "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                         </p>
                     </div>
                 </div>
             </li>
              <!-- Q-5 -->
             <li class="relative overflow-hidden  ">
                 <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                 <div class=" h-auto py-5 w-full flex items-center">
                     <h2 class="font-normal text-left text-lg lg:text-[19px] leading-[32px] -tracking-[.03em] text-[#0C0300] w-4/5 pl-5">Ut quis ante a sem hendrerit facilisis Sed ultricies elementum elit
                         sem hendrerit facilisis? </h2>
                 </div>
                 <!-- plus/cross -->
                 <div class="absolute top-7 right-0 duration-300  transition-transform rotate-0 peer-checked:rotate-180">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                     </svg>                              
                 </div>    
                 <!-- content -->
                 <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                     <div class="pb-5 px-5">
                         <p class="font-normal text-left text-base  leading-[25px] "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                         </p>
                     </div>
                 </div>
             </li>
              <!-- Q-6 -->
             <li class="relative overflow-hidden  ">
                 <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                 <div class=" h-auto py-5 w-full flex items-center">
                     <h2 class="font-normal text-left text-lg lg:text-[19px] leading-[32px] -tracking-[.03em] text-[#0C0300] w-4/5 pl-5">Sed feugiat eleifend ante non porttitor? </h2>
                 </div>
                 <!-- plus/cross -->
                 <div class="absolute top-7 right-0 duration-300  transition-transform rotate-0 peer-checked:rotate-180">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                     </svg>                              
                 </div>    
                 <!-- content -->
                 <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                     <div class="pb-5 px-5">
                         <p class="font-normal text-left text-base leading-[25px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                         </p>
                     </div>
                 </div>
             </li>
         </ul>
    </div> 
 </div>

<div class="max-w-6xl mx-auto px-5 md:px-10">
    <div class="text-[#212529] flex flex-col lg:flex-row py-10 lg:py-20 gap-10 lg:gap-5">
        <!-- first section -->
        <div class="lg:basis-2/5 font-bold text-center lg:text-left">
            <h2 class=" text-3xl md:text-[44px] lg:text-[52px] leading-10 lg:leading-[53px] ">Your questions,</h2>
            <h3 class="text-[32px] md:text-[46px] lg:text-[54px] leading-10 lg:leading-[55px]">answered.</h3>
        </div>
        <!-- second section -->
        <div class=" lg:basis-3/5">
            <ul class="divide-y-2 divide-[#D8D9D8] border-t-2 border-[#D8D9D8]">
                <!-- Q-1 -->
                <li class="relative overflow-hidden">
                    <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                    <div class=" h-auto py-5 md:py-6 w-full flex items-center">
                        <h5 class="font-light text-lg md:text-xl text-left lg:text-[22px] leading-[32px] tracking-[0.01em] w-4/5 pl-5 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h5>
                    </div>
                    <!-- plus/cross -->
                    <div class="absolute top-7 flex right-3 duration-300 transition-transform rotate-0 peer-checked:rotate-45">
                        <img src="https://ik.imagekit.io/tailwindbuddy/Group%208_8UaVeEMA6Y.svg?updatedAt=1694173669027" alt="error"> 
                    </div>    
                    <!-- content -->
                    <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                        <div class="pb-5 px-5">
                            <p class="font-normal text-base text-left md:text-lg leading-[25px] "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                            </p>
                        </div>
                    </div>
                </li> 
                 <!-- Q-2 -->
                 <li class="relative overflow-hidden">
                    <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                    <div class=" h-auto py-5 md:py-6 w-full flex items-center">
                        <h5 class="font-light text-lg text-left md:text-xl lg:text-[22px] leading-[32px] tracking-[0.01em] w-4/5 pl-5 ">Sed feugiat eleifend ante non porttitor?</h5>
                    </div>
                    <!-- plus/cross -->
                    <div class="absolute top-7 right-3  duration-300  transition-transform rotate-0 peer-checked:rotate-45">
                        <img src="https://ik.imagekit.io/tailwindbuddy/Group%208_8UaVeEMA6Y.svg?updatedAt=1694173669027" alt="error">                                                                      
                    </div>    
                    <!-- content -->
                    <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                        <div class="pb-5 px-5">
                            <p class="font-normal text-left text-base md:text-lg leading-[25px]"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                            </p>
                        </div>
                    </div>
                </li> 
                 <!-- Q-3 -->
                 <li class="relative overflow-hidden">
                    <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                    <div class=" h-auto py-5 md:py-6 w-full flex items-center">
                        <h5 class="font-light text-left text-lg md:text-xl lg:text-[22px] leading-[32px] tracking-[0.01em] w-4/5 pl-5 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h5>
                    </div>
                    <!-- plus/cross -->
                    <div class="absolute top-7 right-3  duration-300  transition-transform rotate-0 peer-checked:rotate-45">
                        <img src="https://ik.imagekit.io/tailwindbuddy/Group%208_8UaVeEMA6Y.svg?updatedAt=1694173669027" alt="error">                                                                    
                    </div>    
                    <!-- content -->
                    <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                        <div class="pb-5 px-5">
                            <p class="font-normal text-left text-base md:text-lg leading-[25px]"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                            </p>
                        </div>
                    </div>
                </li> 
                <!-- Q-4 -->
                <li class="relative overflow-hidden">
                    <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                    <div class=" h-auto py-5 md:py-6 w-full flex items-center">
                        <h5 class="font-light text-left text-lg md:text-xl lg:text-[22px] leading-[32px] tracking-[0.01em] w-4/5 pl-5 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h5>
                    </div>
                    <!-- plus/cross -->
                    <div class="absolute top-7 right-3 duration-300 transition-transform rotate-0 peer-checked:rotate-45">
                        <img src="https://ik.imagekit.io/tailwindbuddy/Group%208_8UaVeEMA6Y.svg?updatedAt=1694173669027" alt="error">                                                                       
                    </div>    
                    <!-- content -->
                    <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                        <div class="pb-5 px-5">
                            <p class="font-normal text-left text-base md:text-lg leading-[25px]"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                            </p>
                        </div>
                    </div>
                </li> 
                <!-- Q-5 -->
                <li class="relative overflow-hidden">
                    <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                    <div class=" h-auto py-5 md:py-6 w-full flex items-center">
                        <h5 class="font-light text-left text-lg md:text-xl lg:text-[22px] leading-[32px] tracking-[0.01em] w-4/5 pl-5 ">Sed feugiat eleifend ante non porttitor? </h5>
                    </div>
                    <!-- plus/cross -->
                    <div class="absolute top-7 right-3 duration-300 transition-transform rotate-0 peer-checked:rotate-45">
                        <img src="https://ik.imagekit.io/tailwindbuddy/Group%208_8UaVeEMA6Y.svg?updatedAt=1694173669027" alt="error">                                                                     
                    </div>    
                    <!-- content -->
                    <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-96">
                        <div class="pb-5 px-5">
                            <p class="font-normal text-left text-base md:text-lg leading-[25px] "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                            </p>
                        </div>
                    </div>
                </li> 
            </ul>
        </div>
     </div>
</div>

<section class="bg-[#F3FF34]">
    <div class="max-w-6xl mx-auto px-5 md:px-10 lg:px-5 py-10 lg:py-20">
        <h3 class="bg-black py-4 px-4 w-fit mx-auto lg:mx-0 text-white uppercase tracking-widest font-semibold text-base lg:text-lg leading-[25px] md:mb-6 mb-3">Frequently Asked Questions</h3>
        <div class="flex flex-col lg:flex-row gap-5">
            <div class="lg:basis-1/2 xl:basis-[45%] text-center lg:text-left">                    
                <h2 class="text-[#0C0300] font-normal text-6xl md:text-7xl lg:text-[100px] leading-[1.3em] md:pb-4 pb-2">FAQs</h2> 
                <p class="text-[#2C3039]/70 font-normal text-sm md:text-base lg:text-lg leading-[27px] lg:pr-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                   <br><br> Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat</p>
                <!-- button -->
                   <button class="font-medium text-base tracking-[.105em] bg-black text-white border-2 border-transparent hover:bg-transparent hover:border-black hover:text-black py-3 px-10 lg:mt-8 my-10">VIEW ALL</button>
            </div>
            <div class="lg:basis-1/2 xl:basis-[55%]">
                <!-- Q-1 -->
                <div class="relative overflow-hidden lg:mt-2">
                    <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                    <div class="bg-white h-auto py-6  w-full flex items-center">
                        <h2 class="font-bold text-sm text-left md:text-base xl:text-lg leading-[25px] text-[#0C0300] w-5/6 xl:w-[96%] tracking-widest uppercase pl-5 ">Sed feugiat eleifend ante non porttitor? </h2>
                    </div>
                    <!-- plus/cross -->
                    <div class="absolute top-6 right-3 md:right-5 duration-200  transition-transform rotate-0 peer-checked:rotate-45">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
                        </svg>
                    </div>    
                    <!-- content -->
                    <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 bg-white">
                        <div class="pb-5 px-5">
                            <p class=" py-4 border-t-2 text-left border-[#FF9014] font-normal text-sm md:text-base lg:text-lg leading-[25px] md:pr-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Q-2 -->
                <div class="relative overflow-hidden mt-10">
                    <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-24 opacity-0 z-10 cursor-pointer">
                    <div class="bg-white h-auto py-6  w-full flex items-center">
                        <h2 class="font-bold text-left text-sm md:text-base xl:text-lg leading-[25px] text-[#0C0300]  w-5/6 xl:w-[96%] tracking-widest uppercase pl-5 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</h2>
                    </div>
                    <!-- plus/cross -->
                    <div class="absolute top-6 right-3 md:right-5 duration-200  transition-transform rotate-0 peer-checked:rotate-45">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
                        </svg>
                    </div>    
                    <!-- content -->
                    <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 bg-white">
                        <div class="pb-5 px-5">
                            <p class="text-left py-4 border-t-2 border-[#FF9014] font-normal text-sm md:text-base lg:text-lg leading-[25px] md:pr-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Q-3 -->
                 <div class="relative overflow-hidden mt-10">
                    <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                    <div class="bg-white h-auto py-6 w-full flex items-center">
                        <h2 class="font-bold text-left text-sm md:text-base xl:text-lg leading-[25px] text-[#0C0300] w-5/6 xl:w-[96%] tracking-widest uppercase pl-5 ">Sed feugiat eleifend ante non porttitor? </h2>
                    </div>
                    <!-- plus/cross -->
                    <div class="absolute top-6 right-3 md:right-5 duration-200  transition-transform rotate-0 peer-checked:rotate-45">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6"/>
                        </svg>
                    </div>    
                    <!-- content -->
                    <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 bg-white">
                        <div class="pb-5 px-5">
                            <p class="text-left py-4 border-t-2 border-[#FF9014] font-normal text-sm md:text-base lg:text-lg leading-[25px] md:pr-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Q-4 -->
                  <div class="relative overflow-hidden mt-10">
                    <input type="checkbox" class="absolute peer top-0 inset-x-0 w-full h-20 opacity-0 z-10 cursor-pointer">
                    <div class="bg-white h-auto py-6 w-full flex items-center">
                        <h2 class="font-bold text-left text-sm md:text-base xl:text-lg leading-[25px] text-[#0C0300]  w-5/6 xl:w-[96%] tracking-widest uppercase pl-5 ">Sed feugiat eleifend ante non porttitor? </h2>
                    </div>
                    <!-- plus/cross -->
                    <div class="absolute top-6 right-3 md:right-5 duration-200  transition-transform rotate-0 peer-checked:rotate-45">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
                        </svg>
                    </div>    
                    <!-- content -->
                    <div class="max-h-0 overflow-hidden transition-all duration-200 peer-checked:max-h-96 bg-white">
                        <div class=" pb-5 px-5">
                            <p class="text-left py-4 border-t-2 border-[#FF9014] font-normal text-sm md:text-base lg:text-lg leading-[25px] md:pr-5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. 
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>