@extends('web.layouts.layout')
<title>@yield('meta_title', 'About Online Course')</title>
<meta name="description" content="@yield('')">
<meta name="keywords" content="@yield('')">
@section('content')
<main>
 
  <section class="bd-breadcrumb-area p-relative fix z-index-11">
    <div class="bd-breadcrumb-bg-two" data-background="assets/images/breadcrumb/breadcrumb-bg-2.webp"></div>
    <div class="bd-breadcrumb-wrapper p-relative">
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <div class="bd-breadcrumb style-two d-flex-center">
              <div class="bd-breadcrumb-content">
                <h1 class="bd-breadcrumb-title">{{$about->label??''}}</h1>
                <div class="bd-breadcrumb-list"> <span><a href="/">Home</a></span> <span class="divider"><i class="fa-regular fa-angle-right"></i></span> <span class="active">{{$about->label??''}}</span> </div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </section>
  
  <section class="bd-why-choose-area section-space p-relative fix">
    <div class="container">
      <div class="row gy-30 align-items-center justify-content-between">
        <div class="col-xxl-5 col-xl-6 col-lg-6">
          <div class="bd-section-title-wrapper">             <h2 class="bd-section-title"> {{$about->label??''}} </h2>
            <p class="bd-section-paragraph"> {{$about->subtitle??''}}</p> 
          </div>
        </div>
         
      </div>
    </div>
  </section>
 
    
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
<style>
.timeline {position: relative;max-width: 100%;margin: auto;padding: 20px 20px;}
.timeline::after {content: '';position: absolute;width: 4px;background-color: #951c4b;top: 0;bottom: 0;left: 50%;
margin-left: -2px;}
.timeline-entry {position: relative;width: 50%;padding: 20px 40px;box-sizing: border-box;}
.timeline-entry.left {left: 0;}
.timeline-entry.right {left: 50%;}
.timeline-entry::before {content: '';position: absolute;top: 24px;width: 20px;height: 20px;background-color: #951c4b;border: 4px solid #951c4b;border-radius: 50%;z-index: 1;}
.timeline-entry.left::before {right: -10px;}
.timeline-entry.right::before {left: -10px;}
.timeline-box {background-color: #fff;padding: 20px;border-radius: 10px;position: relative;box-shadow: 0 2px 10px rgba(0,0,0,0.5);}
.timeline-box h4 {margin-top: 0;color: #951c4b;font-size: 28px;}
.bd-post-details-list {margin-top: 10px;color: #333;line-height: 1.6;}
@media screen and (max-width: 768px) {
.timeline::after {left: 20px;}
.timeline-entry {width: 100%;padding-left: 60px;padding-right: 25px;}
.timeline-entry.left, .timeline-entry.right {left: 0;}
.timeline-entry::before {left: 8px;}
}
 </style>
    <!-- AOS JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script>
        AOS.init({
            duration: 1800, // slower animation
            once: true
        });
    </script>
  
</main>
@endsection