import React from "react";
import Link from "next/link";
import {Swiper, Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
export default function Csr() {
    new Swiper('.carousel-gallery .swiper-container', {
        effect: 'slide',
        speed: 900,
        slidesPerView: 5,
        spaceBetween: 20,
        simulateTouch: true,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        pagination: {
          el: '.carousel-gallery .swiper-pagination',
          clickable: true
        },
        breakpoints: {
      
          320: {
            slidesPerView: 1,
            spaceBetween: 5
          },
    
          425: {
            slidesPerView: 2,
            spaceBetween: 10
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20
          },
          1200: {
            slidesPerView: 5,
            spaceBetween: 20
          }
          
        }
      });
    return (
      <>
        {/* <section className="site-hero overlay justify-content-center align-items-center awards"
        data-stellar-background-ratio="0.5">
        <div className="container">
            <div className="row site-hero-inner justify-content-center align-items-center">
                <div className="col-md-10 text-center" data-aos="fade-up">
                    <h1 className="heading">Awards & Milestone</h1>
                   <nav aria-label="breadcrumb">
                        <ol className="breadcrumb site-breadcrumb fg-breadcrumb">
                            <li className="breadcrumb-item"><a href="/">Home</a><i
                                    className="fa fa-angle-double-right mx-2" aria-hidden="true"></i></li>
                            <li className="breadcrumb-item active" aria-current="page">Awards & Milestone</li>
                        </ol>
                    </nav>
                </div>

                <div className="mouse-down">
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                </div>
            </div>
        </div>

        <a className="mouse smoothscroll" href="#next">
            <div className="mouse-icon">
                <span className="mouse-wheel"></span>
            </div>
        </a>
    </section>
<main className="site-main">
    <section className="home-section-alt position-relative">
            <div className="container">
                <div className="heading-section aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                    <h2 className="home-section-title">Awards and Milestone</h2>
                    <p className="text-left p-text mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
                        iaculis dui aliquam congue lobortis. Suspendisse nec tristique nunc, ut ornare sapien.
                        Pellentesque ut tincidunt leo. Mauris a semper augue. Proin vel pulvinar neque, et tincidunt
                        leo. Vestibulum convallis est ut turpis fermentum viverra sed quis felis. Aliquam quis tellus
                        at.</p>
                </div>
                <div className="row bod-block">
                    <div className="col-md-12">
                        <div className="award">
                            <div className="timeline">

                                <div className="timeline-item left aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                    <div className="timeline-text">
                                        <div className="row">
                                            <div className="col-md-4 ">
                                                <img className="img-fluid" src="images/awards-1.jpg"/>
                                            </div>                                            
                                            <div className="col-md-8 award-text-section-left">
                                                <div className="timeline-date">2004</div>
                                                <div className="award-heading">
                                                    <h2 className="award-title">Services</h2>
                                                    <p className="text-left p-text">Lorem ipsum dolor sit amet elit. Aliquam
                                                        odio dolor, id luctus erat
                                                        sagittis non. Ut blandit semper pretium.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="timeline-item right aos-init aos-animate" data-aos="fade-up"
                                    data-aos-duration="500">
                                    <div className="timeline-text">
                                        <div className="row">
                                            <div className="col-md-8 order-md-1 order-2 award-text-section-right">
                                                <div className="timeline-date">2004</div>
                                                <div className="award-heading">
                                                    <h2 className="award-title">Awards & Milestone</h2>
                                                    <p className="text-left p-text">Lorem ipsum dolor sit amet elit. Aliquam
                                                        odio dolor, id luctus erat
                                                        sagittis non. Ut blandit semper pretium.</p>
                                                </div>
                                            </div>

                                            <div className="col-md-4 order-md-2 order-1">
                                                <img className="img-fluid" src="images/awards-1.jpg"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="timeline-item left aos-init aos-animate" data-aos="fade-up"
                                    data-aos-duration="500">
                                    <div className="timeline-text">
                                        <div className="row">
                                            <div className="col-md-4 ">
                                                <img className="img-fluid" src="images/awards-1.jpg"/>
                                            </div>                                            
                                            <div className="col-md-8 award-text-section-left">
                                                <div className="timeline-date">2004</div>
                                                <div className="award-heading">
                                                    <h2 className="award-title">Awards & Milestone</h2>
                                                    <p className="text-left p-text">Lorem ipsum dolor sit amet elit. Aliquam
                                                        odio dolor, id luctus erat
                                                        sagittis non. Ut blandit semper pretium.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="timeline-item right aos-init aos-animate" data-aos="fade-up"
                                    data-aos-duration="500">
                                    <div className="timeline-text">
                                        <div className="row">
                                            <div className="col-md-8 order-md-1 order-2 award-text-section-right">
                                                <div className="timeline-date">2004</div>
                                                <div className="award-heading">
                                                    <h2 className="award-title">Awards & Milestone</h2>
                                                    <p className="text-left p-text">Lorem ipsum dolor sit amet elit. Aliquam
                                                        odio dolor, id luctus erat
                                                        sagittis non. Ut blandit semper pretium.</p>
                                                </div>
                                            </div>

                                            <div className="col-md-4 order-md-2 order-1">
                                                <img className="img-fluid" src="images/awards-1.jpg"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="timeline-item left aos-init aos-animate" data-aos="fade-up"
                                    data-aos-duration="500">
                                    <div className="timeline-text">
                                        <div className="row">
                                            <div className="col-md-4 ">
                                                <img className="img-fluid" src="images/awards-1.jpg"/>
                                            </div>                                            
                                            <div className="col-md-8 award-text-section-left">
                                                <div className="timeline-date">2004</div>
                                                <div className="award-heading">
                                                    <h2 className="award-title">Awards & Milestone</h2>
                                                    <p className="text-left p-text">Lorem ipsum dolor sit amet elit. Aliquam
                                                        odio dolor, id luctus erat
                                                        sagittis non. Ut blandit semper pretium.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="timeline-item right aos-init aos-animate" data-aos="fade-up"
                                    data-aos-duration="500">
                                    <div className="timeline-text">
                                        <div className="row">
                                            <div className="col-md-8 order-md-1 order-2 award-text-section-right">
                                                <div className="timeline-date">2004</div>
                                                <div className="award-heading">
                                                    <h2 className="award-title">Awards & Milestone</h2>
                                                    <p className="text-left p-text">Lorem ipsum dolor sit amet elit. Aliquam
                                                        odio dolor, id luctus erat
                                                        sagittis non. Ut blandit semper pretium.</p>
                                                </div>
                                            </div>

                                            <div className="col-md-4 order-md-2 order-1">
                                                <img className="img-fluid" src="images/awards-1.jpg"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>




                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section className="career-section-alt">
            <div className="container aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                <div className="heading-section">
                    <h2 className="home-section-title">gallery</h2>
                </div>
                <div className="carousel-gallery">
                    <div className="swiper-container">
                        <div className="swiper-wrapper">
                            <div className="swiper-slide">
                                <a href="images/Formula-Party_1.png" data-fancybox="gallery">
                                    <div className="image party_1">
                                        <div className="overlay">
                                            <em className="mdi mdi-magnify-plus"></em>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a href="images/Formula-Party_2.png" data-fancybox="gallery">
                                    <div className="image party_2">
                                        <div className="overlay">
                                            <em className="mdi mdi-magnify-plus"></em>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a href="images/Formula-Party_3.png" data-fancybox="gallery">
                                    <div className="image party_3">
                                        <div className="overlay">
                                            <em className="mdi mdi-magnify-plus"></em>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a href="images/Formula-Party_4.png" data-fancybox="gallery">
                                    <div className="image party_4">
                                        <div className="overlay">
                                            <em className="mdi mdi-magnify-plus"></em>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a href="images/Formula-Party_5.png" data-fancybox="gallery">
                                    <div className="image party_5">
                                        <div className="overlay">
                                            <em className="mdi mdi-magnify-plus"></em>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a href="images/Formula-Party_6.png" data-fancybox="gallery">
                                    <div className="image party_6">
                                        <div className="overlay">
                                            <em className="mdi mdi-magnify-plus"></em>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div className="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </section>

       
        <section className="home-section-alt1">
            <div className="container">
                <div className="home-section-content">
                    <div className="row bod-block">
                        <div className="col-md-12 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                            <div className="abt-org-col">
                                <div className="abt-org-col-text">
                                    <p className="businessNeed">Not sure which solution fits your business needs?</p>
                                    <button className="btn btn-primary" type="submit">Contact us</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="vl"></div>
        </section>
        </main>
        */}
    </>
  );
}
