@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.about_us_label')}}</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-6">
              <p class="desc">
                {{trans('web.about_desc_label_1')}}
              </p>
            </div>
            <div class="col-lg-6">
              <p class="desc">
                {{trans('web.about_desc_label_2')}}
              </p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p style="font-weight: bold;color: black;">{{trans('web.general_manager_message')}}</p>
            </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-6">
              <div class="sec-image far-im text-left">
                <img class="far-im" src="img/fr-rect.png" alt="rect">
              </div>
            </div>
            <div class="col-lg-6" style="padding-top:54px;">
                    <div class="sec-header">
                    <h5 class="subtitle mb-2" style="color:{{$profile->COLOR}}">{{trans('web.about_us_label')}}</h5>
                    <h2 class="title" style="margin-bottom: 20px;">{{trans('web.our_vision_farabi')}}</h2>
                    </div>
                    <p class="desc" style="max-width: 487px;">{{trans('web.our_vision_desc_farabi')}}</p>
                    <ul class="footer-links">
                            <li style="margin-bottom:20px;display:flex;"><i class="fas fa-check" style="margin-top: 4px;margin-left:10px;margin-right:10px;color:{{$profile->EXTRA_COLOR}}"></i><p> {{trans('web.check1_farabi')}} </p></li>
                            <li style="margin-bottom:20px;display:flex;"><i class="fas fa-check" style="margin-top: 4px;margin-right:10px;margin-left:10px; color:{{$profile->EXTRA_COLOR}};"></i><p>{{trans('web.check2_farabi')}}</p></li>
                            <li style="margin-bottom:20px;display:flex;"><i class="fas fa-check" style="margin-top: 4px;margin-right:10px; margin-left:10px;color:{{$profile->EXTRA_COLOR}};"></i><p> {{trans('web.check3_farabi')}}</p></li>
                </ul>
                </div>
          </div>
        </div>
      </section>
    
    <section class="new-sec banner-sec">
        <div class="container">
            <div class="sec-content">
            <div class="row">
                <div class="col-lg-6">
                    <div class="sec-header">
                    <h5 class="subtitle mb-2" style="color:{{$profile->COLOR}}">{{trans('web.why_choose_us_farabi')}}</h5>
                    <h2 class="title" style="margin-bottom: 20px;">{{trans('web.our_mission_farabi')}}</h2>
                    </div>
                    <p class="desc" style="max-width: 487px;">{{trans('web.mission_desc_farabi')}}</p>
                </div>
                <div class="col-lg-6">
              <div class="sec-content">
                <div class="stats">
                  <div class="row" style="margin-bottom: 21px;">
                    <div class="col-lg-12">
                        <h6 style="font-weight: bold;">{{trans('web.medical_farabi')}}<span style="color:{{$profile->EXTRA_COLOR}}"> {{trans('web.devices_farabi')}}</span></h6>
                        <p class="name">{{trans('web.devices_desc_farabi')}}</p>
                    </div>
                  </div>
                  <div class="row" style="margin-bottom: 21px;">
                    <div class="col-lg-12">
                        <h6 style="font-weight: bold;">{{trans('web.quality_farabi')}}<span style="color:{{$profile->EXTRA_COLOR}}"> {{trans('web.service_farabi')}}</span></h6>
                        <p class="name">{{trans('web.quality_desc_farabi')}}</p>
                    </div>
                  </div>
                  <div class="row" style="margin-bottom: 21px;">
                    <div class="col-lg-12">
                        <h6 style="font-weight: bold;">{{trans('web.happy_farabi')}}<span style="color:{{$profile->EXTRA_COLOR}}"> {{trans('web.patients_farabi')}}</span></h6>
                        <p class="name">{{trans('web.patients_desc_farabi')}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            </div>
            </div>
        </div>
    </section>
    <section class="new-sec why-sec far-bg">
        <div class="container">
          <div class="row">
            <div class="col-lg-6">
              <div class="sec-image far-im text-left">
                <img class="far-im" src="img/fr-map.png" alt="rect">
              </div>
            </div>
            <div class="col-lg-6" style="padding: 24px;">
              <div style="padding-top: 27px;">
                <div class="sec-header">
                  <h2 class="title">{{trans('web.were_in_all_cities')}}</h2>
                </div>
                <h6 class="subtitle" style="text-transform: uppercase;margin-bottom:20px;">{{trans('web.head_office')}}</h6>
                <ul class="footer-links">
                            <li style="margin-bottom:20px;display:flex;max-width:380px"><i class="fas fa-map-marker-alt" style="margin-top: 4px;margin-left:10px;margin-right:10px;color:{{$profile->EXTRA_COLOR}}"></i><a href="{{$profile->LOCATIONS_URL}}"> {{trans('web.location_farabi')}} </a></li>
                            <li style="margin-bottom:20px;display:flex;"><i class="fas fa-phone" style="margin-top: 4px;margin-right:10px;margin-left:10px; color:{{$profile->EXTRA_COLOR}};"></i><a href="mailto:{{$profile->PHONE_NUMBER}}" style="font-size: 15px"> {{$profile->PHONE_NUMBER}}</a></li>
                            <li style="margin-bottom:20px;display:flex;"><i class="fab fa-whatsapp" style="margin-top: 4px;margin-right:10px; margin-left:10px;color:{{$profile->EXTRA_COLOR}};"></i><a href="mailto:{{$profile->WHATSAPP_NUMBER}}" style="font-size: 15px"> {{$profile->WHATSAPP_NUMBER}}</a></li>
                            <li style="margin-bottom:40px;display:flex;"><i class="fas fa-envelope" style="margin-top: 4px;margin-right:10px;margin-left:10px; color:{{$profile->EXTRA_COLOR}};"></i><a href="mailto:{{$profile->EMAIL}}" style="font-size: 15px"> {{$profile->EMAIL}}</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    <!--
    <div class="clip-background">
      
      <section class="new-sec why-sec">
        <div class="container">
          <div class="row">
            <div class="col-lg-6">
              <div class="sec-image text-center">
                <img src="img/about-image.png" alt="World">
              </div>
            </div>
            <div class="col-lg-6">
              <div class="sec-content">
                <div class="sec-header">
                  <h5 class="subtitle mb-2">{{trans('web.make_right_choice')}}</h5>
                  <h2 class="title"
                  @if(!empty($profile) && $profile->COLOR) style="color:{{$profile->COLOR}}"
                  @endif
                  >{{trans('web.where_we_are')}}</h2>
                </div>
                <p class="desc">
                  {{trans('web.about_desc_label3')}}
                </p>
                <div class="stats">
                  <div class="single-stat" style="color:{{$profile->EXTRA_COLOR}}">
                    <p class="value" style="color:{{$profile->EXTRA_COLOR}}">+50</p>
                    <p class="name">{{trans('web.projects_done_label')}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
    </div>
  
    <section class="new-sec cta-solutions-sec">
      <div class="container">
        <div class="sec-content">
          <h5 class="subtitle">{{trans('web.we_will_offer')}}</h5>
          @if(!empty($profile->NAME_EN))
          <h3 class="sec-title">{{(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "en") ? $profile->NAME_EN : $profile->NAME_AR }}</h3>
          @endif
          <p class="sec-desc">{{trans('web.contact_our_sales_label')}}</p>
          <a href="/contact" class="btn ">{{trans('web.contact_us')}} <span class="icon mb-1 mr-1">@if(app('translator')->getLocale() == 'ar') &#10229;@else &#10230;@endif</span></a>

        </div>
      </div>
    </section>-->

  </main>

@endsection