@extends('layouts.app')

@section('title', 'Servicios - Herbal Solutions')
@section('body-class', 'services-page')

@section('content')
    <!-- Page Title -->
    <div class="page-title dark-background">
      <div class="container d-lg-flex justify-content-between align-items-center">
        <h1 class="mb-2 mb-lg-0">Services</h1>
        <nav class="breadcrumbs">
          <ol>
            <li><a href="{{ url('/') }}" class="{{ request()->is('/') ? 'active' : '' }}">Home</a></li>
            <li class="current">Services</li>
          </ol>
        </nav>
      </div>
    </div><!-- End Page Title -->
    <!-- Services Section -->
    <section id="services" class="services section">
        <div class="container">
            <div class="row gy-4">
                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/antiestres.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.antiestres') }}</h3></a>
                        <p>{{ __('messages.antiestresp') }}</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/perdida_de_peso.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.perdida_de_peso') }}</h3></a>
                        <p>{{ __('messages.perdida_de_pesop') }}</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/salud_cardiovascular.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.salud_cardiovascular') }}</h3></a>
                        <p>{{ __('messages.salud_cardiovascularp') }}</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/salud_general.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.salud_general') }}</h3></a>
                        <p>{{ __('messages.salud_generalp') }}</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/salud_y_belleza.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.salud_y_belleza') }}</h3></a>
                        <p>{{ __('messages.salud_y_bellezap') }}</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/sistema_circulatorio.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.sistema_circulatorio') }}</h3></a>
                        <p>{{ __('messages.sistema_circulatoriop') }}</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/sistema_digestivo.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.sistema_digestivo') }}</h3></a>
                        <p>{{ __('messages.sistema_digestivop') }}</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/sistema_estructural.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.sistema_estructural') }}</h3></a>
                        <p>{{ __('messages.sistema_estructuralp') }}</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/salud_sexual.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.salud_sexual') }}</h3></a>
                        <p>{{ __('messages.salud_sexualp') }}</p>
                    </div>                    
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/salud_femenina.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.salud_femenina') }}</h3></a>
                        <p>{{ __('messages.salud_femeninap') }}</p>
                    </div>                    
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/salud_masculina.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.salud_masculina') }}</h3></a>
                        <p>{{ __('messages.salud_masculinap') }}</p>
                    </div>                    
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <img src="{{ asset('assets/img/iconos/sistema_nervioso.png') }}" alt="Actividad" style="width:80px; height:80px;">
                        </div>
                        <a href="#" class="stretched-link"><h3>{{ __('messages.sistema_nervioso') }}</h3></a>
                        <p>{{ __('messages.sistema_nerviosop') }}</p>
                    </div>                    
                </div>
            </div>
        </div>
    </section><!-- /Services Section -->
@endsection