@extends('frontend.layouts.master')
@section('title', 'RASEMCORP || CLINICAL CARE')
@section('meta-author', 'RASEMCORP')
@section('meta-image', asset('frontend/assets/img/rasemcorp-fav.png'))
@section('meta-url', url()->current())
@section('meta-type', 'website')
@section('meta-robots', 'index, follow')
@section('main-content')

    <main class="main">
        <!-- Hero Section -->
        <section id="hero" class="heroheader section dark-background">
            <div style="position: relative;">
                <div
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1;">
                </div>
                <img src="{{ asset('frontend/assets/img/hero-bg.jpg') }}" alt="" data-aos="fade-in"
                    style="position: relative; z-index: 0;">
            </div>
        </section>
        <!-- /Hero Section -->
        <!-- About Section -->
        <section id="about" class="about section">

            <div class="container" data-aos="fade-up" data-aos-delay="100">
            <div class="row gy-4">
                <div class="col-lg-12 order-1 order-lg-1 content">
                    <h3>KIDNEY CARE</h3>
                    <p class="fst-italic">
                    Somos una Institución Prestadora de Servicios de Salud (IPRESS) Brindamos servicios de diálisis
                            ambulatoria, a IBT Group que es un grupo de empresarial especializado en el desarrollo integral
                            de obras públicas y privadas especialmente en el sector SALUD, en contrato APP a 30 años con
                            ESSALUD; <br>
                            Atendemos al Hospital Guillermo Kaelin de la Fuente, desde el año 2016.
                    </p>
                </div>
                <div class="col-lg-6 order-2 order-lg-2">
                    <h3>Información de la Empresa</h3>
                    <p>
                        <li class="info-item">Razón Social: KIDNEY CARE</li>
                        <li class="info-item">Ruc: 20554200258</li>
                        <li class="info-item">Nombre comercial: KIDNEY CARE</li>
                        <li class="info-item">Fecha de Inicio de actividades: 01/01/2014</li>
                        <li class="info-item">Dirección Legal: Cal. 2 Maz G1 Lote 1 Av. Pachacútec</li>
                        <li class="info-item">Distrito/Ciudad: Villa el Salvador</li>
                        <li class="info-item">Provincia: Lima</li>
                        <li class="info-item">Departamento: Lima, Perú</li>
                    </p>
                    <h4>Certificación</h4>
                    <p>
                        <li class="info-item"><a href="{{ asset('frontend/assets/img/salud/CERTIFICACIONES/KIDNEY_CARE/KIDNEYISO.pdf') }}" target="_blank" rel="noopener noreferrer">Certificación ISO 9001:2015</a></li>
                        
                    </p>
                </div>
                <div class="col-lg-6 order-3 order-lg-2">
                    <img src="{{ asset('frontend/assets/img/salud/kidney-care/kidney-logo.jpg') }}" class="img-fluid"
                    alt="">
                </div>
            </div>
                
            </div>

        </section><!-- /About Section -->
        <!-- Services Section -->
        <section id="services" class="services section">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Servicios</h2>
                <p>Salud</p>

            </div><!-- End Section Title -->

            <div class="container">

                <div class="row gy-4">

                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="600">
                        <div class="service-item position-relative">
                            <div class="icon2">
                                <img src="{{ asset('frontend/assets/img/salud/kidney-care/1.png') }}" class="img-fluid"
                                    alt="">
                            </div>
                            
                        </div>
                    </div><!-- End Service Item -->
                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
                        <div class="service-item position-relative">
                            <div class="icon2">
                                <img src="{{ asset('frontend/assets/img/salud/kidney-care/2.jpg') }}" class="img-fluid"
                                    alt="">
                            </div>
                            
                        </div>
                    </div><!-- End Service Item -->

                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="500">
                        <div class="service-item position-relative">
                            <div class="icon2">
                                <img src="{{ asset('frontend/assets/img/salud/kidney-care/3.jpg') }}" class="img-fluid"
                                    alt="">
                            </div>
                            
                        </div>
                    </div><!-- End Service Item -->
                    <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                        <div class="service-item position-relative">
                            <div class="icon2">
                                <img src="{{ asset('frontend/assets/img/salud/kidney-care/4.jpg') }}" class="img-fluid"
                                    alt="">
                            </div>
                            
                        </div>
                    </div><!-- End Service Item -->

                </div>

            </div>

        </section>
        <!-- /Services Section -->

        <!-- Clients Section -->
        <section id="clients" class="clients section">

            <div class="container" data-aos="fade-up" data-aos-delay="100">

                <div class="swiper init-swiper">
                    <script type="application/json" class="swiper-config">
                {
                  "loop": true,
                  "speed": 600,
                  "autoplay": {
                    "delay": 5000
                  },
                  "slidesPerView": "auto",
                  "pagination": {
                    "el": ".swiper-pagination",
                    "type": "bullets",
                    "clickable": true
                  },
                  "breakpoints": {
                    "320": {
                      "slidesPerView": 2,
                      "spaceBetween": 40
                    },
                    "480": {
                      "slidesPerView": 3,
                      "spaceBetween": 60
                    },
                    "640": {
                      "slidesPerView": 4,
                      "spaceBetween": 80
                    },
                    "992": {
                      "slidesPerView": 6,
                      "spaceBetween": 120
                    }
                  }
                }
              </script>
                    <div class="swiper-wrapper align-items-center">
                        <div class="swiper-slide">
                            <a href="{{ route('clinical-care') }}"><img
                                    src="{{ asset('frontend/assets/img/salud/clinical-care-logo.png') }}" class="img-fluid"
                                    alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="{{ route('cedisan') }}"><img
                                    src="{{ asset('frontend/assets/img/salud/cedisan-logo.png') }}" class="img-fluid"
                                    alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="{{ route('kidney-care') }}"><img
                                    src="{{ asset('frontend/assets/img/salud/kidney-logo.png') }}" class="img-fluid"
                                    alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="{{ route('hemobalance-care') }}"><img
                                    src="{{ asset('frontend/assets/img/salud/hemobalance-logo.png') }}" class="img-fluid"
                                    alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="{{ route('jrs-meddev') }}"><img
                                    src="{{ asset('frontend/assets/img/salud/jrs-logo.png') }}" class="img-fluid"
                                    alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="{{ route('primelab') }}"><img
                                    src="{{ asset('frontend/assets/img/salud/primelab.png') }}" class="img-fluid"
                                    alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="{{ route('intifarma') }}"><img
                                    src="{{ asset('frontend/assets/img/salud/intifarma-logo.png') }}" class="img-fluid"
                                    alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="{{ route('pandorafarma') }}"><img
                                    src="{{ asset('frontend/assets/img/salud/pandorafarma-logo.png') }}"
                                    class="img-fluid" alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="{{ route('tsg-trade') }}"><img
                                    src="{{ asset('frontend/assets/img/ingenieria/tsg-logo.png') }}" class="img-fluid"
                                    alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>

            </div>

        </section><!-- /Clients Section -->

    </main>

@endsection

@push('styles')
<style>
    .info-item {
        position: relative;
        padding-left: 20px;
        margin-bottom: 5px;
        color: #333;
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .info-item::before {
        content: '';
        position: absolute;
        left: 0;
        color: #007bff;
        font-weight: bold;
        transition: color 0.3s ease;
    }

    .info-item:hover {
        color: #007bff;
        transform: translateX(5px);
    }

    .info-item:hover::before {
        color: #0056b3;
    }
</style>
@endpush

@push('scripts')
@endpush