export default function SkillHomeTwo() {
  return (
    <section className="mtskill__area pt-120 pb-110 p-relative">
      <div className="container">
        <div className="row">
          <div className="col-lg-7">
            <div className="mt-section-content mb-50 mr-90">
              <h2 className="mt-section-title">
                Future with <br />
                strong values
              </h2>
              <p>
                our foundation is built on unwavering values that guide every project we <br />
                undertake. We believe in innovation, integrity.
              </p>
            </div>
          </div>

          <div className="col-lg-5">
            <div className="mtskill">

              {/* Item 1 */}
              <div className="mtskill__item mb-30">
                <h6>Integrity & Transparency</h6>
                <span
                  className="progress-count"
                  style={{ left: "calc(90% - 15px)" }}
                >
                  90%
                </span>
                <div className="fix">
                  <div className="progress">
                    <div
                      className="progress-bar"
                      role="progressbar"
                      data-width="90%"
                      aria-valuenow={90}
                      aria-valuemin={0}
                      aria-valuemax={100}
                      style={{
                        width: "90%",
                        visibility: "visible",
                        animationDuration: "1s",
                        animationDelay: "0.3s",
                        animationName: "slideInLeft",
                      }}
                    ></div>
                  </div>
                </div>
              </div>

              {/* Item 2 */}
              <div className="mtskill__item mb-30">
                <h6>Quality & Excellence</h6>
                <span
                  className="progress-count"
                  style={{ left: "calc(85% - 15px)" }}
                >
                  85%
                </span>
                <div className="fix">
                  <div className="progress">
                    <div
                      className="progress-bar"
                      role="progressbar"
                      data-width="85%"
                      aria-valuenow={85}
                      aria-valuemin={0}
                      aria-valuemax={100}
                      style={{
                        width: "85%",
                        visibility: "visible",
                        animationDuration: "1s",
                        animationDelay: "0.3s",
                        animationName: "slideInLeft",
                      }}
                    ></div>
                  </div>
                </div>
              </div>

              {/* Item 3 */}
              <div className="mtskill__item mb-30">
                <h6>Client-Centric Approach</h6>
                <span
                  className="progress-count"
                  style={{ left: "calc(95% - 15px)" }}
                >
                  95%
                </span>
                <div className="fix">
                  <div className="progress">
                    <div
                      className="progress-bar"
                      role="progressbar"
                      data-width="95%"
                      aria-valuenow={95}
                      aria-valuemin={0}
                      aria-valuemax={100}
                      style={{
                        width: "95%",
                        visibility: "visible",
                        animationDuration: "1s",
                        animationDelay: "0.3s",
                        animationName: "slideInLeft",
                      }}
                    ></div>
                  </div>
                </div>
              </div>

              {/* Item 4 */}
              <div className="mtskill__item mb-30">
                <h6>Respect & Inclusivity</h6>
                <span
                  className="progress-count"
                  style={{ left: "calc(75% - 15px)" }}
                >
                  75%
                </span>
                <div className="fix">
                  <div className="progress">
                    <div
                      className="progress-bar"
                      role="progressbar"
                      data-width="75%"
                      aria-valuenow={75}
                      aria-valuemin={0}
                      aria-valuemax={100}
                      style={{
                        width: "75%",
                        visibility: "visible",
                        animationDuration: "1s",
                        animationDelay: "0.3s",
                        animationName: "slideInLeft",
                      }}
                    ></div>
                  </div>
                </div>
              </div>

              {/* Item 5 */}
              <div className="mtskill__item mb-30">
                <h6>Legacy & Impact</h6>
                <span
                  className="progress-count"
                  style={{ left: "calc(98% - 15px)" }}
                >
                  98%
                </span>
                <div className="fix">
                  <div className="progress">
                    <div
                      className="progress-bar"
                      role="progressbar"
                      data-width="98%"
                      aria-valuenow={98}
                      aria-valuemin={0}
                      aria-valuemax={100}
                      style={{
                        width: "98%",
                        visibility: "visible",
                        animationDuration: "1s",
                        animationDelay: "0.3s",
                        animationName: "slideInLeft",
                      }}
                    ></div>
                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>
    </section>
  );
}
