<section className="capabilities__section bgsection pt-120 pb-120">
      {/* shpae */}
      <div className="capa__mask">
        <Image src={capamask} alt="capa-mask" />
      </div>
      {/* shpae */}
      {/* container */}
      <div className="container">
        {/* section header */}
        <div className="capabilites__header pb__60">
          <div className="section__header">
            <h2>Unique capabilities in action</h2>
            <p>
              AI (Artificial Intelligence) and ML (Machine Learning) are closely
              related fields that are focused on the development of computer
              systems...
            </p>
          </div>
          <Link href="/studies-one" className="cmn--btn">
            <span>See All Case Studies</span>
          </Link>
        </div>
        {/* section header */}
        {/* capabilites warap */}
        <div className="capabilities__wrap position-relative z-1">
          <Slider {...settings} ref={sliderRef}>
            <div className="capabilities__items">
              <div className="thumb">
                <Image src={capbi1} alt="capabi" />
                <Link
                  href="https://www.youtube.com/watch?v=wXNv-x5zVgE"
                  className="play__btn video-btn"
                >
                  <i className="material-symbols-outlined">play_arrow</i>
                </Link>
              </div>
              <div className="content">
                <Link
                  href="/studies-one"
                  className="cmn--btn capabilites__btn"
                >
                  <span>Technology</span>
                </Link>
                <h4>
                  <Link href="/studies-details">
                    Enabling Medical Staff To Prescribe The Right Antibiotics
                  </Link>
                </h4>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry...
                </p>
                <Link href="/studies-one" className="capa__more">
                  <span>Read More</span>
                  <i className="material-symbols-outlined">east</i>
                </Link>
              </div>
            </div>
            <div className="capabilities__items">
              <div className="thumb">
                <Image src={capabi2} alt="capabi" />
                <Link
                  href="https://www.youtube.com/watch?v=wXNv-x5zVgE"
                  className="play__btn video-btn"
                >
                  <i className="material-symbols-outlined">play_arrow</i>
                </Link>
              </div>
              <div className="content">
                <Link href="0" className="cmn--btn capabilites__btn">
                  <span>Machine</span>
                </Link>
                <h4>
                  <Link href="/studies-one">
                    classNameifying listing photos using AI & ML
                  </Link>
                </h4>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry...
                </p>
                <Link href="/studies-one" className="capa__more">
                  <span>Read More</span>
                  <i className="material-symbols-outlined">east</i>
                </Link>
              </div>
            </div>
            <div className="capabilities__items">
              <div className="thumb">
                <Image src={capabi3} alt="capabi" />
                <Link
                  href="https://www.youtube.com/watch?v=wXNv-x5zVgE"
                  className="play__btn video-btn"
                >
                  <i className="material-symbols-outlined">play_arrow</i>
                </Link>
              </div>
              <div className="content">
                <Link href="/" className="cmn--btn capabilites__btn">
                  <span>Robot</span>
                </Link>
                <h4>
                  <Link href="/studies-one">
                    Prescribe correct antibiotics including AI and ML
                  </Link>
                </h4>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry...
                </p>
                <Link href="/studies-one" className="capa__more">
                  <span>Read More</span>
                  <i className="material-symbols-outlined">east</i>
                </Link>
              </div>
            </div>
            <div className="capabilities__items">
              <div className="thumb">
                <Image src={capbi1} alt="capabi" />
                <Link
                  href="https://www.youtube.com/watch?v=wXNv-x5zVgE"
                  className="play__btn video-btn"
                >
                  <i className="material-symbols-outlined">play_arrow</i>
                </Link>
              </div>
              <div className="content">
                <Link href="/" className="cmn--btn capabilites__btn">
                  <span>Technology</span>
                </Link>
                <h4>
                  <Link href="/studies-one">
                    Enabling Medical Staff To Prescribe The Right Antibiotics
                  </Link>
                </h4>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry...
                </p>
                <Link href="/studies-one" className="capa__more">
                  <span>Read More</span>
                  <i className="material-symbols-outlined">east</i>
                </Link>
              </div>
            </div>
            <div className="capabilities__items">
              <div className="thumb">
                <Image src={capabi2} alt="capabi" />
                <Link
                  href="https://www.youtube.com/watch?v=wXNv-x5zVgE"
                  className="play__btn video-btn"
                >
                  <i className="material-symbols-outlined">play_arrow</i>
                </Link>
              </div>
              <div className="content">
                <Link href="/" className="cmn--btn capabilites__btn">
                  <span>Machine</span>
                </Link>
                <h4>
                  <Link href="/studies-one">
                    classNameifying listing photos using AI & ML
                  </Link>
                </h4>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry...
                </p>
                <Link href="/studies-one" className="capa__more">
                  <span>Read More</span>
                  <i className="material-symbols-outlined">east</i>
                </Link>
              </div>
            </div>
            <div className="capabilities__items">
              <div className="thumb">
                <Image src={capabi3} alt="capabi" />
                <Link
                  href="https://www.youtube.com/watch?v=wXNv-x5zVgE"
                  className="play__btn video-btn"
                >
                  <i className="material-symbols-outlined">play_arrow</i>
                </Link>
              </div>
              <div className="content">
                <Link href="/" className="cmn--btn capabilites__btn">
                  <span>Robot</span>
                </Link>
                <h4>
                  <Link href="/studies-one">
                    Prescribe correct antibiotics including AI and ML
                  </Link>
                </h4>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry...
                </p>
                <Link href="/studies-one" className="capa__more">
                  <span>Read More</span>
                  <i className="material-symbols-outlined">east</i>
                </Link>
              </div>
            </div>
            <div className="capabilities__items">
              <div className="thumb">
                <Image src={capbi1} alt="capabi" />
                <Link
                  href="https://www.youtube.com/watch?v=wXNv-x5zVgE"
                  className="play__btn video-btn"
                >
                  <i className="material-symbols-outlined">play_arrow</i>
                </Link>
              </div>
              <div className="content">
                <Link href="/" className="cmn--btn capabilites__btn">
                  <span>Technology</span>
                </Link>
                <h4>
                  <Link href="/studies-one">
                    Enabling Medical Staff To Prescribe The Right Antibiotics
                  </Link>
                </h4>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry...
                </p>
                <Link href="/studies-one" className="capa__more">
                  <span>Read More</span>
                  <i className="material-symbols-outlined">east</i>
                </Link>
              </div>
            </div>
            <div className="capabilities__items">
              <div className="thumb">
                <Image src={capabi2} alt="capabi" />
                <Link
                  href="https://www.youtube.com/watch?v=wXNv-x5zVgE"
                  className="play__btn video-btn"
                >
                  <i className="material-symbols-outlined">play_arrow</i>
                </Link>
              </div>
              <div className="content">
                <Link href="/" className="cmn--btn capabilites__btn">
                  <span>Machine</span>
                </Link>
                <h4>
                  <Link href="/studies-one">
                    classNameifying listing photos using AI & ML
                  </Link>
                </h4>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry...
                </p>
                <Link href="/studies-one" className="capa__more">
                  <span>Read More</span>
                  <i className="material-symbols-outlined">east</i>
                </Link>
              </div>
            </div>
            <div className="capabilities__items">
              <div className="thumb">
                <Image src={capabi3} alt="capabi" />
                <Link
                  href="https://www.youtube.com/watch?v=wXNv-x5zVgE"
                  className="play__btn video-btn"
                >
                  <i className="material-symbols-outlined">play_arrow</i>
                </Link>
              </div>
              <div className="content">
                <Link href="/" className="cmn--btn capabilites__btn">
                  <span>Robot</span>
                </Link>
                <h4>
                  <Link href="/studies-one">
                    Prescribe correct antibiotics including AI and ML
                  </Link>
                </h4>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry...
                </p>
                <Link href="/studies-one" className="capa__more">
                  <span>Read More</span>
                  <i className="material-symbols-outlined">east</i>
                </Link>
              </div>
            </div>
          </Slider>
        </div>
        {/* capabilites warap */}
      </div>
      {/* container */}

      {/* elelments */}
      <div className="global__mask">
        <Image src={global__mask} alt="img" className="img-fluid" />
        <div className="light__element1">
          <Image src={light_elements} alt="light" className="img-fluid" />
        </div>
      </div>
      <div className="capa__ai">
        <Image src={ai_element} alt="img" className="img-fluid" />
      </div>
      <div className="capa__rocket">
        <Image src={rocket_element} alt="img" className="img-fluid" />
      </div>
      <div className="light__element1">
        <Image src={light_elements} alt="light" className="img-fluid" />
      </div>
      {/* elelments */}
    </section>

<section className="real__world bgsection pt-120 pb-120">
{/* container */}
<div className="container">
  {/* real head */}
  <div className="project__head">
    <div className="section__header section__center pb__60">
      <h2>Real-world examples of our unique capabilities</h2>
      <p>
        AI is the broader concept of machines being able to carry out
        tasks in a way that would normally require human intelligence.
      </p>
    </div>
  </div>
  {/* real head */}
  <div className="row g-4 justify-content-center align-items-center">
    {/* col grid */}

    {studiesData.slice(0, 6).map((itm) => (
      <div key={itm.id} className="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
        <BlogTwoCard itm={itm} />
      </div>
    ))}
  </div>
  {/* case Studies */}
  <div className="case__btn mt-4">
    <Link href="/studies-two" className="cmn--btn">
      <span>See All Case Studies</span>
    </Link>
  </div>
  {/* case Studies */}
</div>
{/* container */}

{/* element */}
<div className="include__elements">
  <Image src={include_element} alt="include" className="img-fluid" />
</div>
<div className="include__blumb">
  <Image src={blumb} alt="include" className="img-fluid" />
</div>
<div className="include__blumb2">
  <Image src={blumb} alt="include" className="img-fluid" />
</div>
<div className="include__real">
  <Image src={real} alt="include" className="img-fluid" />
</div>
{/* element */}
</section>

    <section className="success__story bg__white pt-120 pb-120">
      {/* container */}
      <div className="container-fluid p-0">
        <div className="row justify-content-center">
          {/* col */}
          <div className="offset-2 col-xxl-3 col-xl-12">
            <div className="success__content">
              <div className="section__header">
                <h2 className="wow fadeInUp" data-wow-duration="1.2s">
                  We highlight success stories and machine learning
                </h2>
                <p className="pb__20 wow fadeInDown" data-wow-duration="1.5s">
                  AI is the broader concept of machines being able to perform
                  tasks that would normally require human intelligence, such as
                  visual perception, speech recognition, and language
                  translation.
                </p>
                <p className="wow fadeInUp" data-wow-duration="1.9s">
                  ML, on the other hand, is a specific subfield of AI that is
                  focused on the development of algorithms
                </p>
              </div>
            </div>
          </div>
          {/* col */}
          <div className="col-xxl-7 col-xl-12">
            <div className="success__story__wrap position-relative">
              <Slider {...settings} ref={sliderRef}>
                <div className="success__stry__item">
                  <div className="thumb">
                    <Image src={re1} alt="img" className="img-fluid" />
                  </div>
                  <div className="content">
                    <h4>AI Antibiotics</h4>
                    <p>
                      Lorem Ipsum is simply dummy text of the printing and
                      typesetting industry...
                    </p>
                    <Link href="/studies-five">
                      <span>Read More</span>
                      <span className="icon">
                        <i className="material-symbols-outlined">east</i>
                      </span>
                    </Link>
                  </div>
                </div>
                <div className="success__stry__item">
                  <div className="thumb">
                    <Image src={re2} alt="img" className="img-fluid" />
                  </div>
                  <div className="content">
                    <h4>classNameifying listing AI photos</h4>
                    <p>
                      Lorem Ipsum is simply dummy text of the printing and
                      typesetting industry...
                    </p>
                    <Link href="/studies-five">
                      <span>Read More</span>
                      <span className="icon">
                        <i className="material-symbols-outlined">east</i>
                      </span>
                    </Link>
                  </div>
                </div>
                <div className="success__stry__item">
                  <div className="thumb">
                    <Image src={re4} alt="img" className="img-fluid" />
                  </div>
                  <div className="content">
                    <h4>ICT AI Performance</h4>
                    <p>
                      Lorem Ipsum is simply dummy text of the printing and
                      typesetting industry...
                    </p>
                    <Link href="/studies-five">
                      <span>Read More</span>
                      <span className="icon">
                        <i className="material-symbols-outlined">east</i>
                      </span>
                    </Link>
                  </div>
                </div>
                <div className="success__stry__item">
                  <div className="thumb">
                    <Image src={re1} alt="img" className="img-fluid" />
                  </div>
                  <div className="content">
                    <h4>AI Antibiotics</h4>
                    <p>
                      Lorem Ipsum is simply dummy text of the printing and
                      typesetting industry...
                    </p>
                    <Link href="/studies-five">
                      <span>Read More</span>
                      <span className="icon">
                        <i className="material-symbols-outlined">east</i>
                      </span>
                    </Link>
                  </div>
                </div>
                <div className="success__stry__item">
                  <div className="thumb">
                    <Image src={re2} alt="img" className="img-fluid" />
                  </div>
                  <div className="content">
                    <h4>classNameifying listing AI photos</h4>
                    <p>
                      Lorem Ipsum is simply dummy text of the printing and
                      typesetting industry...
                    </p>
                    <Link href="/studies-five">
                      <span>Read More</span>
                      <span className="icon">
                        <i className="material-symbols-outlined">east</i>
                      </span>
                    </Link>
                  </div>
                </div>
                <div className="success__stry__item">
                  <div className="thumb">
                    <Image src={re4} alt="img" className="img-fluid" />
                  </div>
                  <div className="content">
                    <h4>ICT AI Performance</h4>
                    <p>
                      Lorem Ipsum is simply dummy text of the printing and
                      typesetting industry...
                    </p>
                    <Link href="/studies-five">
                      <span>Read More</span>
                      <span className="icon">
                        <i className="material-symbols-outlined">east</i>
                      </span>
                    </Link>
                  </div>
                </div>
              </Slider>

              {/* Slider Navigation */}
              <SliderNavigation sliderRef={sliderRef} />
            </div>
          </div>
          {/* col */}
        </div>
      </div>
      {/* container */}
      {/* elements */}
      <div className="d__light">
        <Image src={d3bulp} alt="light" className="img-fluid" />
      </div>
      <div className="d__ball">
        <Image src={ball_element} alt="light" className="img-fluid" />
      </div>
      <div className="d__round">
        <Image src={ball3d} alt="light" className="img-fluid" />
      </div>
      {/* elements */}
    </section>

    <section className="capabilities__section case__trough bgsection pt-120 pb-120">
      {/* shpae */}
      <div className="redlight">
        <Image src={redlight} alt="redliht" />
      </div>
      {/* shpae */}
      {/* container */}
      <div className="container">
        {/* section header */}
        <div className="capabilites__header pb__60">
          <div
            className="section__header section__center wow fadeInUp"
            data-wow-duration="2s"
          >
            <h2>Differentiating through case studies</h2>
            <p>
              AI is the broader concept of machines being able to carry out
              tasks in a way that would normally require human intelligence.
            </p>
          </div>
        </div>
        {/* section header */}
        {/* capabilites warap */}
        <div className="row mt__customcase g-4 justify-content-center">
          <div
            className="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6 wow fadeInDown"
            data-wow-duration="2.7s"
          >
            <div className="capa__case__box small__space__capa">
              <div className="capabilities__items">
                <Link href="/studies-three" className="thumb">
                  <Image src={c1} alt="capabi" />
                </Link>
                <div className="content">
                  <Link href="/" className="cmn--btn capabilites__btn">
                    <span>Technology</span>
                  </Link>
                  <h4>
                    <Link href="/studies-three">AI Antibiotics</Link>
                  </h4>
                </div>
              </div>
              <div className="capabilities__items">
                <Link href="/studies-three" className="thumb">
                  <Image src={c4} alt="capabi" />
                </Link>
                <div className="content">
                  <Link href="/" className="cmn--btn capabilites__btn">
                    <span>Robot</span>
                  </Link>
                  <h4>
                    <Link href="/studies-three">Education Al Studies</Link>
                  </h4>
                </div>
              </div>
            </div>
          </div>
          <div
            className="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6 wow fadeInDown"
            data-wow-duration="2.5s"
          >
            <div className="capa__case__boxmiddle">
              <div className="capabilities__items">
                <Link href="/studies-three" className="thumb">
                  <Image src={c2} alt="capabi" />
                </Link>
                <div className="content">
                  <Link
                    href="javacript:void(0)"
                    className="cmn--btn capabilites__btn"
                  >
                    <span>Machine</span>
                  </Link>
                  <h4>
                    <Link href="/studies-three">classNameifying Al Photos</Link>
                  </h4>
                </div>
              </div>
              <div className="capabilities__items">
                <Link href="/studies-three" className="thumb">
                  <Image src={c5} alt="capabi" />
                </Link>
                <div className="content">
                  <Link href="/" className="cmn--btn capabilites__btn">
                    <span>Technology</span>
                  </Link>
                  <h4>
                    <Link href="/studies-three">Army Defence Al & Ml</Link>
                  </h4>
                </div>
              </div>
            </div>
          </div>
          <div
            className="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 wow fadeInDown"
            data-wow-duration="2.s"
          >
            <div className="capa__case__box3 capa__flex__small">
              <div className="capabilities__items">
                <Link href="/studies-three" className="thumb">
                  <Image src={c3} alt="capabi" />
                </Link>
                <div className="content">
                  <Link href="/" className="cmn--btn capabilites__btn">
                    <span>Robot</span>
                  </Link>
                  <h4>
                    <Link href="/studies-three">Industry Labor Machine</Link>
                  </h4>
                </div>
              </div>
              <div className="capabilities__items">
                <Link href="/studies-three" className="thumb">
                  <Image src={c6} alt="capabi" />
                </Link>
                <div className="content">
                  <Link
                    href="javacript:void(0)"
                    className="cmn--btn capabilites__btn"
                  >
                    <span>Machine</span>
                  </Link>
                  <h4>
                    <Link href="/studies-three">ACT Al Performance</Link>
                  </h4>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="case__btn wow fadeInDown" data-wow-duration="2s">
          <Link href="/studies-three" className="cmn--btn">
            <span>See All Case Studies</span>
          </Link>
        </div>
        {/* capabilites warap */}
      </div>
      {/* container */}
      {/* elelments */}
      <div className="global__mask">
        <Image src={global__mask} alt="img" />
        <div className="light__element1">
          <Image src={redlight} alt="light" />
        </div>
      </div>
      <div className="case__rocket">
        <Image src={caserobot} alt="img" className="img-fluid" />
      </div>
      <div className="light__redb">
        <Image src={redlight} alt="light" />
      </div>
      <div className="light__redt">
        <Image src={redlight} alt="light" />
      </div>
      <div className="spring__case">
        <Image src={spricng} alt="light" />
      </div>
      {/* elelments */}
    </section>

<section className="case__trough case__different__section bgsection pt-120 pb-120">
      {/* container */}
      <div className="container">
        {/* section header */}
        <div className="capabilites__header pb__60">
          <div
            className="section__header section__center wow fadeInUp"
            data-wow-duration="2.5s"
          >
            <h2>Differentiating through case studies</h2>
            <p>
              AI is the broader concept of machines being able to carry out
              tasks in a way that would normally require human intelligence.
            </p>
          </div>
        </div>
        {/* section header */}
        {/* capabilites warap */}
        <div className="row g-4 justify-content-center">
          {studiesData.slice(0, 6).map((itm, i) => (
            <div key={itm.id} className="col-xxl-6 col-xl-6 col-lg-6">
              {/* Blog Five Card */}
              <BlogFiveCard itm={itm} index={i} />
            </div>
          ))}
        </div>
        <div className="case__btn">
          <Link href="/studies-four" className="cmn--btn">
            <span>See All Case Studies</span>
          </Link>
        </div>
        {/* capabilites warap */}
      </div>
      {/* container */}
      {/* elelments */}
      <div className="diferent__element1">
        <Image src={devided_element2} alt="img" className="img-fluid" />
      </div>
      <div className="diferent__lockyello">
        <Image src={devided_lockyello} alt="img" className="img-fluid" />
      </div>
      <div className="diferent__blump">
        <Image src={round_devided} alt="img" className="img-fluid" />
      </div>
      <div className="diferent__blump2">
        <Image src={round_devided} alt="img" className="img-fluid" />
      </div>
      {/* elelments */}
    </section>