Blocks - About

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
      <div class="col-md-8 col-lg-6 col-xl-5 order-lg-2 position-relative">
        <div class="shape bg-soft-primary rounded-circle rellax w-20 h-20" data-rellax-speed="1" style="top: -2rem; right: -1.9rem;"></div>
        <figure class="rounded"><img src="./assets/img/photos/about7.jpg" srcset="./assets/img/photos/about7@2x.jpg 2x" alt=""></figure>
      </div>
      <!--/column -->
      <div class="col-lg-6">
        <h2 class="display-4 mb-3">Who Are We?</h2>
        <p class="lead fs-lg">We are a digital and branding company that believes in the power of creative strategy and along with great design.</p>
        <p class="mb-6">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        <div class="row gx-xl-10 gy-6">
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <img src="./assets/img/icons/lineal/target.svg" class="svg-inject icon-svg icon-svg-sm me-4" alt="" />
              </div>
              <div>
                <h4 class="mb-1">Our Mission</h4>
                <p class="mb-0">Dapibus eu leo quam ornare curabitur blandit tempus.</p>
              </div>
            </div>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <img src="./assets/img/icons/lineal/award-2.svg" class="svg-inject icon-svg icon-svg-sm me-4" alt="" />
              </div>
              <div>
                <h4 class="mb-1">Our Values</h4>
                <p class="mb-0">Aenean lacinia bibendum nulla sed consectetur.</p>
              </div>
            </div>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-12 align-items-center">
      <div class="col-lg-6 position-relative">
        <div class="btn btn-circle btn-primary pe-none position-absolute counter-wrapper flex-column d-none d-md-flex" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170px; height: 170px;">
          <h3 class="text-white mb-1 mt-n2"><span class="counter counter-lg">20+</span></h3>
          <p>Year Experience</p>
        </div>
        <div class="row gx-md-5 gy-5 align-items-center">
          <div class="col-md-6">
            <div class="row gx-md-5 gy-5">
              <div class="col-md-10 offset-md-2">
                <figure class="rounded"><img src="./assets/img/photos/ab1.jpg" srcset="./assets/img/photos/ab1@2x.jpg 2x" alt=""></figure>
              </div>
              <!--/column -->
              <div class="col-md-12">
                <figure class="rounded"><img src="./assets/img/photos/ab2.jpg" srcset="./assets/img/photos/ab2@2x.jpg 2x" alt=""></figure>
              </div>
              <!--/column -->
            </div>
            <!--/.row -->
          </div>
          <!--/column -->
          <div class="col-md-6">
            <figure class="rounded"><img src="./assets/img/photos/ab3.jpg" srcset="./assets/img/photos/ab3@2x.jpg 2x" alt=""></figure>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
      <div class="col-lg-6">
        <img src="./assets/img/icons/lineal/handshake.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
        <h3 class="display-5 mb-5">We are a creative company that focuses on establishing long-term relationships with customers.</h3>
        <p class="mb-7">Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula.</p>
        <div class="row counter-wrapper gy-6">
          <div class="col-md-4">
            <h3 class="counter text-primary">7518</h3>
            <p>Completed Projects</p>
          </div>
          <!--/column -->
          <div class="col-md-4">
            <h3 class="counter text-primary">3472</h3>
            <p>Satisfied Customers</p>
          </div>
          <!--/column -->
          <div class="col-md-4">
            <h3 class="counter text-primary">2184</h3>
            <p>Expert Employees</p>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 pt-md-16 pb-md-9">
    <figure class="rounded"><img src="./assets/img/photos/about5.jpg" srcset="./assets/img/photos/about5@2x.jpg 2x" alt="" /></figure>
    <div class="row">
      <div class="col-xl-10 mx-auto">
        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 text-white mt-n5 mt-lg-0 mt-lg-n50p mb-lg-n50p border-radius-lg-top" data-image-src="./assets/img/photos/bg3.jpg">
          <div class="card-body p-9 p-xl-10">
            <div class="row align-items-center counter-wrapper gy-4 text-center">
              <div class="col-6 col-lg-3">
                <h3 class="counter counter-lg text-white">7518</h3>
                <p>Completed Projects</p>
              </div>
              <!--/column -->
              <div class="col-6 col-lg-3">
                <h3 class="counter counter-lg text-white">3472</h3>
                <p>Satisfied Customers</p>
              </div>
              <!--/column -->
              <div class="col-6 col-lg-3">
                <h3 class="counter counter-lg text-white">2184</h3>
                <p>Expert Employees</p>
              </div>
              <!--/column -->
              <div class="col-6 col-lg-3">
                <h3 class="counter counter-lg text-white">4523</h3>
                <p>Awards Won</p>
              </div>
              <!--/column -->
            </div>
            <!--/.row -->
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
      <div class="col-lg-6 position-relative order-lg-2">
        <div class="shape bg-dot primary rellax w-16 h-20" data-rellax-speed="1" style="top: 3rem; left: 5.5rem"></div>
        <div class="overlap-grid overlap-grid-2">
          <div class="item">
            <figure class="rounded shadow"><img src="./assets/img/photos/about2.jpg" srcset="./assets/img/photos/about2@2x.jpg 2x" alt=""></figure>
          </div>
          <div class="item">
            <figure class="rounded shadow"><img src="./assets/img/photos/about3.jpg" srcset="./assets/img/photos/about3@2x.jpg 2x" alt=""></figure>
          </div>
        </div>
      </div>
      <!--/column -->
      <div class="col-lg-6">
        <img src="./assets/img/icons/lineal/megaphone.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
        <h2 class="display-4 mb-3">Who Are We?</h2>
        <p class="lead fs-lg">We are a digital and branding company that believes in the power of creative strategy and along with great design.</p>
        <p class="mb-6">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        <div class="row gy-3 gx-xl-8">
          <div class="col-xl-6">
            <ul class="icon-list bullet-bg bullet-soft-primary mb-0">
              <li><span><i class="uil uil-check"></i></span><span>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>
              <li class="mt-3"><span><i class="uil uil-check"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>
            </ul>
          </div>
          <!--/column -->
          <div class="col-xl-6">
            <ul class="icon-list bullet-bg bullet-soft-primary mb-0">
              <li><span><i class="uil uil-check"></i></span><span>Etiam porta sem malesuada magna mollis euismod.</span></li>
              <li class="mt-3"><span><i class="uil uil-check"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>
            </ul>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
      <div class="col-lg-7 order-lg-2">
        <figure><img class="w-auto" src="./assets/img/illustrations/i2.png" srcset="./assets/img/illustrations/i2@2x.png 2x" alt="" /></figure>
      </div>
      <!--/column -->
      <div class="col-lg-5">
        <h2 class="fs-15 text-uppercase text-line text-primary mb-3">Why Choose Us?</h2>
        <h3 class="display-5 mb-7">A few reasons why our valued customers choose us.</h3>
        <div class="accordion accordion-wrapper" id="accordionExample">
          <div class="card plain accordion-item">
            <div class="card-header" id="headingOne">
              <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Professional Design </button>
            </div>
            <!--/.card-header -->
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
              <div class="card-body">
                <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.accordion-collapse -->
          </div>
          <!--/.accordion-item -->
          <div class="card plain accordion-item">
            <div class="card-header" id="headingTwo">
              <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Top-Notch Support </button>
            </div>
            <!--/.card-header -->
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
              <div class="card-body">
                <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.accordion-collapse -->
          </div>
          <!--/.accordion-item -->
          <div class="card plain accordion-item">
            <div class="card-header" id="headingThree">
              <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Header and Slider Options </button>
            </div>
            <!--/.card-header -->
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
              <div class="card-body">
                <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
              </div>
              <!--/.card-body -->
            </div>
            <!--/.accordion-collapse -->
          </div>
          <!--/.accordion-item -->
        </div>
        <!--/.accordion -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
      <div class="col-lg-7">
        <figure><img class="w-auto" src="./assets/img/illustrations/i8.png" srcset="./assets/img/illustrations/i8@2x.png 2x" alt="" /></figure>
      </div>
      <!--/column -->
      <div class="col-lg-5">
        <h3 class="display-4 mb-6 pe-xxl-6">We bring rapid solutions to make the life of our customers easier.</h3>
        <ul class="progress-list mt-3">
          <li>
            <p>Marketing</p>
            <div class="progressbar line blue" data-value="100"></div>
          </li>
          <li>
            <p>Strategy</p>
            <div class="progressbar line yellow" data-value="80"></div>
          </li>
          <li>
            <p>Development</p>
            <div class="progressbar line orange" data-value="85"></div>
          </li>
          <li>
            <p>Data Analysis</p>
            <div class="progressbar line green" data-value="90"></div>
          </li>
        </ul>
        <!-- /.progress-list -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center">
      <div class="col-md-8 col-lg-6 position-relative">
        <a href="./assets/media/movie.mp4" class="btn btn-circle btn-primary btn-play ripple mx-auto mb-5 position-absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right"></i></a>
        <div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
        <figure class="rounded"><img src="./assets/img/photos/about12.jpg" srcset="./assets/img/photos/about12@2x.jpg 2x" alt=""></figure>
      </div>
      <!--/column -->
      <div class="col-lg-5 col-xl-4 offset-lg-1">
        <h3 class="display-4 mb-3">Sandbox Brings Awesomeness</h3>
        <p class="lead fs-lg mb-6">We have considered our solutions to <span class="underline">support every stage</span> of your growth.</p>
        <ul class="progress-list">
          <li>
            <p>Marketing</p>
            <div class="progressbar line primary" data-value="100"></div>
          </li>
          <li>
            <p>Strategy</p>
            <div class="progressbar line primary" data-value="80"></div>
          </li>
          <li>
            <p>Development</p>
            <div class="progressbar line primary" data-value="85"></div>
          </li>
          <li>
        </ul>
        <!-- /.progress-list -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gy-10 gy-sm-13 gx-md-8 gx-xl-12 align-items-center">
      <div class="col-lg-6">
        <div class="row gx-md-5 gy-5">
          <div class="col-12">
            <figure class="rounded mx-5"><img src="./assets/img/photos/g8.jpg" srcset="./assets/img/photos/g8@2x.jpg 2x" alt=""></figure>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <figure class="rounded"><img src="./assets/img/photos/g9.jpg" srcset="./assets/img/photos/g9@2x.jpg 2x" alt=""></figure>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <figure class="rounded"><img src="./assets/img/photos/g10.jpg" srcset="./assets/img/photos/g10@2x.jpg 2x" alt=""></figure>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
      <div class="col-lg-6">
        <h2 class="fs-16 text-uppercase text-muted mb-3">What Makes Us Different?</h2>
        <h3 class="display-3 mb-10">We bring <span class="underline-3 style-2 yellow">solutions</span> to make life easier for our customers.</h3>
        <div class="row gy-8">
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <img src="./assets/img/icons/solid/lamp.svg" class="svg-inject icon-svg icon-svg-xs solid-mono text-fuchsia me-4" alt="" />
              </div>
              <div>
                <h4 class="mb-1">Creativity</h4>
                <p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
              </div>
            </div>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <img src="./assets/img/icons/solid/bulb.svg" class="svg-inject icon-svg icon-svg-xs solid-mono text-violet me-4" alt="" />
              </div>
              <div>
                <h4 class="mb-1">Innovative Thinking</h4>
                <p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
              </div>
            </div>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <img src="./assets/img/icons/solid/puzzle.svg" class="svg-inject icon-svg icon-svg-xs solid-mono text-orange me-4" alt="" />
              </div>
              <div>
                <h4 class="mb-1">Rapid Solutions</h4>
                <p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
              </div>
            </div>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <img src="./assets/img/icons/solid/headphone.svg" class="svg-inject icon-svg icon-svg-xs solid-mono text-green me-4" alt="" />
              </div>
              <div>
                <h4 class="mb-1">Top-Notch Support</h4>
                <p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
              </div>
            </div>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-md-8 gy-10 align-items-center">
      <div class="col-lg-6 offset-lg-1 order-lg-2 position-relative">
        <figure class="rounded"><img class="img-fluid" src="./assets/img/photos/about27.jpg" srcset="./assets/img/photos/about27@2x.jpg 2x" alt="" /></figure>
        <div class="card shadow-lg position-absolute d-none d-md-block" style="top: 15%; left: -7%">
          <div class="card-body py-4 px-5">
            <div class="d-flex flex-row align-items-center">
              <div>
                <img src="./assets/img/icons/solid/cloud-group.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-3" alt="" />
                
              </div>
              <div>
                <h3 class="fs-25 counter mb-0 text-nowrap">25000+</h3>
                <p class="fs-16 lh-sm mb-0 text-nowrap">Happy Clients</p>
              </div>
            </div>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
        <div class="card shadow-lg position-absolute text-center d-none d-md-block" style="bottom: 10%; left: -10%;">
          <div class="card-body p-6">
            <div class="progressbar semi-circle fuchsia mb-3" data-value="80"></div>
            <h4 class="mb-0">Time Saved</h4>
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!--/column -->
      <div class="col-lg-5">
        <h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">What Makes Us Different?</h2>
        <h3 class="display-4 mb-4 me-lg-n5">We make spending stress free so you have the perfect control.</h3>
        <p class="mb-6">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus. Integer posuere erat a ante venenatis dapibus posuere velit.</p>
        <ul class="icon-list bullet-bg bullet-soft-primary">
          <li><i class="uil uil-check"></i>Aenean eu leo quam. Pellentesque ornare.</li>
          <li><i class="uil uil-check"></i>Nullam quis risus eget urna mollis ornare.</li>
          <li><i class="uil uil-check"></i>Donec id elit non mi porta gravida at eget.</li>
        </ul>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container pt-12 pt-md-14 pb-14 pb-md-16">
    <div class="row gx-md-8 gx-xl-12 gy-6 align-items-center">
      <div class="col-md-8 col-lg-6 mx-auto">
        <div class="img-mask mask-1"><img src="./assets/img/photos/about29.jpg" alt="" /></div>
      </div>
      <!--/column -->
      <div class="col-lg-6">
        <h2 class="display-5 mb-5">Hi, I'm Julia, a documentary wedding and couples photographer currently working from and based in London.</h2>
        <p class="mb-6">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio. Sed posuere consectetur est at lobortis facilisis in.</p>
        <div class="row counter-wrapper gy-6">
          <div class="col-md-4">
            <h3 class="counter">500K+</h3>
            <p>Shots Taken</p>
          </div>
          <!--/column -->
          <div class="col-md-4">
            <h3 class="counter">500+</h3>
            <p>Happy Clients</p>
          </div>
          <!--/column -->
          <div class="col-md-4">
            <h3 class="counter">25</h3>
            <p>Awards Won</p>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
    </div>
    <!-- /.row -->
    <div class="row gx-md-8 gx-xl-12 gy-6 mt-8">
      <div class="col-lg-4">
        <h3>My Skills</h3>
        <p>Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna vel consectetur purus sit amet fermentum.</p>
        <ul class="progress-list">
          <li>
            <p>Photoshop</p>
            <div class="progressbar line soft-primary" data-value="100"></div>
          </li>
          <li>
            <p>Final Cut</p>
            <div class="progressbar line soft-primary" data-value="80"></div>
          </li>
          <li>
            <p>Motion Video</p>
            <div class="progressbar line soft-primary" data-value="85"></div>
          </li>
          <li>
            <p>Manupilation</p>
            <div class="progressbar line soft-primary" data-value="75"></div>
          </li>
        </ul>
        <!-- /.progress-list -->
      </div>
      <!-- /column -->
      <div class="col-lg-4">
        <h3>Why Choose Me?</h3>
        <p>Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies. Cras mattis consectetur purus amet fermentum.</p>
        <ul class="icon-list bullet-bg bullet-soft-primary">
          <li><i class="uil uil-check"></i>Aenean eu leo quam pellentesque.</li>
          <li><i class="uil uil-check"></i>Nullam quis risus eget urna mollis.</li>
          <li><i class="uil uil-check"></i>Donec id elit non mi porta gravida.</li>
          <li><i class="uil uil-check"></i>Fusce dapibus tellus ac commodo.</li>
          <li><i class="uil uil-check"></i>Cras justo odio dapibus ac facilisis in.</li>
        </ul>
      </div>
      <!-- /column -->
      <div class="col-lg-4">
        <h3>My Process</h3>
        <div class="d-flex flex-row mb-5">
          <div>
            <span class="icon btn btn-circle btn-soft-primary pe-none mt-1 me-5"><span class="number fs-18">1</span></span>
          </div>
          <div>
            <h5 class="mb-1">Collect Ideas</h5>
            <p class="mb-0">Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.</p>
          </div>
        </div>
        <div class="d-flex flex-row mb-5">
          <div>
            <span class="icon btn btn-circle btn-soft-primary pe-none mt-1 me-5"><span class="number fs-18">2</span></span>
          </div>
          <div>
            <h5 class="mb-1">Data Analysis</h5>
            <p class="mb-0">Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.</p>
          </div>
        </div>
        <div class="d-flex flex-row">
          <div>
            <span class="icon btn btn-circle btn-soft-primary pe-none mt-1 me-5"><span class="number fs-18">3</span></span>
          </div>
          <div>
            <h5 class="mb-1">Finalize Product</h5>
            <p class="mb-0">Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.</p>
          </div>
        </div>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-md-8 gx-xl-12 gy-6 align-items-center">
      <div class="col-md-8 col-lg-6 order-lg-2 mx-auto">
        <div class="img-mask mask-2"><img src="./assets/img/photos/about30.jpg" alt="" /></div>
      </div>
      <!--/column -->
      <div class="col-lg-6">
        <h2 class="display-5 mb-3">About Me</h2>
        <p class="lead fs-lg">I'm Caitlyn Sandbox, a photographer specializing in food, drink and product photography.</p>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula.</p>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur.</p>
        <a href="#" class="btn btn-primary rounded-pill mt-2">Learn More</a>
      </div>
      <!--/column -->
    </div>
    <!-- /.row -->
    <div class="row gx-md-8 gx-xl-12 mt-10 mt-md-13">
      <div class="col-lg-4">
        <h2 class="display-5 mb-3">My Working Process</h2>
        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus. Aenean eu leo quam.</p>
      </div>
      <!-- /column -->
      <div class="col-lg-8">
        <div class="row gy-6 gx-md-8 gx-xl-12">
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <span class="icon btn btn-circle btn-primary pe-none me-4"><span class="number fs-18">1</span></span>
              </div>
              <div>
                <h4 class="mb-1">Concept</h4>
                <p class="mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
              </div>
            </div>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <span class="icon btn btn-circle btn-primary pe-none me-4"><span class="number fs-18">2</span></span>
              </div>
              <div>
                <h4 class="mb-1">Prepare</h4>
                <p class="mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
              </div>
            </div>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <span class="icon btn btn-circle btn-primary pe-none me-4"><span class="number fs-18">3</span></span>
              </div>
              <div>
                <h4 class="mb-1">Retouch</h4>
                <p class="mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
              </div>
            </div>
          </div>
          <!--/column -->
          <div class="col-md-6">
            <div class="d-flex flex-row">
              <div>
                <span class="icon btn btn-circle btn-primary pe-none me-4"><span class="number fs-18">4</span></span>
              </div>
              <div>
                <h4 class="mb-1">Finalize</h4>
                <p class="mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
              </div>
            </div>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->