@extends('academia.dashboard')

@section('content')

<div class="row mb-3 ms-n3 me-n3">
    <div class="swiper slider-academia">
        <div class="swiper-wrapper">
        	<div class="swiper-slide">
                <img src="{{ asset('nosotros/'.$nosotros->principal) }}" class="swiper-gl-image">
            </div>
        </div>
    </div>            
</div>


<div class="row mt-5">
	<div class="col-md-12">
		<div class="d-flex justify-content-center">
			<div class="col-md-9">
				<div class="row">
					<div class="col-md-6 mt-3 fs-4">
					   {{ $nosotros->texto1 }}
				    </div>
				    <div class="col-md-5 text-center mt-3">
					   <img src="{{ asset('nosotros/'.$nosotros->imagen1) }}" class="img-fluid">
				    </div>
				</div>
			</div>
		</div>
	</div>
</div>



<div class="row mt-5 ms-n3 me-n3" style="background-image: url('{{ asset('nosotros/'.$nosotros->imagen2) }}'); background-color: #000;">
    <div class="col-md-12">
        <div class="row p-5">
        	<h1 class="text-especial text-white">{{ $nosotros->texto2 }}</h1>
        </div>	
    </div>
</div>        	


<div class="row mt-5">
	<div class="col-md-12">
		<div class="d-flex justify-content-center">
			<div class="col-md-9">
				<div class="row">
					<div class="col-md-6 text-center mt-3">
						<img src="{{ asset('nosotros/'.$nosotros->imagen3) }}" class="img-fluid">
				    </div>
				    <div class="col-md-5 mt-3 fs-4">
				    	{{ $nosotros->texto3 }}
				    </div>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@push('script')
<script type="text/javascript">
    
    var swiper = new Swiper(".slider-principal", {
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

</script>
@endpush