@extends('layout.mainlayout')

@section('content')

  <style>
    .owl-item{
      width: 60vw !important;
    }
    .splide__track--draggable{
      padding: 0 !important;
    }
    .owl-nav.disabled, .owl-dots.disabled{
      display: none !important;
    }
    .owl-stage{
      width: 100% !important;
    }
    .slider.owl-loaded.owl-drag{
      text-align: -webkit-center;
    }
    .sec-desc:hover{
      color:black;
    }
  </style>
  <main class="page-main">
    <!-- Start Breadcrubms Section -->
    <section class="new-sec breadcrumbs-sec">
      <div class="container">
        <h3 class="page-title">{{trans('web.our_accreditation')}}</h3>
        <i class="ri-arrow-down-s-line icon"></i>
      </div>
    </section>
    <!-- End Breadcrubms Section -->
    <!-- Start Meet Us Section -->
    <section class="new-sec meetus-sec">
      <div class="container">
        <!--<div class="sec-header">
          @if(!empty($profile->NAME_EN))
          <h5 class="subtitle">{{(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "en") ? $profile->NAME_EN : $profile->NAME_AR }}</h5>
          @endif
          <h2 class="title" 
          @if(!empty($profile) && $profile->COLOR) style="color:{{$profile->COLOR}}"
          @endif
          >{{trans('web.everything_health_needs_label')}}</h2>
        </div>-->
        <div class="sec-content">
            <div class="row">
                <div class="col-lg-12">
                <div class="sec-header">
                    <h5 class="subtitle mb-2" style="color:{{$profile->COLOR}}">{{trans('web.meet_us')}}</h5>
                    <h2 class="title" style="margin-bottom: 20px;">{{trans('web.our_accreditation')}}</h2>
                    </div>
                </div>
            </div>
          <div class="row">
            <div class="col-lg-6">
              <p class="desc">
                {{trans('web.accreditation_desc_label_1')}}
              </p>
            </div>
            <div class="col-lg-6">
              <p class="desc">
                {{trans('web.accreditation_desc_label_2')}}
              </p>
              <img style="max-width:294px;" class="far-im" src="img/cbahi.png" alt="rect">
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Meet Us Section -->
    <section class="new-sec why-sec">
        <div class="container">
          <div class="row">
            <div class="col-lg-2 col-sm-12 mb-3 text-center">
              <img style="max-width:280px;" src="img/farabi-cert/cer-1.png" alt="rect">
            </div>
            <div class="col-lg-2 col-sm-12 mb-3 text-center">
              <img style="max-width:280px;" src="img/farabi-cert/cer-2.png" alt="rect">
            </div>
            <div class="col-lg-2 col-sm-12 mb-3 text-center">
              <img style="max-width:280px;" src="img/farabi-cert/cer-3.png" alt="rect">
            </div>
            <div class="col-lg-2 col-sm-12 mb-3 text-center">
              <img style="max-width:280px;" src="img/farabi-cert/cer-4.png" alt="rect">
            </div>
            <div class="col-lg-2 col-sm-12 mb-3 text-center">
              <img style="max-width:280px;" src="img/farabi-cert/cer-5.png" alt="rect">
            </div>
            <div class="col-lg-2 col-sm-12 mb-3 text-center">
              <img style="max-width:280px;" src="img/farabi-cert/cer-6.png" alt="rect">
            </div>
            <div class="col-lg-2 col-sm-12 mb-3 text-center">
              <img style="max-width:280px;" src="img/farabi-cert/cer-7.png" alt="rect">
            </div>
            <div class="col-lg-2 col-sm-12 mb-3 text-center">
              <img style="max-width:280px;" src="img/farabi-cert/cer-8.png" alt="rect">
            </div>
            <div class="col-lg-2 col-sm-12 mb-3 text-center">
              <img style="max-width:280px;" src="img/farabi-cert/cer-9.png" alt="rect">
            </div>
            <div class="col-lg-2 col-sm-12 mb-3 text-center">
              <img style="max-width:280px;" src="img/farabi-cert/cer-10.png" alt="rect">
            </div>
        </div>
      </section>
  </main>

@endsection