{{-- SECTION: Valores --}}
<section class="bg-[#eeffff] py-14" id="nosotros-valores">
    <div class="container mx-auto px-4" >

        <h2 class="text-[#007e7f] text-center text-2xl md:text-3xl lg:text-[42px] font-medium mb-3">
            Valores
        </h2>
        <p class="text-center text-[#007e7f] mb-10 text-lg md:text-base">
            Principios e ideas de valor que guían a la Escuela Yvette Aranda
        </p>

        <div class="flex flex-wrap justify-center gap-8 w-11/12 md:w-9/12 mx-auto">

            <!-- ITEM -->
            <div class="flex flex-col items-center mx-2 gap-6 w-[calc(50%-1rem)] md:w-[140px]" data-aos="fade-up"
data-aos-delay="100">
                <div class="w-28 h-28 rounded-full bg-[#99e1f0] flex items-center justify-center shadow-sm hover:shadow-md transition">
                    <x-local-valor class="h-20 w-20 fill-[#007e7f]"/>
                </div>
                <span class="text-[#007e7f] text-lg font-medium text-center">Verdad</span>
            </div>

            <div class="flex flex-col items-center mx-2 gap-6 w-[calc(50%-1rem)] md:w-[140px]" data-aos="fade-up"
data-aos-delay="200">
                <div class="w-28 h-28 rounded-full bg-[#99e1f0] flex items-center justify-center shadow-sm hover:shadow-md transition">
                    <x-local-balanza class="h-20 w-20 fill-[#007e7f]"/>
                </div>
                <span class="text-[#007e7f] text-lg font-medium text-center">Justicia</span>
            </div>

            <div class="flex flex-col items-center mx-2 gap-6 w-[calc(50%-1rem)] md:w-[140px]" data-aos="fade-up"
data-aos-delay="300">
                <div class="w-28 h-28 rounded-full bg-[#99e1f0] flex items-center justify-center shadow-sm hover:shadow-md transition">
                    <x-local-paz class="h-20 w-20 fill-[#007e7f]"/>
                </div>
                <span class="text-[#007e7f] text-lg font-medium text-center">Libertad</span>
            </div>

            <div class="flex flex-col items-center mx-2 gap-6 w-[calc(50%-1rem)] md:w-[140px]" data-aos="fade-up"
data-aos-delay="400">
                <div class="w-28 h-28 rounded-full bg-[#99e1f0] flex items-center justify-center shadow-sm hover:shadow-md transition">
                    <x-local-innovacion class="h-20 w-20 fill-[#007e7f]"/>
                </div>
                <span class="text-[#007e7f] text-lg font-medium text-center">Innovación</span>
            </div>

            <div class="flex flex-col items-center mx-2 gap-6 w-[calc(50%-1rem)] md:w-[140px]" data-aos="fade-up"
data-aos-delay="100">
                <div class="w-28 h-28 rounded-full bg-[#99e1f0] flex items-center justify-center shadow-sm hover:shadow-md transition">
                    <x-local-excelencia class="h-20 w-20 fill-[#007e7f]"/>
                </div>
                <span class="text-[#007e7f] text-lg font-medium text-center">Excelencia</span>
            </div>

            <div class="flex flex-col items-center mx-2 gap-6 w-[calc(50%-1rem)] md:w-[140px]" data-aos="fade-up"
data-aos-delay="500">
                <div class="w-28 h-28 rounded-full bg-[#99e1f0] flex items-center justify-center shadow-sm hover:shadow-md transition">
                    <x-local-confianza class="h-20 w-20 fill-[#007e7f]"/>
                </div>
                <span class="text-[#007e7f] text-lg font-medium text-center">Responsabilidad</span>
            </div>

            <div class="flex flex-col items-center mx-2 gap-6 w-[calc(50%-1rem)] md:w-[140px]" data-aos="fade-up"
data-aos-delay="600">
                <div class="w-28 h-28 rounded-full bg-[#99e1f0] flex items-center justify-center shadow-sm hover:shadow-md transition">
                    <x-local-solidaridad class="h-20 w-20 fill-[#007e7f]" />
                </div>
                <span class="text-[#007e7f] text-lg font-medium text-center">Solidaridad</span>
            </div>

            <div class="flex flex-col items-center mx-2 gap-6 w-[calc(50%-1rem)] md:w-[140px]" data-aos="fade-up"
data-aos-delay="700">
                <div class="w-28 h-28 rounded-full bg-[#99e1f0] flex items-center justify-center shadow-sm hover:shadow-md transition">
                    <x-local-calidad-de-vida class="h-20 w-20 fill-[#007e7f]"/>
                </div>
                <span class="text-[#007e7f] text-lg font-medium text-center">Vida</span>
            </div>

            <div class="flex flex-col items-center mx-2 gap-6 w-[calc(50%-1rem)] md:w-[140px]" data-aos="fade-up"
data-aos-delay="800">
                <div class="w-28 h-28 rounded-full bg-[#99e1f0] flex items-center justify-center shadow-sm hover:shadow-md transition">
                    <x-local-amor class="h-20 w-20 fill-[#007e7f]"/>
                </div>
                <span class="text-[#007e7f] text-lg font-medium text-center">Respeto</span>
            </div>

        </div>

    </div>
</section>