import React from "react";
import Link from "next/link";
import {Swiper, Navigation, Pagination,Autoplay } from 'swiper';
Swiper.use([Navigation, Pagination,Autoplay]);
export default function Csr() {
    new Swiper('.carousel-gallery-csr .mySwiper', {
        effect: 'slide',
        speed: 500,
        slidesPerView: 1,
        spaceBetween: 20,
        simulateTouch: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        pagination: {
          el: '.carousel-gallery-csr .swiper-pagination',
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
      const scrollPage = () => {
        window.scrollTo({ top: 900, behavior: 'smooth' })
      };
    return (
      <>
    <section className="site-hero overlay justify-content-center align-items-center" data-stellar-background-ratio="0.5">
        <div className="bg-section">
            <img src="/images/csr.jpg" alt="" title=""/>
            <h1 className="bg-text heading-employee">CSR</h1>
        </div>
        <div className="container">
            <div className="row site-hero-inner justify-content-center align-items-center">
                <div className="mouse-down" onClick={() => scrollPage()}>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                </div>
            </div>
        </div>
    </section>
    <main className="site-main">
    <section className="home-section-alt position-relative">
            <div className="container">
                <div className="row bod-block">
                    <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div className="heading-section">
                                    <h2 className="home-section-title">CSR</h2>
                                    <p className="text-left p-text mb-3">Give a man a fish and you feed him for a day. Teach
                                        him
                                        how to fish and you feed him for his lifetime’ is a popular Italian proverb. It
                                        is also the philosophy behind Formula Group’s CSR activities. Our CSR activities
                                        are aimed at the betterment of the environment and the society. Enablement of
                                        the underprivileged is the core pillar of our efforts. This can be seen through
                                        our various engagements with different communities wherein our entire company
                                        actively becomes a part of.
                                    </p>
                                    <p className="text-left p-text mb-3">Empathy, which is one of our core values, is also
                                        highlighted in our CSR efforts. The corporate social responsibility culture at
                                        formula group is one that is inclusive, democratic and participatory. The focus
                                        is not only on the external impact of CSR, on the larger community, but also the
                                        internal impact that pro-social behavior has on each individual team member.
                                        Thus, team member involvement is a major part of Formulas CSR policy. The idea
                                        is to ‘Lead by Example.
                                    </p>
                                    <p className="text-left p-text mb-3">Our team proactively steps forward to help the
                                        needy and
                                        bring smiles on the faces of the children through arts and Crafts, story
                                        -telling and reciting poems. Formula team members volunteer programs enjoy
                                        greater employee satisfaction, higher morale and, as a result, greater
                                        productivity and profitability.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                       <div className="carousel-gallery-csr">
                            <div className="swiper-container mySwiper">
                                <div className="swiper-wrapper">
                                    <div className="swiper-slide">
                                        <div className="image csr_ngo">
                                            <div className="overlay">
                                                <em className="mdi mdi-magnify-plus"></em>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="swiper-slide">
                                        <div className="image csr_ngo2">
                                            <div className="overlay">
                                                <em className="mdi mdi-magnify-plus"></em>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="swiper-slide">
                                        <div className="image csr_ngo3">
                                            <div className="overlay">
                                                <em className="mdi mdi-magnify-plus"></em>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="swiper-slide">
                                        <div className="image csr_ngo4">
                                            <div className="overlay">
                                                <em className="mdi mdi-magnify-plus"></em>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="swiper-slide">
                                        <div className="image csr_ngo5">
                                            <div className="overlay">
                                                <em className="mdi mdi-magnify-plus"></em>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="swiper-slide">
                                        <div className="image csr_ngo6">
                                            <div className="overlay">
                                                <em className="mdi mdi-magnify-plus"></em>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="swiper-button-next"></div>
                                <div className="swiper-button-prev"></div>
                                <div className="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>

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

        <section className="about-section-alt csr-section">
            <div className="container">
                <div className="row bod-block">

                    <div className="col-md-3 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div>
                                    <a href="https://www.navjyoti.org.in/" target="_blank" rel="noreferrer">
                                        <img className="img-fluid pad-30" alt="..." src="/images/navjyoti-logo.png"/>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-md-9 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div className="heading-section">
                                    <h2 className="home-section-title">Navjyoti India Foundation</h2>
                                    <p className="text-left p-text">Remedial Education Program to provide children from
                                        weaker
                                        sections, access to education with a focus on quality and retention. We could
                                        make a direct impact on a total of 375 girls who were trained and encouraged to
                                        become self-dependent through this programme with support of Formula Group.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-md-3 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div>
                                    <a href="http://www.shikhar-ngo.org/" target="_blank"  rel="noreferrer">
                                        <img className="img-fluid pad-30" alt="..." src="/images/shikar-logo.png"/>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-md-9 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div className="heading-section">
                                    <h2 className="home-section-title">NGO Shikhar</h2>
                                    <p className="text-left p-text">Vocational Training Program for young girls - A
                                        programme to
                                        promote entrepreneurship for self-help groups from economically weaker sections
                                        of society was launched in select districts of South Delhi. This will provide
                                        work so that they become self-dependent / sufficient and also to connect them
                                        with the mainstream. Over the last three years more than 600 women have been
                                        able to utilise the benefit of this program and became self dependent.</p>
                                </div>
                            </div>
                        </div>
                    </div> 

                    <div className="col-md-3 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div>
                                    <a href="http://www.shikhar-ngo.org/" target="_blank"  rel="noreferrer">
                                        <img className="img-fluid pad-30" alt="..." src="/images/sapna-logo.png"/>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-md-9 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div className="heading-section">
                                    <h2 className="home-section-title">NGO Sapna</h2>
                                    <p className="text-left p-text">Home for Sick and Public Health Care Services - Over the
                                        years
                                        the NGO has treated more than 55,000 disadvantaged people at our institutional
                                        facility in Alwar, provided palliative care to hundreds of chronically sick and
                                        injured-many with permanent sequelae, and sheltered the homeless. Sapna has
                                        provided resources for 630 surgeries and post-surgical procedures at Safdarjung
                                        Hospital, taken care of the needs of people suffering from chronic renal
                                        conditions and facilitated heart-surgeries for 43 children.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-md-3 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div>
                                    <a href="https://soodcharityfoundation.org/" target="_blank"  rel="noreferrer">
                                        <img className="img-fluid pad-30" alt="..." src="/images/sood-logo.png"/>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-md-9 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div className="heading-section">
                                    <h2 className="home-section-title">Sood Charity Foundation</h2>
                                    <p className="text-left p-text">The NGO founded by Actor and Philanthropist, Sonu Sood
                                        has
                                        become a household name and a support system for countless families during the
                                        Pandemic. The Sood Charity Foundation is providing state-of-the-art healthcare,
                                        education, employment, and technology advancements. The NGO is trying to
                                        initiate a movement that encourages people to join hands towards serving
                                        humanity. Sood Charity Foundation has helped thousands of people across the
                                        world. The constant efforts of this organization is to raise awareness and
                                        provide care for those in need.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-md-3 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div>
                                    <a href="https://www.earthsaviours.in/" target="_blank"  rel="noreferrer">
                                        <img className="img-fluid pad-30" alt="..." src="/images/tesf-logo.png"/>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-md-9 mb-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div className="heading-section">
                                    <h2 className="home-section-title">The Earth Saviours Foundation</h2>
                                    <p className="text-left p-text">Founded by Ravi Kalra, also known as the “No Honking Man
                                        of
                                        India”, Earth Saviors NGO goes on roads in search of abandoned senior citizens
                                        and mentally disabled people and brings them to the shelter home where they are
                                        provided with free of charge accommodation, food and medical care. Presently
                                        more than five hundred such less privileged people are living permanently at
                                        Kalra’s shelter home.</p>
                                </div>
                            </div>
                        </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 contact"><Link href="/contact-us">Connect us</Link></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="vl"></div>
        </section>
        </main>
    </>
  );
}
