import React from "react";

const AboutService = () => {
    return (
        <section className="about-service section-space">
            <div className="container">
                <div className="row align-items-center">
                    <div className="col-lg-6">
                        <div className="about-image-stack p-relative">
                            {/* Experience Box */}
                            {/* <div className="experience-box animate-bounce-y">
                                <h3>37+</h3>
                                <span>Years Experience</span>
                            </div> */}

                            {/* Background Image */}
                            <div className="main-img-wrap">
                                <img src="/assets/images/careers/1/large-img.webp" alt="Office Meeting" />
                            </div>

                            {/* Foreground Curved Image */}
                            <div className="curved-img-wrap">
                                <img src="/assets/images/careers/1/small-img.webp" alt="Collaborative Work" />
                            </div>

                            {/* Decorative Dots */}
                            <div className="dots-shape">
                                <img src="/assets/imgs/shapes/shape-6.png" alt="dots" />
                            </div>
                        </div>
                    </div>

                    <div className="col-lg-6">
                        <div className="content-area pl-60">
                            <div className="sec-title-wrapper mb-30">
                                <div className="sec-title mb-4">
                                    <div className="sec-title__shape"></div>
                                    <h6 className="sec-title__tagline">Welcome to Your Next Big Opportunity</h6>
                                    <h3 className="sec-title__title">Why Join Metatroncube Software Solutions?</h3>
                                </div>
                                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                                <p className="section-desc mb-2">
                                    <b>Be part of a dynamic team where innovation, growth, and impact come together.</b>
                                </p>
                            </div>

                            <div className="single-format-content mb-20">
                                <div className="format-row d-flex align-items-start gap-4">
                                    {/* <div className="small-feature-img">
                                        <img src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
                                    </div> */}
                                    <div className="feature-bullets">
                                        <div className="bullet-item d-flex align-items-center">

                                            <p>At Metatroncube Software Solutions, we don’t just build digital solutions—we build dreams. Founded by a passionate team, our mission is to simplify complex problems and deliver results that exceed expectations.</p>
                                        </div>
                                        <div className="bullet-item d-flex align-items-center">

                                            <p>Here We believe in fostering a culture where every voice matters. Whether you’re a problem-solver, visionary, or tech wizard, there’s a place for you here to grow and make a real impact.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="btn-wrapper">
                                <a href="/about-us" className="about-more-btn">
                                    <span>ABOUT MORE</span>
                                    <div className="icon-circle">
                                        <i className="fa-solid fa-chevron-right"></i>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    );
};

export default AboutService;