<style>
  .footer-top .custom-block {
    display: block;
  }
  .photo-instagrams .item.insta-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #222529;
    opacity: .8;
    transition: opacity .25s;
  }
  .photo-instagrams .item.insta-item:hover:before {
    opacity: 0;
  }
  .photo-instagrams .item a {
    position: static;
  }
  .footer-top-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .footer-top .footer-top-bottom .widget {
    flex: inherit;
  }
  .footer-top .footer-top-bottom .widget_newsletter {
    flex: 1;
    max-width: 650px;
  }
  .footer .footer-top .widget {
    margin: 0 30px 20px 0;
  }
  .footer .footer-top .widget:last-child {
    margin: 0 0 20px 0;
  }
  .footer-top .footer-top-bottom .widget.follow-us {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
    margin-left: auto;
  }
  @media(max-width: 991px) {
    .footer-top .footer-top-bottom .widget {
      flex: 0 0 100%;
      width: 100%;
      justify-content: flex-start !important;
    }
  }
</style>
<div class="row">
  <div class="col-lg-12">
    <div class="widget widget-block w-100">
      <div class="blocks">
        <div class="porto-block" style="background-color: #212529;">
          <div class="row no-padding">
            <div class="py-4 py-lg-5  col-md-4 col-lg-3 mt-0 mb-0 d-flex align-items-center" style="padding-left: 6vw;">
              <div class="wpb_wrapper vc_column-inner">
                <div class="porto-sicon-box mb-0 style_1 default-icon">
                  <div class="porto-sicon-default">
                    <div class="porto-just-icon-wrapper" style="text-align: center;">
                      <div class="porto-icon none" style="color: #ffffff; font-size: 50px; display: inline-block;"><i class="fab fa-instagram"></i></div>
                    </div>
                  </div>
                  <div class="porto-sicon-header">
                    <h2 class="porto-sicon-title" style="font-weight: 600; font-size: 18px; line-height: 18px; color: #ffffff;">Follow Us on Instagram</h2>
                    <p style="font-weight: 400; font-size: 13px; line-height: 13px; color: rgba(255, 255, 255, 0.7);">@portoecommerce</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="vc_column_container col-md-8 col-lg-9">
              <div class="wpb_wrapper vc_column-inner">
                <div class="wpb_text_column wpb_content_element mb-0">
                  {{block class="Smartwave\Porto\Block\Template" name="instagram" padding_item="0" template_type="carousel" template="Smartwave_SocialFeed::instagramphotos.phtml"}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container footer-top-bottom">
  <div class="widget widget_text">
    <div class="textwidget">
      <div class="porto-sicon-box mb-0 style_1 default-icon">
        <div class="porto-sicon-default">
          <div class="porto-just-icon-wrapper" style="text-align: center;">
            <div class="porto-icon none" style="color: #ffffff; font-size: 45px; display: inline-block;"><i class="far fa-envelope"></i></div>
          </div>
        </div>
        <div class="porto-sicon-header">
          <h2 class="porto-sicon-title" style="font-weight: 600; font-size: 18px; line-height: 18px; color: #ffffff;">Get Special Offers and Savings</h2>
          <p style="font-weight: 400; font-size: 13px; line-height: 13px; color: rgba(255, 255, 255, 0.7);margin: 0;">Get all the latest information on Events, Sales and Offers.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="widget widget_text widget_newsletter">
    <div class="textwidget">
      {{block class="Magento\Newsletter\Block\Subscribe" name="home.newsletter" template="subscribe_form.phtml"}}
      <style>
        .single-subscribe .newsletter .control {
          justify-content: center;
        }
        .footer .newsletter input {
          height: 48px;
          padding-right: 12px;
          border-radius: 2rem 0 0 2rem;
          color: #777;
          border: none;
          margin: 0;
          padding-left: 20px;
          font-size: 12px;
          font-style: italic;
        }
        .footer .newsletter .action.subscribe {
          display: table-cell;
          vertical-align: top;
          height: 48px;
          text-transform: uppercase;
          border-radius: 0 2rem 2rem 0;
          background: #fff;
          margin-right: 0;
          padding: 0 25px;
          color: #222529;
          font-size: 1em;
          letter-spacing: 0;
        }
      </style>
    </div>
  </div>
  <div class="widget follow-us">
    <style>
      .footer .follow-us .share-links a {
        width: 30px;
        height: 30px;
        border: none;
        margin-left: 2em;
      }
      .footer .follow-us .share-links a:not(:hover) {
        color: #525252;
        background-color: #fff;
      }
      @media(max-width: 991px) {
        .footer .follow-us .share-links a {
          margin-left: 0;
          margin-right: 2em;
        }
      }
    </style>
    <div class="share-links">
      <a href="#" rel="nofollow" target="_blank" title="Facebook" class="share-facebook">Facebook</a>
      <a href="#" rel="nofollow" target="_blank" title="Twitter" class="share-twitter">Twitter</a>
      <a href="#" rel="nofollow" target="_blank" title="Linkedin" class="share-linkedin">Linkedin</a>
    </div>
  </div>
</div>
