@extends('ved.layout.layout')
@section('content')
    <div class="breadcrumbarea aos-init aos-animate" data-aos="fade-up">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="breadcrumb__content__wraper">
                        <div class="breadcrumb__title">
                            <h2 class="heading">Language Classes</h2>
                        </div>
                        <div class="breadcrumb__inner">
                            <ul>
                                <li><a href="index.php">Home</a></li>
                                <li><a href="">About</a></li>
                                <li> Ved</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="shape__icon__2">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__1" src="{{asset('ved/assets/img/herobanner/herobanner__1.png')}}"
                alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__2" src="{{asset('ved/assets/img/herobanner/herobanner__2.png')}}"
                alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__3" src="{{asset('ved/assets/img/herobanner/herobanner__3.png')}}"
                alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__4" src="{{asset('ved/assets/img/herobanner/herobanner__5.png')}}"
                alt="photo">
        </div>
    </div>

    <div class="abouttabarea sp_bottom_70">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 aos-init aos-animate" data-aos="fade-up" style="margin-top: 100px; margin-left: 12%;">
                    <ul class="nav  about__button__wrap" id="myTab" role="tablist">
                       @foreach ($data->children as $item) 
                         <li class="nav-item" role="presentation">
                             <button class="single__tab__link @if($loop->first) active @endif" data-bs-toggle="tab" data-bs-target="#{{$item->alias}}"
                                 type="button" aria-selected="true" role="tab">{{$item->title}}</button>
                         </li>
                       @endforeach
                    </ul>
                </div>
                <div class="tab-content tab__content__wrapper aos-init aos-animate" id="myTabContent" data-aos="fade-up">
                   @foreach ($data->children as $item) 
                     <div class="tab-pane fade @if($loop->first) active show @endif" id="{{$item->alias}}" role="tabpanel"
                         aria-labelledby="{{$item->alias}}">
                         <div class="col-xl-12">
                             <div class="aboutarea__content__tap__wraper">
                                 <p class="paragraph__1">{!!$item->details!!}</p>
                                 </div>
                             </div>
                         </div>
                         @endforeach
                     </div>
                </div>
            </div>
            
        </div>
    </div>
@endsection