text: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  
  class Features extends Component {
      render() {
          return (
          <div className="feature_section1">
          <div className="container">
              <h2>
              <div dangerouslySetInnerHTML={{__html:this.props.lang.working_areas}}></div>
              {/* <b>{this.props.lang.w_tagline}</b> */}
              </h2>
              <div className="margin_top3" />
              <div onClick={()=>{ window.open(`/products/chicken-breeds`,'_self')}} className="one_fourth animate" data-anim-type="fadeIn" data-anim-delay={100}>
              <div className="arrow_box">
                  <img style={{width:"60px"}} src="/images/breed.png"></img>
              </div>
              <h5 className={window.localStorage.getItem('lang') == 'Urdu' ? 'caps urdu_title' : 'caps '}>{this.props.lang.w_chicken}</h5>
              <p className={window.localStorage.getItem('lang') == 'Urdu' ? 'caps urdu_desc' : ' '}>
              {this.props.lang.chicken_des}
              </p>
              </div>
              <div onClick={()=>{ window.open(`/products/feeds`,'_self')}} className="one_fourth animate" data-anim-type="fadeIn" data-anim-delay={200}>
              <div className="arrow_box">
                  <img style={{width:"60px"}} src="/images/feed.png"></img>
              </div>
              <h5 className={window.localStorage.getItem('lang') == 'Urdu' ? 'caps urdu_title' : 'caps '}> {this.props.lang.w_feed}</h5>
              <p className={window.localStorage.getItem('lang') == 'Urdu' ? 'caps urdu_desc' : ' '}> {this.props.lang.feed_des}</p>
              </div>
              <div  onClick={()=>{ window.open(`/products/medicines`,'_self')}} className="one_fourth  animate" data-anim-type="fadeIn" data-anim-delay={300}>
              <div className="arrow_box">
                  <img style={{width:"60px"}} src="/images/medicine.png"></img>
              </div>
              <h5 className={window.localStorage.getItem('lang') == 'Urdu' ? 'caps urdu_title' : 'caps '}> {this.props.lang.w_medicine}</h5>
              <p className={window.localStorage.getItem('lang') == 'Urdu' ? 'caps urdu_desc' : ' '}> {this.props.lang.medicine_des}</p>
              </div>
              <div onClick={()=>{ window.open(`/consultancy`,'_self')}} className="one_fourth last animate" data-anim-type="fadeIn" data-anim-delay={400}>
              <div className="arrow_box">
                  <img style={{width:"60px"}} src="/images/education.png"></img>
                  </div>
              <h5 className={window.localStorage.getItem('lang') == 'Urdu' ? 'caps urdu_title' : 'caps '}> {this.props.lang.w_consultancy}</h5>
              <p className={window.localStorage.getItem('lang') == 'Urdu' ? 'caps urdu_desc' : ' '}> {this.props.lang.consultancy_des}</p>
              </div>
          </div>
          </div>
          );
      }
  }
  const mapStateToProps = (state) => {
      return{
          lang:state.lang,
          current_lang:state.current_lang
      }
  }
  export default connect(mapStateToProps)(Features);
  