{"size": 48792, "ext": "js", "max_stars_repo_path": ".history/src/pages/Migration-Modernization/InfraSturctureTransformation_20200528110715.js", "max_stars_repo_name": "mustafa-synectiks/jithen-site-changes", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": ".history/src/pages/Migration-Modernization/InfraSturctureTransformation_20200528110715.js", "max_issues_repo_name": "mustafa-synectiks/jithen-site-changes", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": ".history/src/pages/Migration-Modernization/InfraSturctureTransformation_20200528110715.js", "max_forks_repo_name": "mustafa-synectiks/jithen-site-changes", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 36.4119402985, "max_line_length": 527, "alphanum_fraction": 0.4264428595}
import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import { FaBars } from 'react-icons/fa';
import Layout from '../../components/layout';
// import CloudCommon from '../../images/CloudCommon.png';
import HybridCloud from '../../images/Hybrid/Hybrid Cloud.jpg';
import hybridIma from '../../images/Hybrid/HybridCloud.jpg';
import {
  TabContent,
  TabPane,
  Nav,
  NavItem,
  NavLink,
  Row,
  Col,
  Collapse,
  NavbarToggler,
  Navbar
} from 'reactstrap';
import classnames from 'classnames';
import { AiOutlineMenu, AiOutlineClose } from 'react-icons/ai';
import styled from 'styled-components';
import mcit from '../../images/modernization/Modernize and Consolidate IT Infrastructure.jpg';
import ms4 from '../../images/Microservices/Microservice_7.png';
import swd from '../../images/modernization/swd.png';
import circle from '../../images/modernization/Application Transformation.svg';
import ds from '../../images/Hybrid/Discovery&Assessment.png';
import ts from '../../images/Hybrid/Transformation Services.png';
import EX from '../../images/Hybrid/Experience.png';
import EM from '../../images/Hybrid/Engagement Model.png';
import CS from '../../images/Hybrid/Compliance&Security.png';
import SEO from '../../components/seo.js';
import advisory from '../../images/modernization/Advisory.png';
import artifact from '../../images/modernization/Artifacts.png';
import da from '../../images/modernization/Discovery & Assessment.png';
import economics from '../../images/modernization/Economics.png';
import innovation from '../../images/modernization/Innovation.png';
import operatAuto from '../../images/modernization/Operation Automation.png';
import operate from '../../images/modernization/Operation.png';
import pay from '../../images/modernization/Pay As You Use.png';
import sd from '../../images/modernization/Software Defined.png';
import spa from '../../images/modernization/Strategic Planning & Architecture.png';

import BreadCrumbs from '../../components/Home/Breadcrumbs.js';

const Infrastructure = () => {
  const [activeTab, setActiveTab] = useState('1');
  const [collapsed, setCollapsed] = useState(true);

  const toggleNavbar = () => setCollapsed(!collapsed);
  const toggle = tab => {
    if (activeTab !== tab) setActiveTab(tab);
  };

  const [isOpen, setNav] = useState(true);
  const toggleTab = () => {
    setNav(isOpen => !isOpen);
  };
  const onTop = () => {
    window.scroll(0, 0);
  };

  return (
    <Layout>
      <Helmet>
        <meta
          name="description"
          content="The Modernize and Consolidate Data Center and Infrastructure Platform Blueprint available in Synectiks Xformation platform helps businesses roll out new IT systems and practices to meet the increased agility and price-performance demands of the digital enterprise. By following the blueprint’s and Powerful automation you can reduce workload and technology sprawl, streamline operations, and improve automation, so you can respond to the needs of the business more efficiently, quickly and cost-effectively."
        />
        <link
          rel="canonical"
          href="https://synectiks.com/infrastructure/index.html"
        />
      </Helmet>
      <HybridWrapper>
        <SEO title="Infrastructure Transformation" />
        <div className="container-fluid p-1">
          <div className="">
            <BreadCrumbs
              title="Home"
              subtitle="Migration-Modernization"
              pageTitle="Infrastructure Transformation"
            />
            <h1 className="mt-4 ml-n2">Infrastructure Transformation</h1>
          </div>
          <div className="">
            <Row className="position-relative">
              <div className="col-sm-12 col-md-12">
                <Navbar color="light" light expand="lg" className="topNav">
                  {/* <NavbarToggler onClick={toggleNavbar} className='mr-2'>
										<FaBars className='navbar-toggler-icon' />
										<span className='my-1 mx-2 close'>X</span>
									</NavbarToggler> */}
                  <AiOutlineMenu
                    onClick={toggleNavbar}
                    className="mr-2 svgcolor mb-n2"
                  />
                  <Collapse isOpen={!collapsed} navbar>
                    <Nav className="bgWhite d-flex my-2 my-md-4 w-85">
                      <NavItem className="one">
                        <NavLink
                          id="bgL"
                          className={classnames({ active: activeTab === '1' })}
                          onClick={() => {
                            toggle('1');
                            toggleTab();
                            onTop();
                          }}
                        >
                          BRIEF
                        </NavLink>
                      </NavItem>

                      <NavItem className="one">
                        <NavLink
                          id="bgLL"
                          className={classnames({ active: activeTab === '2' })}
                          onClick={() => {
                            toggle('2');
                            toggleTab();
                            onTop();
                          }}
                        >
                          GETTING STARTED
                        </NavLink>
                      </NavItem>
                      <NavItem className="one">
                        <NavLink
                          id="bgLLL"
                          className={classnames({ active: activeTab === '3' })}
                          onClick={() => {
                            toggle('3');
                            toggleTab();
                            onTop();
                          }}
                        >
                          HOW SYNECTIKS CAN HELP YOU?
                        </NavLink>
                      </NavItem>
                      <NavItem className="one">
                        <NavLink
                          id="bgLLL"
                          className={classnames({ active: activeTab === '4' })}
                          onClick={() => {
                            toggle('4');
                            toggleTab();
                            onTop();
                          }}
                        >
                          SYNECTIKS DIFFERENTIATOR
                        </NavLink>
                      </NavItem>
                    </Nav>
                  </Collapse>
                </Navbar>

                <TabContent activeTab={activeTab}>
                  <TabPane tabId="1">
                    <div>
                      <h3 className="text-left">
                        Understanding the Software Defined Transformation:{' '}
                      </h3>
                      <p className="ptext">
                        Software-defined infrastructure is the definition of
                        technical computing infrastructure entirely under the
                        control of software with no operator or human
                        intervention. It operates independent of any
                        hardware-specific dependencies and is programmatically
                        extensible”.{' '}
                      </p>
                      <h3 className="mt-4">
                        Why Software Defined Infrastructure matter in todays
                        business?
                      </h3>
                      <div className="table-responsive-md">
                        <table className="table">
                          <thead className="thead-light">
                            <tr>
                              <th scope="col">Hardware Defined</th>
                              <th scope="col">Software Defined</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>Time Consuming Manual Provisioning </td>
                              <td> Automated provisioning / De-provisioning</td>
                            </tr>
                            <tr>
                              <td>Discrete & Under-utilized </td>
                              <td>Pooled and Optimize</td>
                            </tr>
                            <tr>
                              <td>Sized upto maximum need</td>
                              <td>Elastic, Grow/Shrink when requires</td>
                            </tr>
                            <tr>
                              <td>Less than 10% Utilization</td>
                              <td>
                                Every component directly supporting business
                                objective{' '}
                              </td>
                            </tr>
                            <tr>
                              <td>Large CapEx / OpEx </td>
                              <td>Minimal CapEx, Reduced OpEx</td>
                            </tr>
                            <tr>
                              <td>Less Secure, Error prone</td>
                              <td>High Secure, resilient </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <div>
                        <p className="ptext">
                          The Capex and Opex of maintaining large, complex
                          heterogeneous data centers taxing many businesses
                          driven by legacy applications and infrastructure. To
                          maintain competitive edge in a highly dynamic market,
                          business need to re-imagine the customer experience in
                          lower economics. The challenge is that today’s
                          competitive environment is accelerating faster than
                          most conventional infrastructure can support it.
                          Business need an entirely new, cloud-native approach –
                          that’s primed for innovation and agility from the
                          ground-up. With the emergence of cloud and
                          virtualization, combined with dramatic cost reductions
                          for data center hardware, have driven an evolution to
                          large homogeneous, Hybrid IT which are comparatively
                          easy and cost effective to manage. Enterprises are
                          looking for dramatically reducing the provisioning
                          cycle for compute / storage / network and deliver the
                          scale, stability, speed and efficiency required to
                          support rapidly evolving enterprises. Software Defined
                          Infrastructure (SDI) mainly drives this
                          change. Infrastructure transformation is the first
                          technology waypoint on the cloud native approach.
                          Business need to lay the foundation for innovation by
                          forensically re-architecting the existing legacy
                          environment in support of business objectives. Whether
                          that’s controlling costs, supporting growth, driving
                          efficiency or otherwise.
                        </p>
                        <p className="ptext">
                          Forward-looking IT organizations are modernizing and
                          consolidating IT infrastructure to meet the increased
                          agility and price-performance requirements of today’s
                          on-demand applications, cloud-native services and
                          digital businesses. Innovative organizations are
                          re-architecting applications for a Hybrid IT agenda,
                          incorporating innovations such as hyper-scaling and
                          aggregated infrastructure to reduce total cost of
                          ownership improve service velocity and accelerate the
                          pace of business.
                        </p>
                      </div>
                      <div>
                        <div className="my-2 my-md-5">
                          <h4 className="text-center">
                            A Blueprint for Modernizing and Consolidating Data
                            Center and Platforms as below:
                          </h4>
                          <img
                            src={mcit}
                            alt="Modernize and Consolidate IT Infrastructure"
                            className="w-hndr mx-auto box-shadow my-2 my-md-4 "
                          />
                        </div>
                        <div className="py-2 py-md-4">
                          <h3 className=" text-center">
                            Synectiks Software Defined Reference Architecture
                          </h3>
                          <img
                            src={ms4}
                            alt="Synectiks Software Defined Reference Architecture"
                            className="w-sm-50 mx-auto box-shadow my-2 my-md-4"
                          />
                        </div>
                      </div>
                      <div className="my-2 my-md-4">
                        <div className="d-flex">
                          <div className="d-flex flex-column justify-content-around bgOrange">
                            <div className="rotate bgOrange">
                              <h6>Activities</h6>
                            </div>
                          </div>
                          <div className="d-flex flex-column flex-md-row justify-content-md-around bgBlueLight p-md-3">
                            <div className="aggregate col">
                              <div>
                                <h4 className="btn bgOrange py-0 text-light">
                                  Aggregate
                                </h4>
                              </div>
                              <div className="d-flex">
                                <div>
                                  <ul className="p-3">
                                    <li>
                                      Aggregate computing, storage, network
                                      @software layer from any public/private
                                      cloud
                                    </li>
                                    <li>Scale in/out as per need</li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div className="extend col">
                              <div>
                                <h4 className="btn bgOrange py-0 text-light">
                                  Extend
                                </h4>
                              </div>
                              <div className="d-flex">
                                <div>
                                  <ul className="p-3">
                                    <li>
                                      Develop micro service, <br /> IOT, big
                                      data quickly
                                      <br />
                                    </li>
                                    <li>Extend full proof frameworks</li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div className="devops col">
                              <div>
                                <h4 className="btn bgOrange py-0 text-light">
                                  DevOps
                                </h4>
                              </div>
                              <div className="d-flex">
                                <div>
                                  <ul className="p-3">
                                    <li>Establish build/deployment pipeline</li>
                                    <li>Establish service orchestration</li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div className="Operate col">
                              <div>
                                <h4 className="btn bgOrange py-0 text-light">
                                  Operate
                                </h4>
                              </div>
                              <div className="d-flex">
                                <div>
                                  <ul className="p-3">
                                    <li>Establish ALM</li>
                                    <li>
                                      Setup operational tools and frameworks to
                                      put your business in autopilot mode
                                    </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div className="d-flex">
                          <div className="d-flex flex-column justify-content-around bgOrange">
                            {/* <div className='rotate'>
															<h6>Activites</h6>
														</div> */}
                            <div className="rotate bgOrange">
                              <h6>Output</h6>
                            </div>
                          </div>
                          <div className="d-flex flex-column flex-md-row justify-content-md-around bgRedLight text-light px-md-3 py-md-1">
                            <div className="aggregate col">
                              <div className="d-flex">
                                <div>
                                  <ul className="p-3">
                                    <li>
                                      Automated scripts to do end to end
                                      provisioning of entire platform in minutes
                                    </li>
                                    <li>
                                      Aggregated cluster capable of deploying
                                      microservice/IOT/Big Data Application
                                    </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div className="extend col">
                              <div className="d-flex">
                                <div>
                                  <ul className="p-3">
                                    <li>
                                      Develop micro service, <br /> IOT, big
                                      data quickly
                                      <br />
                                    </li>
                                    <li>Extend full proof frameworks</li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div className="devops col">
                              <div className="d-flex">
                                <div>
                                  <ul className="p-3">
                                    <li>Establish build/deployment pipeline</li>
                                    <li>Establish service orchestration</li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div className="Operate col">
                              <div className="d-flex">
                                <div>
                                  <ul className="p-3">
                                    <li>Establish ALM</li>
                                    <li>
                                      Setup operational tools and frameworks to
                                      put your business in autopilot mode
                                    </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </TabPane>
                  <TabPane tabId="2">
                    <div>
                      <div>
                        <h3 className="text-left">
                          Getting Started To Software Defined Transformation
                        </h3>

                        <div className="confidence row my-md-5">
                          <div className="leftcol col-md-4">
                            <div className="leftcolOne">
                              <span className="leftcolOneh3" />
                              <h3 className="text-left">
                                Discovery & Assessment
                              </h3>
                              <p className="text-left">
                                Evaluate the needs to standardize, rationalize
                                and consolidate existing data center assets for
                                greater efficiency and economics, risks
                                involved, and ROI achieved based on real time
                                data and POC’s.
                              </p>
                            </div>
                            <div className="leftcolTwo">
                              <span className="leftcolTwoh3" />
                              <h3 className="text-left">
                                Strategic Planning & Architecture
                              </h3>
                              <p className="text-left">
                                Develop a roadmap for upgrading and
                                consolidating infrastructure, and migrating
                                applications and data, substantiated by
                                futuristic architecture.
                              </p>
                            </div>
                          </div>
                          <div className="centercol col-md-4">
                            <img
                              src={circle}
                              alt="Getting Started To Software Defined Transformation"
                              className="w-100"
                            />
                          </div>
                          <div className="rightcol col-md-4 ">
                            <div className="rightcolOne">
                              <span className="rightcolOneh3" />
                              <h3 className="">
                                Software Defined Transformation
                              </h3>
                              <p className="">
                                Modernize and Consolidate Data Center and
                                Infrastructure Blueprint and continuously
                                optimize it.
                              </p>
                            </div>
                            <div className="rightcolTwo">
                              <span className="rightcolTwoh3" />
                              <h3 className="">Operation Automation</h3>
                              <p className="">
                                Accelerate service agility by unifying
                                administration and simplifying management
                              </p>
                            </div>
                          </div>
                        </div>
                        <div className="bottomCol">
                          {/* <span className='bottomColh3' /> */}
                          {/* <h3 className='text-center mt-2 mt-md-4'>Migration</h3> */}
                          <p>
                            The very first step, discovery and assessment with
                            automated tool will clearly give you insights on the
                            hardware inventory, application dependency and
                            resource consumption.
                          </p>
                          <p className="">
                            You can make informed decisions to balance workloads
                            and optimize resources and thereby to create a
                            roadmap to guide the journey to Software Defined
                            Organization. This roadmap should map people,
                            process, technology change requirement, consider IT
                            policy and operating model factors; and ultimately
                            produce clear, data-based recommendations with a
                            proposed execution plan to enable Software Defined
                            Transformation to happen. Getting there will require
                            significant upliftment of people skills, impart
                            modern tools and technologies, transforming and
                            migrating applications, integrating and
                            orchestrating environments, automating and
                            monitoring business services, enabling digital
                            processes, and integrating data and security.
                          </p>
                        </div>
                      </div>
                    </div>
                  </TabPane>
                  <TabPane tabId="3">
                    <div>
                      <div>
                        {/* <h3>How Synectiks can help?</h3> */}
                        <p className="ptext">
                          The Modernize and Consolidate Data Center and
                          Infrastructure Platform Blueprint available in
                          Synectiks Xformation platform helps businesses roll
                          out new IT systems and practices to meet the increased
                          agility and price-performance demands of the digital
                          enterprise. By following the blueprint’s and Powerful
                          automation you can reduce workload and technology
                          sprawl, streamline operations, and improve automation,
                          so you can respond to the needs of the business more
                          efficiently, quickly and cost-effectively.
                        </p>
                        <h3> Synectiks Xformation platform can help you</h3>
                        <ul className="ptext">
                          <li>
                            Reduce CAPEX and OPEX by consolidating
                            infrastructure, pooling resources and eliminating
                            stranded capacity
                          </li>
                          <li>
                            Accelerate service agility by unifying
                            administration and simplifying management
                          </li>
                          <li>
                            Improve customer satisfaction and avoid shadow IT by
                            introducing service orchestration tools and
                            selfserve portals
                          </li>
                          <li>
                            Meet stringent IoT scalability requirements by
                            collecting and processing data at the network edge
                          </li>
                        </ul>
                        <p className="ptext">
                          The Synectiks Xformation Platform delivers cloud
                          speed, scalability and economics. Synectiks can enable
                          your enterprise journey to Software Defined
                          Transformation, regardless of your starting point.
                        </p>
                      </div>

                      <div className="row">
                        <h4 className="pt-0 pt-md-0 pb-2 pb-md-3">
                          Synectiks can enable your enterprise journey to
                          DevOps, regardless of your starting point.
                        </h4>
                        <div className="d-flex flex-column flex-md-row align-items-center">
                          <img
                            src={ds}
                            alt="Discover and Assessment"
                            className="w16 mr-5"
                          />
                          <div>
                            <p className="ptexticon">
                              Synectiks offers a variety of advisory services to
                              assist with your modernization and consolidation
                              Journey. Our discovery and assessment services can
                              help you draft a Software Defined roadmap with a
                              clearly defined business case and mapping of
                              peoples / process / technologies along with
                              prioritized recommendations. Our recommendations
                              reflect deep industry knowledge and contextual
                              knowledge about your business.
                            </p>
                          </div>
                        </div>
                        <div className="d-flex flex-column flex-md-row align-items-center mt-0 mt-md-3">
                          <img
                            src={ts}
                            alt="Transformation Services"
                            className="w16 mr-5"
                          />
                          <div className="">
                            <p className="ptexticon">
                              You can access our open Xformation platform
                              products and resource teams to adopt technology
                              and cultural changes quickly from Software Defined
                              Transformation, People skill and process
                              transformation and integration to cloud-native
                              apps development. We have vast experience helping
                              businesses plan, design, optimize and manage the
                              transitions necessary to effect IT modernization,
                              migration and consolidation.
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </TabPane>
                  <TabPane tabId="4">
                    <div>
                      <div className="my-2">
                        {/* <h3>
													<b>Synectiks</b> Differentiator
												</h3> */}
                        <p className="mb-2 mb-md-4">
                          We go beyond creating a strategy: Synectiks helps you
                          plan it, do it, run it and manage it.
                        </p>

                        <h5 className="text-center">
                          Top 9 Reasons to select Synectiks as your Software
                          Defined Partner:
                        </h5>
                      </div>
                      <div className="my-2 my-md-4">
                        <div className="row">
                          <div className="col-sm-4 col-md-4 text-center d-flex align-items-center flex-column">
                            <div className="d-flex align-items-center flex-column">
                              <img
                                src={EX}
                                alt="Experience"
                                className="tw m-0"
                              />
                              <h5 className="my-2 my-md-3">Experience</h5>
                            </div>
                            <p className="text-center">
                              Large Scale modernization and consolidation
                              experience
                            </p>
                          </div>
                          <div className="col-sm-4 col-md-4 text-center d-flex align-items-center flex-column">
                            <div className="d-flex align-items-center flex-column">
                              <img
                                src={artifact}
                                alt="Artifacts"
                                className="tw m-0"
                              />
                              <h5 className="my-2 my-md-3">Artifacts</h5>
                            </div>
                            <p className="text-center">
                              Transformation Blueprints and Automation Bots
                              available in Xformation platform accelerate
                              transformation effort.
                            </p>
                          </div>
                          <div className="col-sm-4 col-md-4 text-center d-flex align-items-center flex-column">
                            <div className="d-flex align-items-center flex-column">
                              <img
                                src={advisory}
                                alt="Advisory"
                                className="tw m-0"
                              />
                              <h5 className="my-2 my-md-3">Advisory</h5>
                            </div>
                            <p className="text-center">
                              Quick Discovery / Assessment and transformation
                              plan built in weeks, not months.
                            </p>
                          </div>
                        </div>
                        <div className="row">
                          <div className="col-sm-4 col-md-4 text-center d-flex align-items-center flex-column">
                            <div className="d-flex align-items-center flex-column">
                              <img
                                src={pay}
                                alt="Pay As You Use"
                                className="tw m-0"
                              />
                              <h5 className="my-2 my-md-3">Pay As You Use</h5>
                            </div>
                            <p className="text-center">
                              Move to consumption model economics across all IT,
                              use our available blueprints that reduce any
                              stranded capacity.
                            </p>
                          </div>
                          <div className="col-sm-4 col-md-4 text-center d-flex align-items-center flex-column">
                            <div className="d-flex align-items-center flex-column">
                              <img
                                src={economics}
                                alt="Economics"
                                className="tw m-0"
                              />
                              <h5 className="my-2 my-md-3">Economics</h5>
                            </div>
                            <p className="text-center">
                              Upto 50% Lower TCO of IT by having aggregated
                              infrastructure and fluid resource pools optimize
                              use of compute, storage and fabric resources.
                            </p>
                          </div>
                          <div className="col-sm-4 col-md-4 text-center d-flex align-items-center flex-column">
                            <div className="d-flex align-items-center flex-column">
                              <img
                                src={operate}
                                alt="Operation"
                                className="tw m-0"
                              />
                              <h5 className="my-2 my-md-3">Operation</h5>
                            </div>
                            <p className="text-center">
                              Upto 40% improvement in IT staff productivity by
                              using our automations that unify administration
                              and simplify management.
                            </p>
                          </div>
                        </div>
                        <div className="row">
                          <div className="col-sm-4 col-md-4 text-center d-flex align-items-center flex-column">
                            <div className="d-flex align-items-center flex-column">
                              <img
                                src={innovation}
                                alt="Innovation"
                                className="tw m-0"
                              />
                              <h5 className="my-2 my-md-3">Innovation</h5>
                            </div>
                            <p className="text-center">
                              2–3X acceleration in continuous improvement cycles
                            </p>
                          </div>
                          <div className="col-sm-4 col-md-4 text-center d-flex align-items-center flex-column">
                            <div className="d-flex align-items-center flex-column">
                              <img
                                src={CS}
                                alt="Security and Compliance"
                                className="tw m-0"
                              />
                              <h5 className="my-2 my-md-3">
                                {' '}
                                Security & Compliance
                              </h5>
                            </div>
                            <p className="text-center">
                              Provision and change infrastructure through well
                              defined blueprints and pipelines that adheres to
                              highest level of security & compliance.
                            </p>
                          </div>
                          <div className="col-sm-4 col-md-4 text-center d-flex align-items-center flex-column">
                            <div className="d-flex align-items-center flex-column">
                              <img
                                src={EM}
                                alt="Engagement"
                                className="tw m-0"
                              />
                              <h5 className="my-2 my-md-3">Engagement</h5>
                            </div>
                            <p className="text-center">
                              Our every engagement is focused on empowerment,
                              not dependency.
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </TabPane>
                </TabContent>
              </div>
            </Row>
          </div>
        </div>
      </HybridWrapper>
      <Helmet></Helmet>
    </Layout>
  );
};

export default Infrastructure;

const HybridWrapper = styled.div`{
	.svgcolor{
	font-size: 2rem;
    color: rgba(0,0,0,0.5);
		margin: 10px 5px;
		display:block;
}
.w-sm-50{
	width: 100%;
}
	.bottomColh3{
		width: 10%;
		height: 10px;
		background: #CB2029;
		display: block;
		margin: 0 auto;
	}
	.leftcolOneh3{
		width: 30%;
		height: 10px;
		background: #67873C;
		display: block;
		margin-bottom: 20px;
	}
	.leftcolTwoh3{
		width: 30%;
		height: 10px;
		background: #81376C;
		display: block;
		margin-bottom: 20px;}

	.rightcolOneh3{
		content:'';
		width: 30%;
		height: 10px;
		background: #2C75A2;
		display: block;
		margin-bottom: 20px;
	}
	.rightcolTwoh3{
		width: 30%;
		height: 10px;
		background: #E96D25;
		display: block;
		margin-bottom: 20px;
	}

	.rightcolOne,.rightcolTwo{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		h3,p{
			text-align: left;
		}
	}

	.leftcol, .rightcol {
		display: flex;
		justify-content space-between;
		flex-flow: column;
	}
	.w-hndr{
		width: 100%;
	}
	.disimal{
 width: 100%;
}
.disima{
 width: 100%;
}
.ptext{
	text-align: left;
}
.ptexticon{
	text-align: center;
}
	padding: 5rem 1rem;
ul{
	font-size: 1rem;
}
.table{
	font-size: 1rem;
}
.rotate{
	width: auto;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin: 0 -60px;
    padding: 3px;
    text-align: center;
    color: var(--synectiksWhite);
}

.topNav{
	position: fixed;
	z-index: 9999;
	top: 97px;
  background: white;
  z-index: 9999;
  width: 100%;
  height: 60px;
  padding: 0 0 20px 0;
  left: 0px;
}

.navbar-light .navbar-toggler {
	color: rgba(0, 0, 0, .5);
		border-color: rgba(0, 0, 0, 0);
  }
  .navbar-toggler > .close {
		display: inline;
	}
	.navbar-toggler > .navbar-toggler-icon {
		display: none;
	}
	.navbar-toggler:not(.collapsed) > .close {
		display: none;
	}
	.navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
		display: inline;
	}
h1,h2,h3,h4,h5,h5,p,ul{
	text-align: left;
}
.hybJumbo{
	display:flex;
  flex-direction: column;
  align-items: center;
  .himage {
	  width: 100%;
    height: auto;
    float: none;
		box-shadow: 5px 5px 5px #789;
		margin-bottom: 10px;
    margin-left:0rem;
  }
}
.marHybrid{
	margin-left: 0rem;
}
.w-sm-100{
	width: 100%;
}
.hybridFixed{
	position: fixed;
  top:6rem;
  left:0;
  z-index: 99;
}
a#bgL{
	padding: 0.5rem 1rem;
}
a#bgLL,
a#bgLLL {
    font-size: 12px;
    height: auto;
}

a#bgLL.active,
a#bgLLL.active  {
	border-bottom: 5px solid #007cc2;
    background: bgBlue !important;
    text-align: left;
    color: var(--synectiksWhite);
    border-radius: 0px;
    padding: 0.5rem 1rem;
    font-size: 12px;
    height: auto;
    width:100%;
}
.imgHyb {
	margin-right: 25px !important;
  width: 55px !important;
  z-index: 999;
  position: relative;
}
.one {
	z-index: 99999;
	background: white;
	width: 100%;
}
.one:hover {
	z-index: 99999;
	background: rgb(0,124,194);
	color: var(--synectiksWhite);
}
ul.tabList.nav.flex-column {
	position: relative;
		z-index: 99999;
		width: 100%;
		left: 0rem;
	}
	.tabList {
		display:block;
  }
  .tabsHide {
	  display: none;
  }

.hybmt{
	margin-top: 2.5rem;
}
.nav-link.active{
	background: var(--synectiksBlue);
  color: var(--synectiksWhite);
}
.logo-btn {
	font-size:2rem;
    background: white;
    border: none;
    outline: none;
    width: 100vw;
    padding: 0.6rem;
    text-align: left;
    box-shadow: 2px 1px 10px rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.5);
}

    .logo-btn:hover {
		 cursor: pointer;
    }
      .tab-content>.active{
			padding:0rem 0.5rem;
      }
      	.whbd9 {
				width: 25%;
  }
  	.whbd7 {
		  width:25%;
  }
 .w20{
	 width:25%;
  }
  .w15 {

	width: 25%;
}
  .w16 {
	width: 25%;
}

	.w-85 {
	position: relative;
	top:30px;
	left: 0px;
  border: 1px solid var(--textColor);
  background: var(--synectiksWhite);
  justify-content: flex-start;
			}
}

@media (min-width: 576px){
	a#bgL.active:hover{
		color: white;
	}
.w-sm-50{
	width: 50%;
}
	.svgcolor{
	font-size: 2rem;
    color: rgba(0,0,0,0.5);
		margin: 10px 5px;
		display:none;
}
		.bottomColh3{
		width: 10%;
		height: 10px;
		background: #CB2029;
		display: block;
		margin: 0 auto;
	}
	.leftcolOneh3{
		width: 30%;
		height: 10px;
		background: #67873C;
		display: block;
		margin-bottom: 20px;
	}
	.leftcolTwoh3{
		width: 30%;
		height: 10px;
		background: #81376C;
		display: block;
		margin-bottom: 20px;}

	.rightcolOneh3{
		content:'';
		width: 30%;
		height: 10px;
		background: #2C75A2;
		display: block;
		margin-bottom: 20px;
	}
	.rightcolTwoh3{
		width: 30%;
		height: 10px;
		background: #E96D25;
		display: block;
		margin-bottom: 20px;
	}

	.rightcolOne,.rightcolTwo{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		h3,p{
			text-align: right;
		}
	}

	.leftcol, .rightcol {
		display: flex;
		justify-content space-between;
		flex-flow: column;
	}
	.w-hndr{
		width: 75%;
	}
	.ptext{
	text-align: justify;
}
.ptexticon{
	text-align: justify;
}
	padding: 3rem 4rem;
.disimal{
 width: 60%;
}
.disima{
 width: 75%;
}

	.topNav{
	position: relative;
	top: 0px;
	z-index: 999;
}
	.one {
	z-index: 99999;
	background: white;
	width: auto;
}
  .hybJumbo{
    display:block;
    	.himage {
		width: 50%;
		height: auto;
		box-shadow: 5px 5px 5px #789;
		float: right;
		margin-left: 2rem;
		margin-bottom: 10px;
  }
  }
  .w15 {
	width: 8%;
}
  .w16 {
	width: 10%;
}
  	.whbd7 {
		width: 7%;
	}
  	.whbd9 {
		width: 8%;
  }
  .w18{
    width:
  }
  .w20{
    width: 16%;
  }
.w-85{
  /* width: 87vw; */
	position: relative;
	top: 0px;
	left: 0%;
    border: 1px solid var(--textColor);
    background: var(--synectiksWhite);
    justify-content: flex-start;
}
  ul.nav.flex-column {
		position: relative;
		z-index: 99999;
		width: 100%;
		/* width: 25vw; */
		left: 0rem;
  }

	ul.nav.flex-column > li > a {
		width: 100%;
		color: rgba(0, 0, 0, 0.8);
		height: 10vh;
		font-size:14px;
		cursor: pointer;
		/* padding-left: 3.2rem; */
  }
  ul.nav.flex-column > li > a {
    width: 100%;
    color: rgba(0,0,0,0.8);
    height: 10vh;
    font-size: 15px;
    cursor: pointer;
  }
 .tab-content>.active{
        padding:1rem 0rem 0rem 0rem;
      }
	}
		/* a#bgL{
		padding: 0.5rem 3rem;
		cursor: pointer;
		font-size: 14px;
	} */
a#bgL,
	a#bgLL,a#bgLLL{
    background: bgBlue !important;
    text-align: left;
     font-size: 14px;
     cursor: pointer;
		  padding: 0.5rem 3rem;
  }

a#bgL.active {
  border-bottom: 5px solid #007cc2;
  position: relative;
	background: bgBlue !important;
  font-size: 14px;
	 padding: 0.5rem 3rem;
}
a#bgLL.active {
  border-bottom: 5px solid #007cc2;
  position: relative;
	/* padding-left: 1rem !important; */
	background: bgBlue !important;
   font-size: 14px;
	  padding: 0.5rem 3rem;
}
a#bgLLL.active {
  position: relative;
	border-bottom: 5px solid #007cc2;
	/* padding-left: 1rem !important; */
	background: bgBlue !important;
   font-size: 14px;
	  padding: 0.5rem 3rem;
}

   .logo-btn {
    display: none;
  }

  .bxshd{
    box-shadow: 0px 0px 0px 0px lightgray;
  }
.nav-link.active{
  background: var(--synectiksBlue);
  color: var(--synectiksWhite);
}
.hbh1 {
    font-size: 2.5rem;
}
.hybridFixed{
       display: block;
    height: auto;
    position: sticky;
    top: 16%;
    padding-bottom: 21.4rem;
    padding-top: 2.4rem;
}
.nav-item > a.active, .nav-item > a:active{
  height: auto;
}
h2{
  font-size: 2rem;
}
h3{
  font-size:1.75rem;
}
h4{
   font-size: 1.5rem;
}
}
@media(min-width:768px){
	a#bgLLL.active:after{
    top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: var(--synectiksBlue);
	border-width: 20px;
	margin-left: -20px;
  }
	a#bgL.active:after{
 top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: var(--synectiksBlue);
	border-width: 20px;
	margin-left: -20px;
  }
a#bgLL.active:after{
    top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: var(--synectiksBlue);
	border-width: 20px;
	margin-left: -20px;
  }
  .w-sm-100{
  width: 75%;
}
  	.himage {
		width: 100%;
		height: auto;
		box-shadow: 5px 5px 5px #789;
		margin-right: 2rem;
		margin-bottom: 10px;
  }
  .bxshd{
    box-shadow: 0px 0px 0px 0px lightgray;
  }
}
@media(min-width:1024px){
 	.himage {
		width: 50%;
		height: auto;
		box-shadow: 5px 5px 5px #789;
		margin-left: 2rem;
		margin-bottom: 10px;
  }
  .bxshd{
    box-shadow: 0px 0px 0px 0px lightgray;
  }
}
`;
