@extends('frontend.layouts.master')
@section('title', 'RASEMCORP || HEMOBALANCE 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>HEMOBALANCE 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 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 Alberto Barton Thompson, desde el año 2014.
                    </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: HEMOBALANCE CARE SAC</li>
                        <li class="info-item">Ruc: 20602479421</li>
                        <li class="info-item">Nombre comercial: HEMOBALANCE</li>
                        <li class="info-item">Fecha de Inicio de actividades: 02/11/2017</li>
                        <li class="info-item">Dirección Legal: Av. Cmdte Perez Salmon Mza l Lote 54</li>
                        <li class="info-item">Distrito/Ciudad: Callao</li>
                        <li class="info-item">Provincia: Callao</li>
                        <li class="info-item">Departamento: Prov. Const. del Callao, Perú</li>
                    </p>
                    <h4>Certificación</h4>
                    <p>
                        <li class="info-item"><a href="{{ asset('frontend/assets/img/salud/CERTIFICACIONES/HEMOBALANCE/HEMOBALANCEISO.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/hemobalance-logo.png') }}" 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">
                <!-- Service Item -->
                <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/hemobalance-care/1.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="400">
                    <div class="service-item position-relative">
                        <div class="icon2">
                            <img src="{{ asset('frontend/assets/img/salud/hemobalance-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/hemobalance-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/hemobalance-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>
    </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