"use client";
import serviceFourImg1 from "../../../public/assets/images/services/service-four-img-1.jpg";
import serviceFourImg2 from "../../../public/assets/images/services/service-four-img-2.jpg";
import serviceFourImg3 from "../../../public/assets/images/services/service-four-img-3.jpg";

function ServiceFour() {
  return (
    <div>
      <section className="service-four">
        <div className="container">
          <div className="service-four-title-box">
            <div className="section-five-title">
              <div
                className="section-five-title-text text-center wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <p>Popular SEO Services</p>
              </div>
              <div
                className="section-five-title-title text-center wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <h2>Grow Leads and Sales with insanely Good SEO Strategy</h2>
              </div>
            </div>
          </div>
          <div className="service-four-info-box">
            <div className="row">
              <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">
                <div
                  className="service-four-single service-four-single-one wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="service-four-tag">
                    <h6>01</h6>
                  </div>
                  <div className="service-four-single-img-box">
                    <img src={serviceFourImg1.src} alt="service-four-img-1" />
                  </div>
                  <div className="service-four-title">
                    <h4>Digital Marketing</h4>
                  </div>
                  <div className="service-four-text">
                    <p>
                      Sed perspiciatis unde omnis dolore aperiam eaque
                      quinventore
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">
                <div
                  className="service-four-single service-four-single-two wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <div className="service-four-tag">
                    <h6>02</h6>
                  </div>
                  <div className="service-four-single-img-box">
                    <img src={serviceFourImg2.src} alt="service-four-img-2" />
                  </div>
                  <div className="service-four-title">
                    <h4>SEO Analytics</h4>
                  </div>
                  <div className="service-four-text">
                    <p>
                      At vero eos et accusamus iusto odio dignissimos ducimus
                      blanditiis
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">
                <div
                  className="service-four-single service-four-single-three wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                >
                  <div className="service-four-tag">
                    <h6>03</h6>
                  </div>
                  <div className="service-four-single-img-box">
                    <img src={serviceFourImg3.src} alt="service-four-img-3" />
                  </div>
                  <div className="service-four-title">
                    <h4>Social Marketing</h4>
                  </div>
                  <div className="service-four-text">
                    <p>
                      Praesentium voluptate deleniti atque corrupti quos dolores
                      et quas
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default ServiceFour;
