@extends('frontend.layouts.master')
@section('content')


        <!-- page-title -->
        <div class="page-content">
            <div class="section mt-0">
                <div class="breadcrumbs-wrap">
                    <div class="container">
                        <div class="breadcrumbs">
                            <a href="{{ url('/') }}">Home</a>
                            <span>{{ $page_name }}</span>
                        </div>
                    </div>
                </div>
            </div>
        <!-- page-title end -->


    <!--site-main start-->
    <div class="section page-content-first">
		<div class="container">
			<div class="text-center mb-2 mb-md-3 mb-lg-4">
				<h1>Our Paramedic Training Courses</h1>
				<div class="h-decor"></div>
			</div>
		</div>

		<!--//section-->
	</div>
	<!--//section prices-->
	<!--section special offers-->
	<div class="section" id="specialOffer">
		<div class="container">
			<!-- <div class="title-wrap text-center">
				<h2 class="h1">Paramedic Courses</h2>
				<div class="h-decor"></div>
			</div> -->
			<div class="row">
                @foreach ($schools as $school)
				<div class="col-sm-6">
                    <div class="special-card">
                        <div class="special-card-photo">
                            <img src="{{ asset("$school->thumbnail") }}" alt="{{ $school->name }}">
                        </div>
                        <div class="special-card-caption text-left">
                            <div class="school-name">{{ $school->name }}</div>

                            <div class="special-card-txt3">Full Consultation</div>
                            <div><a href="{{ url("school-details/".$school->id) }}" class="btn"><i class="icon-right-arrow"></i><span>Learn More</span><i class="icon-right-arrow"></i></a></div>
                        </div>
                    </div>                    
				</div>
                @endforeach
			</div>
            {!! $schools->appends(Input::all())->render() !!}
		</div>
	</div>
	<!--//section special offers-->
</div>
<style>
    .special-card {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    margin: 10px;
}

.special-card-photo {
    position: relative;
    width: 100%;
    height: auto;
}

.special-card-photo img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure image covers the area */
}

.special-card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    padding: 15px;
    box-sizing: border-box;
    text-align: left;
}

.special-card-caption .school-name {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.special-card-caption .special-card-txt2 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}

.special-card-caption .special-card-txt3 {
    font-size: 18px;
    margin-bottom: 15px;
}

.special-card-caption .btn {
    background-color: #F8F8F8;
    color: rgb(17, 2, 2);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.special-card-caption .btn:hover {
    background-color: #3368C6;
}

/* Optional: Text shadow for better contrast */
.special-card-caption .school-name,
.special-card-caption .special-card-txt2,
.special-card-caption .special-card-txt3 {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

</style>

@endsection