import React from 'react';

const CaseStudy = () => {
    const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        arrows: false,
        responsive: [
            {
                breakpoint: 991,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 767,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    };

    return (
        <div className="case1-section-area sp1 pb-0" id="portfolio">
            <div className="case-works-section-area">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">
                            <div className="others-widget-area">
                                <div className="row align-items-center">
                                    <div className="col-lg-4">
                                        <div className="card-boxarea box1" data-aos="zoom-in" data-aos-duration="800">
                                            <div className="div text-end">
                                                <h3>01</h3>
                                            </div>
                                            <div className="content-area">
                                                <a href="#">Discovery Consultation</a>
                                                <div className="space14"></div>
                                                <p>With our intuitive interface and robust features, you buy, sell.</p>
                                            </div>
                                        </div>
                                        <div className="space30"></div>
                                        <div className="card-boxarea box2" data-aos="zoom-in" data-aos-duration="900">
                                            <div className="content-area">
                                                <a href="#">Customized IT Strategy</a>
                                                <div className="space14"></div>
                                                <p>Plus, our commitment to the security means that PayCoin.</p>
                                            </div>
                                            <div className="div text-end">
                                                <h3>02</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-lg-4">
                                        <div className="images" data-aos="zoom-in" data-aos-duration="1000">
                                            <img loading="lazy" src="/assets/img/elements/elements43.png" alt="" className="elements43" />
                                            <img loading="lazy" src="/assets/img/elements/elements27.png" alt="" className="elements27" />
                                            <img loading="lazy" src="/assets/img/elements/elements30.png" alt="" className="elements30" />
                                            <img loading="lazy" src="/assets/img/elements/elements39.png" alt="" className="elements39" />
                                            <div className="img1">
                                                <img loading="lazy" src="/assets/img/all-images/case/case-img4.png" alt="" />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-lg-4">
                                        <div className="card-boxarea box3" data-aos="zoom-in" data-aos-duration="800">
                                            <div className="div">
                                                <h3>03</h3>
                                            </div>
                                            <div className="content-area2">
                                                <a href="#">Quality Assurance</a>
                                                <div className="space14"></div>
                                                <p>Trusted partner in the world of crypto trading Join us today.</p>
                                            </div>
                                        </div>
                                        <div className="space30"></div>
                                        <div className="card-boxarea box4" data-aos="zoom-in" data-aos-duration="1000">
                                            <div className="content-area2">
                                                <a href="#">24/7 Support</a>
                                                <div className="space14"></div>
                                                <p>Resources designed to help navigate best the dynamic</p>
                                            </div>
                                            <div className="div">
                                                <h3>04</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default CaseStudy;