@extends('layouts.pagina')
@section('titulo', 'Nosotros')

@section('content')
  
   <section> 
        <!-- <div class="wave-nos" style="height: 150px; overflow: hidden;" >
            <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
                <path d="M0.28,94.23 C283.57,62.66 220.37,69.56 501.41,40.95 L499.72,-0.48 L-1.41,0.50 Z" style="stroke: none; fill: #fff;">
                </path>
            </svg>
        </div>        -->
        <div class="portada-nos flex items-center justify-center" 
         style="background-image: linear-gradient(120deg, rgba(54, 59, 59, 0.699) 0%, rgba(44, 45, 46, 0.301) 100%), url('/images/recursos/NOSOTROS.jpg'); background-size: cover; background-attachment: fixed;">
          <div>
            <h1 class="text-white lg:text-7xl md:text-5xl text-4xl">NOSOTROS</h1>
          </div>

        </div>
        <div class="wave-nos" style="height: 120px; overflow: hidden; margin-top: -80px; margin-bottom: -80px;" >
            <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
                <path d="M-0.84,89.30 C257.62,59.70 256.49,59.70 503.67,2.47 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #F2F2F2;">
                </path>
            </svg>
        </div>
      </section>
      <section class="nos-inf text-center flex flex-col items-center">
          
            <h1 class="text-xl">¿Quiénes somos?</h1>            
            <p class="my-10 text-justify  w-full lg:w-11/12">Somos un grupo en continua actualización para ofrecer a la población una atención a la vanguardia en otorrinolaringología y fonoaudiología, 
                desde 1989 con profesionales de gran formación, con tecnología de última generación.</p>
          
         
        <div class="grid grid-cols-1 md:grid-cols-2 justify-items-end place-items-center lg:justify-items-center nos-content">
            <div class="mision flex flex-col items-center w-full lg:w-4/5 ">             
                <h2>Misión</h2>
                <p>Brindar a nuestros pacientes una atención médica integral y de excelencia para la resolución de patologías 
                    otorrinolaringológicas y fonoaudiológicas basadas en decisiones en equipo, ética profesional, eficiencia, 
                    calidad médica y calidez humana.
                </p>
            </div>
            <div class="img-mision w-full md:w-4/5 lg:w-1/2" >
                <img src="{{ asset('/images/recursos/MISION.jpg')}}" alt="">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 justify-items-start place-items-center lg:justify-items-center nos-content">
            <div class="img-mision order-2 md:order-1 w-full md:w-4/5 lg:w-1/2" >
                <img src="{{ asset('/images/recursos/VISION.jpg')}}" alt="">
            </div>
            <div class="mision flex flex-col items-center order-1 md:order-2 w-full lg:w-4/5 ">             
                <h2>Visión</h2>
                <p>Ser un centro médico de referencia en el país, en la 
                    práctica asistencial y clínica en las especialidades de la otorrinolaringológica 
                    y fonoaudiológica.  .
                </p>
            </div>            
        </div>
      </section>
      <section class="valores">
          <h1 class="valores-title">VALORES</h1>
        <div class="grid grid-cols-1 md:grid-cols-2 justify-items-center">
            <div class="w-full md:w-4/5 valores-inf text-left">
                <div class="flex">
                    <img src="{{ asset('/images/ICONOS/CONFIANZA.png')}}" class="h-20 w-20" alt="">
                    <div class="">
                        <h2 class="font-bold">CONFIANZA</h2>
                        <p class="text-justify">Basada en la experiencia profesional, el trabajo en equipo y los resultados exitosos.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-4/5 valores-inf text-left">
                <div class="flex">
                    <img src="{{ asset('/images/ICONOS/COMPROMISO.png')}}" class="h-20 w-20" alt="">
                    <div class="">
                        <h2 class="font-bold">COMPROMISO</h2>
                        <p class="text-justify">Mediante la empatía y contención de nuestros pacientes y sus familias</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 justify-items-center">
            <div class="w-full md:w-4/5 valores-inf">
                <div class="flex text-left">
                    <img src="{{ asset('/images/ICONOS/TRANSPARENCIA.png')}}" class="h-20 w-20" alt="">
                    <div class="">
                        <h2 class="font-bold">TRANSPARENCIA</h2>
                        <p class="text-justify">En la comunicación con nuestros pacientes y las entidades.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-4/5 valores-inf">
                <div class="flex text-left">
                    <img src="{{ asset('/images/ICONOS/HUMILDAD.png')}}" class="h-20 w-20" alt="">
                    <div class="">
                        <h2 class="font-bold">HUMILDAD</h2>
                        <p class="text-justify">Ser conscientes de lo que realmente somos y el deseo de continuar creciendo.</p>
                    </div>
                </div>
            </div>
        </div>
      </section>
  
@endsection