<section id="services" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16" data-aos="fade-up"> <h2 id="services-heading" class="text-4xl font-extrabold text-primary-blue mb-4"> {{ 'services_section.heading'|trans }} </h2> <p id="services-subtext" class="text-xl text-gray-600 max-w-3xl mx-auto"> {{ 'services_section.subtext'|trans }} </p> </div> <div id="services-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> </div> <div class="text-center mt-12" data-aos="fade-up"> <a href="#request-order" class="inline-flex items-center px-8 py-3 bg-primary-blue text-white font-bold rounded-lg shadow-lg hover:bg-primary-blue-dark transition duration-300 transform hover:scale-105"> <i class="fas fa-calendar-check mr-2"></i> <span id="book-service-text">{{ 'services_section.cta'|trans }}</span> </a> </div> </div></section>