@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;
    }
  </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')}}</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">
          <h5 class="subtitle">{{trans('web.meet_blazma')}}</h5>
          <h2 class="title">{{trans('web.everything_health_needs')}}</h2>
        </div>
        <div class="sec-content">
          <div class="row">
            <div class="col-lg-6">
              <p class="desc">
                {{trans('web.about_desc1')}}
              </p>
            </div>
            <div class="col-lg-6">
              <p class="desc">
                {{trans('web.about_desc2')}}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Meet Us Section -->
    <!-- Start Background Secs -->
    <div class="clip-background">
      <!-- Start Why Section -->
      <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">{{trans('web.where_we_are')}}</h2>
                </div>
                <p class="desc">
                  {{trans('web.about_desc3')}}
                </p>
                <div class="stats">
                  <div class="single-stat">
                    <p class="value"><bdi>+400</bdi></p>
                    <p class="name">{{trans('web.partners')}}</p>
                  </div>
                  <div class="single-stat">
                    <p class="value">50</p>
                    <p class="name">{{trans('web.projects_done')}}</p>
                  </div>
                  <div class="single-stat">
                    <p class="value">8,250</p>
                    <p class="name">{{trans('web.hours_of_work')}}</p>
                  </div>
                  <div class="single-stat">
                    <p class="value"> <bdi>+3M</bdi></p>
                    <p class="name">{{trans('web.happy_clients')}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- End Why Section -->
    </div>
    <!-- Start Advantages Section -->
    <section class="new-sec adv-sec">
      <div class="container">
        <div class="sec-header">
          <h5 class="subtitle">{{trans('web.advantages')}}</h5>
          <h2 class="title">{{trans('web.why_people_choose_blazma')}}</h2>
        </div>
        <div class="sec-content">
          <div class="row">
            <div class="col-sm-6 col-lg-4">
              <div class="single-adv">
                <div class="box-icon">
                  <img src="img/endToEnd.svg" alt="Icon">
                </div>
                <div class="box-content">
                  <h3 class="box-title">{{trans('web.end_to_end_solutions')}}</h3>
                  <p class="box-desc">{{trans('web.end_to_end_solutions_desc')}}</p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-4">
              <div class="single-adv">
                <div class="box-icon">
                  <img src="img/progressive.svg" alt="Icon">
                </div>
                <div class="box-content">
                  <h3 class="box-title">{{trans('web.progressive_work')}}</h3>
                  <p class="box-desc">{{trans('web.progressive_work_desc')}}</p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-4">
              <div class="single-adv">
                <div class="box-icon">
                  <img src="img/results.svg" alt="Icon">
                </div>
                <div class="box-content">
                  <h3 class="box-title">{{trans('web.excellent_results')}}</h3>
                  <p class="box-desc">{{trans('web.excellent_results_desc')}}</p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-4">
              <div class="single-adv">
                <div class="box-icon">
                  <img src="img/creative.svg" alt="Icon">
                </div>
                <div class="box-content">
                  <h3 class="box-title">{{trans('web.creative_solutions')}}</h3>
                  <p class="box-desc">{{trans('web.creative_solutions_desc')}}</p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-4">
              <div class="single-adv">
                <div class="box-icon">
                  <img src="img/analysis.svg" alt="Icon">
                </div>
                <div class="box-content">
                  <h3 class="box-title">{{trans('web.research_analysis')}}</h3>
                  <p class="box-desc">{{trans('web.research_analysis_desc')}}</p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-4">
              <div class="single-adv">
                <div class="box-icon">
                  <img src="img/makeEasy.svg" alt="Icon">
                </div>
                <div class="box-content">
                  <h3 class="box-title">{{trans('web.make_it_easy')}}</h3>
                  <p class="box-desc">{{trans('web.make_it_easy_desc')}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Advantages Section -->
    <!-- Start Team Members Section -->
    <section class="new-sec members-sec">
      <div class="container">
        <div class="sec-header">
          <h5 class="subtitle">{{trans('web.team_members')}}</h5>
          <h2 class="title">{{trans('web.meet_our_team')}}</h2>
        </div>
        <div class="slider">
          <div id="testimonials" class="splide">
            <div class="splide__track">
              <div class="splide__list">
                <div class="splide__slide">
                  <div class="single-memb">
                    <div class="mem-pic">
                      <img src="https://s3.eu-west-1.amazonaws.com/blazma.com/team/hussain.jpeg" alt="Member">
                    </div>
                    <div class="mem-info">
                      <h3 class="mem-name">Hussein Al-Masri</h3>
                      <p class="position">Chief Operating Officer</p>
                    </div>
                  </div>
                </div>
                <div class="splide__slide">
                  <div class="single-memb">
                    <div class="mem-pic">
                      <img src="https://s3.eu-west-1.amazonaws.com/blazma.com/team/hussam.jpeg" alt="Member">
                    </div>
                    <div class="mem-info">
                      <h3 class="mem-name">Hussam Shaheen</h3>
                      <p class="position">Chief Technology Officer</p>
                    </div>
                  </div>
                </div>
                <div class="splide__slide">
                  <div class="single-memb">
                    <div class="mem-pic">
                      <img src="https://s3.eu-west-1.amazonaws.com/blazma.com/team/abdallah.jpeg" alt="Member">
                    </div>
                    <div class="mem-info">
                      <h3 class="mem-name">Abdullah Al-Jathlani</h3>
                      <p class="position">Chief Executive Officer</p>
                    </div>
                  </div>
                </div>
                <div class="splide__slide">
                  <div class="single-memb">
                    <div class="mem-pic">
                      <img src="https://s3.eu-west-1.amazonaws.com/blazma.com/team/yazan.jpeg" alt="Member">
                    </div>
                    <div class="mem-info">
                      <h3 class="mem-name">Yazan Salhi</h3>
                      <p class="position">Senior Software Engineer</p>
                    </div>
                  </div>
                </div>
                <div class="splide__slide">
                  <div class="single-memb">
                    <div class="mem-pic">
                      <img src="https://s3.eu-west-1.amazonaws.com/blazma.com/team/eyad.jpeg" alt="Member">
                    </div>
                    <div class="mem-info">
                      <h3 class="mem-name">Eyad Jaboo</h3>
                      <p class="position">Senior Software Engineer</p>
                    </div>
                  </div>
                </div>
                <div class="splide__slide">
                  <div class="single-memb">
                    <div class="mem-pic">
                      <img src="https://s3.eu-west-1.amazonaws.com/blazma.com/team/waleed.jpeg" alt="Member">
                    </div>
                    <div class="mem-info">
                      <h3 class="mem-name">Waleed Hamdan</h3>
                      <p class="position">Senior Software Engineer</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="splide__arrows splide__arrows--ltr">
              <button  @if(app('translator')->getLocale() == 'ar') style="transform: rotate(180deg); top: 9.5rem; right: -2em;" @endif
                      class="splide__arrow splide__arrow--prev"
                      type="button"
                      aria-label="Previous slide"
                      aria-controls="splide01-track"
              >
                <span class="icon">&#10229;</span>
              </button>
              <button @if(app('translator')->getLocale() == 'ar') style="left: -2em;" @endif
                      class="splide__arrow splide__arrow--next"
                      type="button"
                      aria-label="Next slide"
                      aria-controls="splide01-track"
              >
                <span class="icon">@if(app('translator')->getLocale() == 'ar') &#10229;@else &#10230;@endif</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Team Members Section -->
    <!-- Start Careers Section -->
    <section class="new-sec careers-sec">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 clm">
            <div class="sec-content">
              <div class="sec-header">
                <h5 class="subtitle">{{trans('web.careers')}}</h5>
                <h2 class="title">{{trans('web.are_you_interested_joining_our_team')}}</h2>
              </div>
              <p class="desc">{{trans('web.are_you_interested_joining_our_team_desc')}}</p>
              <a href="/careers#job-section" class="btn btn-blazma">
                <span class="text">{{trans('web.open_positions')}}</span>
                <span class="icon">@if(app('translator')->getLocale() == 'ar') &#10229;@else &#10230;@endif</span>
              </a>
            </div>
          </div>
          <div class="col-lg-6 clm">
            <div class="sec-image">
              <img src="img/careers-sec.jfif" alt="Careers" class="main-img">
              <img src="img/logo-back.png" alt="LOGO" class="back">
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Careers Section -->
    <!-- Start CTA Solution Section -->
    <section class="new-sec cta-solutions-sec">
      <div class="container">
        <div class="sec-content">
          <img src="img/solution-circles.png" alt="Circles">
          <h5 class="subtitle">{{trans('web.we_will_offer')}}</h5>
          <h3 class="sec-title">{{trans('web.lets_gets_to_know')}}</h3>
          <p class="sec-desc">{{trans('web.contact_our_sales')}}</p>
          <a href="/contact" class="btn btn-blazma">{{trans('web.contact_us')}} <span class="icon">@if(app('translator')->getLocale() == 'ar') &#10229;@else &#10230;@endif</span></a>

        </div>
      </div>
    </section>
    <!-- End CTA Solution Section -->
  </main>

@endsection