<!-- Devices v2 Section -->
            <div class="u-gradient-half-primary-v1 u-devices-v2">
              <div class="container u-space-3 position-relative z-index-2">
                <!-- Title -->
                <div class="w-md-80 w-lg-50 text-center mx-auto">
                  <span class="u-icon bg-white u-icon--xl rounded-circle mb-4">
                    <span class="fas fa-paper-plane text-primary u-icon__inner font-size-32"></span>
                  </span>
                  <h2 class="h1 text-white">Device <span class="font-weight-bold">friendly</span> features</h2>
                  <p class="lead u-text-light mb-0">Your website is fully responsive so visitors can view your content from their choice of device.</p>
                </div>
                <!-- End Title -->
              </div>

              <!-- Devices v2 -->
              <div class="d-none d-lg-block">
                <!-- SVG Tablet Mockup -->
                <div class="u-devices-v2__tablet">
                  <figure class="w-75 u-devices-v2__tablet-svg">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 603 892" style="enable-background:new 0 0 603 892;" xml:space="preserve">
                      <path id="BG_Color" class="u-fill-white" d="M603,51.8v788.5c0,28.5-23.3,51.8-51.8,51.8H51.8C23.3,892,0,868.7,0,840.2L0,51.8
                        C0,23.3,23.3,0,51.8,0l499.5,0C579.7,0,603,23.3,603,51.8z"/>
                      <circle id="tabletFrameTouchID1" class="u-fill-gray-75" cx="302.5" cy="846.5" r="25.5"/>
                      <circle id="tabletFrameCameraID1" class="u-fill-gray-75" cx="301.8" cy="45.9" r="6.2"/>
                      <g>
                        <defs>
                          <rect id="tabletFrameID1" x="36" y="86" width="533" height="711"/>
                        </defs>
                        <clipPath id="tabletFrameID2">
                          <use xlink:href="#tabletFrameID1"  style="overflow:visible;"/>
                        </clipPath>
                        <g style="clip-path:url(#tabletFrameID2);">
                          <!-- Apply your (533px width to 711px height) image here -->
                          <image style="overflow:visible;" width="533" height="711" xlink:href="../../assets/img/533x711/img2.jpg" transform="matrix(1 0 0 1 36 86)"></image>
                        </g>
                        <use class="u-fill-none u-stroke-light-blue-125" xlink:href="#tabletFrameID1" stroke-miterlimit="10" style="overflow: visible;"/>
                      </g>
                    </svg>
                  </figure>
                </div>
                <!-- End SVG Tablet Mockup -->

                <!-- SVG Phone Mockup -->
                <div class="u-devices-v2__phone">
                  <figure class="w-75 u-devices-v2__phone-svg">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 317.5 665" style="enable-background:new 0 0 317.5 665;" xml:space="preserve">
                      <path class="u-fill-white" d="M263,666H54c-29.7,0-54-24.3-54-54V55C0,25.3,24.3,1,54,1h209c29.7,0,54,24.3,54,54v557
                        C317,641.7,292.7,666,263,666z"/>
                      <circle class="u-fill-gray-75" cx="159.5" cy="619.5" r="25.5"/>
                      <path class="u-fill-gray-75" fill-rule="evenodd" clip-rule="evenodd" d="M180,52h-42c-2.2,0-4-1.8-4-4v0c0-2.2,1.8-4,4-4h42c2.2,0,4,1.8,4,4v0C184,50.2,182.2,52,180,52z"/>
                      <g>
                        <defs>
                          <rect id="phoneFrameID1" x="19.4" y="81.3" width="280" height="500"/>
                        </defs>
                        <clipPath id="phoneFrameID2">
                          <use xlink:href="#phoneFrameID1"  style="overflow:visible;"/>
                        </clipPath>
                        <g style="clip-path:url(#phoneFrameID2);">
                          <!-- Apply your (282px width to 500px height) image here -->
                          <image style="overflow:visible;" width="282" height="500" xlink:href="../../assets/img/282x500/img2.jpg" transform="matrix(1 0 0 1 18 81)"></image>
                        </g>
                        <use class="u-fill-none u-stroke-light-blue-125" xlink:href="#phoneFrameID1" stroke-miterlimit="10" style="overflow: visible;"/>
                      </g>
                    </svg>
                  </figure>
                </div>
                <!-- End SVG Phone Mockup -->
              </div>
              <!-- End Devices v2 -->

              <!-- SVG Background Shape -->
              <figure class="w-100 u-content-centered-y position-absolute-bottom-right-0">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 1653 222.1" style="enable-background:new 0 0 1653 222.1;" xml:space="preserve">
                  <g opacity=".3">
                    <path class="u-fill-none u-stroke-white" stroke-miterlimit="10" d="M0.5,200.2c0,0,1.3,0.4,3.8,1.2"/>
                    <path class="u-fill-none u-stroke-white" stroke-miterlimit="10" stroke-dasharray="7.9643,7.9643" d="M12,203.4c31.8,8.4,125.8,28.7,233.9,11.3c74.3-12,150.4-23.1,219.4-55c51.4-23.8,93.7-64.1,147.1-84.2
                      c24.2-9.1,49.4-15.5,74.7-20.5c65.8-12.9,137.3-16.7,205.9-8c67.6,8.6,125.9,33.9,179.7,52.6c335.2,116.6,538.6-59.1,574.2-93.5"
                      />
                    <path class="u-fill-none u-stroke-white" stroke-miterlimit="10" d="M1649.7,3.4c1.8-1.9,2.8-2.9,2.8-2.9"/>
                  </g>
                  <g>
                    <circle class="u-fill-none u-stroke-white" stroke-width="12" stroke-miterlimit="10" stroke-opacity=".15" cx="1286.1" cy="139.1" r="7.9"/>
                    <circle class="u-fill-none u-stroke-white" stroke-width="5" stroke-miterlimit="10" cx="1286.1" cy="139.1" r="4.5"/>
                  </g>
                  <g>
                    <circle class="u-fill-none u-stroke-white" stroke-width="12" stroke-miterlimit="10" stroke-opacity=".15" cx="597.1" cy="82.1" r="7.9"/>
                    <circle class="u-fill-none u-stroke-white" stroke-width="5" stroke-miterlimit="10" cx="597.1" cy="82.1" r="4.5"/>
                  </g>
                  <g>
                    <circle class="u-fill-none u-stroke-white" stroke-width="12" stroke-miterlimit="10" stroke-opacity=".15" cx="448.1" cy="166.1" r="7.9"/>
                    <circle class="u-fill-none u-stroke-white" stroke-width="5" stroke-miterlimit="10" cx="448.1" cy="166.1" r="4.5"/>
                  </g>
                </svg>
              </figure>
              <!-- End SVG Background Shape -->
            </div>
            <!-- End Devices v2 Section -->