<div class="about-us-wrapper">
    <div class="header-title" style="background: url(assets/images/background/header.jpg);">
        <div class="container" id="mainDIV" >
        <div class="title">
            <h2>About us</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Aenean commodo ligula eget dolor</p>
          </div>
    </div>
    </div>
    <div class="about-section sec-padding" style="background: url(assets/images/background/download.svg);" fxLayout="row" fxLayout.lt-md="column">
  <div class="container">

        <div fxFlex="100" fxFlex.gt-sm="50" class="left-info-panel">
      <img src="assets/images/about-us/aboutUs.jpg" alt="">
      </div>
      <div fxFlex="100" fxFlex.gt-sm="50" class="left-info-panel">
         <div class="about-us-intro">
             <h2>Our more than 20 years of experience</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor, orci in lacinia lobortis, tellus tellus placerat tortor, a venenatis enim magna vitae urna. In lobortis lorem ut tortor tempor elementum. Nunc elementum iaculis eros, eu dignissim nibh sodales id. Pellentesque eget risus semper, ultricies neque eget, feugiat erat. Aenean ut augue ut diam egestas pulvinar id non ante. Donec elementum erat id aliquam viverra. Donec varius ullamcorper sem eget bibendum. Donec sed vulputate nisi. Etiam id velit enim. Aliquam commodo bibendum nulla quis aliquet.</p>
             <div class="accordions">
             <mat-accordion>
                <mat-expansion-panel>
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                        <h4>How to become our partner</h4>
                    </mat-panel-title>
                  </mat-expansion-panel-header>
                  <p>Nulla ac accumsan urna. Praesent id leo ut velit tempor gravida. Nulla facilisi. Nam blandit rhoncus lectus, eu euismod diam rhoncus et.
                      In sollicitudin bibendum odio, at tristique purus elementum sit amet. Integer vulputate, justo at lacinia suscipit, erat nibh interdum augue, sit amet hendrerit neque ipsum at eros.</p>
                </mat-expansion-panel>
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                      <mat-panel-title>
                          <h4>Sell your products here</h4>
                      </mat-panel-title>
                    </mat-expansion-panel-header>
                    <p>Nulla ac accumsan urna. Praesent id leo ut velit tempor gravida.
                      In sollicitudin bibendum odio, at tristique purus elementum sit amet. Integer vulputate, justo at lacinia suscipit, erat nibh interdum augue, sit amet hendrerit neque ipsum at eros.</p>
                  </mat-expansion-panel>
                  <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        <mat-panel-title>
                            <h4>Awesome quality</h4>
                        </mat-panel-title>
                      </mat-expansion-panel-header>
                      <p>Nulla ac accumsan urna. Praesent id leo ut velit tempor gravida. Nulla facilisi. Nam blandit rhoncus lectus, eu euismod diam rhoncus et.
                          In sollicitudin bibendum odio, at tristique purus elementum sit amet. </p>
                    </mat-expansion-panel>

              </mat-accordion>
            </div>
         </div>
          </div>
    </div>
  </div>
  <div class="our-values sec-padding">
      <div class="container">
        <div class="title-wrapper">
          <h2>Our Great Services </h2>
          <p>Boldman has 10+ years of experience with providing wide area of specialty services works listed below.
            </p>
        </div>
        <div fxLayout="row" fxLayout.lt-sm="column" class="box-wraper">
            <div fxFlex="100" fxFlex.gt-sm="33.3" class="box">
              <div class="content">
                <div class="icon-box">
                    <i class="material-icons">
                        done_all
                        </i>
                </div>
                  <h4>Pure quality</h4>
                  <p>Praesent id leo ut velit tempor gravida. Nam blandit rhoncus lectus, eu euismod diam</p>
              </div>
             </div>
             <div fxFlex="100" fxFlex.gt-sm="33.3" class="box">
                <div class="content">
                  <div class="icon-box">
                      <i class="material-icons">
                          build
                          </i>
                  </div>
                    <h4>Free service</h4>
                    <p>Praesent id leo ut velit tempor gravida. Nam blandit rhoncus lectus, eu euismod diam</p>
                </div>
               </div>
               <div fxFlex="100" fxFlex.gt-sm="33.3" class="box">
                  <div class="content">
                    <div class="icon-box">
                        <i class="material-icons">
                            local_shipping
                            </i>
                    </div>
                      <h4>Home delivery</h4>
                      <p>Praesent id leo ut velit tempor gravida. Nam blandit rhoncus lectus, eu euismod diam</p>
                  </div>
                 </div>
        </div>
      </div>
  </div>
  <div class="our-team sec-padding">
      <div class="container">
        <div class="title-wrapper">
          <h2>Our Experts </h2>
          <p>Our development opt in to the projects they genuinely want to work on,<br>committing wholeheartedly to delivering.
            </p>
        </div>
        <div class="team-members" fxLayout="row" fxLayout.lt-sm="column">
            <div fxFlex="100" fxFlex.gt-sm="25" class="item">
                <div class="single-team-member">
                    <div class="img-box"><img src="assets/images/about-us/t1.jpg" alt="Awesome Image">
                      <div class="overlay">
                        <div class="box">
                          <div class="content" color="primary">
                            <ul class="social list-inline text-center" fxLayout="row" fxLayoutAlign="space-evenly center">
                              <li><a href=""><i class="fa fa-facebook-f"></i></a></li>
                            <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                            <li><a href=""><i class="fa fa-instagram"></i></a></li>
                            <li><a href=""><i class="fa fa-twitter"></i></a></li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="text-box">
                      <h4>Peter Simons</h4>
                      <p>CEO &amp; Founder</p>
                    </div>
                  </div>
            </div>
            <div fxFlex="100" fxFlex.gt-sm="25" class="item">
              <div class="single-team-member">
                  <div class="img-box"><img src="assets/images/about-us/t2.jpg" alt="Awesome Image">
                    <div class="overlay">
                      <div class="box">
                        <div class="content">
                          <ul class="social list-inline text-center" fxLayout="row" fxLayoutAlign="space-evenly center">
                            <li><a href=""><i class="fa fa-facebook-f"></i></a></li>
                            <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                            <li><a href=""><i class="fa fa-instagram"></i></a></li>
                            <li><a href=""><i class="fa fa-twitter"></i></a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="text-box">
                    <h4>Peter Simons</h4>
                    <p>CEO &amp; Founder</p>
                  </div>
                </div>
          </div>
          <div fxFlex="100" fxFlex.gt-sm="25" class="item">
            <div class="single-team-member">
                <div class="img-box"><img src="assets/images/about-us/t3.jpg" alt="Awesome Image">
                  <div class="overlay">
                    <div class="box">
                      <div class="content">
                        <ul class="social list-inline text-center" fxLayout="row" fxLayoutAlign="space-evenly center">
                          <li><a href=""><i class="fa fa-facebook-f"></i></a></li>
                          <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                          <li><a href=""><i class="fa fa-instagram"></i></a></li>
                          <li><a href=""><i class="fa fa-twitter"></i></a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="text-box">
                  <h4>Peter Simons</h4>
                  <p>CEO &amp; Founder</p>
                </div>
              </div>
        </div>
        <div fxFlex="100" fxFlex.gt-sm="25" class="item">
          <div class="single-team-member">
              <div class="img-box"><img src="assets/images/about-us/t4.jpg" alt="Awesome Image">
                <div class="overlay">
                  <div class="box">
                    <div class="content">
                      <ul class="social list-inline text-center" fxLayout="row" fxLayoutAlign="space-evenly center">
                        <li><a href=""><i class="fa fa-facebook-f"></i></a></li>
                            <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                            <li><a href=""><i class="fa fa-instagram"></i></a></li>
                            <li><a href=""><i class="fa fa-twitter"></i></a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="text-box">
                <h4>Peter Simons</h4>
                <p>CEO &amp; Founder</p>
              </div>
            </div>
      </div>
        </div>
      </div>
    </div>

</div>