text: //! STEPS WITH IMAGE ON RIGHT THEN LEFT THEN RIGHT 
  
  {/* FIRST STEP */}
   <Col xs={8}>
   <div className="whiteTextChange textAlignRight">
    The steps here's some lorem epsium. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
   </div>
  </Col>
  <Col className="mt-4 mt-sm-0" xs={4}>
   <img src={Note} height="80px" width="80px"/>
  </Col>
  </Row>
  
  {/* SECOND STEP */}
  <Row className="mt-4">
  <Col className="mt-4 mt-sm-0" xs={4}>
   <img  src={Note} height="80px" width="80px"/>
  </Col>
  <Col xs={8}>
   <div className="whiteTextChange">
    The steps here's some lorem epsium. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
   </div>
  </Col>
  </Row>
  
  {/* THIRD STEP */}
  <Row className="mt-4">
   <Col xs={8}>
    <div className="whiteTextChange textAlignRight">
     The steps here's some lorem epsium. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
    </div>
   </Col>
   <Col className="mt-4 mt-sm-0" xs={4}>
    <img src={Note} height="80px" width="80px"/>
   </Col>